npm - krl-alfred - Versions diffs - 1.76.37 → 1.76.39 - Mend

krl-alfred 1.76.37 → 1.76.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/dist/components/Accordion/Accordion.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/ActionButton/ActionButton.js CHANGED Viewed

@@ -45,7 +45,7 @@ var ActionButton = function (props) {
     (0, react_1.useEffect)(function () {
         count();
     }, [props.date]);
-    return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({}, props, { 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: props.iconStrokeWidth, name: props.icon, color: "var(--primary)", width: "45px", height: "45px" }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.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: [(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') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots caption-bold-12-15" }, { 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({}, props, { 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: props.iconStrokeWidth, name: props.icon, color: "var(--primary)", width: "45px", height: "45px" }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.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: [(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') }))] })), (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" })] })] }))] })));
 };
 ActionButton.defaultProps = {
     title: "Title",

package/dist/components/Button/Button.js CHANGED Viewed

@@ -23,7 +23,7 @@ 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;

package/dist/components/CampaignCard/CampaignCard.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/CircleProgress/CircleProgress.js CHANGED Viewed

@@ -16,10 +16,10 @@ var CircleProgress_styled_1 = require("./CircleProgress.styled");
 var react_circular_progressbar_1 = require("react-circular-progressbar");
 var CircleProgress = function (props) {
     var currentStep = props.steps.find(function (p) { return p.index === props.activeStep; });
-    return (0, jsx_runtime_1.jsxs)(CircleProgress_styled_1.CircleProgressStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(react_circular_progressbar_1.CircularProgressbarWithChildren, __assign({ styles: (0, react_circular_progressbar_1.buildStyles)({
+    return ((0, jsx_runtime_1.jsxs)(CircleProgress_styled_1.CircleProgressStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(react_circular_progressbar_1.CircularProgressbarWithChildren, __assign({ styles: (0, react_circular_progressbar_1.buildStyles)({
                         pathColor: "var(--primary)",
                         trailColor: "var(--dark-opacity-5)"
-                    }), strokeWidth: 12, value: props.activeStep / props.steps.length * 100 }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [props.activeStep, "/"] }), props.steps.length] })) })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "info" }, { children: [(0, jsx_runtime_1.jsx)("h1", { children: currentStep === null || currentStep === void 0 ? void 0 : currentStep.text }), (0, jsx_runtime_1.jsx)("p", { children: currentStep === null || currentStep === void 0 ? void 0 : currentStep.textSm })] }))] }));
+                    }), strokeWidth: 12, value: props.activeStep / props.steps.length * 100 }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [props.activeStep, "/"] }), props.steps.length] })) })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "info" }, { children: [(0, jsx_runtime_1.jsx)("h1", { children: currentStep === null || currentStep === void 0 ? void 0 : currentStep.text }), (0, jsx_runtime_1.jsx)("p", { children: currentStep === null || currentStep === void 0 ? void 0 : currentStep.textSm })] }))] })));
 };
 CircleProgress.defaultProps = {
     steps: [],

package/dist/components/ColorPalette/ColorPalette.js CHANGED Viewed

@@ -1,15 +1,4 @@
 "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 };
 };
@@ -22,14 +11,14 @@ var ColorPalette = function (props) {
         var _b = _a.gradient, gradient = _b === void 0 ? props.gradient : _b, _c = _a.data, data = _c === void 0 ? props.data : _c;
         return ((0, jsx_runtime_1.jsxs)(ColorPalette_styled_1.ColorItem, { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Bg, { gradient: gradient, data: data }), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Text, { children: Object.entries(data).map(function (_a) {
                         var key4 = _a[0], value4 = _a[1];
-                        return ((0, jsx_runtime_1.jsxs)(ColorPalette_styled_1.ValueListWrapper, { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Title, __assign({ className: "caption-bold-12-15" }, { children: key4 })), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Value, __assign({ className: "caption-regular-12-15" }, { children: value4 }))] }, key4));
+                        return ((0, jsx_runtime_1.jsxs)(ColorPalette_styled_1.ValueListWrapper, { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Title, { children: key4 }), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Value, { children: value4 })] }, key4));
                     }) })] }));
     };
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: colors_json_1.default.map(function (value, key) {
             var _a;
-            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", __assign({ className: "headline-bold-24-29" }, { children: value.name })), (0, jsx_runtime_1.jsx)("div", { children: (_a = value === null || value === void 0 ? void 0 : value.children) === null || _a === void 0 ? void 0 : _a.map(function (value2, key2) {
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.TitleXl, { children: value.name }), (0, jsx_runtime_1.jsx)("div", { children: (_a = value === null || value === void 0 ? void 0 : value.children) === null || _a === void 0 ? void 0 : _a.map(function (value2, key2) {
                             var _a;
-                            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", __assign({ className: "headline-medium-18-22" }, { children: value2.name })), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.ColorPaletteStyled, { children: (_a = value2 === null || value2 === void 0 ? void 0 : value2.variants) === null || _a === void 0 ? void 0 : _a.map(function (value3, key3) {
+                            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.TitleLg, { children: value2.name }), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.ColorPaletteStyled, { children: (_a = value2 === null || value2 === void 0 ? void 0 : value2.variants) === null || _a === void 0 ? void 0 : _a.map(function (value3, key3) {
                                             return ((0, jsx_runtime_1.jsx)(Item, { gradient: value3 === null || value3 === void 0 ? void 0 : value3.gradient, data: value3.data }, key3));
                                         }) })] }, key2));
                         }) })] }, key));

