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

package/breadcrumbs/lib/BreadcrumbsOverflowButton.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import {chevronRightSmallIcon, relatedActionsIcon} from '@workday/canvas-system-icons-web';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
+import {
+  composeHooks,
+  createElemPropsHook,
+  createSubcomponent,
+  subModelHook,
+  useIsRTL,
+} from '@workday/canvas-kit-react/common';
+import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
+import {useMenuTarget} from '@workday/canvas-kit-react/menu';
+import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
+import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
+
+export interface BreadcrumbsOverflowButtonProps extends TertiaryButtonProps {
+  'aria-label': string;
+  /**
+   * style prop applies styles to the whole Flex component,
+   * `useOverflowListTarget` automatically adds hidden styles if list doesn't have items to hide
+   * style prop passed through `overflowButtonProps` from `Breadcrumbs.List` will ignore
+   */
+  style?: FlexProps;
+}
+
+export const useBreadcrumbsOverflowButton = composeHooks(
+  createElemPropsHook(useBreadcrumbsModel)(() => ({
+    'aria-haspopup': true,
+    'aria-controls': 'menu',
+  })),
+  useOverflowListTarget,
+  subModelHook((m: ReturnType<typeof useBreadcrumbsModel>) => m.menu, useMenuTarget)
+);
+
+export const BreadcrumbsOverflowButton = createSubcomponent('button')({
+  displayName: 'Breadcrumbs.OverflowButton',
+  modelHook: useBreadcrumbsModel,
+  elemPropsHook: useBreadcrumbsOverflowButton,
+})<BreadcrumbsOverflowButtonProps>(({style, ...elemProps}, Element) => {
+  return (
+    <Flex alignItems="center" {...style}>
+      <TertiaryButton as={Element} icon={relatedActionsIcon} {...elemProps} />
+      <SystemIcon
+        icon={chevronRightSmallIcon}
+        color={colors.licorice200}
+        colorHover={colors.licorice200}
+        size={20}
+        height={space.l}
+        width={space.l}
+        shouldMirror={useIsRTL()}
+        styles={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
+        aria-hidden
+      />
+    </Flex>
+  );
+});

package/breadcrumbs/lib/hooks/useBreadcrumbsModel.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {defaultGetId, useOverflowListModel} from '@workday/canvas-kit-react/collection';
+import {useMenuModel} from '@workday/canvas-kit-react/menu';
+import {reorganizeHiddenItems} from './utils';
+
+export const useBreadcrumbsModel = createModelHook({
+  defaultConfig: {
+    ...useOverflowListModel.defaultConfig,
+    /**
+     * Optional id for the whole `Breadcrumbs` group. If not provided, a unique id will be created.
+     * @default useUniqueId()
+     */
+    id: '',
+    /**
+     * The default Breadcrumbs component only handles rendering of the link group in a horizontal
+     * orientation, but the subcomponents could be replaced to handle vertical orientations.
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' as typeof useOverflowListModel.defaultConfig.orientation,
+    menuConfig: {} as Partial<typeof useMenuModel.defaultConfig>,
+  },
+  requiredConfig: useOverflowListModel.requiredConfig,
+})(config => {
+  const getId = config.getId || defaultGetId;
+  const items = config.items;
+
+  const model = useOverflowListModel(
+    useOverflowListModel.mergeConfig(config, {
+      orientation: config.orientation || 'horizontal',
+      items,
+      shouldVirtualize: false,
+    })
+  );
+
+  let hiddenIds = model.state.hiddenIds;
+  let nonInteractiveIds = model.state.nonInteractiveIds;
+  hiddenIds = reorganizeHiddenItems(items, hiddenIds, getId);
+  nonInteractiveIds = hiddenIds;
+
+  const state = {
+    ...model.state,
+    hiddenIds,
+    nonInteractiveIds,
+    orientation: config.orientation || 'horizontal',
+  };
+
+  const overflowItems = React.useMemo(
+    () => (items ? items.filter(item => state.hiddenIds.includes(getId(item))) : undefined),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.hiddenIds, items]
+  );
+
+  const events = {
+    ...model.events,
+  };
+
+  const menu = useMenuModel(
+    useMenuModel.mergeConfig(config.menuConfig as Required<typeof config.menuConfig>, {
+      id: `breadcrumbs-menu-${model.state.id}`,
+      items: overflowItems,
+      nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
+      onShow() {
+        // Always select the first item when the menu is opened
+        menu.events.goToFirst();
+      },
+    })
+  );
+
+  return {
+    ...model,
+    state,
+    events,
+    menu,
+  };
+});

package/breadcrumbs/lib/hooks/utils/index.ts

@@ -0,0 +1,22 @@
+export const reorganizeHiddenItems = (
+  items: {id: string}[],
+  hiddenIds: string[],
+  getId: (item: {id: string}) => string
+): string[] => {
+  let updatedHiddenIds = hiddenIds;
+  const totalSize = items.length;
+  const itemSpace = totalSize - hiddenIds.length;
+
+  if (itemSpace <= 2) {
+    // Keep only last items if there is place for two or less items
+    updatedHiddenIds = items.slice(0, totalSize - 1).map(getId);
+  } else if (itemSpace === 3) {
+    // Always keep first and last item if there is place for 3 items
+    updatedHiddenIds = items.slice(1, totalSize - 1).map(getId);
+  } else if (itemSpace > 3 && itemSpace < totalSize) {
+    // Always keep first and 2 last items if there is place for 4 items
+    updatedHiddenIds = items.slice(1, totalSize - 2).map(getId);
+  }
+
+  return updatedHiddenIds;
+};

package/breadcrumbs/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/breadcrumbs",
+  "module": "../dist/es6/breadcrumbs",
+  "sideEffects": false,
+  "types": "../dist/es6/breadcrumbs"
+}

package/button/index.ts

@@ -9,6 +9,12 @@ export {
 export {ToolbarIconButton, ToolbarIconButtonProps} from './lib/ToolbarIconButton';
 export {ToolbarDropdownButton, ToolbarDropdownButtonProps} from './lib/ToolbarDropdownButton';
 export {Hyperlink, HyperlinkProps} from './lib/Hyperlink';
-export {BaseButton, ButtonContainerProps} from './lib/BaseButton';
+export {
+  BaseButton,
+  ButtonContainerProps,
+  BaseButtonProps,
+  getMinWidthStyles,
+  getPaddingStyles,
+} from './lib/BaseButton';
 export {ExternalHyperlink, ExternalHyperlinkProps} from './lib/ExternalHyperlink';
 export * from './lib/types';

package/button/lib/BaseButton.tsx

@@ -29,10 +29,6 @@ export interface ButtonContainerProps extends BoxProps, GrowthBehavior {
    * @default 'medium'
    */
   size?: ButtonSizes;
-  /**
-   * The ref to the button that the styled component renders.
-   */
-  ref?: React.Ref<HTMLButtonElement>;
   /**
    * Whether the icon should received filled (colored background layer) or regular styles.
    * Corresponds to `toggled` in ToolbarIconButton
@@ -40,6 +36,13 @@ export interface ButtonContainerProps extends BoxProps, GrowthBehavior {
   fillIcon?: boolean;
 }
 
+/**
+ * Extends all the style properties from Box to our buttons as well as props from ButtonContainerProps.
+ * We omit `ref` since all of our buttons use `createComponent` and already give access to `ref`.
+ * Use this type to extend and customize any one off buttons that you want full control over styling.
+ */
+export interface BaseButtonProps extends Omit<ButtonContainerProps, 'ref'> {}
+
 function getIconColorSelectors(
   {
     canvas: {

package/button/lib/DeleteButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {ButtonColors} from './types';
-import {BaseButton, getMinWidthStyles, getPaddingStyles} from './BaseButton';
+import {BaseButton, BaseButtonProps, getMinWidthStyles, getPaddingStyles} from './BaseButton';
 import {
   GrowthBehavior,
   useTheme,
@@ -9,7 +9,7 @@ import {
   createComponent,
 } from '@workday/canvas-kit-react/common';
 
-export interface DeleteButtonProps extends Themeable, GrowthBehavior {
+export interface DeleteButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
   /**
    * The size of the Button.
    * @default 'medium'

package/button/lib/PrimaryButton.tsx

@@ -11,7 +11,7 @@ import {
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {ButtonSizes, IconPositions} from './types';
-import {BaseButton, getMinWidthStyles, getPaddingStyles} from './BaseButton';
+import {BaseButton, BaseButtonProps, getMinWidthStyles, getPaddingStyles} from './BaseButton';
 
 const getPrimaryButtonColors = (variant: 'inverse' | undefined, theme: EmotionCanvasTheme) => {
   const {
@@ -85,7 +85,7 @@ const getPrimaryButtonColors = (variant: 'inverse' | undefined, theme: EmotionCa
   }
 };
 
-export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
+export interface PrimaryButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
   /**
    * The variant of the PrimaryButton.
    * @default undefined

package/button/lib/SecondaryButton.tsx

@@ -11,9 +11,9 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {ButtonColors, ButtonSizes, IconPositions} from './types';
-import {BaseButton, getMinWidthStyles, getPaddingStyles} from './BaseButton';
+import {BaseButton, BaseButtonProps, getMinWidthStyles, getPaddingStyles} from './BaseButton';
 
-export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
+export interface SecondaryButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
   /**
    * The variant of the SecondaryButton.
    * @default undefined

package/button/lib/TertiaryButton.tsx

@@ -11,9 +11,9 @@ import {
 import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {ButtonColors, IconPositions, ButtonSizes} from './types';
-import {BaseButton} from './BaseButton';
+import {BaseButton, BaseButtonProps} from './BaseButton';
 
-export interface TertiaryButtonProps extends Themeable {
+export interface TertiaryButtonProps extends Themeable, BaseButtonProps {
   /**
    * The variant of the TertiaryButton.
    * @default undefined
@@ -44,14 +44,23 @@ export interface TertiaryButtonProps extends Themeable {
    * @default false
    */
   shouldMirrorIcon?: boolean;
+  /**
+   * If set to `true`, transform text to all letters uppercase
+   * @default undefined
+   */
   allCaps?: boolean;
   children?: React.ReactNode;
+  /**
+   * If set to `true`, make icon button available to use theme colors instead of default
+   * @default false
+   */
+  isThemeable?: boolean;
 }
 
 const getTertiaryButtonColors = (
   variant: 'inverse' | undefined,
   theme: EmotionCanvasTheme,
-  children: React.ReactNode
+  hasThemeStyles: boolean
 ): ButtonColors => {
   const {
     canvas: {
@@ -99,27 +108,27 @@ const getTertiaryButtonColors = (
   } else {
     return {
       default: {
-        icon: children ? themePrimary.main : colors.blackPepper400,
+        icon: hasThemeStyles ? themePrimary.main : colors.blackPepper400,
         label: themePrimary.main,
       },
       hover: {
         background: colors.soap200,
-        icon: children ? themePrimary.dark : colors.blackPepper500,
+        icon: hasThemeStyles ? themePrimary.dark : colors.blackPepper500,
         label: themePrimary.dark,
       },
       active: {
         background: colors.soap300,
-        icon: children ? themePrimary.dark : colors.blackPepper500,
+        icon: hasThemeStyles ? themePrimary.dark : colors.blackPepper500,
         label: themePrimary.dark,
       },
       focus: {
-        icon: children ? themePrimary.main : colors.blackPepper500,
+        icon: hasThemeStyles ? themePrimary.main : colors.blackPepper500,
         label: themePrimary.main,
         focusRing: focusRing({innerColor: colors.blueberry400}, theme),
       },
       disabled: {
         background: 'transparent',
-        icon: children ? themePrimary.main : colors.blackPepper400,
+        icon: hasThemeStyles ? themePrimary.main : colors.blackPepper400,
         label: themePrimary.main,
       },
     };
@@ -197,6 +206,7 @@ export const TertiaryButton = createComponent('button')({
     {
       size = 'medium',
       iconPosition = 'start',
+      isThemeable = false,
       variant,
       children,
       icon,
@@ -208,17 +218,18 @@ export const TertiaryButton = createComponent('button')({
     Element
   ) => {
     const theme = useTheme();
+    const hasThemeStyles = !!children || isThemeable;
 
     return (
       <StyledTertiaryButtonContainer
         ref={ref}
         as={Element}
         allCaps={allCaps}
-        colors={getTertiaryButtonColors(variant, theme, children)}
+        colors={getTertiaryButtonColors(variant, theme, hasThemeStyles)}
         size={size}
         padding={getPaddingStyles(icon, iconPosition, children, size)}
         minWidth={getMinWidthStyles(children, size)}
-        style={{borderRadius: children ? borderRadius.m : borderRadius.circle}}
+        borderRadius={children ? borderRadius.m : borderRadius.circle}
         {...elemProps}
       >
         {icon && iconPosition === 'start' && (

package/card/lib/CardBody.tsx

@@ -1,18 +1,15 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
 import {type} from '@workday/canvas-kit-react/tokens';
-import {StyledType, createComponent} from '@workday/canvas-kit-react/common';
+import {createComponent} from '@workday/canvas-kit-react/common';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
-const Body = styled(Box)<BoxProps & StyledType>(type.levels.subtext.large);
-
 export const CardBody = createComponent('div')({
   displayName: 'Card.Body',
   Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
     return (
-      <Body ref={ref} as={Element} {...elemProps}>
+      <Box ref={ref} as={Element} {...type.levels.subtext.large} {...elemProps}>
         {children}
-      </Body>
+      </Box>
     );
   },
 });

package/card/lib/CardHeading.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
-import {type} from '@workday/canvas-kit-react/tokens';
-import {StyledType, createComponent} from '@workday/canvas-kit-react/common';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {BoxProps} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
 
 export interface CardHeadingProps extends BoxProps {
   /**
@@ -13,17 +12,21 @@ export interface CardHeadingProps extends BoxProps {
   children?: React.ReactNode;
 }
 
-const Heading = styled(Box.as('h3'))<StyledType>(type.levels.body.large, {
-  fontWeight: type.properties.fontWeights.bold,
-});
-
 export const CardHeading = createComponent('h3')({
   displayName: 'Card.Heading',
   Component: ({children, ...elemProps}: CardHeadingProps, ref, Element) => {
     return (
-      <Heading ref={ref} marginBottom="m" marginTop={0} as={Element} {...elemProps}>
+      <Text
+        ref={ref}
+        typeLevel="body.large"
+        fontWeight="bold"
+        marginBottom="m"
+        marginTop={0}
+        as={Element}
+        {...elemProps}
+      >
         {children}
-      </Heading>
+      </Text>
     );
   },
 });

package/checkbox/index.ts

@@ -1,2 +1 @@
-
 export * from './lib/Checkbox';

package/checkbox/lib/Checkbox.tsx

@@ -11,15 +11,10 @@ import {
   useTheme,
   Themeable,
 } from '@workday/canvas-kit-react/common';
-import {
-  canvas,
-  borderRadius,
-  colors,
-  inputColors,
-  spaceNumbers,
-} from '@workday/canvas-kit-react/tokens';
+import {borderRadius, colors, inputColors, spaceNumbers} from '@workday/canvas-kit-react/tokens';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {checkSmallIcon} from '@workday/canvas-system-icons-web';
+import {LabelText} from '@workday/canvas-kit-react/text';
 
 export interface CheckboxProps extends Themeable {
   /**
@@ -308,21 +303,6 @@ const IndeterminateBox = styled('div')<CheckboxProps>(
   })
 );
 
-const CheckboxLabel = styled('label')<{disabled?: boolean; variant?: string}>(
-  {
-    ...canvas.type.levels.subtext.large,
-    paddingLeft: checkboxLabelDistance,
-  },
-  ({variant}) => (variant === 'inverse' ? {color: colors.frenchVanilla100} : undefined),
-  ({disabled, variant}) =>
-    disabled
-      ? {
-          color: variant === 'inverse' ? colors.frenchVanilla100 : inputColors.disabled.text,
-          opacity: variant === 'inverse' ? '.4' : '1',
-        }
-      : {cursor: 'pointer'}
-);
-
 export const Checkbox = createComponent('input')({
   displayName: 'Checkbox',
   Component: (
@@ -381,9 +361,14 @@ export const Checkbox = createComponent('input')({
           </CheckboxBackground>
         </CheckboxInputWrapper>
         {label && (
-          <CheckboxLabel variant={variant} htmlFor={inputId} disabled={disabled}>
+          <LabelText
+            htmlFor={inputId}
+            disabled={disabled}
+            variant={variant}
+            paddingLeft={checkboxLabelDistance}
+          >
             {label}
-          </CheckboxLabel>
+          </LabelText>
         )}
       </CheckboxContainer>
     );

package/color-picker/index.ts

@@ -1,4 +1,3 @@
-
 export * from './lib/ColorInput';
 export * from './lib/ColorPreview';
 export * from './lib/parts/ColorSwatch';

package/color-picker/lib/ColorInput.tsx

@@ -110,9 +110,8 @@ const PoundSignPrefix = styled('span')<Pick<ColorInputProps, 'disabled'>>(
 
 const SwatchTile = styled(ColorSwatch)({
   position: 'absolute',
-  top: 0,
+  top: '10px', // input is 40px high, and the tile is 20 x 20px, this centers the tile
   left: space.xxs,
-  marginTop: '10px', // Fix vertical alignment on IE11
   boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.25)',
   pointerEvents: 'none',
 });

package/common/index.ts

@@ -7,3 +7,4 @@ export * from './lib/utils';
 export * from './lib/CanvasProvider';
 export * from './lib/InputProvider';
 export * from './lib/EllipsisText';
+export * from './lib/responsive/useResponsiveContainerStyles';

package/common/lib/InputProvider.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-// @ts-ignore
-import elementClosestPolyfill from 'element-closest';
 
 export interface InputProviderProps {
   provideIntent?: boolean;
@@ -171,9 +169,6 @@ export class InputProvider extends React.Component<React.PropsWithChildren<Input
   }
 
   componentDidMount() {
-    // For IE11 and under, we'll need to polyfill element.closest
-    elementClosestPolyfill(window);
-
     // Check for passive event listener support
     this.supportsPassive = supportsPassive();
 

package/common/lib/responsive/useResponsiveContainerStyles.ts

@@ -0,0 +1,128 @@
+import { useTheme, breakpointKeys, CanvasBreakpoints } from "@workday/canvas-kit-react/common";
+import type {AllStyleProps} from "@workday/canvas-kit-react/layout";
+import {isWithinBreakpoint} from '../utils/isWithinBreakpoint'
+
+export type BreakpointKeys = typeof breakpointKeys[number];
+
+type ResponsiveCSSObject<T> = {
+  [P in keyof T]: Partial<Record<BreakpointKeys, AllStyleProps>> &
+    AllStyleProps;
+};
+type CSSObject<T> = {
+  [P in keyof T]: AllStyleProps;
+};
+
+// Takes in CanvasBreakpoint keys and returns current breakpoint key. Current breakpoint key is determined by the `width` of the container
+
+const getSize = (width: number, breakpoints: CanvasBreakpoints) => {
+  const ranges: {[key: string ]: [number, number?]} = {
+    'zero': [0, breakpoints.s],
+    's': [breakpoints.s, breakpoints.m],
+    'm': [breakpoints.m, breakpoints.l],
+    'l': [breakpoints.l, breakpoints.xl],
+    'xl': [breakpoints.xl]
+  };
+  return breakpointKeys.find((size: BreakpointKeys) => isWithinBreakpoint(width, ...ranges[size])) || 'zero';
+}
+
+// Returns responsive style objects that are within the current CanvasBreakpoint size
+
+function getStyles<T>(key: BreakpointKeys, styles: ResponsiveCSSObject<T>) {
+  const responsiveStyles = {} as CSSObject<T>;
+  const breakpointSize = breakpointKeys.indexOf(key);
+  for (let i = 0; i <= breakpointSize; i++) {
+    const breakpointName = breakpointKeys[i];
+    // property is key of the style object
+    Object.keys(styles).forEach((property) => {
+      const { zero, s, m, l, xl, ...base } = styles[property as keyof T];
+      const currentBreakpointStyles =
+        styles[property as keyof T][breakpointName] ?? {};
+      const previousBreakpointStyles = responsiveStyles[property as keyof T] ?? {};
+      responsiveStyles[property as keyof T] = {
+        ...base,
+        ...previousBreakpointStyles,
+        ...currentBreakpointStyles
+      };
+    });
+  }
+  return responsiveStyles;
+}
+
+/**
+ * useResponsiveContainerStyles
+ *
+ * ---
+ *
+ * This hook allows you to create container-based responsive styles with objects.
+ * It accepts two or three arguments: the responsive style object, the container width, and (optionally) the theme object.
+ * Each style object accepts five breakpoint keys: "zero", "s", "m", "l", and "xl".
+ * The sizes will act like `min-width`. For example, if you want to apply styles from `medium` and up, then you would write those styles under `m`.
+ *
+ * @example
+ * ```tsx
+import {Flex, Box} from '@workday/canvas-kit-react/layout';
+import {
+  useResponsiveStyles,
+} from '@workday/canvas-kit-react/common';
+
+const ref = React.useRef(null);
+const [containerWidth, setContainerWidth] = React.useState(0);
+
+useResizeObserver({
+  ref: ref,
+  onResize: data => {
+    setWidth(data.width || 0);
+  },
+});
+
+const containerResponsiveStyles = useResponsiveStyles(
+  {
+    flex: {
+      flexDirection: 'column',
+      padding: 'm',
+      depth: 1,
+      borderRadius: 'l',
+      zero: {
+        backgroundColor: 'Red',
+      },
+      s: {
+        backgroundColor: 'Orange',
+      },
+      m: {
+        backgroundColor: 'Yellow',
+      },
+      l: {
+        backgroundColor: 'Green',
+      },
+      xl: {
+        backgroundColor: 'Blue',
+      },
+    },
+    box: {
+      padding: 's',
+    },
+  },
+  containerWidth
+);
+
+return (
+    <Box ref={ref}>
+      <Flex {...containerResponsiveStyles.flex}>
+        <Box {...containerResponsiveStyles.box}>Hello World</Box>
+      </Flex>
+    </Box>
+);
+```
+ */
+
+export function useResponsiveContainerStyles<T extends ResponsiveCSSObject<T>>(
+  styles: ResponsiveCSSObject<T>,
+  width: number,
+  theme = {}
+) {
+  const canvasTheme = useTheme(theme);
+  const breakpoints = canvasTheme.canvas.breakpoints.values;
+
+  const size = getSize(width, breakpoints);
+  return getStyles(size, styles);
+}

package/common/lib/theming/index.ts

@@ -1,7 +1,7 @@
 export * from './breakpoints';
 export {createCanvasTheme} from './createCanvasTheme';
 export * from './types';
-export {default as styled} from './styled';
+export {default as styled, StyleRewriteFn} from './styled';
 export * from './theme';
 export * from './useTheme';
 export * from './useIsRTL';