@strapi/design-system 0.0.0-jsoninput.0

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/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=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},a=c(v),o=c(b),y=c(m),A=({theme:r,expanded:e,variant:d,disabled:l,error:t})=>t?`1px solid ${r.colors.danger600} !important`:l?`1px solid ${r.colors.neutral150}`:e?`1px solid ${r.colors.primary600}`:d==="primary"?`1px solid ${r.colors.neutral0}`:`1px solid ${r.colors.neutral100}`,f=y.default(n.Typography)``,j=y.default(p.Box)`
+  border: ${A};
+
+  &:hover:not([aria-disabled='true']) {
+    border: 1px solid ${({theme:r})=>r.colors.primary600};
+
+    ${f} {
+      color: ${({theme:r,expanded:e})=>e?void 0:r.colors.primary700};
+    }
+
+    ${n.Typography} {
+      color: ${({theme:r,expanded:e})=>e?void 0:r.colors.primary600};
+    }
+
+    & > ${_.Flex} {
+      background: ${({theme:r})=>r.colors.primary100};
+    }
+
+    [data-strapi-dropdown='true'] {
+      background: ${({theme:r})=>r.colors.primary200};
+    }
+  }
+`,u=({children:r,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},r),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:void 0,size:"M",variant:"primary",onToggle:void 0};u.propTypes={children:o.default.node.isRequired,disabled:o.default.bool,error:o.default.string,expanded:o.default.bool,hasErrorMessage:o.default.bool,id:o.default.string,onToggle:o.default.func,size:o.default.oneOf(["S","M"]),toggle:o.default.func,variant:o.default.oneOf(["primary","secondary"])};exports.Accordion=u;exports.AccordionTypography=f;

package/dist/Accordion/Accordion.js

