@cuemath/leap 2.9.5-j1 → 2.9.5-j10

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

@@ -1,55 +1,58 @@
 import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import g from "../base-input/base-input.js";
-import { Input as h } from "./text-input-styled.js";
-const i = "regular", x = b((o, p) => {
+import { forwardRef as I } from "react";
+import $ from "../base-input/base-input.js";
+import { Input as b } from "./text-input-styled.js";
+const i = "regular", g = I((l, p) => {
   const {
     type: e,
-    label: l,
-    value: t,
-    renderAs: r,
-    width: m,
-    widthX: u,
+    label: m,
+    value: r,
+    renderAs: t,
+    width: u,
+    widthX: d,
     disabled: s,
-    willShowMessage: d,
+    willShowMessage: c,
     siblingElement: f,
-    errorMessage: c,
-    shape: w,
-    isTransparent: n,
-    ...I
-  } = o;
+    errorMessage: h,
+    shape: T,
+    isTransparent: o,
+    colorTheme: n,
+    ...w
+  } = l;
   return /* @__PURE__ */ a(
-    g,
+    $,
     {
-      renderAs: r,
-      label: l,
-      stickyLabel: !!t || e === "date",
-      width: m,
-      widthX: u,
+      renderAs: t,
+      label: m,
+      stickyLabel: !!r || e === "date",
+      width: u,
+      widthX: d,
       disabled: s,
-      willShowMessage: d,
+      willShowMessage: c,
       size: i,
-      shape: w,
-      errorMessage: c,
-      isTransparent: n,
+      shape: T,
+      errorMessage: h,
+      isTransparent: o,
+      colorTheme: n,
       inputElement: /* @__PURE__ */ a(
-        h,
+        b,
         {
           ref: p,
           type: e,
-          value: t ?? "",
-          $renderAs: r,
+          value: r ?? "",
+          $renderAs: t,
           $size: i,
           disabled: s,
-          $isTransparent: n,
-          ...I
+          $isTransparent: o,
+          $colorTheme: n,
+          ...w
         }
       ),
       siblingElement: f
     }
   );
-}), y = x;
+}), z = g;
 export {
-  y as default
+  z as default
 };
 //# sourceMappingURL=text-input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input.tsx"],"sourcesContent":["import type { ITextInputProps } from './text-input-types';\nimport type { Ref } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport BaseInput from '../base-input/base-input';\nimport * as Styled from './text-input-styled';\n\nconst SIZE = 'regular';\n\nconst TextInput = forwardRef((props: ITextInputProps, ref: Ref<HTMLInputElement>) => {\n  const {\n    type,\n    label,\n    value,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    siblingElement,\n    errorMessage,\n    shape,\n    isTransparent,\n    ...rest\n  } = props;\n\n  return (\n    <BaseInput\n      renderAs={renderAs}\n      label={label}\n      stickyLabel={!!value || type === 'date'}\n      width={width}\n      widthX={widthX}\n      disabled={disabled}\n      willShowMessage={willShowMessage}\n      size={SIZE}\n      shape={shape}\n      errorMessage={errorMessage}\n      isTransparent={isTransparent}\n      inputElement={\n        <Styled.Input\n          ref={ref}\n          type={type}\n          value={value ?? ''}\n          $renderAs={renderAs}\n          $size={SIZE}\n          disabled={disabled}\n          $isTransparent={isTransparent}\n          {...rest}\n        />\n      }\n      siblingElement={siblingElement}\n    />\n  );\n});\n\nexport default TextInput;\n"],"names":["SIZE","TextInput","forwardRef","props","ref","type","label","value","renderAs","width","widthX","disabled","willShowMessage","siblingElement","errorMessage","shape","isTransparent","rest","jsx","BaseInput","Styled.Input","TextInput$1"],"mappings":";;;;AAQA,MAAMA,IAAO,WAEPC,IAAYC,EAAW,CAACC,GAAwBC,MAA+B;AAC7E,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAd;AAGF,SAAA,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAAX;AAAA,MACA,OAAAF;AAAA,MACA,aAAa,CAAC,CAACC,KAASF,MAAS;AAAA,MACjC,OAAAI;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,MAAMZ;AAAA,MACN,OAAAe;AAAA,MACA,cAAAD;AAAA,MACA,eAAAE;AAAA,MACA,cACE,gBAAAE;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,KAAAhB;AAAA,UACA,MAAAC;AAAA,UACA,OAAOE,KAAS;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOR;AAAA,UACP,UAAAW;AAAA,UACA,gBAAgBK;AAAA,UACf,GAAGC;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,gBAAAJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAEDQ,IAAepB;"}
