@lightsparkdev/ui 1.1.6 → 1.1.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lightsparkdev/ui
 
+## 1.1.8
+
+### Patch Changes
+
+- f5247b0: Adding additional nage dashboard designs and components
+
+## 1.1.7
+
+### Patch Changes
+
+- 56d34fb: Adding new base nage design system and theming
+
 ## 1.1.6
 
 ### Patch Changes

package/dist/{chunk-ZVUV74BA.cjs → chunk-22Q6UJGL.cjs}

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkJPVQC3NYcjs = require('./chunk-JPVQC3NY.cjs');
+var _chunkUL22WLXRcjs = require('./chunk-UL22WLXR.cjs');
 
 // src/components/UnstyledButton.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
 var UnstyledButton = _styled2.default.button`
-  ${_chunkJPVQC3NYcjs.standardFocusOutline}
+  ${_chunkUL22WLXRcjs.standardFocusOutline}
   font-family: ${({ theme }) => theme.typography.fontFamilies.main};
   appearance: none;
   background: transparent;

package/dist/{chunk-JSZRRGB2.cjs → chunk-2BMPLV5C.cjs}

@@ -3,47 +3,44 @@
 var _chunkDCH43ZYZcjs = require('./chunk-DCH43ZYZ.cjs');
 
 
-var _chunk2OVN2UK5cjs = require('./chunk-2OVN2UK5.cjs');
+var _chunkPEOBLYQNcjs = require('./chunk-PEOBLYQN.cjs');
 
 
-var _chunk5HHNW6YDcjs = require('./chunk-5HHNW6YD.cjs');
+var _chunkK425JWO4cjs = require('./chunk-K425JWO4.cjs');
 
 
-var _chunkKL5ZQSVOcjs = require('./chunk-KL5ZQSVO.cjs');
-
+var _chunkGMJNK6MEcjs = require('./chunk-GMJNK6ME.cjs');
 
-var _chunkQX4OBCNLcjs = require('./chunk-QX4OBCNL.cjs');
 
 
-var _chunkPTLLFSPXcjs = require('./chunk-PTLLFSPX.cjs');
+var _chunkGYFYOAO2cjs = require('./chunk-GYFYOAO2.cjs');
 
 
-var _chunkMKQVFO6Lcjs = require('./chunk-MKQVFO6L.cjs');
+var _chunk22Q6UJGLcjs = require('./chunk-22Q6UJGL.cjs');
 
 
-var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
-
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
-var _chunkWOQGGHYScjs = require('./chunk-WOQGGHYS.cjs');
 
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
-var _chunkXZO7WVZPcjs = require('./chunk-XZO7WVZP.cjs');
+var _chunkZTIYSEE6cjs = require('./chunk-ZTIYSEE6.cjs');
 
 
-var _chunkZVUV74BAcjs = require('./chunk-ZVUV74BA.cjs');
+var _chunkEC2UGHQ6cjs = require('./chunk-EC2UGHQ6.cjs');
 
 
-var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+var _chunkUMXCOSIJcjs = require('./chunk-UMXCOSIJ.cjs');
 
 
-var _chunk3KX4AU6Jcjs = require('./chunk-3KX4AU6J.cjs');
+var _chunk5R7OENS4cjs = require('./chunk-5R7OENS4.cjs');
 
 
 
 
 
-var _chunkJPVQC3NYcjs = require('./chunk-JPVQC3NY.cjs');
+var _chunkUL22WLXRcjs = require('./chunk-UL22WLXR.cjs');
 
 
 var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
@@ -53,6 +50,9 @@ var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
+var _chunkKL5ZQSVOcjs = require('./chunk-KL5ZQSVO.cjs');
+
+
 
 var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
 
@@ -220,10 +220,10 @@ function Modal({
   const buttonContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((_a, i) => {
       var _b = _a, { placement, text } = _b, rest = _chunkZ6EUSUADcjs.__objRest.call(void 0, _b, ["placement", "text"]);
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZO7WVZPcjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYFYOAO2cjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
     }),
     displayCancelAbove && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkXZO7WVZPcjs.Button,
+      _chunkGYFYOAO2cjs.Button,
       {
         disabled: cancelDisabled,
         onClick: onClickCancel,
@@ -231,7 +231,7 @@ function Modal({
       }
     ),
     (onSubmit || submitLink) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkXZO7WVZPcjs.Button,
+      _chunkGYFYOAO2cjs.Button,
       {
         kind: "primary",
         disabled: submitDisabled,
@@ -247,7 +247,7 @@ function Modal({
       }
     ),
     displayCancelBelow && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkXZO7WVZPcjs.Button,
+      _chunkGYFYOAO2cjs.Button,
       {
         disabled: cancelDisabled,
         onClick: onClickCancel,
@@ -256,7 +256,7 @@ function Modal({
     ),
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((_c, i) => {
       var _d = _c, { placement, text } = _d, rest = _chunkZ6EUSUADcjs.__objRest.call(void 0, _d, ["placement", "text"]);
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZO7WVZPcjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYFYOAO2cjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
     })
   ] });
   let titleContent = null;
@@ -266,10 +266,10 @@ function Modal({
       heading: "h4",
       size: "Small"
     };
-    const titleNodesWithTypography = _chunkPTLLFSPXcjs.setDefaultReactNodesTypography.call(void 0, title, {
+    const titleNodesWithTypography = _chunkZTIYSEE6cjs.setDefaultReactNodesTypography.call(void 0, title, {
       default: defaultTypography
     });
-    titleContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalTitle, { children: _chunkMKQVFO6Lcjs.toReactNodes.call(void 0, titleNodesWithTypography) });
+    titleContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalTitle, { children: _chunkEC2UGHQ6cjs.toReactNodes.call(void 0, titleNodesWithTypography) });
   }
   let descriptionContent = null;
   if (description) {
@@ -277,23 +277,23 @@ function Modal({
       type: "Body",
       size: "ExtraSmall"
     };
-    const descriptionNodesWithTypography = _chunkPTLLFSPXcjs.setDefaultReactNodesTypography.call(void 0, 
+    const descriptionNodesWithTypography = _chunkZTIYSEE6cjs.setDefaultReactNodesTypography.call(void 0, 
       description,
       { default: defaultTypography }
     );
-    descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalDescription, { children: _chunkMKQVFO6Lcjs.toReactNodes.call(void 0, descriptionNodesWithTypography) });
+    descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalDescription, { children: _chunkEC2UGHQ6cjs.toReactNodes.call(void 0, descriptionNodesWithTypography) });
   }
   let topContentNode = null;
   if (topContent) {
     if (_chunkDCH43ZYZcjs.isReactNode.call(void 0, topContent)) {
       topContentNode = topContent;
     } else {
-      topContentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: _chunkZUAO4DW3cjs.Spacing.px.xl }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQX4OBCNLcjs.IconWithCircleBackground, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, topContent)) });
+      topContentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: _chunkZUAO4DW3cjs.Spacing.px.xl }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkK425JWO4cjs.IconWithCircleBackground, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, topContent)) });
     }
   }
   const modalContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
     progressBar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk2OVN2UK5cjs.ProgressBar,
+      _chunkPEOBLYQNcjs.ProgressBar,
       {
         progressPercentage: progressBar.progressPercentage,
         isSm: progressBar.isSm
@@ -308,7 +308,7 @@ function Modal({
   let content;
   if (smKind === "drawer" && isSm) {
     content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk5HHNW6YDcjs.Drawer,
+      _chunkGMJNK6MEcjs.Drawer,
       {
         onClose: () => onClickCloseButton(),
         closeButton: drawerCloseButton,
@@ -336,12 +336,12 @@ function Modal({
           },
           role: "dialog",
           ref: modalContainerRef,
-          top: top || (smKind === "default" ? _chunkJPVQC3NYcjs.standardContentInset.smPx : 0),
+          top: top || (smKind === "default" ? _chunkUL22WLXRcjs.standardContentInset.smPx : 0),
           children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalContent, { width, ghost, smKind, children: [
             !firstFocusRef && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
             !ghost && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalNavigation, { children: [
-              handleBack ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: handleBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3KX4AU6Jcjs.Icon, { name: "ChevronLeft", width: 16 }) }) : topLeftIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3KX4AU6Jcjs.Icon, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, topLeftIcon)) : null,
-              !nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3KX4AU6Jcjs.Icon, { name: "Close", width: 9 }) })
+              handleBack ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: handleBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5R7OENS4cjs.Icon, { name: "ChevronLeft", width: 16 }) }) : topLeftIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5R7OENS4cjs.Icon, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, topLeftIcon)) : null,
+              !nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5R7OENS4cjs.Icon, { name: "Close", width: 9 }) })
             ] }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalContentInner, { ghost, children: modalContent }),
             bottomContent && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginTop: "auto" }, children: bottomContent })
@@ -355,7 +355,7 @@ function Modal({
     nodeRef.current
   ) : null;
 }
-var DefaultFocusTarget = _styled2.default.call(void 0, _chunkZVUV74BAcjs.UnstyledButton)`
+var DefaultFocusTarget = _styled2.default.call(void 0, _chunk22Q6UJGLcjs.UnstyledButton)`
   position: absolute;
   top: -30px;
   width: 0;
@@ -403,7 +403,7 @@ var ModalButtonRow = _styled2.default.div`
   `)}
   gap: 10px;
 
-  ${_chunkXZO7WVZPcjs.ButtonSelector.call(void 0, )} {
+  ${_chunkGYFYOAO2cjs.ButtonSelector.call(void 0, )} {
     width: 50%;
     ${_chunkKW3JYLRIcjs.bp.sm(`
       width: 100%;
