@aivenio/aquarium 1.2.1 → 1.3.0

package/dist/atoms.cjs

@@ -181,6 +181,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",
@@ -190,7 +320,6 @@ var require_tokens = __commonJS({
                   fontWeight: 400,
                   fontStyle: "normal",
                   lineHeight: 1.2,
-                  letterSpacing: 0,
                   textTransform: "none"
                 },
                 fontPostScriptName: null
@@ -612,6 +741,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",
@@ -990,12 +1249,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,
@@ -1038,12 +1297,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,
@@ -1054,12 +1313,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,
@@ -1070,12 +1329,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,
@@ -1133,6 +1392,7 @@ __export(common_exports, {
   PopoverDialog: () => PopoverDialog,
   RadioButton: () => RadioButton,
   Select: () => Select,
+  Switch: () => Switch,
   Table: () => Table,
   cellClassNames: () => cellClassNames,
   getAlignClassNames: () => getAlignClassNames,
@@ -1150,79 +1410,22 @@ module.exports = __toCommonJS(common_exports);
 // src/common/Alert/Alert.tsx
 var import_react12 = __toESM(require("react"));
 
-// src/utils/tailwind.ts
-var import_classnames = __toESM(require("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 = (0, import_classnames.default)(
-    classesOrModifiers1,
-    classesOrModifiers2,
-    classesOrModifiers3,
-    classesOrModifiers4,
-    classesOrModifiers5,
-    classesOrModifiers6,
-    classesOrModifiers7,
-    classesOrModifiers8,
-    classesOrModifiers9,
-    classesOrModifiers10
-  );
-  return cleanClassNames(result);
-}
-var classNames = (...args) => {
-  const result = (0, import_classnames.default)(...args);
-  return cleanClassNames(result);
-};
-
 // src/components/Button/Button.tsx
 var import_react10 = __toESM(require("react"));
 
-// 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}`);
-  return /* @__PURE__ */ import_react.default.createElement(import_react2.Icon, __spreadValues({
-    ref: ref != null ? ref : void 0,
-    className: classes !== "" ? classes : void 0
-  }, rest));
-});
-var InlineIcon = import_react.default.forwardRef((_a, ref) => {
-  var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
-  const classes = classNames(color && `text-${color}`);
-  return /* @__PURE__ */ import_react.default.createElement("span", {
-    className: classNames(tw("children:inline-block inline-flex justify-center items-center"), className)
-  }, /* @__PURE__ */ import_react.default.createElement(import_react2.InlineIcon, __spreadValues({
-    ref: ref != null ? ref : void 0,
-    className: classes !== "" ? classes : void 0
-  }, rest)));
-});
-
 // src/components/Flexbox/Flexbox.tsx
-var import_react7 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 
 // src/components/Tailwindify/Tailwindify.tsx
-var import_react6 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_get2 = __toESM(require("lodash/get"));
 var import_isUndefined4 = __toESM(require("lodash/isUndefined"));
 
 // src/utils/useStyle.ts
-var import_react5 = require("react");
+var import_react3 = 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_react4 = __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 = {
@@ -1747,7 +1950,14 @@ var tailwind_theme_default = {
   }
 };
 
+// src/components/Context/Context.tsx
+var import_react2 = __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)(
@@ -1792,15 +2002,15 @@ function selectBreakpointValue(value, matches) {
 }
 
 // src/utils/useWindowSize.ts
-var import_react3 = require("react");
-var import_isUndefined2 = __toESM(require("lodash/isUndefined"));
+var import_react = require("react");
 var import_debounce = __toESM(require("lodash/debounce"));
+var import_isUndefined2 = __toESM(require("lodash/isUndefined"));
 
 // src/components/Context/Context.tsx
 var context = {
   breakpointMatches: getMatches(void 0)
 };
-var DesignSystemContext = import_react4.default.createContext(context);
+var DesignSystemContext = import_react2.default.createContext(context);
 
 // src/utils/useStyle.ts
 var THEME_MAPPING = {
@@ -1824,7 +2034,7 @@ function resolveTailwindThemeValue(key, val) {
   return val;
 }
 function useStyle(styles) {
-  const context2 = (0, import_react5.useContext)(DesignSystemContext);
+  const context2 = (0, import_react3.useContext)(DesignSystemContext);
   return Object.keys(styles).reduce((acc, key) => {
     const property = styles[key];
     const isStylesObject = (0, import_isPlainObject2.default)(property) && "value" in property;
@@ -1924,8 +2134,8 @@ function Tailwindify(Component) {
     const componentProps = __spreadProps(__spreadValues({}, otherProps), {
       style: finalStyle
     });
-    const childrenWithProps = import_react6.default.Children.map(children, (child, index) => {
-      if (!import_react6.default.isValidElement(child)) {
+    const childrenWithProps = import_react4.default.Children.map(children, (child, index) => {
+      if (!import_react4.default.isValidElement(child)) {
         return child;
       }
       const isLastChild = index === children.length - 1;
@@ -1946,9 +2156,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_react6.default.cloneElement(child, newProps);
+      return import_react4.default.cloneElement(child, newProps);
     });
-    return /* @__PURE__ */ import_react6.default.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ import_react4.default.createElement(Component, __spreadValues({
       className,
       children: childrenWithProps
     }, componentProps));
@@ -1984,17 +2194,67 @@ var Flexbox = Tailwindify(
       rowGap
     });
     const HtmlElement = htmlTag;
-    return /* @__PURE__ */ import_react7.default.createElement(HtmlElement, {
+    return /* @__PURE__ */ import_react5.default.createElement(HtmlElement, {
       style: __spreadValues(__spreadValues({}, hookStyle), style),
       className
     }, children);
   }
 );
 
+// src/components/Icon/Icon.tsx
+var import_react6 = __toESM(require("react"));
+var import_react7 = require("@iconify/react");
+
+// src/utils/tailwind.ts
+var import_classnames = __toESM(require("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 = (0, import_classnames.default)(
+    classesOrModifiers1,
+    classesOrModifiers2,
+    classesOrModifiers3,
+    classesOrModifiers4,
+    classesOrModifiers5,
+    classesOrModifiers6,
+    classesOrModifiers7,
+    classesOrModifiers8,
+    classesOrModifiers9,
+    classesOrModifiers10
+  );
+  return cleanClassNames(result);
+}
+var classNames = (...args) => {
+  const result = (0, import_classnames.default)(...args);
+  return cleanClassNames(result);
+};
+
+// src/components/Icon/Icon.tsx
+var Icon = import_react6.default.forwardRef((_a, ref) => {
+  var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
+  const classes = classNames(className, color && `text-${color}`);
+  return /* @__PURE__ */ import_react6.default.createElement(import_react7.Icon, __spreadValues({
+    ref: ref != null ? ref : void 0,
+    className: classes !== "" ? classes : void 0
+  }, rest));
+});
+var InlineIcon = import_react6.default.forwardRef((_a, ref) => {
+  var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
+  const classes = classNames(color && `text-${color}`);
+  return /* @__PURE__ */ import_react6.default.createElement("span", {
+    className: classNames(tw("children:inline-block inline-flex justify-center items-center"), className)
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react7.InlineIcon, __spreadValues({
+    ref: ref != null ? ref : void 0,
+    className: classes !== "" ? classes : void 0
+  }, rest)));
+});
+
 // src/components/Tooltip/Tooltip.tsx
 var import_react9 = __toESM(require("react"));
-var import_tooltip = require("@react-aria/tooltip");
 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
@@ -2181,7 +2441,7 @@ var TooltipWrapper = import_react9.default.forwardRef(
     const arrowStyle = getArrowStyle(ref.current, placement, (_a2 = arrowProps.style) != null ? _a2 : {});
     return /* @__PURE__ */ import_react9.default.createElement(import_overlays3.OverlayContainer, null, /* @__PURE__ */ import_react9.default.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")
     }, (0, import_utils.mergeProps)(props, tooltipProps)), props.children, /* @__PURE__ */ import_react9.default.createElement(Arrow, __spreadProps(__spreadValues({}, arrowProps), {
       style: arrowStyle
     }))));
@@ -2338,8 +2598,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,
@@ -2434,7 +2694,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,
@@ -2458,10 +2718,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,
@@ -2509,16 +2769,15 @@ var Alert = (_a) => {
 Alert.Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
-    variant: "body-small",
+    variant: "small",
     color: "grey-60",
     className: classNames(tw("col-start-2"), className)
   }), children);
@@ -2552,45 +2811,35 @@ Alert.Dismiss = (_a) => {
 
 // src/common/Checkbox/Checkbox.tsx
 var import_react13 = __toESM(require("react"));
-var import_tick = __toESM(require_tick());
 var import_minus = __toESM(require_minus());
+var import_tick = __toESM(require_tick());
 var Checkbox = import_react13.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_react13.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_react13.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_react13.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_tick.default
+    })), /* @__PURE__ */ import_react13.default.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
+        }
+      )
     }));
   }
 );
