npm - @cuemath/leap - Versions diffs - 2.8.36-link.3 → 2.8.36-rj-0 - Mend

@cuemath/leap 2.8.36-link.3 → 2.8.36-rj-0

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 (103) hide show

package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.js CHANGED Viewed

@@ -1,30 +1,11 @@
 import o from "styled-components";
-import d from "../../../../ui/layout/flex-view.js";
-import p from "../../../../ui/text/text.js";
-import { GAME_LAUNCHER_SIZE as e, GAME_LAUNCHER_ASSET_PADDING as a, delta as l, ASSET_OFFSET_X as n, ASSET_OFFSET_Y as r, ASSET_CONTAINER_SIZE as i } from "./constants.js";
+import { GAME_LAUNCHER_SIZE as e } from "../card-container/constants.js";
+import { GAME_LAUNCHER_ASSET_PADDING as d, delta as p, ASSET_OFFSET_X as r, ASSET_OFFSET_Y as n, ASSET_CONTAINER_SIZE as i } from "./constants.js";
 const g = o.div`
-  position: relative;
-  display: flex;
-  justify-content: center;
-`, h = o.div`
-  position: relative;
-  border-radius: ${e}px;
-  height: ${e}px;
-  width: ${e}px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  align-self: center;
-  backdrop-filter: blur(0px);
-  -webkit-backdrop-filter: blur(0px);
-  flex-shrink: 0;
-`, b = o.div`
   position: absolute;
   z-index: 5;
-  height: ${e + a}px;
-  width: ${e + a}px;
+  height: ${e + d}px;
+  width: ${e + d}px;
   pointer-events: none;
 `, s = o.div`
   height: ${e}px;
@@ -37,24 +18,24 @@ const g = o.div`
   border: 2px solid ${({ theme: t }) => t.colors.WHITE};
   backdrop-filter: blur(0px);
   -webkit-backdrop-filter: blur(0px);
-`, u = o(s)`
+`, h = o(s)`
   transform-origin: bottom right;
   transform: rotate(-32deg) skew(-32deg);
   translate: -${e / 2}px -${e / 2}px;
   border-right-width: 1px;
-`, $ = o(s)`
+`, c = o(s)`
   transform-origin: bottom left;
   transform: rotate(32deg) skew(32deg);
   translate: ${e / 2}px -${e / 2}px;
   border-left-width: 1px;
-`, w = o(s)`
+`, f = o(s)`
   height: ${e / 2}px;
   width: ${e}px;
   bottom: 0;
   left: 0;
   z-index: 1;
   border: none;
-`, S = o.div`
+`, m = o.div`
   height: inherit;
   width: inherit;
   overflow: hidden;
@@ -62,16 +43,16 @@ const g = o.div`
   display: flex;
   justify-content: center;
   align-items: center;
-`, k = o.div`
+`, b = o.div`
   flex: 1;
   background: transparent;
-  height: ${e / 2 + l}px;
+  height: ${e / 2 + p}px;
   width: ${e}px;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  bottom: ${({ $segmentType: t = "bottom" }) => t === "bottom" ? "unset" : `-${l}px`};
+  bottom: ${({ $segmentType: t = "bottom" }) => t === "bottom" ? "unset" : `-${p}px`};
   transform-origin: ${({ $segmentType: t }) => {
   switch (t) {
     case "left":
@@ -92,11 +73,11 @@ const g = o.div`
       return "none";
   }
 }};
-`, v = o.div`
+`, $ = o.div`
   position: absolute;
-  right: ${({ $segmentType: t }) => t === "left" ? `-${n}px` : "unset"};
-  left: ${({ $segmentType: t }) => t === "right" ? `-${n}px` : "unset"};
-  bottom: ${({ $segmentType: t }) => t === "bottom" ? `-${r}px` : `-${r}px`};
+  right: ${({ $segmentType: t }) => t === "left" ? `-${r}px` : "unset"};
+  left: ${({ $segmentType: t }) => t === "right" ? `-${r}px` : "unset"};
+  bottom: ${({ $segmentType: t }) => t === "bottom" ? `-${n}px` : `-${n}px`};
   height: ${i}px;
   width: ${i}px;
   display: flex;
@@ -109,11 +90,11 @@ const g = o.div`
     background: ${({ theme: t }) => t.colors.WHITE_T_15};
     cursor: pointer;
   }
-`, E = o.div`
+`, u = o.div`
   position: absolute;
-  right: ${({ $segmentType: t }) => t === "left" ? `-${n}px` : "unset"};
-  left: ${({ $segmentType: t }) => t === "right" ? `-${n}px` : "unset"};
-  bottom: ${({ $segmentType: t }) => t === "bottom" ? `-${r}px` : `-${r}px`};
+  right: ${({ $segmentType: t }) => t === "left" ? `-${r}px` : "unset"};
+  left: ${({ $segmentType: t }) => t === "right" ? `-${r}px` : "unset"};
+  bottom: ${({ $segmentType: t }) => t === "bottom" ? `-${n}px` : `-${n}px`};
   height: ${i}px;
   width: ${i}px;
   z-index: 5;
@@ -123,44 +104,19 @@ const g = o.div`
   display: flex;
   align-items: center;
   justify-content: center;
-`, y = o.div`
+`, w = o.div`
   position: absolute;
   z-index: 6;
