{"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"}],"defaultSkin":2,"createdOn":"2025-02-05T17:40:58.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\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":"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-02-05T17:37:44.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"}]}}