npm - @pega/cosmos-react-core - Versions diffs - 9.10.1 → 9.12.0 - Mend

@pega/cosmos-react-core 9.10.1 → 9.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/lib/components/Menu/Menu.styles.js CHANGED Viewed

@@ -193,7 +193,7 @@ export const StyledMenuItem = styled.li(({ theme: { base, components }, isParent
         !selectableParent &&
         (mode === 'multi-select' || mode === 'single-select') &&
         css `
-        padding-inline-start: calc(1.125rem + ${base.spacing});
+        padding-inline-start: calc(1.125rem + 2 * ${base.spacing});
       `}
       ${StyledGrid} {

package/lib/components/Menu/Menu.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, mix, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledEmptyState } from '../EmptyState';\nimport Icon, { StyledIcon } from '../Icon';\nimport { StyledGrid } from '../Grid';\nimport { tryCatch } from '../../utils';\nimport { StyledText } from '../Text';\nimport { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';\nimport { StyledMetaList, StyledMetaListItem } from '../MetaList/MetaList';\nimport Button, { StyledButton } from '../Button';\nimport { readableColor } from '../../styles';\nimport {\n StyledPrimary,\n StyledSecondary,\n StyledSummaryItem,\n StyledSummaryItemActions,\n StyledVisual\n} from '../SummaryItem';\nimport { ellipsisOverflow } from '../../styles/mixins';\nimport { StyledFlex } from '../Flex';\nimport { StyledFormControl } from '../FormControl';\n\nimport type { MenuProps } from './Menu.types';\n\nexport const StyledExpandButton = styled(Button)`\n align-self: center;\n`;\n\nexport const StyledCheckMarkIcon = styled(Icon)``;\n\nexport const StyledMenuItem = styled.li<{\n isParentItem: boolean;\n mode?: MenuProps['mode'];\n itemLayout?: MenuProps['itemLayout'];\n isChecked?: boolean;\n selectableParent?: boolean;\n}>(\n ({\n theme: { base, components },\n isParentItem,\n itemLayout,\n mode = 'action',\n isChecked = false,\n selectableParent = false\n }) => {\n const activeColor = tryCatch(() =>\n mix(0.85, base.palette['primary-background'], base.palette.interactive)\n );\n const hoverColor = tryCatch(() =>\n mix(0.95, base.palette['primary-background'], base.palette.interactive)\n );\n\n const checkedBackground = components['radio-check'][':checked']['background-color'];\n const checkedForeground = tryCatch(() => readableColor(checkedBackground));\n\n return css`\n min-height: ${base['hit-area']['mouse-min']};\n padding-block: calc(0.75 * ${base.spacing});\n padding-inline: ${base.spacing};\n cursor: pointer;\n\n > ${StyledSummaryItem} {\n ${StyledSummaryItemActions}, ${StyledVisual} {\n display: grid;\n align-items: center;\n }\n\n > ${StyledVisual}:has(> :nth-child(2)) {\n grid-template-columns: auto auto;\n grid-column-gap: ${base.spacing};\n }\n\n ${itemLayout === 'stacked' &&\n css`\n &:has(${StyledSecondary})\n > ${StyledVisual},\n &:has(${StyledSecondary})\n > ${StyledSummaryItemActions} {\n height: ${base['hit-area']['mouse-min']};\n align-self: start;\n }\n `}\n }\n\n ${itemLayout === 'inline' &&\n css`\n justify-content: flex-start;\n\n ${StyledSummaryItem} {\n /* Sets grid columns based on SummaryItem content combinations /\n\n &:has(${StyledVisual}):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n grid-template-areas: 'visual primary secondary actions';\n grid-template-columns: auto auto 1fr auto;\n }\n\n &:has(${StyledVisual}):has(${StyledSecondary}):not(:has(${StyledSummaryItemActions})) {\n grid-template-areas: 'visual primary secondary';\n grid-template-columns: auto auto 1fr;\n }\n\n &:has(${StyledVisual}):not(:has(${StyledSecondary})):has(${StyledSummaryItemActions}) {\n grid-template-areas: 'visual primary actions';\n grid-template-columns: auto 1fr auto;\n }\n\n &:has(${StyledVisual}):not(:has(${StyledSecondary})):not(\n :has(${StyledSummaryItemActions})\n ) {\n grid-template-areas: 'visual primary';\n grid-template-columns: auto 1fr;\n }\n\n &:not(:has(${StyledVisual})):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n grid-template-areas: 'primary secondary actions';\n grid-template-columns: auto 1fr auto;\n }\n\n &:not(:has(${StyledVisual})):has(${StyledSecondary}):not(\n :has(${StyledSummaryItemActions})\n ) {\n grid-template-areas: 'primary secondary';\n grid-template-columns: auto 1fr;\n }\n\n &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):has(\n ${StyledSummaryItemActions}\n ) {\n grid-template-areas: 'primary actions';\n grid-template-columns: auto 1fr;\n }\n\n &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):not(\n :has(${StyledSummaryItemActions})\n ) {\n grid-template-areas: 'primary';\n grid-template-columns: 1fr;\n flex-grow: 0;\n }\n\n & > ${StyledPrimary} {\n ${ellipsisOverflow};\n }\n\n & > ${StyledSecondary} {\n ${ellipsisOverflow};\n\n ul {\n li {\n ${ellipsisOverflow};\n }\n justify-content: end;\n }\n }\n\n & > ${StyledSummaryItemActions} > ${StyledFlex} {\n justify-content: end;\n }\n }\n `}\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n ${itemLayout === 'stacked' &&\n css`\n &:has(${StyledSecondary})\n > ${StyledVisual},\n &:has(${StyledSecondary})\n > ${StyledSummaryItemActions} {\n height: ${base['hit-area']['finger-min']};\n }\n `}\n }\n\n &:focus-within {\n background-color: ${activeColor};\n }\n\n &:hover {\n ${StyledCheckMarkIcon} {\n visibility: visible;\n ${mode === 'single-select' &&\n css`\n ${isChecked\n ? css`\n color: ${checkedBackground};\n `\n : css`\n visibility: hidden;\n `}\n `}\n ${mode === 'multi-select' &&\n css`\n ${!isChecked &&\n css`\n border-color: ${components['form-control'][':hover']['border-color']};\n `}\n `}\n }\n }\n\n &:hover:not([aria-disabled='true']) {\n background-color: ${hoverColor};\n }\n\n a:first-of-type {\n display: block;\n width: 100%;\n text-decoration: none;\n color: inherit;\n }\n\n / The enclosing menu item has required min-height already set /\n ${isParentItem &&\n selectableParent &&\n css`\n ${StyledSummaryItemActions} ${StyledButton} {\n min-height: unset;\n }\n `}\n\n ${isParentItem &&\n !selectableParent &&\n (mode === 'multi-select' \|\| mode === 'single-select') &&\n css`\n padding-inline-start: calc(1.125rem + ${base.spacing});\n `}\n\n ${StyledGrid} {\n flex-grow: 1;\n }\n\n ${StyledCheckMarkIcon} {\n margin-inline-start: 0;\n ${mode === 'single-select' &&\n css`\n ${isChecked\n ? css`\n color: ${checkedBackground};\n `\n : css`\n visibility: hidden;\n `}\n `}\n ${mode === 'multi-select' &&\n css`\n ${isChecked\n ? css`\n color: ${checkedForeground};\n background-color: ${checkedBackground};\n border: 0.0625rem solid ${components['radio-check'][':checked']['border-color']};\n `\n : css`\n color: transparent;\n border: 0.0625rem solid ${components['radio-check']['border-color']};\n `}\n border-radius: min(\n calc(${base['border-radius']} ${components.checkbox['border-radius']}),\n 0.25rem\n );\n `}\n }\n\n &[aria-disabled='true'] {\n cursor: not-allowed;\n background-color: ${components['form-control'][':disabled']['background-color']};\n opacity: ${base['disabled-opacity']};\n }\n `;\n }\n);\n\nStyledMenuItem.defaultProps = defaultThemeProp;\n\nexport const StyledAncestors = styled.div`\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n\n & > ${StyledText} {\n ${ellipsisOverflow};\n }\n`;\n\nexport const StyledVisibilityHidden = styled.p`\n ${hideVisually}\n`;\n\nexport const StyledSeparator = styled.li(({ theme }) => {\n return css`\n height: 0.0625rem;\n background-color: ${theme.base.palette['border-line']};\n margin: ${theme.base.spacing} 0;\n `;\n});\n\nStyledSeparator.defaultProps = defaultThemeProp;\n\nexport const StyledMenuGroupHeader = styled.div(({ theme }) => {\n return css`\n min-height: ${theme.base['hit-area']['mouse-min']};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n background-color: ${theme.base.palette['secondary-background']};\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n }\n `;\n});\n\nStyledMenuGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListHeader = styled.legend(({ theme: { base } }) => {\n const hoverColor = tryCatch(() =>\n mix(0.95, base.palette['primary-background'], base.palette.interactive)\n );\n const activeColor = tryCatch(() =>\n mix(0.85, base.palette['primary-background'], base.palette.interactive)\n );\n\n return css`\n cursor: pointer;\n width: 100%;\n background-color: ${base.palette['primary-background']};\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n &:focus-within {\n box-shadow: ${base.shadow['focus-inset']};\n background-color: ${activeColor};\n }\n\n &:hover:not([aria-disabled='true']):not([data-current='true']) {\n background-color: ${hoverColor};\n }\n color: ${base.palette['foreground-color']};\n padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n text-align: start;\n border-radius: inherit;\n\n > ${StyledGrid} {\n grid-column-gap: ${base.spacing};\n }\n\n ${StyledIcon} {\n /* Fixes vertical align issue increasing box size beyond square /\n display: block;\n }\n `;\n});\n\nStyledMenuListHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuList = styled.ul(\n ({ theme }) => css`\n overflow-x: hidden;\n overflow-y: auto;\n list-style: none;\n height: 100%;\n border-radius: inherit;\n\n ${StyledEmptyState} {\n padding: ${theme.base.spacing};\n height: auto;\n }\n\n li:not(:first-child):not([role='presentation']) > ${StyledMenuGroupHeader} {\n margin-block-start: ${theme.base.spacing};\n }\n `\n);\n\nStyledMenuList.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListContainer = styled.fieldset(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n border: 0;\n border-radius: inherit;\n `;\n});\n\nStyledMenuListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlyoutMenuListContainer = styled(StyledMenuListContainer)`\n min-width: 10rem;\n`;\n\nexport const StyledLoadingItem = styled.li`\n display: block;\n position: relative;\n height: 2.8rem;\n`;\n\nexport const StyledMenuListWrapper = styled.div(\n ({ theme }) => css`\n position: relative;\n overflow: hidden;\n transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n & > fieldset:first-child {\n position: relative;\n }\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n ${StyledMetaList} ${StyledMetaListItem} {\n display: inline;\n vertical-align: baseline;\n margin: 0;\n }\n `\n);\n\nStyledMenuListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledMenu = styled.div(({ theme }) => {\n const borderStyle = `0.0625rem solid ${theme.base.palette['border-line']}`;\n\n return css`\n display: flex;\n flex-direction: column;\n\n &,\n ${StyledMenuListWrapper} {\n max-height: inherit;\n }\n\n &:focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n outline: none;\n }\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n &[data-active-scope='true'] [data-current='true'] {\n box-shadow: ${theme.base.shadow['focus-inset']};\n\n @media (forced-colors: active) {\n outline: 0.125rem solid Highlight;\n outline-offset: -0.125rem;\n }\n\n &:first-child {\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n }\n\n &:last-child {\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n }\n }\n\n ${StyledVisuallyHiddenText}:first-child {\n + ${StyledMenuListWrapper}, + header {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n }\n\n > header,\n > footer {\n padding: ${theme.base.spacing};\n }\n\n > header {\n border-bottom: ${borderStyle};\n }\n\n > footer {\n border-top: ${borderStyle};\n }\n `;\n});\n\nStyledMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMenuFilter = styled.div(({ theme }) => {\n const borderRadius = `calc(${theme.components['search-input']['border-radius']} * ${theme.base['border-radius']})`;\n\n return css`\n position: relative;\n min-height: ${theme.components.input.height};\n height: ${theme.components.input.height};\n --icon-start-padding: calc(1.5 * ${theme.components.input.padding});\n /* stylelint-disable-next-line unit-allowed-list /\n --icon-size: max(1.125rem, 14px);\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n min-width: ${theme.base['hit-area']['finger-min']};\n }\n\n ${StyledFormControl} {\n height: 100%;\n border-radius: ${borderRadius};\n padding-inline-start: calc(\n var(--icon-start-padding) + var(--icon-size) + (0.5 ${theme.components.input.padding})\n );\n padding-inline-end: calc(1.5 * ${theme.components.input.padding});\n\n &::-webkit-search-cancel-button {\n display: none;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &:focus-visible:not([disabled]) {\n box-shadow: ${theme.base.shadow['focus-inset']};\n border-color: ${theme.components['form-control']['border-color']};\n\n :hover {\n border-color: ${theme.components['form-control'][':hover']['border-color']};\n }\n }\n }\n `;\n});\n\nStyledMenuFilter.defaultProps = defaultThemeProp;\n\nexport const StyledFilterIcon = styled(Icon)(({ theme }) => {\n const iconColor = tryCatch(() => transparentize(0.3, theme.base.palette['foreground-color']));\n\n return css`\n position: absolute;\n pointer-events: none;\n color: ${iconColor};\n inset-inline-start: var(--icon-start-padding);\n /* stylelint-disable unit-allowed-list /\n inset-block-start: calc(0.5 (${theme.components.input.height} - max(1.125rem, 14px)));\n\n @media (pointer: coarse) {\n inset-block-start: calc(\n 0.5 * (${theme.base['hit-area']['finger-min']} - max(1.125rem, 14px))\n );\n }\n /* stylelint-enable unit-allowed-list */\n `;\n});\n\nStyledFilterIcon.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, mix, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledEmptyState } from '../EmptyState';\nimport Icon, { StyledIcon } from '../Icon';\nimport { StyledGrid } from '../Grid';\nimport { tryCatch } from '../../utils';\nimport { StyledText } from '../Text';\nimport { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';\nimport { StyledMetaList, StyledMetaListItem } from '../MetaList/MetaList';\nimport Button, { StyledButton } from '../Button';\nimport { readableColor } from '../../styles';\nimport {\n StyledPrimary,\n StyledSecondary,\n StyledSummaryItem,\n StyledSummaryItemActions,\n StyledVisual\n} from '../SummaryItem';\nimport { ellipsisOverflow } from '../../styles/mixins';\nimport { StyledFlex } from '../Flex';\nimport { StyledFormControl } from '../FormControl';\n\nimport type { MenuProps } from './Menu.types';\n\nexport const StyledExpandButton = styled(Button)`\n align-self: center;\n`;\n\nexport const StyledCheckMarkIcon = styled(Icon)``;\n\nexport const StyledMenuItem = styled.li<{\n isParentItem: boolean;\n mode?: MenuProps['mode'];\n itemLayout?: MenuProps['itemLayout'];\n isChecked?: boolean;\n selectableParent?: boolean;\n}>(\n ({\n theme: { base, components },\n isParentItem,\n itemLayout,\n mode = 'action',\n isChecked = false,\n selectableParent = false\n }) => {\n const activeColor = tryCatch(() =>\n mix(0.85, base.palette['primary-background'], base.palette.interactive)\n );\n const hoverColor = tryCatch(() =>\n mix(0.95, base.palette['primary-background'], base.palette.interactive)\n );\n\n const checkedBackground = components['radio-check'][':checked']['background-color'];\n const checkedForeground = tryCatch(() => readableColor(checkedBackground));\n\n return css`\n min-height: ${base['hit-area']['mouse-min']};\n padding-block: calc(0.75 * ${base.spacing});\n padding-inline: ${base.spacing};\n cursor: pointer;\n\n > ${StyledSummaryItem} {\n ${StyledSummaryItemActions}, ${StyledVisual} {\n display: grid;\n align-items: center;\n }\n\n > ${StyledVisual}:has(> :nth-child(2)) {\n grid-template-columns: auto auto;\n grid-column-gap: ${base.spacing};\n }\n\n ${itemLayout === 'stacked' &&\n css`\n &:has(${StyledSecondary})\n > ${StyledVisual},\n &:has(${StyledSecondary})\n > ${StyledSummaryItemActions} {\n height: ${base['hit-area']['mouse-min']};\n align-self: start;\n }\n `}\n }\n\n ${itemLayout === 'inline' &&\n css`\n justify-content: flex-start;\n\n ${StyledSummaryItem} {\n /* Sets grid columns based on SummaryItem content combinations /\n\n &:has(${StyledVisual}):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n grid-template-areas: 'visual primary secondary actions';\n grid-template-columns: auto auto 1fr auto;\n }\n\n &:has(${StyledVisual}):has(${StyledSecondary}):not(:has(${StyledSummaryItemActions})) {\n grid-template-areas: 'visual primary secondary';\n grid-template-columns: auto auto 1fr;\n }\n\n &:has(${StyledVisual}):not(:has(${StyledSecondary})):has(${StyledSummaryItemActions}) {\n grid-template-areas: 'visual primary actions';\n grid-template-columns: auto 1fr auto;\n }\n\n &:has(${StyledVisual}):not(:has(${StyledSecondary})):not(\n :has(${StyledSummaryItemActions})\n ) {\n grid-template-areas: 'visual primary';\n grid-template-columns: auto 1fr;\n }\n\n &:not(:has(${StyledVisual})):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n grid-template-areas: 'primary secondary actions';\n grid-template-columns: auto 1fr auto;\n }\n\n &:not(:has(${StyledVisual})):has(${StyledSecondary}):not(\n :has(${StyledSummaryItemActions})\n ) {\n grid-template-areas: 'primary secondary';\n grid-template-columns: auto 1fr;\n }\n\n &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):has(\n ${StyledSummaryItemActions}\n ) {\n grid-template-areas: 'primary actions';\n grid-template-columns: auto 1fr;\n }\n\n &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):not(\n :has(${StyledSummaryItemActions})\n ) {\n grid-template-areas: 'primary';\n grid-template-columns: 1fr;\n flex-grow: 0;\n }\n\n & > ${StyledPrimary} {\n ${ellipsisOverflow};\n }\n\n & > ${StyledSecondary} {\n ${ellipsisOverflow};\n\n ul {\n li {\n ${ellipsisOverflow};\n }\n justify-content: end;\n }\n }\n\n & > ${StyledSummaryItemActions} > ${StyledFlex} {\n justify-content: end;\n }\n }\n `}\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n ${itemLayout === 'stacked' &&\n css`\n &:has(${StyledSecondary})\n > ${StyledVisual},\n &:has(${StyledSecondary})\n > ${StyledSummaryItemActions} {\n height: ${base['hit-area']['finger-min']};\n }\n `}\n }\n\n &:focus-within {\n background-color: ${activeColor};\n }\n\n &:hover {\n ${StyledCheckMarkIcon} {\n visibility: visible;\n ${mode === 'single-select' &&\n css`\n ${isChecked\n ? css`\n color: ${checkedBackground};\n `\n : css`\n visibility: hidden;\n `}\n `}\n ${mode === 'multi-select' &&\n css`\n ${!isChecked &&\n css`\n border-color: ${components['form-control'][':hover']['border-color']};\n `}\n `}\n }\n }\n\n &:hover:not([aria-disabled='true']) {\n background-color: ${hoverColor};\n }\n\n a:first-of-type {\n display: block;\n width: 100%;\n text-decoration: none;\n color: inherit;\n }\n\n / The enclosing menu item has required min-height already set /\n ${isParentItem &&\n selectableParent &&\n css`\n ${StyledSummaryItemActions} ${StyledButton} {\n min-height: unset;\n }\n `}\n\n ${isParentItem &&\n !selectableParent &&\n (mode === 'multi-select' \|\| mode === 'single-select') &&\n css`\n padding-inline-start: calc(1.125rem + 2 ${base.spacing});\n `}\n\n ${StyledGrid} {\n flex-grow: 1;\n }\n\n ${StyledCheckMarkIcon} {\n margin-inline-start: 0;\n ${mode === 'single-select' &&\n css`\n ${isChecked\n ? css`\n color: ${checkedBackground};\n `\n : css`\n visibility: hidden;\n `}\n `}\n ${mode === 'multi-select' &&\n css`\n ${isChecked\n ? css`\n color: ${checkedForeground};\n background-color: ${checkedBackground};\n border: 0.0625rem solid ${components['radio-check'][':checked']['border-color']};\n `\n : css`\n color: transparent;\n border: 0.0625rem solid ${components['radio-check']['border-color']};\n `}\n border-radius: min(\n calc(${base['border-radius']} * ${components.checkbox['border-radius']}),\n 0.25rem\n );\n `}\n }\n\n &[aria-disabled='true'] {\n cursor: not-allowed;\n background-color: ${components['form-control'][':disabled']['background-color']};\n opacity: ${base['disabled-opacity']};\n }\n `;\n }\n);\n\nStyledMenuItem.defaultProps = defaultThemeProp;\n\nexport const StyledAncestors = styled.div`\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n\n & > ${StyledText} {\n ${ellipsisOverflow};\n }\n`;\n\nexport const StyledVisibilityHidden = styled.p`\n ${hideVisually}\n`;\n\nexport const StyledSeparator = styled.li(({ theme }) => {\n return css`\n height: 0.0625rem;\n background-color: ${theme.base.palette['border-line']};\n margin: ${theme.base.spacing} 0;\n `;\n});\n\nStyledSeparator.defaultProps = defaultThemeProp;\n\nexport const StyledMenuGroupHeader = styled.div(({ theme }) => {\n return css`\n min-height: ${theme.base['hit-area']['mouse-min']};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n background-color: ${theme.base.palette['secondary-background']};\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n }\n `;\n});\n\nStyledMenuGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListHeader = styled.legend(({ theme: { base } }) => {\n const hoverColor = tryCatch(() =>\n mix(0.95, base.palette['primary-background'], base.palette.interactive)\n );\n const activeColor = tryCatch(() =>\n mix(0.85, base.palette['primary-background'], base.palette.interactive)\n );\n\n return css`\n cursor: pointer;\n width: 100%;\n background-color: ${base.palette['primary-background']};\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n &:focus-within {\n box-shadow: ${base.shadow['focus-inset']};\n background-color: ${activeColor};\n }\n\n &:hover:not([aria-disabled='true']):not([data-current='true']) {\n background-color: ${hoverColor};\n }\n color: ${base.palette['foreground-color']};\n padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n text-align: start;\n border-radius: inherit;\n\n > ${StyledGrid} {\n grid-column-gap: ${base.spacing};\n }\n\n ${StyledIcon} {\n /* Fixes vertical align issue increasing box size beyond square /\n display: block;\n }\n `;\n});\n\nStyledMenuListHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuList = styled.ul(\n ({ theme }) => css`\n overflow-x: hidden;\n overflow-y: auto;\n list-style: none;\n height: 100%;\n border-radius: inherit;\n\n ${StyledEmptyState} {\n padding: ${theme.base.spacing};\n height: auto;\n }\n\n li:not(:first-child):not([role='presentation']) > ${StyledMenuGroupHeader} {\n margin-block-start: ${theme.base.spacing};\n }\n `\n);\n\nStyledMenuList.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListContainer = styled.fieldset(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n border: 0;\n border-radius: inherit;\n `;\n});\n\nStyledMenuListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlyoutMenuListContainer = styled(StyledMenuListContainer)`\n min-width: 10rem;\n`;\n\nexport const StyledLoadingItem = styled.li`\n display: block;\n position: relative;\n height: 2.8rem;\n`;\n\nexport const StyledMenuListWrapper = styled.div(\n ({ theme }) => css`\n position: relative;\n overflow: hidden;\n transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n & > fieldset:first-child {\n position: relative;\n }\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n ${StyledMetaList} ${StyledMetaListItem} {\n display: inline;\n vertical-align: baseline;\n margin: 0;\n }\n `\n);\n\nStyledMenuListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledMenu = styled.div(({ theme }) => {\n const borderStyle = `0.0625rem solid ${theme.base.palette['border-line']}`;\n\n return css`\n display: flex;\n flex-direction: column;\n\n &,\n ${StyledMenuListWrapper} {\n max-height: inherit;\n }\n\n &:focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n outline: none;\n }\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n &[data-active-scope='true'] [data-current='true'] {\n box-shadow: ${theme.base.shadow['focus-inset']};\n\n @media (forced-colors: active) {\n outline: 0.125rem solid Highlight;\n outline-offset: -0.125rem;\n }\n\n &:first-child {\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n }\n\n &:last-child {\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n }\n }\n\n ${StyledVisuallyHiddenText}:first-child {\n + ${StyledMenuListWrapper}, + header {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n }\n\n > header,\n > footer {\n padding: ${theme.base.spacing};\n }\n\n > header {\n border-bottom: ${borderStyle};\n }\n\n > footer {\n border-top: ${borderStyle};\n }\n `;\n});\n\nStyledMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMenuFilter = styled.div(({ theme }) => {\n const borderRadius = `calc(${theme.components['search-input']['border-radius']} * ${theme.base['border-radius']})`;\n\n return css`\n position: relative;\n min-height: ${theme.components.input.height};\n height: ${theme.components.input.height};\n --icon-start-padding: calc(1.5 * ${theme.components.input.padding});\n /* stylelint-disable-next-line unit-allowed-list /\n --icon-size: max(1.125rem, 14px);\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n min-width: ${theme.base['hit-area']['finger-min']};\n }\n\n ${StyledFormControl} {\n height: 100%;\n border-radius: ${borderRadius};\n padding-inline-start: calc(\n var(--icon-start-padding) + var(--icon-size) + (0.5 ${theme.components.input.padding})\n );\n padding-inline-end: calc(1.5 * ${theme.components.input.padding});\n\n &::-webkit-search-cancel-button {\n display: none;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &:focus-visible:not([disabled]) {\n box-shadow: ${theme.base.shadow['focus-inset']};\n border-color: ${theme.components['form-control']['border-color']};\n\n :hover {\n border-color: ${theme.components['form-control'][':hover']['border-color']};\n }\n }\n }\n `;\n});\n\nStyledMenuFilter.defaultProps = defaultThemeProp;\n\nexport const StyledFilterIcon = styled(Icon)(({ theme }) => {\n const iconColor = tryCatch(() => transparentize(0.3, theme.base.palette['foreground-color']));\n\n return css`\n position: absolute;\n pointer-events: none;\n color: ${iconColor};\n inset-inline-start: var(--icon-start-padding);\n /* stylelint-disable unit-allowed-list /\n inset-block-start: calc(0.5 (${theme.components.input.height} - max(1.125rem, 14px)));\n\n @media (pointer: coarse) {\n inset-block-start: calc(\n 0.5 * (${theme.base['hit-area']['finger-min']} - max(1.125rem, 14px))\n );\n }\n /* stylelint-enable unit-allowed-list */\n `;\n});\n\nStyledFilterIcon.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Menu/MenuItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAehD,OAAO,KAAK,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;;;;~~AA2P7E~~,wBAAyD"}
1	+ {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAehD,OAAO,KAAK,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;;;;AA4P7E,wBAAyD"}

package/lib/components/Menu/MenuItem.js CHANGED Viewed

@@ -66,7 +66,9 @@ const MenuItem = ({ testId, id, primary, secondary, ancestors, visual: visualPro
     useHighlight(primaryRef, accentPattern);
     const secondaryContent = ancestors ? (_jsx(AncestorPath, { ancestors: ancestors })) : (secondary && _jsx(MetaList, { items: secondary, id: secondaryId }));
     const [itemRef, setItemRef] = useElement();
-    const visual = (_jsxs(_Fragment, { children: [selectionMode && (!items || selectableParent) && !disabled && (_jsx(StyledCheckMarkIcon, { name: 'check' })), visualProp] }));
+    const showCheckmark = selectionMode && (!items || selectableParent) && !disabled;
+    const showVisual = showCheckmark || visualProp;
+    const visual = showVisual && (_jsxs(_Fragment, { children: [showCheckmark && _jsx(StyledCheckMarkIcon, { name: 'check' }), visualProp] }));
     const summaryItem = (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { primary: !items ? _jsx(Text, { ref: primaryRef, children: primary }) : primary, secondary: secondaryContent, layout: itemLayout, visual: visual, actions: items || count ? (_jsxs(Flex, { container: { gap: 1, alignItems: 'center', justify: 'center' }, children: [count !== undefined && (_jsx(Count, { id: itemCountId, "aria-label": t('menu_item_count', [count]), children: count })), items && _jsx(DrillDown, { expandHandler: selectableParent ? expandHandler : undefined })] })) : undefined }), tooltip && (_jsx(Tooltip, { target: itemRef, hideDelay: 'none', showDelay: 'short', children: tooltip }))] }));
     const itemLabel = useMemo(() => {
         const collapsedLabel = t('menu_collapsed', [primary]);

package/lib/components/Menu/MenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, useCallback, useContext, useMemo, useRef } from 'react';\nimport type { FunctionComponent, MouseEvent } from 'react';\n\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport type { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport BareButton from '../Button/BareButton';\nimport { withTestIds } from '../../utils';\nimport { useElement, useHighlight, useI18n, useDirection, useTestIds } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\n\nimport menuHelpers from './helpers';\nimport type { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport { StyledAncestors, StyledCheckMarkIcon, StyledMenuItem } from './Menu.styles';\nimport { getMenuItemTestIds } from './Menu.test-ids';\n\nregisterIcon(caretLeftIcon, caretRightIcon, checkIcon);\n\nconst DrillDown = ({\n expandHandler\n}: {\n expandHandler?: (e: MouseEvent<AcceptedMouseEventElement>) => void;\n}) => {\n const { end } = useDirection();\n\n const icon = <Icon name={`caret-${end}`} />;\n\n return expandHandler ? (\n <Button as='span' icon variant='simple' aria-hidden onClick={expandHandler}>\n {icon}\n </Button>\n ) : (\n icon\n );\n};\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n const truncatedPath = ancestors.length > 2;\n const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n const { end } = useDirection();\n\n return (\n <Flex\n container={{ gap: 0.5, alignItems: 'center' }}\n as={StyledAncestors}\n title={ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > ')}\n >\n {pathParts.map((ancestor, i, arr) => {\n const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;\n return (\n <Fragment key={ancestor.id}>\n <Text variant='secondary'>{label}</Text>\n {i < arr.length - 1 && (\n <>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n {truncatedPath && (\n <>\n <Text variant='secondary'>…</Text>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n </>\n )}\n </>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n testId,\n id,\n primary,\n secondary,\n ancestors,\n visual: visualProp,\n count,\n items,\n selected,\n partial,\n href,\n tooltip,\n onClick,\n onExpand,\n disabled,\n role = 'menuitem',\n ...restProps\n}: MenuItemProps & ForwardProps) => {\n const t = useI18n();\n const {\n mode,\n onItemClick,\n itemLayout,\n accent,\n variant: menuVariant,\n setFocusDescendant,\n getScopedItemId,\n arrowNavigationUnsupported\n } = useContext(MenuContext);\n\n const testIds = useTestIds(testId, getMenuItemTestIds);\n\n const selectionMode = mode === 'single-select' \|\| mode === 'multi-select';\n const selectableParent = items && typeof selected === 'boolean';\n const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n\n const itemCountId = `${itemId}-count`;\n const secondaryId = `${itemId}-secondary`;\n\n const clickHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n const mouseClick = e.detail > 0;\n\n if (mouseClick) {\n const target = e.target as HTMLElement;\n const focusAtEl =\n target.getAttribute('role') === role ? target : target.closest(`li[role=\"${role}\"]`);\n\n if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n }\n onClick?.(id, e);\n onItemClick?.(id, e);\n },\n [onClick, onItemClick, id]\n );\n\n const expandHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n onExpand?.(id, e);\n e.stopPropagation();\n },\n [onExpand, id]\n );\n\n const primaryRef = useRef<HTMLElement>(null);\n const accentPattern = useMemo(() => {\n if (!accent \|\| items) return undefined;\n return typeof accent === 'function' ? accent(primary) : accent;\n }, [accent, items, primary]);\n useHighlight(primaryRef, accentPattern);\n\n const secondaryContent = ancestors ? (\n <AncestorPath ancestors={ancestors} />\n ) : (\n secondary && <MetaList items={secondary} id={secondaryId} />\n );\n\n const [itemRef, setItemRef] = useElement();\n\n const visual = (\n <>\n {selectionMode && (!items \|\| selectableParent) && !disabled && (\n <StyledCheckMarkIcon name='check' />\n )}\n {visualProp}\n </>\n );\n const summaryItem = (\n <>\n <SummaryItem\n primary={!items ? <Text ref={primaryRef}>{primary}</Text> : primary}\n secondary={secondaryContent}\n layout={itemLayout}\n visual={visual}\n actions={\n items \|\| count ? (\n <Flex container={{ gap: 1, alignItems: 'center', justify: 'center' }}>\n {count !== undefined && (\n <Count id={itemCountId} aria-label={t('menu_item_count', [count])}>\n {count}\n </Count>\n )}\n {items && <DrillDown expandHandler={selectableParent ? expandHandler : undefined} />}\n </Flex>\n ) : undefined\n }\n />\n {tooltip && (\n <Tooltip target={itemRef} hideDelay='none' showDelay='short'>\n {tooltip}\n </Tooltip>\n )}\n </>\n );\n\n const itemLabel = useMemo(() => {\n const collapsedLabel = t('menu_collapsed', [primary]);\n if (items) {\n return arrowNavigationUnsupported\n ? t('menu_item_shift_space_expand_collapse', [collapsedLabel])\n : t('menu_item_expand_arrow', [collapsedLabel]);\n }\n return primary;\n }, [selected, primary, items]);\n\n const ariaDescribedBy = useMemo(() => {\n const hasSecondary = !!secondary;\n let idString: string;\n\n if (hasSecondary) {\n idString = secondaryId;\n if (count !== undefined && count >= 0) {\n idString = `${idString} ${itemCountId}`;\n }\n } else if (count !== undefined && count >= 0) {\n idString = itemCountId;\n } else idString = '';\n\n return idString;\n }, [items, secondary, itemCountId, secondaryId]);\n\n const isItemSelected = selectionMode && (!items \|\| selectableParent) ? !!selected : undefined;\n\n return (\n <Flex\n ref={setItemRef}\n data-testid={testIds.root}\n {...restProps}\n container={{ alignItems: 'center', justify: 'between', gap: 1 }}\n id={itemId}\n as={StyledMenuItem}\n aria-label={itemLabel}\n aria-describedby={ariaDescribedBy}\n role={role}\n aria-disabled={disabled}\n data-expand={!!items}\n itemLayout={itemLayout}\n tabIndex={-1}\n onMouseDown={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n e.preventDefault();\n }}\n onClick={(e: MouseEvent<AcceptedMouseEventElement>) => {\n if (disabled) {\n return;\n }\n return items && typeof selected !== 'boolean' ? expandHandler(e) : clickHandler(e);\n }}\n onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n href={href}\n mode={mode}\n isParentItem={!!items}\n aria-selected={role !== 'menuitem' ? isItemSelected : undefined}\n isChecked={isItemSelected}\n selectableParent={selectableParent}\n >\n {href && !selectionMode ? (\n <BareButton href={href} tabIndex='-1'>\n {summaryItem}\n </BareButton>\n ) : (\n summaryItem\n )}\n </Flex>\n );\n};\n\nexport default withTestIds(MenuItem, getMenuItemTestIds);\n"]}
1	+ {"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, useCallback, useContext, useMemo, useRef } from 'react';\nimport type { FunctionComponent, MouseEvent } from 'react';\n\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport type { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport BareButton from '../Button/BareButton';\nimport { withTestIds } from '../../utils';\nimport { useElement, useHighlight, useI18n, useDirection, useTestIds } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\n\nimport menuHelpers from './helpers';\nimport type { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport { StyledAncestors, StyledCheckMarkIcon, StyledMenuItem } from './Menu.styles';\nimport { getMenuItemTestIds } from './Menu.test-ids';\n\nregisterIcon(caretLeftIcon, caretRightIcon, checkIcon);\n\nconst DrillDown = ({\n expandHandler\n}: {\n expandHandler?: (e: MouseEvent<AcceptedMouseEventElement>) => void;\n}) => {\n const { end } = useDirection();\n\n const icon = <Icon name={`caret-${end}`} />;\n\n return expandHandler ? (\n <Button as='span' icon variant='simple' aria-hidden onClick={expandHandler}>\n {icon}\n </Button>\n ) : (\n icon\n );\n};\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n const truncatedPath = ancestors.length > 2;\n const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n const { end } = useDirection();\n\n return (\n <Flex\n container={{ gap: 0.5, alignItems: 'center' }}\n as={StyledAncestors}\n title={ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > ')}\n >\n {pathParts.map((ancestor, i, arr) => {\n const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;\n return (\n <Fragment key={ancestor.id}>\n <Text variant='secondary'>{label}</Text>\n {i < arr.length - 1 && (\n <>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n {truncatedPath && (\n <>\n <Text variant='secondary'>…</Text>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n </>\n )}\n </>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n testId,\n id,\n primary,\n secondary,\n ancestors,\n visual: visualProp,\n count,\n items,\n selected,\n partial,\n href,\n tooltip,\n onClick,\n onExpand,\n disabled,\n role = 'menuitem',\n ...restProps\n}: MenuItemProps & ForwardProps) => {\n const t = useI18n();\n const {\n mode,\n onItemClick,\n itemLayout,\n accent,\n variant: menuVariant,\n setFocusDescendant,\n getScopedItemId,\n arrowNavigationUnsupported\n } = useContext(MenuContext);\n\n const testIds = useTestIds(testId, getMenuItemTestIds);\n\n const selectionMode = mode === 'single-select' \|\| mode === 'multi-select';\n const selectableParent = items && typeof selected === 'boolean';\n const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n\n const itemCountId = `${itemId}-count`;\n const secondaryId = `${itemId}-secondary`;\n\n const clickHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n const mouseClick = e.detail > 0;\n\n if (mouseClick) {\n const target = e.target as HTMLElement;\n const focusAtEl =\n target.getAttribute('role') === role ? target : target.closest(`li[role=\"${role}\"]`);\n\n if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n }\n onClick?.(id, e);\n onItemClick?.(id, e);\n },\n [onClick, onItemClick, id]\n );\n\n const expandHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n onExpand?.(id, e);\n e.stopPropagation();\n },\n [onExpand, id]\n );\n\n const primaryRef = useRef<HTMLElement>(null);\n const accentPattern = useMemo(() => {\n if (!accent \|\| items) return undefined;\n return typeof accent === 'function' ? accent(primary) : accent;\n }, [accent, items, primary]);\n useHighlight(primaryRef, accentPattern);\n\n const secondaryContent = ancestors ? (\n <AncestorPath ancestors={ancestors} />\n ) : (\n secondary && <MetaList items={secondary} id={secondaryId} />\n );\n\n const [itemRef, setItemRef] = useElement();\n\n const showCheckmark = selectionMode && (!items \|\| selectableParent) && !disabled;\n const showVisual = showCheckmark \|\| visualProp;\n\n const visual = showVisual && (\n <>\n {showCheckmark && <StyledCheckMarkIcon name='check' />}\n {visualProp}\n </>\n );\n const summaryItem = (\n <>\n <SummaryItem\n primary={!items ? <Text ref={primaryRef}>{primary}</Text> : primary}\n secondary={secondaryContent}\n layout={itemLayout}\n visual={visual}\n actions={\n items \|\| count ? (\n <Flex container={{ gap: 1, alignItems: 'center', justify: 'center' }}>\n {count !== undefined && (\n <Count id={itemCountId} aria-label={t('menu_item_count', [count])}>\n {count}\n </Count>\n )}\n {items && <DrillDown expandHandler={selectableParent ? expandHandler : undefined} />}\n </Flex>\n ) : undefined\n }\n />\n {tooltip && (\n <Tooltip target={itemRef} hideDelay='none' showDelay='short'>\n {tooltip}\n </Tooltip>\n )}\n </>\n );\n\n const itemLabel = useMemo(() => {\n const collapsedLabel = t('menu_collapsed', [primary]);\n if (items) {\n return arrowNavigationUnsupported\n ? t('menu_item_shift_space_expand_collapse', [collapsedLabel])\n : t('menu_item_expand_arrow', [collapsedLabel]);\n }\n return primary;\n }, [selected, primary, items]);\n\n const ariaDescribedBy = useMemo(() => {\n const hasSecondary = !!secondary;\n let idString: string;\n\n if (hasSecondary) {\n idString = secondaryId;\n if (count !== undefined && count >= 0) {\n idString = `${idString} ${itemCountId}`;\n }\n } else if (count !== undefined && count >= 0) {\n idString = itemCountId;\n } else idString = '';\n\n return idString;\n }, [items, secondary, itemCountId, secondaryId]);\n\n const isItemSelected = selectionMode && (!items \|\| selectableParent) ? !!selected : undefined;\n\n return (\n <Flex\n ref={setItemRef}\n data-testid={testIds.root}\n {...restProps}\n container={{ alignItems: 'center', justify: 'between', gap: 1 }}\n id={itemId}\n as={StyledMenuItem}\n aria-label={itemLabel}\n aria-describedby={ariaDescribedBy}\n role={role}\n aria-disabled={disabled}\n data-expand={!!items}\n itemLayout={itemLayout}\n tabIndex={-1}\n onMouseDown={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n e.preventDefault();\n }}\n onClick={(e: MouseEvent<AcceptedMouseEventElement>) => {\n if (disabled) {\n return;\n }\n return items && typeof selected !== 'boolean' ? expandHandler(e) : clickHandler(e);\n }}\n onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n href={href}\n mode={mode}\n isParentItem={!!items}\n aria-selected={role !== 'menuitem' ? isItemSelected : undefined}\n isChecked={isItemSelected}\n selectableParent={selectableParent}\n >\n {href && !selectionMode ? (\n <BareButton href={href} tabIndex='-1'>\n {summaryItem}\n </BareButton>\n ) : (\n summaryItem\n )}\n </Flex>\n );\n};\n\nexport default withTestIds(MenuItem, getMenuItemTestIds);\n"]}

package/lib/components/MultiStepForm/FormProgress.styles.d.ts CHANGED Viewed

@@ -3,11 +3,17 @@ import type { Step } from './MultiStepForm.types';
 export declare const stepItemMinWidth = 15;
 /** Min width of step marker without labels in ch units */
 export declare const stepMarkerMinWidth = 3;
+/** Min width of each bar segment in bars mode in ch units */
+export declare const stepBarMinWidth = 3;
+/** Min height of each vertical bar segment in bars mode */
+export declare const stepVerticalBarMinHeight = "2.5rem";
 export declare const CurrentStepPopover: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Popover").PopoverProps<string> & import("../..").ForwardProps, never>> & string & Omit<(<Modifiers extends string = string>(props: import("../Popover").PopoverProps<Modifiers> & import("../..").ForwardProps) => import("react").ReactElement | null), keyof import("react").Component<any, {}, any>>;
 export declare const StyledBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     shifted?: boolean;
 }>> & string;
-export declare const StyledFill: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledFill: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    fillScale: number;
+}>> & string;
 export declare const StyledFormProgress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../..").BaseProps & import("../..").AsProp & {
     children?: import("react").ReactNode;
     ref?: import("react").Ref<Element>;
@@ -211,4 +217,22 @@ export declare const StyledBulletWrapper: import("styled-components/dist/types")
 }>> & string;
 export declare const StyledStepText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledHorizontalStepText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyleHorizontalBarList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, {
+    showStepNames?: boolean;
+}>> & string;
+export declare const StyledHorizontalBarSegment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Button/BareButton").BareButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, {
+    current: boolean;
+    completed?: boolean;
+    clickable?: boolean;
+}>> & string & Omit<import("../..").ForwardRefForwardPropsComponent<import("../Button/BareButton").BareButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledVerticalBarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledVerticalBarSegment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Button/BareButton").BareButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, {
+    current: boolean;
+    completed?: boolean;
+    clickable?: boolean;
+}>> & string & Omit<import("../..").ForwardRefForwardPropsComponent<import("../Button/BareButton").BareButtonProps>, keyof import("react").Component<any, {}, any>>;
 //# sourceMappingURL=FormProgress.styles.d.ts.map