package/dist/components/ColorPalette/ColorPalette.styled.js CHANGED Viewed

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ValueListWrapper = exports.Value = exports.Title = exports.Text = exports.Bg = exports.ColorItem = exports.ColorPaletteStyled = void 0;
+exports.ValueListWrapper = exports.Value = exports.TitleLg = exports.TitleXl = exports.Title = exports.Text = exports.Bg = exports.ColorItem = exports.ColorPaletteStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.ColorPaletteStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  gap: 15px;\n  margin-bottom: 3rem;\n  @media (max-width: 1200px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  @media (max-width: 576px) {\n    grid-template-columns: repeat(1, 1fr);\n  }\n"], ["\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  gap: 15px;\n  margin-bottom: 3rem;\n  @media (max-width: 1200px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  @media (max-width: 576px) {\n    grid-template-columns: repeat(1, 1fr);\n  }\n"])));
 exports.ColorItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 1px solid var(--dark-opacity-10);\n  display: block;\n  border-radius: 16px;\n  position: relative;\n  overflow: hidden;\n"], ["\n  border: 1px solid var(--dark-opacity-10);\n  display: block;\n  border-radius: 16px;\n  position: relative;\n  overflow: hidden;\n"])));
@@ -18,7 +18,9 @@ exports.Bg = styled_components_1.default.div(templateObject_3 || (templateObject
         : props.data.hex;
 });
 exports.Text = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 16px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 22px;\n"], ["\n  padding: 16px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 22px;\n"])));
-exports.Title = styled_components_1.default.strong(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 3px;\n  text-transform: uppercase;\n  color: var(--dark);\n"], ["\n  display: block;\n  margin-bottom: 3px;\n  text-transform: uppercase;\n  color: var(--dark);\n"])));
-exports.Value = styled_components_1.default.strong(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: block;\n  color: var(--dark-opacity-50);\n"], ["\n  display: block;\n  color: var(--dark-opacity-50);\n"])));
-exports.ValueListWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: block;\n  &:first-child {\n    grid-column: span 2;\n  }\n"], ["\n  display: block;\n  &:first-child {\n    grid-column: span 2;\n  }\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+exports.Title = styled_components_1.default.strong(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 3px;\n  text-transform: uppercase;\n  color: var(--dark);\n  font: var(--caption-bold-12-15);\n"], ["\n  display: block;\n  margin-bottom: 3px;\n  text-transform: uppercase;\n  color: var(--dark);\n  font: var(--caption-bold-12-15);\n"])));
+exports.TitleXl = styled_components_1.default.h1(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font: var(--headline-bold-24-29);\n    display: block;\n"], ["\n  font: var(--headline-bold-24-29);\n    display: block;\n"])));
+exports.TitleLg = styled_components_1.default.h2(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font: var(--headline-medium-18-22);\n    display: block;\n"], ["\n  font: var(--headline-medium-18-22);\n    display: block;\n"])));
+exports.Value = styled_components_1.default.strong(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: block;\n  color: var(--dark-opacity-50);\n  font: var(--caption-regular-12-15);\n"], ["\n  display: block;\n  color: var(--dark-opacity-50);\n  font: var(--caption-regular-12-15);\n"])));
+exports.ValueListWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: block;\n  &:first-child {\n    grid-column: span 2;\n  }\n"], ["\n  display: block;\n  &:first-child {\n    grid-column: span 2;\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/components/ContentBox/ContentBox.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/InfoBox/InfoBox.js CHANGED Viewed

@@ -18,6 +18,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var InfoBox_styled_1 = require("./InfoBox.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
+var react_i18next_1 = require("react-i18next");
 var InfoBox = function (props) {
     var title = props.title, description = props.description, radius = props.radius, size = props.size;
     var descriptionRef = (0, react_1.useRef)(null);
@@ -25,6 +26,7 @@ var InfoBox = function (props) {
     var _a = (0, react_1.useState)(false), alert = _a[0], setAlert = _a[1];
     var _b = (0, react_1.useState)(0), alertLeft = _b[0], setAlertLeft = _b[1];
     var _c = (0, react_1.useState)(0), alertTop = _c[0], setAlertTop = _c[1];
+    var t = (0, react_i18next_1.useTranslation)().t;
     (0, react_1.useEffect)(function () {
         if (alert) {
             setTimeout(function () {
@@ -53,7 +55,7 @@ var InfoBox = function (props) {
             }
         });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ radius: radius }, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", strokeWidth: "2px", name: "InfoSquare", width: "24px", height: "24px" }) }), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, { "$size": size, ref: descriptionRef, dangerouslySetInnerHTML: { __html: description } }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: "Kopyaland\u0131" })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] })] })));
+    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ radius: radius }, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", strokeWidth: "2px", name: "InfoSquare", width: "24px", height: "24px" }) }), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, { "$size": size, ref: descriptionRef, dangerouslySetInnerHTML: { __html: description } }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: t('copied') })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] })] })));
 };
 InfoBox.defaultProps = {
     size: "small"

package/dist/components/Input/Input.js CHANGED Viewed

@@ -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,

package/dist/components/Input/Input.styled.js CHANGED Viewed

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputStyled = exports.Container = exports.AlertStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"], ["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"])), function (props) { return props.visible ? '1' : '0'; });
-exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font: var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font: var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"])), function (props) { return props.width || '370px'; });
+exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"], ["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
+exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font: var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font: var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"])), function (props) { return props.$width || '370px'; });
 exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font: var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font: var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/ListGroup/ListGroup.js CHANGED Viewed

@@ -23,7 +23,7 @@ var ListGroup = function (props) {
     }, []);
     return ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupStyled, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) {
             var _a;
-            return (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItem, { children: (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItemButton, __assign({ isActive: (_a = link === null || link === void 0 ? void 0 : link.split('/')) === null || _a === void 0 ? void 0 : _a.includes(item["slug"]), onClick: item.onClick, hasNotification: item.hasNotification }, { children: item.title })) }, key);
+            return (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItem, { children: (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItemButton, __assign({ "$isActive": (_a = link === null || link === void 0 ? void 0 : link.split('/')) === null || _a === void 0 ? void 0 : _a.includes(item["slug"]), onClick: item.onClick, "$hasNotification": item.hasNotification }, { children: item.title })) }, key);
         }) }));
 };
 ListGroup.defaultProps = {};

package/dist/components/ListGroup/ListGroup.styled.js CHANGED Viewed

@@ -11,5 +11,5 @@ exports.ListGroupItemButton = exports.ListGroupItem = exports.ListGroupStyled =
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.ListGroupStyled = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  padding: 0;\n  margin: 0;\n"], ["\n  display: block;\n  padding: 0;\n  margin: 0;\n"])));
 exports.ListGroupItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0;\n  margin: 0; \n  display: block;\n  + li {\n    margin-top: 1rem;\n  }\n"], ["\n  padding: 0;\n  margin: 0; \n  display: block;\n  + li {\n    margin-top: 1rem;\n  }\n"])));
-exports.ListGroupItemButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 67px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  position: relative;\n  outline: none;\n  font:var(--title-bold-16-19);\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", " ;\n  }\n  ", "\n"], ["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 67px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  position: relative;\n  outline: none;\n  font:var(--title-bold-16-19);\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", " ;\n  }\n  ", "\n"])), function (props) { return props.isActive ? "#fff" : "var(--dark-opacity-3)"; }, function (props) { return props.isActive ? "var(--primary)" : "var(--dark)"; }, function (props) { return props.isActive ? "2px solid var(--primary)" : "none"; }, function (props) { return props.hasNotification && "\n  \n  &:after{\n    content: \"\";\n    position: absolute;\n    right : 1.5rem;\n    top:50%;\n    transform:translateY(-50%);\n    width:16px;\n    height:16px;\n    background-color:var(--primary);\n    border-radius:50%;\n  }\n  "; });
+exports.ListGroupItemButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 67px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  position: relative;\n  outline: none;\n  font:var(--title-bold-16-19);\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", " ;\n  }\n  ", "\n"], ["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 67px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  position: relative;\n  outline: none;\n  font:var(--title-bold-16-19);\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", " ;\n  }\n  ", "\n"])), function (props) { return props.$isActive ? "#fff" : "var(--dark-opacity-3)"; }, function (props) { return props.$isActive ? "var(--primary)" : "var(--dark)"; }, function (props) { return props.$isActive ? "2px solid var(--primary)" : "none"; }, function (props) { return props.$hasNotification && "\n  \n  &:after{\n    content: \"\";\n    position: absolute;\n    right : 1.5rem;\n    top:50%;\n    transform:translateY(-50%);\n    width:16px;\n    height:16px;\n    background-color:var(--primary);\n    border-radius:50%;\n  }\n  "; });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/SelectBox/SelectBox.js CHANGED Viewed

@@ -33,6 +33,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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 };
 };
