@strapi/design-system 1.7.2 → 1.7.3

package/dist/Combobox/Combobox.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),re=require("react"),V=require("@strapi/icons"),n=require("@strapi/ui-primitives"),te=require("styled-components"),ne=require("../hooks/useControllableState.cjs"),se=require("../hooks/useId.cjs"),le=require("../hooks/useIntersection.cjs"),ie=require("../themes/utils.cjs"),ae=require("../Loader/Loader.cjs"),k=require("../Box/Box.cjs"),b=require("../Typography/Typography.cjs"),ce=require("../Field/Field.cjs"),m=require("../Flex/Flex.cjs"),de=require("../Field/FieldLabel.cjs"),ue=require("../Field/FieldHint.cjs"),he=require("../Field/FieldError.cjs"),be=e=>e&&e.__esModule?e:{default:e};function xe(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(r,s,i.get?i:{enumerable:!0,get:()=>e[s]})}}return r.default=e,Object.freeze(r)}const c=xe(re),l=be(te),O=({children:e,clearLabel:r="clear",creatable:s=!1,createMessage:i=g=>`Create "${g}"`,disabled:d=!1,error:u,hasMoreItems:S=!1,hint:_,id:B,label:P,labelAction:E,loading:p=!1,loadingMessage:z="Loading content...",noOptionsMessage:D=()=>"No results found",onChange:C,onClear:f,onCreateOption:$,onInputChange:j,onLoadMore:y,placeholder:H="Select or enter a value",required:I=!1,defaultTextValue:L,textValue:M,value:N})=>{const[g,W]=c.useState(!1),[a,w]=ne.useControllableState({prop:M,defaultProp:L}),[U,T]=c.useState(""),q=c.useRef(null),v=c.useRef(null),A=c.useRef(null),h=se.useId(B),G=t=>{f&&!d&&(w(""),T(""),f(t),v.current.focus())},J=t=>{W(t)},K=t=>{w(t)},Q=t=>{T(t)},X=t=>{j&&j(t)},Y=t=>{C&&C(t)},F=`intersection-${CSS.escape(h)}`,Z=t=>{y&&S&&!p&&y(t)},R=()=>{$&&a&&$(a)};le.useIntersection(q,Z,{selectorToWatch:`#${F}`,skipWhen:!g});const ee=`${h}-hint`,oe=`${h}-error`;return o.jsx(ce.Field,{hint:_,error:u,id:h,required:I,children:o.jsxs(m.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[o.jsx(de.FieldLabel,{action:E,children:P}),o.jsxs(n.Combobox.Root,{autocomplete:s?"list":"both",onOpenChange:J,onTextValueChange:K,textValue:a,allowCustomValue:!0,disabled:d,required:I,value:N,onValueChange:Y,filterValue:U,onFilterValueChange:Q,children:[o.jsxs(ge,{$hasError:!!u,children:[o.jsx(me,{placeholder:H,id:h,"aria-invalid":!!u,"aria-labelledby":`${ee} ${oe}`,onChange:X,ref:v}),o.jsxs(m.Flex,{as:"span",gap:3,children:[a&&f?o.jsx(fe,{as:"button",hasRadius:!0,background:"transparent",type:"button",onClick:G,"aria-disabled":d,"aria-label":r,title:r,ref:A,children:o.jsx(V.Cross,{})}):null,o.jsx(Ce,{children:o.jsx(V.CarretDown,{})})]})]}),o.jsx(n.Combobox.Portal,{children:o.jsx($e,{sideOffset:4,children:o.jsxs(je,{ref:q,children:[e,s?o.jsx(n.Combobox.CreateItem,{onPointerUp:R,onClick:R,asChild:!0,children:o.jsx(x,{children:o.jsx(b.Typography,{children:i(a??"")})})}):null,!s&&!p?o.jsx(n.Combobox.NoValueFound,{asChild:!0,children:o.jsx(x,{$hasHover:!1,children:o.jsx(b.Typography,{children:D(a??"")})})}):null,p?o.jsx(m.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2,children:o.jsx(ae.Loader,{small:!0,children:z})}):null,o.jsx(k.Box,{id:F,width:"100%",height:"1px"})]})})})]}),o.jsx(ue.FieldHint,{}),o.jsx(he.FieldError,{})]})})},pe=e=>o.jsx(O,{...e,creatable:!0}),fe=l.default(k.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),te=require("react"),S=require("@strapi/icons"),n=require("@strapi/ui-primitives"),ne=require("styled-components"),se=require("../hooks/useControllableState.cjs"),le=require("../hooks/useId.cjs"),ae=require("../hooks/useIntersection.cjs"),ie=require("../themes/utils.cjs"),ce=require("../Loader/Loader.cjs"),$=require("../Box/Box.cjs"),h=require("../Typography/Typography.cjs"),de=require("../Field/Field.cjs"),b=require("../Flex/Flex.cjs"),ue=require("../Field/FieldLabel.cjs"),he=require("../Field/FieldHint.cjs"),be=require("../Field/FieldError.cjs"),xe=e=>e&&e.__esModule?e:{default:e};function pe(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const a=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(r,s,a.get?a:{enumerable:!0,get:()=>e[s]})}}return r.default=e,Object.freeze(r)}const c=pe(te),l=xe(ne),B=({children:e,clearLabel:r="clear",creatable:s=!1,createMessage:a=C=>`Create "${C}"`,defaultTextValue:p,disabled:d=!1,error:f,hasMoreItems:_=!1,hint:P,id:E,label:z,labelAction:D,loading:g=!1,loadingMessage:H="Loading content...",noOptionsMessage:L=()=>"No results found",onChange:j,onClear:m,onCreateOption:y,onInputChange:w,onLoadMore:I,placeholder:M="Select or enter a value",required:F=!1,startIcon:T,textValue:N,value:W})=>{const[C,U]=c.useState(!1),[i,q]=se.useControllableState({prop:N,defaultProp:p}),[A,v]=c.useState(""),R=c.useRef(null),V=c.useRef(null),G=c.useRef(null),u=le.useId(E),J=t=>{m&&!d&&(q(""),v(""),m(t),V.current.focus())},K=t=>{U(t)},Q=t=>{q(t)},X=t=>{v(t)},Y=t=>{w&&w(t)},Z=t=>{j&&j(t)},k=`intersection-${CSS.escape(u)}`,ee=t=>{I&&_&&!g&&I(t)},O=()=>{y&&i&&y(i)};ae.useIntersection(R,ee,{selectorToWatch:`#${k}`,skipWhen:!C});const oe=`${u}-hint`,re=`${u}-error`;return o.jsx(de.Field,{hint:P,error:f,id:u,required:F,children:o.jsxs(b.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[o.jsx(ue.FieldLabel,{action:D,children:z}),o.jsxs(n.Combobox.Root,{autocomplete:s?"list":"both",onOpenChange:K,onTextValueChange:Q,textValue:i,allowCustomValue:!0,disabled:d,required:F,value:W,onValueChange:Z,filterValue:A,onFilterValueChange:X,children:[o.jsxs(me,{$hasError:!!f,children:[o.jsxs(b.Flex,{flex:"1",as:"span",gap:3,children:[T?o.jsx($.Box,{as:"span","aria-hidden":!0,children:T}):null,o.jsx(Ce,{placeholder:M,id:u,"aria-invalid":!!f,"aria-labelledby":`${oe} ${re}`,onChange:Y,ref:V})]}),o.jsxs(b.Flex,{as:"span",gap:3,children:[i&&m?o.jsx(ge,{as:"button",hasRadius:!0,background:"transparent",type:"button",onClick:J,"aria-disabled":d,"aria-label":r,title:r,ref:G,children:o.jsx(S.Cross,{})}):null,o.jsx($e,{children:o.jsx(S.CarretDown,{})})]})]}),o.jsx(n.Combobox.Portal,{children:o.jsx(je,{sideOffset:4,children:o.jsxs(ye,{ref:R,children:[e,s?o.jsx(n.Combobox.CreateItem,{onPointerUp:O,onClick:O,asChild:!0,children:o.jsx(x,{children:o.jsx(h.Typography,{children:a(i??"")})})}):null,!s&&!g?o.jsx(n.Combobox.NoValueFound,{asChild:!0,children:o.jsx(x,{$hasHover:!1,children:o.jsx(h.Typography,{children:L(i??"")})})}):null,g?o.jsx(b.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2,children:o.jsx(ce.Loader,{small:!0,children:H})}):null,o.jsx($.Box,{id:k,width:"100%",height:"1px"})]})})})]}),o.jsx(he.FieldHint,{}),o.jsx(be.FieldError,{})]})})},fe=e=>o.jsx(B,{...e,creatable:!0}),ge=l.default($.Box)`
   border: none;
 
   svg {
@@ -9,7 +9,7 @@
   svg path {
     fill: ${({theme:e})=>e.colors.neutral600};
   }
-`,ge=l.default(n.Combobox.Trigger)`
+`,me=l.default(n.Combobox.Trigger)`
   position: relative;
   border: 1px solid ${({theme:e,$hasError:r})=>r?e.colors.danger600:e.colors.neutral200};
   padding-right: ${({theme:e})=>e.spaces[3]};
@@ -34,7 +34,7 @@
   }
 
   ${({theme:e,$hasError:r})=>ie.inputFocusStyle()({theme:e,hasError:r})};
-`,me=l.default(n.Combobox.TextInput)`
+`,Ce=l.default(n.Combobox.TextInput)`
   width: 100%;
   font-size: ${14/16}rem;
   color: ${({theme:e})=>e.colors.neutral800};
@@ -49,7 +49,7 @@
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`,Ce=l.default(n.Combobox.Icon)`
+`,$e=l.default(n.Combobox.Icon)`
   & > svg {
     width: ${6/16}rem;
 
@@ -61,7 +61,7 @@
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`,$e=l.default(n.Combobox.Content)`
+`,je=l.default(n.Combobox.Content)`
   background: ${({theme:e})=>e.colors.neutral0};
   box-shadow: ${({theme:e})=>e.shadows.filterShadow};
   border: 1px solid ${({theme:e})=>e.colors.neutral150};
@@ -70,9 +70,9 @@
   /* This is from the design-system figma file. */
   max-height: 15rem;
   z-index: ${({theme:e})=>e.zIndices[1]};
-`,je=l.default(n.Combobox.Viewport)`
+`,ye=l.default(n.Combobox.Viewport)`
   padding: ${({theme:e})=>e.spaces[1]};
-`,ye=c.forwardRef(({children:e,value:r,disabled:s,textValue:i,...d},u)=>o.jsx(n.Combobox.ComboboxItem,{asChild:!0,value:r,disabled:s,textValue:i,children:o.jsx(x,{ref:u,...d,children:o.jsx(n.Combobox.ItemText,{asChild:!0,children:o.jsx(b.Typography,{children:e})})})})),x=l.default.div`
+`,we=c.forwardRef(({children:e,value:r,disabled:s,textValue:a,...p},d)=>o.jsx(n.Combobox.ComboboxItem,{asChild:!0,value:r,disabled:s,textValue:a,children:o.jsx(x,{ref:d,...p,children:o.jsx(n.Combobox.ItemText,{asChild:!0,children:o.jsx(h.Typography,{children:e})})})})),x=l.default.div`
   width: 100%;
   border: none;
   text-align: left;
@@ -85,7 +85,7 @@
   &[data-selected] {
     background-color: ${({theme:e})=>e.colors.primary100};
 
-    ${b.Typography} {
+    ${h.Typography} {
       color: ${({theme:e})=>e.colors.primary600};
       font-weight: bold;
     }
@@ -98,9 +98,9 @@
   }
 
   &[data-highlighted] {
-    ${b.Typography} {
+    ${h.Typography} {
       color: ${({theme:e})=>e.colors.primary600};
       font-weight: bold;
     }
   }
-`;exports.Combobox=O;exports.CreatableCombobox=pe;exports.Option=ye;exports.OptionBox=x;
+`;exports.Combobox=B;exports.CreatableCombobox=fe;exports.Option=we;exports.OptionBox=x;

package/dist/Combobox/Combobox.js

@@ -1,52 +1,52 @@
-import { jsx as r, jsxs as h } from "react/jsx-runtime";
-import * as a from "react";
-import { Cross as re, CarretDown as oe } from "@strapi/icons";
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import * as s from "react";
+import { Cross as oe, CarretDown as te } from "@strapi/icons";
 import { Combobox as t } from "@strapi/ui-primitives";
 import l from "styled-components";
-import { useControllableState as te } from "../hooks/useControllableState.js";
-import { useId as ne } from "../hooks/useId.js";
-import { useIntersection as le } from "../hooks/useIntersection.js";
-import { inputFocusStyle as ie } from "../themes/utils.js";
-import { Loader as ae } from "../Loader/Loader.js";
-import { Box as B } from "../Box/Box.js";
-import { Typography as p } from "../Typography/Typography.js";
-import { Field as se } from "../Field/Field.js";
-import { Flex as $ } from "../Flex/Flex.js";
-import { FieldLabel as de } from "../Field/FieldLabel.js";
-import { FieldHint as ce } from "../Field/FieldHint.js";
-import { FieldError as ue } from "../Field/FieldError.js";
-const he = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMessage: f = (b) => `Create "${b}"`, disabled: d = !1, error: c, hasMoreItems: O = !1, hint: j, id: E, label: z, labelAction: P, loading: m = !1, loadingMessage: q = "Loading content...", noOptionsMessage: D = () => "No results found", onChange: C, onClear: g, onCreateOption: w, onInputChange: I, onLoadMore: v, placeholder: H = "Select or enter a value", required: V = !1, defaultTextValue: N, textValue: W, value: L }) => {
-  const [b, U] = a.useState(!1), [i, y] = te({
-    prop: W,
-    defaultProp: N
-  }), [A, R] = a.useState(""), k = a.useRef(null), T = a.useRef(null), G = a.useRef(null), u = ne(E), J = (o) => {
-    g && !d && (y(""), R(""), g(o), T.current.focus());
-  }, K = (o) => {
-    U(o);
+import { useControllableState as ne } from "../hooks/useControllableState.js";
+import { useId as le } from "../hooks/useId.js";
+import { useIntersection as ie } from "../hooks/useIntersection.js";
+import { inputFocusStyle as ae } from "../themes/utils.js";
+import { Loader as se } from "../Loader/Loader.js";
+import { Box as C } from "../Box/Box.js";
+import { Typography as h } from "../Typography/Typography.js";
+import { Field as de } from "../Field/Field.js";
+import { Flex as p } from "../Flex/Flex.js";
+import { FieldLabel as ce } from "../Field/FieldLabel.js";
+import { FieldHint as ue } from "../Field/FieldHint.js";
+import { FieldError as he } from "../Field/FieldError.js";
+const pe = ({ children: e, clearLabel: n = "clear", creatable: d = !1, createMessage: f = (x) => `Create "${x}"`, defaultTextValue: m, disabled: c = !1, error: g, hasMoreItems: E = !1, hint: z, id: P, label: q, labelAction: D, loading: b = !1, loadingMessage: H = "Loading content...", noOptionsMessage: N = () => "No results found", onChange: I, onClear: $, onCreateOption: v, onInputChange: V, onLoadMore: y, placeholder: W = "Select or enter a value", required: R = !1, startIcon: k, textValue: L, value: U }) => {
+  const [x, A] = s.useState(!1), [i, T] = ne({
+    prop: L,
+    defaultProp: m
+  }), [G, F] = s.useState(""), S = s.useRef(null), B = s.useRef(null), J = s.useRef(null), u = le(P), K = (o) => {
+    $ && !c && (T(""), F(""), $(o), B.current.focus());
   }, Q = (o) => {
-    y(o);
+    A(o);
   }, X = (o) => {
-    R(o);
+    T(o);
   }, Y = (o) => {
-    I && I(o);
+    F(o);
   }, Z = (o) => {
-    C && C(o);
-  }, F = `intersection-${CSS.escape(u)}`, _ = (o) => {
-    v && O && !m && v(o);
-  }, S = () => {
-    w && i && w(i);
+    V && V(o);
+  }, _ = (o) => {
+    I && I(o);
+  }, O = `intersection-${CSS.escape(u)}`, M = (o) => {
+    y && E && !b && y(o);
+  }, j = () => {
+    v && i && v(i);
   };
-  le(k, _, {
-    selectorToWatch: `#${F}`,
+  ie(S, M, {
+    selectorToWatch: `#${O}`,
     /**
      * We need to know when the select is open because only then will viewportRef
      * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
      */
-    skipWhen: !b
+    skipWhen: !x
   });
