@workday/canvas-kit-react 7.0.0-alpha.129-next.3 → 7.0.0-alpha.256-next.2

package/dist/es6/text/lib/TypeLevelComponents.js

@@ -0,0 +1,173 @@
+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 * as React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { Text } from '@workday/canvas-kit-react/text';
+/**
+ * ## Subtext
+ * [View Docs](https://canvas.workday.com/components/text/subtext)
+ *
+ * ---
+ * This component is intended to be used for small subtext content or in tight spaces.
+ * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 14px (0.875rem)
+ *   - font-weight: regular (400)
+ * - `medium`
+ *   - font-size: 12px (0.75rem)
+ *   - font-weight: regular (400)
+ * - `small`
+ *   - font-size: 10px (0.625rem)
+ *   - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { Subtext } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomSubtext = () => (
+ *   <Subtext size="small">Subtext</Subtext>
+ * );
+ * ```
+ */
+export var Subtext = createComponent('p')({
+    displayName: 'Subtext',
+    Component: function (_a, ref, Element) {
+        var size = _a.size, elemProps = __rest(_a, ["size"]);
+        var typeLevel = "subtext." + size;
+        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    },
+});
+/**
+ * ## BodyText
+ * [View Docs](https://canvas.workday.com/components/text/body-text)
+ *
+ * ---
+ * This component is intended to be used for standard body text.
+ * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 20px (1.25rem)
+ *   - font-weight: regular (400)
+ * - `medium`
+ *   - font-size: 18px (1.125rem)
+ *   - font-weight: regular (400)
+ * - `small`
+ *   - font-size: 16px (1rem)
+ *   - font-weight: regular (400)
+ *
+ * @example
+ * ```tsx
+ * import { BodyText } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomBodyText = () => (
+ *   <BodyText size="small">Body Text</BodyText>
+ * );
+ * ```
+ */
+export var BodyText = createComponent('p')({
+    displayName: 'BodyText',
+    Component: function (_a, ref, Element) {
+        var size = _a.size, elemProps = __rest(_a, ["size"]);
+        var typeLevel = "body." + size;
+        return (React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps)));
+    },
+});
+/**
+ * ## Heading
+ * [View Docs](https://canvas.workday.com/components/text/heading)
+ *
+ * ---
+ * This component is intended to be used for headings and large text.
+ * By default, it renders a semantic `h2` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 32px (2rem)
+ *   - font-weight: bold (700)
+ * - `medium`
+ *   - font-size: 28px (1.75rem)
+ *   - font-weight: bold (700)
+ * - `small`
+ *   - font-size: 24px (1.5rem)
+ *   - font-weight: bold (700)
+ *
+ * @example
+ * ```tsx
+ * import { Heading } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomHeading = () => (
+ *   <Heading size="small">Heading Text</Heading>
+ * );
+ * ```
+ */
+export var Heading = createComponent('h2')({
+    displayName: 'Heading',
+    Component: function (_a, ref, Element) {
+        var size = _a.size, elemProps = __rest(_a, ["size"]);
+        var typeLevel = "heading." + size;
+        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    },
+});
+/**
+ * ## Title
+ * [View Docs](https://canvas.workday.com/components/text/title)
+ *
+ * ---
+ * This component is intended to be used large page titles.
+ * By default, it renders a semantic `h1` element, but you can adjust this as needed with the `as` prop.
+ * It has three sizes: large, medium, and small.
+ * Here's a quick reference for font-sizes and weights:
+ *
+ * - `large`
+ *   - font-size: 56px (3/5rem)
+ *   - font-weight: bold (700)
+ * - `medium`
+ *   - font-size: 48px (3rem)
+ *   - font-weight: bold (700)
+ * - `small`
+ *   - font-size: 40px (2.5rem)
+ *   - font-weight: bold (700)
+ *
+ * @example
+ * ```tsx
+ * import { Title } from '@workday/canvas-kit-react/text';
+ *
+ * const CustomTitle = () => (
+ *   <Title size="small">Title Text</Title>
+ * );
+ * ```
+ */
+export var Title = createComponent('h1')({
+    displayName: 'Title',
+    Component: function (_a, ref, Element) {
+        var size = _a.size, elemProps = __rest(_a, ["size"]);
+        var typeLevel = "title." + size;
+        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    },
+});

package/dist/es6/text-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC"}

