welcome-ui 10.0.0-alpha.10 → 10.0.0-alpha.12

package/dist/Alert.css

@@ -1 +1 @@
-@layer components{._root_hm7mj_2{position:relative;display:flex;align-items:flex-start;width:100%;gap:var(--gap, var(--components-dimensions-alert-gap-content-md));border-radius:var(--components-dimensions-alert-border-radius);border-width:var(--border-width-sm);border-style:solid;padding:var(--padding);max-width:var(--maxWidth, max-content);background-color:var(--backgroundColor, var(--components-colors-alert-color-background-brand));border-color:var(--borderColor, var(--components-colors-alert-color-background-brand));color:var(--color, var(--components-colors-alert-color-text-brand-body))}._size-md_hm7mj_18{--padding: var(--components-dimensions-alert-padding-inline-md)}._size-md_hm7mj_18 ._content-actions_hm7mj_21{--gap: var(--components-dimensions-alert-gap-actions-md)}._size-md_hm7mj_18 ._without-title_hm7mj_24 ._icon-wrapper_hm7mj_24{margin-top:-2px}._size-lg_hm7mj_27{--padding: var(--components-dimensions-alert-padding-inline-lg);--gap: var(--components-dimensions-alert-gap-content-lg)}._size-lg_hm7mj_27 ._content-actions_hm7mj_21{--gap: var(--components-dimensions-alert-gap-actions-lg)}._variant-ai_hm7mj_34{--backgroundColor: var(--components-colors-alert-color-background-ai);--borderColor: transparent;background:linear-gradient(var(--components-colors-alert-color-background-ai) 0 0) padding-box,linear-gradient(90deg,var(--color-green-30) 0%,var(--color-teal-40) 20%,var(--color-blue-40) 40%,var(--color-violet-40) 60%,var(--color-pink-40) 80%,var(--color-red-orange-40) 100%) border-box}._variant-danger_hm7mj_39{--backgroundColor: var(--components-colors-alert-color-background-danger);--borderColor: var(--components-colors-alert-color-background-danger);--color: var(--color-icon-danger-primary)}._variant-info_hm7mj_44{--backgroundColor: var(--components-colors-alert-color-background-information);--borderColor: var(--components-colors-alert-color-background-information);--color: var(--color-icon-accent-blue-primary)}._variant-success_hm7mj_49{--backgroundColor: var(--components-colors-alert-color-background-success);--borderColor: var(--components-colors-alert-color-background-success);--color: var(--color-icon-accent-green-primary)}._variant-warning_hm7mj_54{--backgroundColor: var(--components-colors-alert-color-background-warning);--borderColor: var(--components-colors-alert-color-background-warning);--color: var(--color-icon-warning-primary)}._full-width_hm7mj_59{--maxWidth: 100%}._content_hm7mj_21{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--gap, var(--components-dimensions-alert-gap-content-md))}._content-text_hm7mj_70{display:flex;flex-direction:column;gap:var(--gap, var(--components-dimensions-alert-gap-content-md))}._content-text_hm7mj_70._without-title_hm7mj_24{flex-direction:row}._content-text_hm7mj_70._without-title_hm7mj_24 ._icon-wrapper_hm7mj_24{align-self:flex-start}._content-actions_hm7mj_21{display:flex;align-items:center;gap:var(--gap)}._title-close-button_hm7mj_87{margin-right:var(--spacing-xl)}._title-with-icon_hm7mj_90{display:flex;align-items:center;gap:var(--spacing-sm)}._close-button_hm7mj_96{position:absolute;right:var(--spacing-sm);top:var(--spacing-sm)}._icon-wrapper_hm7mj_24{flex-shrink:0;padding:var(--components-dimensions-alert-icon-padding-block);border-radius:var(--components-dimensions-alert-icon-border-radius);background-color:var(--iconWrapperBackgroundColor, var(--components-colors-alert-icon-color-background-brand));color:var(--iconWrapperColor, var(--components-colors-alert-icon-color-icon-brand))}._icon-wrapper-success_hm7mj_109{--iconWrapperBackgroundColor: var(--components-colors-alert-icon-color-background-success);--iconWrapperColor: var(--components-colors-alert-icon-color-icon-success)}._icon-wrapper-danger_hm7mj_113{--iconWrapperBackgroundColor: var(--components-colors-alert-icon-color-background-danger);--iconWrapperColor: var(--components-colors-alert-icon-color-icon-danger)}._icon-wrapper-info_hm7mj_117{--iconWrapperBackgroundColor: var( --components-colors-alert-icon-color-background-information );--iconWrapperColor: var(--components-colors-alert-icon-color-icon-information)}._icon-wrapper-warning_hm7mj_123{--iconWrapperBackgroundColor: var(--components-colors-alert-icon-color-background-warning);--iconWrapperColor: var(--components-colors-alert-icon-color-icon-warning)}._icon-wrapper-ai_hm7mj_127{background:conic-gradient(from 30deg at 50% 50%,var(--color-green-30) 0deg,var(--color-blue-40) 25.96deg,var(--color-violet-40) 51.92deg,var(--color-pink-40) 76.15deg,var(--color-red-orange-40) 110.77deg,var(--color-pink-40) 162.69deg,var(--color-violet-40) 209.42deg,var(--color-blue-40) 254.42deg,var(--color-teal-40) 306.35deg,var(--color-green-30) 360deg);--iconWrapperColor: var(--components-colors-alert-icon-color-icon-ai)}}
+@layer components{._root_8fyu4_2{position:relative;display:flex;align-items:flex-start;width:100%;gap:var(--gap, var(--components-dimensions-alert-gap-content-md));border-radius:var(--components-dimensions-alert-border-radius);border-width:var(--border-width-sm);border-style:solid;padding:var(--padding);max-width:var(--maxWidth, max-content);background-color:var(--backgroundColor, var(--components-colors-alert-color-background-brand));border-color:var(--borderColor, var(--components-colors-alert-color-background-brand));color:var(--color, var(--components-colors-alert-color-text-brand-body))}._size-md_8fyu4_18{--padding: var(--components-dimensions-alert-padding-inline-md)}._size-md_8fyu4_18 ._content-actions_8fyu4_21{--gap: var(--components-dimensions-alert-gap-actions-md)}._size-md_8fyu4_18 ._without-title_8fyu4_24 ._icon-wrapper_8fyu4_24{margin-top:-2px}._size-lg_8fyu4_27{--padding: var(--components-dimensions-alert-padding-inline-lg);--gap: var(--components-dimensions-alert-gap-content-lg)}._size-lg_8fyu4_27 ._content-actions_8fyu4_21{--gap: var(--components-dimensions-alert-gap-actions-lg)}._variant-ai_8fyu4_34{--backgroundColor: var(--components-colors-alert-color-background-ai);--borderColor: transparent;background:linear-gradient(var(--components-colors-alert-color-background-ai) 0 0) padding-box,linear-gradient(90deg,var(--color-green-30) 0%,var(--color-teal-40) 20%,var(--color-blue-40) 40%,var(--color-violet-40) 60%,var(--color-pink-40) 80%,var(--color-red-orange-40) 100%) border-box}._variant-danger_8fyu4_39{--backgroundColor: var(--components-colors-alert-color-background-danger);--borderColor: var(--components-colors-alert-color-background-danger);--color: var(--color-icon-danger-primary)}._variant-info_8fyu4_44{--backgroundColor: var(--components-colors-alert-color-background-information);--borderColor: var(--components-colors-alert-color-background-information);--color: var(--color-icon-accent-blue-primary)}._variant-success_8fyu4_49{--backgroundColor: var(--components-colors-alert-color-background-success);--borderColor: var(--components-colors-alert-color-background-success);--color: var(--color-icon-accent-green-primary)}._variant-warning_8fyu4_54{--backgroundColor: var(--components-colors-alert-color-background-warning);--borderColor: var(--components-colors-alert-color-background-warning);--color: var(--color-icon-warning-primary)}._full-width_8fyu4_59{--maxWidth: 100%}._content_8fyu4_21{overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--gap, var(--components-dimensions-alert-gap-content-md))}._content-text_8fyu4_71{display:flex;flex-direction:column;gap:var(--gap, var(--components-dimensions-alert-gap-content-md))}._content-text_8fyu4_71._without-title_8fyu4_24{flex-direction:row}._content-text_8fyu4_71._without-title_8fyu4_24 ._icon-wrapper_8fyu4_24{align-self:flex-start}._content-actions_8fyu4_21{display:flex;align-items:center;gap:var(--gap)}._title-close-button_8fyu4_88{margin-right:var(--spacing-xl)}._title-with-icon_8fyu4_91{display:flex;align-items:center;gap:var(--spacing-sm)}._close-button_8fyu4_97{position:absolute;right:var(--spacing-sm);top:var(--spacing-sm)}._icon-wrapper_8fyu4_24{display:flex;flex-shrink:0;padding:var(--components-dimensions-alert-icon-padding-block);border-radius:var(--components-dimensions-alert-icon-border-radius);background-color:var(--iconWrapperBackgroundColor, var(--components-colors-alert-icon-color-background-brand));color:var(--iconWrapperColor, var(--components-colors-alert-icon-color-icon-brand))}._icon-wrapper-success_8fyu4_111{--iconWrapperBackgroundColor: var(--components-colors-alert-icon-color-background-success);--iconWrapperColor: var(--components-colors-alert-icon-color-icon-success)}._icon-wrapper-danger_8fyu4_115{--iconWrapperBackgroundColor: var(--components-colors-alert-icon-color-background-danger);--iconWrapperColor: var(--components-colors-alert-icon-color-icon-danger)}._icon-wrapper-info_8fyu4_119{--iconWrapperBackgroundColor: var( --components-colors-alert-icon-color-background-information );--iconWrapperColor: var(--components-colors-alert-icon-color-icon-information)}._icon-wrapper-warning_8fyu4_125{--iconWrapperBackgroundColor: var(--components-colors-alert-icon-color-background-warning);--iconWrapperColor: var(--components-colors-alert-icon-color-icon-warning)}._icon-wrapper-ai_8fyu4_129{background:conic-gradient(from 30deg at 50% 50%,var(--color-green-30) 0deg,var(--color-blue-40) 25.96deg,var(--color-violet-40) 51.92deg,var(--color-pink-40) 76.15deg,var(--color-red-orange-40) 110.77deg,var(--color-pink-40) 162.69deg,var(--color-violet-40) 209.42deg,var(--color-blue-40) 254.42deg,var(--color-teal-40) 306.35deg,var(--color-green-30) 360deg);--iconWrapperColor: var(--components-colors-alert-icon-color-icon-ai)}}

