npm - @fragmentsx/figma-converter - Versions diffs - 0.0.1 - Mend

@fragmentsx/figma-converter 0.0.1

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 (63) hide show

package/package.json +31 -0
package/playground/index.html +12 -0
package/playground/node_modules/.bin/tsc +17 -0
package/playground/node_modules/.bin/tsserver +17 -0
package/playground/node_modules/.bin/vite +17 -0
package/playground/package.json +25 -0
package/playground/src/123.json +527 -0
package/playground/src/App.tsx +534 -0
package/playground/src/doc.json +4024 -0
package/playground/src/main.tsx +4 -0
package/playground/tsconfig.json +12 -0
package/playground/vite.config.ts +59 -0
package/src/__tests__/fixtures/simple-frame.json +70 -0
package/src/__tests__/fixtures/with-effects.json +19 -0
package/src/__tests__/fixtures/with-image.json +16 -0
package/src/__tests__/integration.test.ts +113 -0
package/src/__tests__/validation.test.ts +108 -0
package/src/converter.test.ts +206 -0
package/src/converter.ts +165 -0
package/src/diff/__tests__/buildBreakpointFrame.test.ts +43 -0
package/src/diff/__tests__/computeDelta.test.ts +33 -0
package/src/diff/__tests__/matchNodes.test.ts +52 -0
package/src/diff/buildBreakpointFrame.ts +99 -0
package/src/diff/computeDelta.ts +40 -0
package/src/diff/index.ts +3 -0
package/src/diff/matchNodes.ts +46 -0
package/src/images/__tests__/collectImages.test.ts +30 -0
package/src/images/collectImages.ts +29 -0
package/src/index.ts +16 -0
package/src/mappers/__tests__/borderRadius.test.ts +28 -0
package/src/mappers/__tests__/layout.test.ts +71 -0
package/src/mappers/__tests__/nodeMapper.test.ts +394 -0
package/src/mappers/__tests__/position.test.ts +67 -0
package/src/mappers/__tests__/size.test.ts +69 -0
package/src/mappers/borderRadius.ts +18 -0
package/src/mappers/index.ts +5 -0
package/src/mappers/layout.ts +58 -0
package/src/mappers/nodeMapper.ts +330 -0
package/src/mappers/position.ts +71 -0
package/src/mappers/size.ts +39 -0
package/src/styles/__tests__/border.test.ts +19 -0
package/src/styles/__tests__/effects.test.ts +60 -0
package/src/styles/__tests__/gradientFallback.test.ts +96 -0
package/src/styles/__tests__/paint.test.ts +126 -0
package/src/styles/border.ts +40 -0
package/src/styles/effects.ts +40 -0
package/src/styles/gradientFallback.ts +113 -0
package/src/styles/index.ts +3 -0
package/src/styles/paint.ts +164 -0
package/src/text/__tests__/textToHtml.test.ts +66 -0
package/src/text/textToHtml.ts +83 -0
package/src/types/figma.ts +127 -0
package/src/types/index.ts +2 -0
package/src/types/result.ts +115 -0
package/src/utils/__tests__/color.test.ts +15 -0
package/src/utils/__tests__/id.test.ts +20 -0
package/src/utils/color.ts +20 -0
package/src/utils/id.ts +9 -0
package/src/utils/index.ts +2 -0
package/src/validation.ts +94 -0
package/tsconfig.json +15 -0
package/vite.config.ts +26 -0
package/vitest.config.ts +14 -0

package/package.json ADDED Viewed

@@ -0,0 +1,31 @@
+{
+  "name": "@fragmentsx/figma-converter",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@fragmentsx/definition": "0.2.2",
+    "@fragmentsx/utils": "0.2.0"
+  },
+  "devDependencies": {
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^4.0.0",
+    "typescript": "^5.5.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "lint": "eslint src --fix"
+  }
+}

package/playground/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Converter Playground</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/playground/node_modules/.bin/tsc ADDED Viewed

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/fragments/fragments/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/typescript@5.8.3/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/fragments/fragments/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/typescript@5.8.3/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsc" "$@"
+fi

package/playground/node_modules/.bin/tsserver ADDED Viewed

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/fragments/fragments/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/typescript@5.8.3/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/fragments/fragments/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/typescript@5.8.3/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsserver" "$@"
+fi

