krl-alfred 2.19.0 → 2.20.1

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ProductCardHorizontalMdProps } from "../props";
 declare const _default: {
     title: string;
-    component: React.MemoExoticComponent<({ title, description, listDescription, image, unitPriceText, totalPrice, slug, component, onClick, hasLoading, textSize, hasBgColor, }: import("../props").ProductCardHorizontalMd) => React.JSX.Element>;
+    component: React.MemoExoticComponent<({ title, description, listDescription, image, unitPriceText, totalPrice, oldPrice, newPrice, discountRate, variant, slug, component, onClick, hasLoading, textSize, hasBgColor, }: import("../props").ProductCardHorizontalMd) => React.JSX.Element>;
     tags: string[];
     argTypes: {
         title: {
@@ -20,6 +20,19 @@ declare const _default: {
         totalPrice: {
             control: string;
         };
+        oldPrice: {
+            control: string;
+        };
+        newPrice: {
+            control: string;
+        };
+        discountRate: {
+            control: string;
+        };
+        variant: {
+            control: string;
+            options: readonly ["default", "discount"];
+        };
         slug: {
             control: string;
         };
@@ -51,6 +64,10 @@ export declare const Default: {
         image?: React.ReactNode;
         unitPriceText?: string;
         totalPrice?: string;
+        oldPrice?: string;
+        newPrice?: string;
+        discountRate?: number;
+        variant?: "discount" | "default";
         slug?: string;
         component?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
         onClick?(): void;
@@ -68,6 +85,10 @@ export declare const WithoutLink: {
         image?: React.ReactNode;
         unitPriceText?: string;
         totalPrice?: string;
+        oldPrice?: string;
+        newPrice?: string;
+        discountRate?: number;
+        variant?: "discount" | "default";
         component?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
         onClick?(): void;
         hasLoading?: boolean;
@@ -83,6 +104,10 @@ export declare const WithoutUnitPrice: {
         listDescription?: string[];
         image?: React.ReactNode;
         totalPrice?: string;
+        oldPrice?: string;
+        newPrice?: string;
+        discountRate?: number;
+        variant?: "discount" | "default";
         slug?: string;
         component?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
         onClick?(): void;
@@ -100,6 +125,10 @@ export declare const Loading: {
         image?: React.ReactNode;
         unitPriceText?: string;
         totalPrice?: string;
+        oldPrice?: string;
+        newPrice?: string;
+        discountRate?: number;
+        variant?: "discount" | "default";
         slug?: string;
         component?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
         onClick?(): void;
@@ -116,6 +145,10 @@ export declare const TextSizeMd: {
         image?: React.ReactNode;
         unitPriceText?: string;
         totalPrice?: string;
+        oldPrice?: string;
+        newPrice?: string;
+        discountRate?: number;
+        variant?: "discount" | "default";
         slug?: string;
         component?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
         onClick?(): void;
@@ -133,12 +166,28 @@ export declare const WithBgColor: {
         image?: React.ReactNode;
         unitPriceText?: string;
         totalPrice?: string;
+        oldPrice?: string;
+        newPrice?: string;
+        discountRate?: number;
+        variant?: "discount" | "default";
         component?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
         onClick?(): void;
         hasLoading?: boolean;
         textSize?: "sm" | "md";
     };
 };
+export declare const Discount: {
+    args: {
+        title: string;
+        image: React.JSX.Element;
+        variant: string;
+        discountRate: number;
+        oldPrice: string;
+        newPrice: string;
+        hasBgColor: boolean;
+        slug: any;
+    };
+};
 export declare const ListDescription: {
     args: {
         description: any;
@@ -150,6 +199,10 @@ export declare const ListDescription: {
         image?: React.ReactNode;
         unitPriceText?: string;
         totalPrice?: string;
+        oldPrice?: string;
+        newPrice?: string;
+        discountRate?: number;
+        variant?: "discount" | "default";
         component?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
         onClick?(): void;
         hasLoading?: boolean;

package/dist/components/ProductCardHorizontalMd/stories/ProductCardHorizontalMd.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListDescription = exports.WithBgColor = exports.TextSizeMd = exports.Loading = exports.WithoutUnitPrice = exports.WithoutLink = exports.Default = void 0;
+exports.ListDescription = exports.Discount = exports.WithBgColor = exports.TextSizeMd = exports.Loading = exports.WithoutUnitPrice = exports.WithoutLink = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ProductCardHorizontalMd_1 = __importDefault(require("../ProductCardHorizontalMd"));
 var props_1 = require("../props");
@@ -38,6 +38,10 @@ exports.default = {
         listDescription: { control: 'object' },
         unitPriceText: { control: 'text' },
         totalPrice: { control: 'text' },
+        oldPrice: { control: 'text' },
+        newPrice: { control: 'text' },
+        discountRate: { control: 'number' },
+        variant: { control: 'select', options: props_1.variants },
         slug: { control: 'text' },
         image: { control: false },
         component: { control: false },
@@ -65,6 +69,18 @@ exports.TextSizeMd = {
 exports.WithBgColor = {
     args: __assign(__assign({}, defaultArgs), { hasBgColor: true, slug: null }),
 };
+exports.Discount = {
+    args: {
+        title: "Çekirdek kahve",
+        image: DefaultImage,
+        variant: 'discount',
+        discountRate: 20,
+        oldPrice: "920 TL",
+        newPrice: "520 TL",
+        hasBgColor: true,
+        slug: null,
+    },
+};
 exports.ListDescription = {
     args: __assign(__assign({}, defaultArgs), { description: null, listDescription: ['İki ayda bir gönderim', 'Ücretsiz kargo', 'İptal edilebilir'], hasBgColor: true, textSize: 'md', slug: null }),
 };

package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const _default: React.MemoExoticComponent<({ title, description, price, priceSm, slug, period, image, component, imageComponent, hasImageBorder, imageWidth, imageHeight, infoPosition, hasButton, buttonVariant, buttonText, hasBorder, isSelected, hasTitleWrap, hasButtonRemoveMdDown, hasBordeHover, hasTooltip, tooltipSelectorTitle, tooltipDescription, isDisabled, imageInnerWidth, imageInnerHeight, hasImageRounded, }: import("./props").ProductCardHorizontalSm) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ title, description, price, priceSm, slug, period, image, component, imageComponent, hasImageBorder, imageWidth, imageHeight, infoPosition, hasButton, buttonVariant, buttonText, hasBorder, isSelected, hasTitleWrap, hasButtonRemoveMdDown, hasDescriptionHideMdDown, hasBordeHover, hasTooltip, tooltipSelectorTitle, tooltipDescription, isDisabled, imageInnerWidth, imageInnerHeight, hasImageRounded, }: import("./props").ProductCardHorizontalSm) => React.JSX.Element>;
 export default _default;

package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.js

@@ -40,7 +40,8 @@ var ImageContent = (0, react_1.memo)(function (_a) {
         prev.imageComponent === next.imageComponent;
 });
 var ProductCardHorizontalSm = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.ProductCardHorizontalSmDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardHorizontalSmDefault.description : _c, _d = _a.price, price = _d === void 0 ? props_1.ProductCardHorizontalSmDefault.price : _d, _e = _a.priceSm, priceSm = _e === void 0 ? props_1.ProductCardHorizontalSmDefault.priceSm : _e, _f = _a.slug, slug = _f === void 0 ? props_1.ProductCardHorizontalSmDefault.slug : _f, _g = _a.period, period = _g === void 0 ? props_1.ProductCardHorizontalSmDefault.period : _g, _h = _a.image, image = _h === void 0 ? props_1.ProductCardHorizontalSmDefault.image : _h, _j = _a.component, component = _j === void 0 ? props_1.ProductCardHorizontalSmDefault.component : _j, _k = _a.imageComponent, imageComponent = _k === void 0 ? props_1.ProductCardHorizontalSmDefault.imageComponent : _k, _l = _a.hasImageBorder, hasImageBorder = _l === void 0 ? props_1.ProductCardHorizontalSmDefault.hasImageBorder : _l, _m = _a.imageWidth, imageWidth = _m === void 0 ? props_1.ProductCardHorizontalSmDefault.imageWidth : _m, _o = _a.imageHeight, imageHeight = _o === void 0 ? props_1.ProductCardHorizontalSmDefault.imageHeight : _o, _p = _a.infoPosition, infoPosition = _p === void 0 ? props_1.ProductCardHorizontalSmDefault.infoPosition : _p, _q = _a.hasButton, hasButton = _q === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButton : _q, _r = _a.buttonVariant, buttonVariant = _r === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonVariant : _r, _s = _a.buttonText, buttonText = _s === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonText : _s, _t = _a.hasBorder, hasBorder = _t === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBorder : _t, _u = _a.isSelected, isSelected = _u === void 0 ? props_1.ProductCardHorizontalSmDefault.isSelected : _u, _v = _a.hasTitleWrap, hasTitleWrap = _v === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTitleWrap : _v, _w = _a.hasButtonRemoveMdDown, hasButtonRemoveMdDown = _w === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButtonRemoveMdDown : _w, _x = _a.hasBordeHover, hasBordeHover = _x === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBordeHover : _x, _y = _a.hasTooltip, hasTooltip = _y === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTooltip : _y, _z = _a.tooltipSelectorTitle, tooltipSelectorTitle = _z === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipSelectorTitle : _z, _0 = _a.tooltipDescription, tooltipDescription = _0 === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipDescription : _0, _1 = _a.isDisabled, isDisabled = _1 === void 0 ? props_1.ProductCardHorizontalSmDefault.isDisabled : _1, _2 = _a.imageInnerWidth, imageInnerWidth = _2 === void 0 ? props_1.ProductCardHorizontalSmDefault.imageInnerWidth : _2, _3 = _a.imageInnerHeight, imageInnerHeight = _3 === void 0 ? props_1.ProductCardHorizontalSmDefault.imageInnerHeight : _3, _4 = _a.hasImageRounded, hasImageRounded = _4 === void 0 ? props_1.ProductCardHorizontalSmDefault.hasImageRounded : _4;
-    return ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.ProductCardHorizontalSmStyled, __assign({ "$period": period, "$hasImageBorder": hasImageBorder, "$imageWidth": imageWidth, "$imageHeight": imageHeight, "$isSelected": isSelected, "$hasBordeHover": hasBordeHover, "$isDisabled": isDisabled }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Border, { "$isSelected": isSelected, "$hasBordeHover": hasBordeHover, "$hasBorder": hasBorder }), (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ component: component, slug: slug }, { children: (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.HorizontalSmWrapper, { children: [(0, jsx_runtime_1.jsx)(ImageContent, { image: image, title: title, imageInnerWidth: imageInnerWidth, imageInnerHeight: imageInnerHeight, imageHeight: imageHeight, imageWidth: imageWidth, hasImageBorder: hasImageBorder, hasImageRounded: hasImageRounded, imageComponent: imageComponent }), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.TextWrapper, __assign({ "$period": period }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Title, __assign({ "$hasTitleWrap": hasTitleWrap }, { children: title })), description && (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Description, { children: description }), infoPosition === "left" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] }), (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period }))] })))] })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.RightContentWrapper, __assign({ "$hasButtonRemoveMdDown": hasButtonRemoveMdDown }, { children: [infoPosition === "right" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] })] }))), hasButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ disabled: isDisabled, variant: buttonVariant, size: "xsmall" }, { children: buttonText }))), hasTooltip && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ selectorTitle: tooltipSelectorTitle, popupWidth: "238px", position: "topRight", popupSize: "medium" }, { children: tooltipDescription })))] }))] }) }))] })));
+    var _b = _a.title, title = _b === void 0 ? props_1.ProductCardHorizontalSmDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardHorizontalSmDefault.description : _c, _d = _a.price, price = _d === void 0 ? props_1.ProductCardHorizontalSmDefault.price : _d, _e = _a.priceSm, priceSm = _e === void 0 ? props_1.ProductCardHorizontalSmDefault.priceSm : _e, _f = _a.slug, slug = _f === void 0 ? props_1.ProductCardHorizontalSmDefault.slug : _f, _g = _a.period, period = _g === void 0 ? props_1.ProductCardHorizontalSmDefault.period : _g, _h = _a.image, image = _h === void 0 ? props_1.ProductCardHorizontalSmDefault.image : _h, _j = _a.component, component = _j === void 0 ? props_1.ProductCardHorizontalSmDefault.component : _j, _k = _a.imageComponent, imageComponent = _k === void 0 ? props_1.ProductCardHorizontalSmDefault.imageComponent : _k, _l = _a.hasImageBorder, hasImageBorder = _l === void 0 ? props_1.ProductCardHorizontalSmDefault.hasImageBorder : _l, _m = _a.imageWidth, imageWidth = _m === void 0 ? props_1.ProductCardHorizontalSmDefault.imageWidth : _m, _o = _a.imageHeight, imageHeight = _o === void 0 ? props_1.ProductCardHorizontalSmDefault.imageHeight : _o, _p = _a.infoPosition, infoPosition = _p === void 0 ? props_1.ProductCardHorizontalSmDefault.infoPosition : _p, _q = _a.hasButton, hasButton = _q === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButton : _q, _r = _a.buttonVariant, buttonVariant = _r === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonVariant : _r, _s = _a.buttonText, buttonText = _s === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonText : _s, _t = _a.hasBorder, hasBorder = _t === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBorder : _t, _u = _a.isSelected, isSelected = _u === void 0 ? props_1.ProductCardHorizontalSmDefault.isSelected : _u, _v = _a.hasTitleWrap, hasTitleWrap = _v === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTitleWrap : _v, _w = _a.hasButtonRemoveMdDown, hasButtonRemoveMdDown = _w === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButtonRemoveMdDown : _w, _x = _a.hasDescriptionHideMdDown, hasDescriptionHideMdDown = _x === void 0 ? props_1.ProductCardHorizontalSmDefault.hasDescriptionHideMdDown : _x, _y = _a.hasBordeHover, hasBordeHover = _y === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBordeHover : _y, _z = _a.hasTooltip, hasTooltip = _z === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTooltip : _z, _0 = _a.tooltipSelectorTitle, tooltipSelectorTitle = _0 === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipSelectorTitle : _0, _1 = _a.tooltipDescription, tooltipDescription = _1 === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipDescription : _1, _2 = _a.isDisabled, isDisabled = _2 === void 0 ? props_1.ProductCardHorizontalSmDefault.isDisabled : _2, _3 = _a.imageInnerWidth, imageInnerWidth = _3 === void 0 ? props_1.ProductCardHorizontalSmDefault.imageInnerWidth : _3, _4 = _a.imageInnerHeight, imageInnerHeight = _4 === void 0 ? props_1.ProductCardHorizontalSmDefault.imageInnerHeight : _4, _5 = _a.hasImageRounded, hasImageRounded = _5 === void 0 ? props_1.ProductCardHorizontalSmDefault.hasImageRounded : _5;
+    var hasPeriod = period != null && period !== "";
+    return ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.ProductCardHorizontalSmStyled, __assign({ "$hasImageBorder": hasImageBorder, "$imageWidth": imageWidth, "$imageHeight": imageHeight, "$isSelected": isSelected, "$hasBordeHover": hasBordeHover, "$isDisabled": isDisabled }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Border, { "$isSelected": isSelected, "$hasBordeHover": hasBordeHover, "$hasBorder": hasBorder }), (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ component: component, slug: slug }, { children: (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.HorizontalSmWrapper, { children: [(0, jsx_runtime_1.jsx)(ImageContent, { image: image, title: title, imageInnerWidth: imageInnerWidth, imageInnerHeight: imageInnerHeight, imageHeight: imageHeight, imageWidth: imageWidth, hasImageBorder: hasImageBorder, hasImageRounded: hasImageRounded, imageComponent: imageComponent }), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.TextWrapper, __assign({ "$hasPeriod": hasPeriod }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Title, __assign({ "$hasTitleWrap": hasTitleWrap }, { children: title })), description && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Description, __assign({ "$hasDescriptionHideMdDown": hasDescriptionHideMdDown }, { children: description }))), infoPosition === "left" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] }), (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period }))] })))] })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.RightContentWrapper, __assign({ "$hasButtonRemoveMdDown": hasButtonRemoveMdDown }, { children: [infoPosition === "right" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] })] }))), hasButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ disabled: isDisabled, variant: buttonVariant, size: "xsmall" }, { children: buttonText }))), hasTooltip && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ selectorTitle: tooltipSelectorTitle, popupWidth: "238px", position: "topRight", popupSize: "medium" }, { children: tooltipDescription })))] }))] }) }))] })));
 };
 exports.default = (0, react_1.memo)(ProductCardHorizontalSm);

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ProductCardHorizontalSmStyledProps } from "./props";
 export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never>>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
