@pnp/spfx-controls-react 3.24.0-beta.2180374 → 3.24.0-beta.2252413

package/lib/controls/KPIControl/index.js

@@ -0,0 +1,2 @@
+export * from "./Kpis";
+//# sourceMappingURL=index.js.map

package/lib/controls/KPIControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/controls/KPIControl/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/lib/controls/KPIControl/showError/IErrorDisplayProps.d.ts

@@ -0,0 +1,5 @@
+export interface IErrorDisplayProps {
+    title?: string;
+    message: string;
+}
+//# sourceMappingURL=IErrorDisplayProps.d.ts.map

package/lib/controls/KPIControl/showError/IErrorDisplayProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IErrorDisplayProps.d.ts","sourceRoot":"","sources":["../../../../src/controls/KPIControl/showError/IErrorDisplayProps.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB"}

package/lib/controls/KPIControl/showError/IErrorDisplayProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IErrorDisplayProps.js.map

package/lib/controls/KPIControl/showError/IErrorDisplayProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IErrorDisplayProps.js","sourceRoot":"","sources":["../../../../src/controls/KPIControl/showError/IErrorDisplayProps.tsx"],"names":[],"mappings":""}

package/lib/controls/KPIControl/showError/ShowError.d.ts

@@ -0,0 +1,5 @@
+import { IErrorDisplayProps } from "./IErrorDisplayProps";
+import React from "react";
+export declare const ShowError: React.FC<IErrorDisplayProps>;
+export default ShowError;
+//# sourceMappingURL=ShowError.d.ts.map

package/lib/controls/KPIControl/showError/ShowError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowError.d.ts","sourceRoot":"","sources":["../../../../src/controls/KPIControl/showError/ShowError.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAclD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/controls/KPIControl/showError/ShowError.js

@@ -0,0 +1,17 @@
+import { Body1, Card, Title3 } from "@fluentui/react-components";
+import { ErrorCircleRegular } from "@fluentui/react-icons";
+import React from "react";
+import { Stack } from "../stack";
+import { useShowErrorStyles } from "./useShowErrorStyles";
+export var ShowError = function (_a) {
+    var title = _a.title, message = _a.message;
+    var styles = useShowErrorStyles();
+    return (React.createElement(Card, { className: styles.container },
+        React.createElement(Stack, { gap: "l", alignItems: "center" },
+            React.createElement(ErrorCircleRegular, { className: styles.icon }),
+            React.createElement(Stack, { gap: "s", alignItems: "center" },
+                React.createElement(Title3, { className: styles.title }, title),
+                React.createElement(Body1, { className: styles.message }, message)))));
+};
+export default ShowError;
+//# sourceMappingURL=ShowError.js.map

package/lib/controls/KPIControl/showError/ShowError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowError.js","sourceRoot":"","sources":["../../../../src/controls/KPIControl/showError/ShowError.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,CAAC,IAAM,SAAS,GAAiC,UAAC,EAAkB;QAAhB,KAAK,WAAA,EAAE,OAAO,aAAA;IACtE,IAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IACpC,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS;QAC/B,oBAAC,KAAK,IAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ;YAChC,oBAAC,kBAAkB,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;YAE9C,oBAAC,KAAK,IAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ;gBAChC,oBAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAU;gBACjD,oBAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAS,CAC7C,CACF,CACH,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/controls/KPIControl/showError/index.d.ts

@@ -0,0 +1,4 @@
+export * from './IErrorDisplayProps';
+export * from './ShowError';
+export * from './useShowErrorStyles';
+//# sourceMappingURL=index.d.ts.map

package/lib/controls/KPIControl/showError/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/controls/KPIControl/showError/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC"}

package/lib/controls/KPIControl/showError/index.js

@@ -0,0 +1,4 @@
+export * from './IErrorDisplayProps';
+export * from './ShowError';
+export * from './useShowErrorStyles';
+//# sourceMappingURL=index.js.map

package/lib/controls/KPIControl/showError/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/controls/KPIControl/showError/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC"}

package/lib/controls/KPIControl/showError/useShowErrorStyles.d.ts

@@ -0,0 +1,9 @@
+interface INewUseShowErrorStyles {
+    container: string;
+    icon: string;
+    title: string;
+    message: string;
+}
+export declare const useShowErrorStyles: () => INewUseShowErrorStyles;
+export {};
+//# sourceMappingURL=useShowErrorStyles.d.ts.map