@@ -47,7 +58,7 @@ var async_1 = __importDefault(require("react-select/async"));
 var simplebar_react_1 = __importDefault(require("simplebar-react"));
 var SelectBox = (0, react_1.forwardRef)(function (props, ref) {
     var _a, _b, _c, _d;
-    var hasShowDropdownIcon = props.hasShowDropdownIcon, isAsync = props.isAsync, maxOptionListHeight = props.maxOptionListHeight, options = props.options, name = props.name, placeholder = props.placeholder, onChange = props.onChange, isSearchable = props.isSearchable, hasShowSearchIcon = props.hasShowSearchIcon, menuIsOpen = props.menuIsOpen, filterOption = props.filterOption, instanceId = props.instanceId, lightBg = props.lightBg, hasError = props.hasError, errorMessage = props.errorMessage, autoComplete = props.autoComplete;
+    var hasShowDropdownIcon = props.hasShowDropdownIcon, isAsync = props.isAsync, maxOptionListHeight = props.maxOptionListHeight, options = props.options, name = props.name, placeholder = props.placeholder, onChange = props.onChange, isSearchable = props.isSearchable, hasShowSearchIcon = props.hasShowSearchIcon, menuIsOpen = props.menuIsOpen, filterOption = props.filterOption, instanceId = props.instanceId, lightBg = props.lightBg, hasError = props.hasError, errorMessage = props.errorMessage, autoComplete = props.autoComplete, width = props.width, other = __rest(props, ["hasShowDropdownIcon", "isAsync", "maxOptionListHeight", "options", "name", "placeholder", "onChange", "isSearchable", "hasShowSearchIcon", "menuIsOpen", "filterOption", "instanceId", "lightBg", "hasError", "errorMessage", "autoComplete", "width"]);
     var simplebarRef = (0, react_1.useRef)(null);
     var formatOptionLabel = function (_a) {
         var _b, _c, _d;
@@ -70,6 +81,6 @@ var SelectBox = (0, react_1.forwardRef)(function (props, ref) {
     var MenuList = function (props) {
         return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuList, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: props.children })) })));
     };
-    return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, __assign({ width: props.width, hasError: hasError, maxOptionListHeight: maxOptionListHeight, hasShowDropdownIcon: hasShowDropdownIcon }, { children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "select" }, { children: isAsync ? ((0, jsx_runtime_1.jsx)(async_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable && hasShowSearchIcon, _a), (_b = {}, _b['lightBg'] = lightBg, _b)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false }, props, { ref: ref }))) : ((0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_c = {}, _c['isSearchable'] = isSearchable && hasShowSearchIcon, _c), (_d = {}, _d['lightBg'] = lightBg, _d)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false }, props, { ref: ref }))) })), 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 })] })))] })));
+    return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, __assign({ "$width": props.width, "$hasError": hasError, "$maxOptionListHeight": maxOptionListHeight, "$hasShowDropdownIcon": hasShowDropdownIcon }, { children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "select" }, { children: isAsync ? ((0, jsx_runtime_1.jsx)(async_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable && hasShowSearchIcon, _a), (_b = {}, _b['lightBg'] = lightBg, _b)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false }, other, { ref: ref }))) : ((0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_c = {}, _c['isSearchable'] = isSearchable && hasShowSearchIcon, _c), (_d = {}, _d['lightBg'] = lightBg, _d)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false }, other, { ref: ref }))) })), 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 })] })))] })));
 });
 exports.default = SelectBox;