+{"version":3,"file":"text-input.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input.tsx"],"sourcesContent":["import type { ITextInputProps } from './text-input-types';\nimport type { Ref } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport BaseInput from '../base-input/base-input';\nimport * as Styled from './text-input-styled';\n\nconst SIZE = 'regular';\n\nconst TextInput = forwardRef((props: ITextInputProps, ref: Ref<HTMLInputElement>) => {\n  const {\n    type,\n    label,\n    value,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    siblingElement,\n    errorMessage,\n    shape,\n    isTransparent,\n    colorTheme,\n    ...rest\n  } = props;\n\n  return (\n    <BaseInput\n      renderAs={renderAs}\n      label={label}\n      stickyLabel={!!value || type === 'date'}\n      width={width}\n      widthX={widthX}\n      disabled={disabled}\n      willShowMessage={willShowMessage}\n      size={SIZE}\n      shape={shape}\n      errorMessage={errorMessage}\n      isTransparent={isTransparent}\n      colorTheme={colorTheme}\n      inputElement={\n        <Styled.Input\n          ref={ref}\n          type={type}\n          value={value ?? ''}\n          $renderAs={renderAs}\n          $size={SIZE}\n          disabled={disabled}\n          $isTransparent={isTransparent}\n          $colorTheme={colorTheme}\n          {...rest}\n        />\n      }\n      siblingElement={siblingElement}\n    />\n  );\n});\n\nexport default TextInput;\n"],"names":["SIZE","TextInput","forwardRef","props","ref","type","label","value","renderAs","width","widthX","disabled","willShowMessage","siblingElement","errorMessage","shape","isTransparent","colorTheme","rest","jsx","BaseInput","Styled.Input","TextInput$1"],"mappings":";;;;AAQA,MAAMA,IAAO,WAEPC,IAAYC,EAAW,CAACC,GAAwBC,MAA+B;AAC7E,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAf;AAGF,SAAA,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAAZ;AAAA,MACA,OAAAF;AAAA,MACA,aAAa,CAAC,CAACC,KAASF,MAAS;AAAA,MACjC,OAAAI;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,MAAMZ;AAAA,MACN,OAAAe;AAAA,MACA,cAAAD;AAAA,MACA,eAAAE;AAAA,MACA,YAAAC;AAAA,MACA,cACE,gBAAAE;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,KAAAjB;AAAA,UACA,MAAAC;AAAA,UACA,OAAOE,KAAS;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOR;AAAA,UACP,UAAAW;AAAA,UACA,gBAAgBK;AAAA,UAChB,aAAaC;AAAA,UACZ,GAAGC;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,gBAAAL;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAEDS,IAAerB;"}

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

