@aivenio/aquarium 1.2.0 → 1.3.0

package/dist/system.mjs

@@ -148,6 +148,136 @@ var require_tokens = __commonJS({
           },
           typography: {
             sizes: [
+              {
+                name: "large-heading",
+                className: "typography-large-heading",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "32px",
+                  fontWeight: 700,
+                  fontStyle: "normal",
+                  lineHeight: 1.375,
+                  textTransform: "none"
+                },
+                fontPostScriptName: "Inter-Bold"
+              },
+              {
+                name: "heading",
+                className: "typography-heading",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "24px",
+                  fontWeight: 700,
+                  fontStyle: "normal",
+                  lineHeight: 1.375,
+                  textTransform: "none"
+                },
+                fontPostScriptName: "Inter-Bold"
+              },
+              {
+                name: "subheading",
+                className: "typography-subheading",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "20px",
+                  fontWeight: 600,
+                  fontStyle: "normal",
+                  lineHeight: 1.375,
+                  textTransform: "none"
+                },
+                fontPostScriptName: "Inter-Bold"
+              },
+              {
+                name: "large-strong",
+                className: "typography-large-strong",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "20px",
+                  fontWeight: 600,
+                  fontStyle: "normal",
+                  lineHeight: 1.58,
+                  textTransform: "none"
+                },
+                fontPostScriptName: "Inter-SemiBold"
+              },
+              {
+                name: "large",
+                className: "typography-large",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "20px",
+                  fontWeight: 500,
+                  fontStyle: "normal",
+                  lineHeight: 1.58,
+                  textTransform: "none"
+                },
+                fontPostScriptName: "Inter-SemiBold"
+              },
+              {
+                name: "default-strong",
+                className: "typography-default-strong",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "16px",
+                  fontWeight: 600,
+                  fontStyle: "normal",
+                  lineHeight: 1.5,
+                  textTransform: "none"
+                },
+                fontPostScriptName: "Inter-SemiBold"
+              },
+              {
+                name: "default",
+                className: "typography-default",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "16px",
+                  fontWeight: 400,
+                  fontStyle: "normal",
+                  lineHeight: 1.5,
+                  textTransform: "none"
+                },
+                fontPostScriptName: null
+              },
+              {
+                name: "small-strong",
+                className: "typography-small-strong",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "14px",
+                  fontWeight: 600,
+                  fontStyle: "normal",
+                  lineHeight: 1.42,
+                  textTransform: "none"
+                },
+                fontPostScriptName: "Inter-SemiBold"
+              },
+              {
+                name: "small",
+                className: "typography-small",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "14px",
+                  fontWeight: 400,
+                  fontStyle: "normal",
+                  lineHeight: 1.42,
+                  textTransform: "none"
+                },
+                fontPostScriptName: null
+              },
+              {
+                name: "caption",
+                className: "typography-caption",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "12px",
+                  fontWeight: 400,
+                  fontStyle: "normal",
+                  lineHeight: 1.26,
+                  textTransform: "none"
+                },
+                fontPostScriptName: null
+              },
               {
                 name: "caption-small",
                 className: "typography-caption-small",
@@ -157,7 +287,6 @@ var require_tokens = __commonJS({
                   fontWeight: 400,
                   fontStyle: "normal",
                   lineHeight: 1.2,
-                  letterSpacing: 0,
                   textTransform: "none"
                 },
                 fontPostScriptName: null
@@ -579,6 +708,136 @@ var require_tokens = __commonJS({
           },
           typography: {
             sizes: [
+              {
+                name: "large-heading",
+                className: "typography-large-heading",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "32px",
+                  fontWeight: 700,
+                  fontStyle: "normal",
+                  lineHeight: 1.375,
+                  textTransform: "none"
+                },
+                fontPostScriptName: "Inter-Bold"
+              },
+              {
+                name: "heading",
+                className: "typography-heading",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "24px",
+                  fontWeight: 700,
+                  fontStyle: "normal",
+                  lineHeight: 1.375,
+                  textTransform: "none"
+                },
+                fontPostScriptName: "Inter-Bold"
+              },
+              {
+                name: "subheading",
+                className: "typography-subheading",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "20px",
+                  fontWeight: 600,
+                  fontStyle: "normal",
+                  lineHeight: 1.375,
+                  textTransform: "none"
+                },
+                fontPostScriptName: "Inter-Bold"
+              },
+              {
+                name: "large-strong",
+                className: "typography-large-strong",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "20px",
+                  fontWeight: 600,
+                  fontStyle: "normal",
+                  lineHeight: 1.58,
+                  textTransform: "none"
+                },
+                fontPostScriptName: "Inter-SemiBold"
+              },
+              {
+                name: "large",
+                className: "typography-large",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "20px",
+                  fontWeight: 500,
+                  fontStyle: "normal",
+                  lineHeight: 1.58,
+                  textTransform: "none"
+                },
+                fontPostScriptName: "Inter-SemiBold"
+              },
+              {
+                name: "default-strong",
+                className: "typography-default-strong",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "16px",
+                  fontWeight: 600,
+                  fontStyle: "normal",
+                  lineHeight: 1.5,
+                  textTransform: "none"
+                },
+                fontPostScriptName: "Inter-SemiBold"
+              },
+              {
+                name: "default",
+                className: "typography-default",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "16px",
+                  fontWeight: 400,
+                  fontStyle: "normal",
+                  lineHeight: 1.5,
+                  textTransform: "none"
+                },
+                fontPostScriptName: null
+              },
+              {
+                name: "small-strong",
+                className: "typography-small-strong",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "14px",
+                  fontWeight: 600,
+                  fontStyle: "normal",
+                  lineHeight: 1.42,
+                  textTransform: "none"
+                },
+                fontPostScriptName: "Inter-SemiBold"
+              },
+              {
+                name: "small",
+                className: "typography-small",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "14px",
+                  fontWeight: 400,
+                  fontStyle: "normal",
+                  lineHeight: 1.42,
+                  textTransform: "none"
+                },
+                fontPostScriptName: null
+              },
+              {
+                name: "caption",
+                className: "typography-caption",
+                style: {
+                  fontFamily: "Inter",
+                  fontSize: "12px",
+                  fontWeight: 400,
+                  fontStyle: "normal",
+                  lineHeight: 1.26,
+                  textTransform: "none"
+                },
+                fontPostScriptName: null
+              },
               {
                 name: "caption-small",
                 className: "typography-caption-small",
@@ -1037,12 +1296,12 @@ var require_confirm = __commonJS({
   }
 });
 
