@epam/ai-dial-ui-kit 0.16.0-dev.57 → 0.16.0-dev.59

package/dist/CHANGELOG.md

@@ -31,6 +31,14 @@ Versions match the git tags on the `development` branch.
 
 ### Added
 
+- **`Calendar`, `MarkdownEditor` (2.0) — `ariaDescribedBy`; `MarkdownEditor` — `invalid`** — a host rendering its own `ErrorText` under these controls had nothing to link it with: `Calendar` took `invalid` but no description, and `MarkdownEditor` took neither, so hosts patched the DOM. `Calendar` sets `aria-describedby` on the focusable control — the masked input in `time` mode, which also gets `aria-invalid`, and the popover trigger otherwise. `MarkdownEditor` sets `aria-describedby` and `aria-invalid` on its textarea, and `invalid` draws the card border in the error colour. Reported from pg-ai-chat. Additive.
+
+- **`StateScreen` (2.0) — `announce`** — wraps the screen in a `LiveRegion` of the given politeness, for a state that replaces content the user was working in (a load error, a crash), so hosts no longer wrap it in their own `role="alert"` div. Omitted, the screen renders exactly as before. Reported from pg-ai-chat. Additive.
+
+- **`Notification` (2.0) — `closeAriaLabel`** — the close button was always named "Close notification", so a localised host could not use `closable`. Defaults to the old text, as `Popup` and `BottomSheet` already do. Reported from pg-ai-chat. Additive.
+
+- **`Steps` (2.0) — `Step.disabled`** — blocks entering a step regardless of the statuses before it; the button is disabled and drawn with the 2.0 disable tokens. Reported from pg-ai-chat. Additive.
+
 - **`Dropdown` (2.0) — `overlayRole` (`DropdownOverlayRole.Menu` / `Dialog` / `None`), `overlayAriaLabel`, `overlayAriaLabelledBy`, `returnFocus`** — the floating wrapper was always `role="menu"`, so a `renderOverlay` panel that is not a menu — a usage-limits dialog, an announcements region — sat inside a menu, which is invalid ARIA. `overlayRole={DropdownOverlayRole.Dialog}` renders `role="dialog"` with `aria-haspopup="dialog"` on the trigger, named by `overlayAriaLabelledBy`, `overlayAriaLabel` or, failing both, the trigger; `DropdownOverlayRole.None` renders a role-less wrapper and drops `aria-haspopup`, keeping `aria-expanded` / `aria-controls`, for content that brings its own role. Arrow-key navigation between options now runs for `Menu` only, so a dialog's own text field or listbox keeps its arrow keys. The role applies to `renderOverlay` only; the `items` list stays a menu. Closing the overlay — Escape, a chosen item, the close button — already returned focus to the trigger; `returnFocus={false}` now opts out. The default, `Menu`, renders exactly as before. ai-dial-chat's `UsageLimitsControl` and `AnnouncementsPopover` needed a non-menu panel. Additive.
 
 - **`ToggleChip` (2.0)** — a chip that switches one option on and off on its own, for a row of independent toggles such as the tools a model may call. A native `<button aria-pressed>` drawn as the `TagAppearance.Selectable` filter chip — no fill until on, the accent-alpha fill and a semibold label once on — with `icon` before a `ReactNode` `label`, so a caller can add trailing ON / OFF text; `isSelected` (default `false`) and `onToggle(next)`, named as on `ToggleIconButton`; `disabled` greys it out with the 2.0 disable tokens while keeping its state visible. It has no remove control. `FilterChips` picks one value and `Tag` is a `<span>` with a string label, so neither fit. The root carries `dial-kit-toggle-chip` (`DIAL_KIT_CLASS.toggleChip`). ai-dial-chat's `ToolsChips` hand-rolled these. Additive.

