krl-alfred 2.23.5 → 2.23.7

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -30,6 +30,7 @@ var ItalicIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({
 var UnderlineIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M7 5v6a5 5 0 0 0 10 0V5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 19h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }))); };
 var StrikeIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.5 8.5C9.2 7 10.5 6 12.2 6c2.1 0 3.8 1.2 3.8 3 0 .8-.3 1.5-.9 2M15.5 15.5c-.7 1.5-2 2.5-3.7 2.5-2.1 0-3.8-1.2-3.8-3 0-.8.3-1.5.9-2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }))); };
 var OrderedListIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 6h10M10 12h10M10 18h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M4 5.5h1.5V9M4 9h3M4.5 14.5c.8 0 1.5.5 1.5 1.25S5.3 17 4.5 17H4v1.5h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
+var HeadingIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6 5v14M18 5v14M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }))); };
 var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.label, label = _b === void 0 ? props_1.RichTextEditorDefault.label : _b, _c = _a.placeholder, placeholder = _c === void 0 ? props_1.RichTextEditorDefault.placeholder : _c, value = _a.value, _d = _a.defaultValue, defaultValue = _d === void 0 ? props_1.RichTextEditorDefault.defaultValue : _d, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? props_1.RichTextEditorDefault.disabled : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.RichTextEditorDefault.hasError : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? props_1.RichTextEditorDefault.errorMessage : _g, className = _a.className, id = _a.id, _h = _a.minHeight, minHeight = _h === void 0 ? props_1.RichTextEditorDefault.minHeight : _h;
     var _j = (0, react_1.useState)(false), focused = _j[0], setFocused = _j[1];
