@strapi/design-system 0.0.0-3cf3ff39

package/dist/Portal/Portal.js

@@ -0,0 +1,9 @@
+import { jsx as m } from "react/jsx-runtime";
+import * as a from "react";
+import { createPortal as e } from "react-dom";
+import { Box as l } from "../Box/Box.js";
+const f = a.forwardRef(({ container: o = globalThis?.document?.body, ...r }, t) => o ? e(m(l, { ref: t, ...r }), o) : null);
+f.displayName = "Portal";
+export {
+  f as Portal
+};

package/dist/Portal/index.cjs

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

package/dist/Portal/index.js

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

package/dist/ProgressBar/ProgressBar.cjs

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),i=require("styled-components"),l=require("../Box/Box.cjs"),n=r=>r&&r.__esModule?r:{default:r},d=n(i),c=d.default(l.Box)`
+  &:before {
+    background-color: ${({theme:r})=>r.colors.neutral0};
+    border-radius: ${({theme:r})=>r.borderRadius};
+    bottom: 0;
+    content: '';
+    position: absolute;
+    top: 0;
+    width: ${({value:r})=>`${r}%`};
+  }
+`,b=({min:r=0,max:t=100,value:e=0,children:a,size:o="M",...s})=>u.jsx(c,{background:"neutral600",hasRadius:!0,"aria-label":a,"aria-valuemax":t,"aria-valuemin":r,"aria-valuenow":e,height:o==="S"?1:2,position:"relative",role:"progressbar",value:e,width:o==="S"?"78px":"102px",...s});exports.ProgressBar=b;

package/dist/ProgressBar/ProgressBar.js

@@ -0,0 +1,17 @@
+import { jsx as s } from "react/jsx-runtime";
+import l from "styled-components";
+import { Box as n } from "../Box/Box.js";
+const u = l(n)`
+  &:before {
+    background-color: ${({ theme: r }) => r.colors.neutral0};
+    border-radius: ${({ theme: r }) => r.borderRadius};
+    bottom: 0;
+    content: '';
+    position: absolute;
+    top: 0;
+    width: ${({ value: r }) => `${r}%`};
+  }
+`, m = ({ min: r = 0, max: e = 100, value: o = 0, children: t, size: a = "M", ...i }) => s(u, { background: "neutral600", hasRadius: !0, "aria-label": t, "aria-valuemax": e, "aria-valuemin": r, "aria-valuenow": o, height: a === "S" ? 1 : 2, position: "relative", role: "progressbar", value: o, width: a === "S" ? "78px" : "102px", ...i });
+export {
+  m as ProgressBar
+};

package/dist/ProgressBar/index.cjs

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

package/dist/ProgressBar/index.js

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

package/dist/Radio/Radio.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../BaseRadio/BaseRadio.cjs"),s=require("../Flex/Flex.cjs"),a=require("../Typography/Typography.cjs"),i=({children:r,...t})=>e.jsxs(s.Flex,{alignItems:"center",as:"label",gap:2,children:[e.jsx(o.BaseRadio,{...t}),e.jsx(a.Typography,{textColor:"neutral800",children:r})]});exports.Radio=i;

package/dist/Radio/Radio.js

@@ -0,0 +1,8 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { BaseRadio as a } from "../BaseRadio/BaseRadio.js";
+import { Flex as i } from "../Flex/Flex.js";
+import { Typography as m } from "../Typography/Typography.js";
+const x = ({ children: o, ...e }) => t(i, { alignItems: "center", as: "label", gap: 2, children: [r(a, { ...e }), r(m, { textColor: "neutral800", children: o })] });
+export {
+  x as Radio
+};

package/dist/Radio/index.cjs

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

package/dist/Radio/index.js

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

