@pega/cosmos-react-core 4.0.0-dev.18.3 → 4.0.0-dev.19.0

package/lib/components/AppShell/AppShellSearch.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShellSearch.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { lighten, mix } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport BareButton from '../Button/BareButton';\nimport { StyledLink } from '../Link';\nimport { StyledMenuItem } from '../Menu';\nimport { StyledMenu, StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledSearchInput } from '../SearchInput';\nimport {\n  StyledCancelButton,\n  StyledFiltersPopover,\n  StyledResultsPopover,\n  StyledSearchButton\n} from '../SearchInput/SearchInput.styles';\nimport { StyledText } from '../Text';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledEmptyState } from '../EmptyState';\n\nimport { navWidth } from './AppShell.styles';\n\nexport const StyledSearch = styled.div<{ collapsed: boolean; isMediumOrAbove: boolean }>(\n  ({ theme, collapsed, isMediumOrAbove }) => {\n    const backgroundColor = tryCatch(() =>\n      lighten(0.1, theme.components['app-shell'].nav['background-color'])\n    );\n    const maxCollapsedSize = theme.components.input.height;\n    const activeColor = tryCatch(() =>\n      mix(0.85, theme.base.palette.dark, theme.base.palette.interactive)\n    );\n    const hoverColor = tryCatch(() =>\n      mix(0.95, theme.base.palette.dark, theme.base.palette.interactive)\n    );\n\n    return css`\n      flex-shrink: 0;\n      justify-content: center;\n      --background-color: ${backgroundColor};\n\n      ${StyledMenuListContainer} {\n        background: transparent;\n      }\n\n      > form {\n        padding: ${theme.base.spacing} 0;\n      }\n\n      header {\n        ${StyledText} {\n          color: ${theme.base.palette.light};\n        }\n      }\n\n      ${StyledBackdrop} {\n        background: transparent;\n      }\n\n      ${StyledEmptyState} {\n        span,\n        svg {\n          color: ${theme.base.palette.light};\n        }\n      }\n\n      ${StyledMenu} {\n        &[data-active-scope='true'] [data-current='true'] {\n          background-color: ${activeColor};\n        }\n\n        ${StyledLink} {\n          color: ${theme.base.palette.light};\n        }\n      }\n\n      ${StyledMenuItem} {\n        color: ${theme.base.palette.light};\n\n        li {\n          color: ${theme.base.palette.light};\n        }\n\n        &:focus-within {\n          background-color: ${activeColor};\n        }\n\n        &:hover:not([aria-disabled='true']) {\n          background-color: ${hoverColor};\n        }\n      }\n\n      ${StyledFiltersPopover}, ${StyledResultsPopover} {\n        background-color: ${backgroundColor};\n        z-index: calc(${theme.base['z-index'].backdrop} + 1);\n      }\n\n      ${StyledSearchInput} {\n        border: none;\n        background: transparent;\n\n        ${StyledSearchButton} {\n          transition: borderRadius calc(${theme.base.animation.speed} * 2);\n          border: none;\n        }\n\n        ${StyledCancelButton} {\n          color: rgba(255, 255, 255, 0.9);\n        }\n\n        input {\n          border-color: ${backgroundColor};\n\n          &::placeholder {\n            color: rgba(255, 255, 255, 0.6);\n          }\n\n          &:focus:not([disabled]) {\n            border-color: ${backgroundColor};\n          }\n        }\n\n        input,\n        ${StyledSearchButton} {\n          background: ${backgroundColor};\n          color: rgba(255, 255, 255, 0.7);\n          border: transparent;\n\n          &:focus-within {\n            border: transparent;\n          }\n        }\n\n        &:focus-within {\n          ${StyledSearchButton} {\n            color: rgba(255, 255, 255, 0.9);\n          }\n        }\n      }\n\n      form > ${StyledSearchInput} {\n        margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);\n        ${collapsed &&\n        isMediumOrAbove &&\n        css`\n          overflow: hidden;\n        `}\n        background: ${backgroundColor};\n\n        ${collapsed &&\n        isMediumOrAbove &&\n        css`\n          ${StyledSearchButton} {\n            border-radius: calc(\n              ${theme.base['border-radius']} * ${theme.components['search-input']['border-radius']}\n            );\n            height: ${maxCollapsedSize};\n            width: ${maxCollapsedSize};\n            padding: 0;\n\n            > :not(:first-child) {\n              display: none;\n            }\n          }\n\n          input {\n            padding: 0;\n            max-width: 0;\n            overflow: hidden;\n          }\n\n          ${StyledCancelButton} {\n            display: none;\n          }\n        `}\n      }\n    `;\n  }\n);\n\nStyledSearch.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSearchDecoration = styled.div(({ theme }) => {\n  return css`\n    width: ${theme.components.input.height};\n    height: ${theme.components.input.height};\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--background-color);\n    color: rgba(255, 255, 255, 0.7);\n    margin: 0 auto;\n  `;\n});\n\nStyledAppShellSearchDecoration.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSearchButton = styled(BareButton)`\n  width: 100%;\n  &:focus {\n    ${StyledAppShellSearchDecoration} {\n      outline: none;\n      box-shadow: ${props => props.theme.base.shadow['focus-inset']};\n    }\n  }\n`;\n\nStyledAppShellSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledAppshellSearchContainer = styled.div(({ theme: { base } }) => {\n  return css`\n    padding: ${base.spacing};\n  `;\n});\n\nStyledAppshellSearchContainer.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"AppShellSearch.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellSearch.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { darken, getContrast, lighten, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport BareButton from '../Button/BareButton';\nimport { StyledLink } from '../Link';\nimport { StyledMenuItem } from '../Menu';\nimport { StyledMenu, StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledSearchInput } from '../SearchInput';\nimport {\n  StyledCancelButton,\n  StyledFiltersPopover,\n  StyledMenuButton,\n  StyledResultsPopover,\n  StyledSearchButton\n} from '../SearchInput/SearchInput.styles';\nimport { StyledText } from '../Text';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledEmptyState } from '../EmptyState';\n\nimport { navWidth } from './AppShell.styles';\nimport { navContrastColors, pxToRem } from './style-utils';\n\nexport const StyledSearch = styled.div<{ collapsed: boolean; isMediumOrAbove: boolean }>(\n  ({ theme, collapsed, isMediumOrAbove }) => {\n    const navBg = theme.components['app-shell'].nav['background-color'];\n    const { hoverBg, foreground, border: borderColor } = navContrastColors(theme);\n    const maxCollapsedSize = theme.components.input.height;\n    let activeColor = hoverBg;\n    let hoverColor = lighten(0.1, hoverBg);\n\n    if (getContrast(navBg, hoverColor) < 1.3) {\n      activeColor = darken(0.2, hoverBg);\n      hoverColor = hoverBg;\n    }\n\n    return css`\n      flex-shrink: 0;\n      justify-content: center;\n\n      ${StyledMenuListContainer} {\n        background: transparent;\n      }\n\n      > form {\n        padding: ${theme.base.spacing} 0;\n      }\n\n      header {\n        ${StyledText} {\n          color: ${transparentize(0.1, foreground)};\n        }\n      }\n\n      ${StyledBackdrop} {\n        background: transparent;\n      }\n\n      ${StyledEmptyState} {\n        span,\n        svg {\n          color: ${foreground};\n        }\n      }\n\n      ${StyledMenu} {\n        background: ${navBg};\n\n        &[data-active-scope='true'] [data-current='true'] {\n          background-color: ${activeColor};\n        }\n\n        ${StyledLink} {\n          color: ${foreground};\n        }\n      }\n\n      ${StyledMenuItem} {\n        color: ${foreground};\n\n        li {\n          color: ${foreground};\n        }\n\n        &:focus-within {\n          background-color: ${activeColor};\n        }\n\n        &:hover:not([aria-disabled='true']) {\n          background-color: ${hoverColor};\n        }\n      }\n\n      ${StyledFiltersPopover}, ${StyledResultsPopover} {\n        background-color: ${navBg};\n        z-index: calc(${theme.base['z-index'].backdrop} + 1);\n      }\n\n      ${StyledSearchInput} {\n        border: none;\n        background: transparent;\n\n        ${StyledSearchButton} {\n          transition: borderRadius calc(${theme.base.animation.speed} * 2);\n          border: none;\n        }\n\n        ${StyledCancelButton} {\n          color: ${foreground};\n        }\n\n        input {\n          &::placeholder {\n            color: ${transparentize(0.4, foreground)};\n          }\n\n          &:hover {\n            border-inline-start: ${pxToRem(1)} solid ${borderColor};\n          }\n        }\n\n        input,\n        ${StyledMenuButton}, ${StyledSearchButton} {\n          background: ${hoverBg};\n          color: ${foreground};\n          border-color: transparent;\n\n          &:focus-within {\n            border-color: transparent;\n          }\n\n          &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within),\n          &:hover {\n            border-color: ${borderColor};\n          }\n        }\n      }\n\n      form > ${StyledSearchInput} {\n        background: ${hoverBg};\n        margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);\n\n        ${collapsed &&\n        isMediumOrAbove &&\n        css`\n          overflow: hidden;\n          ${StyledSearchButton} {\n            border-radius: calc(\n              ${theme.base['border-radius']} * ${theme.components['search-input']['border-radius']}\n            );\n            height: ${maxCollapsedSize};\n            width: ${maxCollapsedSize};\n            padding: 0;\n\n            > :not(:first-child) {\n              display: none;\n            }\n          }\n\n          input {\n            padding: 0;\n            max-width: 0;\n            overflow: hidden;\n          }\n\n          ${StyledCancelButton} {\n            display: none;\n          }\n        `}\n      }\n    `;\n  }\n);\n\nStyledSearch.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSearchDecoration = styled.div(({ theme }) => {\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    width: ${theme.components.input.height};\n    height: ${theme.components.input.height};\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: ${hoverBg};\n    color: ${foreground};\n    margin: 0 auto;\n  `;\n});\n\nStyledAppShellSearchDecoration.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSearchButton = styled(BareButton)`\n  width: 100%;\n  &:focus {\n    ${StyledAppShellSearchDecoration} {\n      outline: none;\n      box-shadow: ${props => props.theme.base.shadow['focus-inset']};\n    }\n  }\n`;\n\nStyledAppShellSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledAppshellSearchContainer = styled.div(({ theme: { base } }) => {\n  return css`\n    padding: ${base.spacing};\n  `;\n});\n\nStyledAppshellSearchContainer.defaultProps = defaultThemeProp;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,SAAS,EAAE,MAAM,OAAO,CAAC;AAuBtD,UAAU,eAAe;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;sGASE,eAAe;AAPlB,wBAkGE"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBtD,UAAU,eAAe;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;sGASE,eAAe;AAPlB,wBAiFE"}

