krl-alfred 1.75.0 → 1.75.2

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.
Files changed (15) hide show
  1. package/dist/components/AddressCard/AddressCard.styled.js +1 -1
  2. package/dist/components/Button/Button.styled.js +1 -1
  3. package/dist/components/Checkbox/Checkbox.js +4 -2
  4. package/dist/components/Checkbox/Checkbox.styled.js +2 -13
  5. package/dist/components/Checkbox/props.js +2 -1
  6. package/dist/components/Input/Input.styled.js +1 -1
  7. package/dist/components/InstallmentBox/InstallmentBox.js +1 -1
  8. package/dist/components/InstallmentBox/InstallmentBox.styled.js +1 -1
  9. package/dist/components/Modal/Modal.styled.js +2 -0
  10. package/dist/components/Modal/props.js +1 -1
  11. package/dist/components/SelectBox/SelectBox.styled.js +1 -1
  12. package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js +4 -2
  13. package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js +1 -1
  14. package/dist/components/ShoppingCartProduct/stories/ShoppingCartProduct.stories.js +1 -0
  15. package/package.json +1 -1
package/dist/components/AddressCard/AddressCard.styled.js CHANGED
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.AddressCardStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
- exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n border: 1px solid ", ";\n background: white;\n padding: 1rem;\n cursor: pointer;\n display: block;\n .head{\n margin-bottom: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: inherit;\n .editBtn{\n font-size: 14px;\n font-weight: 700;\n margin-left: 1rem;\n }\n }\n .description{\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n display: -webkit-inline-box;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n color: var(--dark);\n min-height: 68px;\n cursor: inherit;\n }\n"], ["\n border-radius: 8px;\n border: 1px solid ", ";\n background: white;\n padding: 1rem;\n cursor: pointer;\n display: block;\n .head{\n margin-bottom: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: inherit;\n .editBtn{\n font-size: 14px;\n font-weight: 700;\n margin-left: 1rem;\n }\n }\n .description{\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n display: -webkit-inline-box;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n color: var(--dark);\n min-height: 68px;\n cursor: inherit;\n }\n"])), function (props) { return props.checked ? 'var(--primary)' : 'var(--dark-opacity-10)'; });
12
+ exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n border: 1px solid ", ";\n background: white;\n padding: 1rem;\n cursor: pointer;\n display: block;\n .head{\n margin-bottom: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: inherit;\n .editBtn{\n font-size: 14px;\n font-weight: 700;\n line-height: 17px;\n margin-left: 1rem;\n * {\n display: block;\n }\n }\n }\n .description{\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n display: -webkit-inline-box;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n color: var(--dark);\n height: 68px;\n cursor: inherit;\n vertical-align: middle;\n }\n"], ["\n border-radius: 8px;\n border: 1px solid ", ";\n background: white;\n padding: 1rem;\n cursor: pointer;\n display: block;\n .head{\n margin-bottom: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: inherit;\n .editBtn{\n font-size: 14px;\n font-weight: 700;\n line-height: 17px;\n margin-left: 1rem;\n * {\n display: block;\n }\n }\n }\n .description{\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n display: -webkit-inline-box;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n color: var(--dark);\n height: 68px;\n cursor: inherit;\n vertical-align: middle;\n }\n"])), function (props) { return props.checked ? 'var(--primary)' : 'var(--dark-opacity-10)'; });
13
13
  var templateObject_1;
package/dist/components/Button/Button.styled.js CHANGED
@@ -34,7 +34,7 @@ var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1
34
34
  var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n \n\n &:active {\n color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n \n\n &:active {\n color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp, devices_1.devices.md);
35
35
  var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n \n \n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: transparent;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n \n \n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp, devices_1.devices.md);
36
36
  var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary);\n border: 0;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n \n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n color: var(--primary);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: transparent;\n color: var(--primary);\n border: 0;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n \n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n color: var(--primary);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp, devices_1.devices.md);
