@strapi/design-system 1.8.2 → 1.10.0-alpha.0

package/dist/index.mjs

@@ -0,0 +1,141 @@
+export { DesignSystemProvider, useDesignSystem } from './DesignSystemProvider.mjs';
+export { DismissibleLayer } from './DismissibleLayer/index.mjs';
+export { BaseRadio } from './BaseRadio/BaseRadio.mjs';
+export { Accordion, AccordionTypography } from './Accordion/Accordion.mjs';
+export { AccordionContent } from './Accordion/AccordionContent.mjs';
+export { AccordionToggle } from './Accordion/AccordionToggle.mjs';
+export { AccordionGroup } from './Accordion/AccordionGroup.mjs';
+export { Alert } from './Alert/Alert.mjs';
+export { Avatar, Initials } from './Avatar/Avatar.mjs';
+export { AvatarGroup } from './Avatar/AvatarGroup.mjs';
+export { Badge } from './Badge/Badge.mjs';
+export { BaseButton, BaseButtonWrapper } from './BaseButton/BaseButton.mjs';
+export { BaseCheckbox } from './BaseCheckbox/BaseCheckbox.mjs';
+export { BaseLink } from './BaseLink/BaseLink.mjs';
+export { Box } from './Box/Box.mjs';
+export { Breadcrumbs, Crumb } from './Breadcrumbs/Breadcrumbs.mjs';
+export { Button, ButtonWrapper } from './Button/Button.mjs';
+export { Card } from './Card/Card.mjs';
+export { CardAction } from './Card/CardAction.mjs';
+export { CardAsset } from './Card/CardAsset.mjs';
+export { CardBadge } from './Card/CardBadge.mjs';
+export { CardBody } from './Card/CardBody.mjs';
+export { CardCheckbox } from './Card/CardCheckbox.mjs';
+export { CardContent } from './Card/CardContent.mjs';
+export { CardHeader } from './Card/CardHeader.mjs';
+export { CardTimer } from './Card/CardTimer.mjs';
+export { CardSubtitle, CardTitle } from './Card/CardTitle.mjs';
+export { Carousel } from './CarouselInput/Carousel.mjs';
+export { CarouselInput } from './CarouselInput/CarouselInput.mjs';
+export { CarouselActions } from './CarouselInput/CarouselActions.mjs';
+export { CarouselImage } from './CarouselInput/CarouselImage.mjs';
+export { CarouselSlide } from './CarouselInput/CarouselSlide.mjs';
+export { Checkbox } from './Checkbox/Checkbox.mjs';
+export { Combobox, CreatableCombobox } from './Combobox/Combobox.mjs';
+export { ComboboxOption } from './Combobox/ComboboxOption.mjs';
+export { Dialog } from './Dialog/Dialog.mjs';
+export { DialogBody } from './Dialog/DialogBody.mjs';
+export { DialogFooter } from './Dialog/DialogFooter.mjs';
+export { DatePicker } from './DatePicker/DatePicker.mjs';
+export { DateTimePicker, convertUTCDateToCalendarDateTime } from './DateTimePicker/DateTimePicker.mjs';
+export { Divider } from './Divider/Divider.mjs';
+export { EmptyStateLayout } from './EmptyStateLayout/EmptyStateLayout.mjs';
+export { Field } from './Field/Field.mjs';
+export { FieldLabel } from './Field/FieldLabel.mjs';
+export { FieldInput, InputWrapper } from './Field/FieldInput.mjs';
+export { FieldHint } from './Field/FieldHint.mjs';
+export { FieldError } from './Field/FieldError.mjs';
+export { FieldContext, useField } from './Field/FieldContext.mjs';
+export { FieldAction } from './Field/FieldAction.mjs';
+export { FocusTrap } from './FocusTrap/FocusTrap.mjs';
+export { Grid } from './Grid/Grid.mjs';
+export { GridItem } from './Grid/GridItem.mjs';
+export { Icon } from './Icon/Icon.mjs';
+export { IconButton, IconButtonGroup } from './IconButton/IconButton.mjs';
+export { JSONInput } from './JSONInput/JSONInput.mjs';
+export { KeyboardNavigable } from './KeyboardNavigable/KeyboardNavigable.mjs';
+export { Layout } from './Layout/Layout.mjs';
+export { ActionLayout } from './Layout/ActionLayout.mjs';
+export { ContentLayout } from './Layout/ContentLayout.mjs';
+export { BaseHeaderLayout, HeaderLayout } from './Layout/HeaderLayout.mjs';
+export { TwoColsLayout } from './Layout/TwoColsLayout.mjs';
+export { GridLayout } from './Layout/GridLayout.mjs';
+export { Link } from './Link/Link.mjs';
+export { LinkButton } from './LinkButton/LinkButton.mjs';
+export { LiveRegions } from './LiveRegions/LiveRegions.mjs';
+export { useNotifyAT } from './LiveRegions/useNotifyAT.mjs';
+export { Loader } from './Loader/Loader.mjs';
+export { Main } from './Main/Main.mjs';
+export { SkipToContent } from './Main/SkipToContent.mjs';
+export { MainNav } from './MainNav/MainNav.mjs';
+export { NavBrand } from './MainNav/NavBrand.mjs';
+export { NavCondense } from './MainNav/NavCondense.mjs';
+export { NavFooter } from './MainNav/NavFooter.mjs';
+export { NavLink } from './MainNav/NavLink.mjs';
+export { NavSection } from './MainNav/NavSection.mjs';
+export { NavSections } from './MainNav/NavSections.mjs';
+export { NavUser } from './MainNav/NavUser.mjs';
+export { ModalLayout } from './ModalLayout/ModalLayout.mjs';
+export { ModalHeader } from './ModalLayout/ModalHeader.mjs';
+export { ModalFooter } from './ModalLayout/ModalFooter.mjs';
+export { ModalBody } from './ModalLayout/ModalBody.mjs';
+export { NumberInput } from './NumberInput/NumberInput.mjs';
+export { Pagination } from './Pagination/Pagination.mjs';
+export { Dots, NextLink, PageLink, PreviousLink } from './Pagination/components.mjs';
+export { POPOVER_PLACEMENTS, Popover } from './Popover/Popover.mjs';
+import * as primitives from './Popover/primitives.mjs';
+export { primitives as PopoverPrimitives };
+export { Portal } from './Portal/Portal.mjs';
+export { ProgressBar } from './ProgressBar/ProgressBar.mjs';
+export { RadioGroup } from './BaseRadio/RadioGroup.mjs';
+export { Radio } from './Radio/Radio.mjs';
+export { RawTable } from './RawTable/RawTable.mjs';
+export { RawTd, RawTh } from './RawTable/RawCell.mjs';
+export { RawThead } from './RawTable/RawThead.mjs';
+export { RawTbody } from './RawTable/RawTbody.mjs';
+export { RawTr } from './RawTable/RawTr.mjs';
+export { Flex } from './Flex/Flex.mjs';
+export { Searchbar } from './Searchbar/Searchbar.mjs';
+export { SearchForm } from './Searchbar/SearchForm.mjs';
+export { MultiSelectNested } from './Select/MultiSelectNested.mjs';
+export { MultiSelect, MultiSelectGroup, MultiSelectOption } from './Select/MultiSelect.mjs';
+export { SingleSelect, SingleSelectOption } from './Select/SingleSelect.mjs';
+export { Select } from './Select/Select.mjs';
+export { Option } from './Select/Option.mjs';
+export { OptGroup } from './Select/OptGroup.mjs';
+export { SelectList } from './Select/SelectList.mjs';
+export { MenuItem, SimpleMenu } from './SimpleMenu/SimpleMenu.mjs';
+export { Stack } from './Stack/Stack.mjs';
+export { Status } from './Status/Status.mjs';
+export { SubNav, subNavWidth } from './SubNav/SubNav.mjs';
+export { SubNavHeader } from './SubNav/SubNavHeader.mjs';
+export { SubNavLink } from './SubNav/SubNavLink.mjs';
+export { SubNavLinkSection } from './SubNav/SubNavLinkSection.mjs';
+export { SubNavSection } from './SubNav/SubNavSection.mjs';
+export { SubNavSections } from './SubNav/SubNavSections.mjs';
+export { Switch } from './Switch/Switch.mjs';
+export { Tab, Tabs } from './Tabs/Tabs.mjs';
+export { TabPanel, TabPanels } from './Tabs/TabPanels.mjs';
+export { TabGroup } from './Tabs/TabGroup.mjs';
+export { Table } from './Table/Table.mjs';
+export { Tbody } from './Table/Tbody.mjs';
+export { Thead } from './Table/Thead.mjs';
+export { Tr } from './Table/Tr.mjs';
+export { Td, Th } from './Table/Cell.mjs';
+export { TFooter } from './Table/TFooter.mjs';
+export { Tag } from './Tag/Tag.mjs';
+export { TextButton } from './TextButton/TextButton.mjs';
+export { TextInput } from './TextInput/TextInput.mjs';
+export { Textarea } from './Textarea/Textarea.mjs';
+export { ThemeProvider } from './ThemeProvider/ThemeProvider.mjs';
+export { useTheme } from './ThemeProvider/hooks.mjs';
+export { TimePicker, TimePickerInput } from './TimePicker/TimePicker.mjs';
+export { ToggleCheckbox } from './ToggleCheckbox/ToggleCheckbox.mjs';
+export { ToggleInput } from './ToggleInput/ToggleInput.mjs';
+export { Tooltip } from './Tooltip/Tooltip.mjs';
+export { Typography } from './Typography/Typography.mjs';
+export { VisuallyHidden } from './VisuallyHidden/VisuallyHidden.mjs';
+export { lightTheme } from './themes/lightTheme/index.mjs';
+export { darkTheme } from './themes/darkTheme/index.mjs';
+export { extendTheme } from './themes/extendTheme.mjs';
+export { buttonFocusStyle, getThemeSize, inputFocusStyle } from './themes/utils.mjs';

