@media-quest/builder 0.0.39 → 0.0.41

package/src/theme/icon-urls.ts

@@ -1,29 +1,29 @@
-export const IconUrls = {
-  ispeWhitePng:
-    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fispe-hvit.png?alt=media&token=f6fe628b-2d99-472d-a2ea-e062873e2e22",
-  pauseSvg:
-    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fpause-24px.svg?alt=media&token=47337491-bb0d-4c56-9c89-a073ce19fad4",
-  pauseCircleOutlineSvg:
-    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fpause_circle_outline-24px.svg?alt=media&token=133aabc8-ab9a-4eaa-9914-4f0f82c22ee2",
-
-  pauseCircleFilledSvg:
-    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fpause_circle_filled-24px.svg?alt=media&token=af3f12c3-3199-4096-8ed2-76347b9a0a0a",
-  playCircleRegular:
-    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fplay-circle-regular.svg?alt=media&token=0867b690-d7fd-475c-8e91-b2d7aeca54d1",
-  playArrowSvg:
-    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fplay_arrow-24px.svg?alt=media&token=2fa95e1f-61f7-4a18-afb3-210eabae8227",
-  playCircleOutline:
-    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fplay_circle_outline-24px.svg?alt=media&token=3a9f62c5-dfa2-40ef-a50e-cf1bdd2d47f2",
-
-  stopCircleSvg:
-    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fstop_circle-24px.svg?alt=media&token=8fbc8b89-29bb-49ad-ae11-b8882ba3ca77",
-  stopSvg:
-    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fstop-24px.svg?alt=media&token=d2cd41f1-1331-4243-9b7a-dc0f0ccd255d",
-  replayCircleSvg:
-    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Freplay-24px.svg?alt=media&token=3c35ccf4-b467-4e81-85d6-b36ac64738ad",
-
-  volumeOffSvg:
-    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fvolume_off-24px.svg?alt=media&token=4e41cc10-9f4b-4967-b4df-ed0682e657a9",
-  volumeUpSvg:
-    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fvolume_up-24px.svg?alt=media&token=551bd0a6-a515-4f87-a245-da433f4833f9",
-};
+export const IconUrls = {
+  ispeWhitePng:
+    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fispe-hvit.png?alt=media&token=f6fe628b-2d99-472d-a2ea-e062873e2e22",
+  pauseSvg:
+    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fpause-24px.svg?alt=media&token=47337491-bb0d-4c56-9c89-a073ce19fad4",
+  pauseCircleOutlineSvg:
+    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fpause_circle_outline-24px.svg?alt=media&token=133aabc8-ab9a-4eaa-9914-4f0f82c22ee2",
+
+  pauseCircleFilledSvg:
+    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fpause_circle_filled-24px.svg?alt=media&token=af3f12c3-3199-4096-8ed2-76347b9a0a0a",
+  playCircleRegular:
+    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fplay-circle-regular.svg?alt=media&token=0867b690-d7fd-475c-8e91-b2d7aeca54d1",
+  playArrowSvg:
+    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fplay_arrow-24px.svg?alt=media&token=2fa95e1f-61f7-4a18-afb3-210eabae8227",
+  playCircleOutline:
+    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fplay_circle_outline-24px.svg?alt=media&token=3a9f62c5-dfa2-40ef-a50e-cf1bdd2d47f2",
+
+  stopCircleSvg:
+    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fstop_circle-24px.svg?alt=media&token=8fbc8b89-29bb-49ad-ae11-b8882ba3ca77",
+  stopSvg:
+    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fstop-24px.svg?alt=media&token=d2cd41f1-1331-4243-9b7a-dc0f0ccd255d",
+  replayCircleSvg:
+    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Freplay-24px.svg?alt=media&token=3c35ccf4-b467-4e81-85d6-b36ac64738ad",
+
+  volumeOffSvg:
+    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fvolume_off-24px.svg?alt=media&token=4e41cc10-9f4b-4967-b4df-ed0682e657a9",
+  volumeUpSvg:
+    "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fvolume_up-24px.svg?alt=media&token=551bd0a6-a515-4f87-a245-da433f4833f9",
+};

package/src/theme/icons.ts