package/playground/node_modules/.bin/vite ADDED Viewed

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/fragments/fragments/node_modules/.pnpm/vite@6.3.5_@types+node@22.19.11_jiti@2.6.1_terser@5.46.0_yaml@2.4.2/node_modules/vite/bin/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/vite@6.3.5_@types+node@22.19.11_jiti@2.6.1_terser@5.46.0_yaml@2.4.2/node_modules/vite/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/vite@6.3.5_@types+node@22.19.11_jiti@2.6.1_terser@5.46.0_yaml@2.4.2/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/fragments/fragments/node_modules/.pnpm/vite@6.3.5_@types+node@22.19.11_jiti@2.6.1_terser@5.46.0_yaml@2.4.2/node_modules/vite/bin/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/vite@6.3.5_@types+node@22.19.11_jiti@2.6.1_terser@5.46.0_yaml@2.4.2/node_modules/vite/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/vite@6.3.5_@types+node@22.19.11_jiti@2.6.1_terser@5.46.0_yaml@2.4.2/node_modules:/home/runner/work/fragments/fragments/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"
+else
+  exec node  "$basedir/../vite/bin/vite.js" "$@"
+fi

package/playground/package.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "name": "@fragmentsx/converter-playground",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@fragmentsx/figma-converter": "workspace:*",
+    "@fragmentsx/client-core": "workspace:*",
+    "@fragmentsx/render-react": "workspace:*",
+    "@fragmentsx/definition": "workspace:*"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.0",
+    "vite": "^6.1.0",
+    "typescript": "^5.5.4",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0"
+  }
+}

package/playground/src/123.json ADDED Viewed

