@pega/cosmos-react-core 4.0.0-dev.2.0 → 4.0.0-dev.21.0

package/lib/components/Modal/index.d.ts

@@ -1,5 +1,4 @@
 export { default } from './Modal';
 export { default as ModalManager } from './ModalManager';
-export { ModalProps } from './Modal.types';
-export { ModalMethods } from './Modal.types';
+export type { ModalProps, ModalMethods } from './Modal.types';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './Modal';\nexport { default as ModalManager } from './ModalManager';\nexport { ModalProps } from './Modal.types';\nexport { ModalMethods } from './Modal.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './Modal';\nexport { default as ModalManager } from './ModalManager';\nexport type { ModalProps, ModalMethods } from './Modal.types';\n"]}

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

@@ -2,10 +2,19 @@ import { type Step } from './MultiStepForm.types';
 export declare const CurrentStepPopover: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: import("../Popover").PopoverProps<Modifiers> & import("../..").ForwardProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledFill: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFormProgress: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Flex").FlexProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StepMarker: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button/BareButton").BareButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {
     current: boolean;
     depth: Step['depth'];
     prior: boolean;
 }, never>;
+export declare const StepMarkerIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Icon").IconProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {
+    current: boolean;
+    depth: Step['depth'];
+    prior: boolean;
+}, never>;
+export declare const StyledBulletWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    hasNext: boolean;
+    prior: boolean;
+}, never>;
+export declare const StyledStepText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=FormProgress.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormProgress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,eAAO,MAAM,kBAAkB,8TAW9B,CAAC;AAEF,eAAO,MAAM,SAAS,yGAapB,CAAC;AAIH,eAAO,MAAM,UAAU,yGAsBrB,CAAC;AAIH,eAAO,MAAM,kBAAkB,iMAe7B,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;WACb,OAAO;SA6Ed,CAAC"}
+{"version":3,"file":"FormProgress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,eAAO,MAAM,kBAAkB,8TAW9B,CAAC;AAEF,eAAO,MAAM,SAAS,yGAapB,CAAC;AAIH,eAAO,MAAM,UAAU,yGAsBrB,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;WACb,OAAO;SA6Ed,CAAC;AAIH,eAAO,MAAM,cAAc;aAChB,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;WACb,OAAO;SAkDd,CAAC;AAIH,eAAO,MAAM,mBAAmB;aACrB,OAAO;WACT,OAAO;SA+Bd,CAAC;AAIH,eAAO,MAAM,cAAc,yGAKzB,CAAC"}

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

@@ -1,12 +1,12 @@
 import styled, { css } from 'styled-components';
 import { size } from 'polished';
-import Flex from '../Flex';
 import { defaultThemeProp } from '../../theme';
 import BareButton from '../Button/BareButton';
 import Popover from '../Popover';
 import { StyledText } from '../Text';
 import { calculateFontSize } from '../../styles';
 import { useDirection } from '../../hooks';
+import Icon from '../Icon';
 export const CurrentStepPopover = styled(Popover) `
   max-width: 100%;
   background-color: transparent;
@@ -43,21 +43,11 @@ export const StyledFill = styled.div(({ theme }) => {
   `;
 });
 StyledFill.defaultProps = defaultThemeProp;
