@lightsparkdev/ui 1.1.1 → 1.1.3

package/dist/{chunk-L3TCL4GZ.js → chunk-5YPZRUZG.js}

@@ -1,74 +1,77 @@
 import {
   Headline
-} from "./chunk-L4EXAPGP.js";
+} from "./chunk-TKLFSNHO.js";
 import {
   StyledSelect
-} from "./chunk-YVINHMMA.js";
+} from "./chunk-6GPS5UZL.js";
 import {
   TextInputHalfRow
-} from "./chunk-JBKOX4EH.js";
+} from "./chunk-GNNSP254.js";
 import {
   ToggleContainer
-} from "./chunk-ALFU7MBM.js";
+} from "./chunk-A5TI24JJ.js";
 import {
   StyledFileInput
-} from "./chunk-RQXKAXPR.js";
+} from "./chunk-I5TCLIUL.js";
 import {
   formButtonTopMarginStyle,
   inputSpacingPx
-} from "./chunk-UH2H3Y7Y.js";
+} from "./chunk-AO3ZBQ6T.js";
 import {
-  StyledButtonRowButton
-} from "./chunk-3N2BVLZJ.js";
-import {
-  ButtonSelector
-} from "./chunk-2OE2VPDJ.js";
-import {
-  LoadingWrapper
-} from "./chunk-WW3KFUFD.js";
+  Flex
+} from "./chunk-NPKEAEDV.js";
 import {
   Checkbox
-} from "./chunk-RKYLP4HY.js";
-import {
-  Spacing
-} from "./chunk-E5DUKMCU.js";
+} from "./chunk-D3WSMM2N.js";
 import {
   toReactNodesWithTypographyMap
-} from "./chunk-5A7SOR5D.js";
+} from "./chunk-H7KIUDPL.js";
 import {
   toReactNodes
-} from "./chunk-BDL3A6DZ.js";
+} from "./chunk-H37TWCVW.js";
 import {
   icon
 } from "./chunk-FZUV52PP.js";
 import {
   ClipboardTextField
-} from "./chunk-UQ3PKWPK.js";
+} from "./chunk-A6APLSNG.js";
+import {
+  StyledButtonRowButton
+} from "./chunk-PGMKAWUJ.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 import {
   pxToRems
