krl-alfred 2.19.0 → 2.20.0

package/dist/components/QuantitySelector/QuantitySelector.js

@@ -0,0 +1,31 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var props_1 = require("./props");
+var QuantitySelector_styled_1 = require("./QuantitySelector.styled");
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var Loader_1 = __importDefault(require("../Loader"));
+var QuantitySelector = function (_a) {
+    var _b = _a.label, label = _b === void 0 ? props_1.QuantitySelectorDefault.label : _b, _c = _a.id, id = _c === void 0 ? props_1.QuantitySelectorDefault.id : _c, _d = _a.orientation, orientation = _d === void 0 ? props_1.QuantitySelectorDefault.orientation : _d, _e = _a.quantity, quantity = _e === void 0 ? props_1.QuantitySelectorDefault.quantity : _e, _f = _a.onIncrement, onIncrement = _f === void 0 ? props_1.QuantitySelectorDefault.onIncrement : _f, _g = _a.onDecrement, onDecrement = _g === void 0 ? props_1.QuantitySelectorDefault.onDecrement : _g, _h = _a.onRemove, onRemove = _h === void 0 ? props_1.QuantitySelectorDefault.onRemove : _h, _j = _a.hasRemove, hasRemove = _j === void 0 ? props_1.QuantitySelectorDefault.hasRemove : _j, _k = _a.hasLoading, hasLoading = _k === void 0 ? props_1.QuantitySelectorDefault.hasLoading : _k, _l = _a.hasError, hasError = _l === void 0 ? props_1.QuantitySelectorDefault.hasError : _l, _m = _a.errorText, errorText = _m === void 0 ? props_1.QuantitySelectorDefault.errorText : _m, _o = _a.hasDisableActions, hasDisableActions = _o === void 0 ? props_1.QuantitySelectorDefault.hasDisableActions : _o, _p = _a.hasDisableIncrement, hasDisableIncrement = _p === void 0 ? props_1.QuantitySelectorDefault.hasDisableIncrement : _p;
+    var styledProps = {
+        $orientation: orientation,
+        $hasDisableActions: hasDisableActions,
+    };
+    var decrementButton = hasRemove ? ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", disabled: hasLoading, onClick: onRemove }, styledProps, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", disabled: hasLoading, onClick: onDecrement }, styledProps, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall" }) })));
+    return ((0, jsx_runtime_1.jsxs)(QuantitySelector_styled_1.Container, { children: [label && (0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.Label, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(QuantitySelector_styled_1.Controls, __assign({}, styledProps, { children: [!hasDisableActions && ((0, jsx_runtime_1.jsxs)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", disabled: hasLoading || hasError || hasDisableIncrement, onClick: onIncrement }, styledProps, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }), hasError && ((0, jsx_runtime_1.jsx)("div", { className: "popup", dangerouslySetInnerHTML: { __html: errorText } }))] }))), (0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.QuantityValue, __assign({}, styledProps, { children: hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : quantity })), !hasDisableActions && decrementButton] }))] }));
+};
+exports.default = QuantitySelector;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { QuantitySelectorStyledProps } from "./props";
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
+export declare const Controls: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof QuantitySelectorStyledProps> & QuantitySelectorStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof QuantitySelectorStyledProps> & QuantitySelectorStyledProps, never>>> & string;
+export declare const QuantityValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof QuantitySelectorStyledProps> & QuantitySelectorStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof QuantitySelectorStyledProps> & QuantitySelectorStyledProps, never>>> & string;
+export declare const SelectorButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof QuantitySelectorStyledProps> & QuantitySelectorStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof QuantitySelectorStyledProps> & QuantitySelectorStyledProps, never>>> & string;

package/dist/components/QuantitySelector/QuantitySelector.styled.js

@@ -0,0 +1,20 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectorButton = exports.QuantityValue = exports.Controls = exports.Label = exports.Container = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var devices_1 = require("../../constants/devices");
+exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: fit-content;\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: fit-content;\n"])));
+exports.Label = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n    margin: 0 0 1rem;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n"], ["\n    display: block;\n    margin: 0 0 1rem;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n"])));
+exports.Controls = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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: ", ";\n    padding: ", ";\n    width: ", ";\n    height: ", ";\n    grid-auto-flow: ", ";\n    align-items: center;\n"], ["\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: ", ";\n    padding: ", ";\n    width: ", ";\n    height: ", ";\n    grid-auto-flow: ", ";\n    align-items: center;\n"])), function (props) { return props.$hasDisableActions ? 'center' : props.$orientation === 'horizontal' ? 'center' : 'space-between'; }, function (props) { return props.$orientation === 'horizontal' ? 'space-between' : 'center'; }, function (props) { return props.$orientation === 'horizontal' ? '0 4px' : '4px 0'; }, function (props) { return props.$orientation === 'horizontal' ? '92px' : '32px'; }, function (props) { return props.$orientation === 'horizontal' ? '32px' : '92px'; }, function (props) { return props.$orientation === 'horizontal' ? 'column' : 'row'; });
+exports.QuantityValue = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    font: ", ";\n\n    > div {\n        margin: 0 auto;\n    }\n"], ["\n    color: ", ";\n    font: ", ";\n\n    > div {\n        margin: 0 auto;\n    }\n"])), function (props) { return props.$hasDisableActions ? 'var(--grey-50)' : 'var(--dark)'; }, function (props) { return props.$orientation === 'horizontal'
+    ? 'var(--body-extra-bold-14-17)'
+    : 'var(--body-extra-bold-13-16)'; });
+exports.SelectorButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __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    color: var(--primary);\n    flex-shrink: 0;\n\n    ", "\n\n    &:disabled {\n        cursor: no-drop;\n        background-color: white !important;\n        color: var(--grey-50) !important;\n    }\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: 1;\n        user-select: none;\n        pointer-events: none;\n        transition: all .1s ease;\n        text-align: center;\n        font: var(--caption-semi-bold-12-15);\n\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\n    @media only screen and ", " {\n        &:hover:not(:disabled) {\n            background-color: var(--primary);\n            color: white;\n        }\n    }\n\n    &:active:not(:disabled) {\n        color: white;\n        background-color: var(--primary);\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    color: var(--primary);\n    flex-shrink: 0;\n\n    ", "\n\n    &:disabled {\n        cursor: no-drop;\n        background-color: white !important;\n        color: var(--grey-50) !important;\n    }\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: 1;\n        user-select: none;\n        pointer-events: none;\n        transition: all .1s ease;\n        text-align: center;\n        font: var(--caption-semi-bold-12-15);\n\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\n    @media only screen and ", " {\n        &:hover:not(:disabled) {\n            background-color: var(--primary);\n            color: white;\n        }\n    }\n\n    &:active:not(:disabled) {\n        color: white;\n        background-color: var(--primary);\n    }\n"])), function (props) { return props.$hasShadow ? "\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    " : ""; }, devices_1.devices.mdUp);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/QuantitySelector/index.d.ts

@@ -0,0 +1 @@
+export { default } from './QuantitySelector';

package/dist/components/QuantitySelector/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var QuantitySelector_1 = require("./QuantitySelector");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(QuantitySelector_1).default; } });

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

@@ -0,0 +1,25 @@
+export declare const orientations: readonly ["horizontal", "vertical"];
+type ORIENTATION = (typeof orientations)[number];
+export interface QuantitySelector {
+    label?: string;
+    id?: string;
+    orientation?: ORIENTATION;
+    quantity?: string | number;
+    onIncrement?(): void;
+    onDecrement?(): void;
+    onRemove?(): void;
+    hasRemove?: boolean;
+    hasLoading?: boolean;
+    hasError?: boolean;
+    errorText?: string;
+    hasDisableActions?: boolean;
+    hasDisableIncrement?: boolean;
+}
+export interface QuantitySelectorStyledProps {
+    $orientation?: ORIENTATION;
+    $hasDisableActions?: boolean;
+    $hasShadow?: boolean;
+}
+export declare const QuantitySelectorDefault: QuantitySelector;
+export type QuantitySelectorProps = typeof QuantitySelectorDefault;
+export {};

package/dist/components/QuantitySelector/props.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuantitySelectorDefault = exports.orientations = void 0;
+exports.orientations = ['horizontal', 'vertical'];
+exports.QuantitySelectorDefault = {
+    label: null,
+    id: null,
+    orientation: 'vertical',
+    quantity: null,
+    onIncrement: null,
+    onDecrement: null,
+    onRemove: null,
+    hasRemove: false,
+    hasLoading: false,
+    hasError: false,
+    errorText: null,
+    hasDisableActions: false,
+    hasDisableIncrement: false,
+};

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

@@ -0,0 +1,90 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: ({ label, id, orientation, quantity, onIncrement, onDecrement, onRemove, hasRemove, hasLoading, hasError, errorText, hasDisableActions, hasDisableIncrement, }: import("../props").QuantitySelector) => React.JSX.Element;
+    tags: string[];
+    argTypes: {
+        orientation: {
+            control: string;
+            options: readonly ["horizontal", "vertical"];
+        };
+        hasRemove: {
+            control: string;
+        };
+        hasLoading: {
+            control: string;
+        };
+        hasError: {
+            control: string;
+        };
+        hasDisableActions: {
+            control: string;
+        };
+        hasDisableIncrement: {
+            control: string;
+        };
+        onIncrement: {
+            action: string;
+        };
+        onDecrement: {
+            action: string;
+        };
+        onRemove: {
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Horizontal: {
+    args: {
+        orientation: string;
+        quantity: number;
+        label: string;
+        id: string;
+    };
+};
+export declare const Vertical: {
+    args: {
+        orientation: string;
+        label: any;
+        quantity: number;
+        id: string;
+    };
+};
+export declare const WithRemove: {
+    args: {
+        orientation: string;
+        hasRemove: boolean;
+        quantity: number;
+        label: string;
+        id: string;
+    };
+};
+export declare const DisabledActions: {
+    args: {
+        orientation: string;
+        hasDisableActions: boolean;
+        quantity: number;
+        label: string;
+        id: string;
+    };
+};
+export declare const WithError: {
+    args: {
+        orientation: string;
+        hasError: boolean;
+        errorText: string;
+        quantity: number;
+        label: string;
+        id: string;
+    };
+};
+export declare const Loading: {
+    args: {
+        orientation: string;
+        hasLoading: boolean;
+        quantity: number;
+        label: string;
+        id: string;
+    };
+};

package/dist/components/QuantitySelector/stories/QuantitySelector.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = exports.WithError = exports.DisabledActions = exports.WithRemove = exports.Vertical = exports.Horizontal = void 0;
+var QuantitySelector_1 = __importDefault(require("../QuantitySelector"));
+var props_1 = require("../props");
+exports.default = {
+    title: 'Components/QuantitySelector',
+    component: QuantitySelector_1.default,
+    tags: ['autodocs'],
+    argTypes: {
+        orientation: { control: 'select', options: props_1.orientations },
+        hasRemove: { control: 'boolean' },
+        hasLoading: { control: 'boolean' },
+        hasError: { control: 'boolean' },
+        hasDisableActions: { control: 'boolean' },
+        hasDisableIncrement: { control: 'boolean' },
+        onIncrement: { action: 'incremented' },
+        onDecrement: { action: 'decremented' },
+        onRemove: { action: 'removed' },
+    },
+};
+var defaultArgs = {
+    quantity: 10,
+    label: 'Miktar seç',
+    id: 'quantity-selector',
+};
+exports.Horizontal = {
+    args: __assign(__assign({}, defaultArgs), { orientation: 'horizontal' }),
+};
+exports.Vertical = {
+    args: __assign(__assign({}, defaultArgs), { orientation: 'vertical', label: null }),
+};
+exports.WithRemove = {
+    args: __assign(__assign({}, defaultArgs), { orientation: 'horizontal', hasRemove: true }),
+};
+exports.DisabledActions = {
+    args: __assign(__assign({}, defaultArgs), { orientation: 'horizontal', hasDisableActions: true, quantity: 1 }),
+};
+exports.WithError = {
+    args: __assign(__assign({}, defaultArgs), { orientation: 'vertical', hasError: true, errorText: 'Stokta yok' }),
+};
+exports.Loading = {
+    args: __assign(__assign({}, defaultArgs), { orientation: 'horizontal', hasLoading: true }),
+};

package/dist/components/RadioButton/layouts/basic/Basic.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RadioButtonProps } from "./../../props";
-declare const Basic: ({ value, checked, onChange, onClick, name, id, label, disabled, size, description, valid, labelOffset, hasNoneClick, color, alignment, textSize, verticalAlign, isWrapText, readOnly, showIndicator, }: RadioButtonProps) => React.JSX.Element;
+declare const Basic: ({ value, checked, onChange, onClick, name, id, label, disabled, size, description, valid, labelOffset, hasNoneClick, alignment, textSize, verticalAlign, isWrapText, readOnly, showIndicator, }: RadioButtonProps) => React.JSX.Element;
 export default Basic;

package/dist/components/RadioButton/layouts/basic/Basic.js

@@ -12,15 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
 var props_1 = require("./../../props");
+var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var Basic_styled_1 = require("./Basic.styled");
 var Basic = function (_a) {
-    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, _b = _a.id, id = _b === void 0 ? props_1.BasicDefault.id : _b, label = _a.label, disabled = _a.disabled, _c = _a.size, size = _c === void 0 ? props_1.BasicDefault.size : _c, description = _a.description, _d = _a.valid, valid = _d === void 0 ? props_1.BasicDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BasicDefault.labelOffset : _e, _f = _a.hasNoneClick, hasNoneClick = _f === void 0 ? props_1.BasicDefault.hasNoneClick : _f, _g = _a.color, color = _g === void 0 ? props_1.BasicDefault.color : _g, _h = _a.alignment, alignment = _h === void 0 ? props_1.BasicDefault.alignment : _h, _j = _a.textSize, textSize = _j === void 0 ? props_1.BasicDefault.textSize : _j, _k = _a.verticalAlign, verticalAlign = _k === void 0 ? props_1.BasicDefault.verticalAlign : _k, isWrapText = _a.isWrapText, readOnly = _a.readOnly, _l = _a.showIndicator, showIndicator = _l === void 0 ? true : _l;
-    var _m = (0, react_1.useState)(color), inputColor = _m[0], setInputColor = _m[1];
-    (0, react_1.useEffect)(function () {
-        setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
-    });
+    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, _b = _a.id, id = _b === void 0 ? props_1.BasicDefault.id : _b, label = _a.label, disabled = _a.disabled, _c = _a.size, size = _c === void 0 ? props_1.BasicDefault.size : _c, description = _a.description, _d = _a.valid, valid = _d === void 0 ? props_1.BasicDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BasicDefault.labelOffset : _e, _f = _a.hasNoneClick, hasNoneClick = _f === void 0 ? props_1.BasicDefault.hasNoneClick : _f, _g = _a.alignment, alignment = _g === void 0 ? props_1.BasicDefault.alignment : _g, _h = _a.textSize, textSize = _h === void 0 ? props_1.BasicDefault.textSize : _h, _j = _a.verticalAlign, verticalAlign = _j === void 0 ? props_1.BasicDefault.verticalAlign : _j, isWrapText = _a.isWrapText, readOnly = _a.readOnly, _k = _a.showIndicator, showIndicator = _k === void 0 ? true : _k;
     var styledProps = {
         $disabled: disabled,
         $checked: checked,
@@ -30,7 +26,7 @@ var Basic = function (_a) {
         $hasNoneClick: hasNoneClick,
         $isWrapText: isWrapText,
         $readOnly: readOnly,
-        $color: inputColor,
+        $color: (0, getRootCssVariable_1.getRadioPrimaryColor)(),
         $alignment: alignment,
         $textSize: textSize,
         $verticalAlign: verticalAlign,

package/dist/components/RadioButton/layouts/boxed/Boxed.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RadioButtonProps } from "./../../props";
-declare const Boxed: ({ value, checked, onChange, onClick, name, label, disabled, description, image, hasBadge, badgeText, badgeVariant, labelSm, readOnly, id, size, valid, labelOffset, textSize, color, showIndicator, }: RadioButtonProps) => React.JSX.Element;
+declare const Boxed: ({ value, checked, onChange, onClick, name, label, disabled, description, image, hasBadge, badgeText, badgeVariant, labelSm, readOnly, id, size, valid, labelOffset, textSize, showIndicator, }: RadioButtonProps) => React.JSX.Element;
 export default Boxed;

package/dist/components/RadioButton/layouts/boxed/Boxed.js

@@ -15,16 +15,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
 var props_1 = require("./../../props");
+var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var Boxed_styled_1 = require("./Boxed.styled");
 var Badges_1 = __importDefault(require("../../../Badges"));
 var Boxed = function (_a) {
-    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, hasBadge = _a.hasBadge, badgeText = _a.badgeText, badgeVariant = _a.badgeVariant, labelSm = _a.labelSm, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.color, color = _g === void 0 ? props_1.BoxedDefault.color : _g, _h = _a.showIndicator, showIndicator = _h === void 0 ? true : _h;
-    var _j = (0, react_1.useState)(color), inputColor = _j[0], setInputColor = _j[1];
-    (0, react_1.useEffect)(function () {
-        setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
-    });
+    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, hasBadge = _a.hasBadge, badgeText = _a.badgeText, badgeVariant = _a.badgeVariant, labelSm = _a.labelSm, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.showIndicator, showIndicator = _g === void 0 ? true : _g;
     var styledProps = {
         $disabled: disabled,
         $checked: checked,
@@ -32,7 +28,7 @@ var Boxed = function (_a) {
         $valid: valid,
         $labelOffset: labelOffset,
         $readOnly: readOnly,
-        $color: inputColor,
+        $color: (0, getRootCssVariable_1.getRadioPrimaryColor)(),
         $textSize: textSize,
     };
     return ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.BoxedStyled, __assign({ htmlFor: id }, styledProps, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick, readOnly: readOnly }), showIndicator && (0, jsx_runtime_1.jsx)(Boxed_styled_1.Indicator, __assign({}, styledProps)), (label || description || image) && ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.LabelsWrapper, __assign({}, styledProps, { children: [label && ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.LabelText, __assign({ htmlFor: id }, { children: [label, labelSm && (0, jsx_runtime_1.jsx)(Boxed_styled_1.LabelSm, { children: labelSm })] }))), description && ((0, jsx_runtime_1.jsx)(Boxed_styled_1.DescriptionText, __assign({ htmlFor: id }, { children: description }))), image && ((0, jsx_runtime_1.jsx)(Boxed_styled_1.ImageLabel, __assign({ htmlFor: id }, { children: image })))] }))), hasBadge && ((0, jsx_runtime_1.jsx)(Boxed_styled_1.BoxedBadgesWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "belt", variant: badgeVariant, hasResponsive: true }) }))] })));

