codegen.test.ts.snap

// Bun Snapshot v1, https://bun.sh/docs/test/snapshots

exports[`Codegen renders simple component without variants 1`] = `"<Box boxSize="100%" />"`;

exports[`Codegen renders overflow hidden when clipsContent is true 1`] = `"<Box boxSize="100%" overflow="hidden" />"`;

exports[`Codegen renders objectFit contain for image asset 1`] = `"<Image h="80px" objectFit="contain" src="/images/ObjectFitContain.png" w="100px" />"`;

exports[`Codegen renders objectFit cover for image asset 1`] = `"<Image h="90px" objectFit="cover" src="/images/ObjectFitCover.png" w="120px" />"`;

exports[`Codegen omits objectFit when image scale mode is FILL 1`] = `"<Image h="70px" src="/images/ObjectFitFill.png" w="110px" />"`;

exports[`Codegen renders svg asset with vector node 1`] = `"<Image boxSize="24px" src="/icons/VectorIcon.svg" />"`;

exports[`Codegen renders svg asset with star node 1`] = `"<Image boxSize="24px" src="/icons/StarIcon.svg" />"`;

exports[`Codegen renders svg asset with polygon node 1`] = `"<Image boxSize="24px" src="/icons/PolygonIcon.svg" />"`;

exports[`Codegen renders svg asset with ellipse inner radius 1`] = `"<Image boxSize="24px" src="/icons/EllipseIcon.svg" />"`;

exports[`Codegen renders svg asset with non-solid fills 1`] = `"<Image boxSize="24px" src="/icons/GradientAsset.svg" />"`;

exports[`Codegen renders asset with single child and fills 1`] = `
"<Box bg="#F00" boxSize="24px">
  <Image boxSize="24px" src="/icons/ChildVector.svg" />
</Box>"
`;

exports[`Codegen renders null for asset with only solid fills 1`] = `"<Box bg="#F00" boxSize="24px" />"`;

exports[`Codegen renders frame with bound variable color 1`] = `"<Box bg="$primaryColor" h="50px" w="100px" />"`;

exports[`Codegen renders svg asset with same color mask 1`] = `
"<Box
  bg="#F00"
  boxSize="24px"
  maskImage="url(/icons/MaskIcon.svg)"
  maskPos="center"
  maskRepeat="no-repeat"
  maskSize="contain"
/>"
`;

exports[`Codegen renders svg asset with children same color 1`] = `
"<Box
  bg="#F00"
  boxSize="24px"
  maskImage="url(/icons/GroupIcon.svg)"
  maskPos="center"
  maskRepeat="no-repeat"
  maskSize="contain"
/>"
`;

exports[`Codegen renders svg asset with different color children 1`] = `"<Image boxSize="24px" src="/icons/MixedIcon.svg" />"`;

exports[`Codegen renders svg asset with non-solid fill 1`] = `"<Image boxSize="24px" src="/icons/GradientIcon.svg" />"`;

exports[`Codegen renders svg asset with invisible fill 1`] = `"<Image boxSize="24px" src="/icons/InvisibleIcon.svg" />"`;

exports[`Codegen renders nested svg asset with 3 solid fill boxes in frame 1`] = `
"<Box
  bg="#F00"
  boxSize="24px"
  maskImage="url(/icons/NestedIcon.svg)"
  maskPos="center"
  maskRepeat="no-repeat"
  maskSize="contain"
/>"
`;

exports[`Codegen renders nested svg asset with different colors as image 1`] = `"<Image boxSize="24px" src="/icons/NestedMultiColorIcon.svg" />"`;

exports[`Codegen renders layout for absolute child same size as parent 1`] = `
"<Box boxSize="100%" pos="relative">
  <Box boxSize="100%" left="0px" pos="absolute" top="0px" />
</Box>"
`;

exports[`Codegen renders absolute child with horizontal MAX constraint 1`] = `
"<Flex boxSize="100%" pos="relative">
  <Box h="100%" pos="absolute" right="0px" top="50px" />
</Flex>"
`;

exports[`Codegen renders absolute child with horizontal CENTER constraint 1`] = `
"<VStack boxSize="100%" pos="relative">
  <Box
    h="100%"
    left="50%"
    pos="absolute"
    top="50%"
    transform="translate(-50%, -50%)"
  />
</VStack>"
`;

exports[`Codegen renders absolute child with vertical MAX constraint 1`] = `
"<Flex boxSize="100%" pos="relative">
  <Box bottom="0px" h="100%" left="50px" pos="absolute" />
</Flex>"
`;

exports[`Codegen renders absolute child with vertical CENTER constraint 1`] = `
"<VStack boxSize="100%" pos="relative">
  <Box
    h="100%"
    left="300px"
    pos="absolute"
    top="50%"
    transform="translateY(-50%)"
  />
</VStack>"
`;

exports[`Codegen renders flex=1 when parent is horizontal auto layout 1`] = `
"<Box boxSize="100%">
  <Box flex="1" h="50px" w="100%" />
</Box>"
`;

exports[`Codegen renders aspect ratio when provided 1`] = `"<Box aspectRatio="1.33" boxSize="100%" />"`;

exports[`Codegen renders text with width_and_height auto resize returning no size props 1`] = `
"<Text
  color="#F00"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
>
  AutoSize
</Text>"
`;

exports[`Codegen renders text with special characters 1`] = `
"<Text
  color="#000"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  h="20px"
  letterSpacing="0px"
  lineHeight="1.5px"
  w="100px"
>
  Text with {"{"}braces{"}"} {"&"} {"<"}tags{">"}
</Text>"
`;

exports[`Codegen renders text with leading and trailing spaces 1`] = `
"<Text
  color="#000"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  h="20px"
  letterSpacing="0px"
  lineHeight="1.5px"
  w="100px"
>
  {"  "}spaced{"  "}
</Text>"
`;

exports[`Codegen renders single-line max line props 1`] = `
"<Text
  boxSize="100%"
  color="#F00"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
  whiteSpace="nowrap"
>
  OneLine
</Text>"
`;

exports[`Codegen renders multi-line max line props 1`] = `
"<Text
  WebkitBoxOrient="vertical"
  WebkitLineClamp="3"
  boxSize="100%"
  color="#F00"
  display="-webkit-box"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
>
  Three lines of text
</Text>"
`;

exports[`Codegen renders fixed size frame 1`] = `"<Box h="80px" w="120px" />"`;

exports[`Codegen renders frame with padding 1`] = `"<Box h="50px" px="16px" py="8px" w="100px" />"`;

exports[`Codegen renders padding shorthand when all sides equal 1`] = `"<Box h="40px" p="12px" w="80px" />"`;

exports[`Codegen renders padding with top equals bottom but left right different 1`] = `
"<Box
  h="60px"
  pl="30px"
  pr="20px"
  py="10px"
  w="100px"
/>"
`;

exports[`Codegen renders padding with left equals right but top bottom different 1`] = `
"<Box
  h="50px"
  pb="25px"
  pt="5px"
  px="15px"
  w="90px"
/>"
`;

exports[`Codegen renders padding with all sides different 1`] = `
"<Box
  h="70px"
  pb="3px"
  pl="4px"
  pr="2px"
  pt="1px"
  w="110px"
/>"
`;

exports[`Codegen renders padding from inferredAutoLayout 1`] = `"<Box h="50px" px="20px" py="10px" w="100px" />"`;

exports[`Codegen renders frame with border radius 1`] = `"<Box borderRadius="8px" h="80px" w="120px" />"`;

exports[`Codegen renders mixed border radius frame 1`] = `"<Box borderRadius="8px 4px 2px 1px" boxSize="100%" />"`;

exports[`Codegen renders ellipse with 50% border radius 1`] = `"<Box borderRadius="50%" boxSize="100px" />"`;

exports[`Codegen renders frame with stroke outline CENTER alignment 1`] = `"<Box h="50px" outline="solid 2px #00F" outlineOffset="-1px" w="100px" />"`;

exports[`Codegen renders frame with stroke outline OUTSIDE alignment 1`] = `"<Box h="60px" outline="solid 3px #F00" w="120px" />"`;

exports[`Codegen renders frame with stroke border INSIDE alignment 1`] = `"<Box border="solid 1px #0F0" h="40px" w="80px" />"`;

exports[`Codegen renders line with stroke outline 1`] = `"<Box boxSize="100%" maxW="calc(100% - 4px)" outline="solid 2px #F00" transform="translate(2px, -2px)" />"`;

exports[`Codegen renders frame with dashed stroke 1`] = `"<Box h="50px" outline="dashed 2px #00F" outlineOffset="-1px" w="100px" />"`;

exports[`Codegen renders frame with page parent and width 1920 1`] = `"<Box />"`;

exports[`Codegen renders frame with section parent 1`] = `"<Box />"`;

exports[`Codegen renders frame with vertical center align child width shrinker 1`] = `
"<VStack boxSize="100%">
  <Box h="50px" w="100%" />
</VStack>"
`;

exports[`Codegen renders frame with horizontal center align child height shrinker 1`] = `
"<Flex boxSize="100%">
  <Box h="100%" w="50px" />
</Flex>"
`;

exports[`Codegen renders frame with maxWidth child width shrinker 1`] = `
"<Box boxSize="100%">
  <Box h="50px" maxW="200px" w="100%" />
</Box>"
`;

exports[`Codegen renders frame with maxHeight child height shrinker 1`] = `
"<Box boxSize="100%">
  <Box h="100%" maxH="200px" w="50px" />
</Box>"
`;

exports[`Codegen renders frame with individual stroke weights 1`] = `
"<Box
  borderBottom="solid 3px #F00"
  borderLeft="solid 4px #F00"
  borderRight="solid 2px #F00"
  borderTop="solid 1px #F00"
  h="80px"
  w="120px"
/>"
`;

exports[`Codegen renders group as Box with full size 1`] = `"<Box boxSize="100%" />"`;

exports[`Codegen renders boxSize when width equals height 1`] = `"<Box boxSize="64px" />"`;

exports[`Codegen renders min/max width/height with px 1`] = `
"<Box
  boxSize="100%"
  maxH="120px"
  maxW="200px"
  minH="20px"
  minW="50px"
/>"
`;

exports[`Codegen renders flex auto layout props 1`] = `"<Flex alignItems="center" boxSize="100%" justifyContent="space-between" />"`;

exports[`Codegen renders grid auto layout props 1`] = `
"<Grid
  boxSize="100%"
  columnGap="8px"
  gridTemplateColumns="repeat(3, 1fr)"
  gridTemplateRows="repeat(2, 1fr)"
  rowGap="12px"
/>"
`;

exports[`Codegen renders grid child positioning props when out of order 1`] = `
"<Grid gridTemplateColumns="repeat(2, 1fr)" gridTemplateRows="repeat(1, 1fr)" h="100px" w="200px">
  <Box boxSize="100%" />
  <Box boxSize="100%" />
</Grid>"
`;

exports[`Codegen renders vstack auto layout props 1`] = `
"<VStack alignItems="center" h="200px" justifyContent="space-between" w="120px">
  <Box boxSize="100%" />
  <Box boxSize="100%" />
</VStack>"
`;

exports[`Codegen renders center auto layout props 1`] = `"<Center boxSize="120px" />"`;

exports[`Codegen renders drop shadow effect props 1`] = `"<Box boxShadow="2px 4px 6px 1px #FF000080" h="60px" w="100px" />"`;

exports[`Codegen renders inner shadow effect props 1`] = `"<Box boxShadow="inset -2px 3px 5px 0 #0F0" h="70px" w="90px" />"`;

exports[`Codegen renders layer blur effect props 1`] = `"<Box filter="blur(4px)" h="80px" w="120px" />"`;

exports[`Codegen renders background blur effect props 1`] = `"<Box backdropFilter="blur(8px)" h="90px" w="110px" />"`;

exports[`Codegen renders noise effect props 1`] = `"<Box filter="contrast(100%) brightness(100%)" h="70px" w="140px" />"`;

exports[`Codegen renders texture effect props 1`] = `"<Box filter="contrast(100%) brightness(100%)" h="60px" w="150px" />"`;

