@cuemath/leap 3.0.7-hg1 → 3.0.7-hg3

package/dist/features/ui/radio-cards/radio-card-option/radio-card-option.js

@@ -0,0 +1,57 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { useCallback as w } from "react";
+import { useTheme as I } from "styled-components";
+import g from "../../hooks/use-response-handler.js";
+import O from "../../layout/flex-view.js";
+import a from "../../text/text.js";
+import { DummyBorder as y, RadioCardOptionWrapper as R, RadioImageContainer as b, ImageWrapper as A, InputOptionCircle as p, InputOptionInnerCircle as T } from "./radio-card-option-styled.js";
+const F = ({
+  id: n,
+  title: c,
+  description: l,
+  checked: r,
+  Icon: d,
+  onChange: t,
+  width: f,
+  widthX: u,
+  analyticsLabel: $,
+  analyticsProps: h,
+  horizontalCard: i
+}) => {
+  const x = I(), { gutter: m } = x.layout, s = g({ analyticsLabel: $, analyticsProps: h }), C = w(() => {
+    if (typeof t != "function")
+      throw new Error("onChange must be a function");
+    r || (t(n), s(n));
+  }, [r, s, n, t]);
+  return /* @__PURE__ */ e(y, { $selected: r, children: /* @__PURE__ */ o(
+    R,
+    {
+      $width: f,
+      $widthX: u,
+      $selected: r,
+      onClick: C,
+      children: [
+        /* @__PURE__ */ o(
+          b,
+          {
+            $flexDirection: i ? "row" : "column",
+            $alignItems: "flex-start",
+            $flexGap: i ? 0 : 16,
+            children: [
+              /* @__PURE__ */ e(A, { children: d }),
+              /* @__PURE__ */ o(O, { $gutter: i ? 16 : 0, $flexGapX: 0.25, children: [
+                /* @__PURE__ */ e(a, { $renderAs: "h6", children: c }),
+                l && /* @__PURE__ */ e(a, { $renderAs: "body2", $color: "BLACK_75", children: l })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(p, { $size: m, $innerCircle: !1, children: r && /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(p, { $size: m * 0.5, $innerCircle: !0 }) }) })
+      ]
+    }
+  ) });
+};
+export {
+  F as default
+};
+//# sourceMappingURL=radio-card-option.js.map

package/dist/features/ui/radio-cards/radio-card-option/radio-card-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-card-option.js","sources":["../../../../../src/features/ui/radio-cards/radio-card-option/radio-card-option.tsx"],"sourcesContent":["import type { IRadioCardOptionProps } from './radio-card-option-types';\n\nimport { useCallback } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport useResponseHandler from '../../hooks/use-response-handler';\nimport FlexView from '../../layout/flex-view';\nimport Text from '../../text/text';\nimport * as Styled from './radio-card-option-styled';\n\nconst RadioCardOption = <IDTypes extends string | number>({\n  id,\n  title,\n  description,\n  checked,\n  Icon,\n  onChange,\n  width,\n  widthX,\n  analyticsLabel,\n  analyticsProps,\n  horizontalCard,\n}: IRadioCardOptionProps<IDTypes>) => {\n  const theme = useTheme();\n  const { gutter } = theme.layout;\n\n  const handleTracking = useResponseHandler({ analyticsLabel, analyticsProps });\n\n  const handleOnCardClick = useCallback(() => {\n    if (typeof onChange !== 'function') {\n      throw new Error('onChange must be a function');\n    }\n\n    if (!checked) {\n      onChange(id);\n      handleTracking(id);\n    }\n  }, [checked, handleTracking, id, onChange]);\n\n  return (\n    <Styled.DummyBorder $selected={checked}>\n      <Styled.RadioCardOptionWrapper\n        $width={width}\n        $widthX={widthX}\n        $selected={checked}\n        onClick={handleOnCardClick}\n      >\n        <Styled.RadioImageContainer\n          $flexDirection={horizontalCard ? 'row' : 'column'}\n          $alignItems=\"flex-start\"\n          $flexGap={horizontalCard ? 0 : 16}\n        >\n          <Styled.ImageWrapper>{Icon}</Styled.ImageWrapper>\n\n          <FlexView $gutter={horizontalCard ? 16 : 0} $flexGapX={0.25}>\n            <Text $renderAs=\"h6\">{title}</Text>\n            {description && (\n              <Text $renderAs=\"body2\" $color=\"BLACK_75\">\n                {description}\n              </Text>\n            )}\n          </FlexView>\n        </Styled.RadioImageContainer>\n        <Styled.InputOptionCircle $size={gutter} $innerCircle={false}>\n          {checked && (\n            <Styled.InputOptionInnerCircle>\n              <Styled.InputOptionCircle $size={gutter * 0.5} $innerCircle={true} />\n            </Styled.InputOptionInnerCircle>\n          )}\n        </Styled.InputOptionCircle>\n      </Styled.RadioCardOptionWrapper>\n    </Styled.DummyBorder>\n  );\n};\n\nexport default RadioCardOption;\n"],"names":["RadioCardOption","id","title","description","checked","Icon","onChange","width","widthX","analyticsLabel","analyticsProps","horizontalCard","theme","useTheme","gutter","handleTracking","useResponseHandler","handleOnCardClick","useCallback","jsx","Styled.DummyBorder","jsxs","Styled.RadioCardOptionWrapper","Styled.RadioImageContainer","Styled.ImageWrapper","FlexView","Text","Styled.InputOptionCircle","Styled.InputOptionInnerCircle"],"mappings":";;;;;;;AAUA,MAAMA,IAAkB,CAAkC;AAAA,EACxD,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AACF,MAAsC;AACpC,QAAMC,IAAQC,KACR,EAAE,QAAAC,EAAO,IAAIF,EAAM,QAEnBG,IAAiBC,EAAmB,EAAE,gBAAAP,GAAgB,gBAAAC,EAAgB,CAAA,GAEtEO,IAAoBC,EAAY,MAAM;AACtC,QAAA,OAAOZ,KAAa;AAChB,YAAA,IAAI,MAAM,6BAA6B;AAG/C,IAAKF,MACHE,EAASL,CAAE,GACXc,EAAed,CAAE;AAAA,KAElB,CAACG,GAASW,GAAgBd,GAAIK,CAAQ,CAAC;AAE1C,SACG,gBAAAa,EAAAC,GAAA,EAAmB,WAAWhB,GAC7B,UAAA,gBAAAiB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,QAAQf;AAAA,MACR,SAASC;AAAA,MACT,WAAWJ;AAAA,MACX,SAASa;AAAA,MAET,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,gBAAgBZ,IAAiB,QAAQ;AAAA,YACzC,aAAY;AAAA,YACZ,UAAUA,IAAiB,IAAI;AAAA,YAE/B,UAAA;AAAA,cAAC,gBAAAQ,EAAAK,GAAA,EAAqB,UAAKnB,EAAA,CAAA;AAAA,gCAE1BoB,GAAS,EAAA,SAASd,IAAiB,KAAK,GAAG,WAAW,MACrD,UAAA;AAAA,gBAAC,gBAAAQ,EAAAO,GAAA,EAAK,WAAU,MAAM,UAAMxB,GAAA;AAAA,gBAC3BC,KACE,gBAAAgB,EAAAO,GAAA,EAAK,WAAU,SAAQ,QAAO,YAC5B,UACHvB,GAAA;AAAA,cAAA,GAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QACA,gBAAAgB,EAACQ,GAAA,EAAyB,OAAOb,GAAQ,cAAc,IACpD,UAAAV,KACE,gBAAAe,EAAAS,GAAA,EACC,UAAA,gBAAAT,EAACQ,GAAA,EAAyB,OAAOb,IAAS,KAAK,cAAc,GAAM,CAAA,EACrE,CAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/features/ui/radio-cards/radio-cards.js

@@ -0,0 +1,36 @@
+import { jsx as o } from "react/jsx-runtime";
+import x from "../layout/flex-view.js";
+import u from "./radio-card-option/radio-card-option.js";
+const $ = ({
+  options: e,
+  value: t,
+  width: i,
+  widthX: a,
+  onChange: d,
+  analyticsLabel: n,
+  analyticsProps: c,
+  horizontalCard: p
+}) => /* @__PURE__ */ o(x, { $flexWrap: !0, $flexDirection: "row", $flexGapX: 1, children: e.map((s) => {
+  const { title: f, Icon: l, description: m, id: r } = s;
+  return /* @__PURE__ */ o(
+    u,
+    {
+      title: f,
+      description: m,
+      checked: t === r,
+      Icon: l,
+      id: r,
+      onChange: d,
+      width: i,
+      widthX: a,
+      analyticsLabel: n,
+      analyticsProps: c,
+      horizontalCard: p
+    },
+    r
+  );
+}) }), w = $;
+export {
+  w as default
+};
+//# sourceMappingURL=radio-cards.js.map

package/dist/features/ui/radio-cards/radio-cards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-cards.js","sources":["../../../../src/features/ui/radio-cards/radio-cards.tsx"],"sourcesContent":["import type { IRadioCardListProps } from './radio-cards-types';\n\nimport FlexView from '../layout/flex-view';\nimport RadioCardOption from './radio-card-option/radio-card-option';\n\nconst RadioCards = <IDType extends string | number>({\n  options,\n  value,\n  width,\n  widthX,\n  onChange,\n  analyticsLabel,\n  analyticsProps,\n  horizontalCard,\n}: IRadioCardListProps<IDType>) => {\n  return (\n    <FlexView $flexWrap $flexDirection=\"row\" $flexGapX={1}>\n      {options.map(option => {\n        const { title, Icon, description, id } = option;\n\n        return (\n          <RadioCardOption<IDType>\n            key={id}\n            title={title}\n            description={description}\n            checked={value === id}\n            Icon={Icon}\n            id={id}\n            onChange={onChange}\n            width={width}\n            widthX={widthX}\n            analyticsLabel={analyticsLabel}\n            analyticsProps={analyticsProps}\n            horizontalCard={horizontalCard}\n          />\n        );\n      })}\n    </FlexView>\n  );\n};\n\nexport default RadioCards;\n"],"names":["RadioCards","options","value","width","widthX","onChange","analyticsLabel","analyticsProps","horizontalCard","jsx","FlexView","option","title","Icon","description","id","RadioCardOption","RadioCards$1"],"mappings":";;;AAKA,MAAMA,IAAa,CAAiC;AAAA,EAClD,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AACF,MAEI,gBAAAC,EAACC,GAAS,EAAA,WAAS,IAAC,gBAAe,OAAM,WAAW,GACjD,UAAQT,EAAA,IAAI,CAAUU,MAAA;AACrB,QAAM,EAAE,OAAAC,GAAO,MAAAC,GAAM,aAAAC,GAAa,IAAAC,MAAOJ;AAGvC,SAAA,gBAAAF;AAAA,IAACO;AAAA,IAAA;AAAA,MAEC,OAAAJ;AAAA,MACA,aAAAE;AAAA,MACA,SAASZ,MAAUa;AAAA,MACnB,MAAAF;AAAA,MACA,IAAAE;AAAA,MACA,UAAAV;AAAA,MACA,OAAAF;AAAA,MACA,QAAAC;AAAA,MACA,gBAAAE;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,IAAA;AAAA,IAXKO;AAAA,EAAA;AAcV,CAAA,EACH,CAAA,GAIJE,IAAejB;"}

package/dist/features/ui/section-list/section-list.js

@@ -0,0 +1,17 @@
+import { jsx as t, Fragment as p, jsxs as h } from "react/jsx-runtime";
+import { memo as $, Fragment as m } from "react";
+import f from "../layout/flex-view.js";
+const g = (i) => {
+  const { data: n, renderSectionHeader: o, renderItem: s, keyExtractor: a } = i;
+  return /* @__PURE__ */ t(p, { children: n.map((e, d) => /* @__PURE__ */ h(f, { children: [
+    n.length > 1 && o && o(e),
+    /* @__PURE__ */ t(m, { children: e.data.map((r, c) => {
+      const l = a ? a(r, c) : `${r}_${c}`;
+      return /* @__PURE__ */ t(m, { children: s(r) }, l);
+    }) })
+  ] }, `${e.title}_${d}`)) });
+}, u = $(g), L = u;
+export {
+  L as default
+};
+//# sourceMappingURL=section-list.js.map

package/dist/features/ui/section-list/section-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-list.js","sources":["../../../../src/features/ui/section-list/section-list.tsx"],"sourcesContent":["import type { ISectionList, TDefaultSection } from './section-list-types';\n\nimport { Fragment, memo } from 'react';\n\nimport FlexView from '../layout/flex-view';\n\nconst SectionListComponent = <Section extends string | number | TDefaultSection>(\n  props: ISectionList<Section>,\n): JSX.Element => {\n  const { data, renderSectionHeader, renderItem, keyExtractor } = props;\n\n  return (\n    <>\n      {data.map((section, idx) => {\n        return (\n          <FlexView key={`${section.title}_${idx}`}>\n            {data.length > 1 && renderSectionHeader && renderSectionHeader(section)}\n\n            <Fragment>\n              {section.data.map((item, itemIdx) => {\n                const key = keyExtractor ? keyExtractor(item, itemIdx) : `${item}_${itemIdx}`;\n\n                return <Fragment key={key}>{renderItem(item)}</Fragment>;\n              })}\n            </Fragment>\n          </FlexView>\n        );\n      })}\n    </>\n  );\n};\n\nconst SelectionList = memo(SectionListComponent) as <\n  Section extends string | number | TDefaultSection,\n>(\n  props: ISectionList<Section>,\n) => JSX.Element;\n\nexport default SelectionList;\n"],"names":["SectionListComponent","props","data","renderSectionHeader","renderItem","keyExtractor","jsx","Fragment","section","idx","FlexView","item","itemIdx","key","SelectionList","memo","SectionList"],"mappings":";;;AAMA,MAAMA,IAAuB,CAC3BC,MACgB;AAChB,QAAM,EAAE,MAAAC,GAAM,qBAAAC,GAAqB,YAAAC,GAAY,cAAAC,MAAiBJ;AAEhE,SAEK,gBAAAK,EAAAC,GAAA,EAAA,UAAAL,EAAK,IAAI,CAACM,GAASC,wBAEfC,GACE,EAAA,UAAA;AAAA,IAAAR,EAAK,SAAS,KAAKC,KAAuBA,EAAoBK,CAAO;AAAA,IAEtE,gBAAAF,EAACC,GAAA,EACE,UAAAC,EAAQ,KAAK,IAAI,CAACG,GAAMC,MAAY;AAC7B,YAAAC,IAAMR,IAAeA,EAAaM,GAAMC,CAAO,IAAI,GAAGD,CAAI,IAAIC,CAAO;AAE3E,+BAAQL,GAAA,EAAoB,UAAWH,EAAAO,CAAI,KAArBE,CAAuB;AAAA,IAC9C,CAAA,GACH;AAAA,EAAA,EAAA,GATa,GAAGL,EAAQ,KAAK,IAAIC,CAAG,EAUtC,CAEH,EACH,CAAA;AAEJ,GAEMK,IAAgBC,EAAKf,CAAoB,GAM/CgB,IAAeF;"}

package/dist/features/ui/selection-cards/selection-card-option/selection-card-option-styled.js

@@ -0,0 +1,19 @@
+import c from "styled-components";
+const l = c.div(
+  ({ $selected: r, theme: t, $background: e = "WHITE", $selectedBackground: p = "WHITE", $width: o }) => {
+    const { BLACK_T_87: i, WHITE_5: n } = t.colors;
+    return `
+      background-color: ${r ? p : e};
+      border-width: 1px;
+      border-color: ${r ? i : n};
+      width: ${o ? `${o}` : "auto"}${typeof o == "number" ? "px" : ""};
+      border-style: solid;
+      cursor: pointer;
+      position: relative;
+    `;
+  }
+);
+export {
+  l as SelectionCardOptionWrapper
+};
+//# sourceMappingURL=selection-card-option-styled.js.map

package/dist/features/ui/selection-cards/selection-card-option/selection-card-option-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-card-option-styled.js","sources":["../../../../../src/features/ui/selection-cards/selection-card-option/selection-card-option-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../../types';\n\nimport styled from 'styled-components';\n\ninterface ISelectionCardOptionWrapperProps {\n  $width?: string | number;\n  $widthX?: number;\n  $selected?: boolean;\n  $background?: TColorNames;\n  $selectedBackground?: TColorNames;\n}\n\nconst SelectionCardOptionWrapper = styled.div<ISelectionCardOptionWrapperProps>(\n  ({ $selected, theme, $background = 'WHITE', $selectedBackground = 'WHITE', $width }) => {\n    const { BLACK_T_87, WHITE_5 } = theme.colors;\n\n    return `\n      background-color: ${$selected ? $selectedBackground : $background};\n      border-width: 1px;\n      border-color: ${$selected ? BLACK_T_87 : WHITE_5};\n      width: ${$width ? `${$width}` : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      border-style: solid;\n      cursor: pointer;\n      position: relative;\n    `;\n  },\n);\n\nexport { SelectionCardOptionWrapper };\n"],"names":["SelectionCardOptionWrapper","styled","$selected","theme","$background","$selectedBackground","$width","BLACK_T_87","WHITE_5"],"mappings":";AAYA,MAAMA,IAA6BC,EAAO;AAAA,EACxC,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,IAAc,SAAS,qBAAAC,IAAsB,SAAS,QAAAC,QAAa;AACtF,UAAM,EAAE,YAAAC,GAAY,SAAAC,MAAYL,EAAM;AAE/B,WAAA;AAAA,0BACeD,IAAYG,IAAsBD,CAAW;AAAA;AAAA,sBAEjDF,IAAYK,IAAaC,CAAO;AAAA,eACvCF,IAAS,GAAGA,CAAM,KAAK,MAAM,GAAG,OAAOA,KAAW,WAAW,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnF;AACF;"}

package/dist/features/ui/selection-cards/selection-card-option/selection-card-option.js

@@ -0,0 +1,37 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useCallback as u } from "react";
+import d from "../../hooks/use-response-handler.js";
+import { SelectionCardOptionWrapper as C } from "./selection-card-option-styled.js";
+const O = ({
+  id: o,
+  children: i,
+  checked: t,
+  onChange: r,
+  analyticsLabel: a,
+  analyticsProps: f,
+  type: n,
+  $background: l,
+  $selectedBackground: s,
+  $cardWidth: c
+}) => {
+  const e = d({ analyticsLabel: a, analyticsProps: f }), m = u(() => {
+    if (typeof r != "function")
+      throw new Error("onChange must be a function");
+    n === "radio" && !t && (r(o), e(o)), n === "checkbox" && (r(o), e(o));
+  }, [t, e, n, o, r]);
+  return /* @__PURE__ */ p(
+    C,
+    {
+      $selectedBackground: s,
+      $background: l,
+      $selected: t,
+      onClick: m,
+      $width: c,
+      children: i
+    }
+  );
+};
+export {
+  O as default
+};
+//# sourceMappingURL=selection-card-option.js.map

package/dist/features/ui/selection-cards/selection-card-option/selection-card-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-card-option.js","sources":["../../../../../src/features/ui/selection-cards/selection-card-option/selection-card-option.tsx"],"sourcesContent":["import type { ISelectionCardOptionProps } from './selection-card-types';\n\nimport { useCallback } from 'react';\n\nimport useResponseHandler from '../../hooks/use-response-handler';\nimport * as Styled from './selection-card-option-styled';\n\nconst SelectionCardOption = <IDTypes extends string | number>({\n  id,\n  children,\n  checked,\n  onChange,\n  analyticsLabel,\n  analyticsProps,\n  type,\n  $background,\n  $selectedBackground,\n  $cardWidth,\n}: ISelectionCardOptionProps<IDTypes>) => {\n  const handleTracking = useResponseHandler({ analyticsLabel, analyticsProps });\n\n  const handleOnCardClick = useCallback(() => {\n    if (typeof onChange !== 'function') {\n      throw new Error('onChange must be a function');\n    }\n\n    if (type === 'radio' && !checked) {\n      onChange(id);\n      handleTracking(id);\n    }\n\n    if (type === 'checkbox') {\n      onChange(id);\n      handleTracking(id);\n    }\n  }, [checked, handleTracking, type, id, onChange]);\n\n  return (\n    <Styled.SelectionCardOptionWrapper\n      $selectedBackground={$selectedBackground}\n      $background={$background}\n      $selected={checked}\n      onClick={handleOnCardClick}\n      $width={$cardWidth}\n    >\n      {children}\n    </Styled.SelectionCardOptionWrapper>\n  );\n};\n\nexport default SelectionCardOption;\n"],"names":["SelectionCardOption","id","children","checked","onChange","analyticsLabel","analyticsProps","type","$background","$selectedBackground","$cardWidth","handleTracking","useResponseHandler","handleOnCardClick","useCallback","jsx","Styled.SelectionCardOptionWrapper"],"mappings":";;;;AAOA,MAAMA,IAAsB,CAAkC;AAAA,EAC5D,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,YAAAC;AACF,MAA0C;AACxC,QAAMC,IAAiBC,EAAmB,EAAE,gBAAAP,GAAgB,gBAAAC,EAAgB,CAAA,GAEtEO,IAAoBC,EAAY,MAAM;AACtC,QAAA,OAAOV,KAAa;AAChB,YAAA,IAAI,MAAM,6BAA6B;AAG3C,IAAAG,MAAS,WAAW,CAACJ,MACvBC,EAASH,CAAE,GACXU,EAAeV,CAAE,IAGfM,MAAS,eACXH,EAASH,CAAE,GACXU,EAAeV,CAAE;AAAA,EACnB,GACC,CAACE,GAASQ,GAAgBJ,GAAMN,GAAIG,CAAQ,CAAC;AAG9C,SAAA,gBAAAW;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,qBAAAP;AAAA,MACA,aAAAD;AAAA,MACA,WAAWL;AAAA,MACX,SAASU;AAAA,MACT,QAAQH;AAAA,MAEP,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/features/ui/selection-cards/selection-cards.js

@@ -0,0 +1,36 @@
+import { jsx as n, Fragment as k } from "react/jsx-runtime";
+import x from "./selection-card-option/selection-card-option.js";
+const b = ({
+  options: t,
+  value: c,
+  values: o,
+  onChange: i,
+  analyticsLabel: d,
+  analyticsProps: m,
+  type: e,
+  $background: l,
+  $selectedBackground: s,
+  $cardWidth: a
+}) => /* @__PURE__ */ n(k, { children: t.map((f) => {
+  const { children: h, id: r, visible: p } = f, C = e === "radio" ? c === r : o == null ? void 0 : o.some((S) => S === r);
+  return p ? /* @__PURE__ */ n(
+    x,
+    {
+      checked: !!C,
+      children: h,
+      id: r,
+      onChange: i,
+      analyticsLabel: d,
+      analyticsProps: m,
+      type: e,
+      $background: l,
+      $selectedBackground: s,
+      $cardWidth: a
+    },
+    r
+  ) : null;
+}) }), u = b;
+export {
+  u as default
+};
+//# sourceMappingURL=selection-cards.js.map

package/dist/features/ui/selection-cards/selection-cards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-cards.js","sources":["../../../../src/features/ui/selection-cards/selection-cards.tsx"],"sourcesContent":["import type { ISelectionCardListProps } from './selection-cards-types';\n\nimport SelectionCardOption from './selection-card-option/selection-card-option';\n\nconst SelectionCards = <IDType extends string | number>({\n  options,\n  value,\n  values,\n  onChange,\n  analyticsLabel,\n  analyticsProps,\n  type,\n  $background,\n  $selectedBackground,\n  $cardWidth,\n}: ISelectionCardListProps<IDType>) => {\n  return (\n    <>\n      {options.map(option => {\n        const { children, id, visible } = option;\n\n        const checked = type === 'radio' ? value === id : values?.some(val => val === id);\n\n        if (!visible) return null;\n\n        return (\n          <SelectionCardOption<IDType>\n            key={id}\n            checked={Boolean(checked)}\n            children={children}\n            id={id}\n            onChange={onChange}\n            analyticsLabel={analyticsLabel}\n            analyticsProps={analyticsProps}\n            type={type}\n            $background={$background}\n            $selectedBackground={$selectedBackground}\n            $cardWidth={$cardWidth}\n          />\n        );\n      })}\n    </>\n  );\n};\n\nexport default SelectionCards;\n"],"names":["SelectionCards","options","value","values","onChange","analyticsLabel","analyticsProps","type","$background","$selectedBackground","$cardWidth","jsx","Fragment","option","children","id","visible","checked","val","SelectionCardOption","SelectionCards$1"],"mappings":";;AAIA,MAAMA,IAAiB,CAAiC;AAAA,EACtD,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,YAAAC;AACF,MAEI,gBAAAC,EAAAC,GAAA,EACG,UAAQX,EAAA,IAAI,CAAUY,MAAA;AACrB,QAAM,EAAE,UAAAC,GAAU,IAAAC,GAAI,SAAAC,EAAA,IAAYH,GAE5BI,IAAUV,MAAS,UAAUL,MAAUa,IAAKZ,KAAA,gBAAAA,EAAQ,KAAK,CAAOe,MAAAA,MAAQH;AAE1E,SAACC,IAGH,gBAAAL;AAAA,IAACQ;AAAA,IAAA;AAAA,MAEC,SAAS,EAAQF;AAAA,MACjB,UAAAH;AAAA,MACA,IAAAC;AAAA,MACA,UAAAX;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,YAAAC;AAAA,IAAA;AAAA,IAVKK;AAAA,EAAA,IAJY;AAiBtB,CAAA,EACH,CAAA,GAIJK,IAAepB;"}

package/dist/features/ui/separator/separator.js

@@ -0,0 +1,11 @@
+import { jsx as i } from "react/jsx-runtime";
+import { memo as a } from "react";
+import m from "../layout/flex-view.js";
+const g = a((t) => {
+  const { width: o, height: r = 1, heightX: e, background: h } = t;
+  return /* @__PURE__ */ i(m, { $width: o, $height: r, $heightX: e, $background: h });
+}), d = g;
+export {
+  d as default
+};
+//# sourceMappingURL=separator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","sources":["../../../../src/features/ui/separator/separator.tsx"],"sourcesContent":["import type { ISeparatorProps } from './separator-types';\n\nimport React, { memo } from 'react';\n\nimport FlexView from '../layout/flex-view';\n\nconst Separator: React.FC<ISeparatorProps> = memo(props => {\n  const { width, height = 1, heightX, background } = props;\n\n  return <FlexView $width={width} $height={height} $heightX={heightX} $background={background} />;\n});\n\nexport default Separator;\n"],"names":["Separator","memo","props","width","height","heightX","background","jsx","FlexView","Separator$1"],"mappings":";;;AAMA,MAAMA,IAAuCC,EAAK,CAASC,MAAA;AACzD,QAAM,EAAE,OAAAC,GAAO,QAAAC,IAAS,GAAG,SAAAC,GAAS,YAAAC,EAAe,IAAAJ;AAE5C,SAAA,gBAAAK,EAACC,KAAS,QAAQL,GAAO,SAASC,GAAQ,UAAUC,GAAS,aAAaC,EAAY,CAAA;AAC/F,CAAC,GAEDG,IAAeT;"}

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

@@ -0,0 +1,34 @@
+import i from "styled-components";
+import a from "../layout/flex-view.js";
+import e from "../text/text.js";
+import { getTheme as p } from "../theme/get-theme.js";
+const { colors: t, layout: s } = p(), { gutter: o } = s, x = i(a)`
+  position: relative;
+`, $ = i(a)(
+  ({ $stepNumber: r, $currentStep: n }) => `
+    border-radius: ${o * 0.625}px;
+    background:${r < n ? t.GREEN_3 : r === n ? t.BLACK : t.GREY_3};
+    margin:0 ${o * 0.25}px;
+`
+), d = i(a)`
+  position: relative;
+  margin: 0 ${o * 0.875}px;
+`, f = i(e)`
+  margin-right: ${o * 0.25}px;
+`, u = i(a)(
+  ({ $percentageCompleted: r }) => `
+  position: absolute;
+  background-image: linear-gradient(to right, ${t.BLACK} ${r}%, ${t.GREY_3} ${r}%);
+  width: calc(100% - ${o * 5.375}px);
+  top: 50%;
+  left: ${o * 2.5}px;
+`
+);
+export {
+  u as HorizontalLine,
+  x as MainWrapper,
+  $ as NumberWrapper,
+  f as StyledText,
+  d as Wrapper
+};
+//# sourceMappingURL=stepper-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-styled.js","sources":["../../../../src/features/ui/stepper/stepper-styled.tsx"],"sourcesContent":["import type { IHorizontallineProps, INumberWrapperProps } from './stepper-types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport Text from '../text/text';\nimport { getTheme } from '../theme/get-theme';\n\nconst { colors, layout } = getTheme();\nconst { gutter } = layout;\n\nconst MainWrapper = styled(FlexView)`\n  position: relative;\n`;\n\nconst NumberWrapper = styled(FlexView)<INumberWrapperProps>(\n  ({ $stepNumber, $currentStep }) => `\n    border-radius: ${gutter * 0.625}px;\n    background:${\n      $stepNumber < $currentStep\n        ? colors.GREEN_3\n        : $stepNumber === $currentStep\n          ? colors.BLACK\n          : colors.GREY_3\n    };\n    margin:0 ${gutter * 0.25}px;\n`,\n);\n\nconst Wrapper = styled(FlexView)`\n  position: relative;\n  margin: 0 ${gutter * 0.875}px;\n`;\n\nconst StyledText = styled(Text)`\n  margin-right: ${gutter * 0.25}px;\n`;\n\nconst HorizontalLine = styled(FlexView)<IHorizontallineProps>(\n  ({ $percentageCompleted }) => `\n  position: absolute;\n  background-image: linear-gradient(to right, ${colors.BLACK} ${$percentageCompleted}%, ${\n    colors.GREY_3\n  } ${$percentageCompleted}%);\n  width: calc(100% - ${gutter * 5.375}px);\n  top: 50%;\n  left: ${gutter * 2.5}px;\n`,\n);\n\nexport { MainWrapper, NumberWrapper, Wrapper, StyledText, HorizontalLine };\n"],"names":["colors","layout","getTheme","gutter","MainWrapper","styled","FlexView","NumberWrapper","$stepNumber","$currentStep","Wrapper","StyledText","Text","HorizontalLine","$percentageCompleted"],"mappings":";;;;AAQA,MAAM,EAAE,QAAAA,GAAQ,QAAAC,MAAWC,KACrB,EAAE,QAAAC,EAAW,IAAAF,GAEbG,IAAcC,EAAOC,CAAQ;AAAA;AAAA,GAI7BC,IAAgBF,EAAOC,CAAQ;AAAA,EACnC,CAAC,EAAE,aAAAE,GAAa,cAAAC,EAAA,MAAmB;AAAA,qBAChBN,IAAS,KAAK;AAAA,iBAE7BK,IAAcC,IACVT,EAAO,UACPQ,MAAgBC,IACdT,EAAO,QACPA,EAAO,MACf;AAAA,eACWG,IAAS,IAAI;AAAA;AAE5B,GAEMO,IAAUL,EAAOC,CAAQ;AAAA;AAAA,cAEjBH,IAAS,KAAK;AAAA,GAGtBQ,IAAaN,EAAOO,CAAI;AAAA,kBACZT,IAAS,IAAI;AAAA,GAGzBU,IAAiBR,EAAOC,CAAQ;AAAA,EACpC,CAAC,EAAE,sBAAAQ,EAAA,MAA2B;AAAA;AAAA,gDAEgBd,EAAO,KAAK,IAAIc,CAAoB,MAChFd,EAAO,MACT,IAAIc,CAAoB;AAAA,uBACHX,IAAS,KAAK;AAAA;AAAA,UAE3BA,IAAS,GAAG;AAAA;AAEtB;"}

package/dist/features/ui/stepper/stepper.js

@@ -0,0 +1,41 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import m from "../../../assets/line-icons/icons/check.js";
+import h from "../text/text.js";
+import { getTheme as p } from "../theme/get-theme.js";
+import { MainWrapper as a, HorizontalLine as d, Wrapper as g, NumberWrapper as f, StyledText as s } from "./stepper-styled.js";
+const { layout: u } = p(), { gutter: i } = u;
+function j({ stepsInfo: n = [], currentStep: e = 2 }) {
+  const c = n.length && e >= 1 ? (e - 1) / n.length * 100 : 0;
+  return /* @__PURE__ */ o(a, { $flexDirection: "row", $width: "fit-content", $gutterX: 0.625, $gapX: 0.625, children: [
+    /* @__PURE__ */ t(d, { $percentageCompleted: c, $height: 1 }),
+    n.map(({ id: $, label: l }, r) => /* @__PURE__ */ o(
+      g,
+      {
+        $flexDirection: "row",
+        $alignItems: "center",
+        $justifyContent: "center",
+        $background: "WHITE",
+        children: [
+          /* @__PURE__ */ t(
+            f,
+            {
+              $stepNumber: r + 1,
+              $currentStep: e,
+              $alignItems: "center",
+              $justifyContent: "center",
+              $heightX: 1.25,
+              $widthX: 1.25,
+              children: r + 1 < e ? /* @__PURE__ */ t(m, { height: i, width: i }) : /* @__PURE__ */ t(h, { $renderAs: "body3", $color: "WHITE", children: $ })
+            }
+          ),
+          r + 1 === e && /* @__PURE__ */ t(s, { $renderAs: "body2", children: l })
+        ]
+      },
+      r
+    ))
+  ] });
+}
+export {
+  j as default
+};
+//# sourceMappingURL=stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sources":["../../../../src/features/ui/stepper/stepper.tsx"],"sourcesContent":["import type { IStepperProps } from './stepper-types';\n\nimport CheckIcon from '../../../assets/line-icons/icons/check';\nimport Text from '../text/text';\nimport { getTheme } from '../theme/get-theme';\nimport { MainWrapper, NumberWrapper, Wrapper, StyledText, HorizontalLine } from './stepper-styled';\n\nconst { layout } = getTheme();\nconst { gutter } = layout;\n\nfunction Stepper({ stepsInfo = [], currentStep = 2 }: IStepperProps) {\n  const percentageCompleted =\n    stepsInfo.length && currentStep >= 1 ? ((currentStep - 1) / stepsInfo.length) * 100 : 0;\n\n  return (\n    <MainWrapper $flexDirection=\"row\" $width=\"fit-content\" $gutterX={0.625} $gapX={0.625}>\n      <HorizontalLine $percentageCompleted={percentageCompleted} $height={1} />\n      {stepsInfo.map(({ id, label }, idx) => (\n        <Wrapper\n          key={idx}\n          $flexDirection=\"row\"\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n          $background=\"WHITE\"\n        >\n          <NumberWrapper\n            $stepNumber={idx + 1}\n            $currentStep={currentStep}\n            $alignItems=\"center\"\n            $justifyContent=\"center\"\n            $heightX={1.25}\n            $widthX={1.25}\n          >\n            {idx + 1 < currentStep ? (\n              <CheckIcon height={gutter} width={gutter} />\n            ) : (\n              <Text $renderAs=\"body3\" $color=\"WHITE\">\n                {id}\n              </Text>\n            )}\n          </NumberWrapper>\n          {idx + 1 === currentStep && <StyledText $renderAs=\"body2\">{label}</StyledText>}\n        </Wrapper>\n      ))}\n    </MainWrapper>\n  );\n}\n\nexport default Stepper;\n"],"names":["layout","getTheme","gutter","Stepper","stepsInfo","currentStep","percentageCompleted","jsxs","MainWrapper","jsx","HorizontalLine","id","label","idx","Wrapper","NumberWrapper","CheckIcon","Text","StyledText"],"mappings":";;;;;AAOA,MAAM,EAAE,QAAAA,EAAO,IAAIC,KACb,EAAE,QAAAC,EAAW,IAAAF;AAEnB,SAASG,EAAQ,EAAE,WAAAC,IAAY,CAAI,GAAA,aAAAC,IAAc,KAAoB;AAC7D,QAAAC,IACJF,EAAU,UAAUC,KAAe,KAAMA,IAAc,KAAKD,EAAU,SAAU,MAAM;AAGtF,SAAA,gBAAAG,EAACC,KAAY,gBAAe,OAAM,QAAO,eAAc,UAAU,OAAO,OAAO,OAC7E,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAe,EAAA,sBAAsBJ,GAAqB,SAAS,GAAG;AAAA,IACtEF,EAAU,IAAI,CAAC,EAAE,IAAAO,GAAI,OAAAC,EAAA,GAASC,MAC7B,gBAAAN;AAAA,MAACO;AAAA,MAAA;AAAA,QAEC,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,aAAY;AAAA,QAEZ,UAAA;AAAA,UAAA,gBAAAL;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,aAAaF,IAAM;AAAA,cACnB,cAAcR;AAAA,cACd,aAAY;AAAA,cACZ,iBAAgB;AAAA,cAChB,UAAU;AAAA,cACV,SAAS;AAAA,cAER,cAAM,IAAIA,IACR,gBAAAI,EAAAO,GAAA,EAAU,QAAQd,GAAQ,OAAOA,EAAQ,CAAA,sBAEzCe,GAAK,EAAA,WAAU,SAAQ,QAAO,SAC5B,UACHN,GAAA;AAAA,YAAA;AAAA,UAEJ;AAAA,UACCE,IAAM,MAAMR,uBAAgBa,GAAW,EAAA,WAAU,SAAS,UAAMN,GAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAtB5DC;AAAA,IAAA,CAwBR;AAAA,EACH,EAAA,CAAA;AAEJ;"}

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

@@ -0,0 +1,6 @@
+const o = 333, t = 666;
+export {
+  t as BLINK_DELAY,
+  o as BLINK_DURATION
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../src/features/ui/streak-icon/constants.ts"],"sourcesContent":["export const BLINK_DURATION = 333;\nexport const BLINK_DELAY = 666;\n"],"names":["BLINK_DURATION","BLINK_DELAY"],"mappings":"AAAO,MAAMA,IAAiB,KACjBC,IAAc;"}

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

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

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,20 @@
+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 })
+  ] })
+] })), A = $;
+export {
+  $ as StreakIcon,
+  A as default
+};
+//# sourceMappingURL=streak-icon.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,11 @@
+import t from "styled-components";
+import e from "../text/text.js";
+const i = t(e)`
+  font-size: 10px;
+  line-height: 14px;
+  margin-left: 2px;
+`;
+export {
+  i as SuperscriptText
+};
+//# sourceMappingURL=superscript-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"superscript-styled.js","sources":["../../../../src/features/ui/superscript/superscript-styled.tsx"],"sourcesContent":["import type { TextProps } from '../text/text';\n\nimport styled from 'styled-components';\n\nimport Text from '../text/text';\n\nexport const SuperscriptText = styled(Text)<TextProps>`\n  font-size: 10px;\n  line-height: 14px;\n  margin-left: 2px;\n`;\n"],"names":["SuperscriptText","styled","Text"],"mappings":";;AAMa,MAAAA,IAAkBC,EAAOC,CAAI;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/ui/superscript/superscript.js

