@mastra/playground-ui 33.0.0-alpha.2 → 33.0.0-alpha.4

package/dist/theme-toggle-AzjABhTN.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup } from '@base-ui/react/radio-group';
+import { Monitor, Sun, Moon } from 'lucide-react';
+import { u as useTheme } from './theme-provider-C9ih9jSS.js';
+import { t as transitions } from './transitions-tFfqxz40.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+const DEFAULT_OPTIONS = [
+  { value: "system", label: "System", icon: /* @__PURE__ */ jsx(Monitor, {}) },
+  { value: "light", label: "Light", icon: /* @__PURE__ */ jsx(Sun, {}) },
+  { value: "dark", label: "Dark", icon: /* @__PURE__ */ jsx(Moon, {}) }
+];
+const ITEM_WIDTH = 28;
+const ITEM_GAP = 2;
+const ThemeToggle = ({
+  value,
+  onChange,
+  options = DEFAULT_OPTIONS,
+  className,
+  "aria-label": ariaLabel = "Theme",
+  ...rest
+}) => {
+  const { theme, setTheme } = useTheme();
+  const current = value ?? theme;
+  const commit = onChange ?? setTheme;
+  const effectiveCurrent = options.some((option) => option.value === current) ? current : options[0]?.value ?? "system";
+  const handleChange = (next) => {
+    const match = options.find((opt) => opt.value === next);
+    if (match) commit(match.value);
+  };
+  const activeIndex = Math.max(
+    0,
+    options.findIndex((option) => option.value === effectiveCurrent)
+  );
+  const indicatorOffset = activeIndex * (ITEM_WIDTH + ITEM_GAP);
+  return /* @__PURE__ */ jsxs(
+    RadioGroup,
+    {
+      ...rest,
+      value: effectiveCurrent,
+      onValueChange: handleChange,
+      "aria-label": ariaLabel,
+      className: cn(
+        "relative inline-flex w-fit items-center gap-0.5 rounded-full border border-border1 bg-surface3 p-0.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "pointer-events-none absolute inset-y-0.5 left-0.5 rounded-full bg-surface5 motion-reduce:transition-none",
+              transitions.transform
+            ),
+            style: { width: ITEM_WIDTH, transform: `translateX(${indicatorOffset}px)` }
+          }
+        ),
+        options.map((option) => /* @__PURE__ */ jsx(
+          Radio.Root,
+          {
+            value: option.value,
+            "aria-label": option.label,
+            style: { width: ITEM_WIDTH },
+            className: cn(
+              "relative inline-flex h-6 cursor-pointer items-center justify-center rounded-full",
+              // Base UI exposes `data-checked` instead of Radix's `data-state="checked"`.
+              "[&_svg]:size-3.5 text-icon3 hover:text-icon6 data-[checked]:text-icon6",
+              "focus-visible:outline-hidden",
+              "active:scale-90 motion-reduce:transition-none",
+              transitions.colors,
+              transitions.transform
+            ),
+            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "pointer-events-none inline-flex items-center justify-center", children: option.icon })
+          },
+          option.value
+        ))
+      ]
+    }
+  );
+};
+
+export { ThemeToggle as T };
+//# sourceMappingURL=theme-toggle-AzjABhTN.js.map

