@strapi/design-system 1.6.4 → 1.6.6

package/dist/Accordion/Accordion.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),m=require("react"),$=require("styled-components"),b=require("./AccordionContext.cjs"),p=require("../Box/Box.cjs"),h=require("../Flex/Flex.cjs"),T=require("../helpers/useId.cjs"),a=require("../Typography/Typography.cjs"),_=r=>r&&typeof r=="object"&&"default"in r?r:{default:r};function q(r){if(r&&r.__esModule)return r;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(o,e,t.get?t:{enumerable:!0,get:()=>r[e]})}}return o.default=r,Object.freeze(o)}const A=q(m),y=_($),v=({theme:r,expanded:o,variant:e,disabled:t,error:n})=>n?`1px solid ${r.colors.danger600} !important`:t?`1px solid ${r.colors.neutral150}`:o?`1px solid ${r.colors.primary600}`:e==="primary"?`1px solid ${r.colors.neutral0}`:`1px solid ${r.colors.neutral100}`,f=y.default(a.Typography)``,B=y.default(p.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),m=require("react"),$=require("styled-components"),b=require("./AccordionContext.cjs"),p=require("../Box/Box.cjs"),h=require("../Flex/Flex.cjs"),T=require("../hooks/useId.cjs"),a=require("../Typography/Typography.cjs"),_=r=>r&&typeof r=="object"&&"default"in r?r:{default:r};function q(r){if(r&&r.__esModule)return r;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(o,e,t.get?t:{enumerable:!0,get:()=>r[e]})}}return o.default=r,Object.freeze(o)}const A=q(m),y=_($),v=({theme:r,expanded:o,variant:e,disabled:t,error:n})=>n?`1px solid ${r.colors.danger600} !important`:t?`1px solid ${r.colors.neutral150}`:o?`1px solid ${r.colors.primary600}`:e==="primary"?`1px solid ${r.colors.neutral0}`:`1px solid ${r.colors.neutral100}`,f=y.default(a.Typography)``,B=y.default(p.Box)`
   border: ${v};
 
   &:hover:not([aria-disabled='true']) {

package/dist/Accordion/Accordion.js

@@ -4,7 +4,7 @@ import m from "styled-components";
 import { AccordionContext as h } from "./AccordionContext.js";
 import { Box as u } from "../Box/Box.js";
 import { Flex as b } from "../Flex/Flex.js";
-import { useId as A } from "../helpers/useId.js";
+import { useId as A } from "../hooks/useId.js";
 import { Typography as p } from "../Typography/Typography.js";
 const v = ({
   theme: r,

package/dist/Accordion/AccordionToggle.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),v=require("@strapi/icons"),B=require("styled-components"),z=require("./Accordion.cjs"),F=require("./AccordionContext.cjs"),I=require("./utils.cjs"),j=require("../Flex/Flex.cjs"),M=require("../Icon/Icon.cjs"),y=require("../Stack/Stack.cjs"),R=require("../TextButton/TextButton.cjs"),_=require("../Typography/Typography.cjs"),D=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=D(B),W=m.default(R.TextButton)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),F=require("@strapi/icons"),v=require("styled-components"),B=require("./Accordion.cjs"),I=require("./AccordionContext.cjs"),M=require("./utils.cjs"),s=require("../Flex/Flex.cjs"),R=require("../Icon/Icon.cjs"),z=require("../TextButton/TextButton.cjs"),S=require("../Typography/Typography.cjs"),_=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=_(v),D=m.default(z.TextButton)`
   text-align: left;
 
   // necessary to make the ellipsis prop work on the title
@@ -11,12 +11,12 @@
     height: ${14/16}rem;
 
     path {
-      fill: ${({theme:e,expanded:r})=>r?e.colors.primary600:e.colors.neutral500};
+      fill: ${({theme:e,expanded:t})=>t?e.colors.primary600:e.colors.neutral500};
     }
   }
-`,L=m.default(j.Flex)`
-  min-height: ${({theme:e,size:r})=>e.sizes.accordions[r]};
-  border-radius: ${({theme:e,expanded:r})=>r?`${e.borderRadius} ${e.borderRadius} 0 0`:e.borderRadius};
+`,W=m.default(s.Flex)`
+  min-height: ${({theme:e,size:t})=>e.sizes.accordions[t]};
+  border-radius: ${({theme:e,expanded:t})=>t?`${e.borderRadius} ${e.borderRadius} 0 0`:e.borderRadius};
 
   &:hover {
     svg {
@@ -25,4 +25,4 @@
       }
     }
   }