exports[`Codegen renders glass effect props 1`] = `"<Box backdropFilter="blur(12px)" h="80px" w="160px" />"`;

exports[`Codegen renders text node with content 1`] = `
"<Text
  boxSize="100%"
  color="#F00"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
>
  Hello
</Text>"
`;

exports[`Codegen renders another text node with content 1`] = `
"<Text
  boxSize="100%"
  color="#F00"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
>
  World
</Text>"
`;

exports[`Codegen renders text node with ellipsis props 1`] = `
"<Text
  boxSize="100%"
  color="#F00"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
  overflow="hidden"
  textOverflow="ellipsis"
>
  Ellipsis
</Text>"
`;

exports[`Codegen renders text node with single drop shadow 1`] = `
"<Text
  boxSize="100%"
  color="#F00"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
  textShadow="2px 4px 6px #00000080"
>
  Shadow
</Text>"
`;

exports[`Codegen renders text node with multiple drop shadows 1`] = `
"<Text
  boxSize="100%"
  color="#F00"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
  textShadow="1px 2px 3px #F00, 4px 5px 6px #0F0C"
>
  MultiShadow
</Text>"
`;

exports[`Codegen renders text node with stroke 1`] = `
"<Text
  WebkitTextStroke="2px #00F"
  boxSize="100%"
  color="#F00"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
  paintOrder="stroke fill"
>
  Stroke
</Text>"
`;

exports[`Codegen renders text node with multiple segments 1`] = `
"<Text
  boxSize="100%"
  color="#00F"
  fontFamily="Arial"
  fontSize="20px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
>
  <Text color="#F00" fontSize="16px">
    Hello
  </Text>
  World
</Text>"
`;

exports[`Codegen renders text node with unordered list 1`] = `
"<Text
  as="ul"
  boxSize="100%"
  color="#F00"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
  my="0px"
  pl="1.5em"
>
  <li>
    Item 1
  </li>
</Text>"
`;

exports[`Codegen renders text node with ordered list 1`] = `
"<Text
  as="ol"
  boxSize="100%"
  color="#F00"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
  my="0px"
  pl="1.5em"
>
  <li>
    Item 1
  </li>
</Text>"
`;

exports[`Codegen renders text node with list and multiple lines 1`] = `
"<Text
  as="ul"
  boxSize="100%"
  color="#F00"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
  my="0px"
  pl="1.5em"
>
  <li>
    Item 1
  </li>
  <li>
    Item 2
  </li>
</Text>"
`;

exports[`Codegen renders text node with multiple segments without props 1`] = `
"<Text
  boxSize="100%"
  color="#F00"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
>
  Hello
  World
</Text>"
`;

exports[`Codegen renders frame with rotation transform 1`] = `"<Box h="50px" transform="rotate(-45deg)" w="100px" />"`;

exports[`Codegen renders frame with negative rotation transform 1`] = `"<Box h="40px" transform="rotate(30deg)" w="80px" />"`;

exports[`Codegen renders frame with decimal rotation transform 1`] = `"<Box h="60px" transform="rotate(-15.5deg)" w="120px" />"`;

exports[`Codegen renders frame with opacity less than 1 1`] = `"<Box h="50px" opacity="0.5" w="100px" />"`;

exports[`Codegen renders frame with darken blend mode 1`] = `"<Box h="50px" mixBlendMode="darken" w="100px" />"`;

exports[`Codegen renders frame with multiply blend mode 1`] = `"<Box h="50px" mixBlendMode="multiply" w="100px" />"`;

exports[`Codegen renders frame with screen blend mode 1`] = `"<Box h="50px" mixBlendMode="screen" w="100px" />"`;

exports[`Codegen renders frame with overlay blend mode 1`] = `"<Box h="50px" mixBlendMode="overlay" w="100px" />"`;

exports[`Codegen renders frame with linear burn blend mode 1`] = `"<Box h="50px" mixBlendMode="linearBurn" w="100px" />"`;

exports[`Codegen renders frame with color burn blend mode 1`] = `"<Box h="50px" mixBlendMode="colorBurn" w="100px" />"`;

exports[`Codegen renders frame with lighten blend mode 1`] = `"<Box h="50px" mixBlendMode="lighten" w="100px" />"`;

exports[`Codegen renders frame with linear dodge blend mode 1`] = `"<Box h="50px" mixBlendMode="linear-dodge" w="100px" />"`;

exports[`Codegen renders frame with color dodge blend mode 1`] = `"<Box h="50px" mixBlendMode="color-dodge" w="100px" />"`;

exports[`Codegen renders frame with soft light blend mode 1`] = `"<Box h="50px" mixBlendMode="soft-light" w="100px" />"`;

exports[`Codegen renders frame with hard light blend mode 1`] = `"<Box h="50px" mixBlendMode="hard-light" w="100px" />"`;

exports[`Codegen renders frame with difference blend mode 1`] = `"<Box h="50px" mixBlendMode="difference" w="100px" />"`;

exports[`Codegen renders frame with exclusion blend mode 1`] = `"<Box h="50px" mixBlendMode="exclusion" w="100px" />"`;

exports[`Codegen renders frame with hue blend mode 1`] = `"<Box h="50px" mixBlendMode="hue" w="100px" />"`;

exports[`Codegen renders frame with saturation blend mode 1`] = `"<Box h="50px" mixBlendMode="saturation" w="100px" />"`;

exports[`Codegen renders frame with color blend mode 1`] = `"<Box h="50px" mixBlendMode="color" w="100px" />"`;

exports[`Codegen renders frame with luminosity blend mode 1`] = `"<Box h="50px" mixBlendMode="luminosity" w="100px" />"`;

exports[`Codegen renders frame with pass through blend mode 1`] = `"<Box h="50px" w="100px" />"`;

exports[`Codegen renders frame with opacity and blend mode 1`] = `"<Box h="50px" mixBlendMode="multiply" opacity="0.75" w="100px" />"`;

exports[`Codegen renders frame with solid fill and blend mode 1`] = `"<Box bg="#F00" bgBlendMode="multiply" h="50px" w="100px" />"`;

exports[`Codegen renders text node with gradient fill 1`] = `
"<Text
  WebkitTextFillColor="transparent"
  bg="linear-gradient(90deg, #F00 0%, #00F 100%)"
  bgClip="text"
  boxSize="100%"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
>
  Gradient
</Text>"
`;

exports[`Codegen renders text node with HEIGHT auto resize and fixed sizing 1`] = `
"<Text
  color="#F00"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  letterSpacing="0px"
  lineHeight="1.5px"
  w="100px"
>
  Height
</Text>"
`;

exports[`Codegen renders text node with NONE auto resize and fixed sizing 1`] = `
"<Text
  color="#F00"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  h="50px"
  letterSpacing="0px"
  lineHeight="1.5px"
  w="100px"
>
  None
</Text>"
`;

exports[`Codegen renders text node with TRUNCATE auto resize and fixed sizing 1`] = `
"<Text
  color="#F00"
  fontFamily="Arial"
  fontSize="16px"
  fontWeight="400"
  h="50px"
  letterSpacing="0px"
  lineHeight="1.5px"
  w="100px"
>
  Truncate
</Text>"
`;

exports[`Codegen renders text node with textStyleId and typography 1`] = `
"<Text boxSize="100%" color="#F00" typography="heading">
  Heading
</Text>"
`;

exports[`Codegen renders frame with linear gradient fill 1`] = `"<Box bg="linear-gradient(90deg, #F00 0%, #00F 100%)" h="50px" w="100px" />"`;

exports[`Codegen renders frame with radial gradient fill 1`] = `"<Box bg="radial-gradient(50% 50% at 50% 50%, #F00 0%, #00F 100%)" boxSize="100px" />"`;

exports[`Codegen renders frame with angular gradient fill 1`] = `"<Box bg="conic-gradient(from 90deg at 50% 50%, #F00 0%, #0F0 50%, #00F 100%)" boxSize="100px" />"`;

exports[`Codegen renders frame with diamond gradient fill 1`] = `"<Box bg="linear-gradient(to bottom right, #F00 0%, #00F 50%) bottom right / 50.1% 50.1% no-repeat, linear-gradient(to bottom left, #F00 0%, #00F 50%) bottom left / 50.1% 50.1% no-repeat, linear-gradient(to top left, #F00 0%, #00F 50%) top left / 50.1% 50.1% no-repeat, linear-gradient(to top right, #F00 0%, #00F 50%) top right / 50.1% 50.1% no-repeat" boxSize="100px" />"`;

exports[`Codegen renders frame with image fill TILE scaleMode 1`] = `"<Box bg="url(/icons/image.png) repeat" h="50px" w="100px" />"`;

exports[`Codegen renders frame with pattern fill 1`] = `"<Box bg="url(/icons/PatternIcon.svg) center 10% top 20% repeat" h="50px" w="100px" />"`;

exports[`Codegen renders frame with pattern fill START alignment 1`] = `"<Box bg="url(/icons/PatternIcon.svg) repeat" h="50px" w="100px" />"`;

exports[`Codegen renders frame with pattern fill vertical alignment 1`] = `"<Box bg="url(/icons/PatternIcon.svg) center 10% bottom 20% repeat" h="50px" w="100px" />"`;

exports[`Codegen renders frame with multiple fills including non-last solid 1`] = `"<Box bg="linear-gradient(#F00, #F00), #0F0" h="50px" w="100px" />"`;

exports[`Codegen renders frame with invisible gradient fill 1`] = `"<Box h="50px" w="100px" />"`;

exports[`Codegen renders frame with zero opacity gradient fill 1`] = `"<Box h="50px" w="100px" />"`;

exports[`Codegen renders frame with solid fill opacity 0 1`] = `"<Box h="50px" w="100px" />"`;

exports[`Codegen renders component set with variants 1`] = `
"<Box boxSize="100%">
  <Box />
  <Box />
</Box>"
`;

exports[`Codegen renders component set with variants: component: Default 1`] = `
{
  "name": "Button",
  "node": {
    "children": [],
    "name": "Default",
    "parent": {
      "children": [
        [Circular],
        {
          "children": [],
          "name": "Hover",
          "parent": [Circular],
          "reactions": [
            {
              "actions": [],
              "trigger": {
                "type": "ON_HOVER",
              },
            },
          ],
          "type": "COMPONENT",
          "variantProperties": {
            "state": "hover",
          },
          "visible": true,
        },
      ],
      "componentPropertyDefinitions": {
        "state": {
          "type": "VARIANT",
          "variantOptions": [
            "default",
            "hover",
          ],
        },
      },
      "defaultVariant": [Circular],
      "name": "Button",
      "type": "COMPONENT_SET",
      "visible": true,
    },
    "reactions": [],
    "type": "COMPONENT",
    "variantProperties": {
      "state": "default",
    },
    "visible": true,
  },
  "tree": {
    "children": [],
    "component": "Box",
    "nodeName": "Default",
    "nodeType": "COMPONENT",
    "props": {
      "aspectRatio": undefined,
      "flex": undefined,
      "h": undefined,
      "maxH": undefined,
      "maxW": undefined,
      "minH": undefined,
      "minW": undefined,
      "w": undefined,
    },
  },
  "variantComments": {},
  "variants": {
    "state": "'default' | 'hover'",
  },
}
`;

exports[`Codegen renders component set with effect property 1`] = `
"<Box boxSize="100%">
  <Box />
  <Box />
</Box>"
`;

exports[`Codegen renders component set with effect property: component: Default 1`] = `
{
  "name": "Button",
  "node": {
    "children": [],
    "name": "Default",
    "parent": {
      "children": [
        [Circular],
        {
          "children": [],
          "name": "Hover",
          "parent": [Circular],
          "reactions": [],
          "type": "COMPONENT",
          "variantProperties": {
            "effect": "hover",
          },
          "visible": true,
        },
      ],
      "componentPropertyDefinitions": {
        "effect": {
          "type": "VARIANT",
          "variantOptions": [
            "default",
            "hover",
          ],
        },
      },
      "defaultVariant": [Circular],
      "name": "Button",
      "type": "COMPONENT_SET",
      "visible": true,
    },
    "reactions": [],
    "type": "COMPONENT",
    "variantProperties": {
      "effect": "default",
    },
    "visible": true,
  },
  "tree": {
    "children": [],
    "component": "Box",
    "nodeName": "Default",
    "nodeType": "COMPONENT",
    "props": {
      "aspectRatio": undefined,
      "flex": undefined,
      "h": undefined,
      "maxH": undefined,
      "maxW": undefined,
      "minH": undefined,
      "minW": undefined,
      "w": undefined,
    },
  },
  "variantComments": {},
  "variants": {},
}
`;

