@strapi/design-system 1.2.6 → 1.3.0-beta.0

package/dist/Button/Button.js

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

package/dist/Card/Card.js

@@ -0,0 +1,32 @@
+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
+};
+export {
+  o 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
+};

package/dist/Card/CardAsset.cjs

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),l=require("styled-components"),c=require("prop-types"),u=require("../Flex/Flex.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(n),i=a(l),o=a(c),p=i.default.img`
+  // inline flows is based on typography and displays an extra white space below the image
+  // switch to block is required in order to make the img stick the bottom of the container
+  // addition infos: https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image
+  margin: 0;
+  padding: 0;
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+`,f={S:88,M:164},h=i.default.div`
+  display: flex;
+  justify-content: center;
+  height: ${({size:e})=>f[e]/16}rem;
+  width: 100%;
+  background: repeating-conic-gradient(${({theme:e})=>e.colors.neutral100} 0% 25%, transparent 0% 50%) 50% / 20px
+    20px;
+  border-top-left-radius: ${({theme:e})=>e.borderRadius};
+  border-top-right-radius: ${({theme:e})=>e.borderRadius};
+`,r=({size:e,children:s,...d})=>t.default.createElement(h,{size:e},s?t.default.createElement(u.Flex,null,s):t.default.createElement(p,{...d,"aria-hidden":!0}));r.defaultProps={children:void 0,size:"M"};r.propTypes={children:o.default.node,size:o.default.oneOf(["S","M"])};exports.CardAsset=r;

package/dist/Card/CardAsset.js

@@ -0,0 +1,42 @@
+import t from "react";
+import o from "styled-components";
+import i from "prop-types";
+import { Flex as n } from "../Flex/Flex.js";
+const d = o.img`
+  // inline flows is based on typography and displays an extra white space below the image
+  // switch to block is required in order to make the img stick the bottom of the container
+  // addition infos: https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image
+  margin: 0;
+  padding: 0;
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+`, p = {
+  S: 88,
+  M: 164
+}, c = o.div`
+  display: flex;
+  justify-content: center;
+  height: ${({ size: e }) => p[e] / 16}rem;
+  width: 100%;
+  background: repeating-conic-gradient(${({ theme: e }) => e.colors.neutral100} 0% 25%, transparent 0% 50%) 50% / 20px
+    20px;
+  border-top-left-radius: ${({ theme: e }) => e.borderRadius};
+  border-top-right-radius: ${({ theme: e }) => e.borderRadius};
+`, a = ({ size: e, children: r, ...s }) => /* @__PURE__ */ t.createElement(c, {
+  size: e
+}, r ? /* @__PURE__ */ t.createElement(n, null, r) : /* @__PURE__ */ t.createElement(d, {
+  ...s,
+  "aria-hidden": !0
+}));
+a.defaultProps = {
+  children: void 0,
+  size: "M"
+};
+a.propTypes = {
+  children: i.node,
+  size: i.oneOf(["S", "M"])
+};
+export {
+  a as CardAsset
+};

package/dist/Card/CardBadge.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),r=require("styled-components"),n=require("../Badge/Badge.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(l),d=a(r),o=d.default.div`
+  margin-left: auto;
+  flex-shrink: 0;
+`,s=d.default(n.Badge)`
+  margin-left: ${({theme:e})=>e.spaces[1]};
+`,c=e=>t.default.createElement(o,null,t.default.createElement(s,{...e}));exports.CardBadge=c;

package/dist/Card/CardBadge.js

@@ -0,0 +1,14 @@
+import t from "react";
+import r from "styled-components";
+import { Badge as a } from "../Badge/Badge.js";
+const o = r.div`
+  margin-left: auto;
+  flex-shrink: 0;
+`, m = r(a)`
+  margin-left: ${({ theme: e }) => e.spaces[1]};
+`, l = (e) => /* @__PURE__ */ t.createElement(o, null, /* @__PURE__ */ t.createElement(m, {
+  ...e
+}));
+export {
+  l as CardBadge
+};

package/dist/Card/CardBody.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),o=require("../Flex/Flex.cjs"),d=require("../Box/Box.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(a),l=e=>t.default.createElement(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:2,paddingBottom:2},t.default.createElement(o.Flex,{...e,alignItems:"flex-start"}));exports.CardBody=l;

package/dist/Card/CardBody.js

@@ -0,0 +1,15 @@
+import t from "react";
+import { Flex as o } from "../Flex/Flex.js";
+import { Box as r } from "../Box/Box.js";
+const i = (e) => /* @__PURE__ */ t.createElement(r, {
+  paddingLeft: 3,
+  paddingRight: 3,
+  paddingTop: 2,
+  paddingBottom: 2
+}, /* @__PURE__ */ t.createElement(o, {
+  ...e,
+  alignItems: "flex-start"
+}));
+export {
+  i as CardBody
+};

package/dist/Card/CardCheckbox.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),o=require("./CardAction.cjs"),r=require("../BaseCheckbox/BaseCheckbox.cjs"),s=require("./CardContext.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(c),d=e=>{const{id:a}=s.useCard();return t.default.createElement(o.CardAction,{position:"start"},t.default.createElement(r.BaseCheckbox,{"aria-labelledby":`${a}-title`,...e}))};exports.CardCheckbox=d;

package/dist/Card/CardCheckbox.js

@@ -0,0 +1,16 @@
+import t from "react";
+import { CardAction as o } from "./CardAction.js";
+import { BaseCheckbox as a } from "../BaseCheckbox/BaseCheckbox.js";
+import { useCard as i } from "./CardContext.js";
+const d = (e) => {
+  const { id: r } = i();
+  return /* @__PURE__ */ t.createElement(o, {
+    position: "start"
+  }, /* @__PURE__ */ t.createElement(a, {
+    "aria-labelledby": `${r}-title`,
+    ...e
+  }));
+};
+export {
+  d as CardCheckbox
+};

package/dist/Card/CardContent.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),s=require("prop-types"),a=require("../Box/Box.cjs"),c=require("styled-components"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=t(n),u=t(s),d=t(c),p=d.default(a.Box)`
+  word-break: break-all;
+`,o=({children:e,...r})=>l.default.createElement(p,{...r},e);o.propTypes={children:u.default.node.isRequired};exports.CardContent=o;

package/dist/Card/CardContent.js

@@ -0,0 +1,15 @@
+import o from "react";
+import t from "prop-types";
+import { Box as p } from "../Box/Box.js";
+import m from "styled-components";
+const a = m(p)`
+  word-break: break-all;
+`, n = ({ children: r, ...e }) => /* @__PURE__ */ o.createElement(a, {
+  ...e
+}, r);
+n.propTypes = {
+  children: t.node.isRequired
+};
+export {
+  n as CardContent
+};

package/dist/Card/CardContext.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext(),r=()=>e.useContext(t);exports.CardContext=t;exports.useCard=r;

package/dist/Card/CardContext.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as e } from "react";
+const o = t(), n = () => e(o);
+export {
+  o as CardContext,
+  n as useCard
+};

package/dist/Card/CardHeader.cjs

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

package/dist/Card/CardHeader.js

@@ -0,0 +1,13 @@
+import r from "react";
+import t from "styled-components";
+import { Flex as o } from "../Flex/Flex.js";
+const a = t(o)`
+  position: relative;
+  border-bottom: 1px solid ${({ theme: e }) => e.colors.neutral150};
+`, l = (e) => /* @__PURE__ */ r.createElement(a, {
+  justifyContent: "center",
+  ...e
+});
+export {
+  l as CardHeader
+};

package/dist/Card/CardTimer.cjs

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

package/dist/Card/CardTimer.js

@@ -0,0 +1,26 @@
+import e from "react";
+import t from "prop-types";
+import a from "styled-components";
+import { Box as p } from "../Box/Box.js";
+import { Typography as i } from "../Typography/Typography.js";
+const m = a(p)`
+  position: absolute;
+  bottom: ${({ theme: r }) => r.spaces[1]};
+  right: ${({ theme: r }) => r.spaces[1]};
+`, s = ({ children: r, ...o }) => /* @__PURE__ */ e.createElement(m, {
+  padding: 1,
+  background: "neutral800",
+  color: "neutral0",
+  as: "time",
+  hasRadius: !0,
+  ...o
+}, /* @__PURE__ */ e.createElement(i, {
+  variant: "pi",
+  textColor: "neutral0"
+}, r));
+s.propTypes = {
+  children: t.node.isRequired
+};
+export {
+  s as CardTimer
+};

package/dist/Card/CardTitle.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),e=require("../Typography/Typography.cjs"),i=require("./CardContext.cjs"),l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=l(o),n=t=>{const{id:a}=i.useCard();return r.default.createElement(e.Typography,{variant:"pi",id:`${a}-title`,textColor:"neutral800",fontWeight:"bold",as:"div",...t})},u=t=>r.default.createElement(e.Typography,{variant:"pi",...t,textColor:"neutral600",as:"div"});exports.CardSubtitle=u;exports.CardTitle=n;

package/dist/Card/CardTitle.js

@@ -0,0 +1,23 @@
+import r from "react";
+import { Typography as e } from "../Typography/Typography.js";
+import { useCard as a } from "./CardContext.js";
+const d = (t) => {
+  const { id: o } = a();
+  return /* @__PURE__ */ r.createElement(e, {
+    variant: "pi",
+    id: `${o}-title`,
+    textColor: "neutral800",
+    fontWeight: "bold",
+    as: "div",
+    ...t
+  });
+}, m = (t) => /* @__PURE__ */ r.createElement(e, {
+  variant: "pi",
+  ...t,
+  textColor: "neutral600",
+  as: "div"
+});
+export {
+  m as CardSubtitle,
+  d as CardTitle
+};

package/dist/Card/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Card.cjs"),d=require("./CardAction.cjs"),a=require("./CardAsset.cjs"),C=require("./CardBadge.cjs"),t=require("./CardBody.cjs"),s=require("./CardCheckbox.cjs"),o=require("./CardContent.cjs"),c=require("./CardHeader.cjs"),i=require("./CardTimer.cjs"),r=require("./CardTitle.cjs");exports.Card=e.Card;exports.CardAction=d.CardAction;exports.CardAsset=a.CardAsset;exports.CardBadge=C.CardBadge;exports.CardBody=t.CardBody;exports.CardCheckbox=s.CardCheckbox;exports.CardContent=o.CardContent;exports.CardHeader=c.CardHeader;exports.CardTimer=i.CardTimer;exports.CardSubtitle=r.CardSubtitle;exports.CardTitle=r.CardTitle;