krl-alfred 1.76.36 → 1.76.38

package/dist/components/Accordion/Accordion.js

@@ -34,7 +34,7 @@ var Accordion = function (props) {
             }, 800);
         }
     }, [hasScrollOnFocus, activeIndex]);
-    return ((0, jsx_runtime_1.jsxs)(Accordion_styled_1.AccordionStyled, { children: [title && (0, jsx_runtime_1.jsx)(Accordion_styled_1.AccordionTitle, __assign({ size: size }, { children: title })), (0, jsx_runtime_1.jsx)(Accordion_styled_1.Wrapper, __assign({ ref: wrapperRef }, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(AccordionItem_1.default, { active: active, setActive: setActive, size: size, collapseAll: collapseAll, index: key, title: item.question, content: item.answer }, key)); }) })), showLink && ((0, jsx_runtime_1.jsx)(Accordion_styled_1.Footer, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: linkOnClick }, { children: linkText })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Accordion_styled_1.AccordionStyled, { children: [title && (0, jsx_runtime_1.jsx)(Accordion_styled_1.AccordionTitle, __assign({ "$size": size }, { children: title })), (0, jsx_runtime_1.jsx)(Accordion_styled_1.Wrapper, __assign({ ref: wrapperRef }, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(AccordionItem_1.default, { active: active, setActive: setActive, size: size, collapseAll: collapseAll, index: key, title: item.question, content: item.answer }, key)); }) })), showLink && ((0, jsx_runtime_1.jsx)(Accordion_styled_1.Footer, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: linkOnClick }, { children: linkText })) }))] }));
 };
 Accordion.defaultProps = {};
 exports.default = Accordion;

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

@@ -11,10 +11,10 @@ exports.Footer = exports.ItemContent = exports.ItemTitle = exports.Item = export
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.AccordionStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-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.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.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.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.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 (props) {
             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 }, active: (active === index || activeItem) }, { 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', 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 } }) }))] }));
 };
 exports.default = AccordionItem;

package/dist/components/Accordion/props.js

@@ -2,4 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sizes = void 0;
 exports.sizes = ['large', 'medium'];
-var AccordionDefault = { activeIndex: 0, linkText: 'Daha Fazla Soru Göster', showLink: false, hasScrollOnFocus: false };
+var AccordionDefault = {
+    activeIndex: 0,
+    linkText: 'Daha Fazla Soru Göster',
+    showLink: false,
+    hasScrollOnFocus: false
+};

package/dist/components/Button/Button.js

@@ -23,11 +23,11 @@ var Loader_1 = __importDefault(require("../Loader"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var Children = function (props) {
     var children = props.children, icon = props.icon, iconStrokeWidth = props.iconStrokeWidth, isLoading = props.isLoading;
-    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, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: iconStrokeWidth, name: icon, width: "16px", height: "16px" }) })))] });
+    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, { strokeWidth: iconStrokeWidth, name: icon, width: "16px", height: "16px" }) }))] });
 };
 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, iconStrokeWidth = props.iconStrokeWidth;
