@pega/cosmos-react-core 9.0.0-build.19.5 → 9.0.0-build.19.7

package/lib/components/AIRewrite/AIRewrite.d.ts

@@ -0,0 +1,12 @@
+import type { AIRewriteProps } from './AIRewrite.types';
+/**
+ * AIRewrite - A popover dialog for AI-powered text rewriting
+ *
+ * Renders in three modes:
+ * 1. Form mode (default) — collects rewrite action + optional instructions
+ * 2. Loading mode (isLoading=true) — shows progress while the AI processes
+ * 3. Review mode (rewrittenText is set) — editable text area with Apply / Back
+ */
+declare const AIRewrite: ({ target, testId, onSubmit, onCancel, isLoading, rewrittenText, onApply, onBack }: AIRewriteProps) => import("react/jsx-runtime").JSX.Element;
+export default AIRewrite;
+//# sourceMappingURL=AIRewrite.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AIRewrite.d.ts","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAY,MAAM,mBAAmB,CAAC;AAGlE;;;;;;;GAOG;AACH,QAAA,MAAM,SAAS,GAAI,mFAShB,cAAc,4CA8GhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/AIRewrite/AIRewrite.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { FormDialog, RadioButtonGroup, RadioButton, TextArea, useI18n, useTestIds, Flex } from '@pega/cosmos-react-core';
+import { getAIRewriteTestIds } from './AIRewrite.test-ids';
+/**
+ * AIRewrite - A popover dialog for AI-powered text rewriting
+ *
+ * Renders in three modes:
+ * 1. Form mode (default) — collects rewrite action + optional instructions
+ * 2. Loading mode (isLoading=true) — shows progress while the AI processes
+ * 3. Review mode (rewrittenText is set) — editable text area with Apply / Back
+ */
+const AIRewrite = ({ target, testId, onSubmit, onCancel, isLoading, rewrittenText, onApply, onBack }) => {
+    const t = useI18n();
+    const testIds = useTestIds(testId, getAIRewriteTestIds);
+    const [selectedAction, setSelectedAction] = useState('improve');
+    const [additionalInstructions, setAdditionalInstructions] = useState('');
+    const [editableRewrittenText, setEditableRewrittenText] = useState(rewrittenText ?? '');
+    // Sync editable text whenever a new AI result arrives
+    useEffect(() => {
+        if (rewrittenText !== undefined) {
+            setEditableRewrittenText(rewrittenText);
+        }
+    }, [rewrittenText]);
+    const handleActionChange = (e) => {
+        const newAction = e.target.value;
+        if (newAction === 'improve' ||
+            newAction === 'shorter' ||
+            newAction === 'professional' ||
+            newAction === 'friendly') {
+            setSelectedAction(newAction);
+        }
+    };
+    const handleSubmit = () => {
+        onSubmit(selectedAction, additionalInstructions);
+    };
+    const handleCancel = () => {
+        target.focus();
+        onCancel();
+    };
+    // Review mode — show the AI result in an editable field
+    if (rewrittenText !== undefined) {
+        return (_jsx(FormDialog, { target: target, heading: t('ai_rewrite_title'), onDismiss: handleCancel, onCancel: { text: t('ai_rewrite_back'), handler: () => onBack?.() }, onSubmit: { text: t('ai_rewrite_apply'), handler: () => onApply?.(editableRewrittenText) }, children: _jsx(TextArea, { label: t('ai_rewrite_result_label'), value: editableRewrittenText, onChange: e => setEditableRewrittenText(e.target.value), "data-testid": testIds.reviewTextArea }) }));
+    }
+    // Form mode (default or loading)
+    return (_jsx(FormDialog, { target: target, heading: t('ai_rewrite_title'), progress: isLoading, onCancel: handleCancel, onSubmit: {
+            disabled: isLoading,
+            handler: handleSubmit
+        }, children: _jsxs(Flex, { container: { direction: 'column', rowGap: 2 }, children: [_jsxs(RadioButtonGroup, { name: 'aiAction', label: t('ai_rewrite_label'), required: true, children: [_jsx(RadioButton, { value: 'improve', label: t('ai_rewrite_improve'), checked: selectedAction === 'improve', onChange: handleActionChange, "data-testid": testIds.radioClearer }), _jsx(RadioButton, { value: 'shorter', label: t('ai_rewrite_shorter'), checked: selectedAction === 'shorter', onChange: handleActionChange, "data-testid": testIds.radioShorter }), _jsx(RadioButton, { value: 'professional', label: t('ai_rewrite_professional'), checked: selectedAction === 'professional', onChange: handleActionChange, "data-testid": testIds.radioProfessional }), _jsx(RadioButton, { value: 'friendly', label: t('ai_rewrite_friendly'), checked: selectedAction === 'friendly', onChange: handleActionChange, "data-testid": testIds.radioFriendly })] }), _jsx(TextArea, { label: t('ai_rewrite_instructions_label'), info: t('ai_rewrite_instructions_info'), value: additionalInstructions, onChange: e => setAdditionalInstructions(e.target.value), maxLength: 200, "data-testid": testIds.instructionsInput })] }) }));
+};
+export default AIRewrite;
+//# sourceMappingURL=AIRewrite.js.map

