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

package/dist/BaseCheckbox/assets/checkmark.js

@@ -0,0 +1,4 @@
+const M = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=";
+export {
+  M as default
+};

package/dist/BaseCheckbox/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./BaseCheckbox.cjs");exports.BaseCheckbox=e.BaseCheckbox;

package/dist/BaseCheckbox/index.js

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

package/dist/BaseCheckbox/utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=({size:e})=>e==="M"?"18px":"20px";exports.getCheckboxSize=t;

package/dist/BaseCheckbox/utils.js

@@ -0,0 +1,4 @@
+const r = ({ size: e }) => e === "M" ? "18px" : "20px";
+export {
+  r as getCheckboxSize
+};

package/dist/BaseLink/BaseLink.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),c=require("prop-types"),p=require("styled-components"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=a(i),t=a(c),y=a(p),_=y.default.a`
+  cursor: pointer;
+`,r=s.default.forwardRef(({href:e,rel:n,target:d,disabled:l,isExternal:o,...f},u)=>s.default.createElement(_,{ref:u,target:o?"_blank":d,rel:o?n:void 0,href:l?"#":e,disabled:l,...f}));r.displayName="BaseLink";r.defaultProps={disabled:!1,href:void 0,isExternal:!1,rel:"noreferrer noopener",target:"_self"};r.propTypes={disabled:t.default.bool,href:t.default.string,isExternal:t.default.bool,rel:t.default.string,target:t.default.string};exports.BaseLink=r;

package/dist/BaseLink/BaseLink.js

@@ -0,0 +1,31 @@
+import a from "react";
+import e from "prop-types";
+import p from "styled-components";
+const d = p.a`
+  cursor: pointer;
+`, r = a.forwardRef(({ href: s, rel: l, target: n, disabled: o, isExternal: t, ...f }, i) => /* @__PURE__ */ a.createElement(d, {
+  ref: i,
+  target: t ? "_blank" : n,
+  rel: t ? l : void 0,
+  href: o ? "#" : s,
+  disabled: o,
+  ...f
+}));
+r.displayName = "BaseLink";
+r.defaultProps = {
+  disabled: !1,
+  href: void 0,
+  isExternal: !1,
+  rel: "noreferrer noopener",
+  target: "_self"
+};
+r.propTypes = {
+  disabled: e.bool,
+  href: e.string,
+  isExternal: e.bool,
+  rel: e.string,
+  target: e.string
+};
+export {
+  r as BaseLink
+};

package/dist/BaseLink/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./BaseLink.cjs");exports.BaseLink=e.BaseLink;

package/dist/BaseLink/index.js

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

package/dist/BaseRadio/BaseRadio.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),g=require("prop-types"),y=require("styled-components"),R=require("./context.cjs"),t=require("./utils.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=d(s),r=d(g),S=d(y),$=S.default.input`
+  margin: 0;
+  padding: 0;
+  background-color: ${({theme:e})=>e.colors.neutral0};
+  border: 1px solid ${({theme:e})=>e.colors.primary600};
+  border-radius: 50%;
+  height: ${t.getRadioSize};
+  width: ${t.getRadioSize};
+  -webkit-appearance: none;
+
+  &:after {
+    border-radius: 50%;
+    content: '';
+    position: relative;
+    z-index: 1;
+    display: block;
+    height: ${t.getSelectedRadioSize};
+    width: ${t.getSelectedRadioSize};
+    left: ${t.getSelectedRadioPosition};
+    top: ${t.getSelectedRadioPosition};
+  }
+
+  &:checked:after {
+    background: ${({theme:e})=>e.colors.primary600};
+  }
+
+  &:disabled {
+    border: 1px solid ${({theme:e})=>e.colors.carbon300};
+    background: ${({theme:e})=>e.colors.neutral200};
+  }
+`,o=i.default.forwardRef(({value:e,disabled:c,...l},n)=>{const{onChange:u,selected:p,name:f,size:b}=s.useContext(R.RadioContext),a=p===e;return i.default.createElement($,{ref:n,type:"radio",name:f,value:e,tabIndex:a?0:-1,"aria-checked":a,checked:a,disabled:c,size:b,onChange:u,...l})});o.displayName="Radio";o.defaultProps={disabled:!1};o.propTypes={disabled:r.default.bool,value:r.default.string.isRequired};exports.BaseRadio=o;

package/dist/BaseRadio/BaseRadio.js

@@ -0,0 +1,62 @@
+import t, { useContext as f } from "react";
+import i from "prop-types";
+import g from "styled-components";
+import { RadioContext as $ } from "./context.js";
+import { getRadioSize as d, getSelectedRadioSize as a, getSelectedRadioPosition as s } from "./utils.js";
+const h = g.input`
+  margin: 0;
+  padding: 0;
+  background-color: ${({ theme: e }) => e.colors.neutral0};
+  border: 1px solid ${({ theme: e }) => e.colors.primary600};
+  border-radius: 50%;
+  height: ${d};
+  width: ${d};
+  -webkit-appearance: none;
+
+  &:after {
+    border-radius: 50%;
+    content: '';
+    position: relative;
+    z-index: 1;
+    display: block;
+    height: ${a};
+    width: ${a};
+    left: ${s};
+    top: ${s};
+  }
+
+  &:checked:after {
+    background: ${({ theme: e }) => e.colors.primary600};
+  }
+
+  &:disabled {
+    border: 1px solid ${({ theme: e }) => e.colors.carbon300};
+    background: ${({ theme: e }) => e.colors.neutral200};
+  }
+`, r = t.forwardRef(({ value: e, disabled: n, ...c }, l) => {
+  const { onChange: p, selected: m, name: b, size: u } = f($), o = m === e;
+  return /* @__PURE__ */ t.createElement(h, {
+    ref: l,
+    type: "radio",
+    name: b,
+    value: e,
+    tabIndex: o ? 0 : -1,
+    "aria-checked": o,
+    checked: o,
+    disabled: n,
+    size: u,
+    onChange: p,
+    ...c
+  });
+});
+r.displayName = "Radio";
+r.defaultProps = {
+  disabled: !1
+};
+r.propTypes = {
+  disabled: i.bool,
+  value: i.string.isRequired
+};
+export {
+  r as BaseRadio
+};

package/dist/BaseRadio/RadioGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),p=require("prop-types"),R=require("./context.cjs"),y=require("../helpers/setTabIndexOnFirstItem.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=i(o),t=i(p),u=({children:e,labelledBy:d,onChange:l,value:r,size:c,name:a,...f})=>{const s=o.useRef(null);return o.useLayoutEffect(()=>{r||y.setTabIndexOnFirstItem(s.current,`[name="${a}"]`)},[r]),n.default.createElement(R.RadioContext.Provider,{value:{onChange:l,selected:r,name:a,size:c}},n.default.createElement("div",{ref:s,role:"radiogroup","aria-labelledby":d,...f},e))};u.defaultProps={value:"",size:"M"};u.propTypes={children:t.default.node.isRequired,labelledBy:t.default.string.isRequired,name:t.default.string.isRequired,onChange:t.default.func.isRequired,size:t.default.oneOf(["M","L"]),value:t.default.string};exports.RadioGroup=u;

package/dist/BaseRadio/RadioGroup.js

@@ -0,0 +1,32 @@
+import t, { useRef as f, useLayoutEffect as p } from "react";
+import e from "prop-types";
+import { RadioContext as m } from "./context.js";
+import { setTabIndexOnFirstItem as c } from "../helpers/setTabIndexOnFirstItem.js";
+const n = ({ children: s, labelledBy: a, onChange: d, value: r, size: u, name: o, ...l }) => {
+  const i = f(null);
+  return p(() => {
+    r || c(i.current, `[name="${o}"]`);
+  }, [r]), /* @__PURE__ */ t.createElement(m.Provider, {
+    value: { onChange: d, selected: r, name: o, size: u }
+  }, /* @__PURE__ */ t.createElement("div", {
+    ref: i,
+    role: "radiogroup",
+    "aria-labelledby": a,
+    ...l
+  }, s));
+};
+n.defaultProps = {
+  value: "",
+  size: "M"
+};
+n.propTypes = {
+  children: e.node.isRequired,
+  labelledBy: e.string.isRequired,
+  name: e.string.isRequired,
+  onChange: e.func.isRequired,
+  size: e.oneOf(["M", "L"]),
+  value: e.string
+};
+export {
+  n as RadioGroup
+};

package/dist/BaseRadio/context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext({onChange:()=>{},name:"",size:"M"});exports.RadioContext=t;

package/dist/BaseRadio/context.js

@@ -0,0 +1,6 @@
+import { createContext as o } from "react";
+const t = o({ onChange: () => {
+}, name: "", size: "M" });
+export {
+  t as RadioContext
+};

package/dist/BaseRadio/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./BaseRadio.cjs"),o=require("./RadioGroup.cjs");exports.BaseRadio=e.BaseRadio;exports.RadioGroup=o.RadioGroup;

package/dist/BaseRadio/index.js

@@ -0,0 +1,6 @@
+import { BaseRadio as a } from "./BaseRadio.js";
+import { RadioGroup as p } from "./RadioGroup.js";
+export {
+  a as BaseRadio,
+  p as RadioGroup
+};

package/dist/BaseRadio/utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=({size:e})=>e==="M"?"18px":"20px",i=({size:e})=>e==="M"?"10px":"12px",o=()=>"3px";exports.getRadioSize=t;exports.getSelectedRadioPosition=o;exports.getSelectedRadioSize=i;

package/dist/BaseRadio/utils.js

@@ -0,0 +1,6 @@
+const t = ({ size: e }) => e === "M" ? "18px" : "20px", r = ({ size: e }) => e === "M" ? "10px" : "12px", i = () => "3px";
+export {
+  t as getRadioSize,
+  i as getSelectedRadioPosition,
+  r as getSelectedRadioSize
+};

package/dist/Box/Box.cjs

@@ -0,0 +1,80 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),s=require("../helpers/handleResponsiveValues.cjs"),t=require("./BoxProps.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},$=d(n),l={color:!0},i=$.default.div.withConfig({shouldForwardProp:(e,o)=>!l[e]&&o(e)})`
+  // Font
+  font-size: ${({fontSize:e,theme:o})=>o.fontSizes[e]||e};
+
+  // Colors
+  background: ${({theme:e,background:o})=>e.colors[o]};
+  color: ${({theme:e,color:o})=>e.colors[o]};
+
+  // Spaces
+  ${({theme:e,padding:o})=>s("padding",o,e)}
+  ${({theme:e,paddingTop:o})=>s("padding-top",o,e)}
+  ${({theme:e,paddingRight:o})=>s("padding-right",o,e)}
+  ${({theme:e,paddingBottom:o})=>s("padding-bottom",o,e)}
+  ${({theme:e,paddingLeft:o})=>s("padding-left",o,e)}
+  ${({theme:e,marginLeft:o})=>s("margin-left",o,e)}
+  ${({theme:e,marginRight:o})=>s("margin-right",o,e)}
+  ${({theme:e,marginTop:o})=>s("margin-top",o,e)}
+  ${({theme:e,marginBottom:o})=>s("margin-bottom",o,e)}
+
+  // Responsive hiding
+  ${({theme:e,hiddenS:o})=>o?`${e.mediaQueries.tablet} { display: none; }`:void 0}
+  ${({theme:e,hiddenXS:o})=>o?`${e.mediaQueries.mobile} { display: none; }`:void 0}
+  
+
+  // Borders
+  border-radius: ${({theme:e,hasRadius:o,borderRadius:r})=>o?e.borderRadius:r};
+  border-style: ${({borderStyle:e})=>e};
+  border-width: ${({borderWidth:e})=>e};
+  border-color: ${({borderColor:e,theme:o})=>o.colors[e]};
+  border: ${({theme:e,borderColor:o,borderStyle:r,borderWidth:a})=>{if(o&&!r&&!a)return`1px solid ${e.colors[o]}`}};
+
+  // Shadows
+  box-shadow: ${({theme:e,shadow:o})=>e.shadows[o]};
+
+  // Handlers
+  pointer-events: ${({pointerEvents:e})=>e};
+  &:hover {
+    ${({_hover:e,theme:o})=>e?e(o):void 0}
+  }
+
+  // Display
+  display: ${({display:e})=>e};
+
+  // Position
+  position: ${({position:e})=>e};
+  left: ${({left:e,theme:o})=>o.spaces[e]||e};
+  right: ${({right:e,theme:o})=>o.spaces[e]||e};
+  top: ${({top:e,theme:o})=>o.spaces[e]||e};
+  bottom: ${({bottom:e,theme:o})=>o.spaces[e]||e};
+  z-index: ${({zIndex:e})=>e};
+  overflow: ${({overflow:e})=>e};
+  cursor: ${({cursor:e})=>e};
+
+  // Size
+  width: ${({width:e,theme:o})=>o.spaces[e]||e};
+  max-width: ${({maxWidth:e,theme:o})=>o.spaces[e]||e};
+  min-width: ${({minWidth:e,theme:o})=>o.spaces[e]||e};
+  height: ${({height:e,theme:o})=>o.spaces[e]||e};
+  max-height: ${({maxHeight:e,theme:o})=>o.spaces[e]||e};
+  min-height: ${({minHeight:e,theme:o})=>o.spaces[e]||e};
+
+  // Animation
+  transition: ${({transition:e})=>e};
+  transform: ${({transform:e})=>e};
+  animation: ${({animation:e})=>e};
+
+  //Flexbox children props
+  flex-shrink: ${({shrink:e})=>e};
+  flex-grow: ${({grow:e})=>e};
+  flex-basis: ${({basis:e})=>e};
+  flex: ${({flex:e})=>e};
+
+  // Text
+  text-align: ${({textAlign:e})=>e};
+  text-transform: ${({textTransform:e})=>e};
+  line-height: ${({lineHeight:e})=>e};
+
+  // Cursor
+  cursor: ${({cursor:e})=>e};
+`;i.defaultProps=t.boxDefaultProps;i.propTypes=t.boxPropTypes;exports.Box=i;

package/dist/Box/Box.js

@@ -0,0 +1,95 @@
+import a from "styled-components";
+import r from "../helpers/handleResponsiveValues.js";
+import { boxDefaultProps as t, boxPropTypes as n } from "./BoxProps.js";
+const d = {
+  color: !0
+}, i = a.div.withConfig({
+  shouldForwardProp: (o, s) => !d[o] && s(o)
+})`
+  // Font
+  font-size: ${({ fontSize: o, theme: s }) => s.fontSizes[o] || o};
+
+  // Colors
+  background: ${({ theme: o, background: s }) => o.colors[s]};
+  color: ${({ theme: o, color: s }) => o.colors[s]};
+
+  // Spaces
+  ${({ theme: o, padding: s }) => r("padding", s, o)}
+  ${({ theme: o, paddingTop: s }) => r("padding-top", s, o)}
+  ${({ theme: o, paddingRight: s }) => r("padding-right", s, o)}
+  ${({ theme: o, paddingBottom: s }) => r("padding-bottom", s, o)}
+  ${({ theme: o, paddingLeft: s }) => r("padding-left", s, o)}
+  ${({ theme: o, marginLeft: s }) => r("margin-left", s, o)}
+  ${({ theme: o, marginRight: s }) => r("margin-right", s, o)}
+  ${({ theme: o, marginTop: s }) => r("margin-top", s, o)}
+  ${({ theme: o, marginBottom: s }) => r("margin-bottom", s, o)}
+
+  // Responsive hiding
+  ${({ theme: o, hiddenS: s }) => s ? `${o.mediaQueries.tablet} { display: none; }` : void 0}
+  ${({ theme: o, hiddenXS: s }) => s ? `${o.mediaQueries.mobile} { display: none; }` : void 0}
+  
+
+  // Borders
+  border-radius: ${({ theme: o, hasRadius: s, borderRadius: e }) => s ? o.borderRadius : e};
+  border-style: ${({ borderStyle: o }) => o};
+  border-width: ${({ borderWidth: o }) => o};
+  border-color: ${({ borderColor: o, theme: s }) => s.colors[o]};
+  border: ${({ theme: o, borderColor: s, borderStyle: e, borderWidth: $ }) => {
+  if (s && !e && !$)
+    return `1px solid ${o.colors[s]}`;
+}};
+
+  // Shadows
+  box-shadow: ${({ theme: o, shadow: s }) => o.shadows[s]};
+
+  // Handlers
+  pointer-events: ${({ pointerEvents: o }) => o};
+  &:hover {
+    ${({ _hover: o, theme: s }) => o ? o(s) : void 0}
+  }
+
+  // Display
+  display: ${({ display: o }) => o};
+
+  // Position
+  position: ${({ position: o }) => o};
+  left: ${({ left: o, theme: s }) => s.spaces[o] || o};
+  right: ${({ right: o, theme: s }) => s.spaces[o] || o};
+  top: ${({ top: o, theme: s }) => s.spaces[o] || o};
+  bottom: ${({ bottom: o, theme: s }) => s.spaces[o] || o};
+  z-index: ${({ zIndex: o }) => o};
+  overflow: ${({ overflow: o }) => o};
+  cursor: ${({ cursor: o }) => o};
+
+  // Size
+  width: ${({ width: o, theme: s }) => s.spaces[o] || o};
+  max-width: ${({ maxWidth: o, theme: s }) => s.spaces[o] || o};
+  min-width: ${({ minWidth: o, theme: s }) => s.spaces[o] || o};
+  height: ${({ height: o, theme: s }) => s.spaces[o] || o};
+  max-height: ${({ maxHeight: o, theme: s }) => s.spaces[o] || o};
+  min-height: ${({ minHeight: o, theme: s }) => s.spaces[o] || o};
+
+  // Animation
+  transition: ${({ transition: o }) => o};
+  transform: ${({ transform: o }) => o};
+  animation: ${({ animation: o }) => o};
+
+  //Flexbox children props
+  flex-shrink: ${({ shrink: o }) => o};
+  flex-grow: ${({ grow: o }) => o};
+  flex-basis: ${({ basis: o }) => o};
+  flex: ${({ flex: o }) => o};
+
+  // Text
+  text-align: ${({ textAlign: o }) => o};
+  text-transform: ${({ textTransform: o }) => o};
+  line-height: ${({ lineHeight: o }) => o};
+
+  // Cursor
+  cursor: ${({ cursor: o }) => o};
+`;
+i.defaultProps = t;
+i.propTypes = n;
+export {
+  i as Box
+};

package/dist/Box/BoxProps.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),l=require("prop-types"),a=d=>d&&typeof d=="object"&&"default"in d?d:{default:d},r=a(u),e=a(l),t=d=>r.default.createElement("div",{...d}),o={background:void 0,borderColor:void 0,color:void 0,hiddenS:!1,hiddenXS:!1,padding:void 0,paddingTop:void 0,paddingRight:void 0,paddingBottom:void 0,paddingLeft:void 0,hasRadius:!1,shadow:void 0,children:null,shrink:void 0,grow:void 0,basis:void 0,flex:void 0,_hover:()=>{}},f={_hover:e.default.func,background:e.default.string,basis:e.default.oneOfType([e.default.string,e.default.string]),borderColor:e.default.string,children:e.default.oneOfType([e.default.node,e.default.string]),color:e.default.string,flex:e.default.oneOfType([e.default.string,e.default.string]),grow:e.default.oneOfType([e.default.string,e.default.string]),hasRadius:e.default.bool,hiddenS:e.default.bool,hiddenXS:e.default.bool,padding:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingBottom:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingLeft:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingRight:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingTop:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),shadow:e.default.string,shrink:e.default.oneOfType([e.default.string,e.default.string])};t.defaultProps=o;t.propTypes=f;exports.BoxProps=t;exports.boxDefaultProps=o;exports.boxPropTypes=f;

package/dist/Box/BoxProps.js

@@ -0,0 +1,51 @@
+import n from "react";
+import o from "prop-types";
+const r = (e) => /* @__PURE__ */ n.createElement("div", {
+  ...e
+}), d = {
+  background: void 0,
+  borderColor: void 0,
+  color: void 0,
+  hiddenS: !1,
+  hiddenXS: !1,
+  padding: void 0,
+  paddingTop: void 0,
+  paddingRight: void 0,
+  paddingBottom: void 0,
+  paddingLeft: void 0,
+  hasRadius: !1,
+  shadow: void 0,
+  children: null,
+  shrink: void 0,
+  grow: void 0,
+  basis: void 0,
+  flex: void 0,
+  _hover: () => {
+  }
+}, i = {
+  _hover: o.func,
+  background: o.string,
+  basis: o.oneOfType([o.string, o.string]),
+  borderColor: o.string,
+  children: o.oneOfType([o.node, o.string]),
+  color: o.string,
+  flex: o.oneOfType([o.string, o.string]),
+  grow: o.oneOfType([o.string, o.string]),
+  hasRadius: o.bool,
+  hiddenS: o.bool,
+  hiddenXS: o.bool,
+  padding: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  paddingBottom: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  paddingLeft: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  paddingRight: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  paddingTop: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  shadow: o.string,
+  shrink: o.oneOfType([o.string, o.string])
+};
+r.defaultProps = d;
+r.propTypes = i;
+export {
+  r as BoxProps,
+  d as boxDefaultProps,
+  i as boxPropTypes
+};

package/dist/Box/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Box.cjs");exports.Box=e.Box;

package/dist/Box/index.js

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

package/dist/Breadcrumbs/Breadcrumbs.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),y=require("prop-types"),f=require("styled-components"),h=require("@strapi/icons/ChevronRight"),u=require("../Typography/Typography.cjs"),s=require("../Box/Box.cjs"),d=require("../Flex/Flex.cjs"),m=require("../VisuallyHidden/VisuallyHidden.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(p),r=l(y),g=l(f),b=l(h),T=g.default(d.Flex)`
+  svg {
+    height: ${10/16}rem;
+    width: ${10/16}rem;
+    path {
+      fill: ${({theme:e})=>e.colors.neutral500};
+    }
+  }
+  :last-of-type ${s.Box} {
+    display: none;
+  }
+  :last-of-type ${u.Typography} {
+    color: ${({theme:e})=>e.colors.neutral800};
+    font-weight: ${({theme:e})=>e.fontWeights.bold};
+  }
+`,a=({children:e})=>t.default.createElement(T,{inline:!0,as:"li"},t.default.createElement(u.Typography,{variant:"pi",textColor:"neutral600"},e),t.default.createElement(s.Box,{"aria-hidden":!0,paddingLeft:3,paddingRight:3},t.default.createElement(b.default,null)));a.displayName="Crumb";a.propTypes={children:r.default.node.isRequired};const n=r.default.shape({type:r.default.oneOf([a])}),o=({children:e,label:i,...c})=>t.default.createElement(d.Flex,{...c},t.default.createElement(m.VisuallyHidden,null,i),t.default.createElement("ol",{"aria-hidden":!0},e));o.displayName="Breadcrumbs";o.propTypes={children:r.default.oneOfType([r.default.arrayOf(n),n]).isRequired,label:r.default.string.isRequired};exports.Breadcrumbs=o;exports.Crumb=a;

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,52 @@
+import r from "react";
+import t from "prop-types";
+import d from "styled-components";
+import c from "@strapi/icons/ChevronRight";
+import { Typography as a } from "../Typography/Typography.js";
+import { Box as l } from "../Box/Box.js";
+import { Flex as n } from "../Flex/Flex.js";
+import { VisuallyHidden as u } from "../VisuallyHidden/VisuallyHidden.js";
+const f = d(n)`
+  svg {
+    height: ${10 / 16}rem;
+    width: ${10 / 16}rem;
+    path {
+      fill: ${({ theme: e }) => e.colors.neutral500};
+    }
+  }
+  :last-of-type ${l} {
+    display: none;
+  }
+  :last-of-type ${a} {
+    color: ${({ theme: e }) => e.colors.neutral800};
+    font-weight: ${({ theme: e }) => e.fontWeights.bold};
+  }
+`, o = ({ children: e }) => /* @__PURE__ */ r.createElement(f, {
+  inline: !0,
+  as: "li"
+}, /* @__PURE__ */ r.createElement(a, {
+  variant: "pi",
+  textColor: "neutral600"
+}, e), /* @__PURE__ */ r.createElement(l, {
+  "aria-hidden": !0,
+  paddingLeft: 3,
+  paddingRight: 3
+}, /* @__PURE__ */ r.createElement(c, null)));
+o.displayName = "Crumb";
+o.propTypes = {
+  children: t.node.isRequired
+};
+const i = t.shape({ type: t.oneOf([o]) }), p = ({ children: e, label: m, ...s }) => /* @__PURE__ */ r.createElement(n, {
+  ...s
+}, /* @__PURE__ */ r.createElement(u, null, m), /* @__PURE__ */ r.createElement("ol", {
+  "aria-hidden": !0
+}, e));
+p.displayName = "Breadcrumbs";
+p.propTypes = {
+  children: t.oneOfType([t.arrayOf(i), i]).isRequired,
+  label: t.string.isRequired
+};
+export {
+  p as Breadcrumbs,
+  o as Crumb
+};

package/dist/Breadcrumbs/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Breadcrumbs.cjs");exports.Breadcrumbs=e.Breadcrumbs;exports.Crumb=e.Crumb;

package/dist/Breadcrumbs/index.js

@@ -0,0 +1,5 @@
+import { Breadcrumbs as b, Crumb as e } from "./Breadcrumbs.js";
+export {
+  b as Breadcrumbs,
+  e as Crumb
+};

package/dist/Button/Button.cjs

@@ -0,0 +1,43 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react"),q=require("prop-types"),m=require("styled-components"),j=require("@strapi/icons/Loader"),d=require("../Typography/Typography.cjs"),u=require("../Box/Box.cjs"),o=require("./utils.cjs"),b=require("./constants.cjs"),E=require("../BaseButton/BaseButton.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=r(x),t=r(q),c=r(m),W=r(j),L=m.keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`,P=c.default.div`
+  animation: ${L} 2s infinite linear;
+  will-change: transform;
+`,R=c.default(u.Box)`
+  height: 100%;
+`,B=c.default(E.BaseButton)`
+  align-items: center;
+  padding: ${({theme:e,size:l})=>`${l==="S"?e.spaces[2]:"10px"} ${e.spaces[4]}`};
+  background: ${({theme:e})=>e.colors.buttonPrimary600};
+  border: 1px solid ${({theme:e})=>e.colors.buttonPrimary600};
+  ${u.Box} {
+    display: flex;
+    align-items: center;
+  }
+  ${d.Typography} {
+    color: ${({theme:e})=>e.colors.buttonNeutral0};
+  }
+  &[aria-disabled='true'] {
+    ${o.getDisabledStyle}
+    &:active {
+      ${o.getDisabledStyle}
+    }
+  }
+  &:hover {
+    ${o.getHoverStyle}
+  }
+  &:active {
+    ${o.getActiveStyle}
+  }
+  ${o.getVariantStyle}
+  ${({fullWidth:e})=>e&&`
+    display: inline-flex;
+    justify-content: center;
+    width: 100%;
+  `}
+`,n=a.default.forwardRef(({variant:e,startIcon:l,endIcon:f,disabled:h,children:p,onClick:y,size:g,loading:i,fullWidth:$,...v},S)=>{const s=h||i,T=_=>{!s&&y&&y(_)};return a.default.createElement(B,{ref:S,"aria-disabled":s,disabled:s,size:g,variant:e,onClick:T,fullWidth:$,...v},(l||i)&&a.default.createElement(R,{"aria-hidden":!0,paddingRight:2},i?a.default.createElement(P,null,a.default.createElement(W.default,null)):l),g==="S"?a.default.createElement(d.Typography,{variant:"pi",fontWeight:"bold"},p):a.default.createElement(d.Typography,{fontWeight:"bold"},p),f&&a.default.createElement(u.Box,{"aria-hidden":!0,paddingLeft:2},f))});n.displayName="Button";n.defaultProps={disabled:!1,endIcon:void 0,fullWidth:!1,loading:!1,onClick:void 0,size:"S",startIcon:void 0,variant:"default"};n.propTypes={children:t.default.node.isRequired,disabled:t.default.bool,endIcon:t.default.element,fullWidth:t.default.bool,loading:t.default.bool,onClick:t.default.func,size:t.default.oneOf(b.BUTTON_SIZES),startIcon:t.default.element,variant:t.default.oneOf(b.VARIANTS)};exports.Button=n;exports.ButtonWrapper=B;