@zeniai/web-components 3.16.66 → 3.16.68

package/dist/LabeledSingleSelectField-DYoPeXXi.js

@@ -0,0 +1,372 @@
+import { u as S, j as n, S as C, n as j, c as x, d as k, e as O } from "./vendor-.pnpm-DtFedGku.js";
+import m from "@emotion/styled";
+import { S as r, n as R, b as D, t as w, u as z, aB as L, R as d, D as t } from "./index-SJFqjz6R.js";
+const I = ({
+  allValues: e,
+  selectedValue: o,
+  onSelectedValueChanged: i,
+  isDisabled: a,
+  placeholder: c,
+  style: p,
+  customStyleConfig: g
+}) => {
+  const u = S(), f = K(e).sort((l, s) => l.label.localeCompare(s.label)), b = o != null && o ? $(o) : void 0, y = {
+    control: (l, s) => ({
+      ...l,
+      height: r.sp6,
+      backgroundColor: s.menuIsOpen ? u.colors.brandColorGoldDark : u.colors.grey5,
+      ":hover": {
+        fill: u.colors.primary,
+        backgroundColor: s.isDisabled ? u.colors.grey5 : u.colors.background,
+        borderColor: "none"
+      },
+      ...g?.control?.(l, s)
+    }),
+    container: (l, s) => ({
+      ...l,
+      width: "100%",
+      ...p,
+      ...g?.container?.(l, s)
+    }),
+    valueContainer: (l, s) => ({
+      ...l,
+      margin: `${r.sp0} ${r.sp3}`,
+      justifyContent: s.selectProps.menuIsOpen === !1 ? "flex-end" : "flex-start",
+      ...g?.valueContainer?.(l, s)
+    }),
+    menu: (l, s) => ({
+      ...l,
+      backgroundColor: u.colors.grey5,
+      borderRadius: r.sp1,
+      boxShadow: `${r.sp0} 2px ${r.sp2} ${u.colors.dropShadowHover}`,
+      whiteSpace: "nowrap",
+      zIndex: 2,
+      width: "100%",
+      margin: 0,
+      ...g?.menu?.(l, s)
+    }),
+    menuList: (l, s) => ({
+      ...l,
+      borderRadius: 0,
+      ...g?.menuList?.(l, s)
+    })
+  };
+  return /* @__PURE__ */ n.jsx(
+    C,
+    {
+      isMulti: !1,
+      onChange: (l) => {
+        l?.value != null && b?.value === l.value ? i(void 0) : i(l?.value);
+      },
+      tabSelectsValue: !1,
+      openMenuOnFocus: !0,
+      classNamePrefix: "single-select-field",
+      placeholder: c,
+      menuPlacement: "auto",
+      maxMenuHeight: 288,
+      defaultValue: b,
+      value: b,
+      menuShouldScrollIntoView: !1,
+      closeMenuOnSelect: !0,
+      components: {
+        Control: M,
+        Option: B,
+        Input: V,
+        SingleValue: F,
+        ValueContainer: P,
+        DropdownIndicator: q,
+        IndicatorSeparator: A,
+        ClearIndicator: J,
+        Placeholder: T
+      },
+      hideSelectedOptions: !1,
+      styles: y,
+      options: f,
+      isClearable: !0,
+      isSearchable: !0,
+      isDisabled: a != null
+    },
+    j()
+  );
+}, M = (e) => {
+  const { menuIsOpen: o, isFocused: i, isDisabled: a, selectProps: c } = e, { value: p } = c;
+  return /* @__PURE__ */ n.jsx(
+    N,
+    {
+      menuIsOpen: o,
+      isFocused: i,
+      isDisabled: a,
+      selectedValue: p,
+      children: /* @__PURE__ */ n.jsx(x.Control, { ...e, className: "select-control", children: e.children })
+    }
+  );
+}, P = (e) => /* @__PURE__ */ n.jsx(x.ValueContainer, { ...e, className: "select-value-container", children: e.children }), V = (e) => {
+  const { selectProps: o } = e, { placeholder: i, value: a } = o;
+  return /* @__PURE__ */ n.jsx(
+    x.Input,
+    {
+      ...e,
+      autoComplete: "new-password",
+      placeholder: a == null ? i : void 0,
+      children: e.children
+    }
+  );
+}, F = (e) => /* @__PURE__ */ n.jsx(x.SingleValue, { ...e, children: e.children }), T = () => null, B = (e) => {
+  const { isSelected: o, isDisabled: i, isFocused: a } = e;
+  return /* @__PURE__ */ n.jsx(
+    H,
+    {
+      isFocused: a,
+      isSelected: o,
+      isDisabled: i,
+      children: /* @__PURE__ */ n.jsx(x.Option, { ...e, className: "select-option", children: /* @__PURE__ */ n.jsxs(_, { children: [
+        /* @__PURE__ */ n.jsx(G, { children: /* @__PURE__ */ n.jsx(W, { isSelected: o, isDisabled: i, children: e.label }) }),
+        o ? /* @__PURE__ */ n.jsxs(E, { children: [
+          /* @__PURE__ */ n.jsx(
+            R,
+            {
+              className: "right-tick-icon",
+              width: r.sp3,
+              height: r.sp3,
+              style: { marginRight: "2px" },
+              color: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ n.jsx(
+            D,
+            {
+              className: "close-tick-icon",
+              width: r.sp3,
+              height: r.sp3,
+              color: "currentColor"
+            }
+          )
+        ] }) : null
+      ] }) })
+    }
+  );
+}, N = m.div`
+  width: 100%;
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+
+  .select-control {
+    border: none;
+    box-shadow: none;
+    width: auto;
+    min-height: auto;
+    cursor: pointer;
+  }
+  .select-value-container {
+    width: 100%;
+    display: flex;
+    padding: 0;
+    max-width: 100%;
+    height: 100%;
+    min-width: auto;
+    align-items: center;
+    flex-wrap: nowrap;
+    cursor: pointer;
+
+    .single-select-field__single-value {
+      border-radius: ${r.sp0};
+      margin: ${r.sp0};
+      color: ${(e) => e.theme.colors.primary};
+      ${w.standardRegular.css};
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .single-select-field__input-container {
+      display: flex;
+      width: ${(e) => e.menuIsOpen === !1 && e.selectedValue != null ? r.sp0 : "100%"};
+      position: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "initial" : "absolute"};
+      ${w.standardRegular.css};
+      color: ${(e) => e.theme.colors.primary};
+      margin: ${r.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.theme.colors.grey1};
+        }
+      }
+    }
+  }
+`, H = m.div`
+  .select-option {
+    ${w.smallRegular.css};
+    height: ${r.sp6};
+    padding: 9px ${r.sp3};
+    color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.champion};
+    background-color: ${(e) => e.isSelected ? e.theme.colors.grey3 : e.isFocused ? e.theme.colors.background : e.theme.colors.grey5};
+    cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+    border-top: none;
+    .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;
+      }
+    }
+  }
+`, _ = m.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`, W = m.label`
+  ${w.standardRegular.css};
+  padding-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : e.isSelected ? "default" : "pointer"};
+`, G = m.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+`, E = m.div`
+  display: flex;
+  color: ${(e) => e.theme.colors.primary};
+  fill: ${(e) => e.theme.colors.primary};
+`, q = () => null, A = () => null, J = () => null, K = (e) => e.map((o) => $(o)), $ = (e) => ({
+  value: e,
+  label: e
+}), Q = ({
+  name: e,
+  registerOptions: o,
+  defaultValue: i,
+  placeholder: a,
+  isDisabled: c,
+  style: p,
+  customStyleConfig: g
+}) => {
+  const { control: u } = k();
+  return /* @__PURE__ */ n.jsx(
+    O,
+    {
+      name: e,
+      control: u,
+      defaultValue: i,
+      rules: o,
+      render: ({ field: { value: v, onChange: f } }) => /* @__PURE__ */ n.jsx(
+        I,
+        {
+          onSelectedValueChanged: (b) => f({
+            allOptions: i.allOptions,
+            selectedOption: b
+          }),
+          style: p,
+          placeholder: a,
+          selectedValue: v.selectedOption,
+          allValues: i.allOptions,
+          isDisabled: c,
+          customStyleConfig: g
+        }
+      )
+    }
+  );
+}, h = {
+  width: new d(343, 580, 726),
+  height: new d(t[6], t[6]),
+  controlHeight: new d(t[6], t[6]),
+  paddingTopBottom: new d(t[2], t[2]),
+  marginTop: new d(t[2], t[2]),
+  marginBottom: new d(t[2], t[2]),
+  marginRight: new d(t[2], t[2]),
+  labelMarginLeft: new d(t[3], t[4]),
+  labelMarginRight: new d(t[3], t[4]),
+  labelMarginTop: new d(t[2], t[2])
+};
+function ee({
+  isDisabled: e,
+  label: o,
+  singleSelectField: i,
+  style: a
+}) {
+  const c = z();
+  return /* @__PURE__ */ n.jsxs(U, { size: c, style: a, isDisabled: e != null, children: [
+    /* @__PURE__ */ n.jsx(
+      L,
+      {
+        isDisabled: e,
+        label: o.label,
+        htmlFor: i.name,
+        style: {
+          marginLeft: h.labelMarginLeft.value(c),
+          marginRight: h.labelMarginRight.value(c),
+          marginTop: h.labelMarginTop.value(c),
+          width: o.width ?? "auto"
+        }
+      }
+    ),
+    /* @__PURE__ */ n.jsx(
+      Q,
+      {
+        ...i,
+        isDisabled: e,
+        style: {
+          display: "flex",
+          flexGrow: 1,
+          maxWidth: o.width != null ? `calc(100% - ${o.width}px)` : "auto",
+          height: h.controlHeight.value(c)
+        }
+      }
+    )
+  ] });
+}
+const U = m.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.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.theme.colors.background};
+    }
+  }
+`;
+export {
+  ee as L
+};

package/dist/LabeledSingleSelectField-qV_0_brc.cjs

@@ -0,0 +1,136 @@
+"use strict";const t=require("./vendor-.pnpm-CT-Z_-kn.cjs"),p=require("@emotion/styled"),o=require("./index-BbWHLDfl.cjs"),S=({allValues:e,selectedValue:n,onSelectedValueChanged:l,isDisabled:r,placeholder:a,style:h,customStyleConfig:u})=>{const c=t.useTheme(),x=P(e).sort((i,s)=>i.label.localeCompare(s.label)),m=n!=null&&n?b(n):void 0,w={control:(i,s)=>({...i,height:o.Space.sp6,backgroundColor:s.menuIsOpen?c.colors.brandColorGoldDark:c.colors.grey5,":hover":{fill:c.colors.primary,backgroundColor:s.isDisabled?c.colors.grey5:c.colors.background,borderColor:"none"},...u?.control?.(i,s)}),container:(i,s)=>({...i,width:"100%",...h,...u?.container?.(i,s)}),valueContainer:(i,s)=>({...i,margin:`${o.Space.sp0} ${o.Space.sp3}`,justifyContent:s.selectProps.menuIsOpen===!1?"flex-end":"flex-start",...u?.valueContainer?.(i,s)}),menu:(i,s)=>({...i,backgroundColor:c.colors.grey5,borderRadius:o.Space.sp1,boxShadow:`${o.Space.sp0} 2px ${o.Space.sp2} ${c.colors.dropShadowHover}`,whiteSpace:"nowrap",zIndex:2,width:"100%",margin:0,...u?.menu?.(i,s)}),menuList:(i,s)=>({...i,borderRadius:0,...u?.menuList?.(i,s)})};return t.jsxRuntimeExports.jsx(t.StateManagedSelect$1,{isMulti:!1,onChange:i=>{i?.value!=null&&m?.value===i.value?l(void 0):l(i?.value)},tabSelectsValue:!1,openMenuOnFocus:!0,classNamePrefix:"single-select-field",placeholder:a,menuPlacement:"auto",maxMenuHeight:288,defaultValue:m,value:m,menuShouldScrollIntoView:!1,closeMenuOnSelect:!0,components:{Control:v,Option:y,Input:$,SingleValue:R,ValueContainer:f,DropdownIndicator:L,IndicatorSeparator:I,ClearIndicator:M,Placeholder:j},hideSelectedOptions:!1,styles:w,options:x,isClearable:!0,isSearchable:!0,isDisabled:r!=null},t.nanoid())},v=e=>{const{menuIsOpen:n,isFocused:l,isDisabled:r,selectProps:a}=e,{value:h}=a;return t.jsxRuntimeExports.jsx(C,{menuIsOpen:n,isFocused:l,isDisabled:r,selectedValue:h,children:t.jsxRuntimeExports.jsx(t.components.Control,{...e,className:"select-control",children:e.children})})},f=e=>t.jsxRuntimeExports.jsx(t.components.ValueContainer,{...e,className:"select-value-container",children:e.children}),$=e=>{const{selectProps:n}=e,{placeholder:l,value:r}=n;return t.jsxRuntimeExports.jsx(t.components.Input,{...e,autoComplete:"new-password",placeholder:r==null?l:void 0,children:e.children})},R=e=>t.jsxRuntimeExports.jsx(t.components.SingleValue,{...e,children:e.children}),j=()=>null,y=e=>{const{isSelected:n,isDisabled:l,isFocused:r}=e;return t.jsxRuntimeExports.jsx(z,{isFocused:r,isSelected:n,isDisabled:l,children:t.jsxRuntimeExports.jsx(t.components.Option,{...e,className:"select-option",children:t.jsxRuntimeExports.jsxs(k,{children:[t.jsxRuntimeExports.jsx(E,{children:t.jsxRuntimeExports.jsx(O,{isSelected:n,isDisabled:l,children:e.label})}),n?t.jsxRuntimeExports.jsxs(D,{children:[t.jsxRuntimeExports.jsx(o.SvgTick,{className:"right-tick-icon",width:o.Space.sp3,height:o.Space.sp3,style:{marginRight:"2px"},color:"currentColor"}),t.jsxRuntimeExports.jsx(o.SvgClose,{className:"close-tick-icon",width:o.Space.sp3,height:o.Space.sp3,color:"currentColor"})]}):null]})})})},C=p.div`
+  width: 100%;
+  cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
+
+  .select-control {
+    border: none;
+    box-shadow: none;
+    width: auto;
+    min-height: auto;
+    cursor: pointer;
+  }
+  .select-value-container {
+    width: 100%;
+    display: flex;
+    padding: 0;
+    max-width: 100%;
+    height: 100%;
+    min-width: auto;
+    align-items: center;
+    flex-wrap: nowrap;
+    cursor: pointer;
+
+    .single-select-field__single-value {
+      border-radius: ${o.Space.sp0};
+      margin: ${o.Space.sp0};
+      color: ${e=>e.theme.colors.primary};
+      ${o.textStyles.standardRegular.css};
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .single-select-field__input-container {
+      display: flex;
+      width: ${e=>e.menuIsOpen===!1&&e.selectedValue!=null?o.Space.sp0:"100%"};
+      position: ${e=>e.isFocused===!1&&e.selectedValue==null?"initial":"absolute"};
+      ${o.textStyles.standardRegular.css};
+      color: ${e=>e.theme.colors.primary};
+      margin: ${o.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.theme.colors.grey1};
+        }
+      }
+    }
+  }
+`,z=p.div`
+  .select-option {
+    ${o.textStyles.smallRegular.css};
+    height: ${o.Space.sp6};
+    padding: 9px ${o.Space.sp3};
+    color: ${e=>e.isSelected?e.theme.colors.primary:e.theme.colors.champion};
+    background-color: ${e=>e.isSelected?e.theme.colors.grey3:e.isFocused?e.theme.colors.background:e.theme.colors.grey5};
+    cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
+    border-top: none;
+    .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;
+      }
+    }
+  }
+`,k=p.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`,O=p.label`
+  ${o.textStyles.standardRegular.css};
+  padding-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: ${e=>e.isDisabled?"not-allowed":e.isSelected?"default":"pointer"};
+`,E=p.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+`,D=p.div`
+  display: flex;
+  color: ${e=>e.theme.colors.primary};
+  fill: ${e=>e.theme.colors.primary};
+`,L=()=>null,I=()=>null,M=()=>null,P=e=>e.map(n=>b(n)),b=e=>({value:e,label:e}),F=({name:e,registerOptions:n,defaultValue:l,placeholder:r,isDisabled:a,style:h,customStyleConfig:u})=>{const{control:c}=t.useFormContext();return t.jsxRuntimeExports.jsx(t.Controller,{name:e,control:c,defaultValue:l,rules:n,render:({field:{value:g,onChange:x}})=>t.jsxRuntimeExports.jsx(S,{onSelectedValueChanged:m=>x({allOptions:l.allOptions,selectedOption:m}),style:h,placeholder:r,selectedValue:g.selectedOption,allValues:l.allOptions,isDisabled:a,customStyleConfig:u})})},d={width:new o.ResponsiveSized(343,580,726),height:new o.ResponsiveSized(o.sp[6],o.sp[6]),controlHeight:new o.ResponsiveSized(o.sp[6],o.sp[6]),paddingTopBottom:new o.ResponsiveSized(o.sp[2],o.sp[2]),marginTop:new o.ResponsiveSized(o.sp[2],o.sp[2]),marginBottom:new o.ResponsiveSized(o.sp[2],o.sp[2]),marginRight:new o.ResponsiveSized(o.sp[2],o.sp[2]),labelMarginLeft:new o.ResponsiveSized(o.sp[3],o.sp[4]),labelMarginRight:new o.ResponsiveSized(o.sp[3],o.sp[4]),labelMarginTop:new o.ResponsiveSized(o.sp[2],o.sp[2])};function V({isDisabled:e,label:n,singleSelectField:l,style:r}){const a=o.useWindowSizeContext();return t.jsxRuntimeExports.jsxs(T,{size:a,style:r,isDisabled:e!=null,children:[t.jsxRuntimeExports.jsx(o.Label,{isDisabled:e,label:n.label,htmlFor:l.name,style:{marginLeft:d.labelMarginLeft.value(a),marginRight:d.labelMarginRight.value(a),marginTop:d.labelMarginTop.value(a),width:n.width??"auto"}}),t.jsxRuntimeExports.jsx(F,{...l,isDisabled:e,style:{display:"flex",flexGrow:1,maxWidth:n.width!=null?`calc(100% - ${n.width}px)`:"auto",height:d.controlHeight.value(a)}})]})}const T=p.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  width: ${e=>d.width.valuePx(e.size)};
+  min-height: ${e=>d.height.valuePx(e.size)};
+  padding-right: ${e=>d.marginRight.valuePx(e.size)};
+  padding-top: ${e=>d.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${e=>d.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.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.theme.colors.background};
+    }
+  }
+`;exports.LabeledSingleSelectField=V;

