krl-alfred 1.77.21 → 1.77.23

package/dist/components/CategoryMenu/CategoryMenu.js

@@ -34,7 +34,7 @@ var CategoryMenu = function (props) {
     var data = props.data, subMenuRowLength = props.subMenuRowLength;
     var ButtonLinkComponent = function (_a) {
         var item = _a.item, children = _a.children;
-        return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
+        return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "componentWrapper" }, { children: children })) })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "componentWrapper" }, { children: children })) })));
     };
     var MenuButton = function (_a) {
         var item = __rest(_a, []);

package/dist/components/CategoryMenu/CategoryMenu.styled.js

@@ -29,10 +29,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubCategoryInnerItemButtonInner = exports.SubCategoryInnerItem = exports.SubCategoryInner = exports.SubCategoryItem = exports.SubMenu = exports.CategoryItemButtonTitle = exports.CategoryItemButtonIcon = exports.CategoryItemButtonInner = exports.CategoryItem = exports.CategoryMenuWrapper = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n        text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n        text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"])));
+exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"])));
 var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"], ["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"])));
-exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75)\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        > a {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75)\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        > a {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n        > a > span{\n            ".concat(hoverAndActive, "\n        }\n    ") : ""; });
-exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid white;\n        color: var(--dark-opacity-75);\n        background-color: white;\n        border-radius: 8px;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"], ["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid white;\n        color: var(--dark-opacity-75);\n        background-color: white;\n        border-radius: 8px;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"])));
+exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75)\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75)\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n        .componentWrapper > span{\n            ".concat(hoverAndActive, "\n        }\n    ") : ""; });
+exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 8px;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"], ["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 8px;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"])));
 exports.CategoryItemButtonIcon = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    height: 24px;\n    display:block;\n"], ["\n    height: 24px;\n    display:block;\n"])));
 exports.CategoryItemButtonTitle = styled_components_1.default.strong(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin-top: 8px;\n    display:block;\n    font:var(--caption-semi-bold-12-15);\n"], ["\n    margin-top: 8px;\n    display:block;\n    font:var(--caption-semi-bold-12-15);\n"])));
 exports.SubMenu = styled_components_1.default.ul(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    padding: 8px;\n    border: 1px solid var(--grey-10);\n    background-color: white;\n    position: absolute;\n    left: 0;\n    border-radius: 8px;\n    top: 100%;\n    transition: all 0.2s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(10px);\n    display: grid;\n    gap: 0 16px;\n    grid-template-columns: repeat(", ", 154px);\n    transition-delay: 0s;\n"], ["\n    padding: 8px;\n    border: 1px solid var(--grey-10);\n    background-color: white;\n    position: absolute;\n    left: 0;\n    border-radius: 8px;\n    top: 100%;\n    transition: all 0.2s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(10px);\n    display: grid;\n    gap: 0 16px;\n    grid-template-columns: repeat(", ", 154px);\n    transition-delay: 0s;\n"])), function (props) { return props.$gridTemplateColumns || '3'; });

package/dist/components/CategoryMenu/stories/CategoryMenu.stories.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 var CategoryMenu_1 = __importDefault(require("../CategoryMenu"));
-var categories_json_1 = __importDefault(require("./../../../jsons/categories.json"));
+var categories_1 = __importDefault(require("../../../jsons/categories"));
 exports.default = {
     title: 'Components/CategoryMenu',
     component: CategoryMenu_1.default,
@@ -22,6 +22,6 @@ exports.Default = {
     },
     args: {
         subMenuRowLength: 7,
-        data: categories_json_1.default,
+        data: categories_1.default,
     },
 };

package/dist/components/Input/Input.js

@@ -36,7 +36,7 @@ var react_i18next_1 = require("react-i18next");
 var Tooltip_1 = __importDefault(require("../Tooltip"));
 var Input = function (props) {
     var _a;
-    var hasError = props.hasError, disabled = props.disabled, label = props.label, customLinkText = props.customLinkText, customLinkHref = props.customLinkHref, onCustomLinkClick = props.onCustomLinkClick, onChange = props.onChange, errorMessage = props.errorMessage, type = props.type, name = props.name, width = props.width, mask = props.mask, placeholder = props.placeholder, hasCopyButton = props.hasCopyButton, readonly = props.readonly, autofocus = props.autofocus, value = props.value, format = props.format, visible = props.visible, infoText = props.infoText, other = __rest(props, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readonly", "autofocus", "value", "format", "visible", "infoText"]);
+    var hasError = props.hasError, disabled = props.disabled, label = props.label, customLinkText = props.customLinkText, customLinkHref = props.customLinkHref, onCustomLinkClick = props.onCustomLinkClick, onChange = props.onChange, errorMessage = props.errorMessage, type = props.type, name = props.name, width = props.width, mask = props.mask, placeholder = props.placeholder, hasCopyButton = props.hasCopyButton, readonly = props.readonly, autofocus = props.autofocus, value = props.value, format = props.format, visible = props.visible, infoText = props.infoText, id = props.id, other = __rest(props, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readonly", "autofocus", "value", "format", "visible", "infoText", "id"]);
     var _b = (0, react_1.useState)(type), inputType = _b[0], setInputType = _b[1];
     var _c = (0, react_1.useState)(false), alert = _c[0], setAlert = _c[1];
     var inputRef = (0, react_1.useRef)(null);
@@ -61,8 +61,8 @@ var Input = function (props) {
         setAlert(true);
         inputRef.current.blur();
     };
-    return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": props.width }, { children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_a = {}, _a["justify-between"] = props === null || props === void 0 ? void 0 : props.customLinkText, _a)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }), (props === null || props === void 0 ? void 0 : props.customLinkText) && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (props.customLinkHref && { href: props.customLinkHref }), { onClick: props.onCustomLinkClick }, { children: props === null || props === void 0 ? void 0 : props.customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(props.mask && props.format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ type: inputType, "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readonly: readonly, autoFocus: autofocus, value: value }, other, { format: props.format, mask: props.mask, customInput: Input_styled_1.InputStyled })))
-                        : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readonly: readonly, autoFocus: autofocus, value: value }, other))), (props === null || props === void 0 ? void 0 : props.type) === 'password' && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))), (props === null || props === void 0 ? void 0 : props.hasCopyButton) && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) }))), (props === null || props === void 0 ? void 0 : props.infoText) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), (props === null || props === void 0 ? void 0 : props.hasError) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.errorMessage })] }))] }));
+    return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": props.width }, { children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_a = {}, _a["justify-between"] = props === null || props === void 0 ? void 0 : props.customLinkText, _a)) }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: props === null || props === void 0 ? void 0 : props.label })), (props === null || props === void 0 ? void 0 : props.customLinkText) && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (props.customLinkHref && { href: props.customLinkHref }), { onClick: props.onCustomLinkClick }, { children: props === null || props === void 0 ? void 0 : props.customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(props.mask && props.format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ type: inputType, "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readonly: readonly, autoFocus: autofocus, value: value }, other, { format: props.format, mask: props.mask, customInput: Input_styled_1.InputStyled, id: id })))
+                        : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readonly: readonly, autoFocus: autofocus, value: value, id: id }, other))), (props === null || props === void 0 ? void 0 : props.type) === 'password' && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))), (props === null || props === void 0 ? void 0 : props.hasCopyButton) && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) }))), (props === null || props === void 0 ? void 0 : props.infoText) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), (props === null || props === void 0 ? void 0 : props.hasError) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.errorMessage })] }))] }));
 };
 Input.defaultValues = {
     hasError: false,

package/dist/components/Input/Input.styled.js

@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputStyled = exports.Container = exports.AlertStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"], ["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
-exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font: var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n    }\n    .popupText{\n      font: var(--caption-semi-bold-11-13);\n        text-align: center;\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font: var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n    }\n    .popupText{\n      font: var(--caption-semi-bold-11-13);\n        text-align: center;\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"])), function (props) { return props.$width || '370px'; });
+exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font: var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    label {\n      margin: 0;\n      color: var(--dark-opacity-50);\n      display: block;\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n    }\n    .popupText{\n      font: var(--caption-semi-bold-11-13);\n        text-align: center;\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font: var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    label {\n      margin: 0;\n      color: var(--dark-opacity-50);\n      display: block;\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n    }\n    .popupText{\n      font: var(--caption-semi-bold-11-13);\n        text-align: center;\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"])), function (props) { return props.$width || '370px'; });
 exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font: var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font: var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Input/stories/Input.stories.js

@@ -24,6 +24,7 @@ exports.Default = {
         readonly: false,
         label: "Label",
         type: "text",
-        infoText: "text"
+        infoText: "text",
+        id: "customInput",
     },
 };

package/dist/components/SearchBox/SearchBox.js

@@ -20,8 +20,10 @@ var SearchBox_styled_1 = require("./SearchBox.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Loader_1 = __importDefault(require("../Loader"));
 var simplebar_react_1 = __importDefault(require("simplebar-react"));
+var react_i18next_1 = require("react-i18next");
 var SearchBox = function (props) {
     var _a;
+    var t = (0, react_i18next_1.useTranslation)().t;
     var onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, children = props.children, isLoading = props.isLoading, showResultList = props.showResultList, placeholder = props.placeholder, value = props.value, onChange = props.onChange, onButtonClick = props.onButtonClick;
     var _b = (0, react_1.useState)("48px"), shadowHeight = _b[0], setShadowHeight = _b[1];
     var LoadingContent = function () { return (0, jsx_runtime_1.jsx)(SearchBox_styled_1.LoadingStyled, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) }); };
@@ -82,7 +84,7 @@ var SearchBox = function (props) {
             }
         });
     }, [selectedIndex]);
