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

package/build/index.js/src/components/search-navigation/SearchNavigation.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var index = require('../icons/index.js');
+var Text = require('../text/Text.js');
+
+var Container = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0 1rem 1rem;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0 1rem 1rem;\n"])));
+var BackArrow = emotionStyled_esm.div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  transform: rotate(180deg);\n  margin-right: 0.5rem;\n"], ["\n  transform: rotate(180deg);\n  margin-right: 0.5rem;\n"])));
+var BoldSpan = emotionStyled_esm.span(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"])));
+var NormalSpan = emotionStyled_esm.span(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  white-space: pre;\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  white-space: pre;\n"])));
+var SearchNavigationParents = emotionStyled_esm.div(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  padding-left: 1.25rem;\n  padding-right: 1rem;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  padding-left: 1.25rem;\n  padding-right: 1rem;\n"])));
+var SearchNavigation = function (_a) {
+    var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
+    return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsxs(Text.Text, tslib_es6.__assign({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(index.Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
+                    return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
+                }) }, void 0)] }, void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+module.exports = SearchNavigation;
+//# sourceMappingURL=SearchNavigation.js.map

package/build/index.js/src/components/search-navigation/SearchNavigation.js.map

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

package/build/index.js/src/components/selector/simple/SelectorSecondary.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var emotionReactJsxRuntime_esm = require('../../../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js');
+var Theme = require('../../../core/theme/Theme.js');
+var SimpleSelector = require('./SimpleSelector.js');
+
+var SelectorSecondary = function (_a) {
+    var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, width = _a.width, onClick = _a.onClick, showNoStockStyles = _a.showNoStockStyles, id = _a.id;
+    var theme = Theme.useTheme();
+    var stylesByActive = active
+        ? {
+            background: theme.component.selector.hover.background,
+            color: theme.component.selector.hover.color,
+            border: theme.component.selector.hover.border,
+            fontWeight: theme.component.selector.hover.fontWeight,
+        }
+        : {
+            background: "".concat(theme.component.selector.default.background, " !important"),
+            color: "".concat(theme.component.selector.default.color, " !important"),
+            border: "".concat(theme.component.selector.default.border, " !important"),
+            fontWeight: theme.component.selector.default.fontWeight,
+        };
+    if (showNoStockStyles) {
+        stylesByActive = {
+            background: theme.component.selector.noStock.background,
+            color: theme.component.selector.noStock.color,
+            border: theme.component.selector.noStock.border,
+            fontWeight: theme.component.selector.noStock.fontWeight,
+        };
+    }
+    return (emotionReactJsxRuntime_esm.jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, width: width, css: tslib_es6.__assign(tslib_es6.__assign({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
+                background: showNoStockStyles ? '' : theme.component.selector.hover.background,
+                color: showNoStockStyles ? '' : theme.component.selector.hover.color,
+            }, '&:disabled': {
+                border: theme.component.selector.disabled.border,
+                background: theme.colors.background.disabled,
+                color: theme.colors.text.disabled,
+            } }), id: id }, void 0));
+};
+
+module.exports = SelectorSecondary;
+//# sourceMappingURL=SelectorSecondary.js.map

package/build/index.js/src/components/selector/simple/SelectorSecondary.js.map

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

