@cerberus-design/react 0.15.0-next-7669d47 → 0.15.0-next-e5dbdbd

package/build/legacy/index.cjs

@@ -99,6 +99,8 @@ __export(src_exports, {
   NotificationDescription: () => NotificationDescription,
   NotificationHeading: () => NotificationHeading,
   Option: () => Option,
+  OptionGroup: () => OptionGroup,
+  OptionGroupLabel: () => OptionGroupLabel,
   Portal: () => Portal,
   ProgressBar: () => ProgressBar,
   PromptModal: () => PromptModal,
@@ -128,6 +130,7 @@ __export(src_exports, {
   Tooltip: () => Tooltip,
   Tr: () => Tr,
   createNavTriggerProps: () => createNavTriggerProps,
+  createSelectCollection: () => createSelectCollection,
   defineIcons: () => defineIcons,
   formatISOToMilitary: () => formatISOToMilitary,
   formatMilitaryDate: () => formatMilitaryDate,
@@ -157,7 +160,7 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/Modal.tsx
+// src/components/deprecated/Modal.tsx
 var import_css = require("@cerberus/styled-system/css");
 var import_recipes = require("@cerberus/styled-system/recipes");
 var import_react = require("react");
@@ -174,7 +177,7 @@ function ModalEl(props, ref) {
 }
 var Modal = (0, import_react.forwardRef)(ModalEl);
 
-// src/components/ModalHeader.tsx
+// src/components/deprecated/ModalHeader.tsx
 var import_css2 = require("@cerberus/styled-system/css");
 var import_patterns = require("@cerberus/styled-system/patterns");
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -195,7 +198,7 @@ function ModalHeader(props) {
   );
 }
 
-// src/components/ModalHeading.tsx
+// src/components/deprecated/ModalHeading.tsx
 var import_css3 = require("@cerberus/styled-system/css");
 var import_recipes2 = require("@cerberus/styled-system/recipes");
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -203,7 +206,7 @@ function ModalHeading(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { ...props, className: (0, import_css3.cx)(props.className, (0, import_recipes2.modal)().heading) });
 }
 
-// src/components/ModalDescription.tsx
+// src/components/deprecated/ModalDescription.tsx
 var import_css4 = require("@cerberus/styled-system/css");
 var import_recipes3 = require("@cerberus/styled-system/recipes");
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -211,7 +214,7 @@ function ModalDescription(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { ...props, className: (0, import_css4.cx)(props.className, (0, import_recipes3.modal)().description) });
 }
 
-// src/components/NavMenuTrigger.tsx
+// src/components/deprecated/NavMenuTrigger.tsx
 var import_react4 = require("react");
 var import_css6 = require("@cerberus/styled-system/css");
 var import_recipes4 = require("@cerberus/styled-system/recipes");
@@ -274,7 +277,7 @@ function Show(props) {
   }, [condition, children, fallback]);
 }
 
-// src/components/NavMenuTrigger.tsx
+// src/components/deprecated/NavMenuTrigger.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function NavMenuTrigger(props) {
   const {
@@ -336,7 +339,7 @@ function NavMenuTrigger(props) {
   );
 }
 
-// src/components/NavMenuList.tsx
+// src/components/deprecated/NavMenuList.tsx
 var import_react5 = require("react");
 var import_css7 = require("@cerberus/styled-system/css");
 var import_patterns2 = require("@cerberus/styled-system/patterns");
@@ -410,7 +413,7 @@ function NavMenuList(props) {
   ) });
 }
 
-// src/components/NavMenuLink.tsx
+// src/components/deprecated/NavMenuLink.tsx
 var import_css8 = require("@cerberus/styled-system/css");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function NavMenuLink(props) {
@@ -2079,62 +2082,10 @@ function Radio(props) {
   );
 }
 