exports[`Codegen renders component set with transition 1`] = `
"<Box boxSize="100%">
  <Box />
  <Box />
</Box>"
`;

exports[`Codegen renders component set with transition: component: Default 1`] = `
{
  "name": "Button",
  "node": {
    "children": [],
    "name": "Default",
    "parent": {
      "children": [
        [Circular],
        {
          "children": [],
          "name": "Hover",
          "parent": [Circular],
          "reactions": [
            {
              "actions": [
                {
                  "transition": {
                    "duration": 0.3,
                    "easing": {
                      "type": "EASE_IN_OUT",
                    },
                    "type": "SMART_ANIMATE",
                  },
                  "type": "NODE",
                },
              ],
              "trigger": {
                "type": "ON_HOVER",
              },
            },
          ],
          "type": "COMPONENT",
          "variantProperties": {},
          "visible": true,
        },
      ],
      "componentPropertyDefinitions": {},
      "defaultVariant": [Circular],
      "name": "Button",
      "type": "COMPONENT_SET",
      "visible": true,
    },
    "reactions": [
      {
        "actions": [
          {
            "transition": {
              "duration": 0.3,
              "easing": {
                "type": "EASE_IN_OUT",
              },
              "type": "SMART_ANIMATE",
            },
            "type": "NODE",
          },
        ],
        "trigger": {
          "type": "ON_HOVER",
        },
      },
    ],
    "type": "COMPONENT",
    "variantProperties": {},
    "visible": true,
  },
  "tree": {
    "children": [],
    "component": "Box",
    "nodeName": "Default",
    "nodeType": "COMPONENT",
    "props": {
      "aspectRatio": undefined,
      "flex": undefined,
      "h": undefined,
      "maxH": undefined,
      "maxW": undefined,
      "minH": undefined,
      "minW": undefined,
      "w": undefined,
    },
  },
  "variantComments": {},
  "variants": {},
}
`;

exports[`Codegen renders component set with different props and transition 1`] = `
"<Box boxSize="100%">
  <Box />
  <Box opacity="0.8" />
</Box>"
`;

exports[`Codegen renders component set with different props and transition: component: Default 1`] = `
{
  "name": "Card",
  "node": {
    "children": [],
    "name": "Default",
    "parent": {
      "children": [
        [Circular],
        {
          "children": [],
          "name": "Hover",
          "opacity": 0.8,
          "parent": [Circular],
          "reactions": [
            {
              "actions": [
                {
                  "transition": {
                    "duration": 0.3,
                    "easing": {
                      "type": "EASE_IN_OUT",
                    },
                    "type": "SMART_ANIMATE",
                  },
                  "type": "NODE",
                },
              ],
              "trigger": {
                "type": "ON_HOVER",
              },
            },
          ],
          "type": "COMPONENT",
          "variantProperties": {},
          "visible": true,
        },
      ],
      "componentPropertyDefinitions": {},
      "defaultVariant": [Circular],
      "name": "Card",
      "type": "COMPONENT_SET",
      "visible": true,
    },
    "reactions": [
      {
        "actions": [
          {
            "transition": {
              "duration": 0.3,
              "easing": {
                "type": "EASE_IN_OUT",
              },
              "type": "SMART_ANIMATE",
            },
            "type": "NODE",
          },
        ],
        "trigger": {
          "type": "ON_HOVER",
        },
      },
    ],
    "type": "COMPONENT",
    "variantProperties": {},
    "visible": true,
  },
  "tree": {
    "children": [],
    "component": "Box",
    "nodeName": "Default",
    "nodeType": "COMPONENT",
    "props": {
      "_hover": {
        "opacity": "0.8",
      },
      "aspectRatio": undefined,
      "flex": undefined,
      "h": undefined,
      "maxH": undefined,
      "maxW": undefined,
      "minH": undefined,
      "minW": undefined,
      "transition": "0.3ms ease-in-out",
      "transitionProperty": "opacity",
      "w": undefined,
    },
  },
  "variantComments": {},
  "variants": {},
}
`;

exports[`Codegen renders component with parent component set 1`] = `"<Box />"`;

exports[`Codegen renders component with parent component set: component: Hover 1`] = `
{
  "name": "Button",
  "node": {
    "children": [],
    "name": "Hover",
    "parent": {
      "children": [
        {
          "children": [],
          "name": "Default",
          "reactions": [],
          "type": "COMPONENT",
          "variantProperties": {
            "state": "default",
          },
          "visible": true,
        },
        {
          "children": [],
          "name": "Hover",
          "reactions": [
            {
              "actions": [],
              "trigger": {
                "type": "ON_HOVER",
              },
            },
          ],
          "type": "COMPONENT",
          "variantProperties": {
            "state": "hover",
          },
          "visible": true,
        },
      ],
      "componentPropertyDefinitions": {
        "state": {
          "type": "VARIANT",
          "variantOptions": [
            "default",
            "hover",
          ],
        },
      },
      "defaultVariant": {
        "children": [],
        "name": "Default",
        "reactions": [],
        "type": "COMPONENT",
        "variantProperties": {
          "state": "default",
        },
        "visible": true,
      },
      "name": "Button",
      "type": "COMPONENT_SET",
      "visible": true,
    },
    "reactions": [
      {
        "actions": [],
        "trigger": {
          "type": "ON_HOVER",
        },
      },
    ],
    "type": "COMPONENT",
    "variantProperties": {
      "state": "hover",
    },
    "visible": true,
  },
  "tree": {
    "children": [],
    "component": "Box",
    "nodeName": "Hover",
    "nodeType": "COMPONENT",
    "props": {
      "aspectRatio": undefined,
      "flex": undefined,
      "h": undefined,
      "maxH": undefined,
      "maxW": undefined,
      "minH": undefined,
      "minW": undefined,
      "w": undefined,
    },
  },
  "variantComments": {},
  "variants": {
    "state": "'default' | 'hover'",
  },
}
`;

exports[`Codegen renders component set with press trigger 1`] = `
"<Box boxSize="100%">
  <Box />
  <Box />
</Box>"
`;

exports[`Codegen renders component set with press trigger: component: Default 1`] = `
{
  "name": "Button",
  "node": {
    "children": [],
    "name": "Default",
    "parent": {
      "children": [
        [Circular],
        {
          "children": [],
          "name": "Active",
          "parent": [Circular],
          "reactions": [
            {
              "actions": [],
              "trigger": {
                "type": "ON_PRESS",
              },
            },
          ],
          "type": "COMPONENT",
          "variantProperties": {},
          "visible": true,
        },
      ],
      "componentPropertyDefinitions": {},
      "defaultVariant": [Circular],
      "name": "Button",
      "type": "COMPONENT_SET",
      "visible": true,
    },
    "reactions": [],
    "type": "COMPONENT",
    "variantProperties": {},
    "visible": true,
  },
  "tree": {
    "children": [],
    "component": "Box",
    "nodeName": "Default",
    "nodeType": "COMPONENT",
    "props": {
      "aspectRatio": undefined,
      "flex": undefined,
      "h": undefined,
      "maxH": undefined,
      "maxW": undefined,
      "minH": undefined,
      "minW": undefined,
      "w": undefined,
    },
  },
  "variantComments": {},
  "variants": {},
}
`;

exports[`Codegen renders simple component without variants 2`] = `"<Box boxSize="100%" />"`;

exports[`Codegen renders simple component without variants: component: Icon 1`] = `
{
  "name": "Icon",
  "node": {
    "children": [],
    "name": "Icon",
    "type": "COMPONENT",
    "visible": true,
  },
  "tree": {
    "children": [],
    "component": "Box",
    "nodeName": "Icon",
    "nodeType": "COMPONENT",
    "props": {
      "aspectRatio": undefined,
      "boxSize": "100%",
      "flex": undefined,
      "maxH": undefined,
      "maxW": undefined,
      "minH": undefined,
      "minW": undefined,
    },
  },
  "variantComments": {},
  "variants": {},
}
`;

exports[`Codegen renders component with parent component set name 1`] = `"<Box />"`;

exports[`Codegen renders component with parent component set name: component: Hover 1`] = `
{
  "name": "Button",
  "node": {
    "children": [],
    "name": "Hover",
    "parent": {
      "children": [],
      "componentPropertyDefinitions": {},
      "defaultVariant": {
        "children": [],
        "name": "Default",
        "type": "COMPONENT",
        "visible": true,
      },
      "name": "Button",
      "type": "COMPONENT_SET",
      "visible": true,
    },
    "type": "COMPONENT",
    "visible": true,
  },
  "tree": {
    "children": [],
    "component": "Box",
    "nodeName": "Hover",
    "nodeType": "COMPONENT",
    "props": {
      "aspectRatio": undefined,
      "flex": undefined,
      "h": undefined,
      "maxH": undefined,
      "maxW": undefined,
      "minH": undefined,
      "minW": undefined,
      "w": undefined,
    },
  },
  "variantComments": {},
  "variants": {},
}
`;

exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with INSTANCE_SWAP slot: INSTANCE_SWAP slot: IconButton 1`] = `
"export interface IconButtonProps {
  size: 'sm' | 'md' | 'lg'
  leftIcon: React.ReactNode
}

export function IconButton({ size, leftIcon }: IconButtonProps) {
  return (
    <Box>
      {leftIcon}
      <Text
        boxSize="100%"
        color="#F00"
        fontFamily="Arial"
        fontSize="16px"
        fontWeight="400"
        letterSpacing="0px"
        lineHeight="1.5px"
        overflow="hidden"
        textOverflow="ellipsis"
      >
        Click
      </Text>
    </Box>
  )
}"
`;

exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with INSTANCE_SWAP slot: INSTANCE_SWAP slot: Icon 1`] = `
"export function Icon() {
  return <Box boxSize="100%" />
}"
`;

exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with BOOLEAN conditional: BOOLEAN conditional: AlertCard 1`] = `
"export interface AlertCardProps {
  State: 'Default' | 'Hover'
  showBadge?: boolean
}

export function AlertCard({ State, showBadge }: AlertCardProps) {
  return (
    <Box>
      {showBadge && <Box boxSize="100%" />}
      <Text
        boxSize="100%"
        color="#F00"
        fontFamily="Arial"
        fontSize="16px"
        fontWeight="400"
        letterSpacing="0px"
        lineHeight="1.5px"
        overflow="hidden"
        textOverflow="ellipsis"
      >
        Hello
      </Text>
    </Box>
  )
}"
`;

exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with nested BOOLEAN conditionals (grandchildren): nested BOOLEAN conditional: CurriculumCard 1`] = `
"export interface CurriculumCardProps {
  _1st?: boolean
  _2nd?: boolean
}

export function CurriculumCard({ _1st, _2nd }: CurriculumCardProps) {
  return (
    <Box>
      <Box boxSize="100%">
        {_1st && <CurriculumSubTitle />}
        {_2nd && <CurriculumSubTitle />}
      </Box>
    </Box>
  )
}"
`;

exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with nested BOOLEAN conditionals (grandchildren): nested BOOLEAN conditional: CurriculumSubTitle 1`] = `
"export function CurriculumSubTitle() {
  return <Box boxSize="100%" />
}"
`;

exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with INSTANCE_SWAP + BOOLEAN combined: INSTANCE_SWAP+BOOLEAN: Button 1`] = `
"export interface ButtonProps {
  size: 'sm' | 'md' | 'lg'
  leftIcon: React.ReactNode
  showLeftIcon?: boolean
  rightIcon: React.ReactNode
  showRightIcon?: boolean
}

export function Button({ size, leftIcon, showLeftIcon, rightIcon, showRightIcon }: ButtonProps) {
  return (
    <Box>
      {showLeftIcon && leftIcon}
      <Text
        boxSize="100%"
        color="#F00"
        fontFamily="Arial"
        fontSize="16px"
        fontWeight="400"
        letterSpacing="0px"
        lineHeight="1.5px"
        overflow="hidden"
        textOverflow="ellipsis"
      >
        Submit
      </Text>
      {showRightIcon && rightIcon}
    </Box>
  )
}"
`;

exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with INSTANCE_SWAP + BOOLEAN combined: INSTANCE_SWAP+BOOLEAN: Icon 1`] = `
"export function Icon() {
  return <Box boxSize="100%" />
}"
`;

exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with INSTANCE_SWAP + BOOLEAN combined: INSTANCE_SWAP+BOOLEAN: ArrowIcon 1`] = `
"export function ArrowIcon() {
  return <Box boxSize="100%" />
}"
`;

exports[`render real world component real world $ 1`] = `
"export function BorderRadius() {
  return <Box bg="#D9D9D9" borderRadius="20px" />
}"
`;

exports[`render real world component real world $ 2`] = `
"export function BorderRadius() {
  return <Box bg="#D9D9D9" borderRadius="20px 30px 50px 40px" />
}"
`;

exports[`render real world component real world $ 3`] = `
"export function BorderRadius() {
  return <Box bg="#D9D9D9" borderRadius="200px 30px" />
}"
`;

exports[`render real world component real world $ 4`] = `
"export function Gradient() {
  return (
    <Flex
      bg="#FFF"
      overflow="hidden"
      pb="22px"
      pl="57px"
      pr="118px"
      pt="51px"
    >
      <Box bg="linear-gradient(-180deg, #8ADAFF 0%, #C6C9CE 100%)" borderRadius="1000px" boxSize="150px" overflow="hidden" />
    </Flex>
  )
}"
`;

exports[`render real world component real world $ 5`] = `
"export function Gradient() {
  return (
    <Flex
      bg="#FFF"
      overflow="hidden"
      pb="16px"
      pl="147px"
      pr="110px"
      pt="49px"
    >
      <Box bg="linear-gradient(-47deg, #8ADAFF 29.62%, #C6C9CE 83.86%)" borderRadius="1000px" boxSize="150px" overflow="hidden" />
    </Flex>
  )
}"
`;

exports[`render real world component real world $ 6`] = `
"export function Gradient() {
  return (
    <Flex
      bg="#FFF"
      overflow="hidden"
      pb="34px"
      pl="102px"
      pr="110px"
      pt="70px"
    >
      <Box bg="radial-gradient(50% 50% at 50% 50%, #8ADAFF 0%, #DDEAFF 100%)" borderRadius="1000px" boxSize="150px" overflow="hidden" />
    </Flex>
  )
}"
`;

exports[`render real world component real world $ 7`] = `
"export function Gradient() {
  return (
    <Flex
      bg="#FFF"
      overflow="hidden"
      pb="26px"
      pl="152px"
      pr="100px"
      pt="83px"
    >
      <Box bg="radial-gradient(43% 21% at 32% 39%, #8ADAFF 0%, #DDEAFF 100%)" borderRadius="1000px" boxSize="150px" overflow="hidden" />
    </Flex>
  )
}"
`;

exports[`render real world component real world $ 8`] = `
"export function Gradient() {
  return (
    <Flex
      bg="#FFF"
      overflow="hidden"
      pb="38px"
      pl="71px"
      pr="69px"
      pt="37px"
    >
      <Box bg="conic-gradient(from 180deg at 50% 50%, #8ADAFF 0%, #DDEAFF 100%)" borderRadius="1000px" boxSize="150px" overflow="hidden" />
    </Flex>
  )
}"
`;

exports[`render real world component real world $ 9`] = `
"export function Gradient() {
  return (
    <Flex
      bg="#FFF"
      overflow="hidden"
      pb="22px"
      pl="56px"
      pr="105px"
      pt="27px"
    >
      <Box bg="conic-gradient(from 0deg at 50% 100%, #8ADAFF 0%, #DDEAFF 100%)" borderRadius="1000px" boxSize="150px" overflow="hidden" />
    </Flex>
  )
}"
`;

exports[`render real world component real world $ 10`] = `
"export function Gradient() {
  return (
    <Flex
      bg="#FFF"
      overflow="hidden"
      pb="31px"
      pl="108px"
      pr="74px"
      pt="58px"
    >
      <Box bg="linear-gradient(to bottom right, #8ADAFF 0%, #DDEAFF 50%) bottom right / 50.1% 50.1% no-repeat, linear-gradient(to bottom left, #8ADAFF 0%, #DDEAFF 50%) bottom left / 50.1% 50.1% no-repeat, linear-gradient(to top left, #8ADAFF 0%, #DDEAFF 50%) top left / 50.1% 50.1% no-repeat, linear-gradient(to top right, #8ADAFF 0%, #DDEAFF 50%) top right / 50.1% 50.1% no-repeat" borderRadius="1000px" boxSize="150px" overflow="hidden" />
    </Flex>
  )
}"
`;

exports[`render real world component real world $ 11`] = `
"export function Text() {
  return (
    <Text
      color="#FFF"
      fontFamily="Inter"
      fontSize="12px"
      fontWeight="400"
      letterSpacing="0em"
      lineHeight="normal"
    >
      Hello World
    </Text>
  )
}"
`;

exports[`render real world component real world $ 12`] = `
"export function Text() {
  return (
    <Text
      color="#FFF"
      fontFamily="Inter"
      fontSize="12px"
      fontWeight="400"
      letterSpacing="0em"
      lineHeight="normal"
      w="100px"
    >
      Hello World
    </Text>
  )
}"
`;

exports[`render real world component real world $ 13`] = `
"export function Text() {
  return (
    <Text
      color="#FFF"
      fontFamily="Inter"
      fontSize="12px"
      fontWeight="400"
      letterSpacing="0em"
      lineHeight="normal"
    >
      Hello World
    </Text>
  )
}"
`;

exports[`render real world component real world $ 14`] = `
"export function Text() {
  return (
    <Text
      color="#FFF"
      fontFamily="Inter"
      fontSize="12px"
      fontWeight="400"
      letterSpacing="0em"
      lineHeight="normal"
      textAlign="right"
      w="100px"
    >
      Hello World
    </Text>
  )
}"
`;

exports[`render real world component real world $ 15`] = `
"export function Text() {
  return (
    <Text
      alignContent="center"
      color="#FFF"
      fontFamily="Inter"
      fontSize="12px"
      fontWeight="400"
      letterSpacing="0em"
      lineHeight="normal"
      textAlign="center"
    >
      Hello World
    </Text>
  )
}"
`;

exports[`render real world component real world $ 16`] = `
"export function AutoLayout&Box() {
  return (
    <Flex alignItems="center" bg="#50F" gap="10px" p="10px">
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="16px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="1.6"
      >
        Hello World
      </Text>
      <Box bg="#FFF" borderRadius="1000px" boxSize="12px" overflow="hidden" />
    </Flex>
  )
}"
`;

exports[`render real world component real world $ 17`] = `
"export function AutoLayout&Box() {
  return (
    <VStack alignItems="center" bg="#50F" gap="10px" p="10px">
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="16px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="1.6"
      >
        Hello World
      </Text>
      <Box bg="#FFF" borderRadius="1000px" boxSize="12px" overflow="hidden" />
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 18`] = `
"export function AutoLayout&Box() {
  return (
    <VStack alignItems="center" bg="#50F" gap="6px" p="10px">
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="16px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="1.6"
      >
        Hello World
      </Text>
      <Box bg="#FFF" h="1px" overflow="hidden" w="100%" />
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 19`] = `
"export function Component1() {
  return (
    <Flex
      alignItems="center"
      bg="$primary"
      borderRadius="100px"
      gap="20px"
      px="60px"
      py="12px"
    >
      <Text
        color="#FFF"
        fontFamily="Pretendard"
        fontSize="18px"
        fontWeight="700"
        letterSpacing="-0.04em"
        lineHeight="1.6"
        wordBreak="keep-all"
      >
        더 자세히 알아보기
      </Text>
      <Box
        bg="#FFF"
        boxSize="20px"
        maskImage="url(/icons/arrow.svg)"
        maskPos="center"
        maskRepeat="no-repeat"
        maskSize="contain"
      />
    </Flex>
  )
}"
`;

exports[`render real world component real world $ 20`] = `
"export function Component1() {
  return (
    <VStack bg="$background" borderRadius="30px" gap="20px" p="40px">
      <Image boxSize="64px" src="/icons/puzzle-piece.svg" />
      <Text
        color="$text"
        fontFamily="Pretendard"
        fontSize="20px"
        fontWeight="800"
        letterSpacing="-0.04em"
        lineHeight="1.4"
        wordBreak="keep-all"
      >
        <Text color="$primary">
          자사 솔루션과의 연계
        </Text>
        를 통해<br />서비스 확장성과 성장 가능성을 높입니다.
      </Text>
      <Text
        color="$text"
        fontFamily="Pretendard"
        fontSize="16px"
        fontWeight="500"
        letterSpacing="-0.06em"
        lineHeight="1.6"
        wordBreak="keep-all"
      >
        웹앱팩토리와 Presskit 등 자체 운영 중인 <br />솔루션과의 연계를 통해 프로젝트의 서비스 범위 확장, <br />운영 효율화, 성장 기회까지 제안드립니다.
      </Text>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 21`] = `
"export function Component1() {
  return (
    <Flex alignItems="center" gap="20px">
      <Center
        bg="#FFF"
        borderRadius="30px"
        flex="1"
        flexDir="column"
        h="100%"
        p="40px"
      >
        <Text
          color="#1A1A1A"
          fontFamily="Pretendard"
          fontSize="36px"
          fontWeight="500"
          letterSpacing="-0.06em"
          lineHeight="1.6"
        >
          CARD 1
        </Text>
      </Center>
      <Center
        bg="#FFF"
        borderRadius="30px"
        flex="1"
        flexDir="column"
        h="100%"
        p="40px"
      >
        <Text
          color="#1A1A1A"
          fontFamily="Pretendard"
          fontSize="36px"
          fontWeight="500"
          letterSpacing="-0.06em"
          lineHeight="1.6"
        >
          CARD 2
        </Text>
      </Center>
      <Center
        bg="#FFF"
        borderRadius="30px"
        flex="1"
        flexDir="column"
        h="100%"
        p="40px"
      >
        <Text
          color="#1A1A1A"
          fontFamily="Pretendard"
          fontSize="36px"
          fontWeight="500"
          letterSpacing="-0.06em"
          lineHeight="1.6"
        >
          CARD 3
        </Text>
      </Center>
    </Flex>
  )
}"
`;

exports[`render real world component real world $ 22`] = `
"export function Component1() {
  return (
    <VStack
      alignItems="flex-end"
      backdropFilter="blur(4px)"
      bg="#FFFFFF0F"
      gap="10px"
      justifyContent="center"
      px="20px"
      py="10px"
    >
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="24px"
        fontStyle="italic"
        fontWeight="600"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Hello World
      </Text>
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Lorem ipsum dolor sit amet,{" "}
        <Text fontWeight="900">
          consectetur
        </Text>
        {" "}adipiscing elit.
      </Text>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 23`] = `
"export function Outline,Border() {
  return <Box bg="#FFF" border="solid 3px #FF1C1C" overflow="hidden" />
}"
`;

exports[`render real world component real world $ 24`] = `
"export function Outline,Border() {
  return <Box bg="#FFF" outline="solid 3px #FF1C1C" outlineOffset="-1.5px" overflow="hidden" />
}"
`;

exports[`render real world component real world $ 25`] = `
"export function Outline,Border() {
  return <Box bg="#FFF" outline="solid 3px #FF1C1C" overflow="hidden" />
}"
`;

exports[`render real world component real world $ 26`] = `
"export function Outline,Border() {
  return <Box bg="#FFF" border="solid 3px #FF1C1C" borderRadius="20px" overflow="hidden" />
}"
`;

exports[`render real world component real world $ 27`] = `
"export function Outline,Border() {
  return (
    <Box
      bg="#FFF"
      borderRadius="20px"
      outline="solid 3px #FF1C1C"
      outlineOffset="-1.5px"
      overflow="hidden"
    />
  )
}"
`;

