@workday/canvas-kit-react 5.3.0 → 5.3.4

package/ts3.5/dist/es6/common/lib/theming/breakpoints.d.ts

@@ -7,297 +7,16 @@ export declare enum BreakpointKey {
 }
 export declare type BreakpointFnParam = BreakpointKey | keyof typeof BreakpointKey;
 export declare type CanvasBreakpoints = {
-    /**
-     * ### Zero Breakpoint
-     *
-     * This breakpoint is useful when you need to set a media query `min-width` below small.
-     *
-     * @example
-     * ```ts
-     * import { useTheme } from '@workday/canvas-kit-react/common';
-     * import { space } from '@workday/canvas-kit-react/tokens';
-     *
-     * const theme = useTheme();
-     * const { values } = theme.canvas.breakpoints;
-     * const styles = {
-     *   [`@media (min-width: ${values.zero}px)`]: {
-     *     padding: space.xxs,
-     *   },
-     * }
-     * ```
-     */
-    zero: 0;
-    /**
-     * ### Small Breakpoint
-     *
-     * The small breakpoint provides the `min-width` for mobile devices, such as phones and tablets.
-     * This size ranges from a min-width of 320px to a max-width of 767px.
-     *
-     * @example
-     * ```ts
-     * import { useTheme } from '@workday/canvas-kit-react/common';
-     * import { space } from '@workday/canvas-kit-react/tokens';
-     *
-     * const theme = useTheme();
-     * const { values } = theme.canvas.breakpoints;
-     * const styles = {
-     *   [`@media (min-width: ${values.s}px)`]: {
-     *     padding: space.xs,
-     *   },
-     * }
-     * ```
-     */
-    s: 320;
-    /**
-     * ### Medium Breakpoint
-     *
-     * The medium breakpoint is the min-width for intended for medium screens, such as laptops.
-     * This size ranges from a min-width of 768px to a max-width of 1023px.
-     *
-     * @example
-     * ```ts
-     * import { useTheme } from '@workday/canvas-kit-react/common';
-     * import { space } from '@workday/canvas-kit-react/tokens';
-     *
-     * const theme = useTheme();
-     * const { values } = theme.canvas.breakpoints;
-     * const styles = {
-     *   [`@media (min-width: ${values.m}px)`]: {
-     *     padding: space.s,
-     *   },
-     * }
-     * ```
-     */
-    m: 768;
-    /**
-     * ### Large Breakpoint
-     *
-     * The large breakpoint is the min-width for intended for large screens, such as desktops.
-     * This size ranges from a min-width of 1024px to a max-width of 1439px.
-     *
-     * @example
-     * ```ts
-     * import { useTheme } from '@workday/canvas-kit-react/common';
-     * import { space } from '@workday/canvas-kit-react/tokens';
-     *
-     * const theme = useTheme();
-     * const { values } = theme.canvas.breakpoints;
-     * const styles = {
-     *   [`@media (min-width: ${values.m}px)`]: {
-     *     padding: space.s,
-     *   },
-     * }
-     * ```
-     */
-    l: 1024;
-    /**
-     * ### Extra-Large Breakpoint
-     *
-     * The large breakpoint is the min-width for intended for extra-large screens, such as wide monitors and TVs.
-     * This size has a min-width of 1440px and no max-width.
-     *
-     * @example
-     * ```ts
-     * import { useTheme } from '@workday/canvas-kit-react/common';
-     * import { space } from '@workday/canvas-kit-react/tokens';
-     *
-     * const theme = useTheme();
-     * const { values } = theme.canvas.breakpoints;
-     * const styles = {
-     *   [`@media (min-width: ${values.m}px)`]: {
-     *     padding: space.s
-     *   },
-     * }
-     * ```
-     */
-    xl: 1440;
+    zero: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
 };
 export declare const breakpointKeys: readonly ["zero", "s", "m", "l", "xl"];
