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

package/dist/ProgressBar/ProgressBar.js

@@ -0,0 +1,58 @@
+import i from "react";
+import e from "prop-types";
+import n from "styled-components";
+const d = n.div`
+  background: ${({ theme: r }) => r.colors.neutral600};
+  border-radius: ${({ theme: r }) => r.borderRadius};
+  position: relative;
+
+  width: 78px;
+  height: ${({ theme: r }) => r.spaces[1]};
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    border-radius: ${({ theme: r }) => r.borderRadius};
+    width: ${({ value: r }) => `${r}%`};
+    background: ${({ theme: r }) => r.colors.neutral150};
+  }
+`, p = n(d)`
+  width: 102px;
+  height: ${({ theme: r }) => r.spaces[2]};
+`, l = ({ min: r, max: u, value: o, children: a, size: m, ...t }) => {
+  const s = {
+    role: "progressbar",
+    "aria-valuenow": o,
+    "aria-valuemin": r,
+    "aria-valuemax": u
+  };
+  return m === "M" ? /* @__PURE__ */ i.createElement(p, {
+    ...s,
+    value: o,
+    "aria-label": a,
+    ...t
+  }) : /* @__PURE__ */ i.createElement(d, {
+    ...s,
+    value: o,
+    "aria-label": a,
+    ...t
+  });
+};
+l.defaultProps = {
+  min: 0,
+  max: 100,
+  value: 0,
+  size: "M"
+};
+l.propTypes = {
+  children: e.node.isRequired,
+  max: e.number,
+  min: e.number,
+  size: e.oneOf(["S", "M"]),
+  value: e.number
+};
+export {
+  l as ProgressBar
+};

