@lightsparkdev/ui 1.0.2 → 1.0.4

package/dist/components/Banner/Banner.js

@@ -1,27 +1,27 @@
 import {
   Banner
-} from "../../chunk-DNVKN2FG.js";
+} from "../../chunk-QCHEDM2I.js";
 import "../../chunk-ZSWFGISK.js";
 import "../../chunk-E3FGOYEJ.js";
-import "../../chunk-UVGBD7XM.js";
-import "../../chunk-DCFB5MJ7.js";
-import "../../chunk-SKXCT2FQ.js";
-import "../../chunk-56QJRFP2.js";
-import "../../chunk-CZCPVHVB.js";
-import "../../chunk-UBYBILLK.js";
-import "../../chunk-GNVEN6UE.js";
-import "../../chunk-HRZNVE2K.js";
-import "../../chunk-CMQELZES.js";
-import "../../chunk-TM3C4LEG.js";
-import "../../chunk-HP4VPMN7.js";
-import "../../chunk-PNSZAJL7.js";
+import "../../chunk-ZO35RX7V.js";
+import "../../chunk-LGXMGWLV.js";
+import "../../chunk-V523QTZQ.js";
+import "../../chunk-YRZ3VNBI.js";
+import "../../chunk-HPZVUEDJ.js";
+import "../../chunk-7COKMITX.js";
+import "../../chunk-DIKOS5R6.js";
+import "../../chunk-AZOVE32P.js";
+import "../../chunk-HVDX4OZJ.js";
+import "../../chunk-OMY3WTAU.js";
+import "../../chunk-OZQ5WPLN.js";
 import "../../chunk-YMNSXZ5D.js";
-import "../../chunk-6H7PZJ2A.js";
+import "../../chunk-7BSME2ZU.js";
+import "../../chunk-4X67A2CS.js";
 import "../../chunk-OPV246QW.js";
 import "../../chunk-AAFUVYVP.js";
-import "../../chunk-VUXU77SU.js";
+import "../../chunk-OUHQXQOJ.js";
 import "../../chunk-55OQPFLF.js";
-import "../../chunk-KBYU4ZQ3.js";
+import "../../chunk-TNDSUTUN.js";
 import "../../chunk-EDN2QDCB.js";
 import "../../chunk-FT62PIPN.js";
 import "../../chunk-5ZDDVLS6.js";
@@ -136,8 +136,8 @@ import "../../chunk-VI6WTKMV.js";
 import "../../chunk-QW2INB5A.js";
 import "../../chunk-JLD7MGLC.js";
 import "../../chunk-DW6LFUI2.js";
-import "../../chunk-7NPHOJXD.js";
-import "../../chunk-A4JZESAS.js";
+import "../../chunk-CZFFMEAS.js";
+import "../../chunk-VNQE6KEX.js";
 import "../../chunk-ENBUKLVT.js";
 import "../../chunk-JSGRNWSB.js";
 import "../../chunk-FO7I4E45.js";

package/dist/components/Button.cjs

@@ -85,10 +85,10 @@ __export(Button_exports, {
   buttonKinds: () => buttonKinds
 });
 module.exports = __toCommonJS(Button_exports);
-var import_react24 = require("@emotion/react");
+var import_react25 = require("@emotion/react");
 var import_styled15 = __toESM(require("@emotion/styled"), 1);
 var import_lodash_es4 = require("lodash-es");
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/router.tsx
 var import_lodash_es = require("lodash-es");
@@ -3694,6 +3694,10 @@ var baseTheme = __spreadProps(__spreadValues({}, baseThemeColors), {
   typography: getTypography("Lightspark" /* Lightspark */),
   hcNeutralFromBg: (bgHex) => hcNeutralFromBg(bgHex, colors.black, colors.white),
   buttons: defaultButtonsTheme,
+  badge: {
+    bg: "c05Neutral"
+  },
+  inputBackground: colors.white,
   loading: "LoadingSpinner"
 });
 var lightBaseTheme = baseTheme;
