@strapi/design-system 1.9.0 → 1.10.0-alpha.0

package/dist/Searchbar/Searchbar.cjs

@@ -1,28 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),l=require("@strapi/icons"),m=require("styled-components"),F=require("../hooks/useComposeRefs.cjs"),R=require("../themes/utils.cjs"),t=require("../Field/FieldInput.cjs"),S=require("../Field/FieldAction.cjs"),y=require("../Field/Field.cjs"),$=require("../VisuallyHidden/VisuallyHidden.cjs"),C=require("../Field/FieldLabel.cjs"),I=e=>e&&e.__esModule?e:{default:e},s=I(m),w=s.default(l.Cross)`
-  font-size: 0.5rem;
-  path {
-    fill: ${({theme:e})=>e.colors.neutral400};
-  }
-`,c=s.default(l.Search)`
-  font-size: 0.8rem;
-  path {
-    fill: ${({theme:e})=>e.colors.neutral800};
-  }
-`,_=s.default.div`
-  border-radius: ${({theme:e})=>e.borderRadius};
-  box-shadow: ${({theme:e})=>e.shadows.filterShadow};
-
-  &:focus-within {
-    ${c} {
-      path {
-        fill: ${({theme:e})=>e.colors.primary600};
-      }
-    }
-  }
-
-  ${t.InputWrapper} {
-    border: 1px solid transparent;
-  }
-
-  ${R.inputFocusStyle(t.InputWrapper)}
-`,g=i.forwardRef(({name:e,size:a="M",children:u,value:n="",onClear:d,clearLabel:f,...p},h)=>{const o=i.useRef(null),b=n.length>0,q=j=>{d(j),o.current.focus()},x=F.composeRefs(h,o);return r.jsx(_,{children:r.jsxs(y.Field,{name:e,children:[r.jsx($.VisuallyHidden,{children:r.jsx(C.FieldLabel,{children:u})}),r.jsx(t.FieldInput,{ref:x,value:n,startAction:r.jsx(c,{"aria-hidden":!0}),size:a,endAction:b?r.jsx(S.FieldAction,{label:f,onClick:q,children:r.jsx(w,{})}):void 0,...p})]})})});exports.Searchbar=g;

package/dist/Searchbar/index.cjs

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

package/dist/Select/MultiSelect.cjs