package/dist/Alert.js

@@ -1,105 +1,105 @@
 "use client";
 import './Alert.css';
-import { jsx as i, jsxs as m } from "react/jsx-runtime";
-import p, { forwardRef as w, Children as u, cloneElement as h } from "react";
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import p, { forwardRef as y, Children as f, cloneElement as m } from "react";
 import { CloseButton as E } from "./CloseButton.js";
 import { Icon as V } from "./Icon.js";
-import { Text as N } from "./Text.js";
-import { c as A } from "./index-PAaZGbyz.js";
-import { Button as b } from "./Button.js";
-const I = "_root_hm7mj_2", O = "_content_hm7mj_21", x = {
+import { Text as b } from "./Text.js";
+import { c as x } from "./index-PAaZGbyz.js";
+import { Button as h } from "./Button.js";
+const I = "_root_8fyu4_2", O = "_content_8fyu4_21", B = {
   root: I,
-  "size-md": "_size-md_hm7mj_18",
-  "content-actions": "_content-actions_hm7mj_21",
-  "without-title": "_without-title_hm7mj_24",
-  "icon-wrapper": "_icon-wrapper_hm7mj_24",
-  "size-lg": "_size-lg_hm7mj_27",
-  "variant-ai": "_variant-ai_hm7mj_34",
-  "variant-danger": "_variant-danger_hm7mj_39",
-  "variant-info": "_variant-info_hm7mj_44",
-  "variant-success": "_variant-success_hm7mj_49",
-  "variant-warning": "_variant-warning_hm7mj_54",
-  "full-width": "_full-width_hm7mj_59",
+  "size-md": "_size-md_8fyu4_18",
+  "content-actions": "_content-actions_8fyu4_21",
+  "without-title": "_without-title_8fyu4_24",
+  "icon-wrapper": "_icon-wrapper_8fyu4_24",
+  "size-lg": "_size-lg_8fyu4_27",
+  "variant-ai": "_variant-ai_8fyu4_34",
+  "variant-danger": "_variant-danger_8fyu4_39",
+  "variant-info": "_variant-info_8fyu4_44",
+  "variant-success": "_variant-success_8fyu4_49",
+  "variant-warning": "_variant-warning_8fyu4_54",
+  "full-width": "_full-width_8fyu4_59",
   content: O,
-  "content-text": "_content-text_hm7mj_70",
-  "title-close-button": "_title-close-button_hm7mj_87",
-  "title-with-icon": "_title-with-icon_hm7mj_90",
-  "close-button": "_close-button_hm7mj_96",
-  "icon-wrapper-success": "_icon-wrapper-success_hm7mj_109",
-  "icon-wrapper-danger": "_icon-wrapper-danger_hm7mj_113",
-  "icon-wrapper-info": "_icon-wrapper-info_hm7mj_117",
-  "icon-wrapper-warning": "_icon-wrapper-warning_hm7mj_123",
-  "icon-wrapper-ai": "_icon-wrapper-ai_hm7mj_127"
-}, d = w(
-  ({ variant: t = "primary", ...o }, n) => /* @__PURE__ */ i(b, { className: "shrink-0 w-fit", ref: n, variant: t, ...o })
+  "content-text": "_content-text_8fyu4_71",
+  "title-close-button": "_title-close-button_8fyu4_88",
+  "title-with-icon": "_title-with-icon_8fyu4_91",
+  "close-button": "_close-button_8fyu4_97",
+  "icon-wrapper-success": "_icon-wrapper-success_8fyu4_111",
+  "icon-wrapper-danger": "_icon-wrapper-danger_8fyu4_115",
+  "icon-wrapper-info": "_icon-wrapper-info_8fyu4_119",
+  "icon-wrapper-warning": "_icon-wrapper-warning_8fyu4_125",
+  "icon-wrapper-ai": "_icon-wrapper-ai_8fyu4_129"
+}, w = y(
+  ({ variant: t = "primary", ...o }, n) => /* @__PURE__ */ i(h, { className: "shrink-0 w-fit", ref: n, variant: t, ...o })
 );
-d.displayName = "Alert.Button";
-const f = w(
-  ({ variant: t = "secondary", ...o }, n) => /* @__PURE__ */ i(b, { className: "shrink-0 w-fit", ref: n, variant: t, ...o })
+w.displayName = "Alert.Button";
+const d = y(
+  ({ variant: t = "secondary", ...o }, n) => /* @__PURE__ */ i(h, { className: "shrink-0 w-fit", ref: n, variant: t, ...o })
 );
-f.displayName = "Alert.SecondaryButton";
-const R = A(x), l = ({ children: t, hasCloseButton: o, ...n }) => /* @__PURE__ */ i(N, { as: "span", className: R(o && "title-close-button"), ...n, children: t });
-l.displayName = "Alert.Title";
-const a = A(x), z = {
+d.displayName = "Alert.SecondaryButton";
+const R = x(B), _ = ({ children: t, hasCloseButton: o, ...n }) => /* @__PURE__ */ i(b, { as: "span", className: R(o && "title-close-button"), ...n, children: t });
+_.displayName = "Alert.Title";
+const a = x(B), z = {
   ai: "sparkles",
   brand: "lightbulb-alt",
   danger: "exclamation-octagon",
   info: "info-circle",
   success: "check-circle",
   warning: "exclamation-triangle"
-}, B = w(
-  ({ children: t, className: o, cta: n, handleClose: _, isFullWidth: $, size: c = "md", variant: s = "brand", ...k }, T) => {
-    const C = s === "ai", j = u.toArray(t).some((e) => p.isValidElement(e) ? e.type === l : !1), y = /* @__PURE__ */ i("div", { className: a("icon-wrapper", `icon-wrapper-${s}`), children: /* @__PURE__ */ i(V, { name: z[s] }) }), S = u.toArray(t).map((e) => e.type === l ? /* @__PURE__ */ m("div", { className: a("title-with-icon"), children: [
-      y,
-      h(e, {
-        hasCloseButton: !!_,
+}, $ = y(
+  ({ children: t, className: o, cta: n, handleClose: u, isFullWidth: k, size: c = "md", variant: s = "brand", ...T }, C) => {
+    const S = s === "ai", g = f.toArray(t).some((e) => p.isValidElement(e) ? e.type === _ : !1), v = /* @__PURE__ */ i("div", { className: a("icon-wrapper", `icon-wrapper-${s}`), children: /* @__PURE__ */ i(V, { name: z[s] }) }), j = f.toArray(t).map((e) => e.type === _ ? /* @__PURE__ */ l("div", { className: a("title-with-icon"), children: [
+      v,
+      m(e, {
+        hasCloseButton: !!u,
         variant: `body-${c}-strong`
       })
-    ] }) : e), g = (e) => u.toArray(e).flatMap((r) => p.isValidElement(r) && r.type === p.Fragment ? g(r.props.children) : r.type === d ? h(r, {
+    ] }) : e), N = (e) => f.toArray(e).flatMap((r) => p.isValidElement(r) && r.type === p.Fragment ? N(r.props.children) : r.type === w ? m(r, {
       size: c,
-      variant: C ? "primary-ai" : void 0
-    }) : r.type === f ? h(r, {
+      variant: S ? "primary-ai" : void 0
+    }) : r.type === d ? m(r, {
       size: c
-    }) : r), v = !!n && g(n);
-    return /* @__PURE__ */ m(
+    }) : r), A = !!n && N(n);
+    return /* @__PURE__ */ l(
       "div",
       {
         className: a(
           "root",
-          $ && "full-width",
+          k && "full-width",
           `size-${c}`,
           s && `variant-${s}`,
           o
         ),
-        ref: T,
-        ...k,
+        ref: C,
+        ...T,
         children: [
-          !!_ && /* @__PURE__ */ i(E, { className: a("close-button"), onClick: _ }),
-          /* @__PURE__ */ m("div", { className: a("content"), children: [
-            /* @__PURE__ */ m(
-              N,
+          !!u && /* @__PURE__ */ i(E, { className: a("close-button"), onClick: u }),
+          /* @__PURE__ */ l("div", { className: a("content"), children: [
+            /* @__PURE__ */ l(
+              b,
               {
                 as: "div",
-                className: a("content-text", !j && "without-title"),
+                className: a("content-text", !g && "without-title"),
                 variant: `body-${c}`,
                 children: [
-                  !j && y,
-                  S
+                  !g && v,
+                  j
                 ]
               }
             ),
-            !!v && /* @__PURE__ */ i("div", { className: a("content-actions"), children: v })
+            !!A && /* @__PURE__ */ i("div", { className: a("content-actions"), children: A })
           ] })
         ]
       }
     );
   }
 );
-B.displayName = "Alert";
-const K = Object.assign(B, {
-  Button: d,
-  SecondaryButton: f,
-  Title: l
+$.displayName = "Alert";
+const K = Object.assign($, {
+  Button: w,
+  SecondaryButton: d,
+  Title: _
 });
 export {
   K as Alert,

package/dist/Checkbox.js

@@ -1,6 +1,6 @@
 "use client";
 import './Checkbox.css';
-import { jsxs as b, jsx as s } from "react/jsx-runtime";
+import { jsxs as b, jsx as i } from "react/jsx-runtime";
 import { a as x } from "./KPUWHTQJ-Dv3cAqjP.js";
 import { forwardRef as C, useState as l } from "react";
 import { useField as g } from "./Field.js";
@@ -14,9 +14,9 @@ const y = "_root_luk8p_2", F = "_indeterminate_luk8p_67", I = {
   "variant-success": "_variant-success_luk8p_61",
   indeterminate: F
 }, N = w(I), j = C(
-  ({ checked: m = !1, className: u, indeterminate: a = !1, onChange: i, variant: f, ...o }, p) => {
-    const [e, _] = l(m), [k, t] = l(!1), { getInputProps: n, variant: v } = g(), r = v || f, { disabled: c } = n(o), h = () => {
-      _(!e), i && i(!e);
+  ({ checked: m = !1, className: u, indeterminate: s = !1, onChange: a, variant: f, ...t }, p) => {
+    const [e, _] = l(m), [k, n] = l(!1), { getInputProps: o, variant: v } = g(), r = v || f, { disabled: c } = o(t), h = () => {
+      _(!e), a && a(!e);
     };
     return /* @__PURE__ */ b(
       "div",
@@ -26,24 +26,25 @@ const y = "_root_luk8p_2", F = "_indeterminate_luk8p_67", I = {
         className: N(
           "root",
           r && `variant-${r}`,
-          a && "indeterminate",
+          s && "indeterminate",
+          "field-input",
           u
         ),
         "data-focus-visible": k || void 0,
         onClick: c ? void 0 : h,
         children: [
-          /* @__PURE__ */ s(V, { children: /* @__PURE__ */ s(
+          /* @__PURE__ */ i(V, { children: /* @__PURE__ */ i(
             x,
             {
-              ...n(o),
+              ...o(t),
               checked: e,
-              onBlur: () => t(!1),
-              onFocusVisible: () => t(!0),
+              onBlur: () => n(!1),
+              onFocusVisible: () => n(!0),
               ref: p
             }
           ) }),
-          e ? /* @__PURE__ */ s(d, { name: "check", size: "sm" }) : null,
-          !e && a ? /* @__PURE__ */ s(d, { name: "minus", size: "sm" }) : null
+          e ? /* @__PURE__ */ i(d, { name: "check", size: "sm" }) : null,
+          !e && s ? /* @__PURE__ */ i(d, { name: "minus", size: "sm" }) : null
         ]
       }
     );

package/dist/DatePicker.js

@@ -1,15 +1,15 @@
 "use client";
 import './DatePicker.css';
-import { jsxs as q, jsx as l } from "react/jsx-runtime";
-import { useState as $, useMemo as k, useEffect as j, forwardRef as G, useRef as J } from "react";
-import { D as Q, C as V } from "./CustomPopper-C1wIDHbM.js";
-import { Button as F } from "./Button.js";
-import { Icon as M } from "./Icon.js";
-import { Select as w } from "./Select.js";
-import { c as P } from "./index-PAaZGbyz.js";
-import { g as W, a as X, s as v, b as Z, D as K } from "./utils-BD597oo6.js";
-import { InputText as Y } from "./InputText.js";
-const g = P(v), B = ({
+import { jsxs as G, jsx as l } from "react/jsx-runtime";
+import { useState as A, useMemo as $, useEffect as S, forwardRef as J, useRef as Q } from "react";
+import { D as V, C as W } from "./CustomPopper-C1wIDHbM.js";
+import { Button as j } from "./Button.js";
+import { Icon as F } from "./Icon.js";
+import { Select as M } from "./Select.js";
+import { c as v } from "./index-PAaZGbyz.js";
+import { g as X, a as Z, s as B, b as Y, D as K } from "./utils-BD597oo6.js";
+import { InputText as g } from "./InputText.js";
+const C = v(B), L = ({
   changeMonth: x,
   changeYear: N,
   date: f,
@@ -22,49 +22,49 @@ const g = P(v), B = ({
   locale: D,
   startYear: a
 }) => {
-  const [u, R] = $(null), [i, E] = $(null), o = k(() => W(D), [D]), r = k(() => X(a, c), [a, c]), m = (t || u === o[0].label) && i === a, H = (t || u === o[o.length - 1].label) && i === c;
-  return j(() => {
-    const b = new Date(f), d = o[b.getMonth()].label, A = b.getFullYear();
-    R(d), E(A);
-  }, [f, o]), /* @__PURE__ */ q("div", { className: g("custom-header"), children: [
+  const [p, R] = A(null), [m, w] = A(null), i = $(() => X(D), [D]), r = $(() => Z(a, c), [a, c]), o = (t || p === i[0].label) && m === a, E = (t || p === i[i.length - 1].label) && m === c;
+  return S(() => {
+    const b = new Date(f), u = i[b.getMonth()].label, H = b.getFullYear();
+    R(u), w(H);
+  }, [f, i]), /* @__PURE__ */ G("div", { className: C("custom-header"), children: [
     /* @__PURE__ */ l(
-      F,
+      j,
       {
-        disabled: m,
+        disabled: o,
         onClick: t ? z : T,
         size: "sm",
         title: `Previous ${t ? "year" : "month"}`,
         variant: "tertiary",
-        children: /* @__PURE__ */ l(M, { name: "angle-left-b", size: "xs" })
+        children: /* @__PURE__ */ l(F, { name: "angle-left-b", size: "xs" })
       }
     ),
     !t && /* @__PURE__ */ l(
-      w,
+      M,
       {
         id: "month",
         name: "month",
         onChange: x,
-        options: o,
+        options: i,
         size: "md",
-        value: u
+        value: p
       }
     ),
-    /* @__PURE__ */ l(w, { id: "year", name: "year", onChange: N, options: r, size: "md", value: i }),
+    /* @__PURE__ */ l(M, { id: "year", name: "year", onChange: N, options: r, size: "md", value: m }),
     /* @__PURE__ */ l(
-      F,
+      j,
       {
-        disabled: H,
+        disabled: E,
         onClick: t ? y : I,
         size: "sm",
         title: `Next ${t ? "year" : "month"}`,
         variant: "tertiary",
-        children: /* @__PURE__ */ l(M, { name: "angle-right-b", size: "xs" })
+        children: /* @__PURE__ */ l(F, { name: "angle-right-b", size: "xs" })
       }
     )
   ] });
 };
-B.displayName = "DateTimePicker.CustomHeader";
-const h = P(v), C = G(
+L.displayName = "DateTimePicker.CustomHeader";
+const P = v(B), h = J(
   ({
     autoFocus: x,
     className: N,
@@ -77,93 +77,94 @@ const h = P(v), C = G(
     onChange: t,
     placeholder: D,
     preventVirtualKeyboard: a = !1,
-    showMonthYearPicker: u,
+    showMonthYearPicker: p,
     size: R = "md",
-    startYear: i = 1900,
-    transparent: E,
-    useWeekdaysShort: o = !0,
+    startYear: m = 1900,
+    transparent: w,
+    useWeekdaysShort: i = !0,
     value: r = K,
-    ...m
-  }, H) => {
-    const b = m == null ? void 0 : m.timeIntervals, d = (e) => Z(e, b), [A, n] = $(d(r)), L = J(), S = H || L;
-    j(() => {
-      t == null || t(d(r));
-    }, []), j(() => {
-      var p;
-      const e = d(r), s = typeof r == "object" ? r == null ? void 0 : r.toISOString() : r;
-      ((p = new Date(Date.parse(s))) == null ? void 0 : p.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && (t == null || t(e)), n(e);
+    ...o
+  }, E) => {
+    const b = o == null ? void 0 : o.timeIntervals, u = (e) => Y(e, b), [H, d] = A(u(r)), O = Q(), k = E || O;
+    S(() => {
+      t == null || t(u(r));
+    }, []), S(() => {
+      var n;
+      const e = u(r), s = typeof r == "object" ? r == null ? void 0 : r.toISOString() : r;
+      ((n = new Date(Date.parse(s))) == null ? void 0 : n.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && (t == null || t(e)), d(e);
     }, [r]);
-    const O = (e) => {
+    const U = (e) => {
       var s;
-      ["Enter", "Escape"].includes(e.key) && ((s = S.current) == null || s.blur());
-    }, U = (e) => {
-      var s;
-      e.preventDefault(), (s = S.current) == null || s.blur(), n(null), t == null || t(null);
+      ["Enter", "Escape"].includes(e.key) && ((s = k.current) == null || s.blur());
     }, _ = (e) => {
+      var s;
+      e.preventDefault(), (s = k.current) == null || s.blur(), d(null), t == null || t(null);
+    }, q = (e) => {
       if (!e) {
-        n(null), t == null || t(null);
+        d(null), t == null || t(null);
         return;
       }
       const s = Array.isArray(e) ? e[0] : e;
       if (!s) {
-        n(null), t == null || t(null);
+        d(null), t == null || t(null);
         return;
       }
-      const p = d(s);
-      s.setHours(p.getHours(), p.getMinutes()), n(s), t == null || t(new Date(s));
+      const n = u(s);
+      s.setHours(n.getHours(), n.getMinutes()), d(s), t == null || t(new Date(s));
     };
     return (
       // type issue in react-datepicker (https://github.com/Hacker0x01/react-datepicker/issues/5391)
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       /* @__PURE__ */ l(
-        Q,
+        V,
         {
           autoComplete: "off",
           calendarClassName: "date-picker-popper",
           customInput: /* @__PURE__ */ l(
-            Y,
+            g,
             {
               autoFocus: x,
-              className: h("date-picker", N),
-              "data-testid": m["data-testid"],
+              className: P("date-picker", N),
+              "data-testid": o["data-testid"],
               disabled: T,
               icon: c,
               iconPlacement: I,
               inputMode: a ? "none" : "text",
               isClearable: !0,
-              onReset: U,
+              onReset: _,
               placeholder: D,
-              ref: S,
+              ref: k,
               size: R,
-              transparent: E
+              transparent: w
             }
           ),
           dateFormat: f,
           locale: y,
-          onChange: _,
-          onKeyDown: O,
-          popperContainer: V,
+          onChange: q,
+          onKeyDown: U,
+          popperContainer: W,
           renderCustomHeader: (e) => /* @__PURE__ */ l(
-            B,
+            L,
             {
               endYear: z,
-              isMonthYearPicker: u,
+              isMonthYearPicker: p,
               locale: y,
-              startYear: i,
+              startYear: m,
               ...e
             }
           ),
-          selected: A,
-          showMonthYearPicker: u,
-          useWeekdaysShort: o,
-          ...m
+          selected: H,
+          showMonthYearPicker: p,
+          useWeekdaysShort: i,
+          ...o,
+          wrapperClassName: P(o.wrapperClassName, "date-picker-wrapper", "field-input")
         }
       )
     );
   }
 );
-C.displayName = "DatePicker";
+h.displayName = "DatePicker";
 export {
-  C as DatePicker
+  h as DatePicker
 };

package/dist/DateTimePicker.js

@@ -10,11 +10,11 @@ const L = F(j), M = E(
     locale: p,
     onChange: s,
     size: D = "md",
-    transparent: k,
-    value: r = b,
+    transparent: n,
+    value: i = b,
     ...l
-  }, n) => {
-    const u = l == null ? void 0 : l.timeIntervals, i = (t) => I(t, u), [T, c] = P(i(r)), y = x(), R = n || y, m = (t) => {
+  }, k) => {
+    const u = l == null ? void 0 : l.timeIntervals, r = (t) => I(t, u), [T, c] = P(r(i)), y = x(), R = k || y, m = (t) => {
       if (!t) {
         c(null), s == null || s(null);
         return;
@@ -24,16 +24,16 @@ const L = F(j), M = E(
         c(null), s == null || s(null);
         return;
       }
-      const f = i(e);
+      const f = r(e);
       e.setHours(f.getHours(), f.getMinutes()), c(e), s == null || s(new Date(e));
     };
     return a(() => {
-      m(i(r));
+      m(r(i));
     }, []), a(() => {
       var e;
-      const t = i(r);
-      ((e = new Date(r)) == null ? void 0 : e.getTime()) - (t == null ? void 0 : t.getTime()) !== 0 && m(t), c(t);
-    }, [r]), /* @__PURE__ */ A("div", { className: L("date-time-picker"), children: N.map(o, (t, e) => H(t, {
+      const t = r(i);
+      ((e = new Date(i)) == null ? void 0 : e.getTime()) - (t == null ? void 0 : t.getTime()) !== 0 && m(t), c(t);
+    }, [i]), /* @__PURE__ */ A("div", { className: L("date-time-picker", "field-input"), children: N.map(o, (t, e) => H(t, {
       disabled: d,
       inputRef: e === 0 ? R : null,
       // give ref only to the DatePicker
@@ -42,7 +42,7 @@ const L = F(j), M = E(
       onChange: m,
       size: D,
       timeIntervals: u,
-      transparent: k,
+      transparent: n,
       value: T
     })) });
   }

package/dist/Field.css

@@ -1 +1 @@
-@layer components{._root_6ifwm_2{display:grid;grid-template-areas:"label" "input";width:100%}._root_6ifwm_2:has(._label_6ifwm_7):has(._hint_6ifwm_7){grid-template-areas:"label" "input" "hint"}._root_6ifwm_2:not(:has(._label_6ifwm_7)):has(._hint_6ifwm_7){grid-template-areas:"input" "hint"}._root_6ifwm_2:not(._inline_6ifwm_13) ._hint_6ifwm_7{margin-top:var(--components-dimensions-field-gap-assistive)}._root_6ifwm_2:not(._inline_6ifwm_13) ._label_6ifwm_7{margin-bottom:var(--components-dimensions-field-gap-label)}._inline_6ifwm_13{grid-template-areas:"input label";grid-template-columns:min-content 1fr;height:fit-content;grid-row-gap:var(--components-dimensions-field-gap-assistive);grid-column-gap:var(--components-dimensions-field-gap-label)}._inline_6ifwm_13:has(._label_6ifwm_7):has(._hint_6ifwm_7){grid-template-areas:"input label" ". hint"}._inline_6ifwm_13:not(:has(._label_6ifwm_7)):has(._hint_6ifwm_7){grid-template-areas:"input ." ". hint"}._label_6ifwm_7{grid-area:label}._input_6ifwm_35{display:flex;align-items:center;grid-area:input;width:100%}._hint_6ifwm_7{grid-area:hint}._visuallyHidden_6ifwm_44{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}}
+@layer components{._root_wx4cj_2{display:grid;grid-template-areas:"label" "input";width:100%}._root_wx4cj_2:has(._label_wx4cj_7):has(._hint_wx4cj_7){grid-template-areas:"label" "input" "hint"}._root_wx4cj_2:not(:has(._label_wx4cj_7)):has(._hint_wx4cj_7){grid-template-areas:"input" "hint"}._root_wx4cj_2:not(._inline_wx4cj_13) ._hint_wx4cj_7{margin-top:var(--components-dimensions-field-gap-assistive)}._root_wx4cj_2:not(._inline_wx4cj_13) ._label_wx4cj_7{margin-bottom:var(--components-dimensions-field-gap-label)}._root_wx4cj_2 .field-input{align-self:center;grid-area:input}._root_wx4cj_2 .field-input.date-picker-wrapper{justify-self:start}._inline_wx4cj_13{grid-template-areas:"input label";grid-template-columns:min-content 1fr;height:fit-content;grid-row-gap:var(--components-dimensions-field-gap-assistive);grid-column-gap:var(--components-dimensions-field-gap-label)}._inline_wx4cj_13:has(._label_wx4cj_7):has(._hint_wx4cj_7){grid-template-areas:"input label" ". hint"}._inline_wx4cj_13:not(:has(._label_wx4cj_7)):has(._hint_wx4cj_7){grid-template-areas:"input ." ". hint"}._label_wx4cj_7{grid-area:label}._hint_wx4cj_7{grid-area:hint}._visuallyHidden_wx4cj_45{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}}