@plaidev/karte-action-sdk 1.1.249-28765727.0b93c1aa → 1.1.249-28767073.9402c9fc

package/dist/hydrate/index.es.d.ts

@@ -2457,9 +2457,13 @@ declare const BUTTON_ICON_ANGLE: {
     readonly row: "\u5DE6\u5074";
     readonly "row-reverse": "\u53F3\u5074";
 };
-type ButtonProps = CommonProps & ClickableProps & BorderProps & {
+type ButtonProps = CommonProps & ClickableProps & ShadowProps & BorderProps & {
     label?: string;
     size?: keyof typeof BUTTON_SIZE;
+    height?: Properties["height"];
+    paddingLeft?: Properties["paddingLeft"];
+    paddingRight?: Properties["paddingRight"];
+    fontSize?: Properties["fontSize"];
     theme?: keyof typeof BUTTON_THEME;
     round?: keyof typeof BUTTON_ROUND;
     isLink?: boolean;

package/dist/hydrate/index.es.js

@@ -14931,44 +14931,34 @@ class Icon extends SvelteComponent {
 
 const BUTTON_SIZE_STYLES = {
     extra_small: {
-        minHeight: '32px',
-        paddingInline: '12px',
+        height: '32px',
+        paddingLeft: '12px',
+        paddingRight: '12px',
         fontSize: '12px',
-        paddingBlock: '8px',
-        lineHeight: 1.5,
-        borderRadius: '4px',
     },
     small: {
-        minHeight: '36px',
-        paddingInline: '16px',
+        height: '36px',
+        paddingLeft: '16px',
+        paddingRight: '16px',
         fontSize: '13px',
-        paddingBlock: '8px',
-        lineHeight: 1.5,
-        borderRadius: '4px',
     },
     medium: {
-        minHeight: '40px',
-        paddingInline: '24px',
+        height: '40px',
+        paddingLeft: '24px',
+        paddingRight: '24px',
         fontSize: '14px',
-        paddingBlock: '8px',
-        lineHeight: 1.5,
-        borderRadius: '4px',
     },
     large: {
-        minHeight: '48px',
-        paddingInline: '32px',
+        height: '48px',
+        paddingLeft: '32px',
+        paddingRight: '32px',
         fontSize: '14px',
-        paddingBlock: '10px',
-        lineHeight: 1.5,
-        borderRadius: '4px',
     },
     extra_large: {
-        minHeight: '56px',
-        paddingInline: '40px',
-        fontSize: '17px',
-        paddingBlock: '12px',
-        lineHeight: 1.5,
-        borderRadius: '4px',
+        height: '56px',
+        paddingLeft: '40px',
+        paddingRight: '40px',
+        fontSize: '16px',
     },
 };
 const BUTTON_THEME_STYLES = {
@@ -15022,7 +15012,9 @@ const BUTTON_ROUND_STYLES = {
     none: {
         borderRadius: 0,
     },
-    default: {},
+    default: {
+        borderRadius: '4px',
+    },
     fulled: {
         borderRadius: '56px',
     },
@@ -15088,7 +15080,7 @@ function add_css$8(target) {
 	append_styles(target, "svelte-jar2a9", ".button{background-color:var(--bg-color)}.button:hover{background-color:var(--hover-bg-color)}.button-icon.svelte-jar2a9{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em}");
 }
 
-// (42:2) {#if props.isIcon && props.iconVariant}
+// (48:2) {#if props.isIcon && props.iconVariant}
 function create_if_block$5(ctx) {
 	let div;
 	let icon;
@@ -15154,7 +15146,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (41:0) <Clickable className="button" layerId={layerId} style={style} onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
+// (47:0) <Clickable className="button" layerId={layerId} style={style} onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
 function create_default_slot$4(ctx) {
 	let t0;
 	let span;
@@ -15264,7 +15256,7 @@ function create_fragment$9(ctx) {
 			if (dirty & /*props*/ 1) clickable_changes.eventName = /*props*/ ctx[0].eventName;
 			if (dirty & /*props*/ 1) clickable_changes.eventValue = /*props*/ ctx[0].eventValue;
 
-			if (dirty & /*$$scope, props*/ 33) {
+			if (dirty & /*$$scope, props*/ 65) {
 				clickable_changes.$$scope = { dirty, ctx };
 			}
 
@@ -15291,6 +15283,7 @@ function instance$9($$self, $$props, $$invalidate) {
 	let { props = {} } = $$props;
 	let { layerId = '' } = $$props;
 	const buttonThemeStyle = BUTTON_THEME_STYLES[props.theme ?? buttonPropsDefault.theme];
+	const buttonSizeStyle = BUTTON_SIZE_STYLES[props.size ?? buttonPropsDefault.size];
 
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
@@ -15318,14 +15311,19 @@ function instance$9($$self, $$props, $$invalidate) {
 				color: props.color ?? buttonThemeStyle.color,
 				fontWeight: props.fontWeight ?? buttonThemeStyle.fontWeight,
 				cursor: 'pointer',
-				...BUTTON_SIZE_STYLES[props.size ?? buttonPropsDefault.size],
+				lineHeight: 1.5,
 				...BUTTON_WRAP_STYLES[props.wrap ?? buttonPropsDefault.wrap],
 				...BUTTON_ROUND_STYLES[props.round ?? buttonPropsDefault.round],
 				...props.iconAngle
 				? { flexDirection: props.iconAngle }
 				: {},
+				height: props.height ?? buttonSizeStyle.height,
+				paddingLeft: props.paddingLeft ?? buttonSizeStyle.paddingLeft,
+				paddingRight: props.paddingRight ?? buttonSizeStyle.paddingRight,
+				fontSize: props.fontSize ?? buttonSizeStyle.fontSize,
 				...toCssCommon(props),
 				...toCssBorder(props),
+				...toCssShadow(props),
 				...variables
 			}));
 		}

package/dist/index.es.d.ts

@@ -2457,9 +2457,13 @@ declare const BUTTON_ICON_ANGLE: {
     readonly row: "\u5DE6\u5074";
     readonly "row-reverse": "\u53F3\u5074";
 };
-type ButtonProps = CommonProps & ClickableProps & BorderProps & {
+type ButtonProps = CommonProps & ClickableProps & ShadowProps & BorderProps & {
     label?: string;
     size?: keyof typeof BUTTON_SIZE;
+    height?: Properties["height"];
+    paddingLeft?: Properties["paddingLeft"];
+    paddingRight?: Properties["paddingRight"];
+    fontSize?: Properties["fontSize"];
     theme?: keyof typeof BUTTON_THEME;
     round?: keyof typeof BUTTON_ROUND;
     isLink?: boolean;

package/dist/index.es.js

@@ -13846,44 +13846,34 @@ class Icon extends SvelteComponent {
 
 const BUTTON_SIZE_STYLES = {
     extra_small: {
-        minHeight: '32px',
-        paddingInline: '12px',
+        height: '32px',
+        paddingLeft: '12px',
+        paddingRight: '12px',
         fontSize: '12px',
-        paddingBlock: '8px',
-        lineHeight: 1.5,
-        borderRadius: '4px',
     },
     small: {
-        minHeight: '36px',
-        paddingInline: '16px',
+        height: '36px',
+        paddingLeft: '16px',
+        paddingRight: '16px',
         fontSize: '13px',
-        paddingBlock: '8px',
-        lineHeight: 1.5,
-        borderRadius: '4px',
     },
     medium: {
-        minHeight: '40px',
-        paddingInline: '24px',
+        height: '40px',
+        paddingLeft: '24px',
+        paddingRight: '24px',
         fontSize: '14px',
-        paddingBlock: '8px',
-        lineHeight: 1.5,
-        borderRadius: '4px',
     },
     large: {
-        minHeight: '48px',
-        paddingInline: '32px',
+        height: '48px',
+        paddingLeft: '32px',
+        paddingRight: '32px',
         fontSize: '14px',
-        paddingBlock: '10px',
-        lineHeight: 1.5,
-        borderRadius: '4px',
     },
     extra_large: {
-        minHeight: '56px',
-        paddingInline: '40px',
-        fontSize: '17px',
-        paddingBlock: '12px',
-        lineHeight: 1.5,
-        borderRadius: '4px',
+        height: '56px',
+        paddingLeft: '40px',
+        paddingRight: '40px',
+        fontSize: '16px',
     },
 };
 const BUTTON_THEME_STYLES = {
@@ -13937,7 +13927,9 @@ const BUTTON_ROUND_STYLES = {
     none: {
         borderRadius: 0,
     },
-    default: {},
+    default: {
+        borderRadius: '4px',
+    },
     fulled: {
         borderRadius: '56px',
     },
@@ -14003,7 +13995,7 @@ function add_css$8(target) {
 	append_styles(target, "svelte-jar2a9", ".button{background-color:var(--bg-color)}.button:hover{background-color:var(--hover-bg-color)}.button-icon.svelte-jar2a9{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em}");
 }
 
-// (42:2) {#if props.isIcon && props.iconVariant}
+// (48:2) {#if props.isIcon && props.iconVariant}
 function create_if_block$5(ctx) {
 	let div;
 	let icon;
@@ -14059,7 +14051,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (41:0) <Clickable className="button" layerId={layerId} style={style} onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
+// (47:0) <Clickable className="button" layerId={layerId} style={style} onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
 function create_default_slot$4(ctx) {
 	let t0;
 	let span;
@@ -14158,7 +14150,7 @@ function create_fragment$9(ctx) {
 			if (dirty & /*props*/ 1) clickable_changes.eventName = /*props*/ ctx[0].eventName;
 			if (dirty & /*props*/ 1) clickable_changes.eventValue = /*props*/ ctx[0].eventValue;
 
-			if (dirty & /*$$scope, props*/ 33) {
+			if (dirty & /*$$scope, props*/ 65) {
 				clickable_changes.$$scope = { dirty, ctx };
 			}
 
@@ -14185,6 +14177,7 @@ function instance$9($$self, $$props, $$invalidate) {
 	let { props = {} } = $$props;
 	let { layerId = '' } = $$props;
 	const buttonThemeStyle = BUTTON_THEME_STYLES[props.theme ?? buttonPropsDefault.theme];
+	const buttonSizeStyle = BUTTON_SIZE_STYLES[props.size ?? buttonPropsDefault.size];
 
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
@@ -14212,14 +14205,19 @@ function instance$9($$self, $$props, $$invalidate) {
 				color: props.color ?? buttonThemeStyle.color,
 				fontWeight: props.fontWeight ?? buttonThemeStyle.fontWeight,
 				cursor: 'pointer',
-				...BUTTON_SIZE_STYLES[props.size ?? buttonPropsDefault.size],
+				lineHeight: 1.5,
 				...BUTTON_WRAP_STYLES[props.wrap ?? buttonPropsDefault.wrap],
 				...BUTTON_ROUND_STYLES[props.round ?? buttonPropsDefault.round],
 				...props.iconAngle
 				? { flexDirection: props.iconAngle }
 				: {},
+				height: props.height ?? buttonSizeStyle.height,
+				paddingLeft: props.paddingLeft ?? buttonSizeStyle.paddingLeft,
+				paddingRight: props.paddingRight ?? buttonSizeStyle.paddingRight,
+				fontSize: props.fontSize ?? buttonSizeStyle.fontSize,
 				...toCssCommon(props),
 				...toCssBorder(props),
+				...toCssShadow(props),
 				...variables
 			}));
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.249-28765727.0b93c1aa",
+  "version": "1.1.249-28767073.9402c9fc",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",