@pega/cosmos-react-core 2.0.0-dev.14.0 → 2.0.0-dev.15.0

package/lib/components/AppShell/AppShell.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport { Action, AsProp, BaseProps, ForwardProps } from '../../types';\nimport { ImageProps } from '../Image';\nimport { SearchInputProps } from '../SearchInput';\n\n/** AppShell props */\n\nexport interface AppInfoProps {\n  /** The primary text to render in the header. */\n  appName: string;\n  /** The source for a small application image or logo that is rendered in the nav bar. */\n  imageSrc: ImageProps['src'];\n  /** The source for the full size application image or logo that is rendered in the app header, if enabled. */\n  fullImageSrc?: ImageProps['src'];\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** Click handler for the header. */\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  /** The secondary text to render in the header. */\n  portalName?: string;\n  /** Specifies where to open the link href. */\n  target?: string;\n}\n\nexport interface AppShellProps extends BaseProps, AppShellDrawerProps {\n  /** Props related to the App Shell header. */\n  appInfo: AppInfoProps;\n  /** The content of the application. */\n  main: ReactNode;\n  /** The active user of the application. */\n  operator: OperatorProps;\n  /** If true, a header will render containing the logo and name of the app as well as search and operator regions. */\n  appHeader?: boolean;\n  /** Props related to the Search Input. */\n  searchInput?: SearchInputProps;\n  /**\n   * The aria-label for the search input.\n   * @default \"Sitewide\"\n   */\n  searchLabel?: string;\n  /** A set of cases that will render in an expanded list within the App Shell. */\n  caseTypes?: CaseTypeProps[];\n  /** A set of links that will render as a flat list in the App Shell. */\n  links?: LinkProps[];\n  /** A set of cases that will render as a flat list in the App Shell. */\n  cases?: CaseProps[];\n  /** Used for alternate environments, such as \"dev\" or \"staging\". */\n  environment?: {\n    name: string;\n    /** @default theme.base.colors.red['extra-light'] */\n    color?: string;\n  };\n  /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n  utils?: UtilItemProps[];\n  /** Banners will render above the main content if they are provided. */\n  banners?: ReactNode;\n}\nexport interface CaseTypeProps {\n  /** The display name of the case. */\n  name: string;\n  /** Click handler for the case. */\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface LinkProps {\n  /** Unique id */\n  id: string;\n  /** The display name of the link. */\n  name: string;\n  /** URL or DOM id to navigate to. */\n  href: string;\n  /** The name of the Cosmos Icon to render as a visual. */\n  icon?: string;\n  /** Determines if the link represents the active page. */\n  active?: boolean;\n  /** A set of nested links. */\n  links?: LinkProps[];\n  /** Click handler for the link. */\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n}\n\nexport interface CaseProps {\n  /** Unique id */\n  id: string;\n  /** Name of the case or some primary information like title. */\n  primary: string;\n  /** Additional info of a case like timestamp. */\n  secondary?: string;\n  /** A visual element identifying the case. If not passed will render case-solid icon */\n  visual?: ReactNode;\n  /** Determines if the case represents the active page. */\n  active?: boolean;\n  /** Click handler for the case . */\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Dismiss handler for the case. */\n  onDismiss?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface OperatorProps {\n  /** A visual element identifying the operator. */\n  avatar: ReactNode;\n  /** A list of actions that will populate a menu attached to the operator. */\n  actions: Action[];\n  /** The name of the operator. */\n  name: string;\n}\n\nexport interface UtilItemProps extends Pick<NavListItemProps, 'visual' | 'actions' | 'onClick'> {\n  /**  The display name of an utility item. */\n  name: string;\n  /* Number when given displays on top-right of a given icon.  */\n  count?: number;\n  /**  View that renders on an appShell drawer onClick of an item */\n  drawerView?: ReactNode;\n  /** Heading for view that renders */\n  drawerHeader?: string;\n  /** Callback that fires on appshell drawer open */\n  onDrawerOpen?: () => void;\n  /** Callback that fires on appshell drawer close */\n  onDrawerClose?: () => void;\n}\nexport interface UtilsProps {\n  /** The active user of the application. */\n  operator: AppShellProps['operator'];\n  /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n  items?: UtilItemProps[];\n  appHeader?: boolean;\n}\nexport interface NavListProps extends AsProp, BaseProps {\n  items?: NavListItemProps[];\n  nestedList?: boolean;\n  collapsed?: boolean;\n}\n\nexport interface NavListItemProps extends AsProp, BaseProps {\n  id?: string;\n  visual?: ReactNode;\n  primary: string;\n  secondary?: string;\n  href?: string;\n  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n  active?: boolean;\n  items?: NavListProps['items'];\n  collapseItems?: boolean;\n  actions?: OperatorProps['actions'];\n  dismissible?: boolean;\n  onDismiss?: MouseEventHandler<HTMLButtonElement>;\n  forwardedRef?: Ref<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>;\n}\n\n/** AppHeader props */\n\nexport interface AppHeaderProps extends BaseProps, AppInfoProps {\n  operator: AppShellProps['operator'];\n  searchInput?: AppShellProps['searchInput'];\n  searchLabel?: AppShellProps['searchLabel'];\n}\n\n/** Drawer props */\n\nexport interface DrawerListProps {\n  items: (DrawerItemProps & ForwardProps)[];\n  loading?: boolean;\n  viewAll?: {\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  } & ForwardProps;\n  newNotifications?: number;\n  onItemClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  onItemPinToggle?: (id: string) => void;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n}\n\nexport interface NotificationListProps {\n  /** A list of notification items. */\n  items: DrawerListProps['items'];\n  /**\n   * If true, a loading indicator will render in place of the list.\n   * @default false\n   * */\n  loading?: DrawerListProps['loading'];\n  /**\n   * A set of callback functions for the view all functionality, if provided.\n   * The onClick callback is for button use, and the href for link use. If provided both, defaults to link. */\n  viewAll?: DrawerListProps['viewAll'];\n  /** Number of new notifications. */\n  newNotifications?: DrawerListProps['newNotifications'];\n  /** Callback function run when an item is clicked on. */\n  onItemClick?: DrawerListProps['onItemClick'];\n  /** Callback function that runs after the Drawer opens. */\n  onDrawerOpen?: DrawerListProps['onDrawerOpen'];\n  /** Callback function that runs after the Drawer closes. */\n  onDrawerClose?: DrawerListProps['onDrawerClose'];\n}\n\nexport interface RecentsListProps {\n  /** A list of recent activity items. */\n  items: DrawerListProps['items'];\n  /**\n   * If true, a loading indicator will render in place of the list.\n   * @default false\n   * */\n  loading?: DrawerListProps['loading'];\n  /**\n   * A set of callback functions for the view all functionality, if provided.\n   * The onClick callback is for button use, and the href for link use. If provided both, defaults to link. */\n  viewAll?: DrawerListProps['viewAll'];\n  /** Callback function that runs when an item pin is clicked. */\n  onItemPinToggle?: DrawerListProps['onItemPinToggle'];\n  /** Callback function that runs when an item is clicked on. */\n  onItemClick?: DrawerListProps['onItemClick'];\n  /** Callback function that runs after the Drawer opens. */\n  onDrawerOpen?: DrawerListProps['onDrawerOpen'];\n  /** Callback function that runs after the Drawer closes. */\n  onDrawerClose?: DrawerListProps['onDrawerClose'];\n}\n\nexport interface PinsListProps {\n  /** A list of pinned items. */\n  items: DrawerListProps['items'];\n  /**\n   * If true, a loading indicator will render in place of the list.\n   * @default false\n   * */\n  loading?: DrawerListProps['loading'];\n  /**\n   * A set of callback functions for the view all functionality, if provided.\n   * The onClick callback is for button use, and the href for link use. If provided both, defaults to link. */\n  viewAll?: DrawerListProps['viewAll'];\n  /** Callback function that runs when an item pin is clicked. */\n  onItemPinToggle?: DrawerListProps['onItemPinToggle'];\n  /** Callback function that runs when an item is clicked on. */\n  onItemClick?: DrawerListProps['onItemClick'];\n}\n\nexport interface AppShellDrawerProps {\n  /** A list of notifications and handler functions. */\n  notifications?: NotificationListProps;\n  /** A list of recently visited items and handler functions. */\n  recents?: RecentsListProps;\n  /** A list of pinned items to display above recent items and handler functions. */\n  pins?: PinsListProps;\n}\n\nexport interface DrawerItemProps extends BaseProps {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** A flag indicating if the item has been pinned or not. */\n  pinned?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** The handler hat is called when a pin icon is toggled on an item. */\n  onPinToggle?: (id: string) => void;\n}\n\nexport interface ListProps extends DrawerListProps {\n  headingText?: string;\n  emptyText: string;\n  displayRecents: boolean;\n  displayPins?: boolean;\n}\n"]}
+{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport { Action, AsProp, BaseProps, ForwardProps } from '../../types';\nimport { ImageProps } from '../Image';\nimport { SearchInputProps } from '../SearchInput';\n\n/** AppShell props */\n\nexport interface AppInfoProps {\n  /** The primary text to render in the header. */\n  appName: string;\n  /** The source for a small application image or logo that is rendered in the nav bar. */\n  imageSrc: ImageProps['src'];\n  /** The source for the full size application image or logo that is rendered in the app header, if enabled. */\n  fullImageSrc?: ImageProps['src'];\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** Click handler for the header. */\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  /** The secondary text to render in the header. */\n  portalName?: string;\n  /** Specifies where to open the link href. */\n  target?: string;\n}\n\nexport interface AppShellProps extends BaseProps, AppShellDrawerProps {\n  /** Props related to the App Shell header. */\n  appInfo: AppInfoProps;\n  /** The content of the application. */\n  main: ReactNode;\n  /** The active user of the application. */\n  operator: OperatorProps;\n  /** If true, a header will render containing the logo and name of the app as well as search and operator regions. */\n  appHeader?: boolean;\n  /** Props related to the Search Input. */\n  searchInput?: SearchInputProps;\n  /**\n   * The aria-label for the search input.\n   * @default \"Sitewide\"\n   */\n  searchLabel?: string;\n  /** A set of cases that will render in an expanded list within the App Shell. */\n  caseTypes?: CaseTypeProps[];\n  /** A set of links that will render as a flat list in the App Shell. */\n  links?: LinkProps[];\n  /** A set of cases that will render as a flat list in the App Shell. */\n  cases?: CaseProps[];\n  /** Used for alternate environments, such as \"dev\" or \"staging\". */\n  environment?: {\n    name: string;\n    /** @default theme.base.colors.red['extra-light'] */\n    color?: string;\n  };\n  /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n  utils?: UtilItemProps[];\n  /** Banners will render above the main content if they are provided. */\n  banners?: ReactNode;\n}\nexport interface CaseTypeProps {\n  /** The display name of the case. */\n  name: string;\n  /** Click handler for the case. */\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface LinkProps {\n  /** Unique id */\n  id: string;\n  /** The display name of the link. */\n  name: string;\n  /** URL or DOM id to navigate to. */\n  href: string;\n  /** The name of the Cosmos Icon to render as a visual. */\n  icon?: string;\n  /** Determines if the link represents the active page. */\n  active?: boolean;\n  /** A set of nested links. */\n  links?: LinkProps[];\n  /** Click handler for the link. */\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n}\n\nexport interface CaseProps {\n  /** Unique id */\n  id: string;\n  /** Name of the case or some primary information like title. */\n  primary: string;\n  /** Additional info of a case like timestamp. */\n  secondary?: string;\n  /** A visual element identifying the case. If not passed will render case-solid icon */\n  visual?: ReactNode;\n  /** Determines if the case represents the active page. */\n  active?: boolean;\n  /** Click handler for the case . */\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Dismiss handler for the case. */\n  onDismiss?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface OperatorProps {\n  /** A visual element identifying the operator. */\n  avatar: ReactNode;\n  /** A list of actions that will populate a menu attached to the operator. */\n  actions: Action[];\n  /** The name of the operator. */\n  name: string;\n}\n\nexport interface UtilItemProps extends Pick<NavListItemProps, 'visual' | 'actions' | 'onClick'> {\n  /**  The display name of an utility item. */\n  name: string;\n  /* Number when given displays on top-right of a given icon.  */\n  count?: number;\n  /**  View that renders on an appShell drawer onClick of an item */\n  drawerView?: ReactNode;\n  /** Heading for view that renders */\n  drawerHeader?: string;\n  /** Callback that fires on appshell drawer open */\n  onDrawerOpen?: () => void;\n  /** Callback that fires on appshell drawer close */\n  onDrawerClose?: () => void;\n}\nexport interface UtilsProps {\n  /** The active user of the application. */\n  operator: AppShellProps['operator'];\n  /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n  items?: UtilItemProps[];\n  appHeader?: boolean;\n}\nexport interface NavListProps extends AsProp, BaseProps {\n  items?: NavListItemProps[];\n  nestedList?: boolean;\n  collapsed?: boolean;\n}\n\nexport interface NavListItemProps extends AsProp, BaseProps, ForwardProps {\n  id?: string;\n  visual?: ReactNode;\n  primary: string;\n  secondary?: string;\n  href?: string;\n  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n  active?: boolean;\n  items?: NavListProps['items'];\n  collapseItems?: boolean;\n  actions?: OperatorProps['actions'];\n  dismissible?: boolean;\n  onDismiss?: MouseEventHandler<HTMLButtonElement>;\n  forwardedRef?: Ref<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>;\n}\n\n/** AppHeader props */\n\nexport interface AppHeaderProps extends BaseProps, AppInfoProps {\n  operator: AppShellProps['operator'];\n  searchInput?: AppShellProps['searchInput'];\n  searchLabel?: AppShellProps['searchLabel'];\n}\n\n/** Drawer props */\n\nexport interface DrawerListProps {\n  items: (DrawerItemProps & ForwardProps)[];\n  loading?: boolean;\n  viewAll?: {\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  } & ForwardProps;\n  newNotifications?: number;\n  onItemClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  onItemPinToggle?: (id: string) => void;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n}\n\nexport interface NotificationListProps {\n  /** A list of notification items. */\n  items: DrawerListProps['items'];\n  /**\n   * If true, a loading indicator will render in place of the list.\n   * @default false\n   * */\n  loading?: DrawerListProps['loading'];\n  /**\n   * A set of callback functions for the view all functionality, if provided.\n   * The onClick callback is for button use, and the href for link use. If provided both, defaults to link. */\n  viewAll?: DrawerListProps['viewAll'];\n  /** Number of new notifications. */\n  newNotifications?: DrawerListProps['newNotifications'];\n  /** Callback function run when an item is clicked on. */\n  onItemClick?: DrawerListProps['onItemClick'];\n  /** Callback function that runs after the Drawer opens. */\n  onDrawerOpen?: DrawerListProps['onDrawerOpen'];\n  /** Callback function that runs after the Drawer closes. */\n  onDrawerClose?: DrawerListProps['onDrawerClose'];\n}\n\nexport interface RecentsListProps {\n  /** A list of recent activity items. */\n  items: DrawerListProps['items'];\n  /**\n   * If true, a loading indicator will render in place of the list.\n   * @default false\n   * */\n  loading?: DrawerListProps['loading'];\n  /**\n   * A set of callback functions for the view all functionality, if provided.\n   * The onClick callback is for button use, and the href for link use. If provided both, defaults to link. */\n  viewAll?: DrawerListProps['viewAll'];\n  /** Callback function that runs when an item pin is clicked. */\n  onItemPinToggle?: DrawerListProps['onItemPinToggle'];\n  /** Callback function that runs when an item is clicked on. */\n  onItemClick?: DrawerListProps['onItemClick'];\n  /** Callback function that runs after the Drawer opens. */\n  onDrawerOpen?: DrawerListProps['onDrawerOpen'];\n  /** Callback function that runs after the Drawer closes. */\n  onDrawerClose?: DrawerListProps['onDrawerClose'];\n}\n\nexport interface PinsListProps {\n  /** A list of pinned items. */\n  items: DrawerListProps['items'];\n  /**\n   * If true, a loading indicator will render in place of the list.\n   * @default false\n   * */\n  loading?: DrawerListProps['loading'];\n  /**\n   * A set of callback functions for the view all functionality, if provided.\n   * The onClick callback is for button use, and the href for link use. If provided both, defaults to link. */\n  viewAll?: DrawerListProps['viewAll'];\n  /** Callback function that runs when an item pin is clicked. */\n  onItemPinToggle?: DrawerListProps['onItemPinToggle'];\n  /** Callback function that runs when an item is clicked on. */\n  onItemClick?: DrawerListProps['onItemClick'];\n}\n\nexport interface AppShellDrawerProps {\n  /** A list of notifications and handler functions. */\n  notifications?: NotificationListProps;\n  /** A list of recently visited items and handler functions. */\n  recents?: RecentsListProps;\n  /** A list of pinned items to display above recent items and handler functions. */\n  pins?: PinsListProps;\n}\n\nexport interface DrawerItemProps extends BaseProps {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** A flag indicating if the item has been pinned or not. */\n  pinned?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** The handler hat is called when a pin icon is toggled on an item. */\n  onPinToggle?: (id: string) => void;\n}\n\nexport interface ListProps extends DrawerListProps {\n  headingText?: string;\n  emptyText: string;\n  displayRecents: boolean;\n  displayPins?: boolean;\n}\n"]}

package/lib/components/AppShell/AppShellList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShellList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AA2BtD,UAAU,SAAS;IACjB,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,KAAK,EAAE,CAAC,qBAAqB,GAAG,YAAY,CAAC,EAAE,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;QAClC,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,GAAG,YAAY,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7F,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AACD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,EAAE,CAAC;CACvB;AACD,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,yCAAyC;IACzC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzF,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAkGD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAQtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AppShellList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AA2BtD,UAAU,SAAS;IACjB,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,KAAK,EAAE,CAAC,qBAAqB,GAAG,YAAY,CAAC,EAAE,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;QAClC,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,GAAG,YAAY,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7F,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AACD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,EAAE,CAAC;CACvB;AACD,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,yCAAyC;IACzC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzF,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAiGD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAQtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/AppShell/AppShellList.js

@@ -15,7 +15,7 @@ import { StyledAppShellListWrapper, StyledAppShellList, StyledAppShellSummaryIte
 const List = ({ headingText, emptyText, items, loading = false, displayPins = false, onItemClick, onItemPinToggle, viewAll: viewAllProps }) => {
     const t = useI18n();
     const renderContent = items.length ? (_jsx(Flex, Object.assign({ as: StyledAppShellList, item: { grow: 1 } }, { children: items.map(({ id, primary, secondary, visual, unread, href, onClick, pinned, onPinToggle, ...restProps }) => {
-            return (_jsxs(Grid, Object.assign({ as: 'li', container: { cols: '1fr auto' } }, { children: [_jsx(SummaryItem, Object.assign({}, restProps, { as: StyledAppShellSummaryItem, forwardedAs: href ? 'a' : 'button', overflowStrategy: 'ellipsis', primary: primary, secondary: secondary?.length ? (_jsx(MetaList, { as: StyledAppShellMetaList, items: secondary }, void 0)) : undefined, visual: visual, href: href, onClick: (event) => {
+            return (_jsxs(Grid, Object.assign({ as: 'li', container: { cols: '1fr auto' } }, { children: [_jsx(SummaryItem, Object.assign({}, restProps, { as: StyledAppShellSummaryItem, forwardedAs: href ? 'a' : 'button', primary: primary, secondary: secondary?.length ? (_jsx(MetaList, { as: StyledAppShellMetaList, items: secondary }, void 0)) : undefined, visual: visual, href: href, onClick: (event) => {
                             onClick?.(id, event);
                             onItemClick?.(id, event);
                         }, actions: unread ? _jsx(Alert, { as: StyledNotificationAlert, variant: 'urgent' }, void 0) : null }), void 0), displayPins && (_jsx(BareButton, Object.assign({ as: StyledAppShellPinButton, onClick: () => {

package/lib/components/AppShell/AppShellList.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShellList.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, Ref, MouseEvent, ReactNode } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport Alert from '../Badges/Alert';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Icon from '../Icon';\nimport MetaList from '../MetaList';\nimport EmptyState from '../EmptyState';\nimport Progress from '../Progress';\nimport SummaryItem from '../SummaryItem';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\n\nimport {\n  StyledAppShellListWrapper,\n  StyledAppShellList,\n  StyledAppShellSummaryItem,\n  StyledAppShellMetaList,\n  StyledNotificationAlert,\n  StyledAppShellPinButton,\n  EmptyStateColorContrast,\n  StyledAppShellListSection,\n  StyledAppShellListHeading,\n  StyledLoading,\n  StyledDrawerViewAll\n} from './AppShell.styles';\n\ninterface ListProps {\n  /** An id representing the item. */\n  id: string;\n  ref?: Ref<HTMLDivElement>;\n  items: (AppShellListItemProps & ForwardProps)[];\n  headingText?: string;\n  emptyText: string;\n  loading?: boolean;\n  viewAll?: {\n    onClick?: (e: MouseEvent) => void;\n    href?: string;\n  } & ForwardProps;\n  newNotifications?: number;\n  displayPins?: boolean;\n  onItemClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  onItemPinToggle?: (id: string) => void;\n}\nexport interface AppShellListProps {\n  listView: ListProps[];\n}\nexport interface AppShellListItemProps extends BaseProps {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** Icon for displaying at the end of items  */\n  pinned?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** The handler hat is called when a pin icon is toggled on an item. */\n  onPinToggle?: (id: string) => void;\n}\n\nconst List = ({\n  headingText,\n  emptyText,\n  items,\n  loading = false,\n  displayPins = false,\n  onItemClick,\n  onItemPinToggle,\n  viewAll: viewAllProps\n}: ListProps) => {\n  const t = useI18n();\n\n  const renderContent = items.length ? (\n    <Flex as={StyledAppShellList} item={{ grow: 1 }}>\n      {items.map(\n        ({\n          id,\n          primary,\n          secondary,\n          visual,\n          unread,\n          href,\n          onClick,\n          pinned,\n          onPinToggle,\n          ...restProps\n        }: AppShellListItemProps) => {\n          return (\n            <Grid key={id} as='li' container={{ cols: '1fr auto' }}>\n              <SummaryItem\n                {...restProps}\n                as={StyledAppShellSummaryItem}\n                forwardedAs={href ? 'a' : 'button'}\n                overflowStrategy='ellipsis'\n                primary={primary}\n                secondary={\n                  secondary?.length ? (\n                    <MetaList as={StyledAppShellMetaList} items={secondary} />\n                  ) : undefined\n                }\n                visual={visual}\n                href={href}\n                onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n                  onClick?.(id, event);\n                  onItemClick?.(id, event);\n                }}\n                actions={unread ? <Alert as={StyledNotificationAlert} variant='urgent' /> : null}\n              />\n              {displayPins && (\n                <BareButton\n                  as={StyledAppShellPinButton}\n                  onClick={() => {\n                    onPinToggle?.(id);\n                    onItemPinToggle?.(id);\n                  }}\n                >\n                  <Icon name={pinned ? 'pin-solid' : 'pin'} />\n                </BareButton>\n              )}\n            </Grid>\n          );\n        }\n      )}\n    </Flex>\n  ) : (\n    <Flex\n      as={EmptyStateColorContrast}\n      container={{ justify: 'center', alignItems: 'center' }}\n      item={{ grow: 1 }}\n    >\n      <EmptyState message={emptyText} />\n    </Flex>\n  );\n\n  return (\n    <Flex as={StyledAppShellListSection} container={{ direction: 'column' }}>\n      {headingText && (\n        <Text variant='h3' as={StyledAppShellListHeading}>\n          {headingText}\n        </Text>\n      )}\n      {loading ? (\n        <Flex container={{ justify: 'center', alignItems: 'center' }} item={{ grow: 1 }}>\n          <Progress as={StyledLoading} placement='inline' />\n        </Flex>\n      ) : (\n        renderContent\n      )}\n      {(viewAllProps?.href || viewAllProps?.onClick) && !!items.length && !loading && (\n        <StyledDrawerViewAll {...viewAllProps} as={viewAllProps.href ? 'a' : 'button'}>\n          {t('view_all')}\n        </StyledDrawerViewAll>\n      )}\n    </Flex>\n  );\n};\nconst AppShellList: FunctionComponent<AppShellListProps> = ({ listView }) => {\n  return (\n    <Flex as={StyledAppShellListWrapper} container={{ direction: 'column' }}>\n      {listView.map(listItem => (\n        <List {...listItem} key={listItem.id} />\n      ))}\n    </Flex>\n  );\n};\n\nexport default AppShellList;\n"]}
+{"version":3,"file":"AppShellList.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, Ref, MouseEvent, ReactNode } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport Alert from '../Badges/Alert';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Icon from '../Icon';\nimport MetaList from '../MetaList';\nimport EmptyState from '../EmptyState';\nimport Progress from '../Progress';\nimport SummaryItem from '../SummaryItem';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\n\nimport {\n  StyledAppShellListWrapper,\n  StyledAppShellList,\n  StyledAppShellSummaryItem,\n  StyledAppShellMetaList,\n  StyledNotificationAlert,\n  StyledAppShellPinButton,\n  EmptyStateColorContrast,\n  StyledAppShellListSection,\n  StyledAppShellListHeading,\n  StyledLoading,\n  StyledDrawerViewAll\n} from './AppShell.styles';\n\ninterface ListProps {\n  /** An id representing the item. */\n  id: string;\n  ref?: Ref<HTMLDivElement>;\n  items: (AppShellListItemProps & ForwardProps)[];\n  headingText?: string;\n  emptyText: string;\n  loading?: boolean;\n  viewAll?: {\n    onClick?: (e: MouseEvent) => void;\n    href?: string;\n  } & ForwardProps;\n  newNotifications?: number;\n  displayPins?: boolean;\n  onItemClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  onItemPinToggle?: (id: string) => void;\n}\nexport interface AppShellListProps {\n  listView: ListProps[];\n}\nexport interface AppShellListItemProps extends BaseProps {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** Icon for displaying at the end of items  */\n  pinned?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** The handler hat is called when a pin icon is toggled on an item. */\n  onPinToggle?: (id: string) => void;\n}\n\nconst List = ({\n  headingText,\n  emptyText,\n  items,\n  loading = false,\n  displayPins = false,\n  onItemClick,\n  onItemPinToggle,\n  viewAll: viewAllProps\n}: ListProps) => {\n  const t = useI18n();\n\n  const renderContent = items.length ? (\n    <Flex as={StyledAppShellList} item={{ grow: 1 }}>\n      {items.map(\n        ({\n          id,\n          primary,\n          secondary,\n          visual,\n          unread,\n          href,\n          onClick,\n          pinned,\n          onPinToggle,\n          ...restProps\n        }: AppShellListItemProps) => {\n          return (\n            <Grid key={id} as='li' container={{ cols: '1fr auto' }}>\n              <SummaryItem\n                {...restProps}\n                as={StyledAppShellSummaryItem}\n                forwardedAs={href ? 'a' : 'button'}\n                primary={primary}\n                secondary={\n                  secondary?.length ? (\n                    <MetaList as={StyledAppShellMetaList} items={secondary} />\n                  ) : undefined\n                }\n                visual={visual}\n                href={href}\n                onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n                  onClick?.(id, event);\n                  onItemClick?.(id, event);\n                }}\n                actions={unread ? <Alert as={StyledNotificationAlert} variant='urgent' /> : null}\n              />\n              {displayPins && (\n                <BareButton\n                  as={StyledAppShellPinButton}\n                  onClick={() => {\n                    onPinToggle?.(id);\n                    onItemPinToggle?.(id);\n                  }}\n                >\n                  <Icon name={pinned ? 'pin-solid' : 'pin'} />\n                </BareButton>\n              )}\n            </Grid>\n          );\n        }\n      )}\n    </Flex>\n  ) : (\n    <Flex\n      as={EmptyStateColorContrast}\n      container={{ justify: 'center', alignItems: 'center' }}\n      item={{ grow: 1 }}\n    >\n      <EmptyState message={emptyText} />\n    </Flex>\n  );\n\n  return (\n    <Flex as={StyledAppShellListSection} container={{ direction: 'column' }}>\n      {headingText && (\n        <Text variant='h3' as={StyledAppShellListHeading}>\n          {headingText}\n        </Text>\n      )}\n      {loading ? (\n        <Flex container={{ justify: 'center', alignItems: 'center' }} item={{ grow: 1 }}>\n          <Progress as={StyledLoading} placement='inline' />\n        </Flex>\n      ) : (\n        renderContent\n      )}\n      {(viewAllProps?.href || viewAllProps?.onClick) && !!items.length && !loading && (\n        <StyledDrawerViewAll {...viewAllProps} as={viewAllProps.href ? 'a' : 'button'}>\n          {t('view_all')}\n        </StyledDrawerViewAll>\n      )}\n    </Flex>\n  );\n};\nconst AppShellList: FunctionComponent<AppShellListProps> = ({ listView }) => {\n  return (\n    <Flex as={StyledAppShellListWrapper} container={{ direction: 'column' }}>\n      {listView.map(listItem => (\n        <List {...listItem} key={listItem.id} />\n      ))}\n    </Flex>\n  );\n};\n\nexport default AppShellList;\n"]}

package/lib/components/AppShell/Drawer.js

@@ -43,6 +43,6 @@ export default (props) => {
                     refocusEl.focus();
                 }
                 onDrawerClose?.();
-            } }, { children: [_jsxs(Flex, Object.assign({ as: StyledDrawerHeading, container: { alignItems: 'center' } }, { children: [rtl && _jsx(Text, { children: header }, void 0), _jsx(BareButton, Object.assign({ as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), title: t('close_noun', header) }, { children: _jsx(Icon, { name: 'arrow-left' }, void 0) }), void 0), ltr && _jsx(Text, { children: header }, void 0)] }), void 0), _jsx(Flex, Object.assign({ as: StyledDrawerListContainer, container: { direction: 'column' } }, { children: content }), void 0)] }), void 0) }), void 0));
+            } }, { children: [_jsxs(Flex, Object.assign({ as: StyledDrawerHeading, container: { alignItems: 'center' } }, { children: [rtl && _jsx(Text, { children: header }, void 0), _jsx(BareButton, Object.assign({ as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), "aria-label": t('close_noun', [header]) }, { children: _jsx(Icon, { name: 'arrow-left' }, void 0) }), void 0), ltr && _jsx(Text, { children: header }, void 0)] }), void 0), _jsx(Flex, Object.assign({ as: StyledDrawerListContainer, container: { direction: 'column' } }, { children: content }), void 0)] }), void 0) }), void 0));
 };
 //# sourceMappingURL=Drawer.js.map

package/lib/components/AppShell/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useRef, ReactNode } from 'react';\nimport { lighten } from 'polished';\n\nimport BareButton from '../Button/BareButton';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport { useDirection, useI18n, useTheme } from '../../hooks';\nimport Configuration from '../Configuration';\nimport { tryCatch } from '../../utils';\n\nimport AppShellContext from './AppShellContext';\nimport {\n  StyledDrawerWrapper,\n  StyledDrawerBackButton,\n  StyledDrawerHeading,\n  StyledDrawerListContainer\n} from './AppShell.styles';\n\ninterface DrawerViewProps {\n  content: ReactNode;\n  header: string;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n}\n\nexport default (props: DrawerViewProps) => {\n  const { setDrawerOpen, drawerOpen, refocusEl, focusedImperatively } = useContext(AppShellContext);\n  const { content, header, onDrawerOpen, onDrawerClose } = props;\n  const theme = useTheme();\n\n  const backButtonRef = useRef<HTMLButtonElement>(null);\n  const appShellBg = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n  const appShellTheme = {\n    base: {\n      palette: {\n        'primary-background': appShellBg,\n        'foreground-color': 'rgba(255, 255, 255, 0.7)',\n        interactive: theme.base.colors.blue.light\n      },\n      shadow: {\n        focus: theme.base.shadow['focus-inverted']\n      }\n    }\n  };\n\n  const { ltr, rtl } = useDirection();\n  const t = useI18n();\n\n  return (\n    <Configuration theme={appShellTheme}>\n      <Drawer\n        as={StyledDrawerWrapper}\n        position='absolute'\n        placement='right'\n        open={drawerOpen}\n        nullWhenClosed\n        onAfterOpen={() => {\n          if (backButtonRef.current && document.activeElement !== backButtonRef.current) {\n            focusedImperatively.current = true;\n            backButtonRef.current.focus();\n          }\n          onDrawerOpen?.();\n        }}\n        onAfterClose={() => {\n          if (refocusEl && document.activeElement !== refocusEl) {\n            focusedImperatively.current = true;\n            refocusEl.focus();\n          }\n          onDrawerClose?.();\n        }}\n      >\n        <Flex as={StyledDrawerHeading} container={{ alignItems: 'center' }}>\n          {rtl && <Text>{header}</Text>}\n          <BareButton\n            as={StyledDrawerBackButton}\n            ref={backButtonRef}\n            onClick={() => setDrawerOpen(false)}\n            title={t('close_noun', header)}\n          >\n            <Icon name='arrow-left' />\n          </BareButton>\n          {ltr && <Text>{header}</Text>}\n        </Flex>\n        <Flex as={StyledDrawerListContainer} container={{ direction: 'column' }}>\n          {content}\n        </Flex>\n      </Drawer>\n    </Configuration>\n  );\n};\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useRef, ReactNode } from 'react';\nimport { lighten } from 'polished';\n\nimport BareButton from '../Button/BareButton';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport { useDirection, useI18n, useTheme } from '../../hooks';\nimport Configuration from '../Configuration';\nimport { tryCatch } from '../../utils';\n\nimport AppShellContext from './AppShellContext';\nimport {\n  StyledDrawerWrapper,\n  StyledDrawerBackButton,\n  StyledDrawerHeading,\n  StyledDrawerListContainer\n} from './AppShell.styles';\n\ninterface DrawerViewProps {\n  content: ReactNode;\n  header: string;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n}\n\nexport default (props: DrawerViewProps) => {\n  const { setDrawerOpen, drawerOpen, refocusEl, focusedImperatively } = useContext(AppShellContext);\n  const { content, header, onDrawerOpen, onDrawerClose } = props;\n  const theme = useTheme();\n\n  const backButtonRef = useRef<HTMLButtonElement>(null);\n  const appShellBg = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n  const appShellTheme = {\n    base: {\n      palette: {\n        'primary-background': appShellBg,\n        'foreground-color': 'rgba(255, 255, 255, 0.7)',\n        interactive: theme.base.colors.blue.light\n      },\n      shadow: {\n        focus: theme.base.shadow['focus-inverted']\n      }\n    }\n  };\n\n  const { ltr, rtl } = useDirection();\n  const t = useI18n();\n\n  return (\n    <Configuration theme={appShellTheme}>\n      <Drawer\n        as={StyledDrawerWrapper}\n        position='absolute'\n        placement='right'\n        open={drawerOpen}\n        nullWhenClosed\n        onAfterOpen={() => {\n          if (backButtonRef.current && document.activeElement !== backButtonRef.current) {\n            focusedImperatively.current = true;\n            backButtonRef.current.focus();\n          }\n          onDrawerOpen?.();\n        }}\n        onAfterClose={() => {\n          if (refocusEl && document.activeElement !== refocusEl) {\n            focusedImperatively.current = true;\n            refocusEl.focus();\n          }\n          onDrawerClose?.();\n        }}\n      >\n        <Flex as={StyledDrawerHeading} container={{ alignItems: 'center' }}>\n          {rtl && <Text>{header}</Text>}\n          <BareButton\n            as={StyledDrawerBackButton}\n            ref={backButtonRef}\n            onClick={() => setDrawerOpen(false)}\n            aria-label={t('close_noun', [header])}\n          >\n            <Icon name='arrow-left' />\n          </BareButton>\n          {ltr && <Text>{header}</Text>}\n        </Flex>\n        <Flex as={StyledDrawerListContainer} container={{ direction: 'column' }}>\n          {content}\n        </Flex>\n      </Drawer>\n    </Configuration>\n  );\n};\n"]}

package/lib/components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAEjB,GAAG,EAEH,cAAc,EAIf,MAAM,OAAO,CAAC;AAKf,OAAO,EACL,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,UAAU,EACX,MAAM,aAAa,CAAC;AAOrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,yDAAyD;IACzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,gBAAgB,CAAC,CAAC;CAC9C;AAED,aAAK,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAoBhF,eAAO,MAAM,iBAAiB,mKAK7B,CAAC;AAEF,eAAO,MAAM,YAAY;;;SA+DxB,CAAC;AAIF,eAAO,MAAM,YAAY,4IA0BvB,CAAC;AAmBH;;;;GAIG;AACH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA0DzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAEjB,GAAG,EAEH,cAAc,EAIf,MAAM,OAAO,CAAC;AAKf,OAAO,EACL,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,UAAU,EACX,MAAM,aAAa,CAAC;AAOrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,yDAAyD;IACzD,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,gBAAgB,CAAC,CAAC;CAC9C;AAED,aAAK,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAoBhF,eAAO,MAAM,iBAAiB,mKAM7B,CAAC;AAEF,eAAO,MAAM,YAAY;;;SA+DxB,CAAC;AAIF,eAAO,MAAM,YAAY,4IA0BvB,CAAC;AAmBH;;;;GAIG;AACH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAyDzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Avatar/Avatar.js

@@ -26,6 +26,7 @@ const sizeToBorderRadius = {
 export const StyledAvatarImage = styled(Image) `
   min-height: 100%;
   min-width: 100%;
+  aspect-ratio: 1 / 1;
   object-fit: cover;
   border-radius: inherit;
 `;
@@ -140,7 +141,7 @@ const Avatar = forwardRef((props, ref) => {
         }
         return getInitials(name, size);
     }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);
-    return (_jsxs(StyledAvatar, Object.assign({ role: 'img', hasSrc: !!imageSrc, hasBrokenImage: hasBrokenImage, shape: shape, size: size, title: name, ref: ref, "aria-label": `${name}${status ? ` ${t('status')} ${status}` : ''}` }, restProps, { children: [content, status === 'active' && _jsx(Alert, { as: StyledStatus, size: size, variant: 'success' }, void 0)] }), void 0));
+    return (_jsxs(StyledAvatar, Object.assign({ role: 'img', hasSrc: !!imageSrc, hasBrokenImage: hasBrokenImage, shape: shape, size: size, ref: ref, "aria-label": `${name}${status ? ` ${t('status')} ${status}` : ''}` }, restProps, { children: [content, status === 'active' && _jsx(Alert, { as: StyledStatus, size: size, variant: 'success' }, void 0)] }), void 0));
 });
 export default Avatar;
 //# sourceMappingURL=Avatar.js.map

package/lib/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef,\n  SyntheticEvent,\n  useState,\n  useEffect,\n  useMemo\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport Image from '../Image';\nimport {\n  BaseProps,\n  ForwardProps,\n  PropsWithDefaults,\n  NoChildrenProp,\n  OmitStrict\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { StyledIcon } from '../Icon';\nimport { Alert } from '../Badges';\nimport { useI18n } from '../../hooks';\nimport { tryCatch } from '../../utils';\n\nexport interface AvatarProps extends BaseProps, NoChildrenProp {\n  /** The name of the identity the Avatar represents. */\n  name: string;\n  /** Content of the Avatar as an image source url. */\n  imageSrc?: string;\n  /** An icon to render as the content of the avatar. imageSrc will take precedence if passed. */\n  icon?: string;\n  /**\n   * Shape of the Avatar.\n   * @default \"circle\"\n   */\n  shape?: 'circle' | 'squircle';\n  /**\n   * Avatar size.\n   * @default \"m\"\n   */\n  size?: 's' | 'm' | 'l';\n  /** If defined, will render status icon on the avatar. */\n  status?: 'active';\n  /** Optional error handler in the event an image fails to load. */\n  onImageError?: (err: SyntheticEvent<HTMLImageElement>) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement | HTMLImageElement>;\n}\n\ntype AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' | 'size'>;\n\nconst sizeToRem = {\n  s: 1,\n  m: 2,\n  l: 2.5\n};\n\nconst fontSizeToRem = {\n  s: 0.5625,\n  m: 0.8125,\n  l: 1\n};\n\nconst sizeToBorderRadius = {\n  s: 0.25,\n  m: 0.5,\n  l: 1\n};\n\nexport const StyledAvatarImage = styled(Image)`\n  min-height: 100%;\n  min-width: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n`;\n\nexport const StyledAvatar = styled.div<\n  OmitStrict<AvatarPropsWithDefaults, 'name' | 'children'> & {\n    hasSrc?: boolean;\n    hasBrokenImage?: boolean;\n  }\n>(\n  ({\n    hasBrokenImage,\n    hasSrc,\n    size,\n    shape,\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground }\n      },\n      components: { avatar }\n    }\n  }) => {\n    const sizeRem = sizeToRem[size];\n    const fontSize = fontSizeToRem[size];\n    const backgroundColor =\n      hasSrc && !hasBrokenImage ? primaryBackground : avatar['background-color'];\n    const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n    const color = tryCatch(() => readableColor(avatar['background-color']));\n\n    return css`\n      position: relative;\n      background-color: ${backgroundColor};\n      color: ${color};\n      width: ${sizeRem}rem;\n      height: ${sizeRem}rem;\n      min-width: ${sizeRem}rem;\n      min-height: ${sizeRem}rem;\n      font-size: ${fontSize}rem;\n      text-transform: uppercase;\n      line-height: ${sizeRem}rem;\n      text-align: center;\n      display: inline-block;\n      border-radius: 100%;\n      user-select: none;\n      -webkit-user-select: none;\n\n      ${shape === 'squircle' &&\n      css`\n        border-radius: calc(${sizeToBorderRadius[size]} * ${avatar['border-radius']});\n      `}\n\n      ${StyledIcon} {\n        width: 50%;\n        height: 100%;\n        vertical-align: initial;\n      }\n\n      ::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        pointer-events: none;\n        box-shadow: inset 0 0 0 0.0625rem ${shadowColor};\n      }\n    `;\n  }\n);\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nexport const StyledStatus = styled.div<Pick<AvatarPropsWithDefaults, 'size'>>(({ size, theme }) => {\n  /** Scales alert badge dimensions based on size of avatar */\n  const sizeDimensions = (0.625 * sizeToRem[size]) / sizeToRem.m;\n\n  return css`\n    position: absolute;\n    height: ${sizeDimensions}rem;\n    width: ${sizeDimensions}rem;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    z-index: 1;\n    animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);\n\n    @keyframes pop {\n      0% {\n        opacity: 0;\n        transform: scale(0);\n      }\n      50% {\n        opacity: 1;\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\n/**\n * Helper function to construct a two or one letter initial from the title prop.\n * This text will be displayed if no valid image source is provided.\n * @param name\n * @param size\n */\nconst getInitials = (name: AvatarProps['name'], size: AvatarProps['size']) => {\n  const words = name.split(' ');\n  const firstInitial = words[0].slice(0, 1);\n\n  return words.length === 1 || size === 's'\n    ? firstInitial\n    : `${firstInitial}${words[1].slice(0, 1)}`;\n};\n\n/**\n * Generally, avatars are used to distinguish between different operators and\n * objects when they are shown in a list or in a small space. Users of applications\n * can upload a custom avatar of their choice.\n */\nconst Avatar: FunctionComponent<AvatarProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<AvatarProps>, ref: Ref<HTMLDivElement | HTMLImageElement>) => {\n    const {\n      shape = 'circle',\n      size = 'm',\n      imageSrc,\n      icon,\n      name,\n      status,\n      onImageError,\n      ...restProps\n    } = props;\n    const [hasBrokenImage, setHasBrokenImage] = useState<undefined | boolean>();\n    const t = useI18n();\n\n    useEffect(() => {\n      setHasBrokenImage(undefined);\n    }, [imageSrc]);\n\n    const content = useMemo(() => {\n      if (icon) {\n        return <Icon name={icon} />;\n      }\n      if (imageSrc && !hasBrokenImage) {\n        return (\n          <StyledAvatarImage\n            src={imageSrc}\n            alt={name}\n            onError={(e: SyntheticEvent<HTMLImageElement>) => {\n              setHasBrokenImage(true);\n              onImageError?.(e);\n            }}\n            onLoad={() => {\n              setHasBrokenImage(false);\n            }}\n          />\n        );\n      }\n      return getInitials(name, size);\n    }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);\n\n    return (\n      <StyledAvatar\n        role='img'\n        hasSrc={!!imageSrc}\n        hasBrokenImage={hasBrokenImage}\n        shape={shape}\n        size={size}\n        title={name}\n        ref={ref}\n        aria-label={`${name}${status ? ` ${t('status')} ${status}` : ''}`}\n        {...restProps}\n      >\n        {content}\n        {status === 'active' && <Alert as={StyledStatus} size={size} variant='success' />}\n      </StyledAvatar>\n    );\n  }\n);\n\nexport default Avatar;\n"]}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef,\n  SyntheticEvent,\n  useState,\n  useEffect,\n  useMemo\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport Image from '../Image';\nimport {\n  BaseProps,\n  ForwardProps,\n  PropsWithDefaults,\n  NoChildrenProp,\n  OmitStrict\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { StyledIcon } from '../Icon';\nimport { Alert } from '../Badges';\nimport { useI18n } from '../../hooks';\nimport { tryCatch } from '../../utils';\n\nexport interface AvatarProps extends BaseProps, NoChildrenProp {\n  /** The name of the identity the Avatar represents. */\n  name: string;\n  /** Content of the Avatar as an image source url. */\n  imageSrc?: string;\n  /** An icon to render as the content of the avatar. imageSrc will take precedence if passed. */\n  icon?: string;\n  /**\n   * Shape of the Avatar.\n   * @default \"circle\"\n   */\n  shape?: 'circle' | 'squircle';\n  /**\n   * Avatar size.\n   * @default \"m\"\n   */\n  size?: 's' | 'm' | 'l';\n  /** If defined, will render status icon on the avatar. */\n  status?: 'active';\n  /** Optional error handler in the event an image fails to load. */\n  onImageError?: (err: SyntheticEvent<HTMLImageElement>) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement | HTMLImageElement>;\n}\n\ntype AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' | 'size'>;\n\nconst sizeToRem = {\n  s: 1,\n  m: 2,\n  l: 2.5\n};\n\nconst fontSizeToRem = {\n  s: 0.5625,\n  m: 0.8125,\n  l: 1\n};\n\nconst sizeToBorderRadius = {\n  s: 0.25,\n  m: 0.5,\n  l: 1\n};\n\nexport const StyledAvatarImage = styled(Image)`\n  min-height: 100%;\n  min-width: 100%;\n  aspect-ratio: 1 / 1;\n  object-fit: cover;\n  border-radius: inherit;\n`;\n\nexport const StyledAvatar = styled.div<\n  OmitStrict<AvatarPropsWithDefaults, 'name' | 'children'> & {\n    hasSrc?: boolean;\n    hasBrokenImage?: boolean;\n  }\n>(\n  ({\n    hasBrokenImage,\n    hasSrc,\n    size,\n    shape,\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground }\n      },\n      components: { avatar }\n    }\n  }) => {\n    const sizeRem = sizeToRem[size];\n    const fontSize = fontSizeToRem[size];\n    const backgroundColor =\n      hasSrc && !hasBrokenImage ? primaryBackground : avatar['background-color'];\n    const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n    const color = tryCatch(() => readableColor(avatar['background-color']));\n\n    return css`\n      position: relative;\n      background-color: ${backgroundColor};\n      color: ${color};\n      width: ${sizeRem}rem;\n      height: ${sizeRem}rem;\n      min-width: ${sizeRem}rem;\n      min-height: ${sizeRem}rem;\n      font-size: ${fontSize}rem;\n      text-transform: uppercase;\n      line-height: ${sizeRem}rem;\n      text-align: center;\n      display: inline-block;\n      border-radius: 100%;\n      user-select: none;\n      -webkit-user-select: none;\n\n      ${shape === 'squircle' &&\n      css`\n        border-radius: calc(${sizeToBorderRadius[size]} * ${avatar['border-radius']});\n      `}\n\n      ${StyledIcon} {\n        width: 50%;\n        height: 100%;\n        vertical-align: initial;\n      }\n\n      ::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        pointer-events: none;\n        box-shadow: inset 0 0 0 0.0625rem ${shadowColor};\n      }\n    `;\n  }\n);\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nexport const StyledStatus = styled.div<Pick<AvatarPropsWithDefaults, 'size'>>(({ size, theme }) => {\n  /** Scales alert badge dimensions based on size of avatar */\n  const sizeDimensions = (0.625 * sizeToRem[size]) / sizeToRem.m;\n\n  return css`\n    position: absolute;\n    height: ${sizeDimensions}rem;\n    width: ${sizeDimensions}rem;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    z-index: 1;\n    animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);\n\n    @keyframes pop {\n      0% {\n        opacity: 0;\n        transform: scale(0);\n      }\n      50% {\n        opacity: 1;\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\n/**\n * Helper function to construct a two or one letter initial from the title prop.\n * This text will be displayed if no valid image source is provided.\n * @param name\n * @param size\n */\nconst getInitials = (name: AvatarProps['name'], size: AvatarProps['size']) => {\n  const words = name.split(' ');\n  const firstInitial = words[0].slice(0, 1);\n\n  return words.length === 1 || size === 's'\n    ? firstInitial\n    : `${firstInitial}${words[1].slice(0, 1)}`;\n};\n\n/**\n * Generally, avatars are used to distinguish between different operators and\n * objects when they are shown in a list or in a small space. Users of applications\n * can upload a custom avatar of their choice.\n */\nconst Avatar: FunctionComponent<AvatarProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<AvatarProps>, ref: Ref<HTMLDivElement | HTMLImageElement>) => {\n    const {\n      shape = 'circle',\n      size = 'm',\n      imageSrc,\n      icon,\n      name,\n      status,\n      onImageError,\n      ...restProps\n    } = props;\n    const [hasBrokenImage, setHasBrokenImage] = useState<undefined | boolean>();\n    const t = useI18n();\n\n    useEffect(() => {\n      setHasBrokenImage(undefined);\n    }, [imageSrc]);\n\n    const content = useMemo(() => {\n      if (icon) {\n        return <Icon name={icon} />;\n      }\n      if (imageSrc && !hasBrokenImage) {\n        return (\n          <StyledAvatarImage\n            src={imageSrc}\n            alt={name}\n            onError={(e: SyntheticEvent<HTMLImageElement>) => {\n              setHasBrokenImage(true);\n              onImageError?.(e);\n            }}\n            onLoad={() => {\n              setHasBrokenImage(false);\n            }}\n          />\n        );\n      }\n      return getInitials(name, size);\n    }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);\n\n    return (\n      <StyledAvatar\n        role='img'\n        hasSrc={!!imageSrc}\n        hasBrokenImage={hasBrokenImage}\n        shape={shape}\n        size={size}\n        ref={ref}\n        aria-label={`${name}${status ? ` ${t('status')} ${status}` : ''}`}\n        {...restProps}\n      >\n        {content}\n        {status === 'active' && <Alert as={StyledStatus} size={size} variant='success' />}\n      </StyledAvatar>\n    );\n  }\n);\n\nexport default Avatar;\n"]}

package/lib/components/Badges/Status.d.ts

@@ -1,10 +1,10 @@
-import { FC } from 'react';
+import { FC, ReactText } from 'react';
 import { ForwardProps } from '../../types';
 export interface StatusProps {
     /** Determines the color to render the Badge as. This color is derived from the Theme. */
     variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';
     /** The content of the Badge, transformed to uppercase. */
-    children: string;
+    children: ReactText;
 }
 export declare const StyledStatus: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, StatusProps, never>;
 declare const Status: FC<StatusProps & ForwardProps>;

package/lib/components/Badges/Status.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoC,MAAM,OAAO,CAAC;AAM7D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,MAAM,WAAW,WAAW;IAC1B,yFAAyF;IACzF,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,YAAY,mHAqBvB,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CAW1C,CAAC;AAMF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,SAAS,EAAO,MAAM,OAAO,CAAC;AAMxE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,MAAM,WAAW,WAAW;IAC1B,yFAAyF;IACzF,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,mHAqBvB,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CAW1C,CAAC;AAMF,eAAe,MAAM,CAAC"}

package/lib/components/Badges/Status.js.map

@@ -1 +1 @@
-{"version":3,"file":"Status.js","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AASvC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAc,KAAK,CAAC,EAAE;IAC3D,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;IAEjD,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAElG,OAAO,GAAG,CAAA;wBACY,UAAU;iCACD,YAAY;aAChC,UAAU;wCACiB,MAAM;;iBAE7B,QAAQ,CAAC,GAAG;;wBAEL,OAAO;iBACd,OAAO;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,MAAM,GAAmC,UAAU,CACvD,CACE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAgC,EACjE,GAAyB,EACzB,EAAE;IACF,OAAO,CACL,KAAC,YAAY,oBAAK,SAAS,IAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,gBACpD,QAAQ,YACI,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\n\nexport interface StatusProps {\n  /** Determines the color to render the Badge as. This color is derived from the Theme. */\n  variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';\n  /** The content of the Badge, transformed to uppercase. */\n  children: string;\n}\n\nexport const StyledStatus = styled.span<StatusProps>(props => {\n  const { spacing } = props.theme.base;\n  const borderRadius = props.theme.base['border-radius'];\n  const { status } = props.theme.components.badges;\n\n  const { background, foreground } = status[props.variant];\n  const shadow = tryCatch(() => rgba(foreground, 0.1));\n  const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n  return css`\n    background-color: ${background};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    display: inline-block;\n    font-size: ${fontSize.xxs};\n    font-weight: bold;\n    line-height: calc(${spacing} * 2.5);\n    padding: 0 ${spacing};\n    text-transform: uppercase;\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\nconst Status: FC<StatusProps & ForwardProps> = forwardRef(\n  (\n    { variant, children, ...restProps }: PropsWithoutRef<StatusProps>,\n    ref: Ref<HTMLSpanElement>\n  ) => {\n    return (\n      <StyledStatus {...restProps} variant={variant} ref={ref}>\n        {children}\n      </StyledStatus>\n    );\n  }\n);\n\nStatus.defaultProps = {\n  variant: 'info'\n};\n\nexport default Status;\n"]}
+{"version":3,"file":"Status.js","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmC,MAAM,OAAO,CAAC;AACxE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AASvC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAc,KAAK,CAAC,EAAE;IAC3D,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;IAEjD,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAElG,OAAO,GAAG,CAAA;wBACY,UAAU;iCACD,YAAY;aAChC,UAAU;wCACiB,MAAM;;iBAE7B,QAAQ,CAAC,GAAG;;wBAEL,OAAO;iBACd,OAAO;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,MAAM,GAAmC,UAAU,CACvD,CACE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAgC,EACjE,GAAyB,EACzB,EAAE;IACF,OAAO,CACL,KAAC,YAAY,oBAAK,SAAS,IAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,gBACpD,QAAQ,YACI,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, ReactText, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\n\nexport interface StatusProps {\n  /** Determines the color to render the Badge as. This color is derived from the Theme. */\n  variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';\n  /** The content of the Badge, transformed to uppercase. */\n  children: ReactText;\n}\n\nexport const StyledStatus = styled.span<StatusProps>(props => {\n  const { spacing } = props.theme.base;\n  const borderRadius = props.theme.base['border-radius'];\n  const { status } = props.theme.components.badges;\n\n  const { background, foreground } = status[props.variant];\n  const shadow = tryCatch(() => rgba(foreground, 0.1));\n  const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n  return css`\n    background-color: ${background};\n    border-radius: calc(0.25 * ${borderRadius});\n    color: ${foreground};\n    box-shadow: inset 0 0 0 0.0625rem ${shadow};\n    display: inline-block;\n    font-size: ${fontSize.xxs};\n    font-weight: bold;\n    line-height: calc(${spacing} * 2.5);\n    padding: 0 ${spacing};\n    text-transform: uppercase;\n  `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\nconst Status: FC<StatusProps & ForwardProps> = forwardRef(\n  (\n    { variant, children, ...restProps }: PropsWithoutRef<StatusProps>,\n    ref: Ref<HTMLSpanElement>\n  ) => {\n    return (\n      <StyledStatus {...restProps} variant={variant} ref={ref}>\n        {children}\n      </StyledStatus>\n    );\n  }\n);\n\nStatus.defaultProps = {\n  variant: 'info'\n};\n\nexport default Status;\n"]}

package/lib/components/Button/BareButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BareButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/BareButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGtD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,wFAAwF;IACxF,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,4GAU5B,CAAC;AAIF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAgBjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"BareButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/BareButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAItD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,wFAAwF;IACxF,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,4GAU5B,CAAC;AAIF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA6CjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Button/BareButton.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import styled from 'styled-components';
 import { defaultThemeProp } from '../../theme';
+import { useConsolidatedRef } from '../../hooks';
 export const StyledBareButton = styled.button `
   background: none;
   border: none;
@@ -15,7 +16,25 @@ export const StyledBareButton = styled.button `
 `;
 StyledBareButton.defaultProps = defaultThemeProp;
 const BareButton = forwardRef(({ type = 'button', disabled = false, href, ...restProps }, ref) => {
-    return (_jsx(StyledBareButton, Object.assign({ ref: ref, as: href ? 'a' : undefined, type: href ? undefined : type, disabled: disabled }, restProps, { href: href }), void 0));
+    const shouldFocus = useRef(false);
+    const buttonRef = useConsolidatedRef(ref);
+    return (_jsx(StyledBareButton, Object.assign({ ref: buttonRef, as: href ? 'a' : undefined, type: href ? undefined : type, disabled: disabled }, restProps, { href: href, onMouseDown: (e) => {
+            if (restProps.onMouseDown) {
+                const handlerReturn = restProps.onMouseDown?.(e);
+                if (handlerReturn === false || e.defaultPrevented)
+                    return handlerReturn;
+            }
+            shouldFocus.current = true;
+        }, onMouseUp: (e) => {
+            if (buttonRef.current === document.activeElement) {
+                shouldFocus.current = false;
+            }
+            if (shouldFocus.current) {
+                buttonRef.current?.focus();
+                shouldFocus.current = false;
+            }
+            return restProps.onMouseUp?.(e);
+        } }), void 0));
 });
 export default BareButton;
 //# sourceMappingURL=BareButton.js.map

package/lib/components/Button/BareButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BareButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAuB/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;2BAQlB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE3D,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EAAE,IAAI,GAAG,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,EAAE,GAAG,SAAS,EAAoC,EAC3F,GAA2B,EAC3B,EAAE;IACF,OAAO,CACL,KAAC,gBAAgB,kBACf,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,IAAI,CAAC,CAAC,CAAE,GAAW,CAAC,CAAC,CAAC,SAAS,EACnC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC7B,QAAQ,EAAE,QAAQ,IACd,SAAS,IACb,IAAI,EAAE,IAAI,YACV,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nimport { ButtonProps } from './Button';\n\nexport interface BareButtonProps extends BaseProps {\n  /** Text or content for the Button. */\n  children: ButtonProps['children'];\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: ButtonProps['disabled'];\n  /** A location to navigate to. Passing an href will render a Link styled as a Button. */\n  href?: ButtonProps['href'];\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default \"button\"\n   */\n  type?: ButtonProps['type'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: ButtonProps['ref'];\n}\n\nexport const StyledBareButton = styled.button`\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  user-select: none;\n\n  & + & {\n    margin-inline-start: ${props => props.theme.base.spacing};\n  }\n`;\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nconst BareButton: FunctionComponent<BareButtonProps & ForwardProps> = forwardRef(\n  (\n    { type = 'button', disabled = false, href, ...restProps }: PropsWithoutRef<BareButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    return (\n      <StyledBareButton\n        ref={ref}\n        as={href ? ('a' as any) : undefined}\n        type={href ? undefined : type}\n        disabled={disabled}\n        {...restProps}\n        href={href}\n      />\n    );\n  }\n);\n\nexport default BareButton;\n"]}
+{"version":3,"file":"BareButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,MAAM,EAMP,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAuBjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;2BAQlB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE3D,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EACE,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,GAAG,SAAS,EACoC,EAClD,GAA2B,EAC3B,EAAE;IACF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,gBAAgB,kBACf,GAAG,EAAE,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,CAAC,CAAE,GAAW,CAAC,CAAC,CAAC,SAAS,EACnC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC7B,QAAQ,EAAE,QAAQ,IACd,SAAS,IACb,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,CAAC,CAAoD,EAAE,EAAE;YACpE,IAAI,SAAS,CAAC,WAAW,EAAE;gBACzB,MAAM,aAAa,GAAI,SAAS,CAAC,WAAiC,EAAE,CAAC,CAAC,CAAiB,CAAC;gBAExF,IAAI,aAAa,KAAK,KAAK,IAAI,CAAC,CAAC,gBAAgB;oBAAE,OAAO,aAAa,CAAC;aACzE;YAED,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC7B,CAAC,EACD,SAAS,EAAE,CAAC,CAAoD,EAAE,EAAE;YAClE,IAAI,SAAS,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE;gBAChD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;aAC7B;YAED,IAAI,WAAW,CAAC,OAAO,EAAE;gBACvB,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBAC3B,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;aAC7B;YAED,OAAQ,SAAS,CAAC,SAA+B,EAAE,CAAC,CAAC,CAAC,CAAC;QACzD,CAAC,YACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {\n  forwardRef,\n  useRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  MouseEvent,\n  MouseEventHandler\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useConsolidatedRef } from '../../hooks';\n\nimport { ButtonProps } from './Button';\n\nexport interface BareButtonProps extends BaseProps {\n  /** Text or content for the Button. */\n  children: ButtonProps['children'];\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: ButtonProps['disabled'];\n  /** A location to navigate to. Passing an href will render a Link styled as a Button. */\n  href?: ButtonProps['href'];\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default \"button\"\n   */\n  type?: ButtonProps['type'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: ButtonProps['ref'];\n}\n\nexport const StyledBareButton = styled.button`\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  user-select: none;\n\n  & + & {\n    margin-inline-start: ${props => props.theme.base.spacing};\n  }\n`;\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nconst BareButton: FunctionComponent<BareButtonProps & ForwardProps> = forwardRef(\n  (\n    {\n      type = 'button',\n      disabled = false,\n      href,\n      ...restProps\n    }: PropsWithoutRef<BareButtonProps> & ForwardProps,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const shouldFocus = useRef(false);\n    const buttonRef = useConsolidatedRef(ref);\n\n    return (\n      <StyledBareButton\n        ref={buttonRef}\n        as={href ? ('a' as any) : undefined}\n        type={href ? undefined : type}\n        disabled={disabled}\n        {...restProps}\n        href={href}\n        onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          if (restProps.onMouseDown) {\n            const handlerReturn = (restProps.onMouseDown as MouseEventHandler)?.(e) as false | void;\n\n            if (handlerReturn === false || e.defaultPrevented) return handlerReturn;\n          }\n\n          shouldFocus.current = true;\n        }}\n        onMouseUp={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          if (buttonRef.current === document.activeElement) {\n            shouldFocus.current = false;\n          }\n\n          if (shouldFocus.current) {\n            buttonRef.current?.focus();\n            shouldFocus.current = false;\n          }\n\n          return (restProps.onMouseUp as MouseEventHandler)?.(e);\n        }}\n      />\n    );\n  }\n);\n\nexport default BareButton;\n"]}

package/lib/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAWjF,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,aAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAEF,eAAO,MAAM,YAAY,iIAyNxB,CAAC;AAIF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAiDzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EACjB,SAAS,EAET,GAAG,EAGJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAWjF,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,aAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAEF,eAAO,MAAM,YAAY,iIAyNxB,CAAC;AAIF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAyEzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Button/Button.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { useRef, forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { mix, readableColor } from 'polished';
 import { defaultThemeProp } from '../../theme';
@@ -196,9 +196,26 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
 StyledButton.defaultProps = defaultThemeProp;
 const Button = forwardRef(({ variant = 'secondary', type = 'button', disabled = false, icon = false, compact = false, href, as, label, 'aria-label': ariaLabel, loading = false, children, ...restProps }, ref) => {
     const [buttonEl, setButtonEl] = useElement();
+    const shouldFocus = useRef(false);
     const buttonRef = useConsolidatedRef(ref, setButtonEl);
     const showProgress = loading && variant !== 'link' && variant !== 'text';
-    return (_jsxs(_Fragment, { children: [_jsxs(StyledButton, Object.assign({}, restProps, { ref: buttonRef, as: as || (href ? 'a' : 'button'), forwardedAs: href ? 'a' : 'button', variant: variant, icon: icon, compact: compact, type: href ? undefined : type, href: href, disabled: disabled && !href, loading: showProgress, "aria-label": ariaLabel || label }, { children: [showProgress && _jsx(Progress, { variant: 'ring', placement: 'local' }, void 0), children] }), void 0), buttonEl && label && (_jsx(Tooltip, Object.assign({ target: buttonEl, showDelay: 'none', hideDelay: 'none' }, { children: label }), void 0))] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledButton, Object.assign({}, restProps, { ref: buttonRef, as: as || (href ? 'a' : 'button'), forwardedAs: href ? 'a' : 'button', variant: variant, icon: icon, compact: compact, type: href ? undefined : type, href: href, disabled: disabled && !href, loading: showProgress, "aria-label": ariaLabel || label, onMouseDown: (e) => {
+                    if (restProps.onMouseDown) {
+                        const handlerReturn = restProps.onMouseDown?.(e);
+                        if (handlerReturn === false || e.defaultPrevented)
+                            return handlerReturn;
+                    }
+                    shouldFocus.current = true;
+                }, onMouseUp: (e) => {
+                    if (buttonRef.current === document.activeElement) {
+                        shouldFocus.current = false;
+                    }
+                    if (shouldFocus.current) {
+                        buttonRef.current?.focus();
+                        shouldFocus.current = false;
+                    }
+                    return restProps.onMouseUp?.(e);
+                } }, { children: [showProgress && _jsx(Progress, { variant: 'ring', placement: 'local' }, void 0), children] }), void 0), buttonEl && label && (_jsx(Tooltip, Object.assign({ target: buttonEl, showDelay: 'none', hideDelay: 'none', describeTarget: false }, { children: label }), void 0))] }, void 0));
 });
 export default Button;
 //# sourceMappingURL=Button.js.map

package/lib/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { getHoverColors, omitProps } from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n  /** Text or content for the Button. */\n  children: ReactNode;\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n  href?: string;\n  /**\n   * Controls the styling of the Button.\n   * @default \"secondary\"\n   */\n  variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default \"button\"\n   */\n  type?: 'button' | 'reset' | 'submit';\n  /**\n   * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n   * @default false\n   */\n  icon?: boolean;\n  /**\n   * Used for a smaller sized button.\n   * @default false\n   */\n  compact?: boolean;\n  /**\n   * The label text will be used inside a Tooltip.\n   */\n  label?: string;\n  /**\n   * The aria label text will be inserted as the aria-label on the Button.\n   */\n  'aria-label'?: string;\n  /**\n   * Optionally renders an indeterminate progress indicator in a button.\n   * @default false\n   */\n  loading?: boolean;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n  ButtonProps,\n  'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n  ({\n    variant,\n    icon,\n    loading,\n    compact,\n    theme: {\n      base: {\n        spacing,\n        'border-radius': baseBorderRadius,\n        palette: { 'primary-background': backgroundColor, 'foreground-color': textColor },\n        'hit-area': {\n          'mouse-min': hitAreaMouse,\n          'finger-min': hitAreaFinger,\n          'compact-min': hitAreaCompact\n        },\n        animation: {\n          speed,\n          timing: { ease }\n        },\n        'disabled-opacity': disabledOpacity\n      },\n      components: {\n        button: {\n          color,\n          'secondary-color': secondaryColor,\n          padding,\n          'border-radius': borderRadius,\n          'border-width': borderWidth,\n          'focus-shadow': focusShadow,\n          touch: { padding: touchPadding }\n        },\n        link: { color: linkColor }\n      }\n    }\n  }) => {\n    const borderColor = variant === 'secondary' ? color : 'transparent';\n    const contrastColor = tryCatch(() => readableColor(color));\n\n    const hoverColors = getHoverColors(color);\n    const hoverPrimaryColor = hoverColors.background;\n    const hoverContrastColor = hoverColors.foreground;\n\n    const secondaryHoverColor = tryCatch(() => mix(0.85, secondaryColor, color));\n\n    let buttonColor = contrastColor;\n    let buttonBackgroundColor = color;\n    if (variant === 'secondary') {\n      buttonColor = color;\n      buttonBackgroundColor = secondaryColor;\n    } else if (variant === 'simple') {\n      if (icon) {\n        buttonColor = 'currentColor';\n        buttonBackgroundColor = 'transparent';\n      } else {\n        buttonColor = color;\n        buttonBackgroundColor = backgroundColor;\n      }\n    } else if (variant === 'link') {\n      buttonColor = linkColor;\n      buttonBackgroundColor = 'transparent';\n    } else if (variant === 'text') {\n      buttonColor = textColor;\n      buttonBackgroundColor = 'transparent';\n    }\n\n    return css`\n      color: ${buttonColor};\n      background-color: ${buttonBackgroundColor};\n      display: ${variant === 'link' || variant === 'text' ? 'inline' : 'inline-flex'};\n      align-items: center;\n      outline: none;\n      text-decoration: none;\n      transition: all calc(0.5 * ${speed}) ${ease};\n      cursor: pointer;\n\n      ${variant !== 'link' && variant !== 'text'\n        ? css`\n            justify-content: center;\n            line-height: 1;\n            border: ${borderWidth} solid ${borderColor};\n            position: relative;\n          `\n        : css`\n            text-align: start;\n            border: none;\n\n            > ${StyledIcon} {\n              vertical-align: bottom;\n            }\n          `}\n\n      & + & {\n        margin-inline-start: ${spacing};\n      }\n\n      /* Not able to combine with selector above. Stylis bug? */\n      & + ${StyledPopover} + & {\n        margin-inline-start: ${spacing};\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          ${variant === 'primary' &&\n          css`\n            background-color: ${hoverPrimaryColor};\n            color: ${hoverContrastColor};\n            text-decoration: none;\n          `}\n\n          ${(variant === 'secondary' || (variant === 'simple' && !icon)) &&\n          css`\n            background-color: ${secondaryHoverColor};\n            text-decoration: none;\n          `}\n\n          ${variant === 'simple' &&\n          icon &&\n          css`\n            ::before {\n              content: '';\n              position: absolute;\n              top: calc(${borderWidth} * -1);\n              bottom: calc(${borderWidth} * -1);\n              left: calc(${borderWidth} * -1);\n              right: calc(${borderWidth} * -1);\n              border-radius: inherit;\n              background-color: currentColor;\n              opacity: 0.15;\n            }\n          `}\n\n          ${(variant === 'link' || variant === 'text') &&\n          css`\n            text-decoration: underline;\n          `}\n        }\n      }\n\n      ${variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        min-height: ${hitAreaMouse};\n        min-width: ${hitAreaMouse};\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n        -webkit-user-select: none;\n        user-select: none;\n      `}\n\n      ${compact &&\n      css`\n        min-height: ${hitAreaCompact};\n        min-width: ${hitAreaCompact};\n      `}\n\n      ${!icon &&\n      variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        padding: ${padding};\n      `}\n\n      ${variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        @media (pointer: coarse) {\n          ${!compact &&\n          css`\n            min-height: ${hitAreaFinger};\n            min-width: ${hitAreaFinger};\n          `}\n          border-radius: calc(${baseBorderRadius} * ${borderRadius});\n          ${!icon &&\n          css`\n            padding: ${touchPadding};\n          `}\n        }\n      `}\n\n      &:disabled,\n      &[disabled] {\n        opacity: ${disabledOpacity};\n        cursor: not-allowed;\n        pointer-events: none;\n      }\n\n      &:enabled:focus,\n      &:not([disabled]):focus {\n        box-shadow: ${focusShadow};\n      }\n\n      ${icon &&\n      variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n        > svg {\n          display: block;\n        }\n      `}\n\n      ${loading &&\n      css`\n        ${StyledBackdrop} {\n          background-color: ${buttonBackgroundColor};\n          border-radius: inherit;\n        }\n        ${StyledProgressRing} {\n          width: 1em;\n          height: 1em;\n          circle:nth-child(2) {\n            animation-duration: calc(${speed} * 2);\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant = 'secondary',\n      type = 'button',\n      disabled = false,\n      icon = false,\n      compact = false,\n      href,\n      as,\n      label,\n      'aria-label': ariaLabel,\n      loading = false,\n      children,\n      ...restProps\n    }: PropsWithoutRef<ButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const [buttonEl, setButtonEl] = useElement();\n    const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n    const showProgress = loading && variant !== 'link' && variant !== 'text';\n\n    return (\n      <>\n        <StyledButton\n          {...restProps}\n          ref={buttonRef}\n          as={as || (href ? 'a' : 'button')}\n          forwardedAs={href ? 'a' : 'button'}\n          variant={variant}\n          icon={icon}\n          compact={compact}\n          type={href ? undefined : type}\n          href={href}\n          disabled={disabled && !href}\n          loading={showProgress}\n          aria-label={ariaLabel || label}\n        >\n          {showProgress && <Progress variant='ring' placement='local' />}\n          {children}\n        </StyledButton>\n        {buttonEl && label && (\n          <Tooltip target={buttonEl} showDelay='none' hideDelay='none'>\n            {label}\n          </Tooltip>\n        )}\n      </>\n    );\n  }\n);\n\nexport default Button;\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useRef,\n  forwardRef,\n  FunctionComponent,\n  ReactNode,\n  PropsWithoutRef,\n  Ref,\n  MouseEvent,\n  MouseEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { getHoverColors, omitProps } from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n  /** Text or content for the Button. */\n  children: ReactNode;\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n  href?: string;\n  /**\n   * Controls the styling of the Button.\n   * @default \"secondary\"\n   */\n  variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default \"button\"\n   */\n  type?: 'button' | 'reset' | 'submit';\n  /**\n   * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n   * @default false\n   */\n  icon?: boolean;\n  /**\n   * Used for a smaller sized button.\n   * @default false\n   */\n  compact?: boolean;\n  /**\n   * The label text will be used inside a Tooltip.\n   */\n  label?: string;\n  /**\n   * The aria label text will be inserted as the aria-label on the Button.\n   */\n  'aria-label'?: string;\n  /**\n   * Optionally renders an indeterminate progress indicator in a button.\n   * @default false\n   */\n  loading?: boolean;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n  ButtonProps,\n  'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n  ({\n    variant,\n    icon,\n    loading,\n    compact,\n    theme: {\n      base: {\n        spacing,\n        'border-radius': baseBorderRadius,\n        palette: { 'primary-background': backgroundColor, 'foreground-color': textColor },\n        'hit-area': {\n          'mouse-min': hitAreaMouse,\n          'finger-min': hitAreaFinger,\n          'compact-min': hitAreaCompact\n        },\n        animation: {\n          speed,\n          timing: { ease }\n        },\n        'disabled-opacity': disabledOpacity\n      },\n      components: {\n        button: {\n          color,\n          'secondary-color': secondaryColor,\n          padding,\n          'border-radius': borderRadius,\n          'border-width': borderWidth,\n          'focus-shadow': focusShadow,\n          touch: { padding: touchPadding }\n        },\n        link: { color: linkColor }\n      }\n    }\n  }) => {\n    const borderColor = variant === 'secondary' ? color : 'transparent';\n    const contrastColor = tryCatch(() => readableColor(color));\n\n    const hoverColors = getHoverColors(color);\n    const hoverPrimaryColor = hoverColors.background;\n    const hoverContrastColor = hoverColors.foreground;\n\n    const secondaryHoverColor = tryCatch(() => mix(0.85, secondaryColor, color));\n\n    let buttonColor = contrastColor;\n    let buttonBackgroundColor = color;\n    if (variant === 'secondary') {\n      buttonColor = color;\n      buttonBackgroundColor = secondaryColor;\n    } else if (variant === 'simple') {\n      if (icon) {\n        buttonColor = 'currentColor';\n        buttonBackgroundColor = 'transparent';\n      } else {\n        buttonColor = color;\n        buttonBackgroundColor = backgroundColor;\n      }\n    } else if (variant === 'link') {\n      buttonColor = linkColor;\n      buttonBackgroundColor = 'transparent';\n    } else if (variant === 'text') {\n      buttonColor = textColor;\n      buttonBackgroundColor = 'transparent';\n    }\n\n    return css`\n      color: ${buttonColor};\n      background-color: ${buttonBackgroundColor};\n      display: ${variant === 'link' || variant === 'text' ? 'inline' : 'inline-flex'};\n      align-items: center;\n      outline: none;\n      text-decoration: none;\n      transition: all calc(0.5 * ${speed}) ${ease};\n      cursor: pointer;\n\n      ${variant !== 'link' && variant !== 'text'\n        ? css`\n            justify-content: center;\n            line-height: 1;\n            border: ${borderWidth} solid ${borderColor};\n            position: relative;\n          `\n        : css`\n            text-align: start;\n            border: none;\n\n            > ${StyledIcon} {\n              vertical-align: bottom;\n            }\n          `}\n\n      & + & {\n        margin-inline-start: ${spacing};\n      }\n\n      /* Not able to combine with selector above. Stylis bug? */\n      & + ${StyledPopover} + & {\n        margin-inline-start: ${spacing};\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          ${variant === 'primary' &&\n          css`\n            background-color: ${hoverPrimaryColor};\n            color: ${hoverContrastColor};\n            text-decoration: none;\n          `}\n\n          ${(variant === 'secondary' || (variant === 'simple' && !icon)) &&\n          css`\n            background-color: ${secondaryHoverColor};\n            text-decoration: none;\n          `}\n\n          ${variant === 'simple' &&\n          icon &&\n          css`\n            ::before {\n              content: '';\n              position: absolute;\n              top: calc(${borderWidth} * -1);\n              bottom: calc(${borderWidth} * -1);\n              left: calc(${borderWidth} * -1);\n              right: calc(${borderWidth} * -1);\n              border-radius: inherit;\n              background-color: currentColor;\n              opacity: 0.15;\n            }\n          `}\n\n          ${(variant === 'link' || variant === 'text') &&\n          css`\n            text-decoration: underline;\n          `}\n        }\n      }\n\n      ${variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        min-height: ${hitAreaMouse};\n        min-width: ${hitAreaMouse};\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n        -webkit-user-select: none;\n        user-select: none;\n      `}\n\n      ${compact &&\n      css`\n        min-height: ${hitAreaCompact};\n        min-width: ${hitAreaCompact};\n      `}\n\n      ${!icon &&\n      variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        padding: ${padding};\n      `}\n\n      ${variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        @media (pointer: coarse) {\n          ${!compact &&\n          css`\n            min-height: ${hitAreaFinger};\n            min-width: ${hitAreaFinger};\n          `}\n          border-radius: calc(${baseBorderRadius} * ${borderRadius});\n          ${!icon &&\n          css`\n            padding: ${touchPadding};\n          `}\n        }\n      `}\n\n      &:disabled,\n      &[disabled] {\n        opacity: ${disabledOpacity};\n        cursor: not-allowed;\n        pointer-events: none;\n      }\n\n      &:enabled:focus,\n      &:not([disabled]):focus {\n        box-shadow: ${focusShadow};\n      }\n\n      ${icon &&\n      variant !== 'link' &&\n      variant !== 'text' &&\n      css`\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n        > svg {\n          display: block;\n        }\n      `}\n\n      ${loading &&\n      css`\n        ${StyledBackdrop} {\n          background-color: ${buttonBackgroundColor};\n          border-radius: inherit;\n        }\n        ${StyledProgressRing} {\n          width: 1em;\n          height: 1em;\n          circle:nth-child(2) {\n            animation-duration: calc(${speed} * 2);\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant = 'secondary',\n      type = 'button',\n      disabled = false,\n      icon = false,\n      compact = false,\n      href,\n      as,\n      label,\n      'aria-label': ariaLabel,\n      loading = false,\n      children,\n      ...restProps\n    }: PropsWithoutRef<ButtonProps> & ForwardProps,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const [buttonEl, setButtonEl] = useElement();\n    const shouldFocus = useRef(false);\n    const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n    const showProgress = loading && variant !== 'link' && variant !== 'text';\n\n    return (\n      <>\n        <StyledButton\n          {...restProps}\n          ref={buttonRef}\n          as={as || (href ? 'a' : 'button')}\n          forwardedAs={href ? 'a' : 'button'}\n          variant={variant}\n          icon={icon}\n          compact={compact}\n          type={href ? undefined : type}\n          href={href}\n          disabled={disabled && !href}\n          loading={showProgress}\n          aria-label={ariaLabel || label}\n          onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n            if (restProps.onMouseDown) {\n              const handlerReturn = (restProps.onMouseDown as MouseEventHandler)?.(e) as\n                | false\n                | void;\n\n              if (handlerReturn === false || e.defaultPrevented) return handlerReturn;\n            }\n\n            shouldFocus.current = true;\n          }}\n          onMouseUp={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n            if (buttonRef.current === document.activeElement) {\n              shouldFocus.current = false;\n            }\n\n            if (shouldFocus.current) {\n              buttonRef.current?.focus();\n              shouldFocus.current = false;\n            }\n\n            return (restProps.onMouseUp as MouseEventHandler)?.(e);\n          }}\n        >\n          {showProgress && <Progress variant='ring' placement='local' />}\n          {children}\n        </StyledButton>\n        {buttonEl && label && (\n          <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n            {label}\n          </Tooltip>\n        )}\n      </>\n    );\n  }\n);\n\nexport default Button;\n"]}