-    return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$shadowHeight": shadowHeight }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shadow" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inputWrapper" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: onButtonClick, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" }) }))] })), showResultList && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: resultRef, className: "resultList" }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingContent, {}) : children })) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$shadowHeight": shadowHeight }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shadow" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inputWrapper" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: onButtonClick, className: "icon", "aria-label": t("SEARCH") }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" }) }))] })), showResultList && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: resultRef, className: "resultList" }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingContent, {}) : children })) })))] })));
 };
 SearchBox.defaultProps = {
     showResultList: false,

package/dist/components/SelectBox/SelectBox.js

@@ -58,7 +58,7 @@ var async_1 = __importDefault(require("react-select/async"));
 var simplebar_react_1 = __importDefault(require("simplebar-react"));
 var SelectBox = (0, react_1.forwardRef)(function (props, ref) {
     var _a, _b, _c, _d;
-    var hasShowDropdownIcon = props.hasShowDropdownIcon, isAsync = props.isAsync, maxOptionListHeight = props.maxOptionListHeight, options = props.options, name = props.name, placeholder = props.placeholder, onChange = props.onChange, isSearchable = props.isSearchable, hasShowSearchIcon = props.hasShowSearchIcon, menuIsOpen = props.menuIsOpen, filterOption = props.filterOption, instanceId = props.instanceId, lightBg = props.lightBg, hasError = props.hasError, errorMessage = props.errorMessage, autoComplete = props.autoComplete, width = props.width, menuPlacement = props.menuPlacement, other = __rest(props, ["hasShowDropdownIcon", "isAsync", "maxOptionListHeight", "options", "name", "placeholder", "onChange", "isSearchable", "hasShowSearchIcon", "menuIsOpen", "filterOption", "instanceId", "lightBg", "hasError", "errorMessage", "autoComplete", "width", "menuPlacement"]);
+    var hasShowDropdownIcon = props.hasShowDropdownIcon, isAsync = props.isAsync, maxOptionListHeight = props.maxOptionListHeight, options = props.options, name = props.name, placeholder = props.placeholder, onChange = props.onChange, isSearchable = props.isSearchable, hasShowSearchIcon = props.hasShowSearchIcon, menuIsOpen = props.menuIsOpen, filterOption = props.filterOption, instanceId = props.instanceId, lightBg = props.lightBg, hasError = props.hasError, errorMessage = props.errorMessage, autoComplete = props.autoComplete, width = props.width, menuPlacement = props.menuPlacement, id = props.id, other = __rest(props, ["hasShowDropdownIcon", "isAsync", "maxOptionListHeight", "options", "name", "placeholder", "onChange", "isSearchable", "hasShowSearchIcon", "menuIsOpen", "filterOption", "instanceId", "lightBg", "hasError", "errorMessage", "autoComplete", "width", "menuPlacement", "id"]);
     var simplebarRef = (0, react_1.useRef)(null);
     var formatOptionLabel = function (_a) {
         var _b, _c, _d;
@@ -81,6 +81,6 @@ var SelectBox = (0, react_1.forwardRef)(function (props, ref) {
     var MenuList = function (props) {
         return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuList, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: props.children })) })));
     };