package/lib/components/MultiStepForm/FormProgress.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormProgress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"~~AAYA~~,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,0DAA0D;AAC1D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,eAAO,MAAM,kBAAkB,4ZAU9B,CAAC;AAyBF,eAAO,MAAM,SAAS;cAA0B,OAAO;YAsBrD,CAAC;AAIH,eAAO,MAAM,UAAU,~~6NA~~+~~BrB~~,CAAC;AAIH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAAkC,OAAO;gJAmBtE,CAAC;AAIH,eAAO,MAAM,UAAU;;;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;gBACR,IAAI,CAAC,WAAW,CAAC;gBACjB,OAAO;mKAmHnB,CAAC;AAIH,eAAO,MAAM,0BAA0B;oBAA+B,OAAO;YAsD5E,CAAC;AAIF,eAAO,MAAM,yBAAyB,mOAErC,CAAC;AAEF,eAAO,MAAM,mBAAmB;aACrB,OAAO;WACT,OAAO;YA2Cd,CAAC;AAIH,eAAO,MAAM,cAAc,6NAKzB,CAAC;AAIH,eAAO,MAAM,wBAAwB,6NAUnC,CAAC"}
1	+ {"version":3,"file":"FormProgress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,0DAA0D;AAC1D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,6DAA6D;AAC7D,eAAO,MAAM,eAAe,IAAI,CAAC;AAEjC,2DAA2D;AAC3D,eAAO,MAAM,wBAAwB,WAAW,CAAC;AAEjD,eAAO,MAAM,kBAAkB,4ZAU9B,CAAC;AAyBF,eAAO,MAAM,SAAS;cAA0B,OAAO;YAsBrD,CAAC;AAIH,eAAO,MAAM,UAAU;eAA2B,MAAM;YA+BtD,CAAC;AAIH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAAkC,OAAO;gJAmBtE,CAAC;AAIH,eAAO,MAAM,UAAU;;;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;gBACR,IAAI,CAAC,WAAW,CAAC;gBACjB,OAAO;mKAmHnB,CAAC;AAIH,eAAO,MAAM,0BAA0B;oBAA+B,OAAO;YAsD5E,CAAC;AAIF,eAAO,MAAM,yBAAyB,mOAErC,CAAC;AAEF,eAAO,MAAM,mBAAmB;aACrB,OAAO;WACT,OAAO;YA2Cd,CAAC;AAIH,eAAO,MAAM,cAAc,6NAKzB,CAAC;AAIH,eAAO,MAAM,wBAAwB,6NAUnC,CAAC;AAIH,eAAO,MAAM,sBAAsB;oBAA+B,OAAO;YA4BxE,CAAC;AAIF,eAAO,MAAM,0BAA0B;;;aAC5B,OAAO;gBACJ,OAAO;gBACP,OAAO;mKAiFnB,CAAC;AAIH,eAAO,MAAM,wBAAwB,6NAKnC,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;aAC1B,OAAO;gBACJ,OAAO;gBACP,OAAO;mKA6EnB,CAAC"}