-    return ((0, jsx_runtime_1.jsx)(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 }, { children: (0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, iconStrokeWidth: iconStrokeWidth, icon: icon }, { 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] })) })));
+    return ((0, jsx_runtime_1.jsx)(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 }, { children: (0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, iconStrokeWidth: iconStrokeWidth, icon: icon }, { 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] })) })));
 });
 Button.propTypes = {
     iconStrokeWidth: prop_types_1.default.string,

package/dist/components/Button/Button.styled.js

@@ -31,7 +31,7 @@ exports.IconStyled = exports.ButtonStyled = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: var(--primary);\n  color: white;\n  border: 1px solid transparent;\n  font: ", ";\n  \n  @media only screen and ", " {\n    &:hover {\n      background-color: var(--primary-hover);\n    }\n  }\n \n\n  &:active {\n    background-color: var(--primary-press);\n    @media only screen and ", " {\n      background-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"], ["\n  background-color: var(--primary);\n  color: white;\n  border: 1px solid transparent;\n  font: ", ";\n  \n  @media only screen and ", " {\n    &:hover {\n      background-color: var(--primary-hover);\n    }\n  }\n \n\n  &:active {\n    background-color: var(--primary-press);\n    @media only screen and ", " {\n      background-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"])), function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'xsmall':
             return "var(--caption-bold-12-15)";
         case 'small':
@@ -45,7 +45,7 @@ var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
 var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: var(--primary-opacity-5);\n  color: var(--primary);\n  border: 1px solid transparent;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n    }\n  }\n\n \n\n  &:active {\n    color: var(--primary-press);\n    @media only screen and ", " {\n      color: var(--primary-hover);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"], ["\n  background-color: var(--primary-opacity-5);\n  color: var(--primary);\n  border: 1px solid transparent;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n    }\n  }\n\n \n\n  &:active {\n    color: var(--primary-press);\n    @media only screen and ", " {\n      color: var(--primary-hover);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    background-color: var(--dark-opacity-5);\n    color: var(--dark-opacity-25);\n  }\n"])), function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'xsmall':
             return "var(--caption-bold-12-15)";
         case 'small':
@@ -59,7 +59,7 @@ var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
 var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: transparent;\n  color: var(--primary);\n  border: 1px solid;\n  border-color: var(--primary);\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n  \n  \n\n  &:active {\n    color: var(--primary-press);\n    border-color: var(--primary-press);\n\n    @media only screen and ", " {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    color: var(--dark-opacity-25);\n    border-color: var(--dark-opacity-25);\n  }\n"], ["\n  background-color: transparent;\n  color: var(--primary);\n  border: 1px solid;\n  border-color: var(--primary);\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n  \n  \n\n  &:active {\n    color: var(--primary-press);\n    border-color: var(--primary-press);\n\n    @media only screen and ", " {\n      color: var(--primary-hover);\n      border-color: var(--primary-hover);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    color: var(--dark-opacity-25);\n    border-color: var(--dark-opacity-25);\n  }\n"])), function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'xsmall':
             return "var(--caption-bold-12-15)";
         case 'small':
@@ -73,7 +73,7 @@ var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
 var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: transparent;\n  color: var(--primary);\n  border: 0;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary);\n      background-color: var(--primary-opacity-5);\n    }\n  }\n\n  \n  &:active {\n    color: var(--primary-hover);\n    background-color: var(--primary-opacity-5);\n\n    @media only screen and ", " {\n      color: var(--primary);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    color: var(--dark-opacity-25);\n  }\n"], ["\n  background-color: transparent;\n  color: var(--primary);\n  border: 0;\n  font: ", ";\n\n  @media only screen and ", " {\n    &:hover {\n      color: var(--primary);\n      background-color: var(--primary-opacity-5);\n    }\n  }\n\n  \n  &:active {\n    color: var(--primary-hover);\n    background-color: var(--primary-opacity-5);\n\n    @media only screen and ", " {\n      color: var(--primary);\n    }\n  }\n\n  &:disabled:not(.loading) {\n    color: var(--dark-opacity-25);\n  }\n"])), function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'xsmall':
             return "var(--body-bold-13-16)";
         case 'small':
@@ -86,8 +86,8 @@ var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
             return "var(--body-bold-14-17)";
     }
 }, devices_1.devices.mdUp, devices_1.devices.md);
-exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n  }\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n  }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
-    switch (props.variant) {
+exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n  }\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  padding: ", ";\n  cursor: pointer;\n  transition: all .2s;\n  width: ", ";\n  outline: none;\n  ", "\n  height: ", ";\n  &:disabled {\n    cursor: not-allowed;\n  }\n  .children{\n    margin-right: ", ";\n    background-color: transparent;\n    border-radius: inherit;\n    &:is(.isLoading){\n      background-color: inherit;\n    }\n    &:empty{\n      margin-right: 0;\n    }\n  }\n  .loadingContent{\n    position: absolute;\n    background-color: inherit;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 5;\n    border-radius: inherit;\n  }\n"])), function (props) { return props.$size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
+    switch (props.$variant) {
         case 'primary':
             return primary;
         case 'secondary':
@@ -100,7 +100,7 @@ exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (t
             return primary;
     }
 }, function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'big':
             return "56px;";
         case 'medium':
@@ -112,6 +112,6 @@ exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (t
         default:
             return "48px";
     }
-}, function (props) { return props.icon ? "10px" : "0"; });
+}, function (props) { return props.$icon ? "10px" : "0"; });
 exports.IconStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/CampaignCard/CampaignCard.js

@@ -19,7 +19,7 @@ var CampaignCard_styled_1 = require("./CampaignCard.styled");
 var Badges_1 = __importDefault(require("../Badges"));
 var InlineProgress_1 = __importDefault(require("../InlineProgress"));
 var CampaignCard = function (props) {
-    return ((0, jsx_runtime_1.jsxs)(CampaignCard_styled_1.CampaignCardStyled, __assign({}, props, { children: [props.hasDelivery && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "belt", title: props === null || props === void 0 ? void 0 : props.deliveryText }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: props.image })), (0, jsx_runtime_1.jsx)("strong", { className: "title", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.title } }), (props === null || props === void 0 ? void 0 : props.progressTitle) && (0, jsx_runtime_1.jsx)("strong", __assign({ className: "progressTitle" }, { children: props === null || props === void 0 ? void 0 : props.progressTitle })), !(props === null || props === void 0 ? void 0 : props.isProgressComplete) && (props === null || props === void 0 ? void 0 : props.activeStep) > 0 && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "progressBar" }, { children: (0, jsx_runtime_1.jsx)(InlineProgress_1.default, { activeStep: props === null || props === void 0 ? void 0 : props.activeStep, totalStep: props === null || props === void 0 ? void 0 : props.totalStep }) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(CampaignCard_styled_1.CampaignCardStyled, __assign({ "$size": props.size, onClick: props.onClick }, { children: [props.hasDelivery && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "belt", title: props === null || props === void 0 ? void 0 : props.deliveryText }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: props.image })), (0, jsx_runtime_1.jsx)("strong", { className: "title", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.title } }), (props === null || props === void 0 ? void 0 : props.progressTitle) && (0, jsx_runtime_1.jsx)("strong", __assign({ className: "progressTitle" }, { children: props === null || props === void 0 ? void 0 : props.progressTitle })), !(props === null || props === void 0 ? void 0 : props.isProgressComplete) && (props === null || props === void 0 ? void 0 : props.activeStep) > 0 && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "progressBar" }, { children: (0, jsx_runtime_1.jsx)(InlineProgress_1.default, { activeStep: props === null || props === void 0 ? void 0 : props.activeStep, totalStep: props === null || props === void 0 ? void 0 : props.totalStep }) })))] })));
 };
 CampaignCard.defaultProps = {};
 exports.default = CampaignCard;

package/dist/components/CampaignCard/CampaignCard.styled.js