-// src/icons/warningSign.js
-var require_warningSign = __commonJS({
-  "src/icons/warningSign.js"(exports) {
+// src/icons/cross.js
+var require_cross = __commonJS({
+  "src/icons/cross.js"(exports) {
     "use strict";
     var data = {
-      "body": '<path fill="currentColor" fill-rule="evenodd" d="m19.86 17.52.01-.01-9-16-.01.01A.982.982 0 0010 1c-.37 0-.69.21-.86.52l-.01-.01-9 16 .01.01c-.08.14-.14.3-.14.48 0 .55.45 1 1 1h18c.55 0 1-.45 1-1 0-.18-.06-.34-.14-.48ZM11 17H9v-2h2v2Zm0-3H9V6h2v8Z" clip-rule="evenodd"/>',
+      "body": '<path fill="currentColor" fill-rule="evenodd" d="m11.41 10 4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10Z" clip-rule="evenodd"/>',
       "left": 0,
       "top": 0,
       "width": 20,
@@ -1085,12 +1344,12 @@ var require_infoSign = __commonJS({
   }
 });
 
-// src/icons/cross.js
-var require_cross = __commonJS({
-  "src/icons/cross.js"(exports) {
+// src/icons/warningSign.js
+var require_warningSign = __commonJS({
+  "src/icons/warningSign.js"(exports) {
     "use strict";
     var data = {
-      "body": '<path fill="currentColor" fill-rule="evenodd" d="m11.41 10 4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10Z" clip-rule="evenodd"/>',
+      "body": '<path fill="currentColor" fill-rule="evenodd" d="m19.86 17.52.01-.01-9-16-.01.01A.982.982 0 0010 1c-.37 0-.69.21-.86.52l-.01-.01-9 16 .01.01c-.08.14-.14.3-.14.48 0 .55.45 1 1 1h18c.55 0 1-.45 1-1 0-.18-.06-.34-.14-.48ZM11 17H9v-2h2v2Zm0-3H9V6h2v8Z" clip-rule="evenodd"/>',
       "left": 0,
       "top": 0,
       "width": 20,
@@ -1229,12 +1488,12 @@ var require_caretDown = __commonJS({
   }
 });
 
-// src/icons/chevronForward.js
-var require_chevronForward = __commonJS({
-  "src/icons/chevronForward.js"(exports) {
+// src/icons/chevronBackward.js
+var require_chevronBackward = __commonJS({
+  "src/icons/chevronBackward.js"(exports) {
     "use strict";
     var data = {
-      "body": '<path fill="currentColor" fill-rule="evenodd" d="M13 3c-.55 0-1 .45-1 1v4.59l-5.29-5.3a1.003 1.003 0 00-1.42 1.42l5.3 5.29-5.29 5.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l5.29-5.3V16c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1Z" clip-rule="evenodd"/>',
+      "body": '<path fill="currentColor" fill-rule="evenodd" d="m8.41 10 5.29-5.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L7 8.59V4c0-.55-.45-1-1-1s-1 .45-1 1v12c0 .55.45 1 1 1s1-.45 1-1v-4.59l5.29 5.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L8.41 10Z" clip-rule="evenodd"/>',
       "left": 0,
       "top": 0,
       "width": 20,
@@ -1245,12 +1504,12 @@ var require_chevronForward = __commonJS({
   }
 });
 
-// src/icons/chevronBackward.js
-var require_chevronBackward = __commonJS({
-  "src/icons/chevronBackward.js"(exports) {
+// src/icons/chevronForward.js
+var require_chevronForward = __commonJS({
+  "src/icons/chevronForward.js"(exports) {
     "use strict";
     var data = {
-      "body": '<path fill="currentColor" fill-rule="evenodd" d="m8.41 10 5.29-5.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L7 8.59V4c0-.55-.45-1-1-1s-1 .45-1 1v12c0 .55.45 1 1 1s1-.45 1-1v-4.59l5.29 5.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L8.41 10Z" clip-rule="evenodd"/>',
+      "body": '<path fill="currentColor" fill-rule="evenodd" d="M13 3c-.55 0-1 .45-1 1v4.59l-5.29-5.3a1.003 1.003 0 00-1.42 1.42l5.3 5.29-5.29 5.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l5.29-5.3V16c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1Z" clip-rule="evenodd"/>',
       "left": 0,
       "top": 0,
       "width": 20,
@@ -1362,7 +1621,7 @@ __export(components_exports, {
   SelectItem: () => SelectItem,
   Skeleton: () => Skeleton,
   StatusChip: () => StatusChip,
-  Switch: () => Switch,
+  Switch: () => Switch2,
   SwitchGroup: () => SwitchGroup,
   TabContainer: () => TabContainer,
   TabItem: () => TabItem,
@@ -1393,6 +1652,13 @@ __export(components_exports, {
 // src/common/Select/Select.tsx
 import React2 from "react";
 
+// src/components/Icon/Icon.tsx
+import React from "react";
+import {
+  Icon as IconifyIconComponent,
+  InlineIcon as IconifyInlineIconComponent
+} from "@iconify/react";
+
 // src/utils/tailwind.ts
 import originalClassNames from "classnames";
 function cleanClassNames(classNames4) {
@@ -1419,18 +1685,7 @@ var classNames = (...args) => {
   return cleanClassNames(result);
 };
 
-// src/common/Select/Select.tsx
-var import_chevronDown = __toESM(require_chevronDown());
-var import_chevronUp = __toESM(require_chevronUp());
-var import_search = __toESM(require_search());
-var import_tick = __toESM(require_tick());
-
 // src/components/Icon/Icon.tsx
-import React from "react";
-import {
-  Icon as IconifyIconComponent,
-  InlineIcon as IconifyInlineIconComponent
-} from "@iconify/react";
 var Icon = React.forwardRef((_a, ref) => {
   var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
   const classes = classNames(className, color && `text-${color}`);
@@ -1451,6 +1706,10 @@ var InlineIcon = React.forwardRef((_a, ref) => {
 });
 
 // src/common/Select/Select.tsx
+var import_chevronDown = __toESM(require_chevronDown());
+var import_chevronUp = __toESM(require_chevronUp());
+var import_search = __toESM(require_search());
+var import_tick = __toESM(require_tick());
 function getOptionLabelBuiltin(option) {
   var _a;
   if (option === null) {
@@ -1471,7 +1730,7 @@ var InputContainer = React2.forwardRef(
       ref,
       className: classNames(
         className,
-        "relative rounded-sm typography-body-default-medium w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-70",
+        "relative rounded-sm typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-70",
         {
           "border px-3 py-[6px]": variant !== "readOnly",
           "cursor-default": variant === "readOnly",
@@ -1493,7 +1752,7 @@ var Input = React2.forwardRef((_a, ref) => {
     type: "text",
     className: classNames(
       className,
-      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-body-small disabled:cursor-not-allowed disabled:bg-grey-5 placeholder:text-grey-40",
+      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small disabled:cursor-not-allowed disabled:bg-grey-5 placeholder:text-grey-40",
       {
         "text-grey-70": !props.disabled,
         "text-grey-30": props.disabled,
@@ -1538,7 +1797,7 @@ var Group = React2.forwardRef((_a, ref) => {
     ref,
     className: classNames(
       className,
-      "flex items-center gap-x-3 p-3 text-grey-40 uppercase cursor-default typography-caption-default mt-4 first:mt-0 font-medium",
+      "flex items-center gap-x-3 p-3 text-grey-40 uppercase cursor-default typography-caption mt-4 first:mt-0",
       {
         "text-grey-20": props.disabled
       }
@@ -1609,113 +1868,29 @@ var Select = {
   Toggle
 };
 
-// src/components/Badge/Badge.tsx
-import React4 from "react";
-import omit from "lodash/omit";
-
-// src/components/Skeleton/Skeleton.tsx
-import React3 from "react";
-import isNumber from "lodash/isNumber";
-var Skeleton = ({
-  width,
-  height,
-  display = "block",
-  className,
-  animate = true,
-  rounded = false
-}) => {
-  const styles = {
-    width: isNumber(width) ? `${width}px` : width,
-    height: isNumber(height) ? `${height}px` : height
-  };
-  return /* @__PURE__ */ React3.createElement("div", {
-    style: styles,
-    className: classNames(
-      tw("bg-grey-5", {
-        "rounded-full": rounded,
-        "block": display === "block",
-        "inline-block": display === "inline-block",
-        "animate-pulse": animate
-      }),
-      className
-    )
-  });
-};
-
-// src/components/Badge/Badge.tsx
-var isChipBadgeProps = (props) => "dense" in props;
-var createBadge = (type, displayName) => {
-  const Component = (props) => {
-    var _b;
-    const _a = props, { kind = "filled", value, textClassname } = _a, rest = __objRest(_a, ["kind", "value", "textClassname"]);
-    const valueStr = value.toString();
-    const dense = isChipBadgeProps(props) ? (_b = props.dense) != null ? _b : false : false;
-    return /* @__PURE__ */ React4.createElement("span", __spreadProps(__spreadValues({}, omit(rest, "dense")), {
-      className: tw("inline-block text-center", {
-        "rounded-full": type === "default" || type === "chip",
-        "rounded": type === "tab",
-        "border border-current": kind === "outlined",
-        "bg-current": kind === "filled" && type !== "chip",
-        "bg-white": type === "chip",
-        "typography-caption-small leading-none py-1 px-2": !dense,
-        "text-[8px]": dense,
-        "px-1": dense && valueStr.length > 1,
-        "px-[4px]": dense && valueStr.length === 1
-      })
-    }), /* @__PURE__ */ React4.createElement("span", {
-      className: classNames(
-        textClassname,
-        tw("inline-block", {
-          "text-white": !textClassname && kind === "filled",
-          "m-[1px]": kind === "filled"
-        })
-      )
-    }, valueStr));
-  };
-  Component.displayName = displayName;
-  Component.Skeleton = () => /* @__PURE__ */ React4.createElement(Skeleton, {
-    height: 16,
-    width: 16,
-    display: "inline-block",
-    className: tw(type === "tab" ? "rounded" : "rounded-full")
-  });
-  return Component;
-};
-var Badge = createBadge("default", "Badge");
-var TabBadge = createBadge("tab", "TabBadge");
-var ChipBadge = createBadge("chip", "ChipBadge");
-
 // src/components/Alert/Alert.tsx
-import React12 from "react";
+import React10 from "react";
+import omit from "lodash/omit";
 
 // src/common/Alert/Alert.tsx
-import React11 from "react";
+import React9 from "react";
 
 // src/components/Button/Button.tsx
-import React9 from "react";
+import React7 from "react";
 
 // src/components/Flexbox/Flexbox.tsx
-import React7 from "react";
+import React5 from "react";
 
 // src/components/Tailwindify/Tailwindify.tsx
-import React6 from "react";
+import React4 from "react";
 import get2 from "lodash/get";
 import isUndefined4 from "lodash/isUndefined";
 
 // src/utils/useStyle.ts
 import { useContext } from "react";
 import get from "lodash/get";
-import isUndefined3 from "lodash/isUndefined";
 import isPlainObject2 from "lodash/isPlainObject";
-
-// src/components/Context/Context.tsx
-import React5 from "react";
-import { ModalProvider } from "@react-aria/overlays";
-
-// src/utils/breakpoints.ts
-import isUndefined from "lodash/isUndefined";
-import orderBy from "lodash/orderBy";
-import isPlainObject from "lodash/isPlainObject";
+import isUndefined3 from "lodash/isUndefined";
 
 // tailwind.theme.json
 var tailwind_theme_default = {
@@ -2240,7 +2415,14 @@ var tailwind_theme_default = {
   }
 };
 
+// src/components/Context/Context.tsx
+import React3 from "react";
+import { ModalProvider } from "@react-aria/overlays";
+
 // src/utils/breakpoints.ts
+import isPlainObject from "lodash/isPlainObject";
+import isUndefined from "lodash/isUndefined";
+import orderBy from "lodash/orderBy";
 var { screens: allBreakpoints } = tailwind_theme_default;
 var SCREEN_TO_PX_MAPPING = getPxMapping(allBreakpoints);
 var BREAKPOINT_PRIORITY = orderBy(
@@ -2285,9 +2467,9 @@ function selectBreakpointValue(value, matches) {
 }
 
 // src/utils/useWindowSize.ts
-import { useState, useEffect } from "react";
-import isUndefined2 from "lodash/isUndefined";
+import { useEffect, useState } from "react";
 import debounce from "lodash/debounce";
+import isUndefined2 from "lodash/isUndefined";
 function useWindowSize() {
   const getWindowSize = () => {
     if (isUndefined2(globalThis.window)) {
@@ -2315,18 +2497,18 @@ function useWindowSize() {
 // src/components/Context/Context.tsx
 var Context = ({ children }) => {
   const windowSize = useWindowSize();
-  const [breakpointMatches, setBreakpointMatches] = React5.useState(getMatches(windowSize));
-  React5.useEffect(() => {
+  const [breakpointMatches, setBreakpointMatches] = React3.useState(getMatches(windowSize));
+  React3.useEffect(() => {
     setBreakpointMatches(getMatches(windowSize));
   }, [windowSize]);
-  return /* @__PURE__ */ React5.createElement(DesignSystemContext.Provider, {
+  return /* @__PURE__ */ React3.createElement(DesignSystemContext.Provider, {
     value: { breakpointMatches }
-  }, /* @__PURE__ */ React5.createElement(ModalProvider, null, children));
+  }, /* @__PURE__ */ React3.createElement(ModalProvider, null, children));
 };
 var context = {
   breakpointMatches: getMatches(void 0)
 };
-var DesignSystemContext = React5.createContext(context);
+var DesignSystemContext = React3.createContext(context);
 
 // src/utils/useStyle.ts
 var THEME_MAPPING = {
@@ -2450,8 +2632,8 @@ function Tailwindify(Component) {
     const componentProps = __spreadProps(__spreadValues({}, otherProps), {
       style: finalStyle
     });
-    const childrenWithProps = React6.Children.map(children, (child, index) => {
-      if (!React6.isValidElement(child)) {
+    const childrenWithProps = React4.Children.map(children, (child, index) => {
+      if (!React4.isValidElement(child)) {
         return child;
       }
       const isLastChild = index === children.length - 1;
@@ -2472,9 +2654,9 @@ function Tailwindify(Component) {
       }
       const childStyle = get2(child, ["props", "style"], {});
       const newProps = __spreadProps(__spreadValues({}, childProps), { style: __spreadValues(__spreadValues({}, childStyle), additionalStyle) });
-      return React6.cloneElement(child, newProps);
+      return React4.cloneElement(child, newProps);
     });
-    return /* @__PURE__ */ React6.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ React4.createElement(Component, __spreadValues({
       className,
       children: childrenWithProps
     }, componentProps));
@@ -2510,7 +2692,7 @@ var Flexbox = Tailwindify(
       rowGap
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React7.createElement(HtmlElement, {
+    return /* @__PURE__ */ React5.createElement(HtmlElement, {
       style: __spreadValues(__spreadValues({}, hookStyle), style),
       className
     }, children);
@@ -2518,9 +2700,9 @@ var Flexbox = Tailwindify(
 );
 
 // src/components/Tooltip/Tooltip.tsx
-import React8 from "react";
+import React6 from "react";
+import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
 import { useTooltip, useTooltipTrigger } from "@react-aria/tooltip";
-import { useOverlayPosition, OverlayContainer } from "@react-aria/overlays";
 import { mergeProps } from "@react-aria/utils";
 
 // src/components/Tooltip/useTooltipTriggerState.ts
@@ -2644,8 +2826,8 @@ function useTooltipTriggerState(props = {}) {
 var Tooltip = (_a) => {
   var _b = _a, { inline = true, delay = 200 } = _b, props = __objRest(_b, ["inline", "delay"]);
   const { placement: _placement = "top", content, disabled: isDisabled, shouldFlip = true } = props;
-  const triggerRef = React8.useRef(null);
-  const overlayRef = React8.useRef(null);
+  const triggerRef = React6.useRef(null);
+  const overlayRef = React6.useRef(null);
   const state = useTooltipTriggerState(__spreadValues({ isDisabled, delay }, props));
   const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, triggerRef);
   const { overlayProps, arrowProps, placement } = useOverlayPosition({
@@ -2681,7 +2863,7 @@ var Tooltip = (_a) => {
     (_a2 = props.onPointerUp) == null ? void 0 : _a2.call(props, e);
     (_b2 = triggerProps.onPointerUp) == null ? void 0 : _b2.call(triggerProps, e);
   };
-  return /* @__PURE__ */ React8.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React6.createElement("div", __spreadProps(__spreadValues({
     className: tw(`${inline ? "inline-block" : "block"}`)
   }, triggerProps), {
     onClick: handleClick,
@@ -2690,25 +2872,25 @@ var Tooltip = (_a) => {
     onPointerDown: handlePointerDown,
     onPointerUp: handlePointerUp,
     ref: triggerRef
-  }), props.children, state.isOpen && /* @__PURE__ */ React8.createElement(TooltipWrapper, __spreadValues({
+  }), props.children, state.isOpen && /* @__PURE__ */ React6.createElement(TooltipWrapper, __spreadValues({
     ref: overlayRef,
     state,
     placement,
     arrowProps
   }, mergeProps(tooltipProps, overlayProps)), content));
 };
-var TooltipWrapper = React8.forwardRef(
+var TooltipWrapper = React6.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { state, placement, arrowProps } = _b, props = __objRest(_b, ["state", "placement", "arrowProps"]);
     var _a2;
-    const ref = React8.useRef(null);
-    React8.useImperativeHandle(forwardedRef, () => ref.current);
+    const ref = React6.useRef(null);
+    React6.useImperativeHandle(forwardedRef, () => ref.current);
     const { tooltipProps } = useTooltip(props, state);
     const arrowStyle = getArrowStyle(ref.current, placement, (_a2 = arrowProps.style) != null ? _a2 : {});
-    return /* @__PURE__ */ React8.createElement(OverlayContainer, null, /* @__PURE__ */ React8.createElement("div", __spreadValues({
+    return /* @__PURE__ */ React6.createElement(OverlayContainer, null, /* @__PURE__ */ React6.createElement("div", __spreadValues({
       ref,
-      className: tw("p-3 rounded-sm typography-caption-default max-w-[320px] bg-grey-90 text-white")
-    }, mergeProps(props, tooltipProps)), props.children, /* @__PURE__ */ React8.createElement(Arrow, __spreadProps(__spreadValues({}, arrowProps), {
+      className: tw("p-3 rounded-sm typography-caption max-w-[320px] bg-grey-90 text-white")
+    }, mergeProps(props, tooltipProps)), props.children, /* @__PURE__ */ React6.createElement(Arrow, __spreadProps(__spreadValues({}, arrowProps), {
       style: arrowStyle
     }))));
   }
@@ -2745,7 +2927,7 @@ var getArrowStyle = (element, position, { left, top }) => {
   return { left, top };
 };
 var Arrow = (props) => {
-  return /* @__PURE__ */ React8.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React6.createElement("div", __spreadValues({
     className: tw("absolute w-3 h-3 bg-grey-90 rotate-45")
   }, props));
 };
@@ -2773,7 +2955,7 @@ var LoadingSpinner = ({
   size = "20px",
   kind = "primary"
 }) => {
-  return /* @__PURE__ */ React9.createElement(InlineIcon, {
+  return /* @__PURE__ */ React7.createElement(InlineIcon, {
     icon: import_loading.default,
     width: size,
     height: size,
@@ -2782,7 +2964,7 @@ var LoadingSpinner = ({
   });
 };
 var asButton = (Component, isDropdownButton) => {
-  return React9.forwardRef(
+  return React7.forwardRef(
     (_a, ref) => {
       var _b = _a, {
         kind = "primary",
@@ -2811,7 +2993,7 @@ var asButton = (Component, isDropdownButton) => {
         "aria-label",
         "children"
       ]);
-      const hasChildren = React9.Children.count(children) > 0;
+      const hasChildren = React7.Children.count(children) > 0;
       const isIconOnlyButton = !hasChildren && !!icon;
       const isGhost = !isIconOnlyButton && (kind === "ghost" || kind === "secondary-ghost");
       const isButton = !isIconOnlyButton && (kind === "primary" || kind === "secondary");
@@ -2832,31 +3014,31 @@ var asButton = (Component, isDropdownButton) => {
       }
       const buttonContent = () => {
         if (!!isDropdownButton && (kind === "primary" || kind === "secondary")) {
-          return /* @__PURE__ */ React9.createElement(Flexbox, {
+          return /* @__PURE__ */ React7.createElement(Flexbox, {
             gap: "4",
             alignItems: "center",
             justifyContent: "center"
-          }, hasChildren && /* @__PURE__ */ React9.createElement("div", null, children), /* @__PURE__ */ React9.createElement(InlineIcon, {
+          }, hasChildren && /* @__PURE__ */ React7.createElement("div", null, children), /* @__PURE__ */ React7.createElement(InlineIcon, {
             icon: import_chevronDown2.default,
             width: iconSize,
             height: iconSize
           }));
         } else if (icon) {
-          return /* @__PURE__ */ React9.createElement(Flexbox, {
+          return /* @__PURE__ */ React7.createElement(Flexbox, {
             gap: "3",
             alignItems: "center",
             justifyContent: "center",
             direction: iconPlacement === "right" ? "row-reverse" : "row"
-          }, /* @__PURE__ */ React9.createElement(InlineIcon, {
+          }, /* @__PURE__ */ React7.createElement(InlineIcon, {
             icon,
             width: iconSize,
             height: iconSize
-          }), hasChildren && /* @__PURE__ */ React9.createElement("div", null, children));
+          }), hasChildren && /* @__PURE__ */ React7.createElement("div", null, children));
         } else {
           return children;
         }
       };
-      const buttonComponent = /* @__PURE__ */ React9.createElement(Component, __spreadProps(__spreadValues({
+      const buttonComponent = /* @__PURE__ */ React7.createElement(Component, __spreadProps(__spreadValues({
         ref
       }, props), {
         className: classNames(
@@ -2864,8 +3046,8 @@ var asButton = (Component, isDropdownButton) => {
           !isIconOnlyButton && COLOR_CLASSNAMES[kind],
           tw("inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative", {
             "text-grey-70 p-2 active:text-grey-70 active:bg-transparent hover:text-grey-90 hover:bg-grey-0 focus-visible:text-grey-90 focus-visible:bg-grey-0 disabled:text-grey-20 disabled:bg-transparent": isIconOnlyButton,
-            "typography-body-default": !dense && !isIconOnlyButton,
-            "typography-body-small": dense && !isIconOnlyButton,
+            "typography-default": !dense && !isIconOnlyButton,
+            "typography-small": dense && !isIconOnlyButton,
             "py-3 px-4": !dense && isButton,
             "py-2 px-3": dense && isButton,
             "py-3": !dense && isGhost,
@@ -2876,16 +3058,16 @@ var asButton = (Component, isDropdownButton) => {
         ),
         "aria-label": isIconOnlyButton ? ariaLabel != null ? ariaLabel : tooltip : ariaLabel,
         disabled: disabled || loading2
-      }), loading2 && !isGhost ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("div", {
+      }), loading2 && !isGhost ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", {
         className: tw("absolute left-1/2 top-0 bottom-0 flex"),
         style: { transform: "translate(-50%)" }
-      }, /* @__PURE__ */ React9.createElement(LoadingSpinner, {
+      }, /* @__PURE__ */ React7.createElement(LoadingSpinner, {
         size: iconSize,
         kind: kind === "primary" ? "primary" : "secondary"
-      })), /* @__PURE__ */ React9.createElement("div", {
+      })), /* @__PURE__ */ React7.createElement("div", {
         className: tw({ invisible: loading2 })
       }, buttonContent())) : buttonContent());
-      return tooltip ? /* @__PURE__ */ React9.createElement(Tooltip, {
+      return tooltip ? /* @__PURE__ */ React7.createElement(Tooltip, {
         content: tooltip,
         placement: tooltipPlacement
       }, buttonComponent) : buttonComponent;
@@ -2894,31 +3076,31 @@ var asButton = (Component, isDropdownButton) => {
 };
 var Button = asButton("button");
 Button.displayName = "Button";
-var PrimaryButton = React9.forwardRef((props, ref) => /* @__PURE__ */ React9.createElement(Button, __spreadProps(__spreadValues({
+var PrimaryButton = React7.forwardRef((props, ref) => /* @__PURE__ */ React7.createElement(Button, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "primary"
 })));
 PrimaryButton.displayName = "PrimaryButton";
-var SecondaryButton = React9.forwardRef((props, ref) => /* @__PURE__ */ React9.createElement(Button, __spreadProps(__spreadValues({
+var SecondaryButton = React7.forwardRef((props, ref) => /* @__PURE__ */ React7.createElement(Button, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "secondary"
 })));
 SecondaryButton.displayName = "SecondaryButton";
-var GhostButton = React9.forwardRef((props, ref) => /* @__PURE__ */ React9.createElement(Button, __spreadProps(__spreadValues({
+var GhostButton = React7.forwardRef((props, ref) => /* @__PURE__ */ React7.createElement(Button, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "ghost"
 })));
 GhostButton.displayName = "GhostButton";
-var SecondaryGhostButton = React9.forwardRef((props, ref) => /* @__PURE__ */ React9.createElement(Button, __spreadProps(__spreadValues({
+var SecondaryGhostButton = React7.forwardRef((props, ref) => /* @__PURE__ */ React7.createElement(Button, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "secondary-ghost"
 })));
 SecondaryGhostButton.displayName = "SecondaryGhostButton";
-var IconButton = React9.forwardRef((props, ref) => /* @__PURE__ */ React9.createElement(Button, __spreadProps(__spreadValues({
+var IconButton = React7.forwardRef((props, ref) => /* @__PURE__ */ React7.createElement(Button, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "ghost",
@@ -2927,7 +3109,7 @@ var IconButton = React9.forwardRef((props, ref) => /* @__PURE__ */ React9.create
 })));
 IconButton.displayName = "IconButton";
 var ExternalLinkButton = asButton("a");
-var IconExternalLinkButton = React9.forwardRef((props, ref) => /* @__PURE__ */ React9.createElement(ExternalLinkButton, __spreadProps(__spreadValues({
+var IconExternalLinkButton = React7.forwardRef((props, ref) => /* @__PURE__ */ React7.createElement(ExternalLinkButton, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "ghost",
@@ -2936,13 +3118,13 @@ var IconExternalLinkButton = React9.forwardRef((props, ref) => /* @__PURE__ */ R
 })));
 IconExternalLinkButton.displayName = "IconExternalLink";
 var DropdownButton = asButton("button", true);
-var PrimaryDropdownButton = React9.forwardRef((props, ref) => /* @__PURE__ */ React9.createElement(DropdownButton, __spreadProps(__spreadValues({
+var PrimaryDropdownButton = React7.forwardRef((props, ref) => /* @__PURE__ */ React7.createElement(DropdownButton, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "primary"
 })));
 PrimaryDropdownButton.displayName = "PrimaryDropdownButton";
-var SecondaryDropdownButton = React9.forwardRef((props, ref) => /* @__PURE__ */ React9.createElement(DropdownButton, __spreadProps(__spreadValues({
+var SecondaryDropdownButton = React7.forwardRef((props, ref) => /* @__PURE__ */ React7.createElement(DropdownButton, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "secondary"
@@ -2951,7 +3133,7 @@ SecondaryDropdownButton.displayName = "SecondaryDropdownButton";
 
 // src/common/Typography/Typography.tsx
 var import_resolveTheme = __toESM(require_resolveTheme());
-import React10 from "react";
+import React8 from "react";
 import isUndefined5 from "lodash/isUndefined";
 var typographies = import_resolveTheme.theme.typography.sizes.reduce(
   (acc, { name, className }) => __spreadProps(__spreadValues({}, acc), { [name]: className }),
@@ -2960,7 +3142,7 @@ var typographies = import_resolveTheme.theme.typography.sizes.reduce(
 var Typography = (_a) => {
   var _b = _a, {
     children,
-    variant = "body-default",
+    variant = "default",
     color,
     htmlTag = "div",
     className,
@@ -2976,7 +3158,7 @@ var Typography = (_a) => {
   const HtmlElement = htmlTag;
   const resolvedColorName = isUndefined5(color) || color === "current" ? "grey-80" : color;
   const style = useStyle({ fontWeight });
-  return /* @__PURE__ */ React10.createElement(HtmlElement, __spreadValues({
+  return /* @__PURE__ */ React8.createElement(HtmlElement, __spreadValues({
     className: classNames(typographies[variant], `text-${resolvedColorName}`, className),
     style
   }, rest), children);
@@ -2984,10 +3166,10 @@ var Typography = (_a) => {
 
 // src/common/Alert/Alert.tsx
 var import_confirm = __toESM(require_confirm());
-var import_warningSign = __toESM(require_warningSign());
+var import_cross = __toESM(require_cross());
 var import_error = __toESM(require_error());
 var import_infoSign = __toESM(require_infoSign());
-var import_cross = __toESM(require_cross());
+var import_warningSign = __toESM(require_warningSign());
 var alertTypes = {
   information: {
     icon: import_infoSign.default,
@@ -3018,7 +3200,7 @@ var Alert = (_a) => {
     "type",
     "dense"
   ]);
-  return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React9.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("rounded grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-2", {
         "bg-error-5": type === "error",
@@ -3034,32 +3216,31 @@ var Alert = (_a) => {
 };
 Alert.Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React11.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
-    variant: "body-default",
+  return /* @__PURE__ */ React9.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+    variant: "default-strong",
     color: "grey-80",
-    fontWeight: 500,
     className: classNames(tw("col-start-2"), className)
   }), children);
 };
 Alert.Description = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React11.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
-    variant: "body-small",
+  return /* @__PURE__ */ React9.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+    variant: "small",
     color: "grey-60",
     className: classNames(tw("col-start-2"), className)
   }), children);
 };
 Alert.Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React9.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4 col-start-2"), className)
   }), children);
 };
 Alert.Icon = (_a) => {
   var _b = _a, { type, dense } = _b, rest = __objRest(_b, ["type", "dense"]);
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     className: tw("h-[20px] col-start-1 row-start-1", { "self-start": !dense })
-  }, /* @__PURE__ */ React11.createElement(Icon, __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ React9.createElement(Icon, __spreadProps(__spreadValues({}, rest), {
     icon: alertTypes[type].icon,
     color: alertTypes[type].color,
     fontSize: 20
@@ -3067,9 +3248,9 @@ Alert.Icon = (_a) => {
 };
 Alert.Dismiss = (_a) => {
   var _b = _a, { type } = _b, rest = __objRest(_b, ["type"]);
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     className: tw("h-[20px] col-start-3 row-start-1")
-  }, /* @__PURE__ */ React11.createElement(IconButton, __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ React9.createElement(IconButton, __spreadProps(__spreadValues({}, rest), {
     UNSAFE_className: tw("-m-2"),
     tooltip: "Dismiss",
     icon: import_cross.default
@@ -3077,38 +3258,35 @@ Alert.Dismiss = (_a) => {
 };
 
 // src/components/Alert/Alert.tsx
-import omit2 from "lodash/omit";
-var Alert2 = ({ description, type, title, action, onDismiss }) => /* @__PURE__ */ React12.createElement(Alert, {
+var Alert2 = ({ description, type, title, action, onDismiss, children }) => /* @__PURE__ */ React10.createElement(Alert, {
   type,
   dense: Boolean(title)
-}, /* @__PURE__ */ React12.createElement(Alert.Icon, {
+}, /* @__PURE__ */ React10.createElement(Alert.Icon, {
   type,
   dense: Boolean(title)
-}), title && /* @__PURE__ */ React12.createElement(Alert.Title, null, title), /* @__PURE__ */ React12.createElement(Alert.Description, null, description), action && /* @__PURE__ */ React12.createElement(Alert.Actions, null, /* @__PURE__ */ React12.createElement(GhostButton, __spreadValues({
+}), title && /* @__PURE__ */ React10.createElement(Alert.Title, null, title), /* @__PURE__ */ React10.createElement(Alert.Description, null, children || description), action && /* @__PURE__ */ React10.createElement(Alert.Actions, null, /* @__PURE__ */ React10.createElement(GhostButton, __spreadValues({
   dense: true
-}, omit2(action, "text")), action.text)), onDismiss && /* @__PURE__ */ React12.createElement(Alert.Dismiss, {
+}, omit(action, "text")), action.text)), onDismiss && /* @__PURE__ */ React10.createElement(Alert.Dismiss, {
   onClick: onDismiss
 }));
 
 // src/components/Avatar/Avatar.tsx
-import React16 from "react";
+import React15 from "react";
 
 // src/components/Box/Box.tsx
-import React15 from "react";
+import React13 from "react";
+import isUndefined6 from "lodash/isUndefined";
 
 // src/components/Element/Element.tsx
-import React13 from "react";
+import React11 from "react";
 var Element = (_a) => {
   var _b = _a, { component } = _b, rest = __objRest(_b, ["component"]);
   const Component = component || "div";
-  return React13.createElement(Component, rest);
+  return React11.createElement(Component, rest);
 };
 
-// src/components/Box/Box.tsx
-import isUndefined6 from "lodash/isUndefined";
-
 // src/utils/createComponent.tsx
-import React14 from "react";
+import React12 from "react";
 var hasClassName = (val) => {
   return val.className !== void 0;
 };
@@ -3118,7 +3296,7 @@ var createComponent = (Component, freezedProps, defaultProps, displayName) => {
     const combinedProps = __spreadValues(__spreadValues(__spreadValues({}, defaultProps), freezedProps), props);
     const propsClassName = hasClassName(props) ? props.className : "";
     const className = defaultClassName || propsClassName ? classNames(defaultClassName, propsClassName) : void 0;
-    return /* @__PURE__ */ React14.createElement(Component, __spreadProps(__spreadValues({}, combinedProps), {
+    return /* @__PURE__ */ React12.createElement(Component, __spreadProps(__spreadValues({}, combinedProps), {
       className
     }));
   };
@@ -3130,7 +3308,7 @@ var createSimpleComponent = (Component, defaultProps, displayName) => {
   const Curried = (props) => {
     const propsClassName = hasClassName(props) ? props.className : "";
     const className = defaultClassName || propsClassName ? classNames(defaultClassName, propsClassName) : void 0;
-    return /* @__PURE__ */ React14.createElement(Component, __spreadProps(__spreadValues(__spreadValues({}, defaultProps), props), {
+    return /* @__PURE__ */ React12.createElement(Component, __spreadProps(__spreadValues(__spreadValues({}, defaultProps), props), {
       className
     }));
   };
@@ -3257,7 +3435,7 @@ var Box = (_a) => {
     columnGap: colGap,
     rowGap
   });
-  return /* @__PURE__ */ React15.createElement(Element, __spreadValues({
+  return /* @__PURE__ */ React13.createElement(Element, __spreadValues({
     style: __spreadValues(__spreadValues({}, styles), style)
   }, rest));
 };
@@ -3267,29 +3445,104 @@ var BorderBox = createSimpleComponent(
   "BorderBox"
 );
 
+// src/components/Skeleton/Skeleton.tsx
+import React14 from "react";
+import isNumber from "lodash/isNumber";
+var Skeleton = ({
+  width,
+  height,
+  display = "block",
+  className,
+  animate = true,
+  rounded = false
+}) => {
+  const styles = {
+    width: isNumber(width) ? `${width}px` : width,
+    height: isNumber(height) ? `${height}px` : height
+  };
+  return /* @__PURE__ */ React14.createElement("div", {
+    style: styles,
+    className: classNames(
+      tw("bg-grey-5", {
+        "rounded-full": rounded,
+        "block": display === "block",
+        "inline-block": display === "inline-block",
+        "animate-pulse": animate
+      }),
+      className
+    )
+  });
+};
+
 // src/components/Avatar/Avatar.tsx
-var AvatarStack = ({ images }) => /* @__PURE__ */ React16.createElement(Box, {
+var AvatarStack = ({ images }) => /* @__PURE__ */ React15.createElement(Box, {
   display: "flex",
   className: tw("[&>*:not(:first-child)]:-ml-3")
-}, images.map((image) => image ? /* @__PURE__ */ React16.createElement(Avatar, {
+}, images.map((image) => image ? /* @__PURE__ */ React15.createElement(Avatar, {
   key: image,
   image
-}) : /* @__PURE__ */ React16.createElement(Avatar.Skeleton, {
+}) : /* @__PURE__ */ React15.createElement(Avatar.Skeleton, {
   key: image
 })));
-var Avatar = ({ image }) => /* @__PURE__ */ React16.createElement("img", {
+var Avatar = ({ image }) => /* @__PURE__ */ React15.createElement("img", {
   src: image,
   className: classNames(tw("w-[32px] h-[32px]"))
 });
-var AvatarSkeleton = () => /* @__PURE__ */ React16.createElement(Skeleton, {
+var AvatarSkeleton = () => /* @__PURE__ */ React15.createElement(Skeleton, {
   height: 32,
   width: 32,
   className: tw("rounded-full")
 });
 Avatar.Skeleton = AvatarSkeleton;
 
+// src/components/Badge/Badge.tsx
+import React16 from "react";
+import omit2 from "lodash/omit";
+var isChipBadgeProps = (props) => "dense" in props;
+var createBadge = (type, displayName) => {
+  const Component = (props) => {
+    var _b;
+    const _a = props, { kind = "filled", value, textClassname } = _a, rest = __objRest(_a, ["kind", "value", "textClassname"]);
+    const valueStr = value.toString();
+    const dense = isChipBadgeProps(props) ? (_b = props.dense) != null ? _b : false : false;
+    return /* @__PURE__ */ React16.createElement("span", __spreadProps(__spreadValues({}, omit2(rest, "dense")), {
+      className: tw("inline-block text-center", {
+        "rounded-full": type === "default" || type === "chip",
+        "rounded": type === "tab",
+        "border border-current": kind === "outlined",
+        "bg-current": kind === "filled" && type !== "chip",
+        "bg-white": type === "chip",
+        "typography-caption-small leading-none py-1 px-2": !dense,
+        "text-[8px]": dense,
+        "px-1": dense && valueStr.length > 1,
+        "px-[4px]": dense && valueStr.length === 1
+      })
+    }), /* @__PURE__ */ React16.createElement("span", {
+      className: classNames(
+        textClassname,
+        tw("inline-block", {
+          "text-white": !textClassname && kind === "filled",
+          "m-[1px]": kind === "filled"
+        })
+      )
+    }, valueStr));
+  };
+  Component.displayName = displayName;
+  Component.Skeleton = () => /* @__PURE__ */ React16.createElement(Skeleton, {
+    height: 16,
+    width: 16,
+    display: "inline-block",
+    className: tw(type === "tab" ? "rounded" : "rounded-full")
+  });
+  return Component;
+};
+var Badge = createBadge("default", "Badge");
+var TabBadge = createBadge("tab", "TabBadge");
+var ChipBadge = createBadge("chip", "ChipBadge");
+
 // src/components/Banner/Banner.tsx
 import React18 from "react";
+import omit3 from "lodash/omit";
 
 // src/common/Banner/Banner.tsx
 import React17 from "react";
@@ -3323,8 +3576,7 @@ var Banner = (_a) => {
 Banner.Title = (_a) => {
   var _b = _a, { children, className, layout, titleVariant = "primary" } = _b, rest = __objRest(_b, ["children", "className", "layout", "titleVariant"]);
   return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
-    variant: "heading-large",
-    fontWeight: 600,
+    variant: "subheading",
     color: titleVariant === "secondary" ? "primary-80" : "grey-100",
     className: classNames(
       className,
@@ -3337,7 +3589,7 @@ Banner.Title = (_a) => {
 Banner.Description = (_a) => {
   var _b = _a, { flexGrow, children, className } = _b, rest = __objRest(_b, ["flexGrow", "children", "className"]);
   return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
-    variant: "body-default",
+    variant: "default",
     color: "grey-90",
     className: classNames(className, tw({ "flex-grow": flexGrow }))
   }), children);
@@ -3381,14 +3633,13 @@ Banner.DismissContainer = (_a) => {
 
 // src/components/Banner/Banner.tsx
 var import_cross2 = __toESM(require_cross());
-import omit3 from "lodash/omit";
 var BannerImageSkeleton = () => /* @__PURE__ */ React18.createElement(Skeleton, {
   width: 225,
   className: tw("h-full")
 });
 var createBanner = (displayName, opts = {}) => {
   const BannerComponent = (props) => {
-    const { title, description, layout: layoutProp, action, onDismiss, variant = "default" } = props;
+    const { title, description, layout: layoutProp, action, onDismiss, variant = "default", children } = props;
     const layout = opts.isOneLineBanner ? "horizontal" : layoutProp || "vertical";
     const isDismissable = onDismiss !== void 0;
     return /* @__PURE__ */ React18.createElement(Banner, {
@@ -3401,7 +3652,7 @@ var createBanner = (displayName, opts = {}) => {
       titleVariant: opts.isOneLineBanner ? "secondary" : "primary"
     }, title), /* @__PURE__ */ React18.createElement(Banner.Description, {
       flexGrow: isDismissable ? false : true
-    }, description), action && /* @__PURE__ */ React18.createElement(Banner.Actions, {
+    }, children || description), action && /* @__PURE__ */ React18.createElement(Banner.Actions, {
       layout
     }, /* @__PURE__ */ React18.createElement(GhostButton, __spreadValues({
       dense: true
@@ -3430,8 +3681,8 @@ var OneLineBanner = OneLineBannerBase;
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 import React19 from "react";
-var import_slash = __toESM(require_slash());
 import classNames2 from "classnames";
+var import_slash = __toESM(require_slash());
 var Breadcrumbs = (props) => {
   const { children, className } = props;
   const crumbs = React19.Children.toArray(children).filter(
@@ -3441,7 +3692,7 @@ var Breadcrumbs = (props) => {
     className,
     "aria-label": "Breadcrumbs"
   }, /* @__PURE__ */ React19.createElement("ol", {
-    className: tw("flex flex-row flex-nowrap items-center typography-caption-default")
+    className: tw("flex flex-row flex-nowrap items-center typography-caption")
   }, crumbs.map((crumb, index) => {
     const isLast = index === crumbs.length - 1;
     return /* @__PURE__ */ React19.createElement("li", {
@@ -3485,6 +3736,7 @@ Breadcrumbs.Crumb = Crumb;
 
 // src/components/Card/Card.tsx
 import React23 from "react";
+import omit4 from "lodash/omit";
 
 // src/components/Chip/Chip.tsx
 import React21 from "react";
@@ -3499,8 +3751,8 @@ var Container = React20.forwardRef(
       ref,
       className: classNames(
         tw("inline-flex items-center rounded-sm transition whitespace-nowrap", {
-          "typography-body-small py-2 px-3 gap-x-3": !dense,
-          "typography-caption-default py-1 px-2 gap-x-2": dense
+          "typography-small py-2 px-3 gap-x-3": !dense,
+          "typography-caption py-1 px-2 gap-x-2": dense
         }),
         className
       )
@@ -3511,15 +3763,13 @@ var Chip = {
   Container
 };
 
-// src/components/Chip/Chip.tsx
-var import_cross3 = __toESM(require_cross());
-var import_lock = __toESM(require_lock());
-
 // types/utils.ts
 import { isValidElement } from "react";
 var isComponentType = (c, type) => isValidElement(c) && c.type === type;
 
 // src/components/Chip/Chip.tsx
+var import_cross3 = __toESM(require_cross());
+var import_lock = __toESM(require_lock());
 var getStatusClassNames = (status = "neutral") => {
   switch (status) {
     case "info":
@@ -3604,67 +3854,120 @@ var ChipContainer = ({ dense, children }) => /* @__PURE__ */ React21.createEleme
 // src/components/Typography/Typography.tsx
 import React22 from "react";
 var Typography2 = (props) => /* @__PURE__ */ React22.createElement(Typography, __spreadValues({}, props));
-Typography2.Heading = (_a) => {
+Typography2.LargeHeading = (_a) => {
   var _b = _a, { htmlTag = "h1" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
-    variant: "heading-xl"
+    variant: "large-heading"
+  }));
+};
+Typography2.Heading = (_a) => {
+  var _b = _a, { htmlTag = "h1", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "heading"
   }));
 };
 Typography2.Subheading = (_a) => {
-  var _b = _a, { htmlTag = "h2" } = _b, props = __objRest(_b, ["htmlTag"]);
+  var _b = _a, { htmlTag = "h2", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
   return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
-    variant: "heading-large"
+    variant: "subheading"
   }));
 };
-Typography2.LargeText = (_a) => {
-  var _b = _a, { htmlTag = "p" } = _b, props = __objRest(_b, ["htmlTag"]);
+Typography2.LargeStrong = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
-    variant: "body-large"
+    variant: "large-strong"
   }));
 };
-Typography2.MediumText = (_a) => {
-  var _b = _a, { htmlTag = "p" } = _b, props = __objRest(_b, ["htmlTag"]);
+Typography2.Large = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
-    variant: "body-default-medium"
+    variant: "large"
   }));
 };
-Typography2.Text = (_a) => {
-  var _b = _a, { htmlTag = "p" } = _b, props = __objRest(_b, ["htmlTag"]);
+Typography2.DefaultStrong = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
-    variant: "body-default"
+    variant: "default-strong"
   }));
 };
-Typography2.Paragraph = Typography2.Text;
-Typography2.P = Typography2.Text;
-Typography2.SmallText = (_a) => {
-  var _b = _a, { htmlTag = "p" } = _b, props = __objRest(_b, ["htmlTag"]);
+Typography2.Default = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
-    variant: "body-small"
+    variant: "default"
   }));
 };
-Typography2.SmallTextBold = (_a) => {
-  var _b = _a, { htmlTag = "p" } = _b, props = __objRest(_b, ["htmlTag"]);
+Typography2.Paragraph = (_a) => {
+  var _b = _a, { htmlTag = "p", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
+  return /* @__PURE__ */ React22.createElement(Typography2.Default, __spreadProps(__spreadValues({}, props), {
+    htmlTag
+  }));
+};
+Typography2.P = Typography2.Paragraph;
+Typography2.SmallStrong = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "small-strong"
+  }));
+};
+Typography2.Small = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
-    variant: "body-small-medium"
+    variant: "small"
   }));
 };
 Typography2.Caption = (_a) => {
-  var _b = _a, { htmlTag = "p" } = _b, props = __objRest(_b, ["htmlTag"]);
+  var _b = _a, { htmlTag = "div", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "caption"
+  }));
+};
+Typography2.LargeText = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "large-strong"
+  }));
+};
+Typography2.MediumText = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "default-strong"
+  }));
+};
+Typography2.Text = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "default"
+  }));
+};
+Typography2.SmallText = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "small"
+  }));
+};
+Typography2.SmallTextBold = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ React22.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
-    variant: "caption-default"
+    variant: "small-strong"
   }));
 };
 
 // src/components/Card/Card.tsx
-import omit4 from "lodash/omit";
 var Card = ({
   title,
   description,
@@ -3676,11 +3979,14 @@ var Card = ({
   action,
   link,
   onClick,
-  disabled
+  disabled,
+  fullWidth,
+  children
 }) => /* @__PURE__ */ React23.createElement(CardContainer, {
   onClick,
   color,
-  disabled
+  disabled,
+  fullWidth
 }, chips.length > 0 && /* @__PURE__ */ React23.createElement(ChipContainer, {
   dense: true
 }, chips.map((chip) => /* @__PURE__ */ React23.createElement(Chip2, {
@@ -3692,13 +3998,21 @@ var Card = ({
   image,
   imageAlt,
   fullSize: chips.length === 0
-}), /* @__PURE__ */ React23.createElement(CardContent, null, /* @__PURE__ */ React23.createElement(CardTitle, null, title), /* @__PURE__ */ React23.createElement(CardBody, null, description)), (action || link) && /* @__PURE__ */ React23.createElement(CardActions, null, action && /* @__PURE__ */ React23.createElement(SecondaryButton, __spreadValues({
+}), /* @__PURE__ */ React23.createElement(CardContent, null, /* @__PURE__ */ React23.createElement(CardTitle, null, title), /* @__PURE__ */ React23.createElement(CardBody, null, children || description)), (action || link) && /* @__PURE__ */ React23.createElement(CardActions, null, action && /* @__PURE__ */ React23.createElement(SecondaryButton, __spreadValues({
   dense: true
 }, omit4(action, "text")), action.text), link && /* @__PURE__ */ React23.createElement(ExternalLinkButton, __spreadValues({
   dense: true,
   kind: "ghost"
 }, omit4(link, "text")), link.text)));
-var CardSkeleton = ({ chips = true, icons = false, image = !icons, actions = true }) => /* @__PURE__ */ React23.createElement(CardContainer, null, chips && /* @__PURE__ */ React23.createElement(ChipContainer, {
+var CardSkeleton = ({
+  chips = true,
+  icons = false,
+  image = !icons,
+  actions = true,
+  fullWidth = false
+}) => /* @__PURE__ */ React23.createElement(CardContainer, {
+  fullWidth
+}, chips && /* @__PURE__ */ React23.createElement(ChipContainer, {
   dense: true
 }, Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ React23.createElement(Chip2.Skeleton, {
   key: idx
@@ -3725,13 +4039,16 @@ var CardContainer = ({
   children,
   onClick,
   color,
-  disabled
+  disabled,
+  fullWidth = false
 }) => /* @__PURE__ */ React23.createElement(Box, {
   borderWidth: 1,
   borderRadius: 2,
   className: classNames(
-    tw("w-[280px] border-grey-5 focus:border-info-70", {
-      "active:bg-grey-5 cursor-pointer hover:border-grey-50": Boolean(onClick && !disabled),
+    tw("border-grey-5", {
+      "w-[280px]": !fullWidth,
+      "w-full min-w-[280px]": fullWidth,
+      "active:bg-grey-5 cursor-pointer hover:border-grey-50 focus:border-info-70": Boolean(onClick && !disabled),
       "bg-grey-0 cursor-not-allowed focus:border-transparent": Boolean(disabled)
     })
   ),
@@ -3771,12 +4088,11 @@ var CardContent = ({ children }) => /* @__PURE__ */ React23.createElement(Box, {
   gap: "4"
 }, children);
 var CardBody = ({ children }) => /* @__PURE__ */ React23.createElement(Typography2, {
-  variant: "caption-default",
+  variant: "caption",
   color: "grey-70"
 }, children);
 var CardTitle = ({ children }) => /* @__PURE__ */ React23.createElement(Typography2, {
-  variant: "body-default-medium",
-  fontWeight: 500
+  variant: "default-strong"
 }, children);
 var CardActions = ({ children }) => /* @__PURE__ */ React23.createElement(Box, {
   paddingTop: "3",
@@ -3786,7 +4102,7 @@ var CardActions = ({ children }) => /* @__PURE__ */ React23.createElement(Box, {
 }, children);
 
 // src/components/Carousel/Carousel.tsx
-import React24, { useRef as useRef2, useLayoutEffect, useState as useState2, useEffect as useEffect3 } from "react";
+import React24, { useEffect as useEffect3, useLayoutEffect, useRef as useRef2, useState as useState2 } from "react";
 var import_chevronLeft = __toESM(require_chevronLeft());
 var import_chevronRight = __toESM(require_chevronRight());
 var Carousel = ({
@@ -3918,55 +4234,45 @@ var ControlLabel = (_a) => {
     ),
     style: __spreadValues({}, style)
   }, rest), children, label && /* @__PURE__ */ React25.createElement("span", {
-    className: tw("typography-body-small self-center")
+    className: tw("typography-small self-center")
   }, label), caption && /* @__PURE__ */ React25.createElement(Typography2, {
     className: tw("col-start-2"),
-    variant: "caption-default",
+    variant: "caption",
     color: disabled ? "grey-40" : "grey-50"
   }, caption));
 };
 
 // src/common/Checkbox/Checkbox.tsx
 import React26 from "react";
-var import_tick2 = __toESM(require_tick());
 var import_minus = __toESM(require_minus());
+var import_tick2 = __toESM(require_tick());
 var Checkbox = React26.forwardRef(
   (_a, ref) => {
-    var _b = _a, { id, children, name, checked, disabled = false, readOnly = false, indeterminate = false } = _b, props = __objRest(_b, ["id", "children", "name", "checked", "disabled", "readOnly", "indeterminate"]);
+    var _b = _a, { id, children, name, disabled = false, readOnly = false, indeterminate = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly", "indeterminate"]);
     return /* @__PURE__ */ React26.createElement("span", {
-      className: classNames(
-        tw("inline-flex justify-center items-center relative self-center", {
-          "text-grey-30": disabled,
-          "text-grey-100 cursor-pointer": !disabled
-        })
-      )
+      className: tw("inline-flex justify-center items-center self-center")
     }, /* @__PURE__ */ React26.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "checkbox",
       name
     }, props), {
-      checked,
-      className: classNames(
-        tw("appearance-none rounded-sm border"),
-        {
-          "cursor-pointer": !disabled,
-          "border-grey-20 hover:border-grey-50 focus:border-info-70": !disabled && !checked,
-          "border-navyBlue-100 bg-navyBlue-100": !disabled && checked,
-          "border-grey-5 cursor-not-allowed": disabled,
-          "bg-grey-0": disabled && checked
-        },
-        props.className
-      ),
-      style: __spreadValues({ width: 16, height: 16 }, props.style),
+      className: tw("opacity-0 peer w-0 h-0"),
       readOnly,
       disabled
-    })), (checked || indeterminate) && /* @__PURE__ */ React26.createElement(Icon, {
-      className: tw("absolute top-2 left-2 w-3 h-3 pointer-events-none [&>path]:stroke-2", {
-        "text-white [&>path]:stroke-white": !disabled,
-        "text-grey-30 [&>path]:stroke-grey-30": disabled
-      }),
-      icon: indeterminate ? import_minus.default : import_tick2.default
+    })), /* @__PURE__ */ React26.createElement(Icon, {
+      icon: indeterminate ? import_minus.default : import_tick2.default,
+      className: classNames(
+        tw(
+          "rounded-sm border peer w-5 h-5 p-[3px] pointer-events-none cursor-pointer peer-disabled:cursor-not-allowed",
+          "border-grey-20 peer-focus:border-info-70 peer-disabled:border-grey-5 peer-checked:border-navyBlue-100",
+          "text-transparent peer-checked:[&>path]:stroke-2 peer-checked:text-white peer-checked:[&>path]:stroke-white"
+        ),
+        {
+          "peer-checked:bg-navyBlue-100 peer-hover:border-grey-50": !disabled,
+          "peer-checked:bg-gray-0 peer-checked:text-grey-30 peer-checked:[&>path]:stroke-grey-30": disabled
+        }
+      )
     }));
   }
 );
@@ -3974,35 +4280,10 @@ var Checkbox = React26.forwardRef(
 // src/components/Checkbox/Checkbox.tsx
 var Checkbox2 = React27.forwardRef(
   (_a, ref) => {
-    var _b = _a, {
-      id,
-      name,
-      caption,
-      checked: _checked,
-      defaultChecked,
-      onChange,
-      readOnly = false,
-      disabled = false,
-      children,
-      "aria-label": ariaLabel
-    } = _b, props = __objRest(_b, [
-      "id",
-      "name",
-      "caption",
-      "checked",
-      "defaultChecked",
-      "onChange",
-      "readOnly",
-      "disabled",
-      "children",
-      "aria-label"
-    ]);
+    var _b = _a, { id, name, caption, readOnly = false, disabled = false, children, "aria-label": ariaLabel } = _b, props = __objRest(_b, ["id", "name", "caption", "readOnly", "disabled", "children", "aria-label"]);
     var _a2;
-    const [checked, setChecked] = React27.useState((_a2 = _checked != null ? _checked : defaultChecked) != null ? _a2 : false);
-    if (_checked !== void 0 && checked !== _checked) {
-      setChecked(_checked);
-    }
-    return !readOnly || checked ? /* @__PURE__ */ React27.createElement(ControlLabel, {
+    const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
+    return !readOnly || isChecked ? /* @__PURE__ */ React27.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -4015,13 +4296,8 @@ var Checkbox2 = React27.forwardRef(
       ref,
       name
     }, props), {
-      checked,
       readOnly,
-      disabled,
-      onChange: (e) => {
-        setChecked(e.target.checked);
-        onChange == null ? void 0 : onChange(e);
-      }
+      disabled
     }))) : null;
   }
 );
@@ -4040,14 +4316,95 @@ Checkbox2.Skeleton = CheckboxSkeleton;
 import React34, { useState as useState3 } from "react";
 import uniqueId from "lodash/uniqueId";
 
+// src/common/InputGroup/InputGroup.tsx
+import React29 from "react";
+
+// src/components/Grid/Grid.tsx
+import React28 from "react";
+var Grid = Tailwindify(
+  ({
+    htmlTag = "div",
+    className,
+    style,
+    children,
+    display = "grid",
+    justifyContent,
+    alignContent,
+    alignItems,
+    justifyItems,
+    placeContent,
+    placeItems,
+    cols = "12",
+    rows,
+    autoFlow,
+    autoCols,
+    autoRows,
+    gap,
+    colGap,
+    rowGap,
+    colSpan,
+    colStart,
+    colEnd,
+    rowSpan,
+    rowStart,
+    rowEnd
+  }) => {
+    const hookStyle = useStyle({
+      display,
+      justifyContent,
+      alignContent,
+      alignItems,
+      justifyItems,
+      placeContent,
+      placeItems,
+      gridTemplateColumns: cols,
+      gridTemplateRows: rows,
+      gridAutoFlow: autoFlow,
+      gridAutoColumns: autoCols,
+      gridAutoRows: autoRows,
+      gap,
+      columnGap: colGap,
+      rowGap,
+      gridColumn: colSpan,
+      gridColumnStart: colStart,
+      gridColumnEnd: colEnd,
+      gridRow: rowSpan,
+      gridRowStart: rowStart,
+      gridRowEnd: rowEnd
+    });
+    const HtmlElement = htmlTag;
+    return /* @__PURE__ */ React28.createElement(HtmlElement, {
+      style: __spreadValues(__spreadValues({}, hookStyle), style),
+      className
+    }, children);
+  }
+);
+
+// src/common/InputGroup/InputGroup.tsx
+var gridColumnStyles = {
+  "1": "grid-cols-1",
+  "2": "grid-cols-2",
+  "3": "grid-cols-3",
+  "auto": "auto-cols-fr"
+};
+var InputGroup = (_a) => {
+  var _b = _a, { cols = "1", children } = _b, rest = __objRest(_b, ["cols", "children"]);
+  return /* @__PURE__ */ React29.createElement(Grid, __spreadProps(__spreadValues({}, rest), {
+    display: "inline-grid",
+    colGap: "l4",
+    rowGap: "3",
+    cols: cols !== "auto" ? cols : void 0,
+    className: gridColumnStyles[cols]
+  }), children);
+};
+
 // src/utils/form/Label/Label.tsx
-import React31 from "react";
-var import_questionMark = __toESM(require_questionMark());
+import React33 from "react";
 
 // src/utils/form/FormControl/FormControl.tsx
-import React28 from "react";
+import React30 from "react";
 var FormControl = ({ className, inline, children }) => {
-  return /* @__PURE__ */ React28.createElement(Flexbox, {
+  return /* @__PURE__ */ React30.createElement(Flexbox, {
     direction: "column",
     display: inline ? "inline-flex" : "flex",
     className
@@ -4055,23 +4412,23 @@ var FormControl = ({ className, inline, children }) => {
 };
 
 // src/utils/form/HelperText/HelperText.tsx
-import React30 from "react";
+import React32 from "react";
+import classNames3 from "classnames";
 import isNumber3 from "lodash/isNumber";
 
 // src/utils/form/CharCounter/CharCounter.tsx
-import React29 from "react";
+import React31 from "react";
 var CharCounter = ({ dense = true, length, maxLength, valid = true }) => {
-  return /* @__PURE__ */ React29.createElement("span", {
+  return /* @__PURE__ */ React31.createElement("span", {
     className: tw(
       `whitespace-nowrap`,
       valid ? "text-grey-50" : "text-error-70",
-      dense ? "typography-caption-default" : "typography-body-small"
+      dense ? "typography-caption" : "typography-small"
     )
   }, `${length} / ${maxLength}`);
 };
 
 // src/utils/form/HelperText/HelperText.tsx
-import classNames3 from "classnames";
 var HelperText = ({
   messageId,
   error: error2 = false,
@@ -4084,39 +4441,40 @@ var HelperText = ({
   const hasMaxLength = isNumber3(maxLength) && maxLength > 0;
   const showMessage = hasError || hasMaxLength;
   if (!showMessage) {
-    return reserveSpaceForError ? /* @__PURE__ */ React30.createElement("p", {
-      className: tw("block mt-1 mb-3 typography-caption-default")
+    return reserveSpaceForError ? /* @__PURE__ */ React32.createElement("p", {
+      className: tw("block mt-1 mb-3 typography-caption")
     }, "\xA0") : null;
   }
-  return /* @__PURE__ */ React30.createElement(Grid, {
+  return /* @__PURE__ */ React32.createElement(Grid, {
     cols: "1",
     rows: "1",
     colGap: "3",
     alignItems: "start",
     autoCols: "min",
     className: tw("mt-1 mb-3")
-  }, /* @__PURE__ */ React30.createElement(GridItem, {
+  }, /* @__PURE__ */ React32.createElement(GridItem, {
     colStart: "1",
     colEnd: "2"
-  }, hasError && /* @__PURE__ */ React30.createElement("p", {
+  }, hasError && /* @__PURE__ */ React32.createElement("p", {
     id: messageId,
-    className: tw("text-error-50 block typography-caption-default")
-  }, helperText)), /* @__PURE__ */ React30.createElement(GridItem, {
+    className: tw("text-error-50 block typography-caption")
+  }, helperText)), /* @__PURE__ */ React32.createElement(GridItem, {
     colStart: "2",
     colEnd: "3",
     display: "flex"
-  }, isNumber3(length) && hasMaxLength && /* @__PURE__ */ React30.createElement(CharCounter, {
+  }, isNumber3(length) && hasMaxLength && /* @__PURE__ */ React32.createElement(CharCounter, {
     length,
     maxLength,
     valid: !error2
   })));
 };
-var Skeleton2 = ({ className, children }) => /* @__PURE__ */ React30.createElement("div", {
+var Skeleton2 = ({ className, children }) => /* @__PURE__ */ React32.createElement("div", {
   className: classNames3(className, "h-[25px]")
 }, children);
 HelperText.Skeleton = Skeleton2;
 
 // src/utils/form/Label/Label.tsx
+var import_questionMark = __toESM(require_questionMark());
 var LabelText = ({
   variant = "default",
   labelText,
@@ -4124,35 +4482,35 @@ var LabelText = ({
   helpTooltip,
   helpTooltipPlacement
 }) => {
-  return /* @__PURE__ */ React31.createElement("span", {
-    className: tw("inline-block mb-2 font-medium typography-body-small", {
+  return /* @__PURE__ */ React33.createElement("span", {
+    className: tw("inline-block mb-2 typography-small-strong", {
       "text-grey-60": variant === "default",
       "text-error-50": variant === "error",
       "text-grey-40": variant === "disabled"
     })
-  }, labelText, required && /* @__PURE__ */ React31.createElement("span", {
+  }, labelText, required && /* @__PURE__ */ React33.createElement("span", {
     className: tw("text-error-50")
-  }, "*"), helpTooltip && /* @__PURE__ */ React31.createElement(Tooltip, {
+  }, "*"), helpTooltip && /* @__PURE__ */ React33.createElement(Tooltip, {
     content: helpTooltip,
     placement: helpTooltipPlacement
-  }, /* @__PURE__ */ React31.createElement("span", {
+  }, /* @__PURE__ */ React33.createElement("span", {
     className: tw("text-grey-30 flex items-center cursor-pointer ml-2")
-  }, /* @__PURE__ */ React31.createElement(InlineIcon, {
+  }, /* @__PURE__ */ React33.createElement(InlineIcon, {
     icon: import_questionMark.default,
     "data-testid": "icon-info"
   }))));
 };
 var Label = (props) => {
   const _a = props, { id, htmlFor, labelText, labelProps: _b = {} } = _a, labelProps = __objRest(_b, []), { "data-testid": dataTestid, children } = _a;
-  return /* @__PURE__ */ React31.createElement("label", __spreadValues({
+  return /* @__PURE__ */ React33.createElement("label", __spreadValues({
     id,
     className: tw("w-full"),
     "data-testid": dataTestid,
     htmlFor
-  }, labelProps), labelText && /* @__PURE__ */ React31.createElement(LabelText, __spreadValues({}, props)), children);
+  }, labelProps), labelText && /* @__PURE__ */ React33.createElement(LabelText, __spreadValues({}, props)), children);
 };
 var LabelSkeleton = () => {
-  return /* @__PURE__ */ React31.createElement(Skeleton, {
+  return /* @__PURE__ */ React33.createElement(Skeleton, {
     height: 20,
     width: 100,
     className: tw("mb-[7px]")
@@ -4185,15 +4543,15 @@ var LabelControl = (_a) => {
   ]);
   const legacyError = error2 !== void 0 && valid === false;
   const variant = !valid || legacyError ? "error" : disabled ? "disabled" : "default";
-  return /* @__PURE__ */ React31.createElement(FormControl, null, !fieldset && /* @__PURE__ */ React31.createElement(Label, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React33.createElement(FormControl, null, !fieldset && /* @__PURE__ */ React33.createElement(Label, __spreadProps(__spreadValues({}, rest), {
     variant
-  }), children), fieldset && /* @__PURE__ */ React31.createElement("fieldset", {
+  }), children), fieldset && /* @__PURE__ */ React33.createElement("fieldset", {
     id: rest.id
-  }, /* @__PURE__ */ React31.createElement("legend", {
+  }, /* @__PURE__ */ React33.createElement("legend", {
     className: tw("w-full mb-2")
-  }, /* @__PURE__ */ React31.createElement(LabelText, __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ React33.createElement(LabelText, __spreadProps(__spreadValues({}, rest), {
     variant
-  }))), children), /* @__PURE__ */ React31.createElement(HelperText, {
+  }))), children), /* @__PURE__ */ React33.createElement(HelperText, {
     messageId,
     error: !valid,
     helperText,
@@ -4202,7 +4560,7 @@ var LabelControl = (_a) => {
     reserveSpaceForError
   }));
 };
-var LabelControlSkeleton = ({ children }) => /* @__PURE__ */ React31.createElement("div", null, /* @__PURE__ */ React31.createElement(Label.Skeleton, null), children, /* @__PURE__ */ React31.createElement(HelperText.Skeleton, null));
+var LabelControlSkeleton = ({ children }) => /* @__PURE__ */ React33.createElement("div", null, /* @__PURE__ */ React33.createElement(Label.Skeleton, null), children, /* @__PURE__ */ React33.createElement(HelperText.Skeleton, null));
 LabelControl.Skeleton = LabelControlSkeleton;
 var getLabelControlProps = (_a) => {
   var _b = _a, {
@@ -4236,88 +4594,6 @@ var getLabelControlProps = (_a) => {
   };
 };
 
-// src/common/InputGroup/InputGroup.tsx
-import React33 from "react";
-
-// src/components/Grid/Grid.tsx
-import React32 from "react";
-var Grid = Tailwindify(
-  ({
-    htmlTag = "div",
-    className,
-    style,
-    children,
-    display = "grid",
-    justifyContent,
-    alignContent,
-    alignItems,
-    justifyItems,
-    placeContent,
-    placeItems,
-    cols = "12",
-    rows,
-    autoFlow,
-    autoCols,
-    autoRows,
-    gap,
-    colGap,
-    rowGap,
-    colSpan,
-    colStart,
-    colEnd,
-    rowSpan,
-    rowStart,
-    rowEnd
-  }) => {
-    const hookStyle = useStyle({
-      display,
-      justifyContent,
-      alignContent,
-      alignItems,
-      justifyItems,
-      placeContent,
-      placeItems,
-      gridTemplateColumns: cols,
-      gridTemplateRows: rows,
-      gridAutoFlow: autoFlow,
-      gridAutoColumns: autoCols,
-      gridAutoRows: autoRows,
-      gap,
-      columnGap: colGap,
-      rowGap,
-      gridColumn: colSpan,
-      gridColumnStart: colStart,
-      gridColumnEnd: colEnd,
-      gridRow: rowSpan,
-      gridRowStart: rowStart,
-      gridRowEnd: rowEnd
-    });
-    const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React32.createElement(HtmlElement, {
-      style: __spreadValues(__spreadValues({}, hookStyle), style),
-      className
-    }, children);
-  }
-);
-
-// src/common/InputGroup/InputGroup.tsx
-var gridColumnStyles = {
-  "1": "grid-cols-1",
-  "2": "grid-cols-2",
-  "3": "grid-cols-3",
-  "auto": "auto-cols-fr"
-};
-var InputGroup = (_a) => {
-  var _b = _a, { cols = "1", children } = _b, rest = __objRest(_b, ["cols", "children"]);
-  return /* @__PURE__ */ React33.createElement(Grid, __spreadProps(__spreadValues({}, rest), {
-    display: "inline-grid",
-    colGap: "l4",
-    rowGap: "3",
-    cols: cols !== "auto" ? cols : void 0,
-    className: gridColumnStyles[cols]
-  }), children);
-};
-
 // src/components/CheckboxGroup/CheckboxGroup.tsx
 var isCheckbox = (c) => {
   return React34.isValidElement(c) && c.type === Checkbox2;
@@ -4404,20 +4680,20 @@ var ChoiceChip = (_a) => {
     className: tw("inline-flex items-center border rounded-sm transition whitespace-nowrap cursor-pointer", {
       "bg-white border-grey-20 text-grey-60": !selected,
       "bg-grey-0 border-grey-100 text-grey-100": selected,
-      "typography-body-small py-2 px-3 gap-x-3": !dense,
-      "typography-caption-default py-1 px-2 gap-x-2": Boolean(dense)
+      "typography-small py-2 px-3 gap-x-3": !dense,
+      "typography-caption py-1 px-2 gap-x-2": Boolean(dense)
     }),
     onClick: handleClick
   }), text);
 };
 
 // src/components/Combobox/Combobox.tsx
-import React38, { useState as useState5, useEffect as useEffect4, useRef as useRef3 } from "react";
+import React38, { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
+import { useOverlayPosition as useOverlayPosition2 } from "@react-aria/overlays";
 import { useCombobox } from "downshift";
-import { matchSorter } from "match-sorter";
-import uniqueId2 from "lodash/uniqueId";
 import omit5 from "lodash/omit";
-import { useOverlayPosition as useOverlayPosition2 } from "@react-aria/overlays";
+import uniqueId2 from "lodash/uniqueId";
+import { matchSorter } from "match-sorter";
 
 // src/components/Popover/PopoverWrapper.tsx
 import React37 from "react";
@@ -4670,91 +4946,111 @@ Combobox.Skeleton = () => /* @__PURE__ */ React38.createElement(LabelControl.Ske
 
 // src/components/DataList/DataList.tsx
 import React44 from "react";
+import orderBy2 from "lodash/orderBy";
 
-// src/utils/table/types.ts
-var toSortDirection = (direction) => direction === "ascending" ? "asc" : direction === "descending" ? "desc" : false;
-var cellProps = (column) => ({
-  key: column.headerName,
-  align: column.type === "number" || column.type === "action" ? "right" : "left"
-});
+// src/components/Template/Template.tsx
+import React39 from "react";
+var Template = ({
+  children,
+  columns,
+  alignSelf,
+  alignContent,
+  alignItems,
+  justifySelf,
+  gap,
+  columnGap,
+  rowGap,
+  fullHeight
+}) => {
+  const gridTemplateColumns = typeof columns === "number" ? "1fr ".repeat(columns) : columns.map((column) => typeof column === "number" ? `${column}px` : column === "auto" ? column : `${column}fr`).join(" ");
+  const styles = useStyle({
+    height: fullHeight ? "100%" : void 0,
+    display: "grid",
+    gridTemplateColumns,
+    alignSelf,
+    alignContent,
+    alignItems,
+    justifySelf,
+    gap,
+    rowGap,
+    columnGap
+  });
+  return /* @__PURE__ */ React39.createElement("div", {
+    style: __spreadValues({}, styles)
+  }, children);
+};
 
 // src/common/DataList/DataList.tsx
-import React41 from "react";
+import React42 from "react";
 
 // src/common/Table/Table.tsx
-import React40 from "react";
+import React41 from "react";
 
 // src/common/RadioButton/RadioButton.tsx
-import React39 from "react";
-var RadioButton = React39.forwardRef(
+import React40 from "react";
+var RadioButton = React40.forwardRef(
   (_a, ref) => {
-    var _b = _a, { id, children, name, checked = false, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "checked", "disabled", "readOnly"]);
-    return /* @__PURE__ */ React39.createElement("span", {
-      className: classNames(
-        tw("inline-flex justify-center items-center relative self-center", {
-          "text-grey-30": disabled,
-          "text-grey-100": !disabled
-        })
-      )
-    }, /* @__PURE__ */ React39.createElement("input", __spreadProps(__spreadValues({
+    var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
+    return /* @__PURE__ */ React40.createElement("span", {
+      className: classNames(tw("inline-flex justify-center items-center relative self-center"))
+    }, /* @__PURE__ */ React40.createElement("input", __spreadProps(__spreadValues({
       id,
       ref,
       type: "radio",
       name
     }, props), {
-      checked,
-      className: classNames(
-        tw("appearance-none rounded-full border cursor-pointer"),
-        {
-          "border-grey-20 hover:border-grey-50 focus:border-info-70": !disabled && !checked,
-          "border-navyBlue-100": !disabled && checked,
-          "border-grey-5": disabled
-        },
-        props.className
-      ),
-      style: __spreadValues({ width: 16, height: 16 }, props.style),
+      className: tw("opacity-0 peer/radio w-0 h-0"),
       readOnly,
       disabled
-    })), /* @__PURE__ */ React39.createElement("span", {
+    })), /* @__PURE__ */ React40.createElement("span", {
+      className: tw(
+        "rounded-full w-5 h-5 p-[3px] border cursor-pointer",
+        "border-grey-20 peer-focus/radio:border-info-70",
+        "peer-checked/radio:[&>*]:block",
+        {
+          "peer-checked/radio:border-navyBlue-100 peer-hover/radio:border-grey-50": !disabled,
+          "border-grey-5 peer-checked/radio:[&>*]:opacity-40": disabled
+        }
+      )
+    }, /* @__PURE__ */ React40.createElement("span", {
       style: { backgroundColor: "currentcolor" },
-      className: tw("absolute w-3 h-3 rounded-full bg-navyBlue-100 pointer-events-none", {
-        "opacity-0": !checked,
-        "opacity-40": disabled && checked
+      className: tw("w-3 h-3 rounded-full hidden bg-navyBlue-100 pointer-events-none", {
+        "peer-checked/radio:opacity-40": disabled
       })
-    }));
+    })));
   }
 );
 
 // src/common/Table/Table.tsx
-var import_chevronUp2 = __toESM(require_chevronUp());
 var import_chevronDown3 = __toESM(require_chevronDown());
-var HeadContext = React40.createContext(null);
-var tableClassNames = tw("w-full relative typography-body-default border-spacing-0");
+var import_chevronUp2 = __toESM(require_chevronUp());
+var HeadContext = React41.createContext(null);
+var tableClassNames = tw("w-full relative typography-default border-spacing-0");
 var Table = (_a) => {
   var _b = _a, { children, ariaLabel, className } = _b, rest = __objRest(_b, ["children", "ariaLabel", "className"]);
-  return /* @__PURE__ */ React40.createElement("table", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React41.createElement("table", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tableClassNames, className),
     "aria-label": ariaLabel
   }), children);
 };
 var TableHead = (_a) => {
   var _b = _a, { children, sticky } = _b, rest = __objRest(_b, ["children", "sticky"]);
-  return /* @__PURE__ */ React40.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ React40.createElement("tr", null, /* @__PURE__ */ React40.createElement(HeadContext.Provider, {
+  return /* @__PURE__ */ React41.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ React41.createElement("tr", null, /* @__PURE__ */ React41.createElement(HeadContext.Provider, {
     value: { children, sticky }
   }, children)));
 };
 var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React40.createElement("tbody", __spreadValues({}, rest), children);
+  return /* @__PURE__ */ React41.createElement("tbody", __spreadValues({}, rest), children);
 };
 var rowClassNames = tw("children:border-grey-10 children:last:border-b-0 hover:bg-grey-0");
 var TableRow = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React40.createElement("tr", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React41.createElement("tr", __spreadProps(__spreadValues({}, rest), {
     className: classNames(rowClassNames, className)
   }), children);
 };
-var cellClassNames = tw("px-4 border-b typography-body-small leading-[18px]");
+var cellClassNames = tw("px-4 border-b typography-small leading-[18px]");
 var getBodyCellClassNames = (table = true) => tw("text-grey-70 py-3", {
   "h-[50px]": table,
   "min-h-[50px]": !table
@@ -4766,25 +5062,25 @@ var getHeadCellClassNames = (sticky = true) => {
 };
 var TableCell = (_a) => {
   var _b = _a, { children, className, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "align"]);
-  const headContext = React40.useContext(HeadContext);
-  return headContext ? /* @__PURE__ */ React40.createElement("th", __spreadProps(__spreadValues({}, rest), {
+  const headContext = React41.useContext(HeadContext);
+  return headContext ? /* @__PURE__ */ React41.createElement("th", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
       getHeadCellClassNames(headContext.sticky),
       getAlignClassNames(align),
       className
     )
-  }), children) : /* @__PURE__ */ React40.createElement("td", __spreadProps(__spreadValues({}, rest), {
+  }), children) : /* @__PURE__ */ React41.createElement("td", __spreadProps(__spreadValues({}, rest), {
     className: classNames(cellClassNames, getBodyCellClassNames(), getAlignClassNames(align), className)
   }), children);
 };
 var TableSelectCell = (_a) => {
   var _b = _a, { ariaLabel } = _b, props = __objRest(_b, ["ariaLabel"]);
-  return /* @__PURE__ */ React40.createElement(Table.Cell, {
+  return /* @__PURE__ */ React41.createElement(Table.Cell, {
     className: tw("leading-[0px]")
-  }, props.type === "radio" ? /* @__PURE__ */ React40.createElement(RadioButton, __spreadValues({
+  }, props.type === "radio" ? /* @__PURE__ */ React41.createElement(RadioButton, __spreadValues({
     "aria-label": ariaLabel
-  }, props)) : /* @__PURE__ */ React40.createElement(Checkbox, __spreadValues({
+  }, props)) : /* @__PURE__ */ React41.createElement(Checkbox, __spreadValues({
     "aria-label": ariaLabel
   }, props)));
 };
@@ -4794,43 +5090,43 @@ var getSortCellIconClassNames = (active) => {
 };
 var TableSortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ React40.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React41.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction
-  }), /* @__PURE__ */ React40.createElement("span", {
+  }), /* @__PURE__ */ React41.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ React40.createElement("div", {
+  }, children, /* @__PURE__ */ React41.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ React40.createElement(InlineIcon, {
+  }, /* @__PURE__ */ React41.createElement(InlineIcon, {
     icon: import_chevronUp2.default,
     className: getSortCellIconClassNames(direction === "descending")
-  }), /* @__PURE__ */ React40.createElement(InlineIcon, {
+  }), /* @__PURE__ */ React41.createElement(InlineIcon, {
     icon: import_chevronDown3.default,
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
 };
-var Item2 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React40.createElement("div", {
+var Item2 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React41.createElement("div", {
   className: tw("flex gap-4 items-center")
-}, image && /* @__PURE__ */ React40.createElement("img", {
+}, image && /* @__PURE__ */ React41.createElement("img", {
   src: image,
   alt: imageAlt,
   style: { width: imageSize, height: imageSize }
-}), /* @__PURE__ */ React40.createElement("div", null, title, caption && /* @__PURE__ */ React40.createElement(Typography2.Caption, null, caption)));
-Table.Head = React40.memo(TableHead);
-Table.Body = React40.memo(TableBody);
-Table.Row = React40.memo(TableRow);
-Table.Cell = React40.memo(TableCell);
-Table.SortCell = React40.memo(TableSortCell);
-Table.SelectCell = React40.memo(TableSelectCell);
+}), /* @__PURE__ */ React41.createElement("div", null, title, caption && /* @__PURE__ */ React41.createElement(Typography2.Caption, null, caption)));
+Table.Head = React41.memo(TableHead);
+Table.Body = React41.memo(TableBody);
+Table.Row = React41.memo(TableRow);
+Table.Cell = React41.memo(TableCell);
+Table.SortCell = React41.memo(TableSortCell);
+Table.SelectCell = React41.memo(TableSelectCell);
 
 // src/common/DataList/DataList.tsx
-var import_chevronUp3 = __toESM(require_chevronUp());
 var import_chevronDown4 = __toESM(require_chevronDown());
+var import_chevronUp3 = __toESM(require_chevronUp());
 var getAlignClassNames2 = (align) => tw("flex items-center", {
   "justify-end": align === "right",
   "justify-center": align === "center",
@@ -4838,7 +5134,7 @@ var getAlignClassNames2 = (align) => tw("flex items-center", {
 });
 var DataList = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React41.createElement("div", __spreadValues({}, rest));
+  return /* @__PURE__ */ React42.createElement("div", __spreadValues({}, rest));
 };
 var HeadCell = (_a) => {
   var _b = _a, {
@@ -4850,14 +5146,14 @@ var HeadCell = (_a) => {
     "sticky",
     "align"
   ]);
-  return /* @__PURE__ */ React41.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React42.createElement("div", __spreadProps(__spreadValues({}, rest), {
     role: "cell",
     className: classNames(cellClassNames, getHeadCellClassNames(sticky), getAlignClassNames2(align), className)
   }));
 };
 var Cell = (_a) => {
   var _b = _a, { className, align } = _b, rest = __objRest(_b, ["className", "align"]);
-  return /* @__PURE__ */ React41.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React42.createElement("div", __spreadProps(__spreadValues({}, rest), {
     role: "cell",
     className: classNames(
       cellClassNames,
@@ -4870,30 +5166,30 @@ var Cell = (_a) => {
 };
 var Row = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React41.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React42.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("contents group"), className),
     role: "row"
   }));
 };
 var SortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ React41.createElement(HeadCell, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React42.createElement(HeadCell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction,
     role: "cell"
-  }), /* @__PURE__ */ React41.createElement("span", {
+  }), /* @__PURE__ */ React42.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ React41.createElement("div", {
+  }, children, /* @__PURE__ */ React42.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ React41.createElement(InlineIcon, {
+  }, /* @__PURE__ */ React42.createElement(InlineIcon, {
     icon: import_chevronUp3.default,
     className: getSortCellIconClassNames(direction === "descending")
-  }), /* @__PURE__ */ React41.createElement(InlineIcon, {
+  }), /* @__PURE__ */ React42.createElement(InlineIcon, {
     icon: import_chevronDown4.default,
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
@@ -4903,38 +5199,6 @@ DataList.SortCell = SortCell;
 DataList.Cell = Cell;
 DataList.Row = Row;
 
-// src/components/Template/Template.tsx
-import React42 from "react";
-var Template = ({
-  children,
-  columns,
-  alignSelf,
-  alignContent,
-  alignItems,
-  justifySelf,
-  gap,
-  columnGap,
-  rowGap,
-  fullHeight
-}) => {
-  const gridTemplateColumns = typeof columns === "number" ? "1fr ".repeat(columns) : columns.map((column) => typeof column === "number" ? `${column}px` : column === "auto" ? column : `${column}fr`).join(" ");
-  const styles = useStyle({
-    height: fullHeight ? "100%" : void 0,
-    display: "grid",
-    gridTemplateColumns,
-    alignSelf,
-    alignContent,
-    alignItems,
-    justifySelf,
-    gap,
-    rowGap,
-    columnGap
-  });
-  return /* @__PURE__ */ React42.createElement("div", {
-    style: __spreadValues({}, styles)
-  }, children);
-};
-
 // src/utils/object.ts
 var renameProperty = (oldProp, newProp, _a) => {
   var _b = _a, { [oldProp]: oldValue } = _b, rest = __objRest(_b, [__restKey(oldProp)]);
@@ -4943,8 +5207,12 @@ var renameProperty = (oldProp, newProp, _a) => {
   }, rest);
 };
 
-// src/components/DataList/DataList.tsx
-import orderBy2 from "lodash/orderBy";
+// src/utils/table/types.ts
+var toSortDirection = (direction) => direction === "ascending" ? "asc" : direction === "descending" ? "desc" : false;
+var cellProps = (column) => ({
+  key: column.headerName,
+  align: column.type === "number" || column.type === "action" ? "right" : "left"
+});
 
 // src/utils/table/useTableSort.tsx
 import React43 from "react";
@@ -4996,6 +5264,7 @@ var DataList2 = ({ columns, rows }) => {
 
 // src/components/DataTable/DataTable.tsx
 import React47 from "react";
+import orderBy3 from "lodash/orderBy";
 
 // src/components/Table/Table.tsx
 import React46 from "react";
@@ -5040,7 +5309,6 @@ Table2.SortCell = Table.SortCell;
 Table2.SelectCell = Table.SelectCell;
 
 // src/components/DataTable/DataTable.tsx
-import orderBy3 from "lodash/orderBy";
 var DataTable = (_a) => {
   var _b = _a, {
     columns,
@@ -5086,12 +5354,31 @@ var DataTable = (_a) => {
 
 // src/components/Dialog/Dialog.tsx
 import React49 from "react";
-import omit6 from "lodash/omit";
-import { Overlay, useModalOverlay } from "@react-aria/overlays";
 import { useDialog } from "@react-aria/dialog";
 import { FocusScope as FocusScope2 } from "@react-aria/focus";
+import { Overlay, useModalOverlay } from "@react-aria/overlays";
 import { useId } from "@react-aria/utils";
 import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
+import omit6 from "lodash/omit";
+
+// src/common/Dialog/Dialog.tsx
+var import_confirm2 = __toESM(require_confirm());
+var import_error2 = __toESM(require_error());
+var import_warningSign2 = __toESM(require_warningSign());
+var DIALOG_ICONS_AND_COLORS = {
+  confirmation: {
+    icon: import_confirm2.default,
+    color: "info-70"
+  },
+  warning: {
+    icon: import_warningSign2.default,
+    color: "secondary-70"
+  },
+  danger: {
+    icon: import_error2.default,
+    color: "error-70"
+  }
+};
 
 // src/common/Modal/Modal.tsx
 import React48 from "react";
@@ -5118,7 +5405,7 @@ Modal.Dialog = React48.forwardRef(
       "aria-modal": "true"
     }, rest), {
       className: classNames(
-        tw("bg-white rounded mx-7 w-full max-h-full flex flex-col"),
+        tw("relative bg-white rounded mx-7 w-full max-h-full flex flex-col"),
         {
           "max-w-[600px]": size === "sm",
           "max-w-[940px]": size === "md",
@@ -5135,11 +5422,29 @@ Modal.Header = (_a) => {
     className: classNames(tw("px-7 py-6 gap-3 flex items-center"), className)
   }), children);
 };
+Modal.HeaderImage = (_a) => {
+  var _b = _a, { backgroundImage, className } = _b, rest = __objRest(_b, ["backgroundImage", "className"]);
+  const common = tw("h-[120px] min-h-[120px] w-full ");
+  return backgroundImage ? /* @__PURE__ */ React48.createElement("img", __spreadProps(__spreadValues({
+    "aria-hidden": true,
+    src: backgroundImage != null ? backgroundImage : void 0
+  }, rest), {
+    className: classNames(common, tw("object-cover"), className)
+  })) : /* @__PURE__ */ React48.createElement("div", {
+    className: classNames(common, tw("bg-grey-5"), className)
+  });
+};
+Modal.CloseButtonContainer = (_a) => {
+  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React48.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(tw("absolute top-[20px] right-[28px]"), className)
+  }));
+};
 Modal.Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ React48.createElement(Typography, __spreadValues({
     htmlTag: "h2",
-    variant: "heading-large",
+    variant: "subheading",
     color: "grey-90",
     className: classNames(tw("leading-none"), className)
   }, rest), children);
@@ -5147,7 +5452,7 @@ Modal.Title = (_a) => {
 Modal.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ React48.createElement(Typography, __spreadValues({
-    variant: "body-small",
+    variant: "small",
     color: "grey-60"
   }, rest), children);
 };
@@ -5177,25 +5482,6 @@ Modal.Actions = (_a) => {
   }), children);
 };
 
-// src/common/Dialog/Dialog.tsx
-var import_confirm2 = __toESM(require_confirm());
-var import_warningSign2 = __toESM(require_warningSign());
-var import_error2 = __toESM(require_error());
-var DIALOG_ICONS_AND_COLORS = {
-  confirmation: {
-    icon: import_confirm2.default,
-    color: "info-70"
-  },
-  warning: {
-    icon: import_warningSign2.default,
-    color: "secondary-70"
-  },
-  danger: {
-    icon: import_error2.default,
-    color: "error-70"
-  }
-};
-
 // src/components/Dialog/Dialog.tsx
 var Dialog = ({
   title,
@@ -5232,7 +5518,7 @@ var Dialog = ({
     fontSize: 20
   }), /* @__PURE__ */ React49.createElement(Modal.Title, {
     id: labelledBy,
-    variant: "body-large",
+    variant: "large-strong",
     color: DIALOG_ICONS_AND_COLORS[type].color
   }, title)), /* @__PURE__ */ React49.createElement(Modal.Body, {
     id: describedBy
@@ -5279,7 +5565,7 @@ import React52 from "react";
 
 // src/components/Popover/Popover.tsx
 import React51, { useRef as useRef4 } from "react";
-import { usePress, PressResponder } from "@react-aria/interactions";
+import { PressResponder, usePress } from "@react-aria/interactions";
 import { useOverlayPosition as useOverlayPosition3, useOverlayTrigger } from "@react-aria/overlays";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
 import { useOverlayTriggerState as useOverlayTriggerState3 } from "@react-stately/overlays";
@@ -5422,7 +5708,7 @@ var DropdownMenu = ({
     style: { minWidth: "250px" },
     className: tw("py-3 bg-white")
   }, !!title && /* @__PURE__ */ React52.createElement("div", {
-    className: tw("px-4 py-4 text-left text-grey-100 typography-body-default-medium font-semibold")
+    className: tw("px-4 py-4 text-left text-grey-100 typography-default-strong")
   }, title), /* @__PURE__ */ React52.createElement("ol", {
     role: "menu",
     ref: menuRef,
@@ -5453,167 +5739,81 @@ var DropdownItem = (_a) => {
   const { state } = usePopoverContext();
   const handleSelect = () => {
     onSelect == null ? void 0 : onSelect();
-    state.close();
-    setClose();
-  };
-  const handleKeyDown = (event) => {
-    const target = event.target;
-    const parent = target.parentElement;
-    const first = parent.firstChild;
-    const last = parent.lastChild;
-    const next = target.nextElementSibling;
-    const prev = target.previousElementSibling;
-    if (event.key === "ArrowUp") {
-      prev ? prev.focus() : last.focus();
-    } else if (event.key === "ArrowDown") {
-      next ? next.focus() : first.focus();
-    } else if (event.key === "Tab") {
-      event.preventDefault();
-      event.stopPropagation();
-    } else if (event.key === "Home" || event.key === "PageUp") {
-      first.focus();
-    } else if (event.key === "End" || event.key === "PageDown") {
-      last.focus();
-    } else if (event.key === "Enter") {
-      !disabled && handleSelect();
-    }
-  };
-  const handleClick = (e) => {
-    e.stopPropagation();
-    if (!disabled) {
-      handleSelect();
-    }
-  };
-  const itemContent = /* @__PURE__ */ React52.createElement("div", {
-    className: tw("py-3 px-4")
-  }, children);
-  return /* @__PURE__ */ React52.createElement("li", __spreadProps(__spreadValues({
-    role: "menuitem",
-    tabIndex: -1,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown
-  }, props), {
-    className: tw("typography-body-small flex items-center focus:ring-0", {
-      "text-grey-70 cursor-pointer hover:bg-grey-0": !disabled,
-      "text-grey-10 cursor-not-allowed": disabled,
-      "text-primary-70 hover:text-primary-80": color === "danger" && !disabled
-    })
-  }), tooltip ? /* @__PURE__ */ React52.createElement(Tooltip, {
-    content: tooltip,
-    placement: tooltipPlacement,
-    inline: false
-  }, itemContent) : itemContent);
-};
-Dropdown.Menu = DropdownMenu;
-Dropdown.Item = DropdownItem;
-
-// src/components/DropdownMenu/DropdownMenu.tsx
-import React56 from "react";
-import { useFilter } from "@react-aria/i18n";
-import { Item as Item4, Section } from "@react-stately/collections";
-import { useTreeState } from "@react-stately/tree";
-import { useMenuTriggerState } from "@react-stately/menu";
-import { useOverlayPosition as useOverlayPosition4 } from "@react-aria/overlays";
-import { useMenuTrigger, useMenu, useMenuItem, useMenuSection } from "@react-aria/menu";
-import { useSeparator } from "@react-aria/separator";
-import { usePress as usePress2, PressResponder as PressResponder2 } from "@react-aria/interactions";
-import { mergeProps as mergeProps4 } from "@react-aria/utils";
-
-// src/common/DropdownMenu/DropdownMenu.tsx
-import React53 from "react";
-var import_tick3 = __toESM(require_tick());
-var DropdownMenu2 = React53.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { maxHeight = "450px", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["maxHeight", "minWidth", "maxWidth", "className", "children"]);
-    return /* @__PURE__ */ React53.createElement("div", __spreadValues({
-      ref,
-      style: { maxHeight, minWidth, maxWidth },
-      className: classNames(
-        className,
-        "bg-white w-full overflow-y-auto overflow-x-hidden typography-body-small-medium text-grey-70"
-      )
-    }, props), children);
-  }
-);
-var ContentContainer = ({ children }) => /* @__PURE__ */ React53.createElement("div", {
-  className: tw("p-3")
-}, children);
-DropdownMenu2.ContentContainer = ContentContainer;
-var List2 = React53.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ React53.createElement("ul", __spreadValues({
-      ref
-    }, props), children);
-  }
-);
-DropdownMenu2.List = List2;
-var Group2 = React53.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, title, titleProps, children } = _b, props = __objRest(_b, ["className", "title", "titleProps", "children"]);
-    return /* @__PURE__ */ React53.createElement("li", __spreadValues({
-      ref
-    }, props), title && /* @__PURE__ */ React53.createElement("div", __spreadValues({
-      className: classNames(
-        className,
-        "p-3 text-grey-40 uppercase cursor-default typography-caption-default font-medium",
-        {
-          "text-grey-20": props.disabled
-        }
-      )
-    }, titleProps), title), children);
-  }
-);
-DropdownMenu2.Group = Group2;
-var Item3 = React53.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { kind, highlighted, selected, className, icon, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "children"]);
-    return /* @__PURE__ */ React53.createElement("li", __spreadValues({
-      ref,
-      className: classNames(className, "flex items-center gap-x-3 p-3 outline-none", {
-        "cursor-pointer hover:bg-grey-0": !props.disabled,
-        "bg-grey-0": highlighted,
-        "text-primary-80": kind === "action",
-        "text-grey-20 cursor-not-allowed": props.disabled
-      })
-    }, props), icon && /* @__PURE__ */ React53.createElement(InlineIcon, {
-      icon
-    }), /* @__PURE__ */ React53.createElement("span", {
-      className: tw("grow")
-    }, children), selected && /* @__PURE__ */ React53.createElement(InlineIcon, {
-      icon: import_tick3.default
-    }));
-  }
-);
-DropdownMenu2.Item = Item3;
-var Description = ({ disabled, children }) => /* @__PURE__ */ React53.createElement(Typography2.Caption, {
-  color: disabled ? "grey-20" : "grey-40"
-}, children);
-DropdownMenu2.Description = Description;
-var Separator = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React53.createElement("li", __spreadProps(__spreadValues({}, props), {
-    className: classNames(className, tw("m-3 block bg-grey-5 h-[1px]"))
-  }));
-};
-DropdownMenu2.Separator = Separator;
-var EmptyStateContainer2 = (_a) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React53.createElement("div", __spreadValues({
-    className: classNames(tw("border border-dashed border-grey-10 p-3"), className)
-  }, props), children);
+    state.close();
+    setClose();
+  };
+  const handleKeyDown = (event) => {
+    const target = event.target;
+    const parent = target.parentElement;
+    const first = parent.firstChild;
+    const last = parent.lastChild;
+    const next = target.nextElementSibling;
+    const prev = target.previousElementSibling;
+    if (event.key === "ArrowUp") {
+      prev ? prev.focus() : last.focus();
+    } else if (event.key === "ArrowDown") {
+      next ? next.focus() : first.focus();
+    } else if (event.key === "Tab") {
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (event.key === "Home" || event.key === "PageUp") {
+      first.focus();
+    } else if (event.key === "End" || event.key === "PageDown") {
+      last.focus();
+    } else if (event.key === "Enter") {
+      !disabled && handleSelect();
+    }
+  };
+  const handleClick = (e) => {
+    e.stopPropagation();
+    if (!disabled) {
+      handleSelect();
+    }
+  };
+  const itemContent = /* @__PURE__ */ React52.createElement("div", {
+    className: tw("py-3 px-4")
+  }, children);
+  return /* @__PURE__ */ React52.createElement("li", __spreadProps(__spreadValues({
+    role: "menuitem",
+    tabIndex: -1,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown
+  }, props), {
+    className: tw("typography-small flex items-center focus:ring-0", {
+      "text-grey-70 cursor-pointer hover:bg-grey-0": !disabled,
+      "text-grey-10 cursor-not-allowed": disabled,
+      "text-primary-70 hover:text-primary-80": color === "danger" && !disabled
+    })
+  }), tooltip ? /* @__PURE__ */ React52.createElement(Tooltip, {
+    content: tooltip,
+    placement: tooltipPlacement,
+    inline: false
+  }, itemContent) : itemContent);
 };
-DropdownMenu2.EmptyStateContainer = EmptyStateContainer2;
+Dropdown.Menu = DropdownMenu;
+Dropdown.Item = DropdownItem;
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+import React56 from "react";
+import { useFilter } from "@react-aria/i18n";
+import { PressResponder as PressResponder2, usePress as usePress2 } from "@react-aria/interactions";
+import { useMenu, useMenuItem, useMenuSection, useMenuTrigger } from "@react-aria/menu";
+import { useOverlayPosition as useOverlayPosition4 } from "@react-aria/overlays";
+import { useSeparator } from "@react-aria/separator";
+import { mergeProps as mergeProps4 } from "@react-aria/utils";
+import { Item as Item4, Section } from "@react-stately/collections";
+import { useMenuTriggerState } from "@react-stately/menu";
+import { useTreeState } from "@react-stately/tree";
 
 // src/components/Input/Input.tsx
-import uniqueId3 from "lodash/uniqueId";
-import toString from "lodash/toString";
+import React54, { forwardRef, useImperativeHandle, useRef as useRef5, useState as useState6 } from "react";
 import omit7 from "lodash/omit";
-import React55, { forwardRef, useState as useState6, useImperativeHandle, useRef as useRef5 } from "react";
+import toString from "lodash/toString";
+import uniqueId3 from "lodash/uniqueId";
 
 // src/utils/constants.ts
 var getCommonInputStyles = ({ readOnly, valid }) => tw(
-  "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-grey-20 disabled:bg-grey-5 typography-body-small text-grey-70 disabled:text-grey-40 placeholder:text-grey-40 focus:outline-none",
+  "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-grey-20 disabled:bg-grey-5 typography-small text-grey-70 disabled:text-grey-40 placeholder:text-grey-40 focus:outline-none",
   {
     "px-3 py-3": !readOnly,
     "border-none resize-none cursor-default": readOnly,
@@ -5623,31 +5823,31 @@ var getCommonInputStyles = ({ readOnly, valid }) => tw(
 );
 
 // src/utils/form/InputAdornment/InputAdornment.tsx
-import React54 from "react";
-var import_tick4 = __toESM(require_tick());
+import React53 from "react";
+var import_cross4 = __toESM(require_cross());
 var import_error3 = __toESM(require_error());
 var import_search2 = __toESM(require_search());
-var import_cross4 = __toESM(require_cross());
+var import_tick3 = __toESM(require_tick());
 var InputAdornment = ({ placement = "right", className, dense, children }) => {
-  return /* @__PURE__ */ React54.createElement("span", {
+  return /* @__PURE__ */ React53.createElement("span", {
     className: classNames(className, "absolute inset-y-0 grow-0 text-grey-40 flex items-center mx-3", {
       "right-0": placement === "right",
       "left-0": placement === "left",
-      "typography-body-small": dense,
-      "typography-body-default-medium": !dense
+      "typography-small": dense,
+      "typography-default-strong": !dense
     })
-  }, /* @__PURE__ */ React54.createElement(Flexbox, {
+  }, /* @__PURE__ */ React53.createElement(Flexbox, {
     gap: "3",
     wrap: "wrap"
   }, children));
 };
-var SearchIcon = ({ onClick }) => /* @__PURE__ */ React54.createElement(Icon, {
+var SearchIcon = ({ onClick }) => /* @__PURE__ */ React53.createElement(Icon, {
   icon: import_search2.default,
   color: "grey-30",
   "data-testid": "icon-search",
   onClick
 });
-var ResetIcon = ({ onClick }) => /* @__PURE__ */ React54.createElement(Icon, {
+var ResetIcon = ({ onClick }) => /* @__PURE__ */ React53.createElement(Icon, {
   className: "hover:cursor-pointer",
   icon: import_cross4.default,
   color: "grey-30",
@@ -5677,7 +5877,7 @@ var createInput = (displayName, opts = {}) => {
         "readOnly"
       ]);
       var _a2;
-      const inputRef = React55.useRef(null);
+      const inputRef = React54.useRef(null);
       useImperativeHandle(ref, () => inputRef.current);
       const handleReset = () => {
         var _a3;
@@ -5690,11 +5890,11 @@ var createInput = (displayName, opts = {}) => {
           el.focus();
         }
       };
-      return /* @__PURE__ */ React55.createElement("span", {
+      return /* @__PURE__ */ React54.createElement("span", {
         className: tw("relative block")
-      }, opts.adornment && /* @__PURE__ */ React55.createElement(InputAdornment, {
+      }, opts.adornment && /* @__PURE__ */ React54.createElement(InputAdornment, {
         placement: "left"
-      }, opts.adornment), /* @__PURE__ */ React55.createElement("input", __spreadProps(__spreadValues({
+      }, opts.adornment), /* @__PURE__ */ React54.createElement("input", __spreadProps(__spreadValues({
         ref: inputRef,
         type
       }, props), {
@@ -5709,20 +5909,20 @@ var createInput = (displayName, opts = {}) => {
           getCommonInputStyles({ readOnly, valid }),
           props.className
         )
-      })), opts.canReset && (props.value || ((_a2 = inputRef.current) == null ? void 0 : _a2.value)) && /* @__PURE__ */ React55.createElement(InputAdornment, null, /* @__PURE__ */ React55.createElement(ResetIcon, {
+      })), opts.canReset && (props.value || ((_a2 = inputRef.current) == null ? void 0 : _a2.value)) && /* @__PURE__ */ React54.createElement(InputAdornment, null, /* @__PURE__ */ React54.createElement(ResetIcon, {
         onClick: handleReset
-      })), !opts.canReset && endAdornment && /* @__PURE__ */ React55.createElement(InputAdornment, null, endAdornment));
+      })), !opts.canReset && endAdornment && /* @__PURE__ */ React54.createElement(InputAdornment, null, endAdornment));
     }
   );
   InputComponent.displayName = displayName;
-  InputComponent.Skeleton = () => /* @__PURE__ */ React55.createElement(Skeleton, {
+  InputComponent.Skeleton = () => /* @__PURE__ */ React54.createElement(Skeleton, {
     height: 38
   });
   return InputComponent;
 };
 var InputBase = createInput("InputBase");
-var SearchInput = createInput("SearchInput", { adornment: /* @__PURE__ */ React55.createElement(SearchIcon, null), canReset: true });
-var Input2 = React55.forwardRef((_a, ref) => {
+var SearchInput = createInput("SearchInput", { adornment: /* @__PURE__ */ React54.createElement(SearchIcon, null), canReset: true });
+var Input2 = React54.forwardRef((_a, ref) => {
   var _b = _a, { readOnly = false } = _b, props = __objRest(_b, ["readOnly"]);
   var _a2, _b2, _c;
   const [value, setValue] = useState6((_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : "");
@@ -5731,12 +5931,12 @@ var Input2 = React55.forwardRef((_a, ref) => {
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
   const baseProps = omit7(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ React55.createElement(LabelControl, __spreadValues({
+  return /* @__PURE__ */ React54.createElement(LabelControl, __spreadValues({
     id: `${id.current}-label`,
     htmlFor: id.current,
     messageId: errorMessageId,
     length: value !== void 0 ? toString(value).length : void 0
-  }, labelControlProps), /* @__PURE__ */ React55.createElement(InputBase, __spreadProps(__spreadValues(__spreadValues({
+  }, labelControlProps), /* @__PURE__ */ React54.createElement(InputBase, __spreadProps(__spreadValues(__spreadValues({
     ref
   }, baseProps), errorProps), {
     id: id.current,
@@ -5754,9 +5954,91 @@ var Input2 = React55.forwardRef((_a, ref) => {
   })));
 });
 Input2.displayName = "Input";
-Input2.Skeleton = () => /* @__PURE__ */ React55.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React55.createElement(InputBase.Skeleton, null));
+Input2.Skeleton = () => /* @__PURE__ */ React54.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React54.createElement(InputBase.Skeleton, null));
 Input2.Skeleton.displayName = "Input.Skeleton";
 
+// src/common/DropdownMenu/DropdownMenu.tsx
+import React55 from "react";
+var import_tick4 = __toESM(require_tick());
+var DropdownMenu2 = React55.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { maxHeight = "450px", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["maxHeight", "minWidth", "maxWidth", "className", "children"]);
+    return /* @__PURE__ */ React55.createElement("div", __spreadValues({
+      ref,
+      style: { maxHeight, minWidth, maxWidth },
+      className: classNames(
+        className,
+        "bg-white w-full overflow-y-auto overflow-x-hidden typography-small text-grey-70"
+      )
+    }, props), children);
+  }
+);
+var ContentContainer = ({ children }) => /* @__PURE__ */ React55.createElement("div", {
+  className: tw("p-3")
+}, children);
+DropdownMenu2.ContentContainer = ContentContainer;
+var List2 = React55.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+    return /* @__PURE__ */ React55.createElement("ul", __spreadValues({
+      ref
+    }, props), children);
+  }
+);
+DropdownMenu2.List = List2;
+var Group2 = React55.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, title, titleProps, children } = _b, props = __objRest(_b, ["className", "title", "titleProps", "children"]);
+    return /* @__PURE__ */ React55.createElement("li", __spreadValues({
+      ref
+    }, props), title && /* @__PURE__ */ React55.createElement("div", __spreadValues({
+      className: classNames(className, "p-3 text-grey-40 uppercase cursor-default typography-caption", {
+        "text-grey-20": props.disabled
+      })
+    }, titleProps), title), children);
+  }
+);
+DropdownMenu2.Group = Group2;
+var Item3 = React55.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { kind, highlighted, selected, className, icon, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "children"]);
+    return /* @__PURE__ */ React55.createElement("li", __spreadValues({
+      ref,
+      className: classNames(className, "flex items-center gap-x-3 p-3 outline-none", {
+        "cursor-pointer hover:bg-grey-0": !props.disabled,
+        "bg-grey-0": highlighted,
+        "text-primary-80": kind === "action",
+        "text-grey-20 cursor-not-allowed": props.disabled
+      })
+    }, props), icon && /* @__PURE__ */ React55.createElement(InlineIcon, {
+      icon
+    }), /* @__PURE__ */ React55.createElement("span", {
+      className: tw("grow")
+    }, children), selected && /* @__PURE__ */ React55.createElement(InlineIcon, {
+      icon: import_tick4.default
+    }));
+  }
+);
+DropdownMenu2.Item = Item3;
+var Description = ({ disabled, children }) => /* @__PURE__ */ React55.createElement(Typography2.Caption, {
+  color: disabled ? "grey-20" : "grey-40"
+}, children);
+DropdownMenu2.Description = Description;
+var Separator = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React55.createElement("li", __spreadProps(__spreadValues({}, props), {
+    className: classNames(className, tw("m-3 block bg-grey-5 h-[1px]"))
+  }));
+};
+DropdownMenu2.Separator = Separator;
+var EmptyStateContainer2 = (_a) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ React55.createElement("div", __spreadValues({
+    className: classNames(tw("border border-dashed border-grey-10 p-3"), className)
+  }, props), children);
+};
+DropdownMenu2.EmptyStateContainer = EmptyStateContainer2;
+
 // src/components/DropdownMenu/utils.ts
 import { ListCollection } from "@react-stately/list";
 var filterCollection = (collection, inputValue, filter) => {
@@ -5979,6 +6261,7 @@ var getDisabledItemKeys = (children) => {
 
 // src/components/EmptyState/EmptyState.tsx
 import React58 from "react";
+import omit8 from "lodash/omit";
 
 // src/components/Flexbox/FlexboxItem.tsx
 import React57 from "react";
@@ -6001,7 +6284,6 @@ var FlexboxItem = Tailwindify(
 );
 
 // src/components/EmptyState/EmptyState.tsx
-import omit8 from "lodash/omit";
 var EmptyStateLayout = /* @__PURE__ */ ((EmptyStateLayout2) => {
   EmptyStateLayout2["CenterVertical"] = "center-vertical";
   EmptyStateLayout2["LeftVertical"] = "left-vertical";
@@ -6079,12 +6361,12 @@ var EmptyState = ({
     justifyContent: template.justifyContent,
     alignItems: template.alignItems
   }, /* @__PURE__ */ React58.createElement(Typography2, {
-    variant: "heading-xl",
+    variant: "heading",
     htmlTag: "h2"
   }, title), description && /* @__PURE__ */ React58.createElement(Box, {
     marginTop: "5"
   }, /* @__PURE__ */ React58.createElement(Typography2, {
-    variant: "body-default",
+    variant: "default",
     color: "grey-60"
   }, description)), (secondaryAction || primaryAction) && /* @__PURE__ */ React58.createElement(Flexbox, {
     marginTop: "7",
@@ -6096,7 +6378,7 @@ var EmptyState = ({
     marginTop: "7"
   }, /* @__PURE__ */ React58.createElement(Typography2, {
     htmlTag: "div",
-    variant: "body-small",
+    variant: "small",
     color: "grey-60"
   }, footer)))));
 };
@@ -6153,7 +6435,7 @@ var ListItem = ({ name, icon, active = false }) => {
   return /* @__PURE__ */ React61.createElement(Flexbox, {
     alignItems: "center"
   }, /* @__PURE__ */ React61.createElement(Typography2, {
-    variant: active ? "body-small-medium" : "body-small",
+    variant: active ? "small-strong" : "small",
     color: "grey-70",
     htmlTag: "span",
     className: `px-4 py-2 rounded-full ${active ? "bg-grey-5" : "hover:bg-grey-0"}`
@@ -6168,21 +6450,21 @@ var ListItem = ({ name, icon, active = false }) => {
 
 // src/components/Modal/Modal.tsx
 import React63 from "react";
-import castArray from "lodash/castArray";
-import omit9 from "lodash/omit";
-import { Overlay as Overlay2, useModalOverlay as useModalOverlay2 } from "@react-aria/overlays";
 import { useDialog as useDialog2 } from "@react-aria/dialog";
 import { FocusScope as FocusScope3 } from "@react-aria/focus";
+import { Overlay as Overlay2, useModalOverlay as useModalOverlay2 } from "@react-aria/overlays";
 import { useId as useId2 } from "@react-aria/utils";
 import { useOverlayTriggerState as useOverlayTriggerState4 } from "@react-stately/overlays";
+import castArray from "lodash/castArray";
+import omit9 from "lodash/omit";
 
 // src/components/Tabs/Tabs.tsx
-import React62, { useRef as useRef6, useState as useState7, useEffect as useEffect5, useLayoutEffect as useLayoutEffect2 } from "react";
-import kebabCase from "lodash/kebabCase";
+import React62, { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState7 } from "react";
 import isNumber4 from "lodash/isNumber";
-var import_warningSign3 = __toESM(require_warningSign());
+import kebabCase from "lodash/kebabCase";
 var import_chevronLeft2 = __toESM(require_chevronLeft());
 var import_chevronRight2 = __toESM(require_chevronRight());
+var import_warningSign3 = __toESM(require_warningSign());
 var isTabComponent = (c) => {
   return React62.isValidElement(c) && (c.type === Tab || c.type === ModalTab);
 };
@@ -6266,14 +6548,14 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         tabIndex: disabled ? void 0 : 0
       }, rest), /* @__PURE__ */ React62.createElement(Typography2, {
         htmlTag: "div",
-        variant: "body-small",
+        variant: "small",
         color: selected ? "primary-80" : disabled ? "grey-20" : "current",
         className: tw("inline-flex items-center gap-3")
       }, /* @__PURE__ */ React62.createElement("span", {
         className: tw("whitespace-nowrap")
       }, title), isNumber4(badge) && /* @__PURE__ */ React62.createElement(Typography2, {
         htmlTag: "span",
-        variant: "body-small",
+        variant: "small",
         color: selected ? "primary-80" : "grey-5",
         className: "leading-none"
       }, /* @__PURE__ */ React62.createElement(TabBadge, {
@@ -6439,6 +6721,7 @@ var Modal2 = ({
   title,
   open,
   subtitle,
+  headerImage,
   onClose,
   children,
   primaryAction,
@@ -6466,15 +6749,17 @@ var Modal2 = ({
   }, /* @__PURE__ */ React63.createElement(Modal.Dialog, __spreadValues(__spreadValues({
     ref,
     size
-  }, modalProps), dialogProps), /* @__PURE__ */ React63.createElement(Modal.Header, {
-    className: tw({ "pb-3": isComponentType(children, ModalTabs) })
-  }, /* @__PURE__ */ React63.createElement(Modal.TitleContainer, null, /* @__PURE__ */ React63.createElement(Modal.Title, {
-    id: labelledBy
-  }, title), subtitle && /* @__PURE__ */ React63.createElement(Modal.Subtitle, null, subtitle)), /* @__PURE__ */ React63.createElement(IconButton, {
+  }, modalProps), dialogProps), /* @__PURE__ */ React63.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ React63.createElement(IconButton, {
     "aria-label": "Close",
     icon: import_cross5.default,
     onClick: onClose
-  })), isComponentType(children, ModalTabs) ? React63.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ React63.createElement(Modal.Body, {
+  })), headerImage !== void 0 && /* @__PURE__ */ React63.createElement(Modal.HeaderImage, {
+    backgroundImage: headerImage
+  }), /* @__PURE__ */ React63.createElement(Modal.Header, {
+    className: tw({ "pb-3": isComponentType(children, ModalTabs) })
+  }, /* @__PURE__ */ React63.createElement(Modal.TitleContainer, null, /* @__PURE__ */ React63.createElement(Modal.Title, {
+    id: labelledBy
+  }, title), subtitle && /* @__PURE__ */ React63.createElement(Modal.Subtitle, null, subtitle))), isComponentType(children, ModalTabs) ? React63.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ React63.createElement(Modal.Body, {
     id: describedBy,
     tabIndex: 0,
     noFooter: !(secondaryActions || primaryAction)
@@ -6499,15 +6784,15 @@ var ModalTabs = createTabsComponent(
 );
 
 // src/components/MultiInput/MultiInput.tsx
+import React65, { useEffect as useEffect6, useRef as useRef7, useState as useState8 } from "react";
 import castArray2 from "lodash/castArray";
 import identity from "lodash/identity";
-import uniqueId4 from "lodash/uniqueId";
 import omit10 from "lodash/omit";
-import React65, { useEffect as useEffect6, useRef as useRef7, useState as useState8 } from "react";
+import uniqueId4 from "lodash/uniqueId";
 
 // src/components/MultiInput/InputChip.tsx
-var import_smallCross = __toESM(require_smallCross());
 import React64 from "react";
+var import_smallCross = __toESM(require_smallCross());
 var InputChip = React64.forwardRef(
   (_a, ref) => {
     var _b = _a, { invalid = false, disabled, readOnly, className, onClick: _onClick, children } = _b, props = __objRest(_b, ["invalid", "disabled", "readOnly", "className", "onClick", "children"]);
@@ -6527,7 +6812,7 @@ var InputChip = React64.forwardRef(
       }),
       onClick
     }, props), /* @__PURE__ */ React64.createElement(Typography2, {
-      variant: "body-small",
+      variant: "small",
       color: invalid ? "error-80" : disabled ? "grey-40" : "grey-70"
     }, children), !readOnly && /* @__PURE__ */ React64.createElement("div", null, /* @__PURE__ */ React64.createElement(Icon, {
       icon: import_smallCross.default,
@@ -6601,6 +6886,7 @@ var MultiInputBase = (_a) => {
       case "Enter":
       case " ": {
         if (keyCodes.includes(e.key) && inputRef.current) {
+          e.preventDefault();
           e.stopPropagation();
           const value2 = inputRef.current.value.trim();
           handleAddItem(value2);
@@ -6620,6 +6906,7 @@ var MultiInputBase = (_a) => {
   };
   const handleKeyUp = (e) => {
     if (keyCodes.includes(e.key)) {
+      e.preventDefault();
       e.stopPropagation();
     }
   };
@@ -6693,6 +6980,7 @@ var MultiInputBase = (_a) => {
     placeholder: !inline || (items == null ? void 0 : items.length) === 0 ? placeholder : "",
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
+    onKeyPress: handleKeyUp,
     onPaste: handlePaste,
     onFocus: handleFocus,
     onBlur: handleBlur,
@@ -6742,14 +7030,14 @@ MultiInput.Skeleton = MultiInputSkeleton;
 MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
 
 // src/components/MultiSelect/MultiSelect.tsx
+import React66, { useRef as useRef8, useState as useState9 } from "react";
+import { useOverlayPosition as useOverlayPosition5 } from "@react-aria/overlays";
 import { useCombobox as useCombobox2, useMultipleSelection } from "downshift";
 import isNil from "lodash/isNil";
 import omit11 from "lodash/omit";
 import omitBy from "lodash/omitBy";
 import uniqueId5 from "lodash/uniqueId";
 import { matchSorter as matchSorter2 } from "match-sorter";
-import React66, { useRef as useRef8, useState as useState9 } from "react";
-import { useOverlayPosition as useOverlayPosition5 } from "@react-aria/overlays";
 var MultiSelectBase = (_a) => {
   var _b = _a, {
     id,
@@ -6955,17 +7243,31 @@ MultiSelect.Skeleton.displayName = "MultiSelect.Skeleton";
 
 // src/components/NativeSelect/NativeSelect.tsx
 import React67, { useRef as useRef9 } from "react";
-import uniqueId6 from "lodash/uniqueId";
 import omit12 from "lodash/omit";
+import uniqueId6 from "lodash/uniqueId";
 var import_caretDown = __toESM(require_caretDown());
 var NativeSelectBase = React67.forwardRef(
   (_a, ref) => {
-    var _b = _a, { children, disabled = false, required = false, valid = true, readOnly = false, emptyDefault } = _b, props = __objRest(_b, ["children", "disabled", "required", "valid", "readOnly", "emptyDefault"]);
+    var _b = _a, { children, disabled = false, required = false, valid = true, readOnly = false } = _b, props = __objRest(_b, ["children", "disabled", "required", "valid", "readOnly"]);
+    const placeholderValue = uniqueId6("default_value_for_placeholder");
+    const defaultValue = props.defaultValue ? props.defaultValue : props.placeholder ? placeholderValue : void 0;
+    const handleBlur = (event) => {
+      var _a2, _b2;
+      if (event.target.value === placeholderValue) {
+        (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, __spreadProps(__spreadValues({}, event), {
+          target: __spreadProps(__spreadValues({}, event.target), {
+            value: ""
+          })
+        }));
+      } else {
+        (_b2 = props.onBlur) == null ? void 0 : _b2.call(props, event);
+      }
+    };
     return /* @__PURE__ */ React67.createElement("span", {
       className: tw("relative block")
     }, !readOnly && /* @__PURE__ */ React67.createElement("span", {
       className: tw(
-        "absolute right-0 inset-y-0 mr-4 text-grey-40 flex ml-3 pointer-events-none typography-body-default-medium mt-4"
+        "absolute right-0 inset-y-0 mr-4 text-grey-40 flex ml-3 pointer-events-none typography-default-strong mt-4"
       )
     }, /* @__PURE__ */ React67.createElement(Icon, {
       icon: import_caretDown.default,
@@ -6975,9 +7277,11 @@ var NativeSelectBase = React67.forwardRef(
       disabled: disabled || readOnly,
       required
     }, props), {
+      defaultValue,
+      onBlur: handleBlur,
       className: classNames(
         tw(
-          "block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-body-small text-grey-70  placeholder:text-grey-40 focus:outline-none",
+          "block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-small text-grey-70  placeholder:text-grey-40 focus:outline-none",
           {
             "px-3 py-3 disabled:border-grey-20 disabled:bg-grey-5 disabled:text-grey-40": !readOnly,
             "px-0 py-3 border-none": readOnly,
@@ -6987,10 +7291,10 @@ var NativeSelectBase = React67.forwardRef(
         ),
         props.className
       )
-    }), emptyDefault && /* @__PURE__ */ React67.createElement("option", {
-      value: "",
-      className: tw("hidden")
-    }), children));
+    }), props.placeholder && /* @__PURE__ */ React67.createElement("option", {
+      value: placeholderValue,
+      disabled: true
+    }, props.placeholder), children));
   }
 );
 NativeSelectBase.Skeleton = () => /* @__PURE__ */ React67.createElement(Skeleton, {
@@ -7016,6 +7320,7 @@ var NativeSelect = React67.forwardRef(
       "data-testid": dataTestId,
       disabled: props.disabled,
       required: props.required,
+      "aria-required": props.required,
       valid: props.valid,
       readOnly
     })));
@@ -7084,16 +7389,17 @@ var PageHeader = ({
 
 // src/components/Pagination/Pagination.tsx
 import React70 from "react";
+import clamp from "lodash/clamp";
 
 // src/components/Select/Select.tsx
 import React69, { useRef as useRef10, useState as useState10 } from "react";
-import isNil2 from "lodash/isNil";
-import isArray from "lodash/isArray";
+import { useOverlayPosition as useOverlayPosition6 } from "@react-aria/overlays";
+import { useSelect } from "downshift";
 import defaults from "lodash/defaults";
-import uniqueId7 from "lodash/uniqueId";
+import isArray from "lodash/isArray";
+import isNil2 from "lodash/isNil";
 import omit14 from "lodash/omit";
-import { useSelect } from "downshift";
-import { useOverlayPosition as useOverlayPosition6 } from "@react-aria/overlays";
+import uniqueId7 from "lodash/uniqueId";
 var hasIconProperty = (val) => {
   var _a;
   return typeof val === "string" || ((_a = val == null ? void 0 : val.icon) == null ? void 0 : _a.body) !== void 0;
@@ -7317,11 +7623,10 @@ var SelectSkeleton = () => /* @__PURE__ */ React69.createElement(LabelControl.Sk
 Select2.Skeleton = SelectSkeleton;
 
 // src/components/Pagination/Pagination.tsx
+var import_chevronBackward = __toESM(require_chevronBackward());
+var import_chevronForward = __toESM(require_chevronForward());
 var import_chevronLeft3 = __toESM(require_chevronLeft());
 var import_chevronRight3 = __toESM(require_chevronRight());
-var import_chevronForward = __toESM(require_chevronForward());
-var import_chevronBackward = __toESM(require_chevronBackward());
-import clamp from "lodash/clamp";
 var Pagination = ({
   currentPage,
   totalPages,
@@ -7432,14 +7737,14 @@ var Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ React71.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "h1",
-    variant: "body-small-medium"
+    variant: "small-strong"
   }), children);
 };
 var Body = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ React71.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "div",
-    variant: "caption-default",
+    variant: "caption",
     className: classNames(tw("px-5 overflow-y-auto"), className)
   }), children);
 };
@@ -7543,9 +7848,9 @@ ProgressBar.Labels = (_a) => {
   return /* @__PURE__ */ React73.createElement("div", {
     className: classNames(tw("flex flex-row"), className)
   }, /* @__PURE__ */ React73.createElement("span", __spreadProps(__spreadValues({}, rest), {
-    className: tw("grow text-grey-70 typography-caption-default")
+    className: tw("grow text-grey-70 typography-caption")
   }), startLabel), /* @__PURE__ */ React73.createElement("span", __spreadProps(__spreadValues({}, rest), {
-    className: tw("grow text-grey-70 typography-caption-default text-right")
+    className: tw("grow text-grey-70 typography-caption text-right")
   }), endLabel));
 };
 
@@ -7587,35 +7892,10 @@ ProgressBar2.Skeleton = () => /* @__PURE__ */ React74.createElement(Skeleton, {
 import React75 from "react";
 var RadioButton2 = React75.forwardRef(
   (_a, ref) => {
-    var _b = _a, {
-      name,
-      id,
-      checked: _checked,
-      defaultChecked,
-      onChange,
-      readOnly = false,
-      disabled = false,
-      caption,
-      children,
-      "aria-label": ariaLabel
-    } = _b, props = __objRest(_b, [
-      "name",
-      "id",
-      "checked",
-      "defaultChecked",
-      "onChange",
-      "readOnly",
-      "disabled",
-      "caption",
-      "children",
-      "aria-label"
-    ]);
+    var _b = _a, { name, id, readOnly = false, disabled = false, caption, children, "aria-label": ariaLabel } = _b, props = __objRest(_b, ["name", "id", "readOnly", "disabled", "caption", "children", "aria-label"]);
     var _a2;
-    const [checked, setChecked] = React75.useState((_a2 = _checked != null ? _checked : defaultChecked) != null ? _a2 : false);
-    if (_checked !== void 0 && checked !== _checked) {
-      setChecked(_checked);
-    }
-    return !readOnly || checked ? /* @__PURE__ */ React75.createElement(ControlLabel, {
+    const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
+    return !readOnly || isChecked ? /* @__PURE__ */ React75.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -7628,13 +7908,8 @@ var RadioButton2 = React75.forwardRef(
       ref,
       name
     }, props), {
-      checked,
       readOnly,
-      disabled,
-      onChange: (e) => {
-        setChecked(e.target.checked);
-        onChange == null ? void 0 : onChange(e);
-      }
+      disabled
     }))) : null;
   }
 );
@@ -7729,6 +8004,7 @@ RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
 
 // src/components/Section/Section.tsx
 import React78 from "react";
+import castArray4 from "lodash/castArray";
 
 // src/common/Section/Section.tsx
 import React77 from "react";
@@ -7780,7 +8056,6 @@ Section2.Body = (_a) => {
 };
 
 // src/components/Section/Section.tsx
-import castArray4 from "lodash/castArray";
 var Section3 = ({ title, subtitle, actions, children }) => /* @__PURE__ */ React78.createElement(Section2, null, title && /* @__PURE__ */ React78.createElement(React78.Fragment, null, /* @__PURE__ */ React78.createElement(Section2.Header, null, /* @__PURE__ */ React78.createElement(Section2.TitleContainer, null, /* @__PURE__ */ React78.createElement(Section2.Title, null, title), subtitle && /* @__PURE__ */ React78.createElement(Section2.Subtitle, null, subtitle)), /* @__PURE__ */ React78.createElement(Section2.Actions, null, actions && castArray4(actions).filter(Boolean).map((_a) => {
   var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
   return /* @__PURE__ */ React78.createElement(SecondaryButton, __spreadValues({
@@ -7872,45 +8147,59 @@ var getCommonClassNames = (dense, selected) => tw(
   {
     "py-4 px-5": !dense,
     "py-2 px-4": dense,
-    "typography-button-large": !dense,
-    "typography-button-small": dense,
+    "typography-default-strong": !dense,
+    "typography-small-strong": dense,
     "text-grey-50": !selected
   }
 );
 
 // src/components/Switch/Switch.tsx
+import React81 from "react";
+
+// src/common/Switch/Switch.tsx
 import React80 from "react";
 var Switch = React80.forwardRef(
   (_a, ref) => {
-    var _b = _a, {
+    var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
+    return /* @__PURE__ */ React80.createElement("span", {
+      className: tw("relative inline-flex justify-center items-center self-center group")
+    }, /* @__PURE__ */ React80.createElement("input", __spreadProps(__spreadValues({
       id,
-      name,
-      caption,
-      checked: _checked,
-      defaultChecked,
-      onChange,
-      readOnly = false,
-      disabled = false,
-      children,
-      "aria-label": ariaLabel
-    } = _b, props = __objRest(_b, [
-      "id",
-      "name",
-      "caption",
-      "checked",
-      "defaultChecked",
-      "onChange",
-      "readOnly",
-      "disabled",
-      "children",
-      "aria-label"
-    ]);
+      ref,
+      type: "checkbox",
+      name
+    }, props), {
+      className: tw("opacity-0 peer/switch w-0 h-0"),
+      readOnly,
+      disabled
+    })), /* @__PURE__ */ React80.createElement("span", {
+      className: tw(
+        "rounded-full inline-block w-[34px] h-[20px] transition duration-300",
+        "peer-focus/switch:border border-info-70 bg-grey-20",
+        {
+          "group-hover:bg-grey-30 peer-checked/switch:bg-navyBlue-100": !disabled,
+          "bg-grey-5 peer-checked/switch:opacity-40": disabled
+        }
+      )
+    }), /* @__PURE__ */ React80.createElement("span", {
+      className: tw(
+        "rounded-full absolute inline-block transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
+        "bg-white peer-disabled/switch:bg-grey-0 left-2 peer-checked/switch:left-1",
+        {
+          "shadow-4dp": !disabled
+        }
+      )
+    }));
+  }
+);
+
+// src/components/Switch/Switch.tsx
+var Switch2 = React81.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { id, name, caption, readOnly = false, disabled = false, children, "aria-label": ariaLabel } = _b, props = __objRest(_b, ["id", "name", "caption", "readOnly", "disabled", "children", "aria-label"]);
     var _a2;
-    const [checked, setChecked] = React80.useState((_a2 = _checked != null ? _checked : defaultChecked) != null ? _a2 : false);
-    if (_checked !== void 0 && checked !== _checked) {
-      setChecked(_checked);
-    }
-    return !readOnly || checked ? /* @__PURE__ */ React80.createElement(ControlLabel, {
+    const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
+    return !readOnly || isChecked ? /* @__PURE__ */ React81.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -7918,67 +8207,29 @@ var Switch = React80.forwardRef(
       readOnly,
       disabled,
       style: { gap: "0 8px" }
-    }, !readOnly && /* @__PURE__ */ React80.createElement(Box, {
-      component: "span",
-      display: "inline-flex",
-      justifyContent: "center",
-      alignItems: "center",
-      className: classNames(
-        tw("relative flex self-center group", {
-          "text-grey-30": disabled,
-          "text-grey-100 cursor-pointer": !disabled
-        })
-      )
-    }, /* @__PURE__ */ React80.createElement("input", __spreadProps(__spreadValues({
+    }, !readOnly && /* @__PURE__ */ React81.createElement(Switch, __spreadProps(__spreadValues({
       id,
       ref,
-      type: "checkbox",
       name
     }, props), {
-      checked,
-      onChange: (e) => {
-        setChecked(e.target.checked);
-        onChange == null ? void 0 : onChange(e);
-      },
-      className: tw("appearance-none peer"),
       readOnly,
       disabled
-    })), /* @__PURE__ */ React80.createElement("span", {
-      className: tw(
-        "rounded-full inline-block w-[34px] h-[20px] transition duration-300 peer-focus:border border-info-70",
-        {
-          "bg-navyBlue-100": checked,
-          "bg-grey-20 group-hover:bg-grey-30": !disabled && !checked,
-          "bg-grey-5": disabled && !checked,
-          "opacity-40": disabled && checked
-        }
-      )
-    }), /* @__PURE__ */ React80.createElement("span", {
-      style: {
-        right: checked ? "20px" : void 0,
-        left: checked ? void 0 : "4px"
-      },
-      className: tw("rounded-full absolute inline-block transition duration-300 h-4 w-4", {
-        "transform translate-x-5": checked,
-        "bg-grey-0": disabled,
-        "bg-white shadow-4dp": !disabled
-      })
     }))) : null;
   }
 );
-var SwitchSkeleton = () => /* @__PURE__ */ React80.createElement("div", {
+var SwitchSkeleton = () => /* @__PURE__ */ React81.createElement("div", {
   className: tw("flex gap-3")
-}, /* @__PURE__ */ React80.createElement(Skeleton, {
+}, /* @__PURE__ */ React81.createElement(Skeleton, {
   height: 20,
   width: 35
-}), /* @__PURE__ */ React80.createElement(Skeleton, {
+}), /* @__PURE__ */ React81.createElement(Skeleton, {
   height: 20,
   width: 150
 }));
-Switch.Skeleton = SwitchSkeleton;
+Switch2.Skeleton = SwitchSkeleton;
 
 // src/components/SwitchGroup/SwitchGroup.tsx
-import React81, { useState as useState11 } from "react";
+import React82, { useState as useState11 } from "react";
 import uniqueId9 from "lodash/uniqueId";
 var SwitchGroup = (_a) => {
   var _b = _a, {
@@ -8010,19 +8261,19 @@ var SwitchGroup = (_a) => {
     setSelectedItems(updated);
     onChange == null ? void 0 : onChange(updated);
   };
-  return /* @__PURE__ */ React81.createElement(LabelControl, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React82.createElement(LabelControl, __spreadValues(__spreadValues({
     fieldset: true
-  }, labelControlProps), errorProps), /* @__PURE__ */ React81.createElement(InputGroup, {
+  }, labelControlProps), errorProps), /* @__PURE__ */ React82.createElement(InputGroup, {
     cols
-  }, React81.Children.map(children, (c) => {
+  }, React82.Children.map(children, (c) => {
     var _a3, _b2, _c, _d;
-    if (!isComponentType(c, Switch)) {
+    if (!isComponentType(c, Switch2)) {
       return null;
     }
     const str = (_a3 = c.props.value) == null ? void 0 : _a3.toString();
     const defaultChecked = defaultValue === void 0 ? void 0 : str !== void 0 && defaultValue.includes(str);
     const checked = value === void 0 ? void 0 : str !== void 0 && value.includes(str);
-    return React81.cloneElement(c, {
+    return React82.cloneElement(c, {
       defaultChecked: (_b2 = c.props.defaultChecked) != null ? _b2 : defaultChecked,
       checked: (_c = c.props.checked) != null ? _c : checked,
       onChange: (_d = c.props.onChange) != null ? _d : handleChange,
@@ -8032,35 +8283,35 @@ var SwitchGroup = (_a) => {
   })));
 };
 var SwitchGroupSkeleton = ({ options = 2 }) => {
-  return /* @__PURE__ */ React81.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React81.createElement("div", {
+  return /* @__PURE__ */ React82.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React82.createElement("div", {
     className: tw("flex flex-wrap flex-col gap-2")
-  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React81.createElement(Switch.Skeleton, {
+  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React82.createElement(Switch2.Skeleton, {
     key
   }))));
 };
 SwitchGroup.Skeleton = SwitchGroupSkeleton;
 
 // src/components/TagLabel/TagLabel.tsx
-import React82 from "react";
+import React83 from "react";
 var TagLabel = (_a) => {
   var _b = _a, { title, dense = false } = _b, rest = __objRest(_b, ["title", "dense"]);
-  return /* @__PURE__ */ React82.createElement("span", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React83.createElement("span", __spreadProps(__spreadValues({}, rest), {
     className: tw("rounded-full text-white bg-primary-70", {
-      "py-2 px-4 typography-caption-default": !dense,
+      "py-2 px-4 typography-caption": !dense,
       "py-2 px-3 typography-caption-small": dense
     })
   }), title);
 };
 
 // src/components/Textarea/Textarea.tsx
-import React83, { useRef as useRef11, useState as useState12 } from "react";
-import uniqueId10 from "lodash/uniqueId";
-import toString2 from "lodash/toString";
+import React84, { useRef as useRef11, useState as useState12 } from "react";
 import omit16 from "lodash/omit";
-var TextareaBase = React83.forwardRef(
+import toString2 from "lodash/toString";
+import uniqueId10 from "lodash/uniqueId";
+var TextareaBase = React84.forwardRef(
   (_a, ref) => {
     var _b = _a, { readOnly = false, valid = true } = _b, props = __objRest(_b, ["readOnly", "valid"]);
-    return /* @__PURE__ */ React83.createElement("textarea", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React84.createElement("textarea", __spreadProps(__spreadValues({
       ref
     }, props), {
       readOnly,
@@ -8068,10 +8319,10 @@ var TextareaBase = React83.forwardRef(
     }));
   }
 );
-TextareaBase.Skeleton = () => /* @__PURE__ */ React83.createElement(Skeleton, {
+TextareaBase.Skeleton = () => /* @__PURE__ */ React84.createElement(Skeleton, {
   height: 58
 });
-var Textarea = React83.forwardRef((props, ref) => {
+var Textarea = React84.forwardRef((props, ref) => {
   var _a, _b, _c;
   const [value, setValue] = useState12((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
   const id = useRef11((_c = props.id) != null ? _c : `textarea-${uniqueId10()}`);
@@ -8079,12 +8330,12 @@ var Textarea = React83.forwardRef((props, ref) => {
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
   const baseProps = omit16(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ React83.createElement(LabelControl, __spreadValues({
+  return /* @__PURE__ */ React84.createElement(LabelControl, __spreadValues({
     id: `${id.current}-label`,
     htmlFor: id.current,
     messageId: errorMessageId,
     length: value !== void 0 ? toString2(value).length : void 0
-  }, labelControlProps), /* @__PURE__ */ React83.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
+  }, labelControlProps), /* @__PURE__ */ React84.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
     ref
   }, baseProps), errorProps), {
     id: id.current,
@@ -8100,47 +8351,47 @@ var Textarea = React83.forwardRef((props, ref) => {
     valid: props.valid
   })));
 });
-var TextAreaSkeleton = () => /* @__PURE__ */ React83.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React83.createElement(TextareaBase.Skeleton, null));
+var TextAreaSkeleton = () => /* @__PURE__ */ React84.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React84.createElement(TextareaBase.Skeleton, null));
 Textarea.Skeleton = TextAreaSkeleton;
 
 // src/components/Timeline/Timeline.tsx
-import React85 from "react";
+import React86 from "react";
 
 // src/common/Timeline/Timeline.tsx
-import React84 from "react";
+import React85 from "react";
 var Timeline = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React84.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React85.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("grid grid-cols-[16px_1fr] gap-x-4"), className)
   }));
 };
 var Content = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React84.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React85.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("pb-6"), className)
   }));
 };
 var Separator2 = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React84.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React85.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex items-center justify-center h-5 w-5"), className)
   }));
 };
 var LineContainer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React84.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React85.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex justify-center py-1"), className)
   }));
 };
 var Line = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React84.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React85.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("w-1 bg-grey-5 h-full justify-self-center"), className)
   }));
 };
 var Dot = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React84.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React85.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("bg-grey-30 h-[6px] w-[6px] rounded"), className)
   }));
 };
@@ -8151,64 +8402,64 @@ Timeline.LineContainer = LineContainer;
 Timeline.Content = Content;
 
 // src/components/Timeline/Timeline.tsx
+var import_error4 = __toESM(require_error());
 var import_time = __toESM(require_time());
 var import_warningSign4 = __toESM(require_warningSign());
-var import_error4 = __toESM(require_error());
 var TimelineItem = () => null;
-var Timeline2 = ({ children }) => /* @__PURE__ */ React85.createElement("div", null, React85.Children.map(children, (item) => {
+var Timeline2 = ({ children }) => /* @__PURE__ */ React86.createElement("div", null, React86.Children.map(children, (item) => {
   if (!isComponentType(item, TimelineItem)) {
     throw new Error("<Timeline> can only have <Timeline.Item> components as children");
   } else {
     const { props, key } = item;
-    return /* @__PURE__ */ React85.createElement(Timeline, {
+    return /* @__PURE__ */ React86.createElement(Timeline, {
       key: key != null ? key : props.title
-    }, /* @__PURE__ */ React85.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ React85.createElement(Icon, {
+    }, /* @__PURE__ */ React86.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ React86.createElement(Icon, {
       icon: import_error4.default,
       color: "error-30"
-    }) : props.variant === "warning" ? /* @__PURE__ */ React85.createElement(Icon, {
+    }) : props.variant === "warning" ? /* @__PURE__ */ React86.createElement(Icon, {
       icon: import_warningSign4.default,
       color: "warning-30"
-    }) : props.variant === "info" ? /* @__PURE__ */ React85.createElement(Icon, {
+    }) : props.variant === "info" ? /* @__PURE__ */ React86.createElement(Icon, {
       icon: import_time.default,
       color: "info-30"
-    }) : /* @__PURE__ */ React85.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ React85.createElement(Typography2.Caption, {
-      fontWeight: 600
-    }, props.title), /* @__PURE__ */ React85.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React85.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ React85.createElement(Timeline.Content, null, /* @__PURE__ */ React85.createElement(Typography2, null, props.children)));
+    }) : /* @__PURE__ */ React86.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ React86.createElement(Typography2.Caption, {
+      color: "grey-50"
+    }, props.title), /* @__PURE__ */ React86.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React86.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ React86.createElement(Timeline.Content, null, /* @__PURE__ */ React86.createElement(Typography2, null, props.children)));
   }
 }));
-var TimelineItemSkeleton = () => /* @__PURE__ */ React85.createElement(Timeline, null, /* @__PURE__ */ React85.createElement(Timeline.Separator, null, /* @__PURE__ */ React85.createElement(Skeleton, {
+var TimelineItemSkeleton = () => /* @__PURE__ */ React86.createElement(Timeline, null, /* @__PURE__ */ React86.createElement(Timeline.Separator, null, /* @__PURE__ */ React86.createElement(Skeleton, {
   width: 6,
   height: 6,
   rounded: true
-})), /* @__PURE__ */ React85.createElement(Skeleton, {
+})), /* @__PURE__ */ React86.createElement(Skeleton, {
   height: 12,
   width: 120
-}), /* @__PURE__ */ React85.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React85.createElement(Skeleton, {
+}), /* @__PURE__ */ React86.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React86.createElement(Skeleton, {
   width: 2
-})), /* @__PURE__ */ React85.createElement(Timeline.Content, null, /* @__PURE__ */ React85.createElement(Box, {
+})), /* @__PURE__ */ React86.createElement(Timeline.Content, null, /* @__PURE__ */ React86.createElement(Box, {
   display: "flex",
   flexDirection: "column",
   gap: "3"
-}, /* @__PURE__ */ React85.createElement(Skeleton, {
+}, /* @__PURE__ */ React86.createElement(Skeleton, {
   height: 32,
   width: "100%"
-}), /* @__PURE__ */ React85.createElement(Skeleton, {
+}), /* @__PURE__ */ React86.createElement(Skeleton, {
   height: 32,
   width: "73%"
-}), /* @__PURE__ */ React85.createElement(Skeleton, {
+}), /* @__PURE__ */ React86.createElement(Skeleton, {
   height: 32,
   width: "80%"
 }))));
-var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ React85.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ React85.createElement(TimelineItemSkeleton, {
+var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ React86.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ React86.createElement(TimelineItemSkeleton, {
   key
 })));
 Timeline2.Item = TimelineItem;
 Timeline2.Skeleton = TimelineSkeleton;
 
 // src/utils/table/useTableSelect.ts
-import React86 from "react";
+import React87 from "react";
 var useTableSelect = (data, { key }) => {
-  const [selected, setSelected] = React86.useState([]);
+  const [selected, setSelected] = React87.useState([]);
   const allSelected = selected.length === data.length;
   const isSelected = (dot) => selected.includes(dot[key]);
   const selectAll = () => setSelected(data.map((dot) => dot[key]));
@@ -8233,7 +8484,7 @@ var useTableSelect = (data, { key }) => {
 };
 
 // src/components/Pagination/usePagination.tsx
-import { useState as useState13, useEffect as useEffect7 } from "react";
+import { useEffect as useEffect7, useState as useState13 } from "react";
 var initialState = {
   currentPage: 1,
   pageSize: 10
@@ -8472,7 +8723,7 @@ export {
   SelectItem,
   Skeleton,
   StatusChip,
-  Switch,
+  Switch2 as Switch,
   SwitchGroup,
   TabContainer,
   TabItem,