@aivenio/aquarium 1.2.0 → 1.3.0

package/dist/system.cjs

@@ -150,6 +150,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",
@@ -159,7 +289,6 @@ var require_tokens = __commonJS({
                   fontWeight: 400,
                   fontStyle: "normal",
                   lineHeight: 1.2,
-                  letterSpacing: 0,
                   textTransform: "none"
                 },
                 fontPostScriptName: null
@@ -581,6 +710,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",
@@ -1039,12 +1298,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,
@@ -1087,12 +1346,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,
@@ -1231,12 +1490,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,
@@ -1247,12 +1506,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,
@@ -1367,7 +1626,7 @@ __export(system_exports, {
   SelectItem: () => SelectItem,
   Skeleton: () => Skeleton,
   StatusChip: () => StatusChip,
-  Switch: () => Switch,
+  Switch: () => Switch2,
   SwitchGroup: () => SwitchGroup,
   TabContainer: () => TabContainer,
   TabItem: () => TabItem,
@@ -1497,7 +1756,7 @@ __export(components_exports, {
   SelectItem: () => SelectItem,
   Skeleton: () => Skeleton,
   StatusChip: () => StatusChip,
-  Switch: () => Switch,
+  Switch: () => Switch2,
   SwitchGroup: () => SwitchGroup,
   TabContainer: () => TabContainer,
   TabItem: () => TabItem,
@@ -1528,6 +1787,10 @@ __export(components_exports, {
 // src/common/Select/Select.tsx
 var import_react3 = __toESM(require("react"));
 
+// src/components/Icon/Icon.tsx
+var import_react = __toESM(require("react"));
+var import_react2 = require("@iconify/react");
+
 // src/utils/tailwind.ts
 var import_classnames = __toESM(require("classnames"));
 function cleanClassNames(classNames4) {
@@ -1554,15 +1817,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
-var import_react = __toESM(require("react"));
-var import_react2 = require("@iconify/react");
 var Icon = import_react.default.forwardRef((_a, ref) => {
   var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
   const classes = classNames(className, color && `text-${color}`);
@@ -1583,6 +1838,10 @@ var InlineIcon = import_react.default.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) {
@@ -1603,7 +1862,7 @@ var InputContainer = import_react3.default.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",
@@ -1625,7 +1884,7 @@ var Input = import_react3.default.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,
@@ -1670,7 +1929,7 @@ var Group = import_react3.default.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
       }
@@ -1741,113 +2000,29 @@ var Select = {
   Toggle
 };
 
-// src/components/Badge/Badge.tsx
-var import_react5 = __toESM(require("react"));
+// src/components/Alert/Alert.tsx
+var import_react14 = __toESM(require("react"));
 var import_omit = __toESM(require("lodash/omit"));
 
-// src/components/Skeleton/Skeleton.tsx
-var import_react4 = __toESM(require("react"));
-var import_isNumber = __toESM(require("lodash/isNumber"));
-var Skeleton = ({
-  width,
-  height,
-  display = "block",
-  className,
-  animate = true,
-  rounded = false
-}) => {
-  const styles = {
-    width: (0, import_isNumber.default)(width) ? `${width}px` : width,
-    height: (0, import_isNumber.default)(height) ? `${height}px` : height
-  };
-  return /* @__PURE__ */ import_react4.default.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__ */ import_react5.default.createElement("span", __spreadProps(__spreadValues({}, (0, import_omit.default)(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__ */ import_react5.default.createElement("span", {
-      className: classNames(
-        textClassname,
-        tw("inline-block", {
-          "text-white": !textClassname && kind === "filled",
-          "m-[1px]": kind === "filled"
-        })
-      )
-    }, valueStr));
-  };
-  Component.displayName = displayName;
-  Component.Skeleton = () => /* @__PURE__ */ import_react5.default.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
-var import_react16 = __toESM(require("react"));
-
 // src/common/Alert/Alert.tsx
-var import_react15 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 
 // src/components/Button/Button.tsx
-var import_react13 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 
 // src/components/Flexbox/Flexbox.tsx
-var import_react10 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/components/Tailwindify/Tailwindify.tsx
-var import_react9 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_get2 = __toESM(require("lodash/get"));
 var import_isUndefined4 = __toESM(require("lodash/isUndefined"));
 
 // src/utils/useStyle.ts
-var import_react8 = require("react");
+var import_react6 = require("react");
 var import_get = __toESM(require("lodash/get"));
-var import_isUndefined3 = __toESM(require("lodash/isUndefined"));
 var import_isPlainObject2 = __toESM(require("lodash/isPlainObject"));
-
-// src/components/Context/Context.tsx
-var import_react7 = __toESM(require("react"));
-var import_overlays = require("@react-aria/overlays");
-
-// src/utils/breakpoints.ts
-var import_isUndefined = __toESM(require("lodash/isUndefined"));
-var import_orderBy = __toESM(require("lodash/orderBy"));
-var import_isPlainObject = __toESM(require("lodash/isPlainObject"));
+var import_isUndefined3 = __toESM(require("lodash/isUndefined"));
 
 // tailwind.theme.json
 var tailwind_theme_default = {
@@ -2372,7 +2547,14 @@ var tailwind_theme_default = {
   }
 };
 
+// src/components/Context/Context.tsx
+var import_react5 = __toESM(require("react"));
+var import_overlays = require("@react-aria/overlays");
+
 // src/utils/breakpoints.ts
+var import_isPlainObject = __toESM(require("lodash/isPlainObject"));
+var import_isUndefined = __toESM(require("lodash/isUndefined"));
+var import_orderBy = __toESM(require("lodash/orderBy"));
 var { screens: allBreakpoints } = tailwind_theme_default;
 var SCREEN_TO_PX_MAPPING = getPxMapping(allBreakpoints);
 var BREAKPOINT_PRIORITY = (0, import_orderBy.default)(
@@ -2417,9 +2599,9 @@ function selectBreakpointValue(value, matches) {
 }
 
 // src/utils/useWindowSize.ts
-var import_react6 = require("react");
-var import_isUndefined2 = __toESM(require("lodash/isUndefined"));
+var import_react4 = require("react");
 var import_debounce = __toESM(require("lodash/debounce"));
+var import_isUndefined2 = __toESM(require("lodash/isUndefined"));
 function useWindowSize() {
   const getWindowSize = () => {
     if ((0, import_isUndefined2.default)(globalThis.window)) {
@@ -2430,8 +2612,8 @@ function useWindowSize() {
       height: globalThis.window.innerHeight
     };
   };
-  const [size, setWindowSize] = (0, import_react6.useState)(getWindowSize());
-  (0, import_react6.useEffect)(() => {
+  const [size, setWindowSize] = (0, import_react4.useState)(getWindowSize());
+  (0, import_react4.useEffect)(() => {
     function handleResize() {
       setWindowSize(getWindowSize());
     }
@@ -2447,18 +2629,18 @@ function useWindowSize() {
 // src/components/Context/Context.tsx
 var Context = ({ children }) => {
   const windowSize = useWindowSize();
-  const [breakpointMatches, setBreakpointMatches] = import_react7.default.useState(getMatches(windowSize));
-  import_react7.default.useEffect(() => {
+  const [breakpointMatches, setBreakpointMatches] = import_react5.default.useState(getMatches(windowSize));
+  import_react5.default.useEffect(() => {
     setBreakpointMatches(getMatches(windowSize));
   }, [windowSize]);
-  return /* @__PURE__ */ import_react7.default.createElement(DesignSystemContext.Provider, {
+  return /* @__PURE__ */ import_react5.default.createElement(DesignSystemContext.Provider, {
     value: { breakpointMatches }
-  }, /* @__PURE__ */ import_react7.default.createElement(import_overlays.ModalProvider, null, children));
+  }, /* @__PURE__ */ import_react5.default.createElement(import_overlays.ModalProvider, null, children));
 };
 var context = {
   breakpointMatches: getMatches(void 0)
 };
-var DesignSystemContext = import_react7.default.createContext(context);
+var DesignSystemContext = import_react5.default.createContext(context);
 
 // src/utils/useStyle.ts
 var THEME_MAPPING = {
@@ -2482,7 +2664,7 @@ function resolveTailwindThemeValue(key, val) {
   return val;
 }
 function useStyle(styles) {
-  const context2 = (0, import_react8.useContext)(DesignSystemContext);
+  const context2 = (0, import_react6.useContext)(DesignSystemContext);
   return Object.keys(styles).reduce((acc, key) => {
     const property = styles[key];
     const isStylesObject = (0, import_isPlainObject2.default)(property) && "value" in property;
@@ -2582,8 +2764,8 @@ function Tailwindify(Component) {
     const componentProps = __spreadProps(__spreadValues({}, otherProps), {
       style: finalStyle
     });
-    const childrenWithProps = import_react9.default.Children.map(children, (child, index) => {
-      if (!import_react9.default.isValidElement(child)) {
+    const childrenWithProps = import_react7.default.Children.map(children, (child, index) => {
+      if (!import_react7.default.isValidElement(child)) {
         return child;
       }
       const isLastChild = index === children.length - 1;
@@ -2604,9 +2786,9 @@ function Tailwindify(Component) {
       }
       const childStyle = (0, import_get2.default)(child, ["props", "style"], {});
       const newProps = __spreadProps(__spreadValues({}, childProps), { style: __spreadValues(__spreadValues({}, childStyle), additionalStyle) });
-      return import_react9.default.cloneElement(child, newProps);
+      return import_react7.default.cloneElement(child, newProps);
     });
-    return /* @__PURE__ */ import_react9.default.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ import_react7.default.createElement(Component, __spreadValues({
       className,
       children: childrenWithProps
     }, componentProps));
@@ -2642,7 +2824,7 @@ var Flexbox = Tailwindify(
       rowGap
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ import_react10.default.createElement(HtmlElement, {
+    return /* @__PURE__ */ import_react8.default.createElement(HtmlElement, {
       style: __spreadValues(__spreadValues({}, hookStyle), style),
       className
     }, children);
@@ -2650,13 +2832,13 @@ var Flexbox = Tailwindify(
 );
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react12 = __toESM(require("react"));
-var import_tooltip = require("@react-aria/tooltip");
+var import_react10 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
+var import_tooltip = require("@react-aria/tooltip");
 var import_utils = require("@react-aria/utils");
 
 // src/components/Tooltip/useTooltipTriggerState.ts
-var import_react11 = require("react");
+var import_react9 = require("react");
 var import_overlays2 = require("@react-stately/overlays");
 var TOOLTIP_DELAY = 1500;
 var TOOLTIP_COOLDOWN = 500;
@@ -2668,9 +2850,9 @@ var globalWarmedUp = false;
 function useTooltipTriggerState(props = {}) {
   const { delay = TOOLTIP_DELAY } = props;
   const { isOpen, open, close } = (0, import_overlays2.useOverlayTriggerState)(props);
-  const id = (0, import_react11.useMemo)(() => `${++tooltipId}`, []);
-  const closeTimeout = (0, import_react11.useRef)();
-  const isUnmounted = (0, import_react11.useRef)(false);
+  const id = (0, import_react9.useMemo)(() => `${++tooltipId}`, []);
+  const closeTimeout = (0, import_react9.useRef)();
+  const isUnmounted = (0, import_react9.useRef)(false);
   const ensureTooltipEntry = () => {
     tooltips[id] = hideTooltip;
   };
@@ -2747,7 +2929,7 @@ function useTooltipTriggerState(props = {}) {
       showTooltip();
     }
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     return () => {
       isUnmounted.current = true;
       if (closeTimeout.current) {
@@ -2776,8 +2958,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 = import_react12.default.useRef(null);
-  const overlayRef = import_react12.default.useRef(null);
+  const triggerRef = import_react10.default.useRef(null);
+  const overlayRef = import_react10.default.useRef(null);
   const state = useTooltipTriggerState(__spreadValues({ isDisabled, delay }, props));
   const { triggerProps, tooltipProps } = (0, import_tooltip.useTooltipTrigger)(props, state, triggerRef);
   const { overlayProps, arrowProps, placement } = (0, import_overlays3.useOverlayPosition)({
@@ -2813,7 +2995,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__ */ import_react12.default.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react10.default.createElement("div", __spreadProps(__spreadValues({
     className: tw(`${inline ? "inline-block" : "block"}`)
   }, triggerProps), {
     onClick: handleClick,
@@ -2822,25 +3004,25 @@ var Tooltip = (_a) => {
     onPointerDown: handlePointerDown,
     onPointerUp: handlePointerUp,
     ref: triggerRef
-  }), props.children, state.isOpen && /* @__PURE__ */ import_react12.default.createElement(TooltipWrapper, __spreadValues({
+  }), props.children, state.isOpen && /* @__PURE__ */ import_react10.default.createElement(TooltipWrapper, __spreadValues({
     ref: overlayRef,
     state,
     placement,
     arrowProps
   }, (0, import_utils.mergeProps)(tooltipProps, overlayProps)), content));
 };
-var TooltipWrapper = import_react12.default.forwardRef(
+var TooltipWrapper = import_react10.default.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { state, placement, arrowProps } = _b, props = __objRest(_b, ["state", "placement", "arrowProps"]);
     var _a2;
-    const ref = import_react12.default.useRef(null);
-    import_react12.default.useImperativeHandle(forwardedRef, () => ref.current);
+    const ref = import_react10.default.useRef(null);
+    import_react10.default.useImperativeHandle(forwardedRef, () => ref.current);
     const { tooltipProps } = (0, import_tooltip.useTooltip)(props, state);
     const arrowStyle = getArrowStyle(ref.current, placement, (_a2 = arrowProps.style) != null ? _a2 : {});
-    return /* @__PURE__ */ import_react12.default.createElement(import_overlays3.OverlayContainer, null, /* @__PURE__ */ import_react12.default.createElement("div", __spreadValues({
+    return /* @__PURE__ */ import_react10.default.createElement(import_overlays3.OverlayContainer, null, /* @__PURE__ */ import_react10.default.createElement("div", __spreadValues({
       ref,
-      className: tw("p-3 rounded-sm typography-caption-default max-w-[320px] bg-grey-90 text-white")
-    }, (0, import_utils.mergeProps)(props, tooltipProps)), props.children, /* @__PURE__ */ import_react12.default.createElement(Arrow, __spreadProps(__spreadValues({}, arrowProps), {
+      className: tw("p-3 rounded-sm typography-caption max-w-[320px] bg-grey-90 text-white")
+    }, (0, import_utils.mergeProps)(props, tooltipProps)), props.children, /* @__PURE__ */ import_react10.default.createElement(Arrow, __spreadProps(__spreadValues({}, arrowProps), {
       style: arrowStyle
     }))));
   }
@@ -2877,7 +3059,7 @@ var getArrowStyle = (element, position, { left, top }) => {
   return { left, top };
 };
 var Arrow = (props) => {
-  return /* @__PURE__ */ import_react12.default.createElement("div", __spreadValues({
+  return /* @__PURE__ */ import_react10.default.createElement("div", __spreadValues({
     className: tw("absolute w-3 h-3 bg-grey-90 rotate-45")
   }, props));
 };
@@ -2905,7 +3087,7 @@ var LoadingSpinner = ({
   size = "20px",
   kind = "primary"
 }) => {
-  return /* @__PURE__ */ import_react13.default.createElement(InlineIcon, {
+  return /* @__PURE__ */ import_react11.default.createElement(InlineIcon, {
     icon: import_loading.default,
     width: size,
     height: size,
@@ -2914,7 +3096,7 @@ var LoadingSpinner = ({
   });
 };
 var asButton = (Component, isDropdownButton) => {
-  return import_react13.default.forwardRef(
+  return import_react11.default.forwardRef(
     (_a, ref) => {
       var _b = _a, {
         kind = "primary",
@@ -2943,7 +3125,7 @@ var asButton = (Component, isDropdownButton) => {
         "aria-label",
         "children"
       ]);
-      const hasChildren = import_react13.default.Children.count(children) > 0;
+      const hasChildren = import_react11.default.Children.count(children) > 0;
       const isIconOnlyButton = !hasChildren && !!icon;
       const isGhost = !isIconOnlyButton && (kind === "ghost" || kind === "secondary-ghost");
       const isButton = !isIconOnlyButton && (kind === "primary" || kind === "secondary");
@@ -2964,31 +3146,31 @@ var asButton = (Component, isDropdownButton) => {
       }
       const buttonContent = () => {
         if (!!isDropdownButton && (kind === "primary" || kind === "secondary")) {
-          return /* @__PURE__ */ import_react13.default.createElement(Flexbox, {
+          return /* @__PURE__ */ import_react11.default.createElement(Flexbox, {
             gap: "4",
             alignItems: "center",
             justifyContent: "center"
-          }, hasChildren && /* @__PURE__ */ import_react13.default.createElement("div", null, children), /* @__PURE__ */ import_react13.default.createElement(InlineIcon, {
+          }, hasChildren && /* @__PURE__ */ import_react11.default.createElement("div", null, children), /* @__PURE__ */ import_react11.default.createElement(InlineIcon, {
             icon: import_chevronDown2.default,
             width: iconSize,
             height: iconSize
           }));
         } else if (icon) {
-          return /* @__PURE__ */ import_react13.default.createElement(Flexbox, {
+          return /* @__PURE__ */ import_react11.default.createElement(Flexbox, {
             gap: "3",
             alignItems: "center",
             justifyContent: "center",
             direction: iconPlacement === "right" ? "row-reverse" : "row"
-          }, /* @__PURE__ */ import_react13.default.createElement(InlineIcon, {
+          }, /* @__PURE__ */ import_react11.default.createElement(InlineIcon, {
             icon,
             width: iconSize,
             height: iconSize
-          }), hasChildren && /* @__PURE__ */ import_react13.default.createElement("div", null, children));
+          }), hasChildren && /* @__PURE__ */ import_react11.default.createElement("div", null, children));
         } else {
           return children;
         }
       };
-      const buttonComponent = /* @__PURE__ */ import_react13.default.createElement(Component, __spreadProps(__spreadValues({
+      const buttonComponent = /* @__PURE__ */ import_react11.default.createElement(Component, __spreadProps(__spreadValues({
         ref
       }, props), {
         className: classNames(
@@ -2996,8 +3178,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,
@@ -3008,16 +3190,16 @@ var asButton = (Component, isDropdownButton) => {
         ),
         "aria-label": isIconOnlyButton ? ariaLabel != null ? ariaLabel : tooltip : ariaLabel,
         disabled: disabled || loading2
-      }), loading2 && !isGhost ? /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("div", {
+      }), loading2 && !isGhost ? /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement("div", {
         className: tw("absolute left-1/2 top-0 bottom-0 flex"),
         style: { transform: "translate(-50%)" }
-      }, /* @__PURE__ */ import_react13.default.createElement(LoadingSpinner, {
+      }, /* @__PURE__ */ import_react11.default.createElement(LoadingSpinner, {
         size: iconSize,
         kind: kind === "primary" ? "primary" : "secondary"
-      })), /* @__PURE__ */ import_react13.default.createElement("div", {
+      })), /* @__PURE__ */ import_react11.default.createElement("div", {
         className: tw({ invisible: loading2 })
       }, buttonContent())) : buttonContent());
-      return tooltip ? /* @__PURE__ */ import_react13.default.createElement(Tooltip, {
+      return tooltip ? /* @__PURE__ */ import_react11.default.createElement(Tooltip, {
         content: tooltip,
         placement: tooltipPlacement
       }, buttonComponent) : buttonComponent;
@@ -3026,31 +3208,31 @@ var asButton = (Component, isDropdownButton) => {
 };
 var Button = asButton("button");
 Button.displayName = "Button";
-var PrimaryButton = import_react13.default.forwardRef((props, ref) => /* @__PURE__ */ import_react13.default.createElement(Button, __spreadProps(__spreadValues({
+var PrimaryButton = import_react11.default.forwardRef((props, ref) => /* @__PURE__ */ import_react11.default.createElement(Button, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "primary"
 })));
 PrimaryButton.displayName = "PrimaryButton";
-var SecondaryButton = import_react13.default.forwardRef((props, ref) => /* @__PURE__ */ import_react13.default.createElement(Button, __spreadProps(__spreadValues({
+var SecondaryButton = import_react11.default.forwardRef((props, ref) => /* @__PURE__ */ import_react11.default.createElement(Button, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "secondary"
 })));
 SecondaryButton.displayName = "SecondaryButton";
-var GhostButton = import_react13.default.forwardRef((props, ref) => /* @__PURE__ */ import_react13.default.createElement(Button, __spreadProps(__spreadValues({
+var GhostButton = import_react11.default.forwardRef((props, ref) => /* @__PURE__ */ import_react11.default.createElement(Button, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "ghost"
 })));
 GhostButton.displayName = "GhostButton";
-var SecondaryGhostButton = import_react13.default.forwardRef((props, ref) => /* @__PURE__ */ import_react13.default.createElement(Button, __spreadProps(__spreadValues({
+var SecondaryGhostButton = import_react11.default.forwardRef((props, ref) => /* @__PURE__ */ import_react11.default.createElement(Button, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "secondary-ghost"
 })));
 SecondaryGhostButton.displayName = "SecondaryGhostButton";
-var IconButton = import_react13.default.forwardRef((props, ref) => /* @__PURE__ */ import_react13.default.createElement(Button, __spreadProps(__spreadValues({
+var IconButton = import_react11.default.forwardRef((props, ref) => /* @__PURE__ */ import_react11.default.createElement(Button, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "ghost",
@@ -3059,7 +3241,7 @@ var IconButton = import_react13.default.forwardRef((props, ref) => /* @__PURE__
 })));
 IconButton.displayName = "IconButton";
 var ExternalLinkButton = asButton("a");
-var IconExternalLinkButton = import_react13.default.forwardRef((props, ref) => /* @__PURE__ */ import_react13.default.createElement(ExternalLinkButton, __spreadProps(__spreadValues({
+var IconExternalLinkButton = import_react11.default.forwardRef((props, ref) => /* @__PURE__ */ import_react11.default.createElement(ExternalLinkButton, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "ghost",
@@ -3068,13 +3250,13 @@ var IconExternalLinkButton = import_react13.default.forwardRef((props, ref) => /
 })));
 IconExternalLinkButton.displayName = "IconExternalLink";
 var DropdownButton = asButton("button", true);
-var PrimaryDropdownButton = import_react13.default.forwardRef((props, ref) => /* @__PURE__ */ import_react13.default.createElement(DropdownButton, __spreadProps(__spreadValues({
+var PrimaryDropdownButton = import_react11.default.forwardRef((props, ref) => /* @__PURE__ */ import_react11.default.createElement(DropdownButton, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "primary"
 })));
 PrimaryDropdownButton.displayName = "PrimaryDropdownButton";
-var SecondaryDropdownButton = import_react13.default.forwardRef((props, ref) => /* @__PURE__ */ import_react13.default.createElement(DropdownButton, __spreadProps(__spreadValues({
+var SecondaryDropdownButton = import_react11.default.forwardRef((props, ref) => /* @__PURE__ */ import_react11.default.createElement(DropdownButton, __spreadProps(__spreadValues({
   ref
 }, props), {
   kind: "secondary"
@@ -3082,7 +3264,7 @@ var SecondaryDropdownButton = import_react13.default.forwardRef((props, ref) =>
 SecondaryDropdownButton.displayName = "SecondaryDropdownButton";
 
 // src/common/Typography/Typography.tsx
-var import_react14 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_isUndefined5 = __toESM(require("lodash/isUndefined"));
 var import_resolveTheme = __toESM(require_resolveTheme());
 var typographies = import_resolveTheme.theme.typography.sizes.reduce(
@@ -3092,7 +3274,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,
@@ -3108,7 +3290,7 @@ var Typography = (_a) => {
   const HtmlElement = htmlTag;
   const resolvedColorName = (0, import_isUndefined5.default)(color) || color === "current" ? "grey-80" : color;
   const style = useStyle({ fontWeight });
-  return /* @__PURE__ */ import_react14.default.createElement(HtmlElement, __spreadValues({
+  return /* @__PURE__ */ import_react12.default.createElement(HtmlElement, __spreadValues({
     className: classNames(typographies[variant], `text-${resolvedColorName}`, className),
     style
   }, rest), children);
@@ -3116,10 +3298,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,
@@ -3150,7 +3332,7 @@ var Alert = (_a) => {
     "type",
     "dense"
   ]);
-  return /* @__PURE__ */ import_react15.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react13.default.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",
@@ -3166,32 +3348,31 @@ var Alert = (_a) => {
 };
 Alert.Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
-    variant: "body-default",
+  return /* @__PURE__ */ import_react13.default.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__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
-    variant: "body-small",
+  return /* @__PURE__ */ import_react13.default.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__ */ import_react15.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react13.default.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__ */ import_react15.default.createElement("div", {
+  return /* @__PURE__ */ import_react13.default.createElement("div", {
     className: tw("h-[20px] col-start-1 row-start-1", { "self-start": !dense })
-  }, /* @__PURE__ */ import_react15.default.createElement(Icon, __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ import_react13.default.createElement(Icon, __spreadProps(__spreadValues({}, rest), {
     icon: alertTypes[type].icon,
     color: alertTypes[type].color,
     fontSize: 20
@@ -3199,9 +3380,9 @@ Alert.Icon = (_a) => {
 };
 Alert.Dismiss = (_a) => {
   var _b = _a, { type } = _b, rest = __objRest(_b, ["type"]);
-  return /* @__PURE__ */ import_react15.default.createElement("div", {
+  return /* @__PURE__ */ import_react13.default.createElement("div", {
     className: tw("h-[20px] col-start-3 row-start-1")
-  }, /* @__PURE__ */ import_react15.default.createElement(IconButton, __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ import_react13.default.createElement(IconButton, __spreadProps(__spreadValues({}, rest), {
     UNSAFE_className: tw("-m-2"),
     tooltip: "Dismiss",
     icon: import_cross.default
@@ -3209,38 +3390,35 @@ Alert.Dismiss = (_a) => {
 };
 
 // src/components/Alert/Alert.tsx
-var import_omit2 = __toESM(require("lodash/omit"));
-var Alert2 = ({ description, type, title, action, onDismiss }) => /* @__PURE__ */ import_react16.default.createElement(Alert, {
+var Alert2 = ({ description, type, title, action, onDismiss, children }) => /* @__PURE__ */ import_react14.default.createElement(Alert, {
   type,
   dense: Boolean(title)
-}, /* @__PURE__ */ import_react16.default.createElement(Alert.Icon, {
+}, /* @__PURE__ */ import_react14.default.createElement(Alert.Icon, {
   type,
   dense: Boolean(title)
-}), title && /* @__PURE__ */ import_react16.default.createElement(Alert.Title, null, title), /* @__PURE__ */ import_react16.default.createElement(Alert.Description, null, description), action && /* @__PURE__ */ import_react16.default.createElement(Alert.Actions, null, /* @__PURE__ */ import_react16.default.createElement(GhostButton, __spreadValues({
+}), title && /* @__PURE__ */ import_react14.default.createElement(Alert.Title, null, title), /* @__PURE__ */ import_react14.default.createElement(Alert.Description, null, children || description), action && /* @__PURE__ */ import_react14.default.createElement(Alert.Actions, null, /* @__PURE__ */ import_react14.default.createElement(GhostButton, __spreadValues({
   dense: true
-}, (0, import_omit2.default)(action, "text")), action.text)), onDismiss && /* @__PURE__ */ import_react16.default.createElement(Alert.Dismiss, {
+}, (0, import_omit.default)(action, "text")), action.text)), onDismiss && /* @__PURE__ */ import_react14.default.createElement(Alert.Dismiss, {
   onClick: onDismiss
 }));
 
 // src/components/Avatar/Avatar.tsx
-var import_react20 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 
 // src/components/Box/Box.tsx
-var import_react19 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
+var import_isUndefined6 = __toESM(require("lodash/isUndefined"));
 
 // src/components/Element/Element.tsx
-var import_react17 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var Element = (_a) => {
   var _b = _a, { component } = _b, rest = __objRest(_b, ["component"]);
   const Component = component || "div";
-  return import_react17.default.createElement(Component, rest);
+  return import_react15.default.createElement(Component, rest);
 };
 
-// src/components/Box/Box.tsx
-var import_isUndefined6 = __toESM(require("lodash/isUndefined"));
-
 // src/utils/createComponent.tsx
-var import_react18 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var hasClassName = (val) => {
   return val.className !== void 0;
 };
@@ -3250,7 +3428,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__ */ import_react18.default.createElement(Component, __spreadProps(__spreadValues({}, combinedProps), {
+    return /* @__PURE__ */ import_react16.default.createElement(Component, __spreadProps(__spreadValues({}, combinedProps), {
       className
     }));
   };
@@ -3262,7 +3440,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__ */ import_react18.default.createElement(Component, __spreadProps(__spreadValues(__spreadValues({}, defaultProps), props), {
+    return /* @__PURE__ */ import_react16.default.createElement(Component, __spreadProps(__spreadValues(__spreadValues({}, defaultProps), props), {
       className
     }));
   };
@@ -3389,7 +3567,7 @@ var Box = (_a) => {
     columnGap: colGap,
     rowGap
   });
-  return /* @__PURE__ */ import_react19.default.createElement(Element, __spreadValues({
+  return /* @__PURE__ */ import_react17.default.createElement(Element, __spreadValues({
     style: __spreadValues(__spreadValues({}, styles), style)
   }, rest));
 };
@@ -3399,29 +3577,104 @@ var BorderBox = createSimpleComponent(
   "BorderBox"
 );
 
+// src/components/Skeleton/Skeleton.tsx
+var import_react18 = __toESM(require("react"));
+var import_isNumber = __toESM(require("lodash/isNumber"));
+var Skeleton = ({
+  width,
+  height,
+  display = "block",
+  className,
+  animate = true,
+  rounded = false
+}) => {
+  const styles = {
+    width: (0, import_isNumber.default)(width) ? `${width}px` : width,
+    height: (0, import_isNumber.default)(height) ? `${height}px` : height
+  };
+  return /* @__PURE__ */ import_react18.default.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__ */ import_react20.default.createElement(Box, {
+var AvatarStack = ({ images }) => /* @__PURE__ */ import_react19.default.createElement(Box, {
   display: "flex",
   className: tw("[&>*:not(:first-child)]:-ml-3")
-}, images.map((image) => image ? /* @__PURE__ */ import_react20.default.createElement(Avatar, {
+}, images.map((image) => image ? /* @__PURE__ */ import_react19.default.createElement(Avatar, {
   key: image,
   image
-}) : /* @__PURE__ */ import_react20.default.createElement(Avatar.Skeleton, {
+}) : /* @__PURE__ */ import_react19.default.createElement(Avatar.Skeleton, {
   key: image
 })));
-var Avatar = ({ image }) => /* @__PURE__ */ import_react20.default.createElement("img", {
+var Avatar = ({ image }) => /* @__PURE__ */ import_react19.default.createElement("img", {
   src: image,
   className: classNames(tw("w-[32px] h-[32px]"))
 });
-var AvatarSkeleton = () => /* @__PURE__ */ import_react20.default.createElement(Skeleton, {
+var AvatarSkeleton = () => /* @__PURE__ */ import_react19.default.createElement(Skeleton, {
   height: 32,
   width: 32,
   className: tw("rounded-full")
 });
 Avatar.Skeleton = AvatarSkeleton;
 
+// src/components/Badge/Badge.tsx
+var import_react20 = __toESM(require("react"));
+var import_omit2 = __toESM(require("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__ */ import_react20.default.createElement("span", __spreadProps(__spreadValues({}, (0, import_omit2.default)(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__ */ import_react20.default.createElement("span", {
+      className: classNames(
+        textClassname,
+        tw("inline-block", {
+          "text-white": !textClassname && kind === "filled",
+          "m-[1px]": kind === "filled"
+        })
+      )
+    }, valueStr));
+  };
+  Component.displayName = displayName;
+  Component.Skeleton = () => /* @__PURE__ */ import_react20.default.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
 var import_react22 = __toESM(require("react"));
+var import_omit3 = __toESM(require("lodash/omit"));
 
 // src/common/Banner/Banner.tsx
 var import_react21 = __toESM(require("react"));
@@ -3455,8 +3708,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__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
-    variant: "heading-large",
-    fontWeight: 600,
+    variant: "subheading",
     color: titleVariant === "secondary" ? "primary-80" : "grey-100",
     className: classNames(
       className,
@@ -3469,7 +3721,7 @@ Banner.Title = (_a) => {
 Banner.Description = (_a) => {
   var _b = _a, { flexGrow, children, className } = _b, rest = __objRest(_b, ["flexGrow", "children", "className"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
-    variant: "body-default",
+    variant: "default",
     color: "grey-90",
     className: classNames(className, tw({ "flex-grow": flexGrow }))
   }), children);
@@ -3512,7 +3764,6 @@ Banner.DismissContainer = (_a) => {
 };
 
 // src/components/Banner/Banner.tsx
-var import_omit3 = __toESM(require("lodash/omit"));
 var import_cross2 = __toESM(require_cross());
 var BannerImageSkeleton = () => /* @__PURE__ */ import_react22.default.createElement(Skeleton, {
   width: 225,
@@ -3520,7 +3771,7 @@ var BannerImageSkeleton = () => /* @__PURE__ */ import_react22.default.createEle
 });
 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__ */ import_react22.default.createElement(Banner, {
@@ -3533,7 +3784,7 @@ var createBanner = (displayName, opts = {}) => {
       titleVariant: opts.isOneLineBanner ? "secondary" : "primary"
     }, title), /* @__PURE__ */ import_react22.default.createElement(Banner.Description, {
       flexGrow: isDismissable ? false : true
-    }, description), action && /* @__PURE__ */ import_react22.default.createElement(Banner.Actions, {
+    }, children || description), action && /* @__PURE__ */ import_react22.default.createElement(Banner.Actions, {
       layout
     }, /* @__PURE__ */ import_react22.default.createElement(GhostButton, __spreadValues({
       dense: true
@@ -3562,8 +3813,8 @@ var OneLineBanner = OneLineBannerBase;
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 var import_react23 = __toESM(require("react"));
-var import_slash = __toESM(require_slash());
 var import_classnames2 = __toESM(require("classnames"));
+var import_slash = __toESM(require_slash());
 var Breadcrumbs = (props) => {
   const { children, className } = props;
   const crumbs = import_react23.default.Children.toArray(children).filter(
@@ -3573,7 +3824,7 @@ var Breadcrumbs = (props) => {
     className,
     "aria-label": "Breadcrumbs"
   }, /* @__PURE__ */ import_react23.default.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__ */ import_react23.default.createElement("li", {
@@ -3617,6 +3868,7 @@ Breadcrumbs.Crumb = Crumb;
 
 // src/components/Card/Card.tsx
 var import_react28 = __toESM(require("react"));
+var import_omit4 = __toESM(require("lodash/omit"));
 
 // src/components/Chip/Chip.tsx
 var import_react26 = __toESM(require("react"));
@@ -3631,8 +3883,8 @@ var Container = import_react24.default.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
       )
@@ -3643,15 +3895,13 @@ var Chip = {
   Container
 };
 
-// src/components/Chip/Chip.tsx
-var import_cross3 = __toESM(require_cross());
-var import_lock = __toESM(require_lock());
-
 // types/utils.ts
 var import_react25 = require("react");
 var isComponentType = (c, type) => (0, import_react25.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":
@@ -3736,67 +3986,120 @@ var ChipContainer = ({ dense, children }) => /* @__PURE__ */ import_react26.defa
 // src/components/Typography/Typography.tsx
 var import_react27 = __toESM(require("react"));
 var Typography2 = (props) => /* @__PURE__ */ import_react27.default.createElement(Typography, __spreadValues({}, props));
-Typography2.Heading = (_a) => {
+Typography2.LargeHeading = (_a) => {
   var _b = _a, { htmlTag = "h1" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react27.default.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__ */ import_react27.default.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__ */ import_react27.default.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__ */ import_react27.default.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__ */ import_react27.default.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__ */ import_react27.default.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__ */ import_react27.default.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__ */ import_react27.default.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__ */ import_react27.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "small-strong"
+  }));
+};
+Typography2.Small = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react27.default.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__ */ import_react27.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "caption"
+  }));
+};
+Typography2.LargeText = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react27.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "large-strong"
+  }));
+};
+Typography2.MediumText = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react27.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "default-strong"
+  }));
+};
+Typography2.Text = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react27.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "default"
+  }));
+};
+Typography2.SmallText = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react27.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "small"
+  }));
+};
+Typography2.SmallTextBold = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react27.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
-    variant: "caption-default"
+    variant: "small-strong"
   }));
 };
 
 // src/components/Card/Card.tsx
-var import_omit4 = __toESM(require("lodash/omit"));
 var Card = ({
   title,
   description,
@@ -3808,11 +4111,14 @@ var Card = ({
   action,
   link,
   onClick,
-  disabled
+  disabled,
+  fullWidth,
+  children
 }) => /* @__PURE__ */ import_react28.default.createElement(CardContainer, {
   onClick,
   color,
-  disabled
+  disabled,
+  fullWidth
 }, chips.length > 0 && /* @__PURE__ */ import_react28.default.createElement(ChipContainer, {
   dense: true
 }, chips.map((chip) => /* @__PURE__ */ import_react28.default.createElement(Chip2, {
@@ -3824,13 +4130,21 @@ var Card = ({
   image,
   imageAlt,
   fullSize: chips.length === 0
-}), /* @__PURE__ */ import_react28.default.createElement(CardContent, null, /* @__PURE__ */ import_react28.default.createElement(CardTitle, null, title), /* @__PURE__ */ import_react28.default.createElement(CardBody, null, description)), (action || link) && /* @__PURE__ */ import_react28.default.createElement(CardActions, null, action && /* @__PURE__ */ import_react28.default.createElement(SecondaryButton, __spreadValues({
+}), /* @__PURE__ */ import_react28.default.createElement(CardContent, null, /* @__PURE__ */ import_react28.default.createElement(CardTitle, null, title), /* @__PURE__ */ import_react28.default.createElement(CardBody, null, children || description)), (action || link) && /* @__PURE__ */ import_react28.default.createElement(CardActions, null, action && /* @__PURE__ */ import_react28.default.createElement(SecondaryButton, __spreadValues({
   dense: true
 }, (0, import_omit4.default)(action, "text")), action.text), link && /* @__PURE__ */ import_react28.default.createElement(ExternalLinkButton, __spreadValues({
   dense: true,
   kind: "ghost"
 }, (0, import_omit4.default)(link, "text")), link.text)));
-var CardSkeleton = ({ chips = true, icons = false, image = !icons, actions = true }) => /* @__PURE__ */ import_react28.default.createElement(CardContainer, null, chips && /* @__PURE__ */ import_react28.default.createElement(ChipContainer, {
+var CardSkeleton = ({
+  chips = true,
+  icons = false,
+  image = !icons,
+  actions = true,
+  fullWidth = false
+}) => /* @__PURE__ */ import_react28.default.createElement(CardContainer, {
+  fullWidth
+}, chips && /* @__PURE__ */ import_react28.default.createElement(ChipContainer, {
   dense: true
 }, Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ import_react28.default.createElement(Chip2.Skeleton, {
   key: idx
@@ -3857,13 +4171,16 @@ var CardContainer = ({
   children,
   onClick,
   color,
-  disabled
+  disabled,
+  fullWidth = false
 }) => /* @__PURE__ */ import_react28.default.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)
     })
   ),
@@ -3903,12 +4220,11 @@ var CardContent = ({ children }) => /* @__PURE__ */ import_react28.default.creat
   gap: "4"
 }, children);
 var CardBody = ({ children }) => /* @__PURE__ */ import_react28.default.createElement(Typography2, {
-  variant: "caption-default",
+  variant: "caption",
   color: "grey-70"
 }, children);
 var CardTitle = ({ children }) => /* @__PURE__ */ import_react28.default.createElement(Typography2, {
-  variant: "body-default-medium",
-  fontWeight: 500
+  variant: "default-strong"
 }, children);
 var CardActions = ({ children }) => /* @__PURE__ */ import_react28.default.createElement(Box, {
   paddingTop: "3",
@@ -4050,55 +4366,45 @@ var ControlLabel = (_a) => {
     ),
     style: __spreadValues({}, style)
   }, rest), children, label && /* @__PURE__ */ import_react30.default.createElement("span", {
-    className: tw("typography-body-small self-center")
+    className: tw("typography-small self-center")
   }, label), caption && /* @__PURE__ */ import_react30.default.createElement(Typography2, {
     className: tw("col-start-2"),
-    variant: "caption-default",
+    variant: "caption",
     color: disabled ? "grey-40" : "grey-50"
   }, caption));
 };
 
 // src/common/Checkbox/Checkbox.tsx
 var import_react31 = __toESM(require("react"));
-var import_tick2 = __toESM(require_tick());
 var import_minus = __toESM(require_minus());
+var import_tick2 = __toESM(require_tick());
 var Checkbox = import_react31.default.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__ */ import_react31.default.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__ */ import_react31.default.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__ */ import_react31.default.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__ */ import_react31.default.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
+        }
+      )
     }));
   }
 );
@@ -4106,35 +4412,10 @@ var Checkbox = import_react31.default.forwardRef(
 // src/components/Checkbox/Checkbox.tsx
 var Checkbox2 = import_react32.default.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] = import_react32.default.useState((_a2 = _checked != null ? _checked : defaultChecked) != null ? _a2 : false);
-    if (_checked !== void 0 && checked !== _checked) {
-      setChecked(_checked);
-    }
-    return !readOnly || checked ? /* @__PURE__ */ import_react32.default.createElement(ControlLabel, {
+    const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
+    return !readOnly || isChecked ? /* @__PURE__ */ import_react32.default.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -4147,13 +4428,8 @@ var Checkbox2 = import_react32.default.forwardRef(
       ref,
       name
     }, props), {
-      checked,
       readOnly,
-      disabled,
-      onChange: (e) => {
-        setChecked(e.target.checked);
-        onChange == null ? void 0 : onChange(e);
-      }
+      disabled
     }))) : null;
   }
 );
@@ -4172,14 +4448,95 @@ Checkbox2.Skeleton = CheckboxSkeleton;
 var import_react39 = __toESM(require("react"));
 var import_uniqueId = __toESM(require("lodash/uniqueId"));
 
+// src/common/InputGroup/InputGroup.tsx
+var import_react34 = __toESM(require("react"));
+
+// src/components/Grid/Grid.tsx
+var import_react33 = __toESM(require("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__ */ import_react33.default.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__ */ import_react34.default.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
-var import_react36 = __toESM(require("react"));
-var import_questionMark = __toESM(require_questionMark());
+var import_react38 = __toESM(require("react"));
 
 // src/utils/form/FormControl/FormControl.tsx
-var import_react33 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var FormControl = ({ className, inline, children }) => {
-  return /* @__PURE__ */ import_react33.default.createElement(Flexbox, {
+  return /* @__PURE__ */ import_react35.default.createElement(Flexbox, {
     direction: "column",
     display: inline ? "inline-flex" : "flex",
     className
@@ -4187,23 +4544,23 @@ var FormControl = ({ className, inline, children }) => {
 };
 
 // src/utils/form/HelperText/HelperText.tsx
-var import_react35 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
+var import_classnames3 = __toESM(require("classnames"));
 var import_isNumber3 = __toESM(require("lodash/isNumber"));
 
 // src/utils/form/CharCounter/CharCounter.tsx
-var import_react34 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var CharCounter = ({ dense = true, length, maxLength, valid = true }) => {
-  return /* @__PURE__ */ import_react34.default.createElement("span", {
+  return /* @__PURE__ */ import_react36.default.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
-var import_classnames3 = __toESM(require("classnames"));
 var HelperText = ({
   messageId,
   error: error2 = false,
@@ -4216,39 +4573,40 @@ var HelperText = ({
   const hasMaxLength = (0, import_isNumber3.default)(maxLength) && maxLength > 0;
   const showMessage = hasError || hasMaxLength;
   if (!showMessage) {
-    return reserveSpaceForError ? /* @__PURE__ */ import_react35.default.createElement("p", {
-      className: tw("block mt-1 mb-3 typography-caption-default")
+    return reserveSpaceForError ? /* @__PURE__ */ import_react37.default.createElement("p", {
+      className: tw("block mt-1 mb-3 typography-caption")
     }, "\xA0") : null;
   }
-  return /* @__PURE__ */ import_react35.default.createElement(Grid, {
+  return /* @__PURE__ */ import_react37.default.createElement(Grid, {
     cols: "1",
     rows: "1",
     colGap: "3",
     alignItems: "start",
     autoCols: "min",
     className: tw("mt-1 mb-3")
-  }, /* @__PURE__ */ import_react35.default.createElement(GridItem, {
+  }, /* @__PURE__ */ import_react37.default.createElement(GridItem, {
     colStart: "1",
     colEnd: "2"
-  }, hasError && /* @__PURE__ */ import_react35.default.createElement("p", {
+  }, hasError && /* @__PURE__ */ import_react37.default.createElement("p", {
     id: messageId,
-    className: tw("text-error-50 block typography-caption-default")
-  }, helperText)), /* @__PURE__ */ import_react35.default.createElement(GridItem, {
+    className: tw("text-error-50 block typography-caption")
+  }, helperText)), /* @__PURE__ */ import_react37.default.createElement(GridItem, {
     colStart: "2",
     colEnd: "3",
     display: "flex"
-  }, (0, import_isNumber3.default)(length) && hasMaxLength && /* @__PURE__ */ import_react35.default.createElement(CharCounter, {
+  }, (0, import_isNumber3.default)(length) && hasMaxLength && /* @__PURE__ */ import_react37.default.createElement(CharCounter, {
     length,
     maxLength,
     valid: !error2
   })));
 };
-var Skeleton2 = ({ className, children }) => /* @__PURE__ */ import_react35.default.createElement("div", {
+var Skeleton2 = ({ className, children }) => /* @__PURE__ */ import_react37.default.createElement("div", {
   className: (0, import_classnames3.default)(className, "h-[25px]")
 }, children);
 HelperText.Skeleton = Skeleton2;
 
 // src/utils/form/Label/Label.tsx
+var import_questionMark = __toESM(require_questionMark());
 var LabelText = ({
   variant = "default",
   labelText,
@@ -4256,35 +4614,35 @@ var LabelText = ({
   helpTooltip,
   helpTooltipPlacement
 }) => {
-  return /* @__PURE__ */ import_react36.default.createElement("span", {
-    className: tw("inline-block mb-2 font-medium typography-body-small", {
+  return /* @__PURE__ */ import_react38.default.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__ */ import_react36.default.createElement("span", {
+  }, labelText, required && /* @__PURE__ */ import_react38.default.createElement("span", {
     className: tw("text-error-50")
-  }, "*"), helpTooltip && /* @__PURE__ */ import_react36.default.createElement(Tooltip, {
+  }, "*"), helpTooltip && /* @__PURE__ */ import_react38.default.createElement(Tooltip, {
     content: helpTooltip,
     placement: helpTooltipPlacement
-  }, /* @__PURE__ */ import_react36.default.createElement("span", {
+  }, /* @__PURE__ */ import_react38.default.createElement("span", {
     className: tw("text-grey-30 flex items-center cursor-pointer ml-2")
-  }, /* @__PURE__ */ import_react36.default.createElement(InlineIcon, {
+  }, /* @__PURE__ */ import_react38.default.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__ */ import_react36.default.createElement("label", __spreadValues({
+  return /* @__PURE__ */ import_react38.default.createElement("label", __spreadValues({
     id,
     className: tw("w-full"),
     "data-testid": dataTestid,
     htmlFor
-  }, labelProps), labelText && /* @__PURE__ */ import_react36.default.createElement(LabelText, __spreadValues({}, props)), children);
+  }, labelProps), labelText && /* @__PURE__ */ import_react38.default.createElement(LabelText, __spreadValues({}, props)), children);
 };
 var LabelSkeleton = () => {
-  return /* @__PURE__ */ import_react36.default.createElement(Skeleton, {
+  return /* @__PURE__ */ import_react38.default.createElement(Skeleton, {
     height: 20,
     width: 100,
     className: tw("mb-[7px]")
@@ -4317,15 +4675,15 @@ var LabelControl = (_a) => {
   ]);
   const legacyError = error2 !== void 0 && valid === false;
   const variant = !valid || legacyError ? "error" : disabled ? "disabled" : "default";
-  return /* @__PURE__ */ import_react36.default.createElement(FormControl, null, !fieldset && /* @__PURE__ */ import_react36.default.createElement(Label, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react38.default.createElement(FormControl, null, !fieldset && /* @__PURE__ */ import_react38.default.createElement(Label, __spreadProps(__spreadValues({}, rest), {
     variant
-  }), children), fieldset && /* @__PURE__ */ import_react36.default.createElement("fieldset", {
+  }), children), fieldset && /* @__PURE__ */ import_react38.default.createElement("fieldset", {
     id: rest.id
-  }, /* @__PURE__ */ import_react36.default.createElement("legend", {
+  }, /* @__PURE__ */ import_react38.default.createElement("legend", {
     className: tw("w-full mb-2")
-  }, /* @__PURE__ */ import_react36.default.createElement(LabelText, __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ import_react38.default.createElement(LabelText, __spreadProps(__spreadValues({}, rest), {
     variant
-  }))), children), /* @__PURE__ */ import_react36.default.createElement(HelperText, {
+  }))), children), /* @__PURE__ */ import_react38.default.createElement(HelperText, {
     messageId,
     error: !valid,
     helperText,
@@ -4334,7 +4692,7 @@ var LabelControl = (_a) => {
     reserveSpaceForError
   }));
 };
-var LabelControlSkeleton = ({ children }) => /* @__PURE__ */ import_react36.default.createElement("div", null, /* @__PURE__ */ import_react36.default.createElement(Label.Skeleton, null), children, /* @__PURE__ */ import_react36.default.createElement(HelperText.Skeleton, null));
+var LabelControlSkeleton = ({ children }) => /* @__PURE__ */ import_react38.default.createElement("div", null, /* @__PURE__ */ import_react38.default.createElement(Label.Skeleton, null), children, /* @__PURE__ */ import_react38.default.createElement(HelperText.Skeleton, null));
 LabelControl.Skeleton = LabelControlSkeleton;
 var getLabelControlProps = (_a) => {
   var _b = _a, {
@@ -4368,88 +4726,6 @@ var getLabelControlProps = (_a) => {
   };
 };
 
-// src/common/InputGroup/InputGroup.tsx
-var import_react38 = __toESM(require("react"));
-
-// src/components/Grid/Grid.tsx
-var import_react37 = __toESM(require("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__ */ import_react37.default.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__ */ import_react38.default.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 import_react39.default.isValidElement(c) && c.type === Checkbox2;
@@ -4536,8 +4812,8 @@ 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);
@@ -4545,11 +4821,11 @@ var ChoiceChip = (_a) => {
 
 // src/components/Combobox/Combobox.tsx
 var import_react43 = __toESM(require("react"));
+var import_overlays5 = require("@react-aria/overlays");
 var import_downshift = require("downshift");
-var import_match_sorter = require("match-sorter");
-var import_uniqueId2 = __toESM(require("lodash/uniqueId"));
 var import_omit5 = __toESM(require("lodash/omit"));
-var import_overlays5 = require("@react-aria/overlays");
+var import_uniqueId2 = __toESM(require("lodash/uniqueId"));
+var import_match_sorter = require("match-sorter");
 
 // src/components/Popover/PopoverWrapper.tsx
 var import_react42 = __toESM(require("react"));
@@ -4802,91 +5078,111 @@ Combobox.Skeleton = () => /* @__PURE__ */ import_react43.default.createElement(L
 
 // src/components/DataList/DataList.tsx
 var import_react49 = __toESM(require("react"));
+var import_orderBy2 = __toESM(require("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
+var import_react44 = __toESM(require("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__ */ import_react44.default.createElement("div", {
+    style: __spreadValues({}, styles)
+  }, children);
+};
 
 // src/common/DataList/DataList.tsx
-var import_react46 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 
 // src/common/Table/Table.tsx
-var import_react45 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 
 // src/common/RadioButton/RadioButton.tsx
-var import_react44 = __toESM(require("react"));
-var RadioButton = import_react44.default.forwardRef(
+var import_react45 = __toESM(require("react"));
+var RadioButton = import_react45.default.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__ */ import_react44.default.createElement("span", {
-      className: classNames(
-        tw("inline-flex justify-center items-center relative self-center", {
-          "text-grey-30": disabled,
-          "text-grey-100": !disabled
-        })
-      )
-    }, /* @__PURE__ */ import_react44.default.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__ */ import_react45.default.createElement("span", {
+      className: classNames(tw("inline-flex justify-center items-center relative self-center"))
+    }, /* @__PURE__ */ import_react45.default.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__ */ import_react44.default.createElement("span", {
+    })), /* @__PURE__ */ import_react45.default.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__ */ import_react45.default.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 = import_react45.default.createContext(null);
-var tableClassNames = tw("w-full relative typography-body-default border-spacing-0");
+var import_chevronUp2 = __toESM(require_chevronUp());
+var HeadContext = import_react46.default.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__ */ import_react45.default.createElement("table", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react46.default.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__ */ import_react45.default.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ import_react45.default.createElement("tr", null, /* @__PURE__ */ import_react45.default.createElement(HeadContext.Provider, {
+  return /* @__PURE__ */ import_react46.default.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ import_react46.default.createElement("tr", null, /* @__PURE__ */ import_react46.default.createElement(HeadContext.Provider, {
     value: { children, sticky }
   }, children)));
 };
 var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react45.default.createElement("tbody", __spreadValues({}, rest), children);
+  return /* @__PURE__ */ import_react46.default.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__ */ import_react45.default.createElement("tr", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react46.default.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
@@ -4898,25 +5194,25 @@ var getHeadCellClassNames = (sticky = true) => {
 };
 var TableCell = (_a) => {
   var _b = _a, { children, className, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "align"]);
-  const headContext = import_react45.default.useContext(HeadContext);
-  return headContext ? /* @__PURE__ */ import_react45.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
+  const headContext = import_react46.default.useContext(HeadContext);
+  return headContext ? /* @__PURE__ */ import_react46.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
       getHeadCellClassNames(headContext.sticky),
       getAlignClassNames(align),
       className
     )
-  }), children) : /* @__PURE__ */ import_react45.default.createElement("td", __spreadProps(__spreadValues({}, rest), {
+  }), children) : /* @__PURE__ */ import_react46.default.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__ */ import_react45.default.createElement(Table.Cell, {
+  return /* @__PURE__ */ import_react46.default.createElement(Table.Cell, {
     className: tw("leading-[0px]")
-  }, props.type === "radio" ? /* @__PURE__ */ import_react45.default.createElement(RadioButton, __spreadValues({
+  }, props.type === "radio" ? /* @__PURE__ */ import_react46.default.createElement(RadioButton, __spreadValues({
     "aria-label": ariaLabel
-  }, props)) : /* @__PURE__ */ import_react45.default.createElement(Checkbox, __spreadValues({
+  }, props)) : /* @__PURE__ */ import_react46.default.createElement(Checkbox, __spreadValues({
     "aria-label": ariaLabel
   }, props)));
 };
@@ -4926,43 +5222,43 @@ var getSortCellIconClassNames = (active) => {
 };
 var TableSortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ import_react45.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react46.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction
-  }), /* @__PURE__ */ import_react45.default.createElement("span", {
+  }), /* @__PURE__ */ import_react46.default.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ import_react45.default.createElement("div", {
+  }, children, /* @__PURE__ */ import_react46.default.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ import_react45.default.createElement(InlineIcon, {
+  }, /* @__PURE__ */ import_react46.default.createElement(InlineIcon, {
     icon: import_chevronUp2.default,
     className: getSortCellIconClassNames(direction === "descending")
-  }), /* @__PURE__ */ import_react45.default.createElement(InlineIcon, {
+  }), /* @__PURE__ */ import_react46.default.createElement(InlineIcon, {
     icon: import_chevronDown3.default,
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
 };
-var Item2 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react45.default.createElement("div", {
+var Item2 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react46.default.createElement("div", {
   className: tw("flex gap-4 items-center")
-}, image && /* @__PURE__ */ import_react45.default.createElement("img", {
+}, image && /* @__PURE__ */ import_react46.default.createElement("img", {
   src: image,
   alt: imageAlt,
   style: { width: imageSize, height: imageSize }
-}), /* @__PURE__ */ import_react45.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react45.default.createElement(Typography2.Caption, null, caption)));
-Table.Head = import_react45.default.memo(TableHead);
-Table.Body = import_react45.default.memo(TableBody);
-Table.Row = import_react45.default.memo(TableRow);
-Table.Cell = import_react45.default.memo(TableCell);
-Table.SortCell = import_react45.default.memo(TableSortCell);
-Table.SelectCell = import_react45.default.memo(TableSelectCell);
+}), /* @__PURE__ */ import_react46.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react46.default.createElement(Typography2.Caption, null, caption)));
+Table.Head = import_react46.default.memo(TableHead);
+Table.Body = import_react46.default.memo(TableBody);
+Table.Row = import_react46.default.memo(TableRow);
+Table.Cell = import_react46.default.memo(TableCell);
+Table.SortCell = import_react46.default.memo(TableSortCell);
+Table.SelectCell = import_react46.default.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",
@@ -4970,7 +5266,7 @@ var getAlignClassNames2 = (align) => tw("flex items-center", {
 });
 var DataList = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react46.default.createElement("div", __spreadValues({}, rest));
+  return /* @__PURE__ */ import_react47.default.createElement("div", __spreadValues({}, rest));
 };
 var HeadCell = (_a) => {
   var _b = _a, {
@@ -4982,14 +5278,14 @@ var HeadCell = (_a) => {
     "sticky",
     "align"
   ]);
-  return /* @__PURE__ */ import_react46.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react47.default.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__ */ import_react46.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react47.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     role: "cell",
     className: classNames(
       cellClassNames,
@@ -5002,30 +5298,30 @@ var Cell = (_a) => {
 };
 var Row = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react46.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react47.default.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__ */ import_react46.default.createElement(HeadCell, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react47.default.createElement(HeadCell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction,
     role: "cell"
-  }), /* @__PURE__ */ import_react46.default.createElement("span", {
+  }), /* @__PURE__ */ import_react47.default.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ import_react46.default.createElement("div", {
+  }, children, /* @__PURE__ */ import_react47.default.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ import_react46.default.createElement(InlineIcon, {
+  }, /* @__PURE__ */ import_react47.default.createElement(InlineIcon, {
     icon: import_chevronUp3.default,
     className: getSortCellIconClassNames(direction === "descending")
-  }), /* @__PURE__ */ import_react46.default.createElement(InlineIcon, {
+  }), /* @__PURE__ */ import_react47.default.createElement(InlineIcon, {
     icon: import_chevronDown4.default,
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
@@ -5035,38 +5331,6 @@ DataList.SortCell = SortCell;
 DataList.Cell = Cell;
 DataList.Row = Row;
 
-// src/components/Template/Template.tsx
-var import_react47 = __toESM(require("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__ */ import_react47.default.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)]);
@@ -5075,8 +5339,12 @@ var renameProperty = (oldProp, newProp, _a) => {
   }, rest);
 };
 
-// src/components/DataList/DataList.tsx
-var import_orderBy2 = __toESM(require("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
 var import_react48 = __toESM(require("react"));
@@ -5128,6 +5396,7 @@ var DataList2 = ({ columns, rows }) => {
 
 // src/components/DataTable/DataTable.tsx
 var import_react52 = __toESM(require("react"));
+var import_orderBy3 = __toESM(require("lodash/orderBy"));
 
 // src/components/Table/Table.tsx
 var import_react51 = __toESM(require("react"));
@@ -5172,7 +5441,6 @@ Table2.SortCell = Table.SortCell;
 Table2.SelectCell = Table.SelectCell;
 
 // src/components/DataTable/DataTable.tsx
-var import_orderBy3 = __toESM(require("lodash/orderBy"));
 var DataTable = (_a) => {
   var _b = _a, {
     columns,
@@ -5218,12 +5486,31 @@ var DataTable = (_a) => {
 
 // src/components/Dialog/Dialog.tsx
 var import_react54 = __toESM(require("react"));
-var import_omit6 = __toESM(require("lodash/omit"));
-var import_overlays6 = require("@react-aria/overlays");
 var import_dialog = require("@react-aria/dialog");
 var import_focus2 = require("@react-aria/focus");
+var import_overlays6 = require("@react-aria/overlays");
 var import_utils4 = require("@react-aria/utils");
 var import_overlays7 = require("@react-stately/overlays");
+var import_omit6 = __toESM(require("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
 var import_react53 = __toESM(require("react"));
@@ -5250,7 +5537,7 @@ Modal.Dialog = import_react53.default.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",
@@ -5267,11 +5554,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__ */ import_react53.default.createElement("img", __spreadProps(__spreadValues({
+    "aria-hidden": true,
+    src: backgroundImage != null ? backgroundImage : void 0
+  }, rest), {
+    className: classNames(common, tw("object-cover"), className)
+  })) : /* @__PURE__ */ import_react53.default.createElement("div", {
+    className: classNames(common, tw("bg-grey-5"), className)
+  });
+};
+Modal.CloseButtonContainer = (_a) => {
+  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ import_react53.default.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__ */ import_react53.default.createElement(Typography, __spreadValues({
     htmlTag: "h2",
-    variant: "heading-large",
+    variant: "subheading",
     color: "grey-90",
     className: classNames(tw("leading-none"), className)
   }, rest), children);
@@ -5279,7 +5584,7 @@ Modal.Title = (_a) => {
 Modal.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ import_react53.default.createElement(Typography, __spreadValues({
-    variant: "body-small",
+    variant: "small",
     color: "grey-60"
   }, rest), children);
 };
@@ -5309,25 +5614,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,
@@ -5364,7 +5650,7 @@ var Dialog = ({
     fontSize: 20
   }), /* @__PURE__ */ import_react54.default.createElement(Modal.Title, {
     id: labelledBy,
-    variant: "body-large",
+    variant: "large-strong",
     color: DIALOG_ICONS_AND_COLORS[type].color
   }, title)), /* @__PURE__ */ import_react54.default.createElement(Modal.Body, {
     id: describedBy
@@ -5554,7 +5840,7 @@ var DropdownMenu = ({
     style: { minWidth: "250px" },
     className: tw("py-3 bg-white")
   }, !!title && /* @__PURE__ */ import_react58.default.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__ */ import_react58.default.createElement("ol", {
     role: "menu",
     ref: menuRef,
@@ -5597,155 +5883,69 @@ var DropdownItem = (_a) => {
     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__ */ import_react58.default.createElement("div", {
-    className: tw("py-3 px-4")
-  }, children);
-  return /* @__PURE__ */ import_react58.default.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__ */ import_react58.default.createElement(Tooltip, {
-    content: tooltip,
-    placement: tooltipPlacement,
-    inline: false
-  }, itemContent) : itemContent);
-};
-Dropdown.Menu = DropdownMenu;
-Dropdown.Item = DropdownItem;
-
-// src/components/DropdownMenu/DropdownMenu.tsx
-var import_react62 = __toESM(require("react"));
-var import_i18n = require("@react-aria/i18n");
-var import_collections = require("@react-stately/collections");
-var import_tree = require("@react-stately/tree");
-var import_menu = require("@react-stately/menu");
-var import_overlays10 = require("@react-aria/overlays");
-var import_menu2 = require("@react-aria/menu");
-var import_separator = require("@react-aria/separator");
-var import_interactions2 = require("@react-aria/interactions");
-var import_utils7 = require("@react-aria/utils");
-
-// src/common/DropdownMenu/DropdownMenu.tsx
-var import_react59 = __toESM(require("react"));
-var import_tick3 = __toESM(require_tick());
-var DropdownMenu2 = import_react59.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { maxHeight = "450px", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["maxHeight", "minWidth", "maxWidth", "className", "children"]);
-    return /* @__PURE__ */ import_react59.default.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__ */ import_react59.default.createElement("div", {
-  className: tw("p-3")
-}, children);
-DropdownMenu2.ContentContainer = ContentContainer;
-var List2 = import_react59.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ import_react59.default.createElement("ul", __spreadValues({
-      ref
-    }, props), children);
-  }
-);
-DropdownMenu2.List = List2;
-var Group2 = import_react59.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, title, titleProps, children } = _b, props = __objRest(_b, ["className", "title", "titleProps", "children"]);
-    return /* @__PURE__ */ import_react59.default.createElement("li", __spreadValues({
-      ref
-    }, props), title && /* @__PURE__ */ import_react59.default.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 = import_react59.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { kind, highlighted, selected, className, icon, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "children"]);
-    return /* @__PURE__ */ import_react59.default.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__ */ import_react59.default.createElement(InlineIcon, {
-      icon
-    }), /* @__PURE__ */ import_react59.default.createElement("span", {
-      className: tw("grow")
-    }, children), selected && /* @__PURE__ */ import_react59.default.createElement(InlineIcon, {
-      icon: import_tick3.default
-    }));
-  }
-);
-DropdownMenu2.Item = Item3;
-var Description = ({ disabled, children }) => /* @__PURE__ */ import_react59.default.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__ */ import_react59.default.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__ */ import_react59.default.createElement("div", __spreadValues({
-    className: classNames(tw("border border-dashed border-grey-10 p-3"), className)
-  }, props), children);
+    } 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__ */ import_react58.default.createElement("div", {
+    className: tw("py-3 px-4")
+  }, children);
+  return /* @__PURE__ */ import_react58.default.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__ */ import_react58.default.createElement(Tooltip, {
+    content: tooltip,
+    placement: tooltipPlacement,
+    inline: false
+  }, itemContent) : itemContent);
 };
-DropdownMenu2.EmptyStateContainer = EmptyStateContainer2;
+Dropdown.Menu = DropdownMenu;
+Dropdown.Item = DropdownItem;
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var import_react62 = __toESM(require("react"));
+var import_i18n = require("@react-aria/i18n");
+var import_interactions2 = require("@react-aria/interactions");
+var import_menu = require("@react-aria/menu");
+var import_overlays10 = require("@react-aria/overlays");
+var import_separator = require("@react-aria/separator");
+var import_utils7 = require("@react-aria/utils");
+var import_collections = require("@react-stately/collections");
+var import_menu2 = require("@react-stately/menu");
+var import_tree = require("@react-stately/tree");
 
 // src/components/Input/Input.tsx
-var import_uniqueId3 = __toESM(require("lodash/uniqueId"));
-var import_toString = __toESM(require("lodash/toString"));
+var import_react60 = __toESM(require("react"));
 var import_omit7 = __toESM(require("lodash/omit"));
-var import_react61 = __toESM(require("react"));
+var import_toString = __toESM(require("lodash/toString"));
+var import_uniqueId3 = __toESM(require("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,
@@ -5755,31 +5955,31 @@ var getCommonInputStyles = ({ readOnly, valid }) => tw(
 );
 
 // src/utils/form/InputAdornment/InputAdornment.tsx
-var import_react60 = __toESM(require("react"));
-var import_tick4 = __toESM(require_tick());
+var import_react59 = __toESM(require("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__ */ import_react60.default.createElement("span", {
+  return /* @__PURE__ */ import_react59.default.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__ */ import_react60.default.createElement(Flexbox, {
+  }, /* @__PURE__ */ import_react59.default.createElement(Flexbox, {
     gap: "3",
     wrap: "wrap"
   }, children));
 };
-var SearchIcon = ({ onClick }) => /* @__PURE__ */ import_react60.default.createElement(Icon, {
+var SearchIcon = ({ onClick }) => /* @__PURE__ */ import_react59.default.createElement(Icon, {
   icon: import_search2.default,
   color: "grey-30",
   "data-testid": "icon-search",
   onClick
 });
-var ResetIcon = ({ onClick }) => /* @__PURE__ */ import_react60.default.createElement(Icon, {
+var ResetIcon = ({ onClick }) => /* @__PURE__ */ import_react59.default.createElement(Icon, {
   className: "hover:cursor-pointer",
   icon: import_cross4.default,
   color: "grey-30",
@@ -5789,7 +5989,7 @@ var ResetIcon = ({ onClick }) => /* @__PURE__ */ import_react60.default.createEl
 
 // src/components/Input/Input.tsx
 var createInput = (displayName, opts = {}) => {
-  const InputComponent = (0, import_react61.forwardRef)(
+  const InputComponent = (0, import_react60.forwardRef)(
     (_a, ref) => {
       var _b = _a, {
         type = "text",
@@ -5809,8 +6009,8 @@ var createInput = (displayName, opts = {}) => {
         "readOnly"
       ]);
       var _a2;
-      const inputRef = import_react61.default.useRef(null);
-      (0, import_react61.useImperativeHandle)(ref, () => inputRef.current);
+      const inputRef = import_react60.default.useRef(null);
+      (0, import_react60.useImperativeHandle)(ref, () => inputRef.current);
       const handleReset = () => {
         var _a3;
         const el = inputRef.current;
@@ -5822,11 +6022,11 @@ var createInput = (displayName, opts = {}) => {
           el.focus();
         }
       };
-      return /* @__PURE__ */ import_react61.default.createElement("span", {
+      return /* @__PURE__ */ import_react60.default.createElement("span", {
         className: tw("relative block")
-      }, opts.adornment && /* @__PURE__ */ import_react61.default.createElement(InputAdornment, {
+      }, opts.adornment && /* @__PURE__ */ import_react60.default.createElement(InputAdornment, {
         placement: "left"
-      }, opts.adornment), /* @__PURE__ */ import_react61.default.createElement("input", __spreadProps(__spreadValues({
+      }, opts.adornment), /* @__PURE__ */ import_react60.default.createElement("input", __spreadProps(__spreadValues({
         ref: inputRef,
         type
       }, props), {
@@ -5841,34 +6041,34 @@ var createInput = (displayName, opts = {}) => {
           getCommonInputStyles({ readOnly, valid }),
           props.className
         )
-      })), opts.canReset && (props.value || ((_a2 = inputRef.current) == null ? void 0 : _a2.value)) && /* @__PURE__ */ import_react61.default.createElement(InputAdornment, null, /* @__PURE__ */ import_react61.default.createElement(ResetIcon, {
+      })), opts.canReset && (props.value || ((_a2 = inputRef.current) == null ? void 0 : _a2.value)) && /* @__PURE__ */ import_react60.default.createElement(InputAdornment, null, /* @__PURE__ */ import_react60.default.createElement(ResetIcon, {
         onClick: handleReset
-      })), !opts.canReset && endAdornment && /* @__PURE__ */ import_react61.default.createElement(InputAdornment, null, endAdornment));
+      })), !opts.canReset && endAdornment && /* @__PURE__ */ import_react60.default.createElement(InputAdornment, null, endAdornment));
     }
   );
   InputComponent.displayName = displayName;
-  InputComponent.Skeleton = () => /* @__PURE__ */ import_react61.default.createElement(Skeleton, {
+  InputComponent.Skeleton = () => /* @__PURE__ */ import_react60.default.createElement(Skeleton, {
     height: 38
   });
   return InputComponent;
 };
 var InputBase = createInput("InputBase");
-var SearchInput = createInput("SearchInput", { adornment: /* @__PURE__ */ import_react61.default.createElement(SearchIcon, null), canReset: true });
-var Input2 = import_react61.default.forwardRef((_a, ref) => {
+var SearchInput = createInput("SearchInput", { adornment: /* @__PURE__ */ import_react60.default.createElement(SearchIcon, null), canReset: true });
+var Input2 = import_react60.default.forwardRef((_a, ref) => {
   var _b = _a, { readOnly = false } = _b, props = __objRest(_b, ["readOnly"]);
   var _a2, _b2, _c;
-  const [value, setValue] = (0, import_react61.useState)((_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : "");
-  const id = (0, import_react61.useRef)((_c = props.id) != null ? _c : `input-${(0, import_uniqueId3.default)()}`);
+  const [value, setValue] = (0, import_react60.useState)((_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : "");
+  const id = (0, import_react60.useRef)((_c = props.id) != null ? _c : `input-${(0, import_uniqueId3.default)()}`);
   const errorMessageId = (0, import_uniqueId3.default)();
   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 = (0, import_omit7.default)(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ import_react61.default.createElement(LabelControl, __spreadValues({
+  return /* @__PURE__ */ import_react60.default.createElement(LabelControl, __spreadValues({
     id: `${id.current}-label`,
     htmlFor: id.current,
     messageId: errorMessageId,
     length: value !== void 0 ? (0, import_toString.default)(value).length : void 0
-  }, labelControlProps), /* @__PURE__ */ import_react61.default.createElement(InputBase, __spreadProps(__spreadValues(__spreadValues({
+  }, labelControlProps), /* @__PURE__ */ import_react60.default.createElement(InputBase, __spreadProps(__spreadValues(__spreadValues({
     ref
   }, baseProps), errorProps), {
     id: id.current,
@@ -5886,9 +6086,91 @@ var Input2 = import_react61.default.forwardRef((_a, ref) => {
   })));
 });
 Input2.displayName = "Input";
-Input2.Skeleton = () => /* @__PURE__ */ import_react61.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react61.default.createElement(InputBase.Skeleton, null));
+Input2.Skeleton = () => /* @__PURE__ */ import_react60.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react60.default.createElement(InputBase.Skeleton, null));
 Input2.Skeleton.displayName = "Input.Skeleton";
 
+// src/common/DropdownMenu/DropdownMenu.tsx
+var import_react61 = __toESM(require("react"));
+var import_tick4 = __toESM(require_tick());
+var DropdownMenu2 = import_react61.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { maxHeight = "450px", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["maxHeight", "minWidth", "maxWidth", "className", "children"]);
+    return /* @__PURE__ */ import_react61.default.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__ */ import_react61.default.createElement("div", {
+  className: tw("p-3")
+}, children);
+DropdownMenu2.ContentContainer = ContentContainer;
+var List2 = import_react61.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+    return /* @__PURE__ */ import_react61.default.createElement("ul", __spreadValues({
+      ref
+    }, props), children);
+  }
+);
+DropdownMenu2.List = List2;
+var Group2 = import_react61.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, title, titleProps, children } = _b, props = __objRest(_b, ["className", "title", "titleProps", "children"]);
+    return /* @__PURE__ */ import_react61.default.createElement("li", __spreadValues({
+      ref
+    }, props), title && /* @__PURE__ */ import_react61.default.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 = import_react61.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { kind, highlighted, selected, className, icon, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "children"]);
+    return /* @__PURE__ */ import_react61.default.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__ */ import_react61.default.createElement(InlineIcon, {
+      icon
+    }), /* @__PURE__ */ import_react61.default.createElement("span", {
+      className: tw("grow")
+    }, children), selected && /* @__PURE__ */ import_react61.default.createElement(InlineIcon, {
+      icon: import_tick4.default
+    }));
+  }
+);
+DropdownMenu2.Item = Item3;
+var Description = ({ disabled, children }) => /* @__PURE__ */ import_react61.default.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__ */ import_react61.default.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__ */ import_react61.default.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
 var import_list = require("@react-stately/list");
 var filterCollection = (collection, inputValue, filter) => {
@@ -5941,8 +6223,8 @@ var DropdownMenu3 = (_a) => {
   const triggerRef = import_react62.default.useRef(null);
   const overlayRef = import_react62.default.useRef(null);
   const [trigger, items] = extractTriggerAndItems(children);
-  const state = (0, import_menu.useMenuTriggerState)(props);
-  const { menuTriggerProps, menuProps } = (0, import_menu2.useMenuTrigger)({}, state, triggerRef);
+  const state = (0, import_menu2.useMenuTriggerState)(props);
+  const { menuTriggerProps, menuProps } = (0, import_menu.useMenuTrigger)({}, state, triggerRef);
   const { overlayProps } = (0, import_overlays10.useOverlayPosition)({
     targetRef: triggerRef,
     overlayRef,
@@ -6015,7 +6297,7 @@ var MenuWrapper = (_a) => {
     disabledKeys,
     selectedKeys
   }, props));
-  const { menuProps } = (0, import_menu2.useMenu)(props, state, ref);
+  const { menuProps } = (0, import_menu.useMenu)(props, state, ref);
   const { contains } = (0, import_i18n.useFilter)({ sensitivity: "base" });
   const [search, setSearch] = import_react62.default.useState("");
   const filteredCollection = import_react62.default.useMemo(
@@ -6050,7 +6332,7 @@ var MenuWrapper = (_a) => {
 };
 var ItemWrapper = ({ item, state }) => {
   const ref = import_react62.default.useRef(null);
-  const { menuItemProps, descriptionProps, isSelected, isFocused, isDisabled } = (0, import_menu2.useMenuItem)(
+  const { menuItemProps, descriptionProps, isSelected, isFocused, isDisabled } = (0, import_menu.useMenuItem)(
     { key: item.key },
     state,
     ref
@@ -6069,7 +6351,7 @@ var ItemWrapper = ({ item, state }) => {
   }, descriptionProps), description));
 };
 var SectionWrapper = ({ section, state }) => {
-  const { itemProps, headingProps, groupProps } = (0, import_menu2.useMenuSection)({
+  const { itemProps, headingProps, groupProps } = (0, import_menu.useMenuSection)({
     "heading": section.rendered,
     "aria-label": section["aria-label"]
   });
@@ -6111,6 +6393,7 @@ var getDisabledItemKeys = (children) => {
 
 // src/components/EmptyState/EmptyState.tsx
 var import_react64 = __toESM(require("react"));
+var import_omit8 = __toESM(require("lodash/omit"));
 
 // src/components/Flexbox/FlexboxItem.tsx
 var import_react63 = __toESM(require("react"));
@@ -6133,7 +6416,6 @@ var FlexboxItem = Tailwindify(
 );
 
 // src/components/EmptyState/EmptyState.tsx
-var import_omit8 = __toESM(require("lodash/omit"));
 var EmptyStateLayout = /* @__PURE__ */ ((EmptyStateLayout2) => {
   EmptyStateLayout2["CenterVertical"] = "center-vertical";
   EmptyStateLayout2["LeftVertical"] = "left-vertical";
@@ -6211,12 +6493,12 @@ var EmptyState = ({
     justifyContent: template.justifyContent,
     alignItems: template.alignItems
   }, /* @__PURE__ */ import_react64.default.createElement(Typography2, {
-    variant: "heading-xl",
+    variant: "heading",
     htmlTag: "h2"
   }, title), description && /* @__PURE__ */ import_react64.default.createElement(Box, {
     marginTop: "5"
   }, /* @__PURE__ */ import_react64.default.createElement(Typography2, {
-    variant: "body-default",
+    variant: "default",
     color: "grey-60"
   }, description)), (secondaryAction || primaryAction) && /* @__PURE__ */ import_react64.default.createElement(Flexbox, {
     marginTop: "7",
@@ -6228,7 +6510,7 @@ var EmptyState = ({
     marginTop: "7"
   }, /* @__PURE__ */ import_react64.default.createElement(Typography2, {
     htmlTag: "div",
-    variant: "body-small",
+    variant: "small",
     color: "grey-60"
   }, footer)))));
 };
@@ -6285,7 +6567,7 @@ var ListItem = ({ name, icon, active = false }) => {
   return /* @__PURE__ */ import_react67.default.createElement(Flexbox, {
     alignItems: "center"
   }, /* @__PURE__ */ import_react67.default.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"}`
@@ -6300,21 +6582,21 @@ var ListItem = ({ name, icon, active = false }) => {
 
 // src/components/Modal/Modal.tsx
 var import_react69 = __toESM(require("react"));
-var import_castArray = __toESM(require("lodash/castArray"));
-var import_omit9 = __toESM(require("lodash/omit"));
-var import_overlays11 = require("@react-aria/overlays");
 var import_dialog2 = require("@react-aria/dialog");
 var import_focus3 = require("@react-aria/focus");
+var import_overlays11 = require("@react-aria/overlays");
 var import_utils10 = require("@react-aria/utils");
 var import_overlays12 = require("@react-stately/overlays");
+var import_castArray = __toESM(require("lodash/castArray"));
+var import_omit9 = __toESM(require("lodash/omit"));
 
 // src/components/Tabs/Tabs.tsx
 var import_react68 = __toESM(require("react"));
-var import_kebabCase = __toESM(require("lodash/kebabCase"));
 var import_isNumber4 = __toESM(require("lodash/isNumber"));
-var import_warningSign3 = __toESM(require_warningSign());
+var import_kebabCase = __toESM(require("lodash/kebabCase"));
 var import_chevronLeft2 = __toESM(require_chevronLeft());
 var import_chevronRight2 = __toESM(require_chevronRight());
+var import_warningSign3 = __toESM(require_warningSign());
 var isTabComponent = (c) => {
   return import_react68.default.isValidElement(c) && (c.type === Tab || c.type === ModalTab);
 };
@@ -6398,14 +6680,14 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         tabIndex: disabled ? void 0 : 0
       }, rest), /* @__PURE__ */ import_react68.default.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__ */ import_react68.default.createElement("span", {
         className: tw("whitespace-nowrap")
       }, title), (0, import_isNumber4.default)(badge) && /* @__PURE__ */ import_react68.default.createElement(Typography2, {
         htmlTag: "span",
-        variant: "body-small",
+        variant: "small",
         color: selected ? "primary-80" : "grey-5",
         className: "leading-none"
       }, /* @__PURE__ */ import_react68.default.createElement(TabBadge, {
@@ -6571,6 +6853,7 @@ var Modal2 = ({
   title,
   open,
   subtitle,
+  headerImage,
   onClose,
   children,
   primaryAction,
@@ -6598,15 +6881,17 @@ var Modal2 = ({
   }, /* @__PURE__ */ import_react69.default.createElement(Modal.Dialog, __spreadValues(__spreadValues({
     ref,
     size
-  }, modalProps), dialogProps), /* @__PURE__ */ import_react69.default.createElement(Modal.Header, {
-    className: tw({ "pb-3": isComponentType(children, ModalTabs) })
-  }, /* @__PURE__ */ import_react69.default.createElement(Modal.TitleContainer, null, /* @__PURE__ */ import_react69.default.createElement(Modal.Title, {
-    id: labelledBy
-  }, title), subtitle && /* @__PURE__ */ import_react69.default.createElement(Modal.Subtitle, null, subtitle)), /* @__PURE__ */ import_react69.default.createElement(IconButton, {
+  }, modalProps), dialogProps), /* @__PURE__ */ import_react69.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react69.default.createElement(IconButton, {
     "aria-label": "Close",
     icon: import_cross5.default,
     onClick: onClose
-  })), isComponentType(children, ModalTabs) ? import_react69.default.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ import_react69.default.createElement(Modal.Body, {
+  })), headerImage !== void 0 && /* @__PURE__ */ import_react69.default.createElement(Modal.HeaderImage, {
+    backgroundImage: headerImage
+  }), /* @__PURE__ */ import_react69.default.createElement(Modal.Header, {
+    className: tw({ "pb-3": isComponentType(children, ModalTabs) })
+  }, /* @__PURE__ */ import_react69.default.createElement(Modal.TitleContainer, null, /* @__PURE__ */ import_react69.default.createElement(Modal.Title, {
+    id: labelledBy
+  }, title), subtitle && /* @__PURE__ */ import_react69.default.createElement(Modal.Subtitle, null, subtitle))), isComponentType(children, ModalTabs) ? import_react69.default.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ import_react69.default.createElement(Modal.Body, {
     id: describedBy,
     tabIndex: 0,
     noFooter: !(secondaryActions || primaryAction)
@@ -6631,15 +6916,15 @@ var ModalTabs = createTabsComponent(
 );
 
 // src/components/MultiInput/MultiInput.tsx
+var import_react71 = __toESM(require("react"));
 var import_castArray2 = __toESM(require("lodash/castArray"));
 var import_identity = __toESM(require("lodash/identity"));
-var import_uniqueId4 = __toESM(require("lodash/uniqueId"));
 var import_omit10 = __toESM(require("lodash/omit"));
-var import_react71 = __toESM(require("react"));
+var import_uniqueId4 = __toESM(require("lodash/uniqueId"));
 
 // src/components/MultiInput/InputChip.tsx
-var import_smallCross = __toESM(require_smallCross());
 var import_react70 = __toESM(require("react"));
+var import_smallCross = __toESM(require_smallCross());
 var InputChip = import_react70.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { invalid = false, disabled, readOnly, className, onClick: _onClick, children } = _b, props = __objRest(_b, ["invalid", "disabled", "readOnly", "className", "onClick", "children"]);
@@ -6659,7 +6944,7 @@ var InputChip = import_react70.default.forwardRef(
       }),
       onClick
     }, props), /* @__PURE__ */ import_react70.default.createElement(Typography2, {
-      variant: "body-small",
+      variant: "small",
       color: invalid ? "error-80" : disabled ? "grey-40" : "grey-70"
     }, children), !readOnly && /* @__PURE__ */ import_react70.default.createElement("div", null, /* @__PURE__ */ import_react70.default.createElement(Icon, {
       icon: import_smallCross.default,
@@ -6733,6 +7018,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);
@@ -6752,6 +7038,7 @@ var MultiInputBase = (_a) => {
   };
   const handleKeyUp = (e) => {
     if (keyCodes.includes(e.key)) {
+      e.preventDefault();
       e.stopPropagation();
     }
   };
@@ -6825,6 +7112,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,
@@ -6874,14 +7162,14 @@ MultiInput.Skeleton = MultiInputSkeleton;
 MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
 
 // src/components/MultiSelect/MultiSelect.tsx
+var import_react72 = __toESM(require("react"));
+var import_overlays13 = require("@react-aria/overlays");
 var import_downshift2 = require("downshift");
 var import_isNil = __toESM(require("lodash/isNil"));
 var import_omit11 = __toESM(require("lodash/omit"));
 var import_omitBy = __toESM(require("lodash/omitBy"));
 var import_uniqueId5 = __toESM(require("lodash/uniqueId"));
 var import_match_sorter2 = require("match-sorter");
-var import_react72 = __toESM(require("react"));
-var import_overlays13 = require("@react-aria/overlays");
 var MultiSelectBase = (_a) => {
   var _b = _a, {
     id,
@@ -7087,17 +7375,31 @@ MultiSelect.Skeleton.displayName = "MultiSelect.Skeleton";
 
 // src/components/NativeSelect/NativeSelect.tsx
 var import_react73 = __toESM(require("react"));
-var import_uniqueId6 = __toESM(require("lodash/uniqueId"));
 var import_omit12 = __toESM(require("lodash/omit"));
+var import_uniqueId6 = __toESM(require("lodash/uniqueId"));
 var import_caretDown = __toESM(require_caretDown());
 var NativeSelectBase = import_react73.default.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 = (0, import_uniqueId6.default)("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__ */ import_react73.default.createElement("span", {
       className: tw("relative block")
     }, !readOnly && /* @__PURE__ */ import_react73.default.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__ */ import_react73.default.createElement(Icon, {
       icon: import_caretDown.default,
@@ -7107,9 +7409,11 @@ var NativeSelectBase = import_react73.default.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,
@@ -7119,10 +7423,10 @@ var NativeSelectBase = import_react73.default.forwardRef(
         ),
         props.className
       )
-    }), emptyDefault && /* @__PURE__ */ import_react73.default.createElement("option", {
-      value: "",
-      className: tw("hidden")
-    }), children));
+    }), props.placeholder && /* @__PURE__ */ import_react73.default.createElement("option", {
+      value: placeholderValue,
+      disabled: true
+    }, props.placeholder), children));
   }
 );
 NativeSelectBase.Skeleton = () => /* @__PURE__ */ import_react73.default.createElement(Skeleton, {
@@ -7148,6 +7452,7 @@ var NativeSelect = import_react73.default.forwardRef(
       "data-testid": dataTestId,
       disabled: props.disabled,
       required: props.required,
+      "aria-required": props.required,
       valid: props.valid,
       readOnly
     })));
@@ -7216,16 +7521,17 @@ var PageHeader = ({
 
 // src/components/Pagination/Pagination.tsx
 var import_react76 = __toESM(require("react"));
+var import_clamp = __toESM(require("lodash/clamp"));
 
 // src/components/Select/Select.tsx
 var import_react75 = __toESM(require("react"));
-var import_isNil2 = __toESM(require("lodash/isNil"));
-var import_isArray = __toESM(require("lodash/isArray"));
+var import_overlays14 = require("@react-aria/overlays");
+var import_downshift3 = require("downshift");
 var import_defaults = __toESM(require("lodash/defaults"));
-var import_uniqueId7 = __toESM(require("lodash/uniqueId"));
+var import_isArray = __toESM(require("lodash/isArray"));
+var import_isNil2 = __toESM(require("lodash/isNil"));
 var import_omit14 = __toESM(require("lodash/omit"));
-var import_downshift3 = require("downshift");
-var import_overlays14 = require("@react-aria/overlays");
+var import_uniqueId7 = __toESM(require("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;
@@ -7449,11 +7755,10 @@ var SelectSkeleton = () => /* @__PURE__ */ import_react75.default.createElement(
 Select2.Skeleton = SelectSkeleton;
 
 // src/components/Pagination/Pagination.tsx
-var import_clamp = __toESM(require("lodash/clamp"));
+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());
 var Pagination = ({
   currentPage,
   totalPages,
@@ -7564,14 +7869,14 @@ var Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ import_react77.default.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__ */ import_react77.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "div",
-    variant: "caption-default",
+    variant: "caption",
     className: classNames(tw("px-5 overflow-y-auto"), className)
   }), children);
 };
@@ -7675,9 +7980,9 @@ ProgressBar.Labels = (_a) => {
   return /* @__PURE__ */ import_react79.default.createElement("div", {
     className: classNames(tw("flex flex-row"), className)
   }, /* @__PURE__ */ import_react79.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
-    className: tw("grow text-grey-70 typography-caption-default")
+    className: tw("grow text-grey-70 typography-caption")
   }), startLabel), /* @__PURE__ */ import_react79.default.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));
 };
 
@@ -7719,35 +8024,10 @@ ProgressBar2.Skeleton = () => /* @__PURE__ */ import_react80.default.createEleme
 var import_react81 = __toESM(require("react"));
 var RadioButton2 = import_react81.default.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] = import_react81.default.useState((_a2 = _checked != null ? _checked : defaultChecked) != null ? _a2 : false);
-    if (_checked !== void 0 && checked !== _checked) {
-      setChecked(_checked);
-    }
-    return !readOnly || checked ? /* @__PURE__ */ import_react81.default.createElement(ControlLabel, {
+    const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
+    return !readOnly || isChecked ? /* @__PURE__ */ import_react81.default.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -7760,13 +8040,8 @@ var RadioButton2 = import_react81.default.forwardRef(
       ref,
       name
     }, props), {
-      checked,
       readOnly,
-      disabled,
-      onChange: (e) => {
-        setChecked(e.target.checked);
-        onChange == null ? void 0 : onChange(e);
-      }
+      disabled
     }))) : null;
   }
 );
@@ -7861,6 +8136,7 @@ RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
 
 // src/components/Section/Section.tsx
 var import_react84 = __toESM(require("react"));
+var import_castArray4 = __toESM(require("lodash/castArray"));
 
 // src/common/Section/Section.tsx
 var import_react83 = __toESM(require("react"));
@@ -7912,7 +8188,6 @@ Section2.Body = (_a) => {
 };
 
 // src/components/Section/Section.tsx
-var import_castArray4 = __toESM(require("lodash/castArray"));
 var Section3 = ({ title, subtitle, actions, children }) => /* @__PURE__ */ import_react84.default.createElement(Section2, null, title && /* @__PURE__ */ import_react84.default.createElement(import_react84.default.Fragment, null, /* @__PURE__ */ import_react84.default.createElement(Section2.Header, null, /* @__PURE__ */ import_react84.default.createElement(Section2.TitleContainer, null, /* @__PURE__ */ import_react84.default.createElement(Section2.Title, null, title), subtitle && /* @__PURE__ */ import_react84.default.createElement(Section2.Subtitle, null, subtitle)), /* @__PURE__ */ import_react84.default.createElement(Section2.Actions, null, actions && (0, import_castArray4.default)(actions).filter(Boolean).map((_a) => {
   var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
   return /* @__PURE__ */ import_react84.default.createElement(SecondaryButton, __spreadValues({
@@ -8004,45 +8279,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
+var import_react87 = __toESM(require("react"));
+
+// src/common/Switch/Switch.tsx
 var import_react86 = __toESM(require("react"));
 var Switch = import_react86.default.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__ */ import_react86.default.createElement("span", {
+      className: tw("relative inline-flex justify-center items-center self-center group")
+    }, /* @__PURE__ */ import_react86.default.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__ */ import_react86.default.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__ */ import_react86.default.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 = import_react87.default.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] = import_react86.default.useState((_a2 = _checked != null ? _checked : defaultChecked) != null ? _a2 : false);
-    if (_checked !== void 0 && checked !== _checked) {
-      setChecked(_checked);
-    }
-    return !readOnly || checked ? /* @__PURE__ */ import_react86.default.createElement(ControlLabel, {
+    const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
+    return !readOnly || isChecked ? /* @__PURE__ */ import_react87.default.createElement(ControlLabel, {
       htmlFor: id,
       label: children,
       "aria-label": ariaLabel,
@@ -8050,67 +8339,29 @@ var Switch = import_react86.default.forwardRef(
       readOnly,
       disabled,
       style: { gap: "0 8px" }
-    }, !readOnly && /* @__PURE__ */ import_react86.default.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__ */ import_react86.default.createElement("input", __spreadProps(__spreadValues({
+    }, !readOnly && /* @__PURE__ */ import_react87.default.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__ */ import_react86.default.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__ */ import_react86.default.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__ */ import_react86.default.createElement("div", {
+var SwitchSkeleton = () => /* @__PURE__ */ import_react87.default.createElement("div", {
   className: tw("flex gap-3")
-}, /* @__PURE__ */ import_react86.default.createElement(Skeleton, {
+}, /* @__PURE__ */ import_react87.default.createElement(Skeleton, {
   height: 20,
   width: 35
-}), /* @__PURE__ */ import_react86.default.createElement(Skeleton, {
+}), /* @__PURE__ */ import_react87.default.createElement(Skeleton, {
   height: 20,
   width: 150
 }));
-Switch.Skeleton = SwitchSkeleton;
+Switch2.Skeleton = SwitchSkeleton;
 
 // src/components/SwitchGroup/SwitchGroup.tsx
-var import_react87 = __toESM(require("react"));
+var import_react88 = __toESM(require("react"));
 var import_uniqueId9 = __toESM(require("lodash/uniqueId"));
 var SwitchGroup = (_a) => {
   var _b = _a, {
@@ -8129,7 +8380,7 @@ var SwitchGroup = (_a) => {
     "children"
   ]);
   var _a2;
-  const [selectedItems, setSelectedItems] = (0, import_react87.useState)((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
+  const [selectedItems, setSelectedItems] = (0, import_react88.useState)((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
   if (value !== void 0 && value !== selectedItems) {
     setSelectedItems(value);
   }
@@ -8142,19 +8393,19 @@ var SwitchGroup = (_a) => {
     setSelectedItems(updated);
     onChange == null ? void 0 : onChange(updated);
   };
-  return /* @__PURE__ */ import_react87.default.createElement(LabelControl, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react88.default.createElement(LabelControl, __spreadValues(__spreadValues({
     fieldset: true
-  }, labelControlProps), errorProps), /* @__PURE__ */ import_react87.default.createElement(InputGroup, {
+  }, labelControlProps), errorProps), /* @__PURE__ */ import_react88.default.createElement(InputGroup, {
     cols
-  }, import_react87.default.Children.map(children, (c) => {
+  }, import_react88.default.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 import_react87.default.cloneElement(c, {
+    return import_react88.default.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,
@@ -8164,35 +8415,35 @@ var SwitchGroup = (_a) => {
   })));
 };
 var SwitchGroupSkeleton = ({ options = 2 }) => {
-  return /* @__PURE__ */ import_react87.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react87.default.createElement("div", {
+  return /* @__PURE__ */ import_react88.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react88.default.createElement("div", {
     className: tw("flex flex-wrap flex-col gap-2")
-  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react87.default.createElement(Switch.Skeleton, {
+  }, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react88.default.createElement(Switch2.Skeleton, {
     key
   }))));
 };
 SwitchGroup.Skeleton = SwitchGroupSkeleton;
 
 // src/components/TagLabel/TagLabel.tsx
-var import_react88 = __toESM(require("react"));
+var import_react89 = __toESM(require("react"));
 var TagLabel = (_a) => {
   var _b = _a, { title, dense = false } = _b, rest = __objRest(_b, ["title", "dense"]);
-  return /* @__PURE__ */ import_react88.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react89.default.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
-var import_react89 = __toESM(require("react"));
-var import_uniqueId10 = __toESM(require("lodash/uniqueId"));
-var import_toString2 = __toESM(require("lodash/toString"));
+var import_react90 = __toESM(require("react"));
 var import_omit16 = __toESM(require("lodash/omit"));
-var TextareaBase = import_react89.default.forwardRef(
+var import_toString2 = __toESM(require("lodash/toString"));
+var import_uniqueId10 = __toESM(require("lodash/uniqueId"));
+var TextareaBase = import_react90.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { readOnly = false, valid = true } = _b, props = __objRest(_b, ["readOnly", "valid"]);
-    return /* @__PURE__ */ import_react89.default.createElement("textarea", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react90.default.createElement("textarea", __spreadProps(__spreadValues({
       ref
     }, props), {
       readOnly,
@@ -8200,23 +8451,23 @@ var TextareaBase = import_react89.default.forwardRef(
     }));
   }
 );
-TextareaBase.Skeleton = () => /* @__PURE__ */ import_react89.default.createElement(Skeleton, {
+TextareaBase.Skeleton = () => /* @__PURE__ */ import_react90.default.createElement(Skeleton, {
   height: 58
 });
-var Textarea = import_react89.default.forwardRef((props, ref) => {
+var Textarea = import_react90.default.forwardRef((props, ref) => {
   var _a, _b, _c;
-  const [value, setValue] = (0, import_react89.useState)((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
-  const id = (0, import_react89.useRef)((_c = props.id) != null ? _c : `textarea-${(0, import_uniqueId10.default)()}`);
+  const [value, setValue] = (0, import_react90.useState)((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
+  const id = (0, import_react90.useRef)((_c = props.id) != null ? _c : `textarea-${(0, import_uniqueId10.default)()}`);
   const errorMessageId = (0, import_uniqueId10.default)();
   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 = (0, import_omit16.default)(props, Object.keys(labelControlProps));
-  return /* @__PURE__ */ import_react89.default.createElement(LabelControl, __spreadValues({
+  return /* @__PURE__ */ import_react90.default.createElement(LabelControl, __spreadValues({
     id: `${id.current}-label`,
     htmlFor: id.current,
     messageId: errorMessageId,
     length: value !== void 0 ? (0, import_toString2.default)(value).length : void 0
-  }, labelControlProps), /* @__PURE__ */ import_react89.default.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
+  }, labelControlProps), /* @__PURE__ */ import_react90.default.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
     ref
   }, baseProps), errorProps), {
     id: id.current,
@@ -8232,47 +8483,47 @@ var Textarea = import_react89.default.forwardRef((props, ref) => {
     valid: props.valid
   })));
 });
-var TextAreaSkeleton = () => /* @__PURE__ */ import_react89.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react89.default.createElement(TextareaBase.Skeleton, null));
+var TextAreaSkeleton = () => /* @__PURE__ */ import_react90.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react90.default.createElement(TextareaBase.Skeleton, null));
 Textarea.Skeleton = TextAreaSkeleton;
 
 // src/components/Timeline/Timeline.tsx
-var import_react91 = __toESM(require("react"));
+var import_react92 = __toESM(require("react"));
 
 // src/common/Timeline/Timeline.tsx
-var import_react90 = __toESM(require("react"));
+var import_react91 = __toESM(require("react"));
 var Timeline = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ import_react90.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react91.default.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__ */ import_react90.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react91.default.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__ */ import_react90.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react91.default.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__ */ import_react90.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react91.default.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__ */ import_react90.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react91.default.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__ */ import_react90.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react91.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("bg-grey-30 h-[6px] w-[6px] rounded"), className)
   }));
 };
@@ -8283,64 +8534,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__ */ import_react91.default.createElement("div", null, import_react91.default.Children.map(children, (item) => {
+var Timeline2 = ({ children }) => /* @__PURE__ */ import_react92.default.createElement("div", null, import_react92.default.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__ */ import_react91.default.createElement(Timeline, {
+    return /* @__PURE__ */ import_react92.default.createElement(Timeline, {
       key: key != null ? key : props.title
-    }, /* @__PURE__ */ import_react91.default.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ import_react91.default.createElement(Icon, {
+    }, /* @__PURE__ */ import_react92.default.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ import_react92.default.createElement(Icon, {
       icon: import_error4.default,
       color: "error-30"
-    }) : props.variant === "warning" ? /* @__PURE__ */ import_react91.default.createElement(Icon, {
+    }) : props.variant === "warning" ? /* @__PURE__ */ import_react92.default.createElement(Icon, {
       icon: import_warningSign4.default,
       color: "warning-30"
-    }) : props.variant === "info" ? /* @__PURE__ */ import_react91.default.createElement(Icon, {
+    }) : props.variant === "info" ? /* @__PURE__ */ import_react92.default.createElement(Icon, {
       icon: import_time.default,
       color: "info-30"
-    }) : /* @__PURE__ */ import_react91.default.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ import_react91.default.createElement(Typography2.Caption, {
-      fontWeight: 600
-    }, props.title), /* @__PURE__ */ import_react91.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react91.default.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ import_react91.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react91.default.createElement(Typography2, null, props.children)));
+    }) : /* @__PURE__ */ import_react92.default.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ import_react92.default.createElement(Typography2.Caption, {
+      color: "grey-50"
+    }, props.title), /* @__PURE__ */ import_react92.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react92.default.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ import_react92.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react92.default.createElement(Typography2, null, props.children)));
   }
 }));
-var TimelineItemSkeleton = () => /* @__PURE__ */ import_react91.default.createElement(Timeline, null, /* @__PURE__ */ import_react91.default.createElement(Timeline.Separator, null, /* @__PURE__ */ import_react91.default.createElement(Skeleton, {
+var TimelineItemSkeleton = () => /* @__PURE__ */ import_react92.default.createElement(Timeline, null, /* @__PURE__ */ import_react92.default.createElement(Timeline.Separator, null, /* @__PURE__ */ import_react92.default.createElement(Skeleton, {
   width: 6,
   height: 6,
   rounded: true
-})), /* @__PURE__ */ import_react91.default.createElement(Skeleton, {
+})), /* @__PURE__ */ import_react92.default.createElement(Skeleton, {
   height: 12,
   width: 120
-}), /* @__PURE__ */ import_react91.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react91.default.createElement(Skeleton, {
+}), /* @__PURE__ */ import_react92.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react92.default.createElement(Skeleton, {
   width: 2
-})), /* @__PURE__ */ import_react91.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react91.default.createElement(Box, {
+})), /* @__PURE__ */ import_react92.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react92.default.createElement(Box, {
   display: "flex",
   flexDirection: "column",
   gap: "3"
-}, /* @__PURE__ */ import_react91.default.createElement(Skeleton, {
+}, /* @__PURE__ */ import_react92.default.createElement(Skeleton, {
   height: 32,
   width: "100%"
-}), /* @__PURE__ */ import_react91.default.createElement(Skeleton, {
+}), /* @__PURE__ */ import_react92.default.createElement(Skeleton, {
   height: 32,
   width: "73%"
-}), /* @__PURE__ */ import_react91.default.createElement(Skeleton, {
+}), /* @__PURE__ */ import_react92.default.createElement(Skeleton, {
   height: 32,
   width: "80%"
 }))));
-var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ import_react91.default.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ import_react91.default.createElement(TimelineItemSkeleton, {
+var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ import_react92.default.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ import_react92.default.createElement(TimelineItemSkeleton, {
   key
 })));
 Timeline2.Item = TimelineItem;
 Timeline2.Skeleton = TimelineSkeleton;
 
 // src/utils/table/useTableSelect.ts
-var import_react92 = __toESM(require("react"));
+var import_react93 = __toESM(require("react"));
 var useTableSelect = (data, { key }) => {
-  const [selected, setSelected] = import_react92.default.useState([]);
+  const [selected, setSelected] = import_react93.default.useState([]);
   const allSelected = selected.length === data.length;
   const isSelected = (dot) => selected.includes(dot[key]);
   const selectAll = () => setSelected(data.map((dot) => dot[key]));
@@ -8365,15 +8616,15 @@ var useTableSelect = (data, { key }) => {
 };
 
 // src/components/Pagination/usePagination.tsx
-var import_react93 = require("react");
+var import_react94 = require("react");
 var initialState = {
   currentPage: 1,
   pageSize: 10
 };
 var getPageIndex = (currentPage, pageSize) => currentPage === 0 ? 0 : (currentPage - 1) * pageSize;
 var usePagination = (items, options) => {
-  const [currentPage, setCurrentPage] = (0, import_react93.useState)((options == null ? void 0 : options.initialPage) || initialState.currentPage);
-  const [pageSize, setPageSize] = (0, import_react93.useState)((options == null ? void 0 : options.initialPageSize) || initialState.pageSize);
+  const [currentPage, setCurrentPage] = (0, import_react94.useState)((options == null ? void 0 : options.initialPage) || initialState.currentPage);
+  const [pageSize, setPageSize] = (0, import_react94.useState)((options == null ? void 0 : options.initialPageSize) || initialState.pageSize);
   const totalPages = items.length > 0 ? Math.ceil(items.length / pageSize) : 1;
   const hasPreviousPage = currentPage > 1;
   const hasNextPage = currentPage < totalPages;
@@ -8382,7 +8633,7 @@ var usePagination = (items, options) => {
     setPageSize(pageSize2);
     setCurrentPage((options == null ? void 0 : options.initialPage) || initialState.currentPage);
   };
-  (0, import_react93.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     setCurrentPage((options == null ? void 0 : options.initialPage) || initialState.currentPage);
   }, [items.length]);
   return [