@@ -2604,8 +2853,8 @@ var Container = import_react14.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
       )
@@ -2618,8 +2867,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,
@@ -2641,62 +2890,116 @@ var import_react16 = __toESM(require("react"));
 // src/components/Typography/Typography.tsx
 var import_react15 = __toESM(require("react"));
 var Typography2 = (props) => /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadValues({}, props));
-Typography2.Heading = (_a) => {
+Typography2.LargeHeading = (_a) => {
   var _b = _a, { htmlTag = "h1" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react15.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_react15.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_react15.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_react15.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_react15.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_react15.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_react15.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_react15.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_react15.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_react15.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_react15.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_react15.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_react15.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_react15.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_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
-    variant: "caption-default"
+    variant: "small"
+  }));
+};
+Typography2.SmallTextBold = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react15.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "small-strong"
   }));
 };
 
@@ -2710,7 +3013,7 @@ var DropdownMenu = import_react16.default.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);
   }
@@ -2734,13 +3037,9 @@ var Group = import_react16.default.forwardRef(
     return /* @__PURE__ */ import_react16.default.createElement("li", __spreadValues({
       ref
     }, props), title && /* @__PURE__ */ import_react16.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
-        }
-      )
+      className: classNames(className, "p-3 text-grey-40 uppercase cursor-default typography-caption", {
+        "text-grey-20": props.disabled
+      })
     }, titleProps), title), children);
   }
 );
