@lightsparkdev/ui 1.1.14 → 1.1.16

package/dist/{chunk-5FTEQN44.cjs → chunk-RZUZVS6Q.cjs}

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkTNHLPMQ4cjs = require('./chunk-TNHLPMQ4.cjs');
+var _chunkWNYAK3DDcjs = require('./chunk-WNYAK3DD.cjs');
 
 
-var _chunk5YSJ6BNDcjs = require('./chunk-5YSJ6BND.cjs');
+var _chunkSG2KPTGOcjs = require('./chunk-SG2KPTGO.cjs');
 
 
 var _chunkCH2PLO6Fcjs = require('./chunk-CH2PLO6F.cjs');
 
 
-var _chunkGJEYXGPQcjs = require('./chunk-GJEYXGPQ.cjs');
+var _chunkRC7657RRcjs = require('./chunk-RC7657RR.cjs');
 
 
 var _chunkJA7KZV3Qcjs = require('./chunk-JA7KZV3Q.cjs');
@@ -21,11 +21,11 @@ function SatoshiInputLabel({
   availableSats,
   showTooltip = true
 }) {
-  const availableSatsTooltipNode = showTooltip ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTNHLPMQ4cjs.Label, { style: { display: "inline-flex", margin: "0 0 0 3px" }, children: [
+  const availableSatsTooltipNode = showTooltip ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkSG2KPTGOcjs.Label, { style: { display: "inline-flex", margin: "0 0 0 3px" }, children: [
     "available",
     " ",
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk5YSJ6BNDcjs.InfoIconTooltip,
+      _chunkWNYAK3DDcjs.InfoIconTooltip,
       {
         id: "available-balance-tooltip",
         content: [
@@ -38,10 +38,10 @@ function SatoshiInputLabel({
       }
     )
   ] }) : null;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTNHLPMQ4cjs.Label, { children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkSG2KPTGOcjs.Label, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: text }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: availableSats !== void 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGJEYXGPQcjs.Icon, { name: "Satoshi", width: 8, mr: 4, verticalAlign: -2 }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRC7657RRcjs.Icon, { name: "Satoshi", width: 8, mr: 4, verticalAlign: -2 }),
       _chunkJA7KZV3Qcjs.addCommasToDigits.call(void 0, Math.floor(availableSats)),
       availableSatsTooltipNode
     ] }) })

package/dist/{chunk-U3WXZBAA.js → chunk-SD6A75NW.js}

@@ -1,9 +1,9 @@
 import {
   SatoshiInputLabel
-} from "./chunk-OG7YUJM5.js";
+} from "./chunk-DG3QYBTW.js";
 import {
   NumberInput_default
-} from "./chunk-UJDZHW3O.js";
+} from "./chunk-BJXTOJZZ.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-TNHLPMQ4.cjs → chunk-SG2KPTGO.cjs}

@@ -1,24 +1,24 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkEFFB4CI6cjs = require('./chunk-EFFB4CI6.cjs');
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+var _chunkJQAMMNYAcjs = require('./chunk-JQAMMNYA.cjs');
 
 
 
-var _chunk6MB6ICF6cjs = require('./chunk-6MB6ICF6.cjs');
+var _chunkBXREC2NYcjs = require('./chunk-BXREC2NY.cjs');
 
 
-var _chunkK66UCMBUcjs = require('./chunk-K66UCMBU.cjs');
+var _chunkG6GE2K3Lcjs = require('./chunk-G6GE2K3L.cjs');
 
 
 
 
-var _chunkQGVDN6ZVcjs = require('./chunk-QGVDN6ZV.cjs');
+var _chunkEINUB4JIcjs = require('./chunk-EINUB4JI.cjs');
 
 
-var _chunkJFPLNGMQcjs = require('./chunk-JFPLNGMQ.cjs');
+var _chunkWRQU4F3Ncjs = require('./chunk-WRQU4F3N.cjs');
 
 // src/styles/fields.tsx
 var _react = require('@emotion/react');