exports[`render real world component real world $ 28`] = `
"export function Outline,Border() {
  return <Box bg="#FFF" borderRadius="20px" outline="solid 3px #FF1C1C" overflow="hidden" />
}"
`;

exports[`render real world component real world $ 29`] = `
"export function Outline,Border() {
  return (
    <Box
      bg="#FFF"
      border="solid 3px #FF1C1C"
      borderRadius="20px"
      boxShadow="0 4px 4px 0 #00000040"
      overflow="hidden"
    />
  )
}"
`;

exports[`render real world component real world $ 30`] = `
"export function Outline,Border() {
  return (
    <Box
      bg="#FFF"
      borderRadius="20px"
      boxShadow="0 4px 4px 0 #00000040"
      outline="solid 3px #FF1C1C"
      overflow="hidden"
    />
  )
}"
`;

exports[`render real world component real world $ 31`] = `
"export function Circle() {
  return <Box bg="#D9D9D9" borderRadius="50%" />
}"
`;

exports[`render real world component real world $ 32`] = `
"export function Circle() {
  return <Box bg="#D9D9D9" borderRadius="50%" />
}"
`;

exports[`render real world component real world $ 33`] = `
"export function Circle() {
  return (
    <Box
      bg="#D9D9D9"
      maskImage="url(/icons/ellipse3621.svg)"
      maskPos="center"
      maskRepeat="no-repeat"
      maskSize="contain"
    />
  )
}"
`;

exports[`render real world component real world $ 34`] = `
"export function Border() {
  return (
    <Box
      bg="#FFF"
      borderRadius="20px"
      outline="solid 1px #000"
      outlineOffset="-0.5px"
      overflow="hidden"
    />
  )
}"
`;

exports[`render real world component real world $ 35`] = `
"export function Border() {
  return (
    <Box
      bg="#FFF"
      borderRadius="20px"
      outline="dashed 1px #000"
      outlineOffset="-0.5px"
      overflow="hidden"
    />
  )
}"
`;

exports[`render real world component real world $ 36`] = `
"export function Border() {
  return (
    <Box
      bg="#FFF"
      borderTop="solid 1px #000"
      maskImage="url(/icons/border.svg)"
      maskPos="center"
      maskRepeat="no-repeat"
      maskSize="contain"
    />
  )
}"
`;

exports[`render real world component real world $ 37`] = `
"export function Opacity() {
  return (
    <Box
      bg="#FFF"
      border="solid 1px #000"
      borderRadius="20px"
      opacity="0.2"
      overflow="hidden"
    />
  )
}"
`;

exports[`render real world component real world $ 38`] = `
"export function Opacity() {
  return <Box bg="#FFF3" border="solid 1px #0003" borderRadius="20px" overflow="hidden" />
}"
`;

exports[`render real world component real world $ 39`] = `
"export function Clamp() {
  return (
    <Flex alignItems="center" bg="#FFF" p="10px">
      <Text
        color="#000"
        flex="1"
        fontFamily="Inter"
        fontSize="16px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="1.6"
        overflow="hidden"
        textOverflow="ellipsis"
        whiteSpace="nowrap"
      >
        Getting into life {"'"}Cause I found that it{"'"}s not so boring Not anymore.
      </Text>
    </Flex>
  )
}"
`;

exports[`render real world component real world $ 40`] = `
"export function Clamp() {
  return (
    <Flex alignItems="center" bg="#FFF" p="10px">
      <Text
        color="#000"
        fontFamily="Inter"
        fontSize="16px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="1.6"
        whiteSpace="nowrap"
      >
        Getting into life {"'"}Cause I found that it{"'"}s not so boring Not anymore.
      </Text>
    </Flex>
  )
}"
`;

exports[`render real world component real world $ 41`] = `
"export function Clamp() {
  return (
    <Flex alignItems="center" bg="#FFF" p="10px">
      <Text
        WebkitBoxOrient="vertical"
        WebkitLineClamp="2"
        color="#000"
        display="-webkit-box"
        flex="1"
        fontFamily="Inter"
        fontSize="16px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="1.6"
        overflow="hidden"
        textOverflow="ellipsis"
      >
        Getting into life {"'"}Cause I found that it{"'"}s not so boring Not anymore.
      </Text>
    </Flex>
  )
}"
`;

exports[`render real world component real world $ 42`] = `
"export function Effect() {
  return <Box bg="#FFF" borderRadius="20px" boxShadow="0 4px 4px 0 #00000040" overflow="hidden" />
}"
`;

exports[`render real world component real world $ 43`] = `
"export function Effect() {
  return <Box bg="#FFF" borderRadius="20px" boxShadow="inset 0 4px 4px 0 #00000040" overflow="hidden" />
}"
`;

exports[`render real world component real world $ 44`] = `
"export function Effect() {
  return <Box bg="#FFF" borderRadius="20px" filter="blur(4px)" overflow="hidden" />
}"
`;

exports[`render real world component real world $ 45`] = `
"export function Effect() {
  return <Box backdropFilter="blur(10px)" bg="#FFF3" borderRadius="20px" overflow="hidden" />
}"
`;

exports[`render real world component real world $ 46`] = `
"export function Dimmed와Absolute() {
  return (
    <VStack
      bg="linear-gradient(90deg, $primaryBgLight 0%, $secondaryBg 100%)"
      gap="20px"
      justifyContent="center"
      overflow="hidden"
      px="20px"
      py="50px"
    >
      <Image
        filter="blur(12px)"
        h="100%"
        pos="absolute"
        right="-108.01px"
        src="/images/puzzle.png"
        top="-76px"
        transform="rotate(8.83deg)"
        transformOrigin="top left"
        w="300px"
      />
      <Box
        bg="linear-gradient(0deg, #EDEEFF 0%, #EDEEFF00 100%)"
        boxSize="100%"
        left="0px"
        pos="absolute"
        top="0px"
      />
      <VStack gap="8px" justifyContent="center">
        <Text
          color="$primary"
          fontFamily="Pretendard"
          fontSize="12px"
          fontWeight="600"
          letterSpacing="-0.04em"
          lineHeight="1.6"
          wordBreak="keep-all"
        >
          지금 시작할 수 있어요
        </Text>
        <Text
          color="$title"
          fontFamily="Pretendard"
          fontSize="20px"
          fontWeight="700"
          letterSpacing="-0.04em"
          lineHeight="1.2"
          wordBreak="keep-all"
        >
          내 삶을 더 잘 이해하는 첫 걸음
        </Text>
      </VStack>
      <Text
        color="$text"
        fontFamily="Pretendard"
        fontSize="14px"
        fontWeight="400"
        letterSpacing="-0.04em"
        lineHeight="1.6"
        wordBreak="keep-all"
      >
        자꾸 미뤄졌던 나에 대한 고민, <br />퍼즐핏에서 구체적인 답을 찾아보세요.
      </Text>
      <VStack gap="12px" justifyContent="center">
        <GradientButton />
        <Text
          color="$textLight"
          fontFamily="Pretendard"
          fontSize="12px"
          fontWeight="400"
          letterSpacing="-0.04em"
          lineHeight="1.6"
          opacity="0.5"
          wordBreak="keep-all"
        >
          회원가입 후, 유료로 진행됩니다
        </Text>
      </VStack>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 47`] = `
"export function Svg() {
  return (
    <Box
      aspectRatio="1"
      bg="$caption"
      maskImage="url(/icons/recommend.svg)"
      maskPos="center"
      maskRepeat="no-repeat"
      maskSize="contain"
      pb="2.96px"
      pl="3.49px"
      pr="2.89px"
      pt="2.02px"
    />
  )
}"
`;

exports[`render real world component real world $ 48`] = `
"export function Svg() {
  return (
    <Box
      bg="$caption"
      maskImage="url(/icons/recommend.svg)"
      maskPos="center"
      maskRepeat="no-repeat"
      maskSize="contain"
      px="3px"
      py="2px"
    />
  )
}"
`;

exports[`render real world component real world $ 49`] = `
"export function Svg() {
  return (
    <Box
      bg="$caption"
      maskImage="url(/icons/recommend.svg)"
      maskPos="center"
      maskRepeat="no-repeat"
      maskSize="contain"
      px="3px"
      py="2px"
    />
  )
}"
`;

exports[`render real world component real world $ 50`] = `
"export function Svg() {
  return <Image px="3px" py="2px" src="/icons/recommend.svg" />
}"
`;

exports[`render real world component real world $ 51`] = `
"export function Svg() {
  return <Image src="/icons/recommend.svg" />
}"
`;

exports[`render real world component real world $ 52`] = `
"export function FlexWithMaxW() {
  return (
    <VStack
      alignItems="center"
      bg="#FFF"
      overflow="hidden"
      px="30px"
      py="80px"
    >
      <Center flexDir="column" gap="50px" maxW="1280px" w="100%">
        <Text
          color="#000"
          fontFamily="Inter"
          fontSize="40px"
          fontWeight="400"
          letterSpacing="0em"
          lineHeight="normal"
        >
          Hello World!
        </Text>
        <Image h="500px" src="/images/image.png" w="100%" />
      </Center>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 53`] = `
"export function FlexWithMaxW() {
  return (
    <VStack
      alignItems="center"
      bg="#FFF"
      overflow="hidden"
      px="30px"
      py="80px"
    >
      <Center flexDir="column" gap="50px" maxW="1280px" w="100%">
        <Text
          color="#000"
          fontFamily="Inter"
          fontSize="40px"
          fontWeight="400"
          letterSpacing="0em"
          lineHeight="normal"
        >
          Hello World!
        </Text>
        <Image aspectRatio="1.77" h="720px" src="/images/image.png" w="100%" />
      </Center>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 54`] = `
"export function FlexWithMaxW() {
  return (
    <VStack
      alignItems="center"
      bg="#FFF"
      overflow="hidden"
      px="30px"
      py="80px"
    >
      <Center
        flexDir="column"
        gap="50px"
        h="600px"
        maxW="1280px"
        w="100%"
      >
        <Text
          color="#000"
          fontFamily="Inter"
          fontSize="40px"
          fontWeight="400"
          letterSpacing="0em"
          lineHeight="normal"
        >
          Hello World!
        </Text>
        <Image boxSize="100%" maxH="400px" maxW="800px" src="/images/image.png" />
      </Center>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 55`] = `
"export function FlexWithMaxW() {
  return (
    <VStack
      alignItems="center"
      bg="#FFF"
      overflow="hidden"
      px="30px"
      py="80px"
    >
      <Center flexDir="column" gap="50px" maxW="1280px" w="100%">
        <Text
          color="#000"
          fontFamily="Inter"
          fontSize="40px"
          fontWeight="400"
          letterSpacing="0em"
          lineHeight="normal"
        >
          Hello World!
        </Text>
        <Image h="400px" maxW="800px" src="/images/image.png" w="100%" />
      </Center>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 56`] = `
"export function FlexWithMaxW() {
  return (
    <VStack
      alignItems="center"
      bg="#FFF"
      overflow="hidden"
      px="30px"
      py="80px"
    >
      <Center flexDir="column" gap="50px" maxW="1280px" w="100%">
        <Text
          color="#000"
          fontFamily="Inter"
          fontSize="40px"
          fontWeight="400"
          letterSpacing="0em"
          lineHeight="normal"
        >
          Hello World!
        </Text>
        <Image boxSize="100%" maxH="400px" maxW="1024px" src="/images/image.png" />
      </Center>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 57`] = `
"export function TextWithAutoLayout() {
  return (
    <VStack gap="10px" justifyContent="center" px="20px" py="10px">
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Hello World
      </Text>
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Text>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 58`] = `
"export function TextWithAutoLayout() {
  return (
    <Flex alignItems="center" gap="10px" px="20px" py="10px">
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Hello World
      </Text>
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Text>
    </Flex>
  )
}"
`;

