@pega/cosmos-react-core 4.0.0-dev.18.0 → 4.0.0-dev.18.1

package/lib/components/Modal/Modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport { PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledIcon } from '../Icon';\nimport { StyledCard } from '../Card';\n\nimport { ModalContextValue, ModalProps } from './Modal.types';\n\ntype ModalPropsWithDefaults = PropsWithDefaults<ModalProps, 'stretch' | 'center' | 'autoWidth'>;\n\nexport const StyledModalChildrenWrap = styled.div``;\n\nexport const StyledModalHeader = styled.header<{ hasAction?: boolean }>(\n  ({ theme: { base }, hasAction }) => {\n    const padAdjust = hasAction ? 0.75 : 0;\n\n    return css`\n      padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${3 - padAdjust} * ${base.spacing})\n        calc(${2.5 - padAdjust} * ${base.spacing}) calc(3 * ${base.spacing});\n      h2 > ${StyledIcon} {\n        margin-inline-end: ${base.spacing};\n      }\n\n      > h2 {\n        overflow-x: hidden;\n        > :first-child {\n          overflow-x: hidden;\n          white-space: nowrap;\n          text-overflow: ellipsis;\n        }\n      }\n\n      ${StyledButton} {\n        color: ${base.palette['foreground-color']};\n      }\n    `;\n  }\n);\n\nStyledModalHeader.defaultProps = defaultThemeProp;\n\nexport const StyledModalContent = styled.div(({ theme: { base } }) => {\n  return css`\n    position: relative;\n    padding: calc(0.5 * ${base.spacing}) calc(3 * ${base.spacing});\n    overflow-y: auto;\n\n    &:last-child {\n      padding-bottom: calc(3 * ${base.spacing});\n    }\n  `;\n});\n\nStyledModalContent.defaultProps = defaultThemeProp;\n\nexport const StyledModalActions = styled.footer(({ theme: { base } }) => {\n  return css`\n    padding: calc(2.5 * ${base.spacing}) calc(3 * ${base.spacing}) calc(3 * ${base.spacing});\n  `;\n});\n\nStyledModalActions.defaultProps = defaultThemeProp;\n\nexport const StyledModal = styled(StyledCard)<\n  ModalPropsWithDefaults & Pick<ModalContextValue, 'alert' | 'state'>\n>(({ theme: { base }, alert, autoWidth, center, stretch, state }) => {\n  let defaultMinWidth = '80ch';\n  let defaultMaxWidth = '80ch';\n\n  if (alert) {\n    defaultMinWidth = '60ch';\n    defaultMaxWidth = '60ch';\n  } else if (autoWidth) {\n    defaultMaxWidth = '100%';\n  }\n\n  return css`\n    position: relative;\n    box-shadow: ${base.shadow.high};\n\n    ${!alert && stretch\n      ? css`\n          width: calc(100% - 1rem);\n          height: calc(100% - 1rem);\n\n          @media screen and (min-width: ${base.breakpoints.sm}) {\n            width: calc(100% - 2rem);\n            height: calc(100% - 2rem);\n          }\n\n          @media screen and (min-width: ${base.breakpoints.md}) {\n            width: calc(100% - 4rem);\n            height: calc(100% - 4rem);\n          }\n        `\n      : css`\n          min-width: min(calc(100% - 1rem), ${defaultMinWidth});\n          max-width: min(calc(100% - 1rem), ${defaultMaxWidth});\n          max-height: calc(100% - 1rem);\n          ${!center &&\n          css`\n            margin-block-start: 0.5rem;\n          `}\n\n          @media screen and (min-width: ${base.breakpoints.sm}) {\n            min-width: min(calc(100% - 2rem), ${defaultMinWidth});\n            max-width: min(calc(100% - 2rem), ${defaultMaxWidth});\n            max-height: calc(100% - 2rem);\n            ${!center &&\n            css`\n              margin-block-start: 1rem;\n            `}\n          }\n\n          @media screen and (min-width: ${base.breakpoints.md}) {\n            min-width: min(calc(100% - 4rem), ${defaultMinWidth});\n            max-width: min(calc(100% - 4rem), ${defaultMaxWidth});\n            max-height: calc(100% - 4rem);\n            ${!center &&\n            css`\n              margin-block-start: 2rem;\n            `}\n          }\n        `}\n\n    ${state === 'docked' &&\n    css`\n      /*\n       * This seems like the most optimal of the suboptimal solutions.\n       * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n       */\n      &&& {\n        /* Using non logical properties due to Safari 14.x support and since the inline bottom values are the same. */\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        pointer-events: auto;\n      }\n    `}\n\n    &[aria-busy='true'] {\n      ${StyledModalContent} {\n        min-height: 8rem;\n        overflow: hidden;\n      }\n\n      ${StyledModalChildrenWrap} {\n        visibility: hidden;\n      }\n    }\n  `;\n});\n\nStyledModal.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport { PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledIcon } from '../Icon';\nimport { StyledCard } from '../Card';\n\nimport { ModalContextValue, ModalProps } from './Modal.types';\n\ntype ModalPropsWithDefaults = PropsWithDefaults<ModalProps, 'stretch' | 'center' | 'autoWidth'>;\n\nexport const StyledModalChildrenWrap = styled.div``;\n\nexport const StyledModalHeader = styled.header<{ hasAction?: boolean }>(\n  ({ theme: { base }, hasAction }) => {\n    const padAdjust = hasAction ? 0.75 : 0;\n\n    return css`\n      padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${3 - padAdjust} * ${base.spacing})\n        calc(${2.5 - padAdjust} * ${base.spacing}) calc(3 * ${base.spacing});\n      h2 > ${StyledIcon} {\n        margin-inline-end: ${base.spacing};\n      }\n\n      > h2 {\n        overflow-x: hidden;\n        > :first-child {\n          overflow-x: hidden;\n          white-space: nowrap;\n          text-overflow: ellipsis;\n        }\n      }\n\n      ${StyledButton} {\n        color: ${base.palette['foreground-color']};\n      }\n    `;\n  }\n);\n\nStyledModalHeader.defaultProps = defaultThemeProp;\n\nexport const StyledModalContent = styled.div(({ theme: { base } }) => {\n  return css`\n    position: relative;\n    padding: calc(0.5 * ${base.spacing}) calc(3 * ${base.spacing});\n    overflow-y: auto;\n\n    &:last-child {\n      padding-bottom: calc(3 * ${base.spacing});\n    }\n  `;\n});\n\nStyledModalContent.defaultProps = defaultThemeProp;\n\nexport const StyledModalActions = styled.footer(({ theme: { base } }) => {\n  return css`\n    padding: calc(2.5 * ${base.spacing}) calc(3 * ${base.spacing}) calc(3 * ${base.spacing});\n  `;\n});\n\nStyledModalActions.defaultProps = defaultThemeProp;\n\nexport const StyledModal = styled(StyledCard)<\n  ModalPropsWithDefaults & Pick<ModalContextValue, 'alert' | 'state'>\n>(({ theme: { base }, alert, autoWidth, center, stretch, state }) => {\n  let defaultMinWidth = '80ch';\n  let defaultMaxWidth = '80ch';\n\n  if (alert) {\n    defaultMinWidth = '60ch';\n    defaultMaxWidth = '60ch';\n  } else if (autoWidth) {\n    defaultMaxWidth = '100%';\n  }\n\n  return css`\n    position: relative;\n    box-shadow: ${base.shadow.high};\n\n    ${!alert && stretch\n      ? css`\n          width: calc(100% - 1rem);\n          height: calc(100% - 1rem);\n\n          @media screen and (min-width: ${base.breakpoints.sm}) {\n            width: calc(100% - 2rem);\n            height: calc(100% - 2rem);\n          }\n\n          @media screen and (min-width: ${base.breakpoints.md}) {\n            width: calc(100% - 4rem);\n            height: calc(100% - 4rem);\n          }\n        `\n      : css`\n          min-width: min(calc(100% - 1rem), ${defaultMinWidth});\n          max-width: min(calc(100% - 1rem), ${defaultMaxWidth});\n          max-height: calc(100% - 1rem);\n          ${!center &&\n          css`\n            margin-block-start: 0.5rem;\n          `}\n\n          @media screen and (min-width: ${base.breakpoints.sm}) {\n            min-width: min(calc(100% - 2rem), ${defaultMinWidth});\n            max-width: min(calc(100% - 2rem), ${defaultMaxWidth});\n            max-height: calc(100% - 2rem);\n            ${!center &&\n            css`\n              margin-block-start: 1rem;\n            `}\n          }\n\n          @media screen and (min-width: ${base.breakpoints.md}) {\n            min-width: min(calc(100% - 4rem), ${defaultMinWidth});\n            max-width: min(calc(100% - 4rem), ${defaultMaxWidth});\n            max-height: calc(100% - 4rem);\n            ${!center &&\n            css`\n              margin-block-start: 2rem;\n            `}\n          }\n        `}\n\n    ${state === 'docked' &&\n    css`\n      /*\n       * This seems like the most optimal of the suboptimal solutions.\n       * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n       */\n      &&& {\n        /* Using non logical properties due to Safari 14.x support and since the inline bottom values are the same. */\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        pointer-events: auto;\n      }\n    `}\n\n    &[aria-busy='true'] {\n      ${StyledModalContent} {\n        min-height: 8rem;\n        overflow: hidden;\n      }\n    }\n  `;\n});\n\nStyledModal.defaultProps = defaultThemeProp;\n"]}

package/lib/components/MultiStepForm/HorizontalFormProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAsC,MAAM,OAAO,CAAC;AAM9E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;AAE5D,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,eAAO,MAAM,kBAAkB,iKAgB7B,CAAC;AAIH,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA+G/E,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"HorizontalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAsC,MAAM,OAAO,CAAC;AAM9E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;AAE5D,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,eAAO,MAAM,kBAAkB,iKAe7B,CAAC;AAIH,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA+G/E,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/MultiStepForm/HorizontalFormProgress.js

@@ -15,7 +15,6 @@ export const StyledFormProgress = styled(Flex)(({ theme }) => {
     const fontSizes = calculateFontSize(fontSize, fontScale);
     return css `
     position: relative;
-    margin-block-start: calc(-1.5 * ${spacing});
     padding-block-start: calc(${spacing} + ${fontSizes[h4fontSize]} * 1.35);
   `;
 });