package/dist/MarkdownEditor-5Jq0NTTP.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),k=require("@uiw/react-md-editor"),f=require("./editors.cjs"),O=require("./icon-4D9xu6E_.cjs"),o=require("@tabler/icons-react");function p(n){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(s,r,a.get?a:{enumerable:!0,get:()=>n[r]})}}return s.default=n,Object.freeze(s)}const C=p(k),v=O.DIAL_ICON_SIZE.SM,t={size:v,stroke:O.DIAL_KIT_ICON_STROKE},i=(n,s)=>({...n,icon:s}),E=()=>{const{bold:n,code:s,divider:r,group:a,heading1:c,heading2:l,heading3:u,italic:m,link:I,orderedListCommand:x,quote:d,strikethrough:g,table:j,unorderedListCommand:b}=C;return[i(n,e.jsx(o.IconBold,{...t})),i(m,e.jsx(o.IconItalic,{...t})),i(g,e.jsx(o.IconStrikethrough,{...t})),r,a([c,l,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,i(b,e.jsx(o.IconList,{...t})),i(x,e.jsx(o.IconListNumbers,{...t})),r,i(d,e.jsx(o.IconQuote,{...t})),i(I,e.jsx(o.IconLink,{...t})),i(s,e.jsx(o.IconCode,{...t})),r,i(j,e.jsx(o.IconTable,{...t}))]},L=()=>{const{codeEdit:n,codeLive:s,codePreview:r,divider:a,fullscreen:c}=C;return[i(n,e.jsx(o.IconPencil,{...t})),i(s,e.jsx(o.IconLayoutColumns,{...t})),i(r,e.jsx(o.IconEye,{...t})),a,i(c,e.jsx(o.IconMaximize,{...t}))]},M=({value:n,onChange:s,height:r=300,theme:a=f.EditorThemes.light,className:c,placeholder:l,defaultPreview:u="edit",id:m,ariaLabel:I,ariaDescribedBy:x,invalid:d=!1,showDragbar:g=!0})=>{const j=h.useMemo(()=>E(),[]),b=h.useMemo(()=>L(),[]);return e.jsx("div",{"data-color-mode":a,className:O.mergeClasses("dial-kit-markdown-editor",d&&"dial-kit-markdown-editor-invalid",c),children:e.jsx(k,{value:n,onChange:_=>s?.(_||""),height:r,preview:u,visibleDragbar:g,commands:j,extraCommands:b,textareaProps:{placeholder:l,id:m,"aria-label":I,"aria-describedby":x,"aria-invalid":d||void 0}})})};exports.MarkdownEditor=M;

package/dist/components/New/Calendar/Calendar.js

@@ -1,43 +1,44 @@
-import { jsx as e, jsxs as d, Fragment as A } from "react/jsx-runtime";
-import { useFloating as X, autoUpdate as ee, offset as te, flip as ae, shift as le, useDismiss as ne, useRole as se, useInteractions as re, FloatingPortal as ie, FloatingFocusManager as oe, useClick as Ce } from "@floating-ui/react";
-import { IconChevronDown as De, IconClock as Ie } from "@tabler/icons-react";
-import { useId as Fe, useState as _, useMemo as P, useEffect as Le } from "react";
-import { Label as Se } from "../Label/Label.js";
-import { StaticIconButton as W } from "../IconButton/IconButtonWrappers.js";
-import { DIAL_KIT_ICON_STROKE as ce } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as de } from "../../../constants/icon.js";
-import { CalendarMode as F } from "../../../types/calendar.js";
-import { ElementSize as U } from "../../../types/size.js";
-import { useThemeScope as me } from "../ThemeScope/ThemeScope.js";
+import { jsx as e, jsxs as d, Fragment as B } from "react/jsx-runtime";
+import { useFloating as ee, autoUpdate as te, offset as ae, flip as le, shift as ne, useDismiss as se, useRole as re, useInteractions as ie, FloatingPortal as oe, FloatingFocusManager as ce, useClick as De } from "@floating-ui/react";
+import { IconChevronDown as Ie, IconClock as Fe } from "@tabler/icons-react";
+import { useId as Le, useState as _, useMemo as A, useEffect as Se } from "react";
+import { Label as Te } from "../Label/Label.js";
+import { StaticIconButton as U } from "../IconButton/IconButtonWrappers.js";
+import { DIAL_KIT_ICON_STROKE as de } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as me } from "../../../constants/icon.js";
+import { CalendarMode as L } from "../../../types/calendar.js";
+import { ElementSize as Y } from "../../../types/size.js";
+import { useThemeScope as pe } from "../ThemeScope/ThemeScope.js";
 import { mergeClasses as i } from "../../../utils/merge-classes.js";