exports[`render real world component real world $ 59`] = `
"export function TextWithAutoLayout() {
  return (
    <VStack gap="10px" justifyContent="center" px="20px" py="10px">
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Hello World
      </Text>
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Text>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 60`] = `
"export function TextWithAutoLayout() {
  return (
    <Flex alignItems="center" gap="10px" px="20px" py="10px">
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Hello World
      </Text>
      <Text
        color="#FFF"
        flex="1"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Text>
    </Flex>
  )
}"
`;

exports[`render real world component real world $ 61`] = `
"export function TextWithAutoLayout() {
  return (
    <Center flexDir="column" gap="10px" px="20px" py="10px">
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Hello World
      </Text>
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Text>
    </Center>
  )
}"
`;

exports[`render real world component real world $ 62`] = `
"export function TextWithAutoLayout() {
  return (
    <VStack
      alignItems="center"
      gap="10px"
      justifyContent="flex-end"
      px="20px"
      py="10px"
    >
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Hello World
      </Text>
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Text>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 63`] = `
"export function TextWithAutoLayout() {
  return (
    <VStack gap="10px" justifyContent="center" px="20px" py="10px">
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
        textAlign="center"
      >
        Hello World
      </Text>
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
        textAlign="center"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Text>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 64`] = `
"export function TextWithAutoLayout() {
  return (
    <VStack
      alignItems="flex-end"
      gap="10px"
      justifyContent="flex-end"
      px="20px"
      py="10px"
    >
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Hello World
      </Text>
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Text>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 65`] = `
"export function TextWithAutoLayout() {
  return (
    <VStack
      alignItems="flex-end"
      gap="10px"
      justifyContent="center"
      px="20px"
      py="10px"
    >
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Hello World
      </Text>
      <Text
        color="#FFF"
        fontFamily="Inter"
        fontSize="12px"
        fontWeight="400"
        letterSpacing="0em"
        lineHeight="normal"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Text>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 66`] = `
"export function ObjectFit() {
  return (
    <VStack p="10px">
      <Image h="500px" src="/images/image.png" />
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 67`] = `
"export function ObjectFit() {
  return (
    <VStack p="10px">
      <Image h="500px" objectFit="contain" src="/images/image.png" />
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 68`] = `
"export function Case1MaskImage() {
  return (
    <VStack
      bg="$innerBg"
      gap="16px"
      outline="solid 1px $border"
      outlineOffset="-0.5px"
      p="20px"
    >
      <Flex alignItems="center" gap="8px">
        <Text
          color="$caption"
          fontFamily="SUIT"
          fontSize="16px"
          fontWeight="600"
          letterSpacing="-1px"
          lineHeight="1.5"
          wordBreak="keep-all"
        >
          플레이 제목
        </Text>
        <Box
          aspectRatio="1"
          bg="$caption"
          borderRadius="50%"
          boxSize="6px"
          opacity="0.2"
        />
        <Text
          color="$caption"
          fontFamily="SUIT"
          fontSize="15px"
          fontWeight="400"
          letterSpacing="-0.5px"
          lineHeight="1.5"
        >
          2025.03.03 18:00
        </Text>
        <Box
          aspectRatio="1"
          bg="$caption"
          borderRadius="50%"
          boxSize="6px"
          opacity="0.2"
        />
        <Flex alignItems="center" gap="4px">
          <Box
            aspectRatio="1"
            bg="$caption"
            boxSize="20px"
            maskImage="url(/icons/recommend.svg)"
            maskPos="center"
            maskRepeat="no-repeat"
            maskSize="contain"
          />
          <Text
            color="$caption"
            fontFamily="SUIT"
            fontSize="15px"
            fontWeight="600"
            letterSpacing="-0.5px"
            lineHeight="1.5"
          >
            2
          </Text>
        </Flex>
      </Flex>
      <Text
        color="$text"
        fontFamily="SUIT"
        fontSize="16px"
        fontWeight="400"
        letterSpacing="-1px"
        lineHeight="1.5"
        wordBreak="keep-all"
      >
        댓글 내용 출력 댓글 내용 출력 댓글 내용 출력 댓글 내용 출력 댓글 내용 출력
      </Text>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 69`] = `
"export function Grid() {
  return (
    <Grid gap="10px" gridTemplateColumns="repeat(2, 1fr)" gridTemplateRows="repeat(2, 1fr)">
      <Box bg="#697F9F" h="100px" overflow="hidden" />
      <Box bg="#697F9F" h="100px" overflow="hidden" />
      <Box bg="#697F9F" h="100px" overflow="hidden" />
      <Box bg="#697F9F" h="100px" overflow="hidden" />
    </Grid>
  )
}"
`;

exports[`render real world component real world $ 70`] = `
"export function Grid() {
  return (
    <Grid gap="10px" gridTemplateColumns="repeat(2, 1fr)" gridTemplateRows="repeat(4, 1fr)">
      <Box
        bg="#697F9F"
        gridColumn="1 / span 1"
        gridRow="4 / span 1"
        h="100px"
        overflow="hidden"
      />
      <Box
        bg="#697F9F"
        gridColumn="2 / span 1"
        gridRow="3 / span 1"
        h="100px"
        overflow="hidden"
      />
    </Grid>
  )
}"
`;

exports[`render real world component real world $ 71`] = `
"export function Grid() {
  return (
    <Grid gap="10px" gridTemplateColumns="repeat(2, 1fr)" gridTemplateRows="repeat(2, 1fr)">
      <Box bg="#697F9F" h="100px" overflow="hidden" />
    </Grid>
  )
}"
`;

exports[`render real world component real world $ 72`] = `
"export function Grid() {
  return (
    <Grid gap="10px" gridTemplateColumns="repeat(2, 1fr)" gridTemplateRows="repeat(2, 1fr)">
      <Box
        bg="#697F9F"
        gridColumn="2 / span 1"
        gridRow="2 / span 1"
        h="100px"
        overflow="hidden"
      />
    </Grid>
  )
}"
`;

exports[`render real world component real world $ 73`] = `
"export function MixBlendMode() {
  return <Image aspectRatio="1" mixBlendMode="overlay" opacity="0.8" src="/images/image.png" />
}"
`;

exports[`render real world component real world $ 74`] = `
"export function MixBlendMode() {
  return <Image aspectRatio="1" mixBlendMode="screen" opacity="0.8" src="/images/image.png" />
}"
`;

exports[`render real world component real world $ 75`] = `
"export function MixBlendMode() {
  return <Image aspectRatio="1" mixBlendMode="multiply" opacity="0.8" src="/images/image.png" />
}"
`;

exports[`render real world component real world $ 76`] = `
"export function MixBlendMode() {
  return <Box bg="#D9D9D9" mixBlendMode="soft-light" />
}"
`;

exports[`render real world component real world $ 77`] = `
"export function MixBlendMode() {
  return (
    <Text
      color="#FF1919"
      fontFamily="Jalnan Gothic TTF"
      fontSize="64px"
      fontWeight="400"
      letterSpacing="-0.05em"
      lineHeight="1.4"
      mixBlendMode="darken"
      wordBreak="keep-all"
    >
      데브파이브
    </Text>
  )
}"
`;

exports[`render real world component real world $ 78`] = `
"export function TestCase:드론아레나() {
  return (
    <VStack
      alignItems="flex-end"
      bg="$primaryBg"
      border="solid 1px $border"
      gap="20px"
      px="40px"
      py="30px"
    >
      <Text
        color="$text"
        fontFamily="SUIT"
        fontSize="20px"
        fontWeight="700"
        letterSpacing="-1px"
        lineHeight="1.5"
        wordBreak="keep-all"
      >
        간편 로그인 연동
      </Text>
      <VStack>
        <Flex
          alignItems="center"
          borderRadius="10px"
          gap="12px"
          px="20px"
          py="12px"
        >
          <Text
            color="$text"
            flex="1"
            fontFamily="SUIT"
            fontSize="16px"
            fontWeight="600"
            letterSpacing="-1px"
            lineHeight="1.5"
            wordBreak="keep-all"
          >
            카카오
          </Text>
          <Text
            color="$gray500"
            fontFamily="SUIT"
            fontSize="15px"
            fontWeight="400"
            letterSpacing="-0.5px"
            lineHeight="1.5"
            wordBreak="keep-all"
          >
            연결 전
          </Text>
          <Center
            bg="$primary"
            border="solid 1px $primary"
            borderRadius="100px"
            px="12px"
            py="4px"
          >
            <Text
              color="#FFF"
              fontFamily="Pretendard"
              fontSize="14px"
              fontWeight="500"
              letterSpacing="0px"
              lineHeight="16px"
              wordBreak="keep-all"
            >
              인증하기
            </Text>
          </Center>
        </Flex>
        <Flex
          alignItems="center"
          borderRadius="10px"
          gap="12px"
          px="20px"
          py="12px"
        >
          <Text
            color="$text"
            flex="1"
            fontFamily="SUIT"
            fontSize="16px"
            fontWeight="600"
            letterSpacing="-1px"
            lineHeight="1.5"
            wordBreak="keep-all"
          >
            구글
          </Text>
          <Text
            color="$gray500"
            fontFamily="SUIT"
            fontSize="15px"
            fontWeight="400"
            letterSpacing="-0.5px"
            lineHeight="1.5"
          >
            cooolvita@gmail.com
          </Text>
          <Center
            bg="$primary"
            border="solid 1px $primary"
            borderRadius="100px"
            px="12px"
            py="4px"
          >
            <Text
              color="#FFF"
              fontFamily="Pretendard"
              fontSize="14px"
              fontWeight="500"
              letterSpacing="0px"
              lineHeight="16px"
              wordBreak="keep-all"
            >
              인증하기
            </Text>
          </Center>
        </Flex>
      </VStack>
      <Box bg="$border" h="1px" />
      <VStack>
        <Flex
          alignItems="center"
          borderRadius="10px"
          gap="12px"
          px="20px"
          py="12px"
        >
          <Text
            color="$text"
            flex="1"
            fontFamily="SUIT"
            fontSize="16px"
            fontWeight="600"
            letterSpacing="-1px"
            lineHeight="1.5"
            wordBreak="keep-all"
          >
            서비스 이용약관
          </Text>
          <Box
            bg="$gray300"
            boxSize="24px"
            maskImage="url(/icons/ic:round-arrow-left.svg)"
            maskPos="center"
            maskRepeat="no-repeat"
            maskSize="contain"
            transform="rotate(180deg)"
          />
        </Flex>
        <Flex
          alignItems="center"
          borderRadius="10px"
          gap="12px"
          px="20px"
          py="12px"
        >
          <Text
            color="$text"
            flex="1"
            fontFamily="SUIT"
            fontSize="16px"
            fontWeight="600"
            letterSpacing="-1px"
            lineHeight="1.5"
            wordBreak="keep-all"
          >
            개인정보 처리방침
          </Text>
          <Box
            bg="$gray300"
            boxSize="24px"
            maskImage="url(/icons/ic:round-arrow-left.svg)"
            maskPos="center"
            maskRepeat="no-repeat"
            maskSize="contain"
            transform="rotate(180deg)"
          />
        </Flex>
        <Flex
          alignItems="center"
          borderRadius="10px"
          gap="12px"
          px="20px"
          py="12px"
        >
          <Text
            color="$text"
            flex="1"
            fontFamily="SUIT"
            fontSize="16px"
            fontWeight="600"
            letterSpacing="-1px"
            lineHeight="1.5"
            wordBreak="keep-all"
          >
            회원 탈퇴
          </Text>
          <Box
            bg="$gray300"
            boxSize="24px"
            maskImage="url(/icons/ic:round-arrow-left.svg)"
            maskPos="center"
            maskRepeat="no-repeat"
            maskSize="contain"
            transform="rotate(180deg)"
          />
        </Flex>
      </VStack>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 79`] = `
"export function 다양한도형() {
  return (
    <Box
      bg="#D9D9D9"
      maskImage="url(/icons/Star7.svg)"
      maskPos="center"
      maskRepeat="no-repeat"
      maskSize="contain"
    />
  )
}"
`;

exports[`render real world component real world $ 80`] = `
"export function 다양한도형() {
  return (
    <Box
      bg="#D9D9D9"
      maskImage="url(/icons/Polygon1.svg)"
      maskPos="center"
      maskRepeat="no-repeat"
      maskSize="contain"
    />
  )
}"
`;

