@lightsparkdev/ui 1.1.0 → 1.1.1

package/dist/{chunk-LTV6DUFE.cjs → chunk-K52UQVCM.cjs}

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkK33DLKPBcjs = require('./chunk-K33DLKPB.cjs');
+var _chunk2YBZV2K6cjs = require('./chunk-2YBZV2K6.cjs');
 
 
-var _chunk6Z6ZBZEJcjs = require('./chunk-6Z6ZBZEJ.cjs');
+var _chunk4N5EXQIScjs = require('./chunk-4N5EXQIS.cjs');
 
 
-var _chunkI4L4UO26cjs = require('./chunk-I4L4UO26.cjs');
+var _chunk7VSNXYK4cjs = require('./chunk-7VSNXYK4.cjs');
 
 
-var _chunkHGCI5IAMcjs = require('./chunk-HGCI5IAM.cjs');
+var _chunkXUEKQQJVcjs = require('./chunk-XUEKQQJV.cjs');
 
 // src/components/IconWithCircleBackground.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -22,10 +22,14 @@ function IconWithCircleBackground({
   darkBg = false,
   shouldRotate = false,
   noBg = false,
-  disabled = false
+  disabled = false,
+  bgColor,
+  iconColor,
+  iconStrokeWidth,
+  opaque = false
 }) {
   const content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkK33DLKPBcjs.Flex,
+    _chunk2YBZV2K6cjs.Flex,
     {
       center: true,
       onClick,
@@ -39,22 +43,27 @@ function IconWithCircleBackground({
           darkBg,
           shouldRotate,
           noBg,
+          bgColor,
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunk6Z6ZBZEJcjs.Icon,
+            _chunk4N5EXQIScjs.Icon,
             {
               name: iconName,
               width: iconWidth,
-              color: darkBg ? "white" : "grayBlue9"
+              color: iconColor ? iconColor : darkBg ? "white" : "grayBlue9",
+              iconProps: {
+                strokeWidth: iconStrokeWidth,
+                fill: opaque ? "currentColor" : "none"
+              }
             }
           )
         }
       )
     }
   );
