@aivenio/aquarium 1.2.1 → 1.3.0

package/dist/atoms.mjs

@@ -175,6 +175,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",
@@ -184,7 +314,6 @@ var require_tokens = __commonJS({
                   fontWeight: 400,
                   fontStyle: "normal",
                   lineHeight: 1.2,
-                  letterSpacing: 0,
                   textTransform: "none"
                 },
                 fontPostScriptName: null
@@ -606,6 +735,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",
@@ -984,12 +1243,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,
@@ -1032,12 +1291,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,
@@ -1048,12 +1307,12 @@ var require_cross = __commonJS({
   }
 });
 
-// src/icons/tick.js
-var require_tick = __commonJS({
-  "src/icons/tick.js"(exports) {
+// src/icons/minus.js
+var require_minus = __commonJS({
+  "src/icons/minus.js"(exports) {
     "use strict";
     var data = {
-      "body": '<path fill="currentColor" fill-rule="evenodd" d="M17 4c-.28 0-.53.11-.71.29L7 13.59 3.71 10.3A.965.965 0 003 10a1.003 1.003 0 00-.71 1.71l4 4c.18.18.43.29.71.29.28 0 .53-.11.71-.29l10-10A1.003 1.003 0 0017 4Z" clip-rule="evenodd"/>',
+      "body": '<path fill="currentColor" fill-rule="evenodd" d="M16 9H4c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1Z" clip-rule="evenodd"/>',
       "left": 0,
       "top": 0,
       "width": 20,
@@ -1064,12 +1323,12 @@ var require_tick = __commonJS({
   }
 });
 
-// src/icons/minus.js
-var require_minus = __commonJS({
-  "src/icons/minus.js"(exports) {
+// src/icons/tick.js
+var require_tick = __commonJS({
+  "src/icons/tick.js"(exports) {
     "use strict";
     var data = {
-      "body": '<path fill="currentColor" fill-rule="evenodd" d="M16 9H4c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1Z" clip-rule="evenodd"/>',
+      "body": '<path fill="currentColor" fill-rule="evenodd" d="M17 4c-.28 0-.53.11-.71.29L7 13.59 3.71 10.3A.965.965 0 003 10a1.003 1.003 0 00-.71 1.71l4 4c.18.18.43.29.71.29.28 0 .53-.11.71-.29l10-10A1.003 1.003 0 0017 4Z" clip-rule="evenodd"/>',
       "left": 0,
       "top": 0,
       "width": 20,
@@ -1115,82 +1374,22 @@ var require_search = __commonJS({
 // src/common/Alert/Alert.tsx
 import React8 from "react";
 
-// src/utils/tailwind.ts
-import originalClassNames from "classnames";
-function cleanClassNames(classNames2) {
-  const tokens = classNames2.split(/\s+/);
-  return tokens.filter((item) => item).join(" ");
-}
-function tw(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, classesOrModifiers4, classesOrModifiers5, classesOrModifiers6, classesOrModifiers7, classesOrModifiers8, classesOrModifiers9, classesOrModifiers10) {
-  const result = originalClassNames(
-    classesOrModifiers1,
-    classesOrModifiers2,
-    classesOrModifiers3,
-    classesOrModifiers4,
-    classesOrModifiers5,
-    classesOrModifiers6,
-    classesOrModifiers7,
-    classesOrModifiers8,
-    classesOrModifiers9,
-    classesOrModifiers10
-  );
-  return cleanClassNames(result);
-}
-var classNames = (...args) => {
-  const result = originalClassNames(...args);
-  return cleanClassNames(result);
-};
-
 // src/components/Button/Button.tsx
 import React6 from "react";
 
-// src/components/Icon/Icon.tsx
-import React from "react";
-import {
-  Icon as IconifyIconComponent,
-  InlineIcon as IconifyInlineIconComponent
-} from "@iconify/react";
-var Icon = React.forwardRef((_a, ref) => {
-  var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
-  const classes = classNames(className, color && `text-${color}`);
-  return /* @__PURE__ */ React.createElement(IconifyIconComponent, __spreadValues({
-    ref: ref != null ? ref : void 0,
-    className: classes !== "" ? classes : void 0
-  }, rest));
-});
-var InlineIcon = React.forwardRef((_a, ref) => {
-  var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
-  const classes = classNames(color && `text-${color}`);
-  return /* @__PURE__ */ React.createElement("span", {
-    className: classNames(tw("children:inline-block inline-flex justify-center items-center"), className)
-  }, /* @__PURE__ */ React.createElement(IconifyInlineIconComponent, __spreadValues({
-    ref: ref != null ? ref : void 0,
-    className: classes !== "" ? classes : void 0
-  }, rest)));
-});
-
 // src/components/Flexbox/Flexbox.tsx
-import React4 from "react";
+import React3 from "react";
 
 // src/components/Tailwindify/Tailwindify.tsx
-import React3 from "react";
+import React2 from "react";
 import get2 from "lodash/get";
 import isUndefined4 from "lodash/isUndefined";
 
 // src/utils/useStyle.ts
 import { useContext } from "react";
 import get from "lodash/get";
-import isUndefined3 from "lodash/isUndefined";
 import isPlainObject2 from "lodash/isPlainObject";
-
-// src/components/Context/Context.tsx
-import React2 from "react";
-import { ModalProvider } from "@react-aria/overlays";
-
-// src/utils/breakpoints.ts
-import isUndefined from "lodash/isUndefined";
-import orderBy from "lodash/orderBy";
-import isPlainObject from "lodash/isPlainObject";
+import isUndefined3 from "lodash/isUndefined";
 
 // tailwind.theme.json
 var tailwind_theme_default = {
@@ -1715,7 +1914,14 @@ var tailwind_theme_default = {
   }
 };
 
+// src/components/Context/Context.tsx
+import React from "react";
+import { ModalProvider } from "@react-aria/overlays";
+
 // src/utils/breakpoints.ts
+import isPlainObject from "lodash/isPlainObject";
+import isUndefined from "lodash/isUndefined";
+import orderBy from "lodash/orderBy";
 var { screens: allBreakpoints } = tailwind_theme_default;
 var SCREEN_TO_PX_MAPPING = getPxMapping(allBreakpoints);
 var BREAKPOINT_PRIORITY = orderBy(
@@ -1760,15 +1966,15 @@ function selectBreakpointValue(value, matches) {
 }
 
 // src/utils/useWindowSize.ts
-import { useState, useEffect } from "react";
-import isUndefined2 from "lodash/isUndefined";
+import { useEffect, useState } from "react";
 import debounce from "lodash/debounce";
+import isUndefined2 from "lodash/isUndefined";
 
 // src/components/Context/Context.tsx
 var context = {
   breakpointMatches: getMatches(void 0)
 };
-var DesignSystemContext = React2.createContext(context);
+var DesignSystemContext = React.createContext(context);
 
 // src/utils/useStyle.ts
 var THEME_MAPPING = {
@@ -1892,8 +2098,8 @@ function Tailwindify(Component) {
     const componentProps = __spreadProps(__spreadValues({}, otherProps), {
       style: finalStyle
     });
-    const childrenWithProps = React3.Children.map(children, (child, index) => {
-      if (!React3.isValidElement(child)) {
+    const childrenWithProps = React2.Children.map(children, (child, index) => {
+      if (!React2.isValidElement(child)) {
         return child;
       }
       const isLastChild = index === children.length - 1;
@@ -1914,9 +2120,9 @@ function Tailwindify(Component) {
       }
       const childStyle = get2(child, ["props", "style"], {});
       const newProps = __spreadProps(__spreadValues({}, childProps), { style: __spreadValues(__spreadValues({}, childStyle), additionalStyle) });
-      return React3.cloneElement(child, newProps);
+      return React2.cloneElement(child, newProps);
     });
-    return /* @__PURE__ */ React3.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ React2.createElement(Component, __spreadValues({
       className,
       children: childrenWithProps
     }, componentProps));
@@ -1952,17 +2158,70 @@ var Flexbox = Tailwindify(
       rowGap
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ React4.createElement(HtmlElement, {
+    return /* @__PURE__ */ React3.createElement(HtmlElement, {
       style: __spreadValues(__spreadValues({}, hookStyle), style),
       className
     }, children);
   }
 );
 
+// src/components/Icon/Icon.tsx
+import React4 from "react";
+import {
+  Icon as IconifyIconComponent,
+  InlineIcon as IconifyInlineIconComponent
+} from "@iconify/react";
+
+// src/utils/tailwind.ts
+import originalClassNames from "classnames";
+function cleanClassNames(classNames2) {
+  const tokens = classNames2.split(/\s+/);
+  return tokens.filter((item) => item).join(" ");
+}
+function tw(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, classesOrModifiers4, classesOrModifiers5, classesOrModifiers6, classesOrModifiers7, classesOrModifiers8, classesOrModifiers9, classesOrModifiers10) {
+  const result = originalClassNames(
+    classesOrModifiers1,
+    classesOrModifiers2,
+    classesOrModifiers3,
+    classesOrModifiers4,
+    classesOrModifiers5,
+    classesOrModifiers6,
+    classesOrModifiers7,
+    classesOrModifiers8,
+    classesOrModifiers9,
+    classesOrModifiers10
+  );
+  return cleanClassNames(result);
+}
+var classNames = (...args) => {
+  const result = originalClassNames(...args);
+  return cleanClassNames(result);
+};
+
+// src/components/Icon/Icon.tsx
+var Icon = React4.forwardRef((_a, ref) => {
+  var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
+  const classes = classNames(className, color && `text-${color}`);
+  return /* @__PURE__ */ React4.createElement(IconifyIconComponent, __spreadValues({
+    ref: ref != null ? ref : void 0,
+    className: classes !== "" ? classes : void 0
+  }, rest));
+});
+var InlineIcon = React4.forwardRef((_a, ref) => {
+  var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
+  const classes = classNames(color && `text-${color}`);
+  return /* @__PURE__ */ React4.createElement("span", {
+    className: classNames(tw("children:inline-block inline-flex justify-center items-center"), className)
+  }, /* @__PURE__ */ React4.createElement(IconifyInlineIconComponent, __spreadValues({
+    ref: ref != null ? ref : void 0,
+    className: classes !== "" ? classes : void 0
+  }, rest)));
+});
+
 // src/components/Tooltip/Tooltip.tsx
 import React5 from "react";
+import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
 import { useTooltip, useTooltipTrigger } from "@react-aria/tooltip";
-import { useOverlayPosition, OverlayContainer } from "@react-aria/overlays";
 import { mergeProps } from "@react-aria/utils";
 
 // src/components/Tooltip/useTooltipTriggerState.ts
@@ -2149,7 +2408,7 @@ var TooltipWrapper = React5.forwardRef(
     const arrowStyle = getArrowStyle(ref.current, placement, (_a2 = arrowProps.style) != null ? _a2 : {});
     return /* @__PURE__ */ React5.createElement(OverlayContainer, null, /* @__PURE__ */ React5.createElement("div", __spreadValues({
       ref,
-      className: tw("p-3 rounded-sm typography-caption-default max-w-[320px] bg-grey-90 text-white")
+      className: tw("p-3 rounded-sm typography-caption max-w-[320px] bg-grey-90 text-white")
     }, mergeProps(props, tooltipProps)), props.children, /* @__PURE__ */ React5.createElement(Arrow, __spreadProps(__spreadValues({}, arrowProps), {
       style: arrowStyle
     }))));
@@ -2306,8 +2565,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,
@@ -2402,7 +2661,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,
@@ -2426,10 +2685,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,
@@ -2477,16 +2736,15 @@ var Alert = (_a) => {
 Alert.Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ React8.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
-    variant: "body-default",
+    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__ */ React8.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
-    variant: "body-small",
+    variant: "small",
     color: "grey-60",
     className: classNames(tw("col-start-2"), className)
   }), children);
@@ -2520,45 +2778,35 @@ Alert.Dismiss = (_a) => {
 
 // src/common/Checkbox/Checkbox.tsx
 import React9 from "react";
-var import_tick = __toESM(require_tick());
 var import_minus = __toESM(require_minus());
+var import_tick = __toESM(require_tick());
 var Checkbox = React9.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__ */ React9.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__ */ React9.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__ */ React9.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_tick.default
+    })), /* @__PURE__ */ React9.createElement(Icon, {
+      icon: indeterminate ? import_minus.default : import_tick.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
+        }
+      )
     }));
   }
 );
@@ -2572,8 +2820,8 @@ var Container = React10.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
       )
@@ -2586,8 +2834,8 @@ var Chip = {
 
 // src/common/Dialog/Dialog.tsx
 var import_confirm2 = __toESM(require_confirm());
-var import_warningSign2 = __toESM(require_warningSign());
 var import_error2 = __toESM(require_error());
+var import_warningSign2 = __toESM(require_warningSign());
 var DIALOG_ICONS_AND_COLORS = {
   confirmation: {
     icon: import_confirm2.default,
@@ -2609,62 +2857,116 @@ import React12 from "react";
 // src/components/Typography/Typography.tsx
 import React11 from "react";
 var Typography2 = (props) => /* @__PURE__ */ React11.createElement(Typography, __spreadValues({}, props));
-Typography2.Heading = (_a) => {
+Typography2.LargeHeading = (_a) => {
   var _b = _a, { htmlTag = "h1" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ React11.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__ */ React11.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__ */ React11.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__ */ React11.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__ */ React11.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__ */ React11.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__ */ React11.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__ */ React11.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__ */ React11.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
-    variant: "body-small-medium"
+    variant: "small-strong"
+  }));
+};
+Typography2.Small = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ React11.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    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__ */ React11.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "caption"
+  }));
+};
+Typography2.LargeText = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ React11.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
-    variant: "caption-default"
+    variant: "large-strong"
+  }));
+};
+Typography2.MediumText = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ React11.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "default-strong"
+  }));
+};
+Typography2.Text = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ React11.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "default"
+  }));
+};
+Typography2.SmallText = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ React11.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "small"
+  }));
+};
+Typography2.SmallTextBold = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ React11.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "small-strong"
   }));
 };
 