package/lib/components/MultiStepForm/HorizontalFormProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { FunctionComponent, CSSProperties, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useElement, useTheme } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\n\nimport { CurrentStepPopover, StepMarker, StyledBar, StyledFill } from './FormProgress.styles';\nimport type MultiStepFormProps from './MultiStepForm.types';\n\ninterface FormProgressProps {\n  steps: MultiStepFormProps['steps'];\n  currentStepId: MultiStepFormProps['currentStepId'];\n}\n\nexport const StyledFormProgress = styled(Flex)(({ theme }) => {\n  const {\n    base: { spacing, 'font-size': fontSize, 'font-scale': fontScale },\n    components: {\n      text: {\n        h4: { 'font-size': h4fontSize }\n      }\n    }\n  } = theme;\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    position: relative;\n    margin-block-start: calc(-1.5 * ${spacing});\n    padding-block-start: calc(${spacing} + ${fontSizes[h4fontSize as FontSize]} * 1.35);\n  `;\n});\n\nStyledFormProgress.defaultProps = defaultThemeProp;\n\nconst HorizontalFormProgress: FunctionComponent<FormProgressProps & ForwardProps> = ({\n  steps,\n  currentStepId,\n  ...restProps\n}) => {\n  const curIdx = steps.findIndex(step => step.id === currentStepId);\n  const curStep = steps[curIdx];\n  const fillScale = curIdx / (steps.length - 1);\n\n  const [currentStepEl, setCurrentStepEl] = useElement();\n  const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n  const theme = useTheme();\n\n  let popoverPlacement: 'top' | 'top-start' | 'top-end' = 'top';\n  if (curIdx === 0) popoverPlacement = 'top-start';\n  else if (curIdx === steps.length - 1) popoverPlacement = 'top-end';\n\n  useEffect(() => {\n    setCurrentStepEl(stepEls[curStep.id]);\n  }, [Object.keys(stepEls), curStep]);\n\n  return (\n    <StyledFormProgress\n      {...restProps}\n      container={{ alignItems: 'center' }}\n      role='progressbar'\n      aria-valuenow={curIdx}\n      aria-valuemin={0}\n      aria-valuetext={curStep.name}\n      aria-valuemax={steps.length}\n    >\n      <CurrentStepPopover\n        show\n        target={currentStepEl}\n        placement={popoverPlacement}\n        strategy='absolute'\n        hideOnTargetHidden\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: [\n                0,\n                tryCatch(\n                  () => stripUnit(remToPx(theme.base.spacing)),\n                  () => 8\n                )\n              ]\n            }\n          },\n          {\n            name: 'placeAndContain',\n            enabled: false\n          },\n          {\n            name: 'flip',\n            enabled: false\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              padding: 0\n            }\n          }\n        ]}\n      >\n        <Text variant='h4'>{curStep.name}</Text>\n      </CurrentStepPopover>\n      <Flex container={{ justify: 'between', alignItems: 'center' }} item={{ grow: 1 }}>\n        {steps.map((step, index) => {\n          return (\n            <StepMarker\n              key={step.id}\n              ref={(el: HTMLElement | null) => {\n                setStepEls(curr => {\n                  const newEls = { ...curr };\n                  if (!el && newEls[step.id]) {\n                    delete newEls[step.id];\n                    return newEls;\n                  }\n                  if (el) return { ...newEls, [step.id]: el };\n                  return newEls;\n                });\n              }}\n              aria-label={step.name}\n              aria-describedby={step.id}\n              current={index === curIdx}\n              depth={step.depth}\n              prior={index < curIdx}\n              onClick={step.onMarkerClick}\n            >\n              {index !== curIdx && (\n                <Tooltip\n                  target={stepEls[step.id]}\n                  showDelay='none'\n                  hideDelay='short'\n                  portal={false}\n                >\n                  {step.name}\n                </Tooltip>\n              )}\n            </StepMarker>\n          );\n        })}\n      </Flex>\n\n      <StyledBar>\n        <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n      </StyledBar>\n    </StyledFormProgress>\n  );\n};\n\nexport default HorizontalFormProgress;\n"]}
+{"version":3,"file":"HorizontalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAoC,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAQ9F,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EACjE,UAAU,EAAE,EACV,IAAI,EAAE,EACJ,EAAE,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,EAChC,EACF,EACF,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;;gCAEoB,OAAO,MAAM,SAAS,CAAC,UAAsB,CAAC;GAC3E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,sBAAsB,GAAwD,CAAC,EACnF,KAAK,EACL,aAAa,EACb,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,aAAa,CAAC,CAAC;IAClE,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9B,MAAM,SAAS,GAAG,MAAM,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAE9C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,UAAU,EAAE,CAAC;IACvD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA8B,EAAE,CAAC,CAAC;IACxE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,IAAI,gBAAgB,GAAoC,KAAK,CAAC;IAC9D,IAAI,MAAM,KAAK,CAAC;QAAE,gBAAgB,GAAG,WAAW,CAAC;SAC5C,IAAI,MAAM,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;QAAE,gBAAgB,GAAG,SAAS,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,MAAC,kBAAkB,OACb,SAAS,EACb,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EACnC,IAAI,EAAC,aAAa,mBACH,MAAM,mBACN,CAAC,oBACA,OAAO,CAAC,IAAI,mBACb,KAAK,CAAC,MAAM,aAE3B,KAAC,kBAAkB,IACjB,IAAI,QACJ,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAC,UAAU,EACnB,kBAAkB,QAClB,SAAS,EAAE;oBACT;wBACE,IAAI,EAAE,QAAQ;wBACd,OAAO,EAAE;4BACP,MAAM,EAAE;gCACN,CAAC;gCACD,QAAQ,CACN,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,EAC5C,GAAG,EAAE,CAAC,CAAC,CACR;6BACF;yBACF;qBACF;oBACD;wBACE,IAAI,EAAE,iBAAiB;wBACvB,OAAO,EAAE,KAAK;qBACf;oBACD;wBACE,IAAI,EAAE,MAAM;wBACZ,OAAO,EAAE,KAAK;qBACf;oBACD;wBACE,IAAI,EAAE,iBAAiB;wBACvB,OAAO,EAAE;4BACP,OAAO,EAAE,CAAC;yBACX;qBACF;iBACF,YAED,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,CAAC,IAAI,GAAQ,GACrB,EACrB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAC7E,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBACzB,OAAO,CACL,KAAC,UAAU,IAET,GAAG,EAAE,CAAC,EAAsB,EAAE,EAAE;4BAC9B,UAAU,CAAC,IAAI,CAAC,EAAE;gCAChB,MAAM,MAAM,GAAG,EAAE,GAAG,IAAI,EAAE,CAAC;gCAC3B,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;oCAC1B,OAAO,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oCACvB,OAAO,MAAM,CAAC;iCACf;gCACD,IAAI,EAAE;oCAAE,OAAO,EAAE,GAAG,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;gCAC5C,OAAO,MAAM,CAAC;4BAChB,CAAC,CAAC,CAAC;wBACL,CAAC,gBACW,IAAI,CAAC,IAAI,sBACH,IAAI,CAAC,EAAE,EACzB,OAAO,EAAE,KAAK,KAAK,MAAM,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,KAAK,GAAG,MAAM,EACrB,OAAO,EAAE,IAAI,CAAC,aAAa,YAE1B,KAAK,KAAK,MAAM,IAAI,CACnB,KAAC,OAAO,IACN,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,EACxB,SAAS,EAAC,MAAM,EAChB,SAAS,EAAC,OAAO,EACjB,MAAM,EAAE,KAAK,YAEZ,IAAI,CAAC,IAAI,GACF,CACX,IA5BI,IAAI,CAAC,EAAE,CA6BD,CACd,CAAC;gBACJ,CAAC,CAAC,GACG,EAEP,KAAC,SAAS,cACR,KAAC,UAAU,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAmB,GAAI,GAC1D,IACO,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { FunctionComponent, CSSProperties, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useElement, useTheme } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\n\nimport { CurrentStepPopover, StepMarker, StyledBar, StyledFill } from './FormProgress.styles';\nimport type MultiStepFormProps from './MultiStepForm.types';\n\ninterface FormProgressProps {\n  steps: MultiStepFormProps['steps'];\n  currentStepId: MultiStepFormProps['currentStepId'];\n}\n\nexport const StyledFormProgress = styled(Flex)(({ theme }) => {\n  const {\n    base: { spacing, 'font-size': fontSize, 'font-scale': fontScale },\n    components: {\n      text: {\n        h4: { 'font-size': h4fontSize }\n      }\n    }\n  } = theme;\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    position: relative;\n    padding-block-start: calc(${spacing} + ${fontSizes[h4fontSize as FontSize]} * 1.35);\n  `;\n});\n\nStyledFormProgress.defaultProps = defaultThemeProp;\n\nconst HorizontalFormProgress: FunctionComponent<FormProgressProps & ForwardProps> = ({\n  steps,\n  currentStepId,\n  ...restProps\n}) => {\n  const curIdx = steps.findIndex(step => step.id === currentStepId);\n  const curStep = steps[curIdx];\n  const fillScale = curIdx / (steps.length - 1);\n\n  const [currentStepEl, setCurrentStepEl] = useElement();\n  const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n  const theme = useTheme();\n\n  let popoverPlacement: 'top' | 'top-start' | 'top-end' = 'top';\n  if (curIdx === 0) popoverPlacement = 'top-start';\n  else if (curIdx === steps.length - 1) popoverPlacement = 'top-end';\n\n  useEffect(() => {\n    setCurrentStepEl(stepEls[curStep.id]);\n  }, [Object.keys(stepEls), curStep]);\n\n  return (\n    <StyledFormProgress\n      {...restProps}\n      container={{ alignItems: 'center' }}\n      role='progressbar'\n      aria-valuenow={curIdx}\n      aria-valuemin={0}\n      aria-valuetext={curStep.name}\n      aria-valuemax={steps.length}\n    >\n      <CurrentStepPopover\n        show\n        target={currentStepEl}\n        placement={popoverPlacement}\n        strategy='absolute'\n        hideOnTargetHidden\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: [\n                0,\n                tryCatch(\n                  () => stripUnit(remToPx(theme.base.spacing)),\n                  () => 8\n                )\n              ]\n            }\n          },\n          {\n            name: 'placeAndContain',\n            enabled: false\n          },\n          {\n            name: 'flip',\n            enabled: false\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              padding: 0\n            }\n          }\n        ]}\n      >\n        <Text variant='h4'>{curStep.name}</Text>\n      </CurrentStepPopover>\n      <Flex container={{ justify: 'between', alignItems: 'center' }} item={{ grow: 1 }}>\n        {steps.map((step, index) => {\n          return (\n            <StepMarker\n              key={step.id}\n              ref={(el: HTMLElement | null) => {\n                setStepEls(curr => {\n                  const newEls = { ...curr };\n                  if (!el && newEls[step.id]) {\n                    delete newEls[step.id];\n                    return newEls;\n                  }\n                  if (el) return { ...newEls, [step.id]: el };\n                  return newEls;\n                });\n              }}\n              aria-label={step.name}\n              aria-describedby={step.id}\n              current={index === curIdx}\n              depth={step.depth}\n              prior={index < curIdx}\n              onClick={step.onMarkerClick}\n            >\n              {index !== curIdx && (\n                <Tooltip\n                  target={stepEls[step.id]}\n                  showDelay='none'\n                  hideDelay='short'\n                  portal={false}\n                >\n                  {step.name}\n                </Tooltip>\n              )}\n            </StepMarker>\n          );\n        })}\n      </Flex>\n\n      <StyledBar>\n        <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n      </StyledBar>\n    </StyledFormProgress>\n  );\n};\n\nexport default HorizontalFormProgress;\n"]}