-import { getTimezoneLabel as Te } from "../../../utils/timezone.js";
-import { DEFAULT_CALENDAR_LOCALE as Me, calendarModeDefaultPlaceholder as Oe, calendarFieldIconClassName as ke, calendarNavIcons as Y, calendarDaySelectedClassName as we, calendarDayTodayClassName as Pe, calendarDayOutsideClassName as Ae, calendarDayButtonBaseClassName as Ee, calendarIcon as _e, calendarFieldDisabledClassName as pe, calendarFieldInvalidClassName as fe, calendarFieldBaseClassName as ue, timePickerButtonClassName as Be, timePickerPopoverClassName as Re, calendarPopoverClassName as ze } from "./constants.js";
-import { getWeekdayShortLabels as $e, getWeekdayOptions as je, getMonthGrid as Ve, formatTimeLabel as E, formatMonthLabel as Ke, isSameDay as G, isDateOutOfRange as Z, formatDayAriaLabel as We, sanitizeTimeInput as Ue, isCompleteTimeString as Ye, setTimeOnDate as q, formatDateLabel as H } from "./utils.js";
-import { DIAL_KIT_CLASS as z } from "../../../constants/public-class-names.js";
-import { TimePickerPanel as Ge } from "./TimePickerPanel.js";
-const J = ({
+import { getTimezoneLabel as Me } from "../../../utils/timezone.js";
+import { DEFAULT_CALENDAR_LOCALE as Oe, calendarModeDefaultPlaceholder as ke, calendarFieldIconClassName as we, calendarNavIcons as G, calendarDaySelectedClassName as Pe, calendarDayTodayClassName as Ae, calendarDayOutsideClassName as Be, calendarDayButtonBaseClassName as Ee, calendarIcon as _e, calendarFieldDisabledClassName as fe, calendarFieldInvalidClassName as ue, calendarFieldBaseClassName as he, timePickerButtonClassName as Re, timePickerPopoverClassName as ze, calendarPopoverClassName as $e } from "./constants.js";
+import { getWeekdayShortLabels as je, getWeekdayOptions as Ve, getMonthGrid as Ke, formatTimeLabel as E, formatMonthLabel as We, isSameDay as Z, isDateOutOfRange as q, formatDayAriaLabel as Ue, sanitizeTimeInput as Ye, isCompleteTimeString as Ge, setTimeOnDate as H, formatDateLabel as J } from "./utils.js";
+import { DIAL_KIT_CLASS as $ } from "../../../constants/public-class-names.js";
+import { TimePickerPanel as Ze } from "./TimePickerPanel.js";
+const Q = ({
   id: m,
   disabled: l,
   invalid: g,
-  trigger: L,
+  trigger: S,
   panelClassName: r,
   fieldClassName: T,
   panel: N,
   labelledBy: C,
-  panelLabel: M
+  describedBy: D,
+  panelLabel: O
 }) => {
-  const b = me(), [v, p] = _(!1), { refs: n, floatingStyles: x, context: f } = X({
+  const b = pe(), [v, p] = _(!1), { refs: n, floatingStyles: y, context: f } = ee({
     open: v,
-    onOpenChange: (S) => p(l ? !1 : S),
+    onOpenChange: (M) => p(l ? !1 : M),
     placement: "bottom-start",
-    whileElementsMounted: ee,
-    middleware: [te(8), ae({ padding: 8 }), le({ padding: 8 })]
-  }), D = Ce(f, { enabled: !l }), h = ne(f), a = se(f, { role: "dialog" }), { getReferenceProps: O, getFloatingProps: o } = re([
-    D,
+    whileElementsMounted: te,
+    middleware: [ae(8), le({ padding: 8 }), ne({ padding: 8 })]
+  }), I = De(f, { enabled: !l }), h = se(f), a = re(f, { role: "dialog" }), { getReferenceProps: k, getFloatingProps: o } = ie([
+    I,
     h,
     a
   ]);
-  return /* @__PURE__ */ d(A, { children: [
+  return /* @__PURE__ */ d(B, { children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -48,20 +49,21 @@ const J = ({
         "aria-expanded": v,
         "aria-disabled": l,
         "aria-labelledby": C,
+        "aria-describedby": D,
         tabIndex: l ? -1 : 0,
         className: i(
-          ue,
+          he,
           "focus-visible:outline focus-visible:outline-focus",
-          g && fe,
-          l && pe,
+          g && ue,
+          l && fe,
           T
         ),
-        ...O(),
-        children: L
+        ...k(),
+        children: S
       }
     ),
-    v && /* @__PURE__ */ e(ie, { children: /* @__PURE__ */ e(
-      oe,
+    v && /* @__PURE__ */ e(oe, { children: /* @__PURE__ */ e(
+      ce,
       {
         context: f,
         modal: !1,
@@ -71,10 +73,10 @@ const J = ({
           "div",
           {
             ref: n.setFloating,
-            style: x,
-            "aria-label": M,
+            style: y,
+            "aria-label": O,
             className: i(
-              ze,
+              $e,
               b,
               r
             ),
@@ -85,31 +87,32 @@ const J = ({
       }
     ) })
   ] });
-}, Q = ({
+}, X = ({
   id: m,
   value: l,
   onChange: g,
-  onBlur: L,
+  onBlur: S,
   disabled: r,
   invalid: T,
   className: N,
   ariaLabel: C,
-  placeholder: M = "--:--",
+  describedBy: D,
+  placeholder: O = "--:--",
   timezoneLabel: b,
   timezoneLabelClassName: v,
   picker: p = !1
 }) => {
-  const [n, x] = _(l), [f, D] = _(!1), h = me(), { refs: a, floatingStyles: O, context: o } = X({
+  const [n, y] = _(l), [f, I] = _(!1), h = pe(), { refs: a, floatingStyles: k, context: o } = ee({
     open: f,
-    onOpenChange: (c) => D(r ? !1 : c),
+    onOpenChange: (c) => I(r ? !1 : c),
     placement: "bottom-start",
-    whileElementsMounted: ee,
-    middleware: [te(8), ae({ padding: 8 }), le({ padding: 8 })]
-  }), S = ne(o), B = se(o, { role: "dialog" }), { getFloatingProps: k } = re([S, B]);
-  Le(() => {
-    x(l);
+    whileElementsMounted: te,
+    middleware: [ae(8), le({ padding: 8 }), ne({ padding: 8 })]
+  }), M = se(o), R = re(o, { role: "dialog" }), { getFloatingProps: w } = ie([M, R]);
+  Se(() => {
+    y(l);
   }, [l]);
-  const w = /* @__PURE__ */ e(
+  const P = /* @__PURE__ */ e(
     "input",
     {
       id: m,
@@ -117,30 +120,32 @@ const J = ({
       inputMode: "numeric",
       autoComplete: "off",
       "aria-label": C,
-      placeholder: M,
+      "aria-describedby": D,
+      "aria-invalid": T || void 0,
+      placeholder: O,
       disabled: r,
       value: n,
       onChange: (c) => {
-        const u = Ue(c.target.value);
-        x(u), Ye(u) && g(u);
+        const u = Ye(c.target.value);
+        y(u), Ge(u) && g(u);
       },
-      onBlur: L,
+      onBlur: S,
       className: i(
-        ue,
-        T && fe,
-        r && pe,
+        he,
+        T && ue,
+        r && fe,
         p && "pe-12",
         N
       )
     }
   );
-  return !b && !p ? w : /* @__PURE__ */ d(
+  return !b && !p ? P : /* @__PURE__ */ d(
     "div",
     {
       ref: p ? a.setReference : void 0,
       className: "relative w-full",
       children: [
-        w,
+        P,
         b && /* @__PURE__ */ e(
           "span",
           {
@@ -152,7 +157,7 @@ const J = ({
             children: b
           }
         ),
-        p && /* @__PURE__ */ d(A, { children: [
+        p && /* @__PURE__ */ d(B, { children: [
           /* @__PURE__ */ e(
             "button",
             {
@@ -161,20 +166,20 @@ const J = ({
               "aria-haspopup": "dialog",
               "aria-expanded": f,
               disabled: r,
-              className: Be,
-              onClick: () => D((c) => !c),
+              className: Re,
+              onClick: () => I((c) => !c),
               children: /* @__PURE__ */ e(
-                Ie,
+                Fe,
                 {
-                  size: de.MD,
-                  stroke: ce,
+                  size: me.MD,
+                  stroke: de,
                   "aria-hidden": "true"
                 }
               )
             }
           ),
-          f && /* @__PURE__ */ e(ie, { children: /* @__PURE__ */ e(
-            oe,
+          f && /* @__PURE__ */ e(oe, { children: /* @__PURE__ */ e(
+            ce,
             {
               context: o,
               modal: !1,
@@ -184,19 +189,19 @@ const J = ({
                 "div",
                 {
                   ref: a.setFloating,
-                  style: O,
+                  style: k,
                   "aria-label": "Choose time",
                   className: i(
-                    Re,
+                    ze,
                     h
                   ),
-                  ...k(),
+                  ...w(),
                   children: /* @__PURE__ */ e(
-                    Ge,
+                    Ze,
                     {
                       value: n,
                       onSelect: (c, u) => {
-                        x(c), g(c), u && D(!1);
+                        y(c), g(c), u && I(!1);
                       }
                     }
                   )
@@ -208,47 +213,48 @@ const J = ({
       ]
     }
   );
-}, mt = ({
-  mode: m = F.Date,
+}, pt = ({
+  mode: m = L.Date,
   value: l,
   onChange: g,
-  onBlur: L,
+  onBlur: S,
   labelProps: r,
   placeholder: T,
   disabled: N = !1,
   invalid: C = !1,
-  id: M,
+  ariaDescribedBy: D,
+  id: O,
   className: b,
   minDate: v,
   maxDate: p,
-  locale: n = Me,
-  fieldClassName: x,
+  locale: n = Oe,
+  fieldClassName: y,
   showTimezone: f = !1,
-  showTimePicker: D = !0
+  showTimePicker: I = !0
 }) => {
-  const h = T ?? Oe[m], a = l instanceof Date ? l : null, O = Fe(), o = M ?? O, S = r?.id ?? `${o}-label`, B = !!r?.label, k = typeof r?.label == "string" ? r.label : void 0, w = B ? `${S} ${o}` : void 0, c = r ? /* @__PURE__ */ e(Se, { ...r, id: S, htmlFor: o }) : null, [u, he] = _(
+  const h = T ?? ke[m], a = l instanceof Date ? l : null, k = Le(), o = O ?? k, M = r?.id ?? `${o}-label`, R = !!r?.label, w = typeof r?.label == "string" ? r.label : void 0, P = R ? `${M} ${o}` : void 0, c = r ? /* @__PURE__ */ e(Te, { ...r, id: M, htmlFor: o }) : null, [u, ge] = _(
     () => a ?? /* @__PURE__ */ new Date()
-  ), ge = P(() => /* @__PURE__ */ new Date(), []), R = P(
-    () => f ? Te({ locale: n }) : null,
+  ), be = A(() => /* @__PURE__ */ new Date(), []), z = A(
+    () => f ? Me({ locale: n }) : null,
     [f, n]
-  ), be = P(
-    () => $e(n),
+  ), ye = A(
+    () => je(n),
     [n]
-  ), $ = P(() => je(n), [n]), xe = P(
-    () => Ve(u.getFullYear(), u.getMonth()),
+  ), j = A(() => Ve(n), [n]), xe = A(
+    () => Ke(u.getFullYear(), u.getMonth()),
     [u]
-  ), j = (s) => {
-    he(
+  ), V = (s) => {
+    ge(
       (t) => new Date(t.getFullYear(), t.getMonth() + s, 1)
     );
-  }, ye = (s, t) => {
-    if (Z(s, v, p)) return;
-    const I = m === F.DateTime && a ? q(s, E(a)) : s;
-    g?.(I), m === F.Date && t();
-  }, ve = (s) => {
-    g?.(q(a ?? /* @__PURE__ */ new Date(), s));
-  }, Ne = () => a ? m === F.DateTime ? `${H(a, n)}, ${E(a)}` : H(a, n) : h;
-  if (m === F.Time) {
+  }, ve = (s, t) => {
+    if (q(s, v, p)) return;
+    const F = m === L.DateTime && a ? H(s, E(a)) : s;
+    g?.(F), m === L.Date && t();
+  }, Ne = (s) => {
+    g?.(H(a ?? /* @__PURE__ */ new Date(), s));
+  }, Ce = () => a ? m === L.DateTime ? `${J(a, n)}, ${E(a)}` : J(a, n) : h;
+  if (m === L.Time) {
     const s = typeof l == "string" ? l : a ? E(a) : "";
     return /* @__PURE__ */ d(
       "div",
@@ -256,51 +262,53 @@ const J = ({
         className: i(
           "flex flex-col gap-y-3",
           b,
-          z.calendar
+          $.calendar
         ),
         children: [
           c,
           /* @__PURE__ */ e(
-            Q,
+            X,
             {
               id: o,
               value: s,
               onChange: (t) => g?.(t),
-              onBlur: L,
+              onBlur: S,
               disabled: N,
               invalid: C,
+              describedBy: D,
               placeholder: h,
-              className: x,
-              timezoneLabel: R,
-              picker: D
+              className: y,
+              timezoneLabel: z,
+              picker: I
             }
           )
         ]
       }
     );
   }
-  if (m === F.Weekday) {
-    const s = typeof l == "string" ? l : void 0, t = $.find((I) => I.value === s);
+  if (m === L.Weekday) {
+    const s = typeof l == "string" ? l : void 0, t = j.find((F) => F.value === s);
     return /* @__PURE__ */ d(
       "div",
       {
         className: i(
           "flex flex-col gap-y-3",
           b,
-          z.calendar
+          $.calendar
         ),
         children: [
           c,
           /* @__PURE__ */ e(
-            J,
+            Q,
             {
               id: o,
               disabled: N,
               invalid: C,
-              labelledBy: w,
-              panelLabel: k ?? h,
-              fieldClassName: x,
-              trigger: /* @__PURE__ */ d(A, { children: [
+              labelledBy: P,
+              describedBy: D,
+              panelLabel: w ?? h,
+              fieldClassName: y,
+              trigger: /* @__PURE__ */ d(B, { children: [
                 /* @__PURE__ */ e(
                   "span",
                   {
@@ -312,38 +320,38 @@ const J = ({
                   }
                 ),
                 /* @__PURE__ */ e(
-                  De,
+                  Ie,
                   {
-                    size: de.MD,
-                    stroke: ce,
+                    size: me.MD,
+                    stroke: de,
                     "aria-hidden": "true",
-                    className: ke
+                    className: we
                   }
                 )
               ] }),
-              panel: (I) => /* @__PURE__ */ e(
+              panel: (F) => /* @__PURE__ */ e(
                 "div",
                 {
                   role: "listbox",
-                  "aria-label": k ?? h,
+                  "aria-label": w ?? h,
                   className: "flex flex-col gap-0.5",
-                  children: $.map((y) => /* @__PURE__ */ e(
+                  children: j.map((x) => /* @__PURE__ */ e(
                     "button",
                     {
                       type: "button",
                       role: "option",
-                      "aria-selected": y.value === s,
+                      "aria-selected": x.value === s,
                       className: i(
                         "flex w-full items-center rounded-lg px-3 py-2 text-left dial-small-text text-primary hover:bg-control-accent-alpha-hover",
                         "focus-visible:outline focus-visible:outline-focus",
-                        y.value === s && "bg-control-accent-alpha-hover"
+                        x.value === s && "bg-control-accent-alpha-hover"
                       ),
                       onClick: () => {
-                        g?.(y.value), I();
+                        g?.(x.value), F();
                       },
-                      children: y.label
+                      children: x.label
                     },
-                    y.value
+                    x.value
                   ))
                 }
               )
@@ -359,20 +367,21 @@ const J = ({
       className: i(
         "flex flex-col gap-y-3",
         b,
-        z.calendar
+        $.calendar
       ),
       children: [
         c,
         /* @__PURE__ */ e(
-          J,
+          Q,
           {
             id: o,
             disabled: N,
             invalid: C,
-            labelledBy: w,
-            panelLabel: k ?? h,
-            fieldClassName: x,
-            trigger: /* @__PURE__ */ d(A, { children: [
+            labelledBy: P,
+            describedBy: D,
+            panelLabel: w ?? h,
+            fieldClassName: y,
+            trigger: /* @__PURE__ */ d(B, { children: [
               /* @__PURE__ */ e(
                 "span",
                 {
@@ -380,20 +389,20 @@ const J = ({
                     "truncate",
                     !a && "text-secondary"
                   ),
-                  children: Ne()
+                  children: Ce()
                 }
               ),
               _e
             ] }),
-            panel: (s) => /* @__PURE__ */ d(A, { children: [
+            panel: (s) => /* @__PURE__ */ d(B, { children: [
               /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ e(
-                  W,
+                  U,
                   {
                     "aria-label": "Previous month",
-                    icon: Y.prev,
-                    size: U.Small,
-                    onClick: () => j(-1)
+                    icon: G.prev,
+                    size: Y.Small,
+                    onClick: () => V(-1)
                   }
                 ),
                 /* @__PURE__ */ e(
@@ -401,21 +410,21 @@ const J = ({
                   {
                     className: "dial-small-semi-text text-primary",
                     "aria-live": "polite",
-                    children: Ke(u, n)
+                    children: We(u, n)
                   }
                 ),
                 /* @__PURE__ */ e(
-                  W,
+                  U,
                   {
                     "aria-label": "Next month",
-                    icon: Y.next,
-                    size: U.Small,
-                    onClick: () => j(1)
+                    icon: G.next,
+                    size: Y.Small,
+                    onClick: () => V(1)
                   }
                 )
               ] }),
               /* @__PURE__ */ d("div", { className: "grid grid-cols-7 gap-y-1 text-center", children: [
-                be.map((t) => /* @__PURE__ */ e(
+                ye.map((t) => /* @__PURE__ */ e(
                   "div",
                   {
                     "aria-hidden": "true",
@@ -425,43 +434,43 @@ const J = ({
                   t
                 )),
                 xe.map((t) => {
-                  const I = t.getMonth() !== u.getMonth(), y = G(t, a), V = G(t, ge), K = Z(t, v, p);
+                  const F = t.getMonth() !== u.getMonth(), x = Z(t, a), K = Z(t, be), W = q(t, v, p);
                   return /* @__PURE__ */ e(
                     "button",
                     {
                       type: "button",
-                      disabled: K,
-                      "aria-label": We(t, n),
-                      "aria-pressed": y,
-                      "aria-current": V ? "date" : void 0,
+                      disabled: W,
+                      "aria-label": Ue(t, n),
+                      "aria-pressed": x,
+                      "aria-current": K ? "date" : void 0,
                       className: i(
                         Ee,
-                        I && Ae,
-                        V && !y && Pe,
-                        y && we,
-                        K && "cursor-not-allowed opacity-40 hover:bg-transparent"
+                        F && Be,
+                        K && !x && Ae,
+                        x && Pe,
+                        W && "cursor-not-allowed opacity-40 hover:bg-transparent"
                       ),
-                      onClick: () => ye(t, s),
+                      onClick: () => ve(t, s),
                       children: t.getDate()
                     },
                     t.toISOString()
                   );
                 })
               ] }),
-              m === F.DateTime && /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-3 border-t border-secondary pt-3", children: [
+              m === L.DateTime && /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-3 border-t border-secondary pt-3", children: [
                 /* @__PURE__ */ e("span", { className: "dial-small-text text-primary", children: "Time" }),
                 /* @__PURE__ */ e(
-                  Q,
+                  X,
                   {
                     ariaLabel: "Time",
                     value: a ? E(a) : "",
-                    onChange: ve,
-                    onBlur: L,
+                    onChange: Ne,
+                    onBlur: S,
                     className: i(
-                      !R && "w-[120px]",
+                      !z && "w-[120px]",
                       "px-3 py-1.5"
                     ),
-                    timezoneLabel: R,
+                    timezoneLabel: z,
                     timezoneLabelClassName: "end-3 max-w-[60%]"
                   }
                 )
@@ -474,5 +483,5 @@ const J = ({
   );
 };
 export {
-  mt as Calendar
+  pt as Calendar
 };