krl-alfred 1.80.10 → 1.80.11

package/dist/components/Accordion/Accordion.styled.js

@@ -14,7 +14,7 @@ exports.AccordionStyled = styled_components_1.default.div(templateObject_1 || (t
 exports.AccordionTitle = styled_components_1.default.h1(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-bottom: 1.5rem;\n  margin-top: 0;\n  font : ", ";\n\n  @media only screen and ", " {\n    font : var(--title-bold-16-19);\n  }\n"], ["\n  margin-bottom: 1.5rem;\n  margin-top: 0;\n  font : ", ";\n\n  @media only screen and ", " {\n    font : var(--title-bold-16-19);\n  }\n"])), function (props) { return props.$size === "large" ? "var(--headline-bold-18-22)" : "var(--title-bold-16-19)"; }, devices_1.devices.lg);
 exports.Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\n"], ["\n\n"])));
 exports.Item = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  &:not(:nth-child(1)) {\n    margin-top: 1.5rem;\n  }\n"], ["\n  &:not(:nth-child(1)) {\n    margin-top: 1.5rem;\n  }\n"])));
-exports.ItemTitle = styled_components_1.default.strong(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  font : ", ";\n\n  @media only screen and ", " {\n    font : var(--body-bold-14-17);\n  }\n  svg{\n    path[stroke-width]{\n      stroke-width : 1.5px;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  font : ", ";\n\n  @media only screen and ", " {\n    font : var(--body-bold-14-17);\n  }\n  svg{\n    path[stroke-width]{\n      stroke-width : 1.5px;\n    }\n  }\n"])), function (props) { return props.$size === "large" ? "var(--title-bold-16-19)" : "var(--body-bold-14-17)"; }, devices_1.devices.lg);
+exports.ItemTitle = styled_components_1.default.strong(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  font : ", ";\n\n  @media only screen and ", " {\n    font : var(--body-bold-14-17);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  font : ", ";\n\n  @media only screen and ", " {\n    font : var(--body-bold-14-17);\n  }\n"])), function (props) { return props.$size === "large" ? "var(--title-bold-16-19)" : "var(--body-bold-14-17)"; }, devices_1.devices.lg);
 exports.ItemContent = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  transition: all .3s ease;\n  overflow: hidden;\n  position: relative;\n  font : ", ";\n  @media only screen and ", " {\n    font : var(--body-regular-14-17);\n  }\n  > div{\n    padding: 1rem 2rem 0 0;\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    a{\n      color : var(--primary);\n      &:hover , :focus , :active {\n        color: var(--primary-hover);\n      }\n    }\n  }\n"], ["\n  transition: all .3s ease;\n  overflow: hidden;\n  position: relative;\n  font : ", ";\n  @media only screen and ", " {\n    font : var(--body-regular-14-17);\n  }\n  > div{\n    padding: 1rem 2rem 0 0;\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    a{\n      color : var(--primary);\n      &:hover , :focus , :active {\n        color: var(--primary-hover);\n      }\n    }\n  }\n"])), function (props) { return props.$size === "large" ? "var(--title-regular-16-19)" : "var(--body-regular-14-17)"; }, devices_1.devices.lg);
 exports.Footer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  margin-top: 1.5rem!important;\n    font : var(--body-bold-14-17);\n"], ["\n  box-sizing: border-box;\n  display: block;\n  margin-top: 1.5rem!important;\n    font : var(--body-bold-14-17);\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/Accordion/AccordionItem.js

@@ -36,6 +36,6 @@ var AccordionItem = function (_a) {
             setActiveItem(false);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Accordion_styled_1.Item, { children: [(0, jsx_runtime_1.jsxs)(Accordion_styled_1.ItemTitle, __assign({ "$size": size, onClick: handleCollapse }, { children: [(0, jsx_runtime_1.jsx)("div", { children: title }), (0, jsx_runtime_1.jsxs)("div", { children: [" ", (0, jsx_runtime_1.jsx)(Icon_1.default, { name: (active === index || activeItem) ? 'NegativeSmall' : 'PlusSmall', width: "24px", height: "24px" }), " "] })] })), (0, jsx_runtime_1.jsx)(Accordion_styled_1.ItemContent, __assign({ "$size": size, ref: itemRef, style: { height: height } }, { children: (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: content } }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Accordion_styled_1.Item, { children: [(0, jsx_runtime_1.jsxs)(Accordion_styled_1.ItemTitle, __assign({ "$size": size, onClick: handleCollapse }, { children: [(0, jsx_runtime_1.jsx)("div", { children: title }), (0, jsx_runtime_1.jsxs)("div", { children: [" ", (0, jsx_runtime_1.jsx)(Icon_1.default, { name: (active === index || activeItem) ? 'NegativeSmall' : 'PlusSmall' }), " "] })] })), (0, jsx_runtime_1.jsx)(Accordion_styled_1.ItemContent, __assign({ "$size": size, ref: itemRef, style: { height: height } }, { children: (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: content } }) }))] }));
 };
 exports.default = AccordionItem;

package/dist/components/ActionButton/ActionButton.js

@@ -29,17 +29,16 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var props_1 = require("./props");
 var ActionButton_styled_1 = require("./ActionButton.styled");
-var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Button_1 = __importDefault(require("../Button"));
 var date_fns_1 = require("date-fns");
 var react_i18next_1 = require("react-i18next");
 var ActionButton = function (_a) {
-    var _b = _a.width, width = _b === void 0 ? props_1.ActionButtonDefault.width : _b, _c = _a.title, title = _c === void 0 ? props_1.ActionButtonDefault.title : _c, _d = _a.date, date = _d === void 0 ? props_1.ActionButtonDefault.date : _d, _e = _a.icon, icon = _e === void 0 ? props_1.ActionButtonDefault.icon : _e, _f = _a.iconStrokeWidth, iconStrokeWidth = _f === void 0 ? props_1.ActionButtonDefault.iconStrokeWidth : _f, _g = _a.isMonthVisible, isMonthVisible = _g === void 0 ? props_1.ActionButtonDefault.isMonthVisible : _g, other = __rest(_a, ["width", "title", "date", "icon", "iconStrokeWidth", "isMonthVisible"]);
+    var _b = _a.width, width = _b === void 0 ? props_1.ActionButtonDefault.width : _b, _c = _a.title, title = _c === void 0 ? props_1.ActionButtonDefault.title : _c, _d = _a.date, date = _d === void 0 ? props_1.ActionButtonDefault.date : _d, _e = _a.img, img = _e === void 0 ? props_1.ActionButtonDefault.img : _e, _f = _a.isMonthVisible, isMonthVisible = _f === void 0 ? props_1.ActionButtonDefault.isMonthVisible : _f, other = __rest(_a, ["width", "title", "date", "img", "isMonthVisible"]);
     var t = (0, react_i18next_1.useTranslation)().t;
-    var _h = (0, react_1.useState)(0), months = _h[0], setMonths = _h[1];
-    var _j = (0, react_1.useState)(0), days = _j[0], setDays = _j[1];
-    var _k = (0, react_1.useState)(0), minutes = _k[0], setMinutes = _k[1];
-    var _l = (0, react_1.useState)(0), hours = _l[0], setHours = _l[1];
+    var _g = (0, react_1.useState)(0), months = _g[0], setMonths = _g[1];
+    var _h = (0, react_1.useState)(0), days = _h[0], setDays = _h[1];
+    var _j = (0, react_1.useState)(0), minutes = _j[0], setMinutes = _j[1];
+    var _k = (0, react_1.useState)(0), hours = _k[0], setHours = _k[1];
     //const [secounds,setSecounds] = useState(0);
     var deadline = new Date(date).getTime();
     var count = function () {
@@ -60,6 +59,6 @@ var ActionButton = function (_a) {
     (0, react_1.useEffect)(function () {
         count();
     }, [date]);
-    return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({ "$width": width }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: iconStrokeWidth, name: icon, color: "var(--primary)", width: "45px", height: "45px" }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: months })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('month') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), !isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('minute') }))] }))] }))] })), (0, jsx_runtime_1.jsx)(Button_1.default, { iconStrokeWidth: "3px", size: "xsmall", width: "32px", icon: "ArrowMediumRight", variant: "primary" })] })] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({ "$width": width }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: img })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: months })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('month') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), !isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('minute') }))] }))] }))] })), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowSmallRight", variant: "primary" })] })] }))] })));
 };
 exports.default = ActionButton;

