@cuemath/leap 3.2.18-mb → 3.2.19-beta-0.1

package/dist/features/ui/stickers/stickers-utils.js

@@ -0,0 +1,91 @@
+const f = (n, s) => {
+  const t = Math.ceil(s / 4), r = Math.floor(n / t), d = n % t, M = ["top", "right", "bottom", "left"][r] ?? "left", h = (d + 0.5) / t * 100, i = (Math.random() - 0.5) * 25, o = Math.min(Math.max(h + i, 0), 100), a = 45 + Math.random() * 10, e = 45 + Math.random() * 10;
+  let l = 0, m = 0;
+  switch (M) {
+    case "top":
+      l = o - a, m = -e + i;
+      break;
+    case "right":
+      l = 100 - a + i, m = o - e;
+      break;
+    case "bottom":
+      l = o - a, m = 100 - e + i;
+      break;
+    case "left":
+      l = -a + i, m = o - e;
+      break;
+  }
+  return {
+    fromX: `${l}vw`,
+    fromY: `${m}vh`,
+    x: a,
+    y: e
+  };
+}, g = (n, s = 10) => {
+  const t = [];
+  let r = 0;
+  const d = n;
+  for (; t.length < n && r < d; ) {
+    const c = Math.floor(Math.random() * (100 - 2 * s) + s);
+    t.every((M) => Math.abs(M - c) >= s) && t.push(c), r++;
+  }
+  for (; t.length < n; )
+    t.push(Math.floor(Math.random() * (100 - 2 * s) + s));
+  return t;
+};
+function x({
+  count: n,
+  effect: s,
+  stickers: t,
+  minSize: r,
+  maxSize: d
+}) {
+  const c = 100 / n * 2, M = () => Math.random() * (d - r) + r, h = [], i = ["float_up", "fall_down"].includes(s) ? g(n, c) : [];
+  for (let o = 0; o < n; o++) {
+    const a = t[o % t.length] ?? "", e = M();
+    if (s === "float_up")
+      h.push({
+        id: o,
+        sticker: a,
+        x: i[o],
+        y: 110 + (Math.random() - 0.5) * e,
+        size: e
+      });
+    else if (s === "fall_down")
+      h.push({
+        id: o,
+        sticker: a,
+        x: i[o],
+        y: -10 + (Math.random() - 0.5) * e,
+        size: e
+      });
+    else if (s === "burst_from_edges") {
+      const { x: l, y: m, fromX: p, fromY: u } = f(o, n);
+      h.push({ id: o, sticker: a, x: l, y: m, fromX: p, fromY: u, size: e });
+    } else s === "pop_expand" ? h.push({
+      id: o,
+      sticker: a,
+      x: 50,
+      y: 100,
+      fromX: `${(Math.random() - 0.5) * 27.5}vw`,
+      fromY: `${-50 - Math.random() * 27.5}vh`,
+      size: e
+    }) : h.push({
+      id: o,
+      sticker: a,
+      x: Math.random() * 100,
+      y: Math.random() * 100,
+      size: e
+    });
+  }
+  return h;
+}
+const v = (n, s = 0.2) => {
+  const t = n * s, r = n - t, d = n + t;
+  return Math.floor(Math.random() * (d - r + 1)) + r;
+};
+export {
+  x as generateStickerData,
+  v as randomizeDuration
+};
+//# sourceMappingURL=stickers-utils.js.map

package/dist/features/ui/stickers/stickers-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stickers-utils.js","sources":["../../../../src/features/ui/stickers/stickers-utils.ts"],"sourcesContent":["import type { StickerDatum, StickersProps } from './stickers-types';\n\nconst getBurstPosition = (\n  index: number,\n  total: number,\n): {\n  fromX: string;\n  fromY: string;\n  x: number;\n  y: number;\n} => {\n  const countPerSide = Math.ceil(total / 4);\n  const sideIndex = Math.floor(index / countPerSide);\n  const pos = index % countPerSide;\n\n  const sides = ['top', 'right', 'bottom', 'left'] as const;\n  const side = sides[sideIndex] ?? 'left';\n\n  const basePercent = ((pos + 0.5) / countPerSide) * 100;\n  const jitter = (Math.random() - 0.5) * 25;\n  const edgePercent = Math.min(Math.max(basePercent + jitter, 0), 100);\n\n  const centerX = 45 + Math.random() * 10;\n  const centerY = 45 + Math.random() * 10;\n\n  let fromX = 0;\n  let fromY = 0;\n\n  switch (side) {\n    case 'top':\n      fromX = edgePercent - centerX;\n      fromY = -centerY + jitter;\n      break;\n    case 'right':\n      fromX = 100 - centerX + jitter;\n      fromY = edgePercent - centerY;\n      break;\n    case 'bottom':\n      fromX = edgePercent - centerX;\n      fromY = 100 - centerY + jitter;\n      break;\n    case 'left':\n      fromX = -centerX + jitter;\n      fromY = edgePercent - centerY;\n      break;\n  }\n\n  return {\n    fromX: `${fromX}vw`,\n    fromY: `${fromY}vh`,\n    x: centerX,\n    y: centerY,\n  };\n};\n\nconst getRandomNonOverlappingPositions = (count: number, buffer = 10): number[] => {\n  const used: number[] = [];\n  let attempts = 0;\n  const maxAttempts = count;\n\n  while (used.length < count && attempts < maxAttempts) {\n    const value = Math.floor(Math.random() * (100 - 2 * buffer) + buffer);\n\n    if (used.every(v => Math.abs(v - value) >= buffer)) {\n      used.push(value);\n    }\n    attempts++;\n  }\n\n  while (used.length < count) {\n    used.push(Math.floor(Math.random() * (100 - 2 * buffer) + buffer));\n  }\n\n  return used;\n};\n\nexport function generateStickerData({\n  count,\n  effect,\n  stickers,\n  minSize,\n  maxSize,\n}: {\n  count: number;\n  effect: StickersProps['effect'];\n  stickers: string[];\n  minSize: number;\n  maxSize: number;\n}): StickerDatum[] {\n  const buffer = (100 / count) * 2;\n  const getSize = () => Math.random() * (maxSize - minSize) + minSize;\n  const result: StickerDatum[] = [];\n  const xPositions = ['float_up', 'fall_down'].includes(effect)\n    ? getRandomNonOverlappingPositions(count, buffer)\n    : [];\n\n  for (let i = 0; i < count; i++) {\n    const sticker = stickers[i % stickers.length] ?? '';\n    const size = getSize();\n\n    if (effect === 'float_up') {\n      result.push({\n        id: i,\n        sticker,\n        x: xPositions[i]!,\n        y: 110 + (Math.random() - 0.5) * size,\n        size,\n      });\n    } else if (effect === 'fall_down') {\n      result.push({\n        id: i,\n        sticker,\n        x: xPositions[i]!,\n        y: -10 + (Math.random() - 0.5) * size,\n        size,\n      });\n    } else if (effect === 'burst_from_edges') {\n      const { x, y, fromX, fromY } = getBurstPosition(i, count);\n\n      result.push({ id: i, sticker, x, y, fromX, fromY, size });\n    } else if (effect === 'pop_expand') {\n      result.push({\n        id: i,\n        sticker,\n        x: 50,\n        y: 100,\n        fromX: `${(Math.random() - 0.5) * 27.5}vw`,\n        fromY: `${-50 - Math.random() * 27.5}vh`,\n        size,\n      });\n    } else {\n      result.push({\n        id: i,\n        sticker,\n        x: Math.random() * 100,\n        y: Math.random() * 100,\n        size,\n      });\n    }\n  }\n\n  return result;\n}\n\nexport const randomizeDuration = (base: number, variancePercent = 0.2): number => {\n  const delta = base * variancePercent;\n  const min = base - delta;\n  const max = base + delta;\n\n  return Math.floor(Math.random() * (max - min + 1)) + min;\n};\n"],"names":["getBurstPosition","index","total","countPerSide","sideIndex","pos","side","basePercent","jitter","edgePercent","centerX","centerY","fromX","fromY","getRandomNonOverlappingPositions","count","buffer","used","attempts","maxAttempts","value","v","generateStickerData","effect","stickers","minSize","maxSize","getSize","result","xPositions","i","sticker","size","x","y","randomizeDuration","base","variancePercent","delta","min","max"],"mappings":"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"}