@@ -415,7 +415,7 @@ var ModalButtonColumn = _styled2.default.div`
   flex-direction: column;
   gap: ${_chunkZUAO4DW3cjs.Spacing.px.sm};
 
-  ${_chunkXZO7WVZPcjs.ButtonSelector.call(void 0, )} {
+  ${_chunkGYFYOAO2cjs.ButtonSelector.call(void 0, )} {
     width: 100%;
   }
 
@@ -431,10 +431,10 @@ var ModalContent = _styled2.default.div`
   pointer-events: auto;
   transition: width 0.25s ease-in;
 
-  ${({ theme, smKind, ghost }) => ghost ? "" : _chunkJPVQC3NYcjs.overlaySurface.call(void 0, { theme, border: smKind !== "fullscreen" })}
+  ${({ theme, smKind, ghost }) => ghost ? "" : _chunkUL22WLXRcjs.overlaySurface.call(void 0, { theme, border: smKind !== "fullscreen" })}
 
-  ${_chunkWOQGGHYScjs.overflowAutoWithoutScrollbars}
-  ${_chunkJPVQC3NYcjs.standardContentInset.smCSS.styles}
+  ${_chunkUMXCOSIJcjs.overflowAutoWithoutScrollbars}
+  ${_chunkUL22WLXRcjs.standardContentInset.smCSS.styles}
   max-width: 100%;
   max-height: 100%;
   position: absolute;
