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

package/ui/Elements/HighlightBox/HighlightBox.js

@@ -1,45 +1,19 @@
-"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;
 };
-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) {
+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 $bgcolor = _a.$bgcolor;
     return $bgcolor;
 }, function (_a) {
     var $fontColor = _a.$fontColor;
     return $fontColor;
 });
-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 = {
+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 = {
     neutralBold: 'neutral300',
     neutralSubtle: 'neutral20',
     blueBold: 'blue70',
@@ -59,7 +33,7 @@ exports.flagAppearanceToColorMap = {
     redBold: 'red60',
     redSubtle: 'red20',
 };
-exports.flagAppearanceToFontColorMap = {
+export var flagAppearanceToFontColorMap = {
     neutralBold: 'white',
     neutralSubtle: 'typoPrimary',
     blueBold: 'white',
@@ -81,11 +55,11 @@ exports.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 = (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 theme = useTheme();
+    var bgColor = th.color(appearance ? flagAppearanceToColorMap[appearance] : 'transparent')({ theme: theme });
+    var fontColor = th.color(appearance ? flagAppearanceToFontColorMap[appearance] : 'typoPrimary')({ theme: theme });
     var name = !!prefix ? "".concat(prefix, "Label") : 'label';
-    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 }) }));
+    return (_jsx(StyledHighlightBox, { "$bgcolor": bgColor, "$fontColor": fontColor, "data-cy": name, children: _jsx(OverflowWrap, { className: size, children: children }) }));
 };
-exports.default = HighlightBox;
+export default HighlightBox;
 var templateObject_1, templateObject_2;

package/ui/Elements/HighlightBox/index.js

@@ -1,7 +1,2 @@
-"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;
+import HighlightBox from './HighlightBox.js';
+export default HighlightBox;

package/ui/Elements/Icon/BadgeIcon.js

@@ -1,4 +1,3 @@
-"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;
@@ -25,23 +24,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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"
+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"
     // TODO expad to accet numerical badges
 ])));
 // TODO expad to accet numerical badges
-var BadgeIcon = function (_a) {
+export var BadgeIcon = function (_a) {
     var badge = _a.badge, iconProps = __rest(_a, ["badge"]);
-    var badgeProps = (0, react_1.useMemo)(function () {
+    var badgeProps = useMemo(function () {
         if (badge == 'warning') {
             return {
                 icon: 'warningDual',
@@ -51,8 +45,7 @@ var BadgeIcon = function (_a) {
         }
         return {};
     }, [badge]);
-    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))] }));
+    return (_jsxs(RelativeWrap, { children: [_jsx(Badge, __assign({}, badgeProps)), _jsx(Icon, __assign({}, iconProps))] }));
 };
-exports.BadgeIcon = BadgeIcon;
-exports.default = exports.BadgeIcon;
+export default BadgeIcon;
 var templateObject_1, templateObject_2;