package/dist/features/ui/stickers/stickers.js

@@ -0,0 +1,40 @@
+import { jsx as a } from "react/jsx-runtime";
+import { memo as E, useState as I, useLayoutEffect as l } from "react";
+import { STICKER_MIN_SIZE as x, STICKER_MAX_SIZE as D } from "./constants.js";
+import { Container as T, Sticker as _ } from "./stickers-styled.js";
+import { generateStickerData as z } from "./stickers-utils.js";
+const C = ({ stickers: i, effect: t, count: m, duration: r }) => {
+  const [c, s] = I([]);
+  return l(() => {
+    const e = z({
+      count: m,
+      effect: t,
+      stickers: i,
+      minSize: x,
+      maxSize: D
+    });
+    s(e);
+    const o = setTimeout(() => s([]), r);
+    return () => clearTimeout(o);
+  }, [i, t, m, r]), /* @__PURE__ */ a(T, { children: c.map((e) => {
+    const { id: o, sticker: n, x: S, y: k, size: p, fromX: u, fromY: f } = e;
+    return /* @__PURE__ */ a(
+      _,
+      {
+        effect: t,
+        duration: r,
+        fromX: u,
+        fromY: f,
+        x: S,
+        y: k,
+        size: p,
+        children: n
+      },
+      o
+    );
+  }) });
+}, R = E(C);
+export {
+  R as default
+};
+//# sourceMappingURL=stickers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stickers.js","sources":["../../../../src/features/ui/stickers/stickers.tsx"],"sourcesContent":["import type { StickerDatum, StickersProps } from './stickers-types';\n\nimport React, { memo, useLayoutEffect, useState } from 'react';\n\nimport { STICKER_MAX_SIZE, STICKER_MIN_SIZE } from './constants';\nimport { Container, Sticker } from './stickers-styled';\nimport { generateStickerData } from './stickers-utils';\n\nconst Stickers: React.FC<StickersProps> = ({ stickers, effect, count, duration }) => {\n  const [stickersData, setStickersData] = useState<ReturnType<typeof generateStickerData>>([]);\n\n  useLayoutEffect(() => {\n    const stickerData = generateStickerData({\n      count,\n      effect,\n      stickers,\n      minSize: STICKER_MIN_SIZE,\n      maxSize: STICKER_MAX_SIZE,\n    });\n\n    setStickersData(stickerData);\n\n    const timeout = setTimeout(() => setStickersData([]), duration);\n\n    return () => clearTimeout(timeout);\n  }, [stickers, effect, count, duration]);\n\n  return (\n    <Container>\n      {stickersData.map((data: StickerDatum) => {\n        const { id, sticker, x, y, size, fromX, fromY } = data;\n\n        return (\n          <Sticker\n            key={id}\n            effect={effect}\n            duration={duration}\n            fromX={fromX}\n            fromY={fromY}\n            x={x}\n            y={y}\n            size={size}\n          >\n            {sticker}\n          </Sticker>\n        );\n      })}\n    </Container>\n  );\n};\n\nexport default memo(Stickers);\n"],"names":["Stickers","stickers","effect","count","duration","stickersData","setStickersData","useState","useLayoutEffect","stickerData","generateStickerData","STICKER_MIN_SIZE","STICKER_MAX_SIZE","timeout","jsx","Container","data","id","sticker","x","y","size","fromX","fromY","Sticker","memo"],"mappings":";;;;;AAQA,MAAMA,IAAoC,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,QAAe;AACnF,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAiD,CAAE,CAAA;AAE3F,SAAAC,EAAgB,MAAM;AACpB,UAAMC,IAAcC,EAAoB;AAAA,MACtC,OAAAP;AAAA,MACA,QAAAD;AAAA,MACA,UAAAD;AAAA,MACA,SAASU;AAAA,MACT,SAASC;AAAA,IAAA,CACV;AAED,IAAAN,EAAgBG,CAAW;AAE3B,UAAMI,IAAU,WAAW,MAAMP,EAAgB,CAAE,CAAA,GAAGF,CAAQ;AAEvD,WAAA,MAAM,aAAaS,CAAO;AAAA,KAChC,CAACZ,GAAUC,GAAQC,GAAOC,CAAQ,CAAC,GAGnC,gBAAAU,EAAAC,GAAA,EACE,UAAaV,EAAA,IAAI,CAACW,MAAuB;AAClC,UAAA,EAAE,IAAAC,GAAI,SAAAC,GAAS,GAAAC,GAAG,GAAAC,GAAG,MAAAC,GAAM,OAAAC,GAAO,OAAAC,EAAU,IAAAP;AAGhD,WAAA,gBAAAF;AAAA,MAACU;AAAA,MAAA;AAAA,QAEC,QAAAtB;AAAA,QACA,UAAAE;AAAA,QACA,OAAAkB;AAAA,QACA,OAAAC;AAAA,QACA,GAAAJ;AAAA,QACA,GAAAC;AAAA,QACA,MAAAC;AAAA,QAEC,UAAAH;AAAA,MAAA;AAAA,MATID;AAAA,IAAA;AAAA,EAYV,CAAA,EACH,CAAA;AAEJ,GAEehB,IAAAwB,EAAKzB,CAAQ;"}