37
- exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n svg{\n path[stroke-width], rect[stroke-width]{ \n stroke-width: 3px;\n }\n circle[stroke-width]{ \n stroke-width: 3px;\n ~ path[stroke-width]{ \n stroke-width: 3px;\n }\n }\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n svg{\n path[stroke-width], rect[stroke-width]{ \n stroke-width: 3px;\n }\n circle[stroke-width]{ \n stroke-width: 3px;\n ~ path[stroke-width]{ \n stroke-width: 3px;\n }\n }\n }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
37
+ exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n svg{\n path[stroke-width], rect[stroke-width]{ \n stroke-width: 3px;\n }\n circle[stroke-width]{ \n stroke-width: 3px;\n ~ path[stroke-width]{ \n stroke-width: 3px;\n }\n }\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n svg{\n path[stroke-width], rect[stroke-width]{ \n stroke-width: 3px;\n }\n circle[stroke-width]{ \n stroke-width: 3px;\n ~ path[stroke-width]{ \n stroke-width: 3px;\n }\n }\n }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
38
38
  switch (props.variant) {
39
39
  case 'primary':
40
40
  return primary;
package/dist/components/Checkbox/Checkbox.js CHANGED
@@ -20,8 +20,8 @@ var prop_types_1 = __importDefault(require("prop-types"));
20
20
  var classnames_1 = __importDefault(require("classnames"));
21
21
  var Checkbox = function (props) {
22
22
  var _a, _b, _c;
23
- var value = props.value, checked = props.checked, onChange = props.onChange, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid;
24
- return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("label", (_a = {}, _a["caption-semi-bold-12-15"] = size === "small", _a), (_b = {}, _b["body-semi-bold-13-16"] = size === "medium", _b), (_c = {}, _c["body-semi-bold-14-17"] = size === "large", _c)), htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("description", "body-regular-13-16"), htmlFor: id }, { children: description })))] })))] })));
23
+ var value = props.value, checked = props.checked, onChange = props.onChange, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, labelOffset = props.labelOffset;
24
+ return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, labelOffset: labelOffset }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("label", (_a = {}, _a["caption-semi-bold-12-15"] = size === "small", _a), (_b = {}, _b["body-semi-bold-13-16"] = size === "medium", _b), (_c = {}, _c["body-semi-bold-14-17"] = size === "large", _c)), htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("description", "body-regular-13-16"), htmlFor: id }, { children: description })))] })))] })));
25
25
  };
26
26
  exports.default = Checkbox;
27
27
  Checkbox.propTypes = {
@@ -32,8 +32,10 @@ Checkbox.propTypes = {
32
32
  valid: prop_types_1.default.bool,
33
33
  disabled: prop_types_1.default.bool,
34
34
  checked: prop_types_1.default.bool,
35
+ labelOffset: prop_types_1.default.string,
35
36
  };
36
37
  Checkbox.defaultProps = {
37
38
  size: "small",
38
39
  valid: true,
40
+ labelOffset: '0.5rem',
39
41
  };
package/dist/components/Checkbox/Checkbox.styled.js CHANGED
@@ -12,18 +12,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
12
12
  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
- exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex:1;\n position:relative;\n align-items:center;\n justify-content:flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0; \n z-index: -1;\n position: absolute;\n &:checked ~ .indicator{\n background-image:url('", "');\n }\n }\n div.indicator{\n background-image:url('", "');\n background-size:100% 100%;\n display:block;\n position:relative;\n margin: ", ";\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color:", ";\n label.label{\n display:block;\n margin:0;\n }\n label.description{\n display:block;\n margin:0;\n }\n }\n"], ["\n flex:1;\n position:relative;\n align-items:center;\n justify-content:flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0; \n z-index: -1;\n position: absolute;\n &:checked ~ .indicator{\n background-image:url('", "');\n }\n }\n div.indicator{\n background-image:url('", "');\n background-size:100% 100%;\n display:block;\n position:relative;\n margin: ", ";\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color:", ";\n label.label{\n display:block;\n margin:0;\n }\n label.description{\n display:block;\n margin:0;\n }\n }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementInvalid" }))); }, function (props) {
16
- switch (props.size) {
17
- case 'small':
18
- return "0 8px 0 0";
19
- case 'medium':
20
- return "0 8px 0 0";
21
- case 'large':
22
- return "0 16px 0 0";
23
- default:
24
- return "0 16px 0 0";
25
- }
26
- }, function (props) {
15
+ exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex:1;\n position:relative;\n align-items:center;\n justify-content:flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0; \n z-index: -1;\n position: absolute;\n &:checked ~ .indicator{\n background-image:url('", "');\n }\n }\n div.indicator{\n background-image:url('", "');\n background-size:100% 100%;\n display:block;\n position:relative;\n margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color:", ";\n * {\n ", ";\n }\n label.label{\n display:block;\n margin:0;\n }\n label.description{\n display:block;\n margin:0;\n }\n }\n"], ["\n flex:1;\n position:relative;\n align-items:center;\n justify-content:flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0; \n z-index: -1;\n position: absolute;\n &:checked ~ .indicator{\n background-image:url('", "');\n }\n }\n div.indicator{\n background-image:url('", "');\n background-size:100% 100%;\n display:block;\n position:relative;\n margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color:", ";\n * {\n ", ";\n }\n label.label{\n display:block;\n margin:0;\n }\n label.description{\n display:block;\n margin:0;\n }\n }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementInvalid" }))); }, function (props) { return props.labelOffset; }, function (props) {
27
16
  switch (props.size) {
28
17
  case 'small':
29
18
  return "16px";
@@ -45,5 +34,5 @@ exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (
45
34
  default:
46
35
  return "16px";
47
36
  }
48
- }, function (props) { return (props.disabled ? "not-allowed" : "pointer"); }, function (props) { return props.valid ? '#000000' : 'var(--red)'; });
37
+ }, function (props) { return (props.disabled ? "not-allowed" : "pointer"); }, function (props) { return props.valid ? '#000000' : 'var(--red)'; }, function (props) { return !props.valid && 'color:var(--red)'; });
49
38
  var templateObject_1;