@@ -0,0 +1,527 @@
+{
+  "_type": "Fragment",
+  "_id": "4eef5cfcbee4ae",
+  "children": [
+    {
+      "_type": "Frame",
+      "_id": "db328de8660f00",
+      "name": "desktop",
+      "parent": "$Fragment:4eef5cfcbee4ae",
+      "children": [
+        {
+          "_type": "Frame",
+          "_id": "19cd6d3d79c045",
+          "name": "Frame 5",
+          "parent": "$Frame:db328de8660f00",
+          "children": [],
+          "paint": {
+            "_type": "Paint",
+            "_id": "8e00b4f78093b6",
+            "parent": "$Frame:19cd6d3d79c045",
+            "overrides": [],
+            "type": "Solid",
+            "solid": "#cd6464"
+          },
+          "border": {
+            "_type": "Border",
+            "_id": "323df5968fa6c7",
+            "parent": "$Frame:19cd6d3d79c045",
+            "overrides": [],
+            "type": "None"
+          },
+          "borderRadius": "0px 0px 0px 0px",
+          "layerMode": "none",
+          "width": 95.5,
+          "height": 40,
+          "widthType": "Fill",
+          "heightType": "Fixed",
+          "position": "relative",
+          "opacity": 1,
+          "rotate": 0,
+          "overflow": "hidden",
+          "visible": true,
+          "overrides": []
+        },
+        {
+          "_type": "Frame",
+          "_id": "0ca5b3266657f9",
+          "name": "Frame 6",
+          "parent": "$Frame:db328de8660f00",
+          "children": [],
+          "paint": {
+            "_type": "Paint",
+            "_id": "7bac21bd7c0567",
+            "parent": "$Frame:0ca5b3266657f9",
+            "overrides": [],
+            "type": "Solid",
+            "solid": "#cd6464"
+          },
+          "border": {
+            "_type": "Border",
+            "_id": "349d71aa58f49e",
+            "parent": "$Frame:0ca5b3266657f9",
+            "overrides": [],
+            "type": "None"
+          },
+          "borderRadius": "0px 0px 0px 0px",
+          "layerMode": "none",
+          "width": 95.5,
+          "height": 40,
+          "widthType": "Fill",
+          "heightType": "Fixed",
+          "position": "relative",
+          "opacity": 1,
+          "rotate": 0,
+          "overflow": "hidden",
+          "visible": true,
+          "overrides": []
+        },
+        {
+          "_type": "Frame",
+          "_id": "90e22c4e973bf3",
+          "name": "Registered",
+          "parent": "$Frame:db328de8660f00",
+          "children": [
+            {
+              "_type": "Frame",
+              "_id": "b5200a399bb6c9",
+              "name": "carbon:user-avatar-filled",
+              "parent": "$Frame:90e22c4e973bf3",
+              "children": [
+                {
+                  "_type": "Frame",
+                  "_id": "81aa707e759113",
+                  "name": "Vector",
+                  "parent": "$Frame:b5200a399bb6c9",
+                  "children": [],
+                  "paint": {
+                    "_type": "Paint",
+                    "_id": "0c4d323d601e34",
+                    "parent": "$Frame:81aa707e759113",
+                    "type": "Image",
+                    "image": {
+                      "_type": "ImagePaint",
+                      "_id": "2ef690b8c6b1c7",
+                      "parent": "$Paint:0c4d323d601e34",
+                      "src": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjM3NDUgMTEuNDY2MUMxMy4wOTI2IDEwLjYwMjIgMTMuNTkyIDkuNTc4IDEzLjgzMDUgOC40ODAyMkMxNC4wNjkgNy4zODI0NCAxNC4wMzk2IDYuMjQzMzYgMTMuNzQ0OCA1LjE1OTM0QzEzLjQ1IDQuMDc1MzEgMTIuODk4NSAzLjA3ODI0IDEyLjEzNjggMi4yNTI0N0MxMS4zNzUyIDEuNDI2NjkgMTAuNDI1OCAwLjc5NjUwNiA5LjM2OTEzIDAuNDE1MjIxQzguMzEyNDIgMC4wMzM5MzU3IDcuMTc5NDMgLTAuMDg3MjMxOSA2LjA2NTk4IDAuMDYxOTY4QzQuOTUyNTQgMC4yMTExNjggMy44OTE0MSAwLjYyNjM0NiAyLjk3MjM2IDEuMjcyMzhDMi4wNTMzMSAxLjkxODQyIDEuMzAzMzcgMi43NzYzIDAuNzg1OTk2IDMuNzczNDZDMC4yNjg2MTkgNC43NzA2MyAtMC4wMDA5ODEyOTYgNS44Nzc3MyAyLjY4MzgyZS0wNiA3LjAwMTEzQzAuMDAwNDIzMDEgOC42MzQyMSAwLjU3NTkxMyAxMC4yMTUgMS42MjU1IDExLjQ2NjFMMS42MTU1IDExLjQ3NDZDMS42NTA1IDExLjUxNjYgMS42OTA1IDExLjU1MjYgMS43MjY1IDExLjU5NDFDMS43NzE1IDExLjY0NTYgMS44MiAxMS42OTQxIDEuODY2NSAxMS43NDQxQzIuMDA1ODQgMTEuODk2NSAyLjE1MDg0IDEyLjA0MTUgMi4zMDE1IDEyLjE3OTFDMi4zNDgxNyAxMi4yMjA1IDIuMzk0ODQgMTIuMjYwOCAyLjQ0MTUgMTIuMzAwMUMyLjYwMTUgMTIuNDM4NSAyLjc2NjUgMTIuNTY4OCAyLjkzNjUgMTIuNjkxMUMyLjk1ODUgMTIuNzA2MSAyLjk3ODUgMTIuNzI1NiAzLjAwMDUgMTIuNzQxMVYxMi43MzUxQzQuMTcxNTMgMTMuNTU5MyA1LjU2ODU0IDE0LjAwMTYgNy4wMDA1IDE0LjAwMTZDOC40MzI0NyAxNC4wMDE2IDkuODI5NDggMTMuNTU5MyAxMS4wMDA1IDEyLjczNTFWMTIuNzQxMUMxMS4wMjI1IDEyLjcyNTYgMTEuMDQyIDEyLjcwNjEgMTEuMDY0NSAxMi42OTExQzExLjIzNDUgMTIuNTY4NSAxMS4zOTk1IDEyLjQzODEgMTEuNTU5NSAxMi4zMDAxQzExLjYwNjIgMTIuMjYwNSAxMS42NTI4IDEyLjIyMDEgMTEuNjk5NSAxMi4xNzkxQzExLjg0OTggMTIuMDQxNSAxMS45OTQ4IDExLjg5NjUgMTIuMTM0NSAxMS43NDQxQzEyLjE4MSAxMS42OTQxIDEyLjIyOSAxMS42NDU2IDEyLjI3NDUgMTEuNTk0MUMxMi4zMSAxMS41NTI2IDEyLjM1MDUgMTEuNTE2NiAxMi4zODU1IDExLjQ3NDFMMTIuMzc0NSAxMS40NjYxWk03IDMuMDAxMTNDNy40NDUwMSAzLjAwMTEzIDcuODgwMDMgMy4xMzMwOSA4LjI1MDA0IDMuMzgwMzJDOC42MjAwNSAzLjYyNzU1IDguOTA4NDMgMy45Nzg5NiA5LjA3ODczIDQuMzkwMDlDOS4yNDkwMyA0LjgwMTIyIDkuMjkzNTkgNS4yNTM2MiA5LjIwNjc3IDUuNjkwMDhDOS4xMTk5NSA2LjEyNjU0IDguOTA1NjYgNi41Mjc0NSA4LjU5MDk5IDYuODQyMTJDOC4yNzYzMiA3LjE1Njc5IDcuODc1NDEgNy4zNzEwOCA3LjQzODk2IDcuNDU3OUM3LjAwMjUgNy41NDQ3MSA2LjU1MDEgNy41MDAxNSA2LjEzODk3IDcuMzI5ODZDNS43Mjc4MyA3LjE1OTU2IDUuMzc2NDMgNi44NzExNyA1LjEyOTIgNi41MDExNkM0Ljg4MTk2IDYuMTMxMTUgNC43NSA1LjY5NjE0IDQuNzUgNS4yNTExM0M0Ljc1IDQuNjU0MzkgNC45ODcwNiA0LjA4MjA5IDUuNDA5MDEgMy42NjAxNEM1LjgzMDk3IDMuMjM4MTggNi40MDMyNyAzLjAwMTEzIDcgMy4wMDExM1pNMy4wMDM1IDExLjQ2NjFDMy4wMTIxOCAxMC44MDk2IDMuMjc4OTggMTAuMTgyOSAzLjc0NjE4IDkuNzIxNkM0LjIxMzM5IDkuMjYwMjkgNC44NDM0MyA5LjAwMTQ3IDUuNSA5LjAwMTEzSDguNUM5LjE1NjU4IDkuMDAxNDcgOS43ODY2MiA5LjI2MDI5IDEwLjI1MzggOS43MjE2QzEwLjcyMSAxMC4xODI5IDEwLjk4NzggMTAuODA5NiAxMC45OTY1IDExLjQ2NjFDOS44OTk5MiAxMi40NTQzIDguNDc2MTMgMTMuMDAxMiA3IDEzLjAwMTJDNS41MjM4NyAxMy4wMDEyIDQuMTAwMDggMTIuNDU0MyAzLjAwMzUgMTEuNDY2MVoiIGZpbGw9IiM3RTgzOTIiLz4KPC9zdmc+Cg==",
+                      "scale": "Cover",
+                      "overrides": []
+                    },
+                    "overrides": []
+                  },
+                  "width": 13.99000072479248,
+                  "height": 14.001599311828613,
+                  "widthType": "Fixed",
+                  "heightType": "Fixed",
+                  "position": "absolute",
+                  "opacity": 1,
+                  "rotate": 0,
+                  "overflow": "visible",
+                  "visible": true,
+                  "overrides": []
+                }
+              ],
+              "paint": {
+                "_type": "Paint",
+                "_id": "8f7da1809e4f37",
+                "parent": "$Frame:b5200a399bb6c9",
+                "type": "None",
+                "overrides": []
+              },
+              "border": {
+                "_type": "Border",
+                "_id": "f88c0a69e1ff4b",
+                "parent": "$Frame:b5200a399bb6c9",
+                "overrides": [],
+                "type": "None"
+              },
+              "borderRadius": "0px 0px 0px 0px",
+              "layerMode": "none",
+              "width": 16,
+              "height": 16,
+              "widthType": "Fixed",
+              "heightType": "Fixed",
+              "position": "relative",
+              "opacity": 1,
+              "rotate": 0,
+              "overflow": "hidden",
+              "visible": true,
+              "overrides": []
+            },
+            {
+              "_type": "Text",
+              "_id": "667574810d207b",
+              "name": "14 120",
+              "parent": "$Frame:90e22c4e973bf3",
+              "content": "<p style=\"font-size: 10px; font-family: Onest; font-weight: 700; color: #7e8392; line-height: 94.9999988079071%\">14 120</p>",
+              "textAlign": "left",
+              "width": 30,
+              "height": 9,
+              "widthType": "Hug",
+              "heightType": "Hug",
+              "position": "relative",
+              "opacity": 1,
+              "rotate": 0,
+              "overrides": []
+            },
+            {
+              "_type": "Text",
+              "_id": "c1d70b8a4f13b0",
+              "name": "registered",
+              "parent": "$Frame:90e22c4e973bf3",
+              "content": "<p style=\"font-size: 10px; font-family: Onest; font-weight: 700; color: #7e8392; line-height: 94.9999988079071%\">registered</p>",
+              "textAlign": "left",
+              "width": 63,
+              "height": 9,
+              "widthType": "Hug",
+              "heightType": "Hug",
+              "position": "relative",
+              "opacity": 1,
+              "rotate": 0,
+              "overrides": []
+            }
+          ],
+          "paint": {
+            "_type": "Paint",
+            "_id": "f7e91edcba0dcb",
+            "parent": "$Frame:90e22c4e973bf3",
+            "type": "None",
+            "overrides": []
+          },
+          "border": {
+            "_type": "Border",
+            "_id": "59ec6f09d6a1ed",
+            "parent": "$Frame:90e22c4e973bf3",
+            "overrides": [],
+            "type": "None"
+          },
+          "borderRadius": "23.5px 23.5px 23.5px 23.5px",
+          "layerMode": "flex",
+          "layerDirection": "horizontal",
+          "layerDistribute": "start",
+          "layerAlign": "center",
+          "layerGap": 3,
+          "layerWrap": false,
+          "padding": "8px 5px 8px 5px",
+          "width": 125,
+          "height": 20,
+          "widthType": "Fixed",
+          "heightType": "Fixed",
+          "position": "relative",
+          "opacity": 1,
+          "rotate": 0,
+          "overflow": "hidden",
+          "visible": true,
+          "overrides": []
+        }
+      ],
+      "paint": {
+        "_type": "Paint",
+        "_id": "ef92912b7aec8f",
+        "parent": "$Frame:db328de8660f00",
+        "overrides": [],
+        "type": "Solid",
+        "solid": "#d8d0d0"
+      },
+      "border": {
+        "_type": "Border",
+        "_id": "dc65dc189a9ecb",
+        "parent": "$Frame:db328de8660f00",
+        "overrides": [],
+        "type": "None"
+      },
+      "borderRadius": "0px 0px 0px 0px",
+      "layerMode": "flex",
+      "layerDirection": "horizontal",
+      "layerDistribute": "start",
+      "layerAlign": "start",
+      "layerGap": 30,
+      "layerWrap": false,
+      "padding": "18px 18px 18px 18px",
+      "width": 412,
+      "height": 76,
+      "widthType": "Fixed",
+      "heightType": "Hug",
+      "position": "absolute",
+      "left": 0,
+      "top": 0,
+      "opacity": 1,
+      "rotate": 0,
+      "overflow": "hidden",
+      "visible": true,
+      "overrides": [
+        {
+          "_type": "Frame",
+          "_id": "a241b34832eac0",
+          "parent": "$Frame:db328de8660f00",
+          "overrideFrom": "$Frame:db328de8660f00",
+          "name": "mobile",
+          "layerDirection": "vertical",
+          "width": 180,
+          "height": 196,
+          "left": -1652,
+          "top": -455,
+          "threshold": 180
+        }
+      ],
+      "isPrimary": true,
+      "isBreakpoint": true,
+      "threshold": 412
+    },
+    {
+      "_type": "Frame",
+      "_id": "a241b34832eac0",
+      "name": "mobile",
+      "parent": "$Fragment:4eef5cfcbee4ae",
+      "children": [
+        {
+          "_type": "Frame",
+          "_id": "c243c81c97e3b5",
+          "name": "Frame 5",
+          "parent": "$Frame:a241b34832eac0",
+          "children": [],
+          "paint": {
+            "_type": "Paint",
+            "_id": "7cee6416248f64",
+            "parent": "$Frame:c243c81c97e3b5",
+            "overrides": [],
+            "type": "Solid",
+            "solid": "#cd6464"
+          },
+          "border": {
+            "_type": "Border",
+            "_id": "2b31c5439c09cb",
+            "parent": "$Frame:c243c81c97e3b5",
+            "overrides": [],
+            "type": "None"
+          },
+          "borderRadius": "0px 0px 0px 0px",
+          "layerMode": "none",
+          "width": 144,
+          "height": 40,
+          "widthType": "Fill",
+          "heightType": "Fixed",
+          "position": "relative",
+          "opacity": 1,
+          "rotate": 0,
+          "overflow": "hidden",
+          "visible": true,
+          "overrides": []
+        },
+        {
+          "_type": "Frame",
+          "_id": "8bb8346e3cd8c7",
+          "name": "Frame 6",
+          "parent": "$Frame:a241b34832eac0",
+          "children": [],
+          "paint": {
+            "_type": "Paint",
+            "_id": "4b3f1159206949",
+            "parent": "$Frame:8bb8346e3cd8c7",
+            "overrides": [],
+            "type": "Solid",
+            "solid": "#cd6464"
+          },
+          "border": {
+            "_type": "Border",
+            "_id": "04247bb89e54f5",
+            "parent": "$Frame:8bb8346e3cd8c7",
+            "overrides": [],
+            "type": "None"
+          },
+          "borderRadius": "0px 0px 0px 0px",
+          "layerMode": "none",
+          "width": 144,
+          "height": 40,
+          "widthType": "Fill",
+          "heightType": "Fixed",
+          "position": "relative",
+          "opacity": 1,
+          "rotate": 0,
+          "overflow": "hidden",
+          "visible": true,
+          "overrides": []
+        },
+        {
+          "_type": "Frame",
+          "_id": "ed1b0585cc5bf8",
+          "name": "Registered",
+          "parent": "$Frame:a241b34832eac0",
+          "children": [
+            {
+              "_type": "Frame",
+              "_id": "d15c78c414cd75",
+              "name": "carbon:user-avatar-filled",
+              "parent": "$Frame:ed1b0585cc5bf8",
+              "children": [
+                {
+                  "_type": "Frame",
+                  "_id": "9e301a78ab5bef",
+                  "name": "Vector",
+                  "parent": "$Frame:d15c78c414cd75",
+                  "children": [],
+                  "paint": {
+                    "_type": "Paint",
+                    "_id": "833c11cd686e71",
+                    "parent": "$Frame:9e301a78ab5bef",
+                    "type": "Image",
+                    "image": {
+                      "_type": "ImagePaint",
+                      "_id": "e2918e00cfbf36",
+                      "parent": "$Paint:833c11cd686e71",
+                      "src": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjM3NDUgMTEuNDY2MUMxMy4wOTI2IDEwLjYwMjIgMTMuNTkyIDkuNTc4IDEzLjgzMDUgOC40ODAyMkMxNC4wNjkgNy4zODI0NCAxNC4wMzk2IDYuMjQzMzYgMTMuNzQ0OCA1LjE1OTM0QzEzLjQ1IDQuMDc1MzEgMTIuODk4NSAzLjA3ODI0IDEyLjEzNjggMi4yNTI0N0MxMS4zNzUyIDEuNDI2NjkgMTAuNDI1OCAwLjc5NjUwNiA5LjM2OTEzIDAuNDE1MjIxQzguMzEyNDIgMC4wMzM5MzU3IDcuMTc5NDMgLTAuMDg3MjMxOSA2LjA2NTk4IDAuMDYxOTY4QzQuOTUyNTQgMC4yMTExNjggMy44OTE0MSAwLjYyNjM0NiAyLjk3MjM2IDEuMjcyMzhDMi4wNTMzMSAxLjkxODQyIDEuMzAzMzcgMi43NzYzIDAuNzg1OTk2IDMuNzczNDZDMC4yNjg2MTkgNC43NzA2MyAtMC4wMDA5ODEyOTYgNS44Nzc3MyAyLjY4MzgyZS0wNiA3LjAwMTEzQzAuMDAwNDIzMDEgOC42MzQyMSAwLjU3NTkxMyAxMC4yMTUgMS42MjU1IDExLjQ2NjFMMS42MTU1IDExLjQ3NDZDMS42NTA1IDExLjUxNjYgMS42OTA1IDExLjU1MjYgMS43MjY1IDExLjU5NDFDMS43NzE1IDExLjY0NTYgMS44MiAxMS42OTQxIDEuODY2NSAxMS43NDQxQzIuMDA1ODQgMTEuODk2NSAyLjE1MDg0IDEyLjA0MTUgMi4zMDE1IDEyLjE3OTFDMi4zNDgxNyAxMi4yMjA1IDIuMzk0ODQgMTIuMjYwOCAyLjQ0MTUgMTIuMzAwMUMyLjYwMTUgMTIuNDM4NSAyLjc2NjUgMTIuNTY4OCAyLjkzNjUgMTIuNjkxMUMyLjk1ODUgMTIuNzA2MSAyLjk3ODUgMTIuNzI1NiAzLjAwMDUgMTIuNzQxMVYxMi43MzUxQzQuMTcxNTMgMTMuNTU5MyA1LjU2ODU0IDE0LjAwMTYgNy4wMDA1IDE0LjAwMTZDOC40MzI0NyAxNC4wMDE2IDkuODI5NDggMTMuNTU5MyAxMS4wMDA1IDEyLjczNTFWMTIuNzQxMUMxMS4wMjI1IDEyLjcyNTYgMTEuMDQyIDEyLjcwNjEgMTEuMDY0NSAxMi42OTExQzExLjIzNDUgMTIuNTY4NSAxMS4zOTk1IDEyLjQzODEgMTEuNTU5NSAxMi4zMDAxQzExLjYwNjIgMTIuMjYwNSAxMS42NTI4IDEyLjIyMDEgMTEuNjk5NSAxMi4xNzkxQzExLjg0OTggMTIuMDQxNSAxMS45OTQ4IDExLjg5NjUgMTIuMTM0NSAxMS43NDQxQzEyLjE4MSAxMS42OTQxIDEyLjIyOSAxMS42NDU2IDEyLjI3NDUgMTEuNTk0MUMxMi4zMSAxMS41NTI2IDEyLjM1MDUgMTEuNTE2NiAxMi4zODU1IDExLjQ3NDFMMTIuMzc0NSAxMS40NjYxWk03IDMuMDAxMTNDNy40NDUwMSAzLjAwMTEzIDcuODgwMDMgMy4xMzMwOSA4LjI1MDA0IDMuMzgwMzJDOC42MjAwNSAzLjYyNzU1IDguOTA4NDMgMy45Nzg5NiA5LjA3ODczIDQuMzkwMDlDOS4yNDkwMyA0LjgwMTIyIDkuMjkzNTkgNS4yNTM2MiA5LjIwNjc3IDUuNjkwMDhDOS4xMTk5NSA2LjEyNjU0IDguOTA1NjYgNi41Mjc0NSA4LjU5MDk5IDYuODQyMTJDOC4yNzYzMiA3LjE1Njc5IDcuODc1NDEgNy4zNzEwOCA3LjQzODk2IDcuNDU3OUM3LjAwMjUgNy41NDQ3MSA2LjU1MDEgNy41MDAxNSA2LjEzODk3IDcuMzI5ODZDNS43Mjc4MyA3LjE1OTU2IDUuMzc2NDMgNi44NzExNyA1LjEyOTIgNi41MDExNkM0Ljg4MTk2IDYuMTMxMTUgNC43NSA1LjY5NjE0IDQuNzUgNS4yNTExM0M0Ljc1IDQuNjU0MzkgNC45ODcwNiA0LjA4MjA5IDUuNDA5MDEgMy42NjAxNEM1LjgzMDk3IDMuMjM4MTggNi40MDMyNyAzLjAwMTEzIDcgMy4wMDExM1pNMy4wMDM1IDExLjQ2NjFDMy4wMTIxOCAxMC44MDk2IDMuMjc4OTggMTAuMTgyOSAzLjc0NjE4IDkuNzIxNkM0LjIxMzM5IDkuMjYwMjkgNC44NDM0MyA5LjAwMTQ3IDUuNSA5LjAwMTEzSDguNUM5LjE1NjU4IDkuMDAxNDcgOS43ODY2MiA5LjI2MDI5IDEwLjI1MzggOS43MjE2QzEwLjcyMSAxMC4xODI5IDEwLjk4NzggMTAuODA5NiAxMC45OTY1IDExLjQ2NjFDOS44OTk5MiAxMi40NTQzIDguNDc2MTMgMTMuMDAxMiA3IDEzLjAwMTJDNS41MjM4NyAxMy4wMDEyIDQuMTAwMDggMTIuNDU0MyAzLjAwMzUgMTEuNDY2MVoiIGZpbGw9IiM3RTgzOTIiLz4KPC9zdmc+Cg==",
+                      "scale": "Cover",
+                      "overrides": []
+                    },
+                    "overrides": []
+                  },
+                  "width": 13.99000072479248,
+                  "height": 14.001599311828613,
+                  "widthType": "Fixed",
+                  "heightType": "Fixed",
+                  "position": "absolute",
+                  "opacity": 1,
+                  "rotate": 0,
+                  "overflow": "visible",
+                  "visible": true,
+                  "overrides": []
+                }
+              ],
+              "paint": {
+                "_type": "Paint",
+                "_id": "426aad11e91769",
+                "parent": "$Frame:d15c78c414cd75",
+                "type": "None",
+                "overrides": []
+              },
+              "border": {
+                "_type": "Border",
+                "_id": "5990caaad240f1",
+                "parent": "$Frame:d15c78c414cd75",
+                "overrides": [],
+                "type": "None"
+              },
+              "borderRadius": "0px 0px 0px 0px",
+              "layerMode": "none",
+              "width": 16,
+              "height": 16,
+              "widthType": "Fixed",
+              "heightType": "Fixed",
+              "position": "relative",
+              "opacity": 1,
+              "rotate": 0,
+              "overflow": "hidden",
+              "visible": true,
+              "overrides": []
+            },
+            {
+              "_type": "Text",
+              "_id": "0b6d06d3bfdcdb",
+              "name": "14 120",
+              "parent": "$Frame:ed1b0585cc5bf8",
+              "content": "<p style=\"font-size: 10px; font-family: Onest; font-weight: 700; color: #7e8392; line-height: 94.9999988079071%\">14 120</p>",
+              "textAlign": "left",
+              "width": 30,
+              "height": 9,
+              "widthType": "Hug",
+              "heightType": "Hug",
+              "position": "relative",
+              "opacity": 1,
+              "rotate": 0,
+              "overrides": []
+            },
+            {
+              "_type": "Text",
+              "_id": "7edd9fac7c26fd",
+              "name": "registered",
+              "parent": "$Frame:ed1b0585cc5bf8",
+              "content": "<p style=\"font-size: 10px; font-family: Onest; font-weight: 700; color: #7e8392; line-height: 94.9999988079071%\">registered</p>",
+              "textAlign": "left",
+              "width": 63,
+              "height": 9,
+              "widthType": "Hug",
+              "heightType": "Hug",
+              "position": "relative",
+              "opacity": 1,
+              "rotate": 0,
+              "overrides": []
+            }
+          ],
+          "paint": {
+            "_type": "Paint",
+            "_id": "0b1d37eb2b7cd1",
+            "parent": "$Frame:ed1b0585cc5bf8",
+            "type": "None",
+            "overrides": []
+          },
+          "border": {
+            "_type": "Border",
+            "_id": "cb587a530b85c9",
+            "parent": "$Frame:ed1b0585cc5bf8",
+            "overrides": [],
+            "type": "None"
+          },
+          "borderRadius": "23.5px 23.5px 23.5px 23.5px",
+          "layerMode": "flex",
+          "layerDirection": "horizontal",
+          "layerDistribute": "start",
+          "layerAlign": "center",
+          "layerGap": 3,
+          "layerWrap": false,
+          "padding": "8px 5px 8px 5px",
+          "width": 125,
+          "height": 20,
+          "widthType": "Fixed",
+          "heightType": "Fixed",
+          "position": "relative",
+          "opacity": 1,
+          "rotate": 0,
+          "overflow": "hidden",
+          "visible": true,
+          "overrides": []
+        }
+      ],
+      "paint": {
+        "_type": "Paint",
+        "_id": "df446b3c26673d",
+        "parent": "$Frame:a241b34832eac0",
+        "overrides": [],
+        "type": "Solid",
+        "solid": "#d8d0d0"
+      },
+      "border": {
+        "_type": "Border",
+        "_id": "fe054cfeb72005",
+        "parent": "$Frame:a241b34832eac0",
+        "overrides": [],
+        "type": "None"
+      },
+      "borderRadius": "0px 0px 0px 0px",
+      "layerMode": "flex",
+      "layerDirection": "vertical",
+      "layerDistribute": "start",
+      "layerAlign": "start",
+      "layerGap": 30,
+      "layerWrap": false,
+      "padding": "18px 18px 18px 18px",
+      "width": 180,
+      "height": 196,
+      "widthType": "Fixed",
+      "heightType": "Hug",
+      "position": "absolute",
+      "left": 462,
+      "top": 0,
+      "opacity": 1,
+      "rotate": 0,
+      "overflow": "hidden",
+      "visible": true,
+      "overrides": [],
+      "isBreakpoint": true,
+      "isPrimary": false,
+      "threshold": 180,
+      "overrideFrom": "$Frame:db328de8660f00"
+    }
+  ],
+  "properties": [],
+  "cssChunks": []
+}