package/dist/LabeledSingleSelectWithoutClearableField-85X1Z9zo.cjs

@@ -0,0 +1,38 @@
+"use strict";const s=require("./vendor-.pnpm-CT-Z_-kn.cjs"),d=require("@emotion/styled"),e=require("./index-BbWHLDfl.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]),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])};function p({isDisabled:i,label:n,singleSelectWithoutClearableField:r,style:l,opacity:a=1}){const o=e.useWindowSizeContext();return s.jsxRuntimeExports.jsxs(g,{size:o,style:l,isDisabled:i!=null,opacity:a,children:[s.jsxRuntimeExports.jsx(e.Label,{isDisabled:i,label:n.label,htmlFor:r.name,style:{marginLeft:t.labelMarginLeft.value(o),marginRight:t.labelMarginRight.value(o),marginTop:t.labelMarginTop.value(o),width:n.width??"auto"}}),s.jsxRuntimeExports.jsx(e.SingleSelectWithoutClearableField,{...r,isDisabled:i,style:{display:"flex",flexGrow:1,width:n.width!=null?`calc(100% - ${n.width}px)`:"auto",height:t.controlHeight.value(o)}})]})}const g=d.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)};
+  opacity: ${i=>i.opacity};
+
+  :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 ${i=>i.theme.colors.primary};
+    .select-control {
+      background-color: ${i=>i.theme.colors.background};
+    }
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: ${i=>i.isDisabled===!0?"none":`1px solid ${i.theme.colors.primary}`};
+    .select-control {
+      background-color: ${i=>i.isDisabled?i.theme.colors.grey5:i.theme.colors.background};
+    }
+  }
+`;exports.LabeledSingleSelectWithoutClearableField=p;

package/dist/LabeledSingleSelectWithoutClearableField-CgXMGcjx.js

@@ -0,0 +1,103 @@
+import { j as n } from "./vendor-.pnpm-DtFedGku.js";
+import g from "@emotion/styled";
+import { u as h, aB as m, R as t, aT as c, D as i } from "./index-SJFqjz6R.js";
+const o = {
+  width: new t(343, 580, 726),
+  height: new t(i[6], i[6]),
+  controlHeight: new t(i[6], i[6]),
+  paddingTopBottom: new t(i[2], i[2]),
+  marginTop: new t(i[2], i[2]),
+  marginBottom: new t(i[2], i[2]),
+  marginRight: new t(i[2], i[2]),
+  labelMarginLeft: new t(i[3], i[4]),
+  labelMarginRight: new t(i[3], i[4]),
+  labelMarginTop: new t(i[2], i[2])
+};
+function b({
+  isDisabled: e,
+  label: a,
+  singleSelectWithoutClearableField: l,
+  style: d,
+  opacity: s = 1
+}) {
+  const r = h();
+  return /* @__PURE__ */ n.jsxs(
+    u,
+    {
+      size: r,
+      style: d,
+      isDisabled: e != null,
+      opacity: s,
+      children: [
+        /* @__PURE__ */ n.jsx(
+          m,
+          {
+            isDisabled: e,
+            label: a.label,
+            htmlFor: l.name,
+            style: {
+              marginLeft: o.labelMarginLeft.value(r),
+              marginRight: o.labelMarginRight.value(r),
+              marginTop: o.labelMarginTop.value(r),
+              width: a.width ?? "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ n.jsx(
+          c,
+          {
+            ...l,
+            isDisabled: e,
+            style: {
+              display: "flex",
+              flexGrow: 1,
+              width: a.width != null ? `calc(100% - ${a.width}px)` : "auto",
+              height: o.controlHeight.value(r)
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+const u = g.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)};
+  opacity: ${(e) => e.opacity};
+
+  :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.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.theme.colors.background};
+    }
+  }
+`;
+export {
+  b as L
+};