@lightsparkdev/ui 1.0.10 → 1.0.11

package/dist/{chunk-NGSQ2OOV.js → chunk-NCLVA6JY.js}

@@ -7,13 +7,13 @@ import {
 } from "./chunk-VI6WTKMV.js";
 import {
   rootFontSizePx
-} from "./chunk-YZM4ALKD.js";
-import {
-  getFontColor
-} from "./chunk-O42E7NAG.js";
+} from "./chunk-YBJVTNAP.js";
 import {
   isString
 } from "./chunk-EDN2QDCB.js";
+import {
+  getFontColor
+} from "./chunk-HYUF4RXZ.js";
 
 // src/components/Icon/Icon.tsx
 import styled from "@emotion/styled";
@@ -24,15 +24,15 @@ function Icon({
   width,
   tutorialStep,
   id,
-  mr = 0,
-  ml = 0,
+  mr: mrProp = 0,
+  ml: mlProp = 0,
   color = void 0,
   verticalAlign = "middle"
 }) {
   const IconComponent = icons_exports[name] || null;
   const w = parseFloat((width / rootFontSizePx).toFixed(2));
-  const mrRems = parseFloat((mr / rootFontSizePx).toFixed(2));
-  const mlRems = parseFloat((ml / rootFontSizePx).toFixed(2));
+  const mr = typeof mrProp === "number" ? `${parseFloat((mrProp / rootFontSizePx).toFixed(2))}em` : mrProp;
+  const ml = typeof mlProp === "number" ? `${parseFloat((mlProp / rootFontSizePx).toFixed(2))}em` : mlProp;
   const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / rootFontSizePx).toFixed(2));
   return /* @__PURE__ */ jsx(
     IconContainer,
@@ -40,8 +40,8 @@ function Icon({
       id,
       className,
       w,
-      mr: mrRems,
-      ml: mlRems,
+      mr,
+      ml,
       verticalAlign: va,
       fontColor: color,
       "data-tutorial-tip": tutorialStep == null ? void 0 : tutorialStep.toString(),
@@ -56,8 +56,8 @@ var IconContainer = styled.span`
     width: ${w}em;
     /* ensure no shrink in flex containers: */
     min-width: ${w}em;
-    ${mr ? `margin-right: ${mr}em;` : ""}
-    ${ml ? `margin-left: ${ml}em;` : ""}
+    ${mr ? `margin-right: ${mr};` : ""}
+    ${ml ? `margin-left: ${ml};` : ""}
   `}
 
   vertical-align: ${({ verticalAlign }) => isString(verticalAlign) ? verticalAlign : `${verticalAlign}em`};

package/dist/{chunk-RSTCESAL.js → chunk-NHRJSG5K.js}

@@ -1,12 +1,12 @@
 import {
   Tooltip
-} from "./chunk-2KHMKDGF.js";
+} from "./chunk-EVYCZKU3.js";
 import {
   toReactNodes
-} from "./chunk-XSMF72UT.js";
+} from "./chunk-2I22MYIY.js";
 import {
   Icon
-} from "./chunk-NGSQ2OOV.js";
+} from "./chunk-NCLVA6JY.js";
 
 // src/components/InfoIconTooltip.tsx
 import { Fragment } from "react";