package/lib/components/AIRewrite/AIRewrite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIRewrite.js","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport {\n  FormDialog,\n  RadioButtonGroup,\n  RadioButton,\n  TextArea,\n  useI18n,\n  useTestIds,\n  Flex\n} from '@pega/cosmos-react-core';\n\nimport type { AIRewriteProps, AIAction } from './AIRewrite.types';\nimport { getAIRewriteTestIds } from './AIRewrite.test-ids';\n\n/**\n * AIRewrite - A popover dialog for AI-powered text rewriting\n *\n * Renders in three modes:\n * 1. Form mode (default) — collects rewrite action + optional instructions\n * 2. Loading mode (isLoading=true) — shows progress while the AI processes\n * 3. Review mode (rewrittenText is set) — editable text area with Apply / Back\n */\nconst AIRewrite = ({\n  target,\n  testId,\n  onSubmit,\n  onCancel,\n  isLoading,\n  rewrittenText,\n  onApply,\n  onBack\n}: AIRewriteProps) => {\n  const t = useI18n();\n  const testIds = useTestIds(testId, getAIRewriteTestIds);\n  const [selectedAction, setSelectedAction] = useState<AIAction>('improve');\n  const [additionalInstructions, setAdditionalInstructions] = useState('');\n  const [editableRewrittenText, setEditableRewrittenText] = useState(rewrittenText ?? '');\n\n  // Sync editable text whenever a new AI result arrives\n  useEffect(() => {\n    if (rewrittenText !== undefined) {\n      setEditableRewrittenText(rewrittenText);\n    }\n  }, [rewrittenText]);\n\n  const handleActionChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newAction = e.target.value;\n    if (\n      newAction === 'improve' ||\n      newAction === 'shorter' ||\n      newAction === 'professional' ||\n      newAction === 'friendly'\n    ) {\n      setSelectedAction(newAction);\n    }\n  };\n\n  const handleSubmit = () => {\n    onSubmit(selectedAction, additionalInstructions);\n  };\n\n  const handleCancel = () => {\n    target.focus();\n    onCancel();\n  };\n\n  // Review mode — show the AI result in an editable field\n  if (rewrittenText !== undefined) {\n    return (\n      <FormDialog\n        target={target}\n        heading={t('ai_rewrite_title')}\n        onDismiss={handleCancel}\n        onCancel={{ text: t('ai_rewrite_back'), handler: () => onBack?.() }}\n        onSubmit={{ text: t('ai_rewrite_apply'), handler: () => onApply?.(editableRewrittenText) }}\n      >\n        <TextArea\n          label={t('ai_rewrite_result_label')}\n          value={editableRewrittenText}\n          onChange={e => setEditableRewrittenText(e.target.value)}\n          data-testid={testIds.reviewTextArea}\n        />\n      </FormDialog>\n    );\n  }\n\n  // Form mode (default or loading)\n  return (\n    <FormDialog\n      target={target}\n      heading={t('ai_rewrite_title')}\n      progress={isLoading}\n      onCancel={handleCancel}\n      onSubmit={{\n        disabled: isLoading,\n        handler: handleSubmit\n      }}\n    >\n      <Flex container={{ direction: 'column', rowGap: 2 }}>\n        <RadioButtonGroup name='aiAction' label={t('ai_rewrite_label')} required>\n          <RadioButton\n            value='improve'\n            label={t('ai_rewrite_improve')}\n            checked={selectedAction === 'improve'}\n            onChange={handleActionChange}\n            data-testid={testIds.radioClearer}\n          />\n          <RadioButton\n            value='shorter'\n            label={t('ai_rewrite_shorter')}\n            checked={selectedAction === 'shorter'}\n            onChange={handleActionChange}\n            data-testid={testIds.radioShorter}\n          />\n          <RadioButton\n            value='professional'\n            label={t('ai_rewrite_professional')}\n            checked={selectedAction === 'professional'}\n            onChange={handleActionChange}\n            data-testid={testIds.radioProfessional}\n          />\n          <RadioButton\n            value='friendly'\n            label={t('ai_rewrite_friendly')}\n            checked={selectedAction === 'friendly'}\n            onChange={handleActionChange}\n            data-testid={testIds.radioFriendly}\n          />\n        </RadioButtonGroup>\n\n        <TextArea\n          label={t('ai_rewrite_instructions_label')}\n          info={t('ai_rewrite_instructions_info')}\n          value={additionalInstructions}\n          onChange={e => setAdditionalInstructions(e.target.value)}\n          maxLength={200}\n          data-testid={testIds.instructionsInput}\n        />\n      </Flex>\n    </FormDialog>\n  );\n};\n\nexport default AIRewrite;\n"]}

package/lib/components/AIRewrite/AIRewrite.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getAIRewriteTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["radio-clearer", "radio-shorter", "radio-professional", "radio-friendly", "instructions-input", "review-text-area"]>;
+//# sourceMappingURL=AIRewrite.test-ids.d.ts.map

package/lib/components/AIRewrite/AIRewrite.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIRewrite.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,qNAOrB,CAAC"}

package/lib/components/AIRewrite/AIRewrite.test-ids.js

@@ -0,0 +1,10 @@
+import { createTestIds } from '../../utils';
+export const getAIRewriteTestIds = createTestIds('ai-rewrite-popover', [
+    'radio-clearer',
+    'radio-shorter',
+    'radio-professional',
+    'radio-friendly',
+    'instructions-input',
+    'review-text-area'
+]);
+//# sourceMappingURL=AIRewrite.test-ids.js.map

package/lib/components/AIRewrite/AIRewrite.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIRewrite.test-ids.js","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAC,oBAAoB,EAAE;IACrE,eAAe;IACf,eAAe;IACf,oBAAoB;IACpB,gBAAgB;IAChB,oBAAoB;IACpB,kBAAkB;CACV,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getAIRewriteTestIds = createTestIds('ai-rewrite-popover', [\n  'radio-clearer',\n  'radio-shorter',\n  'radio-professional',\n  'radio-friendly',\n  'instructions-input',\n  'review-text-area'\n] as const);\n"]}

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

@@ -0,0 +1,20 @@
+import type { TestIdProp } from '../../types';
+/** AI rewrite action types */
+export type AIAction = 'improve' | 'shorter' | 'professional' | 'friendly';
+export interface AIRewriteProps extends TestIdProp {
+    /** The button element that triggered the popover */
+    target: HTMLElement;
+    /** Callback when user submits the rewrite form */
+    onSubmit: (rewriteAction: AIAction, additionalInstructions: string) => void;
+    /** Callback when user cancels or dismisses the popover */
+    onCancel: () => void;
+    /** When true, shows a loading/progress state while the AI is generating a result */
+    isLoading?: boolean;
+    /** When set, transitions the popover to a review step showing the AI-generated text in an editable field */
+    rewrittenText?: string;
+    /** Called when the user accepts the (optionally edited) rewritten text in the review step */
+    onApply?: (text: string) => void;
+    /** Called when the user clicks Back in the review step to return to the form */
+    onBack?: () => void;
+}
+//# sourceMappingURL=AIRewrite.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AIRewrite.types.d.ts","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,8BAA8B;AAC9B,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,UAAU,CAAC;AAE3E,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD,oDAAoD;IACpD,MAAM,EAAE,WAAW,CAAC;IAEpB,kDAAkD;IAClD,QAAQ,EAAE,CAAC,aAAa,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5E,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB,oFAAoF;IACpF,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,4GAA4G;IAC5G,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,6FAA6F;IAC7F,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/lib/components/AIRewrite/AIRewrite.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AIRewrite.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AIRewrite.types.js","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TestIdProp } from '../../types';\n\n/** AI rewrite action types */\nexport type AIAction = 'improve' | 'shorter' | 'professional' | 'friendly';\n\nexport interface AIRewriteProps extends TestIdProp {\n  /** The button element that triggered the popover */\n  target: HTMLElement;\n\n  /** Callback when user submits the rewrite form */\n  onSubmit: (rewriteAction: AIAction, additionalInstructions: string) => void;\n\n  /** Callback when user cancels or dismisses the popover */\n  onCancel: () => void;\n\n  /** When true, shows a loading/progress state while the AI is generating a result */\n  isLoading?: boolean;\n\n  /** When set, transitions the popover to a review step showing the AI-generated text in an editable field */\n  rewrittenText?: string;\n\n  /** Called when the user accepts the (optionally edited) rewritten text in the review step */\n  onApply?: (text: string) => void;\n\n  /** Called when the user clicks Back in the review step to return to the form */\n  onBack?: () => void;\n}\n"]}

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

@@ -0,0 +1,4 @@
+export { default } from './AIRewrite';
+export type { AIRewriteProps, AIAction } from './AIRewrite.types';
+export { getAIRewriteTestIds } from './AIRewrite.test-ids';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AIRewrite/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/components/AIRewrite/index.js

@@ -0,0 +1,3 @@
+export { default } from './AIRewrite';
+export { getAIRewriteTestIds } from './AIRewrite.test-ids';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AIRewrite/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC","sourcesContent":["export { default } from './AIRewrite';\nexport type { AIRewriteProps, AIAction } from './AIRewrite.types';\nexport { getAIRewriteTestIds } from './AIRewrite.test-ids';\n"]}

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

@@ -1,18 +1,30 @@
 import type { Step } from './MultiStepForm.types';
+/** Min width of each step item including labels in ch units */
+export declare const stepItemMinWidth = 15;
+/** Min width of step marker without labels in ch units */
+export declare const stepMarkerMinWidth = 3;
 export declare const CurrentStepPopover: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: import("../Popover").PopoverProps<Modifiers> & import("../..").ForwardProps) => import("react").ReactElement | null), import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    shifted?: boolean;
