@cuemath/leap 2.8.35-beta.0 → 2.8.36-link.0

package/dist/features/talk-meter/talk-meter-styled.js

@@ -0,0 +1,84 @@
+import i, { keyframes as o, css as s } from "styled-components";
+import p from "../../assets/line-icons/icons/cross.js";
+import l from "../ui/layout/flex-view.js";
+const r = o`
+    0% {
+        opacity: 0;
+        transform: translate(0%, -100%) scale(0);
+        height: 0px;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+        transform: translate(0%, 0%) scale(1);
+        height: 128px;
+    }
+`, c = o`
+    0% {
+        opacity: 1;
+        transform: translate(0%, 0%) scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: translate(0%, -100%) scale(1);
+        height: 0px;
+    }
+`, y = i(p)`
+  position: absolute;
+  top: 15px;
+  right: 20px;
+  color: black;
+  width: 20px;
+  height: 20px;
+  z-index: 2;
+`, f = i(l)(
+  ({ $isTeacher: n, $animated: t, $canAnimateIn: a, $canAnimateOut: e }) => `
+    width: 100%;
+    max-width: 336px;
+    
+    ${t ? `
+            height: 0;
+            opacity: 0;
+            display: none;
+          ` : `
+            height: 100%;
+            opacity: 1;
+            display: flex;
+          `}
+    
+    ${n ? null : s`
+            display: ${t ? "none" : "flex"};
+            top: ${t ? 70 : 0}px;
+            right: ${t ? 10 : 0}px;
+            z-index: 100;
+            position: ${t ? "fixed" : "relative"};
+          `}
+    
+    ${a ? `
+            animation-name: ${r};
+            animation-duration: 800ms;
+            animation-iteration-count: 1;
+            animation-timing-function: ease-out;
+            opacity: 1;
+            display: flex;
+            height: 128px;
+          ` : null}
+
+    ${e ? `
+            animation-name: ${c};
+            animation-duration: 400ms;
+            animation-iteration-count: 1;
+            animation-timing-function: ease-out;
+            opacity: 0;
+            display: none;
+            height: 0px;
+          ` : null}
+  `
+);
+export {
+  y as CloseIcon,
+  f as Wrapper
+};
+//# sourceMappingURL=talk-meter-styled.js.map