package/lib/components/MultiStepForm/MultiStepForm.d.ts

@@ -1,7 +1,10 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../types';
 import MultiStepFormProps from './MultiStepForm.types';
-export declare const StyledForm: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledForm: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, {
+    actions?: boolean | undefined;
+    heading?: boolean | undefined;
+}, never>;
 export declare const StyledFormContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledRequiredFieldLegend: import("styled-components").StyledComponent<FunctionComponent<import("../Text").TextProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const MultiStepForm: FunctionComponent<MultiStepFormProps & ForwardProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"MultiStepForm.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAsC,MAAM,OAAO,CAAC;AAI1F,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAU3C,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAIvD,eAAO,MAAM,UAAU,0GAAgB,CAAC;AAExC,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,eAAO,MAAM,yBAAyB,iKAqBpC,CAAC;AAIH,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA4H9E,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MultiStepForm.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAsC,MAAM,OAAO,CAAC;AAI1F,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAIvD,eAAO,MAAM,UAAU;;;SAkBtB,CAAC;AAIF,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,eAAO,MAAM,yBAAyB,iKAqBpC,CAAC;AAIH,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAqJ9E,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/MultiStepForm/MultiStepForm.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import { useUID, useI18n, usePrevious, useBreakpoint, useTheme } from '../../hooks';
@@ -8,11 +8,29 @@ import Flex from '../Flex';
 import Text from '../Text';
 import HTML from '../HTML';
 import VisuallyHiddenText from '../VisuallyHiddenText';
-import Grid from '../Grid';
+import Grid, { StyledGrid } from '../Grid';
 import { defaultThemeProp } from '../../theme';
+import Progress from '../Progress';
 import VerticalFormProgress from './VerticalFormProgress';
 import HorizontalFormProgress from './HorizontalFormProgress';
