asma-ui-core 3.109.0 → 3.111.0

package/dist/components/miscellaneous/StyledFormControl.js

@@ -1,44 +1,48 @@
-import { cn as y } from "../../helpers/cn.js";
-import { resolveSx as g } from "../../helpers/sx.js";
-import { FormControlContext as h } from "./FormControlContext.js";
-import { useId as j, useMemo as w, useState as n } from "react";
-import { jsx as a } from "react/jsx-runtime";
-var A = ({ children: c, error: e = !1, disabled: o = !1, required: l = !1, size: t = "medium", fullWidth: i, className: d, style: u, sx: x, id: r, onFocus: p, onBlur: v, onClick: F }) => {
-  const s = j(), [m, C] = n(!1), [f, I] = n(!1), S = w(() => ({
+import { cn as C } from "../../helpers/cn.js";
+import { resolveSx as I } from "../../helpers/sx.js";
+import { fieldWidthStyle as W } from "../inputs/field-styles.js";
+import { FormControlContext as g } from "./FormControlContext.js";
+import { useId as j, useMemo as M, useState as a } from "react";
+import { jsx as i } from "react/jsx-runtime";
+var B = ({ children: n, error: e = !1, disabled: l = !1, required: t = !1, size: o = "medium", width: r = "full", fullWidth: N, className: c, style: u, sx: p, id: f, onFocus: x, onBlur: v, onClick: h }) => {
+  const s = j(), [m, y] = a(!1), [d, F] = a(!1), S = M(() => ({
     focused: m,
-    filled: f,
+    filled: d,
     error: e,
-    disabled: o,
-    required: l,
-    size: t,
-    labelId: r ?? s,
-    setFocused: C,
-    setFilled: I
+    disabled: l,
+    required: t,
+    size: o,
+    labelId: f ?? s,
+    setFocused: y,
+    setFilled: F
   }), [
     m,
-    f,
+    d,
     e,
-    o,
     l,
     t,
-    r,
+    o,
+    f,
     s
   ]);
-  return /* @__PURE__ */ a(h.Provider, {
+  return /* @__PURE__ */ i(g.Provider, {
     value: S,
-    children: /* @__PURE__ */ a("div", {
-      className: y("relative inline-flex flex-col", i && "w-full", d),
+    children: /* @__PURE__ */ i("div", {
+      className: C("relative flex-col", c),
+      "data-field-width": r,
       style: {
-        ...g(x),
+        display: "flex",
+        ...W(r),
+        ...I(p),
         ...u
       },
-      onFocus: p,
+      onFocus: x,
       onBlur: v,
-      onClick: F,
-      children: c
+      onClick: h,
+      children: n
     })
   });
 };
 export {
-  A as StyledFormControl
+  B as StyledFormControl
 };

package/dist/components/miscellaneous/StyledInputLabel.js

@@ -1,23 +1,33 @@
-import { cn as m } from "../../helpers/cn.js";
-import { floatingLabelClass as u, floatingLabelLayoutStyle as b } from "../inputs/field-styles.js";
-import { useFormControlContext as p } from "./FormControlContext.js";
-import { jsxs as x } from "react/jsx-runtime";
-var S = ({ children: o, htmlFor: s, id: l, required: t, disabled: i, error: a, size: d, shrink: n, className: f }) => {
-  const e = p(), r = n ?? (e ? e.focused || e.filled : !1), c = t ?? e?.required ?? !1;
-  return /* @__PURE__ */ x("label", {
-    htmlFor: s,
-    id: l ?? e?.labelId,
-    className: m(u({
-      shrink: r,
+import { cn as t } from "../../helpers/cn.js";
+import { fieldLabelAboveClass as x, floatingLabelClass as h, floatingLabelLayoutStyle as v } from "../inputs/field-styles.js";
+import { useFormControlContext as L } from "./FormControlContext.js";
+import { jsx as n, jsxs as b } from "react/jsx-runtime";
+var g = ({ children: l, htmlFor: r, id: s, required: f, disabled: a, error: c, size: u, shrink: m, labelPlacement: p = "above", className: i }) => {
+  const e = L(), o = m ?? (e ? e.focused || e.filled : !1), d = f ?? e?.required ?? !1;
+  return p === "above" ? /* @__PURE__ */ n("div", {
+    className: t(x({ disabled: a ?? e?.disabled }), i),
+    children: /* @__PURE__ */ b("label", {
+      htmlFor: r,
+      id: s ?? e?.labelId,
+      children: [l, d && /* @__PURE__ */ n("span", {
+        "aria-hidden": "true",
+        children: " *"
+      })]
+    })
+  }) : /* @__PURE__ */ b("label", {
+    htmlFor: r,
+    id: s ?? e?.labelId,
+    className: t(h({
+      shrink: o,
       focused: e?.focused,
-      error: a ?? e?.error,
-      disabled: i ?? e?.disabled,
-      size: d ?? e?.size
-    }), f),
-    style: b(r),
-    children: [o, c && " *"]
+      error: c ?? e?.error,
+      disabled: a ?? e?.disabled,
+      size: u ?? e?.size
+    }), i),
+    style: v(o),
+    children: [l, d && " *"]
   });
 };
 export {
-  S as StyledInputLabel
+  g as StyledInputLabel
 };

package/dist/datetime/components/date-picker/components/BaseDatePickerInput.js

@@ -1,150 +1,165 @@
-import { StyledInputField as K } from "../../../../components/inputs/input-field/StyledInputField.js";
-import { getValue as h } from "../helpers.js";
-import { DatePickerButton as Q } from "./DatePickerButton.js";
-import { getTitleLabelling as X } from "../../../helpers/getTitleLabelling.js";
-import { DATE_INPUT_FONT_FAMILY as Z } from "../../../../helpers/inputMask.js";
-import { useDatePickerMask as $ } from "../hooks/useDatePickerMask.js";
-import { defaultDatePickerValidationMessages as ee, useDatePickerValidation as te } from "../hooks/useDatePickerValidation.js";
-import { useEffect as I, useId as ae, useState as N } from "react";
-import { jsx as p, jsxs as V } from "react/jsx-runtime";
-import { isValid as re, parse as oe } from "date-fns";
-var he = (F) => {
-  const { onClick: w, inputClassName: H, dateFormat: r, selected: e, error: Y, helperText: A, errorText: B, onInputChange: v, hideCalendar: E, locale: o, disabledDays: l, label: g, title: u, inputAriaProps: O, readOnly: t, disallowPast: i, disallowFuture: s, validateOnCalendarClose: D, onValidatedOnce: x, hideDefaultHelperText: L, required: d, minDate: n, ...f } = F, { validationError: R, handleValidation: c, errHelperText: S, clearValidation: y } = te(ee), { maskRef: _ } = $(), T = ae(), [a, C] = N(e ? h(e, r) : ""), [P, j] = N({
+import { fieldLabelAboveClass as w, fieldWidthStyle as Z } from "../../../../components/inputs/field-styles.js";
+import { StyledInputField as $ } from "../../../../components/inputs/input-field/StyledInputField.js";
+import { getValue as v } from "../helpers.js";
+import { DatePickerButton as ee } from "./DatePickerButton.js";
+import { getTitleLabelling as te } from "../../../helpers/getTitleLabelling.js";
+import { DATE_INPUT_FONT_FAMILY as ae } from "../../../../helpers/inputMask.js";
+import { useDatePickerMask as re } from "../hooks/useDatePickerMask.js";
+import { defaultDatePickerValidationMessages as le, useDatePickerValidation as ie } from "../hooks/useDatePickerValidation.js";
+import { useEffect as F, useId as V, useState as A } from "react";
+import { jsx as d, jsxs as D } from "react/jsx-runtime";
+import { isValid as de, parse as oe } from "date-fns";
+var xe = (H) => {
+  const { onClick: Y, inputClassName: B, dateFormat: a, selected: e, error: E, helperText: L, errorText: O, onInputChange: g, hideCalendar: S, locale: r, disabledDays: o, label: f, title: h, inputAriaProps: R, readOnly: l, disallowPast: s, disallowFuture: n, validateOnCalendarClose: x, onValidatedOnce: b, hideDefaultHelperText: _, required: i, minDate: c, width: y = "s", ...m } = H, { validationError: j, handleValidation: p, errHelperText: q, clearValidation: C } = ie(le), { maskRef: W } = re(), T = V(), P = V(), [t, M] = A(e ? v(e, a) : ""), [N, z] = A({
     selected: e,
-    dateFormat: r
+    dateFormat: a
   });
-  (e !== P.selected || r !== P.dateFormat) && (j({
+  (e !== N.selected || a !== N.dateFormat) && (z({
     selected: e,
-    dateFormat: r
-  }), C(e ? h(e, r) : ""));
-  const q = o?.code?.startsWith("nb") ? "DD/MM/ÅÅÅÅ" : "DD/MM/YYYY", z = L ? void 0 : q, M = !!(R || Y), U = M ? B ?? S : A ?? z;
-  I(() => {
+    dateFormat: a
+  }), M(e ? v(e, a) : ""));
+  const U = r?.code?.startsWith("nb") ? "DD/MM/ÅÅÅÅ" : "DD/MM/YYYY", G = _ ? void 0 : U, I = !!(j || E), J = I ? O ?? q : L ?? G;
+  F(() => {
     if (!e) {
-      y();
+      C();
       return;
     }
-    c({
-      value: h(e, r),
-      disabledDays: l,
-      localeCode: o?.code,
-      disallowPast: i,
-      disallowFuture: s,
-      required: d,
-      minDate: n
+    p({
+      value: v(e, a),
+      disabledDays: o,
+      localeCode: r?.code,
+      disallowPast: s,
+      disallowFuture: n,
+      required: i,
+      minDate: c
     });
   }, [
     e,
-    r,
-    l,
-    o?.code,
-    i,
+    a,
+    o,
+    r?.code,
     s,
-    d,
     n,
+    i,
     c,
-    y
+    p,
+    C
   ]);
-  const W = /\d/.test(a), G = (m) => {
-    const k = m.target.value;
-    C(k.replace(/\D/g, "").length ? k : "");
+  const K = /\d/.test(t), Q = (u) => {
+    const k = u.target.value;
+    M(k.replace(/\D/g, "").length ? k : "");
   };
-  I(() => {
-    D && (c({
-      value: a,
-      disabledDays: l,
-      localeCode: o?.code,
-      disallowPast: i,
-      disallowFuture: s,
-      required: d,
-      minDate: n
-    }), x?.());
+  F(() => {
+    x && (p({
+      value: t,
+      disabledDays: o,
+      localeCode: r?.code,
+      disallowPast: s,
+      disallowFuture: n,
+      required: i,
+      minDate: c
+    }), b?.());
   }, [
-    D,
-    a,
-    l,
-    o?.code,
-    i,
+    x,
+    t,
+    o,
+    r?.code,
     s,
-    d,
     n,
-    x,
-    c
+    i,
+    c,
+    b,
+    p
   ]);
-  const J = () => {
-    if (c({
-      value: a,
-      disabledDays: l,
-      localeCode: o?.code,
-      disallowPast: i,
-      disallowFuture: s,
-      required: d,
-      minDate: n
+  const X = () => {
+    if (p({
+      value: t,
+      disabledDays: o,
+      localeCode: r?.code,
+      disallowPast: s,
+      disallowFuture: n,
+      required: i,
+      minDate: c
     })) return;
-    if (!a.replace(/\D/g, "").length) {
-      v?.(void 0);
+    if (!t.replace(/\D/g, "").length) {
+      g?.(void 0);
       return;
     }
-    const m = oe(a, "dd/MM/yyyy", /* @__PURE__ */ new Date());
-    v?.(re(m) ? m : void 0);
-  }, b = t ? 120 : 156;
-  return /* @__PURE__ */ V("div", {
+    const u = oe(t, "dd/MM/yyyy", /* @__PURE__ */ new Date());
+    g?.(de(u) ? u : void 0);
+  };
+  return /* @__PURE__ */ D("div", {
     className: "cursor-default",
-    children: [u && /* @__PURE__ */ p("div", {
-      id: T,
-      className: "pb-1 font-roboto font-semibold text-delta-800",
-      children: u
-    }), /* @__PURE__ */ V("div", {
-      className: "flex gap-1",
-      style: { height: t ? 40 : 75 },
-      children: [/* @__PURE__ */ p("div", {
-        style: { width: b },
-        children: /* @__PURE__ */ p("div", {
-          className: "relative",
-          children: /* @__PURE__ */ p(K, {
-            ...f,
-            label: g,
-            readOnly: t,
-            "data-testid": f.dataTest,
-            autoComplete: "off",
-            inputRef: t ? void 0 : _,
-            placeholder: !t && !W ? "  /  /    " : void 0,
-            size: "small",
-            value: t ? a.replaceAll("/", ".") : a,
-            className: H,
-            style: { width: b },
-            error: M,
-            onBlur: t ? void 0 : J,
-            helperText: U,
-            slotProps: {
-              formHelperText: { sx: {
-                marginTop: "4px",
-                marginLeft: 0,
-                marginRight: 0
-              } },
-              htmlInput: {
-                ...X({
-                  title: u,
-                  titleId: T,
-                  label: g,
-                  inputAriaProps: O
-                }),
-                ...t ? {} : {
-                  inputMode: "numeric",
-                  style: { fontFamily: Z }
+    "data-field-width": y,
+    style: Z(y),
+    children: [
+      h && /* @__PURE__ */ d("div", {
+        id: T,
+        className: w({ disabled: m.disabled }),
+        children: h
+      }),
+      f && /* @__PURE__ */ d("div", {
+        className: w({ disabled: m.disabled }),
+        children: /* @__PURE__ */ D("label", {
+          htmlFor: P,
+          children: [f, i && /* @__PURE__ */ d("span", {
+            "aria-hidden": "true",
+            children: " *"
+          })]
+        })
+      }),
+      /* @__PURE__ */ D("div", {
+        className: "flex items-start gap-1",
+        children: [/* @__PURE__ */ d("div", {
+          className: "min-w-0 flex-1",
+          children: /* @__PURE__ */ d("div", {
+            className: "relative",
+            children: /* @__PURE__ */ d($, {
+              ...m,
+              id: P,
+              readOnly: l,
+              "data-testid": m.dataTest,
+              autoComplete: "off",
+              inputRef: l ? void 0 : W,
+              placeholder: !l && !K ? "  /  /    " : void 0,
+              size: "small",
+              value: l ? t.replaceAll("/", ".") : t,
+              className: B,
+              error: I,
+              onBlur: l ? void 0 : X,
+              helperText: J,
+              slotProps: {
+                formHelperText: { sx: {
+                  marginTop: "4px",
+                  marginLeft: 0,
+                  marginRight: 0
+                } },
+                htmlInput: {
+                  "aria-required": i ? !0 : void 0,
+                  ...te({
+                    title: h,
+                    titleId: T,
+                    label: f,
+                    inputAriaProps: R
+                  }),
+                  ...l ? {} : {
+                    inputMode: "numeric",
+                    style: { fontFamily: ae }
+                  }
                 }
-              }
-            },
-            onChange: G
+              },
+              onChange: Q
+            })
           })
-        })
-      }), !E && !t && /* @__PURE__ */ p(Q, {
-        onClick: w,
-        disabled: !!f.disabled,
-        localeCode: o?.code
-      })]
-    })]
+        }), !S && !l && /* @__PURE__ */ d(ee, {
+          onClick: Y,
+          disabled: !!m.disabled,
+          localeCode: r?.code
+        })]
+      })
+    ]
   });
 };
 export {
-  he as BaseDatePickerInput
+  xe as BaseDatePickerInput
 };

package/dist/datetime/components/date-picker/components/DatePickerInputRangeCompact.js

@@ -1,14 +1,14 @@
-import f from "./DatePickerInputRangeCompact.module.js";
-import { BaseDatePickerInput as u } from "./BaseDatePickerInput.js";
-import C from "clsx";
-import { jsx as x, jsxs as F } from "react/jsx-runtime";
-import { addDays as g } from "date-fns";
-var v = ({ datePickerProps: h, onClick: l }) => {
-  const { dataTest: b, className: D, inputClassName: i, disabled: a, readOnly: m, dateFormat: d, onInputChange: o, hideCalendar: s, locale: p, selected: t, disabledDays: n, validateOnCalendarClose: T, onValidatedOnce: c, ...e } = h;
-  return /* @__PURE__ */ F("div", {
-    "data-testid": b,
-    className: C(D, f["styled-date-picker-input-range-compact"], a && f["range-compact-disabled"]),
-    children: [/* @__PURE__ */ x(u, {
+import u from "./DatePickerInputRangeCompact.module.js";
+import { BaseDatePickerInput as x } from "./BaseDatePickerInput.js";
+import F from "clsx";
+import { jsx as g, jsxs as y } from "react/jsx-runtime";
+import { addDays as h } from "date-fns";
+var N = ({ datePickerProps: b, onClick: l }) => {
+  const { dataTest: D, className: C, inputClassName: i, disabled: a, readOnly: m, dateFormat: d, onInputChange: o, hideCalendar: s, locale: p, selected: t, disabledDays: n, validateOnCalendarClose: T, onValidatedOnce: c, width: f, ...e } = b;
+  return /* @__PURE__ */ y("div", {
+    "data-testid": D,
+    className: F(C, u["styled-date-picker-input-range-compact"], a && u["range-compact-disabled"]),
+    children: [/* @__PURE__ */ g(x, {
       dataTest: "styled-date-picker-input-range-from",
       dateFormat: d,
       selected: t?.from,
@@ -19,7 +19,7 @@ var v = ({ datePickerProps: h, onClick: l }) => {
       onInputChange: (r) => {
         r && t?.to && r.getTime() > t?.to.getTime() ? o?.({
           from: r,
-          to: g(r, 1)
+          to: h(r, 1)
         }) : o?.({
           from: r,
           to: t?.to
@@ -30,13 +30,14 @@ var v = ({ datePickerProps: h, onClick: l }) => {
       disabledDays: n,
       validateOnCalendarClose: T,
       onValidatedOnce: c,
+      width: f,
       label: e.labelFrom,
       error: e.errorFrom,
       helperText: e.helperTextFrom,
       errorText: e.errorTextFrom,
       title: e.titleFrom,
       hideDefaultHelperText: e.hideDefaultHelperTextFrom
-    }), /* @__PURE__ */ x(u, {
+    }), /* @__PURE__ */ g(x, {
       dataTest: "styled-date-picker-input-range-to",
       dateFormat: d,
       selected: t?.to,
@@ -46,7 +47,7 @@ var v = ({ datePickerProps: h, onClick: l }) => {
       onClick: l,
       onInputChange: (r) => {
         r && t?.from && r.getTime() < t?.from.getTime() ? o?.({
-          from: g(r, -1),
+          from: h(r, -1),
           to: r
         }) : o?.({
           from: t?.from,
@@ -58,6 +59,7 @@ var v = ({ datePickerProps: h, onClick: l }) => {
       disabledDays: n,
       validateOnCalendarClose: T,
       onValidatedOnce: c,
+      width: f,
       label: e.labelTo,
       error: e.errorTo,
       helperText: e.helperTextTo,
@@ -68,5 +70,5 @@ var v = ({ datePickerProps: h, onClick: l }) => {
   });
 };
 export {
-  v as DatePickerInputRangeCompact
+  N as DatePickerInputRangeCompact
 };

package/dist/datetime/components/date-picker/components/DatePickerInputRangeCompact.module.js

@@ -1,6 +1,6 @@
 var a = {
-  "styled-date-picker-input-range-compact": "_styled-date-picker-input-range-compact_wj0t8_1",
-  "range-compact-disabled": "_range-compact-disabled_wj0t8_4"
+  "styled-date-picker-input-range-compact": "_styled-date-picker-input-range-compact_1asiz_1",
+  "range-compact-disabled": "_range-compact-disabled_1asiz_4"
 };
 export {
   a as default

package/dist/datetime/components/date-picker/components/DatePickerInputSingle.js

@@ -1,8 +1,8 @@
 import { BaseDatePickerInput as v } from "./BaseDatePickerInput.js";
-import { jsx as w } from "react/jsx-runtime";
-var j = ({ datePickerProps: e, onClick: a }) => {
-  const { inputClassName: r, disabled: t, helperText: l, label: d, error: i, locale: n, hideCalendar: o, dateFormat: s, disabledDays: p, dataTest: u, readOnly: m, errorText: c, disallowFuture: C, disallowPast: h, required: x, minDate: D, validateOnCalendarClose: b, onValidatedOnce: I, onInputChange: P, selected: T, title: f, hideDefaultHelperText: g, inputAriaProps: O } = e;
-  return /* @__PURE__ */ w(v, {
+import { jsx as y } from "react/jsx-runtime";
+var q = ({ datePickerProps: e, onClick: a }) => {
+  const { inputClassName: r, disabled: t, helperText: l, label: d, error: i, locale: n, hideCalendar: o, dateFormat: s, disabledDays: p, dataTest: u, readOnly: m, errorText: c, disallowFuture: h, disallowPast: C, required: x, minDate: D, validateOnCalendarClose: b, onValidatedOnce: I, onInputChange: P, selected: T, title: f, hideDefaultHelperText: g, inputAriaProps: w, width: O } = e;
+  return /* @__PURE__ */ y(v, {
     dataTest: u,
     inputClassName: r,
     readOnly: m,
@@ -18,17 +18,18 @@ var j = ({ datePickerProps: e, onClick: a }) => {
     disabledDays: p,
     label: d,
     errorText: c,
-    disallowFuture: C,
-    disallowPast: h,
+    disallowFuture: h,
+    disallowPast: C,
     required: x,
     minDate: D,
     validateOnCalendarClose: b,
     onValidatedOnce: I,
     title: f,
     hideDefaultHelperText: g,
-    inputAriaProps: O
+    inputAriaProps: w,
+    width: O
   });
 };
 export {
-  j as DatePickerInputSingle
+  q as DatePickerInputSingle
 };

package/dist/datetime/components/date-picker/components/StyledCalendarPickerSelectMonth.js

@@ -1,35 +1,38 @@
-import { StyledSelect as s } from "../../../../components/inputs/select/StyledSelect.js";
+import { StyledSelect as c } from "../../../../components/inputs/select/StyledSelect.js";
 import { StyledSelectItem as p } from "../../../../components/inputs/select/StyledSelectItem.js";
-import { StyledFormControl as S } from "../../../../components/miscellaneous/StyledFormControl.js";
+import { StyledFormControl as h } from "../../../../components/miscellaneous/StyledFormControl.js";
 import u from "./StyledCalendarPickerSelectPeriod.module.js";
 import { jsx as l } from "react/jsx-runtime";
-var h = (a) => a.charAt(0).toUpperCase() + a.slice(1).toLowerCase();
-function g(a) {
-  const { options: r = [], onChange: t, value: d, disabled: i, className: n, style: o, name: c } = a, m = a["aria-label"];
-  return /* @__PURE__ */ l(S, {
+var S = (a) => a.charAt(0).toUpperCase() + a.slice(1).toLowerCase();
+function x(a) {
+  const { options: t = [], onChange: r, value: i, disabled: d, className: n, style: o, name: m } = a, s = a["aria-label"];
+  return /* @__PURE__ */ l(h, {
     style: {
+      display: "inline-flex",
+      width: "auto",
+      maxWidth: "none",
       marginLeft: "-2px",
       marginRight: "4px"
     },
-    children: /* @__PURE__ */ l(s, {
+    children: /* @__PURE__ */ l(c, {
       dataTest: "StyledCalendarPickerSelectMonth",
       size: "small",
       variant: "standard",
-      name: m ?? c,
-      disabled: i,
+      name: s ?? m,
+      disabled: d,
       className: n,
       style: o,
-      value: d ?? "",
-      onChange: (e) => t?.(e),
+      value: i ?? "",
+      onChange: (e) => r?.(e),
       MenuProps: { className: u["styled-calendar-picker-select-period-menu"] },
-      children: r.map((e) => /* @__PURE__ */ l(p, {
+      children: t.map((e) => /* @__PURE__ */ l(p, {
         value: e.value,
         disabled: e.disabled,
-        children: h(e.label)
+        children: S(e.label)
       }, e.value))
     })
   });
 }
 export {
-  g as StyledCalendarPickerSelectMonth
+  x as StyledCalendarPickerSelectMonth
 };

package/dist/datetime/components/date-picker/components/StyledCalendarPickerSelectYear.js

@@ -1,19 +1,24 @@
-import { StyledSelect as o } from "../../../../components/inputs/select/StyledSelect.js";
+import { StyledSelect as c } from "../../../../components/inputs/select/StyledSelect.js";
 import { StyledSelectItem as u } from "../../../../components/inputs/select/StyledSelectItem.js";
 import { StyledFormControl as S } from "../../../../components/miscellaneous/StyledFormControl.js";
 import y from "./StyledCalendarPickerSelectPeriod.module.js";
 import { jsx as a } from "react/jsx-runtime";
-function h(l) {
-  const { options: r = [], onChange: t, value: d, disabled: n, className: i, style: m, name: c } = l, s = l["aria-label"];
+function C(l) {
+  const { options: r = [], onChange: t, value: d, disabled: i, className: n, style: m, name: o } = l, s = l["aria-label"];
   return /* @__PURE__ */ a(S, {
-    style: { marginLeft: "4px" },
-    children: /* @__PURE__ */ a(o, {
+    style: {
+      display: "inline-flex",
+      width: "auto",
+      maxWidth: "none",
+      marginLeft: "4px"
+    },
+    children: /* @__PURE__ */ a(c, {
       dataTest: "StyledCalendarPickerSelectYear",
       size: "small",
       variant: "standard",
-      name: s ?? c,
-      disabled: n,
-      className: i,
+      name: s ?? o,
+      disabled: i,
+      className: n,
       style: m,
       value: d ?? "",
       onChange: (e) => t?.(e),
@@ -27,5 +32,5 @@ function h(l) {
   });
 }
 export {
-  h as StyledCalendarPickerSelectYear
+  C as StyledCalendarPickerSelectYear
 };