@mailstep/design-system 0.6.2-beta.2 → 0.6.2-beta.3

package/ui/Elements/DropdownSelect/DropdownSelect.js

@@ -1,47 +1,76 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useRef } from 'react';
-import styled from '@xstyled/styled-components';
-import Icon from '../Icon/Icon';
-import DropdownMenu from '../DropdownMenu';
-import Button from '../Button/index';
-import Popover from '../../Blocks/Popover';
-var ArrowIcon = styled(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-shrink: 0;\n  margin-left: 2;\n"], ["\n  flex-shrink: 0;\n  margin-left: 2;\n"])));
-var CustomIconWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 1;\n"], ["\n  margin-right: 1;\n"])));
-var StyledDropdownMenu = styled(DropdownMenu)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 8px;\n  min-width: ", ";\n  width: max-content;\n"], ["\n  position: absolute;\n  top: 8px;\n  min-width: ", ";\n  width: max-content;\n"])), function (_a) {
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSelectButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var DropdownMenu_1 = __importDefault(require("../DropdownMenu"));
+var index_1 = __importDefault(require("../Button/index"));
+var Popover_1 = __importDefault(require("../../Blocks/Popover"));
+var ArrowIcon = (0, styled_components_1.default)(Icon_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-shrink: 0;\n  margin-left: 2;\n"], ["\n  flex-shrink: 0;\n  margin-left: 2;\n"])));
+var CustomIconWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 1;\n"], ["\n  margin-right: 1;\n"])));
+var StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 8px;\n  min-width: ", ";\n  width: max-content;\n"], ["\n  position: absolute;\n  top: 8px;\n  min-width: ", ";\n  width: max-content;\n"])), function (_a) {
     var $fixedWidth = _a.$fixedWidth;
     return ($fixedWidth ? '160px' : 'max-content');
 });
-var ContentWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var ChevronWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-left: ", ";\n"], ["\n  border-left: ", ";\n"])), function (_a) {
+var ContentWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var ChevronWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-left: ", ";\n"], ["\n  border-left: ", ";\n"])), function (_a) {
     var $hasBorder = _a.$hasBorder;
     return ($hasBorder ? '1px solid white' : 'none');
 });