package/lib/components/AppShell/Drawer.js

@@ -1,52 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useRef } from 'react';
-import { lighten } from 'polished';
 import BareButton from '../Button/BareButton';
 import Drawer from '../Drawer';
 import Flex from '../Flex';
 import Icon, { registerIcon } from '../Icon';
 import * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';
 import Text from '../Text';
-import { useDirection, useEscape, useFocusTrap, useI18n, useTheme, useUID } from '../../hooks';
-import Configuration from '../Configuration';
-import { tryCatch } from '../../utils';
+import { useDirection, useEscape, useFocusTrap, useI18n, useUID } from '../../hooks';
 import AppShellContext from './AppShellContext';
 import { StyledDrawerWrapper, StyledDrawerBackButton, StyledDrawerHeading, StyledDrawerListContainer } from './Drawer.styles';
 registerIcon(arrowLeftIcon);
 export default ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setDrawerOpen }) => {
+    const t = useI18n();
     const { focusedImperatively } = useContext(AppShellContext);
+    const { ltr, rtl } = useDirection();
     const returnFocusRef = useRef();
     const drawerRef = useRef(null);
-    const theme = useTheme();
-    const headerId = useUID();
     const backButtonRef = useRef(null);
-    const appShellBg = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
-    const appShellTheme = {
-        base: {
-            palette: {
-                'primary-background': appShellBg,
-                'foreground-color': 'rgba(255, 255, 255, 0.7)',
-                interactive: theme.base.colors.blue.light
-            }
-        }
-    };
-    const { ltr, rtl } = useDirection();
-    const t = useI18n();
+    const headerId = useUID();
     useEscape(() => {
         setDrawerOpen(false);
     }, drawerRef, [drawerRef.current]);
     useFocusTrap(drawerRef);
-    return (_jsx(Configuration, { theme: appShellTheme, children: _jsxs(Drawer, { role: 'dialog', "aria-labelledby": headerId, as: StyledDrawerWrapper, position: 'fixed', placement: 'left', open: drawerOpen, nullWhenClosed: true, onBeforeOpen: () => {
-                returnFocusRef.current = document.activeElement ?? undefined;
-            }, onAfterOpen: () => {
-                if (backButtonRef.current && document.activeElement !== backButtonRef.current) {
-                    focusedImperatively.current = true;
-                    backButtonRef.current.focus();
-                }
-                onDrawerOpen?.();
-            }, onAfterClose: () => {
-                onDrawerClose?.();
-                returnFocusRef.current?.focus();
-            }, onOuterClick: () => setDrawerOpen(false), ref: drawerRef, children: [_jsxs(Flex, { as: StyledDrawerHeading, container: { alignItems: 'center' }, children: [rtl && (_jsx(Text, { variant: 'h2', id: headerId, children: header })), _jsx(BareButton, { as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), "aria-label": t('close_noun', [header]), children: _jsx(Icon, { name: 'arrow-left' }) }), ltr && (_jsx(Text, { variant: 'h2', id: headerId, children: header }))] }), _jsx(Flex, { as: StyledDrawerListContainer, container: { direction: 'column' }, "aria-labelledby": headerId, children: content })] }) }));
+    return (_jsxs(Drawer, { role: 'dialog', "aria-labelledby": headerId, as: StyledDrawerWrapper, position: 'fixed', placement: 'left', open: drawerOpen, nullWhenClosed: true, onBeforeOpen: () => {
+            returnFocusRef.current = document.activeElement ?? undefined;
+        }, onAfterOpen: () => {
+            if (backButtonRef.current && document.activeElement !== backButtonRef.current) {
+                focusedImperatively.current = true;
+                backButtonRef.current.focus();
+            }
+            onDrawerOpen?.();
+        }, onAfterClose: () => {
+            onDrawerClose?.();
+            returnFocusRef.current?.focus();
+        }, onOuterClick: () => setDrawerOpen(false), ref: drawerRef, children: [_jsxs(Flex, { as: StyledDrawerHeading, container: { alignItems: 'center' }, children: [rtl && (_jsx(Text, { variant: 'h2', id: headerId, children: header })), _jsx(BareButton, { as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), "aria-label": t('close_noun', [header]), children: _jsx(Icon, { name: 'arrow-left' }) }), ltr && (_jsx(Text, { variant: 'h2', id: headerId, children: header }))] }), _jsx(Flex, { as: StyledDrawerListContainer, container: { direction: 'column' }, "aria-labelledby": headerId, children: content })] }));
 };
 //# 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, { registerIcon } from '../Icon';\nimport * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';\nimport Text from '../Text';\nimport { useDirection, useEscape, useFocusTrap, useI18n, useTheme, useUID } 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 './Drawer.styles';\n\nregisterIcon(arrowLeftIcon);\n\ninterface DrawerViewProps {\n  content: ReactNode;\n  header: string;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n  drawerOpen: boolean;\n  setDrawerOpen: (open: boolean) => void;\n}\n\nexport default ({\n  content,\n  header,\n  onDrawerOpen,\n  onDrawerClose,\n  drawerOpen,\n  setDrawerOpen\n}: DrawerViewProps) => {\n  const { focusedImperatively } = useContext(AppShellContext);\n  const returnFocusRef = useRef<HTMLElement>();\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const theme = useTheme();\n  const headerId = useUID();\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    }\n  };\n\n  const { ltr, rtl } = useDirection();\n  const t = useI18n();\n\n  useEscape(\n    () => {\n      setDrawerOpen(false);\n    },\n    drawerRef,\n    [drawerRef.current]\n  );\n\n  useFocusTrap(drawerRef);\n\n  return (\n    <Configuration theme={appShellTheme}>\n      <Drawer\n        role='dialog'\n        aria-labelledby={headerId}\n        as={StyledDrawerWrapper}\n        position='fixed'\n        placement='left'\n        open={drawerOpen}\n        nullWhenClosed\n        onBeforeOpen={() => {\n          returnFocusRef.current = (document.activeElement as HTMLElement) ?? undefined;\n        }}\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          onDrawerClose?.();\n          returnFocusRef.current?.focus();\n        }}\n        onOuterClick={() => setDrawerOpen(false)}\n        ref={drawerRef}\n      >\n        <Flex as={StyledDrawerHeading} container={{ alignItems: 'center' }}>\n          {rtl && (\n            <Text variant='h2' id={headerId}>\n              {header}\n            </Text>\n          )}\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 && (\n            <Text variant='h2' id={headerId}>\n              {header}\n            </Text>\n          )}\n        </Flex>\n        <Flex\n          as={StyledDrawerListContainer}\n          container={{ direction: 'column' }}\n          aria-labelledby={headerId}\n        >\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":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAa,MAAM,OAAO,CAAC;AAEtD,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErF,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,iBAAiB,CAAC;AAEzB,YAAY,CAAC,aAAa,CAAC,CAAC;AAW5B,eAAe,CAAC,EACd,OAAO,EACP,MAAM,EACN,YAAY,EACZ,aAAa,EACb,UAAU,EACV,aAAa,EACG,EAAE,EAAE;IACpB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,mBAAmB,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC5D,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IACpC,MAAM,cAAc,GAAG,MAAM,EAAe,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAC;IAE1B,SAAS,CACP,GAAG,EAAE;QACH,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,EACD,SAAS,EACT,CAAC,SAAS,CAAC,OAAO,CAAC,CACpB,CAAC;IAEF,YAAY,CAAC,SAAS,CAAC,CAAC;IAExB,OAAO,CACL,MAAC,MAAM,IACL,IAAI,EAAC,QAAQ,qBACI,QAAQ,EACzB,EAAE,EAAE,mBAAmB,EACvB,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAC,MAAM,EAChB,IAAI,EAAE,UAAU,EAChB,cAAc,QACd,YAAY,EAAE,GAAG,EAAE;YACjB,cAAc,CAAC,OAAO,GAAI,QAAQ,CAAC,aAA6B,IAAI,SAAS,CAAC;QAChF,CAAC,EACD,WAAW,EAAE,GAAG,EAAE;YAChB,IAAI,aAAa,CAAC,OAAO,IAAI,QAAQ,CAAC,aAAa,KAAK,aAAa,CAAC,OAAO,EAAE;gBAC7E,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;gBACnC,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;aAC/B;YACD,YAAY,EAAE,EAAE,CAAC;QACnB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;YACjB,aAAa,EAAE,EAAE,CAAC;YAClB,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAClC,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EACxC,GAAG,EAAE,SAAS,aAEd,MAAC,IAAI,IAAC,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC/D,GAAG,IAAI,CACN,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,QAAQ,YAC5B,MAAM,GACF,CACR,EACD,KAAC,UAAU,IACT,EAAE,EAAE,sBAAsB,EAC1B,GAAG,EAAE,aAAa,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,gBACvB,CAAC,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,YAErC,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACf,EACZ,GAAG,IAAI,CACN,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,QAAQ,YAC5B,MAAM,GACF,CACR,IACI,EACP,KAAC,IAAI,IACH,EAAE,EAAE,yBAAyB,EAC7B,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,qBACjB,QAAQ,YAExB,OAAO,GACH,IACA,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useContext, useRef, ReactNode } from 'react';\n\nimport BareButton from '../Button/BareButton';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';\nimport Text from '../Text';\nimport { useDirection, useEscape, useFocusTrap, useI18n, useUID } from '../../hooks';\n\nimport AppShellContext from './AppShellContext';\nimport {\n  StyledDrawerWrapper,\n  StyledDrawerBackButton,\n  StyledDrawerHeading,\n  StyledDrawerListContainer\n} from './Drawer.styles';\n\nregisterIcon(arrowLeftIcon);\n\ninterface DrawerViewProps {\n  content: ReactNode;\n  header: string;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n  drawerOpen: boolean;\n  setDrawerOpen: (open: boolean) => void;\n}\n\nexport default ({\n  content,\n  header,\n  onDrawerOpen,\n  onDrawerClose,\n  drawerOpen,\n  setDrawerOpen\n}: DrawerViewProps) => {\n  const t = useI18n();\n  const { focusedImperatively } = useContext(AppShellContext);\n  const { ltr, rtl } = useDirection();\n  const returnFocusRef = useRef<HTMLElement>();\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const backButtonRef = useRef<HTMLButtonElement>(null);\n  const headerId = useUID();\n\n  useEscape(\n    () => {\n      setDrawerOpen(false);\n    },\n    drawerRef,\n    [drawerRef.current]\n  );\n\n  useFocusTrap(drawerRef);\n\n  return (\n    <Drawer\n      role='dialog'\n      aria-labelledby={headerId}\n      as={StyledDrawerWrapper}\n      position='fixed'\n      placement='left'\n      open={drawerOpen}\n      nullWhenClosed\n      onBeforeOpen={() => {\n        returnFocusRef.current = (document.activeElement as HTMLElement) ?? undefined;\n      }}\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        onDrawerClose?.();\n        returnFocusRef.current?.focus();\n      }}\n      onOuterClick={() => setDrawerOpen(false)}\n      ref={drawerRef}\n    >\n      <Flex as={StyledDrawerHeading} container={{ alignItems: 'center' }}>\n        {rtl && (\n          <Text variant='h2' id={headerId}>\n            {header}\n          </Text>\n        )}\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 && (\n          <Text variant='h2' id={headerId}>\n            {header}\n          </Text>\n        )}\n      </Flex>\n      <Flex\n        as={StyledDrawerListContainer}\n        container={{ direction: 'column' }}\n        aria-labelledby={headerId}\n      >\n        {content}\n      </Flex>\n    </Drawer>\n  );\n};\n"]}