@@ -38,7 +39,9 @@ var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
         immediatelyRender: false,
         extensions: [
             starter_kit_1.default.configure({
-                heading: false,
+                heading: {
+                    levels: [2],
+                },
                 code: false,
                 codeBlock: false,
                 blockquote: false,
@@ -107,7 +110,7 @@ var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
     }); }, [editor, disabled]);
     if (!editor)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.RichTextEditorRoot, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.EditorShell, __assign({ "$hasError": hasError, "$disabled": disabled, "$focused": focused && !hasError }, { children: [(0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Kal\u0131n", "$active": editor.isActive('bold'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBold().run(); } }, { children: (0, jsx_runtime_1.jsx)(BoldIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u0130talik", "$active": editor.isActive('italic'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleItalic().run(); } }, { children: (0, jsx_runtime_1.jsx)(ItalicIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Alt\u0131 \u00E7izili", "$active": editor.isActive('underline'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleUnderline().run(); } }, { children: (0, jsx_runtime_1.jsx)(UnderlineIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u00DCst\u00FC \u00E7izili", "$active": editor.isActive('strike'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleStrike().run(); } }, { children: (0, jsx_runtime_1.jsx)(StrikeIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Numaral\u0131 liste", "$active": editor.isActive('orderedList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleOrderedList().run(); } }, { children: (0, jsx_runtime_1.jsx)(OrderedListIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Madde i\u015Faretli liste", "$active": editor.isActive('bulletList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBulletList().run(); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "List", width: "1.25rem", height: "1.25rem", color: "currentColor" }) }))] }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.EditorContentArea, __assign({ "$minHeight": minHeight }, { children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ErrorMessage, { children: (0, jsx_runtime_1.jsx)("p", { children: errorMessage }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.RichTextEditorRoot, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.EditorShell, __assign({ "$hasError": hasError, "$disabled": disabled, "$focused": focused && !hasError }, { children: [(0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Kal\u0131n", "$active": editor.isActive('bold'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBold().run(); } }, { children: (0, jsx_runtime_1.jsx)(BoldIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u0130talik", "$active": editor.isActive('italic'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleItalic().run(); } }, { children: (0, jsx_runtime_1.jsx)(ItalicIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Alt\u0131 \u00E7izili", "$active": editor.isActive('underline'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleUnderline().run(); } }, { children: (0, jsx_runtime_1.jsx)(UnderlineIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u00DCst\u00FC \u00E7izili", "$active": editor.isActive('strike'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleStrike().run(); } }, { children: (0, jsx_runtime_1.jsx)(StrikeIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Ba\u015Fl\u0131k", "$active": editor.isActive('heading', { level: 2 }), disabled: disabled, onClick: function () { return editor.chain().focus().toggleHeading({ level: 2 }).run(); } }, { children: (0, jsx_runtime_1.jsx)(HeadingIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Numaral\u0131 liste", "$active": editor.isActive('orderedList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleOrderedList().run(); } }, { children: (0, jsx_runtime_1.jsx)(OrderedListIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Madde i\u015Faretli liste", "$active": editor.isActive('bulletList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBulletList().run(); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "List", width: "1.25rem", height: "1.25rem", color: "currentColor" }) }))] }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.EditorContentArea, __assign({ "$minHeight": minHeight }, { children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ErrorMessage, { children: (0, jsx_runtime_1.jsx)("p", { children: errorMessage }) }))] })));
 });
 RichTextEditor.displayName = 'RichTextEditor';
 exports.default = RichTextEditor;

package/dist/components/RichTextEditor/RichTextEditor.styled.js

@@ -11,11 +11,11 @@ exports.VariableChipButton = exports.VariableActions = exports.ErrorMessage = ex
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.RichTextEditorRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"])));
 exports.FieldLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
-exports.EditorShell = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    background: ", ";\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--grey-10);\n    opacity: ", ";\n    pointer-events: ", ";\n    transition: border-color 0.15s ease;\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    background: ", ";\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--grey-10);\n    opacity: ", ";\n    pointer-events: ", ";\n    transition: border-color 0.15s ease;\n"])), function (props) { return (props.$disabled ? 'var(--dark-opacity-5)' : 'var(--dark-opacity-3)'); }, function (props) { return (props.$disabled ? 0.7 : 1); }, function (props) { return (props.$disabled ? 'none' : 'auto'); });
+exports.EditorShell = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    position: relative;\n    background: ", ";\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid ", ";\n    opacity: ", ";\n    pointer-events: ", ";\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: -1px;\n        border: 2px solid ", ";\n        border-radius: inherit;\n        pointer-events: none;\n        z-index: 1;\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    position: relative;\n    background: ", ";\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid ", ";\n    opacity: ", ";\n    pointer-events: ", ";\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: -1px;\n        border: 2px solid ", ";\n        border-radius: inherit;\n        pointer-events: none;\n        z-index: 1;\n    }\n"])), function (props) { return (props.$disabled ? 'var(--dark-opacity-5)' : 'var(--dark-opacity-3)'); }, function (props) { return (props.$hasError ? 'var(--red)' : 'var(--grey-10)'); }, function (props) { return (props.$disabled ? 0.7 : 1); }, function (props) { return (props.$disabled ? 'none' : 'auto'); }, function (props) { return (props.$focused ? 'var(--primary)' : 'transparent'); });
 exports.Toolbar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n    padding: 0 0 1rem;\n    margin: 0 0 1rem;\n    border-bottom: 1px solid var(--grey-10);\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n    padding: 0 0 1rem;\n    margin: 0 0 1rem;\n    border-bottom: 1px solid var(--grey-10);\n"])));
-exports.ToolbarButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: ", ";\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-10);\n        color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: ", ";\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-10);\n        color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"])), function (props) { return (props.$active ? 'var(--primary-opacity-10)' : 'transparent'); }, function (props) { return (props.$active ? 'var(--primary)' : 'var(--grey-50)'); });
+exports.ToolbarButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: transparent;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover:not(:disabled) {\n        background: transparent;\n        color: var(--dark);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: transparent;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover:not(:disabled) {\n        background: transparent;\n        color: var(--dark);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"])), function (props) { return (props.$active ? 'var(--dark)' : 'var(--grey-50)'); });
 exports.ToolbarDivider = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: inline-block;\n    width: 1px;\n    height: 1.25rem;\n    margin: 0;\n    background: var(--dark-opacity-10);\n"], ["\n    display: inline-block;\n    width: 1px;\n    height: 1.25rem;\n    margin: 0;\n    background: var(--dark-opacity-10);\n"])));
-exports.EditorContentArea = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"], ["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"])), function (props) { return props.$minHeight || '200px'; });
+exports.EditorContentArea = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        h2 {\n            margin: 0 0 0.75rem;\n            color: var(--dark);\n            font: var(--headline-semi-bold-18-22);\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"], ["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        h2 {\n            margin: 0 0 0.75rem;\n            color: var(--dark);\n            font: var(--headline-semi-bold-18-22);\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"])), function (props) { return props.$minHeight || '200px'; });
 exports.ErrorMessage = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"])));
 exports.VariableActions = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"])));
 exports.VariableChipButton = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"])));

package/dist/components/RichTextEditor/utils/sanitize.js

@@ -8,6 +8,7 @@ var dompurify_1 = __importDefault(require("dompurify"));
 var ALLOWED_TAGS = [
     'p',
     'br',
+    'h2',
     'strong',
     'b',
     'em',
@@ -81,7 +82,7 @@ var prepareEditorHtml = function (html) {
                 parent.replaceChild(emptyParagraph, element);
                 return;
             }
-            if (tag === 'P' || tag === 'SPAN') {
+            if (tag === 'P' || tag === 'H2' || tag === 'SPAN') {
                 return;
             }
             if (tag === 'LI' || tag === 'UL' || tag === 'OL' || tag === 'DIV') {

package/dist/components/SelectBox/SelectBox.js

@@ -62,7 +62,7 @@ var Loader_1 = __importDefault(require("../Loader"));
 var Checkbox_1 = __importDefault(require("../Checkbox"));
 var SelectBox = (0, react_1.forwardRef)(function (_a, ref) {
     var _b, _c, _d, _e;
-    var _f = _a.isSearchable, isSearchable = _f === void 0 ? props_1.SelectBoxDefault.isSearchable : _f, _g = _a.menuIsOpen, menuIsOpen = _g === void 0 ? props_1.SelectBoxDefault.menuIsOpen : _g, _h = _a.label, label = _h === void 0 ? props_1.SelectBoxDefault.label : _h, _j = _a.width, width = _j === void 0 ? props_1.SelectBoxDefault.width : _j, _k = _a.menuWidth, menuWidth = _k === void 0 ? props_1.SelectBoxDefault.menuWidth : _k, _l = _a.menuAlign, menuAlign = _l === void 0 ? props_1.SelectBoxDefault.menuAlign : _l, _m = _a.hasMenuShadow, hasMenuShadow = _m === void 0 ? props_1.SelectBoxDefault.hasMenuShadow : _m, _o = _a.name, name = _o === void 0 ? props_1.SelectBoxDefault.name : _o, _p = _a.placeholder, placeholder = _p === void 0 ? props_1.SelectBoxDefault.placeholder : _p, _q = _a.instanceId, instanceId = _q === void 0 ? props_1.SelectBoxDefault.instanceId : _q, _r = _a.options, options = _r === void 0 ? props_1.SelectBoxDefault.options : _r, _s = _a.lightBg, lightBg = _s === void 0 ? props_1.SelectBoxDefault.lightBg : _s, _t = _a.onChange, onChange = _t === void 0 ? props_1.SelectBoxDefault.onChange : _t, _u = _a.filterOption, filterOption = _u === void 0 ? props_1.SelectBoxDefault.filterOption : _u, _v = _a.hasError, hasError = _v === void 0 ? props_1.SelectBoxDefault.hasError : _v, _w = _a.errorMessage, errorMessage = _w === void 0 ? props_1.SelectBoxDefault.errorMessage : _w, _x = _a.maxOptionListHeight, maxOptionListHeight = _x === void 0 ? props_1.SelectBoxDefault.maxOptionListHeight : _x, _y = _a.isAsync, isAsync = _y === void 0 ? props_1.SelectBoxDefault.isAsync : _y, _z = _a.hasShowDropdownIcon, hasShowDropdownIcon = _z === void 0 ? props_1.SelectBoxDefault.hasShowDropdownIcon : _z, _0 = _a.hasShowSearchIcon, hasShowSearchIcon = _0 === void 0 ? props_1.SelectBoxDefault.hasShowSearchIcon : _0, _1 = _a.autoComplete, autoComplete = _1 === void 0 ? props_1.SelectBoxDefault.autoComplete : _1, _2 = _a.menuPlacement, menuPlacement = _2 === void 0 ? props_1.SelectBoxDefault.menuPlacement : _2, _3 = _a.id, id = _3 === void 0 ? props_1.SelectBoxDefault.id : _3, _4 = _a.isClearable, isClearable = _4 === void 0 ? props_1.SelectBoxDefault.isClearable : _4, _5 = _a.size, size = _5 === void 0 ? props_1.SelectBoxDefault.size : _5, _6 = _a.isMulti, isMulti = _6 === void 0 ? props_1.SelectBoxDefault.isMulti : _6, _7 = _a.menuPosition, menuPosition = _7 === void 0 ? props_1.SelectBoxDefault.menuPosition : _7, _8 = _a.hasSelectAll, hasSelectAll = _8 === void 0 ? props_1.SelectBoxDefault.hasSelectAll : _8, _9 = _a.selectAllLabel, selectAllLabel = _9 === void 0 ? props_1.SelectBoxDefault.selectAllLabel : _9, _10 = _a.description, description = _10 === void 0 ? props_1.SelectBoxDefault.description : _10, defaultValue = _a.defaultValue, other = __rest(_a, ["isSearchable", "menuIsOpen", "label", "width", "menuWidth", "menuAlign", "hasMenuShadow", "name", "placeholder", "instanceId", "options", "lightBg", "onChange", "filterOption", "hasError", "errorMessage", "maxOptionListHeight", "isAsync", "hasShowDropdownIcon", "hasShowSearchIcon", "autoComplete", "menuPlacement", "id", "isClearable", "size", "isMulti", "menuPosition", "hasSelectAll", "selectAllLabel", "description", "defaultValue"]);
+    var _f = _a.isSearchable, isSearchable = _f === void 0 ? props_1.SelectBoxDefault.isSearchable : _f, _g = _a.menuIsOpen, menuIsOpen = _g === void 0 ? props_1.SelectBoxDefault.menuIsOpen : _g, _h = _a.label, label = _h === void 0 ? props_1.SelectBoxDefault.label : _h, _j = _a.width, width = _j === void 0 ? props_1.SelectBoxDefault.width : _j, _k = _a.menuWidth, menuWidth = _k === void 0 ? props_1.SelectBoxDefault.menuWidth : _k, _l = _a.menuAlign, menuAlign = _l === void 0 ? props_1.SelectBoxDefault.menuAlign : _l, _m = _a.hasMenuShadow, hasMenuShadow = _m === void 0 ? props_1.SelectBoxDefault.hasMenuShadow : _m, _o = _a.name, name = _o === void 0 ? props_1.SelectBoxDefault.name : _o, _p = _a.placeholder, placeholder = _p === void 0 ? props_1.SelectBoxDefault.placeholder : _p, _q = _a.instanceId, instanceId = _q === void 0 ? props_1.SelectBoxDefault.instanceId : _q, _r = _a.options, options = _r === void 0 ? props_1.SelectBoxDefault.options : _r, _s = _a.lightBg, lightBg = _s === void 0 ? props_1.SelectBoxDefault.lightBg : _s, _t = _a.onChange, onChange = _t === void 0 ? props_1.SelectBoxDefault.onChange : _t, _u = _a.filterOption, filterOption = _u === void 0 ? props_1.SelectBoxDefault.filterOption : _u, _v = _a.hasError, hasError = _v === void 0 ? props_1.SelectBoxDefault.hasError : _v, _w = _a.errorMessage, errorMessage = _w === void 0 ? props_1.SelectBoxDefault.errorMessage : _w, _x = _a.maxOptionListHeight, maxOptionListHeight = _x === void 0 ? props_1.SelectBoxDefault.maxOptionListHeight : _x, _y = _a.isAsync, isAsync = _y === void 0 ? props_1.SelectBoxDefault.isAsync : _y, _z = _a.hasShowDropdownIcon, hasShowDropdownIcon = _z === void 0 ? props_1.SelectBoxDefault.hasShowDropdownIcon : _z, _0 = _a.hasShowSearchIcon, hasShowSearchIcon = _0 === void 0 ? props_1.SelectBoxDefault.hasShowSearchIcon : _0, _1 = _a.autoComplete, autoComplete = _1 === void 0 ? props_1.SelectBoxDefault.autoComplete : _1, _2 = _a.menuPlacement, menuPlacement = _2 === void 0 ? props_1.SelectBoxDefault.menuPlacement : _2, _3 = _a.id, id = _3 === void 0 ? props_1.SelectBoxDefault.id : _3, _4 = _a.isClearable, isClearable = _4 === void 0 ? props_1.SelectBoxDefault.isClearable : _4, _5 = _a.size, size = _5 === void 0 ? props_1.SelectBoxDefault.size : _5, _6 = _a.isMulti, isMulti = _6 === void 0 ? props_1.SelectBoxDefault.isMulti : _6, _7 = _a.menuPosition, menuPosition = _7 === void 0 ? props_1.SelectBoxDefault.menuPosition : _7, _8 = _a.hasSelectAll, hasSelectAll = _8 === void 0 ? props_1.SelectBoxDefault.hasSelectAll : _8, _9 = _a.selectAllLabel, selectAllLabel = _9 === void 0 ? props_1.SelectBoxDefault.selectAllLabel : _9, _10 = _a.description, description = _10 === void 0 ? props_1.SelectBoxDefault.description : _10, _11 = _a.disabled, disabled = _11 === void 0 ? props_1.SelectBoxDefault.disabled : _11, defaultValue = _a.defaultValue, other = __rest(_a, ["isSearchable", "menuIsOpen", "label", "width", "menuWidth", "menuAlign", "hasMenuShadow", "name", "placeholder", "instanceId", "options", "lightBg", "onChange", "filterOption", "hasError", "errorMessage", "maxOptionListHeight", "isAsync", "hasShowDropdownIcon", "hasShowSearchIcon", "autoComplete", "menuPlacement", "id", "isClearable", "size", "isMulti", "menuPosition", "hasSelectAll", "selectAllLabel", "description", "disabled", "defaultValue"]);
     var CustomOption = react_1.default.forwardRef(function (props, ref) {
         var _a;
         var innerProps = props.innerProps, isDisabled = props.isDisabled, data = props.data, isFocused = props.isFocused, isSelected = props.isSelected, isMulti = props.isMulti, children = props.children // children is part of OptionProps, but we render custom content based on `data`
@@ -179,21 +179,21 @@ var SelectBox = (0, react_1.forwardRef)(function (_a, ref) {
         return filterOption(normalizedOption, inputValue);
     } : undefined;
     // Remove filterOption from other to avoid duplicate props
-    var _11 = other, _ = _11.filterOption, restOther = __rest(_11, ["filterOption"]);
-    return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, __assign({ "$width": width, "$menuWidth": menuWidth, "$menuAlign": menuAlign, "$hasMenuShadow": hasMenuShadow, "$hasError": hasError, "$maxOptionListHeight": maxOptionListHeight, "$hasShowDropdownIcon": hasShowDropdownIcon, "$MenuPlacement": menuPlacement, "$size": size, "$isMulti": isMulti, "$menuPosition": menuPosition }, { children: [label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: label })) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "select" }, { children: isAsync ? ((0, jsx_runtime_1.jsx)(async_1.default, __assign({ components: {
+    var _12 = other, _ = _12.filterOption, restOther = __rest(_12, ["filterOption"]);
+    return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, __assign({ "$width": width, "$menuWidth": menuWidth, "$menuAlign": menuAlign, "$hasMenuShadow": hasMenuShadow, "$hasError": hasError, "$maxOptionListHeight": maxOptionListHeight, "$hasShowDropdownIcon": hasShowDropdownIcon, "$MenuPlacement": menuPlacement, "$size": size, "$isMulti": isMulti, "$menuPosition": menuPosition, "$disabled": disabled }, { children: [label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: label })) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "select" }, { children: isAsync ? ((0, jsx_runtime_1.jsx)(async_1.default, __assign({ components: {
                         Option: CustomOption,
                         Input: Input,
                         DropdownIndicator: DropdownIndicator,
                         MenuList: MenuList,
                         LoadingIndicator: LoadingIndicator,
                         MultiValue: MultiValue
-                    }, options: options || [], instanceId: instanceId, getOptionLabel: getOptionLabel, formatOptionLabel: formatOptionLabel, filterOption: wrappedFilterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_b = {}, _b['isSearchable'] = isSearchable && hasShowSearchIcon, _b), (_c = {}, _c['lightBg'] = lightBg, _c)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, loadingMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false, isClearable: isClearable, defaultValue: defaultValue, isMulti: isMulti, closeMenuOnSelect: !isMulti }, restOther, { ref: ref, id: id }))) : ((0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: {
+                    }, options: options || [], instanceId: instanceId, getOptionLabel: getOptionLabel, formatOptionLabel: formatOptionLabel, filterOption: wrappedFilterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_b = {}, _b['isSearchable'] = isSearchable && hasShowSearchIcon, _b), (_c = {}, _c['lightBg'] = lightBg, _c)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, loadingMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false, isClearable: isClearable, defaultValue: defaultValue, isMulti: isMulti, closeMenuOnSelect: !isMulti, isDisabled: disabled }, restOther, { ref: ref, id: id }))) : ((0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: {
                         Option: CustomOption,
                         Input: Input,
                         DropdownIndicator: DropdownIndicator,
                         MenuList: MenuList,
                         LoadingIndicator: LoadingIndicator,
                         MultiValue: MultiValue
-                    }, options: options || [], instanceId: instanceId, getOptionLabel: getOptionLabel, formatOptionLabel: formatOptionLabel, filterOption: wrappedFilterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_d = {}, _d['isSearchable'] = isSearchable && hasShowSearchIcon, _d), (_e = {}, _e['lightBg'] = lightBg, _e)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false, isClearable: isClearable, defaultValue: defaultValue, isMulti: isMulti, closeMenuOnSelect: !isMulti, hideSelectedOptions: false }, restOther, { ref: ref, id: id }))) })), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description }), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
+                    }, options: options || [], instanceId: instanceId, getOptionLabel: getOptionLabel, formatOptionLabel: formatOptionLabel, filterOption: wrappedFilterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_d = {}, _d['isSearchable'] = isSearchable && hasShowSearchIcon, _d), (_e = {}, _e['lightBg'] = lightBg, _e)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false, isClearable: isClearable, defaultValue: defaultValue, isMulti: isMulti, closeMenuOnSelect: !isMulti, hideSelectedOptions: false, isDisabled: disabled }, restOther, { ref: ref, id: id }))) })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description })] })));
 });
 exports.default = SelectBox;

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

