@lightsparkdev/ui 1.0.2 → 1.0.4

package/dist/components/Badge.d.cts

@@ -1,13 +1,152 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import { F as FontColorKey } from '../themes-37e92940.js';
+import { TypographyTypeKey } from '../styles/tokens/typography.cjs';
+import { SimpleTypographyProps } from '../styles/typography.cjs';
+import { ToReactNodesArgs } from '../utils/toReactNodes.cjs';
+import { IconName } from './Icon/types.cjs';
+import '@emotion/react';
+import '@emotion/css';
+import '../styles/colors.cjs';
+import '@lightsparkdev/core';
+import './typography/renderTypography.cjs';
+import './typography/Code.cjs';
+import '@emotion/styled';
+import 'react';
+import '../utils/toNonTypographicReactNodes.cjs';
+import '../types/index.cjs';
+import './typography/Overline.cjs';
+import './typography/LabelStrong.cjs';
+import './typography/LabelModerate.cjs';
+import './typography/Title.cjs';
+import './typography/Display.cjs';
+import '../index-dcf19aa7.js';
+import '../icons/AI.cjs';
+import '../icons/AnchorLink.cjs';
+import '../icons/ApiConnection.cjs';
+import '../icons/AppIcon.cjs';
+import '../icons/ArrowCircle.cjs';
+import '../icons/ArrowCircleTier1.cjs';
+import '../icons/ArrowCircleTier2.cjs';
+import '../icons/ArrowCircleTier3.cjs';
+import '../icons/ArrowCornerDownRight.cjs';
+import '../icons/ArrowDown.cjs';
+import '../icons/ArrowUp.cjs';
+import '../icons/ArrowUpRightCircleFill.cjs';
+import '../icons/Bank.cjs';
+import '../icons/BitcoinB.cjs';
+import '../icons/BitcoinBOnRoundedSquare.cjs';
+import '../icons/CameraCapture.cjs';
+import '../icons/CaretRight.cjs';
+import '../icons/CentralArrowShareRight.cjs';
+import '../icons/Checkmark.cjs';
+import '../icons/CheckmarkCircleGreen.cjs';
+import '../icons/CheckmarkCircleTier1.cjs';
+import '../icons/CheckmarkCircleTier2.cjs';
+import '../icons/CheckmarkCircleTier3.cjs';
+import '../icons/Chevron.cjs';
+import '../icons/ChevronLeft.cjs';
+import '../icons/CircleCheck.cjs';
+import '../icons/CircleCheckOutline.cjs';
+import '../icons/CirclePlus.cjs';
+import '../icons/Clock.cjs';
+import '../icons/Close.cjs';
+import '../icons/Code.cjs';
+import '../icons/Copy.cjs';
+import '../icons/CreditCard.cjs';
+import '../icons/DeleteIcon.cjs';
+import '../icons/Dollar.cjs';
+import '../icons/DollarManrope.cjs';
+import '../icons/DollarManropeSmall.cjs';
+import '../icons/DotGrid1x3Horizontal.cjs';
+import '../icons/Download.cjs';
+import '../icons/Envelope.cjs';
+import '../icons/ExclamationPoint.cjs';
+import '../icons/Explorer.cjs';
+import '../icons/Eye.cjs';
+import '../icons/EyeDropper.cjs';
+import '../icons/Figma.cjs';
+import '../icons/FlutterTwoTone.cjs';
+import '../icons/FramedLetterI.cjs';
+import '../icons/Gear.cjs';
+import '../icons/Github.cjs';
+import '../icons/GoTwoTone.cjs';
+import '../icons/GraphQLTwoTone.cjs';
+import '../icons/HeartOutline.cjs';
+import '../icons/Home.cjs';
+import '../icons/HorizontalArrows.cjs';
+import '../icons/Info.cjs';
+import '../icons/JavaScriptTwoTone.cjs';
+import '../icons/JavaTwoTone.cjs';
+import '../icons/KotlinTwoTone.cjs';
+import '../icons/LeftArrow.cjs';
+import '../icons/LightningOnRoundedSquare.cjs';
+import '../icons/LinkIcon.cjs';
+import '../icons/LoadingSpinner.cjs';
+import '../icons/Lock.cjs';
+import '../icons/Logo.cjs';
+import '../icons/LogoBolt.cjs';
+import '../icons/LogoOnCircle.cjs';
+import '../icons/MagicWand.cjs';
+import '../icons/Minus.cjs';
+import '../icons/Monitor.cjs';
+import '../icons/NodeAdd.cjs';
+import '../icons/NotEye.cjs';
+import '../icons/PaperPlane.cjs';
+import '../icons/Pencil.cjs';
+import '../icons/Person.cjs';
+import '../icons/PersonCircle.cjs';
+import '../icons/PiggyBank.cjs';
+import '../icons/Plus.cjs';
+import '../icons/PythonTwoTone.cjs';
+import '../icons/QRCodeIcon.cjs';
+import '../icons/QuestionCircle.cjs';
+import '../icons/QuestionCircleStrong.cjs';
+import '../icons/ReactTwoTone.cjs';
+import '../icons/Recycling.cjs';
+import '../icons/Remove.cjs';
+import '../icons/Restart.cjs';
+import '../icons/RightArrow.cjs';
+import '../icons/Roadmap.cjs';
+import '../icons/RustTwoTone.cjs';
+import '../icons/Satoshi.cjs';
+import '../icons/SatoshiRounded.cjs';
+import '../icons/Search.cjs';
+import '../icons/SecurityKey.cjs';
+import '../icons/Selector.cjs';
+import '../icons/SemiCircleOverlap.cjs';
+import '../icons/Share.cjs';
+import '../icons/ShieldCheck.cjs';
+import '../icons/Sidebar.cjs';
+import '../icons/Sort.cjs';
+import '../icons/StackedLines.cjs';
+import '../icons/SwiftTwoTone.cjs';
+import '../icons/TapSingle.cjs';
+import '../icons/Team.cjs';
+import '../icons/Terminal.cjs';
+import '../icons/Trash.cjs';
+import '../icons/TwoArrowsDown.cjs';
+import '../icons/TwoArrowsUp.cjs';
+import '../icons/Uma.cjs';
+import '../icons/UmaBridgeLoading.cjs';
+import '../icons/Upload.cjs';
+import '../icons/WalletSDKIcon.cjs';
+import '../icons/WarningSign.cjs';
 