exports[`render real world component real world $ 81`] = `
"export function 다양한도형() {
  return (
    <Box
      bg="#D9D9D9"
      maskImage="url(/icons/Polygon1.svg)"
      maskPos="center"
      maskRepeat="no-repeat"
      maskSize="contain"
    />
  )
}"
`;

exports[`render real world component real world $ 82`] = `
"export function 다양한도형() {
  return <Box maxW="calc(140px - 8px)" outline="solid 4px #F00" transform="translate(4px, -4px)" />
}"
`;

exports[`render real world component real world $ 83`] = `
"export function 다양한도형() {
  return <Box maxW="calc(140px - 6px)" outline="solid 3px #FF000080" transform="translate(3px, -3px)" />
}"
`;

exports[`render real world component real world $ 84`] = `
"export function 다양한도형() {
  return <Box maxW="calc(140px - 6px)" outline="solid 3px #F00" transform="translate(3px, -3px)" />
}"
`;

exports[`render real world component real world $ 85`] = `
"export function 다양한도형() {
  return <Box maxW="calc(140px - 8px)" outline="solid 4px #F00" transform="translate(4px, -4px)" />
}"
`;

exports[`render real world component real world $ 86`] = `
"export function 다양한도형() {
  return <Box maxW="calc(150px - 2px)" outline="solid 1px #F00" transform="rotate(-15deg)" />
}"
`;

exports[`render real world component real world $ 87`] = `
"export function 다양한도형() {
  return <Box maxW="calc(131px - 2px)" outline="solid 1px #F00" transform="rotate(-90deg)" />
}"
`;

exports[`render real world component real world $ 88`] = `
"export function 다양한도형() {
  return <Image src="/icons/Vector4.svg" />
}"
`;

exports[`render real world component real world $ 89`] = `
"export function SvgDetail() {
  return <Image src="/icons/DevupUI.svg" />
}"
`;

exports[`render real world component real world $ 90`] = `
"export function SvgDetail() {
  return <Image src="/icons/DevupUI.svg" />
}"
`;

exports[`render real world component real world $ 91`] = `
"export function SvgDetail() {
  return (
    <Center bg="$containerBackground" border="solid 1px $gray200" borderRadius="10px" p="8px">
      <Box
        aspectRatio="1"
        bg="$textLight"
        boxSize="24px"
        maskImage="url(/icons/back.svg)"
        maskPos="center"
        maskRepeat="no-repeat"
        maskSize="contain"
        pl="9px"
        pr="7px"
        py="5px"
        transform="rotate(180deg)"
      />
    </Center>
  )
}"
`;

exports[`render real world component real world $ 92`] = `
"export function SvgDetail() {
  return (
    <Center aspectRatio="1" bg="$primaryBgLight" borderRadius="8px">
      <Box
        aspectRatio="1"
        bg="$primary"
        boxSize="20px"
        maskImage="url(/icons/plus.svg)"
        maskPos="center"
        maskRepeat="no-repeat"
        maskSize="contain"
        p="2.29px"
      />
    </Center>
  )
}"
`;

exports[`render real world component real world $ 93`] = `
"export function SvgDetail() {
  return (
    <Center aspectRatio="1" bg="$primaryBgLight" borderRadius="8px">
      <Image aspectRatio="1" boxSize="20px" src="/icons/plus.svg" />
    </Center>
  )
}"
`;

exports[`render real world component real world $ 94`] = `
"export function SvgDetail() {
  return (
    <Center borderRadius="100px" flexDir="column" p="10px">
      <Box
        aspectRatio="1"
        bg="#000"
        boxSize="28px"
        maskImage="url(/icons/cog.svg)"
        maskPos="center"
        maskRepeat="no-repeat"
        maskSize="contain"
        px="2.65px"
        py="2.33px"
      />
    </Center>
  )
}"
`;

exports[`render real world component real world $ 95`] = `
"export function SvgDetail() {
  return (
    <Center aspectRatio="1" bg="$primaryBgLight" borderRadius="8px">
      <Image aspectRatio="1" boxSize="20px" src="/icons/plus.svg" />
    </Center>
  )
}"
`;

exports[`render real world component real world $ 96`] = `
"export function SvgDetail() {
  return (
    <Center borderRadius="100px" flexDir="column" p="10px">
      <Box
        aspectRatio="1"
        bg="#000"
        boxSize="28px"
        maskImage="url(/icons/cog.svg)"
        maskPos="center"
        maskRepeat="no-repeat"
        maskSize="contain"
        px="2.65px"
        py="2.33px"
      />
    </Center>
  )
}"
`;

exports[`render real world component real world $ 97`] = `
"export function SvgDetail() {
  return (
    <Center borderRadius="100px" flexDir="column" p="10px">
      <Image aspectRatio="1" boxSize="28px" src="/icons/cog.svg" />
    </Center>
  )
}"
`;

exports[`render real world component real world $ 98`] = `
"export function DecorativeText() {
  return (
    <Text
      WebkitTextFillColor="transparent"
      bg="linear-gradient(-90deg, #6BB1F2 0%, #8235CA 100%)"
      bgClip="text"
      fontFamily="Pretendard"
      fontSize="36px"
      fontWeight="700"
      letterSpacing="-0.03em"
      lineHeight="1.3"
    >
      16.8s
    </Text>
  )
}"
`;

exports[`render real world component real world $ 99`] = `
"export function DecorativeText() {
  return (
    <Text
      WebkitTextStroke="3px #FFF"
      color="#4C05FF"
      fontFamily="Jalnan 2 TTF"
      fontSize="38px"
      fontWeight="400"
      letterSpacing="-0.02em"
      lineHeight="normal"
      paintOrder="stroke fill"
      textShadow="0 0 12px #7C70FF"
      wordBreak="keep-all"
    >
      홈페이지와 앱 제작
    </Text>
  )
}"
`;

exports[`render real world component real world $ 100`] = `
"export function DecorativeText() {
  return (
    <Text
      color="#000"
      fontFamily="Pretendard"
      fontSize="40px"
      fontWeight="500"
      letterSpacing="-0.05em"
      lineHeight="1.4"
      wordBreak="keep-all"
    >
      <Text color="$primary" fontSize="42px" fontWeight="800">
        온글
      </Text>
      과 함께라면
    </Text>
  )
}"
`;

exports[`render real world component real world $ 101`] = `
"export function DecorativeText() {
  return (
    <Text
      WebkitTextFillColor="transparent"
      bg="url(/icons/image.png) center/cover no-repeat"
      bgClip="text"
      fontFamily="Jalnan Gothic TTF"
      fontSize="64px"
      fontWeight="400"
      letterSpacing="-0.05em"
      lineHeight="1.4"
      wordBreak="keep-all"
    >
      데브파이브
    </Text>
  )
}"
`;

exports[`render real world component real world $ 102`] = `
"export function DecorativeText() {
  return (
    <Text
      WebkitTextStroke="2px #FFF"
      color="transparent"
      fontFamily="Jalnan Gothic TTF"
      fontSize="64px"
      fontWeight="400"
      letterSpacing="-0.05em"
      lineHeight="1.4"
      paintOrder="stroke fill"
      textShadow="0 0 12px #7C70FF, 0 10px 24px #FFC9FE66"
      wordBreak="keep-all"
    >
      데브파이브
    </Text>
  )
}"
`;

exports[`render real world component real world $ 103`] = `
"export function List() {
  return (
    <Text
      as="ul"
      color="$text"
      fontFamily="Pretendard"
      fontSize="15px"
      fontWeight="400"
      letterSpacing="-0.04em"
      lineHeight="2"
      my="0px"
      pl="1.5em"
      wordBreak="keep-all"
    >
      <li>
        어떤 증상이 가장 힘들고 일상생활에 영향을 주나요?
      </li>
      <li>
        증상이 언제부터 시작되었나요?
      </li>
      <li>
        증상이 시간이 지나면서 어떻게 변했나요?
      </li>
      <li>
        스트레스나 상황에 따라 증상이 달라지나요?
      </li>
    </Text>
  )
}"
`;

exports[`render real world component real world $ 104`] = `
"export function GradientButton() {
  return (
    <Center
      _active={{
        "bg": "linear-gradient(90deg, #7E22CE 0%, #4338CA 100%)",
        "opacity": "0.8"
      }}
      _disabled={{
        "bg": "$gray200"
      }}
      _hover={{
        "bg": "linear-gradient(90deg, #7E22CE 0%, #4338CA 100%)",
        "boxShadow": "0 4px 6px -4px #0000001A, 0 10px 15px -3px #0000001A"
      }}
      bg="linear-gradient(90deg, #9333EA 0%, #4F46E5 100%)"
      borderRadius="8px"
      boxShadow="0 2px 4px -2px #0000001A, 0 4px 6px -1px #0000001A"
      overflow="hidden"
      px="30px"
      py="12px"
      transition="0.3ms ease-out"
      transitionProperty="background,box-shadow,opacity"
    >
      <Text
        color="#FFF"
        fontFamily="Pretendard"
        fontSize="16px"
        fontWeight="700"
        letterSpacing="-0.04em"
        lineHeight="1.4"
        wordBreak="keep-all"
      >
        자세히 알아보기 →
      </Text>
    </Center>
  )
}"
`;

exports[`render real world component real world $ 105`] = `
"export interface ButtonProps {
  size: 'Md' | 'Sm'
  variant: 'primary' | 'white'
}

export function Button({ size, variant }: ButtonProps) {
  return (
    <Center
      _active={{
        "bg": {
          primary: ["$primaryBold", null, null, null, "$primaryExBold"],
          white: ["$background", null, null, null, "$backgroundBold"]
        }[variant]
      }}
      _hover={{
        "bg": {
          primary: [null, null, null, null, "$primaryBold"],
          white: [null, null, null, null, "$background"]
        }[variant]
      }}
      bg={{
        primary: "$primary",
        white: "$containerBackground"
      }[variant]}
      border={variant === 'white' && "solid 1px $primaryAccent"}
      borderRadius={{
        Md: ["10px", null, null, null, "12px"],
        Sm: ["8px", null, null, null, "10px"]
      }[size]}
      px={{
        Md: ["30px", null, null, null, "40px"],
        Sm: ["16px", null, null, null, "20px"]
      }[size]}
      py={{
        Md: ["16px", null, null, null, "20px"],
        Sm: ["12px", null, null, null, "14px"]
      }[size]}
      transition="0.2ms ease-out"
      transitionProperty="background"
    >
      <Text
        color={{
          primary: "#FFF",
          white: "$primaryAccent"
        }[variant]}
        fontFamily="Noto Sans KR"
        fontSize={{
          Md: ["16px", null, null, null, "20px"],
          Sm: ["14px", null, null, null, "15px"]
        }[size]}
        fontWeight="500"
        letterSpacing="-0.04em"
        lineHeight="normal"
        wordBreak="keep-all"
      >
        참가 신청하기
      </Text>
    </Center>
  )
}"
`;

