<script module lang="ts">
  import Stack from "./Stack.svelte";
  import type { TextNodeProps } from "../../types/components/text";
  import { componentDecorator } from "../../stories/component-decorator";
  import { localizations } from "../../stories/fixtures";
  import { localizationDecorator } from "../../stories/localization-decorator";
  import type { StackProps } from "../../types/components/stack";
  import type { Component } from "../../types/component";
  import { STORY_BACKGROUND_VIDEO_FILL } from "../../stories/video-background-story-fixture";
  import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
  import { defineMeta } from "@storybook/addon-svelte-csf";

  const defaultLocale = Object.keys(localizations)[0];

  const components = [
    {
      type: "text",
      size: {
        width: { type: "fit" },
        height: { type: "fit" },
      },
      horizontal_alignment: "center",
      name: "Item 1",
      id: "1",
      text_lid: "id1",
      background_color: {
        dark: { type: "alias", value: "transparent" },
        light: { type: "alias", value: "transparent" },
      },
    },
    {
      type: "text",
      size: {
        width: { type: "fit" },
        height: { type: "fit" },
      },
      horizontal_alignment: "center",
      name: "Item 2",
      id: "2",
      text_lid: "id2",
      background_color: {
        dark: { type: "alias", value: "transparent" },
        light: { type: "alias", value: "transparent" },
      },
    },
    {
      type: "text",
      size: {
        width: { type: "fit" },
        height: { type: "fit" },
      },
      horizontal_alignment: "center",
      name: "Item 3",
      id: "3",
      text_lid: "id3",
      background_color: {
        dark: { type: "alias", value: "transparent" },
        light: { type: "alias", value: "transparent" },
      },
    },
  ] as unknown as TextNodeProps[];

  /** Z-layer: full-bleed image (layer 0), text label (layer 1). */
  const zlayerImageUnderText: Component[] = [
    {
      type: "image",
      id: "zlayer-bg",
      name: "Background image",
      size: { width: { type: "fill" }, height: { type: "fill" } },
      fit_mode: "fill",
      source: {
        light: {
          width: 600,
          height: 400,
          original:
            "https://placehold.co/600x400/1e293b/94a3b8?text=Layer+0+%28back%29",
          heic: "https://placehold.co/600x400",
          heic_low_res: "https://placehold.co/600x400",
          webp: "https://placehold.co/600x400",
          webp_low_res: "https://placehold.co/600x400",
        },
        dark: null,
      },
      margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
      padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
    },
    {
      type: "text",
      id: "zlayer-top",
      name: "Top label",
      text_lid: "id1",
      color: {
        light: { type: "hex", value: "#f8fafc" },
        dark: { type: "hex", value: "#f8fafc" },
      },
      font_name: null,
      font_size: "heading_m",
      font_weight: "semibold",
      horizontal_alignment: "center",
      background_color: {
        light: { type: "hex", value: "#0f172acc" },
        dark: { type: "hex", value: "#0f172acc" },
      },
      margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
      padding: { top: 12, bottom: 12, leading: 16, trailing: 16 },
      size: { width: { type: "fit" }, height: { type: "fit" } },
    },
  ];

  const { Story } = defineMeta({
    title: "Components/Stack",
    component: Stack,
    decorators: [
      componentDecorator(),
      localizationDecorator({
        defaultLocale,
        localizations,
      }),
    ],
    args: {
      type: "stack",
      id: "stack",
      name: "Stack",
      components,
      size: { width: { type: "fill" }, height: { type: "fill" } },
      dimension: {
        type: "vertical",
        alignment: "center",
        distribution: "start",
      },
      spacing: 16,
      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
      padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
      background_color: null,
      background: null,
      border: null,
      shape: null,
      shadow: null,
      badge: null,
    } satisfies StackProps,
  });
</script>

<Story name="Vertical Stack" />

<Story
  name="Horizontal Stack"
  args={{
    dimension: {
      type: "horizontal",
      alignment: "center",
      distribution: "space_between",
    },
  }}
/>

<Story
  name="Surface — video background"
  parameters={{
    chromatic: { disableSnapshot: true },
    docs: {
      description: {
        story:
          "**Z-order:** `BackgroundVideoSurface` (`z-index: 1`), `::before` tint (`z-index: 2`), siblings (`z-index: 3`). Content and controls should remain sharp above the tint; motion is disabled in Chromatic.",
      },
    },
  }}
  args={{
    size: {
      width: { type: "fixed", value: 380 },
      height: { type: "fixed", value: 260 },
    },
    shape: {
      type: "rectangle",
      corners: {
        top_leading: 20,
        top_trailing: 20,
        bottom_leading: 20,
        bottom_trailing: 20,
      },
    },
    background: STORY_BACKGROUND_VIDEO_FILL,
    components: [
      {
        type: "text",
        size: {
          width: { type: "fit" },
          height: { type: "fit" },
        },
        horizontal_alignment: "center",
        name: "Item 1",
        id: "vbg-1",
        text_lid: "id1",
        color: {
          light: { type: "hex", value: "#ffffff" },
        },
        font_name: null,
        font_size: "heading_s",
        font_weight: "bold",
        background_color: {
          dark: { type: "alias", value: "transparent" },
          light: { type: "alias", value: "transparent" },
        },
      },
      {
        type: "text",
        size: {
          width: { type: "fill" },
          height: { type: "fit" },
        },
        horizontal_alignment: "center",
        name: "Item 2",
        id: "vbg-2",
        text_lid: "id2",
        color: {
          light: { type: "hex", value: "#e2e8f0" },
        },
        font_name: null,
        font_size: "body_m",
        font_weight: "regular",
        background_color: {
          dark: { type: "alias", value: "transparent" },
          light: { type: "alias", value: "transparent" },
        },
      },
    ] as unknown as TextNodeProps[],
  }}