package/dist/components/SelectBox/SelectBox.styled.js CHANGED Viewed

@@ -12,5 +12,5 @@ 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.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font: var(--body-medium-14-17);\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          //max-height: ", ";\n          max-height: initial !important;\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover,&:is(.customSelect__option--is-focused) {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n\n            strong {\n              display: block;\n              font:var(--title-bold-16-19);\n            }\n\n            span {\n              display: block;\n              font:var(--body-medium-13-16);\n            }\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font: var(--body-medium-14-17);\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          //max-height: ", ";\n          max-height: initial !important;\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover,&:is(.customSelect__option--is-focused) {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n\n            strong {\n              display: block;\n              font:var(--title-bold-16-19);\n            }\n\n            span {\n              display: block;\n              font:var(--body-medium-13-16);\n            }\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n"])), function (props) { return props.width || '370px'; }, function (props) { return props.maxOptionListHeight && props.maxOptionListHeight; }, function (props) { return props.hasError ? "2px" : "1px"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark)"; }, function (props) { return props.hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", hasWrapper: false, width: "16px", height: "16px" })), function (props) { return props.hasError ? "FF1F1F" : "84879E"; }, function (props) { return props.hasError ? "FF1F1F" : "84879E"; }, function (props) { return !props.hasError && "url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')"; }, function (props) { return props.maxOptionListHeight; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" })));
+exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font: var(--body-medium-14-17);\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          //max-height: ", ";\n          max-height: initial !important;\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover,&:is(.customSelect__option--is-focused) {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n\n            strong {\n              display: block;\n              font:var(--title-bold-16-19);\n            }\n\n            span {\n              display: block;\n              font:var(--body-medium-13-16);\n            }\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font: var(--body-medium-14-17);\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          //max-height: ", ";\n          max-height: initial !important;\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\n\n          &::-webkit-scrollbar-track {\n            border-radius: 10px;\n            background: white;\n          }\n\n          &::-webkit-scrollbar-thumb {\n            border-radius: 10px;\n            background: var(--dark-opacity-10);\n          }\n          \n          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover,&:is(.customSelect__option--is-focused) {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n\n            strong {\n              display: block;\n              font:var(--title-bold-16-19);\n            }\n\n            span {\n              display: block;\n              font:var(--body-medium-13-16);\n            }\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n"])), function (props) { return props.$width || '370px'; }, function (props) { return props.$maxOptionListHeight && props.$maxOptionListHeight; }, function (props) { return props.$hasError ? "2px" : "1px"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark)"; }, function (props) { return props.$hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", hasWrapper: false, width: "16px", height: "16px" })), function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return !props.$hasError && "url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')"; }, function (props) { return props.$maxOptionListHeight; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" })));
 var templateObject_1;

package/dist/components/Textarea/Textarea.js CHANGED Viewed

