diff --git a/frontend/playwright/data/get-teams-inspect.json b/frontend/playwright/data/get-teams-inspect.json new file mode 100644 index 0000000000..c8681ce6cc --- /dev/null +++ b/frontend/playwright/data/get-teams-inspect.json @@ -0,0 +1,27 @@ +[ + { + "~:features": { + "~#set": [ + "plugins/runtime", + "design-tokens/v1", + "layout/grid", + "styles/v2", + "fdata/pointer-map", + "fdata/objects-map", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true + }, + "~:name": "Default", + "~:modified-at": "~m1743598498553", + "~:id": "~u5116481d-f4e1-80c0-8005-f8e885bdc14d", + "~:created-at": "~m1743598498553", + "~:is-default": true + } +] diff --git a/frontend/playwright/data/workspace/get-file-inspect-tab.json b/frontend/playwright/data/workspace/get-file-inspect-tab.json new file mode 100644 index 0000000000..f696bc4135 --- /dev/null +++ b/frontend/playwright/data/workspace/get-file-inspect-tab.json @@ -0,0 +1,5771 @@ +{ + "~:features": { + "~#set": [ + "fdata/path-data", + "plugins/runtime", + "design-tokens/v1", + "variants/v1", + "layout/grid", + "styles/v2", + "fdata/pointer-map", + "fdata/objects-map", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:team-id": "~u5116481d-f4e1-80c0-8005-f8e8dada696e", + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true, + "~:can-read": true, + "~:is-logged": true + }, + "~:has-media-trimmed": false, + "~:comment-thread-seqn": 0, + "~:name": "Fitxer nou 4 (còpia)", + "~:revn": 161, + "~:modified-at": "~m1762259088973", + "~:vern": 0, + "~:id": "~u7b2da435-6186-815a-8007-0daa95d2f26d", + "~:is-shared": false, + "~:migrations": { + "~#ordered-set": [ + "legacy-2", + "legacy-3", + "legacy-5", + "legacy-6", + "legacy-7", + "legacy-8", + "legacy-9", + "legacy-10", + "legacy-11", + "legacy-12", + "legacy-13", + "legacy-14", + "legacy-16", + "legacy-17", + "legacy-18", + "legacy-19", + "legacy-25", + "legacy-26", + "legacy-27", + "legacy-28", + "legacy-29", + "legacy-31", + "legacy-32", + "legacy-33", + "legacy-34", + "legacy-36", + "legacy-37", + "legacy-38", + "legacy-39", + "legacy-40", + "legacy-41", + "legacy-42", + "legacy-43", + "legacy-44", + "legacy-45", + "legacy-46", + "legacy-47", + "legacy-48", + "legacy-49", + "legacy-50", + "legacy-51", + "legacy-52", + "legacy-53", + "legacy-54", + "legacy-55", + "legacy-56", + "legacy-57", + "legacy-59", + "legacy-62", + "legacy-65", + "legacy-66", + "legacy-67", + "0001-remove-tokens-from-groups", + "0002-normalize-bool-content-v2", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content-v2", + "0004-clean-shadow-color", + "0005-deprecate-image-type", + "0006-fix-old-texts-fills", + "0008-fix-library-colors-v4", + "0009-clean-library-colors", + "0009-add-partial-text-touched-flags", + "0010-fix-swap-slots-pointing-non-existent-shapes", + "0011-fix-invalid-text-touched-flags", + "0012-fix-position-data", + "0013-fix-component-path", + "0013-clear-invalid-strokes-and-fills", + "0014-fix-tokens-lib-duplicate-ids", + "0014-clear-components-nil-objects", + "0015-fix-text-attrs-blank-strings" + ] + }, + "~:version": 67, + "~:project-id": "~u3b0bde68-8703-8097-8006-ad123189b796", + "~:created-at": "~m1761558286607", + "~:backend": "legacy-db", + "~:data": { + "~:pages": ["~uce79274b-11ab-8088-8007-0487ad43f789"], + "~:pages-index": { + "~uce79274b-11ab-8088-8007-0487ad43f789": { + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { "~#point": { "~:x": 0.0, "~:y": 0.0 } }, + { "~#point": { "~:x": 0.01, "~:y": 0.0 } }, + { "~#point": { "~:x": 0.01, "~:y": 0.01 } }, + { "~#point": { "~:x": 0.0, "~:y": 0.01 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u00000000-0000-0000-0000-000000000000", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 0, + "~:proportion": 1.0, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 0, + "~:y": 0, + "~:width": 0.01, + "~:height": 0.01, + "~:x1": 0, + "~:y1": 0, + "~:x2": 0.01, + "~:y2": 0.01 + } + }, + "~:fills": [{ "~:fill-color": "#FFFFFF", "~:fill-opacity": 1 }], + "~:flip-x": null, + "~:height": 0.01, + "~:flip-y": null, + "~:shapes": ["~u5403f14e-eb02-80be-8007-0487afa26386"] + } + }, + "~u6ce76eb4-b183-804e-8007-04b07bc58c4a": { + "~#shape": { + "~:y": 972, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "single" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "single", + "~:width": 48.99999999999997, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 177, "~:y": 972 } }, + { "~#point": { "~:x": 225.99999999999997, "~:y": 972 } }, + { "~#point": { "~:x": 225.99999999999997, "~:y": 994 } }, + { "~#point": { "~:x": 177, "~:y": 994 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b07bc58c4a", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 993.3000030517578, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 48.48333740234375, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 177, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 48.48333740234375, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "single" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 177, + "~:selrect": { + "~#rect": { + "~:x": 177, + "~:y": 972, + "~:width": 48.99999999999997, + "~:height": 22, + "~:x1": 177, + "~:y1": 972, + "~:x2": 225.99999999999997, + "~:y2": 994 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u5403f14e-eb02-80be-8007-048a9fb2671a": { + "~#shape": { + "~:y": 702, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "bluR" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "bluR", + "~:width": 37, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 770, "~:y": 702 } }, + { "~#point": { "~:x": 807, "~:y": 702 } }, + { "~#point": { "~:x": 807, "~:y": 724 } }, + { "~#point": { "~:x": 770, "~:y": 724 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u5403f14e-eb02-80be-8007-048a9fb2671a", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 723.3000030517578, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 36.366668701171875, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 770, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 36.366668701171875, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "bluR" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 770, + "~:selrect": { + "~#rect": { + "~:x": 770, + "~:y": 702, + "~:width": 37, + "~:height": 22, + "~:x1": 770, + "~:y1": 702, + "~:x2": 807, + "~:y2": 724 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b4a3dbb14e": { + "~#shape": { + "~:y": 1751, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "style" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "style", + "~:width": 39, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 595, "~:y": 1751 } }, + { "~#point": { "~:x": 634, "~:y": 1751 } }, + { "~#point": { "~:x": 634, "~:y": 1773 } }, + { "~#point": { "~:x": 595, "~:y": 1773 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b4a3dbb14e", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 1772.3000030517578, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 38.366668701171875, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 595, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 38.366668701171875, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "style" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 595, + "~:selrect": { + "~#rect": { + "~:x": 595, + "~:y": 1751, + "~:width": 39, + "~:height": 22, + "~:x1": 595, + "~:y1": 1751, + "~:x2": 634, + "~:y2": 1773 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b15b636f6a": { + "~#shape": { + "~:y": 972, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "token" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "token", + "~:width": 47, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 794, "~:y": 972 } }, + { "~#point": { "~:x": 841, "~:y": 972 } }, + { "~#point": { "~:x": 841, "~:y": 994 } }, + { "~#point": { "~:x": 794, "~:y": 994 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b15b636f6a", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 993.3000030517578, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 46.18333435058594, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 794, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 46.18333435058594, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "token" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 794, + "~:selrect": { + "~#rect": { + "~:x": 794, + "~:y": 972, + "~:width": 47, + "~:height": 22, + "~:x1": 794, + "~:y1": 972, + "~:x2": 841, + "~:y2": 994 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b1c2dba7ca": { + "~#shape": { + "~:y": 1214, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - fill - single - gradient", + "~:width": 184, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 180, "~:y": 1214 } }, + { "~#point": { "~:x": 364, "~:y": 1214 } }, + { "~#point": { "~:x": 364, "~:y": 1406 } }, + { "~#point": { "~:x": 180, "~:y": 1406 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u6ce76eb4-b183-804e-8007-04b1c2dba7ca", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 180, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 180, + "~:y": 1214, + "~:width": 184, + "~:height": 192, + "~:x1": 180, + "~:y1": 1214, + "~:x2": 364, + "~:y2": 1406 + } + }, + "~:fills": [ + { + "~:fill-color-gradient": { + "~:start-x": 0.5, + "~:start-y": 0, + "~:end-x": 0.5, + "~:end-y": 1, + "~:width": 1, + "~:type": "~:linear", + "~:stops": [ + { "~:color": "#0438d5", "~:offset": 0, "~:opacity": 1 }, + { "~:color": "#0438d5", "~:offset": 1, "~:opacity": 0 } + ] + } + } + ], + "~:flip-x": null, + "~:height": 192, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b4a3dbb14f": { + "~#shape": { + "~:y": 1751, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "token" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "token", + "~:width": 47, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 808, "~:y": 1751 } }, + { "~#point": { "~:x": 855, "~:y": 1751 } }, + { "~#point": { "~:x": 855, "~:y": 1773 } }, + { "~#point": { "~:x": 808, "~:y": 1773 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b4a3dbb14f", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 1772.3000030517578, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 46.18333435058594, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 808, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 46.18333435058594, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "token" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 808, + "~:selrect": { + "~#rect": { + "~:x": 808, + "~:y": 1751, + "~:width": 47, + "~:height": 22, + "~:x1": 808, + "~:y1": 1751, + "~:x2": 855, + "~:y2": 1773 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b6e399b62e": { + "~#shape": { + "~:y": 749, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - borderRadius - multiple", + "~:width": 177, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 1311, "~:y": 749 } }, + { "~#point": { "~:x": 1488, "~:y": 749 } }, + { "~#point": { "~:x": 1488, "~:y": 931 } }, + { "~#point": { "~:x": 1311, "~:y": 931 } } + ], + "~:r2": 20, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 20, + "~:r1": 20, + "~:id": "~u6ce76eb4-b183-804e-8007-04b6e399b62e", + "~:parent-id": "~u6ce76eb4-b183-804e-8007-04b6f725fae8", + "~:frame-id": "~u6ce76eb4-b183-804e-8007-04b6f725fae8", + "~:strokes": [], + "~:x": 1311, + "~:proportion": 1, + "~:r4": 20, + "~:selrect": { + "~#rect": { + "~:x": 1311, + "~:y": 749, + "~:width": 177, + "~:height": 182, + "~:x1": 1311, + "~:y1": 749, + "~:x2": 1488, + "~:y2": 931 + } + }, + "~:fills": [{ "~:fill-color": "#B1B2B5", "~:fill-opacity": 1 }], + "~:flip-x": null, + "~:height": 182, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b585355aed": { + "~#shape": { + "~:y": 351, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "22.5", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "TEXT PANEL" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "22.5", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "TEXT PANEL", + "~:width": 133, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 1308, "~:y": 351 } }, + { "~#point": { "~:x": 1441, "~:y": 351 } }, + { "~#point": { "~:x": 1441, "~:y": 378 } }, + { "~#point": { "~:x": 1308, "~:y": 378 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b585355aed", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "title" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 378, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "22.5px", + "~:font-weight": "400", + "~:y1": 0, + "~:width": 132.64999389648438, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 1308, + "~:x1": 0, + "~:y2": 27, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 132.64999389648438, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 27, + "~:text": "TEXT PANEL" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 1308, + "~:selrect": { + "~#rect": { + "~:x": 1308, + "~:y": 351, + "~:width": 133, + "~:height": 27, + "~:x1": 1308, + "~:y1": 351, + "~:x2": 1441, + "~:y2": 378 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 27, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b6d7ecc86e": { + "~#shape": { + "~:y": 602, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "22.5", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "BORDER RADIUS" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "22.5", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "BORDER RADIUS", + "~:width": 177, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 1311, "~:y": 602 } }, + { "~#point": { "~:x": 1488, "~:y": 602 } }, + { "~#point": { "~:x": 1488, "~:y": 629 } }, + { "~#point": { "~:x": 1311, "~:y": 629 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b6d7ecc86e", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "title" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 629, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "22.5px", + "~:font-weight": "400", + "~:y1": 0, + "~:width": 176.76666259765625, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 1311, + "~:x1": 0, + "~:y2": 27, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 176.76666259765625, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 27, + "~:text": "BORDER RADIUS" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 1311, + "~:selrect": { + "~#rect": { + "~:x": 1311, + "~:y": 602, + "~:width": 177, + "~:height": 27, + "~:x1": 1311, + "~:y1": 602, + "~:x2": 1488, + "~:y2": 629 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 27, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b4a3dbb14c": { + "~#shape": { + "~:y": 1751, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "single" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "single", + "~:width": 49, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 191, "~:y": 1751 } }, + { "~#point": { "~:x": 240, "~:y": 1751 } }, + { "~#point": { "~:x": 240, "~:y": 1773 } }, + { "~#point": { "~:x": 191, "~:y": 1773 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b4a3dbb14c", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 1772.3000030517578, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 48.48333740234375, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 191, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 48.48333740234375, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "single" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 191, + "~:selrect": { + "~#rect": { + "~:x": 191, + "~:y": 1751, + "~:width": 49, + "~:height": 22, + "~:x1": 191, + "~:y1": 1751, + "~:x2": 240, + "~:y2": 1773 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b69f6ca2af": { + "~#shape": { + "~:y": 313, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "22.5", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "LAYOUT AND LAYOUT ELEMENT" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "22.5", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "LAYOUT AND LAYOUT ELEMENT", + "~:width": 341, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 150, "~:y": 313 } }, + { "~#point": { "~:x": 490.99999999999994, "~:y": 313 } }, + { "~#point": { "~:x": 490.99999999999994, "~:y": 340 } }, + { "~#point": { "~:x": 150, "~:y": 340 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b69f6ca2af", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "title" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 340, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "22.5px", + "~:font-weight": "400", + "~:y1": 0, + "~:width": 340.45001220703125, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 150.00000000000003, + "~:x1": 0, + "~:y2": 27, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 340.45001220703125, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 27, + "~:text": "LAYOUT AND LAYOUT ELEMENT" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 150.00000000000003, + "~:selrect": { + "~#rect": { + "~:x": 150.00000000000003, + "~:y": 313, + "~:width": 341, + "~:height": 27, + "~:x1": 150.00000000000003, + "~:y1": 313, + "~:x2": 491, + "~:y2": 340 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 27, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b4a3dbb14d": { + "~#shape": { + "~:y": 1751, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "multiple" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "multiple", + "~:width": 67, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 395, "~:y": 1751 } }, + { "~#point": { "~:x": 462, "~:y": 1751 } }, + { "~#point": { "~:x": 462, "~:y": 1773 } }, + { "~#point": { "~:x": 395, "~:y": 1773 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b4a3dbb14d", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 1772.3000030517578, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 66.48333740234375, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 395, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 66.48333740234375, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "multiple" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 395, + "~:selrect": { + "~#rect": { + "~:x": 395, + "~:y": 1751, + "~:width": 67, + "~:height": 22, + "~:x1": 395, + "~:y1": 1751, + "~:x2": 462, + "~:y2": 1773 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b04f0c75a9": { + "~#shape": { + "~:y": 351, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "GRID LAYOUT" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "GRID LAYOUT", + "~:width": 117.00000000000011, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 620, "~:y": 351 } }, + { "~#point": { "~:x": 737.0000000000001, "~:y": 351 } }, + { "~#point": { "~:x": 737.0000000000001, "~:y": 373 } }, + { "~#point": { "~:x": 620, "~:y": 373 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b04f0c75a9", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 372.3000030517578, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 116.69999694824219, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 620, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 116.69999694824219, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "GRID LAYOUT" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 620, + "~:selrect": { + "~#rect": { + "~:x": 620, + "~:y": 351, + "~:width": 117.00000000000011, + "~:height": 22, + "~:x1": 620, + "~:y1": 351, + "~:x2": 737.0000000000001, + "~:y2": 373 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b6f725fae8": { + "~#shape": { + "~:y": 729, + "~:hide-fill-on-export": false, + "~:layout-gap-type": "~:multiple", + "~:layout-padding": { + "~:p1": 20, + "~:p2": 0, + "~:p3": 20, + "~:p4": 0 + }, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:layout-wrap-type": "~:nowrap", + "~:layout": "~:flex", + "~:hide-in-viewer": true, + "~:name": "shape - borderRadius", + "~:layout-align-items": "~:start", + "~:width": 624, + "~:layout-padding-type": "~:simple", + "~:type": "~:frame", + "~:points": [ + { "~#point": { "~:x": 1311, "~:y": 729 } }, + { "~#point": { "~:x": 1935, "~:y": 729 } }, + { "~#point": { "~:x": 1935, "~:y": 950.9999999999999 } }, + { "~#point": { "~:x": 1311, "~:y": 950.9999999999999 } } + ], + "~:r2": 20, + "~:show-content": true, + "~:layout-item-h-sizing": "~:auto", + "~:proportion-lock": false, + "~:layout-gap": { "~:row-gap": 0, "~:column-gap": 46.5 }, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:layout-item-v-sizing": "~:auto", + "~:r3": 20, + "~:layout-justify-content": "~:start", + "~:r1": 20, + "~:id": "~u6ce76eb4-b183-804e-8007-04b6f725fae8", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:layout-flex-dir": "~:row-reverse", + "~:layout-align-content": "~:stretch", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 1311, + "~:proportion": 1, + "~:r4": 20, + "~:selrect": { + "~#rect": { + "~:x": 1311, + "~:y": 729, + "~:width": 624, + "~:height": 221.9999999999999, + "~:x1": 1311, + "~:y1": 729, + "~:x2": 1935, + "~:y2": 950.9999999999999 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 221.9999999999999, + "~:flip-y": null, + "~:shapes": [ + "~u6ce76eb4-b183-804e-8007-04b6e399b62e", + "~u6ce76eb4-b183-804e-8007-04b6e6adb027", + "~u6ce76eb4-b183-804e-8007-04b6eb5e1080" + ] + } + }, + "~u5403f14e-eb02-80be-8007-0487b9649c53": { + "~#shape": { + "~:y": 382, + "~:hide-fill-on-export": false, + "~:layout-gap-type": "~:multiple", + "~:layout-padding": { + "~:p1": 0, + "~:p2": 0, + "~:p3": 0, + "~:p4": 0 + }, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:layout-wrap-type": "~:nowrap", + "~:layout": "~:flex", + "~:hide-in-viewer": true, + "~:name": "Shape - layout - flex", + "~:layout-align-items": "~:start", + "~:width": 316, + "~:layout-padding-type": "~:simple", + "~:type": "~:frame", + "~:points": [ + { "~#point": { "~:x": 150, "~:y": 382 } }, + { "~#point": { "~:x": 466, "~:y": 382 } }, + { "~#point": { "~:x": 466, "~:y": 544 } }, + { "~#point": { "~:x": 150, "~:y": 544 } } + ], + "~:r2": 0, + "~:show-content": true, + "~:layout-item-h-sizing": "~:fix", + "~:proportion-lock": false, + "~:layout-gap": { "~:row-gap": 0, "~:column-gap": 29 }, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:layout-item-v-sizing": "~:auto", + "~:r3": 0, + "~:layout-justify-content": "~:start", + "~:r1": 0, + "~:id": "~u5403f14e-eb02-80be-8007-0487b9649c53", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:layout-flex-dir": "~:row-reverse", + "~:applied-tokens": { "~:column-gap": "col-gap" }, + "~:layout-align-content": "~:stretch", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 150, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 150, + "~:y": 382, + "~:width": 316, + "~:height": 162, + "~:x1": 150, + "~:y1": 382, + "~:x2": 466, + "~:y2": 544 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 162, + "~:flip-y": null, + "~:shapes": [ + "~u5403f14e-eb02-80be-8007-0487b37a338b", + "~u5403f14e-eb02-80be-8007-0487b576399e" + ] + } + }, + "~u6ce76eb4-b183-804e-8007-04b4a3dbb14b": { + "~#shape": { + "~:y": 1691, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "22.5", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "STROKE PANEL" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "22.5", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "STROKE PANEL", + "~:width": 162, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 196, "~:y": 1691 } }, + { "~#point": { "~:x": 358, "~:y": 1691 } }, + { "~#point": { "~:x": 358, "~:y": 1718 } }, + { "~#point": { "~:x": 196, "~:y": 1718 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b4a3dbb14b", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "title" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 1718, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "22.5px", + "~:font-weight": "400", + "~:y1": 0, + "~:width": 161.18333435058594, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 196, + "~:x1": 0, + "~:y2": 27, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 161.18333435058594, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 27, + "~:text": "STROKE PANEL" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 196, + "~:selrect": { + "~#rect": { + "~:x": 196, + "~:y": 1691, + "~:width": 162, + "~:height": 27, + "~:x1": 196, + "~:y1": 1691, + "~:x2": 358, + "~:y2": 1718 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 27, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b074fecc6d": { + "~#shape": { + "~:y": 994, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - fill - token", + "~:width": 184, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 794, "~:y": 994 } }, + { "~#point": { "~:x": 978, "~:y": 994 } }, + { "~#point": { "~:x": 978, "~:y": 1186 } }, + { "~#point": { "~:x": 794, "~:y": 1186 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u6ce76eb4-b183-804e-8007-04b074fecc6d", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:fill": "primary" }, + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 794, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 794, + "~:y": 994, + "~:width": 184, + "~:height": 192, + "~:x1": 794, + "~:y1": 994, + "~:x2": 978, + "~:y2": 1186 + } + }, + "~:fills": [{ "~:fill-color": "#fe0000", "~:fill-opacity": 1 }], + "~:flip-x": null, + "~:height": 192, + "~:flip-y": null + } + }, + "~u5403f14e-eb02-80be-8007-048a99988f3d": { + "~#shape": { + "~:y": 645, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "22.5", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "BOX SHADOW" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "22.5", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "BOX SHADOW", + "~:width": 154, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 160, "~:y": 645 } }, + { "~#point": { "~:x": 314, "~:y": 645 } }, + { "~#point": { "~:x": 314, "~:y": 672 } }, + { "~#point": { "~:x": 160, "~:y": 672 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u5403f14e-eb02-80be-8007-048a99988f3d", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "title" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 672, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "22.5px", + "~:font-weight": "400", + "~:y1": 0, + "~:width": 153.13333129882812, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 160, + "~:x1": 0, + "~:y2": 27, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 153.13333129882812, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 27, + "~:text": "BOX SHADOW" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:x": 160, + "~:selrect": { + "~#rect": { + "~:x": 160, + "~:y": 645, + "~:width": 154, + "~:height": 27, + "~:x1": 160, + "~:y1": 645, + "~:x2": 314, + "~:y2": 672 + } + }, + "~:flip-x": null, + "~:height": 27, + "~:flip-y": null + } + }, + "~u5403f14e-eb02-80be-8007-0487bbc6ea5f": { + "~#shape": { + "~:y": 382, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Shape - layout - grid - element", + "~:width": 158, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 620, "~:y": 382 } }, + { "~#point": { "~:x": 778, "~:y": 382 } }, + { "~#point": { "~:x": 778, "~:y": 544 } }, + { "~#point": { "~:x": 620, "~:y": 544 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u5403f14e-eb02-80be-8007-0487bbc6ea5f", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487bbc6ea5e", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487bbc6ea5e", + "~:strokes": [], + "~:x": 620, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 620, + "~:y": 382, + "~:width": 158, + "~:height": 162, + "~:x1": 620, + "~:y1": 382, + "~:x2": 778, + "~:y2": 544 + } + }, + "~:fills": [{ "~:fill-color": "#B1B2B5", "~:fill-opacity": 1 }], + "~:flip-x": null, + "~:height": 162, + "~:flip-y": null + } + }, + "~u5403f14e-eb02-80be-8007-0487b576399e": { + "~#shape": { + "~:y": 382, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Shape - layout - flex - element", + "~:width": 129, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 337, "~:y": 382 } }, + { "~#point": { "~:x": 466, "~:y": 382 } }, + { "~#point": { "~:x": 466, "~:y": 544 } }, + { "~#point": { "~:x": 337, "~:y": 544 } } + ], + "~:r2": 0, + "~:layout-item-h-sizing": "~:fill", + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u5403f14e-eb02-80be-8007-0487b576399e", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487b9649c53", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487b9649c53", + "~:strokes": [], + "~:x": 337, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 337, + "~:y": 382, + "~:width": 129, + "~:height": 162, + "~:x1": 337, + "~:y1": 382, + "~:x2": 466, + "~:y2": 544 + } + }, + "~:fills": [{ "~:fill-color": "#B1B2B5", "~:fill-opacity": 1 }], + "~:flip-x": null, + "~:height": 162, + "~:flip-y": null + } + }, + "~u5403f14e-eb02-80be-8007-0487bbc6ea5e": { + "~#shape": { + "~:y": 382, + "~:layout-grid-columns": [ + { "~:type": "~:flex", "~:value": 1 }, + { "~:type": "~:flex", "~:value": 1 } + ], + "~:hide-fill-on-export": false, + "~:layout-gap-type": "~:multiple", + "~:layout-padding": { + "~:p1": 0, + "~:p2": 0, + "~:p3": 0, + "~:p4": 0 + }, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:layout": "~:grid", + "~:hide-in-viewer": true, + "~:name": "Shape - layout - grid", + "~:layout-align-items": "~:start", + "~:width": 316, + "~:layout-grid-cells": { + "~u5403f14e-eb02-80be-8007-0487c1613307": { + "~:justify-self": "~:auto", + "~:column": 1, + "~:id": "~u5403f14e-eb02-80be-8007-0487c1613307", + "~:position": "~:auto", + "~:column-span": 1, + "~:align-self": "~:auto", + "~:row": 1, + "~:row-span": 1, + "~:shapes": ["~u5403f14e-eb02-80be-8007-0487bbc6ea5f"] + }, + "~u5403f14e-eb02-80be-8007-0487c1613308": { + "~:justify-self": "~:auto", + "~:column": 2, + "~:id": "~u5403f14e-eb02-80be-8007-0487c1613308", + "~:position": "~:auto", + "~:column-span": 1, + "~:align-self": "~:auto", + "~:row": 1, + "~:row-span": 1, + "~:shapes": ["~u5403f14e-eb02-80be-8007-0487bbc6ea60"] + } + }, + "~:layout-padding-type": "~:simple", + "~:type": "~:frame", + "~:points": [ + { "~#point": { "~:x": 620, "~:y": 382 } }, + { "~#point": { "~:x": 936, "~:y": 382 } }, + { "~#point": { "~:x": 936, "~:y": 544 } }, + { "~#point": { "~:x": 620, "~:y": 544 } } + ], + "~:r2": 0, + "~:show-content": true, + "~:layout-item-h-sizing": "~:auto", + "~:proportion-lock": false, + "~:layout-gap": { "~:row-gap": 0, "~:column-gap": 0 }, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:layout-item-v-sizing": "~:auto", + "~:r3": 0, + "~:layout-justify-content": "~:stretch", + "~:r1": 0, + "~:id": "~u5403f14e-eb02-80be-8007-0487bbc6ea5e", + "~:layout-justify-items": "~:start", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:layout-align-content": "~:stretch", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 620, + "~:proportion": 1, + "~:r4": 0, + "~:layout-grid-rows": [{ "~:type": "~:flex", "~:value": 1 }], + "~:selrect": { + "~#rect": { + "~:x": 620, + "~:y": 382, + "~:width": 316, + "~:height": 162, + "~:x1": 620, + "~:y1": 382, + "~:x2": 936, + "~:y2": 544 + } + }, + "~:fills": [], + "~:layout-grid-dir": "~:row", + "~:flip-x": null, + "~:height": 162, + "~:flip-y": null, + "~:shapes": [ + "~u5403f14e-eb02-80be-8007-0487bbc6ea60", + "~u5403f14e-eb02-80be-8007-0487bbc6ea5f" + ] + } + }, + "~u6ce76eb4-b183-804e-8007-04b035b88460": { + "~#shape": { + "~:y": 351, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "FLEX LAYOUT" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "FLEX LAYOUT", + "~:width": 118, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 150, "~:y": 351 } }, + { "~#point": { "~:x": 268, "~:y": 351 } }, + { "~#point": { "~:x": 268, "~:y": 373 } }, + { "~#point": { "~:x": 150, "~:y": 373 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b035b88460", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 372.3000030517578, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 117.61666870117188, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 150, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 117.61666870117188, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "FLEX LAYOUT" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 150, + "~:selrect": { + "~#rect": { + "~:x": 150, + "~:y": 351, + "~:width": 118, + "~:height": 22, + "~:x1": 150, + "~:y1": 351, + "~:x2": 268, + "~:y2": 373 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b1541dd680": { + "~#shape": { + "~:y": 972, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "style" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "style", + "~:width": 39, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 581, "~:y": 972 } }, + { "~#point": { "~:x": 620, "~:y": 972 } }, + { "~#point": { "~:x": 620, "~:y": 994 } }, + { "~#point": { "~:x": 581, "~:y": 994 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b1541dd680", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 993.3000030517578, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 38.366668701171875, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 581, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 38.366668701171875, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "style" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 581, + "~:selrect": { + "~#rect": { + "~:x": 581, + "~:y": 972, + "~:width": 39, + "~:height": 22, + "~:x1": 581, + "~:y1": 972, + "~:x2": 620, + "~:y2": 994 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b590d30284": { + "~#shape": { + "~:y": 388, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "uppercase", + "~:text-align": "left", + "~:font-id": "gfont-andika", + "~:font-size": "16", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Andika", + "~:text": "A single text with font properties" + } + ], + "~:text-transform": "uppercase", + "~:text-align": "left", + "~:font-id": "gfont-andika", + "~:key": "1tgq4", + "~:font-size": "16", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Andika" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "shape - text", + "~:width": 312, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 1308, "~:y": 388 } }, + { "~#point": { "~:x": 1620, "~:y": 388 } }, + { "~#point": { "~:x": 1620, "~:y": 408 } }, + { "~#point": { "~:x": 1308, "~:y": 408 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b590d30284", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": {}, + "~:position-data": [ + { + "~#rect": { + "~:y": 410.6000061035156, + "~:font-style": "normal", + "~:text-transform": "uppercase", + "~:font-size": "16px", + "~:font-weight": "400", + "~:y1": -3.399993896484375, + "~:width": 311.23333740234375, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 1308, + "~:x1": 0, + "~:y2": 22.600006103515625, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 311.23333740234375, + "~:direction": "ltr", + "~:font-family": "\"Andika\"", + "~:height": 26, + "~:text": "A single text with font properties" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 1308, + "~:selrect": { + "~#rect": { + "~:x": 1308, + "~:y": 388, + "~:width": 312, + "~:height": 20, + "~:x1": 1308, + "~:y1": 388, + "~:x2": 1620, + "~:y2": 408 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 20, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b6e6adb027": { + "~#shape": { + "~:y": 749, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - borderRadius - individual", + "~:width": 177, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 1534.5, "~:y": 749 } }, + { "~#point": { "~:x": 1711.5, "~:y": 749 } }, + { "~#point": { "~:x": 1711.5, "~:y": 931 } }, + { "~#point": { "~:x": 1534.5, "~:y": 931 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 20, + "~:id": "~u6ce76eb4-b183-804e-8007-04b6e6adb027", + "~:parent-id": "~u6ce76eb4-b183-804e-8007-04b6f725fae8", + "~:frame-id": "~u6ce76eb4-b183-804e-8007-04b6f725fae8", + "~:strokes": [], + "~:x": 1534.5, + "~:proportion": 1, + "~:r4": 20, + "~:selrect": { + "~#rect": { + "~:x": 1534.5, + "~:y": 749, + "~:width": 177, + "~:height": 182, + "~:x1": 1534.5, + "~:y1": 749, + "~:x2": 1711.5, + "~:y2": 931 + } + }, + "~:fills": [{ "~:fill-color": "#B1B2B5", "~:fill-opacity": 1 }], + "~:flip-x": null, + "~:height": 182, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b25da1d244": { + "~#shape": { + "~:y": 721, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - shadow - multiple", + "~:width": 221, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 417, "~:y": 721 } }, + { "~#point": { "~:x": 638, "~:y": 721 } }, + { "~#point": { "~:x": 638, "~:y": 870 } }, + { "~#point": { "~:x": 417, "~:y": 870 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u6ce76eb4-b183-804e-8007-04b25da1d244", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 417, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u5403f14e-eb02-80be-8007-049721cc6126", + "~:style": "~:drop-shadow", + "~:color": { "~:color": "#000000", "~:opacity": 0.2 }, + "~:offset-x": 4, + "~:offset-y": 4, + "~:blur": 4, + "~:spread": 0, + "~:hidden": false + }, + { + "~:id": "~u5403f14e-eb02-80be-8007-0497213b5e8c", + "~:style": "~:drop-shadow", + "~:color": { "~:color": "#000000", "~:opacity": 0.2 }, + "~:offset-x": 4, + "~:offset-y": 4, + "~:blur": 4, + "~:spread": 0, + "~:hidden": false + }, + { + "~:id": "~u5403f14e-eb02-80be-8007-048a84f77526", + "~:style": "~:drop-shadow", + "~:color": { "~:color": "#000000", "~:opacity": 0.2 }, + "~:offset-x": 4, + "~:offset-y": 4, + "~:blur": 4, + "~:spread": 0, + "~:hidden": false + } + ], + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 417, + "~:y": 721, + "~:width": 221, + "~:height": 149, + "~:x1": 417, + "~:y1": 721, + "~:x2": 638, + "~:y2": 870 + } + }, + "~:fills": [{ "~:fill-color": "#B1B2B5", "~:fill-opacity": 1 }], + "~:flip-x": null, + "~:height": 149, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b6eb5e1080": { + "~#shape": { + "~:y": 749, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - borderRadius - token", + "~:width": 177, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 1758, "~:y": 749 } }, + { "~#point": { "~:x": 1935, "~:y": 749 } }, + { "~#point": { "~:x": 1935, "~:y": 931 } }, + { "~#point": { "~:x": 1758, "~:y": 931 } } + ], + "~:r2": 20, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 20, + "~:r1": 0, + "~:id": "~u6ce76eb4-b183-804e-8007-04b6eb5e1080", + "~:parent-id": "~u6ce76eb4-b183-804e-8007-04b6f725fae8", + "~:applied-tokens": { "~:r2": "radius", "~:r3": "radius" }, + "~:frame-id": "~u6ce76eb4-b183-804e-8007-04b6f725fae8", + "~:strokes": [], + "~:x": 1758, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1758, + "~:y": 749, + "~:width": 177, + "~:height": 182, + "~:x1": 1758, + "~:y1": 749, + "~:x2": 1935, + "~:y2": 931 + } + }, + "~:fills": [{ "~:fill-color": "#B1B2B5", "~:fill-opacity": 1 }], + "~:flip-x": null, + "~:height": 182, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b735cf16a0": { + "~#shape": { + "~:y": 698, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "uppercase", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "TOKEN" + } + ], + "~:text-transform": "uppercase", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "ae1m8", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "TOKEN", + "~:width": 60, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 1760, "~:y": 698 } }, + { "~#point": { "~:x": 1820, "~:y": 698 } }, + { "~#point": { "~:x": 1820, "~:y": 720 } }, + { "~#point": { "~:x": 1760, "~:y": 720 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b735cf16a0", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 719.3000030517578, + "~:font-style": "normal", + "~:text-transform": "uppercase", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 59.25, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 1760, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 59.25, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "TOKEN" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 1760, + "~:selrect": { + "~#rect": { + "~:x": 1760, + "~:y": 698, + "~:width": 60, + "~:height": 22, + "~:x1": 1760, + "~:y1": 698, + "~:x2": 1820, + "~:y2": 720 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b5d4549701": { + "~#shape": { + "~:y": 426, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:children": [ + { + "~:line-height": "1.2", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-42dot-sans", + "~:font-size": "18", + "~:font-weight": "700", + "~:text-direction": "ltr", + "~:font-variant-id": "700", + "~:weight": "700", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "42dot Sans", + "~:text": "A text with individual tokens" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-42dot-sans", + "~:key": "1tgq4", + "~:font-size": "18", + "~:font-weight": "700", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "700", + "~:weight": "700", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "42dot Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "shape - text - token - simple", + "~:width": 236.00000000000023, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 1308, "~:y": 426 } }, + { "~#point": { "~:x": 1544.0000000000002, "~:y": 426 } }, + { "~#point": { "~:x": 1544.0000000000002, "~:y": 448 } }, + { "~#point": { "~:x": 1308, "~:y": 448 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b5d4549701", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { + "~:font-family": "font.sans", + "~:font-size": "medium", + "~:font-weight": "bold" + }, + "~:position-data": [ + { + "~#rect": { + "~:y": 448.3000030517578, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "18px", + "~:font-weight": "700", + "~:y1": -0.6999969482421875, + "~:width": 235.56666564941406, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 1308, + "~:x1": 0, + "~:y2": 22.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 235.56666564941406, + "~:direction": "ltr", + "~:font-family": "\"42dot Sans\"", + "~:height": 23, + "~:text": "A text with individual tokens" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 1308, + "~:selrect": { + "~#rect": { + "~:x": 1308, + "~:y": 426, + "~:width": 236.00000000000023, + "~:height": 22, + "~:x1": 1308, + "~:y1": 426, + "~:x2": 1544.0000000000002, + "~:y2": 448 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b05cc6d7db": { + "~#shape": { + "~:y": 924, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "22.5", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "FILL PANEL" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "22.5", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "FILL PANEL", + "~:width": 118, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 165, "~:y": 924 } }, + { "~#point": { "~:x": 283, "~:y": 924 } }, + { "~#point": { "~:x": 283, "~:y": 951 } }, + { "~#point": { "~:x": 165, "~:y": 951 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b05cc6d7db", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "title" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 951, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "22.5px", + "~:font-weight": "400", + "~:y1": 0, + "~:width": 117.78334045410156, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 165, + "~:x1": 0, + "~:y2": 27, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 117.78334045410156, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 27, + "~:text": "FILL PANEL" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 165, + "~:selrect": { + "~#rect": { + "~:x": 165, + "~:y": 924, + "~:width": 118, + "~:height": 27, + "~:x1": 165, + "~:y1": 924, + "~:x2": 283, + "~:y2": 951 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 27, + "~:flip-y": null + } + }, + "~u5403f14e-eb02-80be-8007-0487afa26386": { + "~#shape": { + "~:y": 293, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Board", + "~:width": 2076, + "~:type": "~:frame", + "~:points": [ + { "~#point": { "~:x": 123.99999999999994, "~:y": 293 } }, + { "~#point": { "~:x": 2200, "~:y": 293 } }, + { "~#point": { "~:x": 2200, "~:y": 2756 } }, + { "~#point": { "~:x": 123.99999999999994, "~:y": 2756 } } + ], + "~:r2": 0, + "~:layout-item-h-sizing": "~:fix", + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:layout-item-v-sizing": "~:fix", + "~:r3": 0, + "~:r1": 0, + "~:id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 124, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 124, + "~:y": 293, + "~:width": 2076, + "~:height": 2463, + "~:x1": 124, + "~:y1": 293, + "~:x2": 2200, + "~:y2": 2756 + } + }, + "~:fills": [{ "~:fill-color": "#FFFFFF", "~:fill-opacity": 1 }], + "~:flip-x": null, + "~:height": 2463, + "~:flip-y": null, + "~:shapes": [ + "~u6ce76eb4-b183-804e-8007-04b4a3dbb14b", + "~u6ce76eb4-b183-804e-8007-04b4a3dbb14c", + "~u6ce76eb4-b183-804e-8007-04b4a3dbb14d", + "~u6ce76eb4-b183-804e-8007-04b4a3dbb14e", + "~u6ce76eb4-b183-804e-8007-04b4a3dbb14f", + "~u6ce76eb4-b183-804e-8007-04b4a3dbb150", + "~u6ce76eb4-b183-804e-8007-04b4a3dbb151", + "~u6ce76eb4-b183-804e-8007-04b4a3dbb152", + "~u6ce76eb4-b183-804e-8007-04b4a3dbb153", + "~u6ce76eb4-b183-804e-8007-04b4a3dbb154", + "~u6ce76eb4-b183-804e-8007-04b4a3dbb155", + "~u6ce76eb4-b183-804e-8007-04b05cc6d7db", + "~u6ce76eb4-b183-804e-8007-04b07bc58c4a", + "~u6ce76eb4-b183-804e-8007-04b258ecdfff", + "~u6ce76eb4-b183-804e-8007-04b261218dbe", + "~u6ce76eb4-b183-804e-8007-04b14cc0b236", + "~u6ce76eb4-b183-804e-8007-04b1541dd680", + "~u6ce76eb4-b183-804e-8007-04b15b636f6a", + "~u5403f14e-eb02-80be-8007-0487b9649c53", + "~u5403f14e-eb02-80be-8007-0487bbc6ea5e", + "~u5403f14e-eb02-80be-8007-048a7f80ca80", + "~u6ce76eb4-b183-804e-8007-04b25da1d244", + "~u5403f14e-eb02-80be-8007-048a99988f3d", + "~u6ce76eb4-b183-804e-8007-04b035b88460", + "~u6ce76eb4-b183-804e-8007-04b69f6ca2af", + "~u6ce76eb4-b183-804e-8007-04b04f0c75a9", + "~u6ce76eb4-b183-804e-8007-04b585355aed", + "~u6ce76eb4-b183-804e-8007-04b6d7ecc86e", + "~u6ce76eb4-b183-804e-8007-04b590d30284", + "~u6ce76eb4-b183-804e-8007-04b5d4549701", + "~u6ce76eb4-b183-804e-8007-04b5df2264d0", + "~u5403f14e-eb02-80be-8007-048a9fb22a88", + "~u5403f14e-eb02-80be-8007-048a9fb2671a", + "~u6ce76eb4-b183-804e-8007-04b06814b5f2", + "~u6ce76eb4-b183-804e-8007-04b1c2dba7ca", + "~u6ce76eb4-b183-804e-8007-04b1c96b7975", + "~u6ce76eb4-b183-804e-8007-04b06bdec2b9", + "~u6ce76eb4-b183-804e-8007-04b06e7cbdd6", + "~u6ce76eb4-b183-804e-8007-04b074fecc6d", + "~u6ce76eb4-b183-804e-8007-04b6f725fae8", + "~u6ce76eb4-b183-804e-8007-04b72426c414", + "~u6ce76eb4-b183-804e-8007-04b72f0b0939", + "~u6ce76eb4-b183-804e-8007-04b735cf16a0" + ] + } + }, + "~u5403f14e-eb02-80be-8007-048a9fb22a88": { + "~#shape": { + "~:y": 733, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - blur", + "~:width": 221, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 770, "~:y": 733 } }, + { "~#point": { "~:x": 991, "~:y": 733 } }, + { "~#point": { "~:x": 991, "~:y": 882 } }, + { "~#point": { "~:x": 770, "~:y": 882 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:blur": { + "~:id": "~u5403f14e-eb02-80be-8007-048aa99a9007", + "~:type": "~:layer-blur", + "~:value": 4, + "~:hidden": false + }, + "~:r1": 0, + "~:id": "~u5403f14e-eb02-80be-8007-048a9fb22a88", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 770, + "~:proportion": 1, + "~:shadow": [], + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 770, + "~:y": 733, + "~:width": 221, + "~:height": 149, + "~:x1": 770, + "~:y1": 733, + "~:x2": 991, + "~:y2": 882 + } + }, + "~:fills": [{ "~:fill-color": "#B1B2B5", "~:fill-opacity": 1 }], + "~:flip-x": null, + "~:height": 149, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b06bdec2b9": { + "~#shape": { + "~:y": 994, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - fill - multiple", + "~:width": 184, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 381, "~:y": 994 } }, + { "~#point": { "~:x": 565, "~:y": 994 } }, + { "~#point": { "~:x": 565, "~:y": 1186 } }, + { "~#point": { "~:x": 381, "~:y": 1186 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u6ce76eb4-b183-804e-8007-04b06bdec2b9", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 381, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 381, + "~:y": 994, + "~:width": 184, + "~:height": 192, + "~:x1": 381, + "~:y1": 994, + "~:x2": 565, + "~:y2": 1186 + } + }, + "~:fills": [ + { + "~:fill-opacity": 1, + "~:fill-image": { + "~:id": "~u7b2da435-6186-815a-8007-0daa95d55cc0", + "~:width": 1200, + "~:height": 957, + "~:mtype": "image/png", + "~:name": "bloom.png", + "~:keep-aspect-ratio": true + } + }, + { + "~:fill-color-gradient": { + "~:start-x": 0.5, + "~:start-y": 0, + "~:end-x": 0.5, + "~:end-y": 1, + "~:width": 1, + "~:type": "~:linear", + "~:stops": [ + { "~:color": "#B1B2B5", "~:offset": 0, "~:opacity": 1 }, + { "~:color": "#B1B2B5", "~:offset": 1, "~:opacity": 0 } + ] + } + }, + { "~:fill-color": "#d3d651", "~:fill-opacity": 1 } + ], + "~:flip-x": null, + "~:height": 192, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b72f0b0939": { + "~#shape": { + "~:y": 698, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "uppercase", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "SINGLE" + } + ], + "~:text-transform": "uppercase", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "ae1m8", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "SINGLE", + "~:width": 62, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 1535, "~:y": 698 } }, + { "~#point": { "~:x": 1597, "~:y": 698 } }, + { "~#point": { "~:x": 1597, "~:y": 720 } }, + { "~#point": { "~:x": 1535, "~:y": 720 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b72f0b0939", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 719.3000030517578, + "~:font-style": "normal", + "~:text-transform": "uppercase", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 61.71665954589844, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 1535, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 61.71665954589844, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "SINGLE" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 1535, + "~:selrect": { + "~#rect": { + "~:x": 1535, + "~:y": 698, + "~:width": 62, + "~:height": 22, + "~:x1": 1535, + "~:y1": 698, + "~:x2": 1597, + "~:y2": 720 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b261218dbe": { + "~#shape": { + "~:y": 699, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "multiple" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "multiple", + "~:width": 67, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 417, "~:y": 699 } }, + { "~#point": { "~:x": 484, "~:y": 699 } }, + { "~#point": { "~:x": 484, "~:y": 721 } }, + { "~#point": { "~:x": 417, "~:y": 721 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b261218dbe", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 720.3000030517578, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 66.48333740234375, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 417, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 66.48333740234375, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "multiple" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 417, + "~:selrect": { + "~#rect": { + "~:x": 417, + "~:y": 699, + "~:width": 67, + "~:height": 22, + "~:x1": 417, + "~:y1": 699, + "~:x2": 484, + "~:y2": 721 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b258ecdfff": { + "~#shape": { + "~:y": 701, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "single" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "single", + "~:width": 49, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 160, "~:y": 701 } }, + { "~#point": { "~:x": 209, "~:y": 701 } }, + { "~#point": { "~:x": 209, "~:y": 723 } }, + { "~#point": { "~:x": 160, "~:y": 723 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b258ecdfff", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 722.3000030517578, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 48.48333740234375, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 160, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 48.48333740234375, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "single" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 160, + "~:selrect": { + "~#rect": { + "~:x": 160, + "~:y": 701, + "~:width": 49, + "~:height": 22, + "~:x1": 160, + "~:y1": 701, + "~:x2": 209, + "~:y2": 723 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u5403f14e-eb02-80be-8007-0487bbc6ea60": { + "~#shape": { + "~:y": 382, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 158, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 778, "~:y": 382 } }, + { "~#point": { "~:x": 936, "~:y": 382 } }, + { "~#point": { "~:x": 936, "~:y": 544 } }, + { "~#point": { "~:x": 778, "~:y": 544 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u5403f14e-eb02-80be-8007-0487bbc6ea60", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487bbc6ea5e", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487bbc6ea5e", + "~:strokes": [], + "~:x": 778, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 778, + "~:y": 382, + "~:width": 158, + "~:height": 162, + "~:x1": 778, + "~:y1": 382, + "~:x2": 936, + "~:y2": 544 + } + }, + "~:fills": [{ "~:fill-color": "#B1B2B5", "~:fill-opacity": 1 }], + "~:flip-x": null, + "~:height": 162, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b06814b5f2": { + "~#shape": { + "~:y": 994, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - fill - single - solid", + "~:width": 184, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 177, "~:y": 994 } }, + { "~#point": { "~:x": 361, "~:y": 994 } }, + { "~#point": { "~:x": 361, "~:y": 1186 } }, + { "~#point": { "~:x": 177, "~:y": 1186 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u6ce76eb4-b183-804e-8007-04b06814b5f2", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 177, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 177, + "~:y": 994, + "~:width": 184, + "~:height": 192, + "~:x1": 177, + "~:y1": 994, + "~:x2": 361, + "~:y2": 1186 + } + }, + "~:fills": [{ "~:fill-color": "#0438d5", "~:fill-opacity": 1 }], + "~:flip-x": null, + "~:height": 192, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b72426c414": { + "~#shape": { + "~:y": 698, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "uppercase", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "COMBINED" + } + ], + "~:text-transform": "uppercase", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "ae1m8", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "COMBINED", + "~:width": 97, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 1309, "~:y": 698 } }, + { "~#point": { "~:x": 1406, "~:y": 698 } }, + { "~#point": { "~:x": 1406, "~:y": 720 } }, + { "~#point": { "~:x": 1309, "~:y": 720 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b72426c414", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 719.3000030517578, + "~:font-style": "normal", + "~:text-transform": "uppercase", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 96.51666259765625, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 1309, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 96.51666259765625, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "COMBINED" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:x": 1309, + "~:selrect": { + "~#rect": { + "~:x": 1309, + "~:y": 698, + "~:width": 97, + "~:height": 22, + "~:x1": 1309, + "~:y1": 698, + "~:x2": 1406, + "~:y2": 720 + } + }, + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b4a3dbb154": { + "~#shape": { + "~:y": 1773, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - stroke - style", + "~:width": 184, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 596, "~:y": 1773 } }, + { "~#point": { "~:x": 780, "~:y": 1773 } }, + { "~#point": { "~:x": 780, "~:y": 1965 } }, + { "~#point": { "~:x": 596, "~:y": 1965 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u6ce76eb4-b183-804e-8007-04b4a3dbb154", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 1, + "~:stroke-color": "#e714ce", + "~:stroke-color-ref-id": "~u6ce76eb4-b183-804e-8007-04b18234e791", + "~:stroke-color-ref-file": "~u7b2da435-6186-815a-8007-0daa95d2f26d", + "~:stroke-opacity": 1 + } + ], + "~:x": 596, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 596, + "~:y": 1773, + "~:width": 184, + "~:height": 192, + "~:x1": 596, + "~:y1": 1773, + "~:x2": 780, + "~:y2": 1965 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 192, + "~:flip-y": null + } + }, + "~u5403f14e-eb02-80be-8007-048a7f80ca80": { + "~#shape": { + "~:y": 723, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - shadow - single", + "~:width": 221, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 160, "~:y": 723 } }, + { "~#point": { "~:x": 381, "~:y": 723 } }, + { "~#point": { "~:x": 381, "~:y": 872 } }, + { "~#point": { "~:x": 160, "~:y": 872 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u5403f14e-eb02-80be-8007-048a7f80ca80", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 160, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u5403f14e-eb02-80be-8007-049721cc6126", + "~:style": "~:drop-shadow", + "~:color": { "~:color": "#000000", "~:opacity": 0.2 }, + "~:offset-x": 4, + "~:offset-y": 4, + "~:blur": 4, + "~:spread": 0, + "~:hidden": false + } + ], + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 160, + "~:y": 723, + "~:width": 221, + "~:height": 149, + "~:x1": 160, + "~:y1": 723, + "~:x2": 381, + "~:y2": 872 + } + }, + "~:fills": [{ "~:fill-color": "#B1B2B5", "~:fill-opacity": 1 }], + "~:flip-x": null, + "~:height": 149, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b4a3dbb155": { + "~#shape": { + "~:y": 1773, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - stroke - token", + "~:width": 184, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 808, "~:y": 1773 } }, + { "~#point": { "~:x": 992, "~:y": 1773 } }, + { "~#point": { "~:x": 992, "~:y": 1965 } }, + { "~#point": { "~:x": 808, "~:y": 1965 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u6ce76eb4-b183-804e-8007-04b4a3dbb155", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:stroke-color": "primary" }, + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 1, + "~:stroke-color": "#fe0000", + "~:stroke-opacity": 1 + } + ], + "~:x": 808, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 808, + "~:y": 1773, + "~:width": 184, + "~:height": 192, + "~:x1": 808, + "~:y1": 1773, + "~:x2": 992, + "~:y2": 1965 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 192, + "~:flip-y": null + } + }, + "~u5403f14e-eb02-80be-8007-0487b37a338b": { + "~#shape": { + "~:y": 382, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 158, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 150, "~:y": 382 } }, + { "~#point": { "~:x": 308, "~:y": 382 } }, + { "~#point": { "~:x": 308, "~:y": 544 } }, + { "~#point": { "~:x": 150, "~:y": 544 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u5403f14e-eb02-80be-8007-0487b37a338b", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487b9649c53", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487b9649c53", + "~:strokes": [], + "~:x": 150, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 150, + "~:y": 382, + "~:width": 158, + "~:height": 162, + "~:x1": 150, + "~:y1": 382, + "~:x2": 308, + "~:y2": 544 + } + }, + "~:fills": [{ "~:fill-color": "#B1B2B5", "~:fill-opacity": 1 }], + "~:flip-x": null, + "~:height": 162, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b4a3dbb152": { + "~#shape": { + "~:y": 2209, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - stroke - single - image", + "~:width": 184, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 191, "~:y": 2209 } }, + { "~#point": { "~:x": 375, "~:y": 2209 } }, + { "~#point": { "~:x": 375, "~:y": 2401 } }, + { "~#point": { "~:x": 191, "~:y": 2401 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u6ce76eb4-b183-804e-8007-04b4a3dbb152", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 1, + "~:stroke-opacity": 1, + "~:stroke-image": { + "~:id": "~u7b2da435-6186-815a-8007-0daa95d55cc2", + "~:width": 1300, + "~:height": 1137, + "~:mtype": "image/png", + "~:name": "Screenshot from 2025-09-26 09-41-38.png", + "~:keep-aspect-ratio": true + } + } + ], + "~:x": 191, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 191, + "~:y": 2209, + "~:width": 184, + "~:height": 192, + "~:x1": 191, + "~:y1": 2209, + "~:x2": 375, + "~:y2": 2401 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 192, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b06e7cbdd6": { + "~#shape": { + "~:y": 994, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - fill - style", + "~:width": 184, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 582, "~:y": 994 } }, + { "~#point": { "~:x": 766, "~:y": 994 } }, + { "~#point": { "~:x": 766, "~:y": 1186 } }, + { "~#point": { "~:x": 582, "~:y": 1186 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u6ce76eb4-b183-804e-8007-04b06e7cbdd6", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 582, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 582, + "~:y": 994, + "~:width": 184, + "~:height": 192, + "~:x1": 582, + "~:y1": 994, + "~:x2": 766, + "~:y2": 1186 + } + }, + "~:fills": [ + { + "~:fill-color": "#e714ce", + "~:fill-color-ref-id": "~u6ce76eb4-b183-804e-8007-04b18234e791", + "~:fill-color-ref-file": "~u7b2da435-6186-815a-8007-0daa95d2f26d", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 192, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b14cc0b236": { + "~#shape": { + "~:y": 972, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "multiple" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "multiple", + "~:width": 67, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 381, "~:y": 972 } }, + { "~#point": { "~:x": 448, "~:y": 972 } }, + { "~#point": { "~:x": 448, "~:y": 994 } }, + { "~#point": { "~:x": 381, "~:y": 994 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b14cc0b236", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 993.3000030517578, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 66.48333740234375, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 381, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 66.48333740234375, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "multiple" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 381, + "~:selrect": { + "~#rect": { + "~:x": 381, + "~:y": 972, + "~:width": 67, + "~:height": 22, + "~:x1": 381, + "~:y1": 972, + "~:x2": 448, + "~:y2": 994 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b4a3dbb153": { + "~#shape": { + "~:y": 1773, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - stroke - multiple", + "~:width": 184, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 395, "~:y": 1773 } }, + { "~#point": { "~:x": 579, "~:y": 1773 } }, + { "~#point": { "~:x": 579, "~:y": 1965 } }, + { "~#point": { "~:x": 395, "~:y": 1965 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u6ce76eb4-b183-804e-8007-04b4a3dbb153", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [ + { + "~:stroke-alignment": "~:inner", + "~:stroke-style": "~:solid", + "~:stroke-color": "#000000", + "~:stroke-opacity": 1, + "~:stroke-width": 1 + }, + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 1, + "~:stroke-color-gradient": { + "~:start-x": 0.5, + "~:start-y": 0, + "~:end-x": 0.5, + "~:end-y": 1, + "~:width": 1, + "~:type": "~:linear", + "~:stops": [ + { "~:color": "#000000", "~:offset": 0, "~:opacity": 1 }, + { "~:color": "#000000", "~:offset": 1, "~:opacity": 0 } + ] + } + }, + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 1, + "~:stroke-opacity": 1, + "~:stroke-image": { + "~:id": "~u7b2da435-6186-815a-8007-0daa95d55cc1", + "~:width": 1024, + "~:height": 999, + "~:mtype": "image/png", + "~:name": "venn.png", + "~:keep-aspect-ratio": true + } + } + ], + "~:x": 395, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 395, + "~:y": 1773, + "~:width": 184, + "~:height": 192, + "~:x1": 395, + "~:y1": 1773, + "~:x2": 579, + "~:y2": 1965 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 192, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b4a3dbb150": { + "~#shape": { + "~:y": 1773, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - stroke - single - solid", + "~:width": 184, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 191, "~:y": 1773 } }, + { "~#point": { "~:x": 375, "~:y": 1773 } }, + { "~#point": { "~:x": 375, "~:y": 1965 } }, + { "~#point": { "~:x": 191, "~:y": 1965 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u6ce76eb4-b183-804e-8007-04b4a3dbb150", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [ + { + "~:stroke-alignment": "~:inner", + "~:stroke-style": "~:solid", + "~:stroke-color": "#000000", + "~:stroke-opacity": 1, + "~:stroke-width": 1 + } + ], + "~:x": 191, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 191, + "~:y": 1773, + "~:width": 184, + "~:height": 192, + "~:x1": 191, + "~:y1": 1773, + "~:x2": 375, + "~:y2": 1965 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 192, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b1c96b7975": { + "~#shape": { + "~:y": 1430, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - fill - single - image", + "~:width": 184, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 177, "~:y": 1430 } }, + { "~#point": { "~:x": 361, "~:y": 1430 } }, + { "~#point": { "~:x": 361, "~:y": 1622 } }, + { "~#point": { "~:x": 177, "~:y": 1622 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u6ce76eb4-b183-804e-8007-04b1c96b7975", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 177, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 177, + "~:y": 1430, + "~:width": 184, + "~:height": 192, + "~:x1": 177, + "~:y1": 1430, + "~:x2": 361, + "~:y2": 1622 + } + }, + "~:fills": [ + { + "~:fill-opacity": 1, + "~:fill-image": { + "~:id": "~u7b2da435-6186-815a-8007-0daa95d55cbf", + "~:width": 1200, + "~:height": 957, + "~:mtype": "image/png", + "~:name": "bloom.png", + "~:keep-aspect-ratio": true + } + } + ], + "~:flip-x": null, + "~:height": 192, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b5df2264d0": { + "~#shape": { + "~:y": 465, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans", + "~:text": "A text using an amazing composite token" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-albert-sans", + "~:key": "1tgq4", + "~:font-size": "18", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:font-family": "Albert Sans" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "shape - text - token - composite", + "~:width": 342, + "~:type": "~:text", + "~:points": [ + { "~#point": { "~:x": 1308, "~:y": 465 } }, + { "~#point": { "~:x": 1650, "~:y": 465 } }, + { "~#point": { "~:x": 1650, "~:y": 487 } }, + { "~#point": { "~:x": 1308, "~:y": 487 } } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u6ce76eb4-b183-804e-8007-04b5df2264d0", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:applied-tokens": { "~:typography": "body" }, + "~:position-data": [ + { + "~#rect": { + "~:y": 486.3000030517578, + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-size": "18px", + "~:font-weight": "400", + "~:y1": 0.3000030517578125, + "~:width": 341.1499938964844, + "~:text-decoration": "none", + "~:letter-spacing": "normal", + "~:x": 1308, + "~:x1": 0, + "~:y2": 21.300003051757812, + "~:fills": [ + { "~:fill-color": "#000000", "~:fill-opacity": 1 } + ], + "~:x2": 341.1499938964844, + "~:direction": "ltr", + "~:font-family": "\"Albert Sans\"", + "~:height": 21, + "~:text": "A text using an amazing composite token" + } + } + ], + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [], + "~:x": 1308, + "~:selrect": { + "~#rect": { + "~:x": 1308, + "~:y": 465, + "~:width": 342, + "~:height": 22, + "~:x1": 1308, + "~:y1": 465, + "~:x2": 1650, + "~:y2": 487 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 22, + "~:flip-y": null + } + }, + "~u6ce76eb4-b183-804e-8007-04b4a3dbb151": { + "~#shape": { + "~:y": 1993, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "shape - stroke - single - gradient", + "~:width": 184, + "~:type": "~:rect", + "~:points": [ + { "~#point": { "~:x": 194, "~:y": 1993 } }, + { "~#point": { "~:x": 378, "~:y": 1993 } }, + { "~#point": { "~:x": 378, "~:y": 2185 } }, + { "~#point": { "~:x": 194, "~:y": 2185 } } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u6ce76eb4-b183-804e-8007-04b4a3dbb151", + "~:parent-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:frame-id": "~u5403f14e-eb02-80be-8007-0487afa26386", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 1, + "~:stroke-color-gradient": { + "~:start-x": 0.5, + "~:start-y": 0, + "~:end-x": 0.5, + "~:end-y": 1, + "~:width": 1, + "~:type": "~:linear", + "~:stops": [ + { "~:color": "#000000", "~:offset": 0, "~:opacity": 1 }, + { "~:color": "#000000", "~:offset": 1, "~:opacity": 0 } + ] + } + } + ], + "~:x": 194, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 194, + "~:y": 1993, + "~:width": 184, + "~:height": 192, + "~:x1": 194, + "~:y1": 1993, + "~:x2": 378, + "~:y2": 2185 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 192, + "~:flip-y": null + } + } + }, + "~:id": "~uce79274b-11ab-8088-8007-0487ad43f789", + "~:name": "Page 1" + } + }, + "~:id": "~u7b2da435-6186-815a-8007-0daa95d2f26d", + "~:options": { "~:components-v2": true, "~:base-font-size": "16px" }, + "~:tokens-lib": { + "~#penpot/tokens-lib": { + "~:sets": { + "~#ordered-map": [ + [ + "S-Global", + { + "~#penpot/token-set": { + "~:id": "~u5403f14e-eb02-80be-8007-0494f09cefca", + "~:name": "Global", + "~:description": "", + "~:modified-at": "~m1761570802864", + "~:tokens": { + "~#ordered-map": [ + [ + "col-gap", + { + "~#penpot/token": { + "~:id": "~u5403f14e-eb02-80be-8007-0494fe496430", + "~:name": "col-gap", + "~:type": "~:dimensions", + "~:value": "29", + "~:description": "", + "~:modified-at": "~m1761561777445" + } + } + ], + [ + "font.multiplier", + { + "~#penpot/token": { + "~:id": "~u6ce76eb4-b183-804e-8007-04b0aa8a24a7", + "~:name": "font.multiplier", + "~:type": "~:number", + "~:value": "1.25", + "~:description": "", + "~:modified-at": "~m1761569031720" + } + } + ], + [ + "font.size", + { + "~#penpot/token": { + "~:id": "~u6ce76eb4-b183-804e-8007-04b0c3cdd9d1", + "~:name": "font.size", + "~:type": "~:number", + "~:value": "18", + "~:description": "", + "~:modified-at": "~m1761569057591" + } + } + ], + [ + "medium", + { + "~#penpot/token": { + "~:id": "~u6ce76eb4-b183-804e-8007-04b0ec55d409", + "~:name": "medium", + "~:type": "~:font-size", + "~:value": "{font.size}", + "~:description": "", + "~:modified-at": "~m1761569099095" + } + } + ], + [ + "large", + { + "~#penpot/token": { + "~:id": "~u6ce76eb4-b183-804e-8007-04b103dc0613", + "~:name": "large", + "~:type": "~:font-size", + "~:value": "{medium} * {font.multiplier}", + "~:description": "", + "~:modified-at": "~m1761569123184" + } + } + ], + [ + "body", + { + "~#penpot/token": { + "~:id": "~u6ce76eb4-b183-804e-8007-04b1277b94f1", + "~:name": "body", + "~:type": "~:typography", + "~:value": { + "~:font-family": ["Albert Sans"], + "~:font-size": "{medium}" + }, + "~:description": "", + "~:modified-at": "~m1761569159662" + } + } + ], + [ + "title", + { + "~#penpot/token": { + "~:id": "~u6ce76eb4-b183-804e-8007-04b138ad1f25", + "~:name": "title", + "~:type": "~:typography", + "~:value": { + "~:font-family": ["Albert Sans"], + "~:font-size": "{large}" + }, + "~:description": "", + "~:modified-at": "~m1761569177268" + } + } + ], + [ + "primary", + { + "~#penpot/token": { + "~:id": "~u6ce76eb4-b183-804e-8007-04b1985fc76d", + "~:name": "primary", + "~:type": "~:color", + "~:value": "rgb(254, 0, 0)", + "~:description": "", + "~:modified-at": "~m1761569275263" + } + } + ], + [ + "font.sans", + { + "~#penpot/token": { + "~:id": "~u6ce76eb4-b183-804e-8007-04b65149e6ab", + "~:name": "font.sans", + "~:type": "~:font-family", + "~:value": ["42dot Sans"], + "~:description": "", + "~:modified-at": "~m1761570513191" + } + } + ], + [ + "bold", + { + "~#penpot/token": { + "~:id": "~u6ce76eb4-b183-804e-8007-04b66296365e", + "~:name": "bold", + "~:type": "~:font-weight", + "~:value": "700", + "~:description": "", + "~:modified-at": "~m1761570530904" + } + } + ], + [ + "radius", + { + "~#penpot/token": { + "~:id": "~u6ce76eb4-b183-804e-8007-04b769351486", + "~:name": "radius", + "~:type": "~:border-radius", + "~:value": "20px", + "~:description": "", + "~:modified-at": "~m1761570799828" + } + } + ] + ] + } + } + } + ] + ] + }, + "~:themes": { + "~#ordered-map": [ + [ + "", + { + "~#ordered-map": [ + [ + "__PENPOT__HIDDEN__TOKEN__THEME__", + { + "~#penpot/token-theme": { + "~:id": "~u00000000-0000-0000-0000-000000000000", + "~:name": "__PENPOT__HIDDEN__TOKEN__THEME__", + "~:group": "", + "~:description": "", + "~:is-source": false, + "~:external-id": "", + "~:modified-at": "~m1761561766496", + "~:sets": { "~#set": ["Global"] } + } + } + ] + ] + } + ] + ] + }, + "~:active-themes": { "~#set": ["/__PENPOT__HIDDEN__TOKEN__THEME__"] } + } + }, + "~:colors": { + "~u6ce76eb4-b183-804e-8007-04b18234e791": { + "~:path": "", + "~:color": "#e714ce", + "~:name": "pink", + "~:modified-at": "~m1761569259275", + "~:opacity": 1, + "~:id": "~u6ce76eb4-b183-804e-8007-04b18234e791" + } + } + } +} diff --git a/frontend/playwright/ui/specs/inspect-tab.spec.js b/frontend/playwright/ui/specs/inspect-tab.spec.js new file mode 100644 index 0000000000..e2035bd637 --- /dev/null +++ b/frontend/playwright/ui/specs/inspect-tab.spec.js @@ -0,0 +1,646 @@ +import { test, expect } from "@playwright/test"; +import { WorkspacePage } from "../pages/WorkspacePage"; + +const flags = ["enable-inspect-styles"]; + +test.beforeEach(async ({ page }) => { + await WorkspacePage.init(page); +}); + +const setupFile = async (workspacePage) => { + await workspacePage.setupEmptyFile(); + await workspacePage.mockConfigFlags(flags); + await workspacePage.mockRPC( + /get\-file\?/, + "workspace/get-file-inspect-tab.json", + ); + await workspacePage.goToWorkspace({ + fileId: "7b2da435-6186-815a-8007-0daa95d2f26d", + pageId: "ce79274b-11ab-8088-8007-0487ad43f789", + }); +}; + +const shapeToLayerName = { + flex: "shape - layout - flex", + flexElement: "shape - layout - flex - element", + grid: "shape - layout - grid", + gridElement: "shape - layout - grid - element", + shadow: "shape - shadow - single", + shadowMultiple: "shape - shadow - multiple", + blur: "shape - blur", + borderRadius: { + main: "shape - borderRadius", + individual: "shape - borderRadius - individual", + multiple: "shape - borderRadius - multiple", + token: "shape - borderRadius - token", + }, + fill: { + solid: "shape - fill - single - solid", + gradient: "shape - fill - single - gradient", + image: "shape - fill - single - image", + multiple: "shape - fill - multiple", + style: "shape - fill - style", + token: "shape - fill - token", + }, + stroke: { + solid: "shape - stroke - single - solid", + gradient: "shape - stroke - single - gradient", + image: "shape - stroke - single - image", + multiple: "shape - stroke - multiple", + style: "shape - stroke - style", + token: "shape - stroke - token", + }, + text: { + simple: "shape - text", + token: "shape - text - token - simple", + compositeToken: "shape - text - token - composite", + }, +}; + +/** + * Copy the shorthand CSS from a full panel property + * @param {object} panel - The style panel locator + */ +const copyShorthand = async (panel) => { + const panelShorthandButton = panel.getByRole("button", { + name: "Copy CSS shorthand to clipboard", + }); + await panelShorthandButton.click(); +}; + +/** + * Copy the CSS property from a property row by clicking its copy button + * @param {object} panel - The style panel locator + * @param {string} property - The property name to filter by + */ +const copyPropertyFromPropertyRow = async (panel, property) => { + const propertyRow = panel + .getByTestId("property-row") + .filter({ hasText: property }); + const copyButton = propertyRow.getByRole("button"); + await copyButton.click(); +}; + +/** + * Returns the style panel by its title + * @param {WorkspacePage} workspacePage - The workspace page instance + * @param {string} title - The title of the panel to retrieve + */ +const getPanelByTitle = async (workspacePage, title) => { + const sidebar = workspacePage.page.getByTestId("right-sidebar"); + const article = sidebar.getByRole("article"); + const panel = article.filter({ hasText: title }); + return panel; +}; + +/** + * Selects a layer in the layers panel + * @param {WorkspacePage} workspacePage - The workspace page instance + * @param {string} layerName - The name of the layer to select + * @param {string} parentLayerName - The name of the parent layer to expand (optional) + */ +const selectLayer = async (workspacePage, layerName, parentLayerName) => { + await workspacePage.clickToggableLayer("Board"); + if (parentLayerName) { + await workspacePage.clickToggableLayer(parentLayerName); + } + await workspacePage.clickLeafLayer(layerName); +}; + +/** + * Opens the Inspect tab + * @param {WorkspacePage} workspacePage - The workspace page instance + */ + +const openInspectTab = async (workspacePage) => { + const inspectButton = workspacePage.page.getByRole("tab", { + name: "Inspect", + }); + await inspectButton.click(); +}; + +test.describe("Inspect tab - Styles", () => { + test("Open Inspect tab", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.flex); + await openInspectTab(workspacePage); + + const switcherLabel = workspacePage.page.getByText("Layer info", { + exact: true, + }); + await expect(switcherLabel).toBeVisible(); + await expect(switcherLabel).toHaveText("Layer info"); + }); + test.describe("Inspect tab - Flex", () => { + test("Shape Layout Flex ", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.flex); + await openInspectTab(workspacePage); + + const panel = await getPanelByTitle(workspacePage, "Layout"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + }); + + test("Shape Layout Flex Element", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer( + workspacePage, + shapeToLayerName.flexElement, + shapeToLayerName.flex, + ); + await openInspectTab(workspacePage); + + const panel = await getPanelByTitle(workspacePage, "Flex Element"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + }); + }); + + test("Shape Layout Grid", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.grid); + await openInspectTab(workspacePage); + + const panel = await getPanelByTitle(workspacePage, "Layout"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + }); + + test.describe("Inspect tab - Shadow", () => { + test("Shape Shadow - Single shadow", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.shadow); + await openInspectTab(workspacePage); + + const panel = await getPanelByTitle(workspacePage, "Shadow"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(2); + }); + + test("Shape Shadow - Multiple shadow", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.shadowMultiple); + await openInspectTab(workspacePage); + + const panel = await getPanelByTitle(workspacePage, "Shadow"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(4); + }); + }); + + test("Shape - Blur", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.blur); + await openInspectTab(workspacePage); + + const panel = await getPanelByTitle(workspacePage, "Blur"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + }); + + test.describe("Inspect tab - Border radius", () => { + test("Shape - Border radius - individual", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer( + workspacePage, + shapeToLayerName.borderRadius.individual, + shapeToLayerName.borderRadius.main, + ); + await openInspectTab(workspacePage); + + const panel = await getPanelByTitle(workspacePage, "Size & position"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(2); + + const borderStartStartRadius = propertyRow.filter({ + hasText: "Border start start radius", + }); + await expect(borderStartStartRadius).toBeVisible(); + + const borderEndEndRadius = propertyRow.filter({ + hasText: "Border end end radius", + }); + await expect(borderEndEndRadius).toBeVisible(); + }); + + test("Shape - Border radius - multiple", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer( + workspacePage, + shapeToLayerName.borderRadius.multiple, + shapeToLayerName.borderRadius.main, + ); + await openInspectTab(workspacePage); + + const panel = await getPanelByTitle(workspacePage, "Size & position"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(4); + + const borderStartStartRadius = propertyRow.filter({ + hasText: "Border start start radius", + }); + await expect(borderStartStartRadius).toBeVisible(); + + const borderStartEndRadius = propertyRow.filter({ + hasText: "Border start end radius", + }); + await expect(borderStartEndRadius).toBeVisible(); + + const borderEndEndRadius = propertyRow.filter({ + hasText: "Border end end radius", + }); + await expect(borderEndEndRadius).toBeVisible(); + + const borderEndStartRadius = propertyRow.filter({ + hasText: "Border end start radius", + }); + await expect(borderEndStartRadius).toBeVisible(); + }); + + test("Shape - Border radius - token", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer( + workspacePage, + shapeToLayerName.borderRadius.token, + shapeToLayerName.borderRadius.main, + ); + await openInspectTab(workspacePage); + + const panel = await getPanelByTitle(workspacePage, "Size & position"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(4); + + const borderStartEndRadius = propertyRow.filter({ + hasText: "Border start end radius", + }); + await expect(borderStartEndRadius).toBeVisible(); + expect(borderStartEndRadius).toContainText("radius"); + + const borderEndStartRadius = propertyRow.filter({ + hasText: "Border end start radius", + }); + expect(borderEndStartRadius).toContainText("radius"); + await expect(borderEndStartRadius).toBeVisible(); + }); + }); + + test.describe("Inspect tab - Fill", () => { + test("Shape - Fill - Solid", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.fill.solid); + await openInspectTab(workspacePage); + const panel = await getPanelByTitle(workspacePage, "Fill"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + }); + + test("Shape - Fill - Gradient", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.fill.gradient); + await openInspectTab(workspacePage); + const panel = await getPanelByTitle(workspacePage, "Fill"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + }); + + test("Shape - Fill - Image", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.fill.image); + await openInspectTab(workspacePage); + const panel = await getPanelByTitle(workspacePage, "Fill"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + + const imagePreview = panel.getByRole("img", { + name: "Preview of the shape's fill", + }); + await expect(imagePreview).toBeVisible(); + }); + + test("Shape - Fill - Multiple", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.fill.multiple); + await openInspectTab(workspacePage); + const panel = await getPanelByTitle(workspacePage, "Fill"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(3); + + const imagePreview = panel.getByRole("img", { + name: "Preview of the shape's fill", + }); + await expect(imagePreview).toBeVisible(); + }); + + test("Shape - Fill - Token", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.fill.token); + await openInspectTab(workspacePage); + const panel = await getPanelByTitle(workspacePage, "Fill"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + + const fillToken = propertyRow.filter({ + hasText: "Background", + }); + expect(fillToken).toContainText("primary"); + await expect(fillToken).toBeVisible(); + }); + }); + + test.describe("Inspect tab - Stroke", () => { + test("Shape - Stroke - Solid", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.stroke.solid); + await openInspectTab(workspacePage); + const panel = await getPanelByTitle(workspacePage, "Stroke"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + }); + + test("Shape - Stroke - Gradient", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.stroke.gradient); + await openInspectTab(workspacePage); + const panel = await getPanelByTitle(workspacePage, "Stroke"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + }); + + test("Shape - Stroke - Image", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.stroke.image); + await openInspectTab(workspacePage); + const panel = await getPanelByTitle(workspacePage, "Stroke"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + + const imagePreview = panel.getByRole("img", { + name: "Preview of the shape's fill", + }); + await expect(imagePreview).toBeVisible(); + }); + + test("Shape - Stroke - Multiple", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.stroke.multiple); + await openInspectTab(workspacePage); + const panel = await getPanelByTitle(workspacePage, "Stroke"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(3); + + const imagePreview = panel.getByRole("img", { + name: "Preview of the shape's fill", + }); + await expect(imagePreview).toBeVisible(); + }); + + test("Shape - Stroke - Token", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.stroke.token); + await openInspectTab(workspacePage); + const panel = await getPanelByTitle(workspacePage, "Stroke"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + + const fillToken = propertyRow.filter({ + hasText: "Border color", + }); + expect(fillToken).toContainText("primary"); + await expect(fillToken).toBeVisible(); + }); + }); + + test.describe("Inspect tab - Typography", () => { + test("Text - simple", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.text.simple); + await openInspectTab(workspacePage); + const panel = await getPanelByTitle(workspacePage, "Text"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + + const textPreview = panel.getByRole("presentation"); + await expect(textPreview).toBeVisible(); + }); + + test("Text - token", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.text.token); + await openInspectTab(workspacePage); + const panel = await getPanelByTitle(workspacePage, "Text"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + + // Test with multiple tokens + const fontFamilyToken = propertyRow.filter({ + hasText: "Font family", + }); + await expect(fontFamilyToken).toBeVisible(); + expect(fontFamilyToken).toContainText("font.sans"); + + const fontSizeToken = propertyRow.filter({ + hasText: "Font size", + }); + await expect(fontSizeToken).toBeVisible(); + expect(fontSizeToken).toContainText("medium"); + + const fontWeightToken = propertyRow.filter({ + hasText: "Font weight", + }); + await expect(fontWeightToken).toBeVisible(); + expect(fontWeightToken).toContainText("bold"); + + const textPreview = panel.getByRole("presentation"); + await expect(textPreview).toBeVisible(); + }); + test("Text - composite token", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.text.compositeToken); + await openInspectTab(workspacePage); + const panel = await getPanelByTitle(workspacePage, "Text"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + + const compositeTypographyRow = propertyRow.filter({ + hasText: "Typography", + }); + await expect(compositeTypographyRow).toBeVisible(); + expect(compositeTypographyRow).toContainText("body"); + + const textPreview = panel.getByRole("presentation"); + await expect(textPreview).toBeVisible(); + }); + }); + + test.describe("Copy properties", () => { + test("Copy single property", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.flex); + await openInspectTab(workspacePage); + + const panel = await getPanelByTitle(workspacePage, "Layout"); + await expect(panel).toBeVisible(); + + await copyPropertyFromPropertyRow(panel, "Display"); + + const shorthand = await page.evaluate(() => + navigator.clipboard.readText(), + ); + expect(shorthand).toBe("display: flex;"); + }); + test("Copy shorthand - multiple properties", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.shadow); + await openInspectTab(workspacePage); + + const panel = await getPanelByTitle(workspacePage, "Shadow"); + await expect(panel).toBeVisible(); + + await copyShorthand(panel); + + const shorthand = await page.evaluate(() => + navigator.clipboard.readText(), + ); + expect(shorthand).toBe("box-shadow: 4px 4px 4px 0px #00000033;"); + }); + }); +}); diff --git a/frontend/src/app/main/ui/ds/layout/tab_switcher.cljs b/frontend/src/app/main/ui/ds/layout/tab_switcher.cljs index af232e255a..9034d27e79 100644 --- a/frontend/src/app/main/ui/ds/layout/tab_switcher.cljs +++ b/frontend/src/app/main/ui/ds/layout/tab_switcher.cljs @@ -176,7 +176,7 @@ props (mf/spread-props props {:class [class (stl/css :tabs)]})] - [:> :article props + [:> :div props [:div {:class (stl/css :padding-wrapper)} [:> tab-nav* {:button-position action-button-position :action-button action-button diff --git a/frontend/src/app/main/ui/inspect/styles/panels/text.cljs b/frontend/src/app/main/ui/inspect/styles/panels/text.cljs index eaa957ee35..21e28b82be 100644 --- a/frontend/src/app/main/ui/inspect/styles/panels/text.cljs +++ b/frontend/src/app/main/ui/inspect/styles/panels/text.cljs @@ -197,7 +197,8 @@ (reset! copied* true) (wapi/write-to-clipboard formatted-text) (tm/schedule 1000 #(reset! copied* false)))))] - [:div {:class (stl/css :text-content-wrapper)} + [:pre {:class (stl/css :text-content-wrapper) + :role "presentation"} [:> property-detail-copiable* {:copied copied :on-click copy-text} [:span {:class (stl/css :text-content) diff --git a/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs b/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs index 8c7553f27e..53d26c3c23 100644 --- a/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs +++ b/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs @@ -89,7 +89,8 @@ (wapi/write-to-clipboard copiable-value) (tm/schedule 1000 #(reset! copied* false))))] [:* - [:dl {:class [(stl/css :property-row) class]} + [:dl {:class [(stl/css :property-row) class] + :data-testid "property-row"} [:dt {:class (stl/css :property-term)} term] [:dd {:class (stl/css :property-detail)} (if token @@ -111,12 +112,12 @@ :copied copied :on-click copy-attr} formatted-color-value])]] (when (:image color) - [:div {:class (stl/css :color-image-preview)} + [:figure {:class (stl/css :color-image-preview)} [:div {:class (stl/css :color-image-preview-wrapper)} [:img {:class (stl/css :color-image) :src color-image-url :title color-image-name - :alt ""}]] + :alt (tr "inspect.attributes.image.preview")}]] [:> button* {:variant "secondary" :to color-image-url :target "_blank" diff --git a/frontend/src/app/main/ui/inspect/styles/rows/properties_row.cljs b/frontend/src/app/main/ui/inspect/styles/rows/properties_row.cljs index d00e346dec..abac5c7eee 100644 --- a/frontend/src/app/main/ui/inspect/styles/rows/properties_row.cljs +++ b/frontend/src/app/main/ui/inspect/styles/rows/properties_row.cljs @@ -45,7 +45,8 @@ (reset! copied* true) (wapi/write-to-clipboard copiable-value) (tm/schedule 1000 #(reset! copied* false))))] - [:dl {:class [(stl/css :property-row) class]} + [:dl {:class [(stl/css :property-row) class] + :data-testid "property-row"} [:dt {:class (stl/css :property-term)} term] [:dd {:class (stl/css :property-detail)} (if copiable? diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 088c49f577..fc9f8ad9f5 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -1696,6 +1696,10 @@ msgstr "RGBA" msgid "inspect.attributes.fill" msgstr "Fill" +#: src/app/main/ui/inspect/attributes/fill.cljs:53 +msgid "inspect.attributes.image.preview" +msgstr "Preview of the shape's fill image" + #: src/app/main/ui/inspect/attributes/common.cljs:78, src/app/main/ui/inspect/styles/rows/color_properties_row.cljs:127 msgid "inspect.attributes.image.download" msgstr "Download source image" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index b9da9fdef5..f6f304e71d 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -1694,6 +1694,10 @@ msgstr "RGBA" msgid "inspect.attributes.fill" msgstr "Relleno" +#: src/app/main/ui/inspect/attributes/fill.cljs:53 +msgid "inspect.attributes.image.preview" +msgstr "Previsualización de la imagen de relleno" + #: src/app/main/ui/inspect/attributes/common.cljs:78, src/app/main/ui/inspect/styles/rows/color_properties_row.cljs:127 msgid "inspect.attributes.image.download" msgstr "Descargar imagen original"