@workday/canvas-kit-preview-react 8.0.0-alpha.234-next.5 → 8.0.0-alpha.235-next.6

package/dist/commonjs/index.d.ts

@@ -4,6 +4,7 @@ export * from './menu';
 export * from './pill';
 export * from './select';
 export * from './side-panel';
+export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/commonjs/index.js

@@ -16,5 +16,6 @@ __exportStar(require("./menu"), exports);
 __exportStar(require("./pill"), exports);
 __exportStar(require("./select"), exports);
 __exportStar(require("./side-panel"), exports);
+__exportStar(require("./status-indicator"), exports);
 __exportStar(require("./text-area"), exports);
 __exportStar(require("./text-input"), exports);

package/dist/commonjs/status-indicator/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/StatusIndicator';
+//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/status-indicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../status-indicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/commonjs/status-indicator/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lib/StatusIndicator"), exports);

package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { HStack } from '@workday/canvas-kit-react/layout';
+export interface StatusIndicatorProps extends Partial<ExtractProps<typeof HStack, never>> {
+    /**
+     * Children of the `StatusIndicator`. Can contain a `StatusIndicator.Label` and optionally a `StatusIndicator.Icon`.
+     */
+    children: React.ReactNode;
+}
+export declare const useStatusIndicator: <P extends {}, R>(model: {
+    state: {
+        emphasis: import("./hooks").StatusIndicatorEmphasis;
+        variant: import("./hooks").StatusIndicatorVariant;
+    };
+    events: {};
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+    opacity: string | undefined;
+    color: string;
+    background: string;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
+export declare const StatusIndicator: import("@workday/canvas-kit-react/common").ElementComponentM<"div", StatusIndicatorProps & Partial<{
+    emphasis: import("./hooks").StatusIndicatorEmphasis;
+    variant: import("./hooks").StatusIndicatorVariant;
+}> & {} & {}, {
+    state: {
+        emphasis: import("./hooks").StatusIndicatorEmphasis;
+        variant: import("./hooks").StatusIndicatorVariant;
+    };
+    events: {};
+}> & {
+    Context: React.Context<{
+        state: {
+            emphasis: import("./hooks").StatusIndicatorEmphasis;
+            variant: import("./hooks").StatusIndicatorVariant;
+        };
+        events: {};
+    }>;
+} & {
+    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./StatusIndicatorIcon").StatusIndicatorIconProps, {
+        state: {
+            emphasis: import("./hooks").StatusIndicatorEmphasis;
+            variant: import("./hooks").StatusIndicatorVariant;
+        };
+        events: {};
+    }>;
+    Label: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./StatusIndicatorLabel").StatusIndicatorLabelProps>;
+};
+//# sourceMappingURL=StatusIndicator.d.ts.map

package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAuC,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAKxD,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC;IACvF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;OAO7B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;CAwB1B,CAAC"}

package/dist/commonjs/status-indicator/lib/StatusIndicator.js

@@ -0,0 +1,55 @@
+"use strict";
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusIndicator = exports.useStatusIndicator = void 0;
+var react_1 = __importDefault(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var layout_1 = require("@workday/canvas-kit-react/layout");
+var StatusIndicatorIcon_1 = require("./StatusIndicatorIcon");
+var StatusIndicatorLabel_1 = require("./StatusIndicatorLabel");
+var hooks_1 = require("./hooks");
+exports.useStatusIndicator = common_1.createElemPropsHook(hooks_1.useStatusIndicatorModel)(function (_a) {
+    var state = _a.state;
+    var colors = StatusIndicatorIcon_1.statusIndicatorColors[state.variant][state.emphasis];
+    return {
+        opacity: state.variant === 'transparent' ? '0.85' : undefined,
+        color: colors.text,
+        background: colors.background,
+    };
+});
+exports.StatusIndicator = common_1.createContainer('div')({
+    displayName: 'StatusIndicator',
+    modelHook: hooks_1.useStatusIndicatorModel,
+    elemPropsHook: exports.useStatusIndicator,
+    subComponents: {
+        Icon: StatusIndicatorIcon_1.StatusIndicatorIcon,
+        Label: StatusIndicatorLabel_1.StatusIndicatorLabel,
+    },
+})(function (_a, Element, model) {
+    var children = _a.children, elemProps = __rest(_a, ["children"]);
+    return (react_1.default.createElement(layout_1.HStack, __assign({ spacing: 4, as: Element, maxWidth: 200, paddingX: "xxxs", display: "inline-flex", alignItems: "center", height: 20, borderRadius: "s" }, elemProps), children));
+});

package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.d.ts

@@ -0,0 +1,73 @@
+import { SystemIconProps } from '@workday/canvas-kit-react/icon';
+export interface StatusIndicatorIconProps extends SystemIconProps {
+}
+export declare const statusIndicatorColors: {
+    gray: {
+        high: {
+            text: string;
+            background: string;
+        };
+        low: {
+            text: string;
+            background: string;
+        };
+    };
+    orange: {
+        high: {
+            text: string;
+            background: string;
+        };
+        low: {
+            text: string;
+            background: string;
+        };
+    };
+    blue: {
+        high: {
+            text: string;
+            background: string;
+        };
+        low: {
+            text: string;
+            background: string;
+        };
+    };
+    green: {
+        high: {
+            text: string;
+            background: string;
+        };
+        low: {
+            text: string;
+            background: string;
+        };
+    };
+    red: {
+        high: {
+            text: string;
+            background: string;
+        };
+        low: {
+            text: string;
+            background: string;
+        };
+    };
+    transparent: {
+        high: {
+            text: string;
+            background: string;
+        };
+        low: {
+            text: string;
+            background: string;
+        };
+    };
+};
+export declare const StatusIndicatorIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", StatusIndicatorIconProps, {
+    state: {
+        emphasis: import("./hooks").StatusIndicatorEmphasis;
+        variant: import("./hooks").StatusIndicatorVariant;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=StatusIndicatorIcon.d.ts.map

package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicatorIcon.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,MAAM,WAAW,wBAAyB,SAAQ,eAAe;CAAG;AAIpE,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DjC,CAAC;AAUF,eAAO,MAAM,mBAAmB;;;;;;EAK9B,CAAC"}

package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.js

@@ -0,0 +1,98 @@
+"use strict";
+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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusIndicatorIcon = exports.statusIndicatorColors = void 0;
+var react_1 = __importDefault(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var icon_1 = require("@workday/canvas-kit-react/icon");
+var hooks_1 = require("./hooks");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+exports.statusIndicatorColors = {
+    gray: {
+        high: {
+            text: tokens_1.colors.frenchVanilla100,
+            background: tokens_1.colors.licorice300,
+        },
+        low: {
+            text: tokens_1.colors.licorice400,
+            background: tokens_1.colors.soap300,
+        },
+    },
+    orange: {
+        high: {
+            text: tokens_1.colors.licorice500,
+            background: tokens_1.colors.cantaloupe400,
+        },
+        low: {
+            text: tokens_1.colors.toastedMarshmallow600,
+            background: tokens_1.colors.cantaloupe100,
+        },
+    },
+    blue: {
+        high: {
+            text: tokens_1.colors.frenchVanilla100,
+            background: tokens_1.colors.blueberry400,
+        },
+        low: {
+            text: tokens_1.colors.blueberry500,
+            background: tokens_1.colors.blueberry100,
+        },
+    },
+    green: {
+        high: {
+            text: tokens_1.colors.frenchVanilla100,
+            background: tokens_1.colors.greenApple600,
+        },
+        low: {
+            text: tokens_1.colors.greenApple600,
+            background: tokens_1.colors.greenApple100,
+        },
+    },
+    red: {
+        high: {
+            text: tokens_1.colors.frenchVanilla100,
+            background: tokens_1.colors.cinnamon500,
+        },
+        low: {
+            text: tokens_1.colors.cinnamon600,
+            background: tokens_1.colors.cinnamon100,
+        },
+    },
+    transparent: {
+        high: {
+            text: tokens_1.colors.frenchVanilla100,
+            background: tokens_1.colors.blackPepper600,
+        },
+        low: {
+            text: tokens_1.colors.frenchVanilla100,
+            background: tokens_1.colors.blackPepper600,
+        },
+    },
+};
+var useStatusIndicatorIcon = common_1.createElemPropsHook(hooks_1.useStatusIndicatorModel)(function (_a) {
+    var state = _a.state;
+    var colors = exports.statusIndicatorColors[state.variant][state.emphasis];
+    return {
+        color: colors.text,
+        colorHover: colors.background,
+    };
+});
+exports.StatusIndicatorIcon = common_1.createSubcomponent('span')({
+    modelHook: hooks_1.useStatusIndicatorModel,
+    elemPropsHook: useStatusIndicatorIcon,
+})(function (elemProps, Element, model) {
+    return react_1.default.createElement(icon_1.SystemIcon, __assign({ as: Element, size: 20, role: "img" }, elemProps));
+});

package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.d.ts

@@ -0,0 +1,5 @@
+import { TextProps } from '@workday/canvas-kit-react/text';
+export interface StatusIndicatorLabelProps extends TextProps {
+}
+export declare const StatusIndicatorLabel: import("@workday/canvas-kit-react/common").ElementComponent<"span", StatusIndicatorLabelProps>;
+//# sourceMappingURL=StatusIndicatorLabel.d.ts.map

package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicatorLabel.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAE/D,MAAM,WAAW,yBAA0B,SAAQ,SAAS;CAAG;AAE/D,eAAO,MAAM,oBAAoB,gGAoB/B,CAAC"}

package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js

@@ -0,0 +1,38 @@
+"use strict";
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusIndicatorLabel = void 0;
+var react_1 = __importDefault(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var text_1 = require("@workday/canvas-kit-react/text");
+exports.StatusIndicatorLabel = common_1.createComponent('span')({
+    displayName: 'StatusIndicator.Label',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (react_1.default.createElement(text_1.Text, __assign({ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", typeLevel: "subtext.large", fontWeight: "bold", textTransform: "capitalize", ref: ref, color: "inherit", as: Element }, elemProps), children));
+    },
+});

package/dist/commonjs/status-indicator/lib/hooks/index.d.ts

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

package/dist/commonjs/status-indicator/lib/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../status-indicator/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}

package/dist/commonjs/status-indicator/lib/hooks/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useStatusIndicatorModel"), exports);

package/dist/commonjs/status-indicator/lib/hooks/useStatusIndicatorModel.d.ts

@@ -0,0 +1,75 @@
+export declare type StatusIndicatorVariant = 'gray' | 'orange' | 'blue' | 'green' | 'red' | 'transparent';
+export declare type StatusIndicatorEmphasis = 'high' | 'low';
+export declare const useStatusIndicatorModel: (<TT_Special_Generic>(config?: (Partial<{
+    /**
+     * Defines the emphasis of the `StatusIndicator`.
+     * `high` emphasis will create more contrast between the background and text colors.
+     * `low` emphasis will create less contrast between the background and text colors.
+     * @default 'low'
+     */
+    emphasis: StatusIndicatorEmphasis;
+    /**
+     * Defines the color of the `StatusIndicator`.
+     * @default 'gray'
+     */
+    variant: StatusIndicatorVariant;
+}> & {} & {}) | undefined) => {
+    state: {
+        /**
+         * Defines the emphasis of the `StatusIndicator`.
+         * `high` emphasis will create more contrast between the background and text colors.
+         * `low` emphasis will create less contrast between the background and text colors.
+         * @default 'low'
+         */
+        emphasis: StatusIndicatorEmphasis;
+        /**
+         * Defines the color of the `StatusIndicator`.
+         * @default 'gray'
+         */
+        variant: StatusIndicatorVariant;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    /**
+     * Defines the emphasis of the `StatusIndicator`.
+     * `high` emphasis will create more contrast between the background and text colors.
+     * `low` emphasis will create less contrast between the background and text colors.
+     * @default 'low'
+     */
+    emphasis: StatusIndicatorEmphasis;
+    /**
+     * Defines the color of the `StatusIndicator`.
+     * @default 'gray'
+     */
+    variant: StatusIndicatorVariant;
+}, {}, {
+    /**
+     * Defines the emphasis of the `StatusIndicator`.
+     * `high` emphasis will create more contrast between the background and text colors.
+     * `low` emphasis will create less contrast between the background and text colors.
+     * @default 'low'
+     */
+    emphasis: StatusIndicatorEmphasis;
+    /**
+     * Defines the color of the `StatusIndicator`.
+     * @default 'gray'
+     */
+    variant: StatusIndicatorVariant;
+}, {}, {
+    state: {
+        /**
+         * Defines the emphasis of the `StatusIndicator`.
+         * `high` emphasis will create more contrast between the background and text colors.
+         * `low` emphasis will create less contrast between the background and text colors.
+         * @default 'low'
+         */
+        emphasis: StatusIndicatorEmphasis;
+        /**
+         * Defines the color of the `StatusIndicator`.
+         * @default 'gray'
+         */
+        variant: StatusIndicatorVariant;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=useStatusIndicatorModel.d.ts.map

package/dist/commonjs/status-indicator/lib/hooks/useStatusIndicatorModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStatusIndicatorModel.d.ts","sourceRoot":"","sources":["../../../../../status-indicator/lib/hooks/useStatusIndicatorModel.tsx"],"names":[],"mappings":"AAEA,oBAAY,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,aAAa,CAAC;AAElG,oBAAY,uBAAuB,GAAG,MAAM,GAAG,KAAK,CAAC;AAErD,eAAO,MAAM,uBAAuB;IAEhC;;;;;OAKG;;IAGH;;;OAGG;;;;QAXH;;;;;WAKG;;QAGH;;;WAGG;;;;;IAXH;;;;;OAKG;;IAGH;;;OAGG;;;IAXH;;;;;OAKG;;IAGH;;;OAGG;;;;QAXH;;;;;WAKG;;QAGH;;;WAGG;;;;EASL,CAAC"}

package/dist/commonjs/status-indicator/lib/hooks/useStatusIndicatorModel.js

@@ -0,0 +1,34 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStatusIndicatorModel = void 0;
+var common_1 = require("@workday/canvas-kit-react/common");
+exports.useStatusIndicatorModel = common_1.createModelHook({
+    defaultConfig: {
+        /**
+         * Defines the emphasis of the `StatusIndicator`.
+         * `high` emphasis will create more contrast between the background and text colors.
+         * `low` emphasis will create less contrast between the background and text colors.
+         * @default 'low'
+         */
+        emphasis: 'low',
+        /**
+         * Defines the color of the `StatusIndicator`.
+         * @default 'gray'
+         */
+        variant: 'gray',
+    },
+})(function (config) {
+    var state = __assign({}, config);
+    return { state: state, events: {} };
+});

package/dist/es6/index.d.ts

@@ -4,6 +4,7 @@ export * from './menu';
 export * from './pill';
 export * from './select';
 export * from './side-panel';
+export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/es6/index.js

@@ -4,5 +4,6 @@ export * from './menu';
 export * from './pill';
 export * from './select';
 export * from './side-panel';
+export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';

package/dist/es6/status-indicator/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/StatusIndicator';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/status-indicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../status-indicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/es6/status-indicator/index.js

@@ -0,0 +1 @@
+export * from './lib/StatusIndicator';

package/dist/es6/status-indicator/lib/StatusIndicator.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { HStack } from '@workday/canvas-kit-react/layout';
+export interface StatusIndicatorProps extends Partial<ExtractProps<typeof HStack, never>> {
+    /**
+     * Children of the `StatusIndicator`. Can contain a `StatusIndicator.Label` and optionally a `StatusIndicator.Icon`.
+     */
+    children: React.ReactNode;
+}
+export declare const useStatusIndicator: <P extends {}, R>(model: {
+    state: {
+        emphasis: import("./hooks").StatusIndicatorEmphasis;
+        variant: import("./hooks").StatusIndicatorVariant;
+    };
+    events: {};
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+    opacity: string | undefined;
+    color: string;
+    background: string;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
+export declare const StatusIndicator: import("@workday/canvas-kit-react/common").ElementComponentM<"div", StatusIndicatorProps & Partial<{
+    emphasis: import("./hooks").StatusIndicatorEmphasis;
+    variant: import("./hooks").StatusIndicatorVariant;
+}> & {} & {}, {
+    state: {
+        emphasis: import("./hooks").StatusIndicatorEmphasis;
+        variant: import("./hooks").StatusIndicatorVariant;
+    };
+    events: {};
+}> & {
+    Context: React.Context<{
+        state: {
+            emphasis: import("./hooks").StatusIndicatorEmphasis;
+            variant: import("./hooks").StatusIndicatorVariant;
+        };
+        events: {};
+    }>;
+} & {
+    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./StatusIndicatorIcon").StatusIndicatorIconProps, {
+        state: {
+            emphasis: import("./hooks").StatusIndicatorEmphasis;
+            variant: import("./hooks").StatusIndicatorVariant;
+        };
+        events: {};
+    }>;
+    Label: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./StatusIndicatorLabel").StatusIndicatorLabelProps>;
+};
+//# sourceMappingURL=StatusIndicator.d.ts.map

package/dist/es6/status-indicator/lib/StatusIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAuC,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAKxD,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC;IACvF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;OAO7B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;CAwB1B,CAAC"}

package/dist/es6/status-indicator/lib/StatusIndicator.js

@@ -0,0 +1,49 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { createContainer, createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { HStack } from '@workday/canvas-kit-react/layout';
+import { StatusIndicatorIcon, statusIndicatorColors } from './StatusIndicatorIcon';
+import { StatusIndicatorLabel } from './StatusIndicatorLabel';
+import { useStatusIndicatorModel } from './hooks';
+export var useStatusIndicator = createElemPropsHook(useStatusIndicatorModel)(function (_a) {
+    var state = _a.state;
+    var colors = statusIndicatorColors[state.variant][state.emphasis];
+    return {
+        opacity: state.variant === 'transparent' ? '0.85' : undefined,
+        color: colors.text,
+        background: colors.background,
+    };
+});
+export var StatusIndicator = createContainer('div')({
+    displayName: 'StatusIndicator',
+    modelHook: useStatusIndicatorModel,
+    elemPropsHook: useStatusIndicator,
+    subComponents: {
+        Icon: StatusIndicatorIcon,
+        Label: StatusIndicatorLabel,
+    },
+})(function (_a, Element, model) {
+    var children = _a.children, elemProps = __rest(_a, ["children"]);
+    return (React.createElement(HStack, __assign({ spacing: 4, as: Element, maxWidth: 200, paddingX: "xxxs", display: "inline-flex", alignItems: "center", height: 20, borderRadius: "s" }, elemProps), children));
+});