@lightsparkdev/ui 1.0.12 → 1.0.13

package/dist/{chunk-KFFGSG6N.js → chunk-MTAHDNQT.js}

@@ -3,19 +3,19 @@ import {
 } from "./chunk-E5DUKMCU.js";
 import {
   Button
-} from "./chunk-WUPMVX4G.js";
+} from "./chunk-4U3AAKMA.js";
 import {
   UnstyledButton
-} from "./chunk-HGKK6OQJ.js";
+} from "./chunk-ZP6BJB4X.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   Icon
-} from "./chunk-OFZVJPBJ.js";
+} from "./chunk-DV6LJQJW.js";
 import {
   standardFocusOutline
-} from "./chunk-4H7CTVLY.js";
+} from "./chunk-POGNK25N.js";
 import {
   colors
 } from "./chunk-HO7LVJ3R.js";

package/dist/{chunk-FYOO7WC6.cjs → chunk-MTGDMQPZ.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkCBPXRCT4cjs = require('./chunk-CBPXRCT4.cjs');
+var _chunkSCLUBPNMcjs = require('./chunk-SCLUBPNM.cjs');
 
 
 
-var _chunkN5PWG2KYcjs = require('./chunk-N5PWG2KY.cjs');
+var _chunkKQFTLQPNcjs = require('./chunk-KQFTLQPN.cjs');
 
 
 
@@ -13,12 +13,12 @@ var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
 // src/components/typography/Code.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
 function Code(props) {
-  const propsWithDefaults = _chunkN5PWG2KYcjs.getPropDefaults.call(void 0, props);
+  const propsWithDefaults = _chunkKQFTLQPNcjs.getPropDefaults.call(void 0, props);
   let reactNodes = props.children || null;
   if (props.content) {
-    reactNodes = _chunkCBPXRCT4cjs.toReactNodes.call(void 0, props.content);
+    reactNodes = _chunkSCLUBPNMcjs.toReactNodes.call(void 0, props.content);
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkN5PWG2KYcjs.StyledCode, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, propsWithDefaults), { children: reactNodes }));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKQFTLQPNcjs.StyledCode, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, propsWithDefaults), { children: reactNodes }));
 }
 
 

package/dist/{chunk-Y3PPLR3S.cjs → chunk-MYTG6SVD.cjs}

@@ -1,60 +1,51 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkB5GAL6FTcjs = require('./chunk-B5GAL6FT.cjs');
-
-
 var _chunkGSYM5JMBcjs = require('./chunk-GSYM5JMB.cjs');
 
 
-var _chunkLEM2VWU3cjs = require('./chunk-LEM2VWU3.cjs');
+var _chunkWDZTASE5cjs = require('./chunk-WDZTASE5.cjs');
 
 
-var _chunkXAODBL4Dcjs = require('./chunk-XAODBL4D.cjs');
+var _chunkPZRI3ATMcjs = require('./chunk-PZRI3ATM.cjs');
 
 
-var _chunkZ7RV7ITMcjs = require('./chunk-Z7RV7ITM.cjs');
+var _chunkE4XGOCO2cjs = require('./chunk-E4XGOCO2.cjs');
 
 
 var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
 
-var _chunkIBPPT3NUcjs = require('./chunk-IBPPT3NU.cjs');
+var _chunkQ2CWG22Bcjs = require('./chunk-Q2CWG22B.cjs');
 
 
-var _chunkGMVP3EYXcjs = require('./chunk-GMVP3EYX.cjs');
+var _chunkJBO3HA6Gcjs = require('./chunk-JBO3HA6G.cjs');
 
 
 var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkTETFIMNOcjs = require('./chunk-TETFIMNO.cjs');
-
+var _chunkZWH3ABG3cjs = require('./chunk-ZWH3ABG3.cjs');
 
-var _chunkCBPXRCT4cjs = require('./chunk-CBPXRCT4.cjs');
 
+var _chunkSCLUBPNMcjs = require('./chunk-SCLUBPNM.cjs');
 
-var _chunkAIJ4JHXBcjs = require('./chunk-AIJ4JHXB.cjs');
 