-`, _ = o(d)`
-  z-index: 1;
-  top: -28px;
-`, A = o(p)`
-  transition: color 0.5s ease-in-out;
-  ${({ isAnimated: t }) => t && `
-      animation: zoomInOut 1s ease-in-out infinite;
-    `}
-  @keyframes zoomInOut {
-    0% {
-      transform: scale(1);
-    }
-    50% {
-      transform: scale(1.05);
-    }
-    100% {
-      transform: scale(1);
-    }
-  }
 `;
 export {
-  A as AnimatedLabel,
-  b as CircularProgressLottieContainer,
-  _ as ExtendedFlexView,
-  y as IconWrapper,
-  v as SegmentAssetContainer,
-  w as SegmentBottom,
-  S as SegmentContainer,
-  k as SegmentContentContainer,
-  u as SegmentLeft,
-  E as SegmentOverlay,
-  $ as SegmentRight,
-  g as SegmentedCard,
-  h as SegmentedCardWrapper
+  g as CircularProgressLottieContainer,
+  w as IconWrapper,
+  $ as SegmentAssetContainer,
+  f as SegmentBottom,
+  m as SegmentContainer,
+  b as SegmentContentContainer,
+  h as SegmentLeft,
+  u as SegmentOverlay,
+  c as SegmentRight
 };
 //# sourceMappingURL=segmented-game-card-styled.js.map

package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-game-card-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.tsx"],"sourcesContent":["import type { TSegment } from './segmented-game-card-types';\n\nimport styled from 'styled-components';\n\nimport ~~FlexView~~ ~~from~~ ~~'../../../../ui/layout/flex-view';\nimport~~ ~~Text~~ from '~~../../../../ui~~/~~text/text~~';\nimport {\n ~~GAME_LAUNCHER_SIZE,\n~~ ASSET_CONTAINER_SIZE,\n delta,\n ASSET_OFFSET_X,\n ASSET_OFFSET_Y,\n GAME_LAUNCHER_ASSET_PADDING,\n} from './constants';\n\nexport const SegmentedCard = styled.div`\n position: relative;\n display: flex;\n justify-content: center;\n`;\n\nexport const SegmentedCardWrapper = styled.div`\n position: relative;\n border-radius: ${GAME_LAUNCHER_SIZE}px;\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n align-self: center;\n backdrop-filter: blur(0px);\n -webkit-backdrop-filter: blur(0px);\n flex-shrink: 0;\n`;\n\nexport const CircularProgressLottieContainer = styled.div`\n position: absolute;\n z-index: 5;\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n pointer-events: none;\n`;\n\n// might be needed later-----\n// export const SegmentDevider = styled.div<{ angle: number }>`\n// width: ${GAME_LAUNCHER_SIZE / 2}px;\n// height: 2px;\n// position: absolute;\n// background: #fff;\n// transform-origin: left;\n// transform: ${({ angle }) => `rotate(${angle}deg)`};\n// `;\n\nconst Segment = styled.div`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n overflow: hidden;\n display: flex;\n position: absolute;\n background: ${({ theme }) => theme.colors.BLACK_1};\n z-index: 2;\n border: 2px solid ${({ theme }) => theme.colors.WHITE};\n backdrop-filter: blur(0px);\n -webkit-backdrop-filter: blur(0px);\n`;\n\nexport const SegmentLeft = styled(Segment)<{\n $angle?: number;\n}>`\n transform-origin: bottom right;\n transform: rotate(-32deg) skew(-32deg);\n translate: -${GAME_LAUNCHER_SIZE / 2}px -${GAME_LAUNCHER_SIZE / 2}px;\n border-right-width: 1px;\n`;\n\nexport const SegmentRight = styled(Segment)<{\n $angle?: number;\n}>`\n transform-origin: bottom left;\n transform: rotate(32deg) skew(32deg);\n translate: ${GAME_LAUNCHER_SIZE / 2}px -${GAME_LAUNCHER_SIZE / 2}px;\n border-left-width: 1px;\n`;\n\nexport const SegmentBottom = styled(Segment)<{\n $angle?: number;\n}>`\n height: ${GAME_LAUNCHER_SIZE / 2}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n bottom: 0;\n left: 0;\n z-index: 1;\n border: none;\n`;\n\nexport const SegmentContainer = styled.div`\n height: inherit;\n width: inherit;\n overflow: hidden;\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const SegmentContentContainer = styled.div<{ $segmentType?: TSegment }>`\n flex: 1;\n background: transparent;\n height: ${GAME_LAUNCHER_SIZE / 2 + delta}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n bottom: ${({ $segmentType = 'bottom' }) => ($segmentType === 'bottom' ? 'unset' : `-${delta}px`)};\n transform-origin: ${({ $segmentType }) => {\n switch ($segmentType) {\n case 'left':\n return 'bottom right';\n case 'right':\n return 'bottom left';\n default:\n return 'unset';\n }\n }};\n transform: ${({ $segmentType = 'bottom' }) => {\n switch ($segmentType) {\n case 'left':\n return 'skew(32deg) rotate(32deg)';\n case 'right':\n return 'skew(-32deg) rotate(-32deg)';\n default:\n return 'none';\n }\n }};\n`;\n\nexport const SegmentAssetContainer = styled.div<{\n $segmentType?: TSegment;\n}>`\n position: absolute;\n right: ${({ $segmentType }) => ($segmentType === 'left' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n left: ${({ $segmentType }) => ($segmentType === 'right' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n bottom: ${({ $segmentType }) =>\n $segmentType === 'bottom' ? `-${ASSET_OFFSET_Y}px` : `-${ASSET_OFFSET_Y}px`};\n height: ${ASSET_CONTAINER_SIZE}px;\n width: ${ASSET_CONTAINER_SIZE}px;\n display: flex;\n align-items: center;\n overflow: hidden;\n background-color: transparent;\n z-index: 1;\n flex-shrink: 0;\n &:hover {\n background: ${({ theme }) => theme.colors.WHITE_T_15};\n cursor: pointer;\n }\n`;\n\nexport const SegmentOverlay = styled.div<{ $segmentType?: TSegment }>`\n position: absolute;\n right: ${({ $segmentType }) => ($segmentType === 'left' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n left: ${({ $segmentType }) => ($segmentType === 'right' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n bottom: ${({ $segmentType }) =>\n $segmentType === 'bottom' ? `-${ASSET_OFFSET_Y}px` : `-${ASSET_OFFSET_Y}px`};\n height: ${ASSET_CONTAINER_SIZE}px;\n width: ${ASSET_CONTAINER_SIZE}px;\n z-index: 5;\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n /* pointer-events: none; */\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const IconWrapper = styled.div`\n position: absolute;\n z-index: 6;\n`;\n\nexport const ExtendedFlexView = styled(FlexView)`\n z-index: 1;\n top: -28px;\n`;\n\nexport const AnimatedLabel = styled(Text)<{ isAnimated: boolean }>`\n transition: color 0.5s ease-in-out;\n\n ${({ isAnimated }) =>\n isAnimated &&\n `\n animation: zoomInOut 1s ease-in-out infinite;\n `}\n\n @keyframes zoomInOut {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.05);\n }\n 100% {\n transform: scale(1);\n }\n }\n`;\n"],"names":["~~SegmentedCard~~","styled","~~SegmentedCardWrapper","~~GAME_LAUNCHER_SIZE","~~CircularProgressLottieContainer","~~GAME_LAUNCHER_ASSET_PADDING","Segment","theme","SegmentLeft","SegmentRight","SegmentBottom","SegmentContainer","SegmentContentContainer","delta","$segmentType","SegmentAssetContainer","ASSET_OFFSET_X","ASSET_OFFSET_Y","ASSET_CONTAINER_SIZE","SegmentOverlay","IconWrapper"~~,"ExtendedFlexView","FlexView","AnimatedLabel","Text","isAnimated"~~],"mappings":"~~;;;;AAeO~~,MAAMA,~~IAAgBC~~,EAAO;AAAA;AAAA;AAAA~~;AAAA~~,~~GAMvBC~~,~~IAAuBD~~,~~EAAO;AAAA;AAAA,mBAExBE,CAAkB;AAAA,YACzBA,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYhBC,IAAkCH,EAAO;AAAA;AAAA;AAAA,YAG1CE,IAAqBE,~~CAA2B;AAAA,~~WACjDF~~,~~IAAqBE~~,CAA2B;AAAA;AAAA,GAcrDC,~~IAAUL~~,EAAO;AAAA,~~YACXE~~,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA,gBAIb,CAAC,EAAE,~~OAAAI~~,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,sBAE7B,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,GAK1CC,~~IAAcP~~,~~EAAOK~~,CAAO;AAAA;AAAA;AAAA,~~gBAKzBH~~,IAAqB,CAAC,OAAOA,IAAqB,CAAC;AAAA;AAAA,~~GAItDM~~,~~IAAeR~~,~~EAAOK~~,CAAO;AAAA;AAAA;AAAA,~~eAK3BH~~,IAAqB,CAAC,OAAOA,IAAqB,CAAC;AAAA;AAAA,~~GAIrDO~~,~~IAAgBT~~,~~EAAOK~~,CAAO;AAAA,YAG/BH,IAAqB,CAAC;AAAA,WACvBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,~~GAOhBQ~~,~~IAAmBV~~,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~GAU1BW~~,~~IAA0BX~~,EAAO;AAAA;AAAA;AAAA,~~YAGlCE~~,IAAqB,~~IAAIU~~,CAAK;AAAA,WAC/BV,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKjB,CAAC,EAAE,~~cAAAW~~,IAAe,SAAS,MAAOA,MAAiB,WAAW,UAAU,IAAID,CAAK,IAAK;AAAA,sBAC5E,CAAC,EAAE,cAAAC,QAAmB;AACxC,UAAQA,GAAc;AAAA,IACpB,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT;AACS,aAAA;AAAA,EACX;AACF,CAAC;AAAA,eACY,CAAC,EAAE,cAAAA,IAAe,eAAe;AAC5C,UAAQA,GAAc;AAAA,IACpB,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT;AACS,aAAA;AAAA,EACX;AACF,CAAC;AAAA,GAGUC,~~IAAwBd~~,EAAO;AAAA;AAAA,WAIjC,CAAC,EAAE,~~cAAAa~~,EAAa,MAAOA,MAAiB,SAAS,IAAIE,CAAc,OAAO,OAAQ;AAAA,UACnF,CAAC,EAAE,cAAAF,EAAa,MAAOA,MAAiB,UAAU,IAAIE,CAAc,OAAO,OAAQ;AAAA,YACjF,CAAC,EAAE,cAAAF,EAAA,MACXA,MAAiB,WAAW,IAAIG,CAAc,OAAO,IAAIA,CAAc,IAAI;AAAA,YACnEC,CAAoB;AAAA,WACrBA,CAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAQb,CAAC,EAAE,OAAAX,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA,GAK3CY,~~IAAiBlB~~,EAAO;AAAA;AAAA,WAE1B,CAAC,EAAE,~~cAAAa~~,EAAa,MAAOA,MAAiB,SAAS,IAAIE,CAAc,OAAO,OAAQ;AAAA,UACnF,CAAC,EAAE,cAAAF,EAAa,MAAOA,MAAiB,UAAU,IAAIE,CAAc,OAAO,OAAQ;AAAA,YACjF,CAAC,EAAE,cAAAF,EAAA,MACXA,MAAiB,WAAW,IAAIG,CAAc,OAAO,IAAIA,CAAc,IAAI;AAAA,YACnEC,CAAoB;AAAA,WACrBA,CAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUlBE,~~IAAcnB~~,EAAO;AAAA;AAAA;AAAA~~,GAKrBoB,IAAmBpB,EAAOqB,CAAQ~~;~~AAAA;AAAA;AAAA,GAKlCC,IAAgBtB,EAAOuB,CAAI;AAAA;AAAA;AAAA,IAGpC,CAAC,EAAE,YAAAC,QACHA,KACA;AAAA;AAAA,KAEC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~"}
1	+ {"version":3,"file":"segmented-game-card-styled.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card-styled.tsx"],"sourcesContent":["import type { TSegment } from './segmented-game-card-types';\n\nimport styled from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../card-container/constants';\nimport {\n ASSET_CONTAINER_SIZE,\n delta,\n ASSET_OFFSET_X,\n ASSET_OFFSET_Y,\n GAME_LAUNCHER_ASSET_PADDING,\n} from './constants';\n\nexport const CircularProgressLottieContainer = styled.div`\n position: absolute;\n z-index: 5;\n height: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n width: ${GAME_LAUNCHER_SIZE + GAME_LAUNCHER_ASSET_PADDING}px;\n pointer-events: none;\n`;\n\n// might be needed later-----\n// export const SegmentDevider = styled.div<{ angle: number }>`\n// width: ${GAME_LAUNCHER_SIZE / 2}px;\n// height: 2px;\n// position: absolute;\n// background: #fff;\n// transform-origin: left;\n// transform: ${({ angle }) => `rotate(${angle}deg)`};\n// `;\n\nconst Segment = styled.div`\n height: ${GAME_LAUNCHER_SIZE}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n overflow: hidden;\n display: flex;\n position: absolute;\n background: ${({ theme }) => theme.colors.BLACK_1};\n z-index: 2;\n border: 2px solid ${({ theme }) => theme.colors.WHITE};\n backdrop-filter: blur(0px);\n -webkit-backdrop-filter: blur(0px);\n`;\n\nexport const SegmentLeft = styled(Segment)<{\n $angle?: number;\n}>`\n transform-origin: bottom right;\n transform: rotate(-32deg) skew(-32deg);\n translate: -${GAME_LAUNCHER_SIZE / 2}px -${GAME_LAUNCHER_SIZE / 2}px;\n border-right-width: 1px;\n`;\n\nexport const SegmentRight = styled(Segment)<{\n $angle?: number;\n}>`\n transform-origin: bottom left;\n transform: rotate(32deg) skew(32deg);\n translate: ${GAME_LAUNCHER_SIZE / 2}px -${GAME_LAUNCHER_SIZE / 2}px;\n border-left-width: 1px;\n`;\n\nexport const SegmentBottom = styled(Segment)<{\n $angle?: number;\n}>`\n height: ${GAME_LAUNCHER_SIZE / 2}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n bottom: 0;\n left: 0;\n z-index: 1;\n border: none;\n`;\n\nexport const SegmentContainer = styled.div`\n height: inherit;\n width: inherit;\n overflow: hidden;\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const SegmentContentContainer = styled.div<{ $segmentType?: TSegment }>`\n flex: 1;\n background: transparent;\n height: ${GAME_LAUNCHER_SIZE / 2 + delta}px;\n width: ${GAME_LAUNCHER_SIZE}px;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n bottom: ${({ $segmentType = 'bottom' }) => ($segmentType === 'bottom' ? 'unset' : `-${delta}px`)};\n transform-origin: ${({ $segmentType }) => {\n switch ($segmentType) {\n case 'left':\n return 'bottom right';\n case 'right':\n return 'bottom left';\n default:\n return 'unset';\n }\n }};\n transform: ${({ $segmentType = 'bottom' }) => {\n switch ($segmentType) {\n case 'left':\n return 'skew(32deg) rotate(32deg)';\n case 'right':\n return 'skew(-32deg) rotate(-32deg)';\n default:\n return 'none';\n }\n }};\n`;\n\nexport const SegmentAssetContainer = styled.div<{\n $segmentType?: TSegment;\n}>`\n position: absolute;\n right: ${({ $segmentType }) => ($segmentType === 'left' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n left: ${({ $segmentType }) => ($segmentType === 'right' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n bottom: ${({ $segmentType }) =>\n $segmentType === 'bottom' ? `-${ASSET_OFFSET_Y}px` : `-${ASSET_OFFSET_Y}px`};\n height: ${ASSET_CONTAINER_SIZE}px;\n width: ${ASSET_CONTAINER_SIZE}px;\n display: flex;\n align-items: center;\n overflow: hidden;\n background-color: transparent;\n z-index: 1;\n flex-shrink: 0;\n &:hover {\n background: ${({ theme }) => theme.colors.WHITE_T_15};\n cursor: pointer;\n }\n`;\n\nexport const SegmentOverlay = styled.div<{ $segmentType?: TSegment }>`\n position: absolute;\n right: ${({ $segmentType }) => ($segmentType === 'left' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n left: ${({ $segmentType }) => ($segmentType === 'right' ? `-${ASSET_OFFSET_X}px` : 'unset')};\n bottom: ${({ $segmentType }) =>\n $segmentType === 'bottom' ? `-${ASSET_OFFSET_Y}px` : `-${ASSET_OFFSET_Y}px`};\n height: ${ASSET_CONTAINER_SIZE}px;\n width: ${ASSET_CONTAINER_SIZE}px;\n z-index: 5;\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n /* pointer-events: none; */\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const IconWrapper = styled.div`\n position: absolute;\n z-index: 6;\n`;\n"],"names":["CircularProgressLottieContainer","styled","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_ASSET_PADDING","Segment","theme","SegmentLeft","SegmentRight","SegmentBottom","SegmentContainer","SegmentContentContainer","delta","$segmentType","SegmentAssetContainer","ASSET_OFFSET_X","ASSET_OFFSET_Y","ASSET_CONTAINER_SIZE","SegmentOverlay","IconWrapper"],"mappings":";;;AAaO,MAAMA,IAAkCC,EAAO;AAAA;AAAA;AAAA,YAG1CC,IAAqBC,CAA2B;AAAA,WACjDD,IAAqBC,CAA2B;AAAA;AAAA,GAcrDC,IAAUH,EAAO;AAAA,YACXC,CAAkB;AAAA,WACnBA,CAAkB;AAAA;AAAA;AAAA;AAAA,gBAIb,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,sBAE7B,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,GAK1CC,IAAcL,EAAOG,CAAO;AAAA;AAAA;AAAA,gBAKzBF,IAAqB,CAAC,OAAOA,IAAqB,CAAC;AAAA;AAAA,GAItDK,IAAeN,EAAOG,CAAO;AAAA;AAAA;AAAA,eAK3BF,IAAqB,CAAC,OAAOA,IAAqB,CAAC;AAAA;AAAA,GAIrDM,IAAgBP,EAAOG,CAAO;AAAA,YAG/BF,IAAqB,CAAC;AAAA,WACvBA,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhBO,IAAmBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU1BS,IAA0BT,EAAO;AAAA;AAAA;AAAA,YAGlCC,IAAqB,IAAIS,CAAK;AAAA,WAC/BT,CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKjB,CAAC,EAAE,cAAAU,IAAe,SAAS,MAAOA,MAAiB,WAAW,UAAU,IAAID,CAAK,IAAK;AAAA,sBAC5E,CAAC,EAAE,cAAAC,QAAmB;AACxC,UAAQA,GAAc;AAAA,IACpB,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT;AACS,aAAA;AAAA,EACX;AACF,CAAC;AAAA,eACY,CAAC,EAAE,cAAAA,IAAe,eAAe;AAC5C,UAAQA,GAAc;AAAA,IACpB,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT;AACS,aAAA;AAAA,EACX;AACF,CAAC;AAAA,GAGUC,IAAwBZ,EAAO;AAAA;AAAA,WAIjC,CAAC,EAAE,cAAAW,EAAa,MAAOA,MAAiB,SAAS,IAAIE,CAAc,OAAO,OAAQ;AAAA,UACnF,CAAC,EAAE,cAAAF,EAAa,MAAOA,MAAiB,UAAU,IAAIE,CAAc,OAAO,OAAQ;AAAA,YACjF,CAAC,EAAE,cAAAF,EAAA,MACXA,MAAiB,WAAW,IAAIG,CAAc,OAAO,IAAIA,CAAc,IAAI;AAAA,YACnEC,CAAoB;AAAA,WACrBA,CAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAQb,CAAC,EAAE,OAAAX,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA,GAK3CY,IAAiBhB,EAAO;AAAA;AAAA,WAE1B,CAAC,EAAE,cAAAW,EAAa,MAAOA,MAAiB,SAAS,IAAIE,CAAc,OAAO,OAAQ;AAAA,UACnF,CAAC,EAAE,cAAAF,EAAa,MAAOA,MAAiB,UAAU,IAAIE,CAAc,OAAO,OAAQ;AAAA,YACjF,CAAC,EAAE,cAAAF,EAAA,MACXA,MAAiB,WAAW,IAAIG,CAAc,OAAO,IAAIA,CAAc,IAAI;AAAA,YACnEC,CAAoB;AAAA,WACrBA,CAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUlBE,IAAcjB,EAAO;AAAA;AAAA;AAAA;"}

