@zeniai/web-components 3.17.1 → 3.17.2

package/dist/LabeledAddressValue-CXjHpLfb.cjs

@@ -0,0 +1,49 @@
+"use strict";const s=require("./vendor-.pnpm-D0ILHvHB.cjs"),l=require("@emotion/styled"),i=require("./index-gTpRqqAW.cjs"),t={width:new i.ResponsiveSized(343,580,726),height:new i.ResponsiveSized(i.sp[6],i.sp[6]),controlHeight:new i.ResponsiveSized(i.sp[6],i.sp[6]),controlMinHeight:new i.ResponsiveSized(i.sp[4],i.sp[4]),paddingTopBottom:new i.ResponsiveSized(i.sp[2],i.sp[2]),marginTop:new i.ResponsiveSized(i.sp[2],i.sp[2]),marginBottom:new i.ResponsiveSized(i.sp[2],i.sp[2]),marginRight:new i.ResponsiveSized(i.sp[2],i.sp[2]),labelMarginLeft:new i.ResponsiveSized(i.sp[3],i.sp[4]),labelMarginRight:new i.ResponsiveSized(i.sp[3],i.sp[4]),labelMarginTop:new i.ResponsiveSized(i.sp[2],i.sp[2])},g={infoLabel:new i.ResponsiveSizedStyle("extraSmallRegular","smallRegular")};function u({isDisabled:e,label:n,additionalInfoLabel:d,addressValue:r,isOptional:a,style:p}){const o=i.useWindowSizeContext();return s.jsxRuntimeExports.jsxs(m,{size:o,style:p,isDisabled:e!=null,children:[s.jsxRuntimeExports.jsxs(x,{children:[s.jsxRuntimeExports.jsx(i.Label,{isOptional:a,isDisabled:e,label:n.label,style:{marginLeft:t.labelMarginLeft.value(o),marginRight:t.labelMarginRight.value(o),marginTop:t.labelMarginTop.value(o),width:n.width??"auto"}}),s.jsxRuntimeExports.jsx(i.AddressValue,{...r,isDisabled:e,style:{minHeight:t.controlMinHeight.value(o),paddingTop:t.paddingTopBottom.valuePx(o),paddingBottom:t.paddingTopBottom.valuePx(o),maxWidth:n.width!=null?`calc(100% - ${n.width}px)`:"auto",display:"flex",flexGrow:1,...r.style}})]}),d?s.jsxRuntimeExports.jsx(h,{size:o,children:d}):null]})}const h=l.label`
+  color: ${e=>e.theme.colors.grey1};
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  width: calc(100% - ${e=>t.marginRight.valuePx(e.size)});
+  padding-right: ${e=>t.marginRight.valuePx(e.size)};
+  padding-top: ${e=>t.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${e=>t.paddingTopBottom.valuePx(e.size)};
+  ${e=>`${g.infoLabel.style(e.size)}`};
+`,x=l.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+`,m=l.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  width: ${e=>t.width.valuePx(e.size)};
+  min-height: ${e=>t.height.valuePx(e.size)};
+  padding-right: ${e=>t.marginRight.valuePx(e.size)};
+  padding-top: ${e=>t.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${e=>t.paddingTopBottom.valuePx(e.size)};
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${e=>e.isDisabled===!0?e.theme.colors.grey3:e.theme.colors.primary};
+    .address-value {
+      background-color: ${e=>e.isDisabled===!0?e.theme.colors.grey5:e.theme.colors.background};
+    }
+  }
+`;exports.LabeledAddressValue=u;

package/dist/LabeledAddressValue-DqyRt_4h.js