@@ -0,0 +1,15 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { memo as m } from "react";
+import s from "../layout/flex-view.js";
+import { SuperscriptText as c } from "./superscript-styled.js";
+const u = m(({ children: o, supText: t, ...e }) => {
+  const { ...i } = e;
+  return /* @__PURE__ */ p(s, { $flexDirection: "row", children: [
+    /* @__PURE__ */ r("span", { children: o }),
+    /* @__PURE__ */ r(c, { ...i, children: t })
+  ] });
+});
+export {
+  u as Superscript
+};
+//# sourceMappingURL=superscript.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"superscript.js","sources":["../../../../src/features/ui/superscript/superscript.tsx"],"sourcesContent":["import type { SuperscriptProps } from './superscript-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport * as S from './superscript-styled';\n\nexport const Superscript: FC<SuperscriptProps> = memo(({ children, supText, ...rest }) => {\n  const { ...textProps } = rest;\n\n  return (\n    <FlexView $flexDirection=\"row\">\n      <span>{children}</span>\n      <S.SuperscriptText {...textProps}>{supText}</S.SuperscriptText>\n    </FlexView>\n  );\n});\n"],"names":["Superscript","memo","children","supText","rest","textProps","jsxs","FlexView","jsx","S.SuperscriptText"],"mappings":";;;;AAQa,MAAAA,IAAoCC,EAAK,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,GAAGC,QAAW;AAClF,QAAA,EAAE,GAAGC,EAAc,IAAAD;AAGvB,SAAA,gBAAAE,EAACC,GAAS,EAAA,gBAAe,OACvB,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAM,UAAAN,GAAS;AAAA,sBACfO,GAAA,EAAmB,GAAGJ,GAAY,UAAQF,EAAA,CAAA;AAAA,EAC7C,EAAA,CAAA;AAEJ,CAAC;"}

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