package/lib/controls/KPIControl/showError/useShowErrorStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShowErrorStyles.d.ts","sourceRoot":"","sources":["../../../../src/controls/KPIControl/showError/useShowErrorStyles.tsx"],"names":[],"mappings":"AAIA,UAAU,sBAAsB;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,QAAO,sBAwCrC,CAAC"}

package/lib/controls/KPIControl/showError/useShowErrorStyles.js

@@ -0,0 +1,42 @@
+import { css } from "@emotion/css";
+import { tokens } from "@fluentui/react-components";
+import { useMemo } from "react";
+export var useShowErrorStyles = function () {
+    return useMemo(function () { return ({
+        container: css({
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: "200px",
+            textAlign: "center",
+            backgroundColor: tokens.colorNeutralBackground1,
+            border: "1px solid ".concat(tokens.colorNeutralStroke2),
+            borderRadius: tokens.borderRadiusLarge,
+            padding: "".concat(tokens.spacingVerticalXXL, " ").concat(tokens.spacingHorizontalXXL),
+            boxShadow: tokens.shadow4,
+            maxWidth: "500px",
+            margin: "20px auto",
+        }),
+        icon: css({
+            fontSize: "48px",
+            color: tokens.colorPaletteRedForeground1,
+            animation: "pulse 2s infinite",
+            "@keyframes pulse": {
+                "0%": { transform: "scale(1)" },
+                "50%": { transform: "scale(1.05)" },
+                "100%": { transform: "scale(1)" },
+            },
+        }),
+        title: css({
+            color: tokens.colorNeutralForeground1,
+            fontWeight: tokens.fontWeightSemibold,
+            textAlign: "center",
+        }),
+        message: css({
+            color: tokens.colorNeutralForeground2,
+            textAlign: "center",
+            lineHeight: tokens.lineHeightBase400,
+        }),
+    }); }, []);
+};
+//# sourceMappingURL=useShowErrorStyles.js.map

package/lib/controls/KPIControl/showError/useShowErrorStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShowErrorStyles.js","sourceRoot":"","sources":["../../../../src/controls/KPIControl/showError/useShowErrorStyles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAShC,MAAM,CAAC,IAAM,kBAAkB,GAAG;IAChC,OAAO,OAAO,CACZ,cAAM,OAAA,CAAC;QACL,SAAS,EAAE,GAAG,CAAC;YACb,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,SAAS,EAAE,OAAO;YAClB,SAAS,EAAE,QAAQ;YACnB,eAAe,EAAE,MAAM,CAAC,uBAAuB;YAC/C,MAAM,EAAE,oBAAa,MAAM,CAAC,mBAAmB,CAAE;YACjD,YAAY,EAAE,MAAM,CAAC,iBAAiB;YACtC,OAAO,EAAE,UAAG,MAAM,CAAC,kBAAkB,cAAI,MAAM,CAAC,oBAAoB,CAAE;YACtE,SAAS,EAAE,MAAM,CAAC,OAAO;YACzB,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,WAAW;SACpB,CAAC;QACF,IAAI,EAAE,GAAG,CAAC;YACR,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,MAAM,CAAC,0BAA0B;YACxC,SAAS,EAAE,mBAAmB;YAC9B,kBAAkB,EAAE;gBAClB,IAAI,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE;gBAC/B,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;gBACnC,MAAM,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE;aAClC;SACF,CAAC;QACF,KAAK,EAAE,GAAG,CAAC;YACT,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,UAAU,EAAE,MAAM,CAAC,kBAAkB;YACrC,SAAS,EAAE,QAAQ;SACpB,CAAC;QACF,OAAO,EAAE,GAAG,CAAC;YACX,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,MAAM,CAAC,iBAAiB;SACrC,CAAC;KACH,CAAC,EAnCI,CAmCJ,EACF,EAAE,CACH,CAAC;AACJ,CAAC,CAAC"}

package/lib/controls/KPIControl/stack/IStackProps.d.ts