@@ -1,30 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),Q=require("react"),U=require("@strapi/icons"),b=require("styled-components"),i=require("./SelectParts.cjs"),Z=require("../BaseCheckbox/assets/checkmark.svg.cjs"),ee=require("../helpers/strings.cjs"),te=require("../hooks/useComposeRefs.cjs"),w=require("../hooks/useId.cjs"),re=require("../hooks/useIntersection.cjs"),ne=require("../Tag/Tag.cjs"),oe=require("../Field/Field.cjs"),ie=require("../Flex/Flex.cjs"),le=require("../Field/FieldLabel.cjs"),x=require("../Box/Box.cjs"),se=require("../Field/FieldHint.cjs"),ce=require("../Field/FieldError.cjs"),O=require("../Typography/Typography.cjs"),ae=e=>e&&e.__esModule?e:{default:e};function de(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 l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,l.get?l:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const c=de(Q),ue=ae(b),he=c.forwardRef(({"aria-label":e,children:o,clearLabel:r="Clear",customizeContent:l,disabled:s,error:a,hint:u,id:g,label:j,labelAction:M,onChange:p,onClear:F,onReachEnd:y,placeholder:_,required:m,selectButtonTitle:xe,startIcon:B,size:L="M",value:h,withTags:q,...P},V)=>{const R=c.useRef(null),[$,C]=c.useState(),[z,E]=c.useState(!1),f=w.useId(g),G=`${f}-hint`,A=`${f}-error`,D=n=>{p?p(n):C(n)},H=n=>()=>{const v=Array.isArray(h)?h.filter(I=>I!==n):($??[]).filter(I=>I!==n);p?p(v):C(v)},W=n=>{E(n)},S=c.useRef(null),N=()=>{S.current.focus()},X=w.useId(),k=`intersection-${ee.stripReactIdOfColon(X)}`,Y=n=>{y&&y(n)};re.useIntersection(R,Y,{selectorToWatch:`#${k}`,skipWhen:!z});const d=typeof h<"u"&&h!==null?h:$,J=n=>n&&typeof n=="object"&&n.value?t.jsx(ne.Tag,{tabIndex:-1,disabled:s,icon:t.jsx(U.Cross,{}),onClick:H(n.value),children:n.textValue},n.value):null,K=te.useComposedRefs(S,V);return t.jsx(oe.Field,{hint:u,error:a,id:f,required:m,children:t.jsxs(ie.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[j?t.jsx(le.FieldLabel,{onClick:N,action:M,children:j}):null,t.jsxs(i.Root,{onOpenChange:W,disabled:s,required:m,onValueChange:D,value:d,...P,multi:!0,children:[t.jsx(i.Trigger,{ref:K,"aria-label":j??e,"aria-describedby":`${G} ${A}`,id:f,startIcon:B,size:L,hasError:!!a,disabled:s,clearLabel:r,onClear:d?.length?F:void 0,paddingLeft:q&&d?.length?1:3,children:t.jsx(i.Value,{placeholder:_,textColor:d?.length?"neutral800":"neutral600",children:d?.length?q?J:l?l(d):void 0:void 0})}),t.jsx(i.Portal,{children:t.jsx(i.Content,{position:"popper",sideOffset:4,children:t.jsxs(i.Viewport,{ref:R,children:[o,t.jsx(x.Box,{id:k,width:"100%",height:"1px"})]})})})]}),t.jsx(se.FieldHint,{}),t.jsx(ce.FieldError,{})]})})}),pe=c.forwardRef(({value:e,children:o,startIcon:r,...l},s)=>t.jsxs(i.Item,{ref:s,value:e.toString(),...l,children:[r&&t.jsx(x.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(i.ItemIndicator,{children:({isSelected:a,isIntermediate:u})=>t.jsx(T,{hasRadius:!0,overflow:"hidden",position:"relative",$indeterminate:u,$selected:a,zIndex:1,height:"18px",width:"18px"})}),t.jsx(O.Typography,{textColor:"neutral800",children:t.jsx(i.ItemText,{children:o})})]})),T=ue.default(x.Box)`
-  border: 1px solid
-    ${({theme:e,$selected:o,$indeterminate:r})=>o||r?e.colors.primary600:e.colors.neutral300};
-  background-color: ${({theme:e,$selected:o,$indeterminate:r})=>o||r?e.colors.primary600:e.colors.neutral0};
-
-  ${({theme:e,$indeterminate:o})=>o&&b.css`
-      &::after {
-        content: '';
-        display: block;
-        position: relative;
-        color: white;
-        height: 2px;
-        width: 10px;
-        background-color: ${e.colors.neutral0};
-        left: 50%;
-        top: 50%;
-        transform: translateX(-50%) translateY(-50%);
-      }
-    `}
-
-  ${({$selected:e})=>e&&b.css`
-      &::after {
-        content: '';
-        background: url(${Z}) no-repeat no-repeat center center;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-      }
-    `}
-`,fe=c.forwardRef(({children:e,label:o,startIcon:r,values:l=[],...s},a)=>t.jsxs(i.Group,{ref:a,children:[t.jsxs(i.Item,{value:l,...s,children:[r&&t.jsx(x.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(i.ItemIndicator,{children:({isSelected:u,isIntermediate:g})=>t.jsx(T,{hasRadius:!0,overflow:"hidden",position:"relative",$indeterminate:g,$selected:u,zIndex:1,height:"18px",width:"18px"})}),t.jsx(O.Typography,{textColor:"neutral800",children:o})]}),e]}));exports.MultiSelect=he;exports.MultiSelectGroup=fe;exports.MultiSelectOption=pe;

package/dist/Select/MultiSelectNested.cjs

@@ -1,3 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),r=require("styled-components"),i=require("./MultiSelect.cjs"),a=e=>e&&e.__esModule?e:{default:e},s=a(r),c=({options:e,...n})=>u.jsx(i.MultiSelect,{...n,children:e.map(l=>"children"in l?u.jsx(i.MultiSelectGroup,{label:l.label,values:l.children.map(t=>t.value.toString()),children:l.children.map(t=>u.jsx(d,{value:t.value,children:t.label},t.value))},l.label):u.jsx(i.MultiSelectOption,{value:l.value,children:l.label},l.value))}),d=s.default(i.MultiSelectOption)`
-  padding-left: ${({theme:e})=>e.spaces[7]};
-`;exports.MultiSelectNested=c;

package/dist/Select/OptGroup.cjs

@@ -1,5 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./MultiSelect.cjs");/**
- * @preserve
- * @deprecated This component is only fit for the MultiSelect component.
- * Therefore, you should import the MultiSelectGroup component instead.
- */const e=t.MultiSelectGroup;exports.OptGroup=e;

package/dist/Select/Option.cjs

@@ -1,5 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("./MultiSelect.cjs"),o=require("./Select.cjs"),l=require("./SingleSelect.cjs");/**
- * @preserve
- * @deprecated You should import the specific type of option you want to render,
- * e.g. `import { MultiSelectOption } from '@strapi/design-system';`
- */const u=({multi:n,...e})=>{const i=o.useSelectContext();return n||i.multi?t.jsx(c.MultiSelectOption,{...e}):t.jsx(l.SingleSelectOption,{...e})};exports.Option=u;

package/dist/Select/Select.cjs

@@ -1,6 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),o=require("react"),r=require("./MultiSelect.cjs"),s=require("./SingleSelect.cjs");function a(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const u=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,u.get?u:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const l=a(o),i=l.createContext({multi:!1}),S=()=>l.useContext(i);/**
- * @preserve
- * @deprecated You should import the specific type of select you want to render
- *
- * e.g. `import { MultiSelect } from '@strapi/design-system';`
- */const g=e=>{const t=l.useMemo(()=>({multi:!!(e.multi||e.withTags)}),[e.multi,e.withTags]);return c.jsx(i.Provider,{value:t,children:e.multi||e.withTags?c.jsx(r.MultiSelect,{...e}):c.jsx(s.SingleSelect,{...e})})};exports.Select=g;exports.useSelectContext=S;

package/dist/Select/SelectList.cjs

@@ -1,5 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),A=require("react"),m=require("compute-scroll-into-view"),a=require("../helpers/keyboardKeys.cjs"),v=require("../Flex/Flex.cjs");function q(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const c=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,c.get?c:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const p=q(A),g={Keyboard:"down:keyboard",Mouse:"down:mouse"},K={Keyboard:"up:keyboard",Mouse:"up:mouse"};/**
- * @preserve
- * @deprecated This component will be removed in the next major release.
- * If you need a custom listbox I would recommend opening a new issue.
- */const h=({labelledBy:e,onSelectItem:t,children:n,multi:c=!1,onEscape:r,expanded:d})=>{const o=k(d),S=i=>{switch(i.key){case a.KeyboardKeys.ESCAPE:{i.stopPropagation(),r();break}case a.KeyboardKeys.DOWN:{i.preventDefault();const s=y(o.current);if(!s)return;const u=s.nextSibling;if(u)l(o.current,u);else{const b=o.current.querySelectorAll('[role="option"]')[0];l(o.current,b)}break}case a.KeyboardKeys.UP:{i.preventDefault();const s=y(o.current);if(!s)return;const u=s.previousSibling;if(u)l(o.current,u);else{const f=o.current.querySelectorAll('[role="option"]'),b=f[f.length-1];l(o.current,b)}break}case a.KeyboardKeys.SPACE:case a.KeyboardKeys.ENTER:{i.preventDefault();const s=y(o.current);s.getAttribute("data-opt-group")?t(s.getAttribute("data-opt-group-children").split(","),s.getAttribute("data-opt-group")):t(s.getAttribute("data-strapi-value")),c||r();break}}};return O.jsx(v.Flex,{as:"ul",gap:1,direction:"column",alignItems:"stretch",role:"listbox","aria-labelledby":e,tabIndex:-1,ref:o,onKeyDown:S,onBlur:r,children:n})},l=(e,t)=>{e.setAttribute("aria-activedescendant",t.getAttribute("id")),e.querySelectorAll('[role="option"]').forEach(r=>r.classList.remove("is-focused")),t.classList.add("is-focused"),m.compute(t,{scrollMode:"if-needed",block:"nearest",inline:"nearest"}).forEach(({el:r,top:d,left:o})=>{r.scrollTop=d,r.scrollLeft=o})},k=e=>{const t=p.useRef(null);return p.useEffect(()=>{t.current.focus()},[]),p.useEffect(()=>{if(!t.current)return;const n=t.current.querySelector('[aria-selected="true"]'),c=t.current.querySelectorAll('[role="option"]');let r;n?r=n:e===K.Keyboard?r=c[c.length-1]:e===g.Keyboard&&(r=c[0]),r&&(e===K.Keyboard||e===g.Keyboard)&&l(t.current,r)},[]),t},y=e=>{const t=e.getAttribute("aria-activedescendant");return e.querySelector(`#${t}`)};exports.SelectList=h;

package/dist/Select/SelectParts.cjs

@@ -1,83 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),R=require("react"),d=require("@strapi/icons"),o=require("@strapi/ui-primitives"),p=require("styled-components"),j=require("../hooks/useComposeRefs.cjs"),c=require("../Flex/Flex.cjs"),f=require("../Box/Box.cjs"),u=require("../themes/utils.cjs"),g=require("../Typography/Typography.cjs"),I=e=>e&&e.__esModule?e:{default:e};function T(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,n.get?n:{enumerable:!0,get:()=>e[s]})}}return t.default=e,Object.freeze(t)}const a=T(R),l=I(p),v=a.forwardRef(({onClear:e,clearLabel:t="Clear",startIcon:s,disabled:n,hasError:h,size:m="M",children:x,...b},$)=>{const i=a.useRef(null),S=y=>{e&&!n&&(e(y),i.current.focus())},w=j.useComposedRefs(i,$);return r.jsx(o.Select.Trigger,{asChild:!0,children:r.jsxs(q,{"aria-disabled":n,$hasError:h,$size:m,ref:w,alignItems:"center",justifyContent:"space-between",position:"relative",overflow:"hidden",hasRadius:!0,background:n?"neutral150":"neutral0",paddingLeft:3,paddingRight:3,gap:4,cursor:"default",width:"100%",...b,children:[r.jsxs(c.Flex,{flex:"1",as:"span",gap:3,children:[s&&r.jsx(f.Box,{as:"span","aria-hidden":!0,children:s}),x]}),r.jsxs(c.Flex,{as:"span",gap:3,children:[e?r.jsx(C,{as:"button",hasRadius:!0,background:"transparent",role:"button",tabIndex:0,onClick:S,"aria-disabled":n,"aria-label":t,title:t,cursor:"pointer",children:r.jsx(d.Cross,{})}):null,r.jsx(k,{children:r.jsx(d.CarretDown,{})})]})]})})}),C=l.default(f.Box)`
-  border: none;
-
-  svg {
-    height: ${11/16}rem;
-    width: ${11/16}rem;
-  }
-
-  svg path {
-    fill: ${({theme:e})=>e.colors.neutral600};
-  }
-`,q=l.default(c.Flex)`
-  border: 1px solid ${({theme:e,$hasError:t})=>t?e.colors.danger600:e.colors.neutral200};
-  min-height: ${({theme:e,$size:t})=>u.getThemeSize("input")({theme:e,size:t})};
-
-  &[aria-disabled='true'] {
-    color: ${e=>e.theme.colors.neutral600};
-  }
-
-  /* Required to ensure the below inputFocusStyles are adhered too */
-  &:focus-visible {
-    outline: none;
-  }
-
-  ${({theme:e,$hasError:t})=>u.inputFocusStyle()({theme:e,hasError:t})};
-`,k=l.default(o.Select.Icon)`
-  & > svg {
-    width: ${6/16}rem;
-
-    & > path {
-      fill: ${({theme:e})=>e.colors.neutral600};
-    }
-  }
-`,V=a.forwardRef(({children:e,placeholder:t,...s},n)=>r.jsx(_,{ref:n,ellipsis:!0,...s,children:r.jsx(P,{placeholder:t,children:e})})),_=l.default(g.Typography)`
-  flex: 1;
-`,P=l.default(o.Select.Value)`
-  display: flex;
-  gap: ${({theme:e})=>e.spaces[1]};
-  flex-wrap: wrap;
-`,z=l.default(o.Select.Content)`
-  background: ${({theme:e})=>e.colors.neutral0};
-  box-shadow: ${({theme:e})=>e.shadows.filterShadow};
-  border: 1px solid ${({theme:e})=>e.colors.neutral150};
-  border-radius: ${({theme:e})=>e.borderRadius};
-  min-width: var(--radix-select-trigger-width);
-  /* This is from the design-system figma file. */
-  max-height: 15rem;
-  z-index: ${({theme:e})=>e.zIndices[1]};
-`,F=l.default(o.Select.Viewport)`
-  padding: ${({theme:e})=>e.spaces[1]};
-`,O=a.forwardRef((e,t)=>r.jsx(B,{ref:t,...e})),M=p.css`
-  width: 100%;
-  border: none;
-  text-align: left;
-  outline-offset: -3px;
-  border-radius: ${e=>e.theme.borderRadius};
-  padding: ${e=>`${e.theme.spaces[2]} ${e.theme.spaces[4]}`};
-  padding-left: ${({theme:e})=>e.spaces[4]};
-  background-color: ${({theme:e})=>e.colors.neutral0};
-  display: flex;
-  align-items: center;
-  gap: ${({theme:e})=>e.spaces[2]};
-  white-space: nowrap;
-  user-select: none;
-
-  &:focus-visible {
-    outline: none;
-    background-color: ${({theme:e})=>e.colors.primary100};
-  }
-`,B=l.default(o.Select.Item)`
-  ${M}
-
-  &:hover {
-    background-color: ${({theme:e})=>e.colors.primary100};
-  }
-
-  &[data-state='checked'] {
-    ${g.Typography} {
-      font-weight: bold;
-      color: ${({theme:e})=>e.colors.primary600};
-    }
-  }
-`,D=o.Select.Root,G=v,E=V,N=o.Select.Portal,A=z,H=F,J=O,K=o.Select.ItemIndicator,L=o.Select.ItemText,Q=o.Select.Group;exports.Content=A;exports.Group=Q;exports.Item=J;exports.ItemIndicator=K;exports.ItemText=L;exports.Portal=N;exports.Root=D;exports.Trigger=G;exports.Value=E;exports.Viewport=H;

