@plaidev/karte-action-sdk 1.1.253 → 1.1.254

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

@@ -2493,7 +2493,7 @@ declare const BUTTON_SIZE_STYLES: PropStyles<ButtonProps, "size">;
 declare const BUTTON_THEME_STYLES: PropStyles<ButtonProps, "theme">;
 declare const BUTTON_ROUND_STYLES: PropStyles<ButtonProps, "round">;
 declare const BUTTON_WRAP_STYLES: PropStyles<ButtonProps, "wrap">;
-type ButtonOutlinedProps = CommonProps & ClickableProps & WithIconProps & LinkProps & BorderProps & {
+type ButtonOutlinedProps = CommonProps & ClickableProps & ShadowProps & WithIconProps & LinkProps & BorderProps & {
     label?: string;
     // size
     size?: keyof typeof BUTTON_SIZE;

package/dist/hydrate/index.es.js

@@ -15058,44 +15058,34 @@ const buttonOutlinedPropsDefault = {
 
 const BUTTON_OUTLINED_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_OUTLINED_THEME_STYLES = {
@@ -15132,7 +15122,9 @@ const BUTTON_OUTLINED_ROUND_STYLES = {
     none: {
         borderRadius: 0,
     },
-    default: {},
+    default: {
+        borderRadius: '4px',
+    },
     fulled: {
         borderRadius: '56px',
     },
@@ -15152,7 +15144,7 @@ function add_css$9(target) {
 	append_styles(target, "svelte-1ogxph4", ".button-outlined.svelte-1ogxph4{display:inline-flex;gap:0.65em;align-items:center;justify-content:center;text-decoration:none;outline:0;border-width:1px;border-style:solid;line-height:1.5;transition:background-color 0.12s, border-color 0.12s, color 0.12s;cursor:pointer;background-color:#ffffff}.button-outlined.svelte-1ogxph4:hover{background-color:#f6f6f6}.button-outlined-icon.svelte-1ogxph4{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em}");
 }
 
-// (37:2) {#if props.isIcon && props.iconVariant}
+// (42:2) {#if props.isIcon && props.iconVariant}
 function create_if_block$5(ctx) {
 	let div;
 	let icon;
@@ -15218,7 +15210,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (29:0) <svelte:element   {...attributes}   this={element}   class="button-outlined"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
+// (34:0) <svelte:element   {...attributes}   this={element}   class="button-outlined"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
 function create_dynamic_element$5(ctx) {
 	let svelte_element;
 	let t0;
@@ -15408,6 +15400,7 @@ function instance$a($$self, $$props, $$invalidate) {
 	let { layerId = '' } = $$props;
 	const { attributes, element, handleClick } = useClickable(props);
 	const buttonThemeStyle = BUTTON_OUTLINED_THEME_STYLES[props.theme ?? buttonOutlinedPropsDefault.theme];
+	const buttonSizeStyle = BUTTON_OUTLINED_SIZE_STYLES[props.size ?? buttonOutlinedPropsDefault.size];
 
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
@@ -15421,14 +15414,18 @@ function instance$a($$self, $$props, $$invalidate) {
 				color: props.color ?? buttonThemeStyle.backgroundColor,
 				borderColor: props.color ?? buttonThemeStyle.backgroundColor,
 				fontWeight: props.fontWeight ?? 'bold',
-				...BUTTON_OUTLINED_SIZE_STYLES[props.size ?? buttonOutlinedPropsDefault.size],
 				...BUTTON_OUTLINED_WRAP_STYLES[props.wrap ?? buttonOutlinedPropsDefault.wrap],
 				...BUTTON_OUTLINED_ROUND_STYLES[props.round ?? buttonOutlinedPropsDefault.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)
+				...toCssBorder(props),
+				...toCssShadow(props)
 			}));
 		}
 	};
@@ -16390,7 +16387,7 @@ class Image extends SvelteComponent {
 /* src/components-flex/layout/Layout.svelte generated by Svelte v3.53.1 */
 
 function add_css$5(target) {
-	append_styles(target, "svelte-1w1oa9", ".layout.svelte-1w1oa9{text-decoration:none;color:inherit}.layout[data-clickable=true].svelte-1w1oa9{cursor:pointer}");
+	append_styles(target, "svelte-1tjo4al", ".layout.svelte-1tjo4al{text-decoration:none;color:inherit}.layout[data-clickable=true].svelte-1tjo4al{cursor:pointer}.layout[data-clickable=true].svelte-1tjo4al:hover{opacity:0.8}");
 }
 
 // (27:0) <svelte:element   {...attributes}   this="div"   class="layout"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
@@ -16440,7 +16437,7 @@ function create_dynamic_element$1(ctx) {
 				set_attributes(svelte_element, svelte_element_data);
 			}
 
-			toggle_class(svelte_element, "svelte-1w1oa9", true);
+			toggle_class(svelte_element, "svelte-1tjo4al", true);
 		},
 		m(target, anchor) {
 			insert_hydration(target, svelte_element, anchor);
@@ -16485,7 +16482,7 @@ function create_dynamic_element$1(ctx) {
 				set_attributes(svelte_element, svelte_element_data);
 			}
 
-			toggle_class(svelte_element, "svelte-1w1oa9", true);
+			toggle_class(svelte_element, "svelte-1tjo4al", true);
 		},
 		i(local) {
 			if (current) return;

package/dist/index.es.d.ts

@@ -2493,7 +2493,7 @@ declare const BUTTON_SIZE_STYLES: PropStyles<ButtonProps, "size">;
 declare const BUTTON_THEME_STYLES: PropStyles<ButtonProps, "theme">;
 declare const BUTTON_ROUND_STYLES: PropStyles<ButtonProps, "round">;
 declare const BUTTON_WRAP_STYLES: PropStyles<ButtonProps, "wrap">;
-type ButtonOutlinedProps = CommonProps & ClickableProps & WithIconProps & LinkProps & BorderProps & {
+type ButtonOutlinedProps = CommonProps & ClickableProps & ShadowProps & WithIconProps & LinkProps & BorderProps & {
     label?: string;
     // size
     size?: keyof typeof BUTTON_SIZE;

package/dist/index.es.js

@@ -13967,44 +13967,34 @@ const buttonOutlinedPropsDefault = {
 
 const BUTTON_OUTLINED_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_OUTLINED_THEME_STYLES = {
@@ -14041,7 +14031,9 @@ const BUTTON_OUTLINED_ROUND_STYLES = {
     none: {
         borderRadius: 0,
     },
-    default: {},
+    default: {
+        borderRadius: '4px',
+    },
     fulled: {
         borderRadius: '56px',
     },
@@ -14061,7 +14053,7 @@ function add_css$9(target) {
 	append_styles(target, "svelte-1ogxph4", ".button-outlined.svelte-1ogxph4{display:inline-flex;gap:0.65em;align-items:center;justify-content:center;text-decoration:none;outline:0;border-width:1px;border-style:solid;line-height:1.5;transition:background-color 0.12s, border-color 0.12s, color 0.12s;cursor:pointer;background-color:#ffffff}.button-outlined.svelte-1ogxph4:hover{background-color:#f6f6f6}.button-outlined-icon.svelte-1ogxph4{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em;margin-bottom:0.1em}");
 }
 
-// (37:2) {#if props.isIcon && props.iconVariant}
+// (42:2) {#if props.isIcon && props.iconVariant}
 function create_if_block$5(ctx) {
 	let div;
 	let icon;
@@ -14117,7 +14109,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (29:0) <svelte:element   {...attributes}   this={element}   class="button-outlined"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
+// (34:0) <svelte:element   {...attributes}   this={element}   class="button-outlined"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
 function create_dynamic_element$5(ctx) {
 	let svelte_element;
 	let t0;
@@ -14283,6 +14275,7 @@ function instance$a($$self, $$props, $$invalidate) {
 	let { layerId = '' } = $$props;
 	const { attributes, element, handleClick } = useClickable(props);
 	const buttonThemeStyle = BUTTON_OUTLINED_THEME_STYLES[props.theme ?? buttonOutlinedPropsDefault.theme];
+	const buttonSizeStyle = BUTTON_OUTLINED_SIZE_STYLES[props.size ?? buttonOutlinedPropsDefault.size];
 
 	$$self.$$set = $$props => {
 		if ('props' in $$props) $$invalidate(0, props = $$props.props);
@@ -14296,14 +14289,18 @@ function instance$a($$self, $$props, $$invalidate) {
 				color: props.color ?? buttonThemeStyle.backgroundColor,
 				borderColor: props.color ?? buttonThemeStyle.backgroundColor,
 				fontWeight: props.fontWeight ?? 'bold',
-				...BUTTON_OUTLINED_SIZE_STYLES[props.size ?? buttonOutlinedPropsDefault.size],
 				...BUTTON_OUTLINED_WRAP_STYLES[props.wrap ?? buttonOutlinedPropsDefault.wrap],
 				...BUTTON_OUTLINED_ROUND_STYLES[props.round ?? buttonOutlinedPropsDefault.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)
+				...toCssBorder(props),
+				...toCssShadow(props)
 			}));
 		}
 	};
@@ -15163,7 +15160,7 @@ class Image extends SvelteComponent {
 /* src/components-flex/layout/Layout.svelte generated by Svelte v3.53.1 */
 
 function add_css$5(target) {
-	append_styles(target, "svelte-1w1oa9", ".layout.svelte-1w1oa9{text-decoration:none;color:inherit}.layout[data-clickable=true].svelte-1w1oa9{cursor:pointer}");
+	append_styles(target, "svelte-1tjo4al", ".layout.svelte-1tjo4al{text-decoration:none;color:inherit}.layout[data-clickable=true].svelte-1tjo4al{cursor:pointer}.layout[data-clickable=true].svelte-1tjo4al:hover{opacity:0.8}");
 }
 
 // (27:0) <svelte:element   {...attributes}   this="div"   class="layout"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
@@ -15199,7 +15196,7 @@ function create_dynamic_element$1(ctx) {
 				set_attributes(svelte_element, svelte_element_data);
 			}
 
-			toggle_class(svelte_element, "svelte-1w1oa9", true);
+			toggle_class(svelte_element, "svelte-1tjo4al", true);
 		},
 		m(target, anchor) {
 			insert(target, svelte_element, anchor);
@@ -15244,7 +15241,7 @@ function create_dynamic_element$1(ctx) {
 				set_attributes(svelte_element, svelte_element_data);
 			}
 
-			toggle_class(svelte_element, "svelte-1w1oa9", true);
+			toggle_class(svelte_element, "svelte-1tjo4al", true);
 		},
 		i(local) {
 			if (current) return;

package/package.json

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