-/**
- * ### Theme Breakpoint Values
- *
- * Breakpoints are used by media queries to conditionally apply or modify styles based on the viewport width.
- * This allows the UI to be responsive to various screen sizes. This object provides five breakpoint values
- * that correspond to the min-widths of our standard screen sizes.
- *
- * - `zero`: 0
- * - `s`: 320
- * - `m`: 768
- * - `l`: 1024
- * - `xl`: 1440
- *
- * And these are our standard screen size ranges:
- *
- * - `small` (320px - 767px) Used for mobile-sized screens
- * - `medium` (768px - 1023px) Used for tablet-sized screens
- * - `large` - (1024px - 1439px) Used for laptop and small desktop screens
- * - `extra-large` (≥1440px) Used for very large screens
- *
- * Note: Some applications may only require a subset of screen sizes and not use all breakpoints.
- *
- */
 export declare const breakpoints: CanvasBreakpoints;
-/**
- * ### Up
- *
- * _Returns a media query above the `min-width` for the range of a given breakpoint_
- *
- * Given a `start` breakpoint key ("zero", "s", "m", "l", "xl"),
- * this function returns a media query (string) using a `min-width`.
- *
- * @example
- * ```ts
- * import { useTheme } from '@workday/canvas-kit-react/common';
- * import { space } from '@workday/canvas-kit-react/tokens';
- *
- * const theme = useTheme();
- * const { up } = theme.canvas.breakpoints;
- * const mediaQuery = up('l'); // Returns '@media (min-width: 1024px)'
- * const styles = {
- *   [mediaQuery]: {
- *     padding: space.m,
- *   }
- * };
- * ```
- */
 export declare function up(key: BreakpointFnParam): string;
-/**
- * ### Down
- *
- * _Returns a media query below the `max-width` for the range of a given breakpoint_
- *
- * Given an `end` breakpoint key ("zero", "s", "m", "l", "xl"),
- * this function returns a media query (string) using a `max-width`.
- *
- * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
- * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
- *
- * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width` of `0`,
- * as seen in the second example below.
- *
- * @example
- * ```ts
- * import { useTheme } from '@workday/canvas-kit-react/common';
- * import { space } from '@workday/canvas-kit-react/tokens';
- *
- * const theme = useTheme();
- * const { down } = theme.canvas.breakpoints;
- * const mediaQuery = down('m'); // Returns '@media (max-width: 1023.5px)'
- * const styles = {
- *   [mediaQuery]: {
- *     padding: space.m,
- *   }
- * };
- * ```
- *
- * This example uses the `xl` breakpoint and only adds a `min-width` of `0` to the media query.
- * @example
- * ```ts
- * import { useTheme } from '@workday/canvas-kit-react/common';
- * import { space } from '@workday/canvas-kit-react/tokens';
- *
- * const theme = useTheme();
- * const { down } = theme.canvas.breakpoints;
- * const mediaQuery = down('xl'); // Returns '@media (min-width: 0)'
- * const styles = {
- *   [mediaQuery]: {
- *     padding: space.m,
- *   }
- * };
- * ```
- */
-export declare function down(endKey: BreakpointFnParam): string;
-/**
- * ### Between
- *
- * _Returns a media query between two given breakpoints_
- *
- * Given `start` and `end` breakpoint keys ("zero", "s", "m", "l", "xl"),
- * this function returns a media query (string) using a min-width and max-width.
- *
- * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
- * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
- *
- * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width`,
- * as seen in the second example below.
- *
- * @example
- * ```ts
- * import { useTheme } from '@workday/canvas-kit-react/common';
- * import { space } from '@workday/canvas-kit-react/tokens';
- *
- * const theme = useTheme();
- * const { between } = theme.canvas.breakpoints;
- * // Returns '@media (min-width: 320px) and (max-width: 1023.5px)'
- * const mediaQuery = between('s', 'm');
- * const styles = {
- *   [mediaQuery]: {
- *     padding: space.s,
- *   }
- * };
- * ```
- *
- * This example uses `xl` as the `end` breakpoint and only adds a min-width to the media query.
- * @example
- * ```ts
- * import { useTheme } from '@workday/canvas-kit-react/common';
- * import { space } from '@workday/canvas-kit-react/tokens';
- *
- * const theme = useTheme();
- * const { between } = theme.canvas.breakpoints;
- * const mediaQuery = between('m', 'xl'); // Returns '@media (min-width: 768px)'
- * const styles = {
- *   [mediaQuery]: {
- *     padding: space.s,
- *   }
- * };
- * ```
- */
+export declare function down(key: BreakpointFnParam): string;
 export declare function between(start: BreakpointFnParam, end: BreakpointFnParam): string;