@@ -33,16 +33,16 @@ var formButtonTopMarginStyle = _react.css`
   margin-top: ${formButtonTopMargin};
 `;
 var standardBorderColor = ({ theme }) => _react.css`
-  border-color: ${_chunkQGVDN6ZVcjs.themeOr.call(void 0, theme.c1Neutral, theme.mcNeutral)({ theme })};
+  border-color: ${_chunkEINUB4JIcjs.themeOr.call(void 0, theme.c1Neutral, theme.mcNeutral)({ theme })};
 `;
 var inputBlockStyle = ({
   theme,
   hasValue,
   hasError
 }) => _react.css`
-  ${_chunk6MB6ICF6cjs.subtext.call(void 0, { theme })}
+  ${_chunkBXREC2NYcjs.subtext.call(void 0, { theme })}
   ${standardBorderColor({ theme })}
-  ${_chunk6MB6ICF6cjs.standardBorderRadius.call(void 0, 8)}
+  ${_chunkBXREC2NYcjs.standardBorderRadius.call(void 0, 8)}
   background-color: ${theme.bg};
   border-width: 2px;
   display: flex;
@@ -58,8 +58,8 @@ var textInputPlaceholderColor = ({ theme }) => theme.c4Neutral;
 var textInputFontWeight = 600;
 var textInputPaddingPx = 12;
 var textInputPadding = `${textInputPaddingPx}px`;
-var textInputBorderColor = ({ theme }) => _chunkQGVDN6ZVcjs.isBridge.call(void 0, theme) ? _chunkJFPLNGMQcjs.colors.gray4 : _chunkQGVDN6ZVcjs.themeOr.call(void 0, theme.c1Neutral, theme.c3Neutral)({ theme });
-var textInputBorderColorFocused = ({ theme }) => _chunkQGVDN6ZVcjs.themeOr.call(void 0, theme.hcNeutral, theme.hcNeutral)({ theme });
+var textInputBorderColor = ({ theme }) => _chunkEINUB4JIcjs.isBridge.call(void 0, theme) ? _chunkWRQU4F3Ncjs.colors.gray4 : _chunkEINUB4JIcjs.themeOr.call(void 0, theme.c1Neutral, theme.c3Neutral)({ theme });
+var textInputBorderColorFocused = ({ theme }) => _chunkEINUB4JIcjs.themeOr.call(void 0, theme.hcNeutral, theme.hcNeutral)({ theme });
 var textInputActiveStyles = ({
   theme,
   paddingLeftPx,
@@ -70,7 +70,7 @@ var textInputActiveStyles = ({
   activeOutlineColor
 }) => {
   if (activeOutline) {
-    const outlineColor = activeOutlineColor ? _chunkQGVDN6ZVcjs.getColor.call(void 0, theme, activeOutlineColor) : textInputBorderColorFocused({ theme });
+    const outlineColor = activeOutlineColor ? _chunkEINUB4JIcjs.getColor.call(void 0, theme, activeOutlineColor) : textInputBorderColorFocused({ theme });
     return _react.css`
       outline: 2px solid ${outlineColor};
       outline-offset: 2px;
