@dmsi/wedgekit-react 0.0.4

package/dist/chunk-F2YQE6G5.js

@@ -0,0 +1,145 @@
+import {
+  baseTransition,
+  componentGap,
+  componentPaddingMinus2pxBorder,
+  componentPaddingXUsingComponentGap,
+  paddingUsingComponentGap,
+  typography
+} from "./chunk-2TLQVCQQ.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Button.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Button = (_a) => {
+  var _b = _a, {
+    variant = "primary",
+    as = "button",
+    block,
+    leftIcon,
+    rightIcon,
+    className,
+    classNameLabel,
+    disabled = false,
+    children,
+    iconOnly = false,
+    colorClassName
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "as",
+    "block",
+    "leftIcon",
+    "rightIcon",
+    "className",
+    "classNameLabel",
+    "disabled",
+    "children",
+    "iconOnly",
+    "colorClassName"
+  ]);
+  const primaryVariantStyles = variant === "primary" && clsx(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-background-action-primary-normal border-background-action-primary-normal",
+    "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
+    "focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
+    "active:bg-background-action-primary-active active:border-background-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled"
+  );
+  const secondaryVariantStyles = variant === "secondary" && clsx(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    "bg-background-action-secondary-normal border-border-action-normal",
+    "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled"
+  );
+  const tertiaryVariantStyles = variant === "tertiary" && clsx(
+    "bg-transparent border-transparent",
+    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    "bg-transparent border-transparent",
+    "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
+  );
+  const primaryCriticalVariantStyles = variant === "primary-critical" && clsx(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
+    "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
+    "focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
+    "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
+    "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled"
+  );
+  const secondaryCriticalVariantStyles = variant === "secondary-critical" && clsx(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
+    "bg-background-action-critical-secondary-normal border-border-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
+    "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled"
+  );
+  const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && clsx(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
+    "bg-transparent border-transparent text-text-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
+  );
+  const navigationVarianStyles = variant === "navigation" && clsx(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-transparent",
+    "hover:bg-background-on-action-secondary-hover hover:text-text-on-action-primary-hover",
+    "focus:bg-background-on-action-secondary-hover focus:text-text-on-action-primary-hover focus:outline-0",
+    "active:bg-background-on-action-secondary-active active:text-text-on-action-primary-active",
+    "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
+    "flex-col",
+    paddingUsingComponentGap
+  );
+  const notNavigationVariantStyles = variant !== "navigation" && clsx("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
+  const buttonClasses = clsx(
+    disabled ? "cursor-default" : "cursor-pointer",
+    block ? "w-full" : "w-fit",
+    baseTransition,
+    "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
+    primaryVariantStyles,
+    secondaryVariantStyles,
+    tertiaryVariantStyles,
+    primaryCriticalVariantStyles,
+    secondaryCriticalVariantStyles,
+    tertiaryCriticalVariantStyles,
+    navigationVarianStyles,
+    notNavigationVariantStyles,
+    className
+  );
+  const labelClasses = clsx(
+    "min-h-6 flex items-center justify-center",
+    classNameLabel,
+    componentPaddingXUsingComponentGap,
+    typography.buttonLabel
+  );
+  const Element = as;
+  return /* @__PURE__ */ jsxs(
+    Element,
+    __spreadProps(__spreadValues({
+      type: as === "button" ? "button" : void 0,
+      className: buttonClasses
+    }, props), {
+      disabled,
+      children: [
+        leftIcon && leftIcon,
+        !iconOnly && children && /* @__PURE__ */ jsx("span", { className: labelClasses, children }),
+        rightIcon && rightIcon
+      ]
+    })
+  );
+};
+Button.displayName = "Button";
+
+export {
+  Button
+};

package/dist/chunk-F3U3RHIB.js

