@seed-design/figma 1.1.13 → 1.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/lib/codegen/index.cjs +636 -114
  2. package/lib/codegen/index.d.ts +136 -96
  3. package/lib/codegen/index.d.ts.map +1 -1
  4. package/lib/codegen/index.js +636 -114
  5. package/lib/codegen/targets/react/index.cjs +682 -134
  6. package/lib/codegen/targets/react/index.d.ts +31 -11
  7. package/lib/codegen/targets/react/index.d.ts.map +1 -1
  8. package/lib/codegen/targets/react/index.js +682 -135
  9. package/lib/index.cjs +1254 -433
  10. package/lib/index.d.ts +46 -10
  11. package/lib/index.d.ts.map +1 -1
  12. package/lib/index.js +1254 -433
  13. package/package.json +1 -1
  14. package/src/codegen/component-properties.ts +5 -5
  15. package/src/codegen/core/value-resolver.ts +49 -12
  16. package/src/codegen/targets/figma/frame.ts +1 -0
  17. package/src/codegen/targets/figma/pipeline.ts +5 -0
  18. package/src/codegen/targets/figma/props.ts +30 -1
  19. package/src/codegen/targets/figma/shape.ts +1 -0
  20. package/src/codegen/targets/figma/value-resolver.ts +20 -0
  21. package/src/codegen/targets/react/component/handlers/menu-sheet.ts +1 -1
  22. package/src/codegen/targets/react/component/handlers/page-banner.ts +2 -2
  23. package/src/codegen/targets/react/component/handlers/{radio-mark.ts → radiomark.ts} +4 -4
  24. package/src/codegen/targets/react/component/handlers/result-section.ts +1 -1
  25. package/src/codegen/targets/react/component/handlers/{switch-mark.ts → switchmark.ts} +4 -4
  26. package/src/codegen/targets/react/component/index.ts +4 -4
  27. package/src/codegen/targets/react/frame.ts +16 -2
  28. package/src/codegen/targets/react/pipeline.ts +6 -1
  29. package/src/codegen/targets/react/props.ts +26 -0
  30. package/src/codegen/targets/react/shape.ts +5 -1
  31. package/src/codegen/targets/react/value-resolver.ts +26 -0
  32. package/src/entities/data/__generated__/component-sets/index.d.ts +84 -89
  33. package/src/entities/data/__generated__/component-sets/index.mjs +84 -89
  34. package/src/entities/data/__generated__/components/index.d.ts +2 -2
  35. package/src/entities/data/__generated__/components/index.mjs +2 -2
  36. package/src/entities/data/__generated__/icons/index.mjs +14 -0
  37. package/src/entities/data/__generated__/styles/index.mjs +190 -1
  38. package/src/entities/data/__generated__/variable-collections/index.mjs +11 -1
  39. package/src/entities/data/__generated__/variables/index.mjs +280 -0
  40. package/src/normalizer/from-plugin.ts +427 -258
  41. package/src/normalizer/from-rest.ts +428 -58
  42. package/src/normalizer/types.ts +63 -10
  43. package/src/utils/figma-node.ts +15 -10
@@ -542,7 +542,8 @@ function getFirstSolidFill(node) {
542
542
  return fills[0];
543
543
  }
544
544
  function getFirstFillVariable(node) {
545
- return node.boundVariables?.fills?.[0];
545
+ const fill = getFirstSolidFill(node);
546
+ return fill?.boundVariables?.color;
546
547
  }