@@ -11,7 +11,7 @@ exports.CampaignCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.CampaignCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n  border-radius: 8px;\n  box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n  padding: ", ";\n  cursor: pointer;\n  transition: all 0.3s ease;\n  position: relative;\n  &:hover {\n    box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n  }\n  .cartBadge {\n    position: absolute;\n    z-index: 5;\n    ", ";\n    @media only screen and ", " {\n      left: 16px;\n      top: 16px;\n    }\n  }\n\n  .img {\n    position: relative;\n    display: block;\n    padding-bottom: ", ";\n    overflow: hidden;\n    border-radius: 4px;\n    > * {\n      position: absolute !important;\n      left: 50% !important;\n      top: 50% !important;\n      transform: translate(-50%, -50%);\n      width: 100% !important;\n      height: auto !important;\n    }\n    @media only screen and ", " {\n      padding-bottom: 60%;\n    }\n  }\n\n  .title {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    word-break: break-word;\n    text-overflow: ellipsis;\n    ", " \n    @media only screen and ", " {\n        margin-top: 1.5rem !important;\n        font:var(--body-semi-bold-14-17) !important;\n    }\n  }\n\n  .progressTitle {\n    display: flex;\n    margin-top: 1rem;\n    color: var(--primary);\n    font:var(--headline-extra-bold-18-22);\n    height: 40px;\n    align-content: center;\n    align-items: center;\n    justify-content: flex-start;\n    box-sizing: border-box;\n  }\n\n  .progressBar {\n    margin-top: 1rem;\n  }\n\n  @media only screen and ", " {\n    padding: 1.5rem;\n  }\n"], ["\n\n  border-radius: 8px;\n  box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n  padding: ", ";\n  cursor: pointer;\n  transition: all 0.3s ease;\n  position: relative;\n  &:hover {\n    box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n  }\n  .cartBadge {\n    position: absolute;\n    z-index: 5;\n    ", ";\n    @media only screen and ", " {\n      left: 16px;\n      top: 16px;\n    }\n  }\n\n  .img {\n    position: relative;\n    display: block;\n    padding-bottom: ", ";\n    overflow: hidden;\n    border-radius: 4px;\n    > * {\n      position: absolute !important;\n      left: 50% !important;\n      top: 50% !important;\n      transform: translate(-50%, -50%);\n      width: 100% !important;\n      height: auto !important;\n    }\n    @media only screen and ", " {\n      padding-bottom: 60%;\n    }\n  }\n\n  .title {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    word-break: break-word;\n    text-overflow: ellipsis;\n    ", " \n    @media only screen and ", " {\n        margin-top: 1.5rem !important;\n        font:var(--body-semi-bold-14-17) !important;\n    }\n  }\n\n  .progressTitle {\n    display: flex;\n    margin-top: 1rem;\n    color: var(--primary);\n    font:var(--headline-extra-bold-18-22);\n    height: 40px;\n    align-content: center;\n    align-items: center;\n    justify-content: flex-start;\n    box-sizing: border-box;\n  }\n\n  .progressBar {\n    margin-top: 1rem;\n  }\n\n  @media only screen and ", " {\n    padding: 1.5rem;\n  }\n"])), function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'large':
             return "1.5rem";
         case 'medium':
@@ -24,7 +24,7 @@ exports.CampaignCardStyled = styled_components_1.default.div(templateObject_1 ||
             return "1rem";
     }
 }, function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'large':
             return "\n            left: 16px;\n            top: 16px;\n          ";
         case 'medium':
@@ -37,7 +37,7 @@ exports.CampaignCardStyled = styled_components_1.default.div(templateObject_1 ||
             return "\n            left: 16px;\n            top: 16px;\n          ";
     }
 }, devices_1.devices.xl, function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'large':
             return "72%";
         case 'medium':
@@ -50,7 +50,7 @@ exports.CampaignCardStyled = styled_components_1.default.div(templateObject_1 ||
             return "58%";
     }
 }, devices_1.devices.xl, function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'large':
             return " \n            margin-top: 1.5rem;\n            font:var(--headline-semi-bold-18-22);\n        ";
         case 'medium':

package/dist/components/Checkbox/Checkbox.js

@@ -19,7 +19,7 @@ var Checkbox_styled_1 = require("./Checkbox.styled");
 var prop_types_1 = __importDefault(require("prop-types"));
 var Checkbox = function (props) {
     var value = props.value, checked = props.checked, onChange = props.onChange, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, labelOffset = props.labelOffset;
-    return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, labelOffset: labelOffset }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "label", htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "description", htmlFor: id }, { children: description })))] })))] })));
+    return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "label", htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "description", htmlFor: id }, { children: description })))] })))] })));
 };
 exports.default = Checkbox;
 Checkbox.propTypes = {

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

@@ -12,8 +12,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
-exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex:1;\n    position:relative;\n    align-items:center;\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0; \n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: 0 ", " 0 0;\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        * {\n            ", ";\n        }\n        label.label{\n            display:block;\n            margin:0;\n            font: ", ";\n        }\n        label.description{\n            display:block;\n            margin:0;\n            font:var(--body-regular-13-16);\n        }\n    }\n"], ["\n    flex:1;\n    position:relative;\n    align-items:center;\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0; \n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: 0 ", " 0 0;\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        * {\n            ", ";\n        }\n        label.label{\n            display:block;\n            margin:0;\n            font: ", ";\n        }\n        label.description{\n            display:block;\n            margin:0;\n            font:var(--body-regular-13-16);\n        }\n    }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "CheckboxElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "CheckboxElementInvalid" }))); }, function (props) { return props.labelOffset; }, function (props) {
-    switch (props.size) {
+exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex:1;\n    position:relative;\n    align-items:center;\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0; \n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: 0 ", " 0 0;\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        * {\n            ", ";\n        }\n        label.label{\n            display:block;\n            margin:0;\n            font: ", ";\n        }\n        label.description{\n            display:block;\n            margin:0;\n            font:var(--body-regular-13-16);\n        }\n    }\n"], ["\n    flex:1;\n    position:relative;\n    align-items:center;\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0; \n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: 0 ", " 0 0;\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        * {\n            ", ";\n        }\n        label.label{\n            display:block;\n            margin:0;\n            font: ", ";\n        }\n        label.description{\n            display:block;\n            margin:0;\n            font:var(--body-regular-13-16);\n        }\n    }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "CheckboxElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "CheckboxElementInvalid" }))); }, function (props) { return props.$labelOffset; }, function (props) {
+    switch (props.$size) {
         case 'small':
             return "16px";
         case 'medium':
@@ -24,7 +24,7 @@ exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (
             return "16px";
     }
 }, function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'small':
             return "16px";
         case 'medium':