package/dist/components/Checkbox/props.js CHANGED
@@ -5,5 +5,6 @@ exports.sizes = ["small", "medium", "large"];
5
5
  var CheckboxDefault = {
6
6
  size: "small",
7
7
  checked: false,
8
- valid: true
8
+ valid: true,
9
+ labelOffset: '0.5rem',
9
10
  };
package/dist/components/Input/Input.styled.js CHANGED
@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.InputStyled = exports.Container = exports.AlertStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 8px;\n background-color: white;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n"], ["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 8px;\n background-color: white;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n"])), function (props) { return props.visible ? '1' : '0'; });
13
- exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n &:hover{\n background-color: var(--primary-opacity-5);\n }\n path{\n stroke:var(--dark-opacity-50);\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n &:hover{\n background-color: var(--primary-opacity-5);\n }\n path{\n stroke:var(--dark-opacity-50);\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n"])), function (props) { return props.width || '370px'; });
13
+ exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n &:hover{\n background-color: var(--primary-opacity-5);\n }\n path{\n stroke:var(--dark-opacity-50);\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n &:hover{\n background-color: var(--primary-opacity-5);\n }\n path{\n stroke:var(--dark-opacity-50);\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n"])), function (props) { return props.width || '370px'; });
14
14
  exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 8px;\n border: ", ";\n padding: ", ";\n color: ", ";\n font-family: var(--font-family-sans-serif);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 17px;\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 8px;\n border: ", ";\n padding: ", ";\n color: ", ";\n font-family: var(--font-family-sans-serif);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 17px;\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
15
15
  var templateObject_1, templateObject_2, templateObject_3;
package/dist/components/InstallmentBox/InstallmentBox.js CHANGED
@@ -18,7 +18,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
18
18
  var InstallmentBox_styled_1 = require("./InstallmentBox.styled");
19
19
  var RadioButton_1 = __importDefault(require("../RadioButton"));
20
20
  var InstallmentBox = function (props) {
21
- return ((0, jsx_runtime_1.jsx)(InstallmentBox_styled_1.InstallmentBoxStyled, __assign({ checked: props.checked }, { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftContent" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onClick: props.onClick, onChange: props.onChange, layout: "basic", label: props.label, checked: props.checked, name: props.name }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "titlesWrapper" }, { children: props.isEqualPrice && (0, jsx_runtime_1.jsx)("strong", __assign({ className: "advance " }, { children: "Pe\u015Fin fiyat\u0131na" })) }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightContent" }, { children: [(0, jsx_runtime_1.jsxs)("strong", __assign({ className: "price" }, { children: [(props.installmentCount !== 1 ? "".concat(props.installmentCount, " x") : null), " ", props.installmentPrice] })), (0, jsx_runtime_1.jsxs)("strong", __assign({ className: "totalPrice" }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "total" }, { children: "Toplam:" })), " ", props.totalPrice] }))] }))] })) }) })));
21
+ return ((0, jsx_runtime_1.jsx)(InstallmentBox_styled_1.InstallmentBoxStyled, __assign({ checked: props.checked }, { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "leftContent" }, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onClick: props.onClick, onChange: props.onChange, layout: "basic", label: ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "installmentLabelWrapper" }, { children: [props.label, (0, jsx_runtime_1.jsx)("div", __assign({ className: "titlesWrapper" }, { children: props.isEqualPrice && (0, jsx_runtime_1.jsx)("strong", __assign({ className: "advance " }, { children: "Pe\u015Fin fiyat\u0131na" })) }))] }))), checked: props.checked, name: props.name, labelOffset: "1rem" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightContent" }, { children: [(0, jsx_runtime_1.jsxs)("strong", __assign({ className: "price" }, { children: [(props.installmentCount !== 1 ? "".concat(props.installmentCount, " x") : null), " ", props.installmentPrice] })), (0, jsx_runtime_1.jsxs)("strong", __assign({ className: "totalPrice" }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "total" }, { children: "Toplam:" })), " ", props.totalPrice] }))] }))] })) }) })));
22
22
  };