package/dist/theme-toggle-AzjABhTN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle-AzjABhTN.js","sources":["../src/ds/components/ThemeToggle/theme-toggle.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { Monitor, Moon, Sun } from 'lucide-react';\n\nimport { useTheme } from '../ThemeProvider';\nimport type { Theme } from '../ThemeProvider/theme-context';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface ThemeToggleOption {\n  value: Theme;\n  label: string;\n  icon: React.ReactNode;\n}\n\nconst DEFAULT_OPTIONS: ReadonlyArray<ThemeToggleOption> = [\n  { value: 'system', label: 'System', icon: <Monitor /> },\n  { value: 'light', label: 'Light', icon: <Sun /> },\n  { value: 'dark', label: 'Dark', icon: <Moon /> },\n];\n\nconst ITEM_WIDTH = 28;\nconst ITEM_GAP = 2;\n\ntype RadioRootProps = Omit<\n  RadioGroupPrimitive.Props,\n  'value' | 'onChange' | 'onValueChange' | 'defaultValue' | 'className'\n> & {\n  className?: string;\n};\n\ntype ControlledProps = { value: Theme; onChange: (next: Theme) => void };\ntype UncontrolledProps = { value?: undefined; onChange?: undefined };\n\nexport type ThemeToggleProps = RadioRootProps & {\n  options?: ReadonlyArray<ThemeToggleOption>;\n} & (ControlledProps | UncontrolledProps);\n\nexport const ThemeToggle = ({\n  value,\n  onChange,\n  options = DEFAULT_OPTIONS,\n  className,\n  'aria-label': ariaLabel = 'Theme',\n  ...rest\n}: ThemeToggleProps) => {\n  const { theme, setTheme } = useTheme();\n  const current = value ?? theme;\n  const commit = onChange ?? setTheme;\n  const effectiveCurrent = options.some(option => option.value === current) ? current : (options[0]?.value ?? 'system');\n\n  const handleChange = (next: unknown) => {\n    const match = options.find(opt => opt.value === next);\n    if (match) commit(match.value);\n  };\n\n  const activeIndex = Math.max(\n    0,\n    options.findIndex(option => option.value === effectiveCurrent),\n  );\n  const indicatorOffset = activeIndex * (ITEM_WIDTH + ITEM_GAP);\n\n  return (\n    <RadioGroupPrimitive\n      {...rest}\n      value={effectiveCurrent}\n      onValueChange={handleChange}\n      aria-label={ariaLabel}\n      className={cn(\n        'relative inline-flex w-fit items-center gap-0.5 rounded-full border border-border1 bg-surface3 p-0.5',\n        className,\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'pointer-events-none absolute inset-y-0.5 left-0.5 rounded-full bg-surface5 motion-reduce:transition-none',\n          transitions.transform,\n        )}\n        style={{ width: ITEM_WIDTH, transform: `translateX(${indicatorOffset}px)` }}\n      />\n      {options.map(option => (\n        <RadioPrimitive.Root\n          key={option.value}\n          value={option.value}\n          aria-label={option.label}\n          style={{ width: ITEM_WIDTH }}\n          className={cn(\n            'relative inline-flex h-6 cursor-pointer items-center justify-center rounded-full',\n            // Base UI exposes `data-checked` instead of Radix's `data-state=\"checked\"`.\n            '[&_svg]:size-3.5 text-icon3 hover:text-icon6 data-[checked]:text-icon6',\n            'focus-visible:outline-hidden',\n            'active:scale-90 motion-reduce:transition-none',\n            transitions.colors,\n            transitions.transform,\n          )}\n        >\n          <span aria-hidden=\"true\" className=\"pointer-events-none inline-flex items-center justify-center\">\n            {option.icon}\n          </span>\n        </RadioPrimitive.Root>\n      ))}\n    </RadioGroupPrimitive>\n  );\n};\n"],"names":["RadioGroupPrimitive","RadioPrimitive"],"mappings":"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"}

package/dist/theme-toggle-DWtjTo-a.cjs

@@ -0,0 +1,87 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const radio = require('@base-ui/react/radio');
+const radioGroup = require('@base-ui/react/radio-group');
+const lucideReact = require('lucide-react');
+const themeProvider = require('./theme-provider-aO5-jZVp.cjs');
+const transitions = require('./transitions-DpczSjmD.cjs');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+const DEFAULT_OPTIONS = [
+  { value: "system", label: "System", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, {}) },
+  { value: "light", label: "Light", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, {}) },
+  { value: "dark", label: "Dark", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, {}) }
+];
+const ITEM_WIDTH = 28;
+const ITEM_GAP = 2;
+const ThemeToggle = ({
+  value,
+  onChange,
+  options = DEFAULT_OPTIONS,
+  className,
+  "aria-label": ariaLabel = "Theme",
+  ...rest
+}) => {
+  const { theme, setTheme } = themeProvider.useTheme();
+  const current = value ?? theme;
+  const commit = onChange ?? setTheme;
+  const effectiveCurrent = options.some((option) => option.value === current) ? current : options[0]?.value ?? "system";
+  const handleChange = (next) => {
+    const match = options.find((opt) => opt.value === next);
+    if (match) commit(match.value);
+  };
+  const activeIndex = Math.max(
+    0,
+    options.findIndex((option) => option.value === effectiveCurrent)
+  );
+  const indicatorOffset = activeIndex * (ITEM_WIDTH + ITEM_GAP);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radioGroup.RadioGroup,
+    {
+      ...rest,
+      value: effectiveCurrent,
+      onValueChange: handleChange,
+      "aria-label": ariaLabel,
+      className: utils.cn(
+        "relative inline-flex w-fit items-center gap-0.5 rounded-full border border-border1 bg-surface3 p-0.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: utils.cn(
+              "pointer-events-none absolute inset-y-0.5 left-0.5 rounded-full bg-surface5 motion-reduce:transition-none",
+              transitions.transitions.transform
+            ),
+            style: { width: ITEM_WIDTH, transform: `translateX(${indicatorOffset}px)` }
+          }
+        ),
+        options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          radio.Radio.Root,
+          {
+            value: option.value,
+            "aria-label": option.label,
+            style: { width: ITEM_WIDTH },
+            className: utils.cn(
+              "relative inline-flex h-6 cursor-pointer items-center justify-center rounded-full",
+              // Base UI exposes `data-checked` instead of Radix's `data-state="checked"`.
+              "[&_svg]:size-3.5 text-icon3 hover:text-icon6 data-[checked]:text-icon6",
+              "focus-visible:outline-hidden",
+              "active:scale-90 motion-reduce:transition-none",
+              transitions.transitions.colors,
+              transitions.transitions.transform
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "pointer-events-none inline-flex items-center justify-center", children: option.icon })
+          },
+          option.value
+        ))
+      ]
+    }
+  );
+};
+
+exports.ThemeToggle = ThemeToggle;
+//# sourceMappingURL=theme-toggle-DWtjTo-a.cjs.map