+var _chunkE36KSEQZcjs = require('./chunk-E36KSEQZ.cjs');
 
-var _chunkRROZ5XYPcjs = require('./chunk-RROZ5XYP.cjs');
 
+var _chunkORWZTMF2cjs = require('./chunk-ORWZTMF2.cjs');
 
 
 
 
-var _chunkSWQDRB3Acjs = require('./chunk-SWQDRB3A.cjs');
 
-
-var _chunkTP3PDGQBcjs = require('./chunk-TP3PDGQB.cjs');
+var _chunkD262WAOVcjs = require('./chunk-D262WAOV.cjs');
 
 
 var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
 
 
-var _chunkSZKZWADNcjs = require('./chunk-SZKZWADN.cjs');
-
-
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
@@ -98,7 +89,9 @@ function Modal({
   buttonLayout = "horizontal",
   extraActions,
   handleBack,
-  appendToElement
+  appendToElement,
+  bottomContent,
+  topLeftIcon
 }) {
   const visibleChangedRef = _react.useRef.call(void 0, false);
   const nodeRef = _react.useRef.call(void 0, null);
@@ -202,10 +195,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 = _chunkYM5JDZDQcjs.__objRest.call(void 0, _b, ["placement", "text"]);
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIBPPT3NUcjs.Button, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQ2CWG22Bcjs.Button, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
     }),
     !isSm && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkIBPPT3NUcjs.Button,
+      _chunkQ2CWG22Bcjs.Button,
       {
         disabled: cancelDisabled,
         onClick: onClickCancel,
@@ -213,7 +206,7 @@ function Modal({
       }
     ),
     (onSubmit || submitLink) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkIBPPT3NUcjs.Button,
+      _chunkQ2CWG22Bcjs.Button,
       {
         kind: "primary",
         disabled: submitDisabled,
@@ -227,10 +220,10 @@ function Modal({
         onClick: submitLink ? onSubmit : void 0
       }
     ),
-    isSm && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIBPPT3NUcjs.Button, { onClick: onClose, text: cancelText }),
+    isSm && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQ2CWG22Bcjs.Button, { onClick: onClose, text: cancelText }),
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((_c, i) => {
       var _d = _c, { placement, text } = _d, rest = _chunkYM5JDZDQcjs.__objRest.call(void 0, _d, ["placement", "text"]);
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIBPPT3NUcjs.Button, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQ2CWG22Bcjs.Button, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
     })
   ] });
   let titleContent = null;
