@cerberus-design/react 0.12.0 → 0.13.1-next-e3e9e48

package/build/legacy/index.cjs

@@ -31,6 +31,7 @@ __export(src_exports, {
   Checkbox: () => Checkbox,
   CircularProgress: () => CircularProgress,
   ConfirmModal: () => ConfirmModal,
+  DateFormats: () => DateFormats,
   Droppable: () => Droppable,
   FeatureFlag: () => FeatureFlag,
   FeatureFlags: () => FeatureFlags,
@@ -87,15 +88,19 @@ __export(src_exports, {
   Thead: () => Thead,
   ThemeProvider: () => ThemeProvider,
   Toggle: () => Toggle,
+  Tooltip: () => Tooltip,
   Tr: () => Tr,
   createNavTriggerProps: () => createNavTriggerProps,
   defineIcons: () => defineIcons,
+  formatMilitaryDate: () => formatMilitaryDate,
+  formatMilitaryToISO: () => formatMilitaryToISO,
   formatNotifyCount: () => formatNotifyCount,
   getPosition: () => getPosition,
   processStatus: () => processStatus,
   trapFocus: () => trapFocus,
   useCTAModal: () => useCTAModal,
   useConfirmModal: () => useConfirmModal,
+  useDate: () => useDate,
   useFeatureFlags: () => useFeatureFlags,
   useFieldContext: () => useFieldContext,
   useModal: () => useModal,
@@ -1724,11 +1729,8 @@ function NotificationDescription(props) {
 // src/components/Portal.tsx
 var import_react_dom = require("react-dom");
 function Portal(props) {
-  if (typeof window !== "undefined") {
-    const container = props.container || document.body;
-    return (0, import_react_dom.createPortal)(props.children, container, props.key);
-  }
-  return null;
+  const container = props.container || document.body;
+  return (0, import_react_dom.createPortal)(props.children, container, props.key);
 }
 
 // src/components/Radio.tsx
@@ -2316,9 +2318,36 @@ function Toggle(props) {
   );
 }
 
+// src/components/Tooltip.tsx
+var import_tooltip = require("@ark-ui/react/tooltip");
+var import_css41 = require("@cerberus/styled-system/css");
+var import_recipes33 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+function Tooltip(props) {
+  const { content, children, ...nativeProps } = props;
+  const styles = (0, import_recipes33.tooltip)();
+  const position = {
+    placement: props.position || "top"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_tooltip.Tooltip.Root, { openDelay: 400, positioning: position, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tooltip.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      import_tooltip.Tooltip.Content,
+      {
+        ...nativeProps,
+        className: (0, import_css41.cx)(nativeProps.className, styles.content),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tooltip.Tooltip.Arrow, { className: styles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tooltip.Tooltip.ArrowTip, { className: styles.arrowTip }) }),
+          content
+        ]
+      }
+    ) })
+  ] });
+}
+
 // src/context/confirm-modal.tsx
 var import_react17 = require("react");
-var import_css41 = require("@cerberus/styled-system/css");
+var import_css42 = require("@cerberus/styled-system/css");
 var import_patterns16 = require("@cerberus/styled-system/patterns");
 
 // src/hooks/useModal.ts