-// src/components/Select.tsx
-var import_css36 = require("@cerberus/styled-system/css");
-var import_patterns13 = require("@cerberus/styled-system/patterns");
-var import_recipes29 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-function Select(props) {
-  const { describedBy, size, ...nativeProps } = props;
-  const { invalid, ...fieldStates } = useFieldContext();
-  const { icons } = useCerberusContext();
-  const { invalid: InvalidIcon, selectArrow: SelectArrow } = icons;
-  const styles = (0, import_recipes29.select)({
-    size
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: styles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      "select",
-      {
-        ...nativeProps,
-        ...fieldStates,
-        ...describedBy && { "aria-describedby": describedBy },
-        ...invalid && { "aria-invalid": true },
-        className: styles.input
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-      "span",
-      {
-        className: (0, import_css36.cx)(
-          styles.iconStack,
-          (0, import_patterns13.hstack)({
-            gap: "2"
-          })
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            "span",
-            {
-              ...invalid && { "data-invalid": true },
-              className: styles.stateIcon,
-              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(InvalidIcon, {})
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: styles.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectArrow, {}) })
-        ]
-      }
-    )
-  ] });
-}
-function Option(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { ...props });
-}
-
 // src/components/Spinner.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function Spinner(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "svg",
     {
       "aria-busy": "true",
@@ -2144,7 +2095,7 @@ function Spinner(props) {
       width: props.size,
       viewBox: "0 0 24 24",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
         "g",
         {
           fill: "none",
@@ -2153,14 +2104,14 @@ function Spinner(props) {
           strokeLinejoin: "round",
           strokeWidth: 2,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
               "path",
               {
                 strokeDasharray: 16,
                 strokeDashoffset: 16,
                 d: "M12 3c4.97 0 9 4.03 9 9",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     "animate",
                     {
                       fill: "freeze",
@@ -2169,7 +2120,7 @@ function Spinner(props) {
                       values: "16;0"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     "animateTransform",
                     {
                       attributeName: "transform",
@@ -2182,14 +2133,14 @@ function Spinner(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               "path",
               {
                 strokeDasharray: 64,
                 strokeDashoffset: 64,
                 strokeOpacity: 0.3,
                 d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z",
-                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   "animate",
                   {
                     fill: "freeze",
@@ -2209,11 +2160,11 @@ function Spinner(props) {
 
 // src/components/Tabs.client.tsx
 var import_tabs2 = require("@ark-ui/react/tabs");
-var import_css37 = require("@cerberus/styled-system/css");
+var import_css36 = require("@cerberus/styled-system/css");
 
 // src/context/tabs.tsx
 var import_tabs = require("@ark-ui/react/tabs");
-var import_recipes30 = require("@cerberus/styled-system/recipes");
+var import_recipes29 = require("@cerberus/styled-system/recipes");
 var import_react21 = require("react");
 
 // src/utils/localStorage.ts
@@ -2230,14 +2181,14 @@ function setLocalStorage(key, value) {
 }
 
 // src/context/tabs.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var TabsContext = (0, import_react21.createContext)(null);
 function Tabs(props) {
   const { cache, defaultValue, palette, uuid, ...arkProps } = props;
   const [activeTab, setActiveTab] = (0, import_react21.useState)(
     () => cache ? "" : defaultValue
   );
-  const styles = (0, import_recipes30.tabs)({ palette });
+  const styles = (0, import_recipes29.tabs)({ palette });
   const cacheKey = (0, import_react21.useMemo)(
     () => uuid ? `cerberus-tabs-${uuid}` : "cerberus-tabs",
     [uuid]
@@ -2264,7 +2215,7 @@ function Tabs(props) {
     }),
     [activeTab, palette, styles]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TabsContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TabsContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     import_tabs.Tabs.Root,
     {
       ...arkProps,
@@ -2286,18 +2237,18 @@ function useTabsContext() {
 }
 
 // src/components/Tabs.client.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function TabsList(props) {
   const { children, ...tabsProps } = props;
   const { styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     import_tabs2.Tabs.List,
     {
       ...tabsProps,
-      className: (0, import_css37.cx)(tabsProps.className, styles.list),
+      className: (0, import_css36.cx)(tabsProps.className, styles.list),
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TabIndicator, {})
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TabIndicator, {})
       ]
     }
   );
@@ -2305,90 +2256,90 @@ function TabsList(props) {
 var TabList = TabsList;
 function Tab(props) {
   const { styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     import_tabs2.Tabs.Trigger,
     {
       ...props,
-      className: (0, import_css37.cx)(props.className, styles.trigger)
+      className: (0, import_css36.cx)(props.className, styles.trigger)
     }
   );
 }
 function TabIndicator(props) {
   const { styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     import_tabs2.Tabs.Indicator,
     {
       ...props,
-      className: (0, import_css37.cx)(props.className, styles.indicator)
+      className: (0, import_css36.cx)(props.className, styles.indicator)
     }
   );
 }
 function TabPanel(props) {
   const { styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     import_tabs2.Tabs.Content,
     {
       ...props,
-      className: (0, import_css37.cx)(props.className, styles.content)
+      className: (0, import_css36.cx)(props.className, styles.content)
     }
   );
 }
 
 // src/components/Table.tsx
-var import_css38 = require("@cerberus/styled-system/css");
-var import_recipes31 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_css37 = require("@cerberus/styled-system/css");
+var import_recipes30 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function Table(props) {
   const { caption, children, ...nativeProps } = props;
-  const styles = (0, import_recipes31.table)();
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  const styles = (0, import_recipes30.table)();
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "table",
     {
       ...nativeProps,
-      className: (0, import_css38.cx)(nativeProps.className, styles.table),
+      className: (0, import_css37.cx)(nativeProps.className, styles.table),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("caption", { className: styles.caption, children: caption }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("caption", { className: styles.caption, children: caption }),
         children
       ]
     }
   ) });
 }
 function Tr(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("tr", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("tr", { ...props });
 }
 
 // src/components/Thead.tsx
-var import_css39 = require("@cerberus/styled-system/css");
-var import_recipes32 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_css38 = require("@cerberus/styled-system/css");
+var import_recipes31 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function Thead(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("thead", { ...props, className: (0, import_css39.cx)(props.className, (0, import_recipes32.thead)()) });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("thead", { ...props, className: (0, import_css38.cx)(props.className, (0, import_recipes31.thead)()) });
 }
 
 // src/components/Th.tsx
-var import_css40 = require("@cerberus/styled-system/css");
-var import_recipes33 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_css39 = require("@cerberus/styled-system/css");
+var import_recipes32 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function Th(props) {
   const { size, onClick, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     Show,
     {
       when: Boolean(onClick),
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         "th",
         {
           ...nativeProps,
-          className: (0, import_css40.cx)(nativeProps.className, (0, import_recipes33.th)({ size }))
+          className: (0, import_css39.cx)(nativeProps.className, (0, import_recipes32.th)({ size }))
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         "button",
         {
-          className: (0, import_css40.cx)(
+          className: (0, import_css39.cx)(
             nativeProps.className,
-            (0, import_recipes33.th)({ size }),
-            (0, import_css40.css)({
+            (0, import_recipes32.th)({ size }),
+            (0, import_css39.css)({
               alignItems: "center",
               display: "inline-flex",
               justifyContent: "space-between",
@@ -2408,18 +2359,18 @@ function Th(props) {
 }
 
 // src/components/Td.tsx
-var import_css41 = require("@cerberus/styled-system/css");
-var import_recipes34 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_css40 = require("@cerberus/styled-system/css");
+var import_recipes33 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function Td(props) {
   const { size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "td",
     {
       ...nativeProps,
-      className: (0, import_css41.cx)(
+      className: (0, import_css40.cx)(
         nativeProps.className,
-        (0, import_recipes34.td)({
+        (0, import_recipes33.td)({
           size
         })
       )
@@ -2428,18 +2379,18 @@ function Td(props) {
 }
 
 // src/components/Tbody.tsx
-var import_recipes35 = require("@cerberus/styled-system/recipes");
-var import_css42 = require("@cerberus/styled-system/css");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_recipes34 = require("@cerberus/styled-system/recipes");
+var import_css41 = require("@cerberus/styled-system/css");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function Tbody(props) {
   const { decoration, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "tbody",
     {
       ...nativeProps,
-      className: (0, import_css42.cx)(
+      className: (0, import_css41.cx)(
         nativeProps.className,
-        (0, import_recipes35.tbody)({
+        (0, import_recipes34.tbody)({
           decoration
         })
       )
@@ -2448,9 +2399,9 @@ function Tbody(props) {
 }
 
 // src/components/Tag.tsx
-var import_css43 = require("@cerberus/styled-system/css");
-var import_recipes36 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_css42 = require("@cerberus/styled-system/css");
+var import_recipes35 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function Tag(props) {
   const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
   const palette = (props == null ? void 0 : props.palette) ?? "page";
@@ -2459,13 +2410,13 @@ function Tag(props) {
   const closableStyles = isClosable ? closableCss : "";
   const { icons } = useCerberusContext();
   const { close: Close } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "span",
     {
       ...nativeProps,
-      className: (0, import_css43.cx)(
+      className: (0, import_css42.cx)(
         nativeProps.className,
-        (0, import_recipes36.tag)({
+        (0, import_recipes35.tag)({
           gradient,
           palette,
           shape,
@@ -2475,24 +2426,24 @@ function Tag(props) {
       ),
       children: [
         props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "button",
           {
             "aria-label": "Close",
-            className: (0, import_recipes36.iconButton)({
+            className: (0, import_recipes35.iconButton)({
               palette: "action",
               usage: "filled",
               size: "sm"
             }),
             onClick,
-            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Close, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Close, {})
           }
         ) })
       ]
     }
   );
 }
-var closableCss = (0, import_css43.css)({
+var closableCss = (0, import_css42.css)({
   bgColor: "action.bg.active",
   color: "action.text.initial",
   paddingInlineEnd: "0"
@@ -2500,53 +2451,53 @@ var closableCss = (0, import_css43.css)({
 
 // src/components/Text.tsx
 var import_jsx = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function Text(props) {
   const { as = "p", ...pandaJSXProps } = props;
   switch (as) {
     case "h1":
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.H1, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H1, { ...pandaJSXProps });
     case "h2":
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.H2, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H2, { ...pandaJSXProps });
     case "h3":
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.H3, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H3, { ...pandaJSXProps });
     case "h4":
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.H4, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H4, { ...pandaJSXProps });
     case "h5":
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.H5, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H5, { ...pandaJSXProps });
     case "h6":
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.H6, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.H6, { ...pandaJSXProps });
     case "strong":
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.Strong, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.Strong, { ...pandaJSXProps });
     case "em":
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.Em, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.Em, { ...pandaJSXProps });
     case "small":
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.Small, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.Small, { ...pandaJSXProps });
     case "span":
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.Span, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.Span, { ...pandaJSXProps });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx.P, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.P, { ...pandaJSXProps });
   }
 }
 
 // src/components/Textarea.tsx
-var import_css44 = require("@cerberus/styled-system/css");
-var import_recipes37 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_css43 = require("@cerberus/styled-system/css");
+var import_recipes36 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function Textarea(props) {
   const { describedBy, ...nativeProps } = props;
   const { invalid, ...fieldState } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "textarea",
     {
       ...nativeProps,
       ...fieldState,
       ...describedBy && { "aria-describedby": describedBy },
       ...invalid && { "aria-invalid": true },
-      className: (0, import_css44.cx)(
+      className: (0, import_css43.cx)(
         props.className,
-        (0, import_recipes37.input)().input,
-        (0, import_css44.css)({
+        (0, import_recipes36.input)().input,
+        (0, import_css43.css)({
           pxi: "2",
           py: "2",
           resize: "vertical"
@@ -2558,44 +2509,44 @@ function Textarea(props) {
 }
 
 // src/components/Toggle.tsx
-var import_css45 = require("@cerberus/styled-system/css");
-var import_patterns14 = require("@cerberus/styled-system/patterns");
-var import_recipes38 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_css44 = require("@cerberus/styled-system/css");
+var import_patterns13 = require("@cerberus/styled-system/patterns");
+var import_recipes37 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function Toggle(props) {
   const { size, describedBy, ...nativeProps } = props;
-  const styles = (0, import_recipes38.toggle)({ size });
+  const styles = (0, import_recipes37.toggle)({ size });
   const { invalid, ...state } = useFieldContext();
   const { icons } = useCerberusContext();
   const CheckedIcon = icons.toggleChecked;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "span",
     {
-      className: (0, import_css45.cx)("group", styles.track, (0, import_patterns14.hstack)()),
+      className: (0, import_css44.cx)("group", styles.track, (0, import_patterns13.hstack)()),
       "data-checked": props.checked || props.defaultChecked,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "input",
           {
             ...nativeProps,
             ...state,
             ...describedBy && { "aria-describedby": describedBy },
             ...invalid && { "aria-invalid": true },
-            className: (0, import_css45.cx)("peer", styles.input),
+            className: (0, import_css44.cx)("peer", styles.input),
             role: "switch",
             type: "checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "span",
           {
-            className: (0, import_css45.cx)(
+            className: (0, import_css44.cx)(
               styles.thumb,
-              (0, import_patterns14.vstack)({
+              (0, import_patterns13.vstack)({
                 justify: "center"
               })
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CheckedIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CheckedIcon, {})
           }
         )
       ]
@@ -2605,24 +2556,24 @@ function Toggle(props) {
 
 // src/components/Tooltip.tsx
 var import_tooltip = require("@ark-ui/react/tooltip");
-var import_css46 = require("@cerberus/styled-system/css");
-var import_recipes39 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_css45 = require("@cerberus/styled-system/css");
+var import_recipes38 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Tooltip(props) {
   const { content, children, asChild, ...nativeProps } = props;
-  const styles = (0, import_recipes39.tooltip)();
+  const styles = (0, import_recipes38.tooltip)();
   const position = {
     placement: props.position || "top"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tooltip.Tooltip.Root, { openDelay: 400, positioning: position, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, asChild, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tooltip.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tooltip.Tooltip.Root, { openDelay: 400, positioning: position, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, asChild, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tooltip.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
       import_tooltip.Tooltip.Content,
       {
         ...nativeProps,
-        className: (0, import_css46.cx)(nativeProps.className, styles.content),
+        className: (0, import_css45.cx)(nativeProps.className, styles.content),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tooltip.Tooltip.Arrow, { className: styles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tooltip.Tooltip.ArrowTip, { className: styles.arrowTip }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tooltip.Tooltip.Arrow, { className: styles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tooltip.Tooltip.ArrowTip, { className: styles.arrowTip }) }),
           content
         ]
       }
@@ -2630,10 +2581,74 @@ function Tooltip(props) {
   ] });
 }
 
+// src/components/Select.tsx
+var import_select = require("@ark-ui/react/select");
+var import_recipes39 = require("@cerberus/styled-system/recipes");
+var import_css46 = require("@cerberus/styled-system/css");
+var import_jsx2 = require("@cerberus/styled-system/jsx");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+function Select(props) {
+  const { collection, label: label5, placeholder, size, ...rootProps } = props;
+  const { icons } = useCerberusContext();
+  const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons;
+  const styles = (0, import_recipes39.select)({ size });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    import_select.Select.Root,
+    {
+      className: styles.root,
+      collection,
+      ...rootProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_select.Select.Label, { className: styles.label, children: [
+          label5,
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Show, { when: props.required, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { as: "span", color: "page.text.100", children: "(required)" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.Control, { className: styles.control, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_select.Select.Trigger, { className: styles.trigger, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.ValueText, { placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx2.HStack, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Show, { when: props.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(InvalidIcon, { "data-part": "invalid-icon" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.Indicator, { className: styles.indicator, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectArrow, {}) })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.Positioner, { className: styles.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.Content, { className: styles.content, children: props.children }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.HiddenSelect, {})
+      ]
+    }
+  );
+}
+function Option(props) {
+  const { item, ...itemProps } = props;
+  const { icons } = useCerberusContext();
+  const { selectChecked: CheckedIcon } = icons;
+  const styles = (0, import_recipes39.select)();
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_select.Select.Item, { ...itemProps, item, className: styles.item, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.ItemText, { className: styles.itemText, children: item == null ? void 0 : item.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.ItemIndicator, { className: styles.itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CheckedIcon, {}) })
+  ] });
+}
+function OptionGroup(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_select.Select.ItemGroup, { ...props });
+}
+function OptionGroupLabel(props) {
+  const styles = (0, import_recipes39.select)();
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    import_select.Select.ItemGroupLabel,
+    {
+      ...props,
+      className: (0, import_css46.cx)(props.className, styles.itemGroupLabel)
+    }
+  );
+}
+function createSelectCollection(collection) {
+  return (0, import_select.createListCollection)({
+    items: collection
+  });
+}
+
 // src/context/confirm-modal.tsx
 var import_react22 = require("react");
 var import_css47 = require("@cerberus/styled-system/css");
-var import_jsx2 = require("@cerberus/styled-system/jsx");
+var import_jsx3 = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var ConfirmModalContext = (0, import_react22.createContext)(null);
 function ConfirmModal(props) {
@@ -2677,10 +2692,10 @@ function ConfirmModal(props) {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx3.VStack, { gap: "xl", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx3.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-          import_jsx2.HStack,
+          import_jsx3.HStack,
           {
             alignSelf: "center",
             justify: "center",
@@ -2715,7 +2730,7 @@ function ConfirmModal(props) {
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx2.HStack, { gap: "4", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx3.HStack, { gap: "4", w: "full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           Button,
           {
@@ -2759,9 +2774,9 @@ function useConfirmModal() {
 
 // src/context/cta-modal.tsx
 var import_react23 = require("react");
-var import_jsx3 = require("@cerberus/styled-system/jsx");
-var import_css48 = require("@cerberus/styled-system/css");
 var import_jsx4 = require("@cerberus/styled-system/jsx");
+var import_css48 = require("@cerberus/styled-system/css");
+var import_jsx5 = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var CTAModalContext = (0, import_react23.createContext)(null);
 function CTAModal(props) {
@@ -2804,8 +2819,8 @@ function CTAModal(props) {
     props.children,
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Dialog, { size: "sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DialogCloseIconTrigger, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx4.VStack, { gap: "xl", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_jsx4.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx4.VStack, { gap: "lg", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx5.VStack, { gap: "xl", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_jsx5.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx5.VStack, { gap: "lg", w: "full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Avatar,
             {
@@ -2825,7 +2840,7 @@ function CTAModal(props) {
           /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
           /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_jsx3.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime57.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_jsx4.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime57.jsx)(
           Button,
           {
             "data-index": index,
@@ -2853,7 +2868,7 @@ function useCTAModal() {
 
 // src/context/notification-center.tsx
 var import_react24 = require("react");
-var import_patterns15 = require("@cerberus/styled-system/patterns");
+var import_patterns14 = require("@cerberus/styled-system/patterns");
 var import_recipes40 = require("@cerberus/styled-system/recipes");
 var import_css49 = require("@cerberus/styled-system/css");
 
@@ -2948,7 +2963,7 @@ function NotificationCenter(props) {
       /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Show, { when: state.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         Button,
         {
-          className: (0, import_css49.cx)(styles.closeAll, (0, import_patterns15.animateIn)()),
+          className: (0, import_css49.cx)(styles.closeAll, (0, import_patterns14.animateIn)()),
           onClick: handleCloseAll,
           palette: "action",
           shape: "rounded",
@@ -2960,7 +2975,7 @@ function NotificationCenter(props) {
       /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         "div",
         {
-          className: (0, import_patterns15.vstack)({
+          className: (0, import_patterns14.vstack)({
             alignItems: "flex-end",
             gap: "4"
           }),
@@ -3029,8 +3044,8 @@ function useNotificationCenter() {
 // src/context/prompt-modal.tsx
 var import_react25 = require("react");
 var import_css50 = require("@cerberus/styled-system/css");
-var import_patterns16 = require("@cerberus/styled-system/patterns");
-var import_jsx5 = require("@cerberus/styled-system/jsx");
+var import_patterns15 = require("@cerberus/styled-system/patterns");
+var import_jsx6 = require("@cerberus/styled-system/jsx");
 var import_react26 = require("@ark-ui/react");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var PromptModalContext = (0, import_react25.createContext)(null);
@@ -3084,10 +3099,10 @@ function PromptModal(props) {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx5.VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx5.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx6.VStack, { gap: "xl", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx6.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-          import_jsx5.HStack,
+          import_jsx6.HStack,
           {
             alignSelf: "center",
             justify: "center",
@@ -3123,7 +3138,7 @@ function PromptModal(props) {
         /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        import_jsx5.VStack,
+        import_jsx6.VStack,
         {
           alignItems: "flex-start",
           marginBlockStart: "md",
@@ -3133,7 +3148,7 @@ function PromptModal(props) {
             /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
               Label,
               {
-                className: (0, import_patterns16.hstack)({
+                className: (0, import_patterns15.hstack)({
                   gap: "xs",
                   justify: "flex-start !important"
                 }),
@@ -3158,7 +3173,7 @@ function PromptModal(props) {
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx5.HStack, { gap: "md", justify: "stretch", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx6.HStack, { gap: "md", justify: "stretch", w: "full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           Button,
           {
@@ -3696,6 +3711,8 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   NotificationDescription,
   NotificationHeading,
   Option,
+  OptionGroup,
+  OptionGroupLabel,
   Portal,
   ProgressBar,
   PromptModal,
@@ -3725,6 +3742,7 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   Tooltip,
   Tr,
   createNavTriggerProps,
+  createSelectCollection,
   defineIcons,
   formatISOToMilitary,
   formatMilitaryDate,