@mailstep/design-system 0.6.12 → 0.6.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.12",
+  "version": "0.6.13",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/components/gridCells/EnumInCell.d.ts

@@ -4,7 +4,6 @@ type Props = {
     appearanceMap: Record<string, FlagAppearanceType>;
     enumObj: Record<string, () => string>;
     size?: 'default' | 'small' | 'wide' | 'fitContent';
-    onClick?: () => void;
 };
-export declare const EnumInCell: ({ value, enumObj, appearanceMap, size, onClick }: Props) => JSX.Element | null;
+export declare const EnumInCell: ({ value, enumObj, appearanceMap, size }: Props) => JSX.Element | null;
 export {};

package/ui/Blocks/CommonGrid/components/gridCells/EnumInCell.js

@@ -19,7 +19,7 @@ import styled from '@xstyled/styled-components';
 import HighlightBox from '../../../../Elements/HighlightBox';
 var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n"])));
 export var EnumInCell = function (_a) {
-    var value = _a.value, enumObj = _a.enumObj, appearanceMap = _a.appearanceMap, size = _a.size, onClick = _a.onClick;
+    var value = _a.value, enumObj = _a.enumObj, appearanceMap = _a.appearanceMap, size = _a.size;
     var finalLabel = useMemo(function () {
         return enumObj[value] ? enumObj[value]() : value;
     }, [enumObj, value]);
@@ -28,6 +28,6 @@ export var EnumInCell = function (_a) {
     }, [appearanceMap, value]);
     if (!finalLabel)
         return null;
