@trafilea/afrodita-components 5.0.0-beta.292 → 5.0.0-beta.293

package/build/index.esm.js/src/components/shared/label/styles.js

@@ -0,0 +1,39 @@
+import { css } from '../../../../node_modules/@emotion/react/dist/emotion-react.esm.js';
+
+/* styles common to all labels */
+var baseStyles = css({
+    letterSpacing: 0,
+});
+/* variants */
+var regular = function (theme) {
+    return css({
+        fontWeight: theme.typography.config.weight.regular,
+    });
+};
+var demi = function (theme) {
+    return css({
+        fontWeight: theme.typography.config.weight.demi,
+    });
+};
+/* size variants */
+var small = function (theme) {
+    return css({
+        fontSize: theme.component.label.fontSize.small,
+        lineHeight: theme.component.label.lineHeight.small,
+    });
+};
+var medium = function (theme) {
+    return css({
+        fontSize: theme.component.label.fontSize.medium,
+        lineHeight: theme.component.label.lineHeight.medium,
+    });
+};
+var large = function (theme) {
+    return css({
+        fontSize: theme.component.label.fontSize.large,
+        lineHeight: theme.component.label.lineHeight.large,
+    });
+};
+
+export { baseStyles, demi, large, medium, regular, small };
+//# sourceMappingURL=styles.js.map

package/build/index.esm.js/src/components/shared/label/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/shared/portal/Portal.js

@@ -0,0 +1,44 @@
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+var Portal = function (_a) {
+    var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
+    var _b = useState(false), mounted = _b[0], setMounted = _b[1];
+    var container = useRef(null);
+    useEffect(function () {
+        var element = document.getElementById(id);
+        if (element == null) {
+            element = document.createElement('div');
+            element.id = id;
+            document.body.appendChild(element);
+        }
+        if (element == null) {
+            throw new Error("Unable to find/create container (".concat(id, ")"));
+        }
+        element.dataset.testId = id;
+        setMounted(true);
+        container.current = element;
+    }, [id]);
+    useEffect(function () {
+        if (!mounted) {
+            return;
+        }
+        container.current.style.overflow = overflow ? 'visible' : 'hidden';
+        for (var key in style) {
+            // @ts-ignore
+            container.current.style[key] = style[key];
+        }
+    }, [style, overflow, mounted]);
+    useEffect(function () {
+        if (mounted) {
+            container.current.className = className !== null && className !== void 0 ? className : '';
+        }
+    }, [className, mounted]);
+    if (mounted === false) {
+        return null;
+    }
+    return createPortal(children, container.current, id);
+};
+
+export { Portal };
+//# sourceMappingURL=Portal.js.map

package/build/index.esm.js/src/components/shared/portal/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/shared/select/BaseSelect.js