@@ -1,5 +1,5 @@
 const n = (a) => {
-  const e = {
+  const o = {
     regular: {
       height: a * 2.75,
       // height of input
@@ -51,7 +51,7 @@ const n = (a) => {
       iconPadding: a * 0.5
       // padding between left of icon and input
     }
-  }, i = {
+  }, e = {
     valueColorName: {
       inactive: "BLACK",
       active: "BLACK",
@@ -76,8 +76,8 @@ const n = (a) => {
       disabled: 0.5,
       enabled: 1
     }
-  }, o = {
-    ...i,
+  }, l = {
+    ...e,
     backgroundColorName: "GREY_1",
     optionHoverColorName: "WHITE",
     borderColorName: {
@@ -86,11 +86,11 @@ const n = (a) => {
       disabled: "TRANSPARENT"
     }
   }, d = {
-    primary: i,
-    secondary: o,
+    primary: e,
+    secondary: l,
     success: {
-      opacity: i.opacity,
-      valueColorName: i.valueColorName,
+      opacity: e.opacity,
+      valueColorName: e.valueColorName,
       borderColorName: {
         inactive: "GREEN_5",
         active: "GREEN_5",
@@ -108,8 +108,8 @@ const n = (a) => {
       }
     },
     error: {
-      opacity: i.opacity,
-      valueColorName: i.valueColorName,
+      opacity: e.opacity,
+      valueColorName: e.valueColorName,
       borderColorName: {
         inactive: "RED",
         active: "RED",
@@ -126,8 +126,81 @@ const n = (a) => {
         disabled: "RED"
       }
     }
+  }, i = {
+    ...e,
+    labelBackgroundColorName: "TRANSPARENT",
+    backgroundColorName: "TRANSPARENT",
+    valueColorName: {
+      inactive: "WHITE",
+      active: "WHITE",
+      disabled: "WHITE_T_10"
+    },
+    borderColorName: {
+      inactive: "WHITE_T_15",
+      active: "WHITE",
+      disabled: "WHITE_T_15"
+    },
+    labelColorName: {
+      inactive: "WHITE_T_60",
+      active: "WHITE_T_60",
+      disabled: "WHITE_T_15"
+    }
+  }, r = {
+    ...i,
+    backgroundColorName: "WHITE_T_60",
+    optionHoverColorName: "WHITE",
+    borderColorName: {
+      active: "TRANSPARENT",
+      inactive: "TRANSPARENT",
+      disabled: "TRANSPARENT"
+    }
+  }, N = {
+    primary: i,
+    secondary: r,
+    success: {
+      labelBackgroundColorName: "TRANSPARENT",
+      backgroundColorName: "TRANSPARENT",
+      opacity: i.opacity,
+      valueColorName: i.valueColorName,
+      borderColorName: {
+        inactive: "GREEN_4",
+        active: "GREEN_4",
+        disabled: "GREEN_4"
+      },
+      labelColorName: {
+        inactive: "GREEN_4",
+        active: "GREEN_4",
+        disabled: "GREEN_4"
+      },
+      messageColorName: {
+        inactive: "GREEN_4",
+        active: "GREEN_4",
+        disabled: "GREEN_4"
+      }
+    },
+    error: {
+      labelBackgroundColorName: "TRANSPARENT",
+      backgroundColorName: "TRANSPARENT",
+      opacity: i.opacity,
+      valueColorName: i.valueColorName,
+      borderColorName: {
+        inactive: "ORANGE_4",
+        active: "ORANGE_4",
+        disabled: "ORANGE_4"
+      },
+      labelColorName: {
+        inactive: "ORANGE_4",
+        active: "ORANGE_4",
+        disabled: "ORANGE_4"
+      },
+      messageColorName: {
+        inactive: "ORANGE_4",
+        active: "ORANGE_4",
+        disabled: "ORANGE_4"
+      }
+    }
   };
-  return { sizes: e, variants: d };
+  return { sizes: o, variants: d, darkVariants: N };
 };
 export {
   n as default

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../../src/features/ui/theme/input.ts"],"sourcesContent":["import type { IInputSizeConfig, IInputVariantConfig, TInputSizes, TInputVariants } from '../types';\n\ninterface IGetInputConfig {\n  (gutter: number): {\n    sizes: Record<TInputSizes, IInputSizeConfig>;\n    variants: Record<TInputVariants, IInputVariantConfig>;\n  };\n}\nconst getInputConfig: IGetInputConfig = gutter => {\n  const sizes: Record<TInputSizes, IInputSizeConfig> = {\n    regular: {\n      height: gutter * 2.75, // height of input\n      marginTop: gutter * 0.5, // extra space when label is on top of input\n      marginBottom: gutter * 1.5, // extra space for message comes on bottom of input\n      paddingLeft: gutter,\n      paddingRight: gutter * 0.75,\n      borderRadius: gutter * 0.5,\n      inputTextVariant: 'body1',\n      labelTextVariant: 'body1',\n      messageTextVariant: 'body3',\n      iconsize: gutter * 1.5,\n      iconPadding: gutter, // padding between left of icon and input\n    },\n    small: {\n      height: gutter * 2.125, // height of input\n      marginTop: gutter * 0.5, // extra space when label is on top of input\n      marginBottom: 0, // extra space for message comes on bottom of input\n      paddingLeft: gutter * 0.5,\n      paddingRight: gutter * 0.5,\n      borderRadius: gutter * 0.5,\n      inputTextVariant: 'body3',\n      labelTextVariant: 'body3',\n      messageTextVariant: 'body3',\n      iconsize: gutter * 1.25,\n      iconPadding: gutter * 0.5, // padding between left of icon and input\n    },\n    xsmall: {\n      height: gutter * 1.75, // height of input\n      marginTop: 0, // extra space when label is on top of input\n      marginBottom: 0, // extra space for message comes on bottom of input\n      paddingLeft: gutter * 0.75,\n      paddingRight: gutter * 0.5,\n      borderRadius: gutter * 0.5,\n      inputTextVariant: 'body3',\n      labelTextVariant: 'body3',\n      messageTextVariant: 'body3',\n      iconsize: gutter,\n      iconPadding: gutter * 0.5, // padding between left of icon and input\n    },\n  };\n  const primaryVariant: IInputVariantConfig = {\n    valueColorName: {\n      inactive: 'BLACK',\n      active: 'BLACK',\n      disabled: 'BLACK_50',\n    },\n    borderColorName: {\n      inactive: 'BLACK_T_15',\n      active: 'BLACK_T_87',\n      disabled: 'BLACK_T_15',\n    },\n    labelColorName: {\n      inactive: 'BLACK_75',\n      active: 'BLACK',\n      disabled: 'BLACK_50',\n    },\n    messageColorName: {\n      inactive: 'BLACK_75',\n      active: 'BLACK_75',\n      disabled: 'BLACK_50',\n    },\n    opacity: {\n      disabled: 0.5,\n      enabled: 1,\n    },\n  };\n\n  const secondaryVariant: IInputVariantConfig = {\n    ...primaryVariant,\n    backgroundColorName: 'GREY_1',\n    optionHoverColorName: 'WHITE',\n    borderColorName: {\n      active: 'TRANSPARENT',\n      inactive: 'TRANSPARENT',\n      disabled: 'TRANSPARENT',\n    },\n  };\n\n  const variants: Record<TInputVariants, IInputVariantConfig> = {\n    primary: primaryVariant,\n    secondary: secondaryVariant,\n    success: {\n      opacity: primaryVariant.opacity,\n      valueColorName: primaryVariant.valueColorName,\n      borderColorName: {\n        inactive: 'GREEN_5',\n        active: 'GREEN_5',\n        disabled: 'GREEN_5',\n      },\n      labelColorName: {\n        inactive: 'GREEN_5',\n        active: 'GREEN_5',\n        disabled: 'GREEN_5',\n      },\n      messageColorName: {\n        inactive: 'GREEN_5',\n        active: 'GREEN_5',\n        disabled: 'GREEN_5',\n      },\n    },\n    error: {\n      opacity: primaryVariant.opacity,\n      valueColorName: primaryVariant.valueColorName,\n      borderColorName: {\n        inactive: 'RED',\n        active: 'RED',\n        disabled: 'RED',\n      },\n      labelColorName: {\n        inactive: 'RED',\n        active: 'RED',\n        disabled: 'RED',\n      },\n      messageColorName: {\n        inactive: 'RED',\n        active: 'RED',\n        disabled: 'RED',\n      },\n    },\n  };\n\n  return { sizes, variants };\n};\n\nexport default getInputConfig;\n"],"names":["getInputConfig","gutter","sizes","primaryVariant","secondaryVariant","variants"],"mappings":"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"}
+{"version":3,"file":"input.js","sources":["../../../../src/features/ui/theme/input.ts"],"sourcesContent":["import type { IInputSizeConfig, IInputVariantConfig, TInputSizes, TInputVariants } from '../types';\n\ninterface IGetInputConfig {\n  (gutter: number): {\n    sizes: Record<TInputSizes, IInputSizeConfig>;\n    variants: Record<TInputVariants, IInputVariantConfig>;\n    darkVariants: Record<TInputVariants, IInputVariantConfig>;\n  };\n}\nconst getInputConfig: IGetInputConfig = gutter => {\n  const sizes: Record<TInputSizes, IInputSizeConfig> = {\n    regular: {\n      height: gutter * 2.75, // height of input\n      marginTop: gutter * 0.5, // extra space when label is on top of input\n      marginBottom: gutter * 1.5, // extra space for message comes on bottom of input\n      paddingLeft: gutter,\n      paddingRight: gutter * 0.75,\n      borderRadius: gutter * 0.5,\n      inputTextVariant: 'body1',\n      labelTextVariant: 'body1',\n      messageTextVariant: 'body3',\n      iconsize: gutter * 1.5,\n      iconPadding: gutter, // padding between left of icon and input\n    },\n    small: {\n      height: gutter * 2.125, // height of input\n      marginTop: gutter * 0.5, // extra space when label is on top of input\n      marginBottom: 0, // extra space for message comes on bottom of input\n      paddingLeft: gutter * 0.5,\n      paddingRight: gutter * 0.5,\n      borderRadius: gutter * 0.5,\n      inputTextVariant: 'body3',\n      labelTextVariant: 'body3',\n      messageTextVariant: 'body3',\n      iconsize: gutter * 1.25,\n      iconPadding: gutter * 0.5, // padding between left of icon and input\n    },\n    xsmall: {\n      height: gutter * 1.75, // height of input\n      marginTop: 0, // extra space when label is on top of input\n      marginBottom: 0, // extra space for message comes on bottom of input\n      paddingLeft: gutter * 0.75,\n      paddingRight: gutter * 0.5,\n      borderRadius: gutter * 0.5,\n      inputTextVariant: 'body3',\n      labelTextVariant: 'body3',\n      messageTextVariant: 'body3',\n      iconsize: gutter,\n      iconPadding: gutter * 0.5, // padding between left of icon and input\n    },\n  };\n  const primaryVariant: IInputVariantConfig = {\n    valueColorName: {\n      inactive: 'BLACK',\n      active: 'BLACK',\n      disabled: 'BLACK_50',\n    },\n    borderColorName: {\n      inactive: 'BLACK_T_15',\n      active: 'BLACK_T_87',\n      disabled: 'BLACK_T_15',\n    },\n    labelColorName: {\n      inactive: 'BLACK_75',\n      active: 'BLACK',\n      disabled: 'BLACK_50',\n    },\n    messageColorName: {\n      inactive: 'BLACK_75',\n      active: 'BLACK_75',\n      disabled: 'BLACK_50',\n    },\n    opacity: {\n      disabled: 0.5,\n      enabled: 1,\n    },\n  };\n\n  const secondaryVariant: IInputVariantConfig = {\n    ...primaryVariant,\n    backgroundColorName: 'GREY_1',\n    optionHoverColorName: 'WHITE',\n    borderColorName: {\n      active: 'TRANSPARENT',\n      inactive: 'TRANSPARENT',\n      disabled: 'TRANSPARENT',\n    },\n  };\n\n  const variants: Record<TInputVariants, IInputVariantConfig> = {\n    primary: primaryVariant,\n    secondary: secondaryVariant,\n    success: {\n      opacity: primaryVariant.opacity,\n      valueColorName: primaryVariant.valueColorName,\n      borderColorName: {\n        inactive: 'GREEN_5',\n        active: 'GREEN_5',\n        disabled: 'GREEN_5',\n      },\n      labelColorName: {\n        inactive: 'GREEN_5',\n        active: 'GREEN_5',\n        disabled: 'GREEN_5',\n      },\n      messageColorName: {\n        inactive: 'GREEN_5',\n        active: 'GREEN_5',\n        disabled: 'GREEN_5',\n      },\n    },\n    error: {\n      opacity: primaryVariant.opacity,\n      valueColorName: primaryVariant.valueColorName,\n      borderColorName: {\n        inactive: 'RED',\n        active: 'RED',\n        disabled: 'RED',\n      },\n      labelColorName: {\n        inactive: 'RED',\n        active: 'RED',\n        disabled: 'RED',\n      },\n      messageColorName: {\n        inactive: 'RED',\n        active: 'RED',\n        disabled: 'RED',\n      },\n    },\n  };\n\n  const primaryDarkVariant: IInputVariantConfig = {\n    ...primaryVariant,\n    labelBackgroundColorName: 'TRANSPARENT',\n    backgroundColorName: 'TRANSPARENT',\n    valueColorName: {\n      inactive: 'WHITE',\n      active: 'WHITE',\n      disabled: 'WHITE_T_10',\n    },\n    borderColorName: {\n      inactive: 'WHITE_T_15',\n      active: 'WHITE',\n      disabled: 'WHITE_T_15',\n    },\n    labelColorName: {\n      inactive: 'WHITE_T_60',\n      active: 'WHITE_T_60',\n      disabled: 'WHITE_T_15',\n    },\n  };\n\n  const secondaryDarkVariant: IInputVariantConfig = {\n    ...primaryDarkVariant,\n    backgroundColorName: 'WHITE_T_60',\n    optionHoverColorName: 'WHITE',\n    borderColorName: {\n      active: 'TRANSPARENT',\n      inactive: 'TRANSPARENT',\n      disabled: 'TRANSPARENT',\n    },\n  };\n\n  const darkVariants: Record<TInputVariants, IInputVariantConfig> = {\n    primary: primaryDarkVariant,\n    secondary: secondaryDarkVariant,\n    success: {\n      labelBackgroundColorName: 'TRANSPARENT',\n      backgroundColorName: 'TRANSPARENT',\n      opacity: primaryDarkVariant.opacity,\n      valueColorName: primaryDarkVariant.valueColorName,\n      borderColorName: {\n        inactive: 'GREEN_4',\n        active: 'GREEN_4',\n        disabled: 'GREEN_4',\n      },\n      labelColorName: {\n        inactive: 'GREEN_4',\n        active: 'GREEN_4',\n        disabled: 'GREEN_4',\n      },\n      messageColorName: {\n        inactive: 'GREEN_4',\n        active: 'GREEN_4',\n        disabled: 'GREEN_4',\n      },\n    },\n    error: {\n      labelBackgroundColorName: 'TRANSPARENT',\n      backgroundColorName: 'TRANSPARENT',\n      opacity: primaryDarkVariant.opacity,\n      valueColorName: primaryDarkVariant.valueColorName,\n      borderColorName: {\n        inactive: 'ORANGE_4',\n        active: 'ORANGE_4',\n        disabled: 'ORANGE_4',\n      },\n      labelColorName: {\n        inactive: 'ORANGE_4',\n        active: 'ORANGE_4',\n        disabled: 'ORANGE_4',\n      },\n      messageColorName: {\n        inactive: 'ORANGE_4',\n        active: 'ORANGE_4',\n        disabled: 'ORANGE_4',\n      },\n    },\n  };\n\n  return { sizes, variants, darkVariants };\n};\n\nexport default getInputConfig;\n"],"names":["getInputConfig","gutter","sizes","primaryVariant","secondaryVariant","variants","primaryDarkVariant","secondaryDarkVariant","darkVariants"],"mappings":"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"}

package/dist/index.d.ts

@@ -502,7 +502,7 @@ declare interface IAccountSelectorViewProps {
     userAccounts: {
         id: string;
         username: string;
-        user_avatar?: IAvatarLayer[];
+        user_avatar?: IAvatarLayer[] | null;
     }[];
     onSelect: (accountId: string) => void;
     onAddNew: () => void;
@@ -607,6 +607,7 @@ declare interface IBaseInputProps {
     mandatory?: boolean;
     shape?: TInputShapes;
     isTransparent?: boolean;
+    colorTheme?: 'light' | 'dark';
 }
 
 declare interface IBaseLeaderboardDetails {
@@ -912,15 +913,15 @@ declare interface ICircularStepsProps {
 
 declare interface ICircularStepWrapperProps {
     children: ReactNode;
-    onGoBack?: () => void;
-    onNext?: () => void;
-    label?: string;
-    showNext: boolean;
-    showPrevious: boolean;
     animation: string;
     introFrames: [number, number];
     outroFrames: [number, number];
-    isNextLoading: boolean;
+    onGoBack?: () => void;
+    onNext?: () => void;
+    label?: string;
+    showNext?: boolean;
+    showPrevious?: boolean;
+    isNextLoading?: boolean;
 }
 
 declare interface IClaimUserAccountProps {
@@ -1089,6 +1090,7 @@ declare interface ICustomInputProps {
     helperText?: string;
     actionElement?: ReactNode;
     isLoading?: boolean;
+    isValid?: boolean;
 }
 
 declare interface ICustomVideoProps extends React_2.DetailedHTMLProps<React_2.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> {
@@ -1248,6 +1250,7 @@ declare interface IGetInputConfig {
     (gutter: number): {
         sizes: Record<TInputSizes, IInputSizeConfig>;
         variants: Record<TInputVariants, IInputVariantConfig>;
+        darkVariants: Record<TInputVariants, IInputVariantConfig>;
     };
 }
 
@@ -1346,6 +1349,15 @@ export declare interface IInputSizeConfig {
     iconPadding: number;
 }
 
+declare interface IInputStatusIconProps {
+    isLoading: boolean;
+    isValid: boolean;
+    isError: boolean;
+    size?: number;
+    successColor?: TColorNames;
+    errorColor?: TColorNames;
+}
+
 export declare interface IInputVariantConfig {
     valueColorName: {
         inactive: TColorNames;
@@ -1373,6 +1385,7 @@ export declare interface IInputVariantConfig {
     };
     backgroundColorName?: TColorNames;
     optionHoverColorName?: TColorNames;
+    labelBackgroundColorName?: TColorNames;
 }
 
 declare interface IIsOkayTypeQuestion {
@@ -2149,6 +2162,8 @@ export declare const Info2Icon: React_2.FC<React_2.SVGProps<SVGSVGElement>>;
 
 export declare const InfoIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
+export declare const InputStatusIcon: React.FC<IInputStatusIconProps>;
+
 export declare interface INudgeProps {
     nudge: 'click';
     content: ReactNode;
@@ -2713,6 +2728,17 @@ export declare interface ISignUpProps {
     onSignupStepsComplete: (data: IUpdateUserPayloadDal | ICreateUserResponseDal | null) => void;
 }
 
+declare interface ISocialAccountNotFoundProps {
+    onRetryLogin: () => void;
+    onGoToSignup: () => void;
+}
+
+declare interface ISocialLoginMethodsProps {
+    onGoogleLogin: () => void;
+    onAppleLogin: () => void;
+    loadingProvider: TSocialAuthProvider | null;
+}
+
 export declare const isOkayTypeQuestion: IIsOkayTypeQuestion;
 
 export declare enum IStatsToAwardErrorCode {
@@ -2808,6 +2834,13 @@ declare interface ISyncableWebGameProps {
     enableSync?: boolean;
 }
 
+export declare type ITabConfig<T extends string = string> = Record<T, ITabItem>;
+
+declare interface ITabItem {
+    label: string;
+    component?: JSX.Element;
+}
+
 export declare interface ITable {
     tableList: ITableInfo[];
     infiniteModeHighScore: number;
@@ -2871,6 +2904,12 @@ export declare interface ITabSizeConfig {
     textVariant: TTextVariants;
 }
 
+declare interface ITabsProps<T extends string> {
+    selectedTab: T;
+    onChange: (tab: T) => void;
+    tabs: ITabConfig<T>;
+}
+
 export declare interface ITabVariantConfig {
     backgroundColorName: {
         inactive: TColorNames;
@@ -3215,8 +3254,8 @@ declare interface IUserChapterProgressProps {
 
 declare interface IUserTypeSelectorProps {
     onNext: () => void;
-    onUserTypeChange: (id: TSignupUserType) => void;
-    userType: TSignupUserType;
+    onUserTypeChange: (id: TAuthUserType) => void;
+    userType: TAuthUserType;
 }
 
 declare interface IUseTrialSessionMessageBroker {
@@ -3615,6 +3654,7 @@ export declare const LOTTIE: {
     DOB: string;
     EASY: string;
     ELITE_CIRCLE: string;
+    ERROR: string;
     ERROR_LOTTIE: string;
     FAMILIAR1X: string;
     FIFTEEN_MIN_CLOCK: string;
@@ -4058,6 +4098,10 @@ export declare const Skip2Icon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 export declare const SkipIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
+export declare const SocialAccountNotFound: ({ onRetryLogin, onGoToSignup }: ISocialAccountNotFoundProps) => JSX_2.Element;
+
+export declare const SocialLoginMethods: FC<ISocialLoginMethodsProps>;
+
 export declare const SplashScreen: ({ animationCompleted }: {
     animationCompleted: () => void;
 }) => JSX_2.Element;
@@ -4127,6 +4171,8 @@ declare const TAB_CODES: {
 
 export declare const TabComponent: React_2.FC<ITabProps>;
 
+export declare function Tabs<T extends string>({ selectedTab, onChange, tabs }: ITabsProps<T>): JSX_2.Element;
+
 export declare type TAction = EventToPayload<TInclassMessage>;
 
 declare type TActionListenerOptions = {
@@ -4155,6 +4201,8 @@ export declare type TArrowTooltipVariants = 'primary' | 'secondary';
 
 export declare type TAuthProvider = 'email' | 'phone';
 
+export declare type TAuthUserType = 'student' | 'parent';
+
 declare type TBadgeData = {
     acknowledged_on: number | null;
     animation_url: string;
@@ -5018,8 +5066,6 @@ export declare type TSheetsSection = 'core_lessons' | 'supplementary_sheets' | '
 
 declare type TSheetStateProps = 'LOCKED' | 'NOT_STARTED' | 'IN_PROGRESS' | 'FAMILIAR' | 'PROFICIENT' | 'MASTERED' | 'COMPLETED' | 'RE_ATTEMPT';
 
-export declare type TSignupUserType = 'student' | 'parent';
-
 export declare type TSkillStatus = 'pending' | 'completed';
 
 export declare type TSocialAuthProvider = 'google' | 'apple';