+export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never>>> & string;
 export declare const Border: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never>>> & string;
 export declare const ProductCardHorizontalSmStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never>>> & string;
 export declare const HorizontalSmWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.js

@@ -11,7 +11,10 @@ exports.RightContentWrapper = exports.Period = exports.Price = exports.PriceCont
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.Title = styled_components_1.default.strong(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n  font: var(--body-semi-bold-14-17);\n  transition: color 0.2s ease;\n"], ["\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n  font: var(--body-semi-bold-14-17);\n  transition: color 0.2s ease;\n"])), function (props) { return (props.$hasTitleWrap ? "2" : "1"); });
-exports.Description = styled_components_1.default.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0.25rem 0 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n  font: var(--caption-medium-12-15);\n  color: var(--grey-50);\n"], ["\n  margin: 0.25rem 0 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n  font: var(--caption-medium-12-15);\n  color: var(--grey-50);\n"])));
+exports.Description = styled_components_1.default.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0.25rem 0 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n  font: var(--caption-medium-12-15);\n  color: var(--grey-50);\n\n  ", "\n"], ["\n  margin: 0.25rem 0 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n  font: var(--caption-medium-12-15);\n  color: var(--grey-50);\n\n  ", "\n"])), function (props) {
+    return props.$hasDescriptionHideMdDown &&
+        "\n      @media only screen and ".concat(devices_1.devices.md, " {\n        display: none;\n      }\n    ");
+});
 exports.Border = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  user-select: none;\n  pointer-events: none;\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  border: 1px solid transparent;\n  opacity: ", ";\n  transition: border-color 0.2s ease, opacity 0.2s ease;\n  border-color: ", ";\n  ", "\n"], ["\n  user-select: none;\n  pointer-events: none;\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  border: 1px solid transparent;\n  opacity: ", ";\n  transition: border-color 0.2s ease, opacity 0.2s ease;\n  border-color: ", ";\n  ", "\n"])), function (p) { return (p.$hasBorder ? 1 : 0); }, function (p) { return (p.$hasBorder ? "var(--grey-10)" : "transparent"); }, function (p) { return p.$isSelected && "border-color: var(--primary);border-width: 2px;"; });
 exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: var(--dark);\n  padding: 0 0.5rem;\n  border-radius: 0.5rem;\n  position: relative;\n  transition: color 0.2s ease;\n\n  ", "\n\n  ", "\n\n  a {\n    text-decoration: none;\n    color: inherit;\n\n    @media ((hover: hover) and (pointer: fine)) {\n      &:hover {\n        ", " {\n          color: var(--primary-hover);\n        }\n      }\n    }\n\n    &:active {\n      ", " {\n        color: var(--primary-hover);\n      }\n    }\n  }\n"], ["\n  color: var(--dark);\n  padding: 0 0.5rem;\n  border-radius: 0.5rem;\n  position: relative;\n  transition: color 0.2s ease;\n\n  ", "\n\n  ", "\n\n  a {\n    text-decoration: none;\n    color: inherit;\n\n    @media ((hover: hover) and (pointer: fine)) {\n      &:hover {\n        ", " {\n          color: var(--primary-hover);\n        }\n      }\n    }\n\n    &:active {\n      ", " {\n        color: var(--primary-hover);\n      }\n    }\n  }\n"])), function (props) {
     return props.$isDisabled &&