-    return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, __assign({ "$width": props.width, "$hasError": hasError, "$maxOptionListHeight": maxOptionListHeight, "$hasShowDropdownIcon": hasShowDropdownIcon, "$MenuPlacement": menuPlacement }, { children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "select" }, { children: isAsync ? ((0, jsx_runtime_1.jsx)(async_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable && hasShowSearchIcon, _a), (_b = {}, _b['lightBg'] = lightBg, _b)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false }, other, { ref: ref }))) : ((0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_c = {}, _c['isSearchable'] = isSearchable && hasShowSearchIcon, _c), (_d = {}, _d['lightBg'] = lightBg, _d)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false }, other, { ref: ref }))) })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
+    return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, __assign({ "$width": props.width, "$hasError": hasError, "$maxOptionListHeight": maxOptionListHeight, "$hasShowDropdownIcon": hasShowDropdownIcon, "$MenuPlacement": menuPlacement }, { children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: props === null || props === void 0 ? void 0 : props.label })) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "select" }, { children: isAsync ? ((0, jsx_runtime_1.jsx)(async_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable && hasShowSearchIcon, _a), (_b = {}, _b['lightBg'] = lightBg, _b)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false }, other, { ref: ref, id: id }))) : ((0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_c = {}, _c['isSearchable'] = isSearchable && hasShowSearchIcon, _c), (_d = {}, _d['lightBg'] = lightBg, _d)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false }, other, { ref: ref, id: id }))) })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
 });
 exports.default = SelectBox;

