@strapi/design-system 0.0.0-3cf3ff39

package/dist/TimePicker/TimePicker.js

@@ -0,0 +1,83 @@
+import { jsx as r, jsxs as D } from "react/jsx-runtime";
+import * as m from "react";
+import { Clock as M } from "@strapi/icons";
+import S from "styled-components";
+import { ComboboxInput as $, Option as v } from "../Combobox/Combobox.js";
+import { useDesignSystem as L } from "../DesignSystemProvider.js";
+import { useControllableState as P } from "../hooks/useControllableState.js";
+import { useDateFormatter as j } from "../hooks/useDateFormatter.js";
+import { useId as V } from "../hooks/useId.js";
+import { Field as E } from "../Field/Field.js";
+import { Flex as O } from "../Flex/Flex.js";
+import { FieldLabel as _ } from "../Field/FieldLabel.js";
+import { FieldHint as q } from "../Field/FieldHint.js";
+import { FieldError as z } from "../Field/FieldError.js";
+const h = (o) => !!o.match(/^[^a-zA-Z]*$/), H = ({
+  id: o,
+  step: a = 15,
+  /**
+   * @preserve
+   * @deprecated This is no longer used.
+   */
+  ariaLabel: b,
+  /**
+   * @preserve
+   * @deprecated This is no longer used.
+   */
+  selectButtonTitle: C,
+  value: n,
+  defaultValue: c,
+  onChange: d,
+  ...u
+}) => {
+  const w = L("TimePicker"), k = V(o), [I, l] = m.useState(""), [x, f] = P({
+    prop: n,
+    defaultProp: c,
+    onChange: d
+  }), s = j(w.locale, {
+    hour: "2-digit",
+    minute: "2-digit"
+  }), p = m.useMemo(() => {
+    const e = s.formatToParts(/* @__PURE__ */ new Date()), { value: t } = e.find((i) => i.type === "literal");
+    return t;
+  }, [s]), A = m.useMemo(() => {
+    const e = 60 / a;
+    return [...Array(24).keys()].flatMap((t) => [...Array(e).keys()].map((i) => s.format(new Date(0, 0, 0, t, i * a))));
+  }, [a, s]), F = (e) => {
+    (!e || h(e)) && l(e);
+  }, y = (e) => {
+    const [t, i] = e.split(p);
+    if (!t && !i)
+      return;
+    const T = Number(t ?? "0"), g = Number(i ?? "0");
+    if (!(T > 23 || g > 59))
+      return s.format(new Date(0, 0, 0, T, g));
+  }, N = (e) => {
+    const t = y(e.target.value);
+    t ? (l(t), f(t)) : l(x);
+  }, B = (e) => {
+    if (typeof e < "u") {
+      const t = y(e);
+      f(t);
+    } else
+      f(e);
+  };
+  return m.useEffect(() => {
+    const e = typeof n > "u" ? "" : n;
+    h(e) && l(e);
+  }, [n, l]), r($, { ...u, value: x, onChange: B, isPrintableCharacter: h, allowCustomValue: !0, placeholder: `--${p}--`, autocomplete: "none", startIcon: r(R, {}), id: k, inputMode: "numeric", pattern: `\\d{2}${p}\\d{2}`, textValue: I, onTextValueChange: F, onBlur: N, children: A.map((e) => r(v, { value: e, children: e }, e)) });
+}, R = S(M)`
+  height: 1rem;
+  width: 1rem;
+
+  & > path {
+    fill: ${({ theme: o }) => o.colors.neutral500};
+  }
+`, ne = ({ label: o, error: a, hint: b, id: C, required: n, labelAction: c, ...d }) => {
+  const u = V(C);
+  return r(E, { hint: b, error: a, id: u, required: n, children: D(O, { direction: "column", alignItems: "stretch", gap: 1, children: [r(_, { action: c, children: o }), r(H, { id: u, error: a, required: n, ...d }), r(q, {}), r(z, {})] }) });
+};
+export {
+  ne as TimePicker,
+  H as TimePickerInput
+};

package/dist/TimePicker/index.cjs

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

package/dist/TimePicker/index.js