@@ -2892,7 +3191,7 @@ Modal.Dialog = import_react19.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",
@@ -2909,11 +3208,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_react19.default.createElement("img", __spreadProps(__spreadValues({
+    "aria-hidden": true,
+    src: backgroundImage != null ? backgroundImage : void 0
+  }, rest), {
+    className: classNames(common, tw("object-cover"), className)
+  })) : /* @__PURE__ */ import_react19.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_react19.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_react19.default.createElement(Typography, __spreadValues({
     htmlTag: "h2",
-    variant: "heading-large",
+    variant: "subheading",
     color: "grey-90",
     className: classNames(tw("leading-none"), className)
   }, rest), children);
@@ -2921,7 +3238,7 @@ Modal.Title = (_a) => {
 Modal.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ import_react19.default.createElement(Typography, __spreadValues({
-    variant: "body-small",
+    variant: "small",
     color: "grey-60"
   }, rest), children);
 };
@@ -2951,38 +3268,56 @@ Modal.Actions = (_a) => {
   }), children);
 };
 
-// src/common/PopoverDialog/PopoverDialog.tsx
+// src/common/Popover/Popover.tsx
 var import_react20 = __toESM(require("react"));
+var PopoverPanel = import_react20.default.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ import_react20.default.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
+var import_react21 = __toESM(require("react"));
 var Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ import_react20.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react21.default.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__ */ import_react20.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react21.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_react20.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react21.default.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__ */ import_react20.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react21.default.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__ */ import_react20.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react21.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex gap-4"), className)
   }), children);
 };
@@ -2994,62 +3329,38 @@ var PopoverDialog = {
   Actions
 };
 
-// src/common/Popover/Popover.tsx
-var import_react21 = __toESM(require("react"));
-var PopoverPanel = import_react21.default.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ import_react21.default.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
 var import_react22 = __toESM(require("react"));
 var RadioButton = import_react22.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"]);
+    var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
     return /* @__PURE__ */ import_react22.default.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__ */ import_react22.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_react22.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_react22.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
       })
-    }));
+    })));
   }
 );
 
@@ -3087,7 +3398,7 @@ var InputContainer = import_react23.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",
@@ -3109,7 +3420,7 @@ var Input = import_react23.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,
@@ -3154,7 +3465,7 @@ var Group2 = import_react23.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
       }
@@ -3225,37 +3536,74 @@ var Select = {
   Toggle
 };
 
-// src/common/Table/Table.tsx
+// src/common/Switch/Switch.tsx
 var import_react24 = __toESM(require("react"));