-} from "./chunk-KKGZ47R3.js";
+} from "./chunk-MGHQ74CH.js";
+import {
+  ButtonSelector
+} from "./chunk-KWNSXCDT.js";
+import {
+  LoadingWrapper
+} from "./chunk-HGYZXUCB.js";
 import {
   mcBold,
   standardBorderRadius,
   standardCardShadow,
   standardCardShadowHard,
   standardContentInset
-} from "./chunk-ANZUTQRP.js";
+} from "./chunk-VAPNTHG5.js";
 import {
   Link
-} from "./chunk-PTJ7AVLT.js";
+} from "./chunk-BMCY2VFD.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   getColor
-} from "./chunk-33OPRYWV.js";
+} from "./chunk-GZILHEOA.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
 import {
   colors
-} from "./chunk-WAGTMEWB.js";
+} from "./chunk-EA22C7OJ.js";
 import {
   __spreadProps,
   __spreadValues
@@ -77,7 +80,7 @@ import {
 // src/components/CardForm/CardForm.tsx
 import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
-import { useCallback } from "react";
+import { Fragment, useCallback } from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 function resolveProps(args, theme) {
   const paddingTop = resolveCardFormProp(
@@ -92,7 +95,12 @@ function resolveProps(args, theme) {
     "paddingBottom",
     theme
   );
-  const paddingX = resolveCardFormProp(void 0, args.kind, "paddingX", theme);
+  const paddingX = resolveCardFormProp(
+    args.paddingX,
+    args.kind,
+    "paddingX",
+    theme
+  );
   const textAlign = resolveCardFormProp(
     args.textAlign,
     args.kind,
@@ -162,8 +170,10 @@ function CardForm({
   children,
   disabled,
   topContent = null,
+  aboveHeaderContent,
   title,
   titleSize = "Large",
+  titleMarginLeft,
   description,
   full = false,
   onSubmit,
@@ -177,10 +187,17 @@ function CardForm({
   textAlign: textAlignProp,
   paddingTop: paddingTopProp,
   paddingBottom: paddingBottomProp,
+  paddingX: paddingXProp,
   belowFormContent,
   belowFormContentGap = 0,
   forceMarginAfterSubtitle = true,
-  afterTitleMargin = 40
+  afterTitleMargin = 40,
+  graphicHeader,
+  centeredContent = false,
+  contentMarginTop,
+  formButtonTopMargin,
+  selectMarginTop,
+  smDontAdjustWidth = false
 }) {
   const theme = useTheme();
   const {
@@ -202,7 +219,8 @@ function CardForm({
       textAlign: textAlignProp,
       shadow: shadowProp,
       paddingTop: paddingTopProp,
-      paddingBottom: paddingBottomProp
+      paddingBottom: paddingBottomProp,
+      paddingX: paddingXProp
     },
     theme
   );
@@ -225,13 +243,15 @@ function CardForm({
   ) : null;
   const belowFormContentNodes = belowFormContent ? toReactNodes(belowFormContent) : null;
   const CardFormContentTarget = full ? CardFormContentFull : CardFormContent;
-  const content = /* @__PURE__ */ jsxs(CardFormContentTarget, { children: [
-    topContent,
-    title && /* @__PURE__ */ jsx(
+  const headerData = [
+    aboveHeaderContent ? /* @__PURE__ */ jsx(Fragment, { children: aboveHeaderContent }, "card-form-above-header") : null,
+    title ? /* @__PURE__ */ jsx(
       CardHeadline,
       {
         hasTopContent: Boolean(topContent),
         afterTitleMargin,
+        contentMarginTop,
+        titleMarginLeft,
         children: /* @__PURE__ */ jsx(
           Headline,
           {
@@ -243,9 +263,14 @@ function CardForm({
             size: titleSize
           }
         )
-      }
-    ),
-    formattedDescription && /* @__PURE__ */ jsx(CardFormSubtitle, { children: formattedDescription }),
+      },
+      "card-form-title"
+    ) : null,
+    formattedDescription ? /* @__PURE__ */ jsx(CardFormSubtitle, { children: formattedDescription }, "card-form-subtitle") : null
+  ];
+  const content = /* @__PURE__ */ jsxs(CardFormContentTarget, { children: [
+    topContent,
+    centeredContent ? /* @__PURE__ */ jsx(CenteredHeader, { children: headerData }) : headerData,
     children
   ] });
   const commonProps = {
@@ -261,23 +286,37 @@ function CardForm({
     backgroundColor,
     smBackgroundColor,
     smBorderWidth,
-    forceMarginAfterSubtitle
+    forceMarginAfterSubtitle,
+    smDontAdjustWidth
   };
   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 })
+  return /* @__PURE__ */ jsxs(Container, { paddingBottom, children: [
+    hasChildForm ? /* @__PURE__ */ jsx(StyledCardFormDiv, __spreadProps(__spreadValues({}, commonProps), { children: content })) : /* @__PURE__ */ jsxs(Flex, { column: true, align: "center", height: full ? "100%" : "auto", children: [
+      graphicHeader && graphicHeader,
+      /* @__PURE__ */ jsx(
+        StyledCardForm,
+        __spreadProps(__spreadValues({
+          onSubmit: onSubmitForm,
+          noValidate: true
+        }, commonProps), {
+          forceMarginAfterSubtitle,
+          graphicHeader: graphicHeader ? true : false,
+          formButtonTopMargin,
+          selectMarginTop,
+          children: content
+        })
+      )
+    ] }),
+    belowFormContentNodes && /* @__PURE__ */ jsx(BelowCardFormContent, { gap: belowFormContentGap, children: belowFormContentNodes })
   ] });
 }
+var CenteredHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+  justify-content: center;
+`;
 var CardFormContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -292,6 +331,7 @@ var CardFormContentFull = styled.div`
   flex-direction: column;
   align-self: center;
   height: 100%;
+  padding-bottom: ${({ paddingBottom }) => paddingBottom != null ? paddingBottom : 0}px;
 `;
 var BelowCardFormContent = styled.div`
   text-align: center;
@@ -346,9 +386,9 @@ var StyledCardFormDataFieldValue = styled.div`
 `;
 var CardFormFullWidth = styled.div``;
 var CardFormFullTopContent = styled.div`
-  ${bp.minSm(`
-    border-radius: 16px 16px 0 0;
+  ${({ borderRadius = "16px 16px 0 0" }) => bp.minSm(`
     overflow: hidden;
+    border-radius: ${borderRadius};
   `)}
 `;
 var StyledCardFormCheckboxParagraph = styled.div`
@@ -359,7 +399,9 @@ var formInset = ({
   wide,
   paddingX,
   paddingTop,
-  paddingBottom
+  paddingBottom,
+  smDontAdjustWidth,
+  graphicHeader
 }) => css`
   margin-left: auto;
   margin-right: auto;
@@ -374,18 +416,18 @@ var formInset = ({
   `)}
 
   ${bp.sm(`
-    padding: 0;
+    padding: ${graphicHeader ? "24px" : "0"};
   `)}
 
-  ${standardContentInset.smCSS}
+  ${graphicHeader || smDontAdjustWidth ? `width: 100%;` : standardContentInset.smCSS}
 
   & ${CardFormFullWidth}, & ${CardFormFullTopContent} {
-    ${bp.sm(`
+    ${smDontAdjustWidth ? "" : bp.sm(`
       width: calc(100% + ${standardContentInset.smPx * 2}px);
       margin-left: -${standardContentInset.smPx}px;
     `)}
 
-    ${bp.minSm(`
+    ${smDontAdjustWidth ? "" : bp.minSm(`
       width: calc(100% + ${paddingX * 2}px);
       margin-left: -${paddingX}px;
     `)}
@@ -411,10 +453,28 @@ var StyledCardFormStyle = ({
   backgroundColor,
   smBackgroundColor,
   smBorderWidth,
-  forceMarginAfterSubtitle = true
+  forceMarginAfterSubtitle = true,
+  graphicHeader,
+  formButtonTopMargin = 32,
+  selectMarginTop = inputSpacingPx,
+  smDontAdjustWidth = false
 }) => {
   return css`
-    ${formInset({ wide, paddingX, paddingTop, paddingBottom })}
+    ${graphicHeader ? formInset({
+    wide,
+    paddingX,
+    paddingTop,
+    paddingBottom,
+    graphicHeader,
+    smDontAdjustWidth
+  }) : formInset({
+    wide,
+    paddingX,
+    paddingTop,
+    paddingBottom,
+    smDontAdjustWidth
+  })}
+
     ${shadow === "soft" ? standardCardShadow : shadow === "hard" ? standardCardShadowHard : ""}
 
     position: relative;
@@ -431,7 +491,7 @@ var StyledCardFormStyle = ({
     `)}
 
     ${bp.minSm(`
-      border-radius: ${borderRadius}px;
+      border-radius: ${graphicHeader ? `0 0 ${borderRadius}px ${borderRadius}px` : `${borderRadius}px`};
     `)}
 
     ${CardHeadline}, ${CardFormSubtitle} {
@@ -449,7 +509,7 @@ var StyledCardFormStyle = ({
     }
 
     ${StyledSelect}, ${ToggleContainer} {
-      margin-top: ${inputSpacingPx}px;
+      margin-top: ${selectMarginTop}px;
     }
 
     ${CardFormFieldLabel} {
@@ -485,7 +545,7 @@ var StyledCardFormStyle = ({
       }
 
       & > ${ButtonSelector()}, & > ${select(CardFormNearButtonColumn)} {
-        ${formButtonTopMarginStyle}
+        ${formButtonTopMargin !== void 0 ? `margin-top: ${formButtonTopMargin}px;` : formButtonTopMarginStyle}
       }
     }
   `;
@@ -495,7 +555,7 @@ var StyledCardFormDiv = styled.div(StyledCardFormStyle);
 var CardHeadline = styled.div`
   padding: 0 ${Spacing.px.xs};
 
-  ${({ hasTopContent }) => hasTopContent ? "margin-top: 24px;" : ""}
+  ${({ hasTopContent, contentMarginTop }) => hasTopContent || contentMarginTop !== void 0 ? `margin-top: ${contentMarginTop != null ? contentMarginTop : 32}px;` : ""}
 
   & + *:not(${CardFormSubtitle.toString()}) {
     margin-top: ${({ afterTitleMargin }) => afterTitleMargin}px;
@@ -504,6 +564,8 @@ var CardHeadline = styled.div`
   & + ${CardFormSubtitle} {
     margin-top: 12px;
   }
+
+  ${({ titleMarginLeft }) => titleMarginLeft !== void 0 && `margin-left: ${titleMarginLeft}px;`}
 `;
 function CardFormTextWithLink({
   text,
@@ -559,7 +621,7 @@ function resolveCardFormProp(prop, kind, defaultKey, theme) {
   return (
     /** props may be unset for a given kind but theme defaults always exist,
      * so this will always resolve a value: */
-    prop || ((_a = theme.cardForm.kinds[kind]) == null ? void 0 : _a[defaultKey]) || theme.cardForm[defaultKey]
+    prop !== void 0 ? prop : ((_a = theme.cardForm.kinds[kind]) == null ? void 0 : _a[defaultKey]) || theme.cardForm[defaultKey]
   );
 }
 

package/dist/{chunk-L4AQQPYC.cjs → chunk-5ZX74AVI.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkOZUQD57Vcjs = require('./chunk-OZUQD57V.cjs');
+var _chunkKNFL6XU7cjs = require('./chunk-KNFL6XU7.cjs');
 
 
-var _chunkU35SY546cjs = require('./chunk-U35SY546.cjs');
+var _chunk545K27C4cjs = require('./chunk-545K27C4.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, _chunkOZUQD57Vcjs.CopyToClipboardButton, { value: props.secret, isSm: true, ml: 4 })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKNFL6XU7cjs.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};
-  ${_chunkU35SY546cjs.standardBorderRadius.call(void 0, 8)}
+  ${_chunk545K27C4cjs.standardBorderRadius.call(void 0, 8)}
   padding: 18px 20px;
   color: ${({ theme, success }) => success ? theme.hcNeutral : theme.text};
   border: solid 1px

package/dist/{chunk-B77E362T.js → chunk-62TOCCLA.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-2NT4RAQ3.js";
 import {
   StyledHeadline
-} from "./chunk-CE3IOBBS.js";
+} from "./chunk-46IQK5NT.js";
 
 // src/components/documentation/DocsHeadline.tsx
 import React from "react";

package/dist/{chunk-GSU6TJQP.js → chunk-64JBRFQ4.js}

@@ -1,17 +1,17 @@
 import {
   Heading
-} from "./chunk-KDCMTDLB.js";
+} from "./chunk-2LFZ5QQV.js";
 import {
   StyledButtonRow
-} from "./chunk-3N2BVLZJ.js";
-import {
-  z
-} from "./chunk-55OQPFLF.js";
+} from "./chunk-PGMKAWUJ.js";
 import {
   flexCenter,
   overflowAutoWithoutScrollbars,
   size
-} from "./chunk-KKGZ47R3.js";
+} from "./chunk-MGHQ74CH.js";
+import {
+  z
+} from "./chunk-55OQPFLF.js";
 import {
   cardBorderRadiusPx,
   darkGradientBg,
@@ -19,10 +19,10 @@ import {
   standardBorderRadius,
   standardCardShadow,
   standardContentInset
-} from "./chunk-ANZUTQRP.js";
+} from "./chunk-VAPNTHG5.js";
 import {
   themeOr
-} from "./chunk-33OPRYWV.js";
+} from "./chunk-GZILHEOA.js";
 import {
   bp,
   useBreakpoints