@trafilea/afrodita-components 5.0.0-beta.102 → 5.0.0-beta.104

package/build/index.js

@@ -4042,7 +4042,7 @@ exports.InputValidationType = void 0;
     InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
 })(exports.InputValidationType || (exports.InputValidationType = {}));
 
-var Section = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"], ["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"])), function (props) {
+var Section = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"], ["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"])), function (props) {
     return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
 });
 var CardHeader = function (_a) {
@@ -4053,14 +4053,14 @@ var CardFooter = function (_a) {
     var children = _a.children;
     return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
 };
-var templateObject_1$1i;
+var templateObject_1$1j;
 
-var Body = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"])));
+var Body = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"])));
 var CardBody = function (_a) {
     var children = _a.children;
     return jsxRuntime.jsx(Body, { children: children }, void 0);
 };
-var templateObject_1$1h;
+var templateObject_1$1i;
 
 var IGNORED_KEYS = ['typography', 'fonts'];
 var applyVariablesIntoTheme = function (theme) {
@@ -4205,7 +4205,7 @@ var AssetsProvider = function (_a) {
 };
 var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
 
-var Container$O = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"], ["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"])), function (_a) {
+var Container$O = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"], ["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n"])), function (_a) {
     var flex = _a.flex;
     return flex &&
         "display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;";
@@ -4225,7 +4225,7 @@ var Card$2 = Object.assign(Card$1, {
     Footer: CardFooter,
     Body: CardBody,
 });
-var templateObject_1$1g;
+var templateObject_1$1h;
 
 var Fragment = jsxRuntime.Fragment;
 function jsx(type, props, key) {
@@ -4367,7 +4367,7 @@ function BaseSelectOption(_a) {
     return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
 }
 
-var CustomListBox = newStyled(Ee)(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var CustomListBox = newStyled(Ee)(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 function BaseSelect(_a) {
     var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
     return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
@@ -4377,7 +4377,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
     Options: BaseSelectOptions,
     Option: BaseSelectOption,
 });
-var templateObject_1$1f;
+var templateObject_1$1g;
 
 var CustomButton = newStyled.button(function (_a) {
     var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
@@ -4590,12 +4590,12 @@ var CustomCheckboxStyles = {
     },
 };
 
-var Container$N = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"])));
+var Container$N = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"])));
 var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
     CustomCheckboxStyles[props.size](props.theme),
     CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
 ]; });
-var Input$3 = newStyled.input(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"], ["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"])), function (_a) {
+var Input$3 = newStyled.input(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"], ["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'not-allowed' : 'pointer');
 });
@@ -4626,7 +4626,7 @@ var Checkbox = function (_a) {
     }, []);
     return (jsxRuntime.jsxs(Container$N, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
 };
-var templateObject_1$1e, templateObject_2$O;
+var templateObject_1$1f, templateObject_2$P;
 
 var CustomOption = newStyled.li(function (_a) {
     var theme = _a.theme, selected = _a.selected, active = _a.active;
@@ -4705,6 +4705,19 @@ function SimpleDropdown(_a) {
     return (jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
 }
 
+var DialogDropdownWrapper = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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$O || (templateObject_2$O = __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$B || (templateObject_3$B = __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$o || (templateObject_4$o = __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 (jsxRuntime.jsx(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children: jsxRuntime.jsx(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right }, { children: options.map(function (_a, idx) {
+                var label = _a.label, value = _a.value;
+                return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
+            }) }), void 0) }), void 0));
+};
+var templateObject_1$1e, templateObject_2$O, templateObject_3$B, templateObject_4$o;
+
 var getStylesBySize$8 = function (size, theme) {
     switch (size) {
         case exports.ComponentSize.Medium:
@@ -4805,7 +4818,7 @@ var Text$6 = function (_a) {
         var variantName = [variant, size].filter(Boolean).join('-');
         // These are styles specific to `variation-size`.
         var variantSizeStyle = (_b = theme.typography.variants[variantName]) !== null && _b !== void 0 ? _b : {};
-        var style = __assign$1(__assign$1({ margin: 0, color: theme.colors.text.color }, variantstyle), variantSizeStyle);
+        var style = __assign$1(__assign$1(__assign$1({ margin: 0, color: theme.colors.text.color }, variantstyle), variantSizeStyle), { fontFamily: theme.fonts.config[0].family });
         if (weight) {
             style.fontWeight = theme.typography.config.weight[weight];
         }
@@ -11680,12 +11693,12 @@ var AccordionSummaryStyles = {
     simple: function (theme, disabled) {
         return css(__assign$1(__assign$1({}, theme.component.accordion.variant.simple.summary), { color: disabled
                 ? theme.colors.text.disabled
-                : theme.component.accordion.variant.simple.summary.color }));
+                : theme.component.accordion.variant.simple.summary.color, fontFamily: theme.fonts.config[0].family }));
     },
     box: function (theme, disabled) {
         return css(__assign$1(__assign$1({}, theme.component.accordion.variant.box.summary), { color: disabled
                 ? theme.colors.text.disabled
-                : theme.component.accordion.variant.box.summary.color }));
+                : theme.component.accordion.variant.box.summary.color, fontFamily: theme.fonts.config[0].family }));
     },
     title: function (titleColor) {
         return css({
@@ -17839,6 +17852,7 @@ exports.CrossSell = index;
 exports.DeliveryDetails = DeliveryDetails;
 exports.DiscountTag = DiscountTag;
 exports.Drawer = Drawer;
+exports.DropdownDialog = DropdownDialog;
 exports.DropdownListIcons = DropdownListIcons;
 exports.FilteringDropdown = FilteringDropdown;
 exports.FilteringTags = Tags;