@pega/cosmos-react-core 9.0.0-build.9.8 → 9.0.0

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 type { ReactNode, Ref, MouseEventHandler } from 'react';\n\nimport type { BaseProps } from '../../types';\nimport type { 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"]}
+{"version":3,"file":"MultiStepForm.types.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, Ref, MouseEventHandler } from 'react';\n\nimport type { BaseProps } from '../../types';\nimport type { 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   * Indicates whether the step has been completed\n   * @default false\n   */\n  completed?: boolean;\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\ninterface BaseMultiStepFormProps {\n  /** Sets the current step. */\n  currentStepId: string;\n  /** Flat array of objects describing each step. */\n  steps: Step[];\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\nexport type MultiStepFormProps = BaseMultiStepFormProps &\n  (\n    | {\n        /** MultiStepForm step indicator type - horizontal */\n        stepIndicator?: 'horizontal';\n        /**\n         * Whether to show all step names in the horizontal step indicator.\n         * @default false\n         */\n        showStepNames?: boolean;\n      }\n    | {\n        /** MultiStepForm step indicator type */\n        stepIndicator: 'vertical' | 'vertical-start' | 'none';\n        showStepNames?: never;\n      }\n  );\n"]}

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

@@ -1,6 +1,6 @@
 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'];

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAWhD,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,CA6E7E,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"VerticalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAahD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,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,CA4F7E,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/components/MultiStepForm/VerticalFormProgress.js

@@ -3,6 +3,8 @@ import { useEffect, useRef, useState } from 'react';
 import Grid from '../Grid';
 import Text from '../Text';
 import { useArrows, useElement, useI18n } from '../../hooks';
+import Button from '../Button';
+import Flex from '../Flex';
 import { StepMarker, StyledBulletWrapper, StyledStepText, StyledVerticalStepMarkers } from './FormProgress.styles';
 const VerticalFormProgress = ({ steps, currentStepId, ...restProps }) => {
     const t = useI18n();
@@ -12,13 +14,13 @@ const VerticalFormProgress = ({ steps, currentStepId, ...restProps }) => {
     const [stepEls, setStepEls] = useState({});
     const stepsRef = useRef(null);
     useArrows(stepsRef, {
-        selector: 'button',
+        selector: 'button[aria-label]',
         cycle: false,
         dir: 'left-right',
         initialFocusElement: currentStepEl
     });
     useArrows(stepsRef, {
-        selector: 'button',
+        selector: 'button[aria-label]',
         cycle: false,
         dir: 'up-down',
         initialFocusElement: currentStepEl
@@ -29,10 +31,11 @@ const VerticalFormProgress = ({ steps, currentStepId, ...restProps }) => {
         }
     }, [Object.keys(stepEls), curStep]);
     return (_jsx(StyledVerticalStepMarkers, { ref: stepsRef, ...restProps, children: steps.map((step, index) => {
+            const isCurrent = index === curIdx;
             return (_jsxs(Grid, { as: 'li', container: {
                     cols: '2rem minmax(0, 1fr)',
                     colGap: 1
-                }, children: [_jsx(StyledBulletWrapper, { hasNext: index !== steps.length - 1, prior: index < curIdx, children: _jsx(StepMarker, { ref: (el) => {
+                }, children: [_jsx(Flex, { container: { alignItems: 'center', justify: 'center' }, as: StyledBulletWrapper, hasNext: index !== steps.length - 1, prior: index < curIdx, children: _jsx(StepMarker, { ref: (el) => {
                                 setStepEls(curr => {
                                     const newEls = { ...curr };
                                     if (!el && newEls[step.id]) {
@@ -43,7 +46,7 @@ const VerticalFormProgress = ({ steps, currentStepId, ...restProps }) => {
                                         return { ...newEls, [step.id]: el };
                                     return newEls;
                                 });
-                            }, id: step.id, "aria-label": `${step.name} - ${t('step_num', [index + 1, steps.length])}`, "aria-current": index === curIdx ? 'step' : undefined, tabIndex: index === curIdx ? 0 : -1, current: index === curIdx, prior: index < curIdx, depth: step.depth, onClick: step.onMarkerClick }) }), _jsx(Text, { variant: 'h4', as: StyledStepText, children: step.name })] }, step.id));
+                            }, id: step.id, "aria-label": `${step.name} - ${t('step_num', [index + 1, steps.length])}`, "aria-current": isCurrent ? 'step' : undefined, tabIndex: isCurrent ? 0 : -1, current: isCurrent, completed: step.completed, prior: index < curIdx, depth: step.depth, onClick: step.onMarkerClick, clickable: !!step.onMarkerClick && !isCurrent }) }), !!step.onMarkerClick && !isCurrent ? (_jsx(Button, { variant: 'link', onClick: step.onMarkerClick, as: StyledStepText, tabIndex: -1, children: step.name })) : (_jsx(Text, { variant: isCurrent ? 'h3' : undefined, as: StyledStepText, children: step.name }))] }, step.id));
         }) }));
 };
 export default VerticalFormProgress;

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport type { ForwardProps } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport { useArrows, useElement, useI18n } from '../../hooks';\n\nimport {\n  StepMarker,\n  StyledBulletWrapper,\n  StyledStepText,\n  StyledVerticalStepMarkers\n} from './FormProgress.styles';\nimport type MultiStepFormProps from './MultiStepForm.types';\n\ninterface FormProgressProps {\n  steps: MultiStepFormProps['steps'];\n  currentStepId: MultiStepFormProps['currentStepId'];\n}\n\nconst VerticalFormProgress: FunctionComponent<FormProgressProps & ForwardProps> = ({\n  steps,\n  currentStepId,\n  ...restProps\n}) => {\n  const t = useI18n();\n\n  const curIdx = steps.findIndex(step => step.id === currentStepId);\n  const curStep = steps[curIdx];\n\n  const [currentStepEl, setCurrentStepEl] = useElement();\n  const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n  const stepsRef = useRef(null);\n\n  useArrows(stepsRef, {\n    selector: 'button',\n    cycle: false,\n    dir: 'left-right',\n    initialFocusElement: currentStepEl\n  });\n\n  useArrows(stepsRef, {\n    selector: 'button',\n    cycle: false,\n    dir: 'up-down',\n    initialFocusElement: currentStepEl\n  });\n\n  useEffect(() => {\n    if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {\n      setCurrentStepEl(stepEls[curStep.id]);\n    }\n  }, [Object.keys(stepEls), curStep]);\n\n  return (\n    <StyledVerticalStepMarkers ref={stepsRef} {...restProps}>\n      {steps.map((step, index) => {\n        return (\n          <Grid\n            key={step.id}\n            as='li'\n            container={{\n              cols: '2rem minmax(0, 1fr)',\n              colGap: 1\n            }}\n          >\n            <StyledBulletWrapper hasNext={index !== steps.length - 1} prior={index < curIdx}>\n              <StepMarker\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                id={step.id}\n                aria-label={`${step.name} - ${t('step_num', [index + 1, steps.length])}`}\n                aria-current={index === curIdx ? 'step' : undefined}\n                tabIndex={index === curIdx ? 0 : -1}\n                current={index === curIdx}\n                prior={index < curIdx}\n                depth={step.depth}\n                onClick={step.onMarkerClick}\n              />\n            </StyledBulletWrapper>\n            <Text variant='h4' as={StyledStepText}>\n              {step.name}\n            </Text>\n          </Grid>\n        );\n      })}\n    </StyledVerticalStepMarkers>\n  );\n};\n\nexport default VerticalFormProgress;\n"]}
+{"version":3,"file":"VerticalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport type { ForwardProps } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport { useArrows, useElement, useI18n } from '../../hooks';\nimport Button from '../Button';\nimport Flex from '../Flex';\n\nimport {\n  StepMarker,\n  StyledBulletWrapper,\n  StyledStepText,\n  StyledVerticalStepMarkers\n} from './FormProgress.styles';\nimport type { MultiStepFormProps } from './MultiStepForm.types';\n\ninterface FormProgressProps {\n  steps: MultiStepFormProps['steps'];\n  currentStepId: MultiStepFormProps['currentStepId'];\n}\n\nconst VerticalFormProgress: FunctionComponent<FormProgressProps & ForwardProps> = ({\n  steps,\n  currentStepId,\n  ...restProps\n}) => {\n  const t = useI18n();\n\n  const curIdx = steps.findIndex(step => step.id === currentStepId);\n  const curStep = steps[curIdx];\n\n  const [currentStepEl, setCurrentStepEl] = useElement();\n  const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n  const stepsRef = useRef(null);\n\n  useArrows(stepsRef, {\n    selector: 'button[aria-label]',\n    cycle: false,\n    dir: 'left-right',\n    initialFocusElement: currentStepEl\n  });\n\n  useArrows(stepsRef, {\n    selector: 'button[aria-label]',\n    cycle: false,\n    dir: 'up-down',\n    initialFocusElement: currentStepEl\n  });\n\n  useEffect(() => {\n    if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {\n      setCurrentStepEl(stepEls[curStep.id]);\n    }\n  }, [Object.keys(stepEls), curStep]);\n\n  return (\n    <StyledVerticalStepMarkers ref={stepsRef} {...restProps}>\n      {steps.map((step, index) => {\n        const isCurrent = index === curIdx;\n        return (\n          <Grid\n            key={step.id}\n            as='li'\n            container={{\n              cols: '2rem minmax(0, 1fr)',\n              colGap: 1\n            }}\n          >\n            <Flex\n              container={{ alignItems: 'center', justify: 'center' }}\n              as={StyledBulletWrapper}\n              hasNext={index !== steps.length - 1}\n              prior={index < curIdx}\n            >\n              <StepMarker\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                id={step.id}\n                aria-label={`${step.name} - ${t('step_num', [index + 1, steps.length])}`}\n                aria-current={isCurrent ? 'step' : undefined}\n                tabIndex={isCurrent ? 0 : -1}\n                current={isCurrent}\n                completed={step.completed}\n                prior={index < curIdx}\n                depth={step.depth}\n                onClick={step.onMarkerClick}\n                clickable={!!step.onMarkerClick && !isCurrent}\n              />\n            </Flex>\n\n            {!!step.onMarkerClick && !isCurrent ? (\n              <Button variant='link' onClick={step.onMarkerClick} as={StyledStepText} tabIndex={-1}>\n                {step.name}\n              </Button>\n            ) : (\n              <Text variant={isCurrent ? 'h3' : undefined} as={StyledStepText}>\n                {step.name}\n              </Text>\n            )}\n          </Grid>\n        );\n      })}\n    </StyledVerticalStepMarkers>\n  );\n};\n\nexport default VerticalFormProgress;\n"]}

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

