@strapi/design-system 1.6.6 → 1.7.0-alpha.1

package/dist/index.js

@@ -3,17 +3,17 @@ import { AccordionContent as m } from "./Accordion/AccordionContent.js";
 import { AccordionToggle as f } from "./Accordion/AccordionToggle.js";
 import { AccordionGroup as i } from "./Accordion/AccordionGroup.js";
 import { Alert as d } from "./Alert/Alert.js";
-import { Avatar as l, Initials as s } from "./Avatar/Avatar.js";
-import { AvatarGroup as c } from "./Avatar/AvatarGroup.js";
-import { Badge as C } from "./Badge/Badge.js";
+import { Avatar as l, Initials as c } from "./Avatar/Avatar.js";
+import { AvatarGroup as T } from "./Avatar/AvatarGroup.js";
+import { Badge as S } from "./Badge/Badge.js";
 import { BaseButton as v, BaseButtonWrapper as y } from "./BaseButton/BaseButton.js";
-import { BaseCheckbox as B } from "./BaseCheckbox/BaseCheckbox.js";
+import { BaseCheckbox as L } from "./BaseCheckbox/BaseCheckbox.js";
 import { BaseLink as N } from "./BaseLink/BaseLink.js";
 import { BaseRadio as k } from "./BaseRadio/BaseRadio.js";
 import { RadioGroup as P } from "./BaseRadio/RadioGroup.js";
 import { Box as I } from "./Box/Box.js";
-import { Breadcrumbs as M, Crumb as G } from "./Breadcrumbs/Breadcrumbs.js";
-import { Button as D, ButtonWrapper as H } from "./Button/Button.js";
+import { Breadcrumbs as R, Crumb as G } from "./Breadcrumbs/Breadcrumbs.js";
+import { Button as D, ButtonWrapper as O } from "./Button/Button.js";
 import { Card as E } from "./Card/Card.js";
 import { CardAction as V } from "./Card/CardAction.js";
 import { CardAsset as J } from "./Card/CardAsset.js";
@@ -28,18 +28,18 @@ import { Carousel as xo } from "./CarouselInput/Carousel.js";
 import { CarouselInput as ao } from "./CarouselInput/CarouselInput.js";
 import { CarouselActions as no } from "./CarouselInput/CarouselActions.js";
 import { CarouselImage as lo } from "./CarouselInput/CarouselImage.js";
-import { CarouselSlide as To } from "./CarouselInput/CarouselSlide.js";
+import { CarouselSlide as so } from "./CarouselInput/CarouselSlide.js";
 import { Checkbox as bo } from "./Checkbox/Checkbox.js";
-import { Combobox as So, CreatableCombobox as vo } from "./Combobox/Combobox.js";
-import { ComboboxOption as Lo } from "./Combobox/ComboboxOption.js";
-import { Dialog as go } from "./Dialog/Dialog.js";
+import { Combobox as Co, CreatableCombobox as vo } from "./Combobox/Combobox.js";
+import { ComboboxOption as go } from "./Combobox/ComboboxOption.js";
+import { Dialog as Bo } from "./Dialog/Dialog.js";
 import { DialogBody as ho } from "./Dialog/DialogBody.js";
 import { DialogFooter as Fo } from "./Dialog/DialogFooter.js";
 import { DismissibleLayer as Ao } from "./DismissibleLayer/DismissibleLayer.js";
-import { DatePicker as Ro } from "./DatePicker/DatePicker.js";
+import { DatePicker as Mo } from "./DatePicker/DatePicker.js";
 import { DateTimePicker as Go } from "./DateTimePicker/DateTimePicker.js";
 import { Divider as Do } from "./Divider/Divider.js";
-import { EmptyStateLayout as Oo } from "./EmptyStateLayout/EmptyStateLayout.js";
+import { EmptyStateLayout as Ho } from "./EmptyStateLayout/EmptyStateLayout.js";
 import { Field as Wo } from "./Field/Field.js";
 import { FieldLabel as zo } from "./Field/FieldLabel.js";
 import { FieldInput as Ko, InputWrapper as Uo } from "./Field/FieldInput.js";