@@ -0,0 +1,22 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { Listbox as Ee } from '../../../../node_modules/@headlessui/react/dist/headlessui.esm.js';
+import BaseSelectButton from './BaseSelectButton.js';
+import BaseSelectOptions from './BaseSelectOptions.js';
+import BaseSelectOption from './BaseSelectOption.js';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+
+var CustomListBox = newStyled(Ee)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+function BaseSelect(_a) {
+    var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
+    return (jsx(CustomListBox, __assign({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
+}
+var BaseSelect$1 = Object.assign(BaseSelect, {
+    Button: BaseSelectButton,
+    Options: BaseSelectOptions,
+    Option: BaseSelectOption,
+});
+var templateObject_1;
+
+export { BaseSelect$1 as default };
+//# sourceMappingURL=BaseSelect.js.map

package/build/index.esm.js/src/components/shared/select/BaseSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSelect.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/shared/select/BaseSelectButton.js

@@ -0,0 +1,11 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { Listbox as Ee } from '../../../../node_modules/@headlessui/react/dist/headlessui.esm.js';
+
+var BaseSelectButton = function (_a) {
+    var children = _a.children, as = _a.as;
+    return jsx(Ee.Button, __assign({ as: as }, { children: children }), void 0);
+};
+
+export { BaseSelectButton as default };
+//# sourceMappingURL=BaseSelectButton.js.map

package/build/index.esm.js/src/components/shared/select/BaseSelectButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSelectButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/build/index.esm.js/src/components/shared/select/BaseSelectOption.js

@@ -0,0 +1,11 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { Listbox as Ee } from '../../../../node_modules/@headlessui/react/dist/headlessui.esm.js';
+
+function BaseSelectOption(_a) {
+    var value = _a.value, disabled = _a.disabled, children = _a.children, className = _a.className, as = _a.as;
+    return (jsx(Ee.Option, __assign({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
+}
+
+export { BaseSelectOption as default };
+//# sourceMappingURL=BaseSelectOption.js.map

package/build/index.esm.js/src/components/shared/select/BaseSelectOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSelectOption.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/build/index.esm.js/src/components/shared/select/BaseSelectOptions.js

@@ -0,0 +1,11 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { Listbox as Ee } from '../../../../node_modules/@headlessui/react/dist/headlessui.esm.js';
+
+var BaseSelectOptions = function (_a) {
+    var children = _a.children, className = _a.className;
+    return jsx(Ee.Options, __assign({ className: className }, { children: children }), void 0);
+};
+
+export { BaseSelectOptions as default };
+//# sourceMappingURL=BaseSelectOptions.js.map

package/build/index.esm.js/src/components/shared/select/BaseSelectOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSelectOptions.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/build/index.esm.js/src/components/shared/spacing/Spacing.js

@@ -0,0 +1,12 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+
+var Spacing = function (_a) {
+    var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
+    var style = useMemo(function () { return (__assign(__assign({}, styleProp), { width: size, height: size, verticalAlign: 'middle', display: type === 'block' ? 'block' : 'inline-block' })); }, [size, type, styleProp]);
+    return jsx("div", __assign({ style: style }, { children: children }), void 0);
+};
+
+export { Spacing };
+//# sourceMappingURL=Spacing.js.map

package/build/index.esm.js/src/components/shared/spacing/Spacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacing.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/build/index.esm.js/src/components/short-banner/ShortBanner.js

@@ -0,0 +1,26 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useTheme } from '../../core/theme/Theme.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  flex-direction: column;\n  padding: 0px 0px 5px;\n  width: ", ";\n  background: ", ";\n  color: ", ";\n  border: ", ";\n"], ["\n  ", "\n  display: flex;\n  flex-direction: column;\n  padding: 0px 0px 5px;\n  width: ", ";\n  background: ", ";\n  color: ", ";\n  border: ", ";\n"])), function (_a) {
+    var alignCenter = _a.alignCenter;
+    return alignCenter &&
+        "\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  ";
+}, function (_a) {
+    var widthAuto = _a.widthAuto;
+    return (widthAuto ? 'auto' : 'fit-content');
+}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
+    return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
+});
+var TitleText = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-style: normal;\n  font-weight: 700;\n  line-height: 267%;\n  margin: 0px 20px 0px;\n  font-size: 30px;\n  @media (max-width: 768px) {\n    font-size: 24px;\n  }\n"], ["\n  font-style: normal;\n  font-weight: 700;\n  line-height: 267%;\n  margin: 0px 20px 0px;\n  font-size: 30px;\n  @media (max-width: 768px) {\n    font-size: 24px;\n  }\n"])));
+var BannerText = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-style: normal;\n  font-weight: 400;\n  line-height: 120%;\n  font-size: 20px;\n  letter-spacing: -0.02em;\n  margin: 0px 20px 20px;\n  width: 70%;\n  @media (max-width: 768px) {\n    font-size: 16px;\n    width: 80%;\n  }\n"], ["\n  font-style: normal;\n  font-weight: 400;\n  line-height: 120%;\n  font-size: 20px;\n  letter-spacing: -0.02em;\n  margin: 0px 20px 20px;\n  width: 70%;\n  @media (max-width: 768px) {\n    font-size: 16px;\n    width: 80%;\n  }\n"])));
+var ShortBanner = function (_a) {
+    var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
+    var theme = useTheme();
+    return (jsxs(Container, __assign({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx(TitleText, { children: title }, void 0), jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { BannerText, Container, ShortBanner, TitleText };
+//# sourceMappingURL=ShortBanner.js.map

package/build/index.esm.js/src/components/short-banner/ShortBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShortBanner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/size/guide/SizeFitGuide.js

@@ -0,0 +1,18 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { ComponentSize } from '../../../types/enums.js';
+import { Icon } from '../../icons/index.js';
+import TextButton from '../../text-button/TextButton.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
+var P = newStyled.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var PercentageSpan = newStyled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"])));
+var SizeFitGuide = function (_a) {
+    var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
+    return (jsxs(Container, { children: [jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs(P, { children: ["Fit As Expected:", ' ', jsxs(PercentageSpan, __assign({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { SizeFitGuide as default };
+//# sourceMappingURL=SizeFitGuide.js.map

package/build/index.esm.js/src/components/size/guide/SizeFitGuide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SizeFitGuide.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/size/selector/SizeSelector.js

@@ -0,0 +1,30 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from '../../../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { ComponentSize } from '../../../types/enums.js';
+import SelectorSecondary from '../../selector/simple/SelectorSecondary.js';
+import { Text } from '../../text/Text.js';
+
+var ButtonsContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: ", ";\n"])), function (_a) {
+    var inline = _a.inline;
+    return (inline ? '0 0 0 10px' : '8px 0 0 0');
+});
+var SizeSelector = function (_a) {
+    var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, width = _a.width;
+    return (jsxs("div", __assign({ css: {
+            display: 'flex',
+            flexDirection: inline ? 'row' : 'column',
+            alignItems: inline ? 'center' : 'start',
+        } }, { children: [jsxs(Text, __assign({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text, __assign({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), jsx(ButtonsContainer, __assign({ inline: inline }, { children: sizes.map(function (size) {
+                    var active = !size.disabled && size.label === selectedValue.label;
+                    return (jsx(SelectorSecondary, { css: {
+                            padding: '0.75rem 1rem 0.625rem',
+                            margin: '0 0.5rem 0.625rem 0',
+                            minWidth: '4rem',
+                        }, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
+                }) }), void 0)] }), void 0));
+};
+var templateObject_1;
+
+export { SizeSelector as default };
+//# sourceMappingURL=SizeSelector.js.map

package/build/index.esm.js/src/components/size/selector/SizeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SizeSelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/size-chart/SizeChart.js

@@ -0,0 +1,45 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useTheme } from '../../core/theme/Theme.js';
+
+var TableElement = newStyled.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  border-spacing: 0;\n  font-size: 0.875rem;\n  line-height: 3.125rem;\n  width: 100%;\n  color: ", ";\n"], ["\n  box-sizing: border-box;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  border-spacing: 0;\n  font-size: 0.875rem;\n  line-height: 3.125rem;\n  width: 100%;\n  color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
+var TableCell = newStyled.td(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  text-align: center;\n  line-height: normal;\n  padding: 1rem;\n  text-align: start;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n    text-align: center;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  text-align: center;\n  line-height: normal;\n  padding: 1rem;\n  text-align: start;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n    text-align: center;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
+var TableHead = newStyled.th(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  font-weight: 700;\n  line-height: normal;\n  padding: 1rem;\n  text-align: start;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    text-align: center;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  font-weight: 700;\n  line-height: normal;\n  padding: 1rem;\n  text-align: start;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    text-align: center;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
+var TableRow = newStyled.tr(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  &:last-child {\n    td {\n      border-bottom: none;\n    }\n  }\n\n  &.background {\n    background-color: ", ";\n  }\n"], ["\n  &:last-child {\n    td {\n      border-bottom: none;\n    }\n  }\n\n  &.background {\n    background-color: ", ";\n  }\n"])), function (props) { return props.backgroundColor; });
+var SizeChartTable = function (_a) {
+    var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
+    var theme = useTheme();
+    var getCellColor = function (index, cell) {
+        if (index == 0) {
+            return '#f6f0e7';
+        }
+        switch (cell) {
+            case 'XS':
+                return '#f5bab0';
+            case 'S':
+                return '#f7a08b';
+            case 'M':
+                return '#ffe1b8';
+            case 'L':
+                return '#f5bab0';
+            case 'XL':
+                return '#8bbeea';
+            case '2XL':
+                return '#b1d7c3';
+            case '3XL':
+                return '#e7a4f7';
+            case '4XL':
+                return '#e7c9b2';
+            default:
+                return '';
+        }
+    };
+    return (jsxs(TableElement, __assign({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx("thead", __assign({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsx(TableRow, __assign({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx(TableHead, __assign({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx(TableCell, __assign({ style: {
+                            backgroundColor: getCellColor(index, cell),
+                        }, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx(TableRow, __assign({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx(TableCell, __assign({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { SizeChartTable as default };
+//# sourceMappingURL=SizeChart.js.map

package/build/index.esm.js/src/components/size-chart/SizeChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SizeChart.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/size-table/SizeTable.js

@@ -0,0 +1,18 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useTheme } from '../../core/theme/Theme.js';
+
+var TableElement = newStyled.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  border-spacing: 0;\n  font-size: 0.875rem;\n  line-height: 3.125rem;\n  width: 100%;\n  color: ", ";\n"], ["\n  box-sizing: border-box;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  border-spacing: 0;\n  font-size: 0.875rem;\n  line-height: 3.125rem;\n  width: 100%;\n  color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
+var TableCell = newStyled.td(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  padding: 8px;\n  text-align: center;\n  line-height: 20px;\n  height: 52px;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  padding: 8px;\n  text-align: center;\n  line-height: 20px;\n  height: 52px;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
+var TableHead = newStyled.th(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  font-weight: 700;\n\n  &:last-child {\n    border-right: none;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  font-weight: 700;\n\n  &:last-child {\n    border-right: none;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
+var TableRow = newStyled.tr(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  &:last-child {\n    td {\n      border-bottom: none;\n    }\n  }\n\n  &.background {\n    background-color: ", ";\n  }\n"], ["\n  &:last-child {\n    td {\n      border-bottom: none;\n    }\n  }\n\n  &.background {\n    background-color: ", ";\n  }\n"])), function (props) { return props.backgroundColor; });
+var SizeTable = function (_a) {
+    var headers = _a.headers, data = _a.data, className = _a.className;
+    var theme = useTheme();
+    return (jsxs(TableElement, __assign({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx("thead", { children: jsx(TableRow, __assign({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx(TableHead, __assign({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx("tbody", { children: data.map(function (row, index) { return (jsx(TableRow, __assign({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx(TableCell, __assign({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { SizeTable };
+//# sourceMappingURL=SizeTable.js.map

package/build/index.esm.js/src/components/size-table/SizeTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SizeTable.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/slider/ArrowButton.js

@@ -0,0 +1,22 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { Icon } from '../icons/index.js';
+
+var Button = newStyled.button(function () { return ({
+    background: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+}); });
+var Direction;
+(function (Direction) {
+    Direction[Direction["Left"] = 0] = "Left";
+    Direction[Direction["Right"] = 1] = "Right";
+})(Direction || (Direction = {}));
+var ArrowButton = function (_a) {
+    var direction = _a.direction, onClick = _a.onClick, width = _a.width, height = _a.height, className = _a.className;
+    return (jsx(Button, __assign({ className: className, type: "button", onClick: onClick, "data-testid": "arrow-button-".concat(direction) }, { children: direction === 'left' ? (jsx(Icon.Arrows.ChevronLeft, { width: width, height: height, opacity: 0.5 }, void 0)) : (jsx(Icon.Arrows.ChevronRight, { width: width, height: height, opacity: 0.5 }, void 0)) }), void 0));
+};
+
+export { Direction, ArrowButton as default };
+//# sourceMappingURL=ArrowButton.js.map

package/build/index.esm.js/src/components/slider/ArrowButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/slider/SliderNavigation.js

@@ -0,0 +1,68 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from '../../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js';
+import { useState } from 'react';
+import ArrowButton from './ArrowButton.js';
+import { Icon } from '../icons/index.js';
+import { ComponentSize } from '../../types/enums.js';
+import StyledSlider from './StyledSlider.js';
+import { useTheme } from '../../core/theme/Theme.js';
+
+var getStylesBySize = function (size) {
+    // rem units
+    switch (size) {
+        case ComponentSize.Large:
+            return {
+                dotWidth: 1,
+                dotHeight: 1,
+                dotsSpacing: 0.75,
+            };
+        case ComponentSize.Medium:
+            return {
+                dotWidth: 0.75,
+                dotHeight: 0.75,
+                dotsSpacing: 0.625,
+            };
+        case ComponentSize.Small:
+            return {
+                dotWidth: 0.5,
+                dotHeight: 0.5,
+                dotsSpacing: 0.5,
+            };
+        default:
+            return {
+                dotWidth: 0.75,
+                dotHeight: 0.75,
+                dotsSpacing: 0.625,
+            };
+    }
+};
+var SliderNavigation = function (_a) {
+    var children = _a.children, infinite = _a.infinite, arrows = _a.arrows, adaptiveHeight = _a.adaptiveHeight, dotsSize = _a.dotsSize, dotListMarginTop = _a.dotListMarginTop, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b, _c = _a.dots, dots = _c === void 0 ? true : _c, _d = _a.slidesToShow, slidesToShow = _d === void 0 ? 1 : _d, _e = _a.speed, speed = _e === void 0 ? 500 : _e;
+    var _f = useState(0), activeIndex = _f[0], setActiveIndex = _f[1];
+    var styles = dotsSize && getStylesBySize(dotsSize);
+    var theme = useTheme();
+    var nextArrow = arrows && (jsx(ArrowButton, { direction: "right", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
+    var prevArrow = arrows && (jsx(ArrowButton, { direction: "left", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
+    var settings = {
+        arrows: !!arrows,
+        dots: dots,
+        infinite: infinite,
+        speed: speed,
+        slidesToShow: slidesToShow,
+        slidesToScroll: 1,
+        initialSlide: initialSlide,
+        nextArrow: nextArrow,
+        prevArrow: prevArrow,
+        adaptiveHeight: adaptiveHeight,
+        // eslint-disable-next-line react/display-name
+        customPaging: function (i) { return (jsx(Icon.SlideDots.SlideDot, { width: styles && styles.dotWidth, height: styles && styles.dotHeight, fill: activeIndex === i ? theme.colors.shades['700'].color : 'none' }, i)); },
+        afterChange: setActiveIndex,
+    };
+    return (jsx("div", __assign({ css: {
+            padding: arrows ? "0 ".concat(arrows.arrowWidth + arrows.arrowPadding, "rem") : 0,
+            maxWidth: '100%',
+        } }, { children: jsx(StyledSlider, __assign({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
+};
+
+export { SliderNavigation as default };
+//# sourceMappingURL=SliderNavigation.js.map

package/build/index.esm.js/src/components/slider/SliderNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderNavigation.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/slider/StyledSlider.js

@@ -0,0 +1,15 @@
+import { __makeTemplateObject } from '../../../node_modules/tslib/tslib.es6.js';
+import Slider from '../../../node_modules/@ant-design/react-slick/es/slider.js';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+
+var StyledSlider = newStyled(Slider)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .slick-dots {\n    position: static;\n    display: flex !important;\n    justify-content: center;\n    column-gap: ", ";\n    margin-top: ", ";\n  }\n  .slick-prev {\n    left: ", ";\n  }\n  .slick-next {\n    right: ", ";\n  }\n  .slick-prev,\n  .slick-next {\n    width: fit-content;\n    height: fit-content;\n  }\n  .slick-prev:before,\n  .slick-next:before {\n    content: none;\n  }\n  .slick-dots li {\n    margin: 0;\n    width: auto;\n    line-height: 0;\n    height: auto;\n  }\n"], ["\n  .slick-dots {\n    position: static;\n    display: flex !important;\n    justify-content: center;\n    column-gap: ", ";\n    margin-top: ", ";\n  }\n  .slick-prev {\n    left: ", ";\n  }\n  .slick-next {\n    right: ", ";\n  }\n  .slick-prev,\n  .slick-next {\n    width: fit-content;\n    height: fit-content;\n  }\n  .slick-prev:before,\n  .slick-next:before {\n    content: none;\n  }\n  .slick-dots li {\n    margin: 0;\n    width: auto;\n    line-height: 0;\n    height: auto;\n  }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
+    var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
+    return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
+}, function (_a) {
+    var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
+    return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
+});
+var templateObject_1;
+
+export { StyledSlider as default };
+//# sourceMappingURL=StyledSlider.js.map

package/build/index.esm.js/src/components/slider/StyledSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledSlider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/spinner/Spinner.js

@@ -0,0 +1,24 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { Icon } from '../icons/index.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return (size ? size : '100%');
+}, function (_a) {
+    var size = _a.size;
+    return (size ? size : '100%');
+});
+var Animation = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  @keyframes svg--animation {\n    0% {\n      transform: rotateZ(0deg);\n    }\n    100% {\n      transform: rotateZ(360deg);\n    }\n  }\n  width: 100%;\n  height: 100%;\n  animation: linear infinite svg--animation;\n  animation-duration: ", "s;\n"], ["\n  @keyframes svg--animation {\n    0% {\n      transform: rotateZ(0deg);\n    }\n    100% {\n      transform: rotateZ(360deg);\n    }\n  }\n  width: 100%;\n  height: 100%;\n  animation: linear infinite svg--animation;\n  animation-duration: ", "s;\n"])), function (_a) {
+    var animationDuration = _a.animationDuration;
+    return animationDuration;
+});
+var Spinner = function (_a) {
+    var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
+    return (jsx(Container, __assign({ size: size, "data-testid": "Container" }, { children: complete ? (jsx(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx(Animation, __assign({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
+};
+var templateObject_1, templateObject_2;
+
+export { Spinner };
+//# sourceMappingURL=Spinner.js.map

package/build/index.esm.js/src/components/spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/strength-bars/StrengthBars.js

@@ -0,0 +1,22 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+
+var Container = newStyled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  gap: 6px;\n  display: flex;\n  color: #292929;\n  align-items: flex-end;\n"], ["\n  gap: 6px;\n  display: flex;\n  color: #292929;\n  align-items: flex-end;\n"])));
+var Content = newStyled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-end;\n  font-size: 14px;\n  font-weight: 600;\n"], ["\n  display: flex;\n  align-items: flex-end;\n  font-size: 14px;\n  font-weight: 600;\n"])));
+var BarContainer = newStyled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  gap: 2px;\n  display: flex;\n  align-items: flex-end;\n  width: fit-content;\n"], ["\n  gap: 2px;\n  display: flex;\n  align-items: flex-end;\n  width: fit-content;\n"])));
+var Bar = newStyled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 2px;\n  border-radius: 2px;\n  height: ", ";\n  background-color: ", ";\n"], ["\n  width: 2px;\n  border-radius: 2px;\n  height: ", ";\n  background-color: ", ";\n"])), function (_a) {
+    var index = _a.index;
+    return "".concat(6 + 3 * index, "px");
+}, function (_a) {
+    var isFilled = _a.isFilled;
+    return (isFilled ? '#292929' : '#D9D9D9');
+});
+var StrengthBars = function (_a) {
+    var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
+    return (jsxs(Container, __assign({ "data-testid": "strength-bar" }, { children: [jsx(BarContainer, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx(Bar, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx(Content, { children: supportText }, void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { StrengthBars };
+//# sourceMappingURL=StrengthBars.js.map

package/build/index.esm.js/src/components/strength-bars/StrengthBars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StrengthBars.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/tabs/Tab.js

@@ -0,0 +1,25 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+
+var TabContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  flex-direction: column;\n  flex: 1 1 0;\n  font-size: ", ";\n  height: ", ";\n  margin: 0 auto;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s;\n  max-width: ", ";\n  border: none;\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  flex-direction: column;\n  flex: 1 1 0;\n  font-size: ", ";\n  height: ", ";\n  margin: 0 auto;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s;\n  max-width: ", ";\n  border: none;\n\n  ", "\n"])), function (_a) {
+    var titleSize = _a.titleSize;
+    return titleSize;
+}, function (_a) {
+    var height = _a.height;
+    return height;
+}, function (_a) {
+    var tabsMaxWidth = _a.tabsMaxWidth;
+    return tabsMaxWidth;
+}, function (_a) {
+    var selected = _a.selected, color = _a.color, selectedTitleWeight = _a.selectedTitleWeight;
+    return selected ? "border-bottom: 3px solid ".concat(color, "; font-weight: ").concat(selectedTitleWeight, ";") : '';
+});
+var Tab = function (_a) {
+    var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
+    return (jsx(Fragment, { children: jsx(TabContainer, __assign({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
+};
+var templateObject_1;
+
+export { Tab as default };
+//# sourceMappingURL=Tab.js.map

package/build/index.esm.js/src/components/tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/tabs/Tabs.js

@@ -0,0 +1,27 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState } from 'react';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import Tab from './Tab.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var TabList = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 0 25px;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 0 25px;\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+});
+var TabContent = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
+var TabSeparator = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: var(--colors-shades-white-color);\n  font-family: initial;\n  font-size: 40px;\n  line-height: 69px;\n  padding: 0 25px;\n"], ["\n  color: var(--colors-shades-white-color);\n  font-family: initial;\n  font-size: 40px;\n  line-height: 69px;\n  padding: 0 25px;\n"])));
+var Tabs = function (_a) {
+    var _b;
+    var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
+    var _d = useState(initialSelected), selectedTab = _d[0], setSelectedTab = _d[1];
+    if (!Array.isArray(tabs) || tabs.length === 0) {
+        return null;
+    }
+    var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
+    return (jsxs(Container, __assign({ "data-testid": "tabs-container" }, { children: [jsx(TabList, __assign({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxs(React__default.Fragment, { children: [jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx(TabContent, __assign({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { Tabs as default };
+//# sourceMappingURL=Tabs.js.map

package/build/index.esm.js/src/components/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}