krl-alfred 2.18.17 → 2.18.19

package/dist/components/ActionButton/ActionButton.js

@@ -59,6 +59,6 @@ var ActionButton = function (_a) {
     (0, react_1.useEffect)(function () {
         count();
     }, [date]);
-    return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({ "$width": width, "$hasTimer": hasTimer, "$hasInfo": hasInfo }, other, { children: [hasInfo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "actionInfoText" }, { children: infoText })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dashedLine" }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 335 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10.0009 0C12.653 0 15.1966 1.05357 17.0719 2.92893C18.9473 4.8043 20.0009 7.34783 20.0009 10C20.0009 12.6522 18.9473 15.1957 17.0719 17.0711C15.1966 18.9464 12.653 20 10.0009 20L10.0009 10V0Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M28.0009 9.5L306.999 10.4925", stroke: "white", "stroke-width": "6", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-dasharray": "12 12" }), (0, jsx_runtime_1.jsx)("path", { d: "M324.999 20C322.347 20 319.804 18.9464 317.928 17.0711C316.053 15.1957 314.999 12.6522 314.999 10C314.999 7.34784 316.053 4.8043 317.928 2.92893C319.804 1.05357 322.347 -3.16267e-08 324.999 0V10V20Z", fill: "white" })] })) }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actionInner" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: img })), (0, jsx_runtime_1.jsx)("strong", { className: "title", dangerouslySetInnerHTML: { __html: title } }), !hasTimer && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary" }))] })), hasTimer && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: months })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('month') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), !isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('minute') }))] }))] }))] })), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary", isLoading: isLoading })] })] })))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({ "$width": width, "$hasTimer": hasTimer, "$hasInfo": hasInfo }, other, { children: [hasInfo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.ActionInfoText, { children: infoText }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.DashedLine, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 335 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10.0009 0C12.653 0 15.1966 1.05357 17.0719 2.92893C18.9473 4.8043 20.0009 7.34783 20.0009 10C20.0009 12.6522 18.9473 15.1957 17.0719 17.0711C15.1966 18.9464 12.653 20 10.0009 20L10.0009 10V0Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M28.0009 9.5L306.999 10.4925", stroke: "white", "stroke-width": "6", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-dasharray": "12 12" }), (0, jsx_runtime_1.jsx)("path", { d: "M324.999 20C322.347 20 319.804 18.9464 317.928 17.0711C316.053 15.1957 314.999 12.6522 314.999 10C314.999 7.34784 316.053 4.8043 317.928 2.92893C319.804 1.05357 322.347 -3.16267e-08 324.999 0V10V20Z", fill: "white" })] })) })] })), (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionInner, __assign({ "$hasInfo": hasInfo }, { children: [(0, jsx_runtime_1.jsxs)(ActionButton_styled_1.Top, __assign({ "$hasTimer": hasTimer }, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.IconWrapper, { children: img }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), !hasTimer && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary" }))] })), hasTimer && ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.Bottom, __assign({ "$hasTimer": hasTimer }, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.EmptySpacer, {}), (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.BottomContent, { children: [(0, jsx_runtime_1.jsxs)(ActionButton_styled_1.Timer, { children: [isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ActionButton_styled_1.TimerBox, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerTitle, { children: months }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDescription, { children: t('month') })] }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDots, { children: ":" })] })), (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.TimerBox, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerTitle, { children: days.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDescription, { children: t('day') })] }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDots, { children: ":" }), (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.TimerBox, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerTitle, { children: hours.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDescription, { children: t('hour') })] }), !isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDots, { children: ":" }), (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.TimerBox, { children: [(0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerTitle, { children: minutes.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)(ActionButton_styled_1.TimerDescription, { children: t('minute') })] })] }))] }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary", isLoading: isLoading })] })] })))] }))] })));
 };
 exports.default = ActionButton;

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

@@ -1,3 +1,17 @@
 /// <reference types="react" />
 import { ActionButtonStyledProps } from "./props";
 export declare const ActionButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionButtonStyledProps> & ActionButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionButtonStyledProps> & ActionButtonStyledProps, never>>> & string;
+export declare const ActionInfoText: 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 DashedLine: 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 ActionInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionButtonStyledProps> & ActionButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionButtonStyledProps> & ActionButtonStyledProps, never>>> & string;
+export declare const Top: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionButtonStyledProps> & ActionButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionButtonStyledProps> & ActionButtonStyledProps, never>>> & string;
+export declare const Bottom: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionButtonStyledProps> & ActionButtonStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionButtonStyledProps> & ActionButtonStyledProps, never>>> & string;
+export declare const IconWrapper: 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 Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
+export declare const BottomContent: 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 Timer: 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 TimerBox: 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 TimerTitle: 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 TimerDescription: 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 TimerDots: 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 EmptySpacer: 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/ActionButton/ActionButton.styled.js