package/dist/features/ui/streak-icon/streak-icon-styled.js

@@ -1,4 +1,4 @@
-import t, { keyframes as o } from "styled-components";
+import i, { keyframes as o } from "styled-components";
 const n = o`
 66%{
   opacity: 0;
@@ -6,29 +6,29 @@ const n = o`
 33%{
   opacity: 1;
 }
-`, a = t.div`
+`, a = i.div`
   height: 32px;
   width: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  cursor: pointer;
-`, s = t.div`
+  cursor: ${({ isInteractive: t }) => t ? "pointer" : "default"};
+`, s = i.div`
   height: 90%;
   width: 90%;
   position: absolute;
-  background: ${({ theme: i }) => i.colors.BLACK_1};
+  background: ${({ theme: t }) => t.colors.BLACK_1};
   border-radius: 24px;
-`, d = t.div`
+`, d = i.div`
   height: 90%;
   width: 90%;
   position: absolute;
-  background: ${({ theme: i }) => i.colors.RED};
+  background: ${({ theme: t }) => t.colors.RED};
   border-radius: 32px;
   animation: ${n}
-    ${({ $blinkDelay: i, $blinkDuration: e }) => `${e + i}ms linear infinite`};
-`, c = t.div`
+    ${({ $blinkDelay: t, $blinkDuration: e }) => `${e + t}ms linear infinite`};
+`, c = i.div`
   height: 100%;
   width: 100%;
   display: flex;
@@ -38,22 +38,22 @@ const n = o`
   align-self: center;
   padding-top: 6px;
   z-index: 1;
-`, p = t.div`
+`, l = i.div`
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
-`, l = t.img`
+`, p = i.img`
   width: 100%;
   height: 100%;
 `;
 export {
   d as StreakBg,
   c as StreakContent,
-  p as StreakImg,
+  l as StreakImg,
   s as StreakStaticBg,
   a as StreakWrapper,
-  l as StyledImg
+  p as StyledImg
 };
 //# sourceMappingURL=streak-icon-styled.js.map