package/dist/{chunk-4VRON4MF.cjs → chunk-NL2PRKWN.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkNCH72LUBcjs = require('./chunk-NCH72LUB.cjs');
+var _chunkQ7C5LR6Icjs = require('./chunk-Q7C5LR6I.cjs');
 
 
-var _chunkGDLQ54TNcjs = require('./chunk-GDLQ54TN.cjs');
+var _chunk36SDWEWYcjs = require('./chunk-36SDWEWY.cjs');
 
 
-var _chunkJMIYMECJcjs = require('./chunk-JMIYMECJ.cjs');
+var _chunkUMU7TYANcjs = require('./chunk-UMU7TYAN.cjs');
 
 // src/components/TextIconAligner.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
@@ -27,13 +27,13 @@ function TextIconAligner({
     text: defaultTypography,
     nextLink: defaultTypography
   };
-  const nodesWithTypography = _chunkNCH72LUBcjs.setDefaultReactNodesTypography.call(void 0, 
+  const nodesWithTypography = _chunkQ7C5LR6Icjs.setDefaultReactNodesTypography.call(void 0, 
     contentProp,
     defaultTypographyMap
   );
-  const content = _chunkGDLQ54TNcjs.toReactNodes.call(void 0, nodesWithTypography);
+  const content = _chunk36SDWEWYcjs.toReactNodes.call(void 0, nodesWithTypography);
   const leftIconNode = leftIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkJMIYMECJcjs.Icon,
+    _chunkUMU7TYANcjs.Icon,
     {
       name: leftIcon.name,
       width: leftIcon.width ? leftIcon.width : 12,
@@ -42,7 +42,7 @@ function TextIconAligner({
     }
   ) : null;
   const rightIconNode = rightIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkJMIYMECJcjs.Icon,
+    _chunkUMU7TYANcjs.Icon,
     {
       name: rightIcon.name,
       width: rightIcon.width ? rightIcon.width : 12,

package/dist/{chunk-LE5UZLTM.cjs → chunk-NPK4DLGQ.cjs}

@@ -7,17 +7,17 @@
 
 
 
-var _chunkJPRA3J5Ccjs = require('./chunk-JPRA3J5C.cjs');
+var _chunkBCPM2M3Ycjs = require('./chunk-BCPM2M3Y.cjs');
 
 
 var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkJMIYMECJcjs = require('./chunk-JMIYMECJ.cjs');
+var _chunkUMU7TYANcjs = require('./chunk-UMU7TYAN.cjs');
 
 
 
-var _chunkWKRK5OVEcjs = require('./chunk-WKRK5OVE.cjs');
+var _chunk7EIZIKLRcjs = require('./chunk-7EIZIKLR.cjs');
 
 
 
@@ -49,24 +49,24 @@ function Select(_a) {
   const styles = {
     container: (styles2, state) => {
       return _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, styles2), {
-        width: _chunkJPRA3J5Ccjs.fieldWidth,
-        maxWidth: _chunkJPRA3J5Ccjs.maxFieldWidth,
+        width: _chunkBCPM2M3Ycjs.fieldWidth,
+        maxWidth: _chunkBCPM2M3Ycjs.maxFieldWidth,
         zIndex: _chunkZU72XWNEcjs.z.select
       });
     },
     control: (styles2, state) => {
       return _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, styles2), {
         transition: "none",
-        padding: state.menuIsOpen || state.isFocused ? `${_chunkJPRA3J5Ccjs.textInputPaddingPx - 1}px` : _chunkJPRA3J5Ccjs.textInputPadding,
+        padding: state.menuIsOpen || state.isFocused ? `${_chunkBCPM2M3Ycjs.textInputPaddingPx - 1}px` : _chunkBCPM2M3Ycjs.textInputPadding,
         boxShadow: "none",
         background: theme.bg,
         minHeight: 0,
         fontSize: 14,
         borderWidth: state.menuIsOpen || state.isFocused ? "2px" : "1px",
         "&:hover": {
-          borderColor: state.menuIsOpen ? _chunkJPRA3J5Ccjs.textInputBorderColorFocused.call(void 0, { theme }) : _chunkJPRA3J5Ccjs.textInputBorderColor.call(void 0, { theme })
+          borderColor: state.menuIsOpen ? _chunkBCPM2M3Ycjs.textInputBorderColorFocused.call(void 0, { theme }) : _chunkBCPM2M3Ycjs.textInputBorderColor.call(void 0, { theme })
         },
-        borderColor: state.menuIsOpen || state.isFocused ? _chunkJPRA3J5Ccjs.textInputBorderColorFocused.call(void 0, { theme }) : _chunkJPRA3J5Ccjs.textInputBorderColor.call(void 0, { theme })
+        borderColor: state.menuIsOpen || state.isFocused ? _chunkBCPM2M3Ycjs.textInputBorderColorFocused.call(void 0, { theme }) : _chunkBCPM2M3Ycjs.textInputBorderColor.call(void 0, { theme })
       });
     },
     indicatorsContainer: (styles2) => _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, styles2), {
@@ -89,13 +89,13 @@ function Select(_a) {
     option: (styles2, props) => {
       const optionStyles = getOptionStyles ? getOptionStyles(styles2, props) : {};
       return _chunkYM5JDZDQcjs.__spreadValues.call(void 0, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, styles2), {
-        color: props.isFocused ? _chunkWKRK5OVEcjs.getColor.call(void 0, theme, _chunkJPRA3J5Ccjs.defaultTextInputTypography.color) : props.isDisabled ? _chunkJPRA3J5Ccjs.textInputPlaceholderColor.call(void 0, { theme }) : _chunkWKRK5OVEcjs.getColor.call(void 0, theme, _chunkJPRA3J5Ccjs.defaultTextInputTypography.color),
+        color: props.isFocused ? _chunk7EIZIKLRcjs.getColor.call(void 0, theme, _chunkBCPM2M3Ycjs.defaultTextInputTypography.color) : props.isDisabled ? _chunkBCPM2M3Ycjs.textInputPlaceholderColor.call(void 0, { theme }) : _chunk7EIZIKLRcjs.getColor.call(void 0, theme, _chunkBCPM2M3Ycjs.defaultTextInputTypography.color),
         fontWeight: 600,
         cursor: "pointer",
-        backgroundColor: props.isFocused ? _chunkWKRK5OVEcjs.themeOr.call(void 0, theme.c05Neutral, theme.c2Neutral)({ theme }) : theme.bg,
+        backgroundColor: props.isFocused ? _chunk7EIZIKLRcjs.themeOr.call(void 0, theme.c05Neutral, theme.c2Neutral)({ theme }) : theme.bg,
         WebkitTapHighlightColor: theme.c1Neutral,
         "&:active": {
-          backgroundColor: _chunkWKRK5OVEcjs.themeOr.call(void 0, 
+          backgroundColor: _chunk7EIZIKLRcjs.themeOr.call(void 0, 
             theme.c05Neutral,
             theme.c5Neutral
           )({ theme })
@@ -134,7 +134,7 @@ function Select(_a) {
         menuPortalTarget: document.body,
         ref: selectRef,
         components: {
-          DropdownIndicator: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJMIYMECJcjs.Icon, { name: "Chevron", width: 16 })
+          DropdownIndicator: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUMU7TYANcjs.Icon, { name: "Chevron", width: 16 })
           // Option: (option) => {
           //   return <div>Option</div>;
           // },

package/dist/{chunk-NCQUX52Z.cjs → chunk-NTOIQXCS.cjs}

@@ -1,46 +1,46 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkLE5UZLTMcjs = require('./chunk-LE5UZLTM.cjs');
+var _chunkNPK4DLGQcjs = require('./chunk-NPK4DLGQ.cjs');
 
 
-var _chunkDISSWFSScjs = require('./chunk-DISSWFSS.cjs');
+var _chunkHEPQ6OV4cjs = require('./chunk-HEPQ6OV4.cjs');
 
 
-var _chunkKB4YCFWXcjs = require('./chunk-KB4YCFWX.cjs');
+var _chunkB5N2PM7Ecjs = require('./chunk-B5N2PM7E.cjs');
 
 
-var _chunkC5EEHCIJcjs = require('./chunk-C5EEHCIJ.cjs');
+var _chunkRDNRIMXDcjs = require('./chunk-RDNRIMXD.cjs');
 
 
-var _chunk4CFGJROVcjs = require('./chunk-4CFGJROV.cjs');
+var _chunkO64MW4Z4cjs = require('./chunk-O64MW4Z4.cjs');
 
 
-var _chunkXHLL5XVNcjs = require('./chunk-XHLL5XVN.cjs');
+var _chunkDOP5TYRDcjs = require('./chunk-DOP5TYRD.cjs');
 
 
 
-var _chunkJPRA3J5Ccjs = require('./chunk-JPRA3J5C.cjs');
+var _chunkBCPM2M3Ycjs = require('./chunk-BCPM2M3Y.cjs');
 
 
-var _chunkYUALIPXRcjs = require('./chunk-YUALIPXR.cjs');
+var _chunk54JF52UOcjs = require('./chunk-54JF52UO.cjs');
 
 
-var _chunk6IU4OQOCcjs = require('./chunk-6IU4OQOC.cjs');
+var _chunkQ3F7S3R3cjs = require('./chunk-Q3F7S3R3.cjs');
 
 
-var _chunk7LOKZM7Vcjs = require('./chunk-7LOKZM7V.cjs');
+var _chunkAPQWRIH6cjs = require('./chunk-APQWRIH6.cjs');
 
 
-var _chunkMWHLGPKOcjs = require('./chunk-MWHLGPKO.cjs');
+var _chunkFDL4732Lcjs = require('./chunk-FDL4732L.cjs');
 
 
-var _chunkKEO4UBBQcjs = require('./chunk-KEO4UBBQ.cjs');
+var _chunkUL73AXJPcjs = require('./chunk-UL73AXJP.cjs');
 
 
-var _chunkNCH72LUBcjs = require('./chunk-NCH72LUB.cjs');
+var _chunkQ7C5LR6Icjs = require('./chunk-Q7C5LR6I.cjs');
 
 
-var _chunkGDLQ54TNcjs = require('./chunk-GDLQ54TN.cjs');
+var _chunk36SDWEWYcjs = require('./chunk-36SDWEWY.cjs');
 
 
 var _chunk4WKQPWLIcjs = require('./chunk-4WKQPWLI.cjs');
@@ -50,17 +50,24 @@ var _chunk4WKQPWLIcjs = require('./chunk-4WKQPWLI.cjs');
 
 
 
-var _chunkDIMJISMHcjs = require('./chunk-DIMJISMH.cjs');
+var _chunkOQEP7VDDcjs = require('./chunk-OQEP7VDD.cjs');
 
 
-var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
+var _chunk4HIPKMRHcjs = require('./chunk-4HIPKMRH.cjs');
+
 
+var _chunk7EIZIKLRcjs = require('./chunk-7EIZIKLR.cjs');
 
-var _chunkQE67LKK5cjs = require('./chunk-QE67LKK5.cjs');
+
+var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
 var _chunkCFG65CGCcjs = require('./chunk-CFG65CGC.cjs');
 
+
+
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
+
 // src/components/CardForm/CardForm.tsx
 var _react = require('@emotion/react');
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -104,24 +111,65 @@ var descriptionTypography = {
     }
   }
 };
-function resolveProps(args) {
-  const isPrimary = args.kind === "primary";
-  const isSecondary = args.kind === "secondary";
-  const isTertiary = args.kind === "tertiary";
-  const paddingY = isPrimary || isTertiary ? 56 : 40;
-  const paddingX = isSecondary || isTertiary ? 40 : 56;
-  const textAlign = args.textAlign || "left";
-  const shadow = isPrimary ? "soft" : isTertiary ? "hard" : "none";
-  const borderRadius = isSecondary ? 8 : 24;
-  const border = isSecondary;
-  return {
+function resolveProps(args, theme) {
+  const paddingY = resolveCardFormProp(void 0, args.kind, "paddingY", theme);
+  const paddingX = resolveCardFormProp(void 0, args.kind, "paddingX", theme);
+  const textAlign = resolveCardFormProp(
+    args.textAlign,
+    args.kind,
+    "textAlign",
+    theme
+  );
+  const shadow = resolveCardFormProp(args.shadow, args.kind, "shadow", theme);
+  const borderRadius = resolveCardFormProp(
+    void 0,
+    args.kind,
+    "borderRadius",
+    theme
+  );
+  const borderWidth = resolveCardFormProp(
+    void 0,
+    args.kind,
+    "borderWidth",
+    theme
+  );
+  const borderColor = resolveCardFormProp(
+    void 0,
+    args.kind,
+    "borderColor",
+    theme
+  );
+  const backgroundColor = resolveCardFormProp(
+    void 0,
+    args.kind,
+    "backgroundColor",
+    theme
+  );
+  const smBackgroundColor = resolveCardFormProp(
+    void 0,
+    args.kind,
+    "smBackgroundColor",
+    theme
+  );
+  const smBorderWidth = resolveCardFormProp(
+    void 0,
+    args.kind,
+    "smBorderWidth",
+    theme
+  );
+  const props = {
     paddingY,
     paddingX,
     shadow,
     borderRadius,
-    border,
-    textAlign
+    borderColor,
+    borderWidth,
+    textAlign,
+    backgroundColor,
+    smBackgroundColor,
+    smBorderWidth
   };
+  return props;
 }
 function CardForm({
   children,
@@ -136,10 +184,26 @@ function CardForm({
   hasChildForm,
   wide = false,
   kind = "primary",
+  shadow: shadowProp,
   textAlign: textAlignProp,
   belowFormContent
 }) {
-  const { paddingY, paddingX, shadow, borderRadius, border, textAlign } = resolveProps({ kind, textAlign: textAlignProp });
+  const theme = _react.useTheme.call(void 0, );
+  const {
+    paddingY,
+    paddingX,
+    shadow,
+    borderRadius,
+    borderWidth,
+    borderColor,
+    textAlign,
+    backgroundColor,
+    smBackgroundColor,
+    smBorderWidth
+  } = resolveProps(
+    { kind, textAlign: textAlignProp, shadow: shadowProp },
+    theme
+  );
   const onSubmitForm = _react3.useCallback.call(void 0, 
     (e) => {
       e.preventDefault();
@@ -152,12 +216,12 @@ function CardForm({
     },
     [onSubmit, disabled]
   );
-  const formattedDescription = description ? _chunkNCH72LUBcjs.toReactNodesWithTypographyMap.call(void 0, description, descriptionTypography[kind]) : null;
-  const belowFormContentNodes = belowFormContent ? _chunkGDLQ54TNcjs.toReactNodes.call(void 0, belowFormContent) : null;
+  const formattedDescription = description ? _chunkQ7C5LR6Icjs.toReactNodesWithTypographyMap.call(void 0, description, descriptionTypography[kind]) : null;
+  const belowFormContentNodes = belowFormContent ? _chunk36SDWEWYcjs.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, 
-      _chunkDISSWFSScjs.Headline,
+      _chunkHEPQ6OV4cjs.Headline,
       {
         content: [
           title,
@@ -169,34 +233,21 @@ function CardForm({
     formattedDescription && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardFormSubtitle, { children: formattedDescription }),
     children
   ] });
+  const commonProps = {
+    wide,
+    shadow,
+    borderRadius,
+    borderWidth,
+    borderColor,
+    textAlign,
+    paddingX,
+    paddingY,
+    backgroundColor,
+    smBackgroundColor,
+    smBorderWidth
+  };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, CardFormContainer, { children: [
-    hasChildForm ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      StyledCardFormDiv,
-      {
-        wide,
-        shadow,
-        borderRadius,
-        border,
-        textAlign,
-        paddingY,
-        paddingX,
-        children: content
-      }
-    ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      StyledCardForm,
-      {
-        wide,
-        onSubmit: onSubmitForm,
-        shadow,
-        borderRadius,
-        border,
-        textAlign,
-        paddingY,
-        paddingX,
-        noValidate: true,
-        children: content
-      }
-    ),
+    hasChildForm ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledCardFormDiv, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, commonProps), { children: content })) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledCardForm, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, { onSubmit: onSubmitForm, noValidate: true }, commonProps), { children: content })),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BelowCardFormContent, { children: belowFormContentNodes })
   ] });
 }
@@ -229,7 +280,7 @@ var CardFormButtonRow = _styled2.default.div`
   justify === "center" ? "center" : "left"
 )};
   margin-top: 32px;
-  ${_chunk7LOKZM7Vcjs.ButtonSelector.call(void 0, "* + ")} {
+  ${_chunkAPQWRIH6cjs.ButtonSelector.call(void 0, "* + ")} {
     margin-left: 10px;
   }
 
@@ -240,16 +291,16 @@ var CardFormButtonRow = _styled2.default.div`
 var fieldLabelMarginPx = 12;
 var CardFormFieldLabel = _styled2.default.label`
   display: block;
-  margin-top: ${_chunkJPRA3J5Ccjs.inputSpacingPx}px;
+  margin-top: ${_chunkBCPM2M3Ycjs.inputSpacingPx}px;
   color: ${({ theme }) => theme.text};
-  font-size: ${_chunk6IU4OQOCcjs.pxToRems.call(void 0, 14)};
+  font-size: ${_chunkQ3F7S3R3cjs.pxToRems.call(void 0, 14)};
   font-weight: 700;
   & + * {
     margin-top: ${fieldLabelMarginPx}px;
   }
 `;
 function CardFormDataFieldValue({ text }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledCardFormDataFieldValue, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkC5EEHCIJcjs.ClipboardTextField, { value: text, icon: true, iconSide: "right" }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledCardFormDataFieldValue, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRDNRIMXDcjs.ClipboardTextField, { value: text, icon: true, iconSide: "right" }) });
 }
 var StyledCardFormDataFieldValue = _styled2.default.div`
   margin-top: 4px;
@@ -283,12 +334,12 @@ var formInset = ({ wide, paddingX, paddingY }) => _react.css`
     padding: 0;
   `)}
 
-  ${_chunkDIMJISMHcjs.standardContentInset.smCSS}
+  ${_chunkOQEP7VDDcjs.standardContentInset.smCSS}
 
   & ${CardFormFullWidth}, & ${CardFormFullTopContent} {
     ${_chunkKW3JYLRIcjs.bp.sm(`