@@ -14,7 +14,13 @@ 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    /* Checkbox styling for multi-select options */\n    .option-container {\n        display: flex;\n        align-items: center;\n        width: 100%;\n    }\n    \n    .checkbox-container {\n        display: flex;\n        align-items: center;\n    }\n    \n    .custom-checkbox {\n        width: 16px;\n        height: 16px;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: white;\n    }\n    \n    .custom-checkbox.checked {\n        background-color: var(--primary);\n        border-color: var(--primary);\n    }\n    \n    .option-content {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        width: 100%;\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\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\n    [data-simplebar] {\n        max-height: ", " !important;\n        height: auto !important;\n        padding: 0 !important;\n\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        z-index: 2;\n        .customSelect {\n            &:is(.lightBg) {\n                .customSelect__control {\n                    background-color: white;\n                }\n            }\n\n            .customSelect__control {\n                background-color: var(--dark-opacity-3);\n                border: 0;\n                padding: ", ";\n                cursor: pointer;\n\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: 0.5rem;\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                    min-height: ", ";\n\n                    &:is(.customSelect__value-container--is-multi) {\n                        display: block;\n                        padding: 1rem 0;\n                    }\n\n                    .customSelect__multi-value {\n                        border: 1px solid var(--grey-10);\n                        border-radius: 0.25rem;\n                        background-color: var(--dark-opacity-3);\n                        margin: 0;\n                        justify-content: space-between;\n                        display: grid;\n                        grid-template-columns: 1fr auto;\n                        position: relative;\n                        z-index: 5;\n                        + .customSelect__multi-value {\n                            margin-top: 0.5rem;\n                        }\n\n                        .customSelect__multi-value__label {\n                            font: var(--body-semi-bold-13-16);    \n                            white-space: nowrap;\n                            border-radius: 2px;\n                            color: hsl(0, 0%, 20%);\n                            padding: 3px 3px 3px 6px;\n                            box-sizing: border-box;\n                            display: grid;\n                            align-items: center;\n                            grid-template-columns: auto auto;\n                            justify-content: flex-start;\n                            span{\n                                overflow: hidden;\n                                text-overflow: ellipsis;\n                                &:nth-child(2){\n                                    margin-left: 0.25rem;\n                                }\n                            }\n                        }\n\n                        .customSelect__multi-value__remove {\n                            background-color: transparent !important;\n                            color: var(--dark) !important;\n                            -webkit-align-items: center;\n                            -webkit-box-align: center;\n                            -ms-flex-align: center;\n                            align-items: center;\n                            display: -webkit-box;\n                            display: -webkit-flex;\n                            display: -ms-flexbox;\n                            display: flex;\n                            border-radius: 2px;\n                            padding-left: 4px;\n                            padding-right: 4px;\n                            box-sizing: border-box;\n                            svg{\n                                width: 1rem;\n                                height: 1rem;\n                            }\n                        }\n                    }\n\n                    .customSelect__placeholder {\n                        font: var(--body-semi-bold-14-17);\n                        color: ", ";\n                        margin: 0;\n                        line-height: 1.5rem;\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                        position: absolute;\n                        bottom: 0;\n                        top: 0;\n                        margin-top: 0;\n                        width: 100% !important;\n                        display: block !important;\n                        &:after {\n                            display: none;\n                        }\n\n                        input {\n                            font: var(--body-semi-bold-14-17) !important;\n                            width: 100% !important;\n                            display: block !important;\n                            height: 100% !important;\n                        }\n                    }\n                }\n                .customSelect__value-container--has-value{\n                    .customSelect__input-container {\n                        margin-top: ", " !important;\n                        //position: static !important;\n                    }\n                }\n                .customSelect__indicators{\n                    height: ", ";\n                }\n                .customSelect__indicator {\n                    padding: 0;\n                    //margin: 0 0 0 0.5rem;\n                    width: 1.5rem;\n                    height: 1.5rem;\n                    transition: all .2s ease;\n                    align-items: center;\n                    justify-content: center;\n                    &:is(.customSelect__dropdown-indicator) {\n                        ", ";\n                    }\n\n                    &:is(.customSelect__clear-indicator) {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                        display: block !important;\n                        background-image: url('", "');\n                        background-repeat: no-repeat;\n                        background-position: center center;\n                        svg {\n                            display: none;\n                        }\n\n                        ~ .customSelect__dropdown-indicator {\n                            display: none;\n                        }\n                    }\n\n                    div {\n                        display: block;\n                    }\n                }\n\n                .customSelect__indicator-separator {\n                    display: none;\n                }\n                .customSelect__loading-indicator{\n                    width: 1.5rem;\n                    span{\n                        display: none;\n                    }\n                    ~ *{\n                        display: none !important;\n                        ~ *{\n                            display: none !important;\n                        }\n                    }\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\n                    &.customSelect__value-container--has-value {\n                        background-image: ", ";\n                    }\n                }\n            }\n            .customSelect__control--is-focused {\n                border-color: var(--primary);\n                box-shadow: none;\n                .customSelect__input-container {\n                    margin-top: 0 !important;\n                }\n                .customSelect__value-container--has-value{\n                    .customSelect__input-container {\n                        margin-top: ", ";\n                        position: static;\n\n                        input {\n\n                        }\n                    }\n                }\n            }\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 0.5rem 0.5rem;\n                box-shadow: ", ";\n                border: ", ";\n                overflow: hidden;\n                position: ", ";\n                min-width: ", ";\n                left: ", ";\n                right: ", ";\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-selected) {\n                            background-color: var(--dark-opacity-3) !important;\n\n                            @media only screen and ", " {\n                                //background-color: transparent !important;\n                            }\n                        }\n\n                        &:is(.customSelect__option--is-focused) {\n                            background-color: transparent;\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\n                            strong {\n                                color: var(--dark-opacity-50);\n                            }\n                        }\n\n                        &:is(.fixedTop) {\n                            position: sticky;\n                            top: 0;\n                            left: 0;\n                            right: 0;\n                            z-index: 4;\n                            background-color: #fff;\n                            border-bottom: 1px solid var(--dark-opacity-10);\n                            \n                            &:hover {\n                                background-color: var(--dark-opacity-3) !important;\n                            }\n                        }\n\n                        > div {\n                            display: flex;\n                            align-items: center;\n                            justify-content: space-between;\n                            width: 100%;\n\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\n                            .right {\n                                display: flex;\n                                align-items: end;\n                                justify-content: flex-end;\n\n                                strong {\n                                    display: block;\n                                    font: var(--title-extra-bold-16-19);\n                                    line-height: 17px;\n\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\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\n                box-shadow: none;\n\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__clear-indicator {\n                    display: none !important;\n                }\n\n\n                .customSelect__single-value {\n                    color: var(--dark) !important;\n                }\n            }\n        }\n    }\n\n    .placement-top {\n        .customSelect__menu {\n            border-radius: 0.5rem 0.5rem 0 0 !important;\n            top: auto !important;\n            bottom: 100% !important;\n        }\n\n        .customSelect__control--menu-is-open {\n            &:before {\n                border-radius: 0 0 0.5rem 0.5rem !important;\n            }\n        }\n    }\n"], ["\n    /* Checkbox styling for multi-select options */\n    .option-container {\n        display: flex;\n        align-items: center;\n        width: 100%;\n    }\n    \n    .checkbox-container {\n        display: flex;\n        align-items: center;\n    }\n    \n    .custom-checkbox {\n        width: 16px;\n        height: 16px;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: white;\n    }\n    \n    .custom-checkbox.checked {\n        background-color: var(--primary);\n        border-color: var(--primary);\n    }\n    \n    .option-content {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        width: 100%;\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\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\n    [data-simplebar] {\n        max-height: ", " !important;\n        height: auto !important;\n        padding: 0 !important;\n\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        z-index: 2;\n        .customSelect {\n            &:is(.lightBg) {\n                .customSelect__control {\n                    background-color: white;\n                }\n            }\n\n            .customSelect__control {\n                background-color: var(--dark-opacity-3);\n                border: 0;\n                padding: ", ";\n                cursor: pointer;\n\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: 0.5rem;\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                    min-height: ", ";\n\n                    &:is(.customSelect__value-container--is-multi) {\n                        display: block;\n                        padding: 1rem 0;\n                    }\n\n                    .customSelect__multi-value {\n                        border: 1px solid var(--grey-10);\n                        border-radius: 0.25rem;\n                        background-color: var(--dark-opacity-3);\n                        margin: 0;\n                        justify-content: space-between;\n                        display: grid;\n                        grid-template-columns: 1fr auto;\n                        position: relative;\n                        z-index: 5;\n                        + .customSelect__multi-value {\n                            margin-top: 0.5rem;\n                        }\n\n                        .customSelect__multi-value__label {\n                            font: var(--body-semi-bold-13-16);    \n                            white-space: nowrap;\n                            border-radius: 2px;\n                            color: hsl(0, 0%, 20%);\n                            padding: 3px 3px 3px 6px;\n                            box-sizing: border-box;\n                            display: grid;\n                            align-items: center;\n                            grid-template-columns: auto auto;\n                            justify-content: flex-start;\n                            span{\n                                overflow: hidden;\n                                text-overflow: ellipsis;\n                                &:nth-child(2){\n                                    margin-left: 0.25rem;\n                                }\n                            }\n                        }\n\n                        .customSelect__multi-value__remove {\n                            background-color: transparent !important;\n                            color: var(--dark) !important;\n                            -webkit-align-items: center;\n                            -webkit-box-align: center;\n                            -ms-flex-align: center;\n                            align-items: center;\n                            display: -webkit-box;\n                            display: -webkit-flex;\n                            display: -ms-flexbox;\n                            display: flex;\n                            border-radius: 2px;\n                            padding-left: 4px;\n                            padding-right: 4px;\n                            box-sizing: border-box;\n                            svg{\n                                width: 1rem;\n                                height: 1rem;\n                            }\n                        }\n                    }\n\n                    .customSelect__placeholder {\n                        font: var(--body-semi-bold-14-17);\n                        color: ", ";\n                        margin: 0;\n                        line-height: 1.5rem;\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                        position: absolute;\n                        bottom: 0;\n                        top: 0;\n                        margin-top: 0;\n                        width: 100% !important;\n                        display: block !important;\n                        &:after {\n                            display: none;\n                        }\n\n                        input {\n                            font: var(--body-semi-bold-14-17) !important;\n                            width: 100% !important;\n                            display: block !important;\n                            height: 100% !important;\n                        }\n                    }\n                }\n                .customSelect__value-container--has-value{\n                    .customSelect__input-container {\n                        margin-top: ", " !important;\n                        //position: static !important;\n                    }\n                }\n                .customSelect__indicators{\n                    height: ", ";\n                }\n                .customSelect__indicator {\n                    padding: 0;\n                    //margin: 0 0 0 0.5rem;\n                    width: 1.5rem;\n                    height: 1.5rem;\n                    transition: all .2s ease;\n                    align-items: center;\n                    justify-content: center;\n                    &:is(.customSelect__dropdown-indicator) {\n                        ", ";\n                    }\n\n                    &:is(.customSelect__clear-indicator) {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                        display: block !important;\n                        background-image: url('", "');\n                        background-repeat: no-repeat;\n                        background-position: center center;\n                        svg {\n                            display: none;\n                        }\n\n                        ~ .customSelect__dropdown-indicator {\n                            display: none;\n                        }\n                    }\n\n                    div {\n                        display: block;\n                    }\n                }\n\n                .customSelect__indicator-separator {\n                    display: none;\n                }\n                .customSelect__loading-indicator{\n                    width: 1.5rem;\n                    span{\n                        display: none;\n                    }\n                    ~ *{\n                        display: none !important;\n                        ~ *{\n                            display: none !important;\n                        }\n                    }\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\n                    &.customSelect__value-container--has-value {\n                        background-image: ", ";\n                    }\n                }\n            }\n            .customSelect__control--is-focused {\n                border-color: var(--primary);\n                box-shadow: none;\n                .customSelect__input-container {\n                    margin-top: 0 !important;\n                }\n                .customSelect__value-container--has-value{\n                    .customSelect__input-container {\n                        margin-top: ", ";\n                        position: static;\n\n                        input {\n\n                        }\n                    }\n                }\n            }\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 0.5rem 0.5rem;\n                box-shadow: ", ";\n                border: ", ";\n                overflow: hidden;\n                position: ", ";\n                min-width: ", ";\n                left: ", ";\n                right: ", ";\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-selected) {\n                            background-color: var(--dark-opacity-3) !important;\n\n                            @media only screen and ", " {\n                                //background-color: transparent !important;\n                            }\n                        }\n\n                        &:is(.customSelect__option--is-focused) {\n                            background-color: transparent;\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\n                            strong {\n                                color: var(--dark-opacity-50);\n                            }\n                        }\n\n                        &:is(.fixedTop) {\n                            position: sticky;\n                            top: 0;\n                            left: 0;\n                            right: 0;\n                            z-index: 4;\n                            background-color: #fff;\n                            border-bottom: 1px solid var(--dark-opacity-10);\n                            \n                            &:hover {\n                                background-color: var(--dark-opacity-3) !important;\n                            }\n                        }\n\n                        > div {\n                            display: flex;\n                            align-items: center;\n                            justify-content: space-between;\n                            width: 100%;\n\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\n                            .right {\n                                display: flex;\n                                align-items: end;\n                                justify-content: flex-end;\n\n                                strong {\n                                    display: block;\n                                    font: var(--title-extra-bold-16-19);\n                                    line-height: 17px;\n\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\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\n                box-shadow: none;\n\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__clear-indicator {\n                    display: none !important;\n                }\n\n\n                .customSelect__single-value {\n                    color: var(--dark) !important;\n                }\n            }\n        }\n    }\n\n    .placement-top {\n        .customSelect__menu {\n            border-radius: 0.5rem 0.5rem 0 0 !important;\n            top: auto !important;\n            bottom: 100% !important;\n        }\n\n        .customSelect__control--menu-is-open {\n            &:before {\n                border-radius: 0 0 0.5rem 0.5rem !important;\n            }\n        }\n    }\n"])), function (props) { return props.$width || '370px'; }, function (props) { return props.$maxOptionListHeight && props.$maxOptionListHeight; }, function (props) { return props.$hasShowDropdownIcon ? "0 1rem 0 1.5rem" : "0 1.5rem"; }, function (props) { return props.$hasError ? "2px" : "1px"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.$isMulti ? "\n                    &:is(.customSelect__control--menu-is-open){\n                        background-color: white !important;\n                    }\n                " : ""; }, function (props) {
+exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    /* Checkbox styling for multi-select options */\n    .option-container {\n        display: flex;\n        align-items: center;\n        width: 100%;\n    }\n    \n    .checkbox-container {\n        display: flex;\n        align-items: center;\n    }\n    \n    .custom-checkbox {\n        width: 16px;\n        height: 16px;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: white;\n    }\n    \n    .custom-checkbox.checked {\n        background-color: var(--primary);\n        border-color: var(--primary);\n    }\n    \n    .option-content {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        width: 100%;\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\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\n    [data-simplebar] {\n        max-height: ", " !important;\n        height: auto !important;\n        padding: 0 !important;\n\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        z-index: 2;\n        .customSelect {\n            &:is(.lightBg) {\n                .customSelect__control {\n                    background-color: ", ";\n                }\n            }\n\n            .customSelect__control {\n                background-color: ", ";\n                border: 0;\n                padding: ", ";\n                cursor: ", ";\n\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: 0.5rem;\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                    min-height: ", ";\n\n                    &:is(.customSelect__value-container--is-multi) {\n                        display: block;\n                        padding: 1rem 0;\n                    }\n\n                    .customSelect__multi-value {\n                        border: 1px solid var(--grey-10);\n                        border-radius: 0.25rem;\n                        background-color: var(--dark-opacity-3);\n                        margin: 0;\n                        justify-content: space-between;\n                        display: grid;\n                        grid-template-columns: 1fr auto;\n                        position: relative;\n                        z-index: 5;\n                        + .customSelect__multi-value {\n                            margin-top: 0.5rem;\n                        }\n\n                        .customSelect__multi-value__label {\n                            font: var(--body-semi-bold-13-16);    \n                            white-space: nowrap;\n                            border-radius: 2px;\n                            color: hsl(0, 0%, 20%);\n                            padding: 3px 3px 3px 6px;\n                            box-sizing: border-box;\n                            display: grid;\n                            align-items: center;\n                            grid-template-columns: auto auto;\n                            justify-content: flex-start;\n                            span{\n                                overflow: hidden;\n                                text-overflow: ellipsis;\n                                &:nth-child(2){\n                                    margin-left: 0.25rem;\n                                }\n                            }\n                        }\n\n                        .customSelect__multi-value__remove {\n                            background-color: transparent !important;\n                            color: var(--dark) !important;\n                            -webkit-align-items: center;\n                            -webkit-box-align: center;\n                            -ms-flex-align: center;\n                            align-items: center;\n                            display: -webkit-box;\n                            display: -webkit-flex;\n                            display: -ms-flexbox;\n                            display: flex;\n                            border-radius: 2px;\n                            padding-left: 4px;\n                            padding-right: 4px;\n                            box-sizing: border-box;\n                            svg{\n                                width: 1rem;\n                                height: 1rem;\n                            }\n                        }\n                    }\n\n                    .customSelect__placeholder {\n                        font: var(--body-semi-bold-14-17);\n                        color: ", ";\n                        margin: 0;\n                        line-height: 1.5rem;\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                        position: absolute;\n                        bottom: 0;\n                        top: 0;\n                        margin-top: 0;\n                        width: 100% !important;\n                        display: block !important;\n                        &:after {\n                            display: none;\n                        }\n\n                        input {\n                            font: var(--body-semi-bold-14-17) !important;\n                            width: 100% !important;\n                            display: block !important;\n                            height: 100% !important;\n                        }\n                    }\n                }\n                .customSelect__value-container--has-value{\n                    .customSelect__input-container {\n                        margin-top: ", " !important;\n                        //position: static !important;\n                    }\n                }\n                .customSelect__indicators{\n                    height: ", ";\n                }\n                .customSelect__indicator {\n                    padding: 0;\n                    //margin: 0 0 0 0.5rem;\n                    width: 1.5rem;\n                    height: 1.5rem;\n                    transition: all .2s ease;\n                    align-items: center;\n                    justify-content: center;\n                    &:is(.customSelect__dropdown-indicator) {\n                        ", ";\n                    }\n\n                    &:is(.customSelect__clear-indicator) {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                        display: block !important;\n                        background-image: url('", "');\n                        background-repeat: no-repeat;\n                        background-position: center center;\n                        svg {\n                            display: none;\n                        }\n\n                        ~ .customSelect__dropdown-indicator {\n                            display: none;\n                        }\n                    }\n\n                    div {\n                        display: block;\n                    }\n                }\n\n                .customSelect__indicator-separator {\n                    display: none;\n                }\n                .customSelect__loading-indicator{\n                    width: 1.5rem;\n                    span{\n                        display: none;\n                    }\n                    ~ *{\n                        display: none !important;\n                        ~ *{\n                            display: none !important;\n                        }\n                    }\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\n                    &.customSelect__value-container--has-value {\n                        background-image: ", ";\n                    }\n                }\n            }\n            .customSelect__control--is-focused {\n                border-color: var(--primary);\n                box-shadow: none;\n                .customSelect__input-container {\n                    margin-top: 0 !important;\n                }\n                .customSelect__value-container--has-value{\n                    .customSelect__input-container {\n                        margin-top: ", ";\n                        position: static;\n\n                        input {\n\n                        }\n                    }\n                }\n            }\n\n            .customSelect__control--is-disabled {\n                background-color: var(--dark-opacity-5) !important;\n                cursor: not-allowed;\n                opacity: 1;\n\n                &:before {\n                    border-width: 1px;\n                    border-color: var(--dark-opacity-10);\n                }\n\n                .customSelect__placeholder,\n                .customSelect__single-value {\n                    color: var(--dark-opacity-25);\n                }\n            }\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 0.5rem 0.5rem;\n                box-shadow: ", ";\n                border: ", ";\n                overflow: hidden;\n                position: ", ";\n                min-width: ", ";\n                left: ", ";\n                right: ", ";\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-selected) {\n                            background-color: var(--dark-opacity-3) !important;\n\n                            @media only screen and ", " {\n                                //background-color: transparent !important;\n                            }\n                        }\n\n                        &:is(.customSelect__option--is-focused) {\n                            background-color: transparent;\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\n                            strong {\n                                color: var(--dark-opacity-50);\n                            }\n                        }\n\n                        &:is(.fixedTop) {\n                            position: sticky;\n                            top: 0;\n                            left: 0;\n                            right: 0;\n                            z-index: 4;\n                            background-color: #fff;\n                            border-bottom: 1px solid var(--dark-opacity-10);\n                            \n                            &:hover {\n                                background-color: var(--dark-opacity-3) !important;\n                            }\n                        }\n\n                        > div {\n                            display: flex;\n                            align-items: center;\n                            justify-content: space-between;\n                            width: 100%;\n\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\n                            .right {\n                                display: flex;\n                                align-items: end;\n                                justify-content: flex-end;\n\n                                strong {\n                                    display: block;\n                                    font: var(--title-extra-bold-16-19);\n                                    line-height: 17px;\n\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\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\n                box-shadow: none;\n\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__clear-indicator {\n                    display: none !important;\n                }\n\n\n                .customSelect__single-value {\n                    color: var(--dark) !important;\n                }\n            }\n        }\n    }\n\n    .placement-top {\n        .customSelect__menu {\n            border-radius: 0.5rem 0.5rem 0 0 !important;\n            top: auto !important;\n            bottom: 100% !important;\n        }\n\n        .customSelect__control--menu-is-open {\n            &:before {\n                border-radius: 0 0 0.5rem 0.5rem !important;\n            }\n        }\n    }\n"], ["\n    /* Checkbox styling for multi-select options */\n    .option-container {\n        display: flex;\n        align-items: center;\n        width: 100%;\n    }\n    \n    .checkbox-container {\n        display: flex;\n        align-items: center;\n    }\n    \n    .custom-checkbox {\n        width: 16px;\n        height: 16px;\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: white;\n    }\n    \n    .custom-checkbox.checked {\n        background-color: var(--primary);\n        border-color: var(--primary);\n    }\n    \n    .option-content {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        width: 100%;\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\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\n    [data-simplebar] {\n        max-height: ", " !important;\n        height: auto !important;\n        padding: 0 !important;\n\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        z-index: 2;\n        .customSelect {\n            &:is(.lightBg) {\n                .customSelect__control {\n                    background-color: ", ";\n                }\n            }\n\n            .customSelect__control {\n                background-color: ", ";\n                border: 0;\n                padding: ", ";\n                cursor: ", ";\n\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: 0.5rem;\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                    min-height: ", ";\n\n                    &:is(.customSelect__value-container--is-multi) {\n                        display: block;\n                        padding: 1rem 0;\n                    }\n\n                    .customSelect__multi-value {\n                        border: 1px solid var(--grey-10);\n                        border-radius: 0.25rem;\n                        background-color: var(--dark-opacity-3);\n                        margin: 0;\n                        justify-content: space-between;\n                        display: grid;\n                        grid-template-columns: 1fr auto;\n                        position: relative;\n                        z-index: 5;\n                        + .customSelect__multi-value {\n                            margin-top: 0.5rem;\n                        }\n\n                        .customSelect__multi-value__label {\n                            font: var(--body-semi-bold-13-16);    \n                            white-space: nowrap;\n                            border-radius: 2px;\n                            color: hsl(0, 0%, 20%);\n                            padding: 3px 3px 3px 6px;\n                            box-sizing: border-box;\n                            display: grid;\n                            align-items: center;\n                            grid-template-columns: auto auto;\n                            justify-content: flex-start;\n                            span{\n                                overflow: hidden;\n                                text-overflow: ellipsis;\n                                &:nth-child(2){\n                                    margin-left: 0.25rem;\n                                }\n                            }\n                        }\n\n                        .customSelect__multi-value__remove {\n                            background-color: transparent !important;\n                            color: var(--dark) !important;\n                            -webkit-align-items: center;\n                            -webkit-box-align: center;\n                            -ms-flex-align: center;\n                            align-items: center;\n                            display: -webkit-box;\n                            display: -webkit-flex;\n                            display: -ms-flexbox;\n                            display: flex;\n                            border-radius: 2px;\n                            padding-left: 4px;\n                            padding-right: 4px;\n                            box-sizing: border-box;\n                            svg{\n                                width: 1rem;\n                                height: 1rem;\n                            }\n                        }\n                    }\n\n                    .customSelect__placeholder {\n                        font: var(--body-semi-bold-14-17);\n                        color: ", ";\n                        margin: 0;\n                        line-height: 1.5rem;\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                        position: absolute;\n                        bottom: 0;\n                        top: 0;\n                        margin-top: 0;\n                        width: 100% !important;\n                        display: block !important;\n                        &:after {\n                            display: none;\n                        }\n\n                        input {\n                            font: var(--body-semi-bold-14-17) !important;\n                            width: 100% !important;\n                            display: block !important;\n                            height: 100% !important;\n                        }\n                    }\n                }\n                .customSelect__value-container--has-value{\n                    .customSelect__input-container {\n                        margin-top: ", " !important;\n                        //position: static !important;\n                    }\n                }\n                .customSelect__indicators{\n                    height: ", ";\n                }\n                .customSelect__indicator {\n                    padding: 0;\n                    //margin: 0 0 0 0.5rem;\n                    width: 1.5rem;\n                    height: 1.5rem;\n                    transition: all .2s ease;\n                    align-items: center;\n                    justify-content: center;\n                    &:is(.customSelect__dropdown-indicator) {\n                        ", ";\n                    }\n\n                    &:is(.customSelect__clear-indicator) {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                        display: block !important;\n                        background-image: url('", "');\n                        background-repeat: no-repeat;\n                        background-position: center center;\n                        svg {\n                            display: none;\n                        }\n\n                        ~ .customSelect__dropdown-indicator {\n                            display: none;\n                        }\n                    }\n\n                    div {\n                        display: block;\n                    }\n                }\n\n                .customSelect__indicator-separator {\n                    display: none;\n                }\n                .customSelect__loading-indicator{\n                    width: 1.5rem;\n                    span{\n                        display: none;\n                    }\n                    ~ *{\n                        display: none !important;\n                        ~ *{\n                            display: none !important;\n                        }\n                    }\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\n                    &.customSelect__value-container--has-value {\n                        background-image: ", ";\n                    }\n                }\n            }\n            .customSelect__control--is-focused {\n                border-color: var(--primary);\n                box-shadow: none;\n                .customSelect__input-container {\n                    margin-top: 0 !important;\n                }\n                .customSelect__value-container--has-value{\n                    .customSelect__input-container {\n                        margin-top: ", ";\n                        position: static;\n\n                        input {\n\n                        }\n                    }\n                }\n            }\n\n            .customSelect__control--is-disabled {\n                background-color: var(--dark-opacity-5) !important;\n                cursor: not-allowed;\n                opacity: 1;\n\n                &:before {\n                    border-width: 1px;\n                    border-color: var(--dark-opacity-10);\n                }\n\n                .customSelect__placeholder,\n                .customSelect__single-value {\n                    color: var(--dark-opacity-25);\n                }\n            }\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 0.5rem 0.5rem;\n                box-shadow: ", ";\n                border: ", ";\n                overflow: hidden;\n                position: ", ";\n                min-width: ", ";\n                left: ", ";\n                right: ", ";\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-selected) {\n                            background-color: var(--dark-opacity-3) !important;\n\n                            @media only screen and ", " {\n                                //background-color: transparent !important;\n                            }\n                        }\n\n                        &:is(.customSelect__option--is-focused) {\n                            background-color: transparent;\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\n                            strong {\n                                color: var(--dark-opacity-50);\n                            }\n                        }\n\n                        &:is(.fixedTop) {\n                            position: sticky;\n                            top: 0;\n                            left: 0;\n                            right: 0;\n                            z-index: 4;\n                            background-color: #fff;\n                            border-bottom: 1px solid var(--dark-opacity-10);\n                            \n                            &:hover {\n                                background-color: var(--dark-opacity-3) !important;\n                            }\n                        }\n\n                        > div {\n                            display: flex;\n                            align-items: center;\n                            justify-content: space-between;\n                            width: 100%;\n\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\n                            .right {\n                                display: flex;\n                                align-items: end;\n                                justify-content: flex-end;\n\n                                strong {\n                                    display: block;\n                                    font: var(--title-extra-bold-16-19);\n                                    line-height: 17px;\n\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\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\n                box-shadow: none;\n\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__clear-indicator {\n                    display: none !important;\n                }\n\n\n                .customSelect__single-value {\n                    color: var(--dark) !important;\n                }\n            }\n        }\n    }\n\n    .placement-top {\n        .customSelect__menu {\n            border-radius: 0.5rem 0.5rem 0 0 !important;\n            top: auto !important;\n            bottom: 100% !important;\n        }\n\n        .customSelect__control--menu-is-open {\n            &:before {\n                border-radius: 0 0 0.5rem 0.5rem !important;\n            }\n        }\n    }\n"])), function (props) { return props.$width || '370px'; }, function (props) { return props.$maxOptionListHeight && props.$maxOptionListHeight; }, function (props) { return props.$disabled ? 'var(--dark-opacity-5)' : 'white'; }, function (props) {
+    if (props.$disabled)
+        return 'var(--dark-opacity-5)';
+    if (props.$hasError)
+        return 'white';
+    return 'var(--dark-opacity-3)';
+}, function (props) { return props.$hasShowDropdownIcon ? "0 1rem 0 1.5rem" : "0 1.5rem"; }, function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; }, function (props) { return props.$hasError && !props.$disabled ? "2px" : "1px"; }, function (props) { return props.$hasError && !props.$disabled ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.$isMulti && !props.$disabled ? "\n                    &:is(.customSelect__control--menu-is-open){\n                        background-color: white !important;\n                    }\n                " : ""; }, function (props) {
     switch (props.$size) {
         case 'medium':
             return "56px";
@@ -23,7 +29,19 @@ exports.Container = styled_components_1.default.div(templateObject_1 || (templat
         default:
             return "56px";
     }
-}, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark)"; }, function (props) { return props.$isMulti ? "0.5rem" : "0"; }, function (props) {
+}, function (props) {
+    if (props.$disabled)
+        return 'var(--dark-opacity-25)';
+    if (props.$hasError)
+        return 'var(--red)';
+    return 'var(--dark-opacity-50)';
+}, function (props) {
+    if (props.$disabled)
+        return 'var(--dark-opacity-25)';
+    if (props.$hasError)
+        return 'var(--red)';
+    return 'var(--dark)';
+}, function (props) { return props.$isMulti ? "0.5rem" : "0"; }, function (props) {
     switch (props.$size) {
         case 'medium':
             return "56px";

package/dist/components/SelectBox/props.d.ts

@@ -51,6 +51,7 @@ export interface SelectBox {
     hasSelectAll?: boolean;
     selectAllLabel?: string;
     description?: string;
+    disabled?: boolean;
 }
 export interface ContainerProps {
     $size?: SIZES;
@@ -64,6 +65,7 @@ export interface ContainerProps {
     $MenuPlacement?: string;
     $isMulti?: boolean;
     $menuPosition?: string;
+    $disabled?: boolean;
 }
 export declare const SelectBoxDefault: SelectBox;
 export type SelectBoxProps = typeof SelectBoxDefault;

package/dist/components/SelectBox/props.js

@@ -34,4 +34,5 @@ exports.SelectBoxDefault = {
     hasSelectAll: false,
     selectAllLabel: "Tümünü Seç",
     description: null,
+    disabled: false,
 };

package/dist/components/SelectBox/stories/SelectBox.stories.d.ts

@@ -29,6 +29,9 @@ declare const _default: {
         isClearable: {
             control: string;
         };
+        disabled: {
+            control: string;
+        };
         menuWidth: {
             control: string;
         };
@@ -187,6 +190,42 @@ export declare const WithError: {
         isMulti: boolean;
     };
 };
+export declare const Disabled: {
+    args: {
+        disabled: boolean;
+        placeholder: string;
+        isSearchable: boolean;
+        hasShowSearchIcon: boolean;
+        isClearable: boolean;
+        lightBg: boolean;
+        label: string;
+        name: string;
+        options: ({
+            value: string;
+            label: string;
+            price: string;
+            priceSm: string;
+            period: string;
+            labelBottom?: undefined;
+        } | {
+            value: string;
+            label: string;
+            labelBottom: string;
+            price?: undefined;
+            priceSm?: undefined;
+            period?: undefined;
+        })[];
+        width: string;
+        menuWidth: any;
+        menuAlign: string;
+        hasMenuShadow: boolean;
+        hasError: boolean;
+        errorMessage: string;
+        maxOptionListHeight: string;
+        id: string;
+        isMulti: boolean;
+    };
+};
 export declare const WithDescription: {
     args: {
         description: string;

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

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithSelectedLabel = exports.CustomMenuShadow = exports.CustomMenuWidthRight = exports.CustomMenuWidth = exports.DarkBg = exports.WithoutLabel = exports.MultipleWithSelectAll = exports.Multiple = exports.Clearable = exports.Searchable = exports.WithDescription = exports.WithError = exports.Medium = exports.Small = exports.Default = void 0;
+exports.WithSelectedLabel = exports.CustomMenuShadow = exports.CustomMenuWidthRight = exports.CustomMenuWidth = exports.DarkBg = exports.WithoutLabel = exports.MultipleWithSelectAll = exports.Multiple = exports.Clearable = exports.Searchable = exports.WithDescription = exports.Disabled = exports.WithError = exports.Medium = exports.Small = exports.Default = void 0;
 var SelectBox_1 = __importDefault(require("../SelectBox"));
 var SelectValues_json_1 = __importDefault(require("./../../../jsons/SelectValues.json"));
 var props_1 = require("../props");
@@ -66,6 +66,7 @@ exports.default = {
         selectAllLabel: { control: 'text' },
         isSearchable: { control: 'boolean' },
         isClearable: { control: 'boolean' },
+        disabled: { control: 'boolean' },
         menuWidth: { control: 'text' },
         menuAlign: { control: 'select', options: props_1.menuAligns },
         hasMenuShadow: { control: 'boolean' },
@@ -84,6 +85,9 @@ exports.Medium = {
 exports.WithError = {
     args: __assign(__assign({}, defaultArgs), { hasError: true, errorMessage: "Bu alan zorunludur." }),
 };
+exports.Disabled = {
+    args: __assign(__assign({}, defaultArgs), { disabled: true }),
+};
 exports.WithDescription = {
     args: __assign(__assign({}, defaultArgs), { description: "Seçiminiz ürün listesinde filtre olarak kullanılır." }),
 };

package/dist/components/TagInput/TagInput.js

@@ -28,6 +28,7 @@ var react_1 = require("react");
 var props_1 = require("./props");
 var TagInput_styled_1 = require("./TagInput.styled");
 var Tag_1 = __importDefault(require("../Tag"));
+var Button_1 = __importDefault(require("../Button"));
 var normalizeTag = function (value) { return value.trim(); };
 var TagInput = (0, react_1.forwardRef)(function (_a, ref) {
     var className = _a.className, _b = _a.label, label = _b === void 0 ? props_1.TagInputDefault.label : _b, _c = _a.placeholder, placeholder = _c === void 0 ? props_1.TagInputDefault.placeholder : _c, name = _a.name, value = _a.value, _d = _a.defaultValue, defaultValue = _d === void 0 ? props_1.TagInputDefault.defaultValue : _d, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? props_1.TagInputDefault.disabled : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.TagInputDefault.hasError : _f, errorMessage = _a.errorMessage, _g = _a.buttonText, buttonText = _g === void 0 ? props_1.TagInputDefault.buttonText : _g, maxTags = _a.maxTags, maxLength = _a.maxLength, _h = _a.allowDuplicates, allowDuplicates = _h === void 0 ? props_1.TagInputDefault.allowDuplicates : _h, id = _a.id;
@@ -71,9 +72,7 @@ var TagInput = (0, react_1.forwardRef)(function (_a, ref) {
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     var removeTag = function (index) {
-        var _a;
         updateTags(tags.filter(function (_, tagIndex) { return tagIndex !== index; }));
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     var handleAddClick = function () {
         addTag(inputValue);
@@ -95,7 +94,7 @@ var TagInput = (0, react_1.forwardRef)(function (_a, ref) {
         }
     };
     var isAddDisabled = disabled || !canAddTag(inputValue);
-    return ((0, jsx_runtime_1.jsxs)(TagInput_styled_1.TagInputStyled, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputLabel, __assign({ htmlFor: inputId }, { children: label })), (0, jsx_runtime_1.jsxs)(TagInput_styled_1.TagInputFields, { children: [(0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputField, { ref: inputRef, id: inputId, type: "text", value: inputValue, placeholder: placeholder, disabled: disabled, "$hasError": hasError, "$disabled": disabled, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onBlur: onBlur, "aria-invalid": hasError, "aria-describedby": hasError && errorMessage ? "".concat(inputId, "-error") : undefined }), (0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputButton, __assign({ type: "button", disabled: isAddDisabled, "$disabled": isAddDisabled, onClick: handleAddClick }, { children: buttonText }))] }), tags.length > 0 && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagList, { children: tags.map(function (tag, index) { return ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: tag, disabled: disabled, onRemove: function () { return removeTag(index); } }, "".concat(tag, "-").concat(index))); }) })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputError, __assign({ id: "".concat(inputId, "-error") }, { children: errorMessage }))), name && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputHiddenInputs, __assign({ "aria-hidden": "true" }, { children: tags.map(function (tag, index) { return ((0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: tag, readOnly: true }, "".concat(name, "-").concat(tag, "-").concat(index))); }) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(TagInput_styled_1.TagInputStyled, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputLabel, __assign({ htmlFor: inputId }, { children: label })), (0, jsx_runtime_1.jsxs)(TagInput_styled_1.TagInputFields, { children: [(0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputField, { ref: inputRef, id: inputId, type: "text", value: inputValue, placeholder: placeholder, disabled: disabled, "$hasError": hasError, "$disabled": disabled, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onBlur: onBlur, "aria-invalid": hasError, "aria-describedby": hasError && errorMessage ? "".concat(inputId, "-error") : undefined }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ type: "button", size: "big", variant: "inverted", disabled: isAddDisabled, onClick: handleAddClick }, { children: buttonText }))] }), tags.length > 0 && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagList, { children: tags.map(function (tag, index) { return ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: tag, disabled: disabled, onRemove: function () { return removeTag(index); } }, "".concat(tag, "-").concat(index))); }) })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputError, __assign({ id: "".concat(inputId, "-error") }, { children: errorMessage }))), name && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputHiddenInputs, __assign({ "aria-hidden": "true" }, { children: tags.map(function (tag, index) { return ((0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: tag, readOnly: true }, "".concat(name, "-").concat(tag, "-").concat(index))); }) })))] })));
 });
 TagInput.displayName = 'TagInput';
 exports.default = TagInput;