@@ -0,0 +1,5 @@
+import { TimePicker as r, TimePickerInput as m } from "./TimePicker.js";
+export {
+  r as TimePicker,
+  m as TimePickerInput
+};

package/dist/ToggleCheckbox/ToggleCheckbox.cjs

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),R=require("react"),k=require("styled-components"),m=require("../themes/utils.cjs"),_=require("../Box/Box.cjs"),S=require("../Flex/Flex.cjs"),B=require("../Field/FieldContext.cjs"),F=require("../VisuallyHidden/VisuallyHidden.cjs"),f=require("../Typography/Typography.cjs"),x=e=>e&&e.__esModule?e:{default:e},L=x(R),a=x(k),W=a.default.label`
+  position: relative;
+  display: inline-block;
+  z-index: 0;
+  width: 100%;
+`,z=a.default(_.Box)`
+  cursor: ${({disabled:e})=>e?"not-allowed":void 0};
+  // Masks the background of each value
+  overflow: hidden;
+  flex-wrap: wrap;
+
+  ${m.inputFocusStyle()}
+`,h=a.default(S.Flex).attrs({hasRadius:!0})`
+  background-color: ${({theme:e,checked:o,disabled:l})=>o?l?e.colors.neutral200:e.colors.neutral0:"transparent"};
+  border: 1px solid
+    ${({theme:e,checked:o,disabled:l})=>o&&o!==null?l?e.colors.neutral300:e.colors.neutral200:l?e.colors.neutral150:e.colors.neutral100};
+  position: relative;
+  user-select: none;
+  z-index: 2;
+  flex: 1 1 50%;
+  /**
+    We declare the defined value because we want the height of the input when 
+    the values are in a row to be 40px. But defining a height on the label
+    would break the input when it wraps.
+  */
+  padding-top: ${({size:e})=>`${e==="S"?"2px":"6px"}`};
+  padding-bottom: ${({size:e})=>`${e==="S"?"2px":"6px"}`};
+`,M=a.default.input`
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+`,g=L.default.forwardRef(({size:e="M",onLabel:o,offLabel:l,children:b,checked:r=!1,disabled:t=!1,onChange:u,...y},C)=>{const{error:d,hint:w,id:c,name:j,required:q}=B.useField(),p="neutral600";let T=!r&&r!==null?"danger700":p,$=r?"primary600":p;const v=s=>{t||u&&u(s)};let i;return d?i=`${c}-error`:w&&(i=`${c}-hint`),n.jsxs(W,{children:[n.jsx(F.VisuallyHidden,{children:b}),n.jsxs(z,{hasRadius:!0,disabled:t,padding:1,display:"flex",background:t?"neutral150":"neutral100",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral200",hasError:!!d,children:[n.jsx(h,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:r===null?!1:!r,disabled:t,children:n.jsx(f.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:t?"neutral700":T,children:l})}),n.jsx(h,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:r===null?!1:r,disabled:t,children:n.jsx(f.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:t?"neutral700":$,children:o})}),n.jsx(M,{type:"checkbox","aria-disabled":t,"aria-describedby":i,onChange:s=>v(s),name:j,ref:C,"aria-required":q,...y,checked:!(r===null||!r)})]})]})});g.displayName="ToggleCheckbox";exports.ToggleCheckbox=g;

package/dist/ToggleCheckbox/ToggleCheckbox.js

@@ -0,0 +1,59 @@
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import R from "react";
+import i from "styled-components";
+import { inputFocusStyle as T } from "../themes/utils.js";
+import { Box as L } from "../Box/Box.js";
+import { Flex as W } from "../Flex/Flex.js";
+import { useField as j } from "../Field/FieldContext.js";
+import { VisuallyHidden as z } from "../VisuallyHidden/VisuallyHidden.js";
+import { Typography as h } from "../Typography/Typography.js";
+const B = i.label`
+  position: relative;
+  display: inline-block;
+  z-index: 0;
+  width: 100%;
+`, S = i(L)`
+  cursor: ${({ disabled: e }) => e ? "not-allowed" : void 0};
+  // Masks the background of each value
+  overflow: hidden;
+  flex-wrap: wrap;
+
+  ${T()}
+`, g = i(W).attrs({
+  hasRadius: !0
+})`
+  background-color: ${({ theme: e, checked: o, disabled: n }) => o ? n ? e.colors.neutral200 : e.colors.neutral0 : "transparent"};
+  border: 1px solid
+    ${({ theme: e, checked: o, disabled: n }) => o && o !== null ? n ? e.colors.neutral300 : e.colors.neutral200 : n ? e.colors.neutral150 : e.colors.neutral100};
+  position: relative;
+  user-select: none;
+  z-index: 2;
+  flex: 1 1 50%;
+  /**
+    We declare the defined value because we want the height of the input when 
+    the values are in a row to be 40px. But defining a height on the label
+    would break the input when it wraps.
+  */
+  padding-top: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
+  padding-bottom: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
+`, F = i.input`
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+`, I = R.forwardRef(({ size: e = "M", onLabel: o, offLabel: n, children: x, checked: r = !1, disabled: t = !1, onChange: s, ...b }, m) => {
+  const { error: d, hint: y, id: p, name: w, required: C } = j(), f = "neutral600";
+  let $ = !r && r !== null ? "danger700" : f, v = r ? "primary600" : f;
+  const k = (u) => {
+    t || s && s(u);
+  };
+  let l;
+  return d ? l = `${p}-error` : y && (l = `${p}-hint`), c(B, { children: [a(z, { children: x }), c(S, { hasRadius: !0, disabled: t, padding: 1, display: "flex", background: t ? "neutral150" : "neutral100", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral200", hasError: !!d, children: [a(g, { size: e, paddingLeft: 3, paddingRight: 3, justifyContent: "center", alignItems: "center", "aria-hidden": !0, checked: r === null ? !1 : !r, disabled: t, children: a(h, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: t ? "neutral700" : $, children: n }) }), a(g, { size: e, paddingLeft: 3, paddingRight: 3, justifyContent: "center", alignItems: "center", "aria-hidden": !0, checked: r === null ? !1 : r, disabled: t, children: a(h, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: t ? "neutral700" : v, children: o }) }), a(F, { type: "checkbox", "aria-disabled": t, "aria-describedby": l, onChange: (u) => k(u), name: w, ref: m, "aria-required": C, ...b, checked: !(r === null || !r) })] })] });
+});
+I.displayName = "ToggleCheckbox";
+export {
+  I as ToggleCheckbox
+};

package/dist/ToggleCheckbox/index.cjs

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

package/dist/ToggleCheckbox/index.js

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

package/dist/ToggleInput/ToggleInput.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("styled-components"),p=require("../hooks/useId.cjs"),m=require("../ToggleCheckbox/ToggleCheckbox.cjs"),T=require("../Field/Field.cjs"),I=require("../TextButton/TextButton.cjs"),o=require("../Flex/Flex.cjs"),y=require("../Field/FieldLabel.cjs"),_=require("../Field/FieldHint.cjs"),b=require("../Field/FieldError.cjs"),k=t=>t&&t.__esModule?t:{default:t},d=k(j),B=d.default(T.Field)`
+  max-width: 320px;
+`,C=d.default(I.TextButton)`
+  align-self: flex-end;
+  margin-left: auto;
+`,u=({disabled:t=!1,size:c="M",error:a,hint:x,label:r,name:g,labelAction:f,required:F=!1,id:h,onClear:i,clearLabel:n,checked:l=!1,...q})=>{const s=p.useId(h);return e.jsx(B,{name:g,hint:x,error:a,id:s,required:F,children:e.jsxs(o.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[e.jsxs(o.Flex,{children:[e.jsx(y.FieldLabel,{action:f,children:r}),n&&i&&l!==null&&!t&&e.jsx(C,{onClick:i,children:n})]}),e.jsx(m.ToggleCheckbox,{id:s,size:c,checked:l,disabled:t,...q,children:r}),e.jsx(_.FieldHint,{}),e.jsx(b.FieldError,{})]})})};u.displayName="ToggleInput";exports.ToggleInput=u;

package/dist/ToggleInput/ToggleInput.js

@@ -0,0 +1,23 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import p from "styled-components";
+import { useId as F } from "../hooks/useId.js";
+import { ToggleCheckbox as I } from "../ToggleCheckbox/ToggleCheckbox.js";
+import { Field as T } from "../Field/Field.js";
+import { TextButton as j } from "../TextButton/TextButton.js";
+import { Flex as d } from "../Flex/Flex.js";
+import { FieldLabel as k } from "../Field/FieldLabel.js";
+import { FieldHint as y } from "../Field/FieldHint.js";
+import { FieldError as B } from "../Field/FieldError.js";
+const C = p(T)`
+  max-width: 320px;
+`, q = p(j)`
+  align-self: flex-end;
+  margin-left: auto;
+`, w = ({ disabled: e = !1, size: s = "M", error: f, hint: c, label: o, name: a, labelAction: g, required: h = !1, id: u, onClear: i, clearLabel: t, checked: n = !1, ...x }) => {
+  const l = F(u);
+  return r(C, { name: a, hint: c, error: f, id: l, required: h, children: m(d, { direction: "column", alignItems: "stretch", gap: 1, children: [m(d, { children: [r(k, { action: g, children: o }), t && i && n !== null && !e && r(q, { onClick: i, children: t })] }), r(I, { id: l, size: s, checked: n, disabled: e, ...x, children: o }), r(y, {}), r(B, {})] }) });
+};
+w.displayName = "ToggleInput";
+export {
+  w as ToggleInput
+};

package/dist/ToggleInput/index.cjs

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

package/dist/ToggleInput/index.js

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

package/dist/Tooltip/Tooltip.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("react"),x=require("styled-components"),j=require("./hooks/useTooltipHandlers.cjs"),h=require("./hooks/useTooltipLayout.cjs"),l=require("../hooks/useId.cjs"),T=require("../Portal/Portal.cjs"),q=require("../Box/Box.cjs"),_=require("../VisuallyHidden/VisuallyHidden.cjs"),m=require("../Typography/Typography.cjs"),v=e=>e&&e.__esModule?e:{default:e};function I(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const O=I(g),R=v(x),H=R.default(q.Box)`
+  /* z-index exist because of its position inside Modals */
+  z-index: 4;
+  display: ${({visible:e})=>e?"revert":"none"};
+`,M=({children:e,label:r,description:t,delay:n=500,position:d="top",id:u,...a})=>{const i=l.useId(u),c=l.useId(),{visible:s,...p}=j.useTooltipHandlers(n),{tooltipWrapperRef:f,toggleSourceRef:b}=h.useTooltipLayout(s,d),y=O.cloneElement(e,{tabIndex:0,"aria-labelledby":r?i:void 0,"aria-describedby":t?i:void 0,...p});return o.jsxs(o.Fragment,{children:[o.jsx(T.Portal,{children:o.jsxs(H,{id:i,background:"neutral900",hasRadius:!0,padding:2,role:"tooltip",ref:f,visible:s,position:"absolute",...a,children:[s&&o.jsx(_.VisuallyHidden,{id:c,children:t}),o.jsx(m.Typography,{as:"p",variant:"pi",fontWeight:"bold",textColor:"neutral0",children:r||t})]})}),o.jsx("span",{ref:b,children:y})]})};exports.Tooltip=M;

package/dist/Tooltip/Tooltip.js

@@ -0,0 +1,26 @@
+import { jsxs as l, Fragment as x, jsx as o } from "react/jsx-runtime";
+import * as y from "react";
+import g from "styled-components";
+import { useTooltipHandlers as T } from "./hooks/useTooltipHandlers.js";
+import { useTooltipLayout as v } from "./hooks/useTooltipLayout.js";
+import { useId as d } from "../hooks/useId.js";
+import { Portal as I } from "../Portal/Portal.js";
+import { Box as R } from "../Box/Box.js";
+import { VisuallyHidden as H } from "../VisuallyHidden/VisuallyHidden.js";
+import { Typography as W } from "../Typography/Typography.js";
+const j = g(R)`
+  /* z-index exist because of its position inside Modals */
+  z-index: 4;
+  display: ${({ visible: e }) => e ? "revert" : "none"};
+`, S = ({ children: e, label: n, description: r, delay: s = 500, position: p = "top", id: a, ...m }) => {
+  const t = d(a), c = d(), { visible: i, ...f } = T(s), { tooltipWrapperRef: u, toggleSourceRef: b } = v(i, p), h = y.cloneElement(e, {
+    tabIndex: 0,
+    "aria-labelledby": n ? t : void 0,
+    "aria-describedby": r ? t : void 0,
+    ...f
+  });
+  return l(x, { children: [o(I, { children: l(j, { id: t, background: "neutral900", hasRadius: !0, padding: 2, role: "tooltip", ref: u, visible: i, position: "absolute", ...m, children: [i && o(H, { id: c, children: r }), o(W, { as: "p", variant: "pi", fontWeight: "bold", textColor: "neutral0", children: n || r })] }) }), o("span", { ref: b, children: h })] });
+};
+export {
+  S as Tooltip
+};

package/dist/Tooltip/hooks/useTooltipHandlers.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),u=r=>{const[s,e]=o.useState(!1),t=o.useRef(null),n=()=>{typeof t.current=="number"&&(clearTimeout(t.current),t.current=null)};return o.useEffect(()=>()=>{n()},[]),{visible:s,onFocus:()=>{e(!0)},onBlur:()=>{e(!1)},onMouseEnter:()=>{t.current=setTimeout(()=>{e(!0)},r)},onMouseLeave:()=>{n(),e(!1)}}};exports.useTooltipHandlers=u;

package/dist/Tooltip/hooks/useTooltipHandlers.js

@@ -0,0 +1,22 @@
+import { useState as s, useRef as u, useEffect as c } from "react";
+const p = (n) => {
+  const [r, e] = s(!1), o = u(null), t = () => {
+    typeof o.current == "number" && (clearTimeout(o.current), o.current = null);
+  };
+  return c(() => () => {
+    t();
+  }, []), { visible: r, onFocus: () => {
+    e(!0);
+  }, onBlur: () => {
+    e(!1);
+  }, onMouseEnter: () => {
+    o.current = setTimeout(() => {
+      e(!0);
+    }, n);
+  }, onMouseLeave: () => {
+    t(), e(!1);
+  } };
+};
+export {
+  p as useTooltipHandlers
+};

package/dist/Tooltip/hooks/useTooltipLayout.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),c=require("../utils/positionTooltip.cjs"),i=(e,u)=>{const l=o.useRef(null),r=o.useRef(null);return o.useLayoutEffect(()=>{if(e){const t=l.current,s=r.current;if(t&&s){const n=c.positionTooltip(t,s,u);t.style.left=`${n.left}px`,t.style.top=`${n.top}px`}}},[u,e]),{tooltipWrapperRef:l,toggleSourceRef:r}};exports.useTooltipLayout=i;

package/dist/Tooltip/hooks/useTooltipLayout.js

@@ -0,0 +1,17 @@
+import { useRef as u, useLayoutEffect as c } from "react";
+import { positionTooltip as f } from "../utils/positionTooltip.js";
+const g = (o, e) => {
+  const r = u(null), l = u(null);
+  return c(() => {
+    if (o) {
+      const t = r.current, p = l.current;
+      if (t && p) {
+        const n = f(t, p, e);
+        t.style.left = `${n.left}px`, t.style.top = `${n.top}px`;
+      }
+    }
+  }, [e, o]), { tooltipWrapperRef: r, toggleSourceRef: l };
+};
+export {
+  g as useTooltipLayout
+};

package/dist/Tooltip/index.cjs

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

package/dist/Tooltip/index.js

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

package/dist/Tooltip/utils/positionTooltip.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=8,d=(h,i)=>{const f=(h.width-i.width)/2,t=i.left-f,n=i.top+i.height+s+window.pageYOffset;return{left:t,top:n}},o=(h,i)=>{const f=(h.height-i.height)/2,t=i.left+i.width+s,n=i.top-f+window.pageYOffset;return{left:t,top:n}},p=(h,i)=>{const f=(h.height-i.height)/2,t=i.left-h.width-s,n=i.top-f+window.pageYOffset;return{left:t,top:n}},e=(h,i)=>{const f=(h.width-i.width)/2;let t=i.left-f,n=i.top-h.height-s+window.pageYOffset;const w=window.innerWidth-i.right;return i.left+h.width-w>window.innerWidth?(t=i.left-h.width-s,n=i.top+window.scrollY-i.height/2):t<0?(t=i.width+i.left+s,n=i.top+window.scrollY-h.height/2+s):n<0&&t>0&&(n=i.top+i.height+s),{left:t,top:n}},r=(h,i,f)=>{const t=h.getBoundingClientRect(),n=i.getBoundingClientRect();return f==="bottom"?d(t,n):f==="right"?o(t,n):f==="left"?p(t,n):e(t,n)};exports.positionTooltip=r;

package/dist/Tooltip/utils/positionTooltip.js

@@ -0,0 +1,27 @@
+const s = (h, i) => {
+  const f = (h.width - i.width) / 2, n = i.left - f, t = i.top + i.height + 8 + window.pageYOffset;
+  return {
+    left: n,
+    top: t
+  };
+}, w = (h, i) => {
+  const f = (h.height - i.height) / 2, n = i.left + i.width + 8, t = i.top - f + window.pageYOffset;
+  return { left: n, top: t };
+}, d = (h, i) => {
+  const f = (h.height - i.height) / 2, n = i.left - h.width - 8, t = i.top - f + window.pageYOffset;
+  return { left: n, top: t };
+}, p = (h, i) => {
+  const f = (h.width - i.width) / 2;
+  let n = i.left - f, t = i.top - h.height - 8 + window.pageYOffset;
+  const E = window.innerWidth - i.right;
+  return i.left + h.width - E > window.innerWidth ? (n = i.left - h.width - 8, t = i.top + window.scrollY - i.height / 2) : n < 0 ? (n = i.width + i.left + 8, t = i.top + window.scrollY - h.height / 2 + 8) : t < 0 && n > 0 && (t = i.top + i.height + 8), {
+    left: n,
+    top: t
+  };
+}, e = (h, i, f) => {
+  const n = h.getBoundingClientRect(), t = i.getBoundingClientRect();
+  return f === "bottom" ? s(n, t) : f === "right" ? w(n, t) : f === "left" ? d(n, t) : p(n, t);
+};
+export {
+  e as positionTooltip
+};

package/dist/Typography/Typography.cjs

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),o=require("./utils.cjs"),r=require("../helpers/theme.cjs"),i=e=>e&&e.__esModule?e:{default:e},a=i(n),s={fontSize:!0,fontWeight:!0},l=a.default.span.withConfig({shouldForwardProp:(e,t)=>!s[e]&&t(e)})`
+  ${o.variantStyle}
+  ${o.ellipsisStyle}
+
+  // These properties need to come after {variantStyle}, because they might
+  // overwrite a variant attribute
+  font-weight: ${({theme:e,fontWeight:t})=>r.extractStyleFromTheme(e.fontWeights,t,void 0)};
+  font-size: ${({theme:e,fontSize:t})=>r.extractStyleFromTheme(e.fontSizes,t,void 0)};
+  line-height: ${({theme:e,lineHeight:t})=>r.extractStyleFromTheme(e.lineHeights,t,t)};
+  color: ${o.handleColor};
+  text-align: ${({textAlign:e})=>e};
+  text-decoration: ${({textDecoration:e})=>e};
+  text-transform: ${({textTransform:e})=>e};
+`;exports.Typography=l;

package/dist/Typography/Typography.js

@@ -0,0 +1,25 @@
+import r from "styled-components";
+import { variantStyle as i, ellipsisStyle as n, handleColor as a } from "./utils.js";
+import { extractStyleFromTheme as o } from "../helpers/theme.js";
+const s = {
+  fontSize: !0,
+  fontWeight: !0
+}, m = r.span.withConfig({
+  shouldForwardProp: (t, e) => !s[t] && e(t)
+})`
+  ${i}
+  ${n}
+
+  // These properties need to come after {variantStyle}, because they might
+  // overwrite a variant attribute
+  font-weight: ${({ theme: t, fontWeight: e }) => o(t.fontWeights, e, void 0)};
+  font-size: ${({ theme: t, fontSize: e }) => o(t.fontSizes, e, void 0)};
+  line-height: ${({ theme: t, lineHeight: e }) => o(t.lineHeights, e, e)};
+  color: ${a};
+  text-align: ${({ textAlign: t }) => t};
+  text-decoration: ${({ textDecoration: t }) => t};
+  text-transform: ${({ textTransform: t }) => t};
+`;
+export {
+  m as Typography
+};

package/dist/Typography/constants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t="alpha",A="beta",o="delta",s="epsilon",e="omega",n="pi",T="sigma",c=[t,A,o,s,e,n,T];exports.ALPHA=t;exports.BETA=A;exports.DELTA=o;exports.EPSILON=s;exports.OMEGA=e;exports.PI=n;exports.SIGMA=T;exports.TEXT_VARIANTS=c;

package/dist/Typography/constants.js

@@ -0,0 +1,11 @@
+const o = "alpha", t = "beta", s = "delta", n = "epsilon", c = "omega", A = "pi", a = "sigma", e = [o, t, s, n, c, A, a];
+export {
+  o as ALPHA,
+  t as BETA,
+  s as DELTA,
+  n as EPSILON,
+  c as OMEGA,
+  A as PI,
+  a as SIGMA,
+  e as TEXT_VARIANTS
+};

package/dist/Typography/index.cjs

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

package/dist/Typography/index.js

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

package/dist/Typography/utils.cjs

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./constants.cjs"),n=({ellipsis:e=!1})=>e&&`
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `,s=({variant:e=t.OMEGA,theme:i})=>{switch(e){case t.ALPHA:return`
+        font-weight: ${i.fontWeights.bold};
+        font-size: ${i.fontSizes[5]};
+        line-height: ${i.lineHeights[2]};
+      `;case t.BETA:return`
+        font-weight: ${i.fontWeights.bold};
+        font-size: ${i.fontSizes[4]};
+        line-height: ${i.lineHeights[1]};
+      `;case t.DELTA:return`
+        font-weight: ${i.fontWeights.semiBold};
+        font-size: ${i.fontSizes[3]};
+        line-height: ${i.lineHeights[2]};
+      `;case t.EPSILON:return`
+        font-size: ${i.fontSizes[3]};
+        line-height: ${i.lineHeights[6]};
+      `;case t.OMEGA:return`
+        font-size: ${i.fontSizes[2]};
+        line-height: ${i.lineHeights[4]};
+      `;case t.PI:return`
+        font-size: ${i.fontSizes[1]};
+        line-height: ${i.lineHeights[3]};
+      `;case t.SIGMA:return`
+        font-weight: ${i.fontWeights.bold};
+        font-size: ${i.fontSizes[0]};
+        line-height: ${i.lineHeights[5]};
+        text-transform: uppercase;
+      `;default:return`
+        font-size: ${i.fontSizes[2]};
+      `}},o=({theme:e,textColor:i})=>e.colors[i||"neutral800"];exports.ellipsisStyle=n;exports.handleColor=o;exports.variantStyle=s;

package/dist/Typography/utils.js

@@ -0,0 +1,59 @@
+import { SIGMA as e, PI as s, OMEGA as t, EPSILON as o, DELTA as l, BETA as f, ALPHA as r } from "./constants.js";
+const $ = ({ ellipsis: n = !1 }) => n && `
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `, a = ({ variant: n = t, theme: i }) => {
+  switch (n) {
+    case r:
+      return `
+        font-weight: ${i.fontWeights.bold};
+        font-size: ${i.fontSizes[5]};
+        line-height: ${i.lineHeights[2]};
+      `;
+    case f:
+      return `
+        font-weight: ${i.fontWeights.bold};
+        font-size: ${i.fontSizes[4]};
+        line-height: ${i.lineHeights[1]};
+      `;
+    case l:
+      return `
+        font-weight: ${i.fontWeights.semiBold};
+        font-size: ${i.fontSizes[3]};
+        line-height: ${i.lineHeights[2]};
+      `;
+    case o:
+      return `
+        font-size: ${i.fontSizes[3]};
+        line-height: ${i.lineHeights[6]};
+      `;
+    case t:
+      return `
+        font-size: ${i.fontSizes[2]};
+        line-height: ${i.lineHeights[4]};
+      `;
+    case s:
+      return `
+        font-size: ${i.fontSizes[1]};
+        line-height: ${i.lineHeights[3]};
+      `;
+    case e:
+      return `
+        font-weight: ${i.fontWeights.bold};
+        font-size: ${i.fontSizes[0]};
+        line-height: ${i.lineHeights[5]};
+        text-transform: uppercase;
+      `;
+    default:
+      return `
+        font-size: ${i.fontSizes[2]};
+      `;
+  }
+}, z = ({ theme: n, textColor: i }) => n.colors[i || "neutral800"];
+export {
+  $ as ellipsisStyle,
+  z as handleColor,
+  a as variantStyle
+};

package/dist/VisuallyHidden/VisuallyHidden.cjs

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),d=e=>e&&e.__esModule?e:{default:e},i=d(t),l=i.default.div`
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+`;exports.VisuallyHidden=l;

package/dist/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,14 @@
+import i from "styled-components";
+const o = i.div`
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+`;
+export {
+  o as VisuallyHidden
+};

package/dist/VisuallyHidden/index.cjs

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

package/dist/VisuallyHidden/index.js

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

package/dist/helpers/context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),d=require("react");function f(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const u=f(d),b=(e,t)=>{const r=u.createContext(t);function n(c){const{children:o,...i}=c,a=u.useMemo(()=>i,Object.values(i));return l.jsx(r.Provider,{value:a,children:o})}function s(c){const o=u.useContext(r);if(o)return o;if(t!==void 0)return t;throw new Error(`\`${c}\` must be used within \`${e}\``)}return n.displayName=`${e}Provider`,[n,s]};exports.createContext=b;

package/dist/helpers/context.js

@@ -0,0 +1,21 @@
+import { jsx as x } from "react/jsx-runtime";
+import * as n from "react";
+const v = (o, t) => {
+  const c = n.createContext(t);
+  function i(r) {
+    const { children: e, ...s } = r, d = n.useMemo(() => s, Object.values(s));
+    return x(c.Provider, { value: d, children: e });
+  }
+  function u(r) {
+    const e = n.useContext(c);
+    if (e)
+      return e;
+    if (t !== void 0)
+      return t;
+    throw new Error(`\`${r}\` must be used within \`${o}\``);
+  }
+  return i.displayName = `${o}Provider`, [i, u];
+};
+export {
+  v as createContext
+};

package/dist/helpers/deprecations.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n="[@strapi/design-system]:",c=r=>{const e=r;let t=!1;if(typeof e!="function")throw new TypeError(`${n} once requires a function parameter`);return(...o)=>{t||(e(...o),t=!0)}};exports.PREFIX=n;exports.once=c;

package/dist/helpers/deprecations.js

@@ -0,0 +1,13 @@
+const o = "[@strapi/design-system]:", c = (n) => {
+  const e = n;
+  let t = !1;
+  if (typeof e != "function")
+    throw new TypeError(`${o} once requires a function parameter`);
+  return (...r) => {
+    t || (e(...r), t = !0);
+  };
+};
+export {
+  o as PREFIX,
+  c as once
+};

package/dist/helpers/getDefaultLocale.cjs

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="en-EN";/**
+ * @preserve
+ * @deprecated This will be removed in v2.0.0, you can access the locale from `useDesignSystem` instead.
+ */const t=()=>typeof navigator>"u"?e:navigator.language?navigator.language:e;exports.getDefaultLocale=t;

package/dist/helpers/getDefaultLocale.js

@@ -0,0 +1,9 @@
+const e = "en-EN";
+/**
+ * @preserve
+ * @deprecated This will be removed in v2.0.0, you can access the locale from `useDesignSystem` instead.
+ */
+const n = () => typeof navigator > "u" ? e : navigator.language ? navigator.language : e;
+export {
+  n as getDefaultLocale
+};

package/dist/helpers/getFocusableNodes.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=(t,e)=>[...t.querySelectorAll('a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')].filter(r=>r.hasAttribute("disabled")?!1:e?!0:r.getAttribute("tabindex")!=="-1"),s=t=>t.filter(e=>e.tagName==="INPUT"?e.type!=="checkbox"&&e.type!=="radio":!1);exports.getFocusableNodes=a;exports.getFocusableNodesWithKeyboardNav=s;