@wistia/ui 0.0.7 → 0.0.9

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, JSX, ComponentPropsWithoutRef, ComponentPropsWithRef, MouseEvent, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
 
@@ -56,6 +56,43 @@ type AriaLiveContextType = {
 };
 declare const useAriaLive: () => AriaLiveContextType;
 
+declare const colorSchemeValues: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow"];
+type ColorSchemeTypes = (typeof colorSchemeValues)[number];
+
+type BadgeProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Set the color scheme of the `Badge`
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * The `Icon` component to use. Must be an instance of [Icon](/?path=/docs/components-icon--docs)
+     */
+    icon?: JSX.Element;
+    /**
+     * The text to display in the `Badge`
+     */
+    label: string;
+};
+/**
+ * A badge is a compact label, with optional icon, to convey status or context.
+ */
+declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Set the color scheme of the `Badge`
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * The `Icon` component to use. Must be an instance of [Icon](/?path=/docs/components-icon--docs)
+     */
+    icon?: JSX.Element;
+    /**
+     * The text to display in the `Badge`
+     */
+    label: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
 type JustifyContentType = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly';
 type AlignContentType = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch';
 type AlignItemsType = 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
@@ -155,6 +192,9 @@ type BoxProps = ComponentPropsWithoutRef<'div'> & {
      */
     wrapItems?: boolean;
 };
