@lightsparkdev/ui 1.1.1 → 1.1.2

package/dist/{chunk-GG32O4Y2.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 _chunkWXN7CK2Ocjs = require('./chunk-WXN7CK2O.cjs');
+var _chunk26C7EHMNcjs = require('./chunk-26C7EHMN.cjs');
 
 
-var _chunkP4R7LALXcjs = require('./chunk-P4R7LALX.cjs');
+var _chunkI5VWQRS4cjs = require('./chunk-I5VWQRS4.cjs');
 
 
-var _chunkYZ2C4D6Ncjs = require('./chunk-YZ2C4D6N.cjs');
+var _chunkXYPLDDUHcjs = require('./chunk-XYPLDDUH.cjs');
 
 
-var _chunkAQ3YLJHIcjs = require('./chunk-AQ3YLJHI.cjs');
+var _chunkVXRMYWVTcjs = require('./chunk-VXRMYWVT.cjs');
 
 
-var _chunkOTVMB2IWcjs = require('./chunk-OTVMB2IW.cjs');
+var _chunkL4K6LGDWcjs = require('./chunk-L4K6LGDW.cjs');
 
 
 
-var _chunk6N7XRYZDcjs = require('./chunk-6N7XRYZD.cjs');
+var _chunkHW7ECH4Ncjs = require('./chunk-HW7ECH4N.cjs');
 
 
-var _chunkVDSQAXIMcjs = require('./chunk-VDSQAXIM.cjs');
+var _chunk2YBZV2K6cjs = require('./chunk-2YBZV2K6.cjs');
 
 
-var _chunkVXW4GOMOcjs = require('./chunk-VXW4GOMO.cjs');
+var _chunkFUVI6AKGcjs = require('./chunk-FUVI6AKG.cjs');
 
 
-var _chunk2VEWSENQcjs = require('./chunk-2VEWSENQ.cjs');
+var _chunkNN6GDACAcjs = require('./chunk-NN6GDACA.cjs');
 
 
-var _chunkYIT3HB4Tcjs = require('./chunk-YIT3HB4T.cjs');
+var _chunkKOGW3LJCcjs = require('./chunk-KOGW3LJC.cjs');
 
 
-var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+var _chunkCH2PLO6Fcjs = require('./chunk-CH2PLO6F.cjs');
 
 
-var _chunkSFVPZBMVcjs = require('./chunk-SFVPZBMV.cjs');
+var _chunk3EIRVYICcjs = require('./chunk-3EIRVYIC.cjs');
 
 
-var _chunk6OSTNEFIcjs = require('./chunk-6OSTNEFI.cjs');
+var _chunkTXKJAPBDcjs = require('./chunk-TXKJAPBD.cjs');
 
 
-var _chunkCH2PLO6Fcjs = require('./chunk-CH2PLO6F.cjs');
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+
 
+var _chunkXIFHBLNQcjs = require('./chunk-XIFHBLNQ.cjs');
 
-var _chunkI6MQ5VOEcjs = require('./chunk-I6MQ5VOE.cjs');
 
+var _chunkECFNSLYPcjs = require('./chunk-ECFNSLYP.cjs');
 
-var _chunkXQNOVNF4cjs = require('./chunk-XQNOVNF4.cjs');
 
+var _chunkXMSQNWZKcjs = require('./chunk-XMSQNWZK.cjs');
 
 
 
 
 
-var _chunkU35SY546cjs = require('./chunk-U35SY546.cjs');
 
+var _chunkO6BZRC56cjs = require('./chunk-O6BZRC56.cjs');
 
-var _chunk7VSNXYK4cjs = require('./chunk-7VSNXYK4.cjs');
+
+var _chunk4DJ33XMZcjs = require('./chunk-4DJ33XMZ.cjs');
 
 
 var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
 
 
-var _chunkXUEKQQJVcjs = require('./chunk-XUEKQQJV.cjs');
+var _chunkQI7YHMJZcjs = require('./chunk-QI7YHMJZ.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
-var _chunkK7HWTEGPcjs = require('./chunk-K7HWTEGP.cjs');
+var _chunkGICIJWP3cjs = require('./chunk-GICIJWP3.cjs');
 
 
 
@@ -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 = _react.useTheme.call(void 0, );
   const {
@@ -202,7 +219,8 @@ function CardForm({
       textAlign: textAlignProp,
       shadow: shadowProp,
       paddingTop: paddingTopProp,
-      paddingBottom: paddingBottomProp
+      paddingBottom: paddingBottomProp,
+      paddingX: paddingXProp
     },
     theme
   );
@@ -218,22 +236,24 @@ function CardForm({
     },
     [onSubmit, disabled]
   );
-  const formattedDescription = description ? _chunkSFVPZBMVcjs.toReactNodesWithTypographyMap.call(void 0, 
+  const formattedDescription = description ? _chunkNN6GDACAcjs.toReactNodesWithTypographyMap.call(void 0, 
     description,
     defaultDescriptionTypographyMap,
     false
   ) : null;
-  const belowFormContentNodes = belowFormContent ? _chunk6OSTNEFIcjs.toReactNodes.call(void 0, belowFormContent) : null;
+  const belowFormContentNodes = belowFormContent ? _chunkKOGW3LJCcjs.toReactNodes.call(void 0, belowFormContent) : null;
   const CardFormContentTarget = full ? CardFormContentFull : CardFormContent;
-  const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, CardFormContentTarget, { children: [
-    topContent,
-    title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  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,
       {
         hasTopContent: Boolean(topContent),
         afterTitleMargin,
+        contentMarginTop,
+        titleMarginLeft,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkWXN7CK2Ocjs.Headline,
+          _chunk26C7EHMNcjs.Headline,
           {
             content: [
               title,
@@ -243,9 +263,14 @@ function CardForm({
             size: titleSize
           }
         )
-      }
-    ),
-    formattedDescription && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardFormSubtitle, { children: formattedDescription }),
+      },
+      "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 = {
@@ -261,23 +286,37 @@ function CardForm({
     backgroundColor,
     smBackgroundColor,
     smBorderWidth,
-    forceMarginAfterSubtitle
+    forceMarginAfterSubtitle,
+    smDontAdjustWidth
   };
   const Container = full ? CardFormContentFull : CardFormContainer;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Container, { 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), {
-        forceMarginAfterSubtitle,
-        children: content
-      })
-    ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BelowCardFormContent, { gap: belowFormContentGap, children: belowFormContentNodes })
+  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;
@@ -292,6 +331,7 @@ var CardFormContentFull = _styled2.default.div`
   flex-direction: column;
   align-self: center;
   height: 100%;
+  padding-bottom: ${({ paddingBottom }) => paddingBottom != null ? paddingBottom : 0}px;
 `;
 var BelowCardFormContent = _styled2.default.div`
   text-align: center;
@@ -312,7 +352,7 @@ var CardFormButtonRow = _styled2.default.div`
   justify === "center" ? "center" : "left"
 )};
   margin-top: 32px;
-  ${_chunkVXW4GOMOcjs.ButtonSelector.call(void 0, "* + ")} {
+  ${_chunkECFNSLYPcjs.ButtonSelector.call(void 0, "* + ")} {
     margin-left: 10px;
   }
 
@@ -323,9 +363,9 @@ var CardFormButtonRow = _styled2.default.div`
 var fieldLabelMarginPx = 12;
 var CardFormFieldLabel = _styled2.default.label`
   display: block;
-  margin-top: ${_chunk6N7XRYZDcjs.inputSpacingPx}px;
+  margin-top: ${_chunkHW7ECH4Ncjs.inputSpacingPx}px;
   color: ${({ theme }) => theme.text};
-  font-size: ${_chunkXQNOVNF4cjs.pxToRems.call(void 0, 14)};
+  font-size: ${_chunkXIFHBLNQcjs.pxToRems.call(void 0, 14)};
   font-weight: 700;
   & + * {
     margin-top: ${fieldLabelMarginPx}px;
@@ -338,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, _chunkI6MQ5VOEcjs.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;
@@ -346,9 +386,9 @@ 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`
@@ -359,7 +399,9 @@ var formInset = ({
   wide,
   paddingX,
   paddingTop,
-  paddingBottom
+  paddingBottom,
+  smDontAdjustWidth,
+  graphicHeader
 }) => _react.css`
   margin-left: auto;
   margin-right: auto;
@@ -374,18 +416,18 @@ var formInset = ({
   `)}
 
   ${_chunkKW3JYLRIcjs.bp.sm(`
-    padding: 0;
+    padding: ${graphicHeader ? "24px" : "0"};
   `)}
 
-  ${_chunkU35SY546cjs.standardContentInset.smCSS}
+  ${graphicHeader || smDontAdjustWidth ? `width: 100%;` : _chunkO6BZRC56cjs.standardContentInset.smCSS}
 
   & ${CardFormFullWidth}, & ${CardFormFullTopContent} {
-    ${_chunkKW3JYLRIcjs.bp.sm(`
-      width: calc(100% + ${_chunkU35SY546cjs.standardContentInset.smPx * 2}px);
-      margin-left: -${_chunkU35SY546cjs.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;
     `)}
@@ -411,27 +453,45 @@ var StyledCardFormStyle = ({
   backgroundColor,
   smBackgroundColor,
   smBorderWidth,
-  forceMarginAfterSubtitle = true
+  forceMarginAfterSubtitle = true,
+  graphicHeader,
+  formButtonTopMargin = 32,
+  selectMarginTop = _chunkHW7ECH4Ncjs.inputSpacingPx,
+  smDontAdjustWidth = false
 }) => {
   return _react.css`
-    ${formInset({ wide, paddingX, paddingTop, paddingBottom })}
-    ${shadow === "soft" ? _chunkU35SY546cjs.standardCardShadow : shadow === "hard" ? _chunkU35SY546cjs.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: ${_chunkXUEKQQJVcjs.getColor.call(void 0, theme, borderColor)};
-    background-color: ${_chunkXUEKQQJVcjs.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: ${_chunkXUEKQQJVcjs.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} {
@@ -442,40 +502,40 @@ var StyledCardFormStyle = ({
       margin-top: 40px !important;
     }` : ""}
 
-    ${CardFormButtonRow}, ${_chunkVDSQAXIMcjs.StyledButtonRowButton} {
-      ${_chunkVXW4GOMOcjs.ButtonSelector.call(void 0, )} {
+    ${CardFormButtonRow}, ${_chunkTXKJAPBDcjs.StyledButtonRowButton} {
+      ${_chunkECFNSLYPcjs.ButtonSelector.call(void 0, )} {
         margin-top: 0;
       }
     }
 
-    ${_chunkP4R7LALXcjs.StyledSelect}, ${_chunkAQ3YLJHIcjs.ToggleContainer} {
-      margin-top: ${_chunk6N7XRYZDcjs.inputSpacingPx}px;
+    ${_chunkI5VWQRS4cjs.StyledSelect}, ${_chunkVXRMYWVTcjs.ToggleContainer} {
+      margin-top: ${selectMarginTop}px;
     }
 
     ${CardFormFieldLabel} {
-      margin-top: ${_chunk6N7XRYZDcjs.inputSpacingPx}px;
+      margin-top: ${_chunkHW7ECH4Ncjs.inputSpacingPx}px;
 
-      & + ${_chunkP4R7LALXcjs.StyledSelect} {
+      & + ${_chunkI5VWQRS4cjs.StyledSelect} {
         margin-top: ${fieldLabelMarginPx}px;
       }
     }
 
-    ${_chunkYZ2C4D6Ncjs.TextInputHalfRow} > ${_chunkP4R7LALXcjs.StyledSelect} {
+    ${_chunkXYPLDDUHcjs.TextInputHalfRow} > ${_chunkI5VWQRS4cjs.StyledSelect} {
       margin-top: 0;
     }
 
-    ${_chunk2VEWSENQcjs.LoadingWrapper} {
+    ${_chunkXMSQNWZKcjs.LoadingWrapper} {
       margin: 32px 0;
       * + * {
         margin-top: 0;
       }
     }
 
-    ${_chunkVXW4GOMOcjs.ButtonSelector.call(void 0, )} ${_chunk2VEWSENQcjs.LoadingWrapper} {
+    ${_chunkECFNSLYPcjs.ButtonSelector.call(void 0, )} ${_chunkXMSQNWZKcjs.LoadingWrapper} {
       margin: 0;
     }
 
-    ${_chunkOTVMB2IWcjs.StyledFileInput} {
+    ${_chunkL4K6LGDWcjs.StyledFileInput} {
       margin-top: 16px;
     }
 
@@ -484,8 +544,8 @@ var StyledCardFormStyle = ({
         margin-top: 24px;
       }
 
-      & > ${_chunkVXW4GOMOcjs.ButtonSelector.call(void 0, )}, & > ${_chunk6VA4SAHQcjs.select.call(void 0, CardFormNearButtonColumn)} {
-        ${_chunk6N7XRYZDcjs.formButtonTopMarginStyle}
+      & > ${_chunkECFNSLYPcjs.ButtonSelector.call(void 0, )}, & > ${_chunk6VA4SAHQcjs.select.call(void 0, CardFormNearButtonColumn)} {
+        ${formButtonTopMargin !== void 0 ? `margin-top: ${formButtonTopMargin}px;` : _chunkHW7ECH4Ncjs.formButtonTopMarginStyle}
       }
     }
   `;
@@ -495,7 +555,7 @@ var StyledCardFormDiv = _styled2.default.div(StyledCardFormStyle);
 var CardHeadline = _styled2.default.div`
   padding: 0 ${_chunkZUAO4DW3cjs.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 = _styled2.default.div`
   & + ${CardFormSubtitle} {
     margin-top: 12px;
   }
+
+  ${({ titleMarginLeft }) => titleMarginLeft !== void 0 && `margin-left: ${titleMarginLeft}px;`}
 `;
 function CardFormTextWithLink({
   text,
@@ -511,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: _chunkU35SY546cjs.mcBold, children: text }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: _chunkO6BZRC56cjs.mcBold, children: text }),
     " ",
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7VSNXYK4cjs.Link, { to, children: toText })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4DJ33XMZcjs.Link, { to, children: toText })
   ] });
 }
 function CardFormCheckboxParagraph({
@@ -522,7 +584,7 @@ function CardFormCheckboxParagraph({
   checked
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledCardFormCheckboxParagraph, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYIT3HB4Tcjs.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 })
   ] });
 }
@@ -542,7 +604,7 @@ var CardFormOption = ({
 ] });
 var StyledCardFormOption = _styled2.default.div`
   border: ${({ theme, selected }) => `${selected ? `2px solid ${theme.info}` : `1px solid ${theme.c1Neutral}`}`};
-  ${_chunkU35SY546cjs.standardBorderRadius.call(void 0, 8)}
+  ${_chunkO6BZRC56cjs.standardBorderRadius.call(void 0, 8)}
   cursor: pointer;
   margin-top: 10px;
   padding: ${({ selected }) => selected ? "15px" : "16px"};
@@ -551,7 +613,7 @@ var CardFormOptionLabel = _styled2.default.div`
   font-weight: bold;
 `;
 var CardFormOptionDescription = _styled2.default.p`
-  color: ${_chunkK7HWTEGPcjs.colors.gray40};
+  color: ${_chunkGICIJWP3cjs.colors.gray40};
   margin: 6px 0 0;
 `;
 function resolveCardFormProp(prop, kind, defaultKey, theme) {
@@ -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-6KEADEVM.js → chunk-PPMNMNW5.js}

@@ -1,32 +1,32 @@
-import {
-  UnstyledButton
-} from "./chunk-3HIDFTSK.js";
-import {
-  z
-} from "./chunk-55OQPFLF.js";
 import {
   setDefaultReactNodesTypography
-} from "./chunk-5A7SOR5D.js";
+} from "./chunk-R62M65Z7.js";
 import {
   toReactNodes
-} from "./chunk-BDL3A6DZ.js";
+} from "./chunk-E7KQDR6U.js";
 import {
   extend,
   flexCenter,
   pxToRems
-} from "./chunk-KKGZ47R3.js";
+} from "./chunk-YWNKHN46.js";
+import {
+  UnstyledButton
+} from "./chunk-BJP4OTMN.js";
+import {
+  z
+} from "./chunk-55OQPFLF.js";
 import {
   Icon
-} from "./chunk-YTKSEJHA.js";
+} from "./chunk-JWFDHULW.js";
 import {
   standardContentInset
-} from "./chunk-ANZUTQRP.js";
+} from "./chunk-HQN2LS2G.js";
 import {
   themeOr
-} from "./chunk-33OPRYWV.js";
+} from "./chunk-NF6LGARO.js";
 import {
   colors
-} from "./chunk-WAGTMEWB.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-PGJA2U3B.js → chunk-PSB345GM.js}

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

package/dist/{chunk-QWAPH5RV.cjs → chunk-PYHSJNMI.cjs}

@@ -6,7 +6,7 @@ var _chunkSFGLEWHWcjs = require('./chunk-SFGLEWHW.cjs');
 var _chunkB2MHM6CYcjs = require('./chunk-B2MHM6CY.cjs');
 
 
-var _chunkHEMGZE2Gcjs = require('./chunk-HEMGZE2G.cjs');
+var _chunkLDNG63AKcjs = require('./chunk-LDNG63AK.cjs');
 
 
 
@@ -24,7 +24,7 @@ function getPropDefaults(props) {
   return _chunkSFGLEWHWcjs.getPropDefaultsBase.call(void 0, props, { as: props.tag || "span" });
 }
 var StyledCode = _styled2.default.span`
-  ${({ theme, size, colorProp }) => _chunkHEMGZE2Gcjs.applyTypography.call(void 0, theme, "Code", size, colorProp)}
+  ${({ theme, size, colorProp }) => _chunkLDNG63AKcjs.applyTypography.call(void 0, theme, "Code", size, colorProp)}
   ${_chunkB2MHM6CYcjs.typographyStyles}
 `;
 

package/dist/{chunk-G5AXUILN.cjs → chunk-Q6NB3OIA.cjs}

@@ -8,8 +8,7 @@ function Phone({
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "svg",
     {
-      width: "24",
-      height: "24",
+      width: "100%",
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",

package/dist/{chunk-5LO7RI2D.cjs → chunk-QHNM7Q2K.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkSFVPZBMVcjs = require('./chunk-SFVPZBMV.cjs');
+var _chunkNN6GDACAcjs = require('./chunk-NN6GDACA.cjs');
 
 
-var _chunk6OSTNEFIcjs = require('./chunk-6OSTNEFI.cjs');
+var _chunkKOGW3LJCcjs = require('./chunk-KOGW3LJC.cjs');
 
 
-var _chunk4N5EXQIScjs = require('./chunk-4N5EXQIS.cjs');
+var _chunk4JJ5GJLEcjs = require('./chunk-4JJ5GJLE.cjs');
 
 
 
@@ -26,13 +26,13 @@ function TextIconAligner({
     size: (typographyProp == null ? void 0 : typographyProp.size) || "Small",
     color: (typographyProp == null ? void 0 : typographyProp.color) || "text"
   };
-  const nodesWithTypography = _chunkSFVPZBMVcjs.setDefaultReactNodesTypography.call(void 0, contentProp, {
+  const nodesWithTypography = _chunkNN6GDACAcjs.setDefaultReactNodesTypography.call(void 0, contentProp, {
     default: defaultTypography,
     link: _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, defaultTypography), { color: "link" })
   });
-  const content = _chunk6OSTNEFIcjs.toReactNodes.call(void 0, nodesWithTypography);
+  const content = _chunkKOGW3LJCcjs.toReactNodes.call(void 0, nodesWithTypography);
   const leftIconNode = leftIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk4N5EXQIScjs.Icon,
+    _chunk4JJ5GJLEcjs.Icon,
     {
       name: leftIcon.name,
       width: leftIcon.width ? leftIcon.width : 12,
@@ -41,7 +41,7 @@ function TextIconAligner({
     }
   ) : null;
   const rightIconNode = rightIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk4N5EXQIScjs.Icon,
+    _chunk4JJ5GJLEcjs.Icon,
     {
       name: rightIcon.name,
       width: rightIcon.width ? rightIcon.width : 12,