-`,P=({title:e,description:r,as:b="span",togglePosition:s="right",action:l,...T})=>{const{onToggle:c,toggle:u,expanded:t,id:d,size:n,variant:$,disabled:i}=F.useAccordion(),k=`accordion-content-${d}`,p=`accordion-label-${d}`,w=`accordion-desc-${d}`,a=n==="M"?6:4,g=n==="M"?a:a-2,C=I.getBackground({expanded:t,disabled:i,variant:$}),q={as:b,fontWeight:n==="S"?"bold":void 0,id:p,textColor:t?"primary600":"neutral700",ellipsis:!0,variant:n==="M"?"delta":void 0},S=t?"primary600":"neutral600",A=t?"primary200":"neutral200",h=n==="M"?`${32/16}rem`:`${24/16}rem`,x=()=>{i||(u&&!c?(console.warn('Deprecation warning: Usage of "toggle" prop in Accordion component is deprecated. This is discouraged and will be removed in the next major release. Please use "onToggle" instead'),u()):c&&c())},f=o.jsx(j.Flex,{justifyContent:"center",borderRadius:"50%",height:h,width:h,transform:t?"rotate(180deg)":void 0,"data-strapi-dropdown":!0,"aria-hidden":!0,as:"span",background:A,cursor:i?"not-allowed":"pointer",onClick:x,shrink:0,children:o.jsx(M.Icon,{as:v.CarretDown,width:n==="M"?`${11/16}rem`:`${8/16}rem`,color:t?"primary600":"neutral600"})});return o.jsx(L,{paddingBottom:g,paddingLeft:a,paddingRight:a,paddingTop:g,background:C,expanded:t,size:n,justifyContent:"space-between",cursor:i?"not-allowed":"",children:o.jsxs(y.Stack,{horizontal:!0,spacing:3,flex:1,maxWidth:"100%",children:[s==="left"&&f,o.jsx(W,{onClick:x,"aria-disabled":i,"aria-expanded":t,"aria-controls":k,"aria-labelledby":p,"data-strapi-accordion-toggle":!0,expanded:t,type:"button",flex:1,minWidth:0,...T,children:o.jsxs(o.Fragment,{children:[o.jsx(z.AccordionTypography,{...q,children:e}),r&&o.jsx(_.Typography,{as:"p",id:w,textColor:S,children:r})]})}),s==="right"&&o.jsxs(y.Stack,{horizontal:!0,spacing:3,children:[f,l]}),s==="left"&&l]})})};exports.AccordionToggle=P;
+`,L=({title:e,description:t,as:b="span",togglePosition:d="right",action:u,...j})=>{const{onToggle:c,toggle:p,expanded:r,id:l,size:n,variant:T,disabled:i}=I.useAccordion(),$=`accordion-content-${l}`,g=`accordion-label-${l}`,w=`accordion-desc-${l}`,a=n==="M"?6:4,x=n==="M"?a:a-2,C=M.getBackground({expanded:r,disabled:i,variant:T}),q={as:b,fontWeight:n==="S"?"bold":void 0,id:g,textColor:r?"primary600":"neutral700",ellipsis:!0,variant:n==="M"?"delta":void 0},k=r?"primary600":"neutral600",A=r?"primary200":"neutral200",h=n==="M"?`${32/16}rem`:`${24/16}rem`,f=()=>{i||(p&&!c?(console.warn('Deprecation warning: Usage of "toggle" prop in Accordion component is deprecated. This is discouraged and will be removed in the next major release. Please use "onToggle" instead'),p()):c&&c())},y=o.jsx(s.Flex,{justifyContent:"center",borderRadius:"50%",height:h,width:h,transform:r?"rotate(180deg)":void 0,"data-strapi-dropdown":!0,"aria-hidden":!0,as:"span",background:A,cursor:i?"not-allowed":"pointer",onClick:f,shrink:0,children:o.jsx(R.Icon,{as:F.CarretDown,width:n==="M"?`${11/16}rem`:`${8/16}rem`,color:r?"primary600":"neutral600"})});return o.jsx(W,{paddingBottom:x,paddingLeft:a,paddingRight:a,paddingTop:x,background:C,expanded:r,size:n,justifyContent:"space-between",cursor:i?"not-allowed":"",children:o.jsxs(s.Flex,{gap:3,flex:1,maxWidth:"100%",children:[d==="left"&&y,o.jsx(D,{onClick:f,"aria-disabled":i,"aria-expanded":r,"aria-controls":$,"aria-labelledby":g,"data-strapi-accordion-toggle":!0,expanded:r,type:"button",flex:1,minWidth:0,...j,children:o.jsxs(o.Fragment,{children:[o.jsx(B.AccordionTypography,{...q,children:e}),t&&o.jsx(S.Typography,{as:"p",id:w,textColor:k,children:t})]})}),d==="right"&&o.jsxs(s.Flex,{gap:3,children:[y,u]}),d==="left"&&u]})})};exports.AccordionToggle=L;

