@lightsparkdev/ui 0.0.7 → 0.0.9

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,7 +1287,71 @@ 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");
+var rootFontSizePx = 12;
+var rootFontSizeRems = rootFontSizePx / 16;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = import_react4.css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = import_react4.css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = import_react4.css`
+    ${bp.lg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${lgPx * 2}px);
+      max-width: 1280px;
+    `)}
+  `;
+  return {
+    smPx,
+    minSmMaxLgPx,
+    lgPx,
+    smCSS,
+    minSmMaxLgCSS,
+    lgCSS,
+    css: import_react4.css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
+var standardBorderRadius = (radius) => {
+  const borderRadiusPx = Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`;
+  return `
+    border-radius: ${borderRadiusPx};
+  `;
+};
+var standardCardShadow = import_react4.css`
+  box-shadow:
+    0px 4px 10px 0px rgba(0, 0, 0, 0.08),
+    0px 8px 24px 0px rgba(0, 0, 0, 0.04);
+`;
+var pageBorderRadiusPx = 16;
+var pageBorderRadius = `
+  border-radius: ${pageBorderRadiusPx}px;
+`;
+var subtext = ({ theme }) => import_react4.css`
+  color: ${theme.c6Neutral};
+  font-weight: 600;
+`;
+var Subtext = import_styled.default.div`
+  ${subtext}
+`;
+var darkGradientBg = import_react4.css`
+  background: ${darkGradient};
+`;
 
 // src/styles/z-index.tsx
 var z = {
@@ -1304,66 +1369,16 @@ var z = {
   navAction: 101,
   smNavAction: 100,
   // keep under navDropdown
-  tooltip: 160,
   notificationBanner: 170,
   qrReaderVideo: 180,
   qrReaderOverlay: 181,
   modalOverlay: 190,
   modalContainer: 191,
   dropdown: 192,
+  tooltip: 193,
   toast: 200
 };
 
-// src/styles/common.tsx
-var rootFontSizePx = 12;
-var rootFontSizeRems = rootFontSizePx / 16;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
-var smContentInset = import_react4.css`
-  ${bp.sm(`
-    margin-left: auto;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = import_react4.css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = import_react4.css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
-var standardCardShadow = import_react4.css`
-  box-shadow:
-    0px 4px 10px 0px rgba(0, 0, 0, 0.08),
-    0px 8px 24px 0px rgba(0, 0, 0, 0.04);
-`;
-var pageBorderRadiusPx = 16;
-var pageBorderRadius = `
-  border-radius: ${pageBorderRadiusPx}px;
-`;
-var subtext = ({ theme }) => import_react4.css`
-  color: ${theme.c6Neutral};
-  font-weight: 600;
-`;
-var Subtext = import_styled.default.div`
-  ${subtext}
-`;
-var darkGradientBg = import_react4.css`
-  background: ${darkGradient};
-`;
-var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
-  z-index: ${z.modalOverlay};
-`;
-
 // src/styles/fields.tsx
 var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
 var maxFieldWidth = "100%";
@@ -1376,6 +1391,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;
@@ -1384,8 +1418,21 @@ 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 textInputActiveStyles = ({
+  theme,
+  paddingLeftPx,
+  paddingRightPx
+}) => import_react5.css`
+  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;` : ""}
+`;
 var textInputStyle = ({
   theme,
+  active,
   disabled,
   hasError,
   paddingLeftPx,
@@ -1419,15 +1466,13 @@ var textInputStyle = ({
   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;` : ""}
+  &:active,
+  &:has(:focus) {
+    ${textInputActiveStyles({ theme, paddingLeftPx, paddingRightPx })}
   }
 
+  ${active && textInputActiveStyles({ theme, paddingLeftPx, paddingRightPx })}
+
   &::placeholder {
     color: ${textInputPlaceholderColor({ theme })};
   }
@@ -1458,7 +1503,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 +1523,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 +1545,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 +1582,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;
@@ -20,9 +24,10 @@ declare const textInputPaddingPx = 12;
 declare const textInputPadding = "12px";
 declare const textInputBorderColor: ({ theme }: ThemeProp) => string;
 declare const textInputBorderColorFocused: ({ theme }: ThemeProp) => string;
-declare const textInputStyle: ({ theme, disabled, hasError, paddingLeftPx, paddingRightPx, }: WithTheme<{
-    disabled: boolean;
-    hasError: boolean;
+declare const textInputStyle: ({ theme, active, disabled, hasError, paddingLeftPx, paddingRightPx, }: WithTheme<{
+    active?: boolean | undefined;
+    disabled?: boolean | undefined;
+    hasError?: boolean | undefined;
     paddingLeftPx?: number | undefined;
     paddingRightPx?: number | undefined;
 }>) => _emotion_react.SerializedStyles;
@@ -33,9 +38,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 +49,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 +67,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;
@@ -20,9 +24,10 @@ declare const textInputPaddingPx = 12;
 declare const textInputPadding = "12px";
 declare const textInputBorderColor: ({ theme }: ThemeProp) => string;
 declare const textInputBorderColorFocused: ({ theme }: ThemeProp) => string;
-declare const textInputStyle: ({ theme, disabled, hasError, paddingLeftPx, paddingRightPx, }: WithTheme<{
-    disabled: boolean;
-    hasError: boolean;
+declare const textInputStyle: ({ theme, active, disabled, hasError, paddingLeftPx, paddingRightPx, }: WithTheme<{
+    active?: boolean | undefined;
+    disabled?: boolean | undefined;
+    hasError?: boolean | undefined;
     paddingLeftPx?: number | undefined;
     paddingRightPx?: number | undefined;
 }>) => _emotion_react.SerializedStyles;
@@ -33,9 +38,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 +49,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 +67,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-ATUH6SXK.js";
+import "../chunk-55OQPFLF.js";
+import "../chunk-JK4BP73A.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,65 +1276,53 @@ 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;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = import_react4.css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = import_react4.css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = import_react4.css`
+    ${bp.lg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${lgPx * 2}px);
+      max-width: 1280px;
+    `)}
+  `;
+  return {
+    smPx,
+    minSmMaxLgPx,
+    lgPx,
+    smCSS,
+    minSmMaxLgCSS,
+    lgCSS,
+    css: import_react4.css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
 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;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = import_react4.css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = import_react4.css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
 var standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),
@@ -1355,9 +1342,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");