@@ -442,7 +442,7 @@ var ModalContent = _styled2.default.div`
   flex-direction: column;
 
   ${({ ghost, smKind, width }) => `
-    ${ghost ? "" : _chunkJPVQC3NYcjs.standardBorderRadius.call(void 0, 16)}
+    ${ghost ? "" : _chunkUL22WLXRcjs.standardBorderRadius.call(void 0, 16)}
     width: ${width}px;
   `}
 
@@ -459,14 +459,14 @@ var ModalNavigation = _styled2.default.div`
   grid-auto-flow: column;
   width: 100%;
 `;
-var BackButton = _styled2.default.call(void 0, _chunkZVUV74BAcjs.UnstyledButton)`
-  ${_chunkJPVQC3NYcjs.standardFocusOutline}
+var BackButton = _styled2.default.call(void 0, _chunk22Q6UJGLcjs.UnstyledButton)`
+  ${_chunkUL22WLXRcjs.standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-start;
 `;
-var CloseButton = _styled2.default.call(void 0, _chunkZVUV74BAcjs.UnstyledButton)`
-  ${_chunkJPVQC3NYcjs.standardFocusOutline}
+var CloseButton = _styled2.default.call(void 0, _chunk22Q6UJGLcjs.UnstyledButton)`
+  ${_chunkUL22WLXRcjs.standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-end;

package/dist/{chunk-FY3CBRJO.js → chunk-2ISDPHR2.js}

@@ -1,10 +1,10 @@
 import {
   toReactNodes
-} from "./chunk-QM373UWV.js";
+} from "./chunk-R44KNXWJ.js";
 import {
   StyledBody,
   getPropDefaults
-} from "./chunk-ER7MXAA4.js";
+} from "./chunk-7PLRPYVC.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-GHXHO5FQ.cjs → chunk-2J2ZDWLF.cjs}

