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

package/build/index.js/src/components/color/MultiColorPicker.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ColorSelector = require('./selector/ColorSelector.js');
+var OutOfStock = require('./selector/OutOfStock.js');
+var ColorRadioGroup = require('./ColorRadioGroup.js');
+var PatternSelector = require('./selector/PatternSelector.js');
+
+var renderOptions = function (selectedColor, options) {
+    if (options == null || options.length === 0) {
+        return jsxRuntime.jsx(OutOfStock.OutOfStock, { title: "out of stock color" }, void 0);
+    }
+    return options.map(function (option) { return (jsxRuntime.jsx(ColorRadioGroup.Option, tslib_es6.__assign({ value: option }, { children: option.meta.color ? (jsxRuntime.jsx(ColorSelector, { color: option.meta.color, selected: selectedColor.has(option), testId: "".concat(option.label, "-selector") }, void 0)) : option.meta.pattern ? (jsxRuntime.jsx(PatternSelector.PatternSelector, { url: option.meta.pattern.url, selected: selectedColor.has(option) }, void 0)) : null }), option.label)); });
+};
+var getInitialValue = function (options, selectedValue) {
+    if (selectedValue && options.includes(selectedValue))
+        return [selectedValue];
+    else if (selectedValue && options.length > 0)
+        return [options[0]];
+    else
+        ;
+};
+var MultiColorPicker = function (_a) {
+    var _b = _a.options, options = _b === void 0 ? [] : _b, label = _a.label, selectedValue = _a.selectedValue, onChange = _a.onChange;
+    var initialValue = getInitialValue(options, selectedValue);
+    var _c = React.useState(new Set(initialValue)), selectedColor = _c[0], setSelectedColor = _c[1];
+    var onChangeHandler = function (selectedOption) {
+        setSelectedColor(function (prevState) {
+            var newSelectedOptions = new Set(prevState);
+            prevState.has(selectedOption)
+                ? newSelectedOptions.delete(selectedOption)
+                : newSelectedOptions.add(selectedOption);
+            return newSelectedOptions;
+        });
+    };
+    React.useEffect(function () {
+        onChange(selectedColor);
+    }, [onChange, selectedColor]);
+    var valueLabels = Array.from(selectedColor)
+        .map(function (item) { return item.label; })
+        .join(' | ');
+    return (jsxRuntime.jsxs(ColorRadioGroup, tslib_es6.__assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
+};
+
+module.exports = MultiColorPicker;
+//# sourceMappingURL=MultiColorPicker.js.map

package/build/index.js/src/components/color/MultiColorPicker.js.map

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

package/build/index.js/src/components/color/SingleColorPicker.js

@@ -0,0 +1,31 @@
+'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 ColorSelector = require('./selector/ColorSelector.js');
+var OutOfStock = require('./selector/OutOfStock.js');
+var ColorRadioGroup = require('./ColorRadioGroup.js');
+var PatternSelector = require('./selector/PatternSelector.js');
+
+var renderOptions = function (options) {
+    if (options.length === 0) {
+        return emotionReactJsxRuntime_esm.jsx(OutOfStock.OutOfStock, { title: "out of stock color" }, void 0);
+    }
+    return options.map(function (option) { return (emotionReactJsxRuntime_esm.jsx(ColorRadioGroup.Option, tslib_es6.__assign({ value: option }, { children: function (_a) {
+            var checked = _a.checked;
+            if (option.meta.color) {
+                return (emotionReactJsxRuntime_esm.jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock }, void 0));
+            }
+            if (option.meta.pattern) {
+                return (emotionReactJsxRuntime_esm.jsx(PatternSelector.PatternSelector, { url: option.meta.pattern.url, selected: checked, noStock: option.noStock }, void 0));
+            }
+            return null;
+        } }), option.label)); });
+};
+var SingleColorPicker = function (_a) {
+    var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
+    return (emotionReactJsxRuntime_esm.jsxs(ColorRadioGroup, tslib_es6.__assign({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [emotionReactJsxRuntime_esm.jsx(ColorRadioGroup.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), emotionReactJsxRuntime_esm.jsx(ColorRadioGroup.OptionsContainer, tslib_es6.__assign({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options) }), void 0)] }), void 0));
+};
+
+module.exports = SingleColorPicker;
+//# sourceMappingURL=SingleColorPicker.js.map