package/dist/theme-toggle-DWtjTo-a.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle-DWtjTo-a.cjs","sources":["../src/ds/components/ThemeToggle/theme-toggle.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { Monitor, Moon, Sun } from 'lucide-react';\n\nimport { useTheme } from '../ThemeProvider';\nimport type { Theme } from '../ThemeProvider/theme-context';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface ThemeToggleOption {\n  value: Theme;\n  label: string;\n  icon: React.ReactNode;\n}\n\nconst DEFAULT_OPTIONS: ReadonlyArray<ThemeToggleOption> = [\n  { value: 'system', label: 'System', icon: <Monitor /> },\n  { value: 'light', label: 'Light', icon: <Sun /> },\n  { value: 'dark', label: 'Dark', icon: <Moon /> },\n];\n\nconst ITEM_WIDTH = 28;\nconst ITEM_GAP = 2;\n\ntype RadioRootProps = Omit<\n  RadioGroupPrimitive.Props,\n  'value' | 'onChange' | 'onValueChange' | 'defaultValue' | 'className'\n> & {\n  className?: string;\n};\n\ntype ControlledProps = { value: Theme; onChange: (next: Theme) => void };\ntype UncontrolledProps = { value?: undefined; onChange?: undefined };\n\nexport type ThemeToggleProps = RadioRootProps & {\n  options?: ReadonlyArray<ThemeToggleOption>;\n} & (ControlledProps | UncontrolledProps);\n\nexport const ThemeToggle = ({\n  value,\n  onChange,\n  options = DEFAULT_OPTIONS,\n  className,\n  'aria-label': ariaLabel = 'Theme',\n  ...rest\n}: ThemeToggleProps) => {\n  const { theme, setTheme } = useTheme();\n  const current = value ?? theme;\n  const commit = onChange ?? setTheme;\n  const effectiveCurrent = options.some(option => option.value === current) ? current : (options[0]?.value ?? 'system');\n\n  const handleChange = (next: unknown) => {\n    const match = options.find(opt => opt.value === next);\n    if (match) commit(match.value);\n  };\n\n  const activeIndex = Math.max(\n    0,\n    options.findIndex(option => option.value === effectiveCurrent),\n  );\n  const indicatorOffset = activeIndex * (ITEM_WIDTH + ITEM_GAP);\n\n  return (\n    <RadioGroupPrimitive\n      {...rest}\n      value={effectiveCurrent}\n      onValueChange={handleChange}\n      aria-label={ariaLabel}\n      className={cn(\n        'relative inline-flex w-fit items-center gap-0.5 rounded-full border border-border1 bg-surface3 p-0.5',\n        className,\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'pointer-events-none absolute inset-y-0.5 left-0.5 rounded-full bg-surface5 motion-reduce:transition-none',\n          transitions.transform,\n        )}\n        style={{ width: ITEM_WIDTH, transform: `translateX(${indicatorOffset}px)` }}\n      />\n      {options.map(option => (\n        <RadioPrimitive.Root\n          key={option.value}\n          value={option.value}\n          aria-label={option.label}\n          style={{ width: ITEM_WIDTH }}\n          className={cn(\n            'relative inline-flex h-6 cursor-pointer items-center justify-center rounded-full',\n            // Base UI exposes `data-checked` instead of Radix's `data-state=\"checked\"`.\n            '[&_svg]:size-3.5 text-icon3 hover:text-icon6 data-[checked]:text-icon6',\n            'focus-visible:outline-hidden',\n            'active:scale-90 motion-reduce:transition-none',\n            transitions.colors,\n            transitions.transform,\n          )}\n        >\n          <span aria-hidden=\"true\" className=\"pointer-events-none inline-flex items-center justify-center\">\n            {option.icon}\n          </span>\n        </RadioPrimitive.Root>\n      ))}\n    </RadioGroupPrimitive>\n  );\n};\n"],"names":["jsx","Monitor","Sun","Moon","useTheme","jsxs","RadioGroupPrimitive","cn","transitions","RadioPrimitive"],"mappings":"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"}

package/dist/time-picker-BtJz6IU2.js

@@ -0,0 +1,110 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { DayPicker } from 'react-day-picker';
+import { c as cn } from './utils-CzYGxqbG.js';
+import { useState, useEffect } from 'react';
+import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from './select-D2w0zRz4.js';
+
+function DatePicker({ className, classNames, showOutsideDays = true, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        months: "flex flex-col space-y-4 sm:space-y-0 ",
+        month: "space-y-4 text-ui-sm ",
+        caption: "flex justify-between pt-1 items-center pl-2",
+        caption_label: "text-text font-medium ",
+        nav: "flex items-center",
+        nav_button_previous: cn(
+          "flex justify-center items-center h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_next: cn("flex justify-center items-center h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"),
+        dropdown_month: "w-full border-collapse space-y-1",
+        weeknumber: "flex",
+        day: cn(
+          "relative p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-surface5 [&:has([aria-selected].day-outside)]:bg-surface5/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md",
+          "h-8 w-8 p-0 hover:bg-lightGray-7/50 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start rounded-l-md",
+        day_range_end: "day-range-end rounded-r-md",
+        day_selected: cn(
+          "bg-accent1! text-white! hover:bg-accent1/80! focus:bg-accent1/80! focus:text-white!",
+          props.mode !== "range" && "rounded-md"
+        ),
+        day_today: "bg-neutral6/10 text-neutral5",
+        day_outside: "day-outside text-neutral3 opacity-50  aria-selected:bg-surface5/50 aria-selected:text-neutral3 aria-selected:opacity-30",
+        day_disabled: "text-neutral3 opacity-50",
+        day_range_middle: "aria-selected:bg-surface5 aria-selected:text-neutral5",
+        day_hidden: "invisible",
+        head_cell: "text-ui-xs text-neutral3",
+        ...classNames
+      },
+      ...props
+    }
+  );
+}
+
+const hourOptions = ["12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
+const minuteOptions = ["00", "15", "30", "45", "59"];
+const timePeriodOptions = ["AM", "PM"];
+function TimePicker({ defaultValue, onValueChange, className }) {
+  const [hour, setHour] = useState("12");
+  const [minute, setMinute] = useState("00");
+  const [timePeriod, setTimePeriod] = useState("AM");
+  useEffect(() => {
+    if (defaultValue) {
+      const timeRegex = /^(\d{1,2}):(\d{2})(?::\d{2})?\s*(AM|PM|am|pm)?$/;
+      const match = defaultValue.match(timeRegex);
+      if (match) {
+        let parsedHour = parseInt(match[1], 10);
+        const parsedMinute = parseInt(match[2], 10);
+        const period = match[3]?.toUpperCase();
+        if (parsedHour >= 1 && parsedHour <= 12 && parsedMinute >= 0 && parsedMinute <= 59) {
+          setHour(parsedHour.toString());
+          setMinute(parsedMinute === 0 ? "00" : parsedMinute.toString());
+          setTimePeriod(period || "AM");
+        }
+      }
+    }
+  }, [defaultValue]);
+  const handleHourChange = (val) => {
+    setHour(val);
+    onValueChange(`${hourOptions[+val]}:${minute} ${timePeriod}`.trim());
+  };
+  const handleMinuteChange = (val) => {
+    setMinute(minuteOptions[+val]);
+    onValueChange(`${hour}:${minuteOptions[+val]} ${timePeriod}`.trim());
+  };
+  const handleTimePeriodChange = (val) => {
+    setTimePeriod(timePeriodOptions[+val]);
+    onValueChange(`${hour}:${minute} ${timePeriodOptions[+val]}`.trim());
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-2 items-center", className), children: [
+    /* @__PURE__ */ jsxs(Select, { name: "hour", value: hourOptions.indexOf(hour).toString(), onValueChange: handleHourChange, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select..." }) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: hourOptions.map((option, idx) => /* @__PURE__ */ jsx(SelectItem, { value: `${idx}`, children: option }, option)) })
+    ] }),
+    ":",
+    /* @__PURE__ */ jsxs(Select, { name: "minute", value: minuteOptions.indexOf(minute).toString(), onValueChange: handleMinuteChange, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select..." }) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: minuteOptions.map((option, idx) => /* @__PURE__ */ jsx(SelectItem, { value: `${idx}`, children: option }, option)) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        name: "period",
+        value: timePeriodOptions.indexOf(timePeriod).toString(),
+        onValueChange: handleTimePeriodChange,
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select..." }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: timePeriodOptions.map((option, idx) => /* @__PURE__ */ jsx(SelectItem, { value: `${idx}`, children: option }, option)) })
+        ]
+      }
+    )
+  ] });
+}
+
+export { DatePicker as D, TimePicker as T };
+//# sourceMappingURL=time-picker-BtJz6IU2.js.map

package/dist/time-picker-BtJz6IU2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker-BtJz6IU2.js","sources":["../src/ds/components/DateTimePicker/date-picker.tsx","../src/ds/components/DateTimePicker/time-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DayPicker } from 'react-day-picker';\nimport { cn } from '@/lib/utils';\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>;\n\nexport function DatePicker({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn('p-3', className)}\n      classNames={{\n        months: 'flex flex-col space-y-4 sm:space-y-0 ',\n        month: 'space-y-4 text-ui-sm ',\n        caption: 'flex justify-between pt-1 items-center pl-2',\n        caption_label: 'text-text font-medium ',\n        nav: 'flex items-center',\n        nav_button_previous: cn(\n          'flex justify-center items-center h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        ),\n        nav_button_next: cn('flex justify-center items-center h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'),\n        dropdown_month: 'w-full border-collapse space-y-1',\n        weeknumber: 'flex',\n        day: cn(\n          'relative p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-surface5 [&:has([aria-selected].day-outside)]:bg-surface5/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',\n          props.mode === 'range'\n            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'\n            : '[&:has([aria-selected])]:rounded-md',\n          'h-8 w-8 p-0 hover:bg-lightGray-7/50 font-normal aria-selected:opacity-100',\n        ),\n        day_range_start: 'day-range-start rounded-l-md',\n        day_range_end: 'day-range-end rounded-r-md',\n        day_selected: cn(\n          'bg-accent1! text-white! hover:bg-accent1/80! focus:bg-accent1/80! focus:text-white!',\n          props.mode !== 'range' && 'rounded-md',\n        ),\n        day_today: 'bg-neutral6/10 text-neutral5',\n        day_outside:\n          'day-outside text-neutral3 opacity-50  aria-selected:bg-surface5/50 aria-selected:text-neutral3 aria-selected:opacity-30',\n        day_disabled: 'text-neutral3 opacity-50',\n        day_range_middle: 'aria-selected:bg-surface5 aria-selected:text-neutral5',\n        day_hidden: 'invisible',\n        head_cell: 'text-ui-xs text-neutral3',\n        ...classNames,\n      }}\n      {...props}\n    />\n  );\n}\n","import { useEffect, useState } from 'react';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ds/components/Select';\nimport { cn } from '@/lib/utils';\n\nexport type TimePickerProps = {\n  defaultValue?: string;\n  onValueChange: (value: string) => void;\n  className?: string;\n};\n\nconst hourOptions = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];\nconst minuteOptions = ['00', '15', '30', '45', '59'];\nconst timePeriodOptions = ['AM', 'PM'];\n\nexport function TimePicker({ defaultValue, onValueChange, className }: TimePickerProps) {\n  const [hour, setHour] = useState<string>('12');\n  const [minute, setMinute] = useState<string>('00');\n  const [timePeriod, setTimePeriod] = useState('AM');\n\n  useEffect(() => {\n    if (defaultValue) {\n      const timeRegex = /^(\\d{1,2}):(\\d{2})(?::\\d{2})?\\s*(AM|PM|am|pm)?$/;\n      const match = defaultValue.match(timeRegex);\n\n      if (match) {\n        let parsedHour = parseInt(match[1], 10);\n        const parsedMinute = parseInt(match[2], 10);\n        const period = match[3]?.toUpperCase();\n\n        if (parsedHour >= 1 && parsedHour <= 12 && parsedMinute >= 0 && parsedMinute <= 59) {\n          setHour(parsedHour.toString());\n          setMinute(parsedMinute === 0 ? '00' : parsedMinute.toString());\n          setTimePeriod(period || 'AM');\n        }\n      }\n    }\n  }, [defaultValue]);\n\n  const handleHourChange = (val: string) => {\n    setHour(val);\n    onValueChange(`${hourOptions[+val]}:${minute} ${timePeriod}`.trim());\n  };\n\n  const handleMinuteChange = (val: string) => {\n    setMinute(minuteOptions[+val]);\n    onValueChange(`${hour}:${minuteOptions[+val]} ${timePeriod}`.trim());\n  };\n\n  const handleTimePeriodChange = (val: string) => {\n    setTimePeriod(timePeriodOptions[+val]);\n    onValueChange(`${hour}:${minute} ${timePeriodOptions[+val]}`.trim());\n  };\n\n  return (\n    <div className={cn('flex gap-2 items-center', className)}>\n      <Select name=\"hour\" value={hourOptions.indexOf(hour).toString()} onValueChange={handleHourChange}>\n        <SelectTrigger size=\"sm\">\n          <SelectValue placeholder=\"Select...\" />\n        </SelectTrigger>\n        <SelectContent>\n          {hourOptions.map((option, idx) => (\n            <SelectItem key={option} value={`${idx}`}>\n              {option}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      :\n      <Select name=\"minute\" value={minuteOptions.indexOf(minute).toString()} onValueChange={handleMinuteChange}>\n        <SelectTrigger size=\"sm\">\n          <SelectValue placeholder=\"Select...\" />\n        </SelectTrigger>\n        <SelectContent>\n          {minuteOptions.map((option, idx) => (\n            <SelectItem key={option} value={`${idx}`}>\n              {option}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      <Select\n        name=\"period\"\n        value={timePeriodOptions.indexOf(timePeriod).toString()}\n        onValueChange={handleTimePeriodChange}\n      >\n        <SelectTrigger size=\"sm\">\n          <SelectValue placeholder=\"Select...\" />\n        </SelectTrigger>\n        <SelectContent>\n          {timePeriodOptions.map((option, idx) => (\n            <SelectItem key={option} value={`${idx}`}>\n              {option}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/time-picker-DWrxHBfR.cjs

@@ -0,0 +1,113 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactDayPicker = require('react-day-picker');
+const utils = require('./utils-vA5sWo9W.cjs');
+const React = require('react');
+const select = require('./select-DDgw1wG-.cjs');
+
+function DatePicker({ className, classNames, showOutsideDays = true, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactDayPicker.DayPicker,
+    {
+      showOutsideDays,
+      className: utils.cn("p-3", className),
+      classNames: {
+        months: "flex flex-col space-y-4 sm:space-y-0 ",
+        month: "space-y-4 text-ui-sm ",
+        caption: "flex justify-between pt-1 items-center pl-2",
+        caption_label: "text-text font-medium ",
+        nav: "flex items-center",
+        nav_button_previous: utils.cn(
+          "flex justify-center items-center h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_next: utils.cn("flex justify-center items-center h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"),
+        dropdown_month: "w-full border-collapse space-y-1",
+        weeknumber: "flex",
+        day: utils.cn(
+          "relative p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-surface5 [&:has([aria-selected].day-outside)]:bg-surface5/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md",
+          "h-8 w-8 p-0 hover:bg-lightGray-7/50 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start rounded-l-md",
+        day_range_end: "day-range-end rounded-r-md",
+        day_selected: utils.cn(
+          "bg-accent1! text-white! hover:bg-accent1/80! focus:bg-accent1/80! focus:text-white!",
+          props.mode !== "range" && "rounded-md"
+        ),
+        day_today: "bg-neutral6/10 text-neutral5",
+        day_outside: "day-outside text-neutral3 opacity-50  aria-selected:bg-surface5/50 aria-selected:text-neutral3 aria-selected:opacity-30",
+        day_disabled: "text-neutral3 opacity-50",
+        day_range_middle: "aria-selected:bg-surface5 aria-selected:text-neutral5",
+        day_hidden: "invisible",
+        head_cell: "text-ui-xs text-neutral3",
+        ...classNames
+      },
+      ...props
+    }
+  );
+}
+
+const hourOptions = ["12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
+const minuteOptions = ["00", "15", "30", "45", "59"];
+const timePeriodOptions = ["AM", "PM"];
+function TimePicker({ defaultValue, onValueChange, className }) {
+  const [hour, setHour] = React.useState("12");
+  const [minute, setMinute] = React.useState("00");
+  const [timePeriod, setTimePeriod] = React.useState("AM");
+  React.useEffect(() => {
+    if (defaultValue) {
+      const timeRegex = /^(\d{1,2}):(\d{2})(?::\d{2})?\s*(AM|PM|am|pm)?$/;
+      const match = defaultValue.match(timeRegex);
+      if (match) {
+        let parsedHour = parseInt(match[1], 10);
+        const parsedMinute = parseInt(match[2], 10);
+        const period = match[3]?.toUpperCase();
+        if (parsedHour >= 1 && parsedHour <= 12 && parsedMinute >= 0 && parsedMinute <= 59) {
+          setHour(parsedHour.toString());
+          setMinute(parsedMinute === 0 ? "00" : parsedMinute.toString());
+          setTimePeriod(period || "AM");
+        }
+      }
+    }
+  }, [defaultValue]);
+  const handleHourChange = (val) => {
+    setHour(val);
+    onValueChange(`${hourOptions[+val]}:${minute} ${timePeriod}`.trim());
+  };
+  const handleMinuteChange = (val) => {
+    setMinute(minuteOptions[+val]);
+    onValueChange(`${hour}:${minuteOptions[+val]} ${timePeriod}`.trim());
+  };
+  const handleTimePeriodChange = (val) => {
+    setTimePeriod(timePeriodOptions[+val]);
+    onValueChange(`${hour}:${minute} ${timePeriodOptions[+val]}`.trim());
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex gap-2 items-center", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { name: "hour", value: hourOptions.indexOf(hour).toString(), onValueChange: handleHourChange, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder: "Select..." }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: hourOptions.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: `${idx}`, children: option }, option)) })
+    ] }),
+    ":",
+    /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { name: "minute", value: minuteOptions.indexOf(minute).toString(), onValueChange: handleMinuteChange, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder: "Select..." }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: minuteOptions.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: `${idx}`, children: option }, option)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      select.Select,
+      {
+        name: "period",
+        value: timePeriodOptions.indexOf(timePeriod).toString(),
+        onValueChange: handleTimePeriodChange,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder: "Select..." }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: timePeriodOptions.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: `${idx}`, children: option }, option)) })
+        ]
+      }
+    )
+  ] });
+}
+
+exports.DatePicker = DatePicker;
+exports.TimePicker = TimePicker;
+//# sourceMappingURL=time-picker-DWrxHBfR.cjs.map

