@cuemath/leap 2.9.10 → 2.9.11

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

@@ -1,8 +1,8 @@
 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 T from "../base-input/base-input.js";
+import { Input as b } from "./text-input-styled.js";
+const i = "regular", g = I((o, p) => {
   const {
     type: e,
     label: l,
@@ -14,12 +14,13 @@ const i = "regular", x = b((o, p) => {
     willShowMessage: d,
     siblingElement: f,
     errorMessage: c,
-    shape: w,
+    shape: h,
     isTransparent: n,
-    ...I
+    helperText: w,
+    ...x
   } = o;
   return /* @__PURE__ */ a(
-    g,
+    T,
     {
       renderAs: r,
       label: l,
@@ -29,11 +30,12 @@ const i = "regular", x = b((o, p) => {
       disabled: s,
       willShowMessage: d,
       size: i,
-      shape: w,
+      shape: h,
       errorMessage: c,
+      helperText: w,
       isTransparent: n,
       inputElement: /* @__PURE__ */ a(
-        h,
+        b,
         {
           ref: p,
           type: e,
@@ -42,14 +44,14 @@ const i = "regular", x = b((o, p) => {
           $size: i,
           disabled: s,
           $isTransparent: n,
-          ...I
+          ...x
         }
       ),
       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    helperText,\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      helperText={helperText}\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","helperText","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,YAAAG;AAAA,MACA,eAAAD;AAAA,MACA,cACE,gBAAAG;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,UACf,GAAGE;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,gBAAAL;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAEDS,IAAerB;"}

package/dist/features/ui/lottie-animation/lottie-animation.js

@@ -1,51 +1,60 @@
-import { jsx as L } from "react/jsx-runtime";
-import w from "lottie-web";
-import { memo as y, forwardRef as b, useRef as c, useImperativeHandle as A, useEffect as E } from "react";
+import { jsx as E } from "react/jsx-runtime";
+import g from "lottie-web";
+import { memo as w, forwardRef as y, useRef as u, useImperativeHandle as b, useEffect as A } from "react";
 import I from "../layout/flex-view.js";
 import { fetchLottie as $ } from "./helper.js";
-const x = b((p, h) => {
+const x = y((v, p) => {
   const {
-    src: s,
-    width: v = "100%",
-    height: g = "100%",
-    settings: u,
-    eventListener: r,
-    onRender: i,
-    animateOnIntersect: o
-  } = p, n = c(null), t = c(null), a = c(null);
-  return A(
-    h,
+    src: m,
+    width: L = "100%",
+    height: h = "100%",
+    settings: l,
+    eventListener: n,
+    onRender: a,
+    animateOnIntersect: c
+  } = v, o = u(null), r = u(null), s = u(null);
+  return b(
+    p,
     () => ({
-      playSegments: (m, e) => {
-        t.current && t.current.playSegments(m, e);
+      playSegments: (i, e) => {
+        var t;
+        return (t = r.current) == null ? void 0 : t.playSegments(i, e);
+      },
+      addEventListener: (i, e) => {
+        var t;
+        return (t = r.current) == null ? void 0 : t.addEventListener(i, e);
+      },
+      removeEventListener: (i, e) => {
+        var t;
+        return (t = r.current) == null ? void 0 : t.removeEventListener(i, e);
       }
     }),
     []
-  ), E(() => ((async () => {
+  ), A(() => ((async () => {
     try {
-      const e = await $(s);
-      n.current && (t.current = w.loadAnimation({
-        container: n.current,
+      const e = await $(m);
+      o.current && (r.current = g.loadAnimation({
+        container: o.current,
         animationData: e,
         renderer: "svg",
         loop: !0,
         autoplay: !0,
-        ...u
-      }), o && (a.current = new IntersectionObserver(
-        ([l]) => {
+        ...l
+      }), c && (s.current = new IntersectionObserver(
+        ([t]) => {
           var f, d;
-          l && l.isIntersecting ? (f = t.current) == null || f.play() : (d = t.current) == null || d.pause();
+          t && t.isIntersecting ? (f = r.current) == null || f.play() : (d = r.current) == null || d.pause();
         },
         { threshold: 0 }
-      ), n.current && a.current.observe(n.current)), i == null || i(), r && t.current.addEventListener(r.name, r.callback));
+      ), o.current && s.current.observe(o.current)), a == null || a(), n && r.current.addEventListener(n.name, n.callback));
     } catch (e) {
       throw Error(`Error loading Lottie animation: ${e}`);
     }
   })(), () => {
     var e;
-    t.current && (r && t.current.removeEventListener(r.name, r.callback), o && ((e = a.current) == null || e.disconnect()), t.current.destroy());
-  }), [s, r, i, o, u]), /* @__PURE__ */ L(I, { ref: n, $width: v, $height: g });
-}), F = y(x);
+    r.current && (n && r.current.removeEventListener(n.name, n.callback), c && ((e = s.current) == null || e.disconnect()), r.current.destroy());
+  }), [m, n, a, c, l]), /* @__PURE__ */ E(I, { ref: o, $width: L, $height: h });
+}), F = w(x);
 export {
   F as default
 };

package/dist/features/ui/lottie-animation/lottie-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"lottie-animation.js","sources":["../../../../src/features/ui/lottie-animation/lottie-animation.tsx"],"sourcesContent":["import type { ILottieAnimationProps, ILottieAnimationRef } from './types';\nimport type { AnimationItem, AnimationSegment } from 'lottie-web';\n\nimport lottie from 'lottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport { fetchLottie } from './helper';\n\nconst LottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n  const {\n    src,\n    width = '100%',\n    height = '100%',\n    settings,\n    eventListener,\n    onRender,\n    animateOnIntersect,\n  } = props;\n\n  const container = useRef<HTMLDivElement>(null);\n  const animationInstance = useRef<AnimationItem | null>(null);\n  const intersectionObserver = useRef<IntersectionObserver | null>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      playSegments: (segments: AnimationSegment, forceFlag?: boolean) => {\n        if (animationInstance.current) {\n          animationInstance.current.playSegments(segments, forceFlag);\n        }\n      },\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    const loadAnimation = async () => {\n      try {\n        const animationData = await fetchLottie(src);\n\n        if (container.current) {\n          animationInstance.current = lottie.loadAnimation({\n            container: container.current,\n            animationData,\n            renderer: 'svg',\n            loop: true,\n            autoplay: true,\n            ...settings,\n          });\n\n          if (animateOnIntersect) {\n            intersectionObserver.current = new IntersectionObserver(\n              ([entry]) => {\n                if (entry && entry.isIntersecting) {\n                  animationInstance.current?.play();\n                } else {\n                  animationInstance.current?.pause();\n                }\n              },\n              { threshold: 0 },\n            );\n\n            if (container.current) {\n              intersectionObserver.current.observe(container.current);\n            }\n          }\n\n          onRender?.();\n          if (eventListener) {\n            animationInstance.current.addEventListener(eventListener.name, eventListener.callback);\n          }\n        }\n      } catch (error) {\n        throw Error(`Error loading Lottie animation: ${error}`);\n      }\n    };\n\n    loadAnimation();\n\n    return () => {\n      if (animationInstance.current) {\n        if (eventListener) {\n          animationInstance.current.removeEventListener(eventListener.name, eventListener.callback);\n        }\n\n        if (animateOnIntersect) {\n          intersectionObserver.current?.disconnect();\n        }\n        animationInstance.current.destroy();\n      }\n    };\n  }, [src, eventListener, onRender, animateOnIntersect, settings]);\n\n  return <FlexView ref={container} $width={width} $height={height} />;\n});\n\nexport default memo(LottieAnimation);\n"],"names":["LottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListener","onRender","animateOnIntersect","container","useRef","animationInstance","intersectionObserver","useImperativeHandle","segments","forceFlag","useEffect","animationData","fetchLottie","lottie","entry","_a","_b","error","FlexView","LottieAnimation$1","memo"],"mappings":";;;;;AASA,MAAMA,IAAkBC,EAAuD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,EACE,IAAAR,GAEES,IAAYC,EAAuB,IAAI,GACvCC,IAAoBD,EAA6B,IAAI,GACrDE,IAAuBF,EAAoC,IAAI;AAErE,SAAAG;AAAA,IACEZ;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACa,GAA4BC,MAAwB;AACjE,QAAIJ,EAAkB,WACFA,EAAA,QAAQ,aAAaG,GAAUC,CAAS;AAAA,MAE9D;AAAA,IAAA;AAAA,IAEF,CAAC;AAAA,EAAA,GAGHC,EAAU,QACc,YAAY;AAC5B,QAAA;AACI,YAAAC,IAAgB,MAAMC,EAAYhB,CAAG;AAE3C,MAAIO,EAAU,YACME,EAAA,UAAUQ,EAAO,cAAc;AAAA,QAC/C,WAAWV,EAAU;AAAA,QACrB,eAAAQ;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,QACN,UAAU;AAAA,QACV,GAAGZ;AAAA,MAAA,CACJ,GAEGG,MACFI,EAAqB,UAAU,IAAI;AAAA,QACjC,CAAC,CAACQ,CAAK,MAAM;;AACP,UAAAA,KAASA,EAAM,kBACjBC,IAAAV,EAAkB,YAAlB,QAAAU,EAA2B,UAE3BC,IAAAX,EAAkB,YAAlB,QAAAW,EAA2B;AAAA,QAE/B;AAAA,QACA,EAAE,WAAW,EAAE;AAAA,MAAA,GAGbb,EAAU,WACSG,EAAA,QAAQ,QAAQH,EAAU,OAAO,IAI/CF,KAAA,QAAAA,KACPD,KACFK,EAAkB,QAAQ,iBAAiBL,EAAc,MAAMA,EAAc,QAAQ;AAAA,aAGlFiB,GAAO;AACR,YAAA,MAAM,mCAAmCA,CAAK,EAAE;AAAA,IACxD;AAAA,EAAA,MAKK,MAAM;;AACX,IAAIZ,EAAkB,YAChBL,KACFK,EAAkB,QAAQ,oBAAoBL,EAAc,MAAMA,EAAc,QAAQ,GAGtFE,OACFa,IAAAT,EAAqB,YAArB,QAAAS,EAA8B,eAEhCV,EAAkB,QAAQ;EAC5B,IAED,CAACT,GAAKI,GAAeC,GAAUC,GAAoBH,CAAQ,CAAC,qBAEvDmB,GAAS,EAAA,KAAKf,GAAW,QAAQN,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEcqB,IAAAC,EAAK5B,CAAe;"}
+{"version":3,"file":"lottie-animation.js","sources":["../../../../src/features/ui/lottie-animation/lottie-animation.tsx"],"sourcesContent":["import type { ILottieAnimationProps, ILottieAnimationRef } from './types';\nimport type { AnimationEventName, AnimationItem, AnimationSegment } from 'lottie-web';\n\nimport lottie from 'lottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport { fetchLottie } from './helper';\n\nconst LottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n  const {\n    src,\n    width = '100%',\n    height = '100%',\n    settings,\n    eventListener,\n    onRender,\n    animateOnIntersect,\n  } = props;\n\n  const container = useRef<HTMLDivElement>(null);\n  const animationInstance = useRef<AnimationItem | null>(null);\n  const intersectionObserver = useRef<IntersectionObserver | null>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      playSegments: (segments: AnimationSegment, forceFlag?: boolean) =>\n        animationInstance.current?.playSegments(segments, forceFlag),\n      addEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.addEventListener(eventName as AnimationEventName, callback),\n      removeEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.removeEventListener(eventName as AnimationEventName, callback),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    const loadAnimation = async () => {\n      try {\n        const animationData = await fetchLottie(src);\n\n        if (container.current) {\n          animationInstance.current = lottie.loadAnimation({\n            container: container.current,\n            animationData,\n            renderer: 'svg',\n            loop: true,\n            autoplay: true,\n            ...settings,\n          });\n\n          if (animateOnIntersect) {\n            intersectionObserver.current = new IntersectionObserver(\n              ([entry]) => {\n                if (entry && entry.isIntersecting) {\n                  animationInstance.current?.play();\n                } else {\n                  animationInstance.current?.pause();\n                }\n              },\n              { threshold: 0 },\n            );\n\n            if (container.current) {\n              intersectionObserver.current.observe(container.current);\n            }\n          }\n\n          onRender?.();\n          if (eventListener) {\n            animationInstance.current.addEventListener(eventListener.name, eventListener.callback);\n          }\n        }\n      } catch (error) {\n        throw Error(`Error loading Lottie animation: ${error}`);\n      }\n    };\n\n    loadAnimation();\n\n    return () => {\n      if (animationInstance.current) {\n        if (eventListener) {\n          animationInstance.current.removeEventListener(eventListener.name, eventListener.callback);\n        }\n\n        if (animateOnIntersect) {\n          intersectionObserver.current?.disconnect();\n        }\n        animationInstance.current.destroy();\n      }\n    };\n  }, [src, eventListener, onRender, animateOnIntersect, settings]);\n\n  return <FlexView ref={container} $width={width} $height={height} />;\n});\n\nexport default memo(LottieAnimation);\n"],"names":["LottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListener","onRender","animateOnIntersect","container","useRef","animationInstance","intersectionObserver","useImperativeHandle","segments","forceFlag","_a","eventName","callback","useEffect","animationData","fetchLottie","lottie","entry","_b","error","FlexView","LottieAnimation$1","memo"],"mappings":";;;;;AASA,MAAMA,IAAkBC,EAAuD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,EACE,IAAAR,GAEES,IAAYC,EAAuB,IAAI,GACvCC,IAAoBD,EAA6B,IAAI,GACrDE,IAAuBF,EAAoC,IAAI;AAErE,SAAAG;AAAA,IACEZ;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACa,GAA4BC,MACzC;;AAAA,gBAAAC,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,aAAaF,GAAUC;AAAA;AAAA,MACpD,kBAAkB,CAACE,GAAmBC,MACpC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,iBAAiBC,GAAiCC;AAAA;AAAA,MAC/E,qBAAqB,CAACD,GAAmBC,MACvC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,oBAAoBC,GAAiCC;AAAA;AAAA,IAAQ;AAAA,IAE5F,CAAC;AAAA,EAAA,GAGHC,EAAU,QACc,YAAY;AAC5B,QAAA;AACI,YAAAC,IAAgB,MAAMC,EAAYnB,CAAG;AAE3C,MAAIO,EAAU,YACME,EAAA,UAAUW,EAAO,cAAc;AAAA,QAC/C,WAAWb,EAAU;AAAA,QACrB,eAAAW;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,QACN,UAAU;AAAA,QACV,GAAGf;AAAA,MAAA,CACJ,GAEGG,MACFI,EAAqB,UAAU,IAAI;AAAA,QACjC,CAAC,CAACW,CAAK,MAAM;;AACP,UAAAA,KAASA,EAAM,kBACjBP,IAAAL,EAAkB,YAAlB,QAAAK,EAA2B,UAE3BQ,IAAAb,EAAkB,YAAlB,QAAAa,EAA2B;AAAA,QAE/B;AAAA,QACA,EAAE,WAAW,EAAE;AAAA,MAAA,GAGbf,EAAU,WACSG,EAAA,QAAQ,QAAQH,EAAU,OAAO,IAI/CF,KAAA,QAAAA,KACPD,KACFK,EAAkB,QAAQ,iBAAiBL,EAAc,MAAMA,EAAc,QAAQ;AAAA,aAGlFmB,GAAO;AACR,YAAA,MAAM,mCAAmCA,CAAK,EAAE;AAAA,IACxD;AAAA,EAAA,MAKK,MAAM;;AACX,IAAId,EAAkB,YAChBL,KACFK,EAAkB,QAAQ,oBAAoBL,EAAc,MAAMA,EAAc,QAAQ,GAGtFE,OACFQ,IAAAJ,EAAqB,YAArB,QAAAI,EAA8B,eAEhCL,EAAkB,QAAQ;EAC5B,IAED,CAACT,GAAKI,GAAeC,GAAUC,GAAoBH,CAAQ,CAAC,qBAEvDqB,GAAS,EAAA,KAAKjB,GAAW,QAAQN,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEcuB,IAAAC,EAAK9B,CAAe;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../../src/features/ui/text/text.tsx"],"sourcesContent":["import type { TColorNames, TTextVariants } from '../types';\n\nimport styled from 'styled-components';\n\nexport interface TextProps {\n  $renderAs: TTextVariants;\n  $color?: TColorNames;\n  $align?: 'auto' | 'left' | 'right' | 'center' | 'justify';\n  $alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\n  $opacity?: number | undefined;\n  $width?: number | string;\n  $widthX?: number;\n  $marginBottom?: number;\n  $marginBottomX?: number;\n  $inline?: boolean;\n  $textDecoration?: string;\n}\n\n/**\n * @param $renderAs - The text variant to render as (ah1-ah4, ab1-ab3, ac1-ac4, ub1-ub3), anything else is deprecated\n */\nconst Text = styled.div<TextProps>(\n  ({\n    theme,\n    $renderAs,\n    $color,\n    $align = 'left',\n    $width,\n    $widthX,\n    $marginBottom,\n    $marginBottomX,\n    $alignSelf,\n    $opacity = 1,\n    $inline,\n    $textDecoration,\n  }) => {\n    const { text, colors, layout } = theme;\n    const {\n      fontFamily,\n      fontSize,\n      lineHeight,\n      letterSpacing,\n      textTransform = 'none',\n    } = text[$renderAs];\n\n    return `\n      display: ${$inline ? 'inline-block' : 'block'};\n      font-family: ${fontFamily};\n      font-size: ${fontSize}px;\n      text-align: ${$align};\n      line-height: ${lineHeight}px;\n      text-transform: ${textTransform};\n      ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n      color: ${$color ? colors[$color] : colors.BLACK};\n      opacity: ${$opacity};\n      width: ${$width ? `${$width}` : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      ${$widthX ? `width: ${$widthX * layout.gutter}px;` : ''}\n      margin-bottom: ${$marginBottom ? `${$marginBottom}` : 'initial'}${\n        typeof $marginBottom === 'number' ? 'px' : ''\n      };\n      ${$marginBottomX ? `margin-bottom: ${$marginBottomX * layout.gutter}px;` : ''}\n      ${$alignSelf ? `align-self: ${$alignSelf};` : ''}\n      ${$textDecoration ? `text-decoration: ${$textDecoration};` : ''}\n    `;\n  },\n);\n\nText.displayName = 'Text';\n\nexport default Text;\n"],"names":["Text","styled","theme","$renderAs","$color","$align","$width","$widthX","$marginBottom","$marginBottomX","$alignSelf","$opacity","$inline","$textDecoration","text","colors","layout","fontFamily","fontSize","lineHeight","letterSpacing","textTransform","Text$1"],"mappings":";AAqBA,MAAMA,IAAOC,EAAO;AAAA,EAClB,CAAC;AAAA,IACC,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,iBAAAC;AAAA,EAAA,MACI;AACJ,UAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,QAAAC,EAAA,IAAWd,GAC3B;AAAA,MACJ,YAAAe;AAAA,MACA,UAAAC;AAAA,MACA,YAAAC;AAAA,MACA,eAAAC;AAAA,MACA,eAAAC,IAAgB;AAAA,IAAA,IACdP,EAAKX,CAAS;AAEX,WAAA;AAAA,iBACMS,IAAU,iBAAiB,OAAO;AAAA,qBAC9BK,CAAU;AAAA,mBACZC,CAAQ;AAAA,oBACPb,CAAM;AAAA,qBACLc,CAAU;AAAA,wBACPE,CAAa;AAAA,QAC7B,OAAOD,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA,eACvEhB,IAASW,EAAOX,CAAM,IAAIW,EAAO,KAAK;AAAA,iBACpCJ,CAAQ;AAAA,eACVL,IAAS,GAAGA,CAAM,KAAK,MAAM,GAAG,OAAOA,KAAW,WAAW,OAAO,EAAE;AAAA,QAC7EC,IAAU,UAAUA,IAAUS,EAAO,MAAM,QAAQ,EAAE;AAAA,uBACtCR,IAAgB,GAAGA,CAAa,KAAK,SAAS,GAC7D,OAAOA,KAAkB,WAAW,OAAO,EAC7C;AAAA,QACEC,IAAiB,kBAAkBA,IAAiBO,EAAO,MAAM,QAAQ,EAAE;AAAA,QAC3EN,IAAa,eAAeA,CAAU,MAAM,EAAE;AAAA,QAC9CG,IAAkB,oBAAoBA,CAAe,MAAM,EAAE;AAAA;AAAA,EAEnE;AACF;AAEAb,EAAK,cAAc;AAEnB,MAAAsB,IAAetB;"}
+{"version":3,"file":"text.js","sources":["../../../../src/features/ui/text/text.tsx"],"sourcesContent":["import type { TColorNames, TTextVariants } from '../types';\n\nimport styled from 'styled-components';\n\nexport interface TextProps {\n  $renderAs: TTextVariants;\n  $color?: TColorNames;\n  $align?: 'auto' | 'left' | 'right' | 'center' | 'justify';\n  $alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\n  $opacity?: number | undefined;\n  $width?: number | string;\n  $widthX?: number;\n  $marginBottom?: number;\n  $marginBottomX?: number;\n  $inline?: boolean;\n  $textDecoration?: string;\n  $whiteSpace?: 'pre-line' | 'normal' | 'pre-wrap' | 'no-wrap' | 'pre' | 'break-spaces';\n}\n\n/**\n * @param $renderAs - The text variant to render as (ah1-ah4, ab1-ab3, ac1-ac4, ub1-ub3), anything else is deprecated\n */\nconst Text = styled.div<TextProps>(\n  ({\n    theme,\n    $renderAs,\n    $color,\n    $align = 'left',\n    $width,\n    $widthX,\n    $marginBottom,\n    $marginBottomX,\n    $alignSelf,\n    $opacity = 1,\n    $inline,\n    $textDecoration,\n    $whiteSpace,\n  }) => {\n    const { text, colors, layout } = theme;\n    const {\n      fontFamily,\n      fontSize,\n      lineHeight,\n      letterSpacing,\n      textTransform = 'none',\n    } = text[$renderAs];\n\n    return `\n      display: ${$inline ? 'inline-block' : 'block'};\n      font-family: ${fontFamily};\n      font-size: ${fontSize}px;\n      text-align: ${$align};\n      line-height: ${lineHeight}px;\n      text-transform: ${textTransform};\n      ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n      color: ${$color ? colors[$color] : colors.BLACK};\n      opacity: ${$opacity};\n      width: ${$width ? `${$width}` : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      ${$widthX ? `width: ${$widthX * layout.gutter}px;` : ''}\n      margin-bottom: ${$marginBottom ? `${$marginBottom}` : 'initial'}${\n        typeof $marginBottom === 'number' ? 'px' : ''\n      };\n      ${$marginBottomX ? `margin-bottom: ${$marginBottomX * layout.gutter}px;` : ''}\n      ${$alignSelf ? `align-self: ${$alignSelf};` : ''}\n      ${$textDecoration ? `text-decoration: ${$textDecoration};` : ''}\n      ${$whiteSpace ? `white-space: ${$whiteSpace};` : ''}\n    `;\n  },\n);\n\nText.displayName = 'Text';\n\nexport default Text;\n"],"names":["Text","styled","theme","$renderAs","$color","$align","$width","$widthX","$marginBottom","$marginBottomX","$alignSelf","$opacity","$inline","$textDecoration","$whiteSpace","text","colors","layout","fontFamily","fontSize","lineHeight","letterSpacing","textTransform","Text$1"],"mappings":";AAsBA,MAAMA,IAAOC,EAAO;AAAA,EAClB,CAAC;AAAA,IACC,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,EAAA,MACI;AACJ,UAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,QAAAC,EAAA,IAAWf,GAC3B;AAAA,MACJ,YAAAgB;AAAA,MACA,UAAAC;AAAA,MACA,YAAAC;AAAA,MACA,eAAAC;AAAA,MACA,eAAAC,IAAgB;AAAA,IAAA,IACdP,EAAKZ,CAAS;AAEX,WAAA;AAAA,iBACMS,IAAU,iBAAiB,OAAO;AAAA,qBAC9BM,CAAU;AAAA,mBACZC,CAAQ;AAAA,oBACPd,CAAM;AAAA,qBACLe,CAAU;AAAA,wBACPE,CAAa;AAAA,QAC7B,OAAOD,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA,eACvEjB,IAASY,EAAOZ,CAAM,IAAIY,EAAO,KAAK;AAAA,iBACpCL,CAAQ;AAAA,eACVL,IAAS,GAAGA,CAAM,KAAK,MAAM,GAAG,OAAOA,KAAW,WAAW,OAAO,EAAE;AAAA,QAC7EC,IAAU,UAAUA,IAAUU,EAAO,MAAM,QAAQ,EAAE;AAAA,uBACtCT,IAAgB,GAAGA,CAAa,KAAK,SAAS,GAC7D,OAAOA,KAAkB,WAAW,OAAO,EAC7C;AAAA,QACEC,IAAiB,kBAAkBA,IAAiBQ,EAAO,MAAM,QAAQ,EAAE;AAAA,QAC3EP,IAAa,eAAeA,CAAU,MAAM,EAAE;AAAA,QAC9CG,IAAkB,oBAAoBA,CAAe,MAAM,EAAE;AAAA,QAC7DC,IAAc,gBAAgBA,CAAW,MAAM,EAAE;AAAA;AAAA,EAEvD;AACF;AAEAd,EAAK,cAAc;AAEnB,MAAAuB,IAAevB;"}

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

@@ -95,6 +95,23 @@ const o = (i) => ({ sizes: {
       active: "RED",
       disabled: "GREY_3"
     }
+  },
+  "secondary-dark": {
+    backgroundColorName: {
+      inactive: "WHITE",
+      active: "BLACK",
+      disabled: "WHITE_T_10"
+    },
+    colorName: {
+      inactive: "BLACK",
+      active: "WHITE",
+      disabled: "WHITE_T_38"
+    },
+    borderColorName: {
+      inactive: "WHITE",
+      active: "BLACK",
+      disabled: "WHITE_T_15"
+    }
   }
   // 'yellow': {
   //   backgroundColorName: {

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../src/features/ui/theme/button.ts"],"sourcesContent":["import type {\n  IButtonSizeConfig,\n  TButtonSizes,\n  IButtonVariantConfig,\n  TButtonVariants,\n} from '../types';\n\ninterface IGetButtonConfig {\n  (gutter: number): {\n    sizes: Record<TButtonSizes, IButtonSizeConfig>;\n    variants: Record<TButtonVariants, IButtonVariantConfig>;\n  };\n}\n\nconst getButtonConfig: IGetButtonConfig = (gutter: number) => {\n  const sizes: Record<TButtonSizes, IButtonSizeConfig> = {\n    xsmall: {\n      height: gutter * 2,\n      paddingHorizontal: gutter * (1 + 0.375),\n      textVariant: 'ub3-bold',\n      borderWidth: 1,\n      iconSize: gutter,\n      iconPadding: gutter * 0.25,\n      loaderSize: gutter * 1.25,\n    },\n    small: {\n      height: gutter * 2.5,\n      paddingHorizontal: gutter * (1 + 0.625),\n      textVariant: 'ub2-bold',\n      borderWidth: 1,\n      iconSize: gutter * 1.25,\n      iconPadding: gutter * 0.375,\n      loaderSize: gutter * 1.5,\n    },\n    regular: {\n      height: gutter * 3,\n      paddingHorizontal: gutter * (1 + 0.875),\n      textVariant: 'ub1-bold',\n      borderWidth: 1,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 1.75,\n    },\n    medium: {\n      height: gutter * 3.5,\n      paddingHorizontal: gutter * (1 + 1.125),\n      textVariant: 'ub1-bold',\n      borderWidth: 1.5,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 2,\n    },\n    large: {\n      height: gutter * 4,\n      paddingHorizontal: gutter * (1 + 1.375),\n      textVariant: 'ub1-bold',\n      borderWidth: 2,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 2.25,\n    },\n  };\n\n  const variants: Record<TButtonVariants, IButtonVariantConfig> = {\n    primary: {\n      backgroundColorName: {\n        inactive: 'YELLOW_4',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    secondary: {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    tertiary: {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'RED',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'RED',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'RED',\n        active: 'RED',\n        disabled: 'GREY_3',\n      },\n    },\n    // 'yellow': {\n    //   backgroundColorName: {\n    //     inactive: 'YELLOW_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'yellow-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'YELLOW_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n    // 'white': {\n    //   backgroundColorName: {\n    //     inactive: 'WHITE_1',\n    //     active: 'BLACK_T_35',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'white-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_T_70',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n    // 'black': {\n    //   backgroundColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_T_60',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'black-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'WHITE_T_40',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n  };\n\n  return { sizes, variants };\n};\n\nexport default getButtonConfig;\n"],"names":["getButtonConfig","gutter"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../../src/features/ui/theme/button.ts"],"sourcesContent":["import type {\n  IButtonSizeConfig,\n  TButtonSizes,\n  IButtonVariantConfig,\n  TButtonVariants,\n} from '../types';\n\ninterface IGetButtonConfig {\n  (gutter: number): {\n    sizes: Record<TButtonSizes, IButtonSizeConfig>;\n    variants: Record<TButtonVariants, IButtonVariantConfig>;\n  };\n}\n\nconst getButtonConfig: IGetButtonConfig = (gutter: number) => {\n  const sizes: Record<TButtonSizes, IButtonSizeConfig> = {\n    xsmall: {\n      height: gutter * 2,\n      paddingHorizontal: gutter * (1 + 0.375),\n      textVariant: 'ub3-bold',\n      borderWidth: 1,\n      iconSize: gutter,\n      iconPadding: gutter * 0.25,\n      loaderSize: gutter * 1.25,\n    },\n    small: {\n      height: gutter * 2.5,\n      paddingHorizontal: gutter * (1 + 0.625),\n      textVariant: 'ub2-bold',\n      borderWidth: 1,\n      iconSize: gutter * 1.25,\n      iconPadding: gutter * 0.375,\n      loaderSize: gutter * 1.5,\n    },\n    regular: {\n      height: gutter * 3,\n      paddingHorizontal: gutter * (1 + 0.875),\n      textVariant: 'ub1-bold',\n      borderWidth: 1,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 1.75,\n    },\n    medium: {\n      height: gutter * 3.5,\n      paddingHorizontal: gutter * (1 + 1.125),\n      textVariant: 'ub1-bold',\n      borderWidth: 1.5,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 2,\n    },\n    large: {\n      height: gutter * 4,\n      paddingHorizontal: gutter * (1 + 1.375),\n      textVariant: 'ub1-bold',\n      borderWidth: 2,\n      iconSize: gutter * 1.5,\n      iconPadding: gutter * 0.5,\n      loaderSize: gutter * 2.25,\n    },\n  };\n\n  const variants: Record<TButtonVariants, IButtonVariantConfig> = {\n    'primary': {\n      backgroundColorName: {\n        inactive: 'YELLOW_4',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'secondary': {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'BLACK',\n        active: 'BLACK',\n        disabled: 'GREY_3',\n      },\n    },\n    'tertiary': {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'RED',\n        disabled: 'GREY_3',\n      },\n      colorName: {\n        inactive: 'RED',\n        active: 'WHITE',\n        disabled: 'BLACK',\n      },\n      borderColorName: {\n        inactive: 'RED',\n        active: 'RED',\n        disabled: 'GREY_3',\n      },\n    },\n    'secondary-dark': {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'WHITE_T_10',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        disabled: 'WHITE_T_38',\n      },\n      borderColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        disabled: 'WHITE_T_15',\n      },\n    },\n    // 'yellow': {\n    //   backgroundColorName: {\n    //     inactive: 'YELLOW_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'yellow-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'YELLOW_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n    // 'white': {\n    //   backgroundColorName: {\n    //     inactive: 'WHITE_1',\n    //     active: 'BLACK_T_35',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'white-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_T_70',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n    // 'black': {\n    //   backgroundColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_T_60',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'BLACK_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    //   colorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'BLACK_T_35',\n    //   },\n    // },\n    // 'black-dark': {\n    //   backgroundColorName: {\n    //     inactive: 'BLACK_4',\n    //     active: 'WHITE_T_40',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   borderColorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    //   colorName: {\n    //     inactive: 'WHITE_4',\n    //     active: 'WHITE_4',\n    //     disabled: 'WHITE_T_40',\n    //   },\n    // },\n  };\n\n  return { sizes, variants };\n};\n\nexport default getButtonConfig;\n"],"names":["getButtonConfig","gutter"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-const n = (a) => {
-  const e = {
+const l = (a) => {
+  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,
+  }, d = {
+    ...e,
     backgroundColorName: "GREY_1",
     optionHoverColorName: "WHITE",
     borderColorName: {
@@ -85,12 +85,38 @@ const n = (a) => {
       inactive: "TRANSPARENT",
       disabled: "TRANSPARENT"
     }
-  }, d = {
-    primary: i,
-    secondary: o,
+  }, i = {
+    opacity: e.opacity,
+    labelBackgroundColorName: "TRANSPARENT",
+    backgroundColorName: "TRANSPARENT",
+    errorMessageColorName: "ORANGE_4",
+    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"
+    },
+    messageColorName: {
+      inactive: "WHITE_T_60",
+      active: "WHITE_T_60",
+      disabled: "WHITE_T_15"
+    }
+  }, r = {
+    primary: e,
+    "primary-dark": i,
+    secondary: d,
     success: {
-      opacity: i.opacity,
-      valueColorName: i.valueColorName,
+      opacity: e.opacity,
+      valueColorName: e.valueColorName,
       borderColorName: {
         inactive: "GREEN_5",
         active: "GREEN_5",
@@ -107,9 +133,22 @@ const n = (a) => {
         disabled: "GREEN_5"
       }
     },
+    "success-dark": {
+      ...i,
+      borderColorName: {
+        inactive: "GREEN_4",
+        active: "GREEN_4",
+        disabled: "GREEN_4"
+      },
+      messageColorName: {
+        inactive: "GREEN_4",
+        active: "GREEN_4",
+        disabled: "GREEN_4"
+      }
+    },
     error: {
-      opacity: i.opacity,
-      valueColorName: i.valueColorName,
+      opacity: e.opacity,
+      valueColorName: e.valueColorName,
       borderColorName: {
         inactive: "RED",
         active: "RED",
@@ -125,11 +164,25 @@ const n = (a) => {
         active: "RED",
         disabled: "RED"
       }
+    },
+    "error-dark": {
+      ...i,
+      errorMessageColorName: "ORANGE_4",
+      borderColorName: {
+        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: r };
 };
 export {
-  n as default
+  l as default
 };
 //# sourceMappingURL=input.js.map

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  };\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  const primaryDarkVariant: IInputVariantConfig = {\n    opacity: primaryVariant.opacity,\n    labelBackgroundColorName: 'TRANSPARENT',\n    backgroundColorName: 'TRANSPARENT',\n    errorMessageColorName: 'ORANGE_4',\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    messageColorName: {\n      inactive: 'WHITE_T_60',\n      active: 'WHITE_T_60',\n      disabled: 'WHITE_T_15',\n    },\n  };\n\n  const variants: Record<TInputVariants, IInputVariantConfig> = {\n    'primary': primaryVariant,\n    'primary-dark': primaryDarkVariant,\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    'success-dark': {\n      ...primaryDarkVariant,\n      borderColorName: {\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      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    'error-dark': {\n      ...primaryDarkVariant,\n      errorMessageColorName: 'ORANGE_4',\n      borderColorName: {\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 };\n};\n\nexport default getInputConfig;\n"],"names":["getInputConfig","gutter","sizes","primaryVariant","secondaryVariant","primaryDarkVariant","variants"],"mappings":"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"}

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { IChannelMessage } from '@cuemath/cue-message-broker';
 import type { IframeHTMLAttributes } from 'react';
+import type { ImgHTMLAttributes } from 'react';
 import type { InputHTMLAttributes } from 'react';
 import { IProvidedProps } from 'google-maps-react';
 import { IStyledComponent } from 'styled-components';
@@ -50,6 +51,8 @@ export declare const AchievementShareInstructionModal: React_2.FC<IShareInstruct
 
 export declare const AlertIcon: React_2.FC<React_2.SVGProps<SVGSVGElement>>;
 
+export declare const AnimatedArc: React_2.FC<IAnimatedArcProps>;
+
 export declare const AppLoader: FC<IAppLoaderProps>;
 
 export declare const ArcButton: MemoExoticComponent<ForwardRefExoticComponent<IArcButtonProps & {
@@ -495,6 +498,18 @@ declare interface IActionData {
     dimension?: IViewport;
 }
 
+declare interface IAnimatedArcProps {
+    radius: number;
+    strokeWidth: number;
+    color: TColorNames;
+    targetAngle: number;
+    startAngle?: number;
+    mode?: 'draw' | 'fade';
+    duration?: number;
+    delay?: number;
+    showAnimatedRainbowArc?: boolean;
+}
+
 declare interface IAppLoaderProps {
     width?: string | number;
     height?: string | number;
@@ -565,6 +580,7 @@ declare interface IBaseInputProps {
     canSiblingInteract?: boolean;
     willShowMessage?: boolean;
     errorMessage?: string;
+    helperText?: string;
     mandatory?: boolean;
     shape?: TInputShapes;
     isTransparent?: boolean;
@@ -936,6 +952,7 @@ declare interface IContextMenuProps {
     menuZIndex?: number;
     startLeft?: boolean;
     placeTop?: boolean;
+    onMenuVisibilityChange?: (visible: boolean) => void;
 }
 
 declare interface ICountdownTimer {
@@ -1229,6 +1246,12 @@ declare interface IIconButtonProps extends Omit<IButtonProps, 'label' | 'shape'
     renderAs: TButtonVariants;
 }
 
+declare interface IImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    withLoader: boolean;
+    borderRadius?: number;
+    borderColor?: TColorNames;
+}
+
 export declare interface IInfoMessage {
     message: string;
     position: 'top' | 'bottom';
@@ -1275,6 +1298,8 @@ export declare interface IInputVariantConfig {
     };
     backgroundColorName?: TColorNames;
     optionHoverColorName?: TColorNames;
+    labelBackgroundColorName?: TColorNames;
+    errorMessageColorName?: TColorNames;
 }
 
 declare interface IIsOkayTypeQuestion {
@@ -1733,6 +1758,9 @@ declare interface ILPARSheetCallbacks extends ISATSheetItemCallbacks {
     onReview?: (sheet: TLPARSheetData) => void;
 }
 
+declare const Image_2: React.FC<IImageProps>;
+export { Image_2 as Image }
+
 export declare const ImageIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 export declare const IMAGES: {
@@ -4053,7 +4081,7 @@ declare type TBlockType = keyof typeof BLOCK_TYPE;
 
 export declare type TButtonSizes = 'xsmall' | 'small' | 'regular' | 'medium' | 'large';
 
-export declare type TButtonVariants = 'primary' | 'secondary' | 'tertiary';
+export declare type TButtonVariants = 'primary' | 'secondary' | 'tertiary' | 'secondary-dark';
 
 declare type TCallback = (messages: TInclassMessage[]) => void;
 
@@ -4197,6 +4225,7 @@ declare interface TextProps {
     $marginBottomX?: number;
     $inline?: boolean;
     $textDecoration?: string;
+    $whiteSpace?: 'pre-line' | 'normal' | 'pre-wrap' | 'no-wrap' | 'pre' | 'break-spaces';
 }
 
 export declare type TFontFamilyNames = `${'Athletics'}-${'Light' | 'Regular' | 'Medium' | 'Bold' | 'Black'}` | `${'UntitledSans'}-${'Regular' | 'Medium'}`;
@@ -4422,7 +4451,7 @@ export declare type TInputShapes = 'border' | 'borderLess' | 'curved';
 
 export declare type TInputSizes = 'small' | 'regular' | 'xsmall';
 
-export declare type TInputVariants = 'primary' | 'secondary' | 'success' | 'error';
+export declare type TInputVariants = 'primary' | 'secondary' | 'success' | 'error' | 'primary-dark' | 'success-dark' | 'error-dark';
 
 declare type TInstructorStimulus = 'SystemIntro' | 'Intro' | 'Concept-Intro' | 'Instruction' | 'Task' | 'Try' | 'Learn' | 'Apply';