package/build/index.js/src/components/color/SingleColorPicker.js.map

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

package/build/index.js/src/components/color/selector/ColorSelector.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var OneColorSelector = require('./OneColorSelector.js');
+var ThreeColorSelector = require('./ThreeColorSelector.js');
+var TwoColorSelector = require('./TwoColorSelector.js');
+
+var ColorSelector = function (_a) {
+    var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
+    var primaryColor = color[0], secondaryColor = color[1], tertiaryColor = color[2];
+    if (tertiaryColor) {
+        return (jsxRuntime.jsx(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected, testId: testId, noStock: noStock }, void 0));
+    }
+    if (secondaryColor) {
+        return (jsxRuntime.jsx(TwoColorSelector, { secondaryColor: secondaryColor, primaryColor: primaryColor, selected: selected, testId: testId, noStock: noStock }, void 0));
+    }
+    return (jsxRuntime.jsx(OneColorSelector, { color: primaryColor, selected: selected, testId: testId, noStock: noStock }, void 0));
+};
+
+module.exports = ColorSelector;
+//# sourceMappingURL=ColorSelector.js.map

package/build/index.js/src/components/color/selector/ColorSelector.js.map

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

package/build/index.js/src/components/color/selector/OneColorSelector.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Theme = require('../../../core/theme/Theme.js');
+
+var OneColorSelector = function (_a) {
+    var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
+    var theme = Theme.useTheme();
+    var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
+    return (jsxRuntime.jsxs("svg", tslib_es6.__assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId, style: { opacity: noStock ? 0.4 : 1 } }, { children: [jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
+};
+
+module.exports = OneColorSelector;
+//# sourceMappingURL=OneColorSelector.js.map

package/build/index.js/src/components/color/selector/OneColorSelector.js.map

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

package/build/index.js/src/components/color/selector/OutOfStock.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 Theme = require('../../../core/theme/Theme.js');
+
+var OutOfStock = function (_a) {
+    var title = _a.title;
+    var theme = Theme.useTheme();
+    return (jsxRuntime.jsxs("svg", tslib_es6.__assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", tslib_es6.__assign({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
+};
+
+exports.OutOfStock = OutOfStock;
+//# sourceMappingURL=OutOfStock.js.map

package/build/index.js/src/components/color/selector/OutOfStock.js.map

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

package/build/index.js/src/components/color/selector/PatternSelector.js

@@ -0,0 +1,27 @@
+'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  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n  opacity: ", ";\n"], ["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n  opacity: ", ";\n"])), function (_a) {
+    var borderColor = _a.borderColor;
+    return borderColor;
+}, function (_a) {
+    var noStock = _a.noStock;
+    return (noStock ? '0.4' : '1');
+});
+var Image = emotionStyled_esm.img(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"])));
+var PatternSelector = function (_a) {
+    var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
+    var theme = Theme.useTheme();
+    var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
+    return (jsxRuntime.jsx(Container, tslib_es6.__assign({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image, { src: url, alt: "pattern" }, void 0) }), void 0));
+};
+var templateObject_1, templateObject_2;
+
+exports.PatternSelector = PatternSelector;
+//# sourceMappingURL=PatternSelector.js.map

package/build/index.js/src/components/color/selector/PatternSelector.js.map

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

package/build/index.js/src/components/color/selector/ThreeColorSelector.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Theme = require('../../../core/theme/Theme.js');
+
+var ThreeColorSelector = function (_a) {
+    var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
+    var theme = Theme.useTheme();
+    var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
+    return (jsxRuntime.jsxs("svg", tslib_es6.__assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId, style: { opacity: noStock ? 0.4 : 1 } }, { children: [jsxRuntime.jsx("mask", tslib_es6.__assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxRuntime.jsxs("g", tslib_es6.__assign({ mask: "url(#mask0)" }, { children: [jsxRuntime.jsx("rect", { x: "4", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 4 33.76)", fill: primaryColor }, void 0), jsxRuntime.jsx("rect", { x: "11.6802", y: "33.76", width: "34.56", height: "8.64", transform: "rotate(-90 11.6802 33.76)", fill: secondaryColor }, void 0), jsxRuntime.jsx("rect", { x: "20.3198", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 20.3198 33.76)", fill: tertiaryColor }, void 0)] }), void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
+};
+
+module.exports = ThreeColorSelector;
+//# sourceMappingURL=ThreeColorSelector.js.map

package/build/index.js/src/components/color/selector/ThreeColorSelector.js.map

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

package/build/index.js/src/components/color/selector/TwoColorSelector.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Theme = require('../../../core/theme/Theme.js');
+
+var TwoColorSelector = function (_a) {
+    var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
+    var theme = Theme.useTheme();
+    var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
+    return (jsxRuntime.jsxs("svg", tslib_es6.__assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId, style: { opacity: noStock ? 0.4 : 1 } }, { children: [jsxRuntime.jsx("mask", tslib_es6.__assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxRuntime.jsxs("g", tslib_es6.__assign({ mask: "url(#mask0)" }, { children: [jsxRuntime.jsx("rect", { x: "4", y: "34", width: "35", height: "12", transform: "rotate(-90 4 34)", fill: primaryColor }, void 0), jsxRuntime.jsx("rect", { x: "16", y: "34", width: "35", height: "12", transform: "rotate(-90 16 34)", fill: secondaryColor }, void 0)] }), void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
+};
+
+module.exports = TwoColorSelector;
+//# sourceMappingURL=TwoColorSelector.js.map

package/build/index.js/src/components/color/selector/TwoColorSelector.js.map

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

package/build/index.js/src/components/cross-sell/Checkbox/CrossSellCheckbox.js

@@ -0,0 +1,30 @@
+'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 Checkbox = require('../../checkbox/Checkbox.js');
+var enums = require('../../../types/enums.js');
+var Image = require('../../shared/image/Image.js');
+var Theme = require('../../../core/theme/Theme.js');
+
+var Wrapper = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  width: 36.875rem;\n  max-width: 100%;\n  border-radius: 0.5rem;\n\n  img {\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  width: 36.875rem;\n  max-width: 100%;\n  border-radius: 0.5rem;\n\n  img {\n    margin-right: ", ";\n  }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
+var Col = emotionStyled_esm.div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var Row = emotionStyled_esm.div(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-left: 10px;\n\n  ", "};\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-left: 10px;\n\n  ", "};\n"])), function (props) {
+    return props.rightToLeft &&
+        "\n    flex-direction: row-reverse;\n    justify-content: space-between;\n  ";
+});
+var H5 = emotionStyled_esm.h5(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 500;\n  margin-bottom: 0.125rem;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 500;\n  margin-bottom: 0.125rem;\n  margin: 0;\n  color: ", ";\n"])), function (props) { return props.color; });
+var H3 = emotionStyled_esm.h3(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n  font-weight: 700;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n  font-weight: 700;\n  margin: 0;\n  color: ", ";\n"])), function (props) { return props.color; });
+var FreeShipping = emotionStyled_esm.span(templateObject_6 || (templateObject_6 = tslib_es6.__makeTemplateObject(["\n  font-weight: 600;\n  color: ", ";\n"], ["\n  font-weight: 600;\n  color: ", ";\n"])), function (props) { return props.color; });
+var CrossSellCheckbox = function (_a) {
+    var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
+    var theme = Theme.useTheme();
+    return (jsxRuntime.jsxs(Wrapper, tslib_es6.__assign({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox.Checkbox, { text: "", id: "checkbox", onChange: onChange, size: enums.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, tslib_es6.__assign({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, tslib_es6.__assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, tslib_es6.__assign({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, tslib_es6.__assign({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+exports.CrossSellCheckbox = CrossSellCheckbox;
+//# sourceMappingURL=CrossSellCheckbox.js.map

package/build/index.js/src/components/cross-sell/Checkbox/CrossSellCheckbox.js.map

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

package/build/index.js/src/components/cross-sell/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var CrossSellCheckbox = require('./Checkbox/CrossSellCheckbox.js');
+
+
+
+exports.CrossSellCheckbox = CrossSellCheckbox.CrossSellCheckbox;
+//# sourceMappingURL=index.js.map

package/build/index.js/src/components/cross-sell/index.js.map

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

package/build/index.js/src/components/cta/BaseCTA.js

@@ -0,0 +1,45 @@
+'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.Large:
+            return {
+                fontSize: theme.component.button.size.large.fontSize,
+                padding: theme.component.button.size.large.padding,
+            };
+        case enums.ComponentSize.Medium:
+            return {
+                fontSize: theme.component.button.size.medium.fontSize,
+                padding: theme.component.button.size.medium.padding,
+            };
+        case enums.ComponentSize.Small:
+            return {
+                fontSize: theme.component.button.size.small.fontSize,
+                padding: theme.component.button.size.small.padding,
+            };
+        default:
+            return {
+                fontSize: theme.component.button.size.small.fontSize,
+                padding: theme.component.button.size.small.padding,
+            };
+    }
+};
+var BaseCTA = function (_a) {
+    var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? enums.ComponentSize.Medium : _c, props = tslib_es6.__rest(_a, ["text", "wide", "size"]);
+    var theme = Theme.useTheme();
+    var stylesBySize = getStylesBySize(size, theme);
+    return (emotionReactJsxRuntime_esm.jsx(BaseButton, tslib_es6.__assign({}, props, { css: tslib_es6.__assign(tslib_es6.__assign({ width: wide ? '100%' : 'fit-content' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "".concat(theme.component.button.borderRadius), cursor: 'pointer', '&:disabled': {
+                backgroundColor: theme.colors.background.disabled,
+                color: theme.colors.text.disabled,
+                cursor: 'not-allowed',
+            } }) }, { children: text }), void 0));
+};
+
+module.exports = BaseCTA;
+//# sourceMappingURL=BaseCTA.js.map

package/build/index.js/src/components/cta/BaseCTA.js.map

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

package/build/index.js/src/components/cta/primary/ButtonPrimary.js

@@ -0,0 +1,32 @@
+'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 BaseCTA = require('../BaseCTA.js');
+var Theme = require('../../../core/theme/Theme.js');
+
+var ButtonPrimary = function (_a) {
+    var _b = _a.testId, testId = _b === void 0 ? 'button-primary' : _b, props = tslib_es6.__rest(_a, ["testId"]);
+    var theme = Theme.useTheme();
+    return (emotionReactJsxRuntime_esm.jsx(BaseCTA, tslib_es6.__assign({}, props, { testId: testId, css: {
+            backgroundColor: theme.component.button.primary.active.backgroundColor,
+            color: theme.component.button.primary.active.color,
+            border: theme.component.button.border,
+            fontFamily: 'inherit',
+            lineHeight: theme.component.button.lineHeight,
+            letterSpacing: theme.component.button.letterSpacing,
+            minWidth: theme.component.button.minWidth,
+            minHeight: theme.component.button.minHeight,
+            '&:hover': {
+                backgroundColor: theme.component.button.primary.hover.backgroundColor,
+                color: theme.component.button.primary.hover.color,
+            },
+            '&:disabled': {
+                backgroundColor: theme.colors.background.disabled,
+                color: theme.colors.text.disabled,
+            },
+        } }), void 0));
+};
+
+module.exports = ButtonPrimary;
+//# sourceMappingURL=ButtonPrimary.js.map

package/build/index.js/src/components/cta/primary/ButtonPrimary.js.map

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

package/build/index.js/src/components/cta/secondary/ButtonSecondary.js

@@ -0,0 +1,26 @@
+'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 BaseCTA = require('../BaseCTA.js');
+var Theme = require('../../../core/theme/Theme.js');
+
+var ButtonSecondary = function (props) {
+    var theme = Theme.useTheme();
+    return (emotionReactJsxRuntime_esm.jsx(BaseCTA, tslib_es6.__assign({}, props, { css: {
+            backgroundColor: theme.component.button.secondary.active.backgroundColor,
+            color: theme.component.button.secondary.active.color,
+            border: theme.component.button.border,
+            fontFamily: 'inherit',
+            '&:hover': {
+                backgroundColor: theme.component.button.secondary.hover.backgroundColor,
+            },
+            '&:disabled': {
+                backgroundColor: theme.colors.shades['50'].color,
+                color: theme.colors.shades['250'].color,
+            },
+        } }), void 0));
+};
+
+module.exports = ButtonSecondary;
+//# sourceMappingURL=ButtonSecondary.js.map

package/build/index.js/src/components/cta/secondary/ButtonSecondary.js.map

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

package/build/index.js/src/components/cta/secondary/ButtonSecondaryOutline.js

@@ -0,0 +1,28 @@
+'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 BaseCTA = require('../BaseCTA.js');
+var Theme = require('../../../core/theme/Theme.js');
+
+var ButtonSecondaryOutline = function (props) {
+    var theme = Theme.useTheme();
+    return (emotionReactJsxRuntime_esm.jsx(BaseCTA, tslib_es6.__assign({}, props, { css: {
+            backgroundColor: theme.component.button.secondary.active.color,
+            color: theme.component.button.secondary.active.backgroundColor,
+            border: "1px solid ".concat(theme.component.button.secondary.active.backgroundColor),
+            fontFamily: 'inherit',
+            '&:hover': {
+                backgroundColor: theme.component.button.secondary.active.backgroundColor,
+                color: theme.component.button.secondary.active.color,
+            },
+            '&:disabled': {
+                backgroundColor: theme.colors.background.disabled,
+                color: theme.colors.text.disabled,
+                border: 'none',
+            },
+        } }), void 0));
+};
+
+module.exports = ButtonSecondaryOutline;
+//# sourceMappingURL=ButtonSecondaryOutline.js.map

package/build/index.js/src/components/cta/secondary/ButtonSecondaryOutline.js.map

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

package/build/index.js/src/components/delivery-details/DeliveryDetails.js

@@ -0,0 +1,59 @@
+'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 index = require('../icons/index.js');
+var Note = require('./Note/Note.js');
+var media = require('../../utils/media.js');
+var Theme = require('../../core/theme/Theme.js');
+
+var Title = emotionStyled_esm.h1(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  color: ", ";\n  ", "\n  margin: 0;\n  text-align: center;\n"], ["\n  color: ", ";\n  ", "\n  margin: 0;\n  text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
+    var theme = _a.theme;
+    return "\n    font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n    line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n    font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n  ");
+});
+var Line = emotionStyled_esm.div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 1.25rem 0;\n"], ["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
+var Row = emotionStyled_esm.div(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  ", "\n  justify-content: space-between;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  ", "\n  justify-content: space-between;\n  align-items: flex-start;\n"])), media.mediaQueries({
+    flexDirection: ['column', 'row'],
+}));
+var Col = emotionStyled_esm.div(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  ", "\n"])), media.mediaQueries({
+    margin: ['0', '0 1.25rem'],
+    marginBottom: ['1.875rem', '0'],
+    alignItems: ['center', 'flex-start'],
+    textAlign: ['center', 'inherit'],
+    width: ['100%', 'inherit'],
+}));
+var IconContainer = emotionStyled_esm.div(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n  width: 1.5rem;\n  height: 1.5rem;\n  ", "\n"], ["\n  width: 1.5rem;\n  height: 1.5rem;\n  ", "\n"])), media.mediaQueries({
+    marginRight: ['0', '0.438rem'],
+    marginBottom: ['10px', '0'],
+    width: ['auto', '1.5rem'],
+}));
+var SectionTitle = emotionStyled_esm.h1(templateObject_6 || (templateObject_6 = tslib_es6.__makeTemplateObject(["\n  ", "\n  ", "\n  margin: 0;\n  text-transform: uppercase;\n"], ["\n  ", "\n  ", "\n  margin: 0;\n  text-transform: uppercase;\n"])), media.mediaQueries({
+    display: ['block', 'flex'],
+}), function (_a) {
+    var theme = _a.theme;
+    return "\n    color: ".concat(theme.colors.shades['700'].color, ";\n    font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n    line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n    font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n  ");
+});
+var SectionDetails = emotionStyled_esm.p(templateObject_7 || (templateObject_7 = tslib_es6.__makeTemplateObject(["\n  color: ", ";\n  ", "\n  margin: 0;\n  margin-top: 0.625rem;\n  ", ";\n"], ["\n  color: ", ";\n  ", "\n  margin: 0;\n  margin-top: 0.625rem;\n  ", ";\n"])), function (props) { return props.color; }, function (_a) {
+    var theme = _a.theme;
+    return "\n    font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n    line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n    font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n  ");
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.deliveryDetails.sectionDetails.marginLeft
+        ? media.mediaQueries({
+            marginLeft: ['0', theme.component.deliveryDetails.sectionDetails.marginLeft],
+        })
+        : '';
+});
+var KeepMeUpdated = emotionStyled_esm.h1(templateObject_8 || (templateObject_8 = tslib_es6.__makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  color: #0078ff;\n  border-radius: 0.313rem;\n  padding: 0.45rem;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 600;\n  margin: 0;\n  margin-top: 0.625rem;\n  display: flex;\n  align-items: center;\n  background-color: #fff;\n  user-select: none;\n\n  svg {\n    margin-right: 0.375rem;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  border: 0.063rem solid ", ";\n  color: #0078ff;\n  border-radius: 0.313rem;\n  padding: 0.45rem;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 600;\n  margin: 0;\n  margin-top: 0.625rem;\n  display: flex;\n  align-items: center;\n  background-color: #fff;\n  user-select: none;\n\n  svg {\n    margin-right: 0.375rem;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n"])), function (props) { return props.borderColor; });
+var DeliveryDetails = function (_a) {
+    var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
+    var theme = Theme.useTheme();
+    return (jsxRuntime.jsxs("div", tslib_es6.__assign({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title, tslib_es6.__assign({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note.Note, tslib_es6.__assign({}, note), void 0), jsxRuntime.jsxs(Row, tslib_es6.__assign({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, tslib_es6.__assign({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, tslib_es6.__assign({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer, tslib_es6.__assign({ theme: theme }, { children: jsxRuntime.jsx(index.Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, tslib_es6.__assign({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, tslib_es6.__assign({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, tslib_es6.__assign({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer, tslib_es6.__assign({ theme: theme }, { children: jsxRuntime.jsx(index.Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, tslib_es6.__assign({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, tslib_es6.__assign({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, tslib_es6.__assign({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer, tslib_es6.__assign({ theme: theme }, { children: jsxRuntime.jsx(index.Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, tslib_es6.__assign({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, tslib_es6.__assign({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(index.Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+
+exports.DeliveryDetails = DeliveryDetails;
+//# sourceMappingURL=DeliveryDetails.js.map

package/build/index.js/src/components/delivery-details/DeliveryDetails.js.map

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

package/build/index.js/src/components/delivery-details/Note/Note.js

@@ -0,0 +1,23 @@
+'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 index = require('../../icons/index.js');
+var Theme = require('../../../core/theme/Theme.js');
+
+var Container = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 1.25rem;\n"], ["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
+var IconContainer = emotionStyled_esm.div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  width: 1rem;\n  height: 0.875rem;\n  margin-right: 0.5rem;\n  margin-top: 0.125rem;\n"], ["\n  width: 1rem;\n  height: 0.875rem;\n  margin-right: 0.5rem;\n  margin-top: 0.125rem;\n"])));
+var Text = emotionStyled_esm.p(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 400;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 400;\n  margin: 0;\n  color: ", ";\n"])), function (props) { return props.color; });
+var Details = emotionStyled_esm.span(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n  color: ", ";\n  font-weight: 700;\n"], ["\n  color: ", ";\n  font-weight: 700;\n"])), function (props) { return props.color; });
+var Note = function (_a) {
+    var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
+    var theme = Theme.useTheme();
+    return (jsxRuntime.jsxs(Container, tslib_es6.__assign({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer, { children: jsxRuntime.jsx(index.Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text, tslib_es6.__assign({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, tslib_es6.__assign({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+exports.Note = Note;
+//# sourceMappingURL=Note.js.map

package/build/index.js/src/components/delivery-details/Note/Note.js.map

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

package/build/index.js/src/components/drawer/Drawer.js

@@ -0,0 +1,58 @@
+'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 emotionStyled_esm = require('../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+
+var Backdrop = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  position: fixed;\n  z-index: 2;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  transition: background-color 0.3s ease-out;\n\n  ", "\n"], ["\n  position: fixed;\n  z-index: 2;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  transition: background-color 0.3s ease-out;\n\n  ", "\n"])), function (_a) {
+    var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
+    return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
+});
+var Sidebar = emotionStyled_esm.div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  height: 100%;\n  width: ", ";\n  position: fixed;\n  z-index: 30;\n  ", ": 0;\n  top: 0;\n  background-color: ", ";\n  overflow-x: hidden;\n  transition: transform 0.3s ease-in-out;\n\n  ", "\n"], ["\n  height: 100%;\n  width: ", ";\n  position: fixed;\n  z-index: 30;\n  ", ": 0;\n  top: 0;\n  background-color: ", ";\n  overflow-x: hidden;\n  transition: transform 0.3s ease-in-out;\n\n  ", "\n"])), function (_a) {
+    var width = _a.width;
+    return width;
+}, function (_a) {
+    var position = _a.position;
+    return position;
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, function (_a) {
+    var isOpen = _a.isOpen, position = _a.position;
+    return isOpen
+        ? 'transform: translateX(0);'
+        : "transform: translateX(".concat(position === 'left' ? '-100%' : '100%', ");");
+});
+var Drawer = function (_a) {
+    var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, onOpen = _a.onOpen, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.backdropColor, backdropColor = _c === void 0 ? 'rgba(0, 0, 0, 0.5)' : _c, _d = _a.position, position = _d === void 0 ? 'left' : _d, _e = _a.width, width = _e === void 0 ? '33%' : _e, onClickOutside = _a.onClickOutside;
+    var _f = React.useState(isOpen), isOpenState = _f[0], setIsOpen = _f[1];
+    var _g = React.useState(isOpen), isMounted = _g[0], setIsMounted = _g[1];
+    React.useEffect(function () {
+        if (isOpen === false) {
+            setIsOpen(isOpen);
+            var timeout_1 = setTimeout(function () {
+                setIsMounted(isOpen);
+                onClose && onClose();
+            }, 300);
+            return function () {
+                clearTimeout(timeout_1);
+            };
+        }
+        setIsMounted(isOpen);
+        var timeout = setTimeout(function () {
+            setIsOpen(isOpen);
+            onOpen && onOpen();
+        }, 100);
+        return function () {
+            clearTimeout(timeout);
+        };
+    }, [isOpen, onClose, onOpen]);
+    return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, tslib_es6.__assign({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
+};
+var templateObject_1, templateObject_2;
+
+exports.Drawer = Drawer;
+//# sourceMappingURL=Drawer.js.map

package/build/index.js/src/components/drawer/Drawer.js.map

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