package/dist/Accordion/AccordionToggle.js

@@ -1,15 +1,14 @@
-import { jsx as i, jsxs as c, Fragment as R } from "react/jsx-runtime";
-import { CarretDown as A } from "@strapi/icons";
+import { jsx as i, jsxs as p, Fragment as M } from "react/jsx-runtime";
+import { CarretDown as R } from "@strapi/icons";
 import y from "styled-components";
-import { AccordionTypography as I } from "./Accordion.js";
-import { useAccordion as S } from "./AccordionContext.js";
+import { AccordionTypography as A } from "./Accordion.js";
+import { useAccordion as I } from "./AccordionContext.js";
 import { getBackground as W } from "./utils.js";
-import { Flex as $ } from "../Flex/Flex.js";
+import { Flex as d } from "../Flex/Flex.js";
 import { Icon as D } from "../Icon/Icon.js";
-import { Stack as b } from "../Stack/Stack.js";
 import { TextButton as F } from "../TextButton/TextButton.js";
-import { Typography as L } from "../Typography/Typography.js";
-const P = y(F)`
+import { Typography as S } from "../Typography/Typography.js";
+const L = y(F)`
   text-align: left;
 
   // necessary to make the ellipsis prop work on the title
@@ -28,7 +27,7 @@ const P = y(F)`
 }) => e ? o.colors.primary600 : o.colors.neutral500};
     }
   }
-`, U = y($)`
+`, P = y(d)`
   min-height: ${({
   theme: o,
   size: e
@@ -47,100 +46,98 @@ const P = y(F)`
       }
     }
   }
