slice-machine-ui 1.18.1-dev-next-release.6 → 1.18.1-dev-next-release.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/components/ChangesItems/ChangesItems.tsx +5 -3
  2. package/lib/builders/CustomTypeBuilder/SliceZone/List.tsx +6 -6
  3. package/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx +5 -2
  4. package/out/404.html +1 -1
  5. package/out/_next/static/{wb5LuWvZzzVC8U-R0CeTs → 66ngFr7hhlaxMLWATvuAM}/_buildManifest.js +1 -1
  6. package/out/_next/static/chunks/7-b30f3180efb6bb5b.js +1 -0
  7. package/out/_next/static/chunks/904-ae815442efed055f.js +1 -0
  8. package/out/_next/static/chunks/pages/{_app-9a94be32e790ed15.js → _app-4b020373096131e4.js} +1 -1
  9. package/out/_next/static/chunks/pages/changes-b0714ca467c05e08.js +1 -0
  10. package/out/_next/static/chunks/pages/custom-types/{[customTypeId]-1b420cadc2703ffc.js → [customTypeId]-c9ce77d2fccb503f.js} +1 -1
  11. package/out/_next/static/chunks/pages/page-types/{[pageTypeId]-926e762906e3ab7a.js → [pageTypeId]-c50a43970c50ead1.js} +1 -1
  12. package/out/_next/static/chunks/pages/{slices-b686960d7d228e36.js → slices-0cd502231524ba59.js} +1 -1
  13. package/out/changelog.html +1 -1
  14. package/out/changes.html +1 -1
  15. package/out/custom-types/[customTypeId].html +1 -1
  16. package/out/custom-types.html +1 -1
  17. package/out/index.html +1 -1
  18. package/out/labs.html +1 -1
  19. package/out/page-types/[pageTypeId].html +1 -1
  20. package/out/slices/[lib]/[sliceName]/[variation]/screenshot.html +1 -1
  21. package/out/slices/[lib]/[sliceName]/[variation]/simulator.html +1 -1
  22. package/out/slices/[lib]/[sliceName]/[variation].html +1 -1
  23. package/out/slices.html +1 -1
  24. package/package.json +4 -4
  25. package/pages/slices.tsx +4 -3
  26. package/src/components/Card/Card.css.ts +13 -7
  27. package/src/components/Card/Card.stories.tsx +2 -1
  28. package/src/components/Card/Card.tsx +51 -38
  29. package/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.tsx +2 -2
  30. package/src/features/slices/convertLegacySlice/types.ts +2 -2
  31. package/src/features/slices/sliceCards/{NonSharedSliceViewCard.tsx → NonSharedSliceCard.tsx} +2 -2
  32. package/src/features/slices/sliceCards/SharedSliceCard.tsx +240 -0
  33. package/test/pages/custom-types.test.tsx +1 -1
  34. package/out/_next/static/chunks/590-ab38d53732035bf0.js +0 -1
  35. package/out/_next/static/chunks/933-a14914fafa262353.js +0 -1
  36. package/out/_next/static/chunks/pages/changes-e58a6f4217ec2d9e.js +0 -1
  37. package/src/features/slices/sliceCards/SharedSliceSelectionCard.tsx +0 -75
  38. package/src/features/slices/sliceCards/SharedSliceViewCard.tsx +0 -145
  39. /package/out/_next/static/{wb5LuWvZzzVC8U-R0CeTs → 66ngFr7hhlaxMLWATvuAM}/_ssgManifest.js +0 -0