547
548
  function getFirstStroke(node) {
548
549
  const strokes = node.strokes?.filter((stroke)=>stroke.type === "SOLID" && (!("visible" in stroke) || stroke.visible === true)) ?? [];
@@ -552,10 +553,11 @@ function getFirstStroke(node) {
552
553
  return strokes[0];
553
554
  }
554
555
  function getFirstStrokeVariable(node) {
555
- return node.boundVariables?.strokes?.[0];
556
+ const stroke = getFirstStroke(node);
557
+ return stroke?.boundVariables?.color;
556
558
  }
557
559
 
558
- function createValueResolver({ variableService, variableNameFormatter, styleService, textStyleNameFormatter, fillStyleResolver, rawValueFormatters, shouldInferVariableName }) {
560
+ function createValueResolver({ variableService, variableNameFormatter, styleService, textStyleNameFormatter, effectStyleNameFormatter, fillStyleResolver, rawValueFormatters, shouldInferVariableName }) {
559
561
  function getVariableName(key) {
560
562
  const slug = variableService.getSlug(key);
561
563
  if (!slug) {
@@ -579,9 +581,9 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
579
581
  return undefined;
580
582
  }
581
583
  }
582
- function processColor(key, value, scope) {
583
- if (key) {
584
- return getVariableName(key);
584
+ function processColor(id, value, scope) {
585
+ if (id) {
586
+ return getVariableName(id);
585
587
  }
586
588
  if (value !== undefined) {
587
589
  return inferVariableName(value, scope) ?? rawValueFormatters.color(value);
@@ -597,27 +599,27 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
597
599
  slug
598
600
  });
599
601
  }
600
- function processDimension(key, value, scope) {
601
- if (key) {
602
- return getVariableName(key);
602
+ function processDimension(id, value, scope) {
603
+ if (id) {
604
+ return getVariableName(id);
603
605
  }
604
606
  if (value !== undefined) {
605
607
  return inferVariableName(value, scope) ?? rawValueFormatters.dimension(value);
606
608
  }
607
609
  return undefined;
608
610
  }
609
- function processFontDimension(key, value, scope) {
610
- if (key) {
611
- return getVariableName(key);
611
+ function processFontDimension(id, value, scope) {
612
+ if (id) {
613
+ return getVariableName(id);
612
614
  }
613
615
  if (value !== undefined) {
614
616
  return inferVariableName(value, scope) ?? rawValueFormatters.fontDimension(value);
615
617
  }
616
618
  return undefined;
617
619
  }
618
- function processFontWeight(key, value) {
619
- if (key) {
620
- return getVariableName(key);
620
+ function processFontWeight(id, value) {
621
+ if (id) {
622
+ return getVariableName(id);
621
623
  }
622
624
  if (value !== undefined) {
623
625
  const fontWeightToString = {
@@ -647,6 +649,7 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
647
649
  paddingTop: (node)=>processDimension(node.boundVariables?.paddingTop?.id, node.paddingTop, "GAP"),
648
650
  paddingBottom: (node)=>processDimension(node.boundVariables?.paddingBottom?.id, node.paddingBottom, "GAP"),
649
651
  itemSpacing: (node)=>processDimension(node.boundVariables?.itemSpacing?.id, node.itemSpacing, "GAP"),
652
+ counterAxisSpacing: (node)=>processDimension(node.boundVariables?.counterAxisSpacing?.id, node.counterAxisSpacing, "GAP"),
650
653
  frameFill: (node)=>node.fillStyleKey ? processFillStyle(node.fillStyleKey) : processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "FRAME_FILL"),
651
654
  shapeFill: (node)=>processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "SHAPE_FILL"),
652
655
  textFill: (node)=>processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "TEXT_FILL"),
@@ -657,7 +660,11 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
657
660
  bottomRightRadius: (node)=>processDimension(node.boundVariables?.bottomRightRadius?.id, node.rectangleCornerRadii?.[3] ?? node.cornerRadius, "CORNER_RADIUS"),
658
661
  fontSize: (node)=>processFontDimension(node.boundVariables?.fontSize?.[0]?.id, node.style.fontSize, "FONT_SIZE"),
659
662
  fontWeight: (node)=>processFontWeight(node.boundVariables?.fontWeight?.[0]?.id, node.style.fontWeight),
660
- lineHeight: (node)=>processFontDimension(node.boundVariables?.lineHeight?.[0]?.id, node.style.lineHeightPx, "LINE_HEIGHT")
663
+ lineHeight: (node)=>processFontDimension(node.boundVariables?.lineHeight?.[0]?.id, node.style.lineHeightPx, "LINE_HEIGHT"),
664
+ boxShadow: (node)=>{
665
+ if (node.effects.length === 0) return undefined;
666
+ return node.effects.map(rawValueFormatters.boxShadow).join(", ");
667
+ }
661
668
  };
662
669
  function getTextStyleValue(node) {
663
670
  if (!node.textStyleKey) return undefined;
@@ -669,9 +676,20 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
669
676
  slug
670
677
  });
671
678
  }
679
+ function getEffectStyleValue(node) {
680
+ if (!node.effectStyleKey) return undefined;
681
+ const slug = styleService.getSlug(node.effectStyleKey);
682
+ if (!slug) {
683
+ return undefined;
684
+ }
685
+ return effectStyleNameFormatter({
686
+ slug
687
+ });
688
+ }
672
689
  return {
673
690
  getFormattedValue,
674
- getTextStyleValue
691
+ getTextStyleValue,
692
+ getEffectStyleValue
675
693
  };
676
694
  }
677
695
 
@@ -721,7 +739,7 @@ const FIGMA_STYLES = [
721
739
  {
722
740
  "styleType": "TEXT",
723
741
  "key": "af24f9e7cc90af3bf2a18029dd59ae0646966486",
724
- "name": "legacy-13-150",
742
+ "name": "scale/legacy-13-150",
725
743
  "description": "13",
726
744
  "remote": false
727
745
  },
@@ -753,6 +771,27 @@ const FIGMA_STYLES = [
753
771
  "description": "11",
754
772
  "remote": false
755
773
  },
774
+ {
775
+ "styleType": "TEXT",
776
+ "key": "ab6db5fae979eef82d7eece9237bd04c02707f57",
777
+ "name": "scale/t1-static-bold",
778
+ "description": "11",
779
+ "remote": false
780
+ },
781
+ {
782
+ "styleType": "TEXT",
783
+ "key": "16c25fb788efbfe8f6d042820e342077a461f9bf",
784
+ "name": "scale/t1-static-medium",
785
+ "description": "11",
786
+ "remote": false
787
+ },
788
+ {
789
+ "styleType": "TEXT",
790
+ "key": "5579ed6f529f5e97049e0842212b4958437eea34",
791
+ "name": "scale/t1-static-regular",
792
+ "description": "11",
793
+ "remote": false
794
+ },
756
795
  {
757
796
  "styleType": "TEXT",
758
797
  "key": "6ea6b06312771259d59de265a5ef12cd1dae9102",
@@ -760,6 +799,13 @@ const FIGMA_STYLES = [
760
799
  "description": "26",
761
800
  "remote": false
762
801
  },
802
+ {
803
+ "styleType": "TEXT",
804
+ "key": "08861e25c3f74a29c2ae4ce007fe50b63e302392",
805
+ "name": "scale/t10-static-bold",
806
+ "description": "26",
807
+ "remote": false
808
+ },
763
809
  {
764
810
  "styleType": "TEXT",
765
811
  "key": "8378bd59b14f5682dcaf20110efde4b7a1fb18e3",
@@ -781,6 +827,27 @@ const FIGMA_STYLES = [
781
827
  "description": "12",
782
828
  "remote": false
783
829
  },
830
+ {
831
+ "styleType": "TEXT",
832
+ "key": "4c6e5c31b949694aa08bf8d4d5cc445e22cf301f",
833
+ "name": "scale/t2-static-bold",
834
+ "description": "12",
835
+ "remote": false
836
+ },
837
+ {
838
+ "styleType": "TEXT",
839
+ "key": "7d4bb16ddefb735fd197123b013864e7c412a934",
840
+ "name": "scale/t2-static-medium",
841
+ "description": "12",
842
+ "remote": false
843
+ },
844
+ {
845
+ "styleType": "TEXT",
846
+ "key": "e05fbcacd044da0c9e6b73c7382bc4562a4a5d30",
847
+ "name": "scale/t2-static-regular",
848
+ "description": "12",
849
+ "remote": false
850
+ },
784
851
  {
785
852
  "styleType": "TEXT",
786
853
  "key": "f749d659a689cbbecbdbb1b559056731234332a3",
@@ -802,6 +869,27 @@ const FIGMA_STYLES = [
802
869
  "description": "13",
803
870
  "remote": false
804
871
  },
872
+ {
873
+ "styleType": "TEXT",
874
+ "key": "3174e2a628cf75bc8f906af35b9b5d04595267c8",
875
+ "name": "scale/t3-static-bold",
876
+ "description": "13",
877
+ "remote": false
878
+ },
879
+ {
880
+ "styleType": "TEXT",
881
+ "key": "c19d7f5ec3290802216aa3b0993931835d8fa3b5",
882
+ "name": "scale/t3-static-medium",
883
+ "description": "13",
884
+ "remote": false
885
+ },
886
+ {
887
+ "styleType": "TEXT",
888
+ "key": "0cda3e483e52409e3ca59a019f29c16be078355f",
889
+ "name": "scale/t3-static-regular",
890
+ "description": "13",
891
+ "remote": false
892
+ },
805
893
  {
806
894
  "styleType": "TEXT",
807
895
  "key": "a85ea49c1625319427c047bc206c26e708012030",
@@ -823,6 +911,27 @@ const FIGMA_STYLES = [
823
911
  "description": "14",
824
912
  "remote": false
825
913
  },
914
+ {
915
+ "styleType": "TEXT",
916
+ "key": "35fd98a75610254f7c8c15c6e7b71d67fccd9eed",
917
+ "name": "scale/t4-static-bold",
918
+ "description": "14",
919
+ "remote": false
920
+ },
921
+ {
922
+ "styleType": "TEXT",
923
+ "key": "c785ba7fed186bd4c98295bdc2292933faed98ef",
924
+ "name": "scale/t4-static-medium",
925
+ "description": "14",
926
+ "remote": false
927
+ },
928
+ {
929
+ "styleType": "TEXT",
930
+ "key": "51a90741bcc1a7dc81293eae0f085a8d5fb01855",
931
+ "name": "scale/t4-static-regular",
932
+ "description": "14",
933
+ "remote": false
934
+ },
826
935
  {
827
936
  "styleType": "TEXT",
828
937
  "key": "8eff229c53f06eeb418f39ad1cb3dbe12480f12b",
@@ -844,6 +953,27 @@ const FIGMA_STYLES = [
844
953
  "description": "16",
845
954
  "remote": false
846
955
  },
956
+ {
957
+ "styleType": "TEXT",
958
+ "key": "37a672b087c5d72461b75c679924245ad89bcb06",
959
+ "name": "scale/t5-static-bold",
960
+ "description": "16",
961
+ "remote": false
962
+ },
963
+ {
964
+ "styleType": "TEXT",
965
+ "key": "8b295f9759faed27b6a03cc50a8b257bf3af5cd0",
966
+ "name": "scale/t5-static-medium",
967
+ "description": "16",
968
+ "remote": false
969
+ },
970
+ {
971
+ "styleType": "TEXT",
972
+ "key": "2011f31d265d6bb4535da4f16eb4f5d68f48d56e",
973
+ "name": "scale/t5-static-regular",
974
+ "description": "16",
975
+ "remote": false
976
+ },
847
977
  {
848
978
  "styleType": "TEXT",
849
979
  "key": "adf921a56e89b5737a6b626034cfea184e828370",
@@ -865,6 +995,27 @@ const FIGMA_STYLES = [
865
995
  "description": "18",
866
996
  "remote": false
867
997
  },
998
+ {
999
+ "styleType": "TEXT",
1000
+ "key": "122ff9fd500bc63517b01a103a399b26130e7f0b",
1001
+ "name": "scale/t6-static-bold",
1002
+ "description": "18",
1003
+ "remote": false
1004
+ },
1005
+ {
1006
+ "styleType": "TEXT",
1007
+ "key": "0de548c3afd5c31e8b1c42a0170d44beba400a55",
1008
+ "name": "scale/t6-static-medium",
1009
+ "description": "18",
1010
+ "remote": false
1011
+ },
1012
+ {
1013
+ "styleType": "TEXT",
1014
+ "key": "c6d683f532e80c0c04e05057674e92265541a231",
1015
+ "name": "scale/t6-static-regular",
1016
+ "description": "18",
1017
+ "remote": false
1018
+ },
868
1019
  {
869
1020
  "styleType": "TEXT",
870
1021
  "key": "182d9252d7f7380075915a89e6160d7595124bc3",
@@ -886,6 +1037,27 @@ const FIGMA_STYLES = [
886
1037
  "description": "20",
887
1038
  "remote": false
888
1039
  },
1040
+ {
1041
+ "styleType": "TEXT",
1042
+ "key": "2454dff78b9ac153728a2cff00ca1d28f234e3a0",
1043
+ "name": "scale/t7-static-bold",
1044
+ "description": "20",
1045
+ "remote": false
1046
+ },
1047
+ {
1048
+ "styleType": "TEXT",
1049
+ "key": "f0da131559e6b466810b06343f94c551a0593bb4",
1050
+ "name": "scale/t7-static-medium",
1051
+ "description": "20",
1052
+ "remote": false
1053
+ },
1054
+ {
1055
+ "styleType": "TEXT",
1056
+ "key": "07ef3b8fcb31319d1d83100957eb06fc0e37c1e9",
1057
+ "name": "scale/t7-static-regular",
1058
+ "description": "20",
1059
+ "remote": false
1060
+ },
889
1061
  {
890
1062
  "styleType": "TEXT",
891
1063
  "key": "b7f864e3f64524a863d38729e2cea18f44c7ebaa",
@@ -893,6 +1065,13 @@ const FIGMA_STYLES = [
893
1065
  "description": "22",
894
1066
  "remote": false
895
1067
  },
1068
+ {
1069
+ "styleType": "TEXT",
1070
+ "key": "37821f18bc4416d7a81fa429d89240317a8f17e6",
1071
+ "name": "scale/t8-static-bold",
1072
+ "description": "22",
1073
+ "remote": false
1074
+ },
896
1075
  {
897
1076
  "styleType": "TEXT",
898
1077
  "key": "b146e1317c67db787834f1890493225bdbba4e48",
@@ -900,6 +1079,13 @@ const FIGMA_STYLES = [
900
1079
  "description": "24",
901
1080
  "remote": false
902
1081
  },
1082
+ {
1083
+ "styleType": "TEXT",
1084
+ "key": "c06e147e98440109199e2e3fa2a63390d19afb0c",
1085
+ "name": "scale/t9-static-bold",
1086
+ "description": "24",
1087
+ "remote": false
1088
+ },
903
1089
  {
904
1090
  "styleType": "TEXT",
905
1091
  "key": "85422ef9f0230f821f1a9e6d2f8f86b3ba87f20d",
@@ -913,6 +1099,27 @@ const FIGMA_STYLES = [
913
1099
  "name": "semantic/screen-title",
914
1100
  "description": "26",
915
1101
  "remote": false
1102
+ },
1103
+ {
1104
+ "styleType": "EFFECT",
1105
+ "key": "4717150d124a52434b2777609b046aa73a94c7ba",
1106
+ "name": "shadow/s1",
1107
+ "description": "",
1108
+ "remote": false
1109
+ },
1110
+ {
1111
+ "styleType": "EFFECT",
1112
+ "key": "906bc739e1b77bc1719762826f6d1154893c8266",
1113
+ "name": "shadow/s2",
1114
+ "description": "",
1115
+ "remote": false
1116
+ },
1117
+ {
1118
+ "styleType": "EFFECT",
1119
+ "key": "56f376d9146d9e158ba127ee8347c3cbf8329f19",
1120
+ "name": "shadow/s3",
1121
+ "description": "화면의 다른 요소들보다 가장 높은 계층에 위치할 때 사용됩니다.",
1122
+ "remote": false
916
1123
  }
917
1124
  ];
918
1125
 
@@ -971,8 +1178,8 @@ const FIGMA_VARIABLE_COLLECTIONS = {
971
1178
  "VariableID:654:20851",
972
1179
  "VariableID:1:171",
973
1180
  "VariableID:41186:6437",
974
- "VariableID:1:172",
975
1181
  "VariableID:1:158",
1182
+ "VariableID:1:172",
976
1183
  "VariableID:1:161",
977
1184
  "VariableID:1:159",
978
1185
  "VariableID:576:22878",
@@ -1027,6 +1234,16 @@ const FIGMA_VARIABLE_COLLECTIONS = {
1027
1234
  "VariableID:12548:1436",
1028
1235
  "VariableID:12548:1438",
1029
1236
  "VariableID:12548:1439",
1237
+ "VariableID:54897:41770",
1238
+ "VariableID:54897:41771",
1239
+ "VariableID:54897:41772",
1240
+ "VariableID:54897:41773",
1241
+ "VariableID:54897:41775",
1242
+ "VariableID:54897:41776",
1243
+ "VariableID:54897:41777",
1244
+ "VariableID:54897:41778",
1245
+ "VariableID:54897:41779",
1246
+ "VariableID:54897:41780",
1030
1247
  "VariableID:14609:16910",
1031
1248
  "VariableID:29333:3993",
1032
1249
  "VariableID:29333:10509",
@@ -1478,6 +1695,286 @@ const FIGMA_VARIABLES = {
1478
1695
  ],
1479
1696
  "codeSyntax": {}
1480
1697
  },
1698
+ "VariableID:54897:41776": {
1699
+ "name": "banner/blue",
1700
+ "id": "VariableID:54897:41776",
1701
+ "remote": false,
1702
+ "key": "f0d9f5531252da917ad0d0b5618c384218463fa1",
1703
+ "variableCollectionId": "VariableCollectionId:1:3",
1704
+ "resolvedType": "COLOR",
1705
+ "description": "",
1706
+ "hiddenFromPublishing": false,
1707
+ "valuesByMode": {
1708
+ "1928:7": {
1709
+ "r": 0.8823529481887817,
1710
+ "g": 0.9686274528503418,
1711
+ "b": 1,
1712
+ "a": 1
1713
+ },
1714
+ "1928:8": {
1715
+ "r": 0.05098039284348488,
1716
+ "g": 0.16470588743686676,
1717
+ "b": 0.22745098173618317,
1718
+ "a": 1
1719
+ }
1720
+ },
1721
+ "scopes": [
1722
+ "ALL_SCOPES"
1723
+ ],
1724
+ "codeSyntax": {}
1725
+ },
1726
+ "VariableID:54897:41780": {
1727
+ "name": "banner/cool-gray",
1728
+ "id": "VariableID:54897:41780",
1729
+ "remote": false,
1730
+ "key": "406783eff4302eda53767dc58be1467df8e36ba9",
1731
+ "variableCollectionId": "VariableCollectionId:1:3",
1732
+ "resolvedType": "COLOR",
1733
+ "description": "",
1734
+ "hiddenFromPublishing": false,
1735
+ "valuesByMode": {
1736
+ "1928:7": {
1737
+ "r": 0.9215686321258545,
1738
+ "g": 0.9450980424880981,
1739
+ "b": 0.9607843160629272,
1740
+ "a": 1
1741
+ },
1742
+ "1928:8": {
1743
+ "r": 0.1411764770746231,
1744
+ "g": 0.1725490242242813,
1745
+ "b": 0.20000000298023224,
1746
+ "a": 1
1747
+ }
1748
+ },
1749
+ "scopes": [
1750
+ "ALL_SCOPES"
1751
+ ],
1752
+ "codeSyntax": {}
1753
+ },
1754
+ "VariableID:54897:41773": {
1755
+ "name": "banner/green",
1756
+ "id": "VariableID:54897:41773",
1757
+ "remote": false,
1758
+ "key": "550727f1d9dd9badfe54ff576b58b0333366a9e3",
1759
+ "variableCollectionId": "VariableCollectionId:1:3",
1760
+ "resolvedType": "COLOR",
1761
+ "description": "",
1762
+ "hiddenFromPublishing": false,
1763
+ "valuesByMode": {
1764
+ "1928:7": {
1765
+ "r": 0.9411764740943909,
1766
+ "g": 0.9843137264251709,
1767
+ "b": 0.8980392217636108,
1768
+ "a": 1
1769
+ },
1770
+ "1928:8": {
1771
+ "r": 0.11764705926179886,
1772
+ "g": 0.21176470816135406,
1773
+ "b": 0.10980392247438431,
1774
+ "a": 1
1775
+ }
1776
+ },
1777
+ "scopes": [
1778
+ "ALL_SCOPES"
1779
+ ],
1780
+ "codeSyntax": {}
1781
+ },
1782
+ "VariableID:54897:41771": {
1783
+ "name": "banner/orange",
1784
+ "id": "VariableID:54897:41771",
1785
+ "remote": false,
1786
+ "key": "ef1b5c743d00c45c11fbc851e22c06159b5df1e0",
1787
+ "variableCollectionId": "VariableCollectionId:1:3",
1788
+ "resolvedType": "COLOR",
1789
+ "description": "",
1790
+ "hiddenFromPublishing": false,
1791
+ "valuesByMode": {
1792
+ "1928:7": {
1793
+ "r": 1,
1794
+ "g": 0.9490196108818054,
1795
+ "b": 0.8823529481887817,
1796
+ "a": 1
1797
+ },
1798
+ "1928:8": {
1799
+ "r": 0.25882354378700256,
1800
+ "g": 0.13725490868091583,
1801
+ "b": 0.03921568766236305,
1802
+ "a": 1
1803
+ }
1804
+ },
1805
+ "scopes": [
1806
+ "ALL_SCOPES"
1807
+ ],
1808
+ "codeSyntax": {}
1809
+ },
1810
+ "VariableID:54897:41778": {
1811
+ "name": "banner/pink",
1812
+ "id": "VariableID:54897:41778",
1813
+ "remote": false,
1814
+ "key": "04118a56e71ec0771842a975f80b1704daf0d087",
1815
+ "variableCollectionId": "VariableCollectionId:1:3",
1816
+ "resolvedType": "COLOR",
1817
+ "description": "",
1818
+ "hiddenFromPublishing": false,
1819
+ "valuesByMode": {
1820
+ "1928:7": {
1821
+ "r": 1,
1822
+ "g": 0.9215686321258545,
1823
+ "b": 0.9450980424880981,
1824
+ "a": 1
1825
+ },
1826
+ "1928:8": {
1827
+ "r": 0.23137255012989044,
1828
+ "g": 0.09019608050584793,
1829
+ "b": 0.1725490242242813,
1830
+ "a": 1
1831
+ }
1832
+ },
1833
+ "scopes": [
1834
+ "ALL_SCOPES"
1835
+ ],
1836
+ "codeSyntax": {}
1837
+ },
1838
+ "VariableID:54897:41777": {
1839
+ "name": "banner/purple",
1840
+ "id": "VariableID:54897:41777",
1841
+ "remote": false,
1842
+ "key": "2b4f397b4df3df91aae0020b486d03e7e59de3a1",
1843
+ "variableCollectionId": "VariableCollectionId:1:3",
1844
+ "resolvedType": "COLOR",
1845
+ "description": "",
1846
+ "hiddenFromPublishing": false,
1847
+ "valuesByMode": {
1848
+ "1928:7": {
1849
+ "r": 0.9607843160629272,
1850
+ "g": 0.9254902005195618,
1851
+ "b": 1,
1852
+ "a": 1
1853
+ },
1854
+ "1928:8": {
1855
+ "r": 0.18039216101169586,
1856
+ "g": 0.11764705926179886,
1857
+ "b": 0.2705882489681244,
1858
+ "a": 1
1859
+ }
1860
+ },
1861
+ "scopes": [
1862
+ "ALL_SCOPES"
1863
+ ],
1864
+ "codeSyntax": {}
1865
+ },
1866
+ "VariableID:54897:41770": {
1867
+ "name": "banner/red",
1868
+ "id": "VariableID:54897:41770",
1869
+ "remote": false,
1870
+ "key": "332c3632c7252e24d088ff6775a717f2f27514b7",
1871
+ "variableCollectionId": "VariableCollectionId:1:3",
1872
+ "resolvedType": "COLOR",
1873
+ "description": "",
1874
+ "hiddenFromPublishing": false,
1875
+ "valuesByMode": {
1876
+ "1928:7": {
1877
+ "r": 1,
1878
+ "g": 0.9254902005195618,
1879
+ "b": 0.9333333373069763,
1880
+ "a": 1
1881
+ },
1882
+ "1928:8": {
1883
+ "r": 0.22745098173618317,
1884
+ "g": 0.05882352963089943,
1885
+ "b": 0.08235294371843338,
1886
+ "a": 1
1887
+ }
1888
+ },
1889
+ "scopes": [
1890
+ "ALL_SCOPES"
1891
+ ],
1892
+ "codeSyntax": {}
1893
+ },
1894
+ "VariableID:54897:41775": {
1895
+ "name": "banner/teal",
1896
+ "id": "VariableID:54897:41775",
1897
+ "remote": false,
1898
+ "key": "44155474e492d3bf5a93f8d5b68324c052c279e6",
1899
+ "variableCollectionId": "VariableCollectionId:1:3",
1900
+ "resolvedType": "COLOR",
1901
+ "description": "",
1902
+ "hiddenFromPublishing": false,
1903
+ "valuesByMode": {
1904
+ "1928:7": {
1905
+ "r": 0.9019607901573181,
1906
+ "g": 0.9803921580314636,
1907
+ "b": 0.9647058844566345,
1908
+ "a": 1
1909
+ },
1910
+ "1928:8": {
1911
+ "r": 0.0784313753247261,
1912
+ "g": 0.21176470816135406,
1913
+ "b": 0.20000000298023224,
1914
+ "a": 1
1915
+ }
1916
+ },
1917
+ "scopes": [
1918
+ "ALL_SCOPES"
1919
+ ],
1920
+ "codeSyntax": {}
1921
+ },
1922
+ "VariableID:54897:41779": {
1923
+ "name": "banner/warm-gray",
1924
+ "id": "VariableID:54897:41779",
1925
+ "remote": false,
1926
+ "key": "795d9d04de8ba3479af2ff06e3359e7a8648caa3",
1927
+ "variableCollectionId": "VariableCollectionId:1:3",
1928
+ "resolvedType": "COLOR",
1929
+ "description": "",
1930
+ "hiddenFromPublishing": false,
1931
+ "valuesByMode": {
1932
+ "1928:7": {
1933
+ "r": 0.9490196108818054,
1934
+ "g": 0.9411764740943909,
1935
+ "b": 0.9333333373069763,
1936
+ "a": 1
1937
+ },
1938
+ "1928:8": {
1939
+ "r": 0.18431372940540314,
1940
+ "g": 0.16862745583057404,
1941
+ "b": 0.15294118225574493,
1942
+ "a": 1
1943
+ }
1944
+ },
1945
+ "scopes": [
1946
+ "ALL_SCOPES"
1947
+ ],
1948
+ "codeSyntax": {}
1949
+ },
1950
+ "VariableID:54897:41772": {
1951
+ "name": "banner/yellow",
1952
+ "id": "VariableID:54897:41772",
1953
+ "remote": false,
1954
+ "key": "dc09473d4db3cb127f45ee30f88ecb682d25d723",
1955
+ "variableCollectionId": "VariableCollectionId:1:3",
1956
+ "resolvedType": "COLOR",
1957
+ "description": "",
1958
+ "hiddenFromPublishing": false,
1959
+ "valuesByMode": {
1960
+ "1928:7": {
1961
+ "r": 1,
1962
+ "g": 0.9803921580314636,
1963
+ "b": 0.8823529481887817,
1964
+ "a": 1
1965
+ },
1966
+ "1928:8": {
1967
+ "r": 0.24313725531101227,
1968
+ "g": 0.16862745583057404,
1969
+ "b": 0,
1970
+ "a": 1
1971
+ }
1972
+ },
1973
+ "scopes": [
1974
+ "ALL_SCOPES"
1975
+ ],
1976
+ "codeSyntax": {}
1977
+ },
1481
1978
  "VariableID:1:151": {
1482
1979
  "name": "bg/brand-solid",
1483
1980
  "id": "VariableID:1:151",
@@ -8032,26 +8529,6 @@ const FIGMA_VARIABLES = {
8032
8529
  }
8033
8530
  };
8034
8531
 
8035
- const templateBannerDetach = {
8036
- "name": "templateBannerDetach",
8037
- "key": "b9670e4d68d2b1057f28916728a845dc9c160c0f",
8038
- "componentPropertyDefinitions": {
8039
- "Layout": {
8040
- "type": "VARIANT",
8041
- "variantOptions": [
8042
- "Title + Description",
8043
- "Description + Title"
8044
- ]
8045
- },
8046
- "Rounded": {
8047
- "type": "VARIANT",
8048
- "variantOptions": [
8049
- "True",
8050
- "False"
8051
- ]
8052
- }
8053
- }
8054
- };
8055
8532
  const templateButtonGroup = {
8056
8533
  "name": "templateButtonGroup",
8057
8534
  "key": "29109a34197f2eb5d390b1d9ebba270979a7b302",
@@ -8136,70 +8613,18 @@ const templateCustomPickerField = {
8136
8613
  }
8137
8614
  }
8138
8615
  };
8139
- const templateResultSection = {
8140
- "name": "templateResultSection",
8141
- "key": "fabd52c41c63d921e37e0a1de373e4df2b496f30",
8616
+ const templateDisclaimer = {
8617
+ "name": "templateDisclaimer",
8618
+ "key": "e08d2594b76c6c0107e34c0071cab8ef844c8998",
8142
8619
  "componentPropertyDefinitions": {
8143
- "Title#16237:0": {
8144
- "type": "TEXT"
8145
- },
8146
- "Description#16237:5": {
8147
- "type": "TEXT"
8148
- },
8149
- "Asset Type#45154:9": {
8150
- "type": "INSTANCE_SWAP",
8151
- "preferredValues": [
8152
- {
8153
- "type": "COMPONENT",
8154
- "key": "3f2ed06bd34fbaf24d371cefa973e09e2c2572bf"
8155
- },
8156
- {
8157
- "type": "COMPONENT",
8158
- "key": "bf1ad3ad5c45a2e94fd800f7f6ecbe52ba0667ab"
8159
- },
8160
- {
8161
- "type": "COMPONENT",
8162
- "key": "d357dcf0fbff80f3bfa70fe4fd5d48a9bddd1b49"
8163
- },
8164
- {
8165
- "type": "COMPONENT",
8166
- "key": "a53df434b562c1eeb04dab9abd88431989c5fc33"
8167
- },
8168
- {
8169
- "type": "COMPONENT",
8170
- "key": "5e53811a1e1444deccb5147b6a57196a3be467c9"
8171
- },
8172
- {
8173
- "type": "COMPONENT",
8174
- "key": "3ff3999d2d2bbed2c7656210793d4f083901f73b"
8175
- },
8176
- {
8177
- "type": "COMPONENT",
8178
- "key": "56fcf964b7784ca83eaf6c9b1531de6150d23a0d"
8179
- },
8180
- {
8181
- "type": "COMPONENT",
8182
- "key": "5652618ddd66c844ab977d083d0dc41cb98f98ae"
8183
- }
8184
- ]
8185
- },
8186
- "Show Asset#45154:14": {
8187
- "type": "BOOLEAN"
8188
- },
8189
- "Show Buttons#53435:0": {
8190
- "type": "BOOLEAN"
8191
- },
8192
- "ㄴShow First Button#53766:0": {
8193
- "type": "BOOLEAN"
8194
- },
8195
- "ㄴShow Second Button#53766:3": {
8620
+ "Show Title#54910:2": {
8196
8621
  "type": "BOOLEAN"
8197
8622
  },
8198
8623
  "Size": {
8199
8624
  "type": "VARIANT",
8200
8625
  "variantOptions": [
8201
- "Large",
8202
- "Medium"
8626
+ "t4(14pt)",
8627
+ "t5(16pt)"
8203
8628
  ]
8204
8629
  }
8205
8630
  }
@@ -9215,17 +9640,16 @@ const menuSheet = {
9215
9640
  "Menu Group Count": {
9216
9641
  "type": "VARIANT",
9217
9642
  "variantOptions": [
9643
+ "1",
9218
9644
  "2",
9219
- "3",
9220
- "1"
9645
+ "3"
9221
9646
  ]
9222
9647
  },
9223
9648
  "Layout": {
9224
9649
  "type": "VARIANT",
9225
9650
  "variantOptions": [
9226
9651
  "Text Only",
9227
- "Text with Icon",
9228
- "Text with Subtext"
9652
+ "Text with Icon"
9229
9653
  ]
9230
9654
  }
9231
9655
  }
@@ -9248,10 +9672,10 @@ const pageBanner = {
9248
9672
  "type": "VARIANT",
9249
9673
  "variantOptions": [
9250
9674
  "Display",
9675
+ "Display (With Action)",
9251
9676
  "Actionable",
9252
9677
  "Dismissible",
9253
- "With Action",
9254
- "Custom"
9678
+ "Actionable (Custom)"
9255
9679
  ]
9256
9680
  },
9257
9681
  "Tone": {
@@ -9358,8 +9782,8 @@ const radio = {
9358
9782
  }
9359
9783
  }
9360
9784
  };
9361
- const radioMark = {
9362
- "name": "radioMark",
9785
+ const radiomark = {
9786
+ "name": "radiomark",
9363
9787
  "key": "832d696d6e9566610968cd70f128f500ec009d6a",
9364
9788
  "componentPropertyDefinitions": {
9365
9789
  "Size": {
@@ -9471,6 +9895,74 @@ const resizableChild = {
9471
9895
  }
9472
9896
  }
9473
9897
  };
9898
+ const resultSection = {
9899
+ "name": "resultSection",
9900
+ "key": "fabd52c41c63d921e37e0a1de373e4df2b496f30",
9901
+ "componentPropertyDefinitions": {
9902
+ "Title#16237:0": {
9903
+ "type": "TEXT"
9904
+ },
9905
+ "Description#16237:5": {
9906
+ "type": "TEXT"
9907
+ },
9908
+ "Asset Type#45154:9": {
9909
+ "type": "INSTANCE_SWAP",
9910
+ "preferredValues": [
9911
+ {
9912
+ "type": "COMPONENT",
9913
+ "key": "3f2ed06bd34fbaf24d371cefa973e09e2c2572bf"
9914
+ },
9915
+ {
9916
+ "type": "COMPONENT",
9917
+ "key": "bf1ad3ad5c45a2e94fd800f7f6ecbe52ba0667ab"
9918
+ },
9919
+ {
9920
+ "type": "COMPONENT",
9921
+ "key": "d357dcf0fbff80f3bfa70fe4fd5d48a9bddd1b49"
9922
+ },
9923
+ {
9924
+ "type": "COMPONENT",
9925
+ "key": "a53df434b562c1eeb04dab9abd88431989c5fc33"
9926
+ },
9927
+ {
9928
+ "type": "COMPONENT",
9929
+ "key": "5e53811a1e1444deccb5147b6a57196a3be467c9"
9930
+ },
9931
+ {
9932
+ "type": "COMPONENT",
9933
+ "key": "3ff3999d2d2bbed2c7656210793d4f083901f73b"
9934
+ },
9935
+ {
9936
+ "type": "COMPONENT",
9937
+ "key": "56fcf964b7784ca83eaf6c9b1531de6150d23a0d"
9938
+ },
9939
+ {
9940
+ "type": "COMPONENT",
9941
+ "key": "5652618ddd66c844ab977d083d0dc41cb98f98ae"
9942
+ }
9943
+ ]
9944
+ },
9945
+ "Show Asset#45154:14": {
9946
+ "type": "BOOLEAN"
9947
+ },
9948
+ "Show Buttons#53435:0": {
9949
+ "type": "BOOLEAN"
9950
+ },
9951
+ "ㄴShow First Button#53766:0": {
9952
+ "type": "BOOLEAN"
9953
+ },
9954
+ "ㄴShow Second Button#53766:3": {
9955
+ "type": "BOOLEAN"
9956
+ },
9957
+ "Size": {
9958
+ "type": "VARIANT",
9959
+ "variantOptions": [
9960
+ "Large",
9961
+ "Medium"
9962
+ ]
9963
+ }
9964
+ }
9965
+ };
9474
9966
  const rootTopNavigationGlobal = {
9475
9967
  "name": "rootTopNavigationGlobal",
9476
9968
  "key": "a694a1da14a5c1d7d5c66bc78218c0c61fb388ab",
@@ -9703,8 +10195,8 @@ const _switch = {
9703
10195
  }
9704
10196
  }
9705
10197
  };
9706
- const switchMark = {
9707
- "name": "switchMark",
10198
+ const switchmark = {
10199
+ "name": "switchmark",
9708
10200
  "key": "bc53f269089e02a1d241e2a21ac7631bfa49834e",
9709
10201
  "componentPropertyDefinitions": {
9710
10202
  "Size": {
@@ -9971,10 +10463,11 @@ var FIGMA_COMPONENTS = {
9971
10463
  pageBanner: pageBanner,
9972
10464
  progressCircle: progressCircle,
9973
10465
  radio: radio,
9974
- radioMark: radioMark,
10466
+ radiomark: radiomark,
9975
10467
  reactionButton: reactionButton,
9976
10468
  resizableChild: resizableChild,
9977
10469
  resizableIcon: resizableIcon,
10470
+ resultSection: resultSection,
9978
10471
  rootTopNavigationGlobal: rootTopNavigationGlobal,
9979
10472
  rootTopNavigationKr: rootTopNavigationKr,
9980
10473
  segmentedControl: segmentedControl,
@@ -9983,14 +10476,13 @@ var FIGMA_COMPONENTS = {
9983
10476
  slider: slider,
9984
10477
  snackbar: snackbar,
9985
10478
  superscriptChild: superscriptChild,
9986
- switchMark: switchMark,
10479
+ switchmark: switchmark,
9987
10480
  tabs: tabs,
9988
10481
  tagGroup: tagGroup,
9989
- templateBannerDetach: templateBannerDetach,
9990
10482
  templateButtonGroup: templateButtonGroup,
9991
10483
  templateChipGroup: templateChipGroup,
9992
10484
  templateCustomPickerField: templateCustomPickerField,
9993
- templateResultSection: templateResultSection,
10485
+ templateDisclaimer: templateDisclaimer,
9994
10486
  templateSelectBoxGroup: templateSelectBoxGroup,
9995
10487
  templateSliderField: templateSliderField,
9996
10488
  templateTextField: templateTextField,
@@ -10214,7 +10706,8 @@ function createFrameTransformer({ propsConverters }) {
10214
10706
  ...propsConverters.containerLayout(node),
10215
10707
  ...propsConverters.selfLayout(node),
10216
10708
  ...propsConverters.frameFill(node),
10217
- ...propsConverters.stroke(node)
10709
+ ...propsConverters.stroke(node),
10710
+ ...propsConverters.shadow(node)
10218
10711
  };
10219
10712
  return createElement("Frame", props, children.map((child)=>traverse(child)));
10220
10713
  });
@@ -10245,6 +10738,7 @@ function createContainerLayoutPropsConverter(valueResolver) {
10245
10738
  counterAxisAlignItems: ({ counterAxisAlignItems })=>counterAxisAlignItems,
10246
10739
  layoutWrap: ({ layoutWrap })=>layoutWrap,
10247
10740
  itemSpacing: (node)=>valueResolver.getFormattedValue.itemSpacing(node),
10741
+ counterAxisSpacing: (node)=>valueResolver.getFormattedValue.counterAxisSpacing(node),
10248
10742
  paddingTop: (node)=>valueResolver.getFormattedValue.paddingTop(node),
10249
10743
  paddingBottom: (node)=>valueResolver.getFormattedValue.paddingBottom(node),
10250
10744
  paddingLeft: (node)=>valueResolver.getFormattedValue.paddingLeft(node),
@@ -10357,6 +10851,20 @@ function createTypeStylePropsConverter(valueResolver) {
10357
10851
  };
10358
10852
  });
10359
10853
  }
10854
+ function createShadowPropsConverter(valueResolver) {
10855
+ return definePropsConverter((node)=>{
10856
+ const effectStyleName = valueResolver.getEffectStyleValue(node);
10857
+ if (effectStyleName) {
10858
+ return {
10859
+ boxShadowStyle: effectStyleName
10860
+ };
10861
+ }
10862
+ const boxShadow = valueResolver.getFormattedValue.boxShadow(node);
10863
+ return {
10864
+ boxShadow
10865
+ };
10866
+ });
10867
+ }
10360
10868
 
10361
10869
  function createRectangleTransformer({ propsConverters }) {
10362
10870
  return defineElementTransformer((node)=>{
@@ -10371,7 +10879,8 @@ function createVectorTransformer({ propsConverters }) {
10371
10879
  ...propsConverters.selfLayout(node),
10372
10880
  ...propsConverters.radius(node),
10373
10881
  ...propsConverters.stroke(node),
10374
- ...propsConverters.shapeFill(node)
10882
+ ...propsConverters.shapeFill(node),
10883
+ ...propsConverters.shadow(node)
10375
10884
  }, [], {
10376
10885
  comment: "Vector Node Placeholder"
10377
10886
  });
@@ -10412,6 +10921,7 @@ function toCssRgba(color) {
10412
10921
 
10413
10922
  const defaultVariableNameFormatter = ({ slug })=>slug.filter((s)=>s !== "dimension").map((s)=>s.replaceAll(",", "_")).join("/");
10414
10923
  const defaultTextStyleNameFormatter = ({ slug })=>slug[slug.length - 1];
10924
+ const defaultEffectStyleNameFormatter = ({ slug })=>slug[slug.length - 1];
10415
10925
  const defaultFillStyleResolver = ({ slug })=>{
10416
10926
  const [, ...rest] = slug;
10417
10927
  if (rest.includes("fade")) {
@@ -10437,11 +10947,19 @@ const defaultFillStyleResolver = ({ slug })=>{
10437
10947
  })
10438
10948
  };
10439
10949
  };
10950
+ function formatBoxShadow(value) {
10951
+ const { type, color, offset, radius, spread } = value;
10952
+ const inset = type === "INNER_SHADOW" ? "inset " : "";
10953
+ const colorStr = toCssRgba(color);
10954
+ const spreadStr = spread !== undefined ? ` ${spread}px` : "";
10955
+ return `${inset}${offset.x}px ${offset.y}px ${radius}px${spreadStr} ${colorStr}`;
10956
+ }
10440
10957
  const defaultRawValueFormatters = {
10441
10958
  color: (value)=>toCssRgba(value),
10442
10959
  dimension: (value)=>value,
10443
10960
  fontDimension: (value)=>value,
10444
- fontWeight: (value)=>value
10961
+ fontWeight: (value)=>value,
10962
+ boxShadow: formatBoxShadow
10445
10963
  };
10446
10964
 
10447
10965
  function createPipeline(options = {}) {
@@ -10451,6 +10969,7 @@ function createPipeline(options = {}) {
10451
10969
  variableNameFormatter: defaultVariableNameFormatter,
10452
10970
  styleService,
10453
10971
  textStyleNameFormatter: defaultTextStyleNameFormatter,
10972
+ effectStyleNameFormatter: defaultEffectStyleNameFormatter,
10454
10973
  fillStyleResolver: defaultFillStyleResolver,
10455
10974
  rawValueFormatters: defaultRawValueFormatters,
10456
10975
  shouldInferVariableName
@@ -10462,6 +10981,7 @@ function createPipeline(options = {}) {
10462
10981
  const textFillPropsConverter = createTextFillPropsConverter(valueResolver);
10463
10982
  const radiusPropsConverter = createRadiusPropsConverter(valueResolver);
10464
10983
  const strokePropsConverter = createStrokePropsConverter(valueResolver);
10984
+ const shadowPropsConverter = createShadowPropsConverter(valueResolver);
10465
10985
  const typeStylePropsConverter = createTypeStylePropsConverter(valueResolver);
10466
10986
  const propsConverters = {
10467
10987
  containerLayout: containerLayoutPropsConverter,
@@ -10471,6 +10991,7 @@ function createPipeline(options = {}) {
10471
10991
  textFill: textFillPropsConverter,
10472
10992
  radius: radiusPropsConverter,
10473
10993
  stroke: strokePropsConverter,
10994
+ shadow: shadowPropsConverter,
10474
10995
  typeStyle: typeStylePropsConverter
10475
10996
  };
10476
10997
  const frameTransformer = createFrameTransformer({
@@ -10515,6 +11036,7 @@ var index = {
10515
11036
  createRadiusPropsConverter: createRadiusPropsConverter,
10516
11037
  createRectangleTransformer: createRectangleTransformer,
10517
11038
  createSelfLayoutPropsConverter: createSelfLayoutPropsConverter,
11039
+ createShadowPropsConverter: createShadowPropsConverter,
10518
11040
  createShapeFillPropsConverter: createShapeFillPropsConverter,
10519
11041
  createStrokePropsConverter: createStrokePropsConverter,
10520
11042
  createTextFillPropsConverter: createTextFillPropsConverter,