@workday/canvas-kit-react 12.0.0-alpha.841-next.0 → 12.0.0-alpha.852-next.0

package/popup/lib/PopupBody.tsx

@@ -3,10 +3,20 @@ import * as React from 'react';
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Card} from '@workday/canvas-kit-react/card';
 import {usePopupModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '../../layout';
+import {system} from '@workday/canvas-tokens-web';
+
+export const popupBodyStencil = createStencil({
+  base: {
+    overflowY: 'auto',
+    padding: system.space.x2,
+  },
+});
 
 export const PopupBody = createSubcomponent('div')({
   displayName: 'Popup.Body',
   modelHook: usePopupModel,
 })<ExtractProps<typeof Card.Body>>(elemProps => {
-  return <Card.Body overflowY="auto" padding="xxs" {...elemProps} />;
+  return <Card.Body {...mergeStyles(elemProps, popupBodyStencil())} />;
 });

package/popup/lib/PopupCard.tsx

@@ -1,65 +1,38 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/react';
 
 import {Card} from '@workday/canvas-kit-react/card';
-import {space, type} from '@workday/canvas-kit-react/tokens';
+import {space} from '@workday/canvas-kit-react/tokens';
 import {
-  styled,
-  TransformOrigin,
-  getTranslateFromOrigin,
-  StyledType,
   ExtractProps,
-  useConstant,
   createSubcomponent,
+  getTransformOrigin,
 } from '@workday/canvas-kit-react/common';
-import {Flex, FlexStyleProps} from '@workday/canvas-kit-react/layout';
+import {FlexStyleProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {getTransformFromPlacement} from './getTransformFromPlacement';
 import {usePopupCard, usePopupModel} from './hooks';
+import {createStencil, createVars, cssVar, keyframes} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexStyleProps;
 export interface PopupCardProps extends FlexAndBoxProps {
   children?: React.ReactNode;
 }
 
-const popupAnimation = (transformOrigin: TransformOrigin) => {
-  const translate = getTranslateFromOrigin(transformOrigin, space.xxs);
+const translateVars = createVars('positionX', 'positionY');
 
-  return keyframes`
-    0% {
-      opacity: 0;
-      transform: translate(${translate.x}px, ${translate.y}px);
-    }
-    100% {
-      opacity: 1;
-      transform: translate(0);
-    }
-  `;
-};
-
-const StyledPopupCard = styled(Card)<
-  StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
->(({transformOrigin, theme}) => {
-  if (transformOrigin == null) {
-    return {};
-  }
-
-  return {
-    animation: popupAnimation(transformOrigin),
-    animationDuration: '150ms',
-    animationTimingFunction: 'ease-out',
-    transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
-    [theme.canvas.breakpoints.down('s')]: {
-      animation: popupAnimation({vertical: 'bottom', horizontal: 'center'}),
-      animationDuration: '150ms',
-      animationTimingFunction: 'ease-out',
-      transformOrigin: 'bottom center',
-    },
-    // Allow overriding of animation in special cases
-    '.wd-no-animation &': {
-      animation: 'none',
-    },
-  };
+/**
+ * Keyframe for the dots loading animation.
+ */
+const fadeIn = keyframes({
+  '0%': {
+    opacity: 1,
+    transform: `translate(${cssVar(translateVars.positionX)}, ${cssVar(translateVars.positionY)})`,
+  },
+  '100%': {
+    opacity: 1,
+    transform: `translate(0)`,
+  },
 });
 
 function getSpace(value?: string | number) {
@@ -72,7 +45,7 @@ function getSpace(value?: string | number) {
 
 function getMaxHeight(margin?: string | number) {
   // set the default margin offset to space.xl
-  let marginOffset: string | number = space.xl;
+  let marginOffset: string | number = cssVar(system.space.x10);
 
   if (margin) {
     // parse the margin prop
@@ -91,33 +64,61 @@ function getMaxHeight(margin?: string | number) {
   return `calc(100vh - ${marginOffset})`;
 }
 
+export const popupCardStencil = createStencil({
+  vars: {
+    maxHeight: '',
+    transformOriginHorizontal: '',
+    transformOriginVertical: '',
+  },
+  base: ({maxHeight, transformOriginHorizontal, transformOriginVertical}) => ({
+    ...system.type.subtext.large,
+    display: 'flex',
+    position: 'relative',
+    maxWidth: `calc(100vw - ${system.space.x8})`,
+    flexDirection: 'column',
+    boxShadow: system.depth[5],
+    minHeight: system.space.zero,
+    padding: system.space.x6,
+    maxHeight: maxHeight,
+    overflowY: 'auto',
+    animationName: fadeIn,
+    animationDuration: '150ms',
+    animationTimingFunction: 'ease-out',
+    transformOrigin: `${transformOriginVertical} ${transformOriginHorizontal}`,
+    // Allow overriding of animation in special cases
+    '.wd-no-animation &': {
+      animation: 'none',
+    },
+    '@media screen and (max-width: 768px)': {
+      transformOrigin: 'bottom center',
+    },
+  }),
+});
+
 export const PopupCard = createSubcomponent('div')({
   displayName: 'Popup.Card',
   modelHook: usePopupModel,
   elemPropsHook: usePopupCard,
-})<PopupCardProps>(({children, ...elemProps}, Element, model) => {
+})<PopupCardProps>(({children, ref, ...elemProps}, Element, model) => {
   const transformOrigin = React.useMemo(() => {
     return getTransformFromPlacement(model.state.placement || 'bottom');
   }, [model.state.placement]);
+  const translate = getTransformOrigin(transformOrigin, cssVar(system.space.x2));
+  const cardMaxHeight = getMaxHeight(elemProps.margin);
 
-  // As is a Flex that will render an element of `Element`
-  const As = useConstant(() => Flex.as(Element));
   return (
-    <StyledPopupCard
-      as={As}
-      transformOrigin={transformOrigin}
-      position="relative"
-      depth={5}
-      maxWidth={`calc(100vw - ${space.l})`}
-      flexDirection="column"
-      minHeight={0}
-      padding="m"
-      maxHeight={getMaxHeight(elemProps.margin)}
-      overflowY="auto"
-      {...type.levels.subtext.large}
-      {...elemProps}
+    <Card
+      ref={ref}
+      {...mergeStyles(elemProps, [
+        popupCardStencil({
+          transformOriginHorizontal: transformOrigin.horizontal,
+          transformOriginVertical: transformOrigin.vertical,
+          maxHeight: cardMaxHeight,
+        }),
+        translateVars({positionX: translate.x, positionY: translate.y}),
+      ])}
     >
       {children}
-    </StyledPopupCard>
+    </Card>
   );
 });

package/popup/lib/PopupCloseIcon.tsx

@@ -3,12 +3,22 @@ import React from 'react';
 import {xIcon} from '@workday/canvas-system-icons-web';
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {space} from '@workday/canvas-kit-react/tokens';
 
 import {usePopupCloseButton, usePopupModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '../../layout';
 
 export interface PopupCloseIconProps extends ExtractProps<typeof TertiaryButton, never> {}
 
+export const popupCloseIconStencil = createStencil({
+  base: {
+    position: 'absolute',
+    insetInlineEnd: system.space.x1,
+    top: system.space.x1,
+  },
+});
+
 export const PopupCloseIcon = createSubcomponent('button')({
   displayName: 'Popup.CloseIcon',
   modelHook: usePopupModel,
@@ -20,10 +30,7 @@ export const PopupCloseIcon = createSubcomponent('button')({
       size="medium"
       icon={xIcon}
       type="button"
-      position="absolute"
-      insetInlineEnd={space.xxxs}
-      top={space.xxxs}
-      {...elemProps}
+      {...mergeStyles(elemProps, popupCloseIconStencil())}
     />
   );
 });

package/popup/lib/PopupHeading.tsx

@@ -4,18 +4,28 @@ import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common
 import {Card} from '@workday/canvas-kit-react/card';
 
 import {usePopupHeading, usePopupModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '../../layout';
 
 export interface PopupHeadingProps extends ExtractProps<typeof Card.Heading, never> {
   children?: React.ReactNode;
 }
 
+export const popupHeadingStencil = createStencil({
+  base: {
+    marginBlockEnd: system.space.x2,
+    padding: system.space.x2,
+  },
+});
+
 export const PopupHeading = createSubcomponent('h2')({
   displayName: 'Popup.Heading',
   modelHook: usePopupModel,
   elemPropsHook: usePopupHeading,
 })<PopupHeadingProps>(({children, ...elemProps}, Element) => {
   return (
-    <Card.Heading as={Element} marginBottom="xxs" padding="xxs" {...elemProps}>
+    <Card.Heading as={Element} {...mergeStyles(elemProps, popupHeadingStencil())}>
       {children}
     </Card.Heading>
   );

package/select/lib/Select.tsx

@@ -86,12 +86,14 @@ export const SelectInput = createSubcomponent(TextInput)({
     React.useImperativeHandle(
       elementRef,
       () => {
-        localRef.current!.focus = (options?: FocusOptions) => {
-          textInputProps.ref.current!.focus(options);
-        };
-        localRef.current!.blur = () => {
-          textInputProps.ref.current!.blur();
-        };
+        if (localRef.current) {
+          localRef.current.focus = (options?: FocusOptions) => {
+            textInputProps.ref.current!.focus(options);
+          };
+          localRef.current.blur = () => {
+            textInputProps.ref.current!.blur();
+          };
+        }
 
         return localRef.current!;
       },

package/text-input/index.ts

@@ -1,3 +1,2 @@
-export * from './lib/InputIconContainer';
 export * from './lib/TextInput';
 export {InputGroup, useInputGroupModel} from './lib/InputGroup';

package/toast/lib/Toast.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
-import {Flex} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
 
 import {ToastCloseIcon} from './ToastCloseIcon';
@@ -10,6 +9,9 @@ import {ToastMessage} from './ToastMessage';
 import {ToastLink} from './ToastLink';
 import {ToastBody} from './ToastBody';
 import {useToastModel} from './hooks/useToastModel';
+import {calc, createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ToastProps extends Omit<ExtractProps<typeof Popup.Card, never>, 'model'> {}
 
@@ -45,6 +47,16 @@ const getAriaAttributes = (mode: string, id: string): React.HtmlHTMLAttributes<H
   }
 };
 
+const toastStencil = createStencil({
+  base: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: calc.add(calc.multiply(system.space.x20, 4), system.space.x10),
+    padding: system.space.zero,
+    gap: system.space.x1,
+  },
+});
+
 /**
  * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility
  *
@@ -99,13 +111,8 @@ export const Toast = createContainer('div')({
 })<ToastProps>(({children, ...elemProps}, _, model) => {
   return (
     <Popup.Card
-      as={Flex}
-      width={360}
-      padding="0"
       {...getAriaAttributes(model.state.mode, model.state.id)}
-      flexDirection="row"
-      gap="xxxs"
-      {...elemProps}
+      {...mergeStyles(elemProps, toastStencil())}
     >
       {children}
     </Popup.Card>

package/toast/lib/ToastBody.tsx

@@ -2,25 +2,29 @@ import React from 'react';
 
 import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ToastBodyProps extends ExtractProps<typeof Popup.Body> {}
 
+export const toastBodyStencil = createStencil({
+  base: {
+    alignItems: 'flex-start',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    paddingTop: system.space.x4,
+    paddingBottom: system.space.x4,
+    flexGrow: 1,
+    gap: system.space.x1,
+  },
+});
+
 export const ToastBody = createComponent('div')({
   displayName: 'Toast.Body',
   Component: ({children, ...elemProps}: ToastBodyProps, ref, Element) => {
     return (
-      <Flex
-        alignItems="flex-start"
-        flexDirection="column"
-        justifyContent="center"
-        paddingY="s"
-        ref={ref}
-        as={Element}
-        flexGrow={1}
-        gap="xxxs"
-        {...elemProps}
-      >
+      <Flex ref={ref} as={Element} {...mergeStyles(elemProps, toastBodyStencil())}>
         {children}
       </Flex>
     );

package/toast/lib/ToastCloseIcon.tsx

@@ -1,14 +1,27 @@
 import React from 'react';
 import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ToastCloseIconProps extends ExtractProps<typeof Popup.CloseIcon, never> {}
 
+export const toastCloseIconStencil = createStencil({
+  base: {
+    position: 'relative',
+  },
+});
+
 export const ToastCloseIcon = createComponent('button')({
   displayName: 'Toast.CloseIcon',
   Component: (elemProps: ToastCloseIconProps, ref, Element) => {
     return (
-      <Popup.CloseIcon as={Element} ref={ref} size="small" position="relative" {...elemProps} />
+      <Popup.CloseIcon
+        as={Element}
+        ref={ref}
+        size="small"
+        {...mergeStyles(elemProps, toastCloseIconStencil())}
+      />
     );
   },
 });

package/toast/lib/ToastIcon.tsx

@@ -2,22 +2,21 @@ import React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ToastIconProps extends Omit<SystemIconProps, 'colorHover'> {}
 
+export const toastIconStencil = createStencil({
+  base: {
+    alignSelf: 'start',
+    margin: `${system.space.x4} ${system.space.x3}`,
+  },
+});
+
 export const ToastIcon = createComponent('div')({
   displayName: 'Toast.Icon',
   Component: (elemProps: ToastIconProps, ref, Element) => {
-    return (
-      <SystemIcon
-        colorHover={elemProps.color}
-        marginY="s"
-        marginX="xs"
-        alignSelf="start"
-        ref={ref}
-        as={Element}
-        {...elemProps}
-      />
-    );
+    return <SystemIcon ref={ref} as={Element} {...handleCsProp(elemProps, toastIconStencil())} />;
   },
 });

package/toast/lib/ToastMessage.tsx

@@ -3,20 +3,29 @@ import React from 'react';
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {useToastModel} from './hooks/useToastModel';
 import {Subtext} from '@workday/canvas-kit-react/text';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ToastMessageProps extends Omit<ExtractProps<typeof Subtext>, 'size'> {}
 
+export const toastMessageStencil = createStencil({
+  base: {
+    wordBreak: 'break-word',
+    marginBlockStart: system.space.zero,
+    marginBlockEnd: system.space.zero,
+  },
+});
+
 export const ToastMessage = createSubcomponent('p')({
   modelHook: useToastModel,
 })<ToastMessageProps>(({children, ...elemProps}, Element, model) => {
   return (
     <Subtext
       size="large"
-      wordBreak="break-word"
-      marginY="zero"
       id={model.state.id}
       as={Element}
-      {...elemProps}
+      {...mergeStyles(elemProps, toastMessageStencil())}
     >
       {children}
     </Subtext>

package/dist/commonjs/text-input/lib/InputIconContainer.d.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { GrowthBehavior } from '@workday/canvas-kit-react/common';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
-/**
- * ### ⚠️ We've deprecated `InputIconContainerProps` from Main because it doesn't handle bidirectionality or icons at the start of an input. ⚠️
- * Please consider using [`InputGroup`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons) instead.
- * @deprecated
- */
-export interface InputIconContainerProps extends GrowthBehavior {
-    icon?: React.ReactElement<typeof SystemIcon>;
-}
-/**
- * ### ⚠️ We've deprecated `InputIconContainer` from Main because it doesn't handle bidirectionality or icons at the start of an input. ⚠️
- * Please consider using [`InputGroup`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons) instead.
- * @deprecated
- */
-export declare const InputIconContainer: React.FunctionComponent<React.PropsWithChildren<InputIconContainerProps>>;
-//# sourceMappingURL=InputIconContainer.d.ts.map

package/dist/commonjs/text-input/lib/InputIconContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputIconContainer.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputIconContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAE1D;;;;GAIG;AACH,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC7D,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;CAC9C;AAaD;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CACtD,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,CAMjD,CAAC"}

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

@@ -1,46 +0,0 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputIconContainer = void 0;
-const React = __importStar(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
-const Container = styled_1.default('div')(({ grow }) => ({
-    display: grow ? 'block' : 'inline-block',
-    position: 'relative',
-}));
-const IconContainer = styled_1.default('div')({
-    position: 'absolute',
-    top: tokens_1.space.xxs,
-    right: tokens_1.space.xxs,
-});
-/**
- * ### ⚠️ We've deprecated `InputIconContainer` from Main because it doesn't handle bidirectionality or icons at the start of an input. ⚠️
- * Please consider using [`InputGroup`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons) instead.
- * @deprecated
- */
-const InputIconContainer = ({ grow, children, icon }) => (React.createElement(Container, { grow: grow },
-    children,
-    icon && React.createElement(IconContainer, null, icon)));
-exports.InputIconContainer = InputIconContainer;

package/dist/es6/text-input/lib/InputIconContainer.d.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { GrowthBehavior } from '@workday/canvas-kit-react/common';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
-/**
- * ### ⚠️ We've deprecated `InputIconContainerProps` from Main because it doesn't handle bidirectionality or icons at the start of an input. ⚠️
- * Please consider using [`InputGroup`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons) instead.
- * @deprecated
- */
-export interface InputIconContainerProps extends GrowthBehavior {
-    icon?: React.ReactElement<typeof SystemIcon>;
-}
-/**
- * ### ⚠️ We've deprecated `InputIconContainer` from Main because it doesn't handle bidirectionality or icons at the start of an input. ⚠️
- * Please consider using [`InputGroup`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons) instead.
- * @deprecated
- */
-export declare const InputIconContainer: React.FunctionComponent<React.PropsWithChildren<InputIconContainerProps>>;
-//# sourceMappingURL=InputIconContainer.d.ts.map

package/dist/es6/text-input/lib/InputIconContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputIconContainer.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputIconContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAE1D;;;;GAIG;AACH,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC7D,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;CAC9C;AAaD;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CACtD,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,CAMjD,CAAC"}

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

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import { space } from '@workday/canvas-kit-react/tokens';
-const Container = styled('div')(({ grow }) => ({
-    display: grow ? 'block' : 'inline-block',
-    position: 'relative',
-}));
-const IconContainer = styled('div')({
-    position: 'absolute',
-    top: space.xxs,
-    right: space.xxs,
-});
-/**
- * ### ⚠️ We've deprecated `InputIconContainer` from Main because it doesn't handle bidirectionality or icons at the start of an input. ⚠️
- * Please consider using [`InputGroup`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons) instead.
- * @deprecated
- */
-export const InputIconContainer = ({ grow, children, icon }) => (React.createElement(Container, { grow: grow },
-    children,
-    icon && React.createElement(IconContainer, null, icon)));

package/text-input/lib/InputIconContainer.tsx

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import {GrowthBehavior} from '@workday/canvas-kit-react/common';
-import {space} from '@workday/canvas-kit-react/tokens';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-
-/**
- * ### ⚠️ We've deprecated `InputIconContainerProps` from Main because it doesn't handle bidirectionality or icons at the start of an input. ⚠️
- * Please consider using [`InputGroup`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons) instead.
- * @deprecated
- */
-export interface InputIconContainerProps extends GrowthBehavior {
-  icon?: React.ReactElement<typeof SystemIcon>;
-}
-
-const Container = styled('div')<InputIconContainerProps>(({grow}) => ({
-  display: grow ? 'block' : 'inline-block',
-  position: 'relative',
-}));
-
-const IconContainer = styled('div')({
-  position: 'absolute',
-  top: space.xxs,
-  right: space.xxs,
-});
-
-/**
- * ### ⚠️ We've deprecated `InputIconContainer` from Main because it doesn't handle bidirectionality or icons at the start of an input. ⚠️
- * Please consider using [`InputGroup`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons) instead.
- * @deprecated
- */
-export const InputIconContainer: React.FunctionComponent<
-  React.PropsWithChildren<InputIconContainerProps>
-> = ({grow, children, icon}) => (
-  <Container grow={grow}>
-    {children}
-    {icon && <IconContainer>{icon}</IconContainer>}
-  </Container>
-);