@dmsi/wedgekit-react 0.0.4

package/dist/chunk-OQ2SDHRA.js

@@ -0,0 +1,267 @@
+import {
+  Label
+} from "./chunk-S4IHG5J6.js";
+import {
+  Icon
+} from "./chunk-DZLUR2I7.js";
+import {
+  baseTransition,
+  componentGap,
+  componentPaddingMinusBorder,
+  componentPaddingXUsingComponentGap,
+  typography
+} from "./chunk-6XDXJ3Z3.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Input.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var inputBaseClass = clsx(
+  "w-full",
+  "flex flex-row items-center",
+  "rounded-base border border-border-primary-normal bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
+  componentGap,
+  baseTransition,
+  "outline-transparent outline-2",
+  componentPaddingMinusBorder
+);
+var inputFocusClass = clsx(
+  "focus-within:border-transparent focus-within:outline-border-primary-focus"
+);
+var inputDisabledClass = clsx(
+  "has-disabled:bg-background-action-secondary-disabled"
+);
+var inputReadOnlyClass = clsx(
+  "has-[input:not(:disabled):read-only]:outline-none has-[input:not(:disabled):read-only]:bg-transparent has-[input:not(:disabled):read-only]:border-transparent has-[input:not(:disabled):read-only]:pl-0"
+);
+var inputInvalidClass = clsx(
+  "has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1"
+);
+var InputBase = (_a) => {
+  var _b = _a, {
+    before,
+    after,
+    type,
+    label,
+    error,
+    className,
+    align = "left",
+    caption,
+    required,
+    inputContainerRef
+  } = _b, props = __objRest(_b, [
+    "before",
+    "after",
+    "type",
+    "label",
+    "error",
+    "className",
+    "align",
+    "caption",
+    "required",
+    "inputContainerRef"
+  ]);
+  const attributes = {
+    "data-error": error || null
+  };
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ref: inputContainerRef,
+      className: clsx(
+        "w-full flex flex-col",
+        "block",
+        "text-text-primary-normal has-disabled:text-text-primary-disabled",
+        !props.disabled && "has-[[data-error]]:text-text-primary-error",
+        componentGap
+      ),
+      children: [
+        label && /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", componentGap), children: [
+          /* @__PURE__ */ jsx(
+            Label,
+            {
+              colorClassName: "text-inherit",
+              className: clsx(
+                props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
+              ),
+              children: label
+            }
+          ),
+          required && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx(typography.label, "text-text-critical-normal"),
+              children: "*"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(
+              inputBaseClass,
+              !props.disabled && inputInvalidClass,
+              inputFocusClass,
+              inputDisabledClass,
+              inputReadOnlyClass
+            ),
+            children: [
+              before,
+              /* @__PURE__ */ jsx(
+                "input",
+                __spreadProps(__spreadValues(__spreadValues({
+                  type,
+                  required
+                }, props), attributes), {
+                  id: props.id,
+                  className: clsx(
+                    "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
+                    "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+                    "placeholder:text-text-secondary-normal disabled:text-text-secondary-disabled",
+                    align === "right" && "text-right",
+                    align === "center" && "text-center",
+                    componentPaddingXUsingComponentGap,
+                    typography.paragraph,
+                    className,
+                    props.readOnly && !props.disabled && "!px-0"
+                  )
+                })
+              ),
+              after
+            ]
+          }
+        ),
+        caption
+      ]
+    }
+  );
+};
+var Input = (_a) => {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(InputBase, __spreadValues({}, props));
+};
+Input.displayName = "Input";
+var Finder = (_a) => {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(InputBase, __spreadProps(__spreadValues({}, props), { after: /* @__PURE__ */ jsx(Icon, { name: "search" }) }));
+};
+Finder.displayName = "Finder";
+var Search = (_a) => {
+  var props = __objRest(_a, []);
+  var _a2;
+  return /* @__PURE__ */ jsx(
+    InputBase,
+    __spreadProps(__spreadValues({}, props), {
+      placeholder: (_a2 = props.placeholder) != null ? _a2 : "Search",
+      before: /* @__PURE__ */ jsx(Icon, { name: "search" }),
+      after: /* @__PURE__ */ jsx(Icon, { name: "close" })
+    })
+  );
+};
+Search.displayName = "Search";
+var UOM = (_a) => {
+  var _b = _a, {
+    uom,
+    decimals
+  } = _b, props = __objRest(_b, [
+    "uom",
+    "decimals"
+  ]);
+  const handleBlur = (e) => {
+    var _a2;
+    const formattedValue = formatDecimalValue(e.target.value, decimals);
+    e.target.value = formattedValue;
+    (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
+  };
+  return /* @__PURE__ */ jsx(
+    InputBase,
+    __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      type: "number",
+      align: "right",
+      after: /* @__PURE__ */ jsx("span", { className: "text-text-secondary-normal uppercase", children: uom }),
+      onBlur: handleBlur
+    })
+  );
+};
+UOM.displayName = "UOM";
+var Currency = (_a) => {
+  var _b = _a, {
+    decimals
+  } = _b, props = __objRest(_b, [
+    "decimals"
+  ]);
+  const handleBlur = (e) => {
+    var _a2;
+    const formattedValue = formatDecimalValue(e.target.value, decimals);
+    e.target.value = formattedValue;
+    (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
+  };
+  return /* @__PURE__ */ jsx(
+    InputBase,
+    __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      align: "right",
+      type: "number",
+      before: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "attach_money" }) }),
+      onBlur: handleBlur
+    })
+  );
+};
+Currency.displayName = "Currency";
+var Percentage = (_a) => {
+  var _b = _a, {
+    decimals
+  } = _b, props = __objRest(_b, [
+    "decimals"
+  ]);
+  const handleBlur = (e) => {
+    var _a2;
+    const formattedValue = formatDecimalValue(e.target.value, decimals);
+    e.target.value = formattedValue;
+    (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
+  };
+  return /* @__PURE__ */ jsx(
+    InputBase,
+    __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      align: "right",
+      type: "number",
+      after: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "percent" }) }),
+      onBlur: handleBlur
+    })
+  );
+};
+Percentage.displayName = "Percentage";
+function getDecimalPlaceholder(decimals) {
+  if (!decimals || decimals <= 0) {
+    return {};
+  }
+  return {
+    placeholder: `0.${"0".repeat(decimals)}`
+  };
+}
+function formatDecimalValue(value, decimals) {
+  if (!value || value === "") {
+    return "";
+  }
+  const numValue = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(numValue)) {
+    return "";
+  }
+  if (!decimals || decimals <= 0) {
+    return String(Math.round(numValue));
+  }
+  return numValue.toFixed(decimals);
+}
+
+export {
+  InputBase,
+  Input,
+  Finder,
+  Search,
+  UOM,
+  Currency,
+  Percentage
+};