package/dist/RawTable/RawCell.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),l=require("react"),F=require("./RawTableContext.cjs"),s=require("../helpers/getFocusableNodes.cjs"),d=require("../helpers/keyboardKeys.cjs"),v=require("../Box/Box.cjs"),w=n=>g.jsx(y,{...n,as:"th"}),y=({coords:n={col:0,row:0},as:h="td",...x})=>{const a=l.useRef(null),{rowIndex:T,colIndex:E,setTableValues:N}=F.useTable(),[c,f]=l.useState(!1),K=e=>{const t=s.getFocusableNodes(a.current,!0);if(t.length===0||t.length===1&&s.getFocusableNodesWithKeyboardNav(t).length===0)return;if(t.length>1&&!t.find(u=>u.tagName!=="BUTTON")){e.preventDefault();const u=t.findIndex(r=>r===document.activeElement);if(e.key===d.KeyboardKeys.RIGHT){const r=t[u+1];r&&(e.stopPropagation(),r.focus())}else if(e.key===d.KeyboardKeys.LEFT){const r=t[u-1];r&&(e.stopPropagation(),r.focus())}return}const o=e.key===d.KeyboardKeys.ENTER;if(o&&!c)f(!0);else if((e.key===d.KeyboardKeys.ESCAPE||o)&&c){if(o&&document.activeElement?.tagName==="A")return;f(!1),a.current.focus()}else c&&e.stopPropagation()},i=T===n.row-1&&E===n.col-1;l.useLayoutEffect(()=>{const e=s.getFocusableNodes(a.current,!0);e.length===0||e.length===1&&s.getFocusableNodesWithKeyboardNav(e).length!==0||e.length>1&&e.find(t=>t.tagName!=="BUTTON")?(a.current.setAttribute("tabIndex",!c&&i?"0":"-1"),e.forEach((t,o)=>{t.setAttribute("tabIndex",c?"0":"-1"),c&&o===0&&t.focus()})):e.forEach(t=>{t.setAttribute("tabIndex",i?"0":"-1")})},[c,i]);const b=l.useCallback(()=>{const e=s.getFocusableNodes(a.current,!0);e.length>=1&&(s.getFocusableNodesWithKeyboardNav(e).length!==0||!e.find(t=>t.tagName!=="BUTTON"))&&f(!0),N({rowIndex:n.row-1,colIndex:n.col-1})},[n,N]);return l.useLayoutEffect(()=>{const e=a.current;return s.getFocusableNodes(e,!0).forEach(o=>{o.addEventListener("focus",b)}),()=>{s.getFocusableNodes(e,!0).forEach(u=>{u.removeEventListener("focus",b)})}},[b]),g.jsx(v.Box,{role:"gridcell",as:h,ref:a,onKeyDown:K,...x})};exports.RawTd=y;exports.RawTh=w;

package/dist/RawTable/RawCell.js

@@ -0,0 +1,60 @@
+import { jsx as g } from "react/jsx-runtime";
+import { useRef as y, useState as I, useLayoutEffect as N, useCallback as v } from "react";
+import { useTable as w } from "./RawTableContext.js";
+import { getFocusableNodes as u, getFocusableNodesWithKeyboardNav as b } from "../helpers/getFocusableNodes.js";
+import { KeyboardKeys as f } from "../helpers/keyboardKeys.js";
+import { Box as A } from "../Box/Box.js";
+const D = (n) => g(B, { ...n, as: "th" }), B = ({ coords: n = { col: 0, row: 0 }, as: h = "td", ...E }) => {
+  const s = y(null), { rowIndex: p, colIndex: x, setTableValues: m } = w(), [r, l] = I(!1), T = (e) => {
+    const t = u(s.current, !0);
+    if (t.length === 0 || t.length === 1 && b(t).length === 0)
+      return;
+    if (t.length > 1 && !t.find((a) => a.tagName !== "BUTTON")) {
+      e.preventDefault();
+      const a = t.findIndex((c) => c === document.activeElement);
+      if (e.key === f.RIGHT) {
+        const c = t[a + 1];
+        c && (e.stopPropagation(), c.focus());
+      } else if (e.key === f.LEFT) {
+        const c = t[a - 1];
+        c && (e.stopPropagation(), c.focus());
+      }
+      return;
+    }
+    const o = e.key === f.ENTER;
+    if (o && !r)
+      l(!0);
+    else if ((e.key === f.ESCAPE || o) && r) {
+      if (o && document.activeElement?.tagName === "A")
+        return;
+      l(!1), s.current.focus();
+    } else
+      r && e.stopPropagation();
+  }, i = p === n.row - 1 && x === n.col - 1;
+  N(() => {
+    const e = u(s.current, !0);
+    e.length === 0 || e.length === 1 && b(e).length !== 0 || e.length > 1 && e.find((t) => t.tagName !== "BUTTON") ? (s.current.setAttribute("tabIndex", !r && i ? "0" : "-1"), e.forEach((t, o) => {
+      t.setAttribute("tabIndex", r ? "0" : "-1"), r && o === 0 && t.focus();
+    })) : e.forEach((t) => {
+      t.setAttribute("tabIndex", i ? "0" : "-1");
+    });
+  }, [r, i]);
+  const d = v(() => {
+    const e = u(s.current, !0);
+    e.length >= 1 && (b(e).length !== 0 || !e.find((t) => t.tagName !== "BUTTON")) && l(!0), m({ rowIndex: n.row - 1, colIndex: n.col - 1 });
+  }, [n, m]);
+  return N(() => {
+    const e = s.current;
+    return u(e, !0).forEach((o) => {
+      o.addEventListener("focus", d);
+    }), () => {
+      u(e, !0).forEach((a) => {
+        a.removeEventListener("focus", d);
+      });
+    };
+  }, [d]), g(A, { role: "gridcell", as: h, ref: s, onKeyDown: T, ...E });
+};
+export {
+  B as RawTd,
+  D as RawTh
+};