-export const StyledFormProgress = styled(Flex)(({ theme }) => {
-    const { base: { spacing, 'font-size': fontSize, 'font-scale': fontScale }, components: { text: { h4: { 'font-size': h4fontSize } } } } = theme;
-    const fontSizes = calculateFontSize(fontSize, fontScale);
-    return css `
-    position: relative;
-    padding-block-start: calc(${spacing} + ${fontSizes[h4fontSize]} * 1.35);
-  `;
-});
-StyledFormProgress.defaultProps = defaultThemeProp;
 export const StepMarker = styled(BareButton)(({ current, depth, prior, theme }) => {
     const { base: { 'font-size': fontSize, 'font-scale': fontScale, animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive, 'primary-background': primaryBackground }, shadow: { focus: focusShadow }, 'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize } }, components: { 'form-control': { 'border-color': borderColor } } } = theme;
     const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);
     const smallStepMarkerSize = `calc(${stepMarkerSize} / 1.5)`;
     return css `
-    display: block;
     position: relative;
     z-index: 1;
     ${size(depth === 1 ? smallStepMarkerSize : stepMarkerSize)}
@@ -80,32 +70,32 @@ export const StepMarker = styled(BareButton)(({ current, depth, prior, theme })
     ::after {
       content: '';
       position: absolute;
-      top: ${depth === 1
+      inset-block-start: ${depth === 1
         ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `
         : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};
-      left: ${depth === 1
+      inset-inline-start: ${depth === 1
         ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `
         : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};
       ${size(buttonSize)}
 
       @media (pointer: coarse) {
-        top: ${depth === 1
+        inset-block-start: ${depth === 1
         ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `
         : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};
-        left: ${depth === 1
+        inset-inline-start: ${depth === 1
         ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `
         : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};
         ${size(touchButtonSize)}
       }
     }
 
-    &:first-child::after {
-      left: 0;
+    &:not(:only-child):first-child::after {
+      inset-inline-start: 0;
     }
 
-    &:last-child::after {
-      left: unset;
-      right: 0;
+    &:not(:only-child):last-child::after {
+      inset-inline-start: unset;
+      inset-inline-end: 0;
     }
 
     :focus {
@@ -114,4 +104,71 @@ export const StepMarker = styled(BareButton)(({ current, depth, prior, theme })
   `;
 });
 StepMarker.defaultProps = defaultThemeProp;
+export const StepMarkerIcon = styled(Icon)(({ current, depth, prior, theme }) => {
+    const { base: { 'font-size': fontSize, 'font-scale': fontScale, animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive, 'primary-background': primaryBackground } }, components: { 'form-control': { 'border-color': borderColor } } } = theme;
+    const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);
+    const smallStepMarkerSize = `calc(${stepMarkerSize} / 1.5)`;
+    return css `
+    position: relative;
+    z-index: 1;
+    ${size(depth === 1 ? smallStepMarkerSize : stepMarkerSize)}
+    border-radius: 100%;
+    background: ${primaryBackground};
+    border: 0.0625rem solid ${borderColor};
+    transition: all calc(2 * ${animationSpeed}) ${animationTiming};
+
+    ${current &&
+        css `
+      background: ${interactive};
+      border-color: ${interactive};
+    `}
+
+    ${prior &&
+        css `
+      border-color: ${interactive};
+    `}
+
+
+    &:not(:only-child):first-child::after {
+      inset-inline-start: 0;
+    }
+
+    &:not(:only-child):last-child::after {
+      inset-inline-start: unset;
+      inset-inline-end: 0;
+    }
+  `;
+});
+StepMarkerIcon.defaultProps = defaultThemeProp;
+export const StyledBulletWrapper = styled.div(({ theme, hasNext, prior }) => {
+    const { base: { animation: { speed: animationSpeed }, palette: { interactive } }, components: { 'form-control': { 'border-color': borderColor } } } = theme;
+    return css `
+    position: relative;
+    text-align: center;
+    min-width: 2rem;
+    padding-block-start: calc(0.85 * ${theme.base.spacing});
+
+    ${hasNext &&
+        css `
+      &::after {
+        content: '';
+        position: absolute;
+        margin-block-start: 1.15rem;
+        inset-inline-start: calc(50% - 0.03125rem);
+        width: 0.0625rem;
+        height: 100%;
+        background: ${prior ? interactive : borderColor};
+        transition: background calc(2 * ${animationSpeed});
+      }
+    `}
+  `;
+});
+StyledBulletWrapper.defaultProps = defaultThemeProp;
+export const StyledStepText = styled.div(({ theme }) => {
+    return css `
+    padding-block: ${theme.base.spacing};
+    overflow-wrap: break-word;
+  `;
+});
+StyledStepText.defaultProps = defaultThemeProp;
 //# sourceMappingURL=FormProgress.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormProgress.styles.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { size } from 'polished';\n\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport { StyledText } from '../Text';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { useDirection } from '../../hooks';\n\nimport { type Step } from './MultiStepForm.types';\n\nexport const CurrentStepPopover = styled(Popover)`\n  max-width: 100%;\n  background-color: transparent;\n  z-index: 0;\n  box-shadow: none;\n\n  & > ${StyledText} {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n`;\n\nexport const StyledBar = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'border-line': borderColor }\n    }\n  } = theme;\n\n  return css`\n    position: absolute;\n    width: 100%;\n    height: 0.0625rem;\n    background: ${borderColor};\n  `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledFill = styled.div(({ theme }) => {\n  const {\n    base: {\n      animation: {\n        speed: animationSpeed,\n        timing: { ease: animationTiming }\n      },\n      palette: { interactive }\n    }\n  } = theme;\n\n  const { ltr } = useDirection();\n\n  return css`\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: ${interactive};\n    transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n    transform: scaleX(var(--fillScale));\n    transform-origin: ${ltr ? 0 : '100%'} 0;\n  `;\n});\n\nStyledFill.defaultProps = defaultThemeProp;\n\nexport const StyledFormProgress = styled(Flex)(({ theme }) => {\n  const {\n    base: { spacing, 'font-size': fontSize, 'font-scale': fontScale },\n    components: {\n      text: {\n        h4: { 'font-size': h4fontSize }\n      }\n    }\n  } = theme;\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    position: relative;\n    padding-block-start: calc(${spacing} + ${fontSizes[h4fontSize as FontSize]} * 1.35);\n  `;\n});\n\nStyledFormProgress.defaultProps = defaultThemeProp;\n\nexport const StepMarker = styled(BareButton)<{\n  current: boolean;\n  depth: Step['depth'];\n  prior: boolean;\n}>(({ current, depth, prior, theme }) => {\n  const {\n    base: {\n      'font-size': fontSize,\n      'font-scale': fontScale,\n      animation: {\n        speed: animationSpeed,\n        timing: { ease: animationTiming }\n      },\n      palette: { interactive, 'primary-background': primaryBackground },\n      shadow: { focus: focusShadow },\n      'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize }\n    },\n    components: {\n      'form-control': { 'border-color': borderColor }\n    }\n  } = theme;\n  const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);\n  const smallStepMarkerSize = `calc(${stepMarkerSize} / 1.5)`;\n\n  return css`\n    display: block;\n    position: relative;\n    z-index: 1;\n    ${size(depth === 1 ? smallStepMarkerSize : stepMarkerSize)}\n    border-radius: 100%;\n    background: ${primaryBackground};\n    border: 0.0625rem solid ${borderColor};\n    transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n\n    ${current &&\n    css`\n      background: ${interactive};\n      border-color: ${interactive};\n    `}\n\n    ${prior &&\n    css`\n      border-color: ${interactive};\n    `}\n\n    ::after {\n      content: '';\n      position: absolute;\n      top: ${depth === 1\n        ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `\n        : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};\n      left: ${depth === 1\n        ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `\n        : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};\n      ${size(buttonSize)}\n\n      @media (pointer: coarse) {\n        top: ${depth === 1\n          ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `\n          : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};\n        left: ${depth === 1\n          ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `\n          : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};\n        ${size(touchButtonSize)}\n      }\n    }\n\n    &:first-child::after {\n      left: 0;\n    }\n\n    &:last-child::after {\n      left: unset;\n      right: 0;\n    }\n\n    :focus {\n      box-shadow: ${focusShadow};\n    }\n  `;\n});\n\nStepMarker.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"FormProgress.styles.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { size } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport { StyledText } from '../Text';\nimport { calculateFontSize } from '../../styles';\nimport { useDirection } from '../../hooks';\nimport Icon from '../Icon';\n\nimport { type Step } from './MultiStepForm.types';\n\nexport const CurrentStepPopover = styled(Popover)`\n  max-width: 100%;\n  background-color: transparent;\n  z-index: 0;\n  box-shadow: none;\n\n  & > ${StyledText} {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n`;\n\nexport const StyledBar = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'border-line': borderColor }\n    }\n  } = theme;\n\n  return css`\n    position: absolute;\n    width: 100%;\n    height: 0.0625rem;\n    background: ${borderColor};\n  `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledFill = styled.div(({ theme }) => {\n  const {\n    base: {\n      animation: {\n        speed: animationSpeed,\n        timing: { ease: animationTiming }\n      },\n      palette: { interactive }\n    }\n  } = theme;\n\n  const { ltr } = useDirection();\n\n  return css`\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: ${interactive};\n    transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n    transform: scaleX(var(--fillScale));\n    transform-origin: ${ltr ? 0 : '100%'} 0;\n  `;\n});\n\nStyledFill.defaultProps = defaultThemeProp;\n\nexport const StepMarker = styled(BareButton)<{\n  current: boolean;\n  depth: Step['depth'];\n  prior: boolean;\n}>(({ current, depth, prior, theme }) => {\n  const {\n    base: {\n      'font-size': fontSize,\n      'font-scale': fontScale,\n      animation: {\n        speed: animationSpeed,\n        timing: { ease: animationTiming }\n      },\n      palette: { interactive, 'primary-background': primaryBackground },\n      shadow: { focus: focusShadow },\n      'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize }\n    },\n    components: {\n      'form-control': { 'border-color': borderColor }\n    }\n  } = theme;\n\n  const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);\n  const smallStepMarkerSize = `calc(${stepMarkerSize} / 1.5)`;\n\n  return css`\n    position: relative;\n    z-index: 1;\n    ${size(depth === 1 ? smallStepMarkerSize : stepMarkerSize)}\n    border-radius: 100%;\n    background: ${primaryBackground};\n    border: 0.0625rem solid ${borderColor};\n    transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n\n    ${current &&\n    css`\n      background: ${interactive};\n      border-color: ${interactive};\n    `}\n\n    ${prior &&\n    css`\n      border-color: ${interactive};\n    `}\n\n    ::after {\n      content: '';\n      position: absolute;\n      inset-block-start: ${depth === 1\n        ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `\n        : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};\n      inset-inline-start: ${depth === 1\n        ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `\n        : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};\n      ${size(buttonSize)}\n\n      @media (pointer: coarse) {\n        inset-block-start: ${depth === 1\n          ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `\n          : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};\n        inset-inline-start: ${depth === 1\n          ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `\n          : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};\n        ${size(touchButtonSize)}\n      }\n    }\n\n    &:not(:only-child):first-child::after {\n      inset-inline-start: 0;\n    }\n\n    &:not(:only-child):last-child::after {\n      inset-inline-start: unset;\n      inset-inline-end: 0;\n    }\n\n    :focus {\n      box-shadow: ${focusShadow};\n    }\n  `;\n});\n\nStepMarker.defaultProps = defaultThemeProp;\n\nexport const StepMarkerIcon = styled(Icon)<{\n  current: boolean;\n  depth: Step['depth'];\n  prior: boolean;\n}>(({ current, depth, prior, theme }) => {\n  const {\n    base: {\n      'font-size': fontSize,\n      'font-scale': fontScale,\n      animation: {\n        speed: animationSpeed,\n        timing: { ease: animationTiming }\n      },\n      palette: { interactive, 'primary-background': primaryBackground }\n    },\n    components: {\n      'form-control': { 'border-color': borderColor }\n    }\n  } = theme;\n\n  const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);\n  const smallStepMarkerSize = `calc(${stepMarkerSize} / 1.5)`;\n\n  return css`\n    position: relative;\n    z-index: 1;\n    ${size(depth === 1 ? smallStepMarkerSize : stepMarkerSize)}\n    border-radius: 100%;\n    background: ${primaryBackground};\n    border: 0.0625rem solid ${borderColor};\n    transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n\n    ${current &&\n    css`\n      background: ${interactive};\n      border-color: ${interactive};\n    `}\n\n    ${prior &&\n    css`\n      border-color: ${interactive};\n    `}\n\n\n    &:not(:only-child):first-child::after {\n      inset-inline-start: 0;\n    }\n\n    &:not(:only-child):last-child::after {\n      inset-inline-start: unset;\n      inset-inline-end: 0;\n    }\n  `;\n});\n\nStepMarkerIcon.defaultProps = defaultThemeProp;\n\nexport const StyledBulletWrapper = styled.div<{\n  hasNext: boolean;\n  prior: boolean;\n}>(({ theme, hasNext, prior }) => {\n  const {\n    base: {\n      animation: { speed: animationSpeed },\n      palette: { interactive }\n    },\n    components: {\n      'form-control': { 'border-color': borderColor }\n    }\n  } = theme;\n  return css`\n    position: relative;\n    text-align: center;\n    min-width: 2rem;\n    padding-block-start: calc(0.85 * ${theme.base.spacing});\n\n    ${hasNext &&\n    css`\n      &::after {\n        content: '';\n        position: absolute;\n        margin-block-start: 1.15rem;\n        inset-inline-start: calc(50% - 0.03125rem);\n        width: 0.0625rem;\n        height: 100%;\n        background: ${prior ? interactive : borderColor};\n        transition: background calc(2 * ${animationSpeed});\n      }\n    `}\n  `;\n});\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStepText = styled.div(({ theme }) => {\n  return css`\n    padding-block: ${theme.base.spacing};\n    overflow-wrap: break-word;\n  `;\n});\n\nStyledStepText.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '../../types';