-      width: calc(100% + ${_chunkDIMJISMHcjs.standardContentInset.smPx * 2}px);
-      margin-left: -${_chunkDIMJISMHcjs.standardContentInset.smPx}px;
+      width: calc(100% + ${_chunkOQEP7VDDcjs.standardContentInset.smPx * 2}px);
+      margin-left: -${_chunkOQEP7VDDcjs.standardContentInset.smPx}px;
     `)}
 
     ${_chunkKW3JYLRIcjs.bp.minSm(`
@@ -308,22 +359,30 @@ var StyledCardFormStyle = ({
   wide,
   shadow,
   borderRadius,
-  border,
+  borderWidth,
+  borderColor,
   textAlign,
   paddingX,
-  paddingY
+  paddingY,
+  backgroundColor,
+  smBackgroundColor,
+  smBorderWidth
 }) => {
   return _react.css`
     ${formInset({ wide, paddingX, paddingY })}
-    ${shadow === "soft" ? _chunkDIMJISMHcjs.standardCardShadow : shadow === "hard" ? _chunkDIMJISMHcjs.standardCardShadowHard : ""}
+    ${shadow === "soft" ? _chunkOQEP7VDDcjs.standardCardShadow : shadow === "hard" ? _chunkOQEP7VDDcjs.standardCardShadowHard : ""}
 
-    background-color: ${theme.bg};
     position: relative;
     height: 100%;
-    ${border ? `border: 1px solid ${theme.vlcNeutral};` : ""}
+    border-style: solid;
+    border-width: ${borderWidth}px;
+    border-color: ${_chunk7EIZIKLRcjs.getColor.call(void 0, theme, borderColor)};
+    background-color: ${_chunk7EIZIKLRcjs.getColor.call(void 0, theme, backgroundColor)};
 
     ${_chunkKW3JYLRIcjs.bp.sm(`
       box-shadow: none;
+      background-color: ${_chunk7EIZIKLRcjs.getColor.call(void 0, theme, smBackgroundColor)};
+      border-width: ${smBorderWidth}px;
     `)}
 
     ${_chunkKW3JYLRIcjs.bp.minSm(`
@@ -338,40 +397,40 @@ var StyledCardFormStyle = ({
       margin-top: 40px !important;
     }
 
-    ${CardFormButtonRow}, ${_chunkYUALIPXRcjs.StyledButtonRow} {
-      ${_chunk7LOKZM7Vcjs.ButtonSelector.call(void 0, )} {
+    ${CardFormButtonRow}, ${_chunk54JF52UOcjs.StyledButtonRow} {
+      ${_chunkAPQWRIH6cjs.ButtonSelector.call(void 0, )} {
         margin-top: 0;
       }
     }
 
-    ${_chunkLE5UZLTMcjs.StyledSelect}, ${_chunkXHLL5XVNcjs.ToggleContainer} {
-      margin-top: ${_chunkJPRA3J5Ccjs.inputSpacingPx}px;
+    ${_chunkNPK4DLGQcjs.StyledSelect}, ${_chunkDOP5TYRDcjs.ToggleContainer} {
+      margin-top: ${_chunkBCPM2M3Ycjs.inputSpacingPx}px;
     }
 
     ${CardFormFieldLabel} {
-      margin-top: ${_chunkJPRA3J5Ccjs.inputSpacingPx}px;
+      margin-top: ${_chunkBCPM2M3Ycjs.inputSpacingPx}px;
 
-      & + ${_chunkLE5UZLTMcjs.StyledSelect} {
+      & + ${_chunkNPK4DLGQcjs.StyledSelect} {
         margin-top: ${fieldLabelMarginPx}px;
       }
     }
 
-    ${_chunk4CFGJROVcjs.TextInputHalfRow} > ${_chunkLE5UZLTMcjs.StyledSelect} {
+    ${_chunkO64MW4Z4cjs.TextInputHalfRow} > ${_chunkNPK4DLGQcjs.StyledSelect} {
       margin-top: 0;
     }
 
-    ${_chunkMWHLGPKOcjs.LoadingWrapper} {
+    ${_chunkFDL4732Lcjs.LoadingWrapper} {
       margin: 32px 0;
       * + * {
         margin-top: 0;
       }
     }
 
-    ${_chunk7LOKZM7Vcjs.ButtonSelector.call(void 0, )} ${_chunkMWHLGPKOcjs.LoadingWrapper} {
+    ${_chunkAPQWRIH6cjs.ButtonSelector.call(void 0, )} ${_chunkFDL4732Lcjs.LoadingWrapper} {
       margin: 0;
     }
 
-    ${_chunkKB4YCFWXcjs.StyledFileInput} {
+    ${_chunkB5N2PM7Ecjs.StyledFileInput} {
       margin-top: 16px;
     }
 
@@ -380,8 +439,8 @@ var StyledCardFormStyle = ({
         margin-top: 24px;
       }
 
-      & > ${_chunk7LOKZM7Vcjs.ButtonSelector.call(void 0, )} {
-        ${_chunkJPRA3J5Ccjs.formButtonTopMarginStyle}
+      & > ${_chunkAPQWRIH6cjs.ButtonSelector.call(void 0, )} {
+        ${_chunkBCPM2M3Ycjs.formButtonTopMarginStyle}
       }
     }
   `;
@@ -405,9 +464,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: _chunkDIMJISMHcjs.mcBold, children: text }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: _chunkOQEP7VDDcjs.mcBold, children: text }),
     " ",
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQE67LKK5cjs.Link, { to, children: toText })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4HIPKMRHcjs.Link, { to, children: toText })
   ] });
 }
 function CardFormCheckboxParagraph({
@@ -416,7 +475,7 @@ function CardFormCheckboxParagraph({
   checked
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledCardFormCheckboxParagraph, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKEO4UBBQcjs.Checkbox, { checked, onChange, alignItems: "flex-start" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUL73AXJPcjs.Checkbox, { checked, onChange, alignItems: "flex-start" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardFormCheckboxParagraphText, { onClick: () => onChange(!checked), children })
   ] });
 }
@@ -436,7 +495,7 @@ var CardFormOption = ({
 ] });
 var StyledCardFormOption = _styled2.default.div`
   border: ${({ theme, selected }) => `${selected ? `2px solid ${theme.info}` : `1px solid ${theme.c1Neutral}`}`};
-  ${_chunkDIMJISMHcjs.standardBorderRadius.call(void 0, 8)}
+  ${_chunkOQEP7VDDcjs.standardBorderRadius.call(void 0, 8)}
   cursor: pointer;
   margin-top: 10px;
   padding: ${({ selected }) => selected ? "15px" : "16px"};
@@ -448,6 +507,14 @@ var CardFormOptionDescription = _styled2.default.p`
   color: ${_chunkCFG65CGCcjs.colors.gray40};
   margin: 6px 0 0;
 `;
+function resolveCardFormProp(prop, kind, defaultKey, theme) {
+  var _a;
+  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]
+  );
+}
 
 
 

package/dist/{chunk-E2MVN4UE.cjs → chunk-NTVBNQYA.cjs}

@@ -2,7 +2,7 @@
 
 
 
-var _chunkJPRA3J5Ccjs = require('./chunk-JPRA3J5C.cjs');
+var _chunkBCPM2M3Ycjs = require('./chunk-BCPM2M3Y.cjs');
 
 // src/components/TextArea.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -24,7 +24,7 @@ function TextArea({
   readOnly = false
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
-    label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJPRA3J5Ccjs.Label, { children: label }),
+    label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBCPM2M3Ycjs.Label, { children: label }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       StyledTextArea,
       {
@@ -40,11 +40,11 @@ function TextArea({
         readOnly
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJPRA3J5Ccjs.InputSubtext, { text: error || hint })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBCPM2M3Ycjs.InputSubtext, { text: error || hint })
   ] });
 }
 var StyledTextArea = _styled2.default.textarea`
-  ${_chunkJPRA3J5Ccjs.textInputStyle}
+  ${_chunkBCPM2M3Ycjs.textInputStyle}
   resize: none;
   min-height: ${({ minHeight }) => typeof minHeight === "number" ? `${minHeight}px` : "initial"};
 `;