@@ -2678,7 +2980,7 @@ var DropdownMenu = React12.forwardRef(
       style: { maxHeight, minWidth, maxWidth },
       className: classNames(
         className,
-        "bg-white w-full overflow-y-auto overflow-x-hidden typography-body-small-medium text-grey-70"
+        "bg-white w-full overflow-y-auto overflow-x-hidden typography-small text-grey-70"
       )
     }, props), children);
   }
@@ -2702,13 +3004,9 @@ var Group = React12.forwardRef(
     return /* @__PURE__ */ React12.createElement("li", __spreadValues({
       ref
     }, props), title && /* @__PURE__ */ React12.createElement("div", __spreadValues({
-      className: classNames(
-        className,
-        "p-3 text-grey-40 uppercase cursor-default typography-caption-default font-medium",
-        {
-          "text-grey-20": props.disabled
-        }
-      )
+      className: classNames(className, "p-3 text-grey-40 uppercase cursor-default typography-caption", {
+        "text-grey-20": props.disabled
+      })
     }, titleProps), title), children);
   }
 );
@@ -2860,7 +3158,7 @@ Modal.Dialog = React15.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",
@@ -2877,11 +3175,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__ */ React15.createElement("img", __spreadProps(__spreadValues({
+    "aria-hidden": true,
+    src: backgroundImage != null ? backgroundImage : void 0
+  }, rest), {
+    className: classNames(common, tw("object-cover"), className)
+  })) : /* @__PURE__ */ React15.createElement("div", {
+    className: classNames(common, tw("bg-grey-5"), className)
+  });
+};
+Modal.CloseButtonContainer = (_a) => {
+  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React15.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__ */ React15.createElement(Typography, __spreadValues({
     htmlTag: "h2",
-    variant: "heading-large",
+    variant: "subheading",
     color: "grey-90",
     className: classNames(tw("leading-none"), className)
   }, rest), children);
@@ -2889,7 +3205,7 @@ Modal.Title = (_a) => {
 Modal.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ React15.createElement(Typography, __spreadValues({
-    variant: "body-small",
+    variant: "small",
     color: "grey-60"
   }, rest), children);
 };
@@ -2919,38 +3235,56 @@ Modal.Actions = (_a) => {
   }), children);
 };
 