package/dist/chunk-OQAOAEH5.js

@@ -0,0 +1,114 @@
+import {
+  Label
+} from "./chunk-BENTHNAQ.js";
+import {
+  Button
+} from "./chunk-O2KOOPL4.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  baseTransition,
+  componentGap,
+  componentPadding,
+  componentPaddingMinusBorder,
+  componentPaddingYUsingComponentGap
+} from "./chunk-6XDXJ3Z3.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/OptionPill.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OptionPill = (_a) => {
+  var _b = _a, {
+    selected = false,
+    onClick,
+    onRemove,
+    removable = false,
+    disabled = false,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "selected",
+    "onClick",
+    "onRemove",
+    "removable",
+    "disabled",
+    "children",
+    "className"
+  ]);
+  const additionalAttributes = {
+    "data-disabled": disabled || null,
+    "data-selected": selected || null
+  };
+  const classNames = clsx(
+    {
+      "hover:border-border-action-hover active:border-border-action-active": !disabled,
+      "data-disabled:cursor-default data-disabled:border-border-primary-normal": disabled,
+      "data-selected:border-transparent data-selected:bg-background-action-secondary-hover data-selected:outline-border-action-normal data-selected:hover:outline-border-action-hover data-selected:active:outline-border-action-active": selected,
+      "data-selected:data-disabled:bg-background-action-secondary-disabled data-selected:data-disabled:border-border-action-disabled data-selected:data-disabled:outline-transparent": disabled && selected
+    },
+    !removable && componentPadding,
+    removable && "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding"
+  );
+  const textColor = clsx(
+    !disabled && "text-text-primary-normal",
+    disabled && !selected && "text-text-primary-disabled",
+    disabled && selected && "text-text-on-action-primary-disabled"
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues(__spreadValues({
+      onClick: handleOnClick
+    }, props), additionalAttributes), {
+      className: clsx(
+        "flex items-center justify-between cursor-pointer w-max",
+        "border border-border-primary-normal rounded-base",
+        "outline-2 outline-transparent",
+        componentGap,
+        baseTransition,
+        classNames,
+        className,
+        textColor
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Label, { padded: true, className: componentPaddingYUsingComponentGap, children }),
+        removable && /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: handleOnRemove,
+            disabled,
+            className: clsx(
+              "mx-0 h-full w-10 !border-0",
+              componentPaddingMinusBorder
+            ),
+            iconOnly: true,
+            variant: "tertiary",
+            leftIcon: /* @__PURE__ */ jsx(Icon, { name: "close" })
+          }
+        )
+      ]
+    })
+  );
+  function handleOnClick() {
+    if (disabled) {
+      return;
+    }
+    onClick == null ? void 0 : onClick();
+  }
+  function handleOnRemove() {
+    if (!removable || !onRemove) {
+      return;
+    }
+    onRemove();
+  }
+};
+OptionPill.displayName = "OptionPill";
+
+export {
+  OptionPill
+};

