@strapi/design-system 0.0.0-3cf3ff39

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,31 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),S=require("react"),j=require("@strapi/icons"),c=require("styled-components"),u=require("./constants.cjs"),r=require("./utils.cjs"),v=require("../BaseButton/BaseButton.cjs"),_=require("../Box/Box.cjs"),$=require("../Typography/Typography.cjs"),T=require("../Flex/Flex.cjs"),f=e=>e&&e.__esModule?e:{default:e},D=f(S),g=f(c),R=c.keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`,C=g.default.div`
+  animation: ${R} 2s infinite linear;
+  will-change: transform;
+`,y=g.default(v.BaseButton)`
+  height: ${({theme:e,size:n})=>e.sizes.button[n]};
+
+  &[aria-disabled='true'] {
+    ${r.getDisabledStyle}
+
+    &:active {
+      ${r.getDisabledStyle}
+    }
+  }
+
+  &:hover {
+    ${r.getHoverStyle}
+  }
+
+  &:active {
+    ${r.getActiveStyle}
+  }
+
+  ${r.getVariantStyle}
+`,p=D.default.forwardRef(({variant:e=u.DEFAULT,startIcon:n,endIcon:s,disabled:h=!1,children:b,onClick:d,size:l=u.BUTTON_SIZES[0],loading:a=!1,fullWidth:i=!1,...m},x)=>{const o=h||a,B=q=>{!o&&d&&d(q)};return t.jsxs(y,{ref:x,"aria-disabled":o,disabled:o,size:l,variant:e,onClick:B,fullWidth:i,alignItems:"center",background:"buttonPrimary600",borderColor:"buttonPrimary600",gap:2,inline:i,justifyContent:i?"center":void 0,paddingLeft:4,paddingRight:4,width:i?"100%":void 0,...m,children:[(n||a)&&t.jsx(_.Box,{"aria-hidden":!0,children:a?t.jsx(C,{children:t.jsx(j.Loader,{})}):n}),t.jsx($.Typography,{variant:l==="S"?"pi":void 0,fontWeight:"bold",lineHeight:0,textColor:"buttonNeutral0",children:b}),s&&t.jsx(T.Flex,{"aria-hidden":!0,children:s})]})});p.displayName="Button";exports.Button=p;exports.ButtonWrapper=y;

package/dist/Button/Button.js

@@ -0,0 +1,51 @@
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import b from "react";
+import { Loader as y } from "@strapi/icons";
+import s, { keyframes as v } from "styled-components";
+import { DEFAULT as B, BUTTON_SIZES as S } from "./constants.js";
+import { getDisabledStyle as l, getHoverStyle as $, getActiveStyle as x, getVariantStyle as C } from "./utils.js";
+import { BaseButton as k } from "../BaseButton/BaseButton.js";
+import { Box as L } from "../Box/Box.js";
+import { Typography as T } from "../Typography/Typography.js";
+import { Flex as j } from "../Flex/Flex.js";
+const w = v`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`, D = s.div`
+  animation: ${w} 2s infinite linear;
+  will-change: transform;
+`, N = s(k)`
+  height: ${({ theme: i, size: e }) => i.sizes.button[e]};
+
+  &[aria-disabled='true'] {
+    ${l}
+
+    &:active {
+      ${l}
+    }
+  }
+
+  &:hover {
+    ${$}
+  }
+
+  &:active {
+    ${x}
+  }
+
+  ${C}
+`, R = b.forwardRef(({ variant: i = B, startIcon: e, endIcon: n, disabled: f = !1, children: p, onClick: d, size: m = S[0], loading: o = !1, fullWidth: r = !1, ...c }, u) => {
+  const a = f || o;
+  return h(N, { ref: u, "aria-disabled": a, disabled: a, size: m, variant: i, onClick: (g) => {
+    !a && d && d(g);
+  }, fullWidth: r, alignItems: "center", background: "buttonPrimary600", borderColor: "buttonPrimary600", gap: 2, inline: r, justifyContent: r ? "center" : void 0, paddingLeft: 4, paddingRight: 4, width: r ? "100%" : void 0, ...c, children: [(e || o) && t(L, { "aria-hidden": !0, children: o ? t(D, { children: t(y, {}) }) : e }), t(T, { variant: m === "S" ? "pi" : void 0, fontWeight: "bold", lineHeight: 0, textColor: "buttonNeutral0", children: p }), n && t(j, { "aria-hidden": !0, children: n })] });
+});
+R.displayName = "Button";
+export {
+  R as Button,
+  N as ButtonWrapper
+};

package/dist/Button/constants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S="success-light",t="danger-light",T="default",s="tertiary",c="secondary",A="danger",o="success",n="ghost",E=[S,t],e=[T,s,c,A,o,n,...E],I=["S","M","L"];exports.BUTTON_SIZES=I;exports.DANGER=A;exports.DANGER_LIGHT=t;exports.DEFAULT=T;exports.GHOST=n;exports.LIGHT_VARIANTS=E;exports.SECONDARY=c;exports.SUCCESS=o;exports.SUCCESS_LIGHT=S;exports.TERTIARY=s;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.defineProperty(exports,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.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./constants.cjs"),s=require("../Typography/Typography.cjs"),c=o=>o===l.SUCCESS_LIGHT||o===l.DANGER_LIGHT?`${o.substring(0,o.lastIndexOf("-"))}`:o===l.TERTIARY?"neutral":o===l.DEFAULT||o===l.SECONDARY||l.VARIANTS.every(r=>r!==o)?"primary":`${o}`,u=({theme:o})=>`
+    border: 1px solid ${o.colors.neutral200};
+    background: ${o.colors.neutral150};
+    ${s.Typography} {
+      color: ${o.colors.neutral600};
+    }
+    svg {
+      > g, path {
+        fill: ${o.colors.neutral600};
+      }
+    }
+  `,$=({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`]};
+  `,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`]};
+      }
+      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`]};
+  `,g=({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=n;exports.getDisabledStyle=u;exports.getHoverStyle=$;exports.getVariantColorName=c;exports.getVariantStyle=g;

package/dist/Button/utils.js

@@ -0,0 +1,112 @@
+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 f } from "./constants.js";
+import { Typography as c } from "../Typography/Typography.js";
+const l = (o) => o === $ || o === n ? `${o.substring(0, o.lastIndexOf("-"))}` : o === s ? "neutral" : o === d || o === u || p.every((r) => r !== o) ? "primary" : `${o}`, k = ({ theme: o }) => `
+    border: 1px solid ${o.colors.neutral200};
+    background: ${o.colors.neutral150};
+    ${c} {
+      color: ${o.colors.neutral600};
+    }
+    svg {
+      > g, path {
+        fill: ${o.colors.neutral600};
+      }
+    }
+  `, i = ({ theme: o, variant: r }) => [...g, u].includes(r) ? `
+      background-color: ${o.colors.neutral0};
+    ` : r === s ? `
+      background-color: ${o.colors.neutral100};
+    ` : r === b ? `
+      background-color: ${o.colors.neutral100};
+    ` : 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`]};
+  `, x = ({ theme: o, variant: r }) => [...g, 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`]};
+  `, a = ({ theme: o, variant: r }) => {
+  switch (r) {
+    case n:
+    case $:
+    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 b:
+      return `
+        border: 1px solid transparent;
+        background: transparent;
+
+        ${c} {
+          color: ${o.colors.neutral800};
+        }
+
+        svg {
+          > g, path {
+            fill: ${o.colors.neutral500};
+          }
+        }
+      `;
+    case f:
+    case t:
+      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 {
+  x as getActiveStyle,
+  k as getDisabledStyle,
+  i as getHoverStyle,
+  l as getVariantColorName,
+  a as getVariantStyle
+};

package/dist/Card/Card.cjs

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

package/dist/Card/Card.js

@@ -0,0 +1,12 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useMemo as a } from "react";
+import { CardContext as i } from "./CardContext.js";
+import { useId as l } from "../hooks/useId.js";
+import { Box as n } from "../Box/Box.js";
+const p = ({ id: o, ...t }) => {
+  const r = l(o), d = a(() => ({ id: r }), [r]);
+  return e(i.Provider, { value: d, children: e(n, { id: o, tabIndex: 0, hasRadius: !0, background: "neutral0", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", shadow: "tableShadow", as: "article", "aria-labelledby": `${r}-title`, ...t }) });
+};
+export {
+  p as Card
+};

package/dist/Card/CardAction.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),n=require("../Stack/Stack.cjs"),s=t=>t&&t.__esModule?t:{default:t},o=s(r),a=o.default(n.Stack).attrs({horizontal:!0,spacing:2})`
+  position: absolute;
+  top: ${({theme:t})=>t.spaces[3]};
+  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=a;

package/dist/Card/CardAction.js

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

package/dist/Card/CardAsset.cjs

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("styled-components"),o=require("../Flex/Flex.cjs"),n=e=>e&&e.__esModule?e:{default:e},s=n(a),d=s.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;
+`,c={S:88,M:164},l=s.default.div`
+  display: flex;
+  justify-content: center;
+  height: ${({size:e})=>c[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};
+`,u=({size:e="M",children:i,...r})=>t.jsx(l,{size:e,children:i?t.jsx(o.Flex,{children:i}):t.jsx(d,{...r,"aria-hidden":!0})});exports.CardAsset=u;

package/dist/Card/CardAsset.js

@@ -0,0 +1,28 @@
+import { jsx as t } from "react/jsx-runtime";
+import r from "styled-components";
+import { Flex as s } from "../Flex/Flex.js";
+const a = r.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;
+`, n = {
+  S: 88,
+  M: 164
+}, d = r.div`
+  display: flex;
+  justify-content: center;
+  height: ${({ size: e }) => n[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};
+`, m = ({ size: e = "M", children: i, ...o }) => t(d, { size: e, children: i ? t(s, { children: i }) : t(a, { ...o, "aria-hidden": !0 }) });
+export {
+  m as CardAsset
+};

package/dist/Card/CardBadge.cjs

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

package/dist/Card/CardBadge.js

@@ -0,0 +1,12 @@
+import { jsx as o } from "react/jsx-runtime";
+import e from "styled-components";
+import { Badge as t } from "../Badge/Badge.js";
+const a = e.div`
+  margin-left: auto;
+  flex-shrink: 0;
+`, i = e(t)`
+  margin-left: ${({ theme: r }) => r.spaces[1]};
+`, n = (r) => o(a, { children: o(i, { ...r }) });
+export {
+  n as CardBadge
+};

package/dist/Card/CardBody.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../Box/Box.cjs"),d=require("../Flex/Flex.cjs"),o=t=>e.jsx(r.Box,{paddingLeft:3,paddingRight:3,paddingTop:2,paddingBottom:2,children:e.jsx(d.Flex,{...t,alignItems:"flex-start"})});exports.CardBody=o;

package/dist/Card/CardBody.js

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Box as r } from "../Box/Box.js";
+import { Flex as d } from "../Flex/Flex.js";
+const n = (t) => o(r, { paddingLeft: 3, paddingRight: 3, paddingTop: 2, paddingBottom: 2, children: o(d, { ...t, alignItems: "flex-start" }) });
+export {
+  n as CardBody
+};

package/dist/Card/CardCheckbox.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("./CardAction.cjs"),i=require("./CardContext.cjs"),s=require("../BaseCheckbox/BaseCheckbox.cjs"),c=r=>{const{id:t}=i.useCard();return e.jsx(o.CardAction,{position:"start",children:e.jsx(s.BaseCheckbox,{"aria-labelledby":`${t}-title`,...r})})};exports.CardCheckbox=c;

package/dist/Card/CardCheckbox.js

@@ -0,0 +1,14 @@
+import { jsx as r } from "react/jsx-runtime";
+import { CardAction as i } from "./CardAction.js";
+import { useCard as e } from "./CardContext.js";
+import { BaseCheckbox as a } from "../BaseCheckbox/BaseCheckbox.js";
+const n = (o) => {
+  const { id: t } = e();
+  return (
+    // @ts-expect-error styled-components can't overwrite the position prop from Stack
+    r(i, { position: "start", children: r(a, { "aria-labelledby": `${t}-title`, ...o }) })
+  );
+};
+export {
+  n as CardCheckbox
+};

package/dist/Card/CardContent.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("styled-components"),n=require("../Box/Box.cjs"),s=e=>e&&e.__esModule?e:{default:e},l=s(o),u=l.default(n.Box)`
+  word-break: break-all;
+`,a=({children:e,...t})=>r.jsx(u,{...t,children:e});exports.CardContent=a;

package/dist/Card/CardContent.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import e from "styled-components";
+import { Box as m } from "../Box/Box.js";
+const n = e(m)`
+  word-break: break-all;
+`, l = ({ children: r, ...o }) => t(n, { ...o, children: r });
+export {
+  l as CardContent
+};

package/dist/Card/CardContext.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({id:""}),o=()=>e.useContext(t);exports.CardContext=t;exports.useCard=o;

package/dist/Card/CardContext.js

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

package/dist/Card/CardHeader.cjs

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

package/dist/Card/CardHeader.js

@@ -0,0 +1,9 @@
+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)`
+  border-bottom: 1px solid ${({ theme: r }) => r.colors.neutral150};
+`, a = (r) => o(i, { position: "relative", justifyContent: "center", ...r });
+export {
+  a as CardHeader
+};

package/dist/Card/CardTimer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("../Box/Box.cjs"),i=require("../Typography/Typography.cjs"),a=({children:e,...t})=>r.jsx(o.Box,{as:"time",background:"neutral800",bottom:1,right:1,color:"neutral0",hasRadius:!0,position:"absolute",padding:1,...t,children:r.jsx(i.Typography,{variant:"pi",textColor:"neutral0",children:e})});exports.CardTimer=a;

package/dist/Card/CardTimer.js

@@ -0,0 +1,7 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Box as i } from "../Box/Box.js";
+import { Typography as a } from "../Typography/Typography.js";
+const p = ({ children: o, ...t }) => r(i, { as: "time", background: "neutral800", bottom: 1, right: 1, color: "neutral0", hasRadius: !0, position: "absolute", padding: 1, ...t, children: r(a, { variant: "pi", textColor: "neutral0", children: o }) });
+export {
+  p as CardTimer
+};

package/dist/Card/CardTitle.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("./CardContext.cjs"),e=require("../Typography/Typography.cjs"),a=t=>{const{id:i}=o.useCard();return r.jsx(e.Typography,{variant:"pi",id:`${i}-title`,textColor:"neutral800",fontWeight:"bold",as:"div",...t})},n=t=>r.jsx(e.Typography,{variant:"pi",...t,textColor:"neutral600",as:"div"});exports.CardSubtitle=n;exports.CardTitle=a;

package/dist/Card/CardTitle.js

@@ -0,0 +1,11 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useCard as a } from "./CardContext.js";
+import { Typography as o } from "../Typography/Typography.js";
+const l = (t) => {
+  const { id: i } = a();
+  return r(o, { variant: "pi", id: `${i}-title`, textColor: "neutral800", fontWeight: "bold", as: "div", ...t });
+}, p = (t) => r(o, { variant: "pi", ...t, textColor: "neutral600", as: "div" });
+export {
+  p as CardSubtitle,
+  l as CardTitle
+};

package/dist/Card/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,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"),o=require("./CardCheckbox.cjs"),i=require("./CardContent.cjs"),n=require("./CardHeader.cjs"),c=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=o.CardCheckbox;exports.CardContent=i.CardContent;exports.CardHeader=n.CardHeader;exports.CardTimer=c.CardTimer;exports.CardSubtitle=r.CardSubtitle;exports.CardTitle=r.CardTitle;

package/dist/Card/index.js

@@ -0,0 +1,23 @@
+import { Card as e } from "./Card.js";
+import { CardAction as d } from "./CardAction.js";
+import { CardAsset as C } from "./CardAsset.js";
+import { CardBadge as x } from "./CardBadge.js";
+import { CardBody as p } from "./CardBody.js";
+import { CardCheckbox as n } from "./CardCheckbox.js";
+import { CardContent as c } from "./CardContent.js";
+import { CardHeader as s } from "./CardHeader.js";
+import { CardTimer as B } from "./CardTimer.js";
+import { CardSubtitle as g, CardTitle as h } from "./CardTitle.js";
+export {
+  e as Card,
+  d as CardAction,
+  C as CardAsset,
+  x as CardBadge,
+  p as CardBody,
+  n as CardCheckbox,
+  c as CardContent,
+  s as CardHeader,
+  g as CardSubtitle,
+  B as CardTimer,
+  h as CardTitle
+};

package/dist/CarouselInput/Carousel.cjs

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),_=require("react"),g=require("@strapi/icons"),T=require("styled-components"),x=require("../helpers/keyboardKeys.cjs"),k=require("../Tooltip/Tooltip.cjs"),i=require("../Box/Box.cjs"),j=require("../Flex/Flex.cjs"),y=require("../Icon/Icon.cjs"),w=require("../Typography/Typography.cjs"),A=e=>e&&e.__esModule?e:{default:e};function K(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const s=K(_),p=A(T),B=p.default(i.Box)`
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: 'startAction slides endAction';
+`,D=p.default(j.Flex)`
+  grid-area: slides;
+`,b=p.default(i.Box)`
+  grid-area: ${({area:e})=>e};
+
+  &:focus svg path,
+  &:hover svg path {
+    fill: ${({theme:e})=>e.colors.neutral900};
+  }
+`,O=({actions:e,children:n,label:r,nextLabel:a,onNext:h,onPrevious:f,previousLabel:C,secondaryLabel:l,selectedSlide:m,...R})=>{const c=s.useRef(null),u=s.useRef(null),d=s.Children.map(n,(o,q)=>s.cloneElement(o,{selected:q===m})),v=o=>{switch(o.key){case x.KeyboardKeys.RIGHT:{o.preventDefault(),u?.current&&u.current.focus(),h();break}case x.KeyboardKeys.LEFT:{o.preventDefault(),c?.current&&c.current.focus(),f();break}}};return t.jsx(i.Box,{...R,onKeyDown:v,children:t.jsxs(i.Box,{padding:2,borderColor:"neutral200",hasRadius:!0,background:"neutral100",children:[t.jsxs(B,{as:"section","aria-roledescription":"carousel","aria-label":r,display:"grid",position:"relative",children:[d&&d.length>1&&t.jsxs(t.Fragment,{children:[t.jsx(b,{as:"button",onClick:f,area:"startAction",ref:c,"aria-label":C,type:"button",children:t.jsx(y.Icon,{as:g.ChevronLeft,"aria-hidden":!0,width:"6px",height:"10px",color:"neutral600"})}),t.jsx(b,{as:"button",onClick:h,area:"endAction",ref:u,"aria-label":a,type:"button",children:t.jsx(y.Icon,{as:g.ChevronRight,"aria-hidden":!0,width:"6px",height:"10px",color:"neutral600"})})]}),t.jsx(D,{"aria-live":"polite",paddingLeft:2,paddingRight:2,width:"100%",overflow:"hidden",children:d}),e]}),l&&t.jsx(i.Box,{paddingTop:2,paddingLeft:4,paddingRight:4,children:t.jsx(k.Tooltip,{label:l,children:t.jsx(j.Flex,{justifyContent:"center",children:t.jsx(w.Typography,{variant:"pi",textColor:"neutral600",ellipsis:!0,children:l})})})})]})})};exports.Carousel=O;

package/dist/CarouselInput/Carousel.js

@@ -0,0 +1,40 @@
+import { jsx as e, jsxs as s, Fragment as A } from "react/jsx-runtime";
+import * as o from "react";
+import { ChevronLeft as k, ChevronRight as D } from "@strapi/icons";
+import c from "styled-components";
+import { KeyboardKeys as h } from "../helpers/keyboardKeys.js";
+import { Tooltip as K } from "../Tooltip/Tooltip.js";
+import { Box as i } from "../Box/Box.js";
+import { Flex as g } from "../Flex/Flex.js";
+import { Icon as f } from "../Icon/Icon.js";
+import { Typography as T } from "../Typography/Typography.js";
+const j = c(i)`
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: 'startAction slides endAction';
+`, F = c(g)`
+  grid-area: slides;
+`, m = c(i)`
+  grid-area: ${({ area: r }) => r};
+
+  &:focus svg path,
+  &:hover svg path {
+    fill: ${({ theme: r }) => r.colors.neutral900};
+  }
+`, J = ({ actions: r, children: y, label: C, nextLabel: b, onNext: p, onPrevious: u, previousLabel: x, secondaryLabel: n, selectedSlide: R, ...v }) => {
+  const a = o.useRef(null), l = o.useRef(null), d = o.Children.map(y, (t, w) => o.cloneElement(t, { selected: w === R }));
+  return e(i, { ...v, onKeyDown: (t) => {
+    switch (t.key) {
+      case h.RIGHT: {
+        t.preventDefault(), l?.current && l.current.focus(), p();
+        break;
+      }
+      case h.LEFT: {
+        t.preventDefault(), a?.current && a.current.focus(), u();
+        break;
+      }
+    }
+  }, children: s(i, { padding: 2, borderColor: "neutral200", hasRadius: !0, background: "neutral100", children: [s(j, { as: "section", "aria-roledescription": "carousel", "aria-label": C, display: "grid", position: "relative", children: [d && d.length > 1 && s(A, { children: [e(m, { as: "button", onClick: u, area: "startAction", ref: a, "aria-label": x, type: "button", children: e(f, { as: k, "aria-hidden": !0, width: "6px", height: "10px", color: "neutral600" }) }), e(m, { as: "button", onClick: p, area: "endAction", ref: l, "aria-label": b, type: "button", children: e(f, { as: D, "aria-hidden": !0, width: "6px", height: "10px", color: "neutral600" }) })] }), e(F, { "aria-live": "polite", paddingLeft: 2, paddingRight: 2, width: "100%", overflow: "hidden", children: d }), r] }), n && e(i, { paddingTop: 2, paddingLeft: 4, paddingRight: 4, children: e(K, { label: n, children: e(g, { justifyContent: "center", children: e(T, { variant: "pi", textColor: "neutral600", ellipsis: !0, children: n }) }) }) })] }) });
+};
+export {
+  J as Carousel
+};

package/dist/CarouselInput/CarouselActions.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),n=require("../Flex/Flex.cjs"),r=({horizontal:e=!0,spacing:t=1,...o})=>s.jsx(n.Flex,{justifyContent:"center",gap:t,direction:e?"row":"column",alignItems:e?"center":"stretch",position:"absolute",width:"100%",bottom:1,...o});exports.CarouselActions=r;

package/dist/CarouselInput/CarouselActions.js

@@ -0,0 +1,6 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Flex as i } from "../Flex/Flex.js";
+const c = ({ horizontal: t = !0, spacing: o = 1, ...e }) => r(i, { justifyContent: "center", gap: o, direction: t ? "row" : "column", alignItems: t ? "center" : "stretch", position: "absolute", width: "100%", bottom: 1, ...e });
+export {
+  c as CarouselActions
+};