package/dist/components/RadioButton/layouts/boxedMd/BoxedMd.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { RadioButtonProps } from "./../../props";
-declare const BoxedMd: ({ value, checked, onChange, onClick, name, label, disabled, description, image, readOnly, id, size, valid, labelOffset, textSize, color, showIndicator, }: RadioButtonProps) => import("react").JSX.Element;
+declare const BoxedMd: ({ value, checked, onChange, onClick, name, label, disabled, description, image, readOnly, id, size, valid, labelOffset, textSize, showIndicator, }: RadioButtonProps) => import("react").JSX.Element;
 export default BoxedMd;

package/dist/components/RadioButton/layouts/boxedMd/BoxedMd.js

@@ -12,15 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
 var props_1 = require("./../../props");
+var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var BoxedMd_styled_1 = require("./BoxedMd.styled");
 var BoxedMd = function (_a) {
-    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.color, color = _g === void 0 ? props_1.BoxedDefault.color : _g, _h = _a.showIndicator, showIndicator = _h === void 0 ? true : _h;
-    var _j = (0, react_1.useState)(color), inputColor = _j[0], setInputColor = _j[1];
-    (0, react_1.useEffect)(function () {
-        setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
-    });
+    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.showIndicator, showIndicator = _g === void 0 ? true : _g;
     var styledProps = {
         $disabled: disabled,
         $checked: checked,
@@ -28,7 +24,7 @@ var BoxedMd = function (_a) {
         $valid: valid,
         $labelOffset: labelOffset,
         $readOnly: readOnly,
-        $color: inputColor,
+        $color: (0, getRootCssVariable_1.getRadioPrimaryColor)(),
         $textSize: textSize,
         $showIndicator: showIndicator,
     };

package/dist/components/RadioButton/layouts/boxedSm/BoxedSm.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { RadioButtonProps } from "./../../props";
-declare const BoxedSm: ({ value, checked, onChange, onClick, name, label, disabled, description, image, readOnly, id, size, valid, labelOffset, textSize, color, showIndicator, }: RadioButtonProps) => import("react").JSX.Element;
+declare const BoxedSm: ({ value, checked, onChange, onClick, name, label, disabled, description, image, readOnly, id, size, valid, labelOffset, textSize, showIndicator, }: RadioButtonProps) => import("react").JSX.Element;
 export default BoxedSm;

package/dist/components/RadioButton/layouts/boxedSm/BoxedSm.js

@@ -12,15 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
 var props_1 = require("./../../props");
+var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var BoxedSm_styled_1 = require("./BoxedSm.styled");
 var BoxedSm = function (_a) {
-    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.color, color = _g === void 0 ? props_1.BoxedDefault.color : _g, _h = _a.showIndicator, showIndicator = _h === void 0 ? true : _h;
-    var _j = (0, react_1.useState)(color), inputColor = _j[0], setInputColor = _j[1];
-    (0, react_1.useEffect)(function () {
-        setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
-    });
+    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, description = _a.description, image = _a.image, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? props_1.BoxedDefault.textSize : _f, _g = _a.showIndicator, showIndicator = _g === void 0 ? true : _g;
     var styledProps = {
         $disabled: disabled,
         $checked: checked,
@@ -28,7 +24,7 @@ var BoxedSm = function (_a) {
         $valid: valid,
         $labelOffset: labelOffset,
         $readOnly: readOnly,
-        $color: inputColor,
+        $color: (0, getRootCssVariable_1.getRadioPrimaryColor)(),
         $textSize: textSize,
         $showIndicator: showIndicator,
     };

package/dist/components/RadioButton/layouts/boxedWithIcon/BoxedWithIcon.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RadioButtonProps } from "../../props";
-declare const BoxedWithIcon: ({ value, checked, onChange, onClick, name, label, disabled, readOnly, id, size, valid, labelOffset, color, textSize, iconName, iconColor, content }: RadioButtonProps) => React.JSX.Element;
+declare const BoxedWithIcon: ({ value, checked, onChange, onClick, name, label, disabled, readOnly, id, size, valid, labelOffset, textSize, iconName, iconColor, content }: RadioButtonProps) => React.JSX.Element;
 export default BoxedWithIcon;

package/dist/components/RadioButton/layouts/boxedWithIcon/BoxedWithIcon.js

@@ -15,19 +15,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
 var props_1 = require("../../props");
+var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
 var BoxedWithIcon_styled_1 = require("./BoxedWithIcon.styled");
 var BoxedWithIcon = function (_a) {
-    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedWithIconDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedWithIconDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedWithIconDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedWithIconDefault.labelOffset : _e, _f = _a.color, color = _f === void 0 ? props_1.BoxedWithIconDefault.color : _f, _g = _a.textSize, textSize = _g === void 0 ? "medium" : _g, iconName = _a.iconName, iconColor = _a.iconColor, content = _a.content;
-    var _h = (0, react_1.useState)(color), inputColor = _h[0], setInputColor = _h[1];
-    (0, react_1.useEffect)(function () {
-        var primaryColor = typeof window !== "undefined"
-            ? window.getComputedStyle(document.body).getPropertyValue("--primary").trim() || "#9763F6"
-            : "#9763F6";
-        setInputColor(color || primaryColor);
-    }, [color]);
-    return ((0, jsx_runtime_1.jsxs)(BoxedWithIcon_styled_1.BoxedWithIconStyled, __assign({ htmlFor: id, "$disabled": disabled, "$checked": checked, "$size": size, "$valid": valid, "$readOnly": readOnly, "$color": inputColor }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick, readOnly: readOnly }), (0, jsx_runtime_1.jsxs)(BoxedWithIcon_styled_1.ContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(BoxedWithIcon_styled_1.Header, { children: [iconName && ((0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: iconName, color: iconColor, hasWrapper: false, width: "32", height: "32" }) })), label && (0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Indicator, { "$disabled": disabled, "$valid": valid })] }), content && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Separator, {}), (0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Content, { children: content })] }))] })] })));
+    var value = _a.value, checked = _a.checked, onChange = _a.onChange, onClick = _a.onClick, name = _a.name, label = _a.label, disabled = _a.disabled, readOnly = _a.readOnly, _b = _a.id, id = _b === void 0 ? props_1.BoxedWithIconDefault.id : _b, _c = _a.size, size = _c === void 0 ? props_1.BoxedWithIconDefault.size : _c, _d = _a.valid, valid = _d === void 0 ? props_1.BoxedWithIconDefault.valid : _d, _e = _a.labelOffset, labelOffset = _e === void 0 ? props_1.BoxedWithIconDefault.labelOffset : _e, _f = _a.textSize, textSize = _f === void 0 ? "medium" : _f, iconName = _a.iconName, iconColor = _a.iconColor, content = _a.content;
+    return ((0, jsx_runtime_1.jsxs)(BoxedWithIcon_styled_1.BoxedWithIconStyled, __assign({ htmlFor: id, "$disabled": disabled, "$checked": checked, "$size": size, "$valid": valid, "$readOnly": readOnly, "$color": (0, getRootCssVariable_1.getRadioPrimaryColor)() }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick, readOnly: readOnly }), (0, jsx_runtime_1.jsxs)(BoxedWithIcon_styled_1.ContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(BoxedWithIcon_styled_1.Header, { children: [iconName && ((0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: iconName, color: iconColor, hasWrapper: false, width: "32", height: "32" }) })), label && (0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Indicator, { "$disabled": disabled, "$valid": valid })] }), content && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Separator, {}), (0, jsx_runtime_1.jsx)(BoxedWithIcon_styled_1.Content, { children: content })] }))] })] })));
 };
 exports.default = BoxedWithIcon;