-`, Z = ({
+`, Q = ({
   title: o,
   description: e,
-  as: w = "span",
-  togglePosition: d = "right",
-  action: p,
-  ...C
+  as: $ = "span",
+  togglePosition: l = "right",
+  action: g,
+  ...w
 }) => {
   const {
-    onToggle: l,
-    toggle: g,
+    onToggle: s,
+    toggle: m,
     expanded: r,
-    id: s,
+    id: c,
     size: t,
-    variant: k,
+    variant: C,
     disabled: n
-  } = S(), T = `accordion-content-${s}`, m = `accordion-label-${s}`, z = `accordion-desc-${s}`, a = t === "M" ? 6 : 4, h = t === "M" ? a : a - 2, v = W({
+  } = I(), T = `accordion-content-${c}`, h = `accordion-label-${c}`, k = `accordion-desc-${c}`, a = t === "M" ? 6 : 4, u = t === "M" ? a : a - 2, v = W({
     expanded: r,
     disabled: n,
-    variant: k
+    variant: C
   }), j = {
-    as: w,
+    as: $,
     fontWeight: t === "S" ? "bold" : void 0,
-    id: m,
+    id: h,
     textColor: r ? "primary600" : "neutral700",
     ellipsis: !0,
     variant: t === "M" ? "delta" : void 0
-  }, B = r ? "primary600" : "neutral600", M = r ? "primary200" : "neutral200", u = t === "M" ? `${32 / 16}rem` : `${24 / 16}rem`, f = () => {
-    n || (g && !l ? (console.warn('Deprecation warning: Usage of "toggle" prop in Accordion component is deprecated. This is discouraged and will be removed in the next major release. Please use "onToggle" instead'), g()) : l && l());
-  }, x = i($, {
+  }, z = r ? "primary600" : "neutral600", B = r ? "primary200" : "neutral200", f = t === "M" ? `${32 / 16}rem` : `${24 / 16}rem`, x = () => {
+    n || (m && !s ? (console.warn('Deprecation warning: Usage of "toggle" prop in Accordion component is deprecated. This is discouraged and will be removed in the next major release. Please use "onToggle" instead'), m()) : s && s());
+  }, b = i(d, {
     justifyContent: "center",
     borderRadius: "50%",
-    height: u,
-    width: u,
+    height: f,
+    width: f,
     transform: r ? "rotate(180deg)" : void 0,
     "data-strapi-dropdown": !0,
     "aria-hidden": !0,
     as: "span",
-    background: M,
+    background: B,
     cursor: n ? "not-allowed" : "pointer",
-    onClick: f,
+    onClick: x,
     shrink: 0,
     children: i(D, {
-      as: A,
+      as: R,
       width: t === "M" ? `${11 / 16}rem` : `${8 / 16}rem`,
       color: r ? "primary600" : "neutral600"
     })
   });
-  return i(U, {
-    paddingBottom: h,
+  return i(P, {
+    paddingBottom: u,
     paddingLeft: a,
     paddingRight: a,
-    paddingTop: h,
+    paddingTop: u,
     background: v,
     expanded: r,
     size: t,
     justifyContent: "space-between",
     cursor: n ? "not-allowed" : "",
-    children: c(b, {
-      horizontal: !0,
-      spacing: 3,
+    children: p(d, {
+      gap: 3,
       flex: 1,
       maxWidth: "100%",
-      children: [d === "left" && x, i(P, {
-        onClick: f,
+      children: [l === "left" && b, i(L, {
+        onClick: x,
         "aria-disabled": n,
         "aria-expanded": r,
         "aria-controls": T,
-        "aria-labelledby": m,
+        "aria-labelledby": h,
         "data-strapi-accordion-toggle": !0,
         expanded: r,
         type: "button",
         flex: 1,
         minWidth: 0,
-        ...C,
-        children: c(R, {
-          children: [i(I, {
+        ...w,
+        children: p(M, {
+          children: [i(A, {
             ...j,
             children: o
-          }), e && i(L, {
+          }), e && i(S, {
             as: "p",
-            id: z,
-            textColor: B,
+            id: k,
+            textColor: z,
             children: e
           })]
         })
-      }), d === "right" && c(b, {
-        horizontal: !0,
-        spacing: 3,
-        children: [x, p]
-      }), d === "left" && p]
+      }), l === "right" && p(d, {
+        gap: 3,
+        children: [b, g]
+      }), l === "left" && g]
     })
   });
 };
 export {
-  Z as AccordionToggle
+  Q as AccordionToggle
 };

package/dist/BaseButton/BaseButton.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),l=require("react"),c=require("styled-components"),i=require("../Flex/Flex.cjs"),d=require("../themes/utils.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=t(l),f=t(c),s=f.default(i.Flex)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),c=require("react"),i=require("styled-components"),d=require("../Flex/Flex.cjs"),p=require("../themes/utils.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},f=t(c),b=t(i),s=b.default(d.Flex)`
   svg {
     height: ${({theme:e})=>e.spaces[3]};
     width: ${({theme:e})=>e.spaces[3]};
@@ -13,5 +13,5 @@
     pointer-events: none;
   }
 
-  ${d.buttonFocusStyle}
-`,r=p.default.forwardRef(({disabled:e,children:a,...o},u)=>n.jsx(s,{ref:u,"aria-disabled":e,as:"button",type:"button",disabled:e,padding:2,hasRadius:!0,background:"neutral0",borderColor:"neutral200",cursor:"pointer",...o,children:a}));r.displayName="BaseButton";exports.BaseButton=r;exports.BaseButtonWrapper=s;
+  ${p.buttonFocusStyle}
+`,r=f.default.forwardRef(({disabled:e,children:a,background:o="neutral0",...u},n)=>l.jsx(s,{ref:n,"aria-disabled":e,as:"button",type:"button",disabled:e,padding:2,hasRadius:!0,background:o,borderColor:"neutral200",cursor:"pointer",...u,children:a}));r.displayName="BaseButton";exports.BaseButton=r;exports.BaseButtonWrapper=s;

package/dist/BaseButton/BaseButton.js

@@ -1,9 +1,9 @@
-import { jsx as a } from "react/jsx-runtime";
-import s from "react";
-import n from "styled-components";
-import { Flex as i } from "../Flex/Flex.js";
-import { buttonFocusStyle as u } from "../themes/utils.js";
-const p = n(i)`
+import { jsx as s } from "react/jsx-runtime";
+import n from "react";
+import i from "styled-components";
+import { Flex as u } from "../Flex/Flex.js";
+import { buttonFocusStyle as p } from "../themes/utils.js";
+const d = i(u)`
   svg {
     height: ${({
   theme: t
@@ -24,27 +24,28 @@ const p = n(i)`
     pointer-events: none;
   }
 
-  ${u}
-`, d = s.forwardRef(({
+  ${p}
+`, l = n.forwardRef(({
   disabled: t,
   children: r,
-  ...e
-}, o) => a(p, {
-  ref: o,
+  background: e = "neutral0",
+  ...o
+}, a) => s(d, {
+  ref: a,
   "aria-disabled": t,
   as: "button",
   type: "button",
   disabled: t,
   padding: 2,
   hasRadius: !0,
-  background: "neutral0",
+  background: e,
   borderColor: "neutral200",
   cursor: "pointer",
-  ...e,
+  ...o,
   children: r
 }));
-d.displayName = "BaseButton";
+l.displayName = "BaseButton";
 export {
-  d as BaseButton,
-  p as BaseButtonWrapper
+  l as BaseButton,
+  d as BaseButtonWrapper
 };

package/dist/BaseRadio/BaseRadio.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),r=require("react"),g=require("styled-components"),y=require("./context.cjs"),t=require("./utils.cjs"),R=require("../helpers/useId.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=d(r),h=d(g),x=h.default.input`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),r=require("react"),g=require("styled-components"),y=require("./context.cjs"),t=require("./utils.cjs"),R=require("../hooks/useId.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=d(r),h=d(g),x=h.default.input`
   margin: 0;
   padding: 0;
   background-color: ${({theme:e})=>e.colors.neutral0};

package/dist/BaseRadio/BaseRadio.js

@@ -3,7 +3,7 @@ import u, { useContext as b } from "react";
 import g from "styled-components";
 import { RadioContext as h } from "./context.js";
 import { getRadioSize as r, getSelectedRadioSize as t, getSelectedRadioPosition as d } from "./utils.js";
-import { useId as $ } from "../helpers/useId.js";
+import { useId as $ } from "../hooks/useId.js";
 const y = g.input`
   margin: 0;
   padding: 0;

package/dist/Box/Box.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),r=require("../helpers/theme.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=a(i),l={color:!0,cursor:!0,height:!0,width:!0},m=d.default.div.withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),r=require("../helpers/theme.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=a(n),l={color:!0,cursor:!0,height:!0,width:!0},m=d.default.div.withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
   // Font
   font-size: ${({fontSize:e,theme:t})=>r.extractStyleFromTheme(t.fontSizes,e,e)};
 
   // Colors
-  background: ${({theme:e,background:t})=>r.extractStyleFromTheme(e.colors,t,void 0)};
+  background: ${({theme:e,background:t})=>r.extractStyleFromTheme(e.colors,t,t)};
   color: ${({theme:e,color:t})=>r.extractStyleFromTheme(e.colors,t,void 0)};
 
   // Spaces
@@ -27,7 +27,7 @@
   border-style: ${({borderStyle:e})=>e};
   border-width: ${({borderWidth:e})=>e};
   border-color: ${({borderColor:e,theme:t})=>r.extractStyleFromTheme(t.colors,e,void 0)};
-  border: ${({theme:e,borderColor:t,borderStyle:s,borderWidth:n})=>{if(t&&!s&&typeof n>"u")return`1px solid ${e.colors[t]}`}};
+  border: ${({theme:e,borderColor:t,borderStyle:s,borderWidth:i})=>{if(t&&!s&&typeof i>"u")return`1px solid ${e.colors[t]}`}};
 
   // Shadows
   box-shadow: ${({theme:e,shadow:t})=>r.extractStyleFromTheme(e.shadows,t,void 0)};

package/dist/Box/Box.js

@@ -1,6 +1,6 @@
 import d from "styled-components";
-import s from "../helpers/handleResponsiveValues.js";
-import { extractStyleFromTheme as r } from "../helpers/theme.js";
+import r from "../helpers/handleResponsiveValues.js";
+import { extractStyleFromTheme as s } from "../helpers/theme.js";
 const t = {
   color: !0,
   cursor: !0,
@@ -13,55 +13,55 @@ const t = {
   font-size: ${({
   fontSize: e,
   theme: o
-}) => r(o.fontSizes, e, e)};
+}) => s(o.fontSizes, e, e)};
 
   // Colors
   background: ${({
   theme: e,
   background: o
-}) => r(e.colors, o, void 0)};
+}) => s(e.colors, o, o)};
   color: ${({
   theme: e,
   color: o
-}) => r(e.colors, o, void 0)};
+}) => s(e.colors, o, void 0)};
 
   // Spaces
   ${({
   theme: e,
   padding: o
-}) => s("padding", o, e)}
+}) => r("padding", o, e)}
   ${({
   theme: e,
   paddingTop: o
-}) => s("padding-top", o, e)}
+}) => r("padding-top", o, e)}
   ${({
   theme: e,
   paddingRight: o
-}) => s("padding-right", o, e)}
+}) => r("padding-right", o, e)}
   ${({
   theme: e,
   paddingBottom: o
-}) => s("padding-bottom", o, e)}
+}) => r("padding-bottom", o, e)}
   ${({
   theme: e,
   paddingLeft: o
-}) => s("padding-left", o, e)}
+}) => r("padding-left", o, e)}
   ${({
   theme: e,
   marginLeft: o
-}) => s("margin-left", o, e)}
+}) => r("margin-left", o, e)}
   ${({
   theme: e,
   marginRight: o
-}) => s("margin-right", o, e)}
+}) => r("margin-right", o, e)}
   ${({
   theme: e,
   marginTop: o
-}) => s("margin-top", o, e)}
+}) => r("margin-top", o, e)}
   ${({
   theme: e,
   marginBottom: o
-}) => s("margin-bottom", o, e)}
+}) => r("margin-bottom", o, e)}
 
   // Responsive hiding
   ${({
@@ -89,7 +89,7 @@ const t = {
   border-color: ${({
   borderColor: e,
   theme: o
-}) => r(o.colors, e, void 0)};
+}) => s(o.colors, e, void 0)};
   border: ${({
   theme: e,
   borderColor: o,
@@ -104,7 +104,7 @@ const t = {
   box-shadow: ${({
   theme: e,
   shadow: o
-}) => r(e.shadows, o, void 0)};
+}) => s(e.shadows, o, void 0)};
 
   // Handlers
   pointer-events: ${({
@@ -129,19 +129,19 @@ const t = {
   left: ${({
   left: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   right: ${({
   right: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   top: ${({
   top: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   bottom: ${({
   bottom: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   z-index: ${({
   zIndex: e
 }) => e};
@@ -153,27 +153,27 @@ const t = {
   width: ${({
   width: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   max-width: ${({
   maxWidth: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   min-width: ${({
   minWidth: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   height: ${({
   height: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   max-height: ${({
   maxHeight: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
   min-height: ${({
   minHeight: e,
   theme: o
-}) => r(o.spaces, e, e)};
+}) => s(o.spaces, e, e)};
 
   // Animation
   transition: ${({

package/dist/Card/Card.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("react"),d=require("./CardContext.cjs"),u=require("../Box/Box.cjs"),n=require("../helpers/useId.cjs"),c=({id:r,...o})=>{const e=n.useId(r),s=a.useMemo(()=>({id:e}),[e]);return t.jsx(d.CardContext.Provider,{value:s,children:t.jsx(u.Box,{id:r,tabIndex:0,hasRadius:!0,background:"neutral0",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",shadow:"tableShadow",as:"article","aria-labelledby":`${e}-title`,...o})})};exports.Card=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("react"),d=require("./CardContext.cjs"),u=require("../Box/Box.cjs"),n=require("../hooks/useId.cjs"),c=({id:r,...o})=>{const e=n.useId(r),s=a.useMemo(()=>({id:e}),[e]);return t.jsx(d.CardContext.Provider,{value:s,children:t.jsx(u.Box,{id:r,tabIndex:0,hasRadius:!0,background:"neutral0",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",shadow:"tableShadow",as:"article","aria-labelledby":`${e}-title`,...o})})};exports.Card=c;

package/dist/Card/Card.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import { useMemo as a } from "react";
 import { CardContext as i } from "./CardContext.js";
 import { Box as l } from "../Box/Box.js";
-import { useId as n } from "../helpers/useId.js";
+import { useId as n } from "../hooks/useId.js";
 const p = ({
   id: o,
   ...t

package/dist/CarouselInput/CarouselActions.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),o=require("../Stack/Stack.cjs"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},c=a(e),n=t=>c.default.createElement(o.Stack,{justifyContent:"center",horizontal:!0,spacing:1,position:"absolute",width:"100%",bottom:1,...t});exports.CarouselActions=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),l=require("../Flex/Flex.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=n(c),s=({horizontal:e=!0,spacing:t=1,...o})=>r.default.createElement(l.Flex,{justifyContent:"center",gap:t,direction:e?"row":"column",alignItems:e?"center":"stretch",position:"absolute",width:"100%",bottom:1,...o});exports.CarouselActions=s;

package/dist/CarouselInput/CarouselActions.js

@@ -1,6 +1,18 @@
-import o from "react";
-import { Stack as e } from "../Stack/Stack.js";
-const n = (t) => /* @__PURE__ */ o.createElement(e, { justifyContent: "center", horizontal: !0, spacing: 1, position: "absolute", width: "100%", bottom: 1, ...t });
+import r from "react";
+import { Flex as n } from "../Flex/Flex.js";
+const m = ({ horizontal: t = !0, spacing: e = 1, ...o }) => /* @__PURE__ */ r.createElement(
+  n,
+  {
+    justifyContent: "center",
+    gap: e,
+    direction: t ? "row" : "column",
+    alignItems: t ? "center" : "stretch",
+    position: "absolute",
+    width: "100%",
+    bottom: 1,
+    ...o
+  }
+);
 export {
-  n as CarouselActions
+  m as CarouselActions
 };

package/dist/CarouselInput/CarouselInput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("react"),m=require("prop-types"),E=require("./Carousel.cjs"),R=require("../Field/Field.cjs"),L=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const I=require("../Field/FieldHint.cjs"),S=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const _=require("../helpers/useId.cjs"),C=require("../Stack/Stack.cjs"),u=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=u(v),e=u(m),l=({actions:t,children:a,error:n,hint:s,label:i,labelAction:o,nextLabel:c,onNext:f,onPrevious:F,previousLabel:p,required:q,secondaryLabel:b,selectedSlide:g,id:j,...y})=>{const d=_.useId(j);return r.default.createElement(R.Field,{hint:s,error:n,id:d,required:q},r.default.createElement(C.Stack,{spacing:1},i&&r.default.createElement(L.FieldLabel,{action:o},i),r.default.createElement(E.Carousel,{actions:t,label:i,nextLabel:c,onNext:f,onPrevious:F,previousLabel:p,secondaryLabel:b,selectedSlide:g,id:d,...y},a),r.default.createElement(I.FieldHint,null),r.default.createElement(S.FieldError,null)))};l.defaultProps={actions:void 0,error:void 0,hint:void 0,id:void 0,labelAction:void 0,required:!1,secondaryLabel:void 0};l.propTypes={actions:e.default.node,children:e.default.node.isRequired,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string.isRequired,labelAction:e.default.element,nextLabel:e.default.string.isRequired,onNext:e.default.func.isRequired,onPrevious:e.default.func.isRequired,previousLabel:e.default.string.isRequired,required:e.default.bool,secondaryLabel:e.default.string,selectedSlide:e.default.number.isRequired};exports.CarouselInput=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react"),v=require("prop-types"),E=require("./Carousel.cjs"),R=require("../Field/Field.cjs"),I=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const L=require("../Field/FieldHint.cjs"),x=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const _=require("../Flex/Flex.cjs"),C=require("../hooks/useId.cjs"),u=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},l=u(y),e=u(v),i=({actions:t,children:n,error:a,hint:o,label:r,labelAction:s,nextLabel:c,onNext:f,onPrevious:F,previousLabel:q,required:p,secondaryLabel:b,selectedSlide:g,id:j,...m})=>{const d=C.useId(j);return l.default.createElement(R.Field,{hint:o,error:a,id:d,required:p},l.default.createElement(_.Flex,{direction:"column",alignItems:"stretch",gap:1},r&&l.default.createElement(I.FieldLabel,{action:s},r),l.default.createElement(E.Carousel,{actions:t,label:r,nextLabel:c,onNext:f,onPrevious:F,previousLabel:q,secondaryLabel:b,selectedSlide:g,id:d,...m},n),l.default.createElement(L.FieldHint,null),l.default.createElement(x.FieldError,null)))};i.defaultProps={actions:void 0,error:void 0,hint:void 0,id:void 0,labelAction:void 0,required:!1,secondaryLabel:void 0};i.propTypes={actions:e.default.node,children:e.default.node.isRequired,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string.isRequired,labelAction:e.default.element,nextLabel:e.default.string.isRequired,onNext:e.default.func.isRequired,onPrevious:e.default.func.isRequired,previousLabel:e.default.string.isRequired,required:e.default.bool,secondaryLabel:e.default.string,selectedSlide:e.default.number.isRequired};exports.CarouselInput=i;

package/dist/CarouselInput/CarouselInput.js

@@ -4,12 +4,12 @@ import { Carousel as R } from "./Carousel.js";
 import { Field as E } from "../Field/Field.js";
 import { FieldLabel as y } from "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { FieldHint as L } from "../Field/FieldHint.js";
-import { FieldError as F } from "../Field/FieldError.js";
+import { FieldHint as F } from "../Field/FieldHint.js";
+import { FieldError as L } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { useId as h } from "../helpers/useId.js";
-import { Stack as x } from "../Stack/Stack.js";
+import { Flex as h } from "../Flex/Flex.js";
+import { useId as x } from "../hooks/useId.js";
 const t = ({
   actions: n,
   children: d,
@@ -18,32 +18,32 @@ const t = ({
   label: i,
   labelAction: m,
   nextLabel: a,
-  onNext: p,
-  onPrevious: u,
-  previousLabel: c,
+  onNext: u,
+  onPrevious: c,
+  previousLabel: p,
   required: f,
   secondaryLabel: g,
   selectedSlide: q,
   id: b,
   ...v
 }) => {
-  const o = h(b);
-  return /* @__PURE__ */ r.createElement(E, { hint: s, error: l, id: o, required: f }, /* @__PURE__ */ r.createElement(x, { spacing: 1 }, i && /* @__PURE__ */ r.createElement(y, { action: m }, i), /* @__PURE__ */ r.createElement(
+  const o = x(b);
+  return /* @__PURE__ */ r.createElement(E, { hint: s, error: l, id: o, required: f }, /* @__PURE__ */ r.createElement(h, { direction: "column", alignItems: "stretch", gap: 1 }, i && /* @__PURE__ */ r.createElement(y, { action: m }, i), /* @__PURE__ */ r.createElement(
     R,
     {
       actions: n,
       label: i,
       nextLabel: a,
-      onNext: p,
-      onPrevious: u,
-      previousLabel: c,
+      onNext: u,
+      onPrevious: c,
+      previousLabel: p,
       secondaryLabel: g,
       selectedSlide: q,
       id: o,
       ...v
     },
     d
-  ), /* @__PURE__ */ r.createElement(L, null), /* @__PURE__ */ r.createElement(F, null)));
+  ), /* @__PURE__ */ r.createElement(F, null), /* @__PURE__ */ r.createElement(L, null)));
 };
 t.defaultProps = {
   actions: void 0,

package/dist/Checkbox/Checkbox.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),p=require("prop-types"),y=require("styled-components"),F=require("../BaseCheckbox/BaseCheckbox.cjs"),b=require("../Box/Box.cjs"),x=require("../Field/Field.cjs");require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const h=require("../Field/FieldHint.cjs"),q=require("../Field/FieldError.cjs"),g=require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const j=require("../helpers/useId.cjs"),k=require("../Stack/Stack.cjs"),m=require("../Typography/Typography.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=o(f),t=o(p),C=o(y),E=C.default(m.Typography)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),p=require("prop-types"),F=require("styled-components"),y=require("../BaseCheckbox/BaseCheckbox.cjs"),x=require("../Box/Box.cjs"),b=require("../Field/Field.cjs");require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const h=require("../Field/FieldHint.cjs"),q=require("../Field/FieldError.cjs"),g=require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const j=require("../Flex/Flex.cjs"),m=require("../hooks/useId.cjs"),C=require("../Typography/Typography.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=i(f),t=i(p),E=i(F),T=E.default(C.Typography)`
   display: flex;
   align-items: flex-start;
   * {
     cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
   }
-`,T=e=>{const{id:l}=g.useField();return r.default.createElement(F.BaseCheckbox,{id:l,...e})},a=({children:e,disabled:l,id:n,hint:s,error:c,...u})=>{const d=j.useId(n);let i;return c?i=`${d}-error`:s&&(i=`${d}-hint`),r.default.createElement(x.Field,{id:d,hint:s,error:c},r.default.createElement(k.Stack,{spacing:1},r.default.createElement(E,{as:"label",textColor:"neutral800",disabled:l},r.default.createElement(T,{disabled:l,"aria-describedby":i,...u}),r.default.createElement(b.Box,{paddingLeft:2},e)),r.default.createElement(h.FieldHint,null),r.default.createElement(q.FieldError,null)))};a.defaultProps={disabled:!1,id:void 0,error:void 0,hint:void 0};a.propTypes={children:t.default.node.isRequired,disabled:t.default.bool,error:t.default.string,hint:t.default.oneOfType([t.default.string,t.default.node,t.default.arrayOf(t.default.node)]),id:t.default.oneOfType([t.default.string,t.default.number])};exports.Checkbox=a;
+`,k=e=>{const{id:l}=g.useField();return r.default.createElement(y.BaseCheckbox,{id:l,...e})},a=({children:e,disabled:l,id:c,hint:s,error:n,...u})=>{const o=m.useId(c);let d;return n?d=`${o}-error`:s&&(d=`${o}-hint`),r.default.createElement(b.Field,{id:o,hint:s,error:n},r.default.createElement(j.Flex,{direction:"column",alignItems:"stretch",gap:1},r.default.createElement(T,{as:"label",textColor:"neutral800",disabled:l},r.default.createElement(k,{disabled:l,"aria-describedby":d,...u}),r.default.createElement(x.Box,{paddingLeft:2},e)),r.default.createElement(h.FieldHint,null),r.default.createElement(q.FieldError,null)))};a.defaultProps={disabled:!1,id:void 0,error:void 0,hint:void 0};a.propTypes={children:t.default.node.isRequired,disabled:t.default.bool,error:t.default.string,hint:t.default.oneOfType([t.default.string,t.default.node,t.default.arrayOf(t.default.node)]),id:t.default.oneOfType([t.default.string,t.default.number])};exports.Checkbox=a;