23
23
  InstallmentBox.defaultProps = {};
24
24
  exports.default = InstallmentBox;
package/dist/components/InstallmentBox/InstallmentBox.styled.js CHANGED
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.InstallmentBoxStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var devices_1 = require("../../constants/devices");
13
- exports.InstallmentBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n > label {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n border: ", ";\n border-radius: 8px;\n height: 67px;\n cursor: pointer;\n .inner {\n width: 100%;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n @media only screen and ", " {\n padding: 0 1rem;\n }\n .leftContent {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex: 0 0 auto;\n width: auto;\n .titlesWrapper {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: grid;\n row-gap: 0.5rem;\n }\n .advance {\n margin-left: 1rem;\n background: #f5effe;\n border-radius: 3px;\n width: 76px;\n height: 17px;\n display: inline-block;\n text-align: center;\n line-height: 17px;\n font-size: 10px;\n font-weight: 600;\n }\n }\n }\n .rightContent {\n flex: 0 0 auto;\n width: auto;\n text-align: end;\n row-gap: 0.25rem;\n display: grid;\n .price {\n display: block;\n color: var(--dark);\n font-size: 16px;\n font-weight: 700;\n }\n .totalPrice {\n display: block;\n color: var(--dark-opacity-50);\n font-size: 12px;\n font-weight: 600;\n .total {\n @media only screen and ", " {\n display: none;\n }\n }\n }\n }\n }\n }\n"], ["\n display: block;\n > label {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n border: ", ";\n border-radius: 8px;\n height: 67px;\n cursor: pointer;\n .inner {\n width: 100%;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n @media only screen and ", " {\n padding: 0 1rem;\n }\n .leftContent {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex: 0 0 auto;\n width: auto;\n .titlesWrapper {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: grid;\n row-gap: 0.5rem;\n }\n .advance {\n margin-left: 1rem;\n background: #f5effe;\n border-radius: 3px;\n width: 76px;\n height: 17px;\n display: inline-block;\n text-align: center;\n line-height: 17px;\n font-size: 10px;\n font-weight: 600;\n }\n }\n }\n .rightContent {\n flex: 0 0 auto;\n width: auto;\n text-align: end;\n row-gap: 0.25rem;\n display: grid;\n .price {\n display: block;\n color: var(--dark);\n font-size: 16px;\n font-weight: 700;\n }\n .totalPrice {\n display: block;\n color: var(--dark-opacity-50);\n font-size: 12px;\n font-weight: 600;\n .total {\n @media only screen and ", " {\n display: none;\n }\n }\n }\n }\n }\n }\n"])), function (props) { return props.checked ? '2px solid var(--primary)' : '1px solid var(--dark-opacity-10)'; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
13
+ exports.InstallmentBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n > label {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n border: ", ";\n border-radius: 8px;\n height: 67px;\n cursor: pointer;\n .inner {\n width: 100%;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n @media only screen and ", " {\n padding: 0 1rem;\n }\n .leftContent {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex: 0 0 auto;\n width: auto;\n .installmentLabelWrapper{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: block;\n }\n }\n .titlesWrapper {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: grid;\n row-gap: 0.5rem;\n }\n .advance {\n margin-left: 1rem;\n background: #f5effe;\n border-radius: 3px;\n width: 76px;\n height: 17px;\n display: inline-block;\n text-align: center;\n line-height: 17px;\n font-size: 10px;\n font-weight: 600;\n @media only screen and ", " {\n margin-left: 0;\n margin-top: 0.5rem;\n }\n }\n }\n }\n .rightContent {\n flex: 0 0 auto;\n width: auto;\n text-align: end;\n row-gap: 0.25rem;\n display: grid;\n .price {\n display: block;\n color: var(--dark);\n font-size: 16px;\n font-weight: 700;\n }\n .totalPrice {\n display: block;\n color: var(--dark-opacity-50);\n font-size: 12px;\n font-weight: 600;\n .total {\n @media only screen and ", " {\n display: none;\n }\n }\n }\n }\n }\n }\n"], ["\n display: block;\n > label {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n border: ", ";\n border-radius: 8px;\n height: 67px;\n cursor: pointer;\n .inner {\n width: 100%;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n @media only screen and ", " {\n padding: 0 1rem;\n }\n .leftContent {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex: 0 0 auto;\n width: auto;\n .installmentLabelWrapper{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: block;\n }\n }\n .titlesWrapper {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: grid;\n row-gap: 0.5rem;\n }\n .advance {\n margin-left: 1rem;\n background: #f5effe;\n border-radius: 3px;\n width: 76px;\n height: 17px;\n display: inline-block;\n text-align: center;\n line-height: 17px;\n font-size: 10px;\n font-weight: 600;\n @media only screen and ", " {\n margin-left: 0;\n margin-top: 0.5rem;\n }\n }\n }\n }\n .rightContent {\n flex: 0 0 auto;\n width: auto;\n text-align: end;\n row-gap: 0.25rem;\n display: grid;\n .price {\n display: block;\n color: var(--dark);\n font-size: 16px;\n font-weight: 700;\n }\n .totalPrice {\n display: block;\n color: var(--dark-opacity-50);\n font-size: 12px;\n font-weight: 600;\n .total {\n @media only screen and ", " {\n display: none;\n }\n }\n }\n }\n }\n }\n"])), function (props) { return props.checked ? '2px solid var(--primary)' : '1px solid var(--dark-opacity-10)'; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
14
14
  var templateObject_1;
package/dist/components/Modal/Modal.styled.js CHANGED
@@ -12,6 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var devices_1 = require("../../constants/devices");
13
13
  exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n scrollbar-color: var(--dark-opacity-10) white;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\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 .contentInner{\n //height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n flex-direction: ", ";\n gap: ", ";\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: ", ";\n }\n }\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"], ["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n scrollbar-color: var(--dark-opacity-10) white;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\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 .contentInner{\n //height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n flex-direction: ", ";\n gap: ", ";\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: ", ";\n }\n }\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"])), function (props) {
14
14
  switch (props.size) {
15
+ case 'xxsmall':
16
+ return "311px";
15
17
  case 'xsmall':
16
18
  return "343px";
17
19
  case 'small':
package/dist/components/Modal/props.js CHANGED
@@ -2,7 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.iconNames = exports.titleAlignment = exports.alignment = exports.sizes = void 0;
4
4
  var Icon_1 = require("../Icon");
5
- exports.sizes = ['xsmall', 'small', 'medium', 'large'];
5
+ exports.sizes = ['xxsmall', 'xsmall', 'small', 'medium', 'large'];
6
6
  exports.alignment = ['vertical', 'horizontal'];
7
7
  exports.titleAlignment = ['left', 'center'];
8
8
  exports.iconNames = Object.keys(Icon_1.iconList);
package/dist/components/SelectBox/SelectBox.styled.js CHANGED
@@ -12,5 +12,5 @@ var jsx_runtime_1 = require("react/jsx-runtime");
12
12
  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
- exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n \n .top {\n display: flex;\n margin-bottom: 16px;\n &.justify-between {\n justify-content: space-between;\n }\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n\n .select {\n position: relative;\n .customSelect{\n &:is(.lightBg){\n .customSelect__control {\n background-color: white;\n }\n }\n .customSelect__control {\n height: 56px;\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n &:before{\n content: \"\";\n position: absolute;\n inset:0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 8px;\n border-color: ", ";\n }\n\n &:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n\n .customSelect__value-container {\n padding: 0;\n .customSelect__placeholder {\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: ", ";\n margin: 0;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n input {\n font-size: 14px !important;\n font-weight: 600 !important;\n line-height: 17px !important;\n }\n }\n }\n\n .customSelect__indicator {\n padding: 0 0;\n width: 16px;\n height: 100%;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n transition: all .2s ease;\n &:is(.customSelect__dropdown-indicator){\n ", "; \n }\n &:is(.customSelect__clear-indicator){\n background-image: url('", "');\n }\n svg {\n display: none;\n }\n }\n .customSelect__indicator-separator {\n display: none;\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: ", ";\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 24px;\n }\n }\n\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n .customSelect__menu-notice{\n text-align: start;\n padding: 1rem 1.5rem;\n font-size: 14px;\n font-weight: 500;\n color:var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n .customSelect__menu-list {\n padding: 0;\n max-height: ", ";\n //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 {\n background-color: var(--dark-opacity-3);\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n strong{\n color: var(--dark-opacity-50);\n }\n }\n\n strong, span {\n display: block;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n .customSelect__control--menu-is-open {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n box-shadow: none;\n .customSelect__indicator{\n &:is(.customSelect__dropdown-indicator){\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__single-value, .customSelect__clear-indicator {\n display: none !important;\n }\n }\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n \n .top {\n display: flex;\n margin-bottom: 16px;\n &.justify-between {\n justify-content: space-between;\n }\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n\n .select {\n position: relative;\n .customSelect{\n &:is(.lightBg){\n .customSelect__control {\n background-color: white;\n }\n }\n .customSelect__control {\n height: 56px;\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n &:before{\n content: \"\";\n position: absolute;\n inset:0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 8px;\n border-color: ", ";\n }\n\n &:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n\n .customSelect__value-container {\n padding: 0;\n .customSelect__placeholder {\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: ", ";\n margin: 0;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n input {\n font-size: 14px !important;\n font-weight: 600 !important;\n line-height: 17px !important;\n }\n }\n }\n\n .customSelect__indicator {\n padding: 0 0;\n width: 16px;\n height: 100%;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n transition: all .2s ease;\n &:is(.customSelect__dropdown-indicator){\n ", "; \n }\n &:is(.customSelect__clear-indicator){\n background-image: url('", "');\n }\n svg {\n display: none;\n }\n }\n .customSelect__indicator-separator {\n display: none;\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: ", ";\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 24px;\n }\n }\n\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n .customSelect__menu-notice{\n text-align: start;\n padding: 1rem 1.5rem;\n font-size: 14px;\n font-weight: 500;\n color:var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n .customSelect__menu-list {\n padding: 0;\n max-height: ", ";\n //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 {\n background-color: var(--dark-opacity-3);\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n strong{\n color: var(--dark-opacity-50);\n }\n }\n\n strong, span {\n display: block;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n .customSelect__control--menu-is-open {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n box-shadow: none;\n .customSelect__indicator{\n &:is(.customSelect__dropdown-indicator){\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__single-value, .customSelect__clear-indicator {\n display: none !important;\n }\n }\n }\n }\n"])), function (props) { return props.width || '370px'; }, function (props) { return props.hasError ? "2px" : "1px"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark)"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowDown", width: "16px", height: "16px" })), function (props) { return props.hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", width: "16px", height: "16px" })), 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%23FF1F1F%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%23FF1F1F%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')" : "url('".concat((0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })), "')"); }, function (props) { return props.maxOptionListHeight; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })));
15
+ exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n \n .top {\n display: flex;\n margin-bottom: 16px;\n &.justify-between {\n justify-content: space-between;\n }\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n\n .select {\n position: relative;\n .customSelect{\n &:is(.lightBg){\n .customSelect__control {\n background-color: white;\n }\n }\n .customSelect__control {\n height: 56px;\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n &:before{\n content: \"\";\n position: absolute;\n inset:0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 8px;\n border-color: ", ";\n }\n\n &:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n\n .customSelect__value-container {\n padding: 0;\n .customSelect__placeholder {\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: ", ";\n margin: 0;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n input {\n font-size: 14px !important;\n font-weight: 600 !important;\n line-height: 17px !important;\n }\n }\n }\n\n .customSelect__indicator {\n padding: 0 0;\n width: 16px;\n height: 100%;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n transition: all .2s ease;\n &:is(.customSelect__dropdown-indicator){\n ", "; \n }\n &:is(.customSelect__clear-indicator){\n background-image: url('", "');\n }\n svg {\n display: none;\n }\n }\n .customSelect__indicator-separator {\n display: none;\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: ", ";\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n }\n }\n\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n .customSelect__menu-notice{\n text-align: start;\n padding: 1rem 1.5rem;\n font-size: 14px;\n font-weight: 500;\n color:var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n .customSelect__menu-list {\n padding: 0;\n max-height: ", ";\n //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 {\n background-color: var(--dark-opacity-3);\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n strong{\n color: var(--dark-opacity-50);\n }\n }\n\n strong, span {\n display: block;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n .customSelect__control--menu-is-open {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n box-shadow: none;\n .customSelect__indicator{\n &:is(.customSelect__dropdown-indicator){\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__single-value, .customSelect__clear-indicator {\n display: none !important;\n }\n }\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n \n .top {\n display: flex;\n margin-bottom: 16px;\n &.justify-between {\n justify-content: space-between;\n }\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n\n .select {\n position: relative;\n .customSelect{\n &:is(.lightBg){\n .customSelect__control {\n background-color: white;\n }\n }\n .customSelect__control {\n height: 56px;\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n &:before{\n content: \"\";\n position: absolute;\n inset:0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 8px;\n border-color: ", ";\n }\n\n &:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n\n .customSelect__value-container {\n padding: 0;\n .customSelect__placeholder {\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: ", ";\n margin: 0;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n input {\n font-size: 14px !important;\n font-weight: 600 !important;\n line-height: 17px !important;\n }\n }\n }\n\n .customSelect__indicator {\n padding: 0 0;\n width: 16px;\n height: 100%;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n transition: all .2s ease;\n &:is(.customSelect__dropdown-indicator){\n ", "; \n }\n &:is(.customSelect__clear-indicator){\n background-image: url('", "');\n }\n svg {\n display: none;\n }\n }\n .customSelect__indicator-separator {\n display: none;\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: ", ";\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n }\n }\n\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n .customSelect__menu-notice{\n text-align: start;\n padding: 1rem 1.5rem;\n font-size: 14px;\n font-weight: 500;\n color:var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n .customSelect__menu-list {\n padding: 0;\n max-height: ", ";\n //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 {\n background-color: var(--dark-opacity-3);\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n strong{\n color: var(--dark-opacity-50);\n }\n }\n\n strong, span {\n display: block;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n .customSelect__control--menu-is-open {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n box-shadow: none;\n .customSelect__indicator{\n &:is(.customSelect__dropdown-indicator){\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__single-value, .customSelect__clear-indicator {\n display: none !important;\n }\n }\n }\n }\n"])), function (props) { return props.width || '370px'; }, function (props) { return props.hasError ? "2px" : "1px"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark)"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowDown", width: "16px", height: "16px" })), function (props) { return props.hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", width: "16px", height: "16px" })), 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%23FF1F1F%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%23FF1F1F%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')" : "url('".concat((0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })), "')"); }, function (props) { return props.maxOptionListHeight; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })));
16
16
  var templateObject_1;