@@ -0,0 +1,131 @@
+import {
+  Paragraph
+} from "./chunk-I5HKQSF2.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  baseTransition,
+  componentGap
+} from "./chunk-JDHZQIFC.js";
+import {
+  __objRest,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Checkbox.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Checkbox = (_a) => {
+  var _b = _a, {
+    label,
+    error,
+    disabled,
+    readOnly,
+    checked,
+    onChange,
+    indeterminate,
+    paragraphClassName
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "disabled",
+    "readOnly",
+    "checked",
+    "onChange",
+    "indeterminate",
+    "paragraphClassName"
+  ]);
+  const selected = indeterminate || checked;
+  const normalClassName = clsx(
+    !selected && !error && !disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active"
+  );
+  const normalSelectedClassName = clsx(
+    selected && !error && !disabled && !readOnly && "bg-background-action-primary-normal border-background-action-primary-normal peer-hover:bg-background-action-primary-hover peer-hover:border-background-action-primary-hover peer-active:bg-background-action-primary-active peer-active:border-background-action-primary-active"
+  );
+  const errorClassName = clsx(
+    error && !selected && "bg-background-action-critical-secondary-normal border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active"
+  );
+  const errorSelectedClassName = clsx(
+    error && selected && "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal peer-hover:bg-background-action-critical-primary-hover peer-hover:border-background-action-critical-primary-hover peer-active:bg-background-action-critical-primary-active peer-active:border-background-action-critical-primary-active"
+  );
+  const disabledClassName = clsx(
+    disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-disabled peer-checked:bg-icon-on-action-primary-disabled peer-checked:border-icon-on-action-primary-disabled"
+  );
+  const readOnlyClassName = clsx(
+    readOnly && "border-transparent bg-transparent peer-checked:bg-transparent peer-checked:border-transparent"
+  );
+  const checkColor = clsx(
+    selected && !disabled && !readOnly && "color-icon-on-action-primary-normal peer-hover:color-icon-on-action-primary-hover peer-active:color-icon-on-action-primary-active",
+    selected && disabled && "color-background-action-primary-disabled"
+  );
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: clsx(
+        "flex items-center",
+        componentGap,
+        (disabled || readOnly && error || readOnly) && "cursor-default",
+        !(readOnly && error) && !disabled && !readOnly && "cursor-pointer"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            __spreadValues({
+              type: "checkbox",
+              className: "sr-only peer",
+              disabled,
+              checked: selected,
+              onChange: handleOnChange,
+              id: props.id,
+              "data-indeterminate": indeterminate
+            }, props)
+          ),
+          error && (readOnly || disabled) ? /* @__PURE__ */ jsx("div", { className: clsx("size-6", "flex items-center justify-center"), children: selected ? indeterminate ? /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "question_mark" }) }) : readOnly ? /* @__PURE__ */ jsx("span", { className: "text-success-400 contents", children: /* @__PURE__ */ jsx(Icon, { name: "check" }) }) : /* @__PURE__ */ jsx("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "close" }) }) }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                "size-6 border rounded-base",
+                "flex items-center justify-center",
+                baseTransition,
+                normalClassName,
+                normalSelectedClassName,
+                errorClassName,
+                errorSelectedClassName,
+                disabledClassName,
+                readOnlyClassName,
+                checkColor
+              ),
+              children: selected ? indeterminate ? readOnly ? /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal  contents", children: /* @__PURE__ */ jsx(Icon, { name: "question_mark" }) }) : /* @__PURE__ */ jsx("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "remove", className: "pointer-events-none" }) }) : readOnly ? /* @__PURE__ */ jsx("span", { className: "text-success-400 contents", children: /* @__PURE__ */ jsx(Icon, { name: "check" }) }) : /* @__PURE__ */ jsx("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "close" }) })
+            }
+          )
+        ] }),
+        label && /* @__PURE__ */ jsx(
+          Paragraph,
+          {
+            padded: true,
+            className: clsx(
+              "text-nowrap",
+              disabled && !error && "!text-text-primary-disabled",
+              error && !disabled && !readOnly && "!text-text-primary-error",
+              paragraphClassName
+            ),
+            children: label
+          }
+        )
+      ]
+    }
+  );
+  function handleOnChange(e) {
+    if (disabled || readOnly || readOnly && error || !onChange) {
+      return;
+    }
+    onChange(e);
+  }
+};
+Checkbox.displayName = "Checkbox";
+
+export {
+  Checkbox
+};