package/dist/es6/toast/lib/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAsB,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGlF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAkB,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAGnG,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAkCD,eAAO,MAAM,KAAK,4DA+ChB,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAsB,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGlF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAkB,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAGnG,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAiCD,eAAO,MAAM,KAAK,4DA+ChB,CAAC"}

package/dist/es6/toast/lib/Toast.js

@@ -42,7 +42,6 @@ var _a = type.levels.subtext.large, color = _a.color, subTextLargeStyles = __res
 var StyledActionButton = styled(Hyperlink)(__assign(__assign({}, subTextLargeStyles), { display: 'block', backgroundColor: 'transparent', border: 'none', marginTop: space.xxxs }));
 var Message = styled('div')({
     wordBreak: 'break-word',
-    wordWrap: 'break-word',
 });
 export var Toast = createComponent('div')({
     displayName: 'Toast',
@@ -52,7 +51,7 @@ export var Toast = createComponent('div')({
         iconColor = _c === void 0 ? colors.greenApple400 : _c, onClose = _a.onClose, onActionClick = _a.onActionClick, actionText = _a.actionText, children = _a.children, elemProps = __rest(_a, ["icon", "iconColor", "onClose", "onActionClick", "actionText", "children"]);
         var isInteractive = onClose || onActionClick;
         var isError = iconColor === colors.cinnamon500 && icon === exclamationCircleIcon;
-        return (React.createElement(Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", depth: 5, role: isInteractive ? 'dialog' : isError ? 'alert' : 'status', "aria-live": isInteractive ? 'off' : isError ? 'assertive' : 'polite', "aria-atomic": !isInteractive }, elemProps),
+        return (React.createElement(Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, depth: 5, role: isInteractive ? 'dialog' : isError ? 'alert' : 'status', "aria-live": isInteractive ? 'off' : isError ? 'assertive' : 'polite', "aria-atomic": !isInteractive, padding: "xxs" }, elemProps),
             onClose && React.createElement(Popup.CloseIcon, { "aria-label": "Close", onClick: onClose, size: "small" }),
             React.createElement(Popup.Body, null,
                 React.createElement(ToastContentContainer, { onClose: onClose },

package/dist/es6/tokens/lib/colors.types.d.ts

@@ -25,11 +25,9 @@ export declare enum BrandingColor {
     Licorice = "licorice",
     BlackPepper = "blackPepper"
 }
-declare type KnownKeys<T> = {
-    [K in keyof T]: string extends K ? never : number extends K ? never : K;
-} extends {
-    [_ in keyof T]: infer U;
-} ? U : never;
-export declare type CanvasColor = KnownKeys<typeof colors>;
+declare type RemoveIndex<T> = {
+    [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
+};
+export declare type CanvasColor = keyof RemoveIndex<typeof colors>;
 export {};
 //# sourceMappingURL=colors.types.d.ts.map

package/dist/es6/tokens/lib/colors.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.types.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/colors.types.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD,oBAAY,aAAa;IACvB,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,UAAU,eAAe;IACzB,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,UAAU,eAAe;IACzB,QAAQ,aAAa;IACrB,kBAAkB,uBAAuB;IACzC,UAAU,eAAe;IACzB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;CAC5B;AAGD,aAAK,SAAS,CAAC,CAAC,IAAI;KACjB,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,SAAS,CAAC,GAAG,KAAK,GAAG,MAAM,SAAS,CAAC,GAAG,KAAK,GAAG,CAAC;CACxE,SAAS;KAAE,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC;CAAC,GAC/B,CAAC,GACD,KAAK,CAAC;AAEV,oBAAY,WAAW,GAAG,SAAS,CAAC,OAAO,MAAM,CAAC,CAAC"}
+{"version":3,"file":"colors.types.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/colors.types.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD,oBAAY,aAAa;IACvB,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,UAAU,eAAe;IACzB,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,UAAU,eAAe;IACzB,QAAQ,aAAa;IACrB,kBAAkB,uBAAuB;IACzC,UAAU,eAAe;IACzB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;CAC5B;AAED,aAAK,WAAW,CAAC,CAAC,IAAI;KAClB,CAAC,IAAI,MAAM,CAAC,IAAI,MAAM,SAAS,CAAC,GAAG,KAAK,GAAG,MAAM,SAAS,CAAC,GAAG,KAAK,GAAG,CAAC,GAAK,CAAC,CAAC,CAAC,CAAC;CACnF,CAAC;AAEF,oBAAY,WAAW,GAAG,MAAM,WAAW,CAAC,OAAO,MAAM,CAAC,CAAC"}

package/dist/es6/tooltip/lib/OverflowTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAoBhE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAehE,CAAC;AAcF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAiBD,eAAO,MAAM,eAAe,0CAIzB,oBAAoB,gBAwCtB,CAAC"}
+{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAmBhE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAahE,CAAC;AAcF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAiBD,eAAO,MAAM,eAAe,0CAIzB,oBAAoB,gBAwCtB,CAAC"}

package/dist/es6/tooltip/lib/OverflowTooltip.js

@@ -38,7 +38,6 @@ export var findOverflowElement = function (element) {
         return element;
     }
     else if (element.children) {
-        // `children` is not defined for SVGElement in IE11
         for (var i = 0; i < element.children.length; i++) {
             var overflowElement = findOverflowElement(element.children[i]);
             if (overflowElement) {
@@ -58,8 +57,7 @@ export var findEllipsisElement = function (element) {
     if (style.textOverflow === 'ellipsis' || Number(style.webkitLineClamp) > 0) {
         return element;
     }
-    else if (element.children) {
-        // `children` is not defined for SVGElement in IE11
+    else {
         for (var i = 0; i < element.children.length; i++) {
             var overflowElement = findEllipsisElement(element.children[i]);
             if (overflowElement) {
@@ -68,7 +66,6 @@ export var findEllipsisElement = function (element) {
         }
         return null;
     }
-    return null;
 };
 var isOverflowed = function (element) {
     var overflowElement = findEllipsisElement(element) || findOverflowElement(element);

package/dist/es6/tooltip/lib/TooltipContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAyB,MAAM,kCAAkC,CAAC;AAiBzF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;KACnC,CAAC;CACH;AAOD,eAAO,MAAM,gBAAgB;;;6GA4D5B,CAAC"}
+{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAyB,MAAM,kCAAkC,CAAC;AAiBzF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;KACnC,CAAC;CACH;AAOD,eAAO,MAAM,gBAAgB;;;6GAkE5B,CAAC"}

package/dist/es6/tooltip/lib/TooltipContainer.js

@@ -49,6 +49,11 @@ export var TooltipContainer = styled('div')(__assign(__assign({}, type.levels.su
             margin: spaceNumbers.xxxs + 2,
         },
     }, 
+    // Hide tooltip when the reference element is either clipped or fully hidden
+    '[data-popper-reference-hidden] &': {
+        visibility: 'hidden',
+        pointerEvents: 'none',
+    }, 
     // Fix offsets based on placement
     '[data-popper-placement="top-start"] &, [data-popper-placement="bottom-start"] &': {
         left: -spaceNumbers.xxxs,

package/dist/es6/tooltip/lib/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IA6CF,2EAA2E;;;;8BA3B5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IAkCtC,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IA8CF,2EAA2E;;;;8BA5B5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IAmCtC,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}

package/dist/es6/tooltip/lib/useTooltip.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useCloseOnEscape, useAlwaysCloseOnOutsideClick, usePopupModel, useCloseOnFullscreenExit, } from '@workday/canvas-kit-react/popup';
+import { useCloseOnEscape, useAlwaysCloseOnOutsideClick, usePopupModel, useCloseOnFullscreenExit, useCloseOnTargetHidden, } from '@workday/canvas-kit-react/popup';
 import { useUniqueId } from '@workday/canvas-kit-react/common';
 var useIntentTimer = function (fn, waitMs) {
     if (waitMs === void 0) { waitMs = 0; }
@@ -75,6 +75,7 @@ export function useTooltip(_a) {
     useCloseOnEscape(popupModel);
     useAlwaysCloseOnOutsideClick(popupModel);
     useCloseOnFullscreenExit(popupModel);
+    useCloseOnTargetHidden(popupModel);
     var visible = popupModel.state.visibility !== 'hidden';
     return {
         /** Mix these properties into the target element. **Must be an Element** */

package/form-field/index.ts

@@ -1,4 +1,3 @@
-
 export * from './lib/types';
 export * from './lib/FormField';
 export * from './lib/Hint';

package/form-field/lib/Hint.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import {ErrorType, styled, Themeable} from '@workday/canvas-kit-react/common';
-import {space, type} from '@workday/canvas-kit-react/tokens';
+import {ErrorType, Themeable, styled} from '@workday/canvas-kit-react/common';
+import {space} from '@workday/canvas-kit-react/tokens';
+import {Subtext, Text} from '@workday/canvas-kit-react/text';
 
 export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraphElement> {
   /**
@@ -19,20 +20,7 @@ export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraph
   alertLabel?: string;
 }
 
-const Label = styled('span')<Pick<HintProps, 'error'>>(
-  type.levels.subtext.medium,
-  {
-    fontWeight: type.properties.fontWeights.medium,
-  },
-  ({error, theme}) => error === ErrorType.Error && {color: theme.canvas.palette.error.main}
-);
-
-const Message = styled('p')<Pick<HintProps, 'error'>>(
-  type.levels.subtext.medium,
-  {
-    margin: `${space.xxs} 0 0`,
-    width: '100%',
-  },
+const Message = styled(Subtext)<Pick<HintProps, 'error'>>(
   ({error, theme}) => error === ErrorType.Error && {color: theme.canvas.palette.error.main}
 );
 
@@ -41,7 +29,6 @@ class Hint extends React.Component<HintProps> {
 
   public render() {
     const {errorLabel = 'Error', alertLabel = 'Alert', children, error} = this.props;
-
     let hintLabel: string | undefined;
     switch (error) {
       case Hint.ErrorType.Error:
@@ -54,8 +41,10 @@ class Hint extends React.Component<HintProps> {
     }
 
     return (
-      <Message {...this.props}>
-        {typeof error !== 'undefined' && hintLabel && <Label error={error}>{hintLabel}: </Label>}
+      <Message size="medium" margin={`${space.xxs} 0 0`} width="100%" {...this.props}>
+        {typeof error !== 'undefined' && hintLabel && (
+          <Text fontWeight="medium">{hintLabel}: </Text>
+        )}
         {children}
       </Message>
     );

package/form-field/lib/Label.tsx

@@ -72,8 +72,6 @@ const RequiredAstrisk = styled('abbr')({
 });
 
 // Used inside the fieldset component instead of a label for accessible radio groups.
-// Extra `width: 100%` style is to help IE11 wrap text properly in a top-positioned
-// FormField's legend element.
 const LegendComponent = styled('legend')<LabelProps>(...labelStyles, ({labelPosition}) => {
   if (labelPosition === Label.Position.Top) {
     return {
@@ -86,6 +84,7 @@ const LegendComponent = styled('legend')<LabelProps>(...labelStyles, ({labelPosi
     width: 'auto',
   };
 });
+
 const LabelComponent = styled('label')<LabelProps>(...labelStyles);
 
 class Label extends React.Component<React.PropsWithChildren<LabelProps>> {

package/icon/lib/SystemIcon.tsx

@@ -46,7 +46,7 @@ export interface SystemIconStyles {
 
 export interface SystemIconProps
   extends SystemIconStyles,
-    Omit<IconProps, 'src' | 'color' | 'type' | 'background'> {
+    Omit<IconProps, 'src' | 'color' | 'fill' | 'type' | 'background'> {
   /**
    * The icon to display from `@workday/canvas-system-icons-web`.
    */

package/index.ts

@@ -2,6 +2,7 @@ export * from './action-bar';
 export * from './avatar';
 export * from './badge';
 export * from './banner';
+export * from './breadcrumbs';
 export * from './button';
 export * from './card';
 export * from './checkbox';
@@ -13,7 +14,7 @@ export * from './disclosure';
 export * from './form-field';
 export * from './icon';
 export * from './layout';
-export * from './loading-animation';
+export * from './loading-dots';
 export * from './menu';
 export * from './modal';
 export * from './pagination';
@@ -27,6 +28,8 @@ export * from './status-indicator';
 export * from './switch';
 export * from './table';
 export * from './tabs';
+export * from './testing';
+export * from './text';
 export * from './text-area';
 export * from './text-input';
 export * from './toast';

package/layout/README.md

@@ -14,26 +14,27 @@ For more detailed information on this component, please refer to the
 # Canvas Kit Layout
 
 The layout component is used to create layouts for your application. The component comes with the
-`Layout` and `Column` component. Layout and Columns can be utilized to create a combination of
-different workday specific layouts. Layouts should be used to create the main layout on the page.
+`DeprecatedLayout` and `DeprecatedColumn` component. Layout and Columns can be utilized to create a
+combination of different workday specific layouts. Layouts should be used to create the main layout
+on the page.
 
-# Layout
+# Layout (deprecated)
 
 > Layout Container
 
 ## Usage
 
 ```tsx
-import {Layout} from '@workday/canvas-kit-react/layout';
+import {DeprecatedLayout} from '@workday/canvas-kit-react/layout';
 
 // Basic
-<Layout>...</Layout>
+<DeprecatedLayout>...</DeprecatedLayout>
 
 // No spacing and no gutter
-<Layout gutter={0} spacing={0}>...</Layout>
+<DeprecatedLayout gutter={0} spacing={0}>...</DeprecatedLayout>
 
 // Layout with a max container width
-<Layout capWidth={true}>...</Layout>
+<DeprecatedLayout capWidth={true}>...</DeprecatedLayout>
 ```
 
 ## Static Properties
@@ -70,39 +71,39 @@ Default: `12`
 
 ---
 
-# Column
+# Column (deprecated)
 
 > The column acts as a pillar for building layouts. Columns widths can be fluid, 12 columns, or a
-> fixed. Columns should be used exclusively with `Layout` to build the main page layouts. `width`
-> and `columns` props are mutually exclusive. The `width` prop will take precedence over the
+> fixed. Columns should be used exclusively with `DeprecatedLayout` to build the main page layouts.
+> `width` and `columns` props are mutually exclusive. The `width` prop will take precedence over the
 > `columns` prop.
 
 ```tsx
-import {Layout} from '@workday/canvas-kit-react/layout';
+import {DeprecatedLayout} from '@workday/canvas-kit-react/layout';
 
 // Fluid layouts
-<Layout>
-  <Layout.Column />
-  <Layout.Column />
-</Layout>
+<DeprecatedLayout>
+  <DeprecatedLayout.Column />
+  <DeprecatedLayout.Column />
+</DeprecatedLayout>
 
 // 12 column layouts
-<Layout>
-  <Layout.Column columns={4}/>
-  <Layout.Column columns={8}/>
-</Layout>
+<DeprecatedLayout>
+  <DeprecatedLayout.Column columns={4}/>
+  <DeprecatedLayout.Column columns={8}/>
+</DeprecatedLayout>
 
 // Fixed column width
-<Layout>
-  <Layout.Column width={'400px'}/>
-  <Layout.Column columns={8}/>
-</Layout>
+<DeprecatedLayout>
+  <DeprecatedLayout.Column width={'400px'}/>
+  <DeprecatedLayout.Column columns={8}/>
+</DeprecatedLayout>
 
 // Custom spacing
-<Layout>
-  <Layout.Column spacing={0}/>
-  <Layout.Column />
-</Layout>
+<DeprecatedLayout>
+  <DeprecatedLayout.Column spacing={0}/>
+  <DeprecatedLayout.Column />
+</DeprecatedLayout>
 ```
 
 ## Static Properties

package/layout/index.ts

@@ -1,16 +1,26 @@
-import {Layout} from './lib/Layout';
-import {Column} from './lib/Column';
+import {DeprecatedLayout} from './lib/Layout';
+import {DeprecatedColumn} from './lib/Column';
 
-export { Layout, Column};
+export { DeprecatedLayout, DeprecatedColumn};
 export * from './lib/Box';
+export * from './lib/utils/background';
 export * from './lib/utils/border';
 export * from './lib/utils/color';
-export {DepthStyleProps} from './lib/utils/depth';
+export {DepthStyleProps, depthStyleFnConfigs} from './lib/utils/depth';
+export * from './lib/utils/flex';
 export * from './lib/utils/flexItem';
+export * from './lib/utils/grid';
+export * from './lib/utils/gridItem';
 export * from './lib/utils/layout';
+export * from './lib/utils/other';
 export * from './lib/utils/position';
-export {SpaceStyleProps} from './lib/utils/space';
+export {SpaceStyleProps, spaceStyleFnConfigs} from './lib/utils/space';
+export {AllStyleProps, CommonStyleProps} from './lib/utils/styleProps';
+export * from './lib/utils/text';
 export * from './lib/Flex';
+export * from './lib/Grid';
 export * from './lib/Stack';
 export type { FlexStyleProps } from './lib/utils/flex';
+export type { GridStyleProps } from './lib/utils/grid';
+export type { GridItemStyleProps, gridItemStyleFnConfigs } from './lib/utils/gridItem';
 export type { StackSpacing, StackDirection, StackStyleProps } from './lib/utils/stack';