krl-alfred 1.82.13 → 1.83.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Checkbox/Checkbox.js +3 -3
- package/dist/components/Checkbox/props.js +1 -0
- package/dist/components/Icon/iconList/StarCircle.js +40 -0
- package/dist/components/Icon/iconList/Starfull.js +1 -1
- package/dist/components/Icon/iconList/StarfullSmall.js +40 -0
- package/dist/components/Icon/iconList/index.js +14 -2
- package/dist/components/ProductCardHorizontal/ProductCardHorizontal.js +2 -2
- package/dist/components/ProductCardHorizontal/ProductCardHorizontal.styled.js +1 -1
- package/dist/components/ProductCardHorizontal/props.js +3 -1
- package/dist/components/ReviewBlock/ReviewBlock.js +40 -0
- package/dist/components/ReviewBlock/ReviewBlock.styled.js +29 -0
- package/dist/components/ReviewBlock/index.js +8 -0
- package/dist/components/ReviewBlock/props.js +10 -0
- package/dist/components/ReviewBlock/stories/ReviewBlock.stories.js +37 -0
- package/dist/components/ReviewCard/ReviewCard.js +2 -2
- package/dist/components/ReviewCard/ReviewCard.styled.js +14 -3
- package/dist/components/ReviewCard/props.js +1 -0
- package/dist/components/ReviewCard/stories/ReviewCard.stories.js +1 -0
- package/dist/components/SearchBox/SearchBox.js +3 -3
- package/dist/components/SearchBox/SearchBox.styled.js +1 -1
- package/dist/components/SearchBox/props.js +3 -1
- package/dist/components/SearchBox/stories/SearchBox.stories.js +6 -2
- package/dist/components/SelectBox/SelectBox.js +21 -20
- package/dist/components/SelectBox/SelectBox.styled.js +12 -3
- package/dist/components/SelectBox/stories/SelectBox.stories.js +2 -0
- package/dist/components/Tabs/TabItem.js +3 -3
- package/dist/components/Tabs/Tabs.js +5 -5
- package/dist/components/Tabs/Tabs.styled.js +5 -4
- package/dist/components/Tabs/props.js +2 -0
- package/dist/components/Tabs/stories/Tabs.stories.js +2 -1
- package/dist/components/VideoCard/VideoCard.js +22 -0
- package/dist/components/VideoCard/VideoCard.styled.js +15 -0
- package/dist/components/VideoCard/index.js +8 -0
- package/dist/components/VideoCard/props.js +8 -0
- package/dist/components/VideoCard/stories/VideoCard.stories.js +32 -0
- package/dist/i18n/locales/turkish.json +3 -1
- package/dist/index.js +5 -1
- package/dist/jsons/productReviews.json +30 -0
- package/dist/style/style.min.css +1 -1
- package/dist/style/style.min.css.map +1 -1
- package/package.json +1 -1
|
@@ -19,11 +19,14 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
19
19
|
var SearchBox_1 = __importDefault(require("../SearchBox"));
|
|
20
20
|
var productList_json_1 = __importDefault(require("../../../jsons/productList.json"));
|
|
21
21
|
var index_1 = require("../../../index");
|
|
22
|
+
var props_1 = require("../props");
|
|
22
23
|
exports.default = {
|
|
23
24
|
title: 'Components/SearchBox',
|
|
24
25
|
component: SearchBox_1.default,
|
|
25
26
|
tags: ['autodocs'],
|
|
26
|
-
argTypes: {
|
|
27
|
+
argTypes: {
|
|
28
|
+
size: { control: 'select', options: props_1.sizes },
|
|
29
|
+
}
|
|
27
30
|
};
|
|
28
31
|
exports.Default = {
|
|
29
32
|
args: {
|
|
@@ -33,9 +36,10 @@ exports.Default = {
|
|
|
33
36
|
placeholder: "Teknolojik ürün ara...",
|
|
34
37
|
isLoading: false,
|
|
35
38
|
showResultList: false,
|
|
39
|
+
size: "small",
|
|
36
40
|
children: productList_json_1.default.map(function (product) {
|
|
37
41
|
var _a, _b, _c;
|
|
38
|
-
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCard" }, { children: (0, jsx_runtime_1.jsx)(index_1.ProductCardHorizontal, { title: product.name, image: (0, jsx_runtime_1.jsx)("img", { src: (_a = product.medias[0]) === null || _a === void 0 ? void 0 : _a.url, alt: product.name, width: "70", height: "70", className: "media" }), description: product.shortDescription, price: "".concat((_b = product.prices[0]) === null || _b === void 0 ? void 0 : _b.newPriceText, " ").concat((_c = product.prices[0]) === null || _c === void 0 ? void 0 : _c.currencyCode), period: 'ay' }, product.productId) })));
|
|
42
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCard" }, { children: (0, jsx_runtime_1.jsx)(index_1.ProductCardHorizontal, { title: product.name, image: (0, jsx_runtime_1.jsx)("img", { src: (_a = product.medias[0]) === null || _a === void 0 ? void 0 : _a.url, alt: product.name, width: "70", height: "70", className: "media" }), description: product.shortDescription, price: "".concat((_b = product.prices[0]) === null || _b === void 0 ? void 0 : _b.newPriceText, " ").concat((_c = product.prices[0]) === null || _c === void 0 ? void 0 : _c.currencyCode), period: 'ay', size: "small" }, product.productId) })));
|
|
39
43
|
}),
|
|
40
44
|
},
|
|
41
45
|
};
|
|
@@ -49,7 +49,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
49
49
|
};
|
|
50
50
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
51
51
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
52
|
-
var react_1 = require("react");
|
|
52
|
+
var react_1 = __importStar(require("react"));
|
|
53
53
|
var props_1 = require("./props");
|
|
54
54
|
var SelectBox_styled_1 = require("./SelectBox.styled");
|
|
55
55
|
var classnames_1 = __importDefault(require("classnames"));
|
|
@@ -63,31 +63,32 @@ var SelectBox = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
63
63
|
var _b, _c, _d, _e;
|
|
64
64
|
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, 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", "defaultValue"]);
|
|
65
65
|
var simplebarRef = (0, react_1.useRef)(null);
|
|
66
|
-
var CustomOption = function (props) {
|
|
66
|
+
var CustomOption = react_1.default.forwardRef(function (props, ref) {
|
|
67
67
|
var _a;
|
|
68
|
-
var
|
|
68
|
+
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`
|
|
69
|
+
;
|
|
70
|
+
// Variables derived from props.data
|
|
69
71
|
var isFixedBottom = data === null || data === void 0 ? void 0 : data.isFixedBottom;
|
|
70
|
-
var isSmall = !data.labelBottom;
|
|
71
|
-
var
|
|
72
|
-
var
|
|
73
|
-
var
|
|
74
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
72
|
+
var isSmall = !(data === null || data === void 0 ? void 0 : data.labelBottom);
|
|
73
|
+
var isCustomRender = data === null || data === void 0 ? void 0 : data.isCustom;
|
|
74
|
+
var isDisabledUserOption = data === null || data === void 0 ? void 0 : data.isDisabled; // User-defined disabled state in data from the option itself
|
|
75
|
+
var isHideSelectedRender = data === null || data === void 0 ? void 0 : data.isHideSelected;
|
|
76
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: ref }, innerProps, { className: (0, classnames_1.default)("customSelect__option", "option", (_a = {},
|
|
75
77
|
_a["customSelect__option--is-focused"] = isFocused,
|
|
76
|
-
_a["customSelect__option--is-selected"] = isSelected && !
|
|
78
|
+
_a["customSelect__option--is-selected"] = isSelected && !isHideSelectedRender,
|
|
77
79
|
_a["optionSm"] = isSmall,
|
|
78
80
|
_a["fixedBottom"] = isFixedBottom,
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
_a
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
};
|
|
81
|
+
// Use `isDisabled` from props for the main disabled state (react-select controlled)
|
|
82
|
+
// and `isDisabledUserOption` for any custom visual/behavioral cues if needed.
|
|
83
|
+
_a["isDisabled"] = isDisabled || isDisabledUserOption,
|
|
84
|
+
_a["isCustom"] = isCustomRender,
|
|
85
|
+
_a)) }, { children: isCustomRender ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "customContent" }, { children: data.customContent }))) : ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "option-container" }, { children: [isMulti && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "checkbox-container" }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: "".concat(innerProps.id, "-checkbox"), checked: isSelected, size: "small", onChange: function () { } }) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "option-content" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "left" }, { children: [((data === null || data === void 0 ? void 0 : data.optionLabel) || data.label) &&
|
|
86
|
+
(0, jsx_runtime_1.jsx)("strong", { children: (data === null || data === void 0 ? void 0 : data.optionLabel) || (data === null || data === void 0 ? void 0 : data.label) }), data.labelBottom && (0, jsx_runtime_1.jsx)("span", { children: data.labelBottom })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "right" }, { children: [data.price &&
|
|
87
|
+
(0, jsx_runtime_1.jsxs)("strong", { children: [data.price, data.priceSm && (0, jsx_runtime_1.jsx)("small", { children: data.priceSm })] }), data.period && (0, jsx_runtime_1.jsx)("span", { children: data.period })] }))] }))] }))) })));
|
|
88
|
+
});
|
|
89
|
+
CustomOption.displayName = 'CustomOption';
|
|
89
90
|
var Input = function (props) { return (0, jsx_runtime_1.jsx)(react_select_1.components.Input, __assign({}, props, { autoComplete: autoComplete })); };
|
|
90
|
-
var DropdownIndicator = function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ className: "customSelect__indicator customSelect__dropdown-indicator" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "ArrowDownBig" }) })); };
|
|
91
|
+
var DropdownIndicator = function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ className: "customSelect__indicator customSelect__dropdown-indicator" }, { children: size === "small" ? (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "ArrowSmallDown" }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "ArrowDownBig" }) })); };
|
|
91
92
|
var LoadingIndicator = function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ className: "customSelect__indicator customSelect__loading-indicator css-o9ehiq-loadingIndicator", "aria-hidden": "true" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: "1rem", height: "1rem", variant: "primary" }) })); };
|
|
92
93
|
var MenuList = function (props) {
|
|
93
94
|
return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuList, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: props.children })) })));
|
|
@@ -13,14 +13,23 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
13
13
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
14
14
|
var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
|
|
15
15
|
var devices_1 = require("../../constants/devices");
|
|
16
|
-
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: 56px;\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\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 > 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: 56px;\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\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 > 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) {
|
|
16
|
+
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 > 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 > 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) {
|
|
17
17
|
switch (props.$size) {
|
|
18
18
|
case 'medium':
|
|
19
19
|
return "56px";
|
|
20
20
|
case 'small':
|
|
21
|
-
return "
|
|
21
|
+
return "48px";
|
|
22
22
|
default:
|
|
23
23
|
return "56px";
|
|
24
24
|
}
|
|
25
|
-
}, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark)"; }, function (props) { return props.$isMulti ? "0.5rem" : "0"; }, function (props) {
|
|
25
|
+
}, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark)"; }, function (props) { return props.$isMulti ? "0.5rem" : "0"; }, function (props) {
|
|
26
|
+
switch (props.$size) {
|
|
27
|
+
case 'medium':
|
|
28
|
+
return "56px";
|
|
29
|
+
case 'small':
|
|
30
|
+
return "48px";
|
|
31
|
+
default:
|
|
32
|
+
return "56px";
|
|
33
|
+
}
|
|
34
|
+
}, 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 })));
|
|
26
35
|
var templateObject_1;
|
|
@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
exports.Multiple = exports.Default = void 0;
|
|
18
18
|
var SelectBox_1 = __importDefault(require("../SelectBox"));
|
|
19
19
|
var SelectValues_json_1 = __importDefault(require("./../../../jsons/SelectValues.json"));
|
|
20
|
+
var props_1 = require("../props");
|
|
20
21
|
exports.default = {
|
|
21
22
|
title: 'Components/SelectBox',
|
|
22
23
|
component: SelectBox_1.default,
|
|
@@ -24,6 +25,7 @@ exports.default = {
|
|
|
24
25
|
argTypes: {
|
|
25
26
|
hasError: { control: 'boolean' },
|
|
26
27
|
hasShowDropdownIcon: { control: 'boolean' },
|
|
28
|
+
size: { control: 'select', options: props_1.sizes },
|
|
27
29
|
}
|
|
28
30
|
};
|
|
29
31
|
exports.Default = {
|
|
@@ -17,8 +17,8 @@ var react_1 = require("react");
|
|
|
17
17
|
var TabContext_1 = require("./TabContext");
|
|
18
18
|
var Tabs_styled_1 = require("./Tabs.styled");
|
|
19
19
|
var TabItem = function (_a) {
|
|
20
|
-
var _b = _a.isActive, isActive = _b === void 0 ? props_1.TabItemDefault.isActive : _b, _c = _a.isDisabled, isDisabled =
|
|
21
|
-
var
|
|
20
|
+
var _b = _a.isActive, isActive = _b === void 0 ? props_1.TabItemDefault.isActive : _b, _c = _a.hasAutoFlex, hasAutoFlex = _c === void 0 ? props_1.TabsDefault.hasAutoFlex : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? props_1.TabItemDefault.isDisabled : _d, _e = _a.title, title = _e === void 0 ? props_1.TabItemDefault.title : _e, _f = _a.children, children = _f === void 0 ? props_1.TabItemDefault.children : _f, _g = _a.key, key = _g === void 0 ? props_1.TabItemDefault.key : _g, _h = _a.onClick, onClick = _h === void 0 ? props_1.TabItemDefault.onClick : _h;
|
|
21
|
+
var _j = (0, react_1.useContext)(TabContext_1.TabsContext), onActivate = _j.onActivate, setActiveContent = _j.setActiveContent;
|
|
22
22
|
var onClickTab = function (event) {
|
|
23
23
|
if (event) {
|
|
24
24
|
event.preventDefault();
|
|
@@ -33,6 +33,6 @@ var TabItem = function (_a) {
|
|
|
33
33
|
if (isActive)
|
|
34
34
|
setActiveContent(children);
|
|
35
35
|
}, [isActive, children]);
|
|
36
|
-
return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, __assign({ "$isDisabled": isDisabled }, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$isActive": isActive, onClick: onClickTab }, { children: title })) }), key));
|
|
36
|
+
return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, __assign({ "$isDisabled": isDisabled, "$hasAutoFlex": hasAutoFlex }, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$isActive": isActive, "$hasAutoFlex": hasAutoFlex, onClick: onClickTab }, { children: title })) }), key));
|
|
37
37
|
};
|
|
38
38
|
exports.default = TabItem;
|
|
@@ -44,9 +44,9 @@ var Tabs_styled_1 = require("./Tabs.styled");
|
|
|
44
44
|
var TabContext_1 = require("./TabContext");
|
|
45
45
|
var TabItem_1 = __importDefault(require("./TabItem"));
|
|
46
46
|
var Tabs = function (_a) {
|
|
47
|
-
var _b = _a.activeIndex, activeIndex = _b === void 0 ? props_1.TabsDefault.activeIndex : _b, _c = _a.children, children = _c === void 0 ? props_1.TabsDefault.children : _c, _d = _a.onActive, onActive = _d === void 0 ? props_1.TabsDefault.onActive : _d;
|
|
48
|
-
var
|
|
49
|
-
var
|
|
47
|
+
var _b = _a.activeIndex, activeIndex = _b === void 0 ? props_1.TabsDefault.activeIndex : _b, _c = _a.children, children = _c === void 0 ? props_1.TabsDefault.children : _c, _d = _a.onActive, onActive = _d === void 0 ? props_1.TabsDefault.onActive : _d, _e = _a.hasAutoFlex, hasAutoFlex = _e === void 0 ? props_1.TabsDefault.hasAutoFlex : _e;
|
|
48
|
+
var _f = (0, react_1.useState)(activeIndex || 0), tabActiveIndex = _f[0], setTabActiveIndex = _f[1];
|
|
49
|
+
var _g = (0, react_1.useState)(null), activeContent = _g[0], setActiveContent = _g[1];
|
|
50
50
|
(0, react_1.useEffect)(function () {
|
|
51
51
|
setTabActiveIndex(activeIndex);
|
|
52
52
|
}, [activeIndex]);
|
|
@@ -66,11 +66,11 @@ var Tabs = function (_a) {
|
|
|
66
66
|
setActiveContent: setActiveContent,
|
|
67
67
|
};
|
|
68
68
|
}, [tabActiveIndex, activeIndex]);
|
|
69
|
-
return ((0, jsx_runtime_1.jsxs)(Tabs_styled_1.TabsStyled, { children: [(0, jsx_runtime_1.jsx)(Tabs_styled_1.TabHeaderStyled, { children: children === null || children === void 0 ? void 0 : children.map(function (child, index) { return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(TabContext_1.TabsContext.Provider, __assign({ value: getTabsContext(index) }, { children: child
|
|
69
|
+
return ((0, jsx_runtime_1.jsxs)(Tabs_styled_1.TabsStyled, { children: [(0, jsx_runtime_1.jsx)(Tabs_styled_1.TabHeaderStyled, __assign({ "$hasAutoFlex": hasAutoFlex }, { children: children === null || children === void 0 ? void 0 : children.map(function (child, index) { return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(TabContext_1.TabsContext.Provider, __assign({ value: getTabsContext(index) }, { children: child
|
|
70
70
|
? // cloneElement is needed for backward compatibility with custom
|
|
71
71
|
// styled components that rely on active. We should reassess
|
|
72
72
|
// if it is still necessary in our next major release.
|
|
73
|
-
react_1.default.cloneElement(child, { isActive: activeIndex === index }) : child })) }, index)); }) }), (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemContentStyled, __assign({ className: "active-tab-".concat(activeIndex) }, { children: activeContent }))] }));
|
|
73
|
+
react_1.default.cloneElement(child, { isActive: activeIndex === index, hasAutoFlex: hasAutoFlex }) : child })) }, index)); }) })), (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemContentStyled, __assign({ className: "active-tab-".concat(activeIndex) }, { children: activeContent }))] }));
|
|
74
74
|
};
|
|
75
75
|
Tabs.TabItem = TabItem_1.default;
|
|
76
76
|
exports.default = Tabs;
|
|
@@ -9,9 +9,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.TabItemContentStyled = exports.TabItemTitleStyled = exports.TabItemStyled = exports.TabHeaderStyled = exports.TabsStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
|
|
13
|
-
exports.
|
|
14
|
-
exports.
|
|
15
|
-
exports.
|
|
12
|
+
var devices_1 = require("../../constants/devices");
|
|
13
|
+
exports.TabsStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
14
|
+
exports.TabHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n column-gap: 1rem;\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n column-gap: 1rem;\n ", "\n"])), function (props) { return props.$hasAutoFlex ? "center" : "flex-start"; }, function (props) { return !props.$hasAutoFlex && "\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 2rem;\n margin: -2rem;\n @media only screen and ".concat(devices_1.devices.xl, " {\n padding: 2rem 1rem;\n margin: -2rem -1rem;\n }\n "); });
|
|
15
|
+
exports.TabItemStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: ", ";\n ", "\n"], ["\n flex: ", ";\n ", "\n"])), function (props) { return props.$hasAutoFlex ? "1 0" : "auto 0"; }, function (props) { return props.$isDisabled ? "\n cursor: no-drop;\n pointer-events: none;\n user-select: none;\n " : ""; });
|
|
16
|
+
exports.TabItemTitleStyled = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background: transparent;\n color: ", ";\n border: 1px solid ", ";\n width: 100%;\n box-shadow: 0 6px 30px 0 ", ";\n border-radius: 0.5rem;\n transition: all .2s ease;\n padding: ", ";\n height: 40px;\n cursor: pointer;\n font: var(--body-semi-bold-14-17);\n white-space: ", ";\n outline: none !important;\n &:hover {\n color: var(--dark);\n border: 1px solid var(--grey-10);\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n"], ["\n background: transparent;\n color: ", ";\n border: 1px solid ", ";\n width: 100%;\n box-shadow: 0 6px 30px 0 ", ";\n border-radius: 0.5rem;\n transition: all .2s ease;\n padding: ", ";\n height: 40px;\n cursor: pointer;\n font: var(--body-semi-bold-14-17);\n white-space: ", ";\n outline: none !important;\n &:hover {\n color: var(--dark);\n border: 1px solid var(--grey-10);\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n"])), function (props) { return props.$isActive ? "var(--dark)" : "var(--dark-opacity-75)"; }, function (props) { return props.$isActive ? "var(--grey-10)" : "transparent"; }, function (props) { return props.$isActive ? "var(--box-shadow-color)" : "transparent"; }, function (props) { return props.$hasAutoFlex ? "0" : "0 1rem"; }, function (props) { return props.$hasAutoFlex ? "pre-wrap" : "nowrap"; });
|
|
16
17
|
exports.TabItemContentStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-top: 1rem;\n"], ["\n padding-top: 1rem;\n"])));
|
|
17
18
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -5,6 +5,7 @@ exports.TabsDefault = {
|
|
|
5
5
|
activeIndex: null,
|
|
6
6
|
children: null,
|
|
7
7
|
onActive: null,
|
|
8
|
+
hasAutoFlex: true,
|
|
8
9
|
};
|
|
9
10
|
exports.TabItemDefault = {
|
|
10
11
|
isActive: false,
|
|
@@ -13,4 +14,5 @@ exports.TabItemDefault = {
|
|
|
13
14
|
children: null,
|
|
14
15
|
key: null,
|
|
15
16
|
onClick: null,
|
|
17
|
+
hasAutoFlex: exports.TabsDefault.hasAutoFlex,
|
|
16
18
|
};
|
|
@@ -20,7 +20,7 @@ var Tabs_1 = __importDefault(require("../Tabs"));
|
|
|
20
20
|
exports.default = {
|
|
21
21
|
title: 'Components/Tabs',
|
|
22
22
|
component: function (props) {
|
|
23
|
-
return ((0, jsx_runtime_1.jsxs)(Tabs_1.default, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 1" }, { children: "Tab 1" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 2" }, { children: "Tab 2" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 3" }, { children: "Tab 3" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 4" }, { children: "Tab 4" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ isDisabled: true, title: "Tab 5" }, { children: "Tab 5 (disabled)" }))] })));
|
|
23
|
+
return ((0, jsx_runtime_1.jsxs)(Tabs_1.default, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 1", hasAutoFlex: props.hasAutoFlex }, { children: "Tab 1" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 2", hasAutoFlex: props.hasAutoFlex }, { children: "Tab 2" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 3", hasAutoFlex: props.hasAutoFlex }, { children: "Tab 3" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 4", hasAutoFlex: props.hasAutoFlex }, { children: "Tab 4" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ isDisabled: true, title: "Tab 5", hasAutoFlex: props.hasAutoFlex }, { children: "Tab 5 (disabled)" }))] })));
|
|
24
24
|
},
|
|
25
25
|
tags: ['autodocs'],
|
|
26
26
|
argTypes: {}
|
|
@@ -29,5 +29,6 @@ exports.Default = {
|
|
|
29
29
|
args: {
|
|
30
30
|
activeIndex: 0,
|
|
31
31
|
onActive: function (e) { return console.log(e, "onActive"); },
|
|
32
|
+
hasAutoFlex: true,
|
|
32
33
|
},
|
|
33
34
|
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
15
|
+
var props_1 = require("./props");
|
|
16
|
+
var VideoCard_styled_1 = require("./VideoCard.styled");
|
|
17
|
+
var VideoCard = function (_a) {
|
|
18
|
+
var _b = _a.poster, poster = _b === void 0 ? props_1.VideoCardDefault.poster : _b, _c = _a.title, title = _c === void 0 ? props_1.VideoCardDefault.title : _c, _d = _a.videoUrl, videoUrl = _d === void 0 ? props_1.VideoCardDefault.videoUrl : _d;
|
|
19
|
+
return ((0, jsx_runtime_1.jsxs)(VideoCard_styled_1.VideoCardStyled, { children: [(0, jsx_runtime_1.jsx)(VideoCard_styled_1.VideoWrapper, { children: (0, jsx_runtime_1.jsxs)("video", __assign({ controls: true }, { children: [(0, jsx_runtime_1.jsx)("source", { src: videoUrl, type: "video/mp4" }), "Your browser does not support the video tag."] })) }), (0, jsx_runtime_1.jsx)(VideoCard_styled_1.Title, { children: title })] }));
|
|
20
|
+
};
|
|
21
|
+
VideoCard.defaultProps = {};
|
|
22
|
+
exports.default = VideoCard;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.Title = exports.VideoWrapper = exports.VideoCardStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
exports.VideoCardStyled = 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"])));
|
|
13
|
+
exports.VideoWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n video{\n display: block;\n width: 100%;\n height: 371px;\n object-fit: cover;\n position: relative;\n overflow: hidden;\n border-radius: 0.5rem;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n video{\n display: block;\n width: 100%;\n height: 371px;\n object-fit: cover;\n position: relative;\n overflow: hidden;\n border-radius: 0.5rem;\n }\n"])));
|
|
14
|
+
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 1.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(--title-bold-16-19);\n"], ["\n margin-top: 1.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(--title-bold-16-19);\n"])));
|
|
15
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var VideoCard_1 = require("./VideoCard");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(VideoCard_1).default; } });
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.Default = void 0;
|
|
18
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
+
var VideoCard_1 = __importDefault(require("../VideoCard"));
|
|
20
|
+
exports.default = {
|
|
21
|
+
title: 'Components/VideoCard',
|
|
22
|
+
component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "308px" } }, { children: (0, jsx_runtime_1.jsx)(VideoCard_1.default, __assign({}, props)) })); },
|
|
23
|
+
tags: ['autodocs'],
|
|
24
|
+
argTypes: {}
|
|
25
|
+
};
|
|
26
|
+
exports.Default = {
|
|
27
|
+
args: {
|
|
28
|
+
poster: (0, jsx_runtime_1.jsx)("img", { height: "64px", src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" }),
|
|
29
|
+
title: "Buharlı temizlik makinesini kullanmaya emin olamıyordum. ",
|
|
30
|
+
videoUrl: "https://www.w3schools.com/html/mov_bbb.mp4"
|
|
31
|
+
},
|
|
32
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.ProductCardCheckbox = exports.PaymentCart = exports.Tabs = exports.ProductCardHorizontalSm = exports.ProductCardHorizontal = exports.ProductCardVertical = exports.BannerCard = exports.AutocompleteInput = exports.InstallmentBox = exports.AddressCard = exports.ReviewCard = exports.useTranslation = exports.trLocale = exports.enLocale = exports.initi18n = exports.initReactI18next = exports.CampaignCard = exports.Dropdown = exports.InlineProgress = exports.Loader = exports.ShoppingCartProduct = exports.CouponCode = exports.InfoBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.SuggestBox = exports.Toaster = exports.toast = exports.Accordion = exports.Divider = exports.SearchBox = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Button = void 0;
|
|
7
|
-
exports.BlogCard = exports.RadioScale = exports.SkeletonLoader = exports.Pagination = exports.DescriptionCard = exports.Table = exports.DropdownButton = exports.OptionMenu = void 0;
|
|
7
|
+
exports.VideoCard = exports.ReviewBlock = exports.BlogCard = exports.RadioScale = exports.SkeletonLoader = exports.Pagination = exports.DescriptionCard = exports.Table = exports.DropdownButton = exports.OptionMenu = void 0;
|
|
8
8
|
var react_i18next_1 = require("react-i18next");
|
|
9
9
|
Object.defineProperty(exports, "initReactI18next", { enumerable: true, get: function () { return react_i18next_1.initReactI18next; } });
|
|
10
10
|
Object.defineProperty(exports, "useTranslation", { enumerable: true, get: function () { return react_i18next_1.useTranslation; } });
|
|
@@ -119,3 +119,7 @@ var RadioScale_1 = __importDefault(require("./components/RadioScale"));
|
|
|
119
119
|
exports.RadioScale = RadioScale_1.default;
|
|
120
120
|
var BlogCard_1 = __importDefault(require("./components/BlogCard"));
|
|
121
121
|
exports.BlogCard = BlogCard_1.default;
|
|
122
|
+
var ReviewBlock_1 = __importDefault(require("./components/ReviewBlock"));
|
|
123
|
+
exports.ReviewBlock = ReviewBlock_1.default;
|
|
124
|
+
var VideoCard_1 = __importDefault(require("./components/VideoCard"));
|
|
125
|
+
exports.VideoCard = VideoCard_1.default;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"image": "<img src='https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg' alt='test'/>",
|
|
4
|
+
"name": "PlayStation 5 DualSense Kolu",
|
|
5
|
+
"question": "Ürünün performansından memnun kaldınız mı?",
|
|
6
|
+
"answer": "Kiralarsın’dan ilk kez alışveriş yaptım ve gerçekten çok memnun kaldım. Hem ürünler çok kaliteli hem de süreç çok pratik. Siparişten teslimata kadar her aşama çok iyi yönetildi ve müşteri hizmetleri de çok ilgiliydi. Kesinlikle tavsiye ederim!",
|
|
7
|
+
"tags": ["Kısa süreli ihtiyaç", "Uygun fiyatlı", "Sorunsuz iade"]
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
"image": "<img src='https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg' alt='test'/>",
|
|
11
|
+
"name": "LG 55' OLED TV",
|
|
12
|
+
"question": "Kiralama süreci beklentinizi karşıladı mı?",
|
|
13
|
+
"answer": "Kiralarsın’dan ilk kez alışveriş yaptım ve gerçekten çok memnun kaldım. Hem ürünler çok kaliteli hem de süreç çok pratik. Siparişten teslimata kadar her aşama çok iyi yönetildi ve müşteri hizmetleri de çok ilgiliydi. Kesinlikle tavsiye ederim!",
|
|
14
|
+
"tags": ["Hızlı teslimat", "Müşteri memnuniyeti", "Tekrar kiralarım"]
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"image": "<img src='https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg' alt='test'/>",
|
|
18
|
+
"name": "LG 55' OLED TV",
|
|
19
|
+
"question": "Kiralama süreci beklentinizi karşıladı mı?",
|
|
20
|
+
"answer": "Kiralarsın’dan ilk kez alışveriş yaptım ve gerçekten çok memnun kaldım. Hem ürünler çok kaliteli hem de süreç çok pratik. Siparişten teslimata kadar her aşama çok iyi yönetildi ve müşteri hizmetleri de çok ilgiliydi. Kesinlikle tavsiye ederim!",
|
|
21
|
+
"tags": ["Hızlı teslimat", "Müşteri memnuniyeti", "Tekrar kiralarım"]
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"image": "<img src='https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg' alt='test'/>",
|
|
25
|
+
"name": "LG 55' OLED TV",
|
|
26
|
+
"question": "Kiralama süreci beklentinizi karşıladı mı?",
|
|
27
|
+
"answer": "Kiralarsın’dan ilk kez alışveriş yaptım ve gerçekten çok memnun kaldım. Hem ürünler çok kaliteli hem de süreç çok pratik. Siparişten teslimata kadar her aşama çok iyi yönetildi ve müşteri hizmetleri de çok ilgiliydi. Kesinlikle tavsiye ederim!",
|
|
28
|
+
"tags": ["Hızlı teslimat", "Müşteri memnuniyeti", "Tekrar kiralarım"]
|
|
29
|
+
}
|
|
30
|
+
]
|