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

package/build/index.esm.js/src/components/cross-sell/Checkbox/CrossSellCheckbox.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 { Checkbox } from '../../checkbox/Checkbox.js';
+import { ComponentSize } from '../../../types/enums.js';
+import Image from '../../shared/image/Image.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var Wrapper = newStyled.div(templateObject_1 || (templateObject_1 = __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 = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var Row = newStyled.div(templateObject_3 || (templateObject_3 = __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 = newStyled.h5(templateObject_4 || (templateObject_4 = __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 = newStyled.h3(templateObject_5 || (templateObject_5 = __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 = newStyled.span(templateObject_6 || (templateObject_6 = __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 = useTheme();
+    return (jsxs(Wrapper, __assign({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs(Row, __assign({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs(Col, { children: [jsx(H5, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs(H3, __assign({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs(FreeShipping, __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;
+
+export { CrossSellCheckbox };
+//# sourceMappingURL=CrossSellCheckbox.js.map

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

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

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

@@ -0,0 +1,2 @@
+export { CrossSellCheckbox } from './Checkbox/CrossSellCheckbox.js';
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,43 @@
+import { __rest, __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 { useTheme } from '../../core/theme/Theme.js';
+import { ComponentSize } from '../../types/enums.js';
+import BaseButton from '../shared/button/BaseButton.js';
+
+var getStylesBySize = function (size, theme) {
+    switch (size) {
+        case ComponentSize.Large:
+            return {
+                fontSize: theme.component.button.size.large.fontSize,
+                padding: theme.component.button.size.large.padding,
+            };
+        case ComponentSize.Medium:
+            return {
+                fontSize: theme.component.button.size.medium.fontSize,
+                padding: theme.component.button.size.medium.padding,
+            };
+        case 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 ? ComponentSize.Medium : _c, props = __rest(_a, ["text", "wide", "size"]);
+    var theme = useTheme();
+    var stylesBySize = getStylesBySize(size, theme);
+    return (jsx(BaseButton, __assign({}, props, { css: __assign(__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));
+};
+
+export { BaseCTA as default };
+//# sourceMappingURL=BaseCTA.js.map

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

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

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

@@ -0,0 +1,30 @@
+import { __rest, __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 BaseCTA from '../BaseCTA.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var ButtonPrimary = function (_a) {
+    var _b = _a.testId, testId = _b === void 0 ? 'button-primary' : _b, props = __rest(_a, ["testId"]);
+    var theme = useTheme();
+    return (jsx(BaseCTA, __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));
+};
+
+export { ButtonPrimary as default };
+//# sourceMappingURL=ButtonPrimary.js.map

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

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

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

@@ -0,0 +1,24 @@
+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 BaseCTA from '../BaseCTA.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var ButtonSecondary = function (props) {
+    var theme = useTheme();
+    return (jsx(BaseCTA, __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));
+};
+
+export { ButtonSecondary as default };
+//# sourceMappingURL=ButtonSecondary.js.map

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

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

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

@@ -0,0 +1,26 @@
+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 BaseCTA from '../BaseCTA.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var ButtonSecondaryOutline = function (props) {
+    var theme = useTheme();
+    return (jsx(BaseCTA, __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));
+};
+
+export { ButtonSecondaryOutline as default };
+//# sourceMappingURL=ButtonSecondaryOutline.js.map

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

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

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

@@ -0,0 +1,55 @@
+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 { Icon } from '../icons/index.js';
+import { Note } from './Note/Note.js';
+import { mediaQueries } from '../../utils/media.js';
+import { useTheme } from '../../core/theme/Theme.js';
+
+var Title = newStyled.h1(templateObject_1 || (templateObject_1 = __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 = newStyled.div(templateObject_2 || (templateObject_2 = __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 = newStyled.div(templateObject_3 || (templateObject_3 = __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"])), mediaQueries({
+    flexDirection: ['column', 'row'],
+}));
+var Col = newStyled.div(templateObject_4 || (templateObject_4 = __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"])), mediaQueries({
+    margin: ['0', '0 1.25rem'],
+    marginBottom: ['1.875rem', '0'],
+    alignItems: ['center', 'flex-start'],
+    textAlign: ['center', 'inherit'],
+    width: ['100%', 'inherit'],
+}));
+var IconContainer = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 1.5rem;\n  height: 1.5rem;\n  ", "\n"], ["\n  width: 1.5rem;\n  height: 1.5rem;\n  ", "\n"])), mediaQueries({
+    marginRight: ['0', '0.438rem'],
+    marginBottom: ['10px', '0'],
+    width: ['auto', '1.5rem'],
+}));
+var SectionTitle = newStyled.h1(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  ", "\n  margin: 0;\n  text-transform: uppercase;\n"], ["\n  ", "\n  ", "\n  margin: 0;\n  text-transform: uppercase;\n"])), 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 = newStyled.p(templateObject_7 || (templateObject_7 = __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
+        ? mediaQueries({
+            marginLeft: ['0', theme.component.deliveryDetails.sectionDetails.marginLeft],
+        })
+        : '';
+});
+var KeepMeUpdated = newStyled.h1(templateObject_8 || (templateObject_8 = __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 = useTheme();
+    return (jsxs("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsx(Title, __assign({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx(Note, __assign({}, note), void 0), jsxs(Row, __assign({ "data-testid": "DD-row", theme: theme }, { children: [jsxs(Col, __assign({ theme: theme }, { children: [jsxs(SectionTitle, __assign({ theme: theme }, { children: [jsx(IconContainer, __assign({ theme: theme }, { children: jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs(Col, __assign({ theme: theme }, { children: [jsxs(SectionTitle, __assign({ theme: theme }, { children: [jsx(IconContainer, __assign({ theme: theme }, { children: jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs(Col, __assign({ theme: theme }, { children: [jsxs(SectionTitle, __assign({ theme: theme }, { children: [jsx(IconContainer, __assign({ theme: theme }, { children: jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs(KeepMeUpdated, __assign({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx(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;
+
+export { DeliveryDetails };
+//# sourceMappingURL=DeliveryDetails.js.map

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

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

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

@@ -0,0 +1,19 @@
+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 { Icon } from '../../icons/index.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __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 = newStyled.div(templateObject_2 || (templateObject_2 = __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 = newStyled.p(templateObject_3 || (templateObject_3 = __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 = newStyled.span(templateObject_4 || (templateObject_4 = __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 = useTheme();
+    return (jsxs(Container, __assign({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx(IconContainer, { children: jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx("div", { children: jsxs(Text, __assign({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs(Details, __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;
+
+export { Note };
+//# sourceMappingURL=Note.js.map

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

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

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

@@ -0,0 +1,54 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+
+var Backdrop = newStyled.div(templateObject_1 || (templateObject_1 = __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 = newStyled.div(templateObject_2 || (templateObject_2 = __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 = useState(isOpen), isOpenState = _f[0], setIsOpen = _f[1];
+    var _g = useState(isOpen), isMounted = _g[0], setIsMounted = _g[1];
+    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 ? (jsxs("div", { children: [jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx(Sidebar, __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;
+
+export { Drawer };
+//# sourceMappingURL=Drawer.js.map

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

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

package/build/index.esm.js/src/components/dropdown/base/BaseDropdown.js

@@ -0,0 +1,28 @@
+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 BaseSelect from '../../shared/select/BaseSelect.js';
+import BaseDropdownButton from './BaseDropdownButton.js';
+import BaseDropdownOptions from './BaseDropdownOptions.js';
+import BaseDropdownOption from './BaseDropdownOption.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+function BaseDropdown(_a) {
+    var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, wide = _a.wide, children = _a.children;
+    var theme = useTheme();
+    return (jsx(BaseSelect, __assign({ value: value, onChange: function (value) { return onChange(value); }, css: {
+            width: wide ? '100%' : 'fit-content',
+            height: wide ? '100%' : 'fit-content',
+            position: 'relative',
+            fontSize: theme.component.dropdown.fontSize,
+            lineHeight: theme.component.dropdown.lineHeight,
+            color: theme.component.dropdown.color,
+        }, disabled: disabled }, { children: children }), void 0));
+}
+var BaseDropdown$1 = Object.assign(BaseDropdown, {
+    Button: BaseDropdownButton,
+    Options: BaseDropdownOptions,
+    Option: BaseDropdownOption,
+});
+
+export { BaseDropdown$1 as default };
+//# sourceMappingURL=BaseDropdown.js.map

package/build/index.esm.js/src/components/dropdown/base/BaseDropdown.js.map

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

package/build/index.esm.js/src/components/dropdown/base/BaseDropdownButton.js

@@ -0,0 +1,64 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx, jsxs } from '../../../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js';
+import { Fragment } from 'react';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import BaseSelect from '../../shared/select/BaseSelect.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var CustomButton = newStyled.button(function (_a) {
+    var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
+    return ({
+        border: "0.063rem solid ".concat(isSortOrFilter ? theme.colors.shades['100'].color : theme.colors.shades['200'].color),
+        boxSizing: 'border-box',
+        borderRadius: theme.component.dropdown.borderRadius,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        background: isSortOrFilter ? theme.colors.shades['10'].color : theme.colors.shades.white.color,
+        cursor: 'pointer',
+        fontWeight: 600,
+        fontSize: theme.component.dropdown.fontSize,
+        padding: theme.component.dropdown.padding,
+        fontFamily: theme.fonts.config[0].family,
+        color: theme.component.dropdown.color,
+        fill: theme.component.dropdown.fill,
+        width: wide ? '100%' : 'auto',
+        height: wide ? '100%' : 'auto',
+        justifyContent: wide ? 'space-between' : 'center',
+        svg: {
+            marginLeft: '0.75rem',
+        },
+        '&:disabled': {
+            borderColor: theme.colors.shades['200'].color,
+            color: theme.colors.shades['250'].color,
+            cursor: 'not-allowed',
+            backgroundColor: theme.colors.shades.white.color,
+            '*': {
+                color: theme.colors.shades['250'].color,
+                fill: theme.colors.shades['250'].color,
+                cursor: 'not-allowed',
+            },
+        },
+    });
+});
+var BaseDropdownButton = function (_a) {
+    var OpenIcon = _a.OpenIcon, CloseIcon = _a.CloseIcon, wide = _a.wide, children = _a.children, isSortOrFilter = _a.isSortOrFilter;
+    var theme = useTheme();
+    return (jsx(BaseSelect.Button, __assign({ as: Fragment }, { children: function (_a) {
+            var open = _a.open;
+            return (jsxs(CustomButton, __assign({ theme: theme, wide: wide, isSortOrFilter: isSortOrFilter }, { children: [children, open ? (jsx(CloseIcon, { height: 0.875, width: 0.875, fill: "inherit" }, void 0)) : (jsx(OpenIcon, { height: 0.875, width: 0.875, fill: "inherit" }, void 0))] }), void 0));
+        } }), void 0));
+};
+var withLabel = function (Button, label) {
+    return function WithLabel(_a) {
+        var CloseIcon = _a.CloseIcon, OpenIcon = _a.OpenIcon, children = _a.children, wide = _a.wide;
+        return (jsx(Button, __assign({ CloseIcon: CloseIcon, OpenIcon: OpenIcon, wide: wide }, { children: jsxs("div", __assign({ css: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-start',
+                } }, { children: [jsx("div", __assign({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0) }), void 0));
+    };
+};
+
+export { BaseDropdownButton as default, withLabel };
+//# sourceMappingURL=BaseDropdownButton.js.map

package/build/index.esm.js/src/components/dropdown/base/BaseDropdownButton.js.map

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

package/build/index.esm.js/src/components/dropdown/base/BaseDropdownOption.js

@@ -0,0 +1,38 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import BaseSelect from '../../shared/select/BaseSelect.js';
+import { Checkbox } from '../../checkbox/Checkbox.js';
+import { ComponentSize } from '../../../types/enums.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var CustomOption = newStyled.li(function (_a) {
+    var theme = _a.theme, selected = _a.selected, active = _a.active;
+    return ({
+        listStyleType: 'none',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        margin: 0,
+        cursor: 'pointer',
+        padding: theme.component.dropdown.optionPadding,
+        justifyContent: 'flex-start',
+        borderRadius: 'inherit',
+        width: '100%',
+        boxSizing: 'border-box',
+        fontWeight: selected ? 600 : 'inherit',
+        backgroundColor: active ? theme.colors.shades['10'].color : 'inherit',
+    });
+});
+function BaseDropdownOption(_a) {
+    var value = _a.value, disabled = _a.disabled, children = _a.children, _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? false : _b, isSelected = _a.isSelected;
+    var theme = useTheme();
+    return (jsx(BaseSelect.Option, __assign({ value: value, disabled: disabled, as: Fragment }, { children: function (_a) {
+            var selected = _a.selected, active = _a.active;
+            return (jsxs(CustomOption, __assign({ theme: theme, selected: isSelected || selected, active: active }, { children: [hasCheckbox && (jsx(Checkbox, { checked: isSelected || selected, text: "", id: value.key, onChange: console.log, size: ComponentSize.Small, variant: "primary" }, void 0)), children] }), void 0));
+        } }), void 0));
+}
+
+export { BaseDropdownOption as default };
+//# sourceMappingURL=BaseDropdownOption.js.map

package/build/index.esm.js/src/components/dropdown/base/BaseDropdownOption.js.map

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

package/build/index.esm.js/src/components/dropdown/base/BaseDropdownOptions.js

@@ -0,0 +1,33 @@
+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 BaseSelect from '../../shared/select/BaseSelect.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var DropdownOptions = newStyled(BaseSelect.Options)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        border: "0.063rem solid ".concat(theme.component.dropdown.options.borderColor),
+        boxSizing: 'border-box',
+        borderRadius: theme.component.dropdown.options.borderRadius,
+        background: theme.colors.shades.white.color,
+        fontFamily: theme.fonts.config[0].family,
+        padding: 0,
+        marginTop: '0.125rem',
+        position: 'absolute',
+        width: '100%',
+        color: theme.colors.shades['700'].color,
+        zIndex: 10,
+    });
+});
+var BaseDropdownOptions = function (_a) {
+    var children = _a.children;
+    var theme = useTheme();
+    return jsx(DropdownOptions, __assign({ theme: theme }, { children: children }), void 0);
+};
+
+export { BaseDropdownOptions as default };
+//# sourceMappingURL=BaseDropdownOptions.js.map

package/build/index.esm.js/src/components/dropdown/base/BaseDropdownOptions.js.map

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

package/build/index.esm.js/src/components/dropdown/size-dropdown/SizeDropdown.js

@@ -0,0 +1,29 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { DropdownContainer, DropdownLabel, SizeLabel, DetailLabel, DropdownOptions, DropdownOption } from './Styled.js';
+import { Icon } from '../../icons/index.js';
+
+var SizeDropdown = function (_a) {
+    var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = useState({
+        size: defaultLabel,
+        detail: '',
+    }), selectedOption = _c[0], setSelectedOption = _c[1];
+    var toggleDropdown = function () { return setIsOpen(function (prevIsOpen) { return !prevIsOpen; }); };
+    var handleOptionClick = function (option) {
+        setSelectedOption(option);
+        setIsOpen(false);
+        onOptionSelect(option.size);
+    };
+    var handleOptionKeyDown = function (e, option) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            handleOptionClick(option);
+        }
+    };
+    return (jsxs(DropdownContainer, { children: [jsxs(DropdownLabel, __assign({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx(SizeLabel, { children: selectedOption.size }, void 0), jsx(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx(DropdownOptions, { children: options.map(function (option) { return (jsxs(DropdownOption, __assign({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx("span", { children: option.size }, void 0), jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
+};
+
+export { SizeDropdown as default };
+//# sourceMappingURL=SizeDropdown.js.map

package/build/index.esm.js/src/components/dropdown/size-dropdown/SizeDropdown.js.map

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

package/build/index.esm.js/src/components/dropdown/size-dropdown/Styled.js

@@ -0,0 +1,13 @@
+import { __makeTemplateObject } from '../../../../node_modules/tslib/tslib.es6.js';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+
+var DropdownContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  font-size: 14px;\n  line-height: 18px;\n"], ["\n  position: relative;\n  font-size: 14px;\n  line-height: 18px;\n"])));
+var DropdownLabel = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background: #fff;\n  border: 1px solid #bbb;\n  border-radius: 8px;\n  padding: 8px 12px 8px 16px;\n  cursor: pointer;\n  gap: 16px;\n  font-weight: 600;\n  color: var(--colors-pallete-secondary-color);\n  max-width: 337px;\n  height: 36px;\n\n  @media (max-width: 767px) {\n    max-width: 100%;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background: #fff;\n  border: 1px solid #bbb;\n  border-radius: 8px;\n  padding: 8px 12px 8px 16px;\n  cursor: pointer;\n  gap: 16px;\n  font-weight: 600;\n  color: var(--colors-pallete-secondary-color);\n  max-width: 337px;\n  height: 36px;\n\n  @media (max-width: 767px) {\n    max-width: 100%;\n  }\n"])));
+var SizeLabel = newStyled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
+var DetailLabel = newStyled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-align: center;\n  flex-grow: 1;\n  font-weight: 400;\n  color: var(--colors-shades-400-color);\n"], ["\n  text-align: center;\n  flex-grow: 1;\n  font-weight: 400;\n  color: var(--colors-shades-400-color);\n"])));
+var DropdownOptions = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  padding: 0;\n  max-width: 337px;\n  border: 1px solid var(--colors-pallete-secondary-color);\n  border-radius: 8px;\n  overflow: hidden;\n\n  @media (max-width: 767px) {\n    width: 100%;\n    max-width: none;\n  }\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  padding: 0;\n  max-width: 337px;\n  border: 1px solid var(--colors-pallete-secondary-color);\n  border-radius: 8px;\n  overflow: hidden;\n\n  @media (max-width: 767px) {\n    width: 100%;\n    max-width: none;\n  }\n"])));
+var DropdownOption = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px 10px;\n  height: 40px;\n  cursor: pointer;\n\n  &:hover {\n    background-color: rgb(247, 247, 247);\n    border-radius: 8px;\n  }\n\n  &[aria-selected='true'] {\n    background-color: rgb(247, 247, 247);\n    border-radius: 8px;\n  }\n\n  & > span:first-of-type {\n    margin-right: auto;\n    font-weight: 600;\n  }\n\n  & > span:last-of-type {\n    text-align: center;\n    flex-grow: 1;\n    font-weight: 400;\n    color: var(--colors-shades-400-color);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px 10px;\n  height: 40px;\n  cursor: pointer;\n\n  &:hover {\n    background-color: rgb(247, 247, 247);\n    border-radius: 8px;\n  }\n\n  &[aria-selected='true'] {\n    background-color: rgb(247, 247, 247);\n    border-radius: 8px;\n  }\n\n  & > span:first-of-type {\n    margin-right: auto;\n    font-weight: 600;\n  }\n\n  & > span:last-of-type {\n    text-align: center;\n    flex-grow: 1;\n    font-weight: 400;\n    color: var(--colors-shades-400-color);\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export { DetailLabel, DropdownContainer, DropdownLabel, DropdownOption, DropdownOptions, SizeLabel };
+//# sourceMappingURL=Styled.js.map

package/build/index.esm.js/src/components/dropdown/size-dropdown/Styled.js.map

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

package/build/index.esm.js/src/components/dropdown/variants/dialog/DropdownDialog.js

@@ -0,0 +1,19 @@
+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';
+
+var DialogDropdownWrapper = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: none;\n  ::before,\n  ::after {\n    content: '';\n    position: absolute;\n    border: 11px solid transparent;\n    margin-left: -10px;\n    border-bottom-color: #e9e9e9;\n    top: calc(", " - 5px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n  ::after {\n    border-bottom-color: #fff;\n    top: calc(", " - 4px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n"], ["\n  position: relative;\n  display: none;\n  ::before,\n  ::after {\n    content: '';\n    position: absolute;\n    border: 11px solid transparent;\n    margin-left: -10px;\n    border-bottom-color: #e9e9e9;\n    top: calc(", " - 5px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n  ::after {\n    border-bottom-color: #fff;\n    top: calc(", " - 4px);\n    right: calc(", " + 21px);\n    z-index: 50 !important;\n  }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
+var DialogDropdownListContainer = newStyled.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  list-style: none;\n  width: max-content;\n  min-width: 100px;\n  background: #fff;\n  border: 1px solid #e9e9e9;\n  top: calc(", " + 15px);\n  right: calc(", " - 23px);\n  z-index: 50 !important;\n  margin-bottom: 1rem;\n\n  font-family: inherit;\n  font-size: 100%;\n  font-style: inherit;\n  font-variant: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  margin: 0;\n  padding: 0;\n  vertical-align: inherit;\n"], ["\n  position: absolute;\n  list-style: none;\n  width: max-content;\n  min-width: 100px;\n  background: #fff;\n  border: 1px solid #e9e9e9;\n  top: calc(", " + 15px);\n  right: calc(", " - 23px);\n  z-index: 50 !important;\n  margin-bottom: 1rem;\n\n  font-family: inherit;\n  font-size: 100%;\n  font-style: inherit;\n  font-variant: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  margin: 0;\n  padding: 0;\n  vertical-align: inherit;\n"])), function (props) { return props.top; }, function (props) { return props.right; });
+var DialogDropdownListItem = newStyled.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-bottom: 1px solid #e9e9e9;\n  margin: 0;\n  padding: 0;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 17px;\n  color: var(--colors-shades-550-color);\n  vertical-align: inherit;\n"], ["\n  border-bottom: 1px solid #e9e9e9;\n  margin: 0;\n  padding: 0;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 17px;\n  color: var(--colors-shades-550-color);\n  vertical-align: inherit;\n"])));
+var DialogDropdownLink = newStyled.a(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  text-decoration: none;\n  width: 100%;\n  background-color: transparent;\n  border: 0;\n  margin: 0;\n  padding: 12px;\n  cursor: pointer;\n  transition: all 0.2s;\n  color: var(--colors-shades-700-color);\n  font-size: 1.125rem;\n  font-style: inherit;\n  font-variant: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  vertical-align: inherit;\n"], ["\n  display: inline-block;\n  text-decoration: none;\n  width: 100%;\n  background-color: transparent;\n  border: 0;\n  margin: 0;\n  padding: 12px;\n  cursor: pointer;\n  transition: all 0.2s;\n  color: var(--colors-shades-700-color);\n  font-size: 1.125rem;\n  font-style: inherit;\n  font-variant: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  vertical-align: inherit;\n"])));
+var DropdownDialog = function (_a) {
+    var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
+    return (jsx(DialogDropdownWrapper, __assign({ top: top, right: right, style: style, className: className }, { children: jsx(DialogDropdownListContainer, __assign({ "data-testid": "dialog-dropdown-list", top: top, right: right }, { children: options.map(function (_a, idx) {
+                var label = _a.label, value = _a.value;
+                return (jsx(DialogDropdownListItem, { children: jsx(DialogDropdownLink, __assign({ href: value }, { children: label }), void 0) }, idx));
+            }) }), void 0) }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { DropdownDialog as default };
+//# sourceMappingURL=DropdownDialog.js.map

package/build/index.esm.js/src/components/dropdown/variants/dialog/DropdownDialog.js.map

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