/>

<Story
  name="Z Layer"
  args={{
    size: {
      width: { type: "fixed", value: 200 },
      height: { type: "fixed", value: 200 },
    },
    dimension: {
      type: "zlayer",
      alignment: "center",
    },
    background: {
      type: "color",
      value: {
        light: { type: "hex", value: "#cfffe6" },
      },
    },
    border: {
      width: 1,
      color: {
        light: { type: "hex", value: "#dfdfc6" },
      },
    },
    shape: {
      type: "rectangle",
      corners: {
        top_leading: 16,
        top_trailing: 16,
        bottom_leading: 16,
        bottom_trailing: 16,
      },
    },
  }}
/>

<Story
  name="Z layer — image under text"
  args={{
    components: zlayerImageUnderText,
    size: {
      width: { type: "fixed", value: 320 },
      height: { type: "fixed", value: 220 },
    },
    dimension: {
      type: "zlayer",
      alignment: "center",
    },
    background: {
      type: "color",
      value: {
        light: { type: "hex", value: "#0f172a" },
      },
    },
    border: {
      width: 1,
      color: {
        light: { type: "hex", value: "#334155" },
        dark: { type: "hex", value: "#334155" },
      },
    },
    shape: {
      type: "rectangle",
      corners: {
        top_leading: 12,
        top_trailing: 12,
        bottom_leading: 12,
        bottom_trailing: 12,
      },
    },
  }}
  parameters={{
    chromatic: { disable: true },
  }}
/>

<Story
  name="Space Around"
  args={{
    dimension: {
      type: "horizontal",
      alignment: "center",
      distribution: "space_around",
    },
  }}
/>

<Story
  name="Background Colors"
  args={{
    background_color: {
      light: { type: "hex", value: "#C8E6FF" },
      dark: { type: "hex", value: "#C8E6FF" },
    },
  }}
/>

<Story
  name="Background - Color"
  args={{
    background: {
      type: "color",
      value: {
        light: { type: "hex", value: "#C8E6FF" },
        dark: { type: "hex", value: "#C8E6FF" },
      },
    },
  }}
/>

<Story
  name="Background - Image Fit"
  args={{
    background: {
      type: "image",
      fit_mode: "fit",
      color_overlay: null,
      value: {
        light: {
          width: 600,
          height: 400,
          original: "https://placehold.co/600x400",
          heic: "https://placehold.co/600x400",
          heic_low_res: "https://placehold.co/600x400",
          webp: "https://placehold.co/600x400",
          webp_low_res: "https://placehold.co/600x400",
        },
        dark: null,
      },
    },
  }}
/>

<Story
  name="Background - Image Fill"
  args={{
    background: {
      type: "image",
      fit_mode: "fill",
      color_overlay: {
        light: {
          type: "linear",
          degrees: 90,
          points: [
            { percent: 0, color: "#000000FF" },
            { percent: 100, color: "#00000000" },
          ],
        },
      },
      value: {
        light: {
          width: 600,
          height: 400,
          original: "https://placehold.co/600x400",
          heic: "https://placehold.co/600x400",
          heic_low_res: "https://placehold.co/600x400",
          webp: "https://placehold.co/600x400",
          webp_low_res: "https://placehold.co/600x400",
        },
        dark: null,
      },
    },
  }}
/>

<Story
  name="Border Styles"
  args={{
    border: {
      width: 10,
      color: {
        light: {
          type: "linear",
          degrees: 90,
          points: [
            { color: "#000000", percent: 0 },
            { color: "#FF0000", percent: 100 },
          ],
        },
      },
    },
    shape: {
      type: "rectangle",
      corners: {
        top_leading: 8,
        top_trailing: 8,
        bottom_leading: 8,
        bottom_trailing: 8,
      },
    },
  }}
/>

<Story
  name="Rounded Corners"
  args={{
    background_color: {
      light: { type: "hex", value: "#F0F0F0" },
      dark: { type: "hex", value: "#F0F0F0" },
    },
    shape: {
      type: "rectangle",
      corners: {
        top_leading: 24,
        top_trailing: 24,
        bottom_leading: 24,
        bottom_trailing: 24,
      },
    },
  }}
/>

<Story
  name="Fixed Size"
  args={{
    size: {
      width: { type: "fixed", value: 300 },
      height: { type: "fixed", value: 200 },
    },
    background_color: {
      light: { type: "hex", value: "#F0F0F0" },
      dark: { type: "hex", value: "#F0F0F0" },
    },
  }}
/>

<Story
  name="Shadow"
  args={{
    shadow: {
      x: 16,
      y: 16,
      radius: 8,
      color: {
        dark: { type: "hex", value: "#d3d3d3" },
        light: { type: "hex", value: "#d3d3d3" },
      },
    },
    border: {
      width: 2,
      color: {
        light: { type: "hex", value: "#646464" },
        dark: { type: "hex", value: "#646464" },
      },
    },
    shape: {
      type: "rectangle",
      corners: {
        top_leading: 8,
        top_trailing: 8,
        bottom_leading: 8,
        bottom_trailing: 8,
      },
    },
  }}
/>