package/dist/components/ActionButton/ActionButton.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionButtonStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.ActionButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-5);\n  padding: 1rem 1.5rem;\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n  color: var(--dark);\n  box-sizing: border-box;\n  cursor: pointer;\n  .top ,.bottom{\n    display: grid;\n    grid-template-columns: 61px 1fr;\n    align-content: center;\n    align-items: center;\n  }\n  .top{\n    .icon{\n      svg{\n        display: block;\n      }\n      margin-right: 1rem;\n    }\n    .title{\n      display: block;\n      font:var(--body-bold-14-17);\n    }\n  }\n  .bottom{\n    margin-top: 0.5rem;\n    > div{\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-content: center;\n      align-items: center;\n      justify-content: space-between;\n      .timer{\n        display: grid;\n        grid-template-columns: repeat(5,auto);\n        align-items:center;\n        justify-content: start;\n        .box{\n          width: 40px;\n          height: 48px;\n          background-color: white;\n          border-radius: 0.25rem;\n          text-align: center;\n          display: grid;\n          align-items: center;\n          align-content: center;\n          box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n          .timerTitle{\n            font:var(--title-extra-bold-16-19);\n          }\n          .timerDescription{\n            font:var(--caption-regular-10-12);\n          }\n        }\n        .dots{    \n          margin: 0 4px;\n          width: 4px;\n          font:var(--caption-bold-12-15);\n        }\n      }\n    }\n   } \n"], ["\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-5);\n  padding: 1rem 1.5rem;\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n  color: var(--dark);\n  box-sizing: border-box;\n  cursor: pointer;\n  .top ,.bottom{\n    display: grid;\n    grid-template-columns: 61px 1fr;\n    align-content: center;\n    align-items: center;\n  }\n  .top{\n    .icon{\n      svg{\n        display: block;\n      }\n      margin-right: 1rem;\n    }\n    .title{\n      display: block;\n      font:var(--body-bold-14-17);\n    }\n  }\n  .bottom{\n    margin-top: 0.5rem;\n    > div{\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-content: center;\n      align-items: center;\n      justify-content: space-between;\n      .timer{\n        display: grid;\n        grid-template-columns: repeat(5,auto);\n        align-items:center;\n        justify-content: start;\n        .box{\n          width: 40px;\n          height: 48px;\n          background-color: white;\n          border-radius: 0.25rem;\n          text-align: center;\n          display: grid;\n          align-items: center;\n          align-content: center;\n          box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n          .timerTitle{\n            font:var(--title-extra-bold-16-19);\n          }\n          .timerDescription{\n            font:var(--caption-regular-10-12);\n          }\n        }\n        .dots{    \n          margin: 0 4px;\n          width: 4px;\n          font:var(--caption-bold-12-15);\n        }\n      }\n    }\n   } \n"])), function (props) { return props.$width; });
+exports.ActionButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-5);\n  padding: 1rem 1.5rem;\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n  color: var(--dark);\n  box-sizing: border-box;\n  cursor: pointer;\n  .top ,.bottom{\n    display: grid;\n    grid-template-columns: 61px 1fr;\n    align-content: center;\n    align-items: center;\n  }\n  .top{\n    .icon{\n      margin-right: 1rem;\n        *{\n            display: block !important;\n        }\n    }\n    .title{\n      display: block;\n      font:var(--body-bold-14-17);\n    }\n  }\n  .bottom{\n    margin-top: 0.5rem;\n    > div{\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-content: center;\n      align-items: center;\n      justify-content: space-between;\n      .timer{\n        display: grid;\n        grid-template-columns: repeat(5,auto);\n        align-items:center;\n        justify-content: start;\n        .box{\n          width: 40px;\n          height: 48px;\n          background-color: white;\n          border-radius: 0.25rem;\n          text-align: center;\n          display: grid;\n          align-items: center;\n          align-content: center;\n          box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n          .timerTitle{\n            font:var(--title-extra-bold-16-19);\n          }\n          .timerDescription{\n            font:var(--caption-regular-10-12);\n          }\n        }\n        .dots{    \n          margin: 0 4px;\n          width: 4px;\n          font:var(--caption-bold-12-15);\n        }\n      }\n    }\n   } \n"], ["\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-5);\n  padding: 1rem 1.5rem;\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n  color: var(--dark);\n  box-sizing: border-box;\n  cursor: pointer;\n  .top ,.bottom{\n    display: grid;\n    grid-template-columns: 61px 1fr;\n    align-content: center;\n    align-items: center;\n  }\n  .top{\n    .icon{\n      margin-right: 1rem;\n        *{\n            display: block !important;\n        }\n    }\n    .title{\n      display: block;\n      font:var(--body-bold-14-17);\n    }\n  }\n  .bottom{\n    margin-top: 0.5rem;\n    > div{\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-content: center;\n      align-items: center;\n      justify-content: space-between;\n      .timer{\n        display: grid;\n        grid-template-columns: repeat(5,auto);\n        align-items:center;\n        justify-content: start;\n        .box{\n          width: 40px;\n          height: 48px;\n          background-color: white;\n          border-radius: 0.25rem;\n          text-align: center;\n          display: grid;\n          align-items: center;\n          align-content: center;\n          box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n          .timerTitle{\n            font:var(--title-extra-bold-16-19);\n          }\n          .timerDescription{\n            font:var(--caption-regular-10-12);\n          }\n        }\n        .dots{    \n          margin: 0 4px;\n          width: 4px;\n          font:var(--caption-bold-12-15);\n        }\n      }\n    }\n   } \n"])), function (props) { return props.$width; });
 var templateObject_1;

