@strapi/design-system 0.0.0-3cf3ff39

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright (c) 2015-present Strapi Solutions SAS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,47 @@
+# Strapi Design System
+
+[![Version](https://img.shields.io/npm/v/@strapi/design-system?style=flat&colorA=4945ff&colorB=4945ff)](https://www.npmjs.com/package/@strapi/design-system)
+[![Downloads](https://img.shields.io/npm/dt/@strapi/design-system.svg?style=flat&colorA=4945ff&colorB=4945ff)](https://www.npmjs.com/package/@strapi/design-system)
+[![Discord Shield](https://img.shields.io/discord/811989166782021633?style=flat&colorA=4945ff&colorB=4945ff&label=discord&logo=discord&logoColor=f0f0ff)](https://discord.gg/strapi)
+
+<b>A UI component library for creating amazing Strapi extensions.</b>
+
+## Installation
+
+```sh
+$ yarn add react react-dom @strapi/design-system @strapi/icons styled-components react-router-dom
+
+# or
+
+$ npm i react react-dom @strapi/design-system @strapi/icons styled-components react-router-dom
+```
+
+## Getting Started
+
+Wrap your application with the `DesignSystemProvider`. You can additionally pass a theme and/or locale, although you don't have to as we have default values for both.
+
+```jsx
+import { DesignSystemProvider, lightTheme } from '@strapi/design-system';
+
+function MyApp({ children }) {
+  return (
+    <DesignSystemProvider locale="en-GB" theme={lightTheme}>
+      {children}
+    </DesignSystemProvider>
+  );
+}
+
+export default App;
+```
+
+Then, checkout the complete [Storybook documentation](https://design-system-git-main-strapijs.vercel.app/) to find the components you want to use and how to use them.
+
+## Contributing
+
+Please follow our [CONTRIBUTING](https://github.com/strapi/design-system/blob/main/CONTRIBUTING.md) guidelines.
+
+## License
+
+Licensed under the MIT License, Copyright © 2015-present [Strapi Solutions SAS](https://strapi.io).
+
+See [LICENSE](https://github.com/strapi/design-system/blob/main/LICENSE) for more information.

package/dist/Accordion/Accordion.cjs

@@ -0,0 +1,23 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),b=require("react"),m=require("styled-components"),j=require("./AccordionContext.cjs"),_=require("../hooks/useId.cjs"),s=require("../Typography/Typography.cjs"),h=require("../Flex/Flex.cjs"),p=require("../Box/Box.cjs"),q=r=>r&&r.__esModule?r:{default:r};function T(r){if(r&&r.__esModule)return r;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(o,e,t.get?t:{enumerable:!0,get:()=>r[e]})}}return o.default=r,Object.freeze(o)}const A=T(b),y=q(m),M=({theme:r,expanded:o,variant:e,disabled:t,error:c})=>c?`1px solid ${r.colors.danger600} !important`:t?`1px solid ${r.colors.neutral150}`:o?`1px solid ${r.colors.primary600}`:e==="primary"?`1px solid ${r.colors.neutral0}`:`1px solid ${r.colors.neutral100}`,f=y.default(s.Typography)``,O=y.default(p.Box)`
+  border: ${M};
+
+  &:hover:not([aria-disabled='true']) {
+    border: 1px solid ${({theme:r})=>r.colors.primary600};
+
+    ${f} {
+      color: ${({theme:r,expanded:o})=>o?void 0:r.colors.primary700};
+    }
+
+    ${s.Typography} {
+      color: ${({theme:r,expanded:o})=>o?void 0:r.colors.primary600};
+    }
+
+    & > ${h.Flex} {
+      background: ${({theme:r})=>r.colors.primary100};
+    }
+
+    [data-strapi-dropdown='true'] {
+      background: ${({theme:r})=>r.colors.primary200};
+    }
+  }
+`,v=({children:r,disabled:o=!1,error:e,expanded:t=!1,hasErrorMessage:c=!0,id:x,onToggle:a,toggle:d,size:u="M",variant:i="primary",shadow:g})=>{const l=_.useId(x),$=A.useMemo(()=>({expanded:t,onToggle:a,toggle:d,id:l,size:u,variant:i,disabled:o}),[o,t,l,a,u,d,i]);return n.jsxs(j.AccordionContext.Provider,{value:$,children:[n.jsx(O,{"data-strapi-expanded":t,disabled:o,"aria-disabled":o,expanded:t,hasRadius:!0,variant:i,error:e,shadow:g,children:r}),e&&c&&n.jsx(p.Box,{paddingTop:1,children:n.jsx(s.Typography,{variant:"pi",textColor:"danger600",children:e})})]})};exports.Accordion=v;exports.AccordionTypography=f;

package/dist/Accordion/Accordion.js

@@ -0,0 +1,38 @@
+import { jsxs as y, jsx as n } from "react/jsx-runtime";
+import * as g from "react";
+import m from "styled-components";
+import { AccordionContext as h } from "./AccordionContext.js";
+import { useId as b } from "../hooks/useId.js";
+import { Typography as p } from "../Typography/Typography.js";
+import { Flex as A } from "../Flex/Flex.js";
+import { Box as u } from "../Box/Box.js";
+const v = ({ theme: r, expanded: o, variant: t, disabled: i, error: a }) => a ? `1px solid ${r.colors.danger600} !important` : i ? `1px solid ${r.colors.neutral150}` : o ? `1px solid ${r.colors.primary600}` : t === "primary" ? `1px solid ${r.colors.neutral0}` : `1px solid ${r.colors.neutral100}`, j = m(p)``, k = m(u)`
+  border: ${v};
+
+  &:hover:not([aria-disabled='true']) {
+    border: 1px solid ${({ theme: r }) => r.colors.primary600};
+
+    ${j} {
+      color: ${({ theme: r, expanded: o }) => o ? void 0 : r.colors.primary700};
+    }
+
+    ${p} {
+      color: ${({ theme: r, expanded: o }) => o ? void 0 : r.colors.primary600};
+    }
+
+    & > ${A} {
+      background: ${({ theme: r }) => r.colors.primary100};
+    }
+
+    [data-strapi-dropdown='true'] {
+      background: ${({ theme: r }) => r.colors.primary200};
+    }
+  }
+`, F = ({ children: r, disabled: o = !1, error: t, expanded: i = !1, hasErrorMessage: a = !0, id: f, onToggle: s, toggle: c, size: e = "M", variant: d = "primary", shadow: $ }) => {
+  const l = b(f), x = g.useMemo(() => ({ expanded: i, onToggle: s, toggle: c, id: l, size: e, variant: d, disabled: o }), [o, i, l, s, e, c, d]);
+  return y(h.Provider, { value: x, children: [n(k, { "data-strapi-expanded": i, disabled: o, "aria-disabled": o, expanded: i, hasRadius: !0, variant: d, error: t, shadow: $, children: r }), t && a && n(u, { paddingTop: 1, children: n(p, { variant: "pi", textColor: "danger600", children: t }) })] });
+};
+export {
+  F as Accordion,
+  j as AccordionTypography
+};

package/dist/Accordion/AccordionContent.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),a=require("./AccordionContext.cjs"),s=require("../Box/Box.cjs"),l=({children:e,...n})=>{const{expanded:r,id:o}=a.useAccordion();if(!r)return null;const c=`accordion-content-${o}`,t=`accordion-label-${o}`,i=`accordion-desc-${o}`;return d.jsx(s.Box,{role:"region",id:c,"aria-labelledby":t,"aria-describedby":i,...n,children:e})};exports.AccordionContent=l;

package/dist/Accordion/AccordionContent.js

@@ -0,0 +1,13 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useAccordion as a } from "./AccordionContext.js";
+import { Box as l } from "../Box/Box.js";
+const p = ({ children: r, ...n }) => {
+  const { expanded: i, id: o } = a();
+  if (!i)
+    return null;
+  const c = `accordion-content-${o}`, e = `accordion-label-${o}`, t = `accordion-desc-${o}`;
+  return d(l, { role: "region", id: c, "aria-labelledby": e, "aria-describedby": t, ...n, children: r });
+};
+export {
+  p as AccordionContent
+};

package/dist/Accordion/AccordionContext.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({disabled:!1,expanded:!1,id:"",size:"M",variant:"primary"}),o=()=>e.useContext(t);exports.AccordionContext=t;exports.useAccordion=o;

package/dist/Accordion/AccordionContext.js

@@ -0,0 +1,12 @@
+import { createContext as e, useContext as o } from "react";
+const t = e({
+  disabled: !1,
+  expanded: !1,
+  id: "",
+  size: "M",
+  variant: "primary"
+}), r = () => o(t);
+export {
+  t as AccordionContext,
+  r as useAccordion
+};

package/dist/Accordion/AccordionGroup.cjs

@@ -0,0 +1,47 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),p=require("react"),b=require("styled-components"),x=require("../KeyboardNavigable/KeyboardNavigable.cjs"),s=require("../Box/Box.cjs"),f=require("../Flex/Flex.cjs"),n=require("../Typography/Typography.cjs"),g=r=>r&&r.__esModule?r:{default:r};function y(r){if(r&&r.__esModule)return r;const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const d=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,d.get?d:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const l=y(p),a=g(b),$=a.default(s.Box)`
+  border-bottom: 1px solid ${({theme:r})=>r.colors.neutral200};
+  border-right: 1px solid ${({theme:r})=>r.colors.neutral200};
+  border-left: 1px solid ${({theme:r})=>r.colors.neutral200};
+  border-radius: 0 0 ${({theme:r})=>r.borderRadius} ${({theme:r})=>r.borderRadius};
+`,h=a.default(s.Box)`
+  & > * {
+    & > * {
+      border-radius: unset;
+    }
+  }
+
+  & > * {
+    border-radius: unset;
+    border-right: 1px solid ${({theme:r})=>r.colors.neutral200};
+    border-left: 1px solid ${({theme:r})=>r.colors.neutral200};
+    border-bottom: 1px solid ${({theme:r})=>r.colors.neutral200};
+  }
+
+  & > *:first-of-type {
+    border-top: 1px solid ${({theme:r})=>r.colors.neutral200};
+    border-radius: ${({theme:r})=>r.borderRadius} ${({theme:r})=>r.borderRadius} 0 0;
+    & > * {
+      border-radius: ${({theme:r})=>r.borderRadius} ${({theme:r})=>r.borderRadius} 0 0;
+    }
+
+    &:hover {
+      border-top: 1px solid ${({theme:r})=>r.colors.primary600};
+    }
+  }
+
+  & [data-strapi-expanded='true'] {
+    border: 1px solid ${({theme:r})=>r.colors.primary600};
+  }
+
+  ${({theme:r,footer:e})=>`
+    &:not(${e}) {
+      & > *:last-of-type {
+        border-radius: 0 0 ${r.borderRadius} ${r.borderRadius};
+      }
+    }
+  `}
+`,j=a.default(s.Box)`
+  svg path {
+    fill: ${({theme:r})=>r.colors.neutral500};
+  }
+`,m=({children:r,footer:e,label:t,labelAction:d,error:i})=>{const u=l.Children.toArray(r).map(c=>l.cloneElement(c,{hasErrorMessage:!1}));return o.jsxs(x.KeyboardNavigable,{attributeName:"data-strapi-accordion-toggle",children:[t&&o.jsxs(f.Flex,{paddingBottom:1,children:[o.jsx(n.Typography,{variant:"pi",as:"label",textColor:"neutral800",fontWeight:"bold",children:t}),d&&o.jsx(j,{paddingLeft:1,children:d})]}),o.jsx(h,{footer:e,children:u}),e&&o.jsx($,{children:e}),i&&o.jsx(s.Box,{paddingTop:1,children:o.jsx(n.Typography,{variant:"pi",textColor:"danger600",children:i})})]})};exports.AccordionGroup=m;

package/dist/Accordion/AccordionGroup.js

@@ -0,0 +1,60 @@
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import * as n from "react";
+import t from "styled-components";
+import { KeyboardNavigable as b } from "../KeyboardNavigable/KeyboardNavigable.js";
+import { Box as e } from "../Box/Box.js";
+import { Flex as m } from "../Flex/Flex.js";
+import { Typography as p } from "../Typography/Typography.js";
+const $ = t(e)`
+  border-bottom: 1px solid ${({ theme: r }) => r.colors.neutral200};
+  border-right: 1px solid ${({ theme: r }) => r.colors.neutral200};
+  border-left: 1px solid ${({ theme: r }) => r.colors.neutral200};
+  border-radius: 0 0 ${({ theme: r }) => r.borderRadius} ${({ theme: r }) => r.borderRadius};
+`, h = t(e)`
+  & > * {
+    & > * {
+      border-radius: unset;
+    }
+  }
+
+  & > * {
+    border-radius: unset;
+    border-right: 1px solid ${({ theme: r }) => r.colors.neutral200};
+    border-left: 1px solid ${({ theme: r }) => r.colors.neutral200};
+    border-bottom: 1px solid ${({ theme: r }) => r.colors.neutral200};
+  }
+
+  & > *:first-of-type {
+    border-top: 1px solid ${({ theme: r }) => r.colors.neutral200};
+    border-radius: ${({ theme: r }) => r.borderRadius} ${({ theme: r }) => r.borderRadius} 0 0;
+    & > * {
+      border-radius: ${({ theme: r }) => r.borderRadius} ${({ theme: r }) => r.borderRadius} 0 0;
+    }
+
+    &:hover {
+      border-top: 1px solid ${({ theme: r }) => r.colors.primary600};
+    }
+  }
+
+  & [data-strapi-expanded='true'] {
+    border: 1px solid ${({ theme: r }) => r.colors.primary600};
+  }
+
+  ${({ theme: r, footer: d }) => `
+    &:not(${d}) {
+      & > *:last-of-type {
+        border-radius: 0 0 ${r.borderRadius} ${r.borderRadius};
+      }
+    }
+  `}
+`, x = t(e)`
+  svg path {
+    fill: ${({ theme: r }) => r.colors.neutral500};
+  }
+`, C = ({ children: r, footer: d, label: i, labelAction: a, error: s }) => {
+  const c = n.Children.toArray(r).map((u) => n.cloneElement(u, { hasErrorMessage: !1 }));
+  return l(b, { attributeName: "data-strapi-accordion-toggle", children: [i && l(m, { paddingBottom: 1, children: [o(p, { variant: "pi", as: "label", textColor: "neutral800", fontWeight: "bold", children: i }), a && o(x, { paddingLeft: 1, children: a })] }), o(h, { footer: d, children: c }), d && o($, { children: d }), s && o(e, { paddingTop: 1, children: o(p, { variant: "pi", textColor: "danger600", children: s }) })] });
+};
+export {
+  C as AccordionGroup
+};

package/dist/Accordion/AccordionToggle.cjs

@@ -0,0 +1,28 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),A=require("@strapi/icons"),F=require("styled-components"),M=require("./Accordion.cjs"),B=require("./AccordionContext.cjs"),R=require("./utils.cjs"),z=require("../TextButton/TextButton.cjs"),I=require("../Icon/Icon.cjs"),d=require("../Flex/Flex.cjs"),S=require("../Typography/Typography.cjs"),_=e=>e&&e.__esModule?e:{default:e},m=_(F),D=m.default(z.TextButton)`
+  text-align: left;
+
+  // necessary to make the ellipsis prop work on the title
+  > span {
+    max-width: 100%;
+  }
+
+  svg {
+    width: ${14/16}rem;
+    height: ${14/16}rem;
+
+    path {
+      fill: ${({theme:e,expanded:t})=>t?e.colors.primary600:e.colors.neutral500};
+    }
+  }
+`,W=m.default(d.Flex)`
+  min-height: ${({theme:e,size:t})=>e.sizes.accordions[t]};
+  border-radius: ${({theme:e,expanded:t})=>t?`${e.borderRadius} ${e.borderRadius} 0 0`:e.borderRadius};
+
+  &:hover {
+    svg {
+      path {
+        fill: ${({theme:e})=>e.colors.primary600};
+      }
+    }
+  }
+`,P=({title:e,description:t,as:y="span",togglePosition:s="right",action:u,...$})=>{const{onToggle:c,toggle:p,expanded:r,id:l,size:n,variant:j,disabled:i}=B.useAccordion(),w=`accordion-content-${l}`,g=`accordion-label-${l}`,T=`accordion-desc-${l}`,a=n==="M"?6:4,h=n==="M"?a:a-2,C=R.getBackground({expanded:r,disabled:i,variant:j}),q={as:y,fontWeight:n==="S"?"bold":void 0,id:g,textColor:r?"primary600":"neutral700",ellipsis:!0,variant:n==="M"?"delta":void 0},k=r?"primary600":"neutral600",v=r?"primary200":"neutral200",x=n==="M"?`${32/16}rem`:`${24/16}rem`,f=()=>{i||(p&&!c?(console.warn('Deprecation warning: Usage of "toggle" prop in Accordion component is deprecated. This is discouraged and will be removed in the next major release. Please use "onToggle" instead'),p()):c&&c())},b=o.jsx(d.Flex,{justifyContent:"center",borderRadius:"50%",height:x,width:x,transform:r?"rotate(180deg)":void 0,"data-strapi-dropdown":!0,"aria-hidden":!0,as:"span",background:v,cursor:i?"not-allowed":"pointer",onClick:f,shrink:0,children:o.jsx(I.Icon,{as:A.CarretDown,width:n==="M"?`${11/16}rem`:`${8/16}rem`,color:r?"primary600":"neutral600"})});return o.jsx(W,{paddingBottom:h,paddingLeft:a,paddingRight:a,paddingTop:h,background:C,expanded:r,size:n,justifyContent:"space-between",cursor:i?"not-allowed":"",children:o.jsxs(d.Flex,{gap:3,flex:1,maxWidth:"100%",children:[s==="left"&&b,o.jsx(D,{onClick:f,"aria-disabled":i,"aria-expanded":r,"aria-controls":w,"aria-labelledby":g,"data-strapi-accordion-toggle":!0,expanded:r,type:"button",flex:1,minWidth:0,...$,children:o.jsxs(o.Fragment,{children:[o.jsx(M.AccordionTypography,{...q,children:e}),t&&o.jsx(S.Typography,{as:"p",id:T,textColor:k,children:t})]})}),s==="right"&&o.jsxs(d.Flex,{gap:3,children:[b,u]}),s==="left"&&u]})})};exports.AccordionToggle=P;

package/dist/Accordion/AccordionToggle.js

@@ -0,0 +1,53 @@
+import { jsx as i, jsxs as p, Fragment as M } from "react/jsx-runtime";
+import { CarretDown as R } from "@strapi/icons";
+import y from "styled-components";
+import { AccordionTypography as A } from "./Accordion.js";
+import { useAccordion as I } from "./AccordionContext.js";
+import { getBackground as W } from "./utils.js";
+import { TextButton as D } from "../TextButton/TextButton.js";
+import { Icon as F } from "../Icon/Icon.js";
+import { Flex as d } from "../Flex/Flex.js";
+import { Typography as S } from "../Typography/Typography.js";
+const L = y(D)`
+  text-align: left;
+
+  // necessary to make the ellipsis prop work on the title
+  > span {
+    max-width: 100%;
+  }
+
+  svg {
+    width: ${14 / 16}rem;
+    height: ${14 / 16}rem;
+
+    path {
+      fill: ${({ theme: o, expanded: e }) => e ? o.colors.primary600 : o.colors.neutral500};
+    }
+  }
+`, P = y(d)`
+  min-height: ${({ theme: o, size: e }) => o.sizes.accordions[e]};
+  border-radius: ${({ theme: o, expanded: e }) => e ? `${o.borderRadius} ${o.borderRadius} 0 0` : o.borderRadius};
+
+  &:hover {
+    svg {
+      path {
+        fill: ${({ theme: o }) => o.colors.primary600};
+      }
+    }
+  }
+`, Q = ({ title: o, description: e, as: $ = "span", togglePosition: l = "right", action: g, ...w }) => {
+  const { onToggle: s, toggle: m, expanded: r, id: c, size: t, variant: C, disabled: n } = I(), T = `accordion-content-${c}`, h = `accordion-label-${c}`, k = `accordion-desc-${c}`, a = t === "M" ? 6 : 4, u = t === "M" ? a : a - 2, v = W({ expanded: r, disabled: n, variant: C }), j = {
+    as: $,
+    fontWeight: t === "S" ? "bold" : void 0,
+    id: h,
+    textColor: r ? "primary600" : "neutral700",
+    ellipsis: !0,
+    variant: t === "M" ? "delta" : void 0
+  }, z = r ? "primary600" : "neutral600", B = r ? "primary200" : "neutral200", f = t === "M" ? `${32 / 16}rem` : `${24 / 16}rem`, x = () => {
+    n || (m && !s ? (console.warn('Deprecation warning: Usage of "toggle" prop in Accordion component is deprecated. This is discouraged and will be removed in the next major release. Please use "onToggle" instead'), m()) : s && s());
+  }, b = i(d, { justifyContent: "center", borderRadius: "50%", height: f, width: f, transform: r ? "rotate(180deg)" : void 0, "data-strapi-dropdown": !0, "aria-hidden": !0, as: "span", background: B, cursor: n ? "not-allowed" : "pointer", onClick: x, shrink: 0, children: i(F, { as: R, width: t === "M" ? `${11 / 16}rem` : `${8 / 16}rem`, color: r ? "primary600" : "neutral600" }) });
+  return i(P, { paddingBottom: u, paddingLeft: a, paddingRight: a, paddingTop: u, background: v, expanded: r, size: t, justifyContent: "space-between", cursor: n ? "not-allowed" : "", children: p(d, { gap: 3, flex: 1, maxWidth: "100%", children: [l === "left" && b, i(L, { onClick: x, "aria-disabled": n, "aria-expanded": r, "aria-controls": T, "aria-labelledby": h, "data-strapi-accordion-toggle": !0, expanded: r, type: "button", flex: 1, minWidth: 0, ...w, children: p(M, { children: [i(A, { ...j, children: o }), e && i(S, { as: "p", id: k, textColor: z, children: e })] }) }), l === "right" && p(d, { gap: 3, children: [b, g] }), l === "left" && g] }) });
+};
+export {
+  Q as AccordionToggle
+};

package/dist/Accordion/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Accordion.cjs"),c=require("./AccordionContent.cjs"),r=require("./AccordionToggle.cjs"),n=require("./AccordionGroup.cjs");exports.Accordion=o.Accordion;exports.AccordionTypography=o.AccordionTypography;exports.AccordionContent=c.AccordionContent;exports.AccordionToggle=r.AccordionToggle;exports.AccordionGroup=n.AccordionGroup;

package/dist/Accordion/index.js

@@ -0,0 +1,11 @@
+import { Accordion as c, AccordionTypography as n } from "./Accordion.js";
+import { AccordionContent as e } from "./AccordionContent.js";
+import { AccordionToggle as d } from "./AccordionToggle.js";
+import { AccordionGroup as A } from "./AccordionGroup.js";
+export {
+  c as Accordion,
+  e as AccordionContent,
+  A as AccordionGroup,
+  d as AccordionToggle,
+  n as AccordionTypography
+};

package/dist/Accordion/utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=({expanded:r,disabled:t,variant:a})=>{let e="neutral100";return r?e="primary100":t?e="neutral150":a==="primary"&&(e="neutral0"),e};exports.getBackground=n;

package/dist/Accordion/utils.js

@@ -0,0 +1,7 @@
+const n = ({ expanded: e, disabled: t, variant: a }) => {
+  let r = "neutral100";
+  return e ? r = "primary100" : t ? r = "neutral150" : a === "primary" && (r = "neutral0"), r;
+};
+export {
+  n as getBackground
+};

package/dist/Alert/Alert.cjs

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("@strapi/icons"),p=require("styled-components"),l=require("./utils.cjs"),g=require("../themes/utils.cjs"),t=require("../Box/Box.cjs"),f=require("../Flex/Flex.cjs"),i=require("../Typography/Typography.cjs"),j=e=>e&&e.__esModule?e:{default:e},d=j(p),B=d.default(t.Box)`
+  flex: 1;
+  flex-wrap: wrap;
+  display: flex;
+  flex-direction: row;
+`,C=d.default(t.Box)`
+  border: 1px solid ${l.handleBorderColor};
+  background: ${l.handleBackgroundColor};
+  box-shadow: ${({theme:e})=>e.shadows.filterShadow};
+`,y=d.default.button`
+  border: none;
+  background: transparent;
+  font-size: ${12/16}rem;
+  svg path {
+    fill: ${({theme:e})=>e.colors.neutral700};
+  }
+  margin-top: ${({theme:e})=>e.spaces[1]};
+  ${g.buttonFocusStyle};
+`,$=d.default(t.Box)`
+  font-size: ${20/16}rem;
+  svg path {
+    fill: ${l.handleIconColor};
+  }
+`,b=({variant:e,...o})=>e==="success"?r.jsx(s.CheckCircle,{...o}):e==="danger"||e==="warning"?r.jsx(s.ExclamationMarkCircle,{...o}):r.jsx(s.Information,{...o}),m=d.default(t.Box)`
+  // Checked with the designers, validated
+  padding-top: 1px;
+
+  & a > span {
+    color: ${l.handleIconColor};
+
+    svg path {
+      fill: ${l.handleIconColor};
+    }
+  }
+`,q=({title:e,children:o,variant:n="default",onClose:c,closeLabel:u,titleAs:x="p",action:a,...h})=>r.jsx(C,{hasRadius:!0,paddingLeft:5,paddingRight:6,paddingTop:5,variant:n,...h,children:r.jsxs(f.Flex,{alignItems:"flex-start",children:[r.jsx($,{paddingRight:3,variant:n,children:r.jsx(b,{variant:n,"aria-hidden":!0})}),r.jsxs(B,{role:n==="danger"?"alert":"status",children:[r.jsx(t.Box,{paddingBottom:2,paddingRight:1,children:r.jsx(i.Typography,{fontWeight:"bold",textColor:"neutral800",as:x,children:e})}),r.jsx(t.Box,{paddingBottom:a?2:5,paddingRight:2,children:r.jsx(i.Typography,{as:"p",textColor:"neutral800",children:o})}),a&&r.jsx(m,{paddingBottom:5,variant:n,children:a})]}),r.jsx(y,{onClick:c,"aria-label":u,children:r.jsx(s.Cross,{"aria-hidden":!0})})]})});exports.Alert=q;

package/dist/Alert/Alert.js

@@ -0,0 +1,46 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { Cross as f, CheckCircle as m, ExclamationMarkCircle as u, Information as x } from "@strapi/icons";
+import d from "styled-components";
+import { handleBorderColor as C, handleBackgroundColor as $, handleIconColor as l } from "./utils.js";
+import { buttonFocusStyle as b } from "../themes/utils.js";
+import { Box as t } from "../Box/Box.js";
+import { Flex as B } from "../Flex/Flex.js";
+import { Typography as s } from "../Typography/Typography.js";
+const w = d(t)`
+  flex: 1;
+  flex-wrap: wrap;
+  display: flex;
+  flex-direction: row;
+`, k = d(t)`
+  border: 1px solid ${C};
+  background: ${$};
+  box-shadow: ${({ theme: o }) => o.shadows.filterShadow};
+`, y = d.button`
+  border: none;
+  background: transparent;
+  font-size: ${12 / 16}rem;
+  svg path {
+    fill: ${({ theme: o }) => o.colors.neutral700};
+  }
+  margin-top: ${({ theme: o }) => o.spaces[1]};
+  ${b};
+`, A = d(t)`
+  font-size: ${20 / 16}rem;
+  svg path {
+    fill: ${l};
+  }
+`, I = ({ variant: o, ...e }) => o === "success" ? r(m, { ...e }) : o === "danger" || o === "warning" ? r(u, { ...e }) : r(x, { ...e }), R = d(t)`
+  // Checked with the designers, validated
+  padding-top: 1px;
+
+  & a > span {
+    color: ${l};
+
+    svg path {
+      fill: ${l};
+    }
+  }
+`, L = ({ title: o, children: e, variant: n = "default", onClose: p, closeLabel: c, titleAs: h = "p", action: i, ...g }) => r(k, { hasRadius: !0, paddingLeft: 5, paddingRight: 6, paddingTop: 5, variant: n, ...g, children: a(B, { alignItems: "flex-start", children: [r(A, { paddingRight: 3, variant: n, children: r(I, { variant: n, "aria-hidden": !0 }) }), a(w, { role: n === "danger" ? "alert" : "status", children: [r(t, { paddingBottom: 2, paddingRight: 1, children: r(s, { fontWeight: "bold", textColor: "neutral800", as: h, children: o }) }), r(t, { paddingBottom: i ? 2 : 5, paddingRight: 2, children: r(s, { as: "p", textColor: "neutral800", children: e }) }), i && r(R, { paddingBottom: 5, variant: n, children: i })] }), r(y, { onClick: p, "aria-label": c, children: r(f, { "aria-hidden": !0 }) })] }) });
+export {
+  L as Alert
+};

package/dist/Alert/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Alert.cjs");exports.Alert=e.Alert;

package/dist/Alert/index.js

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

package/dist/Alert/utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=({theme:r,variant:o})=>o==="danger"?r.colors.danger100:o==="success"?r.colors.success100:o==="warning"?r.colors.warning100:r.colors.primary100,s=({theme:r,variant:o})=>o==="danger"?r.colors.danger200:o==="success"?r.colors.success200:o==="warning"?r.colors.warning200:r.colors.primary200,c=({theme:r,variant:o})=>o==="danger"?r.colors.danger700:o==="success"?r.colors.success700:o==="warning"?r.colors.warning700:r.colors.primary700;exports.handleBackgroundColor=n;exports.handleBorderColor=s;exports.handleIconColor=c;

package/dist/Alert/utils.js

@@ -0,0 +1,6 @@
+const s = ({ theme: r, variant: o }) => o === "danger" ? r.colors.danger100 : o === "success" ? r.colors.success100 : o === "warning" ? r.colors.warning100 : r.colors.primary100, n = ({ theme: r, variant: o }) => o === "danger" ? r.colors.danger200 : o === "success" ? r.colors.success200 : o === "warning" ? r.colors.warning200 : r.colors.primary200, c = ({ theme: r, variant: o }) => o === "danger" ? r.colors.danger700 : o === "success" ? r.colors.success700 : o === "warning" ? r.colors.warning700 : r.colors.primary700;
+export {
+  s as handleBackgroundColor,
+  n as handleBorderColor,
+  c as handleIconColor
+};

package/dist/Avatar/Avatar.cjs

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),c=require("react"),d=require("styled-components"),t=require("./constants.cjs"),u=require("../Box/Box.cjs"),p=require("../Flex/Flex.cjs"),f=require("../Typography/Typography.cjs"),x=e=>e&&e.__esModule?e:{default:e};function h(e){if(e&&e.__esModule)return e;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(a,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return a.default=e,Object.freeze(a)}const g=h(c),o=x(d),v=o.default.img`
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  position: relative;
+`,b=o.default.img`
+  border-radius: 50%;
+  object-fit: cover;
+  position: absolute;
+  transform: translate(-${(t.previewSize-t.avatarSize)/2}px, -100%);
+  margin-top: -${({theme:e})=>e.spaces[1]};
+`,S=o.default(u.Box)`
+  opacity: 0.4;
+`,y=({src:e,alt:a,preview:r})=>{const[n,l]=g.useState(!1),s=!!(r&&n);return i.jsxs("span",{children:[s?i.jsx(b,{"aria-hidden":!0,alt:"",width:`${t.previewSize}px`,height:`${t.previewSize}px`,src:r===!0?e:typeof r=="string"?r:""}):null,i.jsxs(u.Box,{zIndex:s?1:void 0,position:"relative",onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1),width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,children:[s?i.jsx(S,{background:"neutral0",borderRadius:"50%",position:"absolute",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,zIndex:1}):null,i.jsx(v,{src:e,alt:a,width:`${t.avatarSize}px`,height:`${t.avatarSize}px`})]})]})},j=o.default(p.Flex)`
+  span {
+    line-height: 0;
+  }
+`,z=({children:e,background:a="primary600",textColor:r="buttonNeutral0"})=>i.jsx(j,{background:a,borderRadius:"50%",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,justifyContent:"center",children:i.jsx(f.Typography,{fontSize:0,fontWeight:"bold",textColor:r,textTransform:"uppercase",children:e})});exports.Avatar=y;exports.Initials=z;

package/dist/Avatar/Avatar.js

@@ -0,0 +1,39 @@
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import * as h from "react";
+import o from "styled-components";
+import { previewSize as s, avatarSize as t } from "./constants.js";
+import { Box as d } from "../Box/Box.js";
+import { Flex as u } from "../Flex/Flex.js";
+import { Typography as m } from "../Typography/Typography.js";
+const x = o.img`
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  position: relative;
+`, f = o.img`
+  border-radius: 50%;
+  object-fit: cover;
+  position: absolute;
+  transform: translate(-${(s - t) / 2}px, -100%);
+  margin-top: -${({ theme: e }) => e.spaces[1]};
+`, g = o(d)`
+  opacity: 0.4;
+`, I = ({ src: e, alt: n, preview: r }) => {
+  const [c, p] = h.useState(!1), a = !!(r && c);
+  return l("span", { children: [a ? i(f, {
+    "aria-hidden": !0,
+    alt: "",
+    width: `${s}px`,
+    height: `${s}px`,
+    // eslint-disable-next-line no-nested-ternary
+    src: r === !0 ? e : typeof r == "string" ? r : ""
+  }) : null, l(d, { zIndex: a ? 1 : void 0, position: "relative", onMouseEnter: () => p(!0), onMouseLeave: () => p(!1), width: `${t}px`, height: `${t}px`, children: [a ? i(g, { background: "neutral0", borderRadius: "50%", position: "absolute", width: `${t}px`, height: `${t}px`, zIndex: 1 }) : null, i(x, { src: e, alt: n, width: `${t}px`, height: `${t}px` })] })] });
+}, b = o(u)`
+  span {
+    line-height: 0;
+  }
+`, S = ({ children: e, background: n = "primary600", textColor: r = "buttonNeutral0" }) => i(b, { background: n, borderRadius: "50%", width: `${t}px`, height: `${t}px`, justifyContent: "center", children: i(m, { fontSize: 0, fontWeight: "bold", textColor: r, textTransform: "uppercase", children: e }) });
+export {
+  I as Avatar,
+  S as Initials
+};

package/dist/Avatar/AvatarGroup.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),r=require("./constants.cjs"),a=require("../Flex/Flex.cjs"),o=t=>t&&t.__esModule?t:{default:t},l=o(e),s=l.default(a.Flex)`
+  & > * + * {
+    margin-left: -${r.avatarSize/2}px;
+  }
+`;exports.AvatarGroup=s;

package/dist/Avatar/AvatarGroup.js

@@ -0,0 +1,11 @@
+import r from "styled-components";
+import { avatarSize as o } from "./constants.js";
+import { Flex as t } from "../Flex/Flex.js";
+const e = r(t)`
+  & > * + * {
+    margin-left: -${o / 2}px;
+  }
+`;
+export {
+  e as AvatarGroup
+};

package/dist/Avatar/constants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=32,t=64;exports.avatarSize=e;exports.previewSize=t;

package/dist/Avatar/constants.js

@@ -0,0 +1,5 @@
+const e = 32, t = 64;
+export {
+  e as avatarSize,
+  t as previewSize
+};

package/dist/Avatar/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Avatar.cjs"),a=require("./AvatarGroup.cjs");exports.Avatar=r.Avatar;exports.Initials=r.Initials;exports.AvatarGroup=a.AvatarGroup;

package/dist/Avatar/index.js

@@ -0,0 +1,7 @@
+import { Avatar as o, Initials as t } from "./Avatar.js";
+import { AvatarGroup as e } from "./AvatarGroup.js";
+export {
+  o as Avatar,
+  e as AvatarGroup,
+  t as Initials
+};

package/dist/Badge/Badge.cjs

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("styled-components"),l=require("../Flex/Flex.cjs"),c=require("../Typography/Typography.cjs"),g=e=>e&&e.__esModule?e:{default:e},p=g(u),y=p.default(l.Flex)`
+  border-radius: ${({theme:e,size:t})=>t==="S"?"2px":e.borderRadius};
+  height: ${({size:e,theme:t})=>t.sizes.badge[e]};
+`,f=({active:e=!1,size:t="M",textColor:i="neutral600",backgroundColor:a="neutral150",children:d,minWidth:s=5,...o})=>{const r=t==="S"?1:2;return n.jsx(y,{inline:!0,alignItem:"center",justifyContent:"center",minWidth:s,paddingLeft:r,paddingRight:r,background:e?"primary200":a,size:t,...o,children:n.jsx(c.Typography,{variant:"sigma",textColor:e?"primary600":i,children:d})})};exports.Badge=f;

package/dist/Badge/Badge.js

@@ -0,0 +1,14 @@
+import { jsx as i } from "react/jsx-runtime";
+import p from "styled-components";
+import { Flex as s } from "../Flex/Flex.js";
+import { Typography as g } from "../Typography/Typography.js";
+const l = p(s)`
+  border-radius: ${({ theme: r, size: e }) => e === "S" ? "2px" : r.borderRadius};
+  height: ${({ size: r, theme: e }) => e.sizes.badge[r]};
+`, y = ({ active: r = !1, size: e = "M", textColor: n = "neutral600", backgroundColor: o = "neutral150", children: a, minWidth: d = 5, ...m }) => {
+  const t = e === "S" ? 1 : 2;
+  return i(l, { inline: !0, alignItem: "center", justifyContent: "center", minWidth: d, paddingLeft: t, paddingRight: t, background: r ? "primary200" : o, size: e, ...m, children: i(g, { variant: "sigma", textColor: r ? "primary600" : n, children: a }) });
+};
+export {
+  y as Badge
+};

package/dist/Badge/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Badge.cjs");exports.Badge=e.Badge;

package/dist/Badge/index.js

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