@cerberus-design/react 0.13.2 → 0.14.0

package/build/legacy/components/DatePicker.client.cjs

@@ -0,0 +1,497 @@
+"use strict";
+"use client";
+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);
+
+// src/components/DatePicker.client.tsx
+var DatePicker_client_exports = {};
+__export(DatePicker_client_exports, {
+  DatePicker: () => DatePicker,
+  DatePickerCalendar: () => DatePickerCalendar,
+  DatePickerContent: () => DatePickerContent,
+  DatePickerDayView: () => DatePickerDayView,
+  DatePickerInput: () => DatePickerInput,
+  DatePickerMonthView: () => DatePickerMonthView,
+  DatePickerYearView: () => DatePickerYearView,
+  RangePickerInput: () => RangePickerInput
+});
+module.exports = __toCommonJS(DatePicker_client_exports);
+var import_react4 = require("@ark-ui/react");
+
+// src/components/Portal.tsx
+var import_react = require("@ark-ui/react");
+var Portal = import_react.Portal;
+
+// src/components/DatePicker.client.tsx
+var import_recipes4 = require("@cerberus/styled-system/recipes");
+var import_css4 = require("@cerberus/styled-system/css");
+
+// src/context/field.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FieldContext = (0, import_react2.createContext)(null);
+function useFieldContext() {
+  const context = (0, import_react2.useContext)(FieldContext);
+  if (!context) {
+    throw new Error("useFieldContext must be used within a Field Provider.");
+  }
+  return context;
+}
+
+// src/components/DatePicker.server.tsx
+var import_react3 = require("@ark-ui/react");
+var import_css3 = require("@cerberus/styled-system/css");
+var import_recipes3 = require("@cerberus/styled-system/recipes");
+
+// src/config/cerbIcons.ts
+var import_icons = require("@cerberus/icons");
+
+// src/config/icons/checkbox.icons.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function CheckmarkIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      role: "img",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z"
+        }
+      )
+    }
+  );
+}
+function IndeterminateIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
+    }
+  );
+}
+
+// src/components/AnimatingUploadIcon.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function AnimatingUploadIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.size ?? "1em",
+      height: props.size ?? "1em",
+      viewBox: "0 0 24 24",
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "g",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "square",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                "data-name": "animating-trail",
+                strokeDasharray: "2 4",
+                strokeDashoffset: 6,
+                d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "animate",
+                  {
+                    attributeName: "stroke-dashoffset",
+                    dur: "0.45s",
+                    repeatCount: "indefinite",
+                    values: "6;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                "data-name": "half-circle",
+                strokeDasharray: 32,
+                strokeDashoffset: 32,
+                d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "animate",
+                  {
+                    fill: "freeze",
+                    attributeName: "stroke-dashoffset",
+                    begin: "0.075s",
+                    dur: "0.3s",
+                    values: "32;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "svg",
+              {
+                "aria-hidden": "true",
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "0.8em",
+                height: "0.8em",
+                x: "27%",
+                y: "27%",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "polygon",
+                  {
+                    fill: "currentColor",
+                    stroke: "currentColor",
+                    strokeWidth: 0.8,
+                    opacity: "1",
+                    points: "3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 ",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "animate",
+                      {
+                        fill: "freeze",
+                        attributeName: "opacity",
+                        values: "1;0;1",
+                        dur: "2s",
+                        repeatCount: "indefinite"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/config/cerbIcons.ts
+var defaultIcons = {
+  avatar: import_icons.UserFilled,
+  calendar: import_icons.Calendar,
+  calendarPrev: import_icons.ChevronLeft,
+  calendarNext: import_icons.ChevronRight,
+  checkbox: CheckmarkIcon,
+  close: import_icons.Close,
+  confirmModal: import_icons.Information,
+  delete: import_icons.TrashCan,
+  promptModal: import_icons.Information,
+  waitingFileUploader: import_icons.CloudUpload,
+  fileUploader: AnimatingUploadIcon,
+  indeterminate: IndeterminateIcon,
+  infoNotification: import_icons.Information,
+  successNotification: import_icons.CheckmarkOutline,
+  warningNotification: import_icons.WarningAlt,
+  dangerNotification: import_icons.WarningFilled,
+  invalid: import_icons.WarningFilled,
+  invalidAlt: import_icons.Warning,
+  redo: import_icons.Restart,
+  selectArrow: import_icons.ChevronDown,
+  toggleChecked: import_icons.Checkmark
+};
+
+// src/config/defineIcons.ts
+var $cerberusIcons = defaultIcons;
+
+// src/components/IconButton.tsx
+var import_css = require("@cerberus/styled-system/css");
+var import_recipes = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function IconButton(props) {
+  const { ariaLabel, palette, usage, size, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      ...nativeProps,
+      "aria-label": ariaLabel ?? "Icon Button",
+      className: (0, import_css.cx)(
+        nativeProps.className,
+        (0, import_recipes.iconButton)({
+          palette,
+          usage,
+          size
+        })
+      )
+    }
+  );
+}
+
+// src/components/Button.tsx
+var import_css2 = require("@cerberus/styled-system/css");
+var import_recipes2 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Button(props) {
+  const { palette, usage, shape, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "button",
+    {
+      ...nativeProps,
+      className: (0, import_css2.cx)(
+        nativeProps.className,
+        (0, import_recipes2.button)({
+          palette,
+          usage,
+          shape
+        })
+      )
+    }
+  );
+}
+
+// src/components/DatePicker.server.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var datePickerStyles = (0, import_recipes3.datePicker)();
+function DatePickerTrigger(props) {
+  const { calendar: CalendarIcon } = $cerberusIcons;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react3.DatePicker.Trigger,
+    {
+      ...props,
+      className: (0, import_css3.cx)(
+        props.className,
+        (0, import_recipes3.iconButton)({
+          size: "sm",
+          usage: "ghost"
+        }),
+        datePickerStyles.trigger
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CalendarIcon, {})
+    }
+  );
+}
+function DatePickerViewControl(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react3.DatePicker.Control,
+    {
+      ...props,
+      className: (0, import_css3.cx)(props.className, datePickerStyles.viewControl)
+    }
+  );
+}
+function DatePickerViewControlGroup(props) {
+  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = $cerberusIcons;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DatePickerViewControl, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.DatePicker.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PrevIcon, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.DatePicker.ViewTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Button,
+      {
+        className: (0, import_css3.css)({
+          h: "2rem",
+          paddingInline: "md"
+        }),
+        shape: "rounded",
+        size: "sm",
+        usage: "ghost",
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.DatePicker.RangeText, {})
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.DatePicker.NextTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NextIcon, {}) }) })
+  ] });
+}
+function DatePickerTable(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react3.DatePicker.Table,
+    {
+      ...props,
+      className: (0, import_css3.cx)(props.className, datePickerStyles.table)
+    }
+  );
+}
+function DatePickerTableHeader(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react3.DatePicker.TableHeader,
+    {
+      ...props,
+      className: (0, import_css3.cx)(props.className, datePickerStyles.tableHeader)
+    }
+  );
+}
+function DatePickerTableCell(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react3.DatePicker.TableCell,
+    {
+      ...props,
+      className: (0, import_css3.cx)(props.className, datePickerStyles.tableCell)
+    }
+  );
+}
+function DatePickerTableCellTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react3.DatePicker.TableCellTrigger,
+    {
+      ...props,
+      className: (0, import_css3.cx)(props.className, datePickerStyles.tableCellTrigger)
+    }
+  );
+}
+var DatePickerView = import_react3.DatePicker.View;
+var DatePickerContext = import_react3.DatePicker.Context;
+
+// src/components/DatePicker.client.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var datePickerStyles2 = (0, import_recipes4.datePicker)();
+function DatePicker(props) {
+  const states = useFieldContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react4.DatePicker.Root,
+    {
+      ...props,
+      ...states,
+      positioning: {
+        placement: "bottom-start"
+      }
+    }
+  );
+}
+function DatePickerInput(props) {
+  const { invalid, ...fieldStates } = useFieldContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react4.DatePicker.Control, { className: datePickerStyles2.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTrigger, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react4.DatePicker.Input,
+      {
+        ...props,
+        ...fieldStates,
+        ...invalid && { "aria-invalid": true },
+        className: (0, import_css4.cx)(props.className, datePickerStyles2.input),
+        placeholder: props.placeholder ?? "DD MMM YYYY",
+        maxLength: 11
+      }
+    )
+  ] });
+}
+function RangePickerInput(props) {
+  const { invalid, ...fieldStates } = useFieldContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react4.DatePicker.Control, { "data-range": true, className: datePickerStyles2.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTrigger, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react4.DatePicker.Input,
+      {
+        ...props,
+        ...fieldStates,
+        ...invalid && { "aria-invalid": true },
+        "data-range-input": true,
+        className: (0, import_css4.cx)(props.className, datePickerStyles2.input),
+        placeholder: props.placeholder ?? "DD MMM YYYY",
+        maxLength: 11,
+        index: 0
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react4.DatePicker.Input,
+      {
+        ...props,
+        ...fieldStates,
+        ...invalid && { "aria-invalid": true },
+        "data-range-input": true,
+        "data-range-end-input": true,
+        className: (0, import_css4.cx)(props.className, datePickerStyles2.input),
+        placeholder: props.placeholder ?? "DD MMM YYYY",
+        maxLength: 11,
+        index: 1
+      }
+    )
+  ] });
+}
+function DatePickerContent(props) {
+  const { children, ...contentProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.Positioner, { className: datePickerStyles2.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react4.DatePicker.Content,
+    {
+      ...contentProps,
+      className: (0, import_css4.cx)(contentProps.className, datePickerStyles2.content),
+      children
+    }
+  ) }) });
+}
+function DatePickerDayView(props) {
+  function isToday(date) {
+    const today = /* @__PURE__ */ new Date();
+    const formatted = today.toISOString().split("T")[0];
+    const arkDate = `${date.year}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}`;
+    return formatted === arkDate;
+  }
+  function isPastDay(date) {
+    const today = /* @__PURE__ */ new Date();
+    const arkDate = `${date.year}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}`;
+    return new Date(arkDate) < today;
+  }
+  function getDayValue(date) {
+    if (isToday(date)) return "today";
+    if (isPastDay(date)) return "past";
+    return "future";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerView, { ...props, view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerContext, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DatePickerTable, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableRow, { children: datePicker3.weekDays.map((weekDay, id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableHeader, { children: weekDay.narrow }, id)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableBody, { children: datePicker3.weeks.map((week, id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableCell, { value: day, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        DatePickerTableCellTrigger,
+        {
+          "data-date": getDayValue(day),
+          children: day.day
+        }
+      ) }, id2)) }, id)) })
+    ] })
+  ] }) }) });
+}
+function DatePickerMonthView(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.View, { ...props, view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableBody, { children: datePicker3.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableCell, { value: month.value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
+  ] }) }) });
+}
+function DatePickerYearView(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.View, { ...props, view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableBody, { children: datePicker3.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.DatePicker.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
+  ] }) }) });
+}
+function DatePickerCalendar() {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DatePickerContent, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerDayView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerMonthView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerYearView, {})
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DatePicker,
+  DatePickerCalendar,
+  DatePickerContent,
+  DatePickerDayView,
+  DatePickerInput,
+  DatePickerMonthView,
+  DatePickerYearView,
+  RangePickerInput
+});
+//# sourceMappingURL=DatePicker.client.cjs.map

