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

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

@@ -0,0 +1,30 @@
+'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 BaseSelect = require('../../shared/select/BaseSelect.js');
+var BaseDropdownButton = require('./BaseDropdownButton.js');
+var BaseDropdownOptions = require('./BaseDropdownOptions.js');
+var BaseDropdownOption = require('./BaseDropdownOption.js');
+var Theme = require('../../../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 = Theme.useTheme();
+    return (emotionReactJsxRuntime_esm.jsx(BaseSelect, tslib_es6.__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["default"],
+    Options: BaseDropdownOptions,
+    Option: BaseDropdownOption,
+});
+
+module.exports = BaseDropdown$1;
+//# sourceMappingURL=BaseDropdown.js.map

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

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

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

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 React = require('react');
+var emotionStyled_esm = require('../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var BaseSelect = require('../../shared/select/BaseSelect.js');
+var Theme = require('../../../core/theme/Theme.js');
+
+var CustomButton = emotionStyled_esm.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 = Theme.useTheme();
+    return (emotionReactJsxRuntime_esm.jsx(BaseSelect.Button, tslib_es6.__assign({ as: React.Fragment }, { children: function (_a) {
+            var open = _a.open;
+            return (emotionReactJsxRuntime_esm.jsxs(CustomButton, tslib_es6.__assign({ theme: theme, wide: wide, isSortOrFilter: isSortOrFilter }, { children: [children, open ? (emotionReactJsxRuntime_esm.jsx(CloseIcon, { height: 0.875, width: 0.875, fill: "inherit" }, void 0)) : (emotionReactJsxRuntime_esm.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 (emotionReactJsxRuntime_esm.jsx(Button, tslib_es6.__assign({ CloseIcon: CloseIcon, OpenIcon: OpenIcon, wide: wide }, { children: emotionReactJsxRuntime_esm.jsxs("div", tslib_es6.__assign({ css: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-start',
+                } }, { children: [emotionReactJsxRuntime_esm.jsx("div", tslib_es6.__assign({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0) }), void 0));
+    };
+};
+
+exports["default"] = BaseDropdownButton;
+exports.withLabel = withLabel;
+//# sourceMappingURL=BaseDropdownButton.js.map

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

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

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

@@ -0,0 +1,40 @@
+'use strict';
+
+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 BaseSelect = require('../../shared/select/BaseSelect.js');
+var Checkbox = require('../../checkbox/Checkbox.js');
+var enums = require('../../../types/enums.js');
+var Theme = require('../../../core/theme/Theme.js');
+
+var CustomOption = emotionStyled_esm.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 = Theme.useTheme();
+    return (jsxRuntime.jsx(BaseSelect.Option, tslib_es6.__assign({ value: value, disabled: disabled, as: React.Fragment }, { children: function (_a) {
+            var selected = _a.selected, active = _a.active;
+            return (jsxRuntime.jsxs(CustomOption, tslib_es6.__assign({ theme: theme, selected: isSelected || selected, active: active }, { children: [hasCheckbox && (jsxRuntime.jsx(Checkbox.Checkbox, { checked: isSelected || selected, text: "", id: value.key, onChange: console.log, size: enums.ComponentSize.Small, variant: "primary" }, void 0)), children] }), void 0));
+        } }), void 0));
+}
+
+module.exports = BaseDropdownOption;
+//# sourceMappingURL=BaseDropdownOption.js.map

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

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

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

@@ -0,0 +1,35 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+var BaseSelect = require('../../shared/select/BaseSelect.js');
+var Theme = require('../../../core/theme/Theme.js');
+
+var DropdownOptions = emotionStyled_esm(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 = Theme.useTheme();
+    return jsxRuntime.jsx(DropdownOptions, tslib_es6.__assign({ theme: theme }, { children: children }), void 0);
+};
+
+module.exports = BaseDropdownOptions;
+//# sourceMappingURL=BaseDropdownOptions.js.map

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

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

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

@@ -0,0 +1,31 @@
+'use strict';
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Styled = require('./Styled.js');
+var index = require('../../icons/index.js');
+
+var SizeDropdown = function (_a) {
+    var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
+    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = React.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 (jsxRuntime.jsxs(Styled.DropdownContainer, { children: [jsxRuntime.jsxs(Styled.DropdownLabel, tslib_es6.__assign({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsxRuntime.jsx(Styled.SizeLabel, { children: selectedOption.size }, void 0), jsxRuntime.jsx(Styled.DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsxRuntime.jsx(index.Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsxRuntime.jsx(index.Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsxRuntime.jsx(Styled.DropdownOptions, { children: options.map(function (option) { return (jsxRuntime.jsxs(Styled.DropdownOption, tslib_es6.__assign({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsxRuntime.jsx("span", { children: option.size }, void 0), jsxRuntime.jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
+};
+
+module.exports = SizeDropdown;
+//# sourceMappingURL=SizeDropdown.js.map

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

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

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

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var emotionStyled_esm = require('../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+
+var DropdownContainer = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__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 = emotionStyled_esm.div(templateObject_2 || (templateObject_2 = tslib_es6.__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 = emotionStyled_esm.span(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  margin-right: 8px;\n"], ["\n  margin-right: 8px;\n"])));
+var DetailLabel = emotionStyled_esm.span(templateObject_4 || (templateObject_4 = tslib_es6.__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 = emotionStyled_esm.div(templateObject_5 || (templateObject_5 = tslib_es6.__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 = emotionStyled_esm.div(templateObject_6 || (templateObject_6 = tslib_es6.__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;
+
+exports.DetailLabel = DetailLabel;
+exports.DropdownContainer = DropdownContainer;
+exports.DropdownLabel = DropdownLabel;
+exports.DropdownOption = DropdownOption;
+exports.DropdownOptions = DropdownOptions;
+exports.SizeLabel = SizeLabel;
+//# sourceMappingURL=Styled.js.map

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

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

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

@@ -0,0 +1,21 @@
+'use strict';
+
+var tslib_es6 = require('../../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var emotionStyled_esm = require('../../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+
+var DialogDropdownWrapper = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__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 = emotionStyled_esm.ul(templateObject_2 || (templateObject_2 = tslib_es6.__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 = emotionStyled_esm.li(templateObject_3 || (templateObject_3 = tslib_es6.__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 = emotionStyled_esm.a(templateObject_4 || (templateObject_4 = tslib_es6.__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, tslib_es6.__assign({ top: top, right: right, style: style, className: className }, { children: jsxRuntime.jsx(DialogDropdownListContainer, tslib_es6.__assign({ "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, tslib_es6.__assign({ href: value }, { children: label }), void 0) }, idx));
+            }) }), void 0) }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+module.exports = DropdownDialog;
+//# sourceMappingURL=DropdownDialog.js.map

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

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

package/build/index.js/src/components/dropdown/variants/filtering/FilteringDropdown.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var tslib_es6 = require('../../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../../../icons/index.js');
+var BaseDropdown = require('../../base/BaseDropdown.js');
+var sliceString = require('../../../../utils/sliceString/sliceString.js');
+require('../../../../utils/media.js');
+
+function FilteringDropdown(_a) {
+    var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
+    var _f = React.useState([]), selectedValues = _f[0], setSelectedValues = _f[1];
+    var getFilterLabel = function () {
+        return selectedValues.length === 0
+            ? placeHolder
+            : "(".concat(selectedValues.length, ") ").concat(selectedValues.map(function (_a) {
+                var label = _a.label;
+                return label;
+            }).join(', '));
+    };
+    var onChangeHandler = function (value) {
+        setSelectedValues(function (prevState) {
+            var newState = [];
+            if (prevState.find(function (item) { return item.key === value.key; })) {
+                newState = prevState.filter(function (item) { return item.key !== value.key; });
+            }
+            else {
+                newState = tslib_es6.__spreadArray(tslib_es6.__spreadArray([], prevState, true), [value], false);
+            }
+            onChange(newState);
+            return newState;
+        });
+    };
+    var Button = BaseDropdown.Button;
+    return (jsxRuntime.jsxs(BaseDropdown, tslib_es6.__assign({ onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, tslib_es6.__assign({ OpenIcon: index.Icon.Arrows.ChevronDown, CloseIcon: index.Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: filter }, { children: sliceString.sliceString(getFilterLabel(), sliceAfter) }), void 0), jsxRuntime.jsx(BaseDropdown.Options, { children: options.map(function (item) {
+                    var isSelected = selectedValues.find(function (selectedItem) { return selectedItem.key === item.key; });
+                    return (jsxRuntime.jsx(BaseDropdown.Option, tslib_es6.__assign({ value: item, disabled: false, hasCheckbox: true, isSelected: Boolean(isSelected === null || isSelected === void 0 ? void 0 : isSelected.key) }, { children: item.label }), item.key));
+                }) }, void 0)] }), void 0));
+}
+
+module.exports = FilteringDropdown;
+//# sourceMappingURL=FilteringDropdown.js.map

package/build/index.js/src/components/dropdown/variants/filtering/FilteringDropdown.js.map

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

package/build/index.js/src/components/dropdown/variants/simple/SimpleDropdown.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var tslib_es6 = require('../../../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../../../icons/index.js');
+var BaseDropdownButton = require('../../base/BaseDropdownButton.js');
+var Error = require('../../../input/base/Error.js');
+var BaseDropdown = require('../../base/BaseDropdown.js');
+var emotionStyled_esm = require('../../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+
+var Container = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject([""], [""])));
+var RequiredPlaceholder = emotionStyled_esm.p(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  margin: unset;\n  &:after {\n    content: '*';\n    color: var(--colors-semantic-urgent-color);\n  }\n"], ["\n  margin: unset;\n  &:after {\n    content: '*';\n    color: var(--colors-semantic-urgent-color);\n  }\n"])));
+function SimpleDropdown(_a) {
+    var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder;
+    var _f = React.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
+    var selectedOptionLabel = React.useMemo(function () {
+        if (selectedValue) {
+            return selectedValue.label;
+        }
+        return showRequiredPlaceholder ? (jsxRuntime.jsx(RequiredPlaceholder, { children: placeHolder }, void 0)) : (placeHolder);
+    }, [selectedValue, showRequiredPlaceholder, placeHolder]);
+    var onChangeHandler = function (value) {
+        if (onChange) {
+            onChange(value);
+        }
+        setSelectedValue(value);
+    };
+    React.useEffect(function () {
+        if (value == null) {
+            if (!initialValue) {
+                setSelectedValue(undefined);
+            }
+            return;
+        }
+        if (options.findIndex(function (option) { return option.value === value.value; }) < 0) {
+            setSelectedValue(undefined);
+            return;
+        }
+        setSelectedValue(value);
+    }, [value, options, initialValue]);
+    var Button = label ? BaseDropdownButton.withLabel(BaseDropdown.Button, label) : BaseDropdown.Button;
+    var DropdownContainer = showRequiredPlaceholder ? Container : React.Fragment;
+    return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown, tslib_es6.__assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, tslib_es6.__assign({ OpenIcon: index.Icon.Arrows.ChevronDown, CloseIcon: index.Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown.Option, tslib_es6.__assign({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error.Error, { error: required }, void 0)] }, void 0));
+}
+var templateObject_1, templateObject_2;
+
+module.exports = SimpleDropdown;
+//# sourceMappingURL=SimpleDropdown.js.map

package/build/index.js/src/components/dropdown/variants/simple/SimpleDropdown.js.map

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

package/build/index.js/src/components/dropdown-list-icons/DropdownListIcons.js

@@ -0,0 +1,24 @@
+'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 Theme = require('../../core/theme/Theme.js');
+var Arrow = require('../tooltip/Arrow.js');
+var Styled = require('./Styled.js');
+
+var DropdownListIcons = function (_a) {
+    var items = _a.items;
+    var theme = Theme.useTheme();
+    return (jsxRuntime.jsx(Styled.List, tslib_es6.__assign({ "data-testid": "Icons-list" }, { children: items.map(function (item, index) { return (jsxRuntime.jsxs(Styled.Item, { children: [React.createElement(item.Icon, { fill: theme.colors.shades['700'].color }), jsxRuntime.jsx(Dropdown, { items: item.items }, void 0)] }, index)); }) }), void 0));
+};
+var Dropdown = function (_a) {
+    var items = _a.items;
+    var theme = Theme.useTheme();
+    return (jsxRuntime.jsxs(Styled.DropdownWrapper, tslib_es6.__assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(Styled.ArrowContainer, { children: jsxRuntime.jsx(Arrow.TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(Styled.StyledDropdown, tslib_es6.__assign({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(Styled.DropdownItem, tslib_es6.__assign({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
+};
+
+exports.DropdownListIcons = DropdownListIcons;
+//# sourceMappingURL=DropdownListIcons.js.map

package/build/index.js/src/components/dropdown-list-icons/DropdownListIcons.js.map

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

package/build/index.js/src/components/dropdown-list-icons/Styled.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var emotionStyled_esm = require('../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js');
+
+var List = emotionStyled_esm.ul(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"])));
+var Item = emotionStyled_esm.li(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  width: 1.25rem;\n  list-style: none;\n  margin-right: 1.5rem;\n  position: relative;\n  line-height: 0;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    .dropdownWrapper {\n      visibility: visible;\n    }\n  }\n"], ["\n  width: 1.25rem;\n  list-style: none;\n  margin-right: 1.5rem;\n  position: relative;\n  line-height: 0;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    .dropdownWrapper {\n      visibility: visible;\n    }\n  }\n"])));
+var DropdownWrapper = emotionStyled_esm.div(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  right: -0.938rem;\n  min-width: 9.375rem;\n  position: absolute;\n  padding-top: 0.625rem;\n  margin-top: -0.188rem;\n  width: max-content;\n  visibility: hidden;\n"], ["\n  right: -0.938rem;\n  min-width: 9.375rem;\n  position: absolute;\n  padding-top: 0.625rem;\n  margin-top: -0.188rem;\n  width: max-content;\n  visibility: hidden;\n"])));
+var ArrowContainer = emotionStyled_esm.div(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n  transform: rotate(180deg);\n  display: flex;\n  justify-content: flex-start;\n  margin-bottom: -0.063rem;\n  padding-left: 0.938rem;\n"], ["\n  transform: rotate(180deg);\n  display: flex;\n  justify-content: flex-start;\n  margin-bottom: -0.063rem;\n  padding-left: 0.938rem;\n"])));
+var StyledDropdown = emotionStyled_esm.ul(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  border: 0.063rem solid ", ";\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n"], ["\n  margin: 0;\n  padding: 0;\n  border: 0.063rem solid ", ";\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
+var DropdownItem = emotionStyled_esm.li(templateObject_6 || (templateObject_6 = tslib_es6.__makeTemplateObject(["\n  list-style: none;\n  padding: 0.813rem;\n  border-bottom: 0.063rem solid ", ";\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:last-child {\n    border-bottom: none;\n    border-radius: 0 0 0.5rem 0.5rem;\n  }\n\n  &:first-of-type {\n    border-radius: 0.5rem 0.5rem 0 0;\n  }\n\n  &:only-child {\n    border-radius: 0.5rem;\n  }\n"], ["\n  list-style: none;\n  padding: 0.813rem;\n  border-bottom: 0.063rem solid ", ";\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:last-child {\n    border-bottom: none;\n    border-radius: 0 0 0.5rem 0.5rem;\n  }\n\n  &:first-of-type {\n    border-radius: 0.5rem 0.5rem 0 0;\n  }\n\n  &:only-child {\n    border-radius: 0.5rem;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+exports.ArrowContainer = ArrowContainer;
+exports.DropdownItem = DropdownItem;
+exports.DropdownWrapper = DropdownWrapper;
+exports.Item = Item;
+exports.List = List;
+exports.StyledDropdown = StyledDropdown;
+//# sourceMappingURL=Styled.js.map

package/build/index.js/src/components/dropdown-list-icons/Styled.js.map

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

package/build/index.js/src/components/filtering/Accordion.js

@@ -0,0 +1,29 @@
+'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 index = require('../icons/index.js');
+var Theme = require('../../core/theme/Theme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var Title = emotionStyled_esm.div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 0.063rem solid ", ";\n  user-select: none;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 0.063rem solid ", ";\n  user-select: none;\n  cursor: pointer;\n"])), function (props) { return props.borderColor; });
+var H3 = emotionStyled_esm.h3(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  font-size: 1rem;\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  margin: 0.75rem 0;\n"], ["\n  font-size: 1rem;\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  margin: 0.75rem 0;\n"])), function (props) { return props.color; });
+var ArrowContainer = emotionStyled_esm.div(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  width: 1rem;\n  height: 1rem;\n"], ["\n  width: 1rem;\n  height: 1rem;\n"])));
+var Container = emotionStyled_esm.div(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n  @media (max-width: 768px) {\n    display: ", ";\n  }\n"], ["\n  @media (max-width: 768px) {\n    display: ", ";\n  }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
+var Accordion = function (_a) {
+    var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
+    var theme = Theme.useTheme();
+    var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
+    return (jsxRuntime.jsxs(Container, tslib_es6.__assign({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title, tslib_es6.__assign({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, tslib_es6.__assign({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(index.Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(index.Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", tslib_es6.__assign({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+exports.Accordion = Accordion;
+//# sourceMappingURL=Accordion.js.map

package/build/index.js/src/components/filtering/Accordion.js.map

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