<Story
  name="Complex - pill"
  args={{
    background: {
      color_overlay: null,
      fit_mode: "fill",
      type: "image",
      value: {
        light: {
          width: 600,
          height: 400,
          original: "https://placehold.co/600x400",
          heic: "https://placehold.co/600x400",
          heic_low_res: "https://placehold.co/600x400",
          webp: "https://placehold.co/600x400",
          webp_low_res: "https://placehold.co/600x400",
        },
        dark: null,
      },
    },
    border: {
      color: {
        light: {
          type: "hex",
          value: "#ff5f5fff",
        },
      },
      width: 4,
    },
    components: [
      {
        background_color: null,
        color: {
          light: {
            type: "hex",
            value: "#000000",
          },
        },
        font_name: null,
        font_size: "heading_xxl",
        font_weight: "regular",
        horizontal_alignment: "leading",
        id: "umK52AbZzu",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        size: {
          height: {
            type: "fit",
            value: null,
          },
          width: {
            type: "fit",
            value: null,
          },
        },
        text_lid: "id1",
        type: "text",
      },
      {
        background_color: null,
        color: {
          light: {
            type: "hex",
            value: "#000000",
          },
        },
        font_name: null,
        font_size: "body_l",
        font_weight: "regular",
        horizontal_alignment: "leading",
        id: "M8IKzsKSR_",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        size: {
          height: {
            type: "fit",
            value: null,
          },
          width: {
            type: "fit",
            value: null,
          },
        },
        text_lid: "id2",
        type: "text",
      },
    ],
    dimension: {
      alignment: "leading",
      distribution: "center",
      type: "vertical",
    },
    margin: {
      bottom: 32,
      leading: 32,
      top: 32,
      trailing: 32,
    },
    padding: {
      bottom: 64,
      leading: 64,
      top: 64,
      trailing: 64,
    },
    shadow: {
      color: {
        light: {
          type: "hex",
          value: "#52a62bFF",
        },
      },
      radius: 8,
      x: 4,
      y: 4,
    },
    shape: {
      type: "pill",
    },
    size: {
      height: {
        type: "fit",
        value: null,
      },
      width: {
        type: "fit",
        value: null,
      },
    },
    spacing: 64,
  }}
/>

<Story
  name="Complex - rectangle"
  args={{
    background: {
      type: "color",
      value: {
        light: {
          degrees: 0,
          points: [
            {
              color: "#fd9c97ff",
              percent: 0,
            },
            {
              color: "#f8ede9FF",
              percent: 100,
            },
          ],
          type: "linear",
        },
      },
    },
    background_color: null,
    badge: null,
    border: {
      color: {
        light: {
          type: "hex",
          value: "#ff5f5fff",
        },
      },
      width: 4,
    },
    components: [
      {
        background_color: null,
        color: {
          light: {
            type: "hex",
            value: "#000000",
          },
        },
        font_name: null,
        font_size: "heading_xxl",
        font_weight: "regular",
        horizontal_alignment: "leading",
        id: "UZ_VuqOviI",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        size: {
          height: {
            type: "fit",
            value: null,
          },
          width: {
            type: "fit",
            value: null,
          },
        },
        text_lid: "id1",
        type: "text",
      },
      {
        background_color: null,
        color: {
          light: {
            type: "hex",
            value: "#000000",
          },
        },
        font_name: null,
        font_size: "body_l",
        font_weight: "regular",
        horizontal_alignment: "leading",
        id: "Dp3J_bnDMv",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        size: {
          height: {
            type: "fit",
            value: null,
          },
          width: {
            type: "fit",
            value: null,
          },
        },
        text_lid: "id2",
        type: "text",
      },
    ],
    dimension: {
      alignment: "top",
      distribution: "center",
      type: "horizontal",
    },
    margin: {
      bottom: 32,
      leading: 32,
      top: 32,
      trailing: 32,
    },
    padding: {
      bottom: 64,
      leading: 64,
      top: 64,
      trailing: 64,
    },
    shadow: {
      color: {
        light: {
          type: "hex",
          value: "#52a62bFF",
        },
      },
      radius: 8,
      x: 4,
      y: 4,
    },
    shape: {
      corners: {
        bottom_leading: 64,
        bottom_trailing: 64,
        top_leading: 64,
        top_trailing: 64,
      },
      type: "rectangle",
    },
    size: {
      height: {
        type: "fit",
        value: null,
      },
      width: {
        type: "fill",
        value: null,
      },
    },
    spacing: 64,
  }}
/>

