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

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":"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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, { 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/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,GAAG,EAEH,YAAY,EAEZ,SAAS,EAIV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAStD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAC9C,MAAM,WAAW,YAAY,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS;IAChF,2IAA2I;IAC3I,MAAM,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACtD;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAC9C;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yGAAyG;IACzG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAQD,QAAA,MAAM,OAAO,EAAE,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,EAC/C,KAAK,EAAE,YAAY,CAAC,SAAS,CAAC,GAAG,YAAY,KAC1C,YAAY,GAAG,IAwJnB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,GAAG,EAEH,YAAY,EAEZ,SAAS,EAIV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAUtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAC9C,MAAM,WAAW,YAAY,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS;IAChF,2IAA2I;IAC3I,MAAM,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACtD;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAC9C;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yGAAyG;IACzG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAQD,QAAA,MAAM,OAAO,EAAE,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,EAC/C,KAAK,EAAE,YAAY,CAAC,SAAS,CAAC,GAAG,YAAY,KAC1C,YAAY,GAAG,IA6JnB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Popover/Popover.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useRef, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
-import { useAfterInitialEffect, useConfiguration, useConsolidatedRef, useElement, useUID } from '../../hooks';
+import { useAfterInitialEffect, useConfiguration, useConsolidatedRef, useElement, useModalContext, useUID } from '../../hooks';
 import { windowIsAvailable } from '../../utils';
 import { PopoverManagerContext } from './PopoverContext';
 import { StyledPopover, StyledPopoverArrow } from './Popover.styles';
@@ -12,9 +12,11 @@ const delays = {
     short: 500,
     long: 1000
 };
-const Popover = forwardRef(({ show = true, portal = false, target, placement = 'bottom', strategy = 'fixed', style, modifiers = [], arrow = false, groupId, showDelay = 'none', hideDelay = 'none', hideOnTargetHidden = false, children, onHide, ...restProps }, ref) => {
+const Popover = forwardRef(({ show = true, portal: portalProp, target, placement = 'bottom', strategy = 'fixed', style, modifiers = [], arrow = false, groupId, showDelay = 'none', hideDelay = 'none', hideOnTargetHidden = false, children, onHide, ...restProps }, ref) => {
     const { portalTarget: configurationPortal } = useConfiguration();
     const { checkActive, setActive, popovers } = useContext(PopoverManagerContext);
+    const { initialized: inModal, portalTarget: modalTarget } = useModalContext();
+    const portal = portalProp ?? inModal;
     const [, setPopperEl] = useElement();
     const popperRef = useConsolidatedRef(ref, setPopperEl);
     const arrowRef = useRef(null);
@@ -22,7 +24,10 @@ const Popover = forwardRef(({ show = true, portal = false, target, placement = '
     const [showPopover, setShowPopover] = useState(show);
     const timeout = useRef();
     const uid = useUID();
-    const portalTarget = typeof portal === 'boolean' ? configurationPortal : portal;
+    let portalTarget = typeof portal === 'boolean' ? configurationPortal : portal;
+    if (inModal) {
+        portalTarget = modalTarget ?? document.body;
+    }
     const memoedModifiers = useMemo(() => {
         const flipEnabled = !!modifiers
             .slice()

package/lib/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useContext,\n  PropsWithoutRef,\n  Ref,\n  CSSProperties,\n  ReactElement,\n  useRef,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useState\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper, PopperProps } from 'react-popper';\nimport { VirtualElement } from '@popperjs/core';\nimport { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport {\n  useAfterInitialEffect,\n  useConfiguration,\n  useConsolidatedRef,\n  useElement,\n  useUID\n} from '../../hooks';\nimport { windowIsAvailable } from '../../utils';\nimport { ConfigurationProps } from '../Configuration';\n\nimport { PopoverManagerContext } from './PopoverContext';\nimport { StyledPopover, StyledPopoverArrow } from './Popover.styles';\nimport { placeAndContain } from './modifiers';\n\nexport type Delay = 'none' | 'short' | 'long';\nexport interface PopoverProps<Modifiers extends string = string> extends BaseProps {\n  /** The DOM element or [virtual element](https://popper.js.org/docs/v2/virtual-elements) that the Popover is positioned in reference to. */\n  target: Element | VirtualElement | null;\n  /**\n   * If true, the Popover will be visible.\n   * @default true\n   */\n  show?: boolean;\n  /**\n   * If true, the Popover will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n   * @default false\n   */\n  portal?: boolean | ConfigurationProps['portalTarget'];\n  /**\n   * Delay on showing the Popover.\n   * @default 'none'\n   */\n  showDelay?: Delay;\n  /**\n   * Delay on hiding the Popover.\n   * @default 'none'\n   */\n  hideDelay?: Delay;\n  /**\n   * [React Popper Placement](https://popper.js.org/react-popper/v2/render-props/#placement)\n   * @default 'bottom'\n   */\n  placement?: PopperProps<Modifiers>['placement'];\n  /**\n   * [React Popper Strategy](https://popper.js.org/react-popper/v2/render-props/#strategy)\n   * @default 'absolute'\n   */\n  strategy?: PopperProps<Modifiers>['strategy'];\n  /**\n   * [React Popper Modifiers](https://popper.js.org/react-popper/v2/render-props/#modifiers)\n   * @default []\n   */\n  modifiers?: PopperProps<Modifiers>['modifiers'];\n  /**\n   * If true, an arrow will visually identify from which element the Popover is rendered.\n   * @default false\n   */\n  arrow?: boolean;\n  /** The group that the Popover belongs to. Popovers in the same group will be closed when others open. */\n  groupId?: string;\n  /**\n   * If true, the Popover will be visibly hidden when its target leaves the viewport.\n   * @default false\n   */\n  hideOnTargetHidden?: boolean;\n  /** Callback that runs when the popover is hidden */\n  onHide?: () => void;\n  /** The content of the Popover. */\n  children: ReactNode;\n  /** The ref of the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst delays = {\n  none: 0,\n  short: 500,\n  long: 1000\n};\n\nconst Popover: <Modifiers extends string = string>(\n  props: PopoverProps<Modifiers> & ForwardProps\n) => ReactElement | null = forwardRef(\n  (\n    {\n      show = true,\n      portal = false,\n      target,\n      placement = 'bottom',\n      strategy = 'fixed',\n      style,\n      modifiers = [],\n      arrow = false,\n      groupId,\n      showDelay = 'none',\n      hideDelay = 'none',\n      hideOnTargetHidden = false,\n      children,\n      onHide,\n      ...restProps\n    }: PropsWithoutRef<PopoverProps> & { style?: CSSProperties },\n    ref: PopoverProps['ref']\n  ) => {\n    const { portalTarget: configurationPortal } = useConfiguration();\n    const { checkActive, setActive, popovers } = useContext(PopoverManagerContext);\n    const [, setPopperEl] = useElement<HTMLDivElement>();\n    const popperRef = useConsolidatedRef<HTMLDivElement>(ref, setPopperEl);\n    const arrowRef = useRef<HTMLDivElement>(null);\n    const forceUpdateRef = useRef<() => void>();\n    const [showPopover, setShowPopover] = useState(show);\n    const timeout = useRef<number>();\n    const uid = useUID();\n\n    const portalTarget = typeof portal === 'boolean' ? configurationPortal : portal;\n\n    const memoedModifiers = useMemo(() => {\n      const flipEnabled = !!modifiers\n        .slice()\n        .reverse()\n        .find(modifier => modifier.name === 'flip' && modifier.enabled !== undefined)?.enabled;\n\n      return [\n        {\n          name: 'computeStyles',\n          options: {\n            gpuAcceleration: false\n          }\n        },\n        {\n          name: 'offset',\n          options: {\n            offset: [0, arrow ? 5.5 : 2]\n          }\n        },\n        { name: 'hide', enabled: hideOnTargetHidden },\n        { name: 'arrow', enabled: arrow, options: { element: arrowRef.current } },\n        {\n          name: 'preventOverflow',\n          options: {\n            tether: !modifiers.find(m => m.name === 'sameWidth'),\n            padding: 16\n          }\n        },\n        {\n          ...placeAndContain,\n          enabled: !flipEnabled\n        },\n        ...modifiers\n      ];\n    }, [arrow, hideOnTargetHidden, modifiers]);\n\n    const offset = useMemo(() => {\n      const offsetModifier = [...memoedModifiers]\n        .reverse()\n        .find(m => m.name === 'offset' && m.enabled !== false) as OffsetModifier | undefined;\n      return Array.isArray(offsetModifier?.options?.offset)\n        ? offsetModifier?.options?.offset[1] ?? 0\n        : 0;\n    }, [memoedModifiers]);\n\n    const { styles, attributes, forceUpdate } = usePopper(target, popperRef.current, {\n      placement,\n      strategy,\n      modifiers: memoedModifiers\n    });\n\n    if (forceUpdate) forceUpdateRef.current = forceUpdate;\n\n    useEffect(() => {\n      const controller = new AbortController();\n\n      const observer = new ResizeObserver(() => {\n        requestAnimationFrame(() => {\n          if (!controller.signal.aborted) {\n            forceUpdateRef.current?.();\n          }\n        });\n      });\n\n      if (popperRef.current) observer.observe(popperRef.current);\n      if (target instanceof Element) observer.observe(target);\n\n      return () => {\n        controller.abort();\n        observer.disconnect();\n      };\n    });\n\n    useEffect(() => {\n      if (groupId && show) setActive(uid, groupId);\n\n      if (windowIsAvailable) {\n        if (timeout.current) clearTimeout(timeout.current);\n        timeout.current = window.setTimeout(() => {\n          setShowPopover(show);\n        }, delays[show ? showDelay : hideDelay]);\n      } else {\n        setShowPopover(show);\n      }\n    }, [show]);\n\n    useEffect(() => {\n      return () => clearTimeout(timeout.current);\n    }, []);\n\n    useAfterInitialEffect(() => {\n      if (!showPopover) {\n        onHide?.();\n      }\n    }, [showPopover]);\n\n    useEffect(() => {\n      if (groupId && popovers[groupId] && popovers[groupId] !== uid) {\n        setShowPopover(false);\n      }\n    }, [groupId ? popovers[groupId] : undefined]);\n\n    const content = (\n      <StyledPopover\n        {...restProps}\n        offset={offset}\n        ref={popperRef}\n        style={{ ...style, ...styles.popper }}\n        {...attributes.popper}\n      >\n        {arrow && <StyledPopoverArrow ref={arrowRef} style={{ ...styles.arrow }} />}\n        {children}\n      </StyledPopover>\n    );\n\n    if (!target || !showPopover || (groupId && !checkActive(uid, groupId))) return null;\n\n    return portal && portalTarget ? createPortal(content, portalTarget) : content;\n  }\n);\n\nexport default Popover;\n"]}
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useContext,\n  PropsWithoutRef,\n  Ref,\n  CSSProperties,\n  ReactElement,\n  useRef,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useState\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper, PopperProps } from 'react-popper';\nimport { VirtualElement } from '@popperjs/core';\nimport { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport {\n  useAfterInitialEffect,\n  useConfiguration,\n  useConsolidatedRef,\n  useElement,\n  useModalContext,\n  useUID\n} from '../../hooks';\nimport { windowIsAvailable } from '../../utils';\nimport { ConfigurationProps } from '../Configuration';\n\nimport { PopoverManagerContext } from './PopoverContext';\nimport { StyledPopover, StyledPopoverArrow } from './Popover.styles';\nimport { placeAndContain } from './modifiers';\n\nexport type Delay = 'none' | 'short' | 'long';\nexport interface PopoverProps<Modifiers extends string = string> extends BaseProps {\n  /** The DOM element or [virtual element](https://popper.js.org/docs/v2/virtual-elements) that the Popover is positioned in reference to. */\n  target: Element | VirtualElement | null;\n  /**\n   * If true, the Popover will be visible.\n   * @default true\n   */\n  show?: boolean;\n  /**\n   * If true, the Popover will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n   * @default false\n   */\n  portal?: boolean | ConfigurationProps['portalTarget'];\n  /**\n   * Delay on showing the Popover.\n   * @default 'none'\n   */\n  showDelay?: Delay;\n  /**\n   * Delay on hiding the Popover.\n   * @default 'none'\n   */\n  hideDelay?: Delay;\n  /**\n   * [React Popper Placement](https://popper.js.org/react-popper/v2/render-props/#placement)\n   * @default 'bottom'\n   */\n  placement?: PopperProps<Modifiers>['placement'];\n  /**\n   * [React Popper Strategy](https://popper.js.org/react-popper/v2/render-props/#strategy)\n   * @default 'absolute'\n   */\n  strategy?: PopperProps<Modifiers>['strategy'];\n  /**\n   * [React Popper Modifiers](https://popper.js.org/react-popper/v2/render-props/#modifiers)\n   * @default []\n   */\n  modifiers?: PopperProps<Modifiers>['modifiers'];\n  /**\n   * If true, an arrow will visually identify from which element the Popover is rendered.\n   * @default false\n   */\n  arrow?: boolean;\n  /** The group that the Popover belongs to. Popovers in the same group will be closed when others open. */\n  groupId?: string;\n  /**\n   * If true, the Popover will be visibly hidden when its target leaves the viewport.\n   * @default false\n   */\n  hideOnTargetHidden?: boolean;\n  /** Callback that runs when the popover is hidden */\n  onHide?: () => void;\n  /** The content of the Popover. */\n  children: ReactNode;\n  /** The ref of the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst delays = {\n  none: 0,\n  short: 500,\n  long: 1000\n};\n\nconst Popover: <Modifiers extends string = string>(\n  props: PopoverProps<Modifiers> & ForwardProps\n) => ReactElement | null = forwardRef(\n  (\n    {\n      show = true,\n      portal: portalProp,\n      target,\n      placement = 'bottom',\n      strategy = 'fixed',\n      style,\n      modifiers = [],\n      arrow = false,\n      groupId,\n      showDelay = 'none',\n      hideDelay = 'none',\n      hideOnTargetHidden = false,\n      children,\n      onHide,\n      ...restProps\n    }: PropsWithoutRef<PopoverProps> & { style?: CSSProperties },\n    ref: PopoverProps['ref']\n  ) => {\n    const { portalTarget: configurationPortal } = useConfiguration();\n    const { checkActive, setActive, popovers } = useContext(PopoverManagerContext);\n    const { initialized: inModal, portalTarget: modalTarget } = useModalContext();\n    const portal = portalProp ?? inModal;\n    const [, setPopperEl] = useElement<HTMLDivElement>();\n    const popperRef = useConsolidatedRef<HTMLDivElement>(ref, setPopperEl);\n    const arrowRef = useRef<HTMLDivElement>(null);\n    const forceUpdateRef = useRef<() => void>();\n    const [showPopover, setShowPopover] = useState(show);\n    const timeout = useRef<number>();\n    const uid = useUID();\n\n    let portalTarget = typeof portal === 'boolean' ? configurationPortal : portal;\n    if (inModal) {\n      portalTarget = modalTarget ?? document.body;\n    }\n\n    const memoedModifiers = useMemo(() => {\n      const flipEnabled = !!modifiers\n        .slice()\n        .reverse()\n        .find(modifier => modifier.name === 'flip' && modifier.enabled !== undefined)?.enabled;\n\n      return [\n        {\n          name: 'computeStyles',\n          options: {\n            gpuAcceleration: false\n          }\n        },\n        {\n          name: 'offset',\n          options: {\n            offset: [0, arrow ? 5.5 : 2]\n          }\n        },\n        { name: 'hide', enabled: hideOnTargetHidden },\n        { name: 'arrow', enabled: arrow, options: { element: arrowRef.current } },\n        {\n          name: 'preventOverflow',\n          options: {\n            tether: !modifiers.find(m => m.name === 'sameWidth'),\n            padding: 16\n          }\n        },\n        {\n          ...placeAndContain,\n          enabled: !flipEnabled\n        },\n        ...modifiers\n      ];\n    }, [arrow, hideOnTargetHidden, modifiers]);\n\n    const offset = useMemo(() => {\n      const offsetModifier = [...memoedModifiers]\n        .reverse()\n        .find(m => m.name === 'offset' && m.enabled !== false) as OffsetModifier | undefined;\n      return Array.isArray(offsetModifier?.options?.offset)\n        ? offsetModifier?.options?.offset[1] ?? 0\n        : 0;\n    }, [memoedModifiers]);\n\n    const { styles, attributes, forceUpdate } = usePopper(target, popperRef.current, {\n      placement,\n      strategy,\n      modifiers: memoedModifiers\n    });\n\n    if (forceUpdate) forceUpdateRef.current = forceUpdate;\n\n    useEffect(() => {\n      const controller = new AbortController();\n\n      const observer = new ResizeObserver(() => {\n        requestAnimationFrame(() => {\n          if (!controller.signal.aborted) {\n            forceUpdateRef.current?.();\n          }\n        });\n      });\n\n      if (popperRef.current) observer.observe(popperRef.current);\n      if (target instanceof Element) observer.observe(target);\n\n      return () => {\n        controller.abort();\n        observer.disconnect();\n      };\n    });\n\n    useEffect(() => {\n      if (groupId && show) setActive(uid, groupId);\n\n      if (windowIsAvailable) {\n        if (timeout.current) clearTimeout(timeout.current);\n        timeout.current = window.setTimeout(() => {\n          setShowPopover(show);\n        }, delays[show ? showDelay : hideDelay]);\n      } else {\n        setShowPopover(show);\n      }\n    }, [show]);\n\n    useEffect(() => {\n      return () => clearTimeout(timeout.current);\n    }, []);\n\n    useAfterInitialEffect(() => {\n      if (!showPopover) {\n        onHide?.();\n      }\n    }, [showPopover]);\n\n    useEffect(() => {\n      if (groupId && popovers[groupId] && popovers[groupId] !== uid) {\n        setShowPopover(false);\n      }\n    }, [groupId ? popovers[groupId] : undefined]);\n\n    const content = (\n      <StyledPopover\n        {...restProps}\n        offset={offset}\n        ref={popperRef}\n        style={{ ...style, ...styles.popper }}\n        {...attributes.popper}\n      >\n        {arrow && <StyledPopoverArrow ref={arrowRef} style={{ ...styles.arrow }} />}\n        {children}\n      </StyledPopover>\n    );\n\n    if (!target || !showPopover || (groupId && !checkActive(uid, groupId))) return null;\n\n    return portal && portalTarget ? createPortal(content, portalTarget) : content;\n  }\n);\n\nexport default Popover;\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":";AAAA,OAAO,EAAE,UAAU,EAAuB,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAGzC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACxF,OAAO,IAAI,MAAM,SAAS,CAAC;AAG3B,OAAO,GAAG,MAAM,OAAO,CAAC;AACxB,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE1F,MAAM,UAAU,GAAG;IACjB,IAAI,EAAE,IAAI;IACV,GAAG,EAAE,GAAG;IACR,QAAQ,EAAE,QAAQ;CACV,CAAC;AAEX,MAAM,aAAa,GAAG,GAAG,CAAC;AAC1B,MAAM,kBAAkB,GAAG,IAAI,CAAC;AAEhC,MAAM,QAAQ,GAAqC,UAAU,CAC3D,CACE,EACE,OAAO,GAAG,MAAM,EAChB,SAAS,GAAG,QAAQ,EACpB,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,cAAc,GAAG,KAAK,EACtB,KAAK,GAAG,KAAK,EACb,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,EACL,OAAO,EACP,UAAU,EACV,GAAG,SAAS,EACmB,EACjC,GAAyB,EACzB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC5C,MAAM,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,CAAC;IACxC,MAAM,UAAU,GAAG,kBAAkB,CAAiB,GAAG,CAAC,CAAC;IAE3D,wJAAwJ;IACxJ,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAClF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,cAAc,CAAC,CAAC;IAE9D,uCAAuC;IACvC,MAAM,uBAAuB,GAAG,MAAM,EAAU,CAAC;IACjD,MAAM,sBAAsB,GAAG,MAAM,EAAU,CAAC;IAChD,MAAM,UAAU,GAAG,MAAM,EAAU,CAAC;IACpC,MAAM,eAAe,GAAG,MAAM,EAAU,CAAC;IAEzC,MAAM,WAAW,GAAG,SAAS,KAAK,QAAQ,IAAI,SAAS,KAAK,OAAO,CAAC;IACpE,MAAM,SAAS,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IACtE,MAAM,KAAK,GAAG,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG,OAAO,MAAM,SAAS,EAAE,CAAC,CAAC,CAAC,OAAO,IAAI,SAAS,CAAC;IAExF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACxB,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,iBAAiB,CAAC,KAAK,CAAC,CAAC;QACzB,0FAA0F;QAC1F,IAAI,CAAC,WAAW,EAAE;YAChB,aAAa,CAAC,IAAI,CAAC,CAAC;SACrB;IACH,CAAC,CAAC;IAEF,mCAAmC;IACnC,SAAS,CACP,GAAG,EAAE;QACH,IAAI,WAAW,EAAE;YACf,6CAA6C;YAC7C,uBAAuB,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YAE7C,IAAI,KAAK,EAAE;gBACT,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;aACtE;iBAAM;gBACL,aAAa,EAAE,CAAC;aACjB;SACF;aAAM;QACL,wEAAwE;QACxE,UAAU,CAAC,OAAO,KAAK,SAAS,EAChC;YACA,wDAAwD;YACxD,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAEjC,iDAAiD;YACjD,IAAI,sBAAsB,CAAC,OAAO,KAAK,SAAS,EAAE;gBAChD,MAAM,iCAAiC,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,sBAAsB,CAAC,OAAO,CAAC;gBAEtF,sEAAsE;gBACtE,IAAI,iCAAiC,IAAI,kBAAkB,EAAE;oBAC3D,gBAAgB,EAAE,CAAC;iBACpB;qBAAM;oBACL,2DAA2D;oBAC3D,eAAe,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CACzC,gBAAgB,EAChB,kBAAkB,GAAG,iCAAiC,CACvD,CAAC;iBACH;aACF;iBAAM;gBACL,gBAAgB,EAAE,CAAC;aACpB;SACF;aAAM;YACL,gBAAgB,EAAE,CAAC;SACpB;IACH,CAAC;IACD,kFAAkF;IAClF,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,oBAAoB;IACpB,SAAS,CACP,GAAG,EAAE;QACH,IAAI,UAAU,EAAE,eAAe,IAAI,cAAc,EAAE;YACjD,cAAc,CAAC;gBACb,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,KAAK,KAAK,IAAI,CAAC,CAAC,SAAS,CAAC,EAAE;gBAClE,IAAI,EAAE,QAAQ;aACf,CAAC,CAAC;SACJ;IACH,CAAC;IACD,qFAAqF;IACrF,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,yCAAyC;IACzC,SAAS,CACP,GAAG,EAAE;QACH,IAAI,CAAC,UAAU,IAAI,cAAc,EAAE;YACjC,2DAA2D;YAC3D,sBAAsB,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YAE5C,IAAI,cAAc;gBAAE,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;SACjD;IACH,CAAC;IACD,iFAAiF;IACjF,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,IAAI,UAAU;QAAE,OAAO,IAAI,CAAC;IAE5B,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAExC,IAAI,SAAS,GAAG,CACd,KAAC,WAAW,kBACE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAC5D,EAAE,EAAE,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,KAC3C,SAAS,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,oBACI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAC7D,GAAG,EAAE,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,GACZ,CACH,CAAC;IAEF,IAAI,SAAS,KAAK,QAAQ,EAAE;QAC1B,SAAS,GAAG,CACV,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAClE,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,SAAS,aAEnB,SAAS,EACT,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,OAAO,EAAC,WAAW,iBAAa,MAAM,YAC5D,OAAO,GACH,CACR,IACI,CACR,CAAC;KACH;IAED,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,CAC5B,KAAC,sBAAsB,IACrB,IAAI,EAAE,cAAc,EACpB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,QAAQ,EAAE,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,EACvD,OAAO,EAAC,OAAO,EACf,KAAK,EAAE,GAAG,EACV,mBAAmB,EAAE,iBAAiB,EACtC,oBAAoB,EAAE,GAAG,EAAE;YACzB,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,kBAAkB,EAAE,EAAE,CAAC;QACzB,CAAC,YAEA,SAAS,GACa,CAC1B,CAAC,CAAC,CAAC,CACF,SAAS,CACV,CAAC;IAEF,OAAO,SAAS,KAAK,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;AAChG,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","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"}

package/lib/components/Tabs/Tabs.js

@@ -5,6 +5,7 @@ import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import Link from '../Link';
 import Count from '../Badges/Count';
+import { useAfterInitialEffect, useConsolidatedRef } from '../../hooks';
 import Tab from './Tab';
 export const StyledTabs = styled.div(({ type, theme }) => css `
     position: relative;
@@ -27,6 +28,7 @@ StyledTabs.defaultProps = defaultThemeProp;
  * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated
  */
 const Tabs = forwardRef(({ tabs = [], type = 'horizontal', currentTabId, onTabClick, ...restProps }, ref) => {
+    const wrapperRef = useConsolidatedRef(ref);
     // Used to keep a reference for every tab in order to focus them with key presses
     const tabRefs = useRef([]);
     // Handles arrow keypresses for changing the focus
@@ -55,9 +57,13 @@ const Tabs = forwardRef(({ tabs = [], type = 'horizontal', currentTabId, onTabCl
             }
         }
     };
+    useAfterInitialEffect(() => {
+        const event = new Event('cosmos-tab-changed', { bubbles: true, composed: true });
+        wrapperRef.current?.dispatchEvent(event);
+    }, [currentTabId]);
     return (_jsx(Flex, { ...restProps, container: {
             direction: type !== 'horizontal' ? 'column' : undefined
-        }, item: { shrink: 0 }, as: StyledTabs, ref: ref, type: type, role: 'tablist', "aria-orientation": type, children: tabs.map((tab, i) => {
+        }, item: { shrink: 0 }, as: StyledTabs, ref: wrapperRef, type: type, role: 'tablist', "aria-orientation": type, children: tabs.map((tab, i) => {
             const { href, name, count, id, disabled } = tab;
             const selected = id === currentTabId;
             return (_jsx(Tab, { id: id, "aria-selected": selected, "aria-controls": `${id}-panel`, content: name, count: typeof count === 'number' && _jsx(Count, { children: count }), href: href, selected: selected, onClick: (event) => {