package/dist/features/ui/streak-icon/streak-icon-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"streak-icon-styled.js","sources":["../../../../src/features/ui/streak-icon/streak-icon-styled.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nconst fadeInFadeOut = keyframes`\n66%{\n  opacity: 0;\n}\n33%{\n  opacity: 1;\n}\n`;\n\nexport const StreakWrapper = styled.div`\n  height: 32px;\n  width: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n`;\n\nexport const StreakStaticBg = styled.div`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  border-radius: 24px;\n`;\n\nexport const StreakBg = styled.div<{ $blinkDuration: number; $blinkDelay: number }>`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.RED};\n  border-radius: 32px;\n  animation: ${fadeInFadeOut}\n    ${({ $blinkDelay, $blinkDuration }) => `${$blinkDuration + $blinkDelay}ms linear infinite`};\n`;\n\nexport const StreakContent = styled.div`\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  padding-top: 6px;\n  z-index: 1;\n`;\n\nexport const StreakImg = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n`;\n\nexport const StyledImg = styled.img`\n  width: 100%;\n  height: 100%;\n`;\n"],"names":["fadeInFadeOut","keyframes","StreakWrapper","styled","StreakStaticBg","theme","StreakBg","$blinkDelay","$blinkDuration","StreakContent","StreakImg","StyledImg"],"mappings":";AAEA,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUvBC,IAAiBD,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAItCC,IAAWH,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIf,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,GAAG;AAAA;AAAA,eAEhCL,CAAa;AAAA,MACtB,CAAC,EAAE,aAAAO,GAAa,gBAAAC,QAAqB,GAAGA,IAAiBD,CAAW,oBAAoB;AAAA,GAGjFE,IAAgBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYvBO,IAAYP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQnBQ,IAAYR,EAAO;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"streak-icon-styled.js","sources":["../../../../src/features/ui/streak-icon/streak-icon-styled.tsx"],"sourcesContent":["import type { IStreakWrapperProps } from './streak-icon-types';\n\nimport styled, { keyframes } from 'styled-components';\n\nconst fadeInFadeOut = keyframes`\n66%{\n  opacity: 0;\n}\n33%{\n  opacity: 1;\n}\n`;\n\nexport const StreakWrapper = styled.div<IStreakWrapperProps>`\n  height: 32px;\n  width: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: ${({ isInteractive }) => (isInteractive ? 'pointer' : 'default')};\n`;\n\nexport const StreakStaticBg = styled.div`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.BLACK_1};\n  border-radius: 24px;\n`;\n\nexport const StreakBg = styled.div<{ $blinkDuration: number; $blinkDelay: number }>`\n  height: 90%;\n  width: 90%;\n  position: absolute;\n  background: ${({ theme }) => theme.colors.RED};\n  border-radius: 32px;\n  animation: ${fadeInFadeOut}\n    ${({ $blinkDelay, $blinkDuration }) => `${$blinkDuration + $blinkDelay}ms linear infinite`};\n`;\n\nexport const StreakContent = styled.div`\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  padding-top: 6px;\n  z-index: 1;\n`;\n\nexport const StreakImg = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n`;\n\nexport const StyledImg = styled.img`\n  width: 100%;\n  height: 100%;\n`;\n"],"names":["fadeInFadeOut","keyframes","StreakWrapper","styled","isInteractive","StreakStaticBg","theme","StreakBg","$blinkDelay","$blinkDuration","StreakContent","StreakImg","StyledImg"],"mappings":";AAIA,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOxB,CAAC,EAAE,eAAAC,EAAA,MAAqBA,IAAgB,YAAY,SAAU;AAAA,GAG7DC,IAAiBF,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAItCC,IAAWJ,EAAO;AAAA;AAAA;AAAA;AAAA,gBAIf,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,GAAG;AAAA;AAAA,eAEhCN,CAAa;AAAA,MACtB,CAAC,EAAE,aAAAQ,GAAa,gBAAAC,QAAqB,GAAGA,IAAiBD,CAAW,oBAAoB;AAAA,GAGjFE,IAAgBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYvBQ,IAAYR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQnBS,IAAYT,EAAO;AAAA;AAAA;AAAA;"}

package/dist/features/ui/streak-icon/streak-icon.js

@@ -1,20 +1,22 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { memo as n } from "react";
-import i from "../../../assets/illustrations/streak-green.svg.js";
-import S from "../../../assets/illustrations/streak-white.svg.js";
-import l from "../text/text.js";
-import { BLINK_DURATION as c, BLINK_DELAY as k } from "./constants.js";
-import { StreakWrapper as p, StreakStaticBg as s, StreakBg as f, StreakContent as d, StreakImg as I, StyledImg as o } from "./streak-icon-styled.js";
-const $ = n(({ value: a, blink: t = !1, ...m }) => /* @__PURE__ */ e(p, { ...m, children: [
-  /* @__PURE__ */ r(s, {}),
-  t && /* @__PURE__ */ r(f, { $blinkDuration: c, $blinkDelay: k }),
-  /* @__PURE__ */ e(d, { children: [
-    /* @__PURE__ */ r(I, { children: t ? /* @__PURE__ */ r(o, { src: S, alt: "Streak" }) : /* @__PURE__ */ r(o, { src: i, alt: "Streak" }) }),
-    /* @__PURE__ */ r(l, { $renderAs: "ab3-bold", $color: "WHITE", $align: "center", children: a })
+import { memo as i } from "react";
+import S from "../../../assets/illustrations/streak-green.svg.js";
+import l from "../../../assets/illustrations/streak-white.svg.js";
+import c from "../text/text.js";
+import { BLINK_DURATION as k, BLINK_DELAY as p } from "./constants.js";
+import { StreakWrapper as s, StreakStaticBg as f, StreakBg as d, StreakContent as I, StreakImg as $, StyledImg as o } from "./streak-icon-styled.js";
+const g = i(
+  ({ value: a, blink: t = !1, isInteractive: m = !0, ...n }) => /* @__PURE__ */ e(s, { isInteractive: m, ...n, children: [
+    /* @__PURE__ */ r(f, {}),
+    t && /* @__PURE__ */ r(d, { $blinkDuration: k, $blinkDelay: p }),
+    /* @__PURE__ */ e(I, { children: [
+      /* @__PURE__ */ r($, { children: t ? /* @__PURE__ */ r(o, { src: l, alt: "Streak" }) : /* @__PURE__ */ r(o, { src: S, alt: "Streak" }) }),
+      /* @__PURE__ */ r(c, { $renderAs: "ab3-bold", $color: "WHITE", $align: "center", children: a })
+    ] })
   ] })
-] })), A = $;
+), G = g;
 export {
-  $ as StreakIcon,
-  A as default
+  g as StreakIcon,
+  G as default
 };
 //# sourceMappingURL=streak-icon.js.map

package/dist/features/ui/streak-icon/streak-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"streak-icon.js","sources":["../../../../src/features/ui/streak-icon/streak-icon.tsx"],"sourcesContent":["import type { IStreakIconProps } from './streak-icon-types';\n\nimport React, { memo } from 'react';\n\nimport StreakGreenSVG from '../../../assets/illustrations/streak-green.svg';\nimport StreakWhiteSVG from '../../../assets/illustrations/streak-white.svg';\nimport Text from '../text/text';\nimport { BLINK_DELAY, BLINK_DURATION } from './constants';\nimport * as S from './streak-icon-styled';\n\nexport const StreakIcon: React.FC<IStreakIconProps> = memo(({ value, blink = false, ...rest }) => {\n  return (\n    <S.StreakWrapper {...rest}>\n      <S.StreakStaticBg />\n      {blink && <S.StreakBg $blinkDuration={BLINK_DURATION} $blinkDelay={BLINK_DELAY} />}\n      <S.StreakContent>\n        <S.StreakImg>\n          {blink ? (\n            <S.StyledImg src={StreakWhiteSVG} alt=\"Streak\" />\n          ) : (\n            <S.StyledImg src={StreakGreenSVG} alt=\"Streak\" />\n          )}\n        </S.StreakImg>\n        <Text $renderAs=\"ab3-bold\" $color=\"WHITE\" $align=\"center\">\n          {value}\n        </Text>\n      </S.StreakContent>\n    </S.StreakWrapper>\n  );\n});\n\nexport default StreakIcon;\n"],"names":["StreakIcon","memo","value","blink","rest","jsxs","S.StreakWrapper","jsx","S.StreakStaticBg","S.StreakBg","BLINK_DURATION","BLINK_DELAY","S.StreakContent","S.StreakImg","S.StyledImg","StreakWhiteSVG","StreakGreenSVG","Text","StreakIcon$1"],"mappings":";;;;;;;AAUa,MAAAA,IAAyCC,EAAK,CAAC,EAAE,OAAAC,GAAO,OAAAC,IAAQ,IAAO,GAAGC,QAElF,gBAAAC,EAAAC,GAAA,EAAiB,GAAGF,GACnB,UAAA;AAAA,EAAC,gBAAAG,EAAAC,GAAA,EAAiB;AAAA,EACjBL,uBAAUM,GAAA,EAAW,gBAAgBC,GAAgB,aAAaC,GAAa;AAAA,EAChF,gBAAAN,EAACO,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAL,EAAAM,GAAA,EACE,UAAAV,sBACEW,GAAA,EAAY,KAAKC,GAAgB,KAAI,UAAS,sBAE9CD,GAAA,EAAY,KAAKE,GAAgB,KAAI,SAAS,CAAA,GAEnD;AAAA,IACA,gBAAAT,EAACU,KAAK,WAAU,YAAW,QAAO,SAAQ,QAAO,UAC9C,UACHf,EAAA,CAAA;AAAA,EAAA,GACF;AACF,EAAA,CAAA,CAEH,GAEDgB,IAAelB;"}
+{"version":3,"file":"streak-icon.js","sources":["../../../../src/features/ui/streak-icon/streak-icon.tsx"],"sourcesContent":["import type { IStreakIconProps } from './streak-icon-types';\n\nimport React, { memo } from 'react';\n\nimport StreakGreenSVG from '../../../assets/illustrations/streak-green.svg';\nimport StreakWhiteSVG from '../../../assets/illustrations/streak-white.svg';\nimport Text from '../text/text';\nimport { BLINK_DELAY, BLINK_DURATION } from './constants';\nimport * as S from './streak-icon-styled';\n\nexport const StreakIcon: React.FC<IStreakIconProps> = memo(\n  ({ value, blink = false, isInteractive = true, ...rest }) => {\n    return (\n      <S.StreakWrapper isInteractive={isInteractive} {...rest}>\n        <S.StreakStaticBg />\n        {blink && <S.StreakBg $blinkDuration={BLINK_DURATION} $blinkDelay={BLINK_DELAY} />}\n        <S.StreakContent>\n          <S.StreakImg>\n            {blink ? (\n              <S.StyledImg src={StreakWhiteSVG} alt=\"Streak\" />\n            ) : (\n              <S.StyledImg src={StreakGreenSVG} alt=\"Streak\" />\n            )}\n          </S.StreakImg>\n          <Text $renderAs=\"ab3-bold\" $color=\"WHITE\" $align=\"center\">\n            {value}\n          </Text>\n        </S.StreakContent>\n      </S.StreakWrapper>\n    );\n  },\n);\n\nexport default StreakIcon;\n"],"names":["StreakIcon","memo","value","blink","isInteractive","rest","S.StreakWrapper","jsx","S.StreakStaticBg","S.StreakBg","BLINK_DURATION","BLINK_DELAY","jsxs","S.StreakContent","S.StreakImg","S.StyledImg","StreakWhiteSVG","StreakGreenSVG","Text","StreakIcon$1"],"mappings":";;;;;;;AAUO,MAAMA,IAAyCC;AAAA,EACpD,CAAC,EAAE,OAAAC,GAAO,OAAAC,IAAQ,IAAO,eAAAC,IAAgB,IAAM,GAAGC,0BAE7CC,GAAA,EAAgB,eAAAF,GAA+B,GAAGC,GACjD,UAAA;AAAA,IAAC,gBAAAE,EAAAC,GAAA,EAAiB;AAAA,IACjBL,uBAAUM,GAAA,EAAW,gBAAgBC,GAAgB,aAAaC,GAAa;AAAA,IAChF,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EACE,UAAAX,sBACEY,GAAA,EAAY,KAAKC,GAAgB,KAAI,UAAS,sBAE9CD,GAAA,EAAY,KAAKE,GAAgB,KAAI,SAAS,CAAA,GAEnD;AAAA,MACA,gBAAAV,EAACW,KAAK,WAAU,YAAW,QAAO,SAAQ,QAAO,UAC9C,UACHhB,EAAA,CAAA;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAGN,GAEAiB,IAAenB;"}

package/dist/features/ui/tab/tab.js

@@ -1,40 +1,44 @@
-import { jsx as e } from "react/jsx-runtime";
-import { memo as c } from "react";
-import { useTheme as f } from "styled-components";
-import u from "../text/text.js";
-import { TabWrapper as T } from "./tab-styled.js";
-const l = c(
+import { jsx as m } from "react/jsx-runtime";
+import { memo as h, useMemo as C } from "react";
+import { useTheme as E } from "styled-components";
+import y from "../text/text.js";
+import { EDeviceType as a } from "../theme/constants.js";
+import { TabWrapper as A } from "./tab-styled.js";
+const B = h(
   ({
-    $renderAs: o = "primary",
+    $renderAs: p = "primary",
     $size: r = "regular",
-    label: m,
-    $selected: t,
-    $width: n,
-    $disabled: a,
-    onClick: p,
-    shape: i = "square"
+    $sizeOnMobile: o,
+    $sizeOnTablet: t,
+    label: c,
+    $selected: n,
+    $width: i,
+    $disabled: f,
+    onClick: u,
+    shape: s = "square"
   }) => {
     const {
-      tab: { sizes: s }
-    } = f();
-    return /* @__PURE__ */ e(
-      T,
+      tab: { sizes: T },
+      device: e
+    } = E(), d = C(() => e <= a.MOBILE ? o || t || r : e <= a.TABLET && t || r, [e, r, o, t]), x = T[d].textVariant;
+    return /* @__PURE__ */ m(
+      A,
       {
-        $selected: t,
-        $width: n,
-        onClick: p,
+        $selected: n,
+        $width: i,
+        onClick: u,
         $size: r,
-        $renderAs: o,
-        $disabled: a,
+        $renderAs: p,
+        $disabled: f,
         $justifyContent: "center",
         $alignItems: "center",
-        $shape: i,
-        children: /* @__PURE__ */ e(u, { $renderAs: s[r].textVariant, color: t ? "WHITE" : "BLACK", children: m })
+        $shape: s,
+        children: /* @__PURE__ */ m(y, { $renderAs: x, color: n ? "WHITE" : "BLACK", children: c })
       }
     );
   }
-), $ = l;
+), V = B;
 export {
-  $ as default
+  V as default
 };
 //# sourceMappingURL=tab.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../src/features/ui/tab/tab.tsx"],"sourcesContent":["import type { ITabProps } from './tab-types';\n\nimport React, { memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport Text from '../text/text';\nimport * as Styled from './tab-styled';\n\nconst TabComponent: React.FC<ITabProps> = memo(\n  ({\n    $renderAs = 'primary',\n    $size = 'regular',\n    label,\n    $selected,\n    $width,\n    $disabled,\n    onClick,\n    shape = 'square',\n  }) => {\n    const {\n      tab: { sizes },\n    } = useTheme();\n\n    return (\n      <Styled.TabWrapper\n        $selected={$selected}\n        $width={$width}\n        onClick={onClick}\n        $size={$size}\n        $renderAs={$renderAs}\n        $disabled={$disabled}\n        $justifyContent=\"center\"\n        $alignItems=\"center\"\n        $shape={shape}\n      >\n        <Text $renderAs={sizes[$size].textVariant} color={$selected ? 'WHITE' : 'BLACK'}>\n          {label}\n        </Text>\n      </Styled.TabWrapper>\n    );\n  },\n);\n\nexport default TabComponent;\n"],"names":["TabComponent","memo","$renderAs","$size","label","$selected","$width","$disabled","onClick","shape","sizes","useTheme","jsx","Styled.TabWrapper","Text","TabComponent$1"],"mappings":";;;;;AAQA,MAAMA,IAAoCC;AAAA,EACxC,CAAC;AAAA,IACC,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,EAAA,MACJ;AACE,UAAA;AAAA,MACJ,KAAK,EAAE,OAAAC,EAAM;AAAA,QACXC,EAAS;AAGX,WAAA,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,WAAAR;AAAA,QACA,QAAAC;AAAA,QACA,SAAAE;AAAA,QACA,OAAAL;AAAA,QACA,WAAAD;AAAA,QACA,WAAAK;AAAA,QACA,iBAAgB;AAAA,QAChB,aAAY;AAAA,QACZ,QAAQE;AAAA,QAER,UAAA,gBAAAG,EAACE,GAAK,EAAA,WAAWJ,EAAMP,CAAK,EAAE,aAAa,OAAOE,IAAY,UAAU,SACrE,UACHD,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF,GAEAW,IAAef;"}
+{"version":3,"file":"tab.js","sources":["../../../../src/features/ui/tab/tab.tsx"],"sourcesContent":["import type { ITabProps } from './tab-types';\n\nimport React, { memo, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport Text from '../text/text';\nimport { EDeviceType } from '../theme/constants';\nimport * as Styled from './tab-styled';\n\nconst TabComponent: React.FC<ITabProps> = memo(\n  ({\n    $renderAs = 'primary',\n    $size = 'regular',\n    $sizeOnMobile,\n    $sizeOnTablet,\n    label,\n    $selected,\n    $width,\n    $disabled,\n    onClick,\n    shape = 'square',\n  }) => {\n    const {\n      tab: { sizes },\n      device,\n    } = useTheme();\n\n    const renderSize = useMemo(() => {\n      if (device <= EDeviceType.MOBILE) {\n        return $sizeOnMobile || $sizeOnTablet || $size;\n      }\n\n      if (device <= EDeviceType.TABLET) {\n        return $sizeOnTablet || $size;\n      }\n\n      return $size;\n    }, [device, $size, $sizeOnMobile, $sizeOnTablet]);\n\n    const textVariant = sizes[renderSize].textVariant;\n\n    return (\n      <Styled.TabWrapper\n        $selected={$selected}\n        $width={$width}\n        onClick={onClick}\n        $size={$size}\n        $renderAs={$renderAs}\n        $disabled={$disabled}\n        $justifyContent=\"center\"\n        $alignItems=\"center\"\n        $shape={shape}\n      >\n        <Text $renderAs={textVariant} color={$selected ? 'WHITE' : 'BLACK'}>\n          {label}\n        </Text>\n      </Styled.TabWrapper>\n    );\n  },\n);\n\nexport default TabComponent;\n"],"names":["TabComponent","memo","$renderAs","$size","$sizeOnMobile","$sizeOnTablet","label","$selected","$width","$disabled","onClick","shape","sizes","device","useTheme","renderSize","useMemo","EDeviceType","textVariant","jsx","Styled.TabWrapper","Text","TabComponent$1"],"mappings":";;;;;;AASA,MAAMA,IAAoCC;AAAA,EACxC,CAAC;AAAA,IACC,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,EAAA,MACJ;AACE,UAAA;AAAA,MACJ,KAAK,EAAE,OAAAC,EAAM;AAAA,MACb,QAAAC;AAAA,QACEC,EAAS,GAEPC,IAAaC,EAAQ,MACrBH,KAAUI,EAAY,SACjBb,KAAiBC,KAAiBF,IAGvCU,KAAUI,EAAY,UACjBZ,KAAiBF,GAIzB,CAACU,GAAQV,GAAOC,GAAeC,CAAa,CAAC,GAE1Ca,IAAcN,EAAMG,CAAU,EAAE;AAGpC,WAAA,gBAAAI;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,WAAAb;AAAA,QACA,QAAAC;AAAA,QACA,SAAAE;AAAA,QACA,OAAAP;AAAA,QACA,WAAAD;AAAA,QACA,WAAAO;AAAA,QACA,iBAAgB;AAAA,QAChB,aAAY;AAAA,QACZ,QAAQE;AAAA,QAER,UAAA,gBAAAQ,EAACE,KAAK,WAAWH,GAAa,OAAOX,IAAY,UAAU,SACxD,UACHD,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF,GAEAgB,IAAetB;"}

package/dist/features/ui/text/text.js

@@ -1,50 +1,54 @@
-import k from "styled-components";
-const x = k.div(
+import { useMemo as C } from "react";
+import F from "styled-components";
+import { EDeviceType as y } from "../theme/constants.js";
+const $ = F.div(
   ({
-    theme: f,
-    $renderAs: c,
+    theme: g,
+    $renderAs: t,
     $color: n,
-    $align: y = "left",
-    $width: t,
-    $widthX: o,
-    $marginBottom: e,
-    $marginBottomX: i,
+    $align: T = "left",
+    $width: e,
+    $widthX: f,
+    $marginBottom: o,
+    $marginBottomX: r,
     $alignSelf: l,
-    $opacity: u = 1,
-    $inline: m,
-    $textDecoration: p,
-    $whiteSpace: $
+    $opacity: b = 1,
+    $inline: v,
+    $textDecoration: x,
+    $whiteSpace: a,
+    $renderOnMobileAs: c,
+    $renderOnTabletAs: i
   }) => {
-    const { text: b, colors: r, layout: a } = f, {
-      fontFamily: g,
-      fontSize: d,
-      lineHeight: T,
+    const { text: E, colors: m, layout: u, device: p } = g, L = C(() => p <= y.MOBILE ? c || i || t : p <= y.TABLET && i || t, [p, t, c, i]), {
+      fontFamily: h,
+      fontSize: k,
+      lineHeight: z,
       letterSpacing: s,
-      textTransform: h = "none"
-    } = b[c];
+      textTransform: d = "none"
+    } = E[L];
     return `
