@plaidev/karte-action-sdk 1.1.268-29128731.e21f076b → 1.1.268-29130290.f4c098fe

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
@@ -3194,6 +3194,52 @@ const SHADOW_VARIANT = {
3194
3194
  }
3195
3195
  };
3196
3196
  const SHADOW_VARIANTS = toVariantArray(SHADOW_VARIANT);
3197
+ const BACKGROUND_COLOR_VARIANT = {
3198
+ base: {
3199
+ name: "ホワイト",
3200
+ getProps: () => ({ backgroundColor: "#FFFFFF" })
3201
+ },
3202
+ dark: {
3203
+ name: "ブラック",
3204
+ getProps: () => ({ backgroundColor: "#000000" })
3205
+ },
3206
+ gray: {
3207
+ name: "グレー",
3208
+ getProps: () => ({ backgroundColor: "#ECECEC" })
3209
+ },
3210
+ brand: {
3211
+ name: "ブランド",
3212
+ getProps: (kit) => ({ backgroundColor: getBrandKit(kit).color_brand })
3213
+ },
3214
+ danger: {
3215
+ name: "デンジャー",
3216
+ getProps: (kit) => ({ backgroundColor: getBrandKit(kit).color_danger })
3217
+ }
3218
+ };
3219
+ const BACKGROUND_COLOR_VARIANTS = toVariantArray(BACKGROUND_COLOR_VARIANT);
3220
+ const BORDER_COLOR_VARIANT = {
3221
+ black: {
3222
+ name: "ブラック",
3223
+ getProps: () => ({ borderColor: "#000000" })
3224
+ },
3225
+ gray: {
3226
+ name: "グレー",
3227
+ getProps: () => ({ borderColor: "#DBDBDB" })
3228
+ },
3229
+ brand: {
3230
+ name: "ブランド",
3231
+ getProps: (kit) => ({ borderColor: getBrandKit(kit).color_brand })
3232
+ },
3233
+ danger: {
3234
+ name: "デンジャー",
3235
+ getProps: (kit) => ({ borderColor: getBrandKit(kit).color_danger })
3236
+ },
3237
+ base: {
3238
+ name: "ホワイト",
3239
+ getProps: () => ({ borderColor: "#FFFFFF" })
3240
+ }
3241
+ };
3242
+ const BORDER_COLOR_VARIANTS = toVariantArray(BORDER_COLOR_VARIANT);
3197
3243
 
3198
3244
  //#endregion
3199
3245
  //#region src/components-flex/utils/prop-to-style.ts