package/dist/components/ActionButton/props.js

@@ -1,13 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionButtonDefault = exports.iconNames = void 0;
-var Icon_1 = require("../Icon");
-exports.iconNames = Object.keys(Icon_1.iconList);
+exports.ActionButtonDefault = void 0;
 exports.ActionButtonDefault = {
     width: '100%',
     title: 'title',
     date: new Date(),
-    icon: 'TimeCircle',
-    iconStrokeWidth: '',
+    img: "",
     isMonthVisible: false,
 };

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

@@ -4,8 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var ActionButton_1 = __importDefault(require("../ActionButton"));
-var Icon_1 = require("../../Icon");
+var iconList_1 = require("../../Icon/iconList");
 var date = new Date();
 date.setFullYear(new Date().getFullYear() + 1);
 exports.default = {
@@ -14,7 +15,7 @@ exports.default = {
     tags: ['autodocs'],
     argTypes: {
         onClick: { action: 'clicked' },
-        icon: { control: 'select', options: Object.keys(Icon_1.iconList) },
+        icon: { control: 'select', options: Object.keys(iconList_1.iconList) },
     }
 };
 exports.Default = {
@@ -23,7 +24,7 @@ exports.Default = {
         title: 'Title',
         date: date.toISOString(),
         //date:"2024-09-25T14:51:41.115Z",
-        icon: 'TimeCircle',
+        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/turkiyeninilk-karbon-notr-teslimat-yapan-e-ticaret-sitesi.svg", height: "45px", alt: "test" }),
         onClick: function (e) { return console.log(e); },
         isMonthVisible: false,
     },

package/dist/components/Agreement/Agreement.js

@@ -36,6 +36,6 @@ var Agreement = function (_a) {
         onChange(event);
     };
     var toggleExpand = function () { return setIsExpanded(function (prevState) { return !prevState; }); };
-    return ((0, jsx_runtime_1.jsxs)(Agreement_styled_1.AgreementStyled, __assign({ "$hasError": hasError }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "agreement" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: id, label: title, name: name, valid: !hasError, size: "medium", checked: checked, disabled: disabled, onChange: onCheckBoxChange, value: value }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon", onClick: toggleExpand }, { children: isExpanded ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "AgreementArrowUp" }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "AgreementArrowDown" }) }))] })), isExpanded && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: content ? (0, jsx_runtime_1.jsx)("div", { className: "text", dangerouslySetInnerHTML: { __html: content } }) : (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) })))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
+    return ((0, jsx_runtime_1.jsxs)(Agreement_styled_1.AgreementStyled, __assign({ "$hasError": hasError }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "agreement" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: id, label: title, name: name, valid: !hasError, size: "medium", checked: checked, disabled: disabled, onChange: onCheckBoxChange, value: value }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon", onClick: toggleExpand }, { children: isExpanded ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowUpBig" }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowDownBig" }) }))] })), isExpanded && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: content ? (0, jsx_runtime_1.jsx)("div", { className: "text", dangerouslySetInnerHTML: { __html: content } }) : (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) })))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
 };
 exports.default = Agreement;

package/dist/components/Agreement/Agreement.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AgreementStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.AgreementStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n\n  .agreement {\n    padding: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n    .top {\n      align-items: center;\n      gap: 8px;\n      display: flex;\n      box-sizing: border-box;\n      width: 100%;\n\n      .icon {\n        cursor: pointer;\n      }\n\n      .title {\n        width: 100%;\n        color: ", ";\n      }\n    }\n\n    .content {\n      margin-top: 16px;\n      border-radius: 0.5rem;\n      border: 1px solid var(--dark-opacity-5);\n      padding: 8px 16px;\n      max-height: 88px;\n      box-sizing: border-box;\n      overflow-y: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      color: var(--dark);\n      font:var(--body-regular-14-17);\n      div:not(.text) {\n        margin: 0 auto;\n      }\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n\n  .error {\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    color: var(--red);\n    p {\n      margin: 0 !important;\n      font:var(--caption-semi-bold-11-13);\n    }\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n\n  .agreement {\n    padding: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n    .top {\n      align-items: center;\n      gap: 8px;\n      display: flex;\n      box-sizing: border-box;\n      width: 100%;\n\n      .icon {\n        cursor: pointer;\n      }\n\n      .title {\n        width: 100%;\n        color: ", ";\n      }\n    }\n\n    .content {\n      margin-top: 16px;\n      border-radius: 0.5rem;\n      border: 1px solid var(--dark-opacity-5);\n      padding: 8px 16px;\n      max-height: 88px;\n      box-sizing: border-box;\n      overflow-y: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      color: var(--dark);\n      font:var(--body-regular-14-17);\n      div:not(.text) {\n        margin: 0 auto;\n      }\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n\n  .error {\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    color: var(--red);\n    p {\n      margin: 0 !important;\n      font:var(--caption-semi-bold-11-13);\n    }\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n"])), function (props) { return props.$hasError ? "15px" : "16px"; }, function (props) { return props.$hasError ? "2px solid var(--red)" : "1px solid var(--dark-opacity-5)"; }, function (props) { return props.$hasError ? ' var(--red)' : ' var(--dark)'; });
+exports.AgreementStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n\n  .agreement {\n    padding: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n    .top {\n      align-items: center;\n      gap: 8px;\n      display: flex;\n      box-sizing: border-box;\n      width: 100%;\n\n      .icon {\n        cursor: pointer;\n          *{\n              display: block;\n          }\n      }\n\n      .title {\n        width: 100%;\n        color: ", ";\n      }\n    }\n\n    .content {\n      margin-top: 16px;\n      border-radius: 0.5rem;\n      border: 1px solid var(--dark-opacity-5);\n      padding: 8px 16px;\n      max-height: 88px;\n      box-sizing: border-box;\n      overflow-y: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      color: var(--dark);\n      font:var(--body-regular-14-17);\n      div:not(.text) {\n        margin: 0 auto;\n      }\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n\n  .error {\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    color: var(--red);\n    p {\n      margin: 0 !important;\n      font:var(--caption-semi-bold-11-13);\n    }\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n\n  .agreement {\n    padding: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n    .top {\n      align-items: center;\n      gap: 8px;\n      display: flex;\n      box-sizing: border-box;\n      width: 100%;\n\n      .icon {\n        cursor: pointer;\n          *{\n              display: block;\n          }\n      }\n\n      .title {\n        width: 100%;\n        color: ", ";\n      }\n    }\n\n    .content {\n      margin-top: 16px;\n      border-radius: 0.5rem;\n      border: 1px solid var(--dark-opacity-5);\n      padding: 8px 16px;\n      max-height: 88px;\n      box-sizing: border-box;\n      overflow-y: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      color: var(--dark);\n      font:var(--body-regular-14-17);\n      div:not(.text) {\n        margin: 0 auto;\n      }\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n\n  .error {\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    color: var(--red);\n    p {\n      margin: 0 !important;\n      font:var(--caption-semi-bold-11-13);\n    }\n\n    svg {\n      margin-right: 8px;\n    }\n  }\n"])), function (props) { return props.$hasError ? "15px" : "16px"; }, function (props) { return props.$hasError ? "2px solid var(--red)" : "1px solid var(--dark-opacity-5)"; }, function (props) { return props.$hasError ? ' var(--red)' : ' var(--dark)'; });
 var templateObject_1;

package/dist/components/Agreement/stories/Agreement.stories.js

@@ -1,13 +1,25 @@
 "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.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var Agreement_1 = __importDefault(require("../Agreement"));
 exports.default = {
     title: 'Components/Agreement',
-    component: Agreement_1.default,
+    component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '305px' } }, { children: (0, jsx_runtime_1.jsx)(Agreement_1.default, __assign({}, props)) })); },
     tags: ['autodocs'],
     argTypes: {}
 };

package/dist/components/Alert/props.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertDefault = exports.iconNames = exports.variants = void 0;
-var Icon_1 = require("../Icon");
+var iconList_1 = require("../Icon/iconList");
 exports.variants = {
     warning: "var(--yellow)",
     danger: "var(--red)",
     success: "var(--green)",
 };
-exports.iconNames = Object.keys(Icon_1.iconList);
+exports.iconNames = Object.keys(iconList_1.iconList);
 exports.AlertDefault = {
     title: "Bir hata oluştu",
     children: null,

package/dist/components/Alert/stories/Alert.stories.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 var Alert_1 = __importDefault(require("../Alert"));
 var props_1 = require("../props");
-var Icon_1 = require("../../Icon");
+var iconList_1 = require("../../Icon/iconList");
 exports.default = {
     title: 'Components/Alert',
     component: Alert_1.default,
     tags: ['autodocs'],
     argTypes: {
         variant: { control: 'select', options: props_1.variants },
-        icon: { control: 'select', options: Object.keys(Icon_1.iconList) },
+        icon: { control: 'select', options: Object.keys(iconList_1.iconList) },
     }
 };
 exports.Default = {

package/dist/components/AutocompleteInput/AutocompleteInput.js

@@ -135,8 +135,8 @@ var AutocompleteInput = function (_a) {
         if (e === void 0) { e = null; }
         onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e === null || e === void 0 ? void 0 : e.target), { value: realInputValue }) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ "$width": width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: label }), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readOnly: readonly, disabled: disabled, "$hasError": hasError, "$isShowDropdown": showDropdown, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, autoComplete: autoComplete, type: type, "$hasAutoUppercase": hasAutoUppercase }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput", autoComplete: autoComplete }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && !hasLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", color: "var(--dark)", strokeWidth: "2.5px", width: "24px", height: "24px" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ "$dropdownMaxHeight": dropdownMaxHeight, "$dropdownPosition": dropdownPosition }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: (0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownInnerStyled, __assign({ ref: dropdownRef, "$dropdownMaxHeight": dropdownMaxHeight }, { children: (dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.length) > 0 ? (dropdownList.map(function (item, key) {
+    return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ "$width": width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: label }), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readOnly: readonly, disabled: disabled, "$hasError": hasError, "$isShowDropdown": showDropdown, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, autoComplete: autoComplete, type: type, "$hasAutoUppercase": hasAutoUppercase }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput", autoComplete: autoComplete }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && !hasLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CloseMedium", color: "var(--dark)" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ "$dropdownMaxHeight": dropdownMaxHeight, "$dropdownPosition": dropdownPosition }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: (0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownInnerStyled, __assign({ ref: dropdownRef, "$dropdownMaxHeight": dropdownMaxHeight }, { children: (dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.length) > 0 ? (dropdownList.map(function (item, key) {
                                     return (0, jsx_runtime_1.jsx)("li", __assign({ className: (0, classnames_1.default)({ "isFixedBottom": item.isFixedBottom }, { "isSelected": key === selectedIndex }), onClick: function () { return handleSelectValue(item.value, item.label); } }, { children: item.label }));
-                                })) : (0, jsx_runtime_1.jsx)("li", __assign({ className: "isFixedBottom hasNoResult" }, { children: noResultTemplate() })) })) })) })))] })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
+                                })) : (0, jsx_runtime_1.jsx)("li", __assign({ className: "isFixedBottom hasNoResult" }, { children: noResultTemplate() })) })) })) })))] })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
 };
 exports.default = AutocompleteInput;