@@ -238,28 +231,32 @@ function Modal({
     const defaultTypography = {
       type: "Headline",
       heading: "h4",
-      size: _chunkSZKZWADNcjs.TokenSize.Small
+      size: "Small"
     };
-    const titleNodesWithTypography = _chunkTETFIMNOcjs.setDefaultReactNodesTypography.call(void 0, title, {
+    const titleNodesWithTypography = _chunkZWH3ABG3cjs.setDefaultReactNodesTypography.call(void 0, title, {
       default: defaultTypography
     });
-    titleContent = _chunkCBPXRCT4cjs.toReactNodes.call(void 0, titleNodesWithTypography);
+    titleContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalTitle, { children: _chunkSCLUBPNMcjs.toReactNodes.call(void 0, titleNodesWithTypography) });
   }
   let descriptionContent = null;
   if (description) {
-    if (typeof description === "string") {
-      descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Description, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB5GAL6FTcjs.Body, { size: "ExtraSmall", content: description }) });
-    } else {
-      descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Description, { children: _chunkCBPXRCT4cjs.toReactNodes.call(void 0, description) });
-    }
+    const defaultTypography = {
+      type: "Body",
+      size: "ExtraSmall"
+    };
+    const descriptionNodesWithTypography = _chunkZWH3ABG3cjs.setDefaultReactNodesTypography.call(void 0, 
+      description,
+      { default: defaultTypography }
+    );
+    descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalDescription, { children: _chunkSCLUBPNMcjs.toReactNodes.call(void 0, descriptionNodesWithTypography) });
   }
   let topContentNode = null;
   if (topContent) {
-    topContentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: _chunkZUAO4DW3cjs.Spacing.px.xl }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZ7RV7ITMcjs.IconWithCircleBackground, _chunkYM5JDZDQcjs.__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, _chunkE4XGOCO2cjs.IconWithCircleBackground, _chunkYM5JDZDQcjs.__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, 
-      _chunkLEM2VWU3cjs.ProgressBar,
+      _chunkWDZTASE5cjs.ProgressBar,
       {
         progressPercentage: progressBar.progressPercentage,
         isSm: progressBar.isSm
@@ -274,7 +271,7 @@ function Modal({
   let content;
   if (smKind === "drawer" && isSm) {
     content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkXAODBL4Dcjs.Drawer,
+      _chunkPZRI3ATMcjs.Drawer,
       {
         onClose: () => onClickCloseButton(),
         closeButton: true,
@@ -294,14 +291,15 @@ function Modal({
           tabIndex: -1,
           role: "dialog",
           ref: modalContainerRef,
-          top: top || (smKind === "default" ? _chunkSWQDRB3Acjs.standardContentInset.smPx : 0),
+          top: top || (smKind === "default" ? _chunkD262WAOVcjs.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, _chunkRROZ5XYPcjs.Icon, { name: "ChevronLeft", width: 16 }) }),
-              !nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRROZ5XYPcjs.Icon, { name: "Close", width: 9 }) })
+              handleBack ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: handleBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkORWZTMF2cjs.Icon, { name: "ChevronLeft", width: 16 }) }) : topLeftIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkORWZTMF2cjs.Icon, _chunkYM5JDZDQcjs.__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, _chunkORWZTMF2cjs.Icon, { name: "Close", width: 9 }) })
             ] }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalContentInner, { ghost, children: modalContent })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalContentInner, { ghost, children: modalContent }),
+            bottomContent && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginTop: "auto" }, children: bottomContent })
           ] })
         }
       )
@@ -312,7 +310,7 @@ function Modal({
     nodeRef.current
   ) : null;
 }
-var DefaultFocusTarget = _styled2.default.call(void 0, _chunkGMVP3EYXcjs.UnstyledButton)`
+var DefaultFocusTarget = _styled2.default.call(void 0, _chunkJBO3HA6Gcjs.UnstyledButton)`
   position: absolute;
   top: -30px;
   width: 0;
@@ -345,7 +343,7 @@ var ModalContainer = _styled2.default.div`
   ${(props) => `top: ${props.top}px;`}
 `;
 var contentTopMarginPx = 24;