package/dist/features/talk-meter/talk-meter-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"talk-meter-styled.js","sources":["../../../src/features/talk-meter/talk-meter-styled.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nimport CrossIcon from '../../assets/line-icons/icons/cross';\nimport FlexView from '../ui/layout/flex-view';\n\nconst scaleInAnim = keyframes`\n    0% {\n        opacity: 0;\n        transform: translate(0%, -100%) scale(0);\n        height: 0px;\n    }\n    50% {\n        opacity: 1;\n    }\n    100% {\n        opacity: 1;\n        transform: translate(0%, 0%) scale(1);\n        height: 128px;\n    }\n`;\n\nconst scaleOutAnim = keyframes`\n    0% {\n        opacity: 1;\n        transform: translate(0%, 0%) scale(1);\n    }\n    100% {\n        opacity: 0;\n        transform: translate(0%, -100%) scale(1);\n        height: 0px;\n    }\n`;\n\nconst CloseIcon = styled(CrossIcon)`\n  position: absolute;\n  top: 15px;\n  right: 20px;\n  color: black;\n  width: 20px;\n  height: 20px;\n  z-index: 2;\n`;\n\nconst Wrapper = styled(FlexView)<{\n  $isTeacher: boolean;\n  $animated: boolean;\n  $canAnimateIn: boolean;\n  $canAnimateOut: boolean;\n}>(\n  ({ $isTeacher, $animated, $canAnimateIn, $canAnimateOut }) => `\n    width: 100%;\n    max-width: 336px;\n    \n    ${\n      $animated\n        ? `\n            height: 0;\n            opacity: 0;\n            display: none;\n          `\n        : `\n            height: 100%;\n            opacity: 1;\n            display: flex;\n          `\n    }\n    \n    ${\n      !$isTeacher\n        ? css`\n            display: ${$animated ? 'none' : 'flex'};\n            top: ${$animated ? 70 : 0}px;\n            right: ${$animated ? 10 : 0}px;\n            z-index: 100;\n            position: ${$animated ? 'fixed' : 'relative'};\n          `\n        : null\n    }\n    \n    ${\n      $canAnimateIn\n        ? `\n            animation-name: ${scaleInAnim};\n            animation-duration: 800ms;\n            animation-iteration-count: 1;\n            animation-timing-function: ease-out;\n            opacity: 1;\n            display: flex;\n            height: 128px;\n          `\n        : null\n    }\n\n    ${\n      $canAnimateOut\n        ? `\n            animation-name: ${scaleOutAnim};\n            animation-duration: 400ms;\n            animation-iteration-count: 1;\n            animation-timing-function: ease-out;\n            opacity: 0;\n            display: none;\n            height: 0px;\n          `\n        : null\n    }\n  `,\n);\n\nexport { Wrapper, CloseIcon };\n"],"names":["scaleInAnim","keyframes","scaleOutAnim","CloseIcon","styled","CrossIcon","Wrapper","FlexView","$isTeacher","$animated","$canAnimateIn","$canAnimateOut","css"],"mappings":";;;AAKA,MAAMA,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgBdC,IAAeD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYfE,IAAYC,EAAOC,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU5BC,IAAUF,EAAOG,CAAQ;AAAA,EAM7B,CAAC,EAAE,YAAAC,GAAY,WAAAC,GAAW,eAAAC,GAAe,gBAAAC,EAAqB,MAAA;AAAA;AAAA;AAAA;AAAA,MAK1DF,IACI;AAAA;AAAA;AAAA;AAAA,cAKA;AAAA;AAAA;AAAA;AAAA,WAKN;AAAA;AAAA,MAGGD,IAQG,OAPAI;AAAA,uBACaH,IAAY,SAAS,MAAM;AAAA,mBAC/BA,IAAY,KAAK,CAAC;AAAA,qBAChBA,IAAY,KAAK,CAAC;AAAA;AAAA,wBAEfA,IAAY,UAAU,UAAU;AAAA,WAGpD;AAAA;AAAA,MAGEC,IACI;AAAA,8BACoBV,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQ/B,IACN;AAAA;AAAA,MAGEW,IACI;AAAA,8BACoBT,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQhC,IACN;AAAA;AAEJ;"}

package/dist/features/talk-meter/talk-meter-view/talk-meter-view-styled.js

@@ -0,0 +1,22 @@
+import e from "styled-components";
+import i from "../../ui/layout/flex-view.js";
+const p = e(i)`
+  height: 104px;
+  transition: height 300ms ease-in-out;
+  z-index: 1;
+`;
+e.div(
+  ({ $avatarUrl: r }) => `
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: url(${r});
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+`
+);
+export {
+  p as MeterWrapper
+};
+//# sourceMappingURL=talk-meter-view-styled.js.map

package/dist/features/talk-meter/talk-meter-view/talk-meter-view-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"talk-meter-view-styled.js","sources":["../../../../src/features/talk-meter/talk-meter-view/talk-meter-view-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\n\nconst MeterWrapper = styled(FlexView)`\n  height: 104px;\n  transition: height 300ms ease-in-out;\n  z-index: 1;\n`;\n\nconst Avatar = styled.div<{ $avatarUrl: string }>(\n  ({ $avatarUrl }) => `\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: url(${$avatarUrl});\n  background-size: cover;\n  background-repeat: no-repeat;\n  position: relative;\n`,\n);\n\nexport { MeterWrapper, Avatar };\n"],"names":["MeterWrapper","styled","FlexView","$avatarUrl"],"mappings":";;AAIM,MAAAA,IAAeC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAMrBD,EAAO;AAAA,EACpB,CAAC,EAAE,YAAAE,EAAA,MAAiB;AAAA;AAAA;AAAA;AAAA,oBAIFA,CAAU;AAAA;AAAA;AAAA;AAAA;AAK9B;"}