package/dist/components/Badges/layouts/belt/belt.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BadgesStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../../../constants/devices");
-exports.BadgesStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n  position: relative;\n  svg{\n    display: block;\n      ", "\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n    ", "\n  }\n"], ["\n  filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n  position: relative;\n  svg{\n    display: block;\n      ", "\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n    ", "\n  }\n"])), function (props) { return props.$hasResponsive && "\n        @media only screen and ".concat(devices_1.devices.lg, " {\n          width: 60px;\n          height: 60px;\n        }\n      "); }, function (props) { return props.$size === "small" ? "60px" : "90px"; }, function (props) { return props.$size === "small" ? "15px" : "27px"; }, function (props) { return props.$size === "small" ? "-5px" : "-7px"; }, function (props) {
+exports.BadgesStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n  position: relative;\n  display: block;\n  svg{\n    display: block;\n      ", "\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n    ", "\n  }\n"], ["\n  filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n  position: relative;\n  display: block;\n  svg{\n    display: block;\n      ", "\n  }\n  .text{\n    position: absolute;\n    width: ", ";\n    text-align: center;\n    height: 16px;\n    color: white;\n    transform: rotate(-45deg);\n    top: ", ";\n    left: ", ";\n    font: ", ";\n    ", "\n  }\n"])), function (props) { return props.$hasResponsive && "\n        @media only screen and ".concat(devices_1.devices.lg, " {\n          width: 60px;\n          height: 60px;\n        }\n      "); }, function (props) { return props.$size === "small" ? "60px" : "90px"; }, function (props) { return props.$size === "small" ? "15px" : "27px"; }, function (props) { return props.$size === "small" ? "-5px" : "-7px"; }, function (props) {
     switch (props.$size) {
         case 'small':
             return "var(--caption-bold-10-12)";

package/dist/components/Badges/layouts/dark/dark.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DarkStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.DarkStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  left: ", ";\n  top: ", ";\n  z-index: 2;\n  svg{\n    display: block;\n  }\n"], ["\n  position: relative;\n  left: ", ";\n  top: ", ";\n  z-index: 2;\n  svg{\n    display: block;\n  }\n"])), function (props) { return props.$left ? props.$left : "0"; }, function (props) { return props.$top ? props.$top : "0"; });
+exports.DarkStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  left: ", ";\n  top: ", ";\n  z-index: 2;\n  display: block;\n  svg{\n    display: block;\n  }\n"], ["\n  position: relative;\n  left: ", ";\n  top: ", ";\n  z-index: 2;\n  display: block;\n  svg{\n    display: block;\n  }\n"])), function (props) { return props.$left ? props.$left : "0"; }, function (props) { return props.$top ? props.$top : "0"; });
 var templateObject_1;

package/dist/components/Badges/layouts/text/text.styled.js

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.TextStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: inline-block;\n    vertical-align: middle;\n    font: var(--caption-semi-bold-10-12);\n    border-radius: 3px;\n    padding: 0 8px 0 8px;\n    height: 17px;\n    line-height: 17px;\n    background-color: ", ";\n    color: ", ";\n"], ["\n    display: inline-block;\n    vertical-align: middle;\n    font: var(--caption-semi-bold-10-12);\n    border-radius: 3px;\n    padding: 0 8px 0 8px;\n    height: 17px;\n    line-height: 17px;\n    background-color: ", ";\n    color: ", ";\n"])), function (props) {
+exports.TextStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font: var(--caption-semi-bold-10-12);\n    border-radius: 3px;\n    padding: 0 8px 0 8px;\n    height: 17px;\n    line-height: 17px;\n    background-color: ", ";\n    color: ", ";\n"], ["\n    font: var(--caption-semi-bold-10-12);\n    border-radius: 3px;\n    padding: 0 8px 0 8px;\n    height: 17px;\n    line-height: 17px;\n    background-color: ", ";\n    color: ", ";\n"])), function (props) {
     switch (props.$variant) {
         case 'primary':
             return "var(--primary)";

package/dist/components/Badges/stories/Badges.stories.js

@@ -1,14 +1,39 @@
 "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.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var Badges_1 = __importDefault(require("../Badges"));
 var props_1 = require("../props");
 exports.default = {
     title: 'Components/Badges',
-    component: Badges_1.default,
+    component: function (props) {
+        var width = "";
+        switch (props.layout) {
+            case 'belt':
+                width = "90px";
+            case 'dark':
+                width = "80px";
+            case 'text':
+                width = "90px";
+            default:
+                width = "90px";
+        }
+        return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: width } }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, __assign({}, props)) })));
+    },
     tags: ['autodocs'],
     argTypes: {
         layout: { control: 'select', options: props_1.layouts },

package/dist/components/BannerCard/stories/BannerCard.stories.js

@@ -27,8 +27,8 @@ exports.default = {
 };
 exports.Default = {
     args: {
-        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/artan-dijitallesme-gezegenimizi-etkiliyor.svg", height: "260px", alt: "test" }),
-        imgMobile: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/artan-dijitallesme-gezegenimizi-etkiliyor.svg", height: "260px", alt: "test" }),
+        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/turkiyeninilk-karbon-notr-teslimat-yapan-e-ticaret-sitesi.svg", height: "260px", alt: "test" }),
+        imgMobile: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/turkiyeninilk-karbon-notr-teslimat-yapan-e-ticaret-sitesi.svg", height: "260px", alt: "test" }),
         title: 'ARTAN DİJİTALLEŞME GEZEGENİMİZİ ETKİLİYOR',
         description: 'Birkaç kez kullanacağın cihazları kiralayarak döngüsel ekonomiye katkı sağlayabilir, e-atıklara birlikte çözüm olabiliriz.',
         shortDesc: 'Cihazlarını kiralayarak döngüsel ekonomiye katkı sağla!',

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -51,7 +51,7 @@ var Breadcrumbs = function (_a) {
     };
     return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsWrapper, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsList, { children: data === null || data === void 0 ? void 0 : data.map(function (breadCrumbItem, key) {
                     var _a;
-                    return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, __assign({ onClick: onClickBackIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: "3px", name: "ArrowLeftBig", width: "16px", height: "16px" }) })), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.DropdownList, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { rowLength: breadCrumbItem.subMenuRowLength || subMenuRowLength, data: breadCrumbItem.children.filter(function (item) { return !item.isHideDesktop; }), hasActiveItem: true }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.ButtonLinkComponentSm, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: __assign(__assign({}, breadCrumbItem), { component: function (_a) {
+                    return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, __assign({ onClick: onClickBackIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft" }) })), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.DropdownList, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { rowLength: breadCrumbItem.subMenuRowLength || subMenuRowLength, data: breadCrumbItem.children.filter(function (item) { return !item.isHideDesktop; }), hasActiveItem: true }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.ButtonLinkComponentSm, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: __assign(__assign({}, breadCrumbItem), { component: function (_a) {
                                                     var children = _a.children;
                                                     return (0, jsx_runtime_1.jsx)("a", __assign({ onClick: onClickBackIcon }, { children: children }));
                                                 } }) }, { children: (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { children: breadCrumbItem.name }) })) }), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.ButtonLinkComponentLg, { children: (0, jsx_runtime_1.jsxs)(ButtonLinkComponent, __assign({ item: breadCrumbItem }, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { children: breadCrumbItem.name })] })) })] }))] }, key));

