@plaidev/karte-action-sdk 1.1.268-29128731.e21f076b → 1.1.268-29132946.504b468b

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.
Files changed (42) hide show
  1. package/dist/components-flex/avatar/types.d.ts +2 -2
  2. package/dist/components-flex/close-button/types.d.ts +4 -4
  3. package/dist/components-flex/image/types.d.ts +2 -2
  4. package/dist/components-flex/layout/types.d.ts +1 -0
  5. package/dist/components-flex/list/types.d.ts +2 -5
  6. package/dist/components-flex/multi-column/types.d.ts +2 -5
  7. package/dist/components-flex/props.d.ts +18 -11
  8. package/dist/components-flex/utils/prop-to-style.d.ts +3 -2
  9. package/dist/components-flex/variants.d.ts +8 -2
  10. package/dist/hydrate/components-flex/avatar/types.d.ts +2 -2
  11. package/dist/hydrate/components-flex/close-button/types.d.ts +4 -4
  12. package/dist/hydrate/components-flex/image/types.d.ts +2 -2
  13. package/dist/hydrate/components-flex/layout/types.d.ts +1 -0
  14. package/dist/hydrate/components-flex/list/types.d.ts +2 -5
  15. package/dist/hydrate/components-flex/multi-column/types.d.ts +2 -5
  16. package/dist/hydrate/components-flex/props.d.ts +18 -11
  17. package/dist/hydrate/components-flex/utils/prop-to-style.d.ts +3 -2
  18. package/dist/hydrate/components-flex/variants.d.ts +8 -2
  19. package/dist/hydrate/index.es.js +209 -86
  20. package/dist/index.es.js +207 -85
  21. package/dist/svelte5/components-flex/avatar/types.d.ts +2 -2
  22. package/dist/svelte5/components-flex/close-button/types.d.ts +4 -4
  23. package/dist/svelte5/components-flex/image/types.d.ts +2 -2
  24. package/dist/svelte5/components-flex/layout/types.d.ts +1 -0
  25. package/dist/svelte5/components-flex/list/types.d.ts +2 -5
  26. package/dist/svelte5/components-flex/multi-column/types.d.ts +2 -5
  27. package/dist/svelte5/components-flex/props.d.ts +18 -11
  28. package/dist/svelte5/components-flex/utils/prop-to-style.d.ts +3 -2
  29. package/dist/svelte5/components-flex/variants.d.ts +8 -2
  30. package/dist/svelte5/hydrate/components-flex/avatar/types.d.ts +2 -2
  31. package/dist/svelte5/hydrate/components-flex/close-button/types.d.ts +4 -4
  32. package/dist/svelte5/hydrate/components-flex/image/types.d.ts +2 -2
  33. package/dist/svelte5/hydrate/components-flex/layout/types.d.ts +1 -0
  34. package/dist/svelte5/hydrate/components-flex/list/types.d.ts +2 -5
  35. package/dist/svelte5/hydrate/components-flex/multi-column/types.d.ts +2 -5
  36. package/dist/svelte5/hydrate/components-flex/props.d.ts +18 -11
  37. package/dist/svelte5/hydrate/components-flex/utils/prop-to-style.d.ts +3 -2
  38. package/dist/svelte5/hydrate/components-flex/variants.d.ts +8 -2
  39. package/dist/svelte5/hydrate/index.es.js +182 -69
  40. package/dist/svelte5/index.es.js +182 -69
  41. package/dist/svelte5/index.front2.es.js +185 -68
  42. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -11725,6 +11725,52 @@ const SHADOW_VARIANT = {
11725
11725
  }
11726
11726
  };
11727
11727
  const SHADOW_VARIANTS = toVariantArray(SHADOW_VARIANT);
11728
+ const BACKGROUND_COLOR_VARIANT = {
11729
+ base: {
11730
+ name: "ホワイト",
11731
+ getProps: () => ({ backgroundColor: "#FFFFFF" })
11732
+ },
11733
+ dark: {
11734
+ name: "ブラック",
11735
+ getProps: () => ({ backgroundColor: "#000000" })
11736
+ },
11737
+ gray: {
11738
+ name: "グレー",
11739
+ getProps: () => ({ backgroundColor: "#ECECEC" })
11740
+ },
11741
+ brand: {
11742
+ name: "ブランド",
11743
+ getProps: (kit) => ({ backgroundColor: getBrandKit(kit).color_brand })
11744
+ },
11745
+ danger: {
11746
+ name: "デンジャー",
11747
+ getProps: (kit) => ({ backgroundColor: getBrandKit(kit).color_danger })
11748
+ }
11749
+ };
11750
+ const BACKGROUND_COLOR_VARIANTS = toVariantArray(BACKGROUND_COLOR_VARIANT);
11751
+ const BORDER_COLOR_VARIANT = {
11752
+ black: {
11753
+ name: "ブラック",
11754
+ getProps: () => ({ borderColor: "#000000" })
11755
+ },
11756
+ gray: {
11757
+ name: "グレー",
11758
+ getProps: () => ({ borderColor: "#DBDBDB" })
11759
+ },
11760
+ brand: {
11761
+ name: "ブランド",
11762
+ getProps: (kit) => ({ borderColor: getBrandKit(kit).color_brand })
11763
+ },
11764
+ danger: {
11765
+ name: "デンジャー",
11766
+ getProps: (kit) => ({ borderColor: getBrandKit(kit).color_danger })
11767
+ },
11768
+ base: {
11769
+ name: "ホワイト",
11770
+ getProps: () => ({ borderColor: "#FFFFFF" })
11771
+ }
11772
+ };
11773
+ const BORDER_COLOR_VARIANTS = toVariantArray(BORDER_COLOR_VARIANT);
11728
11774
 