package/dist/chunk-F433MJII.js

@@ -0,0 +1,91 @@
+import {
+  Button
+} from "./chunk-6Q5NNY5V.js";
+import {
+  Icon
+} from "./chunk-DZLUR2I7.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/NavigationTab.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var NavigationTab = (_a) => {
+  var _b = _a, {
+    label,
+    onClick,
+    selected = false,
+    className,
+    disabled = false,
+    colorPrimitives = "dmsi"
+  } = _b, props = __objRest(_b, [
+    "label",
+    "onClick",
+    "selected",
+    "className",
+    "disabled",
+    "colorPrimitives"
+  ]);
+  const textClassName = clsx(
+    "!text-text-on-action-primary-normal",
+    "hover:!text-text-on-action-primary-hover",
+    "active:!text-text-on-action-primary-active",
+    "disabled:!text-text-on-action-primary-disabled"
+  );
+  const disabledClassName = clsx(
+    "disabled:!bg-background-on-action-primary-disabled disabled:pointer-events-none"
+  );
+  const paddigClassName = clsx(
+    "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+  );
+  const unselectedClassName = clsx(
+    "!bg-background-on-action-primary-normal",
+    "hover:!bg-background-on-action-primary-hover",
+    "active:!bg-background-on-action-primary-active",
+    "shadow-nav-tab"
+  );
+  const selectedClassName = clsx(
+    "!bg-background-on-action-secondary-normal",
+    "hover:!bg-background-on-action-primary-hover",
+    "active:!bg-background-on-action-primary-active"
+  );
+  const tokenOverrides = colorPrimitives === "dmsi" ? {
+    "--color-text-on-action-primary-normal": "var(--color-brand-500)",
+    "--color-text-on-action-primary-hover": "var(--color-brand-500)",
+    "--color-text-on-action-primary-active": "var(--color-brand-300)"
+  } : {
+    "--color-background-on-action-primary-normal": "#D0DDE4",
+    "--color-text-on-action-primary-normal": "#002131",
+    "--color-text-on-action-primary-hover": "#002131",
+    "--color-text-on-action-primary-active": "#1a6280"
+  };
+  return /* @__PURE__ */ jsx("div", { style: tokenOverrides, children: /* @__PURE__ */ jsx(
+    Button,
+    __spreadProps(__spreadValues({
+      variant: "tertiary-critical",
+      className: clsx(
+        "!border-0 !rounded-b-none h-10 min-w-20 relative",
+        paddigClassName,
+        textClassName,
+        disabledClassName,
+        !selected && unselectedClassName,
+        selected && selectedClassName,
+        className
+      ),
+      classNameLabel: "px-1",
+      rightIcon: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 }),
+      onClick,
+      disabled
+    }, props), {
+      children: label
+    })
+  ) });
+};
+NavigationTab.displayName = "NavigationTab";
+
+export {
+  NavigationTab
+};

package/dist/chunk-F4JE6AD2.js

