@strapi/design-system 0.0.0-3cf3ff39

package/dist/BaseButton/BaseButton.cjs

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),l=require("react"),c=require("styled-components"),i=require("../themes/utils.cjs"),d=require("../Flex/Flex.cjs"),p=e=>e&&e.__esModule?e:{default:e};function f(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const b=f(l),g=p(c),o=g.default(d.Flex)`
+  > svg {
+    height: ${({theme:e})=>e.spaces[3]};
+    width: ${({theme:e})=>e.spaces[3]};
+
+    > g,
+    path {
+      fill: ${({theme:e})=>e.colors.neutral0};
+    }
+  }
+
+  &[aria-disabled='true'] {
+    pointer-events: none;
+  }
+
+  ${i.buttonFocusStyle}
+`,a=b.forwardRef(({disabled:e,children:r,background:t="neutral0",...n},s)=>u.jsx(o,{ref:s,"aria-disabled":e,as:"button",type:"button",disabled:e,padding:2,hasRadius:!0,background:t,borderColor:"neutral200",cursor:"pointer",...n,children:r}));a.displayName="BaseButton";exports.BaseButton=a;exports.BaseButtonWrapper=o;

package/dist/BaseButton/BaseButton.js

@@ -0,0 +1,27 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as n from "react";
+import i from "styled-components";
+import { buttonFocusStyle as p } from "../themes/utils.js";
+import { Flex as u } from "../Flex/Flex.js";
+const d = i(u)`
+  > svg {
+    height: ${({ theme: t }) => t.spaces[3]};
+    width: ${({ theme: t }) => t.spaces[3]};
+
+    > g,
+    path {
+      fill: ${({ theme: t }) => t.colors.neutral0};
+    }
+  }
+
+  &[aria-disabled='true'] {
+    pointer-events: none;
+  }
+
+  ${p}
+`, l = n.forwardRef(({ disabled: t, children: r, background: e = "neutral0", ...o }, a) => s(d, { ref: a, "aria-disabled": t, as: "button", type: "button", disabled: t, padding: 2, hasRadius: !0, background: e, borderColor: "neutral200", cursor: "pointer", ...o, children: r }));
+l.displayName = "BaseButton";
+export {
+  l as BaseButton,
+  d as BaseButtonWrapper
+};

package/dist/BaseButton/index.cjs

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

package/dist/BaseButton/index.js

@@ -0,0 +1,5 @@
+import { BaseButton as o, BaseButtonWrapper as r } from "./BaseButton.js";
+export {
+  o as BaseButton,
+  r as BaseButtonWrapper
+};

package/dist/BaseCheckbox/BaseCheckbox.cjs

@@ -0,0 +1,62 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),b=require("react"),p=require("styled-components"),f=require("./assets/checkmark-black.svg.cjs"),k=require("./assets/checkmark.svg.cjs"),l=require("./utils.cjs"),h=require("../Box/Box.cjs"),g=e=>e&&e.__esModule?e:{default:e};function x(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const s=x(b),m=g(p),$=m.default.input`
+  height: ${l.getCheckboxSize};
+  min-width: ${l.getCheckboxSize};
+  margin: 0;
+  border-radius: ${({theme:e})=>e.borderRadius};
+  border: 1px solid ${({theme:e})=>e.colors.neutral300};
+  -webkit-appearance: none;
+  background-color: ${({theme:e})=>e.colors.neutral0};
+  cursor: pointer;
+
+  &:checked {
+    background-color: ${({theme:e})=>e.colors.primary600};
+    border: 1px solid ${({theme:e})=>e.colors.primary600};
+
+    &:after {
+      content: '';
+      display: block;
+      position: relative;
+      background: url(${k}) no-repeat no-repeat center center;
+      width: 10px;
+      height: 10px;
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    &:disabled:after {
+      background: url(${f}) no-repeat no-repeat center center;
+    }
+  }
+
+  &:disabled {
+    background-color: ${({theme:e})=>e.colors.neutral200};
+    border: 1px solid ${({theme:e})=>e.colors.neutral300};
+  }
+
+  &:indeterminate {
+    background-color: ${({theme:e})=>e.colors.primary600};
+    border: 1px solid ${({theme:e})=>e.colors.primary600};
+
+    &:after {
+      content: '';
+      display: block;
+      position: relative;
+      color: white;
+      height: 2px;
+      width: 10px;
+      background-color: ${({theme:e})=>e.colors.neutral0};
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    &:disabled {
+      background-color: ${({theme:e})=>e.colors.neutral200};
+      border: 1px solid ${({theme:e})=>e.colors.neutral300};
+      &:after {
+        background-color: ${({theme:e})=>e.colors.neutral500};
+      }
+    }
+  }
+`,i=({indeterminate:e=!1,size:o="M",name:r,value:t=!1,onValueChange:n,...u})=>{const c=s.useRef(null);s.useEffect(()=>{c.current&&e?c.current.indeterminate=e:c.current.indeterminate=!1},[e]);const d=()=>{n&&n(!t)};return a.jsx(h.Box,{children:a.jsx($,{size:o,checked:t,onChange:d,type:"checkbox",ref:c,name:r,...u})})};i.displayName="BaseCheckbox";exports.BaseCheckbox=i;

package/dist/BaseCheckbox/BaseCheckbox.js

@@ -0,0 +1,80 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as c from "react";
+import d from "styled-components";
+import p from "./assets/checkmark-black.svg.js";
+import u from "./assets/checkmark.svg.js";
+import { getCheckboxSize as n } from "./utils.js";
+import { Box as b } from "../Box/Box.js";
+const m = d.input`
+  height: ${n};
+  min-width: ${n};
+  margin: 0;
+  border-radius: ${({ theme: r }) => r.borderRadius};
+  border: 1px solid ${({ theme: r }) => r.colors.neutral300};
+  -webkit-appearance: none;
+  background-color: ${({ theme: r }) => r.colors.neutral0};
+  cursor: pointer;
+
+  &:checked {
+    background-color: ${({ theme: r }) => r.colors.primary600};
+    border: 1px solid ${({ theme: r }) => r.colors.primary600};
+
+    &:after {
+      content: '';
+      display: block;
+      position: relative;
+      background: url(${u}) no-repeat no-repeat center center;
+      width: 10px;
+      height: 10px;
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    &:disabled:after {
+      background: url(${p}) no-repeat no-repeat center center;
+    }
+  }
+
+  &:disabled {
+    background-color: ${({ theme: r }) => r.colors.neutral200};
+    border: 1px solid ${({ theme: r }) => r.colors.neutral300};
+  }
+
+  &:indeterminate {
+    background-color: ${({ theme: r }) => r.colors.primary600};
+    border: 1px solid ${({ theme: r }) => r.colors.primary600};
+
+    &:after {
+      content: '';
+      display: block;
+      position: relative;
+      color: white;
+      height: 2px;
+      width: 10px;
+      background-color: ${({ theme: r }) => r.colors.neutral0};
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    &:disabled {
+      background-color: ${({ theme: r }) => r.colors.neutral200};
+      border: 1px solid ${({ theme: r }) => r.colors.neutral300};
+      &:after {
+        background-color: ${({ theme: r }) => r.colors.neutral500};
+      }
+    }
+  }
+`, f = ({ indeterminate: r = !1, size: l = "M", name: s, value: e = !1, onValueChange: t, ...i }) => {
+  const o = c.useRef(null);
+  return c.useEffect(() => {
+    o.current && r ? o.current.indeterminate = r : o.current.indeterminate = !1;
+  }, [r]), a(b, { children: a(m, { size: l, checked: e, onChange: () => {
+    t && t(!e);
+  }, type: "checkbox", ref: o, name: s, ...i }) });
+};
+f.displayName = "BaseCheckbox";
+export {
+  f as BaseCheckbox
+};

package/dist/BaseCheckbox/assets/checkmark-black.svg.cjs

@@ -0,0 +1 @@
+"use strict";const M="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==";module.exports=M;

package/dist/BaseCheckbox/assets/checkmark-black.svg.js

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

package/dist/BaseCheckbox/assets/checkmark.svg.cjs

@@ -0,0 +1 @@
+"use strict";const M="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=";module.exports=M;

package/dist/BaseCheckbox/assets/checkmark.svg.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.defineProperty(exports,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.defineProperty(exports,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 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),i=require("react"),l=require("../Box/Box.cjs"),c=e=>e&&e.__esModule?e:{default:e},d=c(i),a=d.default.forwardRef(({href:e,rel:n="noreferrer noopener",target:o="_self",disabled:r=!1,isExternal:t=!1,...s},u)=>f.jsx(l.Box,{as:"a",ref:u,target:t?"_blank":o,rel:t?n:void 0,href:r?"#":e,"aria-disabled":r,cursor:"pointer",...s}));a.displayName="BaseLink";exports.BaseLink=a;

package/dist/BaseLink/BaseLink.js

@@ -0,0 +1,8 @@
+import { jsx as s } from "react/jsx-runtime";
+import i from "react";
+import { Box as m } from "../Box/Box.js";
+const p = i.forwardRef(({ href: o, rel: a = "noreferrer noopener", target: f = "_self", disabled: r = !1, isExternal: e = !1, ...n }, t) => s(m, { as: "a", ref: t, target: e ? "_blank" : f, rel: e ? a : void 0, href: r ? "#" : o, "aria-disabled": r, cursor: "pointer", ...n }));
+p.displayName = "BaseLink";
+export {
+  p as BaseLink
+};

package/dist/BaseLink/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,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.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),d=require("react"),g=require("styled-components"),R=require("./context.cjs"),t=require("./utils.cjs"),y=require("../hooks/useId.cjs"),r=e=>e&&e.__esModule?e:{default:e},m=r(d),h=r(g),S=h.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: ${({size:e})=>typeof e=="number"?e:t.getRadioSize(e)};
+  width: ${({size:e})=>typeof e=="number"?e:t.getRadioSize(e)};
+  -webkit-appearance: none;
+
+  &:after {
+    border-radius: 50%;
+    content: '';
+    position: relative;
+    z-index: 1;
+    display: block;
+    height: ${({size:e})=>typeof e=="number"?e:t.getSelectedRadioSize(e)};
+    width: ${({size:e})=>typeof e=="number"?e:t.getSelectedRadioSize(e)};
+    left: ${t.getSelectedRadioPosition};
+    top: ${t.getSelectedRadioPosition};
+  }
+
+  &:checked:after {
+    background: ${({theme:e})=>e.colors.primary600};
+  }
+
+  &:disabled {
+    border: 1px solid ${({theme:e})=>e.colors.neutral300};
+    background: ${({theme:e})=>e.colors.neutral200};
+  }
+`,a=m.default.forwardRef(({value:e,disabled:n=!1,...i},c)=>{const s=y.useId(),{onChange:l,selected:u,name:p,size:b}=d.useContext(R.RadioContext),o=u===e;return f.jsx(S,{ref:c,type:"radio",name:p,value:e,tabIndex:o?0:-1,"aria-checked":o,checked:o,disabled:n,id:s,size:b,onChange:l,...i})});a.displayName="Radio";exports.BaseRadio=a;

package/dist/BaseRadio/BaseRadio.js

@@ -0,0 +1,58 @@
+import { jsx as f } from "react/jsx-runtime";
+import u, { useContext as b } from "react";
+import g from "styled-components";
+import { RadioContext as h } from "./context.js";
+import { getRadioSize as r, getSelectedRadioSize as t, getSelectedRadioPosition as d } from "./utils.js";
+import { useId as $ } from "../hooks/useId.js";
+const y = 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: ${({ size: e }) => typeof e == "number" ? e : r(e)};
+  width: ${({ size: e }) => typeof e == "number" ? e : r(e)};
+  -webkit-appearance: none;
+
+  &:after {
+    border-radius: 50%;
+    content: '';
+    position: relative;
+    z-index: 1;
+    display: block;
+    height: ${({ size: e }) => typeof e == "number" ? e : t(e)};
+    width: ${({ size: e }) => typeof e == "number" ? e : t(e)};
+    left: ${d};
+    top: ${d};
+  }
+
+  &:checked:after {
+    background: ${({ theme: e }) => e.colors.primary600};
+  }
+
+  &:disabled {
+    border: 1px solid ${({ theme: e }) => e.colors.neutral300};
+    background: ${({ theme: e }) => e.colors.neutral200};
+  }
+`, R = u.forwardRef(({ value: e, disabled: a = !1, ...n }, i) => {
+  const c = $(), { onChange: l, selected: p, name: m, size: s } = b(h), o = p === e;
+  return f(y, {
+    ref: i,
+    type: "radio",
+    name: m,
+    value: e,
+    tabIndex: o ? 0 : -1,
+    "aria-checked": o,
+    checked: o,
+    disabled: a,
+    id: c,
+    // @ts-expect-error size is a html prop already.
+    size: s,
+    onChange: l,
+    ...n
+  });
+});
+R.displayName = "Radio";
+export {
+  R as BaseRadio
+};

package/dist/BaseRadio/RadioGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("react"),a=require("./context.cjs"),x=require("../helpers/setTabIndexOnFirstItem.cjs"),f=({children:c,labelledBy:u,onChange:o,value:e="",size:i="M",name:t,...d})=>{const s=r.useRef(null);r.useLayoutEffect(()=>{e||x.setTabIndexOnFirstItem(s.current,`[name="${t}"]`)},[e,t]);const l=r.useMemo(()=>({onChange:o,selected:e,name:t,size:i}),[t,o,i,e]);return n.jsx(a.RadioContext.Provider,{value:l,children:n.jsx("div",{ref:s,role:"radiogroup","aria-labelledby":u,...d,children:c})})};exports.RadioGroup=f;

package/dist/BaseRadio/RadioGroup.js

@@ -0,0 +1,15 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useRef as n, useLayoutEffect as p, useMemo as u } from "react";
+import { RadioContext as l } from "./context.js";
+import { setTabIndexOnFirstItem as x } from "../helpers/setTabIndexOnFirstItem.js";
+const G = ({ children: f, labelledBy: c, onChange: t, value: r = "", size: e = "M", name: o, ...s }) => {
+  const i = n(null);
+  p(() => {
+    r || x(i.current, `[name="${o}"]`);
+  }, [r, o]);
+  const m = u(() => ({ onChange: t, selected: r, name: o, size: e }), [o, t, e, r]);
+  return d(l.Provider, { value: m, children: d("div", { ref: i, role: "radiogroup", "aria-labelledby": c, ...s, children: f }) });
+};
+export {
+  G as RadioGroup
+};