package/build/legacy/components/DatePicker.client.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DatePicker.client.tsx","../../../src/components/Portal.tsx","../../../src/context/field.tsx","../../../src/components/DatePicker.server.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts","../../../src/components/IconButton.tsx","../../../src/components/Button.tsx"],"sourcesContent":["'use client'\n\nimport {\n  DatePicker as ArkDP,\n  type DatePickerContentProps,\n  type DatePickerInputProps,\n  type DatePickerRootProps,\n  type DatePickerViewProps,\n  // type DateValue,\n} from '@ark-ui/react'\nimport { Portal } from './Portal'\n// import { useCallback } from 'react'\nimport { datePicker } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport {\n  DatePickerTrigger,\n  DatePickerView,\n  DatePickerContext,\n  DatePickerViewControlGroup,\n  DatePickerTable,\n  DatePickerTableHeader,\n  DatePickerTableCellTrigger,\n  DatePickerTableCell,\n} from './DatePicker.server'\n// import { formatISOToMilitary } from '../hooks/useDate'\n\n/**\n * This module contains the DatePicker client family components.\n * @module DatePicker:client\n */\n\n// We are not exposing this to the public API\nconst datePickerStyles = datePicker()\n\n/**\n * The main context provider for the DatePicker family components.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePicker(props: DatePickerRootProps) {\n  const states = useFieldContext()\n\n  // TODO: Remove this once the bug is fixed: https://github.com/chakra-ui/ark/issues/3112\n\n  // There is a bug with the Root component that causes random date selection\n  // onBlur after the first selection if the format prop is used.\n  // const handleFormat = useCallback((value: DateValue) => {\n  //   return formatISOToMilitary(value.toString())\n  // }, [])\n\n  return (\n    <ArkDP.Root\n      {...props}\n      {...states}\n      positioning={{\n        placement: 'bottom-start',\n      }}\n    />\n  )\n}\n\n/**\n * The input component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerInput(props: DatePickerInputProps) {\n  const { invalid, ...fieldStates } = useFieldContext()\n  return (\n    <ArkDP.Control className={datePickerStyles.control}>\n      <DatePickerTrigger />\n      <ArkDP.Input\n        {...props}\n        {...fieldStates}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx(props.className, datePickerStyles.input)}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n      />\n    </ArkDP.Control>\n  )\n}\n\n/**\n * The input component for the DatePicker that uses ranges.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\" selection=\"range\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <RangePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function RangePickerInput(props: DatePickerInputProps) {\n  const { invalid, ...fieldStates } = useFieldContext()\n  return (\n    <ArkDP.Control data-range className={datePickerStyles.control}>\n      <DatePickerTrigger />\n      <ArkDP.Input\n        {...props}\n        {...fieldStates}\n        {...(invalid && { 'aria-invalid': true })}\n        data-range-input\n        className={cx(props.className, datePickerStyles.input)}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n        index={0}\n      />\n      <ArkDP.Input\n        {...props}\n        {...fieldStates}\n        {...(invalid && { 'aria-invalid': true })}\n        data-range-input\n        data-range-end-input\n        className={cx(props.className, datePickerStyles.input)}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n        index={1}\n      />\n    </ArkDP.Control>\n  )\n}\n\n/**\n * The content component for the DatePicker which contains the calendar.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerContent(props: DatePickerContentProps) {\n  const { children, ...contentProps } = props\n  return (\n    <Portal>\n      <ArkDP.Positioner className={datePickerStyles.positioner}>\n        <ArkDP.Content\n          {...contentProps}\n          className={cx(contentProps.className, datePickerStyles.content)}\n        >\n          {children}\n        </ArkDP.Content>\n      </ArkDP.Positioner>\n    </Portal>\n  )\n}\n\n/**\n * The day view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerDayView(props: Omit<DatePickerViewProps, 'view'>) {\n  function isToday(date: ArkDP.DateValue): boolean {\n    const today = new Date()\n    const formatted = today.toISOString().split('T')[0]\n    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n    return formatted === arkDate\n  }\n\n  function isPastDay(date: ArkDP.DateValue): boolean {\n    const today = new Date()\n    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n    return new Date(arkDate) < today\n  }\n\n  function getDayValue(date: ArkDP.DateValue): 'today' | 'past' | 'future' {\n    if (isToday(date)) return 'today'\n    if (isPastDay(date)) return 'past'\n    return 'future'\n  }\n\n  return (\n    <DatePickerView {...props} view=\"day\">\n      <DatePickerContext>\n        {(datePicker) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerTable>\n              <ArkDP.TableHead>\n                <ArkDP.TableRow>\n                  {datePicker.weekDays.map((weekDay, id) => (\n                    <DatePickerTableHeader key={id}>\n                      {weekDay.narrow}\n                    </DatePickerTableHeader>\n                  ))}\n                </ArkDP.TableRow>\n              </ArkDP.TableHead>\n\n              <ArkDP.TableBody>\n                {datePicker.weeks.map((week, id) => (\n                  <ArkDP.TableRow key={id}>\n                    {week.map((day, id) => (\n                      <DatePickerTableCell key={id} value={day}>\n                        <DatePickerTableCellTrigger\n                          data-date={getDayValue(day)}\n                        >\n                          {day.day}\n                        </DatePickerTableCellTrigger>\n                      </DatePickerTableCell>\n                    ))}\n                  </ArkDP.TableRow>\n                ))}\n              </ArkDP.TableBody>\n            </DatePickerTable>\n          </>\n        )}\n      </DatePickerContext>\n    </DatePickerView>\n  )\n}\n\n/**\n * The month view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerMonthView(props: Omit<DatePickerViewProps, 'view'>) {\n  return (\n    <ArkDP.View {...props} view=\"month\">\n      <ArkDP.Context>\n        {(datePicker) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerTable>\n              <ArkDP.TableBody>\n                {datePicker\n                  .getMonthsGrid({ columns: 4, format: 'short' })\n                  .map((months, id) => (\n                    <ArkDP.TableRow key={id}>\n                      {months.map((month, id) => (\n                        <DatePickerTableCell key={id} value={month.value}>\n                          <DatePickerTableCellTrigger>\n                            {month.label}\n                          </DatePickerTableCellTrigger>\n                        </DatePickerTableCell>\n                      ))}\n                    </ArkDP.TableRow>\n                  ))}\n              </ArkDP.TableBody>\n            </DatePickerTable>\n          </>\n        )}\n      </ArkDP.Context>\n    </ArkDP.View>\n  )\n}\n\n/**\n * The year view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {\n  return (\n    <ArkDP.View {...props} view=\"year\">\n      <ArkDP.Context>\n        {(datePicker) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerTable>\n              <ArkDP.TableBody>\n                {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (\n                  <ArkDP.TableRow key={id}>\n                    {years.map((year, id) => (\n                      <DatePickerTableCell key={id} value={year.value}>\n                        <DatePickerTableCellTrigger>\n                          {year.label}\n                        </DatePickerTableCellTrigger>\n                      </DatePickerTableCell>\n                    ))}\n                  </ArkDP.TableRow>\n                ))}\n              </ArkDP.TableBody>\n            </DatePickerTable>\n          </>\n        )}\n      </ArkDP.Context>\n    </ArkDP.View>\n  )\n}\n\n/**\n * An abstraction of the DatePicker content components that contain the\n * different calendar views and controls.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerCalendar() {\n  return (\n    <DatePickerContent>\n      <DatePickerDayView />\n      <DatePickerMonthView />\n      <DatePickerYearView />\n    </DatePickerContent>\n  )\n}\n","import {\n  Portal as ArkPortal,\n  type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n","import {\n  DatePicker as ArkDP,\n  type DatePickerLabelProps,\n  type DatePickerTableCellProps,\n  type DatePickerTableCellTriggerProps,\n  type DatePickerTableHeaderProps,\n  type DatePickerTableProps,\n  type DatePickerTriggerProps,\n  type DatePickerViewControlProps,\n} from '@ark-ui/react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { datePicker, iconButton, label } from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { IconButton } from './IconButton'\nimport { Button } from './Button'\n\n/**\n * This module contains the DatePicker server family components.\n * @module DatePicker\n */\n\n// We are not exposing this to the public API\nconst datePickerStyles = datePicker()\n\n/**\n * The label component for the DatePicker.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerLabel>\n *   <DatePickerLabel.Label>...</DatePickerLabel.Label>\n * </DatePickerLabel>\n * ```\n */\nexport function DatePickerLabel(props: DatePickerLabelProps) {\n  const { className, ...arkProps } = props\n  return (\n    <ArkDP.Label\n      {...arkProps}\n      className={cx(\n        className,\n        label({\n          size: 'sm',\n        }),\n      )}\n    />\n  )\n}\n\n/**\n * The trigger component for the DatePicker which opens the calendar.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTrigger />\n * ```\n */\nexport function DatePickerTrigger(props: DatePickerTriggerProps) {\n  const { calendar: CalendarIcon } = $cerberusIcons\n  return (\n    <ArkDP.Trigger\n      {...props}\n      className={cx(\n        props.className,\n        iconButton({\n          size: 'sm',\n          usage: 'ghost',\n        }),\n        datePickerStyles.trigger,\n      )}\n    >\n      <CalendarIcon />\n    </ArkDP.Trigger>\n  )\n}\n\n/**\n * The control component for the DatePicker which wraps the triggers to switch\n * between calendar views.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerViewControl>\n *   <PrevTrigger />\n *   <ViewTrigger />\n *   <NextTrigger />\n * </DatePickerViewControl>\n * ```\n */\nexport function DatePickerViewControl(props: DatePickerViewControlProps) {\n  return (\n    <ArkDP.Control\n      {...props}\n      className={cx(props.className, datePickerStyles.viewControl)}\n    />\n  )\n}\n\n/**\n * An abstraction of the DatePicker control that contains the prev, view, and\n * next triggers which control the calendar output.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerViewControlGroup />\n * ```\n */\nexport function DatePickerViewControlGroup(props: DatePickerViewControlProps) {\n  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = $cerberusIcons\n  return (\n    <DatePickerViewControl {...props}>\n      <ArkDP.PrevTrigger asChild>\n        <IconButton ariaLabel=\"Previous\" size=\"sm\">\n          <PrevIcon />\n        </IconButton>\n      </ArkDP.PrevTrigger>\n\n      <ArkDP.ViewTrigger asChild>\n        <Button\n          className={css({\n            h: '2rem',\n            paddingInline: 'md',\n          })}\n          shape=\"rounded\"\n          size=\"sm\"\n          usage=\"ghost\"\n        >\n          <ArkDP.RangeText />\n        </Button>\n      </ArkDP.ViewTrigger>\n\n      <ArkDP.NextTrigger asChild>\n        <IconButton ariaLabel=\"Next\" size=\"sm\">\n          <NextIcon />\n        </IconButton>\n      </ArkDP.NextTrigger>\n    </DatePickerViewControl>\n  )\n}\n\n/**\n * The table component for the DatePicker.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTable />\n * ```\n */\nexport function DatePickerTable(props: DatePickerTableProps) {\n  return (\n    <ArkDP.Table\n      {...props}\n      className={cx(props.className, datePickerStyles.table)}\n    />\n  )\n}\n\n/**\n * The header component for the DatePicker table.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTableHeader />\n * ```\n */\nexport function DatePickerTableHeader(props: DatePickerTableHeaderProps) {\n  return (\n    <ArkDP.TableHeader\n      {...props}\n      className={cx(props.className, datePickerStyles.tableHeader)}\n    />\n  )\n}\n\n/**\n * The cell component for the DatePicker table.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTableCell />\n * ```\n */\nexport function DatePickerTableCell(props: DatePickerTableCellProps) {\n  return (\n    <ArkDP.TableCell\n      {...props}\n      className={cx(props.className, datePickerStyles.tableCell)}\n    />\n  )\n}\n\n/**\n * The cell component for the DatePicker table.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTableCell />\n * ```\n */\nexport function DatePickerTableCellTrigger(\n  props: DatePickerTableCellTriggerProps,\n) {\n  return (\n    <ArkDP.TableCellTrigger\n      {...props}\n      className={cx(props.className, datePickerStyles.tableCellTrigger)}\n    />\n  )\n}\n\n/**\n * The view container which wraps the control and content components.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerView />\n * ```\n */\nexport const DatePickerView = ArkDP.View\n\n/**\n * The context component for the DatePicker which provides the DatePicker state.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerContext />\n * ```\n */\nexport const DatePickerContext = ArkDP.Context\n","import {\n  Calendar,\n  Checkmark,\n  CheckmarkOutline,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  Close,\n  CloudUpload,\n  Information,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningAlt,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  calendar?: IconType\n  calendarPrev?: IconType\n  calendarNext?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  waitingFileUploader?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  calendar: Calendar,\n  calendarPrev: ChevronLeft,\n  calendarNext: ChevronRight,\n  checkbox: CheckmarkIcon,\n  close: Close,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  waitingFileUploader: CloudUpload,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n  infoNotification: Information,\n  successNotification: CheckmarkOutline,\n  warningNotification: WarningAlt,\n  dangerNotification: WarningFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\nexport type CheckboxIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\nexport type IndeterminateIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={props.size ?? '1em'}\n      height={props.size ?? '1em'}\n      viewBox=\"0 0 24 24\"\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"square\"\n        strokeLinejoin=\"round\"\n        strokeWidth={1.5}\n      >\n        <path\n          data-name=\"animating-trail\"\n          strokeDasharray=\"2 4\"\n          strokeDashoffset={6}\n          d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n        >\n          <animate\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.45s\"\n            repeatCount=\"indefinite\"\n            values=\"6;0\"\n          ></animate>\n        </path>\n\n        <path\n          data-name=\"half-circle\"\n          strokeDasharray={32}\n          strokeDashoffset={32}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            begin=\"0.075s\"\n            dur=\"0.3s\"\n            values=\"32;0\"\n          ></animate>\n        </path>\n\n        <svg\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"0.8em\"\n          height=\"0.8em\"\n          x=\"27%\"\n          y=\"27%\"\n          viewBox=\"0 0 24 24\"\n        >\n          <polygon\n            fill=\"currentColor\"\n            stroke=\"currentColor\"\n            strokeWidth={0.8}\n            opacity=\"1\"\n            points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n          >\n            <animate\n              fill=\"freeze\"\n              attributeName=\"opacity\"\n              values=\"1;0;1\"\n              dur=\"2s\"\n              repeatCount=\"indefinite\"\n            ></animate>\n          </polygon>\n        </svg>\n      </g>\n    </svg>\n  )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n  _validateIconsProperties(icons)\n  $cerberusIcons = {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons>\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  iconButton,\n  type IconButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The aria-label attribute for the icon button.\n   */\n  ariaLabel: string\n}\nexport type IconButtonProps = IconButtonRawProps & IconButtonVariantProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":"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","names":["import_react","ArkPortal","import_recipes","import_css","import_react","import_react","import_css","import_recipes","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_jsx_runtime","ArkDP","import_jsx_runtime","datePickerStyles","ArkDP","datePicker","id"]}