@@ -0,0 +1,87 @@
+import a from "react";
+import o from "prop-types";
+import l from "styled-components";
+import { Typography as p } 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 = l(p)``, E = l(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};
+    }
+
+    ${p} {
+      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: u,
+  onToggle: g,
+  toggle: f
+}) => {
+  const y = x("accordion", t);
+  return /* @__PURE__ */ a.createElement($.Provider, {
+    value: { expanded: e, onToggle: g, 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 && u && /* @__PURE__ */ a.createElement(c, {
+    paddingTop: 1
+  }, /* @__PURE__ */ a.createElement(p, {
+    variant: "pi",
+    textColor: "danger600"
+  }, s)));
+};
+m.defaultProps = {
+  disabled: !1,
+  error: void 0,
+  expanded: !1,
+  hasErrorMessage: !0,
+  id: void 0,
+  toggle: void 0,
+  size: "M",
+  variant: "primary",
+  onToggle: 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";var _=Object.defineProperty;var n=Object.getOwnPropertySymbols;var d=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;var i=(e,o,t)=>o in e?_(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,s=(e,o)=>{for(var t in o||(o={}))d.call(o,t)&&i(e,t,o[t]);if(n)for(var t of n(o))a.call(o,t)&&i(e,t,o[t]);return e};var l=(e,o)=>{var t={};for(var c in e)d.call(e,c)&&o.indexOf(c)<0&&(t[c]=e[c]);if(e!=null&&n)for(var c of n(e))o.indexOf(c)<0&&a.call(e,c)&&(t[c]=e[c]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("react"),A=require("prop-types"),C=require("./AccordionContext.cjs"),g=require("../Box/Box.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},j=u(q),B=u(A),p=t=>{var c=t,{children:e}=c,o=l(c,["children"]);const{expanded:f,id:r}=C.useAccordion();if(!f)return null;const b=`accordion-content-${r}`,y=`accordion-label-${r}`,x=`accordion-desc-${r}`;return j.default.createElement(g.Box,s({role:"region",id:b,"aria-labelledby":y,"aria-describedby":x},o),e)};p.propTypes={children:B.default.node.isRequired};exports.AccordionContent=p;

package/dist/Accordion/AccordionContent.js

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

package/dist/Accordion/AccordionToggle.js

@@ -0,0 +1,148 @@
+var O = Object.defineProperty;
+var p = Object.getOwnPropertySymbols;
+var T = Object.prototype.hasOwnProperty, k = Object.prototype.propertyIsEnumerable;
+var C = (o, e, r) => e in o ? O(o, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[e] = r, g = (o, e) => {
+  for (var r in e || (e = {}))
+    T.call(e, r) && C(o, r, e[r]);
+  if (p)
+    for (var r of p(e))
+      k.call(e, r) && C(o, r, e[r]);
+  return o;
+};
+var E = (o, e) => {
+  var r = {};
+  for (var t in o)
+    T.call(o, t) && e.indexOf(t) < 0 && (r[t] = o[t]);
+  if (o != null && p)
+    for (var t of p(o))
+      e.indexOf(t) < 0 && k.call(o, t) && (r[t] = o[t]);
+  return r;
+};
+import i, { useRef as _ } from "react";
+import l from "prop-types";
+import q from "@strapi/icons/CarretDown";
+import z from "styled-components";
+import { TextButton as U } from "../TextButton/TextButton.js";
+import { Typography as X } from "../Typography/Typography.js";
+import { AccordionTypography as Y } from "./Accordion.js";
+import { useAccordion as G } from "./AccordionContext.js";
+import { Flex as P } from "../Flex/Flex.js";
+import { Stack as R } from "../Stack/Stack.js";
+import { Icon as H } from "../Icon/Icon.js";
+import { getBackground as J } from "./utils.js";
+const K = z(U)`
+  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};
+    }
+  }
+`, N = z(P)`
+  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};
+      }
+    }
+  }
+`, M = (Q) => {
+  var f = Q, { title: o, description: e, as: r, togglePosition: t, action: u } = f, A = E(f, ["title", "description", "as", "togglePosition", "action"]);
+  const s = _(null), { onToggle: h, toggle: y, expanded: n, id: m, size: a, variant: B, disabled: d } = G(), I = `accordion-content-${m}`, b = `accordion-label-${m}`, S = `accordion-desc-${m}`, c = a === "M" ? 6 : 4, x = a === "M" ? c : c - 2, W = J({ expanded: n, disabled: d, variant: B }), j = {
+    as: r,
+    fontWeight: a === "S" ? "bold" : void 0,
+    id: b,
+    textColor: n ? "primary600" : "neutral700",
+    ellipsis: !0,
+    variant: a === "M" ? "delta" : void 0
+  }, D = n ? "primary600" : "neutral600", F = n ? "primary200" : "neutral200", $ = a === "M" ? `${32 / 16}rem` : `${24 / 16}rem`, L = () => {
+    d || (y && !h ? (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()) : h());
+  }, w = /* @__PURE__ */ i.createElement(P, {
+    justifyContent: "center",
+    borderRadius: "50%",
+    height: $,
+    width: $,
+    transform: n ? "rotate(180deg)" : void 0,
+    "data-strapi-dropdown": !0,
+    disabled: d,
+    "aria-hidden": !0,
+    as: "span",
+    background: F,
+    cursor: d ? "not-allowed" : "pointer",
+    onClick: () => {
+      var v;
+      return (v = s == null ? void 0 : s.current) == null ? void 0 : v.click();
+    },
+    shrink: 0
+  }, /* @__PURE__ */ i.createElement(H, {
+    as: q,
+    width: a === "M" ? `${11 / 16}rem` : `${8 / 16}rem`,
+    color: n ? "primary600" : "neutral600"
+  }));
+  return /* @__PURE__ */ i.createElement(N, {
+    paddingBottom: x,
+    paddingLeft: c,
+    paddingRight: c,
+    paddingTop: x,
+    background: W,
+    expanded: n,
+    size: a,
+    justifyContent: "space-between",
+    cursor: d ? "not-allowed" : ""
+  }, /* @__PURE__ */ i.createElement(R, {
+    horizontal: !0,
+    spacing: 3,
+    flex: 1,
+    maxWidth: "100%"
+  }, t === "left" && w, /* @__PURE__ */ i.createElement(K, g({
+    ref: s,
+    onClick: L,
+    "aria-disabled": d,
+    "aria-expanded": n,
+    "aria-controls": I,
+    "aria-labelledby": b,
+    "data-strapi-accordion-toggle": !0,
+    expanded: n,
+    type: "button",
+    flex: 1,
+    minWidth: 0
+  }, A), /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(Y, g({}, j), o), e && /* @__PURE__ */ i.createElement(X, {
+    as: "p",
+    id: S,
+    textColor: D
+  }, e))), t === "right" && /* @__PURE__ */ i.createElement(R, {
+    horizontal: !0,
+    spacing: 3
+  }, w, u), t === "left" && u));
+};
+M.defaultProps = {
+  action: void 0,
+  as: "span",
+  description: void 0,
+  variant: "primary",
+  togglePosition: "right"
+};
+M.propTypes = {
+  action: l.node,
+  as: l.string,
+  description: l.string,
+  title: l.string.isRequired,
+  togglePosition: l.oneOf(["right", "left"]),
+  variant: l.oneOf(["primary", "secondary"])
+};
+export {
+  M 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";var b=Object.defineProperty;var u=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var m=(e,r,t)=>r in e?b(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,d=(e,r)=>{for(var t in r||(r={}))x.call(r,t)&&m(e,t,r[t]);if(u)for(var t of u(r))y.call(r,t)&&m(e,t,r[t]);return e};var g=(e,r)=>{var t={};for(var l in e)x.call(e,l)&&r.indexOf(l)<0&&(t[l]=e[l]);if(e!=null&&u)for(var l of u(e))r.indexOf(l)<0&&y.call(e,l)&&(t[l]=e[l]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const R=require("react"),T=require("prop-types"),$=require("styled-components"),k=require("@strapi/icons/Information"),w=require("@strapi/icons/CheckCircle"),A=require("@strapi/icons/ExclamationMarkCircle"),I=require("@strapi/icons/Cross"),s=require("../Box/Box.cjs"),C=require("../Typography/Typography.cjs"),j=require("../Flex/Flex.cjs"),i=require("./utils.cjs"),v=require("../themes/utils.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=n(R),o=n(T),c=n($),F=n(k),M=n(w),P=n(A),S=n(I),L=c.default(s.Box)`
+  flex: 1;
+  flex-wrap: wrap;
+  display: flex;
+  flex-direction: row;
+`,W=c.default(s.Box)`
+  border: 1px solid ${i.handleBorderColor};
+  background: ${i.handleBackgroundColor};
+  box-shadow: ${({theme:e})=>e.shadows.filterShadow};
+`,z=c.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]};
+  ${v.buttonFocusStyle};
+`,O=c.default(s.Box)`
+  font-size: ${20/16}rem;
+  svg path {
+    fill: ${i.handleIconColor};
+  }
+`,E=t=>{var l=t,{variant:e}=l,r=g(l,["variant"]);return e==="success"?a.default.createElement(M.default,d({},r)):e==="danger"||e==="warning"?a.default.createElement(P.default,d({},r)):a.default.createElement(F.default,d({},r))},D=c.default(s.Box)`
+  // Checked with the designers, validated
+  padding-top: 1px;
+
+  & a > span {
+    color: ${i.handleIconColor};
+
+    svg path {
+      fill: ${i.handleIconColor};
+    }
+  }
+`,f=G=>{var h=G,{title:e,children:r,variant:t,onClose:l,closeLabel:q,titleAs:B,action:p}=h,_=g(h,["title","children","variant","onClose","closeLabel","titleAs","action"]);return a.default.createElement(W,d({hasRadius:!0,paddingLeft:5,paddingRight:6,paddingTop:5,variant:t},_),a.default.createElement(j.Flex,{alignItems:"flex-start"},a.default.createElement(O,{paddingRight:3,variant:t},a.default.createElement(E,{variant:t,"aria-hidden":!0})),a.default.createElement(L,{role:t==="danger"?"alert":"status"},a.default.createElement(s.Box,{paddingBottom:2,paddingRight:1},a.default.createElement(C.Typography,{fontWeight:"bold",textColor:"neutral800",as:B},e)),a.default.createElement(s.Box,{paddingBottom:p?2:5,paddingRight:2},a.default.createElement(C.Typography,{as:"p",textColor:"neutral800"},r)),p&&a.default.createElement(D,{paddingBottom:5,variant:t},p)),a.default.createElement(z,{onClick:l,"aria-label":q},a.default.createElement(S.default,{"aria-hidden":!0}))))};f.defaultProps={action:void 0,variant:"default",titleAs:"p"};f.propTypes={action:o.default.element,children:o.default.node.isRequired,closeLabel:o.default.string.isRequired,onClose:o.default.func.isRequired,title:o.default.string.isRequired,titleAs:o.default.string,variant:o.default.oneOf(["danger","success","default","warning"])};E.propTypes={variant:f.propTypes.variant.isRequired};exports.Alert=f;