@lightsparkdev/ui 0.0.7 → 0.0.8

package/dist/styles/fields.cjs

@@ -56,6 +56,7 @@ __export(fields_exports, {
   fieldWidth: () => fieldWidth,
   formButtonTopMargin: () => formButtonTopMargin,
   formButtonTopMarginStyle: () => formButtonTopMarginStyle,
+  inputBlockStyle: () => inputBlockStyle,
   inputSpacingPx: () => inputSpacingPx,
   labelStyle: () => labelStyle,
   maxFieldWidth: () => maxFieldWidth,
@@ -1286,40 +1287,17 @@ function hexToRGB(hex) {
 // src/styles/common.tsx
 var import_react4 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
-var import_react_tooltip = require("react-tooltip");
-
-// src/styles/z-index.tsx
-var z = {
-  card: 1,
-  fieldError: 1,
-  textInput: 2,
-  select: 3,
-  selectFocused: 4,
-  walletActionPreviewTopGradient: 1,
-  headerContainer: 99,
-  smBanner: 99,
-  headerTop: 100,
-  navMenu: 100,
-  smNavMenu: 100,
-  navAction: 101,
-  smNavAction: 100,
-  // keep under navDropdown
-  tooltip: 160,
-  notificationBanner: 170,
-  qrReaderVideo: 180,
-  qrReaderOverlay: 181,
-  modalOverlay: 190,
-  modalContainer: 191,
-  dropdown: 192,
-  toast: 200
-};
-
-// src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
 var standardContentInsetPx = 32;
 var standardContentInsetMdPx = 24;
 var standardContentInsetSmPx = 16;
+var standardBorderRadius = (radius) => {
+  const borderRadiusPx = Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`;
+  return `
+    border-radius: ${borderRadiusPx};
+  `;
+};
 var smContentInset = import_react4.css`
   ${bp.sm(`
     margin-left: auto;
@@ -1360,9 +1338,32 @@ var Subtext = import_styled.default.div`
 var darkGradientBg = import_react4.css`
   background: ${darkGradient};
 `;
-var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
-  z-index: ${z.modalOverlay};
-`;
+
+// src/styles/z-index.tsx
+var z = {
+  card: 1,
+  fieldError: 1,
+  textInput: 2,
+  select: 3,
+  selectFocused: 4,
+  walletActionPreviewTopGradient: 1,
+  headerContainer: 99,
+  smBanner: 99,
+  headerTop: 100,
+  navMenu: 100,
+  smNavMenu: 100,
+  navAction: 101,
+  smNavAction: 100,
+  // keep under navDropdown
+  notificationBanner: 170,
+  qrReaderVideo: 180,
+  qrReaderOverlay: 181,
+  modalOverlay: 190,
+  modalContainer: 191,
+  dropdown: 192,
+  tooltip: 193,
+  toast: 200
+};
 
 // src/styles/fields.tsx
 var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
@@ -1376,6 +1377,25 @@ var formButtonTopMarginStyle = import_react5.css`
 var standardBorderColor = ({ theme }) => import_react5.css`
   border-color: ${themeOr(theme.c1Neutral, theme.mcNeutral)({ theme })};
 `;
+var inputBlockStyle = ({
+  theme,
+  hasValue,
+  hasError
+}) => import_react5.css`
+  ${subtext({ theme })}
+  ${standardBorderColor({ theme })}
+  ${standardBorderRadius(8)}
+  background-color: ${theme.bg};
+  border-width: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+  cursor: pointer;
+  padding: 52.5px;
+  ${hasError ? `border-style: solid; border-color: ${colors.danger}; border-width: 2px;` : hasValue ? `border-style: solid; border-color: ${theme.info};` : `border-style: dashed;`}
+`;
 var textInputPlaceholderColor = ({ theme }) => theme.c4Neutral;
 var textInputColor = ({ theme }) => theme.text;
 var textInputFontWeight = 600;
@@ -1458,7 +1478,8 @@ var aboveFieldError = ({
 var inputSubtextSeconds = 0.25;
 function InputSubtext({
   text,
-  hasError = false
+  hasError = false,
+  tooltipId
 }) {
   const timeoutRef = (0, import_react6.useRef)(null);
   const [subtext2, setSubtext] = (0, import_react6.useState)(text);
@@ -1477,7 +1498,15 @@ function InputSubtext({
       }, inputSubtextSeconds * 1e3);
     }
   }, [text]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledInputSubtext, { visible, hasError, children: subtext2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    StyledInputSubtext,
+    {
+      visible,
+      hasError,
+      cursorPointer: Boolean(tooltipId),
+      children: tooltipId ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "data-tooltip-id": tooltipId, children: subtext2 }) : subtext2
+    }
+  );
 }
 var StyledInputSubtext = import_styled2.default.div`
   margin-top: ${({ visible }) => visible ? "8px" : "0px"};
@@ -1491,6 +1520,7 @@ var StyledInputSubtext = import_styled2.default.div`
     opacity ${inputSubtextSeconds * 0.8}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
     margin ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23);
   color: ${({ hasError, theme }) => hasError ? theme.danger : theme.text};
+  cursor: ${({ cursorPointer }) => cursorPointer ? "pointer" : "auto"};
 `;
 var labelStyle = ({
   theme,
@@ -1527,6 +1557,7 @@ var LabelDiv = import_styled2.default.div`
   fieldWidth,
   formButtonTopMargin,
   formButtonTopMarginStyle,
+  inputBlockStyle,
   inputSpacingPx,
   labelStyle,
   maxFieldWidth,

package/dist/styles/fields.d.cts

@@ -12,6 +12,10 @@ declare const inputSpacingPx = 24;
 declare const formButtonTopMargin = "32px";
 declare const formButtonTopMarginStyle: _emotion_react.SerializedStyles;
 declare const standardBorderColor: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
+declare const inputBlockStyle: ({ theme, hasValue, hasError, }: WithTheme<{
+    hasValue: boolean;
+    hasError: boolean;
+}>) => _emotion_react.SerializedStyles;
 declare const textInputPlaceholderColor: ({ theme }: ThemeProp) => string;
 declare const textInputColor: ({ theme }: ThemeProp) => string;
 declare const textInputFontWeight = 600;
@@ -33,9 +37,10 @@ declare const FieldError: _emotion_styled.StyledComponent<{
 declare const aboveFieldError: ({ theme, hasError, }: WithTheme<{
     hasError: boolean;
 }>) => _emotion_react.SerializedStyles;
-declare function InputSubtext({ text, hasError, }: {
+declare function InputSubtext({ text, hasError, tooltipId, }: {
     text?: string | undefined;
     hasError?: boolean;
+    tooltipId?: string | undefined;
 }): _emotion_react_jsx_runtime.JSX.Element;
 declare const StyledInputSubtext: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme;
@@ -43,6 +48,7 @@ declare const StyledInputSubtext: _emotion_styled.StyledComponent<{
 } & {
     hasError: boolean;
     visible: boolean;
+    cursorPointer: boolean;
 }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const labelStyle: ({ theme, hasError, }: WithTheme<{
     hasError?: boolean;
@@ -60,4 +66,4 @@ declare const LabelDiv: _emotion_styled.StyledComponent<{
     hasError?: boolean;
 }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
-export { FieldError, InputSubtext, Label, LabelDiv, StyledInputSubtext, aboveFieldError, fieldWidth, formButtonTopMargin, formButtonTopMarginStyle, inputSpacingPx, labelStyle, maxFieldWidth, standardBorderColor, textInputBorderColor, textInputBorderColorFocused, textInputBorderRadiusPx, textInputColor, textInputFontWeight, textInputPadding, textInputPaddingPx, textInputPlaceholderColor, textInputStyle };
+export { FieldError, InputSubtext, Label, LabelDiv, StyledInputSubtext, aboveFieldError, fieldWidth, formButtonTopMargin, formButtonTopMarginStyle, inputBlockStyle, inputSpacingPx, labelStyle, maxFieldWidth, standardBorderColor, textInputBorderColor, textInputBorderColorFocused, textInputBorderRadiusPx, textInputColor, textInputFontWeight, textInputPadding, textInputPaddingPx, textInputPlaceholderColor, textInputStyle };

package/dist/styles/fields.d.ts

@@ -12,6 +12,10 @@ declare const inputSpacingPx = 24;
 declare const formButtonTopMargin = "32px";
 declare const formButtonTopMarginStyle: _emotion_react.SerializedStyles;
 declare const standardBorderColor: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
+declare const inputBlockStyle: ({ theme, hasValue, hasError, }: WithTheme<{
+    hasValue: boolean;
+    hasError: boolean;
+}>) => _emotion_react.SerializedStyles;
 declare const textInputPlaceholderColor: ({ theme }: ThemeProp) => string;
 declare const textInputColor: ({ theme }: ThemeProp) => string;
 declare const textInputFontWeight = 600;
@@ -33,9 +37,10 @@ declare const FieldError: _emotion_styled.StyledComponent<{
 declare const aboveFieldError: ({ theme, hasError, }: WithTheme<{
     hasError: boolean;
 }>) => _emotion_react.SerializedStyles;
-declare function InputSubtext({ text, hasError, }: {
+declare function InputSubtext({ text, hasError, tooltipId, }: {
     text?: string | undefined;
     hasError?: boolean;
+    tooltipId?: string | undefined;
 }): _emotion_react_jsx_runtime.JSX.Element;
 declare const StyledInputSubtext: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme;
@@ -43,6 +48,7 @@ declare const StyledInputSubtext: _emotion_styled.StyledComponent<{
 } & {
     hasError: boolean;
     visible: boolean;
+    cursorPointer: boolean;
 }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const labelStyle: ({ theme, hasError, }: WithTheme<{
     hasError?: boolean;
@@ -60,4 +66,4 @@ declare const LabelDiv: _emotion_styled.StyledComponent<{
     hasError?: boolean;
 }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
-export { FieldError, InputSubtext, Label, LabelDiv, StyledInputSubtext, aboveFieldError, fieldWidth, formButtonTopMargin, formButtonTopMarginStyle, inputSpacingPx, labelStyle, maxFieldWidth, standardBorderColor, textInputBorderColor, textInputBorderColorFocused, textInputBorderRadiusPx, textInputColor, textInputFontWeight, textInputPadding, textInputPaddingPx, textInputPlaceholderColor, textInputStyle };
+export { FieldError, InputSubtext, Label, LabelDiv, StyledInputSubtext, aboveFieldError, fieldWidth, formButtonTopMargin, formButtonTopMarginStyle, inputBlockStyle, inputSpacingPx, labelStyle, maxFieldWidth, standardBorderColor, textInputBorderColor, textInputBorderColorFocused, textInputBorderRadiusPx, textInputColor, textInputFontWeight, textInputPadding, textInputPaddingPx, textInputPlaceholderColor, textInputStyle };

package/dist/styles/fields.js

@@ -1,171 +1,34 @@
 import {
-  subtext
-} from "../chunk-RFGKH3R6.js";
-import {
-  themeOr
-} from "../chunk-2VBDEO6M.js";
+  FieldError,
+  InputSubtext,
+  Label,
+  LabelDiv,
+  StyledInputSubtext,
+  aboveFieldError,
+  fieldWidth,
+  formButtonTopMargin,
+  formButtonTopMarginStyle,
+  inputBlockStyle,
+  inputSpacingPx,
+  labelStyle,
+  maxFieldWidth,
+  standardBorderColor,
+  textInputBorderColor,
+  textInputBorderColorFocused,
+  textInputBorderRadiusPx,
+  textInputColor,
+  textInputFontWeight,
+  textInputPadding,
+  textInputPaddingPx,
+  textInputPlaceholderColor,
+  textInputStyle
+} from "../chunk-SZVMKB4E.js";
+import "../chunk-55OQPFLF.js";
+import "../chunk-HNVQIY5U.js";
+import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
-import {
-  z
-} from "../chunk-CLU2FRJZ.js";
 import "../chunk-CIGAQ47A.js";
-
-// src/styles/fields.tsx
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { useLayoutEffect, useRef, useState } from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
-var maxFieldWidth = "100%";
-var fieldWidth = "100%";
-var inputSpacingPx = 24;
-var formButtonTopMargin = "32px";
-var formButtonTopMarginStyle = css`
-  margin-top: ${formButtonTopMargin};
-`;
-var standardBorderColor = ({ theme }) => css`
-  border-color: ${themeOr(theme.c1Neutral, theme.mcNeutral)({ theme })};
-`;
-var textInputPlaceholderColor = ({ theme }) => theme.c4Neutral;
-var textInputColor = ({ theme }) => theme.text;
-var textInputFontWeight = 600;
-var textInputBorderRadiusPx = 8;
-var textInputPaddingPx = 12;
-var textInputPadding = `${textInputPaddingPx}px`;
-var textInputBorderColor = ({ theme }) => themeOr(theme.c1Neutral, theme.c3Neutral)({ theme });
-var textInputBorderColorFocused = ({ theme }) => themeOr(theme.hcNeutral, theme.hcNeutral)({ theme });
-var textInputStyle = ({
-  theme,
-  disabled,
-  hasError,
-  paddingLeftPx,
-  paddingRightPx
-}) => {
-  var _a;
-  return css`
-  border-radius: ${textInputBorderRadiusPx}px;
-  background-color: ${disabled ? theme.vlcNeutral : theme.bg};
-  cursor: ${disabled ? "not-allowed" : "auto"};
-  box-sizing: border-box;
-  font-weight: ${textInputFontWeight};
-
-  position: relative;
-  z-index: ${z.textInput};
-  font-family: ${(_a = theme.typography) == null ? void 0 : _a.fontFamilies.main};
-  padding: ${textInputPaddingPx - (hasError ? 1 : 0)}px;
-  ${paddingLeftPx ? `padding-left: ${paddingLeftPx - (hasError ? 1 : 0)}px;` : ""}
-  ${paddingRightPx ? `padding-right: ${paddingRightPx - (hasError ? 1 : 0)}px;` : ""}
-  border-style: solid;
-  border-width: ${hasError ? "2" : "1"}px;
-  border-color: ${hasError ? theme.danger : textInputBorderColor({ theme })};
-  line-height: 22px;
-  outline: none;
-  /* Use low contrast by default. Some fields, eg login, need high contrast simply
-     because of quirks with default autofill styles. Clicking in to an autofilled value
-     does not change the color of the text, it just uses the default field color */
-  color: ${textInputColor({ theme })};
-  font-size: 14px;
-  width: ${fieldWidth};
-  max-width: ${maxFieldWidth};
-  text-overflow: ellipsis;
-  &:focus,
-  &:active {
-    border-color: ${textInputBorderColorFocused({ theme })};
-    border-width: 2px;
-    color: ${textInputColor({ theme })};
-    padding: ${textInputPaddingPx - 1}px;
-    ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
-    ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
-  }
-
-  &::placeholder {
-    color: ${textInputPlaceholderColor({ theme })};
-  }
-
-  &:focus::placeholder {
-    color: ${textInputPlaceholderColor({ theme })};
-  }
-`;
-};
-var FieldError = styled.div`
-  background-color: rgba(242, 239, 255, 1);
-  padding: 16px 16px 8px;
-  margin-top: -8px;
-  border-radius: 0 0 8px 8px;
-  position: relative;
-  z-index: ${z.fieldError};
-`;
-var aboveFieldError = ({
-  theme,
-  hasError
-}) => css`
-  ${hasError ? "border: none !important" : ""};
-  background-color: ${theme.bg};
-  position: relative;
-  z-index: ${z.fieldError + 1};
-  ${hasError && "box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1);"}
-`;
-var inputSubtextSeconds = 0.25;
-function InputSubtext({
-  text,
-  hasError = false
-}) {
-  const timeoutRef = useRef(null);
-  const [subtext2, setSubtext] = useState(text);
-  const [visible, setVisible] = useState(Boolean(text));
-  useLayoutEffect(() => {
-    if (text) {
-      setSubtext(text);
-      setVisible(true);
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    } else {
-      setVisible(false);
-      timeoutRef.current = setTimeout(() => {
-        setSubtext(void 0);
-      }, inputSubtextSeconds * 1e3);
-    }
-  }, [text]);
-  return /* @__PURE__ */ jsx(StyledInputSubtext, { visible, hasError, children: subtext2 });
-}
-var StyledInputSubtext = styled.div`
-  margin-top: ${({ visible }) => visible ? "8px" : "0px"};
-  margin-left: ${({ visible }) => visible ? "8px" : "0px"};
-  font-size: 12px;
-  font-size: ${({ visible }) => visible ? "12px" : "0px"};
-  opacity: ${({ visible }) => visible ? "1" : "0"};
-  overflow: hidden;
-  transition:
-    font-size ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
-    opacity ${inputSubtextSeconds * 0.8}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
-    margin ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23);
-  color: ${({ hasError, theme }) => hasError ? theme.danger : theme.text};
-`;
-var labelStyle = ({
-  theme,
-  hasError
-}) => css`
-  color: ${hasError ? theme.danger : theme.text};
-  font-size: 14px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  & + * {
-    margin-top: 12px;
-  }
-  * ~ & {
-    margin-top: 40px;
-  }
-`;
-var Label = styled.label`
-  ${subtext}
-  ${labelStyle}
-`;
-var LabelDiv = styled.div`
-  ${subtext}
-  ${labelStyle}
-`;
 export {
   FieldError,
   InputSubtext,
@@ -176,6 +39,7 @@ export {
   fieldWidth,
   formButtonTopMargin,
   formButtonTopMarginStyle,
+  inputBlockStyle,
   inputSpacingPx,
   labelStyle,
   maxFieldWidth,

package/dist/styles/fonts/typography/Article.cjs

@@ -59,7 +59,6 @@ var import_styled2 = __toESM(require("@emotion/styled"), 1);
 // src/styles/common.tsx
 var import_react4 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
-var import_react_tooltip = require("react-tooltip");
 
 // src/styles/breakpoints.tsx
 var import_react = require("@emotion/react");
@@ -1277,32 +1276,6 @@ function hexToRGB(hex) {
   ] : [0, 0, 0];
 }
 
-// src/styles/z-index.tsx
-var z = {
-  card: 1,
-  fieldError: 1,
-  textInput: 2,
-  select: 3,
-  selectFocused: 4,
-  walletActionPreviewTopGradient: 1,
-  headerContainer: 99,
-  smBanner: 99,
-  headerTop: 100,
-  navMenu: 100,
-  smNavMenu: 100,
-  navAction: 101,
-  smNavAction: 100,
-  // keep under navDropdown
-  tooltip: 160,
-  notificationBanner: 170,
-  qrReaderVideo: 180,
-  qrReaderOverlay: 181,
-  modalOverlay: 190,
-  modalContainer: 191,
-  dropdown: 192,
-  toast: 200
-};
-
 // src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
@@ -1355,9 +1328,6 @@ var Subtext = import_styled.default.div`
 var darkGradientBg = import_react4.css`
   background: ${darkGradient};
 `;
-var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
-  z-index: ${z.modalOverlay};
-`;
 
 // src/components/ContentTable.tsx
 var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");

package/dist/styles/fonts/typography/Article.js

@@ -1,23 +1,22 @@
 "use client";
 import {
   Article
-} from "../../../chunk-VBWTKANQ.js";
+} from "../../../chunk-FN5PM3HQ.js";
 import "../../../chunk-FHNYQLMF.js";
-import "../../../chunk-LD5LZXUP.js";
 import "../../../chunk-BCFRW7CV.js";
 import "../../../chunk-QGGOMPHZ.js";
+import "../../../chunk-LD5LZXUP.js";
 import "../../../chunk-4TFRLWCC.js";
 import "../../../chunk-YMNSXZ5D.js";
 import "../../../chunk-3XSQV5U4.js";
-import "../../../chunk-UO6U7AYM.js";
-import "../../../chunk-K7D7A34K.js";
-import "../../../chunk-NZJCJJH5.js";
+import "../../../chunk-2YB7653N.js";
+import "../../../chunk-744FBGRP.js";
+import "../../../chunk-VHW2KROZ.js";
 import "../../../chunk-LAMQKQU3.js";
-import "../../../chunk-RFGKH3R6.js";
+import "../../../chunk-HNVQIY5U.js";
 import "../../../chunk-2VBDEO6M.js";
 import "../../../chunk-E4EXM4SY.js";
 import "../../../chunk-JSGRNWSB.js";
-import "../../../chunk-CLU2FRJZ.js";
 import "../../../chunk-CIGAQ47A.js";
 export {
   Article

package/dist/styles/fonts/typography/index.cjs

@@ -70,7 +70,6 @@ var import_styled2 = __toESM(require("@emotion/styled"), 1);
 // src/styles/common.tsx
 var import_react4 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
-var import_react_tooltip = require("react-tooltip");
 
 // src/styles/breakpoints.tsx
 var import_react = require("@emotion/react");
@@ -1288,32 +1287,6 @@ function hexToRGB(hex) {
   ] : [0, 0, 0];
 }
 
-// src/styles/z-index.tsx
-var z = {
-  card: 1,
-  fieldError: 1,
-  textInput: 2,
-  select: 3,
-  selectFocused: 4,
-  walletActionPreviewTopGradient: 1,
-  headerContainer: 99,
-  smBanner: 99,
-  headerTop: 100,
-  navMenu: 100,
-  smNavMenu: 100,
-  navAction: 101,
-  smNavAction: 100,
-  // keep under navDropdown
-  tooltip: 160,
-  notificationBanner: 170,
-  qrReaderVideo: 180,
-  qrReaderOverlay: 181,
-  modalOverlay: 190,
-  modalContainer: 191,
-  dropdown: 192,
-  toast: 200
-};
-
 // src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
@@ -1366,9 +1339,6 @@ var Subtext = import_styled.default.div`
 var darkGradientBg = import_react4.css`
   background: ${darkGradient};
 `;
-var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
-  z-index: ${z.modalOverlay};
-`;
 
 // src/components/ContentTable.tsx
 var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");

package/dist/styles/fonts/typography/index.js

@@ -1,3 +1,6 @@
+import {
+  BodyStrong
+} from "../../../chunk-LN7MMOXE.js";
 import {
   Label
 } from "../../../chunk-OO5UJRAW.js";
@@ -12,36 +15,32 @@ import {
 } from "../../../chunk-RBYRXBPI.js";
 import {
   Article
-} from "../../../chunk-VBWTKANQ.js";
+} from "../../../chunk-FN5PM3HQ.js";
 import {
   Title
 } from "../../../chunk-FHNYQLMF.js";
-import {
-  Body
-} from "../../../chunk-LD5LZXUP.js";
-import {
-  BodyStrong
-} from "../../../chunk-LN7MMOXE.js";
 import {
   Code
 } from "../../../chunk-BCFRW7CV.js";
 import {
   Display
 } from "../../../chunk-QGGOMPHZ.js";
+import {
+  Body
+} from "../../../chunk-LD5LZXUP.js";
 import {
   Headline
 } from "../../../chunk-4TFRLWCC.js";
 import "../../../chunk-YMNSXZ5D.js";
 import "../../../chunk-3XSQV5U4.js";
-import "../../../chunk-UO6U7AYM.js";
-import "../../../chunk-K7D7A34K.js";
-import "../../../chunk-NZJCJJH5.js";
+import "../../../chunk-2YB7653N.js";
+import "../../../chunk-744FBGRP.js";
+import "../../../chunk-VHW2KROZ.js";
 import "../../../chunk-LAMQKQU3.js";
-import "../../../chunk-RFGKH3R6.js";
+import "../../../chunk-HNVQIY5U.js";
 import "../../../chunk-2VBDEO6M.js";
 import "../../../chunk-E4EXM4SY.js";
 import "../../../chunk-JSGRNWSB.js";
-import "../../../chunk-CLU2FRJZ.js";
 import "../../../chunk-CIGAQ47A.js";
 export {
   Article,

package/dist/styles/global.cjs

@@ -53,7 +53,7 @@ __export(global_exports, {
 module.exports = __toCommonJS(global_exports);
 var import_react5 = require("@emotion/react");
 var import_react6 = require("react");
-var import_react_tooltip2 = require("react-tooltip/dist/react-tooltip.css");
+var import_react_tooltip = require("react-tooltip/dist/react-tooltip.css");
 var import_fonts = require("../static/fonts.css");
 
 // src/styles/breakpoints.tsx
@@ -1292,35 +1292,6 @@ function useThemeBg() {
 // src/styles/common.tsx
 var import_react4 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
-var import_react_tooltip = require("react-tooltip");
-
-// src/styles/z-index.tsx
-var z = {
-  card: 1,
-  fieldError: 1,
-  textInput: 2,
-  select: 3,
-  selectFocused: 4,
-  walletActionPreviewTopGradient: 1,
-  headerContainer: 99,
-  smBanner: 99,
-  headerTop: 100,
-  navMenu: 100,
-  smNavMenu: 100,
-  navAction: 101,
-  smNavAction: 100,
-  // keep under navDropdown
-  tooltip: 160,
-  notificationBanner: 170,
-  qrReaderVideo: 180,
-  qrReaderOverlay: 181,
-  modalOverlay: 190,
-  modalContainer: 191,
-  dropdown: 192,
-  toast: 200
-};
-
-// src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
 var standardLineHeightEms = 1.21;
@@ -1367,9 +1338,6 @@ var Subtext = import_styled.default.div`
 var darkGradientBg = import_react4.css`
   background: ${darkGradient};
 `;
-var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
-  z-index: ${z.modalOverlay};
-`;
 
 // src/styles/constants.ts
 var cssVars = {
@@ -1470,6 +1438,8 @@ function GlobalStyles() {
     :root {
       ${cssVars.docHeight}: 100vh;
       --rt-opacity: 1 !important;
+      --rt-transition-show-delay: 0.15s !important;
+      --rt-transition-closing-delay: 0.2s !important;
     }
 
     html {