@@ -0,0 +1,37 @@
+import x from "styled-components";
+import s from "../layout/flex-view.js";
+const k = x(s)(({
+  theme: v,
+  $selected: i,
+  $size: p,
+  $renderAs: d,
+  $disabled: r,
+  $shape: e
+}) => {
+  const { colors: o, tab: g, layout: h } = v, { sizes: l, variants: u } = g, { height: b, paddingHorizontal: m } = l[p], { backgroundColorName: t, colorName: a, borderColorName: n, fontWeight: c } = u[d];
+  return `
+      height:${b}px;
+      padding:0 ${m}px;
+      cursor:${r ? "not-allowed" : "pointer"};
+      margin:${e === "square" ? h.gutter * 0.5 : 0}px;
+      border-radius: ${e === "curved" ? "50px" : "8px"};
+      border:1px solid ${r ? o[n.disabled] : i ? o[n.active] : o[n.inactive]};
+      background-color: ${r ? o[t.disabled] : i ? o[t.active] : o[t.inactive]};
+      & div{
+        font-weight:${r ? c.disabled : i ? c.active : c.inactive};
+        color: ${r ? o[a.disabled] : i ? o[a.active] : o[a.inactive]};
+      }
+      &:hover {
+        background-color:${r ? o[t.disabled] : i ? o[t.active] : o[t.hover]};
+        border-color: ${r ? o[n.disabled] : i ? o[n.active] : o[n.hover]};
+        & div{
+          font-weight:${c.hover};
+          color:${r ? o[a.disabled] : i ? o[a.active] : o[a.hover]};
+        } 
+      }
+    `;
+});
+export {
+  k as TabWrapper
+};
+//# sourceMappingURL=tab-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-styled.js","sources":["../../../../src/features/ui/tab/tab-styled.tsx"],"sourcesContent":["import type { ITabWrapperProps } from './tab-types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\n\nconst TabWrapper = styled(FlexView)<ITabWrapperProps>(({\n  theme,\n  $selected,\n  $size,\n  $renderAs,\n  $disabled,\n  $shape,\n}) => {\n  const { colors, tab, layout } = theme;\n  const { sizes, variants } = tab;\n  const { height, paddingHorizontal } = sizes[$size];\n  const { backgroundColorName, colorName, borderColorName, fontWeight } = variants[$renderAs];\n\n  return `\n      height:${height}px;\n      padding:0 ${paddingHorizontal}px;\n      cursor:${$disabled ? 'not-allowed' : 'pointer'};\n      margin:${$shape === 'square' ? layout.gutter * 0.5 : 0}px;\n      border-radius: ${$shape === 'curved' ? '50px' : '8px'};\n      border:1px solid ${\n        $disabled\n          ? colors[borderColorName.disabled]\n          : $selected\n            ? colors[borderColorName.active]\n            : colors[borderColorName.inactive]\n      };\n      background-color: ${\n        $disabled\n          ? colors[backgroundColorName.disabled]\n          : $selected\n            ? colors[backgroundColorName.active]\n            : colors[backgroundColorName.inactive]\n      };\n      & div{\n        font-weight:${\n          $disabled ? fontWeight.disabled : $selected ? fontWeight.active : fontWeight.inactive\n        };\n        color: ${\n          $disabled\n            ? colors[colorName.disabled]\n            : $selected\n              ? colors[colorName.active]\n              : colors[colorName.inactive]\n        };\n      }\n      &:hover {\n        background-color:${\n          $disabled\n            ? colors[backgroundColorName.disabled]\n            : $selected\n              ? colors[backgroundColorName.active]\n              : colors[backgroundColorName.hover]\n        };\n        border-color: ${\n          $disabled\n            ? colors[borderColorName.disabled]\n            : $selected\n              ? colors[borderColorName.active]\n              : colors[borderColorName.hover]\n        };\n        & div{\n          font-weight:${fontWeight.hover};\n          color:${\n            $disabled\n              ? colors[colorName.disabled]\n              : $selected\n                ? colors[colorName.active]\n                : colors[colorName.hover]\n          };\n        } \n      }\n    `;\n});\n\nexport { TabWrapper };\n"],"names":["TabWrapper","styled","FlexView","theme","$selected","$size","$renderAs","$disabled","$shape","colors","tab","layout","sizes","variants","height","paddingHorizontal","backgroundColorName","colorName","borderColorName","fontWeight"],"mappings":";;AAMA,MAAMA,IAAaC,EAAOC,CAAQ,EAAoB,CAAC;AAAA,EACrD,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AACF,MAAM;AACJ,QAAM,EAAE,QAAAC,GAAQ,KAAAC,GAAK,QAAAC,EAAA,IAAWR,GAC1B,EAAE,OAAAS,GAAO,UAAAC,EAAa,IAAAH,GACtB,EAAE,QAAAI,GAAQ,mBAAAC,EAAkB,IAAIH,EAAMP,CAAK,GAC3C,EAAE,qBAAAW,GAAqB,WAAAC,GAAW,iBAAAC,GAAiB,YAAAC,MAAeN,EAASP,CAAS;AAEnF,SAAA;AAAA,eACMQ,CAAM;AAAA,kBACHC,CAAiB;AAAA,eACpBR,IAAY,gBAAgB,SAAS;AAAA,eACrCC,MAAW,WAAWG,EAAO,SAAS,MAAM,CAAC;AAAA,uBACrCH,MAAW,WAAW,SAAS,KAAK;AAAA,yBAEnDD,IACIE,EAAOS,EAAgB,QAAQ,IAC/Bd,IACEK,EAAOS,EAAgB,MAAM,IAC7BT,EAAOS,EAAgB,QAAQ,CACvC;AAAA,0BAEEX,IACIE,EAAOO,EAAoB,QAAQ,IACnCZ,IACEK,EAAOO,EAAoB,MAAM,IACjCP,EAAOO,EAAoB,QAAQ,CAC3C;AAAA;AAAA,sBAGIT,IAAYY,EAAW,WAAWf,IAAYe,EAAW,SAASA,EAAW,QAC/E;AAAA,iBAEEZ,IACIE,EAAOQ,EAAU,QAAQ,IACzBb,IACEK,EAAOQ,EAAU,MAAM,IACvBR,EAAOQ,EAAU,QAAQ,CACjC;AAAA;AAAA;AAAA,2BAIEV,IACIE,EAAOO,EAAoB,QAAQ,IACnCZ,IACEK,EAAOO,EAAoB,MAAM,IACjCP,EAAOO,EAAoB,KAAK,CACxC;AAAA,wBAEET,IACIE,EAAOS,EAAgB,QAAQ,IAC/Bd,IACEK,EAAOS,EAAgB,MAAM,IAC7BT,EAAOS,EAAgB,KAAK,CACpC;AAAA;AAAA,wBAEgBC,EAAW,KAAK;AAAA,kBAE5BZ,IACIE,EAAOQ,EAAU,QAAQ,IACzBb,IACEK,EAAOQ,EAAU,MAAM,IACvBR,EAAOQ,EAAU,KAAK,CAC9B;AAAA;AAAA;AAAA;AAIV,CAAC;"}

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