package/dist/components/TagInput/TagInput.styled.d.ts

@@ -9,11 +9,6 @@ export declare const TagInputField: import("styled-components/dist/types").IStyl
     $hasError?: boolean;
     $disabled?: boolean;
 }, never>>> & string;
-export declare const TagInputButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$disabled"> & {
-    $disabled?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$disabled"> & {
-    $disabled?: boolean;
-}, never>>> & string;
 export declare const TagList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const TagInputError: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
 export declare const TagInputHiddenInputs: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/dist/components/TagInput/TagInput.styled.js

@@ -7,14 +7,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TagInputHiddenInputs = exports.TagInputError = exports.TagList = exports.TagInputButton = exports.TagInputField = exports.TagInputFields = exports.TagInputLabel = exports.TagInputStyled = void 0;
+exports.TagInputHiddenInputs = exports.TagInputError = exports.TagList = exports.TagInputField = exports.TagInputFields = exports.TagInputLabel = exports.TagInputStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.TagInputStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"])));
 exports.TagInputLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
 exports.TagInputFields = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: flex-start;\n    gap: 1rem;\n"], ["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: flex-start;\n    gap: 1rem;\n"])));
 exports.TagInputField = styled_components_1.default.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: 19.5px 24px;\n    color: ", ";\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        background: white;\n    }\n\n    &:disabled {\n        color: var(--dark-opacity-25);\n        cursor: not-allowed;\n    }\n"], ["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: 19.5px 24px;\n    color: ", ";\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        background: white;\n    }\n\n    &:disabled {\n        color: var(--dark-opacity-25);\n        cursor: not-allowed;\n    }\n"])), function (props) { return props.$disabled ? 'var(--dark-opacity-5)' : 'var(--dark-opacity-3)'; }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; });