+import type MultiStepFormProps from './MultiStepForm.types';
+interface FormProgressProps {
+    steps: MultiStepFormProps['steps'];
+    currentStepId: MultiStepFormProps['currentStepId'];
+}
+export declare const StyledFormProgress: import("styled-components").StyledComponent<FunctionComponent<import("../Flex").FlexProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const HorizontalFormProgress: FunctionComponent<FormProgressProps & ForwardProps>;
+export default HorizontalFormProgress;
+//# sourceMappingURL=HorizontalFormProgress.d.ts.map

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

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

package/lib/components/MultiStepForm/{FormProgress.js → HorizontalFormProgress.js}

@@ -1,13 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { remToPx, stripUnit } from 'polished';
 import { useEffect, useState } from 'react';
+import styled, { css } from 'styled-components';
 import { useElement, useTheme } from '../../hooks';
+import { calculateFontSize } from '../../styles';
+import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
 import Flex from '../Flex';
 import Text from '../Text';
 import Tooltip from '../Tooltip';
-import { CurrentStepPopover, StepMarker, StyledBar, StyledFill, StyledFormProgress } from './FormProgress.styles';
-const FormProgress = ({ steps, currentStepId, ...restProps }) => {
+import { CurrentStepPopover, StepMarker, StyledBar, StyledFill } from './FormProgress.styles';
+export const StyledFormProgress = styled(Flex)(({ theme }) => {
+    const { base: { spacing, 'font-size': fontSize, 'font-scale': fontScale }, components: { text: { h4: { 'font-size': h4fontSize } } } } = theme;
+    const fontSizes = calculateFontSize(fontSize, fontScale);
+    return css `
+    position: relative;
+    padding-block-start: calc(${spacing} + ${fontSizes[h4fontSize]} * 1.35);
+  `;
+});
+StyledFormProgress.defaultProps = defaultThemeProp;
+const HorizontalFormProgress = ({ steps, currentStepId, ...restProps }) => {
     const curIdx = steps.findIndex(step => step.id === currentStepId);
     const curStep = steps[curIdx];
     const fillScale = curIdx / (steps.length - 1);
@@ -22,7 +34,7 @@ const FormProgress = ({ steps, currentStepId, ...restProps }) => {
     useEffect(() => {
         setCurrentStepEl(stepEls[curStep.id]);
     }, [Object.keys(stepEls), curStep]);
-    return (_jsxs(StyledFormProgress, { ...restProps, container: { alignItems: 'center' }, role: 'progressbar', "aria-valuenow": curIdx, "aria-valuemin": 0, "aria-valuetext": curStep.name, "aria-valuemax": steps.length, children: [_jsx(CurrentStepPopover, { show: true, target: currentStepEl, placement: popoverPlacement, strategy: 'absolute', hideOnTargetHidden: true, modifiers: [
+    return (_jsxs(StyledFormProgress, { ...restProps, container: { alignItems: 'center' }, role: 'progressbar', "aria-valuenow": curIdx, "aria-valuemin": 0, "aria-valuetext": curStep.name, "aria-valuemax": steps.length, children: [_jsx(CurrentStepPopover, { show: true, target: currentStepEl, placement: popoverPlacement, strategy: 'absolute', portal: false, hideOnTargetHidden: true, modifiers: [
                     {
                         name: 'offset',
                         options: {
@@ -31,6 +43,20 @@ const FormProgress = ({ steps, currentStepId, ...restProps }) => {
                                 tryCatch(() => stripUnit(remToPx(theme.base.spacing)), () => 8)
                             ]
                         }
+                    },
+                    {
+                        name: 'placeAndContain',
+                        enabled: false
+                    },
+                    {
+                        name: 'flip',
+                        enabled: false
+                    },
+                    {
+                        name: 'preventOverflow',
+                        options: {
+                            padding: 0
+                        }
                     }
                 ], children: _jsx(Text, { variant: 'h4', children: curStep.name }) }), _jsx(Flex, { container: { justify: 'between', alignItems: 'center' }, item: { grow: 1 }, children: steps.map((step, index) => {
                     return (_jsx(StepMarker, { ref: (el) => {
@@ -47,5 +73,5 @@ const FormProgress = ({ steps, currentStepId, ...restProps }) => {
                         }, "aria-label": step.name, "aria-describedby": step.id, current: index === curIdx, depth: step.depth, prior: index < curIdx, onClick: step.onMarkerClick, children: index !== curIdx && (_jsx(Tooltip, { target: stepEls[step.id], showDelay: 'none', hideDelay: 'short', portal: false, children: step.name })) }, step.id));
                 }) }), _jsx(StyledBar, { children: _jsx(StyledFill, { style: { '--fillScale': fillScale } }) })] }));
 };
-export default FormProgress;
-//# sourceMappingURL=FormProgress.js.map
+export default HorizontalFormProgress;
+//# sourceMappingURL=HorizontalFormProgress.js.map

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

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

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

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

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

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

package/lib/components/MultiStepForm/MultiStepForm.js

@@ -1,15 +1,36 @@
-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 } from '../../hooks';
+import { useAfterInitialEffect, useUID, useI18n, usePrevious, useBreakpoint, useTheme } from '../../hooks';
 import { getFocusables } from '../../utils';
 import { calculateFontSize } from '../../styles';
 import Flex from '../Flex';
 import Text from '../Text';
 import HTML from '../HTML';
 import VisuallyHiddenText from '../VisuallyHiddenText';
-import FormProgress from './FormProgress';
-export const StyledForm = styled.form ``;
+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(({ 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;
@@ -26,25 +47,70 @@ export const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {
     }
   `;
 });
-export const MultiStepForm = forwardRef(({ currentStepId, steps, heading, ...restProps }, ref) => {
-    const multiStepContentRef = useRef(null);
+StyledRequiredFieldLegend.defaultProps = defaultThemeProp;
+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 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]);
-    return (_jsxs(Flex, { ref: ref, as: StyledForm, container: { direction: 'column', gap: 3 }, ...restProps, "aria-labelledby": heading ? headingId : undefined, "aria-describedby": currentStep.description ? descriptionId : undefined, children: [(heading || steps.length > 1) && (_jsxs(Flex, { container: { direction: 'column', gap: 1.5 }, children: [heading && (_jsx(Text, { id: headingId, variant: 'h3', children: heading })), steps.length > 1 && (_jsxs(_Fragment, { children: [_jsx(FormProgress, { steps: steps, currentStepId: currentStepId }), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: previousId !== undefined && previousId !== currentStepId
+    useAfterInitialEffect(() => {
+        if (!progress) {
+            setFocus();
+        }
+    }, [progress]);
+    const isSmallOrAbove = useBreakpoint('sm');
+    const stepIndicator = stepIndicatorProp === 'vertical' && !isSmallOrAbove ? 'horizontal' : stepIndicatorProp;
+    let areaDef = '';
+    switch (stepIndicator) {
+        case 'horizontal':
+            areaDef += '"stepIndicator" ';
+            if (currentStep.banners)
+                areaDef += '"banners" ';
+            if (currentStep.description)
+                areaDef += '"description" ';
+            areaDef += '"content"';
+            break;
+        case 'vertical':
+            if (currentStep.banners)
+                areaDef += '"banners stepIndicator" ';
+            if (currentStep.description)
+                areaDef += '"description stepIndicator" ';
+            areaDef += '"content stepIndicator"';
+            break;
+        default:
+            if (currentStep.banners)
+                areaDef += '"banners" ';
+            if (currentStep.description)
+                areaDef += '"description" ';
+            areaDef += '"content"';
+    }
+    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])
-                                    : '' })] }))] })), currentStep.banners, currentStep.description && (_jsx(HTML, { id: descriptionId, as: 'p', content: currentStep.description })), _jsx(StyledFormContent, { ref: multiStepContentRef, children: currentStep.content }), currentStep.actions && (_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":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAGvD,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AACxC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClE,MAAM,EACJ,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,OAAO,EAAE,EAAE,MAAM,EAAE,EACpB,EACF,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAErE,OAAO,GAAG,CAAA;iBACK,YAAY;;;;;;;eAOd,MAAM;;GAElB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAyD,UAAU,CAC3F,CACE,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAuC,EACpF,GAA8B,EAC9B,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACzC,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,aAAa,CAAE,CAAC;IAC3E,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAC/B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,KAAK,SAAS;YAAE,OAAO;QAErC,IAAI,UAAU,KAAK,aAAa,EAAE;YAChC,MAAM,iBAAiB,GAAG,aAAa,CAAC,mBAAmB,CAAC,CAAC;YAE7D,IAAI,iBAAiB,CAAC,MAAM;gBAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;SAC5D;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,KACtC,SAAS,qBACI,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,sBAC9B,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,aAEpE,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAChC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,aAC/C,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAC,IAAI,YAC9B,OAAO,GACH,CACR,EACA,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACnB,8BACE,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,GAAI,EAE5D,KAAC,kBAAkB,iBAAW,QAAQ,YACnC,UAAU,KAAK,SAAS,IAAI,UAAU,KAAK,aAAa;oCACvD,CAAC,CAAC,CAAC,CAAC,sBAAsB,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;oCAC/C,CAAC,CAAC,EAAE,GACa,IACpB,CACJ,IACI,CACR,EAEA,WAAW,CAAC,OAAO,EAEnB,WAAW,CAAC,WAAW,IAAI,CAC1B,KAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,EAAE,EAAC,GAAG,EAAC,OAAO,EAAE,WAAW,CAAC,WAAW,GAAI,CACrE,EAED,KAAC,iBAAiB,IAAC,GAAG,EAAE,mBAAmB,YAAG,WAAW,CAAC,OAAO,GAAqB,EAErF,WAAW,CAAC,OAAO,IAAI,CACtB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAC1D,WAAW,CAAC,OAAO,GACf,CACR,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useUID, useI18n, usePrevious } 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';\n\nimport MultiStepFormProps, { Step } from './MultiStepForm.types';\nimport FormProgress from './FormProgress';\n\nexport const StyledForm = styled.form``;\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\nexport const MultiStepForm: FunctionComponent<MultiStepFormProps & ForwardProps> = forwardRef(\n  (\n    { currentStepId, steps, heading, ...restProps }: PropsWithoutRef<MultiStepFormProps>,\n    ref: MultiStepFormProps['ref']\n  ) => {\n    const multiStepContentRef = useRef(null);\n    const previousId = usePrevious(currentStepId);\n    const currentStep = steps.find((step: Step) => step.id === currentStepId)!;\n    const headingId = useUID();\n    const descriptionId = useUID();\n    const t = useI18n();\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    return (\n      <Flex\n        ref={ref}\n        as={StyledForm}\n        container={{ direction: 'column', gap: 3 }}\n        {...restProps}\n        aria-labelledby={heading ? headingId : undefined}\n        aria-describedby={currentStep.description ? descriptionId : undefined}\n      >\n        {(heading || steps.length > 1) && (\n          <Flex container={{ direction: 'column', gap: 1.5 }}>\n            {heading && (\n              <Text id={headingId} variant='h3'>\n                {heading}\n              </Text>\n            )}\n            {steps.length > 1 && (\n              <>\n                <FormProgress steps={steps} currentStepId={currentStepId} />\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          </Flex>\n        )}\n\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\n        {currentStep.actions && (\n          <Flex container={{ justify: 'between', alignItems: 'center' }}>\n            {currentStep.actions}\n          </Flex>\n        )}\n      </Flex>\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 {\n  useAfterInitialEffect,\n  useUID,\n  useI18n,\n  usePrevious,\n  useBreakpoint,\n  useTheme\n} 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    useAfterInitialEffect(() => {\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. */
@@ -40,6 +43,13 @@ export default interface MultiStepFormProps {
     currentStepId: string;
     /** Flat array of objects describing each step. */
     steps: Step[];
+    /**
+     * MultiStepForm step indicator.
+     * @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,+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  /** 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/MultiStepForm/{FormProgress.d.ts → VerticalFormProgress.d.ts}

@@ -5,6 +5,6 @@ interface FormProgressProps {
     steps: MultiStepFormProps['steps'];
     currentStepId: MultiStepFormProps['currentStepId'];
 }
-declare const FormProgress: FunctionComponent<FormProgressProps & ForwardProps>;
-export default FormProgress;
-//# sourceMappingURL=FormProgress.d.ts.map
+declare const VerticalFormProgress: FunctionComponent<FormProgressProps & ForwardProps>;
+export default VerticalFormProgress;
+//# sourceMappingURL=VerticalFormProgress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;AAE5D,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA6C7E,CAAC;AAEF,eAAe,oBAAoB,CAAC"}