@strapi/design-system 0.0.0-typescript.0

package/dist/Popover/Popover.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("react"),j=require("prop-types"),S=require("styled-components"),s=require("@floating-ui/react-dom"),c=require("../Box/Box.cjs"),T=require("../Portal/Portal.cjs"),$=require("../helpers/useIntersection.cjs"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function M(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const o=M(q),t=b(j),m=b(S),h=["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"],B=m.default(c.Box)`
+  box-shadow: ${({theme:e})=>e.shadows.filterShadow};
+  z-index: 4;
+  border: 1px solid ${({theme:e})=>e.colors.neutral150};
+  background: ${({theme:e})=>e.colors.neutral0};
+`,W=m.default(c.Box)`
+  // 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
+  max-height: ${3*5}rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${({theme:e})=>e.colors.neutral0};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${({theme:e})=>e.colors.neutral150};
+    border-radius: ${({theme:e})=>e.borderRadius};
+    margin-right: 10px;
+  }
+`,u=({source:e,children:n,spacing:r,fullWidth:a,placement:y,onReachEnd:i,intersectionId:l,centered:v,...x})=>{const f=o.useRef(null),[w,E]=o.useState(void 0),{x:_,y:O,reference:p,floating:k,strategy:R}=s.useFloating({strategy:"fixed",placement:v?"bottom":y,middleware:[s.offset({mainAxis:r}),s.shift(),s.flip()],whileElementsMounted:s.autoUpdate});return o.useLayoutEffect(()=>{p(e.current)},[e,p]),o.useLayoutEffect(()=>{a&&E(e.current.offsetWidth)},[a,e]),$.useIntersection(f,i,{selectorToWatch:`#${l}`,skipWhen:!l||!i}),o.createElement(B,{ref:k,style:{left:_,top:O,position:R,width:w||void 0},hasRadius:!0,background:"neutral0",padding:1},o.createElement(W,{ref:f,...x},n,l&&i&&o.createElement(c.Box,{id:l,width:"100%",height:"1px"})))},d=e=>o.createElement(T.Portal,null,o.createElement(u,{...e})),g={fullWidth:!1,intersectionId:void 0,onReachEnd:void 0,centered:!1,placement:"bottom-start",spacing:0},P={centered:t.default.bool,children:t.default.node.isRequired,fullWidth:t.default.bool,intersectionId:t.default.string,onReachEnd:t.default.func,placement:t.default.oneOf(h),source:t.default.shape({current:(typeof Element>"u"?t.default.any:t.default.instanceOf(Element)).isRequired}).isRequired,spacing:t.default.number};u.propTypes=P;u.defaultProps=g;d.propTypes=P;d.defaultProps=g;exports.POPOVER_PLACEMENTS=h;exports.Popover=d;

package/dist/Popover/Popover.js

@@ -0,0 +1,123 @@
+import * as o from "react";
+import t from "prop-types";
+import d from "styled-components";
+import { useFloating as R, offset as $, shift as W, flip as T, autoUpdate as O } from "@floating-ui/react-dom";
+import { Box as s } from "../Box/Box.js";
+import { Portal as S } from "../Portal/Portal.js";
+import { useIntersection as q } from "../helpers/useIntersection.js";
+const L = [
+  "top",
+  "top-start",
+  "top-end",
+  "right",
+  "right-start",
+  "right-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "left",
+  "left-start",
+  "left-end"
+], z = d(s)`
+  box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
+  z-index: 4;
+  border: 1px solid ${({ theme: e }) => e.colors.neutral150};
+  background: ${({ theme: e }) => e.colors.neutral0};
+`, A = d(s)`
+  // 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
+  max-height: ${3 * 5}rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${({ theme: e }) => e.colors.neutral0};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${({ theme: e }) => e.colors.neutral150};
+    border-radius: ${({ theme: e }) => e.borderRadius};
+    margin-right: 10px;
+  }
+`, a = ({
+  source: e,
+  children: m,
+  spacing: h,
+  fullWidth: i,
+  placement: b,
+  onReachEnd: n,
+  intersectionId: r,
+  centered: g,
+  ...w
+}) => {
+  const l = o.useRef(null), [v, x] = o.useState(void 0), { x: y, y: E, reference: p, floating: P, strategy: k } = R({
+    strategy: "fixed",
+    placement: g ? "bottom" : b,
+    middleware: [
+      $({
+        mainAxis: h
+      }),
+      W(),
+      T()
+    ],
+    whileElementsMounted: O
+  });
+  return o.useLayoutEffect(() => {
+    p(e.current);
+  }, [e, p]), o.useLayoutEffect(() => {
+    i && x(e.current.offsetWidth);
+  }, [i, e]), q(l, n, {
+    selectorToWatch: `#${r}`,
+    skipWhen: !r || !n
+  }), /* @__PURE__ */ o.createElement(z, {
+    ref: P,
+    style: {
+      left: y,
+      top: E,
+      position: k,
+      width: v || void 0
+    },
+    hasRadius: !0,
+    background: "neutral0",
+    padding: 1
+  }, /* @__PURE__ */ o.createElement(A, {
+    ref: l,
+    ...w
+  }, m, r && n && /* @__PURE__ */ o.createElement(s, {
+    id: r,
+    width: "100%",
+    height: "1px"
+  })));
+}, c = (e) => /* @__PURE__ */ o.createElement(S, null, /* @__PURE__ */ o.createElement(a, {
+  ...e
+})), f = {
+  fullWidth: !1,
+  intersectionId: void 0,
+  onReachEnd: void 0,
+  centered: !1,
+  placement: "bottom-start",
+  spacing: 0
+}, u = {
+  centered: t.bool,
+  children: t.node.isRequired,
+  fullWidth: t.bool,
+  intersectionId: t.string,
+  onReachEnd: t.func,
+  placement: t.oneOf(L),
+  source: t.shape({
+    current: (typeof Element > "u" ? t.any : t.instanceOf(Element)).isRequired
+  }).isRequired,
+  spacing: t.number
+};
+a.propTypes = u;
+a.defaultProps = f;
+c.propTypes = u;
+c.defaultProps = f;
+export {
+  L as POPOVER_PLACEMENTS,
+  c as Popover
+};

package/dist/Popover/index.cjs

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

package/dist/Popover/index.js

@@ -0,0 +1,5 @@
+import { POPOVER_PLACEMENTS as r, Popover as E } from "./Popover.js";
+export {
+  r as POPOVER_PLACEMENTS,
+  E as Popover
+};

package/dist/Portal/Portal.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),c=require("react-dom"),a=require("prop-types"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=s(a),u=({children:e})=>{const t=r.useRef(null),[o,n]=r.useState(!1);return r.useLayoutEffect(()=>(t.current=document.createElement("div"),t.current.setAttribute("data-react-portal","true"),document.body.appendChild(t.current),n(!0),()=>{t.current?.remove()}),[]),!o||!t.current?null:c.createPortal(e,t.current)};u.propTypes={children:l.default.node.isRequired};exports.Portal=u;

package/dist/Portal/Portal.js

@@ -0,0 +1,15 @@
+import { useRef as u, useState as n, useLayoutEffect as c } from "react";
+import { createPortal as a } from "react-dom";
+import d from "prop-types";
+const p = ({ children: r }) => {
+  const e = u(null), [t, o] = n(!1);
+  return c(() => (e.current = document.createElement("div"), e.current.setAttribute("data-react-portal", "true"), document.body.appendChild(e.current), o(!0), () => {
+    e.current?.remove();
+  }), []), !t || !e.current ? null : a(r, e.current);
+};
+p.propTypes = {
+  children: d.node.isRequired
+};
+export {
+  p as Portal
+};

package/dist/Portal/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Portal.cjs");exports.Portal=e.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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),d=require("prop-types"),c=require("styled-components"),p=require("../Box/Box.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},f=r(i),t=r(d),b=r(c),m=b.default(p.Box)`
+  &:before {
+    background-color: ${({theme:e})=>e.colors.neutral0};
+    border-radius: ${({theme:e})=>e.borderRadius};
+    bottom: 0;
+    content: '';
+    position: absolute;
+    top: 0;
+    width: ${({value:e})=>`${e}%`};
+  }
+`,o=({min:e,max:u,value:a,children:l,size:s,...n})=>f.default.createElement(m,{background:"neutral600",hasRadius:!0,"aria-label":l,"aria-valuemax":u,"aria-valuemin":e,"aria-valuenow":a,height:s==="S"?1:2,position:"relative",role:"progressbar",value:a,width:s==="S"?"78px":"102px",...n});o.defaultProps={min:0,max:100,value:0,size:"M"};o.propTypes={children:t.default.node.isRequired,max:t.default.number,min:t.default.number,size:t.default.oneOf(["S","M"]),value:t.default.number};exports.ProgressBar=o;

package/dist/ProgressBar/ProgressBar.js

@@ -0,0 +1,44 @@
+import u from "react";
+import e from "prop-types";
+import m from "styled-components";
+import { Box as l } from "../Box/Box.js";
+const p = m(l)`
+  &: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}%`};
+  }
+`, t = ({ min: r, max: i, value: o, children: s, size: a, ...n }) => /* @__PURE__ */ u.createElement(p, {
+  background: "neutral600",
+  hasRadius: !0,
+  "aria-label": s,
+  "aria-valuemax": i,
+  "aria-valuemin": r,
+  "aria-valuenow": o,
+  height: a === "S" ? 1 : 2,
+  position: "relative",
+  role: "progressbar",
+  value: o,
+  width: a === "S" ? "78px" : "102px",
+  ...n
+});
+t.defaultProps = {
+  min: 0,
+  max: 100,
+  value: 0,
+  size: "M"
+};
+t.propTypes = {
+  children: e.node.isRequired,
+  max: e.number,
+  min: e.number,
+  size: e.oneOf(["S", "M"]),
+  value: e.number
+};
+export {
+  t 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"),w=require("prop-types"),F=require("../Box/Box.cjs"),n=require("../helpers/getFocusableNodes.cjs"),f=require("../helpers/keyboardKeys.cjs"),R=require("./RawTableContext.cjs"),p=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},T=p(d),s=p(w),h=o=>T.default.createElement(i,{...o,as:"th"}),i=({coords:o,as:x,...m})=>{const r=d.useRef(null),{rowIndex:E,colIndex:K,setTableValues:N}=R.useTable(),[u,b]=d.useState(!1),v=e=>{const t=n.getFocusableNodes(r.current,!0);if(t.length===0||t.length===1&&n.getFocusableNodesWithKeyboardNav(t).length===0)return;if(t.length>1&&!t.find(l=>l.tagName!=="BUTTON")){e.preventDefault();const l=t.findIndex(c=>c===document.activeElement);if(e.key===f.KeyboardKeys.RIGHT){const c=t[l+1];c&&(e.stopPropagation(),c.focus())}else if(e.key===f.KeyboardKeys.LEFT){const c=t[l-1];c&&(e.stopPropagation(),c.focus())}return}const a=e.key===f.KeyboardKeys.ENTER;if(a&&!u)b(!0);else if((e.key===f.KeyboardKeys.ESCAPE||a)&&u){if(a&&document.activeElement.tagName==="A")return;b(!1),r.current.focus()}else u&&e.stopPropagation()},y=E===o.row-1&&K===o.col-1;d.useLayoutEffect(()=>{const e=n.getFocusableNodes(r.current,!0);e.length===0||e.length===1&&n.getFocusableNodesWithKeyboardNav(e).length!==0||e.length>1&&Boolean(e.find(t=>t.tagName!=="BUTTON"))?(r.current.setAttribute("tabIndex",!u&&y?0:-1),e.forEach((t,a)=>{t.setAttribute("tabIndex",u?0:-1),u&&a===0&&t.focus()})):e.forEach(t=>{t.setAttribute("tabIndex",y?0:-1)})},[u,y]);const g=d.useCallback(()=>{const e=n.getFocusableNodes(r.current,!0);e.length>=1&&(n.getFocusableNodesWithKeyboardNav(e).length!==0||!e.find(t=>t.tagName!=="BUTTON"))&&b(!0),N({rowIndex:o.row-1,colIndex:o.col-1})},[o,N]);return d.useLayoutEffect(()=>{const e=r.current;return n.getFocusableNodes(e,!0).forEach(a=>{a.addEventListener("focus",g)}),()=>{n.getFocusableNodes(e,!0).forEach(l=>{l.removeEventListener("focus",g)})}},[g]),T.default.createElement(F.Box,{role:"gridcell",as:x,ref:r,onKeyDown:v,...m})};h.defaultProps={children:void 0,coords:{}};h.propTypes={"aria-colindex":s.default.number.isRequired,children:s.default.node,coords:s.default.shape({col:s.default.number,row:s.default.number})};i.defaultProps={as:"td",children:void 0,coords:{}};i.propTypes={"aria-colindex":s.default.number.isRequired,as:s.default.oneOf(["td","th"]),children:s.default.node,coords:s.default.shape({col:s.default.number,row:s.default.number})};exports.RawTd=i;exports.RawTh=h;

package/dist/RawTable/RawCell.js

@@ -0,0 +1,95 @@
+import g, { useRef as w, useState as R, useLayoutEffect as N, useCallback as A } from "react";
+import o from "prop-types";
+import { Box as P } from "../Box/Box.js";
+import { getFocusableNodes as l, getFocusableNodesWithKeyboardNav as b } from "../helpers/getFocusableNodes.js";
+import { KeyboardKeys as d } from "../helpers/keyboardKeys.js";
+import { useTable as B } from "./RawTableContext.js";
+const E = (r) => /* @__PURE__ */ g.createElement(h, {
+  ...r,
+  as: "th"
+}), h = ({ coords: r, as: T, ...x }) => {
+  const s = w(null), { rowIndex: y, colIndex: v, setTableValues: p } = B(), [c, i] = R(!1), I = (e) => {
+    const t = l(s.current, !0);
+    if (t.length === 0 || t.length === 1 && b(t).length === 0)
+      return;
+    if (t.length > 1 && !t.find((u) => u.tagName !== "BUTTON")) {
+      e.preventDefault();
+      const u = t.findIndex((a) => a === document.activeElement);
+      if (e.key === d.RIGHT) {
+        const a = t[u + 1];
+        a && (e.stopPropagation(), a.focus());
+      } else if (e.key === d.LEFT) {
+        const a = t[u - 1];
+        a && (e.stopPropagation(), a.focus());
+      }
+      return;
+    }
+    const n = e.key === d.ENTER;
+    if (n && !c)
+      i(!0);
+    else if ((e.key === d.ESCAPE || n) && c) {
+      if (n && document.activeElement.tagName === "A")
+        return;
+      i(!1), s.current.focus();
+    } else
+      c && e.stopPropagation();
+  }, f = y === r.row - 1 && v === r.col - 1;
+  N(() => {
+    const e = l(s.current, !0);
+    e.length === 0 || e.length === 1 && b(e).length !== 0 || e.length > 1 && Boolean(e.find((t) => t.tagName !== "BUTTON")) ? (s.current.setAttribute("tabIndex", !c && f ? 0 : -1), e.forEach((t, n) => {
+      t.setAttribute("tabIndex", c ? 0 : -1), c && n === 0 && t.focus();
+    })) : e.forEach((t) => {
+      t.setAttribute("tabIndex", f ? 0 : -1);
+    });
+  }, [c, f]);
+  const m = A(() => {
+    const e = l(s.current, !0);
+    e.length >= 1 && (b(e).length !== 0 || !e.find((t) => t.tagName !== "BUTTON")) && i(!0), p({ rowIndex: r.row - 1, colIndex: r.col - 1 });
+  }, [r, p]);
+  return N(() => {
+    const e = s.current;
+    return l(e, !0).forEach((n) => {
+      n.addEventListener("focus", m);
+    }), () => {
+      l(e, !0).forEach((u) => {
+        u.removeEventListener("focus", m);
+      });
+    };
+  }, [m]), /* @__PURE__ */ g.createElement(P, {
+    role: "gridcell",
+    as: T,
+    ref: s,
+    onKeyDown: I,
+    ...x
+  });
+};
+E.defaultProps = {
+  children: void 0,
+  coords: {}
+};
+E.propTypes = {
+  "aria-colindex": o.number.isRequired,
+  children: o.node,
+  coords: o.shape({
+    col: o.number,
+    row: o.number
+  })
+};
+h.defaultProps = {
+  as: "td",
+  children: void 0,
+  coords: {}
+};
+h.propTypes = {
+  "aria-colindex": o.number.isRequired,
+  as: o.oneOf(["td", "th"]),
+  children: o.node,
+  coords: o.shape({
+    col: o.number,
+    row: o.number
+  })
+};
+export {
+  h as RawTd,
+  E 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",{role:"grid",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,74 @@
+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: i, rowCount: l, jumpStep: n, initialCol: p, initialRow: E, ...P }) => {
+  const f = D(null), u = D(!1), [o, r] = k(E), [b, c] = k(p), T = R(({ colIndex: t, rowIndex: e }) => {
+    c(t), r(e);
+  }, []);
+  d(() => {
+    u.current && G(f.current), u.current || (u.current = !0);
+  }, [b, o]);
+  const K = (t) => {
+    switch (t.key) {
+      case a.RIGHT: {
+        t.preventDefault(), c((e) => e < i - 1 ? e + 1 : e);
+        break;
+      }
+      case a.LEFT: {
+        t.preventDefault(), c((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 < l - 1 ? e + 1 : e);
+        break;
+      }
+      case a.HOME: {
+        t.preventDefault(), t.ctrlKey && r(0), c(0);
+        break;
+      }
+      case a.END: {
+        t.preventDefault(), t.ctrlKey && r(l - 1), c(i - 1);
+        break;
+      }
+      case a.PAGE_DOWN: {
+        t.preventDefault(), r((e) => e + n < l ? e + n : l - 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", {
+    role: "grid",
+    ref: f,
+    "aria-rowcount": l,
+    "aria-colcount": i,
+    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;