@muffled-ui/react 1.0.21 → 1.0.23

package/dist/index.js

@@ -83,7 +83,7 @@ __export(index_exports, {
   ClickOutside: () => ClickOutside,
   ClickableElement: () => ClickableElement,
   Collapse: () => Collapse,
-  Container: () => Container5,
+  Container: () => Container10,
   DarkTheme: () => DarkTheme,
   DatePicker: () => DatePicker,
   DateRangePicker: () => DateRangePicker,
@@ -149,6 +149,7 @@ __export(index_exports, {
   TableHead: () => TableHead,
   TableRow: () => TableRow,
   Tabs: () => Tabs,
+  Text: () => Text,
   TextArea: () => TextArea,
   ThemeButton: () => ThemeButton,
   ThemeSwitch: () => ThemeSwitch,
@@ -156,7 +157,6 @@ __export(index_exports, {
   Title: () => Title,
   Tooltip: () => Tooltip,
   TwoColumns: () => TwoColumns,
-  Typography: () => Typography,
   UnorderedList: () => UnorderedList,
   UploadButton: () => UploadButton,
   UploadZone: () => UploadZone,
@@ -184,7 +184,7 @@ var StyledButton = import_styled_components.default.button`
   align-items: center;
   user-select: none;
   border-radius: ${({ theme: theme2 }) => theme2.radii[3]};
-  padding: ${({ theme: theme2 }) => `${theme2.space[2]} ${theme2.space[3]}`};
+  padding: ${({ theme: theme2 }) => `${theme2.space[11]} ${theme2.space[3]}`};
   font-size: ${({ theme: theme2 }) => theme2.fontSizes[1]};
   line-height: ${({ theme: theme2 }) => theme2.lineHeights[1]};
   font-weight: 500;
@@ -327,7 +327,7 @@ var import_styled_components6 = __toESM(require("styled-components"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var StyledButton6 = (0, import_styled_components6.default)(BaseButton)`
   :disabled {
-    background: ${({ theme: theme2 }) => theme2.colors.accent};
+    opacity: 0.4;
   }
   :hover:not(:disabled) {
     background: ${({ theme: theme2 }) => theme2.colors.accent};
@@ -703,16 +703,16 @@ var List = import_styled_components15.default.ul`
   list-style-type: none;
 `;
 
-// src/data/Typography/Typography.tsx
+// src/data/Text/Text.tsx
 var import_styled_components16 = __toESM(require("styled-components"));
 var import_styled_system7 = require("styled-system");
-var Typography = import_styled_components16.default.p`
+var Text = import_styled_components16.default.p`
   font-family: ${({ mono, theme: theme2 }) => mono ? theme2.fonts.mono : ""};
   ${import_styled_system7.color}
   ${import_styled_system7.typography}
 `;
 
-// src/data/Typography/Title.tsx
+// src/data/Text/Title.tsx
 var import_styled_components17 = __toESM(require("styled-components"));
 var import_styled_system8 = require("styled-system");
 var Title = import_styled_components17.default.h1`
@@ -738,7 +738,7 @@ var Title = import_styled_components17.default.h1`
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var ListItem = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Typography, __spreadProps(__spreadValues({ as: "li" }, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, __spreadProps(__spreadValues({ as: "li" }, rest), { children }));
 };
 
 // src/data/List/OrderedList.tsx
@@ -762,69 +762,11 @@ var UnorderedList = import_styled_components19.default.ul`
 `;
 
 // src/data/Pagination/Pagination.tsx
-var import_styled_components22 = __toESM(require("styled-components"));
+var import_styled_components43 = __toESM(require("styled-components"));
 
 // src/data/Pagination/PaginationControls.tsx
-var import_react12 = require("react");
-var import_outline = require("@heroicons/react/24/outline");
-
-// src/inputs/ButtonGroup/ButtonGroup.tsx
-var import_styled_components20 = __toESM(require("styled-components"));
+var import_solid2 = require("@heroicons/react/24/solid");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var Grouping = import_styled_components20.default.div`
-  ${StyledButton}:not([data-ignore-radius]) {
-    border-radius:0;
-  }
-  ${StyledButton} {
-    position: relative;
-    margin-right: -1px;
-  }
-  ${StyledButton}:first-of-type {
-    border-top-left-radius: ${({ theme: theme2 }) => theme2.radii[3]};
-    border-bottom-left-radius: ${({ theme: theme2 }) => theme2.radii[3]};
-  }
-
-  ${StyledButton}:last-of-type {
-    border-top-right-radius: ${({ theme: theme2 }) => theme2.radii[3]};
-    border-bottom-right-radius: ${({ theme: theme2 }) => theme2.radii[3]};
-  }
-`;
-var ButtonGroup = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Grouping, { children });
-
-// src/data/Pagination/utils.ts
-var arrayRange = (from, to) => Array.from(Array(Math.max(0, to - from + 1)), (_, idx) => idx + from);
-var clamp = (value, min, max) => Math.max(min, Math.min(value, max));
-var calculatePageNumbers = (totalPages, currentPage, ellipsis) => {
-  let pageNeighbours = 1;
-  let totalNumbers = 7;
-  let totalControls = totalNumbers + pageNeighbours;
-  if (totalPages < totalControls) {
-    return arrayRange(1, totalPages);
-  }
-  let minPageNumber = 3;
-  let maxPageNumber = totalPages - 2;
-  let startPage = clamp(currentPage - pageNeighbours, minPageNumber, totalPages - 4);
-  let endPage = clamp(currentPage + pageNeighbours, 5, maxPageNumber);
-  let hasLeftEllipsis = startPage > minPageNumber;
-  let hasRightEllipsis = endPage < maxPageNumber;
-  return [
-    1,
-    hasLeftEllipsis ? ellipsis : 2,
-    ...arrayRange(startPage, endPage),
-    hasRightEllipsis ? ellipsis : totalPages - 1,
-    totalPages
-  ];
-};
-
-// src/data/Pagination/PaginationControls.tsx
-var import_styled_components21 = __toESM(require("styled-components"));
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var StyledBtn = (0, import_styled_components21.default)(ClickableElement)`
-  :hover {
-    background: ${({ theme: theme2 }) => theme2.colors.accent};
-  }
-`;
-var ELLIPSIS_ELEMENT = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_outline.EllipsisHorizontalIcon, { width: 16, height: 20 });
 var PaginationControls = ({
   skip,
   limit,
@@ -833,653 +775,214 @@ var PaginationControls = ({
 }) => {
   let currentPage = skip === 0 ? 1 : Math.floor(skip / limit + 1);
   let totalPages = Math.ceil(itemCount / limit);
-  let pages = (0, import_react12.useMemo)(() => {
-    return calculatePageNumbers(totalPages, currentPage, ELLIPSIS_ELEMENT);
-  }, [totalPages, currentPage]);
-  let handlePageClick = (page) => {
-    let newSkip = 0;
-    if (typeof page === "number" && page !== 1) {
-      newSkip = limit * (page - 1);
-    }
-    setSkip(newSkip);
-  };
-  if (totalPages <= 1) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ButtonGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Box, { display: "inline-flex", alignItems: "center", gridColumnGap: "2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text, { children: [
+      "Page ",
+      currentPage,
+      " of ",
+      totalPages
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      OutlineButton,
       {
         verticalAlign: "bottom",
-        onClick: () => setSkip(skip - limit),
         disabled: currentPage === 1,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_outline.ChevronLeftIcon, { width: 16, height: 20 })
+        onClick: () => setSkip(0),
+        paddingX: 11,
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_solid2.ChevronDoubleLeftIcon, { width: 18, height: 18 })
       }
     ),
-    pages.map((page, idx) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      StyledBtn,
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      OutlineButton,
       {
-        borderRadius: 2,
         verticalAlign: "bottom",
-        zIndex: page === currentPage ? 30 : "unset",
-        width: "36px",
-        height: "36px",
-        border: page === currentPage ? "border.1" : "none",
-        onClick: () => handlePageClick(page),
-        disabled: page === ELLIPSIS_ELEMENT,
-        "data-ignore-radius": true,
-        children: page
-      },
-      page === ELLIPSIS_ELEMENT ? "ellipsis" + idx : page
-    )),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      Button,
+        onClick: () => setSkip(skip - limit),
+        disabled: currentPage === 1,
+        paddingX: 11,
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_solid2.ChevronLeftIcon, { width: 18, height: 18 })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      OutlineButton,
       {
         verticalAlign: "bottom",
         onClick: () => setSkip(skip + limit),
         disabled: currentPage === totalPages,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_outline.ChevronRightIcon, { width: 16, height: 20 })
+        paddingX: 11,
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_solid2.ChevronRightIcon, { width: 18, height: 18 })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      OutlineButton,
+      {
+        verticalAlign: "bottom",
+        onClick: () => setSkip(itemCount - limit),
+        disabled: currentPage === totalPages,
+        paddingX: 11,
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_solid2.ChevronDoubleRightIcon, { width: 18, height: 18 })
       }
     )
   ] });
 };
 
-// src/data/Pagination/Pagination.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Container2 = import_styled_components22.default.div`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  min-height: 38px;
-  line-height: 1rem;
-`;
-var Strong = import_styled_components22.default.strong`
-  font-weight: 500;
-`;
-var Pagination = ({
-  limit,
-  skip,
-  setSkip,
-  itemCount
-}) => {
-  let to = skip + limit > itemCount ? itemCount : skip + limit;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Container2, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-      "Showing ",
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Strong, { children: skip + 1 }),
-      " to ",
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Strong, { children: to }),
-      " of ",
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Strong, { children: itemCount }),
-      " results"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PaginationControls, { itemCount, limit, skip, setSkip }) })
-  ] });
-};
-
-// src/data/Panel/Panel.tsx
-var import_styled_components23 = __toESM(require("styled-components"));
-var Panel = (0, import_styled_components23.default)(Box)`
-  border-radius:${({ theme: theme2 }) => theme2.radii[4]};
-  border: ${({ theme: theme2 }) => theme2.borders.border[1]};
-  background: ${({ theme: theme2 }) => theme2.colors.offsetBackground};
-`;
+// src/data/Pagination/RowControls.tsx
+var import_styled_components42 = __toESM(require("styled-components"));
 
-// src/data/Table/Table.tsx
-var import_react13 = require("react");
-var import_styled_components24 = __toESM(require("styled-components"));
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Container3 = import_styled_components24.default.div`
-  background: ${({ theme: theme2 }) => theme2.colors.background};
-  border: 1px solid ${({ theme: theme2 }) => theme2.colors.border};
-  border-radius: ${({ theme: theme2 }) => theme2.radii[3]};
-  contain: paint;
-  padding-bottom: ${({ footer, theme: theme2 }) => !footer ? theme2.space[1] : "0"};
-`;
-var StyledTable = import_styled_components24.default.table`
-  width: 100%;
-  position: relative;
-  border-collapse: collapse;
-  > :not([hidden]) ~ :not([hidden]) & :not(:last-child) {
-    border-top-width: 1px;
-    border-bottom-width: 1px;
-    border-color: ${({ theme: theme2 }) => theme2.colors.border}
+// src/inputs/ButtonGroup/ButtonGroup.tsx
+var import_styled_components20 = __toESM(require("styled-components"));
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Grouping = import_styled_components20.default.div`
+  ${StyledButton}:not([data-ignore-radius]) {
+    border-radius:0;
   }
-`;
-var Footer = import_styled_components24.default.div`
-  padding: ${({ theme: theme2 }) => `${theme2.space[2]} ${theme2.space[4]}`};
-  border-top-width: 1px;
-  border-color: ${({ theme: theme2 }) => theme2.colors.border};
-`;
-var Table = (0, import_react13.forwardRef)((_a, ref) => {
-  var _b = _a, { children, containerClasses, footer } = _b, rest = __objRest(_b, ["children", "containerClasses", "footer"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Container3, { footer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledTable, __spreadProps(__spreadValues({ ref }, rest), { children })),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Footer, { children: footer })
-  ] });
-});
-
-// src/data/Table/TableBody.tsx
-var import_styled_components25 = __toESM(require("styled-components"));
-var TableBody = import_styled_components25.default.tbody`
-  background: ${({ theme: theme2 }) => theme2.colors.background};
-  border-top-width: 1px;
-  > :not([hidden]) ~ :not([hidden]) {
-    border-top-width: 1px;
-    border-color: ${({ theme: theme2 }) => theme2.colors.border}
+  ${StyledButton} {
+    position: relative;
+    margin-right: -1px;
+  }
+  ${StyledButton}:first-of-type {
+    border-top-left-radius: ${({ theme: theme2 }) => theme2.radii[3]};
+    border-bottom-left-radius: ${({ theme: theme2 }) => theme2.radii[3]};
   }
-`;
 
-// src/data/Table/TableCell.tsx
-var import_styled_components26 = __toESM(require("styled-components"));
-var TableCell = import_styled_components26.default.td`
-  padding: ${({ theme: theme2 }) => `0.625rem ${theme2.space[3]}`}
+  ${StyledButton}:last-of-type {
+    border-top-right-radius: ${({ theme: theme2 }) => theme2.radii[3]};
+    border-bottom-right-radius: ${({ theme: theme2 }) => theme2.radii[3]};
+  }
 `;
+var ButtonGroup = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Grouping, { children });
 
-// src/data/Table/TableRow.tsx
-var import_styled_components27 = __toESM(require("styled-components"));
-var TableRow = import_styled_components27.default.tr`
-  ${({ onClick, theme: theme2 }) => typeof onClick === "function" && `
-    cursor: pointer;
-    :hover {
-      background: ${theme2.colors.accent};
-      box-shadow: ${theme2.colors.primary} 3px 0px 0px 0px inset;
-    }
-  `}
-  ${({ active, theme: theme2 }) => active && `
-    cursor: pointer;
-    background: ${theme2.colors.accent};
-    box-shadow: ${theme2.colors.primary} 3px 0px 0px 0px inset;
-  `}
-`;
+// src/inputs/Controls/Checkbox/Checkbox.tsx
+var import_outline = require("@heroicons/react/24/outline");
 
-// src/data/Table/TableHead.tsx
-var import_react14 = require("react");
-var import_styled_components28 = __toESM(require("styled-components"));
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Thead = import_styled_components28.default.thead`
-  text-align: left;
-  background: ${({ theme: theme2 }) => theme2.colors.background};
-  border-bottom: 1px solid ${({ theme: theme2 }) => theme2.colors.border};
-  ${({ sticky, theme: theme2 }) => sticky && `
-    position: sticky;
-    top: 0;
-    box-shadow: ${theme2.shadows.base[1]};
-  `}
-`;
-var TableHeadItem = import_styled_components28.default.th`
-  padding: ${({ theme: theme2 }) => theme2.space[3]};
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-  font-size: ${({ theme: theme2 }) => theme2.fontSizes[0]};
-  line-height: ${({ theme: theme2 }) => theme2.lineHeights[0]};
-  color: ${({ theme: theme2 }) => theme2.colors.mutedForeground};
-`;
-var TableHead = (0, import_react14.forwardRef)((_a, ref) => {
-  var _b = _a, { children, headers, sticky } = _b, rest = __objRest(_b, ["children", "headers", "sticky"]);
-  if (!headers) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Thead, __spreadProps(__spreadValues({ sticky, ref }, rest), { children }));
+// src/inputs/Controls/BaseControl.tsx
+var import_styled_components21 = __toESM(require("styled-components"));
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Label = import_styled_components21.default.label`
+  display: flex;
+  align-items: center;
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  color: ${({ theme: theme2, disabled }) => disabled ? theme2.colors.mutedForeground : theme2.colors.foreground};
+  > :not([hidden]) ~ :not([hidden]) {
+    margin-left: 0.5rem;
+  }
+  div > svg {
+    ${({ theme: theme2, checked }) => checked && `
+        color: ${theme2.colors.background};
+    `}
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Thead, { sticky, ref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { children: headers.map((h) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableHeadItem, { children: h }, h)) }) });
-});
-
-// src/feedback/Alert/Alert.tsx
-var import_styled_components30 = __toESM(require("styled-components"));
-var import_outline2 = require("@heroicons/react/24/outline");
 
-// src/feedback/Alert/CloseBtn.tsx
-var import_styled_components29 = __toESM(require("styled-components"));
-var import_solid2 = require("@heroicons/react/24/solid");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var StyledButton7 = (0, import_styled_components29.default)(ClickableElement)`
-  float:right;
-  padding: ${({ theme: theme2 }) => `${theme2.sizes[1]} ${theme2.sizes[2]}`};
-`;
-var CloseBtn = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledButton7, { onClick, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_solid2.XMarkIcon, { width: 16, height: 16 }) });
+  :hover div  {
+    ${({ theme: theme2, checked }) => `
+        background: ${checked ? theme2.colors.foreground : theme2.colors.background};
+    `}
+  }
 
-// src/feedback/Alert/Alert.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Container4 = (0, import_styled_components30.default)(Box)`
-  border: 1px solid;
-  border-color: ${({ theme: theme2, destructive }) => destructive ? theme2.colors.destructive : theme2.colors.border};
-  background: ${({ theme: theme2, destructive }) => destructive ? theme2.colors.destructive : theme2.colors.background};
-  h1, svg, p {
-    color: ${({ theme: theme2, destructive }) => destructive ? theme2.colors.destructiveForeground : theme2.colors.foreground};
+  :hover div > svg {
+    ${({ theme: theme2, checked }) => `
+        color: ${checked ? theme2.colors.background : theme2.colors.foreground};
+    `}
   }
 `;
-var Icon = (0, import_styled_components30.default)(Box)`
-  float: left;
-  :empty {
-    margin: 0;
-  }
+var Btn = import_styled_components21.default.div`
+  position: relative;
+  width: ${({ theme: theme2 }) => theme2.sizes[4]};
+  height: ${({ theme: theme2 }) => theme2.sizes[4]};
+  border: ${({ theme: theme2 }) => theme2.borders.background[1]};
+  background: ${({ theme: theme2 }) => theme2.colors.background};
+  overflow: hidden;
+  border: ${({ theme: theme2 }) => theme2.borders.primary[1]};
+  box-shadow: ${({ theme: theme2 }) => theme2.shadows.base[1]};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${({ theme: theme2 }) => theme2.space[2]};
+  border-radius: ${({ theme: theme2, rounded }) => rounded ? theme2.radii[8] : theme2.radii[2]};
+  opacity: ${({ disabled }) => disabled ? 0.5 : 1};
 `;
-var Content = (0, import_styled_components30.default)(Typography)`
-  min-width: 100%;
-  margin-top: ${({ theme: theme2 }) => theme2.space[2]};
-  :empty {
-    margin-top: 0;
-  }
+var Box2 = import_styled_components21.default.div`
+    background: ${({ theme: theme2 }) => theme2.colors.background};
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    ${({ checked, theme: theme2 }) => checked && `
+      background: ${theme2.colors.primary};
+    `}
+
+  `;
+var Icon = import_styled_components21.default.div`
+    svg {
+      color: transparent;
+      z-index: 10;
+      position: relative;
+    }
+  `;
+var Input = import_styled_components21.default.input`
+  display: none;
 `;
-var Alert = (_a) => {
+var BaseControl = (_a) => {
   var _b = _a, {
-    destructive = false,
-    title,
+    labelText,
     icon,
-    children,
-    withClose
+    rounded = false,
+    disabled = false
   } = _b, rest = __objRest(_b, [
-    "destructive",
-    "title",
+    "labelText",
     "icon",
-    "children",
-    "withClose"
+    "rounded",
+    "disabled"
   ]);
-  let Icons = icon || (destructive ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_outline2.ExclamationCircleIcon, { width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, {}));
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Container4, __spreadProps(__spreadValues({ p: 2, display: "flex", flexGrow: 1, alignItems: "center", borderRadius: "4", overflow: "hidden", position: "relative", width: 29, fontSize: 1, lineHeight: 1, flexWrap: "wrap", destructive }, rest), { boxShadow: "highlight", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Box, { minWidth: "100%", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { mr: 3, mt: "1px", lineHeight: 5, alignSelf: "center", children: Icons }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Title, { display: "inline", fontWeight: "600", fontSize: 1, lineHeight: 2, letterSpacing: "0.025em", children: title }),
-      withClose && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CloseBtn, { onClick: withClose })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Label, { disabled, checked: rest.checked, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Btn, { rounded, disabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Input, __spreadValues({ disabled }, rest)),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box2, __spreadValues({}, rest)),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, __spreadProps(__spreadValues({ disabled }, rest), { children: icon }))
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Content, { children })
-  ] }));
+    labelText
+  ] });
 };
 
-// src/feedback/Badge/Badge.tsx
-var import_styled_components31 = __toESM(require("styled-components"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var getPosition = (position4) => {
-  switch (position4) {
-    case "N":
-      return `
-      top: 0;
-      right: 50%;
-      transform: translateY(-50%) translateX(50%);
-      `;
-    case "NE":
-      return `
-      top: 0;
-      right: 0;
-      transform: translateY(-50%) translateX(50%);
-      `;
-    case "E":
-      return `
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%) translateX(50%);
-      `;
-    case "NW":
-      return `
-      top: 0;
-      left: 0;
-      transform: translateY(-50%) translateX(-50%);
-      `;
-    case "SE":
-      return `
-      right: 0;
-      bottom: 0;
-      transform: translateY(50%) translateX(50%);
-      `;
-    case "S":
-      return `
-        left: 50%;
-        top: 50%;
-        transform: translateY(50%) translateX(-50%);
-        `;
-    case "SW":
-      return `
-        left: 0;
-        bottom: 0;
-        transform: translateY(50%) translateX(-50%);
-      `;
-    case "W":
-      return `
-          right: 0;
-          top: 0;
-          transform: translateY(50%) translateX(-50%);
-        `;
-  }
+// src/inputs/Controls/Checkbox/Checkbox.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Checkbox = (_a) => {
+  var rest = __objRest(_a, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BaseControl, __spreadValues({ icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_outline.CheckIcon, { width: "12", height: "12" }), type: "checkbox" }, rest));
 };
-var BadgeItem = import_styled_components31.default.div`
-  position: absolute;
-  border-radius: ${({ theme: theme2 }) => theme2.radii[8]};
-  font-size: ${({ theme: theme2 }) => theme2.fontSizes[0]};
-  line-height:  ${({ theme: theme2 }) => theme2.lineHeights[0]};
-  text-align: center;
-  color: ${({ theme: theme2, destructive }) => destructive ? theme2.colors.destructiveForeground : theme2.colors.primaryForeground};
-  background: ${({ theme: theme2, destructive }) => destructive ? theme2.colors.destructive : theme2.colors.primary};
-  min-width: fit-content;
-  width: ${({ theme: theme2 }) => theme2.sizes[5]};
-  padding: calc(${({ theme: theme2 }) => theme2.space[1]} / 2) ${({ theme: theme2 }) => theme2.space[2]};
-  z-index:9999;
-  :empty {
-    width: ${({ theme: theme2 }) => theme2.sizes[1]};
-    height: ${({ theme: theme2 }) => theme2.sizes[2]};
-  }
-  ${({ position: position4 }) => getPosition(position4)}
-`;
-var Badge = ({ position: position4 = "NE", children, tag, destructive = false }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Box, { display: "inline-block", position: "relative", width: "fill-available", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BadgeItem, { position: position4, destructive, children: tag }),
-  children
-] });
 
-// src/feedback/Chip/Chip.tsx
-var import_styled_components32 = __toESM(require("styled-components"));
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Container5 = import_styled_components32.default.div`
-  border-radius: ${({ theme: theme2 }) => theme2.radii[3]};
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: fit-content;
-  padding: calc(${({ theme: theme2 }) => theme2.space[1]} / 2) ${({ theme: theme2 }) => theme2.space[2]};
-  font-size: ${({ theme: theme2 }) => theme2.fontSizes[0]};
-  line-height: ${({ theme: theme2 }) => theme2.lineHeights[0]};
-  font-weight: 700;
-  color: ${({ theme: theme2, destructive }) => destructive ? theme2.colors.destructiveForeground : theme2.colors.primaryForeground};
-  background: ${({ theme: theme2, destructive }) => destructive ? theme2.colors.destructive : theme2.colors.primary};
+// src/utils/index.ts
+var utils_exports = {};
+__export(utils_exports, {
+  Backdrop: () => Backdrop,
+  ClickOutside: () => ClickOutside,
+  Collapse: () => Collapse,
+  DarkTheme: () => DarkTheme,
+  Fade: () => Fade,
+  GlobalStyles: () => GlobalStyles,
+  Grow: () => Grow,
+  LightTheme: () => LightTheme,
+  LinearSlide: () => LinearSlide,
+  MuffledUI: () => MuffledUI,
+  Open: () => Open,
+  Portal: () => Portal,
+  RadioIcon: () => RadioIcon,
+  Scrollable: () => Scrollable,
+  SettingsContext: () => SettingsContext,
+  Slide: () => Slide,
+  ThemeButton: () => ThemeButton,
+  ThemeSwitch: () => ThemeSwitch,
+  stopPropagation: () => stopPropagation,
+  useMuffledSettings: () => useMuffledSettings
+});
 
-  > :not([hidden]) ~ :not([hidden]) {
-    margin-left: 0.5rem;
-  }
-`;
-var Chip = ({
-  destructive,
-  children
-}) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Container5, { destructive, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Typography, { children }) });
+// src/utils/Backdrop/Backdrop.tsx
+var import_react12 = require("react");
+var import_react_focus_lock = __toESM(require("react-focus-lock"));
 
-// src/feedback/Code/SyntaxHighlighter.tsx
-var import_react_syntax_highlighter = __toESM(require("react-syntax-highlighter"));
-
-// src/feedback/Code/theme.ts
-var githubLight = {
-  "hljs": {
-    "display": "block",
-    "overflowX": "auto",
-    "padding": "0.5em",
-    "color": "#24292e",
-    "background": "#ffffff"
-  },
-  "hljs-comment": {
-    "color": "#6a737d",
-    "fontStyle": "italic"
-  },
-  "hljs-quote": {
-    "color": "#6a737d",
-    "fontStyle": "italic"
-  },
-  "hljs-keyword": {
-    "color": "#d73a49",
-    "fontWeight": "bold"
-  },
-  "hljs-selector-tag": {
-    "color": "#d73a49",
-    "fontWeight": "bold"
-  },
-  "hljs-subst": {
-    "color": "#24292e",
-    "fontWeight": "normal"
-  },
-  "hljs-number": {
-    "color": "#005cc5"
-  },
-  "hljs-literal": {
-    "color": "#005cc5"
-  },
-  "hljs-variable": {
-    "color": "#e36209"
-  },
-  "hljs-template-variable": {
-    "color": "#e36209"
-  },
-  "hljs-tag .hljs-attr": {
-    "color": "#005cc5"
-  },
-  "hljs-string": {
-    "color": "#032f62"
-  },
-  "hljs-doctag": {
-    "color": "#22863a"
-  },
-  "hljs-title": {
-    "color": "#22863a",
-    "fontWeight": "bold"
-  },
-  "hljs-section": {
-    "color": "#22863a",
-    "fontWeight": "bold"
-  },
-  "hljs-selector-id": {
-    "color": "#22863a",
-    "fontWeight": "bold"
-  },
-  "hljs-type": {
-    "color": "#e36209",
-    "fontWeight": "bold"
-  },
-  "hljs-class .hljs-title": {
-    "color": "#e36209",
-    "fontWeight": "bold"
-  },
-  "hljs-tag": {
-    "color": "#22863a",
-    "fontWeight": "normal"
-  },
-  "hljs-name": {
-    "color": "#22863a",
-    "fontWeight": "normal"
-  },
-  "hljs-attribute": {
-    "color": "#005cc5",
-    "fontWeight": "normal"
-  },
-  "hljs-regexp": {
-    "color": "#032f62"
-  },
-  "hljs-link": {
-    "color": "#032f62"
-  },
-  "hljs-symbol": {
-    "color": "#22863a"
-  },
-  "hljs-bullet": {
-    "color": "#22863a"
-  },
-  "hljs-built_in": {
-    "color": "#e36209"
-  },
-  "hljs-builtin-name": {
-    "color": "#e36209"
-  },
-  "hljs-meta": {
-    "color": "#b31d28",
-    "fontWeight": "bold"
-  },
-  "hljs-deletion": {
-    "background": "#ffeef0"
-  },
-  "hljs-addition": {
-    "background": "#f0fff4"
-  },
-  "hljs-emphasis": {
-    "fontStyle": "italic"
-  },
-  "hljs-strong": {
-    "fontWeight": "bold"
-  }
-};
-var githubDark = {
-  "hljs": {
-    "display": "block",
-    "overflowX": "auto",
-    "padding": "0.5em",
-    "color": "#adbac7",
-    "background": "#22272e"
-  },
-  "hljs-comment": {
-    "color": "#768390",
-    "fontStyle": "italic"
-  },
-  "hljs-quote": {
-    "color": "#768390",
-    "fontStyle": "italic"
-  },
-  "hljs-keyword": {
-    "color": "#f47067",
-    "fontWeight": "bold"
-  },
-  "hljs-selector-tag": {
-    "color": "#f47067",
-    "fontWeight": "bold"
-  },
-  "hljs-subst": {
-    "color": "#adbac7",
-    "fontWeight": "normal"
-  },
-  "hljs-number": {
-    "color": "#6cb6ff"
-  },
-  "hljs-literal": {
-    "color": "#6cb6ff"
-  },
-  "hljs-variable": {
-    "color": "#f69d50"
-  },
-  "hljs-template-variable": {
-    "color": "#f69d50"
-  },
-  "hljs-tag .hljs-attr": {
-    "color": "#6cb6ff"
-  },
-  "hljs-string": {
-    "color": "#96d0ff"
-  },
-  "hljs-doctag": {
-    "color": "#8ddb8c"
-  },
-  "hljs-title": {
-    "color": "#8ddb8c",
-    "fontWeight": "bold"
-  },
-  "hljs-section": {
-    "color": "#8ddb8c",
-    "fontWeight": "bold"
-  },
-  "hljs-selector-id": {
-    "color": "#8ddb8c",
-    "fontWeight": "bold"
-  },
-  "hljs-type": {
-    "color": "#f69d50",
-    "fontWeight": "bold"
-  },
-  "hljs-class .hljs-title": {
-    "color": "#f69d50",
-    "fontWeight": "bold"
-  },
-  "hljs-tag": {
-    "color": "#8ddb8c",
-    "fontWeight": "normal"
-  },
-  "hljs-name": {
-    "color": "#8ddb8c",
-    "fontWeight": "normal"
-  },
-  "hljs-attribute": {
-    "color": "#6cb6ff",
-    "fontWeight": "normal"
-  },
-  "hljs-regexp": {
-    "color": "#96d0ff"
-  },
-  "hljs-link": {
-    "color": "#96d0ff"
-  },
-  "hljs-symbol": {
-    "color": "#8ddb8c"
-  },
-  "hljs-bullet": {
-    "color": "#8ddb8c"
-  },
-  "hljs-built_in": {
-    "color": "#f69d50"
-  },
-  "hljs-builtin-name": {
-    "color": "#f69d50"
-  },
-  "hljs-meta": {
-    "color": "#768390",
-    "fontWeight": "bold"
-  },
-  "hljs-deletion": {
-    "background": "#ffd8d3"
-  },
-  "hljs-addition": {
-    "background": "#b4f1b4"
-  },
-  "hljs-emphasis": {
-    "fontStyle": "italic"
-  },
-  "hljs-strong": {
-    "fontWeight": "bold"
-  }
-};
-
-// src/feedback/Code/Wrapper.tsx
-var import_styled_components33 = __toESM(require("styled-components"));
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var StyledDiv = import_styled_components33.default.div`
-  overflow: hidden;
-  font-size: ${({ theme: theme2 }) => theme2.fontSizes[1]};
-  line-height: ${({ theme: theme2 }) => theme2.lineHeights[1]};
-  font-family: ${({ theme: theme2 }) => theme2.fonts.mono};
-  border: ${({ theme: theme2 }) => theme2.borders.border[1]};
-  box-shadow: ${({ theme: theme2 }) => theme2.shadows.base[1]};
-  border-radius: ${({ theme: theme2 }) => theme2.radii[3]};
-  background: ${({ theme: theme2 }) => theme2.colors.offsetBackground};
-`;
-var Wrapper = ({
-  children,
-  skip
-}) => skip ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StyledDiv, { children });
-
-// src/utils/index.ts
-var utils_exports = {};
-__export(utils_exports, {
-  Backdrop: () => Backdrop,
-  ClickOutside: () => ClickOutside,
-  Collapse: () => Collapse,
-  DarkTheme: () => DarkTheme,
-  Fade: () => Fade,
-  GlobalStyles: () => GlobalStyles,
-  Grow: () => Grow,
-  LightTheme: () => LightTheme,
-  LinearSlide: () => LinearSlide,
-  MuffledUI: () => MuffledUI,
-  Open: () => Open,
-  Portal: () => Portal,
-  RadioIcon: () => RadioIcon,
-  Scrollable: () => Scrollable,
-  SettingsContext: () => SettingsContext,
-  Slide: () => Slide,
-  ThemeButton: () => ThemeButton,
-  ThemeSwitch: () => ThemeSwitch,
-  stopPropagation: () => stopPropagation,
-  useMuffledSettings: () => useMuffledSettings
-});
-
-// src/utils/Backdrop/Backdrop.tsx
-var import_react15 = require("react");
-var import_react_focus_lock = __toESM(require("react-focus-lock"));
-
-// src/utils/Portal/Portal.tsx
-var import_react_dom = require("react-dom");
-var Portal = ({ children, element }) => (0, import_react_dom.createPortal)(children, element || (document.getElementById("portal-root") || document.body));
+// src/utils/Portal/Portal.tsx
+var import_react_dom = require("react-dom");
+var Portal = ({ children, element }) => (0, import_react_dom.createPortal)(children, element || (document.getElementById("portal-root") || document.body));
 
 // src/utils/Backdrop/Backdrop.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var stopPropagation = (e) => e.stopPropagation();
 var Backdrop = (_a) => {
   var _b = _a, {
@@ -1489,15 +992,15 @@ var Backdrop = (_a) => {
     "children",
     "onClick"
   ]);
-  let [open, setOpen] = (0, import_react15.useState)(true);
-  let handleClickBackdrop = (0, import_react15.useCallback)(
+  let [open, setOpen] = (0, import_react12.useState)(true);
+  let handleClickBackdrop = (0, import_react12.useCallback)(
     (e) => {
       e.stopPropagation();
       setOpen(false);
     },
     [setOpen]
   );
-  let closeModalOnESC = (0, import_react15.useCallback)(
+  let closeModalOnESC = (0, import_react12.useCallback)(
     (e) => {
       if (e.key === "Escape") {
         e.stopPropagation();
@@ -1506,7 +1009,7 @@ var Backdrop = (_a) => {
     },
     [setOpen]
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     window.addEventListener("keyup", closeModalOnESC);
     document.body.style.overflow = "hidden";
     return () => {
@@ -1514,7 +1017,7 @@ var Backdrop = (_a) => {
       document.body.style.overflow = "unset";
     };
   }, [closeModalOnESC]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_focus_lock.default, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Fade, __spreadProps(__spreadValues({ inProp: open, onProps: onClick }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_focus_lock.default, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Fade, __spreadProps(__spreadValues({ inProp: open, onProps: onClick }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     Box,
     {
       width: "100vw",
@@ -1525,7 +1028,7 @@ var Backdrop = (_a) => {
       right: 0,
       bottom: 0,
       overflow: "auto",
-      bg: "rgba(0, 0, 0, .8)",
+      bg: "modalBackdrop",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -1537,11 +1040,11 @@ var Backdrop = (_a) => {
 };
 
 // src/utils/ClickOutside/ClickOutside.tsx
-var import_react16 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var ClickOutside = ({ children, handleClose, target, wrapper, inline = false }) => {
-  let [isOpen, setOpen] = (0, import_react16.useState)(true);
-  (0, import_react16.useEffect)(() => {
+  let [isOpen, setOpen] = (0, import_react13.useState)(true);
+  (0, import_react13.useEffect)(() => {
     function handleClick(e) {
       e.preventDefault();
       if (!(target == null ? void 0 : target.contains(e.target))) {
@@ -1555,9 +1058,9 @@ var ClickOutside = ({ children, handleClose, target, wrapper, inline = false })
     }
     return () => document.removeEventListener("mousedown", handleClick);
   }, [isOpen, handleClose, target]);
-  let WrappedTransition = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Grow, { inProp: isOpen, onDestroyed: handleClose, children });
-  let content = wrapper ? (0, import_react16.cloneElement)(wrapper, { children: WrappedTransition }) : WrappedTransition;
-  return inline ? content : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Portal, { children: content });
+  let WrappedTransition = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Grow, { inProp: isOpen, onDestroyed: handleClose, children });
+  let content = wrapper ? (0, import_react13.cloneElement)(wrapper, { children: WrappedTransition }) : WrappedTransition;
+  return inline ? content : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Portal, { children: content });
 };
 
 // src/utils/FocusLock/index.ts
@@ -1568,18 +1071,18 @@ __reExport(FocusLock_exports, require("react-focus-lock"));
 __reExport(utils_exports, FocusLock_exports);
 
 // src/utils/Scrollable/Scrollable.tsx
-var import_react17 = require("react");
-var import_styled_components34 = __toESM(require("styled-components"));
-var import_outline3 = require("@heroicons/react/24/outline");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var ScrollBox = (0, import_styled_components34.default)(Box)`
+var import_react14 = require("react");
+var import_styled_components22 = __toESM(require("styled-components"));
+var import_outline2 = require("@heroicons/react/24/outline");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ScrollBox = (0, import_styled_components22.default)(Box)`
   white-space: nowrap;
   scroll-snap-type: x;
 `;
 var Scrollable = ({ children }) => {
-  let [{ left, right }, setArrows] = (0, import_react17.useState)({ left: false, right: false });
-  let [scrollable, setScrollable] = (0, import_react17.useState)(void 0);
-  let ref = (0, import_react17.useRef)(null);
+  let [{ left, right }, setArrows] = (0, import_react14.useState)({ left: false, right: false });
+  let [scrollable, setScrollable] = (0, import_react14.useState)(void 0);
+  let ref = (0, import_react14.useRef)(null);
   let handleScroll = () => {
     var _a, _b, _c, _d;
     let rightShadow = ((_a = ref.current) == null ? void 0 : _a.scrollWidth) !== (((_b = ref.current) == null ? void 0 : _b.scrollLeft) || 0) + (((_c = ref.current) == null ? void 0 : _c.clientWidth) || 0);
@@ -1593,16 +1096,16 @@ var Scrollable = ({ children }) => {
     var _a, _b;
     setScrollable((((_a = ref.current) == null ? void 0 : _a.scrollWidth) || 0) <= (((_b = ref.current) == null ? void 0 : _b.clientWidth) || 0));
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     checkIfScrollable();
     handleScroll();
   }, []);
   if (!scrollable === false) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Box, { position: "relative", px: "5", children: [
-    left && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { height: "100%", width: "5", position: "absolute", left: "0", top: "0", zIndex: "50", display: "flex", alignItems: "center", color: "baseHighlight", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_outline3.ChevronLeftIcon, { width: 16, height: 16 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Box, { position: "relative", px: "5", children: [
+    left && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Box, { height: "100%", width: "5", position: "absolute", left: "0", top: "0", zIndex: "50", display: "flex", alignItems: "center", color: "baseHighlight", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_outline2.ChevronLeftIcon, { width: 16, height: 16 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       ScrollBox,
       {
         maxHeight: "100%",
@@ -1612,15 +1115,15 @@ var Scrollable = ({ children }) => {
         children
       }
     ),
-    right && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { height: "100%", width: "5", position: "absolute", right: "0", top: "0", zIndex: "50", display: "flex", alignItems: "center", justifyContent: "end", color: "baseHighlight", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_outline3.ChevronRightIcon, { width: 16, height: 16 }) })
+    right && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Box, { height: "100%", width: "5", position: "absolute", right: "0", top: "0", zIndex: "50", display: "flex", alignItems: "center", justifyContent: "end", color: "baseHighlight", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_outline2.ChevronRightIcon, { width: 16, height: 16 }) })
   ] });
 };
 
 // src/utils/Icons/index.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var RadioIcon = (_a) => {
   var rest = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", __spreadProps(__spreadValues({ viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: "8", cy: "8", r: "3" }) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", __spreadProps(__spreadValues({ viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("circle", { cx: "8", cy: "8", r: "3" }) }));
 };
 
 // src/utils/Theme/Borders.ts
@@ -1641,16 +1144,16 @@ var radii = [
   "0.125rem",
   // 1 - sm
   "0.25rem",
-  // 2 -
-  "0.375rem",
-  // 3 - md
+  // 2
   "0.5rem",
-  // 4 - lg
+  // 3 - md
   "0.75rem",
-  // 5 - xl
+  // 4 - lg
   "1rem",
+  // 5 - xl
+  "1.25rem",
   // 6 - 2xl
-  "1.5rem",
+  "1.75rem",
   // 7 - 3xl
   "9999px"
   // 8 - full
@@ -1666,49 +1169,51 @@ breakpoints.xl = breakpoints[3];
 // src/utils/Theme/Colors.ts
 var LightThemeColors = {
   background: "hsl(0, 0%, 100%)",
-  foreground: "hsl(240, 10%, 3.9%)",
+  foreground: "hsl(210, 15%, 20%)",
   card: "hsl(0, 0%, 100%)",
-  cardForeground: "hsl(240, 10%, 3.9%)",
+  cardForeground: "hsl(210, 15%, 20%)",
   popover: "hsl(0, 0%, 100%)",
-  popoverForeground: "hsl(240, 10%, 3.9%)",
+  popoverForeground: "hsl(210, 15%, 20%)",
   primary: "hsl(240, 5.9%, 10%)",
   primaryForeground: "hsl(0, 0%, 98%)",
-  secondary: "hsl(240, 4.8%, 95.9%)",
+  secondary: "hsl(210, 20%, 95%)",
   secondaryForeground: "hsl(240, 5.9%, 10%)",
-  muted: "hsl(240, 4.8%, 95.9%)",
-  mutedForeground: "hsl(240, 3.8%, 46.1%)",
-  accent: "hsl(240, 4.8%, 95.9%)",
+  muted: "hsl(210, 20%, 95%)",
+  mutedForeground: "hsl(210, 10%, 40%)",
+  accent: "hsl(210, 20%, 95%)",
   accentForeground: "hsl(240, 5.9%, 10%)",
   destructive: "hsl(0, 84.2%, 60.2%)",
   destructiveForeground: "hsl(0, 0%, 98%)",
-  border: "hsl(240, 5.9%, 90%)",
-  input: "hsl(240, 5.9%, 90%)",
+  border: "hsl(210, 16%, 90%)",
+  input: "hsl(210, 16%, 90%)",
   ring: "hsl(240, 5.9%, 10%)",
   offsetBackground: "hsl(0, 0%, 98%)",
-  offsetForeground: "hsl(240, 5.3%, 26.1%)"
+  offsetForeground: "hsl(210, 10%, 35%)",
+  modalBackdrop: "hsla(210, 20%, 82%, 0.40)"
 };
 var DarkThemeColors = {
-  background: "hsl(240, 10%, 3.9%)",
-  foreground: "hsl(0, 0%, 98%)",
-  card: "hsl(240, 10%, 3.9%)",
-  cardForeground: "hsl(0, 0%, 98%)",
-  popover: "hsl(240, 10%, 3.9%)",
-  popoverForeground: "hsl(0, 0%, 98%)",
-  primary: "hsl(0, 0%, 98%)",
-  primaryForeground: "hsl(240, 5.9%, 10%)",
-  secondary: "hsl(240, 3.7%, 15.9%)",
-  secondaryForeground: "hsl(0, 0%, 98%)",
-  muted: "hsl(240, 3.7%, 15.9%)",
-  mutedForeground: "hsl(240, 5%, 64.9%)",
-  accent: "hsl(240, 3.7%, 15.9%)",
-  accentForeground: "hsl(0, 0%, 98%)",
-  destructive: "hsl(0, 65.1%, 50.6%)",
-  destructiveForeground: "hsl(0, 0%, 98%)",
-  border: "hsl(240, 3.7%, 15.9%)",
-  input: "hsl(240, 3.7%, 15.9%)",
-  ring: "hsl(240, 4.9%, 83.9%)",
-  offsetBackground: "hsl(240, 5.9%, 10%)",
-  offsetForeground: "hsl(240, 4.8%, 95.9%)"
+  background: "hsl(220, 15%, 10%)",
+  foreground: "hsl(0, 0%, 95%)",
+  card: "hsl(220, 15%, 10%)",
+  cardForeground: "hsl(0, 0%, 95%)",
+  popover: "hsl(220, 15%, 10%)",
+  popoverForeground: "hsl(0, 0%, 95%)",
+  primary: "hsl(0, 0%, 95%)",
+  primaryForeground: "hsl(220, 10%, 20%)",
+  secondary: "hsl(220, 5%, 20%)",
+  secondaryForeground: "hsl(0, 0%, 95%)",
+  muted: "hsl(220, 5%, 20%)",
+  mutedForeground: "hsl(220, 5%, 70%)",
+  accent: "hsl(220, 5%, 20%)",
+  accentForeground: "hsl(0, 0%, 95%)",
+  destructive: "hsl(0, 70%, 45%)",
+  destructiveForeground: "hsl(0, 0%, 95%)",
+  border: "hsl(220, 5%, 20%)",
+  input: "hsl(220, 5%, 20%)",
+  ring: "hsl(220, 5%, 70%)",
+  offsetBackground: "hsl(220, 10%, 15%)",
+  offsetForeground: "hsl(220, 5%, 90%)",
+  modalBackdrop: "rgba(38, 44, 54, 0.4)"
 };
 
 // src/utils/Theme/Shadows.ts
@@ -1780,7 +1285,9 @@ var spaces = [
   "1.75rem",
   "2rem",
   "2.25rem",
-  "2.5rem"
+  "2.5rem",
+  "0.375rem"
+  // Yikes need to refactor this to allow more in
 ];
 var spaceYBetween = spaces.map((s) => `> :not(:first-child) {
       margin-top: ${s};
@@ -1863,11 +1370,11 @@ var DarkTheme = __spreadValues({
 }, theme);
 
 // src/utils/Theme/ThemeProvider.tsx
-var import_styled_components36 = require("styled-components");
+var import_styled_components24 = require("styled-components");
 
 // src/utils/Theme/GlobalStyles.ts
-var import_styled_components35 = require("styled-components");
-var GlobalStyles = import_styled_components35.createGlobalStyle`
+var import_styled_components23 = require("styled-components");
+var GlobalStyles = import_styled_components23.createGlobalStyle`
   *,
   ::before,
   ::after {
@@ -2086,24 +1593,24 @@ var GlobalStyles = import_styled_components35.createGlobalStyle`
 `;
 
 // src/utils/Theme/ThemeProvider.tsx
-var import_react18 = require("react");
+var import_react15 = require("react");
 
 // src/shared/preferColorScheme.ts
 var InheritedTheme = window.matchMedia("(prefers-color-scheme: light)").matches ? "Light" : "Dark";
 
 // src/utils/Theme/ThemeProvider.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var LocalStorageKey = "@muffled-ui/settings";
-var SettingsContext = (0, import_react18.createContext)(void 0);
+var SettingsContext = (0, import_react15.createContext)(void 0);
 var useMuffledSettings = () => {
-  let context = (0, import_react18.useContext)(SettingsContext);
+  let context = (0, import_react15.useContext)(SettingsContext);
   if (context === void 0) {
     throw new Error("useMuffledSettings must be used within a MuffledUI provider");
   }
   return context;
 };
 var MuffledUI = ({ children }) => {
-  let [themeKey, setThemeKey] = (0, import_react18.useState)(() => {
+  let [themeKey, setThemeKey] = (0, import_react15.useState)(() => {
     var _a;
     if (localStorage.getItem(LocalStorageKey) !== null) {
       return (_a = JSON.parse(localStorage.getItem(LocalStorageKey) || "")) == null ? void 0 : _a.theme;
@@ -2111,156 +1618,75 @@ var MuffledUI = ({ children }) => {
     return InheritedTheme;
   });
   let theme2 = themeKey === "Light" ? LightTheme : DarkTheme;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     localStorage.setItem(LocalStorageKey, JSON.stringify({ theme: themeKey }));
   }, [themeKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SettingsContext.Provider, { value: {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SettingsContext.Provider, { value: {
     theme: themeKey,
     setTheme: setThemeKey,
     toggleTheme: () => setThemeKey(themeKey == "Dark" ? "Light" : "Dark")
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_styled_components36.ThemeProvider, { theme: theme2, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GlobalStyles, { theme: theme2 }),
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_styled_components24.ThemeProvider, { theme: theme2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(GlobalStyles, { theme: theme2 }),
     children
   ] }) });
 };
 
 // src/utils/Theme/ThemeToggle.tsx
 var import_solid3 = require("@heroicons/react/16/solid");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var ThemeSwitch = () => {
+  let { theme: theme2, toggleTheme } = useMuffledSettings();
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Box, { display: "flex", alignSelf: "center", width: "120px", justifyContent: "space-between", borderRadius: "8", border: "border.1", px: "3", py: "3", bg: "background", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_solid3.SunIcon, { width: "16px" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Switch, { checked: theme2 === "Dark", onChange: toggleTheme }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_solid3.MoonIcon, { width: "16px" })
+  ] });
+};
+var ThemeButton = () => {
+  let { theme: theme2, toggleTheme } = useMuffledSettings();
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(OutlineButton, { onClick: toggleTheme, children: [
+    theme2 === "Dark" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_solid3.SunIcon, { width: "16px" }),
+    theme2 === "Light" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_solid3.MoonIcon, { width: "16px" })
+  ] });
+};
 
-// src/inputs/Controls/Checkbox/Checkbox.tsx
-var import_outline4 = require("@heroicons/react/24/outline");
+// src/inputs/Controls/Radio/Radio.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Radio = (_a) => {
+  var rest = __objRest(_a, []);
+  var _a2;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    BaseControl,
+    __spreadValues({
+      icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadioIcon, { width: "16", height: "16" }),
+      type: "radio",
+      labelText: rest.labelText || ((_a2 = rest.value) == null ? void 0 : _a2.toString()),
+      value: rest.value || rest.labelText,
+      rounded: true
+    }, rest)
+  );
+};
 
-// src/inputs/Controls/BaseControl.tsx
-var import_styled_components37 = __toESM(require("styled-components"));
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var Label = import_styled_components37.default.label`
-  display: flex;
-  align-items: center;
-  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
-  color: ${({ theme: theme2, disabled }) => disabled ? theme2.colors.mutedForeground : theme2.colors.foreground};
-  > :not([hidden]) ~ :not([hidden]) {
-    margin-left: 0.5rem;
-  }
-  div > svg {
-    ${({ theme: theme2, checked }) => checked && `
-        color: ${theme2.colors.background};
-    `}
-  }
+// src/inputs/Datepicker/Base/BasePicker.tsx
+var import_react20 = require("react");
+var import_react_datepicker = __toESM(require("react-datepicker"));
 
-  :hover div  {
-    ${({ theme: theme2, checked }) => `
-        background: ${checked ? theme2.colors.foreground : theme2.colors.background};
-    `}
-  }
-
-  :hover div > svg {
-    ${({ theme: theme2, checked }) => `
-        color: ${checked ? theme2.colors.background : theme2.colors.foreground};
-    `}
-  }
-`;
-var Btn = import_styled_components37.default.div`
-  position: relative;
-  width: ${({ theme: theme2 }) => theme2.sizes[4]};
-  height: ${({ theme: theme2 }) => theme2.sizes[4]};
-  border: ${({ theme: theme2 }) => theme2.borders.background[1]};
-  background: ${({ theme: theme2 }) => theme2.colors.background};
-  overflow: hidden;
-  border: ${({ theme: theme2 }) => theme2.borders.primary[1]};
-  box-shadow: ${({ theme: theme2 }) => theme2.shadows.base[1]};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: ${({ theme: theme2 }) => theme2.space[2]};
-  border-radius: ${({ theme: theme2, rounded }) => rounded ? theme2.radii[8] : theme2.radii[2]};
-  opacity: ${({ disabled }) => disabled ? 0.5 : 1};
-`;
-var Box2 = import_styled_components37.default.div`
-    background: ${({ theme: theme2 }) => theme2.colors.background};
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    ${({ checked, theme: theme2 }) => checked && `
-      background: ${theme2.colors.primary};
-    `}
-
-  `;
-var Icon2 = import_styled_components37.default.div`
-    svg {
-      color: transparent;
-      z-index: 10;
-      position: relative;
-    }
-  `;
-var Input = import_styled_components37.default.input`
-  display: none;
-`;
-var BaseControl = (_a) => {
-  var _b = _a, {
-    labelText,
-    icon,
-    rounded = false,
-    disabled = false
-  } = _b, rest = __objRest(_b, [
-    "labelText",
-    "icon",
-    "rounded",
-    "disabled"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Label, { disabled, checked: rest.checked, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Btn, { rounded, disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Input, __spreadValues({ disabled }, rest)),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box2, __spreadValues({}, rest)),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon2, __spreadProps(__spreadValues({ disabled }, rest), { children: icon }))
-    ] }),
-    labelText
-  ] });
-};
-
-// src/inputs/Controls/Checkbox/Checkbox.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var Checkbox = (_a) => {
-  var rest = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BaseControl, __spreadValues({ icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_outline4.CheckIcon, { width: "12", height: "12" }), type: "checkbox" }, rest));
-};
-
-// src/inputs/Controls/Radio/Radio.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var Radio = (_a) => {
-  var rest = __objRest(_a, []);
-  var _a2;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    BaseControl,
-    __spreadValues({
-      icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadioIcon, { width: "16", height: "16" }),
-      type: "radio",
-      labelText: rest.labelText || ((_a2 = rest.value) == null ? void 0 : _a2.toString()),
-      value: rest.value || rest.labelText,
-      rounded: true
-    }, rest)
-  );
-};
-
-// src/inputs/Datepicker/Base/BasePicker.tsx
-var import_react23 = require("react");
-var import_react_datepicker = __toESM(require("react-datepicker"));
-
-// src/inputs/Datepicker/Base/PopperContainer.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var PopperContainer = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Portal, { children });
+// src/inputs/Datepicker/Base/PopperContainer.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var PopperContainer = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Portal, { children });
 
 // src/inputs/Datepicker/Base/DateHeader.tsx
-var import_react20 = require("react");
-var import_styled_components38 = __toESM(require("styled-components"));
+var import_react17 = require("react");
+var import_styled_components25 = __toESM(require("styled-components"));
 var import_date_fns = require("date-fns");
 
 // src/navigation/Menu/Menu.tsx
-var import_react19 = require("react");
+var import_react16 = require("react");
 var import_react_popper = require("react-popper");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var Menu = (_a) => {
   var _b = _a, { children, isOpen, direction = "bottom-start", itemRef, handleClose, inline = false } = _b, rest = __objRest(_b, ["children", "isOpen", "direction", "itemRef", "handleClose", "inline"]);
-  let [popperRef, setPopperRef] = (0, import_react19.useState)(null);
+  let [popperRef, setPopperRef] = (0, import_react16.useState)(null);
   let { styles, attributes } = (0, import_react_popper.usePopper)(itemRef, popperRef, {
     placement: direction,
     modifiers: [
@@ -2272,13 +1698,13 @@ var Menu = (_a) => {
       }
     ]
   });
-  let Popper = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", __spreadValues({ ref: setPopperRef, style: styles.popper }, attributes.popper));
-  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ClickOutside, { handleClose, target: popperRef, wrapper: Popper, inline, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Box, __spreadProps(__spreadValues({ bg: "background", borderRadius: "3", boxShadow: "base.0", border: "border.1", display: "flex", flexDirection: "column", py: "1", overflowY: "scroll" }, rest), { children })) }) : null;
+  let Popper = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", __spreadValues({ ref: setPopperRef, style: styles.popper }, attributes.popper));
+  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ClickOutside, { handleClose, target: popperRef, wrapper: Popper, inline, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, __spreadProps(__spreadValues({ bg: "background", borderRadius: "3", boxShadow: "base.0", border: "border.1", display: "flex", flexDirection: "column", py: "1", overflowY: "scroll" }, rest), { children })) }) : null;
 };
 
 // src/navigation/Menu/MenuItem.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var MenuItem = ({ children, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var MenuItem = ({ children, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   Button,
   {
     mx: "1",
@@ -2291,19 +1717,19 @@ var MenuItem = ({ children, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime
 );
 
 // src/inputs/Datepicker/Base/DateNavigation.tsx
-var import_outline5 = require("@heroicons/react/24/outline");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var LeftNavigation = ({ decreaseYear, decreaseMonth }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-  decreaseYear && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(OutlineButton, { px: "5px", py: "5px", height: "inherit", onClick: decreaseYear, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_outline5.ChevronLeftIcon, { width: 16, height: 16 }) }),
-  decreaseMonth && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(OutlineButton, { px: "5px", py: "5px", height: "inherit", onClick: decreaseMonth, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_outline5.ChevronLeftIcon, { width: 16, height: 16 }) })
+var import_outline3 = require("@heroicons/react/24/outline");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var LeftNavigation = ({ decreaseYear, decreaseMonth }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+  decreaseYear && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OutlineButton, { px: "5px", py: "5px", height: "inherit", onClick: decreaseYear, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_outline3.ChevronLeftIcon, { width: 16, height: 16 }) }),
+  decreaseMonth && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OutlineButton, { px: "5px", py: "5px", height: "inherit", onClick: decreaseMonth, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_outline3.ChevronLeftIcon, { width: 16, height: 16 }) })
 ] });
-var RightNavigation = ({ increaseYear, increaseMonth }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-  increaseMonth && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(OutlineButton, { px: "5px", py: "5px", height: "inherit", onClick: increaseMonth, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_outline5.ChevronRightIcon, { width: 16, height: 16 }) }),
-  increaseYear && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(OutlineButton, { px: "5px", py: "5px", height: "inherit", onClick: increaseYear, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_outline5.ChevronRightIcon, { width: 16, height: 16 }) })
+var RightNavigation = ({ increaseYear, increaseMonth }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+  increaseMonth && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OutlineButton, { px: "5px", py: "5px", height: "inherit", onClick: increaseMonth, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_outline3.ChevronRightIcon, { width: 16, height: 16 }) }),
+  increaseYear && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OutlineButton, { px: "5px", py: "5px", height: "inherit", onClick: increaseYear, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_outline3.ChevronRightIcon, { width: 16, height: 16 }) })
 ] });
 
 // src/inputs/Datepicker/Base/DateHeader.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var months = [
   "January",
   "February",
@@ -2318,7 +1744,7 @@ var months = [
   "November",
   "December"
 ];
-var StyledMenu = (0, import_styled_components38.default)(Menu)`
+var StyledMenu = (0, import_styled_components25.default)(Menu)`
   max-height: 200px;
 `;
 var getYearsPeriod = (date, yearItemNumber = 12) => {
@@ -2340,8 +1766,8 @@ var DateHeader = ({
   changeMonth,
   changeYear
 }) => {
-  let [monthMenuOpen, setMonthMenuOpen] = (0, import_react20.useState)(false);
-  let [itemRef, setItemRef] = (0, import_react20.useState)(null);
+  let [monthMenuOpen, setMonthMenuOpen] = (0, import_react17.useState)(false);
+  let [itemRef, setItemRef] = (0, import_react17.useState)(null);
   let showLeftNav = monthsShown === 1 || customHeaderCount === 0;
   let showRightNav = monthsShown === 1 || customHeaderCount === 1;
   let isOpen = showMonthYearPicker || showYearPicker ? false : monthMenuOpen;
@@ -2371,10 +1797,10 @@ var DateHeader = ({
   };
   let decreaseYearFn = showYearPicker ? () => changeYear((0, import_date_fns.getYear)(date) - 12) : decreaseYear;
   let increaseYearFn = showYearPicker ? () => changeYear((0, import_date_fns.getYear)(date) + 12) : increaseYear;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Box, { display: "flex", alignItems: "center", justifyContent: "center", py: "2", children: [
-      showLeftNav && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(LeftNavigation, { decreaseMonth: canModifyMonths(decreaseMonth), decreaseYear: canModifyYear(decreaseYearFn) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Box, { display: "flex", alignItems: "center", justifyContent: "center", py: "2", children: [
+      showLeftNav && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LeftNavigation, { decreaseMonth: canModifyMonths(decreaseMonth), decreaseYear: canModifyYear(decreaseYearFn) }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         ClickableElement,
         {
           ref: setItemRef,
@@ -2385,36 +1811,35 @@ var DateHeader = ({
           children: getFriendlyString()
         }
       ),
-      showRightNav && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RightNavigation, { increaseMonth: canModifyMonths(increaseMonth), increaseYear: canModifyYear(increaseYearFn) })
+      showRightNav && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RightNavigation, { increaseMonth: canModifyMonths(increaseMonth), increaseYear: canModifyYear(increaseYearFn) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StyledMenu, { inline: true, handleClose: () => setMonthMenuOpen(false), itemRef, isOpen, children: months.map((month, idx) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(MenuItem, { onClick: () => handleMonthChange(idx), children: month }, month)) })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StyledMenu, { inline: true, handleClose: () => setMonthMenuOpen(false), itemRef, isOpen, children: months.map((month, idx) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MenuItem, { onClick: () => handleMonthChange(idx), children: month }, month)) })
   ] });
 };
 
 // src/inputs/Datepicker/Base/DateInput.tsx
-var import_react21 = require("react");
-var import_outline6 = require("@heroicons/react/24/outline");
-var import_styled_components39 = __toESM(require("styled-components"));
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var Container6 = import_styled_components39.default.div`
+var import_react18 = require("react");
+var import_outline4 = require("@heroicons/react/24/outline");
+var import_styled_components26 = __toESM(require("styled-components"));
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var Container2 = import_styled_components26.default.div`
   display: flex;
-  align-items: center;
   > :not([hidden]) ~ :not([hidden]) {
     margin-left: ${({ theme: theme2 }) => theme2.space[1]};
     margin-right:${({ theme: theme2 }) => theme2.space[4]};
   }
 `;
-var Icon3 = (0, import_styled_components39.default)(import_outline6.CalendarIcon)`
+var Icon2 = (0, import_styled_components26.default)(import_outline4.CalendarIcon)`
   color: ${({ theme: theme2 }) => theme2.colors.foreground};
   margin-right: ${({ theme: theme2 }) => theme2.space[2]};
 `;
-var ClearBtn = (0, import_styled_components39.default)(ClickableElement)`
+var ClearBtn = (0, import_styled_components26.default)(ClickableElement)`
   color: ${({ theme: theme2 }) => theme2.colors.foreground};
   :hover {
     color: ${({ theme: theme2 }) => theme2.colors.foreground};
   }
 `;
-var DateInput = (0, import_react21.forwardRef)(({
+var DateInput = (0, import_react18.forwardRef)(({
   value,
   placeholder,
   onClick,
@@ -2425,26 +1850,26 @@ var DateInput = (0, import_react21.forwardRef)(({
     e.stopPropagation();
     clear == null ? void 0 : clear();
   };
-  let displayValue = value ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Typography, { as: "span", children: value }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Typography, { as: "span", color: "mutedForeground", children: placeholder });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(OutlineButton, { bg: "background", width: "100%", fontWeight: "400", lineHeight: "inherit", justifyContent: "space-between", ref, onClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Container6, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon3, { width: 16, height: 16 }),
+  let displayValue = value ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { as: "span", children: value }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { as: "span", color: "mutedForeground", children: placeholder });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(OutlineButton, { bg: "background", width: "100%", fontWeight: "400", lineHeight: "inherit", justifyContent: "space-between", ref, onClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Container2, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon2, { width: 16, height: 16 }),
       displayValue
     ] }),
-    showClear && value && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ClearBtn, { onClick: handleClear, as: "a", children: "Clear" })
+    showClear && value && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ClearBtn, { onClick: handleClear, as: "a", children: "Clear" })
   ] });
 });
 
 // src/inputs/Datepicker/Base/DateContainer.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var DateContainer = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Box, { display: "flex", p: "3", bg: "background", borderRadius: "2", boxShadow: "base.1", border: "border.1", fontSize: "1", lineHeight: "1", children });
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var DateContainer = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { display: "flex", p: "3", bg: "background", borderRadius: "2", boxShadow: "base.1", border: "border.1", fontSize: "1", lineHeight: "1", children });
 
 // src/inputs/Datepicker/Base/DateWrapper.tsx
-var import_react22 = require("react");
+var import_react19 = require("react");
 var import_react_popper2 = require("react-popper");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var DateWrapper = ({ children, itemRef, direction = "bottom-start", handleClose, isOpen }) => {
-  let [popperRef, setPopperRef] = (0, import_react22.useState)(null);
+  let [popperRef, setPopperRef] = (0, import_react19.useState)(null);
   let { styles, attributes } = (0, import_react_popper2.usePopper)(itemRef, popperRef, {
     placement: direction,
     modifiers: [
@@ -2456,13 +1881,13 @@ var DateWrapper = ({ children, itemRef, direction = "bottom-start", handleClose,
       }
     ]
   });
-  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ClickOutside, { handleClose, target: popperRef, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Box, __spreadProps(__spreadValues({ ref: setPopperRef, style: styles.popper }, attributes.popper), { children })) }) : null;
+  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ClickOutside, { handleClose, target: popperRef, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Box, __spreadProps(__spreadValues({ ref: setPopperRef, style: styles.popper }, attributes.popper), { children })) }) : null;
 };
 
 // src/inputs/Datepicker/Base/StylingBasePicker.tsx
 var import_polished3 = require("polished");
-var import_styled_components40 = __toESM(require("styled-components"));
-var Container7 = import_styled_components40.default.div`
+var import_styled_components27 = __toESM(require("styled-components"));
+var Container3 = import_styled_components27.default.div`
 /*
 --------------------------
   Day names
@@ -2657,7 +2082,7 @@ var Container7 = import_styled_components40.default.div`
 `;
 
 // src/inputs/Datepicker/Base/BasePicker.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var BasePicker = (_a) => {
   var _b = _a, {
     placeholder,
@@ -2682,8 +2107,8 @@ var BasePicker = (_a) => {
     "showYearPicker",
     "showClear"
   ]);
-  let [isOpen, setOpen] = (0, import_react23.useState)(false);
-  let [wrappedRef, setWrappedRef] = (0, import_react23.useState)(null);
+  let [isOpen, setOpen] = (0, import_react20.useState)(false);
+  let [wrappedRef, setWrappedRef] = (0, import_react20.useState)(null);
   let handleChange = (value, e) => {
     let isComplete = Array.isArray(value) && value[0] && value[1] || !Array.isArray(value) && value !== null;
     if (shouldCloseOnSelect && isComplete) {
@@ -2696,16 +2121,16 @@ var BasePicker = (_a) => {
     monthsShown,
     showPopperArrow: false,
     inline: true,
-    renderDayContents: (dayOfMonth) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "in-month", children: dayOfMonth }),
+    renderDayContents: (dayOfMonth) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "in-month", children: dayOfMonth }),
     calendarContainer: DateContainer,
     popperContainer: PopperContainer,
     onChange: handleChange,
     showMonthYearPicker,
     showYearPicker,
-    renderCustomHeader: (props) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DateHeader, __spreadValues({ showMonthYearPicker, monthsShown, showYearPicker }, props))
+    renderCustomHeader: (props) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DateHeader, __spreadValues({ showMonthYearPicker, monthsShown, showYearPicker }, props))
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       DateInput,
       {
         ref: setWrappedRef,
@@ -2716,7 +2141,7 @@ var BasePicker = (_a) => {
         showClear
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DateWrapper, { isOpen, handleClose: () => setOpen(false), itemRef: wrappedRef, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Container7, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DateWrapper, { isOpen, handleClose: () => setOpen(false), itemRef: wrappedRef, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Container3, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       import_react_datepicker.default,
       __spreadValues(__spreadValues({}, defaults), rest)
     ) }) })
@@ -2724,14 +2149,14 @@ var BasePicker = (_a) => {
 };
 
 // src/inputs/Datepicker/DateRangePicker.tsx
-var import_react24 = require("react");
+var import_react21 = require("react");
 var import_date_fns2 = require("date-fns");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var DateRangePicker = (_a) => {
   var _b = _a, { defaultStartDate, defaultEndDate, onChange = () => {
   }, inputValueFormat = "dd/MM/yyyy", monthsShown = 2 } = _b, rest = __objRest(_b, ["defaultStartDate", "defaultEndDate", "onChange", "inputValueFormat", "monthsShown"]);
-  let [startDate, setStartDate] = (0, import_react24.useState)(defaultStartDate || null);
-  let [endDate, setEndDate] = (0, import_react24.useState)(defaultEndDate || null);
+  let [startDate, setStartDate] = (0, import_react21.useState)(defaultStartDate || null);
+  let [endDate, setEndDate] = (0, import_react21.useState)(defaultEndDate || null);
   let inputValue = startDate && endDate && `${(0, import_date_fns2.format)(startDate, inputValueFormat)} - ${(0, import_date_fns2.format)(endDate, inputValueFormat)}`;
   let clear = () => {
     setStartDate(null);
@@ -2743,7 +2168,7 @@ var DateRangePicker = (_a) => {
     setEndDate(end);
     onChange == null ? void 0 : onChange(dates, event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     BasePicker,
     __spreadProps(__spreadValues({}, rest), {
       inputValue: inputValue || void 0,
@@ -2758,9 +2183,9 @@ var DateRangePicker = (_a) => {
 };
 
 // src/inputs/Datepicker/DatePicker.tsx
-var import_react25 = require("react");
+var import_react22 = require("react");
 var import_date_fns3 = require("date-fns");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var DatePicker = (_a) => {
   var _b = _a, {
     defaultDate,
@@ -2772,7 +2197,7 @@ var DatePicker = (_a) => {
     "onChange",
     "inputValueFormat"
   ]);
-  let [selectedDate, setSelectedDate] = (0, import_react25.useState)(defaultDate || null);
+  let [selectedDate, setSelectedDate] = (0, import_react22.useState)(defaultDate || null);
   let inputValue = selectedDate && (0, import_date_fns3.format)(selectedDate, inputValueFormat);
   let clear = () => {
     setSelectedDate(null);
@@ -2781,7 +2206,7 @@ var DatePicker = (_a) => {
     setSelectedDate(date);
     onChange == null ? void 0 : onChange(date, event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     BasePicker,
     __spreadProps(__spreadValues({}, rest), {
       inputValue: inputValue || void 0,
@@ -2796,10 +2221,10 @@ var DatePicker = (_a) => {
 var import_downshift = __toESM(require("downshift"));
 
 // src/inputs/Select/SelectContext.tsx
-var import_react26 = require("react");
-var SelectContext = (0, import_react26.createContext)(void 0);
+var import_react23 = require("react");
+var SelectContext = (0, import_react23.createContext)(void 0);
 var useSelectContext = () => {
-  let context = (0, import_react26.useContext)(SelectContext);
+  let context = (0, import_react23.useContext)(SelectContext);
   if (context === void 0) {
     throw new Error("useSelectContext must be used within a SelectContext provider");
   }
@@ -2807,7 +2232,7 @@ var useSelectContext = () => {
 };
 
 // src/inputs/Select/Select.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var clearInputOnSelectItem = (state, changes) => {
   if (changes.type === import_downshift.default.stateChangeTypes.clickButton) {
     return __spreadProps(__spreadValues({}, changes), {
@@ -2818,24 +2243,24 @@ var clearInputOnSelectItem = (state, changes) => {
 };
 var Select = (_a) => {
   var _b = _a, { itemToString, children } = _b, rest = __objRest(_b, ["itemToString", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_downshift.default, __spreadProps(__spreadValues({ itemToString, stateReducer: clearInputOnSelectItem }, rest), { children: (_a2) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_downshift.default, __spreadProps(__spreadValues({ itemToString, stateReducer: clearInputOnSelectItem }, rest), { children: (_a2) => {
     var _b2 = _a2, { getRootProps } = _b2, downshift = __objRest(_b2, ["getRootProps"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Box, __spreadProps(__spreadValues({ position: "relative", width: "100%" }, getRootProps()), { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectContext.Provider, { value: __spreadValues(__spreadValues({}, downshift), getRootProps()), children }) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Box, __spreadProps(__spreadValues({ position: "relative", width: "100%" }, getRootProps()), { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectContext.Provider, { value: __spreadValues(__spreadValues({}, downshift), getRootProps()), children }) }));
   } }));
 };
 
 // src/inputs/Select/SelectButton.tsx
-var import_outline7 = require("@heroicons/react/24/outline");
-var import_styled_components41 = __toESM(require("styled-components"));
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var ClearBtn2 = (0, import_styled_components41.default)(ClickableElement)`
+var import_outline5 = require("@heroicons/react/24/outline");
+var import_styled_components28 = __toESM(require("styled-components"));
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var ClearBtn2 = (0, import_styled_components28.default)(ClickableElement)`
   color: ${({ theme: theme2 }) => theme2.colors.mutedForeground};
   margin-right: 3px;
   :hover {
     color: ${({ theme: theme2 }) => theme2.colors.foreground};
   }
 `;
-var Container8 = (0, import_styled_components41.default)(Box)`
+var Container4 = (0, import_styled_components28.default)(Box)`
   > {
     margin-right: ${({ theme: theme2 }) => theme2.space[4]};
   }
@@ -2867,7 +2292,7 @@ var SelectButton = (_a) => {
     e.stopPropagation();
     clearSelection();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     OutlineButton,
     __spreadProps(__spreadValues(__spreadValues({
       width: "100%",
@@ -2875,10 +2300,10 @@ var SelectButton = (_a) => {
       justifyContent: "space-between"
     }, getToggleButtonProps()), rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Typography, { fontWeight: "normal", children: buttonText }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Container8, { display: "flex", alignItems: "center", children: [
-          isClearableActive && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ClearBtn2, { as: "a", onClick: clear, children: "Clear" }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_outline7.ChevronUpDownIcon, { height: 16, width: 16 })
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { fontWeight: "normal", color: !selectedItem ? "mutedForeground" : "default", children: buttonText }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Container4, { display: "flex", alignItems: "center", children: [
+          isClearableActive && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ClearBtn2, { as: "a", onClick: clear, children: "Clear" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_outline5.ChevronUpDownIcon, { height: 16, width: 16 })
         ] })
       ]
     })
@@ -2886,16 +2311,16 @@ var SelectButton = (_a) => {
 };
 
 // src/inputs/Select/SelectFilter.tsx
-var import_react29 = require("react");
-var import_outline9 = require("@heroicons/react/24/outline");
+var import_react26 = require("react");
+var import_outline7 = require("@heroicons/react/24/outline");
 
 // src/inputs/Input/Input.tsx
-var import_react27 = require("react");
-var import_styled_components44 = __toESM(require("styled-components"));
+var import_react24 = require("react");
+var import_styled_components31 = __toESM(require("styled-components"));
 
 // src/inputs/Input/BaseInput.tsx
-var import_styled_components42 = __toESM(require("styled-components"));
-var BaseInput = import_styled_components42.default.input`
+var import_styled_components29 = __toESM(require("styled-components"));
+var BaseInput = import_styled_components29.default.input`
   width: 100%;
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2904,16 +2329,16 @@ var BaseInput = import_styled_components42.default.input`
   padding: ${({ theme: theme2 }) => theme2.space[1]} ${({ theme: theme2 }) => theme2.space[3]};
   font-size: ${({ theme: theme2 }) => theme2.fontSizes[1]};
   line-height: ${({ theme: theme2 }) => theme2.lineHeights[1]};
-  height: calc(${({ theme: theme2 }) => theme2.sizes[9]} - 2px);
+  height: ${({ theme: theme2 }) => theme2.sizes[8]};
   :placeholder {
     color: ${({ theme: theme2 }) => theme2.colors.mutedForeground};
   }
 `;
 
 // src/inputs/Input/AddonElement.tsx
-var import_styled_components43 = __toESM(require("styled-components"));
-var import_jsx_runtime50 = require("react/jsx-runtime");
-var StyledBox = (0, import_styled_components43.default)(Box)`
+var import_styled_components30 = __toESM(require("styled-components"));
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var StyledBox = (0, import_styled_components30.default)(Box)`
   &:focus {
     z-index:0;
     outline: none;
@@ -2932,11 +2357,11 @@ var AddonElement = ({
   addon,
   left,
   right
-}) => addon ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(StyledBox, { bg: "offsetBackground", borderRight: right ? "none" : "border.1", borderLeft: left ? "none" : "border.1", display: "flex", alignItems: "center", children: addon }) : null;
+}) => addon ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StyledBox, { bg: "offsetBackground", borderRight: right ? "none" : "border.1", borderLeft: left ? "none" : "border.1", display: "flex", alignItems: "center", children: addon }) : null;
 
 // src/inputs/Input/OptionalIcon.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var OptionalIcon = ({ icon, left, right }) => icon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var OptionalIcon = ({ icon, left, right }) => icon ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
   Box,
   {
     bg: "offsetBackground",
@@ -2951,8 +2376,8 @@ var OptionalIcon = ({ icon, left, right }) => icon ? /* @__PURE__ */ (0, import_
 ) : null;
 
 // src/inputs/Input/Input.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
-var Container9 = (0, import_styled_components44.default)(Box)`
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var Container5 = (0, import_styled_components31.default)(Box)`
   overflow: hidden;
   :focus-within {
     border: ${({ theme: theme2 }) => theme2.borders.primary[1]};
@@ -2965,7 +2390,7 @@ var Container9 = (0, import_styled_components44.default)(Box)`
      }
   `}
 `;
-var Input2 = (0, import_react27.forwardRef)((_a, ref) => {
+var Input2 = (0, import_react24.forwardRef)((_a, ref) => {
   var _b = _a, {
     prefixMarkIcon: prefiXMarkIcon,
     suffixMarkIcon: suffiXMarkIcon,
@@ -2979,8 +2404,8 @@ var Input2 = (0, import_react27.forwardRef)((_a, ref) => {
     "after",
     "disabled"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
-    Container9,
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    Container5,
     {
       disabled,
       bg: "background",
@@ -2989,77 +2414,73 @@ var Input2 = (0, import_react27.forwardRef)((_a, ref) => {
       border: "border.1",
       boxShadow: "base.0",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(OptionalIcon, { left: true, icon: prefiXMarkIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AddonElement, { left: true, addon: before }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(BaseInput, __spreadValues({ disabled, ref }, rest)),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(OptionalIcon, { right: true, icon: suffiXMarkIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AddonElement, { right: true, addon: after })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(OptionalIcon, { left: true, icon: prefiXMarkIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AddonElement, { left: true, addon: before }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BaseInput, __spreadValues({ disabled, ref }, rest)),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(OptionalIcon, { right: true, icon: suffiXMarkIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AddonElement, { right: true, addon: after })
       ]
     }
   );
 });
 
 // src/inputs/Input/Password.tsx
-var import_react28 = require("react");
-var import_outline8 = require("@heroicons/react/24/outline");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_outline6 = require("@heroicons/react/24/outline");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var Btn2 = (_a) => {
   var _b = _a, { showPassword, onClick } = _b, rest = __objRest(_b, ["showPassword", "onClick"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ClickableElement, __spreadProps(__spreadValues({ px: "3", py: "2", type: "button", onClick }, rest), { children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_outline8.EyeSlashIcon, { width: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_outline8.EyeIcon, { width: 16 }) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ClickableElement, __spreadProps(__spreadValues({ px: "3", py: "2", type: "button", onClick }, rest), { children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_outline6.EyeSlashIcon, { width: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_outline6.EyeIcon, { width: 16 }) }));
 };
 var Password = (_a) => {
   var rest = __objRest(_a, []);
-  let [showPassword, setToggle] = (0, import_react28.useState)(false);
+  let [showPassword, setToggle] = (0, import_react25.useState)(false);
   let onClick = () => setToggle(!showPassword);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     Input2,
     __spreadProps(__spreadValues({}, rest), {
-      after: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Btn2, { showPassword, onClick }),
+      after: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Btn2, { showPassword, onClick }),
       type: showPassword ? "text" : "password"
     })
   );
 };
 
 // src/inputs/Input/NumberField.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var NumberField = (_a) => {
   var rest = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Input2, __spreadValues({ type: "number" }, rest));
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Input2, __spreadValues({ type: "number" }, rest));
 };
 
 // src/inputs/Select/SelectFilter.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var SelectFilter = (_a) => {
   var _b = _a, { textProps } = _b, rest = __objRest(_b, ["textProps"]);
-  let ref = (0, import_react29.useRef)(null);
+  let ref = (0, import_react26.useRef)(null);
   let { getInputProps, isOpen } = useSelectContext();
-  (0, import_react29.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     var _a2;
     if (isOpen) {
       (_a2 = ref == null ? void 0 : ref.current) == null ? void 0 : _a2.focus();
     }
   }, [isOpen]);
   if (!isOpen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectButton, __spreadValues({}, rest));
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectButton, __spreadValues({}, rest));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Input2, __spreadValues(__spreadValues({ suffixMarkIcon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_outline9.ChevronUpDownIcon, { height: 16, width: 16 }), ref }, textProps), getInputProps()));
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Input2, __spreadValues(__spreadValues({ suffixMarkIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_outline7.ChevronUpDownIcon, { height: 16, width: 16 }), ref }, textProps), getInputProps()));
 };
 
 // src/inputs/Select/SelectItem.tsx
-var import_react30 = require("react");
-var import_styled_components45 = __toESM(require("styled-components"));
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var Item = (0, import_styled_components45.default)(ListItem)`
+var import_styled_components32 = __toESM(require("styled-components"));
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var Item = (0, import_styled_components32.default)(ListItem)`
   cursor: pointer;
-  padding: ${({ theme: theme2 }) => `${theme2.space[2]} ${theme2.space[4]}`};
-  background: ${({ changeBg, theme: theme2 }) => changeBg ? theme2.colors.accent : "inherit"};
+  padding: ${({ theme: theme2 }) => `${theme2.space[1]} ${theme2.space[4]}`};
+  background: ${({ changeBg, theme: theme2 }) => changeBg ? theme2.colors.muted : "inherit"};
   font-size: ${({ theme: theme2 }) => theme2.fontSizes[1]};
   line-height: ${({ theme: theme2 }) => theme2.lineHeights[1]};
   border-radius: ${({ theme: theme2 }) => theme2.radii[3]};
   margin: 0px ${({ theme: theme2 }) => theme2.space[1]};
-  &:hover {
-    background: ${({ theme: theme2 }) => theme2.colors.accent};
-  }
 `;
 var SelectItem = ({ children, item, index }) => {
   let {
@@ -3068,16 +2489,15 @@ var SelectItem = ({ children, item, index }) => {
     itemToString
   } = useSelectContext();
   let itemText = children || itemToString && itemToString(item) || item && item.value;
-  let memoValue = (0, import_react30.useMemo)(() => itemToString(item), [item, itemToString]);
   let _a = getItemProps({
     key: item.value,
     item,
     index
   }), { key } = _a, itemProps = __objRest(_a, ["key"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     Item,
     __spreadProps(__spreadValues({
-      changeBg: selectedItem === item || itemToString(SelectItem) === memoValue
+      changeBg: selectedItem === item
     }, itemProps), {
       children: itemText
     }),
@@ -3086,9 +2506,9 @@ var SelectItem = ({ children, item, index }) => {
 };
 
 // src/inputs/Select/SelectList.tsx
-var import_styled_components46 = __toESM(require("styled-components"));
-var import_jsx_runtime57 = require("react/jsx-runtime");
-var StyledList = (0, import_styled_components46.default)(List)`
+var import_styled_components33 = __toESM(require("styled-components"));
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var StyledList = (0, import_styled_components33.default)(List)`
   padding-top: ${({ theme: theme2 }) => theme2.space[1]};
   padding-bottom: ${({ theme: theme2 }) => theme2.space[1]};
   border-radius: ${({ theme: theme2 }) => theme2.radii[3]};
@@ -3099,18 +2519,26 @@ var StyledList = (0, import_styled_components46.default)(List)`
   position: absolute;
   min-width: 100%;
   z-index:1000;
+
+  :hover li {
+    background: ${({ theme: theme2 }) => theme2.colors.background};
+  }
+
+  li:hover {
+    background: ${({ theme: theme2 }) => theme2.colors.accent};
+  }
 `;
 var SelectList = ({ children }) => {
   let { isOpen } = useSelectContext();
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StyledList, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(StyledList, { children });
 };
 
 // src/inputs/Select/SimpleSelect/SimpleSelect.tsx
-var import_react31 = require("react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var SimpleSelect = (_a) => {
   var _b = _a, {
     values,
@@ -3129,7 +2557,7 @@ var SimpleSelect = (_a) => {
     "onInputValueChange",
     "itemToString"
   ]);
-  let [filter, setFilter] = (0, import_react31.useState)("");
+  let [filter, setFilter] = (0, import_react27.useState)("");
   let filterOptions = values.filter((item) => itemToString(item).toLowerCase().includes(filter));
   const handleOnputValueChange = (inputValue, stateAndHelpers) => {
     if (onInputValueChange) {
@@ -3137,16 +2565,16 @@ var SimpleSelect = (_a) => {
     }
     setFilter(inputValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Select, __spreadProps(__spreadValues({ onInputValueChange: handleOnputValueChange, itemToString }, rest), { children: [
-    isFilterable ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(SelectFilter, { disabled, isClearable, placeholder }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(SelectButton, { disabled, isClearable, placeholder }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(SelectList, { children: filterOptions.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(SelectItem, { item, index: idx }, `key_${JSON.stringify(item)}`)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Select, __spreadProps(__spreadValues({ onInputValueChange: handleOnputValueChange, itemToString }, rest), { children: [
+    isFilterable ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SelectFilter, { disabled, isClearable, placeholder }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SelectButton, { disabled, isClearable, placeholder }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SelectList, { children: filterOptions.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SelectItem, { item, index: idx }, `key_${JSON.stringify(item)}`)) })
   ] }));
 };
 
 // src/inputs/Switch/Switch.tsx
-var import_styled_components47 = __toESM(require("styled-components"));
-var import_jsx_runtime59 = require("react/jsx-runtime");
-var Label2 = import_styled_components47.default.label`
+var import_styled_components34 = __toESM(require("styled-components"));
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var Label2 = import_styled_components34.default.label`
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -3158,7 +2586,7 @@ var Label2 = import_styled_components47.default.label`
     opacity: 0.4;
   `}
 `;
-var Button2 = import_styled_components47.default.div`
+var Button2 = import_styled_components34.default.div`
   background: ${({ theme: theme2 }) => theme2.colors.background};
   position: absolute;
   border-radius: ${({ theme: theme2 }) => theme2.radii[8]};
@@ -3173,10 +2601,10 @@ var Button2 = import_styled_components47.default.div`
  `}
   ${({ theme: theme2 }) => theme2.transition}
 `;
-var Input3 = import_styled_components47.default.input`
+var Input3 = import_styled_components34.default.input`
   display: none;
 `;
-var Backing = import_styled_components47.default.div`
+var Backing = import_styled_components34.default.div`
     width: 100%;
     height: ${({ theme: theme2 }) => theme2.sizes[4]};
     border-radius: ${({ theme: theme2 }) => theme2.radii[8]};
@@ -3191,16 +2619,16 @@ var Backing = import_styled_components47.default.div`
 `;
 var Switch = (_a) => {
   var _b = _a, { disabled = false } = _b, rest = __objRest(_b, ["disabled"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Label2, { disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Input3, __spreadValues({ type: "checkbox", disabled }, rest)),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Backing, __spreadValues({}, rest)),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button2, __spreadValues({}, rest))
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Label2, { disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Input3, __spreadValues({ type: "checkbox", disabled }, rest)),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Backing, __spreadValues({}, rest)),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Button2, __spreadValues({}, rest))
   ] });
 };
 
 // src/inputs/TextArea/TextArea.tsx
-var import_styled_components48 = __toESM(require("styled-components"));
-var TextArea = import_styled_components48.default.textarea`
+var import_styled_components35 = __toESM(require("styled-components"));
+var TextArea = import_styled_components35.default.textarea`
   box-shadow: ${({ theme: theme2 }) => theme2.shadows.base[0]};
   border: ${({ theme: theme2 }) => theme2.borders.border[1]};
   padding: ${({ theme: theme2 }) => theme2.space[2]};
@@ -3219,9 +2647,9 @@ var TextArea = import_styled_components48.default.textarea`
 `;
 
 // src/inputs/InputGroup/InputGroup.tsx
-var import_styled_components49 = __toESM(require("styled-components"));
-var import_jsx_runtime60 = require("react/jsx-runtime");
-var Group = import_styled_components49.default.div`
+var import_styled_components36 = __toESM(require("styled-components"));
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var Group = import_styled_components36.default.div`
   > div {
     border-radius: 0;
     position: relative;
@@ -3242,23 +2670,23 @@ var Group = import_styled_components49.default.div`
     border-radius: ${({ theme: theme2 }) => `0 0 ${theme2.radii[3]} ${theme2.radii[3]}`};
   }
 `;
-var InputGroup = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Group, { children });
+var InputGroup = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Group, { children });
 
 // src/inputs/Upload/UploadZone.tsx
-var import_react34 = require("react");
-var import_styled_components53 = __toESM(require("styled-components"));
-var import_outline12 = require("@heroicons/react/24/outline");
+var import_react30 = require("react");
+var import_styled_components40 = __toESM(require("styled-components"));
+var import_outline10 = require("@heroicons/react/24/outline");
 
 // src/inputs/Upload/TileItem.tsx
-var import_styled_components51 = __toESM(require("styled-components"));
-var import_outline10 = require("@heroicons/react/24/outline");
+var import_styled_components38 = __toESM(require("styled-components"));
+var import_outline8 = require("@heroicons/react/24/outline");
 
 // src/feedback/Tooltip/Tooltip.tsx
-var import_react32 = require("react");
+var import_react28 = require("react");
 var import_react_popper3 = require("react-popper");
-var import_styled_components50 = __toESM(require("styled-components"));
-var import_jsx_runtime61 = require("react/jsx-runtime");
-var Popover = import_styled_components50.default.div`
+var import_styled_components37 = __toESM(require("styled-components"));
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var Popover = import_styled_components37.default.div`
   border-radius: ${({ theme: theme2 }) => theme2.radii[2]};
   box-shadow: ${({ theme: theme2 }) => theme2.shadows.base[0]};
   border: ${({ theme: theme2 }) => theme2.borders.border[1]};
@@ -3275,16 +2703,16 @@ var Tooltip = ({
   as: Component2 = "div",
   disabled
 }) => {
-  let [showTooltip, setTooltip] = (0, import_react32.useState)(false);
-  let [wrappedRef, setWrappedRef] = (0, import_react32.useState)(null);
-  let [popperRef, setPopperRef] = (0, import_react32.useState)(null);
+  let [showTooltip, setTooltip] = (0, import_react28.useState)(false);
+  let [wrappedRef, setWrappedRef] = (0, import_react28.useState)(null);
+  let [popperRef, setPopperRef] = (0, import_react28.useState)(null);
   let { styles, attributes } = (0, import_react_popper3.usePopper)(wrappedRef, popperRef, {
     placement: direction
   });
   let handleMouseEnter = () => setTooltip(true);
   let handleMouseLeave = () => setTooltip(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       Component2,
       {
         style: { cursor: "pointer" },
@@ -3294,7 +2722,7 @@ var Tooltip = ({
         children
       }
     ),
-    !disabled && showTooltip && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    !disabled && showTooltip && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       Popover,
       __spreadProps(__spreadValues({
         ref: setPopperRef,
@@ -3307,8 +2735,8 @@ var Tooltip = ({
 };
 
 // src/inputs/Upload/TileItem.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
-var fallback = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var fallback = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
   Box,
   {
     width: "12",
@@ -3319,18 +2747,18 @@ var fallback = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     color: "baseHighlight",
     borderRadius: "2",
     bg: "background.2",
-    children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_outline10.PhotoIcon, { width: 30, height: 30 })
+    children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_outline8.PhotoIcon, { width: 30, height: 30 })
   }
 );
-var DeleteBtn = (0, import_styled_components51.default)(ClickableElement)`
+var DeleteBtn = (0, import_styled_components38.default)(ClickableElement)`
   opacity: ${({ hasError }) => hasError ? 1 : 0};
 `;
-var BoxStyled = (0, import_styled_components51.default)(Box)`
+var BoxStyled = (0, import_styled_components38.default)(Box)`
   :hover button {
     opacity: 1;
   }
 `;
-var StyledImage = (0, import_styled_components51.default)(ImageComp)`
+var StyledImage = (0, import_styled_components38.default)(ImageComp)`
   width: ${({ theme: theme2 }) => theme2.sizes[12]};
   height: ${({ theme: theme2 }) => theme2.sizes[12]};
   object-fit: cover;
@@ -3344,7 +2772,7 @@ var TileItem = ({ file, handleDelete }) => {
   let hasError = (((_a = file.errors) == null ? void 0 : _a.length) || 0) > 0;
   let errorMessage = hasError && file.errors.reduce((acc, curr) => acc += curr.message + " ", "");
   let meta = [bytes, type, extension].filter(Boolean).join(" - ");
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Tooltip, { disabled: !hasError, as: "li", tooltip: errorMessage, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Tooltip, { disabled: !hasError, as: "li", tooltip: errorMessage, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     BoxStyled,
     {
       display: "flex",
@@ -3355,30 +2783,30 @@ var TileItem = ({ file, handleDelete }) => {
       border: hasError ? "error.1" : "background2.1",
       color: hasError ? "error" : "base",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(StyledImage, { src: imgSrc, fallback }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Box, { display: "flex", flexDirection: "column", ml: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Typography, { as: "span", fontWeight: "700", children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Typography, { fontSize: "0", lineHeight: "0", color: "baseHighlight", children: meta })
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(StyledImage, { src: imgSrc, fallback }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Box, { display: "flex", flexDirection: "column", ml: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { as: "span", fontWeight: "700", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { fontSize: "0", lineHeight: "0", color: "baseHighlight", children: meta })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Box, { display: "flex", flexGrow: "1", alignItems: "center", justifyContent: "end", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DeleteBtn, { hasError, onClick: () => handleDelete(file.key), children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_outline10.TrashIcon, { width: 16, height: 16 }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Box, { display: "flex", flexGrow: "1", alignItems: "center", justifyContent: "end", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DeleteBtn, { hasError, onClick: () => handleDelete(file.key), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_outline8.TrashIcon, { width: 16, height: 16 }) }) })
       ]
     }
   ) });
 };
 
 // src/inputs/Upload/BasicItem.tsx
-var import_styled_components52 = __toESM(require("styled-components"));
-var import_outline11 = require("@heroicons/react/24/outline");
-var import_jsx_runtime63 = require("react/jsx-runtime");
-var BoxStyled2 = (0, import_styled_components52.default)(Box)`
+var import_styled_components39 = __toESM(require("styled-components"));
+var import_outline9 = require("@heroicons/react/24/outline");
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var BoxStyled2 = (0, import_styled_components39.default)(Box)`
   :hover button {
     opacity: 1;
   }
 `;
-var DeleteBtn2 = (0, import_styled_components52.default)(ClickableElement)`
+var DeleteBtn2 = (0, import_styled_components39.default)(ClickableElement)`
   opacity: ${({ hasError }) => hasError ? 1 : 0};
 `;
-var SpacedBox = (0, import_styled_components52.default)(Box)`
+var SpacedBox = (0, import_styled_components39.default)(Box)`
   > :not([hidden]) ~ :not([hidden]) {
     margin-left: ${({ theme: theme2 }) => theme2.space[2]};
   }
@@ -3388,7 +2816,7 @@ var BasicItem = ({ file, handleDelete }) => {
   let { bytes, name } = file.meta;
   let hasError = (((_a = file.errors) == null ? void 0 : _a.length) || 0) > 0;
   let errorMessage = hasError && file.errors.reduce((acc, curr) => acc += curr.message + " ", "");
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Tooltip, { disabled: !hasError, as: "li", tooltip: errorMessage, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Tooltip, { disabled: !hasError, as: "li", tooltip: errorMessage, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     BoxStyled2,
     {
       display: "flex",
@@ -3398,19 +2826,19 @@ var BasicItem = ({ file, handleDelete }) => {
       borderRadius: "1",
       color: hasError ? "error" : "base",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(SpacedBox, { display: "flex", alignItems: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_outline11.PaperClipIcon, { widths: 16, height: 16 }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { as: "span", children: name }),
-          !hasError && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { as: "span", fontSize: 1, lineHeight: 1, children: bytes })
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(SpacedBox, { display: "flex", alignItems: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_outline9.PaperClipIcon, { widths: 16, height: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { as: "span", children: name }),
+          !hasError && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { as: "span", fontSize: 1, lineHeight: 1, children: bytes })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(SpacedBox, { display: "flex", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DeleteBtn2, { hasError, onClick: () => handleDelete(file.key), children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_outline11.TrashIcon, { width: 16, height: 16 }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SpacedBox, { display: "flex", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DeleteBtn2, { hasError, onClick: () => handleDelete(file.key), children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_outline9.TrashIcon, { width: 16, height: 16 }) }) })
       ]
     }
   ) });
 };
 
 // src/inputs/Upload/BaseUploader.tsx
-var import_react33 = require("react");
+var import_react29 = require("react");
 var import_react_dropzone = require("react-dropzone");
 
 // src/inputs/Upload/Utils.ts
@@ -3436,7 +2864,7 @@ var getMeta = (file, errors) => {
 };
 
 // src/inputs/Upload/BaseUploader.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var BaseUploader = ({
   container: Container13,
   options = {},
@@ -3444,7 +2872,7 @@ var BaseUploader = ({
   filesRender,
   handleFileUpdate
 }) => {
-  let [files, setFiles] = (0, import_react33.useState)([]);
+  let [files, setFiles] = (0, import_react29.useState)([]);
   let _a = options, { onDrop } = _a, otherOptions = __objRest(_a, ["onDrop"]);
   let wrappedOnDrop = (acceptedFiles, fileRejections, event) => {
     onDrop == null ? void 0 : onDrop(acceptedFiles, fileRejections, event);
@@ -3456,12 +2884,12 @@ var BaseUploader = ({
   let handleDelete = (key) => {
     setFiles(files.filter((f) => f.key !== key));
   };
-  (0, import_react33.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     handleFileUpdate == null ? void 0 : handleFileUpdate(files);
   }, [files, handleFileUpdate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Container13, __spreadProps(__spreadValues({ isDragActive }, getRootProps()), { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("input", __spreadValues({}, getInputProps())),
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Container13, __spreadProps(__spreadValues({ isDragActive }, getRootProps()), { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("input", __spreadValues({}, getInputProps())),
       renderUploader == null ? void 0 : renderUploader(isDragActive, open)
     ] })),
     filesRender == null ? void 0 : filesRender(files, handleDelete)
@@ -3469,8 +2897,8 @@ var BaseUploader = ({
 };
 
 // src/inputs/Upload/UploadZone.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
-var Container10 = import_styled_components53.default.div`
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var Container6 = import_styled_components40.default.div`
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -3493,7 +2921,7 @@ var Container10 = import_styled_components53.default.div`
     border-color: ${theme2.colors.accent};
   `}
 `;
-var StyledList2 = (0, import_styled_components53.default)(List)`
+var StyledList2 = (0, import_styled_components40.default)(List)`
   margin-top: ${({ theme: theme2 }) => theme2.space[2]};
   > :not([hidden]) ~ :not([hidden]) {
     margin-top: ${({ theme: theme2 }) => theme2.space[2]};
@@ -3502,142 +2930,686 @@ var StyledList2 = (0, import_styled_components53.default)(List)`
   :empty {
     margin: 0px;
   }
-`;
-var TrayIcon = (0, import_styled_components53.default)(import_outline12.ArrowUpTrayIcon)`
-  color: ${({ theme: theme2 }) => theme2.colors.foreground};
-  ${({ isDragActive, theme: theme2 }) => isDragActive && `
-    color: ${theme2.colors.foreground};
-    ${theme2.animations.bounce}
-  `}
-`;
-var UploadZone = (_a) => {
-  var _b = _a, {
-    showAsTile,
-    filesRender,
-    bottomText = "Support for a single or bulk upload."
-  } = _b, rest = __objRest(_b, [
-    "showAsTile",
-    "filesRender",
-    "bottomText"
-  ]);
-  let Uploader = (0, import_react34.useCallback)((isDragActive) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(TrayIcon, { width: 30, height: 30, isDragActive }),
-    isDragActive ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Typography, { fontWeight: "700", color: "base", children: "And drop your file to upload" }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(Typography, { children: [
-      "Drag and drop, or ",
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Typography, { as: "span", color: "primary", children: "click to find" }),
-      " a file"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-      Typography,
-      {
-        fontSize: "1",
-        lineHeight: "1",
-        color: isDragActive ? "baseAccent" : "baseHighlight",
-        children: bottomText
-      }
-    )
-  ] }), [bottomText]);
-  let defaultRender = (0, import_react34.useCallback)((files, handleDelete) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(StyledList2, { children: files.map((file) => showAsTile ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(TileItem, { file, handleDelete }, file.key) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(BasicItem, { file, handleDelete }, file.key)) }), [showAsTile]);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-    BaseUploader,
-    __spreadProps(__spreadValues({}, rest), {
-      container: Container10,
-      renderUploader: Uploader,
-      filesRender: filesRender || defaultRender
-    })
-  );
+`;
+var TrayIcon = (0, import_styled_components40.default)(import_outline10.ArrowUpTrayIcon)`
+  color: ${({ theme: theme2 }) => theme2.colors.foreground};
+  ${({ isDragActive, theme: theme2 }) => isDragActive && `
+    color: ${theme2.colors.foreground};
+    ${theme2.animations.bounce}
+  `}
+`;
+var UploadZone = (_a) => {
+  var _b = _a, {
+    showAsTile,
+    filesRender,
+    bottomText = "Support for a single or bulk upload."
+  } = _b, rest = __objRest(_b, [
+    "showAsTile",
+    "filesRender",
+    "bottomText"
+  ]);
+  let Uploader = (0, import_react30.useCallback)((isDragActive) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TrayIcon, { width: 30, height: 30, isDragActive }),
+    isDragActive ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { fontWeight: "700", color: "base", children: "And drop your file to upload" }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Text, { children: [
+      "Drag and drop, or ",
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { as: "span", color: "primary", children: "click to find" }),
+      " a file"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      Text,
+      {
+        fontSize: "1",
+        lineHeight: "1",
+        color: isDragActive ? "baseAccent" : "baseHighlight",
+        children: bottomText
+      }
+    )
+  ] }), [bottomText]);
+  let defaultRender = (0, import_react30.useCallback)((files, handleDelete) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(StyledList2, { children: files.map((file) => showAsTile ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TileItem, { file, handleDelete }, file.key) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(BasicItem, { file, handleDelete }, file.key)) }), [showAsTile]);
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    BaseUploader,
+    __spreadProps(__spreadValues({}, rest), {
+      container: Container6,
+      renderUploader: Uploader,
+      filesRender: filesRender || defaultRender
+    })
+  );
+};
+
+// src/inputs/Upload/UploadButton.tsx
+var import_react31 = require("react");
+var import_outline11 = require("@heroicons/react/24/outline");
+var import_styled_components41 = __toESM(require("styled-components"));
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var StyledList3 = (0, import_styled_components41.default)(List)`
+  margin-top: ${({ theme: theme2 }) => theme2.space[2]};
+  > :not([hidden]) ~ :not([hidden]) {
+    margin-top: ${({ theme: theme2 }) => theme2.space[2]};
+    margin-bottom: ${({ theme: theme2 }) => theme2.space[2]};
+  }
+  :empty {
+    margin: 0px;
+  }
+`;
+var UploadButton = (_a) => {
+  var _b = _a, {
+    buttonText = "Upload file"
+  } = _b, rest = __objRest(_b, [
+    "buttonText"
+  ]);
+  let Uploader = (0, import_react31.useCallback)((_, open) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(OutlineButton, { onClick: open, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_outline11.ArrowUpTrayIcon, { width: 16, height: 16 }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: buttonText })
+  ] }), [buttonText]);
+  let defaultRender = (0, import_react31.useCallback)((files, handleDelete) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StyledList3, { children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(BasicItem, { file, handleDelete }, file.key)) }), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    BaseUploader,
+    __spreadProps(__spreadValues({
+      container: (_a2) => {
+        var params = __objRest(_a2, []);
+        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", __spreadValues({}, params));
+      }
+    }, rest), {
+      options: {
+        noClick: true,
+        noKeyboard: true
+      },
+      renderUploader: Uploader,
+      filesRender: defaultRender
+    })
+  );
+};
+
+// src/inputs/WithLabel/Label.tsx
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var Label3 = ({ value, children, error }) => {
+  let isRequired = children.props.required;
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Box, { as: "label", display: "block", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Box, { color: error ? "destructive" : "inherit", display: "flex", fontSize: "1", lineHeight: "1", mt: "4", mb: "1", children: [
+      value,
+      " ",
+      isRequired && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { children: "*" })
+    ] }),
+    children
+  ] });
+};
+
+// src/data/Pagination/RowControls.tsx
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var StyledText = (0, import_styled_components42.default)(Text)`
+  white-space: nowrap;
+`;
+var RowControls = ({ onChange }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Box, { display: "inline-flex", alignItems: "center", gridColumnGap: "2", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(StyledText, { children: "Rows per page" }),
+  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SimpleSelect, { onChange: (i) => onChange(parseInt(i)), initialSelectedItem: "10", values: ["10", "20", "30", "40", "50"] })
+] });
+
+// src/data/Pagination/Pagination.tsx
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var Container7 = import_styled_components43.default.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 38px;
+  line-height: 1rem;
+  padding: ${({ theme: theme2 }) => theme2.space[3]} ${({ theme: theme2 }) => theme2.space[3]};
+`;
+var Pagination = ({
+  limit,
+  skip,
+  setSkip,
+  itemCount,
+  hidePageSizeControls,
+  setSize
+}) => {
+  let to = skip + limit > itemCount ? itemCount : skip + limit;
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Container7, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Text, { color: "mutedForeground", children: [
+      skip + 1,
+      " to ",
+      to,
+      " of ",
+      itemCount,
+      " results"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Box, { display: "flex", justifyContent: "space-between", gridColumnGap: "8", children: [
+      !hidePageSizeControls && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(RowControls, { onChange: setSize }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(PaginationControls, { itemCount, limit, skip, setSkip })
+    ] })
+  ] });
+};
+
+// src/data/Panel/Panel.tsx
+var import_styled_components44 = __toESM(require("styled-components"));
+var Panel = (0, import_styled_components44.default)(Box)`
+  border-radius:${({ theme: theme2 }) => theme2.radii[4]};
+  border: ${({ theme: theme2 }) => theme2.borders.border[1]};
+  background: ${({ theme: theme2 }) => theme2.colors.offsetBackground};
+`;
+
+// src/data/Table/Table.tsx
+var import_react32 = require("react");
+var import_styled_components45 = __toESM(require("styled-components"));
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var Container8 = import_styled_components45.default.div`
+  background: ${({ theme: theme2 }) => theme2.colors.background};
+  border: 1px solid ${({ theme: theme2 }) => theme2.colors.border};
+  border-radius: ${({ theme: theme2 }) => theme2.radii[3]};
+  contain: paint;
+`;
+var StyledTable = import_styled_components45.default.table`
+  width: 100%;
+  position: relative;
+  border-collapse: collapse;
+  > :not([hidden]) ~ :not([hidden]) & :not(:last-child) {
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+    border-color: ${({ theme: theme2 }) => theme2.colors.border}
+  }
+`;
+var Table = (0, import_react32.forwardRef)((_a, ref) => {
+  var _b = _a, { children, containerClasses, footer } = _b, rest = __objRest(_b, ["children", "containerClasses", "footer"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Container8, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(StyledTable, __spreadProps(__spreadValues({ ref }, rest), { children })) }),
+    footer
+  ] });
+});
+
+// src/data/Table/TableBody.tsx
+var import_styled_components46 = __toESM(require("styled-components"));
+var TableBody = import_styled_components46.default.tbody`
+  background: ${({ theme: theme2 }) => theme2.colors.background};
+  border-top-width: 1px;
+  > :not([hidden]) ~ :not([hidden]) {
+    border-top-width: 1px;
+    border-color: ${({ theme: theme2 }) => theme2.colors.border}
+  }
+`;
+
+// src/data/Table/TableCell.tsx
+var import_styled_components47 = __toESM(require("styled-components"));
+var TableCell = import_styled_components47.default.td`
+  padding: ${({ theme: theme2 }) => `0.625rem ${theme2.space[3]}`}
+`;
+
+// src/data/Table/TableRow.tsx
+var import_styled_components48 = __toESM(require("styled-components"));
+var TableRow = import_styled_components48.default.tr`
+  ${({ onClick, theme: theme2 }) => typeof onClick === "function" && `
+    cursor: pointer;
+    :hover {
+      background: ${theme2.colors.accent};
+    }
+  `}
+  ${({ active, theme: theme2 }) => active && `
+    cursor: pointer;
+    background: ${theme2.colors.accent};
+  `}
+`;
+
+// src/data/Table/TableHead.tsx
+var import_react33 = require("react");
+var import_styled_components49 = __toESM(require("styled-components"));
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var Thead = import_styled_components49.default.thead`
+  text-align: left;
+  background: ${({ theme: theme2 }) => theme2.colors.offsetBackground};
+  border-bottom: 1px solid ${({ theme: theme2 }) => theme2.colors.border};
+  ${({ sticky, theme: theme2 }) => sticky && `
+    position: sticky;
+    top: 0;
+    box-shadow: ${theme2.shadows.base[1]};
+  `}
+`;
+var TableHeadItem = import_styled_components49.default.th`
+  padding: ${({ theme: theme2 }) => theme2.space[3]};
+  font-weight: 600;
+  letter-spacing: 0.025em;
+  color: ${({ theme: theme2 }) => theme2.colors.primary};
+`;
+var TableHead = (0, import_react33.forwardRef)((_a, ref) => {
+  var _b = _a, { children, headers, sticky } = _b, rest = __objRest(_b, ["children", "headers", "sticky"]);
+  if (!headers) {
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Thead, __spreadProps(__spreadValues({ sticky, ref }, rest), { children }));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Thead, { sticky, ref, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("tr", { children: headers.map((h) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(TableHeadItem, { children: h }, h)) }) });
+});
+
+// src/feedback/Alert/Alert.tsx
+var import_styled_components51 = __toESM(require("styled-components"));
+var import_outline12 = require("@heroicons/react/24/outline");
+
+// src/feedback/Alert/CloseBtn.tsx
+var import_styled_components50 = __toESM(require("styled-components"));
+var import_solid4 = require("@heroicons/react/24/solid");
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var StyledButton7 = (0, import_styled_components50.default)(ClickableElement)`
+  float:right;
+  padding: ${({ theme: theme2 }) => `${theme2.sizes[1]} ${theme2.sizes[2]}`};
+`;
+var CloseBtn = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(StyledButton7, { onClick, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_solid4.XMarkIcon, { width: 16, height: 16 }) });
+
+// src/feedback/Alert/Alert.tsx
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var Container9 = (0, import_styled_components51.default)(Box)`
+  border: 1px solid;
+  border-color: ${({ theme: theme2, destructive }) => destructive ? theme2.colors.destructive : theme2.colors.border};
+  background: ${({ theme: theme2, destructive }) => destructive ? theme2.colors.destructive : theme2.colors.background};
+  h1, svg, p {
+    color: ${({ theme: theme2, destructive }) => destructive ? theme2.colors.destructiveForeground : theme2.colors.foreground};
+  }
+`;
+var Icon3 = (0, import_styled_components51.default)(Box)`
+  float: left;
+  :empty {
+    margin: 0;
+  }
+`;
+var Content = (0, import_styled_components51.default)(Text)`
+  min-width: 100%;
+  margin-top: ${({ theme: theme2 }) => theme2.space[2]};
+  :empty {
+    margin-top: 0;
+  }
+`;
+var Alert = (_a) => {
+  var _b = _a, {
+    destructive = false,
+    title,
+    icon,
+    children,
+    withClose
+  } = _b, rest = __objRest(_b, [
+    "destructive",
+    "title",
+    "icon",
+    "children",
+    "withClose"
+  ]);
+  let Icons = icon || (destructive ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_outline12.ExclamationCircleIcon, { width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_jsx_runtime66.Fragment, {}));
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Container9, __spreadProps(__spreadValues({ px: 3, py: 1, display: "flex", flexGrow: 1, alignItems: "center", borderRadius: "4", overflow: "hidden", position: "relative", width: 29, fontSize: 1, lineHeight: 1, flexWrap: "wrap", destructive }, rest), { boxShadow: "highlight", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Box, { minWidth: "100%", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Icon3, { mr: 3, mt: "1px", lineHeight: 5, alignSelf: "center", children: Icons }),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Title, { display: "inline", fontWeight: "600", fontSize: 1, lineHeight: 2, letterSpacing: "0.025em", children: title }),
+      withClose && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CloseBtn, { onClick: withClose })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Content, { children })
+  ] }));
+};
+
+// src/feedback/Badge/Badge.tsx
+var import_styled_components52 = __toESM(require("styled-components"));
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var getPosition = (position4) => {
+  switch (position4) {
+    case "N":
+      return `
+      top: 0;
+      right: 50%;
+      transform: translateY(-50%) translateX(50%);
+      `;
+    case "NE":
+      return `
+      top: 0;
+      right: 0;
+      transform: translateY(-50%) translateX(50%);
+      `;
+    case "E":
+      return `
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%) translateX(50%);
+      `;
+    case "NW":
+      return `
+      top: 0;
+      left: 0;
+      transform: translateY(-50%) translateX(-50%);
+      `;
+    case "SE":
+      return `
+      right: 0;
+      bottom: 0;
+      transform: translateY(50%) translateX(50%);
+      `;
+    case "S":
+      return `
+        left: 50%;
+        top: 50%;
+        transform: translateY(50%) translateX(-50%);
+        `;
+    case "SW":
+      return `
+        left: 0;
+        bottom: 0;
+        transform: translateY(50%) translateX(-50%);
+      `;
+    case "W":
+      return `
+          right: 0;
+          top: 0;
+          transform: translateY(50%) translateX(-50%);
+        `;
+  }
+};
+var BadgeItem = import_styled_components52.default.div`
+  position: absolute;
+  border-radius: ${({ theme: theme2 }) => theme2.radii[8]};
+  font-size: ${({ theme: theme2 }) => theme2.fontSizes[0]};
+  line-height:  ${({ theme: theme2 }) => theme2.lineHeights[0]};
+  text-align: center;
+  color: ${({ theme: theme2, destructive }) => destructive ? theme2.colors.destructiveForeground : theme2.colors.primaryForeground};
+  background: ${({ theme: theme2, destructive }) => destructive ? theme2.colors.destructive : theme2.colors.primary};
+  min-width: fit-content;
+  width: ${({ theme: theme2 }) => theme2.sizes[5]};
+  padding: calc(${({ theme: theme2 }) => theme2.space[1]} / 2) ${({ theme: theme2 }) => theme2.space[2]};
+  z-index:9999;
+  :empty {
+    width: ${({ theme: theme2 }) => theme2.sizes[1]};
+    height: ${({ theme: theme2 }) => theme2.sizes[2]};
+  }
+  ${({ position: position4 }) => getPosition(position4)}
+`;
+var Badge = ({ position: position4 = "NE", children, tag, destructive = false }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Box, { display: "inline-block", position: "relative", width: "fill-available", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(BadgeItem, { position: position4, destructive, children: tag }),
+  children
+] });
+
+// src/feedback/Chip/Chip.tsx
+var import_styled_components53 = __toESM(require("styled-components"));
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var Container10 = import_styled_components53.default.div`
+  border-radius: ${({ theme: theme2 }) => theme2.radii[3]};
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  padding: calc(${({ theme: theme2 }) => theme2.space[1]} / 2) ${({ theme: theme2 }) => theme2.space[2]};
+  font-size: ${({ theme: theme2 }) => theme2.fontSizes[0]};
+  line-height: ${({ theme: theme2 }) => theme2.lineHeights[0]};
+  font-weight: 700;
+  color: ${({ theme: theme2, destructive }) => destructive ? theme2.colors.destructiveForeground : theme2.colors.primaryForeground};
+  background: ${({ theme: theme2, destructive }) => destructive ? theme2.colors.destructive : theme2.colors.primary};
+
+  > :not([hidden]) ~ :not([hidden]) {
+    margin-left: 0.5rem;
+  }
+`;
+var Chip = ({
+  destructive,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Container10, { destructive, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Text, { children }) });
+
+// src/feedback/Code/SyntaxHighlighter.tsx
+var import_react_syntax_highlighter = __toESM(require("react-syntax-highlighter"));
+
+// src/feedback/Code/theme.ts
+var githubLight = {
+  "hljs": {
+    "display": "block",
+    "overflowX": "auto",
+    "padding": "0.5em",
+    "color": "#24292e",
+    "background": "#ffffff"
+  },
+  "hljs-comment": {
+    "color": "#6a737d",
+    "fontStyle": "italic"
+  },
+  "hljs-quote": {
+    "color": "#6a737d",
+    "fontStyle": "italic"
+  },
+  "hljs-keyword": {
+    "color": "#d73a49",
+    "fontWeight": "bold"
+  },
+  "hljs-selector-tag": {
+    "color": "#d73a49",
+    "fontWeight": "bold"
+  },
+  "hljs-subst": {
+    "color": "#24292e",
+    "fontWeight": "normal"
+  },
+  "hljs-number": {
+    "color": "#005cc5"
+  },
+  "hljs-literal": {
+    "color": "#005cc5"
+  },
+  "hljs-variable": {
+    "color": "#e36209"
+  },
+  "hljs-template-variable": {
+    "color": "#e36209"
+  },
+  "hljs-tag .hljs-attr": {
+    "color": "#005cc5"
+  },
+  "hljs-string": {
+    "color": "#032f62"
+  },
+  "hljs-doctag": {
+    "color": "#22863a"
+  },
+  "hljs-title": {
+    "color": "#22863a",
+    "fontWeight": "bold"
+  },
+  "hljs-section": {
+    "color": "#22863a",
+    "fontWeight": "bold"
+  },
+  "hljs-selector-id": {
+    "color": "#22863a",
+    "fontWeight": "bold"
+  },
+  "hljs-type": {
+    "color": "#e36209",
+    "fontWeight": "bold"
+  },
+  "hljs-class .hljs-title": {
+    "color": "#e36209",
+    "fontWeight": "bold"
+  },
+  "hljs-tag": {
+    "color": "#22863a",
+    "fontWeight": "normal"
+  },
+  "hljs-name": {
+    "color": "#22863a",
+    "fontWeight": "normal"
+  },
+  "hljs-attribute": {
+    "color": "#005cc5",
+    "fontWeight": "normal"
+  },
+  "hljs-regexp": {
+    "color": "#032f62"
+  },
+  "hljs-link": {
+    "color": "#032f62"
+  },
+  "hljs-symbol": {
+    "color": "#22863a"
+  },
+  "hljs-bullet": {
+    "color": "#22863a"
+  },
+  "hljs-built_in": {
+    "color": "#e36209"
+  },
+  "hljs-builtin-name": {
+    "color": "#e36209"
+  },
+  "hljs-meta": {
+    "color": "#b31d28",
+    "fontWeight": "bold"
+  },
+  "hljs-deletion": {
+    "background": "#ffeef0"
+  },
+  "hljs-addition": {
+    "background": "#f0fff4"
+  },
+  "hljs-emphasis": {
+    "fontStyle": "italic"
+  },
+  "hljs-strong": {
+    "fontWeight": "bold"
+  }
+};
+var githubDark = {
+  "hljs": {
+    "display": "block",
+    "overflowX": "auto",
+    "padding": "0.5em",
+    "color": "#adbac7",
+    "background": "#22272e"
+  },
+  "hljs-comment": {
+    "color": "#768390",
+    "fontStyle": "italic"
+  },
+  "hljs-quote": {
+    "color": "#768390",
+    "fontStyle": "italic"
+  },
+  "hljs-keyword": {
+    "color": "#f47067",
+    "fontWeight": "bold"
+  },
+  "hljs-selector-tag": {
+    "color": "#f47067",
+    "fontWeight": "bold"
+  },
+  "hljs-subst": {
+    "color": "#adbac7",
+    "fontWeight": "normal"
+  },
+  "hljs-number": {
+    "color": "#6cb6ff"
+  },
+  "hljs-literal": {
+    "color": "#6cb6ff"
+  },
+  "hljs-variable": {
+    "color": "#f69d50"
+  },
+  "hljs-template-variable": {
+    "color": "#f69d50"
+  },
+  "hljs-tag .hljs-attr": {
+    "color": "#6cb6ff"
+  },
+  "hljs-string": {
+    "color": "#96d0ff"
+  },
+  "hljs-doctag": {
+    "color": "#8ddb8c"
+  },
+  "hljs-title": {
+    "color": "#8ddb8c",
+    "fontWeight": "bold"
+  },
+  "hljs-section": {
+    "color": "#8ddb8c",
+    "fontWeight": "bold"
+  },
+  "hljs-selector-id": {
+    "color": "#8ddb8c",
+    "fontWeight": "bold"
+  },
+  "hljs-type": {
+    "color": "#f69d50",
+    "fontWeight": "bold"
+  },
+  "hljs-class .hljs-title": {
+    "color": "#f69d50",
+    "fontWeight": "bold"
+  },
+  "hljs-tag": {
+    "color": "#8ddb8c",
+    "fontWeight": "normal"
+  },
+  "hljs-name": {
+    "color": "#8ddb8c",
+    "fontWeight": "normal"
+  },
+  "hljs-attribute": {
+    "color": "#6cb6ff",
+    "fontWeight": "normal"
+  },
+  "hljs-regexp": {
+    "color": "#96d0ff"
+  },
+  "hljs-link": {
+    "color": "#96d0ff"
+  },
+  "hljs-symbol": {
+    "color": "#8ddb8c"
+  },
+  "hljs-bullet": {
+    "color": "#8ddb8c"
+  },
+  "hljs-built_in": {
+    "color": "#f69d50"
+  },
+  "hljs-builtin-name": {
+    "color": "#f69d50"
+  },
+  "hljs-meta": {
+    "color": "#768390",
+    "fontWeight": "bold"
+  },
+  "hljs-deletion": {
+    "background": "#ffd8d3"
+  },
+  "hljs-addition": {
+    "background": "#b4f1b4"
+  },
+  "hljs-emphasis": {
+    "fontStyle": "italic"
+  },
+  "hljs-strong": {
+    "fontWeight": "bold"
+  }
 };
 
-// src/inputs/Upload/UploadButton.tsx
-var import_react35 = require("react");
-var import_outline13 = require("@heroicons/react/24/outline");
+// src/feedback/Code/Wrapper.tsx
 var import_styled_components54 = __toESM(require("styled-components"));
-var import_jsx_runtime66 = require("react/jsx-runtime");
-var StyledList3 = (0, import_styled_components54.default)(List)`
-  margin-top: ${({ theme: theme2 }) => theme2.space[2]};
-  > :not([hidden]) ~ :not([hidden]) {
-    margin-top: ${({ theme: theme2 }) => theme2.space[2]};
-    margin-bottom: ${({ theme: theme2 }) => theme2.space[2]};
-  }
-  :empty {
-    margin: 0px;
-  }
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var StyledDiv = import_styled_components54.default.div`
+  overflow: hidden;
+  font-size: ${({ theme: theme2 }) => theme2.fontSizes[1]};
+  line-height: ${({ theme: theme2 }) => theme2.lineHeights[1]};
+  font-family: ${({ theme: theme2 }) => theme2.fonts.mono};
+  border: ${({ theme: theme2 }) => theme2.borders.border[1]};
+  box-shadow: ${({ theme: theme2 }) => theme2.shadows.base[1]};
+  border-radius: ${({ theme: theme2 }) => theme2.radii[3]};
+  background: ${({ theme: theme2 }) => theme2.colors.offsetBackground};
 `;
-var UploadButton = (_a) => {
-  var _b = _a, {
-    buttonText = "Upload file"
-  } = _b, rest = __objRest(_b, [
-    "buttonText"
-  ]);
-  let Uploader = (0, import_react35.useCallback)((_, open) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(OutlineButton, { onClick: open, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_outline13.ArrowUpTrayIcon, { width: 16, height: 16 }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { children: buttonText })
-  ] }), [buttonText]);
-  let defaultRender = (0, import_react35.useCallback)((files, handleDelete) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(StyledList3, { children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(BasicItem, { file, handleDelete }, file.key)) }), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-    BaseUploader,
-    __spreadProps(__spreadValues({
-      container: (_a2) => {
-        var params = __objRest(_a2, []);
-        return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", __spreadValues({}, params));
-      }
-    }, rest), {
-      options: {
-        noClick: true,
-        noKeyboard: true
-      },
-      renderUploader: Uploader,
-      filesRender: defaultRender
-    })
-  );
-};
-
-// src/inputs/WithLabel/Label.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
-var Label3 = ({ value, children, error }) => {
-  let isRequired = children.props.required;
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Box, { as: "label", display: "block", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Box, { color: error ? "destructive" : "inherit", display: "flex", fontSize: "1", lineHeight: "1", mt: "4", mb: "1", children: [
-      value,
-      " ",
-      isRequired && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Typography, { children: "*" })
-    ] }),
-    children
-  ] });
-};
-
-// src/utils/Theme/ThemeToggle.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
-var ThemeSwitch = () => {
-  let { theme: theme2, toggleTheme } = useMuffledSettings();
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(Box, { display: "flex", alignSelf: "center", width: "120px", justifyContent: "space-between", borderRadius: "8", border: "border.1", px: "3", py: "3", bg: "background", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_solid3.SunIcon, { width: "16px" }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Switch, { checked: theme2 === "Dark", onChange: toggleTheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_solid3.MoonIcon, { width: "16px" })
-  ] });
-};
-var ThemeButton = () => {
-  let { theme: theme2, toggleTheme } = useMuffledSettings();
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(OutlineButton, { onClick: toggleTheme, children: [
-    theme2 === "Dark" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_solid3.SunIcon, { width: "16px" }),
-    theme2 === "Light" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_solid3.MoonIcon, { width: "16px" })
-  ] });
-};
+var Wrapper = ({
+  children,
+  skip
+}) => skip ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_jsx_runtime69.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(StyledDiv, { children });
 
 // src/feedback/Code/SyntaxHighlighter.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var SyntaxHighlighter = ({
   language,
   code,
   withWrapper = true
 }) => {
   let { theme: theme2 } = useMuffledSettings();
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Wrapper, { skip: !withWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react_syntax_highlighter.default, { language, style: theme2 === "Light" ? githubLight : githubDark, children: code }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Wrapper, { skip: !withWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react_syntax_highlighter.default, { language, style: theme2 === "Light" ? githubLight : githubDark, children: code }) });
 };
 
 // src/feedback/Loader/CircleLoader.tsx
 var import_styled_components55 = __toESM(require("styled-components"));
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var Svg = import_styled_components55.default.svg`
   ${({ theme: theme2 }) => theme2.animations.spin};
   stroke: currentColor;
@@ -3650,15 +3622,15 @@ var InnerCircle = import_styled_components55.default.circle`
 `;
 var CircleLoader = (_a) => {
   var _b = _a, { height = 50, width = 50, destructive = false } = _b, rest = __objRest(_b, ["height", "width", "destructive"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Svg, __spreadProps(__spreadValues({ viewBox: "25 25 50 50", height, width }, rest), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(OuterCircle, { cx: "50", cy: "50", r: "20", fill: "none", strokeWidth: "4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(InnerCircle, { destructive, cx: "50", cy: "50", r: "20", fill: "none", strokeWidth: "4", strokeDashoffset: "-50", strokeDasharray: "60", strokeLinecap: "round" })
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(Svg, __spreadProps(__spreadValues({ viewBox: "25 25 50 50", height, width }, rest), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(OuterCircle, { cx: "50", cy: "50", r: "20", fill: "none", strokeWidth: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(InnerCircle, { destructive, cx: "50", cy: "50", r: "20", fill: "none", strokeWidth: "4", strokeDashoffset: "-50", strokeDasharray: "60", strokeLinecap: "round" })
   ] }));
 };
 
 // src/feedback/Loader/LinearLoader.tsx
 var import_styled_components56 = __toESM(require("styled-components"));
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var OuterLine = import_styled_components56.default.div`
   border-radius: ${({ theme: theme2 }) => theme2.radii[2]};
   width: 100%;
@@ -3683,33 +3655,33 @@ var StyledLinearSlider = (0, import_styled_components56.default)(LinearSlide)`
   bottom: 0px;
   left: 0px;
 `;
-var LinearLoader = ({ height = 5, destructive = false }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(Box, { overflow: "hidden", width: "100%", position: "relative", borderRadius: "8", style: { height }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(OuterLine, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(StyledLinearSlider, { children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(InnerLine, { destructive, style: { height } }) })
+var LinearLoader = ({ height = 5, destructive = false }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(Box, { overflow: "hidden", width: "100%", position: "relative", borderRadius: "8", style: { height }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(OuterLine, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(StyledLinearSlider, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(InnerLine, { destructive, style: { height } }) })
 ] });
 
 // src/feedback/Modal/Modal.tsx
-var import_react36 = require("react");
-var import_outline14 = require("@heroicons/react/24/outline");
-var import_jsx_runtime72 = require("react/jsx-runtime");
-var Header = ({ children, handleClose }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(Box, { display: "inline-flex", pr: "2", pl: "4", pt: "3", alignItems: "center", width: "100%", justifyContent: "space-between", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Title, { as: "h3", children }),
-  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ClickableElement, { px: 3, py: 2, ml: 5, onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_outline14.XMarkIcon, { width: 20, height: 20 }) })
+var import_react34 = require("react");
+var import_outline13 = require("@heroicons/react/24/outline");
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var Header = ({ children, handleClose }) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Box, { display: "inline-flex", pr: "2", pl: "4", pt: "3", alignItems: "center", width: "100%", justifyContent: "space-between", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Title, { as: "h3", children }),
+  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ClickableElement, { px: 3, py: 2, ml: 5, onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_outline13.XMarkIcon, { width: 20, height: 20 }) })
 ] });
 var Modal = ({ handleClose, title, children, open }) => {
-  let [isOpen, setOpen] = (0, import_react36.useState)(false);
+  let [isOpen, setOpen] = (0, import_react34.useState)(false);
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Backdrop, { onClick: () => setOpen(!isOpen), onDestroyed: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(Panel, { minWidth: "200px", onClick: stopPropagation, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Header, { handleClose, children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Backdrop, { onClick: () => setOpen(!isOpen), onDestroyed: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Panel, { minWidth: "200px", onClick: stopPropagation, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Header, { handleClose, children: title }),
     children
   ] }) });
 };
 
 // src/feedback/Progress/CircleProgress.tsx
 var import_styled_components57 = __toESM(require("styled-components"));
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var Svg2 = import_styled_components57.default.svg`
   stroke: currentColor;
   transform: rotate(-90deg);
@@ -3724,9 +3696,9 @@ var CircleProgress = ({ height = 50, width = 50, percentage = 0 }) => {
   let circumference = 2 * Math.PI * ((50 - 4) / 2);
   let strokeDasharray = circumference.toFixed(3);
   let strokeDashoffset = `${((100 - percentage) / 100 * circumference).toFixed(3)}px`;
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Svg2, { viewBox: "25 25 50 50", height, width, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(OuterCircle2, { cx: "50", cy: "50", r: "23", fill: "none", strokeWidth: "4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(Svg2, { viewBox: "25 25 50 50", height, width, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(OuterCircle2, { cx: "50", cy: "50", r: "23", fill: "none", strokeWidth: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
       InnerCircle2,
       {
         cx: "50",
@@ -3744,7 +3716,7 @@ var CircleProgress = ({ height = 50, width = 50, percentage = 0 }) => {
 
 // src/feedback/Progress/LinearProgress.tsx
 var import_styled_components58 = __toESM(require("styled-components"));
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var OuterLine2 = import_styled_components58.default.div`
   border-radius: ${({ theme: theme2 }) => theme2.radii[8]};
   width: 100%;
@@ -3767,16 +3739,16 @@ var InnerLine2 = import_styled_components58.default.div`
   left: 0px;
   background: ${({ theme: theme2 }) => theme2.colors.foreground};
 `;
-var LinearProgress = ({ height = 5, percentage = 0 }) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(Box, { overflow: "hidden", width: "100%", position: "relative", borderRadius: "8", style: { height }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(OuterLine2, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(InnerLine2, { percentage })
+var LinearProgress = ({ height = 5, percentage = 0 }) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(Box, { overflow: "hidden", width: "100%", position: "relative", borderRadius: "8", style: { height }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(OuterLine2, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(InnerLine2, { percentage })
 ] });
 
 // src/feedback/Skeleton/Skeleton.tsx
 var import_styled_components59 = __toESM(require("styled-components"));
 var import_polished4 = require("polished");
 var import_styled_system9 = require("styled-system");
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var Comp = import_styled_components59.default.div`
   ${({ theme: theme2 }) => theme2.animations.pulse}
   background: ${({ theme: theme2 }) => (0, import_polished4.rgba)(theme2.colors.primary, 0.1)};
@@ -3804,18 +3776,18 @@ var Comp = import_styled_components59.default.div`
 `;
 var Skeleton = (_a) => {
   var rest = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Comp, __spreadProps(__spreadValues({}, rest), { children: "\xA0" }));
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Comp, __spreadProps(__spreadValues({}, rest), { children: "\xA0" }));
 };
 
 // src/feedback/Snackbar/SnackbarProvider.tsx
-var import_react39 = require("react");
+var import_react37 = require("react");
 var import_styled_components61 = __toESM(require("styled-components"));
 
 // src/feedback/Snackbar/SnackbarContext.tsx
-var import_react37 = require("react");
-var SnackbarContext = (0, import_react37.createContext)(void 0);
+var import_react35 = require("react");
+var SnackbarContext = (0, import_react35.createContext)(void 0);
 var useSnackbar = () => {
-  let context = (0, import_react37.useContext)(SnackbarContext);
+  let context = (0, import_react35.useContext)(SnackbarContext);
   if (context === void 0) {
     throw new Error("useSnackbarCtx must be used within a SnackbarContext provider");
   }
@@ -3823,9 +3795,9 @@ var useSnackbar = () => {
 };
 
 // src/feedback/Snackbar/SnackbarItem.tsx
-var import_react38 = require("react");
+var import_react36 = require("react");
 var import_styled_components60 = __toESM(require("styled-components"));
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var StyledAlert = (0, import_styled_components60.default)(Alert)`
   margin: ${({ theme: theme2 }) => `${theme2.space[1]} ${theme2.space[4]}`};
 `;
@@ -3843,8 +3815,8 @@ var SnackbarItem = (_a) => {
     "title",
     "persist"
   ]);
-  let [open, setOpen] = (0, import_react38.useState)(true);
-  (0, import_react38.useEffect)(() => {
+  let [open, setOpen] = (0, import_react36.useState)(true);
+  (0, import_react36.useEffect)(() => {
     if (persist) {
       return;
     }
@@ -3853,7 +3825,7 @@ var SnackbarItem = (_a) => {
     }, duration);
     return () => clearTimeout(timeout);
   }, [duration, persist]);
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Slide, { inProp: open, onDestroyed: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Slide, { inProp: open, onDestroyed: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     StyledAlert,
     __spreadProps(__spreadValues({
       withClose: () => setOpen(false),
@@ -3898,7 +3870,7 @@ var getPosition2 = (position4) => {
 };
 
 // src/feedback/Snackbar/SnackbarProvider.tsx
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var Container11 = import_styled_components61.default.div`
   position: fixed;
   display: flex;
@@ -3914,9 +3886,9 @@ var SnackbarProvider = ({
   autoHideDuration = 5e3,
   portalLocation
 }) => {
-  let [items, setItems] = (0, import_react39.useState)([]);
-  let [queue, setQueue] = (0, import_react39.useState)([]);
-  (0, import_react39.useEffect)(() => {
+  let [items, setItems] = (0, import_react37.useState)([]);
+  let [queue, setQueue] = (0, import_react37.useState)([]);
+  (0, import_react37.useEffect)(() => {
     if (queue.length <= 0) {
       return;
     }
@@ -3947,14 +3919,14 @@ var SnackbarProvider = ({
     setItems([]);
     setQueue([]);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(SnackbarContext.Provider, { value: {
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(SnackbarContext.Provider, { value: {
     enqueue,
     dequeue,
     clearAll
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Portal, { element: portalLocation, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Container11, { anchor, children: items.map((_a) => {
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Portal, { element: portalLocation, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Container11, { anchor, children: items.map((_a) => {
       var _b = _a, { id, duration } = _b, rest = __objRest(_b, ["id", "duration"]);
-      return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         SnackbarItem,
         __spreadValues({
           duration: duration || autoHideDuration,
@@ -3969,19 +3941,19 @@ var SnackbarProvider = ({
 
 // src/layout/CenteredWidget/CenteredWidget.tsx
 var import_styled_components62 = __toESM(require("styled-components"));
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var CenteredDiv = (0, import_styled_components62.default)(Box)`
   margin: 0 auto;
   width: 36rem;
 `;
 var CenteredWidget = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Box, { display: "flex", alignItems: "center", justifyItems: "center", height: "100vh", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(CenteredDiv, __spreadProps(__spreadValues({}, rest), { children })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Box, { display: "flex", alignItems: "center", justifyItems: "center", height: "100vh", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(CenteredDiv, __spreadProps(__spreadValues({}, rest), { children })) });
 };
 
 // src/layout/TwoColumns/TwoColumns.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
-var TwoColumns = ({ children, sideNav }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+var import_jsx_runtime80 = require("react/jsx-runtime");
+var TwoColumns = ({ children, sideNav }) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
   Box,
   {
     height: "100%",
@@ -3997,12 +3969,12 @@ var TwoColumns = ({ children, sideNav }) => /* @__PURE__ */ (0, import_jsx_runti
 );
 
 // src/layout/ThreeColumns/ThreeColumns.tsx
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var ThreeColumns = ({
   children,
   sideNav,
   mainNav
-}) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TwoColumns, { sideNav, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TwoColumns, { sideNav, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
   Box,
   {
     height: "100%",
@@ -4018,53 +3990,53 @@ var ThreeColumns = ({
 ) });
 
 // src/navigation/Breadcrumbs/Breadcrumbs.tsx
-var import_react40 = require("react");
-var import_outline15 = require("@heroicons/react/24/outline");
+var import_react38 = require("react");
+var import_outline14 = require("@heroicons/react/24/outline");
 
 // src/navigation/Breadcrumbs/Item.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var Item2 = ({
   item,
   isLastItem = false,
   dividerIcon
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(Box, { display: "inline-flex", alignItems: "center", color: isLastItem ? "inherit" : "mutedForeground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(Box, { display: "inline-flex", alignItems: "center", color: isLastItem ? "inherit" : "mutedForeground", children: [
     item,
-    !isLastItem && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Box, { mx: "2", display: "inline-block", children: dividerIcon })
+    !isLastItem && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Box, { mx: "2", display: "inline-block", children: dividerIcon })
   ] });
 };
 
 // src/navigation/Breadcrumbs/Breadcrumbs.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var Breadcrumbs = ({
   children,
   maxItems = 8,
   itemsBefore = 1,
   itemsAfter = 1,
-  dividerIcon = /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { children: "/" })
+  dividerIcon = /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { children: "/" })
 }) => {
-  let [showAll, setShow] = (0, import_react40.useState)(false);
-  let items = import_react40.Children.toArray(children);
+  let [showAll, setShow] = (0, import_react38.useState)(false);
+  let items = import_react38.Children.toArray(children);
   if (items.length <= maxItems) {
-    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { children: items.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Item2, { item: c, isLastItem: idx === items.length - 1, dividerIcon }, idx)) });
+    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { children: items.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Item2, { item: c, isLastItem: idx === items.length - 1, dividerIcon }, idx)) });
   }
   let beforeItems = items.slice(0, itemsBefore);
   let middleItems = items.slice(itemsBefore, -itemsAfter);
   let afterItems = items.slice(-itemsAfter);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(Box, { display: "flex", alignItems: "center", children: [
-    beforeItems.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Item2, { item: c, dividerIcon }, idx)),
-    showAll ? middleItems.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Item2, { item: c, dividerIcon }, idx)) : /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(Box, { display: "inline-flex", alignItems: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ClickableElement, { onClick: () => setShow(true), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_outline15.EllipsisHorizontalIcon, { height: 16, width: 16 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Box, { display: "inline-block", color: "baseHighlight", mx: "2", children: dividerIcon })
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(Box, { display: "flex", alignItems: "center", children: [
+    beforeItems.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Item2, { item: c, dividerIcon }, idx)),
+    showAll ? middleItems.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Item2, { item: c, dividerIcon }, idx)) : /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(Box, { display: "inline-flex", alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ClickableElement, { onClick: () => setShow(true), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_outline14.EllipsisHorizontalIcon, { height: 16, width: 16 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Box, { display: "inline-block", color: "baseHighlight", mx: "2", children: dividerIcon })
     ] }),
-    afterItems.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Item2, { item: c, isLastItem: idx === afterItems.length - 1, dividerIcon }, idx))
+    afterItems.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Item2, { item: c, isLastItem: idx === afterItems.length - 1, dividerIcon }, idx))
   ] });
 };
 
 // src/navigation/Drawer/Drawer.tsx
-var import_react41 = require("react");
+var import_react39 = require("react");
 var import_styled_components63 = __toESM(require("styled-components"));
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var StyledOpen = (0, import_styled_components63.default)(Open)`
   position: fixed;
   width: 33.333333%;
@@ -4083,21 +4055,21 @@ var Drawer = ({
   direction = "right",
   children
 }) => {
-  let [isOpen, setOpen] = (0, import_react41.useState)(false);
+  let [isOpen, setOpen] = (0, import_react39.useState)(false);
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Backdrop, { config: { duration: 195 }, onClick: () => setOpen(!isOpen), onDestroyed: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(StyledOpen, { inProp: isOpen, direction, "data-testId": "here", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Container12, { onClick: stopPropagation, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Backdrop, { config: { duration: 195 }, onClick: () => setOpen(!isOpen), onDestroyed: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(StyledOpen, { inProp: isOpen, direction, "data-testId": "here", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Container12, { onClick: stopPropagation, children }) }) });
 };
 
 // src/navigation/Stepper/Stepper.tsx
 var import_styled_components64 = __toESM(require("styled-components"));
 
 // src/navigation/Stepper/StepperContext.ts
-var import_react42 = require("react");
-var StepperContext = (0, import_react42.createContext)(void 0);
+var import_react40 = require("react");
+var StepperContext = (0, import_react40.createContext)(void 0);
 var useStepperContext = () => {
-  let context = (0, import_react42.useContext)(StepperContext);
+  let context = (0, import_react40.useContext)(StepperContext);
   if (context === void 0) {
     throw new Error("useStepperContext must be used within a StepperContext provider");
   }
@@ -4105,11 +4077,11 @@ var useStepperContext = () => {
 };
 
 // src/navigation/Stepper/Stepper.tsx
-var import_react43 = require("react");
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_react41 = require("react");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var parseChildren = (children, step) => {
-  return import_react43.Children.toArray(children).map((node, idx) => {
-    if (!(0, import_react43.isValidElement)(node)) {
+  return import_react41.Children.toArray(children).map((node, idx) => {
+    if (!(0, import_react41.isValidElement)(node)) {
       return null;
     }
     let completed = step > idx && "completed";
@@ -4143,22 +4115,22 @@ var Stepper = (_a) => {
   ]);
   let alternativeLabel = rest.hasOwnProperty("alternativeLabel") ? rest.alternativeLabel : false;
   let items = parseChildren(children, step);
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(StepperContext.Provider, { value: {
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(StepperContext.Provider, { value: {
     noOfItems: items.length - 1,
     activeStep: step,
     direction,
     alternativeLabel
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(StyledDiv2, { direction, children: items.map((_a2) => {
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(StyledDiv2, { direction, children: items.map((_a2) => {
     var _b2 = _a2, { node } = _b2, itemRest = __objRest(_b2, ["node"]);
-    return (0, import_react43.cloneElement)(node, __spreadValues({}, itemRest));
+    return (0, import_react41.cloneElement)(node, __spreadValues({}, itemRest));
   }) }) });
 };
 
 // src/navigation/Stepper/StepIcon.tsx
 var import_styled_components65 = __toESM(require("styled-components"));
-var import_outline16 = require("@heroicons/react/24/outline");
-var import_jsx_runtime85 = require("react/jsx-runtime");
-var ErrorComp = (0, import_styled_components65.default)(import_outline16.ExclamationTriangleIcon)`
+var import_outline15 = require("@heroicons/react/24/outline");
+var import_jsx_runtime86 = require("react/jsx-runtime");
+var ErrorComp = (0, import_styled_components65.default)(import_outline15.ExclamationTriangleIcon)`
   width: 24px;
   height: 24px;
   color: ${({ theme: theme2 }) => theme2.colors.destructive};
@@ -4174,7 +4146,7 @@ var DefaultText = import_styled_components65.default.text`
   font-size: ${({ theme: theme2 }) => theme2.fontSizes[0]};
   line-height: ${({ theme: theme2 }) => theme2.lineHeights[0]};
 `;
-var Checkmark = (0, import_styled_components65.default)(import_outline16.CheckCircleIcon)`
+var Checkmark = (0, import_styled_components65.default)(import_outline15.CheckCircleIcon)`
   color: ${({ theme: theme2 }) => theme2.colors.primary};
   width: 30px;
   height: 30px;
@@ -4189,24 +4161,24 @@ var StepIcon = ({
   error
 }) => {
   if (icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_jsx_runtime85.Fragment, { children: icon });
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_jsx_runtime86.Fragment, { children: icon });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ErrorComp, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ErrorComp, {});
   }
   if (state === "active" || state === "default") {
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(DefaultSvg, { fill: "currentColor", state, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("circle", { cx: "50%", cy: "50%", r: "12" }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(InnerCirle, { cx: "50%", cy: "50%", r: "10" }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DefaultText, { x: "50%", y: "65%", textAnchor: "middle", children: number })
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(DefaultSvg, { fill: "currentColor", state, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("circle", { cx: "50%", cy: "50%", r: "12" }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(InnerCirle, { cx: "50%", cy: "50%", r: "10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DefaultText, { x: "50%", y: "65%", textAnchor: "middle", children: number })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Checkmark, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Checkmark, {});
 };
 
 // src/navigation/Stepper/StepLabel.tsx
 var import_styled_components66 = __toESM(require("styled-components"));
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var Line = import_styled_components66.default.div`
   left: calc(-50% + 30px);
   right: calc(50% + 30px);
@@ -4263,30 +4235,30 @@ var StepLabel = ({
 }) => {
   let { direction, alternativeLabel, noOfItems } = useStepperContext();
   if (alternativeLabel) {
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(Label4, { alternativeLabel, children: [
-      idx !== 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(AlternativeLine, { direction }),
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(StepIcon, { number: idx + 1, icon, state, error }),
+    return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(Label4, { alternativeLabel, children: [
+      idx !== 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(AlternativeLine, { direction }),
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(StepIcon, { number: idx + 1, icon, state, error }),
       children
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(Label4, { alternativeLabel: false, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(StepIcon, { number: idx + 1, icon, state, error }),
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Typography, { opacity: state === "default" ? "0.6" : "1", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(Label4, { alternativeLabel: false, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(StepIcon, { number: idx + 1, icon, state, error }),
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Text, { opacity: state === "default" ? "0.6" : "1", children })
     ] }),
-    idx !== noOfItems && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(LineContainer, { direction, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Line, { direction }) })
+    idx !== noOfItems && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(LineContainer, { direction, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Line, { direction }) })
   ] });
 };
 
 // src/navigation/Tabs/Tabs.tsx
-var import_react44 = require("react");
+var import_react42 = require("react");
 
 // src/navigation/Tabs/TabItems.tsx
 var import_styled_components67 = __toESM(require("styled-components"));
-var import_jsx_runtime87 = require("react/jsx-runtime");
-var StyledBtn2 = (0, import_styled_components67.default)(ClickableElement)`
+var import_jsx_runtime88 = require("react/jsx-runtime");
+var StyledBtn = (0, import_styled_components67.default)(ClickableElement)`
   scroll-snap-align: start;
-  border-radius: ${({ theme: theme2 }) => theme2.radii[2]};
+  border-radius: ${({ theme: theme2 }) => theme2.radii[3]};
   margin-right: ${({ theme: theme2 }) => theme2.space[1]};
   &:last-of-type {
     margin-right: 0;
@@ -4295,8 +4267,8 @@ var StyledBtn2 = (0, import_styled_components67.default)(ClickableElement)`
     outline: 0;
   }
 `;
-var TabItem = ({ children, selected, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-  StyledBtn2,
+var TabItem = ({ children, selected, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  StyledBtn,
   {
     px: "3",
     py: "1",
@@ -4308,7 +4280,7 @@ var TabItem = ({ children, selected, onClick }) => /* @__PURE__ */ (0, import_js
     children
   }
 );
-var TabItems = ({ tabs, selected, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Box, { bg: "muted", borderRadius: 4, px: "1", py: "1", display: "inline-flex", border: "muted.1", children: tabs.map(({ tab, key }) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+var TabItems = ({ tabs, selected, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Box, { bg: "muted", borderRadius: 4, p: "3px", display: "inline-flex", border: "muted.1", children: tabs.map(({ tab, key }) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
   TabItem,
   {
     selected: selected === key,
@@ -4319,15 +4291,15 @@ var TabItems = ({ tabs, selected, onChange }) => /* @__PURE__ */ (0, import_jsx_
 )) });
 
 // src/navigation/Tabs/TabPane.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var TabPane = (_a) => {
   var _b = _a, { children, selected } = _b, rest = __objRest(_b, ["children", "selected"]);
-  return selected ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Box, __spreadProps(__spreadValues({ px: "4", py: "5" }, rest), { children })) : null;
+  return selected ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Box, __spreadProps(__spreadValues({ px: "4", py: "5" }, rest), { children })) : null;
 };
 var TabPaneList = ({ tabs, selected }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Box, { children: tabs.map((_a) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Box, { children: tabs.map((_a) => {
     var _b = _a, { key, children } = _b, rest = __objRest(_b, ["key", "children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
       TabPane,
       __spreadProps(__spreadValues({
         selected: selected === key
@@ -4340,10 +4312,10 @@ var TabPaneList = ({ tabs, selected }) => {
 };
 
 // src/navigation/Tabs/Tabs.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var parseChildrenToTabs = (children) => {
-  return import_react44.Children.toArray(children).map((node) => {
-    if (!(0, import_react44.isValidElement)(node)) {
+  return import_react42.Children.toArray(children).map((node) => {
+    if (!(0, import_react42.isValidElement)(node)) {
       return null;
     }
     let key = node.props.value || node.key;
@@ -4356,10 +4328,10 @@ var parseChildrenToTabs = (children) => {
 };
 var Tabs = ({ children: childrenProp, value }) => {
   let tabs = parseChildrenToTabs(childrenProp);
-  let [selected, setSelected] = (0, import_react44.useState)(value || tabs[0].key);
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TabItems, { tabs, selected, onChange: setSelected }),
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TabPaneList, { tabs, selected })
+  let [selected, setSelected] = (0, import_react42.useState)(value || tabs[0].key);
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(TabItems, { tabs, selected, onChange: setSelected }),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(TabPaneList, { tabs, selected })
   ] });
 };
 
@@ -4456,6 +4428,7 @@ __reExport(index_exports, utils_exports, module.exports);
   TableHead,
   TableRow,
   Tabs,
+  Text,
   TextArea,
   ThemeButton,
   ThemeSwitch,
@@ -4463,7 +4436,6 @@ __reExport(index_exports, utils_exports, module.exports);
   Title,
   Tooltip,
   TwoColumns,
-  Typography,
   UnorderedList,
   UploadButton,
   UploadZone,