@cuemath/leap 2.8.37 → 2.8.38-guru.0

package/dist/features/ui/inputs/searchable-input/searchable-input.js

@@ -0,0 +1,101 @@
+import { jsx as r, jsxs as I } from "react/jsx-runtime";
+import { useRef as O, useCallback as i } from "react";
+import v from "../../buttons/clickable/clickable.js";
+import S from "../../layout/flex-view.js";
+import z from "../base-input/base-input.js";
+import { Input as A } from "../text-input/text-input-styled.js";
+import { StyledPrefixElementWrapper as D, StyledCrossIcon as R } from "./searchable-input-styled.js";
+const G = (u) => {
+  const {
+    renderAs: s,
+    value: h,
+    disabled: t,
+    label: o,
+    width: f,
+    widthX: $,
+    shape: b = "curved",
+    size: c = "regular",
+    onSearchTextChange: a,
+    onPrefixElementClick: l,
+    onEnter: e,
+    searchOnClear: d,
+    analyticsLabel: C,
+    analyticsProps: x,
+    prefixElement: p
+  } = u, m = O(null), g = i(
+    (n) => {
+      a(n.target.value);
+    },
+    [a]
+  ), w = i(
+    (n) => {
+      n.key === "Enter" && (e == null || e());
+    },
+    [e]
+  ), y = i(() => {
+    l == null || l();
+  }, [l]), k = i(() => {
+    var n;
+    a(""), d && (e == null || e(d)), (n = m.current) == null || n.focus();
+  }, [a, d, e]);
+  return /* @__PURE__ */ r(
+    v,
+    {
+      label: o ?? "searchable_input",
+      analyticsLabel: C,
+      analyticsProps: x,
+      disabled: t,
+      children: /* @__PURE__ */ r(
+        z,
+        {
+          renderAs: s,
+          size: c,
+          shape: b,
+          disabled: t,
+          label: o,
+          inputElement: /* @__PURE__ */ I(
+            S,
+            {
+              $flexDirection: "row",
+              $alignItems: "center",
+              $height: "100%",
+              $flexGap: 12,
+              $width: f,
+              $widthX: $,
+              children: [
+                l && p && /* @__PURE__ */ r(
+                  D,
+                  {
+                    $inputRenderAs: s,
+                    $disabled: t,
+                    $size: c,
+                    onClick: y,
+                    children: p
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  A,
+                  {
+                    $renderAs: s,
+                    placeholder: o,
+                    ref: m,
+                    $size: c,
+                    value: h ?? "",
+                    disabled: t,
+                    onChange: g,
+                    onKeyDown: w
+                  }
+                )
+              ]
+            }
+          ),
+          siblingElement: h && /* @__PURE__ */ r(R, { onClick: k })
+        }
+      )
+    }
+  );
+};
+export {
+  G as default
+};
+//# sourceMappingURL=searchable-input.js.map

package/dist/features/ui/inputs/searchable-input/searchable-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchable-input.js","sources":["../../../../../src/features/ui/inputs/searchable-input/searchable-input.tsx"],"sourcesContent":["import type { ISearchableInputProps } from './searchable-input-types';\nimport type { ChangeEvent } from 'react';\n\nimport { useCallback, useRef } from 'react';\n\nimport Clickable from '../../buttons/clickable/clickable';\nimport FlexView from '../../layout/flex-view';\nimport BaseInput from '../base-input/base-input';\nimport { Input } from '../text-input/text-input-styled';\nimport * as Styled from './searchable-input-styled';\n\nconst SearchableInput = <IDType extends string>(props: ISearchableInputProps<IDType>) => {\n  const {\n    renderAs,\n    value,\n    disabled,\n    label,\n    width,\n    widthX,\n    shape = 'curved',\n    size = 'regular',\n    onSearchTextChange,\n    onPrefixElementClick,\n    onEnter,\n    searchOnClear,\n    analyticsLabel,\n    analyticsProps,\n    prefixElement,\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleOnChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onSearchTextChange(e.target.value);\n    },\n    [onSearchTextChange],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        onEnter?.();\n      }\n    },\n    [onEnter],\n  );\n\n  const handleOnPrefixElementClick = useCallback(() => {\n    onPrefixElementClick?.();\n  }, [onPrefixElementClick]);\n\n  const handleOnClear = useCallback(() => {\n    onSearchTextChange('');\n\n    if (searchOnClear) {\n      onEnter?.(searchOnClear);\n    }\n\n    inputRef.current?.focus();\n  }, [onSearchTextChange, searchOnClear, onEnter]);\n\n  return (\n    <Clickable\n      label={label ?? 'searchable_input'}\n      analyticsLabel={analyticsLabel}\n      analyticsProps={analyticsProps}\n      disabled={disabled}\n    >\n      <BaseInput\n        renderAs={renderAs}\n        size={size}\n        shape={shape}\n        disabled={disabled}\n        label={label}\n        inputElement={\n          <FlexView\n            $flexDirection=\"row\"\n            $alignItems=\"center\"\n            $height=\"100%\"\n            $flexGap={12}\n            $width={width}\n            $widthX={widthX}\n          >\n            {onPrefixElementClick && prefixElement && (\n              <Styled.StyledPrefixElementWrapper\n                $inputRenderAs={renderAs}\n                $disabled={disabled}\n                $size={size}\n                onClick={handleOnPrefixElementClick}\n              >\n                {prefixElement}\n              </Styled.StyledPrefixElementWrapper>\n            )}\n            <Input\n              $renderAs={renderAs}\n              placeholder={label}\n              ref={inputRef}\n              $size={size}\n              value={value ?? ''}\n              disabled={disabled}\n              onChange={handleOnChange}\n              onKeyDown={handleOnKeyDown}\n            />\n          </FlexView>\n        }\n        siblingElement={value && <Styled.StyledCrossIcon onClick={handleOnClear} />}\n      />\n    </Clickable>\n  );\n};\n\nexport default SearchableInput;\n"],"names":["SearchableInput","props","renderAs","value","disabled","label","width","widthX","shape","size","onSearchTextChange","onPrefixElementClick","onEnter","searchOnClear","analyticsLabel","analyticsProps","prefixElement","inputRef","useRef","handleOnChange","useCallback","e","handleOnKeyDown","handleOnPrefixElementClick","handleOnClear","_a","jsx","Clickable","BaseInput","jsxs","FlexView","Styled.StyledPrefixElementWrapper","Input","Styled.StyledCrossIcon"],"mappings":";;;;;;;AAWM,MAAAA,IAAkB,CAAwBC,MAAyC;AACjF,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,oBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,EACE,IAAAf,GAEEgB,IAAWC,EAAyB,IAAI,GAExCC,IAAiBC;AAAA,IACrB,CAACC,MAAqC;AACjB,MAAAX,EAAAW,EAAE,OAAO,KAAK;AAAA,IACnC;AAAA,IACA,CAACX,CAAkB;AAAA,EAAA,GAGfY,IAAkBF;AAAA,IACtB,CAACC,MAA6C;AACxC,MAAAA,EAAE,QAAQ,YACFT,KAAA,QAAAA;AAAA,IAEd;AAAA,IACA,CAACA,CAAO;AAAA,EAAA,GAGJW,IAA6BH,EAAY,MAAM;AAC5B,IAAAT,KAAA,QAAAA;AAAA,EAAA,GACtB,CAACA,CAAoB,CAAC,GAEnBa,IAAgBJ,EAAY,MAAM;;AACtC,IAAAV,EAAmB,EAAE,GAEjBG,MACFD,KAAA,QAAAA,EAAUC,MAGZY,IAAAR,EAAS,YAAT,QAAAQ,EAAkB;AAAA,EACjB,GAAA,CAACf,GAAoBG,GAAeD,CAAO,CAAC;AAG7C,SAAA,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOtB,KAAS;AAAA,MAChB,gBAAAS;AAAA,MACA,gBAAAC;AAAA,MACA,UAAAX;AAAA,MAEA,UAAA,gBAAAsB;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,UAAA1B;AAAA,UACA,MAAAO;AAAA,UACA,OAAAD;AAAA,UACA,UAAAJ;AAAA,UACA,OAAAC;AAAA,UACA,cACE,gBAAAwB;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,gBAAe;AAAA,cACf,aAAY;AAAA,cACZ,SAAQ;AAAA,cACR,UAAU;AAAA,cACV,QAAQxB;AAAA,cACR,SAASC;AAAA,cAER,UAAA;AAAA,gBAAAI,KAAwBK,KACvB,gBAAAU;AAAA,kBAACK;AAAAA,kBAAA;AAAA,oBACC,gBAAgB7B;AAAA,oBAChB,WAAWE;AAAA,oBACX,OAAOK;AAAA,oBACP,SAASc;AAAA,oBAER,UAAAP;AAAA,kBAAA;AAAA,gBACH;AAAA,gBAEF,gBAAAU;AAAA,kBAACM;AAAA,kBAAA;AAAA,oBACC,WAAW9B;AAAA,oBACX,aAAaG;AAAA,oBACb,KAAKY;AAAA,oBACL,OAAOR;AAAA,oBACP,OAAON,KAAS;AAAA,oBAChB,UAAAC;AAAA,oBACA,UAAUe;AAAA,oBACV,WAAWG;AAAA,kBAAA;AAAA,gBACb;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,gBAAgBnB,KAAS,gBAAAuB,EAACO,GAAA,EAAuB,SAAST,GAAe;AAAA,QAAA;AAAA,MAC3E;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -2,20 +2,19 @@ import x from "styled-components";
 import s from "../layout/flex-view.js";
 const k = x(s)(({
   theme: v,
-  $width: e,
   $selected: i,
   $size: p,
-  $renderAs: g,
-  $disabled: r
+  $renderAs: d,
+  $disabled: r,
+  $shape: e
 }) => {
-  const { colors: o, tab: h, layout: d } = v, { sizes: l, variants: b } = h, { height: u, paddingHorizontal: m } = l[p], { backgroundColorName: t, colorName: a, borderColorName: n, fontWeight: c } = b[g];
+  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 `
-      width: ${e ? `${e}px` : "auto"};
-      height:${u}px;
+      height:${b}px;
       padding:0 ${m}px;
-      border-radius:8px;
       cursor:${r ? "not-allowed" : "pointer"};
-      margin:${d.gutter * 0.5}px;
+      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{

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

@@ -1 +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  $width,\n  $selected,\n  $size,\n  $renderAs,\n  $disabled,\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      width: ${$width ? `${$width}px` : 'auto'};\n      height:${height}px;\n      padding:0 ${paddingHorizontal}px;\n      border-radius:8px;\n      cursor:${$disabled ? 'not-allowed' : 'pointer'};\n      margin:${layout.gutter * 0.5}px;\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","$width","$selected","$size","$renderAs","$disabled","colors","tab","layout","sizes","variants","height","paddingHorizontal","backgroundColorName","colorName","borderColorName","fontWeight"],"mappings":";;AAMA,MAAMA,IAAaC,EAAOC,CAAQ,EAAoB,CAAC;AAAA,EACrD,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;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,EAAMN,CAAK,GAC3C,EAAE,qBAAAU,GAAqB,WAAAC,GAAW,iBAAAC,GAAiB,YAAAC,MAAeN,EAASN,CAAS;AAEnF,SAAA;AAAA,eACMH,IAAS,GAAGA,CAAM,OAAO,MAAM;AAAA,eAC/BU,CAAM;AAAA,kBACHC,CAAiB;AAAA;AAAA,eAEpBP,IAAY,gBAAgB,SAAS;AAAA,eACrCG,EAAO,SAAS,GAAG;AAAA,yBAE1BH,IACIC,EAAOS,EAAgB,QAAQ,IAC/Bb,IACEI,EAAOS,EAAgB,MAAM,IAC7BT,EAAOS,EAAgB,QAAQ,CACvC;AAAA,0BAEEV,IACIC,EAAOO,EAAoB,QAAQ,IACnCX,IACEI,EAAOO,EAAoB,MAAM,IACjCP,EAAOO,EAAoB,QAAQ,CAC3C;AAAA;AAAA,sBAGIR,IAAYW,EAAW,WAAWd,IAAYc,EAAW,SAASA,EAAW,QAC/E;AAAA,iBAEEX,IACIC,EAAOQ,EAAU,QAAQ,IACzBZ,IACEI,EAAOQ,EAAU,MAAM,IACvBR,EAAOQ,EAAU,QAAQ,CACjC;AAAA;AAAA;AAAA,2BAIET,IACIC,EAAOO,EAAoB,QAAQ,IACnCX,IACEI,EAAOO,EAAoB,MAAM,IACjCP,EAAOO,EAAoB,KAAK,CACxC;AAAA,wBAEER,IACIC,EAAOS,EAAgB,QAAQ,IAC/Bb,IACEI,EAAOS,EAAgB,MAAM,IAC7BT,EAAOS,EAAgB,KAAK,CACpC;AAAA;AAAA,wBAEgBC,EAAW,KAAK;AAAA,kBAE5BX,IACIC,EAAOQ,EAAU,QAAQ,IACzBZ,IACEI,EAAOQ,EAAU,MAAM,IACvBR,EAAOQ,EAAU,KAAK,CAC9B;AAAA;AAAA;AAAA;AAIV,CAAC;"}
+{"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

@@ -1,35 +1,40 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useTheme as s } from "styled-components";
-import c from "../text/text.js";
-import { TabWrapper as f } from "./tab-styled.js";
-const T = ({
-  $renderAs: o = "primary",
-  $size: r = "regular",
-  label: n,
-  $selected: t,
-  $width: a,
-  $disabled: m,
-  onClick: i
-}) => {
-  const {
-    tab: { sizes: p }
-  } = s();
-  return /* @__PURE__ */ e(
-    f,
-    {
-      $selected: t,
-      $width: a,
-      onClick: i,
-      $size: r,
-      $renderAs: o,
-      $disabled: m,
-      $justifyContent: "center",
-      $alignItems: "center",
-      children: /* @__PURE__ */ e(c, { $renderAs: p[r].textVariant, color: t ? "WHITE" : "BLACK", children: n })
-    }
-  );
-}, d = T;
+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 {
-  d as default
+  $ 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 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> = ({\n  $renderAs = 'primary',\n  $size = 'regular',\n  label,\n  $selected,\n  $width,\n  $disabled,\n  onClick,\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    >\n      <Text $renderAs={sizes[$size].textVariant} color={$selected ? 'WHITE' : 'BLACK'}>\n        {label}\n      </Text>\n    </Styled.TabWrapper>\n  );\n};\n\nexport default TabComponent;\n"],"names":["TabComponent","$renderAs","$size","label","$selected","$width","$disabled","onClick","sizes","useTheme","jsx","Styled.TabWrapper","Text","Tab"],"mappings":";;;;AAQA,MAAMA,IAAoC,CAAC;AAAA,EACzC,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AACF,MAAM;AACE,QAAA;AAAA,IACJ,KAAK,EAAE,OAAAC,EAAM;AAAA,MACXC,EAAS;AAGX,SAAA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAAP;AAAA,MACA,QAAAC;AAAA,MACA,SAAAE;AAAA,MACA,OAAAL;AAAA,MACA,WAAAD;AAAA,MACA,WAAAK;AAAA,MACA,iBAAgB;AAAA,MAChB,aAAY;AAAA,MAEZ,UAAA,gBAAAI,EAACE,GAAK,EAAA,WAAWJ,EAAMN,CAAK,EAAE,aAAa,OAAOE,IAAY,UAAU,SACrE,UACHD,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEAU,IAAeb;"}
+{"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/theme/tab.js

@@ -6,7 +6,7 @@ const o = (a) => ({ sizes: {
   },
   small: {
     height: a * 2,
-    paddingHorizontal: a * 0.5,
+    paddingHorizontal: a * 0.75,
     textVariant: "body2"
   },
   regular: {
@@ -24,13 +24,13 @@ const o = (a) => ({ sizes: {
     backgroundColorName: {
       inactive: "WHITE",
       active: "BLACK",
-      hover: "WHITE",
+      hover: "BLACK",
       disabled: "GREY_1"
     },
     colorName: {
       inactive: "BLACK",
       active: "WHITE",
-      hover: "BLACK",
+      hover: "WHITE",
       disabled: "BLACK_50"
     },
     borderColorName: {

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

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../src/features/ui/theme/tab.ts"],"sourcesContent":["import type { ITabSizeConfig, ITabVariantConfig, TTabSizes, TTabVariants } from '../types';\n\ninterface IGetTabConfig {\n  (gutter: number): {\n    sizes: Record<TTabSizes, ITabSizeConfig>;\n    variants: Record<TTabVariants, ITabVariantConfig>;\n  };\n}\n\nconst getTabConfig: IGetTabConfig = (gutter: number) => {\n  const sizes: Record<TTabSizes, ITabSizeConfig> = {\n    xsmall: {\n      height: gutter * 1.625,\n      paddingHorizontal: gutter * 0.5,\n      textVariant: 'body3',\n    },\n    small: {\n      height: gutter * 2,\n      paddingHorizontal: gutter * 0.5,\n      textVariant: 'body2',\n    },\n    regular: {\n      height: gutter * 2.5,\n      paddingHorizontal: gutter,\n      textVariant: 'body1',\n    },\n    medium: {\n      height: gutter * 3,\n      paddingHorizontal: gutter,\n      textVariant: 'body1',\n    },\n  };\n\n  const variants: Record<TTabVariants, ITabVariantConfig> = {\n    primary: {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        hover: 'WHITE',\n        disabled: 'GREY_1',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        hover: 'BLACK',\n        disabled: 'BLACK_50',\n      },\n      borderColorName: {\n        inactive: 'GREY_3',\n        active: 'BLACK',\n        hover: 'BLACK',\n        disabled: 'GREY_1',\n      },\n      fontWeight: {\n        inactive: 400,\n        active: 500,\n        hover: 500,\n        disabled: 400,\n      },\n    },\n  };\n\n  return { sizes, variants };\n};\n\nexport default getTabConfig;\n"],"names":["getTabConfig","gutter"],"mappings":"AASM,MAAAA,IAA8B,CAACC,OAqD5B,EAAE,OApDwC;AAAA,EAC/C,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,GAgCc,UA7B0C;AAAA,EACxD,SAAS;AAAA,IACP,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AAAA;"}
+{"version":3,"file":"tab.js","sources":["../../../../src/features/ui/theme/tab.ts"],"sourcesContent":["import type { ITabSizeConfig, ITabVariantConfig, TTabSizes, TTabVariants } from '../types';\n\ninterface IGetTabConfig {\n  (gutter: number): {\n    sizes: Record<TTabSizes, ITabSizeConfig>;\n    variants: Record<TTabVariants, ITabVariantConfig>;\n  };\n}\n\nconst getTabConfig: IGetTabConfig = (gutter: number) => {\n  const sizes: Record<TTabSizes, ITabSizeConfig> = {\n    xsmall: {\n      height: gutter * 1.625,\n      paddingHorizontal: gutter * 0.5,\n      textVariant: 'body3',\n    },\n    small: {\n      height: gutter * 2,\n      paddingHorizontal: gutter * 0.75,\n      textVariant: 'body2',\n    },\n    regular: {\n      height: gutter * 2.5,\n      paddingHorizontal: gutter,\n      textVariant: 'body1',\n    },\n    medium: {\n      height: gutter * 3,\n      paddingHorizontal: gutter,\n      textVariant: 'body1',\n    },\n  };\n\n  const variants: Record<TTabVariants, ITabVariantConfig> = {\n    primary: {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        hover: 'BLACK',\n        disabled: 'GREY_1',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        hover: 'WHITE',\n        disabled: 'BLACK_50',\n      },\n      borderColorName: {\n        inactive: 'GREY_3',\n        active: 'BLACK',\n        hover: 'BLACK',\n        disabled: 'GREY_1',\n      },\n      fontWeight: {\n        inactive: 400,\n        active: 500,\n        hover: 500,\n        disabled: 400,\n      },\n    },\n  };\n\n  return { sizes, variants };\n};\n\nexport default getTabConfig;\n"],"names":["getTabConfig","gutter"],"mappings":"AASM,MAAAA,IAA8B,CAACC,OAqD5B,EAAE,OApDwC;AAAA,EAC/C,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,GAgCc,UA7B0C;AAAA,EACxD,SAAS;AAAA,IACP,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AAAA;"}

package/dist/index.d.ts

@@ -299,6 +299,8 @@ export declare enum EPostGameStat {
     POINT = "point"
 }
 
+export declare const EPResourceAssign: FC<IEPResourceAssign>;
+
 export declare const EraserIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 declare const Error_2: React_2.FC<IErrorProps>;
@@ -328,6 +330,7 @@ export declare const EVENTS: {
     MILESTONE_RESOURCE_UNASSIGNED: "MILESTONE_RESOURCE_UNASSIGNED";
     MILESTONE_RESOURCE_RESET: "MILESTONE_RESOURCE_RESET";
     PAST_MILESTONE_OUTCOME_ADDED: "PAST_MILESTONE_OUTCOME_ADDED";
+    MILESTONE_TEST_ASSIGNED: "MILESTONE_TEST_ASSIGNED";
     CHAPTER_UPDATED: "CHAPTER_UPDATED";
     LESSONS_MARKED_AS_FAMILIAR: "LESSONS_MARKED_AS_FAMILIAR";
     LESSONS_MARKED_AS_IRRELEVANT: "LESSONS_MARKED_AS_IRRELEVANT";
@@ -1017,6 +1020,17 @@ declare interface IEditMilestoneModalProps extends IMilestoneEditProps {
     courseStream: TCourseStream;
 }
 
+declare interface IEPResourceAssign {
+    studentId: string;
+    stream: TCourseStream;
+    programId?: string;
+    userMilestoneId?: string;
+    onError: (errorMessage: string) => void;
+    onResourceAssign: (toastMessage: string) => void;
+    onExitResourceAssign: () => void;
+    onViewResource: (resource: IResourceItemData) => void;
+}
+
 declare interface IErrorProps {
     onTryAgain?: () => void;
     height?: string | number;
@@ -2251,6 +2265,24 @@ declare interface IReferenceSheetProps {
     };
 }
 
+export declare interface IResourceItemData {
+    boards: string[];
+    created_on: string;
+    created_on_ts: number;
+    grades: string[];
+    id: string;
+    is_lesson_v3_enabled: boolean;
+    is_live: boolean;
+    learnosity_activity_ref: string;
+    name: string;
+    node_id: string;
+    node_type: string;
+    stream: TCourseStream;
+    topics: string[];
+    updated_on: string;
+    updated_on_ts: number;
+}
+
 export declare interface IResponseAnalyticsProps extends Omit<IClickableAnalyticsProps, 'label'> {
 }
 
@@ -2606,11 +2638,13 @@ export declare interface ITableWebGameProps extends IBaseWebGameProps {
 declare interface ITabProps {
     label: number | string;
     $selected: boolean;
-    $width?: number;
+    $width?: number | string;
     $renderAs?: TTabVariants;
     $size?: TTabSizes;
     $disabled?: boolean;
     onClick: () => void;
+    shape?: 'curved' | 'square';
+    minWidth?: number;
 }
 
 export declare interface ITabSizeConfig {
@@ -3719,6 +3753,8 @@ export declare const SHEET_STATE: Record<TSheetStateProps, TSheetStateProps>;
 
 export declare const SheetError: NamedExoticComponent<ErrorProps>;
 
+export declare const SheetIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+
 export declare const SheetList: FC<ISheetsListProps>;
 
 export declare const SheetLocked: MemoExoticComponent<({ onHomeClick }: {
@@ -4198,6 +4234,11 @@ export declare type TInclassMessage = {
     eventPayload: {
         milestoneId: string;
     };
+} | {
+    eventName: typeof EVENTS.MILESTONE_TEST_ASSIGNED;
+    eventPayload: {
+        milestoneId: string;
+    };
 } | {
     eventName: typeof EVENTS.MILESTONE_RESOURCE_RESET;
     eventPayload: {