@@ -0,0 +1,115 @@
+import { j as n } from "./vendor-.pnpm-B2klaOGU.js";
+import r from "@emotion/styled";
+import { u as m, aB as u, R as o, hf as p, D as i, aw as x } from "./index-BEMjPEfs.js";
+const t = {
+  width: new o(343, 580, 726),
+  height: new o(i[6], i[6]),
+  controlHeight: new o(i[6], i[6]),
+  controlMinHeight: new o(i[4], i[4]),
+  paddingTopBottom: new o(i[2], i[2]),
+  marginTop: new o(i[2], i[2]),
+  marginBottom: new o(i[2], i[2]),
+  marginRight: new o(i[2], i[2]),
+  labelMarginLeft: new o(i[3], i[4]),
+  labelMarginRight: new o(i[3], i[4]),
+  labelMarginTop: new o(i[2], i[2])
+}, c = {
+  infoLabel: new x("extraSmallRegular", "smallRegular")
+};
+function $({
+  isDisabled: e,
+  label: a,
+  additionalInfoLabel: d,
+  addressValue: s,
+  isOptional: g,
+  style: h
+}) {
+  const l = m();
+  return /* @__PURE__ */ n.jsxs(b, { size: l, style: h, isDisabled: e != null, children: [
+    /* @__PURE__ */ n.jsxs(w, { children: [
+      /* @__PURE__ */ n.jsx(
+        u,
+        {
+          isOptional: g,
+          isDisabled: e,
+          label: a.label,
+          style: {
+            marginLeft: t.labelMarginLeft.value(l),
+            marginRight: t.labelMarginRight.value(l),
+            marginTop: t.labelMarginTop.value(l),
+            width: a.width ?? "auto"
+          }
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        p,
+        {
+          ...s,
+          isDisabled: e,
+          style: {
+            minHeight: t.controlMinHeight.value(l),
+            paddingTop: t.paddingTopBottom.valuePx(l),
+            paddingBottom: t.paddingTopBottom.valuePx(l),
+            maxWidth: a.width != null ? `calc(100% - ${a.width}px)` : "auto",
+            display: "flex",
+            flexGrow: 1,
+            ...s.style
+          }
+        }
+      )
+    ] }),
+    d ? /* @__PURE__ */ n.jsx(f, { size: l, children: d }) : null
+  ] });
+}
+const f = r.label`
+  color: ${(e) => e.theme.colors.grey1};
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  width: calc(100% - ${(e) => t.marginRight.valuePx(e.size)});
+  padding-right: ${(e) => t.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => t.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => t.paddingTopBottom.valuePx(e.size)};
+  ${(e) => `${c.infoLabel.style(e.size)}`};
+`, w = r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+`, b = r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => t.width.valuePx(e.size)};
+  min-height: ${(e) => t.height.valuePx(e.size)};
+  padding-right: ${(e) => t.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => t.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => t.paddingTopBottom.valuePx(e.size)};
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${(e) => e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary};
+    .address-value {
+      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.theme.colors.background};
+    }
+  }
+`;
+export {
+  $ as L
+};

package/dist/LabeledAddressValueField-CKmXcOHi.js

@@ -0,0 +1,130 @@
+import { d as b, m as w, j as n } from "./vendor-.pnpm-B2klaOGU.js";
+import d from "@emotion/styled";
+import { u as v, a as y, e as z, aB as $, R as i, hg as L, C as g, D as t, aw as S } from "./index-BEMjPEfs.js";
+const o = {
+  width: new i(343, 580, 726),
+  height: new i(t[6], t[6]),
+  controlHeight: new i(t[6], t[6]),
+  controlMinHeight: new i(t[4], t[4]),
+  paddingTopBottom: new i(t[2], t[2]),
+  marginTop: new i(t[2], t[2]),
+  marginBottom: new i(t[2], t[2]),
+  marginRight: new i(t[2], t[2]),
+  labelMarginLeft: new i(t[3], t[4]),
+  labelMarginRight: new i(t[3], t[4]),
+  labelMarginTop: new i(t[2], t[2])
+}, R = {
+  infoLabel: new S("extraSmallRegular", "smallRegular")
+}, T = y.getLocalizedStrings();
+function W({
+  isDisabled: e,
+  label: s,
+  addressValueField: l,
+  additionalInfoLabel: h,
+  showAdditionalInfoLabel: m = !1,
+  style: c,
+  hasHoverBorder: u,
+  isOptional: p
+}) {
+  const a = v(), {
+    formState: { errors: x }
+  } = b(), r = w(x, l.name), f = r ? h : T.commonSetUp.businessVerification.addressAdditionInfo;
+  return /* @__PURE__ */ n.jsxs(
+    B,
+    {
+      size: a,
+      style: c,
+      isDisabled: e != null,
+      isError: r,
+      hasHoverBorder: u ?? !0,
+      "data-testid": z(
+        "labeled-address-value-field",
+        l.name
+      ),
+      children: [
+        /* @__PURE__ */ n.jsx(
+          $,
+          {
+            isDisabled: e,
+            isOptional: p,
+            label: s.label,
+            htmlFor: l.name,
+            style: {
+              marginLeft: o.labelMarginLeft.value(a),
+              marginRight: o.labelMarginRight.value(a),
+              marginTop: o.labelMarginTop.value(a),
+              width: s.width ?? "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ n.jsxs(M, { labelWidth: s.width, children: [
+          /* @__PURE__ */ n.jsx(
+            L,
+            {
+              ...l,
+              isDisabled: e,
+              style: {
+                minHeight: o.controlMinHeight.value(a),
+                paddingTop: o.paddingTopBottom.valuePx(a),
+                paddingBottom: o.paddingTopBottom.valuePx(a),
+                width: "-webkit-fill-available",
+                display: "flex",
+                flexGrow: 1,
+                ...l.style
+              }
+            }
+          ),
+          (m || r) && /* @__PURE__ */ n.jsx(j, { size: a, isError: r, children: f })
+        ] })
+      ]
+    }
+  );
+}
+const B = d.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => o.width.valuePx(e.size)};
+  min-height: ${(e) => o.height.valuePx(e.size)};
+  padding-right: ${(e) => o.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => o.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => o.paddingTopBottom.valuePx(e.size)};
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  &:hover {
+    z-index: 1;
+    outline: ${(e) => e.hasHoverBorder ? `1px solid ${e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary}` : "none"};
+    .address-value {
+      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.isError ? g.importantLight : e.theme.colors.background};
+    }
+  }
+`, M = d.div`
+  display: flex;
+  flex-direction: column;
+  width: ${(e) => e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "auto"};
+  align-items: flex-end;
+  flex-grow: 1;
+`, j = d.label`
+  display: flex;
+  color: ${(e) => e.isError ? g.important : e.theme.colors.grey1};
+  ${(e) => `${R.infoLabel.style(e.size)}`};
+  padding-right: 12px;
+  text-align: right;
+`;
+export {
+  W as L
+};

package/dist/LabeledAddressValueField-xmLCRnSl.cjs

@@ -0,0 +1,45 @@
+"use strict";const s=require("./vendor-.pnpm-D0ILHvHB.cjs"),a=require("@emotion/styled"),e=require("./index-gTpRqqAW.cjs"),t={width:new e.ResponsiveSized(343,580,726),height:new e.ResponsiveSized(e.sp[6],e.sp[6]),controlHeight:new e.ResponsiveSized(e.sp[6],e.sp[6]),controlMinHeight:new e.ResponsiveSized(e.sp[4],e.sp[4]),paddingTopBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginTop:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginRight:new e.ResponsiveSized(e.sp[2],e.sp[2]),labelMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginRight:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginTop:new e.ResponsiveSized(e.sp[2],e.sp[2])},x={infoLabel:new e.ResponsiveSizedStyle("extraSmallRegular","smallRegular")},b=e.appLocale.getLocalizedStrings();function v({isDisabled:i,label:l,addressValueField:n,additionalInfoLabel:d,showAdditionalInfoLabel:p=!1,style:g,hasHoverBorder:h,isOptional:m}){const o=e.useWindowSizeContext(),{formState:{errors:u}}=s.useFormContext(),r=s.has(u,n.name),c=r?d:b.commonSetUp.businessVerification.addressAdditionInfo;return s.jsxRuntimeExports.jsxs(f,{size:o,style:g,isDisabled:i!=null,isError:r,hasHoverBorder:h??!0,"data-testid":e.generateDataTestId("labeled-address-value-field",n.name),children:[s.jsxRuntimeExports.jsx(e.Label,{isDisabled:i,isOptional:m,label:l.label,htmlFor:n.name,style:{marginLeft:t.labelMarginLeft.value(o),marginRight:t.labelMarginRight.value(o),marginTop:t.labelMarginTop.value(o),width:l.width??"auto"}}),s.jsxRuntimeExports.jsxs(w,{labelWidth:l.width,children:[s.jsxRuntimeExports.jsx(e.AddressValueField,{...n,isDisabled:i,style:{minHeight:t.controlMinHeight.value(o),paddingTop:t.paddingTopBottom.valuePx(o),paddingBottom:t.paddingTopBottom.valuePx(o),width:"-webkit-fill-available",display:"flex",flexGrow:1,...n.style}}),(p||r)&&s.jsxRuntimeExports.jsx(z,{size:o,isError:r,children:c})]})]})}const f=a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${i=>i.theme.colors.grey5};
+  width: ${i=>t.width.valuePx(i.size)};
+  min-height: ${i=>t.height.valuePx(i.size)};
+  padding-right: ${i=>t.marginRight.valuePx(i.size)};
+  padding-top: ${i=>t.paddingTopBottom.valuePx(i.size)};
+  padding-bottom: ${i=>t.paddingTopBottom.valuePx(i.size)};
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${i=>i.theme.colors.primary};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  &:hover {
+    z-index: 1;
+    outline: ${i=>i.hasHoverBorder?`1px solid ${i.isDisabled===!0?i.theme.colors.grey3:i.theme.colors.primary}`:"none"};
+    .address-value {
+      background-color: ${i=>i.isDisabled===!0?i.theme.colors.grey5:i.isError?e.Colors.importantLight:i.theme.colors.background};
+    }
+  }
+`,w=a.div`
+  display: flex;
+  flex-direction: column;
+  width: ${i=>i.labelWidth!=null?`calc(100% - ${i.labelWidth}px)`:"auto"};
+  align-items: flex-end;
+  flex-grow: 1;
+`,z=a.label`
+  display: flex;
+  color: ${i=>i.isError?e.Colors.important:i.theme.colors.grey1};
+  ${i=>`${x.infoLabel.style(i.size)}`};
+  padding-right: 12px;
+  text-align: right;
+`;exports.LabeledAddressValueField=v;

