@lightsparkdev/ui 1.1.0 → 1.1.2

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

@@ -1,74 +1,77 @@
 import {
   Headline
-} from "./chunk-I7TLWWPN.js";
+} from "./chunk-B7Z7ECLO.js";
 import {
   StyledSelect
-} from "./chunk-Y4T7OW76.js";
+} from "./chunk-ZHKLSHFU.js";
 import {
   TextInputHalfRow
-} from "./chunk-JU2FTCTN.js";
+} from "./chunk-DFYU5VPB.js";
 import {
   ToggleContainer
-} from "./chunk-FXDEUNPF.js";
+} from "./chunk-R2AGQ3JJ.js";
 import {
   StyledFileInput
-} from "./chunk-K2JYBOWY.js";
+} from "./chunk-DP3CK7ZD.js";
 import {
   formButtonTopMarginStyle,
   inputSpacingPx
-} from "./chunk-KU4X4VPI.js";
+} from "./chunk-TKOYRZ7J.js";
 import {
-  StyledButtonRowButton
-} from "./chunk-32TB2XVD.js";
+  Flex
+} from "./chunk-NPKEAEDV.js";
 import {
   Checkbox
-} from "./chunk-C2LNBFQJ.js";
-import {
-  Spacing
-} from "./chunk-E5DUKMCU.js";
+} from "./chunk-KMV6MVFT.js";
 import {
   toReactNodesWithTypographyMap
-} from "./chunk-2WPDZCWM.js";
+} from "./chunk-R62M65Z7.js";
 import {
   toReactNodes
-} from "./chunk-AHC2USPG.js";
+} from "./chunk-E7KQDR6U.js";
 import {
   icon
 } from "./chunk-FZUV52PP.js";
 import {
   ClipboardTextField
-} from "./chunk-NXZY7WP4.js";
+} from "./chunk-MKERXZUC.js";
+import {
+  StyledButtonRowButton
+} from "./chunk-VLMFSAAH.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 import {
   pxToRems
-} from "./chunk-RKAVKJX6.js";
+} from "./chunk-YWNKHN46.js";
 import {
   ButtonSelector
-} from "./chunk-U6EBWLCK.js";
+} from "./chunk-ADV4UT4X.js";
 import {
   LoadingWrapper
-} from "./chunk-MYRSWJPJ.js";
+} from "./chunk-4D4LDRA5.js";
 import {
   mcBold,
   standardBorderRadius,
   standardCardShadow,
   standardCardShadowHard,
   standardContentInset
-} from "./chunk-E46IHC27.js";
+} from "./chunk-HQN2LS2G.js";
 import {
   Link
-} from "./chunk-5HDXWO2E.js";
+} from "./chunk-YIEDSI2X.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   getColor
-} from "./chunk-AM7EMJXN.js";
+} from "./chunk-NF6LGARO.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
 import {
   colors
-} from "./chunk-YJIIP7IY.js";
+} from "./chunk-QPO3F72O.js";
 import {
   __spreadProps,
   __spreadValues
@@ -77,11 +80,27 @@ 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 paddingY = resolveCardFormProp(void 0, args.kind, "paddingY", theme);
-  const paddingX = resolveCardFormProp(void 0, args.kind, "paddingX", theme);
+  const paddingTop = resolveCardFormProp(
+    args.paddingTop,
+    args.kind,
+    "paddingTop",
+    theme
+  );
+  const paddingBottom = resolveCardFormProp(
+    args.paddingBottom,
+    args.kind,
+    "paddingBottom",
+    theme
+  );
+  const paddingX = resolveCardFormProp(
+    args.paddingX,
+    args.kind,
+    "paddingX",
+    theme
+  );
   const textAlign = resolveCardFormProp(
     args.textAlign,
     args.kind,
@@ -132,7 +151,8 @@ function resolveProps(args, theme) {
     theme
   );
   const props = {
-    paddingY,
+    paddingTop,
+    paddingBottom,
     paddingX,
     shadow,
     borderRadius,
@@ -150,8 +170,12 @@ function CardForm({
   children,
   disabled,
   topContent = null,
+  aboveHeaderContent,
   title,
+  titleSize = "Large",
+  titleMarginLeft,
   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 +185,24 @@ function CardForm({
   kind = "primary",
   shadow: shadowProp,
   textAlign: textAlignProp,
+  paddingTop: paddingTopProp,
+  paddingBottom: paddingBottomProp,
+  paddingX: paddingXProp,
   belowFormContent,
-  belowFormContentGap = 0
+  belowFormContentGap = 0,
+  forceMarginAfterSubtitle = true,
+  afterTitleMargin = 40,
+  graphicHeader,
+  centeredContent = false,
+  contentMarginTop,
+  formButtonTopMargin,
+  selectMarginTop,
+  smDontAdjustWidth = false
 }) {
   const theme = useTheme();
   const {
-    paddingY,
+    paddingTop,
+    paddingBottom,
     paddingX,
     shadow,
     borderRadius,
@@ -178,7 +214,14 @@ function CardForm({
     smBorderWidth,
     defaultDescriptionTypographyMap
   } = resolveProps(
-    { kind, textAlign: textAlignProp, shadow: shadowProp },
+    {
+      kind,
+      textAlign: textAlignProp,
+      shadow: shadowProp,
+      paddingTop: paddingTopProp,
+      paddingBottom: paddingBottomProp,
+      paddingX: paddingXProp
+    },
     theme
   );
   const onSubmitForm = useCallback(
@@ -195,22 +238,39 @@ function CardForm({
   );
   const formattedDescription = description ? toReactNodesWithTypographyMap(
     description,
-    defaultDescriptionTypographyMap
+    defaultDescriptionTypographyMap,
+    false
   ) : null;
   const belowFormContentNodes = belowFormContent ? toReactNodes(belowFormContent) : null;
-  const content = /* @__PURE__ */ jsxs(CardFormContent, { children: [
-    topContent,
-    title && /* @__PURE__ */ jsx(CardHeadline, { hasTopContent: Boolean(topContent), children: /* @__PURE__ */ jsx(
-      Headline,
+  const CardFormContentTarget = full ? CardFormContentFull : CardFormContent;
+  const headerData = [
+    aboveHeaderContent ? /* @__PURE__ */ jsx(Fragment, { children: aboveHeaderContent }, "card-form-above-header") : null,
+    title ? /* @__PURE__ */ jsx(
+      CardHeadline,
       {
-        content: [
-          title,
-          ...titleRightIcon ? [icon({ name: titleRightIcon.name, ml: 4 })] : []
-        ],
-        display: "inline-flex"
-      }
-    ) }),
-    formattedDescription && /* @__PURE__ */ jsx(CardFormSubtitle, { children: formattedDescription }),
+        hasTopContent: Boolean(topContent),
+        afterTitleMargin,
+        contentMarginTop,
+        titleMarginLeft,
+        children: /* @__PURE__ */ jsx(
+          Headline,
+          {
+            content: [
+              title,
+              ...titleRightIcon ? [icon({ name: titleRightIcon.name, ml: 4 })] : []
+            ],
+            display: "inline-flex",
+            size: titleSize
+          }
+        )
+      },
+      "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 = {
@@ -221,16 +281,42 @@ function CardForm({
     borderColor,
     textAlign,
     paddingX,
-    paddingY,
+    paddingTop,
+    paddingBottom,
     backgroundColor,
     smBackgroundColor,
-    smBorderWidth
+    smBorderWidth,
+    forceMarginAfterSubtitle,
+    smDontAdjustWidth
   };
-  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 })),
-    /* @__PURE__ */ jsx(BelowCardFormContent, { gap: belowFormContentGap, children: belowFormContentNodes })
+  const Container = full ? CardFormContentFull : CardFormContainer;
+  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;
@@ -240,6 +326,13 @@ var CardFormContent = styled.div`
   flex-direction: column;
   align-self: center;
 `;
+var CardFormContentFull = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  height: 100%;
+  padding-bottom: ${({ paddingBottom }) => paddingBottom != null ? paddingBottom : 0}px;
+`;
 var BelowCardFormContent = styled.div`
   text-align: center;
   display: flex;
@@ -249,7 +342,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 }) => (
@@ -291,41 +386,48 @@ 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`
   display: flex;
   color: ${({ theme }) => theme.mcNeutral};
 `;
-var formInset = ({ wide, paddingX, paddingY }) => css`
+var formInset = ({
+  wide,
+  paddingX,
+  paddingTop,
+  paddingBottom,
+  smDontAdjustWidth,
+  graphicHeader
+}) => 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(`
-    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;
     `)}
@@ -333,7 +435,7 @@ var formInset = ({ wide, paddingX, paddingY }) => css`
 
   & ${CardFormFullTopContent} {
     ${bp.minSm(`
-      margin-top: -${paddingY}px;
+      margin-top: -${paddingTop}px;
     `)}
   }
 `;
@@ -346,13 +448,33 @@ var StyledCardFormStyle = ({
   borderColor,
   textAlign,
   paddingX,
-  paddingY,
+  paddingTop,
+  paddingBottom,
   backgroundColor,
   smBackgroundColor,
-  smBorderWidth
+  smBorderWidth,
+  forceMarginAfterSubtitle = true,
+  graphicHeader,
+  formButtonTopMargin = 32,
+  selectMarginTop = inputSpacingPx,
+  smDontAdjustWidth = false
 }) => {
   return css`
-    ${formInset({ wide, paddingX, paddingY })}
+    ${graphicHeader ? formInset({
+    wide,
+    paddingX,
+    paddingTop,
+    paddingBottom,
+    graphicHeader,
+    smDontAdjustWidth
+  }) : formInset({
+    wide,
+    paddingX,
+    paddingTop,
+    paddingBottom,
+    smDontAdjustWidth
+  })}
+
     ${shadow === "soft" ? standardCardShadow : shadow === "hard" ? standardCardShadowHard : ""}
 
     position: relative;
@@ -369,16 +491,16 @@ var StyledCardFormStyle = ({
     `)}
 
     ${bp.minSm(`
-      border-radius: ${borderRadius}px;
+      border-radius: ${graphicHeader ? `0 0 ${borderRadius}px ${borderRadius}px` : `${borderRadius}px`};
     `)}
 
     ${CardHeadline}, ${CardFormSubtitle} {
       text-align: ${textAlign};
     }
 
-    ${CardFormSubtitle} + * {
+    ${forceMarginAfterSubtitle ? `${CardFormSubtitle.toString()} + * {
       margin-top: 40px !important;
-    }
+    }` : ""}
 
     ${CardFormButtonRow}, ${StyledButtonRowButton} {
       ${ButtonSelector()} {
@@ -387,7 +509,7 @@ var StyledCardFormStyle = ({
     }
 
     ${StyledSelect}, ${ToggleContainer} {
-      margin-top: ${inputSpacingPx}px;
+      margin-top: ${selectMarginTop}px;
     }
 
     ${CardFormFieldLabel} {
@@ -423,7 +545,7 @@ var StyledCardFormStyle = ({
       }
 
       & > ${ButtonSelector()}, & > ${select(CardFormNearButtonColumn)} {
-        ${formButtonTopMarginStyle}
+        ${formButtonTopMargin !== void 0 ? `margin-top: ${formButtonTopMargin}px;` : formButtonTopMarginStyle}
       }
     }
   `;
@@ -431,15 +553,19 @@ 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};
 
-  & + *:not(${CardFormSubtitle}) {
-    margin-top: 40px;
+  ${({ hasTopContent, contentMarginTop }) => hasTopContent || contentMarginTop !== void 0 ? `margin-top: ${contentMarginTop != null ? contentMarginTop : 32}px;` : ""}
+
+  & + *:not(${CardFormSubtitle.toString()}) {
+    margin-top: ${({ afterTitleMargin }) => afterTitleMargin}px;
   }
 
   & + ${CardFormSubtitle} {
     margin-top: 12px;
   }
+
+  ${({ titleMarginLeft }) => titleMarginLeft !== void 0 && `margin-left: ${titleMarginLeft}px;`}
 `;
 function CardFormTextWithLink({
   text,
@@ -495,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-IWQDUW5F.js

@@ -0,0 +1,32 @@
+// src/icons/CheckmarkGreen.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function CheckmarkGreen({
+  strokeWidth = "4",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 49 49",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          id: "Vector",
+          d: "M6 30.6876L18.5 41L43 8",
+          stroke: "#559057",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
+        }
+      )
+    }
+  );
+}
+
+export {
+  CheckmarkGreen
+};

package/dist/{chunk-FGZFMWJU.js → chunk-J3TUZRIL.js}

@@ -205,8 +205,8 @@ var LETTER_SPACING = {
     loose: ".1em"
   },
   ["Bridge" /* Bridge */]: {
-    tight: "-2%",
-    normal: "0%",
+    tight: "-0.48px",
+    normal: "0",
     wide: "10%"
   }
 };

package/dist/{chunk-4WLQDWEJ.js → chunk-J7WU3WLQ.js}

@@ -1,10 +1,10 @@
 import {
   toReactNodes
-} from "./chunk-AHC2USPG.js";
+} from "./chunk-E7KQDR6U.js";
 import {
   StyledLabel,
   getPropDefaults
-} from "./chunk-BJNNM7GS.js";
+} from "./chunk-PDEB5XJS.js";
 import {
   __spreadProps,
   __spreadValues