@@ -29,8 +29,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var Textarea_styled_1 = require("./Textarea.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Textarea = function (props) {
-    var value = props.value, other = __rest(props, ["value"]);
-    return (0, jsx_runtime_1.jsxs)(Textarea_styled_1.Container, __assign({ width: props.width }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) })), (0, jsx_runtime_1.jsx)(Textarea_styled_1.TextareaStyled, __assign({}, other, { children: value })), (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 })] })))] }));
+    var hasError = props.hasError, label = props.label, errorMessage = props.errorMessage, width = props.width, height = props.height, value = props.value, resize = props.resize, name = props.name, placeholder = props.placeholder, other = __rest(props, ["hasError", "label", "errorMessage", "width", "height", "value", "resize", "name", "placeholder"]);
+    return ((0, jsx_runtime_1.jsxs)(Textarea_styled_1.Container, __assign({ "$width": props.width }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) })), (0, jsx_runtime_1.jsx)(Textarea_styled_1.TextareaStyled, __assign({ "$hasError": hasError, "$height": height, "$resize": resize }, other, { children: value })), (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 })] })))] })));
 };
 Textarea.defaultValues = {
     hasError: false,

package/dist/components/Textarea/Textarea.styled.js CHANGED Viewed

@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextareaStyled = exports.Container = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    } \n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"], ["\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    } \n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"])), function (props) { return props.width || '370px'; });
-exports.TextareaStyled = styled_components_1.default.textarea(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: ", ";\n  background: var(--dark-opacity-3);\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  outline: none;\n  resize: ", ";\n  display: block;\n  font:var(--body-semi-bold-14-17);\n  &::placeholder {\n    color: ", ";\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: ", ";\n  background: var(--dark-opacity-3);\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  outline: none;\n  resize: ", ";\n  display: block;\n  font:var(--body-semi-bold-14-17);\n  &::placeholder {\n    color: ", ";\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n\n"])), function (props) { return props.height; }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.resize; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
+exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    } \n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"], ["\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font:var(--caption-bold-12-15);\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    } \n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"])), function (props) { return props.$width || '370px'; });
+exports.TextareaStyled = styled_components_1.default.textarea(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: ", ";\n  background: var(--dark-opacity-3);\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  outline: none;\n  resize: ", ";\n  display: block;\n  font:var(--body-semi-bold-14-17);\n  &::placeholder {\n    color: ", ";\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: ", ";\n  background: var(--dark-opacity-3);\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  outline: none;\n  resize: ", ";\n  display: block;\n  font:var(--body-semi-bold-14-17);\n  &::placeholder {\n    color: ", ";\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n\n"])), function (props) { return props.$height; }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$resize; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
 var templateObject_1, templateObject_2;

package/dist/components/Textarea/stories/Textarea.stories.js CHANGED Viewed

@@ -20,7 +20,6 @@ exports.Default = {
         placeholder: "Placeholder",
         hasError: false,
         label: "Label",
-        type: "text",
         height: "140px",
         resize: "none",
     },

package/dist/components/Typography/Typography.js CHANGED Viewed

@@ -20,8 +20,8 @@ var typography_json_1 = __importDefault(require("./../../jsons/typography.json")
 var props_1 = require("./props");
 var Typography = function (props) {
     return typography_json_1.default.map(function (value, key) {
-        return ((0, jsx_runtime_1.jsxs)(Typography_styled_1.TypographyStyled, { children: [(0, jsx_runtime_1.jsx)(Typography_styled_1.Thead, { children: (0, jsx_runtime_1.jsxs)(Typography_styled_1.Tr, { children: [(0, jsx_runtime_1.jsxs)(Typography_styled_1.Th, __assign({ width: 350, className: "headline-black-32-39" }, { children: [" ", value.name, " "] })), props_1.weights.map(function (weight, wKey) { return (0, jsx_runtime_1.jsxs)(Typography_styled_1.Th, __assign({ width: 190, className: "headline-semi-bold-32-39" }, { children: [" ", weight.title, " "] }), wKey); })] }) }), (0, jsx_runtime_1.jsx)(Typography_styled_1.Tbody, { children: value.variants.map(function (value2, key2) {
-                        return ((0, jsx_runtime_1.jsxs)(Typography_styled_1.Tr, { children: [(0, jsx_runtime_1.jsxs)(Typography_styled_1.Td, { children: [" ", (0, jsx_runtime_1.jsxs)(Typography_styled_1.LeftTitle, __assign({ className: "headline-semi-bold-24-29" }, { children: [" ", value2.name, " "] })), " "] }), props_1.weights.map(function (weight, wKey) { return (0, jsx_runtime_1.jsxs)(Typography_styled_1.Td, __assign({ className: value2.class.replace("{{weight}}", weight.class) }, { children: [" ", value2.text, " "] }), wKey); })] }, key2));
+        return ((0, jsx_runtime_1.jsxs)(Typography_styled_1.TypographyStyled, { children: [(0, jsx_runtime_1.jsx)(Typography_styled_1.Thead, { children: (0, jsx_runtime_1.jsxs)(Typography_styled_1.Tr, { children: [(0, jsx_runtime_1.jsxs)(Typography_styled_1.Th, __assign({ width: 350 }, { children: [" ", value.name, " "] })), props_1.weights.map(function (weight, wKey) { return (0, jsx_runtime_1.jsxs)(Typography_styled_1.Th, __assign({ width: 190 }, { children: [" ", weight.title, " "] }), wKey); })] }) }), (0, jsx_runtime_1.jsx)(Typography_styled_1.Tbody, { children: value.variants.map(function (value2, key2) {
+                        return ((0, jsx_runtime_1.jsxs)(Typography_styled_1.Tr, { children: [(0, jsx_runtime_1.jsxs)(Typography_styled_1.Td, { children: [" ", (0, jsx_runtime_1.jsxs)(Typography_styled_1.LeftTitle, { children: [" ", value2.name, " "] }), " "] }), props_1.weights.map(function (weight, wKey) { return (0, jsx_runtime_1.jsxs)(Typography_styled_1.Td, __assign({ className: value2.class.replace("{{weight}}", weight.class) }, { children: [" ", value2.text, " "] }), wKey); })] }, key2));
                     }) })] }, key));
     });
 };

package/dist/components/Typography/Typography.styled.js CHANGED Viewed

@@ -10,8 +10,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tbody = exports.Thead = exports.Tr = exports.Td = exports.Th = exports.LeftTitle = exports.TypographyStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.TypographyStyled = styled_components_1.default.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: table;\n  width: 100%;\n  padding-bottom: 160px;\n  text-align: left;\n"], ["\n  display: table;\n  width: 100%;\n  padding-bottom: 160px;\n  text-align: left;\n"])));
-exports.LeftTitle = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: var(--grey-50);\n"], ["\n  color: var(--grey-50);\n"])));
-exports.Th = styled_components_1.default.th(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  width: ", "px;\n"], ["\n  padding-bottom: 88px;\n  width: ", "px;\n"])), function (props) { return props === null || props === void 0 ? void 0 : props.width; });
+exports.LeftTitle = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: var(--grey-50);\n  font: var(--headline-semi-bold-24-29);\n"], ["\n  color: var(--grey-50);\n  font: var(--headline-semi-bold-24-29);\n"])));
+exports.Th = styled_components_1.default.th(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  width: ", "px;\n  font: var(--headline-black-32-39);\n"], ["\n  padding-bottom: 88px;\n  width: ", "px;\n  font: var(--headline-black-32-39);\n"])), function (props) { return props === null || props === void 0 ? void 0 : props.width; });
 exports.Td = styled_components_1.default.td(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-bottom: 11px;\n"], ["\n  padding-bottom: 11px;\n"])));
 exports.Tr = styled_components_1.default.tr(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
 exports.Thead = styled_components_1.default.thead(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));

package/dist/components/ValueProposition/ValueProposition.js CHANGED Viewed

@@ -18,8 +18,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var horizontal_1 = __importDefault(require("./layouts/horizontal"));
 var vertical_1 = __importDefault(require("./layouts/vertical"));
 var square_1 = __importDefault(require("./layouts/square"));
-var squareSm_1 = __importDefault(require("./layouts/squareSm"));
-var popover_1 = __importDefault(require("./layouts/popover"));
 var ValueProposition = function (props) {
     switch (props.layout) {
         case 'vertical':
@@ -28,10 +26,6 @@ var ValueProposition = function (props) {
             return (0, jsx_runtime_1.jsx)(horizontal_1.default, __assign({}, props));
         case 'square':
             return (0, jsx_runtime_1.jsx)(square_1.default, __assign({}, props));
-        case 'squareSm':
-            return (0, jsx_runtime_1.jsx)(squareSm_1.default, __assign({}, props));
-        case 'popover':
-            return (0, jsx_runtime_1.jsx)(popover_1.default, __assign({}, props));
         default:
             return (0, jsx_runtime_1.jsx)(horizontal_1.default, __assign({}, props));
     }

package/dist/components/ValueProposition/layouts/horizontal/Horizontal.styled.js CHANGED Viewed

@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../../../constants/devices");
 exports.HorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 2rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  max-width: 672px;\n  color: var(--dark);\n  text-align: start;\n  position: relative;\n  box-sizing: border-box;\n  @media only screen and ", " {\n    aspect-ratio: 1/1;\n    padding: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n"], ["\n  padding: 2rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  max-width: 672px;\n  color: var(--dark);\n  text-align: start;\n  position: relative;\n  box-sizing: border-box;\n  @media only screen and ", " {\n    aspect-ratio: 1/1;\n    padding: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n"])), devices_1.devices.md);
 exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 1rem;\n"], ["\n  margin-top: 1rem;\n"])));
-exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  font: ", ";\n  @media only screen and ", " {\n    min-height: 38px;\n  }\n"], ["\n  display: block;\n  font: ", ";\n  @media only screen and ", " {\n    min-height: 38px;\n  }\n"])), function (props) { return props.isMobile ? "var(--title-bold-16-19)" : "var(--headline-bold-20-24)"; }, devices_1.devices.md);
+exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  font: ", ";\n  @media only screen and ", " {\n    min-height: 38px;\n  }\n"], ["\n  display: block;\n  font: ", ";\n  @media only screen and ", " {\n    min-height: 38px;\n  }\n"])), function (props) { return props.$isMobile ? "var(--title-bold-16-19)" : "var(--headline-bold-20-24)"; }, devices_1.devices.md);
 exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 1rem 0 0 0;\n  min-height: 76px;\n  font:var(--title-regular-16-19);\n  @media only screen and ", " {\n    display: none;\n  }\n"], ["\n  margin: 1rem 0 0 0;\n  min-height: 76px;\n  font:var(--title-regular-16-19);\n  @media only screen and ", " {\n    display: none;\n  }\n"])), devices_1.devices.md);
 exports.ImageWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: inline-block;\n  vertical-align: middle;\n  > * {\n    display: block !important;\n  }\n"], ["\n    display: inline-block;\n  vertical-align: middle;\n  > * {\n    display: block !important;\n  }\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/ValueProposition/layouts/horizontal/index.js CHANGED Viewed

@@ -1,20 +1,9 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Horizontal_styled_1 = require("./Horizontal.styled");
 var Horizontal = function (props) {
     var image = props.image, title = props.title, description = props.description, isMobile = props.isMobile;
-    return ((0, jsx_runtime_1.jsx)(Horizontal_styled_1.HorizontalStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Horizontal_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsxs)(Horizontal_styled_1.TextWrapper, { children: [(0, jsx_runtime_1.jsx)(Horizontal_styled_1.Title, { isMobile: isMobile, dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(Horizontal_styled_1.Description, { children: description })] })] }) })));
+    return ((0, jsx_runtime_1.jsx)(Horizontal_styled_1.HorizontalStyled, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Horizontal_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsxs)(Horizontal_styled_1.TextWrapper, { children: [(0, jsx_runtime_1.jsx)(Horizontal_styled_1.Title, { "$isMobile": isMobile, dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(Horizontal_styled_1.Description, { children: description })] })] }) }));
 };
 exports.default = Horizontal;

package/dist/components/ValueProposition/layouts/square/index.js CHANGED Viewed

@@ -1,15 +1,4 @@
 "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 };
 };
@@ -19,6 +8,6 @@ var Square_styled_1 = require("./Square.styled");
 var Divider_1 = __importDefault(require("../../../Divider"));
 var Square = function (props) {
     var image = props.image, title = props.title, dividerType = props.dividerType, hasDivider = props.hasDivider;
-    return ((0, jsx_runtime_1.jsxs)(Square_styled_1.SquareStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Square_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsx)(Square_styled_1.TextWrapper, { children: (0, jsx_runtime_1.jsx)(Square_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }) }), hasDivider && (0, jsx_runtime_1.jsx)(Square_styled_1.SquareDivider, { children: (0, jsx_runtime_1.jsx)(Divider_1.default, { type: dividerType }) })] })));
+    return ((0, jsx_runtime_1.jsxs)(Square_styled_1.SquareStyled, { children: [(0, jsx_runtime_1.jsx)(Square_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsx)(Square_styled_1.TextWrapper, { children: (0, jsx_runtime_1.jsx)(Square_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }) }), hasDivider && (0, jsx_runtime_1.jsx)(Square_styled_1.SquareDivider, { children: (0, jsx_runtime_1.jsx)(Divider_1.default, { type: dividerType }) })] }));
 };
 exports.default = Square;

package/dist/components/ValueProposition/layouts/vertical/Vertical.styled.js CHANGED Viewed

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../../../constants/devices");
 exports.VerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 4.5rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  max-width: 672px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  min-height: 362px;\n  box-sizing: border-box;\n  @media only screen and ", " {\n    grid-template-columns: 1fr;\n    min-height: initial;\n    padding: 3.5rem 3rem;\n  }\n"], ["\n  padding: 0 4.5rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  max-width: 672px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  min-height: 362px;\n  box-sizing: border-box;\n  @media only screen and ", " {\n    grid-template-columns: 1fr;\n    min-height: initial;\n    padding: 3.5rem 3rem;\n  }\n"])), devices_1.devices.md);
 exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 0;\n"], ["\n  margin-top: 0;\n"])));
-exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  font: ", ";\n"], ["\n  display: block;\n  font: ", ";\n"])), function (props) { return props.isMobile ? "var(--title-bold-16-19)" : "var(--headline-bold-20-24)"; });
-exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 1rem 0 0 0;\n  color:var(--dark-opacity-75);\n  font: ", ";\n"], ["\n  margin: 1rem 0 0 0;\n  color:var(--dark-opacity-75);\n  font: ", ";\n"])), function (props) { return props.isMobile ? "var(--body-regular-14-17)" : "var(--title-regular-16-19)"; });
+exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  font: ", ";\n"], ["\n  display: block;\n  font: ", ";\n"])), function (props) { return props.$isMobile ? "var(--title-bold-16-19)" : "var(--headline-bold-20-24)"; });
+exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 1rem 0 0 0;\n  color:var(--dark-opacity-75);\n  font: ", ";\n"], ["\n  margin: 1rem 0 0 0;\n  color:var(--dark-opacity-75);\n  font: ", ";\n"])), function (props) { return props.$isMobile ? "var(--body-regular-14-17)" : "var(--title-regular-16-19)"; });
 exports.ImageWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-right:  2rem;\n  @media only screen and ", " {\n    display: none;\n  }\n"], ["\n  margin-right:  2rem;\n  @media only screen and ", " {\n    display: none;\n  }\n"])), devices_1.devices.md);
-exports.Number = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  border-radius: 8px;\n  background: #fff;\n  box-shadow: 0 6px 30px 0 #eae9f0;\n  text-shadow: 4px 4px 15px rgba(151,99,246,.5);\n  color: var(--primary-opacity-75);\n  width: 124px;\n  height: 124px;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  left: ", ";\n  right: ", ";\n  top: -3rem;\n  font: ", ";\n  @media only screen and ", " {\n    width:80px;\n    height: 80px;\n    left: 0!important;\n    right: auto!important;\n    top: -2.5rem\n  }\n"], ["\n  position: absolute;\n  border-radius: 8px;\n  background: #fff;\n  box-shadow: 0 6px 30px 0 #eae9f0;\n  text-shadow: 4px 4px 15px rgba(151,99,246,.5);\n  color: var(--primary-opacity-75);\n  width: 124px;\n  height: 124px;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  left: ", ";\n  right: ", ";\n  top: -3rem;\n  font: ", ";\n  @media only screen and ", " {\n    width:80px;\n    height: 80px;\n    left: 0!important;\n    right: auto!important;\n    top: -2.5rem\n  }\n"])), function (props) { return props.numberAlignment === "left" ? '-2rem' : 'auto'; }, function (props) { return props.numberAlignment === "left" ? 'auto' : '-2rem'; }, function (props) { return props.isMobile ? "var(--headline-black-48-58)" : "var(--display-black-72-87)"; }, devices_1.devices.md);
+exports.Number = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  border-radius: 8px;\n  background: #fff;\n  box-shadow: 0 6px 30px 0 #eae9f0;\n  text-shadow: 4px 4px 15px rgba(151,99,246,.5);\n  color: var(--primary-opacity-75);\n  width: 124px;\n  height: 124px;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  left: ", ";\n  right: ", ";\n  top: -3rem;\n  font: ", ";\n  @media only screen and ", " {\n    width:80px;\n    height: 80px;\n    left: 0!important;\n    right: auto!important;\n    top: -2.5rem\n  }\n"], ["\n  position: absolute;\n  border-radius: 8px;\n  background: #fff;\n  box-shadow: 0 6px 30px 0 #eae9f0;\n  text-shadow: 4px 4px 15px rgba(151,99,246,.5);\n  color: var(--primary-opacity-75);\n  width: 124px;\n  height: 124px;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  left: ", ";\n  right: ", ";\n  top: -3rem;\n  font: ", ";\n  @media only screen and ", " {\n    width:80px;\n    height: 80px;\n    left: 0!important;\n    right: auto!important;\n    top: -2.5rem\n  }\n"])), function (props) { return props.$numberAlignment === "left" ? '-2rem' : 'auto'; }, function (props) { return props.$numberAlignment === "left" ? 'auto' : '-2rem'; }, function (props) { return props.$isMobile ? "var(--headline-black-48-58)" : "var(--display-black-72-87)"; }, devices_1.devices.md);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/ValueProposition/layouts/vertical/index.js CHANGED Viewed

@@ -15,6 +15,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var Vertical_styled_1 = require("../vertical/Vertical.styled");
 var Vertical = function (props) {
     var image = props.image, title = props.title, description = props.description, numberAlignment = props.numberAlignment, hasNumber = props.hasNumber, number = props.number, isMobile = props.isMobile;
-    return ((0, jsx_runtime_1.jsxs)(Vertical_styled_1.VerticalStyled, __assign({}, props, { children: [hasNumber && (0, jsx_runtime_1.jsx)(Vertical_styled_1.Number, __assign({ isMobile: isMobile, numberAlignment: numberAlignment }, { children: number })), (0, jsx_runtime_1.jsx)(Vertical_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsxs)(Vertical_styled_1.TextWrapper, { children: [(0, jsx_runtime_1.jsx)(Vertical_styled_1.Title, __assign({ isMobile: isMobile }, { children: title })), description && (0, jsx_runtime_1.jsx)(Vertical_styled_1.Description, __assign({ isMobile: isMobile }, { children: description }))] })] })));
+    return ((0, jsx_runtime_1.jsxs)(Vertical_styled_1.VerticalStyled, { children: [hasNumber && (0, jsx_runtime_1.jsx)(Vertical_styled_1.Number, __assign({ "$isMobile": isMobile, "$numberAlignment": numberAlignment }, { children: number })), (0, jsx_runtime_1.jsx)(Vertical_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsxs)(Vertical_styled_1.TextWrapper, { children: [(0, jsx_runtime_1.jsx)(Vertical_styled_1.Title, __assign({ "$isMobile": isMobile }, { children: title })), description && (0, jsx_runtime_1.jsx)(Vertical_styled_1.Description, __assign({ "$isMobile": isMobile }, { children: description }))] })] }));
 };
 exports.default = Vertical;

package/dist/components/ValueProposition/props.js CHANGED Viewed

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.alignments = exports.layouts = void 0;
-exports.layouts = ['vertical', 'horizontal', 'square', 'squareSm', 'popover'];
+exports.layouts = ['vertical', 'horizontal', 'square'];
 exports.alignments = ['left', 'right'];
 var ValuePropositionDefault = {
     layout: exports.layouts[0],

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "1.76.37",
+  "version": "1.76.39",
   "files": [
     "dist"
   ],

package/dist/components/ValueProposition/layouts/popover/Popover.styled.js DELETED Viewed

@@ -1,18 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageWrapper = exports.Description = exports.Title = exports.Close = exports.TextWrapper = exports.PopoverStyled = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-exports.PopoverStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 1.5rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: center;\n  //max-width: 456px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  box-sizing: border-box;\n  aspect-ratio: 1/1;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n  transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n  transform: scale(.9);\n  ", "\n"], ["\n  padding: 1.5rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: center;\n  //max-width: 456px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  box-sizing: border-box;\n  aspect-ratio: 1/1;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n  transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n  transform: scale(.9);\n  ", "\n"])), function (props) { return props.show && "\n      opacity: 1;\n      user-select: initial;\n      pointer-events: initial;\n      transform: scale(1);\n  "; });
-exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 1rem;\n"], ["\n  margin-top: 1rem;\n"])));
-exports.Close = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  right: 1.5rem;\n  top: 1.5rem;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: white;\n  transition: all .2s;\n\n  &:hover {\n    box-shadow: 0 6px 30px #EAE9F0;\n  }\n"], ["\n  position: absolute;\n  right: 1.5rem;\n  top: 1.5rem;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: white;\n  transition: all .2s;\n\n  &:hover {\n    box-shadow: 0 6px 30px #EAE9F0;\n  }\n"])));
-exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  font:var(--title-bold-16-19);\n"], ["\n  display: block;\n  font:var(--title-bold-16-19);\n"])));
-exports.Description = styled_components_1.default.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: 1rem 0 0 0;\n  font: ", ";\n"], ["\n  margin: 1rem 0 0 0;\n  font: ", ";\n"])), function (props) { return props.isMobile ? "var(--body-regular-14-17)" : "var(--title-regular-16-19)"; });
-exports.ImageWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/ValueProposition/layouts/popover/index.js DELETED Viewed

@@ -1,32 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var Popover_styled_1 = require("./Popover.styled");
-var Icon_1 = __importDefault(require("../../../Icon/Icon"));
-var react_1 = require("react");
-var Popover = function (props) {
-    var image = props.image, title = props.title, description = props.description, isMobile = props.isMobile, show = props.show, onClose = props.onClose;
-    var _a = (0, react_1.useState)(show), isShow = _a[0], setIsShow = _a[1];
-    (0, react_1.useEffect)(function () {
-        setIsShow(show);
-    }, [show]);
-    return ((0, jsx_runtime_1.jsxs)(Popover_styled_1.PopoverStyled, __assign({}, props, { show: isShow }, { children: [(0, jsx_runtime_1.jsx)(Popover_styled_1.Close, __assign({ onClick: function () {
-                    setIsShow(false);
-                    onClose();
-                } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", width: "32px", height: "32px" }) })), (0, jsx_runtime_1.jsx)(Popover_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsxs)(Popover_styled_1.TextWrapper, { children: [(0, jsx_runtime_1.jsx)(Popover_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(Popover_styled_1.Description, __assign({ isMobile: isMobile }, { children: description }))] })] })));
-};
-exports.default = Popover;

package/dist/components/ValueProposition/layouts/squareSm/SquareSm.styled.js DELETED Viewed

@@ -1,17 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageWrapper = exports.Title = exports.TextWrapper = exports.SquareSmStyled = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-var devices_1 = require("../../../../constants/devices");
-exports.SquareSmStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 1.5rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  //max-width: 216px;\n  aspect-ratio: 1/1;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  box-sizing: border-box;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n  transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n  transform: scale(.9);\n  cursor: pointer;\n  \n  @media only screen and ", " {\n    padding: 1rem;\n  }\n  ", "\n"], ["\n  padding: 1.5rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  //max-width: 216px;\n  aspect-ratio: 1/1;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  box-sizing: border-box;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n  transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n  transform: scale(.9);\n  cursor: pointer;\n  \n  @media only screen and ", " {\n    padding: 1rem;\n  }\n  ", "\n"])), devices_1.devices.md, function (props) { return props.show && "\n      opacity: 1;\n      user-select: initial;\n      pointer-events: initial;\n      transform: scale(1);\n  "; });
-exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 1rem;\n  min-height: 38px;\n"], ["\n  margin-top: 1rem;\n  min-height: 38px;\n"])));
-exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  font:var(--title-bold-16-19);\n"], ["\n  display: block;\n  font:var(--title-bold-16-19);\n"])));
-exports.ImageWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: middle;\n"], ["\n  display: inline-block;\n  vertical-align: middle;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/ValueProposition/layouts/squareSm/index.js DELETED Viewed

@@ -1,25 +0,0 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var SquareSm_styled_1 = require("./SquareSm.styled");
-var react_1 = require("react");
-var SquareSm = function (props) {
-    var image = props.image, title = props.title, show = props.show;
-    var _a = (0, react_1.useState)(show), isShow = _a[0], setIsShow = _a[1];
-    (0, react_1.useEffect)(function () {
-        setIsShow(show);
-    }, [show]);
-    return ((0, jsx_runtime_1.jsx)(SquareSm_styled_1.SquareSmStyled, __assign({}, props, { show: isShow }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SquareSm_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsx)(SquareSm_styled_1.TextWrapper, { children: (0, jsx_runtime_1.jsx)(SquareSm_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }) })] }) })));
-};
-exports.default = SquareSm;