@strapi/design-system 1.3.0-beta.3 → 1.3.0

package/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2012-2022 Scott Chacon and others
+
+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/dist/Accordion/Accordion.cjs

@@ -0,0 +1,23 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("react"),b=require("prop-types"),m=require("styled-components"),n=require("../Typography/Typography.cjs"),h=require("./AccordionContext.cjs"),q=require("../helpers/useId.cjs"),p=require("../Box/Box.cjs"),_=require("../Flex/Flex.cjs"),c=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},a=c(v),r=c(b),f=c(m),A=({theme:o,expanded:e,variant:d,disabled:l,error:t})=>t?`1px solid ${o.colors.danger600} !important`:l?`1px solid ${o.colors.neutral150}`:e?`1px solid ${o.colors.primary600}`:d==="primary"?`1px solid ${o.colors.neutral0}`:`1px solid ${o.colors.neutral100}`,y=f.default(n.Typography)``,j=f.default(p.Box)`
+  border: ${A};
+
+  &:hover:not([aria-disabled='true']) {
+    border: 1px solid ${({theme:o})=>o.colors.primary600};
+
+    ${y} {
+      color: ${({theme:o,expanded:e})=>e?void 0:o.colors.primary700};
+    }
+
+    ${n.Typography} {
+      color: ${({theme:o,expanded:e})=>e?void 0:o.colors.primary600};
+    }
+
+    & > ${_.Flex} {
+      background: ${({theme:o})=>o.colors.primary100};
+    }
+
+    [data-strapi-dropdown='true'] {
+      background: ${({theme:o})=>o.colors.primary200};
+    }
+  }
+`,u=({children:o,expanded:e,id:d,size:l,variant:t,disabled:s,error:i,hasErrorMessage:g,onToggle:x,toggle:T})=>{const $=q.useId("accordion",d);return a.default.createElement(h.AccordionContext.Provider,{value:{expanded:e,onToggle:x,toggle:T,id:$,size:l,variant:t,disabled:s}},a.default.createElement(j,{"data-strapi-expanded":e,disabled:s,"aria-disabled":s,expanded:e,hasRadius:!0,variant:t,error:i},o),i&&g&&a.default.createElement(p.Box,{paddingTop:1},a.default.createElement(n.Typography,{variant:"pi",textColor:"danger600"},i)))};u.defaultProps={disabled:!1,error:void 0,expanded:!1,hasErrorMessage:!0,id:void 0,toggle:!1,size:"M",variant:"primary",onToggle:void 0,toggle:void 0};u.propTypes={children:r.default.node.isRequired,disabled:r.default.bool,error:r.default.string,expanded:r.default.bool,hasErrorMessage:r.default.bool,id:r.default.string,onToggle:r.default.func,size:r.default.oneOf(["S","M"]),toggle:r.default.func,variant:r.default.oneOf(["primary","secondary"])};exports.Accordion=u;exports.AccordionTypography=y;

package/dist/Accordion/Accordion.js