<Story
  name="Badge - Nested"
  args={{
    background: null,
    background_color: null,
    badge: null,
    border: {
      color: {
        light: {
          type: "hex",
          value: "#ce7422FF",
        },
      },
      width: 4,
    },
    components: [
      {
        background_color: null,
        color: {
          light: {
            type: "hex",
            value: "#000000",
          },
        },
        font_name: null,
        font_size: "body_l",
        font_weight: "regular",
        font_weight_int: 400,
        horizontal_alignment: "leading",
        id: "VNIt-KbgMy",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        size: {
          height: {
            type: "fit",
            value: null,
          },
          width: {
            type: "fit",
            value: null,
          },
        },
        text_lid: "id1",
        type: "text",
      },
      {
        background: null,
        background_color: null,
        badge: {
          alignment: "top_leading",
          stack: {
            background: {
              type: "color",
              value: {
                light: {
                  type: "hex",
                  value: "#11D483FF",
                },
              },
            },
            background_color: {
              light: {
                type: "hex",
                value: "#11D483FF",
              },
            },
            badge: null,
            border: null,
            components: [
              {
                background_color: null,
                color: {
                  light: {
                    type: "hex",
                    value: "#000000",
                  },
                },
                font_name: null,
                font_size: "body_l",
                font_weight: "regular",
                font_weight_int: 400,
                horizontal_alignment: "center",
                id: "XJmn-sdQXj",
                margin: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                name: "",
                padding: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                size: {
                  height: {
                    type: "fit",
                    value: null,
                  },
                  width: {
                    type: "fit",
                    value: null,
                  },
                },
                text_lid: "id1",
                type: "text",
              },
            ],
            dimension: {
              alignment: "center",
              distribution: "center",
              type: "vertical",
            },
            id: "pEc1t-ZTg1",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 4,
              leading: 8,
              top: 4,
              trailing: 8,
            },
            shadow: null,
            shape: {
              corners: {
                bottom_leading: 8,
                bottom_trailing: 8,
                top_leading: 8,
                top_trailing: 8,
              },
              type: "rectangle",
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            spacing: 0,
            type: "stack",
          },
          style: "nested",
        },
        border: null,
        components: [],
        dimension: {
          alignment: "leading",
          distribution: "start",
          type: "vertical",
        },
        id: "5XAOKjFZMB",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        shadow: null,
        shape: {
          corners: {
            bottom_leading: 8,
            bottom_trailing: 8,
            top_leading: 8,
            top_trailing: 8,
          },
          type: "rectangle",
        },
        size: {
          height: {
            type: "fill",
            value: null,
          },
          width: {
            type: "fill",
            value: null,
          },
        },
        spacing: 0,
        type: "stack",
      },
      {
        background: null,
        background_color: null,
        badge: {
          alignment: "top",
          stack: {
            background: {
              type: "color",
              value: {
                light: {
                  type: "hex",
                  value: "#11D483FF",
                },
              },
            },
            background_color: {
              light: {
                type: "hex",
                value: "#11D483FF",
              },
            },
            badge: null,
            border: null,
            components: [
              {
                background_color: null,
                color: {
                  light: {
                    type: "hex",
                    value: "#000000",
                  },
                },
                font_name: null,
                font_size: "body_l",
                font_weight: "regular",
                font_weight_int: 400,
                horizontal_alignment: "center",
                id: "60Zs_3AB08",
                margin: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                name: "",
                padding: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                size: {
                  height: {
                    type: "fit",
                    value: null,
                  },
                  width: {
                    type: "fit",
                    value: null,
                  },
                },
                text_lid: "id1",
                type: "text",
              },
            ],
            dimension: {
              alignment: "center",
              distribution: "center",
              type: "vertical",
            },
            id: "1Oa86IS8Bl",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 4,
              leading: 8,
              top: 4,
              trailing: 8,
            },
            shadow: null,
            shape: {
              corners: {
                bottom_leading: 8,
                bottom_trailing: 8,
                top_leading: 8,
                top_trailing: 8,
              },
              type: "rectangle",
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            spacing: 0,
            type: "stack",
          },
          style: "nested",
        },
        border: null,
        components: [],
        dimension: {
          alignment: "leading",
          distribution: "start",
          type: "vertical",
        },
        id: "90kssRsjvg",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        shadow: null,
        shape: {
          corners: {
            bottom_leading: 8,
            bottom_trailing: 8,
            top_leading: 8,
            top_trailing: 8,
          },
          type: "rectangle",
        },
        size: {
          height: {
            type: "fill",
            value: null,
          },
          width: {
            type: "fill",
            value: null,
          },
        },
        spacing: 0,
        type: "stack",
      },
      {
        background: null,
        background_color: null,
        badge: {
          alignment: "top_trailing",
          stack: {
            background: {
              type: "color",
              value: {
                light: {
                  type: "hex",
                  value: "#11D483FF",
                },
              },
            },
            background_color: {
              light: {
                type: "hex",
                value: "#11D483FF",
              },
            },
            badge: null,
            border: null,
            components: [
              {
                background_color: null,
                color: {
                  light: {
                    type: "hex",
                    value: "#000000",
                  },
                },
                font_name: null,
                font_size: "body_l",
                font_weight: "regular",
                font_weight_int: 400,
                horizontal_alignment: "center",
                id: "702_1vQ1dR",
                margin: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                name: "",
                padding: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                size: {
                  height: {
                    type: "fit",
                    value: null,
                  },
                  width: {
                    type: "fit",
                    value: null,
                  },
                },
                text_lid: "id1",
                type: "text",
              },
            ],
            dimension: {
              alignment: "center",
              distribution: "center",
              type: "vertical",
            },
            id: "ieguZ4b9o6",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 4,
              leading: 8,
              top: 4,
              trailing: 8,
            },
            shadow: null,
            shape: {
              corners: {
                bottom_leading: 8,
                bottom_trailing: 8,
                top_leading: 8,
                top_trailing: 8,
              },
              type: "rectangle",
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            spacing: 0,
            type: "stack",
          },
          style: "nested",
        },
        border: null,
        components: [],
        dimension: {
          alignment: "leading",
          distribution: "start",
          type: "vertical",
        },
        id: "qb-tcqZNir",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        shadow: null,
        shape: {
          corners: {
            bottom_leading: 8,
            bottom_trailing: 8,
            top_leading: 8,
            top_trailing: 8,
          },
          type: "rectangle",
        },
        size: {
          height: {
            type: "fill",
            value: null,
          },
          width: {
            type: "fill",
            value: null,
          },
        },
        spacing: 0,
        type: "stack",
      },
      {
        background: null,
        background_color: null,
        badge: {
          alignment: "bottom_leading",
          stack: {
            background: {
              type: "color",
              value: {
                light: {
                  type: "hex",
                  value: "#11D483FF",
                },
              },
            },
            background_color: {
              light: {
                type: "hex",
                value: "#11D483FF",
              },
            },
            badge: null,
            border: null,
            components: [
              {
                background_color: null,
                color: {
                  light: {
                    type: "hex",
                    value: "#000000",
                  },
                },
                font_name: null,
                font_size: "body_l",
                font_weight: "regular",
                font_weight_int: 400,
                horizontal_alignment: "center",
                id: "rw0LciXvUN",
                margin: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                name: "",
                padding: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                size: {
                  height: {
                    type: "fit",
                    value: null,
                  },
                  width: {
                    type: "fit",
                    value: null,
                  },
                },
                text_lid: "id1",
                type: "text",
              },
            ],
            dimension: {
              alignment: "center",
              distribution: "center",
              type: "vertical",
            },
            id: "XO3TEg3ZN7",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 4,
              leading: 8,
              top: 4,
              trailing: 8,
            },
            shadow: null,
            shape: {
              corners: {
                bottom_leading: 8,
                bottom_trailing: 8,
                top_leading: 8,
                top_trailing: 8,
              },
              type: "rectangle",
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            spacing: 0,
            type: "stack",
          },
          style: "nested",
        },
        border: null,
        components: [],
        dimension: {
          alignment: "leading",
          distribution: "start",
          type: "vertical",
        },
        id: "cL3VQsRCX1",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        shadow: null,
        shape: {
          corners: {
            bottom_leading: 8,
            bottom_trailing: 8,
            top_leading: 8,
            top_trailing: 8,
          },
          type: "rectangle",
        },
        size: {
          height: {
            type: "fill",
            value: null,
          },
          width: {
            type: "fill",
            value: null,
          },
        },
        spacing: 0,
        type: "stack",
      },
      {
        background: null,
        background_color: null,
        badge: {
          alignment: "bottom",
          stack: {
            background: {
              type: "color",
              value: {
                light: {
                  type: "hex",
                  value: "#11D483FF",
                },
              },
            },
            background_color: {
              light: {
                type: "hex",
                value: "#11D483FF",
              },
            },
            badge: null,
            border: null,
            components: [
              {
                background_color: null,
                color: {
                  light: {
                    type: "hex",
                    value: "#000000",
                  },
                },
                font_name: null,
                font_size: "body_l",
                font_weight: "regular",
                font_weight_int: 400,
                horizontal_alignment: "center",
                id: "pnjRUqk3vX",
                margin: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                name: "",
                padding: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                size: {
                  height: {
                    type: "fit",
                    value: null,
                  },
                  width: {
                    type: "fit",
                    value: null,
                  },
                },
                text_lid: "id1",
                type: "text",
              },
            ],
            dimension: {
              alignment: "center",
              distribution: "center",
              type: "vertical",
            },
            id: "A14as8xzSH",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 4,
              leading: 8,
              top: 4,
              trailing: 8,
            },
            shadow: null,
            shape: {
              corners: {
                bottom_leading: 8,
                bottom_trailing: 8,
                top_leading: 8,
                top_trailing: 8,
              },
              type: "rectangle",
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            spacing: 0,
            type: "stack",
          },
          style: "nested",
        },
        border: null,
        components: [],
        dimension: {
          alignment: "leading",
          distribution: "start",
          type: "vertical",
        },
        id: "OvuAwaXhOf",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        shadow: null,
        shape: {
          corners: {
            bottom_leading: 8,
            bottom_trailing: 8,
            top_leading: 8,
            top_trailing: 8,
          },
          type: "rectangle",
        },
        size: {
          height: {
            type: "fill",
            value: null,
          },
          width: {
            type: "fill",
            value: null,
          },
        },
        spacing: 0,
        type: "stack",
      },
      {
        background: null,
        background_color: null,
        badge: {
          alignment: "bottom_trailing",
          stack: {
            background: {
              type: "color",
              value: {
                light: {
                  type: "hex",
                  value: "#11D483FF",
                },
              },
            },
            background_color: {
              light: {
                type: "hex",
                value: "#11D483FF",
              },
            },
            badge: null,
            border: null,
            components: [
              {
                background_color: null,
                color: {
                  light: {
                    type: "hex",
                    value: "#000000",
                  },
                },
                font_name: null,
                font_size: "body_l",
                font_weight: "regular",
                font_weight_int: 400,
                horizontal_alignment: "center",
                id: "4CwpRZoreT",
                margin: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                name: "",
                padding: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                size: {
                  height: {
                    type: "fit",
                    value: null,
                  },
                  width: {
                    type: "fit",
                    value: null,
                  },
                },
                text_lid: "id1",
                type: "text",
              },
            ],
            dimension: {
              alignment: "center",
              distribution: "center",
              type: "vertical",
            },
            id: "8dJOAHTQvq",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 4,
              leading: 8,
              top: 4,
              trailing: 8,
            },
            shadow: null,
            shape: {
              corners: {
                bottom_leading: 8,
                bottom_trailing: 8,
                top_leading: 8,
                top_trailing: 8,
              },
              type: "rectangle",
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            spacing: 0,
            type: "stack",
          },
          style: "nested",
        },
        border: null,
        components: [],
        dimension: {
          alignment: "leading",
          distribution: "start",
          type: "vertical",
        },
        id: "SScgUBQg0B",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        shadow: null,
        shape: {
          corners: {
            bottom_leading: 8,
            bottom_trailing: 8,
            top_leading: 8,
            top_trailing: 8,
          },
          type: "rectangle",
        },
        size: {
          height: {
            type: "fill",
            value: null,
          },
          width: {
            type: "fill",
            value: null,
          },
        },
        spacing: 0,
        type: "stack",
      },
    ],
    dimension: {
      alignment: "center",
      type: "zlayer",
    },
    id: "STJwr4dzhC",
    margin: {
      bottom: 0,
      leading: 0,
      top: 0,
      trailing: 0,
    },
    name: "",
    padding: {
      bottom: 0,
      leading: 0,
      top: 0,
      trailing: 8,
    },
    shadow: null,
    shape: {
      corners: {
        bottom_leading: 64,
        bottom_trailing: 32,
        top_leading: 0,
        top_trailing: 16,
      },
      type: "rectangle",
    },
    size: {
      height: {
        type: "fixed",
        value: 300,
      },
      width: {
        type: "fixed",
        value: 300,
      },
    },
    spacing: 0,
    type: "stack",
  }}