@@ -0,0 +1,77 @@
+import React from "react";
+/**
+ * StackProps interface defines the properties for the Stack component.
+ */
+export interface IStackProps {
+    /**
+     * Direction of stacking: horizontal (row) or vertical (column).
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Flexbox justify-content property.
+     */
+    justifyContent?: React.CSSProperties["justifyContent"];
+    /**
+     * Flexbox align-items property.
+     */
+    alignItems?: React.CSSProperties["alignItems"];
+    /**
+     * Gap between items (can be predefined or custom value like '20px').
+     */
+    gap?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+    /**
+     * Column gap between items (custom value or predefined).
+     */
+    columnGap?: string;
+    /**
+     * Row gap between items (custom value or predefined).
+     */
+    rowGap?: string;
+    /**
+     * Predefined margin sizes (shorthand) or custom value.
+     */
+    margin?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+    /**
+     * Predefined padding sizes (shorthand) or custom value.
+     */
+    padding?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+    /**
+     * Individual margin properties (predefined or custom value).
+     */
+    marginTop?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+    marginBottom?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+    marginLeft?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+    marginRight?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+    /**
+     * Individual padding properties (predefined or custom value).
+     */
+    paddingTop?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+    paddingBottom?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+    paddingLeft?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+    paddingRight?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+    /**
+     * Width of the stack.
+     */
+    width?: React.CSSProperties["width"];
+    height?: React.CSSProperties["height"];
+    /**
+     * Enable or disable wrapping of items.
+     */
+    wrap?: boolean;
+    /**
+     * Child components to be rendered inside the stack.
+     */
+    children: React.ReactNode;
+    /**
+     * Additional inline styles.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Additional class names for the stack.
+     */
+    className?: string;
+    overflow?: React.CSSProperties["overflow"];
+    /** background Color */
+    background?: React.CSSProperties["backgroundColor"];
+}
+//# sourceMappingURL=IStackProps.d.ts.map

package/lib/controls/KPIControl/stack/IStackProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IStackProps.d.ts","sourceRoot":"","sources":["../../../../src/controls/KPIControl/stack/IStackProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAEvD;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAE/C;;OAEG;IACH,GAAG,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAErD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAExD;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3D,YAAY,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC9D,UAAU,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC5D,WAAW,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAE7D;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC5D,aAAa,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC/D,WAAW,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC7D,YAAY,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAE9D;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAGrC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAEvC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC3C,uBAAuB;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACrD"}

package/lib/controls/KPIControl/stack/IStackProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IStackProps.js.map

package/lib/controls/KPIControl/stack/IStackProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IStackProps.js","sourceRoot":"","sources":["../../../../src/controls/KPIControl/stack/IStackProps.tsx"],"names":[],"mappings":""}

package/lib/controls/KPIControl/stack/Stack.d.ts

@@ -0,0 +1,9 @@
+import { IStackProps } from "./IStackProps";
+import React from "react";
+/**
+ * Stack component provides a flexible layout using Flexbox.
+ * It allows stacking child components either horizontally or vertically with predefined spacing options.
+ */
+export declare const Stack: React.FC<IStackProps>;
+export default Stack;
+//# sourceMappingURL=Stack.d.ts.map

package/lib/controls/KPIControl/stack/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/controls/KPIControl/stack/Stack.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4EvC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/controls/KPIControl/stack/Stack.js

@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { mergeClasses, tokens } from "@fluentui/react-components";
+import React from "react";
+import { css } from "@emotion/css";
+/**
+ * Mapping of predefined sizes to Fluent UI tokens.
+ */
+var sizeMap = {
+    xs: tokens.spacingHorizontalXS,
+    s: tokens.spacingHorizontalS,
+    m: tokens.spacingHorizontalM,
+    l: tokens.spacingHorizontalL,
+    xl: tokens.spacingHorizontalXL,
+    xxl: tokens.spacingHorizontalXXL,
+};
+/**
+ * Stack component provides a flexible layout using Flexbox.
+ * It allows stacking child components either horizontally or vertically with predefined spacing options.
+ */
+export var Stack = React.memo(function (_a) {
+    var _b = _a.direction, direction = _b === void 0 ? "vertical" : _b, _c = _a.justifyContent, justifyContent = _c === void 0 ? "flex-start" : _c, _d = _a.alignItems, alignItems = _d === void 0 ? "stretch" : _d, gap = _a.gap, columnGap = _a.columnGap, rowGap = _a.rowGap, margin = _a.margin, padding = _a.padding, marginTop = _a.marginTop, marginBottom = _a.marginBottom, marginLeft = _a.marginLeft, marginRight = _a.marginRight, paddingTop = _a.paddingTop, paddingBottom = _a.paddingBottom, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight, width = _a.width, height = _a.height, _e = _a.wrap, wrap = _e === void 0 ? false : _e, children = _a.children, style = _a.style, className = _a.className, overflow = _a.overflow, background = _a.background;
+    var stackStyle = css(__assign({ display: "flex", flexDirection: direction === "horizontal" ? "row" : "column", justifyContent: justifyContent, alignItems: alignItems, gap: gap && sizeMap[gap] ? sizeMap[gap] : gap, columnGap: columnGap && sizeMap[columnGap] ? sizeMap[columnGap] : columnGap, rowGap: rowGap && sizeMap[rowGap] ? sizeMap[rowGap] : rowGap, margin: margin && sizeMap[margin] ? sizeMap[margin] : margin, padding: padding && sizeMap[padding] ? sizeMap[padding] : padding, marginTop: marginTop && sizeMap[marginTop] ? sizeMap[marginTop] : marginTop, marginBottom: marginBottom && sizeMap[marginBottom]
+            ? sizeMap[marginBottom]
+            : marginBottom, marginLeft: marginLeft && sizeMap[marginLeft] ? sizeMap[marginLeft] : marginLeft, marginRight: marginRight && sizeMap[marginRight]
+            ? sizeMap[marginRight]
+            : marginRight, paddingTop: paddingTop && sizeMap[paddingTop] ? sizeMap[paddingTop] : paddingTop, paddingBottom: paddingBottom && sizeMap[paddingBottom]
+            ? sizeMap[paddingBottom]
+            : paddingBottom, paddingLeft: paddingLeft && sizeMap[paddingLeft]
+            ? sizeMap[paddingLeft]
+            : paddingLeft, paddingRight: paddingRight && sizeMap[paddingRight]
+            ? sizeMap[paddingRight]
+            : paddingRight, width: width, height: height, overflow: overflow, flexWrap: wrap ? "wrap" : "nowrap", backgroundColor: background }, style));
+    return (React.createElement("div", { className: mergeClasses(className, stackStyle) }, children));
+});
+export default Stack;
+//# sourceMappingURL=Stack.js.map