package/dist/components/RadioButton/layouts/horizontal/Horizontal.js

@@ -15,16 +15,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var getRootCssVariable_1 = require("../../../../utils/getRootCssVariable");
 var Badges_1 = __importDefault(require("../../../Badges"));
 var Horizontal_styled_1 = require("./Horizontal.styled");
 var Horizontal = function (props) {
-    var label = props.label, description = props.description, id = props.id, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, value = props.value, price = props.price, priceDesc = props.priceDesc, hasTitleBadge = props.hasTitleBadge, titleBadgeLayout = props.titleBadgeLayout, titleBadgeText = props.titleBadgeText, _a = props.titleBadgePosition, titleBadgePosition = _a === void 0 ? "inline" : _a, hasPriceBadge = props.hasPriceBadge, priceBadgeLayout = props.priceBadgeLayout, priceBadgeText = props.priceBadgeText, _b = props.labelOffset, labelOffset = _b === void 0 ? "1rem" : _b, disabled = props.disabled, _c = props.valid, valid = _c === void 0 ? true : _c, color = props.color, _d = props.showIndicator, showIndicator = _d === void 0 ? true : _d;
+    var label = props.label, description = props.description, id = props.id, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, value = props.value, price = props.price, priceDesc = props.priceDesc, hasTitleBadge = props.hasTitleBadge, titleBadgeLayout = props.titleBadgeLayout, titleBadgeText = props.titleBadgeText, _a = props.titleBadgePosition, titleBadgePosition = _a === void 0 ? "inline" : _a, hasPriceBadge = props.hasPriceBadge, priceBadgeLayout = props.priceBadgeLayout, priceBadgeText = props.priceBadgeText, _b = props.labelOffset, labelOffset = _b === void 0 ? "1rem" : _b, disabled = props.disabled, _c = props.valid, valid = _c === void 0 ? true : _c, _d = props.showIndicator, showIndicator = _d === void 0 ? true : _d;
     var titleBadgeBelow = titleBadgePosition === "below";
     var styledProps = {
         checked: checked,
         $disabled: disabled,
         $valid: valid,
-        $color: color,
+        $color: (0, getRootCssVariable_1.getRadioPrimaryColor)(),
         $labelOffset: labelOffset,
         $titleBadgeBelow: titleBadgeBelow,
     };

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js

@@ -21,6 +21,8 @@ var ShoppingCartProduct_styled_1 = require("./ShoppingCartProduct.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Tooltip_1 = __importDefault(require("../Tooltip"));
 var Loader_1 = __importDefault(require("../Loader"));
+var QuantitySelector_1 = __importDefault(require("../QuantitySelector"));
+var QuantitySelector_styled_1 = require("../QuantitySelector/QuantitySelector.styled");
 var ShoppingCartProduct = function (_a) {
     var _b = _a.title, title = _b === void 0 ? props_1.ShoppingCartProductDefault.title : _b, _c = _a.priceSm, priceSm = _c === void 0 ? props_1.ShoppingCartProductDefault.priceSm : _c, _d = _a.price, price = _d === void 0 ? props_1.ShoppingCartProductDefault.price : _d, _e = _a.period, period = _e === void 0 ? props_1.ShoppingCartProductDefault.period : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ShoppingCartProductDefault.oldPrice : _f, _g = _a.oldPriceSm, oldPriceSm = _g === void 0 ? props_1.ShoppingCartProductDefault.oldPriceSm : _g, _h = _a.oldPricePeriod, oldPricePeriod = _h === void 0 ? props_1.ShoppingCartProductDefault.oldPricePeriod : _h, _j = _a.discountRate, discountRate = _j === void 0 ? props_1.ShoppingCartProductDefault.discountRate : _j, _k = _a.slug, slug = _k === void 0 ? props_1.ShoppingCartProductDefault.slug : _k, _l = _a.image, image = _l === void 0 ? props_1.ShoppingCartProductDefault.image : _l, _m = _a.component, component = _m === void 0 ? props_1.ShoppingCartProductDefault.component : _m, _o = _a.hasRemove, hasRemove = _o === void 0 ? props_1.ShoppingCartProductDefault.hasRemove : _o, _p = _a.hasInsurance, hasInsurance = _p === void 0 ? props_1.ShoppingCartProductDefault.hasInsurance : _p, _q = _a.insuranceType, insuranceType = _q === void 0 ? props_1.ShoppingCartProductDefault.insuranceType : _q, _r = _a.insuranceText, insuranceText = _r === void 0 ? props_1.ShoppingCartProductDefault.insuranceText : _r, _s = _a.insurancePrice, insurancePrice = _s === void 0 ? props_1.ShoppingCartProductDefault.insurancePrice : _s, _t = _a.insuranceQuantity, insuranceQuantity = _t === void 0 ? props_1.ShoppingCartProductDefault.insuranceQuantity : _t, _u = _a.insuranceOption1Title, insuranceOption1Title = _u === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1Title : _u, _v = _a.insuranceOption1Description, insuranceOption1Description = _v === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1Description : _v, _w = _a.insuranceOption1Price, insuranceOption1Price = _w === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1Price : _w, _x = _a.insuranceOption1PricePeriod, insuranceOption1PricePeriod = _x === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1PricePeriod : _x, _y = _a.hasInsuranceOption1PriceLoading, hasInsuranceOption1PriceLoading = _y === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceOption1PriceLoading : _y, _z = _a.insuranceOption1TooltipText, insuranceOption1TooltipText = _z === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1TooltipText : _z, _0 = _a.insuranceOption2Title, insuranceOption2Title = _0 === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption2Title : _0, _1 = _a.insuranceOption2Description, insuranceOption2Description = _1 === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption2Description : _1, _2 = _a.selectedInsuranceOption, selectedInsuranceOption = _2 === void 0 ? props_1.ShoppingCartProductDefault.selectedInsuranceOption : _2, _3 = _a.onInsuranceOptionSelect, onInsuranceOptionSelect = _3 === void 0 ? props_1.ShoppingCartProductDefault.onInsuranceOptionSelect : _3, _4 = _a.deliveryText, deliveryText = _4 === void 0 ? props_1.ShoppingCartProductDefault.deliveryText : _4, _5 = _a.quantity, quantity = _5 === void 0 ? props_1.ShoppingCartProductDefault.quantity : _5, _6 = _a.hasLoading, hasLoading = _6 === void 0 ? props_1.ShoppingCartProductDefault.hasLoading : _6, _7 = _a.deliveryDangerText, deliveryDangerText = _7 === void 0 ? props_1.ShoppingCartProductDefault.deliveryDangerText : _7, _8 = _a.hasError, hasError = _8 === void 0 ? props_1.ShoppingCartProductDefault.hasError : _8, _9 = _a.errorText, errorText = _9 === void 0 ? props_1.ShoppingCartProductDefault.errorText : _9, _10 = _a.hasInsuranceActions, hasInsuranceActions = _10 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceActions : _10, _11 = _a.hasInsuranceTooltip, hasInsuranceTooltip = _11 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceTooltip : _11, _12 = _a.hasDisableActions, hasDisableActions = _12 === void 0 ? props_1.ShoppingCartProductDefault.hasDisableActions : _12, _13 = _a.hasInsuranceTooltipClickAction, hasInsuranceTooltipClickAction = _13 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceTooltipClickAction : _13, _14 = _a.insuranceTooltipText, insuranceTooltipText = _14 === void 0 ? props_1.ShoppingCartProductDefault.insuranceTooltipText : _14, _15 = _a.insuranceTooltipWidth, insuranceTooltipWidth = _15 === void 0 ? props_1.ShoppingCartProductDefault.insuranceTooltipWidth : _15, _16 = _a.onRemove, onRemove = _16 === void 0 ? props_1.ShoppingCartProductDefault.onRemove : _16, _17 = _a.onIncrement, onIncrement = _17 === void 0 ? props_1.ShoppingCartProductDefault.onIncrement : _17, _18 = _a.onDecrement, onDecrement = _18 === void 0 ? props_1.ShoppingCartProductDefault.onDecrement : _18, _19 = _a.toggleInsurance, toggleInsurance = _19 === void 0 ? props_1.ShoppingCartProductDefault.toggleInsurance : _19, _20 = _a.toggleInsuranceLogo, toggleInsuranceLogo = _20 === void 0 ? props_1.ShoppingCartProductDefault.toggleInsuranceLogo : _20, _21 = _a.hasInsurancePriceAdded, hasInsurancePriceAdded = _21 === void 0 ? props_1.ShoppingCartProductDefault.hasInsurancePriceAdded : _21, _22 = _a.hasInsuranceLoading, hasInsuranceLoading = _22 === void 0 ? props_1.ShoppingCartProductDefault.hasInsuranceLoading : _22, _23 = _a.hasDisableIncrement, hasDisableIncrement = _23 === void 0 ? props_1.ShoppingCartProductDefault.hasDisableIncrement : _23, _24 = _a.insuranceOption1TooltipTitle, insuranceOption1TooltipTitle = _24 === void 0 ? props_1.ShoppingCartProductDefault.insuranceOption1TooltipTitle : _24;
     var tooltipWrapperRef = (0, react_1.useRef)(null);
@@ -49,6 +51,6 @@ var ShoppingCartProduct = function (_a) {
         return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
     };
     return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({ "$discountRate": discountRate, "$hasDisableActions": hasDisableActions, "$hasInsurance": !hasLoading && insuranceType === 1 && toggleInsurance, "$insuranceType": insuranceType }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: image })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "price" }, { children: [oldPrice, oldPriceSm && (0, jsx_runtime_1.jsx)("small", { children: oldPriceSm })] })), oldPricePeriod && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "price" }, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] })), period && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText" }, { children: [deliveryDangerText &&