@@ -7,8 +7,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionButtonStyled = void 0;
+exports.EmptySpacer = exports.TimerDots = exports.TimerDescription = exports.TimerTitle = exports.TimerBox = exports.Timer = exports.BottomContent = exports.Title = exports.IconWrapper = exports.Bottom = exports.Top = exports.ActionInner = exports.DashedLine = exports.ActionInfoText = exports.ActionButtonStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.ActionButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: ", ";\n    .actionInfoText{\n        background-color: var(--primary-opacity-5);\n        font: var(--caption-semi-bold-10-12);\n        color: var(--primary);\n        padding-top:1rem;\n        padding-bottom:0.5rem;\n        padding-left:1.5rem;\n        width: ", ";\n        border-top-left-radius: 0.5rem;\n        border-top-right-radius: 0.5rem;\n    }\n    .dashedLine {\n        width: ", ";\n        position: relative;\n        width: 100%;\n        background: #fbf7ff; /* arka plan rengi */\n        overflow: hidden;\n        height:22px;\n        svg{\n            height: 22px;\n            position: absolute;\n            top: 0;\n            transform: translateX(-50%);\n            left: 50%;\n            width: calc(100% + 22px);\n        }\n    }\n\n    .actionInner{\n        border-radius: 0.5rem;\n        ", "\n        background-color: var(--primary-opacity-5);\n        padding: 1rem 1.5rem;\n        align-items: center;\n        justify-content: space-between;\n        color: var(--dark);\n        box-sizing: border-box;\n        cursor: pointer;\n        @media only screen and ", " {\n            &:hover {\n                button {\n                    background-color: var(--primary-hover);\n                }\n            }\n        }\n        \n        &:active {\n            button {\n                background-color: var(--primary-press);\n                @media only screen and ", " {\n                    background-color: var(--primary-hover);\n                }\n            }\n        }\n\n        .top, .bottom {\n            display: grid;\n            grid-template-columns: ", ";\n            align-content: center;\n            align-items: center;\n        }\n\n        .top {\n            .icon {\n                margin-right: 1rem;\n\n                * {\n                    display: block !important;\n                }\n            }\n\n            .title {\n                display: block;\n                font: var(--body-bold-14-17);\n            }\n        }\n\n        .bottom {\n            margin-top: 0.5rem;\n\n            > div {\n                display: grid;\n                grid-template-columns: 1fr auto;\n                align-content: center;\n                align-items: center;\n                justify-content: space-between;\n\n                .timer {\n                    display: grid;\n                    grid-template-columns: repeat(5, auto);\n                    align-items: center;\n                    justify-content: start;\n\n                    .box {\n                        width: 40px;\n                        height: 48px;\n                        background-color: white;\n                        border-radius: 0.25rem;\n                        text-align: center;\n                        display: grid;\n                        align-items: center;\n                        align-content: center;\n                        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n\n                        .timerTitle {\n                            font: var(--title-extra-bold-16-19);\n                        }\n\n                        .timerDescription {\n                            font: var(--caption-regular-10-12);\n                        }\n                    }\n\n                    .dots {\n                        margin: 0 4px;\n                        width: 4px;\n                        font: var(--caption-bold-12-15);\n                    }\n                }\n            }\n        }\n    }\n    \n"], ["\n    width: ", ";\n    .actionInfoText{\n        background-color: var(--primary-opacity-5);\n        font: var(--caption-semi-bold-10-12);\n        color: var(--primary);\n        padding-top:1rem;\n        padding-bottom:0.5rem;\n        padding-left:1.5rem;\n        width: ", ";\n        border-top-left-radius: 0.5rem;\n        border-top-right-radius: 0.5rem;\n    }\n    .dashedLine {\n        width: ", ";\n        position: relative;\n        width: 100%;\n        background: #fbf7ff; /* arka plan rengi */\n        overflow: hidden;\n        height:22px;\n        svg{\n            height: 22px;\n            position: absolute;\n            top: 0;\n            transform: translateX(-50%);\n            left: 50%;\n            width: calc(100% + 22px);\n        }\n    }\n\n    .actionInner{\n        border-radius: 0.5rem;\n        ", "\n        background-color: var(--primary-opacity-5);\n        padding: 1rem 1.5rem;\n        align-items: center;\n        justify-content: space-between;\n        color: var(--dark);\n        box-sizing: border-box;\n        cursor: pointer;\n        @media only screen and ", " {\n            &:hover {\n                button {\n                    background-color: var(--primary-hover);\n                }\n            }\n        }\n        \n        &:active {\n            button {\n                background-color: var(--primary-press);\n                @media only screen and ", " {\n                    background-color: var(--primary-hover);\n                }\n            }\n        }\n\n        .top, .bottom {\n            display: grid;\n            grid-template-columns: ", ";\n            align-content: center;\n            align-items: center;\n        }\n\n        .top {\n            .icon {\n                margin-right: 1rem;\n\n                * {\n                    display: block !important;\n                }\n            }\n\n            .title {\n                display: block;\n                font: var(--body-bold-14-17);\n            }\n        }\n\n        .bottom {\n            margin-top: 0.5rem;\n\n            > div {\n                display: grid;\n                grid-template-columns: 1fr auto;\n                align-content: center;\n                align-items: center;\n                justify-content: space-between;\n\n                .timer {\n                    display: grid;\n                    grid-template-columns: repeat(5, auto);\n                    align-items: center;\n                    justify-content: start;\n\n                    .box {\n                        width: 40px;\n                        height: 48px;\n                        background-color: white;\n                        border-radius: 0.25rem;\n                        text-align: center;\n                        display: grid;\n                        align-items: center;\n                        align-content: center;\n                        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n\n                        .timerTitle {\n                            font: var(--title-extra-bold-16-19);\n                        }\n\n                        .timerDescription {\n                            font: var(--caption-regular-10-12);\n                        }\n                    }\n\n                    .dots {\n                        margin: 0 4px;\n                        width: 4px;\n                        font: var(--caption-bold-12-15);\n                    }\n                }\n            }\n        }\n    }\n    \n"])), function (props) { return props.$width; }, function (props) { return props.$width; }, function (props) { return props.$width; }, function (props) { return props.$hasInfo ? "\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n            padding-top:0.5rem;\n            " : ""; }, devices_1.devices.mdUp, devices_1.devices.md, function (props) { return props.$hasTimer ? "61px 1fr" : "61px 1fr auto"; });
-var templateObject_1;
+exports.ActionButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: ", ";\n\n"], ["\n    width: ", ";\n\n"])), function (props) { return props.$width; });
+exports.ActionInfoText = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: var(--primary-opacity-5);\n    font: var(--caption-semi-bold-10-12);\n    color: var(--primary);\n    padding: 1.5rem 0 0.5rem 1.5rem;\n    border-top-left-radius: 0.5rem;\n    border-top-right-radius: 0.5rem;\n"], ["\n    background-color: var(--primary-opacity-5);\n    font: var(--caption-semi-bold-10-12);\n    color: var(--primary);\n    padding: 1.5rem 0 0.5rem 1.5rem;\n    border-top-left-radius: 0.5rem;\n    border-top-right-radius: 0.5rem;\n"])));
+exports.DashedLine = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    background: #fbf7ff;\n    overflow: hidden;\n    height: 22px;\n\n    svg {\n        height: 22px;\n        position: absolute;\n        top: 0;\n        transform: translateX(-50%);\n        left: 50%;\n        width: calc(100% + 22px);\n    }\n"], ["\n    position: relative;\n    width: 100%;\n    background: #fbf7ff;\n    overflow: hidden;\n    height: 22px;\n\n    svg {\n        height: 22px;\n        position: absolute;\n        top: 0;\n        transform: translateX(-50%);\n        left: 50%;\n        width: calc(100% + 22px);\n    }\n"])));
+exports.ActionInner = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-5);\n    padding: 1.5rem;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--dark);\n    box-sizing: border-box;\n    cursor: pointer;\n\n    ", "\n    @media only screen and ", " {\n        &:hover {\n            button {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n\n    &:active {\n        button {\n            background-color: var(--primary-press);\n            @media only screen and ", " {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n"], ["\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-5);\n    padding: 1.5rem;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--dark);\n    box-sizing: border-box;\n    cursor: pointer;\n\n    ", "\n    @media only screen and ", " {\n        &:hover {\n            button {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n\n    &:active {\n        button {\n            background-color: var(--primary-press);\n            @media only screen and ", " {\n                background-color: var(--primary-hover);\n            }\n        }\n    }\n"])), function (props) { return props.$hasInfo ? "\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n        padding-top: 0.5rem;\n    " : ""; }, devices_1.devices.mdUp, devices_1.devices.md);
+exports.Top = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"], ["\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"])), function (props) { return props.$hasTimer ? "61px 1fr" : "61px 1fr auto"; });
+exports.Bottom = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin-top: 0.5rem;\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"], ["\n    margin-top: 0.5rem;\n    display: grid;\n    grid-template-columns: ", ";\n    align-content: center;\n    align-items: center;\n"])), function (props) { return props.$hasTimer ? "61px 1fr" : "61px 1fr auto"; });
+exports.IconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-right: 1rem;\n\n    * {\n        display: block !important;\n    }\n"], ["\n    margin-right: 1rem;\n\n    * {\n        display: block !important;\n    }\n"])));
+exports.Title = styled_components_1.default.strong(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: block;\n    font: var(--body-bold-14-17);\n"], ["\n    display: block;\n    font: var(--body-bold-14-17);\n"])));
+exports.BottomContent = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-content: center;\n    align-items: center;\n    justify-content: space-between;\n"], ["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-content: center;\n    align-items: center;\n    justify-content: space-between;\n"])));
+exports.Timer = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: repeat(5, auto);\n    align-items: center;\n    justify-content: start;\n"], ["\n    display: grid;\n    grid-template-columns: repeat(5, auto);\n    align-items: center;\n    justify-content: start;\n"])));
+exports.TimerBox = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    width: 40px;\n    height: 48px;\n    background-color: white;\n    border-radius: 0.25rem;\n    text-align: center;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"], ["\n    width: 40px;\n    height: 48px;\n    background-color: white;\n    border-radius: 0.25rem;\n    text-align: center;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"])));
+exports.TimerTitle = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    font: var(--title-extra-bold-16-19);\n"], ["\n    font: var(--title-extra-bold-16-19);\n"])));
+exports.TimerDescription = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    font: var(--caption-regular-10-12);\n"], ["\n    font: var(--caption-regular-10-12);\n"])));
+exports.TimerDots = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    margin: 0 4px;\n    width: 4px;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0 4px;\n    width: 4px;\n    font: var(--caption-bold-12-15);\n"])));
+exports.EmptySpacer = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;

package/dist/components/ActionButton/stories/ActionButton.stories.js

@@ -9,7 +9,7 @@ var ActionButton_1 = __importDefault(require("../ActionButton"));
 var iconList_1 = require("../../Icon/iconList");
 var date = new Date();
 date.setFullYear(new Date().getFullYear() + 1);
-var defaultImg = (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/actionTimeCircle.svg", height: "45px", width: "45px", alt: "test" });
+var defaultImg = (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/actionTimeCircle.svg", alt: "test" });
 exports.default = {
     title: 'Components/Action Button',
     component: ActionButton_1.default,

package/dist/components/ReviewCard/ReviewCard.d.ts

@@ -1,3 +1,3 @@
 import { ReviewCardProps } from "./props";
-declare const ReviewCard: ({ image, description, name, logo, star, totalStar, title, onClick, date, }: ReviewCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const ReviewCard: ({ image, description, name, logo, star, totalStar, title, onClick, date, hasBorder, }: ReviewCardProps) => import("react/jsx-runtime").JSX.Element;
 export default ReviewCard;

package/dist/components/ReviewCard/ReviewCard.js

@@ -29,7 +29,7 @@ var ReviewCard_styled_1 = require("./ReviewCard.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var classnames_1 = __importDefault(require("classnames"));
 var ReviewCard = function (_a) {
-    var _b = _a.image, image = _b === void 0 ? props_1.ReviewCardDefault.image : _b, _c = _a.description, description = _c === void 0 ? props_1.ReviewCardDefault.description : _c, _d = _a.name, name = _d === void 0 ? props_1.ReviewCardDefault.name : _d, _e = _a.logo, logo = _e === void 0 ? props_1.ReviewCardDefault.logo : _e, _f = _a.star, star = _f === void 0 ? props_1.ReviewCardDefault.star : _f, _g = _a.totalStar, totalStar = _g === void 0 ? props_1.ReviewCardDefault.totalStar : _g, _h = _a.title, title = _h === void 0 ? props_1.ReviewCardDefault.title : _h, _j = _a.onClick, onClick = _j === void 0 ? props_1.ReviewCardDefault.onClick : _j, _k = _a.date, date = _k === void 0 ? props_1.ReviewCardDefault.date : _k;
-    return ((0, jsx_runtime_1.jsx)(ReviewCard_styled_1.ReviewCardStyled, __assign({ onClick: onClick }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(ReviewCard_styled_1.ImgWrapper, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)(ReviewCard_styled_1.Detail, { children: [(0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Title, { children: title }), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Stars, { children: __spreadArray([], Array(totalStar), true).map(function (value, key) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('star', { 'isFilled': key < star }) }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: key < star ? 'var(--yellowDark)' : 'var(--dark-opacity-10)', name: "StarfullXSmall" }) }), key)); }) })] })] }), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Description, { children: description }), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Line, {}), (0, jsx_runtime_1.jsxs)(ReviewCard_styled_1.Bottom, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ReviewCard_styled_1.CustomerName, { children: name }), logo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ReviewCard_styled_1.HorizontalLine, {}), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Logo, { children: logo })] }))] }), date && (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Date, { children: date })] })] }) })));
+    var _b = _a.image, image = _b === void 0 ? props_1.ReviewCardDefault.image : _b, _c = _a.description, description = _c === void 0 ? props_1.ReviewCardDefault.description : _c, _d = _a.name, name = _d === void 0 ? props_1.ReviewCardDefault.name : _d, _e = _a.logo, logo = _e === void 0 ? props_1.ReviewCardDefault.logo : _e, _f = _a.star, star = _f === void 0 ? props_1.ReviewCardDefault.star : _f, _g = _a.totalStar, totalStar = _g === void 0 ? props_1.ReviewCardDefault.totalStar : _g, _h = _a.title, title = _h === void 0 ? props_1.ReviewCardDefault.title : _h, _j = _a.onClick, onClick = _j === void 0 ? props_1.ReviewCardDefault.onClick : _j, _k = _a.date, date = _k === void 0 ? props_1.ReviewCardDefault.date : _k, _l = _a.hasBorder, hasBorder = _l === void 0 ? props_1.ReviewCardDefault.hasBorder : _l;
+    return ((0, jsx_runtime_1.jsx)(ReviewCard_styled_1.ReviewCardStyled, __assign({ onClick: onClick, "$hasBorder": hasBorder }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(ReviewCard_styled_1.ImgWrapper, { children: [image && (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Image, { children: image }), (0, jsx_runtime_1.jsxs)(ReviewCard_styled_1.Detail, { children: [title && ((0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Title, { children: title })), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Stars, { children: __spreadArray([], Array(totalStar), true).map(function (value, key) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('star', { 'isFilled': key < star }) }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: key < star ? 'var(--yellowDark)' : 'var(--dark-opacity-10)', name: "StarfullXSmall" }) }), key)); }) })] })] }), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Description, __assign({ "$hasBorder": hasBorder }, { children: description })), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Line, {}), (0, jsx_runtime_1.jsxs)(ReviewCard_styled_1.Bottom, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ReviewCard_styled_1.CustomerName, { children: name }), logo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ReviewCard_styled_1.HorizontalLine, {}), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Logo, { children: logo })] }))] }), date && (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Date, { children: date })] })] }) })));
 };
 exports.default = ReviewCard;

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