package/dist/components/Breadcrumbs/Breadcrumbs.styled.js

@@ -14,13 +14,13 @@ exports.BreadcrumbsWrapper = styled_components_1.default.div(templateObject_1 ||
 exports.BreadcrumbsList = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  padding: 0;\n  margin:0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  padding: 0;\n  margin:0;\n"])));
 exports.BreadcrumbsListItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  margin: 0 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  @media only screen and ", " {\n    &:not(:nth-child(2)) {\n      display: none;\n    }\n  }\n  > a {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: inherit;\n  }\n  &:hover{\n    ul{\n      opacity: 1;\n      visibility: visible;\n      transform: translateY(0);\n    }\n    button {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n"], ["\n  position: relative;\n  margin: 0 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  @media only screen and ", " {\n    &:not(:nth-child(2)) {\n      display: none;\n    }\n  }\n  > a {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: inherit;\n  }\n  &:hover{\n    ul{\n      opacity: 1;\n      visibility: visible;\n      transform: translateY(0);\n    }\n    button {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n"])), devices_1.devices.xl);
 exports.BreadcrumbsListItemInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  margin: 0;\n  display: inline-block;\n  color: var(--dark-opacity-50);\n  max-width: 150px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font:var(--caption-bold-12-15);\n  vertical-align: middle;\n"], ["\n  position: relative;\n  margin: 0;\n  display: inline-block;\n  color: var(--dark-opacity-50);\n  max-width: 150px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font:var(--caption-bold-12-15);\n  vertical-align: middle;\n"])));
-exports.ButtonLinkComponentSm = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: none;\n    @media only screen and ", " {\n        display: inline-block;\n    }\n"], ["\n    display: none;\n    @media only screen and ", " {\n        display: inline-block;\n    }\n"])), devices_1.devices.xl);
-exports.ButtonLinkComponentLg = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: inline-block;\n    @media only screen and ", " {\n        display: none;\n    }\n"], ["\n    display: inline-block;\n    @media only screen and ", " {\n        display: none;\n    }\n"])), devices_1.devices.xl);
-exports.BreadcrumbsListItemIconWrapper = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: inline-block;\n  margin-left: 16px;\n  margin-right: 16px;\n  color:var(--dark-opacity-50);\n\n  @media only screen and ", " {\n    display: none;\n  }\n  svg {\n    display: block;\n  }\n"], ["\n  display: inline-block;\n  margin-left: 16px;\n  margin-right: 16px;\n  color:var(--dark-opacity-50);\n\n  @media only screen and ", " {\n    display: none;\n  }\n  svg {\n    display: block;\n  }\n"])), devices_1.devices.xl);
+exports.ButtonLinkComponentSm = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: none;\n    @media only screen and ", " {\n        display: inline-block;\n        span{\n            display: block;\n        }\n    }\n"], ["\n    display: none;\n    @media only screen and ", " {\n        display: inline-block;\n        span{\n            display: block;\n        }\n    }\n"])), devices_1.devices.xl);
+exports.ButtonLinkComponentLg = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: inline-block;\n    a{\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    }\n    @media only screen and ", " {\n        display: none;\n    }\n"], ["\n    display: inline-block;\n    a{\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    }\n    @media only screen and ", " {\n        display: none;\n    }\n"])), devices_1.devices.xl);
+exports.BreadcrumbsListItemIconWrapper = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 16px;\n  margin-right: 16px;\n  color:var(--dark-opacity-50);\n  > *{\n    display: block;    \n  }\n  @media only screen and ", " {\n    display: none;\n  }\n  svg {\n    display: block;\n  }\n"], ["\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 16px;\n  margin-right: 16px;\n  color:var(--dark-opacity-50);\n  > *{\n    display: block;    \n  }\n  @media only screen and ", " {\n    display: none;\n  }\n  svg {\n    display: block;\n  }\n"])), devices_1.devices.xl);
 exports.BreadcrumbsListItemBackIconWrapper = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin-left: 0;\n  padding-right: 16px;\n  display: none;\n  @media only screen and ", " {\n    display: block;\n  }\n  div {\n    display: block;\n  }\n"], ["\n  margin-left: 0;\n  padding-right: 16px;\n  display: none;\n  @media only screen and ", " {\n    display: block;\n  }\n  div {\n    display: block;\n  }\n"])), devices_1.devices.xl);
 exports.BreadcrumbsListDropdownWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n"])));
 exports.BreadcrumbsListDropdownOpener = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 0.25rem;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: white;\n  height: 24px;\n  cursor: pointer;\n  outline: none !important;\n  font:var(--caption-bold-12-15);\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 0.25rem;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: white;\n  height: 24px;\n  cursor: pointer;\n  outline: none !important;\n  font:var(--caption-bold-12-15);\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"])));
-exports.DropdownList = styled_components_1.default.ul(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  z-index:5;\n  padding: 0;\n  position: absolute;\n  left: 55px;\n  top: calc(100% + 8px);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(10px);\n  transition: all 0.2s ease-in-out;\n"], ["\n  z-index:5;\n  padding: 0;\n  position: absolute;\n  left: 55px;\n  top: calc(100% + 8px);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(10px);\n  transition: all 0.2s ease-in-out;\n"])));
+exports.DropdownList = styled_components_1.default.ul(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  z-index:5;\n  padding: 0;\n  position: absolute;\n  left: 48px;\n  top: calc(100% + 8px);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(10px);\n  transition: all 0.2s ease-in-out;\n"], ["\n  z-index:5;\n  padding: 0;\n  position: absolute;\n  left: 48px;\n  top: calc(100% + 8px);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(10px);\n  transition: all 0.2s ease-in-out;\n"])));
 exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 2rem 15px 2rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 2rem 15px 0.5rem 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"], ["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 2rem 15px 2rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 2rem 15px 0.5rem 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"])), devices_1.devices.xl);
 exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 0.5rem;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"], ["\n  display: block;\n  font:var(--caption-bold-12-15);\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px var(--box-shadow-color);\n    border-radius: 0.5rem;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"])), function (props) { return (props.$isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.$isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/dist/components/Button/Button.js

@@ -33,11 +33,11 @@ var classnames_1 = __importDefault(require("classnames"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Loader_1 = __importDefault(require("../Loader"));
 var Children = function (props) {
-    var children = props.children, icon = props.icon, iconStrokeWidth = props.iconStrokeWidth, isLoading = props.isLoading, iconSize = props.iconSize;
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('children', { 'isLoading': isLoading }) }, { children: children })), icon && ((0, jsx_runtime_1.jsx)(Button_styled_1.IconStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: iconSize, height: iconSize, strokeWidth: iconStrokeWidth, name: icon }) }))] });
+    var children = props.children, icon = props.icon, isLoading = props.isLoading, iconSize = props.iconSize;
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('children', { 'isLoading': isLoading }) }, { children: children })), icon && ((0, jsx_runtime_1.jsx)(Button_styled_1.IconStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: iconSize, height: iconSize, name: icon }) }))] });
 };
 var Button = (0, react_1.forwardRef)(function (props, ref) {
-    var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, icon = props.icon, children = props.children, _a = props.iconStrokeWidth, iconStrokeWidth = _a === void 0 ? props_1.ButtonDefault.iconStrokeWidth : _a, _b = props.iconSize, iconSize = _b === void 0 ? props_1.ButtonDefault.iconSize : _b, _c = props.tooltip, tooltip = _c === void 0 ? props_1.ButtonDefault.tooltip : _c, other = __rest(props, ["type", "isLoading", "onClick", "disabled", "size", "variant", "width", "icon", "children", "iconStrokeWidth", "iconSize", "tooltip"]);
-    return ((0, jsx_runtime_1.jsxs)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, "$size": size, "$variant": variant, "$width": width, "$icon": icon, type: type, ref: ref, "$isLoading": isLoading, "$tooltip": tooltip }, other, { children: [(0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, iconStrokeWidth: iconStrokeWidth, icon: icon, iconSize: iconSize }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), children] })), tooltip && (0, jsx_runtime_1.jsx)("div", __assign({ className: "buttonTooltip" }, { children: tooltip }))] })));
+    var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, _a = props.icon, icon = _a === void 0 ? props_1.ButtonDefault.icon : _a, children = props.children, _b = props.iconSize, iconSize = _b === void 0 ? props_1.ButtonDefault.iconSize : _b, _c = props.tooltip, tooltip = _c === void 0 ? props_1.ButtonDefault.tooltip : _c, other = __rest(props, ["type", "isLoading", "onClick", "disabled", "size", "variant", "width", "icon", "children", "iconSize", "tooltip"]);
+    return ((0, jsx_runtime_1.jsxs)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, "$size": size, "$variant": variant, "$width": width, "$icon": icon, type: type, ref: ref, "$isLoading": isLoading, "$tooltip": tooltip }, other, { children: [(0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, icon: icon, iconSize: iconSize }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: "24px", height: "24px", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), children] })), tooltip && (0, jsx_runtime_1.jsx)("div", __assign({ className: "buttonTooltip" }, { children: tooltip }))] })));
 });
 exports.default = Button;

