mcr-design-systems 1.0.48 → 1.0.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Icon/generated/ShieldTickIcon.d.ts +38 -0
- package/dist/components/Icon/generated/ShieldTickIcon.js +54 -0
- package/dist/components/Icon/generated/ShieldTickSolidIcon.d.ts +38 -0
- package/dist/components/Icon/generated/ShieldTickSolidIcon.js +54 -0
- package/dist/components/Icon/helper/index.d.ts +1 -1
- package/dist/components/Icon/helper/mapicon.js +5 -3
- package/dist/components/Toast/index.d.ts +2 -2
- package/dist/components/TopNavigationBar/index.js +12 -12
- package/package.json +1 -1
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface ShieldTickIconProps {
|
|
3
|
+
/**
|
|
4
|
+
* Icon size in pixels
|
|
5
|
+
* @default 24
|
|
6
|
+
*/
|
|
7
|
+
size?: number;
|
|
8
|
+
/**
|
|
9
|
+
* Icon color - CSS color value
|
|
10
|
+
* @default 'currentColor'
|
|
11
|
+
*/
|
|
12
|
+
color?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Additional CSS class names
|
|
15
|
+
*/
|
|
16
|
+
className?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Custom styles
|
|
19
|
+
*/
|
|
20
|
+
style?: React.CSSProperties;
|
|
21
|
+
/**
|
|
22
|
+
* Click handler
|
|
23
|
+
*/
|
|
24
|
+
onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
|
|
25
|
+
/**
|
|
26
|
+
* ARIA label for accessibility
|
|
27
|
+
*/
|
|
28
|
+
'aria-label'?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Title attribute for tooltip
|
|
31
|
+
*/
|
|
32
|
+
title?: string;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* ShieldTick icon component
|
|
36
|
+
*/
|
|
37
|
+
export declare const ShieldTickIcon: React.FC<ShieldTickIconProps>;
|
|
38
|
+
export default ShieldTickIcon;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsx as u } from "react/jsx-runtime";
|
|
2
|
+
import f from "react";
|
|
3
|
+
const v = ({
|
|
4
|
+
size: i = 24,
|
|
5
|
+
color: n = "currentColor",
|
|
6
|
+
className: r,
|
|
7
|
+
style: C,
|
|
8
|
+
onClick: o,
|
|
9
|
+
"aria-label": g,
|
|
10
|
+
title: c
|
|
11
|
+
}) => {
|
|
12
|
+
const a = f.useMemo(() => {
|
|
13
|
+
const t = new DOMParser().parseFromString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
14
|
+
<path d="M19 7.2175C19 6.33631 18.9842 6.16036 18.9346 6.03C18.8768 5.87838 18.7829 5.74275 18.6611 5.63547C18.5565 5.54333 18.397 5.46719 17.5723 5.15793L12.211 3.14719C12.0995 3.10541 12.0438 3.08441 12.0029 3.07102C12.0019 3.07068 12.001 3.07035 12 3.07004C11.9991 3.07035 11.9981 3.07068 11.9971 3.07102C11.9562 3.08441 11.9005 3.10541 11.7891 3.14719L6.42775 5.15793C5.60306 5.46719 5.44353 5.54333 5.33888 5.63547C5.21715 5.74275 5.12321 5.87838 5.06544 6.03C5.01584 6.16036 5.00002 6.33631 5.00001 7.2175V11.9997C5.00001 14.0815 6.13939 15.965 7.64162 17.53C9.13269 19.0834 10.8698 20.2057 11.8057 20.7517C11.8629 20.785 11.9046 20.8086 11.9404 20.8288C11.9685 20.8446 11.9872 20.8545 12 20.8611C12.0128 20.8545 12.0315 20.8446 12.0596 20.8288C12.0955 20.8086 12.1372 20.785 12.1944 20.7517C13.1303 20.2057 14.8673 19.0834 16.3584 17.53C17.8606 15.965 19 14.0815 19 11.9997V7.2175ZM14.793 8.2927C15.1835 7.90241 15.8166 7.90241 16.207 8.2927C16.5975 8.68316 16.5974 9.31622 16.207 9.70676L11.707 14.2068C11.3165 14.5973 10.6835 14.5973 10.293 14.2068L8.29298 12.2068L8.22462 12.1316C7.90396 11.7388 7.92675 11.1589 8.29298 10.7927C8.68346 10.4024 9.31657 10.4024 9.70705 10.7927L11 12.0857L14.793 8.2927ZM21 11.9997C21 14.8264 19.4626 17.1836 17.8008 18.9148C16.1282 20.6572 14.2143 21.8877 13.2022 22.4782C13.0123 22.589 12.7601 22.7469 12.419 22.82C12.1597 22.8756 11.8403 22.8756 11.5811 22.82C11.2399 22.7469 10.9877 22.589 10.7979 22.4782C9.7857 21.8877 7.87187 20.6572 6.19923 18.9148C4.53746 17.1836 3.00001 14.8264 3.00001 11.9997V7.2175C3.00001 6.49991 2.98441 5.87591 3.1963 5.31906C3.36958 4.86377 3.65113 4.45756 4.01662 4.13547C4.46364 3.74152 5.05364 3.53687 5.7256 3.28488L11.0869 1.27414C11.2546 1.21126 11.4753 1.12309 11.7139 1.0886C11.8562 1.06802 12.0004 1.06267 12.1436 1.07297L12.2861 1.0886L12.461 1.12375C12.6315 1.16611 12.7873 1.22697 12.9131 1.27414L18.2744 3.28488C18.9464 3.53687 19.5364 3.74152 19.9834 4.13547C20.3489 4.45756 20.6304 4.86377 20.8037 5.31906C21.0156 5.87591 21 6.49991 21 7.2175V11.9997Z" fill="black"/>
|
|
15
|
+
</svg>
|
|
16
|
+
`, "image/svg+xml").querySelector("svg");
|
|
17
|
+
if (!t) return "";
|
|
18
|
+
if (t.setAttribute("width", i.toString()), t.setAttribute("height", i.toString()), t.querySelectorAll(
|
|
19
|
+
"path, circle, rect, polygon, polyline, line, ellipse"
|
|
20
|
+
).forEach((e) => {
|
|
21
|
+
const s = e.getAttribute("fill"), l = e.getAttribute("stroke");
|
|
22
|
+
s && s !== "none" && e.setAttribute("fill", n), l && l !== "none" && e.setAttribute("stroke", n);
|
|
23
|
+
}), r) {
|
|
24
|
+
const e = t.getAttribute("class") || "";
|
|
25
|
+
t.setAttribute(
|
|
26
|
+
"class",
|
|
27
|
+
`${e} ${r}`.trim()
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
return new XMLSerializer().serializeToString(t);
|
|
31
|
+
}, [i, n, r]);
|
|
32
|
+
return /* @__PURE__ */ u(
|
|
33
|
+
"div",
|
|
34
|
+
{
|
|
35
|
+
className: r,
|
|
36
|
+
style: {
|
|
37
|
+
display: "inline-flex",
|
|
38
|
+
alignItems: "center",
|
|
39
|
+
justifyContent: "center",
|
|
40
|
+
flexShrink: 0,
|
|
41
|
+
lineHeight: 0,
|
|
42
|
+
...C
|
|
43
|
+
},
|
|
44
|
+
onClick: o,
|
|
45
|
+
"aria-label": g || "shield-tick icon",
|
|
46
|
+
title: c,
|
|
47
|
+
dangerouslySetInnerHTML: { __html: a }
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
};
|
|
51
|
+
export {
|
|
52
|
+
v as ShieldTickIcon,
|
|
53
|
+
v as default
|
|
54
|
+
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface ShieldTickSolidIconProps {
|
|
3
|
+
/**
|
|
4
|
+
* Icon size in pixels
|
|
5
|
+
* @default 24
|
|
6
|
+
*/
|
|
7
|
+
size?: number;
|
|
8
|
+
/**
|
|
9
|
+
* Icon color - CSS color value
|
|
10
|
+
* @default 'currentColor'
|
|
11
|
+
*/
|
|
12
|
+
color?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Additional CSS class names
|
|
15
|
+
*/
|
|
16
|
+
className?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Custom styles
|
|
19
|
+
*/
|
|
20
|
+
style?: React.CSSProperties;
|
|
21
|
+
/**
|
|
22
|
+
* Click handler
|
|
23
|
+
*/
|
|
24
|
+
onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
|
|
25
|
+
/**
|
|
26
|
+
* ARIA label for accessibility
|
|
27
|
+
*/
|
|
28
|
+
'aria-label'?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Title attribute for tooltip
|
|
31
|
+
*/
|
|
32
|
+
title?: string;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* ShieldTickSolid icon component
|
|
36
|
+
*/
|
|
37
|
+
export declare const ShieldTickSolidIcon: React.FC<ShieldTickSolidIconProps>;
|
|
38
|
+
export default ShieldTickSolidIcon;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsx as u } from "react/jsx-runtime";
|
|
2
|
+
import f from "react";
|
|
3
|
+
const S = ({
|
|
4
|
+
size: i = 24,
|
|
5
|
+
color: l = "currentColor",
|
|
6
|
+
className: r,
|
|
7
|
+
style: o,
|
|
8
|
+
onClick: c,
|
|
9
|
+
"aria-label": g,
|
|
10
|
+
title: C
|
|
11
|
+
}) => {
|
|
12
|
+
const a = f.useMemo(() => {
|
|
13
|
+
const t = new DOMParser().parseFromString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
14
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.714 1.08843C11.9037 1.06102 12.0964 1.06102 12.2861 1.08843C12.5047 1.12002 12.7081 1.19688 12.8697 1.2579L12.9129 1.27422L18.4054 3.33374C19.0232 3.56439 19.5657 3.76694 19.9835 4.13517C20.349 4.45729 20.6306 4.86358 20.8039 5.31893C21.0019 5.83944 21.0011 6.41855 21.0002 7.07799L21 11.9999C21 14.8265 19.4627 17.1831 17.801 18.9143C16.1281 20.6571 14.214 21.888 13.2019 22.4785L13.1609 22.5025C12.9762 22.611 12.7365 22.7517 12.4194 22.8198C12.1599 22.8754 11.8401 22.8754 11.5807 22.8198C11.2635 22.7518 11.0238 22.611 10.8391 22.5025L10.7981 22.4785C9.78602 21.888 7.87198 20.6571 6.19908 18.9143C4.53731 17.1831 3.00002 14.8265 3.00002 11.9999L2.99989 7.078C2.99893 6.41856 2.99809 5.83944 3.19616 5.31893C3.36943 4.86358 3.65099 4.45729 4.01651 4.13517C4.43433 3.76695 4.97687 3.56439 5.59466 3.33374L11.0871 1.27422L11.1304 1.2579C11.2919 1.19688 11.4954 1.12002 11.714 1.08843ZM16.2071 9.70711C16.5976 9.31658 16.5976 8.68342 16.2071 8.29289C15.8166 7.90237 15.1834 7.90237 14.7929 8.29289L11 12.0858L9.70711 10.7929C9.31658 10.4024 8.68342 10.4024 8.29289 10.7929C7.90237 11.1834 7.90237 11.8166 8.29289 12.2071L10.2929 14.2071C10.6834 14.5976 11.3166 14.5976 11.7071 14.2071L16.2071 9.70711Z" fill="black"/>
|
|
15
|
+
</svg>
|
|
16
|
+
`, "image/svg+xml").querySelector("svg");
|
|
17
|
+
if (!t) return "";
|
|
18
|
+
if (t.setAttribute("width", i.toString()), t.setAttribute("height", i.toString()), t.querySelectorAll(
|
|
19
|
+
"path, circle, rect, polygon, polyline, line, ellipse"
|
|
20
|
+
).forEach((e) => {
|
|
21
|
+
const n = e.getAttribute("fill"), s = e.getAttribute("stroke");
|
|
22
|
+
n && n !== "none" && e.setAttribute("fill", l), s && s !== "none" && e.setAttribute("stroke", l);
|
|
23
|
+
}), r) {
|
|
24
|
+
const e = t.getAttribute("class") || "";
|
|
25
|
+
t.setAttribute(
|
|
26
|
+
"class",
|
|
27
|
+
`${e} ${r}`.trim()
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
return new XMLSerializer().serializeToString(t);
|
|
31
|
+
}, [i, l, r]);
|
|
32
|
+
return /* @__PURE__ */ u(
|
|
33
|
+
"div",
|
|
34
|
+
{
|
|
35
|
+
className: r,
|
|
36
|
+
style: {
|
|
37
|
+
display: "inline-flex",
|
|
38
|
+
alignItems: "center",
|
|
39
|
+
justifyContent: "center",
|
|
40
|
+
flexShrink: 0,
|
|
41
|
+
lineHeight: 0,
|
|
42
|
+
...o
|
|
43
|
+
},
|
|
44
|
+
onClick: c,
|
|
45
|
+
"aria-label": g || "shield-tick icon",
|
|
46
|
+
title: C,
|
|
47
|
+
dangerouslySetInnerHTML: { __html: a }
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
};
|
|
51
|
+
export {
|
|
52
|
+
S as ShieldTickSolidIcon,
|
|
53
|
+
S as default
|
|
54
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type IconName = 'activity' | 'activity-heart' | 'alarm-clock' | 'alarm-clock-check' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'align-left' | 'align-right' | 'bank-note-03' | 'bell-01' | 'calendar' | 'camera-01' | 'check' | 'check-circle' | 'chevron-down' | 'chevron-left' | 'chevron-left-double' | 'chevron-right' | 'chevron-right-double' | 'chevron-up' | 'circle' | 'credit-card-02' | 'download-01' | 'eye' | 'eye-off' | 'file-06' | 'filter-funnel-01' | 'folder-shield' | 'headphones-02' | 'heart' | 'help-circle' | 'info-circle' | 'link-external-01' | 'loading-01' | 'log-out-01' | 'message-question-square' | 'minus' | 'plus' | 'refresh-cw-01' | 'search-lg' | 'search-md' | 'user-01' | 'user-03' | 'x-circle' | 'x-close';
|
|
1
|
+
export type IconName = 'activity' | 'activity-heart' | 'alarm-clock' | 'alarm-clock-check' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'align-left' | 'align-right' | 'bank-note-03' | 'bell-01' | 'calendar' | 'camera-01' | 'check' | 'check-circle' | 'chevron-down' | 'chevron-left' | 'chevron-left-double' | 'chevron-right' | 'chevron-right-double' | 'chevron-up' | 'circle' | 'credit-card-02' | 'download-01' | 'eye' | 'eye-off' | 'file-06' | 'filter-funnel-01' | 'folder-shield' | 'headphones-02' | 'heart' | 'help-circle' | 'info-circle' | 'link-external-01' | 'loading-01' | 'log-out-01' | 'message-question-square' | 'minus' | 'plus' | 'refresh-cw-01' | 'search-lg' | 'search-md' | 'shield-tick' | 'user-01' | 'user-03' | 'x-circle' | 'x-close';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const i = {
|
|
2
2
|
"search-lg": () => import("../generated/SearchLgIcon.js"),
|
|
3
3
|
"search-lg-solid": () => import("../generated/SearchLgSolidIcon.js"),
|
|
4
4
|
"activity-heart": () => import("../generated/ActivityHeartIcon.js"),
|
|
@@ -90,8 +90,10 @@ const o = {
|
|
|
90
90
|
"headphones-02": () => import("../generated/Headphones02Icon.js"),
|
|
91
91
|
"headphones-02-solid": () => import("../generated/Headphones02SolidIcon.js"),
|
|
92
92
|
"link-external-01": () => import("../generated/LinkExternal01Icon.js"),
|
|
93
|
-
"link-external-01-solid": () => import("../generated/LinkExternal01SolidIcon.js")
|
|
93
|
+
"link-external-01-solid": () => import("../generated/LinkExternal01SolidIcon.js"),
|
|
94
|
+
"shield-tick": () => import("../generated/ShieldTickIcon.js"),
|
|
95
|
+
"shield-tick-solid": () => import("../generated/ShieldTickSolidIcon.js")
|
|
94
96
|
};
|
|
95
97
|
export {
|
|
96
|
-
|
|
98
|
+
i as MAP_ICON
|
|
97
99
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
1
|
+
import { default as React, ReactNode } from 'react';
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
3
|
import { toastVariants } from './helper/variants';
|
|
4
4
|
import * as ToastPrimitives from '@radix-ui/react-toast';
|
|
@@ -18,7 +18,7 @@ interface ToastProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitiv
|
|
|
18
18
|
/**
|
|
19
19
|
* The description/message content of the toast
|
|
20
20
|
*/
|
|
21
|
-
description?:
|
|
21
|
+
description?: ReactNode;
|
|
22
22
|
/**
|
|
23
23
|
* Custom icon to override the default variant icon
|
|
24
24
|
*/
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx as i, jsxs as t } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
3
|
import { cn as c } from "../../shared/utils/cn.js";
|
|
4
4
|
import { dataTestId as d } from "../../shared/utils/dataTestId.js";
|
|
5
|
-
import { sidebarSection as l, logoSection as m, divider as v, rightSection as
|
|
5
|
+
import { sidebarSection as l, logoSection as m, divider as v, rightSection as h, actionsSectionVariant as N, topNavigationBar as f } from "./helper/variants.js";
|
|
6
6
|
import "./helper/tabNavigation.js";
|
|
7
7
|
function j({
|
|
8
8
|
collapsed: a = !1,
|
|
9
9
|
logo: e,
|
|
10
|
-
className:
|
|
11
|
-
actionsSection:
|
|
10
|
+
className: n,
|
|
11
|
+
actionsSection: o,
|
|
12
12
|
height: s = "56px",
|
|
13
|
-
...
|
|
13
|
+
...r
|
|
14
14
|
}) {
|
|
15
|
-
return /* @__PURE__ */
|
|
15
|
+
return /* @__PURE__ */ i("div", { children: /* @__PURE__ */ t(
|
|
16
16
|
"div",
|
|
17
17
|
{
|
|
18
|
-
className: c(
|
|
18
|
+
className: c(f({ collapsed: a, className: n })),
|
|
19
19
|
...d("top-navigation-bar"),
|
|
20
|
-
...
|
|
21
|
-
style: { height: s, ...
|
|
20
|
+
...r,
|
|
21
|
+
style: { height: s, ...r.style },
|
|
22
22
|
children: [
|
|
23
|
-
/* @__PURE__ */
|
|
23
|
+
/* @__PURE__ */ t("div", { className: l({ collapsed: a }), children: [
|
|
24
24
|
/* @__PURE__ */ i("div", { className: m({ collapsed: a }), children: e }),
|
|
25
25
|
/* @__PURE__ */ i("div", { className: v(), children: /* @__PURE__ */ i("div", { className: "w-[1px] h-full bg-neutral-strong" }) })
|
|
26
26
|
] }),
|
|
27
|
-
/* @__PURE__ */ i("div", { className:
|
|
27
|
+
/* @__PURE__ */ i("div", { className: h(), children: /* @__PURE__ */ i("div", { className: N(), children: o }) })
|
|
28
28
|
]
|
|
29
29
|
}
|
|
30
|
-
);
|
|
30
|
+
) });
|
|
31
31
|
}
|
|
32
32
|
export {
|
|
33
33
|
j as default
|