@ludo.ninja/components 1.1.2 → 1.1.4

package/dist/system/Forms/RadioInput/index.jsx

@@ -1,88 +1,27 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import styled from 'styled-components';
-
 import { BorderColorLight } from '@ludo.ninja/ui/build/styles/colors';
-
 import { AccentColor, BlackColor, WhiteColor } from '@/styles/colors';
-
 import { StyledInput } from '@/system/Forms/Input';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var StyledLabel = styled.label(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  position: relative;\n  padding: 8px 0 8px 27px;\n  cursor: pointer;\n  font-size: 1.4em;\n  color: ',
-        ";\n  font-weight: 500;\n  user-select: none;\n\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .checkmark {\n    position: absolute;\n    left: 0;\n    height: 18px;\n    width: 18px;\n    background-color: ",
-        ";\n    border-radius: 50%;\n    transition: background-color 200ms;\n  }\n\n  .checkmark:after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background: ",
-        ';\n    transition: width 200ms, height 200ms;\n  }\n\n  input:checked ~ .checkmark,\n  .checked {\n    background-color: ',
-        ';\n  }\n\n  input:checked ~ .checkmark:after,\n  .checked:after {\n    width: 8px;\n    height: 8px;\n  }\n',
-      ],
-      [
-        '\n  position: relative;\n  padding: 8px 0 8px 27px;\n  cursor: pointer;\n  font-size: 1.4em;\n  color: ',
-        ";\n  font-weight: 500;\n  user-select: none;\n\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .checkmark {\n    position: absolute;\n    left: 0;\n    height: 18px;\n    width: 18px;\n    background-color: ",
-        ";\n    border-radius: 50%;\n    transition: background-color 200ms;\n  }\n\n  .checkmark:after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background: ",
-        ';\n    transition: width 200ms, height 200ms;\n  }\n\n  input:checked ~ .checkmark,\n  .checked {\n    background-color: ',
-        ';\n  }\n\n  input:checked ~ .checkmark:after,\n  .checked:after {\n    width: 8px;\n    height: 8px;\n  }\n',
-      ]
-    )),
-  BlackColor,
-  BorderColorLight,
-  WhiteColor,
-  AccentColor
-);
+var StyledLabel = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  padding: 8px 0 8px 27px;\n  cursor: pointer;\n  font-size: 1.4em;\n  color: ", ";\n  font-weight: 500;\n  user-select: none;\n\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .checkmark {\n    position: absolute;\n    left: 0;\n    height: 18px;\n    width: 18px;\n    background-color: ", ";\n    border-radius: 50%;\n    transition: background-color 200ms;\n  }\n\n  .checkmark:after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background: ", ";\n    transition: width 200ms, height 200ms;\n  }\n\n  input:checked ~ .checkmark,\n  .checked {\n    background-color: ", ";\n  }\n\n  input:checked ~ .checkmark:after,\n  .checked:after {\n    width: 8px;\n    height: 8px;\n  }\n"], ["\n  position: relative;\n  padding: 8px 0 8px 27px;\n  cursor: pointer;\n  font-size: 1.4em;\n  color: ", ";\n  font-weight: 500;\n  user-select: none;\n\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .checkmark {\n    position: absolute;\n    left: 0;\n    height: 18px;\n    width: 18px;\n    background-color: ", ";\n    border-radius: 50%;\n    transition: background-color 200ms;\n  }\n\n  .checkmark:after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background: ", ";\n    transition: width 200ms, height 200ms;\n  }\n\n  input:checked ~ .checkmark,\n  .checked {\n    background-color: ", ";\n  }\n\n  input:checked ~ .checkmark:after,\n  .checked:after {\n    width: 8px;\n    height: 8px;\n  }\n"])), BlackColor, BorderColorLight, WhiteColor, AccentColor);
 var BasicRadioInput = function (_a) {
-  var radioLabel = _a.radioLabel,
-    radioValue = _a.radioValue,
-    radioChecked = _a.radioChecked,
-    handleChange = _a.handleChange,
-    className = _a.className,
-    withInput = _a.withInput,
-    innerTextInputRef = _a.innerTextInputRef,
-    setFocus = _a.setFocus;
-  var handleChangeRadioInput = function (e) {
-    if (withInput) {
-      setTimeout(function () {
-        return (
-          setFocus && innerTextInputRef && setFocus(innerTextInputRef.name)
-        );
-      }, 0);
-    }
-    handleChange(e.target.value);
-  };
-  return (
-    <StyledLabel className={className}>
+    var radioLabel = _a.radioLabel, radioValue = _a.radioValue, radioChecked = _a.radioChecked, handleChange = _a.handleChange, className = _a.className, withInput = _a.withInput, innerTextInputRef = _a.innerTextInputRef, setFocus = _a.setFocus;
+    var handleChangeRadioInput = function (e) {
+        if (withInput) {
+            setTimeout(function () { return setFocus && innerTextInputRef && setFocus(innerTextInputRef.name); }, 0);
+        }
+        handleChange(e.target.value);
+    };
+    return (<StyledLabel className={className}>
       {radioLabel}
-      <input
-        type="radio"
-        checked={radioChecked}
-        value={radioValue}
-        id={''.concat(radioValue, '_').concat(radioLabel)}
-        onChange={function (e) {
-          return handleChangeRadioInput(e);
-        }}
-      />
-      {withInput && (
-        <StyledInput
-          status={false}
-          {...innerTextInputRef}
-          disabled={!radioChecked}
-        />
-      )}
-      <span className={'checkmark'}></span>
-    </StyledLabel>
-  );
+      <input type="radio" checked={radioChecked} value={radioValue} id={"".concat(radioValue, "_").concat(radioLabel)} onChange={function (e) { return handleChangeRadioInput(e); }}/>
+      {withInput && (<StyledInput status={false} {...innerTextInputRef} disabled={!radioChecked}/>)}
+      <span className={"checkmark"}></span>
+    </StyledLabel>);
 };
 export default BasicRadioInput;
 var templateObject_1;