package/dist/BaseRadio/context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({onChange:void 0,name:"",size:"M",selected:""});exports.RadioContext=t;

package/dist/BaseRadio/context.js

@@ -0,0 +1,10 @@
+import { createContext as e } from "react";
+const n = e({
+  onChange: void 0,
+  name: "",
+  size: "M",
+  selected: ""
+});
+export {
+  n as RadioContext
+};

package/dist/BaseRadio/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./BaseRadio.cjs"),e=require("./RadioGroup.cjs");exports.BaseRadio=o.BaseRadio;exports.RadioGroup=e.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.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=e=>e==="M"?"18px":"20px",i=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 = (e) => e === "M" ? "18px" : "20px", r = (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,79 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),r=require("../helpers/theme.cjs"),a=e=>e&&e.__esModule?e:{default:e},d=a(n),m={color:!0,cursor:!0,height:!0,width:!0},l=d.default.div.withConfig({shouldForwardProp:(e,t)=>!m[e]&&t(e)})`
+  // Font
+  font-size: ${({fontSize:e,theme:t})=>r.extractStyleFromTheme(t.fontSizes,e,e)};
+
+  // Colors
+  background: ${({theme:e,background:t})=>r.extractStyleFromTheme(e.colors,t,t)};
+  color: ${({theme:e,color:t})=>r.extractStyleFromTheme(e.colors,t,void 0)};
+
+  // Spaces
+  ${({theme:e,padding:t})=>o("padding",t,e)}
+  ${({theme:e,paddingTop:t})=>o("padding-top",t,e)}
+  ${({theme:e,paddingRight:t})=>o("padding-right",t,e)}
+  ${({theme:e,paddingBottom:t})=>o("padding-bottom",t,e)}
+  ${({theme:e,paddingLeft:t})=>o("padding-left",t,e)}
+  ${({theme:e,marginLeft:t})=>o("margin-left",t,e)}
+  ${({theme:e,marginRight:t})=>o("margin-right",t,e)}
+  ${({theme:e,marginTop:t})=>o("margin-top",t,e)}
+  ${({theme:e,marginBottom:t})=>o("margin-bottom",t,e)}
+
+  // Responsive hiding
+  ${({theme:e,hiddenS:t})=>t?`${e.mediaQueries.tablet} { display: none; }`:void 0}
+  ${({theme:e,hiddenXS:t})=>t?`${e.mediaQueries.mobile} { display: none; }`:void 0}
+  
+
+  // Borders
+  border-radius: ${({theme:e,hasRadius:t,borderRadius:s})=>t?e.borderRadius:s};
+  border-style: ${({borderStyle:e})=>e};
+  border-width: ${({borderWidth:e})=>e};
+  border-color: ${({borderColor:e,theme:t})=>r.extractStyleFromTheme(t.colors,e,void 0)};
+  border: ${({theme:e,borderColor:t,borderStyle:s,borderWidth:i})=>{if(t&&!s&&typeof i>"u")return`1px solid ${e.colors[t]}`}};
+
+  // Shadows
+  box-shadow: ${({theme:e,shadow:t})=>r.extractStyleFromTheme(e.shadows,t,void 0)};
+
+  // Handlers
+  pointer-events: ${({pointerEvents:e})=>e};
+  &:hover {
+    ${({_hover:e,theme:t})=>e?e(t):void 0}
+  }
+
+  // Display
+  display: ${({display:e})=>e};
+
+  // Position
+  position: ${({position:e})=>e};
+  left: ${({left:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  right: ${({right:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  top: ${({top:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  bottom: ${({bottom:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  z-index: ${({zIndex:e})=>e};
+  overflow: ${({overflow:e})=>e};
+
+  // Size
+  width: ${({width:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  max-width: ${({maxWidth:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  min-width: ${({minWidth:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  height: ${({height:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  max-height: ${({maxHeight:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  min-height: ${({minHeight:e,theme:t})=>r.extractStyleFromTheme(t.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};
+`;exports.Box=l;

package/dist/Box/Box.js

@@ -0,0 +1,95 @@
+import d from "styled-components";
+import r from "../helpers/handleResponsiveValues.js";
+import { extractStyleFromTheme as s } from "../helpers/theme.js";
+const t = {
+  color: !0,
+  cursor: !0,
+  height: !0,
+  width: !0
+}, l = d.div.withConfig({
+  shouldForwardProp: (e, o) => !t[e] && o(e)
+})`
+  // Font
+  font-size: ${({ fontSize: e, theme: o }) => s(o.fontSizes, e, e)};
+
+  // Colors
+  background: ${({ theme: e, background: o }) => s(e.colors, o, o)};
+  color: ${({ theme: e, color: o }) => s(e.colors, o, void 0)};
+
+  // Spaces
+  ${({ theme: e, padding: o }) => r("padding", o, e)}
+  ${({ theme: e, paddingTop: o }) => r("padding-top", o, e)}
+  ${({ theme: e, paddingRight: o }) => r("padding-right", o, e)}
+  ${({ theme: e, paddingBottom: o }) => r("padding-bottom", o, e)}
+  ${({ theme: e, paddingLeft: o }) => r("padding-left", o, e)}
+  ${({ theme: e, marginLeft: o }) => r("margin-left", o, e)}
+  ${({ theme: e, marginRight: o }) => r("margin-right", o, e)}
+  ${({ theme: e, marginTop: o }) => r("margin-top", o, e)}
+  ${({ theme: e, marginBottom: o }) => r("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: i }) => o ? e.borderRadius : i};
+  border-style: ${({ borderStyle: e }) => e};
+  border-width: ${({ borderWidth: e }) => e};
+  border-color: ${({ borderColor: e, theme: o }) => s(o.colors, e, void 0)};
+  border: ${({ theme: e, borderColor: o, borderStyle: i, borderWidth: n }) => {
+  if (o && !i && typeof n > "u")
+    return `1px solid ${e.colors[o]}`;
+}};
+
+  // Shadows
+  box-shadow: ${({ theme: e, shadow: o }) => s(e.shadows, o, void 0)};
+
+  // 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 }) => s(o.spaces, e, e)};
+  right: ${({ right: e, theme: o }) => s(o.spaces, e, e)};
+  top: ${({ top: e, theme: o }) => s(o.spaces, e, e)};
+  bottom: ${({ bottom: e, theme: o }) => s(o.spaces, e, e)};
+  z-index: ${({ zIndex: e }) => e};
+  overflow: ${({ overflow: e }) => e};
+
+  // Size
+  width: ${({ width: e, theme: o }) => s(o.spaces, e, e)};
+  max-width: ${({ maxWidth: e, theme: o }) => s(o.spaces, e, e)};
+  min-width: ${({ minWidth: e, theme: o }) => s(o.spaces, e, e)};
+  height: ${({ height: e, theme: o }) => s(o.spaces, e, e)};
+  max-height: ${({ maxHeight: e, theme: o }) => s(o.spaces, e, e)};
+  min-height: ${({ minHeight: e, theme: o }) => s(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};
+`;
+export {
+  l as Box
+};

package/dist/Box/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,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.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("@strapi/icons"),u=require("styled-components"),c=require("../VisuallyHidden/VisuallyHidden.cjs"),t=require("../Flex/Flex.cjs"),i=require("../Box/Box.cjs"),s=require("../Typography/Typography.cjs"),h=e=>e&&e.__esModule?e:{default:e},p=h(u),y=p.default(t.Flex)`
+  svg {
+    height: ${10/16}rem;
+    width: ${10/16}rem;
+    path {
+      fill: ${({theme:e})=>e.colors.neutral500};
+    }
+  }
+  :last-of-type ${i.Box} {
+    display: none;
+  }
+  :last-of-type ${s.Typography} {
+    color: ${({theme:e})=>e.colors.neutral800};
+    font-weight: ${({theme:e})=>e.fontWeights.bold};
+  }
+`,l=({children:e})=>r.jsxs(y,{inline:!0,as:"li",children:[r.jsx(s.Typography,{variant:"pi",textColor:"neutral600",children:e}),r.jsx(i.Box,{"aria-hidden":!0,paddingLeft:3,paddingRight:3,children:r.jsx(d.ChevronRight,{})})]});l.displayName="Crumb";const n=({children:e,label:o,...a})=>r.jsxs(t.Flex,{...a,children:[r.jsx(c.VisuallyHidden,{children:o}),r.jsx("ol",{"aria-hidden":!0,children:e})]});n.displayName="Breadcrumbs";exports.Breadcrumbs=n;exports.Crumb=l;

package/dist/Breadcrumbs/Breadcrumbs.js

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

package/dist/Breadcrumbs/index.cjs

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