@ncds/ui-admin 1.0.1 → 1.1.0

package/dist/cjs/src/components/button/ButtonGroup.js

@@ -32,16 +32,16 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 var svgSize = {
-  xs: 12,
+  xxs: 12,
+  xs: 16,
   sm: 16,
-  md: 16,
-  lg: 20
+  md: 20
 };
 var dotSize = {
+  xxs: 'sm',
   xs: 'sm',
-  sm: 'sm',
-  md: 'md',
-  lg: 'md'
+  sm: 'md',
+  md: 'md'
 };
 var ButtonGroup = function (_a) {
   var children = _a.children,
@@ -49,7 +49,7 @@ var ButtonGroup = function (_a) {
     _b = _a.hasBorder,
     hasBorder = _b === void 0 ? true : _b,
     _c = _a.size,
-    size = _c === void 0 ? 'lg' : _c,
+    size = _c === void 0 ? 'xs' : _c,
     _d = _a.onlyIcon,
     onlyIcon = _d === void 0 ? false : _d,
     _e = _a.disabled,
@@ -78,7 +78,7 @@ ButtonGroup.Item = function (_a) {
     as = _c === void 0 ? 'button' : _c,
     label = _a.label,
     _d = _a.size,
-    size = _d === void 0 ? 'md' : _d,
+    size = _d === void 0 ? 'xs' : _d,
     onlyIcon = _a.onlyIcon,
     icon = _a.icon,
     disabled = _a.disabled,

package/dist/cjs/src/components/checkbox/Checkbox.js

@@ -28,7 +28,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 var Checkbox = function (_a) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     _c = _a.indeterminate,
     indeterminate = _c === void 0 ? false : _c,
     text = _a.text,

package/dist/cjs/src/components/checkbox/CheckboxInput.js

@@ -31,7 +31,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
  */
 var CheckboxInput = exports.CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     _c = _a.indeterminate,
     indeterminate = _c === void 0 ? false : _c,
     disabled = _a.disabled,

package/dist/cjs/src/components/date-picker/DatePicker.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.DatePicker = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
-require("flatpickr/dist/flatpickr.css");
 var _ko = require("flatpickr/dist/l10n/ko");
 var _react = require("react");
 var _reactFlatpickr = _interopRequireDefault(require("react-flatpickr"));
@@ -35,7 +34,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
     shouldFocus = _b === void 0 ? true : _b,
     currentDate = _a.currentDate,
     _c = _a.size,
-    size = _c === void 0 ? 'sm' : _c,
+    size = _c === void 0 ? 'xs' : _c,
     onChangeDate = _a.onChangeDate,
     datePickerOptions = _a.datePickerOptions,
     attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions"]);
@@ -51,7 +50,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
     onChange: onChangeDateHandler,
     allowInvalidPreload: true
   }, datePickerOptions);
-  var svgSize = size === 'sm' ? 14 : 16;
+  var svgSize = size === 'xs' ? 14 : 16;
   return (0, _jsxRuntime.jsxs)("div", __assign({
     className: (0, _classnames.default)('ncua-date-picker', "ncua-date-picker--".concat(size), {
       'ncua-date-picker--disabled': attrs.disabled

package/dist/cjs/src/components/input/InputBase.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.InputBase = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
-var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _color = require("../../../constant/color");
-var _Label = require("../shared/label/Label");
 var _HintText = require("../shared/hintText/HintText");
+var _Label = require("../shared/label/Label");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -32,15 +32,15 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 var validationSvgSize = {
   xs: 14,
-  md: 16
+  sm: 16
 };
 var generalSvgSize = {
   xs: 14,
-  md: 20
+  sm: 20
 };
 var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     required = _a.required,
     label = _a.label,
     hintText = _a.hintText,

package/dist/cjs/src/components/input/PasswordInput.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PasswordInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _InputBase = require("./InputBase");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _InputBase = require("./InputBase");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -30,11 +30,11 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 var svgSize = {
   xs: 14,
-  md: 20
+  sm: 20
 };
 var PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     props = __rest(_a, ["size"]);
   var inputRef = (0, _react.useRef)(null);
   var _c = (0, _react.useState)(false),

package/dist/cjs/src/components/input/Textarea.js

@@ -7,8 +7,8 @@ exports.Textarea = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _Label = require("../shared/label/Label");
 var _HintText = require("../shared/hintText/HintText");
+var _Label = require("../shared/label/Label");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -32,7 +32,7 @@ var Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)(function (
   var _b;
   var className = _a.className,
     _c = _a.size,
-    size = _c === void 0 ? 'md' : _c,
+    size = _c === void 0 ? 'xs' : _c,
     label = _a.label,
     required = _a.required,
     disabled = _a.disabled,

package/dist/cjs/src/components/radio/Radio.js

@@ -28,7 +28,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 var Radio = function (_a) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     text = _a.text,
     supportText = _a.supportText,
     disabled = _a.disabled,

package/dist/cjs/src/components/radio/RadioInput.js

@@ -28,7 +28,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 var RadioInput = exports.RadioInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     disabled = _a.disabled,
     className = _a.className,
     _c = _a.destructive,

package/dist/cjs/src/components/tab/HorizontalTab.js

@@ -7,7 +7,6 @@ exports.HorizontalTab = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _lodash = require("lodash");
-require("swiper/css");
 var _react = require("swiper/react");
 var _TabButton = require("./TabButton");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -24,13 +23,14 @@ var __assign = void 0 && (void 0).__assign || function () {
 var HorizontalTab = function (_a) {
   var _b = _a.type,
     type = _b === void 0 ? 'button-primary' : _b,
-    size = _a.size,
+    _c = _a.size,
+    size = _c === void 0 ? 'sm' : _c,
     activeTab = _a.activeTab,
     onClick = _a.onClick,
-    _c = _a.fullWidth,
-    fullWidth = _c === void 0 ? false : _c,
-    _d = _a.menus,
-    menus = _d === void 0 ? [] : _d;
+    _d = _a.fullWidth,
+    fullWidth = _d === void 0 ? false : _d,
+    _e = _a.menus,
+    menus = _e === void 0 ? [] : _e;
   var getTabGap = function (type) {
     var _a;
     var gap = {

package/dist/cjs/src/components/tab/TabButton.js

@@ -29,7 +29,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 var TabButton = function (_a) {
   var label = _a.label,
     _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
+    size = _b === void 0 ? 'sm' : _b,
     tabButtonType = _a.tabButtonType,
     type = _a.type,
     _c = _a.isActive,

package/dist/cjs/src/components/tab/VerticalTab.js

@@ -57,7 +57,7 @@ var VerticalTab = function (_a) {
         badgeInfo: menu.badgeInfo,
         isActive: isActive,
         tabButtonType: type,
-        size: 'sm',
+        size: 'md',
         onClick: function () {
           var _a;
           return onClick === null || onClick === void 0 ? void 0 : onClick((_a = menu.id) !== null && _a !== void 0 ? _a : '');

package/dist/esm/src/components/button/ButtonGroup.js

@@ -23,16 +23,16 @@ import React, { createElement } from 'react';
 import { COLOR } from '../../../constant/color';
 import { Dot } from '../dot';
 var svgSize = {
-  xs: 12,
+  xxs: 12,
+  xs: 16,
   sm: 16,
-  md: 16,
-  lg: 20
+  md: 20
 };
 var dotSize = {
+  xxs: 'sm',
   xs: 'sm',
-  sm: 'sm',
-  md: 'md',
-  lg: 'md'
+  sm: 'md',
+  md: 'md'
 };
 export var ButtonGroup = function (_a) {
   var children = _a.children,
@@ -40,7 +40,7 @@ export var ButtonGroup = function (_a) {
     _b = _a.hasBorder,
     hasBorder = _b === void 0 ? true : _b,
     _c = _a.size,
-    size = _c === void 0 ? 'lg' : _c,
+    size = _c === void 0 ? 'xs' : _c,
     _d = _a.onlyIcon,
     onlyIcon = _d === void 0 ? false : _d,
     _e = _a.disabled,
@@ -68,7 +68,7 @@ ButtonGroup.Item = function (_a) {
     as = _c === void 0 ? 'button' : _c,
     label = _a.label,
     _d = _a.size,
-    size = _d === void 0 ? 'md' : _d,
+    size = _d === void 0 ? 'xs' : _d,
     onlyIcon = _a.onlyIcon,
     icon = _a.icon,
     disabled = _a.disabled,

package/dist/esm/src/components/checkbox/Checkbox.js

@@ -21,7 +21,7 @@ import classNames from 'classnames';
 import { CheckboxInput } from './CheckboxInput';
 export var Checkbox = function (_a) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     _c = _a.indeterminate,
     indeterminate = _c === void 0 ? false : _c,
     text = _a.text,

package/dist/esm/src/components/checkbox/CheckboxInput.js

@@ -24,7 +24,7 @@ import { forwardRef } from 'react';
  */
 export var CheckboxInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     _c = _a.indeterminate,
     indeterminate = _c === void 0 ? false : _c,
     disabled = _a.disabled,

package/dist/esm/src/components/date-picker/DatePicker.js

@@ -18,7 +18,6 @@ var __rest = this && this.__rest || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import 'flatpickr/dist/flatpickr.css';
 import { Korean } from 'flatpickr/dist/l10n/ko';
 import { forwardRef } from 'react';
 import Flatpickr from 'react-flatpickr';
@@ -28,7 +27,7 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     shouldFocus = _b === void 0 ? true : _b,
     currentDate = _a.currentDate,
     _c = _a.size,
-    size = _c === void 0 ? 'sm' : _c,
+    size = _c === void 0 ? 'xs' : _c,
     onChangeDate = _a.onChangeDate,
     datePickerOptions = _a.datePickerOptions,
     attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions"]);
@@ -44,7 +43,7 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     onChange: onChangeDateHandler,
     allowInvalidPreload: true
   }, datePickerOptions);
-  var svgSize = size === 'sm' ? 14 : 16;
+  var svgSize = size === 'xs' ? 14 : 16;
   return _jsxs("div", __assign({
     className: classNames('ncua-date-picker', "ncua-date-picker--".concat(size), {
       'ncua-date-picker--disabled': attrs.disabled

package/dist/esm/src/components/input/InputBase.js

@@ -18,22 +18,22 @@ var __rest = this && this.__rest || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from '@ncds/ui-admin-icon';
-import { forwardRef } from 'react';
 import classNames from 'classnames';
+import { forwardRef } from 'react';
 import { COLOR } from '../../../constant/color';
-import { Label } from '../shared/label/Label';
 import { HintText } from '../shared/hintText/HintText';
+import { Label } from '../shared/label/Label';
 var validationSvgSize = {
   xs: 14,
-  md: 16
+  sm: 16
 };
 var generalSvgSize = {
   xs: 14,
-  md: 20
+  sm: 20
 };
 export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     required = _a.required,
     label = _a.label,
     hintText = _a.hintText,

package/dist/esm/src/components/input/PasswordInput.js

@@ -17,17 +17,17 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from 'react';
-import { InputBase } from './InputBase';
 import { Eye, EyeOff } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { InputBase } from './InputBase';
 var svgSize = {
   xs: 14,
-  md: 20
+  sm: 20
 };
 export var PasswordInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     props = __rest(_a, ["size"]);
   var inputRef = useRef(null);
   var _c = useState(false),

package/dist/esm/src/components/input/Textarea.js

@@ -19,13 +19,13 @@ var __rest = this && this.__rest || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { Label } from '../shared/label/Label';
 import { HintText } from '../shared/hintText/HintText';
+import { Label } from '../shared/label/Label';
 export var Textarea = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b;
   var className = _a.className,
     _c = _a.size,
-    size = _c === void 0 ? 'md' : _c,
+    size = _c === void 0 ? 'xs' : _c,
     label = _a.label,
     required = _a.required,
     disabled = _a.disabled,

package/dist/esm/src/components/radio/Radio.js

@@ -21,7 +21,7 @@ import classNames from 'classnames';
 import { RadioInput } from './RadioInput';
 export var Radio = function (_a) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     text = _a.text,
     supportText = _a.supportText,
     disabled = _a.disabled,

package/dist/esm/src/components/radio/RadioInput.js

@@ -21,7 +21,7 @@ import classNames from 'classnames';
 import { forwardRef } from 'react';
 export var RadioInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     disabled = _a.disabled,
     className = _a.className,
     _c = _a.destructive,

package/dist/esm/src/components/tab/HorizontalTab.js

@@ -11,19 +11,19 @@ var __assign = this && this.__assign || function () {
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { uniqueId } from 'lodash';
-import 'swiper/css';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { TabButton } from './TabButton';
 export var HorizontalTab = function (_a) {
   var _b = _a.type,
     type = _b === void 0 ? 'button-primary' : _b,
-    size = _a.size,
+    _c = _a.size,
+    size = _c === void 0 ? 'sm' : _c,
     activeTab = _a.activeTab,
     onClick = _a.onClick,
-    _c = _a.fullWidth,
-    fullWidth = _c === void 0 ? false : _c,
-    _d = _a.menus,
-    menus = _d === void 0 ? [] : _d;
+    _d = _a.fullWidth,
+    fullWidth = _d === void 0 ? false : _d,
+    _e = _a.menus,
+    menus = _e === void 0 ? [] : _e;
   var getTabGap = function (type) {
     var _a;
     var gap = {

package/dist/esm/src/components/tab/TabButton.js

@@ -22,7 +22,7 @@ import { Badge } from '../badge/Badge';
 export var TabButton = function (_a) {
   var label = _a.label,
     _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
+    size = _b === void 0 ? 'sm' : _b,
     tabButtonType = _a.tabButtonType,
     type = _a.type,
     _c = _a.isActive,

package/dist/esm/src/components/tab/VerticalTab.js

@@ -50,7 +50,7 @@ export var VerticalTab = function (_a) {
         badgeInfo: menu.badgeInfo,
         isActive: isActive,
         tabButtonType: type,
-        size: 'sm',
+        size: 'md',
         onClick: function () {
           var _a;
           return onClick === null || onClick === void 0 ? void 0 : onClick((_a = menu.id) !== null && _a !== void 0 ? _a : '');

package/dist/types/src/components/button/ButtonGroup.d.ts

@@ -1,7 +1,7 @@
 import React, { ComponentProps } from 'react';
 import { Size } from '../../../constant/size';
 import { SideSlotType } from '../../types/side-slot';
-export type ButtonGroupSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
+export type ButtonGroupSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
 interface SideCommon {
     position?: 'leading' | 'trailing';
 }

package/dist/types/src/components/checkbox/CheckboxInput.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEvent, ComponentPropsWithRef } from 'react';
 import { Size } from '../../../constant/size';
 export interface CheckboxInputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'ref'> {
-    size?: Extract<Size, 'sm' | 'md'>;
+    size?: Extract<Size, 'xs' | 'sm'>;
     indeterminate?: boolean;
     destructive?: boolean;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;

package/dist/types/src/components/date-picker/DatePicker.d.ts

@@ -1,9 +1,8 @@
-import 'flatpickr/dist/flatpickr.css';
 import { Options } from 'flatpickr/dist/types/options';
-import { DateTimePickerProps, DateTimePickerHandle } from 'react-flatpickr';
+import { DateTimePickerHandle, DateTimePickerProps } from 'react-flatpickr';
 import { Size } from '../../../constant/size';
 export type DatePickerProps = {
-    size?: Extract<Size, 'sm' | 'md'>;
+    size?: Extract<Size, 'xs' | 'sm'>;
     shouldFocus?: boolean;
     currentDate: string;
     datePickerOptions?: Options;

package/dist/types/src/components/input/InputBase.d.ts

@@ -30,7 +30,7 @@ interface InputBaseCommonProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     required?: boolean;
     label?: string;
     hintText?: string;
-    size?: Extract<Size, 'xs' | 'md'>;
+    size?: Extract<Size, 'xs' | 'sm'>;
     disabled?: boolean;
     validation?: boolean;
     destructive?: boolean;

package/dist/types/src/components/input/Textarea.d.ts

@@ -2,7 +2,7 @@ import { ComponentPropsWithRef } from 'react';
 import { Size } from '../../../constant/size';
 interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
     className?: string;
-    size?: Extract<Size, 'sm' | 'md'>;
+    size?: Extract<Size, 'xs' | 'sm'>;
     label?: string;
     hintText?: string;
     required?: boolean;

package/dist/types/src/components/radio/RadioInput.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEvent, ComponentPropsWithRef } from 'react';
 import { Size } from '../../../constant/size';
 export interface RadioInputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'ref'> {
-    size?: Extract<Size, 'sm' | 'md'>;
+    size?: Extract<Size, 'xs' | 'sm'>;
     destructive?: boolean;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }

package/dist/types/src/components/tab/HorizontalTab.d.ts

@@ -1,8 +1,7 @@
-import 'swiper/css';
-import { TabButtonProps, TabType } from './TabButton';
+import { TabButtonProps, TabSize, TabType } from './TabButton';
 export type HorizontalTabProps = {
     type?: Exclude<TabType, 'line-vertical'>;
-    size?: 'xs' | 'sm' | 'md';
+    size?: TabSize;
     activeTab?: string;
     fullWidth?: boolean;
     menus?: Array<TabButtonProps>;

package/dist/types/src/components/tab/TabButton.d.ts

@@ -1,6 +1,6 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
 import { BadgeProps } from '../badge/Badge';
-export type TabSize = 'xs' | 'sm' | 'md';
+export type TabSize = 'sm' | 'md' | 'lg';
 export type TabType = 'button-primary' | 'button-white' | 'underline' | 'underline-fill' | 'line-vertical';
 interface CommonProps {
     id?: string;