-/**
- * ### Only
- *
- * _Returns a media query with a `min-width` and `max-width` for a given breakpoint_
- *
- * Given a breakpoint key ("zero", "s", "m", "l", "xl"),
- * this function returns a media query (string) using a `min-width` and `max-width`.
- *
- * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
- * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
- *
- * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width` of `1440px`,
- * as seen in the second example below.
- *
- * @example
- * ```ts
- * import { useTheme } from '@workday/canvas-kit-react/common';
- * import { space } from '@workday/canvas-kit-react/tokens';
- *
- * const theme = useTheme();
- * const { only } = theme.canvas.breakpoints;
- * const mediaQuery = only('s'); // Returns '@media (min-width: 320px) and (max-width: 767.5px)'
- * const styles = {
- *   [mediaQuery]: {
- *     padding: space.s,
- *   }
- * };
- * ```
- *
- * This example uses the `xl` breakpoint and only adds a `min-width` of `1440px` to the media query.
- * @example
- * ```ts
- * import { useTheme } from '@workday/canvas-kit-react/common';
- * import { space } from '@workday/canvas-kit-react/tokens';
- *
- * const theme = useTheme();
- * const { only } = theme.canvas.breakpoints;
- * const mediaQuery = only('xl'); // Returns '@media (min-width: 1440px)'
- * const styles = {
- *   [mediaQuery]: {
- *     padding: space.s,
- *   }
- * };
- * ```
- */
 export declare function only(key: BreakpointFnParam): string;
 //# sourceMappingURL=breakpoints.d.ts.map

package/ts3.5/dist/es6/common/lib/theming/types.d.ts

@@ -32,202 +32,12 @@ export interface CanvasTheme {
         success: CanvasThemePalette;
         neutral: CanvasThemePalette;
     };
