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

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/TextButton/TextButton.cjs

@@ -1,15 +1,14 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),x=require("react"),g=require("@strapi/icons"),c=require("styled-components"),l=require("../Box/Box.cjs"),m=require("../Flex/Flex.cjs"),j=require("../themes/utils.cjs"),h=require("../Typography/Typography.cjs"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function T(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 o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const _=T(x),u=b(c),v=c.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),y=require("react"),g=require("@strapi/icons"),c=require("styled-components"),m=require("../Flex/Flex.cjs"),b=require("../themes/utils.cjs"),j=require("../Typography/Typography.cjs"),x=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function h(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 T=h(y),l=x(c),_=c.keyframes`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`,B=u.default.div`
-  animation: ${v} 2s infinite linear;
+`,v=l.default.div`
+  animation: ${_} 2s infinite linear;
   will-change: transform;
-`,q=u.default(m.Flex)`
-  background: transparent;
+`,q=l.default(m.Flex)`
   border: none;
 
   &[aria-disabled='true'] {
@@ -19,14 +18,9 @@
     }
   }
 
-  svg {
-    display: flex;
-    font-size: ${10/16}rem;
-  }
-
   svg path {
     fill: ${({theme:e})=>e.colors.primary600};
   }
 
-  ${j.buttonFocusStyle}
-`,d=_.forwardRef(({children:e,startIcon:r,endIcon:t,onClick:o,disabled:s=!1,loading:a=!1,...p},f)=>{const y=o&&!s?o:void 0,i=s||a;return n.jsxs(q,{ref:f,"aria-disabled":i,onClick:y,as:"button",type:"button",...p,children:[(r||a)&&n.jsx(l.Box,{as:"span",paddingRight:2,"aria-hidden":!0,children:a?n.jsx(B,{children:n.jsx(g.Loader,{})}):r}),n.jsx(h.Typography,{variant:"pi",textColor:i?"neutral600":"primary600",children:e}),t&&n.jsx(l.Box,{as:"span",paddingLeft:2,"aria-hidden":!0,children:t})]})});d.displayName="TextButton";exports.TextButton=d;
+  ${b.buttonFocusStyle}
+`,u=T.forwardRef(({children:e,startIcon:r,endIcon:t,onClick:n,disabled:a=!1,loading:s=!1,...d},p)=>{const f=n&&!a?n:void 0,i=a||s;return o.jsxs(q,{ref:p,"aria-disabled":i,onClick:f,as:"button",type:"button",background:"transparent",gap:2,...d,children:[s?o.jsx(v,{"aria-hidden":!0,children:o.jsx(g.Loader,{})}):r,o.jsx(j.Typography,{variant:"pi",textColor:i?"neutral600":"primary600",children:e}),t]})});u.displayName="TextButton";exports.TextButton=u;

package/dist/TextButton/TextButton.js

@@ -1,23 +1,21 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import * as u from "react";
-import { Loader as h } from "@strapi/icons";
-import d, { keyframes as g } from "styled-components";
-import { Box as p } from "../Box/Box.js";
-import { Flex as x } from "../Flex/Flex.js";
-import { buttonFocusStyle as y } from "../themes/utils.js";
-import { Typography as b } from "../Typography/Typography.js";
-const v = g`
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import * as c from "react";
+import { Loader as u } from "@strapi/icons";
+import i, { keyframes as h } from "styled-components";
+import { Flex as y } from "../Flex/Flex.js";
+import { buttonFocusStyle as g } from "../themes/utils.js";
+import { Typography as x } from "../Typography/Typography.js";
+const b = h`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`, $ = d.div`
-  animation: ${v} 2s infinite linear;
+`, v = i.div`
+  animation: ${b} 2s infinite linear;
   will-change: transform;
-`, B = d(x)`
-  background: transparent;
+`, T = i(y)`
   border: none;
 
   &[aria-disabled='true'] {
@@ -29,55 +27,43 @@ const v = g`
     }
   }
 
-  svg {
-    display: flex;
-    font-size: ${10 / 16}rem;
-  }
-
   svg path {
     fill: ${({
   theme: r
 }) => r.colors.primary600};
   }
 