-  return to ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { cursor: disabled ? "not-allowed" : void 0 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkI4L4UO26cjs.Link, { to, disabled, children: content }) }) : content;
+  return to ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { cursor: disabled ? "not-allowed" : void 0 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7VSNXYK4cjs.Link, { to, disabled, children: content }) }) : content;
 }
 var StyledIconWithCircleBackground = _styled2.default.div`
-  background: ${({ theme, darkBg, noBg }) => darkBg ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)` : noBg ? "transparent" : _chunkHGCI5IAMcjs.getColor.call(void 0, theme, "grayBlue94")};
+  background: ${({ theme, darkBg, noBg, bgColor }) => darkBg ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)` : noBg ? "transparent" : bgColor ? _chunkXUEKQQJVcjs.getColor.call(void 0, theme, bgColor) : _chunkXUEKQQJVcjs.getColor.call(void 0, theme, "grayBlue94")};
   border-radius: 50%;
   padding: ${({ size }) => getPadding(size)}px;
   display: flex;
@@ -78,6 +87,12 @@ function getPadding(size) {
   if (size === 40) {
     return 20;
   }
+  if (size === 36) {
+    return 14;
+  }
+  if (size === 20) {
+    return 10;
+  }
   return 16;
 }
 

package/dist/{chunk-QYVQII3I.cjs → chunk-K7HWTEGP.cjs}

@@ -23,6 +23,7 @@ var neutral = {
   gray91: "#171717",
   gray95: "#F2F2F2",
   gray98: "#F9F9F9",
+  gray99: "#EDEEF1",
   white: "#FFFFFF"
 };
 var darkGradient = "#1d1d1d linear-gradient(180deg, #090909 63.08%, #1d1d1d 100.52%)";
@@ -34,10 +35,12 @@ var baseColors = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.
   green33: "#179257",
   green35: "#19981E",
   // blue
+  blue10: "#E4EFFB",
   blue43: "#145BC6",
   blue22: "#0E2E60",
   blue39: "#0068C9",
   blue37: "#21529c",
+  blue50: "#2483D1",
   blue58: "#28BFFF",
   // less than 50% saturated blue
   grayBlue5: "#0c0d0f",
@@ -68,6 +71,8 @@ var baseColors = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.
   red42a10: "#D800271A",
   red42a20: "#D800272D",
   red42a30: "#D800273F",
+  errorText: "#E41C1B",
+  errorBackground: "#FEE2E1",
   // yellow
   primary,
   warning: primary,
@@ -78,6 +83,10 @@ var baseColors = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.
   // neutral
   secondary: neutral.black,
   gray: "#242526",
+  gray2: "#6D7685",
+  gray3: "#D9DBDF",
+  gray4: "#B6BAC3",
+  gray6: "#8E95A2",
   // transparent
   transparent: "transparent",
   transparenta02: "#00000005",

package/dist/{chunk-C3ZJV5MQ.js → chunk-K7OIWNQA.js}

@@ -1,6 +1,6 @@
 import {
   LabelModerate
-} from "./chunk-3LCR3KCY.js";
+} from "./chunk-QX2R5WFV.js";
 import {
   Spacing
 } from "./chunk-E5DUKMCU.js";

package/dist/{chunk-XMTRQXAR.js → chunk-KDCMTDLB.js}

@@ -1,7 +1,7 @@
 import {
   firstChild,
   pxToRems
-} from "./chunk-RKAVKJX6.js";
+} from "./chunk-KKGZ47R3.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-SFL5D7JR.js → chunk-KGBK65DQ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-5KSG5D3I.js";
 import {
   TextInput
-} from "./chunk-JU2FTCTN.js";
+} from "./chunk-JBKOX4EH.js";
 import {
   __spreadProps,
   __spreadValues
@@ -38,7 +38,8 @@ function PhoneInput({
   onBlur: onBlurProp,
   error: errorProp,
   pxPerChar = 6,
-  defaultCountryCode = "US"
+  defaultCountryCode = "US",
+  borderRadius = 8
 }) {
   const [countryCode, setCountryCode] = useState(defaultCountryCode);
   const [value, setValue] = useState("");
@@ -90,7 +91,8 @@ function PhoneInput({
         options,
         value: countryCode,
         onChange: onChangeSelect,
-        width
+        width,
+        height: 54
       },
       pattern: "[0-9,]*",
       inputMode: "numeric",
@@ -103,7 +105,10 @@ function PhoneInput({
       },
       onChange,
       error: errorProp || error,
-      typography
+      typography,
+      borderRadius,
+      borderWidth: 0.5,
+      paddingY: 13.5
     }
   );
 }

package/dist/{chunk-RKAVKJX6.js → chunk-KKGZ47R3.js}

@@ -1,6 +1,6 @@
 import {
   rootFontSizePx
-} from "./chunk-E46IHC27.js";
+} from "./chunk-ANZUTQRP.js";
 
 // src/styles/utils.tsx
 import { css } from "@emotion/react";

package/dist/{chunk-EDKM2DNV.js → chunk-KL323MQ2.js}

@@ -1,10 +1,10 @@
 import {
   toReactNodes
-} from "./chunk-AHC2USPG.js";
+} from "./chunk-BDL3A6DZ.js";
 import {
   StyledOverline,
   getPropDefaults
-} from "./chunk-RDWZJCFB.js";
+} from "./chunk-4C6DRJZF.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-FIGALTBG.js → chunk-L3TCL4GZ.js}

@@ -1,74 +1,74 @@
 import {
   Headline
-} from "./chunk-I7TLWWPN.js";
+} from "./chunk-L4EXAPGP.js";
 import {
   StyledSelect
-} from "./chunk-Y4T7OW76.js";
+} from "./chunk-YVINHMMA.js";
 import {
   TextInputHalfRow
-} from "./chunk-JU2FTCTN.js";
+} from "./chunk-JBKOX4EH.js";
 import {
   ToggleContainer
-} from "./chunk-FXDEUNPF.js";
+} from "./chunk-ALFU7MBM.js";
 import {
   StyledFileInput
-} from "./chunk-K2JYBOWY.js";
+} from "./chunk-RQXKAXPR.js";
 import {
   formButtonTopMarginStyle,
   inputSpacingPx
-} from "./chunk-KU4X4VPI.js";
+} from "./chunk-UH2H3Y7Y.js";
 import {
   StyledButtonRowButton
-} from "./chunk-32TB2XVD.js";
+} from "./chunk-3N2BVLZJ.js";
+import {
+  ButtonSelector
+} from "./chunk-2OE2VPDJ.js";
+import {
+  LoadingWrapper
+} from "./chunk-WW3KFUFD.js";
 import {
   Checkbox
-} from "./chunk-C2LNBFQJ.js";
+} from "./chunk-RKYLP4HY.js";
 import {
   Spacing
 } from "./chunk-E5DUKMCU.js";
 import {
   toReactNodesWithTypographyMap
-} from "./chunk-2WPDZCWM.js";
+} from "./chunk-5A7SOR5D.js";
 import {
   toReactNodes
-} from "./chunk-AHC2USPG.js";
+} from "./chunk-BDL3A6DZ.js";
 import {
   icon
 } from "./chunk-FZUV52PP.js";
 import {
   ClipboardTextField
-} from "./chunk-NXZY7WP4.js";
+} from "./chunk-UQ3PKWPK.js";
 import {
   pxToRems
-} from "./chunk-RKAVKJX6.js";
-import {
-  ButtonSelector
-} from "./chunk-U6EBWLCK.js";
-import {
-  LoadingWrapper
-} from "./chunk-MYRSWJPJ.js";
+} from "./chunk-KKGZ47R3.js";
 import {
   mcBold,
   standardBorderRadius,
   standardCardShadow,
   standardCardShadowHard,
   standardContentInset
-} from "./chunk-E46IHC27.js";
+} from "./chunk-ANZUTQRP.js";
 import {
   Link
-} from "./chunk-5HDXWO2E.js";
+} from "./chunk-PTJ7AVLT.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   getColor
-} from "./chunk-AM7EMJXN.js";
+} from "./chunk-33OPRYWV.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
 import {
   colors
-} from "./chunk-YJIIP7IY.js";
+} from "./chunk-WAGTMEWB.js";
 import {
   __spreadProps,
   __spreadValues
@@ -80,7 +80,18 @@ import styled from "@emotion/styled";
 import { useCallback } from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 function resolveProps(args, theme) {
-  const paddingY = resolveCardFormProp(void 0, args.kind, "paddingY", theme);
+  const paddingTop = resolveCardFormProp(
+    args.paddingTop,
+    args.kind,
+    "paddingTop",
+    theme
+  );
+  const paddingBottom = resolveCardFormProp(
+    args.paddingBottom,
+    args.kind,
+    "paddingBottom",
+    theme
+  );
   const paddingX = resolveCardFormProp(void 0, args.kind, "paddingX", theme);
   const textAlign = resolveCardFormProp(
     args.textAlign,
@@ -132,7 +143,8 @@ function resolveProps(args, theme) {
     theme
   );
   const props = {
-    paddingY,
+    paddingTop,
+    paddingBottom,
     paddingX,
     shadow,
     borderRadius,
@@ -151,7 +163,9 @@ function CardForm({
   disabled,
   topContent = null,
   title,
+  titleSize = "Large",
   description,
+  full = false,
   onSubmit,
   titleRightIcon,
   /* In some cases eg third party libs we can't avoid the need for child forms, so the
@@ -161,12 +175,17 @@ function CardForm({
   kind = "primary",
   shadow: shadowProp,
   textAlign: textAlignProp,
+  paddingTop: paddingTopProp,
+  paddingBottom: paddingBottomProp,
   belowFormContent,
-  belowFormContentGap = 0
+  belowFormContentGap = 0,
+  forceMarginAfterSubtitle = true,
+  afterTitleMargin = 40
 }) {
   const theme = useTheme();
   const {
-    paddingY,
+    paddingTop,
+    paddingBottom,
     paddingX,
     shadow,
     borderRadius,
@@ -178,7 +197,13 @@ function CardForm({
     smBorderWidth,
     defaultDescriptionTypographyMap
   } = resolveProps(
-    { kind, textAlign: textAlignProp, shadow: shadowProp },
+    {
+      kind,
+      textAlign: textAlignProp,
+      shadow: shadowProp,
+      paddingTop: paddingTopProp,
+      paddingBottom: paddingBottomProp
+    },
     theme
   );
   const onSubmitForm = useCallback(
@@ -195,21 +220,31 @@ function CardForm({
   );
   const formattedDescription = description ? toReactNodesWithTypographyMap(
     description,
-    defaultDescriptionTypographyMap
+    defaultDescriptionTypographyMap,
+    false
   ) : null;
   const belowFormContentNodes = belowFormContent ? toReactNodes(belowFormContent) : null;
-  const content = /* @__PURE__ */ jsxs(CardFormContent, { children: [
+  const CardFormContentTarget = full ? CardFormContentFull : CardFormContent;
+  const content = /* @__PURE__ */ jsxs(CardFormContentTarget, { children: [
     topContent,
-    title && /* @__PURE__ */ jsx(CardHeadline, { hasTopContent: Boolean(topContent), children: /* @__PURE__ */ jsx(
-      Headline,
+    title && /* @__PURE__ */ jsx(
+      CardHeadline,
       {
-        content: [
-          title,
-          ...titleRightIcon ? [icon({ name: titleRightIcon.name, ml: 4 })] : []
-        ],
-        display: "inline-flex"
+        hasTopContent: Boolean(topContent),
+        afterTitleMargin,
+        children: /* @__PURE__ */ jsx(
+          Headline,
+          {
+            content: [
+              title,
+              ...titleRightIcon ? [icon({ name: titleRightIcon.name, ml: 4 })] : []
+            ],
+            display: "inline-flex",
+            size: titleSize
+          }
+        )
       }
-    ) }),
+    ),
     formattedDescription && /* @__PURE__ */ jsx(CardFormSubtitle, { children: formattedDescription }),
     children
   ] });
@@ -221,13 +256,25 @@ function CardForm({
     borderColor,
     textAlign,
     paddingX,
-    paddingY,
+    paddingTop,
+    paddingBottom,
     backgroundColor,
     smBackgroundColor,
-    smBorderWidth
+    smBorderWidth,
+    forceMarginAfterSubtitle
   };
-  return /* @__PURE__ */ jsxs(CardFormContainer, { children: [
-    hasChildForm ? /* @__PURE__ */ jsx(StyledCardFormDiv, __spreadProps(__spreadValues({}, commonProps), { children: content })) : /* @__PURE__ */ jsx(StyledCardForm, __spreadProps(__spreadValues({ onSubmit: onSubmitForm, noValidate: true }, commonProps), { children: content })),
+  const Container = full ? CardFormContentFull : CardFormContainer;
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    hasChildForm ? /* @__PURE__ */ jsx(StyledCardFormDiv, __spreadProps(__spreadValues({}, commonProps), { children: content })) : /* @__PURE__ */ jsx(
+      StyledCardForm,
+      __spreadProps(__spreadValues({
+        onSubmit: onSubmitForm,
+        noValidate: true
+      }, commonProps), {
+        forceMarginAfterSubtitle,
+        children: content
+      })
+    ),
     /* @__PURE__ */ jsx(BelowCardFormContent, { gap: belowFormContentGap, children: belowFormContentNodes })
   ] });
 }
@@ -240,6 +287,12 @@ var CardFormContent = styled.div`
   flex-direction: column;
   align-self: center;
 `;
+var CardFormContentFull = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  height: 100%;
+`;
 var BelowCardFormContent = styled.div`
   text-align: center;
   display: flex;
@@ -249,7 +302,9 @@ var BelowCardFormContent = styled.div`
   margin-top: ${Spacing.px.xl};
   margin-bottom: ${Spacing.px.xl};
 `;
-var CardFormSubtitle = styled.div``;
+var CardFormSubtitle = styled.div`
+  padding: 0 ${Spacing.px.xs};
+`;
 var CardFormButtonRow = styled.div`
   display: flex;
   justify-content: ${({ justify }) => (
@@ -300,17 +355,22 @@ var StyledCardFormCheckboxParagraph = styled.div`
   display: flex;
   color: ${({ theme }) => theme.mcNeutral};
 `;
-var formInset = ({ wide, paddingX, paddingY }) => css`
+var formInset = ({
+  wide,
+  paddingX,
+  paddingTop,
+  paddingBottom
+}) => css`
   margin-left: auto;
   margin-right: auto;
   max-width: 100%;
   padding-right: ${paddingX}px;
   padding-left: ${paddingX}px;
-  padding-top: ${paddingY}px;
-  padding-bottom: ${paddingY}px;
+  padding-top: ${paddingTop}px;
+  padding-bottom: ${paddingBottom}px;
 
   ${bp.minSm(`
-    width: ${wide ? 700 : 505}px;
+    width: ${wide ? 700 : 408}px;
   `)}
 
   ${bp.sm(`
@@ -333,7 +393,7 @@ var formInset = ({ wide, paddingX, paddingY }) => css`
 
   & ${CardFormFullTopContent} {
     ${bp.minSm(`
-      margin-top: -${paddingY}px;
+      margin-top: -${paddingTop}px;
     `)}
   }
 `;
@@ -346,13 +406,15 @@ var StyledCardFormStyle = ({
   borderColor,
   textAlign,
   paddingX,
-  paddingY,
+  paddingTop,
+  paddingBottom,
   backgroundColor,
   smBackgroundColor,
-  smBorderWidth
+  smBorderWidth,
+  forceMarginAfterSubtitle = true
 }) => {
   return css`
-    ${formInset({ wide, paddingX, paddingY })}
+    ${formInset({ wide, paddingX, paddingTop, paddingBottom })}
     ${shadow === "soft" ? standardCardShadow : shadow === "hard" ? standardCardShadowHard : ""}
 
     position: relative;
@@ -376,9 +438,9 @@ var StyledCardFormStyle = ({
       text-align: ${textAlign};
     }
 
-    ${CardFormSubtitle} + * {
+    ${forceMarginAfterSubtitle ? `${CardFormSubtitle.toString()} + * {
       margin-top: 40px !important;
-    }
+    }` : ""}
 
     ${CardFormButtonRow}, ${StyledButtonRowButton} {
       ${ButtonSelector()} {
@@ -431,10 +493,12 @@ var StyledCardFormStyle = ({
 var StyledCardForm = styled.form(StyledCardFormStyle);
 var StyledCardFormDiv = styled.div(StyledCardFormStyle);
 var CardHeadline = styled.div`
-  ${({ hasTopContent }) => hasTopContent ? "margin-top: 32px;" : ""}
+  padding: 0 ${Spacing.px.xs};
+
+  ${({ hasTopContent }) => hasTopContent ? "margin-top: 24px;" : ""}
 
-  & + *:not(${CardFormSubtitle}) {
-    margin-top: 40px;
+  & + *:not(${CardFormSubtitle.toString()}) {
+    margin-top: ${({ afterTitleMargin }) => afterTitleMargin}px;
   }
 
   & + ${CardFormSubtitle} {

package/dist/{chunk-6ENQZUFQ.cjs → chunk-L4AQQPYC.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkVGMBQUOTcjs = require('./chunk-VGMBQUOT.cjs');
+var _chunkOZUQD57Vcjs = require('./chunk-OZUQD57V.cjs');
 
 
-var _chunkFPQ2OUYXcjs = require('./chunk-FPQ2OUYX.cjs');
+var _chunkU35SY546cjs = require('./chunk-U35SY546.cjs');
 
 // src/components/SecretContainer.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -22,12 +22,12 @@ function SecretContainer(props) {
         children: props.secret
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVGMBQUOTcjs.CopyToClipboardButton, { value: props.secret, isSm: true, ml: 4 })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOZUQD57Vcjs.CopyToClipboardButton, { value: props.secret, isSm: true, ml: 4 })
   ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledSecretContainer, { hasSecret: false, children: "There are no tokens associated with this account" });
 }
 var StyledSecretContainer = _styled2.default.div`
   background-color: ${({ theme, hasSecret, success }) => hasSecret ? success ? theme.success : theme.c05Neutral : theme.bg};
-  ${_chunkFPQ2OUYXcjs.standardBorderRadius.call(void 0, 8)}
+  ${_chunkU35SY546cjs.standardBorderRadius.call(void 0, 8)}
   padding: 18px 20px;
   color: ${({ theme, success }) => success ? theme.hcNeutral : theme.text};
   border: solid 1px

package/dist/{chunk-I7TLWWPN.js → chunk-L4EXAPGP.js}

@@ -1,10 +1,10 @@
 import {
   toReactNodes
-} from "./chunk-AHC2USPG.js";
+} from "./chunk-BDL3A6DZ.js";
 import {
   StyledHeadline,
   getPropDefaults
-} from "./chunk-42SXP7BM.js";
+} from "./chunk-CE3IOBBS.js";
 import {
   __spreadProps,
   __spreadValues