package/dist/RawTable/RawTable.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("react"),P=require("./focusFocusable.cjs"),R=require("./RawTableContext.cjs"),t=require("../helpers/keyboardKeys.cjs"),q=({colCount:l,rowCount:c,jumpStep:b=3,initialCol:D=0,initialRow:k=0,...d})=>{const f=r.useRef(null),n=r.useRef(!1),[o,s]=r.useState(k),[y,u]=r.useState(D),K=r.useCallback(({colIndex:a,rowIndex:e})=>{u(a),s(e)},[]);r.useEffect(()=>{n.current&&P.focusFocusable(f.current),n.current||(n.current=!0)},[y,o]);const T=a=>{switch(a.key){case t.KeyboardKeys.RIGHT:{a.preventDefault(),u(e=>e<l-1?e+1:e);break}case t.KeyboardKeys.LEFT:{a.preventDefault(),u(e=>e>0?e-1:e);break}case t.KeyboardKeys.UP:{a.preventDefault(),s(e=>e>0?e-1:e);break}case t.KeyboardKeys.DOWN:{a.preventDefault(),s(e=>e<c-1?e+1:e);break}case t.KeyboardKeys.HOME:{a.preventDefault(),a.ctrlKey&&s(0),u(0);break}case t.KeyboardKeys.END:{a.preventDefault(),a.ctrlKey&&s(c-1),u(l-1);break}case t.KeyboardKeys.PAGE_DOWN:{a.preventDefault(),s(e=>e+b<c?e+b:c-1);break}case t.KeyboardKeys.PAGE_UP:{a.preventDefault(),s(e=>e-b>0?e-b:0);break}}},E=r.useMemo(()=>({rowIndex:o,colIndex:y,setTableValues:K}),[y,o,K]);return i.jsx(R.RawTableContext.Provider,{value:E,children:i.jsx("table",{role:"grid",ref:f,"aria-rowcount":c,"aria-colcount":l,onKeyDown:T,...d})})};exports.RawTable=q;

package/dist/RawTable/RawTable.js

@@ -0,0 +1,53 @@
+import { jsx as D } from "react/jsx-runtime";
+import { useRef as k, useState as m, useCallback as h, useEffect as G, useMemo as N } from "react";
+import { focusFocusable as O } from "./focusFocusable.js";
+import { RawTableContext as A } from "./RawTableContext.js";
+import { KeyboardKeys as a } from "../helpers/keyboardKeys.js";
+const _ = ({ colCount: l, rowCount: c, jumpStep: f = 3, initialCol: y = 0, initialRow: E = 0, ...K }) => {
+  const b = k(null), n = k(!1), [u, r] = m(E), [o, s] = m(y), i = h(({ colIndex: t, rowIndex: e }) => {
+    s(t), r(e);
+  }, []);
+  G(() => {
+    n.current && O(b.current), n.current || (n.current = !0);
+  }, [o, u]);
+  const P = (t) => {
+    switch (t.key) {
+      case a.RIGHT: {
+        t.preventDefault(), s((e) => e < l - 1 ? e + 1 : e);
+        break;
+      }
+      case a.LEFT: {
+        t.preventDefault(), s((e) => e > 0 ? e - 1 : e);
+        break;
+      }
+      case a.UP: {
+        t.preventDefault(), r((e) => e > 0 ? e - 1 : e);
+        break;
+      }
+      case a.DOWN: {
+        t.preventDefault(), r((e) => e < c - 1 ? e + 1 : e);
+        break;
+      }
+      case a.HOME: {
+        t.preventDefault(), t.ctrlKey && r(0), s(0);
+        break;
+      }
+      case a.END: {
+        t.preventDefault(), t.ctrlKey && r(c - 1), s(l - 1);
+        break;
+      }
+      case a.PAGE_DOWN: {
+        t.preventDefault(), r((e) => e + f < c ? e + f : c - 1);
+        break;
+      }
+      case a.PAGE_UP: {
+        t.preventDefault(), r((e) => e - f > 0 ? e - f : 0);
+        break;
+      }
+    }
+  }, T = N(() => ({ rowIndex: u, colIndex: o, setTableValues: i }), [o, u, i]);
+  return D(A.Provider, { value: T, children: D("table", { role: "grid", ref: b, "aria-rowcount": c, "aria-colcount": l, onKeyDown: P, ...K }) });
+};
+export {
+  _ as RawTable
+};