package/dist/LabeledControlledCheckBoxField-C3Pp6Upz.js

@@ -0,0 +1,73 @@
+import { j as i } from "./vendor-.pnpm-B2klaOGU.js";
+import { css as o } from "@emotion/react";
+import d from "@emotion/styled";
+import { u as n, e as r, h9 as m, aB as b, S as t, R as h } from "./index-BEMjPEfs.js";
+const f = {
+  width: new h(343, 580, 726)
+};
+function x({
+  label: e,
+  checkBoxField: s,
+  style: l
+}) {
+  const a = n();
+  return /* @__PURE__ */ i.jsxs(
+    y,
+    {
+      size: a,
+      style: l,
+      isDisabled: s.isDisabled,
+      "data-testid": r(
+        s.name,
+        "labeled-check-box-field"
+      ),
+      isSelected: s.defaultChecked ?? !1,
+      children: [
+        /* @__PURE__ */ i.jsx(
+          m,
+          {
+            ...s,
+            style: { ...s.style }
+          }
+        ),
+        /* @__PURE__ */ i.jsx(
+          b,
+          {
+            isDisabled: s.isDisabled,
+            label: e.label,
+            labelStyle: e.style,
+            htmlFor: s.name,
+            style: {
+              display: "flex",
+              flex: 1,
+              minHeight: t.sp4,
+              marginLeft: t.sp2,
+              width: e.width,
+              backgroundColor: "inherit",
+              ...e.style
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+const y = d.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: ${(e) => f.width.valuePx(e.size)};
+  min-height: ${t.sp4};
+
+  label {
+    color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.hero};
+    ${(e) => e.isDisabled === "disabled" && o`
+        color: ${e.theme.colors.grey2};
+      `};
+    cursor: ${(e) => e.isDisabled === "disabled" ? "not-allowed" : "pointer"};
+    pointer-events: ${(e) => e.isDisabled === "disabled" || e.isDisabled === "readonly" ? "none" : "initial"};
+  }
+`;
+export {
+  x as L
+};

package/dist/LabeledControlledCheckBoxField-Yz64Lm7_.cjs

@@ -0,0 +1,16 @@
+"use strict";const t=require("./vendor-.pnpm-D0ILHvHB.cjs"),d=require("@emotion/react"),o=require("@emotion/styled"),i=require("./index-gTpRqqAW.cjs"),a={width:new i.ResponsiveSized(343,580,726)};function r({label:e,checkBoxField:s,style:l}){const n=i.useWindowSizeContext();return t.jsxRuntimeExports.jsxs(c,{size:n,style:l,isDisabled:s.isDisabled,"data-testid":i.generateDataTestId(s.name,"labeled-check-box-field"),isSelected:s.defaultChecked??!1,children:[t.jsxRuntimeExports.jsx(i.ControlledCheckBoxField,{...s,style:{...s.style}}),t.jsxRuntimeExports.jsx(i.Label,{isDisabled:s.isDisabled,label:e.label,labelStyle:e.style,htmlFor:s.name,style:{display:"flex",flex:1,minHeight:i.Space.sp4,marginLeft:i.Space.sp2,width:e.width,backgroundColor:"inherit",...e.style}})]})}const c=o.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: ${e=>a.width.valuePx(e.size)};
+  min-height: ${i.Space.sp4};
+
+  label {
+    color: ${e=>e.isSelected?e.theme.colors.primary:e.theme.colors.hero};
+    ${e=>e.isDisabled==="disabled"&&d.css`
+        color: ${e.theme.colors.grey2};
+      `};
+    cursor: ${e=>e.isDisabled==="disabled"?"not-allowed":"pointer"};
+    pointer-events: ${e=>e.isDisabled==="disabled"||e.isDisabled==="readonly"?"none":"initial"};
+  }
+`;exports.LabeledControlledCheckBoxField=r;

package/dist/LabeledCreatableSingleSelectField-B3MX0BLY.cjs

@@ -0,0 +1,204 @@
+"use strict";const i=require("./vendor-.pnpm-D0ILHvHB.cjs"),l=require("@emotion/styled"),t=require("./index-gTpRqqAW.cjs"),I=({allValues:e,selectedValue:s,name:n,onSelectedValueChanged:r,isDisabled:a,placeholder:u,isOptionRemovable:g=!0,addIconInCreateLabel:x,getLabelForId:m,tagProperties:d,hasError:w,style:c})=>{const b=i.useTheme(),S=oe(e,m),$=t.appLocale.getLocalizedStrings().dropDowns,j=S.sort((o,p)=>o.label.localeCompare(p.label)),f=s!=null&&s?C(s,m):void 0,E={container:o=>({...o,width:"100%",...c}),menu:o=>({...o,backgroundColor:b.colors.grey5,borderRadius:t.Space.sp1,boxShadow:`${t.Space.sp0} 2px ${t.Space.sp2} ${b.colors.dropShadowHover}`,border:`1px solid ${b.colors.grey3}`,whiteSpace:"nowrap",zIndex:2,width:"100%",margin:`1px ${t.Space.sp0} ${t.Space.sp0} ${t.Space.sp0}`,overflow:"hidden"}),menuList:o=>({...o,borderRadius:t.Space.sp1}),input:(o,{selectProps:p})=>({...o,":after":{width:p.inputValue.length>0?t.Space.sp0:"unset"}})},O=o=>i.jsxRuntimeExports.jsxs(Q,{children:[i.jsxRuntimeExports.jsx(K,{children:i.jsxRuntimeExports.jsx(t.SvgAddRound,{fill:"currentColor",height:t.Space.sp3,width:t.Space.sp3})}),i.jsxRuntimeExports.jsx(U,{children:`${$.createOption} "${o}"`})]}),z=o=>{const{menuIsOpen:p,isFocused:v,isDisabled:y,selectProps:T}=o,{value:D}=T;return i.jsxRuntimeExports.jsx(P,{menuIsOpen:p,isFocused:v,isDisabled:y,selectedValue:D,hasError:w,"data-testid":t.generateDataTestId("creatable-single-select-control",n),children:i.jsxRuntimeExports.jsx(i.components.Control,{...o,className:"select-control",children:o.children})})},L=o=>i.jsxRuntimeExports.jsx(Z,{children:i.jsxRuntimeExports.jsxs(i.components.SingleValue,{...o,children:[o.selectProps.menuIsOpen===!1&&d!=null&&d.isTagShownForOption(o.data.value)===!0&&i.jsxRuntimeExports.jsx(X,{children:i.jsxRuntimeExports.jsx(Y,{style:d.style,children:d.tagName})}),o.children]})}),k=o=>{const{selectProps:p}=o,{placeholder:v,value:y}=p;return i.jsxRuntimeExports.jsx(i.components.Input,{...o,autoComplete:"new-password",placeholder:y==null?v:void 0,"data-testid":t.generateDataTestId("creatable-single-select-input",n),children:o.children})};return i.jsxRuntimeExports.jsx(i.CreatableSelect$1,{isMulti:!1,onCreateOption:o=>{const p=t.capitaliseWords(o);r(p)},onChange:o=>{g!==!1&&o?.value!=null&&f?.value===o.value?r(void 0):r(o?.value)},formatCreateLabel:o=>x===!0?O(o):`${$.otherOption} ${o}`,tabSelectsValue:!1,openMenuOnFocus:!0,"data-testid":t.generateDataTestId("creatable-single-select",n),classNamePrefix:"creatable-single-select-field",createOptionPosition:"last",allowCreateWhileLoading:!0,controlShouldRenderValue:!0,placeholder:u,menuPlacement:"auto",maxMenuHeight:288,defaultValue:f,value:f,menuShouldScrollIntoView:!1,closeMenuOnSelect:!0,components:{Control:z,Option:H,Input:k,SingleValue:L,ValueContainer:V,DropdownIndicator:ee,IndicatorSeparator:te,ClearIndicator:ie,Placeholder:F,MenuList:M},hideSelectedOptions:!1,styles:E,options:j,isClearable:!0,isSearchable:!0,isDisabled:a!=null},i.nanoid())},V=e=>i.jsxRuntimeExports.jsx(i.components.ValueContainer,{...e,className:"select-value-container",children:e.children}),M=e=>{const{options:n,children:r,maxHeight:a,getValue:u}=e,[g]=u(),x=n.indexOf(g)*40;return i.jsxRuntimeExports.jsx(i.VariableSizeList,{height:r.length>7?a:r.length*40,width:"100%",itemCount:r.length,itemSize:()=>40,initialScrollOffset:x,children:({index:m,style:d})=>i.jsxRuntimeExports.jsx(q,{style:d,children:r[m]})})},F=()=>null,H=e=>{const{isSelected:s,isDisabled:n,isFocused:r,data:a}=e,u=typeof a.label=="string"?a.label:a.value;return i.jsxRuntimeExports.jsx(B,{isFocused:r,isSelected:s,isDisabled:n,children:i.jsxRuntimeExports.jsx(i.components.Option,{...e,className:"select-option",children:i.jsxRuntimeExports.jsxs(W,{"data-testid":t.generateDataTestId("creatable-single-select-option",u),children:[i.jsxRuntimeExports.jsx(_,{children:i.jsxRuntimeExports.jsx(N,{isSelected:s,isDisabled:n,children:e.label})}),s?i.jsxRuntimeExports.jsxs(A,{children:[i.jsxRuntimeExports.jsx(G,{className:"right-tick-icon"}),i.jsxRuntimeExports.jsx(J,{className:"close-tick-icon"})]}):null]})})})},P=l.div`
+  width: 100%;
+  background-color: ${e=>e.theme.colors.grey5};
+  cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
+  .select-control {
+    border: none;
+    height: ${t.Space.sp6};
+    background-color: ${e=>e.hasError===!0?t.Colors.importantLight:e.menuIsOpen?e.theme.colors.background:e.theme.colors.grey5};
+    box-shadow: none;
+    &:hover {
+      fill: ${e=>e.theme.colors.primary};
+      background-color: ${e=>e.isDisabled?e.theme.colors.grey5:e.hasError===!0?t.Colors.importantLight:e.theme.colors.background};
+      border-color: none;
+    }
+    width: auto;
+    min-height: auto;
+    cursor: pointer;
+  }
+  .select-value-container {
+    width: 100%;
+    display: flex;
+    margin: ${t.Space.sp0} ${t.Space.sp3};
+    padding: 0;
+    max-width: 100%;
+    height: 100%;
+    min-width: auto;
+    align-items: center;
+    flex-wrap: nowrap;
+    cursor: pointer;
+    justify-content: ${e=>e.menuIsOpen===!1?"flex-end":"flex-start"};
+
+    .creatable-single-select-field__single-value {
+      display: flex;
+      border-radius: ${t.Space.sp0};
+      margin: ${t.Space.sp0};
+      color: ${e=>e.hasError===!0?t.Colors.important:e.theme.colors.primary};
+      ${t.textStyles.standardRegular.css};
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .creatable-single-select-field__input-container {
+      display: flex;
+      width: ${e=>e.menuIsOpen===!1&&e.selectedValue!=null?t.Space.sp0:"100%"};
+      position: ${e=>e.isFocused===!1&&e.selectedValue==null?"initial":"absolute"};
+      ${t.textStyles.standardRegular.css};
+      color: ${e=>e.hasError===!0?t.Colors.important:e.theme.colors.primary};
+      margin: ${t.Space.sp0};
+      cursor: inherit;
+
+      > input {
+        text-align: ${e=>e.isFocused===!1&&e.selectedValue==null?"right":"initial"};
+        align-items: center;
+        overflow: hidden;
+        cursor: inherit;
+        :disabled {
+          visibility: visible;
+        }
+        ::placeholder {
+          color: ${e=>e.hasError===!0?t.Colors.important:e.theme.colors.grey1};
+        }
+      }
+    }
+  }
+`,B=l.div`
+  border-radius: inherit;
+  .select-option {
+    ${t.textStyles.smallRegular.css};
+    height: ${t.Space.sp6};
+    padding: 9px ${t.Space.sp3};
+    color: ${e=>e.isSelected?e.theme.colors.primary:e.theme.colors.champion};
+    background-color: ${e=>e.isSelected||e.isFocused?e.theme.colors.background:e.theme.colors.grey5};
+    cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
+    border-top: none;
+    border-radius: inherit;
+    .close-tick-icon {
+      display: none;
+    }
+
+    &:hover {
+      background-color: ${e=>e.isDisabled?e.theme.colors.grey5:e.theme.colors.background};
+      color: ${e=>e.isDisabled?e.theme.colors.champion:e.theme.colors.primary};
+      .right-tick-icon {
+        display: none;
+      }
+      .close-tick-icon {
+        display: inline-block;
+      }
+    }
+  }
+`,W=l.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`,N=l.label`
+  padding-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: ${e=>e.isDisabled?"not-allowed":e.isSelected?"default":"pointer"};
+`,_=l.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+`,q=l.div`
+  :first-of-type {
+    border-top-left-radius: ${t.Space.sp1};
+    border-top-right-radius: ${t.Space.sp1};
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: ${t.Space.sp1};
+    border-bottom-right-radius: ${t.Space.sp1};
+  }
+`,A=l.div`
+  display: flex;
+`,G=l(t.SvgTick)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.primary};
+`,J=l(t.SvgClose)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.primary};
+`,K=l.div`
+  display: flex;
+  width: ${t.Space.sp3};
+  align-items: center;
+  margin-right: ${t.Space.sp2};
+`,Q=l.div`
+  display: flex;
+  flex-direction: row;
+`,U=l.div``,X=l.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 3px 6px;
+  margin-right: ${t.Space.sp2};
+`,Y=l(t.SuperSmallSemiBoldSp)`
+  color: ${t.Colors.neutralGrey5Light};
+  border-radius: ${t.Space.sp2};
+  padding: 3px 6px;
+  margin-left: 12px;
+  letter-spacing: 0.04em;
+`,Z=l.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: inherit;
+  align-items: center;
+  width: 100%;
+`,ee=()=>null,te=()=>null,ie=()=>null,oe=(e,s)=>e.map(n=>C(n,s)),C=(e,s)=>({value:e,label:s!==void 0?s(e):e}),se=({name:e,registerOptions:s,defaultValue:n,placeholder:r,isDisabled:a,style:u,addIconInCreateLabel:g,isOptionRemovable:x,tagProperties:m,onSelectChange:d,getLabelForId:w})=>{const{control:c,formState:{errors:b}}=i.useFormContext(),S=i.has(b,e??"");return i.jsxRuntimeExports.jsx(i.Controller,{name:e,control:c,defaultValue:n,"data-testid":t.generateDataTestId("creatable-single-select-field",e),rules:s,render:({field:{value:$,onChange:j}})=>i.jsxRuntimeExports.jsx(i.jsxRuntimeExports.Fragment,{children:i.jsxRuntimeExports.jsx(I,{onSelectedValueChanged:f=>{d?.(f??""),j({allOptions:n.allOptions,selectedOption:f})},placeholder:r,style:u,isDisabled:a,selectedValue:$.selectedOption,allValues:n.allOptions,addIconInCreateLabel:g,isOptionRemovable:x,getLabelForId:w,tagProperties:m,hasError:S,name:e})})})},h={width:new t.ResponsiveSized(343,580,726),height:new t.ResponsiveSized(t.sp[6],t.sp[6]),controlHeight:new t.ResponsiveSized(t.sp[6],t.sp[6]),paddingTopBottom:new t.ResponsiveSized(t.sp[2],t.sp[2]),marginTop:new t.ResponsiveSized(t.sp[2],t.sp[2]),marginBottom:new t.ResponsiveSized(t.sp[2],t.sp[2]),marginRight:new t.ResponsiveSized(t.sp[2],t.sp[2]),labelMarginLeft:new t.ResponsiveSized(t.sp[3],t.sp[4]),labelMarginRight:new t.ResponsiveSized(t.sp[3],t.sp[4]),labelMarginTop:new t.ResponsiveSized(t.sp[2],t.sp[2])},ne={infoLabel:new t.ResponsiveSizedStyle("extraSmallRegular","smallRegular")};function le({isDisabled:e,label:s,creatableSingleSelectField:n,style:r,additionalInfoLabel:a,errorInfoLabel:u,isOptionRemovable:g,addIconInCreateLabel:x,additionalInfoTextColor:m,onSelectChange:d,getLabelForId:w}){const c=t.useWindowSizeContext(),{formState:{errors:b}}=i.useFormContext(),S=i.has(b,n.name??"");return i.jsxRuntimeExports.jsxs(re,{size:c,style:r,isDisabled:e!=null,hasError:S,"data-testid":t.generateDataTestId("labeled-creatable-single-select-field",n.name),children:[i.jsxRuntimeExports.jsx(t.Label,{isDisabled:e,label:s.label,htmlFor:n.name,style:{marginLeft:h.labelMarginLeft.value(c),marginRight:h.labelMarginRight.value(c),marginTop:h.labelMarginTop.value(c),width:s.width??"auto"}}),i.jsxRuntimeExports.jsxs(ae,{labelWidth:s.width,children:[i.jsxRuntimeExports.jsx(se,{...n,isDisabled:e,style:{display:"flex",flexGrow:1,maxWidth:s.width!==null&&x===!1?`calc(100% - ${s.width}px)`:"auto",height:h.controlHeight.value(c)},onSelectChange:d,isOptionRemovable:g,addIconInCreateLabel:x,getLabelForId:w}),i.jsxRuntimeExports.jsx(R,{size:c,additionalInfoTextColor:m,children:a}),S&&i.jsxRuntimeExports.jsx(R,{size:c,hasError:S,children:u})]})]})}const re=l.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  width: ${e=>h.width.valuePx(e.size)};
+  min-height: ${e=>h.height.valuePx(e.size)};
+  padding-right: ${e=>h.marginRight.valuePx(e.size)};
+  padding-top: ${e=>h.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${e=>h.paddingTopBottom.valuePx(e.size)};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:focus-within {
+    z-index: 2;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+    .select-control {
+      background-color: ${e=>e.hasError===!0?t.Colors.importantLight:e.theme.colors.background};
+    }
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: ${e=>e.isDisabled===!0?"none":`1px solid ${e.theme.colors.primary}`};
+    .select-control {
+      background-color: ${e=>e.isDisabled?e.theme.colors.grey5:e.hasError===!0?t.Colors.importantLight:e.theme.colors.background};
+    }
+  }
+`,ae=l.div`
+  display: flex;
+  width: ${e=>e.labelWidth!=null?`calc(100% - ${e.labelWidth}px)`:"auto"};
+  justify-content: flex-end;
+  flex-direction: column;
+  position: relative;
+`,R=l.label`
+  color: ${e=>e.hasError===!0?t.Colors.important:e.additionalInfoTextColor!=null?e.additionalInfoTextColor:e.theme.colors.grey1};
+  width: auto;
+  ${e=>`${ne.infoLabel.style(e.size)}`};
+  padding-right: ${t.Space.sp3};
+  text-align: right;
+`;exports.LabeledCreatableSingleSelectField=le;