@@ -22,7 +25,7 @@ exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(template
 }, exports.Title, exports.Title);
 exports.HorizontalSmWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-decoration: none;\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  min-height: 66px;\n  padding-right: 0.5rem;\n"], ["\n  text-decoration: none;\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  min-height: 66px;\n  padding-right: 0.5rem;\n"])));
 exports.ImgWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: 0.5rem;\n  position: relative;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n  background: white;\n  transform: translateZ(0);\n\n  img {\n    vertical-align: middle !important;\n    display: block !important;\n    object-fit: cover !important;\n    border-radius: ", " !important;\n  }\n"], ["\n  border: ", ";\n  border-radius: 0.5rem;\n  position: relative;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n  background: white;\n  transform: translateZ(0);\n\n  img {\n    vertical-align: middle !important;\n    display: block !important;\n    object-fit: cover !important;\n    border-radius: ", " !important;\n  }\n"])), function (props) { return (props.$hasImageBorder ? "1px solid var(--dark-opacity-5)" : "none"); }, function (props) { return (props.$imageWidth ? props.$imageWidth : "71px"); }, function (props) { return (props.$imageHeight ? props.$imageHeight : "50px"); }, function (props) { return (props.$hasImageRounded ? "4px" : "0"); });
-exports.TextWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (props) { return (props.$period ? "1rem" : "0.5rem"); });
+exports.TextWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (props) { return (props.$hasPeriod ? "1rem" : "0.5rem"); });
 exports.PriceContent = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return (props === null || props === void 0 ? void 0 : props.$infoPosition) === "left"
         ? "\n        text-align: start;\n        display: flex;\n        align-items: flex-end;\n        margin-top: 8px;\n    "

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { variants } from "../Button/props";
 type VARIANT = typeof variants[number];
 export interface ProductCardHorizontalSm {
@@ -7,7 +7,7 @@ export interface ProductCardHorizontalSm {
     price?: string;
     priceSm?: string;
     slug?: string;
-    period?: string;
+    period?: React.ReactNode;
     image?: string;
     component?: React.ElementType | null;
     /** Örn. `import Image from "next/image"` → `imageComponent={Image}` */
@@ -23,6 +23,7 @@ export interface ProductCardHorizontalSm {
     isSelected?: boolean;
     hasTitleWrap?: boolean;
     hasButtonRemoveMdDown?: boolean;
+    hasDescriptionHideMdDown?: boolean;
     hasBordeHover?: boolean;
     hasTooltip?: boolean;
     tooltipSelectorTitle?: string;
@@ -33,7 +34,7 @@ export interface ProductCardHorizontalSm {
     hasImageRounded?: boolean;
 }
 export interface ProductCardHorizontalSmStyledProps {
-    $period?: string;
+    $hasPeriod?: boolean;
     $hasImageBorder?: boolean;
     $imageWidth?: string;
     $imageHeight?: string;
@@ -42,6 +43,7 @@ export interface ProductCardHorizontalSmStyledProps {
     $isSelected?: boolean;
     $hasTitleWrap?: boolean;
     $hasButtonRemoveMdDown?: boolean;
+    $hasDescriptionHideMdDown?: boolean;
     $hasBordeHover?: boolean;
     $isDisabled?: boolean;
     $hasImageRounded?: boolean;

package/dist/components/ProductCardHorizontalSm/props.js

@@ -22,6 +22,7 @@ exports.ProductCardHorizontalSmDefault = {
     isSelected: false,
     hasTitleWrap: true,
     hasButtonRemoveMdDown: false,
+    hasDescriptionHideMdDown: false,
     hasBordeHover: false,
     hasTooltip: false,
     tooltipSelectorTitle: null,

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

@@ -20,7 +20,7 @@ declare const _default: {
             control: string;
         };
         period: {
-            control: string;
+            control: boolean;
         };
         image: {
             control: string;
@@ -76,6 +76,9 @@ declare const _default: {
         hasButtonRemoveMdDown: {
             control: string;
         };
+        hasDescriptionHideMdDown: {
+            control: string;
+        };
         hasTooltip: {
             control: string;
         };
@@ -154,6 +157,39 @@ export declare const WithDescription: {
         isDisabled: boolean;
     };
 };
+export declare const DescriptionHideMdDown: {
+    args: {
+        description: string;
+        hasDescriptionHideMdDown: boolean;
+        title: string;
+        price: string;
+        priceSm: string;
+        slug: string;
+        period: string;
+        image: string;
+        component: ({ children }: {
+            children: any;
+        }) => React.JSX.Element;
+        hasImageBorder: boolean;
+        imageWidth: string;
+        imageHeight: string;
+        imageInnerWidth: number;
+        imageInnerHeight: number;
+        infoPosition: string;
+        hasButton: boolean;
+        buttonVariant: string;
+        buttonText: string;
+        hasBorder: boolean;
+        hasBordeHover: boolean;
+        isSelected: boolean;
+        hasTitleWrap: boolean;
+        hasButtonRemoveMdDown: boolean;
+        hasTooltip: boolean;
+        tooltipSelectorTitle: string;
+        tooltipDescription: string;
+        isDisabled: boolean;
+    };
+};
 export declare const WithButton: {
     args: {
         hasButton: boolean;
@@ -216,6 +252,37 @@ export declare const RightAlignedInfo: {
         isDisabled: boolean;
     };
 };
+export declare const CustomPeriod: {
+    args: {
+        infoPosition: string;
+        period: React.JSX.Element;
+        title: string;
+        price: string;
+        priceSm: string;
+        slug: string;
+        image: string;
+        component: ({ children }: {
+            children: any;
+        }) => React.JSX.Element;
+        hasImageBorder: boolean;
+        imageWidth: string;
+        imageHeight: string;
+        imageInnerWidth: number;
+        imageInnerHeight: number;
+        hasButton: boolean;
+        buttonVariant: string;
+        buttonText: string;
+        hasBorder: boolean;
+        hasBordeHover: boolean;
+        isSelected: boolean;
+        hasTitleWrap: boolean;
+        hasButtonRemoveMdDown: boolean;
+        hasTooltip: boolean;
+        tooltipSelectorTitle: string;
+        tooltipDescription: string;
+        isDisabled: boolean;
+    };
+};
 export declare const WithImageBorder: {
     args: {
         hasImageBorder: boolean;

package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithBorderHover = exports.WithImageRounded = exports.WithoutBorder = exports.WithoutTooltip = exports.Selected = exports.Disabled = exports.WithImageBorder = exports.RightAlignedInfo = exports.WithButton = exports.WithDescription = exports.Default = void 0;
+exports.WithBorderHover = exports.WithImageRounded = exports.WithoutBorder = exports.WithoutTooltip = exports.Selected = exports.Disabled = exports.WithImageBorder = exports.CustomPeriod = exports.RightAlignedInfo = exports.WithButton = exports.DescriptionHideMdDown = exports.WithDescription = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ProductCardHorizontalSm_1 = __importDefault(require("../ProductCardHorizontalSm"));
 var props_1 = require("../../Button/props");
@@ -28,7 +28,7 @@ exports.default = {
         price: { control: "text" },
         priceSm: { control: "text" },
         slug: { control: "text" },
-        period: { control: "text" },
+        period: { control: false },
         image: { control: "text" },
         component: { control: "none" },
         imageComponent: {
@@ -55,6 +55,7 @@ exports.default = {
         isSelected: { control: "boolean" },
         hasTitleWrap: { control: "boolean" },
         hasButtonRemoveMdDown: { control: "boolean" },
+        hasDescriptionHideMdDown: { control: "boolean" },
         hasTooltip: { control: "boolean" },
         tooltipSelectorTitle: { control: "text" },
         tooltipDescription: { control: "text" },
@@ -97,12 +98,18 @@ exports.Default = {
 exports.WithDescription = {
     args: __assign(__assign({}, exports.Default.args), { description: "İki ayda bir gönderim" }),
 };
+exports.DescriptionHideMdDown = {
+    args: __assign(__assign({}, exports.Default.args), { description: "İki ayda bir gönderim", hasDescriptionHideMdDown: true }),
+};
 exports.WithButton = {
     args: __assign(__assign({}, exports.Default.args), { hasButton: true, buttonText: "Kirala", buttonVariant: "secondary" }),
 };
 exports.RightAlignedInfo = {
     args: __assign(__assign({}, exports.Default.args), { infoPosition: "right" }),
 };
+exports.CustomPeriod = {
+    args: __assign(__assign({}, exports.Default.args), { infoPosition: "right", period: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "period-mobile" }, { children: "/ay" })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "period-desktop" }, { children: "/hafta" }))] })) }),
+};
 exports.WithImageBorder = {
     args: __assign(__assign({}, exports.Default.args), { hasImageBorder: true }),
 };

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { QuantitySelectorProps } from "./props";
+declare const QuantitySelector: ({ label, id, orientation, quantity, onIncrement, onDecrement, onRemove, hasRemove, hasLoading, hasError, errorText, hasDisableActions, hasDisableIncrement, }: QuantitySelectorProps) => React.JSX.Element;
+export default QuantitySelector;

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,
+};