@cuemath/leap 2.8.38-hg4 → 2.8.39

package/dist/features/trial-session/comps/test-prep/test-prep.js

@@ -1,7 +1,7 @@
 import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { memo as S, useCallback as P } from "react";
+import { memo as E, useCallback as P } from "react";
 import { GIF as $ } from "../../../../assets/gif/gif.js";
-import { GOAL_CATEGORY as t } from "../../../milestone/constants.js";
+import { GOAL_CATEGORY as r } from "../../../milestone/constants.js";
 import { getGoalsFromConfig as b } from "../../../milestone/create/milestone-create-helpers.js";
 import G from "../../../ui/image/image.js";
 import y from "../../../ui/inputs/searchable-select-input/searchable-select-input.js";
@@ -12,24 +12,24 @@ import { useTrialSessionContext as L } from "../../context/use-trial-session-con
 import { updateGoalInFormData as A } from "../../helper.js";
 import R from "../slide-header/index.js";
 import { Container as j, ContentWrapper as k, ImageWrapper as D, InputContainer as O } from "./test-prep-styled.js";
-const M = S(() => {
+const M = E(() => {
   const { milestoneConfig: m, formData: s, updateSlideConfig: a, trialHomeData: l } = L(), { demo_info: p } = l, { stream: c } = p || {}, { grade: d, goals: e } = s || {}, f = b(m, {
     countryCode: "US",
     grade: d ?? "",
-    goalCategory: t.TEST_PREP,
+    goalCategory: r.TEST_PREP,
     courseStream: c,
     enrollmentType: "ONLINE"
-  }), { goal_code: g } = (e == null ? void 0 : e.find((r) => r.goal_category === t.TEST_PREP)) ?? {}, h = P(
-    (r, u) => {
-      if (!r) {
+  }), { goal_code: g } = (e == null ? void 0 : e.find((t) => t.goal_category === r.TEST_PREP)) ?? {}, h = P(
+    (t, u) => {
+      if (!t) {
         const _ = e == null ? void 0 : e.filter(
-          (E) => E.goal_category !== t.TEST_PREP
+          (S) => S.goal_category !== r.TEST_PREP
         );
         a({ goals: _ });
         return;
       }
-      const { label: T } = u, C = A(e, t.TEST_PREP, {
-        goal_code: r,
+      const { label: T } = u, C = A(e, r.TEST_PREP, {
+        goal_code: t,
         milestone_name: T,
         milestone_date_ts: x()
       });
@@ -55,7 +55,7 @@ const M = S(() => {
             y,
             {
               renderAs: "primary",
-              label: "Test",
+              label: "Select a Test",
               value: g,
               options: f,
               shape: "borderLess",

package/dist/features/trial-session/comps/test-prep/test-prep.js.map

@@ -1 +1 @@
-{"version":3,"file":"test-prep.js","sources":["../../../../../src/features/trial-session/comps/test-prep/test-prep.tsx"],"sourcesContent":["import type { ISelectOption } from '../../../ui/inputs/base-select-input/base-select-input-types';\n\nimport { memo, useCallback } from 'react';\n\nimport { GIF } from '../../../../assets/gif/gif';\nimport { GOAL_CATEGORY } from '../../../milestone/constants';\nimport { getGoalsFromConfig } from '../../../milestone/create/milestone-create-helpers';\nimport Image from '../../../ui/image/image';\nimport SearchableSelectInput from '../../../ui/inputs/searchable-select-input/searchable-select-input';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { epochTimestampAfterOneYear } from '../../../utils/utils';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport { updateGoalInFormData } from '../../helper';\nimport SlideHeader from '../slide-header';\nimport * as Styled from './test-prep-styled';\n\nconst TestPrep = memo(() => {\n  const { milestoneConfig, formData, updateSlideConfig, trialHomeData } = useTrialSessionContext();\n\n  const { demo_info: demoInfo } = trialHomeData;\n  const { stream } = demoInfo || {};\n  const { grade, goals } = formData || {};\n  const goalsList = getGoalsFromConfig(milestoneConfig, {\n    countryCode: 'US',\n    grade: grade ?? '',\n    goalCategory: GOAL_CATEGORY.TEST_PREP,\n    courseStream: stream,\n    enrollmentType: 'ONLINE',\n  });\n  const { goal_code: selectedGoal } =\n    goals?.find(goal => goal.goal_category === GOAL_CATEGORY.TEST_PREP) ?? {};\n\n  const handleGoalChange = useCallback(\n    (value: string, option: ISelectOption<string | number>) => {\n      if (!value) {\n        const goalsWithoutTestPrep = goals?.filter(\n          goal => goal.goal_category !== GOAL_CATEGORY.TEST_PREP,\n        );\n\n        updateSlideConfig({ goals: goalsWithoutTestPrep });\n\n        return;\n      }\n\n      const { label } = option;\n\n      const updatedGoals = updateGoalInFormData(goals, GOAL_CATEGORY.TEST_PREP, {\n        goal_code: value,\n        milestone_name: label,\n        milestone_date_ts: epochTimestampAfterOneYear(),\n      });\n\n      updateSlideConfig({ goals: updatedGoals });\n    },\n    [goals, updateSlideConfig],\n  );\n\n  return (\n    <Styled.Container>\n      <Separator height={60} />\n      <SlideHeader />\n      <Styled.ContentWrapper $flexDirection=\"row\" $justifyContent=\"center\">\n        <Styled.ImageWrapper>\n          <Image withLoader height={402} width={302} src={GIF.TEST_PREP} className=\"image\" />\n        </Styled.ImageWrapper>\n        <Styled.InputContainer\n          $flexGap={40}\n          $justifyContent=\"center\"\n          $background=\"BLUE_1\"\n          $borderColor=\"BLACK_1\"\n          $gapX={2.5}\n          $gutterX={2.5}\n        >\n          <SearchableSelectInput\n            renderAs=\"primary\"\n            label=\"Test\"\n            value={selectedGoal}\n            options={goalsList}\n            shape=\"borderLess\"\n            theme=\"dark\"\n            onChange={handleGoalChange}\n            isTransparent\n          />\n        </Styled.InputContainer>\n      </Styled.ContentWrapper>\n      <Separator heightX={1} />\n      <Text $renderAs=\"ub3\" $align=\"center\">\n        This is optional and can be skipped.\n      </Text>\n    </Styled.Container>\n  );\n});\n\nexport default TestPrep;\n"],"names":["TestPrep","memo","milestoneConfig","formData","updateSlideConfig","trialHomeData","useTrialSessionContext","demoInfo","stream","grade","goals","goalsList","getGoalsFromConfig","GOAL_CATEGORY","selectedGoal","goal","handleGoalChange","useCallback","value","option","goalsWithoutTestPrep","label","updatedGoals","updateGoalInFormData","epochTimestampAfterOneYear","jsxs","Styled.Container","jsx","Separator","SlideHeader","Styled.ContentWrapper","Styled.ImageWrapper","Image","GIF","Styled.InputContainer","SearchableSelectInput","Text"],"mappings":";;;;;;;;;;;;;;AAiBM,MAAAA,IAAWC,EAAK,MAAM;AAC1B,QAAM,EAAE,iBAAAC,GAAiB,UAAAC,GAAU,mBAAAC,GAAmB,eAAAC,EAAA,IAAkBC,KAElE,EAAE,WAAWC,EAAa,IAAAF,GAC1B,EAAE,QAAAG,EAAA,IAAWD,KAAY,IACzB,EAAE,OAAAE,GAAO,OAAAC,MAAUP,KAAY,CAAA,GAC/BQ,IAAYC,EAAmBV,GAAiB;AAAA,IACpD,aAAa;AAAA,IACb,OAAOO,KAAS;AAAA,IAChB,cAAcI,EAAc;AAAA,IAC5B,cAAcL;AAAA,IACd,gBAAgB;AAAA,EAAA,CACjB,GACK,EAAE,WAAWM,OACjBJ,KAAA,gBAAAA,EAAO,KAAK,CAAQK,MAAAA,EAAK,kBAAkBF,EAAc,eAAc,CAAA,GAEnEG,IAAmBC;AAAA,IACvB,CAACC,GAAeC,MAA2C;AACzD,UAAI,CAACD,GAAO;AACV,cAAME,IAAuBV,KAAA,gBAAAA,EAAO;AAAA,UAClC,CAAAK,MAAQA,EAAK,kBAAkBF,EAAc;AAAA;AAG7B,QAAAT,EAAA,EAAE,OAAOgB,EAAA,CAAsB;AAEjD;AAAA,MACF;AAEM,YAAA,EAAE,OAAAC,EAAU,IAAAF,GAEZG,IAAeC,EAAqBb,GAAOG,EAAc,WAAW;AAAA,QACxE,WAAWK;AAAA,QACX,gBAAgBG;AAAA,QAChB,mBAAmBG,EAA2B;AAAA,MAAA,CAC/C;AAEiB,MAAApB,EAAA,EAAE,OAAOkB,EAAA,CAAc;AAAA,IAC3C;AAAA,IACA,CAACZ,GAAON,CAAiB;AAAA,EAAA;AAIzB,SAAA,gBAAAqB,EAACC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAU,QAAQ,GAAI,CAAA;AAAA,sBACtBC,GAAY,EAAA;AAAA,sBACZC,GAAA,EAAsB,gBAAe,OAAM,iBAAgB,UAC1D,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAA,EACC,UAAC,gBAAAJ,EAAAK,GAAA,EAAM,YAAU,IAAC,QAAQ,KAAK,OAAO,KAAK,KAAKC,EAAI,WAAW,WAAU,QAAQ,CAAA,GACnF;AAAA,MACA,gBAAAN;AAAA,QAACO;AAAAA,QAAA;AAAA,UACC,UAAU;AAAA,UACV,iBAAgB;AAAA,UAChB,aAAY;AAAA,UACZ,cAAa;AAAA,UACb,OAAO;AAAA,UACP,UAAU;AAAA,UAEV,UAAA,gBAAAP;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,OAAM;AAAA,cACN,OAAOrB;AAAA,cACP,SAASH;AAAA,cACT,OAAM;AAAA,cACN,OAAM;AAAA,cACN,UAAUK;AAAA,cACV,eAAa;AAAA,YAAA;AAAA,UACf;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,GACF;AAAA,IACA,gBAAAW,EAACC,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,sBACtBQ,GAAK,EAAA,WAAU,OAAM,QAAO,UAAS,UAEtC,wCAAA;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"test-prep.js","sources":["../../../../../src/features/trial-session/comps/test-prep/test-prep.tsx"],"sourcesContent":["import type { ISelectOption } from '../../../ui/inputs/base-select-input/base-select-input-types';\n\nimport { memo, useCallback } from 'react';\n\nimport { GIF } from '../../../../assets/gif/gif';\nimport { GOAL_CATEGORY } from '../../../milestone/constants';\nimport { getGoalsFromConfig } from '../../../milestone/create/milestone-create-helpers';\nimport Image from '../../../ui/image/image';\nimport SearchableSelectInput from '../../../ui/inputs/searchable-select-input/searchable-select-input';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { epochTimestampAfterOneYear } from '../../../utils/utils';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport { updateGoalInFormData } from '../../helper';\nimport SlideHeader from '../slide-header';\nimport * as Styled from './test-prep-styled';\n\nconst TestPrep = memo(() => {\n  const { milestoneConfig, formData, updateSlideConfig, trialHomeData } = useTrialSessionContext();\n\n  const { demo_info: demoInfo } = trialHomeData;\n  const { stream } = demoInfo || {};\n  const { grade, goals } = formData || {};\n  const goalsList = getGoalsFromConfig(milestoneConfig, {\n    countryCode: 'US',\n    grade: grade ?? '',\n    goalCategory: GOAL_CATEGORY.TEST_PREP,\n    courseStream: stream,\n    enrollmentType: 'ONLINE',\n  });\n  const { goal_code: selectedGoal } =\n    goals?.find(goal => goal.goal_category === GOAL_CATEGORY.TEST_PREP) ?? {};\n\n  const handleGoalChange = useCallback(\n    (value: string, option: ISelectOption<string | number>) => {\n      if (!value) {\n        const goalsWithoutTestPrep = goals?.filter(\n          goal => goal.goal_category !== GOAL_CATEGORY.TEST_PREP,\n        );\n\n        updateSlideConfig({ goals: goalsWithoutTestPrep });\n\n        return;\n      }\n\n      const { label } = option;\n\n      const updatedGoals = updateGoalInFormData(goals, GOAL_CATEGORY.TEST_PREP, {\n        goal_code: value,\n        milestone_name: label,\n        milestone_date_ts: epochTimestampAfterOneYear(),\n      });\n\n      updateSlideConfig({ goals: updatedGoals });\n    },\n    [goals, updateSlideConfig],\n  );\n\n  return (\n    <Styled.Container>\n      <Separator height={60} />\n      <SlideHeader />\n      <Styled.ContentWrapper $flexDirection=\"row\" $justifyContent=\"center\">\n        <Styled.ImageWrapper>\n          <Image withLoader height={402} width={302} src={GIF.TEST_PREP} className=\"image\" />\n        </Styled.ImageWrapper>\n        <Styled.InputContainer\n          $flexGap={40}\n          $justifyContent=\"center\"\n          $background=\"BLUE_1\"\n          $borderColor=\"BLACK_1\"\n          $gapX={2.5}\n          $gutterX={2.5}\n        >\n          <SearchableSelectInput\n            renderAs=\"primary\"\n            label=\"Select a Test\"\n            value={selectedGoal}\n            options={goalsList}\n            shape=\"borderLess\"\n            theme=\"dark\"\n            onChange={handleGoalChange}\n            isTransparent\n          />\n        </Styled.InputContainer>\n      </Styled.ContentWrapper>\n      <Separator heightX={1} />\n      <Text $renderAs=\"ub3\" $align=\"center\">\n        This is optional and can be skipped.\n      </Text>\n    </Styled.Container>\n  );\n});\n\nexport default TestPrep;\n"],"names":["TestPrep","memo","milestoneConfig","formData","updateSlideConfig","trialHomeData","useTrialSessionContext","demoInfo","stream","grade","goals","goalsList","getGoalsFromConfig","GOAL_CATEGORY","selectedGoal","goal","handleGoalChange","useCallback","value","option","goalsWithoutTestPrep","label","updatedGoals","updateGoalInFormData","epochTimestampAfterOneYear","jsxs","Styled.Container","jsx","Separator","SlideHeader","Styled.ContentWrapper","Styled.ImageWrapper","Image","GIF","Styled.InputContainer","SearchableSelectInput","Text"],"mappings":";;;;;;;;;;;;;;AAiBM,MAAAA,IAAWC,EAAK,MAAM;AAC1B,QAAM,EAAE,iBAAAC,GAAiB,UAAAC,GAAU,mBAAAC,GAAmB,eAAAC,EAAA,IAAkBC,KAElE,EAAE,WAAWC,EAAa,IAAAF,GAC1B,EAAE,QAAAG,EAAA,IAAWD,KAAY,IACzB,EAAE,OAAAE,GAAO,OAAAC,MAAUP,KAAY,CAAA,GAC/BQ,IAAYC,EAAmBV,GAAiB;AAAA,IACpD,aAAa;AAAA,IACb,OAAOO,KAAS;AAAA,IAChB,cAAcI,EAAc;AAAA,IAC5B,cAAcL;AAAA,IACd,gBAAgB;AAAA,EAAA,CACjB,GACK,EAAE,WAAWM,OACjBJ,KAAA,gBAAAA,EAAO,KAAK,CAAQK,MAAAA,EAAK,kBAAkBF,EAAc,eAAc,CAAA,GAEnEG,IAAmBC;AAAA,IACvB,CAACC,GAAeC,MAA2C;AACzD,UAAI,CAACD,GAAO;AACV,cAAME,IAAuBV,KAAA,gBAAAA,EAAO;AAAA,UAClC,CAAAK,MAAQA,EAAK,kBAAkBF,EAAc;AAAA;AAG7B,QAAAT,EAAA,EAAE,OAAOgB,EAAA,CAAsB;AAEjD;AAAA,MACF;AAEM,YAAA,EAAE,OAAAC,EAAU,IAAAF,GAEZG,IAAeC,EAAqBb,GAAOG,EAAc,WAAW;AAAA,QACxE,WAAWK;AAAA,QACX,gBAAgBG;AAAA,QAChB,mBAAmBG,EAA2B;AAAA,MAAA,CAC/C;AAEiB,MAAApB,EAAA,EAAE,OAAOkB,EAAA,CAAc;AAAA,IAC3C;AAAA,IACA,CAACZ,GAAON,CAAiB;AAAA,EAAA;AAIzB,SAAA,gBAAAqB,EAACC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAU,QAAQ,GAAI,CAAA;AAAA,sBACtBC,GAAY,EAAA;AAAA,sBACZC,GAAA,EAAsB,gBAAe,OAAM,iBAAgB,UAC1D,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAA,EACC,UAAC,gBAAAJ,EAAAK,GAAA,EAAM,YAAU,IAAC,QAAQ,KAAK,OAAO,KAAK,KAAKC,EAAI,WAAW,WAAU,QAAQ,CAAA,GACnF;AAAA,MACA,gBAAAN;AAAA,QAACO;AAAAA,QAAA;AAAA,UACC,UAAU;AAAA,UACV,iBAAgB;AAAA,UAChB,aAAY;AAAA,UACZ,cAAa;AAAA,UACb,OAAO;AAAA,UACP,UAAU;AAAA,UAEV,UAAA,gBAAAP;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,OAAM;AAAA,cACN,OAAOrB;AAAA,cACP,SAASH;AAAA,cACT,OAAM;AAAA,cACN,OAAM;AAAA,cACN,UAAUK;AAAA,cACV,eAAa;AAAA,YAAA;AAAA,UACf;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,GACF;AAAA,IACA,gBAAAW,EAACC,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,sBACtBQ,GAAK,EAAA,WAAU,OAAM,QAAO,UAAS,UAEtC,wCAAA;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/features/trial-session/left-panel/index.js

@@ -33,7 +33,7 @@ const q = () => {
               !r && /* @__PURE__ */ t(o, { $gutterX: 0.5, $gapX: 1, $flexRowGapX: 0.5, children: [
                 /* @__PURE__ */ e(u, { width: 108, height: 16, color: _().colors.BLACK }),
                 /* @__PURE__ */ t(o, { $flexDirection: "row", $alignItems: "center", children: [
-                  /* @__PURE__ */ e(s, { $renderAs: "ub3-bold", $color: "BLACK_T_60", children: "4.7+ Rating on" }),
+                  /* @__PURE__ */ e(s, { $renderAs: "ub3-bold", $color: "BLACK_T_60", children: "4.8+ Rating on" }),
                   /* @__PURE__ */ e($, { withLoader: !0, src: T.STAR_WITH_GREEN_FILL, width: 20, height: 20 }),
                   /* @__PURE__ */ e(s, { $renderAs: "ub3-bold", $color: "BLACK_T_60", children: "Trustpilot" })
                 ] })

package/dist/features/trial-session/left-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/features/trial-session/left-panel/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport CuemathLogo from '../../../assets/line-icons/icons/cuemath-logo';\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { getTheme } from '../../ui/theme/get-theme';\nimport StudentAVPanel from '../comps/av-panels/student-av-panel/student-av-panel';\nimport TeacherAVPanel from '../comps/av-panels/teacher-av-panel/teacher-av-panel';\nimport Cues from '../comps/cue-tips/cues';\nimport Tips from '../comps/cue-tips/tips';\nimport NavigationBar from '../comps/navigation-bar';\nimport Solutions from '../comps/solutions';\nimport { useTrialSessionContext } from '../context/use-trial-session-context';\nimport {\n  STUDENT_LEFT_PANEL_MAX_WIDTH,\n  TEACHER_LEFT_PANEL_MAX_WIDTH,\n  TrialPageId,\n} from '../trial-session-constants';\nimport * as Styled from './left-panel-styled';\n\nconst LeftPanel: React.FC = () => {\n  const { isTeacher, slideConfig, worksheetNavigationPanel, questionsRatingPanel } =\n    useTrialSessionContext();\n  const { cues = [], dos = [], donts = [], renderAVIn, id, solutions } = slideConfig || {};\n\n  if (!isTeacher && renderAVIn !== 'left') {\n    return null;\n  }\n\n  return (\n    <Styled.Container\n      $maxWidth={isTeacher ? TEACHER_LEFT_PANEL_MAX_WIDTH : STUDENT_LEFT_PANEL_MAX_WIDTH}\n    >\n      {renderAVIn === 'left' && (\n        <FlexView\n          $width=\"100%\"\n          $flexDirection={isTeacher ? 'row' : 'column'}\n          $gutterX={isTeacher ? 0.25 : 0.5}\n          $gapX={isTeacher ? 0.25 : 0.5}\n          $flexGapX={isTeacher ? 0.25 : 0.5}\n        >\n          {!isTeacher && (\n            <FlexView $gutterX={0.5} $gapX={1} $flexRowGapX={0.5}>\n              <CuemathLogo width={108} height={16} color={getTheme().colors.BLACK} />\n              <FlexView $flexDirection=\"row\" $alignItems=\"center\">\n                <Text $renderAs=\"ub3-bold\" $color=\"BLACK_T_60\">\n                  4.7+ Rating on\n                </Text>\n                <Image withLoader src={ILLUSTRATIONS.STAR_WITH_GREEN_FILL} width={20} height={20} />\n                <Text $renderAs=\"ub3-bold\" $color=\"BLACK_T_60\">\n                  Trustpilot\n                </Text>\n              </FlexView>\n            </FlexView>\n          )}\n          <FlexView $width={isTeacher ? 'calc(50% - 2px)' : '100%'}>\n            <TeacherAVPanel />\n          </FlexView>\n          <FlexView $width={isTeacher ? 'calc(50% - 2px)' : '100%'}>\n            <StudentAVPanel insideLeftPanel />\n          </FlexView>\n        </FlexView>\n      )}\n      {isTeacher && (\n        <>\n          <Styled.ContentWrapper\n            $background=\"WHITE_3\"\n            $justifyContent={renderAVIn === 'left' ? 'flex-start' : 'center'}\n          >\n            <FlexView $gutterX={0.75} $gapX={1.5} $flexGapX={1.5}>\n              {cues.length > 0 && <Cues cues={cues} />}\n              {solutions && solutions.length > 0 && <Solutions solutions={solutions} />}\n              {dos.length + donts.length > 0 && <Tips dos={dos} donts={donts} />}\n              {id === TrialPageId.LEARNING_WORKSHEET && questionsRatingPanel}\n            </FlexView>\n          </Styled.ContentWrapper>\n          {id === TrialPageId.LEARNING_WORKSHEET && worksheetNavigationPanel ? (\n            worksheetNavigationPanel\n          ) : (\n            <NavigationBar />\n          )}\n        </>\n      )}\n    </Styled.Container>\n  );\n};\n\nexport default LeftPanel;\n"],"names":["LeftPanel","isTeacher","slideConfig","worksheetNavigationPanel","questionsRatingPanel","useTrialSessionContext","cues","dos","donts","renderAVIn","id","solutions","jsxs","Styled.Container","TEACHER_LEFT_PANEL_MAX_WIDTH","STUDENT_LEFT_PANEL_MAX_WIDTH","FlexView","jsx","CuemathLogo","getTheme","Text","Image","ILLUSTRATIONS","TeacherAVPanel","StudentAVPanel","Fragment","Styled.ContentWrapper","Cues","Solutions","Tips","TrialPageId","NavigationBar"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAMA,IAAsB,MAAM;AAChC,QAAM,EAAE,WAAAC,GAAW,aAAAC,GAAa,0BAAAC,GAA0B,sBAAAC,EAAA,IACxDC,KACI,EAAE,MAAAC,IAAO,CAAA,GAAI,KAAAC,IAAM,CAAC,GAAG,OAAAC,IAAQ,IAAI,YAAAC,GAAY,IAAAC,GAAI,WAAAC,MAAcT,KAAe,CAAA;AAElF,SAAA,CAACD,KAAaQ,MAAe,SACxB,OAIP,gBAAAG;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWZ,IAAYa,IAA+BC;AAAA,MAErD,UAAA;AAAA,QAAAN,MAAe,UACd,gBAAAG;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,QAAO;AAAA,YACP,gBAAgBf,IAAY,QAAQ;AAAA,YACpC,UAAUA,IAAY,OAAO;AAAA,YAC7B,OAAOA,IAAY,OAAO;AAAA,YAC1B,WAAWA,IAAY,OAAO;AAAA,YAE7B,UAAA;AAAA,cAAC,CAAAA,uBACCe,GAAS,EAAA,UAAU,KAAK,OAAO,GAAG,cAAc,KAC/C,UAAA;AAAA,gBAAC,gBAAAC,EAAAC,GAAA,EAAY,OAAO,KAAK,QAAQ,IAAI,OAAOC,EAAA,EAAW,OAAO,MAAO,CAAA;AAAA,gBACpE,gBAAAP,EAAAI,GAAA,EAAS,gBAAe,OAAM,aAAY,UACzC,UAAA;AAAA,kBAAA,gBAAAC,EAACG,GAAK,EAAA,WAAU,YAAW,QAAO,cAAa,UAE/C,kBAAA;AAAA,kBACA,gBAAAH,EAACI,GAAM,EAAA,YAAU,IAAC,KAAKC,EAAc,sBAAsB,OAAO,IAAI,QAAQ,GAAI,CAAA;AAAA,oCACjFF,GAAK,EAAA,WAAU,YAAW,QAAO,cAAa,UAE/C,cAAA;AAAA,gBAAA,GACF;AAAA,cAAA,GACF;AAAA,cAEF,gBAAAH,EAACD,KAAS,QAAQf,IAAY,oBAAoB,QAChD,UAAA,gBAAAgB,EAACM,KAAe,EAClB,CAAA;AAAA,cACA,gBAAAN,EAACD,GAAS,EAAA,QAAQf,IAAY,oBAAoB,QAChD,UAAC,gBAAAgB,EAAAO,GAAA,EAAe,iBAAe,GAAA,CAAC,EAClC,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QAEDvB,KAEG,gBAAAW,EAAAa,GAAA,EAAA,UAAA;AAAA,UAAA,gBAAAR;AAAA,YAACS;AAAAA,YAAA;AAAA,cACC,aAAY;AAAA,cACZ,iBAAiBjB,MAAe,SAAS,eAAe;AAAA,cAExD,4BAACO,GAAS,EAAA,UAAU,MAAM,OAAO,KAAK,WAAW,KAC9C,UAAA;AAAA,gBAAAV,EAAK,SAAS,KAAM,gBAAAW,EAAAU,GAAA,EAAK,MAAArB,GAAY;AAAA,gBACrCK,KAAaA,EAAU,SAAS,KAAK,gBAAAM,EAACW,KAAU,WAAAjB,GAAsB;AAAA,gBACtEJ,EAAI,SAASC,EAAM,SAAS,KAAM,gBAAAS,EAAAY,GAAA,EAAK,KAAAtB,GAAU,OAAAC,GAAc;AAAA,gBAC/DE,MAAOoB,EAAY,sBAAsB1B;AAAA,cAAA,GAC5C;AAAA,YAAA;AAAA,UACF;AAAA,UACCM,MAAOoB,EAAY,sBAAsB3B,IACxCA,sBAEC4B,GAAc,EAAA;AAAA,QAAA,GAEnB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"index.js","sources":["../../../../src/features/trial-session/left-panel/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport CuemathLogo from '../../../assets/line-icons/icons/cuemath-logo';\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { getTheme } from '../../ui/theme/get-theme';\nimport StudentAVPanel from '../comps/av-panels/student-av-panel/student-av-panel';\nimport TeacherAVPanel from '../comps/av-panels/teacher-av-panel/teacher-av-panel';\nimport Cues from '../comps/cue-tips/cues';\nimport Tips from '../comps/cue-tips/tips';\nimport NavigationBar from '../comps/navigation-bar';\nimport Solutions from '../comps/solutions';\nimport { useTrialSessionContext } from '../context/use-trial-session-context';\nimport {\n  STUDENT_LEFT_PANEL_MAX_WIDTH,\n  TEACHER_LEFT_PANEL_MAX_WIDTH,\n  TrialPageId,\n} from '../trial-session-constants';\nimport * as Styled from './left-panel-styled';\n\nconst LeftPanel: React.FC = () => {\n  const { isTeacher, slideConfig, worksheetNavigationPanel, questionsRatingPanel } =\n    useTrialSessionContext();\n  const { cues = [], dos = [], donts = [], renderAVIn, id, solutions } = slideConfig || {};\n\n  if (!isTeacher && renderAVIn !== 'left') {\n    return null;\n  }\n\n  return (\n    <Styled.Container\n      $maxWidth={isTeacher ? TEACHER_LEFT_PANEL_MAX_WIDTH : STUDENT_LEFT_PANEL_MAX_WIDTH}\n    >\n      {renderAVIn === 'left' && (\n        <FlexView\n          $width=\"100%\"\n          $flexDirection={isTeacher ? 'row' : 'column'}\n          $gutterX={isTeacher ? 0.25 : 0.5}\n          $gapX={isTeacher ? 0.25 : 0.5}\n          $flexGapX={isTeacher ? 0.25 : 0.5}\n        >\n          {!isTeacher && (\n            <FlexView $gutterX={0.5} $gapX={1} $flexRowGapX={0.5}>\n              <CuemathLogo width={108} height={16} color={getTheme().colors.BLACK} />\n              <FlexView $flexDirection=\"row\" $alignItems=\"center\">\n                <Text $renderAs=\"ub3-bold\" $color=\"BLACK_T_60\">\n                  4.8+ Rating on\n                </Text>\n                <Image withLoader src={ILLUSTRATIONS.STAR_WITH_GREEN_FILL} width={20} height={20} />\n                <Text $renderAs=\"ub3-bold\" $color=\"BLACK_T_60\">\n                  Trustpilot\n                </Text>\n              </FlexView>\n            </FlexView>\n          )}\n          <FlexView $width={isTeacher ? 'calc(50% - 2px)' : '100%'}>\n            <TeacherAVPanel />\n          </FlexView>\n          <FlexView $width={isTeacher ? 'calc(50% - 2px)' : '100%'}>\n            <StudentAVPanel insideLeftPanel />\n          </FlexView>\n        </FlexView>\n      )}\n      {isTeacher && (\n        <>\n          <Styled.ContentWrapper\n            $background=\"WHITE_3\"\n            $justifyContent={renderAVIn === 'left' ? 'flex-start' : 'center'}\n          >\n            <FlexView $gutterX={0.75} $gapX={1.5} $flexGapX={1.5}>\n              {cues.length > 0 && <Cues cues={cues} />}\n              {solutions && solutions.length > 0 && <Solutions solutions={solutions} />}\n              {dos.length + donts.length > 0 && <Tips dos={dos} donts={donts} />}\n              {id === TrialPageId.LEARNING_WORKSHEET && questionsRatingPanel}\n            </FlexView>\n          </Styled.ContentWrapper>\n          {id === TrialPageId.LEARNING_WORKSHEET && worksheetNavigationPanel ? (\n            worksheetNavigationPanel\n          ) : (\n            <NavigationBar />\n          )}\n        </>\n      )}\n    </Styled.Container>\n  );\n};\n\nexport default LeftPanel;\n"],"names":["LeftPanel","isTeacher","slideConfig","worksheetNavigationPanel","questionsRatingPanel","useTrialSessionContext","cues","dos","donts","renderAVIn","id","solutions","jsxs","Styled.Container","TEACHER_LEFT_PANEL_MAX_WIDTH","STUDENT_LEFT_PANEL_MAX_WIDTH","FlexView","jsx","CuemathLogo","getTheme","Text","Image","ILLUSTRATIONS","TeacherAVPanel","StudentAVPanel","Fragment","Styled.ContentWrapper","Cues","Solutions","Tips","TrialPageId","NavigationBar"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAMA,IAAsB,MAAM;AAChC,QAAM,EAAE,WAAAC,GAAW,aAAAC,GAAa,0BAAAC,GAA0B,sBAAAC,EAAA,IACxDC,KACI,EAAE,MAAAC,IAAO,CAAA,GAAI,KAAAC,IAAM,CAAC,GAAG,OAAAC,IAAQ,IAAI,YAAAC,GAAY,IAAAC,GAAI,WAAAC,MAAcT,KAAe,CAAA;AAElF,SAAA,CAACD,KAAaQ,MAAe,SACxB,OAIP,gBAAAG;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWZ,IAAYa,IAA+BC;AAAA,MAErD,UAAA;AAAA,QAAAN,MAAe,UACd,gBAAAG;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,QAAO;AAAA,YACP,gBAAgBf,IAAY,QAAQ;AAAA,YACpC,UAAUA,IAAY,OAAO;AAAA,YAC7B,OAAOA,IAAY,OAAO;AAAA,YAC1B,WAAWA,IAAY,OAAO;AAAA,YAE7B,UAAA;AAAA,cAAC,CAAAA,uBACCe,GAAS,EAAA,UAAU,KAAK,OAAO,GAAG,cAAc,KAC/C,UAAA;AAAA,gBAAC,gBAAAC,EAAAC,GAAA,EAAY,OAAO,KAAK,QAAQ,IAAI,OAAOC,EAAA,EAAW,OAAO,MAAO,CAAA;AAAA,gBACpE,gBAAAP,EAAAI,GAAA,EAAS,gBAAe,OAAM,aAAY,UACzC,UAAA;AAAA,kBAAA,gBAAAC,EAACG,GAAK,EAAA,WAAU,YAAW,QAAO,cAAa,UAE/C,kBAAA;AAAA,kBACA,gBAAAH,EAACI,GAAM,EAAA,YAAU,IAAC,KAAKC,EAAc,sBAAsB,OAAO,IAAI,QAAQ,GAAI,CAAA;AAAA,oCACjFF,GAAK,EAAA,WAAU,YAAW,QAAO,cAAa,UAE/C,cAAA;AAAA,gBAAA,GACF;AAAA,cAAA,GACF;AAAA,cAEF,gBAAAH,EAACD,KAAS,QAAQf,IAAY,oBAAoB,QAChD,UAAA,gBAAAgB,EAACM,KAAe,EAClB,CAAA;AAAA,cACA,gBAAAN,EAACD,GAAS,EAAA,QAAQf,IAAY,oBAAoB,QAChD,UAAC,gBAAAgB,EAAAO,GAAA,EAAe,iBAAe,GAAA,CAAC,EAClC,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QAEDvB,KAEG,gBAAAW,EAAAa,GAAA,EAAA,UAAA;AAAA,UAAA,gBAAAR;AAAA,YAACS;AAAAA,YAAA;AAAA,cACC,aAAY;AAAA,cACZ,iBAAiBjB,MAAe,SAAS,eAAe;AAAA,cAExD,4BAACO,GAAS,EAAA,UAAU,MAAM,OAAO,KAAK,WAAW,KAC9C,UAAA;AAAA,gBAAAV,EAAK,SAAS,KAAM,gBAAAW,EAAAU,GAAA,EAAK,MAAArB,GAAY;AAAA,gBACrCK,KAAaA,EAAU,SAAS,KAAK,gBAAAM,EAACW,KAAU,WAAAjB,GAAsB;AAAA,gBACtEJ,EAAI,SAASC,EAAM,SAAS,KAAM,gBAAAS,EAAAY,GAAA,EAAK,KAAAtB,GAAU,OAAAC,GAAc;AAAA,gBAC/DE,MAAOoB,EAAY,sBAAsB1B;AAAA,cAAA,GAC5C;AAAA,YAAA;AAAA,UACF;AAAA,UACCM,MAAOoB,EAAY,sBAAsB3B,IACxCA,sBAEC4B,GAAc,EAAA;AAAA,QAAA,GAEnB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

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

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;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;"}
+{"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;"}

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

@@ -0,0 +1,28 @@
+import r from "styled-components";
+import p from "../../../../assets/line-icons/icons/cross.js";
+const h = r.div(
+  ({ theme: n, $size: s, $disabled: o, $inputRenderAs: i }) => {
+    const { colors: c, input: t } = n, { iconsize: e } = t.sizes[s], { labelColorName: l } = t.variants[i];
+    return `
+        cursor: pointer;
+        width: ${e}px;
+        height: ${e}px;
+
+        align-self: center;
+        color: ${c[l[o ? "disabled" : "inactive"]]};
+        pointer-events: ${o ? "none" : "auto"};
+
+        & svg {
+          width: 100%;
+          height: 100%;
+        }
+    `;
+  }
+), m = r(p)`
+  cursor: pointer;
+`;
+export {
+  m as StyledCrossIcon,
+  h as StyledPrefixElementWrapper
+};
+//# sourceMappingURL=searchable-input-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"searchable-input-styled.js","sources":["../../../../../src/features/ui/inputs/searchable-input/searchable-input-styled.tsx"],"sourcesContent":["import type { IBaseInputProps } from '../base-input/base-input-types';\n\nimport styled from 'styled-components';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\n\ninterface IStyledBackIconProps {\n  $inputRenderAs: IBaseInputProps['renderAs'];\n  $size: IBaseInputProps['size'];\n  $disabled?: boolean;\n}\n\nconst StyledPrefixElementWrapper = styled.div<IStyledBackIconProps>(\n  ({ theme, $size, $disabled, $inputRenderAs }) => {\n    const { colors, input } = theme;\n    const { iconsize } = input.sizes[$size];\n    const { labelColorName } = input.variants[$inputRenderAs];\n\n    return `\n        cursor: pointer;\n        width: ${iconsize}px;\n        height: ${iconsize}px;\n\n        align-self: center;\n        color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n        pointer-events: ${$disabled ? 'none' : 'auto'};\n\n        & svg {\n          width: 100%;\n          height: 100%;\n        }\n    `;\n  },\n);\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  cursor: pointer;\n`;\n\nexport { StyledPrefixElementWrapper, StyledCrossIcon };\n"],"names":["StyledPrefixElementWrapper","styled","theme","$size","$disabled","$inputRenderAs","colors","input","iconsize","labelColorName","StyledCrossIcon","CrossIcon"],"mappings":";;AAYA,MAAMA,IAA6BC,EAAO;AAAA,EACxC,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,gBAAAC,QAAqB;AACzC,UAAA,EAAE,QAAAC,GAAQ,OAAAC,EAAU,IAAAL,GACpB,EAAE,UAAAM,EAAa,IAAAD,EAAM,MAAMJ,CAAK,GAChC,EAAE,gBAAAM,EAAmB,IAAAF,EAAM,SAASF,CAAc;AAEjD,WAAA;AAAA;AAAA,iBAEMG,CAAQ;AAAA,kBACPA,CAAQ;AAAA;AAAA;AAAA,iBAGTF,EAAOG,EAAeL,IAAY,aAAa,UAAU,CAAC,CAAC;AAAA,0BAClDA,IAAY,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOnD;AACF,GAEMM,IAAkBT,EAAOU,CAAS;AAAA;AAAA;"}

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

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

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

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

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

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

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

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

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

@@ -1,35 +1,40 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useTheme as s } from "styled-components";
-import c from "../text/text.js";
-import { TabWrapper as f } from "./tab-styled.js";
-const T = ({
-  $renderAs: o = "primary",
-  $size: r = "regular",
-  label: n,
-  $selected: t,
-  $width: a,
-  $disabled: m,
-  onClick: i
-}) => {
-  const {
-    tab: { sizes: p }
-  } = s();
-  return /* @__PURE__ */ e(
-    f,
-    {
-      $selected: t,
-      $width: a,
-      onClick: i,
-      $size: r,
-      $renderAs: o,
-      $disabled: m,
-      $justifyContent: "center",
-      $alignItems: "center",
-      children: /* @__PURE__ */ e(c, { $renderAs: p[r].textVariant, color: t ? "WHITE" : "BLACK", children: n })
-    }
-  );
-}, d = T;
+import { memo as c } from "react";
+import { useTheme as f } from "styled-components";
+import u from "../text/text.js";
+import { TabWrapper as T } from "./tab-styled.js";
+const l = c(
+  ({
+    $renderAs: o = "primary",
+    $size: r = "regular",
+    label: m,
+    $selected: t,
+    $width: n,
+    $disabled: a,
+    onClick: p,
+    shape: i = "square"
+  }) => {
+    const {
+      tab: { sizes: s }
+    } = f();
+    return /* @__PURE__ */ e(
+      T,
+      {
+        $selected: t,
+        $width: n,
+        onClick: p,
+        $size: r,
+        $renderAs: o,
+        $disabled: a,
+        $justifyContent: "center",
+        $alignItems: "center",
+        $shape: i,
+        children: /* @__PURE__ */ e(u, { $renderAs: s[r].textVariant, color: t ? "WHITE" : "BLACK", children: m })
+      }
+    );
+  }
+), $ = l;
 export {
-  d as default
+  $ as default
 };
 //# sourceMappingURL=tab.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../src/features/ui/tab/tab.tsx"],"sourcesContent":["import type { ITabProps } from './tab-types';\n\nimport React from 'react';\nimport { useTheme } from 'styled-components';\n\nimport Text from '../text/text';\nimport * as Styled from './tab-styled';\n\nconst TabComponent: React.FC<ITabProps> = ({\n  $renderAs = 'primary',\n  $size = 'regular',\n  label,\n  $selected,\n  $width,\n  $disabled,\n  onClick,\n}) => {\n  const {\n    tab: { sizes },\n  } = useTheme();\n\n  return (\n    <Styled.TabWrapper\n      $selected={$selected}\n      $width={$width}\n      onClick={onClick}\n      $size={$size}\n      $renderAs={$renderAs}\n      $disabled={$disabled}\n      $justifyContent=\"center\"\n      $alignItems=\"center\"\n    >\n      <Text $renderAs={sizes[$size].textVariant} color={$selected ? 'WHITE' : 'BLACK'}>\n        {label}\n      </Text>\n    </Styled.TabWrapper>\n  );\n};\n\nexport default TabComponent;\n"],"names":["TabComponent","$renderAs","$size","label","$selected","$width","$disabled","onClick","sizes","useTheme","jsx","Styled.TabWrapper","Text","Tab"],"mappings":";;;;AAQA,MAAMA,IAAoC,CAAC;AAAA,EACzC,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AACF,MAAM;AACE,QAAA;AAAA,IACJ,KAAK,EAAE,OAAAC,EAAM;AAAA,MACXC,EAAS;AAGX,SAAA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAAP;AAAA,MACA,QAAAC;AAAA,MACA,SAAAE;AAAA,MACA,OAAAL;AAAA,MACA,WAAAD;AAAA,MACA,WAAAK;AAAA,MACA,iBAAgB;AAAA,MAChB,aAAY;AAAA,MAEZ,UAAA,gBAAAI,EAACE,GAAK,EAAA,WAAWJ,EAAMN,CAAK,EAAE,aAAa,OAAOE,IAAY,UAAU,SACrE,UACHD,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEAU,IAAeb;"}
+{"version":3,"file":"tab.js","sources":["../../../../src/features/ui/tab/tab.tsx"],"sourcesContent":["import type { ITabProps } from './tab-types';\n\nimport React, { memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport Text from '../text/text';\nimport * as Styled from './tab-styled';\n\nconst TabComponent: React.FC<ITabProps> = memo(\n  ({\n    $renderAs = 'primary',\n    $size = 'regular',\n    label,\n    $selected,\n    $width,\n    $disabled,\n    onClick,\n    shape = 'square',\n  }) => {\n    const {\n      tab: { sizes },\n    } = useTheme();\n\n    return (\n      <Styled.TabWrapper\n        $selected={$selected}\n        $width={$width}\n        onClick={onClick}\n        $size={$size}\n        $renderAs={$renderAs}\n        $disabled={$disabled}\n        $justifyContent=\"center\"\n        $alignItems=\"center\"\n        $shape={shape}\n      >\n        <Text $renderAs={sizes[$size].textVariant} color={$selected ? 'WHITE' : 'BLACK'}>\n          {label}\n        </Text>\n      </Styled.TabWrapper>\n    );\n  },\n);\n\nexport default TabComponent;\n"],"names":["TabComponent","memo","$renderAs","$size","label","$selected","$width","$disabled","onClick","shape","sizes","useTheme","jsx","Styled.TabWrapper","Text","TabComponent$1"],"mappings":";;;;;AAQA,MAAMA,IAAoCC;AAAA,EACxC,CAAC;AAAA,IACC,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,EAAA,MACJ;AACE,UAAA;AAAA,MACJ,KAAK,EAAE,OAAAC,EAAM;AAAA,QACXC,EAAS;AAGX,WAAA,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,WAAAR;AAAA,QACA,QAAAC;AAAA,QACA,SAAAE;AAAA,QACA,OAAAL;AAAA,QACA,WAAAD;AAAA,QACA,WAAAK;AAAA,QACA,iBAAgB;AAAA,QAChB,aAAY;AAAA,QACZ,QAAQE;AAAA,QAER,UAAA,gBAAAG,EAACE,GAAK,EAAA,WAAWJ,EAAMP,CAAK,EAAE,aAAa,OAAOE,IAAY,UAAU,SACrE,UACHD,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF,GAEAW,IAAef;"}

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

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

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

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