@@ -53,18 +53,18 @@ import { GridItem as xr } from "./Grid/GridItem.js";
 import { Icon as ar } from "./Icon/Icon.js";
 import { IconButton as nr, IconButtonGroup as dr } from "./IconButton/IconButton.js";
 import { JSONInput as lr } from "./JSONInput/JSONInput.js";
-import { KeyboardNavigable as Tr } from "./KeyboardNavigable/KeyboardNavigable.js";
+import { KeyboardNavigable as sr } from "./KeyboardNavigable/KeyboardNavigable.js";
 import { Layout as br } from "./Layout/Layout.js";
-import { ActionLayout as Sr } from "./Layout/ActionLayout.js";
+import { ActionLayout as Cr } from "./Layout/ActionLayout.js";
 import { ContentLayout as yr } from "./Layout/ContentLayout.js";
-import { BaseHeaderLayout as Br, HeaderLayout as gr } from "./Layout/HeaderLayout.js";
+import { BaseHeaderLayout as Lr, HeaderLayout as Br } from "./Layout/HeaderLayout.js";
 import { TwoColsLayout as hr } from "./Layout/TwoColsLayout.js";
 import { GridLayout as Fr } from "./Layout/GridLayout.js";
 import { Link as Ar } from "./Link/Link.js";
-import { LinkButton as Rr } from "./LinkButton/LinkButton.js";
+import { LinkButton as Mr } from "./LinkButton/LinkButton.js";
 import { useNotifyAT as Gr } from "./LiveRegions/useNotifyAT.js";
 import { LiveRegions as Dr } from "./LiveRegions/LiveRegions.js";
-import { Loader as Or } from "./Loader/Loader.js";
+import { Loader as Hr } from "./Loader/Loader.js";
 import { Main as Wr } from "./Main/Main.js";
 import { SkipToContent as zr } from "./Main/SkipToContent.js";
 import { MainNav as Kr } from "./MainNav/MainNav.js";
@@ -79,83 +79,84 @@ import { ModalLayout as xe } from "./ModalLayout/ModalLayout.js";
 import { ModalHeader as ae } from "./ModalLayout/ModalHeader.js";
 import { ModalFooter as ne } from "./ModalLayout/ModalFooter.js";
 import { ModalBody as ue } from "./ModalLayout/ModalBody.js";
-import { NumberInput as se } from "./NumberInput/NumberInput.js";
-import { Pagination as ce } from "./Pagination/Pagination.js";
-import { Dots as Ce, NextLink as Se, PageLink as ve, PreviousLink as ye } from "./Pagination/components.js";
-import { PopoverPrimitives as Be } from "./Popover/index.js";
+import { NumberInput as ce } from "./NumberInput/NumberInput.js";
+import { Pagination as Te } from "./Pagination/Pagination.js";
+import { Dots as Se, NextLink as Ce, PageLink as ve, PreviousLink as ye } from "./Pagination/components.js";
+import { PopoverPrimitives as Le } from "./Popover/index.js";
 import { Portal as Ne } from "./Portal/Portal.js";
 import { ProgressBar as ke } from "./ProgressBar/ProgressBar.js";
 import { Radio as Pe } from "./Radio/Radio.js";
 import { RawTable as Ie } from "./RawTable/RawTable.js";
-import { RawTd as Me, RawTh as Ge } from "./RawTable/RawCell.js";
+import { RawTd as Re, RawTh as Ge } from "./RawTable/RawCell.js";
 import { RawThead as De } from "./RawTable/RawThead.js";
-import { RawTbody as Oe } from "./RawTable/RawTbody.js";
+import { RawTbody as He } from "./RawTable/RawTbody.js";
 import { RawTr as We } from "./RawTable/RawTr.js";
 import { Flex as ze } from "./Flex/Flex.js";
 import { Searchbar as Ke } from "./Searchbar/Searchbar.js";
 import { SearchForm as _e } from "./Searchbar/SearchForm.js";
