@strapi/design-system 0.0.0-jsoninput.0

package/dist/Box/BoxProps.js

@@ -0,0 +1,60 @@
+var p = Object.defineProperty;
+var d = Object.getOwnPropertySymbols;
+var t = Object.prototype.hasOwnProperty, g = Object.prototype.propertyIsEnumerable;
+var i = (n, r, e) => r in n ? p(n, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[r] = e, a = (n, r) => {
+  for (var e in r || (r = {}))
+    t.call(r, e) && i(n, e, r[e]);
+  if (d)
+    for (var e of d(r))
+      g.call(r, e) && i(n, e, r[e]);
+  return n;
+};
+import f from "react";
+import o from "prop-types";
+const s = (n) => /* @__PURE__ */ f.createElement("div", a({}, n)), b = {
+  background: void 0,
+  borderColor: void 0,
+  color: void 0,
+  hiddenS: !1,
+  hiddenXS: !1,
+  padding: void 0,
+  paddingTop: void 0,
+  paddingRight: void 0,
+  paddingBottom: void 0,
+  paddingLeft: void 0,
+  hasRadius: !1,
+  shadow: void 0,
+  children: null,
+  shrink: void 0,
+  grow: void 0,
+  basis: void 0,
+  flex: void 0,
+  _hover: () => {
+  }
+}, l = {
+  _hover: o.func,
+  background: o.string,
+  basis: o.oneOfType([o.string, o.string]),
+  borderColor: o.string,
+  children: o.oneOfType([o.node, o.string]),
+  color: o.string,
+  flex: o.oneOfType([o.string, o.string]),
+  grow: o.oneOfType([o.string, o.string]),
+  hasRadius: o.bool,
+  hiddenS: o.bool,
+  hiddenXS: o.bool,
+  padding: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  paddingBottom: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  paddingLeft: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  paddingRight: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  paddingTop: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  shadow: o.string,
+  shrink: o.oneOfType([o.string, o.string])
+};
+s.defaultProps = b;
+s.propTypes = l;
+export {
+  s as BoxProps,
+  b as boxDefaultProps,
+  l as boxPropTypes
+};

package/dist/Box/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Box.cjs");exports.Box=e.Box;

package/dist/Box/index.js

@@ -0,0 +1,4 @@
+import { Box as x } from "./Box.js";
+export {
+  x as Box
+};

package/dist/Breadcrumbs/Breadcrumbs.cjs

@@ -0,0 +1,16 @@
+"use strict";var q=Object.defineProperty;var n=Object.getOwnPropertySymbols;var p=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var c=(e,r,t)=>r in e?q(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))p.call(r,t)&&c(e,t,r[t]);if(n)for(var t of n(r))y.call(r,t)&&c(e,t,r[t]);return e};var h=(e,r)=>{var t={};for(var l in e)p.call(e,l)&&r.indexOf(l)<0&&(t[l]=e[l]);if(e!=null&&n)for(var l of n(e))r.indexOf(l)<0&&y.call(e,l)&&(t[l]=e[l]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react"),_=require("prop-types"),R=require("styled-components"),B=require("@strapi/icons/ChevronRight"),g=require("../Typography/Typography.cjs"),b=require("../Box/Box.cjs"),T=require("../Flex/Flex.cjs"),C=require("../VisuallyHidden/VisuallyHidden.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=u(x),o=u(_),v=u(R),E=u(B),$=v.default(T.Flex)`
+  svg {
+    height: ${10/16}rem;
+    width: ${10/16}rem;
+    path {
+      fill: ${({theme:e})=>e.colors.neutral500};
+    }
+  }
+  :last-of-type ${b.Box} {
+    display: none;
+  }
+  :last-of-type ${g.Typography} {
+    color: ${({theme:e})=>e.colors.neutral800};
+    font-weight: ${({theme:e})=>e.fontWeights.bold};
+  }
+`,s=({children:e})=>a.default.createElement($,{inline:!0,as:"li"},a.default.createElement(g.Typography,{variant:"pi",textColor:"neutral600"},e),a.default.createElement(b.Box,{"aria-hidden":!0,paddingLeft:3,paddingRight:3},a.default.createElement(E.default,null)));s.displayName="Crumb";s.propTypes={children:o.default.node.isRequired};const m=o.default.shape({type:o.default.oneOf([s])}),d=l=>{var i=l,{children:e,label:r}=i,t=h(i,["children","label"]);return a.default.createElement(T.Flex,f({},t),a.default.createElement(C.VisuallyHidden,null,r),a.default.createElement("ol",{"aria-hidden":!0},e))};d.displayName="Breadcrumbs";d.propTypes={children:o.default.oneOfType([o.default.arrayOf(m),m]).isRequired,label:o.default.string.isRequired};exports.Breadcrumbs=d;exports.Crumb=s;

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,73 @@
+var E = Object.defineProperty;
+var l = Object.getOwnPropertySymbols;
+var s = Object.prototype.hasOwnProperty, d = Object.prototype.propertyIsEnumerable;
+var m = (e, t, r) => t in e ? E(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, c = (e, t) => {
+  for (var r in t || (t = {}))
+    s.call(t, r) && m(e, r, t[r]);
+  if (l)
+    for (var r of l(t))
+      d.call(t, r) && m(e, r, t[r]);
+  return e;
+};
+var u = (e, t) => {
+  var r = {};
+  for (var o in e)
+    s.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
+  if (e != null && l)
+    for (var o of l(e))
+      t.indexOf(o) < 0 && d.call(e, o) && (r[o] = e[o]);
+  return r;
+};
+import i from "react";
+import a from "prop-types";
+import $ from "styled-components";
+import R from "@strapi/icons/ChevronRight";
+import { Typography as y } from "../Typography/Typography.js";
+import { Box as h } from "../Box/Box.js";
+import { Flex as g } from "../Flex/Flex.js";
+import { VisuallyHidden as T } from "../VisuallyHidden/VisuallyHidden.js";
+const C = $(g)`
+  svg {
+    height: ${10 / 16}rem;
+    width: ${10 / 16}rem;
+    path {
+      fill: ${({ theme: e }) => e.colors.neutral500};
+    }
+  }
+  :last-of-type ${h} {
+    display: none;
+  }
+  :last-of-type ${y} {
+    color: ${({ theme: e }) => e.colors.neutral800};
+    font-weight: ${({ theme: e }) => e.fontWeights.bold};
+  }
+`, n = ({ children: e }) => /* @__PURE__ */ i.createElement(C, {
+  inline: !0,
+  as: "li"
+}, /* @__PURE__ */ i.createElement(y, {
+  variant: "pi",
+  textColor: "neutral600"
+}, e), /* @__PURE__ */ i.createElement(h, {
+  "aria-hidden": !0,
+  paddingLeft: 3,
+  paddingRight: 3
+}, /* @__PURE__ */ i.createElement(R, null)));
+n.displayName = "Crumb";
+n.propTypes = {
+  children: a.node.isRequired
+};
+const f = a.shape({ type: a.oneOf([n]) }), b = (o) => {
+  var p = o, { children: e, label: t } = p, r = u(p, ["children", "label"]);
+  return /* @__PURE__ */ i.createElement(g, c({}, r), /* @__PURE__ */ i.createElement(T, null, t), /* @__PURE__ */ i.createElement("ol", {
+    "aria-hidden": !0
+  }, e));
+};
+b.displayName = "Breadcrumbs";
+b.propTypes = {
+  children: a.oneOfType([a.arrayOf(f), f]).isRequired,
+  label: a.string.isRequired
+};
+export {
+  b as Breadcrumbs,
+  n as Crumb
+};

package/dist/Breadcrumbs/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Breadcrumbs.cjs");exports.Breadcrumbs=e.Breadcrumbs;exports.Crumb=e.Crumb;

package/dist/Breadcrumbs/index.js

@@ -0,0 +1,5 @@
+import { Breadcrumbs as b, Crumb as e } from "./Breadcrumbs.js";
+export {
+  b as Breadcrumbs,
+  e as Crumb
+};

package/dist/Button/Button.cjs

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

package/dist/Button/Button.js

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

package/dist/Button/constants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S="success-light",t="danger-light",s="default",T="tertiary",e="secondary",c="danger",o="success",A="ghost",n=[S,t],E=[s,T,e,c,o,A,...n],I=["S","M","L"];exports.BUTTON_SIZES=I;exports.DANGER=c;exports.DANGER_LIGHT=t;exports.DEFAULT=s;exports.GHOST=A;exports.LIGHT_VARIANTS=n;exports.SECONDARY=e;exports.SUCCESS=o;exports.SUCCESS_LIGHT=S;exports.TERTIARY=T;exports.VARIANTS=E;

package/dist/Button/constants.js

@@ -0,0 +1,14 @@
+const s = "success-light", t = "danger-light", c = "default", n = "tertiary", o = "secondary", S = "danger", T = "success", A = "ghost", e = [s, t], E = [c, n, o, S, T, A, ...e], I = ["S", "M", "L"];
+export {
+  I as BUTTON_SIZES,
+  S as DANGER,
+  t as DANGER_LIGHT,
+  c as DEFAULT,
+  A as GHOST,
+  e as LIGHT_VARIANTS,
+  o as SECONDARY,
+  T as SUCCESS,
+  s as SUCCESS_LIGHT,
+  n as TERTIARY,
+  E as VARIANTS
+};

package/dist/Button/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./Button.cjs");exports.Button=t.Button;exports.ButtonWrapper=t.ButtonWrapper;

package/dist/Button/index.js

@@ -0,0 +1,5 @@
+import { Button as r, ButtonWrapper as p } from "./Button.js";
+export {
+  r as Button,
+  p as ButtonWrapper
+};

package/dist/Button/utils.cjs

@@ -0,0 +1,87 @@
+"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})=>`
+    border: 1px solid ${o.colors.neutral200};
+    background: ${o.colors.neutral150};
+    ${s.Typography} {
+      color: ${o.colors.neutral600};
+    }
+    svg {
+      > g, path {
+        fill: ${o.colors.neutral600};
+      }
+    }
+  `,n=({theme:o,variant:r})=>[...l.LIGHT_VARIANTS,l.SECONDARY].includes(r)?`
+      background-color: ${o.colors.neutral0};
+    `:r===l.TERTIARY?`
+      background-color: ${o.colors.neutral100};
+    `:r===l.GHOST?`
+      background-color: ${o.colors.neutral100};
+    `:r===l.DEFAULT?`
+      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)?`
+      background-color: ${o.colors.neutral0};
+      border: 1px solid ${o.colors[`${c(r)}600`]};
+      ${s.Typography} {
+        color: ${o.colors[`${c(r)}600`]};
+      }
+      svg {
+        > g, path {
+          fill: ${o.colors[`${c(r)}600`]};
+        }
+      }
+    `:r===l.TERTIARY?`
+      background-color: ${o.colors.neutral150};
+    `:`
+    border: 1px solid ${o.colors[`${c(r)}600`]};
+    background: ${o.colors[`${c(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`]};
+          }
+          svg {
+            > g, path {
+              fill: ${o.colors[`${c(r)}700`]};
+            }
+          }
+        `;case l.TERTIARY:return`
+          border: 1px solid ${o.colors.neutral200};
+          background: ${o.colors.neutral0};
+          ${s.Typography} {
+            color: ${o.colors.neutral800};
+          }
+          svg {
+            > g, path {
+              fill: ${o.colors.neutral800};
+            }
+          }
+        `;case l.GHOST:return`
+        border: 1px solid transparent;
+        background: transparent;
+
+        ${s.Typography} {
+          color: ${o.colors.neutral800};
+        }
+
+        svg {
+          > g, path {
+            fill: ${o.colors.neutral500};
+          }
+        }
+      `;case l.SUCCESS:case l.DANGER:return`
+          border: 1px solid ${o.colors[`${c(r)}600`]};
+          background: ${o.colors[`${c(r)}600`]};
+          ${s.Typography} {
+            color: ${o.colors.neutral0};
+          }
+        `;default:return`
+          svg {
+            > g, path {
+              fill: ${o.colors.buttonNeutral0};
+            }
+          }
+        `}};exports.getActiveStyle=$;exports.getDisabledStyle=u;exports.getHoverStyle=n;exports.getVariantColorName=c;exports.getVariantStyle=e;

package/dist/Button/utils.js

@@ -0,0 +1,112 @@
+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 }) => `
+    border: 1px solid ${o.colors.neutral200};
+    background: ${o.colors.neutral150};
+    ${c} {
+      color: ${o.colors.neutral600};
+    }
+    svg {
+      > g, path {
+        fill: ${o.colors.neutral600};
+      }
+    }
+  `, S = ({ theme: o, variant: r }) => [...$, u].includes(r) ? `
+      background-color: ${o.colors.neutral0};
+    ` : r === s ? `
+      background-color: ${o.colors.neutral100};
+    ` : r === d ? `
+      background-color: ${o.colors.neutral100};
+    ` : r === n ? `
+      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) ? `
+      background-color: ${o.colors.neutral0};
+      border: 1px solid ${o.colors[`${l(r)}600`]};
+      ${c} {
+        color: ${o.colors[`${l(r)}600`]};
+      }
+      svg {
+        > g, path {
+          fill: ${o.colors[`${l(r)}600`]};
+        }
+      }
+    ` : r === s ? `
+      background-color: ${o.colors.neutral150};
+    ` : `
+    border: 1px solid ${o.colors[`${l(r)}600`]};
+    background: ${o.colors[`${l(r)}600`]};
+  `, x = ({ theme: o, variant: r }) => {
+  switch (r) {
+    case e:
+    case p:
+    case u:
+      return `
+          border: 1px solid ${o.colors[`${l(r)}200`]};
+          background: ${o.colors[`${l(r)}100`]};
+          ${c} {
+            color: ${o.colors[`${l(r)}700`]};
+          }
+          svg {
+            > g, path {
+              fill: ${o.colors[`${l(r)}700`]};
+            }
+          }
+        `;
+    case s:
+      return `
+          border: 1px solid ${o.colors.neutral200};
+          background: ${o.colors.neutral0};
+          ${c} {
+            color: ${o.colors.neutral800};
+          }
+          svg {
+            > g, path {
+              fill: ${o.colors.neutral800};
+            }
+          }
+        `;
+    case d:
+      return `
+        border: 1px solid transparent;
+        background: transparent;
+
+        ${c} {
+          color: ${o.colors.neutral800};
+        }
+
+        svg {
+          > g, path {
+            fill: ${o.colors.neutral500};
+          }
+        }
+      `;
+    case t:
+    case b:
+      return `
+          border: 1px solid ${o.colors[`${l(r)}600`]};
+          background: ${o.colors[`${l(r)}600`]};
+          ${c} {
+            color: ${o.colors.neutral0};
+          }
+        `;
+    default:
+      return `
+          svg {
+            > g, path {
+              fill: ${o.colors.buttonNeutral0};
+            }
+          }
+        `;
+  }
+};
+export {
+  k as getActiveStyle,
+  a as getDisabledStyle,
+  S as getHoverStyle,
+  l as getVariantColorName,
+  x as getVariantStyle
+};

package/dist/Card/Card.cjs

@@ -0,0 +1 @@
+"use strict";var f=Object.defineProperty;var a=Object.getOwnPropertySymbols;var l=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable;var u=(e,t,r)=>t in e?f(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,c=(e,t)=>{for(var r in t||(t={}))l.call(t,r)&&u(e,r,t[r]);if(a)for(var r of a(t))n.call(t,r)&&u(e,r,t[r]);return e};var i=(e,t)=>{var r={};for(var o in e)l.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&a)for(var o of a(e))t.indexOf(o)<0&&n.call(e,o)&&(r[o]=e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react"),y=require("prop-types"),C=require("../Box/Box.cjs"),_=require("./CardContext.cjs"),g=require("../helpers/useId.cjs"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=b(x),h=b(y),d=r=>{var o=r,{id:e}=o,t=i(o,["id"]);const s=g.useId("card",e);return p.default.createElement(_.CardContext.Provider,{value:{id:s}},p.default.createElement(C.Box,c({id:e,tabIndex:0,hasRadius:!0,background:"neutral0",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",shadow:"tableShadow",as:"article","aria-labelledby":`${s}-title`},t)))};d.defaultProps={id:void 0};d.propTypes={id:h.default.string};exports.Card=d;

package/dist/Card/Card.js

@@ -0,0 +1,52 @@
+var b = Object.defineProperty;
+var a = Object.getOwnPropertySymbols;
+var l = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var i = (r, e, t) => e in r ? b(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, m = (r, e) => {
+  for (var t in e || (e = {}))
+    l.call(e, t) && i(r, t, e[t]);
+  if (a)
+    for (var t of a(e))
+      p.call(e, t) && i(r, t, e[t]);
+  return r;
+};
+var n = (r, e) => {
+  var t = {};
+  for (var o in r)
+    l.call(r, o) && e.indexOf(o) < 0 && (t[o] = r[o]);
+  if (r != null && a)
+    for (var o of a(r))
+      e.indexOf(o) < 0 && p.call(r, o) && (t[o] = r[o]);
+  return t;
+};
+import s from "react";
+import c from "prop-types";
+import { Box as f } from "../Box/Box.js";
+import { CardContext as x } from "./CardContext.js";
+import { useId as h } from "../helpers/useId.js";
+const u = (t) => {
+  var o = t, { id: r } = o, e = n(o, ["id"]);
+  const d = h("card", r);
+  return /* @__PURE__ */ s.createElement(x.Provider, {
+    value: { id: d }
+  }, /* @__PURE__ */ s.createElement(f, m({
+    id: r,
+    tabIndex: 0,
+    hasRadius: !0,
+    background: "neutral0",
+    borderStyle: "solid",
+    borderWidth: "1px",
+    borderColor: "neutral150",
+    shadow: "tableShadow",
+    as: "article",
+    "aria-labelledby": `${d}-title`
+  }, e)));
+};
+u.defaultProps = {
+  id: void 0
+};
+u.propTypes = {
+  id: c.string
+};
+export {
+  u as Card
+};

package/dist/Card/CardAction.cjs

@@ -0,0 +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})`
+  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;

package/dist/Card/CardAction.js

@@ -0,0 +1,14 @@
+import s from "styled-components";
+import { Stack as r } from "../Stack/Stack.js";
+const e = s(r).attrs({
+  horizontal: !0,
+  spacing: 2
+})`
+  position: absolute;
+  top: ${({ theme: t }) => t.spaces[3]};
+  right: ${({ position: t, theme: o }) => t === "end" ? o.spaces[3] : void 0};
+  left: ${({ position: t, theme: o }) => t === "start" ? o.spaces[3] : void 0};
+`;
+export {
+  e as CardAction
+};