/>

<Story
  name="Badge - Overlaid"
  args={{
    background: null,
    background_color: null,
    badge: null,
    border: {
      color: {
        light: {
          type: "hex",
          value: "#ce7422FF",
        },
      },
      width: 4,
    },
    components: [
      {
        background_color: null,
        color: {
          light: {
            type: "hex",
            value: "#000000",
          },
        },
        font_name: null,
        font_size: "body_l",
        font_weight: "regular",
        font_weight_int: 400,
        horizontal_alignment: "leading",
        id: "VNIt-KbgMy",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        size: {
          height: {
            type: "fit",
            value: null,
          },
          width: {
            type: "fit",
            value: null,
          },
        },
        text_lid: "id1",
        type: "text",
      },
      {
        background: null,
        background_color: null,
        badge: {
          alignment: "top_leading",
          stack: {
            background: {
              type: "color",
              value: {
                light: {
                  type: "hex",
                  value: "#11D483FF",
                },
              },
            },
            background_color: {
              light: {
                type: "hex",
                value: "#11D483FF",
              },
            },
            badge: null,
            border: null,
            components: [
              {
                background_color: null,
                color: {
                  light: {
                    type: "hex",
                    value: "#000000",
                  },
                },
                font_name: null,
                font_size: "body_l",
                font_weight: "regular",
                font_weight_int: 400,
                horizontal_alignment: "center",
                id: "XJmn-sdQXj",
                margin: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                name: "",
                padding: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                size: {
                  height: {
                    type: "fit",
                    value: null,
                  },
                  width: {
                    type: "fit",
                    value: null,
                  },
                },
                text_lid: "id1",
                type: "text",
              },
            ],
            dimension: {
              alignment: "center",
              distribution: "center",
              type: "vertical",
            },
            id: "pEc1t-ZTg1",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 4,
              leading: 8,
              top: 4,
              trailing: 8,
            },
            shadow: null,
            shape: {
              corners: {
                bottom_leading: 8,
                bottom_trailing: 8,
                top_leading: 8,
                top_trailing: 8,
              },
              type: "rectangle",
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            spacing: 0,
            type: "stack",
          },
          style: "overlay",
        },
        border: null,
        components: [],
        dimension: {
          alignment: "leading",
          distribution: "start",
          type: "vertical",
        },
        id: "5XAOKjFZMB",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        shadow: null,
        shape: {
          corners: {
            bottom_leading: 8,
            bottom_trailing: 8,
            top_leading: 8,
            top_trailing: 8,
          },
          type: "rectangle",
        },
        size: {
          height: {
            type: "fill",
            value: null,
          },
          width: {
            type: "fill",
            value: null,
          },
        },
        spacing: 0,
        type: "stack",
      },
      {
        background: null,
        background_color: null,
        badge: {
          alignment: "top",
          stack: {
            background: {
              type: "color",
              value: {
                light: {
                  type: "hex",
                  value: "#11D483FF",
                },
              },
            },
            background_color: {
              light: {
                type: "hex",
                value: "#11D483FF",
              },
            },
            badge: null,
            border: null,
            components: [
              {
                background_color: null,
                color: {
                  light: {
                    type: "hex",
                    value: "#000000",
                  },
                },
                font_name: null,
                font_size: "body_l",
                font_weight: "regular",
                font_weight_int: 400,
                horizontal_alignment: "center",
                id: "60Zs_3AB08",
                margin: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                name: "",
                padding: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                size: {
                  height: {
                    type: "fit",
                    value: null,
                  },
                  width: {
                    type: "fit",
                    value: null,
                  },
                },
                text_lid: "id1",
                type: "text",
              },
            ],
            dimension: {
              alignment: "center",
              distribution: "center",
              type: "vertical",
            },
            id: "1Oa86IS8Bl",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 4,
              leading: 8,
              top: 4,
              trailing: 8,
            },
            shadow: null,
            shape: {
              corners: {
                bottom_leading: 8,
                bottom_trailing: 8,
                top_leading: 8,
                top_trailing: 8,
              },
              type: "rectangle",
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            spacing: 0,
            type: "stack",
          },
          style: "overlay",
        },
        border: null,
        components: [],
        dimension: {
          alignment: "leading",
          distribution: "start",
          type: "vertical",
        },
        id: "90kssRsjvg",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        shadow: null,
        shape: {
          corners: {
            bottom_leading: 8,
            bottom_trailing: 8,
            top_leading: 8,
            top_trailing: 8,
          },
          type: "rectangle",
        },
        size: {
          height: {
            type: "fill",
            value: null,
          },
          width: {
            type: "fill",
            value: null,
          },
        },
        spacing: 0,
        type: "stack",
      },
      {
        background: null,
        background_color: null,
        badge: {
          alignment: "top_trailing",
          stack: {
            background: {
              type: "color",
              value: {
                light: {
                  type: "hex",
                  value: "#11D483FF",
                },
              },
            },
            background_color: {
              light: {
                type: "hex",
                value: "#11D483FF",
              },
            },
            badge: null,
            border: null,
            components: [
              {
                background_color: null,
                color: {
                  light: {
                    type: "hex",
                    value: "#000000",
                  },
                },
                font_name: null,
                font_size: "body_l",
                font_weight: "regular",
                font_weight_int: 400,
                horizontal_alignment: "center",
                id: "702_1vQ1dR",
                margin: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                name: "",
                padding: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                size: {
                  height: {
                    type: "fit",
                    value: null,
                  },
                  width: {
                    type: "fit",
                    value: null,
                  },
                },
                text_lid: "id1",
                type: "text",
              },
            ],
            dimension: {
              alignment: "center",
              distribution: "center",
              type: "vertical",
            },
            id: "ieguZ4b9o6",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 4,
              leading: 8,
              top: 4,
              trailing: 8,
            },
            shadow: null,
            shape: {
              corners: {
                bottom_leading: 8,
                bottom_trailing: 8,
                top_leading: 8,
                top_trailing: 8,
              },
              type: "rectangle",
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            spacing: 0,
            type: "stack",
          },
          style: "overlay",
        },
        border: null,
        components: [],
        dimension: {
          alignment: "leading",
          distribution: "start",
          type: "vertical",
        },
        id: "qb-tcqZNir",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        shadow: null,
        shape: {
          corners: {
            bottom_leading: 8,
            bottom_trailing: 8,
            top_leading: 8,
            top_trailing: 8,
          },
          type: "rectangle",
        },
        size: {
          height: {
            type: "fill",
            value: null,
          },
          width: {
            type: "fill",
            value: null,
          },
        },
        spacing: 0,
        type: "stack",
      },
      {
        background: null,
        background_color: null,
        badge: {
          alignment: "bottom_leading",
          stack: {
            background: {
              type: "color",
              value: {
                light: {
                  type: "hex",
                  value: "#11D483FF",
                },
              },
            },
            background_color: {
              light: {
                type: "hex",
                value: "#11D483FF",
              },
            },
            badge: null,
            border: null,
            components: [
              {
                background_color: null,
                color: {
                  light: {
                    type: "hex",
                    value: "#000000",
                  },
                },
                font_name: null,
                font_size: "body_l",
                font_weight: "regular",
                font_weight_int: 400,
                horizontal_alignment: "center",
                id: "rw0LciXvUN",
                margin: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                name: "",
                padding: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                size: {
                  height: {
                    type: "fit",
                    value: null,
                  },
                  width: {
                    type: "fit",
                    value: null,
                  },
                },
                text_lid: "id1",
                type: "text",
              },
            ],
            dimension: {
              alignment: "center",
              distribution: "center",
              type: "vertical",
            },
            id: "XO3TEg3ZN7",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 4,
              leading: 8,
              top: 4,
              trailing: 8,
            },
            shadow: null,
            shape: {
              corners: {
                bottom_leading: 8,
                bottom_trailing: 8,
                top_leading: 8,
                top_trailing: 8,
              },
              type: "rectangle",
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            spacing: 0,
            type: "stack",
          },
          style: "overlay",
        },
        border: null,
        components: [],
        dimension: {
          alignment: "leading",
          distribution: "start",
          type: "vertical",
        },
        id: "cL3VQsRCX1",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        shadow: null,
        shape: {
          corners: {
            bottom_leading: 8,
            bottom_trailing: 8,
            top_leading: 8,
            top_trailing: 8,
          },
          type: "rectangle",
        },
        size: {
          height: {
            type: "fill",
            value: null,
          },
          width: {
            type: "fill",
            value: null,
          },
        },
        spacing: 0,
        type: "stack",
      },
      {
        background: null,
        background_color: null,
        badge: {
          alignment: "bottom",
          stack: {
            background: {
              type: "color",
              value: {
                light: {
                  type: "hex",
                  value: "#11D483FF",
                },
              },
            },
            background_color: {
              light: {
                type: "hex",
                value: "#11D483FF",
              },
            },
            badge: null,
            border: null,
            components: [
              {
                background_color: null,
                color: {
                  light: {
                    type: "hex",
                    value: "#000000",
                  },
                },
                font_name: null,
                font_size: "body_l",
                font_weight: "regular",
                font_weight_int: 400,
                horizontal_alignment: "center",
                id: "pnjRUqk3vX",
                margin: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                name: "",
                padding: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                size: {
                  height: {
                    type: "fit",
                    value: null,
                  },
                  width: {
                    type: "fit",
                    value: null,
                  },
                },
                text_lid: "id1",
                type: "text",
              },
            ],
            dimension: {
              alignment: "center",
              distribution: "center",
              type: "vertical",
            },
            id: "A14as8xzSH",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 4,
              leading: 8,
              top: 4,
              trailing: 8,
            },
            shadow: null,
            shape: {
              corners: {
                bottom_leading: 8,
                bottom_trailing: 8,
                top_leading: 8,
                top_trailing: 8,
              },
              type: "rectangle",
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            spacing: 0,
            type: "stack",
          },
          style: "overlay",
        },
        border: null,
        components: [],
        dimension: {
          alignment: "leading",
          distribution: "start",
          type: "vertical",
        },
        id: "OvuAwaXhOf",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        shadow: null,
        shape: {
          corners: {
            bottom_leading: 8,
            bottom_trailing: 8,
            top_leading: 8,
            top_trailing: 8,
          },
          type: "rectangle",
        },
        size: {
          height: {
            type: "fill",
            value: null,
          },
          width: {
            type: "fill",
            value: null,
          },
        },
        spacing: 0,
        type: "stack",
      },
      {
        background: null,
        background_color: null,
        badge: {
          alignment: "bottom_trailing",
          stack: {
            background: {
              type: "color",
              value: {
                light: {
                  type: "hex",
                  value: "#11D483FF",
                },
              },
            },
            background_color: {
              light: {
                type: "hex",
                value: "#11D483FF",
              },
            },
            badge: null,
            border: null,
            components: [
              {
                background_color: null,
                color: {
                  light: {
                    type: "hex",
                    value: "#000000",
                  },
                },
                font_name: null,
                font_size: "body_l",
                font_weight: "regular",
                font_weight_int: 400,
                horizontal_alignment: "center",
                id: "4CwpRZoreT",
                margin: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                name: "",
                padding: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                size: {
                  height: {
                    type: "fit",
                    value: null,
                  },
                  width: {
                    type: "fit",
                    value: null,
                  },
                },
                text_lid: "id1",
                type: "text",
              },
            ],
            dimension: {
              alignment: "center",
              distribution: "center",
              type: "vertical",
            },
            id: "8dJOAHTQvq",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 4,
              leading: 8,
              top: 4,
              trailing: 8,
            },
            shadow: null,
            shape: {
              corners: {
                bottom_leading: 8,
                bottom_trailing: 8,
                top_leading: 8,
                top_trailing: 8,
              },
              type: "rectangle",
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            spacing: 0,
            type: "stack",
          },
          style: "overlay",
        },
        border: null,
        components: [],
        dimension: {
          alignment: "leading",
          distribution: "start",
          type: "vertical",
        },
        id: "SScgUBQg0B",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        shadow: null,
        shape: {
          corners: {
            bottom_leading: 8,
            bottom_trailing: 8,
            top_leading: 8,
            top_trailing: 8,
          },
          type: "rectangle",
        },
        size: {
          height: {
            type: "fill",
            value: null,
          },
          width: {
            type: "fill",
            value: null,
          },
        },
        spacing: 0,
        type: "stack",
      },
    ],
    dimension: {
      alignment: "center",
      type: "zlayer",
    },
    id: "STJwr4dzhC",
    margin: {
      bottom: 0,
      leading: 0,
      top: 0,
      trailing: 0,
    },
    name: "",
    padding: {
      bottom: 0,
      leading: 0,
      top: 0,
      trailing: 8,
    },
    shadow: null,
    shape: {
      corners: {
        bottom_leading: 64,
        bottom_trailing: 32,
        top_leading: 0,
        top_trailing: 16,
      },
      type: "rectangle",
    },
    size: {
      height: {
        type: "fixed",
        value: 300,
      },
      width: {
        type: "fixed",
        value: 300,
      },
    },
    spacing: 0,
    type: "stack",
  }}
