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

package/dist/CarouselInput/CarouselInput.js

@@ -1,26 +1,24 @@
-import r from "react";
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import "react";
 import e from "prop-types";
 import { Carousel as R } from "./Carousel.js";
-import { Field as E } from "../Field/Field.js";
-import { FieldLabel as y } from "../Field/FieldLabel.js";
-import "../Field/FieldInput.js";
-import { FieldHint as F } from "../Field/FieldHint.js";
-import { FieldError as L } from "../Field/FieldError.js";
-import "../Field/FieldContext.js";
-import "../Field/FieldAction.js";
-import { Flex as h } from "../Flex/Flex.js";
 import { useId as x } from "../hooks/useId.js";
-const t = ({
-  actions: n,
-  children: d,
-  error: l,
-  hint: s,
+import { Field as y } from "../Field/Field.js";
+import { FieldLabel as F } from "../Field/FieldLabel.js";
+import { FieldHint as L } from "../Field/FieldHint.js";
+import { FieldError as I } from "../Field/FieldError.js";
+import { Flex as P } from "../Flex/Flex.js";
+const n = ({
+  actions: d,
+  children: t,
+  error: s,
+  hint: l,
   label: i,
   labelAction: m,
-  nextLabel: a,
+  nextLabel: p,
   onNext: u,
-  onPrevious: c,
-  previousLabel: p,
+  onPrevious: a,
+  previousLabel: c,
   required: f,
   secondaryLabel: g,
   selectedSlide: q,
@@ -28,24 +26,29 @@ const t = ({
   ...v
 }) => {
   const o = x(b);
-  return /* @__PURE__ */ r.createElement(E, { hint: s, error: l, id: o, required: f }, /* @__PURE__ */ r.createElement(h, { direction: "column", alignItems: "stretch", gap: 1 }, i && /* @__PURE__ */ r.createElement(y, { action: m }, i), /* @__PURE__ */ r.createElement(
-    R,
-    {
-      actions: n,
-      label: i,
-      nextLabel: a,
-      onNext: u,
-      onPrevious: c,
-      previousLabel: p,
-      secondaryLabel: g,
-      selectedSlide: q,
-      id: o,
-      ...v
-    },
-    d
-  ), /* @__PURE__ */ r.createElement(F, null), /* @__PURE__ */ r.createElement(L, null)));
+  return /* @__PURE__ */ r(y, { hint: l, error: s, id: o, required: f, children: /* @__PURE__ */ h(P, { direction: "column", alignItems: "stretch", gap: 1, children: [
+    i && /* @__PURE__ */ r(F, { action: m, children: i }),
+    /* @__PURE__ */ r(
+      R,
+      {
+        actions: d,
+        label: i,
+        nextLabel: p,
+        onNext: u,
+        onPrevious: a,
+        previousLabel: c,
+        secondaryLabel: g,
+        selectedSlide: q,
+        id: o,
+        ...v,
+        children: t
+      }
+    ),
+    /* @__PURE__ */ r(L, {}),
+    /* @__PURE__ */ r(I, {})
+  ] }) });
 };
-t.defaultProps = {
+n.defaultProps = {
   actions: void 0,
   error: void 0,
   hint: void 0,
@@ -54,7 +57,7 @@ t.defaultProps = {
   required: !1,
   secondaryLabel: void 0
 };
-t.propTypes = {
+n.propTypes = {
   actions: e.node,
   children: e.node.isRequired,
   error: e.string,
@@ -71,5 +74,5 @@ t.propTypes = {
   selectedSlide: e.number.isRequired
 };
 export {
-  t as CarouselInput
+  n as CarouselInput
 };

package/dist/CarouselInput/CarouselSlide.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),u=require("prop-types"),i=require("styled-components"),n=require("../Flex/Flex.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=l(d),t=l(u),p=l(i),f=p.default(n.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime");require("react");const d=require("prop-types"),a=require("styled-components"),n=require("../Flex/Flex.cjs"),r=e=>e&&e.__esModule?e:{default:e},l=r(d),c=r(a),p=c.default(n.Flex)`
   display: ${({selected:e})=>e?"flex":"none"};
-`,o=({label:e,children:r,selected:s,...a})=>c.default.createElement(f,{selected:s,role:"group","aria-roledescription":"slide","aria-label":e,justifyContent:"center",height:"124px",...a},r);o.defaultProps={selected:!1};o.propTypes={children:t.default.node.isRequired,label:t.default.string.isRequired,selected:t.default.bool};exports.CarouselSlide=o;
+`,t=({label:e,children:s,selected:o,...i})=>u.jsx(p,{selected:o,role:"group","aria-roledescription":"slide","aria-label":e,justifyContent:"center",height:"124px",...i,children:s});t.defaultProps={selected:!1};t.propTypes={children:l.default.node.isRequired,label:l.default.string.isRequired,selected:l.default.bool};exports.CarouselSlide=t;

package/dist/CarouselInput/CarouselSlide.js

@@ -1,21 +1,22 @@
-import s from "react";
+import { jsx as t } from "react/jsx-runtime";
+import "react";
 import r from "prop-types";
 import p from "styled-components";
-import { Flex as a } from "../Flex/Flex.js";
-const d = p(a)`
+import { Flex as d } from "../Flex/Flex.js";
+const a = p(d)`
   display: ${({ selected: e }) => e ? "flex" : "none"};
-`, o = ({ label: e, children: l, selected: t, ...i }) => /* @__PURE__ */ s.createElement(
-  d,
+`, o = ({ label: e, children: i, selected: l, ...s }) => /* @__PURE__ */ t(
+  a,
   {
-    selected: t,
+    selected: l,
     role: "group",
     "aria-roledescription": "slide",
     "aria-label": e,
     justifyContent: "center",
     height: "124px",
-    ...i
-  },
-  l
+    ...s,
+    children: i
+  }
 );
 o.defaultProps = {
   selected: !1

package/dist/CarouselInput/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Carousel.cjs"),s=require("./CarouselInput.cjs"),r=require("./CarouselActions.cjs"),u=require("./CarouselImage.cjs"),o=require("./CarouselSlide.cjs");exports.Carousel=e.Carousel;exports.CarouselInput=s.CarouselInput;exports.CarouselActions=r.CarouselActions;exports.CarouselImage=u.CarouselImage;exports.CarouselSlide=o.CarouselSlide;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Carousel.cjs"),r=require("./CarouselInput.cjs"),o=require("./CarouselActions.cjs"),u=require("./CarouselImage.cjs"),s=require("./CarouselSlide.cjs");exports.Carousel=e.Carousel;exports.CarouselInput=r.CarouselInput;exports.CarouselActions=o.CarouselActions;exports.CarouselImage=u.CarouselImage;exports.CarouselSlide=s.CarouselSlide;

package/dist/Checkbox/Checkbox.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),p=require("prop-types"),F=require("styled-components"),y=require("../BaseCheckbox/BaseCheckbox.cjs"),x=require("../Box/Box.cjs"),b=require("../Field/Field.cjs");require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const h=require("../Field/FieldHint.cjs"),q=require("../Field/FieldError.cjs"),g=require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const j=require("../Flex/Flex.cjs"),m=require("../hooks/useId.cjs"),C=require("../Typography/Typography.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=i(f),t=i(p),E=i(F),T=E.default(C.Typography)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const f=require("prop-types"),x=require("styled-components"),p=require("../hooks/useId.cjs"),y=require("../Field/FieldContext.cjs"),b=require("../Typography/Typography.cjs"),h=require("../Field/Field.cjs"),q=require("../Flex/Flex.cjs"),g=require("../Box/Box.cjs"),j=require("../Field/FieldHint.cjs"),F=require("../Field/FieldError.cjs"),T=require("../BaseCheckbox/BaseCheckbox.cjs"),u=r=>r&&r.__esModule?r:{default:r},e=u(f),C=u(x),k=C.default(b.Typography)`
   display: flex;
   align-items: flex-start;
   * {
-    cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
+    cursor: ${({disabled:r})=>r?"not-allowed":"pointer"};
   }
-`,k=e=>{const{id:l}=g.useField();return r.default.createElement(y.BaseCheckbox,{id:l,...e})},a=({children:e,disabled:l,id:c,hint:s,error:n,...u})=>{const o=m.useId(c);let d;return n?d=`${o}-error`:s&&(d=`${o}-hint`),r.default.createElement(b.Field,{id:o,hint:s,error:n},r.default.createElement(j.Flex,{direction:"column",alignItems:"stretch",gap:1},r.default.createElement(T,{as:"label",textColor:"neutral800",disabled:l},r.default.createElement(k,{disabled:l,"aria-describedby":d,...u}),r.default.createElement(x.Box,{paddingLeft:2},e)),r.default.createElement(h.FieldHint,null),r.default.createElement(q.FieldError,null)))};a.defaultProps={disabled:!1,id:void 0,error:void 0,hint:void 0};a.propTypes={children:t.default.node.isRequired,disabled:t.default.bool,error:t.default.string,hint:t.default.oneOfType([t.default.string,t.default.node,t.default.arrayOf(t.default.node)]),id:t.default.oneOfType([t.default.string,t.default.number])};exports.Checkbox=a;
+`,_=r=>{const{id:o}=y.useField();return t.jsx(T.BaseCheckbox,{id:o,...r})},d=({children:r,disabled:o,id:a,hint:l,error:n,...c})=>{const i=p.useId(a);let s;return n?s=`${i}-error`:l&&(s=`${i}-hint`),t.jsx(h.Field,{id:i,hint:l,error:n,children:t.jsxs(q.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsxs(k,{as:"label",textColor:"neutral800",disabled:o,children:[t.jsx(_,{disabled:o,"aria-describedby":s,...c}),t.jsx(g.Box,{paddingLeft:2,children:r})]}),t.jsx(j.FieldHint,{}),t.jsx(F.FieldError,{})]})})};d.defaultProps={disabled:!1,id:void 0,error:void 0,hint:void 0};d.propTypes={children:e.default.node.isRequired,disabled:e.default.bool,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.oneOfType([e.default.string,e.default.number])};exports.Checkbox=d;

package/dist/Checkbox/Checkbox.js

@@ -1,45 +1,50 @@
-import r from "react";
-import e from "prop-types";
-import s from "styled-components";
-import { BaseCheckbox as c } from "../BaseCheckbox/BaseCheckbox.js";
-import { Box as f } from "../Box/Box.js";
-import { Field as u } from "../Field/Field.js";
-import "../Field/FieldLabel.js";
-import "../Field/FieldInput.js";
-import { FieldHint as b } from "../Field/FieldHint.js";
-import { FieldError as x } from "../Field/FieldError.js";
-import { useField as y } from "../Field/FieldContext.js";
-import "../Field/FieldAction.js";
-import { Flex as g } from "../Flex/Flex.js";
-import { useId as h } from "../hooks/useId.js";
-import { Typography as E } from "../Typography/Typography.js";
-const T = s(E)`
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import "react";
+import r from "prop-types";
+import f from "styled-components";
+import { useId as c } from "../hooks/useId.js";
+import { useField as h } from "../Field/FieldContext.js";
+import { Typography as x } from "../Typography/Typography.js";
+import { Field as b } from "../Field/Field.js";
+import { Flex as u } from "../Flex/Flex.js";
+import { Box as y } from "../Box/Box.js";
+import { FieldHint as g } from "../Field/FieldHint.js";
+import { FieldError as T } from "../Field/FieldError.js";
+import { BaseCheckbox as k } from "../BaseCheckbox/BaseCheckbox.js";
+const C = f(x)`
   display: flex;
   align-items: flex-start;
   * {
-    cursor: ${({ disabled: t }) => t ? "not-allowed" : "pointer"};
+    cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
   }
-`, k = (t) => {
-  const { id: o } = y();
-  return /* @__PURE__ */ r.createElement(c, { id: o, ...t });
-}, a = ({ children: t, disabled: o, id: d, hint: l, error: m, ...p }) => {
-  const i = h(d);
-  let n;
-  return m ? n = `${i}-error` : l && (n = `${i}-hint`), /* @__PURE__ */ r.createElement(u, { id: i, hint: l, error: m }, /* @__PURE__ */ r.createElement(g, { direction: "column", alignItems: "stretch", gap: 1 }, /* @__PURE__ */ r.createElement(T, { as: "label", textColor: "neutral800", disabled: o }, /* @__PURE__ */ r.createElement(k, { disabled: o, "aria-describedby": n, ...p }), /* @__PURE__ */ r.createElement(f, { paddingLeft: 2 }, t)), /* @__PURE__ */ r.createElement(b, null), /* @__PURE__ */ r.createElement(x, null)));
+`, F = (e) => {
+  const { id: i } = h();
+  return /* @__PURE__ */ o(k, { id: i, ...e });
+}, m = ({ children: e, disabled: i, id: p, hint: n, error: s, ...a }) => {
+  const t = c(p);
+  let d;
+  return s ? d = `${t}-error` : n && (d = `${t}-hint`), /* @__PURE__ */ o(b, { id: t, hint: n, error: s, children: /* @__PURE__ */ l(u, { direction: "column", alignItems: "stretch", gap: 1, children: [
+    /* @__PURE__ */ l(C, { as: "label", textColor: "neutral800", disabled: i, children: [
+      /* @__PURE__ */ o(F, { disabled: i, "aria-describedby": d, ...a }),
+      /* @__PURE__ */ o(y, { paddingLeft: 2, children: e })
+    ] }),
+    /* @__PURE__ */ o(g, {}),
+    /* @__PURE__ */ o(T, {})
+  ] }) });
 };
-a.defaultProps = {
+m.defaultProps = {
   disabled: !1,
   id: void 0,
   error: void 0,
   hint: void 0
 };
-a.propTypes = {
-  children: e.node.isRequired,
-  disabled: e.bool,
-  error: e.string,
-  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
-  id: e.oneOfType([e.string, e.number])
+m.propTypes = {
+  children: r.node.isRequired,
+  disabled: r.bool,
+  error: r.string,
+  hint: r.oneOfType([r.string, r.node, r.arrayOf(r.node)]),
+  id: r.oneOfType([r.string, r.number])
 };
 export {
-  a as Checkbox
+  m as Checkbox
 };

package/dist/Checkbox/index.cjs

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

package/dist/Combobox/Combobox.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),re=require("react"),R=require("@strapi/icons"),n=require("@strapi/ui-primitives"),te=require("styled-components"),V=require("../Box/Box.cjs"),ne=require("../Field/Field.cjs"),se=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const le=require("../Field/FieldHint.cjs"),ie=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const j=require("../Flex/Flex.cjs"),ae=require("../hooks/useControllableState.cjs"),ce=require("../hooks/useId.cjs"),de=require("../hooks/useIntersection.cjs"),ue=require("../Loader/Loader.cjs");require("../themes/lightTheme/index.cjs");require("../themes/darkTheme/index.cjs");require("lodash");const he=require("../themes/utils.cjs"),b=require("../Typography/Typography.cjs"),be=e=>e&&typeof e=="object"&&"default"in e?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:B,id:_,label:L,labelAction:P,loading:p=!1,loadingMessage:E="Loading content...",noOptionsMessage:z=()=>"No results found",onChange:m,onClear:f,onCreateOption:C,onInputChange:$,onLoadMore:y,placeholder:D="Select or enter a value",required:F=!1,defaultTextValue:H,textValue:M,value:N})=>{const[g,W]=c.useState(!1),[a,I]=ae.useControllableState({prop:M,defaultProp:H}),[A,q]=c.useState(""),w=c.useRef(null),T=c.useRef(null),U=c.useRef(null),h=ce.useId(_),G=t=>{f&&!d&&(I(""),q(""),f(t),T.current.focus())},J=t=>{W(t)},K=t=>{I(t)},Q=t=>{q(t)},X=t=>{$&&$(t)},Y=t=>{m&&m(t)},v=`intersection-${h}`,Z=t=>{y&&S&&!p&&y(t)},k=()=>{C&&a&&C(a)};de.useIntersection(w,Z,{selectorToWatch:`#${v}`,skipWhen:!g});const ee=`${h}-hint`,oe=`${h}-error`;return o.jsx(ne.Field,{hint:B,error:u,id:h,required:F,children:o.jsxs(j.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[o.jsx(se.FieldLabel,{action:P,children:L}),o.jsxs(n.Combobox.Root,{autocomplete:s?"list":"both",onOpenChange:J,onTextValueChange:K,textValue:a,allowCustomValue:!0,disabled:d,required:F,value:N,onValueChange:Y,filterValue:A,onFilterValueChange:Q,children:[o.jsxs(ge,{$hasError:Boolean(u),children:[o.jsx(je,{placeholder:D,id:h,"aria-invalid":Boolean(u),"aria-labelledby":`${ee} ${oe}`,onChange:X,ref:T}),o.jsxs(j.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:U,children:o.jsx(R.Cross,{})}):null,o.jsx(me,{children:o.jsx(R.CarretDown,{})})]})]}),o.jsx(n.Combobox.Portal,{children:o.jsx(Ce,{sideOffset:4,children:o.jsxs($e,{ref:w,children:[e,s?o.jsx(n.Combobox.CreateItem,{onPointerUp:k,onClick:k,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:z(a??"")})})}):null,p?o.jsx(j.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2,children:o.jsx(ue.Loader,{small:!0,children:E})}):null,o.jsx(V.Box,{id:v,width:"100%",height:"1px"})]})})})]}),o.jsx(le.FieldHint,{}),o.jsx(ie.FieldError,{})]})})},pe=e=>o.jsx(O,{...e,creatable:!0}),fe=l.default(V.Box)`
+"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)`
   border: none;
 
   svg {
@@ -33,8 +33,8 @@
     outline: none;
   }
 
-  ${({theme:e,$hasError:r})=>he.inputFocusStyle()({theme:e,hasError:r})};
-`,je=l.default(n.Combobox.TextInput)`
+  ${({theme:e,$hasError:r})=>ie.inputFocusStyle()({theme:e,hasError:r})};
+`,me=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;
   }
-`,me=l.default(n.Combobox.Icon)`
+`,Ce=l.default(n.Combobox.Icon)`
   & > svg {
     width: ${6/16}rem;
 
@@ -61,7 +61,7 @@
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`,Ce=l.default(n.Combobox.Content)`
+`,$e=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,7 +70,7 @@
   /* This is from the design-system figma file. */
   max-height: 15rem;
   z-index: ${({theme:e})=>e.zIndices[1]};
-`,$e=l.default(n.Combobox.Viewport)`
+`,je=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`
   width: 100%;