@pequity/squirrel 6.0.11 → 6.0.13

package/dist/es/chunks/p-btn.types.js

@@ -0,0 +1,4 @@
+const SIZES = ["sm", "md", "lg"];
+export {
+  SIZES as S
+};

package/dist/es/chunks/p-info-icon.js

@@ -0,0 +1,38 @@
+import { defineComponent, resolveComponent, createBlock, openBlock, withCtx, createVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { _ as _sfc_main$1 } from "./p-icon.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PInfoIcon"
+  },
+  __name: "p-info-icon",
+  props: {
+    text: { default: null }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_VTooltip = resolveComponent("VTooltip");
+      return openBlock(), createBlock(_component_VTooltip, {
+        "popper-triggers": ["hover"],
+        delay: { show: 750, hide: 0 },
+        disabled: !_ctx.$slots.default && !_ctx.text
+      }, {
+        popper: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(_ctx.text), 1)
+          ])
+        ]),
+        default: withCtx(() => [
+          createVNode(_sfc_main$1, {
+            icon: "info",
+            class: "block h-3 w-3",
+            width: "12"
+          })
+        ]),
+        _: 3
+      }, 8, ["disabled"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/chunks/p-select.js

@@ -1,6 +1,6 @@
 import { defineComponent, useAttrs, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot, createElementVNode, withDirectives, createCommentVNode, toDisplayString, mergeProps, Fragment, renderList, vShow } from "vue";
+import { S as SIZES } from "./p-btn.types.js";
 import { useInputClasses } from "../useInputClasses.js";
-import { INPUT_SIZES } from "../inputClassesShared.js";
 const _hoisted_1 = ["data-has-error"];
 const _hoisted_2 = ["value"];
 const _hoisted_3 = ["value"];
@@ -36,7 +36,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       type: String,
       default: "md",
       validator(value) {
-        return Object.keys(INPUT_SIZES).includes(value);
+        return SIZES.includes(value);
       }
     },
     itemText: {

package/dist/es/index.js

@@ -19,52 +19,53 @@ import { useToast } from "vue-toastification";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 import { P_ICON_ALIASES } from "./p-icon.js";
 import { _ as _4 } from "./chunks/p-icon.js";
-import { default as default10 } from "./p-info-icon.js";
-import { _ as _5 } from "./chunks/p-inline-date-picker.js";
-import { default as default11 } from "./p-input.js";
-import { default as default12 } from "./p-input-number.js";
-import { _ as _6 } from "./chunks/p-input-percent.js";
+import { _ as _5 } from "./chunks/p-info-icon.js";
+import { _ as _6 } from "./chunks/p-inline-date-picker.js";
+import { default as default10 } from "./p-input.js";
+import { default as default11 } from "./p-input-number.js";
+import { _ as _7 } from "./chunks/p-input-percent.js";
 import PInputSearch from "./p-input-search.js";
-import { _ as _7 } from "./chunks/p-link.js";
-import { default as default13 } from "./p-loading.js";
+import { _ as _8 } from "./chunks/p-link.js";
+import { default as default12 } from "./p-loading.js";
 import { usePLoading } from "./usePLoading.js";
-import { default as default14 } from "./p-modal.js";
+import { default as default13 } from "./p-modal.js";
 import { usePModal } from "./usePModal.js";
-import { _ as _8 } from "./chunks/p-pagination.js";
-import { _ as _9 } from "./chunks/p-pagination-info.js";
-import { default as default15 } from "./p-progress-bar.js";
-import { _ as _10 } from "./chunks/p-ring-loader.js";
-import { _ as _11 } from "./chunks/p-select.js";
-import { _ as _12 } from "./chunks/p-select-btn.js";
+import { _ as _9 } from "./chunks/p-pagination.js";
+import { _ as _10 } from "./chunks/p-pagination-info.js";
+import { default as default14 } from "./p-progress-bar.js";
+import { _ as _11 } from "./chunks/p-ring-loader.js";
+import { _ as _12 } from "./chunks/p-select.js";
+import { _ as _13 } from "./chunks/p-select-btn.js";
 import { SIZES } from "./p-select-list.js";
 import { useSelectList } from "./useSelectList.js";
 import { toString } from "./string.js";
 import { splitStringForHighlight } from "./text.js";
-import { default as default16 } from "./p-select-pill.js";
-import { default as default17 } from "./p-skeleton-loader.js";
+import { default as default15 } from "./p-select-pill.js";
+import { default as default16 } from "./p-skeleton-loader.js";
 import { colsInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, isColsResizableInjectionKey } from "./p-table.js";
 import { MIN_WIDTH_COL_RESIZE } from "./p-table.js";
 import { usePTableColResize } from "./usePTableColResize.js";
 import PTableHeaderCell from "./p-table-header-cell.js";
 import { usePTableRowVirtualizer } from "./usePTableRowVirtualizer.js";
-import { default as default18 } from "./p-table-filter-icon.js";
-import { _ as _13 } from "./chunks/p-table-loader.js";
+import { default as default17 } from "./p-table-filter-icon.js";
+import { _ as _14 } from "./chunks/p-table-loader.js";
 import { SORTING_TYPES } from "./p-table-sort.js";
-import { default as default19 } from "./p-table-td.js";
-import { _ as _14 } from "./chunks/p-tabs.js";
-import { default as default20 } from "./p-textarea.js";
-import { default as default21 } from "./p-toggle.js";
+import { default as default18 } from "./p-table-td.js";
+import { _ as _15 } from "./chunks/p-tabs.js";
+import { default as default19 } from "./p-textarea.js";
+import { default as default20 } from "./p-toggle.js";
 import { squirrelTailwindConfig } from "./config.js";
+import { S } from "./chunks/p-btn.types.js";
 import { CURRENCY_INPUT_DEFAULTS } from "./currency.js";
 import { getNextActiveElement, isElement, isVisible } from "./dom.js";
-import { default as default22 } from "./inputClassesMixin.js";
-import { ERROR_MSG, INPUT_BASE, INPUT_ERROR, INPUT_NORMAL, INPUT_SIZES, LABEL_BASE, LABEL_REQUIRED, LABEL_SIZES, SELECT_ARROW, SELECT_BASE, SELECT_SIZES, SPACING_LEFT, SPACING_PREFIX, SPACING_RIGHT, SPACING_SUFFIX, TEXTAREA_BASE } from "./inputClassesShared.js";
+import { default as default21 } from "./inputClassesMixin.js";
 import { setupListKeyboardNavigation } from "./listKeyboardNavigation.js";
 import { toNumberOrNull } from "./number.js";
 import { isObject } from "./object.js";
 import { createPagingRange } from "./pagination.js";
 import { sanitizeUrl } from "./sanitization.js";
 import { getColor, getColorDeep, getScreen } from "./tailwind.js";
+import { M, N, f, i, c, x } from "./chunks/index.js";
 const _imports_0$1 = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.8335%206.25016L10.0002%202.0835L14.1668%206.25016'%20stroke='%23767189'%20stroke-width='1.25'%20/%3e%3cpath%20d='M10%202.0835V13.7502'%20stroke='%23767189'%20stroke-width='1.25'%20/%3e%3cpath%20d='M2.91675%2015V18.3333H17.0834V15'%20stroke='%23767189'%20stroke-width='1.25'%20/%3e%3c/svg%3e";
 const _imports_1$1 = "data:image/svg+xml,%3csvg%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M33%2012H14V44H42V21L33%2012Z'%20stroke='%231A123B'%20stroke-width='3'%20/%3e%3cpath%20d='M9%2036H6V4H25L28%207'%20stroke='%231A123B'%20stroke-width='3'%20/%3e%3cpath%20d='M37%2030H19M28%2021V39'%20stroke='%231A123B'%20stroke-width='3'%20/%3e%3c/svg%3e";
 const _hoisted_1$3 = ["data-has-error"];
@@ -165,8 +166,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     });
     const validateFiles = (filesToUpload) => {
       const res = [];
-      for (let i = 0; i < filesToUpload.length; i++) {
-        const file = filesToUpload[i];
+      for (let i2 = 0; i2 < filesToUpload.length; i2++) {
+        const file = filesToUpload[i2];
         const fileName = file.name || file.url;
         if (res.length + files.value.length >= props.maxNumberOfFiles) {
           toast.error(`You can only upload a maximum of ${props.maxNumberOfFiles} ${fileWord.value}.`);
@@ -198,11 +199,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
     const uploadFile = (e) => {
       var _a, _b;
-      const f = ((_a = e.target) == null ? void 0 : _a.files) || ((_b = e.dataTransfer) == null ? void 0 : _b.files);
-      if (!f) {
+      const f2 = ((_a = e.target) == null ? void 0 : _a.files) || ((_b = e.dataTransfer) == null ? void 0 : _b.files);
+      if (!f2) {
         return;
       }
-      const validatedFiles = props.fileTypes ? validateFiles(Array.from(f)) : f;
+      const validatedFiles = props.fileTypes ? validateFiles(Array.from(f2)) : f2;
       files.value = props.multiple ? [...files.value, ...validatedFiles] : validatedFiles;
       emit("file-added", validatedFiles);
     };
@@ -723,17 +724,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const emitScroll = (e) => {
       emit("scroll", e);
     };
-    const thDivClasses = (i) => {
+    const thDivClasses = (i2) => {
       const res = ["relative", "py-2"];
       res.push("border-b border-p-gray-30");
-      if (i === 0 && props.isFirstColFixed || i === props.cols.length - 1 && props.isLastColFixed) {
+      if (i2 === 0 && props.isFirstColFixed || i2 === props.cols.length - 1 && props.isLastColFixed) {
         res.push("th-shadow px-4");
       } else {
         !props.colsResizable ? res.push("px-2") : res.push("pl-2 pr-4");
       }
       return res;
     };
-    const thSubheaderClasses = (i) => {
+    const thSubheaderClasses = (i2) => {
       const res = [
         "flex",
         "h-6",
@@ -746,7 +747,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         "font-medium",
         "text-p-gray-40"
       ];
-      if (i === 0 && props.isFirstColFixed || i === props.cols.length - 1 && props.isLastColFixed) {
+      if (i2 === 0 && props.isFirstColFixed || i2 === props.cols.length - 1 && props.isLastColFixed) {
         res.push("th-shadow");
       }
       return res;
@@ -805,10 +806,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }, toHandlers(_ctx.colsResizable ? { mousemove: unref(colResize) } : {}, true)), [
           createElementVNode("thead", null, [
             createElementVNode("tr", null, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(props.cols, (col, i) => {
+              (openBlock(true), createElementBlock(Fragment, null, renderList(props.cols, (col, i2) => {
                 return openBlock(), createElementBlock("th", mergeProps({
                   ref_for: true,
-                  ref: (el) => updateThsRefs(el, i),
+                  ref: (el) => updateThsRefs(el, i2),
                   key: col.id,
                   "data-col-id": col.id
                 }, col.thAttrs, {
@@ -816,7 +817,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   class: "bg-surface"
                 }), [
                   createElementVNode("div", {
-                    class: normalizeClass(thDivClasses(i)),
+                    class: normalizeClass(thDivClasses(i2)),
                     style: normalizeStyle(bgColorStyle(col))
                   }, [
                     createElementVNode("div", _hoisted_2$1, [
@@ -826,24 +827,24 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                         "filter-active": col.filterActive,
                         "show-filter-icon": col.filterable || col.sortable,
                         "tooltip-text": col.tooltip,
-                        class: [{ "pl-2": i === 1 && _ctx.isFirstColFixed, "pr-2": i === _ctx.cols.length && _ctx.isLastColFixed }, "grow"],
+                        class: [{ "pl-2": i2 === 1 && _ctx.isFirstColFixed, "pr-2": i2 === _ctx.cols.length && _ctx.isLastColFixed }, "grow"],
                         "text-color": headerCellTextColor(col),
                         ref_for: true
                       }, col.headerCellAttrs, {
                         onClickFilterIcon: ($event) => _ctx.$emit("click-filter-icon", $event, col)
                       }), null, 16, ["text", "filter-active", "show-filter-icon", "tooltip-text", "class", "text-color", "onClickFilterIcon"])
                     ]),
-                    _ctx.colsResizable && i !== 0 && !(i === _ctx.cols.length - 1 && _ctx.isLastColFixed) ? (openBlock(), createElementBlock("div", {
+                    _ctx.colsResizable && i2 !== 0 && !(i2 === _ctx.cols.length - 1 && _ctx.isLastColFixed) ? (openBlock(), createElementBlock("div", {
                       key: 0,
-                      class: normalizeClass(["absolute bottom-2 right-0 z-110 h-5 w-2 cursor-col-resize after:absolute after:bottom-0 after:z-110 after:block after:h-full after:w-2 after:cursor-col-resize after:border-r-2 after:border-dashed after:border-p-gray-30", i === _ctx.cols.length - 1 ? "after:right-0.5" : "after:right-0"]),
+                      class: normalizeClass(["absolute bottom-2 right-0 z-110 h-5 w-2 cursor-col-resize after:absolute after:bottom-0 after:z-110 after:block after:h-full after:w-2 after:cursor-col-resize after:border-r-2 after:border-dashed after:border-p-gray-30", i2 === _ctx.cols.length - 1 ? "after:right-0.5" : "after:right-0"]),
                       "data-resize-handle": "",
-                      onMousedown: ($event) => unref(colResizeStart)($event, i),
-                      onDblclick: ($event) => unref(colResizeFitToData)(i)
+                      onMousedown: ($event) => unref(colResizeStart)($event, i2),
+                      onDblclick: ($event) => unref(colResizeFitToData)(i2)
                     }, null, 42, _hoisted_3$1)) : createCommentVNode("", true)
                   ], 6),
                   _ctx.subheader ? (openBlock(), createElementBlock("div", {
                     key: 0,
-                    class: normalizeClass(thSubheaderClasses(i))
+                    class: normalizeClass(thSubheaderClasses(i2))
                   }, [
                     renderSlot(_ctx.$slots, `subheader-cell-${unref(kebabCase)(col.name)}`, {}, void 0, true)
                   ], 2)) : createCommentVNode("", true)
@@ -955,14 +956,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 const pTableSort = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
   CURRENCY_INPUT_DEFAULTS,
-  ERROR_MSG,
-  INPUT_BASE,
-  INPUT_ERROR,
-  INPUT_NORMAL,
-  INPUT_SIZES,
-  LABEL_BASE,
-  LABEL_REQUIRED,
-  LABEL_SIZES,
   MIN_WIDTH_COL_RESIZE,
   _ as PActionBar,
   default2 as PAlert,
@@ -977,51 +970,48 @@ export {
   default9 as PDropdown,
   a as PDropdownSelect,
   pFileUpload as PFileUpload,
-  default18 as PFilterIcon,
+  default17 as PFilterIcon,
   _4 as PIcon,
-  default10 as PInfoIcon,
-  _5 as PInlineDatePicker,
-  default11 as PInput,
-  default12 as PInputNumber,
-  _6 as PInputPercent,
+  _5 as PInfoIcon,
+  _6 as PInlineDatePicker,
+  default10 as PInput,
+  default11 as PInputNumber,
+  _7 as PInputPercent,
   PInputSearch,
-  _7 as PLink,
-  default13 as PLoading,
-  default14 as PModal,
-  _8 as PPagination,
-  _9 as PPaginationInfo,
-  default15 as PProgressBar,
-  _10 as PRingLoader,
-  _11 as PSelect,
-  _12 as PSelectBtn,
+  _8 as PLink,
+  default12 as PLoading,
+  default13 as PModal,
+  _9 as PPagination,
+  _10 as PPaginationInfo,
+  default14 as PProgressBar,
+  _11 as PRingLoader,
+  _12 as PSelect,
+  _13 as PSelectBtn,
   _sfc_main$2 as PSelectList,
-  default16 as PSelectPill,
-  default17 as PSkeletonLoader,
+  default15 as PSelectPill,
+  default16 as PSkeletonLoader,
   pTable as PTable,
   PTableHeaderCell,
-  _13 as PTableLoader,
+  _14 as PTableLoader,
   pTableSort as PTableSort,
-  default19 as PTableTd,
-  _14 as PTabs,
-  default20 as PTextarea,
-  default21 as PToggle,
+  default18 as PTableTd,
+  _15 as PTabs,
+  default19 as PTextarea,
+  default20 as PToggle,
   P_ICON_ALIASES,
-  SELECT_ARROW,
-  SELECT_BASE,
-  SELECT_SIZES,
+  S as SIZES,
   SORTING_TYPES,
-  SPACING_LEFT,
-  SPACING_PREFIX,
-  SPACING_RIGHT,
-  SPACING_SUFFIX,
-  TEXTAREA_BASE,
+  M as cn,
+  N as cnBase,
   colsInjectionKey,
   createPagingRange,
+  f as createTV,
+  i as defaultConfig,
   getColor,
   getColorDeep,
   getNextActiveElement,
   getScreen,
-  default22 as inputClassesMixin,
+  default21 as inputClassesMixin,
   isColsResizableInjectionKey,
   isElement,
   isFirstColFixedInjectionKey,
@@ -1034,10 +1024,12 @@ export {
   squirrelTailwindConfig,
   toNumberOrNull,
   toString,
+  c as tv,
   useInputClasses,
   usePLoading,
   usePModal,
   usePTableColResize,
   usePTableRowVirtualizer,
-  useSelectList
+  useSelectList,
+  x as voidEmpty
 };

package/dist/es/inputClasses.js

@@ -0,0 +1,127 @@
+import { c as ce } from "./chunks/index.js";
+const inputClasses = ce({
+  slots: {
+    input: "w-full rounded border-0 bg-surface text-night ring-1 ring-inset ring-p-gray-30 placeholder:text-p-gray-40 hover:ring-primary focus:outline-none focus:ring-2 focus:ring-primary disabled:cursor-default disabled:bg-p-blue-10 disabled:ring-p-gray-30 disabled:hover:ring-p-gray-30",
+    label: "mb-1 block font-medium",
+    errorMessage: "mt-1 text-xs text-on-error"
+  },
+  variants: {
+    size: {
+      sm: {
+        input: "h-8 pl-3 pr-3 text-sm",
+        label: "text-xs"
+      },
+      md: {
+        input: "h-10 pl-4 pr-4 text-base",
+        label: "text-sm"
+      },
+      lg: {
+        input: "h-12 pl-5 pr-5 text-lg",
+        label: "text-base"
+      }
+    },
+    prefix: {
+      true: "pl-8"
+    },
+    suffix: {
+      true: "pr-6"
+    },
+    required: {
+      true: {
+        label: `after:text-on-error after:content-["_*"]`
+      }
+    },
+    error: {
+      true: {
+        input: "ring-on-error hover:ring-on-error focus:ring-on-error"
+      }
+    },
+    rounded: {
+      true: "rounded-full"
+    }
+  },
+  compoundVariants: [
+    {
+      size: "sm",
+      prefix: true,
+      class: {
+        input: "pl-6"
+      }
+    },
+    {
+      size: "md",
+      prefix: true,
+      class: {
+        input: "pl-8"
+      }
+    },
+    {
+      size: "lg",
+      prefix: true,
+      class: {
+        input: "pl-12"
+      }
+    },
+    {
+      size: "sm",
+      suffix: true,
+      class: {
+        input: "pr-6"
+      }
+    },
+    {
+      size: "md",
+      suffix: true,
+      class: {
+        input: "pr-8"
+      }
+    },
+    {
+      size: "lg",
+      suffix: true,
+      class: {
+        input: "pr-12"
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md"
+  }
+});
+const textareaClasses = ce({
+  extend: inputClasses,
+  slots: {
+    input: "resize-y overflow-auto px-3 py-3"
+  },
+  variants: {
+    size: {
+      md: {
+        input: "h-auto"
+      }
+    }
+  }
+});
+const selectClasses = ce({
+  extend: inputClasses,
+  slots: {
+    input: "squirrel-bg-chevron-down appearance-none truncate bg-no-repeat"
+  },
+  variants: {
+    size: {
+      sm: {
+        input: "bg-[right_0.675rem_center] pr-8"
+      },
+      md: {
+        input: "bg-[right_1rem_center] pr-10"
+      },
+      lg: {
+        input: "bg-[right_1.25rem_center] pr-12"
+      }
+    }
+  }
+});
+export {
+  inputClasses,
+  selectClasses,
+  textareaClasses
+};

package/dist/es/inputClassesMixin.js

@@ -1,4 +1,5 @@
-import { TEXTAREA_BASE, SELECT_BASE, SELECT_ARROW, SELECT_SIZES, SPACING_RIGHT, LABEL_BASE, LABEL_SIZES, LABEL_REQUIRED, INPUT_BASE, INPUT_SIZES, SPACING_PREFIX, SPACING_LEFT, SPACING_SUFFIX, INPUT_ERROR, INPUT_NORMAL, ERROR_MSG } from "./inputClassesShared.js";
+import { S as SIZES } from "./chunks/p-btn.types.js";
+import { textareaClasses, selectClasses, inputClasses } from "./inputClasses.js";
 import { defineComponent } from "vue";
 const inputClassesMixin = defineComponent({
   props: {
@@ -6,7 +7,7 @@ const inputClassesMixin = defineComponent({
       type: String,
       default: "md",
       validator(value) {
-        return Object.keys(INPUT_SIZES).includes(value);
+        return SIZES.includes(value);
       }
     },
     errorMsg: {
@@ -22,31 +23,34 @@ const inputClassesMixin = defineComponent({
       default: false
     }
   },
-  data() {
-    return {
-      errorMsgClasses: ERROR_MSG
-    };
-  },
   computed: {
+    allClasses() {
+      const { input, label, errorMessage } = inputClasses({
+        size: this.size,
+        prefix: !!this.$slots.prefix,
+        suffix: !!this.$slots.suffix,
+        required: this.required,
+        error: !!this.errorMsg,
+        rounded: this.rounded
+      });
+      return { input: input(), label: label(), errorMessage: errorMessage() };
+    },
     inputClasses() {
-      const base = `${INPUT_BASE} ${INPUT_SIZES[this.size]}`;
-      const spacingLeft = this.$slots.prefix ? SPACING_PREFIX[this.size] : SPACING_LEFT[this.size];
-      const spacingRight = this.$slots.suffix ? SPACING_SUFFIX[this.size] : SPACING_RIGHT[this.size];
-      const res = `${base} ${spacingLeft} ${spacingRight} ${this.errorMsg ? INPUT_ERROR : INPUT_NORMAL}${this.rounded ? " rounded-full" : ""}`;
-      return res;
+      return this.allClasses.input;
     },
     labelClasses() {
-      const base = `${LABEL_BASE} ${LABEL_SIZES[this.size]}`;
-      const res = this.required ? `${base} ${LABEL_REQUIRED}` : base;
-      return res;
+      return this.allClasses.label;
+    },
+    errorMsgClasses() {
+      return this.allClasses.errorMessage;
     },
     selectClasses() {
-      const res = `${this.inputClasses.replace(` ${SPACING_RIGHT[this.size]}`, "")} ${SELECT_BASE} ${SELECT_ARROW} ${SELECT_SIZES[this.size]}`;
-      return res;
+      const { input } = selectClasses({ size: this.size, required: this.required, error: !!this.errorMsg });
+      return input();
     },
     textareaClasses() {
-      const res = `${this.inputClasses} ${TEXTAREA_BASE}`;
-      return res;
+      const { input } = textareaClasses({ required: this.required, error: !!this.errorMsg });
+      return input();
     }
   }
 });