@@ -0,0 +1,6 @@
+export declare const useFormProgressOverflow: (numberOfSteps: number, withLabels?: boolean) => {
+    ref: import("react").RefObject<HTMLOListElement>;
+    state: boolean | undefined;
+};
+export default useFormProgressOverflow;
+//# sourceMappingURL=useFormProgressOverflow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFormProgressOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/useFormProgressOverflow.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,uBAAuB,GAAI,eAAe,MAAM,EAAE,aAAa,OAAO;;;CA0ClF,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/lib/components/MultiStepForm/useFormProgressOverflow.js

@@ -0,0 +1,35 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+import { remToPx, stripUnit } from 'polished';
+import { useChToPxConversionFactor, useTheme } from '../../hooks';
+import { tryCatch } from '../../utils';
+import { stepItemMinWidth, stepMarkerMinWidth } from './FormProgress.styles';
+export const useFormProgressOverflow = (numberOfSteps, withLabels) => {
+    const ref = useRef(null);
+    const [state, setState] = useState(undefined);
+    const chToPxConversionFactor = useChToPxConversionFactor();
+    const itemWidth = withLabels
+        ? chToPxConversionFactor * stepItemMinWidth
+        : chToPxConversionFactor * stepMarkerMinWidth;
+    const theme = useTheme();
+    const itemSpacing = Number(stripUnit(tryCatch(() => remToPx(theme.base.spacing), () => '16px')));
+    useLayoutEffect(() => {
+        const ol = ref.current;
+        if (!ol)
+            return;
+        const ro = new ResizeObserver(() => {
+            const olWidth = ol.offsetWidth ?? 0;
+            // Adding 1 to maxVisibleItems to account for the fact that the first and last item are half size,
+            // so their overall width is equal to itemWidth, but need to be counted as 2 items
+            const maxVisibleItems = Math.floor(olWidth / (itemWidth + itemSpacing) + 1);
+            const itemsOverflowing = numberOfSteps > maxVisibleItems;
+            setState(itemsOverflowing);
+        });
+        ro.observe(ol);
+        return () => {
+            ro.disconnect();
+        };
+    }, [itemWidth, itemSpacing, numberOfSteps]);
+    return { ref, state };
+};
+export default useFormProgressOverflow;
+//# sourceMappingURL=useFormProgressOverflow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFormProgressOverflow.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/useFormProgressOverflow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,EAAE,yBAAyB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE7E,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,aAAqB,EAAE,UAAoB,EAAE,EAAE;IACrF,MAAM,GAAG,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IAEnE,MAAM,sBAAsB,GAAG,yBAAyB,EAAE,CAAC;IAC3D,MAAM,SAAS,GAAG,UAAU;QAC1B,CAAC,CAAC,sBAAsB,GAAG,gBAAgB;QAC3C,CAAC,CAAC,sBAAsB,GAAG,kBAAkB,CAAC;IAEhD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,WAAW,GAAG,MAAM,CACxB,SAAS,CACP,QAAQ,CACN,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EACjC,GAAG,EAAE,CAAC,MAAM,CACb,CACF,CACF,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YACjC,MAAM,OAAO,GAAG,EAAE,CAAC,WAAW,IAAI,CAAC,CAAC;YACpC,kGAAkG;YAClG,kFAAkF;YAClF,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;YAC5E,MAAM,gBAAgB,GAAG,aAAa,GAAG,eAAe,CAAC;YAEzD,QAAQ,CAAC,gBAAgB,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAEf,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,UAAU,EAAE,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC;IAE5C,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;AACxB,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC","sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport { remToPx, stripUnit } from 'polished';\n\nimport { useChToPxConversionFactor, useTheme } from '../../hooks';\nimport { tryCatch } from '../../utils';\n\nimport { stepItemMinWidth, stepMarkerMinWidth } from './FormProgress.styles';\n\nexport const useFormProgressOverflow = (numberOfSteps: number, withLabels?: boolean) => {\n  const ref = useRef<HTMLOListElement>(null);\n  const [state, setState] = useState<boolean | undefined>(undefined);\n\n  const chToPxConversionFactor = useChToPxConversionFactor();\n  const itemWidth = withLabels\n    ? chToPxConversionFactor * stepItemMinWidth\n    : chToPxConversionFactor * stepMarkerMinWidth;\n\n  const theme = useTheme();\n\n  const itemSpacing = Number(\n    stripUnit(\n      tryCatch(\n        () => remToPx(theme.base.spacing),\n        () => '16px'\n      )\n    )\n  );\n\n  useLayoutEffect(() => {\n    const ol = ref.current;\n    if (!ol) return;\n\n    const ro = new ResizeObserver(() => {\n      const olWidth = ol.offsetWidth ?? 0;\n      // Adding 1 to maxVisibleItems to account for the fact that the first and last item are half size,\n      // so their overall width is equal to itemWidth, but need to be counted as 2 items\n      const maxVisibleItems = Math.floor(olWidth / (itemWidth + itemSpacing) + 1);\n      const itemsOverflowing = numberOfSteps > maxVisibleItems;\n\n      setState(itemsOverflowing);\n    });\n\n    ro.observe(ol);\n\n    return () => {\n      ro.disconnect();\n    };\n  }, [itemWidth, itemSpacing, numberOfSteps]);\n\n  return { ref, state };\n};\n\nexport default useFormProgressOverflow;\n"]}