package/build/index.js/src/components/selector/simple/SimpleSelector.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var emotionReactJsxRuntime_esm = require('../../../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js');
+var Theme = require('../../../core/theme/Theme.js');
+var enums = require('../../../types/enums.js');
+var BaseButton = require('../../shared/button/BaseButton.js');
+
+var getStylesBySize = function (size, theme) {
+    switch (size) {
+        case enums.ComponentSize.Medium:
+            return {
+                padding: theme.component.selector.size.medium.padding,
+                borderRadius: theme.component.selector.size.medium.borderRadius,
+            };
+        case enums.ComponentSize.Small:
+            return {
+                padding: theme.component.selector.size.small.padding,
+                borderRadius: theme.component.selector.size.small.borderRadius,
+            };
+    }
+};
+var SimpleSelector = function (_a) {
+    var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? enums.ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, _f = _a.width, width = _f === void 0 ? '' : _f, onClick = _a.onClick, id = _a.id;
+    var theme = Theme.useTheme();
+    var stylesBySize = getStylesBySize(size, theme);
+    var activeStyles = active
+        ? { fontWeight: theme.component.selector.hover.fontWeight }
+        : { fontWeight: theme.component.selector.default.fontWeight };
+    return (emotionReactJsxRuntime_esm.jsx(BaseButton, tslib_es6.__assign({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, stylesBySize), activeStyles), { width: width, boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
+                fontWeight: theme.component.selector.hover.fontWeight,
+            }, '&:disabled': {
+                color: theme.colors.shades['250'].color,
+                cursor: 'not-allowed',
+            } }), id: id }, { children: text }), void 0));
+};
+
+module.exports = SimpleSelector;
+//# sourceMappingURL=SimpleSelector.js.map

package/build/index.js/src/components/selector/simple/SimpleSelector.js.map

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

package/build/index.js/src/components/shared/button/BaseButton.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var emotionReactJsxRuntime_esm = require('../../../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js');
+
+var BaseButton = function (_a) {
+    var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline, _c = _a.uppercase, uppercase = _c === void 0 ? true : _c, _d = _a.testId, testId = _d === void 0 ? 'base-button' : _d, id = _a.id;
+    return (emotionReactJsxRuntime_esm.jsxs("button", tslib_es6.__assign({ onClick: onClick, disabled: disabled, className: className, type: type, "data-testid": testId, css: {
+            display: inline ? 'inline-flex' : 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: '0.75rem 2rem',
+            textDecoration: 'none',
+            textTransform: uppercase ? 'uppercase' : 'unset',
+            boxSizing: 'border-box',
+            cursor: 'pointer',
+        }, id: id }, { children: [renderLeading, children, renderTrailing] }), void 0));
+};
+
+module.exports = BaseButton;
+//# sourceMappingURL=BaseButton.js.map

package/build/index.js/src/components/shared/button/BaseButton.js.map

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

package/build/index.js/src/components/shared/button/Button.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var ButtonPrimary = require('../../cta/primary/ButtonPrimary.js');
+var ButtonSecondary = require('../../cta/secondary/ButtonSecondary.js');
+
+var Button = function (_a) {
+    var variant = _a.variant, props = tslib_es6.__rest(_a, ["variant"]);
+    if (variant === 'primary') {
+        return jsxRuntime.jsx(ButtonPrimary, tslib_es6.__assign({}, props), void 0);
+    }
+    if (variant === 'secondary') {
+        return jsxRuntime.jsx(ButtonSecondary, tslib_es6.__assign({}, props), void 0);
+    }
+    if (variant === 'secondary-outline') {
+        return jsxRuntime.jsx(ButtonSecondary, tslib_es6.__assign({}, props), void 0);
+    }
+    throw new Error("Invalid button variant ".concat(variant));
+};
+
+exports.Button = Button;
+//# sourceMappingURL=Button.js.map

package/build/index.js/src/components/shared/button/Button.js.map

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