-export const StyledForm = styled.form ``;
+export const StyledForm = styled.form(({ actions, heading, theme }) => {
+    return css `
+      & > ${StyledGrid} {
+        position: relative;
+
+        ${actions &&
+        css `
+          padding-block-end: calc(2 * ${theme.base.spacing});
+        `}
+
+        ${heading &&
+        css `
+          padding-block-start: calc(2 * ${theme.base.spacing});
+        `}
+      }
+    `;
+});
+StyledForm.defaultProps = defaultThemeProp;
 export const StyledFormContent = styled.div ``;
 export const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {
     const { base: { 'font-size': fontSize, 'font-scale': fontScale, palette: { urgent } } } = theme;
@@ -30,55 +48,69 @@ export const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {
   `;
 });
 StyledRequiredFieldLegend.defaultProps = defaultThemeProp;
-export const MultiStepForm = forwardRef(({ currentStepId, steps, heading, stepIndicator: stepIndicatorProp = steps.length < 2 ? 'none' : 'horizontal', ...restProps }, ref) => {
-    const multiStepContentRef = useRef(null);
+export const MultiStepForm = forwardRef(({ currentStepId, steps, heading, stepIndicator: stepIndicatorProp = steps.length < 2 ? 'none' : 'horizontal', progress, ...restProps }, ref) => {
+    const multiStepFormContentRef = useRef(null);
     const previousId = usePrevious(currentStepId);
     const currentStep = steps.find(step => step.id === currentStepId);
     const headingId = useUID();
     const descriptionId = useUID();
     const t = useI18n();
     const { base: { 'content-width': contentWidth } } = useTheme();
+    const setFocus = () => {
+        if (progress)
+            return;
+        const focusables = getFocusables(multiStepFormContentRef);
+        focusables[0]?.focus();
+    };
     useEffect(() => {
         if (previousId === undefined)
             return;
         if (previousId !== currentStepId) {
-            const focusableElements = getFocusables(multiStepContentRef);
+            const focusableElements = getFocusables(multiStepFormContentRef);
             if (focusableElements.length)
                 focusableElements[0].focus();
         }
     }, [currentStepId, previousId]);
+    useEffect(() => {
+        if (!progress) {
+            setFocus();
+        }
+    }, [progress]);
     const isSmallOrAbove = useBreakpoint('sm');
     const stepIndicator = stepIndicatorProp === 'vertical' && !isSmallOrAbove ? 'horizontal' : stepIndicatorProp;
     let areaDef = '';
     switch (stepIndicator) {
         case 'horizontal':
-            if (heading)
-                areaDef += '"heading" ';
-            areaDef += '"stepIndicator" "content"';
-            if (currentStep.actions)
-                areaDef += ' "actions"';
+            areaDef += '"stepIndicator" ';
+            if (currentStep.banners)
+                areaDef += '"banners" ';
+            if (currentStep.description)
+                areaDef += '"description" ';
+            areaDef += '"content"';
             break;
         case 'vertical':
-            if (heading)
-                areaDef += '"heading stepIndicator" ';
+            if (currentStep.banners)
+                areaDef += '"banners stepIndicator" ';
+            if (currentStep.description)
+                areaDef += '"description stepIndicator" ';
             areaDef += '"content stepIndicator"';
-            if (currentStep.actions)
-                areaDef += ' "actions actions"';
             break;
         default:
-            if (heading)
-                areaDef += '"heading" ';
+            if (currentStep.banners)
+                areaDef += '"banners" ';
+            if (currentStep.description)
+                areaDef += '"description" ';
             areaDef += '"content"';
-            if (currentStep.actions)
-                areaDef += ' "actions"';
     }
-    return (_jsxs(Grid, { ref: ref, as: StyledForm, ...restProps, container: {
-            cols: stepIndicator === 'vertical' ? `2fr minmax(${contentWidth.xs}, 1fr)` : 'minmax(0, 1fr)',
-            areas: areaDef,
-            gap: 3
-        }, "aria-labelledby": heading ? headingId : undefined, "aria-describedby": currentStep.description ? descriptionId : undefined, children: [(heading || steps.length > 1) && (_jsxs(_Fragment, { children: [heading && (_jsx(Grid, { item: { area: 'heading' }, children: _jsx(Text, { id: headingId, variant: 'h3', children: heading }) })), steps.length > 1 && (_jsxs(_Fragment, { children: [stepIndicator === 'horizontal' && (_jsx(Grid, { item: { area: 'stepIndicator' }, as: HorizontalFormProgress, steps: steps, currentStepId: currentStepId })), stepIndicator === 'vertical' && (_jsx(Grid, { item: { area: 'stepIndicator' }, as: VerticalFormProgress, steps: steps, currentStepId: currentStepId })), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: previousId !== undefined && previousId !== currentStepId
+    return (_jsxs(StyledForm, { ref: ref, ...restProps, "aria-labelledby": heading ? headingId : undefined, "aria-describedby": currentStep.description ? descriptionId : undefined, heading: !!heading, actions: !!currentStep.actions, children: [heading && (_jsx(Text, { id: headingId, variant: 'h3', children: heading })), _jsxs(Grid, { container: {
+                    cols: stepIndicator === 'vertical'
+                        ? `2fr minmax(${contentWidth.xs}, 1fr)`
+                        : 'minmax(0, 1fr)',
+                    areas: areaDef,
+                    gap: 2
+                }, inert: progress ? '' : undefined, children: [steps.length > 1 && (_jsxs(Grid, { item: { area: 'stepIndicator' }, children: [stepIndicator === 'horizontal' && (_jsx(Grid, { item: { area: 'stepIndicator' }, as: HorizontalFormProgress, steps: steps, currentStepId: currentStepId })), stepIndicator === 'vertical' && (_jsx(Grid, { item: { area: 'stepIndicator' }, as: VerticalFormProgress, steps: steps, currentStepId: currentStepId })), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: previousId !== undefined && previousId !== currentStepId
                                     ? t('step_changed_to_name', [currentStep.name])
-                                    : '' })] }))] })), _jsxs(Grid, { item: { area: 'content' }, container: { gap: 3 }, children: [currentStep.banners, currentStep.description && (_jsx(HTML, { id: descriptionId, as: 'p', content: currentStep.description })), _jsx(StyledFormContent, { ref: multiStepContentRef, children: currentStep.content })] }), currentStep.actions && (_jsx(Grid, { item: { area: 'actions' }, children: _jsx(Flex, { container: { justify: 'between', alignItems: 'center' }, children: currentStep.actions }) }))] }));
+                                    : '' })] })), currentStep.banners && _jsx(Grid, { item: { area: 'banners' }, children: currentStep.banners }), currentStep.description && (_jsx(Grid, { item: { area: 'description' }, children: _jsx(HTML, { id: descriptionId, as: 'p', content: currentStep.description }) })), _jsx(Grid, { item: { area: 'content' }, as: StyledFormContent, ref: multiStepFormContentRef, children: currentStep.content }), _jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: 'local', message: typeof progress === 'string' ? progress : undefined })] }), currentStep.actions && (_jsx(Flex, { container: { justify: 'between', alignItems: 'center' }, children: currentStep.actions }))] }));
 });
 export default MultiStepForm;
 //# sourceMappingURL=MultiStepForm.js.map

package/lib/components/MultiStepForm/MultiStepForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiStepForm.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useUID, useI18n, usePrevious, useBreakpoint, useTheme } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { getFocusables } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid from '../Grid';\nimport { defaultThemeProp } from '../../theme';\n\nimport MultiStepFormProps from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form``;\n\nexport const StyledFormContent = styled.div``;\n\nexport const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {\n  const {\n    base: {\n      'font-size': fontSize,\n      'font-scale': fontScale,\n      palette: { urgent }\n    }\n  } = theme;\n  const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${infoFontSize};\n    font-style: italic;\n\n    &::before {\n      display: 'inline';\n      content: '\\\\00a0*';\n      vertical-align: top;\n      color: ${urgent};\n    }\n  `;\n});\n\nStyledRequiredFieldLegend.defaultProps = defaultThemeProp;\n\nexport const MultiStepForm: FunctionComponent<MultiStepFormProps & ForwardProps> = forwardRef(\n  (\n    {\n      currentStepId,\n      steps,\n      heading,\n      stepIndicator: stepIndicatorProp = steps.length < 2 ? 'none' : 'horizontal',\n      ...restProps\n    }: PropsWithoutRef<MultiStepFormProps>,\n    ref: MultiStepFormProps['ref']\n  ) => {\n    const multiStepContentRef = useRef(null);\n    const previousId = usePrevious(currentStepId);\n    const currentStep = steps.find(step => step.id === currentStepId)!;\n    const headingId = useUID();\n    const descriptionId = useUID();\n    const t = useI18n();\n    const {\n      base: { 'content-width': contentWidth }\n    } = useTheme();\n\n    useEffect(() => {\n      if (previousId === undefined) return;\n\n      if (previousId !== currentStepId) {\n        const focusableElements = getFocusables(multiStepContentRef);\n\n        if (focusableElements.length) focusableElements[0].focus();\n      }\n    }, [currentStepId, previousId]);\n\n    const isSmallOrAbove = useBreakpoint('sm');\n\n    const stepIndicator =\n      stepIndicatorProp === 'vertical' && !isSmallOrAbove ? 'horizontal' : stepIndicatorProp;\n\n    let areaDef = '';\n    switch (stepIndicator) {\n      case 'horizontal':\n        if (heading) areaDef += '\"heading\" ';\n        areaDef += '\"stepIndicator\" \"content\"';\n        if (currentStep.actions) areaDef += ' \"actions\"';\n        break;\n      case 'vertical':\n        if (heading) areaDef += '\"heading stepIndicator\" ';\n        areaDef += '\"content stepIndicator\"';\n        if (currentStep.actions) areaDef += ' \"actions actions\"';\n        break;\n      default:\n        if (heading) areaDef += '\"heading\" ';\n        areaDef += '\"content\"';\n        if (currentStep.actions) areaDef += ' \"actions\"';\n    }\n\n    return (\n      <Grid\n        ref={ref}\n        as={StyledForm}\n        {...restProps}\n        container={{\n          cols:\n            stepIndicator === 'vertical' ? `2fr minmax(${contentWidth.xs}, 1fr)` : 'minmax(0, 1fr)',\n          areas: areaDef,\n          gap: 3\n        }}\n        aria-labelledby={heading ? headingId : undefined}\n        aria-describedby={currentStep.description ? descriptionId : undefined}\n      >\n        {(heading || steps.length > 1) && (\n          <>\n            {heading && (\n              <Grid item={{ area: 'heading' }}>\n                <Text id={headingId} variant='h3'>\n                  {heading}\n                </Text>\n              </Grid>\n            )}\n            {steps.length > 1 && (\n              <>\n                {stepIndicator === 'horizontal' && (\n                  <Grid\n                    item={{ area: 'stepIndicator' }}\n                    as={HorizontalFormProgress}\n                    steps={steps}\n                    currentStepId={currentStepId}\n                  />\n                )}\n                {stepIndicator === 'vertical' && (\n                  <Grid\n                    item={{ area: 'stepIndicator' }}\n                    as={VerticalFormProgress}\n                    steps={steps}\n                    currentStepId={currentStepId}\n                  />\n                )}\n                <VisuallyHiddenText aria-live='polite'>\n                  {previousId !== undefined && previousId !== currentStepId\n                    ? t('step_changed_to_name', [currentStep.name])\n                    : ''}\n                </VisuallyHiddenText>\n              </>\n            )}\n          </>\n        )}\n\n        <Grid item={{ area: 'content' }} container={{ gap: 3 }}>\n          {currentStep.banners}\n\n          {currentStep.description && (\n            <HTML id={descriptionId} as='p' content={currentStep.description} />\n          )}\n\n          <StyledFormContent ref={multiStepContentRef}>{currentStep.content}</StyledFormContent>\n        </Grid>\n        {currentStep.actions && (\n          <Grid item={{ area: 'actions' }}>\n            <Flex container={{ justify: 'between', alignItems: 'center' }}>\n              {currentStep.actions}\n            </Flex>\n          </Grid>\n        )}\n      </Grid>\n    );\n  }\n);\n\nexport default MultiStepForm;\n"]}
+{"version":3,"file":"MultiStepForm.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEpF,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AACvD,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,QAAQ,MAAM,aAAa,CAAC;AAGnC,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAC1D,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAE9D,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CACnC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9B,OAAO,GAAG,CAAA;YACF,UAAU;;;UAGZ,OAAO;QACT,GAAG,CAAA;wCAC6B,KAAK,CAAC,IAAI,CAAC,OAAO;SACjD;;UAEC,OAAO;QACT,GAAG,CAAA;0CAC+B,KAAK,CAAC,IAAI,CAAC,OAAO;SACnD;;KAEJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClE,MAAM,EACJ,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,OAAO,EAAE,EAAE,MAAM,EAAE,EACpB,EACF,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAErE,OAAO,GAAG,CAAA;iBACK,YAAY;;;;;;;eAOd,MAAM;;GAElB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,aAAa,GAAyD,UAAU,CAC3F,CACE,EACE,aAAa,EACb,KAAK,EACL,OAAO,EACP,aAAa,EAAE,iBAAiB,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,EAC3E,QAAQ,EACR,GAAG,SAAS,EACwB,EACtC,GAA8B,EAC9B,EAAE;IACF,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE7C,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,aAAa,CAAE,CAAC;IACnE,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAC/B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EACJ,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,GAAG,QAAQ,EAAE,CAAC;IAEf,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,QAAQ;YAAE,OAAO;QAErB,MAAM,UAAU,GAAG,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAC1D,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,KAAK,SAAS;YAAE,OAAO;QAErC,IAAI,UAAU,KAAK,aAAa,EAAE;YAChC,MAAM,iBAAiB,GAAG,aAAa,CAAC,uBAAuB,CAAC,CAAC;YAEjE,IAAI,iBAAiB,CAAC,MAAM;gBAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;SAC5D;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC;IAEhC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,EAAE;YACb,QAAQ,EAAE,CAAC;SACZ;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAE3C,MAAM,aAAa,GACjB,iBAAiB,KAAK,UAAU,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAEzF,IAAI,OAAO,GAAG,EAAE,CAAC;IACjB,QAAQ,aAAa,EAAE;QACrB,KAAK,YAAY;YACf,OAAO,IAAI,kBAAkB,CAAC;YAC9B,IAAI,WAAW,CAAC,OAAO;gBAAE,OAAO,IAAI,YAAY,CAAC;YACjD,IAAI,WAAW,CAAC,WAAW;gBAAE,OAAO,IAAI,gBAAgB,CAAC;YACzD,OAAO,IAAI,WAAW,CAAC;YACvB,MAAM;QACR,KAAK,UAAU;YACb,IAAI,WAAW,CAAC,OAAO;gBAAE,OAAO,IAAI,0BAA0B,CAAC;YAC/D,IAAI,WAAW,CAAC,WAAW;gBAAE,OAAO,IAAI,8BAA8B,CAAC;YACvE,OAAO,IAAI,yBAAyB,CAAC;YACrC,MAAM;QACR;YACE,IAAI,WAAW,CAAC,OAAO;gBAAE,OAAO,IAAI,YAAY,CAAC;YACjD,IAAI,WAAW,CAAC,WAAW;gBAAE,OAAO,IAAI,gBAAgB,CAAC;YACzD,OAAO,IAAI,WAAW,CAAC;KAC1B;IAED,OAAO,CACL,MAAC,UAAU,IACT,GAAG,EAAE,GAAG,KACJ,SAAS,qBACI,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,sBAC9B,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACrE,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,OAAO,aAE7B,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAC,IAAI,YAC9B,OAAO,GACH,CACR,EAED,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,IAAI,EACF,aAAa,KAAK,UAAU;wBAC1B,CAAC,CAAC,cAAc,YAAY,CAAC,EAAE,QAAQ;wBACvC,CAAC,CAAC,gBAAgB;oBACtB,KAAK,EAAE,OAAO;oBACd,GAAG,EAAE,CAAC;iBACP,EACD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,aAE/B,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACnB,MAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,aAClC,aAAa,KAAK,YAAY,IAAI,CACjC,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,EAC/B,EAAE,EAAE,sBAAsB,EAC1B,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,GAC5B,CACH,EACA,aAAa,KAAK,UAAU,IAAI,CAC/B,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,EAC/B,EAAE,EAAE,oBAAoB,EACxB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,GAC5B,CACH,EACD,KAAC,kBAAkB,iBAAW,QAAQ,YACnC,UAAU,KAAK,SAAS,IAAI,UAAU,KAAK,aAAa;oCACvD,CAAC,CAAC,CAAC,CAAC,sBAAsB,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;oCAC/C,CAAC,CAAC,EAAE,GACa,IAChB,CACR,EAEA,WAAW,CAAC,OAAO,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,YAAG,WAAW,CAAC,OAAO,GAAQ,EAEpF,WAAW,CAAC,WAAW,IAAI,CAC1B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,YACjC,KAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,EAAE,EAAC,GAAG,EAAC,OAAO,EAAE,WAAW,CAAC,WAAW,GAAI,GAC/D,CACR,EAED,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE,GAAG,EAAE,uBAAuB,YACjF,WAAW,CAAC,OAAO,GACf,EAEP,KAAC,QAAQ,IACP,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,cAAc,QACd,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAC5D,IACG,EACN,WAAW,CAAC,OAAO,IAAI,CACtB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAC1D,WAAW,CAAC,OAAO,GACf,CACR,IACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useUID, useI18n, usePrevious, useBreakpoint, useTheme } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { getFocusables } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid, { StyledGrid } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\n\nimport MultiStepFormProps from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form<{ actions?: boolean; heading?: boolean }>(\n  ({ actions, heading, theme }) => {\n    return css`\n      & > ${StyledGrid} {\n        position: relative;\n\n        ${actions &&\n        css`\n          padding-block-end: calc(2 * ${theme.base.spacing});\n        `}\n\n        ${heading &&\n        css`\n          padding-block-start: calc(2 * ${theme.base.spacing});\n        `}\n      }\n    `;\n  }\n);\n\nStyledForm.defaultProps = defaultThemeProp;\n\nexport const StyledFormContent = styled.div``;\n\nexport const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {\n  const {\n    base: {\n      'font-size': fontSize,\n      'font-scale': fontScale,\n      palette: { urgent }\n    }\n  } = theme;\n  const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${infoFontSize};\n    font-style: italic;\n\n    &::before {\n      display: 'inline';\n      content: '\\\\00a0*';\n      vertical-align: top;\n      color: ${urgent};\n    }\n  `;\n});\n\nStyledRequiredFieldLegend.defaultProps = defaultThemeProp;\n\nexport const MultiStepForm: FunctionComponent<MultiStepFormProps & ForwardProps> = forwardRef(\n  (\n    {\n      currentStepId,\n      steps,\n      heading,\n      stepIndicator: stepIndicatorProp = steps.length < 2 ? 'none' : 'horizontal',\n      progress,\n      ...restProps\n    }: PropsWithoutRef<MultiStepFormProps>,\n    ref: MultiStepFormProps['ref']\n  ) => {\n    const multiStepFormContentRef = useRef(null);\n\n    const previousId = usePrevious(currentStepId);\n    const currentStep = steps.find(step => step.id === currentStepId)!;\n    const headingId = useUID();\n    const descriptionId = useUID();\n    const t = useI18n();\n    const {\n      base: { 'content-width': contentWidth }\n    } = useTheme();\n\n    const setFocus = () => {\n      if (progress) return;\n\n      const focusables = getFocusables(multiStepFormContentRef);\n      focusables[0]?.focus();\n    };\n\n    useEffect(() => {\n      if (previousId === undefined) return;\n\n      if (previousId !== currentStepId) {\n        const focusableElements = getFocusables(multiStepFormContentRef);\n\n        if (focusableElements.length) focusableElements[0].focus();\n      }\n    }, [currentStepId, previousId]);\n\n    useEffect(() => {\n      if (!progress) {\n        setFocus();\n      }\n    }, [progress]);\n\n    const isSmallOrAbove = useBreakpoint('sm');\n\n    const stepIndicator =\n      stepIndicatorProp === 'vertical' && !isSmallOrAbove ? 'horizontal' : stepIndicatorProp;\n\n    let areaDef = '';\n    switch (stepIndicator) {\n      case 'horizontal':\n        areaDef += '\"stepIndicator\" ';\n        if (currentStep.banners) areaDef += '\"banners\" ';\n        if (currentStep.description) areaDef += '\"description\" ';\n        areaDef += '\"content\"';\n        break;\n      case 'vertical':\n        if (currentStep.banners) areaDef += '\"banners stepIndicator\" ';\n        if (currentStep.description) areaDef += '\"description stepIndicator\" ';\n        areaDef += '\"content stepIndicator\"';\n        break;\n      default:\n        if (currentStep.banners) areaDef += '\"banners\" ';\n        if (currentStep.description) areaDef += '\"description\" ';\n        areaDef += '\"content\"';\n    }\n\n    return (\n      <StyledForm\n        ref={ref}\n        {...restProps}\n        aria-labelledby={heading ? headingId : undefined}\n        aria-describedby={currentStep.description ? descriptionId : undefined}\n        heading={!!heading}\n        actions={!!currentStep.actions}\n      >\n        {heading && (\n          <Text id={headingId} variant='h3'>\n            {heading}\n          </Text>\n        )}\n\n        <Grid\n          container={{\n            cols:\n              stepIndicator === 'vertical'\n                ? `2fr minmax(${contentWidth.xs}, 1fr)`\n                : 'minmax(0, 1fr)',\n            areas: areaDef,\n            gap: 2\n          }}\n          inert={progress ? '' : undefined}\n        >\n          {steps.length > 1 && (\n            <Grid item={{ area: 'stepIndicator' }}>\n              {stepIndicator === 'horizontal' && (\n                <Grid\n                  item={{ area: 'stepIndicator' }}\n                  as={HorizontalFormProgress}\n                  steps={steps}\n                  currentStepId={currentStepId}\n                />\n              )}\n              {stepIndicator === 'vertical' && (\n                <Grid\n                  item={{ area: 'stepIndicator' }}\n                  as={VerticalFormProgress}\n                  steps={steps}\n                  currentStepId={currentStepId}\n                />\n              )}\n              <VisuallyHiddenText aria-live='polite'>\n                {previousId !== undefined && previousId !== currentStepId\n                  ? t('step_changed_to_name', [currentStep.name])\n                  : ''}\n              </VisuallyHiddenText>\n            </Grid>\n          )}\n\n          {currentStep.banners && <Grid item={{ area: 'banners' }}>{currentStep.banners}</Grid>}\n\n          {currentStep.description && (\n            <Grid item={{ area: 'description' }}>\n              <HTML id={descriptionId} as='p' content={currentStep.description} />\n            </Grid>\n          )}\n\n          <Grid item={{ area: 'content' }} as={StyledFormContent} ref={multiStepFormContentRef}>\n            {currentStep.content}\n          </Grid>\n\n          <Progress\n            visible={!!progress}\n            focusOnVisible\n            placement='local'\n            message={typeof progress === 'string' ? progress : undefined}\n          />\n        </Grid>\n        {currentStep.actions && (\n          <Flex container={{ justify: 'between', alignItems: 'center' }}>\n            {currentStep.actions}\n          </Flex>\n        )}\n      </StyledForm>\n    );\n  }\n);\n\nexport default MultiStepForm;\n"]}