-exports.TagInputButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    box-sizing: border-box;\n    height: 56px;\n    min-width: 56px;\n    padding: 0 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background-color: white;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: ", ";\n    transition: border-color 0.2s ease, color 0.2s ease;\n\n    &:not(:disabled):hover {\n        border-color: var(--primary);\n    }\n"], ["\n    box-sizing: border-box;\n    height: 56px;\n    min-width: 56px;\n    padding: 0 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background-color: white;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: ", ";\n    transition: border-color 0.2s ease, color 0.2s ease;\n\n    &:not(:disabled):hover {\n        border-color: var(--primary);\n    }\n"])), function (props) { return props.$disabled ? 'var(--dark-opacity-25)' : 'var(--primary)'; }, function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; });
-exports.TagList = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin-top: 1rem;\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin-top: 1rem;\n"])));
-exports.TagInputError = styled_components_1.default.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--red);\n    font: var(--caption-semi-bold-11-13);\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--red);\n    font: var(--caption-semi-bold-11-13);\n"])));
-exports.TagInputHiddenInputs = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+exports.TagList = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin-top: 1rem;\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin-top: 1rem;\n"])));
+exports.TagInputError = styled_components_1.default.p(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--red);\n    font: var(--caption-semi-bold-11-13);\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--red);\n    font: var(--caption-semi-bold-11-13);\n"])));
+exports.TagInputHiddenInputs = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/Uploader/Uploader.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { UploaderProps } from './props';
-declare const Uploader: ({ className, title, description, images, maxCount, uploadLabel, coverBadgeText, variant, selectedIndex, showCoverBadge, accept, disabled, onUpload, onRemove, onSelect, }: UploaderProps) => React.JSX.Element;
+declare const Uploader: ({ className, title, description, images, maxCount, columnCount, uploadLabel, coverBadgeText, variant, selectedIndex, showCoverBadge, accept, disabled, imagePadding, onUpload, onRemove, onSelect, }: UploaderProps) => React.JSX.Element;
 export default Uploader;