package/dist/RawTable/RawTableContext.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({rowIndex:0,colIndex:0,setTableValues(){throw new Error("setTableValues must be initialized via the RawTableContext.Provider")}}),a=()=>e.useContext(t);exports.RawTableContext=t;exports.useTable=a;

package/dist/RawTable/RawTableContext.js

@@ -0,0 +1,12 @@
+import { createContext as e, useContext as t } from "react";
+const o = e({
+  rowIndex: 0,
+  colIndex: 0,
+  setTableValues() {
+    throw new Error("setTableValues must be initialized via the RawTableContext.Provider");
+  }
+}), r = () => t(o);
+export {
+  o as RawTableContext,
+  r as useTable
+};

package/dist/RawTable/RawTbody.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),l=({children:t,...n})=>{const o=r.Children.toArray(t).map((e,i)=>r.isValidElement(e)?r.cloneElement(e,{"aria-rowindex":i+2}):e);return a.jsx("tbody",{...n,children:o})};exports.RawTbody=l;

package/dist/RawTable/RawTbody.js

@@ -0,0 +1,9 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Children as m, isValidElement as a, cloneElement as l } from "react";
+const s = ({ children: e, ...n }) => {
+  const o = m.toArray(e).map((r, t) => a(r) ? l(r, { "aria-rowindex": t + 2 }) : r);
+  return i("tbody", { ...n, children: o });
+};
+export {
+  s as RawTbody
+};

package/dist/RawTable/RawThead.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("react"),o=({children:t,...n})=>{const a=r.Children.toArray(t).map(e=>r.isValidElement(e)?r.cloneElement(e,{"aria-rowindex":1}):e);return i.jsx("thead",{...n,children:a})};exports.RawThead=o;

package/dist/RawTable/RawThead.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Children as a, isValidElement as i, cloneElement as m } from "react";
+const p = ({ children: e, ...n }) => {
+  const t = a.toArray(e).map((r) => i(r) ? m(r, { "aria-rowindex": 1 }) : r);
+  return o("thead", { ...n, children: t });
+};
+export {
+  p as RawThead
+};

package/dist/RawTable/RawTr.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),c=require("../Box/Box.cjs"),l=({children:o,...t})=>{const i=r.Children.toArray(o).map((e,n)=>r.isValidElement(e)?r.cloneElement(e,{"aria-colindex":n+1,coords:{col:n+1,row:t["aria-rowindex"]}}):e);return a.jsx(c.Box,{as:"tr",...t,children:i})};exports.RawTr=l;

package/dist/RawTable/RawTr.js

@@ -0,0 +1,13 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Children as a, isValidElement as m, cloneElement as l } from "react";
+import { Box as c } from "../Box/Box.js";
+const x = ({ children: n, ...o }) => {
+  const t = a.toArray(n).map((r, e) => m(r) ? l(r, {
+    "aria-colindex": e + 1,
+    coords: { col: e + 1, row: o["aria-rowindex"] }
+  }) : r);
+  return i(c, { as: "tr", ...o, children: t });
+};
+export {
+  x as RawTr
+};

package/dist/RawTable/focusFocusable.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=o=>{const e=o.querySelector('[tabindex="0"]');e&&e.focus()};exports.focusFocusable=t;

package/dist/RawTable/focusFocusable.js

@@ -0,0 +1,7 @@
+const c = (o) => {
+  const e = o.querySelector('[tabindex="0"]');
+  e && e.focus();
+};
+export {
+  c as focusFocusable
+};