-    /**
-     * ### Theme Breakpoints
-     *
-     * Breakpoints are used by media queries to conditionally apply or modify styles based on the viewport width.
-     * This allows the UI to be responsive to various screen sizes.
-     *
-     * This breakpoints object contains `values` and several helper functions: `up`, `down`, `between`, and `only`.
-     * You can find more detailed information by inspecting individual values and functions.
-     */
     breakpoints: {
-        /**
-         * ### Breakpoint Values
-         *
-         * This object provides five breakpoint values
-         * that correspond to the min-widths of our standard screen sizes.
-         *
-         * - `zero`: 0
-         * - `s`: 320
-         * - `m`: 768
-         * - `l`: 1024
-         * - `xl`: 1440
-         *
-         * And these are our standard screen size ranges:
-         *
-         * - `small` (320px - 767px) Used for mobile-sized screens
-         * - `medium` (768px - 1023px) Used for tablet-sized screens
-         * - `large` - (1024px - 1439px) Used for laptop and small desktop screens
-         * - `extra-large` (≥1440px) Used for very large screens
-         *
-         * Note: Some applications may only require a subset of screen sizes and not use all breakpoints.
-         *
-         */
         values: CanvasBreakpoints;
-        /**
-         * ### Up
-         *
-         * _Returns a media query above the `min-width` for the range of a given breakpoint_
-         *
-         * Given a `start` breakpoint key ("zero", "s", "m", "l", "xl"),
-         * this function returns a media query (string) using a `min-width`.
-         *
-         * @example
-         * ```ts
-         * import { useTheme } from '@workday/canvas-kit-react/common';
-         * import { space } from '@workday/canvas-kit-react/tokens';
-         *
-         * const theme = useTheme();
-         * const { up } = theme.canvas.breakpoints;
-         * const mediaQuery = up('l'); // Returns '@media (min-width: 1024px)'
-         * const styles = {
-         *   [mediaQuery]: {
-         *     padding: space.m,
-         *   }
-         * };
-         * ```
-         */
         up: (key: BreakpointFnParam) => string;
-        /**
-         * ### Down
-         *
-         * _Returns a media query below the `max-width` for the range of a given breakpoint_
-         *
-         * Given an `end` breakpoint key ("zero", "s", "m", "l", "xl"),
-         * this function returns a media query (string) using a `max-width`.
-         *
-         * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
-         * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
-         *
-         * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width` of `0`,
-         * as seen in the second example below.
-         *
-         * @example
-         * ```ts
-         * import { useTheme } from '@workday/canvas-kit-react/common';
-         * import { space } from '@workday/canvas-kit-react/tokens';
-         *
-         * const theme = useTheme();
-         * const { down } = theme.canvas.breakpoints;
-         * const mediaQuery = down('m'); // Returns '@media (max-width: 1023.5px)'
-         * const styles = {
-         *   [mediaQuery]: {
-         *     padding: space.m,
-         *   }
-         * };
-         * ```
-         *
-         * This example uses the `xl` breakpoint and only adds a `min-width` of `0` to the media query.
-         * @example
-         * ```ts
-         * import { useTheme } from '@workday/canvas-kit-react/common';
-         * import { space } from '@workday/canvas-kit-react/tokens';
-         *
-         * const theme = useTheme();
-         * const { down } = theme.canvas.breakpoints;
-         * const mediaQuery = down('xl'); // Returns '@media (min-width: 0)'
-         * const styles = {
-         *   [mediaQuery]: {
-         *     padding: space.m,
-         *   }
-         * };
-         * ```
-         */
         down: (key: BreakpointFnParam) => string;
-        /**
-         * ### Between
-         *
-         * _Returns a media query between two given breakpoints_
-         *
-         * Given `start` and `end` breakpoint keys ("zero", "s", "m", "l", "xl"),
-         * this function returns a media query (string) using a min-width and max-width.
-         *
-         * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
-         * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
-         *
-         * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width`,
-         * as seen in the second example below.
-         *
-         * @example
-         * ```ts
-         * import { useTheme } from '@workday/canvas-kit-react/common';
-         * import { space } from '@workday/canvas-kit-react/tokens';
-         *
-         * const theme = useTheme();
-         * const { between } = theme.canvas.breakpoints;
-         * // Returns '@media (min-width: 320px) and (max-width: 1023.5px)'
-         * const mediaQuery = between('s', 'm');
-         * const styles = {
-         *   [mediaQuery]: {
-         *     padding: space.s,
-         *   }
-         * };
-         * ```
-         *
-         * This example uses `xl` as the `end` breakpoint and only adds a min-width to the media query.
-         * @example
-         * ```ts
-         * import { useTheme } from '@workday/canvas-kit-react/common';
-         * import { space } from '@workday/canvas-kit-react/tokens';
-         *
-         * const theme = useTheme();
-         * const { between } = theme.canvas.breakpoints;
-         * const mediaQuery = between('m', 'xl'); // Returns '@media (min-width: 768px)'
-         * const styles = {
-         *   [mediaQuery]: {
-         *     padding: space.s,
-         *   }
-         * };
-         * ```
-         */
-        between: (start: BreakpointFnParam, end: BreakpointFnParam) => string;
-        /**
-         * ### Only
-         *
-         * _Returns a media query with a `min-width` and `max-width` for a given breakpoint_
-         *
-         * Given a breakpoint key ("zero", "s", "m", "l", "xl"),
-         * this function returns a media query (string) using a `min-width` and `max-width`.
-         *
-         * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
-         * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
-         *
-         * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width` of `1440px`,
-         * as seen in the second example below.
-         *
-         * @example
-         * ```ts
-         * import { useTheme } from '@workday/canvas-kit-react/common';
-         * import { space } from '@workday/canvas-kit-react/tokens';
-         *
-         * const theme = useTheme();
-         * const { only } = theme.canvas.breakpoints;
-         * const mediaQuery = only('s'); // Returns '@media (min-width: 320px) and (max-width: 767.5px)'
-         * const styles = {
-         *   [mediaQuery]: {
-         *     padding: space.s,
-         *   }
-         * };
-         * ```
-         *
-         * This example uses the `xl` breakpoint and only adds a `min-width` of `1440px` to the media query.
-         * @example
-         * ```ts
-         * import { useTheme } from '@workday/canvas-kit-react/common';
-         * import { space } from '@workday/canvas-kit-react/tokens';
-         *
-         * const theme = useTheme();
-         * const { only } = theme.canvas.breakpoints;
-         * const mediaQuery = only('xl'); // Returns '@media (min-width: 1440px)'
-         * const styles = {
-         *   [mediaQuery]: {
-         *     padding: space.s,
-         *   }
-         * };
-         * ```
-         */
         only: (key: BreakpointFnParam) => string;
+        between: (start: BreakpointFnParam, end: BreakpointFnParam) => string;
     };
     direction: ContentDirection;
 }