@@ -1 +1 @@
1
- <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Slice Machine</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/66b3836ab88b0c5c.css" as="style"/><link rel="stylesheet" href="/_next/static/css/66b3836ab88b0c5c.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-9a94be32e790ed15.js" defer=""></script><script src="/_next/static/chunks/746-2ca4784811bde7c1.js" defer=""></script><script src="/_next/static/chunks/pages/slices/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D/screenshot-76d40513025fd76d.js" defer=""></script><script src="/_next/static/wb5LuWvZzzVC8U-R0CeTs/_buildManifest.js" defer=""></script><script src="/_next/static/wb5LuWvZzzVC8U-R0CeTs/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-emotion="css-global 413pep">html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;color:var(--theme-ui-colors-text);background-color:var(--theme-ui-colors-background);}html.theme-ui-light,.theme-ui-light html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;}html.theme-ui-dark,.theme-ui-dark html{--theme-ui-colors-text:#fff;--theme-ui-colors-textClear:#6E707B;--theme-ui-colors-hoverBackground:#202020;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-background:#202022;--theme-ui-colors-backgroundClear:#28282C;--theme-ui-colors-primary:#4E54D7;--theme-ui-colors-secondary:#28282C;--theme-ui-colors-icons:#5D5D71;--theme-ui-colors-gray:#1D1D1F;--theme-ui-colors-borders:#3A3A46;--theme-ui-colors-deep:#28282C;--theme-ui-colors-headSection:#28282C;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-sidebar:#28282C;--theme-ui-colors-code-border:#5D5D6F;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;--theme-ui-colors-link:#A9A9C6;--theme-ui-colors-choggleBox:#fff;}</style><style data-emotion="css-global h19pgh">*{box-sizing:border-box;}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;line-height:1.5;font-weight:400;}body{margin:0;}</style><style data-emotion="css yvak7d">.css-yvak7d{box-sizing:border-box;margin:0;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:calc(100vh - 57px);width:100vw;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-yvak7d"><style data-emotion="css uqm8ih">.css-uqm8ih{box-sizing:border-box;margin:0;min-width:0;color:var(--theme-ui-colors-primary);overflow:visible;}</style><svg stroke-width="4" viewBox="0 0 32 32" width="48" height="48" fill="none" stroke="currentColor" role="img" id="spinner" class="css-uqm8ih"><title>Loading</title><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" opacity="0.125"></circle><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" stroke-dasharray="20 110"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 16 16" to="360 16 16" dur="750ms" repeatCount="indefinite"></animateTransform></circle></svg></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices/[lib]/[sliceName]/[variation]/screenshot","query":{},"buildId":"wb5LuWvZzzVC8U-R0CeTs","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
1
+ <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Slice Machine</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/66b3836ab88b0c5c.css" as="style"/><link rel="stylesheet" href="/_next/static/css/66b3836ab88b0c5c.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-4b020373096131e4.js" defer=""></script><script src="/_next/static/chunks/746-2ca4784811bde7c1.js" defer=""></script><script src="/_next/static/chunks/pages/slices/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D/screenshot-76d40513025fd76d.js" defer=""></script><script src="/_next/static/66ngFr7hhlaxMLWATvuAM/_buildManifest.js" defer=""></script><script src="/_next/static/66ngFr7hhlaxMLWATvuAM/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-emotion="css-global 413pep">html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;color:var(--theme-ui-colors-text);background-color:var(--theme-ui-colors-background);}html.theme-ui-light,.theme-ui-light html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;}html.theme-ui-dark,.theme-ui-dark html{--theme-ui-colors-text:#fff;--theme-ui-colors-textClear:#6E707B;--theme-ui-colors-hoverBackground:#202020;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-background:#202022;--theme-ui-colors-backgroundClear:#28282C;--theme-ui-colors-primary:#4E54D7;--theme-ui-colors-secondary:#28282C;--theme-ui-colors-icons:#5D5D71;--theme-ui-colors-gray:#1D1D1F;--theme-ui-colors-borders:#3A3A46;--theme-ui-colors-deep:#28282C;--theme-ui-colors-headSection:#28282C;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-sidebar:#28282C;--theme-ui-colors-code-border:#5D5D6F;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;--theme-ui-colors-link:#A9A9C6;--theme-ui-colors-choggleBox:#fff;}</style><style data-emotion="css-global h19pgh">*{box-sizing:border-box;}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;line-height:1.5;font-weight:400;}body{margin:0;}</style><style data-emotion="css yvak7d">.css-yvak7d{box-sizing:border-box;margin:0;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:calc(100vh - 57px);width:100vw;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-yvak7d"><style data-emotion="css uqm8ih">.css-uqm8ih{box-sizing:border-box;margin:0;min-width:0;color:var(--theme-ui-colors-primary);overflow:visible;}</style><svg stroke-width="4" viewBox="0 0 32 32" width="48" height="48" fill="none" stroke="currentColor" role="img" id="spinner" class="css-uqm8ih"><title>Loading</title><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" opacity="0.125"></circle><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" stroke-dasharray="20 110"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 16 16" to="360 16 16" dur="750ms" repeatCount="indefinite"></animateTransform></circle></svg></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices/[lib]/[sliceName]/[variation]/screenshot","query":{},"buildId":"66ngFr7hhlaxMLWATvuAM","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
@@ -1 +1 @@
1
- <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Slice Machine</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/66b3836ab88b0c5c.css" as="style"/><link rel="stylesheet" href="/_next/static/css/66b3836ab88b0c5c.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-9a94be32e790ed15.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/72585f70-28b4d7d5384b3703.js" defer=""></script><script src="/_next/static/chunks/18539003-1bb05c8aa7db2bc2.js" defer=""></script><script src="/_next/static/chunks/746-2ca4784811bde7c1.js" defer=""></script><script src="/_next/static/chunks/909-e4eec905c21ad8ad.js" defer=""></script><script src="/_next/static/chunks/113-34b6cf41a62f08ce.js" defer=""></script><script src="/_next/static/chunks/pages/slices/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D/simulator-37ba73cd3c821e04.js" defer=""></script><script src="/_next/static/wb5LuWvZzzVC8U-R0CeTs/_buildManifest.js" defer=""></script><script src="/_next/static/wb5LuWvZzzVC8U-R0CeTs/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-emotion="css-global 413pep">html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;color:var(--theme-ui-colors-text);background-color:var(--theme-ui-colors-background);}html.theme-ui-light,.theme-ui-light html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;}html.theme-ui-dark,.theme-ui-dark html{--theme-ui-colors-text:#fff;--theme-ui-colors-textClear:#6E707B;--theme-ui-colors-hoverBackground:#202020;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-background:#202022;--theme-ui-colors-backgroundClear:#28282C;--theme-ui-colors-primary:#4E54D7;--theme-ui-colors-secondary:#28282C;--theme-ui-colors-icons:#5D5D71;--theme-ui-colors-gray:#1D1D1F;--theme-ui-colors-borders:#3A3A46;--theme-ui-colors-deep:#28282C;--theme-ui-colors-headSection:#28282C;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-sidebar:#28282C;--theme-ui-colors-code-border:#5D5D6F;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;--theme-ui-colors-link:#A9A9C6;--theme-ui-colors-choggleBox:#fff;}</style><style data-emotion="css-global h19pgh">*{box-sizing:border-box;}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;line-height:1.5;font-weight:400;}body{margin:0;}</style><style data-emotion="css yvak7d">.css-yvak7d{box-sizing:border-box;margin:0;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:calc(100vh - 57px);width:100vw;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-yvak7d"><style data-emotion="css uqm8ih">.css-uqm8ih{box-sizing:border-box;margin:0;min-width:0;color:var(--theme-ui-colors-primary);overflow:visible;}</style><svg stroke-width="4" viewBox="0 0 32 32" width="48" height="48" fill="none" stroke="currentColor" role="img" id="spinner" class="css-uqm8ih"><title>Loading</title><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" opacity="0.125"></circle><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" stroke-dasharray="20 110"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 16 16" to="360 16 16" dur="750ms" repeatCount="indefinite"></animateTransform></circle></svg></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices/[lib]/[sliceName]/[variation]/simulator","query":{},"buildId":"wb5LuWvZzzVC8U-R0CeTs","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
1
+ <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Slice Machine</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/66b3836ab88b0c5c.css" as="style"/><link rel="stylesheet" href="/_next/static/css/66b3836ab88b0c5c.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-4b020373096131e4.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/72585f70-28b4d7d5384b3703.js" defer=""></script><script src="/_next/static/chunks/18539003-1bb05c8aa7db2bc2.js" defer=""></script><script src="/_next/static/chunks/746-2ca4784811bde7c1.js" defer=""></script><script src="/_next/static/chunks/909-e4eec905c21ad8ad.js" defer=""></script><script src="/_next/static/chunks/113-34b6cf41a62f08ce.js" defer=""></script><script src="/_next/static/chunks/pages/slices/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D/simulator-37ba73cd3c821e04.js" defer=""></script><script src="/_next/static/66ngFr7hhlaxMLWATvuAM/_buildManifest.js" defer=""></script><script src="/_next/static/66ngFr7hhlaxMLWATvuAM/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-emotion="css-global 413pep">html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;color:var(--theme-ui-colors-text);background-color:var(--theme-ui-colors-background);}html.theme-ui-light,.theme-ui-light html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;}html.theme-ui-dark,.theme-ui-dark html{--theme-ui-colors-text:#fff;--theme-ui-colors-textClear:#6E707B;--theme-ui-colors-hoverBackground:#202020;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-background:#202022;--theme-ui-colors-backgroundClear:#28282C;--theme-ui-colors-primary:#4E54D7;--theme-ui-colors-secondary:#28282C;--theme-ui-colors-icons:#5D5D71;--theme-ui-colors-gray:#1D1D1F;--theme-ui-colors-borders:#3A3A46;--theme-ui-colors-deep:#28282C;--theme-ui-colors-headSection:#28282C;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-sidebar:#28282C;--theme-ui-colors-code-border:#5D5D6F;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;--theme-ui-colors-link:#A9A9C6;--theme-ui-colors-choggleBox:#fff;}</style><style data-emotion="css-global h19pgh">*{box-sizing:border-box;}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;line-height:1.5;font-weight:400;}body{margin:0;}</style><style data-emotion="css yvak7d">.css-yvak7d{box-sizing:border-box;margin:0;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:calc(100vh - 57px);width:100vw;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-yvak7d"><style data-emotion="css uqm8ih">.css-uqm8ih{box-sizing:border-box;margin:0;min-width:0;color:var(--theme-ui-colors-primary);overflow:visible;}</style><svg stroke-width="4" viewBox="0 0 32 32" width="48" height="48" fill="none" stroke="currentColor" role="img" id="spinner" class="css-uqm8ih"><title>Loading</title><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" opacity="0.125"></circle><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" stroke-dasharray="20 110"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 16 16" to="360 16 16" dur="750ms" repeatCount="indefinite"></animateTransform></circle></svg></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices/[lib]/[sliceName]/[variation]/simulator","query":{},"buildId":"66ngFr7hhlaxMLWATvuAM","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
@@ -1 +1 @@
1
- <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Slice Machine</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/66b3836ab88b0c5c.css" as="style"/><link rel="stylesheet" href="/_next/static/css/66b3836ab88b0c5c.css" data-n-g=""/><link rel="preload" href="/_next/static/css/a3838b28ab738f1e.css" as="style"/><link rel="stylesheet" href="/_next/static/css/a3838b28ab738f1e.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-9a94be32e790ed15.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/909-e4eec905c21ad8ad.js" defer=""></script><script src="/_next/static/chunks/573-8678a91b09707f5d.js" defer=""></script><script src="/_next/static/chunks/377-404ac40f863464df.js" defer=""></script><script src="/_next/static/chunks/pages/slices/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D-5b6c6912b66de61f.js" defer=""></script><script src="/_next/static/wb5LuWvZzzVC8U-R0CeTs/_buildManifest.js" defer=""></script><script src="/_next/static/wb5LuWvZzzVC8U-R0CeTs/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-emotion="css-global 413pep">html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;color:var(--theme-ui-colors-text);background-color:var(--theme-ui-colors-background);}html.theme-ui-light,.theme-ui-light html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;}html.theme-ui-dark,.theme-ui-dark html{--theme-ui-colors-text:#fff;--theme-ui-colors-textClear:#6E707B;--theme-ui-colors-hoverBackground:#202020;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-background:#202022;--theme-ui-colors-backgroundClear:#28282C;--theme-ui-colors-primary:#4E54D7;--theme-ui-colors-secondary:#28282C;--theme-ui-colors-icons:#5D5D71;--theme-ui-colors-gray:#1D1D1F;--theme-ui-colors-borders:#3A3A46;--theme-ui-colors-deep:#28282C;--theme-ui-colors-headSection:#28282C;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-sidebar:#28282C;--theme-ui-colors-code-border:#5D5D6F;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;--theme-ui-colors-link:#A9A9C6;--theme-ui-colors-choggleBox:#fff;}</style><style data-emotion="css-global h19pgh">*{box-sizing:border-box;}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;line-height:1.5;font-weight:400;}body{margin:0;}</style><style data-emotion="css yvak7d">.css-yvak7d{box-sizing:border-box;margin:0;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:calc(100vh - 57px);width:100vw;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-yvak7d"><style data-emotion="css uqm8ih">.css-uqm8ih{box-sizing:border-box;margin:0;min-width:0;color:var(--theme-ui-colors-primary);overflow:visible;}</style><svg stroke-width="4" viewBox="0 0 32 32" width="48" height="48" fill="none" stroke="currentColor" role="img" id="spinner" class="css-uqm8ih"><title>Loading</title><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" opacity="0.125"></circle><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" stroke-dasharray="20 110"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 16 16" to="360 16 16" dur="750ms" repeatCount="indefinite"></animateTransform></circle></svg></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices/[lib]/[sliceName]/[variation]","query":{},"buildId":"wb5LuWvZzzVC8U-R0CeTs","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
1
+ <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Slice Machine</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/66b3836ab88b0c5c.css" as="style"/><link rel="stylesheet" href="/_next/static/css/66b3836ab88b0c5c.css" data-n-g=""/><link rel="preload" href="/_next/static/css/a3838b28ab738f1e.css" as="style"/><link rel="stylesheet" href="/_next/static/css/a3838b28ab738f1e.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-4b020373096131e4.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/909-e4eec905c21ad8ad.js" defer=""></script><script src="/_next/static/chunks/573-8678a91b09707f5d.js" defer=""></script><script src="/_next/static/chunks/377-404ac40f863464df.js" defer=""></script><script src="/_next/static/chunks/pages/slices/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D-5b6c6912b66de61f.js" defer=""></script><script src="/_next/static/66ngFr7hhlaxMLWATvuAM/_buildManifest.js" defer=""></script><script src="/_next/static/66ngFr7hhlaxMLWATvuAM/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-emotion="css-global 413pep">html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;color:var(--theme-ui-colors-text);background-color:var(--theme-ui-colors-background);}html.theme-ui-light,.theme-ui-light html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;}html.theme-ui-dark,.theme-ui-dark html{--theme-ui-colors-text:#fff;--theme-ui-colors-textClear:#6E707B;--theme-ui-colors-hoverBackground:#202020;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-background:#202022;--theme-ui-colors-backgroundClear:#28282C;--theme-ui-colors-primary:#4E54D7;--theme-ui-colors-secondary:#28282C;--theme-ui-colors-icons:#5D5D71;--theme-ui-colors-gray:#1D1D1F;--theme-ui-colors-borders:#3A3A46;--theme-ui-colors-deep:#28282C;--theme-ui-colors-headSection:#28282C;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-sidebar:#28282C;--theme-ui-colors-code-border:#5D5D6F;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;--theme-ui-colors-link:#A9A9C6;--theme-ui-colors-choggleBox:#fff;}</style><style data-emotion="css-global h19pgh">*{box-sizing:border-box;}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;line-height:1.5;font-weight:400;}body{margin:0;}</style><style data-emotion="css yvak7d">.css-yvak7d{box-sizing:border-box;margin:0;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:calc(100vh - 57px);width:100vw;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-yvak7d"><style data-emotion="css uqm8ih">.css-uqm8ih{box-sizing:border-box;margin:0;min-width:0;color:var(--theme-ui-colors-primary);overflow:visible;}</style><svg stroke-width="4" viewBox="0 0 32 32" width="48" height="48" fill="none" stroke="currentColor" role="img" id="spinner" class="css-uqm8ih"><title>Loading</title><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" opacity="0.125"></circle><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" stroke-dasharray="20 110"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 16 16" to="360 16 16" dur="750ms" repeatCount="indefinite"></animateTransform></circle></svg></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices/[lib]/[sliceName]/[variation]","query":{},"buildId":"66ngFr7hhlaxMLWATvuAM","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
package/out/slices.html CHANGED
@@ -1 +1 @@
1
- <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Slice Machine</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/66b3836ab88b0c5c.css" as="style"/><link rel="stylesheet" href="/_next/static/css/66b3836ab88b0c5c.css" data-n-g=""/><link rel="preload" href="/_next/static/css/22d69420bda374a7.css" as="style"/><link rel="stylesheet" href="/_next/static/css/22d69420bda374a7.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-9a94be32e790ed15.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/590-ab38d53732035bf0.js" defer=""></script><script src="/_next/static/chunks/573-8678a91b09707f5d.js" defer=""></script><script src="/_next/static/chunks/pages/slices-b686960d7d228e36.js" defer=""></script><script src="/_next/static/wb5LuWvZzzVC8U-R0CeTs/_buildManifest.js" defer=""></script><script src="/_next/static/wb5LuWvZzzVC8U-R0CeTs/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-emotion="css-global 413pep">html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;color:var(--theme-ui-colors-text);background-color:var(--theme-ui-colors-background);}html.theme-ui-light,.theme-ui-light html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;}html.theme-ui-dark,.theme-ui-dark html{--theme-ui-colors-text:#fff;--theme-ui-colors-textClear:#6E707B;--theme-ui-colors-hoverBackground:#202020;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-background:#202022;--theme-ui-colors-backgroundClear:#28282C;--theme-ui-colors-primary:#4E54D7;--theme-ui-colors-secondary:#28282C;--theme-ui-colors-icons:#5D5D71;--theme-ui-colors-gray:#1D1D1F;--theme-ui-colors-borders:#3A3A46;--theme-ui-colors-deep:#28282C;--theme-ui-colors-headSection:#28282C;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-sidebar:#28282C;--theme-ui-colors-code-border:#5D5D6F;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;--theme-ui-colors-link:#A9A9C6;--theme-ui-colors-choggleBox:#fff;}</style><style data-emotion="css-global h19pgh">*{box-sizing:border-box;}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;line-height:1.5;font-weight:400;}body{margin:0;}</style><style data-emotion="css yvak7d">.css-yvak7d{box-sizing:border-box;margin:0;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:calc(100vh - 57px);width:100vw;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-yvak7d"><style data-emotion="css uqm8ih">.css-uqm8ih{box-sizing:border-box;margin:0;min-width:0;color:var(--theme-ui-colors-primary);overflow:visible;}</style><svg stroke-width="4" viewBox="0 0 32 32" width="48" height="48" fill="none" stroke="currentColor" role="img" id="spinner" class="css-uqm8ih"><title>Loading</title><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" opacity="0.125"></circle><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" stroke-dasharray="20 110"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 16 16" to="360 16 16" dur="750ms" repeatCount="indefinite"></animateTransform></circle></svg></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices","query":{},"buildId":"wb5LuWvZzzVC8U-R0CeTs","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
1
+ <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Slice Machine</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/66b3836ab88b0c5c.css" as="style"/><link rel="stylesheet" href="/_next/static/css/66b3836ab88b0c5c.css" data-n-g=""/><link rel="preload" href="/_next/static/css/22d69420bda374a7.css" as="style"/><link rel="stylesheet" href="/_next/static/css/22d69420bda374a7.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-4b020373096131e4.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/7-b30f3180efb6bb5b.js" defer=""></script><script src="/_next/static/chunks/573-8678a91b09707f5d.js" defer=""></script><script src="/_next/static/chunks/pages/slices-0cd502231524ba59.js" defer=""></script><script src="/_next/static/66ngFr7hhlaxMLWATvuAM/_buildManifest.js" defer=""></script><script src="/_next/static/66ngFr7hhlaxMLWATvuAM/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-emotion="css-global 413pep">html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;color:var(--theme-ui-colors-text);background-color:var(--theme-ui-colors-background);}html.theme-ui-light,.theme-ui-light html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;}html.theme-ui-dark,.theme-ui-dark html{--theme-ui-colors-text:#fff;--theme-ui-colors-textClear:#6E707B;--theme-ui-colors-hoverBackground:#202020;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-background:#202022;--theme-ui-colors-backgroundClear:#28282C;--theme-ui-colors-primary:#4E54D7;--theme-ui-colors-secondary:#28282C;--theme-ui-colors-icons:#5D5D71;--theme-ui-colors-gray:#1D1D1F;--theme-ui-colors-borders:#3A3A46;--theme-ui-colors-deep:#28282C;--theme-ui-colors-headSection:#28282C;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-sidebar:#28282C;--theme-ui-colors-code-border:#5D5D6F;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;--theme-ui-colors-link:#A9A9C6;--theme-ui-colors-choggleBox:#fff;}</style><style data-emotion="css-global h19pgh">*{box-sizing:border-box;}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;line-height:1.5;font-weight:400;}body{margin:0;}</style><style data-emotion="css yvak7d">.css-yvak7d{box-sizing:border-box;margin:0;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:calc(100vh - 57px);width:100vw;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-yvak7d"><style data-emotion="css uqm8ih">.css-uqm8ih{box-sizing:border-box;margin:0;min-width:0;color:var(--theme-ui-colors-primary);overflow:visible;}</style><svg stroke-width="4" viewBox="0 0 32 32" width="48" height="48" fill="none" stroke="currentColor" role="img" id="spinner" class="css-uqm8ih"><title>Loading</title><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" opacity="0.125"></circle><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" stroke-dasharray="20 110"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 16 16" to="360 16 16" dur="750ms" repeatCount="indefinite"></animateTransform></circle></svg></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices","query":{},"buildId":"66ngFr7hhlaxMLWATvuAM","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "slice-machine-ui",
3
- "version": "1.18.1-dev-next-release.6",
3
+ "version": "1.18.1-dev-next-release.7",
4
4
  "license": "MIT",
5
5
  "description": "A visual builder for your Slice Models with all the tools you need to generate data models and mock CMS content locally.",
6
6
  "repository": {
@@ -31,8 +31,8 @@
31
31
  "start-slicemachine": "./bin/start-slicemachine.cjs"
32
32
  },
33
33
  "dependencies": {
34
- "@slicemachine/manager": "^0.15.1-dev-next-release.6",
35
- "start-slicemachine": "^0.12.2-dev-next-release.6"
34
+ "@slicemachine/manager": "^0.15.1-dev-next-release.7",
35
+ "start-slicemachine": "^0.12.2-dev-next-release.7"
36
36
  },
37
37
  "devDependencies": {
38
38
  "@emotion/react": "11.11.1",
@@ -130,5 +130,5 @@
130
130
  "vitest": "0.32.0",
131
131
  "yup": "0.32.11"
132
132
  },
133
- "gitHead": "a37a5da56c950a8fd31a4d9818c4cacab68e3a99"
133
+ "gitHead": "5f14bfcce75e890dd32cd3f0b2fd2cab32fbf4bc"
134
134
  }