package/dist/Select/SingleSelect.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),E=require("react"),s=require("./SelectParts.cjs"),V=require("../helpers/strings.cjs"),H=require("../hooks/useComposeRefs.cjs"),q=require("../hooks/useId.cjs"),W=require("../hooks/useIntersection.cjs"),z=require("../Field/Field.cjs"),D=require("../Flex/Flex.cjs"),A=require("../Field/FieldLabel.cjs"),G=require("../Field/FieldHint.cjs"),J=require("../Field/FieldError.cjs"),O=require("../Box/Box.cjs"),K=require("../Typography/Typography.cjs");function Q(t){if(t&&t.__esModule)return t;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const i=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(r,n,i.get?i:{enumerable:!0,get:()=>t[n]})}}return r.default=t,Object.freeze(r)}const l=Q(E),U=l.forwardRef(({error:t,hint:r,id:n,label:i,labelAction:c,required:u,selectButtonTitle:S,...g},a)=>{const d=q.useId(n),f=l.useRef(null),x=()=>{f.current.focus()},j=H.useComposedRefs(a,f);return e.jsx(z.Field,{hint:r,error:t,id:d,required:u,children:e.jsxs(D.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[i?e.jsx(A.FieldLabel,{onClick:x,action:c,children:i}):null,e.jsx(R,{label:i,id:d,ref:j,required:u,...g}),e.jsx(G.FieldHint,{}),e.jsx(J.FieldError,{})]})})}),R=l.forwardRef(({"aria-label":t,id:r,children:n,clearLabel:i="Clear",customizeContent:c,disabled:u,error:S,label:g,onChange:a,onClear:d,onReachEnd:f,placeholder:x,required:j,selectButtonTitle:Y,startIcon:y,size:T="M",value:p,...F},B)=>{const[C,I]=l.useState(),[w,_]=l.useState(!1),$=o=>{_(o)},v=o=>{d&&d(o),a||I("")},P=`${r}-hint`,k=`${r}-error`,L=o=>{a?a(typeof p=="number"?Number(o):o):I(o)},b=l.useRef(null),M=q.useId(),m=`intersection-${V.stripReactIdOfColon(M)}`,N=o=>{f&&f(o)};W.useIntersection(b,N,{selectorToWatch:`#${m}`,skipWhen:!w});const h=(typeof p<"u"&&p!==null?p.toString():C)??"";return e.jsxs(s.Root,{onOpenChange:$,disabled:u,required:j,onValueChange:L,value:h,...F,children:[e.jsx(s.Trigger,{ref:B,"aria-label":g??t,"aria-describedby":r?`${P} ${k}`:void 0,id:r,startIcon:y,size:T,hasError:!!S,disabled:u,clearLabel:i,onClear:h&&d?v:void 0,children:e.jsx(s.Value,{placeholder:x,textColor:h?"neutral800":"neutral600",children:h&&c?c(h):void 0})}),e.jsx(s.Portal,{children:e.jsx(s.Content,{position:"popper",sideOffset:4,children:e.jsxs(s.Viewport,{ref:b,children:[n,e.jsx(O.Box,{id:m,width:"100%",height:"1px"})]})})})]})}),X=l.forwardRef(({value:t,startIcon:r,children:n,...i},c)=>e.jsxs(s.Item,{ref:c,value:t.toString(),...i,children:[r&&e.jsx(O.Box,{as:"span","aria-hidden":!0,children:r}),e.jsx(K.Typography,{textColor:"neutral800",children:e.jsx(s.ItemText,{children:n})})]}));exports.SingleSelect=U;exports.SingleSelectInput=R;exports.SingleSelectOption=X;