package/dist/time-picker-DWrxHBfR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker-DWrxHBfR.cjs","sources":["../src/ds/components/DateTimePicker/date-picker.tsx","../src/ds/components/DateTimePicker/time-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DayPicker } from 'react-day-picker';\nimport { cn } from '@/lib/utils';\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>;\n\nexport function DatePicker({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn('p-3', className)}\n      classNames={{\n        months: 'flex flex-col space-y-4 sm:space-y-0 ',\n        month: 'space-y-4 text-ui-sm ',\n        caption: 'flex justify-between pt-1 items-center pl-2',\n        caption_label: 'text-text font-medium ',\n        nav: 'flex items-center',\n        nav_button_previous: cn(\n          'flex justify-center items-center h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n        ),\n        nav_button_next: cn('flex justify-center items-center h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'),\n        dropdown_month: 'w-full border-collapse space-y-1',\n        weeknumber: 'flex',\n        day: cn(\n          'relative p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-surface5 [&:has([aria-selected].day-outside)]:bg-surface5/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',\n          props.mode === 'range'\n            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'\n            : '[&:has([aria-selected])]:rounded-md',\n          'h-8 w-8 p-0 hover:bg-lightGray-7/50 font-normal aria-selected:opacity-100',\n        ),\n        day_range_start: 'day-range-start rounded-l-md',\n        day_range_end: 'day-range-end rounded-r-md',\n        day_selected: cn(\n          'bg-accent1! text-white! hover:bg-accent1/80! focus:bg-accent1/80! focus:text-white!',\n          props.mode !== 'range' && 'rounded-md',\n        ),\n        day_today: 'bg-neutral6/10 text-neutral5',\n        day_outside:\n          'day-outside text-neutral3 opacity-50  aria-selected:bg-surface5/50 aria-selected:text-neutral3 aria-selected:opacity-30',\n        day_disabled: 'text-neutral3 opacity-50',\n        day_range_middle: 'aria-selected:bg-surface5 aria-selected:text-neutral5',\n        day_hidden: 'invisible',\n        head_cell: 'text-ui-xs text-neutral3',\n        ...classNames,\n      }}\n      {...props}\n    />\n  );\n}\n","import { useEffect, useState } from 'react';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ds/components/Select';\nimport { cn } from '@/lib/utils';\n\nexport type TimePickerProps = {\n  defaultValue?: string;\n  onValueChange: (value: string) => void;\n  className?: string;\n};\n\nconst hourOptions = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];\nconst minuteOptions = ['00', '15', '30', '45', '59'];\nconst timePeriodOptions = ['AM', 'PM'];\n\nexport function TimePicker({ defaultValue, onValueChange, className }: TimePickerProps) {\n  const [hour, setHour] = useState<string>('12');\n  const [minute, setMinute] = useState<string>('00');\n  const [timePeriod, setTimePeriod] = useState('AM');\n\n  useEffect(() => {\n    if (defaultValue) {\n      const timeRegex = /^(\\d{1,2}):(\\d{2})(?::\\d{2})?\\s*(AM|PM|am|pm)?$/;\n      const match = defaultValue.match(timeRegex);\n\n      if (match) {\n        let parsedHour = parseInt(match[1], 10);\n        const parsedMinute = parseInt(match[2], 10);\n        const period = match[3]?.toUpperCase();\n\n        if (parsedHour >= 1 && parsedHour <= 12 && parsedMinute >= 0 && parsedMinute <= 59) {\n          setHour(parsedHour.toString());\n          setMinute(parsedMinute === 0 ? '00' : parsedMinute.toString());\n          setTimePeriod(period || 'AM');\n        }\n      }\n    }\n  }, [defaultValue]);\n\n  const handleHourChange = (val: string) => {\n    setHour(val);\n    onValueChange(`${hourOptions[+val]}:${minute} ${timePeriod}`.trim());\n  };\n\n  const handleMinuteChange = (val: string) => {\n    setMinute(minuteOptions[+val]);\n    onValueChange(`${hour}:${minuteOptions[+val]} ${timePeriod}`.trim());\n  };\n\n  const handleTimePeriodChange = (val: string) => {\n    setTimePeriod(timePeriodOptions[+val]);\n    onValueChange(`${hour}:${minute} ${timePeriodOptions[+val]}`.trim());\n  };\n\n  return (\n    <div className={cn('flex gap-2 items-center', className)}>\n      <Select name=\"hour\" value={hourOptions.indexOf(hour).toString()} onValueChange={handleHourChange}>\n        <SelectTrigger size=\"sm\">\n          <SelectValue placeholder=\"Select...\" />\n        </SelectTrigger>\n        <SelectContent>\n          {hourOptions.map((option, idx) => (\n            <SelectItem key={option} value={`${idx}`}>\n              {option}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      :\n      <Select name=\"minute\" value={minuteOptions.indexOf(minute).toString()} onValueChange={handleMinuteChange}>\n        <SelectTrigger size=\"sm\">\n          <SelectValue placeholder=\"Select...\" />\n        </SelectTrigger>\n        <SelectContent>\n          {minuteOptions.map((option, idx) => (\n            <SelectItem key={option} value={`${idx}`}>\n              {option}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      <Select\n        name=\"period\"\n        value={timePeriodOptions.indexOf(timePeriod).toString()}\n        onValueChange={handleTimePeriodChange}\n      >\n        <SelectTrigger size=\"sm\">\n          <SelectValue placeholder=\"Select...\" />\n        </SelectTrigger>\n        <SelectContent>\n          {timePeriodOptions.map((option, idx) => (\n            <SelectItem key={option} value={`${idx}`}>\n              {option}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"],"names":["jsx","DayPicker","cn","useState","useEffect","jsxs","Select","SelectTrigger","SelectValue","SelectContent","SelectItem"],"mappings":";;;;;;;;AAMO,SAAS,UAAA,CAAW,EAAE,SAAA,EAAW,UAAA,EAAY,kBAAkB,IAAA,EAAM,GAAG,OAAM,EAAkB;AACrG,EAAA,uBACEA,cAAA;AAAA,IAACC,wBAAA;AAAA,IAAA;AAAA,MACC,eAAA;AAAA,MACA,SAAA,EAAWC,QAAA,CAAG,KAAA,EAAO,SAAS,CAAA;AAAA,MAC9B,UAAA,EAAY;AAAA,QACV,MAAA,EAAQ,uCAAA;AAAA,QACR,KAAA,EAAO,uBAAA;AAAA,QACP,OAAA,EAAS,6CAAA;AAAA,QACT,aAAA,EAAe,wBAAA;AAAA,QACf,GAAA,EAAK,mBAAA;AAAA,QACL,mBAAA,EAAqBA,QAAA;AAAA,UACnB;AAAA,SACF;AAAA,QACA,eAAA,EAAiBA,SAAG,0FAA0F,CAAA;AAAA,QAC9G,cAAA,EAAgB,kCAAA;AAAA,QAChB,UAAA,EAAY,MAAA;AAAA,QACZ,GAAA,EAAKA,QAAA;AAAA,UACH,+MAAA;AAAA,UACA,KAAA,CAAM,IAAA,KAAS,OAAA,GACX,sKAAA,GACA,qCAAA;AAAA,UACJ;AAAA,SACF;AAAA,QACA,eAAA,EAAiB,8BAAA;AAAA,QACjB,aAAA,EAAe,4BAAA;AAAA,QACf,YAAA,EAAcA,QAAA;AAAA,UACZ,qFAAA;AAAA,UACA,KAAA,CAAM,SAAS,OAAA,IAAW;AAAA,SAC5B;AAAA,QACA,SAAA,EAAW,8BAAA;AAAA,QACX,WAAA,EACE,yHAAA;AAAA,QACF,YAAA,EAAc,0BAAA;AAAA,QACd,gBAAA,EAAkB,uDAAA;AAAA,QAClB,UAAA,EAAY,WAAA;AAAA,QACZ,SAAA,EAAW,0BAAA;AAAA,QACX,GAAG;AAAA,OACL;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;ACtCA,MAAM,WAAA,GAAc,CAAC,IAAA,EAAM,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,MAAM,IAAI,CAAA;AAClF,MAAM,gBAAgB,CAAC,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAI,CAAA;AACnD,MAAM,iBAAA,GAAoB,CAAC,IAAA,EAAM,IAAI,CAAA;AAE9B,SAAS,UAAA,CAAW,EAAE,YAAA,EAAc,aAAA,EAAe,WAAU,EAAoB;AACtF,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAiB,IAAI,CAAA;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAiB,IAAI,CAAA;AACjD,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,IAAI,CAAA;AAEjD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,MAAM,SAAA,GAAY,iDAAA;AAClB,MAAA,MAAM,KAAA,GAAQ,YAAA,CAAa,KAAA,CAAM,SAAS,CAAA;AAE1C,MAAA,IAAI,KAAA,EAAO;AACT,QAAA,IAAI,UAAA,GAAa,QAAA,CAAS,KAAA,CAAM,CAAC,GAAG,EAAE,CAAA;AACtC,QAAA,MAAM,YAAA,GAAe,QAAA,CAAS,KAAA,CAAM,CAAC,GAAG,EAAE,CAAA;AAC1C,QAAA,MAAM,MAAA,GAAS,KAAA,CAAM,CAAC,CAAA,EAAG,WAAA,EAAY;AAErC,QAAA,IAAI,cAAc,CAAA,IAAK,UAAA,IAAc,MAAM,YAAA,IAAgB,CAAA,IAAK,gBAAgB,EAAA,EAAI;AAClF,UAAA,OAAA,CAAQ,UAAA,CAAW,UAAU,CAAA;AAC7B,UAAA,SAAA,CAAU,YAAA,KAAiB,CAAA,GAAI,IAAA,GAAO,YAAA,CAAa,UAAU,CAAA;AAC7D,UAAA,aAAA,CAAc,UAAU,IAAI,CAAA;AAAA,QAC9B;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,MAAM,gBAAA,GAAmB,CAAC,GAAA,KAAgB;AACxC,IAAA,OAAA,CAAQ,GAAG,CAAA;AACX,IAAA,aAAA,CAAc,CAAA,EAAG,WAAA,CAAY,CAAC,GAAG,CAAC,CAAA,CAAA,EAAI,MAAM,CAAA,CAAA,EAAI,UAAU,CAAA,CAAA,CAAG,IAAA,EAAM,CAAA;AAAA,EACrE,CAAA;AAEA,EAAA,MAAM,kBAAA,GAAqB,CAAC,GAAA,KAAgB;AAC1C,IAAA,SAAA,CAAU,aAAA,CAAc,CAAC,GAAG,CAAC,CAAA;AAC7B,IAAA,aAAA,CAAc,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,aAAA,CAAc,CAAC,GAAG,CAAC,CAAA,CAAA,EAAI,UAAU,CAAA,CAAA,CAAG,IAAA,EAAM,CAAA;AAAA,EACrE,CAAA;AAEA,EAAA,MAAM,sBAAA,GAAyB,CAAC,GAAA,KAAgB;AAC9C,IAAA,aAAA,CAAc,iBAAA,CAAkB,CAAC,GAAG,CAAC,CAAA;AACrC,IAAA,aAAA,CAAc,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,MAAM,CAAA,CAAA,EAAI,iBAAA,CAAkB,CAAC,GAAG,CAAC,CAAA,CAAA,CAAG,IAAA,EAAM,CAAA;AAAA,EACrE,CAAA;AAEA,EAAA,uCACG,KAAA,EAAA,EAAI,SAAA,EAAWF,QAAA,CAAG,yBAAA,EAA2B,SAAS,CAAA,EACrD,QAAA,EAAA;AAAA,oBAAAG,eAAA,CAACC,aAAA,EAAA,EAAO,IAAA,EAAK,MAAA,EAAO,KAAA,EAAO,WAAA,CAAY,OAAA,CAAQ,IAAI,CAAA,CAAE,QAAA,EAAS,EAAG,aAAA,EAAe,gBAAA,EAC9E,QAAA,EAAA;AAAA,sBAAAN,cAAA,CAACO,wBAAc,IAAA,EAAK,IAAA,EAClB,yCAACC,kBAAA,EAAA,EAAY,WAAA,EAAY,aAAY,CAAA,EACvC,CAAA;AAAA,qCACCC,oBAAA,EAAA,EACE,QAAA,EAAA,WAAA,CAAY,GAAA,CAAI,CAAC,QAAQ,GAAA,qBACxBT,cAAA,CAACU,iBAAA,EAAA,EAAwB,KAAA,EAAO,GAAG,GAAG,CAAA,CAAA,EACnC,QAAA,EAAA,MAAA,EAAA,EADc,MAEjB,CACD,CAAA,EACH;AAAA,KAAA,EACF,CAAA;AAAA,IAAS,GAAA;AAAA,oBAETL,eAAA,CAACC,aAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,KAAA,EAAO,aAAA,CAAc,OAAA,CAAQ,MAAM,CAAA,CAAE,QAAA,EAAS,EAAG,aAAA,EAAe,kBAAA,EACpF,QAAA,EAAA;AAAA,sBAAAN,cAAA,CAACO,wBAAc,IAAA,EAAK,IAAA,EAClB,yCAACC,kBAAA,EAAA,EAAY,WAAA,EAAY,aAAY,CAAA,EACvC,CAAA;AAAA,qCACCC,oBAAA,EAAA,EACE,QAAA,EAAA,aAAA,CAAc,GAAA,CAAI,CAAC,QAAQ,GAAA,qBAC1BT,cAAA,CAACU,iBAAA,EAAA,EAAwB,KAAA,EAAO,GAAG,GAAG,CAAA,CAAA,EACnC,QAAA,EAAA,MAAA,EAAA,EADc,MAEjB,CACD,CAAA,EACH;AAAA,KAAA,EACF,CAAA;AAAA,oBACAL,eAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,KAAA,EAAO,iBAAA,CAAkB,OAAA,CAAQ,UAAU,EAAE,QAAA,EAAS;AAAA,QACtD,aAAA,EAAe,sBAAA;AAAA,QAEf,QAAA,EAAA;AAAA,0BAAAN,cAAA,CAACO,wBAAc,IAAA,EAAK,IAAA,EAClB,yCAACC,kBAAA,EAAA,EAAY,WAAA,EAAY,aAAY,CAAA,EACvC,CAAA;AAAA,yCACCC,oBAAA,EAAA,EACE,QAAA,EAAA,iBAAA,CAAkB,GAAA,CAAI,CAAC,QAAQ,GAAA,qBAC9BT,cAAA,CAACU,iBAAA,EAAA,EAAwB,KAAA,EAAO,GAAG,GAAG,CAAA,CAAA,EACnC,QAAA,EAAA,MAAA,EAAA,EADc,MAEjB,CACD,CAAA,EACH;AAAA;AAAA;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;;"}