diff --git a/.changeset/red-pigs-try.md b/.changeset/red-pigs-try.md
new file mode 100644
index 000000000..bf42917fe
--- /dev/null
+++ b/.changeset/red-pigs-try.md
@@ -0,0 +1,35 @@
+---
+'@lion/accordion': patch
+'@lion/button': patch
+'@lion/calendar': patch
+'@lion/checkbox-group': patch
+'@lion/collapsible': patch
+'@lion/combobox': patch
+'@lion/dialog': patch
+'@lion/fieldset': patch
+'@lion/form': patch
+'@lion/form-core': patch
+'@lion/helpers': patch
+'@lion/icon': patch
+'@lion/input': patch
+'@lion/input-amount': patch
+'@lion/input-date': patch
+'@lion/input-datepicker': patch
+'@lion/input-email': patch
+'@lion/input-iban': patch
+'@lion/input-range': patch
+'@lion/input-stepper': patch
+'@lion/listbox': patch
+'@lion/pagination': patch
+'@lion/progress-indicator': patch
+'@lion/radio-group': patch
+'@lion/select': patch
+'@lion/ajax': patch
+'@lion/core': patch
+'@lion/form-integrations': patch
+'@lion/localize': patch
+'@lion/overlays': patch
+'@lion/validate-messages': patch
+---
+
+use mdjs-preview in docs for lit compatibility
diff --git a/README.md b/README.md
index fb5c4ff8d..f1c3c4f8a 100644
--- a/README.md
+++ b/README.md
@@ -67,7 +67,7 @@ npm i @lion/<package-name>
 **This is the main use case for lion**. To import component classes, and extend them for your own design system's components.
 
 ```js
-import { css } from '@lion/core';
+import { css } from '@mdjs/mdjs-preview';
 import { LionInput } from '@lion/input';
 
 class MyInput extends LionInput {
diff --git a/docs/blog/extending-lions-website.md b/docs/blog/extending-lions-website.md
index 00a770745..889a5ef37 100644
--- a/docs/blog/extending-lions-website.md
+++ b/docs/blog/extending-lions-website.md
@@ -84,7 +84,7 @@ Let's convert an example page
 `lion-calendar` is a reusable and accessible calendar view. It depends on [calendar](?path=/docs/calendar--default-story).
 
 ```js script