package/lib/components/Card/CardHeader.d.ts

@@ -1,10 +1,12 @@
-import { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactNode, Ref } from 'react';
 import { BaseProps, ForwardProps } from '../../types';
 export interface CardHeaderProps extends BaseProps {
     /** The Card header content. */
     children: ReactNode;
     /** Action Buttons that will render within the header. */
     actions?: ReactNode;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
 }
 export declare const StyledCardHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, CardHeaderProps, never>;
 declare const CardHeader: FunctionComponent<CardHeaderProps & ForwardProps>;

package/lib/components/Card/CardHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,yDAAyD;IACzD,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,yHAc3B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAuBjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAqB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAKzF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,yDAAyD;IACzD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,yHAc3B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAyBjE,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/lib/components/Card/CardHeader.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
@@ -21,8 +22,9 @@ export const StyledCardHeader = styled.header(({ theme, onClick }) => {
   `;
 });
 StyledCardHeader.defaultProps = defaultThemeProp;
-const CardHeader = ({ children, actions, ...restProps }) => {
-    return (_jsx(Flex, Object.assign({ container: { alignItems: 'center', justify: 'between' }, as: StyledCardHeader }, restProps, { children: actions ? (_jsxs(_Fragment, { children: [_jsx(Flex, Object.assign({ container: { alignItems: 'center' }, item: { grow: 1 } }, { children: children }), void 0), _jsx("div", { children: actions }, void 0)] }, void 0)) : (children) }), void 0));
-};
+const CardHeader = forwardRef(({ children, actions, ...restProps }, ref) => {
+    return (_jsx(Flex, Object.assign({ container: { alignItems: 'center', justify: 'between' }, as: StyledCardHeader }, restProps, { ref: ref }, { children: actions ? (_jsxs(_Fragment, { children: [_jsx(Flex, Object.assign({ container: { alignItems: 'center' }, item: { grow: 1 } }, { children: children }), void 0), _jsx("div", { children: actions }, void 0)] }, void 0)) : (children) }), void 0));
+});
+CardHeader.displayName = 'CardHeader';
 export default CardHeader;
 //# sourceMappingURL=CardHeader.js.map

package/lib/components/Card/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AASlD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACpF,OAAO,GAAG,CAAA;MACN,aAAa,aAAa,UAAU,IAAI,UAAU;4BAC5B,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;UAE3E,iBAAiB;;;;;UAKjB,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS;;;GAG/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,CAAC,EACrE,QAAQ,EACR,OAAO,EACP,GAAG,SAAS,EACuB,EAAE,EAAE;IACvC,OAAO,CACL,KAAC,IAAI,kBACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EACvD,EAAE,EAAE,gBAAgB,IAChB,SAAS,cAEZ,OAAO,CAAC,CAAC,CAAC,CACT,8BACE,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,gBACzD,QAAQ,YACJ,EACP,wBAAM,OAAO,WAAO,YACnB,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,YACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { StyledPopover } from '../Popover';\n\nimport { StyledCard } from './Card';\nimport { StyledCardContent } from './CardContent';\n\nexport interface CardHeaderProps extends BaseProps {\n  /** The Card header content. */\n  children: ReactNode;\n  /** Action Buttons that will render within the header. */\n  actions?: ReactNode;\n}\n\nexport const StyledCardHeader = styled.header<CardHeaderProps>(({ theme, onClick }) => {\n  return css`\n    ${StyledPopover} &, &:not(${StyledCard} ${StyledCard} > &) {\n      padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n\n      + ${StyledCardContent} {\n        padding-block-start: 0;\n      }\n\n      &:hover {\n        ${onClick ? 'cursor: pointer;' : undefined}\n      }\n    }\n  `;\n});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nconst CardHeader: FunctionComponent<CardHeaderProps & ForwardProps> = ({\n  children,\n  actions,\n  ...restProps\n}: PropsWithChildren<CardHeaderProps>) => {\n  return (\n    <Flex\n      container={{ alignItems: 'center', justify: 'between' }}\n      as={StyledCardHeader}\n      {...restProps}\n    >\n      {actions ? (\n        <>\n          <Flex container={{ alignItems: 'center' }} item={{ grow: 1 }}>\n            {children}\n          </Flex>\n          <div>{actions}</div>\n        </>\n      ) : (\n        children\n      )}\n    </Flex>\n  );\n};\n\nexport default CardHeader;\n"]}
+{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAwD,MAAM,OAAO,CAAC;AACzF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWlD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACpF,OAAO,GAAG,CAAA;MACN,aAAa,aAAa,UAAU,IAAI,UAAU;4BAC5B,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;UAE3E,iBAAiB;;;;;UAKjB,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS;;;GAG/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EACvE,GAA2B,EAC3B,EAAE;IACF,OAAO,CACL,KAAC,IAAI,kBACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EACvD,EAAE,EAAE,gBAAgB,IAChB,SAAS,IACb,GAAG,EAAE,GAAG,gBAEP,OAAO,CAAC,CAAC,CAAC,CACT,8BACE,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,gBACzD,QAAQ,YACJ,EACP,wBAAM,OAAO,WAAO,YACnB,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AACtC,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithChildren, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { StyledPopover } from '../Popover';\n\nimport { StyledCard } from './Card';\nimport { StyledCardContent } from './CardContent';\n\nexport interface CardHeaderProps extends BaseProps {\n  /** The Card header content. */\n  children: ReactNode;\n  /** Action Buttons that will render within the header. */\n  actions?: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledCardHeader = styled.header<CardHeaderProps>(({ theme, onClick }) => {\n  return css`\n    ${StyledPopover} &, &:not(${StyledCard} ${StyledCard} > &) {\n      padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n\n      + ${StyledCardContent} {\n        padding-block-start: 0;\n      }\n\n      &:hover {\n        ${onClick ? 'cursor: pointer;' : undefined}\n      }\n    }\n  `;\n});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nconst CardHeader: FunctionComponent<CardHeaderProps & ForwardProps> = forwardRef(\n  (\n    { children, actions, ...restProps }: PropsWithChildren<CardHeaderProps>,\n    ref: CardHeaderProps['ref']\n  ) => {\n    return (\n      <Flex\n        container={{ alignItems: 'center', justify: 'between' }}\n        as={StyledCardHeader}\n        {...restProps}\n        ref={ref}\n      >\n        {actions ? (\n          <>\n            <Flex container={{ alignItems: 'center' }} item={{ grow: 1 }}>\n              {children}\n            </Flex>\n            <div>{actions}</div>\n          </>\n        ) : (\n          children\n        )}\n      </Flex>\n    );\n  }\n);\n\nCardHeader.displayName = 'CardHeader';\nexport default CardHeader;\n"]}

package/lib/components/Configuration/Configuration.js

@@ -25,7 +25,7 @@ if (windowIsAvailable) {
     if (!window[metaKey]) {
         window[metaKey] = [];
     }
-    window[metaKey].push({ version: '2.0.0-dev.14.0' });
+    window[metaKey].push({ version: '2.0.0-dev.15.0' });
 }
 const Configuration = ({ context = ConfigurationContext, children, locale, direction, translations: customTranslations, theme, disableDefaultFontLoading, styleSheetTarget, portalTarget, overrideMap, renderNativeControls }) => {
     const ctx = useContext(context);