package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js CHANGED
@@ -25,7 +25,7 @@ var ShoppingCartProduct = function (props) {
25
25
  var item = _a.item, children = _a.children;
26
26
  return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
27
27
  };
28
- return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: props.image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: (0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle title-semi-bold-16-19" }, { children: props.title })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate body-extra-bold-13-16" }, { children: ["%", props.discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && props.discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price caption-semi-bold-12-15" }, { children: props.oldPrice })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period caption-regular-12-15" }, { children: ["/ ", props.oldPricePeriod] }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price body-extra-bold-14-17" }, { children: props.price })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period body-regular-13-16" }, { children: ["/ ", props.period] }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText body-medium-13-16" }, { children: [props.deliveryDangerText && (0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: props.deliveryDangerText })), props.deliveryText] }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actions" }, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "16px", height: "16px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)("popup", "caption-semi-bold-12-15") }, { children: props.errorText }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity body-extra-bold-13-16" }, { children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity })), props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) })))] }))] })), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !props.hasLoading && props.toggleInsurance, className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text caption-semi-bold-12-15" }, { children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", __assign({ className: "price caption-extra-bold-12-15" }, { children: [props.insurancePrice, (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: props.insuranceQuantity }))] }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: props.hasInsuranceTooltipClickAction, popupWidth: props.insuranceTooltipWidth, position: "bottomRight" }, { children: props.insuranceTooltipText }))) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight", width: "24px", height: "24px" }) })))) }))] })))] })));
28
+ return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: props.image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: (0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle title-semi-bold-16-19" }, { children: props.title })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate body-extra-bold-13-16" }, { children: ["%", props.discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price caption-semi-bold-12-15" }, { children: props.oldPrice })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period caption-regular-12-15" }, { children: ["/ ", props.oldPricePeriod] }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price body-extra-bold-14-17" }, { children: props.price })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period body-regular-13-16" }, { children: ["/ ", props.period] }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText body-medium-13-16" }, { children: [props.deliveryDangerText && (0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: props.deliveryDangerText })), props.deliveryText] }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actions" }, { children: [!props.hasDisableActions && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "16px", height: "16px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)("popup", "caption-semi-bold-12-15") }, { children: props.errorText }))] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity body-extra-bold-13-16" }, { children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity })), !props.hasDisableActions && (props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) }))))] }))] })), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !props.hasLoading && props.toggleInsurance, className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text caption-semi-bold-12-15" }, { children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", __assign({ className: "price caption-extra-bold-12-15" }, { children: [props.insurancePrice, (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: props.insuranceQuantity }))] }))] })), props.hasInsuranceActions && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: props.hasInsuranceTooltipClickAction, popupWidth: props.insuranceTooltipWidth, position: "bottomRight" }, { children: props.insuranceTooltipText }))) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight", width: "24px", height: "24px" }) })))) })))] })))] })));
29
29
  };