@@ -34,8 +34,8 @@ 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) {
-    switch (props.size) {
+}, 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) {
+    switch (props.$size) {
         case 'small':
             return "var(--caption-semi-bold-12-15)";
         case 'medium':

package/dist/components/ContentBox/ContentBox.js

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ContentBox_styled_1 = require("./ContentBox.styled");
 var ContentBox = function (props) {
-    return ((0, jsx_runtime_1.jsx)(ContentBox_styled_1.ContentBoxStyled, __assign({}, props, { children: props.children })));
+    return ((0, jsx_runtime_1.jsx)(ContentBox_styled_1.ContentBoxStyled, __assign({ "$size": props.size, "$hasBorder": props.hasBorder, "$variant": props.variant }, { children: props.children })));
 };
 ContentBox.defaultProps = {
     variant: "standart",

package/dist/components/ContentBox/ContentBox.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentBoxStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.ContentBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", ";\n  border-radius: ", ";\n  background: ", ";\n  border: ", ";\n"], ["\n  padding: ", ";\n  border-radius: ", ";\n  background: ", ";\n  border: ", ";\n"])), function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'xsmall':
             return "1rem";
         case 'small':
@@ -22,5 +22,5 @@ exports.ContentBoxStyled = styled_components_1.default.div(templateObject_1 || (
         default:
             return "1.5rem";
     }
-}, function (props) { return props.hasBorder ? "8px" : "0"; }, function (props) { return props.variant === "colorful" ? "var(--primary-opacity-5)" : "transparent"; }, function (props) { return props.hasBorder ? "1px solid var(--dark-opacity-10)" : "none"; });
+}, function (props) { return props.$hasBorder ? "8px" : "0"; }, function (props) { return props.$variant === "colorful" ? "var(--primary-opacity-5)" : "transparent"; }, function (props) { return props.$hasBorder ? "1px solid var(--dark-opacity-10)" : "none"; });
 var templateObject_1;

package/dist/components/CouponCode/CouponCode.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -21,15 +32,16 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Input_1 = __importDefault(require("../Input"));
 var Button_1 = __importDefault(require("../Button"));
 var CouponCode = function (props) {
-    var _a = (0, react_1.useState)(props.expanded), expanded = _a[0], setExpanded = _a[1];
+    var buttonDisabled = props.buttonDisabled, name = props.name, title = props.title, value = props.value, buttonText = props.buttonText, buttonWidth = props.buttonWidth, isButtonLoading = props.isButtonLoading, isInputDisabled = props.isInputDisabled, errorMessage = props.errorMessage, placeholder = props.placeholder, hasError = props.hasError, autoFocus = props.autoFocus, onChange = props.onChange, buttonVariant = props.buttonVariant, onExpanded = props.onExpanded, expanded = props.expanded, other = __rest(props, ["buttonDisabled", "name", "title", "value", "buttonText", "buttonWidth", "isButtonLoading", "isInputDisabled", "errorMessage", "placeholder", "hasError", "autoFocus", "onChange", "buttonVariant", "onExpanded", "expanded"]);
+    var _a = (0, react_1.useState)(expanded), isExpanded = _a[0], setIsExpanded = _a[1];
     (0, react_1.useEffect)(function () {
-        props.onExpanded({ isExpanded: expanded });
-    }, [expanded]);
+        onExpanded({ isExpanded: isExpanded });
+    }, [isExpanded]);
     (0, react_1.useEffect)(function () {
-        setExpanded(props.expanded);
-    }, [props.expanded]);
-    var toggleExpand = function () { return setExpanded(function (prevState) { return !prevState; }); };
-    return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({}, props, { expanded: expanded }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ onClick: toggleExpand, className: "header" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.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: props.isInputDisabled, name: props.name, onChange: props.onChange, hasError: props.hasError, errorMessage: props.errorMessage, value: props.value, autofocus: props.autoFocus, label: "", width: "auto", placeholder: props.placeholder, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: props.buttonWidth, isLoading: props.isButtonLoading, disabled: props.buttonDisabled, size: "big", variant: props.buttonVariant }, { children: props.buttonText }))] }))] })));
+        setIsExpanded(expanded);
+    }, [expanded]);
+    var toggleExpand = function () { return setIsExpanded(function (prevState) { return !prevState; }); };
+    return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({ "$expanded": props.expanded }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ onClick: toggleExpand, className: "header" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.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: props.isInputDisabled, name: props.name, onChange: props.onChange, hasError: props.hasError, errorMessage: props.errorMessage, value: props.value, autofocus: props.autoFocus, label: "", width: "auto", placeholder: props.placeholder, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: props.buttonWidth, isLoading: props.isButtonLoading, disabled: props.buttonDisabled, size: "big", variant: props.buttonVariant }, { children: props.buttonText }))] }))] })));
 };
 CouponCode.defaultProps = {
     title: "Title",

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: 1rem;\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    .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    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    padding-top: ", ";\n    max-height: ", ";\n    /*input{\n      background-color: white;\n    }*/\n    button{\n      margin-left: 1rem;\n    }\n  }\n"], ["\n  padding: 1rem;\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    .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    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    padding-top: ", ";\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 ? '1rem' : '0'; }, function (props) { return props.expanded ? '96px' : '0'; });
+exports.CouponCodeStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 1rem;\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    .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    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    padding-top: ", ";\n    max-height: ", ";\n    /*input{\n      background-color: white;\n    }*/\n    button{\n      margin-left: 1rem;\n    }\n  }\n"], ["\n  padding: 1rem;\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    .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    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    padding-top: ", ";\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 ? '1rem' : '0'; }, function (props) { return props.$expanded ? '96px' : '0'; });
 var templateObject_1;