-  ${y}
-`, T = u.forwardRef(({
+  ${g}
+`, $ = c.forwardRef(({
   children: r,
-  startIcon: o,
-  endIcon: a,
-  onClick: n,
-  disabled: i = !1,
-  loading: e = !1,
-  ...l
+  startIcon: s,
+  endIcon: l,
+  onClick: o,
+  disabled: e = !1,
+  loading: a = !1,
+  ...p
 }, m) => {
-  const f = n && !i ? n : void 0, s = i || e;
-  return c(B, {
+  const f = o && !e ? o : void 0, n = e || a;
+  return d(T, {
     ref: m,
-    "aria-disabled": s,
+    "aria-disabled": n,
     onClick: f,
     as: "button",
     type: "button",
-    ...l,
-    children: [(o || e) && t(p, {
-      as: "span",
-      paddingRight: 2,
+    background: "transparent",
+    gap: 2,
+    ...p,
+    children: [a ? t(v, {
       "aria-hidden": !0,
-      children: e ? t($, {
-        children: t(h, {})
-      }) : o
-    }), t(b, {
+      children: t(u, {})
+    }) : s, t(x, {
       variant: "pi",
-      textColor: s ? "neutral600" : "primary600",
+      textColor: n ? "neutral600" : "primary600",
       children: r
-    }), a && t(p, {
-      as: "span",
-      paddingLeft: 2,
-      "aria-hidden": !0,
-      children: a
-    })]
+    }), l]
   });
 });
-T.displayName = "TextButton";
+$.displayName = "TextButton";
 export {
-  T as TextButton
+  $ as TextButton
 };

package/dist/TextInput/TextInput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),I=require("prop-types"),g=require("../Field/Field.cjs"),v=require("../Field/FieldLabel.cjs"),y=require("../Field/FieldInput.cjs"),E=require("../Field/FieldHint.cjs"),T=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const x=require("../Flex/Flex.cjs"),h=require("../hooks/useId.cjs"),A=require("../themes/sizes.cjs"),u=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},t=u(d),e=u(I),i=t.default.forwardRef(({size:l,startAction:s,endAction:c,name:f,hint:p,error:F,label:r,labelAction:m,id:b,required:q,...a},n)=>{const j=h.useId(b),o=d.useRef(null);if(!r&&!a["aria-label"])throw new Error('The TextInput component needs a "label" or an "aria-label" props');return d.useImperativeHandle(n,()=>({inputWrapperRef:o})),t.default.createElement("div",{ref:o},t.default.createElement(g.Field,{name:f,hint:p,error:F,id:j,required:q},t.default.createElement(x.Flex,{direction:"column",alignItems:"stretch",gap:1},r&&t.default.createElement(v.FieldLabel,{action:m},r),t.default.createElement(y.FieldInput,{size:l,ref:n,startAction:s,endAction:c,...a}),t.default.createElement(E.FieldHint,null),t.default.createElement(T.FieldError,null))))});i.displayName="TextInput";i.defaultProps={"aria-label":void 0,label:void 0,labelAction:void 0,error:void 0,hint:void 0,id:void 0,startAction:void 0,size:"M",endAction:void 0,required:!1};i.propTypes={"aria-label":e.default.string,endAction:e.default.element,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.bool,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.element,name:e.default.string.isRequired,required:e.default.bool,size:e.default.oneOf(Object.keys(A.sizes.input)),startAction:e.default.element};exports.TextInput=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),i=require("react"),x=require("../Field/Field.cjs"),p=require("../Field/FieldLabel.cjs"),I=require("../Field/FieldInput.cjs"),q=require("../Field/FieldHint.cjs"),h=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const m=require("../Flex/Flex.cjs"),f=require("../hooks/useId.cjs"),n=i.forwardRef(({name:s,hint:d,error:c,label:r,labelAction:u,id:o,required:F,...t},a)=>{const j=f.useId(o),l=i.useRef(null);if(!r&&!t["aria-label"])throw new Error('The TextInput component needs a "label" or an "aria-label" props');return i.useImperativeHandle(a,()=>({inputWrapperRef:l})),e.jsx("div",{ref:l,children:e.jsx(x.Field,{name:s,hint:d,error:c,id:j,required:F,children:e.jsxs(m.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[r&&e.jsx(p.FieldLabel,{action:u,children:r}),e.jsx(I.FieldInput,{...t}),e.jsx(q.FieldHint,{}),e.jsx(h.FieldError,{})]})})})});n.displayName="TextInput";exports.TextInput=n;