magnaui 0.1.0

package/dist/design/figma-styles.js

@@ -0,0 +1,2106 @@
+const data = {
+  "fileKey": "DQ3CcRctS7j05iRwaXC4OZ",
+  "texts": [
+    {
+      "name": "Landing Title/H1 Title",
+      "size": 56,
+      "height": {
+        "unit": "PIXELS",
+        "value": 64
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -1
+      },
+      "weight": 550
+    },
+    {
+      "name": "Landing Title/H2 Title",
+      "size": 48,
+      "height": {
+        "unit": "PIXELS",
+        "value": 56
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -1
+      },
+      "weight": 550
+    },
+    {
+      "name": "Landing Title/H3 Title",
+      "size": 40,
+      "height": {
+        "unit": "PIXELS",
+        "value": 48
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -1
+      },
+      "weight": 550
+    },
+    {
+      "name": "Landing Title/H4 Title",
+      "size": 32,
+      "height": {
+        "unit": "PIXELS",
+        "value": 40
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -0.5
+      },
+      "weight": 550
+    },
+    {
+      "name": "Landing Title/H5 Title",
+      "size": 24,
+      "height": {
+        "unit": "PIXELS",
+        "value": 32
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -0.5
+      },
+      "weight": 550
+    },
+    {
+      "name": "Landing Title/H6 Title",
+      "size": 20,
+      "height": {
+        "unit": "PIXELS",
+        "value": 28
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -0.6000000238418579
+      },
+      "weight": 550
+    },
+    {
+      "name": "Title/H1 Title",
+      "size": 56,
+      "height": {
+        "unit": "PIXELS",
+        "value": 64
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -1
+      },
+      "weight": 500
+    },
+    {
+      "name": "Title/H2 Title",
+      "size": 48,
+      "height": {
+        "unit": "PIXELS",
+        "value": 56
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -1
+      },
+      "weight": 500
+    },
+    {
+      "name": "Title/H3 Title",
+      "size": 40,
+      "height": {
+        "unit": "PIXELS",
+        "value": 48
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -1
+      },
+      "weight": 500
+    },
+    {
+      "name": "Title/H4 Title",
+      "size": 32,
+      "height": {
+        "unit": "PIXELS",
+        "value": 40
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -0.5
+      },
+      "weight": 500
+    },
+    {
+      "name": "Title/H5 Title",
+      "size": 24,
+      "height": {
+        "unit": "PIXELS",
+        "value": 32
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "weight": 500
+    },
+    {
+      "name": "Title/H6 Title",
+      "size": 20,
+      "height": {
+        "unit": "PIXELS",
+        "value": 28
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "weight": 500
+    },
+    {
+      "name": "Label/X Large",
+      "size": 24,
+      "height": {
+        "unit": "PIXELS",
+        "value": 32
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -1.5
+      },
+      "weight": 500
+    },
+    {
+      "name": "Label/Large",
+      "size": 18,
+      "height": {
+        "unit": "PIXELS",
+        "value": 24
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -1.5
+      },
+      "weight": 500
+    },
+    {
+      "name": "Label/Medium",
+      "size": 16,
+      "height": {
+        "unit": "PIXELS",
+        "value": 24
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -1.100000023841858
+      },
+      "weight": 500
+    },
+    {
+      "name": "Label/Small",
+      "size": 14,
+      "height": {
+        "unit": "PIXELS",
+        "value": 20
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -0.6000000238418579
+      },
+      "weight": 500
+    },
+    {
+      "name": "Label/Compact",
+      "size": 13,
+      "height": {
+        "unit": "PIXELS",
+        "value": 20
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -0.6000000238418579
+      },
+      "weight": 500
+    },
+    {
+      "name": "Label/X Small",
+      "size": 12,
+      "height": {
+        "unit": "PIXELS",
+        "value": 16
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "weight": 500
+    },
+    {
+      "name": "Paragraph/X Large",
+      "size": 24,
+      "height": {
+        "unit": "PIXELS",
+        "value": 32
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -1.5
+      },
+      "weight": 400
+    },
+    {
+      "name": "Paragraph/Large",
+      "size": 18,
+      "height": {
+        "unit": "PIXELS",
+        "value": 24
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -1.5
+      },
+      "weight": 400
+    },
+    {
+      "name": "Paragraph/Medium",
+      "size": 16,
+      "height": {
+        "unit": "PIXELS",
+        "value": 24
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -1.100000023841858
+      },
+      "weight": 400
+    },
+    {
+      "name": "Paragraph/Small",
+      "size": 14,
+      "height": {
+        "unit": "PIXELS",
+        "value": 20
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -0.6000000238418579
+      },
+      "weight": 400
+    },
+    {
+      "name": "Paragraph/Compact",
+      "size": 13,
+      "height": {
+        "unit": "PIXELS",
+        "value": 20
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -0.6000000238418579
+      },
+      "weight": 400
+    },
+    {
+      "name": "Paragraph/X Small",
+      "size": 12,
+      "height": {
+        "unit": "PIXELS",
+        "value": 16
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "weight": 400
+    },
+    {
+      "name": "Subheading/Medium",
+      "size": 16,
+      "height": {
+        "unit": "PIXELS",
+        "value": 24
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": 6
+      },
+      "weight": 500
+    },
+    {
+      "name": "Subheading/Small",
+      "size": 14,
+      "height": {
+        "unit": "PIXELS",
+        "value": 20
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": 6
+      },
+      "weight": 500
+    },
+    {
+      "name": "Subheading/X Small",
+      "size": 12,
+      "height": {
+        "unit": "PIXELS",
+        "value": 16
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": 4
+      },
+      "weight": 500
+    },
+    {
+      "name": "Subheading/2X Small",
+      "size": 11,
+      "height": {
+        "unit": "PIXELS",
+        "value": 12
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": 2
+      },
+      "weight": 500
+    },
+    {
+      "name": "Subheading/2X Small S",
+      "size": 11,
+      "height": {
+        "unit": "PIXELS",
+        "value": 16
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": 2
+      },
+      "weight": 500
+    },
+    {
+      "name": "DM Mono/Medium",
+      "size": 16,
+      "height": {
+        "unit": "PIXELS",
+        "value": 24
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "weight": 500
+    },
+    {
+      "name": "DM Mono/Small",
+      "size": 14,
+      "height": {
+        "unit": "PIXELS",
+        "value": 20
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "weight": 500
+    },
+    {
+      "name": "DM Mono/X-Small",
+      "size": 12,
+      "height": {
+        "unit": "PIXELS",
+        "value": 16
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "weight": 500
+    },
+    {
+      "name": "DM Mono/2X-Small",
+      "size": 10,
+      "height": {
+        "unit": "PIXELS",
+        "value": 16
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "weight": 500
+    },
+    {
+      "name": "Docs/Label",
+      "size": 18,
+      "height": {
+        "unit": "PIXELS",
+        "value": 32
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -1.5
+      },
+      "weight": 500
+    },
+    {
+      "name": "Docs/Paragraph",
+      "size": 18,
+      "height": {
+        "unit": "PIXELS",
+        "value": 32
+      },
+      "tracking": {
+        "unit": "PERCENT",
+        "value": -1.5
+      },
+      "weight": 400
+    }
+  ],
+  "effects": [
+    {
+      "name": "regular-shadow/x-small",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 2,
+          "spread": 0,
+          "color": [
+            10,
+            13,
+            20,
+            0.03
+          ]
+        }
+      ]
+    },
+    {
+      "name": "regular-shadow/medium",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 16,
+          "blur": 32,
+          "spread": -12,
+          "color": [
+            14,
+            18,
+            27,
+            0.1
+          ]
+        }
+      ]
+    },
+    {
+      "name": "card-shadow/large",
+      "layers": [
+        {
+          "inset": true,
+          "x": 0,
+          "y": -1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            23,
+            23,
+            23,
+            0.06
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            23,
+            23,
+            23,
+            0.08
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 3,
+          "blur": 3,
+          "spread": -1.5,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 6,
+          "blur": 6,
+          "spread": -3,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 10,
+          "blur": 10,
+          "spread": -5,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 20,
+          "blur": 20,
+          "spread": -10,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        }
+      ]
+    },
+    {
+      "name": "custom-shadows/large",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 96,
+          "blur": 96,
+          "spread": -32,
+          "color": [
+            51,
+            51,
+            51,
+            0.06
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 48,
+          "blur": 48,
+          "spread": -24,
+          "color": [
+            51,
+            51,
+            51,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 24,
+          "blur": 24,
+          "spread": -12,
+          "color": [
+            51,
+            51,
+            51,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 12,
+          "blur": 12,
+          "spread": -6,
+          "color": [
+            51,
+            51,
+            51,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 6,
+          "blur": 6,
+          "spread": -3,
+          "color": [
+            51,
+            51,
+            51,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 3,
+          "blur": 3,
+          "spread": -1.5,
+          "color": [
+            51,
+            51,
+            51,
+            0.02
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 1,
+          "spread": 0.5,
+          "color": [
+            51,
+            51,
+            51,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            51,
+            51,
+            51,
+            0.04
+          ]
+        },
+        {
+          "inset": true,
+          "x": 0,
+          "y": -1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            51,
+            51,
+            51,
+            0.06
+          ]
+        }
+      ]
+    },
+    {
+      "name": "custom-shadows/medium",
+      "layers": [
+        {
+          "inset": true,
+          "x": 0,
+          "y": -1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            51,
+            51,
+            51,
+            0.06
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            245,
+            245,
+            245,
+            1
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 48,
+          "blur": 48,
+          "spread": -24,
+          "color": [
+            51,
+            51,
+            51,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 24,
+          "blur": 24,
+          "spread": -12,
+          "color": [
+            51,
+            51,
+            51,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 12,
+          "blur": 12,
+          "spread": -6,
+          "color": [
+            51,
+            51,
+            51,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 6,
+          "blur": 6,
+          "spread": -3,
+          "color": [
+            51,
+            51,
+            51,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 3,
+          "blur": 3,
+          "spread": -1.5,
+          "color": [
+            51,
+            51,
+            51,
+            0.02
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 1,
+          "spread": 0.5,
+          "color": [
+            51,
+            51,
+            51,
+            0.04
+          ]
+        }
+      ]
+    },
+    {
+      "name": "custom-shadows/x-small",
+      "layers": [
+        {
+          "inset": true,
+          "x": 0,
+          "y": -1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            51,
+            51,
+            51,
+            0.06
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            245,
+            245,
+            245,
+            1
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 2,
+          "spread": 0,
+          "color": [
+            51,
+            51,
+            51,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 2,
+          "blur": 4,
+          "spread": 0,
+          "color": [
+            51,
+            51,
+            51,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 4,
+          "blur": 8,
+          "spread": -2,
+          "color": [
+            51,
+            51,
+            51,
+            0.06
+          ]
+        }
+      ]
+    },
+    {
+      "name": "custom-shadows/small",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 3,
+          "spread": -1.5,
+          "color": [
+            51,
+            51,
+            51,
+            0.16
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 5,
+          "blur": 5,
+          "spread": -2.5,
+          "color": [
+            51,
+            51,
+            51,
+            0.08
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 12,
+          "blur": 6,
+          "spread": -6,
+          "color": [
+            51,
+            51,
+            51,
+            0.02
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 16,
+          "blur": 8,
+          "spread": -8,
+          "color": [
+            51,
+            51,
+            51,
+            0.01
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            51,
+            51,
+            51,
+            0.04
+          ]
+        },
+        {
+          "inset": true,
+          "x": 0,
+          "y": -0.5,
+          "blur": 0.5,
+          "spread": 0,
+          "color": [
+            51,
+            51,
+            51,
+            0.08
+          ]
+        }
+      ]
+    },
+    {
+      "name": "colored-shadows/gray",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 3,
+          "blur": 3,
+          "spread": -1.5,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 6,
+          "blur": 6,
+          "spread": -3,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 10,
+          "blur": 10,
+          "spread": -5,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 20,
+          "blur": 20,
+          "spread": -10,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        }
+      ]
+    },
+    {
+      "name": "colored-shadows/blue",
+      "layers": [
+        {
+          "inset": true,
+          "x": 0,
+          "y": -1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            18,
+            35,
+            104,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            18,
+            35,
+            104,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            18,
+            35,
+            104,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 3,
+          "blur": 3,
+          "spread": -1.5,
+          "color": [
+            18,
+            35,
+            104,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 6,
+          "blur": 6,
+          "spread": -3,
+          "color": [
+            18,
+            35,
+            104,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 10,
+          "blur": 10,
+          "spread": -5,
+          "color": [
+            18,
+            35,
+            104,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 20,
+          "blur": 20,
+          "spread": -10,
+          "color": [
+            18,
+            35,
+            104,
+            0.06
+          ]
+        }
+      ]
+    },
+    {
+      "name": "colored-shadows/purple",
+      "layers": [
+        {
+          "inset": true,
+          "x": 0,
+          "y": -1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            53,
+            26,
+            117,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            53,
+            26,
+            117,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            53,
+            26,
+            117,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 3,
+          "blur": 3,
+          "spread": -1.5,
+          "color": [
+            53,
+            26,
+            117,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 6,
+          "blur": 6,
+          "spread": -3,
+          "color": [
+            53,
+            26,
+            117,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 10,
+          "blur": 10,
+          "spread": -5,
+          "color": [
+            53,
+            26,
+            117,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 20,
+          "blur": 20,
+          "spread": -10,
+          "color": [
+            53,
+            26,
+            117,
+            0.04
+          ]
+        }
+      ]
+    },
+    {
+      "name": "colored-shadows/orange",
+      "layers": [
+        {
+          "inset": true,
+          "x": 0,
+          "y": -1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            113,
+            51,
+            10,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            113,
+            51,
+            10,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            113,
+            51,
+            10,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 3,
+          "blur": 3,
+          "spread": -1.5,
+          "color": [
+            113,
+            51,
+            10,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 6,
+          "blur": 6,
+          "spread": -3,
+          "color": [
+            113,
+            51,
+            10,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 10,
+          "blur": 10,
+          "spread": -5,
+          "color": [
+            113,
+            51,
+            10,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 20,
+          "blur": 20,
+          "spread": -10,
+          "color": [
+            113,
+            51,
+            10,
+            0.04
+          ]
+        }
+      ]
+    },
+    {
+      "name": "colored-shadows/green",
+      "layers": [
+        {
+          "inset": true,
+          "x": 0,
+          "y": -1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            11,
+            70,
+            39,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            11,
+            70,
+            39,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            11,
+            70,
+            39,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 3,
+          "blur": 3,
+          "spread": -1.5,
+          "color": [
+            11,
+            70,
+            39,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 6,
+          "blur": 6,
+          "spread": -3,
+          "color": [
+            11,
+            70,
+            39,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 10,
+          "blur": 10,
+          "spread": -5,
+          "color": [
+            11,
+            70,
+            39,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 20,
+          "blur": 20,
+          "spread": -10,
+          "color": [
+            11,
+            70,
+            39,
+            0.04
+          ]
+        }
+      ]
+    },
+    {
+      "name": "colored-shadows/primary",
+      "layers": [
+        {
+          "inset": true,
+          "x": 0,
+          "y": -1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            18,
+            35,
+            104,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            18,
+            35,
+            104,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            18,
+            35,
+            104,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 3,
+          "blur": 3,
+          "spread": -1.5,
+          "color": [
+            18,
+            35,
+            104,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 6,
+          "blur": 6,
+          "spread": -3,
+          "color": [
+            18,
+            35,
+            104,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 10,
+          "blur": 10,
+          "spread": -5,
+          "color": [
+            18,
+            35,
+            104,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 20,
+          "blur": 20,
+          "spread": -10,
+          "color": [
+            18,
+            35,
+            104,
+            0.04
+          ]
+        }
+      ]
+    },
+    {
+      "name": "components/tooltip",
+      "layers": [
+        {
+          "inset": true,
+          "x": 0,
+          "y": -1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            23,
+            23,
+            23,
+            0.06
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            235,
+            235,
+            235,
+            1
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 48,
+          "blur": 48,
+          "spread": -24,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 24,
+          "blur": 24,
+          "spread": -12,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 12,
+          "blur": 12,
+          "spread": -6,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 6,
+          "blur": 6,
+          "spread": -3,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 3,
+          "blur": 3,
+          "spread": -1.5,
+          "color": [
+            23,
+            23,
+            23,
+            0.02
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 1,
+          "spread": 0.5,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        }
+      ]
+    },
+    {
+      "name": "components/buttons/primary-focus",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 4,
+          "color": [
+            71,
+            108,
+            255,
+            0.1
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 2,
+          "color": [
+            255,
+            255,
+            255,
+            1
+          ]
+        }
+      ]
+    },
+    {
+      "name": "components/buttons/important-focus",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 4,
+          "color": [
+            153,
+            160,
+            174,
+            0.16
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 2,
+          "color": [
+            255,
+            255,
+            255,
+            1
+          ]
+        }
+      ]
+    },
+    {
+      "name": "components/buttons/error-focus",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 4,
+          "color": [
+            251,
+            55,
+            72,
+            0.1
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 2,
+          "color": [
+            255,
+            255,
+            255,
+            1
+          ]
+        }
+      ]
+    },
+    {
+      "name": "components/fancy-buttons/neutral",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            36,
+            38,
+            40,
+            1
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 2,
+          "spread": 0,
+          "color": [
+            27,
+            28,
+            29,
+            0.48
+          ]
+        }
+      ]
+    },
+    {
+      "name": "components/fancy-buttons/primary",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            51,
+            92,
+            255,
+            1
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 2,
+          "spread": 0,
+          "color": [
+            14,
+            18,
+            27,
+            0.24
+          ]
+        }
+      ]
+    },
+    {
+      "name": "components/fancy-buttons/error",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            251,
+            55,
+            72,
+            1
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 2,
+          "spread": 0,
+          "color": [
+            14,
+            18,
+            27,
+            0.24
+          ]
+        }
+      ]
+    },
+    {
+      "name": "components/fancy-buttons/stroke",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            235,
+            235,
+            235,
+            1
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 3,
+          "spread": 0,
+          "color": [
+            14,
+            18,
+            27,
+            0.12
+          ]
+        }
+      ]
+    },
+    {
+      "name": "components/toggle/switch",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 2,
+          "blur": 4,
+          "spread": 0,
+          "color": [
+            14,
+            18,
+            27,
+            0.03
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 6,
+          "blur": 10,
+          "spread": 0,
+          "color": [
+            14,
+            18,
+            27,
+            0.06
+          ]
+        }
+      ]
+    },
+    {
+      "name": "components/custom-button/Button",
+      "layers": [
+        {
+          "inset": true,
+          "x": 0,
+          "y": -1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            23,
+            23,
+            23,
+            0.08
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 3,
+          "blur": 3,
+          "spread": -1.5,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 6,
+          "blur": 6,
+          "spread": -3,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        }
+      ]
+    },
+    {
+      "name": "components/custom-button/Button (Hover)",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            23,
+            23,
+            23,
+            0.08
+          ]
+        }
+      ]
+    },
+    {
+      "name": "components/custom-input/Input (Default)",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            23,
+            23,
+            23,
+            0.08
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 3,
+          "blur": 3,
+          "spread": -1.5,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        }
+      ]
+    },
+    {
+      "name": "components/custom-input/Input (Hover)",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1,
+          "color": [
+            23,
+            23,
+            23,
+            0.08
+          ]
+        }
+      ]
+    },
+    {
+      "name": "components/custom-input/Input (Active)",
+      "layers": [
+        {
+          "inset": false,
+          "x": 0,
+          "y": 0,
+          "blur": 0,
+          "spread": 1.399999976158142,
+          "color": [
+            51,
+            92,
+            255,
+            1
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 1,
+          "blur": 1,
+          "spread": -0.5,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 3,
+          "blur": 3,
+          "spread": -1.5,
+          "color": [
+            23,
+            23,
+            23,
+            0.04
+          ]
+        },
+        {
+          "inset": false,
+          "x": 0,
+          "y": 6,
+          "blur": 6,
+          "spread": -3,
+          "color": [
+            23,
+            23,
+            23,
+            0.02
+          ]
+        }
+      ]
+    }
+  ]
+};
+export default data;