@strapi/design-system 1.6.6 → 1.7.0-alpha.0

package/dist/Select/SelectList.js

@@ -1,87 +1,105 @@
-import O from "react";
-import r from "prop-types";
-import { UpState as f, DownState as b } from "./constants.js";
-import { useListRef as S } from "./hooks/useListRef.js";
-import { getActiveDescendant as u, changeDescendant as s } from "./utils.js";
-import { Flex as v } from "../Flex/Flex.js";
-import { KeyboardKeys as i } from "../helpers/keyboardKeys.js";
-const m = ({ labelledBy: g, onSelectItem: p, children: y, multi: d, onEscape: a, expanded: A }) => {
-  const e = S(A), D = (o) => {
-    switch (o.key) {
-      case i.ESCAPE: {
-        o.stopPropagation(), a();
-        break;
-      }
-      case i.DOWN: {
-        o.preventDefault();
-        const t = u(e.current);
-        if (!t)
-          return;
-        const n = t.nextSibling;
-        if (n)
-          s(e.current, n);
-        else {
-          const c = e.current.querySelectorAll('[role="option"]')[0];
-          s(e.current, c);
+import { jsx as A } from "react/jsx-runtime";
+import * as b from "react";
+import S from "compute-scroll-into-view";
+import { Flex as h } from "../Flex/Flex.js";
+import { KeyboardKeys as l } from "../helpers/keyboardKeys.js";
+const g = {
+  Keyboard: "down:keyboard",
+  Mouse: "down:mouse"
+}, m = {
+  Keyboard: "up:keyboard",
+  Mouse: "up:mouse"
+}, E = ({
+  labelledBy: r,
+  onSelectItem: e,
+  children: c,
+  multi: s = !1,
+  onEscape: t,
+  expanded: f
+}) => {
+  const o = K(f);
+  return A(h, {
+    as: "ul",
+    gap: 1,
+    direction: "column",
+    alignItems: "stretch",
+    role: "listbox",
+    "aria-labelledby": r,
+    tabIndex: -1,
+    ref: o,
+    onKeyDown: (i) => {
+      switch (i.key) {
+        case l.ESCAPE: {
+          i.stopPropagation(), t();
+          break;
         }
-        break;
-      }
-      case i.UP: {
-        o.preventDefault();
-        const t = u(e.current);
-        if (!t)
-          return;
-        const n = t.previousSibling;
-        if (n)
-          s(e.current, n);
-        else {
-          const l = e.current.querySelectorAll('[role="option"]'), c = l[l.length - 1];
-          s(e.current, c);
+        case l.DOWN: {
+          i.preventDefault();
+          const n = y(o.current);
+          if (!n)
+            return;
+          const a = n.nextSibling;
+          if (a)
+            u(o.current, a);
+          else {
+            const d = o.current.querySelectorAll('[role="option"]')[0];
+            u(o.current, d);
+          }
+          break;
+        }
+        case l.UP: {
+          i.preventDefault();
+          const n = y(o.current);
+          if (!n)
+            return;
+          const a = n.previousSibling;
+          if (a)
+            u(o.current, a);
+          else {
+            const p = o.current.querySelectorAll('[role="option"]'), d = p[p.length - 1];
+            u(o.current, d);
+          }
+          break;
+        }
+        case l.SPACE:
+        case l.ENTER: {
+          i.preventDefault();
+          const n = y(o.current);
+          n.getAttribute("data-opt-group") ? e(n.getAttribute("data-opt-group-children").split(","), n.getAttribute("data-opt-group")) : e(n.getAttribute("data-strapi-value")), s || t();
+          break;
         }
-        break;
-      }
-      case i.SPACE:
-      case i.ENTER: {
-        o.preventDefault();
-        const t = u(e.current);
-        t.getAttribute("data-opt-group") ? p(
-          t.getAttribute("data-opt-group-children").split(","),
-          t.getAttribute("data-opt-group")
-        ) : p(t.getAttribute("data-strapi-value")), d || a();
-        break;
       }
-    }
-  };
-  return /* @__PURE__ */ O.createElement(
-    v,
-    {
-      as: "ul",
-      gap: 1,
-      direction: "column",
-      alignItems: "stretch",
-      role: "listbox",
-      "aria-labelledby": g,
-      tabIndex: -1,
-      ref: e,
-      onKeyDown: D,
-      onBlur: a,
-      "aria-multiselectable": d
     },
-    y
-  );
-};
-m.defaultProps = {
-  labelledBy: void 0,
-  multi: !1
-};
-m.propTypes = {
-  children: r.node.isRequired,
-  expanded: r.oneOf([f.Keyboard, f.Mouse, b.Keyboard, b.Mouse]).isRequired,
-  labelledBy: r.string,
-  multi: r.bool,
-  onEscape: r.func.isRequired,
-  onSelectItem: r.func.isRequired
+    onBlur: t,
+    children: c
+  });
+}, u = (r, e) => {
+  r.setAttribute("aria-activedescendant", e.getAttribute("id")), r.querySelectorAll('[role="option"]').forEach((t) => t.classList.remove("is-focused")), e.classList.add("is-focused"), S(e, {
+    scrollMode: "if-needed",
+    block: "nearest",
+    inline: "nearest"
+  }).forEach(({
+    el: t,
+    top: f,
+    left: o
+  }) => {
+    t.scrollTop = f, t.scrollLeft = o;
+  });
+}, K = (r) => {
+  const e = b.useRef(null);
+  return b.useEffect(() => {
+    e.current.focus();
+  }, []), b.useEffect(() => {
+    if (!e.current)
+      return;
+    const c = e.current.querySelector('[aria-selected="true"]'), s = e.current.querySelectorAll('[role="option"]');
+    let t;
+    c ? t = c : r === m.Keyboard ? t = s[s.length - 1] : r === g.Keyboard && (t = s[0]), t && (r === m.Keyboard || r === g.Keyboard) && u(e.current, t);
+  }, []), e;
+}, y = (r) => {
+  const e = r.getAttribute("aria-activedescendant");
+  return r.querySelector(`#${e}`);
 };
 export {
-  m as SelectList
+  E as SelectList
 };

package/dist/Select/SelectParts.cjs

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

package/dist/Select/SelectParts.js

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

package/dist/Select/SingleSelect.cjs

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

package/dist/Select/SingleSelect.js

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

package/dist/Select/index.cjs

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

package/dist/Select/index.js

@@ -1,12 +1,17 @@
-import { Select as o } from "./Select.js";
-import { Option as p } from "./Option.js";
-import { OptGroup as m } from "./OptGroup.js";
-import { MultiSelectNested as l } from "./MultiSelectNested.js";
-import { SelectList as i } from "./SelectList.js";
+import { MultiSelectNested as o } from "./MultiSelectNested.js";
+import { MultiSelect as l, MultiSelectGroup as p, MultiSelectOption as i } from "./MultiSelect.js";
+import { SingleSelect as c, SingleSelectOption as f } from "./SingleSelect.js";
+import { Option as u } from "./Option.js";
+import { OptGroup as n } from "./OptGroup.js";
+import { SelectList as O } from "./SelectList.js";
 export {
-  l as MultiSelectNested,
-  m as OptGroup,
-  p as Option,
-  o as Select,
-  i as SelectList
+  l as MultiSelect,
+  p as MultiSelectGroup,
+  o as MultiSelectNested,
+  i as MultiSelectOption,
+  n as OptGroup,
+  u as Option,
+  O as SelectList,
+  c as SingleSelect,
+  f as SingleSelectOption
 };

package/dist/TimePicker/TimePicker.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),q=require("@strapi/icons"),x=require("styled-components"),f=require("../Flex/Flex.cjs"),g=require("../hooks/useId.cjs"),M=require("../Select/Select.cjs"),b=require("../Select/Option.cjs");require("../Select/OptGroup.cjs");require("../Select/MultiSelectNested.cjs");require("../Select/SelectList.cjs");const $=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},y=$(x),I=({id:t,value:i,step:a=15,...d})=>{const p=g.useId(t),h=24,s=[];let c=0;for(let e=0;e<h;e++)for(c=0;c<60;)s.push(`${e<10?`0${e}`:e}:${c<10?`0${c}`:c}`),c+=a;const j=()=>{const[e,u]=i?.split(":")??[],m=s.reduce((r,o)=>{const[l]=o.split(":");return Math.abs(l-e)<Math.abs(r-e)?l:r},s[0].split(":")[0]),S=s.reduce((r,o)=>{const l=o.split(":")[1];return Math.abs(l-u)<Math.abs(r-u)?l:r},s[0].split(":")[1]);return`${m}:${S}`};return n.jsx(M.Select,{id:p,placeholder:"--:--",value:i?j():null,startIcon:n.jsx(v,{children:n.jsx(q.Clock,{})}),...d,children:s.map(e=>n.jsx(b.Option,{value:e,children:e},e))})},v=y.default(f.Flex)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),b=require("@strapi/icons"),M=require("styled-components"),$=require("../Flex/Flex.cjs"),q=require("../hooks/useId.cjs"),d=require("../Select/SingleSelect.cjs"),y=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},I=y(M),v=({id:t,value:i,step:h=15,onChange:u,...p})=>{const g=q.useId(t),m=24,s=[];let n=0;for(let e=0;e<m;e++)for(n=0;n<60;)s.push(`${e<10?`0${e}`:e}:${n<10?`0${n}`:n}`),n+=h;const S=()=>{const[e,a]=i?.split(":")??[],j=s.reduce((l,r)=>{const[c]=r.split(":");return Math.abs(c-e)<Math.abs(l-e)?c:l},s[0].split(":")[0]),x=s.reduce((l,r)=>{const c=r.split(":")[1];return Math.abs(c-a)<Math.abs(l-a)?c:l},s[0].split(":")[1]);return`${j}:${x}`},f=e=>{u&&u(e.toString())};return o.jsx(d.SingleSelect,{id:g,placeholder:"--:--",value:i?S():void 0,startIcon:o.jsx(_,{as:"span",children:o.jsx(b.Clock,{})}),onChange:f,...p,children:s.map(e=>o.jsx(d.SingleSelectOption,{value:e,children:e},e))})},_=I.default($.Flex)`
   & > svg {
     height: 1rem;
     width: 1rem;
@@ -7,4 +7,4 @@
   & > svg path {
     fill: ${({theme:t})=>t.colors.neutral500};
   }
-`;exports.TimePicker=I;
+`;exports.TimePicker=v;