package/pages/slices.tsx CHANGED
@@ -27,7 +27,7 @@ import { SliceMachineStoreType } from "@src/redux/type";
27
27
  import useSliceMachineActions from "@src/modules/useSliceMachineActions";
28
28
  import { getLibraries, getRemoteSlices } from "@src/modules/slices";
29
29
  import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
30
- import { SharedSliceViewCard } from "@src/features/slices/sliceCards/SharedSliceViewCard";
30
+ import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
31
31
  import { SLICES_CONFIG } from "@src/features/slices/slicesConfig";
32
32
  import { SliceToastMessage } from "@components/ToasterContainer";
33
33
 
@@ -171,7 +171,7 @@ const SlicesIndex: React.FunctionComponent = () => {
171
171
  elems={components}
172
172
  defineElementKey={(slice) => slice.model.name}
173
173
  renderElem={(slice) => (
174
- <SharedSliceViewCard
174
+ <SharedSliceCard
175
175
  action={{
176
176
  type: "menu",
177
177
  onRemove: () => {
@@ -183,7 +183,7 @@ const SlicesIndex: React.FunctionComponent = () => {
183
183
  openRenameSliceModal();
184
184
  },
185
185
  }}
186
- isDeletedSlice={false}
186
+ mode="navigation"
187
187
  onUpdateScreenshot={() => {
188
188
  onOpenModal({
189
189
  sliceFilterFn: (s) =>
@@ -193,6 +193,7 @@ const SlicesIndex: React.FunctionComponent = () => {
193
193
  });
194
194
  }}
195
195
  slice={slice}
196
+ variant="solid"
196
197
  />
197
198
  )}
198
199
  gridGap="32px 16px"
@@ -25,8 +25,18 @@ export const size = styleVariants({
25
25
  });
26
26
 
27
27
  export const variant = styleVariants({
28
- solid: [sprinkles({ backgroundColor: colors.grey3 })],
29
- outlined: [sprinkles({ backgroundColor: colors.grey2 })],
28
+ solid: [
29
+ sprinkles({
30
+ backgroundColor: colors.grey3,
31
+ borderColor: selectors.checked(colors.purple10),
32
+ }),
33
+ ],
34
+ outlined: [
35
+ sprinkles({
36
+ backgroundColor: colors.grey2,
37
+ borderColor: selectors.checked(colors.purple8),
38
+ }),
39
+ ],
30
40
  });
31
41
 
32
42
  export const interactive = style({
@@ -40,10 +50,7 @@ export const interactive = style({
40
50
  export const interactiveVariant = {
41
51
  solid: sprinkles({
42
52
  backgroundColor: selectors.focusVisible(colors.grey5),
43
- borderColor: {
44
- ...selectors.checked(colors.purple10),
45
- ...selectors.focusVisible(colors.purple10),
46
- },
53
+ borderColor: selectors.focusVisible(colors.purple10),
47
54
  }),
48
55
  outlined: sprinkles({
49
56
  backgroundColor: {
@@ -53,7 +60,6 @@ export const interactiveVariant = {
53
60
  },
54
61
  borderColor: {
55
62
  ...selectors.active(colors.purple9),
56
- ...selectors.checked(colors.purple8),
57
63
  ...selectors.focusVisible(colors.purple8),
58
64
  },
59
65
  }),
@@ -20,12 +20,12 @@ type Story = StoryObj<typeof meta>;
20
20
  const meta = {
21
21
  component: Card,
22
22
  argTypes: {
23
- checked: { if: { arg: "interactive" } },
24
23
  children: { control: { disable: true } },
25
24
  component: { control: { disable: true }, if: { arg: "interactive" } },
26
25
  disabled: { if: { arg: "interactive" } },
27
26
  href: { if: { arg: "interactive" } },
28
27
  onClick: { if: { arg: "interactive" } },
28
+ replace: { if: { arg: "interactive" } },
29
29
  size: { control: "select", options: ["small", "medium"] },
30
30
  variant: { control: "select", options: ["solid", "outlined"] },
31
31
  },
@@ -35,6 +35,7 @@ export default meta;
35
35
 
36
36
  export const Default = {
37
37
  args: {
38
+ checked: false,
38
39
  children: (
39
40
  <>
40
41
  <CardMedia overlay={<></>} />
@@ -17,88 +17,101 @@ import * as styles from "./Card.css";
17
17
 
18
18
  type CardProps = PropsWithChildren<
19
19
  {
20
+ checked?: boolean;
20
21
  size?: keyof typeof styles.size;
21
22
  style?: CSSProperties;
22
23
  variant?: keyof typeof styles.variant;
23
24
  } & (
24
- | { interactive?: false }
25
- | ({ interactive: true; href: string } & {
26
- component?: "a" | FC<LinkProps>;
27
- })
28
- | ({ interactive: true; href?: undefined } & {
29
- checked?: boolean;
25
+ | // Props for rendering a non-interactive `div` element.
26
+ NarrowedCardProps<{ interactive?: false }>
27
+ // Props for rendering an interactive `div` element.
28
+ | NarrowedCardProps<{
29
+ interactive: true;
30
30
  disabled?: boolean;
31
31
  onClick?: (event: MouseEvent) => void;
32
- })
32
+ }>
33
+ // Props for rendering an `a` element.
34
+ | NarrowedCardProps<{ interactive: true; href: string; component?: "a" }>
35
+ // Props for rendering any link `component`.
36
+ | NarrowedCardProps<{
37
+ interactive: true;
38
+ href: string;
39
+ component: FC<LinkProps>;
40
+ replace?: boolean;
41
+ }>
33
42
  )
34
43
  >;
35
44
 
45
+ // This type is used to spread the `Card`'s `otherProps` before they can be
46
+ // narrowed down.
47
+ type NarrowedCardProps<T> = NarrowedProps<
48
+ T,
49
+ "component" | "disabled" | "href" | "interactive" | "onClick" | "replace"
50
+ >;
51
+
52
+ /**
53
+ * Construct a type with the properties of T and a set of optional properties K
54
+ * (excluding those already in type T).
55
+ */
56
+ type NarrowedProps<T, K extends PropertyKey> = T &
57
+ Omit<Partial<Record<K, never>>, keyof T>;
58
+
36
59
  type LinkProps = {
37
60
  href: string | UrlObject;
38
61
  onClick?: (event: MouseEvent) => void;
39
62
  };
40
63
 
41
64
  export const Card: FC<CardProps> = (props) => {
42
- const { size = "medium", variant = "solid" } = props;
65
+ const {
66
+ checked = false,
67
+ size = "medium",
68
+ variant = "solid",
69
+ interactive: _interactive,
70
+ disabled: _disabled,
71
+ onClick: _onClick,
72
+ href: _href,
73
+ component = "a",
74
+ replace: _replace,
75
+ ...otherProps
76
+ } = props;
43
77
  const elementProps = {
78
+ ...otherProps,
44
79
  className: clsx(styles.root, styles.size[size], styles.variant[variant], {
45
80
  [styles.interactive]: props.interactive,
46
81
  [styles.interactiveVariant[variant]]: props.interactive,
47
82
  }),
83
+ "data-state": checked === true ? "checked" : undefined,
48
84
  };
49
85
  if (props.interactive === true && props.href === undefined) {
50
- const {
51
- size: _size,
52
- variant: _variant,
53
- interactive: _interactive,
54
- checked,
55
- disabled,
56
- onClick,
57
- ...otherProps
58
- } = props;
59
86
  return (
60
87
  <div
61
- {...otherProps}
62
88
  {...elementProps}
63
89
  // TODO: add missing ARIA attributes and keyboard event handlers.
64
- data-disabled={disabled === true ? "" : undefined}
65
- data-state={checked === true ? "checked" : undefined}
90
+ data-disabled={props.disabled === true ? "" : undefined}
66
91
  onClick={(event) => {
67
- if (disabled === true || onClick === undefined) return;
92
+ if (props.disabled === true || props.onClick === undefined) return;
68
93
  const target = event.target as HTMLElement;
69
94
  if (findFocusableAncestor(target) === event.currentTarget) {
70
- onClick(event);
95
+ props.onClick(event);
71
96
  }
72
97
  }}
73
- tabIndex={disabled === true ? undefined : 0}
98
+ tabIndex={props.disabled === true ? undefined : 0}
74
99
  />
75
100
  );
76
101
  } else if (props.interactive === true) {
77
- const {
78
- size: _size,
79
- variant: _variant,
80
- interactive: _interactive,
81
- component = "a",
82
- ...otherProps
83
- } = props;
84
102
  return createElement(component, {
85
- ...otherProps,
86
103
  ...elementProps,
104
+ href: props.href,
87
105
  onClick: (event) => {
88
106
  const target = event.target as HTMLElement;
89
107
  if (findFocusableAncestor(target) !== event.currentTarget) {
90
108
  event.preventDefault();
91
109
  }
92
110
  },
111
+ ...(component === "a" ? {} : { replace: props.replace }),
93
112
  });
94
113
  } else {
95
- const {
96
- size: _size,
97
- variant: _variant,
98
- interactive: _interactive,
99
- ...otherProps
100
- } = props;
101
- return <div {...otherProps} {...elementProps} />;
114
+ return <div {...elementProps} />;
102
115
  }
103
116
  };
104
117
 
@@ -20,7 +20,7 @@ import useSliceMachineActions from "@src/modules/useSliceMachineActions";
20
20
  import { ToasterType } from "@src/modules/toaster";
21
21
  import { getFieldMappingFingerprint } from "@src/domain/slice";
22
22
 
23
- import { NonSharedSliceViewCardProps } from "../sliceCards/NonSharedSliceViewCard";
23
+ import { NonSharedSliceCardProps } from "../sliceCards/NonSharedSliceCard";
24
24
  import { ConvertLegacySliceAsNewSliceDialog } from "./ConvertLegacySliceAsNewSliceDialog";
25
25
  import { ConvertLegacySliceAsNewVariationDialog } from "./ConvertLegacySliceAsNewVariationDialog";
26
26
  import { ConvertLegacySliceMergeWithIdenticalDialog } from "./ConvertLegacySliceMergeWithIdenticalDialog";
@@ -30,7 +30,7 @@ import {
30
30
  LegacySliceConversionType,
31
31
  } from "./types";
32
32
 
33
- type ConvertLegacySliceButtonProps = NonSharedSliceViewCardProps;
33
+ type ConvertLegacySliceButtonProps = NonSharedSliceCardProps;
34
34
 
35
35
  export const ConvertLegacySliceButton: FC<ConvertLegacySliceButtonProps> = ({
36
36
  slice,
@@ -1,7 +1,7 @@
1
1
  import { LibraryUI } from "@models/common/LibraryUI";
2
2
  import { ComponentUI } from "@models/common/ComponentUI";
3
3
 
4
- import { NonSharedSliceViewCardProps } from "../sliceCards/NonSharedSliceViewCard";
4
+ import { NonSharedSliceCardProps } from "../sliceCards/NonSharedSliceCard";
5
5
 
6
6
  export type ConvertLegacySliceAndTrackArgs = {
7
7
  libraryID: string;
@@ -34,4 +34,4 @@ export type DialogProps = {
34
34
  libraries: readonly LibraryUI[];
35
35
  localSharedSlices: ComponentUI[];
36
36
  identicalSlices: IdenticalSlice[];
37
- } & Pick<NonSharedSliceViewCardProps, "path" | "slice">;
37
+ } & Pick<NonSharedSliceCardProps, "path" | "slice">;
@@ -8,7 +8,7 @@ import { useLab } from "@src/features/labs/labsList/useLab";
8
8
 
9
9
  import { ConvertLegacySliceButton } from "../convertLegacySlice/ConvertLegacySliceButton";
10
10
 
11
- export type NonSharedSliceViewCardProps = {
11
+ export type NonSharedSliceCardProps = {
12
12
  slice: NonSharedSliceInSliceZone;
13
13
  path: {
14
14
  customTypeID: string;
@@ -17,7 +17,7 @@ export type NonSharedSliceViewCardProps = {
17
17
  };
18
18
  };
19
19
 
20
- export const NonSharedSliceViewCard: FC<NonSharedSliceViewCardProps> = ({
20
+ export const NonSharedSliceCard: FC<NonSharedSliceCardProps> = ({
21
21
  slice,
22
22
  path,
23
23
  }) => {