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

package/src/Switch/Switch.stories.mdx

@@ -1,5 +1,6 @@
 <!--- Switch.stories.mdx --->
 
+import { useState } from 'react';
 import { Meta, Story, Canvas } from '@storybook/addon-docs';
 import { ArgsTable } from '@storybook/addon-docs';
 import { Switch } from './Switch';
@@ -36,7 +37,17 @@ Activated state is one of two of them available for a Switch.
 
 <Canvas>
   <Story name="activated">
-    <Switch label="Activate the microphone" selected={true} onChange={() => setChecked((s) => !s)} visibleLabels />
+    {() => {
+      const [activated, setActivated] = useState(true);
+      return (
+        <Switch
+          label="Activate the microphone"
+          selected={activated}
+          onChange={() => setActivated((s) => !s)}
+          visibleLabels
+        />
+      );
+    }}
   </Story>
 </Canvas>
 
@@ -46,7 +57,17 @@ Deactivated state is one of two of them available for a Switch.
 
 <Canvas>
   <Story name="not-activated">
-    <Switch label="Activate the microphone" selected={false} onChange={() => setChecked((s) => !s)} visibleLabels />
+    {() => {
+      const [activated, setActivated] = useState(false);
+      return (
+        <Switch
+          label="Activate the microphone"
+          selected={activated}
+          onChange={() => setActivated((s) => !s)}
+          visibleLabels
+        />
+      );
+    }}
   </Story>
 </Canvas>
 

package/webpack.config.js

@@ -0,0 +1,84 @@
+const fs = require('fs');
+const path = require('path');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const packageJSON = require('./package.json');
+const excludedFolders = require('../../tools/excludedFolders');
+
+const isV2Build = process.env.IS_V2 === 'true';
+
+const distPath = path.join(__dirname, 'dist');
+let outputPath = distPath;
+let entryFolder = path.join(__dirname, 'src');
+
+if (isV2Build) {
+  outputPath = path.join(distPath, 'v2');
+  entryFolder = path.join(__dirname, 'src', 'v2');
+}
+
+const fileNames = fs.readdirSync(path.resolve(entryFolder));
+const entry = fileNames
+  .filter((name) => !excludedFolders.includes(name))
+  .reduce((acc, curr) => {
+    if (curr.includes('.js')) {
+      acc[curr.replace('.js', '')] = path.resolve(entryFolder);
+    } else {
+      acc[curr] = path.resolve(entryFolder, curr);
+    }
+
+    return acc;
+  }, {});
+
+// Plugin section
+const analyzePlugins = [];
+
+if (process.env.BUNDLE_ANALYZE) {
+  analyzePlugins.push(new BundleAnalyzerPlugin());
+}
+
+const externalNodeModules = [];
+[...Object.keys(packageJSON.peerDependencies)].forEach((module) => {
+  externalNodeModules.push(new RegExp(`^${module}(/.+)?$`));
+});
+
+module.exports = {
+  entry,
+  mode: process.env.NODE_ENV,
+  devtool: process.env.NODE_ENV === 'development' ? 'eval-source-map' : false,
+  output: {
+    filename: `[name].${process.env.NODE_ENV}.js`,
+    path: outputPath,
+    libraryTarget: 'umd',
+    globalObject: 'this',
+    library: 'strapiDs',
+    umdNamedDefine: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: [/(node_modules)/],
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+      {
+        test: /\.(png|jpg|svg)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [].concat(analyzePlugins),
+  externals: externalNodeModules,
+  resolve: {
+    alias: {
+      '@strapi/icons': path.dirname(require.resolve('../strapi-icons/dist')),
+    },
+  },
+};

package/.eslintrc

@@ -1,34 +0,0 @@
-{
-  "parserOptions": {
-    "ecmaVersion": 2020, // Allows for the parsing of modern ECMAScript features
-    "sourceType": "module", // Allows for the use of imports
-    "ecmaFeatures": {
-      "jsx": true // Allows for the parsing of JSX
-    }
-  },
-  "settings": {
-    "react": {
-      "version": "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
-    }
-  },
-  "extends": [
-    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
-    "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
-  ],
-  "rules": {
-    "react/sort-prop-types": 1,
-    "default-case": "error",
-    "no-unused-vars": ["error", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
-    "no-console": ["error", { "allow": ["warn", "error"] }]
-  },
-  "overrides": [
-    {
-      "files": "*.mdx",
-      "parser": "eslint-mdx",
-      "rules": {
-        "react/react-in-jsx-scope": "off",
-        "no-console": 0
-      }
-    }
-  ]
-}

package/.prettierrc

@@ -1,7 +0,0 @@
-{
-  "semi": true,
-  "trailingComma": "all",
-  "singleQuote": true,
-  "printWidth": 120,
-  "tabWidth": 2
-}

package/dist/Accordion/Accordion.cjs

@@ -1,23 +0,0 @@
-"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,size:"M",variant:"primary",onToggle:void 0,toggle: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

@@ -1,87 +0,0 @@
-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,
-  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

@@ -1 +0,0 @@
-"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

@@ -1,23 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,6 +0,0 @@
-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

@@ -1,47 +0,0 @@
-"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

@@ -1,91 +0,0 @@
-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

@@ -1,28 +0,0 @@
-"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

@@ -1,127 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,11 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-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
-};