@@ -144,7 +144,7 @@ var textInputStyle = ({
   line-height: 22px;
   outline: none;
 
-  ${_chunkK66UCMBUcjs.applyTypography.call(void 0, 
+  ${_chunkG6GE2K3Lcjs.applyTypography.call(void 0, 
     theme,
     (typography == null ? void 0 : typography.type) || defaultTextInputTypography.type,
     (typography == null ? void 0 : typography.size) || defaultTextInputTypography.size,
@@ -213,7 +213,8 @@ function InputSubtext({
   hasSuccess = false,
   tooltipId,
   hideNonErrorsIfBlurred = false,
-  focused = false
+  focused = false,
+  subTextPaddingX
 }) {
   const timeoutRef = _react3.useRef.call(void 0, null);
   const [subtext2, setSubtext] = _react3.useState.call(void 0, text);
@@ -240,6 +241,7 @@ function InputSubtext({
       hasSuccess,
       cursorPointer: Boolean(tooltipId),
       usingContent: content !== void 0,
+      subTextPaddingX,
       children: tooltipId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-tooltip-id": tooltipId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InputSubtextContent, { text: subtext2, content }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InputSubtextContent, { text: subtext2, content })
     }
   );
@@ -254,7 +256,7 @@ function InputSubtextContent({
   if (typeof text === "string") {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: text });
   }
-  return _chunkEFFB4CI6cjs.toReactNodes.call(void 0, text);
+  return _chunkJQAMMNYAcjs.toReactNodes.call(void 0, text);
 }
 var StyledInputSubtext = _styled2.default.div`
   margin-top: ${({ visible }) => visible ? "8px" : "0px"};
@@ -269,6 +271,10 @@ var StyledInputSubtext = _styled2.default.div`
     margin ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23);
   color: ${({ hasError, hasSuccess, theme }) => hasError ? theme.danger : hasSuccess ? theme.success : theme.text};
   cursor: ${({ cursorPointer }) => cursorPointer ? "pointer" : "auto"};
+  ${({ subTextPaddingX }) => subTextPaddingX ? `
+        padding-left: ${subTextPaddingX}px;
+        padding-right: ${subTextPaddingX}px;
+      ` : ""};
 `;
 var labelStyle = ({
   theme,
@@ -287,11 +293,11 @@ var labelStyle = ({
   }
 `;
 var Label = _styled2.default.label`
-  ${_chunk6MB6ICF6cjs.subtext}
+  ${_chunkBXREC2NYcjs.subtext}
   ${labelStyle}
 `;
 var LabelDiv = _styled2.default.div`
-  ${_chunk6MB6ICF6cjs.subtext}
+  ${_chunkBXREC2NYcjs.subtext}
   ${labelStyle}
 `;
 

package/dist/{chunk-SIJ7UCLL.js → chunk-SMZPJBL2.js}

@@ -1,6 +1,6 @@
 import {
   toReactNodes
-} from "./chunk-SX3LPZM7.js";
+} from "./chunk-W5L3SQ2I.js";
 import {
   isClipboardTextFieldNode,
   isCurrencyAmountNode,

package/dist/{chunk-HHL2I3FB.cjs → chunk-SUNEGCHH.cjs}

@@ -1,9 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkJM36M2EJcjs = require('./chunk-JM36M2EJ.cjs');
+var _chunkUW2JL7WZcjs = require('./chunk-UW2JL7WZ.cjs');
 
 
-var _chunkTNHLPMQ4cjs = require('./chunk-TNHLPMQ4.cjs');
+var _chunkSG2KPTGOcjs = require('./chunk-SG2KPTGO.cjs');
+
+
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
 
@@ -34,7 +37,8 @@ function CodeInput({
   onSubmit,
   inputCSS,
   autoFocus = true,
-  onBlur
+  onBlur,
+  variant = "default"
 }) {
   const componentId = _react.useRef.call(void 0, _nanoid.nanoid.call(void 0, 5));
   const inputRefs = _react.useRef.call(void 0, {});
@@ -241,7 +245,7 @@ function CodeInput({
     const inputId = getInputId(i);
     inputs.push(
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkJM36M2EJcjs.SingleCodeInput,
+        _chunkUW2JL7WZcjs.SingleCodeInput,
         {
           value: inputState[inputId].value,
           id: inputId,
@@ -283,13 +287,17 @@ function CodeInput({
           ariaLabel: `Code input ${i + 1} of ${codeLength}`,
           cssProp: inputCSS,
           onBlur: onBlurCb,
-          width: `${(100 / inputsPerGroup).toFixed(2)}%`,
-          max: 9
+          width: variant === "unified" ? "12px" : `${(100 / inputsPerGroup).toFixed(2)}%`,
+          max: 9,
+          variant
         },
         inputId
       )
     );
   }
+  if (variant === "unified") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnifiedCodeInputContainer, { children: inputs });
+  }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledCodeInput, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CodeInputGroup, { children: inputs.slice(0, inputsPerGroup) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CodeInputGroupSeparator, {}),
@@ -316,10 +324,26 @@ var CodeInputGroup = _styled2.default.div`
 var CodeInputGroupSeparator = _styled2.default.div`
   width: ${separatorWidth}px;
   height: 4px;
-  background-color: ${_chunkTNHLPMQ4cjs.textInputBorderColor};
+  background-color: ${_chunkSG2KPTGOcjs.textInputBorderColor};
   border-radius: 2px;
   margin: 0 ${separatorMargin}px;
 `;
+var UnifiedCodeInputContainer = _styled2.default.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: ${_chunkZUAO4DW3cjs.Spacing.px.xs};
+  padding: 12px 24px;
+  border: 0.5px solid ${({ theme }) => theme.border};
+  border-radius: 16px;
+  background-color: ${({ theme }) => theme.bg};
+  width: 100%;
+
+  &:focus-within {
+    border: 2px solid ${({ theme }) => theme.text};
+  }
+`;
 
 
 

package/dist/{chunk-YEGK6WEM.js → chunk-SYTKAZOH.js}

@@ -1,19 +1,19 @@
 import {
   iconMap
-} from "./chunk-7UFDY3MD.js";
+} from "./chunk-LWSDBXOF.js";
 import {
   invertFillColor,
   invertStrokeColor
 } from "./chunk-VI6WTKMV.js";
 import {
   rootFontSizePx
-} from "./chunk-ZG6VAH7C.js";
+} from "./chunk-RURWLQBJ.js";
 import {
   isString
 } from "./chunk-HAC5YAGQ.js";
 import {
   getFontColor
-} from "./chunk-ESRXMWU7.js";
+} from "./chunk-GBEYKWHU.js";
 
 // src/components/Icon/Icon.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-QWZTWJXX.js → chunk-SZBXBUK2.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-CWMXXUWU.js";
 
 // src/styles/themeDefaults/buttons.tsx
-var buttonBorderRadiuses = [4, 8, 32, 999, "100%"];
+var buttonBorderRadiuses = [0, 4, 8, 32, 999, "100%"];
 var allowedButtonTypographyTypes = [
   "Body",
   "Body Strong",

package/dist/{chunk-4UGJHBBJ.js → chunk-T3FASNO3.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-YW4BJCOL.js";
 import {
   applyTypography
-} from "./chunk-3IYJTEVV.js";
+} from "./chunk-GQD4IOTB.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-YFGFUHM6.cjs → chunk-T5E4NQMH.cjs}

@@ -6,7 +6,7 @@ var _chunkU6XO2EF4cjs = require('./chunk-U6XO2EF4.cjs');
 var _chunkB2MHM6CYcjs = require('./chunk-B2MHM6CY.cjs');
 
 
-var _chunkK66UCMBUcjs = require('./chunk-K66UCMBU.cjs');
+var _chunkG6GE2K3Lcjs = require('./chunk-G6GE2K3L.cjs');
 
 
 
@@ -24,7 +24,7 @@ function getPropDefaults(props) {
   return _chunkU6XO2EF4cjs.getPropDefaultsBase.call(void 0, props, { as: props.tag || "span" });
 }
 var StyledOverline = _styled2.default.span`
-  ${({ theme, size, colorProp }) => _chunkK66UCMBUcjs.applyTypography.call(void 0, theme, "Overline", size, colorProp)}
+  ${({ theme, size, colorProp }) => _chunkG6GE2K3Lcjs.applyTypography.call(void 0, theme, "Overline", size, colorProp)}
   ${_chunkB2MHM6CYcjs.typographyStyles}
 `;