package/lib/controls/KPIControl/stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../../src/controls/KPIControl/stack/Stack.tsx"],"names":[],"mappings":"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"}

package/lib/controls/KPIControl/stack/index.d.ts

@@ -0,0 +1,3 @@
+export * from './IStackProps';
+export * from './Stack';
+//# sourceMappingURL=index.d.ts.map

package/lib/controls/KPIControl/stack/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/controls/KPIControl/stack/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/lib/controls/KPIControl/stack/index.js

@@ -0,0 +1,3 @@
+export * from './IStackProps';
+export * from './Stack';
+//# sourceMappingURL=index.js.map

package/lib/controls/KPIControl/stack/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/controls/KPIControl/stack/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/lib/controls/KPIControl/useKpiStyles.d.ts

@@ -0,0 +1,33 @@
+interface IKpiStyles {
+    iconContainer: string | undefined;
+    card: string;
+    description: string;
+    footerMetric: string;
+    footerIcon: string;
+    footerLabel: string;
+    footerValue: string;
+    footerDivider: string;
+    glowBlob: string;
+    glowBlobSuccess: string;
+    glowBlobError: string;
+    headerActionBadge: string;
+    kpiContainer: string;
+    noKpiCard: string;
+    noKpiCardContainer: string;
+    noKpiBackgroundOrb1: string;
+    noKpiBackgroundOrb2: string;
+    noKpiIconContainer: string;
+    noKpiIcon: string;
+    noKpiSparkle1: string;
+    noKpiSparkle2: string;
+    noKpiTitle: string;
+    noKpiSubtitle: string;
+    noKpiHighlight: string;
+    noKpiButtonContainer: string;
+    noKpiButton: string;
+    noKpiDecorativeLine: string;
+    footerGrid: string;
+}
+export declare const useKpiStyles: () => IKpiStyles;
+export {};
+//# sourceMappingURL=useKpiStyles.d.ts.map

package/lib/controls/KPIControl/useKpiStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKpiStyles.d.ts","sourceRoot":"","sources":["../../../src/controls/KPIControl/useKpiStyles.tsx"],"names":[],"mappings":"AAgBA,UAAU,UAAU;IAClB,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAElB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,QAAO,UAsQ/B,CAAC"}

package/lib/controls/KPIControl/useKpiStyles.js