+}, never>;
 export declare const StyledFill: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFormProgress: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<import("../Flex").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStepMarkers: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledVerticalStepMarkers: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFormProgress: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<import("../Flex").FlexProps>, import("styled-components").DefaultTheme, {
+    showStepNames?: boolean;
+}, never>;
 export declare const StepMarker: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<import("../Button/BareButton").BareButtonProps>, import("styled-components").DefaultTheme, {
     current: boolean;
     depth: Step["depth"];
-    prior: boolean;
+    completed?: Step["completed"];
+    clickable?: boolean;
+}, never>;
+export declare const StyleHorizontalStepMarkers: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {
+    showStepNames?: boolean;
 }, never>;
+export declare const StyledVerticalStepMarkers: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, 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>;
+export declare const StyledHorizontalStepText: 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,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,eAAO,MAAM,kBAAkB,oQAY9B,CAAC;AAEF,eAAO,MAAM,SAAS,yGAapB,CAAC;AAIH,eAAO,MAAM,UAAU,yGAsBrB,CAAC;AAIH,eAAO,MAAM,kBAAkB,gLAe7B,CAAC;AAIH,eAAO,MAAM,iBAAiB,wGAY5B,CAAC;AAIH,eAAO,MAAM,yBAAyB,wGAErC,CAAC;AAEF,eAAO,MAAM,UAAU;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;WACb,OAAO;SA2Ed,CAAC;AAIH,eAAO,MAAM,mBAAmB;aACrB,OAAO;WACT,OAAO;SA+Bd,CAAC;AAIH,eAAO,MAAM,cAAc,yGAKzB,CAAC"}
+{"version":3,"file":"FormProgress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,0DAA0D;AAC1D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,eAAO,MAAM,kBAAkB,oQAU9B,CAAC;AAyBF,eAAO,MAAM,SAAS;cAA0B,OAAO;SAkBrD,CAAC;AAIH,eAAO,MAAM,UAAU,yGA2BrB,CAAC;AAIH,eAAO,MAAM,kBAAkB;oBAAkC,OAAO;SAmBtE,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;gBACR,IAAI,CAAC,WAAW,CAAC;gBACjB,OAAO;SAqGnB,CAAC;AAIH,eAAO,MAAM,0BAA0B;oBAA+B,OAAO;SAsD5E,CAAC;AAIF,eAAO,MAAM,yBAAyB,wGAErC,CAAC;AAEF,eAAO,MAAM,mBAAmB;aACrB,OAAO;WACT,OAAO;SAuCd,CAAC;AAIH,eAAO,MAAM,cAAc,yGAKzB,CAAC;AAIH,eAAO,MAAM,wBAAwB,yGAUnC,CAAC"}

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

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

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

@@ -1,9 +1,10 @@
 import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
-import type MultiStepFormProps from './MultiStepForm.types';
+import type { MultiStepFormProps } from './MultiStepForm.types';
 interface FormProgressProps {
     steps: MultiStepFormProps['steps'];
     currentStepId: MultiStepFormProps['currentStepId'];
+    showStepNames?: boolean;
 }
 declare const HorizontalFormProgress: FunctionComponent<FormProgressProps & ForwardProps>;
 export default HorizontalFormProgress;

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAchD,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,sBAAsB,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAmI/E,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"HorizontalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAiBhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAwM/E,CAAC;AAEF,eAAe,sBAAsB,CAAC"}