-  const M = `${u}-hint`, ee = `${u}-error`;
-  return r(se, { hint: j, error: c, id: u, required: V, children: h($, { direction: "column", alignItems: "stretch", gap: 1, children: [r(de, { action: P, children: z }), h(t.Root, { autocomplete: s ? "list" : "both", onOpenChange: K, onTextValueChange: Q, textValue: i, allowCustomValue: !0, disabled: d, required: V, value: L, onValueChange: Z, filterValue: A, onFilterValueChange: X, children: [h(fe, { $hasError: !!c, children: [r(me, { placeholder: H, id: u, "aria-invalid": !!c, "aria-labelledby": `${M} ${ee}`, onChange: Y, ref: T }), h($, { as: "span", gap: 3, children: [i && g ? r(pe, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: J, "aria-disabled": d, "aria-label": n, title: n, ref: G, children: r(re, {}) }) : null, r(ge, { children: r(oe, {}) })] })] }), r(t.Portal, { children: r(be, { sideOffset: 4, children: h($e, { ref: k, children: [e, s ? r(t.CreateItem, { onPointerUp: S, onClick: S, asChild: !0, children: r(x, { children: r(p, { children: f(i ?? "") }) }) }) : null, !s && !m ? r(t.NoValueFound, { asChild: !0, children: r(x, { $hasHover: !1, children: r(p, { children: D(i ?? "") }) }) }) : null, m ? r($, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: r(ae, { small: !0, children: q }) }) : null, r(B, { id: F, width: "100%", height: "1px" })] }) }) })] }), r(ce, {}), r(ue, {})] }) });
-}, ze = (e) => r(he, { ...e, creatable: !0 }), pe = l(B)`
+  const ee = `${u}-hint`, re = `${u}-error`;
+  return r(de, { hint: z, error: g, id: u, required: R, children: a(p, { direction: "column", alignItems: "stretch", gap: 1, children: [r(ce, { action: D, children: q }), a(t.Root, { autocomplete: d ? "list" : "both", onOpenChange: Q, onTextValueChange: X, textValue: i, allowCustomValue: !0, disabled: c, required: R, value: U, onValueChange: _, filterValue: G, onFilterValueChange: Y, children: [a(me, { $hasError: !!g, children: [a(p, { flex: "1", as: "span", gap: 3, children: [k ? r(C, { as: "span", "aria-hidden": !0, children: k }) : null, r(ge, { placeholder: W, id: u, "aria-invalid": !!g, "aria-labelledby": `${ee} ${re}`, onChange: Z, ref: B })] }), a(p, { as: "span", gap: 3, children: [i && $ ? r(fe, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: K, "aria-disabled": c, "aria-label": n, title: n, ref: J, children: r(oe, {}) }) : null, r(be, { children: r(te, {}) })] })] }), r(t.Portal, { children: r($e, { sideOffset: 4, children: a(xe, { ref: S, children: [e, d ? r(t.CreateItem, { onPointerUp: j, onClick: j, asChild: !0, children: r(w, { children: r(h, { children: f(i ?? "") }) }) }) : null, !d && !b ? r(t.NoValueFound, { asChild: !0, children: r(w, { $hasHover: !1, children: r(h, { children: N(i ?? "") }) }) }) : null, b ? r(p, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: r(se, { small: !0, children: H }) }) : null, r(C, { id: O, width: "100%", height: "1px" })] }) }) })] }), r(ue, {}), r(he, {})] }) });
+}, Pe = (e) => r(pe, { ...e, creatable: !0 }), fe = l(C)`
   border: none;
 
   svg {
@@ -57,7 +57,7 @@ const he = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
   svg path {
     fill: ${({ theme: e }) => e.colors.neutral600};
   }
-`, fe = l(t.Trigger)`
+`, me = l(t.Trigger)`
   position: relative;
   border: 1px solid ${({ theme: e, $hasError: n }) => n ? e.colors.danger600 : e.colors.neutral200};
   padding-right: ${({ theme: e }) => e.spaces[3]};
@@ -81,8 +81,8 @@ const he = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
     outline: none;
   }
 