@@ -3210,11 +3256,12 @@ const toCssPosition = (p) => {
3210
3256
  const toCssCommon = (p) => {
3211
3257
  return { ...toCssPosition(p) };
3212
3258
  };
3213
- const toCssBorder = (p) => {
3259
+ const toCssBorder = (p, brandKit) => {
3214
3260
  const borderWidth = p?.borderTopWidth ?? p?.borderRightWidth ?? p?.borderLeftWidth ?? p?.borderBottomWidth ?? null;
3215
3261
  if (borderWidth === null) return {};
3262
+ const variant = BORDER_COLOR_VARIANT[p?.borderColorVariant];
3216
3263
  return {
3217
- borderColor: p?.borderColor,
3264
+ borderColor: p?.borderColor ?? variant?.getProps(brandKit)?.borderColor,
3218
3265
  borderStyle: "solid",
3219
3266
  borderTopWidth: p?.borderTopWidth,
3220
3267
  borderLeftWidth: p?.borderLeftWidth,
@@ -3230,16 +3277,19 @@ const toCssPadding = (p) => {
3230
3277
  paddingBottom: p?.paddingBottom
3231
3278
  };
3232
3279
  };
3233
- const toCssBackground = (p) => {
3280
+ const toCssBackground = (p, brandKit) => {
3234
3281
  const url = p?.backgroundImageUrl;
3282
+ const variant = BACKGROUND_COLOR_VARIANT[p?.backgroundColorVariant];
3235
3283
  return {
3236
- backgroundImage: url ? `url(${url})` : void 0,
3237
- backgroundSize: url ? "cover" : void 0,
3238
- backgroundPositionX: p?.backgroundPositionX ?? "center",
3239
- backgroundPositionY: p?.backgroundPositionY ?? "center",
3240
- backgroundBlendMode: p?.backgroundBlendMode,
3241
- backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor,
3242
- backgroundRepeat: "no-repeat"
3284
+ backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor ?? variant?.getProps(brandKit)?.backgroundColor,
3285
+ ...url ? {
3286
+ backgroundSize: url ? "cover" : void 0,
3287
+ backgroundImage: url ? `url(${url})` : void 0,
3288
+ backgroundPositionX: p?.backgroundPositionX ?? "center",
3289
+ backgroundPositionY: p?.backgroundPositionY ?? "center",
3290
+ backgroundBlendMode: p?.backgroundBlendMode,
3291
+ backgroundRepeat: "no-repeat"
3292
+ } : {}
3243
3293
  };
3244
3294
  };
3245
3295
  const toCssRadius = (p) => {
@@ -3522,6 +3572,7 @@ const $$css$22 = {
3522
3572
  function Avatar($$anchor, $$props) {
3523
3573
  $$54.push($$props, false);
3524
3574
  $$54.append_styles($$anchor, $$css$22);
3575
+ const styleObj = $$54.mutable_state();
3525
3576
  const style = $$54.mutable_state();
3526
3577
  const imgStyle = $$54.mutable_state();
3527
3578
  let props = $$54.prop($$props, "props", 24, () => ({}));
@@ -3537,20 +3588,36 @@ function Avatar($$anchor, $$props) {
3537
3588
  square: { borderRadius: "0.25em" },
3538
3589
  rounded: { borderRadius: "1em" }
3539
3590
  } };
3540
- $$54.legacy_pre_effect(() => ($$54.deep_read_state(props()), toCssBorder), () => {
3541
- $$54.set(style, objToStyle({
3591
+ const calcImgRadius = (parentRadius, borderWidth) => {
3592
+ const radiusSize = parentRadius ? parseInt(parentRadius) : 0;
3593
+ if (radiusSize === 0) return 0;
3594
+ if (parentRadius === "100%") return "100%";
3595
+ return radiusSize > 0 ? `calc(${parentRadius} - ${borderWidth})` : void 0;
3596
+ };
3597
+ $$54.legacy_pre_effect(() => ($$54.deep_read_state(props()), toCssPadding), () => {
3598
+ $$54.set(styleObj, {
3542
3599
  ...VARIANTS.shape[props().shape ?? "square"],
3543
3600
  width: props().width ?? avatarSizeStyle.width,
3544
3601
  height: props().height ?? avatarSizeStyle.height,
3545
3602
  ...toCssCommon(props()),
3546
- ...toCssBorder(props())
3547
- }));
3603
+ ...toCssBorder(props()),
3604
+ ...toCssPadding(props())
3605
+ });
3548
3606
  });
3549
- $$54.legacy_pre_effect(() => objToStyle, () => {
3607
+ $$54.legacy_pre_effect(() => $$54.get(styleObj), () => {
3608
+ $$54.set(style, objToStyle($$54.get(styleObj)));
3609
+ });
3610
+ $$54.legacy_pre_effect(() => $$54.get(styleObj), () => {
3550
3611
  $$54.set(imgStyle, objToStyle({
3551
3612
  width: "100%",
3552
3613
  height: "100%",
3553
- objectFit: "cover"
3614
+ objectFit: "cover",
3615
+ ...toCssRadius({
3616
+ borderTopLeftRadius: calcImgRadius($$54.get(styleObj).borderRadius, $$54.get(styleObj).borderTopWidth),
3617
+ borderTopRightRadius: calcImgRadius($$54.get(styleObj).borderRadius, $$54.get(styleObj).borderTopWidth),
3618
+ borderBottomLeftRadius: calcImgRadius($$54.get(styleObj).borderRadius, $$54.get(styleObj).borderTopWidth),
3619
+ borderBottomRightRadius: calcImgRadius($$54.get(styleObj).borderRadius, $$54.get(styleObj).borderTopWidth)
3620
+ })
3554
3621
  }));
3555
3622
  });
3556
3623
  $$54.legacy_pre_effect_reset();
@@ -4758,25 +4825,43 @@ const BUTTON_TEXT_THEME = {
4758
4825
  white: "White"
4759
4826
  };
4760
4827
 
4828
+ //#endregion
4829
+ //#region src/components-flex/text/styles.ts
4830
+ const callback$1 = ({ brandKit }) => ({
4831
+ default: { color: brandKit.color_text_primary },
4832
+ gray: { color: brandKit.color_text_secondary },
4833
+ brand: { color: brandKit.color_brand },
4834
+ success: { color: brandKit.color_success },
4835
+ warning: { color: brandKit.color_warning },
4836
+ danger: { color: brandKit.color_danger },
4837
+ info: { color: brandKit.color_info },
4838
+ white: { color: brandKit.color_white }
4839
+ });
4840
+ const getTextThemeStyles = getPropStyles(callback$1);
4841
+
4761
4842
  //#endregion
4762
4843
  //#region src/components-flex/close-button/CloseButton.svelte
4763
4844
  var root_2$1 = $$18.template(`<span></span>`);
4764
- var root_1$4 = $$18.template(`<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 100%; height: 100%;" class="svelte-1xcn1yw"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path></svg></span> <!>`, 1);
4845
+ var root_1$4 = $$18.template(`<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 100%; height: 100%;" class="svelte-18wmfyq"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path></svg></span> <!>`, 1);
4765
4846
  const $$css$17 = {
4766
- hash: "svelte-1xcn1yw",
4767
- code: ".close-button.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:where(.svelte-1xcn1yw) {transition:transform 0.12s;}.close-button.svelte-1xcn1yw:hover svg:where(.svelte-1xcn1yw) {transform:rotate(90deg);}.close-button-order-one.svelte-1xcn1yw {order:1;}.close-button-order-two.svelte-1xcn1yw {order:2;}"
4847
+ hash: "svelte-18wmfyq",
4848
+ code: ".close-button.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:where(.svelte-18wmfyq) {transition:transform 0.12s;}.close-button.svelte-18wmfyq:hover svg:where(.svelte-18wmfyq) {transform:rotate(90deg);}.close-button-order-one.svelte-18wmfyq {order:1;}.close-button-order-two.svelte-18wmfyq {order:2;}"
4768
4849
  };
4769
4850
  function CloseButton($$anchor, $$props) {
4770
4851
  $$18.push($$props, false);
4771
4852
  $$18.append_styles($$anchor, $$css$17);
4772
4853
  const hasLabel = $$18.mutable_state();
4854
+ const styleObj = $$18.mutable_state();
4773
4855
  const style = $$18.mutable_state();
4856
+ const borderWidth = $$18.mutable_state();
4857
+ const paddingSize = $$18.mutable_state();
4774
4858
  const labelStyle = $$18.mutable_state();
4775
4859
  const iconStyle = $$18.mutable_state();
4776
4860
  let props = $$18.prop($$props, "props", 24, () => ({}));
4777
4861
  let layerId = $$18.prop($$props, "layerId", 8, "");
4778
4862
  let eventName = $$18.prop($$props, "eventName", 8, "");
4779
4863
  let eventValue = $$18.prop($$props, "eventValue", 8, void 0);
4864
+ const { brandKit } = useBrandKit();
4780
4865
  useInjectCustomizeCss(props());
4781
4866
  const { attributes, element, handleClick } = useClickable_default({
4782
4867
  onClick: {
@@ -4812,34 +4897,54 @@ function CloseButton($$anchor, $$props) {
4812
4897
  }
4813
4898
  };
4814
4899
  const size = props().size ?? 24;
4815
- const color = props().color ?? "#666";
4900
+ const color = props().color ?? getTextThemeStyles(brandKit)[props().colorVariant]?.color ?? "#666";
4816
4901
  const label = props().label;
4817
4902
  const isLeftLabelPlacement = props().labelPlacement === "left";
4818
4903
  $$18.legacy_pre_effect(() => {}, () => {
4819
4904
  $$18.set(hasLabel, label !== void 0 && label !== "");
4820
4905
  });
4821
4906
  $$18.legacy_pre_effect(() => ($$18.deep_read_state(props()), toCssBorder), () => {
4822
- $$18.set(style, objToStyle({
4823
- ...props().bordered && { border: "1px solid #666" },
4824
- height: `${size}px`,
4825
- boxSizing: "border-box",
4907
+ $$18.set(styleObj, {
4908
+ ...props().bordered && {
4909
+ borderTopWidth: "1px",
4910
+ borderLeftWidth: "1px",
4911
+ borderRightWidth: "1px",
4912
+ borderBottomWidth: "1px",
4913
+ borderStyle: "solid",
4914
+ borderColor: "#666666"
4915
+ },
4826
4916
  padding: "6px",
4827
- backgroundColor: props().backgroundColor ?? "transparent",
4917
+ boxSizing: "border-box",
4918
+ backgroundColor: toCssBackground(props(), brandKit)?.backgroundColor ?? "rgba(255,255,255,0)",
4828
4919
  ...VARIANTS.round[props().round ?? "default"],
4920
+ ...toCssPadding(props()),
4829
4921
  ...toCssCommon(props()),
4830
4922
  ...toCssBorder(props())
4831
- }));
4923
+ });
4832
4924
  });
4833
- $$18.legacy_pre_effect(() => $$18.deep_read_state(props()), () => {
4925
+ $$18.legacy_pre_effect(() => $$18.get(styleObj), () => {
4926
+ $$18.set(style, objToStyle($$18.get(styleObj)));
4927
+ });
4928
+ $$18.legacy_pre_effect(() => $$18.get(styleObj), () => {
4929
+ $$18.set(borderWidth, $$18.get(styleObj).borderTopWidth ? parseInt($$18.get(styleObj).borderTopWidth) : 0);
4930
+ });
4931
+ $$18.legacy_pre_effect(() => $$18.get(styleObj), () => {
4932
+ $$18.set(paddingSize, $$18.get(styleObj).paddingTop ? parseInt($$18.get(styleObj).paddingTop) : 6);
4933
+ });
4934
+ $$18.legacy_pre_effect(() => ($$18.deep_read_state(props()), getTextThemeStyles), () => {
4834
4935
  $$18.set(labelStyle, objToStyle({
4835
- color: props().labelColor ?? color,
4936
+ color: props().labelColor ?? getTextThemeStyles(brandKit)[props().labelColorVariant]?.color ?? color,
4836
4937
  fontSize: `${size / 2.1}px`
4837
4938
  }));
4838
4939
  });
4839
- $$18.legacy_pre_effect(() => objToStyle, () => {
4940
+ $$18.legacy_pre_effect(() => ($$18.get(paddingSize), $$18.get(borderWidth)), () => {
4840
4941
  $$18.set(iconStyle, objToStyle({
4841
- width: `${size - 12}px`,
4842
- height: `${size - 12}px`
4942
+ width: `${size - $$18.get(paddingSize) * 2 - $$18.get(borderWidth) * 2}px`,
4943
+ height: `${size - $$18.get(paddingSize) * 2 - $$18.get(borderWidth) * 2}px`,
4944
+ display: "flex",
4945
+ alignItems: "center",
4946
+ justifyContent: "center",
4947
+ flexShrink: 0
4843
4948
  }));
4844
4949
  });
4845
4950
  $$18.legacy_pre_effect_reset();
@@ -4853,7 +4958,7 @@ function CloseButton($$anchor, $$props) {
4853
4958
  class: `close-button ${isLeftLabelPlacement ? "close-button-order-two" : ""}`,
4854
4959
  "data-layer-id": layerId(),
4855
4960
  style: $$18.get(style)
4856
- }, "svelte-1xcn1yw"));
4961
+ }, "svelte-18wmfyq"));
4857
4962
  $$18.event("click", $$element, handleClick);
4858
4963
  var fragment_1 = root_1$4();
4859
4964
  var span = $$18.first_child(fragment_1);
@@ -4864,7 +4969,7 @@ function CloseButton($$anchor, $$props) {
4864
4969
  {
4865
4970
  var consequent = ($$anchor$2) => {
4866
4971
  var span_1 = root_2$1();
4867
- $$18.set_class(span_1, 1, `close-button-label ${isLeftLabelPlacement ? "close-button-order-one" : ""}`, "svelte-1xcn1yw");
4972
+ $$18.set_class(span_1, 1, `close-button-label ${isLeftLabelPlacement ? "close-button-order-one" : ""}`, "svelte-18wmfyq");
4868
4973
  span_1.textContent = label;
4869
4974
  $$18.template_effect(() => $$18.set_style(span_1, $$18.get(labelStyle)));
4870
4975
  $$18.append($$anchor$2, span_1);
@@ -4941,16 +5046,16 @@ const IMAGE_ROUND_STYLES = {
4941
5046
  borderBottomRightRadius: 0
4942
5047
  },
4943
5048
  rounded: {
4944
- borderTopLeftRadius: "0.4em",
4945
- borderTopRightRadius: "0.4em",
4946
- borderBottomLeftRadius: "0.4em",
4947
- borderBottomRightRadius: "0.4em"
5049
+ borderTopLeftRadius: "8px",
5050
+ borderTopRightRadius: "8px",
5051
+ borderBottomLeftRadius: "8px",
5052
+ borderBottomRightRadius: "8px"
4948
5053
  },
4949
5054
  circle: {
4950
- borderTopLeftRadius: "0.8em",
4951
- borderTopRightRadius: "0.8em",
4952
- borderBottomLeftRadius: "0.8em",
4953
- borderBottomRightRadius: "0.8em"
5055
+ borderTopLeftRadius: "16px",
5056
+ borderTopRightRadius: "16px",
5057
+ borderBottomLeftRadius: "16px",
5058
+ borderBottomRightRadius: "16px"
4954
5059
  }
4955
5060
  };
4956
5061
 
@@ -4964,23 +5069,43 @@ const $$css$16 = {
4964
5069
  function Image($$anchor, $$props) {
4965
5070
  $$17.push($$props, false);
4966
5071
  $$17.append_styles($$anchor, $$css$16);
5072
+ const styleObj = $$17.mutable_state();
4967
5073
  const style = $$17.mutable_state();
5074
+ const imgStyle = $$17.mutable_state();
4968
5075
  let props = $$17.prop($$props, "props", 24, () => ({}));
4969
5076
  let layerId = $$17.prop($$props, "layerId", 8, "");
4970
5077
  useInjectCustomizeCss(props());
4971
5078
  const { attributes, element, handleClick } = useClickable_default(props());
4972
5079
  const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
4973
5080
  const width = props().width ?? "100%";
4974
- $$17.legacy_pre_effect(() => ($$17.deep_read_state(props()), toCssBorder), () => {
4975
- $$17.set(style, objToStyle({
5081
+ const calcImgRadius = (parentRadius, borderWidth) => {
5082
+ const radiusSize = parentRadius ? parseInt(parentRadius) : 0;
5083
+ if (radiusSize === 0) return 0;
5084
+ if (parentRadius === "100%") return "100%";
5085
+ return radiusSize > 0 ? `calc(${parentRadius} - ${borderWidth})` : void 0;
5086
+ };
5087
+ $$17.legacy_pre_effect(() => ($$17.deep_read_state(props()), toCssPadding), () => {
5088
+ $$17.set(styleObj, {
4976
5089
  ...props().borderTopLeftRadius ? toCssRadius(props()) : IMAGE_ROUND_STYLES[props().shape ?? "square"],
4977
5090
  width,
4978
5091
  flexShrink: String(width).indexOf("px") !== -1 ? 0 : 1,
4979
5092
  height: props().height ?? "auto",
4980
5093
  aspectRatio: props().aspect ?? aspectVariantStyles?.aspect,
4981
5094
  ...toCssCommon(props()),
4982
- ...toCssBorder(props())
4983
- }));
5095
+ ...toCssBorder(props()),
5096
+ ...toCssPadding(props())
5097
+ });
5098
+ });
5099
+ $$17.legacy_pre_effect(() => $$17.get(styleObj), () => {
5100
+ $$17.set(style, objToStyle($$17.get(styleObj)));
5101
+ });
5102
+ $$17.legacy_pre_effect(() => $$17.get(styleObj), () => {
5103
+ $$17.set(imgStyle, objToStyle({ ...toCssRadius({
5104
+ borderTopLeftRadius: calcImgRadius($$17.get(styleObj).borderTopLeftRadius, $$17.get(styleObj).borderTopWidth),
5105
+ borderTopRightRadius: calcImgRadius($$17.get(styleObj).borderTopRightRadius, $$17.get(styleObj).borderTopWidth),
5106
+ borderBottomLeftRadius: calcImgRadius($$17.get(styleObj).borderBottomLeftRadius, $$17.get(styleObj).borderTopWidth),
5107
+ borderBottomRightRadius: calcImgRadius($$17.get(styleObj).borderBottomRightRadius, $$17.get(styleObj).borderTopWidth)
5108
+ }) }));
4984
5109
  });
4985
5110
  $$17.legacy_pre_effect_reset();
4986
5111
  $$17.init();
@@ -4999,6 +5124,7 @@ function Image($$anchor, $$props) {
4999
5124
  $$17.template_effect(() => {
5000
5125
  $$17.set_attribute(img, "src", props().image);
5001
5126
  $$17.set_attribute(img, "alt", props().alt);
5127
+ $$17.set_style(img, $$17.get(imgStyle));
5002
5128
  });
5003
5129
  $$17.append($$anchor$1, img);
5004
5130
  });
@@ -5038,6 +5164,7 @@ function Layout($$anchor, $$props) {
5038
5164
  const style = $$16.mutable_state();
5039
5165
  let props = $$16.prop($$props, "props", 24, () => ({}));
5040
5166
  let layerId = $$16.prop($$props, "layerId", 8, "");
5167
+ const { brandKit } = useBrandKit();
5041
5168
  useInjectCustomizeCss(props());
5042
5169
  const { attributes, element, handleClick } = useClickable_default(props());
5043
5170
  $$16.legacy_pre_effect(() => ($$16.deep_read_state(props()), toCssBorder), () => {
@@ -5049,13 +5176,14 @@ function Layout($$anchor, $$props) {
5049
5176
  rowGap: props().rowGap ?? props().gap,
5050
5177
  columnGap: props().columnGap ?? props().gap,
5051
5178
  width: props().width,
5179
+ height: props().height,
5052
5180
  ...toCssOverflow(props()),
5053
5181
  ...toCssShadow(props()),
5054
5182
  ...toCssRadius(props()),
5055
- ...toCssBackground(props()),
5183
+ ...toCssBackground(props(), brandKit),
5056
5184
  ...toCssCommon(props()),
5057
5185
  ...toCssPadding(props()),
5058
- ...toCssBorder(props())
5186
+ ...toCssBorder(props(), brandKit)
5059
5187
  }));
5060
5188
  });
5061
5189
  $$16.legacy_pre_effect_reset();
@@ -5355,20 +5483,6 @@ function SliderItem($$anchor, $$props) {
5355
5483
  $$14.pop();
5356
5484
  }
5357
5485
 
5358
- //#endregion
5359
- //#region src/components-flex/text/styles.ts
5360
- const callback$1 = ({ brandKit }) => ({
5361
- default: { color: brandKit.color_text_primary },
5362
- gray: { color: brandKit.color_text_secondary },
5363
- brand: { color: brandKit.color_brand },
5364
- success: { color: brandKit.color_success },
5365
- warning: { color: brandKit.color_warning },
5366
- danger: { color: brandKit.color_danger },
5367
- info: { color: brandKit.color_info },
5368
- white: { color: brandKit.color_white }
5369
- });
5370
- const getTextThemeStyles = getPropStyles(callback$1);
5371
-
5372
5486
  //#endregion
5373
5487
  //#region src/components-flex/text/constants.ts
5374
5488
  const TEXT_VARIANTS = { size: {
@@ -6142,11 +6256,9 @@ function List($$anchor, $$props) {
6142
6256
  const style = $$6.mutable_state();
6143
6257
  let layerId = $$6.prop($$props, "layerId", 8);
6144
6258
  let props = $$6.prop($$props, "props", 8);
6259
+ const { brandKit } = useBrandKit();
6145
6260
  useInjectCustomizeCss(props());
6146
6261
  const vars = getVariables();
6147
- console.log(vars);
6148
- console.log(props().actionTableKey);
6149
- console.log(vars[props().actionTableKey]);
6150
6262
  setContext(LIST_ITEM_CONTEXT_KEY, {
6151
6263
  paddingTop: props().itemPaddingTop,
6152
6264
  paddingLeft: props().itemPaddingLeft,
@@ -6154,8 +6266,8 @@ function List($$anchor, $$props) {
6154
6266
  paddingBottom: props().itemPaddingBottom,
6155
6267
  height: props().itemHeight,
6156
6268
  borderTopWidth: props().borderWidth,
6157
- borderTopColor: props().borderColor,
6158
- borderTopStyle: props().borderStyle,
6269
+ borderTopColor: props().borderColor ?? BORDER_COLOR_VARIANT[props().borderColorVariant]?.getProps(brandKit)?.borderColor,
6270
+ borderTopStyle: "solid",
6159
6271
  gap: props().itemGap
6160
6272
  });
6161
6273
  $$6.legacy_pre_effect(() => $$6.deep_read_state(props()), () => {
@@ -6227,6 +6339,7 @@ function MultiColumn($$anchor, $$props) {
6227
6339
  const style = $$5.mutable_state();
6228
6340
  let layerId = $$5.prop($$props, "layerId", 8);
6229
6341
  let props = $$5.prop($$props, "props", 8);
6342
+ const { brandKit } = useBrandKit();
6230
6343
  useInjectCustomizeCss(props());
6231
6344
  let listGap = (() => {
6232
6345
  if (!props().gap) return "0";
@@ -6244,8 +6357,8 @@ function MultiColumn($$anchor, $$props) {
6244
6357
  paddingRight: props().itemPaddingRight,
6245
6358
  paddingBottom: props().itemPaddingBottom,
6246
6359
  borderLeftWidth: props().borderWidth,
6247
- borderLeftColor: props().borderColor,
6248
- borderLeftStyle: props().borderStyle,
6360
+ borderLeftColor: props().borderColor ?? BORDER_COLOR_VARIANT[props().borderColorVariant]?.getProps(brandKit)?.borderColor,
6361
+ borderLeftStyle: props().borderStyle ?? "solid",
6249
6362
  gap: listGap,
6250
6363
  innerGap: props().itemGap
6251
6364
  });
@@ -6864,4 +6977,4 @@ const flexComponentSchemes = {
6864
6977
  };
6865
6978
 
6866
6979
  //#endregion
6867
- 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, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, ClipCopy as FlexClipCopy, CloseButton as FlexCloseButton, Code as FlexCode, CountDown as FlexCountDown, CountDownValue as FlexCountDownValue, FlexDirections, Icon as FlexIcon, Image as FlexImage, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, 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 };
6980
+ 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, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, ClipCopy as FlexClipCopy, CloseButton as FlexCloseButton, Code as FlexCode, CountDown as FlexCountDown, CountDownValue as FlexCountDownValue, FlexDirections, Icon as FlexIcon, Image as FlexImage, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, 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 };