-      display: ${m ? "inline-block" : "block"};
-      font-family: ${g};
-      font-size: ${d}px;
-      text-align: ${y};
-      line-height: ${T}px;
-      text-transform: ${h};
+      display: ${v ? "inline-block" : "block"};
+      font-family: ${h};
+      font-size: ${k}px;
+      text-align: ${T};
+      line-height: ${z}px;
+      text-transform: ${d};
       ${typeof s == "number" ? `letter-spacing: ${s}px;` : ""}
-      color: ${n ? r[n] : r.BLACK};
-      opacity: ${u};
-      width: ${t ? `${t}` : "auto"}${typeof t == "number" ? "px" : ""};
-      ${o ? `width: ${o * a.gutter}px;` : ""}
-      margin-bottom: ${e ? `${e}` : "initial"}${typeof e == "number" ? "px" : ""};
-      ${i ? `margin-bottom: ${i * a.gutter}px;` : ""}
+      color: ${n ? m[n] : m.BLACK};
+      opacity: ${b};
+      width: ${e ? `${e}` : "auto"}${typeof e == "number" ? "px" : ""};
+      ${f ? `width: ${f * u.gutter}px;` : ""}
+      margin-bottom: ${o ? `${o}` : "initial"}${typeof o == "number" ? "px" : ""};
+      ${r ? `margin-bottom: ${r * u.gutter}px;` : ""}
       ${l ? `align-self: ${l};` : ""}