@@ -1,117 +1,117 @@
-const UN_MUTE = `
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M8 15.5661V23.4339H13.3333L20 29.9903V9.00969L13.3333 15.5661H8ZM26 19.5C26 17.179 24.64 15.1859 22.6667 14.2155V24.7714C24.64 23.8141 26 21.821 26 19.5ZM22.6667 8V10.7013C26.52 11.829 29.3333 15.3432 29.3333 19.5C29.3333 23.6568 26.52 27.171 22.6667 28.2987V31C28.0133 29.8067 32 25.1123 32 19.5C32 13.8877 28.0133 9.19327 22.6667 8Z" fill="#164AC4"/>
-</svg>`;
-
-const MUTE = `
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M26 20C26 17.64 24.64 15.6133 22.6667 14.6267V17.5733L25.9333 20.84C25.9733 20.5733 26 20.2933 26 20ZM29.3333 20C29.3333 21.2533 29.0667 22.4267 28.6133 23.52L30.6267 25.5333C31.5067 23.88 32 22 32 20C32 14.2933 28.0133 9.52 22.6667 8.30667V11.0533C26.52 12.2 29.3333 15.7733 29.3333 20ZM9.69333 8L8 9.69333L14.3067 16H8V24H13.3333L20 30.6667V21.6933L25.6667 27.36C24.7733 28.0533 23.7733 28.6 22.6667 28.9333V31.68C24.5067 31.2667 26.1733 30.4133 27.5867 29.2667L30.3067 32L32 30.3067L20 18.3067L9.69333 8ZM20 9.33333L17.2133 12.12L20 14.9067V9.33333Z" fill="#164AC4"/>
-</svg>`;
-
-const PLAY_SOUND = `
-
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#clip0_1_299)">
-    <path d="M13.5 19.5C16.8137 19.5 19.5 16.8137 19.5 13.5C19.5 10.1863 16.8137 7.5 13.5 7.5C10.1863 7.5 7.5 10.1863 7.5 13.5C7.5 16.8137 10.1863 19.5 13.5 19.5Z" fill="#164AC4"/>
-    <path d="M13.5 22.5C9.495 22.5 1.5 24.51 1.5 28.5V31.5H25.5V28.5C25.5 24.51 17.505 22.5 13.5 22.5ZM25.14 8.04L22.62 10.575C23.88 12.345 23.88 14.64 22.62 16.41L25.14 18.945C28.17 15.915 28.17 11.34 25.14 8.04ZM30.105 3L27.66 5.445C31.815 9.975 31.815 16.785 27.66 21.555L30.105 24C35.955 18.165 35.97 9.075 30.105 3Z" fill="#164AC4"/>
-  </g>
-  <defs>
-    <clipPath id="clip0_1_299">
-      <rect width="36" height="36" fill="white"/>
-    </clipPath>
-  </defs>
-</svg>`;
-
-const CLOSE = `
-<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M20 0.799988C8.94 0.799988 0 9.73999 0 20.8C0 31.86 8.94 40.8 20 40.8C31.06 40.8 40 31.86 40 20.8C40 9.73999 31.06 0.799988 20 0.799988ZM30 27.98L27.18 30.8L20 23.62L12.82 30.8L10 27.98L17.18 20.8L10 13.62L12.82 10.8L20 17.98L27.18 10.8L30 13.62L22.82 20.8L30 27.98Z" fill="white"/>
-</svg>`;
-
-const COMPLETED = `
-<svg width="36" height="27" viewBox="0 0 36 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M11.2 21.2L2.8 12.8L0 15.6L11.2 26.8L35.2 2.8L32.4 0L11.2 21.2Z" fill="white"/>
-</svg>`;
-
-const VIDEO_PLAY = `
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M16 12V28L29 20L16 12Z" fill="#164AC4"/>
-</svg>`;
-
-const VIDEO_REPLAY = `
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M20 12.8V8L13.75 14L20 20V15.2C24.1375 15.2 27.5 18.428 27.5 22.4C27.5 26.372 24.1375 29.6 20 29.6C15.8625 29.6 12.5 26.372 12.5 22.4H10C10 27.704 14.475 32 20 32C25.525 32 30 27.704 30 22.4C30 17.096 25.525 12.8 20 12.8Z" fill="#164AC4"/>
-</svg>`;
-
-const HELP = `
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M20 0C8.96 0 0 8.96 0 20C0 31.04 8.96 40 20 40C31.04 40 40 31.04 40 20C40 8.96 31.04 0 20 0ZM22 34H18V30H22V34ZM26.14 18.5L24.34 20.34C22.9 21.8 22 23 22 26H18V25C18 22.8 18.9 20.8 20.34 19.34L22.82 16.82C23.56 16.1 24 15.1 24 14C24 11.8 22.2 10 20 10C17.8 10 16 11.8 16 14H12C12 9.58 15.58 6 20 6C24.42 6 28 9.58 28 14C28 15.76 27.28 17.36 26.14 18.5Z" fill="#164AC4"/>
-</svg>`;
-
-const VIDEO_PAUSE = `
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M13 28H17.6667V12H13V28ZM22.3333 12V28H27V12H22.3333Z" fill="#164AC4"/>
-</svg>`;
-
-/**
- * Will only work in browsers (btoa-function.)
- * @param svg
- */
-const createDataUrl = (svg: string) => {
-  return `data:image/svg+xml;base64,${btoa(svg)}`;
-};
-
-export const THEME_2_ICONS = {
-  unMute: {
-    svg: UN_MUTE,
-    dataUrl:
-      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTggMTUuNTY2MVYyMy40MzM5SDEzLjMzMzNMMjAgMjkuOTkwM1Y5LjAwOTY5TDEzLjMzMzMgMTUuNTY2MUg4Wk0yNiAxOS41QzI2IDE3LjE3OSAyNC42NCAxNS4xODU5IDIyLjY2NjcgMTQuMjE1NVYyNC43NzE0QzI0LjY0IDIzLjgxNDEgMjYgMjEuODIxIDI2IDE5LjVaTTIyLjY2NjcgOFYxMC43MDEzQzI2LjUyIDExLjgyOSAyOS4zMzMzIDE1LjM0MzIgMjkuMzMzMyAxOS41QzI5LjMzMzMgMjMuNjU2OCAyNi41MiAyNy4xNzEgMjIuNjY2NyAyOC4yOTg3VjMxQzI4LjAxMzMgMjkuODA2NyAzMiAyNS4xMTIzIDMyIDE5LjVDMzIgMTMuODg3NyAyOC4wMTMzIDkuMTkzMjcgMjIuNjY2NyA4WiIgZmlsbD0iIzE2NEFDNCIvPgo8L3N2Zz4=",
-  },
-
-  mute: {
-    svg: MUTE,
-    dataUrl:
-      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTI2IDIwQzI2IDE3LjY0IDI0LjY0IDE1LjYxMzMgMjIuNjY2NyAxNC42MjY3VjE3LjU3MzNMMjUuOTMzMyAyMC44NEMyNS45NzMzIDIwLjU3MzMgMjYgMjAuMjkzMyAyNiAyMFpNMjkuMzMzMyAyMEMyOS4zMzMzIDIxLjI1MzMgMjkuMDY2NyAyMi40MjY3IDI4LjYxMzMgMjMuNTJMMzAuNjI2NyAyNS41MzMzQzMxLjUwNjcgMjMuODggMzIgMjIgMzIgMjBDMzIgMTQuMjkzMyAyOC4wMTMzIDkuNTIgMjIuNjY2NyA4LjMwNjY3VjExLjA1MzNDMjYuNTIgMTIuMiAyOS4zMzMzIDE1Ljc3MzMgMjkuMzMzMyAyMFpNOS42OTMzMyA4TDggOS42OTMzM0wxNC4zMDY3IDE2SDhWMjRIMTMuMzMzM0wyMCAzMC42NjY3VjIxLjY5MzNMMjUuNjY2NyAyNy4zNkMyNC43NzMzIDI4LjA1MzMgMjMuNzczMyAyOC42IDIyLjY2NjcgMjguOTMzM1YzMS42OEMyNC41MDY3IDMxLjI2NjcgMjYuMTczMyAzMC40MTMzIDI3LjU4NjcgMjkuMjY2N0wzMC4zMDY3IDMyTDMyIDMwLjMwNjdMMjAgMTguMzA2N0w5LjY5MzMzIDhaTTIwIDkuMzMzMzNMMTcuMjEzMyAxMi4xMkwyMCAxNC45MDY3VjkuMzMzMzNaIiBmaWxsPSIjMTY0QUM0Ii8+Cjwvc3ZnPg==",
-  },
-
-  audioPlay: {
-    svg: PLAY_SOUND,
-    dataUrl:
-      "data:image/svg+xml;base64,Cgo8c3ZnIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8xXzI5OSkiPgogICAgPHBhdGggZD0iTTEzLjUgMTkuNUMxNi44MTM3IDE5LjUgMTkuNSAxNi44MTM3IDE5LjUgMTMuNUMxOS41IDEwLjE4NjMgMTYuODEzNyA3LjUgMTMuNSA3LjVDMTAuMTg2MyA3LjUgNy41IDEwLjE4NjMgNy41IDEzLjVDNy41IDE2LjgxMzcgMTAuMTg2MyAxOS41IDEzLjUgMTkuNVoiIGZpbGw9IiMxNjRBQzQiLz4KICAgIDxwYXRoIGQ9Ik0xMy41IDIyLjVDOS40OTUgMjIuNSAxLjUgMjQuNTEgMS41IDI4LjVWMzEuNUgyNS41VjI4LjVDMjUuNSAyNC41MSAxNy41MDUgMjIuNSAxMy41IDIyLjVaTTI1LjE0IDguMDRMMjIuNjIgMTAuNTc1QzIzLjg4IDEyLjM0NSAyMy44OCAxNC42NCAyMi42MiAxNi40MUwyNS4xNCAxOC45NDVDMjguMTcgMTUuOTE1IDI4LjE3IDExLjM0IDI1LjE0IDguMDRaTTMwLjEwNSAzTDI3LjY2IDUuNDQ1QzMxLjgxNSA5Ljk3NSAzMS44MTUgMTYuNzg1IDI3LjY2IDIxLjU1NUwzMC4xMDUgMjRDMzUuOTU1IDE4LjE2NSAzNS45NyA5LjA3NSAzMC4xMDUgM1oiIGZpbGw9IiMxNjRBQzQiLz4KICA8L2c+CiAgPGRlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAwXzFfMjk5Ij4KICAgICAgPHJlY3Qgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiBmaWxsPSJ3aGl0ZSIvPgogICAgPC9jbGlwUGF0aD4KICA8L2RlZnM+Cjwvc3ZnPg==",
-  },
-
-  videoPause: {
-    svg: VIDEO_PAUSE,
-    dataUrl:
-      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEzIDI4SDE3LjY2NjdWMTJIMTNWMjhaTTIyLjMzMzMgMTJWMjhIMjdWMTJIMjIuMzMzM1oiIGZpbGw9IiMxNjRBQzQiLz4KPC9zdmc+",
-  },
-
-  videoPlay: {
-    svg: VIDEO_PLAY,
-    dataUrl:
-      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE2IDEyVjI4TDI5IDIwTDE2IDEyWiIgZmlsbD0iIzE2NEFDNCIvPgo8L3N2Zz4=",
-  },
-
-  videoReplay: {
-    svg: VIDEO_REPLAY,
-    dataUrl:
-      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTIwIDEyLjhWOEwxMy43NSAxNEwyMCAyMFYxNS4yQzI0LjEzNzUgMTUuMiAyNy41IDE4LjQyOCAyNy41IDIyLjRDMjcuNSAyNi4zNzIgMjQuMTM3NSAyOS42IDIwIDI5LjZDMTUuODYyNSAyOS42IDEyLjUgMjYuMzcyIDEyLjUgMjIuNEgxMEMxMCAyNy43MDQgMTQuNDc1IDMyIDIwIDMyQzI1LjUyNSAzMiAzMCAyNy43MDQgMzAgMjIuNEMzMCAxNy4wOTYgMjUuNTI1IDEyLjggMjAgMTIuOFoiIGZpbGw9IiMxNjRBQzQiLz4KPC9zdmc+",
-  },
-
-  close: {
-    svg: CLOSE,
-    dataUrl:
-      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQxIiB2aWV3Qm94PSIwIDAgNDAgNDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTIwIDAuNzk5OTg4QzguOTQgMC43OTk5ODggMCA5LjczOTk5IDAgMjAuOEMwIDMxLjg2IDguOTQgNDAuOCAyMCA0MC44QzMxLjA2IDQwLjggNDAgMzEuODYgNDAgMjAuOEM0MCA5LjczOTk5IDMxLjA2IDAuNzk5OTg4IDIwIDAuNzk5OTg4Wk0zMCAyNy45OEwyNy4xOCAzMC44TDIwIDIzLjYyTDEyLjgyIDMwLjhMMTAgMjcuOThMMTcuMTggMjAuOEwxMCAxMy42MkwxMi44MiAxMC44TDIwIDE3Ljk4TDI3LjE4IDEwLjhMMzAgMTMuNjJMMjIuODIgMjAuOEwzMCAyNy45OFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPg==",
-  },
-
-  complete: {
-    svg: COMPLETED,
-    dataUrl:
-      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjM2IiBoZWlnaHQ9IjI3IiB2aWV3Qm94PSIwIDAgMzYgMjciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTExLjIgMjEuMkwyLjggMTIuOEwwIDE1LjZMMTEuMiAyNi44TDM1LjIgMi44TDMyLjQgMEwxMS4yIDIxLjJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=",
-  },
-
-  help: {
-    svg: HELP,
-    dataUrl:
-      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTIwIDBDOC45NiAwIDAgOC45NiAwIDIwQzAgMzEuMDQgOC45NiA0MCAyMCA0MEMzMS4wNCA0MCA0MCAzMS4wNCA0MCAyMEM0MCA4Ljk2IDMxLjA0IDAgMjAgMFpNMjIgMzRIMThWMzBIMjJWMzRaTTI2LjE0IDE4LjVMMjQuMzQgMjAuMzRDMjIuOSAyMS44IDIyIDIzIDIyIDI2SDE4VjI1QzE4IDIyLjggMTguOSAyMC44IDIwLjM0IDE5LjM0TDIyLjgyIDE2LjgyQzIzLjU2IDE2LjEgMjQgMTUuMSAyNCAxNEMyNCAxMS44IDIyLjIgMTAgMjAgMTBDMTcuOCAxMCAxNiAxMS44IDE2IDE0SDEyQzEyIDkuNTggMTUuNTggNiAyMCA2QzI0LjQyIDYgMjggOS41OCAyOCAxNEMyOCAxNS43NiAyNy4yOCAxNy4zNiAyNi4xNCAxOC41WiIgZmlsbD0iIzE2NEFDNCIvPgo8L3N2Zz4=",
-  },
-};
+const UN_MUTE = `
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 15.5661V23.4339H13.3333L20 29.9903V9.00969L13.3333 15.5661H8ZM26 19.5C26 17.179 24.64 15.1859 22.6667 14.2155V24.7714C24.64 23.8141 26 21.821 26 19.5ZM22.6667 8V10.7013C26.52 11.829 29.3333 15.3432 29.3333 19.5C29.3333 23.6568 26.52 27.171 22.6667 28.2987V31C28.0133 29.8067 32 25.1123 32 19.5C32 13.8877 28.0133 9.19327 22.6667 8Z" fill="#164AC4"/>
+</svg>`;
+
+const MUTE = `
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M26 20C26 17.64 24.64 15.6133 22.6667 14.6267V17.5733L25.9333 20.84C25.9733 20.5733 26 20.2933 26 20ZM29.3333 20C29.3333 21.2533 29.0667 22.4267 28.6133 23.52L30.6267 25.5333C31.5067 23.88 32 22 32 20C32 14.2933 28.0133 9.52 22.6667 8.30667V11.0533C26.52 12.2 29.3333 15.7733 29.3333 20ZM9.69333 8L8 9.69333L14.3067 16H8V24H13.3333L20 30.6667V21.6933L25.6667 27.36C24.7733 28.0533 23.7733 28.6 22.6667 28.9333V31.68C24.5067 31.2667 26.1733 30.4133 27.5867 29.2667L30.3067 32L32 30.3067L20 18.3067L9.69333 8ZM20 9.33333L17.2133 12.12L20 14.9067V9.33333Z" fill="#164AC4"/>
+</svg>`;
+
+const PLAY_SOUND = `
+
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1_299)">
+    <path d="M13.5 19.5C16.8137 19.5 19.5 16.8137 19.5 13.5C19.5 10.1863 16.8137 7.5 13.5 7.5C10.1863 7.5 7.5 10.1863 7.5 13.5C7.5 16.8137 10.1863 19.5 13.5 19.5Z" fill="#164AC4"/>
+    <path d="M13.5 22.5C9.495 22.5 1.5 24.51 1.5 28.5V31.5H25.5V28.5C25.5 24.51 17.505 22.5 13.5 22.5ZM25.14 8.04L22.62 10.575C23.88 12.345 23.88 14.64 22.62 16.41L25.14 18.945C28.17 15.915 28.17 11.34 25.14 8.04ZM30.105 3L27.66 5.445C31.815 9.975 31.815 16.785 27.66 21.555L30.105 24C35.955 18.165 35.97 9.075 30.105 3Z" fill="#164AC4"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1_299">
+      <rect width="36" height="36" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>`;
+
+const CLOSE = `
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20 0.799988C8.94 0.799988 0 9.73999 0 20.8C0 31.86 8.94 40.8 20 40.8C31.06 40.8 40 31.86 40 20.8C40 9.73999 31.06 0.799988 20 0.799988ZM30 27.98L27.18 30.8L20 23.62L12.82 30.8L10 27.98L17.18 20.8L10 13.62L12.82 10.8L20 17.98L27.18 10.8L30 13.62L22.82 20.8L30 27.98Z" fill="white"/>
+</svg>`;
+
+const COMPLETED = `
+<svg width="36" height="27" viewBox="0 0 36 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.2 21.2L2.8 12.8L0 15.6L11.2 26.8L35.2 2.8L32.4 0L11.2 21.2Z" fill="white"/>
+</svg>`;
+
+const VIDEO_PLAY = `
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 12V28L29 20L16 12Z" fill="#164AC4"/>
+</svg>`;
+
+const VIDEO_REPLAY = `
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20 12.8V8L13.75 14L20 20V15.2C24.1375 15.2 27.5 18.428 27.5 22.4C27.5 26.372 24.1375 29.6 20 29.6C15.8625 29.6 12.5 26.372 12.5 22.4H10C10 27.704 14.475 32 20 32C25.525 32 30 27.704 30 22.4C30 17.096 25.525 12.8 20 12.8Z" fill="#164AC4"/>
+</svg>`;
+
+const HELP = `
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20 0C8.96 0 0 8.96 0 20C0 31.04 8.96 40 20 40C31.04 40 40 31.04 40 20C40 8.96 31.04 0 20 0ZM22 34H18V30H22V34ZM26.14 18.5L24.34 20.34C22.9 21.8 22 23 22 26H18V25C18 22.8 18.9 20.8 20.34 19.34L22.82 16.82C23.56 16.1 24 15.1 24 14C24 11.8 22.2 10 20 10C17.8 10 16 11.8 16 14H12C12 9.58 15.58 6 20 6C24.42 6 28 9.58 28 14C28 15.76 27.28 17.36 26.14 18.5Z" fill="#164AC4"/>
+</svg>`;
+
+const VIDEO_PAUSE = `
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13 28H17.6667V12H13V28ZM22.3333 12V28H27V12H22.3333Z" fill="#164AC4"/>
+</svg>`;
+
+/**
+ * Will only work in browsers (btoa-function.)
+ * @param svg
+ */
+const createDataUrl = (svg: string) => {
+  return `data:image/svg+xml;base64,${btoa(svg)}`;
+};
+
+export const THEME_2_ICONS = {
+  unMute: {
+    svg: UN_MUTE,
+    dataUrl:
+      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTggMTUuNTY2MVYyMy40MzM5SDEzLjMzMzNMMjAgMjkuOTkwM1Y5LjAwOTY5TDEzLjMzMzMgMTUuNTY2MUg4Wk0yNiAxOS41QzI2IDE3LjE3OSAyNC42NCAxNS4xODU5IDIyLjY2NjcgMTQuMjE1NVYyNC43NzE0QzI0LjY0IDIzLjgxNDEgMjYgMjEuODIxIDI2IDE5LjVaTTIyLjY2NjcgOFYxMC43MDEzQzI2LjUyIDExLjgyOSAyOS4zMzMzIDE1LjM0MzIgMjkuMzMzMyAxOS41QzI5LjMzMzMgMjMuNjU2OCAyNi41MiAyNy4xNzEgMjIuNjY2NyAyOC4yOTg3VjMxQzI4LjAxMzMgMjkuODA2NyAzMiAyNS4xMTIzIDMyIDE5LjVDMzIgMTMuODg3NyAyOC4wMTMzIDkuMTkzMjcgMjIuNjY2NyA4WiIgZmlsbD0iIzE2NEFDNCIvPgo8L3N2Zz4=",
+  },
+
+  mute: {
+    svg: MUTE,
+    dataUrl:
+      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTI2IDIwQzI2IDE3LjY0IDI0LjY0IDE1LjYxMzMgMjIuNjY2NyAxNC42MjY3VjE3LjU3MzNMMjUuOTMzMyAyMC44NEMyNS45NzMzIDIwLjU3MzMgMjYgMjAuMjkzMyAyNiAyMFpNMjkuMzMzMyAyMEMyOS4zMzMzIDIxLjI1MzMgMjkuMDY2NyAyMi40MjY3IDI4LjYxMzMgMjMuNTJMMzAuNjI2NyAyNS41MzMzQzMxLjUwNjcgMjMuODggMzIgMjIgMzIgMjBDMzIgMTQuMjkzMyAyOC4wMTMzIDkuNTIgMjIuNjY2NyA4LjMwNjY3VjExLjA1MzNDMjYuNTIgMTIuMiAyOS4zMzMzIDE1Ljc3MzMgMjkuMzMzMyAyMFpNOS42OTMzMyA4TDggOS42OTMzM0wxNC4zMDY3IDE2SDhWMjRIMTMuMzMzM0wyMCAzMC42NjY3VjIxLjY5MzNMMjUuNjY2NyAyNy4zNkMyNC43NzMzIDI4LjA1MzMgMjMuNzczMyAyOC42IDIyLjY2NjcgMjguOTMzM1YzMS42OEMyNC41MDY3IDMxLjI2NjcgMjYuMTczMyAzMC40MTMzIDI3LjU4NjcgMjkuMjY2N0wzMC4zMDY3IDMyTDMyIDMwLjMwNjdMMjAgMTguMzA2N0w5LjY5MzMzIDhaTTIwIDkuMzMzMzNMMTcuMjEzMyAxMi4xMkwyMCAxNC45MDY3VjkuMzMzMzNaIiBmaWxsPSIjMTY0QUM0Ii8+Cjwvc3ZnPg==",
+  },
+
+  audioPlay: {
+    svg: PLAY_SOUND,
+    dataUrl:
+      "data:image/svg+xml;base64,Cgo8c3ZnIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8xXzI5OSkiPgogICAgPHBhdGggZD0iTTEzLjUgMTkuNUMxNi44MTM3IDE5LjUgMTkuNSAxNi44MTM3IDE5LjUgMTMuNUMxOS41IDEwLjE4NjMgMTYuODEzNyA3LjUgMTMuNSA3LjVDMTAuMTg2MyA3LjUgNy41IDEwLjE4NjMgNy41IDEzLjVDNy41IDE2LjgxMzcgMTAuMTg2MyAxOS41IDEzLjUgMTkuNVoiIGZpbGw9IiMxNjRBQzQiLz4KICAgIDxwYXRoIGQ9Ik0xMy41IDIyLjVDOS40OTUgMjIuNSAxLjUgMjQuNTEgMS41IDI4LjVWMzEuNUgyNS41VjI4LjVDMjUuNSAyNC41MSAxNy41MDUgMjIuNSAxMy41IDIyLjVaTTI1LjE0IDguMDRMMjIuNjIgMTAuNTc1QzIzLjg4IDEyLjM0NSAyMy44OCAxNC42NCAyMi42MiAxNi40MUwyNS4xNCAxOC45NDVDMjguMTcgMTUuOTE1IDI4LjE3IDExLjM0IDI1LjE0IDguMDRaTTMwLjEwNSAzTDI3LjY2IDUuNDQ1QzMxLjgxNSA5Ljk3NSAzMS44MTUgMTYuNzg1IDI3LjY2IDIxLjU1NUwzMC4xMDUgMjRDMzUuOTU1IDE4LjE2NSAzNS45NyA5LjA3NSAzMC4xMDUgM1oiIGZpbGw9IiMxNjRBQzQiLz4KICA8L2c+CiAgPGRlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAwXzFfMjk5Ij4KICAgICAgPHJlY3Qgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiBmaWxsPSJ3aGl0ZSIvPgogICAgPC9jbGlwUGF0aD4KICA8L2RlZnM+Cjwvc3ZnPg==",
+  },
+
+  videoPause: {
+    svg: VIDEO_PAUSE,
+    dataUrl:
+      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEzIDI4SDE3LjY2NjdWMTJIMTNWMjhaTTIyLjMzMzMgMTJWMjhIMjdWMTJIMjIuMzMzM1oiIGZpbGw9IiMxNjRBQzQiLz4KPC9zdmc+",
+  },
+
+  videoPlay: {
+    svg: VIDEO_PLAY,
+    dataUrl:
+      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE2IDEyVjI4TDI5IDIwTDE2IDEyWiIgZmlsbD0iIzE2NEFDNCIvPgo8L3N2Zz4=",
+  },
+
+  videoReplay: {
+    svg: VIDEO_REPLAY,
+    dataUrl:
+      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTIwIDEyLjhWOEwxMy43NSAxNEwyMCAyMFYxNS4yQzI0LjEzNzUgMTUuMiAyNy41IDE4LjQyOCAyNy41IDIyLjRDMjcuNSAyNi4zNzIgMjQuMTM3NSAyOS42IDIwIDI5LjZDMTUuODYyNSAyOS42IDEyLjUgMjYuMzcyIDEyLjUgMjIuNEgxMEMxMCAyNy43MDQgMTQuNDc1IDMyIDIwIDMyQzI1LjUyNSAzMiAzMCAyNy43MDQgMzAgMjIuNEMzMCAxNy4wOTYgMjUuNTI1IDEyLjggMjAgMTIuOFoiIGZpbGw9IiMxNjRBQzQiLz4KPC9zdmc+",
+  },
+
+  close: {
+    svg: CLOSE,
+    dataUrl:
+      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQxIiB2aWV3Qm94PSIwIDAgNDAgNDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTIwIDAuNzk5OTg4QzguOTQgMC43OTk5ODggMCA5LjczOTk5IDAgMjAuOEMwIDMxLjg2IDguOTQgNDAuOCAyMCA0MC44QzMxLjA2IDQwLjggNDAgMzEuODYgNDAgMjAuOEM0MCA5LjczOTk5IDMxLjA2IDAuNzk5OTg4IDIwIDAuNzk5OTg4Wk0zMCAyNy45OEwyNy4xOCAzMC44TDIwIDIzLjYyTDEyLjgyIDMwLjhMMTAgMjcuOThMMTcuMTggMjAuOEwxMCAxMy42MkwxMi44MiAxMC44TDIwIDE3Ljk4TDI3LjE4IDEwLjhMMzAgMTMuNjJMMjIuODIgMjAuOEwzMCAyNy45OFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPg==",
+  },
+
+  complete: {
+    svg: COMPLETED,
+    dataUrl:
+      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjM2IiBoZWlnaHQ9IjI3IiB2aWV3Qm94PSIwIDAgMzYgMjciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTExLjIgMjEuMkwyLjggMTIuOEwwIDE1LjZMMTEuMiAyNi44TDM1LjIgMi44TDMyLjQgMEwxMS4yIDIxLjJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=",
+  },
+
+  help: {
+    svg: HELP,
+    dataUrl:
+      "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTIwIDBDOC45NiAwIDAgOC45NiAwIDIwQzAgMzEuMDQgOC45NiA0MCAyMCA0MEMzMS4wNCA0MCA0MCAzMS4wNCA0MCAyMEM0MCA4Ljk2IDMxLjA0IDAgMjAgMFpNMjIgMzRIMThWMzBIMjJWMzRaTTI2LjE0IDE4LjVMMjQuMzQgMjAuMzRDMjIuOSAyMS44IDIyIDIzIDIyIDI2SDE4VjI1QzE4IDIyLjggMTguOSAyMC44IDIwLjM0IDE5LjM0TDIyLjgyIDE2LjgyQzIzLjU2IDE2LjEgMjQgMTUuMSAyNCAxNEMyNCAxMS44IDIyLjIgMTAgMjAgMTBDMTcuOCAxMCAxNiAxMS44IDE2IDE0SDEyQzEyIDkuNTggMTUuNTggNiAyMCA2QzI0LjQyIDYgMjggOS41OCAyOCAxNEMyOCAxNS43NiAyNy4yOCAxNy4zNiAyNi4xNCAxOC41WiIgZmlsbD0iIzE2NEFDNCIvPgo8L3N2Zz4=",
+  },
+};

