@ludo.ninja/components 2.3.6 → 2.3.8

package/build/system/Forms/Messages/index.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const messages = {
+    galleryName: {
+        maxLength: {
+            value: 30,
+            message: 'The Gallery name is too long 🤟',
+        },
+        required: 'Name is required',
+    },
+    galleryDescription: {
+        maxLength: {
+            value: 400,
+            message: 'Please enter no more than 400 characters',
+        },
+    },
+    username: {
+        minLength: {
+            value: 1,
+            message: 'The username is too small 🤟',
+        },
+        maxLength: {
+            value: 42,
+            message: 'The username is too long 🤟',
+        },
+    },
+    about: {
+        minLength: {
+            value: 2,
+            message: 'The bio is too small 🤟',
+        },
+        maxLength: {
+            value: 400,
+            message: 'Please enter no more than 400 characters',
+        },
+    },
+    userEmail: {
+        pattern: {
+            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
+            message: 'Invalid Email address',
+        },
+    },
+    inviteCode: {
+        minLength: {
+            value: 6,
+            message: 'Invite code is too small 🤟',
+        },
+        maxLength: {
+            value: 6,
+            message: 'Please enter no more than 6 characters',
+        },
+        required: 'Invite code is required',
+    },
+    userWeb: {
+        minLength: {
+            value: 2,
+            message: 'The website is too small 🤟',
+        },
+        maxLength: {
+            value: 64,
+            message: 'The website is too long 🤟',
+        },
+        pattern: {
+            value: /(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z]{2,}(\.[a-zA-Z]{2,})(\.[a-zA-Z]{2,})?\/[a-zA-Z0-9]{2,}|((https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z]{2,}(\.[a-zA-Z]{2,})(\.[a-zA-Z]{2,})?)|(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}(\.[a-zA-Z0-9]{2,})?/g,
+            message: 'Invalid Url address',
+        },
+    },
+};
+exports.default = messages;

package/build/system/Forms/RadioInput/RadioInput.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/system/Forms/RadioInput/RadioInput.test.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const index_1 = __importDefault(require("./index"));
+const mockData = {
+    value: 'test-radio-input',
+    label: 'Test RadioInput',
+    onChange: jest.fn(),
+    setFocus: jest.fn(),
+    className: 'test-radio-input-class',
+};
+const renderComponent = (options) => {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { radioLabel: mockData.label, radioValue: mockData.value, handleChange: mockData.onChange, radioChecked: options?.checked ?? true, className: mockData.className, innerTextInputRef: options?.innerTextInputRef, withInput: options?.withInput, setFocus: mockData.setFocus }));
+};
+describe('RadioInput Component', () => {
+    test('renders radio input element with correct attributes', () => {
+        renderComponent();
+        const inputElement = react_1.screen.getByLabelText(mockData.label);
+        expect(inputElement).toBeInTheDocument();
+        expect(inputElement.value).toBe('test-radio-input');
+        expect(inputElement.parentNode).toHaveClass(mockData.className);
+    });
+    test('calls onChange when radio input is changed', () => {
+        renderComponent({ checked: false });
+        const radioInput = react_1.screen.getByRole('radio');
+        react_1.fireEvent.click(radioInput);
+        expect(mockData.onChange).toHaveBeenCalledTimes(1);
+        expect(mockData.onChange).toHaveBeenCalledWith(mockData.value);
+    });
+    test('renders radio input with input field', () => {
+        const innerTextInputRef = {
+            name: 'test-input',
+            onBlur: jest.fn(),
+            onChange: jest.fn(),
+            ref: jest.fn(),
+        };
+        renderComponent({ innerTextInputRef, withInput: true });
+        const textInput = react_1.screen.getByRole('textbox');
+        expect(textInput).toBeInTheDocument();
+    });
+    test('sets focus on input field when radio input is changed and withInput is true', () => {
+        const innerTextInputRef = {
+            name: 'test-input',
+            onBlur: jest.fn(),
+            onChange: jest.fn(),
+            ref: jest.fn(),
+        };
+        renderComponent({ innerTextInputRef, withInput: true });
+        const radioInput = react_1.screen.getByRole('radio');
+        react_1.fireEvent.click(radioInput);
+        (0, react_1.waitFor)(() => {
+            expect(innerTextInputRef.onBlur).toHaveBeenCalledTimes(1);
+            expect(mockData.setFocus).toHaveBeenCalledTimes(1);
+            expect(mockData.setFocus).toHaveBeenCalledWith(innerTextInputRef.name);
+        });
+    });
+});