package/dist/components/Divider/Divider.js

@@ -22,7 +22,7 @@ var Divider = function (props) {
     var type = props.type, text = props.text, hasText = props.hasText;
     switch (type) {
         case 'horizontal':
-            return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsxs)(Divider_styled_1.Horizontal, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("div", {}), hasText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: text }), (0, jsx_runtime_1.jsx)("div", {})] }))] })) }));
+            return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsxs)(Divider_styled_1.Horizontal, __assign({ "$hasText": hasText }, { children: [(0, jsx_runtime_1.jsx)("div", {}), hasText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: text }), (0, jsx_runtime_1.jsx)("div", {})] }))] })) }));
         case 'waveArrowUp':
             return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "WaveArrowUp", width: "97px", height: "53px", color: "var(--primary)" }) }));
         case 'waveArrowDown':

package/dist/components/Divider/Divider.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Horizontal = exports.DividerStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.DividerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-exports.Horizontal = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  align-items: center;\n  justify-content: space-between;\n  grid-template-columns: ", ";\n  color: var(--grey-30);\n  font:var(--caption-medium-12-15);\n  > div:not(:nth-child(2)) {\n    height: 1px;\n    background: var(--dark-opacity-10);\n  }\n\n  > div:nth-child(2) {\n    padding: 8px;\n  }\n"], ["\n  display: grid;\n  align-items: center;\n  justify-content: space-between;\n  grid-template-columns: ", ";\n  color: var(--grey-30);\n  font:var(--caption-medium-12-15);\n  > div:not(:nth-child(2)) {\n    height: 1px;\n    background: var(--dark-opacity-10);\n  }\n\n  > div:nth-child(2) {\n    padding: 8px;\n  }\n"])), function (props) { return props.hasText ? '1fr auto 1fr' : '1fr'; });
+exports.Horizontal = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  align-items: center;\n  justify-content: space-between;\n  grid-template-columns: ", ";\n  color: var(--grey-30);\n  font:var(--caption-medium-12-15);\n  > div:not(:nth-child(2)) {\n    height: 1px;\n    background: var(--dark-opacity-10);\n  }\n\n  > div:nth-child(2) {\n    padding: 8px;\n  }\n"], ["\n  display: grid;\n  align-items: center;\n  justify-content: space-between;\n  grid-template-columns: ", ";\n  color: var(--grey-30);\n  font:var(--caption-medium-12-15);\n  > div:not(:nth-child(2)) {\n    height: 1px;\n    background: var(--dark-opacity-10);\n  }\n\n  > div:nth-child(2) {\n    padding: 8px;\n  }\n"])), function (props) { return props.$hasText ? '1fr auto 1fr' : '1fr'; });
 var templateObject_1, templateObject_2;

package/dist/components/Dropdown/Dropdown.js

@@ -35,7 +35,7 @@ var Dropdown = function (props) {
         var children = _a.children;
         return props.toggle ? ((0, jsx_runtime_1.jsx)(props.toggle, { children: children })) : ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: "primary", onClick: function () { return setShowDropdown(!showDropdown); } }, { children: "Toggle" })));
     };