-type BadgeColor = "text" | "danger";
-type BadgeProps = {
-    text?: string | undefined;
-    color?: BadgeColor | undefined;
+type BadgeKind = "danger" | "default";
+type BadgeProps<T extends TypographyTypeKey> = {
+    content?: ToReactNodesArgs<T> | undefined;
+    kind?: BadgeKind | undefined;
     ml?: 0 | 4 | 6;
     mr?: 0 | 4 | 6;
+    block?: boolean;
+    size?: "sm" | "lg";
+    icon?: {
+        name: IconName;
+        color?: FontColorKey | undefined;
+    } | undefined;
+    typography?: SimpleTypographyProps;
 };
-declare function Badge({ text, color, ml, mr }: BadgeProps): _emotion_react_jsx_runtime.JSX.Element | null;
-declare const badgeVPadding = 2;
+declare function Badge<T extends TypographyTypeKey>({ content: contentProp, kind, icon, ml, mr, size, block, typography: typographyProp, }: BadgeProps<T>): _emotion_react_jsx_runtime.JSX.Element | null;
+declare const badgeSmVPadding = 2;
 
-export { Badge, BadgeProps, badgeVPadding };
+export { Badge, BadgeProps, badgeSmVPadding };

package/dist/components/Badge.d.ts

@@ -1,13 +1,152 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import { F as FontColorKey } from '../themes-832e46b2.js';
+import { TypographyTypeKey } from '../styles/tokens/typography.js';
+import { SimpleTypographyProps } from '../styles/typography.js';
+import { ToReactNodesArgs } from '../utils/toReactNodes.js';
+import { IconName } from './Icon/types.js';
+import '@emotion/react';
+import '@emotion/css';
+import '../styles/colors.js';
+import '@lightsparkdev/core';
+import './typography/renderTypography.js';
+import './typography/Code.js';
+import '@emotion/styled';
+import 'react';
+import '../utils/toNonTypographicReactNodes.js';
+import '../types/index.js';
+import './typography/Overline.js';
+import './typography/LabelStrong.js';
+import './typography/LabelModerate.js';
+import './typography/Title.js';
+import './typography/Display.js';
+import '../index-71766330.js';
+import '../icons/AI.js';
+import '../icons/AnchorLink.js';
+import '../icons/ApiConnection.js';
+import '../icons/AppIcon.js';
+import '../icons/ArrowCircle.js';
+import '../icons/ArrowCircleTier1.js';
+import '../icons/ArrowCircleTier2.js';
+import '../icons/ArrowCircleTier3.js';
+import '../icons/ArrowCornerDownRight.js';
+import '../icons/ArrowDown.js';
+import '../icons/ArrowUp.js';
+import '../icons/ArrowUpRightCircleFill.js';
+import '../icons/Bank.js';
+import '../icons/BitcoinB.js';
+import '../icons/BitcoinBOnRoundedSquare.js';
+import '../icons/CameraCapture.js';
+import '../icons/CaretRight.js';
+import '../icons/CentralArrowShareRight.js';
+import '../icons/Checkmark.js';
+import '../icons/CheckmarkCircleGreen.js';
+import '../icons/CheckmarkCircleTier1.js';
+import '../icons/CheckmarkCircleTier2.js';
+import '../icons/CheckmarkCircleTier3.js';
+import '../icons/Chevron.js';
+import '../icons/ChevronLeft.js';
+import '../icons/CircleCheck.js';
+import '../icons/CircleCheckOutline.js';
+import '../icons/CirclePlus.js';
+import '../icons/Clock.js';
+import '../icons/Close.js';
+import '../icons/Code.js';
+import '../icons/Copy.js';
+import '../icons/CreditCard.js';
+import '../icons/DeleteIcon.js';
+import '../icons/Dollar.js';
+import '../icons/DollarManrope.js';
+import '../icons/DollarManropeSmall.js';
+import '../icons/DotGrid1x3Horizontal.js';
+import '../icons/Download.js';
+import '../icons/Envelope.js';
+import '../icons/ExclamationPoint.js';
+import '../icons/Explorer.js';
+import '../icons/Eye.js';
+import '../icons/EyeDropper.js';
+import '../icons/Figma.js';
+import '../icons/FlutterTwoTone.js';
+import '../icons/FramedLetterI.js';
+import '../icons/Gear.js';
+import '../icons/Github.js';
+import '../icons/GoTwoTone.js';
+import '../icons/GraphQLTwoTone.js';
+import '../icons/HeartOutline.js';
+import '../icons/Home.js';
+import '../icons/HorizontalArrows.js';
+import '../icons/Info.js';
+import '../icons/JavaScriptTwoTone.js';
+import '../icons/JavaTwoTone.js';
+import '../icons/KotlinTwoTone.js';
+import '../icons/LeftArrow.js';
+import '../icons/LightningOnRoundedSquare.js';
+import '../icons/LinkIcon.js';
+import '../icons/LoadingSpinner.js';
+import '../icons/Lock.js';
+import '../icons/Logo.js';
+import '../icons/LogoBolt.js';
+import '../icons/LogoOnCircle.js';
+import '../icons/MagicWand.js';
+import '../icons/Minus.js';
+import '../icons/Monitor.js';
+import '../icons/NodeAdd.js';
+import '../icons/NotEye.js';
+import '../icons/PaperPlane.js';
+import '../icons/Pencil.js';
+import '../icons/Person.js';
+import '../icons/PersonCircle.js';
+import '../icons/PiggyBank.js';
+import '../icons/Plus.js';
+import '../icons/PythonTwoTone.js';
+import '../icons/QRCodeIcon.js';
+import '../icons/QuestionCircle.js';
+import '../icons/QuestionCircleStrong.js';
+import '../icons/ReactTwoTone.js';
+import '../icons/Recycling.js';
+import '../icons/Remove.js';
+import '../icons/Restart.js';
+import '../icons/RightArrow.js';
+import '../icons/Roadmap.js';
+import '../icons/RustTwoTone.js';
+import '../icons/Satoshi.js';
+import '../icons/SatoshiRounded.js';
+import '../icons/Search.js';
+import '../icons/SecurityKey.js';
+import '../icons/Selector.js';
+import '../icons/SemiCircleOverlap.js';
+import '../icons/Share.js';
+import '../icons/ShieldCheck.js';
+import '../icons/Sidebar.js';
+import '../icons/Sort.js';
+import '../icons/StackedLines.js';
+import '../icons/SwiftTwoTone.js';
+import '../icons/TapSingle.js';
+import '../icons/Team.js';
+import '../icons/Terminal.js';
+import '../icons/Trash.js';
+import '../icons/TwoArrowsDown.js';
+import '../icons/TwoArrowsUp.js';
+import '../icons/Uma.js';
+import '../icons/UmaBridgeLoading.js';
+import '../icons/Upload.js';
+import '../icons/WalletSDKIcon.js';
+import '../icons/WarningSign.js';
 
-type BadgeColor = "text" | "danger";
-type BadgeProps = {
-    text?: string | undefined;
-    color?: BadgeColor | undefined;
+type BadgeKind = "danger" | "default";
+type BadgeProps<T extends TypographyTypeKey> = {
+    content?: ToReactNodesArgs<T> | undefined;
+    kind?: BadgeKind | undefined;
     ml?: 0 | 4 | 6;
     mr?: 0 | 4 | 6;
+    block?: boolean;
+    size?: "sm" | "lg";
+    icon?: {
+        name: IconName;
+        color?: FontColorKey | undefined;
+    } | undefined;
+    typography?: SimpleTypographyProps;
 };
-declare function Badge({ text, color, ml, mr }: BadgeProps): _emotion_react_jsx_runtime.JSX.Element | null;
-declare const badgeVPadding = 2;
+declare function Badge<T extends TypographyTypeKey>({ content: contentProp, kind, icon, ml, mr, size, block, typography: typographyProp, }: BadgeProps<T>): _emotion_react_jsx_runtime.JSX.Element | null;
+declare const badgeSmVPadding = 2;
 
-export { Badge, BadgeProps, badgeVPadding };
+export { Badge, BadgeProps, badgeSmVPadding };

package/dist/components/Badge.js

@@ -1,28 +1,25 @@
 import {
   Badge,
-  badgeVPadding
-} from "../chunk-RSAYBOK5.js";
-import "../chunk-B2VYAIYR.js";
-import "../chunk-55M7XHBZ.js";
-import "../chunk-J7SV67XL.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";
+  badgeSmVPadding
+} from "../chunk-VWD7T5MQ.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-3XSQV5U4.js";
-import "../chunk-KFX7US6Y.js";
-import "../chunk-KBYU4ZQ3.js";
+import "../chunk-OUHQXQOJ.js";
+import "../chunk-TNDSUTUN.js";
 import "../chunk-EDN2QDCB.js";
 import "../chunk-FT62PIPN.js";
 import "../chunk-5ZDDVLS6.js";
@@ -137,8 +134,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";
@@ -146,5 +143,5 @@ import "../chunk-XUWFUTR4.js";
 import "../chunk-LOPKRCGI.js";
 export {
   Badge,
-  badgeVPadding
+  badgeSmVPadding
 };

package/dist/components/Banner/Banner.cjs

@@ -22,6 +22,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -71,7 +83,7 @@ __export(Banner_exports, {
 });
 module.exports = __toCommonJS(Banner_exports);
 var import_styled13 = __toESM(require("@emotion/styled"), 1);
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/hooks/useResizeObserver.tsx
 var import_lodash_es = require("lodash-es");
@@ -3723,6 +3735,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;
@@ -3759,7 +3775,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, {
@@ -3798,6 +3818,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"
@@ -3874,7 +3895,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -3882,7 +3906,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 */
@@ -3943,7 +3968,11 @@ var z = {
 };
 
 // src/utils/toReactNodes.tsx
-var import_react22 = require("react");
+var import_lodash_es5 = require("lodash-es");
+var import_react23 = require("react");
+
+// src/components/typography/renderTypography.tsx
+var import_react22 = __toESM(require("react"), 1);
 
 // src/components/typography/Body.tsx
 var import_styled3 = __toESM(require("@emotion/styled"), 1);
@@ -7921,7 +7950,7 @@ var IconContainer = import_styled2.default.span`
   ${({ theme, fontColor }) => {
   const color = getFontColor(theme, fontColor, "inherit");
   return `
-    & svg {
+    svg, path {
       color: ${getFontColor(theme, fontColor, "inherit")};
 
       /* 
@@ -8002,6 +8031,7 @@ function toNonTypographicReactNodes(toNonTypographicReactNodesArg) {
         Link,
         {
           to: node.to,
+          newTab: !!node.newTab,
           children: node.text
         },
         `link-${i}-${node.text.substr(0, 10)}`
@@ -8285,7 +8315,6 @@ var StyledTitle = import_styled12.default.span`
 `;
 
 // src/components/typography/renderTypography.tsx
-var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
 var typographyMap = {
   Display,
   Headline,
@@ -8297,34 +8326,34 @@ var typographyMap = {
   "Label Strong": LabelStrong,
   Overline,
   Code: Code2,
-  "Code Strong": () => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { children: "Unimplemented" })
+  "Code Strong": Code2
 };
 var renderTypography = (type, props) => {
   const TypographyComponent = typographyMap[type];
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(TypographyComponent, __spreadValues({}, props));
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return import_react22.default.createElement(TypographyComponent, rest, children);
 };
 
 // src/utils/toReactNodes.tsx
-var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
 function toReactNodes(toReactNodesArg) {
   const toReactNodesArray = Array.isArray(toReactNodesArg) ? toReactNodesArg : [toReactNodesArg];
   const reactNodes = toReactNodesArray.map((node, i) => {
     let content;
     if (!node) {
       return null;
-    } else if (typeof node !== "string" && "typography" in node && node.typography.type && node.typography.props) {
-      content = /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react22.Fragment, { children: renderTypography(
+    } else if (typeof node !== "string" && "typography" in node && node.typography.type) {
+      const props = node.typography.props || {};
+      content = /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_react23.Fragment, { children: renderTypography(
         node.typography.type,
-        Object.assign(node.typography.props, {
-          content: node
-        })
+        Object.assign(props, { content: node })
       ) }, `typography-${i}-${node.text.substr(0, 10)}`);
     } else {
       content = toNonTypographicReactNodes(node);
     }
     return content || null;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react22.Fragment, { children: reactNodes });
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_react23.Fragment, { children: reactNodes });
 }
 
 // src/components/Banner/constants.ts
@@ -8332,7 +8361,7 @@ var bannerTimingSecs = 0.2;
 var bannerTiming = `${bannerTimingSecs}s ease`;
 
 // src/components/Banner/Banner.tsx
-var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
 function Banner({
   content,
   to,
@@ -8348,17 +8377,17 @@ function Banner({
   hPadding = 0,
   borderColor
 }) {
-  const [width, setWidth] = (0, import_react23.useState)(70);
-  const resizeProps = (0, import_react23.useMemo)(() => ["height"], []);
+  const [width, setWidth] = (0, import_react24.useState)(70);
+  const resizeProps = (0, import_react24.useMemo)(() => ["height"], []);
   const { ref, rect } = useResizeObserver(resizeProps);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (bgProgressDuration) {
       setTimeout(() => {
         setWidth(100);
       }, 0);
     }
   }, [bgProgressDuration]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (onHeightChange && typeof (rect == null ? void 0 : rect.height) === "number") {
       onHeightChange(rect.height);
     }
@@ -8367,15 +8396,15 @@ function Banner({
   if (content) {
     const contentNodes = toReactNodes(content);
     if (to) {
-      contentNode = /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Link, { to, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(BannerFlexInnerContent, { children: [
+      contentNode = /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Link, { to, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(BannerFlexInnerContent, { children: [
         contentNodes,
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: "RightArrow", width: 12, ml: 6 })
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { name: "RightArrow", width: 12, ml: 6 })
       ] }) });
     } else {
       contentNode = contentNodes;
     }
   }
-  const innerContent = content ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+  const innerContent = content ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     BannerInnerContent,
     {
       isVisible: Boolean(content),
@@ -8384,7 +8413,7 @@ function Banner({
       children: contentNode
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
     StyledBanner,
     {
       colorProp: color,
@@ -8399,7 +8428,7 @@ function Banner({
         left,
         innerContent,
         right,
-        bgProgressDuration && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+        bgProgressDuration && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
           BannerGradientBg,
           {
             duration: bgProgressDuration,

package/dist/components/Banner/Banner.d.cts

@@ -1,6 +1,6 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { ReactNode } from 'react';
-import { T as ThemeOrColorKey } from '../../buttons-b7f56076.js';
+import { T as ThemeOrColorKey } from '../../themes-37e92940.js';
 import { TypographyTypeKey } from '../../styles/tokens/typography.cjs';
 import { NewRoutesType } from '../../types/index.cjs';
 import { ToReactNodesArgs } from '../../utils/toReactNodes.cjs';

package/dist/components/Banner/Banner.d.ts

@@ -1,6 +1,6 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { ReactNode } from 'react';
-import { T as ThemeOrColorKey } from '../../buttons-e4eb84a2.js';
+import { T as ThemeOrColorKey } from '../../themes-832e46b2.js';
 import { TypographyTypeKey } from '../../styles/tokens/typography.js';
 import { NewRoutesType } from '../../types/index.js';
 import { ToReactNodesArgs } from '../../utils/toReactNodes.js';