package/dist/components/SelectBox/SelectBox.styled.js

@@ -13,5 +13,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
 var devices_1 = require("../../constants/devices");
-exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        /*&:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }*/\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font: var(--body-medium-14-17);\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          //max-height: ", ";\n          max-height: initial !important;\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover,&:is(.customSelect__option--is-focused) {\n              background-color: var(--dark-opacity-3);\n\n                @media only screen and ", " {\n                    background-color: transparent !important;\n                }\n            }\n              \n            &:active {\n              background-color: var(--dark-opacity-3);\n              \n              @media only screen and ", " {\n                background-color: transparent !important;\n              }\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n              >div{\n                  display: flex;\n                  align-items: center;\n                  justify-content: space-between;\n                  width: 100%;\n                  .left{\n                      strong {\n                          display: block;\n                          font:var(--title-bold-16-19);\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-medium-13-16);\n                      }\n                  }\n                  .right{\n                      display: flex;\n                      align-items: end;\n                      justify-content: flex-end;\n                      strong {\n                          display: block;\n                          font:var(--title-extra-bold-16-19);\n                          line-height: 17px;\n                          small{\n                              font:var(--body-extra-bold-14-17);\n                          }\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-regular-13-16);\n                          margin-left: 0.2rem;\n                      }\n                  }\n              }\n\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n  .placement-top{\n      .customSelect__menu {\n          border-radius: 8px 8px 0 0 !important;\n          top: auto !important;\n          bottom: 100% !important;\n      }\n      .customSelect__control--menu-is-open {\n          &:before{\n              border-radius: 0 0 8px 8px !important;\n          }\n      }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        /*&:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }*/\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font: var(--body-medium-14-17);\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          //max-height: ", ";\n          max-height: initial !important;\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover,&:is(.customSelect__option--is-focused) {\n              background-color: var(--dark-opacity-3);\n\n                @media only screen and ", " {\n                    background-color: transparent !important;\n                }\n            }\n              \n            &:active {\n              background-color: var(--dark-opacity-3);\n              \n              @media only screen and ", " {\n                background-color: transparent !important;\n              }\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n              >div{\n                  display: flex;\n                  align-items: center;\n                  justify-content: space-between;\n                  width: 100%;\n                  .left{\n                      strong {\n                          display: block;\n                          font:var(--title-bold-16-19);\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-medium-13-16);\n                      }\n                  }\n                  .right{\n                      display: flex;\n                      align-items: end;\n                      justify-content: flex-end;\n                      strong {\n                          display: block;\n                          font:var(--title-extra-bold-16-19);\n                          line-height: 17px;\n                          small{\n                              font:var(--body-extra-bold-14-17);\n                          }\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-regular-13-16);\n                          margin-left: 0.2rem;\n                      }\n                  }\n              }\n\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n  .placement-top{\n      .customSelect__menu {\n          border-radius: 8px 8px 0 0 !important;\n          top: auto !important;\n          bottom: 100% !important;\n      }\n      .customSelect__control--menu-is-open {\n          &:before{\n              border-radius: 0 0 8px 8px !important;\n          }\n      }\n  }\n"])), function (props) { return props.$width || '370px'; }, function (props) { return props.$maxOptionListHeight && props.$maxOptionListHeight; }, function (props) { return props.$hasError ? "2px" : "1px"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark)"; }, function (props) { return props.$hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", hasWrapper: false, width: "16px", height: "16px" })), function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return !props.$hasError && "url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')"; }, function (props) { return props.$maxOptionListHeight; }, devices_1.devices.lg, devices_1.devices.lg, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" })));
+exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    label {\n      margin: 0;\n      color: var(--dark-opacity-50);\n      display: block;\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        /*&:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }*/\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font: var(--body-medium-14-17);\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          //max-height: ", ";\n          max-height: initial !important;\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover,&:is(.customSelect__option--is-focused) {\n              background-color: var(--dark-opacity-3);\n\n                @media only screen and ", " {\n                    background-color: transparent !important;\n                }\n            }\n              \n            &:active {\n              background-color: var(--dark-opacity-3);\n              \n              @media only screen and ", " {\n                background-color: transparent !important;\n              }\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n              >div{\n                  display: flex;\n                  align-items: center;\n                  justify-content: space-between;\n                  width: 100%;\n                  .left{\n                      strong {\n                          display: block;\n                          font:var(--title-bold-16-19);\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-medium-13-16);\n                      }\n                  }\n                  .right{\n                      display: flex;\n                      align-items: end;\n                      justify-content: flex-end;\n                      strong {\n                          display: block;\n                          font:var(--title-extra-bold-16-19);\n                          line-height: 17px;\n                          small{\n                              font:var(--body-extra-bold-14-17);\n                          }\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-regular-13-16);\n                          margin-left: 0.2rem;\n                      }\n                  }\n              }\n\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n  .placement-top{\n      .customSelect__menu {\n          border-radius: 8px 8px 0 0 !important;\n          top: auto !important;\n          bottom: 100% !important;\n      }\n      .customSelect__control--menu-is-open {\n          &:before{\n              border-radius: 0 0 8px 8px !important;\n          }\n      }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    label {\n      margin: 0;\n      color: var(--dark-opacity-50);\n      display: block;\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        /*&:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }*/\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font: var(--body-medium-14-17);\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          //max-height: ", ";\n          max-height: initial !important;\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover,&:is(.customSelect__option--is-focused) {\n              background-color: var(--dark-opacity-3);\n\n                @media only screen and ", " {\n                    background-color: transparent !important;\n                }\n            }\n              \n            &:active {\n              background-color: var(--dark-opacity-3);\n              \n              @media only screen and ", " {\n                background-color: transparent !important;\n              }\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n              >div{\n                  display: flex;\n                  align-items: center;\n                  justify-content: space-between;\n                  width: 100%;\n                  .left{\n                      strong {\n                          display: block;\n                          font:var(--title-bold-16-19);\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-medium-13-16);\n                      }\n                  }\n                  .right{\n                      display: flex;\n                      align-items: end;\n                      justify-content: flex-end;\n                      strong {\n                          display: block;\n                          font:var(--title-extra-bold-16-19);\n                          line-height: 17px;\n                          small{\n                              font:var(--body-extra-bold-14-17);\n                          }\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-regular-13-16);\n                          margin-left: 0.2rem;\n                      }\n                  }\n              }\n\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n  .placement-top{\n      .customSelect__menu {\n          border-radius: 8px 8px 0 0 !important;\n          top: auto !important;\n          bottom: 100% !important;\n      }\n      .customSelect__control--menu-is-open {\n          &:before{\n              border-radius: 0 0 8px 8px !important;\n          }\n      }\n  }\n"])), function (props) { return props.$width || '370px'; }, function (props) { return props.$maxOptionListHeight && props.$maxOptionListHeight; }, function (props) { return props.$hasError ? "2px" : "1px"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark)"; }, function (props) { return props.$hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", hasWrapper: false, width: "16px", height: "16px" })), function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return !props.$hasError && "url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')"; }, function (props) { return props.$maxOptionListHeight; }, devices_1.devices.lg, devices_1.devices.lg, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" })));
 var templateObject_1;

package/dist/components/SelectBox/stories/SelectBox.stories.js

@@ -23,12 +23,13 @@ exports.Default = {
         lightBg: true,
         label: "Label",
         name: "name",
-        menuIsOpen: true,
+        //menuIsOpen: false,
         options: SelectValues_json_1.default,
         width: "400px",
         hasError: false,
         errorMessage: "Error message.",
         maxOptionListHeight: "200px",
         MenuPlacement: "top",
+        id: "customSelectBox",
     },
 };