/>

<Story
  name="Badge - edge-to-edge top centered"
  args={{
    type: "stack",
    dimension: {
      type: "vertical",
      alignment: "center",
      distribution: "space_around",
    },
    background_color: {
      light: { type: "hex", value: "#FFFFFF" },
      dark: { type: "hex", value: "#FFFFFF" },
    },
    components,
    border: {
      width: 2,
      color: {
        light: { type: "hex", value: "#47aab1" },
      },
    },
    shape: {
      type: "rectangle",
      corners: {
        top_leading: 8,
        top_trailing: 8,
        bottom_leading: 8,
        bottom_trailing: 8,
      },
    },
    spacing: 16,
    padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
    margin: { top: 32, trailing: 16, bottom: 16, leading: 16 },
    size: {
      width: { type: "fixed", value: 500 },
      height: { type: "fixed", value: 500 },
    },
    badge: {
      stack: {
        type: "stack",
        id: "badge",
        name: "",
        components: [
          {
            id: "text",
            type: "text",
            name: "",
            text_lid: "badge",
            color: { light: { type: "hex", value: DEFAULT_TEXT_COLOR } },
            font_weight: "bold",
            font_size: "body_s",
            horizontal_alignment: "center",
            margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
            padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
            size: { width: { type: "fit" }, height: { type: "fit" } },
          },
        ],
        shape: {
          type: "rectangle",
          corners: {
            top_leading: 8,
            top_trailing: 8,
            bottom_leading: 8,
            bottom_trailing: 8,
          },
        },
        padding: { top: 4, trailing: 12, bottom: 4, leading: 12 },
        margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
        background_color: {
          light: { type: "hex", value: "#47aab1" },
        },
        background: null,
        size: { width: { type: "fit" }, height: { type: "fit" } },
        dimension: {
          type: "vertical",
          distribution: "center",
          alignment: "center",
        },
        border: null,
        shadow: null,
        spacing: 0,
      },
      style: "edge_to_edge",
      alignment: "top",
    },
  }}
/>