package/dist/components/Button/props.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonDefault = exports.iconNames = exports.sizes = exports.variants = void 0;
-var Icon_1 = require("../Icon");
+var iconList_1 = require("../Icon/iconList");
 exports.variants = ['primary', 'secondary', 'inverted', 'ghost'];
 exports.sizes = ['big', 'medium', 'small', 'xsmall'];
-exports.iconNames = Object.keys(Icon_1.iconList);
+exports.iconNames = Object.keys(iconList_1.iconList);
 exports.ButtonDefault = {
     size: 'medium',
     variant: 'primary',
@@ -13,5 +13,5 @@ exports.ButtonDefault = {
     type: "button",
     iconSize: "1rem",
     tooltip: null,
-    iconStrokeWidth: "2px",
+    icon: null,
 };

package/dist/components/Button/stories/Button.stories.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = exports.Default = void 0;
 var Button_1 = __importDefault(require("../Button"));
 var props_1 = require("../props");
-var Icon_1 = require("../../Icon");
+var iconList_1 = require("../../Icon/iconList");
 exports.default = {
     title: 'Components/Button',
     component: Button_1.default,
@@ -25,7 +25,7 @@ exports.default = {
     argTypes: {
         variant: { control: 'select', options: props_1.variants },
         size: { control: 'select', options: props_1.sizes },
-        icon: { control: 'select', options: Object.keys(Icon_1.iconList) },
+        icon: { control: 'select', options: Object.keys(iconList_1.iconList) },
         onClick: { action: 'clicked' }
     }
 };
@@ -42,5 +42,5 @@ exports.Default = {
     },
 };
 exports.Icon = {
-    args: __assign(__assign({}, exports.Default.args), { icon: 'Again', iconSize: "1rem" }),
+    args: __assign(__assign({}, exports.Default.args), { icon: 'ArrowSmallRight', iconSize: "1rem" }),
 };

package/dist/components/CategoryMenu/CategoryMenu.js

@@ -38,7 +38,7 @@ var CategoryMenu = function (_a) {
     };
     var MenuButton = function (_a) {
         var item = __rest(_a, []);
-        return ((0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItem, __assign({ "$isActiveCategory": item.isActive }, { children: [(0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: item }, { children: (0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItemButtonInner, { children: [(0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: item.icon, hasColorChanged: !["Lgbt", "Lightning"].includes(item.icon) }) }), (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonTitle, { children: item.name })] }) })), item.children] })));
+        return ((0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItem, __assign({ "$isActiveCategory": item.isActive }, { children: [(0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: item }, { children: (0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItemButtonInner, { children: [(0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: item.icon, hasColorChanged: !["Lgbt", "Lightning", "Flash"].includes(item.icon) }) }), (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonTitle, { children: item.name })] }) })), item.children] })));
     };
     return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryMenuWrapper, { children: data === null || data === void 0 ? void 0 : data.map(function (item) {
             return ((0, jsx_runtime_1.jsx)(MenuButton, __assign({}, item, { children: item.children.length > 0 && ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: item.children, rowLength: item.subMenuRowLength || subMenuRowLength }) })) }), item.id));

