@strapi/design-system 0.0.0-3cf3ff39

package/dist/index.js

@@ -0,0 +1,311 @@
+import { DesignSystemProvider as t, useDesignSystem as p } from "./DesignSystemProvider.js";
+import { DismissibleLayer as x } from "./DismissibleLayer/index.js";
+import { BaseRadio as a } from "./BaseRadio/BaseRadio.js";
+import { Accordion as n, AccordionTypography as d } from "./Accordion/Accordion.js";
+import { AccordionContent as l } from "./Accordion/AccordionContent.js";
+import { AccordionToggle as c } from "./Accordion/AccordionToggle.js";
+import { AccordionGroup as S } from "./Accordion/AccordionGroup.js";
+import { Alert as C } from "./Alert/Alert.js";
+import { Avatar as y, Initials as g } from "./Avatar/Avatar.js";
+import { AvatarGroup as B } from "./Avatar/AvatarGroup.js";
+import { Badge as h } from "./Badge/Badge.js";
+import { BaseButton as P, BaseButtonWrapper as F } from "./BaseButton/BaseButton.js";
+import { BaseCheckbox as I } from "./BaseCheckbox/BaseCheckbox.js";
+import { BaseLink as D } from "./BaseLink/BaseLink.js";
+import { Box as G } from "./Box/Box.js";
+import { Breadcrumbs as O, Crumb as H } from "./Breadcrumbs/Breadcrumbs.js";
+import { Button as W, ButtonWrapper as U } from "./Button/Button.js";
+import { Card as z } from "./Card/Card.js";
+import { CardAction as K } from "./Card/CardAction.js";
+import { CardAsset as j } from "./Card/CardAsset.js";
+import { CardBadge as Q } from "./Card/CardBadge.js";
+import { CardBody as Y } from "./Card/CardBody.js";
+import { CardCheckbox as $ } from "./Card/CardCheckbox.js";
+import { CardContent as ro } from "./Card/CardContent.js";
+import { CardHeader as to } from "./Card/CardHeader.js";
+import { CardTimer as mo } from "./Card/CardTimer.js";
+import { CardSubtitle as fo, CardTitle as ao } from "./Card/CardTitle.js";
+import { Carousel as no } from "./CarouselInput/Carousel.js";
+import { CarouselInput as lo } from "./CarouselInput/CarouselInput.js";
+import { CarouselActions as co } from "./CarouselInput/CarouselActions.js";
+import { CarouselImage as So } from "./CarouselInput/CarouselImage.js";
+import { CarouselSlide as Co } from "./CarouselInput/CarouselSlide.js";
+import { Checkbox as yo } from "./Checkbox/Checkbox.js";
+import { Combobox as Lo, CreatableCombobox as Bo } from "./Combobox/Combobox.js";
+import { ComboboxOption as ho } from "./Combobox/ComboboxOption.js";
+import { Dialog as Po } from "./Dialog/Dialog.js";
+import { DialogBody as Ao } from "./Dialog/DialogBody.js";
+import { DialogFooter as Mo } from "./Dialog/DialogFooter.js";
+import { DatePicker as Ro } from "./DatePicker/DatePicker.js";
+import { DateTimePicker as wo, convertUTCDateToCalendarDateTime as Oo } from "./DateTimePicker/DateTimePicker.js";
+import { Divider as Eo } from "./Divider/Divider.js";
+import { EmptyStateLayout as Uo } from "./EmptyStateLayout/EmptyStateLayout.js";
+import { Field as zo } from "./Field/Field.js";
+import { FieldLabel as Ko } from "./Field/FieldLabel.js";
+import { FieldInput as jo, InputWrapper as qo } from "./Field/FieldInput.js";
+import { FieldHint as Xo } from "./Field/FieldHint.js";
+import { FieldError as Zo } from "./Field/FieldError.js";
+import { FieldContext as or, useField as rr } from "./Field/FieldContext.js";
+import { FieldAction as tr } from "./Field/FieldAction.js";
+import { FocusTrap as mr } from "./FocusTrap/FocusTrap.js";
+import { Grid as fr } from "./Grid/Grid.js";
+import { GridItem as ir } from "./Grid/GridItem.js";
+import { Icon as dr } from "./Icon/Icon.js";
+import { IconButton as lr, IconButtonGroup as sr } from "./IconButton/IconButton.js";
+import { JSONInput as Tr } from "./JSONInput/JSONInput.js";
+import { KeyboardNavigable as br } from "./KeyboardNavigable/KeyboardNavigable.js";
+import { Layout as vr } from "./Layout/Layout.js";
+import { ActionLayout as gr } from "./Layout/ActionLayout.js";
+import { ContentLayout as Br } from "./Layout/ContentLayout.js";
+import { BaseHeaderLayout as hr, HeaderLayout as kr } from "./Layout/HeaderLayout.js";
+import { TwoColsLayout as Fr } from "./Layout/TwoColsLayout.js";
+import { GridLayout as Ir } from "./Layout/GridLayout.js";
+import { Link as Dr } from "./Link/Link.js";
+import { LinkButton as Gr } from "./LinkButton/LinkButton.js";
+import { LiveRegions as Or } from "./LiveRegions/LiveRegions.js";
+import { useNotifyAT as Er } from "./LiveRegions/useNotifyAT.js";
+import { Loader as Ur } from "./Loader/Loader.js";
+import { Main as zr } from "./Main/Main.js";
+import { SkipToContent as Kr } from "./Main/SkipToContent.js";
+import { MainNav as jr } from "./MainNav/MainNav.js";
+import { NavBrand as Qr } from "./MainNav/NavBrand.js";
+import { NavCondense as Yr } from "./MainNav/NavCondense.js";
+import { NavFooter as $r } from "./MainNav/NavFooter.js";
+import { NavLink as re } from "./MainNav/NavLink.js";
+import { NavSection as te } from "./MainNav/NavSection.js";
+import { NavSections as me } from "./MainNav/NavSections.js";
+import { NavUser as fe } from "./MainNav/NavUser.js";
+import { ModalLayout as ie } from "./ModalLayout/ModalLayout.js";
+import { ModalHeader as de } from "./ModalLayout/ModalHeader.js";
+import { ModalFooter as le } from "./ModalLayout/ModalFooter.js";
+import { ModalBody as ce } from "./ModalLayout/ModalBody.js";
+import { NumberInput as Se } from "./NumberInput/NumberInput.js";
+import { Pagination as Ce } from "./Pagination/Pagination.js";
+import { Dots as ye, NextLink as ge, PageLink as Le, PreviousLink as Be } from "./Pagination/components.js";
+import { POPOVER_PLACEMENTS as he, Popover as ke } from "./Popover/Popover.js";
+import * as o from "./Popover/primitives.js";
+import { Portal as Fe } from "./Portal/Portal.js";
+import { ProgressBar as Ie } from "./ProgressBar/ProgressBar.js";
+import { RadioGroup as De } from "./BaseRadio/RadioGroup.js";
+import { Radio as Ge } from "./Radio/Radio.js";
+import { RawTable as Oe } from "./RawTable/RawTable.js";
+import { RawTd as Ee, RawTh as We } from "./RawTable/RawCell.js";
+import { RawThead as Ve } from "./RawTable/RawThead.js";
+import { RawTbody as Je } from "./RawTable/RawTbody.js";
+import { RawTr as _e } from "./RawTable/RawTr.js";
+import { Flex as qe } from "./Flex/Flex.js";
+import { Searchbar as Xe } from "./Searchbar/Searchbar.js";
+import { SearchForm as Ze } from "./Searchbar/SearchForm.js";
+import { MultiSelectNested as ot } from "./Select/MultiSelectNested.js";
+import { MultiSelect as et, MultiSelectGroup as tt, MultiSelectOption as pt } from "./Select/MultiSelect.js";
+import { SingleSelect as xt, SingleSelectOption as ft } from "./Select/SingleSelect.js";
+import { Select as it } from "./Select/Select.js";
+import { Option as dt } from "./Select/Option.js";
+import { OptGroup as lt } from "./Select/OptGroup.js";
+import { SelectList as ct } from "./Select/SelectList.js";
+import { MenuItem as St, SimpleMenu as bt } from "./SimpleMenu/SimpleMenu.js";
+import { Stack as vt } from "./Stack/Stack.js";
+import { Status as gt } from "./Status/Status.js";
+import { SubNav as Bt, subNavWidth as Nt } from "./SubNav/SubNav.js";
+import { SubNavHeader as kt } from "./SubNav/SubNavHeader.js";
+import { SubNavLink as Ft } from "./SubNav/SubNavLink.js";
+import { SubNavLinkSection as It } from "./SubNav/SubNavLinkSection.js";
+import { SubNavSection as Dt } from "./SubNav/SubNavSection.js";
+import { SubNavSections as Gt } from "./SubNav/SubNavSections.js";
+import { Switch as Ot } from "./Switch/Switch.js";
+import { Tab as Et, Tabs as Wt } from "./Tabs/Tabs.js";
+import { TabPanel as Vt, TabPanels as zt } from "./Tabs/TabPanels.js";
+import { TabGroup as Kt } from "./Tabs/TabGroup.js";
+import { Table as jt } from "./Table/Table.js";
+import { Tbody as Qt } from "./Table/Tbody.js";
+import { Thead as Yt } from "./Table/Thead.js";
+import { Tr as $t } from "./Table/Tr.js";
+import { Td as rp, Th as ep } from "./Table/Cell.js";
+import { TFooter as pp } from "./Table/TFooter.js";
+import { Tag as xp } from "./Tag/Tag.js";
+import { TextButton as ap } from "./TextButton/TextButton.js";
+import { TextInput as np } from "./TextInput/TextInput.js";
+import { Textarea as up } from "./Textarea/Textarea.js";
+import { ThemeProvider as sp } from "./ThemeProvider/ThemeProvider.js";
+import { useTheme as Tp } from "./ThemeProvider/hooks.js";
+import { TimePicker as bp, TimePickerInput as Cp } from "./TimePicker/TimePicker.js";
+import { ToggleCheckbox as yp } from "./ToggleCheckbox/ToggleCheckbox.js";
+import { ToggleInput as Lp } from "./ToggleInput/ToggleInput.js";
+import { Tooltip as Np } from "./Tooltip/Tooltip.js";
+import { Typography as kp } from "./Typography/Typography.js";
+import { VisuallyHidden as Fp } from "./VisuallyHidden/VisuallyHidden.js";
+import { lightTheme as Ip } from "./themes/lightTheme/index.js";
+import { darkTheme as Dp } from "./themes/darkTheme/index.js";
+import { extendTheme as Gp } from "./themes/extendTheme.js";
+import { buttonFocusStyle as Op, getThemeSize as Hp, inputFocusStyle as Ep } from "./themes/utils.js";
+export {
+  n as Accordion,
+  l as AccordionContent,
+  S as AccordionGroup,
+  c as AccordionToggle,
+  d as AccordionTypography,
+  gr as ActionLayout,
+  C as Alert,
+  y as Avatar,
+  B as AvatarGroup,
+  h as Badge,
+  P as BaseButton,
+  F as BaseButtonWrapper,
+  I as BaseCheckbox,
+  hr as BaseHeaderLayout,
+  D as BaseLink,
+  a as BaseRadio,
+  G as Box,
+  O as Breadcrumbs,
+  W as Button,
+  U as ButtonWrapper,
+  z as Card,
+  K as CardAction,
+  j as CardAsset,
+  Q as CardBadge,
+  Y as CardBody,
+  $ as CardCheckbox,
+  ro as CardContent,
+  to as CardHeader,
+  fo as CardSubtitle,
+  mo as CardTimer,
+  ao as CardTitle,
+  no as Carousel,
+  co as CarouselActions,
+  So as CarouselImage,
+  lo as CarouselInput,
+  Co as CarouselSlide,
+  yo as Checkbox,
+  Lo as Combobox,
+  ho as ComboboxOption,
+  Br as ContentLayout,
+  Bo as CreatableCombobox,
+  H as Crumb,
+  Ro as DatePicker,
+  wo as DateTimePicker,
+  t as DesignSystemProvider,
+  Po as Dialog,
+  Ao as DialogBody,
+  Mo as DialogFooter,
+  x as DismissibleLayer,
+  Eo as Divider,
+  ye as Dots,
+  Uo as EmptyStateLayout,
+  zo as Field,
+  tr as FieldAction,
+  or as FieldContext,
+  Zo as FieldError,
+  Xo as FieldHint,
+  jo as FieldInput,
+  Ko as FieldLabel,
+  qe as Flex,
+  mr as FocusTrap,
+  fr as Grid,
+  ir as GridItem,
+  Ir as GridLayout,
+  kr as HeaderLayout,
+  dr as Icon,
+  lr as IconButton,
+  sr as IconButtonGroup,
+  g as Initials,
+  qo as InputWrapper,
+  Tr as JSONInput,
+  br as KeyboardNavigable,
+  vr as Layout,
+  Dr as Link,
+  Gr as LinkButton,
+  Or as LiveRegions,
+  Ur as Loader,
+  zr as Main,
+  jr as MainNav,
+  St as MenuItem,
+  ce as ModalBody,
+  le as ModalFooter,
+  de as ModalHeader,
+  ie as ModalLayout,
+  et as MultiSelect,
+  tt as MultiSelectGroup,
+  ot as MultiSelectNested,
+  pt as MultiSelectOption,
+  Qr as NavBrand,
+  Yr as NavCondense,
+  $r as NavFooter,
+  re as NavLink,
+  te as NavSection,
+  me as NavSections,
+  fe as NavUser,
+  ge as NextLink,
+  Se as NumberInput,
+  lt as OptGroup,
+  dt as Option,
+  he as POPOVER_PLACEMENTS,
+  Le as PageLink,
+  Ce as Pagination,
+  ke as Popover,
+  o as PopoverPrimitives,
+  Fe as Portal,
+  Be as PreviousLink,
+  Ie as ProgressBar,
+  Ge as Radio,
+  De as RadioGroup,
+  Oe as RawTable,
+  Je as RawTbody,
+  Ee as RawTd,
+  We as RawTh,
+  Ve as RawThead,
+  _e as RawTr,
+  Ze as SearchForm,
+  Xe as Searchbar,
+  it as Select,
+  ct as SelectList,
+  bt as SimpleMenu,
+  xt as SingleSelect,
+  ft as SingleSelectOption,
+  Kr as SkipToContent,
+  vt as Stack,
+  gt as Status,
+  Bt as SubNav,
+  kt as SubNavHeader,
+  Ft as SubNavLink,
+  It as SubNavLinkSection,
+  Dt as SubNavSection,
+  Gt as SubNavSections,
+  Ot as Switch,
+  pp as TFooter,
+  Et as Tab,
+  Kt as TabGroup,
+  Vt as TabPanel,
+  zt as TabPanels,
+  jt as Table,
+  Wt as Tabs,
+  xp as Tag,
+  Qt as Tbody,
+  rp as Td,
+  ap as TextButton,
+  np as TextInput,
+  up as Textarea,
+  ep as Th,
+  Yt as Thead,
+  sp as ThemeProvider,
+  bp as TimePicker,
+  Cp as TimePickerInput,
+  yp as ToggleCheckbox,
+  Lp as ToggleInput,
+  Np as Tooltip,
+  $t as Tr,
+  Fr as TwoColsLayout,
+  kp as Typography,
+  Fp as VisuallyHidden,
+  Op as buttonFocusStyle,
+  Oo as convertUTCDateToCalendarDateTime,
+  Dp as darkTheme,
+  Gp as extendTheme,
+  Hp as getThemeSize,
+  Ep as inputFocusStyle,
+  Ip as lightTheme,
+  Nt as subNavWidth,
+  p as useDesignSystem,
+  rr as useField,
+  Er as useNotifyAT,
+  Tp as useTheme
+};