@@ -2,6 +2,7 @@
 import { ReviewCardStyledProps } from "./props";
 export declare const ReviewCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ReviewCardStyledProps> & ReviewCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ReviewCardStyledProps> & ReviewCardStyledProps, never>>> & string;
 export declare const ImgWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ReviewCardStyledProps> & ReviewCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ReviewCardStyledProps> & ReviewCardStyledProps, never>>> & string;
+export declare const Image: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ReviewCardStyledProps> & ReviewCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ReviewCardStyledProps> & ReviewCardStyledProps, never>>> & string;
 export declare const Detail: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ReviewCardStyledProps> & ReviewCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ReviewCardStyledProps> & ReviewCardStyledProps, never>>> & string;
 export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ReviewCardStyledProps> & ReviewCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ReviewCardStyledProps> & ReviewCardStyledProps, never>>> & string;
 export declare const Stars: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ReviewCardStyledProps> & ReviewCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ReviewCardStyledProps> & ReviewCardStyledProps, never>>> & string;

package/dist/components/ReviewCard/ReviewCard.styled.js

@@ -7,18 +7,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Date = exports.CustomerName = exports.HorizontalLine = exports.Logo = exports.Bottom = exports.Line = exports.Description = exports.Stars = exports.Title = exports.Detail = exports.ImgWrapper = exports.ReviewCardStyled = void 0;
+exports.Date = exports.CustomerName = exports.HorizontalLine = exports.Logo = exports.Bottom = exports.Line = exports.Description = exports.Stars = exports.Title = exports.Detail = exports.Image = exports.ImgWrapper = exports.ReviewCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.ReviewCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n    transition: all .2s ease;\n    cursor: pointer;\n    &:hover{\n        box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n    }\n"], ["\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n    transition: all .2s ease;\n    cursor: pointer;\n    &:hover{\n        box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n    }\n"])));
-exports.ImgWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: flex-end;\n    justify-content: flex-start;\n    .img{\n        width: 64px;\n        height: 64px;\n        border: 1px solid var(--dark-opacity-5);\n        border-radius: 0.5rem;\n        position: relative;\n        margin-right: 1rem;\n        overflow: hidden;\n        box-sizing: border-box;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex: 1 0 auto;\n        max-width: 64px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        * {\n            display: block !important;\n            padding: 4px;\n        }\n    }\n"], ["\n    display: flex;\n    align-items: flex-end;\n    justify-content: flex-start;\n    .img{\n        width: 64px;\n        height: 64px;\n        border: 1px solid var(--dark-opacity-5);\n        border-radius: 0.5rem;\n        position: relative;\n        margin-right: 1rem;\n        overflow: hidden;\n        box-sizing: border-box;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex: 1 0 auto;\n        max-width: 64px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        * {\n            display: block !important;\n            padding: 4px;\n        }\n    }\n"])));
-exports.Detail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n"], ["\n"])));
-exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-bottom: 0.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    color: var(--dark-opacity-75);\n    font : var(--body-bold-14-17);\n    min-height: 34px;\n"], ["\n    margin-bottom: 0.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    color: var(--dark-opacity-75);\n    font : var(--body-bold-14-17);\n    min-height: 34px;\n"])));
-exports.Stars = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    .star{\n        + .star{\n            margin-left: -2px;\n        }\n        div{\n            display: block;\n        }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    .star{\n        + .star{\n            margin-left: -2px;\n        }\n        div{\n            display: block;\n        }\n    }\n"])));
-exports.Description = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n    margin: 1rem 0 1.5rem 0;\n    overflow: hidden;\n    position: relative;\n    min-height: 68px;\n    display: -webkit-box;\n    -webkit-line-clamp: 4;\n    -webkit-box-orient: vertical;\n"], ["\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n    margin: 1rem 0 1.5rem 0;\n    overflow: hidden;\n    position: relative;\n    min-height: 68px;\n    display: -webkit-box;\n    -webkit-line-clamp: 4;\n    -webkit-box-orient: vertical;\n"])));
-exports.Line = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    border-bottom: 1px solid var(--icon-shadow-color);\n    margin-bottom: 1rem;\n"], ["\n    border-bottom: 1px solid var(--icon-shadow-color);\n    margin-bottom: 1rem;\n"])));
-exports.Bottom = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    >div{\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    >div{\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    }\n"])));
-exports.Logo = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    * {\n        display: block !important;\n    }\n"], ["\n    * {\n        display: block !important;\n    }\n"])));
-exports.HorizontalLine = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    border-right: 1px solid var(--dark-opacity-75);\n    height: 0.5rem;\n    margin: 0 0.5rem;\n"], ["\n    border-right: 1px solid var(--dark-opacity-75);\n    height: 0.5rem;\n    margin: 0 0.5rem;\n"])));
-exports.CustomerName = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    font: var(--caption-medium-10-12);\n    color: var(--dark-opacity-75);\n"], ["\n    font: var(--caption-medium-10-12);\n    color: var(--dark-opacity-75);\n"])));
-exports.Date = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    font: var(--caption-medium-10-12);\n    color: var(--dark-opacity-75);\n"], ["\n    font: var(--caption-medium-10-12);\n    color: var(--dark-opacity-75);\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+exports.ReviewCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-shadow: ", ";\n    border: ", ";\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n    transition: all .2s ease;\n    cursor: pointer;\n    &:hover{\n        box-shadow: ", ";\n    }\n"], ["\n    box-shadow: ", ";\n    border: ", ";\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n    transition: all .2s ease;\n    cursor: pointer;\n    &:hover{\n        box-shadow: ", ";\n    }\n"])), function (_a) {
+    var $hasBorder = _a.$hasBorder;
+    return ($hasBorder ? 'none' : '0 6px 30px 0 var(--box-shadow-color)');
+}, function (_a) {
+    var $hasBorder = _a.$hasBorder;
+    return ($hasBorder ? '1px solid var(--dark-opacity-10)' : 'none');
+}, function (_a) {
+    var $hasBorder = _a.$hasBorder;
+    return ($hasBorder ? 'none' : '0 4px 15px 0 var(--dark-shadow-color)');
+});
+exports.ImgWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: flex-end;\n    justify-content: flex-start;\n"], ["\n    display: flex;\n    align-items: flex-end;\n    justify-content: flex-start;\n"])));
+exports.Image = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 64px;\n    height: 64px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 1rem;\n    overflow: hidden;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: 1 0 auto;\n    max-width: 64px;\n    * {\n        display: block !important;\n        padding: 4px;\n    }\n"], ["\n    width: 64px;\n    height: 64px;\n    border: 1px solid var(--dark-opacity-5);\n    border-radius: 0.5rem;\n    position: relative;\n    margin-right: 1rem;\n    overflow: hidden;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: 1 0 auto;\n    max-width: 64px;\n    * {\n        display: block !important;\n        padding: 4px;\n    }\n"])));
+exports.Detail = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n"], ["\n"])));
+exports.Title = styled_components_1.default.strong(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin-bottom: 0.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    color: var(--dark-opacity-75);\n    font : var(--body-bold-14-17);\n    min-height: 34px;\n"], ["\n    margin-bottom: 0.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    color: var(--dark-opacity-75);\n    font : var(--body-bold-14-17);\n    min-height: 34px;\n"])));
+exports.Stars = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    .star{\n        + .star{\n            margin-left: -2px;\n        }\n        div{\n            display: block;\n        }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    .star{\n        + .star{\n            margin-left: -2px;\n        }\n        div{\n            display: block;\n        }\n    }\n"])));
+exports.Description = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n    margin: ", ";\n    overflow: hidden;\n    position: relative;\n    min-height: 68px;\n    display: -webkit-box;\n    -webkit-line-clamp: 4;\n    -webkit-box-orient: vertical;\n"], ["\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n    margin: ", ";\n    overflow: hidden;\n    position: relative;\n    min-height: 68px;\n    display: -webkit-box;\n    -webkit-line-clamp: 4;\n    -webkit-box-orient: vertical;\n"])), function (_a) {
+    var $hasBorder = _a.$hasBorder;
+    return ($hasBorder ? '0.5rem 0 1.5rem 0' : '1rem 0 1.5rem 0');
+});
+exports.Line = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    border-bottom: 1px solid var(--icon-shadow-color);\n    margin-bottom: 1rem;\n"], ["\n    border-bottom: 1px solid var(--icon-shadow-color);\n    margin-bottom: 1rem;\n"])));
+exports.Bottom = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    >div{\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    >div{\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    }\n"])));
+exports.Logo = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    * {\n        display: block !important;\n    }\n"], ["\n    * {\n        display: block !important;\n    }\n"])));
+exports.HorizontalLine = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    border-right: 1px solid var(--dark-opacity-75);\n    height: 0.5rem;\n    margin: 0 0.5rem;\n"], ["\n    border-right: 1px solid var(--dark-opacity-75);\n    height: 0.5rem;\n    margin: 0 0.5rem;\n"])));
+exports.CustomerName = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    font: var(--caption-medium-10-12);\n    color: var(--dark-opacity-75);\n"], ["\n    font: var(--caption-medium-10-12);\n    color: var(--dark-opacity-75);\n"])));
+exports.Date = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    font: var(--caption-medium-10-12);\n    color: var(--dark-opacity-75);\n"], ["\n    font: var(--caption-medium-10-12);\n    color: var(--dark-opacity-75);\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

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

@@ -9,6 +9,7 @@ interface ReviewCard {
     title?: string;
     date?: string;
     onClick?: () => void;
+    hasBorder?: boolean;
 }
 export declare const ReviewCardDefault: ReviewCard;
 export interface ReviewCardStyledProps {
@@ -21,6 +22,7 @@ export interface ReviewCardStyledProps {
     $title?: string;
     $onClick?: () => void;
     $date?: string;
+    $hasBorder?: boolean;
 }
 export type ReviewCardProps = typeof ReviewCardDefault;
 export {};

package/dist/components/ReviewCard/props.js

@@ -11,4 +11,5 @@ exports.ReviewCardDefault = {
     title: null,
     onClick: null,
     date: null,
+    hasBorder: false,
 };

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

@@ -21,6 +21,9 @@ declare const _default: {
         date: {
             control: string;
         };
+        hasBorder: {
+            control: string;
+        };
         onClick: {
             action: string;
         };
@@ -105,6 +108,33 @@ export declare const WithoutDescription: {
         onClick: () => void;
     };
 };
+export declare const WithoutImageAndTitle: {
+    args: {
+        image: any;
+        title: any;
+        star: number;
+        totalStar: number;
+        description: string;
+        name: string;
+        logo: import("react/jsx-runtime").JSX.Element;
+        date: string;
+        onClick: () => void;
+    };
+};
+export declare const WithBorder: {
+    args: {
+        hasBorder: boolean;
+        image: import("react/jsx-runtime").JSX.Element;
+        star: number;
+        totalStar: number;
+        title: string;
+        description: string;
+        name: string;
+        logo: import("react/jsx-runtime").JSX.Element;
+        date: string;
+        onClick: () => void;
+    };
+};
 export declare const ShortDescription: {
     args: {
         description: string;

package/dist/components/ReviewCard/stories/ReviewCard.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.Minimal = exports.ShortDescription = exports.WithoutDescription = exports.WithoutDate = exports.WithoutLogo = exports.OneStar = exports.FiveStars = exports.Default = void 0;
+exports.Minimal = exports.ShortDescription = exports.WithBorder = exports.WithoutImageAndTitle = exports.WithoutDescription = exports.WithoutDate = exports.WithoutLogo = exports.OneStar = exports.FiveStars = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ReviewCard_1 = __importDefault(require("../ReviewCard"));
 var defaultImage = (0, jsx_runtime_1.jsx)("img", { height: "64px", src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" });
@@ -40,6 +40,7 @@ exports.default = {
         description: { control: 'text' },
         name: { control: 'text' },
         date: { control: 'text' },
+        hasBorder: { control: 'boolean' },
         onClick: { action: 'clicked' },
     }
 };
@@ -61,6 +62,12 @@ exports.WithoutDate = {
 exports.WithoutDescription = {
     args: __assign(__assign({}, defaultArgs), { description: null }),
 };
+exports.WithoutImageAndTitle = {
+    args: __assign(__assign({}, defaultArgs), { image: null, title: null }),
+};
+exports.WithBorder = {
+    args: __assign(__assign({}, defaultArgs), { hasBorder: true }),
+};
 exports.ShortDescription = {
     args: __assign(__assign({}, defaultArgs), { description: "Kısa bir değerlendirme." }),
 };

package/dist/components/SelectBox/SelectBox.js

@@ -61,7 +61,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.name, name = _k === void 0 ? props_1.SelectBoxDefault.name : _k, _l = _a.placeholder, placeholder = _l === void 0 ? props_1.SelectBoxDefault.placeholder : _l, _m = _a.instanceId, instanceId = _m === void 0 ? props_1.SelectBoxDefault.instanceId : _m, _o = _a.options, options = _o === void 0 ? props_1.SelectBoxDefault.options : _o, _p = _a.lightBg, lightBg = _p === void 0 ? props_1.SelectBoxDefault.lightBg : _p, _q = _a.onChange, onChange = _q === void 0 ? props_1.SelectBoxDefault.onChange : _q, _r = _a.filterOption, filterOption = _r === void 0 ? props_1.SelectBoxDefault.filterOption : _r, _s = _a.hasError, hasError = _s === void 0 ? props_1.SelectBoxDefault.hasError : _s, _t = _a.errorMessage, errorMessage = _t === void 0 ? props_1.SelectBoxDefault.errorMessage : _t, _u = _a.maxOptionListHeight, maxOptionListHeight = _u === void 0 ? props_1.SelectBoxDefault.maxOptionListHeight : _u, _v = _a.isAsync, isAsync = _v === void 0 ? props_1.SelectBoxDefault.isAsync : _v, _w = _a.hasShowDropdownIcon, hasShowDropdownIcon = _w === void 0 ? props_1.SelectBoxDefault.hasShowDropdownIcon : _w, _x = _a.hasShowSearchIcon, hasShowSearchIcon = _x === void 0 ? props_1.SelectBoxDefault.hasShowSearchIcon : _x, _y = _a.autoComplete, autoComplete = _y === void 0 ? props_1.SelectBoxDefault.autoComplete : _y, _z = _a.menuPlacement, menuPlacement = _z === void 0 ? props_1.SelectBoxDefault.menuPlacement : _z, _0 = _a.id, id = _0 === void 0 ? props_1.SelectBoxDefault.id : _0, _1 = _a.isClearable, isClearable = _1 === void 0 ? props_1.SelectBoxDefault.isClearable : _1, _2 = _a.size, size = _2 === void 0 ? props_1.SelectBoxDefault.size : _2, _3 = _a.isMulti, isMulti = _3 === void 0 ? props_1.SelectBoxDefault.isMulti : _3, _4 = _a.menuPosition, menuPosition = _4 === void 0 ? props_1.SelectBoxDefault.menuPosition : _4, _5 = _a.hasSelectAll, hasSelectAll = _5 === void 0 ? props_1.SelectBoxDefault.hasSelectAll : _5, _6 = _a.selectAllLabel, selectAllLabel = _6 === void 0 ? props_1.SelectBoxDefault.selectAllLabel : _6, defaultValue = _a.defaultValue, other = __rest(_a, ["isSearchable", "menuIsOpen", "label", "width", "name", "placeholder", "instanceId", "options", "lightBg", "onChange", "filterOption", "hasError", "errorMessage", "maxOptionListHeight", "isAsync", "hasShowDropdownIcon", "hasShowSearchIcon", "autoComplete", "menuPlacement", "id", "isClearable", "size", "isMulti", "menuPosition", "hasSelectAll", "selectAllLabel", "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, 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", "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`
@@ -127,7 +127,7 @@ var SelectBox = (0, react_1.forwardRef)(function (_a, ref) {
         if (!firstOption) {
             return null;
         }
-        var firstLabel = firstOption.label || firstOption.title || '';
+        var firstLabel = firstOption.selectedLabel || firstOption.optionLabel || firstOption.label || firstOption.title || '';
         // Add +N indicator if there are additional selections
         var additionalCount = selectedValues.length - 1;
         var additionalText = additionalCount > 0 ? " (+".concat(additionalCount, ")") : '';
@@ -145,19 +145,31 @@ var SelectBox = (0, react_1.forwardRef)(function (_a, ref) {
     };
     // Helper function to extract string label from option for search/filtering
     var getOptionLabel = function (option) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if (!option)
             return '';
+        if (typeof option.selectedLabel === 'string') {
+            return option.selectedLabel;
+        }
+        if (react_1.default.isValidElement(option.selectedLabel)) {
+            return ((_a = option.value) === null || _a === void 0 ? void 0 : _a.toString()) || '';
+        }
         // If label is a React component, try to extract text or use a fallback
         if (react_1.default.isValidElement(option.label)) {
             // For React components, try to get text content or use value as fallback
-            return ((_a = option.value) === null || _a === void 0 ? void 0 : _a.toString()) || '';
+            return ((_b = option.value) === null || _b === void 0 ? void 0 : _b.toString()) || '';
         }
         if (react_1.default.isValidElement(option.optionLabel)) {
-            return ((_b = option.value) === null || _b === void 0 ? void 0 : _b.toString()) || '';
+            return ((_c = option.value) === null || _c === void 0 ? void 0 : _c.toString()) || '';
         }
         // Return string label or optionLabel
-        return ((_c = option.optionLabel) === null || _c === void 0 ? void 0 : _c.toString()) || ((_d = option.label) === null || _d === void 0 ? void 0 : _d.toString()) || ((_e = option.value) === null || _e === void 0 ? void 0 : _e.toString()) || '';
+        return ((_d = option.optionLabel) === null || _d === void 0 ? void 0 : _d.toString()) || ((_e = option.label) === null || _e === void 0 ? void 0 : _e.toString()) || ((_f = option.value) === null || _f === void 0 ? void 0 : _f.toString()) || '';
+    };
+    var formatOptionLabel = function (option, meta) {
+        if (meta.context === 'value') {
+            return (option === null || option === void 0 ? void 0 : option.selectedLabel) || (option === null || option === void 0 ? void 0 : option.optionLabel) || (option === null || option === void 0 ? void 0 : option.label);
+        }
+        return option === null || option === void 0 ? void 0 : option.label;
     };
     // Wrapper for filterOption to handle React component labels
     var wrappedFilterOption = filterOption ? function (option, inputValue) {
@@ -166,21 +178,21 @@ var SelectBox = (0, react_1.forwardRef)(function (_a, ref) {
         return filterOption(normalizedOption, inputValue);
     } : undefined;
     // Remove filterOption from other to avoid duplicate props
-    var _7 = other, _ = _7.filterOption, restOther = __rest(_7, ["filterOption"]);
-    return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, __assign({ "$width": width, "$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 _10 = other, _ = _10.filterOption, restOther = __rest(_10, ["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: {
                         Option: CustomOption,
                         Input: Input,
                         DropdownIndicator: DropdownIndicator,
                         MenuList: MenuList,
                         LoadingIndicator: LoadingIndicator,
                         MultiValue: MultiValue
-                    }, options: options || [], instanceId: instanceId, getOptionLabel: getOptionLabel, 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 }, 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, 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 }))) })), hasError && ((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 }, restOther, { ref: ref, id: id }))) })), hasError && ((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 })] })))] })));
 });
 exports.default = SelectBox;

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