-// src/common/PopoverDialog/PopoverDialog.tsx
+// src/common/Popover/Popover.tsx
 import React16 from "react";
+var PopoverPanel = React16.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ React16.createElement("div", __spreadValues({
+    ref,
+    className: classNames(
+      className,
+      tw(
+        "rounded-sm shadow-16dp bg-white mt-1 focus-visible:outline-0 focus-visible:border-info-70 border border-grey-20"
+      )
+    )
+  }, props), children);
+});
+var Popover = {
+  Panel: PopoverPanel
+};
+
+// src/common/PopoverDialog/PopoverDialog.tsx
+import React17 from "react";
 var Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React16.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React17.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-5 gap-3 flex items-center"), className)
   }), children);
 };
 var Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React16.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React17.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__ */ React16.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "div",
-    variant: "caption-default",
+    variant: "caption",
     className: classNames(tw("px-5 overflow-y-auto"), className)
   }), children);
 };
 var Footer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React16.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React17.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("p-5"), className)
   }), children);
 };
 var Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ React16.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React17.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4"), className)
   }), children);
 };
@@ -2962,62 +3296,38 @@ var PopoverDialog = {
   Actions
 };
 
-// src/common/Popover/Popover.tsx
-import React17 from "react";
-var PopoverPanel = React17.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React17.createElement("div", __spreadValues({
-    ref,
-    className: classNames(
-      className,
-      tw(
-        "rounded-sm shadow-16dp bg-white mt-1 focus-visible:outline-0 focus-visible:border-info-70 border border-grey-20"
-      )
-    )
-  }, props), children);
-});
-var Popover = {
-  Panel: PopoverPanel
-};
-
 // src/common/RadioButton/RadioButton.tsx
 import React18 from "react";
 var RadioButton = React18.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"]);
