@cuemath/leap 2.8.32-beta-0.2 → 2.8.32

package/dist/features/ui/grade-selector/grade-tab.js

@@ -1,27 +1,27 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useCallback as n } from "react";
-import p from "../tab/tab.js";
+import { jsx as m } from "react/jsx-runtime";
+import { useCallback as c } from "react";
+import d from "../tab/tab.js";
 const u = ({
-  renderAs: o = "primary",
-  size: t = "regular",
-  label: a,
+  renderAs: a = "primary",
+  size: o = "regular",
+  label: t,
   selected: i,
-  width: m,
+  width: s,
   onSelect: r,
   grade: e
 }) => {
-  const s = n(() => {
+  const l = c(() => {
     r(e);
   }, [e, r]);
-  return /* @__PURE__ */ l(
-    p,
+  return /* @__PURE__ */ m(
+    d,
     {
-      label: a,
+      label: t,
       $selected: i,
-      $width: m,
-      $renderAs: o,
-      $size: t,
-      onClick: s
+      $width: s,
+      $renderAs: a,
+      $size: o,
+      onClick: l
     }
   );
 };

package/dist/features/ui/grade-selector/grade-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"grade-tab.js","sources":["../../../../src/features/ui/grade-selector/grade-tab.tsx"],"sourcesContent":["import type { IGradeTabProps } from './grade-selector-types';\n\nimport React, { useCallback } from 'react';\n\nimport Tab from '../tab/tab';\n\nconst GradeTab: React.FC<IGradeTabProps> = ({\n  renderAs = 'primary',\n  size = 'regular',\n  label,\n  selected,\n  width,\n  onSelect,\n  grade,\n}) => {\n  const handleClick = useCallback(() => {\n    onSelect(grade);\n  }, [grade, onSelect]);\n\n  return (\n    <Tab\n      label={label}\n      $selected={selected}\n      $width={width}\n      $renderAs={renderAs}\n      $size={size}\n      onClick={handleClick}\n    />\n  );\n};\n\nexport default GradeTab;\n"],"names":["GradeTab","renderAs","size","label","selected","width","onSelect","grade","handleClick","useCallback","jsx","Tab"],"mappings":";;;AAMA,MAAMA,IAAqC,CAAC;AAAA,EAC1C,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AACE,QAAAC,IAAcC,EAAY,MAAM;AACpC,IAAAH,EAASC,CAAK;AAAA,EAAA,GACb,CAACA,GAAOD,CAAQ,CAAC;AAGlB,SAAA,gBAAAI;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAR;AAAA,MACA,WAAWC;AAAA,MACX,QAAQC;AAAA,MACR,WAAWJ;AAAA,MACX,OAAOC;AAAA,MACP,SAASM;AAAA,IAAA;AAAA,EAAA;AAGf;"}
+{"version":3,"file":"grade-tab.js","sources":["../../../../src/features/ui/grade-selector/grade-tab.tsx"],"sourcesContent":["import type { IGradeTabProps } from './grade-selector-types';\n\nimport React, { useCallback } from 'react';\n\nimport Tab from '../tab/tab';\n\nconst GradeTab: React.FC<IGradeTabProps> = ({\n  renderAs = 'primary',\n  size = 'regular',\n  label,\n  selected,\n  width,\n  onSelect,\n  grade,\n}) => {\n  const handleClick = useCallback(() => {\n    onSelect(grade);\n  }, [grade, onSelect]);\n\n  return (\n    <Tab\n      label={label}\n      $selected={selected}\n      $width={width}\n      $renderAs={renderAs}\n      $size={size}\n      onClick={handleClick}\n    />\n  );\n};\n\nexport default GradeTab;\n"],"names":["GradeTab","renderAs","size","label","selected","width","onSelect","grade","handleClick","useCallback","jsx","Tab"],"mappings":";;;AAMA,MAAMA,IAAqC,CAAC;AAAA,EAC1C,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AACE,QAAAC,IAAcC,EAAY,MAAM;AACpC,IAAAH,EAASC,CAAK;AAAA,EAAA,GACb,CAACA,GAAOD,CAAQ,CAAC;AAGlB,SAAA,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAR;AAAA,MACA,WAAWC;AAAA,MACX,QAAQC;AAAA,MACR,WAAWJ;AAAA,MACX,OAAOC;AAAA,MACP,SAASM;AAAA,IAAA;AAAA,EAAA;AAGf;"}

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

@@ -2,19 +2,20 @@ 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: d,
-  $disabled: r,
-  $shape: e
+  $renderAs: g,
+  $disabled: r
 }) => {
-  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];
+  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];
   return `
-      height:${b}px;
+      width: ${e ? `${e}px` : "auto"};
+      height:${u}px;
       padding:0 ${m}px;
+      border-radius:8px;
       cursor:${r ? "not-allowed" : "pointer"};
-      margin:${e === "square" ? h.gutter * 0.5 : 0}px;
-      border-radius: ${e === "curved" ? "50px" : "8px"};
+      margin:${d.gutter * 0.5}px;
       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  $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;"}
+{"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;"}

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

@@ -1,40 +1,35 @@
 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;
+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;
 export {
-  $ as default
+  d 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 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;"}

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

@@ -6,7 +6,7 @@ const o = (a) => ({ sizes: {
   },
   small: {
     height: a * 2,
-    paddingHorizontal: a * 0.75,
+    paddingHorizontal: a * 0.5,
     textVariant: "body2"
   },
   regular: {

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.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: '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.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;"}

package/dist/features/worksheet/worksheet/worksheet-question/worksheet-question.js

@@ -1,5 +1,5 @@
-import { jsxs as I, jsx as r, Fragment as Dt } from "react/jsx-runtime";
-import { memo as Ut, useMemo as _, useState as A, useRef as z, useCallback as zt, useEffect as g, useLayoutEffect as Kt } from "react";
+import { jsxs as I, jsx as r, Fragment as zt } from "react/jsx-runtime";
+import { memo as Dt, useMemo as R, useState as A, useRef as U, useCallback as Ut, useEffect as E, useLayoutEffect as Kt } from "react";
 import { IMAGES as Vt } from "../../../../assets/images/images.js";
 import Xt from "../../../cue-canvas/cue-canvas.js";
 import Pt from "../../../pointer-sync/pointer.js";
@@ -16,15 +16,15 @@ import re from "./system-intros/basic-practice-intro.js";
 import oe from "./system-intros/exit-ticket-intro.js";
 import ie from "./system-intros/regular-practice-intro.js";
 import { QuestionContainerWrapper as ne, StimulusReview as ce, QuestionContainer as ae, QuestionWrapper as se, LessonOverviewBanner as le, CueCanvasWrapper as me, Hint as ue, Solution as fe } from "./worksheet-question-styled.js";
-const Le = Ut(
+const Le = Dt(
   ({
     userType: c,
     signedRequest: bt,
-    worksheetCompleted: u,
+    worksheetCompleted: f,
     question: n,
     response: e,
-    nextQuestionId: R,
-    isActive: v,
+    nextQuestionId: v,
+    isActive: w,
     isHidden: M,
     canRender: K,
     loggerRef: O,
@@ -32,12 +32,12 @@ const Le = Ut(
     maxQuestionWidth: V,
     behavior: X,
     layout: P,
-    actionbarHeight: Ct,
-    learnosity: w,
+    actionbarHeight: Wt,
+    learnosity: H,
     intersectionObserver: j,
     background: G = "paper",
-    onMarkForReview: Bt,
-    userId: Wt,
+    onMarkForReview: Ct,
+    userId: Bt,
     onPublishStrokes: Y,
     onReceiveStrokes: Z,
     isScribblingEnabled: J,
@@ -52,7 +52,7 @@ const Le = Ut(
     responses: Tt,
     subjectiveProps: rt
   }) => {
-    const C = _(
+    const C = R(
       () => G === "paper" ? Yt(n) : void 0,
       [G, n]
     ), [B, It] = A(), [ot, At] = A(), {
@@ -60,48 +60,48 @@ const Le = Ut(
       review: Q,
       maximumAttempts: nt,
       canExceedAttempts: ct,
-      teacherValidationEnabled: H,
+      teacherValidationEnabled: S,
       solutionHidden: at
-    } = X, { minQuestionHeight: Mt, topOffset: st, questionsScrollable: W } = P, {
-      type: E,
+    } = X, { minQuestionHeight: Mt, topOffset: st, questionsScrollable: y } = P, {
+      type: $,
       response_id: o,
-      stimulus_review: $,
-      item_type: f,
+      stimulus_review: p,
+      item_type: h,
       instructor_stimulus: lt,
-      metadata: { hints: h, solution: S, widget_reference: mt },
+      metadata: { hints: d, solution: b, widget_reference: mt },
       item_reference: ut,
       question_number: ft
-    } = n, ht = !!$, y = f === "overview", m = Zt(lt), d = lt === "SystemIntro", dt = m || d, gt = e == null ? void 0 : e.responseEdited, Ot = _(() => {
+    } = n, ht = !!p, x = h === "overview", m = Zt(lt), g = lt === "SystemIntro", dt = m || g, gt = e == null ? void 0 : e.responseEdited, Ot = R(() => {
       const t = [];
-      return gt && c === "TEACHER" && t.push("attempting"), a || t.push("hidden"), E === "hotspot" && t.push("correct-answers-hidden"), a && H && E === "clozetext" && (!m || c === "STUDENT" ? t.push("response-hidden") : t.push("response-code-hidden")), y && t.push("lesson-overview"), m && t.push("concept-intro"), d && t.push("system-intro"), t.join(" ");
+      return gt && c === "TEACHER" && t.push("attempting"), a || t.push("hidden"), $ === "hotspot" && t.push("correct-answers-hidden"), a && S && $ === "clozetext" && (!m || c === "STUDENT" ? t.push("response-hidden") : t.push("response-code-hidden")), x && t.push("lesson-overview"), m && t.push("concept-intro"), g && t.push("system-intro"), t.join(" ");
     }, [
       a,
       m,
-      y,
-      d,
-      E,
+      x,
+      g,
+      $,
       gt,
-      H,
+      S,
       c
-    ]), F = z({}), x = (e == null ? void 0 : e.hintsUsed) ?? 0, [Et] = A((e == null ? void 0 : e.validatedByTeacher) ?? !1), L = z(null), D = z(null), U = _(() => h == null ? void 0 : h.slice(0, x), [h, x]), $t = _(() => c === "TEACHER" || u ? !0 : !e || !e.response || e.responseEdited ? !1 : it, [e, c, it, u]), pt = _(() => {
+    ]), F = U({}), L = (e == null ? void 0 : e.hintsUsed) ?? 0, [Et] = A((e == null ? void 0 : e.validatedByTeacher) ?? !1), T = U(null), z = U(null), D = R(() => d == null ? void 0 : d.slice(0, L), [d, L]), $t = R(() => c === "TEACHER" || f ? !0 : !e || !e.response || e.responseEdited ? !1 : it, [e, c, it, f]), pt = R(() => {
       if (c === "TEACHER") return !0;
       if (Q) {
         const { attemptsHistory: t } = e ?? {};
         return ((t == null ? void 0 : t.length) ?? 0) >= nt && !ct;
       }
       return !1;
-    }, [ct, nt, e, Q, c]), Nt = _(
-      () => S && u && !at,
-      [at, S, u]
+    }, [ct, nt, e, Q, c]), Nt = R(
+      () => b && f && !at,
+      [at, b, f]
     ), [_t, Qt] = A({
       width: 0,
       height: 0
-    }), Ft = zt((t) => {
+    }), Ft = Ut((t) => {
       At(t);
     }, []);
-    return g(() => {
-      L.current && j.observe(L.current);
-    }, [j]), g(() => {
+    return E(() => {
+      T.current && j.observe(T.current);
+    }, [j]), E(() => {
       if (a && (n.type === "clozeassociation" || n.type === "association" || n.type === "clozeformula")) {
         const t = document.querySelectorAll(
           `.widget-${n.response_id} .lrn_draggable`
@@ -114,24 +114,26 @@ const Le = Ut(
           height: i
         });
       }
-    }, [a, n.response_id, n.type]), g(() => {
+    }, [a, n.response_id, n.type]), E(() => {
       if (a && $t) {
-        const t = w.question(o);
+        const t = H.question(o);
         t && t.validate({
           showCorrectAnswers: pt
         });
       }
-    }, [a, w, o, Q, pt, c, $t]), g(() => {
-      const t = D.current;
-      if (a && t && O.current && F.current[o] === void 0 && !m && !d) {
+    }, [a, H, o, Q, pt, c, $t]), E(() => {
+      const t = z.current;
+      if (a && t && O.current && F.current[o] === void 0 && !m && !g) {
         const s = t.clientWidth, i = t.querySelectorAll("*");
         for (let l = 0; l < i.length; l++) {
-          const b = i[l];
-          if (b && b.clientWidth > s) {
+          const u = i[l];
+          if (u != null && u.closest(".resize-sensor"))
+            continue;
+          if (((u == null ? void 0 : u.clientWidth) ?? 0) > s) {
             F.current[o] = !0, O.current(jt.WORKSHEET_V3_GREATER_WIDTH_ELEMENT, {
               item_reference: ut,
               widget_reference: mt,
-              question_type: E,
+              question_type: $,
               question_number: ft,
               responseId: o
             });
@@ -143,53 +145,53 @@ const Le = Ut(
     }, [
       a,
       m,
-      d,
+      g,
       ut,
       O,
-      E,
+      $,
       ft,
       o,
       mt
-    ]), g(() => {
-      const t = L.current, s = (i) => {
+    ]), E(() => {
+      const t = T.current, s = (i) => {
         const l = i.querySelector(".lrn_response_wrapper");
         if (!l)
           return 0;
-        const b = i.getBoundingClientRect().bottom, T = l.getBoundingClientRect().bottom, p = Math.abs(b - T);
-        return p < Ht ? Ht - p : 0;
+        const u = i.getBoundingClientRect().bottom, W = l.getBoundingClientRect().bottom, _ = Math.abs(u - W);
+        return _ < Ht ? Ht - _ : 0;
       };
       a && t && It((i) => {
         var vt;
-        const T = ((vt = n.ui_style) == null ? void 0 : vt.type) === "floating-keyboard" && !(H && E === "clozetext"), p = t.clientHeight;
-        if (p === 0)
+        const W = ((vt = n.ui_style) == null ? void 0 : vt.type) === "floating-keyboard" && !(S && $ === "clozetext"), _ = t.clientHeight;
+        if (_ === 0)
           return i;
         if (!i)
           return Math.ceil(
-            p + (T ? s(t) : 0)
+            _ + (W ? s(t) : 0)
           );
         const Rt = Math.ceil(
-          p + (T ? s(t) : 0)
+          _ + (W ? s(t) : 0)
         );
         return Math.abs(Rt - i) > 4 ? Rt : i;
       });
     }), Kt(() => {
-      !W && !M && St(o);
-    }, [M, W, o, st]), g(() => {
-      (x || ht || S && u) && w.renderMath("mathjax");
-    }, [ht, x, w, S, u]), g(() => {
-      if (H && R && !Et && (e != null && e.validatedByTeacher)) {
+      !y && !M && St(o);
+    }, [M, y, o, st]), E(() => {
+      (L || ht || b && f) && H.renderMath("mathjax");
+    }, [ht, L, H, b, f]), E(() => {
+      if (S && v && !Et && (e != null && e.validatedByTeacher)) {
         const t = setTimeout(() => {
-          W ? St(R) : et(R);
+          y ? St(v) : et(v);
         }, 1e3);
         return () => {
           clearTimeout(t);
         };
       }
     }, [
-      R,
-      H,
+      v,
+      S,
       Et,
-      W,
+      y,
       et,
       e == null ? void 0 : e.validatedByTeacher
     ]), /* @__PURE__ */ I(
@@ -197,35 +199,35 @@ const Le = Ut(
       {
         "data-response-id": o,
         className: `widget-${o}`,
-        ref: L,
+        ref: T,
         $topOffset: st,
-        $flexDirection: $ ? "row" : "column",
-        $alignItems: $ ? "flex-start" : "center",
+        $flexDirection: p ? "row" : "column",
+        $alignItems: p ? "flex-start" : "center",
         $hidden: M,
         $marginBottom: Gt,
         children: [
-          $ && /* @__PURE__ */ r(
+          p && /* @__PURE__ */ r(
             ce,
             {
               dangerouslySetInnerHTML: {
-                __html: $
+                __html: p
               }
             }
           ),
           /* @__PURE__ */ I(
             ae,
             {
-              ref: D,
-              $width: $ ? "50%" : `${V}px`,
+              ref: z,
+              $width: p ? "50%" : `${V}px`,
               $minHeight: B ? Math.max(B - 72, ot ?? 0) : Mt,
-              $isActive: v,
+              $isActive: w,
               $paperColor: C,
-              $opacity: v ? 1 : 0.2,
+              $opacity: w ? 1 : 0.2,
               children: [
-                v && !!k && !!tt && q && /* @__PURE__ */ r(
+                w && !!k && !!tt && q && /* @__PURE__ */ r(
                   Pt,
                   {
-                    containerRef: D,
+                    containerRef: z,
                     onPublish: k,
                     onSubscribe: tt,
                     responseId: o
@@ -238,7 +240,7 @@ const Le = Ut(
                     $dropzoneMinWidth: _t.width,
                     $dropzoneMinHeight: _t.height,
                     children: [
-                      !(y || m || d) && /* @__PURE__ */ r(
+                      !(x || m || g) && /* @__PURE__ */ r(
                         Jt,
                         {
                           userType: c,
@@ -247,20 +249,20 @@ const Le = Ut(
                           behavior: X,
                           layout: P,
                           paperColor: C,
-                          onMarkForReview: Bt,
-                          actionbarHeight: Ct,
+                          onMarkForReview: Ct,
+                          actionbarHeight: Wt,
                           canResolveDoubt: yt,
                           onResolveDoubt: xt,
-                          worksheetCompleted: u
+                          worksheetCompleted: f
                         }
                       ),
-                      y && /* @__PURE__ */ r(le, { src: Vt.LESSON_OVERVIEW_BANNER }),
+                      x && /* @__PURE__ */ r(le, { src: Vt.LESSON_OVERVIEW_BANNER }),
                       m && C && /* @__PURE__ */ r(kt, { paperColor: C }),
-                      d ? /* @__PURE__ */ I(Dt, { children: [
-                        f === "practice-basic" && /* @__PURE__ */ r(re, {}),
-                        f === "practice-regular" && /* @__PURE__ */ r(ie, {}),
-                        f === "exit-ticket" && /* @__PURE__ */ r(oe, {}),
-                        (f == null ? void 0 : f.startsWith("advanced-")) && /* @__PURE__ */ r(ee, {})
+                      g ? /* @__PURE__ */ I(zt, { children: [
+                        h === "practice-basic" && /* @__PURE__ */ r(re, {}),
+                        h === "practice-regular" && /* @__PURE__ */ r(ie, {}),
+                        h === "exit-ticket" && /* @__PURE__ */ r(oe, {}),
+                        (h == null ? void 0 : h.startsWith("advanced-")) && /* @__PURE__ */ r(ee, {})
                       ] }) : void 0,
                       /* @__PURE__ */ r(
                         qt,
@@ -269,8 +271,8 @@ const Le = Ut(
                           appended: a,
                           question: n,
                           response: e == null ? void 0 : e.response,
-                          canRender: K || v,
-                          learnosity: w,
+                          canRender: K || w,
+                          learnosity: H,
                           canForceAppend: c === "TEACHER",
                           isConceptIntro: m
                         }
@@ -279,7 +281,7 @@ const Le = Ut(
                         Xt,
                         {
                           canRender: K,
-                          canScribble: J && v,
+                          canScribble: J && w,
                           appended: a,
                           responseId: o,
                           width: V,
@@ -287,12 +289,12 @@ const Le = Ut(
                           onUpdateHeight: Ft,
                           onPublish: Y,
                           onSubscribe: Z,
-                          userId: Wt,
+                          userId: Bt,
                           initialData: N == null ? void 0 : N[o],
                           userType: c
                         }
                       ) }),
-                      !dt && U && U.length > 0 && /* @__PURE__ */ r(
+                      !dt && D && D.length > 0 && /* @__PURE__ */ r(
                         wt,
                         {
                           $background: "BLUE_1",
@@ -300,11 +302,11 @@ const Le = Ut(
                           $gapX: 0.5,
                           $borderRadiusX: 0,
                           $borderColor: "BLUE_2",
-                          children: U.map((t, s) => /* @__PURE__ */ r(
+                          children: D.map((t, s) => /* @__PURE__ */ r(
                             ue,
                             {
                               dangerouslySetInnerHTML: {
-                                __html: `<span style="color: #DA5107; font-weight: 600;">Hint${((h == null ? void 0 : h.length) ?? 0) > 1 ? ` ${s + 1}` : ""}:</span>&nbsp;${t}`
+                                __html: `<span style="color: #DA5107; font-weight: 600;">Hint${((d == null ? void 0 : d.length) ?? 0) > 1 ? ` ${s + 1}` : ""}:</span>&nbsp;${t}`
                               }
                             },
                             t
@@ -323,7 +325,7 @@ const Le = Ut(
                             fe,
                             {
                               dangerouslySetInnerHTML: {
-                                __html: `<div style="color: #DA5107; font-weight: 600;">Solution:</div>${S}`
+                                __html: `<div style="color: #DA5107; font-weight: 600;">Solution:</div>${b}`
                               }
                             }
                           )
@@ -334,7 +336,7 @@ const Le = Ut(
                         {
                           responses: Tt,
                           response: e,
-                          nextQuestionId: R,
+                          nextQuestionId: v,
                           responseId: o,
                           studentId: Lt,
                           userType: c,