vueless 0.0.328 → 0.0.330

package/ui.form-radio/{index.vue → URadio.vue}

@@ -31,15 +31,14 @@
 <script setup>
 import { computed, inject, onMounted, ref, watchEffect, toValue } from "vue";
 
-import ULabel from "../ui.form-label";
-import { getRandomId, getDefault } from "../service.ui";
+import ULabel from "../ui.form-label/ULabel.vue";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
 
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
-import { URadio } from "./constants";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
+import { URadio } from "./constants.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "URadio", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const setRadioGroupSelectedItem = inject("setRadioGroupSelectedItem", null);
 const getRadioGroupName = inject("getRadioGroupName", null);

package/ui.form-radio/storybook/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-radio/{index.stories.js → storybook/stories.js}

@@ -1,7 +1,7 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import URadio from "../ui.form-radio";
-import UBadge from "../ui.text-badge";
+import URadio from "../../ui.form-radio/URadio.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 /**
  * The `URadio` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-radio)
@@ -17,14 +17,14 @@ export default {
     color: "brand",
   },
   argTypes: {
-    ...getArgTypes(URadio.name),
+    ...getArgTypes(URadio.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { URadio, UBadge },
   setup() {
-    const slots = getSlotNames(URadio.name);
+    const slots = getSlotNames(URadio.__name);
 
     return { args, slots };
   },

package/ui.form-radio/{composables/attrs.composable.js → useAttrs.js}

@@ -1,8 +1,8 @@
 import { computed } from "vue";
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 
 export default function useAttrs(props, { radioColor, radioSize }) {
   const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(

package/ui.form-radio-group/{index.vue → URadioGroup.vue}

@@ -30,16 +30,15 @@
 <script setup>
 import { computed, provide } from "vue";
 
-import ULabel from "../ui.form-label";
-import URadio from "../ui.form-radio";
-import { getDefault } from "../service.ui";
+import ULabel from "../ui.form-label/ULabel.vue";
+import URadio from "../ui.form-radio/URadio.vue";
+import { getDefault } from "../utils/utilUI.js";
 
-import defaultConfig from "./configs/default.config";
-import { URadioGroup } from "./constants";
-import useAttrs from "./composables/attrs.composable";
+import defaultConfig from "./config.js";
+import { URadioGroup } from "./constants.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "URadioGroup", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.form-radio-group/{Docs.mdx → storybook/Docs.mdx}

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../service.storybook";
+import { getSource } from "../../utils/utilStorybook.js";
 
-import * as stories from "./index.stories";
-import defaultConfig from "./configs/default.config?raw"
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.form-radio-group/{index.stories.js → storybook/stories.js}

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import URadioGroup from "../ui.form-radio-group";
-import URadio from "../ui.form-radio";
-import UAlert from "../ui.text-alert";
-import UCol from "../ui.container-col";
+import URadioGroup from "../../ui.form-radio-group/URadioGroup.vue";
+import URadio from "../../ui.form-radio/URadio.vue";
+import UAlert from "../../ui.text-alert/UAlert.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 
 /**
  * The `URadioGroup` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-radio-group)
@@ -24,14 +24,14 @@ export default {
     ],
   },
   argTypes: {
-    ...getArgTypes(URadioGroup.name),
+    ...getArgTypes(URadioGroup.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { URadioGroup, URadio, UAlert, UCol },
   setup() {
-    const slots = getSlotNames(URadioGroup.name);
+    const slots = getSlotNames(URadioGroup.__name);
 
     return { args, slots };
   },

package/ui.form-radio-group/{composables/attrs.composable.js → useAttrs.js}

@@ -1,9 +1,9 @@
 import { computed } from "vue";
 
-import { cva } from "../../service.ui";
-import useUI from "../../composable.ui";
+import { cva } from "../utils/utilUI.js";
+import useUI from "../composables/useUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
   const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(

package/ui.form-select/{index.vue → USelect.vue}

@@ -311,21 +311,20 @@
 import { ref, computed, nextTick, watch, useSlots, onMounted } from "vue";
 import { debounce, merge } from "lodash-es";
 
-import UIcon from "../ui.image-icon";
-import ULabel from "../ui.form-label";
-import UDropdownList from "../ui.dropdown-list";
-import { getRandomId, getDefault } from "../service.ui";
-import { isMac } from "../service.platform";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import ULabel from "../ui.form-label/ULabel.vue";
+import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
+import { isMac } from "../utils/utilPlatform.js";
 
-import SelectService from "./services/select.service";
-import useAttrs from "./composables/attrs.composable";
-import defaultConfig from "./configs/default.config";
-import { USelect, DIRECTION, KEY_CODES } from "./constants";
+import SelectService from "./utilSelect.js";
+import useAttrs from "./useAttrs.js";
+import defaultConfig from "./config.js";
+import { USelect, DIRECTION, KEY_CODES } from "./constants.js";
 
-import { useLocale } from "../composable.locale";
+import { useLocale } from "../composables/useLocale.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "USelect", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.form-select/storybook/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-select/{index.stories.js → storybook/stories.js}

@@ -1,10 +1,10 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import USelect from "../ui.form-select";
-import URow from "../ui.container-row";
-import UBadge from "../ui.text-badge";
-import UIcon from "../ui.image-icon";
-import ULink from "../ui.button-link";
+import USelect from "../../ui.form-select/USelect.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 /**
  * The `USelect` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-select)
@@ -24,7 +24,7 @@ export default {
     ],
   },
   argTypes: {
-    ...getArgTypes(USelect.name),
+    ...getArgTypes(USelect.__name),
     modelValue: { control: { type: "text" } },
   },
   parameters: {
@@ -43,7 +43,7 @@ const DefaultTemplate = (args) => ({
       return options?.find((option) => option.id === currentValue);
     }
 
-    const slots = getSlotNames(USelect.name);
+    const slots = getSlotNames(USelect.__name);
 
     return { args, slots, getSelectedBadge };
   },

package/ui.form-select/{composables/attrs.composable.js → useAttrs.js}

@@ -1,7 +1,7 @@
 import { computed } from "vue";
-import useUI from "../../composable.ui";
-import { cva, cx } from "../../service.ui";
-import defaultConfig from "../configs/default.config";
+import useUI from "../composables/useUI.js";
+import { cva, cx } from "../utils/utilUI.js";
+import defaultConfig from "./config.js";
 
 export default function useAttrs(props, { isTop, isOpen, selectedLabel: selectedLabelValue }) {
   const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(

package/ui.form-switch/{index.vue → USwitch.vue}

@@ -41,17 +41,16 @@
 import { computed } from "vue";
 import { merge } from "lodash-es";
 
-import UIcon from "../ui.image-icon";
-import ULabel from "../ui.form-label";
-import { getRandomId, getDefault } from "../service.ui";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import ULabel from "../ui.form-label/ULabel.vue";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
 
-import { USwitch } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
-import { useLocale } from "../composable.locale";
+import { USwitch } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
+import { useLocale } from "../composables/useLocale.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "USwitch", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.form-switch/{configs/default.config.js → config.js}

@@ -47,9 +47,21 @@ export default /*tw*/ {
     compoundVariants: [
       { toggleLabel: true, checked: true, class: "w-1/2 left-1" },
       { toggleLabel: true, checked: false, class: "w-1/2 right-1" },
-      { toggleLabel: false, checked: true, class: "bg-{color}-600 hover:bg-{color}-700 active:bg-{color}-800" },
-      { toggleLabel: false, checked: false, class: "bg-gray-300 hover:bg-gray-400 active:bg-gray-500" },
-      { toggleLabel: false, color: "grayscale", class: "bg-gray-700 hover:bg-gray-800 active:bg-gray-900" },
+      {
+        toggleLabel: false,
+        checked: true,
+        class: "bg-{color}-600 hover:bg-{color}-700 active:bg-{color}-800",
+      },
+      {
+        toggleLabel: false,
+        checked: false,
+        class: "bg-gray-300 hover:bg-gray-400 active:bg-gray-500",
+      },
+      {
+        toggleLabel: false,
+        color: "grayscale",
+        class: "bg-gray-700 hover:bg-gray-800 active:bg-gray-900",
+      },
     ],
   },
   i18n: {

package/ui.form-switch/storybook/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-switch/{index.stories.js → storybook/stories.js}

@@ -1,8 +1,8 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import USwitch from "../ui.form-switch";
-import UIcon from "../ui.image-icon";
-import URow from "../ui.container-row";
+import USwitch from "../../ui.form-switch/USwitch.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 /**
  * The `USwitch` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-switch)
@@ -15,14 +15,14 @@ export default {
     modelValue: false,
   },
   argTypes: {
-    ...getArgTypes(USwitch.name),
+    ...getArgTypes(USwitch.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { USwitch, UIcon },
   setup() {
-    const slots = getSlotNames(USwitch.name);
+    const slots = getSlotNames(USwitch.__name);
 
     return { args, slots };
   },

package/ui.form-switch/{composables/attrs.composable.js → useAttrs.js}

@@ -1,7 +1,7 @@
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props, { checked }) {

package/ui.form-switch/{services/variant.service.js → utilVariant.js}

@@ -1,4 +1,4 @@
-import { cva } from "../../service.ui";
+import { cva } from "../utils/utilUI.js";
 
 export default class VariantService {
   static get(config) {

package/ui.form-textarea/{index.vue → UTextarea.vue}

@@ -53,15 +53,14 @@
 <script setup>
 import { computed, onMounted, ref, watch, useSlots } from "vue";
 
-import ULabel from "../ui.form-label";
-import { getRandomId, getDefault } from "../service.ui";
+import ULabel from "../ui.form-label/ULabel.vue";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
 
-import { UTextarea } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { UTextarea } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UTextarea", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.form-textarea/{configs/default.config.js → config.js}

@@ -4,9 +4,10 @@ export default /*tw*/ {
   rightSlot: "flex items-center justify-center h-full w-11 absolute right-0",
   textareaWrapper: {
     base: `
-      px-3 py-2 bg-white transition
-      rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-500 focus-within:border-brand-500
-      focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15 focus-within:outline-none
+      px-3 py-2 bg-white transition w-full
+      rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-500
+      focus-within:border-brand-500 focus-within:ring-dynamic focus-within:ring-offset-dynamic
+      focus-within:ring-brand-700/15 focus-within:outline-none
     `,
     variants: {
       error: {

package/ui.form-textarea/storybook/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-textarea/{index.stories.js → storybook/stories.js}

@@ -1,8 +1,8 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UTextarea from "../ui.form-textarea";
-import UIcon from "../ui.image-icon";
-import UCol from "../ui.container-col";
+import UTextarea from "../../ui.form-textarea/UTextarea.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 
 /**
  * The `UTextarea` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-textarea)
@@ -15,7 +15,7 @@ export default {
     label: "Label",
   },
   argTypes: {
-    ...getArgTypes(UTextarea.name),
+    ...getArgTypes(UTextarea.__name),
     modelValue: { control: { type: "text" } },
   },
 };
@@ -23,7 +23,7 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UTextarea, UIcon },
   setup() {
-    const slots = getSlotNames(UTextarea.name);
+    const slots = getSlotNames(UTextarea.__name);
 
     return { args, slots };
   },

package/ui.form-textarea/{composables/attrs.composable.js → useAttrs.js}

@@ -1,7 +1,7 @@
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props) {

package/ui.image-avatar/{index.vue → UAvatar.vue}

@@ -29,15 +29,14 @@
 <script setup>
 import { computed } from "vue";
 
-import UIcon from "../ui.image-icon";
-import { getDefault } from "../service.ui";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import { getDefault } from "../utils/utilUI.js";
 
-import { UAvatar } from "./constants/index";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { UAvatar } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UAvatar", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.image-avatar/storybook/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.image-avatar/{index.stories.js → storybook/stories.js}

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UAvatar from "../ui.image-avatar";
-import URow from "../ui.container-row";
-import UCol from "../ui.container-col";
-import ULoader from "../ui.loader";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import ULoader from "../../ui.loader/ULoader.vue";
 
 /**
  * The `UAvatar` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.image-avatar)
@@ -13,14 +13,14 @@ export default {
   title: "Images & Icons / Avatar",
   component: UAvatar,
   argTypes: {
-    ...getArgTypes(UAvatar.name),
+    ...getArgTypes(UAvatar.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UAvatar, ULoader },
   setup() {
-    const slots = getSlotNames(UAvatar.name);
+    const slots = getSlotNames(UAvatar.__name);
 
     return { args, slots };
   },

package/{ui.image-icon/composables/attrs.composable.js → ui.image-avatar/useAttrs.js}

@@ -1,7 +1,7 @@
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props) {

package/ui.image-icon/{index.vue → UIcon.vue}

@@ -11,19 +11,15 @@
 
 <script setup>
 import { computed, defineAsyncComponent } from "vue";
-import { getDefault } from "../service.ui";
+import { getDefault } from "../utils/utilUI.js";
 
-import { UIcon } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { UIcon } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
-import vTooltip from "../directive.tooltip";
+import vTooltip from "../directives/vTooltip.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({
-  name: "UIcon",
-  inheritAttrs: false,
-});
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.image-icon/storybook/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />