@lightsparkdev/ui 1.1.0 → 1.1.2

package/dist/{chunk-MMDHIPKS.cjs → chunk-PP2Z74OK.cjs}

@@ -1,74 +1,77 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunk37ZNE6RRcjs = require('./chunk-37ZNE6RR.cjs');
+var _chunk26C7EHMNcjs = require('./chunk-26C7EHMN.cjs');
 
 
-var _chunkUNDTHMBScjs = require('./chunk-UNDTHMBS.cjs');
+var _chunkI5VWQRS4cjs = require('./chunk-I5VWQRS4.cjs');
 
 
-var _chunk3GKIKZL2cjs = require('./chunk-3GKIKZL2.cjs');
+var _chunkXYPLDDUHcjs = require('./chunk-XYPLDDUH.cjs');
 
 
-var _chunk74SBZBYAcjs = require('./chunk-74SBZBYA.cjs');
+var _chunkVXRMYWVTcjs = require('./chunk-VXRMYWVT.cjs');
 
 
-var _chunk5EP2Q5VZcjs = require('./chunk-5EP2Q5VZ.cjs');
+var _chunkL4K6LGDWcjs = require('./chunk-L4K6LGDW.cjs');
 
 
 
-var _chunk2PI3XHGDcjs = require('./chunk-2PI3XHGD.cjs');
+var _chunkHW7ECH4Ncjs = require('./chunk-HW7ECH4N.cjs');
 
 
-var _chunkDSRVIFSUcjs = require('./chunk-DSRVIFSU.cjs');
+var _chunk2YBZV2K6cjs = require('./chunk-2YBZV2K6.cjs');
 
 
-var _chunkYDN2RZ25cjs = require('./chunk-YDN2RZ25.cjs');
+var _chunkFUVI6AKGcjs = require('./chunk-FUVI6AKG.cjs');
 
 
-var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+var _chunkNN6GDACAcjs = require('./chunk-NN6GDACA.cjs');
 
 
-var _chunkFOUSEEFHcjs = require('./chunk-FOUSEEFH.cjs');
+var _chunkKOGW3LJCcjs = require('./chunk-KOGW3LJC.cjs');
 
 
-var _chunkPMF5K72Fcjs = require('./chunk-PMF5K72F.cjs');
+var _chunkCH2PLO6Fcjs = require('./chunk-CH2PLO6F.cjs');
 
 
-var _chunkCH2PLO6Fcjs = require('./chunk-CH2PLO6F.cjs');
+var _chunk3EIRVYICcjs = require('./chunk-3EIRVYIC.cjs');
 
 
-var _chunkHBDF6JWWcjs = require('./chunk-HBDF6JWW.cjs');
+var _chunkTXKJAPBDcjs = require('./chunk-TXKJAPBD.cjs');
+
+
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
 
 
-var _chunk7H2OXTENcjs = require('./chunk-7H2OXTEN.cjs');
+var _chunkXIFHBLNQcjs = require('./chunk-XIFHBLNQ.cjs');
 
 
-var _chunk4UFYMBJKcjs = require('./chunk-4UFYMBJK.cjs');
+var _chunkECFNSLYPcjs = require('./chunk-ECFNSLYP.cjs');
 
 
-var _chunkBL5NDVAZcjs = require('./chunk-BL5NDVAZ.cjs');
+var _chunkXMSQNWZKcjs = require('./chunk-XMSQNWZK.cjs');
 
 
 
 
 
 
-var _chunkFPQ2OUYXcjs = require('./chunk-FPQ2OUYX.cjs');
+var _chunkO6BZRC56cjs = require('./chunk-O6BZRC56.cjs');
 
 
-var _chunkI4L4UO26cjs = require('./chunk-I4L4UO26.cjs');
+var _chunk4DJ33XMZcjs = require('./chunk-4DJ33XMZ.cjs');
 
 
 var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
 
 
-var _chunkHGCI5IAMcjs = require('./chunk-HGCI5IAM.cjs');
+var _chunkQI7YHMJZcjs = require('./chunk-QI7YHMJZ.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
-var _chunkQYVQII3Icjs = require('./chunk-QYVQII3I.cjs');
+var _chunkGICIJWP3cjs = require('./chunk-GICIJWP3.cjs');
 
 
 
@@ -80,8 +83,24 @@ var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(
 var _react3 = require('react');
 var _jsxruntime = require('@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 = _react.useTheme.call(void 0, );
   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 = _react3.useCallback.call(void 0, 
@@ -193,24 +236,41 @@ function CardForm({
     },
     [onSubmit, disabled]
   );
-  const formattedDescription = description ? _chunkFOUSEEFHcjs.toReactNodesWithTypographyMap.call(void 0, 
+  const formattedDescription = description ? _chunkNN6GDACAcjs.toReactNodesWithTypographyMap.call(void 0, 
     description,
-    defaultDescriptionTypographyMap
+    defaultDescriptionTypographyMap,
+    false
   ) : null;
-  const belowFormContentNodes = belowFormContent ? _chunkPMF5K72Fcjs.toReactNodes.call(void 0, belowFormContent) : null;
-  const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, CardFormContent, { children: [
-    topContent,
-    title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardHeadline, { hasTopContent: Boolean(topContent), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk37ZNE6RRcjs.Headline,
+  const belowFormContentNodes = belowFormContent ? _chunkKOGW3LJCcjs.toReactNodes.call(void 0, belowFormContent) : null;
+  const CardFormContentTarget = full ? CardFormContentFull : CardFormContent;
+  const headerData = [
+    aboveHeaderContent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.Fragment, { children: aboveHeaderContent }, "card-form-above-header") : null,
+    title ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      CardHeadline,
       {
-        content: [
-          title,
-          ...titleRightIcon ? [_chunkCH2PLO6Fcjs.icon.call(void 0, { name: titleRightIcon.name, ml: 4 })] : []
-        ],
-        display: "inline-flex"
-      }
-    ) }),
-    formattedDescription && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardFormSubtitle, { children: formattedDescription }),
+        hasTopContent: Boolean(topContent),
+        afterTitleMargin,
+        contentMarginTop,
+        titleMarginLeft,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunk26C7EHMNcjs.Headline,
+          {
+            content: [
+              title,
+              ...titleRightIcon ? [_chunkCH2PLO6Fcjs.icon.call(void 0, { name: titleRightIcon.name, ml: 4 })] : []
+            ],
+            display: "inline-flex",
+            size: titleSize
+          }
+        )
+      },
+      "card-form-title"
+    ) : null,
+    formattedDescription ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardFormSubtitle, { children: formattedDescription }, "card-form-subtitle") : null
+  ];
+  const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, CardFormContentTarget, { children: [
+    topContent,
+    centeredContent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 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__ */ _jsxruntime.jsxs.call(void 0, CardFormContainer, { children: [
-    hasChildForm ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledCardFormDiv, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, commonProps), { children: content })) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledCardForm, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { onSubmit: onSubmitForm, noValidate: true }, commonProps), { children: content })),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BelowCardFormContent, { gap: belowFormContentGap, children: belowFormContentNodes })
+  const Container = full ? CardFormContentFull : CardFormContainer;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Container, { paddingBottom, children: [
+    hasChildForm ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledCardFormDiv, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, commonProps), { children: content })) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk2YBZV2K6cjs.Flex, { column: true, align: "center", height: full ? "100%" : "auto", children: [
+      graphicHeader && graphicHeader,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        StyledCardForm,
+        _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {
+          onSubmit: onSubmitForm,
+          noValidate: true
+        }, commonProps), {
+          forceMarginAfterSubtitle,
+          graphicHeader: graphicHeader ? true : false,
+          formButtonTopMargin,
+          selectMarginTop,
+          children: content
+        })
+      )
+    ] }),
+    belowFormContentNodes && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BelowCardFormContent, { gap: belowFormContentGap, children: belowFormContentNodes })
   ] });
 }
+var CenteredHeader = _styled2.default.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+  justify-content: center;
+`;
 var CardFormContainer = _styled2.default.div`
   display: flex;
   flex-direction: column;
@@ -240,6 +326,13 @@ var CardFormContent = _styled2.default.div`
   flex-direction: column;
   align-self: center;
 `;
+var CardFormContentFull = _styled2.default.div`
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  height: 100%;
+  padding-bottom: ${({ paddingBottom }) => paddingBottom != null ? paddingBottom : 0}px;
+`;
 var BelowCardFormContent = _styled2.default.div`
   text-align: center;
   display: flex;
@@ -249,7 +342,9 @@ var BelowCardFormContent = _styled2.default.div`
   margin-top: ${_chunkZUAO4DW3cjs.Spacing.px.xl};
   margin-bottom: ${_chunkZUAO4DW3cjs.Spacing.px.xl};
 `;
-var CardFormSubtitle = _styled2.default.div``;
+var CardFormSubtitle = _styled2.default.div`
+  padding: 0 ${_chunkZUAO4DW3cjs.Spacing.px.xs};
+`;
 var CardFormButtonRow = _styled2.default.div`
   display: flex;
   justify-content: ${({ justify }) => (
@@ -257,7 +352,7 @@ var CardFormButtonRow = _styled2.default.div`
   justify === "center" ? "center" : "left"
 )};
   margin-top: 32px;
-  ${_chunk4UFYMBJKcjs.ButtonSelector.call(void 0, "* + ")} {
+  ${_chunkECFNSLYPcjs.ButtonSelector.call(void 0, "* + ")} {
     margin-left: 10px;
   }
 
@@ -268,9 +363,9 @@ var CardFormButtonRow = _styled2.default.div`
 var fieldLabelMarginPx = 12;
 var CardFormFieldLabel = _styled2.default.label`
   display: block;
-  margin-top: ${_chunk2PI3XHGDcjs.inputSpacingPx}px;
+  margin-top: ${_chunkHW7ECH4Ncjs.inputSpacingPx}px;
   color: ${({ theme }) => theme.text};
-  font-size: ${_chunk7H2OXTENcjs.pxToRems.call(void 0, 14)};
+  font-size: ${_chunkXIFHBLNQcjs.pxToRems.call(void 0, 14)};
   font-weight: 700;
   & + * {
     margin-top: ${fieldLabelMarginPx}px;
@@ -283,7 +378,7 @@ var CardFormNearButtonColumn = _styled2.default.div`
   gap: ${_chunkZUAO4DW3cjs.Spacing.px.sm};
 `;
 function CardFormDataFieldValue({ text }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledCardFormDataFieldValue, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHBDF6JWWcjs.ClipboardTextField, { value: text, icon: true, iconSide: "right" }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledCardFormDataFieldValue, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3EIRVYICcjs.ClipboardTextField, { value: text, icon: true, iconSide: "right" }) });
 }
 var StyledCardFormDataFieldValue = _styled2.default.div`
   margin-top: 4px;
@@ -291,41 +386,48 @@ var StyledCardFormDataFieldValue = _styled2.default.div`
 `;
 var CardFormFullWidth = _styled2.default.div``;
 var CardFormFullTopContent = _styled2.default.div`
-  ${_chunkKW3JYLRIcjs.bp.minSm(`
-    border-radius: 16px 16px 0 0;
+  ${({ borderRadius = "16px 16px 0 0" }) => _chunkKW3JYLRIcjs.bp.minSm(`
     overflow: hidden;
+    border-radius: ${borderRadius};
   `)}
 `;
 var StyledCardFormCheckboxParagraph = _styled2.default.div`
   display: flex;
   color: ${({ theme }) => theme.mcNeutral};
 `;
-var formInset = ({ wide, paddingX, paddingY }) => _react.css`
+var formInset = ({
+  wide,
+  paddingX,
+  paddingTop,
+  paddingBottom,
+  smDontAdjustWidth,
+  graphicHeader
+}) => _react.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;
 
   ${_chunkKW3JYLRIcjs.bp.minSm(`
-    width: ${wide ? 700 : 505}px;
+    width: ${wide ? 700 : 408}px;
   `)}
 
   ${_chunkKW3JYLRIcjs.bp.sm(`
-    padding: 0;
+    padding: ${graphicHeader ? "24px" : "0"};
   `)}
 
-  ${_chunkFPQ2OUYXcjs.standardContentInset.smCSS}
+  ${graphicHeader || smDontAdjustWidth ? `width: 100%;` : _chunkO6BZRC56cjs.standardContentInset.smCSS}
 
   & ${CardFormFullWidth}, & ${CardFormFullTopContent} {
-    ${_chunkKW3JYLRIcjs.bp.sm(`
-      width: calc(100% + ${_chunkFPQ2OUYXcjs.standardContentInset.smPx * 2}px);
-      margin-left: -${_chunkFPQ2OUYXcjs.standardContentInset.smPx}px;
+    ${smDontAdjustWidth ? "" : _chunkKW3JYLRIcjs.bp.sm(`
+      width: calc(100% + ${_chunkO6BZRC56cjs.standardContentInset.smPx * 2}px);
+      margin-left: -${_chunkO6BZRC56cjs.standardContentInset.smPx}px;
     `)}
 
-    ${_chunkKW3JYLRIcjs.bp.minSm(`
+    ${smDontAdjustWidth ? "" : _chunkKW3JYLRIcjs.bp.minSm(`
       width: calc(100% + ${paddingX * 2}px);
       margin-left: -${paddingX}px;
     `)}
@@ -333,7 +435,7 @@ var formInset = ({ wide, paddingX, paddingY }) => _react.css`
 
   & ${CardFormFullTopContent} {
     ${_chunkKW3JYLRIcjs.bp.minSm(`
-      margin-top: -${paddingY}px;
+      margin-top: -${paddingTop}px;
     `)}
   }
 `;
@@ -346,74 +448,94 @@ var StyledCardFormStyle = ({
   borderColor,
   textAlign,
   paddingX,
-  paddingY,
+  paddingTop,
+  paddingBottom,
   backgroundColor,
   smBackgroundColor,
-  smBorderWidth
+  smBorderWidth,
+  forceMarginAfterSubtitle = true,
+  graphicHeader,
+  formButtonTopMargin = 32,
+  selectMarginTop = _chunkHW7ECH4Ncjs.inputSpacingPx,
+  smDontAdjustWidth = false
 }) => {
   return _react.css`
-    ${formInset({ wide, paddingX, paddingY })}
-    ${shadow === "soft" ? _chunkFPQ2OUYXcjs.standardCardShadow : shadow === "hard" ? _chunkFPQ2OUYXcjs.standardCardShadowHard : ""}
+    ${graphicHeader ? formInset({
+    wide,
+    paddingX,
+    paddingTop,
+    paddingBottom,
+    graphicHeader,
+    smDontAdjustWidth
+  }) : formInset({
+    wide,
+    paddingX,
+    paddingTop,
+    paddingBottom,
+    smDontAdjustWidth
+  })}
+
+    ${shadow === "soft" ? _chunkO6BZRC56cjs.standardCardShadow : shadow === "hard" ? _chunkO6BZRC56cjs.standardCardShadowHard : ""}
 
     position: relative;
     height: 100%;
     border-style: solid;
     border-width: ${borderWidth}px;
-    border-color: ${_chunkHGCI5IAMcjs.getColor.call(void 0, theme, borderColor)};
-    background-color: ${_chunkHGCI5IAMcjs.getColor.call(void 0, theme, backgroundColor)};
+    border-color: ${_chunkQI7YHMJZcjs.getColor.call(void 0, theme, borderColor)};
+    background-color: ${_chunkQI7YHMJZcjs.getColor.call(void 0, theme, backgroundColor)};
 
     ${_chunkKW3JYLRIcjs.bp.sm(`
       box-shadow: none;
-      background-color: ${_chunkHGCI5IAMcjs.getColor.call(void 0, theme, smBackgroundColor)};
+      background-color: ${_chunkQI7YHMJZcjs.getColor.call(void 0, theme, smBackgroundColor)};
       border-width: ${smBorderWidth}px;
     `)}
 
     ${_chunkKW3JYLRIcjs.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}, ${_chunkDSRVIFSUcjs.StyledButtonRowButton} {
-      ${_chunk4UFYMBJKcjs.ButtonSelector.call(void 0, )} {
+    ${CardFormButtonRow}, ${_chunkTXKJAPBDcjs.StyledButtonRowButton} {
+      ${_chunkECFNSLYPcjs.ButtonSelector.call(void 0, )} {
         margin-top: 0;
       }
     }
 
-    ${_chunkUNDTHMBScjs.StyledSelect}, ${_chunk74SBZBYAcjs.ToggleContainer} {
-      margin-top: ${_chunk2PI3XHGDcjs.inputSpacingPx}px;
+    ${_chunkI5VWQRS4cjs.StyledSelect}, ${_chunkVXRMYWVTcjs.ToggleContainer} {
+      margin-top: ${selectMarginTop}px;
     }
 
     ${CardFormFieldLabel} {
-      margin-top: ${_chunk2PI3XHGDcjs.inputSpacingPx}px;
+      margin-top: ${_chunkHW7ECH4Ncjs.inputSpacingPx}px;
 
-      & + ${_chunkUNDTHMBScjs.StyledSelect} {
+      & + ${_chunkI5VWQRS4cjs.StyledSelect} {
         margin-top: ${fieldLabelMarginPx}px;
       }
     }
 
-    ${_chunk3GKIKZL2cjs.TextInputHalfRow} > ${_chunkUNDTHMBScjs.StyledSelect} {
+    ${_chunkXYPLDDUHcjs.TextInputHalfRow} > ${_chunkI5VWQRS4cjs.StyledSelect} {
       margin-top: 0;
     }
 
-    ${_chunkBL5NDVAZcjs.LoadingWrapper} {
+    ${_chunkXMSQNWZKcjs.LoadingWrapper} {
       margin: 32px 0;
       * + * {
         margin-top: 0;
       }
     }
 
-    ${_chunk4UFYMBJKcjs.ButtonSelector.call(void 0, )} ${_chunkBL5NDVAZcjs.LoadingWrapper} {
+    ${_chunkECFNSLYPcjs.ButtonSelector.call(void 0, )} ${_chunkXMSQNWZKcjs.LoadingWrapper} {
       margin: 0;
     }
 
-    ${_chunk5EP2Q5VZcjs.StyledFileInput} {
+    ${_chunkL4K6LGDWcjs.StyledFileInput} {
       margin-top: 16px;
     }
 
@@ -422,8 +544,8 @@ var StyledCardFormStyle = ({
         margin-top: 24px;
       }
 
-      & > ${_chunk4UFYMBJKcjs.ButtonSelector.call(void 0, )}, & > ${_chunk6VA4SAHQcjs.select.call(void 0, CardFormNearButtonColumn)} {
-        ${_chunk2PI3XHGDcjs.formButtonTopMarginStyle}
+      & > ${_chunkECFNSLYPcjs.ButtonSelector.call(void 0, )}, & > ${_chunk6VA4SAHQcjs.select.call(void 0, CardFormNearButtonColumn)} {
+        ${formButtonTopMargin !== void 0 ? `margin-top: ${formButtonTopMargin}px;` : _chunkHW7ECH4Ncjs.formButtonTopMarginStyle}
       }
     }
   `;
@@ -431,15 +553,19 @@ var StyledCardFormStyle = ({
 var StyledCardForm = _styled2.default.form(StyledCardFormStyle);
 var StyledCardFormDiv = _styled2.default.div(StyledCardFormStyle);
 var CardHeadline = _styled2.default.div`
-  ${({ hasTopContent }) => hasTopContent ? "margin-top: 32px;" : ""}
+  padding: 0 ${_chunkZUAO4DW3cjs.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,
@@ -447,9 +573,9 @@ function CardFormTextWithLink({
   to
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: { marginTop: "16px", fontWeight: "600" }, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: _chunkFPQ2OUYXcjs.mcBold, children: text }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: _chunkO6BZRC56cjs.mcBold, children: text }),
     " ",
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkI4L4UO26cjs.Link, { to, children: toText })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4DJ33XMZcjs.Link, { to, children: toText })
   ] });
 }
 function CardFormCheckboxParagraph({
@@ -458,7 +584,7 @@ function CardFormCheckboxParagraph({
   checked
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledCardFormCheckboxParagraph, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYDN2RZ25cjs.Checkbox, { checked, onChange, alignItems: "flex-start" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFUVI6AKGcjs.Checkbox, { checked, onChange, alignItems: "flex-start" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardFormCheckboxParagraphText, { onClick: () => onChange(!checked), children })
   ] });
 }
@@ -478,7 +604,7 @@ var CardFormOption = ({
 ] });
 var StyledCardFormOption = _styled2.default.div`
   border: ${({ theme, selected }) => `${selected ? `2px solid ${theme.info}` : `1px solid ${theme.c1Neutral}`}`};
-  ${_chunkFPQ2OUYXcjs.standardBorderRadius.call(void 0, 8)}
+  ${_chunkO6BZRC56cjs.standardBorderRadius.call(void 0, 8)}
   cursor: pointer;
   margin-top: 10px;
   padding: ${({ selected }) => selected ? "15px" : "16px"};
@@ -487,7 +613,7 @@ var CardFormOptionLabel = _styled2.default.div`
   font-weight: bold;
 `;
 var CardFormOptionDescription = _styled2.default.p`
-  color: ${_chunkQYVQII3Icjs.colors.gray40};
+  color: ${_chunkGICIJWP3cjs.colors.gray40};
   margin: 6px 0 0;
 `;
 function resolveCardFormProp(prop, kind, defaultKey, theme) {
@@ -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-FPIKWB3F.js → chunk-PPMNMNW5.js}

@@ -1,32 +1,32 @@
 import {
   setDefaultReactNodesTypography
-} from "./chunk-2WPDZCWM.js";
+} from "./chunk-R62M65Z7.js";
 import {
   toReactNodes
-} from "./chunk-AHC2USPG.js";
+} from "./chunk-E7KQDR6U.js";
 import {
   extend,
   flexCenter,
   pxToRems
-} from "./chunk-RKAVKJX6.js";
+} from "./chunk-YWNKHN46.js";
 import {
   UnstyledButton
-} from "./chunk-Z6I64NIF.js";
+} from "./chunk-BJP4OTMN.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   Icon
-} from "./chunk-DJOYSVI3.js";
+} from "./chunk-JWFDHULW.js";
 import {
   standardContentInset
-} from "./chunk-E46IHC27.js";
+} from "./chunk-HQN2LS2G.js";
 import {
   themeOr
-} from "./chunk-AM7EMJXN.js";
+} from "./chunk-NF6LGARO.js";
 import {
   colors
-} from "./chunk-YJIIP7IY.js";
+} from "./chunk-QPO3F72O.js";
 import {
   __spreadProps,
   __spreadValues
@@ -206,6 +206,7 @@ function Toasts({
       /* @__PURE__ */ jsxs(
         StyledToast,
         {
+          backgroundColor: toast.type === "error" ? colors.red50 : toast.type === "success" ? colors.green37 : void 0,
           isActive: toast.isActive,
           isHiding: toast.isHiding,
           isVisible: fromCurrent < maxVisible,
@@ -257,7 +258,7 @@ var StyledToast = styled.div`
   align-items: flex-start;
   justify-content: space-between;
   font-weight: 500;
-  background-color: ${({ isCurrent, movingToCurrent }) => isCurrent || movingToCurrent ? colors.blue43 : themeOr("#2A50B2", colors.blue43)};
+  background-color: ${({ isCurrent, movingToCurrent, backgroundColor }) => isCurrent || movingToCurrent ? backgroundColor != null ? backgroundColor : colors.blue43 : backgroundColor != null ? backgroundColor : themeOr("#2A50B2", colors.blue43)};
   color: rgba(255, 255, 255, 0);
   padding: 16px 24px;
   ${({ duration }) => !duration && "padding-right: 50px;"}

package/dist/{chunk-UVJK2G3B.js → chunk-PSB345GM.js}

@@ -1,9 +1,9 @@
 import {
   Icon
-} from "./chunk-DJOYSVI3.js";
+} from "./chunk-JWFDHULW.js";
 import {
   getColor
-} from "./chunk-AM7EMJXN.js";
+} from "./chunk-NF6LGARO.js";
 import {
   __objRest,
   __spreadProps,