{"version":"0.0.11","item":{"id":"9994b52f-25f8-4cf7-8bb7-15e4bea10c74","name":"DashboardFlow","description":"","origins":["https://your.domain.com","https://your.domain2.com"],"experiences":[],"components":[{"type":{"id":"9c47a00a-3d7a-45ed-82cc-a086a8efcdc5","name":"DashboardCreateComponentInfo","description":"","props":[{"id":"","name":"prop_1","description":"","type":"any","mode":"input","behavior":{"type":"message","message":"InitRequest","ref":"none","params":[]}}],"refs":[{"id":"","name":"ref_1","description":"","selectorType":"id-attribute","selector":"ref_1","behavior":{"type":"code"}}],"skins":[{"name":"newSkin","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n\n    <!-- <div class='cardIntroClose' myop-id='close'>\n    </div> -->\n\n    <div class='cardIntroIcon'>\n\n        <svg width=\"61\" height=\"60\" viewBox=\"0 0 61 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect y=\"10.3438\" width=\"49.6552\" height=\"49.6552\" rx=\"12\" fill=\"url(#paint0_linear_3856_14417)\"\n                fill-opacity=\"0.4\" />\n            <rect x=\"4.96521\" y=\"5.37891\" width=\"49.6552\" height=\"49.6552\" rx=\"12\" fill=\"url(#paint1_linear_3856_14417)\"\n                fill-opacity=\"0.4\" />\n            <rect x=\"10.5305\" width=\"49.6552\" height=\"49.6552\" rx=\"12\" fill=\"url(#paint2_linear_3856_14417)\" />\n            <defs>\n                <linearGradient id=\"paint0_linear_3856_14417\" x1=\"58.5202\" y1=\"10.3438\" x2=\"7.99437\" y2=\"62.5182\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint1_linear_3856_14417\" x1=\"63.4854\" y1=\"5.37892\" x2=\"12.9596\" y2=\"57.5534\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint2_linear_3856_14417\" x1=\"69.0507\" y1=\"1.57451e-05\" x2=\"18.5249\" y2=\"52.1745\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                </linearGradient>\n            </defs>\n        </svg>\n\n\n    </div>\n\n    <div class='cardIntroText'>\n        <h3>Components</h3>\n        <p>\n            Create new Myop components or edit existing ones. Define refs, props, and skins—all managed in one place.\n            Easily connect pre-developed components to Myop for complete skin flexibility. </p>\n    </div>\n</div>\n\n<style>\n    .cardTitle {\n        font-weight: 600;\n        font-size: 11px;\n        line-height: 14px;\n        color: var(--colors-grey-100);\n        position: relative;\n        top: 2px;\n        left: 5px;\n        letter-spacing: 1px;\n    }\n\n    .cardIntro {\n        color: var(--colors-grey-100);\n        height: 127px;\n        width: calc(100% - 64px);\n        border: 1px solid var(--colors-purple-10);\n\n        border-radius: 8px;\n        position: relative;\n        top: 29px;\n        left: 30px;\n        overflow: hidden;\n\n        background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n        text-align: left;\n    }\n\n    .cardIntroClose {\n        cursor: pointer;\n        right: 4px;\n        top: 4px;\n        position: absolute;\n    }\n\n    .cardIntroIcon {\n        position: absolute;\n        top: 20px;\n        left: 20px;\n    }\n\n    .cardIntroText {\n        position: relative;\n        left: 100px;\n        /* position: absolute;\n        left: 85px;\n        top: 5px; */\n\n\n    }\n\n    .cardIntroText h3 {\n        font-weight: 500;\n        font-size: 24px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n        white-space: nowrap;\n        overflow-x: hidden;\n        height: 26px;\n        margin-bottom: 18px;\n\n    }\n\n    .cardIntroText p {\n        padding-left: 22px;\n        font-size: 14px;\n        top: -8px;\n        position: relative;\n        line-height: 18px;\n        letter-spacing: 0.05px;\n    }\n\n    .cardIntroText p {\n        margin-left: -3px;\n        margin-top: -2px;\n        padding-left: 2px;\n        padding-top: 1px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n\n\n        display: -webkit-box;\n        -webkit-line-clamp: 3;\n        /* Limits the text to 3 lines */\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        /* Hides text overflow */\n\n    }\n</style>"},"id":"70c6b410-2390-4921-9f4b-3f9b8722d727"},{"name":"backup","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n  \n  <!-- <div class='cardIntroClose' myop-id='close'>\n  </div> -->\n\n  <div class='cardIntroIcon'>\n\n<svg width=\"61\" height=\"60\" viewBox=\"0 0 61 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect y=\"10.3438\" width=\"49.6552\" height=\"49.6552\" rx=\"12\" fill=\"url(#paint0_linear_3856_14417)\" fill-opacity=\"0.4\"/>\n<rect x=\"4.96521\" y=\"5.37891\" width=\"49.6552\" height=\"49.6552\" rx=\"12\" fill=\"url(#paint1_linear_3856_14417)\" fill-opacity=\"0.4\"/>\n<rect x=\"10.5305\" width=\"49.6552\" height=\"49.6552\" rx=\"12\" fill=\"url(#paint2_linear_3856_14417)\"/>\n<defs>\n<linearGradient id=\"paint0_linear_3856_14417\" x1=\"58.5202\" y1=\"10.3438\" x2=\"7.99437\" y2=\"62.5182\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.08\" stop-color=\"#FF8651\"/>\n<stop offset=\"0.504183\" stop-color=\"#FFBEA8\"/>\n<stop offset=\"0.97139\" stop-color=\"#A397F5\"/>\n</linearGradient>\n<linearGradient id=\"paint1_linear_3856_14417\" x1=\"63.4854\" y1=\"5.37892\" x2=\"12.9596\" y2=\"57.5534\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.08\" stop-color=\"#FF8651\"/>\n<stop offset=\"0.504183\" stop-color=\"#FFBEA8\"/>\n<stop offset=\"0.97139\" stop-color=\"#A397F5\"/>\n</linearGradient>\n<linearGradient id=\"paint2_linear_3856_14417\" x1=\"69.0507\" y1=\"1.57451e-05\" x2=\"18.5249\" y2=\"52.1745\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.08\" stop-color=\"#FF8651\"/>\n<stop offset=\"0.504183\" stop-color=\"#FFBEA8\"/>\n<stop offset=\"0.97139\" stop-color=\"#A397F5\"/>\n</linearGradient>\n</defs>\n</svg>\n\n\n  </div>\n\n  <div class='cardIntroText'>\n    <h3>Create a component</h3>\n    <ul>\n      <li>\n       Modify or add new components\n      </li>\n      <li>\n       Define refs, props and skins\n      </li>\n      <li>\n        Connect pre-developed components\n      </li>\n    </ul>\n  </div>\n</div>\n\n\n<style>\n  \n  .cardTitle {\n    font-weight: 600;\n    font-size: 11px;\n    line-height: 14px;\n    color: var(--colors-grey-100);\n    position: relative;\n    top: 2px;\n    left: 5px;\n    letter-spacing: 1px;\n  }\n\n  .cardIntro {\n    color: var(--colors-grey-100);\n    height: 127px;\n    width: calc(100% - 64px);\n    border: 1px solid var(--colors-purple-10);\n\n    border-radius: 8px;\n    position: relative;\n    top: 29px;\n    left: 30px;\n    overflow: hidden;\n\n    background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n\n   text-align: left;\n\n  }\n\n  .cardIntroClose {\n    cursor: pointer;\n    right: 4px;\n    top: 4px;\n    position: absolute;\n  }\n\n  .cardIntroIcon {\n    position: absolute;\n    top: 20px;\n    left: 20px;\n  }\n\n  .cardIntroText {\n    position: relative;\n    left: 100px;\n    /* position: absolute;\n    left: 85px;\n    top: 5px; */\n  }\n\n  .cardIntroText h3 {\n    font-weight: 500;\n    font-size: 24px;\n  }\n\n  .cardIntroText ul {\n    padding-left: 22px;\n    font-size: 14px;\n    top: -8px;\n    position: relative;\n    line-height: 18px;\n    letter-spacing: 0.05px;\n  }\n\n  .cardIntroText ul li {\n    margin-left: -3px;\n    margin-top: -2px;\n    padding-left: 2px;\n    padding-top: 1px;\n  }\n\n  .cardIntroText ul li::marker {\n    font-size: 10px;\n    /* Set the font size for the bullet point */\n    line-height: 1;\n    /* Adjust line height if necessary */\n  }\n</style>","autoHeight":true},"id":"ee04b668-27e5-4d11-bca1-3025006aef51"},{"name":"backup2","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n\n    <!-- <div class='cardIntroClose' myop-id='close'>\n    </div> -->\n\n    <div class='cardIntroIcon'>\n\n        <svg width=\"61\" height=\"60\" viewBox=\"0 0 61 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect y=\"10.3438\" width=\"49.6552\" height=\"49.6552\" rx=\"12\" fill=\"url(#paint0_linear_3856_14417)\"\n                  fill-opacity=\"0.4\" />\n            <rect x=\"4.96521\" y=\"5.37891\" width=\"49.6552\" height=\"49.6552\" rx=\"12\" fill=\"url(#paint1_linear_3856_14417)\"\n                  fill-opacity=\"0.4\" />\n            <rect x=\"10.5305\" width=\"49.6552\" height=\"49.6552\" rx=\"12\" fill=\"url(#paint2_linear_3856_14417)\" />\n            <defs>\n                <linearGradient id=\"paint0_linear_3856_14417\" x1=\"58.5202\" y1=\"10.3438\" x2=\"7.99437\" y2=\"62.5182\"\n                                gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint1_linear_3856_14417\" x1=\"63.4854\" y1=\"5.37892\" x2=\"12.9596\" y2=\"57.5534\"\n                                gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint2_linear_3856_14417\" x1=\"69.0507\" y1=\"1.57451e-05\" x2=\"18.5249\" y2=\"52.1745\"\n                                gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                </linearGradient>\n            </defs>\n        </svg>\n\n\n    </div>\n\n    <div class='cardIntroText'>\n        <h3>Create a component</h3>\n        <ul>\n            <li>\n                Modify or add new components\n            </li>\n            <li>\n                Define refs, props and skins\n            </li>\n            <li>\n                Connect pre-developed components\n            </li>\n        </ul>\n    </div>\n</div>\n\n\n<style>\n    .cardTitle {\n        font-weight: 600;\n        font-size: 11px;\n        line-height: 14px;\n        color: var(--colors-grey-100);\n        position: relative;\n        top: 2px;\n        left: 5px;\n        letter-spacing: 1px;\n    }\n\n    .cardIntro {\n        color: var(--colors-grey-100);\n        height: 127px;\n        width: calc(100% - 64px);\n        border: 1px solid var(--colors-purple-10);\n\n        border-radius: 8px;\n        position: relative;\n        top: 29px;\n        left: 30px;\n        overflow: hidden;\n\n        background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n        text-align: left;\n    }\n\n    .cardIntroClose {\n        cursor: pointer;\n        right: 4px;\n        top: 4px;\n        position: absolute;\n    }\n\n    .cardIntroIcon {\n        position: absolute;\n        top: 20px;\n        left: 20px;\n    }\n\n    .cardIntroText {\n        position: relative;\n        left: 100px;\n        /* position: absolute;\n        left: 85px;\n        top: 5px; */\n\n\n    }\n\n    .cardIntroText h3 {\n        font-weight: 500;\n        font-size: 24px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n        white-space: nowrap;\n        overflow-x: hidden;\n        height: 26px;\n        margin-bottom: 18px;\n\n    }\n\n    .cardIntroText ul {\n        padding-left: 22px;\n        font-size: 14px;\n        top: -8px;\n        position: relative;\n        line-height: 18px;\n        letter-spacing: 0.05px;\n    }\n\n    .cardIntroText ul li {\n        margin-left: -3px;\n        margin-top: -2px;\n        padding-left: 2px;\n        padding-top: 1px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n        white-space: nowrap;\n        overflow: hidden;\n    }\n\n    .cardIntroText ul li::marker {\n        font-size: 10px;\n        /* Set the font size for the bullet point */\n        line-height: 1;\n        /* Adjust line height if necessary */\n    }\n</style>"},"id":"658cdabe-3d51-4ecb-8151-70f007e29515"}],"defaultSkin":0,"createdOn":"2024-12-29T09:27:31.000Z","resolvedDefinitions":[]},"instance":{"id":"282e9012-1acc-4e67-b4cf-c8c74f8a568a","componentId":"9c47a00a-3d7a-45ed-82cc-a086a8efcdc5","componentName":"DashboardCreateComponentInfo","skinSelector":{"type":"Dedicated","skin":{"id":"70c6b410-2390-4921-9f4b-3f9b8722d727"}},"resolvedExperiences":[]},"name":"DashboardCreateComponentInfo"},{"type":{"id":"4fe7d773-6fa7-4ab9-8712-c8786cb30a8b","name":"DashboardCreateFlowInfo","description":"","props":[{"id":"","name":"prop_1","description":"","type":"any","mode":"input","behavior":{"type":"message","message":"InitRequest","ref":"none","params":[]}}],"refs":[{"id":"","name":"ref_2","description":"","selectorType":"id-attribute","selector":"ref_2","behavior":{"type":"code"}}],"skins":[{"name":"newSkin","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n\n    <!-- <div class='cardIntroClose' myop-id='close'>\n    </div> -->\n\n    <div class='cardIntroIcon'>\n\n        <svg width=\"68\" height=\"80\" viewBox=\"0 0 68 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M4.20001 21.3768V2.58238C4.20001 1.48536 5.08048 0.610513 6.1722 0.71824C10.5078 1.14606 21.2247 3.13853 30.54 12.4017C37.4993 19.0161 44.5091 21.6363 47.5841 22.5339C48.5112 22.8046 49.2 23.6431 49.2 24.6089V43.6495C49.2 44.6656 48.4419 45.5254 47.4268 45.5708C40.363 45.8867 27.988 43.8796 21.2716 34.3254C15.934 26.7327 10.3737 24.5768 5.71529 23.3293C4.82736 23.0915 4.20001 22.296 4.20001 21.3768Z\"\n                fill=\"url(#paint0_linear_3856_16477)\" />\n            <path opacity=\"0.4\"\n                d=\"M7.95001 28.8768V10.0824C7.95001 8.98536 8.83048 8.11051 9.9222 8.21824C14.2578 8.64606 24.9747 10.6385 34.29 19.9017C41.2493 26.5161 48.2591 29.1363 51.3341 30.0339C52.2612 30.3046 52.95 31.1431 52.95 32.1089V51.1495C52.95 52.1656 52.1919 53.0254 51.1768 53.0708C44.113 53.3867 31.738 51.3796 25.0216 41.8254C19.684 34.2327 14.1237 32.0768 9.46529 30.8293C8.57736 30.5915 7.95001 29.796 7.95001 28.8768Z\"\n                fill=\"url(#paint1_linear_3856_16477)\" />\n            <path opacity=\"0.4\"\n                d=\"M10.95 35.6268V16.8324C10.95 15.7354 11.8305 14.8605 12.9222 14.9682C17.2578 15.3961 27.9747 17.3885 37.29 26.6517C44.2493 33.2661 51.2591 35.8863 54.3341 36.7839C55.2612 37.0546 55.95 37.8931 55.95 38.8589V57.8995C55.95 58.9156 55.1919 59.7754 54.1768 59.8208C47.113 60.1367 34.738 58.1296 28.0216 48.5754C22.684 40.9827 17.1237 38.8268 12.4653 37.5793C11.5774 37.3415 10.95 36.546 10.95 35.6268Z\"\n                fill=\"url(#paint2_linear_3856_16477)\" />\n            <defs>\n                <linearGradient id=\"paint0_linear_3856_16477\" x1=\"26.7\" y1=\"45.6016\" x2=\"26.7\" y2=\"0.601562\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint1_linear_3856_16477\" x1=\"30.45\" y1=\"53.1016\" x2=\"30.45\" y2=\"8.10156\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint2_linear_3856_16477\" x1=\"33.45\" y1=\"59.8516\" x2=\"33.45\" y2=\"14.8516\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n            </defs>\n        </svg>\n\n    </div>\n\n    <div class='cardIntroText'>\n        <h3>User Flows</h3>\n        <p>\n            Create new user flows or adjust existing ones. Add components to your flow and tailor\n            experiences for different segments.\n        </p>\n    </div>\n</div>\n\n<style>\n    .cardTitle {\n        font-weight: 600;\n        font-size: 11px;\n        line-height: 14px;\n        color: var(--colors-grey-100);\n        position: relative;\n        top: 2px;\n        left: 5px;\n        letter-spacing: 1px;\n    }\n\n    .cardIntro {\n        color: var(--colors-grey-100);\n        height: 127px;\n        width: calc(100% - 64px);\n        border: 1px solid var(--colors-purple-10);\n\n        border-radius: 8px;\n        position: relative;\n        top: 29px;\n        left: 30px;\n        overflow: hidden;\n\n        background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n        text-align: left;\n    }\n\n    .cardIntroClose {\n        cursor: pointer;\n        right: 4px;\n        top: 4px;\n        position: absolute;\n    }\n\n    .cardIntroIcon {\n        position: absolute;\n        top: 20px;\n        left: 20px;\n    }\n\n    .cardIntroText {\n        position: relative;\n        left: 100px;\n        /* position: absolute;\n        left: 85px;\n        top: 5px; */\n\n\n    }\n\n    .cardIntroText h3 {\n        font-weight: 500;\n        font-size: 24px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n        white-space: nowrap;\n        overflow-x: hidden;\n        height: 26px;\n        margin-bottom: 18px;\n\n    }\n\n    .cardIntroText p {\n        padding-left: 22px;\n        font-size: 14px;\n        top: -8px;\n        position: relative;\n        line-height: 18px;\n        letter-spacing: 0.05px;\n    }\n\n    .cardIntroText p {\n        margin-left: -3px;\n        margin-top: -2px;\n        padding-left: 2px;\n        padding-top: 1px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n\n\n        display: -webkit-box;\n        -webkit-line-clamp: 3;\n        /* Limits the text to 3 lines */\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        /* Hides text overflow */\n\n    }\n</style>"},"id":"84a8064c-a932-4092-a239-ace48bf03646"},{"name":"backup","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n    <!-- <div class='cardIntroClose' myop-id='close'>\n    </div> -->\n\n    <div class='cardIntroIcon'>\n        <svg width=\"68\" height=\"80\" viewBox=\"0 0 68 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M4.20001 21.3768V2.58238C4.20001 1.48536 5.08048 0.610513 6.1722 0.71824C10.5078 1.14606 21.2247 3.13853 30.54 12.4017C37.4993 19.0161 44.5091 21.6363 47.5841 22.5339C48.5112 22.8046 49.2 23.6431 49.2 24.6089V43.6495C49.2 44.6656 48.4419 45.5254 47.4268 45.5708C40.363 45.8867 27.988 43.8796 21.2716 34.3254C15.934 26.7327 10.3737 24.5768 5.71529 23.3293C4.82736 23.0915 4.20001 22.296 4.20001 21.3768Z\"\n                fill=\"url(#paint0_linear_3856_16477)\" />\n            <path opacity=\"0.4\"\n                d=\"M7.95001 28.8768V10.0824C7.95001 8.98536 8.83048 8.11051 9.9222 8.21824C14.2578 8.64606 24.9747 10.6385 34.29 19.9017C41.2493 26.5161 48.2591 29.1363 51.3341 30.0339C52.2612 30.3046 52.95 31.1431 52.95 32.1089V51.1495C52.95 52.1656 52.1919 53.0254 51.1768 53.0708C44.113 53.3867 31.738 51.3796 25.0216 41.8254C19.684 34.2327 14.1237 32.0768 9.46529 30.8293C8.57736 30.5915 7.95001 29.796 7.95001 28.8768Z\"\n                fill=\"url(#paint1_linear_3856_16477)\" />\n            <path opacity=\"0.4\"\n                d=\"M10.95 35.6268V16.8324C10.95 15.7354 11.8305 14.8605 12.9222 14.9682C17.2578 15.3961 27.9747 17.3885 37.29 26.6517C44.2493 33.2661 51.2591 35.8863 54.3341 36.7839C55.2612 37.0546 55.95 37.8931 55.95 38.8589V57.8995C55.95 58.9156 55.1919 59.7754 54.1768 59.8208C47.113 60.1367 34.738 58.1296 28.0216 48.5754C22.684 40.9827 17.1237 38.8268 12.4653 37.5793C11.5774 37.3415 10.95 36.546 10.95 35.6268Z\"\n                fill=\"url(#paint2_linear_3856_16477)\" />\n            <defs>\n                <linearGradient id=\"paint0_linear_3856_16477\" x1=\"26.7\" y1=\"45.6016\" x2=\"26.7\" y2=\"0.601562\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint1_linear_3856_16477\" x1=\"30.45\" y1=\"53.1016\" x2=\"30.45\" y2=\"8.10156\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint2_linear_3856_16477\" x1=\"33.45\" y1=\"59.8516\" x2=\"33.45\" y2=\"14.8516\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n            </defs>\n        </svg>\n\n\n    </div>\n\n    <div class='cardIntroText'>\n        <h3>Create a flow</h3>\n        <ul>\n            <li>\n                Create a user flow, or adjust an existing one\n            </li>\n            <li>\n                Drag components and composites to your flow </li>\n            <li>\n                Tailor experiences for different segments </li>\n        </ul>\n    </div>\n</div>\n\n\n<style>\n    .cardTitle {\n        font-weight: 600;\n        font-size: 11px;\n        line-height: 14px;\n        color: var(--colors-grey-100);\n        position: relative;\n        top: 2px;\n        left: 5px;\n        letter-spacing: 1px;\n    }\n\n    .cardIntro {\n        color: var(--colors-grey-100);\n        height: 127px;\n        width: calc(100% - 64px);\n        border: 1px solid var(--colors-purple-10);\n\n        border-radius: 8px;\n        position: relative;\n        top: 29px;\n        left: 30px;\n        overflow: hidden;\n\n        background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n\n        text-align: left;\n\n    }\n\n    .cardIntroClose {\n        cursor: pointer;\n        right: 4px;\n        top: 4px;\n        position: absolute;\n    }\n\n    .cardIntroIcon {\n        position: absolute;\n        top: 20px;\n        left: 20px;\n    }\n\n    .cardIntroText {\n        position: relative;\n        left: 100px;\n        /* position: absolute;\n    left: 85px;\n    top: 5px; */\n    }\n\n    .cardIntroText h3 {\n        font-weight: 500;\n        font-size: 24px;\n    }\n\n    .cardIntroText ul {\n        padding-left: 22px;\n        font-size: 14px;\n        top: -8px;\n        position: relative;\n        line-height: 18px;\n        letter-spacing: 0.05px;\n    }\n\n    .cardIntroText ul li {\n        margin-left: -3px;\n        margin-top: -2px;\n        padding-left: 2px;\n        padding-top: 1px;\n    }\n\n    .cardIntroText ul li::marker {\n        font-size: 10px;\n        /* Set the font size for the bullet point */\n        line-height: 1;\n        /* Adjust line height if necessary */\n    }\n</style>","autoHeight":true},"id":"ee04b668-27e5-4d11-bca1-3025006aef51"},{"name":"backup2","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n    <!-- <div class='cardIntroClose' myop-id='close'>\n    </div> -->\n\n    <div class='cardIntroIcon'>\n        <svg width=\"68\" height=\"80\" viewBox=\"0 0 68 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M4.20001 21.3768V2.58238C4.20001 1.48536 5.08048 0.610513 6.1722 0.71824C10.5078 1.14606 21.2247 3.13853 30.54 12.4017C37.4993 19.0161 44.5091 21.6363 47.5841 22.5339C48.5112 22.8046 49.2 23.6431 49.2 24.6089V43.6495C49.2 44.6656 48.4419 45.5254 47.4268 45.5708C40.363 45.8867 27.988 43.8796 21.2716 34.3254C15.934 26.7327 10.3737 24.5768 5.71529 23.3293C4.82736 23.0915 4.20001 22.296 4.20001 21.3768Z\"\n                fill=\"url(#paint0_linear_3856_16477)\" />\n            <path opacity=\"0.4\"\n                d=\"M7.95001 28.8768V10.0824C7.95001 8.98536 8.83048 8.11051 9.9222 8.21824C14.2578 8.64606 24.9747 10.6385 34.29 19.9017C41.2493 26.5161 48.2591 29.1363 51.3341 30.0339C52.2612 30.3046 52.95 31.1431 52.95 32.1089V51.1495C52.95 52.1656 52.1919 53.0254 51.1768 53.0708C44.113 53.3867 31.738 51.3796 25.0216 41.8254C19.684 34.2327 14.1237 32.0768 9.46529 30.8293C8.57736 30.5915 7.95001 29.796 7.95001 28.8768Z\"\n                fill=\"url(#paint1_linear_3856_16477)\" />\n            <path opacity=\"0.4\"\n                d=\"M10.95 35.6268V16.8324C10.95 15.7354 11.8305 14.8605 12.9222 14.9682C17.2578 15.3961 27.9747 17.3885 37.29 26.6517C44.2493 33.2661 51.2591 35.8863 54.3341 36.7839C55.2612 37.0546 55.95 37.8931 55.95 38.8589V57.8995C55.95 58.9156 55.1919 59.7754 54.1768 59.8208C47.113 60.1367 34.738 58.1296 28.0216 48.5754C22.684 40.9827 17.1237 38.8268 12.4653 37.5793C11.5774 37.3415 10.95 36.546 10.95 35.6268Z\"\n                fill=\"url(#paint2_linear_3856_16477)\" />\n            <defs>\n                <linearGradient id=\"paint0_linear_3856_16477\" x1=\"26.7\" y1=\"45.6016\" x2=\"26.7\" y2=\"0.601562\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint1_linear_3856_16477\" x1=\"30.45\" y1=\"53.1016\" x2=\"30.45\" y2=\"8.10156\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint2_linear_3856_16477\" x1=\"33.45\" y1=\"59.8516\" x2=\"33.45\" y2=\"14.8516\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n            </defs>\n        </svg>\n\n\n    </div>\n\n    <div class='cardIntroText'>\n        <h3>Create a flow</h3>\n        <ul>\n            <li>\n                Create a user flow, or adjust an existing one\n            </li>\n            <li>\n                Drag components and composites to your flow </li>\n            <li>\n                Tailor experiences for different segments </li>\n        </ul>\n    </div>\n</div>\n\n\n\n<style>\n    .cardTitle {\n        font-weight: 600;\n        font-size: 11px;\n        line-height: 14px;\n        color: var(--colors-grey-100);\n        position: relative;\n        top: 2px;\n        left: 5px;\n        letter-spacing: 1px;\n    }\n\n    .cardIntro {\n        color: var(--colors-grey-100);\n        height: 127px;\n        width: calc(100% - 64px);\n        border: 1px solid var(--colors-purple-10);\n\n        border-radius: 8px;\n        position: relative;\n        top: 29px;\n        left: 30px;\n        overflow: hidden;\n\n        background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n        text-align: left;\n    }\n\n    .cardIntroClose {\n        cursor: pointer;\n        right: 4px;\n        top: 4px;\n        position: absolute;\n    }\n\n    .cardIntroIcon {\n        position: absolute;\n        top: 20px;\n        left: 20px;\n    }\n\n    .cardIntroText {\n        position: relative;\n        left: 100px;\n        /* position: absolute;\n        left: 85px;\n        top: 5px; */\n\n\n    }\n\n    .cardIntroText h3 {\n        font-weight: 500;\n        font-size: 24px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n        white-space: nowrap;\n        overflow-x: hidden;\n        height: 26px;\n        margin-bottom: 18px;\n\n    }\n\n    .cardIntroText ul {\n        padding-left: 22px;\n        font-size: 14px;\n        top: -8px;\n        position: relative;\n        line-height: 18px;\n        letter-spacing: 0.05px;\n    }\n\n    .cardIntroText ul li {\n        margin-left: -3px;\n        margin-top: -2px;\n        padding-left: 2px;\n        padding-top: 1px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n        white-space: nowrap;\n        overflow: hidden;\n    }\n\n    .cardIntroText ul li::marker {\n        font-size: 10px;\n        /* Set the font size for the bullet point */\n        line-height: 1;\n        /* Adjust line height if necessary */\n    }\n</style>"},"id":"1054c766-c617-4196-81e7-b652d046b315"}],"defaultSkin":0,"createdOn":"2024-12-29T09:26:57.000Z","resolvedDefinitions":[]},"instance":{"id":"372c53a4-2df2-4a87-bfd8-0d1c241d3d7d","componentId":"4fe7d773-6fa7-4ab9-8712-c8786cb30a8b","componentName":"DashboardCreateFlowInfo","skinSelector":{"type":"Dedicated","skin":{"id":"84a8064c-a932-4092-a239-ace48bf03646"}},"resolvedExperiences":[]},"name":"DashboardCreateFlowInfo"},{"type":{"id":"d46023f8-703e-4df8-8a9e-bef900623559","name":"DashboardCreateSegmentInfo","description":"","props":[{"id":"","name":"prop_1","description":"","type":"any","mode":"input","behavior":{"type":"message","message":"InitRequest","ref":"none","params":[]}}],"refs":[{"id":"","name":"ref_1","description":"","selectorType":"id-attribute","selector":"ref_1","behavior":{"type":"code"}}],"skins":[{"name":"newSkin","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n\n    <div class='cardIntroIcon'>\n\n        <svg width=\"61\" height=\"61\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M46.5231 31.4769C46.5231 32.5815 47.4185 33.4769 48.5231 33.4769H78C79.1046 33.4769 80.0062 32.5804 79.9403 31.4778C79.4531 23.3284 76.0001 15.6105 70.1948 9.80516C64.3895 3.99985 56.6716 0.546874 48.5222 0.0596867C47.4196 -0.00622847 46.5231 0.895431 46.5231 2V31.4769Z\"\n                fill=\"url(#paint0_linear_2748_65820)\" />\n            <path\n                d=\"M33.4769 15.0462C33.4769 13.9416 32.5806 13.0399 31.478 13.1059C25.5595 13.4598 19.8279 15.3807 14.8782 18.688C9.3729 22.3665 5.08208 27.5949 2.54829 33.712C0.0145049 39.8291 -0.64845 46.5602 0.643265 53.0541C1.93498 59.548 5.12335 65.513 9.80518 70.1948C14.487 74.8767 20.452 78.065 26.9459 79.3567C33.4398 80.6485 40.1709 79.9855 46.288 77.4517C52.4051 74.9179 57.6335 70.6271 61.312 65.1219C64.6193 60.1721 66.5402 54.4405 66.8941 48.522C66.9601 47.4194 66.0584 46.5231 64.9538 46.5231H35.4769C34.3724 46.5231 33.4769 45.6276 33.4769 44.5231V15.0462Z\"\n                fill=\"url(#paint1_linear_2748_65820)\" />\n            <defs>\n                <linearGradient id=\"paint0_linear_2748_65820\" x1=\"36.4832\" y1=\"-3.47606e-06\" x2=\"54.4837\" y2=\"75.5594\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint1_linear_2748_65820\" x1=\"36.4832\" y1=\"-3.47606e-06\" x2=\"54.4837\" y2=\"75.5594\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                </linearGradient>\n            </defs>\n        </svg>\n\n\n    </div>\n\n    <div class='cardIntroText'>\n        <h3>Segments</h3>\n\n\n        <ul>\n\n            <li>\n                To assign specific skins to a defined group of users, first create a Segment\n            </li>\n\n            <li>\n                Currently, Myop Segments can only reference a function defined within your code.\n            </li>\n\n            <li>\n                Ensure the Segment’s function ID matches the function ID in your code.\n            </li>\n\n            <li>\n                Once the Segment is created, create a new Experience and assign it to your Segment\n            </li>\n        </ul>\n\n    </div>\n</div>\n\n<style>\n    .cardTitle {\n        font-weight: 600;\n        font-size: 11px;\n        line-height: 14px;\n        color: var(--colors-grey-100);\n        position: relative;\n        top: 2px;\n        left: 5px;\n        letter-spacing: 1px;\n    }\n\n    .cardIntro {\n        color: var(--colors-grey-100);\n        height: 127px;\n        width: calc(100% - 64px);\n        border: 1px solid var(--colors-purple-10);\n\n        border-radius: 8px;\n        position: relative;\n        top: 29px;\n        left: 30px;\n        overflow: hidden;\n\n        background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n        text-align: left;\n    }\n\n    .cardIntroClose {\n        cursor: pointer;\n        right: 4px;\n        top: 4px;\n        position: absolute;\n    }\n\n    .cardIntroIcon {\n        position: absolute;\n        top: 20px;\n        left: 20px;\n    }\n\n    .cardIntroText {\n        position: relative;\n        left: 100px;\n        /* position: absolute;\n        left: 85px;\n        top: 5px; */\n\n\n    }\n\n    .cardIntroText h3 {\n        font-weight: 500;\n        font-size: 24px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n        white-space: nowrap;\n        overflow-x: hidden;\n        height: 26px;\n        margin-bottom: 18px;\n\n    }\n\n    .cardIntroText p {\n        padding-left: 22px;\n        font-size: 14px;\n        top: -8px;\n        position: relative;\n        line-height: 18px;\n        letter-spacing: 0.05px;\n    }\n\n    .cardIntroText ul {\n        width: calc(100% - 110px);\n        min-width: 1000px;\n        padding: 0;\n        height: 70px;\n        position: relative;\n        top: -14px;\n        padding-left: 14px;\n        overflow: hidden;\n        //background: green;\n    }\n\n    .cardIntroText li {\n        float: left;\n        padding: 8px;\n        margin-right: 8px;\n        height: 54px;\n        width: calc(25% - 6px * 4);\n        text-overflow: ellipsis;\n    }\n\n\n    .cardIntroText p {\n        margin-left: -3px;\n        margin-top: -2px;\n        padding-left: 2px;\n        padding-top: 1px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n\n\n        display: -webkit-box;\n        -webkit-line-clamp: 3;\n        /* Limits the text to 3 lines */\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        /* Hides text overflow */\n\n    }\n</style>"},"id":"70c6b410-2390-4921-9f4b-3f9b8722d727"},{"name":"skin_1","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n\n    <div class='cardIntroIcon'>\n\n        <svg width=\"61\" height=\"61\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M46.5231 31.4769C46.5231 32.5815 47.4185 33.4769 48.5231 33.4769H78C79.1046 33.4769 80.0062 32.5804 79.9403 31.4778C79.4531 23.3284 76.0001 15.6105 70.1948 9.80516C64.3895 3.99985 56.6716 0.546874 48.5222 0.0596867C47.4196 -0.00622847 46.5231 0.895431 46.5231 2V31.4769Z\"\n                fill=\"url(#paint0_linear_2748_65820)\" />\n            <path\n                d=\"M33.4769 15.0462C33.4769 13.9416 32.5806 13.0399 31.478 13.1059C25.5595 13.4598 19.8279 15.3807 14.8782 18.688C9.3729 22.3665 5.08208 27.5949 2.54829 33.712C0.0145049 39.8291 -0.64845 46.5602 0.643265 53.0541C1.93498 59.548 5.12335 65.513 9.80518 70.1948C14.487 74.8767 20.452 78.065 26.9459 79.3567C33.4398 80.6485 40.1709 79.9855 46.288 77.4517C52.4051 74.9179 57.6335 70.6271 61.312 65.1219C64.6193 60.1721 66.5402 54.4405 66.8941 48.522C66.9601 47.4194 66.0584 46.5231 64.9538 46.5231H35.4769C34.3724 46.5231 33.4769 45.6276 33.4769 44.5231V15.0462Z\"\n                fill=\"url(#paint1_linear_2748_65820)\" />\n            <defs>\n                <linearGradient id=\"paint0_linear_2748_65820\" x1=\"36.4832\" y1=\"-3.47606e-06\" x2=\"54.4837\" y2=\"75.5594\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint1_linear_2748_65820\" x1=\"36.4832\" y1=\"-3.47606e-06\" x2=\"54.4837\" y2=\"75.5594\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                </linearGradient>\n            </defs>\n        </svg>\n\n\n    </div>\n\n    <div class='cardIntroText'>\n        <h3>Segments</h3>\n\n\n        <ul>\n\n            \n                Myop Segments reference functions in your code. Ensure the Segment's function ID matches your code, then create and assign an Experience, which can be found under User Flows.\n        \n        </ul>\n\n    </div>\n</div>\n\n<style>\n    .cardTitle {\n        font-weight: 600;\n        font-size: 11px;\n        line-height: 14px;\n        color: var(--colors-grey-100);\n        position: relative;\n        top: 2px;\n        left: 5px;\n        letter-spacing: 1px;\n    }\n\n    .cardIntro {\n        color: var(--colors-grey-100);\n        height: 127px;\n        width: calc(100% - 64px);\n        border: 1px solid var(--colors-purple-10);\n\n        border-radius: 8px;\n        position: relative;\n        top: 29px;\n        left: 30px;\n        overflow: hidden;\n\n        background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n        text-align: left;\n    }\n\n    .cardIntroClose {\n        cursor: pointer;\n        right: 4px;\n        top: 4px;\n        position: absolute;\n    }\n\n    .cardIntroIcon {\n        position: absolute;\n        top: 20px;\n        left: 20px;\n    }\n\n    .cardIntroText {\n        position: relative;\n        left: 100px;\n        /* position: absolute;\n        left: 85px;\n        top: 5px; */\n\n\n    }\n\n    .cardIntroText h3 {\n        font-weight: 500;\n        font-size: 24px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n        white-space: nowrap;\n        overflow-x: hidden;\n        height: 26px;\n        margin-bottom: 18px;\n\n    }\n\n    .cardIntroText p {\n        padding-left: 22px;\n        font-size: 14px;\n        top: -8px;\n        position: relative;\n        line-height: 18px;\n        letter-spacing: 0.05px;\n    }\n\n    .cardIntroText ul {\n        width: calc(100% - 110px);\n        min-width: 1000px;\n        padding: 0;\n        height: 70px;\n        position: relative;\n        top: -14px;\n        padding-left: 14px;\n        overflow: hidden;\n        //background: green;\n    }\n\n    .cardIntroText li {\n        float: left;\n        padding: 8px;\n        margin-right: 8px;\n        height: 54px;\n        width: calc(25% - 6px * 4);\n        text-overflow: ellipsis;\n    }\n\n\n    .cardIntroText p {\n        margin-left: -3px;\n        margin-top: -2px;\n        padding-left: 2px;\n        padding-top: 1px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n\n\n        display: -webkit-box;\n        -webkit-line-clamp: 3;\n        /* Limits the text to 3 lines */\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        /* Hides text overflow */\n\n    }\n</style>"},"id":"2a36896f-8c67-4ff3-a579-7d0b368ff254"}],"defaultSkin":0,"createdOn":"2025-01-15T11:34:52.000Z","resolvedDefinitions":[]},"instance":{"id":"9e4bb248-2b8f-4b47-8c7c-4840a5567072","componentId":"d46023f8-703e-4df8-8a9e-bef900623559","componentName":"DashboardCreateSegmentInfo","skinSelector":{"type":"Dedicated","skin":{"id":"70c6b410-2390-4921-9f4b-3f9b8722d727"}},"resolvedExperiences":[]},"name":"DashboardCreateSegmentInfo"},{"type":{"id":"5ce6c001-7e88-467a-9077-a23123069dcd","name":"DashboardCreateFlowInfoDark","description":"","props":[{"id":"","name":"prop_1","description":"","type":"any","mode":"input","behavior":{"type":"message","message":"InitRequest","ref":"none","params":[]}}],"refs":[{"id":"","name":"ref_2","description":"","selectorType":"id-attribute","selector":"ref_2","behavior":{"type":"code"}}],"skins":[{"name":"newSkin","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n\n    <!-- <div class='cardIntroClose' myop-id='close'>\n    </div> -->\n\n    <div class='cardIntroIcon'>\n        <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M4.2002 21.3748V2.58043C4.2002 1.48341 5.08066 0.60856 6.17238 0.716286C10.508 1.1441 21.2248 3.13657 30.5401 12.3998C37.4994 19.0141 44.5093 21.6343 47.5843 22.532C48.5114 22.8026 49.2002 23.6411 49.2002 24.6069V43.6475C49.2002 44.6637 48.4421 45.5235 47.427 45.5689C40.3632 45.8847 27.9882 43.8776 21.2718 34.3234C15.9342 26.7307 10.3738 24.5749 5.71547 23.3273C4.82754 23.0896 4.2002 22.294 4.2002 21.3748Z\"\n                fill=\"url(#paint0_linear_3683_200695)\" />\n            <path opacity=\"0.4\"\n                d=\"M7.9502 28.8748V10.0804C7.9502 8.98341 8.83066 8.10856 9.92238 8.21629C14.258 8.6441 24.9748 10.6366 34.2901 19.8998C41.2494 26.5141 48.2593 29.1343 51.3343 30.032C52.2614 30.3026 52.9502 31.1411 52.9502 32.1069V51.1475C52.9502 52.1637 52.1921 53.0235 51.177 53.0689C44.1132 53.3847 31.7382 51.3776 25.0218 41.8234C19.6842 34.2307 14.1238 32.0749 9.46547 30.8273C8.57754 30.5896 7.9502 29.794 7.9502 28.8748Z\"\n                fill=\"url(#paint1_linear_3683_200695)\" />\n            <path opacity=\"0.4\"\n                d=\"M10.9502 35.6248V16.8304C10.9502 15.7334 11.8307 14.8586 12.9224 14.9663C17.258 15.3941 27.9748 17.3866 37.2901 26.6498C44.2494 33.2641 51.2593 35.8843 54.3343 36.782C55.2614 37.0526 55.9502 37.8911 55.9502 38.8569V57.8975C55.9502 58.9137 55.1921 59.7735 54.177 59.8189C47.1132 60.1347 34.7382 58.1276 28.0218 48.5734C22.6842 40.9807 17.1238 38.8249 12.4655 37.5773C11.5775 37.3396 10.9502 36.544 10.9502 35.6248Z\"\n                fill=\"url(#paint2_linear_3683_200695)\" />\n            <defs>\n                <linearGradient id=\"paint0_linear_3683_200695\" x1=\"26.7002\" y1=\"45.5996\" x2=\"26.7002\" y2=\"0.599609\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint1_linear_3683_200695\" x1=\"30.4502\" y1=\"53.0996\" x2=\"30.4502\" y2=\"8.09961\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint2_linear_3683_200695\" x1=\"33.4502\" y1=\"59.8496\" x2=\"33.4502\" y2=\"14.8496\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n            </defs>\n        </svg>\n\n    </div>\n\n    <div class='cardIntroText'>\n        <h3>User Flows</h3>\n        <p>\n            Drag components into your flow if they share dependencies, serve related functions, belong to the same\n            feature set, or require a specific order. Once the flow is complete, create ‘Experiences’ to assign skins\n            for different user segments.\n        </p>\n    </div>\n</div>\n\n<style>\n    .cardTitle {\n        font-weight: 600;\n        font-size: 11px;\n        line-height: 14px;\n        color: white;\n        position: relative;\n        top: 2px;\n        left: 5px;\n        letter-spacing: 1px;\n    }\n\n    .cardIntro {\n        color: white;\n\n        height: 127px;\n        width: calc(100% - 64px);\n        border: 1px solid var(--colors-grey-80);\n\n        border-radius: 8px;\n        position: relative;\n        top: 29px;\n        left: 30px;\n        overflow: hidden;\n\n        //background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n        text-align: left;\n    }\n\n    .cardIntroClose {\n        cursor: pointer;\n        right: 4px;\n        top: 4px;\n        position: absolute;\n    }\n\n    .cardIntroIcon {\n        position: absolute;\n        top: 20px;\n        left: 20px;\n    }\n\n    .cardIntroText {\n        position: relative;\n        left: 100px;\n        /* position: absolute;\n        left: 85px;\n        top: 5px; */\n\n\n    }\n\n    .cardIntroText h3 {\n        font-weight: 500;\n        font-size: 24px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n        white-space: nowrap;\n        overflow-x: hidden;\n        height: 26px;\n        margin-bottom: 18px;\n\n    }\n\n    .cardIntroText p {\n        padding-left: 22px;\n        font-size: 14px;\n        top: -8px;\n        position: relative;\n        line-height: 18px;\n        letter-spacing: 0.05px;\n    }\n\n    .cardIntroText p {\n        margin-left: -3px;\n        margin-top: -2px;\n        padding-left: 2px;\n        padding-top: 1px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n\n\n        display: -webkit-box;\n        -webkit-line-clamp: 3;\n        /* Limits the text to 3 lines */\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        /* Hides text overflow */\n\n    }\n</style>"},"id":"84a8064c-a932-4092-a239-ace48bf03646"},{"name":"backup","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n    <!-- <div class='cardIntroClose' myop-id='close'>\n    </div> -->\n\n    <div class='cardIntroIcon'>\n        <svg width=\"68\" height=\"80\" viewBox=\"0 0 68 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M4.20001 21.3768V2.58238C4.20001 1.48536 5.08048 0.610513 6.1722 0.71824C10.5078 1.14606 21.2247 3.13853 30.54 12.4017C37.4993 19.0161 44.5091 21.6363 47.5841 22.5339C48.5112 22.8046 49.2 23.6431 49.2 24.6089V43.6495C49.2 44.6656 48.4419 45.5254 47.4268 45.5708C40.363 45.8867 27.988 43.8796 21.2716 34.3254C15.934 26.7327 10.3737 24.5768 5.71529 23.3293C4.82736 23.0915 4.20001 22.296 4.20001 21.3768Z\"\n                fill=\"url(#paint0_linear_3856_16477)\" />\n            <path opacity=\"0.4\"\n                d=\"M7.95001 28.8768V10.0824C7.95001 8.98536 8.83048 8.11051 9.9222 8.21824C14.2578 8.64606 24.9747 10.6385 34.29 19.9017C41.2493 26.5161 48.2591 29.1363 51.3341 30.0339C52.2612 30.3046 52.95 31.1431 52.95 32.1089V51.1495C52.95 52.1656 52.1919 53.0254 51.1768 53.0708C44.113 53.3867 31.738 51.3796 25.0216 41.8254C19.684 34.2327 14.1237 32.0768 9.46529 30.8293C8.57736 30.5915 7.95001 29.796 7.95001 28.8768Z\"\n                fill=\"url(#paint1_linear_3856_16477)\" />\n            <path opacity=\"0.4\"\n                d=\"M10.95 35.6268V16.8324C10.95 15.7354 11.8305 14.8605 12.9222 14.9682C17.2578 15.3961 27.9747 17.3885 37.29 26.6517C44.2493 33.2661 51.2591 35.8863 54.3341 36.7839C55.2612 37.0546 55.95 37.8931 55.95 38.8589V57.8995C55.95 58.9156 55.1919 59.7754 54.1768 59.8208C47.113 60.1367 34.738 58.1296 28.0216 48.5754C22.684 40.9827 17.1237 38.8268 12.4653 37.5793C11.5774 37.3415 10.95 36.546 10.95 35.6268Z\"\n                fill=\"url(#paint2_linear_3856_16477)\" />\n            <defs>\n                <linearGradient id=\"paint0_linear_3856_16477\" x1=\"26.7\" y1=\"45.6016\" x2=\"26.7\" y2=\"0.601562\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint1_linear_3856_16477\" x1=\"30.45\" y1=\"53.1016\" x2=\"30.45\" y2=\"8.10156\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint2_linear_3856_16477\" x1=\"33.45\" y1=\"59.8516\" x2=\"33.45\" y2=\"14.8516\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n            </defs>\n        </svg>\n\n\n    </div>\n\n    <div class='cardIntroText'>\n        <h3>Create a flow</h3>\n        <ul>\n            <li>\n                Create a user flow, or adjust an existing one\n            </li>\n            <li>\n                Drag components and composites to your flow </li>\n            <li>\n                Tailor experiences for different segments </li>\n        </ul>\n    </div>\n</div>\n\n\n<style>\n    .cardTitle {\n        font-weight: 600;\n        font-size: 11px;\n        line-height: 14px;\n        color: var(--colors-grey-100);\n        position: relative;\n        top: 2px;\n        left: 5px;\n        letter-spacing: 1px;\n    }\n\n    .cardIntro {\n        color: var(--colors-grey-100);\n        height: 127px;\n        width: calc(100% - 64px);\n        border: 1px solid var(--colors-purple-10);\n\n        border-radius: 8px;\n        position: relative;\n        top: 29px;\n        left: 30px;\n        overflow: hidden;\n\n        background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n\n        text-align: left;\n\n    }\n\n    .cardIntroClose {\n        cursor: pointer;\n        right: 4px;\n        top: 4px;\n        position: absolute;\n    }\n\n    .cardIntroIcon {\n        position: absolute;\n        top: 20px;\n        left: 20px;\n    }\n\n    .cardIntroText {\n        position: relative;\n        left: 100px;\n        /* position: absolute;\n    left: 85px;\n    top: 5px; */\n    }\n\n    .cardIntroText h3 {\n        font-weight: 500;\n        font-size: 24px;\n    }\n\n    .cardIntroText ul {\n        padding-left: 22px;\n        font-size: 14px;\n        top: -8px;\n        position: relative;\n        line-height: 18px;\n        letter-spacing: 0.05px;\n    }\n\n    .cardIntroText ul li {\n        margin-left: -3px;\n        margin-top: -2px;\n        padding-left: 2px;\n        padding-top: 1px;\n    }\n\n    .cardIntroText ul li::marker {\n        font-size: 10px;\n        /* Set the font size for the bullet point */\n        line-height: 1;\n        /* Adjust line height if necessary */\n    }\n</style>","autoHeight":true},"id":"ee04b668-27e5-4d11-bca1-3025006aef51"},{"name":"backup2","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n    <!-- <div class='cardIntroClose' myop-id='close'>\n    </div> -->\n\n    <div class='cardIntroIcon'>\n        <svg width=\"68\" height=\"80\" viewBox=\"0 0 68 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M4.20001 21.3768V2.58238C4.20001 1.48536 5.08048 0.610513 6.1722 0.71824C10.5078 1.14606 21.2247 3.13853 30.54 12.4017C37.4993 19.0161 44.5091 21.6363 47.5841 22.5339C48.5112 22.8046 49.2 23.6431 49.2 24.6089V43.6495C49.2 44.6656 48.4419 45.5254 47.4268 45.5708C40.363 45.8867 27.988 43.8796 21.2716 34.3254C15.934 26.7327 10.3737 24.5768 5.71529 23.3293C4.82736 23.0915 4.20001 22.296 4.20001 21.3768Z\"\n                fill=\"url(#paint0_linear_3856_16477)\" />\n            <path opacity=\"0.4\"\n                d=\"M7.95001 28.8768V10.0824C7.95001 8.98536 8.83048 8.11051 9.9222 8.21824C14.2578 8.64606 24.9747 10.6385 34.29 19.9017C41.2493 26.5161 48.2591 29.1363 51.3341 30.0339C52.2612 30.3046 52.95 31.1431 52.95 32.1089V51.1495C52.95 52.1656 52.1919 53.0254 51.1768 53.0708C44.113 53.3867 31.738 51.3796 25.0216 41.8254C19.684 34.2327 14.1237 32.0768 9.46529 30.8293C8.57736 30.5915 7.95001 29.796 7.95001 28.8768Z\"\n                fill=\"url(#paint1_linear_3856_16477)\" />\n            <path opacity=\"0.4\"\n                d=\"M10.95 35.6268V16.8324C10.95 15.7354 11.8305 14.8605 12.9222 14.9682C17.2578 15.3961 27.9747 17.3885 37.29 26.6517C44.2493 33.2661 51.2591 35.8863 54.3341 36.7839C55.2612 37.0546 55.95 37.8931 55.95 38.8589V57.8995C55.95 58.9156 55.1919 59.7754 54.1768 59.8208C47.113 60.1367 34.738 58.1296 28.0216 48.5754C22.684 40.9827 17.1237 38.8268 12.4653 37.5793C11.5774 37.3415 10.95 36.546 10.95 35.6268Z\"\n                fill=\"url(#paint2_linear_3856_16477)\" />\n            <defs>\n                <linearGradient id=\"paint0_linear_3856_16477\" x1=\"26.7\" y1=\"45.6016\" x2=\"26.7\" y2=\"0.601562\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint1_linear_3856_16477\" x1=\"30.45\" y1=\"53.1016\" x2=\"30.45\" y2=\"8.10156\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint2_linear_3856_16477\" x1=\"33.45\" y1=\"59.8516\" x2=\"33.45\" y2=\"14.8516\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n            </defs>\n        </svg>\n\n\n    </div>\n\n    <div class='cardIntroText'>\n        <h3>Create a flow</h3>\n        <ul>\n            <li>\n                Create a user flow, or adjust an existing one\n            </li>\n            <li>\n                Drag components and composites to your flow </li>\n            <li>\n                Tailor experiences for different segments </li>\n        </ul>\n    </div>\n</div>\n\n\n\n<style>\n    .cardTitle {\n        font-weight: 600;\n        font-size: 11px;\n        line-height: 14px;\n        color: var(--colors-grey-100);\n        position: relative;\n        top: 2px;\n        left: 5px;\n        letter-spacing: 1px;\n    }\n\n    .cardIntro {\n        color: var(--colors-grey-100);\n        height: 127px;\n        width: calc(100% - 64px);\n        border: 1px solid var(--colors-purple-10);\n\n        border-radius: 8px;\n        position: relative;\n        top: 29px;\n        left: 30px;\n        overflow: hidden;\n\n        background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n        text-align: left;\n    }\n\n    .cardIntroClose {\n        cursor: pointer;\n        right: 4px;\n        top: 4px;\n        position: absolute;\n    }\n\n    .cardIntroIcon {\n        position: absolute;\n        top: 20px;\n        left: 20px;\n    }\n\n    .cardIntroText {\n        position: relative;\n        left: 100px;\n        /* position: absolute;\n        left: 85px;\n        top: 5px; */\n\n\n    }\n\n    .cardIntroText h3 {\n        font-weight: 500;\n        font-size: 24px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n        white-space: nowrap;\n        overflow-x: hidden;\n        height: 26px;\n        margin-bottom: 18px;\n\n    }\n\n    .cardIntroText ul {\n        padding-left: 22px;\n        font-size: 14px;\n        top: -8px;\n        position: relative;\n        line-height: 18px;\n        letter-spacing: 0.05px;\n    }\n\n    .cardIntroText ul li {\n        margin-left: -3px;\n        margin-top: -2px;\n        padding-left: 2px;\n        padding-top: 1px;\n\n        text-overflow: ellipsis;\n        width: calc(100% - 110px);\n        white-space: nowrap;\n        overflow: hidden;\n    }\n\n    .cardIntroText ul li::marker {\n        font-size: 10px;\n        /* Set the font size for the bullet point */\n        line-height: 1;\n        /* Adjust line height if necessary */\n    }\n</style>"},"id":"1054c766-c617-4196-81e7-b652d046b315"}],"defaultSkin":0,"createdOn":"2025-01-15T12:57:00.000Z","resolvedDefinitions":[]},"instance":{"id":"af5eb822-fae6-4de0-9aae-c3516cb7a467","componentId":"5ce6c001-7e88-467a-9077-a23123069dcd","componentName":"DashboardCreateFlowInfoDark","skinSelector":{"type":"Dedicated","skin":{"id":"84a8064c-a932-4092-a239-ace48bf03646"}},"resolvedExperiences":[]},"name":"DashboardCreateFlowInfoDark"},{"type":{"id":"97df38ce-dff2-4722-8260-bb9cc6c7a9b5","name":"DashboardEmptyComponent","description":"","props":[{"id":"","name":"prop_1","description":"","type":"any","mode":"input","behavior":{"type":"message","message":"InitRequest","ref":"none","params":[]}}],"refs":[{"id":"","name":"createButton","description":"","selectorType":"id-attribute","selector":"createButton","behavior":{"type":"code"}}],"skins":[{"name":"newSkin","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n\n  <!-- <div class='cardIntroClose' myop-id='close'>\n    </div> -->\n\n  <div class='cardIntroIcon'>\n\n    <svg width=\"100\" height=\"101\" viewBox=\"0 0 100 101\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect x=\"12\" y=\"12.5\" width=\"76\" height=\"76\" rx=\"12\" fill=\"#DECCFF\" />\n      <circle cx=\"81.5\" cy=\"79\" r=\"15.5\" fill=\"white\" stroke=\"#B996F6\" />\n      <line x1=\"73\" y1=\"78.5\" x2=\"91\" y2=\"78.5\" stroke=\"#B996F6\" stroke-width=\"2\" />\n      <line x1=\"82\" y1=\"87.5\" x2=\"82\" y2=\"69.5\" stroke=\"#B996F6\" stroke-width=\"2\" />\n    </svg>\n\n\n\n\n  </div>\n\n\n  <h3>No components yet...</h3>\n  <p>Start by creating one, and it will appear here!</p>\n\n  <button myop-id=\"createButton\">\n\n\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8 3.5V13.5\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3 8.5H13\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n\n\nAdd a Component\n        \n        </button>\n\n</div>\n\n<style>\n  .cardIntro {\n    font-family: \"DM Sans\", sans-serif;\n    color: var(--colors-grey-100);\n    height: calc(100% - 4px);\n    min-height: 250px;\n    width: calc(100% - 4px);\n    //  border: 1px solid var(--colors-purple-10);\n    border-radius: 8px;\n    position: absolute;\n    display: flex;\n    overflow: hidden;\n    //  background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n  }\n\n  p {\n    text-align: center;\n  }\n\n\n  button {\n    cursor: pointer;\n    display: flex;\n    background: var(--colors-grey-90);\n    color: white;\n    border: none;\n    border-radius: 4px;\n    width: 192px;\n    height: 36px;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: space-evenly;\n  }\n</style>"},"id":"70c6b410-2390-4921-9f4b-3f9b8722d727"},{"name":"oldSkin","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n\n    <!-- <div class='cardIntroClose' myop-id='close'>\n    </div> -->\n\n    <div class='cardIntroIcon'>\n\n        <svg width=\"100\" height=\"101\" viewBox=\"0 0 100 101\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"12\" y=\"12.5\" width=\"76\" height=\"76\" rx=\"12\" fill=\"url(#paint0_linear_3683_250132)\" />\n            <circle cx=\"81.5\" cy=\"79\" r=\"15.5\" fill=\"white\" stroke=\"#3E3D3E\" />\n            <line x1=\"73\" y1=\"78.5\" x2=\"91\" y2=\"78.5\" stroke=\"black\" stroke-width=\"2\" />\n            <line x1=\"82\" y1=\"87.5\" x2=\"82\" y2=\"69.5\" stroke=\"black\" stroke-width=\"2\" />\n            <defs>\n                <linearGradient id=\"paint0_linear_3683_250132\" x1=\"101.568\" y1=\"12.5\" x2=\"24.2358\" y2=\"92.356\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                </linearGradient>\n            </defs>\n        </svg>\n\n\n\n    </div>\n\n\n    <h3>No components yet...</h3>\n    <p>Start by creating one, and it will appear here!</p>\n\n    <button myop-id=\"createButton\">\n\n\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8 3.5V13.5\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3 8.5H13\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n\n\nAdd a Component\n        \n        </button>\n\n</div>\n\n<style>\n    .cardIntro {\n        font-family: \"DM Sans\", sans-serif;\n        color: var(--colors-grey-100);\n        height: calc(100% - 4px);\n        min-height: 250px;\n        width: calc(100% - 4px);\n      //  border: 1px solid var(--colors-purple-10);\n        border-radius: 8px;\n        position: absolute;\n        display: flex;\n        overflow: hidden;\n      //  background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n    }\n\n\n    button {\n        cursor: pointer;\n        display: flex;\n        background: var(--colors-grey-90);\n        color: white;\n        border: none;\n        border-radius: 4px;\n        width: 192px;\n        height: 36px;\n        flex-direction: row;\n        flex-wrap: nowrap;\n        align-items: center;\n        justify-content: space-evenly;\n    }\n</style>"},"id":"bd946b39-99ac-450c-824d-571becb72f08"},{"name":"default","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n\n    <!-- <div class='cardIntroClose' myop-id='close'>\n    </div> -->\n\n    <div class='cardIntroIcon'>\n\n      <svg width=\"100\" height=\"101\" viewBox=\"0 0 100 101\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"12\" y=\"12.5\" width=\"76\" height=\"76\" rx=\"12\" fill=\"#DECCFF\"/>\n<circle cx=\"81.5\" cy=\"79\" r=\"15.5\" fill=\"white\" stroke=\"#B996F6\"/>\n<line x1=\"73\" y1=\"78.5\" x2=\"91\" y2=\"78.5\" stroke=\"#B996F6\" stroke-width=\"2\"/>\n<line x1=\"82\" y1=\"87.5\" x2=\"82\" y2=\"69.5\" stroke=\"#B996F6\" stroke-width=\"2\"/>\n</svg>\n\n\n\n\n    </div>\n\n\n    <h3>No components yet...</h3>\n    <p>Start by creating one, and it will appear here!</p>\n\n    <button myop-id=\"createButton\">\n\n\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8 3.5V13.5\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3 8.5H13\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n\n\nAdd a Component\n        \n        </button>\n\n</div>\n\n<style>\n    .cardIntro {\n        font-family: \"DM Sans\", sans-serif;\n        color: var(--colors-grey-100);\n        height: calc(100% - 4px);\n        min-height: 250px;\n        width: calc(100% - 4px);\n      //  border: 1px solid var(--colors-purple-10);\n        border-radius: 8px;\n       // position: absolute;\n        display: flex;\n        overflow: hidden;\n      //  background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n    }\n\n\n    button {\n        cursor: pointer;\n        display: flex;\n        background: var(--colors-grey-90);\n        color: white;\n        border: none;\n        border-radius: 4px;\n        width: 192px;\n        height: 36px;\n        flex-direction: row;\n        flex-wrap: nowrap;\n        align-items: center;\n        justify-content: space-evenly;\n    }\n</style>"},"id":"9512c906-a02f-435c-b60a-7541b2321014"},{"name":"newEmptyState","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n  <div class='cardIntroIcon'>\n    <svg width=\"100\" height=\"101\" viewBox=\"0 0 100 101\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect x=\"12\" y=\"12.5\" width=\"76\" height=\"76\" rx=\"12\" fill=\"#DECCFF\" />\n      <circle cx=\"81.5\" cy=\"79\" r=\"15.5\" fill=\"white\" stroke=\"#B996F6\" />\n      <line x1=\"73\" y1=\"78.5\" x2=\"91\" y2=\"78.5\" stroke=\"#B996F6\" stroke-width=\"2\" />\n      <line x1=\"82\" y1=\"87.5\" x2=\"82\" y2=\"69.5\" stroke=\"#B996F6\" stroke-width=\"2\" />\n    </svg>\n  </div>\n\n  <h1 class=\"title\">Add your first component</h1>\n\n  <button class='createButton' myop-id=\"createButton\">\n    <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M8 3.5V13.5\" stroke=\"#0A090A\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M3 8.5H13\" stroke=\"#0A090A\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>Attach a Component</button>\n</div>\n\n<style>\n\n  .title {\n    color: '#373539';\n    text-align: center;\n    font-family: \"DM Sans\";\n    font-size: 24px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 32px; \n  }\n\n  .cardIntro {\n    font-family: \"DM Sans\", sans-serif;\n    color: var(--colors-grey-100);\n    height: calc(100% - 4px);\n    min-height: 250px;\n    width: calc(100% - 4px);\n    border-radius: 4px;\n    position: absolute;\n    display: flex;\n    overflow: hidden;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n  }\n\n  p {\n    text-align: center;\n  }\n\n\n  .createButton {\n    cursor: pointer;\n    display: flex;\n    gap: 8px;\n    background: var(--colors-purple-5);\n    color: #0A090A;\n    border: 1px solid var(--colors-purple-10);\n    border-radius: 6px;\n    width: 192px;\n    height: 36px;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    align-items: center;\n    padding: 4px 16px;\n  }\n</style>"},"id":"fd62ecf9-022d-45cb-9d5c-c2b90b406502"}],"defaultSkin":2,"createdOn":"2025-05-11T09:17:34.000Z","resolvedDefinitions":[]},"instance":{"id":"42f27808-6e40-485c-97ed-129a41e8ef93","componentId":"97df38ce-dff2-4722-8260-bb9cc6c7a9b5","componentName":"DashboardEmptyComponent","skinSelector":{"type":"Dedicated","skin":{"id":"70c6b410-2390-4921-9f4b-3f9b8722d727"}},"nestedComponents":[],"resolvedNestedComponents":[],"resolvedExperiences":[]},"name":"DashboardEmptyComponent"},{"type":{"id":"d7e27d13-ae88-40df-925a-775b4e22f550","name":"DashboardEmptyFlows","description":"","props":[{"id":"","name":"prop_1","description":"","type":"any","mode":"input","behavior":{"type":"message","message":"InitRequest","ref":"none","params":[]}}],"refs":[{"id":"","name":"createButton","description":"","selectorType":"id-attribute","selector":"createButton","behavior":{"type":"code"}},{"id":"","name":"message","description":"","selectorType":"id-attribute","selector":"message","behavior":{"type":"code"}},{"id":"","name":"messageWhenNoComponents","description":"","selectorType":"id-attribute","selector":"messageWhenNoComponents","behavior":{"type":"code"}}],"skins":[{"name":"newSkin","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n   <div class='cardIntroIcon'>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\">\n            <g clip-path=\"url(#clip0_10041_20355)\">\n                <path d=\"M-8.77148 32.6008V10.6668C-8.77148 9.56789 -7.89421 8.6856 -6.79699 8.74685C-1.0067 9.07006 16.472 10.9771 31.5516 22.1942C42.8297 30.2126 54.1945 33.1053 58.4083 33.9582C59.3882 34.1565 60.1177 35.0092 60.1177 36.009V58.1846C60.1177 59.2227 59.3277 60.0911 58.2909 60.1418C47.6557 60.6617 27.9323 58.5474 17.3629 47.3004C8.92793 38.3247 0.129457 35.9837 -7.13829 34.5727C-8.08456 34.389 -8.77148 33.5647 -8.77148 32.6008Z\" fill=\"#F0E8FF\"/>\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M-7.75715 0.0895846C-0.326461 0.0508452 17.9163 -0.0442629 36.2265 13.5759C44.4531 19.6954 50.6745 22.7259 54.7174 24.2226C56.7377 24.9705 58.2155 25.336 59.1317 25.5135C59.5902 25.6023 59.9098 25.6443 60.0885 25.6636C60.1779 25.6732 60.2323 25.6772 60.2515 25.6784C60.252 25.6785 60.2525 25.6785 60.2529 25.6785C61.7504 25.7335 62.9184 26.6766 62.8711 27.8021C62.8466 28.3851 62.5008 28.9039 61.9647 29.2664C61.0378 29.8934 60.0692 28.8722 60.1162 27.7542C60.0303 29.7976 60.0279 29.7975 60.0254 29.7975L60.0203 29.7973L60.0095 29.797L59.9853 29.7963C59.968 29.7957 59.9486 29.7949 59.927 29.794C59.8837 29.7921 59.8317 29.7893 59.7709 29.7853C59.6494 29.7774 59.493 29.7646 59.3023 29.744C58.9206 29.7028 58.4024 29.6307 57.7504 29.5045C56.4458 29.2518 54.6128 28.7837 52.273 27.9175C47.596 26.1861 40.9006 22.8668 32.3405 16.4992C15.6511 4.08463 -0.668224 4.17344 -7.75157 4.21199C-8.11676 4.21398 -8.45739 4.21583 -8.77227 4.21583C-10.2941 4.21583 -11.5278 3.29296 -11.5278 2.15454C-11.5278 1.01612 -10.2941 0.0932531 -8.77227 0.0932531C-8.46081 0.0932531 -8.12202 0.0914868 -7.75715 0.0895846Z\" fill=\"#F0E8FF\"/>\n            </g>\n            <defs>\n                <clipPath id=\"clip0_10041_20355\">\n                    <rect width=\"60\" height=\"60\" fill=\"white\"/>\n                </clipPath>\n            </defs>\n        </svg>\n    </div>\n\n\n    <h3 class=\"title\">No flows yet</h3>\n    <p class=\"subtitle\" myop-id=\"message\">Flows transform individual components into connected experiences. <br/>\n        We'll cover this in depth later.</p>   \n</div>\n\n<style>\n    .cardIntro {\n        font-family: \"DM Sans\", sans-serif;\n        color: var(--colors-grey-100);\n        height: calc(100% - 4px);\n        min-height: 250px;\n        width: calc(100% - 4px);\n        border-radius: 8px;\n        position: absolute;\n        display: flex;\n        overflow: hidden;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n    }\n\n    .title {\n        color: #373539;\n        text-align: center;\n        font-family: \"DM Sans\";\n        font-size: 24px;\n        font-style: normal;\n        font-weight: 500;\n        line-height: 32px; \n        margin-top: 20px;\n        margin-bottom: 0;\n    }\n\n    .subtitle {\n        color: #5A595B;\n        text-align: center;\n        font-family: \"DM Sans\";\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 400;\n        line-height: 18px; \n        margin:0;\n    }    \n</style>"},"id":"70c6b410-2390-4921-9f4b-3f9b8722d727"},{"name":"oldSkin","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n\n    <!-- <div class='cardIntroClose' myop-id='close'>\n    </div> -->\n\n    <div class='cardIntroIcon'>\n\n        <svg width=\"100\" height=\"101\" viewBox=\"0 0 100 101\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g clip-path=\"url(#clip0_4778_27120)\">\n                <path\n                    d=\"M7 37.1685V3.48087C7 2.38384 7.87025 1.50521 8.96456 1.58219C15.0732 2.01192 34.3187 4.67851 50.8999 21.1669C63.4021 33.0495 76.0022 37.1978 80.3819 38.3531C81.3157 38.5994 82 39.4348 82 40.4006V74.4352C82 75.4514 81.2456 76.3094 80.232 76.3807C68.7075 77.1913 47.0332 74.1799 35.4526 57.7064C26.1682 44.4992 16.4793 41.1622 8.51703 39.1152C7.62676 38.8863 7 38.0877 7 37.1685Z\"\n                    fill=\"url(#paint0_linear_4778_27120)\" />\n                <path opacity=\"0.4\"\n                    d=\"M13.25 49.6685V15.9809C13.25 14.8838 14.1202 14.0052 15.2146 14.0822C21.3232 14.5119 40.5687 17.1785 57.1499 33.6669C69.6521 45.5495 82.2522 49.6978 86.6319 50.8531C87.5657 51.0994 88.25 51.9348 88.25 52.9006V86.9352C88.25 87.9514 87.4956 88.8094 86.482 88.8807C74.9575 89.6913 53.2832 86.6799 41.7026 70.2064C32.4182 56.9992 22.7293 53.6622 14.767 51.6152C13.8768 51.3863 13.25 50.5877 13.25 49.6685Z\"\n                    fill=\"url(#paint1_linear_4778_27120)\" />\n                <path opacity=\"0.4\"\n                    d=\"M18.25 60.9185V27.2309C18.25 26.1338 19.1202 25.2552 20.2146 25.3322C26.3232 25.7619 45.5687 28.4285 62.1499 44.9169C74.6521 56.7995 87.2522 60.9478 91.6319 62.1031C92.5657 62.3494 93.25 63.1848 93.25 64.1506V98.1852C93.25 99.2014 92.4956 100.059 91.482 100.131C79.9575 100.941 58.2832 97.9299 46.7026 81.4564C37.4182 68.2492 27.7293 64.9122 19.767 62.8652C18.8768 62.6363 18.25 61.8377 18.25 60.9185Z\"\n                    fill=\"url(#paint2_linear_4778_27120)\" />\n            </g>\n            <defs>\n                <linearGradient id=\"paint0_linear_4778_27120\" x1=\"44.5\" y1=\"76.5\" x2=\"44.5\" y2=\"1.5\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint1_linear_4778_27120\" x1=\"50.75\" y1=\"89\" x2=\"50.75\" y2=\"14\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <linearGradient id=\"paint2_linear_4778_27120\" x1=\"55.75\" y1=\"100.25\" x2=\"55.75\" y2=\"25.25\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                    <stop offset=\"0.489785\" stop-color=\"#FFBEA8\" />\n                    <stop offset=\"0.945\" stop-color=\"#A397F5\" />\n                </linearGradient>\n                <clipPath id=\"clip0_4778_27120\">\n                    <rect width=\"100\" height=\"100\" fill=\"white\" transform=\"translate(0 0.5)\" />\n                </clipPath>\n            </defs>\n        </svg>\n\n\n\n    </div>\n\n\n    <h3>No flows yet...</h3>\n    <p myop-id=\"message\">Start by creating one, and it will appear here!</p>\n    <p myop-id=\"messageWhenNoComponents\">Once you have components, combine to create flows.</p>\n\n    <button myop-id=\"createButton\">\n\n\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8 3.5V13.5\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3 8.5H13\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n\n\nAdd a Flow\n        \n        </button>\n\n</div>\n\n<style>\n    .cardIntro {\n        font-family: \"DM Sans\", sans-serif;\n        color: var(--colors-grey-100);\n        height: calc(100% - 4px);\n        min-height: 250px;\n\n        width: calc(100% - 4px);\n        //  border: 1px solid var(--colors-purple-10);\n        border-radius: 8px;\n        position: absolute;\n        display: flex;\n        overflow: hidden;\n        //  background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n\n        //background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n      //  animation: wave 5s ease-in-out infinite;\n    }\n\n    [myop-id='messageWhenNoComponents']{\n        display: none;\n        text-align: center;\n    }\n\n    button {\n        cursor: pointer;\n        display: flex;\n        background: var(--colors-grey-90);\n        color: white;\n        border: none;\n        border-radius: 4px;\n        width: 192px;\n        height: 36px;\n        flex-direction: row;\n        flex-wrap: nowrap;\n        align-items: center;\n        justify-content: space-evenly;\n    }\n</style>"},"id":"021961d5-d7ed-4587-999b-5da58fc700fa"},{"name":"default","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n\n    <!-- <div class='cardIntroClose' myop-id='close'>\n    </div> -->\n\n    <div class='cardIntroIcon'>\n\n<svg width=\"100\" height=\"101\" viewBox=\"0 0 100 101\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6 49.1187V8.48089C6 7.38387 6.88199 6.50474 7.97683 6.57387C14.8065 7.0051 38.0853 9.94079 58.0946 29.8381C73.2338 44.2269 88.4939 49.0587 93.3862 50.312C94.3218 50.5516 95 51.385 95 52.3508V93.3827C95 94.3988 94.2472 95.2562 93.2341 95.334C79.6465 96.3775 53.6181 92.9062 39.7638 73.1982C28.6355 57.3682 17.0176 53.4874 7.51593 51.0639C6.62523 50.8367 6 50.0379 6 49.1187Z\" fill=\"#DECCFF\"/>\n</svg>\n\n\n\n\n    </div>\n\n\n    <h3>No flows yet...</h3>\n    <p myop-id=\"message\">Start by creating one, and it will appear here!</p>\n    <p myop-id=\"messageWhenNoComponents\">Once you have components, combine to create flows.</p>\n\n    <button myop-id=\"createButton\">\n\n\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8 3.5V13.5\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3 8.5H13\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n\n\nAdd a Flow\n        \n        </button>\n\n</div>\n\n<style>\n    .cardIntro {\n        font-family: \"DM Sans\", sans-serif;\n        color: var(--colors-grey-100);\n        height: calc(100% - 4px);\n        min-height: 250px;\n\n        width: calc(100% - 4px);\n        //  border: 1px solid var(--colors-purple-10);\n        border-radius: 8px;\n        position: absolute;\n        display: flex;\n        overflow: hidden;\n        //  background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n\n        //background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n      //  animation: wave 5s ease-in-out infinite;\n    }\n\n    [myop-id='messageWhenNoComponents']{\n        display: none;\n        text-align: center;\n    }\n\n    button {\n        cursor: pointer;\n        display: flex;\n        background: var(--colors-grey-90);\n        color: white;\n        border: none;\n        border-radius: 4px;\n        width: 192px;\n        height: 36px;\n        flex-direction: row;\n        flex-wrap: nowrap;\n        align-items: center;\n        justify-content: space-evenly;\n    }\n</style>"},"id":"00d08713-8443-492b-958a-0128aa4215c1"}],"defaultSkin":2,"createdOn":"2025-06-04T12:27:31.000Z","resolvedDefinitions":[]},"instance":{"id":"85e2a7c2-2aef-4de5-9f97-004cf23f515c","componentId":"d7e27d13-ae88-40df-925a-775b4e22f550","componentName":"DashboardEmptyFlows","skinSelector":{"type":"Dedicated","skin":{"id":"70c6b410-2390-4921-9f4b-3f9b8722d727"}},"nestedComponents":[],"resolvedNestedComponents":[],"resolvedExperiences":[]},"name":"DashboardEmptyFlows"},{"type":{"id":"ae9b2117-224c-4e1d-96b6-adb9b72a1578","name":"DashboardEmptySegments","description":"","props":[{"id":"","name":"prop_1","description":"","type":"any","mode":"input","behavior":{"type":"message","message":"InitRequest","ref":"none","params":[]}}],"refs":[{"id":"","name":"createButton","description":"","selectorType":"id-attribute","selector":"createButton","behavior":{"type":"code"}},{"id":"","name":"message","description":"","selectorType":"id-attribute","selector":"message","behavior":{"type":"code"}},{"id":"","name":"messageWhenNoComponents","description":"","selectorType":"id-attribute","selector":"messageWhenNoComponents","behavior":{"type":"code"}}],"skins":[{"name":"newSkin","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n\n    <!-- <div class='cardIntroClose' myop-id='close'>\n    </div> -->\n\n    <div class='cardIntroIcon'>\n\n        <svg width=\"100\" height=\"100\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M46.5231 31.4769C46.5231 32.5815 47.4185 33.4769 48.5231 33.4769H78C79.1046 33.4769 80.0062 32.5804 79.9403 31.4778C79.4531 23.3284 76.0001 15.6105 70.1948 9.80516C64.3895 3.99985 56.6716 0.546874 48.5222 0.0596867C47.4196 -0.00622847 46.5231 0.895431 46.5231 2V31.4769Z\"\n                fill=\"#DECCFF\" />\n            <path\n                d=\"M33.4769 15.0462C33.4769 13.9416 32.5806 13.0399 31.478 13.1059C25.5595 13.4598 19.8279 15.3807 14.8782 18.688C9.3729 22.3665 5.08208 27.5949 2.54829 33.712C0.0145049 39.8291 -0.64845 46.5602 0.643265 53.0541C1.93498 59.548 5.12335 65.513 9.80518 70.1948C14.487 74.8767 20.452 78.065 26.9459 79.3567C33.4398 80.6485 40.1709 79.9855 46.288 77.4517C52.4051 74.9179 57.6335 70.6271 61.312 65.1219C64.6193 60.1721 66.5402 54.4405 66.8941 48.522C66.9601 47.4194 66.0584 46.5231 64.9538 46.5231H35.4769C34.3724 46.5231 33.4769 45.6276 33.4769 44.5231V15.0462Z\"\n                fill=\"#DECCFF\" />\n        </svg>\n\n\n    </div>\n\n\n    <h3>No segments yet...</h3>\n    <p myop-id=\"message\">Start by creating one, and it will appear here!</p>\n    <p myop-id=\"messageWhenNoComponents\">Once you have components, combine to create flows.</p>\n\n    <button myop-id=\"createButton\">\n\n\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8 3.5V13.5\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3 8.5H13\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n\n\nAdd a Segment\n        \n        </button>\n\n\n\n    <div>\n\n        <style>\n            .cardIntro {\n                font-family: \"DM Sans\", sans-serif;\n                color: var(--colors-grey-100);\n                height: calc(100% - 4px);\n                min-height: 250px;\n\n                width: calc(100% - 4px);\n                //  border: 1px solid var(--colors-purple-10);\n                border-radius: 8px;\n                position: absolute;\n                display: flex;\n                overflow: hidden;\n                //  background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n                align-items: center;\n                justify-content: center;\n                flex-direction: column;\n\n                //background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n                //  animation: wave 5s ease-in-out infinite;\n            }\n\n            [myop-id='messageWhenNoComponents'] {\n                display: none;\n                text-align: center;\n            }\n\n            button {\n                cursor: pointer;\n                display: flex;\n                background: var(--colors-grey-90);\n                color: white;\n                border: none;\n                border-radius: 4px;\n                width: 192px;\n                height: 36px;\n                flex-direction: row;\n                flex-wrap: nowrap;\n                align-items: center;\n                justify-content: space-evenly;\n            }\n        </style>"},"id":"70c6b410-2390-4921-9f4b-3f9b8722d727"},{"name":"oldSkin","description":"","loader":{"type":"HTMLLoader","HTML":"<div>\n    <div class='cardIntro'>\n\n    <!-- <div class='cardIntroClose' myop-id='close'>\n    </div> -->\n\n    <div class='cardIntroIcon'>\n\n  <svg width=\"100\" height=\"100\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M46.5231 31.4769C46.5231 32.5815 47.4185 33.4769 48.5231 33.4769H78C79.1046 33.4769 80.0062 32.5804 79.9403 31.4778C79.4531 23.3284 76.0001 15.6105 70.1948 9.80516C64.3895 3.99985 56.6716 0.546874 48.5222 0.0596867C47.4196 -0.00622847 46.5231 0.895431 46.5231 2V31.4769Z\" fill=\"url(#paint0_linear_2748_65820)\"/>\n<path d=\"M33.4769 15.0462C33.4769 13.9416 32.5806 13.0399 31.478 13.1059C25.5595 13.4598 19.8279 15.3807 14.8782 18.688C9.3729 22.3665 5.08208 27.5949 2.54829 33.712C0.0145049 39.8291 -0.64845 46.5602 0.643265 53.0541C1.93498 59.548 5.12335 65.513 9.80518 70.1948C14.487 74.8767 20.452 78.065 26.9459 79.3567C33.4398 80.6485 40.1709 79.9855 46.288 77.4517C52.4051 74.9179 57.6335 70.6271 61.312 65.1219C64.6193 60.1721 66.5402 54.4405 66.8941 48.522C66.9601 47.4194 66.0584 46.5231 64.9538 46.5231H35.4769C34.3724 46.5231 33.4769 45.6276 33.4769 44.5231V15.0462Z\" fill=\"url(#paint1_linear_2748_65820)\"/>\n<defs>\n<linearGradient id=\"paint0_linear_2748_65820\" x1=\"36.4832\" y1=\"-3.47606e-06\" x2=\"54.4837\" y2=\"75.5594\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.08\" stop-color=\"#FF8651\"/>\n<stop offset=\"0.504183\" stop-color=\"#FFBEA8\"/>\n<stop offset=\"0.97139\" stop-color=\"#A397F5\"/>\n</linearGradient>\n<linearGradient id=\"paint1_linear_2748_65820\" x1=\"36.4832\" y1=\"-3.47606e-06\" x2=\"54.4837\" y2=\"75.5594\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.08\" stop-color=\"#FF8651\"/>\n<stop offset=\"0.504183\" stop-color=\"#FFBEA8\"/>\n<stop offset=\"0.97139\" stop-color=\"#A397F5\"/>\n</linearGradient>\n</defs>\n</svg>\n\n\n\n\n    </div>\n\n\n    <h3>No segments yet...</h3>\n    <p myop-id=\"message\">Start by creating one, and it will appear here!</p>\n    <p myop-id=\"messageWhenNoComponents\">Once you have components, combine to create flows.</p>\n\n    <button myop-id=\"createButton\">\n\n\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8 3.5V13.5\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3 8.5H13\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n\n\nAdd a Segment\n        \n        </button>\n\n</div>\n\n<div>\n\n<style>\n    .cardIntro {\n        font-family: \"DM Sans\", sans-serif;\n        color: var(--colors-grey-100);\n        height: calc(100% - 4px);\n        min-height: 250px;\n\n        width: calc(100% - 4px);\n        //  border: 1px solid var(--colors-purple-10);\n        border-radius: 8px;\n        position: absolute;\n        display: flex;\n        overflow: hidden;\n        //  background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n\n        //background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n        //  animation: wave 5s ease-in-out infinite;\n    }\n\n    [myop-id='messageWhenNoComponents'] {\n        display: none;\n        text-align: center;\n    }\n\n    button {\n        cursor: pointer;\n        display: flex;\n        background: var(--colors-grey-90);\n        color: white;\n        border: none;\n        border-radius: 4px;\n        width: 192px;\n        height: 36px;\n        flex-direction: row;\n        flex-wrap: nowrap;\n        align-items: center;\n        justify-content: space-evenly;\n    }\n</style>"},"id":"b4a2bb15-807e-4e98-9d50-863e37b92c58"},{"name":"default","description":"","loader":{"type":"HTMLLoader","HTML":"<div class='cardIntro'>\n\n    <div class='cardIntroIcon'>\n\n        <svg width=\"100\" height=\"100\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M46.5231 31.4769C46.5231 32.5815 47.4185 33.4769 48.5231 33.4769H78C79.1046 33.4769 80.0062 32.5804 79.9403 31.4778C79.4531 23.3284 76.0001 15.6105 70.1948 9.80516C64.3895 3.99985 56.6716 0.546874 48.5222 0.0596867C47.4196 -0.00622847 46.5231 0.895431 46.5231 2V31.4769Z\"\n                fill=\"#DECCFF\" />\n            <path\n                d=\"M33.4769 15.0462C33.4769 13.9416 32.5806 13.0399 31.478 13.1059C25.5595 13.4598 19.8279 15.3807 14.8782 18.688C9.3729 22.3665 5.08208 27.5949 2.54829 33.712C0.0145049 39.8291 -0.64845 46.5602 0.643265 53.0541C1.93498 59.548 5.12335 65.513 9.80518 70.1948C14.487 74.8767 20.452 78.065 26.9459 79.3567C33.4398 80.6485 40.1709 79.9855 46.288 77.4517C52.4051 74.9179 57.6335 70.6271 61.312 65.1219C64.6193 60.1721 66.5402 54.4405 66.8941 48.522C66.9601 47.4194 66.0584 46.5231 64.9538 46.5231H35.4769C34.3724 46.5231 33.4769 45.6276 33.4769 44.5231V15.0462Z\"\n                fill=\"#DECCFF\" />\n        </svg>\n\n\n    </div>\n\n\n    <h3>No segments yet...</h3>\n    <p myop-id=\"message\">Start by creating one, and it will appear here!</p>\n    <p myop-id=\"messageWhenNoComponents\">Once you have components, combine to create flows.</p>\n\n    <button myop-id=\"createButton\">\n\n\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8 3.5V13.5\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3 8.5H13\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n\n\nAdd a Segment\n        \n        </button>\n\n\n\n    <div>\n\n        <style>\n            .cardIntro {\n                font-family: \"DM Sans\", sans-serif;\n                color: var(--colors-grey-100);\n                height: calc(100% - 4px);\n                min-height: 250px;\n\n                width: calc(100% - 4px);\n                //  border: 1px solid var(--colors-purple-10);\n                border-radius: 8px;\n                position: relative;\n                display: flex;\n                overflow: hidden;\n                //  background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n                align-items: center;\n                justify-content: center;\n                flex-direction: column;\n\n                //background: linear-gradient(253.75deg, rgba(216, 196, 243, 0.1) -11.61%, rgba(236, 233, 253, 0.1) 39.72%, rgba(255, 125, 69, 0.1) 127.32%);\n                //  animation: wave 5s ease-in-out infinite;\n            }\n\n            [myop-id='messageWhenNoComponents'] {\n                display: none;\n                text-align: center;\n            }\n\n            button {\n                cursor: pointer;\n                display: flex;\n                background: var(--colors-grey-90);\n                color: white;\n                border: none;\n                border-radius: 4px;\n                width: 192px;\n                height: 36px;\n                flex-direction: row;\n                flex-wrap: nowrap;\n                align-items: center;\n                justify-content: space-evenly;\n            }\n        </style>"},"id":"37780517-382e-4380-8450-9869feebb3ae"}],"defaultSkin":2,"createdOn":"2025-02-05T17:35:05.000Z","resolvedDefinitions":[]},"instance":{"id":"c114aec2-dd4c-4aed-955e-4aaf314ae5dc","componentId":"ae9b2117-224c-4e1d-96b6-adb9b72a1578","componentName":"DashboardEmptySegments","skinSelector":{"type":"Dedicated","skin":{"id":"70c6b410-2390-4921-9f4b-3f9b8722d727"}},"nestedComponents":[],"resolvedNestedComponents":[],"resolvedExperiences":[]},"name":"DashboardEmptySegments"},{"type":{"id":"daacaa90-2fff-4917-90dc-1f582e92879d","name":"DashboardHeader","description":"","props":[],"refs":[{"id":"","name":"closeButton","description":"","selectorType":"id-attribute","selector":"closeButton","behavior":{"type":"code"}}],"skins":[{"name":"Header","description":"","loader":{"type":"HTMLLoader","HTML":"<div class=\"componentRoot\">\n\n    <button class=\"closeButton\" myop-id=\"closeButton\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M11.5356 4.46446L4.46458 11.5355\" stroke=\"#0A090A\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M4.46436 4.46446L11.5354 11.5355\" stroke=\"#0A090A\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n    </button>\n\n    <div class=\"container\">\n        <div class=\"component\">\n            <h1 class=\"scaled-box\">Welcome to Myop!</h1>\n            <h2 class=\"scaled-box\">Your UI is about to get superpowers.</h2>\n            <div class=\"scaled-box\">\n                <svg width=\"41\" height=\"40\" viewBox=\"0 0 41 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <rect y=\"6.89655\" width=\"33.1034\" height=\"33.1034\" rx=\"12\" fill=\"url(#paint0_linear_10495_480)\"\n                        fill-opacity=\"0.4\" />\n                    <rect x=\"3.31006\" y=\"3.58621\" width=\"33.1034\" height=\"33.1034\" rx=\"12\"\n                        fill=\"url(#paint1_linear_10495_480)\" fill-opacity=\"0.4\" />\n                    <rect x=\"7.02026\" width=\"33.1034\" height=\"33.1034\" rx=\"12\" fill=\"url(#paint2_linear_10495_480)\" />\n                    <defs>\n                        <linearGradient id=\"paint0_linear_10495_480\" x1=\"39.0135\" y1=\"6.89656\" x2=\"5.32958\" y2=\"41.6795\"\n                            gradientUnits=\"userSpaceOnUse\">\n                            <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                            <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                            <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                        </linearGradient>\n                        <linearGradient id=\"paint1_linear_10495_480\" x1=\"42.3235\" y1=\"3.58622\" x2=\"8.63964\" y2=\"38.3692\"\n                            gradientUnits=\"userSpaceOnUse\">\n                            <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                            <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                            <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                        </linearGradient>\n                        <linearGradient id=\"paint2_linear_10495_480\" x1=\"46.0337\" y1=\"1.04968e-05\" x2=\"12.3498\"\n                            y2=\"34.783\" gradientUnits=\"userSpaceOnUse\">\n                            <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                            <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                            <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </div>\n            <h2 class=\"scaled-box\">Add your first component to get started</h2>\n        </div>\n    </div>\n\n\n    <style>\n        * {\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .componentRoot {\n            font-family: \"DM Sans\", sans-serif;\n            position: relative;\n            width: 100%;\n            height: 84px;\n            border-bottom-right-radius: 12px;\n            border-bottom-left-radius: 12px;\n            box-shadow: 0px 4px 0px 0px #8039FD1A;\n            overflow: hidden;\n            z-index: 1;\n            background: linear-gradient(86.16deg, rgb(245, 241, 249) -6.17%, rgba(255, 255, 255) 76.6%, rgb(249, 242, 240) 95.9%);\n        }\n\n        .container {\n            width: calc(100% - 40px);\n            height: 84px;\n            overflow: hidden;\n        }\n\n        .component {\n            display: flex;\n            width: calc(100% - 80px);\n            padding-right: 40px;\n            gap: 20px;\n            height: 80px;\n            align-items: center;\n            position: relative;\n            background: linear-gradient(86.16deg, rgb(245, 241, 249) -6.17%, rgba(255, 255, 255) 76.6%, rgb(249, 242, 240) 95.9%);\n            border-bottom-left-radius: 8px;\n            border-bottom-right-radius: 8px;\n            padding-left: 40px;\n            flex-direction: row;\n            justify-content: flex-start;\n            flex-wrap: wrap;\n        }\n\n        .container:after {\n            content: '';\n            position: absolute;\n            width: calc(100% - 2px);\n            height: 4px;\n            background: linear-gradient(258.48deg, #A77EEB 4.84%, #D1BCF3 33.05%, #F7AA96 96.87%);\n            bottom: 0px;\n            left: 1px;\n            z-index: -1;\n        }\n\n        .component h1 {\n            font-weight: 500;\n            font-size: 24px;\n            line-height: 50px;\n        }\n\n        .component h2 {\n            font-weight: 400;\n            font-size: 20px;\n            line-height: 28px;\n        }\n\n        .closeButton {\n            position: absolute;\n            right: 15px;\n            top: 15px;\n            background: transparent;\n            border: none;\n            cursor: pointer;\n            z-index: 1;\n        }\n\n\n        .scaled-box {\n            transition: transform 0.25s ease-in-out;\n        }\n\n        /* Scale down as the viewport gets smaller */\n        @media (max-width: 1230px) {\n            .scaled-box {\n                transform: scale(0.9);\n            }\n\n            .component {\n                gap: 0px;\n            }\n        }\n    </style>\n</div>"},"id":"e9c02a75-568a-4c83-95d9-e8b522a9c8db"},{"name":"New header (Keren)","description":"","loader":{"type":"HTMLLoader","HTML":"<div class=\"componentRoot\">\n\n    <button class=\"closeButton\" myop-id=\"closeButton\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M11.5356 4.46446L4.46458 11.5355\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M4.46436 4.46446L11.5354 11.5355\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n    </button>\n\n    <div class=\"container\">\n        <div class=\"component\">\n            <h1 class=\"scaled-box welcome\">Welcome to Myop!</h1>\n            <h2 class=\"scaled-box\">Add a component to get started.</h2>\n            <div class=\"scaled-box\">\n                <svg width=\"41\" height=\"40\" viewBox=\"0 0 41 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <rect y=\"6.89655\" width=\"33.1034\" height=\"33.1034\" rx=\"12\" fill=\"url(#paint0_linear_10495_480)\"\n                        fill-opacity=\"0.4\" />\n                    <rect x=\"3.31006\" y=\"3.58621\" width=\"33.1034\" height=\"33.1034\" rx=\"12\"\n                        fill=\"url(#paint1_linear_10495_480)\" fill-opacity=\"0.4\" />\n                    <rect x=\"7.02026\" width=\"33.1034\" height=\"33.1034\" rx=\"12\" fill=\"url(#paint2_linear_10495_480)\" />\n                    <defs>\n                        <linearGradient id=\"paint0_linear_10495_480\" x1=\"39.0135\" y1=\"6.89656\" x2=\"5.32958\" y2=\"41.6795\"\n                            gradientUnits=\"userSpaceOnUse\">\n                            <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                            <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                            <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                        </linearGradient>\n                        <linearGradient id=\"paint1_linear_10495_480\" x1=\"42.3235\" y1=\"3.58622\" x2=\"8.63964\" y2=\"38.3692\"\n                            gradientUnits=\"userSpaceOnUse\">\n                            <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                            <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                            <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                        </linearGradient>\n                        <linearGradient id=\"paint2_linear_10495_480\" x1=\"46.0337\" y1=\"1.04968e-05\" x2=\"12.3498\"\n                            y2=\"34.783\" gradientUnits=\"userSpaceOnUse\">\n                            <stop offset=\"0.08\" stop-color=\"#FF8651\" />\n                            <stop offset=\"0.504183\" stop-color=\"#FFBEA8\" />\n                            <stop offset=\"0.97139\" stop-color=\"#A397F5\" />\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </div>\n            <h2 class=\"scaled-box\">For a guided tour, select \"Use our sample component\" below.</h2>\n        </div>\n    </div>\n\n\n    <style>\n        * {\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .componentRoot {\n            font-family: \"DM Sans\", sans-serif;\n            position: relative;\n            width: 100%;\n            height: 84px;\n            border-bottom-right-radius: 12px;\n            border-bottom-left-radius: 12px;\n            box-shadow: 0px 4px 0px 0px #8039FD1A;\n            overflow: hidden;\n            z-index: 1;\n            background: #3E3D3E;\n            color: white;\n        }\n\n        .container {\n            width: calc(100% - 40px);\n            height: 84px;\n            overflow: hidden;\n        }\n\n        .component {\n            display: flex;\n            width: calc(100% - 80px);\n            padding-right: 40px;\n            gap: 20px;\n            height: 80px;\n            align-items: center;\n            position: relative;\n            background: #3E3D3E;\n            border-bottom-left-radius: 8px;\n            border-bottom-right-radius: 8px;\n            padding-left: 40px;\n            flex-direction: row;\n            justify-content: flex-start;\n            flex-wrap: wrap;\n        }\n\n        .container:after {\n            content: '';\n            position: absolute;\n            width: calc(100% - 2px);\n            height: 4px;\n            background: linear-gradient(258.48deg, #A77EEB 4.84%, #D1BCF3 33.05%, #F7AA96 96.87%);\n            bottom: 0px;\n            left: 1px;\n            z-index: -1;\n        }\n\n        .component h1 {\n            font-weight: 500;\n            font-size: 24px;\n            line-height: 50px;\n            background: linear-gradient(253.75deg, #D8C4F3 -11.61%, #ECE9FD 39.72%, #FF7D45 127.32%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n            /* for Firefox */\n            color: transparent;\n        }\n\n        .component h2 {\n            font-weight: 400;\n            font-size: 20px;\n            line-height: 28px;\n            color: white;\n        }\n\n        .closeButton {\n            position: absolute;\n            right: 15px;\n            top: 15px;\n            background: transparent;\n            border: none;\n            cursor: pointer;\n            z-index: 1;\n        }\n\n\n        .scaled-box {\n            transition: transform 0.25s ease-in-out;\n        }\n\n        /* Scale down as the viewport gets smaller */\n        @media (max-width: 1230px) {\n            .scaled-box {\n                transform: scale(0.9);\n            }\n\n            .component {\n                gap: 0px;\n            }\n        }\n    </style>\n</div>"},"id":"19baa137-e6e2-4cdd-9b19-a01d647d60bc"},{"name":"copy of New header (Keren)","description":"","loader":{"type":"HTMLLoader","HTML":"<div class=\"componentRoot\">\n    <div class=\"container\">\n        <div class=\"component\">\n            <h1 class=\"scaled-box welcome\">Welcome to Myop!</h1>\n            <h2 class=\"scaled-box\">Add a component to get started.</h2>\n\n            <h2 class=\"scaled-box\">For a guided tour, select \"Use our sample component\" below.</h2>\n        </div>\n    </div>\n\n    <style>\n        * {\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .componentRoot {\n            font-family: \"DM Sans\", sans-serif;\n            position: relative;\n            width: 100%;\n            height: 84px;\n            border-bottom-right-radius: 12px;\n            border-bottom-left-radius: 12px;\n            box-shadow: 0px 4px 0px 0px #8039FD1A;\n            overflow: hidden;\n            z-index: 1;\n            background: #3E3D3E;\n            color: white;\n        }\n\n        .container {\n            width: calc(100% - 40px);\n            height: 84px;\n            overflow: hidden;\n        }\n\n        .component {\n            display: flex;\n            width: calc(100% - 80px);\n            padding-right: 40px;\n            gap: 20px;\n            height: 80px;\n            align-items: center;\n            position: relative;\n            background: #3E3D3E;\n            border-bottom-left-radius: 8px;\n            border-bottom-right-radius: 8px;\n            padding-left: 40px;\n            flex-direction: row;\n            justify-content: flex-start;\n            flex-wrap: wrap;\n        }\n\n        .container:after {\n            content: '';\n            position: absolute;\n            width: calc(100% - 2px);\n            height: 4px;\n            background: linear-gradient(258.48deg, #A77EEB 4.84%, #D1BCF3 33.05%, #F7AA96 96.87%);\n            bottom: 0px;\n            left: 1px;\n            z-index: -1;\n        }\n\n        .component h1 {\n            font-weight: 500;\n            font-size: 24px;\n            line-height: 50px;\n            background: linear-gradient(253.75deg, #D8C4F3 -11.61%, #ECE9FD 39.72%, #FF7D45 127.32%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n            /* for Firefox */\n            color: transparent;\n        }\n\n        .component h2 {\n            font-weight: 400;\n            font-size: 20px;\n            line-height: 28px;\n            color: white;\n        }\n\n        .scaled-box {\n            transition: transform 0.25s ease-in-out;\n        }\n\n        /* Scale down as the viewport gets smaller */\n        @media (max-width: 1230px) {\n            .scaled-box {\n                transform: scale(0.9);\n            }\n\n            .component {\n                gap: 0px;\n            }\n        }\n    </style>\n</div>"},"id":"a67d9c3d-65e2-4ed4-8b48-4b4f30cfbb1d"}],"defaultSkin":0,"createdOn":"2025-07-01T06:43:35.000Z","resolvedDefinitions":[]},"instance":{"id":"b1b676b4-c03b-4827-b2cd-1e92ac3750e8","componentId":"daacaa90-2fff-4917-90dc-1f582e92879d","componentName":"DashboardHeader","skinSelector":{"type":"Dedicated","skin":{"id":"19baa137-e6e2-4cdd-9b19-a01d647d60bc"}},"nestedComponents":[],"resolvedNestedComponents":[],"resolvedExperiences":[]},"name":"DashboardHeader"}]}}