package/build/index.js/src/components/shared/card/Card.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var CardSection = require('./CardSection.js');
+var CardBody = require('./CardBody.js');
+var Theme = require('../../../core/theme/Theme.js');
+
+var Container = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"], ["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"])), function (_a) {
+    var flex = _a.flex;
+    return flex &&
+        "display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;";
+}, function (_a) {
+    var widthAuto = _a.widthAuto;
+    return (widthAuto ? 'auto' : 'fit-content');
+}, function (props) {
+    return props.backgroundColor ? props.backgroundColor : props.theme.component.card.backgroundColor;
+}, function (props) { return props.theme.component.card.borderRadius; }, function (props) {
+    return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
+});
+var Card = function (_a) {
+    var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
+    var theme = Theme.useTheme();
+    return (jsxRuntime.jsx(Container, tslib_es6.__assign({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
+};
+var Card$1 = Object.assign(Card, {
+    Header: CardSection.CardHeader,
+    Footer: CardSection.CardFooter,
+    Body: CardBody.CardBody,
+});
+var templateObject_1;
+
+module.exports = Card$1;
+//# sourceMappingURL=Card.js.map

package/build/index.js/src/components/shared/card/Card.js.map

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

package/build/index.js/src/components/shared/card/CardBody.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+
+var Body = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"])));
+var CardBody = function (_a) {
+    var children = _a.children;
+    return jsxRuntime.jsx(Body, { children: children }, void 0);
+};
+var templateObject_1;
+
+exports.CardBody = CardBody;
+//# sourceMappingURL=CardBody.js.map

package/build/index.js/src/components/shared/card/CardBody.js.map

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

package/build/index.js/src/components/shared/card/CardSection.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var enums = require('../../../types/enums.js');
+
+var Section = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"], ["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"])), function (props) {
+    return props.type === enums.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
+});
+var CardHeader = function (_a) {
+    var children = _a.children;
+    return (jsxRuntime.jsx(Section, tslib_es6.__assign({ type: enums.CardSectionType.Header }, { children: children }), void 0));
+};
+var CardFooter = function (_a) {
+    var children = _a.children;
+    return (jsxRuntime.jsx(Section, tslib_es6.__assign({ type: enums.CardSectionType.Footer }, { children: children }), void 0));
+};
+var templateObject_1;
+
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+//# sourceMappingURL=CardSection.js.map

package/build/index.js/src/components/shared/card/CardSection.js.map

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

package/build/index.js/src/components/shared/image/Image.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+
+var Img = emotionStyled_esm.img(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
+var Image = function (_a) {
+    var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
+    return (jsxRuntime.jsx(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
+};
+var templateObject_1;
+
+module.exports = Image;
+//# sourceMappingURL=Image.js.map

package/build/index.js/src/components/shared/image/Image.js.map

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

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

@@ -0,0 +1,21 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var styles = require('./styles.js');
+var Theme = require('../../../core/theme/Theme.js');
+
+var StyledLabel = emotionStyled_esm.label(styles.baseStyles, function (props) { return [
+    { color: props.disabled ? props.theme.colors.text.disabled : props.theme.colors.text.color },
+    styles[props.variant](props.theme),
+    styles[props.size](props.theme),
+]; });
+var Label = function (_a) {
+    var children = _a.children, rest = tslib_es6.__rest(_a, ["children"]);
+    var theme = Theme.useTheme();
+    return (jsxRuntime.jsx(StyledLabel, tslib_es6.__assign({}, rest, { theme: theme }, { children: children }), void 0));
+};
+
+module.exports = Label;
+//# sourceMappingURL=label.js.map

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

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

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

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var emotionReact_esm = require('../../../../node_modules/@emotion/react/dist/emotion-react.esm.js');
+
+/* styles common to all labels */
+var baseStyles = emotionReact_esm.css({
+    letterSpacing: 0,
+});
+/* variants */
+var regular = function (theme) {
+    return emotionReact_esm.css({
+        fontWeight: theme.typography.config.weight.regular,
+    });
+};
+var demi = function (theme) {
+    return emotionReact_esm.css({
+        fontWeight: theme.typography.config.weight.demi,
+    });
+};
+/* size variants */
+var small = function (theme) {
+    return emotionReact_esm.css({
+        fontSize: theme.component.label.fontSize.small,
+        lineHeight: theme.component.label.lineHeight.small,
+    });
+};
+var medium = function (theme) {
+    return emotionReact_esm.css({
+        fontSize: theme.component.label.fontSize.medium,
+        lineHeight: theme.component.label.lineHeight.medium,
+    });
+};
+var large = function (theme) {
+    return emotionReact_esm.css({
+        fontSize: theme.component.label.fontSize.large,
+        lineHeight: theme.component.label.lineHeight.large,
+    });
+};
+
+exports.baseStyles = baseStyles;
+exports.demi = demi;
+exports.large = large;
+exports.medium = medium;
+exports.regular = regular;
+exports.small = small;
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactDom = require('react-dom');
+
+var Portal = function (_a) {
+    var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
+    var _b = React.useState(false), mounted = _b[0], setMounted = _b[1];
+    var container = React.useRef(null);
+    React.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]);
+    React.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]);
+    React.useEffect(function () {
+        if (mounted) {
+            container.current.className = className !== null && className !== void 0 ? className : '';
+        }
+    }, [className, mounted]);
+    if (mounted === false) {
+        return null;
+    }
+    return reactDom.createPortal(children, container.current, id);
+};
+
+exports.Portal = Portal;
+//# sourceMappingURL=Portal.js.map

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

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

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

@@ -0,0 +1,24 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var headlessui_esm = require('../../../../node_modules/@headlessui/react/dist/headlessui.esm.js');
+var BaseSelectButton = require('./BaseSelectButton.js');
+var BaseSelectOptions = require('./BaseSelectOptions.js');
+var BaseSelectOption = require('./BaseSelectOption.js');
+var emotionStyled_esm = require('../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+
+var CustomListBox = emotionStyled_esm(headlessui_esm.Listbox)(templateObject_1 || (templateObject_1 = tslib_es6.__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 (jsxRuntime.jsx(CustomListBox, tslib_es6.__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;
+
+module.exports = BaseSelect$1;
+//# sourceMappingURL=BaseSelect.js.map

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

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

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var headlessui_esm = require('../../../../node_modules/@headlessui/react/dist/headlessui.esm.js');
+
+var BaseSelectButton = function (_a) {
+    var children = _a.children, as = _a.as;
+    return jsxRuntime.jsx(headlessui_esm.Listbox.Button, tslib_es6.__assign({ as: as }, { children: children }), void 0);
+};
+
+module.exports = BaseSelectButton;
+//# sourceMappingURL=BaseSelectButton.js.map

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

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

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var headlessui_esm = require('../../../../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 (jsxRuntime.jsx(headlessui_esm.Listbox.Option, tslib_es6.__assign({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
+}
+
+module.exports = BaseSelectOption;
+//# sourceMappingURL=BaseSelectOption.js.map

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

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

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var headlessui_esm = require('../../../../node_modules/@headlessui/react/dist/headlessui.esm.js');
+
+var BaseSelectOptions = function (_a) {
+    var children = _a.children, className = _a.className;
+    return jsxRuntime.jsx(headlessui_esm.Listbox.Options, tslib_es6.__assign({ className: className }, { children: children }), void 0);
+};
+
+module.exports = BaseSelectOptions;
+//# sourceMappingURL=BaseSelectOptions.js.map

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

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

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('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 = React.useMemo(function () { return (tslib_es6.__assign(tslib_es6.__assign({}, styleProp), { width: size, height: size, verticalAlign: 'middle', display: type === 'block' ? 'block' : 'inline-block' })); }, [size, type, styleProp]);
+    return jsxRuntime.jsx("div", tslib_es6.__assign({ style: style }, { children: children }), void 0);
+};
+
+exports.Spacing = Spacing;
+//# sourceMappingURL=Spacing.js.map

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

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

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

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var Theme = require('../../core/theme/Theme.js');
+
+var Container = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__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 = emotionStyled_esm.div(templateObject_2 || (templateObject_2 = tslib_es6.__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 = emotionStyled_esm.div(templateObject_3 || (templateObject_3 = tslib_es6.__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 = Theme.useTheme();
+    return (jsxRuntime.jsxs(Container, tslib_es6.__assign({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+exports.BannerText = BannerText;
+exports.Container = Container;
+exports.ShortBanner = ShortBanner;
+exports.TitleText = TitleText;
+//# sourceMappingURL=ShortBanner.js.map

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

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

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var enums = require('../../../types/enums.js');
+var index = require('../../icons/index.js');
+var TextButton = require('../../text-button/TextButton.js');
+
+var Container = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__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 = emotionStyled_esm.p(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var PercentageSpan = emotionStyled_esm.span(templateObject_3 || (templateObject_3 = tslib_es6.__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 (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: index.Icon.PDP.Rule, size: enums.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, tslib_es6.__assign({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+module.exports = SizeFitGuide;
+//# sourceMappingURL=SizeFitGuide.js.map

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

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