-export var CustomSelectButton = styled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: none;\n  min-width: 160px;\n  height: 38px;\n  padding: 0;\n  background-color: red1;\n  color: white;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  border: none;\n  border-radius: lg;\n  outline: none;\n  cursor: pointer;\n  :disabled {\n    border: slim;\n    background-color: bgLightGray;\n    border-color: lightGray5;\n    color: gray3;\n    opacity: 0.6;\n    cursor: auto;\n  }\n\n  @media (min-width: 1024px) {\n    display: block;\n\n    :focus {\n      outline: none;\n    }\n  }\n\n  ", " {\n    justify-content: space-between;\n    padding-left: 14px;\n  }\n\n  ", " {\n    margin-left: 20px;\n    padding: 12px 14px;\n  }\n"], ["\n  display: none;\n  min-width: 160px;\n  height: 38px;\n  padding: 0;\n  background-color: red1;\n  color: white;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  border: none;\n  border-radius: lg;\n  outline: none;\n  cursor: pointer;\n  :disabled {\n    border: slim;\n    background-color: bgLightGray;\n    border-color: lightGray5;\n    color: gray3;\n    opacity: 0.6;\n    cursor: auto;\n  }\n\n  @media (min-width: 1024px) {\n    display: block;\n\n    :focus {\n      outline: none;\n    }\n  }\n\n  ", " {\n    justify-content: space-between;\n    padding-left: 14px;\n  }\n\n  ", " {\n    margin-left: 20px;\n    padding: 12px 14px;\n  }\n"])), ContentWrapper, ChevronWrapper);
+exports.CustomSelectButton = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: none;\n  min-width: 160px;\n  height: 38px;\n  padding: 0;\n  background-color: red1;\n  color: white;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  border: none;\n  border-radius: lg;\n  outline: none;\n  cursor: pointer;\n  :disabled {\n    border: slim;\n    background-color: bgLightGray;\n    border-color: lightGray5;\n    color: gray3;\n    opacity: 0.6;\n    cursor: auto;\n  }\n\n  @media (min-width: 1024px) {\n    display: block;\n\n    :focus {\n      outline: none;\n    }\n  }\n\n  ", " {\n    justify-content: space-between;\n    padding-left: 14px;\n  }\n\n  ", " {\n    margin-left: 20px;\n    padding: 12px 14px;\n  }\n"], ["\n  display: none;\n  min-width: 160px;\n  height: 38px;\n  padding: 0;\n  background-color: red1;\n  color: white;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  border: none;\n  border-radius: lg;\n  outline: none;\n  cursor: pointer;\n  :disabled {\n    border: slim;\n    background-color: bgLightGray;\n    border-color: lightGray5;\n    color: gray3;\n    opacity: 0.6;\n    cursor: auto;\n  }\n\n  @media (min-width: 1024px) {\n    display: block;\n\n    :focus {\n      outline: none;\n    }\n  }\n\n  ", " {\n    justify-content: space-between;\n    padding-left: 14px;\n  }\n\n  ", " {\n    margin-left: 20px;\n    padding: 12px 14px;\n  }\n"])), ContentWrapper, ChevronWrapper);
 var DropdownSelect = function (_a) {
     var label = _a.label, appearance = _a.appearance, options = _a.options, showChevron = _a.showChevron, onSelect = _a.onSelect, disabled = _a.disabled, icon = _a.icon, ButtonComponent = _a.ButtonComponent;
-    var _b = React.useState(false), showDropdownMenu = _b[0], setShowDropdownMenu = _b[1];
-    var onClose = useCallback(function () { return setShowDropdownMenu(false); }, []);
-    var toggleDropdownMenu = React.useCallback(function () {
+    var _b = react_1.default.useState(false), showDropdownMenu = _b[0], setShowDropdownMenu = _b[1];
+    var onClose = (0, react_1.useCallback)(function () { return setShowDropdownMenu(false); }, []);
+    var toggleDropdownMenu = react_1.default.useCallback(function () {
         setShowDropdownMenu(function (prev) { return !prev; });
     }, []);
-    var handleSelectItem = React.useCallback(function (item) {
+    var handleSelectItem = react_1.default.useCallback(function (item) {
         setShowDropdownMenu(false);
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value);
     }, [onSelect]);
-    var ref = useRef(null);
+    var ref = (0, react_1.useRef)(null);
     var items = options.map(function (item) { return ({
         title: item.label,
         onClick: function () { return handleSelectItem(item); },
         link: '#',
         name: item.name,
     }); });
-    var ComponentOfButton = ButtonComponent || Button;
+    var ComponentOfButton = ButtonComponent || index_1.default;
     var isCustomBtn = !!ButtonComponent;
-    return (_jsxs("div", { ref: ref, children: [_jsx(ComponentOfButton, { type: "button", appearance: appearance, onClick: toggleDropdownMenu, disabled: disabled, "data-cy": "createProductDropdownMenuBtn", children: _jsxs(ContentWrapper, { children: [icon && _jsx(CustomIconWrap, { children: icon }), _jsx("span", { children: label }), showChevron && (_jsx(ChevronWrapper, { "$hasBorder": isCustomBtn, children: _jsx(ArrowIcon, { icon: "chevronDown", size: isCustomBtn ? '100%' : '80%', fixedWidth: isCustomBtn }) }))] }) }), showDropdownMenu && (_jsx(Popover, { parentRef: ref, onClose: onClose, placement: "bottom-start", children: _jsx(StyledDropdownMenu, { showMenu: true, items: items, "$fixedWidth": isCustomBtn }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [(0, jsx_runtime_1.jsx)(ComponentOfButton, { type: "button", appearance: appearance, onClick: toggleDropdownMenu, disabled: disabled, "data-cy": "createProductDropdownMenuBtn", children: (0, jsx_runtime_1.jsxs)(ContentWrapper, { children: [icon && (0, jsx_runtime_1.jsx)(CustomIconWrap, { children: icon }), (0, jsx_runtime_1.jsx)("span", { children: label }), showChevron && ((0, jsx_runtime_1.jsx)(ChevronWrapper, { "$hasBorder": isCustomBtn, children: (0, jsx_runtime_1.jsx)(ArrowIcon, { icon: "chevronDown", size: isCustomBtn ? '100%' : '80%', fixedWidth: isCustomBtn }) }))] }) }), showDropdownMenu && ((0, jsx_runtime_1.jsx)(Popover_1.default, { parentRef: ref, onClose: onClose, placement: "bottom-start", children: (0, jsx_runtime_1.jsx)(StyledDropdownMenu, { showMenu: true, items: items, "$fixedWidth": isCustomBtn }) }))] }));
 };
-export default DropdownSelect;
+exports.default = DropdownSelect;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Elements/DropdownSelect/index.js

@@ -1,3 +1,10 @@
-import DropdownSelect from './DropdownSelect';
-export { CustomSelectButton } from './DropdownSelect';
-export default DropdownSelect;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSelectButton = void 0;
+var DropdownSelect_1 = __importDefault(require("./DropdownSelect"));
+var DropdownSelect_2 = require("./DropdownSelect");
+Object.defineProperty(exports, "CustomSelectButton", { enumerable: true, get: function () { return DropdownSelect_2.CustomSelectButton; } });
+exports.default = DropdownSelect_1.default;

package/ui/Elements/ErrorMessage/ErrorMessage.js

@@ -1,17 +1,42 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
-import { Icon } from '../Icon';
-var tooltip = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  span {\n    display: none;\n    position: absolute;\n    width: 120px;\n    background-color: red1;\n    color: white;\n    text-align: center;\n    border-radius: md;\n    padding: 1;\n    z-index: 1;\n    transition: opacity 0.3s;\n    top: 0;\n    margin-top: -4px;\n    left: 100%;\n    margin-left: 2;\n    box-shadow: tooltipBoxShadow;\n\n    :after {\n      content: '';\n      position: absolute;\n      top: 3px;\n      right: 100%;\n      border: mediumThick;\n      border-color: transparent ", " transparent transparent;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n    span {\n      display: block;\n    }\n  }\n"], ["\n  span {\n    display: none;\n    position: absolute;\n    width: 120px;\n    background-color: red1;\n    color: white;\n    text-align: center;\n    border-radius: md;\n    padding: 1;\n    z-index: 1;\n    transition: opacity 0.3s;\n    top: 0;\n    margin-top: -4px;\n    left: 100%;\n    margin-left: 2;\n    box-shadow: tooltipBoxShadow;\n\n    :after {\n      content: '';\n      position: absolute;\n      top: 3px;\n      right: 100%;\n      border: mediumThick;\n      border-color: transparent ", " transparent transparent;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n    span {\n      display: block;\n    }\n  }\n"])), th.color('red1'));
-var ErrorWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: red1;\n  font-size: 1;\n  display: flex;\n  align-items: flex-start;\n\n  svg {\n    min-width: 13px;\n    width: 13px;\n    fill: red1;\n  }\n"], ["\n  color: red1;\n  font-size: 1;\n  display: flex;\n  align-items: flex-start;\n\n  svg {\n    min-width: 13px;\n    width: 13px;\n    fill: red1;\n  }\n"])));
-var StyledWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .inline {\n    margin-top: 1;\n    svg {\n      margin-right: 2;\n    }\n  }\n  .tooltip {\n    ", "\n    svg {\n      position: absolute;\n      top: 0;\n      right: 0;\n    }\n  }\n"], ["\n  .inline {\n    margin-top: 1;\n    svg {\n      margin-right: 2;\n    }\n  }\n  .tooltip {\n    ", "\n    svg {\n      position: absolute;\n      top: 0;\n      right: 0;\n    }\n  }\n"])), tooltip);
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+var styled_components_2 = require("@xstyled/styled-components");
+var Icon_1 = require("../Icon");
+var tooltip = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  span {\n    display: none;\n    position: absolute;\n    width: 120px;\n    background-color: red1;\n    color: white;\n    text-align: center;\n    border-radius: md;\n    padding: 1;\n    z-index: 1;\n    transition: opacity 0.3s;\n    top: 0;\n    margin-top: -4px;\n    left: 100%;\n    margin-left: 2;\n    box-shadow: tooltipBoxShadow;\n\n    :after {\n      content: '';\n      position: absolute;\n      top: 3px;\n      right: 100%;\n      border: mediumThick;\n      border-color: transparent ", " transparent transparent;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n    span {\n      display: block;\n    }\n  }\n"], ["\n  span {\n    display: none;\n    position: absolute;\n    width: 120px;\n    background-color: red1;\n    color: white;\n    text-align: center;\n    border-radius: md;\n    padding: 1;\n    z-index: 1;\n    transition: opacity 0.3s;\n    top: 0;\n    margin-top: -4px;\n    left: 100%;\n    margin-left: 2;\n    box-shadow: tooltipBoxShadow;\n\n    :after {\n      content: '';\n      position: absolute;\n      top: 3px;\n      right: 100%;\n      border: mediumThick;\n      border-color: transparent ", " transparent transparent;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n    span {\n      display: block;\n    }\n  }\n"])), styled_components_2.th.color('red1'));
+var ErrorWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: red1;\n  font-size: 1;\n  display: flex;\n  align-items: flex-start;\n\n  svg {\n    min-width: 13px;\n    width: 13px;\n    fill: red1;\n  }\n"], ["\n  color: red1;\n  font-size: 1;\n  display: flex;\n  align-items: flex-start;\n\n  svg {\n    min-width: 13px;\n    width: 13px;\n    fill: red1;\n  }\n"])));
+var StyledWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .inline {\n    margin-top: 1;\n    svg {\n      margin-right: 2;\n    }\n  }\n  .tooltip {\n    ", "\n    svg {\n      position: absolute;\n      top: 0;\n      right: 0;\n    }\n  }\n"], ["\n  .inline {\n    margin-top: 1;\n    svg {\n      margin-right: 2;\n    }\n  }\n  .tooltip {\n    ", "\n    svg {\n      position: absolute;\n      top: 0;\n      right: 0;\n    }\n  }\n"])), tooltip);
 var ErrorMessage = function (_a) {
     var children = _a.children, appearance = _a.appearance;
-    return (_jsx(StyledWrapper, { children: _jsxs(ErrorWrap, { className: appearance, children: [_jsx(Icon, { icon: "deleteX" }), _jsx("span", { children: children })] }) }));
+    return ((0, jsx_runtime_1.jsx)(StyledWrapper, { children: (0, jsx_runtime_1.jsxs)(ErrorWrap, { className: appearance, children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "deleteX" }), (0, jsx_runtime_1.jsx)("span", { children: children })] }) }));
 };
-export default ErrorMessage;
+exports.default = ErrorMessage;
 var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/ErrorMessage/index.js

@@ -1,3 +1,9 @@
-import ErrorMessage from './ErrorMessage';
-export { ErrorMessage };
-export default ErrorMessage;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = void 0;
+var ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
+exports.ErrorMessage = ErrorMessage_1.default;
+exports.default = ErrorMessage_1.default;

package/ui/Elements/ErrorMessage/stories/ErrorMessage.stories.js

@@ -1,17 +1,23 @@
-import ErrorMessage from '../ErrorMessage';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = exports.Default = void 0;
+var ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
 var meta = {
     title: 'Elements/ErrorMessage',
-    component: ErrorMessage,
+    component: ErrorMessage_1.default,
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
-export var Default = {
+exports.default = meta;
+exports.Default = {
     args: {
         children: 'This is an error message',
     },
 };
-export var Tooltip = {
+exports.Tooltip = {
     args: {
         children: 'This is a tooltip error message',
         appearance: "tooltip"

package/ui/Elements/ErrorMessage/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ui/Elements/HighlightBox/HighlightBox.js

@@ -1,19 +1,45 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled, { useTheme } from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
-var StyledHighlightBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ml;\n  font-size: 12px;\n  text-align: center;\n  line-height: 19.2px;\n  min-width: 0;\n  font-weight: semiBold;\n  .default {\n    height: 24px;\n    padding: 2px 8px;\n  }\n  .small {\n    height: 18px;\n    padding: 1px 6px;\n  }\n  .wide {\n    height: 2.75em;\n    display: flex;\n    flex-flow: row wrap;\n    width: 11rem;\n    align-content: center;\n    line-height: 14px;\n    padding: 0.5px 12px;\n  }\n  .fitContent {\n    width: fit-content;\n    height: auto;\n    padding: 4px 5px;\n    font-size: 13px;\n    line-height: 15px;\n    font-weight: 400;\n  }\n  background-color: ", ";\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ml;\n  font-size: 12px;\n  text-align: center;\n  line-height: 19.2px;\n  min-width: 0;\n  font-weight: semiBold;\n  .default {\n    height: 24px;\n    padding: 2px 8px;\n  }\n  .small {\n    height: 18px;\n    padding: 1px 6px;\n  }\n  .wide {\n    height: 2.75em;\n    display: flex;\n    flex-flow: row wrap;\n    width: 11rem;\n    align-content: center;\n    line-height: 14px;\n    padding: 0.5px 12px;\n  }\n  .fitContent {\n    width: fit-content;\n    height: auto;\n    padding: 4px 5px;\n    font-size: 13px;\n    line-height: 15px;\n    font-weight: 400;\n  }\n  background-color: ", ";\n  color: ", ";\n"])), function (_a) {
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flagAppearanceToFontColorMap = exports.flagAppearanceToColorMap = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+var system_1 = require("@xstyled/system");
+var StyledHighlightBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ml;\n  font-size: 12px;\n  text-align: center;\n  line-height: 19.2px;\n  min-width: 0;\n  font-weight: semiBold;\n  .default {\n    height: 24px;\n    padding: 2px 8px;\n  }\n  .small {\n    height: 18px;\n    padding: 1px 6px;\n  }\n  .wide {\n    height: 2.75em;\n    display: flex;\n    flex-flow: row wrap;\n    width: 11rem;\n    align-content: center;\n    line-height: 14px;\n    padding: 0.5px 12px;\n  }\n  .fitContent {\n    width: fit-content;\n    height: auto;\n    padding: 4px 5px;\n    font-size: 13px;\n    line-height: 15px;\n    font-weight: 400;\n  }\n  background-color: ", ";\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ml;\n  font-size: 12px;\n  text-align: center;\n  line-height: 19.2px;\n  min-width: 0;\n  font-weight: semiBold;\n  .default {\n    height: 24px;\n    padding: 2px 8px;\n  }\n  .small {\n    height: 18px;\n    padding: 1px 6px;\n  }\n  .wide {\n    height: 2.75em;\n    display: flex;\n    flex-flow: row wrap;\n    width: 11rem;\n    align-content: center;\n    line-height: 14px;\n    padding: 0.5px 12px;\n  }\n  .fitContent {\n    width: fit-content;\n    height: auto;\n    padding: 4px 5px;\n    font-size: 13px;\n    line-height: 15px;\n    font-weight: 400;\n  }\n  background-color: ", ";\n  color: ", ";\n"])), function (_a) {
     var $bgcolor = _a.$bgcolor;
     return $bgcolor;
 }, function (_a) {
     var $fontColor = _a.$fontColor;
     return $fontColor;
 });
-var OverflowWrap = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"], ["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
-export var flagAppearanceToColorMap = {
+var OverflowWrap = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"], ["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+exports.flagAppearanceToColorMap = {
     neutralBold: 'neutral300',
     neutralSubtle: 'neutral20',
     blueBold: 'blue70',
@@ -33,7 +59,7 @@ export var flagAppearanceToColorMap = {
     redBold: 'red60',
     redSubtle: 'red20',
 };
-export var flagAppearanceToFontColorMap = {
+exports.flagAppearanceToFontColorMap = {
     neutralBold: 'white',
     neutralSubtle: 'typoPrimary',
     blueBold: 'white',
@@ -55,11 +81,11 @@ export var flagAppearanceToFontColorMap = {
 };
 var HighlightBox = function (_a) {
     var children = _a.children, appearance = _a.appearance, _b = _a.size, size = _b === void 0 ? 'default' : _b, prefix = _a.prefix;
-    var theme = useTheme();
-    var bgColor = th.color(appearance ? flagAppearanceToColorMap[appearance] : 'transparent')({ theme: theme });
-    var fontColor = th.color(appearance ? flagAppearanceToFontColorMap[appearance] : 'typoPrimary')({ theme: theme });
+    var theme = (0, styled_components_1.useTheme)();
+    var bgColor = system_1.th.color(appearance ? exports.flagAppearanceToColorMap[appearance] : 'transparent')({ theme: theme });
+    var fontColor = system_1.th.color(appearance ? exports.flagAppearanceToFontColorMap[appearance] : 'typoPrimary')({ theme: theme });
     var name = !!prefix ? "".concat(prefix, "Label") : 'label';
-    return (_jsx(StyledHighlightBox, { "$bgcolor": bgColor, "$fontColor": fontColor, "data-cy": name, children: _jsx(OverflowWrap, { className: size, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(StyledHighlightBox, { "$bgcolor": bgColor, "$fontColor": fontColor, "data-cy": name, children: (0, jsx_runtime_1.jsx)(OverflowWrap, { className: size, children: children }) }));
 };
-export default HighlightBox;
+exports.default = HighlightBox;
 var templateObject_1, templateObject_2;

package/ui/Elements/HighlightBox/index.js

@@ -1,2 +1,7 @@
-import HighlightBox from './HighlightBox';
-export default HighlightBox;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var HighlightBox_1 = __importDefault(require("./HighlightBox"));
+exports.default = HighlightBox_1.default;

package/ui/Elements/Icon/BadgeIcon.js

@@ -1,3 +1,4 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -24,18 +25,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import styled from '@xstyled/styled-components';
-import Icon from './Icon';
-var Badge = styled(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-table;\n  vertical-align: middle;\n  position: absolute;\n  top: -10%;\n  right: -10%;\n  font-size: 60%;\n"], ["\n  display: inline-table;\n  vertical-align: middle;\n  position: absolute;\n  top: -10%;\n  right: -10%;\n  font-size: 60%;\n"])));
-var RelativeWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeIcon = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
+var Icon_1 = __importDefault(require("./Icon"));
+var Badge = (0, styled_components_1.default)(Icon_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-table;\n  vertical-align: middle;\n  position: absolute;\n  top: -10%;\n  right: -10%;\n  font-size: 60%;\n"], ["\n  display: inline-table;\n  vertical-align: middle;\n  position: absolute;\n  top: -10%;\n  right: -10%;\n  font-size: 60%;\n"])));
+var RelativeWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"
     // TODO expad to accet numerical badges
 ])));
 // TODO expad to accet numerical badges
-export var BadgeIcon = function (_a) {
+var BadgeIcon = function (_a) {
     var badge = _a.badge, iconProps = __rest(_a, ["badge"]);
-    var badgeProps = useMemo(function () {
+    var badgeProps = (0, react_1.useMemo)(function () {
         if (badge == 'warning') {
             return {
                 icon: 'warningDual',
@@ -45,7 +51,8 @@ export var BadgeIcon = function (_a) {
         }
         return {};
     }, [badge]);
-    return (_jsxs(RelativeWrap, { children: [_jsx(Badge, __assign({}, badgeProps)), _jsx(Icon, __assign({}, iconProps))] }));
+    return ((0, jsx_runtime_1.jsxs)(RelativeWrap, { children: [(0, jsx_runtime_1.jsx)(Badge, __assign({}, badgeProps)), (0, jsx_runtime_1.jsx)(Icon_1.default, __assign({}, iconProps))] }));
 };
-export default BadgeIcon;
+exports.BadgeIcon = BadgeIcon;
+exports.default = exports.BadgeIcon;
 var templateObject_1, templateObject_2;