package/dist/features/talk-meter/talk-meter-view/talk-meter-view.js

@@ -0,0 +1,89 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { memo as T } from "react";
+import { ILLUSTRATIONS as a } from "../../../assets/illustrations/illustrations.js";
+import l from "../../ui/image/image.js";
+import t from "../../ui/layout/flex-view.js";
+import b from "../../ui/separator/separator.js";
+import o from "../../ui/text/text.js";
+import { getMeterColor as p } from "../helper.js";
+import { MeterWrapper as $ } from "./talk-meter-view-styled.js";
+const g = {
+  MALE: "MALE",
+  FEMALE: "FEMALE",
+  OTHER: "OTHER"
+}, k = T((s) => {
+  const {
+    stdName: h = "Student",
+    tchName: u = "Teacher",
+    stdRatio: i = 10,
+    tchRatio: n = 20,
+    tchGender: A = "MALE",
+    userType: m
+  } = s, c = p(i), E = Math.abs(n - i), f = n > 0 && i > 0 && E < 95, d = m === "TEACHER";
+  return f ? /* @__PURE__ */ r(
+    $,
+    {
+      $gap: 12,
+      $gutter: 12,
+      $background: "WHITE",
+      $borderColor: "GREY_2",
+      $borderRadius: 12,
+      children: [
+        /* @__PURE__ */ e(o, { $renderAs: "ub3-bold", $align: "center", children: "50:50 TALK METER" }),
+        /* @__PURE__ */ e(b, { height: 8 }),
+        /* @__PURE__ */ r(t, { $flexDirection: "row", $alignItems: "center", $justifyContent: "space-between", children: [
+          /* @__PURE__ */ r(t, { $flexDirection: "row", $justifyContent: "center", $alignItems: "center", $flexGap: 4, children: [
+            /* @__PURE__ */ e(l, { src: a.ALIEN_4, width: 20, height: 20, withLoader: !0 }),
+            /* @__PURE__ */ e(o, { $renderAs: "ub3-bold", $color: "BLACK", children: d ? h : "You" })
+          ] }),
+          /* @__PURE__ */ r(t, { $flexDirection: "row", $justifyContent: "center", $alignItems: "center", $flexGap: 4, children: [
+            /* @__PURE__ */ e(o, { $renderAs: "ub3-bold", $color: "BLACK", children: d ? "You" : u }),
+            /* @__PURE__ */ e(
+              l,
+              {
+                src: A === g.MALE ? a.MALE_AVATAR : a.FEMALE_AVATAR,
+                width: 20,
+                height: 20,
+                withLoader: !0
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r(t, { $flexDirection: "row", $gap: 4, children: [
+          /* @__PURE__ */ e(
+            t,
+            {
+              $height: 8,
+              $width: `${i}%`,
+              $borderRadius: 4,
+              $background: c.STUDENT
+            }
+          ),
+          /* @__PURE__ */ e(
+            t,
+            {
+              $height: 8,
+              $width: `${n}%`,
+              $borderRadius: 4,
+              $background: c.TEACHER
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r(t, { $flexDirection: "row", $alignItems: "center", $justifyContent: "space-between", children: [
+          /* @__PURE__ */ r(o, { $renderAs: "ab2-black", $color: c.STUDENT, children: [
+            i,
+            " %"
+          ] }),
+          /* @__PURE__ */ r(o, { $renderAs: "ab2-black", $color: c.TEACHER, children: [
+            n,
+            " %"
+          ] })
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ e($, { $justifyContent: "center", $alignItems: "center", $gap: 12, $gutter: 12, children: /* @__PURE__ */ e(o, { $renderAs: "ub3-bold", $color: "BLACK", children: "Oops! There was insufficient data to calculate your Talk Ratio." }) });
+});
+export {
+  k as default
+};
+//# sourceMappingURL=talk-meter-view.js.map

package/dist/features/talk-meter/talk-meter-view/talk-meter-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"talk-meter-view.js","sources":["../../../../src/features/talk-meter/talk-meter-view/talk-meter-view.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { getMeterColor } from '../helper';\nimport * as Styled from './talk-meter-view-styled';\n\nconst GENDER = {\n  MALE: 'MALE',\n  FEMALE: 'FEMALE',\n  OTHER: 'OTHER',\n};\n\ninterface ITalkMeterView {\n  stdName?: string;\n  tchName?: string;\n  stdRatio: number;\n  tchRatio: number;\n  tchGender: keyof typeof GENDER;\n  userType: TUserTypes;\n}\n\nconst TalkMeterView: FC<ITalkMeterView> = memo(props => {\n  const {\n    stdName = 'Student',\n    tchName = 'Teacher',\n    stdRatio = 10,\n    tchRatio = 20,\n    tchGender = 'MALE',\n    userType,\n  } = props;\n  const colors = getMeterColor(stdRatio);\n  const diff = Math.abs(tchRatio - stdRatio);\n  const isValid = tchRatio > 0 && stdRatio > 0 && diff < 95;\n  const isTeacher = userType === 'TEACHER';\n\n  if (!isValid) {\n    return (\n      <Styled.MeterWrapper $justifyContent=\"center\" $alignItems=\"center\" $gap={12} $gutter={12}>\n        <Text $renderAs=\"ub3-bold\" $color=\"BLACK\">\n          Oops! There was insufficient data to calculate your Talk Ratio.\n        </Text>\n      </Styled.MeterWrapper>\n    );\n  }\n\n  return (\n    <Styled.MeterWrapper\n      $gap={12}\n      $gutter={12}\n      $background=\"WHITE\"\n      $borderColor=\"GREY_2\"\n      $borderRadius={12}\n    >\n      <Text $renderAs=\"ub3-bold\" $align=\"center\">\n        50:50 TALK METER\n      </Text>\n\n      <Separator height={8} />\n      <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"space-between\">\n        <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\" $flexGap={4}>\n          <Image src={ILLUSTRATIONS.ALIEN_4} width={20} height={20} withLoader />\n          <Text $renderAs=\"ub3-bold\" $color=\"BLACK\">\n            {isTeacher ? stdName : 'You'}\n          </Text>\n        </FlexView>\n        <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\" $flexGap={4}>\n          <Text $renderAs=\"ub3-bold\" $color=\"BLACK\">\n            {isTeacher ? 'You' : tchName}\n          </Text>\n          <Image\n            src={\n              tchGender === GENDER.MALE ? ILLUSTRATIONS.MALE_AVATAR : ILLUSTRATIONS.FEMALE_AVATAR\n            }\n            width={20}\n            height={20}\n            withLoader\n          />\n        </FlexView>\n      </FlexView>\n      <FlexView $flexDirection=\"row\" $gap={4}>\n        <FlexView\n          $height={8}\n          $width={`${stdRatio}%`}\n          $borderRadius={4}\n          $background={colors.STUDENT}\n        />\n        <FlexView\n          $height={8}\n          $width={`${tchRatio}%`}\n          $borderRadius={4}\n          $background={colors.TEACHER}\n        />\n      </FlexView>\n      <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"space-between\">\n        <Text $renderAs=\"ab2-black\" $color={colors.STUDENT}>\n          {stdRatio} %\n        </Text>\n        <Text $renderAs=\"ab2-black\" $color={colors.TEACHER}>\n          {tchRatio} %\n        </Text>\n      </FlexView>\n    </Styled.MeterWrapper>\n  );\n});\n\nexport default TalkMeterView;\n"],"names":["GENDER","TalkMeterView","memo","props","stdName","tchName","stdRatio","tchRatio","tchGender","userType","colors","getMeterColor","diff","isValid","isTeacher","jsxs","Styled.MeterWrapper","jsx","Text","Separator","FlexView","Image","ILLUSTRATIONS"],"mappings":"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"}

package/dist/features/talk-meter/talk-meter.js

@@ -0,0 +1,71 @@
+import { jsxs as c, Fragment as g, jsx as e } from "react/jsx-runtime";
+import { memo as y } from "react";
+import { getMeterColor as v } from "./helper.js";
+import { useTalkMeter as w } from "./hooks/use-talk-meter.js";
+import n from "./ripple/index.js";
+import { Wrapper as x, CloseIcon as S } from "./talk-meter-styled.js";
+import j from "./talk-meter-view/talk-meter-view.js";
+const B = y((m) => {
+  const {
+    animated: t = !0,
+    userType: a,
+    teacherId: l,
+    studentId: d,
+    studentName: h,
+    teacherName: T,
+    teacherGender: p,
+    classStartTime: u,
+    canDisplayBatch: f,
+    teacherTalkTime: k,
+    studentTalkTime: A,
+    avPackageEnabled: M,
+    teacherClassroomId: N,
+    lastBatchReceivedNo: I,
+    onDismissMeter: R,
+    onMessageReceive: C
+  } = m, { canAnimateOut: D, canAnimateIn: r, stdRatio: o, tchRatio: E, handleDismiss: $ } = w({
+    userType: a,
+    studentId: d,
+    teacherId: l,
+    classStartTime: u,
+    avPackageEnabled: M,
+    teacherClassroomId: N,
+    teacherTalkTime: k,
+    studentTalkTime: A,
+    lastBatchReceivedNo: I,
+    canDisplayBatch: f,
+    onMessageReceive: C,
+    onDismissMeter: R
+  }), i = v(o), s = a === "TEACHER";
+  return /* @__PURE__ */ c(
+    x,
+    {
+      $isTeacher: s,
+      $animated: t,
+      $canAnimateIn: r,
+      $canAnimateOut: D,
+      children: [
+        t && r && /* @__PURE__ */ c(g, { children: [
+          /* @__PURE__ */ e(n, { delay: 800, withAudio: !0, color: i.STUDENT }),
+          /* @__PURE__ */ e(n, { delay: 1050, withAudio: !1, color: i.STUDENT })
+        ] }),
+        /* @__PURE__ */ e(
+          j,
+          {
+            userType: a,
+            tchName: T,
+            stdName: h,
+            tchRatio: E,
+            stdRatio: o,
+            tchGender: p
+          }
+        ),
+        t && !s && /* @__PURE__ */ e(S, { onClick: $ })
+      ]
+    }
+  );
+}), V = B;
+export {
+  V as default
+};
+//# sourceMappingURL=talk-meter.js.map

package/dist/features/talk-meter/talk-meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"talk-meter.js","sources":["../../../src/features/talk-meter/talk-meter.tsx"],"sourcesContent":["import type { ITalkMeterProps } from './talk-meter-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport { getMeterColor } from './helper';\nimport { useTalkMeter } from './hooks/use-talk-meter';\nimport Ripple from './ripple';\nimport * as Styled from './talk-meter-styled';\nimport TalkMeterView from './talk-meter-view/talk-meter-view';\n\nconst TalkMeter: FC<ITalkMeterProps> = memo(props => {\n  const {\n    animated = true,\n    userType,\n    teacherId,\n    studentId,\n    studentName,\n    teacherName,\n    teacherGender,\n    classStartTime,\n    canDisplayBatch,\n    teacherTalkTime,\n    studentTalkTime,\n    avPackageEnabled,\n    teacherClassroomId,\n    lastBatchReceivedNo,\n    onDismissMeter,\n    onMessageReceive,\n  } = props;\n\n  const { canAnimateOut, canAnimateIn, stdRatio, tchRatio, handleDismiss } = useTalkMeter({\n    userType,\n    studentId,\n    teacherId,\n    classStartTime,\n    avPackageEnabled,\n    teacherClassroomId,\n    teacherTalkTime,\n    studentTalkTime,\n    lastBatchReceivedNo,\n    canDisplayBatch,\n    onMessageReceive,\n    onDismissMeter,\n  });\n\n  const colors = getMeterColor(stdRatio);\n  const isTeacher = userType === 'TEACHER';\n\n  return (\n    <Styled.Wrapper\n      $isTeacher={isTeacher}\n      $animated={animated}\n      $canAnimateIn={canAnimateIn}\n      $canAnimateOut={canAnimateOut}\n    >\n      {animated && canAnimateIn && (\n        <>\n          <Ripple delay={800} withAudio color={colors.STUDENT} />\n          <Ripple delay={1050} withAudio={false} color={colors.STUDENT} />\n        </>\n      )}\n      <TalkMeterView\n        userType={userType}\n        tchName={teacherName}\n        stdName={studentName}\n        tchRatio={tchRatio}\n        stdRatio={stdRatio}\n        tchGender={teacherGender}\n      />\n      {animated && !isTeacher && <Styled.CloseIcon onClick={handleDismiss} />}\n    </Styled.Wrapper>\n  );\n});\n\nexport default TalkMeter;\n"],"names":["TalkMeter","memo","props","animated","userType","teacherId","studentId","studentName","teacherName","teacherGender","classStartTime","canDisplayBatch","teacherTalkTime","studentTalkTime","avPackageEnabled","teacherClassroomId","lastBatchReceivedNo","onDismissMeter","onMessageReceive","canAnimateOut","canAnimateIn","stdRatio","tchRatio","handleDismiss","useTalkMeter","colors","getMeterColor","isTeacher","jsxs","Styled.Wrapper","Fragment","jsx","Ripple","TalkMeterView","Styled.CloseIcon","TalkMeter$1"],"mappings":";;;;;;;AAWA,MAAMA,IAAiCC,EAAK,CAASC,MAAA;AAC7C,QAAA;AAAA,IACJ,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,EACE,IAAAhB,GAEE,EAAE,eAAAiB,GAAe,cAAAC,GAAc,UAAAC,GAAU,UAAAC,GAAU,eAAAC,MAAkBC,EAAa;AAAA,IACtF,UAAApB;AAAA,IACA,WAAAE;AAAA,IACA,WAAAD;AAAA,IACA,gBAAAK;AAAA,IACA,kBAAAI;AAAA,IACA,oBAAAC;AAAA,IACA,iBAAAH;AAAA,IACA,iBAAAC;AAAA,IACA,qBAAAG;AAAA,IACA,iBAAAL;AAAA,IACA,kBAAAO;AAAA,IACA,gBAAAD;AAAA,EAAA,CACD,GAEKQ,IAASC,EAAcL,CAAQ,GAC/BM,IAAYvB,MAAa;AAG7B,SAAA,gBAAAwB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,YAAYF;AAAA,MACZ,WAAWxB;AAAA,MACX,eAAeiB;AAAA,MACf,gBAAgBD;AAAA,MAEf,UAAA;AAAA,QAAAhB,KAAYiB,KAET,gBAAAQ,EAAAE,GAAA,EAAA,UAAA;AAAA,UAAA,gBAAAC,EAACC,KAAO,OAAO,KAAK,WAAS,IAAC,OAAOP,EAAO,SAAS;AAAA,UACrD,gBAAAM,EAACC,KAAO,OAAO,MAAM,WAAW,IAAO,OAAOP,EAAO,SAAS;AAAA,QAAA,GAChE;AAAA,QAEF,gBAAAM;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,UAAA7B;AAAA,YACA,SAASI;AAAA,YACT,SAASD;AAAA,YACT,UAAAe;AAAA,YACA,UAAAD;AAAA,YACA,WAAWZ;AAAA,UAAA;AAAA,QACb;AAAA,QACCN,KAAY,CAACwB,KAAa,gBAAAI,EAACG,GAAA,EAAiB,SAASX,GAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3E,CAAC,GAEDY,IAAenC;"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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