package/dist/ProgressBar/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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,4 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),d=require("prop-types"),n=require("styled-components"),u=require("../BaseRadio/BaseRadio.cjs"),c=require("../Typography/Typography.cjs"),i=require("../Box/Box.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(l),o=a(d),p=a(n),y=p.default(c.Typography)`
+  display: flex;
+  align-items: center;
+`,r=({children:e,...s})=>t.default.createElement(y,{as:"label",textColor:"neutral800"},t.default.createElement(u.BaseRadio,{...s}),t.default.createElement(i.Box,{paddingLeft:2},e));r.propTypes={children:o.default.node.isRequired,value:o.default.any.isRequired};exports.Radio=r;

package/dist/Radio/Radio.js

@@ -0,0 +1,24 @@
+import e from "react";
+import r from "prop-types";
+import a from "styled-components";
+import { BaseRadio as i } from "../BaseRadio/BaseRadio.js";
+import { Typography as m } from "../Typography/Typography.js";
+import { Box as p } from "../Box/Box.js";
+const l = a(m)`
+  display: flex;
+  align-items: center;
+`, n = ({ children: t, ...o }) => /* @__PURE__ */ e.createElement(l, {
+  as: "label",
+  textColor: "neutral800"
+}, /* @__PURE__ */ e.createElement(i, {
+  ...o
+}), /* @__PURE__ */ e.createElement(p, {
+  paddingLeft: 2
+}, t));
+n.propTypes = {
+  children: r.node.isRequired,
+  value: r.any.isRequired
+};
+export {
+  n as Radio
+};

package/dist/Radio/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),m=require("prop-types"),R=require("../Box/Box.cjs"),c=require("../helpers/getFocusableNodes.cjs"),l=require("../helpers/keyboardKeys.cjs"),w=require("./RawTableContext.cjs"),p=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},g=p(d),a=p(m),y=o=>g.default.createElement(f,{...o,as:"th"}),f=({coords:o,as:h,...N})=>{const n=d.useRef(null),{rowIndex:T,colIndex:x,setTableValues:E}=w.useTable(),[u,i]=d.useState(!1),K=e=>{const t=c.getFocusableNodes(n.current,!0);if(!(t.length===0||t.length===1&&c.getFocusableNodesWithKeyboardNav(t).length===0)){if(t.length>1&&!Boolean(t.find(s=>s.tagName!=="BUTTON"))){e.preventDefault();const s=t.findIndex(r=>r===document.activeElement);if(e.key===l.KeyboardKeys.RIGHT){const r=t[s+1];r&&(e.stopPropagation(),r.focus())}else if(e.key===l.KeyboardKeys.LEFT){const r=t[s-1];r&&(e.stopPropagation(),r.focus())}return}e.key===l.KeyboardKeys.ENTER&&!u?i(!0):(e.key===l.KeyboardKeys.ESCAPE||e.key===l.KeyboardKeys.ENTER)&&u?(i(!1),n.current.focus()):u&&e.stopPropagation()}},b=T===o.row-1&&x===o.col-1;return d.useLayoutEffect(()=>{const e=c.getFocusableNodes(n.current,!0);e.length===0||e.length===1&&c.getFocusableNodesWithKeyboardNav(e).length!==0||e.length>1&&Boolean(e.find(t=>t.tagName!=="BUTTON"))?(n.current.setAttribute("tabIndex",!u&&b?0:-1),e.forEach((t,s)=>{t.setAttribute("tabIndex",u?0:-1),u&&s===0&&t.focus()})):e.forEach(t=>{t.setAttribute("tabIndex",b?0:-1)})},[u,b]),d.useLayoutEffect(()=>{const e=c.getFocusableNodes(n.current,!0),t=()=>{e.length>=1&&(c.getFocusableNodesWithKeyboardNav(e).length!==0||!Boolean(e.find(s=>s.tagName!=="BUTTON")))&&i(!0),E({rowIndex:o.row-1,colIndex:o.col-1})};return e.forEach(s=>{s.addEventListener("focus",t)}),()=>{c.getFocusableNodes(n.current,!0).forEach(r=>{r.removeEventListener("focus",t)})}},[]),g.default.createElement(R.Box,{as:h||"td",ref:n,onKeyDown:K,...N})};y.defaultProps={coords:{}};y.propTypes={["aria-colindex"]:a.default.number.isRequired,children:a.default.node,coords:a.default.shape({col:a.default.number,row:a.default.number})};f.defaultProps={coords:{}};f.propTypes={["aria-colindex"]:a.default.number.isRequired,as:a.default.oneOf(["td","th"]),children:a.default.node,coords:a.default.shape({col:a.default.number,row:a.default.number})};exports.RawTd=f;exports.RawTh=y;

package/dist/RawTable/RawCell.js

@@ -0,0 +1,80 @@
+import h, { useRef as I, useState as w, useLayoutEffect as b } from "react";
+import n from "prop-types";
+import { Box as R } from "../Box/Box.js";
+import { getFocusableNodes as l, getFocusableNodesWithKeyboardNav as i } from "../helpers/getFocusableNodes.js";
+import { KeyboardKeys as u } from "../helpers/keyboardKeys.js";
+import { useTable as v } from "./RawTableContext.js";
+const N = (c) => /* @__PURE__ */ h.createElement(m, {
+  ...c,
+  as: "th"
+}), m = ({ coords: c, as: p, ...g }) => {
+  const s = I(null), { rowIndex: E, colIndex: T, setTableValues: x } = v(), [a, f] = w(!1), y = (e) => {
+    const t = l(s.current, !0);
+    if (!(t.length === 0 || t.length === 1 && i(t).length === 0)) {
+      if (t.length > 1 && !Boolean(t.find((o) => o.tagName !== "BUTTON"))) {
+        e.preventDefault();
+        const o = t.findIndex((r) => r === document.activeElement);
+        if (e.key === u.RIGHT) {
+          const r = t[o + 1];
+          r && (e.stopPropagation(), r.focus());
+        } else if (e.key === u.LEFT) {
+          const r = t[o - 1];
+          r && (e.stopPropagation(), r.focus());
+        }
+        return;
+      }
+      e.key === u.ENTER && !a ? f(!0) : (e.key === u.ESCAPE || e.key === u.ENTER) && a ? (f(!1), s.current.focus()) : a && e.stopPropagation();
+    }
+  }, d = E === c.row - 1 && T === c.col - 1;
+  return b(() => {
+    const e = l(s.current, !0);
+    e.length === 0 || e.length === 1 && i(e).length !== 0 || e.length > 1 && Boolean(e.find((t) => t.tagName !== "BUTTON")) ? (s.current.setAttribute("tabIndex", !a && d ? 0 : -1), e.forEach((t, o) => {
+      t.setAttribute("tabIndex", a ? 0 : -1), a && o === 0 && t.focus();
+    })) : e.forEach((t) => {
+      t.setAttribute("tabIndex", d ? 0 : -1);
+    });
+  }, [a, d]), b(() => {
+    const e = l(s.current, !0), t = () => {
+      e.length >= 1 && (i(e).length !== 0 || !Boolean(e.find((o) => o.tagName !== "BUTTON"))) && f(!0), x({ rowIndex: c.row - 1, colIndex: c.col - 1 });
+    };
+    return e.forEach((o) => {
+      o.addEventListener("focus", t);
+    }), () => {
+      l(s.current, !0).forEach((r) => {
+        r.removeEventListener("focus", t);
+      });
+    };
+  }, []), /* @__PURE__ */ h.createElement(R, {
+    as: p || "td",
+    ref: s,
+    onKeyDown: y,
+    ...g
+  });
+};
+N.defaultProps = {
+  coords: {}
+};
+N.propTypes = {
+  ["aria-colindex"]: n.number.isRequired,
+  children: n.node,
+  coords: n.shape({
+    col: n.number,
+    row: n.number
+  })
+};
+m.defaultProps = {
+  coords: {}
+};
+m.propTypes = {
+  ["aria-colindex"]: n.number.isRequired,
+  as: n.oneOf(["td", "th"]),
+  children: n.node,
+  coords: n.shape({
+    col: n.number,
+    row: n.number
+  })
+};
+export {
+  m as RawTd,
+  N as RawTh
+};

package/dist/RawTable/RawTable.cjs

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

package/dist/RawTable/RawTable.js

@@ -0,0 +1,73 @@
+import m, { useRef as D, useState as k, useCallback as R, useEffect as d } from "react";
+import s from "prop-types";
+import { RawTableContext as _ } from "./RawTableContext.js";
+import { KeyboardKeys as a } from "../helpers/keyboardKeys.js";
+import { focusFocusable as G } from "./focusFocusable.js";
+const y = ({ colCount: u, rowCount: c, jumpStep: n, initialCol: p, initialRow: E, ...P }) => {
+  const f = D(null), i = D(!1), [o, r] = k(E), [b, l] = k(p), T = R(({ colIndex: t, rowIndex: e }) => {
+    l(t), r(e);
+  }, []);
+  d(() => {
+    i.current && G(f.current), i.current || (i.current = !0);
+  }, [b, o]);
+  const K = (t) => {
+    switch (t.key) {
+      case a.RIGHT: {
+        t.preventDefault(), l((e) => e < u - 1 ? e + 1 : e);
+        break;
+      }
+      case a.LEFT: {
+        t.preventDefault(), l((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), l(0);
+        break;
+      }
+      case a.END: {
+        t.preventDefault(), t.ctrlKey && r(c - 1), l(u - 1);
+        break;
+      }
+      case a.PAGE_DOWN: {
+        t.preventDefault(), r((e) => e + n < c ? e + n : c - 1);
+        break;
+      }
+      case a.PAGE_UP: {
+        t.preventDefault(), r((e) => e - n > 0 ? e - n : 0);
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ m.createElement(_.Provider, {
+    value: { rowIndex: o, colIndex: b, setTableValues: T }
+  }, /* @__PURE__ */ m.createElement("table", {
+    ref: f,
+    "aria-rowcount": c,
+    "aria-colcount": u,
+    onKeyDown: K,
+    ...P
+  }));
+};
+y.defaultProps = {
+  jumpStep: 3,
+  initialCol: 0,
+  initialRow: 0
+};
+y.propTypes = {
+  colCount: s.number.isRequired,
+  initialCol: s.number,
+  initialRow: s.number,
+  jumpStep: s.number,
+  rowCount: s.number.isRequired
+};
+export {
+  y as RawTable
+};

package/dist/RawTable/RawTableContext.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react"),d=require("prop-types"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=o(t),s=o(d),r=({children:e,...a})=>{const n=t.Children.toArray(e).map((l,c)=>t.cloneElement(l,{"aria-rowindex":c+2}));return u.default.createElement("tbody",{...a},n)};r.propTypes={children:s.default.node.isRequired};exports.RawTbody=r;

package/dist/RawTable/RawTbody.js

@@ -0,0 +1,16 @@
+import d, { Children as i, cloneElement as p } from "react";
+import a from "prop-types";
+const l = ({ children: e, ...r }) => {
+  const o = i.toArray(e).map(
+    (t, n) => p(t, { "aria-rowindex": n + 2 })
+  );
+  return /* @__PURE__ */ d.createElement("tbody", {
+    ...r
+  }, o);
+};
+l.propTypes = {
+  children: a.node.isRequired
+};
+export {
+  l as RawTbody
+};

package/dist/RawTable/RawThead.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react"),c=require("prop-types"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=r(t),u=r(c),a=({children:e,...o})=>{const n=t.Children.toArray(e).map(l=>t.cloneElement(l,{"aria-rowindex":1}));return d.default.createElement("thead",{...o},n)};a.propTypes={children:u.default.node.isRequired};exports.RawThead=a;

package/dist/RawTable/RawThead.js

@@ -0,0 +1,14 @@
+import n, { Children as a, cloneElement as d } from "react";
+import i from "prop-types";
+const p = ({ children: e, ...r }) => {
+  const o = a.toArray(e).map((t) => d(t, { "aria-rowindex": 1 }));
+  return /* @__PURE__ */ n.createElement("thead", {
+    ...r
+  }, o);
+};
+p.propTypes = {
+  children: i.node.isRequired
+};
+export {
+  p as RawThead
+};

package/dist/RawTable/RawTr.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),u=require("prop-types"),s=require("../Box/Box.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=n(r),a=n(u),c=({children:e,...t})=>{const l=r.Children.toArray(e).map((i,o)=>r.cloneElement(i,{"aria-colindex":o+1,coords:{col:o+1,row:t["aria-rowindex"]}}));return d.default.createElement(s.Box,{as:"tr",...t},l)};c.propTypes={["aria-rowindex"]:a.default.number.isRequired,children:a.default.node.isRequired};exports.RawTr=c;

package/dist/RawTable/RawTr.js

@@ -0,0 +1,19 @@
+import a, { Children as c, cloneElement as d } from "react";
+import o from "prop-types";
+import { Box as l } from "../Box/Box.js";
+const m = ({ children: i, ...r }) => {
+  const n = c.toArray(i).map(
+    (t, e) => d(t, { "aria-colindex": e + 1, coords: { col: e + 1, row: r["aria-rowindex"] } })
+  );
+  return /* @__PURE__ */ a.createElement(l, {
+    as: "tr",
+    ...r
+  }, n);
+};
+m.propTypes = {
+  ["aria-rowindex"]: o.number.isRequired,
+  children: o.node.isRequired
+};
+export {
+  m as RawTr
+};

package/dist/RawTable/focusFocusable.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./RawTable.cjs"),a=require("./RawCell.cjs"),w=require("./RawThead.cjs"),R=require("./RawTbody.cjs"),T=require("./RawTr.cjs");exports.RawTable=e.RawTable;exports.RawTd=a.RawTd;exports.RawTh=a.RawTh;exports.RawThead=w.RawThead;exports.RawTbody=R.RawTbody;exports.RawTr=T.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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=r(t),o=e=>a.default.createElement("form",{...e,role:"search"});exports.SearchForm=o;

package/dist/Searchbar/SearchForm.js

@@ -0,0 +1,8 @@
+import r from "react";
+const t = (e) => /* @__PURE__ */ r.createElement("form", {
+  ...e,
+  role: "search"
+});
+export {
+  t as SearchForm
+};

package/dist/Searchbar/Searchbar.cjs

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),_=require("prop-types"),S=require("styled-components"),R=require("@strapi/icons/Search"),E=require("@strapi/icons/Cross"),C=require("../themes/sizes.cjs"),v=require("../Field/Field.cjs"),x=require("../Field/FieldLabel.cjs"),i=require("../Field/FieldInput.cjs");require("../Field/FieldContext.cjs");require("../Typography/Typography.cjs");const $=require("../Field/FieldAction.cjs"),z=require("../VisuallyHidden/VisuallyHidden.cjs"),I=require("../themes/utils.cjs"),d=require("../Flex/Flex.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(a),l=r(_),n=r(S),T=r(R),w=r(E),A=n.default(d.Flex)`
+  font-size: 0.5rem;
+  svg path {
+    fill: ${({theme:e})=>e.colors.neutral400};
+  }
+`,o=n.default(d.Flex)`
+  font-size: 0.8rem;
+
+  svg path {
+    fill: ${({theme:e})=>e.colors.neutral800};
+  }
+`,L=n.default.div`
+  border-radius: ${({theme:e})=>e.borderRadius};
+  box-shadow: ${({theme:e})=>e.shadows.filterShadow};
+
+  &:focus-within {
+    ${o} {
+      svg path {
+        fill: ${({theme:e})=>e.colors.primary600};
+      }
+    }
+  }
+
+  ${i.InputWrapper} {
+    border: 1px solid transparent;
+  }
+
+  ${I.inputFocusStyle(i.InputWrapper)}
+`,s=a.forwardRef(({name:e,size:f,children:p,value:u,onClear:F,clearLabel:h,...y},m)=>{const c=a.useRef(null),q=u.length>0,b=j=>{F(j),c.current.focus()},g=m||c;return t.default.createElement(L,null,t.default.createElement(v.Field,{name:e},t.default.createElement(z.VisuallyHidden,null,t.default.createElement(x.FieldLabel,null,p)),t.default.createElement(i.FieldInput,{ref:g,value:u,startAction:t.default.createElement(o,null,t.default.createElement(T.default,{"aria-hidden":!0})),size:f,endAction:q?t.default.createElement($.FieldAction,{label:h,onClick:b},t.default.createElement(A,null,t.default.createElement(w.default,null))):void 0,...y})))});s.displayName="Searchbar";s.defaultProps={value:"",size:"M"};s.propTypes={children:l.default.node.isRequired,clearLabel:l.default.string.isRequired,name:l.default.string.isRequired,onClear:l.default.func.isRequired,size:l.default.oneOf(Object.keys(C.sizes.input)),value:l.default.string};exports.Searchbar=s;

package/dist/Searchbar/Searchbar.js

@@ -0,0 +1,79 @@
+import r, { forwardRef as y, useRef as $ } from "react";
+import t from "prop-types";
+import o from "styled-components";
+import S from "@strapi/icons/Search";
+import v from "@strapi/icons/Cross";
+import { sizes as C } from "../themes/sizes.js";
+import { Field as F } from "../Field/Field.js";
+import { FieldLabel as w } from "../Field/FieldLabel.js";
+import { InputWrapper as a, FieldInput as z } from "../Field/FieldInput.js";
+import "../Field/FieldContext.js";
+import "../Typography/Typography.js";
+import { FieldAction as q } from "../Field/FieldAction.js";
+import { VisuallyHidden as x } from "../VisuallyHidden/VisuallyHidden.js";
+import { inputFocusStyle as I } from "../themes/utils.js";
+import { Flex as s } from "../Flex/Flex.js";
+const W = o(s)`
+  font-size: 0.5rem;
+  svg path {
+    fill: ${({ theme: e }) => e.colors.neutral400};
+  }
+`, m = o(s)`
+  font-size: 0.8rem;
+
+  svg path {
+    fill: ${({ theme: e }) => e.colors.neutral800};
+  }
+`, A = o.div`
+  border-radius: ${({ theme: e }) => e.borderRadius};
+  box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
+
+  &:focus-within {
+    ${m} {
+      svg path {
+        fill: ${({ theme: e }) => e.colors.primary600};
+      }
+    }
+  }
+
+  ${a} {
+    border: 1px solid transparent;
+  }
+
+  ${I(a)}
+`, l = y(({ name: e, size: p, children: c, value: i, onClear: u, clearLabel: d, ...f }, h) => {
+  const n = $(null), b = i.length > 0, E = (g) => {
+    u(g), n.current.focus();
+  }, R = h || n;
+  return /* @__PURE__ */ r.createElement(A, null, /* @__PURE__ */ r.createElement(F, {
+    name: e
+  }, /* @__PURE__ */ r.createElement(x, null, /* @__PURE__ */ r.createElement(w, null, c)), /* @__PURE__ */ r.createElement(z, {
+    ref: R,
+    value: i,
+    startAction: /* @__PURE__ */ r.createElement(m, null, /* @__PURE__ */ r.createElement(S, {
+      "aria-hidden": !0
+    })),
+    size: p,
+    endAction: b ? /* @__PURE__ */ r.createElement(q, {
+      label: d,
+      onClick: E
+    }, /* @__PURE__ */ r.createElement(W, null, /* @__PURE__ */ r.createElement(v, null))) : void 0,
+    ...f
+  })));
+});
+l.displayName = "Searchbar";
+l.defaultProps = {
+  value: "",
+  size: "M"
+};
+l.propTypes = {
+  children: t.node.isRequired,
+  clearLabel: t.string.isRequired,
+  name: t.string.isRequired,
+  onClear: t.func.isRequired,
+  size: t.oneOf(Object.keys(C.input)),
+  value: t.string
+};
+export {
+  l as Searchbar
+};

package/dist/Searchbar/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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/MultiSelectNested.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),f=require("prop-types"),d=require("./OptGroup.cjs"),c=require("./Option.cjs"),y=require("./Select.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(i),p=l(f),s=({options:e,...n})=>t.default.createElement(y.Select,{multi:!0,...n},e.map(({label:r,value:o,children:a})=>a?t.default.createElement(d.OptGroup,{key:r,label:r},a?.map(u=>t.default.createElement(c.Option,{key:u.value,value:u.value},u.label))):t.default.createElement(c.Option,{key:o,value:o},r)));s.propTypes={options:p.default.arrayOf(p.default.object).isRequired};exports.MultiSelectNested=s;

package/dist/Select/MultiSelectNested.js

@@ -0,0 +1,26 @@
+import e from "react";
+import p from "prop-types";
+import { OptGroup as f } from "./OptGroup.js";
+import { Option as a } from "./Option.js";
+import { Select as n } from "./Select.js";
+const c = ({ options: u, ...i }) => /* @__PURE__ */ e.createElement(n, {
+  multi: !0,
+  ...i
+}, u.map(
+  ({ label: t, value: o, children: m }) => m ? /* @__PURE__ */ e.createElement(f, {
+    key: t,
+    label: t
+  }, m?.map((r) => /* @__PURE__ */ e.createElement(a, {
+    key: r.value,
+    value: r.value
+  }, r.label))) : /* @__PURE__ */ e.createElement(a, {
+    key: o,
+    value: o
+  }, t)
+));
+c.propTypes = {
+  options: p.arrayOf(p.object).isRequired
+};
+export {
+  c as MultiSelectNested
+};

package/dist/Select/OptGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("prop-types"),i=require("react"),d=require("./Option.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=u(s),r=u(i),a=({children:e,label:o,...p})=>{const l=e.map(n=>n.props.value);return r.default.createElement(r.default.Fragment,null,r.default.createElement(d.Option,{"data-opt-group":!0,"data-opt-group-children":l,"aria-label":`${o}, ${e.length} items`,...p},o),e)};a.propTypes={children:t.default.arrayOf(t.default.node).isRequired,label:t.default.string.isRequired};a.displayName="OptGroup";exports.OptGroup=a;

package/dist/Select/OptGroup.js

@@ -0,0 +1,20 @@
+import r from "prop-types";
+import t from "react";
+import { Option as m } from "./Option.js";
+const o = ({ children: e, label: p, ...a }) => {
+  const i = e.map((l) => l.props.value);
+  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(m, {
+    "data-opt-group": !0,
+    "data-opt-group-children": i,
+    "aria-label": `${p}, ${e.length} items`,
+    ...a
+  }, p), e);
+};
+o.propTypes = {
+  children: r.arrayOf(r.node).isRequired,
+  label: r.string.isRequired
+};
+o.displayName = "OptGroup";
+export {
+  o as OptGroup
+};

package/dist/Select/Option.cjs

@@ -0,0 +1,49 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),y=require("prop-types"),b=require("styled-components"),n=require("../Box/Box.cjs"),m=require("../Typography/Typography.cjs"),x=require("../Flex/Flex.cjs"),k=require("../BaseCheckbox/assets/checkmark.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=i(s),t=i(y),u=i(b),R=u.default.div`
+  border: 1px solid
+    ${({theme:e,selected:o,indeterminate:a})=>o||a?e.colors.primary600:e.colors.neutral300};
+  border-radius: ${({theme:e})=>e.borderRadius};
+  height: 18px;
+  width: 18px;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  background-color: ${({theme:e,selected:o,indeterminate:a})=>o||a?e.colors.primary600:e.colors.neutral0};
+
+  ${({theme:e,indeterminate:o})=>o&&`&::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&&`  
+    &::after {
+      content: '';
+      background: url(${k}) no-repeat no-repeat center center;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+    }
+
+  `}
+`,T=u.default(n.Box)`
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline-offset: -3px;
+  &.is-focused {
+    background: ${({theme:e})=>e.colors.primary100};
+  }
+
+  &:hover {
+    background: ${({theme:e})=>e.colors.primary100};
+  }
+`,l=({selected:e,indeterminate:o,children:a,value:c,multi:p,isChild:f,startIcon:d,...g})=>{const h=s.useRef(null);return r.default.createElement(T,{as:"li",hasRadius:!0,paddingLeft:f?7:4,paddingRight:4,paddingTop:2,paddingBottom:2,ref:h,role:"option","aria-selected":e,background:"neutral0","data-strapi-value":c,...g},r.default.createElement(x.Flex,null,d&&r.default.createElement(n.Box,{paddingRight:2,"aria-hidden":!0},d),p&&r.default.createElement(n.Box,{paddingRight:2,"aria-hidden":!0},r.default.createElement(R,{selected:e,indeterminate:o})),r.default.createElement(m.Typography,{textColor:e?"primary600":"neutral800",fontWeight:e?"bold":null},a)))};l.defaultProps={isChild:!1,multi:!1,selected:!1,startIcon:void 0,indeterminate:!1};l.propTypes={children:t.default.oneOfType([t.default.string,t.default.number]).isRequired,indeterminate:t.default.bool,isChild:t.default.bool,multi:t.default.bool,selected:t.default.bool,startIcon:t.default.node,value:t.default.oneOfType([t.default.string,t.default.number]).isRequired};l.displayName="Option";exports.Option=l;