@@ -14,7 +14,7 @@ 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: none;\n                border: 1px solid var(--dark-opacity-10);\n                overflow: hidden;\n                position: ", ";\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: none;\n                border: 1px solid var(--dark-opacity-10);\n                overflow: hidden;\n                position: ", ";\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: 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) {
     switch (props.$size) {
         case 'medium':
             return "56px";
@@ -32,5 +32,5 @@ exports.Container = styled_components_1.default.div(templateObject_1 || (templat
         default:
             return "56px";
     }
-}, function (props) { return props.$hasShowDropdownIcon ? "display:flex" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig", hasWrapper: false })), function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return !props.$hasError && "url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')"; }, function (props) { return props.$isMulti ? "0.5rem !important" : "0 !important"; }, function (props) { return props.$menuPosition; }, function (props) { return props.$maxOptionListHeight; }, devices_1.devices.lg, devices_1.devices.lg, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Searchsmall", hasWrapper: false })));
+}, function (props) { return props.$hasShowDropdownIcon ? "display:flex" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig", hasWrapper: false })), function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return !props.$hasError && "url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')"; }, function (props) { return props.$isMulti ? "0.5rem !important" : "0 !important"; }, function (props) { return props.$hasMenuShadow ? "0 6px 30px 0 var(--box-shadow-color)" : "none"; }, function (props) { return props.$hasMenuShadow ? "none" : "1px solid var(--dark-opacity-10)"; }, function (props) { return props.$menuPosition; }, function (props) { return props.$menuWidth || "100%"; }, function (props) { return props.$menuAlign === "right" ? "auto" : "0"; }, function (props) { return props.$menuAlign === "right" ? "0" : "auto"; }, function (props) { return props.$maxOptionListHeight; }, devices_1.devices.lg, devices_1.devices.lg, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Searchsmall", hasWrapper: false })));
 var templateObject_1;

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

@@ -1,8 +1,11 @@
 import React from "react";
 export declare const sizes: string[];
 type SIZES = typeof sizes[number];
+export declare const menuAligns: readonly ["left", "right"];
+type MENU_ALIGN = typeof menuAligns[number];
 export interface SelectBoxOption {
     label?: string | React.ReactNode;
+    selectedLabel?: string | React.ReactNode;
     value?: any;
     optionLabel?: string | React.ReactNode;
     labelBottom?: string | React.ReactNode;
@@ -22,6 +25,9 @@ export interface SelectBox {
     menuIsOpen?: boolean;
     label: string;
     width?: string;
+    menuWidth?: string;
+    menuAlign?: MENU_ALIGN;
+    hasMenuShadow?: boolean;
     name?: string;
     placeholder?: string;
     instanceId?: string;
@@ -48,6 +54,9 @@ export interface SelectBox {
 export interface ContainerProps {
     $size?: SIZES;
     $width?: string;
+    $menuWidth?: string;
+    $menuAlign?: MENU_ALIGN;
+    $hasMenuShadow?: boolean;
     $hasError?: boolean;
     $maxOptionListHeight?: string;
     $hasShowDropdownIcon?: boolean;

package/dist/components/SelectBox/props.js

@@ -1,13 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectBoxDefault = exports.sizes = void 0;
+exports.SelectBoxDefault = exports.menuAligns = exports.sizes = void 0;
 exports.sizes = ['medium', 'small'];
+exports.menuAligns = ['left', 'right'];
 exports.SelectBoxDefault = {
     size: "medium",
     isSearchable: undefined,
     menuIsOpen: undefined,
     label: undefined,
     width: "370px",
+    menuWidth: undefined,
+    menuAlign: "left",
+    hasMenuShadow: false,
     name: undefined,
     placeholder: "İstediğiniz tarihi seçin...",
     instanceId: undefined,

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

@@ -29,6 +29,16 @@ declare const _default: {
         isClearable: {
             control: string;
         };
+        menuWidth: {
+            control: string;
+        };
+        menuAlign: {
+            control: string;
+            options: readonly ["left", "right"];
+        };
+        hasMenuShadow: {
+            control: string;
+        };
     };
 };
 export default _default;
@@ -57,6 +67,9 @@ export declare const Default: {
             period?: undefined;
         })[];
         width: string;
+        menuWidth: any;
+        menuAlign: string;
+        hasMenuShadow: boolean;
         hasError: boolean;
         errorMessage: string;
         maxOptionListHeight: string;
@@ -90,6 +103,9 @@ export declare const Small: {
             period?: undefined;
         })[];
         width: string;
+        menuWidth: any;
+        menuAlign: string;
+        hasMenuShadow: boolean;
         hasError: boolean;
         errorMessage: string;
         maxOptionListHeight: string;
@@ -123,6 +139,9 @@ export declare const Medium: {
             period?: undefined;
         })[];
         width: string;
+        menuWidth: any;
+        menuAlign: string;
+        hasMenuShadow: boolean;
         hasError: boolean;
         errorMessage: string;
         maxOptionListHeight: string;
@@ -157,6 +176,9 @@ export declare const WithError: {
             period?: undefined;
         })[];
         width: string;
+        menuWidth: any;
+        menuAlign: string;
+        hasMenuShadow: boolean;
         maxOptionListHeight: string;
         id: string;
         isMulti: boolean;
@@ -187,6 +209,9 @@ export declare const Searchable: {
             period?: undefined;
         })[];
         width: string;
+        menuWidth: any;
+        menuAlign: string;
+        hasMenuShadow: boolean;
         hasError: boolean;
         errorMessage: string;
         maxOptionListHeight: string;
@@ -219,6 +244,9 @@ export declare const Clearable: {
             period?: undefined;
         })[];
         width: string;
+        menuWidth: any;
+        menuAlign: string;
+        hasMenuShadow: boolean;
         hasError: boolean;
         errorMessage: string;
         maxOptionListHeight: string;
@@ -254,6 +282,9 @@ export declare const Multiple: {
             period?: undefined;
         })[];
         width: string;