exports[`render real world component real world $ 106`] = `
"export function UnderConstruction() {
  return (
    <Center bg="$background" overflow="hidden" px="40px" py="120px">
      <Image
        left="-196.23px"
        opacity="0.2"
        pos="absolute"
        src="/icons/backgroundImage.svg"
        top="-908px"
        transform="rotate(11.24deg)"
        transformOrigin="top left"
        w="100%"
      />
      <VStack alignItems="center" gap="120px">
        <VStack alignItems="center" gap="60px">
          <Box
            aspectRatio="1.91"
            bg="#B1874F"
            h="104px"
            maskImage="url(/icons/path1208.svg)"
            maskPos="center"
            maskRepeat="no-repeat"
            maskSize="contain"
            w="200px"
          />
          <VStack alignItems="center" gap="20px">
            <Text
              color="$primaryAccent"
              fontFamily="MaruBuri"
              fontSize="32px"
              fontWeight="700"
              letterSpacing="0.04em"
              lineHeight="normal"
            >
              Under Construction
            </Text>
            <Text
              color="$primaryAccent"
              fontFamily="MaruBuri"
              fontSize="56px"
              fontWeight="700"
              letterSpacing="-0.02em"
              lineHeight="normal"
              wordBreak="keep-all"
            >
              제주국제관악제 리뉴얼 알림
            </Text>
          </VStack>
          <VStack alignItems="center" gap="20px">
            <Text
              color="$text"
              fontFamily="Noto Sans KR"
              fontSize="20px"
              fontWeight="400"
              letterSpacing="-0.03em"
              lineHeight="2"
              textAlign="center"
              wordBreak="keep-all"
            >
              더 나은 서비스 제공을 위해 시스템 점검 및 리뉴얼을 진행 중입니다.<br />이용에 불편을 드려 죄송하며, 빠른 시일 내에 다시 찾아뵙겠습니다.
            </Text>
            <Text
              color="$textLight"
              fontFamily="Noto Sans KR"
              fontSize="16px"
              fontWeight="400"
              letterSpacing="-0.02em"
              lineHeight="1.8"
              textAlign="center"
            >
              We are currently updating our website to serve you better. <br />We apologize for the inconvenience.
            </Text>
          </VStack>
        </VStack>
        <VStack alignItems="center" gap="16px">
          <Text
            color="$primary"
            fontFamily="Noto Sans KR"
            fontSize="17px"
            fontWeight="700"
            letterSpacing="-0.02em"
            lineHeight="1.7"
            wordBreak="keep-all"
          >
            제주국제관악제 최신 소식 확인하기
          </Text>
          <Flex gap="30px">
            <Image
              aspectRatio="1"
              borderRadius="4px"
              boxSize="32px"
              display="none"
              src="/icons/twitter_5968830 (1) 1.svg"
            />
            <Image aspectRatio="1" borderRadius="4px" boxSize="32px" src="/icons/instagram_15713420 1.svg" />
            <Image aspectRatio="1" borderRadius="4px" boxSize="32px" src="/icons/facebook_1384053 1.svg" />
            <Flex
              aspectRatio="1"
              bg="#FFF"
              borderRadius="4px"
              boxSize="32px"
              overflow="hidden"
            >
              <Image boxSize="32px" src="/icons/Layer 2.svg" />
            </Flex>
            <Image aspectRatio="1" boxSize="32px" display="none" src="/icons/Group 21.svg" />
          </Flex>
          <Text
            color="$text"
            fontFamily="Noto Sans KR"
            fontSize="17px"
            fontWeight="500"
            letterSpacing="-0.02em"
            lineHeight="1.7"
            wordBreak="keep-all"
          >
            문의 : 064-722-8704 / bandfestival@hanmail.net
          </Text>
        </VStack>
      </VStack>
    </Center>
  )
}"
`;

exports[`render real world component real world $ 107`] = `
"export function UnderConstruction() {
  return (
    <Center
      bg="$background"
      flexDir="column"
      gap="76px"
      overflow="hidden"
      px="20px"
      py="60px"
    >
      <Image
        left="-183.93px"
        opacity="0.2"
        pos="absolute"
        src="/icons/backgroundImage.svg"
        top="-255px"
        transform="rotate(11.24deg)"
        transformOrigin="top left"
        w="100%"
      />
      <VStack alignItems="center" gap="60px" w="100%">
        <VStack alignItems="center" gap="30px" w="100%">
          <Box
            aspectRatio="1.91"
            bg="#B1874F"
            h="52px"
            maskImage="url(/icons/path1208.svg)"
            maskPos="center"
            maskRepeat="no-repeat"
            maskSize="contain"
            w="100px"
          />
          <VStack alignItems="center" gap="20px" w="100%">
            <Text
              color="$primaryAccent"
              fontFamily="MaruBuri"
              fontSize="20px"
              fontWeight="700"
              letterSpacing="0.04em"
              lineHeight="1.5"
            >
              Under Construction
            </Text>
            <Text
              color="$primaryAccent"
              fontFamily="MaruBuri"
              fontSize="35px"
              fontWeight="700"
              letterSpacing="-0.02em"
              lineHeight="1.5"
              textAlign="center"
              w="100%"
              wordBreak="keep-all"
            >
              제주국제관악제 <br />리뉴얼 알림
            </Text>
          </VStack>
          <VStack alignItems="center" gap="20px" w="100%">
            <Text
              color="$text"
              fontFamily="Noto Sans KR"
              fontSize="17px"
              fontWeight="400"
              letterSpacing="-0.03em"
              lineHeight="2"
              textAlign="center"
              w="100%"
              wordBreak="keep-all"
            >
              더 나은 서비스 제공을 위해 <br />시스템 점검 및 리뉴얼을 진행 중입니다.<br />이용에 불편을 드려 죄송하며, <br />빠른 시일 내에 다시 찾아뵙겠습니다.
            </Text>
            <Text
              color="$textLight"
              fontFamily="Noto Sans KR"
              fontSize="15px"
              fontWeight="400"
              letterSpacing="-0.02em"
              lineHeight="1.7"
              textAlign="center"
              w="100%"
            >
              We are currently updating our website <br />to serve you better. <br />We apologize for the inconvenience.
            </Text>
          </VStack>
        </VStack>
        <VStack alignItems="center" gap="20px">
          <Text
            color="$primary"
            fontFamily="Noto Sans KR"
            fontSize="16px"
            fontWeight="700"
            letterSpacing="-0.02em"
            lineHeight="1.7"
            wordBreak="keep-all"
          >
            제주국제관악제 최신 소식 확인하기
          </Text>
          <Flex gap="30px">
            <Image
              aspectRatio="1"
              borderRadius="4px"
              boxSize="32px"
              display="none"
              src="/icons/twitter_5968830 (1) 1.svg"
            />
            <Image aspectRatio="1" borderRadius="4px" boxSize="32px" src="/icons/instagram_15713420 1.svg" />
            <Image aspectRatio="1" borderRadius="4px" boxSize="32px" src="/icons/facebook_1384053 1.svg" />
            <Box
              aspectRatio="1"
              bg="#FFF"
              borderRadius="4px"
              boxSize="32px"
              overflow="hidden"
              pos="relative"
            >
              <Image boxSize="32px" src="/icons/Layer 2.svg" />
            </Box>
            <Image aspectRatio="1" boxSize="32px" display="none" src="/icons/Group 21.svg" />
          </Flex>
          <Text
            color="$text"
            fontFamily="Noto Sans KR"
            fontSize="16px"
            fontWeight="500"
            letterSpacing="-0.02em"
            lineHeight="1.7"
            textAlign="center"
            wordBreak="keep-all"
          >
            문의 : 064-722-8704 / <br />bandfestival@hanmail.net
          </Text>
        </VStack>
      </VStack>
    </Center>
  )
}"
`;

exports[`render real world component real world $ 108`] = `
"export function Greetings() {
  return (
    <VStack>
      <PageHeader />
      <VStack
        alignItems="center"
        bg="$containerBackground"
        gap="100px"
        overflow="hidden"
        pb="100px"
        pt="40px"
        px="40px"
      >
        <Center
          borderBottom="solid 1px $border"
          gap="20px"
          maxW="1280px"
          pos="relative"
          w="100%"
        >
          <Box
            bg="$border"
            h="289px"
            left="-23px"
            overflow="hidden"
            pos="absolute"
            top="194px"
            w="389px"
          />
          <Tab />
          <Box bg="$border" borderRadius="50%" boxSize="8px" />
          <Component3 />
          <Box bg="$border" borderRadius="50%" boxSize="8px" />
          <Component4 />
        </Center>
        <Flex gap="40px" maxW="1280px" w="100%">
          <Image h="300px" src="/images/Frame 568.png" w="400px" />
          <VStack flex="1" gap="40px">
            <Box
              aspectRatio="1.59"
              bg="$gold"
              h="64px"
              maskImage="url('/icons/Group 27.svg')"
              maskPos="center"
              maskRepeat="no-repeat"
              maskSize="contain"
              w="102.17px"
            />
            <Text
              color="$primaryAccent"
              fontFamily="MaruBuri"
              fontSize="28px"
              fontWeight="700"
              letterSpacing="-0.03em"
              lineHeight="1.5"
              wordBreak="keep-all"
            >
              “ 섬, 그 바람의 울림! ”<br />희망찬 봄을 여는 관악의 울림이 더 <br />널리,<br />더 멀리 퍼져나가기를 기원합니다.{" "}
            </Text>
            <Text
              color="$text"
              fontFamily="Noto Sans KR"
              fontSize="16px"
              fontWeight="400"
              letterSpacing="-0.02em"
              lineHeight="1.8"
              wordBreak="keep-all"
            >
              음악과 자연이 함께 어우러지는 제주국제관악제가 30주년을 맞게 되었습니다.<br /><br />제주국제관악제를 아껴주시는 모든 분들과 함께 세계 속의 제주관악의 역사를 써 왔음에 깊이 감사드립니다.<br />그동안 힘들고 어려운 순간들 속에서도 관악의 힘찬 울림은 우리에게 큰 위로와 보람을 안겨주었습니다.<br />새로운 세대를 여는 앞으로의 시간과 함께 켜켜이 쌓여가는 역사 속에서, 세계를 향한 우리의 각오와 노력이 더해질 것입니다.<br /><br />희망찬 봄을 여는 관악의 울림이 더 널리, 더 멀리 퍼져나가기를 기원합니다.<br />감사합니다.
            </Text>
            <VStack alignItems="flex-end" gap="10px" justifyContent="center">
              <Text
                color="$text"
                fontFamily="Noto Sans KR"
                fontSize="16px"
                fontWeight="400"
                letterSpacing="-0.02em"
                lineHeight="1.8"
                wordBreak="keep-all"
              >
                제주국제관악제조직위원장{" "}
              </Text>
              <Text
                color="$text"
                fontFamily="Noto Sans KR"
                fontSize="24px"
                fontWeight="500"
                letterSpacing="0.1em"
                lineHeight="1.7"
                wordBreak="keep-all"
              >
                양승보
              </Text>
            </VStack>
          </VStack>
        </Flex>
      </VStack>
      <Footer />
      <Box left="0px" pos="absolute" top="0px" w="100%">
        <Header />
      </Box>
    </VStack>
  )
}"
`;

exports[`render real world component real world $ 109`] = `
"export function Location() {
  return (
    <VStack>
      <PageHeader />
      <VStack
        alignItems="center"
        bg="$containerBackground"
        gap="60px"
        overflow="hidden"
        pb="120px"
        pt="60px"
        px="40px"
      >
        <Center borderBottom="solid 1px $border" gap="20px" maxW="1280px" w="100%">
          <Component3 />
          <Box bg="$border" borderRadius="50%" boxSize="8px" />
          <Tab />
        </Center>
        <VStack maxW="1280px" w="100%">
          <VStack>
            <Flex border="solid 1px $border" overflow="hidden" pos="relative">
              <Image flex="1" h="640px" objectFit="cover" src="/images/image 22.png" />
              <Box left="570px" pos="absolute" top="80px">
                <MapPin />
              </Box>
              <Box left="1019px" pos="absolute" top="131px">
                <MapPin />
              </Box>
              <Box left="266px" pos="absolute" top="203px">
                <MapPin />
              </Box>
              <Box left="660px" pos="absolute" top="413px">
                <MapPin />
              </Box>
              <Box left="540px" pos="absolute" top="85px">
                <MapPin />
              </Box>
              <Box left="558px" pos="absolute" top="125px">
                <MapPin />
              </Box>
              <Box left="690px" pos="absolute" top="74px">
                <MapPin />
              </Box>
              <Box left="593px" pos="absolute" top="97px">
                <MapPin />
              </Box>
              <Flex
                alignItems="center"
                boxShadow="0 4px 8px 0 #00000026"
                gap="10px"
                left="50%"
                overflow="hidden"
                pos="absolute"
                top="16px"
                transform="translateX(-50%)"
              >
                <Component7 />
                <Component6 />
                <Component8 />
                <Component9 />
              </Flex>
            </Flex>
          </VStack>
        </VStack>
      </VStack>
      <Footer />
      <Box pos="absolute" right="50px" top="50%" transform="translateY(-50%)">
        <FloatingButton />
      </Box>
      <Box left="0px" pos="absolute" top="0px" w="100%">
        <Header />
      </Box>
    </VStack>
  )
}"
`;