-import { Select as qe } from "./Select/Select.js";
-import { Option as Xe } from "./Select/Option.js";
-import { OptGroup as Ze } from "./Select/OptGroup.js";
-import { MultiSelectNested as ot } from "./Select/MultiSelectNested.js";
-import { SelectList as et } from "./Select/SelectList.js";
-import { MenuItem as pt, SimpleMenu as mt } from "./SimpleMenu/SimpleMenu.js";
-import { Stack as ft } from "./Stack/Stack.js";
-import { Status as it } from "./Status/Status.js";
-import { SubNav as dt, subNavWidth as ut } from "./SubNav/SubNav.js";
-import { SubNavHeader as st } from "./SubNav/SubNavHeader.js";
-import { SubNavLink as ct } from "./SubNav/SubNavLink.js";
-import { SubNavLinkSection as Ct } from "./SubNav/SubNavLinkSection.js";
-import { SubNavSection as vt } from "./SubNav/SubNavSection.js";
-import { SubNavSections as Lt } from "./SubNav/SubNavSections.js";
-import { Switch as gt } from "./Switch/Switch.js";
-import { Tab as ht, Tabs as kt } from "./Tabs/Tabs.js";
-import { TabPanel as Pt, TabPanels as At } from "./Tabs/TabPanels.js";
-import { TabGroup as Rt } from "./Tabs/TabGroup.js";
-import { Table as Gt } from "./Table/Table.js";
-import { Tbody as Dt } from "./Table/Tbody.js";
-import { Thead as Ot } from "./Table/Thead.js";
-import { Tr as Wt } from "./Table/Tr.js";
-import { Td as zt, Th as Jt } from "./Table/Cell.js";
-import { TFooter as Ut } from "./Table/TFooter.js";
-import { Tag as jt } from "./Tag/Tag.js";
-import { TextButton as Qt } from "./TextButton/TextButton.js";
-import { TextInput as Yt } from "./TextInput/TextInput.js";
-import { Textarea as $t } from "./Textarea/Textarea.js";
-import { ThemeProvider as rp } from "./ThemeProvider/ThemeProvider.js";
-import { useTheme as tp } from "./ThemeProvider/hooks.js";
-import { TimePicker as mp } from "./TimePicker/TimePicker.js";
-import { ToggleCheckbox as fp } from "./ToggleCheckbox/ToggleCheckbox.js";
-import { ToggleInput as ip } from "./ToggleInput/ToggleInput.js";
-import { Tooltip as dp } from "./Tooltip/Tooltip.js";
-import { Typography as lp } from "./Typography/Typography.js";
-import { VisuallyHidden as Tp } from "./VisuallyHidden/VisuallyHidden.js";
-import { lightTheme as bp } from "./themes/lightTheme/index.js";
-import { darkTheme as Sp } from "./themes/darkTheme/index.js";
-import { extendTheme as yp } from "./themes/extendTheme.js";
-import { buttonFocusStyle as Bp, getThemeSize as gp, inputFocusStyle as Np } from "./themes/utils.js";
-import { POPOVER_PLACEMENTS as kp, Popover as Fp } from "./Popover/Popover.js";
+import { MultiSelectNested as qe } from "./Select/MultiSelectNested.js";
+import { MultiSelect as Xe, MultiSelectGroup as Ye, MultiSelectOption as Ze } from "./Select/MultiSelect.js";
+import { SingleSelect as ot, SingleSelectOption as rt } from "./Select/SingleSelect.js";
+import { Option as tt } from "./Select/Option.js";
+import { OptGroup as mt } from "./Select/OptGroup.js";
+import { SelectList as ft } from "./Select/SelectList.js";
+import { MenuItem as it, SimpleMenu as nt } from "./SimpleMenu/SimpleMenu.js";
+import { Stack as ut } from "./Stack/Stack.js";
+import { Status as ct } from "./Status/Status.js";
+import { SubNav as Tt, subNavWidth as bt } from "./SubNav/SubNav.js";
+import { SubNavHeader as Ct } from "./SubNav/SubNavHeader.js";
+import { SubNavLink as yt } from "./SubNav/SubNavLink.js";
+import { SubNavLinkSection as Lt } from "./SubNav/SubNavLinkSection.js";
+import { SubNavSection as Nt } from "./SubNav/SubNavSection.js";
+import { SubNavSections as kt } from "./SubNav/SubNavSections.js";
+import { Switch as Pt } from "./Switch/Switch.js";
+import { Tab as It, Tabs as Mt } from "./Tabs/Tabs.js";
+import { TabPanel as Gt, TabPanels as wt } from "./Tabs/TabPanels.js";
+import { TabGroup as Ot } from "./Tabs/TabGroup.js";
+import { Table as Et } from "./Table/Table.js";
+import { Tbody as Vt } from "./Table/Tbody.js";
+import { Thead as Jt } from "./Table/Thead.js";
+import { Tr as Ut } from "./Table/Tr.js";
+import { Td as jt, Th as qt } from "./Table/Cell.js";
+import { TFooter as Xt } from "./Table/TFooter.js";
+import { Tag as Zt } from "./Tag/Tag.js";
+import { TextButton as op } from "./TextButton/TextButton.js";
+import { TextInput as ep } from "./TextInput/TextInput.js";
+import { Textarea as pp } from "./Textarea/Textarea.js";
+import { ThemeProvider as xp } from "./ThemeProvider/ThemeProvider.js";
+import { useTheme as ap } from "./ThemeProvider/hooks.js";
+import { TimePicker as np } from "./TimePicker/TimePicker.js";
+import { ToggleCheckbox as up } from "./ToggleCheckbox/ToggleCheckbox.js";
+import { ToggleInput as cp } from "./ToggleInput/ToggleInput.js";
+import { Tooltip as Tp } from "./Tooltip/Tooltip.js";
+import { Typography as Sp } from "./Typography/Typography.js";
+import { VisuallyHidden as vp } from "./VisuallyHidden/VisuallyHidden.js";
+import { lightTheme as gp } from "./themes/lightTheme/index.js";
+import { darkTheme as Bp } from "./themes/darkTheme/index.js";
+import { extendTheme as hp } from "./themes/extendTheme.js";
+import { buttonFocusStyle as Fp, getThemeSize as Pp, inputFocusStyle as Ap } from "./themes/utils.js";
+import { POPOVER_PLACEMENTS as Mp, Popover as Rp } from "./Popover/Popover.js";
 export {
   e as Accordion,
   m as AccordionContent,
   i as AccordionGroup,
   f as AccordionToggle,
   t as AccordionTypography,
-  Sr as ActionLayout,
+  Cr as ActionLayout,
   d as Alert,
   l as Avatar,
-  c as AvatarGroup,
-  C as Badge,
+  T as AvatarGroup,
+  S as Badge,
   v as BaseButton,
   y as BaseButtonWrapper,
-  B as BaseCheckbox,
-  Br as BaseHeaderLayout,
+  L as BaseCheckbox,
+  Lr as BaseHeaderLayout,
   N as BaseLink,
   k as BaseRadio,
   I as Box,
-  M as Breadcrumbs,
+  R as Breadcrumbs,
   D as Button,
-  H as ButtonWrapper,
+  O as ButtonWrapper,
   E as Card,
   V as CardAction,
   J as CardAsset,
@@ -171,22 +172,22 @@ export {
   no as CarouselActions,
   lo as CarouselImage,
   ao as CarouselInput,
-  To as CarouselSlide,
+  so as CarouselSlide,
   bo as Checkbox,
-  So as Combobox,
-  Lo as ComboboxOption,
+  Co as Combobox,
+  go as ComboboxOption,
   yr as ContentLayout,
   vo as CreatableCombobox,
   G as Crumb,
-  Ro as DatePicker,
+  Mo as DatePicker,
   Go as DateTimePicker,
-  go as Dialog,
+  Bo as Dialog,
   ho as DialogBody,
   Fo as DialogFooter,
   Ao as DismissibleLayer,
   Do as Divider,
-  Ce as Dots,
-  Oo as EmptyStateLayout,
+  Se as Dots,
+  Ho as EmptyStateLayout,
   Wo as Field,
   or as FieldAction,
   Yo as FieldContext,
@@ -199,27 +200,30 @@ export {
   pr as Grid,
   xr as GridItem,
   Fr as GridLayout,
-  gr as HeaderLayout,
+  Br as HeaderLayout,
   ar as Icon,
   nr as IconButton,
   dr as IconButtonGroup,
-  s as Initials,
+  c as Initials,
   Uo as InputWrapper,
   lr as JSONInput,
-  Tr as KeyboardNavigable,
+  sr as KeyboardNavigable,
   br as Layout,
   Ar as Link,
-  Rr as LinkButton,
+  Mr as LinkButton,
   Dr as LiveRegions,
-  Or as Loader,
+  Hr as Loader,
   Wr as Main,
   Kr as MainNav,
-  pt as MenuItem,
+  it as MenuItem,
   ue as ModalBody,
   ne as ModalFooter,
   ae as ModalHeader,
   xe as ModalLayout,
-  ot as MultiSelectNested,
+  Xe as MultiSelect,
+  Ye as MultiSelectGroup,
+  qe as MultiSelectNested,
+  Ze as MultiSelectOption,
   _r as NavBrand,
   qr as NavCondense,
   Xr as NavFooter,
@@ -227,73 +231,74 @@ export {
   oe as NavSection,
   ee as NavSections,
   pe as NavUser,
-  Se as NextLink,
-  se as NumberInput,
-  Ze as OptGroup,
-  Xe as Option,
-  kp as POPOVER_PLACEMENTS,
+  Ce as NextLink,
+  ce as NumberInput,
+  mt as OptGroup,
+  tt as Option,
+  Mp as POPOVER_PLACEMENTS,
   ve as PageLink,
-  ce as Pagination,
-  Fp as Popover,
-  Be as PopoverPrimitives,
+  Te as Pagination,
+  Rp as Popover,
+  Le as PopoverPrimitives,
   Ne as Portal,
   ye as PreviousLink,
   ke as ProgressBar,
   Pe as Radio,
   P as RadioGroup,
   Ie as RawTable,
-  Oe as RawTbody,
-  Me as RawTd,
+  He as RawTbody,
+  Re as RawTd,
   Ge as RawTh,
   De as RawThead,
   We as RawTr,
   _e as SearchForm,
   Ke as Searchbar,
-  qe as Select,
-  et as SelectList,
-  mt as SimpleMenu,
+  ft as SelectList,
+  nt as SimpleMenu,
+  ot as SingleSelect,
+  rt as SingleSelectOption,
   zr as SkipToContent,
-  ft as Stack,
-  it as Status,
-  dt as SubNav,
-  st as SubNavHeader,
-  ct as SubNavLink,
-  Ct as SubNavLinkSection,
-  vt as SubNavSection,
-  Lt as SubNavSections,
-  gt as Switch,
-  Ut as TFooter,
-  ht as Tab,
-  Rt as TabGroup,
-  Pt as TabPanel,
-  At as TabPanels,
-  Gt as Table,
-  kt as Tabs,
-  jt as Tag,
-  Dt as Tbody,
-  zt as Td,
-  Qt as TextButton,
-  Yt as TextInput,
-  $t as Textarea,
-  Jt as Th,
-  Ot as Thead,
-  rp as ThemeProvider,
-  mp as TimePicker,
-  fp as ToggleCheckbox,
-  ip as ToggleInput,
-  dp as Tooltip,
-  Wt as Tr,
+  ut as Stack,
+  ct as Status,
+  Tt as SubNav,
+  Ct as SubNavHeader,
+  yt as SubNavLink,
+  Lt as SubNavLinkSection,
+  Nt as SubNavSection,
+  kt as SubNavSections,
+  Pt as Switch,
+  Xt as TFooter,
+  It as Tab,
+  Ot as TabGroup,
+  Gt as TabPanel,
+  wt as TabPanels,
+  Et as Table,
+  Mt as Tabs,
+  Zt as Tag,
+  Vt as Tbody,
+  jt as Td,
+  op as TextButton,
+  ep as TextInput,
+  pp as Textarea,
+  qt as Th,
+  Jt as Thead,
+  xp as ThemeProvider,
+  np as TimePicker,
+  up as ToggleCheckbox,
+  cp as ToggleInput,
+  Tp as Tooltip,
+  Ut as Tr,
   hr as TwoColsLayout,
-  lp as Typography,
-  Tp as VisuallyHidden,
-  Bp as buttonFocusStyle,
-  Sp as darkTheme,
-  yp as extendTheme,
-  gp as getThemeSize,
-  Np as inputFocusStyle,
-  bp as lightTheme,
-  ut as subNavWidth,
+  Sp as Typography,
+  vp as VisuallyHidden,
+  Fp as buttonFocusStyle,
+  Bp as darkTheme,
+  hp as extendTheme,
+  Pp as getThemeSize,
+  Ap as inputFocusStyle,
+  gp as lightTheme,
+  bt as subNavWidth,
   Zo as useField,
   Gr as useNotifyAT,
-  tp as useTheme
+  ap as useTheme
 };

package/dist/themes/extendTheme.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./lightTheme/index.cjs"),r=require("../helpers/objects.cjs"),n=t=>`
-${t}
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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:
 
@@ -7,7 +7,7 @@ The following is an example:
 import { lightTheme, extendTheme } from '@strapi/design-system';
 
 const myCustomTheme = extendTheme(lightTheme, {
-    ${Object.keys(s.lightTheme).map(e=>`${e}: /* put the overrides for the ${e} key */,`).join(`
+    ${Object.keys(d.lightTheme).map(t=>`${t}: /* put the overrides for the ${t} key */,`).join(`
 `)}
 })
-`,h=(t,e)=>{if(!r.isObject(t)){const o=n("The first argument should be an object and corresponds to the theme you want to extend.");throw new Error(o)}if(!r.isObject(e)){const o=n("The second argument should be an object and corresponds to the keys of the theme you want to override.");throw new Error(o)}return r.mergeDeep(t??{},e??{})};exports.extendTheme=h;
+`,u=(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=u;

package/dist/themes/extendTheme.js

@@ -1,6 +1,7 @@
-import { lightTheme as h } from "./lightTheme/index.js";
-import { isObject as r, mergeDeep as m } from "../helpers/objects.js";
-const n = (t) => `
+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:
@@ -9,20 +10,27 @@ The following is an example:
 import { lightTheme, extendTheme } from '@strapi/design-system';
 
 const myCustomTheme = extendTheme(lightTheme, {
-    ${Object.keys(h).map((e) => `${e}: /* put the overrides for the ${e} key */,`).join(`
+    ${Object.keys(f).map((r) => `${r}: /* put the overrides for the ${r} key */,`).join(`
 `)}
 })
-`, a = (t, e) => {
-  if (!r(t)) {
-    const o = n("The first argument should be an object and corresponds to the theme you want to extend.");
-    throw new Error(o);
+`, 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 (!r(e)) {
-    const o = n("The second argument should be an object and corresponds to the keys of the theme you want to override.");
-    throw new Error(o);
+  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);
   }
-  return m(t ?? {}, 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 {
-  a as extendTheme
+  g as extendTheme
 };

package/dist/themes/utils.cjs

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=t=>({theme:o,size:r})=>o.sizes[t][r],i=(t="&")=>({theme:o,hasError:r})=>`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("styled-components"),s=t=>({theme:o,size:e})=>o.sizes[t][e],i=(t="&")=>({theme:o,hasError:e})=>r.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;
+        border: 1px solid ${e?o.colors.danger600:o.colors.primary600};
+        box-shadow: ${e?o.colors.danger600:o.colors.primary600} 0px 0px 0px 2px;
       }
-    `,n=({theme:t})=>`
+    `,n=({theme:t})=>r.css`
   position: relative;
   outline: none;
-  
+
   &:after {
     transition-property: all;
     transition-duration: 0.2s;
@@ -38,4 +38,4 @@
       border: 2px solid ${t.colors.primary600};
     }
   }
-`;exports.buttonFocusStyle=n;exports.getThemeSize=e;exports.inputFocusStyle=i;
+`;exports.buttonFocusStyle=n;exports.getThemeSize=s;exports.inputFocusStyle=i;

package/dist/themes/utils.js

@@ -1,4 +1,5 @@
-const i = (t) => ({ theme: o, size: r }) => o.sizes[t][r], n = (t = "&") => ({ theme: o, hasError: r }) => `
+import { css as i } from "styled-components";
+const s = (t) => ({ theme: o, size: r }) => o.sizes[t][r], p = (t = "&") => ({ theme: o, hasError: r }) => i`
       outline: none;
       box-shadow: 0;
       transition-property: border-color, box-shadow, fill;
@@ -8,10 +9,10 @@ const i = (t) => ({ theme: o, size: r }) => o.sizes[t][r], n = (t = "&") => ({ t
         border: 1px solid ${r ? o.colors.danger600 : o.colors.primary600};
         box-shadow: ${r ? o.colors.danger600 : o.colors.primary600} 0px 0px 0px 2px;
       }
-    `, s = ({ theme: t }) => `
+    `, e = ({ theme: t }) => i`
   position: relative;
   outline: none;
-  
+
   &:after {
     transition-property: all;
     transition-duration: 0.2s;
@@ -40,7 +41,7 @@ const i = (t) => ({ theme: o, size: r }) => o.sizes[t][r], n = (t = "&") => ({ t
   }
 `;
 export {
-  s as buttonFocusStyle,
-  i as getThemeSize,
-  n as inputFocusStyle
+  e as buttonFocusStyle,
+  s as getThemeSize,
+  p as inputFocusStyle
 };

package/dist/v2/Link/Link.cjs

@@ -1,23 +1,25 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),y=require("@strapi/icons"),m=require("prop-types"),g=require("styled-components"),h=require("../../BaseLink/BaseLink.cjs"),v=require("../../Box/Box.cjs"),L=require("../../themes/utils.cjs"),k=require("../../Typography/Typography.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(f),a=l(m),u=l(g),q=u.default(h.BaseLink)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),p=require("react"),y=require("@strapi/icons"),d=require("styled-components"),f=require("../../BaseLink/BaseLink.cjs"),m=require("../../themes/utils.cjs"),g=require("../../Typography/Typography.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},j=i(p),L=i(d),k=L.default(f.BaseLink)`
   display: inline-flex;
   align-items: center;
   text-decoration: none;
+  gap: ${({theme:e})=>e.spaces[2]};
   pointer-events: ${({disabled:e})=>e?"none":void 0};
 
-  svg path {
-    fill: ${({disabled:e,theme:r})=>e?r.colors.neutral600:r.colors.primary600};
-  }
-
   svg {
     font-size: ${10/16}rem;
+
+    path {
+      fill: ${({disabled:e,theme:t})=>e?t.colors.neutral600:t.colors.primary600};
+    }
+  }
+
+  &:hover {
+    color: ${({theme:e})=>e.colors.primary500};
   }
 
-  &:hover,
   &:active {
-    color: ${({theme:e})=>e.colors.primary800};
+    color: ${({theme:e})=>e.colors.primary700};
   }
 
-  ${L.buttonFocusStyle};
-`,s=u.default(v.Box)`
-  display: flex;
-`,n=t.default.forwardRef(({children:e,href:r,disabled:i,startIcon:d,endIcon:o,...c},p)=>t.default.createElement(q,{ref:p,href:r,disabled:i,...c},d&&t.default.createElement(s,{as:"span","aria-hidden":!0,paddingRight:2},d),t.default.createElement(k.Typography,{textColor:i?"neutral600":"primary600"},e),o&&t.default.createElement(s,{as:"span","aria-hidden":!0,paddingLeft:2},o),r&&!o&&t.default.createElement(s,{as:"span","aria-hidden":!0,paddingLeft:2},t.default.createElement(y.ExternalLink,null))));n.displayName="Link";n.defaultProps={as:void 0,href:void 0,disabled:!1,startIcon:void 0,endIcon:void 0};n.propTypes={as:a.default.elementType,children:a.default.node.isRequired,disabled:a.default.bool,endIcon:a.default.element,href:a.default.string,startIcon:a.default.element};exports.Link=n;
+  ${m.buttonFocusStyle};
+`,a=j.default.forwardRef(({children:e,href:t,disabled:s=!1,startIcon:c,endIcon:o,isExternal:n=!0,...l},u)=>r.jsxs(k,{ref:u,href:t,disabled:s,isExternal:n,...l,children:[c,r.jsx(g.Typography,{textColor:s?"neutral600":"primary600",children:e}),o,t&&!o&&n&&r.jsx(y.ExternalLink,{})]}));a.displayName="Link";exports.Link=a;