package/dist/RawTable/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./RawTable.cjs"),a=require("./RawCell.cjs"),r=require("./RawThead.cjs"),w=require("./RawTbody.cjs"),R=require("./RawTr.cjs");exports.RawTable=e.RawTable;exports.RawTd=a.RawTd;exports.RawTh=a.RawTh;exports.RawThead=r.RawThead;exports.RawTbody=w.RawTbody;exports.RawTr=R.RawTr;

package/dist/RawTable/index.js

@@ -0,0 +1,13 @@
+import { RawTable as a } from "./RawTable.js";
+import { RawTd as w, RawTh as R } from "./RawCell.js";
+import { RawThead as f } from "./RawThead.js";
+import { RawTbody as p } from "./RawTbody.js";
+import { RawTr as x } from "./RawTr.js";
+export {
+  a as RawTable,
+  p as RawTbody,
+  w as RawTd,
+  R as RawTh,
+  f as RawThead,
+  x as RawTr
+};

package/dist/Searchbar/SearchForm.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=e=>r.jsx("form",{...e,role:"search"});exports.SearchForm=o;

package/dist/Searchbar/SearchForm.js

@@ -0,0 +1,5 @@
+import { jsx as o } from "react/jsx-runtime";
+const m = (r) => o("form", { ...r, role: "search" });
+export {
+  m as SearchForm
+};

package/dist/Searchbar/Searchbar.cjs

@@ -0,0 +1,28 @@
+"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/Searchbar.js

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

package/dist/Searchbar/index.cjs

@@ -0,0 +1 @@
+"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/Searchbar/index.js

@@ -0,0 +1,6 @@
+import { Searchbar as e } from "./Searchbar.js";
+import { SearchForm as m } from "./SearchForm.js";
+export {
+  m as SearchForm,
+  e as Searchbar
+};

package/dist/Select/MultiSelect.cjs

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

package/dist/Select/MultiSelect.js

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

package/dist/Select/MultiSelectNested.cjs

@@ -0,0 +1,3 @@
+"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/MultiSelectNested.js

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+import n from "styled-components";
+import { MultiSelectOption as i, MultiSelect as u, MultiSelectGroup as c } from "./MultiSelect.js";
+const o = ({ options: a, ...t }) => r(u, { ...t, children: a.map((e) => "children" in e ? r(c, { label: e.label, values: e.children.map((l) => l.value.toString()), children: e.children.map((l) => r(d, { value: l.value, children: l.label }, l.value)) }, e.label) : r(i, { value: e.value, children: e.label }, e.value)) }), d = n(i)`
+  padding-left: ${({ theme: a }) => a.spaces[7]};
+`;
+export {
+  o as MultiSelectNested
+};

package/dist/Select/OptGroup.cjs

@@ -0,0 +1,5 @@
+"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/OptGroup.js

@@ -0,0 +1,10 @@
+import { MultiSelectGroup as o } from "./MultiSelect.js";
+/**
+ * @preserve
+ * @deprecated This component is only fit for the MultiSelect component.
+ * Therefore, you should import the MultiSelectGroup component instead.
+ */
+const p = o;
+export {
+  p as OptGroup
+};

package/dist/Select/Option.cjs

@@ -0,0 +1,5 @@
+"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/Option.js

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import { MultiSelectOption as m } from "./MultiSelect.js";
+import { useSelectContext as n } from "./Select.js";
+import { SingleSelectOption as r } from "./SingleSelect.js";
+/**
+ * @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: e, ...t }) => {
+  const i = n();
+  return e || i.multi ? o(m, { ...t }) : o(r, { ...t });
+};
+export {
+  u as Option
+};

package/dist/Select/Select.cjs

@@ -0,0 +1,6 @@
+"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/Select.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as l from "react";
+import { MultiSelect as m } from "./MultiSelect.js";
+import { SingleSelect as c } from "./SingleSelect.js";
+const i = l.createContext({ multi: !1 }), r = () => 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 x = (t) => {
+  const o = l.useMemo(() => ({ multi: !!(t.multi || t.withTags) }), [t.multi, t.withTags]);
+  return e(i.Provider, { value: o, children: t.multi || t.withTags ? e(m, { ...t }) : e(c, { ...t }) });
+};
+export {
+  x as Select,
+  r as useSelectContext
+};

package/dist/Select/SelectList.cjs

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