@@ -0,0 +1,160 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/Calendar.tsx
+import clsx from "clsx";
+import { Temporal, toTemporalInstant } from "@js-temporal/polyfill";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+Date.prototype.toTemporalInstant = toTemporalInstant;
+function Calendar({
+  value,
+  range,
+  disableWeekends = false,
+  onSelect
+}) {
+  const [startOfRange, setStartOfRange] = useState(null);
+  const [hoveredEndOfRange, setHoveredEndOfRange] = useState(null);
+  const instant = value ? new Date(value).toTemporalInstant() : null;
+  const date = instant == null ? void 0 : instant.toZonedDateTimeISO(Temporal.Now.timeZoneId());
+  const today = Temporal.Now.zonedDateTimeISO();
+  const valueForCalculating = date != null ? date : today;
+  const daysInMonth = valueForCalculating.daysInMonth;
+  const firstDayOfMonth = valueForCalculating.with({ day: 1 });
+  const firstDayOfWeek = firstDayOfMonth.dayOfWeek;
+  const emptyCells = (firstDayOfWeek - 1) % 7;
+  const oneWeek = new Temporal.Duration(0, 0, 0, 7);
+  const monthName = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ][valueForCalculating.month - 1];
+  return /* @__PURE__ */ jsxs("div", { onPointerLeave: () => setHoveredEndOfRange(null), children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center font-bold text-lg mb-2", children: [
+      monthName,
+      " ",
+      valueForCalculating.year
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7", children: [
+      Array.from({ length: oneWeek.days }, (_, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "w-full h-full aspect-square flex items-center justify-center text-neutral-500",
+          children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][index]
+        },
+        index
+      )),
+      Array.from({ length: emptyCells }, (_, index) => /* @__PURE__ */ jsx(DateCell, { disabled: true }, index)),
+      Array.from({ length: daysInMonth }, (_, index) => {
+        const day = index + 1;
+        const cellDate = valueForCalculating.with({ day });
+        const dateString = cellDate.toString();
+        const isToday = today.toPlainDate().equals(cellDate.toPlainDate());
+        const isStart = range && (startOfRange == null ? void 0 : startOfRange.toPlainDate().equals(cellDate.toPlainDate()));
+        const isEnd = range && startOfRange && (hoveredEndOfRange == null ? void 0 : hoveredEndOfRange.toPlainDate().equals(cellDate.toPlainDate()));
+        const isIntermediate = range && startOfRange && hoveredEndOfRange && isDateInRange(cellDate, startOfRange, hoveredEndOfRange) || false;
+        return /* @__PURE__ */ jsx(
+          DateCell,
+          {
+            disabled: disableWeekends && (cellDate.dayOfWeek === 1 || cellDate.dayOfWeek === 7),
+            start: isStart,
+            end: isEnd != null ? isEnd : void 0,
+            today: isToday,
+            intermediate: isIntermediate,
+            selected: date == null ? void 0 : date.toPlainDate().equals(cellDate.toPlainDate()),
+            onHover: () => {
+              setHoveredEndOfRange(cellDate);
+            },
+            onClick: () => {
+              if (range && startOfRange === null) {
+                setStartOfRange(cellDate);
+              } else if (range) {
+              } else {
+                onSelect == null ? void 0 : onSelect(dateString);
+              }
+            },
+            children: day
+          },
+          day
+        );
+      }),
+      Array.from({ length: 42 - daysInMonth - emptyCells }, (_, index) => /* @__PURE__ */ jsx(DateCell, { disabled: true }, index))
+    ] })
+  ] });
+}
+function DateCell(_a) {
+  var _b = _a, {
+    selected = false,
+    start = false,
+    intermediate = false,
+    end = false,
+    today = false,
+    disabled = false,
+    onClick,
+    onHover,
+    onKeyDown,
+    children,
+    className,
+    ref
+  } = _b, props = __objRest(_b, [
+    "selected",
+    "start",
+    "intermediate",
+    "end",
+    "today",
+    "disabled",
+    "onClick",
+    "onHover",
+    "onKeyDown",
+    "children",
+    "className",
+    "ref"
+  ]);
+  const isDefault = !selected && !start && !intermediate && !end && !today;
+  const isToday = today && !selected && !start && !intermediate && !end;
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      onPointerOver: onHover,
+      onClick,
+      onKeyDown,
+      disabled,
+      ref,
+      className: clsx(
+        "w-full h-full aspect-square flex items-center justify-center ",
+        isDefault && "text-neutral-500 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 disabled:pointer-events-none rounded",
+        isToday && "rounded-full border border-neutral-300 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 ",
+        selected && "text-white bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded",
+        start && "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-l",
+        end && "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-r",
+        intermediate && "bg-action-100 border-y border-action-400",
+        className
+      )
+    }, props), {
+      children
+    })
+  );
+}
+function isDateInRange(date, startDate, endDate) {
+  const plainDate = Temporal.PlainDate.from(date);
+  const startPlainDate = Temporal.PlainDate.from(startDate);
+  const endPlainDate = Temporal.PlainDate.from(endDate);
+  return Temporal.PlainDate.compare(plainDate, startPlainDate) >= 0 && Temporal.PlainDate.compare(plainDate, endPlainDate) <= 0;
+}
+
+export {
+  Calendar,
+  DateCell
+};