-                                            (0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: deliveryDangerText })), deliveryText] }))] })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actions" }, { children: [!hasDisableActions && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: hasLoading || hasError || hasDisableIncrement, onClick: onIncrement, className: "actionButton" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }), hasError && (0, jsx_runtime_1.jsx)("div", { className: "popup", dangerouslySetInnerHTML: { __html: errorText } })] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity" }, { children: hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : quantity })), !hasDisableActions && (hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: hasLoading, onClick: onRemove, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: hasLoading, onClick: onDecrement, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall" }) }))))] }))] })), hasInsurance && insuranceType === 1 && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg", onClick: !hasLoading ? toggleInsuranceLogo : undefined }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !hasLoading ? toggleInsurance : undefined, className: "insuranceContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [insuranceText, insurancePrice && (0, jsx_runtime_1.jsx)("p", __assign({ className: "price" }, { children: hasInsuranceLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("b", { dangerouslySetInnerHTML: { __html: insurancePrice } }), (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: insuranceQuantity }))] }) }))] })), hasInsuranceActions && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: hasInsuranceTooltipClickAction, popupWidth: insuranceTooltipWidth, position: "bottomRight" }, { children: insuranceTooltipText }))) : (hasInsurancePriceAdded ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ "$hasShadow": true, disabled: hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ "$hasShadow": true, disabled: hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }) })))) })))] }))] }))), hasInsurance && insuranceType === 2 && !hasLoading && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Wrapper, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Card, __assign({ "$selected": selectedInsuranceOption === 1 }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "insurance-option", checked: selectedInsuranceOption === 1, onChange: function () { return onInsuranceOptionSelect === null || onInsuranceOptionSelect === void 0 ? void 0 : onInsuranceOptionSelect(1); } }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Header, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Indicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Title, { children: insuranceOption1Title }), insuranceOption1TooltipText && ((0, jsx_runtime_1.jsx)("label", __assign({ ref: tooltipWrapperRef, htmlFor: "insurance-option-1-tooltip", onClick: handleTooltipWrapperClick, onMouseDown: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", popupWidth: "302px", position: "bottomRight", iconWidth: "24px", iconHeight: "24px", title: insuranceOption1TooltipTitle, popupSize: "medium", hasClickAction: hasInsuranceTooltipClickAction }, { children: insuranceOption1TooltipText })) })))] }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Content, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Description, { children: insuranceOption1Description }), (insuranceOption1Price || hasInsuranceOption1PriceLoading) && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Price, { children: hasInsuranceOption1PriceLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2PriceValue, { children: insuranceOption1Price }), insuranceOption1PricePeriod && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2PricePeriod, { children: [" ", insuranceOption1PricePeriod] }))] })) }))] })] })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Card, __assign({ "$selected": selectedInsuranceOption === 2 }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "insurance-option", checked: selectedInsuranceOption === 2, onChange: function () { return onInsuranceOptionSelect === null || onInsuranceOptionSelect === void 0 ? void 0 : onInsuranceOptionSelect(2); } }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Header, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Indicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Title, { children: insuranceOption2Title })] }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Content, { children: (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Description, { children: insuranceOption2Description }) })] }))] }))] })));
+                                            (0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: deliveryDangerText })), deliveryText] }))] })) })), (0, jsx_runtime_1.jsx)(QuantitySelector_1.default, { orientation: "vertical", quantity: quantity, onIncrement: onIncrement, onDecrement: onDecrement, onRemove: onRemove, hasRemove: hasRemove, hasLoading: hasLoading, hasError: hasError, errorText: errorText, hasDisableActions: hasDisableActions, hasDisableIncrement: hasDisableIncrement })] })), hasInsurance && insuranceType === 1 && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg", onClick: !hasLoading ? toggleInsuranceLogo : undefined }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !hasLoading ? toggleInsurance : undefined, className: "insuranceContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [insuranceText, insurancePrice && (0, jsx_runtime_1.jsx)("p", __assign({ className: "price" }, { children: hasInsuranceLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("b", { dangerouslySetInnerHTML: { __html: insurancePrice } }), (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: insuranceQuantity }))] }) }))] })), hasInsuranceActions && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: hasInsuranceTooltipClickAction, popupWidth: insuranceTooltipWidth, position: "bottomRight" }, { children: insuranceTooltipText }))) : (hasInsurancePriceAdded ? ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", "$hasShadow": true, disabled: hasLoading }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", "$hasShadow": true, disabled: hasLoading }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }) })))) })))] }))] }))), hasInsurance && insuranceType === 2 && !hasLoading && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Wrapper, { children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Card, __assign({ "$selected": selectedInsuranceOption === 1 }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "insurance-option", checked: selectedInsuranceOption === 1, onChange: function () { return onInsuranceOptionSelect === null || onInsuranceOptionSelect === void 0 ? void 0 : onInsuranceOptionSelect(1); } }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Header, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Indicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Title, { children: insuranceOption1Title }), insuranceOption1TooltipText && ((0, jsx_runtime_1.jsx)("label", __assign({ ref: tooltipWrapperRef, htmlFor: "insurance-option-1-tooltip", onClick: handleTooltipWrapperClick, onMouseDown: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", popupWidth: "302px", position: "bottomRight", iconWidth: "24px", iconHeight: "24px", title: insuranceOption1TooltipTitle, popupSize: "medium", hasClickAction: hasInsuranceTooltipClickAction }, { children: insuranceOption1TooltipText })) })))] }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Content, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Description, { children: insuranceOption1Description }), (insuranceOption1Price || hasInsuranceOption1PriceLoading) && ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Price, { children: hasInsuranceOption1PriceLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2PriceValue, { children: insuranceOption1Price }), insuranceOption1PricePeriod && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2PricePeriod, { children: [" ", insuranceOption1PricePeriod] }))] })) }))] })] })), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Card, __assign({ "$selected": selectedInsuranceOption === 2 }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "insurance-option", checked: selectedInsuranceOption === 2, onChange: function () { return onInsuranceOptionSelect === null || onInsuranceOptionSelect === void 0 ? void 0 : onInsuranceOptionSelect(2); } }), (0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.InsuranceType2Header, { children: [(0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Indicator, {}), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Title, { children: insuranceOption2Title })] }), (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Content, { children: (0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.InsuranceType2Description, { children: insuranceOption2Description }) })] }))] }))] })));
 };
 exports.default = ShoppingCartProduct;

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

@@ -15,4 +15,3 @@ export declare const InsuranceType2Card: import("styled-components/dist/types").
 }, never>>> & string;
 export declare const InsuranceType2Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const ShoppingCartProductStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ShoppingCartProductStyledProps> & ShoppingCartProductStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ShoppingCartProductStyledProps> & ShoppingCartProductStyledProps, never>>> & string;
-export declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ShoppingCartProductStyledProps> & ShoppingCartProductStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ShoppingCartProductStyledProps> & ShoppingCartProductStyledProps, never>>> & string;