@strapi/design-system 1.6.0 → 1.6.2

package/dist/Accordion/Accordion.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),f=require("styled-components"),s=require("../Typography/Typography.cjs"),$=require("../helpers/useId.cjs"),a=require("../Box/Box.cjs"),j=require("../Flex/Flex.cjs"),h=require("./AccordionContext.cjs"),T=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},d=T(f),m=({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}`,l=d.default(s.Typography)``,b=d.default(a.Box)`
-  border: ${m};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),$=require("styled-components"),c=require("../Typography/Typography.cjs"),j=require("../helpers/useId.cjs"),a=require("../Box/Box.cjs"),h=require("../Flex/Flex.cjs"),T=require("./AccordionContext.cjs"),m=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},d=m($),b=({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}`,l=d.default(c.Typography)``,A=d.default(a.Box)`
+  border: ${b};
 
   &:hover:not([aria-disabled='true']) {
     border: 1px solid ${({theme:r})=>r.colors.primary600};
@@ -8,11 +8,11 @@
       color: ${({theme:r,expanded:o})=>o?void 0:r.colors.primary700};
     }
 
-    ${s.Typography} {
+    ${c.Typography} {
       color: ${({theme:r,expanded:o})=>o?void 0:r.colors.primary600};
     }
 
-    & > ${j.Flex} {
+    & > ${h.Flex} {
       background: ${({theme:r})=>r.colors.primary100};
     }
 
@@ -20,4 +20,4 @@
       background: ${({theme:r})=>r.colors.primary200};
     }
   }
-`,A=({children:r,disabled:o=!1,error:e,expanded:t=!1,hasErrorMessage:n=!0,id:p,onToggle:u,toggle:y,size:x="M",variant:i="primary"})=>{const g=$.useId("accordion",p);return c.jsxs(h.AccordionContext.Provider,{value:{expanded:t,onToggle:u,toggle:y,id:g,size:x,variant:i,disabled:o},children:[c.jsx(b,{"data-strapi-expanded":t,disabled:o,"aria-disabled":o,expanded:t,hasRadius:!0,variant:i,error:e,children:r}),e&&n&&c.jsx(a.Box,{paddingTop:1,children:c.jsx(s.Typography,{variant:"pi",textColor:"danger600",children:e})})]})};exports.Accordion=A;exports.AccordionTypography=l;
+`,q=({children:r,disabled:o=!1,error:e,expanded:t=!1,hasErrorMessage:n=!0,id:p,onToggle:u,toggle:y,size:x="M",variant:i="primary",shadow:g})=>{const f=j.useId(p);return s.jsxs(T.AccordionContext.Provider,{value:{expanded:t,onToggle:u,toggle:y,id:f,size:x,variant:i,disabled:o},children:[s.jsx(A,{"data-strapi-expanded":t,disabled:o,"aria-disabled":o,expanded:t,hasRadius:!0,variant:i,error:e,shadow:g,children:r}),e&&n&&s.jsx(a.Box,{paddingTop:1,children:s.jsx(c.Typography,{variant:"pi",textColor:"danger600",children:e})})]})};exports.Accordion=q;exports.AccordionTypography=l;

package/dist/Accordion/Accordion.js

@@ -1,25 +1,25 @@
-import { jsxs as $, jsx as n } from "react/jsx-runtime";
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
 import e from "styled-components";
 import { Typography as t } from "../Typography/Typography.js";
-import { useId as x } from "../helpers/useId.js";
-import { Box as c } from "../Box/Box.js";
-import { Flex as y } from "../Flex/Flex.js";
-import { AccordionContext as g } from "./AccordionContext.js";
-const b = ({
+import { useId as y } from "../helpers/useId.js";
+import { Box as s } from "../Box/Box.js";
+import { Flex as g } from "../Flex/Flex.js";
+import { AccordionContext as b } from "./AccordionContext.js";
+const h = ({
   theme: r,
   expanded: o,
   variant: i,
   disabled: d,
   error: a
-}) => a ? `1px solid ${r.colors.danger600} !important` : d ? `1px solid ${r.colors.neutral150}` : o ? `1px solid ${r.colors.primary600}` : i === "primary" ? `1px solid ${r.colors.neutral0}` : `1px solid ${r.colors.neutral100}`, h = e(t)``, v = e(c)`
-  border: ${b};
+}) => a ? `1px solid ${r.colors.danger600} !important` : d ? `1px solid ${r.colors.neutral150}` : o ? `1px solid ${r.colors.primary600}` : i === "primary" ? `1px solid ${r.colors.neutral0}` : `1px solid ${r.colors.neutral100}`, v = e(t)``, A = e(s)`
+  border: ${h};
 
   &:hover:not([aria-disabled='true']) {
     border: 1px solid ${({
   theme: r
 }) => r.colors.primary600};
 
-    ${h} {
+    ${v} {
       color: ${({
   theme: r,
   expanded: o
@@ -33,7 +33,7 @@ const b = ({
 }) => o ? void 0 : r.colors.primary600};
     }
 
-    & > ${y} {
+    & > ${g} {
       background: ${({
   theme: r
 }) => r.colors.primary100};
@@ -45,30 +45,31 @@ const b = ({
 }) => r.colors.primary200};
     }
   }
-`, w = ({
+`, F = ({
   children: r,
   disabled: o = !1,
   error: i,
   expanded: d = !1,
   hasErrorMessage: a = !0,
-  id: s,
-  onToggle: l,
+  id: l,
+  onToggle: c,
   toggle: u,
   size: m = "M",
-  variant: p = "primary"
+  variant: p = "primary",
+  shadow: f
 }) => {
-  const f = x("accordion", s);
-  return $(g.Provider, {
+  const $ = y(l);
+  return x(b.Provider, {
     value: {
       expanded: d,
-      onToggle: l,
+      onToggle: c,
       toggle: u,
-      id: f,
+      id: $,
       size: m,
       variant: p,
       disabled: o
     },
-    children: [n(v, {
+    children: [n(A, {
       "data-strapi-expanded": d,
       disabled: o,
       "aria-disabled": o,
@@ -76,8 +77,9 @@ const b = ({
       hasRadius: !0,
       variant: p,
       error: i,
+      shadow: f,
       children: r
-    }), i && a && n(c, {
+    }), i && a && n(s, {
       paddingTop: 1,
       children: n(t, {
         variant: "pi",
@@ -88,6 +90,6 @@ const b = ({
   });
 };
 export {
-  w as Accordion,
-  h as AccordionTypography
+  F as Accordion,
+  v as AccordionTypography
 };

package/dist/Avatar/Avatar.cjs

@@ -1,29 +1,18 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),l=require("react"),u=require("styled-components"),c=require("../Typography/Typography.cjs"),d=require("../Flex/Flex.cjs"),t=require("./constants.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=p(u),h=i.default.img`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),u=require("react"),d=require("styled-components"),p=require("../Typography/Typography.cjs"),x=require("../Flex/Flex.cjs"),l=require("../Box/Box.cjs"),t=require("./constants.cjs"),h=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=h(d),v=i.default.img`
   border-radius: 50%;
   object-fit: cover;
   display: block;
   position: relative;
-`,v=i.default.div`
-  position: relative;
-  width: ${t.avatarSize/16}rem;
-  height: ${t.avatarSize/16}rem;
-  z-index: ${({hovering:e})=>e?1:void 0};
-`,x=i.default.img`
+`,g=i.default.img`
   border-radius: 50%;
   object-fit: cover;
   position: absolute;
   transform: translate(-${(t.previewSize-t.avatarSize)/2}px, -100%);
   margin-top: -${({theme:e})=>e.spaces[1]};
-`,g=i.default.div`
-  z-index: 1;
-  border-radius: 30%;
-  position: absolute;
-  width: ${t.avatarSize/16}rem;
-  height: ${t.avatarSize/16}rem;
-  background: ${({theme:e})=>e.colors.neutral0};
+`,f=i.default(l.Box)`
   opacity: 0.4;
-`,f=({src:e,alt:s,preview:a})=>{const[o,n]=l.useState(!1);return r.jsxs("span",{children:[a&&o?r.jsx(x,{"aria-hidden":!0,alt:"",width:`${t.previewSize}px`,height:`${t.previewSize}px`,src:a===!0?e:a}):null,r.jsxs(v,{hovering:Boolean(a&&o),onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1),children:[a&&o?r.jsx(g,{}):null,r.jsx(h,{src:e,alt:s,width:`${t.avatarSize}px`,height:`${t.avatarSize}px`})]})]})},y=i.default(d.Flex)`
+`,y=({src:e,alt:o,preview:r})=>{const[c,n]=u.useState(!1),s=Boolean(r&&c);return a.jsxs("span",{children:[s?a.jsx(g,{"aria-hidden":!0,alt:"",width:`${t.previewSize}px`,height:`${t.previewSize}px`,src:r===!0?e:typeof r=="string"?r:""}):null,a.jsxs(l.Box,{zIndex:s?1:void 0,position:"relative",onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1),width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,children:[s?a.jsx(f,{background:"neutral0",borderRadius:"50%",position:"absolute",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,zIndex:1}):null,a.jsx(v,{src:e,alt:o,width:`${t.avatarSize}px`,height:`${t.avatarSize}px`})]})]})},b=i.default(x.Flex)`
   span {
     line-height: 0;
   }
-`,b=({children:e,background:s="primary600",textColor:a="buttonNeutral0"})=>r.jsx(y,{background:s,borderRadius:"50%",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,justifyContent:"center",children:r.jsx(c.Typography,{fontSize:0,fontWeight:"bold",textColor:a,textTransform:"uppercase",children:e})});exports.Avatar=f;exports.Initials=b;
+`,j=({children:e,background:o="primary600",textColor:r="buttonNeutral0"})=>a.jsx(b,{background:o,borderRadius:"50%",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,justifyContent:"center",children:a.jsx(p.Typography,{fontSize:0,fontWeight:"bold",textColor:r,textTransform:"uppercase",children:e})});exports.Avatar=y;exports.Initials=j;

package/dist/Avatar/Avatar.js

@@ -1,87 +1,83 @@
-import { jsxs as p, jsx as i } from "react/jsx-runtime";
-import { useState as d } from "react";
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import { useState as h } from "react";
 import o from "styled-components";
-import { Typography as c } from "../Typography/Typography.js";
-import { Flex as h } from "../Flex/Flex.js";
-import { avatarSize as e, previewSize as s } from "./constants.js";
-const m = o.img`
+import { Typography as u } from "../Typography/Typography.js";
+import { Flex as m } from "../Flex/Flex.js";
+import { Box as d } from "../Box/Box.js";
+import { previewSize as s, avatarSize as t } from "./constants.js";
+const x = o.img`
   border-radius: 50%;
   object-fit: cover;
   display: block;
   position: relative;
-`, u = o.div`
-  position: relative;
-  width: ${e / 16}rem;
-  height: ${e / 16}rem;
-  z-index: ${({
-  hovering: t
-}) => t ? 1 : void 0};
 `, f = o.img`
   border-radius: 50%;
   object-fit: cover;
   position: absolute;
-  transform: translate(-${(s - e) / 2}px, -100%);
+  transform: translate(-${(s - t) / 2}px, -100%);
   margin-top: -${({
-  theme: t
-}) => t.spaces[1]};
-`, g = o.div`
-  z-index: 1;
-  border-radius: 30%;
-  position: absolute;
-  width: ${e / 16}rem;
-  height: ${e / 16}rem;
-  background: ${({
-  theme: t
-}) => t.colors.neutral0};
+  theme: e
+}) => e.spaces[1]};
+`, g = o(d)`
   opacity: 0.4;
-`, z = ({
-  src: t,
+`, S = ({
+  src: e,
   alt: n,
   preview: r
 }) => {
-  const [a, l] = d(!1);
-  return p("span", {
-    children: [r && a ? i(f, {
+  const [c, p] = h(!1), a = Boolean(r && c);
+  return l("span", {
+    children: [a ? i(f, {
       "aria-hidden": !0,
       alt: "",
       width: `${s}px`,
       height: `${s}px`,
-      src: r === !0 ? t : r
-    }) : null, p(u, {
-      hovering: Boolean(r && a),
-      onMouseEnter: () => l(!0),
-      onMouseLeave: () => l(!1),
-      children: [r && a ? i(g, {}) : null, i(m, {
-        src: t,
+      src: r === !0 ? e : typeof r == "string" ? r : ""
+    }) : null, l(d, {
+      zIndex: a ? 1 : void 0,
+      position: "relative",
+      onMouseEnter: () => p(!0),
+      onMouseLeave: () => p(!1),
+      width: `${t}px`,
+      height: `${t}px`,
+      children: [a ? i(g, {
+        background: "neutral0",
+        borderRadius: "50%",
+        position: "absolute",
+        width: `${t}px`,
+        height: `${t}px`,
+        zIndex: 1
+      }) : null, i(x, {
+        src: e,
         alt: n,
-        width: `${e}px`,
-        height: `${e}px`
+        width: `${t}px`,
+        height: `${t}px`
       })]
     })]
   });
-}, b = o(h)`
+}, b = o(m)`
   span {
     line-height: 0;
   }
-`, I = ({
-  children: t,
+`, k = ({
+  children: e,
   background: n = "primary600",
   textColor: r = "buttonNeutral0"
 }) => i(b, {
   background: n,
   borderRadius: "50%",
-  width: `${e}px`,
-  height: `${e}px`,
+  width: `${t}px`,
+  height: `${t}px`,
   justifyContent: "center",
-  children: i(c, {
+  children: i(u, {
     fontSize: 0,
     fontWeight: "bold",
     textColor: r,
     textTransform: "uppercase",
-    children: t
+    children: e
   })
 });
 export {
-  z as Avatar,
-  I as Initials
+  S as Avatar,
+  k as Initials
 };

package/dist/BaseRadio/BaseRadio.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),a=require("react"),b=require("styled-components"),g=require("./context.cjs"),t=require("./utils.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},y=r(a),R=r(b),m=R.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("../helpers/useId.cjs"),R=require("./context.cjs"),t=require("./utils.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};
@@ -28,4 +28,4 @@
     border: 1px solid ${({theme:e})=>e.colors.neutral300};
     background: ${({theme:e})=>e.colors.neutral200};
   }
-`,d=y.default.forwardRef(({value:e,disabled:n=!1,...i},c)=>{const{onChange:s,selected:l,name:u,size:p}=a.useContext(g.RadioContext),o=l===e;return f.jsx(m,{ref:c,type:"radio",name:u,value:e,tabIndex:o?0:-1,"aria-checked":o,checked:o,disabled:n,size:p,onChange:s,...i})});d.displayName="Radio";exports.BaseRadio=d;
+`,a=m.default.forwardRef(({value:e,disabled:n=!1,...i},c)=>{const s=y.useId(),{onChange:l,selected:u,name:p,size:f}=r.useContext(R.RadioContext),o=u===e;return b.jsx(x,{ref:c,type:"radio",name:p,value:e,tabIndex:o?0:-1,"aria-checked":o,checked:o,disabled:n,id:s,size:f,onChange:l,...i})});a.displayName="Radio";exports.BaseRadio=a;

package/dist/BaseRadio/BaseRadio.js

@@ -1,9 +1,10 @@
-import { jsx as s } from "react/jsx-runtime";
-import f, { useContext as u } from "react";
-import b from "styled-components";
-import { RadioContext as g } from "./context.js";
-import { getRadioSize as r, getSelectedRadioSize as t, getSelectedRadioPosition as a } from "./utils.js";
-const h = b.input`
+import { jsx as f } from "react/jsx-runtime";
+import u, { useContext as b } from "react";
+import g from "styled-components";
+import { useId as h } from "../helpers/useId.js";
+import { RadioContext as $ } from "./context.js";
+import { getRadioSize as r, getSelectedRadioSize as t, getSelectedRadioPosition as d } from "./utils.js";
+const y = g.input`
   margin: 0;
   padding: 0;
   background-color: ${({
@@ -33,8 +34,8 @@ const h = b.input`
     width: ${({
   size: e
 }) => typeof e == "number" ? e : t(e)};
-    left: ${a};
-    top: ${a};
+    left: ${d};
+    top: ${d};
   }
 
   &:checked:after {
@@ -51,32 +52,33 @@ const h = b.input`
   theme: e
 }) => e.colors.neutral200};
   }
-`, $ = f.forwardRef(({
+`, R = u.forwardRef(({
   value: e,
-  disabled: d = !1,
+  disabled: a = !1,
   ...n
 }, i) => {
-  const {
-    onChange: c,
-    selected: l,
-    name: p,
-    size: m
-  } = u(g), o = l === e;
-  return s(h, {
+  const c = h(), {
+    onChange: l,
+    selected: p,
+    name: m,
+    size: s
+  } = b($), o = p === e;
+  return f(y, {
     ref: i,
     type: "radio",
-    name: p,
+    name: m,
     value: e,
     tabIndex: o ? 0 : -1,
     "aria-checked": o,
     checked: o,
-    disabled: d,
-    size: m,
-    onChange: c,
+    disabled: a,
+    id: c,
+    size: s,
+    onChange: l,
     ...n
   });
 });
-$.displayName = "Radio";
+R.displayName = "Radio";
 export {
-  $ as BaseRadio
+  R as BaseRadio
 };

package/dist/Button/utils.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("../Typography/Typography.cjs"),l=require("./constants.cjs"),s=o=>o===l.SUCCESS_LIGHT||o===l.DANGER_LIGHT?`${o.substring(0,o.lastIndexOf("-"))}600`:o===l.TERTIARY?"neutral":o===l.DEFAULT||o===l.SECONDARY||l.VARIANTS.every(r=>r!==o)?"primary":`${o}`,u=({theme:o})=>`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("../Typography/Typography.cjs"),l=require("./constants.cjs"),s=o=>o===l.SUCCESS_LIGHT||o===l.DANGER_LIGHT?`${o.substring(0,o.lastIndexOf("-"))}`:o===l.TERTIARY?"neutral":o===l.DEFAULT||o===l.SECONDARY||l.VARIANTS.every(r=>r!==o)?"primary":`${o}`,u=({theme:o})=>`
     border: 1px solid ${o.colors.neutral200};
     background: ${o.colors.neutral150};
     ${c.Typography} {

package/dist/Button/utils.js

@@ -1,6 +1,6 @@
 import { Typography as c } from "../Typography/Typography.js";
 import { SUCCESS_LIGHT as $, DANGER_LIGHT as n, TERTIARY as s, DEFAULT as d, SECONDARY as u, VARIANTS as p, LIGHT_VARIANTS as g, GHOST as b, DANGER as t, SUCCESS as e } from "./constants.js";
-const l = (o) => o === $ || o === n ? `${o.substring(0, o.lastIndexOf("-"))}600` : o === s ? "neutral" : o === d || o === u || p.every((r) => r !== o) ? "primary" : `${o}`, k = ({ theme: o }) => `
+const l = (o) => o === $ || o === n ? `${o.substring(0, o.lastIndexOf("-"))}` : o === s ? "neutral" : o === d || o === u || p.every((r) => r !== o) ? "primary" : `${o}`, k = ({ theme: o }) => `
     border: 1px solid ${o.colors.neutral200};
     background: ${o.colors.neutral150};
     ${c} {

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

package/dist/Card/Card.js

@@ -6,7 +6,7 @@ const m = ({
   id: r,
   ...t
 }) => {
-  const e = a("card", r);
+  const e = a(r);
   return o(i.Provider, {
     value: {
       id: e

package/dist/Card/CardHeader.cjs

@@ -1,4 +1,3 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),r=require("styled-components"),o=require("../Flex/Flex.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=s(r),n=l.default(o.Flex)`
-  position: relative;
   border-bottom: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,a=e=>t.jsx(n,{justifyContent:"center",...e});exports.CardHeader=a;
+`,a=e=>t.jsx(n,{position:"relative",justifyContent:"center",...e});exports.CardHeader=a;

package/dist/Card/CardHeader.js

@@ -2,11 +2,11 @@ import { jsx as o } from "react/jsx-runtime";
 import t from "styled-components";
 import { Flex as e } from "../Flex/Flex.js";
 const i = t(e)`
-  position: relative;
   border-bottom: 1px solid ${({
   theme: r
 }) => r.colors.neutral150};
 `, a = (r) => o(i, {
+  position: "relative",
   justifyContent: "center",
   ...r
 });

package/dist/Card/CardTimer.cjs

@@ -1,5 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),o=require("styled-components"),a=require("../Box/Box.cjs"),s=require("../Typography/Typography.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=i(o),u=n.default(a.Box)`
-  position: absolute;
-  bottom: ${({theme:e})=>e.spaces[1]};
-  right: ${({theme:e})=>e.spaces[1]};
-`,c=({children:e,...r})=>t.jsx(u,{padding:1,background:"neutral800",color:"neutral0",as:"time",hasRadius:!0,...r,children:t.jsx(s.Typography,{variant:"pi",textColor:"neutral0",children:e})});exports.CardTimer=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("../Box/Box.cjs"),a=require("../Typography/Typography.cjs"),i=({children:r,...o})=>e.jsx(t.Box,{as:"time",background:"neutral800",bottom:1,right:1,color:"neutral0",hasRadius:!0,position:"absolute",padding:1,...o,children:e.jsx(a.Typography,{variant:"pi",textColor:"neutral0",children:r})});exports.CardTimer=i;

package/dist/Card/CardTimer.js

@@ -1,31 +1,25 @@
-import { jsx as o } from "react/jsx-runtime";
-import a from "styled-components";
-import { Box as e } from "../Box/Box.js";
-import { Typography as i } from "../Typography/Typography.js";
-const p = a(e)`
-  position: absolute;
-  bottom: ${({
-  theme: r
-}) => r.spaces[1]};
-  right: ${({
-  theme: r
-}) => r.spaces[1]};
-`, l = ({
-  children: r,
+import { jsx as r } from "react/jsx-runtime";
+import { Box as i } from "../Box/Box.js";
+import { Typography as a } from "../Typography/Typography.js";
+const p = ({
+  children: o,
   ...t
-}) => o(p, {
-  padding: 1,
+}) => r(i, {
+  as: "time",
   background: "neutral800",
+  bottom: 1,
+  right: 1,
   color: "neutral0",
-  as: "time",
   hasRadius: !0,
+  position: "absolute",
+  padding: 1,
   ...t,
-  children: o(i, {
+  children: r(a, {
     variant: "pi",
     textColor: "neutral0",
-    children: r
+    children: o
   })
 });
 export {
-  l as CardTimer
+  p as CardTimer
 };

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("../Stack/Stack.cjs"),C=require("../helpers/useId.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:p,previousLabel:F,required:q,secondaryLabel:b,selectedSlide:g,id:j,...y})=>{const d=C.useId("carouselinput",j);return r.default.createElement(R.Field,{hint:s,error:n,id:d,required:q},r.default.createElement(_.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:p,previousLabel:F,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 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("../Stack/Stack.cjs"),C=require("../helpers/useId.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=C.useId(j);return r.default.createElement(R.Field,{hint:s,error:n,id:d,required:q},r.default.createElement(_.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;

package/dist/CarouselInput/CarouselInput.js

@@ -16,10 +16,10 @@ const t = ({
   error: l,
   hint: s,
   label: i,
-  labelAction: a,
-  nextLabel: m,
-  onNext: u,
-  onPrevious: p,
+  labelAction: m,
+  nextLabel: a,
+  onNext: p,
+  onPrevious: u,
   previousLabel: c,
   required: f,
   secondaryLabel: g,
@@ -27,7 +27,7 @@ const t = ({
   id: b,
   ...v
 }) => {
-  const o = x("carouselinput", b);
+  const o = x(b);
   return /* @__PURE__ */ r.createElement(E, {
     hint: s,
     error: l,
@@ -36,13 +36,13 @@ const t = ({
   }, /* @__PURE__ */ r.createElement(h, {
     spacing: 1
   }, i && /* @__PURE__ */ r.createElement(y, {
-    action: a
+    action: m
   }, i), /* @__PURE__ */ r.createElement(R, {
     actions: n,
     label: i,
-    nextLabel: m,
-    onNext: u,
-    onPrevious: p,
+    nextLabel: a,
+    onNext: p,
+    onPrevious: u,
     previousLabel: c,
     secondaryLabel: g,
     selectedSlide: q,

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("styled-components"),y=require("prop-types"),F=require("../BaseCheckbox/BaseCheckbox.cjs"),b=require("../Stack/Stack.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("../Box/Box.cjs"),k=require("../helpers/useId.cjs"),m=require("../Typography/Typography.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=i(f),C=i(p),t=i(y),E=C.default(m.Typography)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),p=require("styled-components"),y=require("prop-types"),F=require("../BaseCheckbox/BaseCheckbox.cjs"),b=require("../Stack/Stack.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("../Box/Box.cjs"),k=require("../helpers/useId.cjs"),m=require("../Typography/Typography.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=o(f),C=o(p),t=o(y),E=C.default(m.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:c,error:s,...u})=>{const d=k.useId("checkbox",n);let o;return s?o=`${d}-error`:c&&(o=`${d}-hint`),r.default.createElement(x.Field,{id:d,hint:c,error:s},r.default.createElement(b.Stack,{spacing:1},r.default.createElement(E,{as:"label",textColor:"neutral800",disabled:l},r.default.createElement(T,{disabled:l,"aria-describedby":o,...u}),r.default.createElement(j.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;
+`,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=k.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(b.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(j.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;

package/dist/Checkbox/Checkbox.js

@@ -1,34 +1,34 @@
 import r from "react";
-import c from "styled-components";
+import s from "styled-components";
 import e from "prop-types";
-import { BaseCheckbox as s } from "../BaseCheckbox/BaseCheckbox.js";
+import { BaseCheckbox as c } from "../BaseCheckbox/BaseCheckbox.js";
 import { Stack as f } from "../Stack/Stack.js";
-import { Field as b } from "../Field/Field.js";
+import { Field as u } from "../Field/Field.js";
 import "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { FieldHint as u } from "../Field/FieldHint.js";
-import { FieldError as x } from "../Field/FieldError.js";
-import { useField as y } from "../Field/FieldContext.js";
+import { FieldHint as b } from "../Field/FieldHint.js";
+import { FieldError as y } from "../Field/FieldError.js";
+import { useField as x } from "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Box as h } from "../Box/Box.js";
-import { useId as E } from "../helpers/useId.js";
-import { Typography as g } from "../Typography/Typography.js";
-const k = c(g)`
+import { Box as E } from "../Box/Box.js";
+import { useId as g } from "../helpers/useId.js";
+import { Typography as h } from "../Typography/Typography.js";
+const k = s(h)`
   display: flex;
   align-items: flex-start;
   * {
     cursor: ${({ disabled: o }) => o ? "not-allowed" : "pointer"};
   }
 `, T = (o) => {
-  const { id: t } = y();
-  return /* @__PURE__ */ r.createElement(s, {
+  const { id: t } = x();
+  return /* @__PURE__ */ r.createElement(c, {
     id: t,
     ...o
   });
 }, a = ({ children: o, disabled: t, id: p, hint: m, error: l, ...d }) => {
-  const i = E("checkbox", p);
+  const i = g(p);
   let n;
-  return l ? n = `${i}-error` : m && (n = `${i}-hint`), /* @__PURE__ */ r.createElement(b, {
+  return l ? n = `${i}-error` : m && (n = `${i}-hint`), /* @__PURE__ */ r.createElement(u, {
     id: i,
     hint: m,
     error: l
@@ -42,9 +42,9 @@ const k = c(g)`
     disabled: t,
     "aria-describedby": n,
     ...d
-  }), /* @__PURE__ */ r.createElement(h, {
+  }), /* @__PURE__ */ r.createElement(E, {
     paddingLeft: 2
-  }, o)), /* @__PURE__ */ r.createElement(u, null), /* @__PURE__ */ r.createElement(x, null)));
+  }, o)), /* @__PURE__ */ r.createElement(b, null), /* @__PURE__ */ r.createElement(y, null)));
 };
 a.defaultProps = {
   disabled: !1,