package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.js CHANGED Viewed

@@ -1,116 +1,118 @@
-import { jsxs as T, jsx as e } from "react/jsx-runtime";
-import k from "lottie-web";
-import { memo as v, forwardRef as H, useRef as L, useState as C, useCallback as f, useImperativeHandle as w, useMemo as I, useEffect as F } from "react";
-import x from "../../../../../assets/line-icons/icons/check.js";
-import { LOTTIE as G } from "../../../../../assets/lottie/lottie.js";
-import { fetchLottie as j } from "../../../../ui/lottie-animation/helper.js";
-import O from "../../../../ui/lottie-animation/lottie-animation.js";
-import { SegmentedCard as U, ExtendedFlexView as B, AnimatedLabel as D, SegmentedCardWrapper as N, CircularProgressLottieContainer as q, SegmentLeft as z, SegmentRight as J, SegmentBottom as K, SegmentContainer as Q, SegmentContentContainer as V, SegmentAssetContainer as X, SegmentOverlay as Y, IconWrapper as Z } from "./segmented-game-card-styled.js";
+import { jsxs as I, jsx as t } from "react/jsx-runtime";
+import v from "lottie-web";
+import { memo as H, forwardRef as w, useRef as T, useState as h, useCallback as c, useImperativeHandle as F, useMemo as E, useEffect as G } from "react";
+import $ from "../../../../../assets/line-icons/icons/check.js";
+import { LOTTIE as j } from "../../../../../assets/lottie/lottie.js";
+import { fetchLottie as O } from "../../../../ui/lottie-animation/helper.js";
+import U from "../../../../ui/lottie-animation/lottie-animation.js";
+import { CardContainer as x } from "../card-container/card-container.js";
+import { CircularProgressLottieContainer as B, SegmentLeft as D, SegmentRight as N, SegmentBottom as q, SegmentContainer as z, SegmentContentContainer as J, SegmentAssetContainer as K, SegmentOverlay as Q, IconWrapper as X } from "./segmented-game-card-styled.js";
 const S = ({
-  segmentType: t,
+  segmentType: e,
   isCompleted: i,
   card: m,
   name: l,
   onMouseEnter: s
 }) => {
-  const c = L(null);
-  F(() => {
+  const a = T(null);
+  G(() => {
     let o = null;
     return (async () => {
-      const d = await j(m);
-      o = k.loadAnimation({
-        container: c.current,
+      const p = await O(m);
+      o = v.loadAnimation({
+        container: a.current,
         renderer: "canvas",
         loop: !0,
         autoplay: !0,
-        animationData: d
+        animationData: p
       });
     })(), () => o == null ? void 0 : o.destroy();
   }, [m]);
-  const a = f(() => s(l), [s, l]);
-  return /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ T(V, { $segmentType: t, onMouseEnter: a, children: [
-    /* @__PURE__ */ e(X, { ref: c, $segmentType: t }),
-    i && /* @__PURE__ */ e(Y, { $segmentType: t, children: /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(x, { color: "#fff", height: 40, width: 40 }) }) })
+  const d = c(() => s(l), [s, l]);
+  return /* @__PURE__ */ t(z, { children: /* @__PURE__ */ I(J, { $segmentType: e, onMouseEnter: d, children: [
+    /* @__PURE__ */ t(K, { ref: a, $segmentType: e }),
+    i && /* @__PURE__ */ t(Q, { $segmentType: e, children: /* @__PURE__ */ t(X, { children: /* @__PURE__ */ t($, { color: "#fff", height: 40, width: 40 }) }) })
   ] }) });
-}, ee = ({ data: t, label: i, initialValue: m = 0, value: l, maxValue: s = 1 }, c) => {
-  const a = L(null), o = L(null), [u, d] = C(i), [A, y] = C(!1), [b, P] = C("WHITE_T_87"), R = u !== i, g = f((n) => {
-    d(n);
-  }, []), _ = f(() => {
-    d(i);
-  }, [i]), h = (n) => {
-    var r, p;
-    (p = (r = t[n]) == null ? void 0 : r.onPress) == null || p.call(r);
-  }, $ = f((n) => {
+}, Y = ({ data: e, label: i, initialValue: m = 0, value: l, maxValue: s = 1 }, a) => {
+  const d = T(null), o = T(null), [u, p] = h(i), [L, y] = h(!1), [R, P] = h("WHITE_T_87"), _ = u !== i, C = c((n) => {
+    p(n);
+  }, []), b = c(() => {
+    p(i);
+  }, [i]), g = c(
+    (n) => {
+      var r, f;
+      (f = (r = e[n]) == null ? void 0 : r.onPress) == null || f.call(r);
+    },
+    [e]
+  ), M = c((n) => {
     y(!0), P(n);
   }, []);
-  w(c, () => ({
-    labelRef: a,
+  F(a, () => ({
+    labelRef: d,
     segmentedCardWrapperRef: o,
-    startLabelAnimation: $
+    startLabelAnimation: M
   }));
-  const E = I(() => {
+  const A = E(() => {
     if (s <= 0)
       return;
-    const n = 92, r = n / s, p = Math.min(r * m, n), W = Math.min(r * l + 1, n);
-    return [p, W];
-  }, [m, s, l]), M = I(
+    const n = 92, r = n / s, f = Math.min(r * m, n), k = Math.min(r * l + 1, n);
+    return [f, k];
+  }, [m, s, l]), W = E(
     () => ({
       renderer: "canvas",
       autoplay: !0,
       loop: !1,
-      initialSegment: E
+      initialSegment: A
     }),
-    [E]
+    [A]
   );
-  return /* @__PURE__ */ T(U, { children: [
-    /* @__PURE__ */ e(B, { $position: "absolute", children: /* @__PURE__ */ e(
-      D,
-      {
-        ref: a,
-        $renderAs: "ac3",
-        $align: "center",
-        $color: A ? b : R ? "WHITE_T_87" : "WHITE_T_60",
-        isAnimated: A,
-        children: u
-      }
-    ) }),
-    /* @__PURE__ */ T(N, { ref: o, onMouseLeave: _, children: [
-      /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(O, { src: G.LEVELUP_RINGS, settings: M }) }),
-      /* @__PURE__ */ e(z, { onClick: () => h(0), children: /* @__PURE__ */ e(
-        S,
-        {
-          segmentType: "left",
-          card: t[0].card,
-          name: t[0].name,
-          isCompleted: t[0].isCompleted,
-          onMouseEnter: g
-        }
-      ) }),
-      /* @__PURE__ */ e(J, { onClick: () => h(1), children: /* @__PURE__ */ e(
-        S,
-        {
-          segmentType: "right",
-          card: t[1].card,
-          name: t[1].name,
-          isCompleted: t[1].isCompleted,
-          onMouseEnter: g
-        }
-      ) }),
-      /* @__PURE__ */ e(K, { onClick: () => h(2), children: /* @__PURE__ */ e(
-        S,
-        {
-          segmentType: "bottom",
-          card: t[2].card,
-          name: t[2].name,
-          isCompleted: t[2].isCompleted,
-          onMouseEnter: g
-        }
-      ) })
-    ] })
-  ] });
-}, ce = v(H(ee));
+  return /* @__PURE__ */ I(
+    x,
+    {
+      ref: o,
+      labelRef: d,
+      label: u,
+      isAnimated: L,
+      onMouseLeave: b,
+      labelColor: L ? R : _ ? "WHITE_T_87" : "WHITE_T_60",
+      children: [
+        /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(U, { src: j.LEVELUP_RINGS, settings: W }) }),
+        /* @__PURE__ */ t(D, { onClick: () => g(0), children: /* @__PURE__ */ t(
+          S,
+          {
+            segmentType: "left",
+            card: e[0].card,
+            name: e[0].name,
+            isCompleted: e[0].isCompleted,
+            onMouseEnter: C
+          }
+        ) }),
+        /* @__PURE__ */ t(N, { onClick: () => g(1), children: /* @__PURE__ */ t(
+          S,
+          {
+            segmentType: "right",
+            card: e[1].card,
+            name: e[1].name,
+            isCompleted: e[1].isCompleted,
+            onMouseEnter: C
+          }
+        ) }),
+        /* @__PURE__ */ t(q, { onClick: () => g(2), children: /* @__PURE__ */ t(
+          S,
+          {
+            segmentType: "bottom",
+            card: e[2].card,
+            name: e[2].name,
+            isCompleted: e[2].isCompleted,
+            onMouseEnter: C
+          }
+        ) })
+      ]
+    }
+  );
+}, me = H(w(Y));
 export {
   S as SegmentContent,
-  ce as SegmentedGameCard
+  me as SegmentedGameCard
 };
 //# sourceMappingURL=segmented-game-card.js.map

package/dist/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-game-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type {\n IGameCardSegmentContentProps,\n ISegmentedGameCardProps,\n ISegmentedGameCardRefs,\n} from './segmented-game-card-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC, ForwardRefRenderFunction } from 'react';\n\nimport Lottie from 'lottie-web';\nimport {\n forwardRef,\n memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport CheckIcon from '../../../../../assets/line-icons/icons/check';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport { fetchLottie } from '../../../../ui/lottie-animation/helper';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport * as Styled from './segmented-game-card-styled';\n\nexport const SegmentContent: FC<IGameCardSegmentContentProps> = ({\n segmentType,\n isCompleted,\n card,\n name,\n onMouseEnter,\n}) => {\n const lottieAnimationRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n let animation: AnimationItem \| null = null;\n\n const loadLottie = async () => {\n const lottie = await fetchLottie(card);\n\n animation = Lottie.loadAnimation({\n container: lottieAnimationRef.current as Element,\n renderer: 'canvas',\n loop: true,\n autoplay: true,\n animationData: lottie,\n });\n };\n\n loadLottie();\n\n return () => {\n return animation?.destroy();\n };\n }, [card]);\n\n const handleMouseEnter = useCallback(() => onMouseEnter(name), [onMouseEnter, name]);\n\n return (\n <Styled.SegmentContainer>\n <Styled.SegmentContentContainer $segmentType={segmentType} onMouseEnter={handleMouseEnter}>\n <Styled.SegmentAssetContainer ref={lottieAnimationRef} $segmentType={segmentType} />\n {isCompleted && (\n <Styled.SegmentOverlay $segmentType={segmentType}>\n <Styled.IconWrapper>\n <CheckIcon color=\"#fff\" height={40} width={40} />\n </Styled.IconWrapper>\n </Styled.SegmentOverlay>\n )}\n </Styled.SegmentContentContainer>\n </Styled.SegmentContainer>\n );\n};\n\nconst SegmentedGameCardComponent: ForwardRefRenderFunction<\n ISegmentedGameCardRefs,\n ISegmentedGameCardProps\n> = ({ data, label: gameCategoryLabel, initialValue = 0, value, maxValue = 1 }, ref) => {\n const labelRef = useRef<HTMLDivElement>(null);\n const segmentedCardWrapperRef = useRef<HTMLDivElement>(null);\n\n const [label, setLabel] = useState<string>(gameCategoryLabel);\n const [isAnimated, setIsAnimated] = useState(false);\n const [animatedColor, setAnimatedColor] = useState<TColorNames>('WHITE_T_87');\n\n const isLabelHighlighted = label !== gameCategoryLabel;\n\n const onMouseEnter = useCallback((gameName: string) => {\n setLabel(gameName);\n }, []);\n\n const onMouseLeave = useCallback(() => {\n setLabel(gameCategoryLabel);\n }, [gameCategoryLabel]);\n\n const onSegmentPress = (index: number) => {\n data[index]?.onPress?.();\n };\n\n const startLabelAnimation = useCallback((color: TColorNames) => {\n setIsAnimated(true);\n setAnimatedColor(color);\n }, []);\n\n useImperativeHandle(ref, () => ({\n labelRef,\n segmentedCardWrapperRef,\n startLabelAnimation,\n }));\n\n const animationSegments: [number, number] \| undefined = useMemo(() => {\n if (maxValue <= 0) {\n return;\n }\n\n const totalFrames = 92;\n const framesPerValue = totalFrames / maxValue;\n\n const initialFrameToPlay = Math.min(framesPerValue * initialValue, totalFrames);\n const finalFrameToPlay = Math.min(framesPerValue * value + 1, totalFrames);\n\n return [initialFrameToPlay, finalFrameToPlay];\n }, [initialValue, maxValue, value]);\n\n const levelUpAnimationSettings = useMemo(\n () => ({\n renderer: 'canvas',\n autoplay: true,\n loop: false,\n initialSegment: animationSegments,\n }),\n [animationSegments],\n );\n\n return (\n <Styled.SegmentedCard>\n <Styled.ExtendedFlexView $position=\"absolute\">\n <Styled.AnimatedLabel\n ref={labelRef}\n $renderAs=\"ac3\"\n $align=\"center\"\n $color={isAnimated ? animatedColor : isLabelHighlighted ? 'WHITE_T_87' : 'WHITE_T_60'}\n isAnimated={isAnimated}\n >\n {label}\n </Styled.AnimatedLabel>\n </Styled.ExtendedFlexView>\n <Styled.SegmentedCardWrapper ref={segmentedCardWrapperRef} onMouseLeave={onMouseLeave}>\n <Styled.CircularProgressLottieContainer>\n <LottieAnimation src={LOTTIE.LEVELUP_RINGS} settings={levelUpAnimationSettings} />\n </Styled.CircularProgressLottieContainer>\n {/* left segment /}\n <Styled.SegmentLeft onClick={() => onSegmentPress(0)}>\n <SegmentContent\n segmentType={'left'}\n card={data[0]!.card}\n name={data[0]!.name}\n isCompleted={data[0]!.isCompleted}\n onMouseEnter={onMouseEnter}\n />\n </Styled.SegmentLeft>\n\n {/ right segment /}\n <Styled.SegmentRight onClick={() => onSegmentPress(1)}>\n <SegmentContent\n segmentType={'right'}\n card={data[1]!.card}\n name={data[1]!.name}\n isCompleted={data[1]!.isCompleted}\n onMouseEnter={onMouseEnter}\n />\n </Styled.SegmentRight>\n\n {/ bottom segment */}\n <Styled.SegmentBottom onClick={() => onSegmentPress(2)}>\n <SegmentContent\n segmentType={'bottom'}\n card={data[2]!.card}\n name={data[2]!.name}\n isCompleted={data[2]!.isCompleted}\n onMouseEnter={onMouseEnter}\n />\n </Styled.SegmentBottom>\n </Styled.SegmentedCardWrapper>\n </Styled.SegmentedCard>\n );\n};\n\nexport const SegmentedGameCard = memo(forwardRef(SegmentedGameCardComponent));\n"],"names":["SegmentContent","segmentType","isCompleted","card","name","onMouseEnter","lottieAnimationRef","useRef","useEffect","animation","lottie","fetchLottie","Lottie","handleMouseEnter","useCallback","jsx","Styled.SegmentContainer","jsxs","Styled.SegmentContentContainer","Styled.SegmentAssetContainer","Styled.SegmentOverlay","Styled.IconWrapper","CheckIcon","SegmentedGameCardComponent","data","gameCategoryLabel","initialValue","value","maxValue","ref","labelRef","segmentedCardWrapperRef","label","setLabel","useState","isAnimated","setIsAnimated","animatedColor","setAnimatedColor","isLabelHighlighted","gameName","onMouseLeave","onSegmentPress","index","_b","_a","startLabelAnimation","color","useImperativeHandle","animationSegments","useMemo","totalFrames","framesPerValue","initialFrameToPlay","finalFrameToPlay","levelUpAnimationSettings","Styled.SegmentedCard","Styled.ExtendedFlexView","Styled.AnimatedLabel","Styled.SegmentedCardWrapper","Styled.CircularProgressLottieContainer","LottieAnimation","LOTTIE","Styled.SegmentLeft","Styled.SegmentRight","Styled.SegmentBottom","SegmentedGameCard","memo","forwardRef"],"mappings":"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"}
1	+ {"version":3,"file":"segmented-game-card.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/segmented-game-card/segmented-game-card.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type {\n IGameCardSegmentContentProps,\n ISegmentedGameCardProps,\n ISegmentedGameCardRefs,\n} from './segmented-game-card-types';\nimport type { AnimationItem } from 'lottie-web';\nimport type { FC, ForwardRefRenderFunction } from 'react';\n\nimport Lottie from 'lottie-web';\nimport {\n forwardRef,\n memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport CheckIcon from '../../../../../assets/line-icons/icons/check';\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport { fetchLottie } from '../../../../ui/lottie-animation/helper';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport { CardContainer } from '../card-container/card-container';\nimport * as Styled from './segmented-game-card-styled';\n\nexport const SegmentContent: FC<IGameCardSegmentContentProps> = ({\n segmentType,\n isCompleted,\n card,\n name,\n onMouseEnter,\n}) => {\n const lottieAnimationRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n let animation: AnimationItem \| null = null;\n\n const loadLottie = async () => {\n const lottie = await fetchLottie(card);\n\n animation = Lottie.loadAnimation({\n container: lottieAnimationRef.current as Element,\n renderer: 'canvas',\n loop: true,\n autoplay: true,\n animationData: lottie,\n });\n };\n\n loadLottie();\n\n return () => {\n return animation?.destroy();\n };\n }, [card]);\n\n const handleMouseEnter = useCallback(() => onMouseEnter(name), [onMouseEnter, name]);\n\n return (\n <Styled.SegmentContainer>\n <Styled.SegmentContentContainer $segmentType={segmentType} onMouseEnter={handleMouseEnter}>\n <Styled.SegmentAssetContainer ref={lottieAnimationRef} $segmentType={segmentType} />\n {isCompleted && (\n <Styled.SegmentOverlay $segmentType={segmentType}>\n <Styled.IconWrapper>\n <CheckIcon color=\"#fff\" height={40} width={40} />\n </Styled.IconWrapper>\n </Styled.SegmentOverlay>\n )}\n </Styled.SegmentContentContainer>\n </Styled.SegmentContainer>\n );\n};\n\nconst SegmentedGameCardComponent: ForwardRefRenderFunction<\n ISegmentedGameCardRefs,\n ISegmentedGameCardProps\n> = ({ data, label: gameCategoryLabel, initialValue = 0, value, maxValue = 1 }, ref) => {\n const labelRef = useRef<HTMLDivElement>(null);\n const cardWrapperRef = useRef<HTMLDivElement>(null);\n\n const [label, setLabel] = useState<string>(gameCategoryLabel);\n const [isAnimated, setIsAnimated] = useState(false);\n const [animatedColor, setAnimatedColor] = useState<TColorNames>('WHITE_T_87');\n\n const isLabelHighlighted = label !== gameCategoryLabel;\n\n const onMouseEnter = useCallback((gameName: string) => {\n setLabel(gameName);\n }, []);\n\n const onMouseLeave = useCallback(() => {\n setLabel(gameCategoryLabel);\n }, [gameCategoryLabel]);\n\n const onSegmentPress = useCallback(\n (index: number) => {\n data[index]?.onPress?.();\n },\n [data],\n );\n\n const startLabelAnimation = useCallback((color: TColorNames) => {\n setIsAnimated(true);\n setAnimatedColor(color);\n }, []);\n\n useImperativeHandle(ref, () => ({\n labelRef,\n segmentedCardWrapperRef: cardWrapperRef,\n startLabelAnimation,\n }));\n\n const animationSegments: [number, number] \| undefined = useMemo(() => {\n if (maxValue <= 0) {\n return;\n }\n\n const totalFrames = 92;\n const framesPerValue = totalFrames / maxValue;\n\n const initialFrameToPlay = Math.min(framesPerValue * initialValue, totalFrames);\n const finalFrameToPlay = Math.min(framesPerValue * value + 1, totalFrames);\n\n return [initialFrameToPlay, finalFrameToPlay];\n }, [initialValue, maxValue, value]);\n\n const levelUpAnimationSettings = useMemo(\n () => ({\n renderer: 'canvas',\n autoplay: true,\n loop: false,\n initialSegment: animationSegments,\n }),\n [animationSegments],\n );\n\n return (\n <CardContainer\n ref={cardWrapperRef}\n labelRef={labelRef}\n label={label}\n isAnimated={isAnimated}\n onMouseLeave={onMouseLeave}\n labelColor={isAnimated ? animatedColor : isLabelHighlighted ? 'WHITE_T_87' : 'WHITE_T_60'}\n >\n <Styled.CircularProgressLottieContainer>\n <LottieAnimation src={LOTTIE.LEVELUP_RINGS} settings={levelUpAnimationSettings} />\n </Styled.CircularProgressLottieContainer>\n {/* left segment /}\n <Styled.SegmentLeft onClick={() => onSegmentPress(0)}>\n <SegmentContent\n segmentType={'left'}\n card={data[0]!.card}\n name={data[0]!.name}\n isCompleted={data[0]!.isCompleted}\n onMouseEnter={onMouseEnter}\n />\n </Styled.SegmentLeft>\n\n {/ right segment /}\n <Styled.SegmentRight onClick={() => onSegmentPress(1)}>\n <SegmentContent\n segmentType={'right'}\n card={data[1]!.card}\n name={data[1]!.name}\n isCompleted={data[1]!.isCompleted}\n onMouseEnter={onMouseEnter}\n />\n </Styled.SegmentRight>\n\n {/ bottom segment */}\n <Styled.SegmentBottom onClick={() => onSegmentPress(2)}>\n <SegmentContent\n segmentType={'bottom'}\n card={data[2]!.card}\n name={data[2]!.name}\n isCompleted={data[2]!.isCompleted}\n onMouseEnter={onMouseEnter}\n />\n </Styled.SegmentBottom>\n </CardContainer>\n );\n};\n\nexport const SegmentedGameCard = memo(forwardRef(SegmentedGameCardComponent));\n"],"names":["SegmentContent","segmentType","isCompleted","card","name","onMouseEnter","lottieAnimationRef","useRef","useEffect","animation","lottie","fetchLottie","Lottie","handleMouseEnter","useCallback","jsx","Styled.SegmentContainer","jsxs","Styled.SegmentContentContainer","Styled.SegmentAssetContainer","Styled.SegmentOverlay","Styled.IconWrapper","CheckIcon","SegmentedGameCardComponent","data","gameCategoryLabel","initialValue","value","maxValue","ref","labelRef","cardWrapperRef","label","setLabel","useState","isAnimated","setIsAnimated","animatedColor","setAnimatedColor","isLabelHighlighted","gameName","onMouseLeave","onSegmentPress","index","_b","_a","startLabelAnimation","color","useImperativeHandle","animationSegments","useMemo","totalFrames","framesPerValue","initialFrameToPlay","finalFrameToPlay","levelUpAnimationSettings","CardContainer","Styled.CircularProgressLottieContainer","LottieAnimation","LOTTIE","Styled.SegmentLeft","Styled.SegmentRight","Styled.SegmentBottom","SegmentedGameCard","memo","forwardRef"],"mappings":"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"}

package/dist/features/circle-games/game-launcher/comps/tables-card/constants.js ADDED Viewed

@@ -0,0 +1,20 @@
+const _ = {
+  REVEAL: [0, 15],
+  REVEAL_CONTENT: [8, 15],
+  DISAPPEAR_CONTENT: [21, 29],
+  DISAPPEAR: [21, 38]
+}, A = {
+  random: "BLUE_4",
+  sequence: "YELLOW_4",
+  advance: "PURPLE_4"
+}, E = 50, L = E + 1, N = 100, I = 1, O = 2;
+export {
+  O as ABSOLUTE_VIEW_Z_INDEX,
+  L as INFINITE_MODE_Z_INDEX,
+  E as TABLE_CARD_SHADOW_Z_INDEX,
+  N as TABLE_MODE_CONTAINER_Z_INDEX,
+  A as TABLE_MODE_LABEL_COLOR,
+  I as TABLE_MODE_OVERLAY_Z_INDEX,
+  _ as TABLE_REVEAL_ANIMATION
+};
+//# sourceMappingURL=constants.js.map

package/dist/features/circle-games/game-launcher/comps/tables-card/constants.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"constants.js","sources":["../../../../../../src/features/circle-games/game-launcher/comps/tables-card/constants.ts"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type { TTableMode } from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { AnimationSegment } from 'lottie-web';\n\nexport const TABLE_REVEAL_ANIMATION = {\n REVEAL: [0, 15] as AnimationSegment,\n REVEAL_CONTENT: [8, 15] as AnimationSegment,\n DISAPPEAR_CONTENT: [21, 29] as AnimationSegment,\n DISAPPEAR: [21, 38] as AnimationSegment,\n};\n\nexport const TABLE_MODE_LABEL_COLOR: Partial<Record<TTableMode, TColorNames>> = {\n random: 'BLUE_4',\n sequence: 'YELLOW_4',\n advance: 'PURPLE_4',\n};\n\n// z-index 1 to 20 are for table number arc segments\nexport const TABLE_CARD_SHADOW_Z_INDEX = 50;\nexport const INFINITE_MODE_Z_INDEX = TABLE_CARD_SHADOW_Z_INDEX + 1;\nexport const TABLE_MODE_CONTAINER_Z_INDEX = 100;\n\n// table modes\nexport const TABLE_MODE_OVERLAY_Z_INDEX = 1;\nexport const ABSOLUTE_VIEW_Z_INDEX = 2;\n"],"names":["TABLE_REVEAL_ANIMATION","TABLE_MODE_LABEL_COLOR","TABLE_CARD_SHADOW_Z_INDEX","INFINITE_MODE_Z_INDEX","TABLE_MODE_CONTAINER_Z_INDEX","TABLE_MODE_OVERLAY_Z_INDEX","ABSOLUTE_VIEW_Z_INDEX"],"mappings":"AAIO,MAAMA,IAAyB;AAAA,EACpC,QAAQ,CAAC,GAAG,EAAE;AAAA,EACd,gBAAgB,CAAC,GAAG,EAAE;AAAA,EACtB,mBAAmB,CAAC,IAAI,EAAE;AAAA,EAC1B,WAAW,CAAC,IAAI,EAAE;AACpB,GAEaC,IAAmE;AAAA,EAC9E,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACX,GAGaC,IAA4B,IAC5BC,IAAwBD,IAA4B,GACpDE,IAA+B,KAG/BC,IAA6B,GAC7BC,IAAwB;"}

package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.js ADDED Viewed

@@ -0,0 +1,24 @@
+import e from "styled-components";
+import { GAME_LAUNCHER_SIZE as t } from "../../card-container/constants.js";
+const n = e.div`
+  border: 1px solid ${({ theme: o }) => o.colors.WHITE};
+  border-right-width: ${({ $isBorderRightRequired: o }) => o ? "1px" : "0px"};
+  height: ${t * 8.1 / 100}px;
+  width: ${t * 8.1 / 100}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ theme: o }) => o.colors.BLACK_1};
+  position: relative;
+`, d = e.div`
+  position: absolute;
+  height: auto;
+  width: ${t * 8.1 / 100}px;
+  right: ${({ $right: o = "0px" }) => o};
+  bottom: ${({ $bottom: o = "unset" }) => o};
+`;
+export {
+  n as ModeContentSquareBlock,
+  d as TableModeLottieContainer
+};
+//# sourceMappingURL=table-mode-styled.js.map

package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"table-mode-styled.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { GAME_LAUNCHER_SIZE } from '../../card-container/constants';\n\nexport const ModeContentSquareBlock = styled.div<{ $isBorderRightRequired?: boolean }>`\n border: 1px solid ${({ theme }) => theme.colors.WHITE};\n border-right-width: ${({ $isBorderRightRequired }) => ($isBorderRightRequired ? '1px' : '0px')};\n height: ${(GAME_LAUNCHER_SIZE * 8.1) / 100}px;\n width: ${(GAME_LAUNCHER_SIZE * 8.1) / 100}px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ${({ theme }) => theme.colors.BLACK_1};\n position: relative;\n`;\n\nexport const TableModeLottieContainer = styled.div<{ $bottom?: string; $right?: string }>`\n position: absolute;\n height: auto;\n width: ${(GAME_LAUNCHER_SIZE * 8.1) / 100}px;\n right: ${({ $right = '0px' }) => $right};\n bottom: ${({ $bottom = 'unset' }) => $bottom};\n`;\n"],"names":["ModeContentSquareBlock","styled","theme","$isBorderRightRequired","GAME_LAUNCHER_SIZE","TableModeLottieContainer","$right","$bottom"],"mappings":";;AAIO,MAAMA,IAAyBC,EAAO;AAAA,sBACvB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,wBAC/B,CAAC,EAAE,wBAAAC,EAAA,MAA8BA,IAAyB,QAAQ,KAAM;AAAA,YACnFC,IAAqB,MAAO,GAAG;AAAA,WAChCA,IAAqB,MAAO,GAAG;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,OAAAF,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAI5CG,IAA2BJ,EAAO;AAAA;AAAA;AAAA,WAGnCG,IAAqB,MAAO,GAAG;AAAA,WAChC,CAAC,EAAE,QAAAE,IAAS,MAAA,MAAYA,CAAM;AAAA,YAC7B,CAAC,EAAE,SAAAC,IAAU,QAAA,MAAcA,CAAO;AAAA;"}

package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js ADDED Viewed

@@ -0,0 +1,54 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { memo as T } from "react";
+import { LOTTIE as e } from "../../../../../../assets/lottie/lottie.js";
+import l from "../../../../../ui/layout/flex-view.js";
+import d from "../../../../../ui/lottie-animation/lottie-animation.js";
+import _ from "../../../../../ui/separator/separator.js";
+import m from "../../../../../ui/text/text.js";
+import { GAME_LAUNCHER_SIZE as E, GAME_LAUNCHER_SIZE_LARGE as i } from "../../card-container/constants.js";
+import f from "../table-star/table-star.js";
+import { ModeContentSquareBlock as t, TableModeLottieContainer as s } from "./table-mode-styled.js";
+const I = {
+  sequence: e.SEQUENCE_MODE_SEGMENT_LOTTIE,
+  random: e.RANDOM_MODE_SEGMENT_LOTTIE,
+  advance: e.ADVANCE_MODE_SEGMENT_LOTTIE
+}, G = T(({ tableNumber: c, isStarAchieved: n, type: o }) => /* @__PURE__ */ a(l, { $alignItems: "center", children: [
+  /* @__PURE__ */ r(
+    f,
+    {
+      fill: n ? "GREEN_4" : "WHITE_T_15",
+      bgFill: n ? "GREEN_6" : "WHITE_T_15"
+    }
+  ),
+  /* @__PURE__ */ r(_, { height: E === i ? 22 : 16 }),
+  /* @__PURE__ */ a(l, { $flexDirection: "row", children: [
+    /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(
+      m,
+      {
+        $renderAs: E === i ? "ac3-black" : "ab2-bold",
+        $color: "WHITE",
+        children: c
+      }
+    ) }),
+    /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(
+      m,
+      {
+        $renderAs: E === i ? "ac3-black" : "ab2-bold",
+        $color: "WHITE",
+        children: "×"
+      }
+    ) }),
+    /* @__PURE__ */ r(t, { $isBorderRightRequired: o === "advance", children: /* @__PURE__ */ r(
+      s,
+      {
+        $bottom: o === "advance" ? "-1px" : "unset",
+        $right: o === "advance" ? "-1px" : "unset",
+        children: /* @__PURE__ */ r(d, { src: I[o] ?? "" })
+      }
+    ) })
+  ] })
+] }));
+export {
+  G as default
+};
+//# sourceMappingURL=table-mode.js.map