package/ts3.5/dist/es6/common/lib/utils/components.d.ts

@@ -79,7 +79,6 @@ export declare type ElementComponent<T extends React.ElementType, P> = {
     }): JSX.Element;
     (props: PropsWithAs<P, T>): JSX.Element;
     displayName?: string;
-    as<E extends React.ElementType>(as: E): ElementComponent<E, P>;
 };
 export declare type Component<P> = {
     __type: 'Component';
@@ -108,7 +107,7 @@ interface RefForwardingComponent<T, P = {}> {
  * return type is `Component<element, Props>` which looks like `Component<'div', Props>` which is a
  * clean interface that tells you the default element that is used.
  */
-export declare const createComponent: <E extends "symbol" | "object" | "button" | "meter" | "textarea" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "clipPath" | "filter" | "mask" | "marker" | "big" | "link" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | ElementComponent<any, any> | React.ComponentClass<{}, any> | React.FunctionComponent<{}> | undefined = undefined>(as?: E | undefined) => <P, SubComponents = {}>({ displayName, Component, subComponents, }: {
+export declare const createComponent: <E extends "symbol" | "object" | "button" | "meter" | "textarea" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "big" | "link" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | ElementComponent<any, any> | React.ComponentClass<{}, any> | React.FunctionComponent<{}> | undefined = undefined>(as?: E | undefined) => <P, SubComponents = {}>({ displayName, Component, subComponents, }: {
     /** This is what the component will look like in the React dev tools. Encouraged to more easily
      * understand the component tree */
     displayName?: string | undefined;
@@ -170,19 +169,10 @@ export declare const createComponent: <E extends "symbol" | "object" | "button"
  *
  * @param fn Function that takes a model and optional ref and returns props
  */
-export declare const createHook: <M extends Model<any, any>, PO extends {}, PI extends {}>(fn: (model: M, ref?: ((instance: any) => void) | React.RefObject<any> | null | undefined, elemProps?: PI | undefined) => PO) => <P extends {}, R>(model: M, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => PO & P & (R extends HTMLOrSVGElement ? {
+export declare const createHook: <M extends Model<any, any>, PO extends {}, PI extends {}>(fn: (model: M, ref?: ((instance: any) => void) | React.RefObject<any> | null | undefined, elemProps?: PI | undefined) => PO) => BehaviorHook<M, PO>;
+export declare type BehaviorHook<M extends Model<any, any>, O extends {}> = <P extends {}, R>(model: M, elemProps?: P, ref?: React.Ref<R>) => O & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;
 } : {});
-export declare const subModelHook: <M extends Model<any, any>, SM extends Model<any, any>, O extends {}>(fn: (model: M) => SM, hook: <P extends {}, R>(model: SM, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => O & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {})) => <P_1 extends {}, R_1>(model: M, elemProps?: P_1 | undefined, ref?: ((instance: R_1 | null) => void) | React.RefObject<R_1> | null | undefined) => O & P_1 & (R_1 extends HTMLOrSVGElement ? {
-    ref: React.Ref<R_1>;
-} : {});
-export declare type BehaviorHook<M extends Model<any, any>, O extends {}> = {
-    bivarianceHack<P extends {}, R>(model: M, elemProps?: P, ref?: React.Ref<R>): O & P & (R extends HTMLOrSVGElement ? {
-        ref: React.Ref<R>;
-    } : {});
-}['bivarianceHack'];
 /**
  * This function will create a new forked ref out of two input Refs. This is useful for components
  * that use `React.forwardRef`, but also need internal access to a Ref.
@@ -207,7 +197,7 @@ export declare type BehaviorHook<M extends Model<any, any>, O extends {}> = {
  *   return <div ref={elementRef}/>
  * })
  */
-export declare function useForkRef<T>(ref1?: React.Ref<T>, ref2?: React.Ref<T>): React.RefCallback<T>;
+export declare function useForkRef<T>(ref1?: React.Ref<T>, ref2?: React.Ref<T>): (instance: T) => void;
 /**
  * This functions handles the common use case where a component needs a local ref and needs to
  * forward a ref to an element.
@@ -224,7 +214,7 @@ export declare function useForkRef<T>(ref1?: React.Ref<T>, ref2?: React.Ref<T>):
  */
 export declare function useLocalRef<T>(ref?: React.Ref<T>): {
     localRef: React.RefObject<T>;
-    elementRef: (instance: T | null) => void;
+    elementRef: (instance: T) => void;
 };
 /**
  * Returns a model, or calls the model hook with config. Clever way around the conditional React
@@ -270,9 +260,9 @@ export declare function useModelContext<T>(context: React.Context<T>, model?: T)
  *   return <div id="foo" {...props}>{children}</div>
  * })
  */
-export declare function composeHooks<M extends Model<any, any>, O1 extends {}, O2 extends {}>(hook1: BehaviorHook<M, O1>, hook2: BehaviorHook<M, O2>): BehaviorHook<M, O1 & O2>;
-export declare function composeHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}>(hook1: BehaviorHook<M, O1>, hook2: BehaviorHook<M, O2>, hook3: BehaviorHook<M, O3>): BehaviorHook<M, O1 & O2 & O3>;
-export declare function composeHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}>(hook1: BehaviorHook<M, O1>, hook2: BehaviorHook<M, O2>, hook3: BehaviorHook<M, O3>, hook4: BehaviorHook<M, O4>): BehaviorHook<M, O1 & O2 & O3 & O4>;
-export declare function composeHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}, O5 extends {}>(hook1: BehaviorHook<M, O1>, hook2: BehaviorHook<M, O2>, hook3: BehaviorHook<M, O3>, hook4: BehaviorHook<M, O4>, hook5: BehaviorHook<M, O5>): BehaviorHook<M, O1 & O2 & O3 & O4 & O5>;
+export declare function composeHooks<M extends Model<any, any>, O1 extends {}, P extends {}, O2 extends {}>(hook1: (model: M, props: P, ref: React.Ref<any>) => O1, hook2: (model: M, props: P, ref: React.Ref<any>) => O2): BehaviorHook<M, O1 & O2>;
+export declare function composeHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}>(hook1: (model: M, props: P, ref: React.Ref<R>) => O1, hook2: (model: M, props: P, ref: React.Ref<R>) => O2, hook3: (model: M, props: P, ref: React.Ref<R>) => O3): BehaviorHook<M, O1 & O2 & O3>;
+export declare function composeHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}>(hook1: (model: M, props: P, ref: React.Ref<R>) => O1, hook2: (model: M, props: P, ref: React.Ref<R>) => O2, hook3: (model: M, props: P, ref: React.Ref<R>) => O3, hook4: (model: M, props: P, ref: React.Ref<R>) => O4): BehaviorHook<M, O1 & O2 & O3 & O4>;
+export declare function composeHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}, O5 extends {}>(hook1: (model: M, props: P, ref: React.Ref<R>) => O1, hook2: (model: M, props: P, ref: React.Ref<R>) => O2, hook3: (model: M, props: P, ref: React.Ref<R>) => O3, hook4: (model: M, props: P, ref: React.Ref<R>) => O4, hook5: (model: M, props: P, ref: React.Ref<R>) => O5): BehaviorHook<M, O1 & O2 & O3 & O4 & O5>;
 export {};
 //# sourceMappingURL=components.d.ts.map

package/ts3.5/dist/es6/common/lib/utils/index.d.ts

@@ -11,6 +11,5 @@ export * from './components';
 export * from './models';
 export * from './elements';
 export * from './useWindowSize';
-export * from './useResizeObserver';
 export * from './StaticStates';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/es6/cookie-banner/index.d.ts

@@ -1,5 +1,5 @@
-import DeprecatedCookieBanner from './lib/CookieBanner';
-export default DeprecatedCookieBanner;
-export { DeprecatedCookieBanner };
+import CookieBanner from './lib/CookieBanner';
+export default CookieBanner;
+export { CookieBanner };
 export * from './lib/CookieBanner';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/es6/cookie-banner/lib/CookieBanner.d.ts

@@ -1,13 +1,5 @@
 import * as React from 'react';
-/**
- * ### Deprecated Cookie Banner Props
- *
- * As of Canvas Kit v6, CookieBanner is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v7. Please see the
- * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
- * for more information.
- */
-export interface DeprecatedCookieBannerProps {
+export interface CookieBannerProps {
     /**
      * If true, set the CookieBanner to the closed state.
      * @default false
@@ -32,16 +24,7 @@ export interface DeprecatedCookieBannerProps {
      */
     settingsLabel?: string;
 }
-/**
- * ### Deprecated Cookie Banner
- *
- * As of Canvas Kit v6, this component is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v7. Please see the
- * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
- * for more information.
- */
-export default class DeprecatedCookieBanner extends React.Component<DeprecatedCookieBannerProps> {
-    componentDidMount(): void;
+export default class CookieBanner extends React.Component<CookieBannerProps> {
     static DefaultNotice: string;
     render(): React.ReactNode;
 }

package/ts3.5/dist/es6/dialog/lib/hooks/useDialogCard.d.ts

@@ -1,10 +1,22 @@
 /// <reference types="@emotion/core" />
-export declare const useDialogCard: <P extends {}, R>(model: import("../../../common").Model<import("../../../popup").PopupState, import("../../../popup").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+export declare const useDialogCard: import("../../../common").BehaviorHook<import("../../../common").Model<any, any>, ({
     role: string;
     'aria-labelledby': string;
 } & {
     id: string;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: import("react").Ref<R>;
-} : {});
+}) | ({
+    role: string;
+    'aria-labelledby': string;
+} & {
+    id: string;
+} & {
+    ref: import("react").Ref<any>;
+}) | ({
+    role: string;
+    'aria-labelledby': string;
+} & {
+    ref: import("react").Ref<any>;
+} & {
+    id: string;
+})>;
 //# sourceMappingURL=useDialogCard.d.ts.map