@multiplatform.one/forms 6.7.0 → 7.0.0

package/dist/cjs/fields/TimePicker/parts.cjs

@@ -0,0 +1,648 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var parts_exports = {};
+__export(parts_exports, {
+  ClockDial: () => ClockDial,
+  TimePanel: () => TimePanel,
+  TimePickerInputTrigger: () => TimePickerInputTrigger,
+  formatTimeDisplay: () => formatTimeDisplay,
+  isValidTimeString: () => isValidTimeString,
+  parseTimeString: () => parseTimeString,
+  to12Hour: () => to12Hour,
+  to24Hour: () => to24Hour,
+  toTimeString: () => toTimeString
+});
+module.exports = __toCommonJS(parts_exports);
+var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_InputParts = require("../../InputParts/index.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_t = require("../../shared/t.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const timeStringRegex = /^([01]?\d|2[0-3]):[0-5]\d(:[0-5]\d)?$/;
+function isValidTimeString(value) {
+  return timeStringRegex.test(value.trim());
+}
+function parseTimeString(value) {
+  if (!value) return {
+    h: 0,
+    m: 0,
+    s: 0
+  };
+  const parts = value.split(":");
+  return {
+    h: Math.max(0, Math.min(23, Number.parseInt(parts[0] || "0", 10) || 0)),
+    m: Math.max(0, Math.min(59, Number.parseInt(parts[1] || "0", 10) || 0)),
+    s: Math.max(0, Math.min(59, Number.parseInt(parts[2] || "0", 10) || 0))
+  };
+}
+function toTimeString(h, m, s) {
+  const base = `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+  return s !== void 0 ? `${base}:${String(s).padStart(2, "0")}` : base;
+}
+function formatTimeDisplay(value, format, showSeconds) {
+  if (!value) return "";
+  const {
+    h,
+    m,
+    s
+  } = parseTimeString(value);
+  const secSuffix = showSeconds ? `:${String(s).padStart(2, "0")}` : "";
+  if (format === "24h") {
+    return `${toTimeString(h, m)}${secSuffix}`;
+  }
+  const {
+    h: displayH,
+    period
+  } = to12Hour(h);
+  return `${displayH}:${String(m).padStart(2, "0")}${secSuffix} ${period}`;
+}
+function to24Hour(displayH, period) {
+  const wrapped = (displayH - 1) % 12 + 1;
+  if (period === "AM") return wrapped === 12 ? 0 : wrapped;
+  return wrapped === 12 ? 12 : wrapped + 12;
+}
+function to12Hour(h24) {
+  return {
+    h: h24 % 12 === 0 ? 12 : h24 % 12,
+    period: h24 >= 12 ? "PM" : "AM"
+  };
+}
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+function wrap(n, min, max) {
+  const span = max - min + 1;
+  return min + ((n - min) % span + span) % span;
+}
+function snapToStep(raw, step, max = 59) {
+  const size = Math.max(1, step);
+  return wrap(Math.round(raw / size) * size, 0, max);
+}
+function polar(fraction, radius, cell, center) {
+  const angle = fraction * 2 * Math.PI - Math.PI / 2;
+  return {
+    left: center + radius * Math.cos(angle) - cell / 2,
+    top: center + radius * Math.sin(angle) - cell / 2
+  };
+}
+function angleFromPoint(x, y, center) {
+  let angle = Math.atan2(y - center, x - center) + Math.PI / 2;
+  if (angle < 0) angle += Math.PI * 2;
+  return angle / (Math.PI * 2);
+}
+function pipRadius(pointy) {
+  return pointy ? 0 : 9999;
+}
+function activateKeys(onPress) {
+  return e => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault?.();
+      onPress();
+    }
+  };
+}
+function ClockFaceButton({
+  label,
+  selected,
+  size,
+  left,
+  top,
+  pointy,
+  onPress
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  const onAccent = (0, import_theme.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    position: "absolute",
+    left,
+    top,
+    width: size,
+    height: size,
+    borderRadius: pipRadius(pointy),
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 2,
+    role: "button",
+    "aria-label": label,
+    "aria-pressed": selected || void 0,
+    cursor: "pointer",
+    backgroundColor: selected ? import_colorRamps.formSelectedColors.mark : "transparent",
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+      outlineOffset: -2
+    }),
+    onPress: e => {
+      e.stopPropagation?.();
+      onPress();
+    },
+    ...(import_tamagui.isWeb ? {
+      tabIndex: 0,
+      onKeyDown: activateKeys(onPress)
+    } : {
+      accessible: true
+    }),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...knobProps.label,
+      fontWeight: selected ? "700" : "500",
+      color: selected ? onAccent : import_colorRamps.formCommonColors.text,
+      userSelect: "none",
+      children: label
+    })
+  });
+}
+function ClockHand({
+  fraction,
+  length,
+  center
+}) {
+  const deg = fraction * 360 - 90;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    position: "absolute",
+    left: center,
+    top: center - 1.5,
+    width: length,
+    height: 3,
+    borderRadius: 2,
+    backgroundColor: import_colorRamps.formSelectedColors.mark,
+    zIndex: 1,
+    pointerEvents: "none",
+    style: import_tamagui.isWeb ? {
+      transformOrigin: "left center",
+      transform: `rotate(${deg}deg)`
+    } : {
+      transform: [{
+        rotate: `${deg}deg`
+      }]
+    }
+  });
+}
+function ClockDial({
+  mode,
+  hour24,
+  minute,
+  second,
+  timeFormat,
+  minuteStep,
+  onSelectHour,
+  onSelectMinute,
+  onSelectSecond
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  const cell = knobProps.nestedControl.px;
+  const size = cell * 8;
+  const center = size / 2;
+  const outerR = center - cell * 0.7;
+  const innerR = center - cell * 1.85;
+  const {
+    h: hour12
+  } = to12Hour(hour24);
+  const faceRadius = pipRadius(knobProps.pointy);
+  const ticks = (0, import_react.useMemo)(() => {
+    if (mode === "hour" && timeFormat === "24h") {
+      return [...Array.from({
+        length: 12
+      }, (_, i) => ({
+        value: i,
+        label: pad2(i),
+        radius: innerR,
+        selected: hour24 === i
+      })), ...Array.from({
+        length: 12
+      }, (_, i) => ({
+        value: i + 12,
+        label: pad2(i + 12),
+        radius: outerR,
+        selected: hour24 === i + 12
+      }))];
+    }
+    if (mode === "hour") {
+      return Array.from({
+        length: 12
+      }, (_, i) => {
+        const value = i === 0 ? 12 : i;
+        return {
+          value,
+          label: String(value),
+          radius: outerR,
+          selected: hour12 === value
+        };
+      });
+    }
+    const step = mode === "minute" ? Math.max(1, minuteStep) : 1;
+    const labelStep = step >= 5 && 60 % step === 0 ? step : 5;
+    const current = mode === "minute" ? minute : second;
+    return Array.from({
+      length: Math.floor(60 / labelStep)
+    }, (_, i) => {
+      const value = i * labelStep;
+      return {
+        value,
+        label: pad2(value),
+        radius: outerR,
+        selected: current === value
+      };
+    });
+  }, [mode, timeFormat, hour24, hour12, minute, second, minuteStep, innerR, outerR]);
+  const handFraction = mode === "hour" ? timeFormat === "24h" ? hour24 % 12 / 12 : hour12 / 12 : mode === "minute" ? minute / 60 : second / 60;
+  const handLength = mode === "hour" && timeFormat === "24h" && hour24 < 12 ? innerR : outerR;
+  const pickFromPoint = (0, import_react.useCallback)((x, y) => {
+    const dist = Math.hypot(x - center, y - center);
+    if (dist < cell * 0.4 || dist > center) return;
+    const frac = angleFromPoint(x, y, center);
+    if (mode === "hour") {
+      const hour12Pick = Math.round(frac * 12) % 12;
+      if (timeFormat === "24h") {
+        const inner = dist < (innerR + outerR) / 2;
+        onSelectHour(inner ? hour12Pick : hour12Pick + 12);
+        return;
+      }
+      onSelectHour(to24Hour(hour12Pick === 0 ? 12 : hour12Pick, hour24 >= 12 ? "PM" : "AM"));
+      return;
+    }
+    const raw = Math.round(frac * 60) % 60;
+    if (mode === "minute") onSelectMinute(snapToStep(raw, minuteStep));else onSelectSecond(snapToStep(raw, 1));
+  }, [center, cell, innerR, outerR, mode, timeFormat, hour24, minuteStep, onSelectHour, onSelectMinute, onSelectSecond]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+    width: size,
+    height: size,
+    alignSelf: "center",
+    position: "relative",
+    "data-testid": "time-picker-dial",
+    role: "group",
+    "aria-label": mode === "hour" ? (0, import_t.t)("Hour") : mode === "minute" ? (0, import_t.t)("Min") : (0, import_t.t)("Sec"),
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      width: size,
+      height: size,
+      borderRadius: faceRadius === 9999 ? size / 2 : 0,
+      backgroundColor: import_colorRamps.formInputColors.background.focus,
+      cursor: "pointer",
+      onPress: e => {
+        const ne = e.nativeEvent;
+        if (typeof ne.locationX === "number" && typeof ne.locationY === "number") {
+          pickFromPoint(ne.locationX, ne.locationY);
+        }
+      }
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ClockHand, {
+      fraction: handFraction,
+      length: handLength,
+      center
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      position: "absolute",
+      left: center + handLength * Math.cos(handFraction * 2 * Math.PI - Math.PI / 2) - cell / 2,
+      top: center + handLength * Math.sin(handFraction * 2 * Math.PI - Math.PI / 2) - cell / 2,
+      width: cell,
+      height: cell,
+      borderRadius: pipRadius(knobProps.pointy),
+      backgroundColor: import_colorRamps.formSelectedColors.mark,
+      zIndex: 1,
+      pointerEvents: "none"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      position: "absolute",
+      left: center - 5,
+      top: center - 5,
+      width: 10,
+      height: 10,
+      borderRadius: pipRadius(knobProps.pointy),
+      backgroundColor: import_colorRamps.formSelectedColors.mark,
+      zIndex: 3,
+      pointerEvents: "none"
+    }), ticks.map(tick => {
+      const fraction = mode === "hour" ? tick.value % 12 / 12 : tick.value / 60;
+      const pos = polar(fraction, tick.radius, cell, center);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ClockFaceButton, {
+        label: tick.label,
+        selected: tick.selected,
+        size: cell,
+        left: pos.left,
+        top: pos.top,
+        pointy: knobProps.pointy,
+        onPress: () => {
+          if (mode === "hour") {
+            onSelectHour(timeFormat === "24h" ? tick.value : to24Hour(tick.value, hour24 >= 12 ? "PM" : "AM"));
+          } else if (mode === "minute") {
+            onSelectMinute(tick.value);
+          } else {
+            onSelectSecond(tick.value);
+          }
+        }
+      }, `${tick.radius}-${tick.value}`);
+    })]
+  });
+}
+function TimeSegment({
+  value,
+  selected,
+  label,
+  onPress,
+  onStep
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  const onAccent = (0, import_theme.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
+  const minWidth = knobProps.nestedControl.px * 2;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    role: "button",
+    "aria-label": label,
+    "aria-pressed": selected || void 0,
+    cursor: "pointer",
+    minWidth,
+    minHeight: knobProps.nestedControl.px * 1.5,
+    paddingHorizontal: "$3",
+    paddingVertical: "$2",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: selected ? import_colorRamps.formSelectedColors.mark : import_colorRamps.formInputColors.background.focus,
+    borderRadius: knobProps.pointy ? 0 : knobProps.borderRadius.borderRadius,
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+      outlineOffset: -2
+    }),
+    onPress,
+    ...(knobProps.transition ? {
+      transition: knobProps.transition
+    } : void 0),
+    ...(import_tamagui.isWeb ? {
+      tabIndex: 0,
+      onKeyDown: e => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault?.();
+          onPress();
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault?.();
+          onStep(1);
+        } else if (e.key === "ArrowDown") {
+          e.preventDefault?.();
+          onStep(-1);
+        }
+      }
+    } : {
+      accessible: true
+    }),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$8",
+      ...knobProps.heading,
+      fontWeight: "700",
+      color: selected ? onAccent : import_colorRamps.formCommonColors.text,
+      userSelect: "none",
+      children: value
+    })
+  });
+}
+function PeriodToggle({
+  selected,
+  onChange
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  const onAccent = (0, import_theme.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    overflow: "hidden",
+    borderRadius: knobProps.pointy ? 0 : knobProps.borderRadius.borderRadius,
+    role: "radiogroup",
+    "aria-label": (0, import_t.t)("AM/PM"),
+    children: ["AM", "PM"].map(period => {
+      const isSelected = period === selected;
+      const onPress = () => onChange(period);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        role: "radio",
+        "aria-checked": isSelected,
+        cursor: "pointer",
+        width: knobProps.nestedControl.px * 1.75,
+        height: knobProps.nestedControl.px * 1.15,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: isSelected ? import_colorRamps.formSelectedColors.mark : import_colorRamps.formInputColors.background.focus,
+        outlineWidth: 0,
+        focusStyle: {
+          outlineWidth: 0
+        },
+        focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+          outlineOffset: -2
+        }),
+        onPress,
+        ...(knobProps.transition ? {
+          transition: knobProps.transition
+        } : void 0),
+        ...(import_tamagui.isWeb ? {
+          tabIndex: 0,
+          onKeyDown: activateKeys(onPress)
+        } : {
+          accessible: true
+        }),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.label,
+          fontWeight: isSelected ? "700" : "500",
+          color: isSelected ? onAccent : import_colorRamps.formCommonColors.text,
+          userSelect: "none",
+          children: period
+        })
+      }, period);
+    })
+  });
+}
+function TimePanel({
+  value,
+  onChange,
+  timeFormat,
+  minuteStep,
+  showSeconds
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  const [mode, setMode] = (0, import_react.useState)("hour");
+  const {
+    h,
+    m,
+    s
+  } = parseTimeString(value);
+  const {
+    h: hour12,
+    period
+  } = to12Hour(h);
+  const emit = (0, import_react.useCallback)((newH, newM, newS) => {
+    onChange(showSeconds ? toTimeString(newH, newM, newS) : toTimeString(newH, newM));
+  }, [onChange, showSeconds]);
+  const handleHour = (0, import_react.useCallback)(hour24 => {
+    emit(hour24, m, s);
+    setMode("minute");
+  }, [emit, m, s]);
+  const handleMinute = (0, import_react.useCallback)(next => {
+    emit(h, next, s);
+    if (showSeconds) setMode("second");
+  }, [emit, h, s, showSeconds]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+    alignItems: "center",
+    ...knobProps.panelPadding,
+    ...knobProps.gapLg,
+    "data-testid": "time-picker-panel",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      flexDirection: "row",
+      alignItems: "center",
+      ...knobProps.gap,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeSegment, {
+        value: timeFormat === "24h" ? pad2(h) : pad2(hour12),
+        selected: mode === "hour",
+        label: (0, import_t.t)("Hour"),
+        onPress: () => setMode("hour"),
+        onStep: delta => {
+          if (timeFormat === "24h") emit(wrap(h + delta, 0, 23), m, s);else emit(to24Hour(wrap(hour12 + delta, 1, 12), period), m, s);
+        }
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: "$8",
+        ...knobProps.heading,
+        color: import_colorRamps.formCommonColors.text,
+        userSelect: "none",
+        children: ":"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeSegment, {
+        value: pad2(m),
+        selected: mode === "minute",
+        label: (0, import_t.t)("Min"),
+        onPress: () => setMode("minute"),
+        onStep: delta => emit(h, snapToStep(m + delta * Math.max(1, minuteStep), minuteStep), s)
+      }), showSeconds ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: "$8",
+          ...knobProps.heading,
+          color: import_colorRamps.formCommonColors.text,
+          userSelect: "none",
+          children: ":"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeSegment, {
+          value: pad2(s),
+          selected: mode === "second",
+          label: (0, import_t.t)("Sec"),
+          onPress: () => setMode("second"),
+          onStep: delta => emit(h, m, wrap(s + delta, 0, 59))
+        })]
+      }) : null, timeFormat === "12h" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(PeriodToggle, {
+        selected: period,
+        onChange: next => {
+          if (next === period) return;
+          emit(to24Hour(hour12, next), m, s);
+        }
+      }) : null]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ClockDial, {
+      mode: showSeconds && mode === "second" ? "second" : mode === "minute" ? "minute" : "hour",
+      hour24: h,
+      minute: m,
+      second: s,
+      timeFormat,
+      minuteStep,
+      onSelectHour: handleHour,
+      onSelectMinute: handleMinute,
+      onSelectSecond: next => emit(h, m, next)
+    })]
+  });
+}
+function TimePickerInputTrigger({
+  value,
+  placeholder,
+  disabled,
+  error,
+  id,
+  clockIcon,
+  onOpen,
+  onClear,
+  "aria-label": ariaLabel,
+  "aria-required": ariaRequired,
+  "aria-invalid": ariaInvalid,
+  "aria-readonly": ariaReadonly
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    cursor: disabled ? "not-allowed" : "pointer",
+    "data-testid": "time-picker-trigger",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+      theme: error ? "red" : void 0,
+      elevation: void 0,
+      onPress: import_tamagui.isWeb && !disabled ? onOpen : void 0,
+      ...(disabled ? {
+        opacity: 0.5,
+        pointerEvents: "none"
+      } : void 0),
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+          adornment: "leading",
+          children: clockIcon ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Clock, {})
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+        readOnly: true,
+        pointerEvents: "none",
+        id,
+        value,
+        placeholder,
+        disabled,
+        color: import_colorRamps.formCommonColors.text,
+        "aria-label": ariaLabel,
+        "aria-required": ariaRequired,
+        "aria-invalid": ariaInvalid,
+        "aria-readonly": ariaReadonly,
+        onKeyPress: disabled ? void 0 : e => {
+          const key = e?.nativeEvent?.key ?? e?.key;
+          if (key === "Enter" || key === " " || key === "Spacebar") {
+            e?.preventDefault?.();
+            onOpen();
+          }
+        }
+      }), value ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
+          "aria-label": (0, import_t.t)("Clear time"),
+          onPress: e => {
+            e.stopPropagation();
+            onClear();
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.X, {})
+          })
+        })
+      }) : null]
+    })
+  });
+}