@strapi/design-system 1.6.1 → 1.6.3

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/Box/Box.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),r=require("../helpers/theme.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=i(a),l={color:!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 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)})`
   // Font
   font-size: ${({fontSize:e,theme:t})=>r.extractStyleFromTheme(t.fontSizes,e,e)};
 

package/dist/Box/Box.js

@@ -1,64 +1,67 @@
 import d from "styled-components";
-import i from "../helpers/handleResponsiveValues.js";
-import { extractStyleFromTheme as s } from "../helpers/theme.js";
-const $ = {
-  color: !0
+import s from "../helpers/handleResponsiveValues.js";
+import { extractStyleFromTheme as r } from "../helpers/theme.js";
+const t = {
+  color: !0,
+  cursor: !0,
+  height: !0,
+  width: !0
 }, l = d.div.withConfig({
-  shouldForwardProp: (e, o) => !$[e] && o(e)
+  shouldForwardProp: (e, o) => !t[e] && o(e)
 })`
   // Font
   font-size: ${({
   fontSize: e,
   theme: o
-}) => s(o.fontSizes, e, e)};
+}) => r(o.fontSizes, e, e)};
 
   // Colors
   background: ${({
   theme: e,
   background: o
-}) => s(e.colors, o, void 0)};
+}) => r(e.colors, o, void 0)};
   color: ${({
   theme: e,
   color: o
-}) => s(e.colors, o, void 0)};
+}) => r(e.colors, o, void 0)};
 
   // Spaces
   ${({
   theme: e,
   padding: o
-}) => i("padding", o, e)}
+}) => s("padding", o, e)}
   ${({
   theme: e,
   paddingTop: o
-}) => i("padding-top", o, e)}
+}) => s("padding-top", o, e)}
   ${({
   theme: e,
   paddingRight: o
-}) => i("padding-right", o, e)}
+}) => s("padding-right", o, e)}
   ${({
   theme: e,
   paddingBottom: o
-}) => i("padding-bottom", o, e)}
+}) => s("padding-bottom", o, e)}
   ${({
   theme: e,
   paddingLeft: o
-}) => i("padding-left", o, e)}
+}) => s("padding-left", o, e)}
   ${({
   theme: e,
   marginLeft: o
-}) => i("margin-left", o, e)}
+}) => s("margin-left", o, e)}
   ${({
   theme: e,
   marginRight: o
-}) => i("margin-right", o, e)}
+}) => s("margin-right", o, e)}
   ${({
   theme: e,
   marginTop: o
-}) => i("margin-top", o, e)}
+}) => s("margin-top", o, e)}
   ${({
   theme: e,
   marginBottom: o
-}) => i("margin-bottom", o, e)}
+}) => s("margin-bottom", o, e)}
 
   // Responsive hiding
   ${({
@@ -75,8 +78,8 @@ const $ = {
   border-radius: ${({
   theme: e,
   hasRadius: o,
-  borderRadius: r
-}) => o ? e.borderRadius : r};
+  borderRadius: i
+}) => o ? e.borderRadius : i};
   border-style: ${({
   borderStyle: e
 }) => e};
@@ -86,14 +89,14 @@ const $ = {
   border-color: ${({
   borderColor: e,
   theme: o
-}) => s(o.colors, e, void 0)};
+}) => r(o.colors, e, void 0)};
   border: ${({
   theme: e,
   borderColor: o,
-  borderStyle: r,
+  borderStyle: i,
   borderWidth: n
 }) => {
-  if (o && !r && !n)
+  if (o && !i && !n)
     return `1px solid ${e.colors[o]}`;
 }};
 
@@ -101,7 +104,7 @@ const $ = {
   box-shadow: ${({
   theme: e,
   shadow: o
-}) => s(e.shadows, o, void 0)};
+}) => r(e.shadows, o, void 0)};
 
   // Handlers
   pointer-events: ${({
@@ -126,19 +129,19 @@ const $ = {
   left: ${({
   left: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   right: ${({
   right: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   top: ${({
   top: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   bottom: ${({
   bottom: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   z-index: ${({
   zIndex: e
 }) => e};
@@ -150,27 +153,27 @@ const $ = {
   width: ${({
   width: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   max-width: ${({
   maxWidth: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   min-width: ${({
   minWidth: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   height: ${({
   height: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   max-height: ${({
   maxHeight: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(o.spaces, e, e)};
   min-height: ${({
   minHeight: e,
   theme: o
-}) => s(o.spaces, e, e)};
+}) => r(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"),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;