package/lib/components/Number/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;;;;AAY5D,wBAgRE"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;;;;AAY5D,wBA8QE"}

package/lib/components/Number/NumberInput.js

@@ -18,9 +18,7 @@ registerIcon(minusIcon, plusIcon);
 export default withTestIds(forwardRef(function NumberInput(props, ref) {
     const uid = useUID();
     const { testId, id = uid, status, label, labelHidden, info, required, disabled, readOnly, additionalInfo, value = '', onChange, onFocus, onBlur, onResolveSuggestion, unit, showDecimal = true, numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES, showGroupSeparators = true, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, variant, 'aria-label': ariaLabel, autoFocus, className: classNameProp, ...restProps } = props;
-    const className = createClassName('number-input', classNameProp, {
-        status
-    });
+    const className = createClassName('number-input', classNameProp);
     const testIds = useTestIds(testId, getNumberInputTestIds);
     const { locale } = useConfiguration();
     const inputRef = useConsolidatedRef(ref);

package/lib/components/Number/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useMemo, useRef } from 'react';\nimport type { ChangeEvent, KeyboardEvent, PropsWithoutRef, FocusEvent } from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport type { RefElement } from '../../types';\nimport {\n  useArrows,\n  useConfiguration,\n  useConsolidatedRef,\n  useI18n,\n  useInputFormatter,\n  useTestIds,\n  useUID\n} from '../../hooks';\nimport Input from '../Input';\nimport { withTestIds, createClassName } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport type { NumberInputProps } from './NumberInput.types';\nimport {\n  getCleanedValue,\n  getDecimalSign,\n  getDecrementedValue,\n  getFormattedValue,\n  getIncrementedValue\n} from './utils';\nimport { getNumberInputTestIds } from './Number.test-ids';\n\nregisterIcon(minusIcon, plusIcon);\n\nexport default withTestIds(\n  forwardRef<RefElement<NumberInputProps>, PropsWithoutRef<NumberInputProps>>(\n    function NumberInput(props, ref) {\n      const uid = useUID();\n      const {\n        testId,\n        id = uid,\n        status,\n        label,\n        labelHidden,\n        info,\n        required,\n        disabled,\n        readOnly,\n        additionalInfo,\n        value = '',\n        onChange,\n        onFocus,\n        onBlur,\n        onResolveSuggestion,\n        unit,\n        showDecimal = true,\n        numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n        showGroupSeparators = true,\n        min = Number.MIN_SAFE_INTEGER,\n        max = Number.MAX_SAFE_INTEGER,\n        step = 1,\n        variant,\n        'aria-label': ariaLabel,\n        autoFocus,\n        className: classNameProp,\n        ...restProps\n      } = props;\n\n      const className = createClassName('number-input', classNameProp, {\n        status\n      });\n      const testIds = useTestIds(testId, getNumberInputTestIds);\n\n      const { locale } = useConfiguration();\n      const inputRef = useConsolidatedRef(ref);\n      const containerRef = useRef<HTMLElement>(null);\n      const maximumFractionDigits = showDecimal ? numberOfDecimalsProp : 0;\n      const decimalSign = useMemo(\n        () => getDecimalSign(locale, { numberingSystem: 'latn' }),\n        [locale]\n      );\n\n      const formatValue = useCallback(\n        (number: string) => {\n          return getFormattedValue(number, locale, unit, {\n            useGrouping: showGroupSeparators,\n            maximumFractionDigits\n          });\n        },\n        [locale, unit, showGroupSeparators, maximumFractionDigits]\n      );\n\n      const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const cleanedInputValue = getCleanedValue(inputValue, decimalSign, maximumFractionDigits);\n        if (cleanedInputValue === value) return;\n        onChange(cleanedInputValue);\n      };\n\n      const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (readOnly) return;\n        const input = e.currentTarget;\n        switch (e.key) {\n          case 'ArrowUp':\n            e.preventDefault();\n            onChange(getIncrementedValue(value, min, max, step));\n            break;\n          case 'ArrowDown':\n            e.preventDefault();\n            onChange(getDecrementedValue(value, min, max, step));\n            break;\n          case decimalSign:\n            if (input.value.includes(decimalSign)) {\n              if (\n                input.selectionStart &&\n                input.value.charAt(input.selectionStart) === decimalSign\n              ) {\n                input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);\n              }\n              e.preventDefault();\n            } else if (\n              input.selectionStart !== null &&\n              !input.value.charAt(input.selectionStart - 1).match(/\\d/)\n            ) {\n              onChange(\n                getCleanedValue(`${input.value}0${decimalSign}`, decimalSign, maximumFractionDigits)\n              );\n              e.preventDefault();\n            }\n            break;\n          case '-':\n            if (value.startsWith('-')) e.preventDefault();\n            break;\n          default:\n        }\n      };\n\n      const onInputFocusEvent = (e: FocusEvent<HTMLInputElement>) => {\n        let parsableValue = value;\n\n        if (Number.isNaN(parseFloat(value))) {\n          parsableValue = '';\n        } else if (value?.endsWith('.')) {\n          parsableValue = value.slice(0, -1);\n        }\n\n        if (e.type === 'focus') onFocus?.(parsableValue);\n        else {\n          if (parsableValue !== value) {\n            onChange(parsableValue);\n          }\n\n          onBlur?.(parsableValue);\n        }\n      };\n\n      const formattedValue = useInputFormatter(inputRef, value, formatValue, `0-9${decimalSign}-`);\n\n      const t = useI18n();\n\n      const numberInput = (\n        <Flex\n          data-testid={testIds.root}\n          as={StyledNumberInput}\n          hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n          container={{ alignItems: 'center', wrap: 'nowrap' }}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n        >\n          <Input\n            data-testid={testIds.control}\n            onChange={onInputChange}\n            id={id}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            {...restProps}\n            className={className}\n            inputMode='numeric'\n            ref={inputRef}\n            value={formattedValue}\n            onKeyDown={onKeyDown}\n            onFocus={onInputFocusEvent}\n            onBlur={onInputFocusEvent}\n            aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n            autoFocus={autoFocus}\n            aria-describedby={info ? `${id}-info` : undefined}\n          />\n        </Flex>\n      );\n\n      const onMinusClick = () => {\n        onChange?.(getDecrementedValue(value, min, max, step));\n      };\n\n      const onPlusClick = () => {\n        onChange?.(getIncrementedValue(value, min, max, step));\n      };\n\n      const elementRef = useRef<HTMLElement | null>(null);\n      useArrows(elementRef, {\n        cycle: false,\n        selector: 'button, input',\n        dir: 'left-right',\n        initialFocusElement: inputRef.current\n      });\n\n      const stepper = (\n        <Flex\n          as={StyledStepperInput}\n          hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n          container={{ alignItems: 'center', wrap: 'nowrap' }}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n          size={formattedValue?.length}\n          ref={elementRef}\n          role='application'\n        >\n          <Button\n            data-testid={testIds.minus}\n            variant='simple'\n            icon\n            onClick={onMinusClick}\n            readOnly={readOnly}\n            disabled={disabled}\n            tabIndex={-1}\n            aria-label={t('decrease_value_by', [step])}\n          >\n            <Icon name='minus' />\n          </Button>\n          <Flex\n            container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n            item={{ grow: 1 }}\n            ref={containerRef}\n            onClick={(e: MouseEvent) => {\n              if (e.target === containerRef.current) inputRef?.current?.focus();\n            }}\n          >\n            <Input\n              data-testid={testIds.control}\n              onChange={onInputChange}\n              id={id}\n              readOnly={readOnly}\n              required={required}\n              disabled={disabled}\n              {...restProps}\n              className={className}\n              inputMode='numeric'\n              ref={inputRef}\n              value={formattedValue}\n              onKeyDown={onKeyDown}\n              onFocus={onInputFocusEvent}\n              onBlur={onInputFocusEvent}\n              aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n              maxLength={16}\n              autoFocus={autoFocus}\n              aria-describedby={\n                info ? `${id}-info ${id}-input-description` : `${id}-input-description`\n              }\n            />\n          </Flex>\n          <Button\n            data-testid={testIds.plus}\n            variant='simple'\n            icon\n            onClick={onPlusClick}\n            readOnly={readOnly}\n            disabled={disabled}\n            tabIndex={-1}\n            aria-label={t('increase_value_by', [step])}\n          >\n            <Icon name='plus' />\n          </Button>\n          <VisuallyHiddenText id={`${id}-input-description`}>\n            {t('stepper_instructions')}\n          </VisuallyHiddenText>\n          <VisuallyHiddenText aria-live='polite'>{formattedValue}</VisuallyHiddenText>\n        </Flex>\n      );\n\n      const Comp = variant === 'stepper' && !readOnly ? stepper : numberInput;\n\n      return label ? (\n        <FormField\n          testId={testIds}\n          label={label}\n          labelHidden={labelHidden}\n          id={id}\n          info={info}\n          status={status}\n          required={required}\n          readOnly={readOnly}\n          disabled={disabled}\n          additionalInfo={additionalInfo}\n          onResolveSuggestion={onResolveSuggestion}\n        >\n          {Comp}\n        </FormField>\n      ) : (\n        Comp\n      );\n    }\n  ),\n  getNumberInputTestIds\n);\n"]}
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useMemo, useRef } from 'react';\nimport type { ChangeEvent, KeyboardEvent, PropsWithoutRef, FocusEvent } from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport type { RefElement } from '../../types';\nimport {\n  useArrows,\n  useConfiguration,\n  useConsolidatedRef,\n  useI18n,\n  useInputFormatter,\n  useTestIds,\n  useUID\n} from '../../hooks';\nimport Input from '../Input';\nimport { withTestIds, createClassName } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport type { NumberInputProps } from './NumberInput.types';\nimport {\n  getCleanedValue,\n  getDecimalSign,\n  getDecrementedValue,\n  getFormattedValue,\n  getIncrementedValue\n} from './utils';\nimport { getNumberInputTestIds } from './Number.test-ids';\n\nregisterIcon(minusIcon, plusIcon);\n\nexport default withTestIds(\n  forwardRef<RefElement<NumberInputProps>, PropsWithoutRef<NumberInputProps>>(\n    function NumberInput(props, ref) {\n      const uid = useUID();\n      const {\n        testId,\n        id = uid,\n        status,\n        label,\n        labelHidden,\n        info,\n        required,\n        disabled,\n        readOnly,\n        additionalInfo,\n        value = '',\n        onChange,\n        onFocus,\n        onBlur,\n        onResolveSuggestion,\n        unit,\n        showDecimal = true,\n        numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n        showGroupSeparators = true,\n        min = Number.MIN_SAFE_INTEGER,\n        max = Number.MAX_SAFE_INTEGER,\n        step = 1,\n        variant,\n        'aria-label': ariaLabel,\n        autoFocus,\n        className: classNameProp,\n        ...restProps\n      } = props;\n\n      const className = createClassName('number-input', classNameProp);\n      const testIds = useTestIds(testId, getNumberInputTestIds);\n\n      const { locale } = useConfiguration();\n      const inputRef = useConsolidatedRef(ref);\n      const containerRef = useRef<HTMLElement>(null);\n      const maximumFractionDigits = showDecimal ? numberOfDecimalsProp : 0;\n      const decimalSign = useMemo(\n        () => getDecimalSign(locale, { numberingSystem: 'latn' }),\n        [locale]\n      );\n\n      const formatValue = useCallback(\n        (number: string) => {\n          return getFormattedValue(number, locale, unit, {\n            useGrouping: showGroupSeparators,\n            maximumFractionDigits\n          });\n        },\n        [locale, unit, showGroupSeparators, maximumFractionDigits]\n      );\n\n      const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const cleanedInputValue = getCleanedValue(inputValue, decimalSign, maximumFractionDigits);\n        if (cleanedInputValue === value) return;\n        onChange(cleanedInputValue);\n      };\n\n      const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (readOnly) return;\n        const input = e.currentTarget;\n        switch (e.key) {\n          case 'ArrowUp':\n            e.preventDefault();\n            onChange(getIncrementedValue(value, min, max, step));\n            break;\n          case 'ArrowDown':\n            e.preventDefault();\n            onChange(getDecrementedValue(value, min, max, step));\n            break;\n          case decimalSign:\n            if (input.value.includes(decimalSign)) {\n              if (\n                input.selectionStart &&\n                input.value.charAt(input.selectionStart) === decimalSign\n              ) {\n                input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);\n              }\n              e.preventDefault();\n            } else if (\n              input.selectionStart !== null &&\n              !input.value.charAt(input.selectionStart - 1).match(/\\d/)\n            ) {\n              onChange(\n                getCleanedValue(`${input.value}0${decimalSign}`, decimalSign, maximumFractionDigits)\n              );\n              e.preventDefault();\n            }\n            break;\n          case '-':\n            if (value.startsWith('-')) e.preventDefault();\n            break;\n          default:\n        }\n      };\n\n      const onInputFocusEvent = (e: FocusEvent<HTMLInputElement>) => {\n        let parsableValue = value;\n\n        if (Number.isNaN(parseFloat(value))) {\n          parsableValue = '';\n        } else if (value?.endsWith('.')) {\n          parsableValue = value.slice(0, -1);\n        }\n\n        if (e.type === 'focus') onFocus?.(parsableValue);\n        else {\n          if (parsableValue !== value) {\n            onChange(parsableValue);\n          }\n\n          onBlur?.(parsableValue);\n        }\n      };\n\n      const formattedValue = useInputFormatter(inputRef, value, formatValue, `0-9${decimalSign}-`);\n\n      const t = useI18n();\n\n      const numberInput = (\n        <Flex\n          data-testid={testIds.root}\n          as={StyledNumberInput}\n          hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n          container={{ alignItems: 'center', wrap: 'nowrap' }}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n        >\n          <Input\n            data-testid={testIds.control}\n            onChange={onInputChange}\n            id={id}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            {...restProps}\n            className={className}\n            inputMode='numeric'\n            ref={inputRef}\n            value={formattedValue}\n            onKeyDown={onKeyDown}\n            onFocus={onInputFocusEvent}\n            onBlur={onInputFocusEvent}\n            aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n            autoFocus={autoFocus}\n            aria-describedby={info ? `${id}-info` : undefined}\n          />\n        </Flex>\n      );\n\n      const onMinusClick = () => {\n        onChange?.(getDecrementedValue(value, min, max, step));\n      };\n\n      const onPlusClick = () => {\n        onChange?.(getIncrementedValue(value, min, max, step));\n      };\n\n      const elementRef = useRef<HTMLElement | null>(null);\n      useArrows(elementRef, {\n        cycle: false,\n        selector: 'button, input',\n        dir: 'left-right',\n        initialFocusElement: inputRef.current\n      });\n\n      const stepper = (\n        <Flex\n          as={StyledStepperInput}\n          hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n          container={{ alignItems: 'center', wrap: 'nowrap' }}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n          size={formattedValue?.length}\n          ref={elementRef}\n          role='application'\n        >\n          <Button\n            data-testid={testIds.minus}\n            variant='simple'\n            icon\n            onClick={onMinusClick}\n            readOnly={readOnly}\n            disabled={disabled}\n            tabIndex={-1}\n            aria-label={t('decrease_value_by', [step])}\n          >\n            <Icon name='minus' />\n          </Button>\n          <Flex\n            container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n            item={{ grow: 1 }}\n            ref={containerRef}\n            onClick={(e: MouseEvent) => {\n              if (e.target === containerRef.current) inputRef?.current?.focus();\n            }}\n          >\n            <Input\n              data-testid={testIds.control}\n              onChange={onInputChange}\n              id={id}\n              readOnly={readOnly}\n              required={required}\n              disabled={disabled}\n              {...restProps}\n              className={className}\n              inputMode='numeric'\n              ref={inputRef}\n              value={formattedValue}\n              onKeyDown={onKeyDown}\n              onFocus={onInputFocusEvent}\n              onBlur={onInputFocusEvent}\n              aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n              maxLength={16}\n              autoFocus={autoFocus}\n              aria-describedby={\n                info ? `${id}-info ${id}-input-description` : `${id}-input-description`\n              }\n            />\n          </Flex>\n          <Button\n            data-testid={testIds.plus}\n            variant='simple'\n            icon\n            onClick={onPlusClick}\n            readOnly={readOnly}\n            disabled={disabled}\n            tabIndex={-1}\n            aria-label={t('increase_value_by', [step])}\n          >\n            <Icon name='plus' />\n          </Button>\n          <VisuallyHiddenText id={`${id}-input-description`}>\n            {t('stepper_instructions')}\n          </VisuallyHiddenText>\n          <VisuallyHiddenText aria-live='polite'>{formattedValue}</VisuallyHiddenText>\n        </Flex>\n      );\n\n      const Comp = variant === 'stepper' && !readOnly ? stepper : numberInput;\n\n      return label ? (\n        <FormField\n          testId={testIds}\n          label={label}\n          labelHidden={labelHidden}\n          id={id}\n          info={info}\n          status={status}\n          required={required}\n          readOnly={readOnly}\n          disabled={disabled}\n          additionalInfo={additionalInfo}\n          onResolveSuggestion={onResolveSuggestion}\n        >\n          {Comp}\n        </FormField>\n      ) : (\n        Comp\n      );\n    }\n  ),\n  getNumberInputTestIds\n);\n"]}

