@mailstep/design-system 0.6.2-beta.7 → 0.6.2-beta.8

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.js';
-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.js';
-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;