@@ -0,0 +1,40 @@
+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(
+  ({
+    $renderAs: o = "primary",
+    $size: r = "regular",
+    label: m,
+    $selected: t,
+    $width: n,
+    $disabled: a,
+    onClick: p,
+    shape: i = "square"
+  }) => {
+    const {
+      tab: { sizes: s }
+    } = f();
+    return /* @__PURE__ */ e(
+      T,
+      {
+        $selected: t,
+        $width: n,
+        onClick: p,
+        $size: r,
+        $renderAs: o,
+        $disabled: a,
+        $justifyContent: "center",
+        $alignItems: "center",
+        $shape: i,
+        children: /* @__PURE__ */ e(u, { $renderAs: s[r].textVariant, color: t ? "WHITE" : "BLACK", children: m })
+      }
+    );
+  }
+), $ = l;
+export {
+  $ as default
+};
+//# sourceMappingURL=tab.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,20 @@
+import p from "styled-components";
+const i = p.div(({ $backgroundColor: t, theme: o }) => {
+  const {
+    colors: e,
+    layout: { gutter: r }
+  } = o;
+  return `
+  display: flex;
+  padding: ${r * 0.25}px ${r * 0.375}px;
+  align-items: center;
+  gap: ${r * 0.5}px;
+  width: fit-content;
+  border-radius: ${r / 4}px;
+  background-color: ${e[t]};
+`;
+});
+export {
+  i as Wrapper
+};
+//# sourceMappingURL=tag-styled.js.map