-var Description = _styled2.default.div`
+var ModalDescription = _styled2.default.div`
   color: ${({ theme }) => theme.mcNeutral};
   margin-top: ${_chunkZUAO4DW3cjs.Spacing.px.sm};
   & + * {
@@ -357,7 +355,7 @@ var ModalButtonRow = _styled2.default.div`
   ${_chunkKW3JYLRIcjs.bp.minSm(`display: flex;`)}
   gap: 10px;
 
-  ${_chunkIBPPT3NUcjs.ButtonSelector.call(void 0, )} {
+  ${_chunkQ2CWG22Bcjs.ButtonSelector.call(void 0, )} {
     width: 50%;
     ${_chunkKW3JYLRIcjs.bp.sm(`
       width: 100%;
@@ -369,56 +367,57 @@ var ModalButtonColumn = _styled2.default.div`
   flex-direction: column;
   gap: ${_chunkZUAO4DW3cjs.Spacing.px.sm};
 
-  ${_chunkIBPPT3NUcjs.ButtonSelector.call(void 0, )} {
+  ${_chunkQ2CWG22Bcjs.ButtonSelector.call(void 0, )} {
     width: 100%;
   }
 
   margin-top: ${_chunkZUAO4DW3cjs.Spacing.px.lg};
 `;
+var ModalTitle = _styled2.default.div`
+  margin: 0;
+  & + *:not(${_chunk6VA4SAHQcjs.select.call(void 0, ModalDescription)}) {
+    margin-top: ${contentTopMarginPx}px;
+  }
+`;
 var ModalContent = _styled2.default.div`
   pointer-events: auto;
   transition: width 0.25s ease-in;
 
-  ${({ theme, smKind, ghost }) => ghost ? "" : _chunkSWQDRB3Acjs.overlaySurface.call(void 0, { theme, border: smKind !== "fullscreen" })}
+  ${({ theme, smKind, ghost }) => ghost ? "" : _chunkD262WAOVcjs.overlaySurface.call(void 0, { theme, border: smKind !== "fullscreen" })}
 
-  ${_chunkAIJ4JHXBcjs.overflowAutoWithoutScrollbars}
-  ${_chunkSWQDRB3Acjs.standardContentInset.smCSS.styles}
+  ${_chunkE36KSEQZcjs.overflowAutoWithoutScrollbars}
+  ${_chunkD262WAOVcjs.standardContentInset.smCSS.styles}
   max-width: 100%;
   max-height: 100%;
   position: absolute;
+  display: flex;
+  flex-direction: column;
 
   ${({ ghost, width }) => `
-    ${ghost ? "" : _chunkSWQDRB3Acjs.standardBorderRadius.call(void 0, 16)}
+    ${ghost ? "" : _chunkD262WAOVcjs.standardBorderRadius.call(void 0, 16)}
     width: ${width}px;
   `}
 
   ${({ smKind }) => smKind === "fullscreen" ? _chunkKW3JYLRIcjs.bp.sm(`
           width: 100%;
-          height: 100%;
+          height: 100dvh;
         `) : ""}
 
   ${({ ghost }) => ghost ? "" : "padding: 16px 16px 40px;"}
-
-  ${_chunkTP3PDGQBcjs.headlineSelector.call(void 0, "h4")} {
-    margin: 0;
-    & + *:not(${_chunk6VA4SAHQcjs.select.call(void 0, Description)}) {
-      margin-top: ${contentTopMarginPx}px;
-    }
-  }
 `;
 var ModalNavigation = _styled2.default.div`
   display: grid;
   grid-auto-flow: column;
   width: 100%;
 `;
-var BackButton = _styled2.default.call(void 0, _chunkGMVP3EYXcjs.UnstyledButton)`
-  ${_chunkSWQDRB3Acjs.standardFocusOutline}
+var BackButton = _styled2.default.call(void 0, _chunkJBO3HA6Gcjs.UnstyledButton)`
+  ${_chunkD262WAOVcjs.standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-start;
 `;
-var CloseButton = _styled2.default.call(void 0, _chunkGMVP3EYXcjs.UnstyledButton)`
-  ${_chunkSWQDRB3Acjs.standardFocusOutline}
+var CloseButton = _styled2.default.call(void 0, _chunkJBO3HA6Gcjs.UnstyledButton)`
+  ${_chunkD262WAOVcjs.standardFocusOutline}
   width: 24px;
   height: 24px;
   justify-self: flex-end;

package/dist/{chunk-HCKCJR5Y.js → chunk-N4C6SL6K.js}

@@ -1,3 +1,6 @@
+import {
+  getTypography
+} from "./chunk-AZSSORPU.js";
 import {
   buttonsThemeBase,
   defaultButtonsTheme
@@ -10,9 +13,6 @@ import {
   defaultLoadingTheme,
   loadingThemeBase
 } from "./chunk-LIVMIDVJ.js";
-import {
-  getTypography
-} from "./chunk-AZSSORPU.js";
 import {
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
@@ -201,12 +201,30 @@ var umaAuthSdkLightTheme = extend(lightTheme, {
     defaultSize: "Medium",
     defaultBorderRadius: 999,
     defaultPaddingsY: {
-      ExtraSmall: 16,
-      Small: 16,
-      Schmedium: 16,
-      Medium: 16,
-      Mlarge: 16,
-      Large: 16
+      ExtraSmall: {
+        short: 14,
+        regular: 16
+      },
+      Small: {
+        short: 14,
+        regular: 16
+      },
+      Schmedium: {
+        short: 14,
+        regular: 16
+      },
+      Medium: {
+        short: 14,
+        regular: 16
+      },
+      Mlarge: {
+        short: 14,
+        regular: 16
+      },
+      Large: {
+        short: 14,
+        regular: 16
+      }
     },
     kinds: {
       primary: {
@@ -225,12 +243,12 @@ var umaAuthSdkLightTheme = extend(lightTheme, {
         defaultHoverBorderColor: "transparent"
       },
       secondary: {
-        defaultBackgroundColor: "grayBlue94",
-        defaultBorderColor: "grayBlue94",
-        defaultHoverBackgroundColor: "grayBlue88",
-        defaultHoverBorderColor: "grayBlue88",
-        defaultActiveBackgroundColor: "grayBlue57",
-        defaultActiveBorderColor: "grayBlue57"
+        defaultBackgroundColor: "transparent",
+        defaultBorderColor: "grayBlue80",
+        defaultHoverBackgroundColor: "grayBlue94",
+        defaultHoverBorderColor: "grayBlue80",
+        defaultActiveBackgroundColor: "grayBlue88",
+        defaultActiveBorderColor: "grayBlue80"
       },
       tertiary: {
         defaultColor: "bg",
@@ -299,12 +317,30 @@ var umaAuthSdkDarkTheme = extend(darkTheme, {
     defaultSize: "Medium",
     defaultBorderRadius: 999,
     defaultPaddingsY: {
-      ExtraSmall: 16,
-      Small: 16,
-      Schmedium: 16,
-      Medium: 16,
-      Mlarge: 16,
-      Large: 16
+      ExtraSmall: {
+        short: 14,
+        regular: 16
+      },
+      Small: {
+        short: 14,
+        regular: 16
+      },
+      Schmedium: {
+        short: 14,
+        regular: 16
+      },
+      Medium: {
+        short: 14,
+        regular: 16
+      },
+      Mlarge: {
+        short: 14,
+        regular: 16
+      },
+      Large: {
+        short: 14,
+        regular: 16
+      }
     },
     kinds: {
       primary: {
@@ -330,8 +366,10 @@ var umaAuthSdkDarkTheme = extend(darkTheme, {
       transparent: {
         defaultBackgroundColor: "transparent",
         defaultBorderColor: "transparent",
-        defaultHoverBackgroundColor: "grayBlue94",
-        defaultHoverBorderColor: "transparent"
+        defaultHoverBackgroundColor: "transparenta02",
+        defaultHoverBorderColor: "transparent",
+        defaultActiveBackgroundColor: "transparenta08",
+        defaultActiveBorderColor: "transparent"
       },
       linkLight: {
         defaultColor: "link",
@@ -420,18 +458,35 @@ var bridgeBaseSettings = {
         defaultColor: "bg",
         defaultBackgroundColor: "blue39",
         defaultBorderColor: "blue39",
-        defaultHoverBackgroundColor: "blue37"
+        defaultHoverBackgroundColor: "blue37",
+        defaultHoverBorderColor: "blue37",
+        defaultActiveBackgroundColor: "blue22",
+        defaultActiveBorderColor: "blue22"
       },
       ghost: {
         defaultColor: "secondary",
         defaultBackgroundColor: "transparent",
         defaultHoverBackgroundColor: "transparent",
-        defaultHoverBorderColor: "transparent"
+        defaultBorderColor: "transparent",
+        defaultHoverBorderColor: "transparent",
+        defaultActiveBackgroundColor: "transparent"
       },
       secondary: {
         defaultBackgroundColor: "transparent",
+        defaultBorderColor: "grayBlue80",
         defaultHoverBackgroundColor: "grayBlue94",
-        defaultBorderColor: "grayBlue80"
+        defaultHoverBorderColor: "grayBlue80",
+        defaultActiveBackgroundColor: "grayBlue88",
+        defaultActiveBorderColor: "grayBlue80"
+      },
+      transparent: {
+        defaultColor: "secondary",
+        defaultBackgroundColor: "transparent",
+        defaultBorderColor: "transparent",
+        defaultHoverBackgroundColor: "transparenta02",
+        defaultHoverBorderColor: "transparent",
+        defaultActiveBackgroundColor: "transparenta08",
+        defaultActiveBorderColor: "transparent"
       }
     }
   }),

package/dist/{chunk-H4K2ZEF4.js → chunk-N6CICUU6.js}

@@ -1,62 +1,68 @@
 import {
   Headline
-} from "./chunk-QVOEB2KR.js";
+} from "./chunk-PN6D2CYD.js";
 import {
   StyledSelect
-} from "./chunk-PEOEIN2Q.js";
+} from "./chunk-C4BSD2VC.js";
 import {
   StyledFileInput
-} from "./chunk-OPQ3OYOA.js";
+} from "./chunk-2UBMGY7N.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 import {
   TextInputHalfRow
-} from "./chunk-4RHUIDWO.js";
+} from "./chunk-SUFXV4SF.js";
 import {
   ToggleContainer
-} from "./chunk-LXPA6OZD.js";
+} from "./chunk-A4EY427C.js";
 import {
   formButtonTopMarginStyle,
   inputSpacingPx
-} from "./chunk-IAGH4CKJ.js";
+} from "./chunk-P2OCWRMQ.js";
 import {
   StyledButtonRow
-} from "./chunk-Z6TZF3W2.js";
+} from "./chunk-U3HDNSQZ.js";
 import {
   ButtonSelector
-} from "./chunk-WUPMVX4G.js";
+} from "./chunk-4U3AAKMA.js";
 import {
   LoadingWrapper
-} from "./chunk-24B3POUB.js";
+} from "./chunk-75PYS7WZ.js";
 import {
   Checkbox
-} from "./chunk-PWLKDT2K.js";
+} from "./chunk-MK352OC6.js";
 import {
   toReactNodesWithTypographyMap
-} from "./chunk-RT7X3ZOO.js";
+} from "./chunk-GLYTFTP5.js";
 import {
   toReactNodes
-} from "./chunk-SOGADTSR.js";
+} from "./chunk-TS7Y6L2D.js";
 import {
   icon
 } from "./chunk-FZUV52PP.js";
 import {
   ClipboardTextField
-} from "./chunk-FC3BTZUR.js";
+} from "./chunk-NVEDOY6M.js";
 import {
   pxToRems
-} from "./chunk-AV62WHL7.js";
+} from "./chunk-4ZUB5ENE.js";
 import {
   mcBold,
   standardBorderRadius,
   standardCardShadow,
   standardCardShadowHard,
   standardContentInset
-} from "./chunk-4H7CTVLY.js";
+} from "./chunk-POGNK25N.js";
 import {
   Link
-} from "./chunk-PVEDEZJZ.js";
+} from "./chunk-7VQUG3NG.js";
+import {
+  select
+} from "./chunk-YMNSXZ5D.js";
 import {
   getColor
-} from "./chunk-HCKCJR5Y.js";
+} from "./chunk-N4C6SL6K.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
@@ -277,6 +283,12 @@ var CardFormFieldLabel = styled.label`
     margin-top: ${fieldLabelMarginPx}px;
   }
 `;
+var CardFormNearButtonColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: ${Spacing.px.sm};
+`;
 function CardFormDataFieldValue({ text }) {
   return /* @__PURE__ */ jsx(StyledCardFormDataFieldValue, { children: /* @__PURE__ */ jsx(ClipboardTextField, { value: text, icon: true, iconSide: "right" }) });
 }
@@ -417,7 +429,7 @@ var StyledCardFormStyle = ({
         margin-top: 24px;
       }
 
-      & > ${ButtonSelector()} {
+      & > ${ButtonSelector()}, & > ${select(CardFormNearButtonColumn)} {
         ${formButtonTopMarginStyle}
       }
     }
@@ -498,6 +510,7 @@ export {
   CardForm,
   CardFormButtonRow,
   CardFormFieldLabel,
+  CardFormNearButtonColumn,
   CardFormDataFieldValue,
   CardFormFullWidth,
   CardFormFullTopContent,