@commercetools/nimbus 1.0.1 → 2.0.1-rc1

package/dist/chunks/date-range-picker-CkRgcwfm.es.js

@@ -0,0 +1,281 @@
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { createSlotRecipeContext as k } from "@chakra-ui/react";
+import { Close as V, CalendarMonth as z } from "@commercetools/nimbus-icons";
+import { $ as T, a as E } from "./DatePicker-Dn0LNd7V.es.js";
+import { $ as w, h as W } from "./Dialog-B2hCMJnM.es.js";
+import { $ as j } from "./Group-BBaUrRF9.es.js";
+import { useSlotRecipe as F } from "@chakra-ui/react/styled-system";
+import { g as A } from "./index-CtB71yr7.es.js";
+import { e as B } from "./extractStyleProps-DYXEhLtq.es.js";
+import { useContext as I, useRef as S, useEffect as G } from "react";
+import { Flex as x } from "@chakra-ui/react/flex";
+import { T as y } from "./text-BgiP8ZB6.es.js";
+import { T as P } from "./time-input-BUej1BjY.es.js";
+import { $ as C } from "./Button-CrgZzRm9.es.js";
+import { e as O, d as q } from "./utils-Cyja2WdR.es.js";
+import { d as H } from "./DateField-qGypjFaJ.es.js";
+import { R as L } from "./range-calendar-RBEpLQJb.es.js";
+import { D } from "./date-input-KVuRsFzs.es.js";
+import { I as R } from "./icon-button-9Ni8-hO7.es.js";
+const { withProvider: M, withContext: $ } = /* @__PURE__ */ k({
+  key: "dateRangePicker"
+}), N = /* @__PURE__ */ M("div", "root"), J = /* @__PURE__ */ $("div", "group"), K = /* @__PURE__ */ $("div", "trigger"), Q = /* @__PURE__ */ $("div", "popover"), U = /* @__PURE__ */ $("div", "calendar"), X = ({
+  hideTimeZone: i,
+  hourCycle: s
+}) => {
+  const e = I(T), { granularity: l, value: a } = e, o = S(null), d = S(a);
+  return l === "day" ? null : (G(() => {
+    let u;
+    if (a?.start && d.current?.start?.compare(a.start) !== 0 || a?.end && d.current?.end?.compare(a.end) !== 0) {
+      const c = o.current, m = document.activeElement;
+      c?.contains(m) && m?.getAttribute("role") === "spinbutton" || (u = setTimeout(() => {
+        if (c) {
+          const t = c.querySelector(
+            '[role="spinbutton"]'
+          );
+          t && t.focus();
+        }
+      }, 50));
+    }
+    return d.current = a, () => {
+      u && clearTimeout(u);
+    };
+  }, [a]), /* @__PURE__ */ p(
+    x,
+    {
+      ref: o,
+      borderTop: "solid-25",
+      borderColor: "neutral.3",
+      py: "300",
+      px: "400",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "200",
+      children: [
+        /* @__PURE__ */ p(x, { alignItems: "center", gap: "200", children: [
+          /* @__PURE__ */ n(
+            y,
+            {
+              textStyle: "xs",
+              fontWeight: "500",
+              color: "neutral.12",
+              minWidth: "fit-content",
+              children: "Start time"
+            }
+          ),
+          /* @__PURE__ */ n(
+            P,
+            {
+              slot: "startTimeInput",
+              variant: "ghost",
+              size: "sm",
+              hideTimeZone: i,
+              hourCycle: s
+            }
+          )
+        ] }),
+        /* @__PURE__ */ p(x, { alignItems: "center", gap: "200", children: [
+          /* @__PURE__ */ n(
+            y,
+            {
+              textStyle: "xs",
+              fontWeight: "500",
+              color: "neutral.12",
+              minWidth: "fit-content",
+              children: "End time"
+            }
+          ),
+          /* @__PURE__ */ n(
+            P,
+            {
+              slot: "endTimeInput",
+              variant: "ghost",
+              size: "sm",
+              hideTimeZone: i,
+              hourCycle: s
+            }
+          )
+        ] })
+      ]
+    }
+  ));
+}, Y = ({
+  children: i
+}) => {
+  const s = O(C) || {}, e = I(T), l = (t) => t?.day && t?.month && t?.year, a = !e?.value || !l(e.value.start) || !l(e.value.end), { granularity: o } = e, d = e?.value?.start && "hour" in e.value.start ? e.value.start : null, u = e?.value?.end && "hour" in e.value.end ? e.value.end : null, g = s?.isDisabled, c = (t) => {
+    const r = t === "start" ? "Start" : "End";
+    switch (o) {
+      case "hour":
+        return `${r} time (hour)`;
+      case "minute":
+        return `${r} time (hour and minute)`;
+      case "second":
+        return `${r} time (hour, minute, and second)`;
+      default:
+        return `${r} time`;
+    }
+  }, m = {
+    /** toggles the calendar popover */
+    calendarToggle: {
+      ...s,
+      onPress: (t) => {
+        const r = document?.activeElement;
+        r && r.blur(), s.onPress?.(t);
+      }
+    },
+    /** Clear button that displays when there's a value in each segment - hidden from both visual and screen readers when there's no value */
+    clear: {
+      // Clear both start and end values
+      onPress: () => e?.setValue(null),
+      "aria-label": "Clear input value",
+      isDisabled: g,
+      // Hide the button when there's no value
+      style: a ? { display: "none" } : void 0,
+      "aria-hidden": a ? !0 : void 0
+    }
+  }, b = {
+    startTimeInput: {
+      value: d,
+      onChange: (t) => {
+        if (t !== null && e?.value?.start) {
+          const r = e.value, f = r.start, h = r.end;
+          if (f && h) {
+            const v = f.set({
+              hour: t.hour,
+              minute: t.minute || 0,
+              second: t.second || 0,
+              millisecond: t.millisecond || 0
+            });
+            e.setValue({
+              start: v,
+              end: h
+            });
+          }
+        }
+      },
+      granularity: o === "day" ? void 0 : o,
+      "aria-label": c("start")
+    },
+    endTimeInput: {
+      value: u,
+      onChange: (t) => {
+        if (t !== null && e?.value?.end) {
+          const r = e.value, f = r.start, h = r.end;
+          if (f && h) {
+            const v = h.set({
+              hour: t.hour,
+              minute: t.minute || 0,
+              second: t.second || 0,
+              millisecond: t.millisecond || 0
+            });
+            e.setValue({
+              start: f,
+              end: v
+            });
+          }
+        }
+      },
+      granularity: o === "day" ? void 0 : o,
+      "aria-label": c("end")
+    }
+  };
+  return /* @__PURE__ */ n(
+    q,
+    {
+      values: [
+        [
+          C,
+          {
+            slots: m
+          }
+        ],
+        [H, { slots: b }]
+      ],
+      children: i
+    }
+  );
+}, Z = (i) => {
+  const { granularity: s = "day", hideTimeZone: e, hourCycle: l } = i, a = F({ recipe: A }), [o, d] = a.splitVariantProps(i), [u, g] = B(d), { size: c = "md" } = o, m = c === "md" ? "xs" : "2xs", b = s === "day" ? i.shouldCloseOnSelect : !1;
+  return /* @__PURE__ */ n(N, { ...o, ...u, asChild: !0, children: /* @__PURE__ */ n(
+    E,
+    {
+      ...g,
+      shouldCloseOnSelect: b,
+      children: /* @__PURE__ */ p(Y, { children: [
+        /* @__PURE__ */ n(J, { asChild: !0, children: /* @__PURE__ */ p(j, { children: [
+          /* @__PURE__ */ n(
+            D,
+            {
+              slot: "start",
+              size: i.size,
+              variant: "plain",
+              width: "auto",
+              hideTimeZone: e,
+              hourCycle: l
+            }
+          ),
+          /* @__PURE__ */ n(
+            y,
+            {
+              as: "span",
+              px: "150",
+              color: "neutral.11",
+              userSelect: "none",
+              "aria-hidden": "true",
+              slot: null,
+              children: "–"
+            }
+          ),
+          /* @__PURE__ */ n(
+            D,
+            {
+              slot: "end",
+              size: i.size,
+              variant: "plain",
+              width: "auto",
+              hideTimeZone: e,
+              hourCycle: l
+            }
+          ),
+          /* @__PURE__ */ p(K, { children: [
+            /* @__PURE__ */ n(
+              R,
+              {
+                tone: "primary",
+                variant: "ghost",
+                size: m,
+                slot: "clear",
+                children: /* @__PURE__ */ n(V, {})
+              }
+            ),
+            /* @__PURE__ */ n(
+              R,
+              {
+                tone: "primary",
+                variant: "ghost",
+                size: m,
+                slot: "calendarToggle",
+                children: /* @__PURE__ */ n(z, {})
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ n(Q, { asChild: !0, children: /* @__PURE__ */ n(w, { placement: "bottom end", children: /* @__PURE__ */ p(W, { children: [
+          /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(L, {}) }),
+          /* @__PURE__ */ n(
+            X,
+            {
+              hideTimeZone: e,
+              hourCycle: l
+            }
+          )
+        ] }) }) })
+      ] })
+    }
+  ) });
+};
+Z.displayName = "DateRangePicker";
+export {
+  Z as D
+};
+//# sourceMappingURL=date-range-picker-CkRgcwfm.es.js.map

package/dist/chunks/date-range-picker-CkRgcwfm.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker-CkRgcwfm.es.js","sources":["../../src/components/date-range-picker/date-range-picker.slots.tsx","../../src/components/date-range-picker/components/date-range-picker.time-input.tsx","../../src/components/date-range-picker/components/date-range-picker.custom-context.tsx","../../src/components/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import {\n  type HTMLChakraProps,\n  createSlotRecipeContext,\n} from \"@chakra-ui/react\";\nimport type { DateRangePickerRootSlotProps } from \"./date-range-picker.types\";\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"dateRangePicker\",\n});\n\n/**\n * Root component that provides the styling context for the DateRangePicker component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const DateRangePickerRootSlot = withProvider<\n  HTMLDivElement,\n  DateRangePickerRootSlotProps\n>(\"div\", \"root\");\n\n/**\n * Slot component for the input group containing the DateInput and trigger button.\n */\nexport const DateRangePickerGroupSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"group\");\n\n/**\n * Slot component for the trigger button that opens the calendar popover.\n */\nexport const DateRangePickerTriggerSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"trigger\");\n\n/**\n * Slot component for the popover container.\n */\nexport const DateRangePickerPopoverSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"popover\");\n\n/**\n * Slot component for the calendar container within the popover.\n */\nexport const DateRangePickerCalendarSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"calendar\");\n\n/**\n * Slot component for the calendar header.\n */\nexport const DateRangePickerCalendarHeaderSlot = withContext<\n  HTMLElement,\n  HTMLChakraProps<\"header\">\n>(\"header\", \"calendarHeader\");\n\n/**\n * Slot component for the calendar grid.\n */\nexport const DateRangePickerCalendarGridSlot = withContext<\n  HTMLTableElement,\n  HTMLChakraProps<\"table\">\n>(\"table\", \"calendarGrid\");\n\n/**\n * Slot component for individual calendar cells.\n */\nexport const DateRangePickerCalendarCellSlot = withContext<\n  HTMLTableCellElement,\n  HTMLChakraProps<\"td\">\n>(\"td\", \"calendarCell\");\n","import { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { DateRangePickerStateContext } from \"react-aria-components\";\nimport type { DateRangePickerTimeInputProps } from \"../date-range-picker.types\";\n\nexport const DateRangePickerTimeInput = ({\n  hideTimeZone,\n  hourCycle,\n}: DateRangePickerTimeInputProps) => {\n  const dateRangePickerState = useContext(DateRangePickerStateContext);\n  const { granularity, value } = dateRangePickerState!;\n  const timeInputRef = useRef<HTMLDivElement>(null);\n  const previousValueRef = useRef(value);\n\n  // do not show up to the party if you're not invited\n  if (granularity === \"day\") {\n    return null;\n  }\n\n  // Focus the time input when date range changes (user selects dates from calendar)\n  useEffect(() => {\n    let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n    // Check if date range changed by comparing start and end dates\n    const hasValueChanged =\n      (value?.start &&\n        previousValueRef.current?.start?.compare(value.start) !== 0) ||\n      (value?.end && previousValueRef.current?.end?.compare(value.end) !== 0);\n\n    if (hasValueChanged) {\n      // Only auto-focus if no time input segment currently has focus\n      // This prevents stealing focus during user interaction with time segments\n      const container = timeInputRef.current;\n      const activeElement = document.activeElement;\n      const hasTimeSegmentFocus =\n        container?.contains(activeElement) &&\n        activeElement?.getAttribute(\"role\") === \"spinbutton\";\n\n      if (!hasTimeSegmentFocus) {\n        // Small delay to ensure the DOM is ready\n        timeoutId = setTimeout(() => {\n          // Find the first focusable segment within the time input container\n          if (container) {\n            const firstSegment = container.querySelector(\n              '[role=\"spinbutton\"]'\n            ) as HTMLElement;\n\n            if (firstSegment) {\n              firstSegment.focus();\n            }\n          }\n        }, 50);\n      }\n    }\n\n    previousValueRef.current = value;\n\n    // Cleanup timeout on effect re-run or unmount to prevent memory leaks\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [value]);\n\n  return (\n    <Flex\n      ref={timeInputRef}\n      borderTop=\"solid-25\"\n      borderColor=\"neutral.3\"\n      py=\"300\"\n      px=\"400\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      gap=\"200\"\n    >\n      {/* Start DateInput with separate label */}\n      <Flex alignItems=\"center\" gap=\"200\">\n        {/* TODO: translate hardcoded string */}\n        <Text\n          textStyle=\"xs\"\n          fontWeight=\"500\"\n          color=\"neutral.12\"\n          minWidth=\"fit-content\"\n        >\n          Start time\n        </Text>\n        <TimeInput\n          slot=\"startTimeInput\"\n          variant=\"ghost\"\n          size=\"sm\"\n          hideTimeZone={hideTimeZone}\n          hourCycle={hourCycle}\n        />\n      </Flex>\n\n      {/* End DateInput with separate label */}\n      <Flex alignItems=\"center\" gap=\"200\">\n        {/* TODO: translate hardcoded string */}\n        <Text\n          textStyle=\"xs\"\n          fontWeight=\"500\"\n          color=\"neutral.12\"\n          minWidth=\"fit-content\"\n        >\n          End time\n        </Text>\n        <TimeInput\n          slot=\"endTimeInput\"\n          variant=\"ghost\"\n          size=\"sm\"\n          hideTimeZone={hideTimeZone}\n          hourCycle={hourCycle}\n        />\n      </Flex>\n    </Flex>\n  );\n};\n","import { useContext, type ReactNode } from \"react\";\nimport {\n  Provider,\n  ButtonContext,\n  DateRangePickerStateContext,\n  TimeFieldContext,\n  useSlottedContext,\n} from \"react-aria-components\";\nimport type { PressEvent, TimeValue } from \"react-aria\";\n\nexport const DateRangePickerCustomContext = ({\n  children,\n}: {\n  children: ReactNode;\n}) => {\n  const buttonContext = useSlottedContext(ButtonContext) || {};\n  const dateRangePickerState = useContext(DateRangePickerStateContext);\n\n  // Check if all 6 segments (start: day, month, year; end: day, month, year) have values\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const hasCompleteRangeDate = (date: any) =>\n    date?.day && date?.month && date?.year;\n\n  const incompleteValue =\n    !dateRangePickerState?.value ||\n    !hasCompleteRangeDate(dateRangePickerState.value.start) ||\n    !hasCompleteRangeDate(dateRangePickerState.value.end);\n\n  const { granularity } = dateRangePickerState!;\n\n  // Extract time values from start and end dates separately\n  const startTimeValue =\n    dateRangePickerState?.value?.start &&\n    \"hour\" in dateRangePickerState.value.start\n      ? dateRangePickerState.value.start\n      : null;\n  const endTimeValue =\n    dateRangePickerState?.value?.end && \"hour\" in dateRangePickerState.value.end\n      ? dateRangePickerState.value.end\n      : null;\n\n  // Try to get disabled state from the button context\n  const isDateRangePickerDisabled = buttonContext?.isDisabled;\n\n  // Generate default aria-label based on granularity if not provided\n  const getDefaultTimeInputAriaLabel = (type: \"start\" | \"end\") => {\n    const prefix = type === \"start\" ? \"Start\" : \"End\";\n    switch (granularity) {\n      case \"hour\":\n        return `${prefix} time (hour)`;\n      case \"minute\":\n        return `${prefix} time (hour and minute)`;\n      case \"second\":\n        return `${prefix} time (hour, minute, and second)`;\n      default:\n        return `${prefix} time`;\n    }\n  };\n\n  /**\n   * Button slots\n   * ================================\n   */\n  const buttonSlots = {\n    /** toggles the calendar popover */\n    calendarToggle: {\n      ...buttonContext,\n      onPress: (event: PressEvent) => {\n        // Ensure any active input (e.g., date picker segment) loses focus\n        // because blurring the input will close the popover if it's open (or was just opened)\n        const activeElement = document?.activeElement as HTMLElement | null;\n\n        if (activeElement) {\n          activeElement.blur();\n        }\n\n        buttonContext.onPress?.(event);\n      },\n    },\n    /** Clear button that displays when there's a value in each segment - hidden from both visual and screen readers when there's no value */\n    clear: {\n      // Clear both start and end values\n      onPress: () => dateRangePickerState?.setValue(null),\n      \"aria-label\": \"Clear input value\",\n      isDisabled: isDateRangePickerDisabled,\n      // Hide the button when there's no value\n      style: incompleteValue ? { display: \"none\" } : undefined,\n      \"aria-hidden\": incompleteValue ? true : undefined,\n    },\n  };\n\n  /**\n   * TimeInput slots\n   * ================================\n   */\n\n  // Separate time input slots for start and end times\n  const timeInputSlots = {\n    startTimeInput: {\n      value: startTimeValue,\n      onChange: (value: TimeValue | null) => {\n        if (value !== null && dateRangePickerState?.value?.start) {\n          // Update the start date with the new time\n          const currentValue = dateRangePickerState.value;\n          const startDate = currentValue.start;\n          const endDate = currentValue.end;\n          if (startDate && endDate) {\n            const newStartDate = startDate.set({\n              hour: value.hour,\n              minute: value.minute || 0,\n              second: value.second || 0,\n              millisecond: value.millisecond || 0,\n            });\n\n            dateRangePickerState.setValue({\n              start: newStartDate,\n              end: endDate,\n            });\n          }\n        }\n      },\n      granularity: granularity === \"day\" ? undefined : granularity,\n      \"aria-label\": getDefaultTimeInputAriaLabel(\"start\"),\n    },\n    endTimeInput: {\n      value: endTimeValue,\n      onChange: (value: TimeValue | null) => {\n        if (value !== null && dateRangePickerState?.value?.end) {\n          // Update the end date with the new time\n          const currentValue = dateRangePickerState.value;\n          const startDate = currentValue.start;\n          const endDate = currentValue.end;\n          if (startDate && endDate) {\n            const newEndDate = endDate.set({\n              hour: value.hour,\n              minute: value.minute || 0,\n              second: value.second || 0,\n              millisecond: value.millisecond || 0,\n            });\n\n            dateRangePickerState.setValue({\n              start: startDate,\n              end: newEndDate,\n            });\n          }\n        }\n      },\n      granularity: granularity === \"day\" ? undefined : granularity,\n      \"aria-label\": getDefaultTimeInputAriaLabel(\"end\"),\n    },\n  };\n\n  return (\n    <Provider\n      values={[\n        [\n          ButtonContext,\n          {\n            slots: buttonSlots,\n          },\n        ],\n        [TimeFieldContext, { slots: timeInputSlots }],\n      ]}\n    >\n      {children}\n    </Provider>\n  );\n};\n","import {\n  DateRangePickerRootSlot,\n  DateRangePickerGroupSlot,\n  DateRangePickerTriggerSlot,\n  DateRangePickerPopoverSlot,\n  DateRangePickerCalendarSlot,\n} from \"./date-range-picker.slots\";\n\nimport { CalendarMonth, Close } from \"@commercetools/nimbus-icons\";\n\nimport {\n  DateRangePicker as ReactAriaDateRangePicker,\n  Group,\n  Popover,\n  Dialog,\n} from \"react-aria-components\";\nimport { useSlotRecipe } from \"@chakra-ui/react/styled-system\";\nimport { dateRangePickerSlotRecipe } from \"./date-range-picker.recipe\";\nimport type { DateRangePickerProps } from \"./date-range-picker.types\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\nimport { DateInput, RangeCalendar, IconButton, Text } from \"@/components\";\nimport { DateRangePickerTimeInput } from \"./components/date-range-picker.time-input\";\nimport { DateRangePickerCustomContext } from \"./components/date-range-picker.custom-context\";\n\n/**\n * DateRangePicker\n * ============================================================\n * Combines a DateInput with a RangeCalendar popover for date range selection.\n * Users can either type a date range directly or select from the calendar.\n */\nexport const DateRangePicker = (props: DateRangePickerProps) => {\n  // Forward hideTimeZone and hourCycle to child components (footer time inputs)\n  const { granularity = \"day\", hideTimeZone, hourCycle } = props;\n  const recipe = useSlotRecipe({ recipe: dateRangePickerSlotRecipe });\n  const [recipeProps, remainingProps] = recipe.splitVariantProps(props);\n\n  const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n  // Extract size and variant from recipe props to pass to DateInputs\n  const { size = \"md\" } = recipeProps;\n\n  // the size of the buttons overlaying the input\n  const overlayButtonSize = size === \"md\" ? \"xs\" : \"2xs\";\n\n  // When granularity is \"day\", use the prop value (defaults to true if not provided)\n  // For other granularities (time-based), force to false so users can set both date and time\n  const shouldCloseOnSelect =\n    granularity === \"day\" ? props.shouldCloseOnSelect : false;\n\n  return (\n    <DateRangePickerRootSlot {...recipeProps} {...styleProps} asChild>\n      <ReactAriaDateRangePicker\n        {...otherProps}\n        shouldCloseOnSelect={shouldCloseOnSelect}\n      >\n        <DateRangePickerCustomContext>\n          <DateRangePickerGroupSlot asChild>\n            <Group>\n              <DateInput\n                slot=\"start\"\n                size={props.size}\n                variant=\"plain\"\n                width=\"auto\"\n                hideTimeZone={hideTimeZone}\n                hourCycle={hourCycle}\n              />\n              <Text\n                as=\"span\"\n                px=\"150\"\n                color=\"neutral.11\"\n                userSelect=\"none\"\n                aria-hidden=\"true\"\n                slot={null}\n              >\n                –\n              </Text>\n              <DateInput\n                slot=\"end\"\n                size={props.size}\n                variant=\"plain\"\n                width=\"auto\"\n                hideTimeZone={hideTimeZone}\n                hourCycle={hourCycle}\n              />\n              <DateRangePickerTriggerSlot>\n                {/* @ts-expect-error react aria is adding the aria-label prop */}\n                <IconButton\n                  tone=\"primary\"\n                  variant=\"ghost\"\n                  size={overlayButtonSize}\n                  slot=\"clear\"\n                >\n                  <Close />\n                </IconButton>\n                {/* @ts-expect-error react aria is adding the aria-label prop */}\n                <IconButton\n                  tone=\"primary\"\n                  variant=\"ghost\"\n                  size={overlayButtonSize}\n                  slot=\"calendarToggle\"\n                >\n                  <CalendarMonth />\n                </IconButton>\n              </DateRangePickerTriggerSlot>\n            </Group>\n          </DateRangePickerGroupSlot>\n          <DateRangePickerPopoverSlot asChild>\n            <Popover placement=\"bottom end\">\n              <Dialog>\n                <DateRangePickerCalendarSlot>\n                  <RangeCalendar />\n                </DateRangePickerCalendarSlot>\n                <DateRangePickerTimeInput\n                  hideTimeZone={hideTimeZone}\n                  hourCycle={hourCycle}\n                />\n              </Dialog>\n            </Popover>\n          </DateRangePickerPopoverSlot>\n        </DateRangePickerCustomContext>\n      </ReactAriaDateRangePicker>\n    </DateRangePickerRootSlot>\n  );\n};\n\nDateRangePicker.displayName = \"DateRangePicker\";\n"],"names":["withProvider","withContext","createSlotRecipeContext","DateRangePickerRootSlot","DateRangePickerGroupSlot","DateRangePickerTriggerSlot","DateRangePickerPopoverSlot","DateRangePickerCalendarSlot","DateRangePickerTimeInput","hideTimeZone","hourCycle","dateRangePickerState","useContext","DateRangePickerStateContext","granularity","value","timeInputRef","useRef","previousValueRef","useEffect","timeoutId","container","activeElement","firstSegment","jsxs","Flex","jsx","Text","TimeInput","DateRangePickerCustomContext","children","buttonContext","useSlottedContext","ButtonContext","hasCompleteRangeDate","date","incompleteValue","startTimeValue","endTimeValue","isDateRangePickerDisabled","getDefaultTimeInputAriaLabel","type","prefix","buttonSlots","event","timeInputSlots","currentValue","startDate","endDate","newStartDate","newEndDate","Provider","TimeFieldContext","DateRangePicker","props","recipe","useSlotRecipe","dateRangePickerSlotRecipe","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","size","overlayButtonSize","shouldCloseOnSelect","ReactAriaDateRangePicker","Group","DateInput","IconButton","Close","CalendarMonth","Popover","Dialog","RangeCalendar"],"mappings":"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"}

package/dist/chunks/date-range-picker-iENzosfN.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),k=require("@chakra-ui/react"),P=require("@commercetools/nimbus-icons"),y=require("./DatePicker-DCjrqg4Q.cjs.js"),S=require("./Dialog-XGXh4NXU.cjs.js"),V=require("./Group-BX1EpD9E.cjs.js"),z=require("@chakra-ui/react/styled-system"),E=require("./index-CRFg4Mhx.cjs.js"),w=require("./extractStyleProps-Dk3fpLyQ.cjs.js"),p=require("react"),v=require("@chakra-ui/react/flex"),j=require("./text-CCW9kDT_.cjs.js"),D=require("./time-input-zXykDANk.cjs.js"),R=require("./Button-CFZnLKVR.cjs.js"),C=require("./utils-BHdR5Nww.cjs.js"),F=require("./DateField-CDTSjqvQ.cjs.js"),B=require("./range-calendar-_dZfAsdG.cjs.js"),I=require("./date-input-DvOM0DLT.cjs.js"),T=require("./icon-button-vWPrT-bR.cjs.js"),{withProvider:W,withContext:b}=k.createSlotRecipeContext({key:"dateRangePicker"}),G=W("div","root"),A=b("div","group"),O=b("div","trigger"),H=b("div","popover"),L=b("div","calendar"),M=({hideTimeZone:o,hourCycle:i})=>{const t=p.useContext(y.$06d5b8ec9ee5d538$export$80d7ae1f804790be),{granularity:c,value:a}=t,s=p.useRef(null),u=p.useRef(a);return c==="day"?null:(p.useEffect(()=>{let d;if(a?.start&&u.current?.start?.compare(a.start)!==0||a?.end&&u.current?.end?.compare(a.end)!==0){const l=s.current,m=document.activeElement;l?.contains(m)&&m?.getAttribute("role")==="spinbutton"||(d=setTimeout(()=>{if(l){const n=l.querySelector('[role="spinbutton"]');n&&n.focus()}},50))}return u.current=a,()=>{d&&clearTimeout(d)}},[a]),e.jsxs(v.Flex,{ref:s,borderTop:"solid-25",borderColor:"neutral.3",py:"300",px:"400",alignItems:"center",justifyContent:"center",gap:"200",children:[e.jsxs(v.Flex,{alignItems:"center",gap:"200",children:[e.jsx(j.Text,{textStyle:"xs",fontWeight:"500",color:"neutral.12",minWidth:"fit-content",children:"Start time"}),e.jsx(D.TimeInput,{slot:"startTimeInput",variant:"ghost",size:"sm",hideTimeZone:o,hourCycle:i})]}),e.jsxs(v.Flex,{alignItems:"center",gap:"200",children:[e.jsx(j.Text,{textStyle:"xs",fontWeight:"500",color:"neutral.12",minWidth:"fit-content",children:"End time"}),e.jsx(D.TimeInput,{slot:"endTimeInput",variant:"ghost",size:"sm",hideTimeZone:o,hourCycle:i})]})]}))},N=({children:o})=>{const i=C.$64fa3d84918910a7$export$fabf2dc03a41866e(R.$d2b4bc8c273e7be6$export$24d547caef80ccd1)||{},t=p.useContext(y.$06d5b8ec9ee5d538$export$80d7ae1f804790be),c=n=>n?.day&&n?.month&&n?.year,a=!t?.value||!c(t.value.start)||!c(t.value.end),{granularity:s}=t,u=t?.value?.start&&"hour"in t.value.start?t.value.start:null,d=t?.value?.end&&"hour"in t.value.end?t.value.end:null,g=i?.isDisabled,l=n=>{const r=n==="start"?"Start":"End";switch(s){case"hour":return`${r} time (hour)`;case"minute":return`${r} time (hour and minute)`;case"second":return`${r} time (hour, minute, and second)`;default:return`${r} time`}},m={calendarToggle:{...i,onPress:n=>{const r=document?.activeElement;r&&r.blur(),i.onPress?.(n)}},clear:{onPress:()=>t?.setValue(null),"aria-label":"Clear input value",isDisabled:g,style:a?{display:"none"}:void 0,"aria-hidden":a?!0:void 0}},f={startTimeInput:{value:u,onChange:n=>{if(n!==null&&t?.value?.start){const r=t.value,x=r.start,h=r.end;if(x&&h){const $=x.set({hour:n.hour,minute:n.minute||0,second:n.second||0,millisecond:n.millisecond||0});t.setValue({start:$,end:h})}}},granularity:s==="day"?void 0:s,"aria-label":l("start")},endTimeInput:{value:d,onChange:n=>{if(n!==null&&t?.value?.end){const r=t.value,x=r.start,h=r.end;if(x&&h){const $=h.set({hour:n.hour,minute:n.minute||0,second:n.second||0,millisecond:n.millisecond||0});t.setValue({start:x,end:$})}}},granularity:s==="day"?void 0:s,"aria-label":l("end")}};return e.jsx(C.$64fa3d84918910a7$export$2881499e37b75b9a,{values:[[R.$d2b4bc8c273e7be6$export$24d547caef80ccd1,{slots:m}],[F.$40825cdb76e74f70$export$8e17ddc448e87c1e,{slots:f}]],children:o})},q=o=>{const{granularity:i="day",hideTimeZone:t,hourCycle:c}=o,a=z.useSlotRecipe({recipe:E.dateRangePickerSlotRecipe}),[s,u]=a.splitVariantProps(o),[d,g]=w.extractStyleProps(u),{size:l="md"}=s,m=l==="md"?"xs":"2xs",f=i==="day"?o.shouldCloseOnSelect:!1;return e.jsx(G,{...s,...d,asChild:!0,children:e.jsx(y.$06d5b8ec9ee5d538$export$17334619f3ac2224,{...g,shouldCloseOnSelect:f,children:e.jsxs(N,{children:[e.jsx(A,{asChild:!0,children:e.jsxs(V.$a049562f99e7db0e$export$eb2fcfdbd7ba97d4,{children:[e.jsx(I.DateInput,{slot:"start",size:o.size,variant:"plain",width:"auto",hideTimeZone:t,hourCycle:c}),e.jsx(j.Text,{as:"span",px:"150",color:"neutral.11",userSelect:"none","aria-hidden":"true",slot:null,children:"–"}),e.jsx(I.DateInput,{slot:"end",size:o.size,variant:"plain",width:"auto",hideTimeZone:t,hourCycle:c}),e.jsxs(O,{children:[e.jsx(T.IconButton,{tone:"primary",variant:"ghost",size:m,slot:"clear",children:e.jsx(P.Close,{})}),e.jsx(T.IconButton,{tone:"primary",variant:"ghost",size:m,slot:"calendarToggle",children:e.jsx(P.CalendarMonth,{})})]})]})}),e.jsx(H,{asChild:!0,children:e.jsx(S.$07b14b47974efb58$export$5b6b19405a83ff9d,{placement:"bottom end",children:e.jsxs(S.$de32f1b87079253c$export$3ddf2d174ce01153,{children:[e.jsx(L,{children:e.jsx(B.RangeCalendar,{})}),e.jsx(M,{hideTimeZone:t,hourCycle:c})]})})})]})})})};q.displayName="DateRangePicker";exports.DateRangePicker=q;
+//# sourceMappingURL=date-range-picker-iENzosfN.cjs.js.map

package/dist/chunks/date-range-picker-iENzosfN.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker-iENzosfN.cjs.js","sources":["../../src/components/date-range-picker/date-range-picker.slots.tsx","../../src/components/date-range-picker/components/date-range-picker.time-input.tsx","../../src/components/date-range-picker/components/date-range-picker.custom-context.tsx","../../src/components/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import {\n  type HTMLChakraProps,\n  createSlotRecipeContext,\n} from \"@chakra-ui/react\";\nimport type { DateRangePickerRootSlotProps } from \"./date-range-picker.types\";\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"dateRangePicker\",\n});\n\n/**\n * Root component that provides the styling context for the DateRangePicker component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const DateRangePickerRootSlot = withProvider<\n  HTMLDivElement,\n  DateRangePickerRootSlotProps\n>(\"div\", \"root\");\n\n/**\n * Slot component for the input group containing the DateInput and trigger button.\n */\nexport const DateRangePickerGroupSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"group\");\n\n/**\n * Slot component for the trigger button that opens the calendar popover.\n */\nexport const DateRangePickerTriggerSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"trigger\");\n\n/**\n * Slot component for the popover container.\n */\nexport const DateRangePickerPopoverSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"popover\");\n\n/**\n * Slot component for the calendar container within the popover.\n */\nexport const DateRangePickerCalendarSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"calendar\");\n\n/**\n * Slot component for the calendar header.\n */\nexport const DateRangePickerCalendarHeaderSlot = withContext<\n  HTMLElement,\n  HTMLChakraProps<\"header\">\n>(\"header\", \"calendarHeader\");\n\n/**\n * Slot component for the calendar grid.\n */\nexport const DateRangePickerCalendarGridSlot = withContext<\n  HTMLTableElement,\n  HTMLChakraProps<\"table\">\n>(\"table\", \"calendarGrid\");\n\n/**\n * Slot component for individual calendar cells.\n */\nexport const DateRangePickerCalendarCellSlot = withContext<\n  HTMLTableCellElement,\n  HTMLChakraProps<\"td\">\n>(\"td\", \"calendarCell\");\n","import { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { DateRangePickerStateContext } from \"react-aria-components\";\nimport type { DateRangePickerTimeInputProps } from \"../date-range-picker.types\";\n\nexport const DateRangePickerTimeInput = ({\n  hideTimeZone,\n  hourCycle,\n}: DateRangePickerTimeInputProps) => {\n  const dateRangePickerState = useContext(DateRangePickerStateContext);\n  const { granularity, value } = dateRangePickerState!;\n  const timeInputRef = useRef<HTMLDivElement>(null);\n  const previousValueRef = useRef(value);\n\n  // do not show up to the party if you're not invited\n  if (granularity === \"day\") {\n    return null;\n  }\n\n  // Focus the time input when date range changes (user selects dates from calendar)\n  useEffect(() => {\n    let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n    // Check if date range changed by comparing start and end dates\n    const hasValueChanged =\n      (value?.start &&\n        previousValueRef.current?.start?.compare(value.start) !== 0) ||\n      (value?.end && previousValueRef.current?.end?.compare(value.end) !== 0);\n\n    if (hasValueChanged) {\n      // Only auto-focus if no time input segment currently has focus\n      // This prevents stealing focus during user interaction with time segments\n      const container = timeInputRef.current;\n      const activeElement = document.activeElement;\n      const hasTimeSegmentFocus =\n        container?.contains(activeElement) &&\n        activeElement?.getAttribute(\"role\") === \"spinbutton\";\n\n      if (!hasTimeSegmentFocus) {\n        // Small delay to ensure the DOM is ready\n        timeoutId = setTimeout(() => {\n          // Find the first focusable segment within the time input container\n          if (container) {\n            const firstSegment = container.querySelector(\n              '[role=\"spinbutton\"]'\n            ) as HTMLElement;\n\n            if (firstSegment) {\n              firstSegment.focus();\n            }\n          }\n        }, 50);\n      }\n    }\n\n    previousValueRef.current = value;\n\n    // Cleanup timeout on effect re-run or unmount to prevent memory leaks\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [value]);\n\n  return (\n    <Flex\n      ref={timeInputRef}\n      borderTop=\"solid-25\"\n      borderColor=\"neutral.3\"\n      py=\"300\"\n      px=\"400\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      gap=\"200\"\n    >\n      {/* Start DateInput with separate label */}\n      <Flex alignItems=\"center\" gap=\"200\">\n        {/* TODO: translate hardcoded string */}\n        <Text\n          textStyle=\"xs\"\n          fontWeight=\"500\"\n          color=\"neutral.12\"\n          minWidth=\"fit-content\"\n        >\n          Start time\n        </Text>\n        <TimeInput\n          slot=\"startTimeInput\"\n          variant=\"ghost\"\n          size=\"sm\"\n          hideTimeZone={hideTimeZone}\n          hourCycle={hourCycle}\n        />\n      </Flex>\n\n      {/* End DateInput with separate label */}\n      <Flex alignItems=\"center\" gap=\"200\">\n        {/* TODO: translate hardcoded string */}\n        <Text\n          textStyle=\"xs\"\n          fontWeight=\"500\"\n          color=\"neutral.12\"\n          minWidth=\"fit-content\"\n        >\n          End time\n        </Text>\n        <TimeInput\n          slot=\"endTimeInput\"\n          variant=\"ghost\"\n          size=\"sm\"\n          hideTimeZone={hideTimeZone}\n          hourCycle={hourCycle}\n        />\n      </Flex>\n    </Flex>\n  );\n};\n","import { useContext, type ReactNode } from \"react\";\nimport {\n  Provider,\n  ButtonContext,\n  DateRangePickerStateContext,\n  TimeFieldContext,\n  useSlottedContext,\n} from \"react-aria-components\";\nimport type { PressEvent, TimeValue } from \"react-aria\";\n\nexport const DateRangePickerCustomContext = ({\n  children,\n}: {\n  children: ReactNode;\n}) => {\n  const buttonContext = useSlottedContext(ButtonContext) || {};\n  const dateRangePickerState = useContext(DateRangePickerStateContext);\n\n  // Check if all 6 segments (start: day, month, year; end: day, month, year) have values\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const hasCompleteRangeDate = (date: any) =>\n    date?.day && date?.month && date?.year;\n\n  const incompleteValue =\n    !dateRangePickerState?.value ||\n    !hasCompleteRangeDate(dateRangePickerState.value.start) ||\n    !hasCompleteRangeDate(dateRangePickerState.value.end);\n\n  const { granularity } = dateRangePickerState!;\n\n  // Extract time values from start and end dates separately\n  const startTimeValue =\n    dateRangePickerState?.value?.start &&\n    \"hour\" in dateRangePickerState.value.start\n      ? dateRangePickerState.value.start\n      : null;\n  const endTimeValue =\n    dateRangePickerState?.value?.end && \"hour\" in dateRangePickerState.value.end\n      ? dateRangePickerState.value.end\n      : null;\n\n  // Try to get disabled state from the button context\n  const isDateRangePickerDisabled = buttonContext?.isDisabled;\n\n  // Generate default aria-label based on granularity if not provided\n  const getDefaultTimeInputAriaLabel = (type: \"start\" | \"end\") => {\n    const prefix = type === \"start\" ? \"Start\" : \"End\";\n    switch (granularity) {\n      case \"hour\":\n        return `${prefix} time (hour)`;\n      case \"minute\":\n        return `${prefix} time (hour and minute)`;\n      case \"second\":\n        return `${prefix} time (hour, minute, and second)`;\n      default:\n        return `${prefix} time`;\n    }\n  };\n\n  /**\n   * Button slots\n   * ================================\n   */\n  const buttonSlots = {\n    /** toggles the calendar popover */\n    calendarToggle: {\n      ...buttonContext,\n      onPress: (event: PressEvent) => {\n        // Ensure any active input (e.g., date picker segment) loses focus\n        // because blurring the input will close the popover if it's open (or was just opened)\n        const activeElement = document?.activeElement as HTMLElement | null;\n\n        if (activeElement) {\n          activeElement.blur();\n        }\n\n        buttonContext.onPress?.(event);\n      },\n    },\n    /** Clear button that displays when there's a value in each segment - hidden from both visual and screen readers when there's no value */\n    clear: {\n      // Clear both start and end values\n      onPress: () => dateRangePickerState?.setValue(null),\n      \"aria-label\": \"Clear input value\",\n      isDisabled: isDateRangePickerDisabled,\n      // Hide the button when there's no value\n      style: incompleteValue ? { display: \"none\" } : undefined,\n      \"aria-hidden\": incompleteValue ? true : undefined,\n    },\n  };\n\n  /**\n   * TimeInput slots\n   * ================================\n   */\n\n  // Separate time input slots for start and end times\n  const timeInputSlots = {\n    startTimeInput: {\n      value: startTimeValue,\n      onChange: (value: TimeValue | null) => {\n        if (value !== null && dateRangePickerState?.value?.start) {\n          // Update the start date with the new time\n          const currentValue = dateRangePickerState.value;\n          const startDate = currentValue.start;\n          const endDate = currentValue.end;\n          if (startDate && endDate) {\n            const newStartDate = startDate.set({\n              hour: value.hour,\n              minute: value.minute || 0,\n              second: value.second || 0,\n              millisecond: value.millisecond || 0,\n            });\n\n            dateRangePickerState.setValue({\n              start: newStartDate,\n              end: endDate,\n            });\n          }\n        }\n      },\n      granularity: granularity === \"day\" ? undefined : granularity,\n      \"aria-label\": getDefaultTimeInputAriaLabel(\"start\"),\n    },\n    endTimeInput: {\n      value: endTimeValue,\n      onChange: (value: TimeValue | null) => {\n        if (value !== null && dateRangePickerState?.value?.end) {\n          // Update the end date with the new time\n          const currentValue = dateRangePickerState.value;\n          const startDate = currentValue.start;\n          const endDate = currentValue.end;\n          if (startDate && endDate) {\n            const newEndDate = endDate.set({\n              hour: value.hour,\n              minute: value.minute || 0,\n              second: value.second || 0,\n              millisecond: value.millisecond || 0,\n            });\n\n            dateRangePickerState.setValue({\n              start: startDate,\n              end: newEndDate,\n            });\n          }\n        }\n      },\n      granularity: granularity === \"day\" ? undefined : granularity,\n      \"aria-label\": getDefaultTimeInputAriaLabel(\"end\"),\n    },\n  };\n\n  return (\n    <Provider\n      values={[\n        [\n          ButtonContext,\n          {\n            slots: buttonSlots,\n          },\n        ],\n        [TimeFieldContext, { slots: timeInputSlots }],\n      ]}\n    >\n      {children}\n    </Provider>\n  );\n};\n","import {\n  DateRangePickerRootSlot,\n  DateRangePickerGroupSlot,\n  DateRangePickerTriggerSlot,\n  DateRangePickerPopoverSlot,\n  DateRangePickerCalendarSlot,\n} from \"./date-range-picker.slots\";\n\nimport { CalendarMonth, Close } from \"@commercetools/nimbus-icons\";\n\nimport {\n  DateRangePicker as ReactAriaDateRangePicker,\n  Group,\n  Popover,\n  Dialog,\n} from \"react-aria-components\";\nimport { useSlotRecipe } from \"@chakra-ui/react/styled-system\";\nimport { dateRangePickerSlotRecipe } from \"./date-range-picker.recipe\";\nimport type { DateRangePickerProps } from \"./date-range-picker.types\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\nimport { DateInput, RangeCalendar, IconButton, Text } from \"@/components\";\nimport { DateRangePickerTimeInput } from \"./components/date-range-picker.time-input\";\nimport { DateRangePickerCustomContext } from \"./components/date-range-picker.custom-context\";\n\n/**\n * DateRangePicker\n * ============================================================\n * Combines a DateInput with a RangeCalendar popover for date range selection.\n * Users can either type a date range directly or select from the calendar.\n */\nexport const DateRangePicker = (props: DateRangePickerProps) => {\n  // Forward hideTimeZone and hourCycle to child components (footer time inputs)\n  const { granularity = \"day\", hideTimeZone, hourCycle } = props;\n  const recipe = useSlotRecipe({ recipe: dateRangePickerSlotRecipe });\n  const [recipeProps, remainingProps] = recipe.splitVariantProps(props);\n\n  const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n  // Extract size and variant from recipe props to pass to DateInputs\n  const { size = \"md\" } = recipeProps;\n\n  // the size of the buttons overlaying the input\n  const overlayButtonSize = size === \"md\" ? \"xs\" : \"2xs\";\n\n  // When granularity is \"day\", use the prop value (defaults to true if not provided)\n  // For other granularities (time-based), force to false so users can set both date and time\n  const shouldCloseOnSelect =\n    granularity === \"day\" ? props.shouldCloseOnSelect : false;\n\n  return (\n    <DateRangePickerRootSlot {...recipeProps} {...styleProps} asChild>\n      <ReactAriaDateRangePicker\n        {...otherProps}\n        shouldCloseOnSelect={shouldCloseOnSelect}\n      >\n        <DateRangePickerCustomContext>\n          <DateRangePickerGroupSlot asChild>\n            <Group>\n              <DateInput\n                slot=\"start\"\n                size={props.size}\n                variant=\"plain\"\n                width=\"auto\"\n                hideTimeZone={hideTimeZone}\n                hourCycle={hourCycle}\n              />\n              <Text\n                as=\"span\"\n                px=\"150\"\n                color=\"neutral.11\"\n                userSelect=\"none\"\n                aria-hidden=\"true\"\n                slot={null}\n              >\n                –\n              </Text>\n              <DateInput\n                slot=\"end\"\n                size={props.size}\n                variant=\"plain\"\n                width=\"auto\"\n                hideTimeZone={hideTimeZone}\n                hourCycle={hourCycle}\n              />\n              <DateRangePickerTriggerSlot>\n                {/* @ts-expect-error react aria is adding the aria-label prop */}\n                <IconButton\n                  tone=\"primary\"\n                  variant=\"ghost\"\n                  size={overlayButtonSize}\n                  slot=\"clear\"\n                >\n                  <Close />\n                </IconButton>\n                {/* @ts-expect-error react aria is adding the aria-label prop */}\n                <IconButton\n                  tone=\"primary\"\n                  variant=\"ghost\"\n                  size={overlayButtonSize}\n                  slot=\"calendarToggle\"\n                >\n                  <CalendarMonth />\n                </IconButton>\n              </DateRangePickerTriggerSlot>\n            </Group>\n          </DateRangePickerGroupSlot>\n          <DateRangePickerPopoverSlot asChild>\n            <Popover placement=\"bottom end\">\n              <Dialog>\n                <DateRangePickerCalendarSlot>\n                  <RangeCalendar />\n                </DateRangePickerCalendarSlot>\n                <DateRangePickerTimeInput\n                  hideTimeZone={hideTimeZone}\n                  hourCycle={hourCycle}\n                />\n              </Dialog>\n            </Popover>\n          </DateRangePickerPopoverSlot>\n        </DateRangePickerCustomContext>\n      </ReactAriaDateRangePicker>\n    </DateRangePickerRootSlot>\n  );\n};\n\nDateRangePicker.displayName = \"DateRangePicker\";\n"],"names":["withProvider","withContext","createSlotRecipeContext","DateRangePickerRootSlot","DateRangePickerGroupSlot","DateRangePickerTriggerSlot","DateRangePickerPopoverSlot","DateRangePickerCalendarSlot","DateRangePickerTimeInput","hideTimeZone","hourCycle","dateRangePickerState","useContext","DateRangePickerStateContext","granularity","value","timeInputRef","useRef","previousValueRef","useEffect","timeoutId","container","activeElement","firstSegment","jsxs","Flex","jsx","Text","TimeInput","DateRangePickerCustomContext","children","buttonContext","useSlottedContext","ButtonContext","hasCompleteRangeDate","date","incompleteValue","startTimeValue","endTimeValue","isDateRangePickerDisabled","getDefaultTimeInputAriaLabel","type","prefix","buttonSlots","event","timeInputSlots","currentValue","startDate","endDate","newStartDate","newEndDate","Provider","TimeFieldContext","DateRangePicker","props","recipe","useSlotRecipe","dateRangePickerSlotRecipe","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","size","overlayButtonSize","shouldCloseOnSelect","ReactAriaDateRangePicker","Group","DateInput","IconButton","Close","CalendarMonth","Popover","Dialog","RangeCalendar"],"mappings":"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"}

package/dist/chunks/dialog-CKwC3dk3.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const o=require("./dialog.title-DOPP47Zy.cjs.js"),e={Root:o.DialogRoot,Trigger:o.DialogTrigger,Content:o.DialogContent,Header:o.DialogHeader,Body:o.DialogBody,Footer:o.DialogFooter,Title:o.DialogTitle,CloseTrigger:o.DialogCloseTrigger};exports.Dialog=e;
+//# sourceMappingURL=dialog-CKwC3dk3.cjs.js.map

package/dist/chunks/dialog-CKwC3dk3.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-CKwC3dk3.cjs.js","sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import { DialogRoot } from \"./components/dialog.root\";\nimport { DialogTrigger } from \"./components/dialog.trigger\";\nimport { DialogContent } from \"./components/dialog.content\";\nimport { DialogHeader } from \"./components/dialog.header\";\nimport { DialogBody } from \"./components/dialog.body\";\nimport { DialogFooter } from \"./components/dialog.footer\";\nimport { DialogTitle } from \"./components/dialog.title\";\nimport { DialogCloseTrigger } from \"./components/dialog.close-trigger\";\n\n/**\n * Dialog\n * ============================================================\n * A foundational dialog component for overlays that require user attention.\n * Built with React Aria Components for accessibility and WCAG 2.1 AA compliance.\n *\n * Features:\n * - Controlled and uncontrolled modes\n * - Customizable placement, size, and animations\n * - Focus management and keyboard navigation\n * - Click-outside and Escape key dismissal\n * - Portal rendering support\n * - Backdrop overlay with animations\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>\n *   <Dialog.Content size=\"md\" placement=\"center\">\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseTrigger>×</Dialog.CloseTrigger>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       Dialog content goes here\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <button>Cancel</button>\n *       <button>Save</button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n *\n * @see https://nimbus-documentation.vercel.app/components/feedback/dialog\n */\nexport const Dialog = {\n  /**\n   * # Dialog.Root\n   *\n   * The root component that provides context and state management for the dialog.\n   * Uses React Aria's DialogTrigger for accessibility and keyboard interaction.\n   *\n   * This component must wrap all dialog parts (Trigger, Content, etc.) and provides\n   * the dialog open/close state and variant styling context.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Root>\n   *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>\n   *   <Dialog.Content>\n   *     <Dialog.Header>\n   *       <Dialog.Title>Dialog Title</Dialog.Title>\n   *     </Dialog.Header>\n   *     <Dialog.Body>Dialog content</Dialog.Body>\n   *   </Dialog.Content>\n   * </Dialog.Root>\n   * ```\n   */\n  Root: DialogRoot,\n  /**\n   * # Dialog.Trigger\n   *\n   * The trigger element that opens the dialog when activated.\n   * Uses React Aria's Button for accessibility and keyboard support.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Root>\n   *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>\n   *   <Dialog.Content>...</Dialog.Content>\n   * </Dialog.Root>\n   * ```\n   */\n  Trigger: DialogTrigger,\n  /**\n   * # Dialog.Content\n   *\n   * The main dialog content container that wraps React Aria's Modal and Dialog.\n   * Handles portalling, backdrop, positioning, and content styling.\n   *\n   * This component creates the dialog overlay, positions the content, and provides\n   * accessibility features like focus management and keyboard dismissal.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Root>\n   *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>\n   *   <Dialog.Content size=\"md\" placement=\"center\">\n   *     <Dialog.Header>\n   *       <Dialog.Title>Title</Dialog.Title>\n   *     </Dialog.Header>\n   *     <Dialog.Body>Content</Dialog.Body>\n   *     <Dialog.Footer>Actions</Dialog.Footer>\n   *   </Dialog.Content>\n   * </Dialog.Root>\n   * ```\n   */\n  Content: DialogContent,\n  /**\n   * # Dialog.Header\n   *\n   * The header section of the dialog content.\n   * Typically contains the title and close button.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Content>\n   *   <Dialog.Header>\n   *     <Dialog.Title>Dialog Title</Dialog.Title>\n   *     <Dialog.CloseTrigger />\n   *   </Dialog.Header>\n   *   <Dialog.Body>...</Dialog.Body>\n   * </Dialog.Content>\n   * ```\n   */\n  Header: DialogHeader,\n  /**\n   * # Dialog.Body\n   *\n   * The main body content section of the dialog.\n   * Contains the primary dialog content and handles overflow/scrolling.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Content>\n   *   <Dialog.Header>...</Dialog.Header>\n   *   <Dialog.Body>\n   *     <p>This is the main content of the dialog.</p>\n   *   </Dialog.Body>\n   *   <Dialog.Footer>...</Dialog.Footer>\n   * </Dialog.Content>\n   * ```\n   */\n  Body: DialogBody,\n  /**\n   * # Dialog.Footer\n   *\n   * The footer section of the dialog, typically containing action buttons.\n   * Provides consistent spacing and alignment for dialog actions.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Content>\n   *   <Dialog.Header>...</Dialog.Header>\n   *   <Dialog.Body>...</Dialog.Body>\n   *   <Dialog.Footer>\n   *     <Button variant=\"outline\">Cancel</Button>\n   *     <Button>Confirm</Button>\n   *   </Dialog.Footer>\n   * </Dialog.Content>\n   * ```\n   */\n  Footer: DialogFooter,\n  /**\n   * # Dialog.Title\n   *\n   * The accessible title element for the dialog.\n   * Uses React Aria's Heading for proper accessibility and screen reader support.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Content>\n   *   <Dialog.Header>\n   *     <Dialog.Title>Confirm Action</Dialog.Title>\n   *   </Dialog.Header>\n   *   <Dialog.Body>...</Dialog.Body>\n   * </Dialog.Content>\n   * ```\n   */\n  Title: DialogTitle,\n  /**\n   * # Dialog.CloseTrigger\n   *\n   * A button that closes the dialog when activated.\n   * Displays an IconButton with a close (X) icon by default.\n   *\n   * The component automatically handles the close behavior through React Aria's\n   * context, so no additional onPress handler is needed.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Root>\n   *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>\n   *   <Dialog.Content>\n   *     <Dialog.Header>\n   *       <Dialog.Title>Title</Dialog.Title>\n   *       <Dialog.CloseTrigger aria-label=\"Close dialog\" />\n   *     </Dialog.Header>\n   *     <Dialog.Body>Content</Dialog.Body>\n   *   </Dialog.Content>\n   * </Dialog.Root>\n   * ```\n   */\n  CloseTrigger: DialogCloseTrigger,\n};\n\n// Internal exports for react-docgen\nexport {\n  DialogRoot as _DialogRoot,\n  DialogTrigger as _DialogTrigger,\n  DialogContent as _DialogContent,\n  DialogHeader as _DialogHeader,\n  DialogBody as _DialogBody,\n  DialogFooter as _DialogFooter,\n  DialogTitle as _DialogTitle,\n  DialogCloseTrigger as _DialogCloseTrigger,\n};\n"],"names":["Dialog","DialogRoot","DialogTrigger","DialogContent","DialogHeader","DialogBody","DialogFooter","DialogTitle","DialogCloseTrigger"],"mappings":"+DA6CaA,EAAS,CAuBpB,KAAMC,EAAAA,WAeN,QAASC,EAAAA,cAwBT,QAASC,EAAAA,cAkBT,OAAQC,EAAAA,aAkBR,KAAMC,EAAAA,WAmBN,OAAQC,EAAAA,aAiBR,MAAOC,EAAAA,YAwBP,aAAcC,EAAAA,kBAChB"}

package/dist/chunks/dialog-gTeRW6GK.es.js

@@ -0,0 +1,165 @@
+import { g as o, f as a, e, d as g, c as i, b as r, a as l, D as t } from "./dialog.title-B9cEUH8w.es.js";
+const D = {
+  /**
+   * # Dialog.Root
+   *
+   * The root component that provides context and state management for the dialog.
+   * Uses React Aria's DialogTrigger for accessibility and keyboard interaction.
+   *
+   * This component must wrap all dialog parts (Trigger, Content, etc.) and provides
+   * the dialog open/close state and variant styling context.
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+   *   <Dialog.Content>
+   *     <Dialog.Header>
+   *       <Dialog.Title>Dialog Title</Dialog.Title>
+   *     </Dialog.Header>
+   *     <Dialog.Body>Dialog content</Dialog.Body>
+   *   </Dialog.Content>
+   * </Dialog.Root>
+   * ```
+   */
+  Root: t,
+  /**
+   * # Dialog.Trigger
+   *
+   * The trigger element that opens the dialog when activated.
+   * Uses React Aria's Button for accessibility and keyboard support.
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+   *   <Dialog.Content>...</Dialog.Content>
+   * </Dialog.Root>
+   * ```
+   */
+  Trigger: l,
+  /**
+   * # Dialog.Content
+   *
+   * The main dialog content container that wraps React Aria's Modal and Dialog.
+   * Handles portalling, backdrop, positioning, and content styling.
+   *
+   * This component creates the dialog overlay, positions the content, and provides
+   * accessibility features like focus management and keyboard dismissal.
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+   *   <Dialog.Content size="md" placement="center">
+   *     <Dialog.Header>
+   *       <Dialog.Title>Title</Dialog.Title>
+   *     </Dialog.Header>
+   *     <Dialog.Body>Content</Dialog.Body>
+   *     <Dialog.Footer>Actions</Dialog.Footer>
+   *   </Dialog.Content>
+   * </Dialog.Root>
+   * ```
+   */
+  Content: r,
+  /**
+   * # Dialog.Header
+   *
+   * The header section of the dialog content.
+   * Typically contains the title and close button.
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Content>
+   *   <Dialog.Header>
+   *     <Dialog.Title>Dialog Title</Dialog.Title>
+   *     <Dialog.CloseTrigger />
+   *   </Dialog.Header>
+   *   <Dialog.Body>...</Dialog.Body>
+   * </Dialog.Content>
+   * ```
+   */
+  Header: i,
+  /**
+   * # Dialog.Body
+   *
+   * The main body content section of the dialog.
+   * Contains the primary dialog content and handles overflow/scrolling.
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Content>
+   *   <Dialog.Header>...</Dialog.Header>
+   *   <Dialog.Body>
+   *     <p>This is the main content of the dialog.</p>
+   *   </Dialog.Body>
+   *   <Dialog.Footer>...</Dialog.Footer>
+   * </Dialog.Content>
+   * ```
+   */
+  Body: g,
+  /**
+   * # Dialog.Footer
+   *
+   * The footer section of the dialog, typically containing action buttons.
+   * Provides consistent spacing and alignment for dialog actions.
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Content>
+   *   <Dialog.Header>...</Dialog.Header>
+   *   <Dialog.Body>...</Dialog.Body>
+   *   <Dialog.Footer>
+   *     <Button variant="outline">Cancel</Button>
+   *     <Button>Confirm</Button>
+   *   </Dialog.Footer>
+   * </Dialog.Content>
+   * ```
+   */
+  Footer: e,
+  /**
+   * # Dialog.Title
+   *
+   * The accessible title element for the dialog.
+   * Uses React Aria's Heading for proper accessibility and screen reader support.
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Content>
+   *   <Dialog.Header>
+   *     <Dialog.Title>Confirm Action</Dialog.Title>
+   *   </Dialog.Header>
+   *   <Dialog.Body>...</Dialog.Body>
+   * </Dialog.Content>
+   * ```
+   */
+  Title: a,
+  /**
+   * # Dialog.CloseTrigger
+   *
+   * A button that closes the dialog when activated.
+   * Displays an IconButton with a close (X) icon by default.
+   *
+   * The component automatically handles the close behavior through React Aria's
+   * context, so no additional onPress handler is needed.
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+   *   <Dialog.Content>
+   *     <Dialog.Header>
+   *       <Dialog.Title>Title</Dialog.Title>
+   *       <Dialog.CloseTrigger aria-label="Close dialog" />
+   *     </Dialog.Header>
+   *     <Dialog.Body>Content</Dialog.Body>
+   *   </Dialog.Content>
+   * </Dialog.Root>
+   * ```
+   */
+  CloseTrigger: o
+};
+export {
+  D
+};
+//# sourceMappingURL=dialog-gTeRW6GK.es.js.map

package/dist/chunks/dialog-gTeRW6GK.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-gTeRW6GK.es.js","sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import { DialogRoot } from \"./components/dialog.root\";\nimport { DialogTrigger } from \"./components/dialog.trigger\";\nimport { DialogContent } from \"./components/dialog.content\";\nimport { DialogHeader } from \"./components/dialog.header\";\nimport { DialogBody } from \"./components/dialog.body\";\nimport { DialogFooter } from \"./components/dialog.footer\";\nimport { DialogTitle } from \"./components/dialog.title\";\nimport { DialogCloseTrigger } from \"./components/dialog.close-trigger\";\n\n/**\n * Dialog\n * ============================================================\n * A foundational dialog component for overlays that require user attention.\n * Built with React Aria Components for accessibility and WCAG 2.1 AA compliance.\n *\n * Features:\n * - Controlled and uncontrolled modes\n * - Customizable placement, size, and animations\n * - Focus management and keyboard navigation\n * - Click-outside and Escape key dismissal\n * - Portal rendering support\n * - Backdrop overlay with animations\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>\n *   <Dialog.Content size=\"md\" placement=\"center\">\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseTrigger>×</Dialog.CloseTrigger>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       Dialog content goes here\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <button>Cancel</button>\n *       <button>Save</button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n *\n * @see https://nimbus-documentation.vercel.app/components/feedback/dialog\n */\nexport const Dialog = {\n  /**\n   * # Dialog.Root\n   *\n   * The root component that provides context and state management for the dialog.\n   * Uses React Aria's DialogTrigger for accessibility and keyboard interaction.\n   *\n   * This component must wrap all dialog parts (Trigger, Content, etc.) and provides\n   * the dialog open/close state and variant styling context.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Root>\n   *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>\n   *   <Dialog.Content>\n   *     <Dialog.Header>\n   *       <Dialog.Title>Dialog Title</Dialog.Title>\n   *     </Dialog.Header>\n   *     <Dialog.Body>Dialog content</Dialog.Body>\n   *   </Dialog.Content>\n   * </Dialog.Root>\n   * ```\n   */\n  Root: DialogRoot,\n  /**\n   * # Dialog.Trigger\n   *\n   * The trigger element that opens the dialog when activated.\n   * Uses React Aria's Button for accessibility and keyboard support.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Root>\n   *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>\n   *   <Dialog.Content>...</Dialog.Content>\n   * </Dialog.Root>\n   * ```\n   */\n  Trigger: DialogTrigger,\n  /**\n   * # Dialog.Content\n   *\n   * The main dialog content container that wraps React Aria's Modal and Dialog.\n   * Handles portalling, backdrop, positioning, and content styling.\n   *\n   * This component creates the dialog overlay, positions the content, and provides\n   * accessibility features like focus management and keyboard dismissal.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Root>\n   *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>\n   *   <Dialog.Content size=\"md\" placement=\"center\">\n   *     <Dialog.Header>\n   *       <Dialog.Title>Title</Dialog.Title>\n   *     </Dialog.Header>\n   *     <Dialog.Body>Content</Dialog.Body>\n   *     <Dialog.Footer>Actions</Dialog.Footer>\n   *   </Dialog.Content>\n   * </Dialog.Root>\n   * ```\n   */\n  Content: DialogContent,\n  /**\n   * # Dialog.Header\n   *\n   * The header section of the dialog content.\n   * Typically contains the title and close button.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Content>\n   *   <Dialog.Header>\n   *     <Dialog.Title>Dialog Title</Dialog.Title>\n   *     <Dialog.CloseTrigger />\n   *   </Dialog.Header>\n   *   <Dialog.Body>...</Dialog.Body>\n   * </Dialog.Content>\n   * ```\n   */\n  Header: DialogHeader,\n  /**\n   * # Dialog.Body\n   *\n   * The main body content section of the dialog.\n   * Contains the primary dialog content and handles overflow/scrolling.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Content>\n   *   <Dialog.Header>...</Dialog.Header>\n   *   <Dialog.Body>\n   *     <p>This is the main content of the dialog.</p>\n   *   </Dialog.Body>\n   *   <Dialog.Footer>...</Dialog.Footer>\n   * </Dialog.Content>\n   * ```\n   */\n  Body: DialogBody,\n  /**\n   * # Dialog.Footer\n   *\n   * The footer section of the dialog, typically containing action buttons.\n   * Provides consistent spacing and alignment for dialog actions.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Content>\n   *   <Dialog.Header>...</Dialog.Header>\n   *   <Dialog.Body>...</Dialog.Body>\n   *   <Dialog.Footer>\n   *     <Button variant=\"outline\">Cancel</Button>\n   *     <Button>Confirm</Button>\n   *   </Dialog.Footer>\n   * </Dialog.Content>\n   * ```\n   */\n  Footer: DialogFooter,\n  /**\n   * # Dialog.Title\n   *\n   * The accessible title element for the dialog.\n   * Uses React Aria's Heading for proper accessibility and screen reader support.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Content>\n   *   <Dialog.Header>\n   *     <Dialog.Title>Confirm Action</Dialog.Title>\n   *   </Dialog.Header>\n   *   <Dialog.Body>...</Dialog.Body>\n   * </Dialog.Content>\n   * ```\n   */\n  Title: DialogTitle,\n  /**\n   * # Dialog.CloseTrigger\n   *\n   * A button that closes the dialog when activated.\n   * Displays an IconButton with a close (X) icon by default.\n   *\n   * The component automatically handles the close behavior through React Aria's\n   * context, so no additional onPress handler is needed.\n   *\n   * @example\n   * ```tsx\n   * <Dialog.Root>\n   *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>\n   *   <Dialog.Content>\n   *     <Dialog.Header>\n   *       <Dialog.Title>Title</Dialog.Title>\n   *       <Dialog.CloseTrigger aria-label=\"Close dialog\" />\n   *     </Dialog.Header>\n   *     <Dialog.Body>Content</Dialog.Body>\n   *   </Dialog.Content>\n   * </Dialog.Root>\n   * ```\n   */\n  CloseTrigger: DialogCloseTrigger,\n};\n\n// Internal exports for react-docgen\nexport {\n  DialogRoot as _DialogRoot,\n  DialogTrigger as _DialogTrigger,\n  DialogContent as _DialogContent,\n  DialogHeader as _DialogHeader,\n  DialogBody as _DialogBody,\n  DialogFooter as _DialogFooter,\n  DialogTitle as _DialogTitle,\n  DialogCloseTrigger as _DialogCloseTrigger,\n};\n"],"names":["Dialog","DialogRoot","DialogTrigger","DialogContent","DialogHeader","DialogBody","DialogFooter","DialogTitle","DialogCloseTrigger"],"mappings":";AA6CO,MAAMA,IAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuBpB,MAAMC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeN,SAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBT,SAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBT,QAAQC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBR,MAAMC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmBN,QAAQC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBR,OAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBP,cAAcC;AAChB;"}