@ludo.ninja/components 2.3.4 → 2.3.6

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

@@ -1,69 +0,0 @@
-"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

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

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

@@ -1,62 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-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

@@ -1,73 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-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

@@ -1,180 +0,0 @@
-"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

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

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

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

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

@@ -1,14 +0,0 @@
-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

@@ -1,31 +0,0 @@
-"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

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

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

@@ -1,54 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-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

@@ -1,70 +0,0 @@
-"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

@@ -1,5 +0,0 @@
-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

@@ -1,14 +0,0 @@
-"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

@@ -1,6 +0,0 @@
-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

@@ -1,22 +0,0 @@
-"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';