package/lib/components/MultiStepForm/MultiStepForm.types.d.ts

@@ -1,10 +1,13 @@
 import { ReactNode, Ref, MouseEventHandler } from 'react';
 import { BaseProps } from '../../types';
+import { ProgressProps } from '../Progress';
 export interface BaseFormProps extends BaseProps {
     /** Primary content area. */
     content: ReactNode;
     /** Region for Form Actions. */
     actions?: ReactNode;
+    /** If there is a progress state either on load, or after submit, you must indicate as such. A custom message is supported as well. */
+    progress?: boolean | ProgressProps['message'];
     /** Region for Banners above the Form. */
     banners?: ReactNode;
     /** A description of the form to be displayed above the controls. */
@@ -45,6 +48,8 @@ export default interface MultiStepFormProps {
      * @default 'horizontal'
      */
     stepIndicator?: 'horizontal' | 'vertical' | 'none';
+    /** Progress state for the form. */
+    progress?: BaseFormProps['progress'];
     /** The heading of the form. */
     heading?: BaseFormProps['heading'];
     /** Ref forwarded to the form element. */

package/lib/components/MultiStepForm/MultiStepForm.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiStepForm.types.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,4BAA4B;IAC5B,OAAO,EAAE,SAAS,CAAC;IACnB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,IAAI;IACnB,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,qCAAqC;IACrC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,sCAAsC;IACtC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACd,oEAAoE;IACpE,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,sEAAsE;IACtE,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,WAAW,kBAAkB;IACzC,6BAA6B;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IACnD,+BAA+B;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,yCAAyC;IACzC,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;CAC5B"}
+{"version":3,"file":"MultiStepForm.types.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,4BAA4B;IAC5B,OAAO,EAAE,SAAS,CAAC;IACnB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC9C,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,IAAI;IACnB,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,qCAAqC;IACrC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,sCAAsC;IACtC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACd,oEAAoE;IACpE,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,sEAAsE;IACtE,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,WAAW,kBAAkB;IACzC,6BAA6B;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IACnD,mCAAmC;IACnC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,+BAA+B;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,yCAAyC;IACzC,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;CAC5B"}

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

@@ -1 +1 @@
-{"version":3,"file":"MultiStepForm.types.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref, MouseEventHandler } from 'react';\n\nimport { BaseProps } from '../../types';\n\nexport interface BaseFormProps extends BaseProps {\n  /** Primary content area. */\n  content: ReactNode;\n  /** Region for Form Actions. */\n  actions?: ReactNode;\n  /** Region for Banners above the Form. */\n  banners?: ReactNode;\n  /** A description of the form to be displayed above the controls. */\n  description?: string;\n  /** The heading of the form. */\n  heading?: string;\n  /** Ref forwarded to the form element. */\n  ref?: Ref<HTMLFormElement>;\n}\n\nexport interface Step {\n  /** The id that is referenced by the Multi Step currentStepId prop. */\n  id: string;\n  /** The displayed name of the step. */\n  name: string;\n  /** A set of Action Buttons to render for the step. */\n  actions?: BaseFormProps['actions'];\n  /** Banners to render for the step */\n  banners?: BaseFormProps['banners'];\n  /** Content to render for the step. */\n  content?: BaseFormProps['content'];\n  /**\n   * Determines the size of the step indicator. Depth 0 is larger than depth 1.\n   * @default 0\n   */\n  depth?: 0 | 1;\n  /** A description of the form to be displayed above the controls. */\n  description?: BaseFormProps['description'];\n  /** Callback function that is called when a step marker is clicked. */\n  onMarkerClick?: MouseEventHandler;\n}\n\nexport default interface MultiStepFormProps {\n  /** Sets the current step. */\n  currentStepId: string;\n  /** Flat array of objects describing each step. */\n  steps: Step[];\n  /**\n   * MultiStepForm step indicator.\n   * @default 'horizontal'\n   */\n  stepIndicator?: 'horizontal' | 'vertical' | 'none';\n  /** The heading of the form. */\n  heading?: BaseFormProps['heading'];\n  /** Ref forwarded to the form element. */\n  ref?: BaseFormProps['ref'];\n}\n"]}
+{"version":3,"file":"MultiStepForm.types.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref, MouseEventHandler } from 'react';\n\nimport { BaseProps } from '../../types';\nimport { ProgressProps } from '../Progress';\n\nexport interface BaseFormProps extends BaseProps {\n  /** Primary content area. */\n  content: ReactNode;\n  /** Region for Form Actions. */\n  actions?: ReactNode;\n  /** If there is a progress state either on load, or after submit, you must indicate as such. A custom message is supported as well. */\n  progress?: boolean | ProgressProps['message'];\n  /** Region for Banners above the Form. */\n  banners?: ReactNode;\n  /** A description of the form to be displayed above the controls. */\n  description?: string;\n  /** The heading of the form. */\n  heading?: string;\n  /** Ref forwarded to the form element. */\n  ref?: Ref<HTMLFormElement>;\n}\n\nexport interface Step {\n  /** The id that is referenced by the Multi Step currentStepId prop. */\n  id: string;\n  /** The displayed name of the step. */\n  name: string;\n  /** A set of Action Buttons to render for the step. */\n  actions?: BaseFormProps['actions'];\n  /** Banners to render for the step */\n  banners?: BaseFormProps['banners'];\n  /** Content to render for the step. */\n  content?: BaseFormProps['content'];\n  /**\n   * Determines the size of the step indicator. Depth 0 is larger than depth 1.\n   * @default 0\n   */\n  depth?: 0 | 1;\n  /** A description of the form to be displayed above the controls. */\n  description?: BaseFormProps['description'];\n  /** Callback function that is called when a step marker is clicked. */\n  onMarkerClick?: MouseEventHandler;\n}\n\nexport default interface MultiStepFormProps {\n  /** Sets the current step. */\n  currentStepId: string;\n  /** Flat array of objects describing each step. */\n  steps: Step[];\n  /**\n   * MultiStepForm step indicator.\n   * @default 'horizontal'\n   */\n  stepIndicator?: 'horizontal' | 'vertical' | 'none';\n  /** Progress state for the form. */\n  progress?: BaseFormProps['progress'];\n  /** The heading of the form. */\n  heading?: BaseFormProps['heading'];\n  /** Ref forwarded to the form element. */\n  ref?: BaseFormProps['ref'];\n}\n"]}