-var import_chevronUp2 = __toESM(require_chevronUp());
+var Switch = import_react24.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
+    return /* @__PURE__ */ import_react24.default.createElement("span", {
+      className: tw("relative inline-flex justify-center items-center self-center group")
+    }, /* @__PURE__ */ import_react24.default.createElement("input", __spreadProps(__spreadValues({
+      id,
+      ref,
+      type: "checkbox",
+      name
+    }, props), {
+      className: tw("opacity-0 peer/switch w-0 h-0"),
+      readOnly,
+      disabled
+    })), /* @__PURE__ */ import_react24.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_react24.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/common/Table/Table.tsx
+var import_react25 = __toESM(require("react"));
 var import_chevronDown3 = __toESM(require_chevronDown());
-var HeadContext = import_react24.default.createContext(null);
-var tableClassNames = tw("w-full relative typography-body-default border-spacing-0");
+var import_chevronUp2 = __toESM(require_chevronUp());
+var HeadContext = import_react25.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_react24.default.createElement("table", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react25.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_react24.default.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ import_react24.default.createElement("tr", null, /* @__PURE__ */ import_react24.default.createElement(HeadContext.Provider, {
+  return /* @__PURE__ */ import_react25.default.createElement("thead", __spreadValues({}, rest), /* @__PURE__ */ import_react25.default.createElement("tr", null, /* @__PURE__ */ import_react25.default.createElement(HeadContext.Provider, {
     value: { children, sticky }
   }, children)));
 };
 var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react24.default.createElement("tbody", __spreadValues({}, rest), children);
+  return /* @__PURE__ */ import_react25.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_react24.default.createElement("tr", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react25.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
@@ -3267,25 +3615,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_react24.default.useContext(HeadContext);
-  return headContext ? /* @__PURE__ */ import_react24.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
+  const headContext = import_react25.default.useContext(HeadContext);
+  return headContext ? /* @__PURE__ */ import_react25.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       cellClassNames,
       getHeadCellClassNames(headContext.sticky),
       getAlignClassNames(align),
       className
     )
-  }), children) : /* @__PURE__ */ import_react24.default.createElement("td", __spreadProps(__spreadValues({}, rest), {
+  }), children) : /* @__PURE__ */ import_react25.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_react24.default.createElement(Table.Cell, {
+  return /* @__PURE__ */ import_react25.default.createElement(Table.Cell, {
     className: tw("leading-[0px]")
-  }, props.type === "radio" ? /* @__PURE__ */ import_react24.default.createElement(RadioButton, __spreadValues({
+  }, props.type === "radio" ? /* @__PURE__ */ import_react25.default.createElement(RadioButton, __spreadValues({
     "aria-label": ariaLabel
-  }, props)) : /* @__PURE__ */ import_react24.default.createElement(Checkbox, __spreadValues({
+  }, props)) : /* @__PURE__ */ import_react25.default.createElement(Checkbox, __spreadValues({
     "aria-label": ariaLabel
   }, props)));
 };
@@ -3295,39 +3643,39 @@ var getSortCellIconClassNames = (active) => {
 };
 var TableSortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ import_react24.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react25.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
     "aria-sort": direction
-  }), /* @__PURE__ */ import_react24.default.createElement("span", {
+  }), /* @__PURE__ */ import_react25.default.createElement("span", {
     className: getSortCellButtonClassNames(rest.align),
     role: "button",
     tabIndex: -1,
     onClick
-  }, children, /* @__PURE__ */ import_react24.default.createElement("div", {
+  }, children, /* @__PURE__ */ import_react25.default.createElement("div", {
     "data-sort-icons": true,
     className: tw("flex flex-col", {
       "invisible group-hover:visible": direction === "none"
     })
-  }, /* @__PURE__ */ import_react24.default.createElement(InlineIcon, {
+  }, /* @__PURE__ */ import_react25.default.createElement(InlineIcon, {
     icon: import_chevronUp2.default,
     className: getSortCellIconClassNames(direction === "descending")
-  }), /* @__PURE__ */ import_react24.default.createElement(InlineIcon, {
+  }), /* @__PURE__ */ import_react25.default.createElement(InlineIcon, {
     icon: import_chevronDown3.default,
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
 };
-var Item3 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react24.default.createElement("div", {
+var Item3 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react25.default.createElement("div", {
   className: tw("flex gap-4 items-center")
-}, image && /* @__PURE__ */ import_react24.default.createElement("img", {
+}, image && /* @__PURE__ */ import_react25.default.createElement("img", {
   src: image,
   alt: imageAlt,
   style: { width: imageSize, height: imageSize }
-}), /* @__PURE__ */ import_react24.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react24.default.createElement(Typography2.Caption, null, caption)));
-Table.Head = import_react24.default.memo(TableHead);
-Table.Body = import_react24.default.memo(TableBody);
-Table.Row = import_react24.default.memo(TableRow);
-Table.Cell = import_react24.default.memo(TableCell);
-Table.SortCell = import_react24.default.memo(TableSortCell);
-Table.SelectCell = import_react24.default.memo(TableSelectCell);
+}), /* @__PURE__ */ import_react25.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react25.default.createElement(Typography2.Caption, null, caption)));
+Table.Head = import_react25.default.memo(TableHead);
+Table.Body = import_react25.default.memo(TableBody);
+Table.Row = import_react25.default.memo(TableRow);
+Table.Cell = import_react25.default.memo(TableCell);
+Table.SortCell = import_react25.default.memo(TableSortCell);
+Table.SelectCell = import_react25.default.memo(TableSelectCell);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -3342,6 +3690,7 @@ Table.SelectCell = import_react24.default.memo(TableSelectCell);
   PopoverDialog,
   RadioButton,
   Select,
+  Switch,
   Table,
   cellClassNames,
   getAlignClassNames,