package/dist/system/Forms/Selects/DesktopSelect/index.jsx

@@ -1,372 +1,115 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React, { useEffect, useState } from 'react';
-
 import Skeleton from 'react-loading-skeleton';
-import Select, { components } from 'react-select';
+import Select, { components, } from 'react-select';
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
 import { BlackColor, TextGrayColor, WhiteColor } from '@/styles/colors';
 import { MainText } from '@/styles/typography';
-
 import { getAdaptiveScale } from '@/utils/adaptive/scale';
 import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
 import { dmsansFontVarCss } from '@/fonts/vars';
-
 import ArrowDownIcon from '@/public/selects/arrow_down.svg';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-var __awaiter =
-  (this && this.__awaiter) ||
-  function (thisArg, _arguments, P, generator) {
-    function adopt(value) {
-      return value instanceof P
-        ? value
-        : new P(function (resolve) {
-            resolve(value);
-          });
-    }
-    return new (P || (P = Promise))(function (resolve, reject) {
-      function fulfilled(value) {
-        try {
-          step(generator.next(value));
-        } catch (e) {
-          reject(e);
-        }
-      }
-      function rejected(value) {
-        try {
-          step(generator['throw'](value));
-        } catch (e) {
-          reject(e);
-        }
-      }
-      function step(result) {
-        result.done
-          ? resolve(result.value)
-          : adopt(result.value).then(fulfilled, rejected);
-      }
-      step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-  };
-var __generator =
-  (this && this.__generator) ||
-  function (thisArg, body) {
-    var _ = {
-        label: 0,
-        sent: function () {
-          if (t[0] & 1) throw t[1];
-          return t[1];
-        },
-        trys: [],
-        ops: [],
-      },
-      f,
-      y,
-      t,
-      g;
-    return (
-      (g = { next: verb(0), throw: verb(1), return: verb(2) }),
-      typeof Symbol === 'function' &&
-        (g[Symbol.iterator] = function () {
-          return this;
-        }),
-      g
-    );
-    function verb(n) {
-      return function (v) {
-        return step([n, v]);
-      };
-    }
-    function step(op) {
-      if (f) throw new TypeError('Generator is already executing.');
-      while ((g && ((g = 0), op[0] && (_ = 0)), _))
-        try {
-          if (
-            ((f = 1),
-            y &&
-              (t =
-                op[0] & 2
-                  ? y['return']
-                  : op[0]
-                  ? y['throw'] || ((t = y['return']) && t.call(y), 0)
-                  : y.next) &&
-              !(t = t.call(y, op[1])).done)
-          )
-            return t;
-          if (((y = 0), t)) op = [op[0] & 2, t.value];
-          switch (op[0]) {
-            case 0:
-            case 1:
-              t = op;
-              break;
-            case 4:
-              _.label++;
-              return { value: op[1], done: false };
-            case 5:
-              _.label++;
-              y = op[1];
-              op = [0];
-              continue;
-            case 7:
-              op = _.ops.pop();
-              _.trys.pop();
-              continue;
-            default:
-              if (
-                !((t = _.trys), (t = t.length > 0 && t[t.length - 1])) &&
-                (op[0] === 6 || op[0] === 2)
-              ) {
-                _ = 0;
-                continue;
-              }
-              if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                _.label = op[1];
-                break;
-              }
-              if (op[0] === 6 && _.label < t[1]) {
-                _.label = t[1];
-                t = op;
-                break;
-              }
-              if (t && _.label < t[2]) {
-                _.label = t[2];
-                _.ops.push(op);
-                break;
-              }
-              if (t[2]) _.ops.pop();
-              _.trys.pop();
-              continue;
-          }
-          op = body.call(thisArg, _);
-        } catch (e) {
-          op = [6, e];
-          y = 0;
-        } finally {
-          f = t = 0;
-        }
-      if (op[0] & 5) throw op[1];
-      return { value: op[0] ? op[1] : void 0, done: true };
-    }
-  };
-var __rest =
-  (this && this.__rest) ||
-  function (s, e) {
-    var t = {};
-    for (var p in s)
-      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === 'function')
-      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-        if (
-          e.indexOf(p[i]) < 0 &&
-          Object.prototype.propertyIsEnumerable.call(s, p[i])
-        )
-          t[p[i]] = s[p[i]];
-      }
-    return t;
-  };
-
-var SelectElement = styled(Select)(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  font-family: ',
-        ';\n\n  .react-select__value-container {\n    padding: 0 0 0 20px;\n  }\n\n  .react-select__control {\n    border: none;\n    background-color: white;\n    border-radius: 6px;\n    box-shadow: none;\n    min-height: ',
-        ';\n    cursor: pointer;\n\n    &:hover,\n    &:focus,\n    &:active {\n      box-shadow: none;\n      border-color: transparent;\n    }\n  }\n\n  .react-select__indicator {\n    padding: 0;\n  }\n\n  .react-select__indicators {\n    padding-right: 12px;\n  }\n\n  .react-select__menu {\n    ',
-        ';\n    color: ',
-        ';\n    margin: 4px 0;\n    background: ',
-        ';\n    box-shadow: 0 8px 16px -16px rgba(33, 21, 95, 0.1);\n    border-radius: 6px;\n    z-index: 9999;\n  }\n\n  .react-select__single-value {\n    ',
-        ';\n    margin: 0;\n    color: ',
-        ';\n  }\n\n  .react-select__menu-list {\n    padding: 8px 0;\n  }\n\n  .react-select__option {\n    padding: 8.5px 20px;\n    font-weight: 400;\n  }\n\n  .react-select__option--is-selected {\n    background-color: transparent;\n    color: ',
-        ';\n    font-weight: 500;\n  }\n\n  .react-select__option--is-focused {\n    background-color: transparent;\n    color: ',
-        ';\n    font-weight: 500;\n    transition: font-weight 0.3s ease-in-out;\n    cursor: pointer;\n  }\n\n  ',
-        ' {\n    .react-select__value-container {\n      padding: 0 0 0 ',
-        ';\n    }\n\n    .react-select__control {\n      border-radius: ',
-        ';\n      min-height: ',
-        ';\n    }\n\n    .react-select__indicator {\n      transform: ',
-        ';\n    }\n\n    .react-select__indicators {\n      padding-right: ',
-        ';\n    }\n\n    .react-select__menu {\n      margin: ',
-        ' 0;\n      box-shadow: 0 ',
-        ' ',
-        '\n        ',
-        ' rgba(33, 21, 95, 0.1);\n      border-radius: ',
-        ';\n    }\n\n    .react-select__menu-list {\n      padding: ',
-        ' 0;\n      max-height: ',
-        ';\n    }\n\n    .react-select__option {\n      padding: ',
-        ' ',
-        ';\n    }\n  }\n',
-      ],
-      [
-        '\n  font-family: ',
-        ';\n\n  .react-select__value-container {\n    padding: 0 0 0 20px;\n  }\n\n  .react-select__control {\n    border: none;\n    background-color: white;\n    border-radius: 6px;\n    box-shadow: none;\n    min-height: ',
-        ';\n    cursor: pointer;\n\n    &:hover,\n    &:focus,\n    &:active {\n      box-shadow: none;\n      border-color: transparent;\n    }\n  }\n\n  .react-select__indicator {\n    padding: 0;\n  }\n\n  .react-select__indicators {\n    padding-right: 12px;\n  }\n\n  .react-select__menu {\n    ',
-        ';\n    color: ',
-        ';\n    margin: 4px 0;\n    background: ',
-        ';\n    box-shadow: 0 8px 16px -16px rgba(33, 21, 95, 0.1);\n    border-radius: 6px;\n    z-index: 9999;\n  }\n\n  .react-select__single-value {\n    ',
-        ';\n    margin: 0;\n    color: ',
-        ';\n  }\n\n  .react-select__menu-list {\n    padding: 8px 0;\n  }\n\n  .react-select__option {\n    padding: 8.5px 20px;\n    font-weight: 400;\n  }\n\n  .react-select__option--is-selected {\n    background-color: transparent;\n    color: ',
-        ';\n    font-weight: 500;\n  }\n\n  .react-select__option--is-focused {\n    background-color: transparent;\n    color: ',
-        ';\n    font-weight: 500;\n    transition: font-weight 0.3s ease-in-out;\n    cursor: pointer;\n  }\n\n  ',
-        ' {\n    .react-select__value-container {\n      padding: 0 0 0 ',
-        ';\n    }\n\n    .react-select__control {\n      border-radius: ',
-        ';\n      min-height: ',
-        ';\n    }\n\n    .react-select__indicator {\n      transform: ',
-        ';\n    }\n\n    .react-select__indicators {\n      padding-right: ',
-        ';\n    }\n\n    .react-select__menu {\n      margin: ',
-        ' 0;\n      box-shadow: 0 ',
-        ' ',
-        '\n        ',
-        ' rgba(33, 21, 95, 0.1);\n      border-radius: ',
-        ';\n    }\n\n    .react-select__menu-list {\n      padding: ',
-        ' 0;\n      max-height: ',
-        ';\n    }\n\n    .react-select__option {\n      padding: ',
-        ' ',
-        ';\n    }\n  }\n',
-      ]
-    )),
-  dmsansFontVarCss.css,
-  function (props) {
-    return ''.concat(props.minHeight, 'px');
-  },
-  MainText,
-  TextGrayColor,
-  WhiteColor,
-  MainText,
-  BlackColor,
-  BlackColor,
-  BlackColor,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(20),
-  adaptiveValueCalc(6),
-  function (props) {
-    return adaptiveValueCalc(props.minHeight);
-  },
-  function (props) {
+var SelectElement = styled(Select)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n\n  .react-select__value-container {\n    padding: 0 0 0 20px;\n  }\n\n  .react-select__control {\n    border: none;\n    background-color: white;\n    border-radius: 6px;\n    box-shadow: none;\n    min-height: ", ";\n    cursor: pointer;\n\n    &:hover,\n    &:focus,\n    &:active {\n      box-shadow: none;\n      border-color: transparent;\n    }\n  }\n\n  .react-select__indicator {\n    padding: 0;\n  }\n\n  .react-select__indicators {\n    padding-right: 12px;\n  }\n\n  .react-select__menu {\n    ", ";\n    color: ", ";\n    margin: 4px 0;\n    background: ", ";\n    box-shadow: 0 8px 16px -16px rgba(33, 21, 95, 0.1);\n    border-radius: 6px;\n    z-index: 9999;\n  }\n\n  .react-select__single-value {\n    ", ";\n    margin: 0;\n    color: ", ";\n  }\n\n  .react-select__menu-list {\n    padding: 8px 0;\n  }\n\n  .react-select__option {\n    padding: 8.5px 20px;\n    font-weight: 400;\n  }\n\n  .react-select__option--is-selected {\n    background-color: transparent;\n    color: ", ";\n    font-weight: 500;\n  }\n\n  .react-select__option--is-focused {\n    background-color: transparent;\n    color: ", ";\n    font-weight: 500;\n    transition: font-weight 0.3s ease-in-out;\n    cursor: pointer;\n  }\n\n  ", " {\n    .react-select__value-container {\n      padding: 0 0 0 ", ";\n    }\n\n    .react-select__control {\n      border-radius: ", ";\n      min-height: ", ";\n    }\n\n    .react-select__indicator {\n      transform: ", ";\n    }\n\n    .react-select__indicators {\n      padding-right: ", ";\n    }\n\n    .react-select__menu {\n      margin: ", " 0;\n      box-shadow: 0 ", " ", "\n        ", " rgba(33, 21, 95, 0.1);\n      border-radius: ", ";\n    }\n\n    .react-select__menu-list {\n      padding: ", " 0;\n      max-height: ", ";\n    }\n\n    .react-select__option {\n      padding: ", " ", ";\n    }\n  }\n"], ["\n  font-family: ", ";\n\n  .react-select__value-container {\n    padding: 0 0 0 20px;\n  }\n\n  .react-select__control {\n    border: none;\n    background-color: white;\n    border-radius: 6px;\n    box-shadow: none;\n    min-height: ", ";\n    cursor: pointer;\n\n    &:hover,\n    &:focus,\n    &:active {\n      box-shadow: none;\n      border-color: transparent;\n    }\n  }\n\n  .react-select__indicator {\n    padding: 0;\n  }\n\n  .react-select__indicators {\n    padding-right: 12px;\n  }\n\n  .react-select__menu {\n    ", ";\n    color: ", ";\n    margin: 4px 0;\n    background: ", ";\n    box-shadow: 0 8px 16px -16px rgba(33, 21, 95, 0.1);\n    border-radius: 6px;\n    z-index: 9999;\n  }\n\n  .react-select__single-value {\n    ", ";\n    margin: 0;\n    color: ", ";\n  }\n\n  .react-select__menu-list {\n    padding: 8px 0;\n  }\n\n  .react-select__option {\n    padding: 8.5px 20px;\n    font-weight: 400;\n  }\n\n  .react-select__option--is-selected {\n    background-color: transparent;\n    color: ", ";\n    font-weight: 500;\n  }\n\n  .react-select__option--is-focused {\n    background-color: transparent;\n    color: ", ";\n    font-weight: 500;\n    transition: font-weight 0.3s ease-in-out;\n    cursor: pointer;\n  }\n\n  ", " {\n    .react-select__value-container {\n      padding: 0 0 0 ", ";\n    }\n\n    .react-select__control {\n      border-radius: ", ";\n      min-height: ", ";\n    }\n\n    .react-select__indicator {\n      transform: ", ";\n    }\n\n    .react-select__indicators {\n      padding-right: ", ";\n    }\n\n    .react-select__menu {\n      margin: ", " 0;\n      box-shadow: 0 ", " ", "\n        ", " rgba(33, 21, 95, 0.1);\n      border-radius: ", ";\n    }\n\n    .react-select__menu-list {\n      padding: ", " 0;\n      max-height: ", ";\n    }\n\n    .react-select__option {\n      padding: ", " ", ";\n    }\n  }\n"])), dmsansFontVarCss.css, function (props) { return "".concat(props.minHeight, "px"); }, MainText, TextGrayColor, WhiteColor, MainText, BlackColor, BlackColor, BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(6), function (props) { return adaptiveValueCalc(props.minHeight); }, function (props) {
     return 'transform' in props.scale && props.scale.transform;
-  },
-  adaptiveValueCalc(12),
-  adaptiveValueCalc(4),
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(-16),
-  adaptiveValueCalc(6),
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(300),
-  adaptiveValueCalc(8.5),
-  adaptiveValueCalc(20)
-);
+}, adaptiveValueCalc(12), adaptiveValueCalc(4), adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(-16), adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(300), adaptiveValueCalc(8.5), adaptiveValueCalc(20));
 var minHeight = 40;
 var DropdownIndicator = function (props) {
-  return (
-    <components.DropdownIndicator {...props}>
-      <ArrowDownIcon
-        style={{
-          transition: 'transform 200ms',
-          transform: props.selectProps.menuIsOpen
-            ? 'rotate(180deg)'
-            : 'rotate(0)',
-        }}
-      />
-    </components.DropdownIndicator>
-  );
+    return (<components.DropdownIndicator {...props}>
+      <ArrowDownIcon style={{
+            transition: 'transform 200ms',
+            transform: props.selectProps.menuIsOpen
+                ? 'rotate(180deg)'
+                : 'rotate(0)',
+        }}/>
+    </components.DropdownIndicator>);
 };
 var DesktopSelect = function (_a) {
-  var options = _a.options,
-    isLoading = _a.isLoading,
-    onChangeHandler = _a.onChangeHandler,
-    defaultOptionValue = _a.defaultOptionValue,
-    name = _a.name,
-    props = __rest(_a, [
-      'options',
-      'isLoading',
-      'onChangeHandler',
-      'defaultOptionValue',
-      'name',
-    ]);
-  var _b = useState(
-      options.find(function (option) {
+    var options = _a.options, isLoading = _a.isLoading, onChangeHandler = _a.onChangeHandler, defaultOptionValue = _a.defaultOptionValue, name = _a.name, props = __rest(_a, ["options", "isLoading", "onChangeHandler", "defaultOptionValue", "name"]);
+    var _b = useState(options.find(function (option) {
         return defaultOptionValue === option.id;
-      }) || options[0]
-    ),
-    selectedOption = _b[0],
-    setSelectedOption = _b[1];
-  useEffect(
-    function () {
-      var findOption = options.find(function (option) {
-        return defaultOptionValue === option.id;
-      });
-      setSelectedOption(findOption || options[0]);
-    },
-    [defaultOptionValue]
-  );
-  var handleChangeOption = function (option) {
-    return __awaiter(void 0, void 0, void 0, function () {
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            return [4 /*yield*/, onChangeHandler(name, option.id)];
-          case 1:
-            _a.sent();
-            setSelectedOption(option);
-            return [2 /*return*/];
-        }
-      });
-    });
-  };
-  var getOptionLabel = function (option) {
-    return option.label;
-  };
-  var getOptionValue = function (option) {
-    return option.id;
-  };
-  var windowDimensions =
-    useWindowDimensionsWithServerInitial().windowDimensions;
-  if (isLoading)
-    return <Skeleton height={''.concat(minHeight, 'px')} width="154px" />;
-  return (
-    <SelectElement
-      id={String(Math.random())}
-      minHeight={minHeight}
-      scale={getAdaptiveScale({
-        windowDimensions: windowDimensions,
-        currentSize: 1,
-      })}
-      classNamePrefix="react-select"
-      name={name}
-      getOptionLabel={function (option) {
-        return getOptionLabel(option);
-      }}
-      getOptionValue={function (option) {
-        return getOptionValue(option);
-      }}
-      options={options}
-      value={selectedOption}
-      defaultValue={selectedOption}
-      onChange={function (option) {
-        return handleChangeOption(option);
-      }}
-      isSearchable={false}
-      components={{
-        DropdownIndicator: DropdownIndicator,
-        IndicatorSeparator: function () {
-          return null;
-        },
-      }}
-      {...props}
-    />
-  );
+    }) || options[0]), selectedOption = _b[0], setSelectedOption = _b[1];
+    useEffect(function () {
+        var findOption = options.find(function (option) {
+            return defaultOptionValue === option.id;
+        });
+        setSelectedOption(findOption || options[0]);
+    }, [defaultOptionValue]);
+    var handleChangeOption = function (option) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, onChangeHandler(name, option.id)];
+                case 1:
+                    _a.sent();
+                    setSelectedOption(option);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var getOptionLabel = function (option) {
+        return option.label;
+    };
+    var getOptionValue = function (option) {
+        return option.id;
+    };
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    if (isLoading)
+        return <Skeleton height={"".concat(minHeight, "px")} width="154px"/>;
+    return (<SelectElement id={String(Math.random())} minHeight={minHeight} scale={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })} classNamePrefix="react-select" name={name} getOptionLabel={function (option) { return getOptionLabel(option); }} getOptionValue={function (option) { return getOptionValue(option); }} options={options} value={selectedOption} defaultValue={selectedOption} onChange={function (option) { return handleChangeOption(option); }} isSearchable={false} components={{
+            DropdownIndicator: DropdownIndicator,
+            IndicatorSeparator: function () { return null; },
+        }} {...props}/>);
 };
 export default DesktopSelect;
 var templateObject_1;