package/lib/components/Progress/Progress.js

@@ -110,7 +110,7 @@ const Progress = forwardRef(({ variant = 'ring', placement = 'global', visible:
     if (placement !== 'inline') {
         indicator = (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 0.5 }, as: StyledProgress, placement: placement, children: [indicator, message && (_jsx(Text, { as: StyledMessage, variant: 'secondary', "aria-hidden": 'true', children: message }))] }));
     }
-    const content = hasBackdrop ? (_jsx(StyledProgressBackdrop, { open: isVisibleState, container: { direction: 'column' }, position: placement === 'global' ? 'fixed' : 'absolute', variant: 'light', alpha: 0.5, onAfterTransitionIn: onTransitionEndIn, onAfterTransitionOut: () => {
+    const content = hasBackdrop ? (_jsx(StyledProgressBackdrop, { open: isVisibleState, container: { direction: 'column' }, position: placement === 'global' ? 'fixed' : 'absolute', variant: 'light', alpha: 0.8, onAfterTransitionIn: onTransitionEndIn, onAfterTransitionOut: () => {
             setNullRender(true);
             onTransitionEndOut?.();
         }, children: indicator })) : (indicator);

package/lib/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, useState, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { ForwardProps } from '../../types';\nimport Text from '../Text';\nimport { useConfiguration, useConsolidatedRef, useI18n, useLiveLog } from '../../hooks';\nimport Flex from '../Flex';\n\nimport { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\nimport { StyledMessage, StyledProgress, StyledProgressBackdrop } from './Progress.styles';\n\nconst variantMap = {\n  ring: Ring,\n  bar: Bar,\n  ellipsis: Ellipsis\n} as const;\n\nconst delayDuration = 100;\nconst minVisibleDuration = 1000;\n\nconst Progress: FC<ProgressProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant = 'ring',\n      placement = 'global',\n      visible: visibleProp = true,\n      focusOnVisible = false,\n      delay = false,\n      onTransitionEndIn,\n      onTransitionEndOut,\n      value,\n      message,\n      liveConfig,\n      ...restProps\n    }: PropsWithoutRef<ProgressProps>,\n    ref: ProgressProps['ref']\n  ) => {\n    const t = useI18n();\n    const { portalTarget } = useConfiguration();\n    const { announcePolite } = useLiveLog();\n    const progressEl = useConsolidatedRef<HTMLDivElement>(ref);\n\n    // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.\n    const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);\n    const [nullRender, setNullRender] = useState(!isVisibleState);\n\n    // Refs for timestamps and timeout ids.\n    const timeBeforeVisibleRender = useRef<number>();\n    const timeAfterVisibleRender = useRef<number>();\n    const delayTimer = useRef<number>();\n    const minVisibleTimer = useRef<number>();\n\n    const hasBackdrop = placement === 'global' || placement === 'local';\n    const valString = typeof value === 'number' ? `${value}%` : undefined;\n    const label = message && valString ? `${message} - ${valString}` : message || valString;\n\n    const renderVisible = () => {\n      setIsVisibleState(true);\n      setNullRender(false);\n    };\n\n    const renderNotVisible = () => {\n      setIsVisibleState(false);\n      // With a transition, setNullRender needs to be called in Backdrop's onAfterTransitionOut.\n      if (!hasBackdrop) {\n        setNullRender(true);\n      }\n    };\n\n    // Handle render and visible state.\n    useEffect(\n      () => {\n        if (visibleProp) {\n          // Capture a timestamp for additional timers.\n          timeBeforeVisibleRender.current = Date.now();\n\n          if (delay) {\n            delayTimer.current = window.setTimeout(renderVisible, delayDuration);\n          } else {\n            renderVisible();\n          }\n        } else if (\n          // A timer was started to render visible either avoid it or render null.\n          delayTimer.current !== undefined\n        ) {\n          // If a timeout has started to render visible, clear it.\n          clearTimeout(delayTimer.current);\n\n          // If the indicator has already rendered visible.\n          if (timeAfterVisibleRender.current !== undefined) {\n            const timeElapsedSinceLastVisibleRender = Date.now() - timeAfterVisibleRender.current;\n\n            // If the indicator has been visible for long enough we can remove it.\n            if (timeElapsedSinceLastVisibleRender >= minVisibleDuration) {\n              renderNotVisible();\n            } else {\n              // Hold off removing until we hit the minimum visible time.\n              minVisibleTimer.current = window.setTimeout(\n                renderNotVisible,\n                minVisibleDuration - timeElapsedSinceLastVisibleRender\n              );\n            }\n          } else {\n            renderNotVisible();\n          }\n        } else {\n          renderNotVisible();\n        }\n      },\n      // visibleProp is the only triggerable dependency. Others values will be captured.\n      [visibleProp]\n    );\n\n    // Live announcement\n    useEffect(\n      () => {\n        if (liveConfig?.contextualLabel && isVisibleState) {\n          announcePolite({\n            message: `${liveConfig.contextualLabel}, ${label ?? t('loading')}`,\n            type: 'status'\n          });\n        }\n      },\n      // isVisibleState is the only triggerable dependency. Others values will be captured.\n      [isVisibleState]\n    );\n\n    // Auto focusing and render timestamping.\n    useEffect(\n      () => {\n        if (!nullRender && isVisibleState) {\n          // After a visible render set a timestamp for timers above.\n          timeAfterVisibleRender.current = Date.now();\n\n          if (focusOnVisible) progressEl.current?.focus();\n        }\n      },\n      // nullRender is the only triggerable dependency. Others values will be captured.\n      [nullRender]\n    );\n\n    if (nullRender) return null;\n\n    const CompVariant = variantMap[variant];\n\n    let indicator = (\n      <CompVariant\n        aria-label={typeof value !== 'number' ? label : t('loading')}\n        as={placement === 'inline' ? 'span' : undefined}\n        {...restProps}\n        placement={placement}\n        value={value}\n        aria-valuetext={typeof value === 'number' ? label : undefined}\n        ref={progressEl}\n        tabIndex={-1}\n      />\n    );\n\n    if (placement !== 'inline') {\n      indicator = (\n        <Flex\n          container={{ direction: 'column', alignItems: 'center', gap: 0.5 }}\n          as={StyledProgress}\n          placement={placement}\n        >\n          {indicator}\n          {message && (\n            <Text as={StyledMessage} variant='secondary' aria-hidden='true'>\n              {message}\n            </Text>\n          )}\n        </Flex>\n      );\n    }\n\n    const content = hasBackdrop ? (\n      <StyledProgressBackdrop\n        open={isVisibleState}\n        container={{ direction: 'column' }}\n        position={placement === 'global' ? 'fixed' : 'absolute'}\n        variant='light'\n        alpha={0.5}\n        onAfterTransitionIn={onTransitionEndIn}\n        onAfterTransitionOut={() => {\n          setNullRender(true);\n          onTransitionEndOut?.();\n        }}\n      >\n        {indicator}\n      </StyledProgressBackdrop>\n    ) : (\n      indicator\n    );\n\n    return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n  }\n);\n\nexport default Progress;\n"]}
+{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, useState, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { ForwardProps } from '../../types';\nimport Text from '../Text';\nimport { useConfiguration, useConsolidatedRef, useI18n, useLiveLog } from '../../hooks';\nimport Flex from '../Flex';\n\nimport { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\nimport { StyledMessage, StyledProgress, StyledProgressBackdrop } from './Progress.styles';\n\nconst variantMap = {\n  ring: Ring,\n  bar: Bar,\n  ellipsis: Ellipsis\n} as const;\n\nconst delayDuration = 100;\nconst minVisibleDuration = 1000;\n\nconst Progress: FC<ProgressProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant = 'ring',\n      placement = 'global',\n      visible: visibleProp = true,\n      focusOnVisible = false,\n      delay = false,\n      onTransitionEndIn,\n      onTransitionEndOut,\n      value,\n      message,\n      liveConfig,\n      ...restProps\n    }: PropsWithoutRef<ProgressProps>,\n    ref: ProgressProps['ref']\n  ) => {\n    const t = useI18n();\n    const { portalTarget } = useConfiguration();\n    const { announcePolite } = useLiveLog();\n    const progressEl = useConsolidatedRef<HTMLDivElement>(ref);\n\n    // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.\n    const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);\n    const [nullRender, setNullRender] = useState(!isVisibleState);\n\n    // Refs for timestamps and timeout ids.\n    const timeBeforeVisibleRender = useRef<number>();\n    const timeAfterVisibleRender = useRef<number>();\n    const delayTimer = useRef<number>();\n    const minVisibleTimer = useRef<number>();\n\n    const hasBackdrop = placement === 'global' || placement === 'local';\n    const valString = typeof value === 'number' ? `${value}%` : undefined;\n    const label = message && valString ? `${message} - ${valString}` : message || valString;\n\n    const renderVisible = () => {\n      setIsVisibleState(true);\n      setNullRender(false);\n    };\n\n    const renderNotVisible = () => {\n      setIsVisibleState(false);\n      // With a transition, setNullRender needs to be called in Backdrop's onAfterTransitionOut.\n      if (!hasBackdrop) {\n        setNullRender(true);\n      }\n    };\n\n    // Handle render and visible state.\n    useEffect(\n      () => {\n        if (visibleProp) {\n          // Capture a timestamp for additional timers.\n          timeBeforeVisibleRender.current = Date.now();\n\n          if (delay) {\n            delayTimer.current = window.setTimeout(renderVisible, delayDuration);\n          } else {\n            renderVisible();\n          }\n        } else if (\n          // A timer was started to render visible either avoid it or render null.\n          delayTimer.current !== undefined\n        ) {\n          // If a timeout has started to render visible, clear it.\n          clearTimeout(delayTimer.current);\n\n          // If the indicator has already rendered visible.\n          if (timeAfterVisibleRender.current !== undefined) {\n            const timeElapsedSinceLastVisibleRender = Date.now() - timeAfterVisibleRender.current;\n\n            // If the indicator has been visible for long enough we can remove it.\n            if (timeElapsedSinceLastVisibleRender >= minVisibleDuration) {\n              renderNotVisible();\n            } else {\n              // Hold off removing until we hit the minimum visible time.\n              minVisibleTimer.current = window.setTimeout(\n                renderNotVisible,\n                minVisibleDuration - timeElapsedSinceLastVisibleRender\n              );\n            }\n          } else {\n            renderNotVisible();\n          }\n        } else {\n          renderNotVisible();\n        }\n      },\n      // visibleProp is the only triggerable dependency. Others values will be captured.\n      [visibleProp]\n    );\n\n    // Live announcement\n    useEffect(\n      () => {\n        if (liveConfig?.contextualLabel && isVisibleState) {\n          announcePolite({\n            message: `${liveConfig.contextualLabel}, ${label ?? t('loading')}`,\n            type: 'status'\n          });\n        }\n      },\n      // isVisibleState is the only triggerable dependency. Others values will be captured.\n      [isVisibleState]\n    );\n\n    // Auto focusing and render timestamping.\n    useEffect(\n      () => {\n        if (!nullRender && isVisibleState) {\n          // After a visible render set a timestamp for timers above.\n          timeAfterVisibleRender.current = Date.now();\n\n          if (focusOnVisible) progressEl.current?.focus();\n        }\n      },\n      // nullRender is the only triggerable dependency. Others values will be captured.\n      [nullRender]\n    );\n\n    if (nullRender) return null;\n\n    const CompVariant = variantMap[variant];\n\n    let indicator = (\n      <CompVariant\n        aria-label={typeof value !== 'number' ? label : t('loading')}\n        as={placement === 'inline' ? 'span' : undefined}\n        {...restProps}\n        placement={placement}\n        value={value}\n        aria-valuetext={typeof value === 'number' ? label : undefined}\n        ref={progressEl}\n        tabIndex={-1}\n      />\n    );\n\n    if (placement !== 'inline') {\n      indicator = (\n        <Flex\n          container={{ direction: 'column', alignItems: 'center', gap: 0.5 }}\n          as={StyledProgress}\n          placement={placement}\n        >\n          {indicator}\n          {message && (\n            <Text as={StyledMessage} variant='secondary' aria-hidden='true'>\n              {message}\n            </Text>\n          )}\n        </Flex>\n      );\n    }\n\n    const content = hasBackdrop ? (\n      <StyledProgressBackdrop\n        open={isVisibleState}\n        container={{ direction: 'column' }}\n        position={placement === 'global' ? 'fixed' : 'absolute'}\n        variant='light'\n        alpha={0.8}\n        onAfterTransitionIn={onTransitionEndIn}\n        onAfterTransitionOut={() => {\n          setNullRender(true);\n          onTransitionEndOut?.();\n        }}\n      >\n        {indicator}\n      </StyledProgressBackdrop>\n    ) : (\n      indicator\n    );\n\n    return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n  }\n);\n\nexport default Progress;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,GAAG,EAKH,YAAY,EACZ,WAAW,EAIZ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAkB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIhD,MAAM,WAAW,oBAAoB;IACnC,sDAAsD;IACtD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAOD,eAAO,MAAM,qBAAqB,8GAMjC,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,GAAG,YAAY,CAyF5D,CAAC;AAIF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,GAAG,EAKH,YAAY,EACZ,WAAW,EAIZ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAkB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIhD,MAAM,WAAW,oBAAoB;IACnC,sDAAsD;IACtD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAOD,eAAO,MAAM,qBAAqB,8GAMjC,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,GAAG,YAAY,CA0F5D,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/lib/components/RadioCheckGroup/RadioCheckGroup.js

@@ -3,7 +3,7 @@ import { forwardRef, Children, cloneElement, useState, useEffect, useRef } from
 import styled from 'styled-components';
 import FormField from '../FormField';
 import { StyledFormField } from '../FormField/FormField';
-import Grid from '../Grid';
+import Flex from '../Flex';
 import { useElement, useUID } from '../../hooks';
 const defaultProps = {
     required: false,
@@ -54,10 +54,11 @@ const RadioCheckGroup = forwardRef((props, ref) => {
             name,
             disabled,
             ...restProps
-        }, children: _jsx(Grid, { ref: setOptionsEl, container: {
+        }, children: _jsx(Flex, { ref: setOptionsEl, container: {
+                direction: renderInline ? 'row' : 'column',
                 colGap: 2,
                 rowGap: variant === 'card' ? 1 : 0,
-                cols: renderInline ? 'repeat(auto-fit, minmax(1ch, max-content))' : '1fr'
+                wrap: 'wrap'
             }, children: Children.map(children, child => cloneElement(child, {
                 name,
                 disabled: disabled || child.props.disabled,

package/lib/components/RadioCheckGroup/RadioCheckGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  Children,\n  cloneElement,\n  ReactElement,\n  ChangeEvent,\n  useState,\n  useEffect,\n  useRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport FormField, { FormFieldProps } from '../FormField';\nimport { StyledFormField } from '../FormField/FormField';\nimport { FormControlProps } from '../FormControl';\nimport { RadioCheckProps } from '../RadioCheck';\nimport Grid from '../Grid';\nimport { useElement, useUID } from '../../hooks';\n\nexport interface RadioCheckGroupProps {\n  /** Accepts Checkboxes or RadioButtons as children. */\n  children: ReactElement | ReactElement[];\n  /**\n   * Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n   * Additionally, onChange can be passed to individual children.\n   * Both handlers will be called, child followed by group.\n   */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /**\n   * Layout field elements inline in a row.\n   * @default false\n   */\n  inline?: FormFieldProps['inline'];\n  /** Used to toggle the auto stacking feature of an inlined group.\n   * @default true\n   */\n  autoStack?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /**\n   * Controls the styling of the child RadioChecks.\n   * @default 'simple'\n   */\n  variant?: RadioCheckProps['variant'];\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst defaultProps = {\n  required: false,\n  disabled: false\n};\n\nexport const StyledRadioCheckGroup = styled.fieldset`\n  &[disabled] {\n    > ${StyledFormField} {\n      opacity: unset;\n    }\n  }\n`;\n\nconst RadioCheckGroup: FC<RadioCheckGroupProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RadioCheckGroupProps>, ref: RadioCheckGroupProps['ref']) => {\n    const uid = useUID();\n    const {\n      children,\n      name = uid,\n      disabled,\n      onChange,\n      readOnly,\n      inline = false,\n      autoStack = true,\n      variant = 'simple',\n      ...restProps\n    } = props;\n\n    const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n    const [renderInline, setRenderInline] = useState(inline);\n    const renderInlineRef = useRef(inline);\n    const minInlineWidth = useRef(0);\n\n    useEffect(() => {\n      if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n        const intersectionObserver = new IntersectionObserver(\n          entries => {\n            if (entries[0].intersectionRatio < 1) {\n              if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n              renderInlineRef.current = false;\n              setRenderInline(false);\n            }\n          },\n          { root: optionsEl, threshold: 1 }\n        );\n\n        const resizeObserver = new ResizeObserver(entries => {\n          if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n            renderInlineRef.current = true;\n            setRenderInline(true);\n          }\n        });\n\n        intersectionObserver.observe(optionsEl.lastChild as Element);\n        resizeObserver.observe(optionsEl);\n\n        return () => {\n          intersectionObserver.disconnect();\n          resizeObserver.disconnect();\n        };\n      }\n    }, [optionsEl, inline, autoStack]);\n\n    return (\n      <FormField\n        {...{\n          as: StyledRadioCheckGroup,\n          labelAs: 'legend',\n          ref,\n          name,\n          disabled,\n          ...restProps\n        }}\n      >\n        <Grid\n          ref={setOptionsEl}\n          container={{\n            colGap: 2,\n            rowGap: variant === 'card' ? 1 : 0,\n            cols: renderInline ? 'repeat(auto-fit, minmax(1ch, max-content))' : '1fr'\n          }}\n        >\n          {Children.map(children, child =>\n            cloneElement(child, {\n              name,\n              disabled: disabled || child.props.disabled,\n              readOnly: readOnly || child.props.readOnly,\n              variant,\n              onChange: onChange\n                ? (e: ChangeEvent<HTMLInputElement>) => {\n                    if (!(readOnly || child.props.readOnly)) {\n                      child.props.onChange?.(e);\n                      onChange(e);\n                    }\n                  }\n                : child.props.onChange\n            })\n          )}\n        </Grid>\n      </FormField>\n    );\n  }\n);\n\nRadioCheckGroup.defaultProps = defaultProps;\n\nexport default RadioCheckGroup;\n"]}
+{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  Children,\n  cloneElement,\n  ReactElement,\n  ChangeEvent,\n  useState,\n  useEffect,\n  useRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport FormField, { FormFieldProps } from '../FormField';\nimport { StyledFormField } from '../FormField/FormField';\nimport { FormControlProps } from '../FormControl';\nimport { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport { useElement, useUID } from '../../hooks';\n\nexport interface RadioCheckGroupProps {\n  /** Accepts Checkboxes or RadioButtons as children. */\n  children: ReactElement | ReactElement[];\n  /**\n   * Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n   * Additionally, onChange can be passed to individual children.\n   * Both handlers will be called, child followed by group.\n   */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /**\n   * Layout field elements inline in a row.\n   * @default false\n   */\n  inline?: FormFieldProps['inline'];\n  /** Used to toggle the auto stacking feature of an inlined group.\n   * @default true\n   */\n  autoStack?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /**\n   * Controls the styling of the child RadioChecks.\n   * @default 'simple'\n   */\n  variant?: RadioCheckProps['variant'];\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst defaultProps = {\n  required: false,\n  disabled: false\n};\n\nexport const StyledRadioCheckGroup = styled.fieldset`\n  &[disabled] {\n    > ${StyledFormField} {\n      opacity: unset;\n    }\n  }\n`;\n\nconst RadioCheckGroup: FC<RadioCheckGroupProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RadioCheckGroupProps>, ref: RadioCheckGroupProps['ref']) => {\n    const uid = useUID();\n    const {\n      children,\n      name = uid,\n      disabled,\n      onChange,\n      readOnly,\n      inline = false,\n      autoStack = true,\n      variant = 'simple',\n      ...restProps\n    } = props;\n\n    const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n    const [renderInline, setRenderInline] = useState(inline);\n    const renderInlineRef = useRef(inline);\n    const minInlineWidth = useRef(0);\n\n    useEffect(() => {\n      if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n        const intersectionObserver = new IntersectionObserver(\n          entries => {\n            if (entries[0].intersectionRatio < 1) {\n              if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n              renderInlineRef.current = false;\n              setRenderInline(false);\n            }\n          },\n          { root: optionsEl, threshold: 1 }\n        );\n\n        const resizeObserver = new ResizeObserver(entries => {\n          if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n            renderInlineRef.current = true;\n            setRenderInline(true);\n          }\n        });\n\n        intersectionObserver.observe(optionsEl.lastChild as Element);\n        resizeObserver.observe(optionsEl);\n\n        return () => {\n          intersectionObserver.disconnect();\n          resizeObserver.disconnect();\n        };\n      }\n    }, [optionsEl, inline, autoStack]);\n\n    return (\n      <FormField\n        {...{\n          as: StyledRadioCheckGroup,\n          labelAs: 'legend',\n          ref,\n          name,\n          disabled,\n          ...restProps\n        }}\n      >\n        <Flex\n          ref={setOptionsEl}\n          container={{\n            direction: renderInline ? 'row' : 'column',\n            colGap: 2,\n            rowGap: variant === 'card' ? 1 : 0,\n            wrap: 'wrap'\n          }}\n        >\n          {Children.map(children, child =>\n            cloneElement(child, {\n              name,\n              disabled: disabled || child.props.disabled,\n              readOnly: readOnly || child.props.readOnly,\n              variant,\n              onChange: onChange\n                ? (e: ChangeEvent<HTMLInputElement>) => {\n                    if (!(readOnly || child.props.readOnly)) {\n                      child.props.onChange?.(e);\n                      onChange(e);\n                    }\n                  }\n                : child.props.onChange\n            })\n          )}\n        </Flex>\n      </FormField>\n    );\n  }\n);\n\nRadioCheckGroup.defaultProps = defaultProps;\n\nexport default RadioCheckGroup;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ShortcutManager.d.ts","sourceRoot":"","sources":["../../../src/components/ShortcutManager/ShortcutManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAM7D,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGpF;;;;GAIG;AACH,eAAO,MAAM,cAAc,eAAgB,cAAc,EAAE,KAAG,IAY7D,CAAC;AAUF,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAmE5D,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ShortcutManager.d.ts","sourceRoot":"","sources":["../../../src/components/ShortcutManager/ShortcutManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAM7D,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGpF;;;;GAIG;AACH,eAAO,MAAM,cAAc,eAAgB,cAAc,EAAE,KAAG,IAY7D,CAAC;AAUF,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAsE5D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/ShortcutManager/ShortcutManager.js

@@ -75,7 +75,10 @@ const ShortcutManager = ({ children, target, bindings: customBindings = {} }) =>
             shortcutInstance.reset();
             shortcutInstance.add(bindings.map(({ action, shortcut }) => ({
                 shortcut,
-                handler: e => dispatchShortcutEvent(action, e)
+                handler: e => {
+                    e.preventDefault();
+                    dispatchShortcutEvent(action, e);
+                }
             })));
         }
     }, [JSON.stringify(bindings)]);

package/lib/components/ShortcutManager/ShortcutManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutManager.js","sourceRoot":"","sources":["../../../src/components/ShortcutManager/ShortcutManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useEffect, useRef } from 'react';\nimport { Shortcuts } from 'shortcuts';\n\nimport { useAfterInitialEffect, useSimpleStore } from '../../hooks';\nimport { hasProp } from '../../utils';\n\nimport type { ShortcutAction, ShortcutManagerProps } from './ShortcutManager.types';\nimport { type ActionDefinitions, actionStore } from './Store';\n\n/**\n * Function to register an action triggerable using a shortcut. All actions must be registered before\n * binding a callback.\n * @param actions actions with definitions to be registered.\n */\nexport const registerAction = (...actions: ShortcutAction[]): void => {\n  actionStore.setStore(store => {\n    let newStore = store;\n    actions.forEach(({ id, defaultKeyBinding: defaultShortcut }) => {\n      if (!hasProp(store, id))\n        newStore = {\n          ...(newStore as ActionDefinitions),\n          [id]: { defaultKeyBinding: defaultShortcut, keyBinding: defaultShortcut }\n        };\n    });\n    return newStore;\n  });\n};\n\nconst dispatchShortcutEvent = (actionId: ShortcutAction['id'], e: KeyboardEvent) => {\n  const shortcutEvent = new CustomEvent('shortcut', {\n    bubbles: true,\n    detail: { actionId }\n  });\n  e.target?.dispatchEvent(shortcutEvent);\n};\n\nconst ShortcutManager: FunctionComponent<ShortcutManagerProps> = ({\n  children,\n  target,\n  bindings: customBindings = {}\n}) => {\n  const shortcutsRef = useRef<Shortcuts>();\n\n  const [bindings, setBindings] = useSimpleStore(actionStore, store =>\n    Object.entries(store).map(([actionId, actionDefinition]) => ({\n      action: actionId,\n      shortcut: actionDefinition.keyBinding\n    }))\n  );\n\n  useEffect(() => {\n    setBindings(store => {\n      let newStore = store;\n      Object.entries(customBindings).forEach(([actionId, keyBinding]) => {\n        newStore = { ...newStore, [actionId]: { ...newStore[actionId], keyBinding } };\n      });\n      return newStore;\n    });\n  }, [JSON.stringify(customBindings)]);\n\n  useEffect(() => {\n    shortcutsRef.current = new Shortcuts({\n      target,\n      shouldHandleEvent: e =>\n        // both 'keydown' and 'keypress' events are handled by default ('shortcuts' bug?)\n        e.type === 'keydown' &&\n        !e.defaultPrevented &&\n        // don't process event during typing letters/digits into inputs without modifier keys\n        !(\n          e.target instanceof HTMLElement &&\n          ['input', 'textarea'].includes(e.target.nodeName.toLowerCase()) &&\n          e.key.match(/a-zA-Z0-9/) &&\n          !['Control', 'Meta'].some(modifier => e.getModifierState(modifier))\n        ),\n      shortcuts: bindings.map(({ action, shortcut }) => ({\n        shortcut,\n        handler: e => {\n          e.preventDefault();\n          dispatchShortcutEvent(action, e);\n        }\n      }))\n    });\n\n    return () => {\n      shortcutsRef.current?.reset();\n      shortcutsRef.current = undefined;\n    };\n  }, [target]);\n\n  useAfterInitialEffect(() => {\n    const shortcutInstance = shortcutsRef.current;\n    if (shortcutInstance) {\n      shortcutInstance.reset();\n      shortcutInstance.add(\n        bindings.map(({ action, shortcut }) => ({\n          shortcut,\n          handler: e => dispatchShortcutEvent(action, e)\n        }))\n      );\n    }\n  }, [JSON.stringify(bindings)]);\n\n  return <>{children}</>;\n};\n\nexport default ShortcutManager;\n"]}
+{"version":3,"file":"ShortcutManager.js","sourceRoot":"","sources":["../../../src/components/ShortcutManager/ShortcutManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useEffect, useRef } from 'react';\nimport { Shortcuts } from 'shortcuts';\n\nimport { useAfterInitialEffect, useSimpleStore } from '../../hooks';\nimport { hasProp } from '../../utils';\n\nimport type { ShortcutAction, ShortcutManagerProps } from './ShortcutManager.types';\nimport { type ActionDefinitions, actionStore } from './Store';\n\n/**\n * Function to register an action triggerable using a shortcut. All actions must be registered before\n * binding a callback.\n * @param actions actions with definitions to be registered.\n */\nexport const registerAction = (...actions: ShortcutAction[]): void => {\n  actionStore.setStore(store => {\n    let newStore = store;\n    actions.forEach(({ id, defaultKeyBinding: defaultShortcut }) => {\n      if (!hasProp(store, id))\n        newStore = {\n          ...(newStore as ActionDefinitions),\n          [id]: { defaultKeyBinding: defaultShortcut, keyBinding: defaultShortcut }\n        };\n    });\n    return newStore;\n  });\n};\n\nconst dispatchShortcutEvent = (actionId: ShortcutAction['id'], e: KeyboardEvent) => {\n  const shortcutEvent = new CustomEvent('shortcut', {\n    bubbles: true,\n    detail: { actionId }\n  });\n  e.target?.dispatchEvent(shortcutEvent);\n};\n\nconst ShortcutManager: FunctionComponent<ShortcutManagerProps> = ({\n  children,\n  target,\n  bindings: customBindings = {}\n}) => {\n  const shortcutsRef = useRef<Shortcuts>();\n\n  const [bindings, setBindings] = useSimpleStore(actionStore, store =>\n    Object.entries(store).map(([actionId, actionDefinition]) => ({\n      action: actionId,\n      shortcut: actionDefinition.keyBinding\n    }))\n  );\n\n  useEffect(() => {\n    setBindings(store => {\n      let newStore = store;\n      Object.entries(customBindings).forEach(([actionId, keyBinding]) => {\n        newStore = { ...newStore, [actionId]: { ...newStore[actionId], keyBinding } };\n      });\n      return newStore;\n    });\n  }, [JSON.stringify(customBindings)]);\n\n  useEffect(() => {\n    shortcutsRef.current = new Shortcuts({\n      target,\n      shouldHandleEvent: e =>\n        // both 'keydown' and 'keypress' events are handled by default ('shortcuts' bug?)\n        e.type === 'keydown' &&\n        !e.defaultPrevented &&\n        // don't process event during typing letters/digits into inputs without modifier keys\n        !(\n          e.target instanceof HTMLElement &&\n          ['input', 'textarea'].includes(e.target.nodeName.toLowerCase()) &&\n          e.key.match(/a-zA-Z0-9/) &&\n          !['Control', 'Meta'].some(modifier => e.getModifierState(modifier))\n        ),\n      shortcuts: bindings.map(({ action, shortcut }) => ({\n        shortcut,\n        handler: e => {\n          e.preventDefault();\n          dispatchShortcutEvent(action, e);\n        }\n      }))\n    });\n\n    return () => {\n      shortcutsRef.current?.reset();\n      shortcutsRef.current = undefined;\n    };\n  }, [target]);\n\n  useAfterInitialEffect(() => {\n    const shortcutInstance = shortcutsRef.current;\n    if (shortcutInstance) {\n      shortcutInstance.reset();\n      shortcutInstance.add(\n        bindings.map(({ action, shortcut }) => ({\n          shortcut,\n          handler: e => {\n            e.preventDefault();\n            dispatchShortcutEvent(action, e);\n          }\n        }))\n      );\n    }\n  }, [JSON.stringify(bindings)]);\n\n  return <>{children}</>;\n};\n\nexport default ShortcutManager;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,eAAO,MAAM,UAAU,yHAgBtB,CAAC;AAIF;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA0FrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,eAAO,MAAM,UAAU,yHAgBtB,CAAC;AAIF;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAiGrD,CAAC;AAEF,eAAe,IAAI,CAAC"}