+    var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
     return /* @__PURE__ */ React18.createElement("span", {
-      className: classNames(
-        tw("inline-flex justify-center items-center relative self-center", {
-          "text-grey-30": disabled,
-          "text-grey-100": !disabled
-        })
-      )
+      className: classNames(tw("inline-flex justify-center items-center relative self-center"))
     }, /* @__PURE__ */ React18.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__ */ React18.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__ */ React18.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
       })
-    }));
+    })));
   }
 );
 
@@ -3055,7 +3365,7 @@ var InputContainer = React19.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",
@@ -3077,7 +3387,7 @@ var Input = React19.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,
@@ -3122,7 +3432,7 @@ var Group2 = React19.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
       }
@@ -3193,37 +3503,74 @@ var Select = {
   Toggle
 };
 
-// src/common/Table/Table.tsx
+// src/common/Switch/Switch.tsx
 import React20 from "react";
-var import_chevronUp2 = __toESM(require_chevronUp());
+var Switch = React20.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
+    return /* @__PURE__ */ React20.createElement("span", {
+      className: tw("relative inline-flex justify-center items-center self-center group")
+    }, /* @__PURE__ */ React20.createElement("input", __spreadProps(__spreadValues({
+      id,
+      ref,
+      type: "checkbox",
+      name
+    }, props), {
+      className: tw("opacity-0 peer/switch w-0 h-0"),
+      readOnly,
+      disabled
+    })), /* @__PURE__ */ React20.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__ */ React20.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/common/Table/Table.tsx
+import React21 from "react";
 var import_chevronDown3 = __toESM(require_chevronDown());
-var HeadContext = React20.createContext(null);
-var tableClassNames = tw("w-full relative typography-body-default border-spacing-0");
+var import_chevronUp2 = __toESM(require_chevronUp());
+var HeadContext = React21.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__ */ React20.createElement("table", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React21.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__ */ React20.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ React20.createElement("tr", null, /* @__PURE__ */ React20.createElement(HeadContext.Provider, {
+  return /* @__PURE__ */ React21.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ React21.createElement("tr", null, /* @__PURE__ */ React21.createElement(HeadContext.Provider, {
     value: { children, sticky }
   }, children)));
 };
 var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React20.createElement("tbody", __spreadValues({}, rest), children);
+  return /* @__PURE__ */ React21.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__ */ React20.createElement("tr", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React21.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
@@ -3235,25 +3582,25 @@ var getHeadCellClassNames = (sticky = true) => {
 };
 var TableCell = (_a) => {
   var _b = _a, { children, className, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "align"]);
-  const headContext = React20.useContext(HeadContext);
-  return headContext ? /* @__PURE__ */ React20.createElement("th", __spreadProps(__spreadValues({}, rest), {
+  const headContext = React21.useContext(HeadContext);
+  return headContext ? /* @__PURE__ */ React21.createElement("th", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
       getHeadCellClassNames(headContext.sticky),
       getAlignClassNames(align),
       className
     )
-  }), children) : /* @__PURE__ */ React20.createElement("td", __spreadProps(__spreadValues({}, rest), {
+  }), children) : /* @__PURE__ */ React21.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__ */ React20.createElement(Table.Cell, {
+  return /* @__PURE__ */ React21.createElement(Table.Cell, {
     className: tw("leading-[0px]")
-  }, props.type === "radio" ? /* @__PURE__ */ React20.createElement(RadioButton, __spreadValues({
+  }, props.type === "radio" ? /* @__PURE__ */ React21.createElement(RadioButton, __spreadValues({
     "aria-label": ariaLabel
-  }, props)) : /* @__PURE__ */ React20.createElement(Checkbox, __spreadValues({
+  }, props)) : /* @__PURE__ */ React21.createElement(Checkbox, __spreadValues({
     "aria-label": ariaLabel
   }, props)));
 };
@@ -3263,39 +3610,39 @@ var getSortCellIconClassNames = (active) => {
 };
 var TableSortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ React20.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ React21.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction
-  }), /* @__PURE__ */ React20.createElement("span", {
+  }), /* @__PURE__ */ React21.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ React20.createElement("div", {
+  }, children, /* @__PURE__ */ React21.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ React20.createElement(InlineIcon, {
+  }, /* @__PURE__ */ React21.createElement(InlineIcon, {
     icon: import_chevronUp2.default,
     className: getSortCellIconClassNames(direction === "descending")
-  }), /* @__PURE__ */ React20.createElement(InlineIcon, {
+  }), /* @__PURE__ */ React21.createElement(InlineIcon, {
     icon: import_chevronDown3.default,
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
 };
-var Item3 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React20.createElement("div", {
+var Item3 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ React21.createElement("div", {
   className: tw("flex gap-4 items-center")
-}, image && /* @__PURE__ */ React20.createElement("img", {
+}, image && /* @__PURE__ */ React21.createElement("img", {
   src: image,
   alt: imageAlt,
   style: { width: imageSize, height: imageSize }
-}), /* @__PURE__ */ React20.createElement("div", null, title, caption && /* @__PURE__ */ React20.createElement(Typography2.Caption, null, caption)));
-Table.Head = React20.memo(TableHead);
-Table.Body = React20.memo(TableBody);
-Table.Row = React20.memo(TableRow);
-Table.Cell = React20.memo(TableCell);
-Table.SortCell = React20.memo(TableSortCell);
-Table.SelectCell = React20.memo(TableSelectCell);
+}), /* @__PURE__ */ React21.createElement("div", null, title, caption && /* @__PURE__ */ React21.createElement(Typography2.Caption, null, caption)));
+Table.Head = React21.memo(TableHead);
+Table.Body = React21.memo(TableBody);
+Table.Row = React21.memo(TableRow);
+Table.Cell = React21.memo(TableCell);
+Table.SortCell = React21.memo(TableSortCell);
+Table.SelectCell = React21.memo(TableSelectCell);
 export {
   Alert,
   Checkbox,
@@ -3309,6 +3656,7 @@ export {
   PopoverDialog,
   RadioButton,
   Select,
+  Switch,
   Table,
   cellClassNames,
   getAlignClassNames,