@@ -23,6 +23,7 @@ var neutral = {
   gray90: "#E6E6E6",
   gray91: "#171717",
   gray95: "#F2F2F2",
+  gray97: "#F8F8F7",
   gray98: "#F9F9F9",
   gray99: "#EDEEF1",
   white: "#FFFFFF",
@@ -31,9 +32,71 @@ var neutral = {
 var darkGradient = "#1d1d1d linear-gradient(180deg, #090909 63.08%, #1d1d1d 100.52%)";
 var primary = "#FFF14E";
 var baseColors = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, neutral), {
+  // alpha variants
+  "white-90": "#ffffffe5",
+  "white-80": "#ffffffcc",
+  "white-70": "#ffffffb2",
+  "white-60": "#ffffff99",
+  "white-50": "#ffffff80",
+  "white-40": "#ffffff66",
+  "white-30": "#ffffff4d",
+  "white-20": "#ffffff33",
+  "white-10": "#ffffff1a",
+  "white-04": "#ffffff0a",
+  "black-90": "#000000e5",
+  "black-80": "#000000cc",
+  "black-70": "#000000b2",
+  "black-60": "#00000099",
+  "black-50": "#00000080",
+  "black-40": "#00000066",
+  "black-30": "#0000004d",
+  "black-20": "#00000033",
+  "black-10": "#0000001a",
+  "black-04": "#0000000a",
+  // gray scale
+  "gray-050": "#f8f8f7",
+  "gray-090": "#eeeeec",
+  "gray-100": "#f0f0ee",
+  "gray-200": "#deded9",
+  "gray-210": "#dfdfdd",
+  "gray-250": "#d6d6d4",
+  "gray-275": "#c9cac7",
+  "gray-300": "#c1c0b8",
+  "gray-400": "#989898",
+  "gray-500": "#7c7c7c",
+  "gray-600": "#656565",
+  "gray-700": "#464646",
+  "gray-800": "#3d3d3d",
+  "gray-900": "#282828",
+  "gray-950": "#1a1a1a",
+  // green scale
+  "green-50": "#f0fdf7",
+  "green-100": "#dbfdee",
+  "green-200": "#b9f9dc",
+  "green-300": "#82f3c1",
+  "green-400": "#45e39e",
+  "green-500": "#1ccb7e",
+  "green-600": "#11a967",
+  "green-700": "#118453",
+  "green-800": "#136844",
+  "green-900": "#12553a",
+  "green-950": "#042f1e",
+  // pink scale
+  "pink-050": "#fff2fb",
+  "pink-100": "#ffe3f9",
+  "pink-200": "#ffc6f3",
+  "pink-300": "#ff99e5",
+  "pink-400": "#ff5dd4",
+  "pink-500": "#ff21cc",
+  "pink-600": "#ff00d4",
+  "pink-700": "#cf00a7",
+  "pink-800": "#a90087",
+  "pink-900": "#89066c",
+  "pink-950": "#5e004a",
   // green
   success: "#17C27C",
   green: "#46ac4a",
+  green10: "#e6f4e6",
   green33: "#179257",
   green35: "#19981E",
   green37: "#179A1C",
@@ -69,8 +132,10 @@ var baseColors = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.
   grayBlue95: "#F2F3F5",
   grayBlue96: "#F2F5F7",
   // purple
+  purple10: "#e6e8f8",
   purple43: "#820AD1",
   purple55: "#8B38DE",
+  purple60: "#7366c5",
   // red
   red50: "#E31A1A",
   red42a10: "#D800271A",
@@ -83,7 +148,11 @@ var baseColors = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.
   warning: primary,
   warningYellow: "#E08A00",
   warningText: "#BB6B01",
+  warningText2: "#E09000",
   warningBackground: "#FBEECB",
+  warningBackground2: "#FFFDEA",
+  warningBackgroundHover: "#F5F2E0",
+  warningBackgroundActive: "#E5E4D3",
   // orange
   danger: "#FD2C0F",
   // neutral

package/dist/{chunk-RFJ7UTOJ.js → chunk-2J4DUQA6.js}

@@ -1,21 +1,21 @@
-import {
-  Spacing
-} from "./chunk-E5DUKMCU.js";
 import {
   Button
-} from "./chunk-LCFXXG6V.js";
+} from "./chunk-2MB6EJ7Z.js";
 import {
   UnstyledButton
-} from "./chunk-LAYWVYBF.js";
+} from "./chunk-5UHQJD3J.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 import {
   Icon