package/lib/components/Number/NumberInput.styles.d.ts

@@ -1,11 +1,15 @@
 interface StyledStepperProps {
     size: number;
 }
-export declare const StyledStepperInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<import("../FormControl").FormControlProps, keyof import("../FormControl").FormControlProps> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
+export declare const StyledStepperInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../FormControl").FormControlProps | "hasSuggestion"> & Pick<import("../FormControl").FormControlProps, keyof import("../FormControl").FormControlProps> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
     hasSuggestion?: boolean;
-} & StyledStepperProps, never>;
-declare const StyledNumberInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<import("../FormControl").FormControlProps, keyof import("../FormControl").FormControlProps> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, StyledStepperProps>> & string;
+declare const StyledNumberInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../FormControl").FormControlProps | "hasSuggestion"> & Pick<import("../FormControl").FormControlProps, keyof import("../FormControl").FormControlProps> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
     hasSuggestion?: boolean;
-}, never>;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
 export default StyledNumberInput;
 //# sourceMappingURL=NumberInput.styles.d.ts.map

package/lib/components/Number/NumberInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AASA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,kBAAkB;;8BA2D7B,CAAC;AAIH,QAAA,MAAM,iBAAiB;;SA6CrB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AASA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,kBAAkB;;;;gCA2D7B,CAAC;AAIH,QAAA,MAAM,iBAAiB;;;;mBA6CrB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}