-      ${p ? `text-decoration: ${p};` : ""}
-      ${$ ? `white-space: ${$};` : ""}
+      ${x ? `text-decoration: ${x};` : ""}
+      ${a ? `white-space: ${a};` : ""}
     `;
   }
 );
-x.displayName = "Text";
-const v = x;
+$.displayName = "Text";
+const M = $;
 export {
-  v as default
+  M as default
 };
 //# sourceMappingURL=text.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../../src/features/ui/text/text.tsx"],"sourcesContent":["import type { TColorNames, TTextVariants } from '../types';\n\nimport styled from 'styled-components';\n\nexport interface TextProps {\n  $renderAs: TTextVariants;\n  $color?: TColorNames;\n  $align?: 'auto' | 'left' | 'right' | 'center' | 'justify';\n  $alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\n  $opacity?: number | undefined;\n  $width?: number | string;\n  $widthX?: number;\n  $marginBottom?: number;\n  $marginBottomX?: number;\n  $inline?: boolean;\n  $textDecoration?: string;\n  $whiteSpace?: 'pre-line' | 'normal' | 'pre-wrap' | 'no-wrap' | 'pre' | 'break-spaces';\n}\n\n/**\n * @param $renderAs - The text variant to render as (ah1-ah4, ab1-ab3, ac1-ac4, ub1-ub3), anything else is deprecated\n */\nconst Text = styled.div<TextProps>(\n  ({\n    theme,\n    $renderAs,\n    $color,\n    $align = 'left',\n    $width,\n    $widthX,\n    $marginBottom,\n    $marginBottomX,\n    $alignSelf,\n    $opacity = 1,\n    $inline,\n    $textDecoration,\n    $whiteSpace,\n  }) => {\n    const { text, colors, layout } = theme;\n    const {\n      fontFamily,\n      fontSize,\n      lineHeight,\n      letterSpacing,\n      textTransform = 'none',\n    } = text[$renderAs];\n\n    return `\n      display: ${$inline ? 'inline-block' : 'block'};\n      font-family: ${fontFamily};\n      font-size: ${fontSize}px;\n      text-align: ${$align};\n      line-height: ${lineHeight}px;\n      text-transform: ${textTransform};\n      ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n      color: ${$color ? colors[$color] : colors.BLACK};\n      opacity: ${$opacity};\n      width: ${$width ? `${$width}` : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      ${$widthX ? `width: ${$widthX * layout.gutter}px;` : ''}\n      margin-bottom: ${$marginBottom ? `${$marginBottom}` : 'initial'}${\n        typeof $marginBottom === 'number' ? 'px' : ''\n      };\n      ${$marginBottomX ? `margin-bottom: ${$marginBottomX * layout.gutter}px;` : ''}\n      ${$alignSelf ? `align-self: ${$alignSelf};` : ''}\n      ${$textDecoration ? `text-decoration: ${$textDecoration};` : ''}\n      ${$whiteSpace ? `white-space: ${$whiteSpace};` : ''}\n    `;\n  },\n);\n\nText.displayName = 'Text';\n\nexport default Text;\n"],"names":["Text","styled","theme","$renderAs","$color","$align","$width","$widthX","$marginBottom","$marginBottomX","$alignSelf","$opacity","$inline","$textDecoration","$whiteSpace","text","colors","layout","fontFamily","fontSize","lineHeight","letterSpacing","textTransform","Text$1"],"mappings":";AAsBA,MAAMA,IAAOC,EAAO;AAAA,EAClB,CAAC;AAAA,IACC,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,EAAA,MACI;AACJ,UAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,QAAAC,EAAA,IAAWf,GAC3B;AAAA,MACJ,YAAAgB;AAAA,MACA,UAAAC;AAAA,MACA,YAAAC;AAAA,MACA,eAAAC;AAAA,MACA,eAAAC,IAAgB;AAAA,IAAA,IACdP,EAAKZ,CAAS;AAEX,WAAA;AAAA,iBACMS,IAAU,iBAAiB,OAAO;AAAA,qBAC9BM,CAAU;AAAA,mBACZC,CAAQ;AAAA,oBACPd,CAAM;AAAA,qBACLe,CAAU;AAAA,wBACPE,CAAa;AAAA,QAC7B,OAAOD,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA,eACvEjB,IAASY,EAAOZ,CAAM,IAAIY,EAAO,KAAK;AAAA,iBACpCL,CAAQ;AAAA,eACVL,IAAS,GAAGA,CAAM,KAAK,MAAM,GAAG,OAAOA,KAAW,WAAW,OAAO,EAAE;AAAA,QAC7EC,IAAU,UAAUA,IAAUU,EAAO,MAAM,QAAQ,EAAE;AAAA,uBACtCT,IAAgB,GAAGA,CAAa,KAAK,SAAS,GAC7D,OAAOA,KAAkB,WAAW,OAAO,EAC7C;AAAA,QACEC,IAAiB,kBAAkBA,IAAiBQ,EAAO,MAAM,QAAQ,EAAE;AAAA,QAC3EP,IAAa,eAAeA,CAAU,MAAM,EAAE;AAAA,QAC9CG,IAAkB,oBAAoBA,CAAe,MAAM,EAAE;AAAA,QAC7DC,IAAc,gBAAgBA,CAAW,MAAM,EAAE;AAAA;AAAA,EAEvD;AACF;AAEAd,EAAK,cAAc;AAEnB,MAAAuB,IAAevB;"}
+{"version":3,"file":"text.js","sources":["../../../../src/features/ui/text/text.tsx"],"sourcesContent":["import type { TColorNames, TTextVariants } from '../types';\n\nimport { useMemo } from 'react';\nimport styled from 'styled-components';\n\nimport { EDeviceType } from '../theme/constants';\n\nexport interface TextProps {\n  $renderAs: TTextVariants;\n  $color?: TColorNames;\n  $align?: 'auto' | 'left' | 'right' | 'center' | 'justify';\n  $alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\n  $opacity?: number | undefined;\n  $width?: number | string;\n  $widthX?: number;\n  $marginBottom?: number;\n  $marginBottomX?: number;\n  $inline?: boolean;\n  $textDecoration?: string;\n  $whiteSpace?: 'pre-line' | 'normal' | 'pre-wrap' | 'no-wrap' | 'pre' | 'break-spaces';\n  $renderOnMobileAs?: TTextVariants;\n  $renderOnTabletAs?: TTextVariants;\n}\n\n/**\n * @param $renderAs (fallback for any device), @param $renderOnMobileAs, @param $renderOnTabletAs - The text variant to render as (ah1-ah4, ab1-ab3, ac1-ac4, ub1-ub3), anything else is deprecated\n */\nconst Text = styled.div<TextProps>(\n  ({\n    theme,\n    $renderAs,\n    $color,\n    $align = 'left',\n    $width,\n    $widthX,\n    $marginBottom,\n    $marginBottomX,\n    $alignSelf,\n    $opacity = 1,\n    $inline,\n    $textDecoration,\n    $whiteSpace,\n    $renderOnMobileAs,\n    $renderOnTabletAs,\n  }) => {\n    const { text, colors, layout, device } = theme;\n    const renderAs = useMemo(() => {\n      if (device <= EDeviceType.MOBILE) {\n        return $renderOnMobileAs || $renderOnTabletAs || $renderAs;\n      }\n\n      if (device <= EDeviceType.TABLET) {\n        return $renderOnTabletAs || $renderAs;\n      }\n\n      return $renderAs;\n    }, [device, $renderAs, $renderOnMobileAs, $renderOnTabletAs]);\n\n    const {\n      fontFamily,\n      fontSize,\n      lineHeight,\n      letterSpacing,\n      textTransform = 'none',\n    } = text[renderAs];\n\n    return `\n      display: ${$inline ? 'inline-block' : 'block'};\n      font-family: ${fontFamily};\n      font-size: ${fontSize}px;\n      text-align: ${$align};\n      line-height: ${lineHeight}px;\n      text-transform: ${textTransform};\n      ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n      color: ${$color ? colors[$color] : colors.BLACK};\n      opacity: ${$opacity};\n      width: ${$width ? `${$width}` : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      ${$widthX ? `width: ${$widthX * layout.gutter}px;` : ''}\n      margin-bottom: ${$marginBottom ? `${$marginBottom}` : 'initial'}${\n        typeof $marginBottom === 'number' ? 'px' : ''\n      };\n      ${$marginBottomX ? `margin-bottom: ${$marginBottomX * layout.gutter}px;` : ''}\n      ${$alignSelf ? `align-self: ${$alignSelf};` : ''}\n      ${$textDecoration ? `text-decoration: ${$textDecoration};` : ''}\n      ${$whiteSpace ? `white-space: ${$whiteSpace};` : ''}\n    `;\n  },\n);\n\nText.displayName = 'Text';\n\nexport default Text;\n"],"names":["Text","styled","theme","$renderAs","$color","$align","$width","$widthX","$marginBottom","$marginBottomX","$alignSelf","$opacity","$inline","$textDecoration","$whiteSpace","$renderOnMobileAs","$renderOnTabletAs","text","colors","layout","device","renderAs","useMemo","EDeviceType","fontFamily","fontSize","lineHeight","letterSpacing","textTransform","Text$1"],"mappings":";;;AA2BA,MAAMA,IAAOC,EAAO;AAAA,EAClB,CAAC;AAAA,IACC,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,mBAAAC;AAAA,EAAA,MACI;AACJ,UAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,QAAAC,GAAQ,QAAAC,MAAWlB,GACnCmB,IAAWC,EAAQ,MACnBF,KAAUG,EAAY,SACjBR,KAAqBC,KAAqBb,IAG/CiB,KAAUG,EAAY,UACjBP,KAAqBb,GAI7B,CAACiB,GAAQjB,GAAWY,GAAmBC,CAAiB,CAAC,GAEtD;AAAA,MACJ,YAAAQ;AAAA,MACA,UAAAC;AAAA,MACA,YAAAC;AAAA,MACA,eAAAC;AAAA,MACA,eAAAC,IAAgB;AAAA,IAAA,IACdX,EAAKI,CAAQ;AAEV,WAAA;AAAA,iBACMT,IAAU,iBAAiB,OAAO;AAAA,qBAC9BY,CAAU;AAAA,mBACZC,CAAQ;AAAA,oBACPpB,CAAM;AAAA,qBACLqB,CAAU;AAAA,wBACPE,CAAa;AAAA,QAC7B,OAAOD,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA,eACvEvB,IAASc,EAAOd,CAAM,IAAIc,EAAO,KAAK;AAAA,iBACpCP,CAAQ;AAAA,eACVL,IAAS,GAAGA,CAAM,KAAK,MAAM,GAAG,OAAOA,KAAW,WAAW,OAAO,EAAE;AAAA,QAC7EC,IAAU,UAAUA,IAAUY,EAAO,MAAM,QAAQ,EAAE;AAAA,uBACtCX,IAAgB,GAAGA,CAAa,KAAK,SAAS,GAC7D,OAAOA,KAAkB,WAAW,OAAO,EAC7C;AAAA,QACEC,IAAiB,kBAAkBA,IAAiBU,EAAO,MAAM,QAAQ,EAAE;AAAA,QAC3ET,IAAa,eAAeA,CAAU,MAAM,EAAE;AAAA,QAC9CG,IAAkB,oBAAoBA,CAAe,MAAM,EAAE;AAAA,QAC7DC,IAAc,gBAAgBA,CAAW,MAAM,EAAE;AAAA;AAAA,EAEvD;AACF;AAEAd,EAAK,cAAc;AAEnB,MAAA6B,IAAe7B;"}