-} from "./chunk-JFKPUTCA.js";
+} from "./chunk-U6AUAZQA.js";
 import {
   standardFocusOutline
-} from "./chunk-CGK72IUW.js";
+} from "./chunk-33BECMKR.js";
 
 // src/components/Drawer.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-5NZ22GSE.js → chunk-2JNM2KTT.js}

@@ -1,10 +1,7 @@
-import {
-  getTypography
-} from "./chunk-DG7KBY6O.js";
 import {
   buttonsThemeBase,
   defaultButtonsTheme
-} from "./chunk-XDL3GORR.js";
+} from "./chunk-ISDKKT5U.js";
 import {
   cardFormThemeBase,
   defaultCardFormTheme
@@ -13,6 +10,9 @@ import {
   defaultLoadingTheme,
   loadingThemeBase
 } from "./chunk-S5AV3X5O.js";
+import {
+  getTypography
+} from "./chunk-KCUSJWDZ.js";
 import {
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
@@ -21,7 +21,7 @@ import {
   darkGradient,
   hcNeutralFromBg,
   isColorKey
-} from "./chunk-DDUDWE23.js";
+} from "./chunk-5J7O4QVA.js";
 import {
   __spreadProps,
   __spreadValues
@@ -41,6 +41,8 @@ var Themes = /* @__PURE__ */ ((Themes2) => {
   Themes2["UmameDocsDark"] = "umameDocsDark";
   Themes2["BridgeLight"] = "bridgeLight";
   Themes2["BridgeDark"] = "bridgeDark";
+  Themes2["NageLight"] = "nageLight";
+  Themes2["NageDark"] = "nageDark";
   return Themes2;
 })(Themes || {});
 function isTheme(theme) {
@@ -691,6 +693,112 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
 var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeDark" /* BridgeDark */
 }));