package/dist/chunk-FCYGYC7R.js

@@ -0,0 +1,30 @@
+import {
+  Heading2
+} from "./chunk-ASSOOV4N.js";
+import {
+  Button
+} from "./chunk-4TH2SUHQ.js";
+import {
+  Icon
+} from "./chunk-DZLUR2I7.js";
+
+// src/components/ModalHeader.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ModalHeader = ({ title, onClose }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-4", children: [
+    title && /* @__PURE__ */ jsx(Heading2, { as: "p", children: title }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "icon-only",
+        onClick: onClose,
+        leftIcon: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 24 }) })
+      }
+    )
+  ] });
+};
+ModalHeader.displayName = "ModalHeader";
+
+export {
+  ModalHeader
+};

package/dist/chunk-FEEMBYZR.js

@@ -0,0 +1,98 @@
+import {
+  Label
+} from "./chunk-BENTHNAQ.js";
+import {
+  Paragraph
+} from "./chunk-IJ6AAL4W.js";
+import {
+  baseTransition,
+  componentGap,
+  componentPadding
+} from "./chunk-6XDXJ3Z3.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/MenuOption.tsx
+import clsx from "clsx";
+import { useId, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MenuOption = ({
+  children,
+  disabled = false,
+  variant = "normal",
+  value,
+  before,
+  after,
+  subMenu,
+  onClick,
+  selected,
+  ref
+}) => {
+  const uniqueId = useId();
+  const internalRef = useRef(null);
+  const actualRef = ref || internalRef;
+  const menuId = useRef(`menu-${uniqueId}`);
+  const additionalAttributes = {
+    "data-selected": selected || null
+  };
+  const svgStyles = clsx(
+    "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
+  );
+  const textLabelStyles = clsx("w-full whitespace-nowrap !leading-6");
+  const normalStyles = variant === "normal" && !disabled && clsx(
+    "bg-transparent text-text-primary-normal",
+    "hover:bg-background-action-secondary-hover",
+    "focus:bg-background-action-secondary-hover",
+    "data-selected:bg-background-action-secondary-hover",
+    "active:bg-background-action-secondary-active"
+  );
+  const normalDisabledStyles = variant === "normal" && disabled && clsx("text-text-primary-disabled");
+  const actionStyles = variant === "action" && !disabled && clsx(
+    "text-action-400 bg-transparent",
+    "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
+    "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
+    "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
+    "active:bg-background-action-secondary-active active:text-text-action-active"
+  );
+  const actionDisabledStyles = variant === "action" && disabled && clsx("text-text-action-disabled");
+  const disabledStyles = disabled && clsx("bg-transparent cursor-default pointer-events-none");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref: actualRef,
+        className: clsx(
+          "flex items-center cursor-pointer w-full text-left relative outline-none",
+          svgStyles,
+          componentGap,
+          componentPadding,
+          baseTransition,
+          normalStyles,
+          normalDisabledStyles,
+          actionStyles,
+          actionDisabledStyles,
+          disabledStyles
+        ),
+        "data-value": value || children,
+        onClick: () => {
+          onClick == null ? void 0 : onClick(menuId.current, value || children);
+        }
+      }, additionalAttributes), {
+        tabIndex: -1,
+        children: [
+          before,
+          variant === "action" ? /* @__PURE__ */ jsx(Label, { padded: true, className: textLabelStyles, children }) : /* @__PURE__ */ jsx(Paragraph, { padded: true, className: textLabelStyles, children }),
+          after
+        ]
+      })
+    ),
+    subMenu == null ? void 0 : subMenu(menuId.current, actualRef)
+  ] });
+};
+MenuOption.displayName = "MenuOption";
+
+export {
+  MenuOption
+};