@workday/canvas-kit-preview-react 9.0.0-alpha.335-next.5 → 9.0.0-alpha.338-next.5

package/dist/commonjs/form-field/lib/FormField.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Stack, StackSpacing } from '@workday/canvas-kit-react/layout';
-export interface FormFieldProps extends Omit<ExtractProps<typeof Stack, never>, 'spacing'> {
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+export interface FormFieldProps extends FlexProps {
     /**
      * Children of the Text Input. Should contain a `<FormField.Input>`, a `<FormField.Label>` and an optional `<FormField.Hint>`
      */
@@ -10,11 +9,6 @@ export interface FormFieldProps extends Omit<ExtractProps<typeof Stack, never>,
      * The direction the child elements should stack
      */
     orientation: 'vertical' | 'horizontal';
-    /**
-     * Spacing between children elements
-     * @default xxxs when vertical l when orientation is horizontal
-     */
-    spacing?: StackSpacing;
 }
 export declare const FormField: import("@workday/canvas-kit-react/common").ElementComponentM<"div", FormFieldProps & Partial<{
     hasError: boolean;

package/dist/commonjs/form-field/lib/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAOrE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACxF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAOjE,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;CACxC;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}

package/dist/commonjs/form-field/lib/FormField.js

@@ -44,5 +44,5 @@ exports.FormField = common_1.createContainer('div')({
 })(function (_a, Element) {
     var children = _a.children, orientation = _a.orientation, elemProps = __rest(_a, ["children", "orientation"]);
     var layoutProps = hooks_1.useFormFieldOrientation(orientation);
-    return (react_1.default.createElement(layout_1.Stack, __assign({ as: Element }, layoutProps, elemProps), children));
+    return (react_1.default.createElement(layout_1.Flex, __assign({ as: Element }, layoutProps, elemProps), children));
 });

package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts

@@ -1,16 +1,10 @@
 import React from 'react';
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { HStack, StackSpacing } from '@workday/canvas-kit-react/layout';
-export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, never>, 'spacing'> {
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+export interface FormFieldLabelProps extends FlexProps {
     /**
      * The text of the label.
      */
     children: React.ReactNode;
-    /**
-     * When the input is required, this is spacing between label and asterisk.
-     * @default xxxs
-     */
-    spacing?: StackSpacing;
 }
 export declare const FormFieldLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"label", FormFieldLabelProps, {
     state: {

package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,YAAY,EAAW,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAItE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,cAAc;;;;;;;EAyBzB,CAAC"}
+{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAIjE,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc;;;;;;;EAyBzB,CAAC"}

package/dist/commonjs/form-field/lib/FormFieldLabel.js

@@ -36,9 +36,9 @@ exports.FormFieldLabel = common_1.createSubcomponent('label')({
     modelHook: hooks_1.useFormFieldModel,
     elemPropsHook: hooks_1.useFormFieldLabel,
 })(function (_a, Element, model) {
-    var _b = _a.spacing, spacing = _b === void 0 ? 'xxxs' : _b, children = _a.children, elemProps = __rest(_a, ["spacing", "children"]);
+    var _b = _a.gap, gap = _b === void 0 ? 'xxxs' : _b, children = _a.children, elemProps = __rest(_a, ["gap", "children"]);
     var theme = common_1.useTheme();
-    return (react_1.default.createElement(layout_1.HStack, __assign({ as: Element, spacing: spacing, minWidth: "180px" }, elemProps),
+    return (react_1.default.createElement(layout_1.Flex, __assign({ as: Element, gap: gap, minWidth: "180px" }, elemProps),
         react_1.default.createElement(text_1.LabelText, { as: "span", fontWeight: "medium" }, children),
         model.state.isRequired && (react_1.default.createElement(text_1.Text, { fontSize: 20, fontWeight: "regular", textDecoration: "unset", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
 });

package/dist/commonjs/form-field/lib/hooks/useFormFieldOrientation.d.ts

@@ -1,10 +1,10 @@
-import { StackSpacing, StackProps } from '@workday/canvas-kit-react/layout';
+import { FlexProps } from '@workday/canvas-kit-react/layout';
 /**
  * Adds the necessary layout props to a `FormField` component.
  */
 export declare const useFormFieldOrientation: (orientation: 'horizontal' | 'vertical') => {
-    flexDirection: StackProps['flexDirection'];
-    alignItems: StackProps['alignItems'];
-    spacing: StackSpacing;
+    flexDirection: FlexProps['flexDirection'];
+    alignItems: FlexProps['alignItems'];
+    gap: FlexProps['gap'];
 };
 //# sourceMappingURL=useFormFieldOrientation.d.ts.map

package/dist/commonjs/form-field/lib/hooks/useFormFieldOrientation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldOrientation.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldOrientation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAG1E;;GAEG;AACH,eAAO,MAAM,uBAAuB,gBAAiB,YAAY,GAAG,UAAU;mBAE3D,UAAU,CAAC,eAAe,CAAC;gBAC9B,UAAU,CAAC,YAAY,CAAC;aAC3B,YAAY;CAkBxB,CAAC"}
+{"version":3,"file":"useFormFieldOrientation.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldOrientation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAG3D;;GAEG;AACH,eAAO,MAAM,uBAAuB,gBAAiB,YAAY,GAAG,UAAU;mBAE3D,SAAS,CAAC,eAAe,CAAC;gBAC7B,SAAS,CAAC,YAAY,CAAC;SAC9B,SAAS,CAAC,KAAK,CAAC;CAkBxB,CAAC"}

package/dist/commonjs/form-field/lib/hooks/useFormFieldOrientation.js

@@ -10,14 +10,14 @@ var useFormFieldOrientation = function (orientation) {
     if (orientation === 'horizontal') {
         layoutProps = {
             flexDirection: 'row',
-            spacing: tokens_1.space.l,
+            gap: tokens_1.space.l,
             alignItems: 'center',
         };
     }
     else {
         layoutProps = {
             flexDirection: 'column',
-            spacing: tokens_1.space.xxxs,
+            gap: tokens_1.space.xxxs,
             alignItems: 'flex-start',
         };
     }

package/dist/commonjs/pill/lib/Pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAA4B,MAAM,kCAAkC,CAAC;AAWrF,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAsID,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Df,CAAC"}
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;AAW5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAsID,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Df,CAAC"}

package/dist/commonjs/pill/lib/Pill.js

@@ -155,17 +155,17 @@ exports.Pill = common_1.createContainer('button')({
         variant === 'readOnly' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: "1px solid " + tokens_1.colors.licorice200, id: model.state.id }, elemProps),
             react_1.default.createElement(PillLabel_1.PillLabel, null, elemProps.children))),
         variant === 'default' && (react_1.default.createElement(StyledBasePill, __assign({ colors: getButtonPillColors(), as: Element }, elemProps, { disabled: model.state.disabled }),
-            react_1.default.createElement(layout_1.HStack, { spacing: "xxxs", display: "inline-flex", alignItems: "center" }, react_1.default.Children.map(elemProps.children, function (child, index) {
+            react_1.default.createElement(layout_1.Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center" }, react_1.default.Children.map(elemProps.children, function (child, index) {
                 if (typeof child === 'string') {
                     return react_1.default.createElement(PillLabel_1.PillLabel, { key: index }, child);
                 }
-                return (react_1.default.createElement(layout_1.Stack.Item, { key: index, display: "inline-flex" }, child));
+                return (react_1.default.createElement(layout_1.Flex.Item, { key: index, display: "inline-flex" }, child));
             })))),
         variant === 'removable' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span', variant: variant }, elemProps),
-            react_1.default.createElement(layout_1.HStack, { spacing: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, react_1.default.Children.map(elemProps.children, function (child, index) {
+            react_1.default.createElement(layout_1.Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, react_1.default.Children.map(elemProps.children, function (child, index) {
                 if (typeof child === 'string') {
                     return react_1.default.createElement(PillLabel_1.PillLabel, { key: index }, child);
                 }
-                return react_1.default.createElement(layout_1.Stack.Item, { key: index }, child);
+                return react_1.default.createElement(layout_1.Flex.Item, { key: index }, child);
             }))))));
 });

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

@@ -1,7 +1,7 @@
 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>> {
+import { Flex } from '@workday/canvas-kit-react/layout';
+export interface StatusIndicatorProps extends ExtractProps<typeof Flex, never> {
     /**
      * Children of the `StatusIndicator`. Can contain a `StatusIndicator.Label` and optionally a `StatusIndicator.Icon`.
      */

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

@@ -1 +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"}
+{"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,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAKtD,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC5E;;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

@@ -51,5 +51,5 @@ exports.StatusIndicator = common_1.createContainer('div')({
     },
 })(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));
+    return (react_1.default.createElement(layout_1.Flex, __assign({ gap: "xxxs", as: Element, maxWidth: 200, paddingX: "xxxs", display: "inline-flex", alignItems: "center", height: 20, borderRadius: "s" }, elemProps), children));
 });

package/dist/commonjs/text-area/lib/TextArea.js

@@ -43,5 +43,5 @@ exports.TextArea = common_1.createContainer('div')({
 })(function (_a, Element) {
     var children = _a.children, orientation = _a.orientation, elemProps = __rest(_a, ["children", "orientation"]);
     var layoutProps = form_field_1.useFormFieldOrientation(orientation);
-    return (react_1.default.createElement(layout_1.Stack, __assign({ as: Element }, layoutProps, elemProps), children));
+    return (react_1.default.createElement(layout_1.Flex, __assign({ as: Element }, layoutProps, elemProps), children));
 });

package/dist/commonjs/text-input/lib/TextInput.js

@@ -43,5 +43,5 @@ exports.TextInput = common_1.createContainer('div')({
 })(function (_a, Element) {
     var children = _a.children, orientation = _a.orientation, elemProps = __rest(_a, ["children", "orientation"]);
     var layoutProps = form_field_1.useFormFieldOrientation(orientation);
-    return (react_1.default.createElement(layout_1.Stack, __assign({ as: Element }, layoutProps, elemProps), children));
+    return (react_1.default.createElement(layout_1.Flex, __assign({ as: Element }, layoutProps, elemProps), children));
 });

package/dist/es6/form-field/lib/FormField.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Stack, StackSpacing } from '@workday/canvas-kit-react/layout';
-export interface FormFieldProps extends Omit<ExtractProps<typeof Stack, never>, 'spacing'> {
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+export interface FormFieldProps extends FlexProps {
     /**
      * Children of the Text Input. Should contain a `<FormField.Input>`, a `<FormField.Label>` and an optional `<FormField.Hint>`
      */
@@ -10,11 +9,6 @@ export interface FormFieldProps extends Omit<ExtractProps<typeof Stack, never>,
      * The direction the child elements should stack
      */
     orientation: 'vertical' | 'horizontal';
-    /**
-     * Spacing between children elements
-     * @default xxxs when vertical l when orientation is horizontal
-     */
-    spacing?: StackSpacing;
 }
 export declare const FormField: import("@workday/canvas-kit-react/common").ElementComponentM<"div", FormFieldProps & Partial<{
     hasError: boolean;

package/dist/es6/form-field/lib/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAOrE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACxF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAOjE,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;CACxC;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}

package/dist/es6/form-field/lib/FormField.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { createContainer } from '@workday/canvas-kit-react/common';
-import { Stack } from '@workday/canvas-kit-react/layout';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { useFormFieldModel, useFormFieldOrientation } from './hooks';
 import { FormFieldInput } from './FormFieldInput';
 import { FormFieldLabel } from './FormFieldLabel';
@@ -38,5 +38,5 @@ export var FormField = createContainer('div')({
 })(function (_a, Element) {
     var children = _a.children, orientation = _a.orientation, elemProps = __rest(_a, ["children", "orientation"]);
     var layoutProps = useFormFieldOrientation(orientation);
-    return (React.createElement(Stack, __assign({ as: Element }, layoutProps, elemProps), children));
+    return (React.createElement(Flex, __assign({ as: Element }, layoutProps, elemProps), children));
 });

package/dist/es6/form-field/lib/FormFieldLabel.d.ts

@@ -1,16 +1,10 @@
 import React from 'react';
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { HStack, StackSpacing } from '@workday/canvas-kit-react/layout';
-export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, never>, 'spacing'> {
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+export interface FormFieldLabelProps extends FlexProps {
     /**
      * The text of the label.
      */
     children: React.ReactNode;
-    /**
-     * When the input is required, this is spacing between label and asterisk.
-     * @default xxxs
-     */
-    spacing?: StackSpacing;
 }
 export declare const FormFieldLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"label", FormFieldLabelProps, {
     state: {

package/dist/es6/form-field/lib/FormFieldLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,YAAY,EAAW,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAItE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,cAAc;;;;;;;EAyBzB,CAAC"}
+{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAIjE,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc;;;;;;;EAyBzB,CAAC"}

package/dist/es6/form-field/lib/FormFieldLabel.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
-import { HStack } from '@workday/canvas-kit-react/layout';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { LabelText, Text } from '@workday/canvas-kit-react/text';
 import { useFormFieldLabel, useFormFieldModel } from './hooks';
 export var FormFieldLabel = createSubcomponent('label')({
@@ -30,9 +30,9 @@ export var FormFieldLabel = createSubcomponent('label')({
     modelHook: useFormFieldModel,
     elemPropsHook: useFormFieldLabel,
 })(function (_a, Element, model) {
-    var _b = _a.spacing, spacing = _b === void 0 ? 'xxxs' : _b, children = _a.children, elemProps = __rest(_a, ["spacing", "children"]);
+    var _b = _a.gap, gap = _b === void 0 ? 'xxxs' : _b, children = _a.children, elemProps = __rest(_a, ["gap", "children"]);
     var theme = useTheme();
-    return (React.createElement(HStack, __assign({ as: Element, spacing: spacing, minWidth: "180px" }, elemProps),
+    return (React.createElement(Flex, __assign({ as: Element, gap: gap, minWidth: "180px" }, elemProps),
         React.createElement(LabelText, { as: "span", fontWeight: "medium" }, children),
         model.state.isRequired && (React.createElement(Text, { fontSize: 20, fontWeight: "regular", textDecoration: "unset", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
 });

package/dist/es6/form-field/lib/hooks/useFormFieldOrientation.d.ts

@@ -1,10 +1,10 @@
-import { StackSpacing, StackProps } from '@workday/canvas-kit-react/layout';
+import { FlexProps } from '@workday/canvas-kit-react/layout';
 /**
  * Adds the necessary layout props to a `FormField` component.
  */
 export declare const useFormFieldOrientation: (orientation: 'horizontal' | 'vertical') => {
-    flexDirection: StackProps['flexDirection'];
-    alignItems: StackProps['alignItems'];
-    spacing: StackSpacing;
+    flexDirection: FlexProps['flexDirection'];
+    alignItems: FlexProps['alignItems'];
+    gap: FlexProps['gap'];
 };
 //# sourceMappingURL=useFormFieldOrientation.d.ts.map

package/dist/es6/form-field/lib/hooks/useFormFieldOrientation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldOrientation.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldOrientation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAG1E;;GAEG;AACH,eAAO,MAAM,uBAAuB,gBAAiB,YAAY,GAAG,UAAU;mBAE3D,UAAU,CAAC,eAAe,CAAC;gBAC9B,UAAU,CAAC,YAAY,CAAC;aAC3B,YAAY;CAkBxB,CAAC"}
+{"version":3,"file":"useFormFieldOrientation.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldOrientation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAG3D;;GAEG;AACH,eAAO,MAAM,uBAAuB,gBAAiB,YAAY,GAAG,UAAU;mBAE3D,SAAS,CAAC,eAAe,CAAC;gBAC7B,SAAS,CAAC,YAAY,CAAC;SAC9B,SAAS,CAAC,KAAK,CAAC;CAkBxB,CAAC"}

package/dist/es6/form-field/lib/hooks/useFormFieldOrientation.js

@@ -7,14 +7,14 @@ export var useFormFieldOrientation = function (orientation) {
     if (orientation === 'horizontal') {
         layoutProps = {
             flexDirection: 'row',
-            spacing: space.l,
+            gap: space.l,
             alignItems: 'center',
         };
     }
     else {
         layoutProps = {
             flexDirection: 'column',
-            spacing: space.xxxs,
+            gap: space.xxxs,
             alignItems: 'flex-start',
         };
     }

package/dist/es6/pill/lib/Pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAA4B,MAAM,kCAAkC,CAAC;AAWrF,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAsID,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Df,CAAC"}
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;AAW5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAsID,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Df,CAAC"}

package/dist/es6/pill/lib/Pill.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { BaseButton } from '@workday/canvas-kit-react/button';
 import { createContainer, focusRing, mouseFocusBehavior, styled, } from '@workday/canvas-kit-react/common';
-import { boxStyleFn, HStack, Stack } from '@workday/canvas-kit-react/layout';
+import { boxStyleFn, Flex } from '@workday/canvas-kit-react/layout';
 import { borderRadius, colors, space, type } from '@workday/canvas-kit-react/tokens';
 import { usePillModel } from './usePillModel';
 import { PillIcon } from './PillIcon';
@@ -149,17 +149,17 @@ export var Pill = createContainer('button')({
         variant === 'readOnly' && (React.createElement(StyledNonInteractivePill, __assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: "1px solid " + colors.licorice200, id: model.state.id }, elemProps),
             React.createElement(PillLabel, null, elemProps.children))),
         variant === 'default' && (React.createElement(StyledBasePill, __assign({ colors: getButtonPillColors(), as: Element }, elemProps, { disabled: model.state.disabled }),
-            React.createElement(HStack, { spacing: "xxxs", display: "inline-flex", alignItems: "center" }, React.Children.map(elemProps.children, function (child, index) {
+            React.createElement(Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center" }, React.Children.map(elemProps.children, function (child, index) {
                 if (typeof child === 'string') {
                     return React.createElement(PillLabel, { key: index }, child);
                 }
-                return (React.createElement(Stack.Item, { key: index, display: "inline-flex" }, child));
+                return (React.createElement(Flex.Item, { key: index, display: "inline-flex" }, child));
             })))),
         variant === 'removable' && (React.createElement(StyledNonInteractivePill, __assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span', variant: variant }, elemProps),
-            React.createElement(HStack, { spacing: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, React.Children.map(elemProps.children, function (child, index) {
+            React.createElement(Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, React.Children.map(elemProps.children, function (child, index) {
                 if (typeof child === 'string') {
                     return React.createElement(PillLabel, { key: index }, child);
                 }
-                return React.createElement(Stack.Item, { key: index }, child);
+                return React.createElement(Flex.Item, { key: index }, child);
             }))))));
 });

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

@@ -1,7 +1,7 @@
 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>> {
+import { Flex } from '@workday/canvas-kit-react/layout';
+export interface StatusIndicatorProps extends ExtractProps<typeof Flex, never> {
     /**
      * Children of the `StatusIndicator`. Can contain a `StatusIndicator.Label` and optionally a `StatusIndicator.Icon`.
      */

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

@@ -1 +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"}
+{"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,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAKtD,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC5E;;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

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { createContainer, createElemPropsHook } from '@workday/canvas-kit-react/common';
-import { HStack } from '@workday/canvas-kit-react/layout';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { StatusIndicatorIcon, statusIndicatorColors } from './StatusIndicatorIcon';
 import { StatusIndicatorLabel } from './StatusIndicatorLabel';
 import { useStatusIndicatorModel } from './hooks';
@@ -45,5 +45,5 @@ export var StatusIndicator = createContainer('div')({
     },
 })(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));
+    return (React.createElement(Flex, __assign({ gap: "xxxs", as: Element, maxWidth: 200, paddingX: "xxxs", display: "inline-flex", alignItems: "center", height: 20, borderRadius: "s" }, elemProps), children));
 });

package/dist/es6/text-area/lib/TextArea.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { createContainer } from '@workday/canvas-kit-react/common';
 import { FormField, useFormFieldOrientation } from '@workday/canvas-kit-preview-react/form-field';
-import { Stack } from '@workday/canvas-kit-react/layout';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { useTextAreaModel } from './hooks';
 import { TextAreaField } from './TextAreaField';
 export var TextArea = createContainer('div')({
@@ -37,5 +37,5 @@ export var TextArea = createContainer('div')({
 })(function (_a, Element) {
     var children = _a.children, orientation = _a.orientation, elemProps = __rest(_a, ["children", "orientation"]);
     var layoutProps = useFormFieldOrientation(orientation);
-    return (React.createElement(Stack, __assign({ as: Element }, layoutProps, elemProps), children));
+    return (React.createElement(Flex, __assign({ as: Element }, layoutProps, elemProps), children));
 });

package/dist/es6/text-input/lib/TextInput.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { createContainer } from '@workday/canvas-kit-react/common';
 import { FormField, useFormFieldOrientation } from '@workday/canvas-kit-preview-react/form-field';
-import { Stack } from '@workday/canvas-kit-react/layout';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { useTextInputModel } from './hooks';
 import { TextInputField } from './TextInputField';
 export var TextInput = createContainer('div')({
@@ -37,5 +37,5 @@ export var TextInput = createContainer('div')({
 })(function (_a, Element) {
     var children = _a.children, orientation = _a.orientation, elemProps = __rest(_a, ["children", "orientation"]);
     var layoutProps = useFormFieldOrientation(orientation);
-    return (React.createElement(Stack, __assign({ as: Element }, layoutProps, elemProps), children));
+    return (React.createElement(Flex, __assign({ as: Element }, layoutProps, elemProps), children));
 });

package/form-field/lib/FormField.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
-import {Stack, StackSpacing} from '@workday/canvas-kit-react/layout';
+import {createContainer} from '@workday/canvas-kit-react/common';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
 
 import {useFormFieldModel, useFormFieldOrientation} from './hooks';
 import {FormFieldInput} from './FormFieldInput';
 import {FormFieldLabel} from './FormFieldLabel';
 import {FormFieldHint} from './FormFieldHint';
 
-export interface FormFieldProps extends Omit<ExtractProps<typeof Stack, never>, 'spacing'> {
+export interface FormFieldProps extends FlexProps {
   /**
    * Children of the Text Input. Should contain a `<FormField.Input>`, a `<FormField.Label>` and an optional `<FormField.Hint>`
    */
@@ -17,11 +17,6 @@ export interface FormFieldProps extends Omit<ExtractProps<typeof Stack, never>,
    * The direction the child elements should stack
    */
   orientation: 'vertical' | 'horizontal';
-  /**
-   * Spacing between children elements
-   * @default xxxs when vertical l when orientation is horizontal
-   */
-  spacing?: StackSpacing;
 }
 
 export const FormField = createContainer('div')({
@@ -36,8 +31,8 @@ export const FormField = createContainer('div')({
   const layoutProps = useFormFieldOrientation(orientation);
 
   return (
-    <Stack as={Element} {...layoutProps} {...elemProps}>
+    <Flex as={Element} {...layoutProps} {...elemProps}>
       {children}
-    </Stack>
+    </Flex>
   );
 });

package/form-field/lib/FormFieldLabel.tsx

@@ -1,31 +1,26 @@
 import React from 'react';
 
-import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
-import {HStack, StackSpacing} from '@workday/canvas-kit-react/layout';
+import {createSubcomponent, useTheme} from '@workday/canvas-kit-react/common';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
 import {LabelText, Text} from '@workday/canvas-kit-react/text';
 import {useFormFieldLabel, useFormFieldModel} from './hooks';
 
-export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, never>, 'spacing'> {
+export interface FormFieldLabelProps extends FlexProps {
   /**
    * The text of the label.
    */
   children: React.ReactNode;
-  /**
-   * When the input is required, this is spacing between label and asterisk.
-   * @default xxxs
-   */
-  spacing?: StackSpacing;
 }
 
 export const FormFieldLabel = createSubcomponent('label')({
   displayName: 'FormField.Label',
   modelHook: useFormFieldModel,
   elemPropsHook: useFormFieldLabel,
-})<FormFieldLabelProps>(({spacing = 'xxxs', children, ...elemProps}, Element, model) => {
+})<FormFieldLabelProps>(({gap = 'xxxs', children, ...elemProps}, Element, model) => {
   const theme = useTheme();
 
   return (
-    <HStack as={Element} spacing={spacing} minWidth="180px" {...elemProps}>
+    <Flex as={Element} gap={gap} minWidth="180px" {...elemProps}>
       <LabelText as="span" fontWeight="medium">
         {children}
       </LabelText>
@@ -40,6 +35,6 @@ export const FormFieldLabel = createSubcomponent('label')({
           *
         </Text>
       )}
-    </HStack>
+    </Flex>
   );
 });

package/form-field/lib/hooks/useFormFieldOrientation.tsx

@@ -1,4 +1,4 @@
-import {StackSpacing, StackProps} from '@workday/canvas-kit-react/layout';
+import {FlexProps} from '@workday/canvas-kit-react/layout';
 import {space} from '@workday/canvas-kit-react/tokens';
 
 /**
@@ -6,21 +6,21 @@ import {space} from '@workday/canvas-kit-react/tokens';
  */
 export const useFormFieldOrientation = (orientation: 'horizontal' | 'vertical') => {
   let layoutProps: {
-    flexDirection: StackProps['flexDirection'];
-    alignItems: StackProps['alignItems'];
-    spacing: StackSpacing;
+    flexDirection: FlexProps['flexDirection'];
+    alignItems: FlexProps['alignItems'];
+    gap: FlexProps['gap'];
   };
 
   if (orientation === 'horizontal') {
     layoutProps = {
       flexDirection: 'row',
-      spacing: space.l,
+      gap: space.l,
       alignItems: 'center',
     };
   } else {
     layoutProps = {
       flexDirection: 'column',
-      spacing: space.xxxs,
+      gap: space.xxxs,
       alignItems: 'flex-start',
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "9.0.0-alpha.335-next.5+da341515",
+  "version": "9.0.0-alpha.338-next.5+fb2aa9bc",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,16 +46,16 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^9.0.0-alpha.335-next.5+da341515",
+    "@workday/canvas-kit-react": "^9.0.0-alpha.338-next.5+fb2aa9bc",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^3.0.0",
-    "@workday/canvas-kit-labs-react": "^9.0.0-alpha.335-next.5+da341515",
+    "@workday/canvas-kit-labs-react": "^9.0.0-alpha.338-next.5+fb2aa9bc",
     "formik": "^2.2.9",
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "da34151551a68819809ef76f724d7906fd9bb0c0"
+  "gitHead": "fb2aa9bcbecaf55a5a8b6b01964b54f8c7519dd7"
 }

package/pill/lib/Pill.tsx

@@ -9,7 +9,7 @@ import {
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
-import {BoxProps, boxStyleFn, HStack, Stack} from '@workday/canvas-kit-react/layout';
+import {BoxProps, boxStyleFn, Flex} from '@workday/canvas-kit-react/layout';
 import {borderRadius, colors, space, type} from '@workday/canvas-kit-react/tokens';
 
 import {usePillModel} from './usePillModel';
@@ -190,18 +190,18 @@ export const Pill = createContainer('button')({
           {...elemProps}
           disabled={model.state.disabled}
         >
-          <HStack spacing="xxxs" display="inline-flex" alignItems="center">
+          <Flex gap="xxxs" display="inline-flex" alignItems="center">
             {React.Children.map(elemProps.children, (child, index) => {
               if (typeof child === 'string') {
                 return <PillLabel key={index}>{child}</PillLabel>;
               }
               return (
-                <Stack.Item key={index} display="inline-flex">
+                <Flex.Item key={index} display="inline-flex">
                   {child}
-                </Stack.Item>
+                </Flex.Item>
               );
             })}
-          </HStack>
+          </Flex>
         </StyledBasePill>
       )}
       {variant === 'removable' && (
@@ -211,14 +211,14 @@ export const Pill = createContainer('button')({
           variant={variant}
           {...elemProps}
         >
-          <HStack spacing="xxxs" display="inline-flex" alignItems="center" justifyContent="center">
+          <Flex gap="xxxs" display="inline-flex" alignItems="center" justifyContent="center">
             {React.Children.map(elemProps.children, (child, index) => {
               if (typeof child === 'string') {
                 return <PillLabel key={index}>{child}</PillLabel>;
               }
-              return <Stack.Item key={index}>{child}</Stack.Item>;
+              return <Flex.Item key={index}>{child}</Flex.Item>;
             })}
-          </HStack>
+          </Flex>
         </StyledNonInteractivePill>
       )}
     </>

package/pill/lib/PillCount.tsx

@@ -25,7 +25,7 @@ export const PillCount = createComponent('span')({
         height={22}
         minWidth={22}
         padding={`0  ${space.xxxs}`}
-        marginInlineEnd={`-${space.xxs}`} // Remove padding from HStack on the right side
+        marginInlineEnd={`-${space.xxs}`} // Remove excess margin at the end
         marginInlineStart={`${space.xxxs}`}
         backgroundColor={colors.soap500}
         data-count="ck-pill-count"

package/pill/lib/PillIcon.tsx

@@ -21,7 +21,7 @@ export const PillIcon = createSubcomponent('span')({
 })<PillIconProps>(({size, icon, ...elemProps}, Element) => {
   return (
     <SystemIcon
-      marginInlineStart={`-${space.xxxs}`} // remove padding on the left from HStack
+      marginInlineStart={`-${space.xxxs}`} // remove excess margin from the start
       display="flex"
       as={Element}
       size={20}

package/status-indicator/lib/StatusIndicator.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
 import {ExtractProps, createContainer, createElemPropsHook} from '@workday/canvas-kit-react/common';
-import {HStack} from '@workday/canvas-kit-react/layout';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {StatusIndicatorIcon, statusIndicatorColors} from './StatusIndicatorIcon';
 import {StatusIndicatorLabel} from './StatusIndicatorLabel';
 import {useStatusIndicatorModel} from './hooks';
 
-export interface StatusIndicatorProps extends Partial<ExtractProps<typeof HStack, never>> {
+export interface StatusIndicatorProps extends ExtractProps<typeof Flex, never> {
   /**
    * Children of the `StatusIndicator`. Can contain a `StatusIndicator.Label` and optionally a `StatusIndicator.Icon`.
    */
@@ -32,8 +32,8 @@ export const StatusIndicator = createContainer('div')({
   },
 })<StatusIndicatorProps>(({children, ...elemProps}, Element, model) => {
   return (
-    <HStack
-      spacing={4}
+    <Flex
+      gap="xxxs"
       as={Element}
       maxWidth={200}
       paddingX="xxxs"
@@ -44,6 +44,6 @@ export const StatusIndicator = createContainer('div')({
       {...elemProps}
     >
       {children}
-    </HStack>
+    </Flex>
   );
 });

package/text-area/lib/TextArea.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
 import {FormField, useFormFieldOrientation} from '@workday/canvas-kit-preview-react/form-field';
-import {Stack} from '@workday/canvas-kit-react/layout';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
 import {useTextAreaModel} from './hooks';
 import {TextAreaField} from './TextAreaField';
@@ -26,8 +26,8 @@ export const TextArea = createContainer('div')({
   const layoutProps = useFormFieldOrientation(orientation);
 
   return (
-    <Stack as={Element} {...layoutProps} {...elemProps}>
+    <Flex as={Element} {...layoutProps} {...elemProps}>
       {children}
-    </Stack>
+    </Flex>
   );
 });

package/text-input/lib/TextInput.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
 import {FormField, useFormFieldOrientation} from '@workday/canvas-kit-preview-react/form-field';
-import {Stack} from '@workday/canvas-kit-react/layout';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
 import {useTextInputModel} from './hooks';
 import {TextInputField} from './TextInputField';
@@ -26,8 +26,8 @@ export const TextInput = createContainer('div')({
   const layoutProps = useFormFieldOrientation(orientation);
 
   return (
-    <Stack as={Element} {...layoutProps} {...elemProps}>
+    <Flex as={Element} {...layoutProps} {...elemProps}>
       {children}
-    </Stack>
+    </Flex>
   );
 });