-  ${({ theme: e, $hasError: n }) => ie()({ theme: e, hasError: n })};
-`, me = l(t.TextInput)`
+  ${({ theme: e, $hasError: n }) => ae()({ theme: e, hasError: n })};
+`, ge = l(t.TextInput)`
   width: 100%;
   font-size: ${14 / 16}rem;
   color: ${({ theme: e }) => e.colors.neutral800};
@@ -97,7 +97,7 @@ const he = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`, ge = l(t.Icon)`
+`, be = l(t.Icon)`
   & > svg {
     width: ${6 / 16}rem;
 
@@ -109,7 +109,7 @@ const he = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`, be = l(t.Content)`
+`, $e = l(t.Content)`
   background: ${({ theme: e }) => e.colors.neutral0};
   box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
   border: 1px solid ${({ theme: e }) => e.colors.neutral150};
@@ -118,9 +118,9 @@ const he = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
   /* This is from the design-system figma file. */
   max-height: 15rem;
   z-index: ${({ theme: e }) => e.zIndices[1]};
-`, $e = l(t.Viewport)`
+`, xe = l(t.Viewport)`
   padding: ${({ theme: e }) => e.spaces[1]};
-`, Pe = a.forwardRef(({ children: e, value: n, disabled: s, textValue: f, ...d }, c) => r(t.ComboboxItem, { asChild: !0, value: n, disabled: s, textValue: f, children: r(x, { ref: c, ...d, children: r(t.ItemText, { asChild: !0, children: r(p, { children: e }) }) }) })), x = l.div`
+`, qe = s.forwardRef(({ children: e, value: n, disabled: d, textValue: f, ...m }, c) => r(t.ComboboxItem, { asChild: !0, value: n, disabled: d, textValue: f, children: r(w, { ref: c, ...m, children: r(t.ItemText, { asChild: !0, children: r(h, { children: e }) }) }) })), w = l.div`
   width: 100%;
   border: none;
   text-align: left;
@@ -133,7 +133,7 @@ const he = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
   &[data-selected] {
     background-color: ${({ theme: e }) => e.colors.primary100};
 
-    ${p} {
+    ${h} {
       color: ${({ theme: e }) => e.colors.primary600};
       font-weight: bold;
     }
@@ -146,15 +146,15 @@ const he = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
   }
 
   &[data-highlighted] {
-    ${p} {
+    ${h} {
       color: ${({ theme: e }) => e.colors.primary600};
       font-weight: bold;
     }
   }
 `;
 export {
-  he as Combobox,
-  ze as CreatableCombobox,
-  Pe as Option,
-  x as OptionBox
+  pe as Combobox,
+  Pe as CreatableCombobox,
+  qe as Option,
+  w as OptionBox
 };

package/dist/Select/SelectParts.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),R=require("react"),d=require("@strapi/icons"),o=require("@strapi/ui-primitives"),p=require("styled-components"),j=require("../hooks/useComposeRefs.cjs"),u=require("../themes/utils.cjs"),c=require("../Flex/Flex.cjs"),f=require("../Box/Box.cjs"),g=require("../Typography/Typography.cjs"),I=e=>e&&e.__esModule?e:{default:e};function T(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 a=T(R),l=I(p),v=a.forwardRef(({onClear:e,clearLabel:t="Clear",startIcon:s,disabled:n,hasError:h,size:m="M",children:x,...b},$)=>{const i=a.useRef(null),S=y=>{e&&!n&&(e(y),i.current.focus())},w=j.useComposedRefs(i,$);return r.jsx(o.Select.Trigger,{asChild:!0,children:r.jsxs(q,{"aria-disabled":n,$hasError:h,$size:m,ref:w,alignItems:"center",justifyContent:"space-between",position:"relative",overflow:"hidden",hasRadius:!0,background:n?"neutral150":"neutral0",paddingLeft:3,paddingRight:3,gap:4,cursor:"default",...b,children:[r.jsxs(c.Flex,{as:"span",gap:4,children:[s&&r.jsx(f.Box,{as:"span","aria-hidden":!0,children:s}),x]}),r.jsxs(c.Flex,{as:"span",gap:3,children:[e?r.jsx(C,{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(d.Cross,{})}):null,r.jsx(k,{children:r.jsx(d.CarretDown,{})})]})]})})}),C=l.default(f.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),R=require("react"),d=require("@strapi/icons"),o=require("@strapi/ui-primitives"),p=require("styled-components"),j=require("../hooks/useComposeRefs.cjs"),u=require("../themes/utils.cjs"),c=require("../Flex/Flex.cjs"),f=require("../Box/Box.cjs"),g=require("../Typography/Typography.cjs"),I=e=>e&&e.__esModule?e:{default:e};function T(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 a=T(R),l=I(p),v=a.forwardRef(({onClear:e,clearLabel:t="Clear",startIcon:s,disabled:n,hasError:h,size:m="M",children:x,...b},$)=>{const i=a.useRef(null),S=y=>{e&&!n&&(e(y),i.current.focus())},w=j.useComposedRefs(i,$);return r.jsx(o.Select.Trigger,{asChild:!0,children:r.jsxs(q,{"aria-disabled":n,$hasError:h,$size:m,ref:w,alignItems:"center",justifyContent:"space-between",position:"relative",overflow:"hidden",hasRadius:!0,background:n?"neutral150":"neutral0",paddingLeft:3,paddingRight:3,gap:4,cursor:"default",width:"100%",...b,children:[r.jsxs(c.Flex,{flex:"1",as:"span",gap:3,children:[s&&r.jsx(f.Box,{as:"span","aria-hidden":!0,children:s}),x]}),r.jsxs(c.Flex,{as:"span",gap:3,children:[e?r.jsx(C,{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(d.Cross,{})}):null,r.jsx(k,{children:r.jsx(d.CarretDown,{})})]})]})})}),C=l.default(f.Box)`
   border: none;
 
   svg {
@@ -31,11 +31,13 @@
       fill: ${({theme:e})=>e.colors.neutral600};
     }
   }
-`,_=a.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=l.default(o.Select.Value)`
+`,V=a.forwardRef(({children:e,placeholder:t,...s},n)=>r.jsx(_,{ref:n,ellipsis:!0,...s,children:r.jsx(P,{placeholder:t,children:e})})),_=l.default(g.Typography)`
+  flex: 1;
+`,P=l.default(o.Select.Value)`
   display: flex;
   gap: ${({theme:e})=>e.spaces[1]};
   flex-wrap: wrap;
-`,P=l.default(o.Select.Content)`
+`,z=l.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};
@@ -44,9 +46,9 @@
   /* This is from the design-system figma file. */
   max-height: 15rem;
   z-index: ${({theme:e})=>e.zIndices[1]};
-`,z=l.default(o.Select.Viewport)`
+`,F=l.default(o.Select.Viewport)`
   padding: ${({theme:e})=>e.spaces[1]};
-`,F=a.forwardRef((e,t)=>r.jsx(M,{ref:t,...e})),O=p.css`
+`,O=a.forwardRef((e,t)=>r.jsx(B,{ref:t,...e})),M=p.css`
   width: 100%;
   border: none;
   text-align: left;
@@ -65,8 +67,8 @@
     outline: none;
     background-color: ${({theme:e})=>e.colors.primary100};
   }
-`,M=l.default(o.Select.Item)`
-  ${O}
+`,B=l.default(o.Select.Item)`
+  ${M}
 
   &:hover {
     background-color: ${({theme:e})=>e.colors.primary100};
@@ -78,4 +80,4 @@
       color: ${({theme:e})=>e.colors.primary600};
     }
   }
-`,B=o.Select.Root,D=v,G=_,E=o.Select.Portal,N=P,A=z,H=F,J=o.Select.ItemIndicator,K=o.Select.ItemText,L=o.Select.Group;exports.Content=N;exports.Group=L;exports.Item=H;exports.ItemIndicator=J;exports.ItemText=K;exports.Portal=E;exports.Root=B;exports.Trigger=D;exports.Value=G;exports.Viewport=A;
+`,D=o.Select.Root,G=v,E=V,N=o.Select.Portal,A=z,H=F,J=O,K=o.Select.ItemIndicator,L=o.Select.ItemText,Q=o.Select.Group;exports.Content=A;exports.Group=Q;exports.Item=J;exports.ItemIndicator=K;exports.ItemText=L;exports.Portal=N;exports.Root=D;exports.Trigger=G;exports.Value=E;exports.Viewport=H;

package/dist/Select/SelectParts.js

@@ -4,16 +4,16 @@ import { Cross as y, CarretDown as R } from "@strapi/icons";
 import { Select as o } from "@strapi/ui-primitives";
 import s, { css as I } from "styled-components";
 import { useComposedRefs as S } from "../hooks/useComposeRefs.js";
-import { getThemeSize as C, inputFocusStyle as k } from "../themes/utils.js";
+import { getThemeSize as C, inputFocusStyle as T } from "../themes/utils.js";
 import { Flex as c } from "../Flex/Flex.js";
 import { Box as p } from "../Box/Box.js";
 import { Typography as u } from "../Typography/Typography.js";
-const v = a.forwardRef(({ onClear: e, clearLabel: r = "Clear", startIcon: i, disabled: n, hasError: m, size: h = "M", children: f, ...g }, $) => {
+const k = a.forwardRef(({ onClear: e, clearLabel: r = "Clear", startIcon: i, disabled: n, hasError: m, size: h = "M", children: f, ...g }, $) => {
   const d = a.useRef(null), w = (x) => {
     e && !n && (e(x), d.current.focus());
   }, b = S(d, $);
-  return t(o.Trigger, { asChild: !0, children: l(V, { "aria-disabled": n, $hasError: m, $size: h, ref: b, alignItems: "center", justifyContent: "space-between", position: "relative", overflow: "hidden", hasRadius: !0, background: n ? "neutral150" : "neutral0", paddingLeft: 3, paddingRight: 3, gap: 4, cursor: "default", ...g, children: [l(c, { as: "span", gap: 4, children: [i && t(p, { as: "span", "aria-hidden": !0, children: i }), 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": n, "aria-label": r, title: r, cursor: "pointer", children: t(y, {}) }) : null, t(z, { children: t(R, {}) })] })] }) });
-}), T = s(p)`
+  return t(o.Trigger, { asChild: !0, children: l(V, { "aria-disabled": n, $hasError: m, $size: h, ref: b, alignItems: "center", justifyContent: "space-between", position: "relative", overflow: "hidden", hasRadius: !0, background: n ? "neutral150" : "neutral0", paddingLeft: 3, paddingRight: 3, gap: 4, cursor: "default", width: "100%", ...g, children: [l(c, { flex: "1", as: "span", gap: 3, children: [i && t(p, { as: "span", "aria-hidden": !0, children: i }), f] }), l(c, { as: "span", gap: 3, children: [e ? t(v, { as: "button", hasRadius: !0, background: "transparent", role: "button", tabIndex: 0, onClick: w, "aria-disabled": n, "aria-label": r, title: r, cursor: "pointer", children: t(y, {}) }) : null, t(z, { children: t(R, {}) })] })] }) });
+}), v = s(p)`
   border: none;
 
   svg {
@@ -37,7 +37,7 @@ const v = a.forwardRef(({ onClear: e, clearLabel: r = "Clear", startIcon: i, dis
     outline: none;
   }
 
-  ${({ theme: e, $hasError: r }) => k()({ theme: e, hasError: r })};
+  ${({ theme: e, $hasError: r }) => T()({ theme: e, hasError: r })};
 `, z = s(o.Icon)`
   & > svg {
     width: ${6 / 16}rem;
@@ -46,11 +46,13 @@ const v = a.forwardRef(({ onClear: e, clearLabel: r = "Clear", startIcon: i, dis
       fill: ${({ theme: e }) => e.colors.neutral600};
     }
   }
-`, j = a.forwardRef(({ children: e, placeholder: r, ...i }, n) => t(u, { ref: n, ellipsis: !0, ...i, children: t(F, { placeholder: r, children: e }) })), F = s(o.Value)`
+`, j = a.forwardRef(({ children: e, placeholder: r, ...i }, n) => t(F, { ref: n, ellipsis: !0, ...i, children: t(B, { placeholder: r, children: e }) })), F = s(u)`
+  flex: 1;
+`, B = s(o.Value)`
   display: flex;
   gap: ${({ theme: e }) => e.spaces[1]};
   flex-wrap: wrap;
-`, B = s(o.Content)`
+`, D = s(o.Content)`
   background: ${({ theme: e }) => e.colors.neutral0};
   box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
   border: 1px solid ${({ theme: e }) => e.colors.neutral150};
@@ -59,9 +61,9 @@ const v = a.forwardRef(({ onClear: e, clearLabel: r = "Clear", startIcon: i, dis
   /* This is from the design-system figma file. */
   max-height: 15rem;
   z-index: ${({ theme: e }) => e.zIndices[1]};
-`, D = s(o.Viewport)`
+`, E = s(o.Viewport)`
   padding: ${({ theme: e }) => e.spaces[1]};
-`, E = a.forwardRef((e, r) => t(P, { ref: r, ...e })), G = I`
+`, G = a.forwardRef((e, r) => t(q, { ref: r, ...e })), P = I`
   width: 100%;
   border: none;
   text-align: left;
@@ -80,8 +82,8 @@ const v = a.forwardRef(({ onClear: e, clearLabel: r = "Clear", startIcon: i, dis
     outline: none;
     background-color: ${({ theme: e }) => e.colors.primary100};
   }
-`, P = s(o.Item)`
-  ${G}
+`, q = s(o.Item)`
+  ${P}
 
   &:hover {
     background-color: ${({ theme: e }) => e.colors.primary100};
@@ -93,16 +95,16 @@ const v = a.forwardRef(({ onClear: e, clearLabel: r = "Clear", startIcon: i, dis
       color: ${({ theme: e }) => e.colors.primary600};
     }
   }
-`, Q = o.Root, U = v, W = j, X = o.Portal, Y = B, Z = D, _ = E, ee = o.ItemIndicator, re = o.ItemText, oe = o.Group;
+`, U = o.Root, W = k, X = j, Y = o.Portal, Z = D, _ = E, ee = G, re = o.ItemIndicator, oe = o.ItemText, te = o.Group;
 export {
-  Y as Content,
-  oe as Group,
-  _ as Item,
-  ee as ItemIndicator,
-  re as ItemText,
-  X as Portal,
-  Q as Root,
-  U as Trigger,
-  W as Value,
-  Z as Viewport
+  Z as Content,
+  te as Group,
+  ee as Item,
+  re as ItemIndicator,
+  oe as ItemText,
+  Y as Portal,
+  U as Root,
+  W as Trigger,
+  X as Value,
+  _ as Viewport
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -24,14 +24,14 @@
     "@radix-ui/react-dismissable-layer": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-use-callback-ref": "^1.0.0",
-    "@strapi/ui-primitives": "^1.7.2",
+    "@strapi/ui-primitives": "^1.7.3",
     "@uiw/react-codemirror": "^4.19.16",
     "compute-scroll-into-view": "^3.0.3",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
     "@playwright/test": "1.33.0",
-    "@strapi/icons": "^1.7.2",
+    "@strapi/icons": "^1.7.3",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.2.3",
@@ -62,5 +62,5 @@
     "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
     "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
   },
-  "gitHead": "dce8b3260830bceaa7e98b25c1b77a37b36b50d8"
+  "gitHead": "5c0de191ef278ea93a0cddadbd9b5ffbda83054f"
 }