@@ -3730,7 +3734,11 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black,
+  badge: {
+    bg: "c15Neutral"
+  }
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3769,6 +3777,7 @@ var umameDocsLightTheme = extend(lightTheme, {
   secondary: colors.grayBlue43,
   text: colors.grayBlue9,
   link: colors.blue39,
+  inputBackground: colors.white,
   typography: getTypography("UmameDocs" /* UmameDocs */, {
     main: "Manrope",
     code: "Monaco"
@@ -3845,7 +3854,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -3853,7 +3865,8 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
   bg: colors.gray98,
   smBg: colors.gray98,
   text: colors.grayBlue9,
-  secondary: colors.grayBlue43
+  secondary: colors.grayBlue43,
+  inputBackground: colors.white
 }));
 var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeDark" /* BridgeDark */
@@ -4017,11 +4030,12 @@ var overlaySurfaceBorderColor = ({
 `;
 var overlaySurface = ({
   theme,
-  important = false
+  important = false,
+  border = true
 }) => import_react5.css`
-  background-color: ${themeOr(colors.white, theme.c1Neutral)({ theme })}
+  background-color: ${themeOr(theme.bg, theme.c1Neutral)({ theme })}
     ${important ? "!important" : ""};
-  border: 0.5px solid ${important ? "!important" : ""};
+  ${border ? `border: 0.5px solid ${important ? "!important" : ""};` : ""}
   ${overlaySurfaceBorderColor({ theme, important })};
   ${themeOr(
   `box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1) ${important ? "!important" : ""};`,
@@ -7930,7 +7944,7 @@ var IconContainer = import_styled2.default.span`
   ${({ theme, fontColor }) => {
   const color = getFontColor(theme, fontColor, "inherit");
   return `
-    & svg {
+    svg, path {
       color: ${getFontColor(theme, fontColor, "inherit")};
 
       /* 
@@ -8104,6 +8118,9 @@ var UnstyledButton = import_styled4.default.button`
   font-weight: inherit;
 `;
 
+// src/components/typography/renderTypography.tsx
+var import_react24 = __toESM(require("react"), 1);
+
 // src/components/typography/Body.tsx
 var import_styled5 = __toESM(require("@emotion/styled"), 1);
 
@@ -8168,6 +8185,7 @@ function toNonTypographicReactNodes(toNonTypographicReactNodesArg) {
         Link,
         {
           to: node.to,
+          newTab: !!node.newTab,
           children: node.text
         },
         `link-${i}-${node.text.substr(0, 10)}`
@@ -8444,7 +8462,6 @@ var StyledTitle = import_styled14.default.span`
 `;
 
 // src/components/typography/renderTypography.tsx
-var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
 var typographyMap = {
   Display,
   Headline,
@@ -8456,15 +8473,16 @@ var typographyMap = {
   "Label Strong": LabelStrong,
   Overline,
   Code: Code2,
-  "Code Strong": () => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { children: "Unimplemented" })
+  "Code Strong": Code2
 };
 var renderTypography = (type, props) => {
   const TypographyComponent = typographyMap[type];
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(TypographyComponent, __spreadValues({}, props));
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return import_react24.default.createElement(TypographyComponent, rest, children);
 };
 
 // src/components/Button.tsx
-var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
 var buttonKinds = [
   "secondary",
   "primary",
@@ -8497,7 +8515,7 @@ function getPaddingX(size, kind, isRound) {
 function getPadding({ paddingY, kind, size, iconSide, isRound }) {
   const paddingX = getPaddingX(size, kind, isRound);
   const paddingForIcon = 0;
-  return `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
+  return kind === "ghost" ? 0 : `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
 }
 function resolveBackgroundColorKey(theme, kind, defaultKey) {
   var _a;
@@ -8579,7 +8597,7 @@ function resolveProps(props, theme) {
   });
 }
 function Button(props) {
-  const theme = (0, import_react24.useTheme)();
+  const theme = (0, import_react25.useTheme)();
   const {
     kind,
     typography,
@@ -8611,34 +8629,34 @@ function Button(props) {
     tooltipText,
     borderRadius
   } = resolveProps(props, theme);
-  const tooltipId = (0, import_react25.useRef)((0, import_lodash_es4.uniqueId)());
+  const tooltipId = (0, import_react26.useRef)((0, import_lodash_es4.uniqueId)());
   const iconSize = size === "ExtraSmall" ? 12 : 16;
   let currentIcon = null;
   if (loading) {
-    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       ButtonIcon,
       {
         iconSide,
         text,
         typography,
         kind,
-        children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Loading, { size: iconSize, center: false })
+        children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Loading, { size: iconSize, center: false })
       }
     );
   } else if (icon) {
-    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       ButtonIcon,
       {
         iconSide,
         text,
         typography,
         kind,
-        children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: icon, width: iconSize, color: typography.color })
+        children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: icon, width: iconSize, color: typography.color })
       }
     );
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_react26.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
       "div",
       __spreadProps(__spreadValues({}, tooltipText ? { "data-tooltip-id": tooltipId.current } : {}), {
         css: {
@@ -8649,7 +8667,7 @@ function Button(props) {
         },
         children: [
           iconSide === "left" && currentIcon,
-          text && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          text && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
             "div",
             {
               css: {
@@ -8667,7 +8685,7 @@ function Button(props) {
         ]
       })
     ),
-    tooltipText ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Tooltip, { id: tooltipId.current, content: tooltipText }) : null
+    tooltipText ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { id: tooltipId.current, content: tooltipText }) : null
   ] });
   const isSingleCharRoundButton = Boolean(text && text.length === 1 && !icon);
   const commonProps = {
@@ -8697,9 +8715,9 @@ function Button(props) {
     zIndex
   };
   if (to) {
-    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
   }
-  return href ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return href ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     ButtonHrefLink,
     __spreadProps(__spreadValues({}, commonProps), {
       href,
@@ -8707,7 +8725,7 @@ function Button(props) {
       target: "_blank",
       children: content
     })
-  ) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
+  ) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
 }
 var buttonStyle = ({
   paddingY,
@@ -8727,7 +8745,7 @@ var buttonStyle = ({
   hoverBackgroundColor,
   hoverBorderColor
 }) => {
-  return import_react24.css`
+  return import_react25.css`
     display: inline-flex;
     opacity: ${disabled && !isLoading ? 0.2 : 1};
     ${disabled ? "pointer-events: none;" : ""}

package/dist/components/Button.d.cts

@@ -3,7 +3,7 @@ import * as react from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { Theme } from '@emotion/react';
 import { RouteParams } from '../router.cjs';
-import { B as ButtonTypographyArgs, P as PaddingYKey, a as ButtonBorderRadius, A as AllowedButtonTypographyTypes, T as ThemeOrColorKey } from '../buttons-b7f56076.js';
+import { B as ButtonTypographyArgs, P as PaddingYKey, a as ButtonBorderRadius, A as AllowedButtonTypographyTypes, T as ThemeOrColorKey } from '../themes-37e92940.js';
 import { TokenSizeKey } from '../styles/tokens/typography.cjs';
 import { IconName } from './Icon/types.cjs';
 import 'react-router-dom';

package/dist/components/Button.d.ts

@@ -3,7 +3,7 @@ import * as react from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { Theme } from '@emotion/react';
 import { RouteParams } from '../router.js';
-import { B as ButtonTypographyArgs, P as PaddingYKey, a as ButtonBorderRadius, A as AllowedButtonTypographyTypes, T as ThemeOrColorKey } from '../buttons-e4eb84a2.js';
+import { B as ButtonTypographyArgs, P as PaddingYKey, a as ButtonBorderRadius, A as AllowedButtonTypographyTypes, T as ThemeOrColorKey } from '../themes-832e46b2.js';
 import { TokenSizeKey } from '../styles/tokens/typography.js';
 import { IconName } from './Icon/types.js';
 import 'react-router-dom';

package/dist/components/Button.js

@@ -3,28 +3,28 @@ import {
   ButtonSelector,
   StyledButton,
   buttonKinds
-} from "../chunk-EV6PGQPM.js";
-import "../chunk-DCFB5MJ7.js";
-import "../chunk-BMSSV6NX.js";
-import "../chunk-SKXCT2FQ.js";
-import "../chunk-56QJRFP2.js";
-import "../chunk-CZCPVHVB.js";
-import "../chunk-UBYBILLK.js";
-import "../chunk-GNVEN6UE.js";
-import "../chunk-HRZNVE2K.js";
-import "../chunk-CMQELZES.js";
-import "../chunk-TM3C4LEG.js";
-import "../chunk-HP4VPMN7.js";
-import "../chunk-PNSZAJL7.js";
+} from "../chunk-MNMVZI7D.js";
+import "../chunk-DNGAINGL.js";
+import "../chunk-LGXMGWLV.js";
+import "../chunk-V523QTZQ.js";
+import "../chunk-YRZ3VNBI.js";
+import "../chunk-HPZVUEDJ.js";
+import "../chunk-7COKMITX.js";
+import "../chunk-DIKOS5R6.js";
+import "../chunk-AZOVE32P.js";
+import "../chunk-HVDX4OZJ.js";
+import "../chunk-OMY3WTAU.js";
+import "../chunk-OZQ5WPLN.js";
 import "../chunk-YMNSXZ5D.js";
-import "../chunk-6H7PZJ2A.js";
+import "../chunk-7BSME2ZU.js";
+import "../chunk-4X67A2CS.js";
 import "../chunk-OPV246QW.js";
 import "../chunk-AAFUVYVP.js";
-import "../chunk-VUXU77SU.js";
-import "../chunk-27SFWLPS.js";
-import "../chunk-6JFJDBV2.js";
+import "../chunk-OUHQXQOJ.js";
+import "../chunk-ZS7G6WIG.js";
+import "../chunk-JAPRGAB7.js";
 import "../chunk-55OQPFLF.js";
-import "../chunk-KBYU4ZQ3.js";
+import "../chunk-TNDSUTUN.js";
 import "../chunk-EDN2QDCB.js";
 import "../chunk-FT62PIPN.js";
 import "../chunk-5ZDDVLS6.js";
@@ -139,8 +139,8 @@ import "../chunk-VI6WTKMV.js";
 import "../chunk-QW2INB5A.js";
 import "../chunk-JLD7MGLC.js";
 import "../chunk-DW6LFUI2.js";
-import "../chunk-7NPHOJXD.js";
-import "../chunk-A4JZESAS.js";
+import "../chunk-CZFFMEAS.js";
+import "../chunk-VNQE6KEX.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-FO7I4E45.js";

package/dist/components/ButtonRow.cjs

@@ -3609,6 +3609,10 @@ var baseTheme = __spreadProps(__spreadValues({}, baseThemeColors), {
   typography: getTypography("Lightspark" /* Lightspark */),
   hcNeutralFromBg: (bgHex) => hcNeutralFromBg(bgHex, colors.black, colors.white),
   buttons: defaultButtonsTheme,
+  badge: {
+    bg: "c05Neutral"
+  },
+  inputBackground: colors.white,
   loading: "LoadingSpinner"
 });
 var lightBaseTheme = baseTheme;
@@ -3645,7 +3649,11 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black,
+  badge: {
+    bg: "c15Neutral"
+  }
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3684,6 +3692,7 @@ var umameDocsLightTheme = extend(lightTheme, {
   secondary: colors.grayBlue43,
   text: colors.grayBlue9,
   link: colors.blue39,
+  inputBackground: colors.white,
   typography: getTypography("UmameDocs" /* UmameDocs */, {
     main: "Manrope",
     code: "Monaco"
@@ -3760,7 +3769,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -3768,7 +3780,8 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
   bg: colors.gray98,
   smBg: colors.gray98,
   text: colors.grayBlue9,
-  secondary: colors.grayBlue43
+  secondary: colors.grayBlue43,
+  inputBackground: colors.white
 }));
 var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeDark" /* BridgeDark */
@@ -3932,11 +3945,12 @@ var overlaySurfaceBorderColor = ({
 `;
 var overlaySurface = ({
   theme,
-  important = false
+  important = false,
+  border = true
 }) => import_react4.css`
-  background-color: ${themeOr(colors.white, theme.c1Neutral)({ theme })}
+  background-color: ${themeOr(theme.bg, theme.c1Neutral)({ theme })}
     ${important ? "!important" : ""};
-  border: 0.5px solid ${important ? "!important" : ""};
+  ${border ? `border: 0.5px solid ${important ? "!important" : ""};` : ""}
   ${overlaySurfaceBorderColor({ theme, important })};
   ${themeOr(
   `box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1) ${important ? "!important" : ""};`,
@@ -4006,10 +4020,10 @@ var overflowAutoWithoutScrollbars = import_react5.css`
 `;
 
 // src/components/Button.tsx
-var import_react25 = require("@emotion/react");
+var import_react26 = require("@emotion/react");
 var import_styled15 = __toESM(require("@emotion/styled"), 1);
 var import_lodash_es4 = require("lodash-es");
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/router.tsx
 var import_lodash_es2 = require("lodash-es");
@@ -7993,7 +8007,7 @@ var IconContainer = import_styled2.default.span`
   ${({ theme, fontColor }) => {
   const color = getFontColor(theme, fontColor, "inherit");
   return `
-    & svg {
+    svg, path {
       color: ${getFontColor(theme, fontColor, "inherit")};
 
       /* 
@@ -8167,6 +8181,9 @@ var UnstyledButton = import_styled4.default.button`
   font-weight: inherit;
 `;
 
+// src/components/typography/renderTypography.tsx
+var import_react25 = __toESM(require("react"), 1);
+
 // src/components/typography/Body.tsx
 var import_styled5 = __toESM(require("@emotion/styled"), 1);
 
@@ -8231,6 +8248,7 @@ function toNonTypographicReactNodes(toNonTypographicReactNodesArg) {
         Link,
         {
           to: node.to,
+          newTab: !!node.newTab,
           children: node.text
         },
         `link-${i}-${node.text.substr(0, 10)}`
@@ -8507,7 +8525,6 @@ var StyledTitle = import_styled14.default.span`
 `;
 
 // src/components/typography/renderTypography.tsx
-var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
 var typographyMap = {
   Display,
   Headline,
@@ -8519,15 +8536,16 @@ var typographyMap = {
   "Label Strong": LabelStrong,
   Overline,
   Code: Code2,
-  "Code Strong": () => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { children: "Unimplemented" })
+  "Code Strong": Code2
 };
 var renderTypography = (type, props) => {
   const TypographyComponent = typographyMap[type];
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(TypographyComponent, __spreadValues({}, props));
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return import_react25.default.createElement(TypographyComponent, rest, children);
 };
 
 // src/components/Button.tsx
-var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
 var roundPaddingsX = {
   [TokenSize.ExtraSmall]: 10,
   [TokenSize.Small]: 10,
@@ -8550,7 +8568,7 @@ function getPaddingX(size2, kind, isRound) {
 function getPadding({ paddingY, kind, size: size2, iconSide, isRound }) {
   const paddingX = getPaddingX(size2, kind, isRound);
   const paddingForIcon = 0;
-  return `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
+  return kind === "ghost" ? 0 : `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
 }
 function resolveBackgroundColorKey(theme, kind, defaultKey) {
   var _a;
@@ -8632,7 +8650,7 @@ function resolveProps(props, theme) {
   });
 }
 function Button(props) {
-  const theme = (0, import_react25.useTheme)();
+  const theme = (0, import_react26.useTheme)();
   const {
     kind,
     typography,
@@ -8664,34 +8682,34 @@ function Button(props) {
     tooltipText,
     borderRadius
   } = resolveProps(props, theme);
-  const tooltipId = (0, import_react26.useRef)((0, import_lodash_es4.uniqueId)());
+  const tooltipId = (0, import_react27.useRef)((0, import_lodash_es4.uniqueId)());
   const iconSize = size2 === "ExtraSmall" ? 12 : 16;
   let currentIcon = null;
   if (loading) {
-    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       ButtonIcon,
       {
         iconSide,
         text,
         typography,
         kind,
-        children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Loading, { size: iconSize, center: false })
+        children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Loading, { size: iconSize, center: false })
       }
     );
   } else if (icon) {
-    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       ButtonIcon,
       {
         iconSide,
         text,
         typography,
         kind,
-        children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: icon, width: iconSize, color: typography.color })
+        children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: icon, width: iconSize, color: typography.color })
       }
     );
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_react27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
       "div",
       __spreadProps(__spreadValues({}, tooltipText ? { "data-tooltip-id": tooltipId.current } : {}), {
         css: {
@@ -8702,7 +8720,7 @@ function Button(props) {
         },
         children: [
           iconSide === "left" && currentIcon,
-          text && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          text && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
             "div",
             {
               css: {
@@ -8720,7 +8738,7 @@ function Button(props) {
         ]
       })
     ),
-    tooltipText ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Tooltip, { id: tooltipId.current, content: tooltipText }) : null
+    tooltipText ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { id: tooltipId.current, content: tooltipText }) : null
   ] });
   const isSingleCharRoundButton = Boolean(text && text.length === 1 && !icon);
   const commonProps = {
@@ -8750,9 +8768,9 @@ function Button(props) {
     zIndex
   };
   if (to) {
-    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
   }
-  return href ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return href ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     ButtonHrefLink,
     __spreadProps(__spreadValues({}, commonProps), {
       href,
@@ -8760,7 +8778,7 @@ function Button(props) {
       target: "_blank",
       children: content
     })
-  ) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
+  ) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
 }
 var buttonStyle = ({
   paddingY,
@@ -8780,7 +8798,7 @@ var buttonStyle = ({
   hoverBackgroundColor,
   hoverBorderColor
 }) => {
-  return import_react25.css`
+  return import_react26.css`
     display: inline-flex;
     opacity: ${disabled && !isLoading ? 0.2 : 1};
     ${disabled ? "pointer-events: none;" : ""}
@@ -8844,15 +8862,15 @@ var ButtonHrefLink = import_styled15.default.a`
 `;
 
 // src/components/ButtonRow.tsx
-var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
 function ButtonRow({
   buttons,
   className,
   smSticky = true,
   headerHeight = 0
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ButtonRowContainer, { smSticky, headerHeight, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(StyledButtonRow, { className, children: buttons.map(
-    (button, idx) => button === "divider" ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ButtonRowDivider, {}, idx) : /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Button, __spreadValues({}, button), idx)
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ButtonRowContainer, { smSticky, headerHeight, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(StyledButtonRow, { className, children: buttons.map(
+    (button, idx) => button === "divider" ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ButtonRowDivider, {}, idx) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Button, __spreadValues({}, button), idx)
   ) }) });
 }
 var ButtonRowContainer = import_styled16.default.div`

package/dist/components/ButtonRow.d.cts

@@ -5,7 +5,7 @@ import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { ButtonProps } from './Button.cjs';
 import '../router.cjs';
 import 'react-router-dom';
-import '../buttons-b7f56076.js';
+import '../themes-37e92940.js';
 import '../styles/tokens/typography.cjs';
 import '@emotion/css';
 import '../styles/colors.cjs';

package/dist/components/ButtonRow.d.ts

@@ -5,7 +5,7 @@ import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { ButtonProps } from './Button.js';
 import '../router.js';
 import 'react-router-dom';
-import '../buttons-e4eb84a2.js';
+import '../themes-832e46b2.js';
 import '../styles/tokens/typography.js';
 import '@emotion/css';
 import '../styles/colors.js';