+/**
+ * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
+ */
 declare const Box: {
     ({ alignContent, alignItems, children, direction, hasBoxParent, fill, fillViewport, inline, justifyContent, wrapItems, ...otherProps }: BoxProps): JSX.Element;
     displayName: string;
@@ -163,8 +203,6 @@ declare const Box: {
 type ButtonSizes = 'hero' | 'large' | 'medium' | 'small';
 type ButtonVariants = 'ghost' | 'outline' | 'soft' | 'solid';
 
-type ColorSchemeTypes = 'inherit' | 'default' | 'info' | 'success' | 'warning' | 'error' | 'blue' | 'green' | 'orange' | 'pink' | 'purple' | 'yellow';
-
 type LinkTypes = 'default' | 'email' | 'external' | 'phone';
 type BaseProps = {
     /**
@@ -328,6 +366,10 @@ type ButtonGroupProps = ComponentPropsWithoutRef<'div'> & {
      */
     fullWidth?: boolean;
 };
+/**
+ * ButtonGroup is a layout component that groups buttons together,
+ * with a standardized gap between them.
+ */
 declare const ButtonGroup: {
     ({ children, align, fullWidth, ...otherProps }: ButtonGroupProps): JSX.Element | null;
     displayName: string;
@@ -341,6 +383,9 @@ type DividerProps = ComponentPropsWithoutRef<'hr'> & {
      */
     size?: ResponsiveObject<'lg' | 'sm'> | 'lg' | 'sm';
 };
+/**
+ * A line used to visually separate content
+ */
 declare const Divider: {
     ({ size, ...otherProps }: DividerProps): JSX.Element;
     displayName: string;
@@ -358,6 +403,9 @@ type EllipsisProps = ComponentPropsWithoutRef<'div'> & {
      */
     lines?: number;
 };
+/**
+ * Truncate text with an ellispsis visble at the end
+ */
 declare const Ellipsis: {
     ({ children, lines, ...otherProps }: EllipsisProps): JSX.Element;
     displayName: string;
@@ -432,6 +480,9 @@ type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
      */
     variant?: keyof typeof variantStyleMap$1;
 };
+/**
+ * Displaying heading text, both visually and semantically
+ */
 declare const Heading: (<C = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLHeadingElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "renderAs" | "preventUserSelect"> & {
     renderAs?: any;
 } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
@@ -680,6 +731,11 @@ declare const iconSizeMap: {
     xxl: string;
 };
 type IconProps = ComponentPropsWithoutRef<'svg'> & {
+    /**
+     * Set the color scheme of the button
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
     /**
      * Is Icon on a filled background?
      */
@@ -697,8 +753,12 @@ type IconProps = ComponentPropsWithoutRef<'svg'> & {
      */
     type: IconNameType;
 };
+/**
+ * A component that renders any of our available icons. Note that icons should not be used directly
+ * for interactivity. If you need an interactive element, use [IconButton](?path=/docs/ui-components-iconbutton--docs).
+ */
 declare const Icon: {
-    ({ invertColor, size, style, type, ...otherProps }: IconProps): JSX.Element;
+    ({ invertColor, colorScheme, size, style, type, ...otherProps }: IconProps): JSX.Element;
     displayName: string;
 };
 
@@ -707,7 +767,9 @@ type IconButtonProps = {
      * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
      */
     label: string;
-    /** Disable the tooltip */
+    /**
+     * Disable the tooltip
+     */
     disableTooltip?: boolean;
     /**
      * The Icon component to use, e.g. `<Icon type="favorite" />`
@@ -715,14 +777,17 @@ type IconButtonProps = {
     children: JSX.Element;
 } & (Omit<ButtonAsButtonProps, 'fullWidth' | 'leftIcon' | 'rightIcon'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'leftIcon' | 'rightIcon'>);
 /**
- * IconButton behaves like a [Button](?path=/docs/ui-components-button--docs), but only accepts an Icon as a child.
+ * IconButton behaves like a [Button](?path=/docs/ui-components-button--docs),
+ * but only accepts an [Icon](?path=/docs/ui-components-icon--docs) as a child.
  */
 declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     /**
      * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
      */
     label: string;
-    /** Disable the tooltip */
+    /**
+     * Disable the tooltip
+     */
     disableTooltip?: boolean;
     /**
      * The Icon component to use, e.g. `<Icon type="favorite" />`
@@ -733,7 +798,9 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
      * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
      */
     label: string;
-    /** Disable the tooltip */
+    /**
+     * Disable the tooltip
+     */
     disableTooltip?: boolean;
     /**
      * The Icon component to use, e.g. `<Icon type="favorite" />`
@@ -756,6 +823,9 @@ type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
      */
     text?: ReactNode;
 };
+/**
+ * Used to hide content from the visual client, but keep it readable for screen readers.
+ */
 declare const ScreenReaderOnly: {
     ({ text, children, focusable, ...otherProps }: ScreenReaderOnlyProps): react_jsx_runtime.JSX.Element;
     displayName: string;
@@ -779,6 +849,10 @@ type StackProps = {
     direction?: 'horizontal' | 'vertical';
     renderAs?: ElementType$1;
 };
+/**
+ * Used to layout its children in a vertical or horizontal stack. The gap between each item in the stack can be customized.
+ * This allows for layouting children in a consistent way without needing to manually add margins or padding.
+ */
 declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, keyof StackProps> & {
     renderAs?: any;
 } & StackProps & {
@@ -850,6 +924,9 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
      */
     variant?: keyof typeof variantStyleMap | undefined;
 };
+/**
+ * Used for rending paragraphs and inline text.
+ */
 declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLDivElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "renderAs" | "preventUserSelect" | "prominence"> & {
     renderAs?: any;
 } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -975,6 +1052,8 @@ type TooltipProps = {
 };
 /**
  * Tooltips are a way to provide additional information or context to a user when they hover or focus an element.
+ * For elements that are not interactive, consider using a [Popover](/docs/ui-docs-popover--docs) instead.
+ * TODO - add link to Popover docs when they exist
  */
 declare const Tooltip: {
     ({ delay, direction, content, children, forceOpen, compact, hideArrow, }: TooltipProps): JSX.Element;
@@ -1019,4 +1098,22 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { Box, Button, ButtonGroup, type ButtonProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Link, type LinkProps, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };
+type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The color scheme to apply
+     */
+    colorScheme: ColorSchemeTypes;
+    /**
+     * Children
+     */
+    children: ReactNode;
+};
+/**
+ * A wrapper to apply a color scheme to its children.
+ */
+declare const ColorSchemeWrapper: {
+    ({ colorScheme, children, ...otherProps }: ColorSchemeWrapperProps): JSX.Element;
+    displayName: string;
+};
+
+export { Badge, type BadgeProps, Box, Button, ButtonGroup, type ButtonProps, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Link, type LinkProps, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, JSX, ComponentPropsWithoutRef, ComponentPropsWithRef, MouseEvent, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
 
@@ -56,6 +56,43 @@ type AriaLiveContextType = {
 };
 declare const useAriaLive: () => AriaLiveContextType;
 
+declare const colorSchemeValues: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow"];
+type ColorSchemeTypes = (typeof colorSchemeValues)[number];
+
+type BadgeProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Set the color scheme of the `Badge`
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * The `Icon` component to use. Must be an instance of [Icon](/?path=/docs/components-icon--docs)
+     */
+    icon?: JSX.Element;
+    /**
+     * The text to display in the `Badge`
+     */
+    label: string;
+};
+/**
+ * A badge is a compact label, with optional icon, to convey status or context.
+ */
+declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Set the color scheme of the `Badge`
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * The `Icon` component to use. Must be an instance of [Icon](/?path=/docs/components-icon--docs)
+     */
+    icon?: JSX.Element;
+    /**
+     * The text to display in the `Badge`
+     */
+    label: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
 type JustifyContentType = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly';
 type AlignContentType = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch';
 type AlignItemsType = 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
@@ -155,6 +192,9 @@ type BoxProps = ComponentPropsWithoutRef<'div'> & {
      */
     wrapItems?: boolean;
 };
+/**
+ * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
+ */
 declare const Box: {
     ({ alignContent, alignItems, children, direction, hasBoxParent, fill, fillViewport, inline, justifyContent, wrapItems, ...otherProps }: BoxProps): JSX.Element;
     displayName: string;
@@ -163,8 +203,6 @@ declare const Box: {
 type ButtonSizes = 'hero' | 'large' | 'medium' | 'small';
 type ButtonVariants = 'ghost' | 'outline' | 'soft' | 'solid';
 
-type ColorSchemeTypes = 'inherit' | 'default' | 'info' | 'success' | 'warning' | 'error' | 'blue' | 'green' | 'orange' | 'pink' | 'purple' | 'yellow';
-
 type LinkTypes = 'default' | 'email' | 'external' | 'phone';
 type BaseProps = {
     /**
@@ -328,6 +366,10 @@ type ButtonGroupProps = ComponentPropsWithoutRef<'div'> & {
      */
     fullWidth?: boolean;
 };
+/**
+ * ButtonGroup is a layout component that groups buttons together,
+ * with a standardized gap between them.
+ */
 declare const ButtonGroup: {
     ({ children, align, fullWidth, ...otherProps }: ButtonGroupProps): JSX.Element | null;
     displayName: string;
@@ -341,6 +383,9 @@ type DividerProps = ComponentPropsWithoutRef<'hr'> & {
      */
     size?: ResponsiveObject<'lg' | 'sm'> | 'lg' | 'sm';
 };
+/**
+ * A line used to visually separate content
+ */
 declare const Divider: {
     ({ size, ...otherProps }: DividerProps): JSX.Element;
     displayName: string;
@@ -358,6 +403,9 @@ type EllipsisProps = ComponentPropsWithoutRef<'div'> & {
      */
     lines?: number;
 };
+/**
+ * Truncate text with an ellispsis visble at the end
+ */
 declare const Ellipsis: {
     ({ children, lines, ...otherProps }: EllipsisProps): JSX.Element;
     displayName: string;
@@ -432,6 +480,9 @@ type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
      */
     variant?: keyof typeof variantStyleMap$1;
 };
+/**
+ * Displaying heading text, both visually and semantically
+ */
 declare const Heading: (<C = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLHeadingElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "renderAs" | "preventUserSelect"> & {
     renderAs?: any;
 } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
@@ -680,6 +731,11 @@ declare const iconSizeMap: {
     xxl: string;
 };
 type IconProps = ComponentPropsWithoutRef<'svg'> & {
+    /**
+     * Set the color scheme of the button
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
     /**
      * Is Icon on a filled background?
      */
@@ -697,8 +753,12 @@ type IconProps = ComponentPropsWithoutRef<'svg'> & {
      */
     type: IconNameType;
 };
+/**
+ * A component that renders any of our available icons. Note that icons should not be used directly
+ * for interactivity. If you need an interactive element, use [IconButton](?path=/docs/ui-components-iconbutton--docs).
+ */
 declare const Icon: {
-    ({ invertColor, size, style, type, ...otherProps }: IconProps): JSX.Element;
+    ({ invertColor, colorScheme, size, style, type, ...otherProps }: IconProps): JSX.Element;
     displayName: string;
 };
 
@@ -707,7 +767,9 @@ type IconButtonProps = {
      * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
      */
     label: string;
-    /** Disable the tooltip */
+    /**
+     * Disable the tooltip
+     */
     disableTooltip?: boolean;
     /**
      * The Icon component to use, e.g. `<Icon type="favorite" />`
@@ -715,14 +777,17 @@ type IconButtonProps = {
     children: JSX.Element;
 } & (Omit<ButtonAsButtonProps, 'fullWidth' | 'leftIcon' | 'rightIcon'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'leftIcon' | 'rightIcon'>);
 /**
- * IconButton behaves like a [Button](?path=/docs/ui-components-button--docs), but only accepts an Icon as a child.
+ * IconButton behaves like a [Button](?path=/docs/ui-components-button--docs),
+ * but only accepts an [Icon](?path=/docs/ui-components-icon--docs) as a child.
  */
 declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     /**
      * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
      */
     label: string;
-    /** Disable the tooltip */
+    /**
+     * Disable the tooltip
+     */
     disableTooltip?: boolean;
     /**
      * The Icon component to use, e.g. `<Icon type="favorite" />`
@@ -733,7 +798,9 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
      * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
      */
     label: string;
-    /** Disable the tooltip */
+    /**
+     * Disable the tooltip
+     */
     disableTooltip?: boolean;
     /**
      * The Icon component to use, e.g. `<Icon type="favorite" />`
@@ -756,6 +823,9 @@ type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
      */
     text?: ReactNode;
 };
+/**
+ * Used to hide content from the visual client, but keep it readable for screen readers.
+ */
 declare const ScreenReaderOnly: {
     ({ text, children, focusable, ...otherProps }: ScreenReaderOnlyProps): react_jsx_runtime.JSX.Element;
     displayName: string;
@@ -779,6 +849,10 @@ type StackProps = {
     direction?: 'horizontal' | 'vertical';
     renderAs?: ElementType$1;
 };
+/**
+ * Used to layout its children in a vertical or horizontal stack. The gap between each item in the stack can be customized.
+ * This allows for layouting children in a consistent way without needing to manually add margins or padding.
+ */
 declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, keyof StackProps> & {
     renderAs?: any;
 } & StackProps & {
@@ -850,6 +924,9 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
      */
     variant?: keyof typeof variantStyleMap | undefined;
 };
+/**
+ * Used for rending paragraphs and inline text.
+ */
 declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLDivElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "renderAs" | "preventUserSelect" | "prominence"> & {
     renderAs?: any;
 } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -975,6 +1052,8 @@ type TooltipProps = {
 };
 /**
  * Tooltips are a way to provide additional information or context to a user when they hover or focus an element.
+ * For elements that are not interactive, consider using a [Popover](/docs/ui-docs-popover--docs) instead.
+ * TODO - add link to Popover docs when they exist
  */
 declare const Tooltip: {
     ({ delay, direction, content, children, forceOpen, compact, hideArrow, }: TooltipProps): JSX.Element;
@@ -1019,4 +1098,22 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { Box, Button, ButtonGroup, type ButtonProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Link, type LinkProps, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };
+type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The color scheme to apply
+     */
+    colorScheme: ColorSchemeTypes;
+    /**
+     * Children
+     */
+    children: ReactNode;
+};
+/**
+ * A wrapper to apply a color scheme to its children.
+ */
+declare const ColorSchemeWrapper: {
+    ({ colorScheme, children, ...otherProps }: ColorSchemeWrapperProps): JSX.Element;
+    displayName: string;
+};
+
+export { Badge, type BadgeProps, Box, Button, ButtonGroup, type ButtonProps, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Link, type LinkProps, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };