@ludo.ninja/components 2.0.1 → 2.0.3

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

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

package/build/system/Forms/Input/Input.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("@/system/Forms/Input/index"));
+jest.mock('../ErrorLabel', () => ({
+    __esModule: true,
+    default: ({ children }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "error-label", children: children })),
+}));
+const mockRegister = {
+    name: 'test-input',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+const mockData = {
+    name: 'test-input',
+    placeHolder: 'Enter text...',
+    labelText: 'Test Input',
+};
+const renderComponent = (error) => {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { data: mockData, register: mockRegister, error: error }));
+};
+describe('Input Component', () => {
+    test('renders input element with correct attributes', () => {
+        renderComponent({ isNeedShowError: false, message: undefined });
+        const inputElement = react_1.screen.getByPlaceholderText('Enter text...');
+        expect(inputElement).toBeInTheDocument();
+        expect(inputElement.name).toBe('test-input');
+        expect(inputElement.id).toBe('test-input');
+    });
+    test('applies error styles when there is an error', () => {
+        renderComponent({ isNeedShowError: true, message: 'Error message' });
+        const inputElement = react_1.screen.getByPlaceholderText('Enter text...');
+        expect(inputElement).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/Input/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import { inputType } from './type';
+export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    status: boolean;
+}>> & string;
+interface Props {
+    data: inputType;
+    register: UseFormRegisterReturn;
+    error: {
+        isNeedShowError: boolean;
+        message: string | undefined;
+    };
+}
+declare const Input: React.FC<Props>;
+export default Input;

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

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledInput = void 0;
+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 _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("@/styles/ScreenWidth");
+const colors_2 = require("@/styles/colors");
+const typography_1 = require("@/styles/typography");
+const ErrorLabel_1 = __importDefault(require("@/system/Forms/ErrorLabel"));
+const vars_1 = require("@/fonts/vars");
+// Styles
+exports.StyledInput = styled_components_1.default.input `
+  font-family: ${vars_1.dmsansFontVarCss.css};
+  ${typography_1.MainText};
+  width: 100%;
+  height: 46px;
+  border-radius: 6px;
+  border: 1px solid
+    ${(props) => (props.status ? colors_2.ProgressColorMinimum : colors_2.BorderColorLight)};
+  background: ${colors_2.WhiteColor};
+  color: ${colors_2.BlackColor};
+  outline: none;
+  padding: 12px;
+
+  ::placeholder {
+    color: ${colors_2.TextGrayColor};
+    opacity: 1;
+  }
+
+  :-ms-input-placeholder {
+    color: ${colors_2.TextGrayColor};
+  }
+
+  ::-ms-input-placeholder {
+    color: ${colors_2.TextGrayColor};
+  }
+
+  :disabled {
+    background: ${colors_1.DisabledLightGrayColor};
+    color: ${colors_1.DisabledGrayColor};
+  }
+
+  // :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} {
+    height: ${(0, _4k_1.adaptiveValueCalc)(46)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+    border: ${(0, _4k_1.adaptiveValueCalc)(1)} solid
+      ${(props) => (props.status ? colors_2.ProgressColorMinimum : colors_2.BorderColorLight)};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(12)};
+  }
+`;
+const Input = ({ data, register, error }) => {
+    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)(exports.StyledInput, { ...register, status: error.isNeedShowError, id: data.name, name: data.name, autoComplete: 'off', placeholder: data.placeHolder }), renderError()] }));
+};
+exports.default = Input;

package/build/system/Forms/Input/type.d.ts

@@ -0,0 +1,5 @@
+export type inputType = {
+    labelText: string;
+    name: string;
+    placeHolder?: string;
+};

package/build/system/Forms/Input/type.js

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

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

@@ -0,0 +1,67 @@
+declare const messages: {
+    galleryName: {
+        maxLength: {
+            value: number;
+            message: string;
+        };
+        required: string;
+    };
+    galleryDescription: {
+        maxLength: {
+            value: number;
+            message: string;
+        };
+    };
+    username: {
+        minLength: {
+            value: number;
+            message: string;
+        };
+        maxLength: {
+            value: number;
+            message: string;
+        };
+    };
+    about: {
+        minLength: {
+            value: number;
+            message: string;
+        };
+        maxLength: {
+            value: number;
+            message: string;
+        };
+    };
+    userEmail: {
+        pattern: {
+            value: RegExp;
+            message: string;
+        };
+    };
+    inviteCode: {
+        minLength: {
+            value: number;
+            message: string;
+        };
+        maxLength: {
+            value: number;
+            message: string;
+        };
+        required: string;
+    };
+    userWeb: {
+        minLength: {
+            value: number;
+            message: string;
+        };
+        maxLength: {
+            value: number;
+            message: string;
+        };
+        pattern: {
+            value: RegExp;
+            message: string;
+        };
+    };
+};
+export default messages;

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/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 | undefined;
+    withInput?: boolean | undefined;
+    innerTextInputRef?: UseFormRegisterReturn | undefined;
+    setFocus?: ((value: string) => void) | undefined;
+}) => 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("@/system/Forms/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 React from 'react';
+import { ICollectionFilterInput, ICreationFilterInput } from '@ludo.ninja/api/build/graphql_tools/__generated__/searchHost/schema';
+import { ISelectInput } from '@/system/Forms/Selects/MobileSelect';
+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,184 @@
+"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 react_1 = require("react");
+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 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 _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const vars_1 = require("@/fonts/vars");
+const arrow_down_svg_1 = __importDefault(require("@/public/selects/arrow_down.svg"));
+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)(arrow_down_svg_1.default, { style: {
+                transition: 'transform 200ms',
+                transform: props.selectProps.menuIsOpen
+                    ? 'rotate(180deg)'
+                    : 'rotate(0)',
+            } }) }));
+};
+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("@/system/DropDown"));
+const RadioInput_1 = __importDefault(require("@/system/Forms/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';