package/dist/themes/common-theme.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./sizes.cjs"),m={sizes:e.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=m;

package/dist/themes/common-theme.js

@@ -0,0 +1,21 @@
+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
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});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"}};exports.darkColorTokenObject=a;

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

@@ -0,0 +1,52 @@
+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
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});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)"}};exports.darkShadowTokenObject=p;

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

@@ -0,0 +1,12 @@
+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
+};

package/dist/themes/darkTheme/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./dark-colors.cjs"),e=require("./dark-shadows.cjs"),r=require("../common-theme.cjs"),a={colors:o.darkColorTokenObject.color,shadows:e.darkShadowTokenObject.shadow,...r.commonTheme};exports.darkTheme=a;

package/dist/themes/darkTheme/index.js

@@ -0,0 +1,11 @@
+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
+};

package/dist/themes/extendTheme.cjs

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

package/dist/themes/extendTheme.js

@@ -0,0 +1,36 @@
+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}
+
+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(`
+`)}
+})
+`, 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
+};

package/dist/themes/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./lightTheme/index.cjs"),i=require("./darkTheme/index.cjs"),u=require("./extendTheme.cjs"),e=require("./utils.cjs");exports.lightTheme=t.lightTheme;exports.darkTheme=i.darkTheme;exports.extendTheme=u.extendTheme;exports.buttonFocusStyle=e.buttonFocusStyle;exports.getThemeSize=e.getThemeSize;exports.inputFocusStyle=e.inputFocusStyle;

package/dist/themes/index.js

@@ -0,0 +1,12 @@
+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
+};

package/dist/themes/lightTheme/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./light-colors.cjs"),e=require("./light-shadows.cjs"),t=require("../common-theme.cjs"),h={colors:o.lightColorTokenObject.color,shadows:e.lightShadowTokenObject.shadow,...t.commonTheme};exports.lightTheme=h;

package/dist/themes/lightTheme/index.js

@@ -0,0 +1,11 @@
+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
+};

package/dist/themes/lightTheme/light-colors.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={color:{alternative100:"#f6ecfc",alternative200:"#e0c1f4",alternative500:"#ac73e6",alternative600:"#9736e8",alternative700:"#8312d1",buttonNeutral0:"#ffffff",buttonPrimary500:"#7b79ff",buttonPrimary600:"#4945ff",danger100:"#fcecea",danger200:"#f5c0b8",danger500:"#ee5e52",danger600:"#d02b20",danger700:"#b72b1a",neutral0:"#ffffff",neutral100:"#f6f6f9",neutral1000:"#181826",neutral150:"#eaeaef",neutral200:"#dcdce4",neutral300:"#c0c0cf",neutral400:"#a5a5ba",neutral500:"#8e8ea9",neutral600:"#666687",neutral700:"#4a4a6a",neutral800:"#32324d",neutral900:"#212134",primary100:"#f0f0ff",primary200:"#d9d8ff",primary500:"#7b79ff",primary600:"#4945ff",primary700:"#271fe0",secondary100:"#eaf5ff",secondary200:"#b8e1ff",secondary500:"#66b7f1",secondary600:"#0c75af",secondary700:"#006096",success100:"#eafbe7",success200:"#c6f0c2",success500:"#5cb176",success600:"#328048",success700:"#2f6846",warning100:"#fdf4dc",warning200:"#fae7b9",warning500:"#f29d41",warning600:"#d9822f",warning700:"#be5d01"}};exports.lightColorTokenObject=e;

package/dist/themes/lightTheme/light-colors.js

@@ -0,0 +1,52 @@
+const e = {
+  color: {
+    alternative100: "#f6ecfc",
+    alternative200: "#e0c1f4",
+    alternative500: "#ac73e6",
+    alternative600: "#9736e8",
+    alternative700: "#8312d1",
+    buttonNeutral0: "#ffffff",
+    buttonPrimary500: "#7b79ff",
+    buttonPrimary600: "#4945ff",
+    danger100: "#fcecea",
+    danger200: "#f5c0b8",
+    danger500: "#ee5e52",
+    danger600: "#d02b20",
+    danger700: "#b72b1a",
+    neutral0: "#ffffff",
+    neutral100: "#f6f6f9",
+    neutral1000: "#181826",
+    neutral150: "#eaeaef",
+    neutral200: "#dcdce4",
+    neutral300: "#c0c0cf",
+    neutral400: "#a5a5ba",
+    neutral500: "#8e8ea9",
+    neutral600: "#666687",
+    neutral700: "#4a4a6a",
+    neutral800: "#32324d",
+    neutral900: "#212134",
+    primary100: "#f0f0ff",
+    primary200: "#d9d8ff",
+    primary500: "#7b79ff",
+    primary600: "#4945ff",
+    primary700: "#271fe0",
+    secondary100: "#eaf5ff",
+    secondary200: "#b8e1ff",
+    secondary500: "#66b7f1",
+    secondary600: "#0c75af",
+    secondary700: "#006096",
+    success100: "#eafbe7",
+    success200: "#c6f0c2",
+    success500: "#5cb176",
+    success600: "#328048",
+    success700: "#2f6846",
+    warning100: "#fdf4dc",
+    warning200: "#fae7b9",
+    warning500: "#f29d41",
+    warning600: "#d9822f",
+    warning700: "#be5d01"
+  }
+};
+export {
+  e as lightColorTokenObject
+};

package/dist/themes/lightTheme/light-shadows.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p={shadow:{filterShadow:"0px 1px 4px rgba(33, 33, 52, 0.1)",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:"0px 2px 15px rgba(33, 33, 52, 0.1)",tableShadow:"0px 1px 4px rgba(33, 33, 52, 0.1)"}};exports.lightShadowTokenObject=p;

package/dist/themes/lightTheme/light-shadows.js

@@ -0,0 +1,12 @@
+const p = {
+  shadow: {
+    filterShadow: "0px 1px 4px rgba(33, 33, 52, 0.1)",
+    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: "0px 2px 15px rgba(33, 33, 52, 0.1)",
+    tableShadow: "0px 1px 4px rgba(33, 33, 52, 0.1)"
+  }
+};
+export {
+  p as lightShadowTokenObject
+};

package/dist/themes/sizes.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={input:{S:`${32/16}rem`,M:`${40/16}rem`},accordions:{S:`${48/16}rem`,M:`${88/16}rem`},badge:{S:`${16/16}rem`,M:`${24/16}rem`},button:{S:`${32/16}rem`,M:`${36/16}rem`,L:`${40/16}rem`}};exports.sizes=e;

package/dist/themes/sizes.js

@@ -0,0 +1,22 @@
+const e = {
+  input: {
+    S: "2rem",
+    M: `${2.5}rem`
+  },
+  accordions: {
+    S: "3rem",
+    M: `${5.5}rem`
+  },
+  badge: {
+    S: "1rem",
+    M: `${1.5}rem`
+  },
+  button: {
+    S: "2rem",
+    M: `${2.25}rem`,
+    L: `${2.5}rem`
+  }
+};
+export {
+  e as sizes
+};

package/dist/themes/utils.cjs

@@ -0,0 +1,41 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),s=t=>({theme:o,size:r})=>o.sizes[t][r],i=(t="&")=>({theme:o,hasError:r=!1})=>e.css`
+      outline: none;
+      box-shadow: 0;
+      transition-property: border-color, box-shadow, fill;
+      transition-duration: 0.2s;
+
+      ${t}:focus-within {
+        border: 1px solid ${r?o.colors.danger600:o.colors.primary600};
+        box-shadow: ${r?o.colors.danger600:o.colors.primary600} 0px 0px 0px 2px;
+      }
+    `,n=({theme:t})=>e.css`
+  position: relative;
+  outline: none;
+
+  &:after {
+    transition-property: all;
+    transition-duration: 0.2s;
+    border-radius: 8px;
+    content: '';
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: -4px;
+    right: -4px;
+    border: 2px solid transparent;
+  }
+
+  &:focus-visible {
+    outline: none;
+    &:after {
+      border-radius: 8px;
+      content: '';
+      position: absolute;
+      top: -5px;
+      bottom: -5px;
+      left: -5px;
+      right: -5px;
+      border: 2px solid ${t.colors.primary600};
+    }
+  }
+`;exports.buttonFocusStyle=n;exports.getThemeSize=s;exports.inputFocusStyle=i;