package/dist/chunk-OQWOF5CI.js

@@ -0,0 +1,322 @@
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  componentGap,
+  componentPadding,
+  componentPaddingXUsingComponentGap,
+  componentPaddingYUsingComponentGap,
+  paddingUsingComponentGap,
+  typography
+} from "./chunk-LJ2W2FEG.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/CalendarRange.tsx
+import clsx from "clsx";
+import React, { useState } from "react";
+import { Temporal } from "@js-temporal/polyfill";
+import { jsx, jsxs } from "react/jsx-runtime";
+function isWeekend(date) {
+  return date.dayOfWeek === 6 || date.dayOfWeek === 7;
+}
+function DateCell(_a) {
+  var _b = _a, {
+    date,
+    isInMonth,
+    isToday,
+    isSelected,
+    inRange,
+    isDisabled,
+    isRangeStart,
+    isRangeEnd,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    cellPadding = "",
+    isRangeDisabled = false
+  } = _b, props = __objRest(_b, [
+    "date",
+    "isInMonth",
+    "isToday",
+    "isSelected",
+    "inRange",
+    "isDisabled",
+    "isRangeStart",
+    "isRangeEnd",
+    "onClick",
+    "onMouseEnter",
+    "onMouseLeave",
+    "cellPadding",
+    "isRangeDisabled"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    __spreadProps(__spreadValues({}, props), {
+      className: clsx(
+        "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
+        typography.caption,
+        cellPadding,
+        !isToday && !isSelected && !inRange && !isDisabled && !isRangeStart && !isRangeEnd && "border-transparent",
+        !isInMonth && "border-transparent",
+        // Today: subtle border ring
+        isToday && !isSelected && !inRange && "rounded-full border-border-primary-normal ",
+        // Selected: Figma blue, white text, strong shadow
+        isSelected && "bg-action-400 text-white border-action-400 z-10",
+        !isSelected && !inRange && "rounded-base",
+        // When range is disabled OR when only 'from' is selected (no range yet), apply rounded corners
+        (isRangeDisabled || !inRange && isSelected) && "rounded-base",
+        inRange && isSelected && "hover:border-action-500",
+        // In range: Figma light blue background
+        inRange && !isSelected && "bg-action-100 text-text-primary-normal border-y-action-400 border-x-0  ",
+        // Disabled: Figma gray, no pointer, no hover
+        isDisabled && !inRange ? "text-text-primary-disabled bg-transparent pointer-events-none opacity-40 border-transparent" : [
+          "text-text-primary-normal cursor-pointer",
+          // Figma hover: blue bg, blue text (or red text if selected)
+          isSelected ? "hover:bg-background-action-primary-hover hover:text-white" : "hover:bg-action-100 hover:text-text-action-primary-hover",
+          // Figma active: darker blue bg, white text
+          "active:bg-action-300 active:text-white",
+          // Figma focus: ring
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-400"
+        ],
+        isRangeStart && "rounded-l",
+        isRangeEnd && "rounded-r"
+      ),
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-disabled": isDisabled,
+      onClick: () => !isDisabled && isInMonth && onClick(),
+      onMouseEnter: () => isInMonth && onMouseEnter(),
+      onMouseLeave: () => isInMonth && onMouseLeave(),
+      children: isInMonth ? date.day : ""
+    })
+  );
+}
+function CalendarRange({
+  from,
+  to,
+  onChange,
+  isDateAvailable,
+  mode = "double",
+  cardStyle = false,
+  disableRange = false
+}) {
+  const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+  const parseDate = (d) => {
+    if (!d) return void 0;
+    if (typeof d === "number")
+      return Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
+    if (typeof d === "string") return Temporal.PlainDate.from(d);
+    return void 0;
+  };
+  const fromDate = parseDate(from);
+  const toDate = parseDate(to);
+  const today = Temporal.Now.plainDateISO();
+  const [baseMonth, setBaseMonth] = useState(
+    fromDate != null ? fromDate : today.with({ day: 1 })
+  );
+  const [selecting, setSelecting] = useState("from");
+  const [pendingFrom, setPendingFrom] = useState(void 0);
+  const [hoveredDate, setHoveredDate] = useState(void 0);
+  function getMonthData(monthOffset) {
+    const monthDate = baseMonth.add({ months: monthOffset }).with({ day: 1 });
+    const days = monthDate.daysInMonth;
+    const firstDayOffset = monthDate.dayOfWeek % 7;
+    return {
+      name: monthDate.toLocaleString("en-US", { month: "long" }),
+      year: monthDate.year,
+      days,
+      firstDayOffset,
+      date: monthDate
+    };
+  }
+  function handleDayClick(date) {
+    if (isDateAvailable && !isDateAvailable(date)) return;
+    if (mode === "single" && disableRange) {
+      if (onChange) {
+        onChange(date.toString(), date.toString());
+      }
+      return;
+    }
+    if (selecting === "from") {
+      setPendingFrom(date);
+      setSelecting("to");
+      setHoveredDate(void 0);
+    } else if (pendingFrom) {
+      if (onChange) {
+        const [start, end] = Temporal.PlainDate.compare(date, pendingFrom) < 0 ? [date, pendingFrom] : [pendingFrom, date];
+        onChange(start.toString(), end.toString());
+      }
+      setPendingFrom(void 0);
+      setSelecting("from");
+      setHoveredDate(void 0);
+    }
+  }
+  function isInRange(date) {
+    if (mode === "single" && disableRange) {
+      return false;
+    }
+    if (pendingFrom && selecting === "to" && hoveredDate) {
+      const [start, end] = Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0 ? [hoveredDate, pendingFrom] : [pendingFrom, hoveredDate];
+      return Temporal.PlainDate.compare(date, start) >= 0 && Temporal.PlainDate.compare(date, end) <= 0;
+    }
+    if (!pendingFrom && fromDate && toDate) {
+      return Temporal.PlainDate.compare(date, fromDate) >= 0 && Temporal.PlainDate.compare(date, toDate) <= 0;
+    }
+    return false;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "relative bg-background-grouped-primary-normal rounded-base w-fit",
+        componentPadding,
+        componentGap,
+        cardStyle && "shadow-4",
+        // baseTransition,
+        "overflow-hidden"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(
+            "flex flex-row items-start justify-start bg-background-primary-normal overflow-clip",
+            componentGap,
+            paddingUsingComponentGap
+          ),
+          children: (mode === "double" ? [0, 1] : [0]).map((offset, idx) => {
+            const month = getMonthData(offset);
+            const totalCells = 42;
+            const emptyCells = month.firstDayOffset;
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: clsx(
+                    "flex flex-col",
+                    componentGap,
+                    componentPadding
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: clsx(
+                          "flex flex-row items-center justify-between",
+                          componentGap,
+                          componentPaddingXUsingComponentGap,
+                          componentPaddingYUsingComponentGap,
+                          "mb-3",
+                          typography.label,
+                          "text-text-action-primary-normal"
+                        ),
+                        children: [
+                          idx === 0 ? /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: clsx(
+                                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-primary-normal",
+                                componentPadding,
+                                "mr-1"
+                              ),
+                              "aria-label": "Previous month",
+                              onClick: () => setBaseMonth(baseMonth.subtract({ months: 1 })),
+                              children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left", size: 24 })
+                            }
+                          ) : /* @__PURE__ */ jsx("span", { className: clsx(componentPadding, "mr-1") }),
+                          /* @__PURE__ */ jsxs("div", { className: "flex gap-desktop-compact-component-padding", children: [
+                            /* @__PURE__ */ jsx("span", { className: "font-semibold text-text-action-primary-normal text-[14px] leading-[1] truncate", children: month.name }),
+                            /* @__PURE__ */ jsx("span", { className: "font-semibold text-text-action-primary-normal text-[14px] leading-[1] px-1 truncate", children: month.year })
+                          ] }),
+                          (mode === "double" ? idx === 1 : true) ? /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: clsx(
+                                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-primary-normal",
+                                componentPadding,
+                                "ml-1"
+                              ),
+                              "aria-label": "Next month",
+                              onClick: () => setBaseMonth(baseMonth.add({ months: 1 })),
+                              children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right", size: 24 })
+                            }
+                          ) : /* @__PURE__ */ jsx("span", { className: clsx(componentPadding, "ml-1") })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: clsx("grid grid-cols-7 mb-1", componentGap), children: weekDays.map((d) => /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: clsx(
+                          typography.caption,
+                          "text-text-secondary-normal text-center"
+                        ),
+                        children: d
+                      },
+                      d
+                    )) }),
+                    /* @__PURE__ */ jsx("div", { className: clsx("grid grid-cols-7"), children: Array.from({ length: totalCells }).map((_, i) => {
+                      const day = i - emptyCells + 1;
+                      const date = month.date.with({ day: 1 }).add({
+                        days: i - emptyCells
+                      });
+                      const isInMonth = day > 0 && day <= month.days;
+                      const isToday = isInMonth && date.equals(today);
+                      const isSelected = isInMonth && (!pendingFrom && fromDate && date.equals(fromDate) || !pendingFrom && toDate && date.equals(toDate) || pendingFrom && date.equals(pendingFrom));
+                      const inRange = isInMonth && isInRange(date);
+                      const isDisabled = !isInMonth || (isDateAvailable ? !isDateAvailable(date) : false);
+                      const hoverDateIsBeforePendingFrom = hoveredDate && pendingFrom && Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0;
+                      const hoverDateIsAfterPendingFrom = hoveredDate && pendingFrom && Temporal.PlainDate.compare(hoveredDate, pendingFrom) >= 0;
+                      const isRangeStart = mode === "single" && disableRange ? false : !pendingFrom && isInMonth && fromDate && date.equals(fromDate) || hoverDateIsAfterPendingFrom && date.equals(pendingFrom);
+                      const isRangeEnd = mode === "single" && disableRange ? false : !pendingFrom && isInMonth && toDate && date.equals(toDate) || hoverDateIsBeforePendingFrom && date.equals(pendingFrom);
+                      return /* @__PURE__ */ jsx(
+                        DateCell,
+                        {
+                          date,
+                          isInMonth: !!isInMonth,
+                          isToday: !!isToday,
+                          isSelected: !!isSelected,
+                          inRange: !!inRange,
+                          isDisabled: !!isDisabled,
+                          onClick: () => handleDayClick(date),
+                          onMouseEnter: () => setHoveredDate(date),
+                          onMouseLeave: () => setHoveredDate(void 0),
+                          isRangeStart: !!isRangeStart,
+                          isRangeEnd: !!isRangeEnd,
+                          isRangeDisabled: mode === "single" && disableRange,
+                          cellPadding: "p-1.5 md:p-2 lg:p-2.5"
+                        },
+                        i
+                      );
+                    }) })
+                  ]
+                }
+              ),
+              mode === "double" && idx === 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: clsx(
+                    "self-stretch bg-border-primary-normal rounded-base mx-mobile-component-padding desktop:mx-desktop-component-padding compact:mx-desktop-compact-component-padding",
+                    // 1px width, full height, matches Figma divider
+                    "w-px"
+                  )
+                }
+              )
+            ] }, month.name + month.year);
+          })
+        }
+      )
+    }
+  );
+}
+var CalendarRange_default = CalendarRange;
+
+export {
+  isWeekend,
+  CalendarRange,
+  CalendarRange_default
+};