package/dist/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"table-mode.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-mode/table-mode.tsx"],"sourcesContent":["import type { TTableMode } from '../../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { ITableModeProps } from './table-mode-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport { LOTTIE } from '../../../../../../assets/lottie/lottie';\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../../ui/separator/separator';\nimport Text from '../../../../../ui/text/text';\nimport { GAME_LAUNCHER_SIZE, GAME_LAUNCHER_SIZE_LARGE } from '../../card-container/constants';\nimport TableStar from '../table-star/table-star';\nimport * as Styled from './table-mode-styled';\n\nconst LOAD_LOTTIE: Partial<Record<TTableMode, string>> = {\n sequence: LOTTIE.SEQUENCE_MODE_SEGMENT_LOTTIE,\n random: LOTTIE.RANDOM_MODE_SEGMENT_LOTTIE,\n advance: LOTTIE.ADVANCE_MODE_SEGMENT_LOTTIE,\n};\n\nconst TableMode: FC<ITableModeProps> = memo(({ tableNumber, isStarAchieved, type }) => {\n return (\n <FlexView $alignItems=\"center\">\n <TableStar\n fill={isStarAchieved ? 'GREEN_4' : 'WHITE_T_15'}\n bgFill={isStarAchieved ? 'GREEN_6' : 'WHITE_T_15'}\n />\n <Separator height={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 22 : 16} />\n <FlexView $flexDirection=\"row\">\n <Styled.ModeContentSquareBlock>\n <Text\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ab2-bold'}\n $color=\"WHITE\"\n >\n {tableNumber}\n </Text>\n </Styled.ModeContentSquareBlock>\n <Styled.ModeContentSquareBlock>\n <Text\n $renderAs={GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 'ac3-black' : 'ab2-bold'}\n $color=\"WHITE\"\n >\n ×\n </Text>\n </Styled.ModeContentSquareBlock>\n <Styled.ModeContentSquareBlock $isBorderRightRequired={type === 'advance'}>\n <Styled.TableModeLottieContainer\n $bottom={type === 'advance' ? '-1px' : 'unset'}\n $right={type === 'advance' ? '-1px' : 'unset'}\n >\n <LottieAnimation src={LOAD_LOTTIE[type] ?? ''} />\n </Styled.TableModeLottieContainer>\n </Styled.ModeContentSquareBlock>\n </FlexView>\n </FlexView>\n );\n});\n\nexport default TableMode;\n"],"names":["LOAD_LOTTIE","LOTTIE","TableMode","memo","tableNumber","isStarAchieved","type","jsxs","FlexView","jsx","TableStar","Separator","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","Styled.ModeContentSquareBlock","Text","Styled.TableModeLottieContainer","LottieAnimation"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAmD;AAAA,EACvD,UAAUC,EAAO;AAAA,EACjB,QAAQA,EAAO;AAAA,EACf,SAASA,EAAO;AAClB,GAEMC,IAAiCC,EAAK,CAAC,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,MAAAC,QAExE,gBAAAC,EAACC,GAAS,EAAA,aAAY,UACpB,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAML,IAAiB,YAAY;AAAA,MACnC,QAAQA,IAAiB,YAAY;AAAA,IAAA;AAAA,EACvC;AAAA,oBACCM,GAAU,EAAA,QAAQC,MAAuBC,IAA2B,KAAK,IAAI;AAAA,EAC9E,gBAAAN,EAACC,GAAS,EAAA,gBAAe,OACvB,UAAA;AAAA,IAAC,gBAAAC,EAAAK,GAAA,EACC,UAAA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,WAAWH,MAAuBC,IAA2B,cAAc;AAAA,QAC3E,QAAO;AAAA,QAEN,UAAAT;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IACA,gBAAAK,EAACK,GAAA,EACC,UAAA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,WAAWH,MAAuBC,IAA2B,cAAc;AAAA,QAC3E,QAAO;AAAA,QACR,UAAA;AAAA,MAAA;AAAA,IAAA,GAGH;AAAA,sBACCC,GAAA,EAA8B,wBAAwBR,MAAS,WAC9D,UAAA,gBAAAG;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,SAASV,MAAS,YAAY,SAAS;AAAA,QACvC,QAAQA,MAAS,YAAY,SAAS;AAAA,QAEtC,4BAACW,GAAgB,EAAA,KAAKjB,EAAYM,CAAI,KAAK,IAAI;AAAA,MAAA;AAAA,IAAA,GAEnD;AAAA,EAAA,GACF;AACF,EAAA,CAAA,CAEH;"}

package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star-styled.js ADDED Viewed

@@ -0,0 +1,11 @@
+import c from "styled-components";
+const t = c.circle`
+  fill: ${({ $fill: l, theme: o }) => o.colors[l]};
+`, i = c.path`
+  fill: ${({ $fill: l, theme: o }) => o.colors[l]};
+`;
+export {
+  t as Circle,
+  i as Path
+};
+//# sourceMappingURL=table-star-styled.js.map

package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star-styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"table-star-styled.js","sources":["../../../../../../../src/features/circle-games/game-launcher/comps/tables-card/table-star/table-star-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../../ui/types';\n\nimport styled from 'styled-components';\n\nexport const Circle = styled.circle<{ $fill: TColorNames }>`\n fill: ${({ $fill, theme }) => theme.colors[$fill]};\n`;\n\nexport const Path = styled.path<{ $fill: TColorNames }>`\n fill: ${({ $fill, theme }) => theme.colors[$fill]};\n`;\n"],"names":["Circle","styled","$fill","theme","Path"],"mappings":";AAIO,MAAMA,IAASC,EAAO;AAAA,UACnB,CAAC,EAAE,OAAAC,GAAO,OAAAC,EAAA,MAAYA,EAAM,OAAOD,CAAK,CAAC;AAAA,GAGtCE,IAAOH,EAAO;AAAA,UACjB,CAAC,EAAE,OAAAC,GAAO,OAAAC,EAAA,MAAYA,EAAM,OAAOD,CAAK,CAAC;AAAA;"}

package/dist/features/circle-games/game-launcher/comps/tables-card/table-star/table-star.js ADDED Viewed

@@ -0,0 +1,16 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { Circle as L, Path as e } from "./table-star-styled.js";
+const f = ({ fill: t, bgFill: l }) => /* @__PURE__ */ i("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+  /* @__PURE__ */ r(L, { cx: "8", cy: "8", r: "8", $fill: l }),
+  /* @__PURE__ */ r(
+    e,
+    {
+      d: "M8 2L6.23664 5.57295L2.29366 6.1459L5.14683 8.92705L4.47329 12.8541L8 11L11.5267 12.8541L10.8532 8.92705L13.7063 6.1459L9.76336 5.57295L8 2Z",
+      $fill: t
+    }
+  )
+] });
+export {
+  f as default
+};
+//# sourceMappingURL=table-star.js.map