11729
11775
  //#endregion
11730
11776
  //#region src/components-flex/utils/prop-to-style.ts
@@ -11741,11 +11787,12 @@ const toCssPosition = (p) => {
11741
11787
  const toCssCommon = (p) => {
11742
11788
  return { ...toCssPosition(p) };
11743
11789
  };
11744
- const toCssBorder = (p) => {
11790
+ const toCssBorder = (p, brandKit) => {
11745
11791
  const borderWidth = p?.borderTopWidth ?? p?.borderRightWidth ?? p?.borderLeftWidth ?? p?.borderBottomWidth ?? null;
11746
11792
  if (borderWidth === null) return {};
11793
+ const variant = BORDER_COLOR_VARIANT[p?.borderColorVariant];
11747
11794
  return {
11748
- borderColor: p?.borderColor,
11795
+ borderColor: p?.borderColor ?? variant?.getProps(brandKit)?.borderColor,
11749
11796
  borderStyle: "solid",
11750
11797
  borderTopWidth: p?.borderTopWidth,
11751
11798
  borderLeftWidth: p?.borderLeftWidth,
@@ -11761,16 +11808,19 @@ const toCssPadding = (p) => {
11761
11808
  paddingBottom: p?.paddingBottom
11762
11809
  };
11763
11810
  };
11764
- const toCssBackground = (p) => {
11811
+ const toCssBackground = (p, brandKit) => {
11765
11812
  const url = p?.backgroundImageUrl;
11813
+ const variant = BACKGROUND_COLOR_VARIANT[p?.backgroundColorVariant];
11766
11814
  return {
11767
- backgroundImage: url ? `url(${url})` : void 0,
11768
- backgroundSize: url ? "cover" : void 0,
11769
- backgroundPositionX: p?.backgroundPositionX ?? "center",
11770
- backgroundPositionY: p?.backgroundPositionY ?? "center",
11771
- backgroundBlendMode: p?.backgroundBlendMode,
11772
- backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor,
11773
- backgroundRepeat: "no-repeat"
11815
+ backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor ?? variant?.getProps(brandKit)?.backgroundColor,
11816
+ ...url ? {
11817
+ backgroundSize: url ? "cover" : void 0,
11818
+ backgroundImage: url ? `url(${url})` : void 0,
11819
+ backgroundPositionX: p?.backgroundPositionX ?? "center",
11820
+ backgroundPositionY: p?.backgroundPositionY ?? "center",
11821
+ backgroundBlendMode: p?.backgroundBlendMode,
11822
+ backgroundRepeat: "no-repeat"
11823
+ } : {}
11774
11824
  };
11775
11825
  };
11776
11826
  const toCssRadius = (p) => {
@@ -12008,6 +12058,7 @@ function create_fragment$58(ctx) {
12008
12058
  };
12009
12059
  }
12010
12060
  function instance$58($$self, $$props, $$invalidate) {
12061
+ let styleObj;
12011
12062
  let style;
12012
12063
  let imgStyle;
12013
12064
  let { props = {} } = $$props;
@@ -12023,24 +12074,38 @@ function instance$58($$self, $$props, $$invalidate) {
12023
12074
  square: { borderRadius: "0.25em" },
12024
12075
  rounded: { borderRadius: "1em" }
12025
12076
  } };
12077
+ const calcImgRadius = (parentRadius, borderWidth) => {
12078
+ const radiusSize = parentRadius ? parseInt(parentRadius) : 0;
12079
+ if (radiusSize === 0) return 0;
12080
+ if (parentRadius === "100%") return "100%";
12081
+ return radiusSize > 0 ? `calc(${parentRadius} - ${borderWidth})` : void 0;
12082
+ };
12026
12083
  $$self.$$set = ($$props$1) => {
12027
12084
  if ("props" in $$props$1) $$invalidate(0, props = $$props$1.props);
12028
12085
  if ("layerId" in $$props$1) $$invalidate(1, layerId = $$props$1.layerId);
12029
12086
  };
12030
12087
  $$self.$$.update = () => {
12031
- if ($$self.$$.dirty & 1) $: $$invalidate(3, style = objToStyle({
12088
+ if ($$self.$$.dirty & 1) $: $$invalidate(7, styleObj = {
12032
12089
  ...VARIANTS.shape[props.shape ?? "square"],
12033
12090
  width: props.width ?? avatarSizeStyle.width,
12034
12091
  height: props.height ?? avatarSizeStyle.height,
12035
12092
  ...toCssCommon(props),
12036
- ...toCssBorder(props)
12093
+ ...toCssBorder(props),
12094
+ ...toCssPadding(props)
12095
+ });
12096
+ if ($$self.$$.dirty & 128) $: $$invalidate(3, style = objToStyle(styleObj));
12097
+ if ($$self.$$.dirty & 128) $: $$invalidate(2, imgStyle = objToStyle({
12098
+ width: "100%",
12099
+ height: "100%",
12100
+ objectFit: "cover",
12101
+ ...toCssRadius({
12102
+ borderTopLeftRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth),
12103
+ borderTopRightRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth),
12104
+ borderBottomLeftRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth),
12105
+ borderBottomRightRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth)
12106
+ })
12037
12107
  }));
12038
12108
  };
12039
- $: $$invalidate(2, imgStyle = objToStyle({
12040
- width: "100%",
12041
- height: "100%",
12042
- objectFit: "cover"
12043
- }));
12044
12109
  return [
12045
12110
  props,
12046
12111
  layerId,
@@ -12048,7 +12113,8 @@ function instance$58($$self, $$props, $$invalidate) {
12048
12113
  style,
12049
12114
  attributes,
12050
12115
  element$1,
12051
- handleClick
12116
+ handleClick,
12117
+ styleObj
12052
12118
  ];
12053
12119
  }
12054
12120
  var Avatar = class extends SvelteComponent {
@@ -15213,10 +15279,24 @@ const BUTTON_TEXT_THEME = {
15213
15279
  white: "White"
15214
15280
  };
15215
15281
 
15282
+ //#endregion
15283
+ //#region src/components-flex/text/styles.ts
15284
+ const callback$1 = ({ brandKit }) => ({
15285
+ default: { color: brandKit.color_text_primary },
15286
+ gray: { color: brandKit.color_text_secondary },
15287
+ brand: { color: brandKit.color_brand },
15288
+ success: { color: brandKit.color_success },
15289
+ warning: { color: brandKit.color_warning },
15290
+ danger: { color: brandKit.color_danger },
15291
+ info: { color: brandKit.color_info },
15292
+ white: { color: brandKit.color_white }
15293
+ });
15294
+ const getTextThemeStyles = getPropStyles(callback$1);
15295
+
15216
15296
  //#endregion
15217
15297
  //#region src/components-flex/close-button/CloseButton.svelte
15218
15298
  function add_css$18(target) {
15219
- append_styles(target, "svelte-1xcn1yw", ".close-button.svelte-1xcn1yw.svelte-1xcn1yw{display:inline-flex;align-items:center;justify-content:center;align-self:center;gap:8px;border-radius:100%;background:none;cursor:pointer;border:0;outline:0;transition:background-color 0.12s,\n border-color 0.12s,\n color 0.12s}.close-button.svelte-1xcn1yw svg.svelte-1xcn1yw{transition:transform 0.12s}.close-button.svelte-1xcn1yw:hover svg.svelte-1xcn1yw{transform:rotate(90deg)}.close-button-order-one.svelte-1xcn1yw.svelte-1xcn1yw{order:1}.close-button-order-two.svelte-1xcn1yw.svelte-1xcn1yw{order:2}");
15299
+ append_styles(target, "svelte-18wmfyq", ".close-button.svelte-18wmfyq.svelte-18wmfyq{display:inline-flex;align-items:center;justify-content:center;align-self:center;gap:8px;border-radius:100%;background:none;cursor:pointer;border:0;outline:0;flex-shrink:0;transition:background-color 0.12s,\n border-color 0.12s,\n color 0.12s}.close-button.svelte-18wmfyq svg.svelte-18wmfyq{transition:transform 0.12s}.close-button.svelte-18wmfyq:hover svg.svelte-18wmfyq{transform:rotate(90deg)}.close-button-order-one.svelte-18wmfyq.svelte-18wmfyq{order:1}.close-button-order-two.svelte-18wmfyq.svelte-18wmfyq{order:2}");
15220
15300
  }
15221
15301
  function create_if_block$6(ctx) {
15222
15302
  let span;
@@ -15235,7 +15315,7 @@ function create_if_block$6(ctx) {
15235
15315
  /*labelStyle*/
15236
15316
  ctx[2]
15237
15317
  );
15238
- attr(span, "class", span_class_value = "close-button-label " + (ctx[10] ? "close-button-order-one" : "") + " svelte-1xcn1yw");
15318
+ attr(span, "class", span_class_value = "close-button-label " + (ctx[10] ? "close-button-order-one" : "") + " svelte-18wmfyq");
15239
15319
  },
15240
15320
  m(target, anchor) {
15241
15321
  insert(target, span, anchor);
@@ -15294,7 +15374,7 @@ function create_dynamic_element$6(ctx) {
15294
15374
  /*color*/
15295
15375
  ctx[8]
15296
15376
  );
15297
- attr(svg, "class", "svelte-1xcn1yw");
15377
+ attr(svg, "class", "svelte-18wmfyq");
15298
15378
  attr(
15299
15379
  span,
15300
15380
  "style",
@@ -15306,7 +15386,7 @@ function create_dynamic_element$6(ctx) {
15306
15386
  ctx[6]
15307
15387
  )) set_custom_element_data_map(svelte_element, svelte_element_data);
15308
15388
  else set_attributes(svelte_element, svelte_element_data);
15309
- toggle_class(svelte_element, "svelte-1xcn1yw", true);
15389
+ toggle_class(svelte_element, "svelte-18wmfyq", true);
15310
15390
  },
15311
15391
  m(target, anchor) {
15312
15392
  insert(target, svelte_element, anchor);
@@ -15353,7 +15433,7 @@ function create_dynamic_element$6(ctx) {
15353
15433
  ctx$1[6]
15354
15434
  )) set_custom_element_data_map(svelte_element, svelte_element_data);
15355
15435
  else set_attributes(svelte_element, svelte_element_data);
15356
- toggle_class(svelte_element, "svelte-1xcn1yw", true);
15436
+ toggle_class(svelte_element, "svelte-18wmfyq", true);
15357
15437
  },
15358
15438
  d(detaching) {
15359
15439
  if (detaching) detach(svelte_element);
@@ -15407,13 +15487,17 @@ function create_fragment$22(ctx) {
15407
15487
  }
15408
15488
  function instance$22($$self, $$props, $$invalidate) {
15409
15489
  let hasLabel;
15490
+ let styleObj;
15410
15491
  let style;
15492
+ let borderWidth;
15493
+ let paddingSize;
15411
15494
  let labelStyle;
15412
15495
  let iconStyle;
15413
15496
  let { props = {} } = $$props;
15414
15497
  let { layerId = "" } = $$props;
15415
15498
  let { eventName = "" } = $$props;
15416
15499
  let { eventValue = void 0 } = $$props;
15500
+ const { brandKit } = useBrandKit();
15417
15501
  useInjectCustomizeCss(props);
15418
15502
  const { attributes, element: element$1, handleClick } = useClickable_default({
15419
15503
  onClick: {
@@ -15449,7 +15533,7 @@ function instance$22($$self, $$props, $$invalidate) {
15449
15533
  }
15450
15534
  };
15451
15535
  const size = props.size ?? 24;
15452
- const color = props.color ?? "#666";
15536
+ const color = props.color ?? getTextThemeStyles(brandKit)[props.colorVariant]?.color ?? "#666";
15453
15537
  const label = props.label;
15454
15538
  const isLeftLabelPlacement = props.labelPlacement === "left";
15455
15539
  $$self.$$set = ($$props$1) => {
@@ -15459,26 +15543,40 @@ function instance$22($$self, $$props, $$invalidate) {
15459
15543
  if ("eventValue" in $$props$1) $$invalidate(13, eventValue = $$props$1.eventValue);
15460
15544
  };
15461
15545
  $$self.$$.update = () => {
15462
- if ($$self.$$.dirty & 2048) $: $$invalidate(3, style = objToStyle({
15463
- ...props.bordered && { border: "1px solid #666" },
15464
- height: `${size}px`,
15465
- boxSizing: "border-box",
15546
+ if ($$self.$$.dirty & 2048) $: $$invalidate(16, styleObj = {
15547
+ ...props.bordered && {
15548
+ borderTopWidth: "1px",
15549
+ borderLeftWidth: "1px",
15550
+ borderRightWidth: "1px",
15551
+ borderBottomWidth: "1px",
15552
+ borderStyle: "solid",
15553
+ borderColor: "#666666"
15554
+ },
15466
15555
  padding: "6px",
15467
- backgroundColor: props.backgroundColor ?? "transparent",
15556
+ boxSizing: "border-box",
15557
+ backgroundColor: toCssBackground(props, brandKit)?.backgroundColor ?? "rgba(255,255,255,0)",
15468
15558
  ...VARIANTS.round[props.round ?? "default"],
15559
+ ...toCssPadding(props),
15469
15560
  ...toCssCommon(props),
15470
15561
  ...toCssBorder(props)
15471
- }));
15562
+ });
15563
+ if ($$self.$$.dirty & 65536) $: $$invalidate(3, style = objToStyle(styleObj));
15564
+ if ($$self.$$.dirty & 65536) $: $$invalidate(14, borderWidth = styleObj.borderTopWidth ? parseInt(styleObj.borderTopWidth) : 0);
15565
+ if ($$self.$$.dirty & 65536) $: $$invalidate(15, paddingSize = styleObj.paddingTop ? parseInt(styleObj.paddingTop) : 6);
15472
15566
  if ($$self.$$.dirty & 2048) $: $$invalidate(2, labelStyle = objToStyle({
15473
- color: props.labelColor ?? color,
15567
+ color: props.labelColor ?? getTextThemeStyles(brandKit)[props.labelColorVariant]?.color ?? color,
15474
15568
  fontSize: `${size / 2.1}px`
15475
15569
  }));
15570
+ if ($$self.$$.dirty & 49152) $: $$invalidate(1, iconStyle = objToStyle({
15571
+ width: `${size - paddingSize * 2 - borderWidth * 2}px`,
15572
+ height: `${size - paddingSize * 2 - borderWidth * 2}px`,
15573
+ display: "flex",
15574
+ alignItems: "center",
15575
+ justifyContent: "center",
15576
+ flexShrink: 0
15577
+ }));
15476
15578
  };
15477
15579
  $: $$invalidate(4, hasLabel = label !== void 0 && label !== "");
15478
- $: $$invalidate(1, iconStyle = objToStyle({
15479
- width: `${size - 12}px`,
15480
- height: `${size - 12}px`
15481
- }));
15482
15580
  return [
15483
15581
  layerId,
15484
15582
  iconStyle,
@@ -15493,7 +15591,10 @@ function instance$22($$self, $$props, $$invalidate) {
15493
15591
  isLeftLabelPlacement,
15494
15592
  props,
15495
15593
  eventName,
15496
- eventValue
15594
+ eventValue,
15595
+ borderWidth,
15596
+ paddingSize,
15597
+ styleObj
15497
15598
  ];
15498
15599
  }
15499
15600
  var CloseButton = class extends SvelteComponent {
@@ -15570,16 +15671,16 @@ const IMAGE_ROUND_STYLES = {
15570
15671
  borderBottomRightRadius: 0
15571
15672
  },
15572
15673
  rounded: {
15573
- borderTopLeftRadius: "0.4em",
15574
- borderTopRightRadius: "0.4em",
15575
- borderBottomLeftRadius: "0.4em",
15576
- borderBottomRightRadius: "0.4em"
15674
+ borderTopLeftRadius: "8px",
15675
+ borderTopRightRadius: "8px",
15676
+ borderBottomLeftRadius: "8px",
15677
+ borderBottomRightRadius: "8px"
15577
15678
  },
15578
15679
  circle: {
15579
- borderTopLeftRadius: "0.8em",
15580
- borderTopRightRadius: "0.8em",
15581
- borderBottomLeftRadius: "0.8em",
15582
- borderBottomRightRadius: "0.8em"
15680
+ borderTopLeftRadius: "16px",
15681
+ borderTopRightRadius: "16px",
15682
+ borderBottomLeftRadius: "16px",
15683
+ borderBottomRightRadius: "16px"
15583
15684
  }
15584
15685
  };
15585
15686
 
@@ -15596,9 +15697,9 @@ function create_dynamic_element$5(ctx) {
15596
15697
  let mounted;
15597
15698
  let dispose;
15598
15699
  let svelte_element_levels = [
15599
- ctx[3],
15700
+ ctx[4],
15600
15701
  { class: "image" },
15601
- { style: ctx[2] },
15702
+ { style: ctx[3] },
15602
15703
  { "data-layer-id": ctx[1] }
15603
15704
  ];
15604
15705
  let svelte_element_data = {};
@@ -15607,15 +15708,21 @@ function create_dynamic_element$5(ctx) {
15607
15708
  c() {
15608
15709
  svelte_element = element(
15609
15710
  /*element*/
15610
- ctx[4]
15711
+ ctx[5]
15611
15712
  );
15612
15713
  img = element("img");
15613
15714
  if (!src_url_equal(img.src, img_src_value = ctx[0].image)) attr(img, "src", img_src_value);
15614
15715
  attr(img, "alt", img_alt_value = ctx[0].alt);
15716
+ attr(
15717
+ img,
15718
+ "style",
15719
+ /*imgStyle*/
15720
+ ctx[2]
15721
+ );
15615
15722
  attr(img, "class", "image-img svelte-1olvu11");
15616
15723
  if (/-/.test(
15617
15724
  /*element*/
15618
- ctx[4]
15725
+ ctx[5]
15619
15726
  )) set_custom_element_data_map(svelte_element, svelte_element_data);
15620
15727
  else set_attributes(svelte_element, svelte_element_data);
15621
15728
  toggle_class(svelte_element, "svelte-1olvu11", true);
@@ -15628,7 +15735,7 @@ function create_dynamic_element$5(ctx) {
15628
15735
  svelte_element,
15629
15736
  "click",
15630
15737
  /*handleClick*/
15631
- ctx[5]
15738
+ ctx[6]
15632
15739
  );
15633
15740
  mounted = true;
15634
15741
  }
@@ -15636,15 +15743,21 @@ function create_dynamic_element$5(ctx) {
15636
15743
  p(ctx$1, dirty) {
15637
15744
  if (dirty & 1 && !src_url_equal(img.src, img_src_value = ctx$1[0].image)) attr(img, "src", img_src_value);
15638
15745
  if (dirty & 1 && img_alt_value !== (img_alt_value = ctx$1[0].alt)) attr(img, "alt", img_alt_value);
15746
+ if (dirty & 4) attr(
15747
+ img,
15748
+ "style",
15749
+ /*imgStyle*/
15750
+ ctx$1[2]
15751
+ );
15639
15752
  svelte_element_data = get_spread_update(svelte_element_levels, [
15640
- ctx$1[3],
15753
+ ctx$1[4],
15641
15754
  { class: "image" },
15642
- dirty & 4 && { style: ctx$1[2] },
15755
+ dirty & 8 && { style: ctx$1[3] },
15643
15756
  dirty & 2 && { "data-layer-id": ctx$1[1] }
15644
15757
  ]);
15645
15758
  if (/-/.test(
15646
15759
  /*element*/
15647
- ctx$1[4]
15760
+ ctx$1[5]
15648
15761
  )) set_custom_element_data_map(svelte_element, svelte_element_data);
15649
15762
  else set_attributes(svelte_element, svelte_element_data);
15650
15763
  toggle_class(svelte_element, "svelte-1olvu11", true);
@@ -15657,9 +15770,9 @@ function create_dynamic_element$5(ctx) {
15657
15770
  };
15658
15771
  }
15659
15772
  function create_fragment$21(ctx) {
15660
- let previous_tag = ctx[4];
15773
+ let previous_tag = ctx[5];
15661
15774
  let svelte_element_anchor;
15662
- let svelte_element = ctx[4] && create_dynamic_element$5(ctx);
15775
+ let svelte_element = ctx[5] && create_dynamic_element$5(ctx);
15663
15776
  return {
15664
15777
  c() {
15665
15778
  if (svelte_element) svelte_element.c();
@@ -15670,14 +15783,14 @@ function create_fragment$21(ctx) {
15670
15783
  insert(target, svelte_element_anchor, anchor);
15671
15784
  },
15672
15785
  p(ctx$1, [dirty]) {
15673
- if (ctx$1[4]) if (!previous_tag) {
15786
+ if (ctx$1[5]) if (!previous_tag) {
15674
15787
  svelte_element = create_dynamic_element$5(ctx$1);
15675
15788
  svelte_element.c();
15676
15789
  svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor);
15677
15790
  } else if (safe_not_equal(
15678
15791
  previous_tag,
15679
15792
  /*element*/
15680
- ctx$1[4]
15793
+ ctx$1[5]
15681
15794
  )) {
15682
15795
  svelte_element.d(1);
15683
15796
  svelte_element = create_dynamic_element$5(ctx$1);
@@ -15688,7 +15801,7 @@ function create_fragment$21(ctx) {
15688
15801
  svelte_element.d(1);
15689
15802
  svelte_element = null;
15690
15803
  }
15691
- previous_tag = ctx$1[4];
15804
+ previous_tag = ctx$1[5];
15692
15805
  },
15693
15806
  i: noop,
15694
15807
  o: noop,
@@ -15699,35 +15812,53 @@ function create_fragment$21(ctx) {
15699
15812
  };
15700
15813
  }
15701
15814
  function instance$21($$self, $$props, $$invalidate) {
15815
+ let styleObj;
15702
15816
  let style;
15817
+ let imgStyle;
15703
15818
  let { props = {} } = $$props;
15704
15819
  let { layerId = "" } = $$props;
15705
15820
  useInjectCustomizeCss(props);
15706
15821
  const { attributes, element: element$1, handleClick } = useClickable_default(props);
15707
15822
  const aspectVariantStyles = ASPECT_VARIANT[props.aspectVariant]?.getProps();
15708
15823
  const width = props.width ?? "100%";
15824
+ const calcImgRadius = (parentRadius, borderWidth) => {
15825
+ const radiusSize = parentRadius ? parseInt(parentRadius) : 0;
15826
+ if (radiusSize === 0) return 0;
15827
+ if (parentRadius === "100%") return "100%";
15828
+ return radiusSize > 0 ? `calc(${parentRadius} - ${borderWidth})` : void 0;
15829
+ };
15709
15830
  $$self.$$set = ($$props$1) => {
15710
15831
  if ("props" in $$props$1) $$invalidate(0, props = $$props$1.props);
15711
15832
  if ("layerId" in $$props$1) $$invalidate(1, layerId = $$props$1.layerId);
15712
15833
  };
15713
15834
  $$self.$$.update = () => {
15714
- if ($$self.$$.dirty & 1) $: $$invalidate(2, style = objToStyle({
15835
+ if ($$self.$$.dirty & 1) $: $$invalidate(7, styleObj = {
15715
15836
  ...props.borderTopLeftRadius ? toCssRadius(props) : IMAGE_ROUND_STYLES[props.shape ?? "square"],
15716
15837
  width,
15717
15838
  flexShrink: String(width).indexOf("px") !== -1 ? 0 : 1,
15718
15839
  height: props.height ?? "auto",
15719
15840
  aspectRatio: props.aspect ?? aspectVariantStyles?.aspect,
15720
15841
  ...toCssCommon(props),
15721
- ...toCssBorder(props)
15722
- }));
15842
+ ...toCssBorder(props),
15843
+ ...toCssPadding(props)
15844
+ });
15845
+ if ($$self.$$.dirty & 128) $: $$invalidate(3, style = objToStyle(styleObj));
15846
+ if ($$self.$$.dirty & 128) $: $$invalidate(2, imgStyle = objToStyle({ ...toCssRadius({
15847
+ borderTopLeftRadius: calcImgRadius(styleObj.borderTopLeftRadius, styleObj.borderTopWidth),
15848
+ borderTopRightRadius: calcImgRadius(styleObj.borderTopRightRadius, styleObj.borderTopWidth),
15849
+ borderBottomLeftRadius: calcImgRadius(styleObj.borderBottomLeftRadius, styleObj.borderTopWidth),
15850
+ borderBottomRightRadius: calcImgRadius(styleObj.borderBottomRightRadius, styleObj.borderTopWidth)
15851
+ }) }));
15723
15852
  };
15724
15853
  return [
15725
15854
  props,
15726
15855
  layerId,
15856
+ imgStyle,
15727
15857
  style,
15728
15858
  attributes,
15729
15859
  element$1,
15730
- handleClick
15860
+ handleClick,
15861
+ styleObj
15731
15862
  ];
15732
15863
  }
15733
15864
  var Image = class extends SvelteComponent {
@@ -15905,6 +16036,7 @@ function instance$20($$self, $$props, $$invalidate) {
15905
16036
  let { $$slots: slots = {}, $$scope } = $$props;
15906
16037
  let { props = {} } = $$props;
15907
16038
  let { layerId = "" } = $$props;
16039
+ const { brandKit } = useBrandKit();
15908
16040
  useInjectCustomizeCss(props);
15909
16041
  const { attributes, element: element$1, handleClick } = useClickable_default(props);
15910
16042
  $$self.$$set = ($$props$1) => {
@@ -15921,13 +16053,14 @@ function instance$20($$self, $$props, $$invalidate) {
15921
16053
  rowGap: props.rowGap ?? props.gap,
15922
16054
  columnGap: props.columnGap ?? props.gap,
15923
16055
  width: props.width,
16056
+ height: props.height,
15924
16057
  ...toCssOverflow(props),
15925
16058
  ...toCssShadow(props),
15926
16059
  ...toCssRadius(props),
15927
- ...toCssBackground(props),
16060
+ ...toCssBackground(props, brandKit),
15928
16061
  ...toCssCommon(props),
15929
16062
  ...toCssPadding(props),
15930
- ...toCssBorder(props)
16063
+ ...toCssBorder(props, brandKit)
15931
16064
  }));
15932
16065
  };
15933
16066
  return [
@@ -16581,20 +16714,6 @@ var SliderItem = class extends SvelteComponent {
16581
16714
  };
16582
16715
  var SliderItem_default = SliderItem;
16583
16716
 
16584
- //#endregion
16585
- //#region src/components-flex/text/styles.ts
16586
- const callback$1 = ({ brandKit }) => ({
16587
- default: { color: brandKit.color_text_primary },
16588
- gray: { color: brandKit.color_text_secondary },
16589
- brand: { color: brandKit.color_brand },
16590
- success: { color: brandKit.color_success },
16591
- warning: { color: brandKit.color_warning },
16592
- danger: { color: brandKit.color_danger },
16593
- info: { color: brandKit.color_info },
16594
- white: { color: brandKit.color_white }
16595
- });
16596
- const getTextThemeStyles = getPropStyles(callback$1);
16597
-
16598
16717
  //#endregion
16599
16718
  //#region src/components-flex/text/constants.ts
16600
16719
  const TEXT_VARIANTS = { size: {
@@ -18018,11 +18137,9 @@ function instance$11($$self, $$props, $$invalidate) {
18018
18137
  let { $$slots: slots = {}, $$scope } = $$props;
18019
18138
  let { layerId } = $$props;
18020
18139
  let { props } = $$props;
18140
+ const { brandKit } = useBrandKit();
18021
18141
  useInjectCustomizeCss(props);
18022
18142
  const vars = getVariables();
18023
- console.log(vars);
18024
- console.log(props.actionTableKey);
18025
- console.log(vars[props.actionTableKey]);
18026
18143
  setContext(LIST_ITEM_CONTEXT_KEY, {
18027
18144
  paddingTop: props.itemPaddingTop,
18028
18145
  paddingLeft: props.itemPaddingLeft,
@@ -18030,8 +18147,8 @@ function instance$11($$self, $$props, $$invalidate) {
18030
18147
  paddingBottom: props.itemPaddingBottom,
18031
18148
  height: props.itemHeight,
18032
18149
  borderTopWidth: props.borderWidth,
18033
- borderTopColor: props.borderColor,
18034
- borderTopStyle: props.borderStyle,
18150
+ borderTopColor: props.borderColor ?? BORDER_COLOR_VARIANT[props.borderColorVariant]?.getProps(brandKit)?.borderColor,
18151
+ borderTopStyle: "solid",
18035
18152
  gap: props.itemGap
18036
18153
  });
18037
18154
  $$self.$$set = ($$props$1) => {
@@ -18426,6 +18543,7 @@ function instance$9($$self, $$props, $$invalidate) {
18426
18543
  let { $$slots: slots = {}, $$scope } = $$props;
18427
18544
  let { layerId } = $$props;
18428
18545
  let { props } = $$props;
18546
+ const { brandKit } = useBrandKit();
18429
18547
  useInjectCustomizeCss(props);
18430
18548
  let listGap = (() => {
18431
18549
  if (!props.gap) return "0";
@@ -18443,8 +18561,8 @@ function instance$9($$self, $$props, $$invalidate) {
18443
18561
  paddingRight: props.itemPaddingRight,
18444
18562
  paddingBottom: props.itemPaddingBottom,
18445
18563
  borderLeftWidth: props.borderWidth,
18446
- borderLeftColor: props.borderColor,
18447
- borderLeftStyle: props.borderStyle,
18564
+ borderLeftColor: props.borderColor ?? BORDER_COLOR_VARIANT[props.borderColorVariant]?.getProps(brandKit)?.borderColor,
18565
+ borderLeftStyle: props.borderStyle ?? "solid",
18448
18566
  gap: listGap,
18449
18567
  innerGap: props.itemGap
18450
18568
  });
@@ -19888,6 +20006,10 @@ __export(index_svelte5_exports, {
19888
20006
  AVATAR_SIZE_STYLES: () => AVATAR_SIZE_STYLES,
19889
20007
  Alignments: () => Alignments,
19890
20008
  AnimationStyles: () => AnimationStyles,
20009
+ BACKGROUND_COLOR_VARIANT: () => BACKGROUND_COLOR_VARIANT,
20010
+ BACKGROUND_COLOR_VARIANTS: () => BACKGROUND_COLOR_VARIANTS,
20011
+ BORDER_COLOR_VARIANT: () => BORDER_COLOR_VARIANT,
20012
+ BORDER_COLOR_VARIANTS: () => BORDER_COLOR_VARIANTS,
19891
20013
  BUTTON_ICON_ANGLE: () => BUTTON_ICON_ANGLE,
19892
20014
  BUTTON_LINK_TARGET: () => BUTTON_LINK_TARGET,
19893
20015
  BUTTON_OUTLINED_ROUND_STYLES: () => BUTTON_OUTLINED_ROUND_STYLES,
@@ -20369,4 +20491,4 @@ var ThumbnailPreview = class extends SvelteComponent {
20369
20491
  var ThumbnailPreview_default = ThumbnailPreview;
20370
20492
 
20371
20493
  //#endregion
20372
- export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, Box_default as Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement_default as CodeElement, Countdown_default as Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement_default as EmbedElement, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, Flex_default as Flex, Avatar_default as FlexAvatar, Button_default as FlexButton, ButtonOutlined_default as FlexButtonOutlined, ButtonText_default as FlexButtonText, ClipCopy_default as FlexClipCopy, CloseButton_default as FlexCloseButton, Code_default as FlexCode, CountDown_default as FlexCountDown, CountDownValue_default as FlexCountDownValue, FlexDirections, Icon_default as FlexIcon, Image_default as FlexImage, FlexItem_default as FlexItem, Layout_default as FlexLayout, List_default as FlexList, ListItem_default as FlexListItem, Modal_default as FlexModal, MultiColumn_default as FlexMultiColumn, MultiColumnItem_default as FlexMultiColumnItem, RichText_default as FlexRichText, Slider_default as FlexSlider, SliderItem_default as FlexSliderItem, Text_default as FlexText, TextLink_default as FlexTextLink, Youtube_default as FlexYoutube, Fonts, FormCheckBoxes_default as FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices_default as FormIdentifyChoices, FormIdentifyInput_default as FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons_default as FormRadioButtons, FormRatingButtonsFace_default as FormRatingButtonsFace, FormRatingButtonsNumber_default as FormRatingButtonsNumber, FormSelect_default as FormSelect, FormTextarea_default as FormTextarea, Grid_default as Grid, GridItem_default as GridItem, GridModalState_default as GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement_default as IconElement, ImageBlock_default as ImageBlock, ImageElement_default as ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, List_default$1 as List, ListBackgroundTypes, ListDirections, ListItem_default$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal_default$1 as Modal, ModalPositions, MovieVimeoElement_default as MovieVimeoElement, MovieYouTubeElement_default as MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide_default as Slide, SlideItem_default as SlideItem, State_default as State, StateItem_default as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock_default as TextBlock, TextButtonBlock_default as TextButtonBlock, TextButtonElement_default as TextButtonElement, TextDirections, TextElement_default as TextElement, ThumbnailPreview_default as ThumbnailPreview, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget_exports as widget };
20494
+ export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BACKGROUND_COLOR_VARIANT, BACKGROUND_COLOR_VARIANTS, BORDER_COLOR_VARIANT, BORDER_COLOR_VARIANTS, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, Box_default as Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement_default as CodeElement, Countdown_default as Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement_default as EmbedElement, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, Flex_default as Flex, Avatar_default as FlexAvatar, Button_default as FlexButton, ButtonOutlined_default as FlexButtonOutlined, ButtonText_default as FlexButtonText, ClipCopy_default as FlexClipCopy, CloseButton_default as FlexCloseButton, Code_default as FlexCode, CountDown_default as FlexCountDown, CountDownValue_default as FlexCountDownValue, FlexDirections, Icon_default as FlexIcon, Image_default as FlexImage, FlexItem_default as FlexItem, Layout_default as FlexLayout, List_default as FlexList, ListItem_default as FlexListItem, Modal_default as FlexModal, MultiColumn_default as FlexMultiColumn, MultiColumnItem_default as FlexMultiColumnItem, RichText_default as FlexRichText, Slider_default as FlexSlider, SliderItem_default as FlexSliderItem, Text_default as FlexText, TextLink_default as FlexTextLink, Youtube_default as FlexYoutube, Fonts, FormCheckBoxes_default as FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices_default as FormIdentifyChoices, FormIdentifyInput_default as FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons_default as FormRadioButtons, FormRatingButtonsFace_default as FormRatingButtonsFace, FormRatingButtonsNumber_default as FormRatingButtonsNumber, FormSelect_default as FormSelect, FormTextarea_default as FormTextarea, Grid_default as Grid, GridItem_default as GridItem, GridModalState_default as GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement_default as IconElement, ImageBlock_default as ImageBlock, ImageElement_default as ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, List_default$1 as List, ListBackgroundTypes, ListDirections, ListItem_default$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal_default$1 as Modal, ModalPositions, MovieVimeoElement_default as MovieVimeoElement, MovieYouTubeElement_default as MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide_default as Slide, SlideItem_default as SlideItem, State_default as State, StateItem_default as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock_default as TextBlock, TextButtonBlock_default as TextButtonBlock, TextButtonElement_default as TextButtonElement, TextDirections, TextElement_default as TextElement, ThumbnailPreview_default as ThumbnailPreview, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget_exports as widget };
@@ -1,4 +1,4 @@
1
- import type { BorderProps, ClickableProps, CommonProps } from "../props.js";
1
+ import type { BorderProps, ClickableProps, CommonProps, PaddingProps } from "../props.js";
2
2
  import type { Properties } from "csstype";
3
3
  export declare const AVATAR_SIZE: {
4
4
  readonly extra_small: "XS(48 x 48)"
@@ -12,7 +12,7 @@ export declare const AVATAR_SHAPE: {
12
12
  readonly square: "スクエア"
13
13
  readonly rounded: "ラウンド"
14
14
  };
15
- export type AvatarProps = CommonProps & ClickableProps & BorderProps & {
15
+ export type AvatarProps = CommonProps & ClickableProps & PaddingProps & BorderProps & {
16
16
  size?: keyof typeof AVATAR_SIZE | number
17
17
  width?: Properties["width"]
18
18
  height?: Properties["height"]
@@ -1,5 +1,6 @@
1
- import type { BorderProps, ClickableProps, CommonProps } from "../props.js";
1
+ import type { BorderProps, ClickableProps, CommonProps, BackgroundColorProps, ColorProps, PaddingProps } from "../props.js";
2
2
  import type { Properties } from "csstype";
3
+ import type { TEXT_THEME } from "../text/types.js";
3
4
  export declare const CLOSE_BUTTON_PLACEMENT: {
4
5
  readonly topRight: "topRight"
5
6
  readonly topLeft: "topLeft"
@@ -15,15 +16,14 @@ export declare const CLOSE_BUTTON_LABEL_PLACEMENT: {
15
16
  readonly right: "right"
16
17
  readonly left: "left"
17
18
  };
18
- export type CloseButtonProps = CommonProps & ClickableProps & BorderProps & {
19
+ export type CloseButtonProps = CommonProps & BackgroundColorProps & ClickableProps & ColorProps & PaddingProps & BorderProps & {
19
20
  size?: number
20
21
  placement?: keyof typeof CLOSE_BUTTON_PLACEMENT
21
22
  round?: keyof typeof CLOSE_BUTTON_ROUND
22
23
  bordered?: boolean
23
- color?: Properties["color"]
24
- backgroundColor?: Properties["backgroundColor"]
25
24
  label?: string
26
25
  labelColor?: Properties["color"]
26
+ labelColorVariant?: keyof typeof TEXT_THEME
27
27
  labelPlacement?: keyof typeof CLOSE_BUTTON_LABEL_PLACEMENT
28
28
  top?: Properties["top"]
29
29
  right?: Properties["right"]
@@ -1,5 +1,5 @@
1
1
  import type { Properties } from "csstype";
2
- import type { CommonProps, BorderProps, ClickableProps, AspectProps, RadiusProps } from "../props.js";
2
+ import type { CommonProps, BorderProps, ClickableProps, AspectProps, RadiusProps, PaddingProps } from "../props.js";
3
3
  export declare const IMAGE_ROUND_SHAPE: {
4
4
  readonly circle: "ラウンド / ミディアム"
5
5
  readonly rounded: "ラウンド / スモール"
@@ -17,7 +17,7 @@ export declare const IMAGE_ASPECT_VARIANTS: {
17
17
  "3/4": string
18
18
  "9/16": string
19
19
  };
20
- export type ImageProps = CommonProps & ClickableProps & AspectProps & RadiusProps & BorderProps & {
20
+ export type ImageProps = CommonProps & ClickableProps & AspectProps & RadiusProps & PaddingProps & BorderProps & {
21
21
  image?: string
22
22
  width?: Properties["width"]
23
23
  height?: Properties["height"]