@@ -2347,7 +2376,7 @@ function useModal() {
 }
 
 // src/context/confirm-modal.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var ConfirmModalContext = (0, import_react17.createContext)(null);
 function ConfirmModal(props) {
   const { modalRef, show, close } = useModal();
@@ -2387,36 +2416,36 @@ function ConfirmModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(ConfirmModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "div",
           {
             className: (0, import_patterns16.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -2424,21 +2453,21 @@ function ConfirmModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         "div",
         {
           className: (0, import_patterns16.hstack)({
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               Button,
               {
                 autoFocus: true,
-                className: (0, import_css41.css)({
+                className: (0, import_css42.css)({
                   w: "1/2"
                 }),
                 name: "confirm",
@@ -2448,10 +2477,10 @@ function ConfirmModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               Button,
               {
-                className: (0, import_css41.css)({
+                className: (0, import_css42.css)({
                   w: "1/2"
                 }),
                 name: "cancel",
@@ -2480,9 +2509,9 @@ function useConfirmModal() {
 // src/context/cta-modal.tsx
 var import_react18 = require("react");
 var import_jsx = require("@cerberus/styled-system/jsx");
-var import_css42 = require("@cerberus/styled-system/css");
+var import_css43 = require("@cerberus/styled-system/css");
 var import_jsx2 = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var CTAModalContext = (0, import_react18.createContext)(null);
 function CTAModal(props) {
   var _a, _b;
@@ -2522,49 +2551,49 @@ function CTAModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(CTAModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(CTAModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "span",
         {
-          className: (0, import_css42.css)({
+          className: (0, import_css43.css)({
             padding: "md",
             position: "absolute",
             right: 0,
             top: 0,
             zIndex: "decorator"
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(CloseIcon, {}) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(CloseIcon, {}) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx.HStack, { justify: "center", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.HStack, { justify: "center", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           Avatar,
           {
             ariaLabel: "",
             gradient: "charon-light",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               Show,
               {
                 when: Boolean(confirmIcon),
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FallbackIcon, { size: 24 }),
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(FallbackIcon, { size: 24 }),
                 children: confirmIcon
               }
             ),
             src: ""
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx.HStack, { gap: "md", pt: "sm", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Show, { when: Boolean((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.length), children: (_b = content == null ? void 0 : content.actions) == null ? void 0 : _b.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.HStack, { gap: "md", pt: "sm", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Show, { when: Boolean((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.length), children: (_b = content == null ? void 0 : content.actions) == null ? void 0 : _b.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         Button,
         {
           "data-index": index,
-          className: (0, import_css42.css)({
+          className: (0, import_css43.css)({
             w: "1/2"
           }),
           onClick: handleActionClick,
@@ -2588,13 +2617,13 @@ function useCTAModal() {
 // src/context/notification-center.tsx
 var import_react19 = require("react");
 var import_patterns17 = require("@cerberus/styled-system/patterns");
-var import_recipes33 = require("@cerberus/styled-system/recipes");
-var import_css43 = require("@cerberus/styled-system/css");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_recipes34 = require("@cerberus/styled-system/recipes");
+var import_css44 = require("@cerberus/styled-system/css");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var NotificationsContext = (0, import_react19.createContext)(null);
 function NotificationCenter(props) {
   const [activeNotifications, setActiveNotifications] = (0, import_react19.useState)([]);
-  const styles = (0, import_recipes33.notification)();
+  const styles = (0, import_recipes34.notification)();
   const handleNotify = (0, import_react19.useCallback)((options) => {
     setActiveNotifications((prev) => {
       const id = `${options.palette}:${prev.length + 1}`;
@@ -2623,22 +2652,22 @@ function NotificationCenter(props) {
     }),
     [handleNotify]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(NotificationsContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(NotificationsContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: styles.center, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: styles.center, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         Button,
         {
-          className: (0, import_css43.cx)(styles.closeAll, (0, import_patterns17.animateIn)()),
+          className: (0, import_css44.cx)(styles.closeAll, (0, import_patterns17.animateIn)()),
           onClick: handleCloseAll,
           palette: "action",
           shape: "rounded",
           size: "sm",
-          usage: "text",
+          usage: "ghost",
           children: "Close all"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "div",
         {
           className: (0, import_patterns17.vstack)({
@@ -2648,7 +2677,7 @@ function NotificationCenter(props) {
           style: {
             alignItems: "flex-end"
           },
-          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             MatchNotification,
             {
               ...option,
@@ -2665,7 +2694,7 @@ function MatchNotification(props) {
   const { palette, id, onClose, heading, description } = props;
   switch (palette) {
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         Notification,
         {
           id,
@@ -2673,14 +2702,14 @@ function MatchNotification(props) {
           open: true,
           palette: "success",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationHeading, { palette: "success", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationDescription, { palette: "success", children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationHeading, { palette: "success", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationDescription, { palette: "success", children: description })
           ]
         },
         id
       );
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         Notification,
         {
           id,
@@ -2688,22 +2717,22 @@ function MatchNotification(props) {
           open: true,
           palette: "warning",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationHeading, { palette: "warning", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationDescription, { palette: "warning", children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationHeading, { palette: "warning", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationDescription, { palette: "warning", children: description })
           ]
         },
         id
       );
     case "danger":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Notification, { id, onClose, open: true, palette: "danger", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationHeading, { palette: "danger", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationDescription, { palette: "danger", children: description })
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Notification, { id, onClose, open: true, palette: "danger", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationHeading, { palette: "danger", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationDescription, { palette: "danger", children: description })
       ] }, id);
     case "info":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Notification, { id, onClose, open: true, palette: "info", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationHeading, { palette: "info", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationDescription, { palette: "info", children: description })
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Notification, { id, onClose, open: true, palette: "info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationHeading, { palette: "info", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationDescription, { palette: "info", children: description })
       ] }, id);
   }
 }
@@ -2719,9 +2748,9 @@ function useNotificationCenter() {
 
 // src/context/prompt-modal.tsx
 var import_react20 = require("react");
-var import_css44 = require("@cerberus/styled-system/css");
+var import_css45 = require("@cerberus/styled-system/css");
 var import_patterns18 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var PromptModalContext = (0, import_react20.createContext)(null);
 function PromptModal(props) {
   const { modalRef, show, close } = useModal();
@@ -2771,36 +2800,36 @@ function PromptModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(PromptModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "div",
           {
             className: (0, import_patterns18.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -2808,10 +2837,10 @@ function PromptModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         "div",
         {
           className: (0, import_patterns18.vstack)({
@@ -2819,11 +2848,11 @@ function PromptModal(props) {
             mt: "4",
             mb: "8"
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Field, { invalid: !isValid, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Field, { invalid: !isValid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
               Label,
               {
-                className: (0, import_css44.css)({
+                className: (0, import_css45.css)({
                   gap: 1,
                   justifyContent: "flex-start"
                 }),
@@ -2831,10 +2860,10 @@ function PromptModal(props) {
                 size: "md",
                 children: [
                   "Type",
-                  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                     "strong",
                     {
-                      className: (0, import_css44.css)({
+                      className: (0, import_css45.css)({
                         textTransform: "uppercase"
                       }),
                       children: content == null ? void 0 : content.key
@@ -2844,7 +2873,7 @@ function PromptModal(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               Input,
               {
                 id: "confirm",
@@ -2856,7 +2885,7 @@ function PromptModal(props) {
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
         "div",
         {
           className: (0, import_patterns18.hstack)({
@@ -2864,11 +2893,11 @@ function PromptModal(props) {
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               Button,
               {
                 autoFocus: true,
-                className: (0, import_css44.css)({
+                className: (0, import_css45.css)({
                   w: "1/2"
                 }),
                 disabled: !isValid,
@@ -2879,10 +2908,10 @@ function PromptModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               Button,
               {
-                className: (0, import_css44.css)({
+                className: (0, import_css45.css)({
                   w: "1/2"
                 }),
                 name: "cancel",
@@ -2973,7 +3002,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
 }
 
 // src/context/theme.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var ThemeContext = (0, import_react22.createContext)(
   null
 );
@@ -2983,7 +3012,7 @@ function ThemeProvider(props) {
     updateMode: props.updateMode,
     updateTheme: props.updateTheme
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ThemeContext.Provider, { value: state, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
   const context = (0, import_react22.useContext)(ThemeContext);
@@ -2993,12 +3022,99 @@ function useThemeContext() {
   return context;
 }
 
-// src/hooks/useToggle.ts
+// src/hooks/useDate.ts
 var import_react23 = require("react");
-function useToggle(options) {
-  const [checked, setChecked] = (0, import_react23.useState)((options == null ? void 0 : options.checked) ?? "");
+function useDate(options) {
+  const initialValue = (options == null ? void 0 : options.initialValue) ?? "";
+  const format = (options == null ? void 0 : options.format) ?? DateFormats.USMilitary;
   const onChange = options == null ? void 0 : options.onChange;
+  const [value, setValue] = (0, import_react23.useState)(initialValue);
   const handleChange = (0, import_react23.useCallback)(
+    (e) => {
+      const newValue = formatMilitaryDate(e.currentTarget.value);
+      if (onChange) onChange(e);
+      setValue(newValue);
+    },
+    [onChange]
+  );
+  return (0, import_react23.useMemo)(
+    () => ({
+      format,
+      value,
+      ISO: formatMilitaryToISO(value),
+      onChange: handleChange
+    }),
+    [format, value, handleChange]
+  );
+}
+function formatMilitaryToISO(input3) {
+  const [day, month, year] = input3.split(" ");
+  const monthIndex = MONTHS.findIndex((m) => m.startsWith(month));
+  const monthNum = monthIndex + 1;
+  return `${year ?? "0000"}-${monthNum.toString().padStart(2, "0")}-${day.padStart(
+    2,
+    "0"
+  )}`;
+}
+function formatMilitaryDate(input3) {
+  let formatted = input3.toUpperCase().replace(/[^0-9A-Z]/g, "");
+  let day = "";
+  let month = "";
+  let year = "";
+  if (formatted.length >= 2) {
+    day = formatted.replace(/[^0-9]/g, "").slice(0, 2);
+    const dayNum = parseInt(day, 10);
+    if (dayNum > 31) day = "31";
+    else if (dayNum === 0) day = "01";
+    formatted = formatted.slice(2);
+  }
+  if (formatted.length >= 3) {
+    month = formatted.slice(0, 3);
+    const monthIndex = MONTHS.findIndex((m) => m.startsWith(month));
+    if (monthIndex !== -1) {
+      month = MONTHS[monthIndex];
+    } else {
+      month = month.replace(/[^A-Z]/g, "");
+    }
+    formatted = formatted.slice(3);
+  }
+  if (formatted.length > 0) {
+    year = formatted.slice(0, 4);
+  }
+  return [day, month, year].filter(Boolean).join(" ");
+}
+var DateFormats = {
+  get ISO() {
+    return "YYYY-MM-DD";
+  },
+  get USMilitary() {
+    return "DD MMM YYYY";
+  },
+  get Months() {
+    return MONTHS;
+  }
+};
+var MONTHS = [
+  "JAN",
+  "FEB",
+  "MAR",
+  "APR",
+  "MAY",
+  "JUN",
+  "JUL",
+  "AUG",
+  "SEP",
+  "OCT",
+  "NOV",
+  "DEC"
+];
+
+// src/hooks/useToggle.ts
+var import_react24 = require("react");
+function useToggle(options) {
+  const [checked, setChecked] = (0, import_react24.useState)((options == null ? void 0 : options.checked) ?? "");
+  const onChange = options == null ? void 0 : options.onChange;
+  const handleChange = (0, import_react24.useCallback)(
     (e) => {
       const target = e.currentTarget;
       setChecked((prev) => {
@@ -3008,7 +3124,7 @@ function useToggle(options) {
     },
     [onChange]
   );
-  return (0, import_react23.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
+  return (0, import_react24.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
 }
 
 // src/utils/index.ts
@@ -3031,6 +3147,7 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   Checkbox,
   CircularProgress,
   ConfirmModal,
+  DateFormats,
   Droppable,
   FeatureFlag,
   FeatureFlags,
@@ -3087,15 +3204,19 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   Thead,
   ThemeProvider,
   Toggle,
+  Tooltip,
   Tr,
   createNavTriggerProps,
   defineIcons,
+  formatMilitaryDate,
+  formatMilitaryToISO,
   formatNotifyCount,
   getPosition,
   processStatus,
   trapFocus,
   useCTAModal,
   useConfirmModal,
+  useDate,
   useFeatureFlags,
   useFieldContext,
   useModal,