wini-web-components 2.6.9 → 2.7.0

package/dist/component/date-time-picker/date-time-picker.js

@@ -308,7 +308,7 @@ const PopupDateTimePicker = (0, react_1.forwardRef)(function PopupDateTimePicker
                             (0, popup_1.showPopup)({
                                 ref: popupRef,
                                 clickOverlayClosePopup: true,
-                                content: react_2.default.createElement("div", { className: `col ${date_time_picker_module_css_1.default['popup-actions']}`, style: { maxHeight: "24rem", top: rect.bottom + 2, right: document.body.offsetWidth - rect.right, width: rect.width, overflow: "hidden auto", backgroundColor: "var(--neutral-absolute-background-color)", borderRadius: "0.8rem" } }, Array.from({ length: 48 }).map((_, i) => {
+                                content: react_2.default.createElement("div", { className: `col ${date_time_picker_module_css_1.default['popup-actions']}`, style: { maxHeight: "24rem", top: rect.bottom + 2, right: document.body.offsetWidth - rect.right, width: rect.width, overflow: "hidden auto", border: "var(--neutral-main-border)" } }, Array.from({ length: 48 }).map((_, i) => {
                                     if (i % 2 === 0)
                                         var timeValue = `${(i / 2) < 9 ? `0${i / 2}` : (i / 2)}:00`;
                                     else
@@ -336,7 +336,7 @@ const PopupDateTimePicker = (0, react_1.forwardRef)(function PopupDateTimePicker
                                 (0, popup_1.showPopup)({
                                     ref: popupRef,
                                     clickOverlayClosePopup: true,
-                                    content: react_2.default.createElement("div", { className: `col ${date_time_picker_module_css_1.default['popup-actions']}`, style: { maxHeight: "24rem", top: rect.bottom + 2, right: document.body.offsetWidth - rect.right, width: rect.width, overflow: "hidden auto", backgroundColor: "var(--neutral-absolute-background-color)", borderRadius: "0.8rem" } }, Array.from({ length: 48 }).map((_, i) => {
+                                    content: react_2.default.createElement("div", { className: `col ${date_time_picker_module_css_1.default['popup-actions']}`, style: { maxHeight: "24rem", top: rect.bottom + 2, right: document.body.offsetWidth - rect.right, width: rect.width, overflow: "hidden auto", border: "var(--neutral-main-border)" } }, Array.from({ length: 48 }).map((_, i) => {
                                         if (i % 2 === 0)
                                             var timeValue = `${(i / 2) < 9 ? `0${i / 2}` : (i / 2)}:00`;
                                         else

package/dist/component/input-opt/input-opt.d.ts

@@ -1,21 +1,21 @@
-import React, { CSSProperties, ReactNode } from "react";
-interface Props {
-    id?: string;
-    onChange?: (value: string, target: HTMLDivElement) => void;
-    disabled?: boolean;
-    value?: string;
-    length?: number;
-    inputStyle?: CSSProperties;
-    style?: CSSProperties;
-    className?: string;
-    helperText?: string;
-    helperTextColor?: string;
-}
-export declare class InputOpt extends React.Component<Props> {
-    private containerRef;
-    constructor(props: Props | Readonly<Props>);
-    getValue: () => string;
-    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<{}>, snapshot?: any): void;
-    render(): ReactNode;
-}
-export {};
+import React, { CSSProperties, ReactNode } from "react";
+interface Props {
+    id?: string;
+    onChange?: (value: string, target: HTMLDivElement) => void;
+    disabled?: boolean;
+    value?: string;
+    length?: number;
+    inputStyle?: CSSProperties;
+    style?: CSSProperties;
+    className?: string;
+    helperText?: string;
+    helperTextColor?: string;
+}
+export declare class InputOpt extends React.Component<Props> {
+    private containerRef;
+    constructor(props: Props | Readonly<Props>);
+    getValue: () => string;
+    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<{}>, snapshot?: any): void;
+    render(): ReactNode;
+}
+export {};

package/dist/component/input-opt/input-opt.js

@@ -1,157 +1,157 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputOpt = void 0;
-var react_1 = __importStar(require("react"));
-var input_opt_module_css_1 = __importDefault(require("./input-opt.module.css"));
-var InputOpt = /** @class */ (function (_super) {
-    __extends(InputOpt, _super);
-    function InputOpt(props) {
-        var _this = _super.call(this, props) || this;
-        _this.containerRef = (0, react_1.createRef)();
-        _this.getValue = function () {
-            var _a;
-            if (_this.containerRef.current)
-                return __spreadArray([], _this.containerRef.current.querySelectorAll("input"), true).map(function (v) { return v.value; }).join("");
-            else
-                return (_a = _this.props.value) !== null && _a !== void 0 ? _a : "";
-        };
-        _this.getValue = _this.getValue.bind(_this);
-        return _this;
-    }
-    InputOpt.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {
-        var _a;
-        if (prevProps.value !== this.props.value && this.containerRef.current) {
-            var inputList = __spreadArray([], this.containerRef.current.querySelectorAll("input"), true);
-            if ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.length) {
-                for (var i = 0; i < inputList.length; i++)
-                    inputList[i].value = this.props.value[i];
-            }
-            else {
-                for (var i = 0; i < inputList.length; i++)
-                    inputList[i].value = "";
-            }
-        }
-    };
-    InputOpt.prototype.render = function () {
-        var _this = this;
-        var _a, _b, _c, _d, _e;
-        return react_1.default.createElement("div", { id: this.props.id, ref: this.containerRef, "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_a = this.props.helperTextColor) !== null && _a !== void 0 ? _a : '#e14337' }), this.props.style) : { '--helper-text-color': (_b = this.props.helperTextColor) !== null && _b !== void 0 ? _b : '#e14337' }, className: "row body-1 ".concat(input_opt_module_css_1.default['input-opt-container'], " ").concat(((_c = this.props.helperText) === null || _c === void 0 ? void 0 : _c.length) && 'helper-text', " ").concat((_d = this.props.className) !== null && _d !== void 0 ? _d : ''), onMouseDown: function (ev) {
-                ev.stopPropagation();
-                ev.preventDefault();
-                var inputList = __spreadArray([], ev.target.closest("div").childNodes, true);
-                for (var _i = 0, _a = inputList.entries(); _i < _a.length; _i++) {
-                    var _b = _a[_i], index = _b[0], input = _b[1];
-                    if (!input.value.length || index === (inputList.length - 1)) {
-                        input.focus();
-                        break;
-                    }
-                    continue;
-                }
-            } }, Array.from({ length: (_e = this.props.length) !== null && _e !== void 0 ? _e : 6 }).map(function (_, i) { return react_1.default.createElement("input", { key: "opt-" + i, disabled: _this.props.disabled, style: _this.props.inputStyle, onKeyDown: function (ev) {
-                var _a, _b;
-                var key = ev.key.toLowerCase();
-                switch (key) {
-                    case "backspace":
-                        if (ev.target.value.length)
-                            ev.target.value = "";
-                        else if (((_a = ev.target.previousSibling) === null || _a === void 0 ? void 0 : _a.localName) === "input")
-                            ev.target.previousSibling.focus();
-                        else
-                            ev.target.blur();
-                        break;
-                    case "delete":
-                        ev.target.value = "";
-                        break;
-                    default:
-                        ev.preventDefault();
-                        ev.stopPropagation();
-                        var numberCheck = /[0-9]/g;
-                        if (numberCheck.test(key)) {
-                            if (!ev.target.value.length)
-                                ev.target.value = key;
-                            if (((_b = ev.target.nextSibling) === null || _b === void 0 ? void 0 : _b.localName) === "input" && !ev.target.nextSibling.value.length)
-                                ev.target.nextSibling.focus();
-                            else
-                                ev.target.blur();
-                        }
-                        break;
-                }
-            }, onBlur: function () {
-                if (_this.props.onChange)
-                    _this.props.onChange(_this.getValue(), _this.containerRef.current);
-            } }); }));
-    };
-    return InputOpt;
-}(react_1.default.Component));
-exports.InputOpt = InputOpt;
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputOpt = void 0;
+var react_1 = __importStar(require("react"));
+var input_opt_module_css_1 = __importDefault(require("./input-opt.module.css"));
+var InputOpt = /** @class */ (function (_super) {
+    __extends(InputOpt, _super);
+    function InputOpt(props) {
+        var _this = _super.call(this, props) || this;
+        _this.containerRef = (0, react_1.createRef)();
+        _this.getValue = function () {
+            var _a;
+            if (_this.containerRef.current)
+                return __spreadArray([], _this.containerRef.current.querySelectorAll("input"), true).map(function (v) { return v.value; }).join("");
+            else
+                return (_a = _this.props.value) !== null && _a !== void 0 ? _a : "";
+        };
+        _this.getValue = _this.getValue.bind(_this);
+        return _this;
+    }
+    InputOpt.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {
+        var _a;
+        if (prevProps.value !== this.props.value && this.containerRef.current) {
+            var inputList = __spreadArray([], this.containerRef.current.querySelectorAll("input"), true);
+            if ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.length) {
+                for (var i = 0; i < inputList.length; i++)
+                    inputList[i].value = this.props.value[i];
+            }
+            else {
+                for (var i = 0; i < inputList.length; i++)
+                    inputList[i].value = "";
+            }
+        }
+    };
+    InputOpt.prototype.render = function () {
+        var _this = this;
+        var _a, _b, _c, _d, _e;
+        return react_1.default.createElement("div", { id: this.props.id, ref: this.containerRef, "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_a = this.props.helperTextColor) !== null && _a !== void 0 ? _a : '#e14337' }), this.props.style) : { '--helper-text-color': (_b = this.props.helperTextColor) !== null && _b !== void 0 ? _b : '#e14337' }, className: "row body-1 ".concat(input_opt_module_css_1.default['input-opt-container'], " ").concat(((_c = this.props.helperText) === null || _c === void 0 ? void 0 : _c.length) && 'helper-text', " ").concat((_d = this.props.className) !== null && _d !== void 0 ? _d : ''), onMouseDown: function (ev) {
+                ev.stopPropagation();
+                ev.preventDefault();
+                var inputList = __spreadArray([], ev.target.closest("div").childNodes, true);
+                for (var _i = 0, _a = inputList.entries(); _i < _a.length; _i++) {
+                    var _b = _a[_i], index = _b[0], input = _b[1];
+                    if (!input.value.length || index === (inputList.length - 1)) {
+                        input.focus();
+                        break;
+                    }
+                    continue;
+                }
+            } }, Array.from({ length: (_e = this.props.length) !== null && _e !== void 0 ? _e : 6 }).map(function (_, i) { return react_1.default.createElement("input", { key: "opt-" + i, disabled: _this.props.disabled, style: _this.props.inputStyle, onKeyDown: function (ev) {
+                var _a, _b;
+                var key = ev.key.toLowerCase();
+                switch (key) {
+                    case "backspace":
+                        if (ev.target.value.length)
+                            ev.target.value = "";
+                        else if (((_a = ev.target.previousSibling) === null || _a === void 0 ? void 0 : _a.localName) === "input")
+                            ev.target.previousSibling.focus();
+                        else
+                            ev.target.blur();
+                        break;
+                    case "delete":
+                        ev.target.value = "";
+                        break;
+                    default:
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        var numberCheck = /[0-9]/g;
+                        if (numberCheck.test(key)) {
+                            if (!ev.target.value.length)
+                                ev.target.value = key;
+                            if (((_b = ev.target.nextSibling) === null || _b === void 0 ? void 0 : _b.localName) === "input" && !ev.target.nextSibling.value.length)
+                                ev.target.nextSibling.focus();
+                            else
+                                ev.target.blur();
+                        }
+                        break;
+                }
+            }, onBlur: function () {
+                if (_this.props.onChange)
+                    _this.props.onChange(_this.getValue(), _this.containerRef.current);
+            } }); }));
+    };
+    return InputOpt;
+}(react_1.default.Component));
+exports.InputOpt = InputOpt;

package/dist/component/input-otp/input-otp.d.ts

@@ -10,6 +10,7 @@ interface Props {
     className?: string;
     helperText?: string;
     helperTextColor?: string;
+    autoFocus?: boolean;
 }
 export declare class InputOtp extends React.Component<Props> {
     private containerRef;

package/dist/component/input-otp/input-otp.js

@@ -79,7 +79,7 @@ class InputOtp extends react_1.default.Component {
                     }
                     continue;
                 }
-            } }, Array.from({ length: (_e = this.props.length) !== null && _e !== void 0 ? _e : 6 }).map((_, i) => react_1.default.createElement("input", { key: "opt-" + i, disabled: this.props.disabled, style: this.props.inputStyle, onKeyDown: (ev) => {
+            } }, Array.from({ length: (_e = this.props.length) !== null && _e !== void 0 ? _e : 6 }).map((_, i) => react_1.default.createElement("input", { key: "opt-" + i, autoFocus: i === 0 && this.props.autoFocus, disabled: this.props.disabled, style: this.props.inputStyle, onKeyDown: (ev) => {
                 var _a, _b;
                 const key = ev.key.toLowerCase();
                 switch (key) {

package/dist/component/number-picker/number-picker.d.ts

@@ -5,6 +5,10 @@ interface Props {
     onChange?: (ev: number) => void;
     disabled?: boolean;
     readOnly?: boolean;
+    /**
+     * default: size32: body-3 \
+     * recommend: size40: body-2 | size24: body-3
+     * */
     className?: string;
     helperText?: string;
     helperTextColor?: string;

package/dist/component/tag/tag.d.ts

@@ -9,7 +9,8 @@ interface TagProps {
     style?: CSSProperties;
     /**
      * default: size24: button-text-6 \
-     * recommend: size24: button-text-6 | size32: button-text-4
+     * recommend: size24: button-text-6 | size32: button-text-4 \
+     * status tag: tag-primary | tag-infor | tag-warning | tag-error | tag-success | tag-grey | tag-neutral | tag-infor-main | tag-warning-main | tag-error-main | tag-success-main
      * */
     className?: string;
     status?: ComponentStatus;

package/dist/component/text-area/text-area.d.ts

@@ -1,5 +1,4 @@
 import React, { CSSProperties } from "react";
-import './text-area.css';
 import { UseFormRegister } from "react-hook-form";
 interface TextAreaProps {
     id?: string;

package/dist/component/text-area/text-area.js

@@ -32,10 +32,13 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextArea = void 0;
 const react_1 = __importStar(require("react"));
-require("./text-area.css");
+const text_area_module_css_1 = __importDefault(require("./text-area.module.css"));
 class TextArea extends react_1.default.Component {
     constructor() {
         super(...arguments);
@@ -47,7 +50,7 @@ class TextArea extends react_1.default.Component {
     }
     render() {
         var _a, _b, _c, _d;
-        return react_1.default.createElement("div", { ref: this.containerRef, id: this.props.id, className: `text-area-container row ${(_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3'} ${((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) && 'helper-text'}`, "helper-text": this.props.helperText, style: this.props.style ? Object.assign(Object.assign({}, { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), this.props.style) : { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' } }, this.props.register ?
+        return react_1.default.createElement("div", { ref: this.containerRef, id: this.props.id, className: `${text_area_module_css_1.default['text-area-container']} row ${(_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3'} ${((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) ? text_area_module_css_1.default['helper-text'] : ""}`, "helper-text": this.props.helperText, style: this.props.style ? Object.assign(Object.assign({}, { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), this.props.style) : { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' } }, this.props.register ?
             react_1.default.createElement("textarea", Object.assign({ name: this.props.name, autoFocus: this.props.autoFocus }, this.props.register, { maxLength: this.props.maxLength, placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onFocus: this.props.onFocus })) : react_1.default.createElement("textarea", { autoFocus: this.props.autoFocus, maxLength: this.props.maxLength, name: this.props.name, defaultValue: this.props.defaultValue, value: this.props.value, placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onChange: this.props.onChange, onFocus: this.props.onFocus, onBlur: this.props.onBlur }));
     }
 }

package/dist/component/text-field/text-field.d.ts

@@ -1,5 +1,4 @@
 import React, { CSSProperties, ReactNode } from "react";
-import './text-field.css';
 import { UseFormRegister } from "react-hook-form";
 interface TextFieldProps {
     id?: string;
@@ -13,6 +12,10 @@ interface TextFieldProps {
     placeholder?: string;
     disabled?: boolean;
     readOnly?: boolean;
+    /**
+     * default: size40: body-3
+     * recommend: size48: body-3 | size32: body-3 | size24: body-3
+     *  */
     className?: string;
     helperText?: string;
     name?: string;

package/dist/component/text-field/text-field.js

@@ -32,10 +32,13 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextField = void 0;
 const react_1 = __importStar(require("react"));
-require("./text-field.css");
+const text_field_module_css_1 = __importDefault(require("./text-field.module.css"));
 class TextField extends react_1.default.Component {
     constructor() {
         super(...arguments);
@@ -47,7 +50,7 @@ class TextField extends react_1.default.Component {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return react_1.default.createElement("div", { ref: this.containerRef, id: this.props.id, className: `text-field-container row ${(_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3'} ${((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) ? 'helper-text' : ""}`, "helper-text": this.props.helperText, style: this.props.style ? Object.assign(Object.assign({}, { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), this.props.style) : { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' } },
+        return react_1.default.createElement("div", { ref: this.containerRef, id: this.props.id, className: `${text_field_module_css_1.default['text-field-container']} row ${(_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3'} ${((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) ? text_field_module_css_1.default['helper-text'] : ""}`, "helper-text": this.props.helperText, style: this.props.style ? Object.assign(Object.assign({}, { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), this.props.style) : { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' } },
             this.props.prefix,
             this.props.register ?
                 react_1.default.createElement("input", Object.assign({ name: this.props.name }, this.props.register, { autoComplete: this.props.autoComplete, autoFocus: this.props.autoFocus, maxLength: this.props.maxLength, type: (_e = this.props.type) !== null && _e !== void 0 ? _e : 'text', placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onFocus: this.props.onFocus, onKeyDown: this.props.onComplete ? (ev) => {