@cuemath/leap 3.0.7-hg1 → 3.0.7-hg3

package/dist/features/ui/arc-button/arc-button-styled.js

@@ -0,0 +1,51 @@
+import e from "styled-components";
+import { ARC_BUTTON_WRAPPER_HEIGHT as r, ABSOLUTE_ARC_BUTTON_WIDTH as n, ARC_BUTTON_BOTTOM_OFFSET as i } from "./constants.js";
+const d = e.div`
+  height: ${r}px;
+  width: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  margin-top: auto;
+  flex-shrink: 0;
+`, a = e.div`
+  position: absolute;
+  display: flex;
+  height: ${n}px;
+  width: ${n / 2}px;
+  border-top-right-radius: 100%;
+  border-top-left-radius: 100%;
+  top: ${r - i}px;
+  z-index: 0;
+  transform: scaleX(2);
+  background: ${({ $renderAs: o, theme: t }) => o === "secondary" ? t.colors.WHITE_T_87 : t.colors.WHITE_T_03};
+  border: ${({ theme: o }) => `1px solid ${o.colors.WHITE_T_38}`};
+  box-shadow: ${({ theme: o }) => `0px -12px 24px 8px ${o.colors.BLACK_1}`};
+  backdrop-filter: blur(40px);
+  &:hover {
+    background: ${({ $renderAs: o, theme: t }) => o === "secondary" ? t.colors.WHITE_T_60 : t.colors.WHITE_T_05};
+    cursor: pointer;
+  }
+`, l = e.div`
+  position: absolute;
+  display: flex;
+  height: ${r - i};
+  width: 100%;
+  top: ${r - i}px;
+  background: transparent;
+  z-index: 1;
+  pointer-events: none;
+`, c = e.div`
+  display: flex;
+  justify-content: center;
+  padding-top: 22px;
+  width: inherit;
+`;
+export {
+  l as ButtonContentContainer,
+  c as ButtonLabelWrapper,
+  a as ButtonShape,
+  d as ButtonWrapper
+};
+//# sourceMappingURL=arc-button-styled.js.map