-    return (_jsx(Center, { onClick: onClick, children: _jsx(HighlightBox, __assign({}, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
+    return (_jsx(Center, { children: _jsx(HighlightBox, __assign({ className: "cell" }, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
 };
 var templateObject_1;

package/ui/Elements/HighlightBox/HighlightBox.d.ts

@@ -44,7 +44,8 @@ type HighlightBoxType = {
     children: React.ReactNode;
     appearance: FlagAppearanceType;
     size?: 'default' | 'small' | 'wide' | 'fitContent';
+    className?: string;
     prefix?: string;
 };
-declare const HighlightBox: ({ children, appearance, size, prefix }: HighlightBoxType) => JSX.Element;
+declare const HighlightBox: ({ children, appearance, size, className, prefix }: HighlightBoxType) => JSX.Element;
 export default HighlightBox;

package/ui/Elements/HighlightBox/HighlightBox.js

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 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 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 !important;\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 !important;\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) {
@@ -54,12 +54,12 @@ export var flagAppearanceToFontColorMap = {
     redSubtle: 'red80',
 };
 var HighlightBox = function (_a) {
-    var children = _a.children, appearance = _a.appearance, _b = _a.size, size = _b === void 0 ? 'default' : _b, prefix = _a.prefix;
+    var children = _a.children, appearance = _a.appearance, _b = _a.size, size = _b === void 0 ? 'default' : _b, className = _a.className, 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 name = !!prefix ? "".concat(prefix, "Label") : 'label';
-    return (_jsx(StyledHighlightBox, { "$bgcolor": bgColor, "$fontColor": fontColor, "data-cy": name, children: _jsx(OverflowWrap, { className: size, children: children }) }));
+    return (_jsx(StyledHighlightBox, { "$bgcolor": bgColor, "$fontColor": fontColor, "data-cy": name, children: _jsx(OverflowWrap, { className: size + ' ' + className, children: children }) }));
 };
 export default HighlightBox;
 var templateObject_1, templateObject_2;

package/ui/index.es.js

@@ -37430,7 +37430,7 @@ const Cs = /* @__PURE__ */ ho(j4e), TSe = ({
   font-weight: semiBold;
   .default {
     height: 24px;
-    padding: 2px 8px;
+    padding: 2px 8px !important;
   }
   .small {
     height: 18px;
@@ -37504,14 +37504,15 @@ const Cs = /* @__PURE__ */ ho(j4e), TSe = ({
   children: e,
   appearance: t,
   size: r = "default",
-  prefix: n
+  className: n,
+  prefix: i
 }) => {
-  const i = wt(), o = ne.color(t ? Q4e[t] : "transparent")({
-    theme: i
-  }), l = ne.color(t ? K4e[t] : "typoPrimary")({
-    theme: i
-  }), u = n ? `${n}Label` : "label";
-  return /* @__PURE__ */ b.jsx($4e, { $bgcolor: o, $fontColor: l, "data-cy": u, children: /* @__PURE__ */ b.jsx(q4e, { className: r, children: e }) });
+  const o = wt(), l = ne.color(t ? Q4e[t] : "transparent")({
+    theme: o
+  }), u = ne.color(t ? K4e[t] : "typoPrimary")({
+    theme: o
+  }), c = i ? `${i}Label` : "label";
+  return /* @__PURE__ */ b.jsx($4e, { $bgcolor: l, $fontColor: u, "data-cy": c, children: /* @__PURE__ */ b.jsx(q4e, { className: r + " " + n, children: e }) });
 }, t6e = ae.div`
   display: flex;
   justify-content: flex-start;
@@ -37520,13 +37521,12 @@ const Cs = /* @__PURE__ */ ho(j4e), TSe = ({
   value: e,
   enumObj: t,
   appearanceMap: r,
-  size: n,
-  onClick: i
+  size: n
 }) => {
-  const o = it(() => t[e] ? t[e]() : e, [t, e]), l = it(() => ({
+  const i = it(() => t[e] ? t[e]() : e, [t, e]), o = it(() => ({
     appearance: r[e]
   }), [r, e]);
-  return o ? /* @__PURE__ */ b.jsx(t6e, { onClick: i, children: /* @__PURE__ */ b.jsx(e6e, { ...l, size: n, prefix: "grid", children: o }) }) : null;
+  return i ? /* @__PURE__ */ b.jsx(t6e, { children: /* @__PURE__ */ b.jsx(e6e, { className: "cell", ...o, size: n, prefix: "grid", children: i }) }) : null;
 }, r6e = ae.div`
   text-align: center;
   overflow: hidden;

package/ui/index.umd.js

@@ -2960,7 +2960,7 @@ function print() { __p += __j.call(arguments, '') }
   font-weight: semiBold;
   .default {
     height: 24px;
-    padding: 2px 8px;
+    padding: 2px 8px !important;
   }
   .small {
     height: 18px;
@@ -2988,11 +2988,11 @@ function print() { __p += __j.call(arguments, '') }
 `,U6e=oe.span`
   text-overflow: ellipsis;
   overflow: hidden;
-`,J6e={neutralBold:"neutral300",neutralSubtle:"neutral20",blueBold:"blue70",blueSubtle:"blue20",tealBold:"teal60",tealSubtle:"teal20",greenBold:"green60",greenSubtle:"green20",orangeBold:"orange60",orangeSubtle:"orange20",yellowBold:"yellow60",yellowSubtle:"yellow20",pinkBold:"magenta60",pinkSubtle:"magenta20",purpleBold:"purple60",purpleSubtle:"purple20",redBold:"red60",redSubtle:"red20"},X6e={neutralBold:"white",neutralSubtle:"typoPrimary",blueBold:"white",blueSubtle:"blue80",tealBold:"white",tealSubtle:"teal90",greenBold:"white",greenSubtle:"green80",orangeBold:"white",orangeSubtle:"orange80",yellowBold:"typoPrimary",yellowSubtle:"typoPrimary",pinkBold:"white",pinkSubtle:"magenta80",purpleBold:"white",purpleSubtle:"purple80",redBold:"white",redSubtle:"red80"},q6e=({children:e,appearance:t,size:r="default",prefix:n})=>{const i=vt(),o=ne.color(t?J6e[t]:"transparent")({theme:i}),l=ne.color(t?X6e[t]:"typoPrimary")({theme:i}),u=n?`${n}Label`:"label";return b.jsx(Z6e,{$bgcolor:o,$fontColor:l,"data-cy":u,children:b.jsx(U6e,{className:r,children:e})})},Q6e=oe.div`
+`,J6e={neutralBold:"neutral300",neutralSubtle:"neutral20",blueBold:"blue70",blueSubtle:"blue20",tealBold:"teal60",tealSubtle:"teal20",greenBold:"green60",greenSubtle:"green20",orangeBold:"orange60",orangeSubtle:"orange20",yellowBold:"yellow60",yellowSubtle:"yellow20",pinkBold:"magenta60",pinkSubtle:"magenta20",purpleBold:"purple60",purpleSubtle:"purple20",redBold:"red60",redSubtle:"red20"},X6e={neutralBold:"white",neutralSubtle:"typoPrimary",blueBold:"white",blueSubtle:"blue80",tealBold:"white",tealSubtle:"teal90",greenBold:"white",greenSubtle:"green80",orangeBold:"white",orangeSubtle:"orange80",yellowBold:"typoPrimary",yellowSubtle:"typoPrimary",pinkBold:"white",pinkSubtle:"magenta80",purpleBold:"white",purpleSubtle:"purple80",redBold:"white",redSubtle:"red80"},q6e=({children:e,appearance:t,size:r="default",className:n,prefix:i})=>{const o=vt(),l=ne.color(t?J6e[t]:"transparent")({theme:o}),u=ne.color(t?X6e[t]:"typoPrimary")({theme:o}),c=i?`${i}Label`:"label";return b.jsx(Z6e,{$bgcolor:l,$fontColor:u,"data-cy":c,children:b.jsx(U6e,{className:r+" "+n,children:e})})},Q6e=oe.div`
   display: flex;
   justify-content: flex-start;
   width: 100%;
-`,K6e=({value:e,enumObj:t,appearanceMap:r,size:n,onClick:i})=>{const o=k.useMemo(()=>t[e]?t[e]():e,[t,e]),l=k.useMemo(()=>({appearance:r[e]}),[r,e]);return o?b.jsx(Q6e,{onClick:i,children:b.jsx(q6e,{...l,size:n,prefix:"grid",children:o})}):null},$6e=oe.div`
+`,K6e=({value:e,enumObj:t,appearanceMap:r,size:n})=>{const i=k.useMemo(()=>t[e]?t[e]():e,[t,e]),o=k.useMemo(()=>({appearance:r[e]}),[r,e]);return i?b.jsx(Q6e,{children:b.jsx(q6e,{className:"cell",...o,size:n,prefix:"grid",children:i})}):null},$6e=oe.div`
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;