package/src/theme/theme-utils.spec.ts

@@ -1,52 +1,52 @@
-import { ThemeUtils } from "./theme-utils";
-import { DStyle } from "@media-quest/engine";
-
-describe("Theme-utils works", () => {
-  test("Can space evenly when all is even", () => {
-    const btn1 = {};
-    const els = ThemeUtils.spaceEvenlyX<{ style: Partial<DStyle> }>([
-      { style: { w: 20 } },
-      { style: { w: 20 } },
-      { style: { w: 20 } },
-    ]);
-
-    const first = els[0];
-    const second = els[1];
-    const third = els[2];
-    expect(first.style.x).toBe(10);
-    expect(second.style.x).toBe(40);
-    expect(third.style.x).toBe(70);
-    // responseButtons.forEach((el) => {
-    //     expect(el._tag === "div").toBe(true);
-    //     expect(el.children.length).toBe(1);
-    // });
-  });
-
-  test("Can space evenly even if uneven lengths", () => {
-    const btn1 = {};
-    const els = ThemeUtils.spaceEvenlyX([
-      { style: { w: 10, x: 0 } },
-      { style: { w: 30, x: 10 } },
-      { style: { w: 20, x: 30 } },
-    ]);
-
-    const first = els[0];
-    const second = els[1];
-    const third = els[2];
-    expect(first.style.x).toBe(10);
-    expect(second.style.x).toBe(30);
-    expect(third.style.x).toBe(70);
-  });
-
-  test("Can space evenly on a shorter scale 10-90", () => {
-    const els = ThemeUtils.spaceEvenlyX([{ style: {} }, { style: {} }, { style: {} }], {
-      startAt: 10,
-      endAt: 90,
-      defaultItemWidth: 20,
-    }) as ReadonlyArray<{ style: { x: number; w: number } }>;
-
-    expect(els[0].style.x).toBe(15);
-    // expect(els[1].style.x).toBe(10);
-    // expect(els[2].style.x).toBe(10);
-  });
-});
+import { ThemeUtils } from "./theme-utils";
+import { DStyle } from "@media-quest/engine";
+
+describe("Theme-utils works", () => {
+  test("Can space evenly when all is even", () => {
+    const btn1 = {};
+    const els = ThemeUtils.spaceEvenlyX<{ style: Partial<DStyle> }>([
+      { style: { w: 20 } },
+      { style: { w: 20 } },
+      { style: { w: 20 } },
+    ]);
+
+    const first = els[0];
+    const second = els[1];
+    const third = els[2];
+    expect(first.style.x).toBe(10);
+    expect(second.style.x).toBe(40);
+    expect(third.style.x).toBe(70);
+    // responseButtons.forEach((el) => {
+    //     expect(el._tag === "div").toBe(true);
+    //     expect(el.children.length).toBe(1);
+    // });
+  });
+
+  test("Can space evenly even if uneven lengths", () => {
+    const btn1 = {};
+    const els = ThemeUtils.spaceEvenlyX([
+      { style: { w: 10, x: 0 } },
+      { style: { w: 30, x: 10 } },
+      { style: { w: 20, x: 30 } },
+    ]);
+
+    const first = els[0];
+    const second = els[1];
+    const third = els[2];
+    expect(first.style.x).toBe(10);
+    expect(second.style.x).toBe(30);
+    expect(third.style.x).toBe(70);
+  });
+
+  test("Can space evenly on a shorter scale 10-90", () => {
+    const els = ThemeUtils.spaceEvenlyX([{ style: {} }, { style: {} }, { style: {} }], {
+      startAt: 10,
+      endAt: 90,
+      defaultItemWidth: 20,
+    }) as ReadonlyArray<{ style: { x: number; w: number } }>;
+
+    expect(els[0].style.x).toBe(15);
+    // expect(els[1].style.x).toBe(10);
+    // expect(els[2].style.x).toBe(10);
+  });
+});