package/dist/Select/index.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./MultiSelectNested.cjs"),e=require("./MultiSelect.cjs"),t=require("./SingleSelect.cjs"),i=require("./Select.cjs"),c=require("./Option.cjs"),S=require("./OptGroup.cjs"),u=require("./SelectList.cjs");exports.MultiSelectNested=l.MultiSelectNested;exports.MultiSelect=e.MultiSelect;exports.MultiSelectGroup=e.MultiSelectGroup;exports.MultiSelectOption=e.MultiSelectOption;exports.SingleSelect=t.SingleSelect;exports.SingleSelectOption=t.SingleSelectOption;exports.Select=i.Select;exports.Option=c.Option;exports.OptGroup=S.OptGroup;exports.SelectList=u.SelectList;

package/dist/SimpleMenu/SimpleMenu.cjs

@@ -1,35 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),N=require("@strapi/icons"),C=require("@strapi/ui-primitives"),F=require("react-router-dom"),W=require("styled-components"),R=require("./utils.cjs"),s=require("../helpers/keyboardKeys.cjs"),H=require("../hooks/useId.cjs"),U=require("../Link/Link.cjs"),M=require("../Button/Button.cjs"),z=require("../Popover/Popover.cjs"),E=require("../Box/Box.cjs"),D=require("../Typography/Typography.cjs"),G=require("../Flex/Flex.cjs"),w=e=>e&&e.__esModule?e:{default:e},K=w(r),m=w(W),J=m.default.button`
-  border: none;
-  padding: 0;
-  background: transparent;
-  cursor: pointer;
-  ${R.getOptionStyle}
-`,Q=m.default(F.NavLink)`
-  text-decoration: none;
-  ${R.getOptionStyle}
-`,X=m.default(U.Link)`
-  /* Removing Link hover effect */
-  &:hover {
-    color: currentColor;
-  }
-
-  &:focus-visible {
-    /* Removing Link focus-visible after properties and reset to global outline */
-    outline: 2px solid ${({theme:e})=>e.colors.primary600};
-    outline-offset: 2px;
-    &:after {
-      content: none;
-    }
-  }
-
-  ${R.getOptionStyle}
-`,Y=m.default.span`
-  display: flex;
-  align-items: center;
-  svg {
-    height: 4px;
-    width: 6px;
-  }
-`,Z=m.default(M.Button)`
-  padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
-`,ee=({children:e,onClick:h=()=>{},to:i,isFocused:u=!1,href:c,...j})=>{const a=r.useRef();r.useEffect(()=>{u&&a.current&&a.current.focus()},[u]);const l={tabIndex:u?0:-1,ref:a,role:"menuitem",...j},d=x=>{(x.key===s.KeyboardKeys.SPACE||x.key===s.KeyboardKeys.ENTER)&&h()};return i&&!c?o.jsx(Q,{to:i,...l,children:o.jsx(E.Box,{padding:2,children:o.jsx(D.Typography,{children:e})})}):c&&!i?o.jsx(X,{isExternal:!0,href:c,...l,children:o.jsx(E.Box,{padding:2,children:o.jsx(D.Typography,{children:e})})}):o.jsx(J,{onKeyDown:d,onMouseDown:h,type:"button",...l,children:o.jsx(E.Box,{padding:2,children:o.jsx(D.Typography,{children:e})})})},ne=({label:e,children:h,id:i,as:u,onOpen:c=()=>{},onClose:j=()=>{},size:a="M",popoverPlacement:l="bottom-start",onReachEnd:d,...x})=>{const f=r.useRef(void 0),k=H.useId(i),b=r.useRef(!1),[p,y]=r.useState(!1),[I,v]=r.useState(0),g=r.Children.toArray(h),P=a==="S"?Z:M.Button,T=u||P,q=!!d&&typeof d=="function";r.useEffect(()=>{if(["string","number"].includes(typeof e)){const n=g.findIndex(t=>K.default.isValidElement(t)&&t.props.children===e||t===e);n!==-1&&v(n)}},[e]);const S=C.useCallbackRef(c),B=C.useCallbackRef(j);r.useEffect(()=>{b?.current?p?S():B():b.current=!0},[b,B,S,p]),r.useEffect(()=>{K.default.isValidElement(e)&&I===-1&&f.current.focus()},[e,I]);const O=n=>{p&&(n.key===s.KeyboardKeys.ESCAPE&&(n.stopPropagation(),y(!1),f.current.focus()),n.key===s.KeyboardKeys.DOWN&&v(t=>t===g.length-1?0:t+1),n.key===s.KeyboardKeys.UP&&v(t=>t===0?g.length-1:t-1))},$=n=>{(n.key===s.KeyboardKeys.ENTER||n.key===s.KeyboardKeys.SPACE)&&y(t=>!t)},L=n=>{n.preventDefault(),n.currentTarget.contains(n.relatedTarget)||y(!1)},_=n=>{n.preventDefault(),y(t=>!t)},A=()=>{q&&d()},V=g.map((n,t)=>o.jsx(G.Flex,{as:"li",justifyContent:"center",role:"menuitem",children:K.default.isValidElement(n)?r.cloneElement(n,{onClick(){n.props.onClick(),y(!1),f.current.focus()},isFocused:I===t}):n},t));return o.jsxs("div",{onKeyDown:O,children:[o.jsx(T,{label:K.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":p,"aria-controls":k,onKeyDown:$,onMouseDown:_,ref:f,type:"button",variant:"ghost",endIcon:o.jsx(Y,{children:o.jsx(N.CarretDown,{"aria-hidden":!0})}),...x,children:e}),p&&o.jsx(z.Popover,{onBlur:L,placement:l,source:f,onReachEnd:A,intersectionId:q?`popover-${k}`:void 0,spacing:4,children:o.jsx(E.Box,{role:"menu",as:"ul",padding:1,id:k,children:V})})]})};exports.MenuItem=ee;exports.SimpleMenu=ne;

package/dist/SimpleMenu/index.cjs

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

package/dist/SimpleMenu/utils.cjs

@@ -1,12 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=({theme:o})=>`
-    text-align: left;
-    width: 100%;
-    color: ${o.colors.neutral800};
-    border-radius: ${o.borderRadius};
-    &:focus {
-        background-color: ${o.colors.primary100};
-    }
-    &:not([aria-disabled]):hover {
-        background-color: ${o.colors.primary100};
-    }
-`;exports.getOptionStyle=r;

package/dist/Stack/Stack.cjs

@@ -1,19 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("react"),m=require("styled-components"),s=require("../helpers/theme.cjs"),o=require("../Flex/Flex.cjs"),f=e=>e&&e.__esModule?e:{default:e},c=f(m),l={size:!0,spacing:!0},g=c.default(o.Flex).withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
-  & > * {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  & > * + * {
-    margin-top: ${({theme:e,spacing:t})=>s.extractStyleFromTheme(e.spaces,t,void 0)};
-  }
-`,h=c.default(o.Flex).withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
-  & > * {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  & > * + * {
-    margin-left: ${({theme:e,spacing:t})=>s.extractStyleFromTheme(e.spaces,t,void 0)};
-  }
-`,d=u.forwardRef(({horizontal:e=!1,spacing:t,size:r,...n},a)=>(r&&console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead'),e?i.jsx(h,{ref:a,spacing:t||r,...n}):i.jsx(g,{direction:"column",alignItems:"stretch",ref:a,spacing:t||r,...n})));d.displayName="Stack";exports.Stack=d;

package/dist/Stack/index.cjs

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

package/dist/Status/Status.cjs

@@ -1,11 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),p=require("styled-components"),b=require("../Box/Box.cjs"),x=require("../Typography/Typography.cjs"),$=require("../Flex/Flex.cjs"),h=o=>o&&o.__esModule?o:{default:o},u=h(p),y=u.default.div`
-  margin-right: ${({theme:o})=>o.spaces[3]};
-  width: ${6/16}rem;
-  height: ${6/16}rem;
-  border-radius: 50%;
-  background: ${({theme:o,backgroundColor:t})=>o.colors[t]};
-`,f=u.default(b.Box)`
-  ${x.Typography} {
-    color: ${({theme:o,textColor:t})=>o.colors[t]};
-  }
-`,m=({variant:o="primary",showBullet:t=!0,size:e="M",children:s,...l})=>{const c=`${o}100`,a=`${o}200`,i=`${o}600`,g=`${o}600`,d=e==="S"?2:5,n=e==="S"?1:4;return r.jsx(f,{borderColor:a,textColor:g,background:c,hasRadius:!0,paddingTop:n,paddingBottom:n,paddingLeft:d,paddingRight:d,...l,children:t?r.jsxs($.Flex,{children:[r.jsx(y,{backgroundColor:i}),s]}):s})};exports.Status=m;

package/dist/Status/index.cjs

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

package/dist/SubNav/SubNav.cjs

@@ -1,10 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),s=require("styled-components"),u=require("../Grid/Grid.cjs"),a=t=>t&&t.__esModule?t:{default:t},i=a(s),e=`${232/16}rem`,n=i.default(u.Grid)`
-  width: ${e};
-  background: ${({theme:t})=>t.colors.neutral100};
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  overflow-y: auto;
-  border-right: 1px solid ${({theme:t})=>t.colors.neutral200};
-  z-index: 1;
-`,l=({ariaLabel:t,...r})=>o.jsx(n,{"aria-label":t,as:"nav",...r});exports.SubNav=l;exports.subNavWidth=e;

package/dist/SubNav/SubNavHeader.cjs

@@ -1,4 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),v=require("@strapi/icons"),C=require("styled-components"),R=require("../helpers/keyboardKeys.cjs"),T=require("../hooks/useId.cjs"),D=require("../hooks/usePrevious.cjs"),I=require("../Searchbar/SearchForm.cjs"),K=require("../Searchbar/Searchbar.cjs"),_=require("../Divider/Divider.cjs"),c=require("../Box/Box.cjs"),k=require("../Flex/Flex.cjs"),w=require("../Typography/Typography.cjs"),F=require("../IconButton/IconButton.cjs"),O=r=>r&&r.__esModule?r:{default:r},P=O(C),l=P.default(_.Divider)`
-  width: ${24/16}rem;
-  background-color: ${({theme:r})=>r.colors.neutral200};
-`,E=({as:r="h2",label:f,searchLabel:u="",searchable:h,onChange:p=()=>{},value:g="",onClear:x=()=>{},onSubmit:S=()=>{},id:y})=>{const[t,a]=s.useState(!1),d=D.usePrevious(t),b=T.useId(y),o=s.useRef(null),i=s.useRef(null);s.useEffect(()=>{t&&o.current&&o.current.focus(),d&&!t&&i.current&&i.current.focus()},[t,d]);const j=()=>{a(n=>!n)},q=n=>{x(n),o?.current&&o.current.focus()},B=n=>{n.relatedTarget?.id!==b&&a(!1)},m=n=>{n.key===R.KeyboardKeys.ESCAPE&&a(!1)};return t?e.jsxs(c.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4,children:[e.jsx(I.SearchForm,{children:e.jsx(K.Searchbar,{name:"searchbar",value:g,onChange:p,placeholder:"e.g: strapi-plugin-abcd",onKeyDown:m,ref:o,onBlur:B,onClear:q,onSubmit:S,clearLabel:"Clear",size:"S",children:u})}),e.jsx(c.Box,{paddingLeft:2,paddingTop:4,children:e.jsx(l,{})})]}):e.jsxs(c.Box,{paddingLeft:6,paddingTop:6,paddingBottom:2,paddingRight:4,children:[e.jsxs(k.Flex,{justifyContent:"space-between",alignItems:"flex-start",children:[e.jsx(w.Typography,{variant:"beta",as:r,children:f}),h&&e.jsx(F.IconButton,{ref:i,onClick:j,label:u,icon:e.jsx(v.Search,{})})]}),e.jsx(c.Box,{paddingTop:4,children:e.jsx(l,{})})]})};exports.SubNavHeader=E;

package/dist/SubNav/SubNavLink.cjs

@@ -1,39 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("@strapi/icons"),p=require("react-router-dom"),g=require("styled-components"),t=require("../Box/Box.cjs"),n=require("../Typography/Typography.cjs"),i=require("../Flex/Flex.cjs"),f=r=>r&&r.__esModule?r:{default:r},s=f(g),x=s.default(t.Box)`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  text-decoration: none;
-  color: ${({theme:r})=>r.colors.neutral800};
-  svg > * {
-    fill: ${({theme:r})=>r.colors.neutral600};
-  }
-
-  &.active {
-    ${({theme:r})=>`
-      background-color: ${r.colors.primary100};
-      border-right: 2px solid ${r.colors.primary600};
-      svg > * {
-        fill: ${r.colors.primary700};
-      }
-      ${n.Typography} {
-        color: ${r.colors.primary700};
-        font-weight: 500;
-      }
-      `}
-  }
-
-  &:focus-visible {
-    outline-offset: -2px;
-  }
-`,l=s.default(d.Dot)`
-  width: ${12/16}rem;
-  height: ${4/16}rem;
-  * {
-    fill: ${({theme:r,$active:o})=>o?r.colors.primary600:r.colors.neutral600};
-  }
-`,y=s.default.div`
-  svg {
-    height: ${12/16}rem;
-    width: ${12/16}rem;
-  }
-`,h=({children:r,icon:o,withBullet:a=!1,isSubSectionChild:c=!1,...u})=>e.jsxs(x,{as:p.NavLink,icon:o,background:"neutral100",paddingLeft:c?9:7,paddingBottom:2,paddingTop:2,...u,children:[e.jsxs(i.Flex,{children:[o?e.jsx(y,{children:o}):e.jsx(l,{}),e.jsx(t.Box,{paddingLeft:2,children:e.jsx(n.Typography,{as:"span",children:r})})]}),a&&e.jsx(t.Box,{as:i.Flex,paddingRight:4,children:e.jsx(l,{$active:!0})})]});exports.SubNavLink=h;

package/dist/SubNav/SubNavLinkSection.cjs

@@ -1,19 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),h=require("react"),g=require("@strapi/icons"),f=require("styled-components"),j=require("../hooks/useId.cjs"),i=require("../Box/Box.cjs"),y=require("../Flex/Flex.cjs"),S=require("../Typography/Typography.cjs"),d=e=>e&&e.__esModule?e:{default:e},a=d(h),o=d(f),b=o.default(i.Box)`
-  svg {
-    height: ${4/16}rem;
-    path {
-      fill: ${({theme:e})=>e.colors.neutral700};
-    }
-  }
-`,m=o.default.button`
-  border: none;
-  padding: 0;
-  background: transparent;
-  display: flex;
-  align-items: center;
-`,k=o.default.div`
-  display: flex;
-  align-items: center;
-  width: ${12/16}rem;
-  transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
-`,q=({label:e,children:l,id:c})=>{const[n,u]=a.default.useState(!0),s=j.useId(c),p=()=>{u(r=>!r)};return t.jsxs(i.Box,{children:[t.jsx(b,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4,children:t.jsx(y.Flex,{justifyContent:"space-between",children:t.jsxs(m,{onClick:p,"aria-expanded":n,"aria-controls":s,children:[t.jsx(k,{rotated:n,children:t.jsx(g.CarretDown,{"aria-hidden":!0})}),t.jsx(i.Box,{paddingLeft:2,children:t.jsx(S.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800",children:e})})]})})}),n&&t.jsx("ul",{id:s,children:a.default.Children.map(l,(r,x)=>t.jsx("li",{children:r},x))})]})};exports.SubNavLinkSection=q;

package/dist/SubNav/SubNavSection.cjs

@@ -1,8 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("react"),S=require("styled-components"),f=require("./SubNavSectionLabel.cjs"),j=require("../hooks/useId.cjs"),l=require("../Box/Box.cjs"),b=require("../Flex/Flex.cjs"),m=require("../Badge/Badge.cjs"),a=e=>e&&e.__esModule?e:{default:e},s=a(x),q=a(S),v=q.default(l.Box)`
-  svg {
-    height: ${4/16}rem;
-    path {
-      fill: ${({theme:e})=>e.colors.neutral500};
-    }
-  }
-`,_=({collapsable:e=!1,label:c,badgeLabel:n,children:d,id:u})=>{const[r,p]=s.default.useState(!0),i=j.useId(u),g=()=>{p(o=>!o)};return t.jsxs(b.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsx(v,{paddingLeft:6,paddingTop:1,paddingBottom:1,paddingRight:4,children:t.jsxs(l.Box,{position:"relative",paddingRight:n?6:0,children:[t.jsx(f.SubNavSectionLabel,{onClick:g,ariaExpanded:r,ariaControls:i,collapsable:e,label:c}),n&&t.jsx(m.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)",children:n})]})}),(!e||r)&&t.jsx("ol",{id:i,children:s.default.Children.map(d,(o,h)=>t.jsx("li",{children:o},h))})]})};exports.SubNavSection=_;

package/dist/SubNav/SubNavSectionLabel.cjs

@@ -1,9 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("@strapi/icons"),u=require("styled-components"),x=require("../Flex/Flex.cjs"),o=require("../Box/Box.cjs"),a=require("../Typography/Typography.cjs"),g=e=>e&&e.__esModule?e:{default:e},s=g(u),i=s.default(x.Flex)`
-  border: none;
-  padding: 0;
-  background: transparent;
-`,p=s.default.div`
-  display: flex;
-  align-items: center;
-  transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
-`,h=({collapsable:e=!1,label:t,onClick:d=()=>{},ariaExpanded:n,ariaControls:l})=>e?r.jsxs(i,{as:"button",onClick:d,"aria-expanded":n,"aria-controls":l,textAlign:"left",children:[r.jsx(o.Box,{paddingRight:1,children:r.jsx(a.Typography,{variant:"sigma",textColor:"neutral600",children:t})}),e&&r.jsx(p,{rotated:n,children:r.jsx(c.CarretDown,{"aria-hidden":!0})})]}):r.jsx(i,{children:r.jsx(o.Box,{paddingRight:1,children:r.jsx(a.Typography,{variant:"sigma",textColor:"neutral600",children:t})})});exports.SubNavSectionLabel=h;

package/dist/SubNav/SubNavSections.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),l=require("../Box/Box.cjs"),u=require("../Flex/Flex.cjs"),a=e=>e&&e.__esModule?e:{default:e},d=a(s),x=({children:e,spacing:r=2,horizontal:n=!1,...o})=>t.jsx(l.Box,{paddingTop:2,paddingBottom:4,children:t.jsx(u.Flex,{as:"ol",gap:r,direction:n?"row":"column",alignItems:n?"center":"stretch",...o,children:d.default.Children.map(e,(c,i)=>t.jsx("li",{children:c},i))})});exports.SubNavSections=x;

package/dist/SubNav/index.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SubNav.cjs"),u=require("./SubNavHeader.cjs"),S=require("./SubNavLink.cjs"),i=require("./SubNavLinkSection.cjs"),a=require("./SubNavSection.cjs"),n=require("./SubNavSections.cjs");exports.SubNav=e.SubNav;exports.subNavWidth=e.subNavWidth;exports.SubNavHeader=u.SubNavHeader;exports.SubNavLink=S.SubNavLink;exports.SubNavLinkSection=i.SubNavLinkSection;exports.SubNavSection=a.SubNavSection;exports.SubNavSections=n.SubNavSections;

package/dist/Switch/Switch.cjs

@@ -1,42 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),h=require("react"),f=require("styled-components"),p=require("../Flex/Flex.cjs"),b=require("../Box/Box.cjs"),i=e=>e&&e.__esModule?e:{default:e},g=i(h),c=i(f),n=c.default.div`
-  background: ${({theme:e})=>e.colors.danger500};
-  border: none;
-  border-radius: 16px;
-  position: relative;
-  height: ${24/16}rem;
-  width: ${40/16}rem;
-
-  & span {
-    font-size: ${({visibleLabels:e})=>e?"1rem":0};
-  }
-
-  &:before {
-    content: '';
-    background: ${({theme:e})=>e.colors.neutral0};
-    width: 1rem;
-    height: 1rem;
-    border-radius: 50%;
-    position: absolute;
-    transition: all 0.5s;
-    left: ${({theme:e})=>e.spaces[1]};
-    top: ${({theme:e})=>e.spaces[1]};
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    &:before {
-      transition: none;
-    }
-  }
-`,x=c.default.button`
-  background: transparent;
-  padding: 0;
-  border: none;
-
-  &[aria-checked='true'] ${n} {
-    background: ${({theme:e})=>e.colors.success500};
-  }
-
-  &[aria-checked='true'] ${n}:before {
-    transform: translateX(1rem);
-  }
-`,m=g.default.forwardRef(({label:e,onChange:d,onLabel:o="On",offLabel:s="Off",selected:t,visibleLabels:a=!1,...u},l)=>r.jsx(x,{ref:l,role:"switch","aria-checked":t,"aria-label":e,onClick:d,visibleLabels:a,type:"button",...u,children:r.jsxs(p.Flex,{children:[r.jsxs(n,{children:[r.jsx("span",{children:o}),r.jsx("span",{children:s})]}),a&&r.jsx(b.Box,{as:"span","aria-hidden":!0,paddingLeft:2,color:t?"success600":"danger600",children:t?o:s})]})}));exports.Switch=m;

package/dist/Switch/index.cjs

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

package/dist/Table/Cell.cjs

@@ -1,17 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("styled-components"),r=require("../RawTable/RawCell.cjs"),i=require("../Flex/Flex.cjs"),a=e=>e&&e.__esModule?e:{default:e},n=a(c),s=n.default(r.RawTd)`
-  vertical-align: middle;
-  text-align: left;
-  color: ${({theme:e})=>e.colors.neutral600};
-  outline-offset: -4px;
-
-  /**
-  * Hack to make sure the checkbox looks aligned
-  */
-  input {
-    vertical-align: sub;
-  }
-`,u=n.default.span`
-  svg {
-    height: ${4/16}rem;
-  }
-`,d=({children:e,action:l,...o})=>t.jsx(s,{as:r.RawTh,...o,children:t.jsxs(i.Flex,{children:[e,t.jsx(u,{children:l})]})}),h=({children:e,...l})=>t.jsx(s,{...l,children:e});exports.Td=h;exports.Th=d;

package/dist/Table/TFooter.cjs

@@ -1,22 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("styled-components"),t=require("../Box/Box.cjs"),s=require("../Divider/Divider.cjs"),a=require("../Flex/Flex.cjs"),l=require("../Typography/Typography.cjs"),c=e=>e&&e.__esModule?e:{default:e},i=c(n),u=i.default(t.Box)`
-  height: ${24/16}rem;
-  width: ${24/16}rem;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  svg {
-    height: ${10/16}rem;
-    width: ${10/16}rem;
-  }
-
-  svg path {
-    fill: ${({theme:e})=>e.colors.primary600};
-  }
-`,h=i.default(t.Box)`
-  border-radius: 0 0 ${({theme:e})=>e.borderRadius} ${({theme:e})=>e.borderRadius};
-  display: block;
-  width: 100%;
-  border: none;
-`,x=({children:e,icon:o,...d})=>r.jsxs("div",{children:[r.jsx(s.Divider,{}),r.jsx(h,{as:"button",background:"primary100",padding:5,...d,children:r.jsxs(a.Flex,{children:[r.jsx(u,{"aria-hidden":!0,background:"primary200",children:o}),r.jsx(t.Box,{paddingLeft:3,children:r.jsx(l.Typography,{variant:"pi",fontWeight:"bold",textColor:"primary600",children:e})})]})})]});exports.TFooter=x;

package/dist/Table/Table.cjs

@@ -1,34 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),f=require("styled-components"),h=require("../RawTable/RawTable.cjs"),s=require("../Box/Box.cjs"),b=t=>t&&t.__esModule?t:{default:t},a=b(f),g=a.default(s.Box)`
-  overflow: hidden;
-  border: 1px solid ${({theme:t})=>t.colors.neutral150};
-`,w=a.default(h.RawTable)`
-  width: 100%;
-  white-space: nowrap;
-`,p=a.default(s.Box)`
-  &:before {
-    // TODO: make sure to add a token for this weird stuff
-    background: linear-gradient(90deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
-    opacity: 0.2;
-    position: absolute;
-    height: 100%;
-    content: ${({overflowing:t})=>t==="both"||t==="left"?"''":void 0};
-    box-shadow: ${({theme:t})=>t.shadows.tableShadow};
-    width: ${({theme:t})=>t.spaces[2]};
-    left: 0;
-  }
-
-  &:after {
-    // TODO: make sure to add a token for this weird stuff
-    background: linear-gradient(270deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
-    opacity: 0.2;
-    position: absolute;
-    height: 100%;
-    content: ${({overflowing:t})=>t==="both"||t==="right"?"''":void 0};
-    box-shadow: ${({theme:t})=>t.shadows.tableShadow};
-    width: ${({theme:t})=>t.spaces[2]};
-    right: 0;
-    top: 0;
-  }
-`,x=a.default(s.Box)`
-  overflow-x: auto;
-`,S=({footer:t,...i})=>{const l=n.useRef(null),[d,o]=n.useState(),c=e=>{const u=e.target.scrollWidth-e.target.clientWidth;if(e.target.scrollLeft===0){o("right");return}if(e.target.scrollLeft===u){o("left");return}e.target.scrollLeft>0&&o("both")};return n.useEffect(()=>{l.current.scrollWidth>l.current.clientWidth&&o("right")},[]),r.jsxs(g,{shadow:"tableShadow",hasRadius:!0,background:"neutral0",children:[r.jsx(p,{overflowing:d,position:"relative",children:r.jsx(x,{ref:l,onScroll:c,paddingLeft:6,paddingRight:6,children:r.jsx(w,{...i})})}),t]})};exports.Table=S;

package/dist/Table/Tbody.cjs

@@ -1,5 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("styled-components"),d=require("../RawTable/RawTbody.cjs"),n=t=>t&&t.__esModule?t:{default:t},s=n(r),u=s.default(d.RawTbody)`
-  & tr:last-of-type {
-    border-bottom: none;
-  }
-`,l=({children:t,...e})=>o.jsx(u,{...e,children:t});exports.Tbody=l;

package/dist/Table/Thead.cjs

@@ -1,3 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("styled-components"),d=require("../RawTable/RawThead.cjs"),s=e=>e&&e.__esModule?e:{default:e},a=s(o),l=a.default(d.RawThead)`
-  border-bottom: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,n=({children:e,...t})=>r.jsx(l,{...t,children:e});exports.Thead=n;

package/dist/Table/Tr.cjs

@@ -1,20 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("styled-components"),o=require("../RawTable/RawTr.cjs"),s=t=>t&&t.__esModule?t:{default:t},d=s(r),i=d.default(o.RawTr)`
-  border-bottom: 1px solid ${({theme:t})=>t.colors.neutral150};
-
-  & td,
-  & th {
-    padding: ${({theme:t})=>t.spaces[4]};
-  }
-
-  & td:first-of-type,
-  & th:first-of-type {
-    padding: 0 ${({theme:t})=>t.spaces[1]};
-  }
-
-  // Resetting padding values and fixing a height
-  th {
-    padding-top: 0;
-    padding-bottom: 0;
-    height: ${56/16}rem;
-  }
-`,n=t=>e.jsx(i,{...t});exports.Tr=n;

package/dist/Table/index.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Table.cjs"),T=require("./Tbody.cjs"),o=require("./Thead.cjs"),t=require("./Tr.cjs"),e=require("./Cell.cjs"),d=require("./TFooter.cjs");exports.Table=r.Table;exports.Tbody=T.Tbody;exports.Thead=o.Thead;exports.Tr=t.Tr;exports.Td=e.Td;exports.Th=e.Th;exports.TFooter=d.TFooter;

package/dist/Tabs/TabGroup.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),p=require("react"),m=require("./TabsContext.cjs"),x=require("../hooks/useId.cjs");function T(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 o=T(p),i=o.forwardRef(({id:e,initialSelectedTabIndex:r=0,label:t,onTabChange:n,variant:s,...l},b)=>{const c=x.useId(e),[u,a]=o.useState(r);o.useImperativeHandle(b,()=>({_handlers:{setSelectedTabIndex:a}}));const f=o.useMemo(()=>({id:c,selectedTabIndex:u,selectTabIndex:a,label:t,variant:s,onTabChange:n}),[t,n,u,c,s]);return d.jsx(m.TabsContext.Provider,{value:f,children:d.jsx("div",{...l})})});i.displayName="TabGroup";exports.TabGroup=i;

package/dist/Tabs/TabPanels.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),s=require("react"),c=require("./TabsContext.cjs"),i=({children:e,...t})=>{const{id:a,selectedTabIndex:n}=c.useTabs(),o=s.Children.toArray(e).map((l,r)=>s.cloneElement(l,{id:`${a}-${r}`})).filter((l,r)=>r===n);return b.jsx("div",{...t,children:o})},d=({id:e,...t})=>{const a=`${e}-tab`,n=`${e}-tabpanel`;return b.jsx("div",{id:n,role:"tabpanel",tabIndex:0,"aria-labelledby":a,...t})};exports.TabPanel=d;exports.TabPanels=i;

package/dist/Tabs/Tabs.cjs

@@ -1,5 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),x=require("react"),I=require("@strapi/ui-primitives"),K=require("styled-components"),m=require("./components.cjs"),R=require("./TabsContext.cjs"),T=require("../helpers/keyboardKeys.cjs"),C=require("../Typography/Typography.cjs"),k=n=>n&&n.__esModule?n:{default:n},j=k(K),q=(n,u)=>{const i=x.useRef(null),l=x.useRef(!1),a=I.useCallbackRef(u);return x.useEffect(()=>{if(i.current){if(l.current){const d=i.current.querySelector('[tabindex="0"]');d&&(d.focus(),a(n))}l.current||(l.current=!0)}},[n,a]),i},v=j.default.button`
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-`,w=({children:n,...u})=>{const{id:i,selectedTabIndex:l,selectTabIndex:a,label:d,variant:h,onTabChange:g}=R.useTabs(),y=q(l,g),r=x.Children.toArray(n).map((t,b)=>x.cloneElement(t,{id:`${i}-${b}`,index:b,selectedTabIndex:l,onTabClick:()=>a(b),variant:h})),p=t=>{if(!r.every(s=>s.props.disabled))switch(t.key){case T.KeyboardKeys.RIGHT:{const s=l+1,e=o=>r[o].props.disabled?o===r.length-1?e(0):e(o+1):o,f=e(s>=r.length?0:s);a(f);break}case T.KeyboardKeys.LEFT:{const s=l-1,e=o=>r[o].props.disabled?e(o===0?r.length-1:o-1):o,f=e(s<0?r.length-1:s);a(f);break}case T.KeyboardKeys.HOME:{const s=r.findIndex(e=>!e.props.disabled);a(s);break}case T.KeyboardKeys.END:{const e=r.map((f,o)=>({isDisabled:f.props.disabled,index:o})).reverse().find(({isDisabled:f})=>!f);e&&a(e.index);break}}};return h==="simple"?c.jsx("div",{ref:y,role:"tablist","aria-label":d,onKeyDown:p,...u,children:r}):c.jsx(m.DefaultTabsRow,{ref:y,role:"tablist",alignItems:"flex-end","aria-label":d,onKeyDown:p,...u,children:r})},B=({disabled:n=!1,id:u,children:i,variant:l,hasError:a=!1,index:d,selectedTabIndex:h,onTabClick:g,...y})=>{const r=`${u}-tab`,p=`${u}-tabpanel`,t=d===h,b=()=>{n||g&&g()};if(l==="simple"){let e;return a?e="danger600":t?e="primary600":e="neutral600",c.jsx(v,{id:r,role:"tab","aria-controls":t?p:void 0,tabIndex:t?0:-1,"aria-selected":t,type:"button",onClick:b,"aria-disabled":n,...y,children:c.jsx(m.SimpleTabBox,{padding:4,selected:t,hasError:a,children:c.jsx(C.Typography,{variant:"sigma",textColor:e,children:i})})})}a&&console.warn('The "hasError" prop is only available for the "simple" variant.');const s=h&&h-1===d;return c.jsx(m.DefaultTabButton,{id:r,role:"tab",type:"button","aria-controls":t?p:void 0,tabIndex:t?0:-1,"aria-selected":t,onClick:b,"aria-disabled":n,showRightBorder:!!s,...y,children:c.jsx(m.DefaultTabBox,{padding:t?4:3,background:t?"neutral0":"neutral100",selected:t,children:c.jsx(C.Typography,{fontWeight:"bold",textColor:t?"primary700":"neutral600",children:i})})})};exports.Tab=B;exports.Tabs=w;

package/dist/Tabs/TabsContext.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({id:"",label:"",selectedTabIndex:0,selectTabIndex(){throw new Error("TabsContext.selectTabIndex is not implemented.")}}),s=()=>e.useContext(t);exports.TabsContext=t;exports.useTabs=s;