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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2457,9 +2457,13 @@ declare const BUTTON_ICON_ANGLE: {
2457
2457
  readonly row: "\u5DE6\u5074";
2458
2458
  readonly "row-reverse": "\u53F3\u5074";
2459
2459
  };
2460
- type ButtonProps = CommonProps & ClickableProps & BorderProps & {
2460
+ type ButtonProps = CommonProps & ClickableProps & ShadowProps & BorderProps & {
2461
2461
  label?: string;
2462
2462
  size?: keyof typeof BUTTON_SIZE;
2463
+ height?: Properties["height"];
2464
+ paddingLeft?: Properties["paddingLeft"];
2465
+ paddingRight?: Properties["paddingRight"];
2466
+ fontSize?: Properties["fontSize"];
2463
2467
  theme?: keyof typeof BUTTON_THEME;
2464
2468
  round?: keyof typeof BUTTON_ROUND;
2465
2469
  isLink?: boolean;
@@ -14931,44 +14931,34 @@ class Icon extends SvelteComponent {
14931
14931
 
14932
14932
  const BUTTON_SIZE_STYLES = {
14933
14933
  extra_small: {
14934
- minHeight: '32px',
14935
- paddingInline: '12px',
14934
+ height: '32px',
14935
+ paddingLeft: '12px',
14936
+ paddingRight: '12px',
14936
14937
  fontSize: '12px',
14937
- paddingBlock: '8px',
14938
- lineHeight: 1.5,
14939
- borderRadius: '4px',
14940
14938
  },
14941
14939
  small: {
14942
- minHeight: '36px',
14943
- paddingInline: '16px',
14940
+ height: '36px',
14941
+ paddingLeft: '16px',
14942
+ paddingRight: '16px',
14944
14943
  fontSize: '13px',
14945
- paddingBlock: '8px',
14946
- lineHeight: 1.5,
14947
- borderRadius: '4px',
14948
14944
  },
14949
14945
  medium: {
14950
- minHeight: '40px',
14951
- paddingInline: '24px',
14946
+ height: '40px',
14947
+ paddingLeft: '24px',
14948
+ paddingRight: '24px',
14952
14949
  fontSize: '14px',
14953
- paddingBlock: '8px',
14954
- lineHeight: 1.5,
14955
- borderRadius: '4px',
14956
14950
  },
14957
14951
  large: {
14958
- minHeight: '48px',
14959
- paddingInline: '32px',
14952
+ height: '48px',
14953
+ paddingLeft: '32px',
14954
+ paddingRight: '32px',
14960
14955
  fontSize: '14px',
14961
- paddingBlock: '10px',
14962
- lineHeight: 1.5,
14963
- borderRadius: '4px',
14964
14956
  },
14965
14957
  extra_large: {
14966
- minHeight: '56px',
14967
- paddingInline: '40px',
14968
- fontSize: '17px',
14969
- paddingBlock: '12px',
14970
- lineHeight: 1.5,
14971
- borderRadius: '4px',
14958
+ height: '56px',
14959
+ paddingLeft: '40px',
14960
+ paddingRight: '40px',
14961
+ fontSize: '16px',
14972
14962
  },
14973
14963
  };
14974
14964
  const BUTTON_THEME_STYLES = {
@@ -15022,7 +15012,9 @@ const BUTTON_ROUND_STYLES = {
15022
15012
  none: {
15023
15013
  borderRadius: 0,
15024
15014
  },
15025
- default: {},
15015
+ default: {
15016
+ borderRadius: '4px',
15017
+ },
15026
15018
  fulled: {
15027
15019
  borderRadius: '56px',
15028
15020
  },
@@ -15088,7 +15080,7 @@ function add_css$8(target) {
15088
15080
  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}");
15089
15081
  }
15090
15082
 
15091
- // (42:2) {#if props.isIcon && props.iconVariant}
15083
+ // (48:2) {#if props.isIcon && props.iconVariant}
15092
15084
  function create_if_block$5(ctx) {
15093
15085
  let div;
15094
15086
  let icon;
@@ -15154,7 +15146,7 @@ function create_if_block$5(ctx) {
15154
15146
  };
15155
15147
  }
15156
15148
 
15157
- // (41:0) <Clickable className="button" layerId={layerId} style={style} onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
15149
+ // (47:0) <Clickable className="button" layerId={layerId} style={style} onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
15158
15150
  function create_default_slot$4(ctx) {
15159
15151
  let t0;
15160
15152
  let span;
@@ -15264,7 +15256,7 @@ function create_fragment$9(ctx) {
15264
15256
  if (dirty & /*props*/ 1) clickable_changes.eventName = /*props*/ ctx[0].eventName;
15265
15257
  if (dirty & /*props*/ 1) clickable_changes.eventValue = /*props*/ ctx[0].eventValue;
15266
15258
 
15267
- if (dirty & /*$$scope, props*/ 33) {
15259
+ if (dirty & /*$$scope, props*/ 65) {
15268
15260
  clickable_changes.$$scope = { dirty, ctx };
15269
15261
  }
15270
15262
 
@@ -15291,6 +15283,7 @@ function instance$9($$self, $$props, $$invalidate) {
15291
15283
  let { props = {} } = $$props;
15292
15284
  let { layerId = '' } = $$props;
15293
15285
  const buttonThemeStyle = BUTTON_THEME_STYLES[props.theme ?? buttonPropsDefault.theme];
15286
+ const buttonSizeStyle = BUTTON_SIZE_STYLES[props.size ?? buttonPropsDefault.size];
15294
15287
 
15295
15288
  $$self.$$set = $$props => {
15296
15289
  if ('props' in $$props) $$invalidate(0, props = $$props.props);
@@ -15318,14 +15311,19 @@ function instance$9($$self, $$props, $$invalidate) {
15318
15311
  color: props.color ?? buttonThemeStyle.color,
15319
15312
  fontWeight: props.fontWeight ?? buttonThemeStyle.fontWeight,
15320
15313
  cursor: 'pointer',
15321
- ...BUTTON_SIZE_STYLES[props.size ?? buttonPropsDefault.size],
15314
+ lineHeight: 1.5,
15322
15315
  ...BUTTON_WRAP_STYLES[props.wrap ?? buttonPropsDefault.wrap],
15323
15316
  ...BUTTON_ROUND_STYLES[props.round ?? buttonPropsDefault.round],
15324
15317
  ...props.iconAngle
15325
15318
  ? { flexDirection: props.iconAngle }
15326
15319
  : {},
15320
+ height: props.height ?? buttonSizeStyle.height,
15321
+ paddingLeft: props.paddingLeft ?? buttonSizeStyle.paddingLeft,
15322
+ paddingRight: props.paddingRight ?? buttonSizeStyle.paddingRight,
15323
+ fontSize: props.fontSize ?? buttonSizeStyle.fontSize,
15327
15324
  ...toCssCommon(props),
15328
15325
  ...toCssBorder(props),
15326
+ ...toCssShadow(props),
15329
15327
  ...variables
15330
15328
  }));
15331
15329
  }
@@ -2457,9 +2457,13 @@ declare const BUTTON_ICON_ANGLE: {
2457
2457
  readonly row: "\u5DE6\u5074";
2458
2458
  readonly "row-reverse": "\u53F3\u5074";
2459
2459
  };
2460
- type ButtonProps = CommonProps & ClickableProps & BorderProps & {
2460
+ type ButtonProps = CommonProps & ClickableProps & ShadowProps & BorderProps & {
2461
2461
  label?: string;
2462
2462
  size?: keyof typeof BUTTON_SIZE;
2463
+ height?: Properties["height"];
2464
+ paddingLeft?: Properties["paddingLeft"];
2465
+ paddingRight?: Properties["paddingRight"];
2466
+ fontSize?: Properties["fontSize"];
2463
2467
  theme?: keyof typeof BUTTON_THEME;
2464
2468
  round?: keyof typeof BUTTON_ROUND;
2465
2469
  isLink?: boolean;
package/dist/index.es.js CHANGED
@@ -13846,44 +13846,34 @@ class Icon extends SvelteComponent {
13846
13846
 
13847
13847
  const BUTTON_SIZE_STYLES = {
13848
13848
  extra_small: {
13849
- minHeight: '32px',
13850
- paddingInline: '12px',
13849
+ height: '32px',
13850
+ paddingLeft: '12px',
13851
+ paddingRight: '12px',
13851
13852
  fontSize: '12px',
13852
- paddingBlock: '8px',
13853
- lineHeight: 1.5,
13854
- borderRadius: '4px',
13855
13853
  },
13856
13854
  small: {
13857
- minHeight: '36px',
13858
- paddingInline: '16px',
13855
+ height: '36px',
13856
+ paddingLeft: '16px',
13857
+ paddingRight: '16px',
13859
13858
  fontSize: '13px',
13860
- paddingBlock: '8px',
13861
- lineHeight: 1.5,
13862
- borderRadius: '4px',
13863
13859
  },
13864
13860
  medium: {
13865
- minHeight: '40px',
13866
- paddingInline: '24px',
13861
+ height: '40px',
13862
+ paddingLeft: '24px',
13863
+ paddingRight: '24px',
13867
13864
  fontSize: '14px',
13868
- paddingBlock: '8px',
13869
- lineHeight: 1.5,
13870
- borderRadius: '4px',
13871
13865
  },
13872
13866
  large: {
13873
- minHeight: '48px',
13874
- paddingInline: '32px',
13867
+ height: '48px',
13868
+ paddingLeft: '32px',
13869
+ paddingRight: '32px',
13875
13870
  fontSize: '14px',
13876
- paddingBlock: '10px',
13877
- lineHeight: 1.5,
13878
- borderRadius: '4px',
13879
13871
  },
13880
13872
  extra_large: {
13881
- minHeight: '56px',
13882
- paddingInline: '40px',
13883
- fontSize: '17px',
13884
- paddingBlock: '12px',
13885
- lineHeight: 1.5,
13886
- borderRadius: '4px',
13873
+ height: '56px',
13874
+ paddingLeft: '40px',
13875
+ paddingRight: '40px',
13876
+ fontSize: '16px',
13887
13877
  },
13888
13878
  };
13889
13879
  const BUTTON_THEME_STYLES = {
@@ -13937,7 +13927,9 @@ const BUTTON_ROUND_STYLES = {
13937
13927
  none: {
13938
13928
  borderRadius: 0,
13939
13929
  },
13940
- default: {},
13930
+ default: {
13931
+ borderRadius: '4px',
13932
+ },
13941
13933
  fulled: {
13942
13934
  borderRadius: '56px',
13943
13935
  },
@@ -14003,7 +13995,7 @@ function add_css$8(target) {
14003
13995
  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}");
14004
13996
  }
14005
13997
 
14006
- // (42:2) {#if props.isIcon && props.iconVariant}
13998
+ // (48:2) {#if props.isIcon && props.iconVariant}
14007
13999
  function create_if_block$5(ctx) {
14008
14000
  let div;
14009
14001
  let icon;
@@ -14059,7 +14051,7 @@ function create_if_block$5(ctx) {
14059
14051
  };
14060
14052
  }
14061
14053
 
14062
- // (41:0) <Clickable className="button" layerId={layerId} style={style} onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
14054
+ // (47:0) <Clickable className="button" layerId={layerId} style={style} onClick={props.onClick} eventName={props.eventName} eventValue={props.eventValue}>
14063
14055
  function create_default_slot$4(ctx) {
14064
14056
  let t0;
14065
14057
  let span;
@@ -14158,7 +14150,7 @@ function create_fragment$9(ctx) {
14158
14150
  if (dirty & /*props*/ 1) clickable_changes.eventName = /*props*/ ctx[0].eventName;
14159
14151
  if (dirty & /*props*/ 1) clickable_changes.eventValue = /*props*/ ctx[0].eventValue;
14160
14152
 
14161
- if (dirty & /*$$scope, props*/ 33) {
14153
+ if (dirty & /*$$scope, props*/ 65) {
14162
14154
  clickable_changes.$$scope = { dirty, ctx };
14163
14155
  }
14164
14156
 
@@ -14185,6 +14177,7 @@ function instance$9($$self, $$props, $$invalidate) {
14185
14177
  let { props = {} } = $$props;
14186
14178
  let { layerId = '' } = $$props;
14187
14179
  const buttonThemeStyle = BUTTON_THEME_STYLES[props.theme ?? buttonPropsDefault.theme];
14180
+ const buttonSizeStyle = BUTTON_SIZE_STYLES[props.size ?? buttonPropsDefault.size];
14188
14181
 
14189
14182
  $$self.$$set = $$props => {
14190
14183
  if ('props' in $$props) $$invalidate(0, props = $$props.props);
@@ -14212,14 +14205,19 @@ function instance$9($$self, $$props, $$invalidate) {
14212
14205
  color: props.color ?? buttonThemeStyle.color,
14213
14206
  fontWeight: props.fontWeight ?? buttonThemeStyle.fontWeight,
14214
14207
  cursor: 'pointer',
14215
- ...BUTTON_SIZE_STYLES[props.size ?? buttonPropsDefault.size],
14208
+ lineHeight: 1.5,
14216
14209
  ...BUTTON_WRAP_STYLES[props.wrap ?? buttonPropsDefault.wrap],
14217
14210
  ...BUTTON_ROUND_STYLES[props.round ?? buttonPropsDefault.round],
14218
14211
  ...props.iconAngle
14219
14212
  ? { flexDirection: props.iconAngle }
14220
14213
  : {},
14214
+ height: props.height ?? buttonSizeStyle.height,
14215
+ paddingLeft: props.paddingLeft ?? buttonSizeStyle.paddingLeft,
14216
+ paddingRight: props.paddingRight ?? buttonSizeStyle.paddingRight,
14217
+ fontSize: props.fontSize ?? buttonSizeStyle.fontSize,
14221
14218
  ...toCssCommon(props),
14222
14219
  ...toCssBorder(props),
14220
+ ...toCssShadow(props),
14223
14221
  ...variables
14224
14222
  }));
14225
14223
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plaidev/karte-action-sdk",
3
- "version": "1.1.249-28765727.0b93c1aa",
3
+ "version": "1.1.249-28767073.9402c9fc",
4
4
  "author": "Plaid Inc.",
5
5
  "license": "Apache-2.0",
6
6
  "module": "./dist/index.es.js",