30
30
  ShoppingCartProduct.defaultProps = {
31
31
  insuranceText: "Tamamlayıcı ek güvence ekle",
@@ -35,6 +35,8 @@ ShoppingCartProduct.defaultProps = {
35
35
  hasInsuranceTooltipClickAction: false,
36
36
  hasError: false,
37
37
  errorText: "Bu üründen daha fazla sepetinize ekleyemezsiniz.",
38
- insuranceTooltipWidth: "178px"
38
+ insuranceTooltipWidth: "178px",
39
+ hasInsuranceActions: true,
40
+ hasDisableActions: false,
39
41
  };
40
42
  exports.default = ShoppingCartProduct;
package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js CHANGED
@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.ActionButton = exports.ShoppingCartProductStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
- exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n }\n .text{\n padding-right: 0.5rem;\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n &:hover{\n color: var(--primary-hover);\n }\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n .productCardDeliveryDanger{\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n }\n\n .newPrice {\n\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: space-between;\n justify-content: center;\n padding: 4px 0;\n .quantity{\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n .price{\n display: block;\n margin: 0;\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n"], ["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n }\n .text{\n padding-right: 0.5rem;\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n &:hover{\n color: var(--primary-hover);\n }\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n .productCardDeliveryDanger{\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n }\n\n .newPrice {\n\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: space-between;\n justify-content: center;\n padding: 4px 0;\n .quantity{\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n .price{\n display: block;\n margin: 0;\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n"])), function (props) { return props.discountRate ? 'center' : 'end'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; });
12
+ exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n }\n .text{\n padding-right: 0.5rem;\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n &:hover{\n color: var(--primary-hover);\n }\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n .productCardDeliveryDanger{\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n }\n\n .newPrice {\n\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n .quantity{\n color: ", ";\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n .price{\n display: block;\n margin: 0;\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n"], ["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n }\n .text{\n padding-right: 0.5rem;\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n &:hover{\n color: var(--primary-hover);\n }\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n .productCardDeliveryDanger{\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n }\n\n .newPrice {\n\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n .quantity{\n color: ", ";\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n .price{\n display: block;\n margin: 0;\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n"])), function (props) { return props.discountRate ? 'center' : 'end'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.hasDisableActions ? 'center' : 'space-between'; }, function (props) { return props.hasDisableActions ? 'var(--grey-50)' : 'var(--dark)'; });
13
13
  exports.ActionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border:0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled{\n cursor: no-drop;\n }\n .popup{\n position: absolute;\n width: 139px;\n padding: 10px;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n svg{\n display: block;\n path, rect{\n stroke : var(--primary);\n transition: all .1s ease;\n }\n }\n &:hover{\n background-color : var(--primary);\n svg{\n path, rect{\n stroke : white;\n }\n }\n }\n"], ["\n border:0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled{\n cursor: no-drop;\n }\n .popup{\n position: absolute;\n width: 139px;\n padding: 10px;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n svg{\n display: block;\n path, rect{\n stroke : var(--primary);\n transition: all .1s ease;\n }\n }\n &:hover{\n background-color : var(--primary);\n svg{\n path, rect{\n stroke : white;\n }\n }\n }\n"])));
14
14
  var templateObject_1, templateObject_2;
package/dist/components/ShoppingCartProduct/stories/ShoppingCartProduct.stories.js CHANGED
@@ -53,6 +53,7 @@ exports.Default = {
53
53
  insuranceQuantity: "",
54
54
  hasInsurance: true,
55
55
  hasInsuranceTooltip: false,
56
+ hasDisableActions: false,
56
57
  insuranceTooltipText: (0, jsx_runtime_1.jsx)("div", { children: "\u00D6nceki kiralaman ek g\u00FCvenceli oldu\u011Fu i\u00E7in, s\u00FCre uzat\u0131rken de ek g\u00FCvencen otomatik olarak eklenir" }),
57
58
  insuranceTooltipWidth: "178px",
58
59
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "krl-alfred",
3
- "version": "1.75.0",
3
+ "version": "1.75.2",
4
4
  "files": [
5
5
  "dist"
6
6
  ],