@mailstep/design-system 0.6.49 → 0.6.50

package/package.json

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

package/ui/Elements/Badge/Badge.d.ts

@@ -6,6 +6,7 @@ export type Props = {
     size?: 'small' | 'default';
     childWidth?: string | number;
     topPosition?: boolean;
+    horizontalPosition?: 'middle' | 'right';
 };
-declare const Badge: ({ children, color, size, label, childWidth, topPosition }: Props) => JSX.Element;
+declare const Badge: ({ children, color, size, label, childWidth, topPosition, horizontalPosition }: Props) => JSX.Element;
 export default Badge;

package/ui/Elements/Badge/Badge.js

@@ -22,8 +22,8 @@ var Circle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateOb
     var topPosition = _a.topPosition;
     return topPosition && '-15%';
 }, function (_a) {
-    var topPosition = _a.topPosition;
-    return (topPosition ? '50%' : '100%');
+    var horizontalPosition = _a.horizontalPosition;
+    return (horizontalPosition === 'middle' ? '50%' : '100%');
 });
 var RelativeWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  ", ";\n"], ["\n  position: relative;\n  ", ";\n"])), function (_a) {
     var width = _a.width;
@@ -31,7 +31,7 @@ var RelativeWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemp
         ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          width: ", ";\n        "], ["\n          width: ", ";\n        "])), width) : '';
 });
 var Badge = function (_a) {
-    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'red1' : _b, _c = _a.size, size = _c === void 0 ? 'default' : _c, label = _a.label, childWidth = _a.childWidth, topPosition = _a.topPosition;
+    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'red1' : _b, _c = _a.size, size = _c === void 0 ? 'default' : _c, label = _a.label, childWidth = _a.childWidth, topPosition = _a.topPosition, _d = _a.horizontalPosition, horizontalPosition = _d === void 0 ? 'middle' : _d;
     var theme = useTheme();
     var themeColor = th.color(color)({ theme: theme });
     var badgeLabel = useMemo(function () {
@@ -40,7 +40,7 @@ var Badge = function (_a) {
     if (!label || (typeof label === 'number' && label <= 0)) {
         return _jsx(_Fragment, { children: children });
     }
-    return (_jsxs(RelativeWrap, { width: childWidth, children: [_jsx(Circle, { color: themeColor, size: size, topPosition: topPosition, children: _jsx("div", { className: "label", children: badgeLabel }) }), children] }));
+    return (_jsxs(RelativeWrap, { width: childWidth, children: [_jsx(Circle, { color: themeColor, size: size, topPosition: topPosition, horizontalPosition: horizontalPosition, children: _jsx("div", { className: "label", children: badgeLabel }) }), children] }));
 };
 export default Badge;
 var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/Badge/stories/Badge.stories.d.ts

@@ -2,12 +2,12 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ children, color, size, label, childWidth, topPosition }: import("../Badge").Props) => JSX.Element;
+    component: ({ children, color, size, label, childWidth, topPosition, horizontalPosition }: import("../Badge").Props) => JSX.Element;
     tags: string[];
     argTypes: {};
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const DefaultWithLabel: Story;
+export declare const DefaultWithLabelAndRightHorizontalPosition: Story;
 export declare const SmallWithLabel: Story;

package/ui/Elements/Badge/stories/Badge.stories.js

@@ -3,23 +3,24 @@ var meta = {
     title: 'Elements/Badge',
     component: Badge,
     tags: ['autodocs'],
-    argTypes: {},
+    argTypes: {}
 };
 export default meta;
 export var Default = {
     args: {
         children: '😀',
         size: 'default',
-        childWidth: '30px',
-    },
+        childWidth: '30px'
+    }
 };
-export var DefaultWithLabel = {
+export var DefaultWithLabelAndRightHorizontalPosition = {
     args: {
         children: '😀',
         label: '10',
         size: 'default',
-        childWidth: '30px',
-    },
+        horizontalPosition: 'right',
+        childWidth: '30px'
+    }
 };
 export var SmallWithLabel = {
     args: {
@@ -28,6 +29,6 @@ export var SmallWithLabel = {
         size: 'small',
         color: 'darkGreen',
         topPosition: true,
-        childWidth: '50px',
-    },
+        childWidth: '30px'
+    }
 };

package/ui/index.es.js

@@ -16912,8 +16912,8 @@ const Hle = Ti(ft.div)`
   topPosition: e
 }) => e && "-15%"};
   left: ${({
-  topPosition: e
-}) => e ? "50%" : "100%"};
+  horizontalPosition: e
+}) => e === "middle" ? "50%" : "100%"};
   z-index: 1;
 `, nce = ie.div`
   position: relative;
@@ -16928,13 +16928,14 @@ const Hle = Ti(ft.div)`
   size: r = "default",
   label: n,
   childWidth: i,
-  topPosition: o
+  topPosition: o,
+  horizontalPosition: l = "middle"
 }) => {
-  const l = Ct(), c = te.color(t)({
-    theme: l
-  }), u = at(() => typeof n == "number" && n >= 100 ? "99+" : n, [n]);
+  const c = Ct(), u = te.color(t)({
+    theme: c
+  }), f = at(() => typeof n == "number" && n >= 100 ? "99+" : n, [n]);
   return !n || typeof n == "number" && n <= 0 ? /* @__PURE__ */ b.jsx(b.Fragment, { children: e }) : /* @__PURE__ */ b.jsxs(nce, { width: i, children: [
-    /* @__PURE__ */ b.jsx(rce, { color: c, size: r, topPosition: o, children: /* @__PURE__ */ b.jsx("div", { className: "label", children: u }) }),
+    /* @__PURE__ */ b.jsx(rce, { color: u, size: r, topPosition: o, horizontalPosition: l, children: /* @__PURE__ */ b.jsx("div", { className: "label", children: f }) }),
     e
   ] });
 }, ice = ie(ft.div)`

package/ui/index.umd.js

@@ -1665,14 +1665,14 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   font-weight: semiBold;
   position: absolute;
   top: ${({topPosition:e})=>e&&"-15%"};
-  left: ${({topPosition:e})=>e?"50%":"100%"};
+  left: ${({horizontalPosition:e})=>e==="middle"?"50%":"100%"};
   z-index: 1;
 `,Jue=ae.div`
   position: relative;
   ${({width:e})=>e?wt`
           width: ${e};
         `:""};
-`,Xue=({children:e,color:t="red1",size:r="default",label:n,childWidth:i,topPosition:o})=>{const l=mt(),u=re.color(t)({theme:l}),c=I.useMemo(()=>typeof n=="number"&&n>=100?"99+":n,[n]);return!n||typeof n=="number"&&n<=0?b.jsx(b.Fragment,{children:e}):b.jsxs(Jue,{width:i,children:[b.jsx(Uue,{color:u,size:r,topPosition:o,children:b.jsx("div",{className:"label",children:c})}),e]})},que=ae(ot.div)`
+`,Xue=({children:e,color:t="red1",size:r="default",label:n,childWidth:i,topPosition:o,horizontalPosition:l="middle"})=>{const u=mt(),c=re.color(t)({theme:u}),f=I.useMemo(()=>typeof n=="number"&&n>=100?"99+":n,[n]);return!n||typeof n=="number"&&n<=0?b.jsx(b.Fragment,{children:e}):b.jsxs(Jue,{width:i,children:[b.jsx(Uue,{color:c,size:r,topPosition:o,horizontalPosition:l,children:b.jsx("div",{className:"label",children:f})}),e]})},que=ae(ot.div)`
   display: flex;
   box-sizing: border-box;
   flex-direction: column;