@strapi/design-system 1.5.0-alpha.0 → 1.6.0-alpha.0

package/dist/Breadcrumbs/Breadcrumbs.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),y=require("prop-types"),f=require("styled-components"),h=require("@strapi/icons/ChevronRight"),u=require("../Typography/Typography.cjs"),s=require("../Box/Box.cjs"),d=require("../Flex/Flex.cjs"),m=require("../VisuallyHidden/VisuallyHidden.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(p),r=l(y),g=l(f),b=l(h),T=g.default(d.Flex)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),d=require("styled-components"),u=require("@strapi/icons"),t=require("../Typography/Typography.cjs"),s=require("../Box/Box.cjs"),i=require("../Flex/Flex.cjs"),c=require("../VisuallyHidden/VisuallyHidden.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},y=p(d),h=y.default(i.Flex)`
   svg {
     height: ${10/16}rem;
     width: ${10/16}rem;
@@ -9,8 +9,8 @@
   :last-of-type ${s.Box} {
     display: none;
   }
-  :last-of-type ${u.Typography} {
+  :last-of-type ${t.Typography} {
     color: ${({theme:e})=>e.colors.neutral800};
     font-weight: ${({theme:e})=>e.fontWeights.bold};
   }
-`,a=({children:e})=>t.default.createElement(T,{inline:!0,as:"li"},t.default.createElement(u.Typography,{variant:"pi",textColor:"neutral600"},e),t.default.createElement(s.Box,{"aria-hidden":!0,paddingLeft:3,paddingRight:3},t.default.createElement(b.default,null)));a.displayName="Crumb";a.propTypes={children:r.default.node.isRequired};const n=r.default.shape({type:r.default.oneOf([a])}),o=({children:e,label:i,...c})=>t.default.createElement(d.Flex,{...c},t.default.createElement(m.VisuallyHidden,null,i),t.default.createElement("ol",{"aria-hidden":!0},e));o.displayName="Breadcrumbs";o.propTypes={children:r.default.oneOfType([r.default.arrayOf(n),n]).isRequired,label:r.default.string.isRequired};exports.Breadcrumbs=o;exports.Crumb=a;
+`,l=({children:e})=>r.jsxs(h,{inline:!0,as:"li",children:[r.jsx(t.Typography,{variant:"pi",textColor:"neutral600",children:e}),r.jsx(s.Box,{"aria-hidden":!0,paddingLeft:3,paddingRight:3,children:r.jsx(u.ChevronRight,{})})]});l.displayName="Crumb";const o=({children:e,label:n,...a})=>r.jsxs(i.Flex,{...a,children:[r.jsx(c.VisuallyHidden,{children:n}),r.jsx("ol",{"aria-hidden":!0,children:e})]});o.displayName="Breadcrumbs";exports.Breadcrumbs=o;exports.Crumb=l;

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -1,52 +1,63 @@
-import r from "react";
-import t from "prop-types";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import d from "styled-components";
-import c from "@strapi/icons/ChevronRight";
-import { Typography as a } from "../Typography/Typography.js";
-import { Box as l } from "../Box/Box.js";
-import { Flex as n } from "../Flex/Flex.js";
-import { VisuallyHidden as u } from "../VisuallyHidden/VisuallyHidden.js";
-const f = d(n)`
+import { ChevronRight as m } from "@strapi/icons";
+import { Typography as o } from "../Typography/Typography.js";
+import { Box as t } from "../Box/Box.js";
+import { Flex as l } from "../Flex/Flex.js";
+import { VisuallyHidden as p } from "../VisuallyHidden/VisuallyHidden.js";
+const s = d(l)`
   svg {
     height: ${10 / 16}rem;
     width: ${10 / 16}rem;
     path {
-      fill: ${({ theme: e }) => e.colors.neutral500};
+      fill: ${({
+  theme: r
+}) => r.colors.neutral500};
     }
   }
-  :last-of-type ${l} {
+  :last-of-type ${t} {
     display: none;
   }
-  :last-of-type ${a} {
-    color: ${({ theme: e }) => e.colors.neutral800};
-    font-weight: ${({ theme: e }) => e.fontWeights.bold};
+  :last-of-type ${o} {
+    color: ${({
+  theme: r
+}) => r.colors.neutral800};
+    font-weight: ${({
+  theme: r
+}) => r.fontWeights.bold};
   }
-`, o = ({ children: e }) => /* @__PURE__ */ r.createElement(f, {
+`, h = ({
+  children: r
+}) => i(s, {
   inline: !0,
-  as: "li"
-}, /* @__PURE__ */ r.createElement(a, {
-  variant: "pi",
-  textColor: "neutral600"
-}, e), /* @__PURE__ */ r.createElement(l, {
-  "aria-hidden": !0,
-  paddingLeft: 3,
-  paddingRight: 3
-}, /* @__PURE__ */ r.createElement(c, null)));
-o.displayName = "Crumb";
-o.propTypes = {
-  children: t.node.isRequired
-};
-const i = t.shape({ type: t.oneOf([o]) }), p = ({ children: e, label: m, ...s }) => /* @__PURE__ */ r.createElement(n, {
-  ...s
-}, /* @__PURE__ */ r.createElement(u, null, m), /* @__PURE__ */ r.createElement("ol", {
-  "aria-hidden": !0
-}, e));
-p.displayName = "Breadcrumbs";
-p.propTypes = {
-  children: t.oneOfType([t.arrayOf(i), i]).isRequired,
-  label: t.string.isRequired
-};
+  as: "li",
+  children: [e(o, {
+    variant: "pi",
+    textColor: "neutral600",
+    children: r
+  }), e(t, {
+    "aria-hidden": !0,
+    paddingLeft: 3,
+    paddingRight: 3,
+    children: e(m, {})
+  })]
+});
+h.displayName = "Crumb";
+const c = ({
+  children: r,
+  label: n,
+  ...a
+}) => i(l, {
+  ...a,
+  children: [e(p, {
+    children: n
+  }), e("ol", {
+    "aria-hidden": !0,
+    children: r
+  })]
+});
+c.displayName = "Breadcrumbs";
 export {
-  p as Breadcrumbs,
-  o as Crumb
+  c as Breadcrumbs,
+  h as Crumb
 };

package/dist/Button/Button.cjs

@@ -1,48 +1,48 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("react"),x=require("prop-types"),g=require("styled-components"),j=require("@strapi/icons/Loader"),h=require("../Typography/Typography.cjs"),d=require("../Box/Box.cjs"),o=require("./utils.cjs"),y=require("./constants.cjs"),E=require("../BaseButton/BaseButton.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=n(q),t=n(x),u=n(g),L=n(j),P=g.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),S=require("react"),f=require("styled-components"),q=require("@strapi/icons"),p=require("../Typography/Typography.cjs"),s=require("../Box/Box.cjs"),T=require("../BaseButton/BaseButton.cjs"),r=require("./utils.cjs"),u=require("./constants.cjs"),g=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},_=g(S),n=g(f),D=f.keyframes`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`,R=u.default.div`
-  animation: ${P} 2s infinite linear;
+`,L=n.default.div`
+  animation: ${D} 2s infinite linear;
   will-change: transform;
-`,W=u.default(d.Box)`
+`,R=n.default(s.Box)`
   height: 100%;
-`,b=u.default(E.BaseButton)`
+`,y=n.default(T.BaseButton)`
   align-items: center;
-  background-color: ${({theme:e})=>e.colors.buttonPrimary600};
-  border: 1px solid ${({theme:e})=>e.colors.buttonPrimary600};
-  height: ${({theme:e,size:l})=>e.sizes.button[l]};
-  padding-left: ${({theme:e})=>e.spaces[4]};
-  padding-right: ${({theme:e})=>e.spaces[4]};
+  background-color: ${({theme:t})=>t.colors.buttonPrimary600};
+  border: 1px solid ${({theme:t})=>t.colors.buttonPrimary600};
+  height: ${({theme:t,size:i})=>t.sizes.button[i]};
+  padding-left: ${({theme:t})=>t.spaces[4]};
+  padding-right: ${({theme:t})=>t.spaces[4]};
 
-  ${d.Box} {
+  ${s.Box} {
     display: flex;
     align-items: center;
   }
 
-  ${h.Typography} {
-    color: ${({theme:e})=>e.colors.buttonNeutral0};
+  ${p.Typography} {
+    color: ${({theme:t})=>t.colors.buttonNeutral0};
   }
 
   &[aria-disabled='true'] {
-    ${o.getDisabledStyle}
+    ${r.getDisabledStyle}
     &:active {
-      ${o.getDisabledStyle}
+      ${r.getDisabledStyle}
     }
   }
   &:hover {
-    ${o.getHoverStyle}
+    ${r.getHoverStyle}
   }
   &:active {
-    ${o.getActiveStyle}
+    ${r.getActiveStyle}
   }
-  ${o.getVariantStyle}
-  ${({fullWidth:e})=>e&&`
+  ${r.getVariantStyle}
+  ${({fullWidth:t})=>t&&`
     display: inline-flex;
     justify-content: center;
     width: 100%;
   `}
-`,r=a.default.forwardRef(({variant:e,startIcon:l,endIcon:c,disabled:m,children:B,onClick:f,size:p,loading:i,fullWidth:v,...$},S)=>{const s=m||i,T=_=>{!s&&f&&f(_)};return a.default.createElement(b,{ref:S,"aria-disabled":s,disabled:s,size:p,variant:e,onClick:T,fullWidth:v,...$},(l||i)&&a.default.createElement(W,{"aria-hidden":!0,paddingRight:2},i?a.default.createElement(R,null,a.default.createElement(L.default,null)):l),a.default.createElement(h.Typography,{variant:p==="S"?"pi":void 0,fontWeight:"bold",lineHeight:0},B),c&&a.default.createElement(d.Box,{"aria-hidden":!0,paddingLeft:2},c))});r.displayName="Button";r.defaultProps={disabled:!1,endIcon:void 0,fullWidth:!1,loading:!1,onClick:void 0,size:"S",startIcon:void 0,variant:"default"};r.propTypes={children:t.default.node.isRequired,disabled:t.default.bool,endIcon:t.default.element,fullWidth:t.default.bool,loading:t.default.bool,onClick:t.default.func,size:t.default.oneOf(y.BUTTON_SIZES),startIcon:t.default.element,variant:t.default.oneOf(y.VARIANTS)};exports.Button=r;exports.ButtonWrapper=b;
+`,h=_.default.forwardRef(({variant:t=u.DEFAULT,startIcon:i,endIcon:l,disabled:B=!1,children:x,onClick:c,size:d=u.BUTTON_SIZES[0],loading:a=!1,fullWidth:b=!1,...j},m)=>{const o=B||a,$=v=>{!o&&c&&c(v)};return e.jsxs(y,{ref:m,"aria-disabled":o,disabled:o,size:d,variant:t,onClick:$,fullWidth:b,...j,children:[(i||a)&&e.jsx(R,{"aria-hidden":!0,paddingRight:2,children:a?e.jsx(L,{children:e.jsx(q.Loader,{})}):i}),e.jsx(p.Typography,{variant:d==="S"?"pi":void 0,fontWeight:"bold",lineHeight:0,children:x}),l&&e.jsx(s.Box,{"aria-hidden":!0,paddingLeft:2,children:l})]})});h.displayName="Button";exports.Button=h;exports.ButtonWrapper=y;

package/dist/Button/Button.js

@@ -1,39 +1,52 @@
-import o from "react";
-import t from "prop-types";
-import n, { keyframes as S } from "styled-components";
-import B from "@strapi/icons/Loader";
-import { Typography as p } from "../Typography/Typography.js";
-import { Box as l } from "../Box/Box.js";
-import { getDisabledStyle as f, getHoverStyle as E, getActiveStyle as x, getVariantStyle as T } from "./utils.js";
-import { BUTTON_SIZES as k, VARIANTS as R } from "./constants.js";
-import { BaseButton as W } from "../BaseButton/BaseButton.js";
-const I = S`
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import b from "react";
+import a, { keyframes as v } from "styled-components";
+import { Loader as x } from "@strapi/icons";
+import { Typography as c } from "../Typography/Typography.js";
+import { Box as n } from "../Box/Box.js";
+import { BaseButton as B } from "../BaseButton/BaseButton.js";
+import { getDisabledStyle as f, getHoverStyle as S, getActiveStyle as k, getVariantStyle as L } from "./utils.js";
+import { DEFAULT as T, BUTTON_SIZES as W } from "./constants.js";
+const j = v`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`, N = n.div`
-  animation: ${I} 2s infinite linear;
+`, w = a.div`
+  animation: ${j} 2s infinite linear;
   will-change: transform;
-`, P = n(l)`
+`, D = a(n)`
   height: 100%;
-`, w = n(W)`
+`, H = a(B)`
   align-items: center;
-  background-color: ${({ theme: e }) => e.colors.buttonPrimary600};
-  border: 1px solid ${({ theme: e }) => e.colors.buttonPrimary600};
-  height: ${({ theme: e, size: r }) => e.sizes.button[r]};
-  padding-left: ${({ theme: e }) => e.spaces[4]};
-  padding-right: ${({ theme: e }) => e.spaces[4]};
+  background-color: ${({
+  theme: t
+}) => t.colors.buttonPrimary600};
+  border: 1px solid ${({
+  theme: t
+}) => t.colors.buttonPrimary600};
+  height: ${({
+  theme: t,
+  size: r
+}) => t.sizes.button[r]};
+  padding-left: ${({
+  theme: t
+}) => t.spaces[4]};
+  padding-right: ${({
+  theme: t
+}) => t.spaces[4]};
 
-  ${l} {
+  ${n} {
     display: flex;
     align-items: center;
   }
 
-  ${p} {
-    color: ${({ theme: e }) => e.colors.buttonNeutral0};
+  ${c} {
+    color: ${({
+  theme: t
+}) => t.colors.buttonNeutral0};
   }
 
   &[aria-disabled='true'] {
@@ -43,67 +56,63 @@ const I = S`
     }
   }
   &:hover {
-    ${E}
+    ${S}
   }
   &:active {
-    ${x}
+    ${k}
   }
-  ${T}
-  ${({ fullWidth: e }) => e && `
+  ${L}
+  ${({
+  fullWidth: t
+}) => t && `
     display: inline-flex;
     justify-content: center;
     width: 100%;
   `}
-`, d = o.forwardRef(
-  ({ variant: e, startIcon: r, endIcon: s, disabled: u, children: g, onClick: c, size: m, loading: i, fullWidth: h, ...b }, y) => {
-    const a = u || i, $ = (v) => {
-      !a && c && c(v);
-    };
-    return /* @__PURE__ */ o.createElement(w, {
-      ref: y,
-      "aria-disabled": a,
-      disabled: a,
-      size: m,
-      variant: e,
-      onClick: $,
-      fullWidth: h,
-      ...b
-    }, (r || i) && /* @__PURE__ */ o.createElement(P, {
+`, N = b.forwardRef(({
+  variant: t = T,
+  startIcon: r,
+  endIcon: l,
+  disabled: m = !1,
+  children: p,
+  onClick: d,
+  size: s = W[0],
+  loading: i = !1,
+  fullWidth: h = !1,
+  ...g
+}, u) => {
+  const o = m || i;
+  return y(H, {
+    ref: u,
+    "aria-disabled": o,
+    disabled: o,
+    size: s,
+    variant: t,
+    onClick: ($) => {
+      !o && d && d($);
+    },
+    fullWidth: h,
+    ...g,
+    children: [(r || i) && e(D, {
       "aria-hidden": !0,
-      paddingRight: 2
-    }, i ? /* @__PURE__ */ o.createElement(N, null, /* @__PURE__ */ o.createElement(B, null)) : r), /* @__PURE__ */ o.createElement(p, {
-      variant: m === "S" ? "pi" : void 0,
+      paddingRight: 2,
+      children: i ? e(w, {
+        children: e(x, {})
+      }) : r
+    }), e(c, {
+      variant: s === "S" ? "pi" : void 0,
       fontWeight: "bold",
-      lineHeight: 0
-    }, g), s && /* @__PURE__ */ o.createElement(l, {
+      lineHeight: 0,
+      children: p
+    }), l && e(n, {
       "aria-hidden": !0,
-      paddingLeft: 2
-    }, s));
-  }
-);
-d.displayName = "Button";
-d.defaultProps = {
-  disabled: !1,
-  endIcon: void 0,
-  fullWidth: !1,
-  loading: !1,
-  onClick: void 0,
-  size: "S",
-  startIcon: void 0,
-  variant: "default"
-};
-d.propTypes = {
-  children: t.node.isRequired,
-  disabled: t.bool,
-  endIcon: t.element,
-  fullWidth: t.bool,
-  loading: t.bool,
-  onClick: t.func,
-  size: t.oneOf(k),
-  startIcon: t.element,
-  variant: t.oneOf(R)
-};
+      paddingLeft: 2,
+      children: l
+    })]
+  });
+});
+N.displayName = "Button";
 export {
-  d as Button,
-  w as ButtonWrapper
+  N as Button,
+  H as ButtonWrapper
 };

package/dist/Button/utils.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../Typography/Typography.cjs"),l=require("./constants.cjs"),c=o=>l.LIGHT_VARIANTS.includes(o)?o.substring(0,o.lastIndexOf("-")):o===l.TERTIARY?"neutral":[l.DEFAULT,l.SECONDARY].includes(o)||!l.VARIANTS.includes(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("-"))}600`: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};
-    ${s.Typography} {
+    ${c.Typography} {
       color: ${o.colors.neutral600};
     }
     svg {
@@ -9,7 +9,7 @@
         fill: ${o.colors.neutral600};
       }
     }
-  `,n=({theme:o,variant:r})=>[...l.LIGHT_VARIANTS,l.SECONDARY].includes(r)?`
+  `,$=({theme:o,variant:r})=>[...l.LIGHT_VARIANTS,l.SECONDARY].includes(r)?`
       background-color: ${o.colors.neutral0};
     `:r===l.TERTIARY?`
       background-color: ${o.colors.neutral100};
@@ -19,39 +19,39 @@
       border: 1px solid ${o.colors.buttonPrimary500};
       background: ${o.colors.buttonPrimary500};
     `:`
-    border: 1px solid ${o.colors[`${c(r)}500`]};
-    background: ${o.colors[`${c(r)}500`]};
-  `,$=({theme:o,variant:r})=>[...l.LIGHT_VARIANTS,l.SECONDARY].includes(r)?`
+    border: 1px solid ${o.colors[`${s(r)}500`]};
+    background: ${o.colors[`${s(r)}500`]};
+  `,n=({theme:o,variant:r})=>[...l.LIGHT_VARIANTS,l.SECONDARY].includes(r)?`
       background-color: ${o.colors.neutral0};
-      border: 1px solid ${o.colors[`${c(r)}600`]};
-      ${s.Typography} {
-        color: ${o.colors[`${c(r)}600`]};
+      border: 1px solid ${o.colors[`${s(r)}600`]};
+      ${c.Typography} {
+        color: ${o.colors[`${s(r)}600`]};
       }
       svg {
         > g, path {
-          fill: ${o.colors[`${c(r)}600`]};
+          fill: ${o.colors[`${s(r)}600`]};
         }
       }
     `:r===l.TERTIARY?`
       background-color: ${o.colors.neutral150};
     `:`
-    border: 1px solid ${o.colors[`${c(r)}600`]};
-    background: ${o.colors[`${c(r)}600`]};
+    border: 1px solid ${o.colors[`${s(r)}600`]};
+    background: ${o.colors[`${s(r)}600`]};
   `,e=({theme:o,variant:r})=>{switch(r){case l.DANGER_LIGHT:case l.SUCCESS_LIGHT:case l.SECONDARY:return`
-          border: 1px solid ${o.colors[`${c(r)}200`]};
-          background: ${o.colors[`${c(r)}100`]};
-          ${s.Typography} {
-            color: ${o.colors[`${c(r)}700`]};
+          border: 1px solid ${o.colors[`${s(r)}200`]};
+          background: ${o.colors[`${s(r)}100`]};
+          ${c.Typography} {
+            color: ${o.colors[`${s(r)}700`]};
           }
           svg {
             > g, path {
-              fill: ${o.colors[`${c(r)}700`]};
+              fill: ${o.colors[`${s(r)}700`]};
             }
           }
         `;case l.TERTIARY:return`
           border: 1px solid ${o.colors.neutral200};
           background: ${o.colors.neutral0};
-          ${s.Typography} {
+          ${c.Typography} {
             color: ${o.colors.neutral800};
           }
           svg {
@@ -63,7 +63,7 @@
         border: 1px solid transparent;
         background: transparent;
 
-        ${s.Typography} {
+        ${c.Typography} {
           color: ${o.colors.neutral800};
         }
 
@@ -73,9 +73,9 @@
           }
         }
       `;case l.SUCCESS:case l.DANGER:return`
-          border: 1px solid ${o.colors[`${c(r)}600`]};
-          background: ${o.colors[`${c(r)}600`]};
-          ${s.Typography} {
+          border: 1px solid ${o.colors[`${s(r)}600`]};
+          background: ${o.colors[`${s(r)}600`]};
+          ${c.Typography} {
             color: ${o.colors.neutral0};
           }
         `;default:return`
@@ -84,4 +84,4 @@
               fill: ${o.colors.buttonNeutral0};
             }
           }
-        `}};exports.getActiveStyle=$;exports.getDisabledStyle=u;exports.getHoverStyle=n;exports.getVariantColorName=c;exports.getVariantStyle=e;
+        `}};exports.getActiveStyle=n;exports.getDisabledStyle=u;exports.getHoverStyle=$;exports.getVariantColorName=s;exports.getVariantStyle=e;

package/dist/Button/utils.js

@@ -1,6 +1,6 @@
 import { Typography as c } from "../Typography/Typography.js";
-import { LIGHT_VARIANTS as $, TERTIARY as s, DEFAULT as n, SECONDARY as u, VARIANTS as g, GHOST as d, DANGER as b, SUCCESS as t, SUCCESS_LIGHT as p, DANGER_LIGHT as e } from "./constants.js";
-const l = (o) => $.includes(o) ? o.substring(0, o.lastIndexOf("-")) : o === s ? "neutral" : [n, u].includes(o) || !g.includes(o) ? "primary" : o, a = ({ theme: o }) => `
+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 }) => `
     border: 1px solid ${o.colors.neutral200};
     background: ${o.colors.neutral150};
     ${c} {
@@ -11,19 +11,19 @@ const l = (o) => $.includes(o) ? o.substring(0, o.lastIndexOf("-")) : o === s ?
         fill: ${o.colors.neutral600};
       }
     }
-  `, S = ({ theme: o, variant: r }) => [...$, u].includes(r) ? `
+  `, i = ({ theme: o, variant: r }) => [...g, u].includes(r) ? `
       background-color: ${o.colors.neutral0};
     ` : r === s ? `
       background-color: ${o.colors.neutral100};
-    ` : r === d ? `
+    ` : r === b ? `
       background-color: ${o.colors.neutral100};
-    ` : r === n ? `
+    ` : r === d ? `
       border: 1px solid ${o.colors.buttonPrimary500};
       background: ${o.colors.buttonPrimary500};
     ` : `
     border: 1px solid ${o.colors[`${l(r)}500`]};
     background: ${o.colors[`${l(r)}500`]};
-  `, k = ({ theme: o, variant: r }) => [...$, u].includes(r) ? `
+  `, x = ({ theme: o, variant: r }) => [...g, u].includes(r) ? `
       background-color: ${o.colors.neutral0};
       border: 1px solid ${o.colors[`${l(r)}600`]};
       ${c} {
@@ -39,10 +39,10 @@ const l = (o) => $.includes(o) ? o.substring(0, o.lastIndexOf("-")) : o === s ?
     ` : `
     border: 1px solid ${o.colors[`${l(r)}600`]};
     background: ${o.colors[`${l(r)}600`]};
-  `, x = ({ theme: o, variant: r }) => {
+  `, a = ({ theme: o, variant: r }) => {
   switch (r) {
-    case e:
-    case p:
+    case n:
+    case $:
     case u:
       return `
           border: 1px solid ${o.colors[`${l(r)}200`]};
@@ -69,7 +69,7 @@ const l = (o) => $.includes(o) ? o.substring(0, o.lastIndexOf("-")) : o === s ?
             }
           }
         `;
-    case d:
+    case b:
       return `
         border: 1px solid transparent;
         background: transparent;
@@ -84,8 +84,8 @@ const l = (o) => $.includes(o) ? o.substring(0, o.lastIndexOf("-")) : o === s ?
           }
         }
       `;
+    case e:
     case t:
-    case b:
       return `
           border: 1px solid ${o.colors[`${l(r)}600`]};
           background: ${o.colors[`${l(r)}600`]};
@@ -104,9 +104,9 @@ const l = (o) => $.includes(o) ? o.substring(0, o.lastIndexOf("-")) : o === s ?
   }
 };
 export {
-  k as getActiveStyle,
-  a as getDisabledStyle,
-  S as getHoverStyle,
+  x as getActiveStyle,
+  k as getDisabledStyle,
+  i as getHoverStyle,
   l as getVariantColorName,
-  x as getVariantStyle
+  a as getVariantStyle
 };

package/dist/Card/Card.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),u=require("prop-types"),l=require("../Box/Box.cjs"),n=require("./CardContext.cjs"),c=require("../helpers/useId.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=a(s),i=a(u),t=({id:e,...d})=>{const r=c.useId("card",e);return o.default.createElement(n.CardContext.Provider,{value:{id:r}},o.default.createElement(l.Box,{id:e,tabIndex:0,hasRadius:!0,background:"neutral0",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",shadow:"tableShadow",as:"article","aria-labelledby":`${r}-title`,...d}))};t.defaultProps={id:void 0};t.propTypes={id:i.default.string};exports.Card=t;
+"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;

package/dist/Card/Card.js

@@ -1,32 +1,31 @@
-import t from "react";
-import d from "prop-types";
-import { Box as i } from "../Box/Box.js";
-import { CardContext as l } from "./CardContext.js";
-import { useId as p } from "../helpers/useId.js";
-const o = ({ id: r, ...a }) => {
-  const e = p("card", r);
-  return /* @__PURE__ */ t.createElement(l.Provider, {
-    value: { id: e }
-  }, /* @__PURE__ */ t.createElement(i, {
-    id: r,
-    tabIndex: 0,
-    hasRadius: !0,
-    background: "neutral0",
-    borderStyle: "solid",
-    borderWidth: "1px",
-    borderColor: "neutral150",
-    shadow: "tableShadow",
-    as: "article",
-    "aria-labelledby": `${e}-title`,
-    ...a
-  }));
-};
-o.defaultProps = {
-  id: void 0
-};
-o.propTypes = {
-  id: d.string
+import { jsx as o } from "react/jsx-runtime";
+import { Box as d } from "../Box/Box.js";
+import { useId as a } from "../helpers/useId.js";
+import { CardContext as i } from "./CardContext.js";
+const m = ({
+  id: r,
+  ...t
+}) => {
+  const e = a("card", r);
+  return o(i.Provider, {
+    value: {
+      id: e
+    },
+    children: o(d, {
+      id: r,
+      tabIndex: 0,
+      hasRadius: !0,
+      background: "neutral0",
+      borderStyle: "solid",
+      borderWidth: "1px",
+      borderColor: "neutral150",
+      shadow: "tableShadow",
+      as: "article",
+      "aria-labelledby": `${e}-title`,
+      ...t
+    })
+  });
 };
 export {
-  o as Card
+  m as Card
 };

package/dist/Card/CardAction.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("styled-components"),s=require("../Stack/Stack.cjs"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},c=a(o),i=c.default(s.Stack).attrs({horizontal:!0,spacing:2})`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),r=require("../Stack/Stack.cjs"),s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},a=s(n),o=a.default(r.Stack).attrs({horizontal:!0,spacing:2})`
   position: absolute;
   top: ${({theme:t})=>t.spaces[3]};
-  right: ${({position:t,theme:e})=>t==="end"?e.spaces[3]:void 0};
-  left: ${({position:t,theme:e})=>t==="start"?e.spaces[3]:void 0};
-`;exports.CardAction=i;
+  right: ${({position:t,theme:e})=>{if(t==="end")return e.spaces[3]}};
+  left: ${({position:t,theme:e})=>{if(t==="start")return e.spaces[3]}};
+`;exports.CardAction=o;