@@ -0,0 +1,88 @@
+import a from "react";
+import o from "prop-types";
+import p from "styled-components";
+import { Typography as l } from "../Typography/Typography.js";
+import { AccordionContext as $ } from "./AccordionContext.js";
+import { useId as x } from "../helpers/useId.js";
+import { Box as c } from "../Box/Box.js";
+import { Flex as v } from "../Flex/Flex.js";
+const b = ({ theme: r, expanded: e, variant: t, disabled: d, error: i }) => i ? `1px solid ${r.colors.danger600} !important` : d ? `1px solid ${r.colors.neutral150}` : e ? `1px solid ${r.colors.primary600}` : t === "primary" ? `1px solid ${r.colors.neutral0}` : `1px solid ${r.colors.neutral100}`, T = p(l)``, E = p(c)`
+  border: ${b};
+
+  &:hover:not([aria-disabled='true']) {
+    border: 1px solid ${({ theme: r }) => r.colors.primary600};
+
+    ${T} {
+      color: ${({ theme: r, expanded: e }) => e ? void 0 : r.colors.primary700};
+    }
+
+    ${l} {
+      color: ${({ theme: r, expanded: e }) => e ? void 0 : r.colors.primary600};
+    }
+
+    & > ${v} {
+      background: ${({ theme: r }) => r.colors.primary100};
+    }
+
+    [data-strapi-dropdown='true'] {
+      background: ${({ theme: r }) => r.colors.primary200};
+    }
+  }
+`, m = ({
+  children: r,
+  expanded: e,
+  id: t,
+  size: d,
+  variant: i,
+  disabled: n,
+  error: s,
+  hasErrorMessage: g,
+  onToggle: u,
+  toggle: f
+}) => {
+  const y = x("accordion", t);
+  return /* @__PURE__ */ a.createElement($.Provider, {
+    value: { expanded: e, onToggle: u, toggle: f, id: y, size: d, variant: i, disabled: n }
+  }, /* @__PURE__ */ a.createElement(E, {
+    "data-strapi-expanded": e,
+    disabled: n,
+    "aria-disabled": n,
+    expanded: e,
+    hasRadius: !0,
+    variant: i,
+    error: s
+  }, r), s && g && /* @__PURE__ */ a.createElement(c, {
+    paddingTop: 1
+  }, /* @__PURE__ */ a.createElement(l, {
+    variant: "pi",
+    textColor: "danger600"
+  }, s)));
+};
+m.defaultProps = {
+  disabled: !1,
+  error: void 0,
+  expanded: !1,
+  hasErrorMessage: !0,
+  id: void 0,
+  toggle: !1,
+  size: "M",
+  variant: "primary",
+  onToggle: void 0,
+  toggle: void 0
+};
+m.propTypes = {
+  children: o.node.isRequired,
+  disabled: o.bool,
+  error: o.string,
+  expanded: o.bool,
+  hasErrorMessage: o.bool,
+  id: o.string,
+  onToggle: o.func,
+  size: o.oneOf(["S", "M"]),
+  toggle: o.func,
+  variant: o.oneOf(["primary", "secondary"])
+};
+export {
+  m as Accordion,
+  T as AccordionTypography
+};