package/lib/components/AppShell/Drawer.styles.d.ts

@@ -6,7 +6,6 @@ export declare const StyledDrawerList: import("styled-components").StyledCompone
     displayPins: boolean;
 }, never>;
 export declare const StyledDrawerMetaList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDrawerPinButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const EmptyDrawerVisual: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDrawerListHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDrawerViewAll: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;

package/lib/components/AppShell/Drawer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAKxC,eAAO,MAAM,mBAAmB,kHAQ9B,CAAC;AAIH,eAAO,MAAM,mBAAmB,4GAqB9B,CAAC;AAIH,eAAO,MAAM,sBAAsB,4GAmBjC,CAAC;AAIH,eAAO,MAAM,gBAAgB;iBAA4B,OAAO;SAE9D,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAIhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,4GA6BhC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAK5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,wGAQlC,CAAC;AAIH,eAAO,MAAM,mBAAmB,uGAmB9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAUlC,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAOpC,CAAC"}
+{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAQxC,eAAO,MAAM,mBAAmB,kHAwB9B,CAAC;AAIH,eAAO,MAAM,mBAAmB,4GAsB9B,CAAC;AAIH,eAAO,MAAM,sBAAsB,4GAqBjC,CAAC;AAIH,eAAO,MAAM,gBAAgB;iBAA4B,OAAO;SAE9D,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAK5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,wGAWlC,CAAC;AAIH,eAAO,MAAM,mBAAmB,uGAiB9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAQlC,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAOpC,CAAC"}

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

@@ -1,23 +1,33 @@
-import { lighten } from 'polished';
 import styled, { css } from 'styled-components';
-import { useDirection } from '../../hooks';
 import { calculateFontSize } from '../../styles';
 import { defaultThemeProp } from '../../theme';
-import { tryCatch } from '../../utils';
-import { StyledIcon } from '../Icon';
+import { StyledMetaListItem } from '../MetaList/MetaList';
+import { StyledLabel } from '../Label';
+import { StyledForm } from '../MultiStepForm/MultiStepForm';
 import { navOpenWidth } from './AppShell.styles';
+import { navContrastColors, pxToRem } from './style-utils';
 export const StyledDrawerWrapper = styled.div(({ theme, open }) => {
+    const { components: { 'app-shell': { nav: { 'background-color': navBg } } } } = theme;
+    const { foreground, border: borderColor } = navContrastColors(theme);
     return css `
-    background: ${theme.components['app-shell'].nav['background-color']};
+    background: ${navBg};
     width: ${navOpenWidth};
     height: 100%;
-    color: rgba(255, 255, 255, 0.7);
+    color: ${foreground};
     opacity: ${open ? 1 : 0};
+    border-inline-end: ${pxToRem(1)} solid ${borderColor};
+
+    ${StyledForm},
+    ${StyledLabel},
+    ${StyledMetaListItem} {
+      color: ${foreground};
+    }
   `;
 });
 StyledDrawerWrapper.defaultProps = defaultThemeProp;
 export const StyledDrawerHeading = styled.header(({ theme }) => {
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    const { foreground } = navContrastColors(theme);
     return css `
     padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
     line-height: 1;
@@ -33,12 +43,13 @@ export const StyledDrawerHeading = styled.header(({ theme }) => {
     svg {
       font-size: ${fontSize.xxl};
       cursor: pointer;
-      color: rgba(255, 255, 255, 0.7);
+      color: ${foreground};
     }
   `;
 });
 StyledDrawerHeading.defaultProps = defaultThemeProp;
 export const StyledDrawerBackButton = styled.button(({ theme }) => {
+    const { hoverBg, foreground } = navContrastColors(theme);
     return css `
     height: ${theme.base['hit-area']['mouse-min']};
     width: ${theme.base['hit-area']['mouse-min']};
@@ -48,8 +59,8 @@ export const StyledDrawerBackButton = styled.button(({ theme }) => {
 
     &:hover,
     &:focus {
-      color: ${theme.base.colors.white};
-      background-color: rgba(255, 255, 255, 0.05);
+      color: ${foreground};
+      background-color: ${hoverBg};
     }
 
     &:focus {
@@ -68,36 +79,6 @@ export const StyledDrawerMetaList = styled.ul `
     color: inherit;
   }
 `;
-export const StyledDrawerPinButton = styled.button(({ theme }) => {
-    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
-    const { ltr } = useDirection();
-    return css `
-    color: inherit;
-    padding: calc(2 * ${theme.base.spacing});
-    cursor: pointer;
-    font-size: ${fontSize.xxl};
-
-    ${StyledIcon} {
-      display: block;
-      ${ltr &&
-        css `
-        transform: scaleX(-1);
-      `}
-    }
-
-    &:hover,
-    &:focus {
-      color: ${theme.base.colors.white};
-      background-color: rgba(255, 255, 255, 0.05);
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: ${theme.base.shadow['focus-inset']};
-    }
-  `;
-});
-StyledDrawerPinButton.defaultProps = defaultThemeProp;
 export const EmptyDrawerVisual = styled.div(({ theme }) => {
     return css `
     width: calc(4 * ${theme.base.spacing});
@@ -106,29 +87,28 @@ export const EmptyDrawerVisual = styled.div(({ theme }) => {
 });
 EmptyDrawerVisual.defaultProps = defaultThemeProp;
 export const StyledDrawerListHeading = styled.h3(({ theme }) => {
+    const { hoverBg, foreground } = navContrastColors(theme);
     return css `
     position: sticky;
     top: 0;
     padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
-    background-color: hsl(207 14% 13% / 1);
+    background-color: ${hoverBg};
+    color: ${foreground};
     z-index: 1;
   `;
 });
 StyledDrawerListHeading.defaultProps = defaultThemeProp;
 export const StyledDrawerViewAll = styled.a(({ theme }) => {
+    const { foreground } = navContrastColors(theme);
     return css `
     position: sticky;
     bottom: 0;
     padding: ${theme.base.spacing} 0;
-    color: inherit;
+    color: ${foreground};
     background-color: ${theme.components['app-shell'].nav['background-color']};
     text-align: center;
     margin-top: 0.0625rem;
 
-    &:hover,
-    &:focus {
-      color: ${theme.base.colors.white};
-    }
     &:focus {
       outline: none;
       box-shadow: ${theme.base.shadow['focus-inset']};
@@ -137,7 +117,7 @@ export const StyledDrawerViewAll = styled.a(({ theme }) => {
 });
 StyledDrawerViewAll.defaultProps = defaultThemeProp;
 export const StyledDrawerListSection = styled.div(({ theme }) => {
-    const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
+    const { border: borderColor } = navContrastColors(theme);
     return css `
     border-top: 0.0625rem solid ${borderColor};
     min-height: max(20%, 8rem);

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { lighten } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection } from '../../hooks';\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { DrawerProps } from '../Drawer';\nimport { StyledIcon } from '../Icon';\n\nimport { navOpenWidth } from './AppShell.styles';\n\nexport const StyledDrawerWrapper = styled.div<DrawerProps>(({ theme, open }) => {\n  return css`\n    background: ${theme.components['app-shell'].nav['background-color']};\n    width: ${navOpenWidth};\n    height: 100%;\n    color: rgba(255, 255, 255, 0.7);\n    opacity: ${open ? 1 : 0};\n  `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeading = styled.header(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    line-height: 1;\n\n    h2 {\n      font-size: ${fontSize.s};\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      margin: 0 auto;\n      position: relative;\n      left: -0.7rem;\n    }\n\n    svg {\n      font-size: ${fontSize.xxl};\n      cursor: pointer;\n      color: rgba(255, 255, 255, 0.7);\n    }\n  `;\n});\n\nStyledDrawerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerBackButton = styled.button(({ theme }) => {\n  return css`\n    height: ${theme.base['hit-area']['mouse-min']};\n    width: ${theme.base['hit-area']['mouse-min']};\n    border-radius: calc(\n      ${`${theme.base['border-radius']} * ${theme.components.button['border-radius']}`}\n    );\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      background-color: rgba(255, 255, 255, 0.05);\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledDrawerBackButton.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerList = styled.ul<{ displayPins: boolean }>(() => {\n  return css``;\n});\n\nStyledDrawerList.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const StyledDrawerPinButton = styled.button(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { ltr } = useDirection();\n\n  return css`\n    color: inherit;\n    padding: calc(2 * ${theme.base.spacing});\n    cursor: pointer;\n    font-size: ${fontSize.xxl};\n\n    ${StyledIcon} {\n      display: block;\n      ${ltr &&\n      css`\n        transform: scaleX(-1);\n      `}\n    }\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n      background-color: rgba(255, 255, 255, 0.05);\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledDrawerPinButton.defaultProps = defaultThemeProp;\n\nexport const EmptyDrawerVisual = styled.div(({ theme }) => {\n  return css`\n    width: calc(4 * ${theme.base.spacing});\n    height: calc(4 * ${theme.base.spacing});\n  `;\n});\n\nEmptyDrawerVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListHeading = styled.h3(({ theme }) => {\n  return css`\n    position: sticky;\n    top: 0;\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    background-color: hsl(207 14% 13% / 1);\n    z-index: 1;\n  `;\n});\n\nStyledDrawerListHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerViewAll = styled.a(({ theme }) => {\n  return css`\n    position: sticky;\n    bottom: 0;\n    padding: ${theme.base.spacing} 0;\n    color: inherit;\n    background-color: ${theme.components['app-shell'].nav['background-color']};\n    text-align: center;\n    margin-top: 0.0625rem;\n\n    &:hover,\n    &:focus {\n      color: ${theme.base.colors.white};\n    }\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledDrawerViewAll.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListSection = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    min-height: max(20%, 8rem);\n    overflow-y: auto;\n  `;\n});\n\nStyledDrawerListSection.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListContainer = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    height: calc(100% - 4 * ${theme.base.spacing} - ${fontSize.xxl});\n    overflow: auto;\n  `;\n});\n\nStyledDrawerListContainer.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Drawer.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { DrawerProps } from '../Drawer';\nimport { StyledMetaListItem } from '../MetaList/MetaList';\nimport { StyledLabel } from '../Label';\nimport { StyledForm } from '../MultiStepForm/MultiStepForm';\n\nimport { navOpenWidth } from './AppShell.styles';\nimport { navContrastColors, pxToRem } from './style-utils';\n\nexport const StyledDrawerWrapper = styled.div<DrawerProps>(({ theme, open }) => {\n  const {\n    components: {\n      'app-shell': {\n        nav: { 'background-color': navBg }\n      }\n    }\n  } = theme;\n  const { foreground, border: borderColor } = navContrastColors(theme);\n\n  return css`\n    background: ${navBg};\n    width: ${navOpenWidth};\n    height: 100%;\n    color: ${foreground};\n    opacity: ${open ? 1 : 0};\n    border-inline-end: ${pxToRem(1)} solid ${borderColor};\n\n    ${StyledForm},\n    ${StyledLabel},\n    ${StyledMetaListItem} {\n      color: ${foreground};\n    }\n  `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeading = styled.header(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    line-height: 1;\n\n    h2 {\n      font-size: ${fontSize.s};\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      margin: 0 auto;\n      position: relative;\n      left: -0.7rem;\n    }\n\n    svg {\n      font-size: ${fontSize.xxl};\n      cursor: pointer;\n      color: ${foreground};\n    }\n  `;\n});\n\nStyledDrawerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerBackButton = styled.button(({ theme }) => {\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    height: ${theme.base['hit-area']['mouse-min']};\n    width: ${theme.base['hit-area']['mouse-min']};\n    border-radius: calc(\n      ${`${theme.base['border-radius']} * ${theme.components.button['border-radius']}`}\n    );\n\n    &:hover,\n    &:focus {\n      color: ${foreground};\n      background-color: ${hoverBg};\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledDrawerBackButton.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerList = styled.ul<{ displayPins: boolean }>(() => {\n  return css``;\n});\n\nStyledDrawerList.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const EmptyDrawerVisual = styled.div(({ theme }) => {\n  return css`\n    width: calc(4 * ${theme.base.spacing});\n    height: calc(4 * ${theme.base.spacing});\n  `;\n});\n\nEmptyDrawerVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListHeading = styled.h3(({ theme }) => {\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    top: 0;\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    background-color: ${hoverBg};\n    color: ${foreground};\n    z-index: 1;\n  `;\n});\n\nStyledDrawerListHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerViewAll = styled.a(({ theme }) => {\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    bottom: 0;\n    padding: ${theme.base.spacing} 0;\n    color: ${foreground};\n    background-color: ${theme.components['app-shell'].nav['background-color']};\n    text-align: center;\n    margin-top: 0.0625rem;\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledDrawerViewAll.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListSection = styled.div(({ theme }) => {\n  const { border: borderColor } = navContrastColors(theme);\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    min-height: max(20%, 8rem);\n    overflow-y: auto;\n  `;\n});\n\nStyledDrawerListSection.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListContainer = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    height: calc(100% - 4 * ${theme.base.spacing} - ${fontSize.xxl});\n    overflow: auto;\n  `;\n});\n\nStyledDrawerListContainer.defaultProps = defaultThemeProp;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationListItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0E,MAAM,OAAO,CAAC;AAYnG,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAiD3D,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,CA8LhD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"NavigationListItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0E,MAAM,OAAO,CAAC;AAYnG,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAoD3D,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,CA8LhD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/AppShell/NavigationListItemWrapper.js

@@ -10,11 +10,14 @@ import { StyledMenu, StyledMenuListContainer, StyledMenuListWrapper } from '../M
 import { defaultThemeProp } from '../../theme';
 import { calculateFontSize } from '../../styles';
 import AppShellContext from './AppShellContext';
+import { navContrastColors } from './style-utils';
 const StyledNavigationPopover = styled.div(({ theme }) => {
+    const navBg = theme.components['app-shell'].nav['background-color'];
+    const { hoverBg, foreground } = navContrastColors(theme);
     const headingFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).s;
     return css `
     display: flex;
-    background-color: ${theme.components['app-shell'].nav['background-color']};
+    background-color: ${navBg};
 
     ${StyledMenu} {
       display: flex;
@@ -27,10 +30,10 @@ const StyledNavigationPopover = styled.div(({ theme }) => {
 
     &,
     ${StyledMenuListContainer} {
-      background-color: ${theme.components['app-shell'].nav['background-color']};
+      background-color: ${navBg};
 
       header {
-        color: ${theme.base.palette.light};
+        color: ${foreground};
         border-bottom: none;
         opacity: 0.7;
 
@@ -42,13 +45,12 @@ const StyledNavigationPopover = styled.div(({ theme }) => {
     }
 
     ${StyledMenuListContainer} li {
-      color: rgba(255, 255, 255, 0.7);
+      color: ${foreground};
       background-color: transparent;
 
       &:hover,
       &[data-current='true'] {
-        color: #ffffff;
-        background-color: rgba(255, 255, 255, 0.05);
+        background-color: ${hoverBg};
       }
     }
   `;

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationListItemWrapper.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useContext, useEffect, useRef, useState, MouseEvent as ReactMouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection, useEscape, useOuterEvent } from '../../hooks';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Popover from '../Popover';\nimport Menu from '../Menu';\nimport { StyledMenu, StyledMenuListContainer, StyledMenuListWrapper } from '../Menu/Menu.styles';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\n\nimport { NavListItemWrapperProps } from './AppShell.types';\nimport AppShellContext from './AppShellContext';\n\nconst StyledNavigationPopover = styled.div(({ theme }) => {\n  const headingFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).s;\n  return css`\n    display: flex;\n    background-color: ${theme.components['app-shell'].nav['background-color']};\n\n    ${StyledMenu} {\n      display: flex;\n      flex-direction: column;\n    }\n\n    ${StyledMenuListWrapper} {\n      overflow: auto;\n    }\n\n    &,\n    ${StyledMenuListContainer} {\n      background-color: ${theme.components['app-shell'].nav['background-color']};\n\n      header {\n        color: ${theme.base.palette.light};\n        border-bottom: none;\n        opacity: 0.7;\n\n        h2 {\n          font-weight: ${theme.base['font-weight']['semi-bold']};\n          font-size: ${headingFontSize};\n        }\n      }\n    }\n\n    ${StyledMenuListContainer} li {\n      color: rgba(255, 255, 255, 0.7);\n      background-color: transparent;\n\n      &:hover,\n      &[data-current='true'] {\n        color: #ffffff;\n        background-color: rgba(255, 255, 255, 0.05);\n      }\n    }\n  `;\n});\n\nStyledNavigationPopover.defaultProps = defaultThemeProp;\n\nconst ListItemWrapper: FC<NavListItemWrapperProps> = props => {\n  const {\n    children,\n    childElementRef,\n    label,\n    tooltipLabel,\n    items = [],\n    content,\n    onMenuToggle\n  } = props;\n  const { navOpen, collapsedHoverMenus, headerEl } = useContext(AppShellContext);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const { end } = useDirection();\n  const mousedOverMenu = useRef(false);\n  const hidePopoverTimeout = useRef<number | null>();\n\n  const closePopover = (focusChildEl: boolean = true) => {\n    if (popoverOpen) {\n      setPopoverOpen(false);\n      if (focusChildEl) {\n        childElementRef.current?.focus();\n      }\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n    }\n  };\n\n  const onMouseEnterContent = () => {\n    if (collapsedHoverMenus) {\n      mousedOverMenu.current = true;\n    }\n  };\n\n  const onMouseLeaveContent = () => {\n    if (mousedOverMenu.current && collapsedHoverMenus) {\n      mousedOverMenu.current = false;\n      closePopover();\n    }\n  };\n\n  useOuterEvent('click', [popoverRef], () => closePopover());\n\n  useEffect(() => {\n    const onClick = (e: Event) => {\n      if (items.length || content) {\n        if (!navOpen) {\n          e.stopPropagation();\n          e.preventDefault();\n        }\n        if (!navOpen && !popoverOpen) setPopoverOpen(true);\n        else {\n          setTimeout(() => {\n            closePopover(false);\n          }, 0);\n        }\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Tab' && !content) {\n        setPopoverOpen(false);\n      }\n    };\n\n    const onMouseOut = (e: MouseEvent) => {\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n      const tag = (e.relatedTarget as HTMLElement).tagName;\n\n      // If the mouse is mousing out from this nav item onto another nav item\n      if (['A', 'BUTTON', 'FORM'].includes(tag)) {\n        closePopover(false);\n      } else {\n        hidePopoverTimeout.current = window.setTimeout(() => {\n          if (!mousedOverMenu.current) {\n            closePopover(false);\n          }\n        }, 1000);\n      }\n    };\n\n    childElementRef.current?.addEventListener('click', onClick);\n    childElementRef.current?.addEventListener('keydown', onKeyDown);\n    if (collapsedHoverMenus) {\n      childElementRef.current?.addEventListener('mouseenter', onClick);\n      childElementRef.current?.addEventListener('mouseleave', onMouseOut);\n    }\n    return () => {\n      childElementRef.current?.removeEventListener('click', onClick);\n      childElementRef.current?.removeEventListener('keydown', onKeyDown);\n      if (collapsedHoverMenus) {\n        childElementRef.current?.removeEventListener('mouseenter', onClick);\n        childElementRef.current?.removeEventListener('mouseleave', onMouseOut);\n      }\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n    };\n  }, [items, content, navOpen, closePopover, collapsedHoverMenus]);\n\n  useEffect(() => {\n    onMenuToggle?.(popoverOpen ? 'open' : 'close');\n  }, [popoverOpen]);\n\n  useEscape(() => closePopover(), childElementRef, [childElementRef]);\n\n  useEscape(() => closePopover(), popoverRef, [popoverRef]);\n\n  return (\n    <>\n      {children}\n      {!navOpen && (\n        <>\n          {!popoverOpen && (\n            <Tooltip\n              target={childElementRef.current}\n              placement={end}\n              showDelay='none'\n              hideDelay='none'\n            >\n              {tooltipLabel}\n            </Tooltip>\n          )}\n          {popoverOpen && (items.length || content) && (\n            <Popover\n              target={childElementRef.current}\n              placement={`${end}-start`}\n              ref={popoverRef}\n              as={StyledNavigationPopover}\n              arrow\n              modifiers={\n                headerEl\n                  ? [\n                      {\n                        name: 'preventOverflow',\n                        options: {\n                          padding: {\n                            top: headerEl.offsetHeight + 8,\n                            right: 8,\n                            bottom: 8,\n                            left: 8\n                          }\n                        }\n                      }\n                    ]\n                  : undefined\n              }\n              onClick={(e: ReactMouseEvent<HTMLDivElement>) => {\n                e.stopPropagation();\n              }}\n            >\n              {content ? (\n                <div onMouseEnter={onMouseEnterContent} onMouseLeave={onMouseLeaveContent}>\n                  {content}\n                </div>\n              ) : (\n                <Menu\n                  mode='action'\n                  variant='flyout'\n                  focusControlEl={childElementRef.current ?? undefined}\n                  scrollAt={99}\n                  items={items.map(item => {\n                    return {\n                      id: (item.primary || item.text) as string,\n                      primary: (item.primary || item.text) as string,\n                      href: item.href,\n                      onClick: (_, e) => {\n                        e.stopPropagation();\n                        item.onClick?.(e);\n                        setPopoverOpen(false);\n                      }\n                    };\n                  })}\n                  header={<Text variant='h2'>{label}</Text>}\n                  onMouseEnter={onMouseEnterContent}\n                  onMouseLeave={onMouseLeaveContent}\n                />\n              )}\n            </Popover>\n          )}\n        </>\n      )}\n    </>\n  );\n};\n\nexport default ListItemWrapper;\n"]}
+{"version":3,"file":"NavigationListItemWrapper.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useContext, useEffect, useRef, useState, MouseEvent as ReactMouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection, useEscape, useOuterEvent } from '../../hooks';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Popover from '../Popover';\nimport Menu from '../Menu';\nimport { StyledMenu, StyledMenuListContainer, StyledMenuListWrapper } from '../Menu/Menu.styles';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\n\nimport { NavListItemWrapperProps } from './AppShell.types';\nimport AppShellContext from './AppShellContext';\nimport { navContrastColors } from './style-utils';\n\nconst StyledNavigationPopover = styled.div(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav['background-color'];\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  const headingFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).s;\n  return css`\n    display: flex;\n    background-color: ${navBg};\n\n    ${StyledMenu} {\n      display: flex;\n      flex-direction: column;\n    }\n\n    ${StyledMenuListWrapper} {\n      overflow: auto;\n    }\n\n    &,\n    ${StyledMenuListContainer} {\n      background-color: ${navBg};\n\n      header {\n        color: ${foreground};\n        border-bottom: none;\n        opacity: 0.7;\n\n        h2 {\n          font-weight: ${theme.base['font-weight']['semi-bold']};\n          font-size: ${headingFontSize};\n        }\n      }\n    }\n\n    ${StyledMenuListContainer} li {\n      color: ${foreground};\n      background-color: transparent;\n\n      &:hover,\n      &[data-current='true'] {\n        background-color: ${hoverBg};\n      }\n    }\n  `;\n});\n\nStyledNavigationPopover.defaultProps = defaultThemeProp;\n\nconst ListItemWrapper: FC<NavListItemWrapperProps> = props => {\n  const {\n    children,\n    childElementRef,\n    label,\n    tooltipLabel,\n    items = [],\n    content,\n    onMenuToggle\n  } = props;\n  const { navOpen, collapsedHoverMenus, headerEl } = useContext(AppShellContext);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const { end } = useDirection();\n  const mousedOverMenu = useRef(false);\n  const hidePopoverTimeout = useRef<number | null>();\n\n  const closePopover = (focusChildEl: boolean = true) => {\n    if (popoverOpen) {\n      setPopoverOpen(false);\n      if (focusChildEl) {\n        childElementRef.current?.focus();\n      }\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n    }\n  };\n\n  const onMouseEnterContent = () => {\n    if (collapsedHoverMenus) {\n      mousedOverMenu.current = true;\n    }\n  };\n\n  const onMouseLeaveContent = () => {\n    if (mousedOverMenu.current && collapsedHoverMenus) {\n      mousedOverMenu.current = false;\n      closePopover();\n    }\n  };\n\n  useOuterEvent('click', [popoverRef], () => closePopover());\n\n  useEffect(() => {\n    const onClick = (e: Event) => {\n      if (items.length || content) {\n        if (!navOpen) {\n          e.stopPropagation();\n          e.preventDefault();\n        }\n        if (!navOpen && !popoverOpen) setPopoverOpen(true);\n        else {\n          setTimeout(() => {\n            closePopover(false);\n          }, 0);\n        }\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Tab' && !content) {\n        setPopoverOpen(false);\n      }\n    };\n\n    const onMouseOut = (e: MouseEvent) => {\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n      const tag = (e.relatedTarget as HTMLElement).tagName;\n\n      // If the mouse is mousing out from this nav item onto another nav item\n      if (['A', 'BUTTON', 'FORM'].includes(tag)) {\n        closePopover(false);\n      } else {\n        hidePopoverTimeout.current = window.setTimeout(() => {\n          if (!mousedOverMenu.current) {\n            closePopover(false);\n          }\n        }, 1000);\n      }\n    };\n\n    childElementRef.current?.addEventListener('click', onClick);\n    childElementRef.current?.addEventListener('keydown', onKeyDown);\n    if (collapsedHoverMenus) {\n      childElementRef.current?.addEventListener('mouseenter', onClick);\n      childElementRef.current?.addEventListener('mouseleave', onMouseOut);\n    }\n    return () => {\n      childElementRef.current?.removeEventListener('click', onClick);\n      childElementRef.current?.removeEventListener('keydown', onKeyDown);\n      if (collapsedHoverMenus) {\n        childElementRef.current?.removeEventListener('mouseenter', onClick);\n        childElementRef.current?.removeEventListener('mouseleave', onMouseOut);\n      }\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n    };\n  }, [items, content, navOpen, closePopover, collapsedHoverMenus]);\n\n  useEffect(() => {\n    onMenuToggle?.(popoverOpen ? 'open' : 'close');\n  }, [popoverOpen]);\n\n  useEscape(() => closePopover(), childElementRef, [childElementRef]);\n\n  useEscape(() => closePopover(), popoverRef, [popoverRef]);\n\n  return (\n    <>\n      {children}\n      {!navOpen && (\n        <>\n          {!popoverOpen && (\n            <Tooltip\n              target={childElementRef.current}\n              placement={end}\n              showDelay='none'\n              hideDelay='none'\n            >\n              {tooltipLabel}\n            </Tooltip>\n          )}\n          {popoverOpen && (items.length || content) && (\n            <Popover\n              target={childElementRef.current}\n              placement={`${end}-start`}\n              ref={popoverRef}\n              as={StyledNavigationPopover}\n              arrow\n              modifiers={\n                headerEl\n                  ? [\n                      {\n                        name: 'preventOverflow',\n                        options: {\n                          padding: {\n                            top: headerEl.offsetHeight + 8,\n                            right: 8,\n                            bottom: 8,\n                            left: 8\n                          }\n                        }\n                      }\n                    ]\n                  : undefined\n              }\n              onClick={(e: ReactMouseEvent<HTMLDivElement>) => {\n                e.stopPropagation();\n              }}\n            >\n              {content ? (\n                <div onMouseEnter={onMouseEnterContent} onMouseLeave={onMouseLeaveContent}>\n                  {content}\n                </div>\n              ) : (\n                <Menu\n                  mode='action'\n                  variant='flyout'\n                  focusControlEl={childElementRef.current ?? undefined}\n                  scrollAt={99}\n                  items={items.map(item => {\n                    return {\n                      id: (item.primary || item.text) as string,\n                      primary: (item.primary || item.text) as string,\n                      href: item.href,\n                      onClick: (_, e) => {\n                        e.stopPropagation();\n                        item.onClick?.(e);\n                        setPopoverOpen(false);\n                      }\n                    };\n                  })}\n                  header={<Text variant='h2'>{label}</Text>}\n                  onMouseEnter={onMouseEnterContent}\n                  onMouseLeave={onMouseLeaveContent}\n                />\n              )}\n            </Popover>\n          )}\n        </>\n      )}\n    </>\n  );\n};\n\nexport default ListItemWrapper;\n"]}

package/lib/components/AppShell/style-utils.d.ts

@@ -0,0 +1,9 @@
+import { DefaultTheme } from 'styled-components';
+export declare const navContrastColors: (theme: DefaultTheme) => {
+    hoverBg: string;
+    foreground: string;
+    border: string;
+    interactive: string;
+};
+export declare const pxToRem: (n: number) => string;
+//# sourceMappingURL=style-utils.d.ts.map

package/lib/components/AppShell/style-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-utils.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/style-utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIjD,eAAO,MAAM,iBAAiB,UACrB,YAAY;aAEV,MAAM;gBACH,MAAM;YACV,MAAM;iBACD,MAAM;CA2BpB,CAAC;AAEF,eAAO,MAAM,OAAO,MAAO,MAAM,KAAG,MAA4B,CAAC"}

package/lib/components/AppShell/style-utils.js

@@ -0,0 +1,20 @@
+import { darken, getContrast, lighten, readableColor, transparentize } from 'polished';
+import { readableHue } from '../../styles';
+export const navContrastColors = (theme) => {
+    const { base: { palette: { interactive } }, components: { 'app-shell': { nav: { 'background-color': navBg } } } } = theme;
+    let hoverBg = darken(0.05, navBg);
+    if (getContrast(navBg, hoverBg) === 1) {
+        hoverBg = lighten(0.15, navBg);
+    }
+    const foregroundColor = readableColor(navBg);
+    const borderColor = transparentize(0.8, foregroundColor);
+    const interactiveColor = readableHue(interactive, navBg);
+    return {
+        hoverBg,
+        foreground: foregroundColor,
+        border: borderColor,
+        interactive: interactiveColor
+    };
+};
+export const pxToRem = (n) => `${n * 0.0625}rem`;
+//# sourceMappingURL=style-utils.js.map

package/lib/components/AppShell/style-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-utils.js","sourceRoot":"","sources":["../../../src/components/AppShell/style-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAGvF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAmB,EAMnB,EAAE;IACF,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,WAAW,EAAE,EACzB,EACD,UAAU,EAAE,EACV,WAAW,EAAE,EACX,GAAG,EAAE,EAAE,kBAAkB,EAAE,KAAK,EAAE,EACnC,EACF,EACF,GAAG,KAAK,CAAC;IACV,IAAI,OAAO,GAAG,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAClC,IAAI,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE;QACrC,OAAO,GAAG,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAChC;IAED,MAAM,eAAe,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,WAAW,GAAG,cAAc,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;IACzD,MAAM,gBAAgB,GAAG,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAEzD,OAAO;QACL,OAAO;QACP,UAAU,EAAE,eAAe;QAC3B,MAAM,EAAE,WAAW;QACnB,WAAW,EAAE,gBAAgB;KAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAS,EAAU,EAAE,CAAC,GAAG,CAAC,GAAG,MAAM,KAAK,CAAC","sourcesContent":["import { darken, getContrast, lighten, readableColor, transparentize } from 'polished';\nimport { DefaultTheme } from 'styled-components';\n\nimport { readableHue } from '../../styles';\n\nexport const navContrastColors = (\n  theme: DefaultTheme\n): {\n  hoverBg: string;\n  foreground: string;\n  border: string;\n  interactive: string;\n} => {\n  const {\n    base: {\n      palette: { interactive }\n    },\n    components: {\n      'app-shell': {\n        nav: { 'background-color': navBg }\n      }\n    }\n  } = theme;\n  let hoverBg = darken(0.05, navBg);\n  if (getContrast(navBg, hoverBg) === 1) {\n    hoverBg = lighten(0.15, navBg);\n  }\n\n  const foregroundColor = readableColor(navBg);\n  const borderColor = transparentize(0.8, foregroundColor);\n  const interactiveColor = readableHue(interactive, navBg);\n\n  return {\n    hoverBg,\n    foreground: foregroundColor,\n    border: borderColor,\n    interactive: interactiveColor\n  };\n};\n\nexport const pxToRem = (n: number): string => `${n * 0.0625}rem`;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAqB3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;;;;AAwT7C,wBAAyD"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAqB3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;;;;AAsT7C,wBAAyD"}

package/lib/components/ComboBox/ComboBox.js

@@ -144,9 +144,9 @@ const ComboBox = forwardRef((props, ref) => {
                     toggleSelectedDescendantsActive(true);
                 }, onSelectedBlur: () => {
                     toggleSelectedDescendantsActive(false);
-                }, ...restProps }), _jsx(Popover, { show: open && menu !== undefined, target: containerRef.current, placement: 'bottom-start', portal: false, modifiers: [sameWidth], 
+                }, ...restProps }), _jsx(Popover, { show: open && menu !== undefined, target: containerRef.current, placement: 'bottom-start', modifiers: [sameWidth], 
                 // FIXME: Removed absolute strategy for mobile to avoid overflow issues.
-                strategy: 'fixed', onMouseDown: (e) => e.preventDefault(), hideOnTargetHidden: true, children: menu && (_jsx(Menu, { ref: menuRef, listId: listId, id: menuComponentId, role: 'listbox', mode: mode, ...menu, items: menu.items, focusControlEl: inputRef.current || undefined, onItemClick: (itemId, e) => {
+                strategy: 'fixed', onMouseDown: (e) => e.preventDefault(), children: menu && (_jsx(Menu, { ref: menuRef, listId: listId, id: menuComponentId, role: 'listbox', mode: mode, ...menu, items: menu.items, focusControlEl: inputRef.current || undefined, onItemClick: (itemId, e) => {
                         if (mode === 'single-select') {
                             setOpen(false);
                             toggleMenuDescendantsActive(true);