@@ -0,0 +1,271 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css, keyframes } from "@emotion/css";
+import { tokens } from "@fluentui/react-components";
+// Animations for NoKpisCard
+var floatAnimation = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0%, 100% { transform: translateY(0px); }\n  50% { transform: translateY(-8px); }\n"], ["\n  0%, 100% { transform: translateY(0px); }\n  50% { transform: translateY(-8px); }\n"])));
+var shimmerAnimation = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% { background-position: -200% center; }\n  100% { background-position: 200% center; }\n"], ["\n  0% { background-position: -200% center; }\n  100% { background-position: 200% center; }\n"])));
+export var useKpiStyles = function () {
+    var styles = {
+        card: css({
+            width: "100%",
+            height: "310px",
+            borderRadius: 10,
+            background: tokens.colorNeutralBackground1,
+            border: "1px solid ".concat(tokens.colorNeutralStroke1),
+            boxShadow: tokens.shadow8,
+            overflow: "visible",
+            position: "relative",
+            padding: "0px 15px !important",
+            transition: "transform 0.25s ease, box-shadow 0.25s ease",
+            "&:hover, &:focus-within": {
+                zIndex: 10,
+                transform: "translateY(-2px)",
+                boxShadow: tokens.shadow16, // deeper on hover
+            },
+        }),
+        description: css({
+            fontSize: tokens.fontSizeBase300,
+            color: tokens.colorNeutralForeground4,
+            lineHeight: tokens.lineHeightBase400,
+            position: "relative",
+            zIndex: 1,
+        }),
+        footerMetric: css({
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: tokens.spacingVerticalXXS,
+        }),
+        footerIcon: css({
+            color: tokens.colorNeutralForeground3,
+            fontSize: tokens.fontSizeBase300,
+        }),
+        footerLabel: css({
+            fontSize: tokens.fontSizeBase100,
+            color: tokens.colorNeutralForeground3,
+            textTransform: "uppercase",
+            letterSpacing: "0.8px",
+            fontWeight: tokens.fontWeightMedium,
+        }),
+        footerValue: css({
+            fontSize: tokens.fontSizeBase400,
+            fontWeight: tokens.fontWeightSemibold,
+            color: tokens.colorNeutralForeground2,
+        }),
+        footerDivider: css({
+            height: "32px",
+            borderColor: tokens.colorNeutralStroke1,
+        }),
+        glowBlob: css({
+            position: "absolute",
+            top: "-60px",
+            right: "-60px",
+            width: "180px",
+            height: "180px",
+            borderRadius: "50%",
+            pointerEvents: "none",
+            zIndex: 0,
+            filter: "blur(40px)",
+        }),
+        glowBlobSuccess: css({
+            position: "absolute",
+            top: "-40px",
+            right: "-40px",
+            width: "160px",
+            height: "160px",
+            borderRadius: "50%",
+            pointerEvents: "none",
+            zIndex: 0,
+            background: "radial-gradient(circle, ".concat(tokens.colorPaletteLightGreenBackground2, " 0%, transparent 70%)"),
+            opacity: 0.7,
+            filter: "blur(20px)",
+        }),
+        glowBlobError: css({
+            position: "absolute",
+            top: "-40px",
+            right: "-40px",
+            width: "160px",
+            height: "160px",
+            borderRadius: "50%",
+            pointerEvents: "none",
+            zIndex: 0,
+            background: "radial-gradient(circle, ".concat(tokens.colorPaletteRedBackground2, " 0%, transparent 70%)"),
+            opacity: 0.6,
+            filter: "blur(20px)",
+        }),
+        headerActionBadge: css({
+            minWidth: "32px",
+            height: "32px",
+            borderRadius: "50% !important",
+            background: "".concat(tokens.colorNeutralBackground3, " !important"), // subtle circle bg
+            border: "none !important",
+            padding: "0 !important",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }),
+        kpiContainer: css({
+            width: "100%",
+            backgroundColor: tokens.colorNeutralBackground2,
+            borderRadius: 8,
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 280px), 1fr))",
+            gap: 16,
+            padding: 16,
+        }),
+        iconContainer: css({
+            width: 48,
+            height: 48,
+            borderRadius: 8,
+            display: "grid",
+            placeItems: "center",
+            background: tokens.colorNeutralBackgroundInverted,
+        }),
+        noKpiCard: css({
+            width: 280,
+            minHeight: 160,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }),
+        // NoKpisCard styles
+        noKpiCardContainer: css({
+            width: "100%",
+            minWidth: "280px",
+            minHeight: "280px",
+            borderRadius: "16px",
+            background: "linear-gradient(135deg, ".concat(tokens.colorNeutralBackground1, " 0%, ").concat(tokens.colorNeutralBackground3, " 100%)"),
+            border: "1px solid ".concat(tokens.colorNeutralStroke1),
+            boxShadow: tokens.shadow16,
+            overflow: "hidden",
+            position: "relative",
+            padding: "32px",
+            transition: "transform 0.3s ease, box-shadow 0.3s ease",
+            "&:hover": {
+                transform: "translateY(-4px)",
+                boxShadow: tokens.shadow28,
+            },
+        }),
+        noKpiBackgroundOrb1: css({
+            position: "absolute",
+            top: "0px",
+            right: "0px",
+            width: "180px",
+            height: "180px",
+            borderRadius: "50%",
+            background: "radial-gradient(circle, ".concat(tokens.colorBrandBackground2, " 0%, transparent 70%)"),
+            opacity: 0.8,
+            pointerEvents: "none",
+            filter: "blur(25px)",
+            transform: "translate(30%, -30%)",
+        }),
+        noKpiBackgroundOrb2: css({
+            position: "absolute",
+            bottom: "-30px",
+            left: "-30px",
+            width: "120px",
+            height: "120px",
+            borderRadius: "50%",
+            background: "radial-gradient(circle, ".concat(tokens.colorPaletteLavenderBackground2, " 0%, transparent 70%)"),
+            opacity: 0.5,
+            pointerEvents: "none",
+            filter: "blur(20px)",
+        }),
+        noKpiIconContainer: css({
+            width: "80px",
+            height: "80px",
+            borderRadius: "20px",
+            background: "linear-gradient(135deg, ".concat(tokens.colorBrandBackground, " 0%, ").concat(tokens.colorBrandBackground2, " 100%)"),
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: "0 8px 24px ".concat(tokens.colorBrandBackground, "40"),
+            animation: "".concat(floatAnimation, " 3s ease-in-out infinite"),
+            position: "relative",
+            zIndex: 1,
+        }),
+        noKpiIcon: css({
+            fontSize: "36px",
+            color: tokens.colorNeutralForegroundOnBrand,
+        }),
+        noKpiSparkle1: css({
+            position: "absolute",
+            top: "-8px",
+            right: "-8px",
+            color: tokens.colorPaletteYellowForeground1,
+            fontSize: "20px",
+            animation: "".concat(floatAnimation, " 2s ease-in-out infinite 0.5s"),
+        }),
+        noKpiSparkle2: css({
+            position: "absolute",
+            bottom: "-4px",
+            left: "-8px",
+            color: tokens.colorPaletteLavenderForeground2,
+            fontSize: "16px",
+            animation: "".concat(floatAnimation, " 2.5s ease-in-out infinite"),
+        }),
+        noKpiTitle: css({
+            fontSize: "22px",
+            fontWeight: tokens.fontWeightSemibold,
+            color: tokens.colorNeutralForeground1,
+            marginTop: "24px",
+            textAlign: "center",
+            position: "relative",
+            zIndex: 1,
+        }),
+        noKpiSubtitle: css({
+            fontSize: "14px",
+            color: tokens.colorNeutralForeground3,
+            textAlign: "center",
+            lineHeight: "1.6",
+            maxWidth: "320px",
+            marginTop: "8px",
+            position: "relative",
+            zIndex: 1,
+        }),
+        noKpiHighlight: css({
+            background: "linear-gradient(90deg, ".concat(tokens.colorBrandForeground1, ", ").concat(tokens.colorPaletteLavenderForeground2, ", ").concat(tokens.colorBrandForeground1, ")"),
+            backgroundSize: "200% auto",
+            WebkitBackgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            backgroundClip: "text",
+            fontWeight: tokens.fontWeightSemibold,
+            animation: "".concat(shimmerAnimation, " 3s linear infinite"),
+        }),
+        noKpiButtonContainer: css({
+            marginTop: "24px",
+            position: "relative",
+            zIndex: 1,
+        }),
+        noKpiButton: css({
+            borderRadius: "10px",
+            padding: "10px 20px",
+            fontWeight: tokens.fontWeightSemibold,
+            transition: "transform 0.2s ease",
+            "&:hover": {
+                transform: "scale(1.02)",
+            },
+        }),
+        noKpiDecorativeLine: css({
+            width: "60px",
+            height: "4px",
+            borderRadius: "2px",
+            background: "linear-gradient(90deg, ".concat(tokens.colorBrandBackground, ", ").concat(tokens.colorPaletteLavenderBackground2, ")"),
+            marginTop: "16px",
+            position: "relative",
+            zIndex: 1,
+        }),
+        footerGrid: css({
+            width: "100%",
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fit, minmax(80px, 1fr))",
+            alignItems: "center",
+        }),
+    };
+    return styles;
+};
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=useKpiStyles.js.map