package/dist/system/Forms/Selects/MobileSelect/index.jsx

@@ -1,62 +1,29 @@
 import React, { useEffect, useState } from 'react';
-
 import { useRouter } from 'next/router';
-
 import DropDown from '@/system/DropDown';
 import BasicRadioInput from '@/system/Forms/RadioInput';
-
 // Component
 var MobileSelect = function (_a) {
-  var options = _a.options,
-    onChangeHandler = _a.onChangeHandler,
-    name = _a.name,
-    defaultOptionValue = _a.defaultOptionValue;
-  var _b = useState(options[0]),
-    selectedOption = _b[0],
-    setSelectedOption = _b[1];
-  var router = useRouter();
-  useEffect(
-    function () {
-      var findOption = options.find(function (option) {
-        return defaultOptionValue === option.id;
-      });
-      setSelectedOption(findOption || options[0]);
-    },
-    [defaultOptionValue]
-  );
-  var handleChangeOption = function (value) {
-    var _a;
-    var findOption = options.find(function (option) {
-      return value === option.id;
-    });
-    setSelectedOption(findOption || options[0]);
-    onChangeHandler(
-      name,
-      (findOption === null || findOption === void 0 ? void 0 : findOption.id) ||
-        ((_a = options[0]) === null || _a === void 0 ? void 0 : _a.id)
-    );
-  };
-  return (
-    <DropDown
-      caption={name}
-      fallBackOnClose={function () {
-        return null;
-      }}
-      active={Boolean(router.query[name])}
-    >
-      {options.map(function (select) {
-        return (
-          <BasicRadioInput
-            key={''.concat(select.id, '_').concat(select.label)}
-            radioLabel={select.label}
-            radioValue={select.id}
-            handleChange={handleChangeOption}
-            radioChecked={selectedOption.id === select.id}
-          />
-        );
-      })}
-    </DropDown>
-  );
+    var options = _a.options, onChangeHandler = _a.onChangeHandler, name = _a.name, defaultOptionValue = _a.defaultOptionValue;
+    var _b = useState(options[0]), selectedOption = _b[0], setSelectedOption = _b[1];
+    var router = useRouter();
+    useEffect(function () {
+        var findOption = options.find(function (option) {
+            return defaultOptionValue === option.id;
+        });
+        setSelectedOption(findOption || options[0]);
+    }, [defaultOptionValue]);
+    var handleChangeOption = function (value) {
+        var _a;
+        var findOption = options.find(function (option) {
+            return value === option.id;
+        });
+        setSelectedOption(findOption || options[0]);
+        onChangeHandler(name, (findOption === null || findOption === void 0 ? void 0 : findOption.id) || ((_a = options[0]) === null || _a === void 0 ? void 0 : _a.id));
+    };
+    return (<DropDown caption={name} fallBackOnClose={function () { return null; }} active={Boolean(router.query[name])}>
+      {options.map(function (select) { return (<BasicRadioInput key={"".concat(select.id, "_").concat(select.label)} radioLabel={select.label} radioValue={select.id} handleChange={handleChangeOption} radioChecked={selectedOption.id === select.id}/>); })}
+    </DropDown>);
 };
 // Export
 export default MobileSelect;