+        menuWidth: any;
+        menuAlign: string;
+        hasMenuShadow: boolean;
         hasError: boolean;
         errorMessage: string;
         maxOptionListHeight: string;
@@ -290,6 +321,9 @@ export declare const MultipleWithSelectAll: {
             period?: undefined;
         })[];
         width: string;
+        menuWidth: any;
+        menuAlign: string;
+        hasMenuShadow: boolean;
         hasError: boolean;
         errorMessage: string;
         maxOptionListHeight: string;
@@ -321,6 +355,9 @@ export declare const WithoutLabel: {
             period?: undefined;
         })[];
         width: string;
+        menuWidth: any;
+        menuAlign: string;
+        hasMenuShadow: boolean;
         hasError: boolean;
         errorMessage: string;
         maxOptionListHeight: string;
@@ -353,6 +390,141 @@ export declare const DarkBg: {
             period?: undefined;
         })[];
         width: string;
+        menuWidth: any;
+        menuAlign: string;
+        hasMenuShadow: boolean;
+        hasError: boolean;
+        errorMessage: string;
+        maxOptionListHeight: string;
+        id: string;
+        isMulti: boolean;
+    };
+};
+export declare const CustomMenuWidth: {
+    args: {
+        width: string;
+        menuWidth: string;
+        menuAlign: string;
+        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;
+        })[];
+        hasMenuShadow: boolean;
+        hasError: boolean;
+        errorMessage: string;
+        maxOptionListHeight: string;
+        id: string;
+        isMulti: boolean;
+    };
+};
+export declare const CustomMenuWidthRight: {
+    args: {
+        width: string;
+        menuWidth: string;
+        menuAlign: string;
+        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;
+        })[];
+        hasMenuShadow: boolean;
+        hasError: boolean;
+        errorMessage: string;
+        maxOptionListHeight: string;
+        id: string;
+        isMulti: boolean;
+    };
+};
+export declare const CustomMenuShadow: {
+    args: {
+        width: string;
+        menuWidth: string;
+        menuAlign: string;
+        hasMenuShadow: 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;
+        })[];
+        hasError: boolean;
+        errorMessage: string;
+        maxOptionListHeight: string;
+        id: string;
+        isMulti: boolean;
+    };
+};
+export declare const WithSelectedLabel: {
+    args: {
+        options: {
+            label: string;
+            selectedLabel: string;
+            value: string;
+            price: string;
+            period: string;
+        }[];
+        placeholder: string;
+        isSearchable: boolean;
+        hasShowSearchIcon: boolean;
+        isClearable: boolean;
+        lightBg: boolean;
+        label: string;
+        name: string;
+        width: string;
+        menuWidth: any;
+        menuAlign: string;
+        hasMenuShadow: boolean;
         hasError: boolean;
         errorMessage: string;
         maxOptionListHeight: string;

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

@@ -14,10 +14,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DarkBg = exports.WithoutLabel = exports.MultipleWithSelectAll = exports.Multiple = exports.Clearable = exports.Searchable = 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.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");
+var optionsWithSelectedLabel = [
+    {
+        label: "Çok Uzun Kampanya Adı - 12 Ay Kiralama",
+        selectedLabel: "12 Ay Kiralama",
+        value: "rental-12",
+        price: "1.250,00",
+        period: "/ay",
+    },
+    {
+        label: "Premium Paket - Tüm Özellikler Dahil",
+        selectedLabel: "Premium Paket",
+        value: "premium",
+        price: "2.100,00",
+        period: "/ay",
+    },
+];
 var defaultArgs = {
     placeholder: "Placeholder",
     isSearchable: false,
@@ -28,6 +44,9 @@ var defaultArgs = {
     name: "name",
     options: SelectValues_json_1.default,
     width: "400px",
+    menuWidth: undefined,
+    menuAlign: "left",
+    hasMenuShadow: false,
     hasError: false,
     errorMessage: "Error message.",
     maxOptionListHeight: "200px",
@@ -47,6 +66,9 @@ exports.default = {
         selectAllLabel: { control: 'text' },
         isSearchable: { control: 'boolean' },
         isClearable: { control: 'boolean' },
+        menuWidth: { control: 'text' },
+        menuAlign: { control: 'select', options: props_1.menuAligns },
+        hasMenuShadow: { control: 'boolean' },
     }
 };
 exports.Default = {
@@ -79,3 +101,15 @@ exports.WithoutLabel = {
 exports.DarkBg = {
     args: __assign(__assign({}, defaultArgs), { lightBg: false }),
 };
+exports.CustomMenuWidth = {
+    args: __assign(__assign({}, defaultArgs), { width: "400px", menuWidth: "620px", menuAlign: "left" }),
+};
+exports.CustomMenuWidthRight = {
+    args: __assign(__assign({}, defaultArgs), { width: "400px", menuWidth: "620px", menuAlign: "right" }),
+};
+exports.CustomMenuShadow = {
+    args: __assign(__assign({}, defaultArgs), { width: "400px", menuWidth: "620px", menuAlign: "right", hasMenuShadow: true }),
+};
+exports.WithSelectedLabel = {
+    args: __assign(__assign({}, defaultArgs), { options: optionsWithSelectedLabel, placeholder: "Paket seçin" }),
+};

package/package.json

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