package/dist/features/ui/arc-button/arc-button-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arc-button-styled.js","sources":["../../../../src/features/ui/arc-button/arc-button-styled.tsx"],"sourcesContent":["import type { TRenderAs } from './arc-button-types';\n\nimport styled from 'styled-components';\n\nimport {\n  ABSOLUTE_ARC_BUTTON_WIDTH,\n  ARC_BUTTON_BOTTOM_OFFSET,\n  ARC_BUTTON_WRAPPER_HEIGHT,\n} from './constants';\n\nexport const ButtonWrapper = styled.div`\n  height: ${ARC_BUTTON_WRAPPER_HEIGHT}px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  overflow: hidden;\n  margin-top: auto;\n  flex-shrink: 0;\n`;\n\nexport const ButtonShape = styled.div<{ $renderAs: TRenderAs }>`\n  position: absolute;\n  display: flex;\n  height: ${ABSOLUTE_ARC_BUTTON_WIDTH}px;\n  width: ${ABSOLUTE_ARC_BUTTON_WIDTH / 2}px;\n  border-top-right-radius: 100%;\n  border-top-left-radius: 100%;\n  top: ${ARC_BUTTON_WRAPPER_HEIGHT - ARC_BUTTON_BOTTOM_OFFSET}px;\n  z-index: 0;\n  transform: scaleX(2);\n  background: ${({ $renderAs, theme }) =>\n    $renderAs === 'secondary' ? theme.colors.WHITE_T_87 : theme.colors.WHITE_T_03};\n  border: ${({ theme }) => `1px solid ${theme.colors.WHITE_T_38}`};\n  box-shadow: ${({ theme }) => `0px -12px 24px 8px ${theme.colors.BLACK_1}`};\n  backdrop-filter: blur(40px);\n  &:hover {\n    background: ${({ $renderAs, theme }) =>\n      $renderAs === 'secondary' ? theme.colors.WHITE_T_60 : theme.colors.WHITE_T_05};\n    cursor: pointer;\n  }\n`;\n\nexport const ButtonContentContainer = styled.div`\n  position: absolute;\n  display: flex;\n  height: ${ARC_BUTTON_WRAPPER_HEIGHT - ARC_BUTTON_BOTTOM_OFFSET};\n  width: 100%;\n  top: ${ARC_BUTTON_WRAPPER_HEIGHT - ARC_BUTTON_BOTTOM_OFFSET}px;\n  background: transparent;\n  z-index: 1;\n  pointer-events: none;\n`;\n\nexport const ButtonLabelWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n  padding-top: 22px;\n  width: inherit;\n`;\n"],"names":["ButtonWrapper","styled","ARC_BUTTON_WRAPPER_HEIGHT","ButtonShape","ABSOLUTE_ARC_BUTTON_WIDTH","ARC_BUTTON_BOTTOM_OFFSET","$renderAs","theme","ButtonContentContainer","ButtonLabelWrapper"],"mappings":";;AAUO,MAAMA,IAAgBC,EAAO;AAAA,YACxBC,CAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUxBC,IAAcF,EAAO;AAAA;AAAA;AAAA,YAGtBG,CAAyB;AAAA,WAC1BA,IAA4B,CAAC;AAAA;AAAA;AAAA,SAG/BF,IAA4BG,CAAwB;AAAA;AAAA;AAAA,gBAG7C,CAAC,EAAE,WAAAC,GAAW,OAAAC,EAAA,MAC1BD,MAAc,cAAcC,EAAM,OAAO,aAAaA,EAAM,OAAO,UAAU;AAAA,YACrE,CAAC,EAAE,OAAAA,EAAM,MAAM,aAAaA,EAAM,OAAO,UAAU,EAAE;AAAA,gBACjD,CAAC,EAAE,OAAAA,EAAM,MAAM,sBAAsBA,EAAM,OAAO,OAAO,EAAE;AAAA;AAAA;AAAA,kBAGzD,CAAC,EAAE,WAAAD,GAAW,OAAAC,EAAA,MAC1BD,MAAc,cAAcC,EAAM,OAAO,aAAaA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA,GAKtEC,IAAyBP,EAAO;AAAA;AAAA;AAAA,YAGjCC,IAA4BG,CAAwB;AAAA;AAAA,SAEvDH,IAA4BG,CAAwB;AAAA;AAAA;AAAA;AAAA,GAMhDI,IAAqBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/ui/arc-button/arc-button.js

@@ -0,0 +1,31 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { memo as d, forwardRef as f, useRef as C, useImperativeHandle as B, useCallback as h } from "react";
+import { useCircleSounds as k } from "../../circle-games/hooks/use-circle-sounds/use-circle-sounds.js";
+import b from "../hooks/use-click-handler.js";
+import { ButtonWrapper as x, ButtonShape as R, ButtonContentContainer as S, ButtonLabelWrapper as j } from "./arc-button-styled.js";
+const w = d(
+  f(
+    ({ onClick: n, renderAs: l = "primary", children: u, analyticsLabel: i, analyticsProps: a, disabled: c }, s) => {
+      const { playButtonSound: t } = k(), { handleClick: e } = b({ analyticsLabel: i, analyticsProps: a }, n), r = C(null);
+      B(s, () => r.current, [r]);
+      const m = h(() => {
+        t(), e();
+      }, [t, e]);
+      return /* @__PURE__ */ p(x, { children: [
+        /* @__PURE__ */ o(
+          R,
+          {
+            ref: r,
+            $renderAs: l,
+            onClick: c ? void 0 : m
+          }
+        ),
+        /* @__PURE__ */ o(S, { children: /* @__PURE__ */ o(j, { children: u }) })
+      ] });
+    }
+  )
+);
+export {
+  w as ArcButton
+};
+//# sourceMappingURL=arc-button.js.map

package/dist/features/ui/arc-button/arc-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arc-button.js","sources":["../../../../src/features/ui/arc-button/arc-button.tsx"],"sourcesContent":["import type { IArcButtonProps } from './arc-button-types';\nimport type { PropsWithChildren } from 'react';\n\nimport { memo, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { useCircleSounds } from '../../circle-games/hooks/use-circle-sounds/use-circle-sounds';\nimport useClickHandler from '../hooks/use-click-handler';\nimport * as Styled from './arc-button-styled';\n\nexport const ArcButton = memo(\n  forwardRef<HTMLDivElement, PropsWithChildren<IArcButtonProps>>(\n    (\n      { onClick, renderAs = 'primary', children, analyticsLabel, analyticsProps, disabled },\n      ref,\n    ) => {\n      const { playButtonSound } = useCircleSounds();\n      const { handleClick } = useClickHandler({ analyticsLabel, analyticsProps }, onClick);\n\n      const buttonRef = useRef<HTMLDivElement>(null);\n\n      useImperativeHandle(ref, () => buttonRef.current!, [buttonRef]);\n\n      const handleOnClick = useCallback(() => {\n        playButtonSound();\n        handleClick();\n      }, [playButtonSound, handleClick]);\n\n      return (\n        <Styled.ButtonWrapper>\n          <Styled.ButtonShape\n            ref={buttonRef}\n            $renderAs={renderAs}\n            onClick={!disabled ? handleOnClick : undefined}\n          />\n          <Styled.ButtonContentContainer>\n            <Styled.ButtonLabelWrapper>{children}</Styled.ButtonLabelWrapper>\n          </Styled.ButtonContentContainer>\n        </Styled.ButtonWrapper>\n      );\n    },\n  ),\n);\n"],"names":["ArcButton","memo","forwardRef","onClick","renderAs","children","analyticsLabel","analyticsProps","disabled","ref","playButtonSound","useCircleSounds","handleClick","useClickHandler","buttonRef","useRef","useImperativeHandle","handleOnClick","useCallback","jsxs","Styled.ButtonWrapper","jsx","Styled.ButtonShape","Styled.ButtonContentContainer","Styled.ButtonLabelWrapper"],"mappings":";;;;;AASO,MAAMA,IAAYC;AAAA,EACvBC;AAAA,IACE,CACE,EAAE,SAAAC,GAAS,UAAAC,IAAW,WAAW,UAAAC,GAAU,gBAAAC,GAAgB,gBAAAC,GAAgB,UAAAC,EAAS,GACpFC,MACG;AACG,YAAA,EAAE,iBAAAC,MAAoBC,KACtB,EAAE,aAAAC,MAAgBC,EAAgB,EAAE,gBAAAP,GAAgB,gBAAAC,EAAA,GAAkBJ,CAAO,GAE7EW,IAAYC,EAAuB,IAAI;AAE7C,MAAAC,EAAoBP,GAAK,MAAMK,EAAU,SAAU,CAACA,CAAS,CAAC;AAExD,YAAAG,IAAgBC,EAAY,MAAM;AACtB,QAAAR,KACJE;MAAA,GACX,CAACF,GAAiBE,CAAW,CAAC;AAG/B,aAAA,gBAAAO,EAACC,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,KAAKR;AAAA,YACL,WAAWV;AAAA,YACX,SAAUI,IAA2B,SAAhBS;AAAA,UAAgB;AAAA,QACvC;AAAA,QACA,gBAAAI,EAACE,GAAA,EACC,4BAACC,GAAA,EAA2B,UAAAnB,EAAS,CAAA,GACvC;AAAA,MACF,EAAA,CAAA;AAAA,IAEJ;AAAA,EACF;AACF;"}

package/dist/features/ui/arc-button/constants.js

@@ -0,0 +1,7 @@
+const t = 1680, T = 64 + (window.ReactNativeBottomInset || 0), o = 112 + (window.ReactNativeBottomInset || 0);
+export {
+  t as ABSOLUTE_ARC_BUTTON_WIDTH,
+  T as ARC_BUTTON_BOTTOM_OFFSET,
+  o as ARC_BUTTON_WRAPPER_HEIGHT
+};
+//# sourceMappingURL=constants.js.map

package/dist/features/ui/arc-button/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../src/features/ui/arc-button/constants.ts"],"sourcesContent":["export const ABSOLUTE_ARC_BUTTON_WIDTH = 1680;\nexport const ARC_BUTTON_BOTTOM_OFFSET = 64 + (window.ReactNativeBottomInset || 0);\nexport const ARC_BUTTON_WRAPPER_HEIGHT = 112 + (window.ReactNativeBottomInset || 0);\n"],"names":["ABSOLUTE_ARC_BUTTON_WIDTH","ARC_BUTTON_BOTTOM_OFFSET","ARC_BUTTON_WRAPPER_HEIGHT"],"mappings":"AAAO,MAAMA,IAA4B,MAC5BC,IAA2B,MAAM,OAAO,0BAA0B,IAClEC,IAA4B,OAAO,OAAO,0BAA0B;"}

package/dist/features/ui/arrow-tooltip/arrow-tooltip-styled.js

@@ -0,0 +1,63 @@
+import w from "styled-components";
+import y from "../layout/flex-view.js";
+import { arrowPosition as T, tooltipPosition as k, animateToolTip as m } from "./arrow-tooltip-util.js";
+const P = w(y)(({
+  theme: o,
+  $arrowColor: r,
+  $arrowSize: t,
+  $arrowXCoOrdinates: c,
+  $arrowYCoOrdinates: d,
+  $borderColor: p,
+  $isAnimated: x,
+  $position: n,
+  $renderAs: s,
+  $tooltipCoOrdinates: e,
+  $tooltipOffset: f,
+  $tooltipXCoOrdinates: g,
+  $tooltipYCoOrdinates: u,
+  $zIndex: C,
+  $backgroundColor: O
+}) => {
+  const { gutter: l } = o.layout, { REAL_BLACK_15: $ } = o.colors, { tooltipVariants: a } = o.arrowTooltip;
+  let { backgroundColorName: i } = a[s];
+  const { textColorName: b } = a[s];
+  return i = O || i, `
+    position: fixed;
+    z-index: ${C || 1};
+    padding: ${l * 0.25}px ${l * 0.5}px;
+    color: ${b};
+    box-shadow: 0px 2px 15px 0px ${$};
+    background-color: ${o.colors[i]};
+    border: 1px solid ${p ? o.colors[p] : "transparent"};
+
+    &::after {
+      content: '';
+      position: absolute;
+      height: ${t}px;
+      width: ${t}px;
+      clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+      background-color: ${r ? o.colors[r] : o.colors[i]};
+      ${T({
+    position: n,
+    arrowXCoOrdinates: c,
+    arrowYCoOrdinates: d,
+    arrowSize: t
+  })};
+    }
+
+    ${k({
+    position: n,
+    arrowSize: t,
+    tooltipCoOrdinates: e,
+    tooltipOffset: f,
+    tooltipXCoOrdinates: g,
+    tooltipYCoOrdinates: u
+  })};
+
+    ${m(x)};
+  `;
+});
+export {
+  P as TooltipBody
+};
+//# sourceMappingURL=arrow-tooltip-styled.js.map

package/dist/features/ui/arrow-tooltip/arrow-tooltip-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-tooltip-styled.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip-styled.tsx"],"sourcesContent":["import type { TArrowTooltipVariants, TColorNames } from '../types';\nimport type { TPositionProps, TTooltipCoOrdinatesProps } from './arrow-tooltip-types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport { animateToolTip, arrowPosition, tooltipPosition } from './arrow-tooltip-util';\n\ninterface ITooltipBodyProps {\n  $arrowSize: number;\n  $arrowColor?: TColorNames;\n  $arrowXCoOrdinates?: number;\n  $arrowYCoOrdinates?: number;\n  $backgroundColor?: TColorNames;\n  $borderColor?: TColorNames;\n  $position: TPositionProps;\n  $renderAs: TArrowTooltipVariants;\n  $tooltipCoOrdinates: TTooltipCoOrdinatesProps | null;\n  $tooltipOffset?: number;\n  $tooltipXCoOrdinates?: number;\n  $tooltipYCoOrdinates?: number;\n  $zIndex?: number;\n  $isAnimated?: boolean;\n}\n\nconst TooltipBody = styled(FlexView)<ITooltipBodyProps>(({\n  theme,\n  $arrowColor,\n  $arrowSize,\n  $arrowXCoOrdinates,\n  $arrowYCoOrdinates,\n  $borderColor,\n  $isAnimated,\n  $position,\n  $renderAs,\n  $tooltipCoOrdinates,\n  $tooltipOffset,\n  $tooltipXCoOrdinates,\n  $tooltipYCoOrdinates,\n  $zIndex,\n  $backgroundColor,\n}) => {\n  const { gutter } = theme.layout;\n  const { REAL_BLACK_15 } = theme.colors;\n  const { tooltipVariants } = theme.arrowTooltip;\n  let { backgroundColorName } = tooltipVariants[$renderAs];\n  const { textColorName } = tooltipVariants[$renderAs];\n\n  backgroundColorName = $backgroundColor || backgroundColorName;\n\n  return `\n    position: fixed;\n    z-index: ${$zIndex || 1};\n    padding: ${gutter * 0.25}px ${gutter * 0.5}px;\n    color: ${textColorName};\n    box-shadow: 0px 2px 15px 0px ${REAL_BLACK_15};\n    background-color: ${theme.colors[backgroundColorName]};\n    border: 1px solid ${$borderColor ? theme.colors[$borderColor] : 'transparent'};\n\n    &::after {\n      content: '';\n      position: absolute;\n      height: ${$arrowSize}px;\n      width: ${$arrowSize}px;\n      clip-path: polygon(0% 0%, 100% 100%, 0% 100%);\n      background-color: ${\n        $arrowColor ? theme.colors[$arrowColor] : theme.colors[backgroundColorName]\n      };\n      ${arrowPosition({\n        position: $position,\n        arrowXCoOrdinates: $arrowXCoOrdinates,\n        arrowYCoOrdinates: $arrowYCoOrdinates,\n        arrowSize: $arrowSize,\n      })};\n    }\n\n    ${tooltipPosition({\n      position: $position,\n      arrowSize: $arrowSize,\n      tooltipCoOrdinates: $tooltipCoOrdinates,\n      tooltipOffset: $tooltipOffset,\n      tooltipXCoOrdinates: $tooltipXCoOrdinates,\n      tooltipYCoOrdinates: $tooltipYCoOrdinates,\n    })};\n\n    ${animateToolTip($isAnimated)};\n  `;\n});\n\nexport { TooltipBody };\n"],"names":["TooltipBody","styled","FlexView","theme","$arrowColor","$arrowSize","$arrowXCoOrdinates","$arrowYCoOrdinates","$borderColor","$isAnimated","$position","$renderAs","$tooltipCoOrdinates","$tooltipOffset","$tooltipXCoOrdinates","$tooltipYCoOrdinates","$zIndex","$backgroundColor","gutter","REAL_BLACK_15","tooltipVariants","backgroundColorName","textColorName","arrowPosition","tooltipPosition","animateToolTip"],"mappings":";;;AAyBA,MAAMA,IAAcC,EAAOC,CAAQ,EAAqB,CAAC;AAAA,EACvD,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,kBAAAC;AACF,MAAM;AACE,QAAA,EAAE,QAAAC,EAAO,IAAIf,EAAM,QACnB,EAAE,eAAAgB,EAAc,IAAIhB,EAAM,QAC1B,EAAE,iBAAAiB,EAAgB,IAAIjB,EAAM;AAClC,MAAI,EAAE,qBAAAkB,EAAA,IAAwBD,EAAgBT,CAAS;AACvD,QAAM,EAAE,eAAAW,EAAA,IAAkBF,EAAgBT,CAAS;AAEnD,SAAAU,IAAsBJ,KAAoBI,GAEnC;AAAA;AAAA,eAEML,KAAW,CAAC;AAAA,eACZE,IAAS,IAAI,MAAMA,IAAS,GAAG;AAAA,aACjCI,CAAa;AAAA,mCACSH,CAAa;AAAA,wBACxBhB,EAAM,OAAOkB,CAAmB,CAAC;AAAA,wBACjCb,IAAeL,EAAM,OAAOK,CAAY,IAAI,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKjEH,CAAU;AAAA,eACXA,CAAU;AAAA;AAAA,0BAGjBD,IAAcD,EAAM,OAAOC,CAAW,IAAID,EAAM,OAAOkB,CAAmB,CAC5E;AAAA,QACEE,EAAc;AAAA,IACd,UAAUb;AAAA,IACV,mBAAmBJ;AAAA,IACnB,mBAAmBC;AAAA,IACnB,WAAWF;AAAA,EAAA,CACZ,CAAC;AAAA;AAAA;AAAA,MAGFmB,EAAgB;AAAA,IAChB,UAAUd;AAAA,IACV,WAAWL;AAAA,IACX,oBAAoBO;AAAA,IACpB,eAAeC;AAAA,IACf,qBAAqBC;AAAA,IACrB,qBAAqBC;AAAA,EAAA,CACtB,CAAC;AAAA;AAAA,MAEAU,EAAehB,CAAW,CAAC;AAAA;AAEjC,CAAC;"}

package/dist/features/ui/arrow-tooltip/arrow-tooltip-util.js

@@ -0,0 +1,133 @@
+const s = (a, t) => {
+  let c = {};
+  const { top: e, left: r, right: l, bottom: p, width: f, height: n } = t;
+  return ["top", "top-right", "top-left"].includes(a) ? c = {
+    top: e,
+    left: r + f / 2
+  } : a === "bottom" ? c = {
+    bottom: p,
+    left: r + f / 2
+  } : a === "left" ? c = {
+    top: e + n / 2,
+    left: r
+  } : a === "right" && (c = {
+    top: e + n / 2,
+    right: l
+  }), c;
+}, o = ({
+  position: a,
+  arrowXCoOrdinates: t,
+  arrowYCoOrdinates: c,
+  arrowSize: e
+}) => {
+  switch (a) {
+    case "top":
+      return `
+        bottom: 0;
+        left: 50%;
+        transform: translate(calc(-50% + ${t || 0}px),50%) rotate(-45deg);
+      `;
+    case "top-right":
+      return `
+          bottom: 0;
+          left: ${e}%;
+          transform: translate(calc(-50% + ${t || 0}px),50%) rotate(-45deg);
+        `;
+    case "top-left":
+      return `
+          bottom: 0;
+          left: ${100 - e}%;
+          transform: translate(calc(-50% + ${t || 0}px),50%) rotate(-45deg);
+        `;
+    case "bottom":
+      return `
+        top: 0;
+        left: 50%;
+        transform: translate(calc(-50% + ${t || 0}px),-50%) rotate(135deg);
+      `;
+    case "right":
+      return `
+        top: 50%;
+        left: 0;
+        transform: translate(-50%,calc(-50% + ${c || 0}px)) rotate(45deg);
+      `;
+    case "left":
+      return `
+        top: 50%;
+        right: 0;
+        transform: translate(50%,calc(-50% + ${c || 0}px)) rotate(225deg);
+      `;
+    default:
+      return "";
+  }
+}, $ = ({
+  position: a,
+  arrowSize: t,
+  tooltipCoOrdinates: c,
+  tooltipXCoOrdinates: e,
+  tooltipYCoOrdinates: r
+}) => {
+  const { left: l, top: p, right: f, bottom: n } = c || {};
+  switch (a) {
+    case "top":
+      return `
+          top: ${p}px;
+          left: ${l}px;
+          transform: translate(calc(-50% + ${e || 0}px), calc(-100% - ${r || t}px));
+        `;
+    case "top-right":
+      return `
+          top: ${p}px;
+          left: ${l}px;
+          transform: translate(calc(-${t}% + ${e || 0}px), calc(-100% - ${r || t}px));
+        `;
+    case "top-left":
+      return `
+          top: ${p}px;
+          left: ${l}px;
+          transform: translate(calc(-${100 - t}% + ${e || 0}px), calc(-100% - ${r || t}px));
+        `;
+    case "right":
+      return `
+          top: ${p}px;
+          left: ${f}px;
+          transform: translate(${e || t}px, calc(-50% + ${r || 0}px));
+        `;
+    case "bottom":
+      return `
+          top: ${n}px;
+          left: ${l}px;
+          transform: translate(calc(-50% + ${e || 0}px), ${r || t}px);
+        `;
+    case "left":
+      return `
+          top: ${p}px;
+          left: ${l}px;
+          transform: translate(calc(-100% - ${e || t}px), calc(-50% + ${r || 0}px));
+        `;
+    default:
+      return "";
+  }
+}, x = (a) => {
+  switch (a) {
+    case !0:
+      return `
+        opacity: 0;
+        animation: fadeIn 0.5s ease-in-out 500ms forwards;
+
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+      `;
+    default:
+      return "";
+  }
+};
+export {
+  x as animateToolTip,
+  o as arrowPosition,
+  s as computeTooltipNewCoOrdinates,
+  $ as tooltipPosition
+};
+//# sourceMappingURL=arrow-tooltip-util.js.map

package/dist/features/ui/arrow-tooltip/arrow-tooltip-util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-tooltip-util.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip-util.ts"],"sourcesContent":["import type {\n  ITooltipPositionProps,\n  TArrowPositionProps,\n  TTooltipCoOrdinatesProps,\n} from './arrow-tooltip-types';\n\ntype TComputeTooltipNewCoOrdinates = (\n  position: string,\n  boundingClientRect: DOMRect,\n) => TTooltipCoOrdinatesProps;\n\nconst computeTooltipNewCoOrdinates: TComputeTooltipNewCoOrdinates = (\n  position,\n  boundingClientRect,\n) => {\n  let newCoordinates = {};\n  const { top, left, right, bottom, width, height } = boundingClientRect;\n\n  if (['top', 'top-right', 'top-left'].includes(position)) {\n    newCoordinates = {\n      top: top,\n      left: left + width / 2,\n    };\n  } else if (position === 'bottom') {\n    newCoordinates = {\n      bottom: bottom,\n      left: left + width / 2,\n    };\n  } else if (position === 'left') {\n    newCoordinates = {\n      top: top + height / 2,\n      left: left,\n    };\n  } else if (position === 'right') {\n    newCoordinates = {\n      top: top + height / 2,\n      right: right,\n    };\n  }\n\n  return newCoordinates;\n};\n\nconst arrowPosition: TArrowPositionProps = ({\n  position,\n  arrowXCoOrdinates,\n  arrowYCoOrdinates,\n  arrowSize,\n}) => {\n  switch (position) {\n    case 'top':\n      return `\n        bottom: 0;\n        left: 50%;\n        transform: translate(calc(-50% + ${arrowXCoOrdinates || 0}px),50%) rotate(-45deg);\n      `;\n\n    case 'top-right':\n      return `\n          bottom: 0;\n          left: ${arrowSize}%;\n          transform: translate(calc(-50% + ${arrowXCoOrdinates || 0}px),50%) rotate(-45deg);\n        `;\n\n    case 'top-left':\n      return `\n          bottom: 0;\n          left: ${100 - arrowSize}%;\n          transform: translate(calc(-50% + ${arrowXCoOrdinates || 0}px),50%) rotate(-45deg);\n        `;\n\n    case 'bottom':\n      return `\n        top: 0;\n        left: 50%;\n        transform: translate(calc(-50% + ${arrowXCoOrdinates || 0}px),-50%) rotate(135deg);\n      `;\n\n    case 'right':\n      return `\n        top: 50%;\n        left: 0;\n        transform: translate(-50%,calc(-50% + ${arrowYCoOrdinates || 0}px)) rotate(45deg);\n      `;\n\n    case 'left':\n      return `\n        top: 50%;\n        right: 0;\n        transform: translate(50%,calc(-50% + ${arrowYCoOrdinates || 0}px)) rotate(225deg);\n      `;\n\n    default:\n      return ``;\n  }\n};\n\nconst tooltipPosition = ({\n  position,\n  arrowSize,\n  tooltipCoOrdinates,\n  tooltipXCoOrdinates,\n  tooltipYCoOrdinates,\n}: ITooltipPositionProps) => {\n  const { left, top, right, bottom } = tooltipCoOrdinates || {};\n\n  switch (position) {\n    case 'top':\n      return `\n          top: ${top}px;\n          left: ${left}px;\n          transform: translate(calc(-50% + ${tooltipXCoOrdinates || 0}px), calc(-100% - ${\n            tooltipYCoOrdinates || arrowSize\n          }px));\n        `;\n\n    case 'top-right':\n      return `\n          top: ${top}px;\n          left: ${left}px;\n          transform: translate(calc(-${arrowSize}% + ${tooltipXCoOrdinates || 0}px), calc(-100% - ${\n            tooltipYCoOrdinates || arrowSize\n          }px));\n        `;\n\n    case 'top-left':\n      return `\n          top: ${top}px;\n          left: ${left}px;\n          transform: translate(calc(-${100 - arrowSize}% + ${\n            tooltipXCoOrdinates || 0\n          }px), calc(-100% - ${tooltipYCoOrdinates || arrowSize}px));\n        `;\n\n    case 'right':\n      return `\n          top: ${top}px;\n          left: ${right}px;\n          transform: translate(${tooltipXCoOrdinates || arrowSize}px, calc(-50% + ${\n            tooltipYCoOrdinates || 0\n          }px));\n        `;\n\n    case 'bottom':\n      return `\n          top: ${bottom}px;\n          left: ${left}px;\n          transform: translate(calc(-50% + ${tooltipXCoOrdinates || 0}px), ${\n            tooltipYCoOrdinates || arrowSize\n          }px);\n        `;\n\n    case 'left':\n      return `\n          top: ${top}px;\n          left: ${left}px;\n          transform: translate(calc(-100% - ${tooltipXCoOrdinates || arrowSize}px), calc(-50% + ${\n            tooltipYCoOrdinates || 0\n          }px));\n        `;\n    default:\n      return ``;\n  }\n};\n\nconst animateToolTip = (animation?: boolean) => {\n  switch (animation) {\n    case true:\n      return `\n        opacity: 0;\n        animation: fadeIn 0.5s ease-in-out 500ms forwards;\n\n        @keyframes fadeIn {\n          from { opacity: 0; }\n          to { opacity: 1; }\n        }\n      `;\n    default:\n      return '';\n  }\n};\n\nexport { computeTooltipNewCoOrdinates, arrowPosition, tooltipPosition, animateToolTip };\n"],"names":["computeTooltipNewCoOrdinates","position","boundingClientRect","newCoordinates","top","left","right","bottom","width","height","arrowPosition","arrowXCoOrdinates","arrowYCoOrdinates","arrowSize","tooltipPosition","tooltipCoOrdinates","tooltipXCoOrdinates","tooltipYCoOrdinates","animateToolTip","animation"],"mappings":"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"}

package/dist/features/ui/arrow-tooltip/arrow-tooltip.js

@@ -0,0 +1,100 @@
+import { jsxs as I, Fragment as U, jsx as r } from "react/jsx-runtime";
+import W from "../../../node_modules/lodash.throttle/index.js";
+import { useRef as Y, useState as m, useCallback as $, useEffect as H } from "react";
+import { useTheme as P } from "styled-components";
+import C from "../layout/flex-view.js";
+import V from "../portal/portal.js";
+import Z from "../text/text.js";
+import { TooltipBody as q } from "./arrow-tooltip-styled.js";
+import { computeTooltipNewCoOrdinates as y } from "./arrow-tooltip-util.js";
+const G = 8, J = 100, K = ({
+  isAnimated: O,
+  alwaysVisible: o = !1,
+  arrowColor: T,
+  arrowSize: h = G,
+  arrowXCoOrdinates: g,
+  arrowYCoOrdinates: w,
+  backgroundColor: R,
+  borderColor: b,
+  children: x,
+  hidden: t,
+  position: c,
+  renderAs: i,
+  textVariant: A,
+  tooltipItem: l,
+  tooltipOffset: E,
+  tooltipXCoOrdinates: N,
+  tooltipYCoOrdinates: k,
+  width: F,
+  widthX: L,
+  zIndex: M,
+  parentWidth: S
+}) => {
+  const { arrowTooltip: X } = P(), { tooltipVariants: a } = X, { backgroundColorName: _ } = a[i], u = Y(null), [j, p] = m(o), [v, z] = m(
+    null
+  ), s = $(
+    (e, n) => {
+      z(e), p(n);
+    },
+    []
+  ), B = $(() => {
+    if (t || o)
+      return null;
+    s(null, !1);
+  }, [o, s, t]), d = W(() => {
+    var f;
+    const { current: e } = u;
+    if (t || !e) return null;
+    const n = (f = e.children[0]) == null ? void 0 : f.getBoundingClientRect(), D = n ? y(c, n) : null;
+    return s(D, !0), null;
+  }, J);
+  return H(() => {
+    t && p(!1), o && d();
+  }, [o, t]), /* @__PURE__ */ I(U, { children: [
+    /* @__PURE__ */ r(
+      C,
+      {
+        $width: S || "fit-content",
+        ref: u,
+        onMouseEnter: d,
+        onMouseLeave: B,
+        children: /* @__PURE__ */ r(C, { children: x })
+      }
+    ),
+    j && /* @__PURE__ */ r(V, { portalId: "tooltip-root", children: /* @__PURE__ */ r(
+      q,
+      {
+        $arrowSize: h,
+        $arrowXCoOrdinates: g,
+        $arrowYCoOrdinates: w,
+        $position: c,
+        $renderAs: i,
+        $tooltipCoOrdinates: v,
+        $tooltipOffset: E,
+        $tooltipXCoOrdinates: N,
+        $tooltipYCoOrdinates: k,
+        $width: F,
+        $widthX: L,
+        $zIndex: M,
+        $background: _,
+        $backgroundColor: R,
+        $arrowColor: T,
+        $borderColor: b,
+        $isAnimated: O,
+        children: typeof l == "string" ? /* @__PURE__ */ r(
+          Z,
+          {
+            $renderAs: A || "body3",
+            $color: a[i].textColorName,
+            $align: "center",
+            children: l
+          }
+        ) : l
+      }
+    ) })
+  ] });
+}, co = K;
+export {
+  co as default
+};
+//# sourceMappingURL=arrow-tooltip.js.map

package/dist/features/ui/arrow-tooltip/arrow-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-tooltip.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip.tsx"],"sourcesContent":["import type {\n  IArrowTooltipProps,\n  THandleVisibleNCoOrdinatesProps,\n  TTooltipCoOrdinatesProps,\n} from './arrow-tooltip-types';\n\nimport throttle from 'lodash.throttle';\nimport { useState, type FC, useCallback, useRef, useEffect } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport Portal from '../portal/portal';\nimport Text from '../text/text';\nimport * as Styled from './arrow-tooltip-styled';\nimport { computeTooltipNewCoOrdinates } from './arrow-tooltip-util';\n\nconst DEFAULT_ARROW_SIZE = 8;\nconst THROTTLE_DURATION = 100;\n\nconst ArrowTooltip: FC<IArrowTooltipProps> = ({\n  isAnimated,\n  alwaysVisible = false,\n  arrowColor,\n  arrowSize = DEFAULT_ARROW_SIZE,\n  arrowXCoOrdinates,\n  arrowYCoOrdinates,\n  backgroundColor,\n  borderColor,\n  children,\n  hidden,\n  position,\n  renderAs,\n  textVariant,\n  tooltipItem,\n  tooltipOffset,\n  tooltipXCoOrdinates,\n  tooltipYCoOrdinates,\n  width,\n  widthX,\n  zIndex,\n  parentWidth,\n}) => {\n  const { arrowTooltip } = useTheme();\n  const { tooltipVariants } = arrowTooltip;\n  const { backgroundColorName } = tooltipVariants[renderAs];\n\n  const tooltipWrapperRef = useRef<HTMLDivElement>(null);\n  const [visible, setVisible] = useState(alwaysVisible);\n  const [tooltipCoOrdinates, setTooltipCoOrdinates] = useState<TTooltipCoOrdinatesProps | null>(\n    null,\n  );\n\n  const handleVisibleNCoOrdinates: THandleVisibleNCoOrdinatesProps = useCallback(\n    (newCoOrdinates, visibility) => {\n      setTooltipCoOrdinates(newCoOrdinates);\n      setVisible(visibility);\n    },\n    [],\n  );\n\n  const handleVisibility = useCallback(() => {\n    if (hidden || alwaysVisible) {\n      return null;\n    }\n\n    handleVisibleNCoOrdinates(null, false);\n\n    return;\n  }, [alwaysVisible, handleVisibleNCoOrdinates, hidden]);\n\n  const handleOnMouseEnter = throttle(() => {\n    const { current } = tooltipWrapperRef;\n\n    if (hidden || !current) return null;\n\n    const boundingClientRect = current.children[0]?.getBoundingClientRect();\n    const newCoOrdinates = boundingClientRect\n      ? computeTooltipNewCoOrdinates(position, boundingClientRect)\n      : null;\n\n    handleVisibleNCoOrdinates(newCoOrdinates, true);\n\n    return null;\n  }, THROTTLE_DURATION);\n\n  useEffect(() => {\n    if (hidden) {\n      setVisible(false);\n    }\n\n    if (alwaysVisible) {\n      handleOnMouseEnter();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [alwaysVisible, hidden]);\n\n  return (\n    <>\n      <FlexView\n        $width={parentWidth || 'fit-content'}\n        ref={tooltipWrapperRef}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleVisibility}\n      >\n        <FlexView>{children}</FlexView>\n      </FlexView>\n      {visible && (\n        <Portal portalId=\"tooltip-root\">\n          <Styled.TooltipBody\n            $arrowSize={arrowSize}\n            $arrowXCoOrdinates={arrowXCoOrdinates}\n            $arrowYCoOrdinates={arrowYCoOrdinates}\n            $position={position}\n            $renderAs={renderAs}\n            $tooltipCoOrdinates={tooltipCoOrdinates}\n            $tooltipOffset={tooltipOffset}\n            $tooltipXCoOrdinates={tooltipXCoOrdinates}\n            $tooltipYCoOrdinates={tooltipYCoOrdinates}\n            $width={width}\n            $widthX={widthX}\n            $zIndex={zIndex}\n            $background={backgroundColorName}\n            $backgroundColor={backgroundColor}\n            $arrowColor={arrowColor}\n            $borderColor={borderColor}\n            $isAnimated={isAnimated}\n          >\n            {typeof tooltipItem === 'string' ? (\n              <Text\n                $renderAs={textVariant || 'body3'}\n                $color={tooltipVariants[renderAs].textColorName}\n                $align=\"center\"\n              >\n                {tooltipItem}\n              </Text>\n            ) : (\n              tooltipItem\n            )}\n          </Styled.TooltipBody>\n        </Portal>\n      )}\n    </>\n  );\n};\n\nexport default ArrowTooltip;\n"],"names":["DEFAULT_ARROW_SIZE","THROTTLE_DURATION","ArrowTooltip","isAnimated","alwaysVisible","arrowColor","arrowSize","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","children","hidden","position","renderAs","textVariant","tooltipItem","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","parentWidth","arrowTooltip","useTheme","tooltipVariants","backgroundColorName","tooltipWrapperRef","useRef","visible","setVisible","useState","tooltipCoOrdinates","setTooltipCoOrdinates","handleVisibleNCoOrdinates","useCallback","newCoOrdinates","visibility","handleVisibility","handleOnMouseEnter","throttle","current","boundingClientRect","_a","computeTooltipNewCoOrdinates","useEffect","jsxs","Fragment","jsx","FlexView","Portal","Styled.TooltipBody","Text","ArrowTooltip$1"],"mappings":"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"}

package/dist/features/ui/avatar/avatar-mapping.js

@@ -0,0 +1,60 @@
+import { lazy as p } from "react";
+const t = {
+  1: p(() => import("./layers/base/variant-1.js"))
+}, i = {
+  1: p(() => import("./layers/hair/variant-1.js")),
+  2: p(() => import("./layers/hair/variant-2.js")),
+  3: p(() => import("./layers/hair/variant-3.js")),
+  4: p(() => import("./layers/hair/variant-4.js")),
+  5: p(() => import("./layers/hair/variant-5.js")),
+  6: p(() => import("./layers/hair/variant-6.js")),
+  7: p(() => import("./layers/hair/variant-7.js")),
+  8: p(() => import("./layers/hair/variant-8.js")),
+  9: p(() => import("./layers/hair/variant-9.js")),
+  10: p(() => import("./layers/hair/variant-10.js"))
+}, r = {
+  1: p(() => import("./layers/eyes/variant-1.js")),
+  2: p(() => import("./layers/eyes/variant-2.js")),
+  3: p(() => import("./layers/eyes/variant-3.js")),
+  4: p(() => import("./layers/eyes/variant-4.js")),
+  5: p(() => import("./layers/eyes/variant-5.js")),
+  6: p(() => import("./layers/eyes/variant-6.js")),
+  7: p(() => import("./layers/eyes/variant-7.js")),
+  8: p(() => import("./layers/eyes/variant-8.js")),
+  9: p(() => import("./layers/eyes/variant-9.js")),
+  10: p(() => import("./layers/eyes/variant-10.js")),
+  11: p(() => import("./layers/eyes/variant-11.js")),
+  12: p(() => import("./layers/eyes/variant-12.js")),
+  13: p(() => import("./layers/eyes/variant-13.js")),
+  14: p(() => import("./layers/eyes/variant-14.js")),
+  15: p(() => import("./layers/eyes/variant-15.js")),
+  16: p(() => import("./layers/eyes/variant-16.js")),
+  17: p(() => import("./layers/eyes/variant-17.js")),
+  18: p(() => import("./layers/eyes/variant-18.js"))
+}, m = {
+  1: p(() => import("./layers/mouth/variant-1.js")),
+  2: p(() => import("./layers/mouth/variant-2.js")),
+  3: p(() => import("./layers/mouth/variant-3.js")),
+  4: p(() => import("./layers/mouth/variant-4.js")),
+  5: p(() => import("./layers/mouth/variant-5.js")),
+  6: p(() => import("./layers/mouth/variant-6.js")),
+  7: p(() => import("./layers/mouth/variant-7.js")),
+  8: p(() => import("./layers/mouth/variant-8.js")),
+  9: p(() => import("./layers/mouth/variant-9.js")),
+  10: p(() => import("./layers/mouth/variant-10.js")),
+  11: p(() => import("./layers/mouth/variant-11.js")),
+  12: p(() => import("./layers/mouth/variant-12.js")),
+  13: p(() => import("./layers/mouth/variant-13.js")),
+  14: p(() => import("./layers/mouth/variant-14.js")),
+  15: p(() => import("./layers/mouth/variant-15.js")),
+  16: p(() => import("./layers/mouth/variant-16.js")),
+  17: p(() => import("./layers/mouth/variant-17.js")),
+  18: p(() => import("./layers/mouth/variant-18.js"))
+};
+export {
+  t as BaseMapping,
+  r as EyeMapping,
+  i as HairMapping,
+  m as MouthMapping
+};
+//# sourceMappingURL=avatar-mapping.js.map

package/dist/features/ui/avatar/avatar-mapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-mapping.js","sources":["../../../../src/features/ui/avatar/avatar-mapping.ts"],"sourcesContent":["import type { ICustomSVGProps } from './avatar-types';\nimport type { FC } from 'react';\n\nimport { lazy } from 'react';\n\nexport const BaseMapping: Record<number, React.LazyExoticComponent<FC<ICustomSVGProps>>> = {\n  1: lazy(() => import('./layers/base/variant-1')),\n};\n\nexport const HairMapping: Record<number, React.LazyExoticComponent<FC<ICustomSVGProps>>> = {\n  1: lazy(() => import('./layers/hair/variant-1')),\n  2: lazy(() => import('./layers/hair/variant-2')),\n  3: lazy(() => import('./layers/hair/variant-3')),\n  4: lazy(() => import('./layers/hair/variant-4')),\n  5: lazy(() => import('./layers/hair/variant-5')),\n  6: lazy(() => import('./layers/hair/variant-6')),\n  7: lazy(() => import('./layers/hair/variant-7')),\n  8: lazy(() => import('./layers/hair/variant-8')),\n  9: lazy(() => import('./layers/hair/variant-9')),\n  10: lazy(() => import('./layers/hair/variant-10')),\n};\n\nexport const EyeMapping: Record<number, React.LazyExoticComponent<FC<ICustomSVGProps>>> = {\n  1: lazy(() => import('./layers/eyes/variant-1')),\n  2: lazy(() => import('./layers/eyes/variant-2')),\n  3: lazy(() => import('./layers/eyes/variant-3')),\n  4: lazy(() => import('./layers/eyes/variant-4')),\n  5: lazy(() => import('./layers/eyes/variant-5')),\n  6: lazy(() => import('./layers/eyes/variant-6')),\n  7: lazy(() => import('./layers/eyes/variant-7')),\n  8: lazy(() => import('./layers/eyes/variant-8')),\n  9: lazy(() => import('./layers/eyes/variant-9')),\n  10: lazy(() => import('./layers/eyes/variant-10')),\n  11: lazy(() => import('./layers/eyes/variant-11')),\n  12: lazy(() => import('./layers/eyes/variant-12')),\n  13: lazy(() => import('./layers/eyes/variant-13')),\n  14: lazy(() => import('./layers/eyes/variant-14')),\n  15: lazy(() => import('./layers/eyes/variant-15')),\n  16: lazy(() => import('./layers/eyes/variant-16')),\n  17: lazy(() => import('./layers/eyes/variant-17')),\n  18: lazy(() => import('./layers/eyes/variant-18')),\n};\n\nexport const MouthMapping: Record<number, React.LazyExoticComponent<FC<ICustomSVGProps>>> = {\n  1: lazy(() => import('./layers/mouth/variant-1')),\n  2: lazy(() => import('./layers/mouth/variant-2')),\n  3: lazy(() => import('./layers/mouth/variant-3')),\n  4: lazy(() => import('./layers/mouth/variant-4')),\n  5: lazy(() => import('./layers/mouth/variant-5')),\n  6: lazy(() => import('./layers/mouth/variant-6')),\n  7: lazy(() => import('./layers/mouth/variant-7')),\n  8: lazy(() => import('./layers/mouth/variant-8')),\n  9: lazy(() => import('./layers/mouth/variant-9')),\n  10: lazy(() => import('./layers/mouth/variant-10')),\n  11: lazy(() => import('./layers/mouth/variant-11')),\n  12: lazy(() => import('./layers/mouth/variant-12')),\n  13: lazy(() => import('./layers/mouth/variant-13')),\n  14: lazy(() => import('./layers/mouth/variant-14')),\n  15: lazy(() => import('./layers/mouth/variant-15')),\n  16: lazy(() => import('./layers/mouth/variant-16')),\n  17: lazy(() => import('./layers/mouth/variant-17')),\n  18: lazy(() => import('./layers/mouth/variant-18')),\n};\n"],"names":["BaseMapping","lazy","HairMapping","EyeMapping","MouthMapping"],"mappings":"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"}

package/dist/features/ui/avatar/avatar-styled.js

@@ -0,0 +1,18 @@
+import e from "styled-components";
+const r = e.div`
+  position: relative;
+  width: ${(t) => t.size}px;
+  height: ${(t) => t.size}px;
+`, o = e.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+export {
+  r as AvatarWrapper,
+  o as LayerWrapper
+};
+//# sourceMappingURL=avatar-styled.js.map

package/dist/features/ui/avatar/avatar-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-styled.js","sources":["../../../../src/features/ui/avatar/avatar-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const AvatarWrapper = styled.div<{ size: number }>`\n  position: relative;\n  width: ${props => props.size}px;\n  height: ${props => props.size}px;\n`;\n\nexport const LayerWrapper = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n"],"names":["AvatarWrapper","styled","props","LayerWrapper"],"mappings":";AAEO,MAAMA,IAAgBC,EAAO;AAAA;AAAA,WAEzB,CAAAC,MAASA,EAAM,IAAI;AAAA,YAClB,CAAAA,MAASA,EAAM,IAAI;AAAA,GAGlBC,IAAeF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/ui/avatar/avatar-types.js

@@ -0,0 +1,11 @@
+import { BaseMapping as a, HairMapping as p, EyeMapping as r, MouthMapping as e } from "./avatar-mapping.js";
+const M = {
+  "layer-1": a,
+  "layer-2": p,
+  "layer-3": r,
+  "layer-4": e
+};
+export {
+  M as AVATAR_LAYER_MAPPING
+};
+//# sourceMappingURL=avatar-types.js.map

package/dist/features/ui/avatar/avatar-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-types.js","sources":["../../../../src/features/ui/avatar/avatar-types.ts"],"sourcesContent":["import type { FC } from 'react';\n\nimport { BaseMapping, HairMapping, EyeMapping, MouthMapping } from './avatar-mapping';\n\nexport type TLayerKey = 'layer-1' | 'layer-2' | 'layer-3' | 'layer-4';\n\nexport interface IAvatarLayer {\n  key: TLayerKey;\n  variant: number;\n  color?: string;\n}\n\nexport interface IAvatarProps {\n  size?: number;\n  avatar?: IAvatarLayer[] | null;\n}\n\nexport interface ICustomSVGProps extends React.SVGProps<SVGSVGElement> {\n  color?: string;\n}\n\nexport const AVATAR_LAYER_MAPPING: Record<\n  TLayerKey,\n  Record<number, React.LazyExoticComponent<FC<ICustomSVGProps>>>\n> = {\n  'layer-1': BaseMapping,\n  'layer-2': HairMapping,\n  'layer-3': EyeMapping,\n  'layer-4': MouthMapping,\n};\n"],"names":["AVATAR_LAYER_MAPPING","BaseMapping","HairMapping","EyeMapping","MouthMapping"],"mappings":";AAqBO,MAAMA,IAGT;AAAA,EACF,WAAWC;AAAA,EACX,WAAWC;AAAA,EACX,WAAWC;AAAA,EACX,WAAWC;AACb;"}

package/dist/features/ui/avatar/avatar.js

@@ -0,0 +1,32 @@
+import { jsx as t } from "react/jsx-runtime";
+import { AvatarWrapper as y, LayerWrapper as s } from "./avatar-styled.js";
+import { AVATAR_LAYER_MAPPING as A } from "./avatar-types.js";
+const m = [
+  {
+    key: "layer-1",
+    variant: 1,
+    color: "#CCC"
+    // default color
+  },
+  {
+    key: "layer-3",
+    variant: 1
+  },
+  {
+    key: "layer-4",
+    variant: 1
+  }
+], u = ({ size: l = 24, avatar: r }) => {
+  const i = r && r.length > 0 ? r : m;
+  return /* @__PURE__ */ t(y, { size: l, children: i.map((p) => {
+    const { key: e, variant: n, color: c } = p, a = A[e];
+    if (!a || !a[n])
+      return null;
+    const o = a[n];
+    return o ? /* @__PURE__ */ t(s, { children: /* @__PURE__ */ t(o, { color: c }) }, e) : null;
+  }) });
+}, d = u;
+export {
+  d as default
+};
+//# sourceMappingURL=avatar.js.map

package/dist/features/ui/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../../../src/features/ui/avatar/avatar.tsx"],"sourcesContent":["import type { TLayerKey, IAvatarProps } from './avatar-types';\nimport type { FC } from 'react';\n\nimport * as Styled from './avatar-styled';\nimport { AVATAR_LAYER_MAPPING } from './avatar-types';\n\nconst defaultAvatar = [\n  {\n    key: 'layer-1',\n    variant: 1,\n    color: '#CCC', // default color\n  },\n  {\n    key: 'layer-3',\n    variant: 1,\n  },\n  {\n    key: 'layer-4',\n    variant: 1,\n  },\n];\n\nconst Avatar: FC<IAvatarProps> = ({ size = 24, avatar }) => {\n  const avatarLayers = avatar && avatar.length > 0 ? avatar : defaultAvatar;\n\n  return (\n    <Styled.AvatarWrapper size={size}>\n      {avatarLayers.map(layer => {\n        const { key, variant, color } = layer;\n        const LayerMapping = AVATAR_LAYER_MAPPING[key as TLayerKey];\n\n        if (!LayerMapping || !LayerMapping[variant]) {\n          return null;\n        }\n\n        const LayerComponent = LayerMapping[variant];\n\n        if (!LayerComponent) {\n          return null;\n        }\n\n        return (\n          <Styled.LayerWrapper key={key}>\n            <LayerComponent color={color} />\n          </Styled.LayerWrapper>\n        );\n      })}\n    </Styled.AvatarWrapper>\n  );\n};\n\nexport default Avatar;\n"],"names":["defaultAvatar","Avatar","size","avatar","avatarLayers","Styled.AvatarWrapper","layer","key","variant","color","LayerMapping","AVATAR_LAYER_MAPPING","LayerComponent","jsx","Styled.LayerWrapper","Avatar$1"],"mappings":";;;AAMA,MAAMA,IAAgB;AAAA,EACpB;AAAA,IACE,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA;AAAA,EACT;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,SAAS;AAAA,EACX;AACF,GAEMC,IAA2B,CAAC,EAAE,MAAAC,IAAO,IAAI,QAAAC,QAAa;AAC1D,QAAMC,IAAeD,KAAUA,EAAO,SAAS,IAAIA,IAASH;AAE5D,2BACGK,GAAA,EAAqB,MAAAH,GACnB,UAAAE,EAAa,IAAI,CAASE,MAAA;AACzB,UAAM,EAAE,KAAAC,GAAK,SAAAC,GAAS,OAAAC,EAAA,IAAUH,GAC1BI,IAAeC,EAAqBJ,CAAgB;AAE1D,QAAI,CAACG,KAAgB,CAACA,EAAaF,CAAO;AACjC,aAAA;AAGH,UAAAI,IAAiBF,EAAaF,CAAO;AAE3C,WAAKI,IAKH,gBAAAC,EAACC,GAAA,EACC,4BAACF,GAAe,EAAA,OAAAH,EAAc,CAAA,KADNF,CAE1B,IANO;AAAA,EAQV,CAAA,EACH,CAAA;AAEJ,GAEAQ,IAAed;"}

package/dist/features/ui/avatar/layers/base/variant-1.js

@@ -0,0 +1,20 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+const h = ({ color: t, ...l }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 100 100",
+    fill: "none",
+    ...l,
+    children: [
+      /* @__PURE__ */ i("g", { clipPath: "url(#clip0_647_30455)", children: /* @__PURE__ */ i("circle", { cx: "50", cy: "50", r: "49", fill: t, stroke: "#0D0D0D", strokeWidth: "2" }) }),
+      /* @__PURE__ */ i("defs", { children: /* @__PURE__ */ i("clipPath", { id: "clip0_647_30455", children: /* @__PURE__ */ i("rect", { width: "100", height: "100", fill: "white" }) }) })
+    ]
+  }
+);
+export {
+  h as default
+};
+//# sourceMappingURL=variant-1.js.map

package/dist/features/ui/avatar/layers/base/variant-1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant-1.js","sources":["../../../../../../src/features/ui/avatar/layers/base/variant-1.tsx"],"sourcesContent":["import type { ICustomSVGProps } from '../../avatar-types';\n\nimport React from 'react';\n\nconst Variant1: React.FC<ICustomSVGProps> = ({ color, ...props }) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n      viewBox=\"0 0 100 100\"\n      fill=\"none\"\n      {...props}\n    >\n      <g clipPath=\"url(#clip0_647_30455)\">\n        <circle cx=\"50\" cy=\"50\" r=\"49\" fill={color} stroke=\"#0D0D0D\" strokeWidth=\"2\" />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_647_30455\">\n          <rect width=\"100\" height=\"100\" fill=\"white\" />\n        </clipPath>\n      </defs>\n    </svg>\n  );\n};\n\nexport default Variant1;\n"],"names":["Variant1","color","props","jsxs","jsx"],"mappings":";AAIA,MAAMA,IAAsC,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAErD,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE,EAAC,OAAE,UAAS,yBACV,UAAC,gBAAAA,EAAA,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAMH,GAAO,QAAO,WAAU,aAAY,IAAI,CAAA,GAC/E;AAAA,MACC,gBAAAG,EAAA,QAAA,EACC,UAAC,gBAAAA,EAAA,YAAA,EAAS,IAAG,mBACX,UAAA,gBAAAA,EAAC,QAAK,EAAA,OAAM,OAAM,QAAO,OAAM,MAAK,QAAA,CAAQ,EAC9C,CAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAAA;"}