package/dist/components/CategoryMenu/CategoryMenu.styled.js

@@ -30,8 +30,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubMenu = exports.CategoryItemButtonTitle = exports.CategoryItemButtonIcon = exports.CategoryItemButtonInner = exports.CategoryItem = exports.CategoryMenuWrapper = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"])));
-var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"], ["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"])));
-exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75)\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75)\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n        .componentWrapper > span{\n            ".concat(hoverAndActive, "\n        }\n    ") : ""; });
+var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n        color: var(--dark);\n    }\n"], ["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n        color: var(--dark);\n    }\n"])));
+exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n        .componentWrapper > span{\n            ".concat(hoverAndActive, "\n        }\n    ") : ""; });
 exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"], ["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"])));
 exports.CategoryItemButtonIcon = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    height: 24px;\n    display:block;\n"], ["\n    height: 24px;\n    display:block;\n"])));
 exports.CategoryItemButtonTitle = styled_components_1.default.strong(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin-top: 8px;\n    display:block;\n    font:var(--caption-semi-bold-12-15);\n"], ["\n    margin-top: 8px;\n    display:block;\n    font:var(--caption-semi-bold-12-15);\n"])));

package/dist/components/Checkbox/Checkbox.styled.js

@@ -34,7 +34,7 @@ exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (
         default:
             return "16px";
     }
-}, function (props) { return (props.disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$valid ? '#000000' : 'var(--red)'; }, function (props) { return !props.$valid && 'color:var(--red)'; }, function (props) {
+}, function (props) { return (props.disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, function (props) { return !props.$valid && 'color:var(--red)'; }, function (props) {
     switch (props.$size) {
         case 'small':
             return "var(--caption-semi-bold-12-15)";

package/dist/components/CouponCode/CouponCode.js

@@ -42,6 +42,6 @@ var CouponCode = function (_a) {
         setIsExpanded(expanded);
     }, [expanded]);
     var toggleExpand = function () { return setIsExpanded(function (prevState) { return !prevState; }); };
-    return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({ "$expanded": isExpanded }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ onClick: toggleExpand, className: "header" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown", width: "24px", height: "24px" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "body" }, { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { disabled: isInputDisabled, name: name, onChange: onChange, hasError: hasError, errorMessage: errorMessage, value: value, autoFocus: autoFocus, label: "", width: "auto", placeholder: placeholder, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: buttonWidth, isLoading: isButtonLoading, disabled: buttonDisabled, size: "big", variant: buttonVariant }, { children: buttonText }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({ "$expanded": isExpanded }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ onClick: toggleExpand, className: "header" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "body" }, { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { disabled: isInputDisabled, name: name, onChange: onChange, hasError: hasError, errorMessage: errorMessage, value: value, autoFocus: autoFocus, label: "", width: "auto", placeholder: placeholder, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: buttonWidth, isLoading: isButtonLoading, disabled: buttonDisabled, size: "big", variant: buttonVariant }, { children: buttonText }))] }))] })));
 };
 exports.default = CouponCode;

package/dist/components/CouponCode/CouponCode.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CouponCodeStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.CouponCodeStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0;\n  border-radius: 0.5rem;\n  background-color: var(--dark-opacity-3);\n  .header{\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 1rem;\n    .title{\n      font:var(--body-bold-14-17);\n      display: block;\n    }\n    svg{\n      transition: all .2s ease;\n      transform: ", ";\n      color: var(--primary);\n    }\n  }\n  .body{\n    padding: ", " ;\n    transition: all .2s ease;\n    position: relative;\n    overflow: hidden;\n    display: grid;\n    align-items: flex-start;\n    justify-content: space-between;\n    grid-template-columns: 1fr auto;\n    max-height: ", ";\n    /*input{\n      background-color: white;\n    }*/\n    button{\n      margin-left: 1rem;\n    }\n  }\n"], ["\n  padding: 0;\n  border-radius: 0.5rem;\n  background-color: var(--dark-opacity-3);\n  .header{\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 1rem;\n    .title{\n      font:var(--body-bold-14-17);\n      display: block;\n    }\n    svg{\n      transition: all .2s ease;\n      transform: ", ";\n      color: var(--primary);\n    }\n  }\n  .body{\n    padding: ", " ;\n    transition: all .2s ease;\n    position: relative;\n    overflow: hidden;\n    display: grid;\n    align-items: flex-start;\n    justify-content: space-between;\n    grid-template-columns: 1fr auto;\n    max-height: ", ";\n    /*input{\n      background-color: white;\n    }*/\n    button{\n      margin-left: 1rem;\n    }\n  }\n"])), function (props) { return props.$expanded ? 'rotate(180deg)' : 'none'; }, function (props) { return props.$expanded ? '0 1rem 1rem 1rem' : '0 1rem 0 1rem'; }, function (props) { return props.$expanded ? '96px' : '0'; });
+exports.CouponCodeStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0;\n  border-radius: 0.5rem;\n  background-color: var(--dark-opacity-3);\n  .header{\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 1rem;\n    height: 1.5rem;\n    box-sizing: content-box;\n    .title{\n      font:var(--body-bold-14-17);\n      display: block;\n    }\n    svg{\n      transition: all .2s ease;\n      transform: ", ";\n      color: var(--primary);\n    }\n  }\n  .body{\n    padding: ", " ;\n    transition: all .2s ease;\n    position: relative;\n    overflow: hidden;\n    display: grid;\n    align-items: flex-start;\n    justify-content: space-between;\n    grid-template-columns: 1fr auto;\n    max-height: ", ";\n    /*input{\n      background-color: white;\n    }*/\n    button{\n      margin-left: 1rem;\n    }\n  }\n"], ["\n  padding: 0;\n  border-radius: 0.5rem;\n  background-color: var(--dark-opacity-3);\n  .header{\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 1rem;\n    height: 1.5rem;\n    box-sizing: content-box;\n    .title{\n      font:var(--body-bold-14-17);\n      display: block;\n    }\n    svg{\n      transition: all .2s ease;\n      transform: ", ";\n      color: var(--primary);\n    }\n  }\n  .body{\n    padding: ", " ;\n    transition: all .2s ease;\n    position: relative;\n    overflow: hidden;\n    display: grid;\n    align-items: flex-start;\n    justify-content: space-between;\n    grid-template-columns: 1fr auto;\n    max-height: ", ";\n    /*input{\n      background-color: white;\n    }*/\n    button{\n      margin-left: 1rem;\n    }\n  }\n"])), function (props) { return props.$expanded ? 'rotate(180deg)' : 'none'; }, function (props) { return props.$expanded ? '0 1rem 1rem 1rem' : '0 1rem 0 1rem'; }, function (props) { return props.$expanded ? '96px' : '0'; });
 var templateObject_1;

package/dist/components/DescriptionCard/AccordionItem.js

@@ -22,6 +22,6 @@ var DescriptionCard_1 = __importDefault(require("./DescriptionCard"));
 var AccordionItem = function (_a) {
     var data = _a.data;
     var _b = (0, react_1.useState)(false), show = _b[0], setShow = _b[1];
-    return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.AccordionItemWrapper, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.AccordionItemHeader, __assign({ "$show": show, onClick: function () { return setShow(!show); } }, { children: [(0, jsx_runtime_1.jsx)("strong", { children: data === null || data === void 0 ? void 0 : data.title }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: show ? "NegativeSmall" : "PlusSmall", width: "24px", height: "24px", strokeWidth: "1.5px" }) }))] })), show && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.AccordionItemBody, { children: (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { list: data.list, hasHeader: false, hasRounded: false, hasBorder: false }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.AccordionItemWrapper, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.AccordionItemHeader, __assign({ "$show": show, onClick: function () { return setShow(!show); } }, { children: [(0, jsx_runtime_1.jsx)("strong", { children: data === null || data === void 0 ? void 0 : data.title }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: show ? "NegativeSmall" : "PlusSmall" }) }))] })), show && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.AccordionItemBody, { children: (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { list: data.list, hasHeader: false, hasRounded: false, hasBorder: false }) }))] }));
 };
 exports.default = AccordionItem;