-import { html, css } from '@lion/core';
+import { html, css } from '@mdjs/mdjs-preview';
 import './lion-calendar.js';
 
 export default {
@@ -103,7 +103,7 @@ export default {
 `lion-calendar` is a reusable and accessible calendar view. It depends on [calendar](../../path/to/calendar.md).
 
 ```js script
-import { html, css } from '@lion/core';
+import { html, css } from '@mdjs/mdjs-preview';
 import '@lion/calendar/define';
 ```
 
diff --git a/docs/blog/introducing-lions-website.md b/docs/blog/introducing-lions-website.md
index b78bd3865..9ca867ac8 100644
--- a/docs/blog/introducing-lions-website.md
+++ b/docs/blog/introducing-lions-website.md
@@ -36,7 +36,7 @@ Let's convert an example page
 `lion-calendar` is a reusable and accessible calendar view. It depends on [calendar](?path=/docs/calendar--default-story).
 
 ```js script
-import { html, css } from '@lion/core';
+import { html, css } from '@mdjs/mdjs-preview';
 import './lion-calendar.js';
 
 export default {
@@ -55,7 +55,7 @@ export default {
 `lion-calendar` is a reusable and accessible calendar view. It depends on [calendar](../../path/to/calendar.md).
 
 ```js script
-import { html, css } from '@lion/core';
+import { html, css } from '@mdjs/mdjs-preview';
 import '@lion/calendar/define';
 ```
 
diff --git a/docs/components/content/accordion/features.md b/docs/components/content/accordion/features.md
index a4d7535e2..eeeebc258 100644
--- a/docs/components/content/accordion/features.md
+++ b/docs/components/content/accordion/features.md
@@ -1,7 +1,7 @@
 # Content >> Accordion >> Features ||20
 
 ```js script
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 
 import '@lion/accordion/define';
 ```
diff --git a/docs/components/content/accordion/overview.md b/docs/components/content/accordion/overview.md
index 972bdf3f0..0a94ba68a 100644
--- a/docs/components/content/accordion/overview.md
+++ b/docs/components/content/accordion/overview.md
@@ -4,7 +4,7 @@ A web component that can be used to toggle the display of sections of content.
 Its purpose is to reduce the need to scroll when presenting multiple sections of content on a single page. Accordions often allow users to get the big picture before focusing on details.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/accordion/define';
 ```
 
diff --git a/docs/components/content/collapsible/examples.md b/docs/components/content/collapsible/examples.md
index ef5708c9d..9efdc2c63 100644
--- a/docs/components/content/collapsible/examples.md
+++ b/docs/components/content/collapsible/examples.md
@@ -1,7 +1,7 @@
 # Content >> Collapsible >> Examples ||30
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/collapsible/define';
 import '@lion/button/define';
 import './assets/CustomCollapsible.js';
diff --git a/docs/components/content/collapsible/features.md b/docs/components/content/collapsible/features.md
index b8f569000..fdd454ee9 100644
--- a/docs/components/content/collapsible/features.md
+++ b/docs/components/content/collapsible/features.md
@@ -1,7 +1,7 @@
 # Content >> Collapsible >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/collapsible/define';
 ```
 
diff --git a/docs/components/content/collapsible/overview.md b/docs/components/content/collapsible/overview.md
index ff80e8013..f739b3ffa 100644
--- a/docs/components/content/collapsible/overview.md
+++ b/docs/components/content/collapsible/overview.md
@@ -3,7 +3,7 @@
 A combination of a button (the invoker) and a chunk of 'extra content'. This web component can be extended with an animation to disclose the extra content. There are two slots available respectively; `invoker` to specify the collapsible's invoker and `content` for the extra content of the collapsible.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/collapsible/define';
 ```
 
diff --git a/docs/components/content/progress-indicator/examples.md b/docs/components/content/progress-indicator/examples.md
index 3baa49193..28b28f47e 100644
--- a/docs/components/content/progress-indicator/examples.md
+++ b/docs/components/content/progress-indicator/examples.md
@@ -1,7 +1,7 @@
 # Content >> Progress Indicator >> Examples ||30
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import './assets/custom-progress-indicator.js';
 ```
 
diff --git a/docs/components/content/tabs/examples.md b/docs/components/content/tabs/examples.md
index f9c46d068..f353901f7 100644
--- a/docs/components/content/tabs/examples.md
+++ b/docs/components/content/tabs/examples.md
@@ -1,7 +1,7 @@
 # Content >> Tabs >> Examples ||30
 
 ```js script
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import './src/lea-tabs.js';
 import './src/lea-tab.js';
 import './src/lea-tab-panel.js';
diff --git a/docs/components/content/tabs/features.md b/docs/components/content/tabs/features.md
index 79b42ea5d..d4ef4821e 100644
--- a/docs/components/content/tabs/features.md
+++ b/docs/components/content/tabs/features.md
@@ -1,7 +1,7 @@
 # Content >> Tabs >> Features ||20
 
 ```js script
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 
 import '@lion/tabs/define';
 ```
diff --git a/docs/components/content/tabs/overview.md b/docs/components/content/tabs/overview.md
index a90d222a1..32a5b9000 100644
--- a/docs/components/content/tabs/overview.md
+++ b/docs/components/content/tabs/overview.md
@@ -3,7 +3,7 @@
 A web component that allows users to quickly move between a small number of equally important views.
 
 ```js script
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import '@lion/tabs/define';
 ```
 
diff --git a/docs/components/icons/icon/features.md b/docs/components/icons/icon/features.md
index 1bf59957d..694ed8aeb 100644
--- a/docs/components/icons/icon/features.md
+++ b/docs/components/icons/icon/features.md
@@ -1,7 +1,7 @@
 # Icons >> Icon >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { icons } from '@lion/icon';
 import './assets/iconset-bugs.js';
 import './assets/iconset-misc.js';
diff --git a/docs/components/icons/icon/overview.md b/docs/components/icons/icon/overview.md
index 48a4902ab..d1920239a 100644
--- a/docs/components/icons/icon/overview.md
+++ b/docs/components/icons/icon/overview.md
@@ -3,7 +3,7 @@
 A web component for displaying icons.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { icons } from '@lion/icon';
 import '@lion/icon/define';
 
diff --git a/docs/components/inputs/calendar/features.md b/docs/components/inputs/calendar/features.md
index 470c2edf4..30822ee02 100644
--- a/docs/components/inputs/calendar/features.md
+++ b/docs/components/inputs/calendar/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Calendar >> Features ||20
 
 ```js script
-import { html, css } from '@lion/core';
+import { html, css } from '@mdjs/mdjs-preview';
 import '@lion/calendar/define';
 ```
 
diff --git a/docs/components/inputs/calendar/overview.md b/docs/components/inputs/calendar/overview.md
index c198a9ae7..028a5657a 100644
--- a/docs/components/inputs/calendar/overview.md
+++ b/docs/components/inputs/calendar/overview.md
@@ -3,7 +3,7 @@
 A reusable and accessible calendar view web component.
 
 ```js script
-import { html, css } from '@lion/core';
+import { html, css } from '@mdjs/mdjs-preview';
 import '@lion/calendar/define';
 ```
 
diff --git a/docs/components/inputs/checkbox-group/features.md b/docs/components/inputs/checkbox-group/features.md
index fb0347191..695c87043 100644
--- a/docs/components/inputs/checkbox-group/features.md
+++ b/docs/components/inputs/checkbox-group/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Checkbox Group >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/checkbox-group/define';
 ```
 
diff --git a/docs/components/inputs/checkbox-group/overview.md b/docs/components/inputs/checkbox-group/overview.md
index f9b33842a..b717bcc36 100644
--- a/docs/components/inputs/checkbox-group/overview.md
+++ b/docs/components/inputs/checkbox-group/overview.md
@@ -6,7 +6,7 @@ Its purpose is to provide a way for users to check **multiple** options amongst
 > You should use our `checkbox` elements as children in checkbox group.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/checkbox-group/define';
 ```
 
diff --git a/docs/components/inputs/combobox/examples.md b/docs/components/inputs/combobox/examples.md
index 97ed14e53..469a44dd5 100644
--- a/docs/components/inputs/combobox/examples.md
+++ b/docs/components/inputs/combobox/examples.md
@@ -1,7 +1,7 @@
 # Inputs >> Combobox >> Examples ||30
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import './src/md-combobox/md-combobox.js';
 import './src/gh-combobox/gh-combobox.js';
 import './src/wa-combobox/wa-combobox.js';
diff --git a/docs/components/inputs/combobox/features.md b/docs/components/inputs/combobox/features.md
index a2aa7cf0e..fd848e932 100644
--- a/docs/components/inputs/combobox/features.md
+++ b/docs/components/inputs/combobox/features.md
@@ -13,7 +13,7 @@ availability of the popup.
 > Fore more information, consult [Combobox wai-aria design pattern](https://www.w3.org/TR/wai-aria-practices/#combobox)
 
 ```js script
-import { LitElement, html, repeat } from '@lion/core';
+import { LitElement, html, repeat } from '@mdjs/mdjs-preview';
 import { listboxData } from '../../../../packages/listbox/docs/listboxData.js';
 import { LionCombobox } from '../../../../packages/combobox/src/LionCombobox.js';
 import '@lion/listbox/define';
diff --git a/docs/components/inputs/combobox/overview.md b/docs/components/inputs/combobox/overview.md
index 5199a032c..ba81dd955 100644
--- a/docs/components/inputs/combobox/overview.md
+++ b/docs/components/inputs/combobox/overview.md
@@ -13,7 +13,7 @@ availability of the pop-up.
 > Fore more information, consult [Combobox wai-aria design pattern](https://www.w3.org/TR/wai-aria-practices/#combobox)
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { listboxData } from '../../../../packages/listbox/docs/listboxData.js';
 import '@lion/listbox/define';
 import '@lion/combobox/define';
diff --git a/docs/components/inputs/fieldset/features.md b/docs/components/inputs/fieldset/features.md
index 69b37e876..fdb0b8b50 100644
--- a/docs/components/inputs/fieldset/features.md
+++ b/docs/components/inputs/fieldset/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Fieldset >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { localize } from '@lion/localize';
 import { MinLength, Validator, Required } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
diff --git a/docs/components/inputs/fieldset/overview.md b/docs/components/inputs/fieldset/overview.md
index 89abb792d..99a14a189 100644
--- a/docs/components/inputs/fieldset/overview.md
+++ b/docs/components/inputs/fieldset/overview.md
@@ -1,7 +1,7 @@
 # Inputs >> Fieldset >> Overview ||10
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 
 import '@lion/input/define';
 import '@lion/fieldset/define';
diff --git a/docs/components/inputs/form/features.md b/docs/components/inputs/form/features.md
index eddac67bb..723efd4a4 100644
--- a/docs/components/inputs/form/features.md
+++ b/docs/components/inputs/form/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Form >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { Required } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import '@lion/input/define';
diff --git a/docs/components/inputs/form/overview.md b/docs/components/inputs/form/overview.md
index 65703c2d9..16b0162a4 100644
--- a/docs/components/inputs/form/overview.md
+++ b/docs/components/inputs/form/overview.md
@@ -1,7 +1,7 @@
 # Inputs >> Form >> Overview ||10
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 
 import '@lion/input/define';
 import '@lion/form/define';
diff --git a/docs/components/inputs/input-amount/features.md b/docs/components/inputs/input-amount/features.md
index 59de27318..4e6faf784 100644
--- a/docs/components/inputs/input-amount/features.md
+++ b/docs/components/inputs/input-amount/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Input Amount >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { MaxLength } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 
diff --git a/docs/components/inputs/input-amount/overview.md b/docs/components/inputs/input-amount/overview.md
index 32fbc4a4e..158c5774a 100644
--- a/docs/components/inputs/input-amount/overview.md
+++ b/docs/components/inputs/input-amount/overview.md
@@ -10,7 +10,7 @@ Valid characters are digits and separators. Formatting happens on-blur.
 If there are no valid characters in the input whatsoever, it will provide an error feedback.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-amount/define';
 ```
 
diff --git a/docs/components/inputs/input-date/features.md b/docs/components/inputs/input-date/features.md
index 58ef64290..497c1ca4a 100644
--- a/docs/components/inputs/input-date/features.md
+++ b/docs/components/inputs/input-date/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Input Date >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { MinDate, MinMaxDate, MaxDate } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { formatDate } from '@lion/localize';
diff --git a/docs/components/inputs/input-date/overview.md b/docs/components/inputs/input-date/overview.md
index f381586e7..29bba5e3f 100644
--- a/docs/components/inputs/input-date/overview.md
+++ b/docs/components/inputs/input-date/overview.md
@@ -3,7 +3,7 @@
 A web component based on the generic text input field. Its purpose is to provide a way for users to fill in a date.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { MinDate, MinMaxDate, MaxDate } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { formatDate } from '@lion/localize';
diff --git a/docs/components/inputs/input-datepicker/features.md b/docs/components/inputs/input-datepicker/features.md
index b02129408..3ff7832c9 100644
--- a/docs/components/inputs/input-datepicker/features.md
+++ b/docs/components/inputs/input-datepicker/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Input Datepicker >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { MinMaxDate, IsDateDisabled } from '@lion/form-core';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { formatDate } from '@lion/localize';
diff --git a/docs/components/inputs/input-datepicker/overview.md b/docs/components/inputs/input-datepicker/overview.md
index 18042e2fe..314c66088 100644
--- a/docs/components/inputs/input-datepicker/overview.md
+++ b/docs/components/inputs/input-datepicker/overview.md
@@ -5,7 +5,7 @@ For an input field with a big range, such as `birthday-input`, a datepicker is n
 We encourage using our standard [input-date](../input-date/overview.md) for this.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-datepicker/define';
 ```
 
diff --git a/docs/components/inputs/input-email/features.md b/docs/components/inputs/input-email/features.md
index 30c57cb13..a560825a3 100644
--- a/docs/components/inputs/input-email/features.md
+++ b/docs/components/inputs/input-email/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Input Email >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { Validator } from '@lion/form-core';
 import '@lion/input-email/define';
 ```
diff --git a/docs/components/inputs/input-email/overview.md b/docs/components/inputs/input-email/overview.md
index 0e9410947..16939b045 100644
--- a/docs/components/inputs/input-email/overview.md
+++ b/docs/components/inputs/input-email/overview.md
@@ -3,7 +3,7 @@
 A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an email.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-email/define';
 ```
 
diff --git a/docs/components/inputs/input-iban/features.md b/docs/components/inputs/input-iban/features.md
index 2b4fbc6b2..dc513318d 100644
--- a/docs/components/inputs/input-iban/features.md
+++ b/docs/components/inputs/input-iban/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Input Iban >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { IsCountryIBAN, IsNotCountryIBAN } from '@lion/input-iban';
 import '@lion/input-iban/define';
diff --git a/docs/components/inputs/input-iban/overview.md b/docs/components/inputs/input-iban/overview.md
index 84d6612f8..68cacf381 100644
--- a/docs/components/inputs/input-iban/overview.md
+++ b/docs/components/inputs/input-iban/overview.md
@@ -4,7 +4,7 @@ A web component based on the generic text input field.
 Its purpose is to provide a way for users to fill in an IBAN (International Bank Account Number).
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-iban/define';
 ```
 
diff --git a/docs/components/inputs/input-range/features.md b/docs/components/inputs/input-range/features.md
index 72b8a2320..ea4d5e172 100644
--- a/docs/components/inputs/input-range/features.md
+++ b/docs/components/inputs/input-range/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Input Range >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-range/define';
 ```
 
diff --git a/docs/components/inputs/input-range/overview.md b/docs/components/inputs/input-range/overview.md
index da661ffab..36e361cba 100644
--- a/docs/components/inputs/input-range/overview.md
+++ b/docs/components/inputs/input-range/overview.md
@@ -3,7 +3,7 @@
 A web component based on the native range input. Its purpose is to provide a way for users to select one value from a range of values.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-range/define';
 ```
 
diff --git a/docs/components/inputs/input-stepper/features.md b/docs/components/inputs/input-stepper/features.md
index 5c389cd0a..54dda92ca 100644
--- a/docs/components/inputs/input-stepper/features.md
+++ b/docs/components/inputs/input-stepper/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Input Stepper >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-stepper/define';
 ```
 
diff --git a/docs/components/inputs/input-stepper/overview.md b/docs/components/inputs/input-stepper/overview.md
index a5024a110..d68b20149 100644
--- a/docs/components/inputs/input-stepper/overview.md
+++ b/docs/components/inputs/input-stepper/overview.md
@@ -3,7 +3,7 @@
 A web component that enables the user to increase and decrease a numeric value by predefined range. It is a combination of two buttons and a number input field with an optional slot `after` to suffix the extra information.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-stepper/define';
 ```
 
diff --git a/docs/components/inputs/input/features.md b/docs/components/inputs/input/features.md
index c4fa529c6..39eeddef6 100644
--- a/docs/components/inputs/input/features.md
+++ b/docs/components/inputs/input/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Input >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input/define';
 ```
 
diff --git a/docs/components/inputs/input/overview.md b/docs/components/inputs/input/overview.md
index 8aa41290d..ca89da7ac 100644
--- a/docs/components/inputs/input/overview.md
+++ b/docs/components/inputs/input/overview.md
@@ -1,7 +1,7 @@
 # Inputs >> Input >> Overview ||10
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input/define';
 ```
 
diff --git a/docs/components/inputs/listbox/features.md b/docs/components/inputs/listbox/features.md
index 56139266b..693ad5736 100644
--- a/docs/components/inputs/listbox/features.md
+++ b/docs/components/inputs/listbox/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Listbox >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { listboxData } from './src/listboxData.js';
 import '@lion/listbox/define';
 ```
diff --git a/docs/components/inputs/listbox/overview.md b/docs/components/inputs/listbox/overview.md
index f5807a4e4..3f03e55f4 100644
--- a/docs/components/inputs/listbox/overview.md
+++ b/docs/components/inputs/listbox/overview.md
@@ -7,7 +7,7 @@ multiple options to be selected is a `multi-select listbox`.
 > From [listbox wai-aria best practices](https://www.w3.org/TR/wai-aria-practices/#Listbox)
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/listbox/define';
 ```
 
diff --git a/docs/components/inputs/radio-group/features.md b/docs/components/inputs/radio-group/features.md
index 921b7e3f2..786743ae4 100644
--- a/docs/components/inputs/radio-group/features.md
+++ b/docs/components/inputs/radio-group/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Radio Group >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/radio-group/define';
 import '@lion/radio-group/define';
 ```
diff --git a/docs/components/inputs/radio-group/overview.md b/docs/components/inputs/radio-group/overview.md
index ad7ba1ba9..3239807ac 100644
--- a/docs/components/inputs/radio-group/overview.md
+++ b/docs/components/inputs/radio-group/overview.md
@@ -5,7 +5,7 @@ A web component that enhances the functionality of the native `<input type="radi
 You should use our `radio` inside this element.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/radio-group/define';
 ```
 
diff --git a/docs/components/inputs/select-rich/features.md b/docs/components/inputs/select-rich/features.md
index e463ec281..e722e6250 100644
--- a/docs/components/inputs/select-rich/features.md
+++ b/docs/components/inputs/select-rich/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Select Rich >> Features ||20
 
 ```js script
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import '@lion/listbox/define';
 import '@lion/listbox/define';
 import '@lion/select-rich/define';
diff --git a/docs/components/inputs/select-rich/overview.md b/docs/components/inputs/select-rich/overview.md
index e0b28f2b6..82764a52e 100644
--- a/docs/components/inputs/select-rich/overview.md
+++ b/docs/components/inputs/select-rich/overview.md
@@ -8,7 +8,7 @@ Its implementation is based on the following Design pattern:
 <https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html>
 
 ```js script
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import '@lion/listbox/define';
 import '@lion/select-rich/define';
 ```
diff --git a/docs/components/inputs/select/features.md b/docs/components/inputs/select/features.md
index bd1f40228..2421810de 100644
--- a/docs/components/inputs/select/features.md
+++ b/docs/components/inputs/select/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Select >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/select/define';
 ```
 
diff --git a/docs/components/inputs/select/overview.md b/docs/components/inputs/select/overview.md
index b66c34e4b..b21bbb1c7 100644
--- a/docs/components/inputs/select/overview.md
+++ b/docs/components/inputs/select/overview.md
@@ -6,7 +6,7 @@ You cannot use interactive elements inside the options. Avoid very long names to
 Sets of options where each option name starts with the same word or phrase can also significantly degrade usability for keyboard and screen reader users.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/select/define';
 ```
 
diff --git a/docs/components/inputs/textarea/features.md b/docs/components/inputs/textarea/features.md
index fa92c65fd..11550168d 100644
--- a/docs/components/inputs/textarea/features.md
+++ b/docs/components/inputs/textarea/features.md
@@ -1,7 +1,7 @@
 # Inputs >> Textarea >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/textarea/define';
 ```
 
diff --git a/docs/components/inputs/textarea/overview.md b/docs/components/inputs/textarea/overview.md
index 55ad46b1a..002781d82 100644
--- a/docs/components/inputs/textarea/overview.md
+++ b/docs/components/inputs/textarea/overview.md
@@ -4,7 +4,7 @@ A webcomponent that enhances the functionality of the native `<input type="texta
 Its purpose is to provide a way for users to write text that is multiple lines long.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/textarea/define';
 ```
 
diff --git a/docs/components/interaction/button/examples.md b/docs/components/interaction/button/examples.md
index dba1d599e..1053f7dd7 100644
--- a/docs/components/interaction/button/examples.md
+++ b/docs/components/interaction/button/examples.md
@@ -1,7 +1,7 @@
 # Interaction >> Button >> Examples ||30
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/button/define';
 import iconSvg from './src/icon.svg.js';
 ```
diff --git a/docs/components/interaction/button/features.md b/docs/components/interaction/button/features.md
index d65f3abe4..5bd087105 100644
--- a/docs/components/interaction/button/features.md
+++ b/docs/components/interaction/button/features.md
@@ -1,7 +1,7 @@
 # Interaction >> Button >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/button/define';
 ```
 
diff --git a/docs/components/interaction/button/overview.md b/docs/components/interaction/button/overview.md
index e90207387..ba14493cc 100644
--- a/docs/components/interaction/button/overview.md
+++ b/docs/components/interaction/button/overview.md
@@ -3,7 +3,7 @@
 A button web component that is easily stylable and accessible.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/button/define';
 ```
 
diff --git a/docs/components/interaction/dialog/features.md b/docs/components/interaction/dialog/features.md
index 01ab4c16c..a1af5abb5 100644
--- a/docs/components/interaction/dialog/features.md
+++ b/docs/components/interaction/dialog/features.md
@@ -4,7 +4,7 @@
 Its purpose is to make it easy to use our Overlay System declaratively.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/dialog/define';
 
 import { demoStyle } from './src/demoStyle.js';
diff --git a/docs/components/interaction/dialog/overview.md b/docs/components/interaction/dialog/overview.md
index 89c49f04b..46db4f998 100644
--- a/docs/components/interaction/dialog/overview.md
+++ b/docs/components/interaction/dialog/overview.md
@@ -4,7 +4,7 @@ A web component that wraps a modal dialog controller.
 Its purpose is to make it easy to use our Overlay System declaratively.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/dialog/define';
 
 import { demoStyle } from './src/demoStyle.js';
diff --git a/docs/components/interaction/tooltip/examples.md b/docs/components/interaction/tooltip/examples.md
index 313e1b34d..cd1834d6f 100644
--- a/docs/components/interaction/tooltip/examples.md
+++ b/docs/components/interaction/tooltip/examples.md
@@ -1,7 +1,7 @@
 # Interaction >> Tooltip >> Examples ||30
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/tooltip/define';
 ```
 
diff --git a/docs/components/interaction/tooltip/features.md b/docs/components/interaction/tooltip/features.md
index 2f46a1aea..40987fe5a 100644
--- a/docs/components/interaction/tooltip/features.md
+++ b/docs/components/interaction/tooltip/features.md
@@ -1,7 +1,7 @@
 # Interaction >> Tooltip >> Features ||20
 
 ```js script
-import { css, html } from '@lion/core';
+import { css, html } from '@mdjs/mdjs-preview';
 import { LionTooltip } from '@lion/tooltip';
 import '@lion/tooltip/define';
 ```
diff --git a/docs/components/interaction/tooltip/overview.md b/docs/components/interaction/tooltip/overview.md
index 4233cfae6..063978bf0 100644
--- a/docs/components/interaction/tooltip/overview.md
+++ b/docs/components/interaction/tooltip/overview.md
@@ -4,7 +4,7 @@ A web component used for basic popups on hover.
 Its purpose is to show content appearing when the user hovers over an invoker element with the cursor or with the keyboard, or if the invoker element is focused.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/tooltip/define';
 ```
 
diff --git a/docs/components/navigation/pagination/features.md b/docs/components/navigation/pagination/features.md
index ba16c1a2a..a203b9bd0 100644
--- a/docs/components/navigation/pagination/features.md
+++ b/docs/components/navigation/pagination/features.md
@@ -1,7 +1,7 @@
 # Navigation >> Pagination >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/pagination/define';
 ```
 
diff --git a/docs/components/navigation/pagination/overview.md b/docs/components/navigation/pagination/overview.md
index 302fb4b12..396e49193 100644
--- a/docs/components/navigation/pagination/overview.md
+++ b/docs/components/navigation/pagination/overview.md
@@ -3,7 +3,7 @@
 A web component that handles pagination.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/pagination/define';
 ```
 
diff --git a/docs/components/navigation/steps/features.md b/docs/components/navigation/steps/features.md
index 2715db238..86e1a6891 100644
--- a/docs/components/navigation/steps/features.md
+++ b/docs/components/navigation/steps/features.md
@@ -1,7 +1,7 @@
 # Navigation >> Steps >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/steps/define';
 import '@lion/steps/define';
 ```
diff --git a/docs/components/navigation/steps/overview.md b/docs/components/navigation/steps/overview.md
index 4e6590340..01e9fa7fe 100644
--- a/docs/components/navigation/steps/overview.md
+++ b/docs/components/navigation/steps/overview.md
@@ -3,7 +3,7 @@
 A web component that can be used to break a single goal down into dependable sub-tasks.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/steps/define';
 ```
 
diff --git a/docs/docs/node-tools/babel-plugin-extend-docs/overview.md b/docs/docs/node-tools/babel-plugin-extend-docs/overview.md
index c8147c80c..6a225dc6a 100644
--- a/docs/docs/node-tools/babel-plugin-extend-docs/overview.md
+++ b/docs/docs/node-tools/babel-plugin-extend-docs/overview.md
@@ -83,7 +83,7 @@ paths: [
 We have an existing demo code which we want to reuse.
 
 ```js
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import 'source-pkg/counter/define';
 class MyApp extends LitElement {
   render() {
@@ -112,7 +112,7 @@ tag: {
 ### Result of Replacement of tags
 
 ```js
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import 'extension-pkg/counter/define';
 class MyApp extends LitElement {
   render() {
@@ -130,7 +130,7 @@ customElements.define('my-app', MyApp);
 We have an existing demo code which we want to reuse.
 
 ```js
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import { SourceCounter } from 'source-pkg/counter';
 class TenCounter extends SourceCounter {
   inc() {
@@ -167,7 +167,7 @@ variable: {
 ### Result of Replacement of classes
 
 ```js
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import { SourceCounter } from 'extension-pkg/counter';
 class TenCounter extends SourceCounter {
   inc() {
diff --git a/docs/docs/node-tools/providence-analytics/overview.md b/docs/docs/node-tools/providence-analytics/overview.md
index a971147a3..f9abbc1b8 100644
--- a/docs/docs/node-tools/providence-analytics/overview.md
+++ b/docs/docs/node-tools/providence-analytics/overview.md
@@ -1,7 +1,7 @@
 # Node Tools >> Providence Analytics >> Overview ||10
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { providenceFlowSvg, providenceInternalFlowSvg } from './assets/_mermaid.svg.js';
 ```
 
diff --git a/docs/docs/node-tools/rocket-preset-extend-lion-docs/overview.md b/docs/docs/node-tools/rocket-preset-extend-lion-docs/overview.md
index 1e027aa46..bf9b38c82 100644
--- a/docs/docs/node-tools/rocket-preset-extend-lion-docs/overview.md
+++ b/docs/docs/node-tools/rocket-preset-extend-lion-docs/overview.md
@@ -76,7 +76,7 @@ as an example this is a part of the lion docs for tabs
 
 ````md
 ```js script
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import '@lion/tabs/define';
 ```
 
diff --git a/docs/docs/systems/core/overview.md b/docs/docs/systems/core/overview.md
index f8d68ee29..85320daf5 100644
--- a/docs/docs/systems/core/overview.md
+++ b/docs/docs/systems/core/overview.md
@@ -7,7 +7,7 @@ To be sure a compatible version is used you should import it via this package.
 
 ```js
 // DO
-import { LitElement, html, render } from '@lion/core';
+import { LitElement, html, render } from '@mdjs/mdjs-preview';
 
 // DON'T
 import { LitElement, html, render } from 'lit-element';
@@ -29,7 +29,7 @@ npm i --save @lion/core
 ```
 
 ```js
-import { dedupeMixin, LitElement } from '@lion/core';
+import { dedupeMixin, LitElement } from '@mdjs/mdjs-preview';
 ```
 
 ### Example
diff --git a/docs/docs/systems/form/features.md b/docs/docs/systems/form/features.md
index 5754440c3..e41422ebd 100644
--- a/docs/docs/systems/form/features.md
+++ b/docs/docs/systems/form/features.md
@@ -4,7 +4,7 @@ This is a meta package to show interaction between various form elements.
 For usage and installation please see the appropriate packages.
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/button/define';
 import '@lion/checkbox-group/define';
 import '@lion/combobox/define';
diff --git a/docs/docs/systems/form/formatting-and-parsing.md b/docs/docs/systems/form/formatting-and-parsing.md
index d5d1520b6..f0f11f7e6 100644
--- a/docs/docs/systems/form/formatting-and-parsing.md
+++ b/docs/docs/systems/form/formatting-and-parsing.md
@@ -1,7 +1,7 @@
 # Systems >> Form >> Formatting and Parsing ||21
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input/define';
 import { Unparseable } from '@lion/form-core';
 import './assets/h-output.js';
diff --git a/docs/docs/systems/form/interaction-states.md b/docs/docs/systems/form/interaction-states.md
index 6aef30eae..f75c62083 100644
--- a/docs/docs/systems/form/interaction-states.md
+++ b/docs/docs/systems/form/interaction-states.md
@@ -1,7 +1,7 @@
 # Systems >> Form >> Interaction States ||22
 
 ```js script
-import { html, render } from '@lion/core';
+import { html, render } from '@mdjs/mdjs-preview';
 import { renderLitAsNode } from '@lion/helpers';
 import '@lion/input/define';
 import '@lion/input-date/define';
diff --git a/docs/docs/systems/form/styling.md b/docs/docs/systems/form/styling.md
index 0549c664f..66a1f29b6 100644
--- a/docs/docs/systems/form/styling.md
+++ b/docs/docs/systems/form/styling.md
@@ -1,7 +1,7 @@
 # Systems >> Form >> Styling ||40
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input/define';
 import '@lion/button/define';
 ```
diff --git a/docs/docs/systems/form/validate.md b/docs/docs/systems/form/validate.md
index 15829a17d..a37b0e590 100644
--- a/docs/docs/systems/form/validate.md
+++ b/docs/docs/systems/form/validate.md
@@ -1,7 +1,7 @@
 # Systems >> Form >> Validate ||30
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { LionInput } from '@lion/input';
 import '@lion/checkbox-group/define';
 import '@lion/checkbox-group/define';
diff --git a/docs/docs/systems/icon/overview.md b/docs/docs/systems/icon/overview.md
index 92b3f6302..a1566e5ee 100644
--- a/docs/docs/systems/icon/overview.md
+++ b/docs/docs/systems/icon/overview.md
@@ -9,7 +9,7 @@ application, and you don't need to worry about carefully coordinating the dynami
 For security reasons, icons are defined using lit-html templates to guarantee XSS safety:
 
 ```js
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 
 export default html` <svg focusable="false" ...>...</svg> `;
 ```
diff --git a/docs/docs/systems/localize/dates.md b/docs/docs/systems/localize/dates.md
index d3b2602a7..a3c306a97 100644
--- a/docs/docs/systems/localize/dates.md
+++ b/docs/docs/systems/localize/dates.md
@@ -12,7 +12,7 @@ With the `formatDate` you can safely display dates for all languages.
 The input value is `new Date('1987/05/12')`.
 
 ```js script
-import { css, html } from '@lion/core';
+import { css, html } from '@mdjs/mdjs-preview';
 import { formatNumber, formatNumberToParts, formatDate } from '@lion/localize';
 import allLocales from './assets/all-locales.js';
 
diff --git a/docs/docs/systems/localize/numbers.md b/docs/docs/systems/localize/numbers.md
index 5016f896d..8049fba3f 100644
--- a/docs/docs/systems/localize/numbers.md
+++ b/docs/docs/systems/localize/numbers.md
@@ -12,7 +12,7 @@ With the `formatNumber` you can safely display a number for all languages.
 The input value is `1234.56`.
 
 ```js script
-import { html, css } from '@lion/core';
+import { html, css } from '@mdjs/mdjs-preview';
 import { formatNumber, formatNumberToParts } from '@lion/localize';
 import allLocales from './assets/all-locales.js';
 
diff --git a/docs/docs/systems/localize/text.md b/docs/docs/systems/localize/text.md
index 7af547d9d..0b241c5f7 100644
--- a/docs/docs/systems/localize/text.md
+++ b/docs/docs/systems/localize/text.md
@@ -3,7 +3,7 @@
 ## As a function
 
 ```js script
-import { html, render, LitElement } from '@lion/core';
+import { html, render, LitElement } from '@mdjs/mdjs-preview';
 import { localize, formatNumber, formatDate, LocalizeMixin } from '@lion/localize';
 import '@lion/helpers/define';
 ```
diff --git a/docs/docs/systems/overlays/configuration.md b/docs/docs/systems/overlays/configuration.md
index db3db7776..c661df5ba 100644
--- a/docs/docs/systems/overlays/configuration.md
+++ b/docs/docs/systems/overlays/configuration.md
@@ -1,7 +1,7 @@
 # Systems >> Overlays >> Configuration ||40
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import './assets/demo-overlay-system.js';
 import './assets/applyDemoOverlayStyles.js';
 ```
diff --git a/docs/docs/systems/overlays/features.md b/docs/docs/systems/overlays/features.md
index bcf640bc1..1272672fe 100644
--- a/docs/docs/systems/overlays/features.md
+++ b/docs/docs/systems/overlays/features.md
@@ -1,7 +1,7 @@
 # Systems >> Overlays >> Features ||20
 
 ```js script
-import { html, render, LitElement } from '@lion/core';
+import { html, render, LitElement } from '@mdjs/mdjs-preview';
 import { renderLitAsNode } from '@lion/helpers';
 import {
   ArrowMixin,
@@ -481,7 +481,7 @@ By default, there are only a few `OverlayMixin` methods you need to override to
 - `_teardownOpenCloseListeners`, use this lifecycle hook to ensure that the listeners are removed when the OverlayController is tearing down. For example when the Web Component is disconnected from the DOM.
 
 ```js
-import { LitElement } from '@lion/core';
+import { LitElement } from '@mdjs/mdjs-preview';
 import { OverlayMixin } from '@lion/overlays';
 
 class MyOverlayWC extends OverlayMixin(LitElement) {
diff --git a/docs/docs/systems/overlays/form-integration.md b/docs/docs/systems/overlays/form-integration.md
index 28e6b3e81..5f0938e51 100644
--- a/docs/docs/systems/overlays/form-integration.md
+++ b/docs/docs/systems/overlays/form-integration.md
@@ -1,7 +1,7 @@
 # Systems >> Overlays >> Form Integrations ||60
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-datepicker/define';
 import '@lion/listbox/define';
 import '@lion/listbox/define';
diff --git a/docs/docs/systems/overlays/overview.md b/docs/docs/systems/overlays/overview.md
index 8e3bb0c86..895354adb 100644
--- a/docs/docs/systems/overlays/overview.md
+++ b/docs/docs/systems/overlays/overview.md
@@ -69,7 +69,7 @@ const ctrl = new OverlayController({
 Or creating your own Web Component which uses the Overlay System
 
 ```js
-import { LitElement, html } from '@lion/core';
+import { LitElement, html } from '@mdjs/mdjs-preview';
 import { OverlayMixin, withModalDialogConfig } from '@lion/overlays';
 
 class MyOverlayComponent extends OverlayMixin(LitElement) {
diff --git a/docs/docs/tools/ajax/features.md b/docs/docs/tools/ajax/features.md
index 9930d4ae1..afd094501 100644
--- a/docs/docs/tools/ajax/features.md
+++ b/docs/docs/tools/ajax/features.md
@@ -1,7 +1,7 @@
 # Tools >> Ajax >> Features ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { renderLitAsNode } from '@lion/helpers';
 import { ajax, createCacheInterceptors } from '@lion/ajax';
 import '@lion/helpers/define';
diff --git a/docs/docs/tools/ajax/overview.md b/docs/docs/tools/ajax/overview.md
index dda39dbb0..dafaae40d 100644
--- a/docs/docs/tools/ajax/overview.md
+++ b/docs/docs/tools/ajax/overview.md
@@ -1,7 +1,7 @@
 # Tools >> Ajax >> Overview ||10
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { renderLitAsNode } from '@lion/helpers';
 import { ajax, createCacheInterceptors } from '@lion/ajax';
 import '@lion/helpers/define';
diff --git a/docs/docs/tools/helpers/action-logger.md b/docs/docs/tools/helpers/action-logger.md
index 25dd54005..2da335c02 100644
--- a/docs/docs/tools/helpers/action-logger.md
+++ b/docs/docs/tools/helpers/action-logger.md
@@ -3,7 +3,7 @@
 A visual element to show action logs in demos `sb-action-logger`
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import '@lion/helpers/define';
 ```
 
diff --git a/docs/guides/how-to/create-a-custom-field.md b/docs/guides/how-to/create-a-custom-field.md
index 4ddf5d0bc..671f819b7 100644
--- a/docs/guides/how-to/create-a-custom-field.md
+++ b/docs/guides/how-to/create-a-custom-field.md
@@ -1,7 +1,7 @@
 # How To >> Create a custom field ||20
 
 ```js script
-import { html, css, LitElement } from '@lion/core';
+import { html, css, LitElement } from '@mdjs/mdjs-preview';
 import { LionField } from '@lion/form-core';
 import '@lion/form-core/define';
 import '../../docs/systems/form/assets/h-output.js';
diff --git a/docs/guides/how-to/extend-a-native-input.md b/docs/guides/how-to/extend-a-native-input.md
index d495b933d..4675ca6d5 100644
--- a/docs/guides/how-to/extend-a-native-input.md
+++ b/docs/guides/how-to/extend-a-native-input.md
@@ -1,7 +1,7 @@
 # How To >> Extend a native Input ||20
 
 ```js script
-import { html } from '@lion/core';
+import { html } from '@mdjs/mdjs-preview';
 import { LionInput } from '@lion/input';
 import { LionInputDate } from '@lion/input-date';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
diff --git a/docs/guides/how-to/get-started.md b/docs/guides/how-to/get-started.md
index b78877085..f2089f695 100644
--- a/docs/guides/how-to/get-started.md
+++ b/docs/guides/how-to/get-started.md
@@ -32,7 +32,7 @@ npm i @lion/<package-name>
 **This is the main use case for lion**. To import component classes, and extend them for your own design system's components.
 
 ```js
-import { css } from '@lion/core';
+import { css } from '@mdjs/mdjs-preview';
 import { LionInput } from '@lion/input';
 
 class MyInput extends LionInput {
diff --git a/docs/guides/principles/scoped-elements.md b/docs/guides/principles/scoped-elements.md
index d65fd64a7..3de9ed719 100644
--- a/docs/guides/principles/scoped-elements.md
+++ b/docs/guides/principles/scoped-elements.md
@@ -6,7 +6,7 @@ Whenever a lion component uses composition (meaning it uses another lion compone
 apply ScopedElementsMixin to make sure it uses the right version of this internal component.
 
 ```js
-import { ScopedElementsMixin, LitElement, html } from '@lion/core';
+import { ScopedElementsMixin, LitElement, html } from '@mdjs/mdjs-preview';
 
 import { LionInput } from '@lion/input';
 import { LionButton } from '@lion/button';
@@ -89,7 +89,7 @@ connectedCallback() {
 In a less complex case, we might just want to add a child node to the dom.
 
 ```js
-import { ScopedElementsMixin, LitElement, getScopedTagNamegetScopedTagName  } from '@lion/core';
+import { ScopedElementsMixin, LitElement, getScopedTagNamegetScopedTagName  } from '@mdjs/mdjs-preview';
 
 ...
 
diff --git a/packages/core/README.md b/packages/core/README.md
index fe9346c55..d77371057 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -6,7 +6,7 @@ It handles the version of `lit-element` and `lit-html`.
 In order to be sure a compatible version is used import it via this package.
 
 ```js
-import { LitElement, html, render } from '@lion/core';
+import { LitElement, html, render } from '@mdjs/mdjs-preview';
 ```
 
 ## Features
@@ -27,7 +27,7 @@ npm i --save @lion/core
 ```
 
 ```js
-import { dedupeMixin, LitElement } from '@lion/core';
+import { dedupeMixin, LitElement } from '@mdjs/mdjs-preview';
 ```
 
 ### Example