+var nageBaseSettings = {
+  secondary: colors.grayBlue43,
+  mcNeutral: colors.grayBlue43,
+  success: colors.green37,
+  typography: getTypography("Nage" /* Nage */, {
+    main: "SuisseIntl",
+    code: "SuisseIntl-Mono"
+  }),
+  buttons: merge(buttonsThemeBase, {
+    defaultTypographyType: "Btn",
+    defaultSize: "Medium",
+    defaultBorderRadius: 8,
+    defaultPaddingsY: {
+      ExtraSmall: 6,
+      Small: 6,
+      Schmedium: 8,
+      Medium: 8,
+      Mlarge: 10,
+      Large: 10
+    },
+    defaultPaddingsX: {
+      ExtraSmall: 8,
+      Small: 8,
+      Schmedium: 12,
+      Medium: 12,
+      Mlarge: 12,
+      Large: 12
+    },
+    kinds: {
+      primary: {
+        defaultColor: "white",
+        defaultBackgroundColor: "gray-950",
+        defaultBorderColor: "gray-050",
+        defaultHoverBackgroundColor: "gray-950",
+        defaultHoverBorderColor: "gray-050",
+        defaultActiveBackgroundColor: "gray-950",
+        defaultActiveBorderColor: "gray-050"
+      },
+      ghost: {
+        defaultColor: "secondary",
+        defaultBackgroundColor: "transparent",
+        defaultHoverBackgroundColor: "transparent",
+        defaultBorderColor: "transparent",
+        defaultHoverBorderColor: "transparent",
+        defaultActiveBackgroundColor: "transparent",
+        defaultPaddingsY: {
+          ExtraSmall: 0,
+          Small: 0,
+          Schmedium: 0,
+          Medium: 0,
+          Mlarge: 0,
+          Large: 0
+        },
+        defaultPaddingsX: {
+          ExtraSmall: 0,
+          Small: 0,
+          Schmedium: 0,
+          Medium: 0,
+          Mlarge: 0,
+          Large: 0
+        }
+      },
+      secondary: {
+        defaultBackgroundColor: "gray-050",
+        defaultBorderColor: "gray-210",
+        defaultHoverBackgroundColor: "gray-090",
+        defaultHoverBorderColor: "gray-250",
+        defaultActiveBackgroundColor: "gray-210",
+        defaultActiveBorderColor: "gray-275"
+      },
+      warning: {
+        defaultColor: "warningText2",
+        defaultBackgroundColor: "warningBackground2",
+        defaultBorderColor: "warningBackground2",
+        defaultHoverBackgroundColor: "warningBackgroundHover",
+        defaultHoverBorderColor: "warningBackgroundHover",
+        defaultActiveBackgroundColor: "warningBackgroundActive",
+        defaultActiveBorderColor: "warningBackgroundActive"
+      }
+    }
+  }),
+  loading: merge(loadingThemeBase, {
+    defaultIconName: "CentralLoadingCircle",
+    kinds: {
+      primary: {
+        defaultIconName: "CentralLoadingCircle"
+      },
+      secondary: {
+        defaultIconName: "CentralLoadingCircle"
+      }
+    }
+  })
+};
+var nageLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, nageBaseSettings), {
+  type: "nageLight" /* NageLight */,
+  bg: colors["gray-100"],
+  smBg: colors["gray-100"],
+  text: colors["gray-950"],
+  secondary: colors["gray-500"],
+  tertiary: colors.gray6,
+  inputBackground: colors.white,
+  danger: colors.red50
+}));
+var nageDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, nageBaseSettings), {
+  type: "nageDark" /* NageDark */
+}));
 var themes = {
   ["light" /* Light */]: lightTheme,
   ["dark" /* Dark */]: darkTheme,
@@ -701,7 +809,9 @@ var themes = {
   ["umameDocsLight" /* UmameDocsLight */]: umameDocsLightTheme,
   ["umameDocsDark" /* UmameDocsDark */]: umameDocsDarkTheme,
   ["bridgeLight" /* BridgeLight */]: bridgeLightTheme,
-  ["bridgeDark" /* BridgeDark */]: bridgeDarkTheme
+  ["bridgeDark" /* BridgeDark */]: bridgeDarkTheme,
+  ["nageLight" /* NageLight */]: nageLightTheme,
+  ["nageDark" /* NageDark */]: nageDarkTheme
 };
 function extend(obj, rest) {
   return __spreadValues(__spreadValues({}, obj), rest);
@@ -767,6 +877,7 @@ function getBackgroundColor(theme, key, defaultColor = "transparent") {
 var isDark = (theme) => [
   "dark" /* Dark */,
   "bridgeDark" /* BridgeDark */,
+  "nageDark" /* NageDark */,
   "lightsparkDocsDark" /* LightsparkDocsDark */,
   "umameDocsDark" /* UmameDocsDark */,
   "umaAuthSdkDark" /* UmaAuthSdkDark */
@@ -774,11 +885,13 @@ var isDark = (theme) => [
 var isLight = (theme) => [
   "light" /* Light */,
   "bridgeLight" /* BridgeLight */,
+  "nageLight" /* NageLight */,
   "lightsparkDocsLight" /* LightsparkDocsLight */,
   "umameDocsLight" /* UmameDocsLight */,
   "umaAuthSdkLight" /* UmaAuthSdkLight */
 ].includes(theme.type);
 var isBridge = (theme) => ["bridgeLight" /* BridgeLight */, "bridgeDark" /* BridgeDark */].includes(theme.type);
+var isNage = (theme) => ["nageLight" /* NageLight */, "nageDark" /* NageDark */].includes(theme.type);
 var themeOr = (lightValue, darkValue) => ({ theme }) => {
   return isLight(theme) ? lightValue : darkValue;
 };
@@ -834,6 +947,7 @@ export {
   isDark,
   isLight,
   isBridge,
+  isNage,
   themeOr,
   themeOrWithKey,
   ifLight,

package/dist/{chunk-LCFXXG6V.js → chunk-2MB6EJ7Z.js}

@@ -1,34 +1,34 @@
 import {
   Loading
-} from "./chunk-S6OAIHTX.js";
-import {
-  UnstyledButton
-} from "./chunk-LAYWVYBF.js";
+} from "./chunk-2NTAA34G.js";
 import {
   Tooltip
-} from "./chunk-3YVKFBIH.js";
+} from "./chunk-T426IS64.js";
+import {
+  UnstyledButton
+} from "./chunk-5UHQJD3J.js";
 import {
   Icon
-} from "./chunk-JFKPUTCA.js";
+} from "./chunk-U6AUAZQA.js";
 import {
   getFocusOutline
-} from "./chunk-CGK72IUW.js";
+} from "./chunk-33BECMKR.js";
 import {
   Link
-} from "./chunk-5SG5KWXI.js";
+} from "./chunk-OFIYWU7T.js";
 import {
   renderTypography
-} from "./chunk-OLGTZHWT.js";
+} from "./chunk-JLITQIYZ.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   applyTypography
-} from "./chunk-2C6JCHWU.js";
+} from "./chunk-XIWXA6GF.js";
 import {
   getBackgroundColor,
   isThemeOrColorKey
-} from "./chunk-5NZ22GSE.js";
+} from "./chunk-2JNM2KTT.js";
 import {
   __objRest,
   __spreadProps,
@@ -237,8 +237,8 @@ var Button = forwardRef((props, ref) => {
           Icon,
           __spreadProps(__spreadValues({}, icon), {
             width: icon.width || defaultIconWidth,
-            square: true,
-            color: typography.color
+            square: icon.square === void 0 ? true : icon.square,
+            color: icon.color || typography.color
           })
         )
       }
@@ -266,7 +266,7 @@ var Button = forwardRef((props, ref) => {
               children: renderTypography(typography.type, {
                 children: text,
                 color: typography.color,
-                size
+                size: typography.size
               })
             }
           ),