package/dist/components/Tabs/TabItem.js

@@ -30,7 +30,7 @@ var TabItem = function (props) {
     (0, react_1.useEffect)(function () {
         if (props.isActive)
             setActiveContent(props.children);
-    }, [props.isActive]);
+    }, [props.isActive, props.children]);
     return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, __assign({ "$isDisabled": props.isDisabled }, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$isActive": props.isActive, onClick: onClickTab }, { children: props.title })) }), props.key));
 };
 exports.default = TabItem;

package/dist/components/Tabs/Tabs.js

@@ -45,6 +45,9 @@ var TabItem_1 = __importDefault(require("./TabItem"));
 var Tabs = function (props) {
     var _a = (0, react_1.useState)(props.activeIndex || 0), activeIndex = _a[0], setActiveIndex = _a[1];
     var _b = (0, react_1.useState)(null), activeContent = _b[0], setActiveContent = _b[1];
+    (0, react_1.useEffect)(function () {
+        setActiveIndex(props.activeIndex);
+    }, [props.activeIndex]);
     var onActive = function (e) { return props.onActive(e); };
     var getTabsContext = (0, react_1.useCallback)(function (index) {
         var activateTab = function (nextIndex) {

package/dist/components/Textarea/Textarea.js

@@ -29,8 +29,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var Textarea_styled_1 = require("./Textarea.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Textarea = function (props) {
-    var hasError = props.hasError, label = props.label, errorMessage = props.errorMessage, width = props.width, height = props.height, value = props.value, resize = props.resize, name = props.name, placeholder = props.placeholder, other = __rest(props, ["hasError", "label", "errorMessage", "width", "height", "value", "resize", "name", "placeholder"]);
-    return ((0, jsx_runtime_1.jsxs)(Textarea_styled_1.Container, __assign({ "$width": props.width }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) })), (0, jsx_runtime_1.jsx)(Textarea_styled_1.TextareaStyled, __assign({ "$hasError": hasError, "$height": height, "$resize": resize }, other, { children: value })), (props === null || props === void 0 ? void 0 : props.hasError) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.errorMessage })] })))] })));
+    var hasError = props.hasError, label = props.label, errorMessage = props.errorMessage, width = props.width, height = props.height, value = props.value, resize = props.resize, name = props.name, placeholder = props.placeholder, id = props.id, other = __rest(props, ["hasError", "label", "errorMessage", "width", "height", "value", "resize", "name", "placeholder", "id"]);
+    return ((0, jsx_runtime_1.jsxs)(Textarea_styled_1.Container, __assign({ "$width": props.width }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: props === null || props === void 0 ? void 0 : props.label })) })), (0, jsx_runtime_1.jsx)(Textarea_styled_1.TextareaStyled, __assign({ "$hasError": hasError, "$height": height, "$resize": resize, id: id }, other, { children: value })), (props === null || props === void 0 ? void 0 : props.hasError) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.errorMessage })] })))] })));
 };
 Textarea.defaultValues = {
     hasError: false,

package/dist/components/Textarea/Textarea.styled.js

@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextareaStyled = exports.Container = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    } \n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"], ["\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    } \n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"])), function (props) { return props.$width || '370px'; });
+exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    label {\n      margin: 0;\n      color: var(--dark-opacity-50);\n      display: block;\n    } \n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"], ["\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    label {\n      margin: 0;\n      color: var(--dark-opacity-50);\n      display: block;\n    } \n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"])), function (props) { return props.$width || '370px'; });
 exports.TextareaStyled = styled_components_1.default.textarea(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: ", ";\n  background: var(--dark-opacity-3);\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  outline: none;\n  resize: ", ";\n  display: block;\n  font:var(--body-semi-bold-14-17);\n  &::placeholder {\n    color: ", ";\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: ", ";\n  background: var(--dark-opacity-3);\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  outline: none;\n  resize: ", ";\n  display: block;\n  font:var(--body-semi-bold-14-17);\n  &::placeholder {\n    color: ", ";\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n\n"])), function (props) { return props.$height; }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$resize; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
 var templateObject_1, templateObject_2;

package/dist/components/Textarea/stories/Textarea.stories.js

@@ -22,5 +22,6 @@ exports.Default = {
         label: "Label",
         height: "140px",
         resize: "none",
+        id: "customTextarea",
     },
 };

package/dist/i18n/locales/english.json

@@ -7,5 +7,6 @@
     "next step": "Next step",
     "discount": "Discount",
     "copied": "Copied",
-    "edit": "Edit"
+    "edit": "Edit",
+    "SEARCH": "search"
 }

package/dist/i18n/locales/turkish.json

@@ -10,5 +10,6 @@
     "edit": "Düzenle",
     "CHOOSE_PRIMARY_CART": "Birincil kart olarak seç",
     "CHOOSE_SPARE_CART": "Yedek kart olarak seç",
-    "DELETE_CART": "Kartı sil"
+    "DELETE_CART": "Kartı sil",
+    "SEARCH": "Arama yap"
 }

package/dist/jsons/{categories.json → categories.js}

@@ -1,4 +1,7 @@
-[
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+exports.default = [
     {
         "id": 19,
         "parentId": 0,
@@ -633,6 +636,10 @@
         "headerMediaUrl": null,
         "medias": [],
         "icon": "Lgbt",
+        "component": function (_a) {
+            var children = _a.children;
+            return (0, jsx_runtime_1.jsx)("div", { children: children });
+        },
         "children": [
             {
                 "id": 67,
@@ -673,4 +680,4 @@
         "icon": "HeartArrow",
         "children": []
     }
-]
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "1.77.21",
+  "version": "1.77.23",
   "files": [
     "dist"
   ],