package/lib/components/MultiStepForm/FormProgress.styles.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
-import { size } from 'polished';
+import { lighten, size } from 'polished';
 import { defaultThemeProp } from '../../theme';
+import { tryCatch } from '../../utils';
 import BareButton from '../Button/BareButton';
 import Popover from '../Popover';
 import { StyledText } from '../Text';
@@ -12,6 +13,10 @@ import { ellipsisOverflow } from '../../styles/mixins';
 export const stepItemMinWidth = 15;
 /** Min width of step marker without labels in ch units */
 export const stepMarkerMinWidth = 3;
+/** Min width of each bar segment in bars mode in ch units */
+export const stepBarMinWidth = 3;
+/** Min height of each vertical bar segment in bars mode */
+export const stepVerticalBarMinHeight = '2.5rem';
 export const CurrentStepPopover = styled(Popover) `
   max-width: 100%;
   background-color: transparent;
@@ -57,7 +62,7 @@ export const StyledBar = styled.div(({ shifted, theme }) => {
   `;
 });
 StyledBar.defaultProps = defaultThemeProp;
-export const StyledFill = styled.div(({ theme }) => {
+export const StyledFill = styled.div(({ fillScale, theme }) => {
     const { base: { animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive } } } = theme;
     const { ltr } = useDirection();
     const markedLineThicknessFactor = 2;
@@ -70,7 +75,7 @@ export const StyledFill = styled.div(({ theme }) => {
     top: calc(-50% * (${markedLineThicknessFactor} - 1));
     background: ${interactive};
     transition: all calc(2 * ${animationSpeed}) ${animationTiming};
-    transform: scaleX(var(--fillScale));
+    transform: scaleX(${fillScale});
     transform-origin: ${ltr ? 0 : '100%'} 0;
     @media (forced-colors: active) {
@@ -213,7 +218,7 @@ export const StyleHorizontalStepMarkers = styled.ol(({ showStepNames, theme }) =
       li:first-child {
         align-items: flex-start;
-        text-align: left;
+        text-align: start;
         margin-inline-start: 0;
         padding-inline-start: 0;
@@ -224,7 +229,7 @@ export const StyleHorizontalStepMarkers = styled.ol(({ showStepNames, theme }) =
       li:last-child {
         align-items: flex-end;
-        text-align: right;
+        text-align: end;
         margin-inline-end: 0;
         padding-inline-end: 0;
@@ -291,4 +296,162 @@ export const StyledHorizontalStepText = styled.div(({ theme }) => {
   `;
 });
 StyledHorizontalStepText.defaultProps = defaultThemeProp;
+export const StyleHorizontalBarList = styled.ol(({ showStepNames, theme }) => {
+    return css `
+      list-style-type: none;
+      li {
+        display: flex;
+        position: relative;
+        flex: 1 1 0;
+        min-width: ${`${showStepNames ? stepItemMinWidth : stepBarMinWidth}ch`};
+        flex-direction: column;
+        align-items: stretch;
+        text-align: center;
+      }
+      li:first-child {
+        text-align: start;
+      }
+      li:last-child {
+        text-align: end;
+      }
+      &:has(:focus-visible) {
+        box-shadow: ${theme.base.shadow['focus-group']};
+      }
+    `;
+});
+StyleHorizontalBarList.defaultProps = defaultThemeProp;
+export const StyledHorizontalBarSegment = styled(BareButton)(({ current, completed, clickable, theme }) => {
+    const { base: { spacing, animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive, 'primary-background': primaryBackground }, shadow: { focus: focusShadow }, 'hit-area': { 'finger-min': touchButtonSize } }, components: { 'form-control': { 'border-color': borderColor, 'border-width': borderWidth }, 'multi-step-form': { 'bar-indicator-border-radius': barIndicatorBorderRadius } } } = theme;
+    const maxBarHeight = `calc(${spacing} * 1.5)`;
+    const barHeight = current ? maxBarHeight : spacing;
+    const hoverBackground = tryCatch(() => lighten(0.1, interactive), () => interactive);
+    return css `
+    position: relative;
+    display: block;
+    width: 100%;
+    height: ${barHeight};
+    margin-block: calc((${maxBarHeight} - ${barHeight}) / 2);
+    border: ${borderWidth} solid transparent;
+    border-radius: ${barIndicatorBorderRadius};
+    background: ${current || completed ? interactive : primaryBackground};
+    transition:
+      background calc(2 * ${animationSpeed}) ${animationTiming},
+      border-color calc(2 * ${animationSpeed}) ${animationTiming};
+    ${!current &&
+        css `
+      border-color: ${clickable ? interactive : borderColor};
+      @media (forced-colors: active) {
+        border-color: Highlight;
+      }
+    `}
+    ${clickable &&
+        css `
+      cursor: pointer;
+      ${!current &&
+            css `
+        &:hover {
+          background: ${hoverBackground};
+        }
+      `}
+    `}
+    &:focus-visible {
+      box-shadow: ${focusShadow};
+      @media (forced-colors: active) {
+        outline: 0.125rem solid Highlight;
+        outline-offset: 0.125rem;
+      }
+    }
+    @media (forced-colors: active) {
+      background: ${current || completed ? 'Highlight' : 'CanvasText'};
+    }
+    /* Touch hit-area expansion without affecting layout */
+    &::after {
+      content: '';
+      position: absolute;
+      inset-block: calc((${touchButtonSize} - ${barHeight}) / -2);
+      inset-inline: 0;
+    }
+  `;
+});
+StyledHorizontalBarSegment.defaultProps = defaultThemeProp;
+export const StyledVerticalBarWrapper = styled.div(({ theme }) => {
+    return css `
+    min-width: 2rem;
+    padding-block: calc(${theme.base.spacing} / 2);
+  `;
+});
+StyledVerticalBarWrapper.defaultProps = defaultThemeProp;
+export const StyledVerticalBarSegment = styled(BareButton)(({ current, completed, clickable, theme }) => {
+    const { base: { spacing, animation: { speed: animationSpeed }, palette: { interactive, 'primary-background': primaryBackground }, shadow: { focus: focusShadow }, 'hit-area': { 'finger-min': touchButtonSize } }, components: { 'form-control': { 'border-color': borderColor, 'border-width': borderWidth }, 'multi-step-form': { 'bar-indicator-border-radius': barIndicatorBorderRadius } } } = theme;
+    const barWidth = current ? `calc(${spacing} * 1.5)` : spacing;
+    const hoverBackground = tryCatch(() => lighten(0.1, interactive), () => interactive);
+    return css `
+    position: relative;
+    display: block;
+    width: ${barWidth};
+    min-height: ${stepVerticalBarMinHeight};
+    flex: 1 1 0;
+    border: ${borderWidth} solid transparent;
+    border-radius: ${barIndicatorBorderRadius};
+    background: ${current || completed ? interactive : primaryBackground};
+    transition:
+      background calc(2 * ${animationSpeed}),
+      border-color calc(2 * ${animationSpeed});
+    ${!current &&
+        css `
+      border-color: ${clickable ? interactive : borderColor};
+      @media (forced-colors: active) {
+        border-color: Highlight;
+      }
+    `}
+    ${clickable &&
+        css `
+      cursor: pointer;
+      ${!current &&
+            css `
+        &:hover {
+          background: ${hoverBackground};
+        }
+      `}
+    `}
+    &:focus-visible {
+      box-shadow: ${focusShadow};
+      @media (forced-colors: active) {
+        outline: 0.125rem solid Highlight;
+        outline-offset: 0.125rem;
+      }
+    }
+    @media (forced-colors: active) {
+      background: ${current || completed ? 'Highlight' : 'CanvasText'};
+    }
+    /* Touch hit-area expansion without affecting layout */
+    &::after {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      inset-inline: calc((${touchButtonSize} - ${barWidth}) / -2);
+    }
+  `;
+});
+StyledVerticalBarSegment.defaultProps = defaultThemeProp;
 //# sourceMappingURL=FormProgress.styles.js.map

package/lib/components/MultiStepForm/FormProgress.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormProgress.styles.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { size } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport { StyledText } from '../Text';\nimport { calculateFontSize, type FontSize } from '../../styles';\nimport { useDirection } from '../../hooks';\nimport Flex from '../Flex';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nimport type { Step } from './MultiStepForm.types';\n\n/** Min width of each step item including labels in ch units /\nexport const stepItemMinWidth = 15;\n\n/* Min width of step marker without labels in ch units /\nexport const stepMarkerMinWidth = 3;\n\nexport const CurrentStepPopover = styled(Popover)`\n max-width: 100%;\n background-color: transparent;\n z-index: 0;\n box-shadow: none;\n animation: none;\n\n & > ${StyledText} {\n ${ellipsisOverflow}\n }\n`;\n\nconst calculateStepMarkerSizes = (fontSize: string, fontScale: string \| number) => {\n const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);\n return {\n stepMarkerSize,\n smallStepMarkerSize: `calc(${stepMarkerSize} / 1.5)`,\n bigStepMarkerSize: `calc(${stepMarkerSize} 1.5)`\n };\n};\n\nconst calculateBarTopPadding = (\n fontSize: string,\n fontScale: string \| number,\n lineHeight: string\n) => {\n const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);\n return {\n // assuming the step progress always contains current step marker which is the biggest one,\n // the top padding of the bar should be half of the big step marker size minus line height of the bar\n // to be vertically centered\n stepBarTopPadding: `calc((${bigStepMarkerSize} / 2) - (${lineHeight} / 2))`\n };\n};\n\nexport const StyledBar = styled.div<{ shifted?: boolean }>(({ shifted, theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: {\n 'form-control': { 'border-color': borderColor }\n }\n } = theme;\n\n const lineHeight = '0.125rem';\n const { stepBarTopPadding } = calculateBarTopPadding(fontSize, fontScale, lineHeight);\n\n return css`\n position: absolute;\n ${shifted && `inset-block-start: ${stepBarTopPadding};`}\n width: 100%;\n height: ${lineHeight};\n background: ${borderColor};\n\n @media (forced-colors: active) {\n background: CanvasText;\n }\n `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledFill = styled.div(({ theme }) => {\n const {\n base: {\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n palette: { interactive }\n }\n } = theme;\n\n const { ltr } = useDirection();\n\n const markedLineThicknessFactor = 2;\n\n return css`\n position: absolute;\n width: 100%;\n height: calc(100% * ${markedLineThicknessFactor});\n\n /* top position based on line thickness factor to keep the fill centered /\n top: calc(-50% (${markedLineThicknessFactor} - 1));\n background: ${interactive};\n transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n transform: scaleX(var(--fillScale));\n transform-origin: ${ltr ? 0 : '100%'} 0;\n\n @media (forced-colors: active) {\n background: Highlight;\n }\n `;\n});\n\nStyledFill.defaultProps = defaultThemeProp;\n\nexport const StyledFormProgress = styled(Flex)<{ showStepNames?: boolean }>(({\n showStepNames,\n theme\n}) => {\n const {\n base: { spacing, 'font-size': fontSize, 'font-scale': fontScale },\n components: {\n text: {\n h4: { 'font-size': h3fontSize }\n }\n }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: relative;\n ${!showStepNames &&\n `padding-block-end: calc(${spacing} + ${fontSizes[h3fontSize as FontSize]} * 1.35);`}\n `;\n});\n\nStyledFormProgress.defaultProps = defaultThemeProp;\n\nexport const StepMarker = styled(BareButton)<{\n current: boolean;\n depth: Step['depth'];\n completed?: Step['completed'];\n clickable?: boolean;\n}>(({ current, depth, completed, clickable, theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n palette: { interactive, 'primary-background': primaryBackground },\n shadow: { focus: focusShadow },\n 'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize }\n },\n components: {\n 'form-control': { 'border-color': borderColor, 'border-width': borderWidth }\n }\n } = theme;\n\n const { stepMarkerSize, smallStepMarkerSize, bigStepMarkerSize } = calculateStepMarkerSizes(\n fontSize,\n fontScale\n );\n\n // Determine the actual size for this marker based on its state\n let markerSize = stepMarkerSize;\n if (current) {\n markerSize = bigStepMarkerSize;\n } else if (depth === 1) {\n markerSize = smallStepMarkerSize;\n }\n\n return css`\n position: relative;\n z-index: 1;\n\n /* Fixed container size based on the biggest marker to prevent layout shifts /\n ${size(bigStepMarkerSize)}\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n\n ${clickable\n ? css`\n border-color: ${interactive};\n `\n : css`\n cursor: default;\n `}\n\n &::before {\n content: '';\n ${size(markerSize)}\n position: absolute;\n border-radius: 100%;\n transition: all calc(2 ${animationSpeed}) ${animationTiming};\n }\n\n &:focus-visible::before {\n box-shadow: ${focusShadow};\n\n @media (forced-colors: active) {\n outline: 0.125rem solid Highlight;\n outline-offset: 0.125rem;\n }\n }\n\n ${!current &&\n css`\n border-color: transparent;\n background: transparent;\n\n &::before {\n background: ${primaryBackground};\n border: calc(2 * ${borderWidth}) solid ${clickable ? interactive : borderColor};\n\n ${completed &&\n css`\n background: ${interactive};\n border-color: ${interactive};\n `}\n\n @media (forced-colors: active) {\n background: ${completed ? 'Highlight' : 'Canvas'};\n border-color: ${clickable ? 'Highlight' : 'CanvasText'};\n }\n }\n `}\n\n ${current &&\n css`\n &::before {\n background: ${interactive};\n\n @media (forced-colors: active) {\n background: Highlight;\n }\n }\n `}\n\n ::after {\n content: '';\n position: absolute;\n ${size(buttonSize)}\n inset-block-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};\n inset-inline-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};\n\n @media (pointer: coarse) {\n inset-block-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};\n inset-inline-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};\n ${size(touchButtonSize)}\n }\n }\n `;\n});\n\nStepMarker.defaultProps = defaultThemeProp;\n\nexport const StyleHorizontalStepMarkers = styled.ol<{ showStepNames?: boolean }>(\n ({ showStepNames, theme }) => {\n return css`\n list-style-type: none;\n justify-content: space-between;\n\n li {\n display: flex;\n position: relative;\n flex: 1 1 0;\n\n /* min width changes based on whether step names are shown /\n min-width: ${`${showStepNames ? stepItemMinWidth : stepMarkerMinWidth}ch`};\n font-size: small;\n margin-inline: ${theme.base.spacing};\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n li:first-child,\n li:last-child {\n flex: 0.5 1 0;\n / stylelint-disable-next-line unit-allowed-list /\n min-width: ${`${showStepNames ? stepItemMinWidth / 2 : stepMarkerMinWidth / 2}ch`};\n }\n\n li:first-child {\n align-items: flex-start;\n text-align: left;\n margin-inline-start: 0;\n padding-inline-start: 0;\n\n ${StepMarker}::before {\n inset-inline-start: 0;\n }\n }\n\n li:last-child {\n align-items: flex-end;\n text-align: right;\n margin-inline-end: 0;\n padding-inline-end: 0;\n\n ${StepMarker}::before {\n inset-inline-end: 0;\n }\n }\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n }\n);\n\nStyleHorizontalStepMarkers.defaultProps = defaultThemeProp;\n\nexport const StyledVerticalStepMarkers = styled.ol`\n list-style-type: none;\n`;\n\nexport const StyledBulletWrapper = styled.div<{\n hasNext: boolean;\n prior: boolean;\n}>(({ theme, hasNext, prior }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n animation: { speed: animationSpeed },\n palette: { interactive }\n },\n components: {\n 'form-control': { 'border-color': borderColor }\n }\n } = theme;\n\n const baseLineWidth = '0.125rem';\n const lineWidth = prior ? `calc(2 ${baseLineWidth})` : baseLineWidth;\n\n const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);\n\n return css`\n position: relative;\n min-width: 2rem;\n\n ${hasNext &&\n css`\n &::after {\n content: '';\n position: absolute;\n\n /* Center the line horizontally and vertically relative to the step marker /\n inset-block-start: calc(${bigStepMarkerSize});\n inset-inline-start: calc(50% - (${lineWidth} / 2));\n width: ${lineWidth};\n height: 100%;\n background: ${prior ? interactive : borderColor};\n transition: background calc(2 ${animationSpeed});\n\n @media (forced-colors: active) {\n background: ${prior ? 'Highlight' : 'CanvasText'};\n }\n }\n `}\n `;\n});\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStepText = styled.div(({ theme }) => {\n return css`\n padding-block: ${theme.base.spacing};\n overflow-wrap: break-word;\n `;\n});\n\nStyledStepText.defaultProps = defaultThemeProp;\n\nexport const StyledHorizontalStepText = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n padding-block: ${theme.base.spacing};\n overflow-wrap: break-word;\n min-width: inherit;\n font-size: ${fontSize.xxs};\n text-align: inherit;\n `;\n});\n\nStyledHorizontalStepText.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"FormProgress.styles.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, size } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport { StyledText } from '../Text';\nimport { calculateFontSize, type FontSize } from '../../styles';\nimport { useDirection } from '../../hooks';\nimport Flex from '../Flex';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nimport type { Step } from './MultiStepForm.types';\n\n/** Min width of each step item including labels in ch units /\nexport const stepItemMinWidth = 15;\n\n/* Min width of step marker without labels in ch units /\nexport const stepMarkerMinWidth = 3;\n\n/* Min width of each bar segment in bars mode in ch units /\nexport const stepBarMinWidth = 3;\n\n/* Min height of each vertical bar segment in bars mode /\nexport const stepVerticalBarMinHeight = '2.5rem';\n\nexport const CurrentStepPopover = styled(Popover)`\n max-width: 100%;\n background-color: transparent;\n z-index: 0;\n box-shadow: none;\n animation: none;\n\n & > ${StyledText} {\n ${ellipsisOverflow}\n }\n`;\n\nconst calculateStepMarkerSizes = (fontSize: string, fontScale: string \| number) => {\n const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);\n return {\n stepMarkerSize,\n smallStepMarkerSize: `calc(${stepMarkerSize} / 1.5)`,\n bigStepMarkerSize: `calc(${stepMarkerSize} 1.5)`\n };\n};\n\nconst calculateBarTopPadding = (\n fontSize: string,\n fontScale: string \| number,\n lineHeight: string\n) => {\n const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);\n return {\n // assuming the step progress always contains current step marker which is the biggest one,\n // the top padding of the bar should be half of the big step marker size minus line height of the bar\n // to be vertically centered\n stepBarTopPadding: `calc((${bigStepMarkerSize} / 2) - (${lineHeight} / 2))`\n };\n};\n\nexport const StyledBar = styled.div<{ shifted?: boolean }>(({ shifted, theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: {\n 'form-control': { 'border-color': borderColor }\n }\n } = theme;\n\n const lineHeight = '0.125rem';\n const { stepBarTopPadding } = calculateBarTopPadding(fontSize, fontScale, lineHeight);\n\n return css`\n position: absolute;\n ${shifted && `inset-block-start: ${stepBarTopPadding};`}\n width: 100%;\n height: ${lineHeight};\n background: ${borderColor};\n\n @media (forced-colors: active) {\n background: CanvasText;\n }\n `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledFill = styled.div<{ fillScale: number }>(({ fillScale, theme }) => {\n const {\n base: {\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n palette: { interactive }\n }\n } = theme;\n\n const { ltr } = useDirection();\n\n const markedLineThicknessFactor = 2;\n\n return css`\n position: absolute;\n width: 100%;\n height: calc(100% * ${markedLineThicknessFactor});\n\n /* top position based on line thickness factor to keep the fill centered /\n top: calc(-50% (${markedLineThicknessFactor} - 1));\n background: ${interactive};\n transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n transform: scaleX(${fillScale});\n transform-origin: ${ltr ? 0 : '100%'} 0;\n\n @media (forced-colors: active) {\n background: Highlight;\n }\n `;\n});\n\nStyledFill.defaultProps = defaultThemeProp;\n\nexport const StyledFormProgress = styled(Flex)<{ showStepNames?: boolean }>(({\n showStepNames,\n theme\n}) => {\n const {\n base: { spacing, 'font-size': fontSize, 'font-scale': fontScale },\n components: {\n text: {\n h4: { 'font-size': h3fontSize }\n }\n }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: relative;\n ${!showStepNames &&\n `padding-block-end: calc(${spacing} + ${fontSizes[h3fontSize as FontSize]} * 1.35);`}\n `;\n});\n\nStyledFormProgress.defaultProps = defaultThemeProp;\n\nexport const StepMarker = styled(BareButton)<{\n current: boolean;\n depth: Step['depth'];\n completed?: Step['completed'];\n clickable?: boolean;\n}>(({ current, depth, completed, clickable, theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n palette: { interactive, 'primary-background': primaryBackground },\n shadow: { focus: focusShadow },\n 'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize }\n },\n components: {\n 'form-control': { 'border-color': borderColor, 'border-width': borderWidth }\n }\n } = theme;\n\n const { stepMarkerSize, smallStepMarkerSize, bigStepMarkerSize } = calculateStepMarkerSizes(\n fontSize,\n fontScale\n );\n\n // Determine the actual size for this marker based on its state\n let markerSize = stepMarkerSize;\n if (current) {\n markerSize = bigStepMarkerSize;\n } else if (depth === 1) {\n markerSize = smallStepMarkerSize;\n }\n\n return css`\n position: relative;\n z-index: 1;\n\n /* Fixed container size based on the biggest marker to prevent layout shifts /\n ${size(bigStepMarkerSize)}\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n\n ${clickable\n ? css`\n border-color: ${interactive};\n `\n : css`\n cursor: default;\n `}\n\n &::before {\n content: '';\n ${size(markerSize)}\n position: absolute;\n border-radius: 100%;\n transition: all calc(2 ${animationSpeed}) ${animationTiming};\n }\n\n &:focus-visible::before {\n box-shadow: ${focusShadow};\n\n @media (forced-colors: active) {\n outline: 0.125rem solid Highlight;\n outline-offset: 0.125rem;\n }\n }\n\n ${!current &&\n css`\n border-color: transparent;\n background: transparent;\n\n &::before {\n background: ${primaryBackground};\n border: calc(2 * ${borderWidth}) solid ${clickable ? interactive : borderColor};\n\n ${completed &&\n css`\n background: ${interactive};\n border-color: ${interactive};\n `}\n\n @media (forced-colors: active) {\n background: ${completed ? 'Highlight' : 'Canvas'};\n border-color: ${clickable ? 'Highlight' : 'CanvasText'};\n }\n }\n `}\n\n ${current &&\n css`\n &::before {\n background: ${interactive};\n\n @media (forced-colors: active) {\n background: Highlight;\n }\n }\n `}\n\n ::after {\n content: '';\n position: absolute;\n ${size(buttonSize)}\n inset-block-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};\n inset-inline-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};\n\n @media (pointer: coarse) {\n inset-block-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};\n inset-inline-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};\n ${size(touchButtonSize)}\n }\n }\n `;\n});\n\nStepMarker.defaultProps = defaultThemeProp;\n\nexport const StyleHorizontalStepMarkers = styled.ol<{ showStepNames?: boolean }>(\n ({ showStepNames, theme }) => {\n return css`\n list-style-type: none;\n justify-content: space-between;\n\n li {\n display: flex;\n position: relative;\n flex: 1 1 0;\n\n /* min width changes based on whether step names are shown /\n min-width: ${`${showStepNames ? stepItemMinWidth : stepMarkerMinWidth}ch`};\n font-size: small;\n margin-inline: ${theme.base.spacing};\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n li:first-child,\n li:last-child {\n flex: 0.5 1 0;\n / stylelint-disable-next-line unit-allowed-list /\n min-width: ${`${showStepNames ? stepItemMinWidth / 2 : stepMarkerMinWidth / 2}ch`};\n }\n\n li:first-child {\n align-items: flex-start;\n text-align: start;\n margin-inline-start: 0;\n padding-inline-start: 0;\n\n ${StepMarker}::before {\n inset-inline-start: 0;\n }\n }\n\n li:last-child {\n align-items: flex-end;\n text-align: end;\n margin-inline-end: 0;\n padding-inline-end: 0;\n\n ${StepMarker}::before {\n inset-inline-end: 0;\n }\n }\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n }\n);\n\nStyleHorizontalStepMarkers.defaultProps = defaultThemeProp;\n\nexport const StyledVerticalStepMarkers = styled.ol`\n list-style-type: none;\n`;\n\nexport const StyledBulletWrapper = styled.div<{\n hasNext: boolean;\n prior: boolean;\n}>(({ theme, hasNext, prior }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n animation: { speed: animationSpeed },\n palette: { interactive }\n },\n components: {\n 'form-control': { 'border-color': borderColor }\n }\n } = theme;\n\n const baseLineWidth = '0.125rem';\n const lineWidth = prior ? `calc(2 ${baseLineWidth})` : baseLineWidth;\n\n const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);\n\n return css`\n position: relative;\n min-width: 2rem;\n\n ${hasNext &&\n css`\n &::after {\n content: '';\n position: absolute;\n\n /* Center the line horizontally and vertically relative to the step marker /\n inset-block-start: calc(${bigStepMarkerSize});\n inset-inline-start: calc(50% - (${lineWidth} / 2));\n width: ${lineWidth};\n height: 100%;\n background: ${prior ? interactive : borderColor};\n transition: background calc(2 ${animationSpeed});\n\n @media (forced-colors: active) {\n background: ${prior ? 'Highlight' : 'CanvasText'};\n }\n }\n `}\n `;\n});\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStepText = styled.div(({ theme }) => {\n return css`\n padding-block: ${theme.base.spacing};\n overflow-wrap: break-word;\n `;\n});\n\nStyledStepText.defaultProps = defaultThemeProp;\n\nexport const StyledHorizontalStepText = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n padding-block: ${theme.base.spacing};\n overflow-wrap: break-word;\n min-width: inherit;\n font-size: ${fontSize.xxs};\n text-align: inherit;\n `;\n});\n\nStyledHorizontalStepText.defaultProps = defaultThemeProp;\n\nexport const StyleHorizontalBarList = styled.ol<{ showStepNames?: boolean }>(\n ({ showStepNames, theme }) => {\n return css`\n list-style-type: none;\n\n li {\n display: flex;\n position: relative;\n flex: 1 1 0;\n min-width: ${`${showStepNames ? stepItemMinWidth : stepBarMinWidth}ch`};\n flex-direction: column;\n align-items: stretch;\n text-align: center;\n }\n\n li:first-child {\n text-align: start;\n }\n\n li:last-child {\n text-align: end;\n }\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n }\n);\n\nStyleHorizontalBarList.defaultProps = defaultThemeProp;\n\nexport const StyledHorizontalBarSegment = styled(BareButton)<{\n current: boolean;\n completed?: boolean;\n clickable?: boolean;\n}>(({ current, completed, clickable, theme }) => {\n const {\n base: {\n spacing,\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n palette: { interactive, 'primary-background': primaryBackground },\n shadow: { focus: focusShadow },\n 'hit-area': { 'finger-min': touchButtonSize }\n },\n components: {\n 'form-control': { 'border-color': borderColor, 'border-width': borderWidth },\n 'multi-step-form': { 'bar-indicator-border-radius': barIndicatorBorderRadius }\n }\n } = theme;\n\n const maxBarHeight = `calc(${spacing} * 1.5)`;\n const barHeight = current ? maxBarHeight : spacing;\n const hoverBackground = tryCatch(\n () => lighten(0.1, interactive),\n () => interactive\n );\n\n return css`\n position: relative;\n display: block;\n width: 100%;\n height: ${barHeight};\n margin-block: calc((${maxBarHeight} - ${barHeight}) / 2);\n border: ${borderWidth} solid transparent;\n border-radius: ${barIndicatorBorderRadius};\n background: ${current \|\| completed ? interactive : primaryBackground};\n transition:\n background calc(2 * ${animationSpeed}) ${animationTiming},\n border-color calc(2 * ${animationSpeed}) ${animationTiming};\n\n ${!current &&\n css`\n border-color: ${clickable ? interactive : borderColor};\n\n @media (forced-colors: active) {\n border-color: Highlight;\n }\n `}\n\n ${clickable &&\n css`\n cursor: pointer;\n\n ${!current &&\n css`\n &:hover {\n background: ${hoverBackground};\n }\n `}\n `}\n\n &:focus-visible {\n box-shadow: ${focusShadow};\n\n @media (forced-colors: active) {\n outline: 0.125rem solid Highlight;\n outline-offset: 0.125rem;\n }\n }\n\n @media (forced-colors: active) {\n background: ${current \|\| completed ? 'Highlight' : 'CanvasText'};\n }\n\n /* Touch hit-area expansion without affecting layout /\n &::after {\n content: '';\n position: absolute;\n inset-block: calc((${touchButtonSize} - ${barHeight}) / -2);\n inset-inline: 0;\n }\n `;\n});\n\nStyledHorizontalBarSegment.defaultProps = defaultThemeProp;\n\nexport const StyledVerticalBarWrapper = styled.div(({ theme }) => {\n return css`\n min-width: 2rem;\n padding-block: calc(${theme.base.spacing} / 2);\n `;\n});\n\nStyledVerticalBarWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledVerticalBarSegment = styled(BareButton)<{\n current: boolean;\n completed?: boolean;\n clickable?: boolean;\n}>(({ current, completed, clickable, theme }) => {\n const {\n base: {\n spacing,\n animation: { speed: animationSpeed },\n palette: { interactive, 'primary-background': primaryBackground },\n shadow: { focus: focusShadow },\n 'hit-area': { 'finger-min': touchButtonSize }\n },\n components: {\n 'form-control': { 'border-color': borderColor, 'border-width': borderWidth },\n 'multi-step-form': { 'bar-indicator-border-radius': barIndicatorBorderRadius }\n }\n } = theme;\n\n const barWidth = current ? `calc(${spacing} 1.5)` : spacing;\n const hoverBackground = tryCatch(\n () => lighten(0.1, interactive),\n () => interactive\n );\n\n return css`\n position: relative;\n display: block;\n width: ${barWidth};\n min-height: ${stepVerticalBarMinHeight};\n flex: 1 1 0;\n border: ${borderWidth} solid transparent;\n border-radius: ${barIndicatorBorderRadius};\n background: ${current \|\| completed ? interactive : primaryBackground};\n transition:\n background calc(2 * ${animationSpeed}),\n border-color calc(2 * ${animationSpeed});\n\n ${!current &&\n css`\n border-color: ${clickable ? interactive : borderColor};\n\n @media (forced-colors: active) {\n border-color: Highlight;\n }\n `}\n\n ${clickable &&\n css`\n cursor: pointer;\n\n ${!current &&\n css`\n &:hover {\n background: ${hoverBackground};\n }\n `}\n `}\n\n &:focus-visible {\n box-shadow: ${focusShadow};\n\n @media (forced-colors: active) {\n outline: 0.125rem solid Highlight;\n outline-offset: 0.125rem;\n }\n }\n\n @media (forced-colors: active) {\n background: ${current \|\| completed ? 'Highlight' : 'CanvasText'};\n }\n\n /* Touch hit-area expansion without affecting layout */\n &::after {\n content: '';\n position: absolute;\n inset-block: 0;\n inset-inline: calc((${touchButtonSize} - ${barWidth}) / -2);\n }\n `;\n});\n\nStyledVerticalBarSegment.defaultProps = defaultThemeProp;\n"]}