package/dist/Accordion/AccordionContent.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),l=require("prop-types"),u=require("./AccordionContext.cjs"),p=require("../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},f=t(s),b=t(l),c=({children:e,...n})=>{const{expanded:r,id:o}=u.useAccordion();if(!r)return null;const i=`accordion-content-${o}`,d=`accordion-label-${o}`,a=`accordion-desc-${o}`;return f.default.createElement(p.Box,{role:"region",id:i,"aria-labelledby":d,"aria-describedby":a,...n},e)};c.propTypes={children:b.default.node.isRequired};exports.AccordionContent=c;

package/dist/Accordion/AccordionContent.js

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

package/dist/Accordion/AccordionContext.cjs

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

package/dist/Accordion/AccordionContext.js

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

package/dist/Accordion/AccordionGroup.cjs

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

package/dist/Accordion/AccordionGroup.js

@@ -0,0 +1,91 @@
+import o, { Children as b, cloneElement as m } from "react";
+import t from "prop-types";
+import a from "styled-components";
+import { Box as d } from "../Box/Box.js";
+import { Typography as n } from "../Typography/Typography.js";
+import { Flex as $ } from "../Flex/Flex.js";
+import { KeyboardNavigable as f } from "../KeyboardNavigable/KeyboardNavigable.js";
+const g = a(d)`
+  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};
+`, x = a(d)`
+  & > * {
+    & > * {
+      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};
+      }
+    }
+  `}
+`, y = a(d)`
+  svg path {
+    fill: ${({ theme: r }) => r.colors.neutral500};
+  }
+`, p = ({ children: r, footer: e, label: l, labelAction: i, error: s }) => {
+  const u = b.toArray(r).map((c) => m(c, { hasErrorMessage: !1 }));
+  return /* @__PURE__ */ o.createElement(f, {
+    attributeName: "data-strapi-accordion-toggle"
+  }, l && /* @__PURE__ */ o.createElement($, {
+    paddingBottom: 1
+  }, /* @__PURE__ */ o.createElement(n, {
+    variant: "pi",
+    as: "label",
+    textColor: "neutral800",
+    fontWeight: "bold"
+  }, l), i && /* @__PURE__ */ o.createElement(y, {
+    paddingLeft: 1
+  }, i)), /* @__PURE__ */ o.createElement(x, {
+    footer: e
+  }, u), e && /* @__PURE__ */ o.createElement(g, null, e), s && /* @__PURE__ */ o.createElement(d, {
+    paddingTop: 1
+  }, /* @__PURE__ */ o.createElement(n, {
+    variant: "pi",
+    textColor: "danger600"
+  }, s)));
+};
+p.defaultProps = {
+  footer: null,
+  error: void 0,
+  label: null,
+  labelAction: void 0
+};
+p.propTypes = {
+  children: t.node.isRequired,
+  error: t.string,
+  footer: t.node,
+  label: t.string,
+  labelAction: t.node
+};
+export {
+  p as AccordionGroup
+};

package/dist/Accordion/AccordionToggle.cjs

@@ -0,0 +1,28 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("react"),P=require("prop-types"),F=require("@strapi/icons/CarretDown"),I=require("styled-components"),M=require("../TextButton/TextButton.cjs"),z=require("../Typography/Typography.cjs"),D=require("./Accordion.cjs"),W=require("./AccordionContext.cjs"),C=require("../Flex/Flex.cjs"),T=require("../Stack/Stack.cjs"),L=require("../Icon/Icon.cjs"),O=require("./utils.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(w),i=l(P),U=l(F),k=l(I),X=k.default(M.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:r})=>r?e.colors.primary600:e.colors.neutral500};
+    }
+  }
+`,Y=k.default(C.Flex)`
+  min-height: ${({theme:e,size:r})=>e.sizes.accordions[r]};
+  border-radius: ${({theme:e,expanded:r})=>r?`${e.borderRadius} ${e.borderRadius} 0 0`:e.borderRadius};
+
+  &:hover {
+    svg {
+      path {
+        fill: ${({theme:e})=>e.colors.primary600};
+      }
+    }
+  }
+`,u=({title:e,description:r,as:v,togglePosition:s,action:p,...$})=>{const g=w.useRef(null),{onToggle:f,toggle:y,expanded:o,id:d,size:n,variant:j,disabled:a}=W.useAccordion(),q=`accordion-content-${d}`,m=`accordion-label-${d}`,_=`accordion-desc-${d}`,c=n==="M"?6:4,h=n==="M"?c:c-2,R=O.getBackground({expanded:o,disabled:a,variant:j}),S={as:v,fontWeight:n==="S"?"bold":void 0,id:m,textColor:o?"primary600":"neutral700",ellipsis:!0,variant:n==="M"?"delta":void 0},A=o?"primary600":"neutral600",B=o?"primary200":"neutral200",x=n==="M"?`${32/16}rem`:`${24/16}rem`,E=()=>{a||(y&&!f?(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'),y()):f())},b=t.default.createElement(C.Flex,{justifyContent:"center",borderRadius:"50%",height:x,width:x,transform:o?"rotate(180deg)":void 0,"data-strapi-dropdown":!0,disabled:a,"aria-hidden":!0,as:"span",background:B,cursor:a?"not-allowed":"pointer",onClick:()=>g?.current?.click(),shrink:0},t.default.createElement(L.Icon,{as:U.default,width:n==="M"?`${11/16}rem`:`${8/16}rem`,color:o?"primary600":"neutral600"}));return t.default.createElement(Y,{paddingBottom:h,paddingLeft:c,paddingRight:c,paddingTop:h,background:R,expanded:o,size:n,justifyContent:"space-between",cursor:a?"not-allowed":""},t.default.createElement(T.Stack,{horizontal:!0,spacing:3,flex:1,maxWidth:"100%"},s==="left"&&b,t.default.createElement(X,{ref:g,onClick:E,"aria-disabled":a,"aria-expanded":o,"aria-controls":q,"aria-labelledby":m,"data-strapi-accordion-toggle":!0,expanded:o,type:"button",flex:1,minWidth:0,...$},t.default.createElement(t.default.Fragment,null,t.default.createElement(D.AccordionTypography,{...S},e),r&&t.default.createElement(z.Typography,{as:"p",id:_,textColor:A},r))),s==="right"&&t.default.createElement(T.Stack,{horizontal:!0,spacing:3},b,p),s==="left"&&p))};u.defaultProps={action:void 0,as:"span",description:void 0,variant:"primary",togglePosition:"right"};u.propTypes={action:i.default.node,as:i.default.string,description:i.default.string,title:i.default.string.isRequired,togglePosition:i.default.oneOf(["right","left"]),variant:i.default.oneOf(["primary","secondary"])};exports.AccordionToggle=u;

package/dist/Accordion/AccordionToggle.js

@@ -0,0 +1,127 @@
+import e, { useRef as A } from "react";
+import a from "prop-types";
+import I from "@strapi/icons/CarretDown";
+import x from "styled-components";
+import { TextButton as S } from "../TextButton/TextButton.js";
+import { Typography as W } from "../Typography/Typography.js";
+import { AccordionTypography as j } from "./Accordion.js";
+import { useAccordion as D } from "./AccordionContext.js";
+import { Flex as $ } from "../Flex/Flex.js";
+import { Stack as b } from "../Stack/Stack.js";
+import { Icon as F } from "../Icon/Icon.js";
+import { getBackground as L } from "./utils.js";
+const O = x(S)`
+  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: t }) => t ? o.colors.primary600 : o.colors.neutral500};
+    }
+  }
+`, _ = x($)`
+  min-height: ${({ theme: o, size: t }) => o.sizes.accordions[t]};
+  border-radius: ${({ theme: o, expanded: t }) => t ? `${o.borderRadius} ${o.borderRadius} 0 0` : o.borderRadius};
+
+  &:hover {
+    svg {
+      path {
+        fill: ${({ theme: o }) => o.colors.primary600};
+      }
+    }
+  }
+`, w = ({ title: o, description: t, as: v, togglePosition: l, action: c, ...C }) => {
+  const p = A(null), { onToggle: m, toggle: g, expanded: r, id: s, size: i, variant: T, disabled: n } = D(), k = `accordion-content-${s}`, u = `accordion-label-${s}`, E = `accordion-desc-${s}`, d = i === "M" ? 6 : 4, f = i === "M" ? d : d - 2, R = L({ expanded: r, disabled: n, variant: T }), z = {
+    as: v,
+    fontWeight: i === "S" ? "bold" : void 0,
+    id: u,
+    textColor: r ? "primary600" : "neutral700",
+    ellipsis: !0,
+    variant: i === "M" ? "delta" : void 0
+  }, B = r ? "primary600" : "neutral600", P = r ? "primary200" : "neutral200", h = i === "M" ? `${32 / 16}rem` : `${24 / 16}rem`, M = () => {
+    n || (g && !m ? (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'
+    ), g()) : m());
+  }, y = /* @__PURE__ */ e.createElement($, {
+    justifyContent: "center",
+    borderRadius: "50%",
+    height: h,
+    width: h,
+    transform: r ? "rotate(180deg)" : void 0,
+    "data-strapi-dropdown": !0,
+    disabled: n,
+    "aria-hidden": !0,
+    as: "span",
+    background: P,
+    cursor: n ? "not-allowed" : "pointer",
+    onClick: () => p?.current?.click(),
+    shrink: 0
+  }, /* @__PURE__ */ e.createElement(F, {
+    as: I,
+    width: i === "M" ? `${11 / 16}rem` : `${8 / 16}rem`,
+    color: r ? "primary600" : "neutral600"
+  }));
+  return /* @__PURE__ */ e.createElement(_, {
+    paddingBottom: f,
+    paddingLeft: d,
+    paddingRight: d,
+    paddingTop: f,
+    background: R,
+    expanded: r,
+    size: i,
+    justifyContent: "space-between",
+    cursor: n ? "not-allowed" : ""
+  }, /* @__PURE__ */ e.createElement(b, {
+    horizontal: !0,
+    spacing: 3,
+    flex: 1,
+    maxWidth: "100%"
+  }, l === "left" && y, /* @__PURE__ */ e.createElement(O, {
+    ref: p,
+    onClick: M,
+    "aria-disabled": n,
+    "aria-expanded": r,
+    "aria-controls": k,
+    "aria-labelledby": u,
+    "data-strapi-accordion-toggle": !0,
+    expanded: r,
+    type: "button",
+    flex: 1,
+    minWidth: 0,
+    ...C
+  }, /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(j, {
+    ...z
+  }, o), t && /* @__PURE__ */ e.createElement(W, {
+    as: "p",
+    id: E,
+    textColor: B
+  }, t))), l === "right" && /* @__PURE__ */ e.createElement(b, {
+    horizontal: !0,
+    spacing: 3
+  }, y, c), l === "left" && c));
+};
+w.defaultProps = {
+  action: void 0,
+  as: "span",
+  description: void 0,
+  variant: "primary",
+  togglePosition: "right"
+};
+w.propTypes = {
+  action: a.node,
+  as: a.string,
+  description: a.string,
+  title: a.string.isRequired,
+  togglePosition: a.oneOf(["right", "left"]),
+  variant: a.oneOf(["primary", "secondary"])
+};
+export {
+  w as AccordionToggle
+};

package/dist/Accordion/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=({expanded:r,disabled:t,variant:u})=>{let e;return r?e="primary100":t?e="neutral150":u==="primary"?e="neutral0":e="neutral100",e};exports.getBackground=l;

package/dist/Accordion/utils.js

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

package/dist/Alert/Alert.cjs

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react"),y=require("prop-types"),C=require("styled-components"),E=require("@strapi/icons/Information"),B=require("@strapi/icons/CheckCircle"),_=require("@strapi/icons/ExclamationMarkCircle"),q=require("@strapi/icons/Cross"),l=require("../Box/Box.cjs"),u=require("../Typography/Typography.cjs"),b=require("../Flex/Flex.cjs"),s=require("./utils.cjs"),T=require("../themes/utils.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(x),a=r(y),d=r(C),$=r(E),k=r(B),R=r(_),A=r(q),I=d.default(l.Box)`
+  flex: 1;
+  flex-wrap: wrap;
+  display: flex;
+  flex-direction: row;
+`,j=d.default(l.Box)`
+  border: 1px solid ${s.handleBorderColor};
+  background: ${s.handleBackgroundColor};
+  box-shadow: ${({theme:e})=>e.shadows.filterShadow};
+`,w=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]};
+  ${T.buttonFocusStyle};
+`,v=d.default(l.Box)`
+  font-size: ${20/16}rem;
+  svg path {
+    fill: ${s.handleIconColor};
+  }
+`,f=({variant:e,...o})=>e==="success"?t.default.createElement(k.default,{...o}):e==="danger"?t.default.createElement(R.default,{...o}):t.default.createElement($.default,{...o}),F=d.default(l.Box)`
+  // Checked with the designers, validated
+  padding-top: 1px;
+
+  & a > span {
+    color: ${s.handleIconColor};
+
+    svg path {
+      fill: ${s.handleIconColor};
+    }
+  }
+`,i=({title:e,children:o,variant:n,onClose:p,closeLabel:g,titleAs:h,action:c,...m})=>t.default.createElement(j,{hasRadius:!0,paddingLeft:5,paddingRight:6,paddingTop:5,variant:n,...m},t.default.createElement(b.Flex,{alignItems:"flex-start"},t.default.createElement(v,{paddingRight:3,variant:n},t.default.createElement(f,{variant:n,"aria-hidden":!0})),t.default.createElement(I,{role:n==="danger"?"alert":"status"},t.default.createElement(l.Box,{paddingBottom:2,paddingRight:1},t.default.createElement(u.Typography,{fontWeight:"bold",textColor:"neutral800",as:h},e)),t.default.createElement(l.Box,{paddingBottom:c?2:5,paddingRight:2},t.default.createElement(u.Typography,{as:"p",textColor:"neutral800"},o)),c&&t.default.createElement(F,{paddingBottom:5,variant:n},c)),t.default.createElement(w,{onClick:p,"aria-label":g},t.default.createElement(A.default,{"aria-hidden":!0}))));i.defaultProps={action:void 0,variant:"default",titleAs:"p"};i.propTypes={action:a.default.element,children:a.default.node.isRequired,closeLabel:a.default.string.isRequired,onClose:a.default.func.isRequired,title:a.default.string.isRequired,titleAs:a.default.string,variant:a.default.oneOf(["danger","success","default"])};f.propTypes={variant:i.propTypes.variant};exports.Alert=i;

package/dist/Alert/Alert.js

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

package/dist/Alert/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=({theme:r,variant:o})=>o==="danger"?r.colors.danger100:o==="success"?r.colors.success100:r.colors.primary100,c=({theme:r,variant:o})=>o==="danger"?r.colors.danger200:o==="success"?r.colors.success200:r.colors.primary200,e=({theme:r,variant:o})=>o==="danger"?r.colors.danger700:o==="success"?r.colors.success700:r.colors.primary700;exports.handleBackgroundColor=s;exports.handleBorderColor=c;exports.handleIconColor=e;