package/lib/components/Number/NumberInput.types.d.ts

@@ -96,6 +96,10 @@ export type NumberRangeInputProps = WithAttributes<'fieldset', NumberProps & Pic
     fromLabel?: FormControlProps['label'];
     /** Pass a string or a fragment with an Icon and string for second part of NumberRangeInput. */
     toLabel?: FormControlProps['label'];
+    /** Placeholder for the first (from) input. Overrides `placeholder` for the first input. */
+    fromPlaceholder?: string;
+    /** Placeholder for the second (to) input. Overrides `placeholder` for the second input. */
+    toPlaceholder?: string;
     /** Pass an object with "heading" and "content" properties to show AdditionalInfo for first part of NumberRangeInput. */
     fromAdditionalInfo?: FormControlProps['additionalInfo'];
     /** Pass an object with "heading" and "content" properties to show AdditionalInfo for second part of NumberRangeInput. */

package/lib/components/Number/NumberInput.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"NumberInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"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"}

package/lib/components/Number/NumberInput.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.types.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AA0GA,qCAAqC;AACrC,MAAM,CAAC,MAAM,yBAAyB,GAAG,EAAE,CAAC","sourcesContent":["import type { Ref } from 'react';\n\nimport type { FormControlProps, HandleValue } from '../FormControl';\nimport type { Attributes, NoChildrenProp, TestIdProp, WithAttributes } from '../../types';\n\nexport type NumberProps = NoChildrenProp &\n  TestIdProp & {\n    /** Set visual state based on a validation state. */\n    status?: FormControlProps['status'];\n    /** Pass a string or a fragment with an Icon and string. */\n    label?: FormControlProps['label'];\n    /**\n     * Visually hides the label region.\n     * @default false\n     */\n    labelHidden?: FormControlProps['labelHidden'];\n    /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n    info?: FormControlProps['info'];\n    /** Indicate if the field is required. The browser defaults to false. */\n    required?: FormControlProps['required'];\n    /** Makes the component non-editable and non-clickable. The browser defaults to false. */\n    readOnly?: FormControlProps['readOnly'];\n    /** Button when clicked will show additional information */\n    additionalInfo?: FormControlProps['additionalInfo'];\n    /** Defines unit of the number, like 'kg', 'miles' or '%'. */\n    unit?: string;\n    /** Determines whether decimal places should be shown. The value is rounded if true.\n     * @default true\n     */\n    showDecimal?: boolean;\n    /** Determines the maximum number of decimal places. The value is rounded to the number of places.\n     * @default variable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1.\n     */\n    numberOfDecimals?: number;\n    /** Determines whether group separators should be shown.\n     * @default true\n     */\n    showGroupSeparators?: boolean;\n    /** The minimum value to accept for this input.\n     *  This value must be less than or equal to the value of the max attribute.\n     *  @default Number.MIN_SAFE_INTEGER\n     */\n    min?: number;\n    /**\n     * The maximum value to accept for this input.\n     *  This value must be greater than or equal to the value of the min attribute.\n     *  @default Number.MAX_SAFE_INTEGER\n     */\n    max?: number;\n    /** A stepping interval to use when using up and down arrows to adjust the value.\n     * @default 1\n     */\n    step?: number;\n    /**\n     * Component variation. Might be rendered as regular input or stepper.\n     * @default 'default'\n     */\n    variant?: 'default' | 'stepper';\n  };\n\nexport type NumberInputProps = WithAttributes<\n  'input',\n  NumberProps & {\n    /**\n     * CurrencyInput input value.\n     * Requires an onChange handler to update value.\n     */\n    value?: string;\n    /** Callback fired when input value changes. */\n    onChange: (value: string) => void;\n    /** Callback fired when the component gets focus. */\n    onFocus?: (value: string) => void;\n    /** Callback fired when the component loses focus. */\n    onBlur?: (value: string) => void;\n    /** Callback fired when AI suggestion is accepted/rejected */\n    onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n    type?: never;\n    defaultValue?: never;\n  }\n>;\n\nexport type NumberRangeInputProps = WithAttributes<\n  'fieldset',\n  NumberProps &\n    Pick<Attributes<'input'>, 'placeholder'> & {\n      /** Range as a tuple of start and end. */\n      value?: { start?: string; end?: string };\n      /** Callback for any modifications to the range */\n      onChange: (value: { start: string; end: string }) => void;\n      /** Callback fired when the component loses focus. */\n      onBlur?: (value: { start: string; end: string }) => void;\n      /** Callback fired when the component gets focus. */\n      onFocus?: (value: { start: string; end: string }) => void;\n      /** Pass a string or a fragment with an Icon and string for first part of NumberRangeInput. */\n      fromLabel?: FormControlProps['label'];\n      /** Pass a string or a fragment with an Icon and string for second part of NumberRangeInput. */\n      toLabel?: FormControlProps['label'];\n      /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for first part of NumberRangeInput. */\n      fromAdditionalInfo?: FormControlProps['additionalInfo'];\n      /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for second part of NumberRangeInput. */\n      toAdditionalInfo?: FormControlProps['additionalInfo'];\n      /** Imperative handle */\n      handle?: Ref<HandleValue>;\n    }\n>;\n\n/** Maximum fraction digits is 20. */\nexport const NUMBER_MAX_DECIMAL_PLACES = 20;\n"]}
+{"version":3,"file":"NumberInput.types.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AA8GA,qCAAqC;AACrC,MAAM,CAAC,MAAM,yBAAyB,GAAG,EAAE,CAAC","sourcesContent":["import type { Ref } from 'react';\n\nimport type { FormControlProps, HandleValue } from '../FormControl';\nimport type { Attributes, NoChildrenProp, TestIdProp, WithAttributes } from '../../types';\n\nexport type NumberProps = NoChildrenProp &\n  TestIdProp & {\n    /** Set visual state based on a validation state. */\n    status?: FormControlProps['status'];\n    /** Pass a string or a fragment with an Icon and string. */\n    label?: FormControlProps['label'];\n    /**\n     * Visually hides the label region.\n     * @default false\n     */\n    labelHidden?: FormControlProps['labelHidden'];\n    /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n    info?: FormControlProps['info'];\n    /** Indicate if the field is required. The browser defaults to false. */\n    required?: FormControlProps['required'];\n    /** Makes the component non-editable and non-clickable. The browser defaults to false. */\n    readOnly?: FormControlProps['readOnly'];\n    /** Button when clicked will show additional information */\n    additionalInfo?: FormControlProps['additionalInfo'];\n    /** Defines unit of the number, like 'kg', 'miles' or '%'. */\n    unit?: string;\n    /** Determines whether decimal places should be shown. The value is rounded if true.\n     * @default true\n     */\n    showDecimal?: boolean;\n    /** Determines the maximum number of decimal places. The value is rounded to the number of places.\n     * @default variable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1.\n     */\n    numberOfDecimals?: number;\n    /** Determines whether group separators should be shown.\n     * @default true\n     */\n    showGroupSeparators?: boolean;\n    /** The minimum value to accept for this input.\n     *  This value must be less than or equal to the value of the max attribute.\n     *  @default Number.MIN_SAFE_INTEGER\n     */\n    min?: number;\n    /**\n     * The maximum value to accept for this input.\n     *  This value must be greater than or equal to the value of the min attribute.\n     *  @default Number.MAX_SAFE_INTEGER\n     */\n    max?: number;\n    /** A stepping interval to use when using up and down arrows to adjust the value.\n     * @default 1\n     */\n    step?: number;\n    /**\n     * Component variation. Might be rendered as regular input or stepper.\n     * @default 'default'\n     */\n    variant?: 'default' | 'stepper';\n  };\n\nexport type NumberInputProps = WithAttributes<\n  'input',\n  NumberProps & {\n    /**\n     * CurrencyInput input value.\n     * Requires an onChange handler to update value.\n     */\n    value?: string;\n    /** Callback fired when input value changes. */\n    onChange: (value: string) => void;\n    /** Callback fired when the component gets focus. */\n    onFocus?: (value: string) => void;\n    /** Callback fired when the component loses focus. */\n    onBlur?: (value: string) => void;\n    /** Callback fired when AI suggestion is accepted/rejected */\n    onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n    type?: never;\n    defaultValue?: never;\n  }\n>;\n\nexport type NumberRangeInputProps = WithAttributes<\n  'fieldset',\n  NumberProps &\n    Pick<Attributes<'input'>, 'placeholder'> & {\n      /** Range as a tuple of start and end. */\n      value?: { start?: string; end?: string };\n      /** Callback for any modifications to the range */\n      onChange: (value: { start: string; end: string }) => void;\n      /** Callback fired when the component loses focus. */\n      onBlur?: (value: { start: string; end: string }) => void;\n      /** Callback fired when the component gets focus. */\n      onFocus?: (value: { start: string; end: string }) => void;\n      /** Pass a string or a fragment with an Icon and string for first part of NumberRangeInput. */\n      fromLabel?: FormControlProps['label'];\n      /** Pass a string or a fragment with an Icon and string for second part of NumberRangeInput. */\n      toLabel?: FormControlProps['label'];\n      /** Placeholder for the first (from) input. Overrides `placeholder` for the first input. */\n      fromPlaceholder?: string;\n      /** Placeholder for the second (to) input. Overrides `placeholder` for the second input. */\n      toPlaceholder?: string;\n      /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for first part of NumberRangeInput. */\n      fromAdditionalInfo?: FormControlProps['additionalInfo'];\n      /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for second part of NumberRangeInput. */\n      toAdditionalInfo?: FormControlProps['additionalInfo'];\n      /** Imperative handle */\n      handle?: Ref<HandleValue>;\n    }\n>;\n\n/** Maximum fraction digits is 20. */\nexport const NUMBER_MAX_DECIMAL_PLACES = 20;\n"]}