package/src/theme/theme-utils.ts

@@ -1,56 +1,56 @@
-import { DElementDto, DStyle } from "@media-quest/engine";
-
-export const ThemeUtils = {
-  spaceEvenlyX: <T extends Pick<DElementDto, "style">>(
-    items: ReadonlyArray<T>,
-    options: { startAt: number; endAt: number; defaultItemWidth: number } = {
-      startAt: 0,
-      endAt: 100,
-      defaultItemWidth: 5,
-    },
-  ): ReadonlyArray<T> => {
-    const startAt = options?.startAt ?? 0;
-    const endAt = options?.endAt ?? 100;
-    const range = Math.abs(endAt - startAt);
-    if (items.length === 0) {
-      return [];
-    }
-    const marginCount = items.length + 1;
-    const defaultWidth = options.defaultItemWidth ?? 150 / marginCount;
-
-    let totalWidthOfElements = items.reduce((prev, curr) => {
-      const w = curr.style.w ?? defaultWidth;
-      return prev + w;
-    }, 0);
-
-    let cursor = startAt;
-    const rest = Math.max(range - totalWidthOfElements, 0);
-    const margin = rest / marginCount;
-
-    items.forEach((item) => {
-      cursor = cursor + margin;
-      const w = item.style.w ?? defaultWidth;
-      const x = cursor;
-      cursor = cursor + w;
-      item.style.w = w;
-      item.style.x = x;
-    });
-
-    return items;
-  },
-
-  centerY: (): Pick<DStyle, "y" | "transform"> => ({
-    y: 50,
-    transform: "translate(0%, 50%)",
-  }),
-  centerX: (): Pick<DStyle, "x" | "transform"> => ({
-    x: 50,
-    transform: "translate(-50%, 0%)",
-  }),
-
-  centerXY: (): Pick<DStyle, "x" | "y" | "transform"> => ({
-    x: 50,
-    y: 50,
-    transform: "translate(-50%, 50%)",
-  }),
-};
+import { DElementDto, DStyle } from "@media-quest/engine";
+
+export const ThemeUtils = {
+  spaceEvenlyX: <T extends Pick<DElementDto, "style">>(
+    items: ReadonlyArray<T>,
+    options: { startAt: number; endAt: number; defaultItemWidth: number } = {
+      startAt: 0,
+      endAt: 100,
+      defaultItemWidth: 5,
+    },
+  ): ReadonlyArray<T> => {
+    const startAt = options?.startAt ?? 0;
+    const endAt = options?.endAt ?? 100;
+    const range = Math.abs(endAt - startAt);
+    if (items.length === 0) {
+      return [];
+    }
+    const marginCount = items.length + 1;
+    const defaultWidth = options.defaultItemWidth ?? 150 / marginCount;
+
+    let totalWidthOfElements = items.reduce((prev, curr) => {
+      const w = curr.style.w ?? defaultWidth;
+      return prev + w;
+    }, 0);
+
+    let cursor = startAt;
+    const rest = Math.max(range - totalWidthOfElements, 0);
+    const margin = rest / marginCount;
+
+    items.forEach((item) => {
+      cursor = cursor + margin;
+      const w = item.style.w ?? defaultWidth;
+      const x = cursor;
+      cursor = cursor + w;
+      item.style.w = w;
+      item.style.x = x;
+    });
+
+    return items;
+  },
+
+  centerY: (): Pick<DStyle, "y" | "transform"> => ({
+    y: 50,
+    transform: "translate(0%, 50%)",
+  }),
+  centerX: (): Pick<DStyle, "x" | "transform"> => ({
+    x: 50,
+    transform: "translate(-50%, 0%)",
+  }),
+
+  centerXY: (): Pick<DStyle, "x" | "y" | "transform"> => ({
+    x: 50,
+    y: 50,
+    transform: "translate(-50%, 50%)",
+  }),
+};