package/dist/themes/common-theme.js

@@ -1,21 +1,25 @@
-import { sizes as e } from "./sizes.js";
-const i = {
-  sizes: e,
-  zIndices: [5, 10, 15, 20],
-  spaces: ["0px", "4px", "8px", "12px", "16px", "20px", "24px", "32px", "40px", "48px", "56px", "64px"],
-  borderRadius: "4px",
-  mediaQueries: {
-    tablet: `@media (max-width: ${1100 / 16}rem)`,
-    mobile: `@media (max-width: ${550 / 16}rem)`
-  },
-  fontSizes: [`${11 / 16}rem`, `${12 / 16}rem`, `${14 / 16}rem`, "1rem", `${18 / 16}rem`, `${32 / 16}rem`],
-  lineHeights: [1.14, 1.22, 1.25, 1.33, 1.43, 1.45, 1.5],
-  fontWeights: {
-    regular: 400,
-    semiBold: 500,
-    bold: 600
-  }
-};
-export {
-  i as commonTheme
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const sizes = require('./sizes.js');
+
+const commonTheme = {
+    sizes: sizes.sizes,
+    zIndices: [5, 10, 15, 20],
+    spaces: ['0px', '4px', '8px', '12px', '16px', '20px', '24px', '32px', '40px', '48px', '56px', '64px'],
+    borderRadius: '4px',
+    mediaQueries: {
+        tablet: `@media (max-width: ${1100 / 16}rem)`,
+        mobile: `@media (max-width: ${550 / 16}rem)`,
+    },
+    fontSizes: [`${11 / 16}rem`, `${12 / 16}rem`, `${14 / 16}rem`, '1rem', `${18 / 16}rem`, `${32 / 16}rem`],
+    lineHeights: [1.14, 1.22, 1.25, 1.33, 1.43, 1.45, 1.5],
+    fontWeights: {
+        regular: 400,
+        semiBold: 500,
+        bold: 600,
+    },
 };
+
+exports.commonTheme = commonTheme;

package/dist/themes/common-theme.mjs

@@ -0,0 +1,21 @@
+import { sizes } from './sizes.mjs';
+
+const commonTheme = {
+    sizes,
+    zIndices: [5, 10, 15, 20],
+    spaces: ['0px', '4px', '8px', '12px', '16px', '20px', '24px', '32px', '40px', '48px', '56px', '64px'],
+    borderRadius: '4px',
+    mediaQueries: {
+        tablet: `@media (max-width: ${1100 / 16}rem)`,
+        mobile: `@media (max-width: ${550 / 16}rem)`,
+    },
+    fontSizes: [`${11 / 16}rem`, `${12 / 16}rem`, `${14 / 16}rem`, '1rem', `${18 / 16}rem`, `${32 / 16}rem`],
+    lineHeights: [1.14, 1.22, 1.25, 1.33, 1.43, 1.45, 1.5],
+    fontWeights: {
+        regular: 400,
+        semiBold: 500,
+        bold: 600,
+    },
+};
+
+export { commonTheme };

package/dist/themes/darkTheme/dark-colors.js

@@ -1,52 +1,55 @@
-const a = {
-  color: {
-    alternative100: "#181826",
-    alternative200: "#4a4a6a",
-    alternative500: "#ac73e6",
-    alternative600: "#ac73e6",
-    alternative700: "#e0c1f4",
-    buttonNeutral0: "#ffffff",
-    buttonPrimary500: "#7b79ff",
-    buttonPrimary600: "#4945ff",
-    danger100: "#181826",
-    danger200: "#4a4a6a",
-    danger500: "#ee5e52",
-    danger600: "#ee5e52",
-    danger700: "#ee5e52",
-    neutral0: "#212134",
-    neutral100: "#181826",
-    neutral1000: "#ffffff",
-    neutral150: "#32324d",
-    neutral200: "#4a4a6a",
-    neutral300: "#666687",
-    neutral400: "#a5a5ba",
-    neutral500: "#c0c0cf",
-    neutral600: "#a5a5ba",
-    neutral700: "#eaeaef",
-    neutral800: "#ffffff",
-    neutral900: "#ffffff",
-    primary100: "#181826",
-    primary200: "#4a4a6a",
-    primary500: "#4945ff",
-    primary600: "#7b79ff",
-    primary700: "#7b79ff",
-    secondary100: "#181826",
-    secondary200: "#4a4a6a",
-    secondary500: "#66b7f1",
-    secondary600: "#66b7f1",
-    secondary700: "#b8e1ff",
-    success100: "#181826",
-    success200: "#4a4a6a",
-    success500: "#5cb176",
-    success600: "#5cb176",
-    success700: "#c6f0c2",
-    warning100: "#181826",
-    warning200: "#4a4a6a",
-    warning500: "#f29d41",
-    warning600: "#f29d41",
-    warning700: "#fae7b9"
-  }
-};
-export {
-  a as darkColorTokenObject
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const darkColorTokenObject = {
+    color: {
+        alternative100: '#181826',
+        alternative200: '#4a4a6a',
+        alternative500: '#ac73e6',
+        alternative600: '#ac73e6',
+        alternative700: '#e0c1f4',
+        buttonNeutral0: '#ffffff',
+        buttonPrimary500: '#7b79ff',
+        buttonPrimary600: '#4945ff',
+        danger100: '#181826',
+        danger200: '#4a4a6a',
+        danger500: '#ee5e52',
+        danger600: '#ee5e52',
+        danger700: '#ee5e52',
+        neutral0: '#212134',
+        neutral100: '#181826',
+        neutral1000: '#ffffff',
+        neutral150: '#32324d',
+        neutral200: '#4a4a6a',
+        neutral300: '#666687',
+        neutral400: '#a5a5ba',
+        neutral500: '#c0c0cf',
+        neutral600: '#a5a5ba',
+        neutral700: '#eaeaef',
+        neutral800: '#ffffff',
+        neutral900: '#ffffff',
+        primary100: '#181826',
+        primary200: '#4a4a6a',
+        primary500: '#4945ff',
+        primary600: '#7b79ff',
+        primary700: '#7b79ff',
+        secondary100: '#181826',
+        secondary200: '#4a4a6a',
+        secondary500: '#66b7f1',
+        secondary600: '#66b7f1',
+        secondary700: '#b8e1ff',
+        success100: '#181826',
+        success200: '#4a4a6a',
+        success500: '#5cb176',
+        success600: '#5cb176',
+        success700: '#c6f0c2',
+        warning100: '#181826',
+        warning200: '#4a4a6a',
+        warning500: '#f29d41',
+        warning600: '#f29d41',
+        warning700: '#fae7b9',
+    },
 };
+
+exports.darkColorTokenObject = darkColorTokenObject;

package/dist/themes/darkTheme/dark-colors.mjs

@@ -0,0 +1,51 @@
+const darkColorTokenObject = {
+    color: {
+        alternative100: '#181826',
+        alternative200: '#4a4a6a',
+        alternative500: '#ac73e6',
+        alternative600: '#ac73e6',
+        alternative700: '#e0c1f4',
+        buttonNeutral0: '#ffffff',
+        buttonPrimary500: '#7b79ff',
+        buttonPrimary600: '#4945ff',
+        danger100: '#181826',
+        danger200: '#4a4a6a',
+        danger500: '#ee5e52',
+        danger600: '#ee5e52',
+        danger700: '#ee5e52',
+        neutral0: '#212134',
+        neutral100: '#181826',
+        neutral1000: '#ffffff',
+        neutral150: '#32324d',
+        neutral200: '#4a4a6a',
+        neutral300: '#666687',
+        neutral400: '#a5a5ba',
+        neutral500: '#c0c0cf',
+        neutral600: '#a5a5ba',
+        neutral700: '#eaeaef',
+        neutral800: '#ffffff',
+        neutral900: '#ffffff',
+        primary100: '#181826',
+        primary200: '#4a4a6a',
+        primary500: '#4945ff',
+        primary600: '#7b79ff',
+        primary700: '#7b79ff',
+        secondary100: '#181826',
+        secondary200: '#4a4a6a',
+        secondary500: '#66b7f1',
+        secondary600: '#66b7f1',
+        secondary700: '#b8e1ff',
+        success100: '#181826',
+        success200: '#4a4a6a',
+        success500: '#5cb176',
+        success600: '#5cb176',
+        success700: '#c6f0c2',
+        warning100: '#181826',
+        warning200: '#4a4a6a',
+        warning500: '#f29d41',
+        warning600: '#f29d41',
+        warning700: '#fae7b9',
+    },
+};
+
+export { darkColorTokenObject };

package/dist/themes/darkTheme/dark-shadows.js

@@ -1,12 +1,15 @@
-const p = {
-  shadow: {
-    filterShadow: "1px 1px 10px rgba(3, 3, 5, 0.35)",
-    focus: "inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)",
-    focusShadow: "0px 0px 6px rgba(76, 191, 255, 0.75)",
-    popupShadow: "1px 1px 10px rgba(3, 3, 5, 0.35)",
-    tableShadow: "1px 1px 10px rgba(3, 3, 5, 0.2)"
-  }
-};
-export {
-  p as darkShadowTokenObject
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const darkShadowTokenObject = {
+    shadow: {
+        filterShadow: '1px 1px 10px rgba(3, 3, 5, 0.35)',
+        focus: 'inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)',
+        focusShadow: '0px 0px 6px rgba(76, 191, 255, 0.75)',
+        popupShadow: '1px 1px 10px rgba(3, 3, 5, 0.35)',
+        tableShadow: '1px 1px 10px rgba(3, 3, 5, 0.2)',
+    },
 };
+
+exports.darkShadowTokenObject = darkShadowTokenObject;

package/dist/themes/darkTheme/dark-shadows.mjs

@@ -0,0 +1,11 @@
+const darkShadowTokenObject = {
+    shadow: {
+        filterShadow: '1px 1px 10px rgba(3, 3, 5, 0.35)',
+        focus: 'inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)',
+        focusShadow: '0px 0px 6px rgba(76, 191, 255, 0.75)',
+        popupShadow: '1px 1px 10px rgba(3, 3, 5, 0.35)',
+        tableShadow: '1px 1px 10px rgba(3, 3, 5, 0.2)',
+    },
+};
+
+export { darkShadowTokenObject };

package/dist/themes/darkTheme/index.js

@@ -1,11 +1,15 @@
-import { darkColorTokenObject as o } from "./dark-colors.js";
-import { darkShadowTokenObject as r } from "./dark-shadows.js";
-import { commonTheme as m } from "../common-theme.js";
-const c = {
-  colors: o.color,
-  shadows: r.shadow,
-  ...m
-};
-export {
-  c as darkTheme
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const darkColors = require('./dark-colors.js');
+const darkShadows = require('./dark-shadows.js');
+const commonTheme = require('../common-theme.js');
+
+const darkTheme = {
+    colors: darkColors.darkColorTokenObject.color,
+    shadows: darkShadows.darkShadowTokenObject.shadow,
+    ...commonTheme.commonTheme,
 };
+
+exports.darkTheme = darkTheme;

package/dist/themes/darkTheme/index.mjs

@@ -0,0 +1,11 @@
+import { darkColorTokenObject } from './dark-colors.mjs';
+import { darkShadowTokenObject } from './dark-shadows.mjs';
+import { commonTheme } from '../common-theme.mjs';
+
+const darkTheme = {
+    colors: darkColorTokenObject.color,
+    shadows: darkShadowTokenObject.shadow,
+    ...commonTheme,
+};
+
+export { darkTheme };

package/dist/themes/extendTheme.js

@@ -1,8 +1,13 @@
-import { cloneDeep as m, assignWith as c, merge as a } from "lodash";
-import { lightTheme as f } from "./lightTheme/index.js";
-import { isObject as o } from "../helpers/objects.js";
-const i = (t) => `
-${t}
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const lodash = require('lodash');
+const index = require('./lightTheme/index.js');
+const objects = require('../helpers/objects.js');
+
+const generateError = (customMessage) => `
+${customMessage}
 
 The following is an example:
 
@@ -10,27 +15,33 @@ The following is an example:
 import { lightTheme, extendTheme } from '@strapi/design-system';
 
 const myCustomTheme = extendTheme(lightTheme, {
-    ${Object.keys(f).map((r) => `${r}: /* put the overrides for the ${r} key */,`).join(`
-`)}
+    ${Object.keys(index.lightTheme)
+    .map((key) => `${key}: /* put the overrides for the ${key} key */,`)
+    .join('\n')}
 })
-`, g = (t, r) => {
-  if (!o(t)) {
-    const e = i("The first argument should be an object and corresponds to the theme you want to extend.");
-    throw new Error(e);
-  }
-  if (!o(r)) {
-    const e = i("The second argument should be an object and corresponds to the keys of the theme you want to override.");
-    throw new Error(e);
-  }
-  function h(e, n) {
-    if (Array.isArray(e))
-      return n;
-    if (o(e) && o(n))
-      return a(e, n);
-  }
-  const s = m(t ?? {}), d = m(r ?? {});
-  return c(s, d, h), s;
-};
-export {
-  g as extendTheme
+`;
+const extendTheme = (theme, overrides) => {
+    if (!objects.isObject(theme)) {
+        const error = generateError('The first argument should be an object and corresponds to the theme you want to extend.');
+        throw new Error(error);
+    }
+    if (!objects.isObject(overrides)) {
+        const error = generateError('The second argument should be an object and corresponds to the keys of the theme you want to override.');
+        throw new Error(error);
+    }
+    function customizer(objValue, srcValue) {
+        if (Array.isArray(objValue)) {
+            return srcValue;
+        }
+        if (objects.isObject(objValue) && objects.isObject(srcValue)) {
+            return lodash.merge(objValue, srcValue);
+        }
+        return undefined;
+    }
+    const masterTheme = lodash.cloneDeep(theme ?? {});
+    const masterOverrides = lodash.cloneDeep(overrides ?? {});
+    lodash.assignWith(masterTheme, masterOverrides, customizer);
+    return masterTheme;
 };
+
+exports.extendTheme = extendTheme;

package/dist/themes/extendTheme.mjs

@@ -0,0 +1,43 @@
+import { cloneDeep, assignWith, merge } from 'lodash';
+import { lightTheme } from './lightTheme/index.mjs';
+import { isObject } from '../helpers/objects.mjs';
+
+const generateError = (customMessage) => `
+${customMessage}
+
+The following is an example:
+
+
+import { lightTheme, extendTheme } from '@strapi/design-system';
+
+const myCustomTheme = extendTheme(lightTheme, {
+    ${Object.keys(lightTheme)
+    .map((key) => `${key}: /* put the overrides for the ${key} key */,`)
+    .join('\n')}
+})
+`;
+const extendTheme = (theme, overrides) => {
+    if (!isObject(theme)) {
+        const error = generateError('The first argument should be an object and corresponds to the theme you want to extend.');
+        throw new Error(error);
+    }
+    if (!isObject(overrides)) {
+        const error = generateError('The second argument should be an object and corresponds to the keys of the theme you want to override.');
+        throw new Error(error);
+    }
+    function customizer(objValue, srcValue) {
+        if (Array.isArray(objValue)) {
+            return srcValue;
+        }
+        if (isObject(objValue) && isObject(srcValue)) {
+            return merge(objValue, srcValue);
+        }
+        return undefined;
+    }
+    const masterTheme = cloneDeep(theme ?? {});
+    const masterOverrides = cloneDeep(overrides ?? {});
+    assignWith(masterTheme, masterOverrides, customizer);
+    return masterTheme;
+};
+
+export { extendTheme };

package/dist/themes/index.js

@@ -1,12 +1,17 @@
-import { lightTheme as o } from "./lightTheme/index.js";
-import { darkTheme as m } from "./darkTheme/index.js";
-import { extendTheme as p } from "./extendTheme.js";
-import { buttonFocusStyle as f, getThemeSize as u, inputFocusStyle as T } from "./utils.js";
-export {
-  f as buttonFocusStyle,
-  m as darkTheme,
-  p as extendTheme,
-  u as getThemeSize,
-  T as inputFocusStyle,
-  o as lightTheme
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const index = require('./lightTheme/index.js');
+const index$1 = require('./darkTheme/index.js');
+const extendTheme = require('./extendTheme.js');
+const utils = require('./utils.js');
+
+
+
+exports.lightTheme = index.lightTheme;
+exports.darkTheme = index$1.darkTheme;
+exports.extendTheme = extendTheme.extendTheme;
+exports.buttonFocusStyle = utils.buttonFocusStyle;
+exports.getThemeSize = utils.getThemeSize;
+exports.inputFocusStyle = utils.inputFocusStyle;

package/dist/themes/index.mjs

@@ -0,0 +1,4 @@
+export { lightTheme } from './lightTheme/index.mjs';
+export { darkTheme } from './darkTheme/index.mjs';
+export { extendTheme } from './extendTheme.mjs';
+export { buttonFocusStyle, getThemeSize, inputFocusStyle } from './utils.mjs';

package/dist/themes/lightTheme/index.js

@@ -1,11 +1,15 @@
-import { lightColorTokenObject as o } from "./light-colors.js";
-import { lightShadowTokenObject as m } from "./light-shadows.js";
-import { commonTheme as r } from "../common-theme.js";
-const c = {
-  colors: o.color,
-  shadows: m.shadow,
-  ...r
-};
-export {
-  c as lightTheme
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const lightColors = require('./light-colors.js');
+const lightShadows = require('./light-shadows.js');
+const commonTheme = require('../common-theme.js');
+
+const lightTheme = {
+    colors: lightColors.lightColorTokenObject.color,
+    shadows: lightShadows.lightShadowTokenObject.shadow,
+    ...commonTheme.commonTheme,
 };
+
+exports.lightTheme = lightTheme;