package/build/system/Forms/RadioInput/index.d.ts

@@ -0,0 +1,12 @@
+import { UseFormRegisterReturn } from 'react-hook-form';
+declare const BasicRadioInput: ({ radioLabel, radioValue, radioChecked, handleChange, className, withInput, innerTextInputRef, setFocus, }: {
+    radioLabel: string;
+    radioValue: string | number;
+    radioChecked: boolean;
+    handleChange: (value: string) => void;
+    className?: string;
+    withInput?: boolean;
+    innerTextInputRef?: UseFormRegisterReturn;
+    setFocus?: (value: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default BasicRadioInput;

package/build/system/Forms/RadioInput/index.js

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
+const colors_2 = require("../../../styles/colors");
+const Input_1 = require("../Input");
+const StyledLabel = styled_components_1.default.label `
+  position: relative;
+  padding: 8px 0 8px 27px;
+  cursor: pointer;
+  font-size: 1.4em;
+  color: ${colors_2.BlackColor};
+  font-weight: 500;
+  user-select: none;
+
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  input[type='radio'] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .checkmark {
+    position: absolute;
+    left: 0;
+    height: 18px;
+    width: 18px;
+    background-color: ${colors_1.BorderColorLight};
+    border-radius: 50%;
+    transition: background-color 200ms;
+  }
+
+  .checkmark:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: ${colors_2.WhiteColor};
+    transition: width 200ms, height 200ms;
+  }
+
+  input:checked ~ .checkmark,
+  .checked {
+    background-color: ${colors_2.AccentColor};
+  }
+
+  input:checked ~ .checkmark:after,
+  .checked:after {
+    width: 8px;
+    height: 8px;
+  }
+`;
+const BasicRadioInput = ({ radioLabel, radioValue, radioChecked, handleChange, className, withInput, innerTextInputRef, setFocus, }) => {
+    const handleChangeRadioInput = (e) => {
+        if (withInput) {
+            setTimeout(() => setFocus && innerTextInputRef && setFocus(innerTextInputRef.name), 0);
+        }
+        handleChange(e.target.value);
+    };
+    return ((0, jsx_runtime_1.jsxs)(StyledLabel, { className: className, children: [radioLabel, (0, jsx_runtime_1.jsx)("input", { type: "radio", checked: radioChecked, value: radioValue, id: `${radioValue}_${radioLabel}`, onChange: (e) => handleChangeRadioInput(e) }), withInput && ((0, jsx_runtime_1.jsx)(Input_1.StyledInput, { status: false, ...innerTextInputRef, disabled: !radioChecked })), (0, jsx_runtime_1.jsx)("span", { className: `checkmark` })] }));
+};
+exports.default = BasicRadioInput;

package/build/system/Forms/Selects/DesktopSelect/index.d.ts

@@ -0,0 +1,12 @@
+import { ISelectInput } from '../MobileSelect';
+import { ICollectionFilterInput, ICreationFilterInput } from "@ludo.ninja/api/build/graphql_tools/__generated__/searchHost/schema";
+import React from "react";
+interface Props {
+    options: ISelectInput[];
+    defaultOptionValue: string;
+    isLoading?: boolean;
+    onChangeHandler: (fieldName: keyof ICreationFilterInput & keyof ICollectionFilterInput, fieldValue: string) => Promise<void>;
+    name: string;
+}
+declare const DesktopSelect: React.FC<Props>;
+export default DesktopSelect;

package/build/system/Forms/Selects/DesktopSelect/index.js

@@ -0,0 +1,180 @@
+"use strict";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vars_1 = require("../../../../fonts/vars");
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const colors_1 = require("../../../../styles/colors");
+const typography_1 = require("../../../../styles/typography");
+const scale_1 = require("../../../../utils/adaptive/scale");
+const screen_1 = require("../../../../utils/screen");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const react_1 = require("react");
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const react_select_1 = __importStar(require("react-select"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const SelectElement = (0, styled_components_1.default)(react_select_1.default) `
+  font-family: ${vars_1.dmsansFontVarCss.css};
+
+  .react-select__value-container {
+    padding: 0 0 0 20px;
+  }
+
+  .react-select__control {
+    border: none;
+    background-color: white;
+    border-radius: 6px;
+    box-shadow: none;
+    min-height: ${(props) => `${props.minHeight}px`};
+    cursor: pointer;
+
+    &:hover,
+    &:focus,
+    &:active {
+      box-shadow: none;
+      border-color: transparent;
+    }
+  }
+
+  .react-select__indicator {
+    padding: 0;
+  }
+
+  .react-select__indicators {
+    padding-right: 12px;
+  }
+
+  .react-select__menu {
+    ${typography_1.MainText};
+    color: ${colors_1.TextGrayColor};
+    margin: 4px 0;
+    background: ${colors_1.WhiteColor};
+    box-shadow: 0 8px 16px -16px rgba(33, 21, 95, 0.1);
+    border-radius: 6px;
+    z-index: 9999;
+  }
+
+  .react-select__single-value {
+    ${typography_1.MainText};
+    margin: 0;
+    color: ${colors_1.BlackColor};
+  }
+
+  .react-select__menu-list {
+    padding: 8px 0;
+  }
+
+  .react-select__option {
+    padding: 8.5px 20px;
+    font-weight: 400;
+  }
+
+  .react-select__option--is-selected {
+    background-color: transparent;
+    color: ${colors_1.BlackColor};
+    font-weight: 500;
+  }
+
+  .react-select__option--is-focused {
+    background-color: transparent;
+    color: ${colors_1.BlackColor};
+    font-weight: 500;
+    transition: font-weight 0.3s ease-in-out;
+    cursor: pointer;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    .react-select__value-container {
+      padding: 0 0 0 ${(0, _4k_1.adaptiveValueCalc)(20)};
+    }
+
+    .react-select__control {
+      border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+      min-height: ${(props) => (0, _4k_1.adaptiveValueCalc)(props.minHeight)};
+    }
+
+    .react-select__indicator {
+      transform: ${(props) => "transform" in props.scale && props.scale.transform};
+    }
+
+    .react-select__indicators {
+      padding-right: ${(0, _4k_1.adaptiveValueCalc)(12)};
+    }
+
+    .react-select__menu {
+      margin: ${(0, _4k_1.adaptiveValueCalc)(4)} 0;
+      box-shadow: 0 ${(0, _4k_1.adaptiveValueCalc)(8)} ${(0, _4k_1.adaptiveValueCalc)(16)} ${(0, _4k_1.adaptiveValueCalc)(-16)} rgba(33, 21, 95, 0.1);
+      border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+    }
+
+    .react-select__menu-list {
+      padding: ${(0, _4k_1.adaptiveValueCalc)(8)} 0;
+      max-height: ${(0, _4k_1.adaptiveValueCalc)(300)};
+    }
+
+    .react-select__option {
+      padding: ${(0, _4k_1.adaptiveValueCalc)(8.5)} ${(0, _4k_1.adaptiveValueCalc)(20)};
+    }
+  }
+`;
+const minHeight = 40;
+const DropdownIndicator = (props) => {
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.DropdownIndicator, { ...props, children: (0, jsx_runtime_1.jsx)("svg", { style: {
+                transition: "transform 200ms",
+                transform: props.selectProps.menuIsOpen ? "rotate(180deg)" : "rotate(0)",
+            }, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M16 11L12 15L8 11", stroke: "#696F91", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+};
+const DesktopSelect = ({ options, isLoading, onChangeHandler, defaultOptionValue, name, ...props }) => {
+    const [selectedOption, setSelectedOption] = (0, react_1.useState)(options.find((option) => {
+        return defaultOptionValue === option.id;
+    }) || options[0]);
+    (0, react_1.useEffect)(() => {
+        const findOption = options.find((option) => {
+            return defaultOptionValue === option.id;
+        });
+        setSelectedOption(findOption || options[0]);
+    }, [defaultOptionValue]);
+    const handleChangeOption = async (option) => {
+        await onChangeHandler(name, option.id);
+        setSelectedOption(option);
+    };
+    const getOptionLabel = (option) => {
+        return option.label;
+    };
+    const getOptionValue = (option) => {
+        return option.id;
+    };
+    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { height: `${minHeight}px`, width: "154px" });
+    return ((0, jsx_runtime_1.jsx)(SelectElement, { id: String(Math.random()), minHeight: minHeight, scale: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }), classNamePrefix: "react-select", name: name, getOptionLabel: (option) => getOptionLabel(option), getOptionValue: (option) => getOptionValue(option), options: options, value: selectedOption, defaultValue: selectedOption, onChange: (option) => handleChangeOption(option), isSearchable: false, components: {
+            DropdownIndicator,
+            IndicatorSeparator: () => null,
+        }, ...props }));
+};
+exports.default = DesktopSelect;

package/build/system/Forms/Selects/DesktopSelect/type.d.ts

@@ -0,0 +1,5 @@
+export type optionType = {
+    id: number;
+    value: string;
+    label: string;
+};

package/build/system/Forms/Selects/DesktopSelect/type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/system/Forms/Selects/MobileSelect/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ICollectionFilterInput, ICreationFilterInput } from '@ludo.ninja/api/build/graphql_tools/__generated__/searchHost/schema';
+export interface ISelectInput {
+    id: string;
+    label: string;
+}
+interface Props {
+    options: ISelectInput[];
+    defaultOptionValue: string;
+    onChangeHandler: (fieldName: keyof ICreationFilterInput & keyof ICollectionFilterInput, fieldValue: string) => void;
+    name: string;
+}
+declare const MobileSelect: React.FC<Props>;
+export default MobileSelect;

package/build/system/Forms/Selects/MobileSelect/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const router_1 = require("next/router");
+const DropDown_1 = __importDefault(require("../../../DropDown"));
+const RadioInput_1 = __importDefault(require("../../RadioInput"));
+// Component
+const MobileSelect = ({ options, onChangeHandler, name, defaultOptionValue, }) => {
+    const [selectedOption, setSelectedOption] = (0, react_1.useState)(options[0]);
+    const router = (0, router_1.useRouter)();
+    (0, react_1.useEffect)(() => {
+        const findOption = options.find((option) => {
+            return defaultOptionValue === option.id;
+        });
+        setSelectedOption(findOption || options[0]);
+    }, [defaultOptionValue]);
+    const handleChangeOption = (value) => {
+        const findOption = options.find((option) => {
+            return value === option.id;
+        });
+        setSelectedOption(findOption || options[0]);
+        onChangeHandler(name, findOption?.id || options[0]?.id);
+    };
+    return ((0, jsx_runtime_1.jsx)(DropDown_1.default, { caption: name, fallBackOnClose: () => null, active: Boolean(router.query[name]), children: options.map((select) => ((0, jsx_runtime_1.jsx)(RadioInput_1.default, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeOption, radioChecked: selectedOption.id === select.id }, `${select.id}_${select.label}`))) }));
+};
+// Export
+exports.default = MobileSelect;

package/build/system/Forms/TextArea/TextArea.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/system/Forms/TextArea/TextArea.test.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const colors_1 = require("../../../styles/colors");
+const index_1 = __importDefault(require("./index"));
+jest.mock('../ErrorLabel', () => ({
+    __esModule: true,
+    default: ({ children }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "error-label", children: children })),
+}));
+const mockRegister = {
+    name: 'test-textarea',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+const mockData = {
+    name: 'test-textarea',
+    placeHolder: 'Enter text...',
+    labelText: 'Test TextArea',
+};
+const renderComponent = (error) => {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { data: mockData, register: mockRegister, error: error, isNeedBiggerArea: false }));
+};
+describe('TextArea Component', () => {
+    test('renders text area element with correct attributes', () => {
+        renderComponent({ isNeedShowError: false, message: undefined });
+        const textareaElement = react_1.screen.getByPlaceholderText('Enter text...');
+        expect(textareaElement).toBeInTheDocument();
+        expect(textareaElement.name).toBe('test-textarea');
+        expect(textareaElement.id).toBe('test-textarea');
+    });
+    test('applies error styles when there is an error', () => {
+        renderComponent({ isNeedShowError: true, message: 'Error message' });
+        const textareaElement = react_1.screen.getByPlaceholderText('Enter text...');
+        expect(textareaElement).toHaveStyle(`border-color: ${colors_1.ProgressColorMinimum}`);
+        expect(react_1.screen.getByTestId('error-label')).toHaveTextContent('Error message');
+    });
+    test('does not render error label when there is no error', () => {
+        renderComponent({ isNeedShowError: false, message: undefined });
+        const errorLabel = react_1.screen.queryByTestId('error-label');
+        expect(errorLabel).toBeNull();
+    });
+    test('renders error label when there is an error', () => {
+        renderComponent({ isNeedShowError: true, message: 'Error message' });
+        const errorLabel = react_1.screen.getByTestId('error-label');
+        expect(errorLabel).toBeInTheDocument();
+        expect(errorLabel).toHaveTextContent('Error message');
+    });
+});

package/build/system/Forms/TextArea/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import { inputType } from '../Input/type';
+interface Props {
+    data: inputType;
+    register: UseFormRegisterReturn;
+    isNeedBiggerArea: boolean;
+    error: {
+        isNeedShowError: boolean;
+        message: string | undefined;
+    };
+}
+declare const BasicTextArea: React.FC<Props>;
+export default BasicTextArea;

package/build/system/Forms/TextArea/index.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const typography_1 = require("../../../styles/typography");
+const vars_1 = require("../../../fonts/vars");
+const ErrorLabel_1 = __importDefault(require("../ErrorLabel"));
+// Styles
+const StyledTextArea = styled_components_1.default.textarea `
+  font-family: ${vars_1.dmsansFontVarCss.css};
+  ${typography_1.MainText};
+  width: 100%;
+  min-height: 92px;
+  border-radius: 6px;
+  border: 1px solid
+    ${(props) => (props.status ? colors_1.ProgressColorMinimum : colors_1.BorderColorLight)};
+  background: ${colors_1.WhiteColor};
+  color: ${colors_1.BlackColor};
+  outline: none;
+  resize: none;
+  padding: 12px;
+
+  ::placeholder {
+    color: ${colors_1.TextGrayColor};
+    opacity: 1;
+  }
+
+  :-ms-input-placeholder {
+    color: ${colors_1.TextGrayColor};
+  }
+
+  ::-ms-input-placeholder {
+    color: ${colors_1.TextGrayColor};
+  }
+
+  // :focus {
+  //   transition: border-color 0.3s ease-in-out;
+  //   border: 2px solid ${(props) => (props.status ? '#F4205F' : '#C1C8DE')};
+  // }
+  // :hover {
+  //   transition: border-color 0.3s ease-in-out;
+  //   border: 2px solid ${(props) => (props.status ? '#F4205F' : '#C1C8DE')};
+  // }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    min-height: ${(0, _4k_1.adaptiveValueCalc)(92)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+    border: ${(0, _4k_1.adaptiveValueCalc)(1)} solid
+      ${(props) => (props.status ? colors_1.ProgressColorMinimum : colors_1.BorderColorLight)};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(12)};
+  }
+`;
+// const maxCountLength = 400;
+const BasicTextArea = ({ data, register, isNeedBiggerArea, error,
+// counter,
+ }) => {
+    const renderError = () => {
+        if (error.isNeedShowError) {
+            return (0, jsx_runtime_1.jsx)(ErrorLabel_1.default, { children: error.message });
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledTextArea, { ...register, rows: isNeedBiggerArea ? 8 : 4, status: error.isNeedShowError, id: data.name, name: data.name, autoComplete: 'off', placeholder: data.placeHolder }), renderError()] }));
+};
+exports.default = BasicTextArea;

package/build/system/Forms/index.d.ts

@@ -0,0 +1,5 @@
+import CheckboxInput from './Checkbox';
+import BasicErrorLabel from './ErrorLabel';
+import Input from './Input';
+import BasicTextArea from './TextArea';
+export { Input, BasicTextArea, BasicErrorLabel, CheckboxInput };

package/build/system/Forms/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxInput = exports.BasicErrorLabel = exports.BasicTextArea = exports.Input = void 0;
+const Checkbox_1 = __importDefault(require("./Checkbox"));
+exports.CheckboxInput = Checkbox_1.default;
+const ErrorLabel_1 = __importDefault(require("./ErrorLabel"));
+exports.BasicErrorLabel = ErrorLabel_1.default;
+const Input_1 = __importDefault(require("./Input"));
+exports.Input = Input_1.default;
+const TextArea_1 = __importDefault(require("./TextArea"));
+exports.BasicTextArea = TextArea_1.default;

package/build/system/Img/ExternalImage/index.d.ts

@@ -0,0 +1,6 @@
+import React, { ComponentPropsWithRef } from 'react';
+import { BorderProps, LayoutProps, SpaceProps } from 'styled-system';
+export interface ExternalImageRawProps extends SpaceProps, LayoutProps, BorderProps {
+}
+export type ExternalImageProps = ComponentPropsWithRef<'img'> & ExternalImageRawProps;
+export declare const ExternalImage: React.ForwardRefExoticComponent<Omit<ExternalImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;

package/build/system/Img/ExternalImage/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExternalImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const styled_system_1 = require("styled-system");
+const StyledImage = styled_components_1.default.img `
+  display: block;
+  max-width: 100%;
+  height: ${(props) => (props.height ? props.height : 'auto')};
+  ${styled_system_1.space}
+  ${styled_system_1.layout}
+  ${styled_system_1.border}
+`;
+exports.ExternalImage = (0, react_1.forwardRef)((props, ref) => {
+    return (0, jsx_runtime_1.jsx)(StyledImage, { ref: ref, ...props });
+});
+exports.ExternalImage.displayName = 'ExternalImage';