-    return ((0, jsx_runtime_1.jsxs)(Dropdown_styled_1.DropdownStyled, __assign({ ref: dropdownRef, show: showDropdown }, { children: [(0, jsx_runtime_1.jsx)(ToggleButton, {}), (0, jsx_runtime_1.jsx)(Dropdown_styled_1.DropdownMenu, __assign({ show: showDropdown }, { children: (0, jsx_runtime_1.jsx)("ul", { children: (_a = props === null || props === void 0 ? void 0 : props.list) === null || _a === void 0 ? void 0 : _a.map(function (item, key) {
+    return ((0, jsx_runtime_1.jsxs)(Dropdown_styled_1.DropdownStyled, __assign({ ref: dropdownRef, "$show": showDropdown }, { children: [(0, jsx_runtime_1.jsx)(ToggleButton, {}), (0, jsx_runtime_1.jsx)(Dropdown_styled_1.DropdownMenu, __assign({ "$show": showDropdown }, { children: (0, jsx_runtime_1.jsx)("ul", { children: (_a = props === null || props === void 0 ? void 0 : props.list) === null || _a === void 0 ? void 0 : _a.map(function (item, key) {
                         return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: item }, { children: item.title })) }, key));
                     }) }) }))] })));
 };

package/dist/components/Dropdown/Dropdown.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownMenu = exports.DropdownStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.DropdownStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n"], ["\n    position: relative;\n"])));
-exports.DropdownMenu = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  border-radius: 8px;\n  background-color: white;\n  padding: 1rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  min-width: 184px;\n  right: 0;\n  top: calc(100% + 16px);\n  opacity: ", ";\n  visibility: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: white;\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: 12px;\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        font:var(--body-bold-13-16);\n        position: relative;\n        &:hover{\n          color: var(--primary);\n          background-color: var(--primary-opacity-5);\n        }\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  border-radius: 8px;\n  background-color: white;\n  padding: 1rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  min-width: 184px;\n  right: 0;\n  top: calc(100% + 16px);\n  opacity: ", ";\n  visibility: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: white;\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: 12px;\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        font:var(--body-bold-13-16);\n        position: relative;\n        &:hover{\n          color: var(--primary);\n          background-color: var(--primary-opacity-5);\n        }\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"])), function (props) { return props.show ? "1" : "0"; }, function (props) { return props.show ? "visible" : "hidden"; });
+exports.DropdownMenu = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  border-radius: 8px;\n  background-color: white;\n  padding: 1rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  min-width: 184px;\n  right: 0;\n  top: calc(100% + 16px);\n  opacity: ", ";\n  visibility: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: white;\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: 12px;\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        font:var(--body-bold-13-16);\n        position: relative;\n        &:hover{\n          color: var(--primary);\n          background-color: var(--primary-opacity-5);\n        }\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  border-radius: 8px;\n  background-color: white;\n  padding: 1rem;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  min-width: 184px;\n  right: 0;\n  top: calc(100% + 16px);\n  opacity: ", ";\n  visibility: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: white;\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: 12px;\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        font:var(--body-bold-13-16);\n        position: relative;\n        &:hover{\n          color: var(--primary);\n          background-color: var(--primary-opacity-5);\n        }\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"])), function (props) { return props.$show ? "1" : "0"; }, function (props) { return props.$show ? "visible" : "hidden"; });
 var templateObject_1, templateObject_2;

package/dist/components/Icon/Icon.js

@@ -16,7 +16,7 @@ var index_1 = require("./index");
 var Icon_styled_1 = require("./Icon.styled");
 var Icon = function (props) {
     var width = props.width, height = props.height, hasWrapper = props.hasWrapper, strokeWidth = props.strokeWidth, color = props.color;
-    return hasWrapper ? ((0, jsx_runtime_1.jsx)(Icon_styled_1.IconWrapper, __assign({ width: width, height: height, strokeWidth: strokeWidth, color: color }, { children: index_1.iconList[props.name]({}) || (0, jsx_runtime_1.jsx)("div", {}) }))) : (index_1.iconList[props.name]({ width: width, height: height, color: color }) || (0, jsx_runtime_1.jsx)("div", {}));
+    return hasWrapper ? ((0, jsx_runtime_1.jsx)(Icon_styled_1.IconWrapper, __assign({ "$width": width, "$height": height, "$strokeWidth": strokeWidth, "$color": color }, { children: index_1.iconList[props.name]({}) || (0, jsx_runtime_1.jsx)("div", {}) }))) : (index_1.iconList[props.name]({ width: width, height: height, color: color }) || (0, jsx_runtime_1.jsx)("div", {}));
 };
 Icon.defaultProps = {
     hasWrapper: true

package/dist/components/Icon/Icon.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconWrapper = exports.IconStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.IconStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;\n  gap: 50px 20px;\n  .item{\n    text-align: center;\n    .title{\n      display: block;\n      margin-top: 10px;\n      font:var(--body-regular-14-17);\n    }\n  }\n"], ["\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;\n  gap: 50px 20px;\n  .item{\n    text-align: center;\n    .title{\n      display: block;\n      margin-top: 10px;\n      font:var(--body-regular-14-17);\n    }\n  }\n"])));
-exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: inline-block;\n    vertical-align: middle;\n    svg{\n        display: block;\n        width: ", ";\n        height: ", ";\n        path,circle,rect{\n            color: ", ";\n            &[stroke-width]{\n                stroke-width: ", ";\n            }\n        }\n    }\n"], ["\n    display: inline-block;\n    vertical-align: middle;\n    svg{\n        display: block;\n        width: ", ";\n        height: ", ";\n        path,circle,rect{\n            color: ", ";\n            &[stroke-width]{\n                stroke-width: ", ";\n            }\n        }\n    }\n"])), function (props) { return props.width; }, function (props) { return props.height; }, function (props) { return props.color; }, function (props) { return props.strokeWidth; });
+exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: inline-block;\n    vertical-align: middle;\n    svg{\n        display: block;\n        width: ", ";\n        height: ", ";\n        path,circle,rect{\n            color: ", ";\n            &[stroke-width]{\n                stroke-width: ", ";\n            }\n        }\n    }\n"], ["\n    display: inline-block;\n    vertical-align: middle;\n    svg{\n        display: block;\n        width: ", ";\n        height: ", ";\n        path,circle,rect{\n            color: ", ";\n            &[stroke-width]{\n                stroke-width: ", ";\n            }\n        }\n    }\n"])), function (props) { return props.$width; }, function (props) { return props.$height; }, function (props) { return props.$color; }, function (props) { return props.$strokeWidth; });
 var templateObject_1, templateObject_2;

package/dist/components/Icon/InstagramNegativeFilled.js

@@ -0,0 +1,40 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgInstagramNegativeFilled = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.7422 21.0001H7.25778C4.90569 21.0001 3 18.5554 3 15.5395V8.46061C3 5.44476 4.90569 3 7.25778 3H16.7422C19.0943 3 21 5.44476 21 8.46061V15.5395C21 18.5554 19.0943 21.0001 16.7422 21.0001Z", fill: "currentColor", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M16.5391 6.80998L16.5391 6.80998L16.54 6.80809C16.571 6.73753 16.5999 6.69019 16.6574 6.63231C16.7068 6.59037 16.7521 6.56032 16.8148 6.53179C17.0023 6.46148 17.2237 6.51197 17.3509 6.63904L17.3508 6.63905L17.3534 6.64159C17.3735 6.66141 17.3933 6.68464 17.4103 6.70808C17.4226 6.72525 17.4311 6.73924 17.4363 6.74866L17.451 6.78639L17.4553 6.79735L17.46 6.80809C17.486 6.86646 17.5 6.9321 17.5 7.00049C17.5 7.1214 17.4561 7.24191 17.3489 7.3579C17.2703 7.43497 17.1689 7.48336 17.06 7.49642L17.0002 7.49938L16.9431 7.4965C16.9057 7.49171 16.8609 7.48087 16.7988 7.45647C16.7373 7.42836 16.6906 7.39706 16.6427 7.34923C16.5483 7.24686 16.5 7.12056 16.5 7.00049C16.5 6.93155 16.5142 6.86598 16.5391 6.80998ZM16.0823 6.60681C16.1368 6.48285 16.2014 6.37829 16.3182 6.26456L16.0823 6.60681Z", stroke: "#FAF7FF" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.0001 12.182C8.9991 13.935 10.4301 15.369 12.1801 15.368C13.9271 15.366 15.3541 13.938 15.3571 12.189C15.3601 10.433 13.9341 9.002 12.1821 9C10.4201 8.998 8.9861 10.453 9.0001 12.182Z", fill: "#FAF7FF", stroke: "#FAF7FF", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
+exports.default = SvgInstagramNegativeFilled;

package/dist/components/Icon/index.js

@@ -27,9 +27,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BuyBig = exports.Buy = exports.ButtonIcon = exports.BoxLeft = exports.BoxDown = exports.Box = exports.Bookmark = exports.Bag3 = exports.Bag = exports.Bag2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeftHover = exports.ArrowSmallLeft = exports.ArrowSmallDown = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowPlusCircle = exports.ArrowMediumRight = exports.ArrowMedium = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGo = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.AgreementArrowUp = exports.AgreementArrowDown = exports.Again = exports.AddUser = exports.Activity = void 0;
 exports.House = exports.Home = exports.Hide = exports.Heart = exports.Graph = exports.Gift = exports.Game = exports.Folder = exports.FilterUp = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.ErrorIcon = exports.EditSquare = exports.Edit = exports.Download = exports.Document = exports.Discovery = exports.Discount = exports.Delete = exports.DarkBadge = exports.Danger = exports.Copy = exports.Closemini = exports.CloseSquare = exports.CloseMiniHover = exports.CloseHover = exports.CloseBigHover = exports.CloseBig = exports.Close = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.CargoBack = exports.Cargo2 = exports.Cargo = exports.Cargo1 = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = exports.CallMissed = exports.Call = exports.Calendar = void 0;
-exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.ProfilNamePassive = exports.ProfilName = exports.PriceTag = exports.PoweredByQnbLogo = exports.PlusSmall = exports.PlusBig = exports.Plus = exports.Play = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.NotificationSimpleSmall = exports.NotificationSimple = exports.Notification = exports.Notification1 = exports.NoHiddenCost = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.Money = exports.Minus = exports.Message = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loading2 = exports.Loading = exports.List = exports.LinkedIn = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.InstagramNegative = exports.InfoSquare = exports.InfoCircle = exports.Image = void 0;
-exports.HeartArrow = exports.Grid = exports.FacebookStroke = exports.Confetti = exports.Youtube = exports.Work = exports.Whatsapp = exports.WaveLoading = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TicketStar = exports.Ticket = exports.TickSquare = exports.ThreeUser = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = exports.Securitywithtik = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = void 0;
-exports.iconList = exports.Visa = exports.TwitterStroke = exports.Pointinghand = exports.PointFinger = exports.Plant = exports.More = exports.Mastercard = exports.Live = exports.LinkedinStroke = exports.Lgbt = void 0;
+exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.ProfilNamePassive = exports.ProfilName = exports.PriceTag = exports.PoweredByQnbLogo = exports.PlusSmall = exports.PlusBig = exports.Plus = exports.Play = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.NotificationSimpleSmall = exports.NotificationSimple = exports.Notification = exports.Notification1 = exports.NoHiddenCost = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.Money = exports.Minus = exports.Message = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loading2 = exports.Loading = exports.List = exports.LinkedIn = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.InstagramNegativeFilled = exports.InstagramNegative = exports.InfoSquare = exports.InfoCircle = exports.Image = void 0;
+exports.Grid = exports.FacebookStroke = exports.Confetti = exports.Youtube = exports.Work = exports.Whatsapp = exports.WaveLoading = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TicketStar = exports.Ticket = exports.TickSquare = exports.ThreeUser = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = exports.Securitywithtik = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = void 0;
+exports.iconList = exports.Visa = exports.TwitterStroke = exports.Pointinghand = exports.PointFinger = exports.Plant = exports.More = exports.Mastercard = exports.Live = exports.LinkedinStroke = exports.Lgbt = exports.HeartArrow = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Activity_1 = __importDefault(require("./Activity"));
 Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
@@ -239,6 +239,8 @@ var InfoSquare_1 = __importDefault(require("./InfoSquare"));
 Object.defineProperty(exports, "InfoSquare", { enumerable: true, get: function () { return InfoSquare_1.default; } });
 var InstagramNegative_1 = __importDefault(require("./InstagramNegative"));
 Object.defineProperty(exports, "InstagramNegative", { enumerable: true, get: function () { return InstagramNegative_1.default; } });
+var InstagramNegativeFilled_1 = __importDefault(require("./InstagramNegativeFilled"));
+Object.defineProperty(exports, "InstagramNegativeFilled", { enumerable: true, get: function () { return InstagramNegativeFilled_1.default; } });
 var Keyboard_1 = __importDefault(require("./Keyboard"));
 Object.defineProperty(exports, "Keyboard", { enumerable: true, get: function () { return Keyboard_1.default; } });
 var KeyboardClose_1 = __importDefault(require("./KeyboardClose"));
@@ -868,6 +870,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(InstagramNegative_1.default, __assign({}, props));
     },
+    InstagramNegativeFilled: function (_a) {
+        var props = __rest(_a, []);
+        return ((0, jsx_runtime_1.jsx)(InstagramNegativeFilled_1.default, __assign({}, props)));
+    },
     Keyboard: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Keyboard_1.default, __assign({}, props));

package/dist/components/Icon/stories/Icons.stories.js

@@ -20,8 +20,9 @@ var index_1 = require("../index");
 var Icon_styled_1 = require("../Icon.styled");
 var Icon_1 = __importDefault(require("../Icon"));
 var IconStoryList = function (props) {
+    var color = props.color, strokeWidth = props.strokeWidth, width = props.width, height = props.height;
     return ((0, jsx_runtime_1.jsx)(Icon_styled_1.IconStyled, { children: Object.entries(index_1.iconList).map(function (value, key) {
-            return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'item' }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "svg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, __assign({}, props, { name: value[0] })) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: value[0] }))] })));
+            return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'item' }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "svg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: value[0], color: color, strokeWidth: strokeWidth, width: width, height: height }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: value[0] }))] })));
         }) }));
 };
 exports.default = {

package/dist/components/Input/Input.js

@@ -35,7 +35,7 @@ var react_number_format_1 = require("react-number-format");
 var react_i18next_1 = require("react-i18next");
 var Input = function (props) {
     var _a;
-    var type = props.type, hasError = props.hasError, other = __rest(props, ["type", "hasError"]);
+    var hasError = props.hasError, disabled = props.disabled, label = props.label, customLinkText = props.customLinkText, customLinkHref = props.customLinkHref, onCustomLinkClick = props.onCustomLinkClick, onChange = props.onChange, errorMessage = props.errorMessage, type = props.type, name = props.name, width = props.width, mask = props.mask, placeholder = props.placeholder, hasCopyButton = props.hasCopyButton, readonly = props.readonly, autofocus = props.autofocus, value = props.value, format = props.format, visible = props.visible, other = __rest(props, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readonly", "autofocus", "value", "format", "visible"]);
     var _b = (0, react_1.useState)(type), inputType = _b[0], setInputType = _b[1];
     var _c = (0, react_1.useState)(false), alert = _c[0], setAlert = _c[1];
     var inputRef = (0, react_1.useRef)(null);
@@ -60,8 +60,8 @@ var Input = function (props) {
         setAlert(true);
         inputRef.current.blur();
     };
-    return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ width: props.width }, { children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_a = {}, _a["justify-between"] = props === null || props === void 0 ? void 0 : props.customLinkText, _a)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }), (props === null || props === void 0 ? void 0 : props.customLinkText) && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (props.customLinkHref && { href: props.customLinkHref }), { onClick: props.onCustomLinkClick }, { children: props === null || props === void 0 ? void 0 : props.customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(props.mask && props.format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({}, props, { format: props.format, mask: props.mask, customInput: Input_styled_1.InputStyled })))
-                        : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError }, other))), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) })), (props === null || props === void 0 ? void 0 : props.hasCopyButton) && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ visible: alert }, { children: t('copied') }))] })), (props === null || props === void 0 ? void 0 : props.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: props === null || props === void 0 ? void 0 : props.errorMessage })] }))] }));
+    return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": props.width }, { children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_a = {}, _a["justify-between"] = props === null || props === void 0 ? void 0 : props.customLinkText, _a)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }), (props === null || props === void 0 ? void 0 : props.customLinkText) && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (props.customLinkHref && { href: props.customLinkHref }), { onClick: props.onCustomLinkClick }, { children: props === null || props === void 0 ? void 0 : props.customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(props.mask && props.format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ type: inputType, "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readonly: readonly, autoFocus: autofocus, value: value }, other, { format: props.format, mask: props.mask, customInput: Input_styled_1.InputStyled })))
+                        : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readonly: readonly, autoFocus: autofocus, value: value }, other))), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) })), (props === null || props === void 0 ? void 0 : props.hasCopyButton) && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), (props === null || props === void 0 ? void 0 : props.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: props === null || props === void 0 ? void 0 : props.errorMessage })] }))] }));
 };
 Input.defaultValues = {
     hasError: false,