package/lib/components/Number/NumberRangeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberRangeInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberRangeInput.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;;;;AAGjE,wBAqHE"}
+{"version":3,"file":"NumberRangeInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberRangeInput.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;;;;AAGjE,wBAwHE"}

package/lib/components/Number/NumberRangeInput.js

@@ -8,7 +8,7 @@ import { withTestIds, createClassName } from '../../utils';
 import HiddenText from '../HiddenText';
 import NumberInput from './NumberInput';
 import { getNumberRangeTestIds } from './Number.test-ids';
-export default withTestIds(forwardRef(function NumberRangeInput({ name, testId, value = {}, onChange, onBlur, onFocus, label, fromLabel, toLabel, labelHidden, placeholder, disabled, readOnly, required, status, unit, showDecimal, numberOfDecimals, showGroupSeparators, min, max, step, variant, fromAdditionalInfo, toAdditionalInfo, autoFocus, handle, className, ...restProps }, ref) {
+export default withTestIds(forwardRef(function NumberRangeInput({ name, testId, value = {}, onChange, onBlur, onFocus, label, fromLabel, toLabel, labelHidden, placeholder, fromPlaceholder, toPlaceholder, disabled, readOnly, required, status, unit, showDecimal, numberOfDecimals, showGroupSeparators, min, max, step, variant, fromAdditionalInfo, toAdditionalInfo, autoFocus, handle, className, ...restProps }, ref) {
     const testIds = useTestIds(testId, getNumberRangeTestIds);
     const t = useI18n();
     const start = value.start ?? '';
@@ -20,7 +20,6 @@ export default withTestIds(forwardRef(function NumberRangeInput({ name, testId,
     useFocusWithin([containerRef], onFocusChange);
     const commonProps = {
         status,
-        placeholder,
         readOnly,
         required,
         unit,
@@ -32,8 +31,6 @@ export default withTestIds(forwardRef(function NumberRangeInput({ name, testId,
         variant
     };
     const descriptionId = useUID();
-    return (_jsxs(_Fragment, { children: [_jsx(FormField, { testId: testIds, as: 'fieldset', ...restProps, ref: containerRef, container: { wrap: 'nowrap' }, labelHidden: labelHidden, labelAs: 'legend', label: label, disabled: disabled, required: required, readOnly: readOnly, status: status, "aria-describedby": descriptionId, className: createClassName('number-range-input', className, {
-                    status
-                }), children: _jsxs(Flex, { container: true, as: StyledRangeInputContainer, children: [_jsx(NumberInput, { testId: testIds.min, ...commonProps, value: start, onChange: fromValue => onChange({ start: fromValue, end }), label: fromLabel, "aria-label": `${t('range_from_numeric') + (label ? ` - ${label}` : '')}`, additionalInfo: fromAdditionalInfo, autoFocus: autoFocus }), _jsx(NumberInput, { testId: testIds.max, ...commonProps, value: end, onChange: toValue => onChange({ start, end: toValue }), label: toLabel, "aria-label": `${t('range_to_numeric') + (label ? ` - ${label}` : '')}`, additionalInfo: toAdditionalInfo })] }) }), _jsx(HiddenText, { id: descriptionId, children: t('range_input') })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(FormField, { testId: testIds, as: 'fieldset', ...restProps, ref: containerRef, container: { wrap: 'nowrap' }, labelHidden: labelHidden, label: label, disabled: disabled, required: required, readOnly: readOnly, status: status, "aria-describedby": descriptionId, children: _jsxs(Flex, { container: true, as: StyledRangeInputContainer, className: createClassName('number-range-input', className), children: [_jsx(NumberInput, { testId: testIds.min, ...commonProps, placeholder: fromPlaceholder ?? placeholder, value: start, onChange: fromValue => onChange({ start: fromValue, end }), label: fromLabel, "aria-label": `${t('range_from_numeric') + (label ? ` - ${label}` : '')}`, additionalInfo: fromAdditionalInfo, autoFocus: autoFocus }), _jsx(NumberInput, { testId: testIds.max, ...commonProps, placeholder: toPlaceholder ?? placeholder, value: end, onChange: toValue => onChange({ start, end: toValue }), label: toLabel, "aria-label": `${t('range_to_numeric') + (label ? ` - ${label}` : '')}`, additionalInfo: toAdditionalInfo })] }) }), _jsx(HiddenText, { id: descriptionId, children: t('range_input') })] }));
 }), getNumberRangeTestIds);
 //# sourceMappingURL=NumberRangeInput.js.map

package/lib/components/Number/NumberRangeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberRangeInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberRangeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, type PropsWithoutRef, useCallback } from 'react';\n\nimport type { RefElement } from '../../types';\nimport { useConsolidatedRef, useI18n, useFocusWithin, useTestIds, useUID } from '../../hooks';\nimport { StyledRangeInputContainer } from '../Input/Input.styles';\nimport FormField from '../FormField';\nimport Flex from '../Flex';\nimport { withTestIds, createClassName } from '../../utils';\nimport HiddenText from '../HiddenText';\n\nimport NumberInput from './NumberInput';\nimport type { NumberRangeInputProps } from './NumberInput.types';\nimport { getNumberRangeTestIds } from './Number.test-ids';\n\nexport default withTestIds(\n  forwardRef<RefElement<NumberRangeInputProps>, PropsWithoutRef<NumberRangeInputProps>>(\n    function NumberRangeInput(\n      {\n        name,\n        testId,\n        value = {},\n        onChange,\n        onBlur,\n        onFocus,\n        label,\n        fromLabel,\n        toLabel,\n        labelHidden,\n        placeholder,\n        disabled,\n        readOnly,\n        required,\n        status,\n        unit,\n        showDecimal,\n        numberOfDecimals,\n        showGroupSeparators,\n        min,\n        max,\n        step,\n        variant,\n        fromAdditionalInfo,\n        toAdditionalInfo,\n        autoFocus,\n        handle,\n        className,\n        ...restProps\n      },\n      ref\n    ) {\n      const testIds = useTestIds(testId, getNumberRangeTestIds);\n\n      const t = useI18n();\n\n      const start = value.start ?? '';\n      const end = value.end ?? '';\n\n      const onFocusChange = useCallback(\n        (focused: boolean) => {\n          (focused ? onFocus : onBlur)?.({ start, end });\n        },\n        [onBlur, value.start, value.end]\n      );\n\n      const containerRef = useConsolidatedRef(ref);\n      useFocusWithin([containerRef], onFocusChange);\n\n      const commonProps = {\n        status,\n        placeholder,\n        readOnly,\n        required,\n        unit,\n        showDecimal,\n        numberOfDecimals,\n        showGroupSeparators,\n        min,\n        max,\n        variant\n      };\n\n      const descriptionId = useUID();\n\n      return (\n        <>\n          <FormField\n            testId={testIds}\n            as='fieldset'\n            {...restProps}\n            ref={containerRef}\n            container={{ wrap: 'nowrap' }}\n            labelHidden={labelHidden}\n            labelAs='legend'\n            label={label}\n            disabled={disabled}\n            required={required}\n            readOnly={readOnly}\n            status={status}\n            aria-describedby={descriptionId}\n            className={createClassName('number-range-input', className, {\n              status\n            })}\n          >\n            <Flex container as={StyledRangeInputContainer}>\n              <NumberInput\n                testId={testIds.min}\n                {...commonProps}\n                value={start}\n                onChange={fromValue => onChange({ start: fromValue, end })}\n                label={fromLabel}\n                aria-label={`${t('range_from_numeric') + (label ? ` - ${label}` : '')}`}\n                additionalInfo={fromAdditionalInfo}\n                autoFocus={autoFocus}\n              />\n              <NumberInput\n                testId={testIds.max}\n                {...commonProps}\n                value={end}\n                onChange={toValue => onChange({ start, end: toValue })}\n                label={toLabel}\n                aria-label={`${t('range_to_numeric') + (label ? ` - ${label}` : '')}`}\n                additionalInfo={toAdditionalInfo}\n              />\n            </Flex>\n          </FormField>\n          <HiddenText id={descriptionId}>{t('range_input')}</HiddenText>\n        </>\n      );\n    }\n  ),\n  getNumberRangeTestIds\n);\n"]}
+{"version":3,"file":"NumberRangeInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberRangeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, type PropsWithoutRef, useCallback } from 'react';\n\nimport type { RefElement } from '../../types';\nimport { useConsolidatedRef, useI18n, useFocusWithin, useTestIds, useUID } from '../../hooks';\nimport { StyledRangeInputContainer } from '../Input/Input.styles';\nimport FormField from '../FormField';\nimport Flex from '../Flex';\nimport { withTestIds, createClassName } from '../../utils';\nimport HiddenText from '../HiddenText';\n\nimport NumberInput from './NumberInput';\nimport type { NumberRangeInputProps } from './NumberInput.types';\nimport { getNumberRangeTestIds } from './Number.test-ids';\n\nexport default withTestIds(\n  forwardRef<RefElement<NumberRangeInputProps>, PropsWithoutRef<NumberRangeInputProps>>(\n    function NumberRangeInput(\n      {\n        name,\n        testId,\n        value = {},\n        onChange,\n        onBlur,\n        onFocus,\n        label,\n        fromLabel,\n        toLabel,\n        labelHidden,\n        placeholder,\n        fromPlaceholder,\n        toPlaceholder,\n        disabled,\n        readOnly,\n        required,\n        status,\n        unit,\n        showDecimal,\n        numberOfDecimals,\n        showGroupSeparators,\n        min,\n        max,\n        step,\n        variant,\n        fromAdditionalInfo,\n        toAdditionalInfo,\n        autoFocus,\n        handle,\n        className,\n        ...restProps\n      },\n      ref\n    ) {\n      const testIds = useTestIds(testId, getNumberRangeTestIds);\n\n      const t = useI18n();\n\n      const start = value.start ?? '';\n      const end = value.end ?? '';\n\n      const onFocusChange = useCallback(\n        (focused: boolean) => {\n          (focused ? onFocus : onBlur)?.({ start, end });\n        },\n        [onBlur, value.start, value.end]\n      );\n\n      const containerRef = useConsolidatedRef(ref);\n      useFocusWithin([containerRef], onFocusChange);\n\n      const commonProps = {\n        status,\n        readOnly,\n        required,\n        unit,\n        showDecimal,\n        numberOfDecimals,\n        showGroupSeparators,\n        min,\n        max,\n        variant\n      };\n\n      const descriptionId = useUID();\n\n      return (\n        <>\n          <FormField\n            testId={testIds}\n            as='fieldset'\n            {...restProps}\n            ref={containerRef}\n            container={{ wrap: 'nowrap' }}\n            labelHidden={labelHidden}\n            label={label}\n            disabled={disabled}\n            required={required}\n            readOnly={readOnly}\n            status={status}\n            aria-describedby={descriptionId}\n          >\n            <Flex\n              container\n              as={StyledRangeInputContainer}\n              className={createClassName('number-range-input', className)}\n            >\n              <NumberInput\n                testId={testIds.min}\n                {...commonProps}\n                placeholder={fromPlaceholder ?? placeholder}\n                value={start}\n                onChange={fromValue => onChange({ start: fromValue, end })}\n                label={fromLabel}\n                aria-label={`${t('range_from_numeric') + (label ? ` - ${label}` : '')}`}\n                additionalInfo={fromAdditionalInfo}\n                autoFocus={autoFocus}\n              />\n              <NumberInput\n                testId={testIds.max}\n                {...commonProps}\n                placeholder={toPlaceholder ?? placeholder}\n                value={end}\n                onChange={toValue => onChange({ start, end: toValue })}\n                label={toLabel}\n                aria-label={`${t('range_to_numeric') + (label ? ` - ${label}` : '')}`}\n                additionalInfo={toAdditionalInfo}\n              />\n            </Flex>\n          </FormField>\n          <HiddenText id={descriptionId}>{t('range_input')}</HiddenText>\n        </>\n      );\n    }\n  ),\n  getNumberRangeTestIds\n);\n"]}

package/lib/components/PageTemplates/CategorySubPage.styles.d.ts

@@ -1,19 +1,23 @@
-export declare const StyledSkipNavigation: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<import("../Button").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledNavItem: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<import("../Button/BareButton").BareButtonProps>, import("styled-components").DefaultTheme, import("../Tabs/Tab").StyledTabProps & {
-    level?: import("../Tabs/TabsContext").TabsContextValue["level"];
-}, never>;
-export declare const StyledNavGroupHeader: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<import("../Text").TextProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledNavGroupList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledNavGroup: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledNavList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledNav: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCategoryIconBlock: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCategoryHeadingRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledMenuColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPageTitle: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPageActionCol: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledArticleHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPageArticle: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledTemplateRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledTemplate: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSkipNavigation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, never>> & string & Omit<import("../..").ForwardRefForwardPropsComponent<import("../Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledNavItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<Omit<import("../Button/BareButton").BareButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, keyof import("../Tabs/Tab").StyledTabProps> & import("../Tabs/Tab").StyledTabProps, never>> & string;
+export declare const StyledNavGroupHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
+}, never>> & string & Omit<import("../..").ForwardRefForwardPropsComponent<import("../Text").TextProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledNavGroupList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const StyledNavGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+export declare const StyledNavList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const StyledNav: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const StyledCategoryIconBlock: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCategoryHeadingRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledMenuColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledPageTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const StyledPageActionCol: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledArticleHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const StyledPageArticle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const StyledTemplateRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledTemplate: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 //# sourceMappingURL=CategorySubPage.styles.d.ts.map

package/lib/components/PageTemplates/CategorySubPage.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CategorySubPage.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB,oLAoB/B,CAAC;AAGH,eAAO,MAAM,aAAa;;SAgExB,CAAC;AAGH,eAAO,MAAM,oBAAoB,gLAa/B,CAAC;AAGH,eAAO,MAAM,kBAAkB,wGAAc,CAAC;AAE9C,eAAO,MAAM,cAAc,wGAazB,CAAC;AAGH,eAAO,MAAM,aAAa,wGAwBxB,CAAC;AAGH,eAAO,MAAM,SAAS,yGAAe,CAAC;AAEtC,eAAO,MAAM,uBAAuB,yGAsBlC,CAAC;AAGH,eAAO,MAAM,wBAAwB,yGAmBnC,CAAC;AAGH,eAAO,MAAM,gBAAgB,yGAuC3B,CAAC;AAGH,eAAO,MAAM,eAAe,wGAe1B,CAAC;AAGH,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAEhD,eAAO,MAAM,mBAAmB,4GAe9B,CAAC;AAGH,eAAO,MAAM,iBAAiB,6GA0B5B,CAAC;AAGH,eAAO,MAAM,iBAAiB,yGAe5B,CAAC;AAGH,eAAO,MAAM,cAAc,yGAG1B,CAAC"}
+{"version":3,"file":"CategorySubPage.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;2JAoB/B,CAAC;AAGH,eAAO,MAAM,aAAa;;uGAgExB,CAAC;AAGH,eAAO,MAAM,oBAAoB;;uJAa/B,CAAC;AAGH,eAAO,MAAM,kBAAkB,iOAAc,CAAC;AAE9C,eAAO,MAAM,cAAc,6NAazB,CAAC;AAGH,eAAO,MAAM,aAAa,iOAwBxB,CAAC;AAGH,eAAO,MAAM,SAAS,uNAAe,CAAC;AAEtC,eAAO,MAAM,uBAAuB,6NAsBlC,CAAC;AAGH,eAAO,MAAM,wBAAwB,6NAmBnC,CAAC;AAGH,eAAO,MAAM,gBAAgB,6NAyC3B,CAAC;AAGH,eAAO,MAAM,eAAe,qOAe1B,CAAC;AAGH,eAAO,MAAM,mBAAmB,6NAAe,CAAC;AAEhD,eAAO,MAAM,mBAAmB,uNAe9B,CAAC;AAGH,eAAO,MAAM,iBAAiB,uNA4B5B,CAAC;AAGH,eAAO,MAAM,iBAAiB,6NAiB5B,CAAC;AAGH,eAAO,MAAM,cAAc,6NAkBzB,CAAC"}

package/lib/components/PageTemplates/CategorySubPage.styles.js

@@ -169,8 +169,10 @@ export const StyledMenuColumn = styled.div(({ theme }) => {
     background-color: ${appBackground};
     position: sticky;
     top: 0;
-    overflow-y: auto;
+    height: 100%;
+    min-height: 0;
     max-height: 100%;
+    overflow-y: auto;
     width: 100%;
     padding: calc(2 * ${spacing}) 0;
 
@@ -224,6 +226,8 @@ export const StyledPageArticle = styled.article(({ theme }) => {
     position: relative;
     background-color: ${primaryBackground};
     width: 100%;
+    height: 100%;
+    min-height: 0;
     max-height: 100%;
     overflow-y: auto;
     padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});
@@ -244,17 +248,32 @@ export const StyledTemplateRow = styled.div(({ theme }) => {
     return css `
     position: relative;
     height: 100%;
+    min-height: 0;
 
     /* sm or below / "Mobile" (note: 0.0625em = 1px) */
     @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
       flex-direction: column;
       height: auto;
+      min-height: inherit;
     }
   `;
 });
 StyledTemplateRow.defaultProps = defaultThemeProp;
-export const StyledTemplate = styled.div `
-  height: 0;
-  min-height: inherit;
-`;
+export const StyledTemplate = styled.div(({ theme }) => {
+    const { base: { breakpoints } } = theme;
+    const templateHeight = 'calc(100dvh - var(--appshell-offset, 0rem))';
+    return css `
+    height: 100%;
+    min-height: 0;
+
+    /* md or above / split-scroll layout */
+    @media all and (min-width: ${breakpoints.md}) {
+      height: ${templateHeight};
+      min-height: ${templateHeight};
+      max-height: ${templateHeight};
+      overflow: hidden;
+    }
+  `;
+});
+StyledTemplate.defaultProps = defaultThemeProp;
 //# sourceMappingURL=CategorySubPage.styles.js.map