@pega/cosmos-react-core 2.0.0-dev.14.0 → 2.0.0-dev.15.0

package/lib/components/MetaList/MetaList.js

@@ -1,28 +1,42 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import Text from '../Text';
 import Flex from '../Flex';
-export const StyledMetaList = styled.ul `
-  list-style: none;
-  white-space: nowrap;
-  overflow: hidden;
-`;
-export const StyledMetaListItem = styled.li `
-  white-space: nowrap;
-  min-width: 0;
-  display: inline-block;
-
-  &:not([role='separator']) {
-    text-overflow: ellipsis;
+export const StyledMetaList = styled.ul(({ wrapItems }) => {
+    return css `
+    list-style: none;
     overflow: hidden;
-  }
-`;
+
+    ${!wrapItems &&
+        css `
+      white-space: nowrap;
+    `}
+  `;
+});
+export const StyledMetaListItem = styled.li(({ wrapItems }) => {
+    return css `
+    min-width: 0;
+    display: inline-block;
+
+    ${wrapItems &&
+        css `
+      word-break: break-all;
+    `}
+
+    ${!wrapItems &&
+        css `
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    `}
+  `;
+});
 const MetaList = forwardRef((props, ref) => {
-    const { items, ...restProps } = props;
-    return (_jsx(Flex, Object.assign({ as: StyledMetaList, container: { gap: 0.5, alignItems: 'center' }, ref: ref }, restProps, { children: items.flatMap((item, i, arr) => item
+    const { items, wrapItems = true, ...restProps } = props;
+    return (_jsx(Flex, Object.assign({ as: StyledMetaList, container: { gap: 0.5, alignItems: 'center', wrap: wrapItems ? 'wrap' : 'nowrap' }, wrapItems: wrapItems, ref: ref }, restProps, { children: items.flatMap((item, i, arr) => item
             ? [
-                _jsx(Text, Object.assign({ as: StyledMetaListItem, variant: 'secondary' }, { children: item }), `${i + 0}`)
+                _jsx(Text, Object.assign({ as: StyledMetaListItem, variant: 'secondary', wrapItems: wrapItems }, { children: item }), `${i + 0}`)
             ].concat(i !== arr.length - 1
                 ? [
                     _jsx(Text, Object.assign({ as: StyledMetaListItem, role: 'separator', variant: 'secondary' }, { children: "\u2022" }), `${i + 0}-sep`)

package/lib/components/MetaList/MetaList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetaList.js","sourceRoot":"","sources":["../../../src/components/MetaList/MetaList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsD,UAAU,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAU3B,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAA;;;;CAItC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;CAS1C,CAAC;AAEF,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACtC,OAAO,CACL,KAAC,IAAI,kBACH,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,EAC7C,GAAG,EAAE,GAAG,IACJ,SAAS,cAEZ,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAC9B,IAAI;YACF,CAAC,CAAC;gBACE,KAAC,IAAI,kBAAC,EAAE,EAAE,kBAAkB,EAAmB,OAAO,EAAC,WAAW,gBAC/D,IAAI,KAD4B,GAAG,CAAC,GAAG,CAAC,EAAE,CAEtC;aACR,CAAC,MAAM,CACN,CAAC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC;gBAClB,CAAC,CAAC;oBACE,KAAC,IAAI,kBACH,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAC,WAAW,EAEhB,OAAO,EAAC,WAAW,6BADd,GAAG,CAAC,GAAG,CAAC,MAAM,CAId;iBACR;gBACH,CAAC,CAAC,EAAE,CACP;YACH,CAAC,CAAC,EAAE,CACP,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, Ref, PropsWithoutRef, forwardRef } from 'react';\nimport styled from 'styled-components';\n\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface MetaListProps extends BaseProps {\n  /** Array of nodes or text to be rendered in the list. */\n  items: ReactNode[];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledMetaList = styled.ul`\n  list-style: none;\n  white-space: nowrap;\n  overflow: hidden;\n`;\n\nexport const StyledMetaListItem = styled.li`\n  white-space: nowrap;\n  min-width: 0;\n  display: inline-block;\n\n  &:not([role='separator']) {\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n`;\n\nconst MetaList: FunctionComponent<MetaListProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MetaListProps>, ref: MetaListProps['ref']) => {\n    const { items, ...restProps } = props;\n    return (\n      <Flex\n        as={StyledMetaList}\n        container={{ gap: 0.5, alignItems: 'center' }}\n        ref={ref}\n        {...restProps}\n      >\n        {items.flatMap((item, i, arr) =>\n          item\n            ? [\n                <Text as={StyledMetaListItem} key={`${i + 0}`} variant='secondary'>\n                  {item}\n                </Text>\n              ].concat(\n                i !== arr.length - 1\n                  ? [\n                      <Text\n                        as={StyledMetaListItem}\n                        role='separator'\n                        key={`${i + 0}-sep`}\n                        variant='secondary'\n                      >\n                        •\n                      </Text>\n                    ]\n                  : []\n              )\n            : []\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default MetaList;\n"]}
+{"version":3,"file":"MetaList.js","sourceRoot":"","sources":["../../../src/components/MetaList/MetaList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsD,UAAU,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAe3B,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;;;;MAIN,CAAC,SAAS;QACZ,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACpF,OAAO,GAAG,CAAA;;;;MAIN,SAAS;QACX,GAAG,CAAA;;KAEF;;MAEC,CAAC,SAAS;QACZ,GAAG,CAAA;;;;KAIF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxD,OAAO,CACL,KAAC,IAAI,kBACH,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,EAClF,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,IACJ,SAAS,cAEZ,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAC9B,IAAI;YACF,CAAC,CAAC;gBACE,KAAC,IAAI,kBACH,EAAE,EAAE,kBAAkB,EAEtB,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,SAAS,gBAEnB,IAAI,KAJA,GAAG,CAAC,GAAG,CAAC,EAAE,CAKV;aACR,CAAC,MAAM,CACN,CAAC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC;gBAClB,CAAC,CAAC;oBACE,KAAC,IAAI,kBACH,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAC,WAAW,EAEhB,OAAO,EAAC,WAAW,6BADd,GAAG,CAAC,GAAG,CAAC,MAAM,CAId;iBACR;gBACH,CAAC,CAAC,EAAE,CACP;YACH,CAAC,CAAC,EAAE,CACP,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, Ref, PropsWithoutRef, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface MetaListProps extends BaseProps {\n  /** Array of nodes or text to be rendered in the list. */\n  items: ReactNode[];\n  /**\n   * If true, MetaList items that extend past the MetaList's container will wrap to a new line.\n   * @default true\n   */\n  wrapItems?: boolean;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledMetaList = styled.ul<{ wrapItems: boolean }>(({ wrapItems }) => {\n  return css`\n    list-style: none;\n    overflow: hidden;\n\n    ${!wrapItems &&\n    css`\n      white-space: nowrap;\n    `}\n  `;\n});\n\nexport const StyledMetaListItem = styled.li<{ wrapItems: boolean }>(({ wrapItems }) => {\n  return css`\n    min-width: 0;\n    display: inline-block;\n\n    ${wrapItems &&\n    css`\n      word-break: break-all;\n    `}\n\n    ${!wrapItems &&\n    css`\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    `}\n  `;\n});\n\nconst MetaList: FunctionComponent<MetaListProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MetaListProps>, ref: MetaListProps['ref']) => {\n    const { items, wrapItems = true, ...restProps } = props;\n    return (\n      <Flex\n        as={StyledMetaList}\n        container={{ gap: 0.5, alignItems: 'center', wrap: wrapItems ? 'wrap' : 'nowrap' }}\n        wrapItems={wrapItems}\n        ref={ref}\n        {...restProps}\n      >\n        {items.flatMap((item, i, arr) =>\n          item\n            ? [\n                <Text\n                  as={StyledMetaListItem}\n                  key={`${i + 0}`}\n                  variant='secondary'\n                  wrapItems={wrapItems}\n                >\n                  {item}\n                </Text>\n              ].concat(\n                i !== arr.length - 1\n                  ? [\n                      <Text\n                        as={StyledMetaListItem}\n                        role='separator'\n                        key={`${i + 0}-sep`}\n                        variant='secondary'\n                      >\n                        •\n                      </Text>\n                    ]\n                  : []\n              )\n            : []\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default MetaList;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"MultiStep.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAc3C,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAyF/C,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA+B/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"MultiStep.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAc3C,OAAO,cAAc,MAAM,mBAAmB,CAAC;AA4F/C,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA+B/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/MultiStep/MultiStep.js

@@ -20,6 +20,9 @@ const FormProgress = ({ steps, currentId, ...restProps }) => {
         popoverPlacement = 'top-start';
     else if (curIdx === steps.length - 1)
         popoverPlacement = 'top-end';
+    useEffect(() => {
+        setCurrentStepEl(stepRefs.current[curIdx]);
+    }, [stepRefs.current, curIdx]);
     return (_jsxs(StyledFormProgress, Object.assign({}, restProps, { container: { alignItems: 'center' }, role: 'progressbar', "aria-valuenow": curIdx, "aria-valuemin": 0, "aria-valuetext": curStep.name, "aria-valuemax": steps.length }, { children: [_jsx(CurrentStepPopover, Object.assign({ show: true, target: currentStepEl, placement: popoverPlacement, modifiers: [
                     {
                         name: 'offset',
@@ -32,8 +35,6 @@ const FormProgress = ({ steps, currentId, ...restProps }) => {
                     }
                 ] }, { children: _jsx(Text, Object.assign({ variant: 'h4' }, { children: curStep.name }), void 0) }), void 0), _jsx(Flex, Object.assign({ container: { justify: 'between', alignItems: 'center' }, item: { grow: 1 } }, { children: steps.map((step, index) => {
                     return (_jsx(StepMarker, Object.assign({ ref: (el) => {
-                            if (index === curIdx)
-                                setCurrentStepEl(el);
                             stepRefs.current[index] = el;
                         }, "aria-label": step.name, "aria-describedby": step.id, current: index === curIdx, depth: step.depth, prior: index < curIdx, onClick: step.onClick }, { children: index !== curIdx && (_jsx(Tooltip, Object.assign({ id: step.id, target: stepRefs.current[index], showDelay: 'none', hideDelay: 'short', portal: false }, { children: step.name }), void 0)) }), step.id));
                 }) }), void 0), _jsx(StyledBar, { children: _jsx(StyledFill, { style: { '--fillScale': fillScale } }, void 0) }, void 0)] }), void 0));
@@ -49,7 +50,7 @@ const MultiStep = forwardRef(({ currentId, steps, ...restProps }, ref) => {
     return (_jsxs(Flex, Object.assign({ as: StyledMultiStep, ref: ref, container: {
             direction: 'column',
             gap: 3
-        } }, restProps, { children: [_jsx(FormProgress, { steps: steps, currentId: currentId }, void 0), _jsx(Form, Object.assign({ ref: multiStepContentRef, actions: currentStep.actions }, { children: currentStep.content }), void 0)] }), void 0));
+        } }, restProps, { children: [_jsx(FormProgress, { steps: steps, currentId: currentId }, void 0), _jsx(Form, Object.assign({ ref: multiStepContentRef, actions: currentStep.actions, banners: currentStep.banners }, { children: currentStep.content }), void 0)] }), void 0));
 });
 export default MultiStep;
 //# sourceMappingURL=MultiStep.js.map

package/lib/components/MultiStep/MultiStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiStep.js","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  CSSProperties,\n  useRef,\n  useEffect\n} from 'react';\n\nimport { useElement, useTheme } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { getFocusables, tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Form from '../Form';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\n\nimport StyledMultiStep, {\n  CurrentStepPopover,\n  StepMarker,\n  StyledBar,\n  StyledFill,\n  StyledFormProgress\n} from './MultiStep.styles';\nimport MultiStepProps from './MultiStep.types';\n\nconst FormProgress: FunctionComponent<MultiStepProps & ForwardProps> = ({\n  steps,\n  currentId,\n  ...restProps\n}: MultiStepProps) => {\n  const curIdx = steps.findIndex(step => step.id === currentId);\n  const curStep = steps[curIdx];\n  const fillScale = curIdx / (steps.length - 1);\n\n  const [currentStepEl, setCurrentStepEl] = useElement();\n  const stepRefs = useRef<HTMLElement[]>([]);\n  const theme = useTheme();\n\n  let popoverPlacement: 'top' | 'top-start' | 'top-end' = 'top';\n  if (curIdx === 0) popoverPlacement = 'top-start';\n  else if (curIdx === steps.length - 1) popoverPlacement = 'top-end';\n\n  return (\n    <StyledFormProgress\n      {...restProps}\n      container={{ alignItems: 'center' }}\n      role='progressbar'\n      aria-valuenow={curIdx}\n      aria-valuemin={0}\n      aria-valuetext={curStep.name}\n      aria-valuemax={steps.length}\n    >\n      <CurrentStepPopover\n        show\n        target={currentStepEl}\n        placement={popoverPlacement}\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: [\n                0,\n                tryCatch(\n                  () => stripUnit(remToPx(theme.base.spacing)),\n                  () => 8\n                )\n              ]\n            }\n          }\n        ]}\n      >\n        <Text variant='h4'>{curStep.name}</Text>\n      </CurrentStepPopover>\n      <Flex container={{ justify: 'between', alignItems: 'center' }} item={{ grow: 1 }}>\n        {steps.map((step, index) => {\n          return (\n            <StepMarker\n              key={step.id}\n              ref={(el: HTMLElement) => {\n                if (index === curIdx) setCurrentStepEl(el);\n                stepRefs.current[index] = el;\n              }}\n              aria-label={step.name}\n              aria-describedby={step.id}\n              current={index === curIdx}\n              depth={step.depth}\n              prior={index < curIdx}\n              onClick={step.onClick}\n            >\n              {index !== curIdx && (\n                <Tooltip\n                  id={step.id}\n                  target={stepRefs.current[index]}\n                  showDelay='none'\n                  hideDelay='short'\n                  portal={false}\n                >\n                  {step.name}\n                </Tooltip>\n              )}\n            </StepMarker>\n          );\n        })}\n      </Flex>\n\n      <StyledBar>\n        <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n      </StyledBar>\n    </StyledFormProgress>\n  );\n};\n\nconst MultiStep: FunctionComponent<MultiStepProps & ForwardProps> = forwardRef(\n  (\n    { currentId, steps, ...restProps }: PropsWithoutRef<MultiStepProps>,\n    ref: MultiStepProps['ref']\n  ) => {\n    const multiStepContentRef = useRef(null);\n    const currentStep = steps.find(step => step.id === currentId)!;\n\n    useEffect(() => {\n      const focusableElements = getFocusables(multiStepContentRef);\n\n      if (focusableElements.length) focusableElements[0].focus();\n    }, [currentId]);\n\n    return (\n      <Flex\n        as={StyledMultiStep}\n        ref={ref}\n        container={{\n          direction: 'column',\n          gap: 3\n        }}\n        {...restProps}\n      >\n        <FormProgress steps={steps} currentId={currentId} />\n        <Form ref={multiStepContentRef} actions={currentStep.actions}>\n          {currentStep.content}\n        </Form>\n      </Flex>\n    );\n  }\n);\n\nexport default MultiStep;\n"]}
+{"version":3,"file":"MultiStep.js","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  CSSProperties,\n  useRef,\n  useEffect\n} from 'react';\n\nimport { useElement, useTheme } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { getFocusables, tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Form from '../Form';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\n\nimport StyledMultiStep, {\n  CurrentStepPopover,\n  StepMarker,\n  StyledBar,\n  StyledFill,\n  StyledFormProgress\n} from './MultiStep.styles';\nimport MultiStepProps from './MultiStep.types';\n\nconst FormProgress: FunctionComponent<MultiStepProps & ForwardProps> = ({\n  steps,\n  currentId,\n  ...restProps\n}: MultiStepProps) => {\n  const curIdx = steps.findIndex(step => step.id === currentId);\n  const curStep = steps[curIdx];\n  const fillScale = curIdx / (steps.length - 1);\n\n  const [currentStepEl, setCurrentStepEl] = useElement();\n  const stepRefs = useRef<HTMLElement[]>([]);\n  const theme = useTheme();\n\n  let popoverPlacement: 'top' | 'top-start' | 'top-end' = 'top';\n  if (curIdx === 0) popoverPlacement = 'top-start';\n  else if (curIdx === steps.length - 1) popoverPlacement = 'top-end';\n\n  useEffect(() => {\n    setCurrentStepEl(stepRefs.current[curIdx]);\n  }, [stepRefs.current, curIdx]);\n\n  return (\n    <StyledFormProgress\n      {...restProps}\n      container={{ alignItems: 'center' }}\n      role='progressbar'\n      aria-valuenow={curIdx}\n      aria-valuemin={0}\n      aria-valuetext={curStep.name}\n      aria-valuemax={steps.length}\n    >\n      <CurrentStepPopover\n        show\n        target={currentStepEl}\n        placement={popoverPlacement}\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: [\n                0,\n                tryCatch(\n                  () => stripUnit(remToPx(theme.base.spacing)),\n                  () => 8\n                )\n              ]\n            }\n          }\n        ]}\n      >\n        <Text variant='h4'>{curStep.name}</Text>\n      </CurrentStepPopover>\n      <Flex container={{ justify: 'between', alignItems: 'center' }} item={{ grow: 1 }}>\n        {steps.map((step, index) => {\n          return (\n            <StepMarker\n              key={step.id}\n              ref={(el: HTMLElement) => {\n                stepRefs.current[index] = el;\n              }}\n              aria-label={step.name}\n              aria-describedby={step.id}\n              current={index === curIdx}\n              depth={step.depth}\n              prior={index < curIdx}\n              onClick={step.onClick}\n            >\n              {index !== curIdx && (\n                <Tooltip\n                  id={step.id}\n                  target={stepRefs.current[index]}\n                  showDelay='none'\n                  hideDelay='short'\n                  portal={false}\n                >\n                  {step.name}\n                </Tooltip>\n              )}\n            </StepMarker>\n          );\n        })}\n      </Flex>\n\n      <StyledBar>\n        <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n      </StyledBar>\n    </StyledFormProgress>\n  );\n};\n\nconst MultiStep: FunctionComponent<MultiStepProps & ForwardProps> = forwardRef(\n  (\n    { currentId, steps, ...restProps }: PropsWithoutRef<MultiStepProps>,\n    ref: MultiStepProps['ref']\n  ) => {\n    const multiStepContentRef = useRef(null);\n    const currentStep = steps.find(step => step.id === currentId)!;\n\n    useEffect(() => {\n      const focusableElements = getFocusables(multiStepContentRef);\n\n      if (focusableElements.length) focusableElements[0].focus();\n    }, [currentId]);\n\n    return (\n      <Flex\n        as={StyledMultiStep}\n        ref={ref}\n        container={{\n          direction: 'column',\n          gap: 3\n        }}\n        {...restProps}\n      >\n        <FormProgress steps={steps} currentId={currentId} />\n        <Form ref={multiStepContentRef} actions={currentStep.actions} banners={currentStep.banners}>\n          {currentStep.content}\n        </Form>\n      </Flex>\n    );\n  }\n);\n\nexport default MultiStep;\n"]}

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

@@ -18,6 +18,8 @@ export interface Step {
     disabled?: boolean;
     /** A set of Action Buttons to render for the step. */
     actions?: ReactNode;
+    /** Banners to render for the step */
+    banners?: ReactNode;
     /** Content to render for the step. */
     content?: ReactNode;
     /** Callback function that is called when a step marker is clicked. */

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

@@ -1 +1 @@
-{"version":3,"file":"MultiStep.types.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,WAAW,IAAI;IACnB,kEAAkE;IAClE,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACd,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sEAAsE;IACtE,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,CAAC,OAAO,WAAW,cAAe,SAAQ,SAAS;IACvD,kDAAkD;IAClD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,6BAA6B;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
+{"version":3,"file":"MultiStep.types.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,WAAW,IAAI;IACnB,kEAAkE;IAClE,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACd,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,qCAAqC;IACrC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sEAAsE;IACtE,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,CAAC,OAAO,WAAW,cAAe,SAAQ,SAAS;IACvD,kDAAkD;IAClD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,6BAA6B;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

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

@@ -1 +1 @@
-{"version":3,"file":"MultiStep.types.js","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport { BaseProps } from '../../types';\n\nexport interface Step {\n  /** The id that is referenced by the Multi Step currentId prop. */\n  id: string;\n  /** The displayed name of the step. */\n  name: string;\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  /** Applies styles for the completed state. */\n  complete?: boolean;\n  /** Applies styles for the required state. */\n  required?: boolean;\n  /** Applies styles for the disabled state. */\n  disabled?: boolean;\n  /** A set of Action Buttons to render for the step. */\n  actions?: ReactNode;\n  /** Content to render for the step. */\n  content?: ReactNode;\n  /** Callback function that is called when a step marker is clicked. */\n  onClick?: MouseEventHandler;\n}\n\nexport default interface MultiStepProps extends BaseProps {\n  /** Flat array of objects describing each step. */\n  steps: Step[];\n  /** Sets the current step. */\n  currentId: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"MultiStep.types.js","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport { BaseProps } from '../../types';\n\nexport interface Step {\n  /** The id that is referenced by the Multi Step currentId prop. */\n  id: string;\n  /** The displayed name of the step. */\n  name: string;\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  /** Applies styles for the completed state. */\n  complete?: boolean;\n  /** Applies styles for the required state. */\n  required?: boolean;\n  /** Applies styles for the disabled state. */\n  disabled?: boolean;\n  /** A set of Action Buttons to render for the step. */\n  actions?: ReactNode;\n  /** Banners to render for the step */\n  banners?: ReactNode;\n  /** Content to render for the step. */\n  content?: ReactNode;\n  /** Callback function that is called when a step marker is clicked. */\n  onClick?: MouseEventHandler;\n}\n\nexport default interface MultiStepProps extends BaseProps {\n  /** Flat array of objects describing each step. */\n  steps: Step[];\n  /** Sets the current step. */\n  currentId: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/Number/NumberInput.js

@@ -73,10 +73,10 @@ const NumberInput = forwardRef((props, ref) => {
     const onPlusClick = () => {
         onChange?.(getIncrementedValue(value, min, max, step));
     };
-    const StepperComp = (_jsxs(Flex, Object.assign({ as: StyledStepperInput, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, unitPlacement: unitPlacement }, { children: [_jsx(Button, Object.assign({ variant: 'simple', icon: true, onClick: onMinusClick, "aria-label": t('number_decrement_value_by', step), readOnly: readOnly, disabled: disabled, tabIndex: -1 }, { children: _jsx(Icon, { name: 'minus' }, void 0) }), void 0), _jsx(Flex, Object.assign({ container: { alignItems: 'center', wrap: 'nowrap', justify: 'center' }, item: { grow: 1 }, ref: containerRef, onClick: (e) => {
+    const StepperComp = (_jsxs(Flex, Object.assign({ as: StyledStepperInput, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, unitPlacement: unitPlacement }, { children: [_jsx(Button, Object.assign({ variant: 'simple', icon: true, onClick: onMinusClick, "aria-label": t('number_decrement_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1 }, { children: _jsx(Icon, { name: 'minus' }, void 0) }), void 0), _jsx(Flex, Object.assign({ container: { alignItems: 'center', wrap: 'nowrap', justify: 'center' }, item: { grow: 1 }, ref: containerRef, onClick: (e) => {
                     if (e.target === containerRef.current)
                         inputRef?.current?.focus();
-                } }, { children: NumberInputComp }), void 0), _jsx(Button, Object.assign({ variant: 'simple', icon: true, onClick: onPlusClick, "aria-label": t('number_increment_value_by', step), readOnly: readOnly, disabled: disabled, tabIndex: -1 }, { children: _jsx(Icon, { name: 'plus' }, void 0) }), void 0)] }), void 0));
+                } }, { children: NumberInputComp }), void 0), _jsx(Button, Object.assign({ variant: 'simple', icon: true, onClick: onPlusClick, "aria-label": t('number_increment_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1 }, { children: _jsx(Icon, { name: 'plus' }, void 0) }), void 0)] }), void 0));
     const NumberComp = (_jsx(Flex, Object.assign({ as: StyledNumberInput, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled }, { children: NumberInputComp }), void 0));
     const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;
     return label ? (_jsx(FormField, Object.assign({}, { label, labelHidden, id, info, status, required, disabled }, { children: Comp }), void 0)) : (Comp);

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,OAAO,KAAK,MAAM,UAAU,CAAC;AAC7B,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEpF,OAAO,iBAAiB,EAAE,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC7E,OAAyB,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EACL,eAAe,EACf,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACX,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAA4B,EAAE,EAAE;IACzE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,EAAE,GAAG,GAAG,EACR,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,aAAa,GAAG,OAAO,EACvB,WAAW,GAAG,IAAI,EAClB,gBAAgB,EAAE,oBAAoB,GAAG,yBAAyB,EAClE,mBAAmB,GAAG,IAAI,EAC1B,GAAG,GAAG,MAAM,CAAC,gBAAgB,EAC7B,GAAG,GAAG,MAAM,CAAC,gBAAgB,EAC7B,IAAI,GAAG,CAAC,EACR,OAAO,EACP,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,YAAY,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC/C,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,EAC9C,CAAC,WAAW,EAAE,oBAAoB,CAAC,CACpC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtD,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CACH,iBAAiB,CACf,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EACxC,MAAM,EACN,mBAAmB,EACnB,gBAAgB,CACjB,EACH,CAAC,WAAW,EAAE,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,CAAC,CACpE,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAgC,EAAE,EAAE;QACnC,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAClC,MAAM,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC;QAC/C,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;QACnC,MAAM,iBAAiB,GAAG,eAAe,CAAC,UAAU,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC;QACjF,IAAI,iBAAiB,KAAK,KAAK;YAAE,OAAO;QACxC,QAAQ,EAAE,CAAC,iBAAiB,CAAC,CAAC;QAC9B,IAAI,cAAc,KAAK,SAAS,IAAI,cAAc,KAAK,IAAI,EAAE;YAC3D,MAAM,YAAY,GAAG,iBAAiB,CACpC,iBAAiB,EACjB,MAAM,EACN,mBAAmB,EACnB,gBAAgB,CACjB,CAAC;YACF,MAAM,cAAc,GAClB,cAAc,GAAG,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YACtE,SAAS,CAAC,cAAc,CAAC,CAAC;SAC3B;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,EAAE,mBAAmB,CAAC,CACtF,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,EAAmC,EAAE,EAAE;QACtC,IAAI,QAAQ;YAAE,OAAO;QACrB,QAAQ,EAAE,CAAC,GAAG,EAAE;YACd,KAAK,SAAS;gBACZ,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,QAAQ,EAAE,CAAC,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;gBACvD,MAAM;YACR,KAAK,WAAW;gBACd,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,QAAQ,EAAE,CAAC,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;gBACvD,MAAM;YACR,QAAQ;SACT;IACH,CAAC,EACD,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,CAAC,CAClC,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,aAAa,GAAG,KAAK,CAAC;QAC1B,IAAI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE;YACnC,aAAa,GAAG,EAAE,CAAC;SACpB;aAAM,IAAI,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;YAC/B,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SACpC;QACD,MAAM,EAAE,CAAC,aAAa,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,iBAAiB,GAAW,OAAO,CAAC,GAAG,EAAE;QAC7C,OAAO,CACL,SAAS;YACT,GAAG,CAAC,CAAC,eAAe,CAAC,IAAI,eAAe,GAAG,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,KAAK,IACxE,IAAI,IAAI,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,IAAI,IAAI,IAAI,EAC7C,GAAG,CACJ,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,eAAe,GAAG,CACtB,8BACG,IAAI,IAAI,aAAa,KAAK,QAAQ,IAAI,KAAC,IAAI,cAAE,IAAI,WAAQ,EAC1D,KAAC,KAAK,kBACJ,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,WAAW,gBACP,iBAAiB,IACzB,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,UACvF,EACD,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,KAAC,IAAI,cAAE,IAAI,WAAQ,YACxD,CACJ,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,QAAQ,EAAE,CAAC,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,QAAQ,EAAE,CAAC,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAClB,MAAC,IAAI,kBACH,EAAE,EAAE,kBAAkB,EACtB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EACnD,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,cAAc,EAAE,MAAM,EAC5B,aAAa,EAAE,aAAa,iBAE5B,KAAC,MAAM,kBACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,YAAY,gBACT,CAAC,CAAC,2BAA2B,EAAE,IAAI,CAAC,EAChD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,gBAEZ,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,YACd,EACT,KAAC,IAAI,kBACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EACtE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,GAAG,EAAE,YAAY,EACjB,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;oBACzB,IAAI,CAAC,CAAC,MAAM,KAAK,YAAY,CAAC,OAAO;wBAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;gBACpE,CAAC,gBAEA,eAAe,YACX,EACP,KAAC,MAAM,kBACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,WAAW,gBACR,CAAC,CAAC,2BAA2B,EAAE,IAAI,CAAC,EAChD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,gBAEZ,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG,YACb,aACJ,CACR,CAAC;IAEF,MAAM,UAAU,GAAG,CACjB,KAAC,IAAI,kBACH,EAAE,EAAE,iBAAiB,EACrB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EACnD,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,gBAEjB,eAAe,YACX,CACR,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC;IAE3E,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,oBAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,cACxE,IAAI,YACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport Input from '../Input';\nimport { useConfiguration, useConsolidatedRef, useI18n, useUID } from '../../hooks';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport NumberInputProps, { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n  getCleanedValue,\n  getDecimal,\n  getDecrementedValue,\n  getFormattedValue,\n  getIncrementedValue,\n  getInteger\n} from './utils';\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      status,\n      label,\n      labelHidden,\n      info,\n      required,\n      disabled,\n      readOnly,\n      value = '',\n      onChange,\n      onBlur,\n      unit,\n      unitPlacement = 'after',\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      ...restProps\n    } = props;\n\n    const { locale } = useConfiguration();\n    const [cursor, setCursor] = useState(0);\n    const inputRef = useConsolidatedRef(ref);\n    const containerRef = useRef<HTMLElement>(null);\n    const numberOfDecimals = useMemo(\n      () => (showDecimal ? numberOfDecimalsProp : 0),\n      [showDecimal, numberOfDecimalsProp]\n    );\n\n    useEffect(() => {\n      inputRef.current?.setSelectionRange(cursor, cursor);\n    }, [cursor]);\n\n    const formattedValue = useMemo(\n      () =>\n        getFormattedValue(\n          !showDecimal ? getInteger(value) : value,\n          locale,\n          showGroupSeparators,\n          numberOfDecimals\n        ),\n      [showDecimal, value, numberOfDecimals, showGroupSeparators, locale]\n    );\n\n    const onInputChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const selectionStart = e.target.selectionStart;\n        const decimal = getDecimal(locale);\n        const cleanedInputValue = getCleanedValue(inputValue, decimal, numberOfDecimals);\n        if (cleanedInputValue === value) return;\n        onChange?.(cleanedInputValue);\n        if (selectionStart !== undefined && selectionStart !== null) {\n          const formattedVal = getFormattedValue(\n            cleanedInputValue,\n            locale,\n            showGroupSeparators,\n            numberOfDecimals\n          );\n          const cursorPosition =\n            selectionStart + (formattedVal.length - e.target.value.length) || 1;\n          setCursor(cursorPosition);\n        }\n      },\n      [onChange, locale, value, numberOfDecimals, showDecimal, cursor, showGroupSeparators]\n    );\n\n    const onKeyDown = useCallback(\n      (ev: KeyboardEvent<HTMLInputElement>) => {\n        if (readOnly) return;\n        switch (ev.key) {\n          case 'ArrowUp':\n            ev.preventDefault();\n            onChange?.(getIncrementedValue(value, min, max, step));\n            break;\n          case 'ArrowDown':\n            ev.preventDefault();\n            onChange?.(getDecrementedValue(value, min, max, step));\n            break;\n          default:\n        }\n      },\n      [value, min, max, step, onChange]\n    );\n\n    const onInputBlur = useCallback(() => {\n      let parsableValue = value;\n      if (Number.isNaN(parseFloat(value))) {\n        parsableValue = '';\n      } else if (value?.endsWith('.')) {\n        parsableValue = value.slice(0, -1);\n      }\n      onBlur?.(parsableValue);\n    }, [value]);\n\n    const t = useI18n();\n\n    const computedAriaLabel: string = useMemo(() => {\n      return (\n        ariaLabel ||\n        `${t('numeric_input') || 'Numeric Input'}${(label || unit) && ':'} ${label} ${\n          unit && `${t('measured_in') || 'in'} ${unit}`\n        }.`\n      );\n    }, [ariaLabel]);\n\n    const NumberInputComp = (\n      <>\n        {unit && unitPlacement === 'before' && <Text>{unit}</Text>}\n        <Input\n          inputMode='numeric'\n          ref={inputRef}\n          value={formattedValue}\n          onKeyDown={onKeyDown}\n          onBlur={onInputBlur}\n          aria-label={computedAriaLabel}\n          {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n        />\n        {unit && unitPlacement === 'after' && <Text>{unit}</Text>}\n      </>\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 StepperComp = (\n      <Flex\n        as={StyledStepperInput}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        size={formattedValue?.length}\n        unitPlacement={unitPlacement}\n      >\n        <Button\n          variant='simple'\n          icon\n          onClick={onMinusClick}\n          aria-label={t('number_decrement_value_by', step)}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\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          {NumberInputComp}\n        </Flex>\n        <Button\n          variant='simple'\n          icon\n          onClick={onPlusClick}\n          aria-label={t('number_increment_value_by', step)}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\n        >\n          <Icon name='plus' />\n        </Button>\n      </Flex>\n    );\n\n    const NumberComp = (\n      <Flex\n        as={StyledNumberInput}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        {NumberInputComp}\n      </Flex>\n    );\n\n    const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default NumberInput;\n"]}
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport Input from '../Input';\nimport { useConfiguration, useConsolidatedRef, useI18n, useUID } from '../../hooks';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport NumberInputProps, { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n  getCleanedValue,\n  getDecimal,\n  getDecrementedValue,\n  getFormattedValue,\n  getIncrementedValue,\n  getInteger\n} from './utils';\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      status,\n      label,\n      labelHidden,\n      info,\n      required,\n      disabled,\n      readOnly,\n      value = '',\n      onChange,\n      onBlur,\n      unit,\n      unitPlacement = 'after',\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      ...restProps\n    } = props;\n\n    const { locale } = useConfiguration();\n    const [cursor, setCursor] = useState(0);\n    const inputRef = useConsolidatedRef(ref);\n    const containerRef = useRef<HTMLElement>(null);\n    const numberOfDecimals = useMemo(\n      () => (showDecimal ? numberOfDecimalsProp : 0),\n      [showDecimal, numberOfDecimalsProp]\n    );\n\n    useEffect(() => {\n      inputRef.current?.setSelectionRange(cursor, cursor);\n    }, [cursor]);\n\n    const formattedValue = useMemo(\n      () =>\n        getFormattedValue(\n          !showDecimal ? getInteger(value) : value,\n          locale,\n          showGroupSeparators,\n          numberOfDecimals\n        ),\n      [showDecimal, value, numberOfDecimals, showGroupSeparators, locale]\n    );\n\n    const onInputChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const selectionStart = e.target.selectionStart;\n        const decimal = getDecimal(locale);\n        const cleanedInputValue = getCleanedValue(inputValue, decimal, numberOfDecimals);\n        if (cleanedInputValue === value) return;\n        onChange?.(cleanedInputValue);\n        if (selectionStart !== undefined && selectionStart !== null) {\n          const formattedVal = getFormattedValue(\n            cleanedInputValue,\n            locale,\n            showGroupSeparators,\n            numberOfDecimals\n          );\n          const cursorPosition =\n            selectionStart + (formattedVal.length - e.target.value.length) || 1;\n          setCursor(cursorPosition);\n        }\n      },\n      [onChange, locale, value, numberOfDecimals, showDecimal, cursor, showGroupSeparators]\n    );\n\n    const onKeyDown = useCallback(\n      (ev: KeyboardEvent<HTMLInputElement>) => {\n        if (readOnly) return;\n        switch (ev.key) {\n          case 'ArrowUp':\n            ev.preventDefault();\n            onChange?.(getIncrementedValue(value, min, max, step));\n            break;\n          case 'ArrowDown':\n            ev.preventDefault();\n            onChange?.(getDecrementedValue(value, min, max, step));\n            break;\n          default:\n        }\n      },\n      [value, min, max, step, onChange]\n    );\n\n    const onInputBlur = useCallback(() => {\n      let parsableValue = value;\n      if (Number.isNaN(parseFloat(value))) {\n        parsableValue = '';\n      } else if (value?.endsWith('.')) {\n        parsableValue = value.slice(0, -1);\n      }\n      onBlur?.(parsableValue);\n    }, [value]);\n\n    const t = useI18n();\n\n    const computedAriaLabel: string = useMemo(() => {\n      return (\n        ariaLabel ||\n        `${t('numeric_input') || 'Numeric Input'}${(label || unit) && ':'} ${label} ${\n          unit && `${t('measured_in') || 'in'} ${unit}`\n        }.`\n      );\n    }, [ariaLabel]);\n\n    const NumberInputComp = (\n      <>\n        {unit && unitPlacement === 'before' && <Text>{unit}</Text>}\n        <Input\n          inputMode='numeric'\n          ref={inputRef}\n          value={formattedValue}\n          onKeyDown={onKeyDown}\n          onBlur={onInputBlur}\n          aria-label={computedAriaLabel}\n          {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n        />\n        {unit && unitPlacement === 'after' && <Text>{unit}</Text>}\n      </>\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 StepperComp = (\n      <Flex\n        as={StyledStepperInput}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        size={formattedValue?.length}\n        unitPlacement={unitPlacement}\n      >\n        <Button\n          variant='simple'\n          icon\n          onClick={onMinusClick}\n          aria-label={t('number_decrement_value_by', [step])}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\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          {NumberInputComp}\n        </Flex>\n        <Button\n          variant='simple'\n          icon\n          onClick={onPlusClick}\n          aria-label={t('number_increment_value_by', [step])}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\n        >\n          <Icon name='plus' />\n        </Button>\n      </Flex>\n    );\n\n    const NumberComp = (\n      <Flex\n        as={StyledNumberInput}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        {NumberInputComp}\n      </Flex>\n    );\n\n    const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default NumberInput;\n"]}

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

@@ -1,5 +1,5 @@
 export declare const StyledSkipNavigation: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").ButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledNavItem: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../Tabs/Tab").StyledTabProps, never>;
+export declare const StyledNavItem: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button/BareButton").BareButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, import("../Tabs/Tab").StyledTabProps, never>;
 export declare const StyledNavGroupHeader: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Text").TextProps & import("../..").ForwardProps>, 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<"div", import("styled-components").DefaultTheme, {}, never>;

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,qMAoB/B,CAAC;AAEH,eAAO,MAAM,aAAa,8IAgExB,CAAC;AAGH,eAAO,MAAM,oBAAoB,iMAa/B,CAAC;AAGH,eAAO,MAAM,kBAAkB,wGAAc,CAAC;AAE9C,eAAO,MAAM,cAAc,yGAazB,CAAC;AAGH,eAAO,MAAM,aAAa,wGAwBxB,CAAC;AAEH,eAAO,MAAM,SAAS,yGAAe,CAAC;AAEtC,eAAO,MAAM,uBAAuB,yGAsBlC,CAAC;AAGH,eAAO,MAAM,wBAAwB,yGAcnC,CAAC;AAGH,eAAO,MAAM,gBAAgB,yGAuC3B,CAAC;AAGH,eAAO,MAAM,eAAe,wGAe1B,CAAC;AAGH,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAEhD,eAAO,MAAM,mBAAmB,4GAc9B,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,qMAoB/B,CAAC;AAEH,eAAO,MAAM,aAAa,sPAgExB,CAAC;AAGH,eAAO,MAAM,oBAAoB,iMAa/B,CAAC;AAGH,eAAO,MAAM,kBAAkB,wGAAc,CAAC;AAE9C,eAAO,MAAM,cAAc,yGAazB,CAAC;AAGH,eAAO,MAAM,aAAa,wGAwBxB,CAAC;AAEH,eAAO,MAAM,SAAS,yGAAe,CAAC;AAEtC,eAAO,MAAM,uBAAuB,yGAsBlC,CAAC;AAGH,eAAO,MAAM,wBAAwB,yGAcnC,CAAC;AAGH,eAAO,MAAM,gBAAgB,yGAuC3B,CAAC;AAGH,eAAO,MAAM,eAAe,wGAe1B,CAAC;AAGH,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAEhD,eAAO,MAAM,mBAAmB,4GAc9B,CAAC;AAGH,eAAO,MAAM,iBAAiB,6GA0B5B,CAAC;AAGH,eAAO,MAAM,iBAAiB,yGAe5B,CAAC;AAGH,eAAO,MAAM,cAAc,yGAG1B,CAAC"}

package/lib/components/PageTemplates/DashboardPage.d.ts

@@ -12,7 +12,7 @@ export interface DashboardPageLayoutProps extends PageLayoutProps {
     filterPosition?: 'block-start' | 'inline-start' | 'inline-end';
     regionFullWidth: ReactNode[];
 }
-export declare const StyledFilterRegionLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFilterRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const DashboardPage: FunctionComponent<DashboardPageProps & ForwardProps>;
 export default DashboardPage;
 //# sourceMappingURL=DashboardPage.d.ts.map

package/lib/components/PageTemplates/DashboardPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,OAAO,EACL,iBAAiB,EACjB,eAAe,EAKhB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,wBAAyB,SAAQ,eAAe;IAC/D,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IAC/D,eAAe,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED,eAAO,MAAM,wBAAwB,yGAAe,CAAC;AAmLrD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAgBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DashboardPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,EACL,iBAAiB,EACjB,eAAe,EAKhB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,wBAAyB,SAAQ,eAAe;IAC/D,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IAC/D,eAAe,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,yGAAyB,CAAC;AAsLzD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAgBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/PageTemplates/DashboardPage.js

@@ -6,9 +6,10 @@ import Grid from '../Grid';
 import Text from '../Text';
 import SummaryItem from '../SummaryItem';
 import Icon from '../Icon';
-import { StyledPageLayout, StyledBreadcrumbs, StyledPageHeader, StyledPageIcon } from './PageTemplates';
-export const StyledFilterRegionLayout = styled.div ``;
-StyledFilterRegionLayout.defaultProps = defaultThemeProp;
+import Breadcrumbs from '../Breadcrumbs';
+import { StyledPageLayout, StyledPageHeader, StyledPageIcon, StyledRegion } from './PageTemplates';
+export const StyledFilterRegion = styled(StyledRegion) ``;
+StyledFilterRegion.defaultProps = defaultThemeProp;
 const DashboardPageLayout = forwardRef(({ regions, regionFullWidth, cols = `repeat(${regions.length}, minmax(0, 1fr))`, filters, filterPosition = 'block-start', title, icon, actions, banners, path, as, ...restProps }, ref) => {
     const headerArea = useMemo(() => {
         if (filterPosition === 'block-start' || !filters || Object.keys(filters).length === 0) {
@@ -65,14 +66,15 @@ const DashboardPageLayout = forwardRef(({ regions, regionFullWidth, cols = `repe
     return (_jsxs(Grid, Object.assign({}, restProps, { as: StyledPageLayout, forwardedAs: as, container: {
             autoRows: 'max-content',
             cols: '1fr',
-            gap: 2
+            gap: 2,
+            pad: 2
         }, md: {
             container: {
                 areas: gridAreas,
                 rows: pageRows,
                 cols
             }
-        }, ref: ref }, { children: [_jsxs(Grid, Object.assign({ as: StyledPageHeader, md: { item: { area: 'header' } } }, { children: [path && path.length > 0 && _jsx(StyledBreadcrumbs, { path: path }, void 0), _jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, Object.assign({ container: { alignItems: 'center', justify: 'center' } }, { children: _jsx(Icon, { name: icon }, void 0) }), void 0)), primary: _jsx(Text, Object.assign({ variant: 'h1' }, { children: title }), void 0), actions: actions }, void 0)] }), void 0), banners && _jsx(Grid, Object.assign({ md: { item: { area: 'banner' } } }, { children: banners }), void 0), filters && Object.keys(filters).length !== 0 && (_jsx(Grid, Object.assign({ as: StyledFilterRegionLayout, container: {
+        }, ref: ref }, { children: [_jsxs(Grid, Object.assign({ as: StyledPageHeader, md: { item: { area: 'header' } } }, { children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }, void 0), _jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, Object.assign({ container: { alignItems: 'center', justify: 'center' } }, { children: _jsx(Icon, { name: icon }, void 0) }), void 0)), primary: _jsx(Text, Object.assign({ variant: 'h1' }, { children: title }), void 0), actions: actions }, void 0)] }), void 0), banners && _jsx(Grid, Object.assign({ md: { item: { area: 'banner' } } }, { children: banners }), void 0), filters && Object.keys(filters).length !== 0 && (_jsx(Grid, Object.assign({ as: StyledFilterRegion, container: {
                     autoRows: 'max-content',
                     pad: 2,
                     gap: 2
@@ -87,14 +89,14 @@ const DashboardPageLayout = forwardRef(({ regions, regionFullWidth, cols = `repe
                         cols: 'minmax(0, 1fr)',
                         alignItems: 'start',
                         gap: 2
-                    }, md: { item: { area: `col-${i + 1}` } } }, { children: colItems }), key));
+                    }, md: { item: { area: `col-${i + 1}` } }, as: StyledRegion }, { children: colItems }), key));
             }), regionFullWidth.map((colItems, i) => {
                 const key = `${i}`;
                 return (_jsx(Grid, Object.assign({ container: {
                         cols: 'minmax(0, 1fr)',
                         alignItems: 'start',
                         gap: 2
-                    }, md: { item: { area: 'col-full-width' } } }, { children: colItems }), key));
+                    }, md: { item: { area: 'col-full-width' } }, as: StyledRegion }, { children: colItems }), key));
             })] }), void 0));
 });
 const DashboardPage = forwardRef(({ a, b, c, filters, ...restProps }, ref) => {

package/lib/components/PageTemplates/DashboardPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\n\nimport {\n  PageTemplateProps,\n  PageLayoutProps,\n  StyledPageLayout,\n  StyledBreadcrumbs,\n  StyledPageHeader,\n  StyledPageIcon\n} from './PageTemplates';\n\nexport interface DashboardPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n  filters?: ReactNode[];\n}\n\nexport interface DashboardPageLayoutProps extends PageLayoutProps {\n  filters?: ReactNode[];\n  filterPosition?: 'block-start' | 'inline-start' | 'inline-end';\n  regionFullWidth: ReactNode[];\n}\n\nexport const StyledFilterRegionLayout = styled.div``;\n\nStyledFilterRegionLayout.defaultProps = defaultThemeProp;\n\nconst DashboardPageLayout: FunctionComponent<DashboardPageLayoutProps & ForwardProps> = forwardRef(\n  (\n    {\n      regions,\n      regionFullWidth,\n      cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n      filters,\n      filterPosition = 'block-start',\n      title,\n      icon,\n      actions,\n      banners,\n      path,\n      as,\n      ...restProps\n    }: PropsWithoutRef<DashboardPageLayoutProps>,\n    ref: PageLayoutProps['ref']\n  ) => {\n    const headerArea = useMemo(() => {\n      if (filterPosition === 'block-start' || !filters || Object.keys(filters).length === 0) {\n        return `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;\n      }\n      return `'${Array.from({ length: regions.length + 1 }, () => 'header').join(' ')}'`;\n    }, [filterPosition, filters, regions.length]);\n\n    const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;\n    const filterArea = `'${Array.from({ length: regions.length }, () => 'filter').join(' ')}'`;\n\n    const regionArea = useMemo(() => {\n      if (filters && Object.keys(filters).length !== 0) {\n        if (filterPosition === 'inline-start') {\n          return `'filter ${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n            ' '\n          )}'`;\n        }\n        if (filterPosition === 'inline-end') {\n          return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n            ' '\n          )} filter'`;\n        }\n      }\n      return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')}'`;\n    }, [filterPosition, filters, regions.length]);\n\n    const regionFullWidthArea = useMemo(() => {\n      if (filters && Object.keys(filters).length !== 0) {\n        if (filterPosition === 'inline-start') {\n          return `'filter ${Array.from({ length: regions.length }, () => 'col-full-width').join(\n            ' '\n          )}'`;\n        }\n        if (filterPosition === 'inline-end') {\n          return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(\n            ' '\n          )} filter'`;\n        }\n      }\n      return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(' ')}'`;\n    }, [filterPosition, filters, regions.length]);\n\n    const gridAreas = useMemo(() => {\n      if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n        return banners\n          ? `${headerArea}\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`\n          : `${headerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n      }\n      return banners\n        ? `${headerArea}\\n${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`\n        : `${headerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n    }, [filterPosition, filters, banners]);\n\n    const pageRows = useMemo(() => {\n      if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n        return banners ? 'auto auto auto 1fr 1fr' : 'auto auto 1fr 1fr';\n      }\n      return banners ? 'auto auto 1fr 1fr' : 'auto 1fr 1fr';\n    }, [filterPosition, banners]);\n\n    if (filterPosition === 'inline-start' && filters && Object.keys(filters).length !== 0) {\n      cols = '1fr 2fr 2fr';\n    }\n\n    if (filterPosition === 'inline-end' && filters && Object.keys(filters).length !== 0) {\n      cols = '2fr 2fr 1fr';\n    }\n\n    return (\n      <Grid\n        {...restProps}\n        as={StyledPageLayout}\n        forwardedAs={as}\n        container={{\n          autoRows: 'max-content',\n          cols: '1fr',\n          gap: 2\n        }}\n        md={{\n          container: {\n            areas: gridAreas,\n            rows: pageRows,\n            cols\n          }\n        }}\n        ref={ref}\n      >\n        <Grid as={StyledPageHeader} md={{ item: { area: 'header' } }}>\n          {path && path.length > 0 && <StyledBreadcrumbs path={...path} />}\n          <SummaryItem\n            visual={\n              icon && (\n                <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n                  <Icon name={icon} />\n                </StyledPageIcon>\n              )\n            }\n            primary={<Text variant='h1'>{title}</Text>}\n            actions={actions}\n          />\n        </Grid>\n        {banners && <Grid md={{ item: { area: 'banner' } }}>{banners}</Grid>}\n        {filters && Object.keys(filters).length !== 0 && (\n          <Grid\n            as={StyledFilterRegionLayout}\n            container={{\n              autoRows: 'max-content',\n              pad: 2,\n              gap: 2\n            }}\n            md={{\n              container: {\n                cols: 'repeat(auto-fit, minmax(min(20ch, 100%), 1fr))'\n              },\n              item: { area: 'filter' }\n            }}\n          >\n            {filters}\n          </Grid>\n        )}\n        {regions.map((colItems: ReactNode, i: number) => {\n          const key = `${i}`;\n          return (\n            <Grid\n              container={{\n                cols: 'minmax(0, 1fr)',\n                alignItems: 'start',\n                gap: 2\n              }}\n              md={{ item: { area: `col-${i + 1}` } }}\n              key={key}\n            >\n              {colItems}\n            </Grid>\n          );\n        })}\n        {regionFullWidth.map((colItems: ReactNode, i: number) => {\n          const key = `${i}`;\n          return (\n            <Grid\n              container={{\n                cols: 'minmax(0, 1fr)',\n                alignItems: 'start',\n                gap: 2\n              }}\n              md={{ item: { area: 'col-full-width' } }}\n              key={key}\n            >\n              {colItems}\n            </Grid>\n          );\n        })}\n      </Grid>\n    );\n  }\n);\n\nconst DashboardPage: FunctionComponent<DashboardPageProps & ForwardProps> = forwardRef(\n  (\n    { a, b, c, filters, ...restProps }: PropsWithoutRef<DashboardPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <DashboardPageLayout\n        {...restProps}\n        cols='1fr 1fr'\n        filters={filters}\n        regions={[a, b]}\n        regionFullWidth={[c]}\n        ref={ref}\n      />\n    );\n  }\n);\n\nexport default DashboardPage;\n"]}
+{"version":3,"file":"DashboardPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport Breadcrumbs from '../Breadcrumbs';\n\nimport {\n  PageTemplateProps,\n  PageLayoutProps,\n  StyledPageLayout,\n  StyledPageHeader,\n  StyledPageIcon,\n  StyledRegion\n} from './PageTemplates';\n\nexport interface DashboardPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n  filters?: ReactNode[];\n}\n\nexport interface DashboardPageLayoutProps extends PageLayoutProps {\n  filters?: ReactNode[];\n  filterPosition?: 'block-start' | 'inline-start' | 'inline-end';\n  regionFullWidth: ReactNode[];\n}\n\nexport const StyledFilterRegion = styled(StyledRegion)``;\n\nStyledFilterRegion.defaultProps = defaultThemeProp;\n\nconst DashboardPageLayout: FunctionComponent<DashboardPageLayoutProps & ForwardProps> = forwardRef(\n  (\n    {\n      regions,\n      regionFullWidth,\n      cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n      filters,\n      filterPosition = 'block-start',\n      title,\n      icon,\n      actions,\n      banners,\n      path,\n      as,\n      ...restProps\n    }: PropsWithoutRef<DashboardPageLayoutProps>,\n    ref: PageLayoutProps['ref']\n  ) => {\n    const headerArea = useMemo(() => {\n      if (filterPosition === 'block-start' || !filters || Object.keys(filters).length === 0) {\n        return `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;\n      }\n      return `'${Array.from({ length: regions.length + 1 }, () => 'header').join(' ')}'`;\n    }, [filterPosition, filters, regions.length]);\n\n    const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;\n    const filterArea = `'${Array.from({ length: regions.length }, () => 'filter').join(' ')}'`;\n\n    const regionArea = useMemo(() => {\n      if (filters && Object.keys(filters).length !== 0) {\n        if (filterPosition === 'inline-start') {\n          return `'filter ${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n            ' '\n          )}'`;\n        }\n        if (filterPosition === 'inline-end') {\n          return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n            ' '\n          )} filter'`;\n        }\n      }\n      return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')}'`;\n    }, [filterPosition, filters, regions.length]);\n\n    const regionFullWidthArea = useMemo(() => {\n      if (filters && Object.keys(filters).length !== 0) {\n        if (filterPosition === 'inline-start') {\n          return `'filter ${Array.from({ length: regions.length }, () => 'col-full-width').join(\n            ' '\n          )}'`;\n        }\n        if (filterPosition === 'inline-end') {\n          return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(\n            ' '\n          )} filter'`;\n        }\n      }\n      return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(' ')}'`;\n    }, [filterPosition, filters, regions.length]);\n\n    const gridAreas = useMemo(() => {\n      if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n        return banners\n          ? `${headerArea}\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`\n          : `${headerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n      }\n      return banners\n        ? `${headerArea}\\n${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`\n        : `${headerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n    }, [filterPosition, filters, banners]);\n\n    const pageRows = useMemo(() => {\n      if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n        return banners ? 'auto auto auto 1fr 1fr' : 'auto auto 1fr 1fr';\n      }\n      return banners ? 'auto auto 1fr 1fr' : 'auto 1fr 1fr';\n    }, [filterPosition, banners]);\n\n    if (filterPosition === 'inline-start' && filters && Object.keys(filters).length !== 0) {\n      cols = '1fr 2fr 2fr';\n    }\n\n    if (filterPosition === 'inline-end' && filters && Object.keys(filters).length !== 0) {\n      cols = '2fr 2fr 1fr';\n    }\n\n    return (\n      <Grid\n        {...restProps}\n        as={StyledPageLayout}\n        forwardedAs={as}\n        container={{\n          autoRows: 'max-content',\n          cols: '1fr',\n          gap: 2,\n          pad: 2\n        }}\n        md={{\n          container: {\n            areas: gridAreas,\n            rows: pageRows,\n            cols\n          }\n        }}\n        ref={ref}\n      >\n        <Grid as={StyledPageHeader} md={{ item: { area: 'header' } }}>\n          {path && path.length > 0 && <Breadcrumbs path={...path} />}\n          <SummaryItem\n            visual={\n              icon && (\n                <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n                  <Icon name={icon} />\n                </StyledPageIcon>\n              )\n            }\n            primary={<Text variant='h1'>{title}</Text>}\n            actions={actions}\n          />\n        </Grid>\n        {banners && <Grid md={{ item: { area: 'banner' } }}>{banners}</Grid>}\n        {filters && Object.keys(filters).length !== 0 && (\n          <Grid\n            as={StyledFilterRegion}\n            container={{\n              autoRows: 'max-content',\n              pad: 2,\n              gap: 2\n            }}\n            md={{\n              container: {\n                cols: 'repeat(auto-fit, minmax(min(20ch, 100%), 1fr))'\n              },\n              item: { area: 'filter' }\n            }}\n          >\n            {filters}\n          </Grid>\n        )}\n        {regions.map((colItems: ReactNode, i: number) => {\n          const key = `${i}`;\n          return (\n            <Grid\n              container={{\n                cols: 'minmax(0, 1fr)',\n                alignItems: 'start',\n                gap: 2\n              }}\n              md={{ item: { area: `col-${i + 1}` } }}\n              as={StyledRegion}\n              key={key}\n            >\n              {colItems}\n            </Grid>\n          );\n        })}\n        {regionFullWidth.map((colItems: ReactNode, i: number) => {\n          const key = `${i}`;\n          return (\n            <Grid\n              container={{\n                cols: 'minmax(0, 1fr)',\n                alignItems: 'start',\n                gap: 2\n              }}\n              md={{ item: { area: 'col-full-width' } }}\n              as={StyledRegion}\n              key={key}\n            >\n              {colItems}\n            </Grid>\n          );\n        })}\n      </Grid>\n    );\n  }\n);\n\nconst DashboardPage: FunctionComponent<DashboardPageProps & ForwardProps> = forwardRef(\n  (\n    { a, b, c, filters, ...restProps }: PropsWithoutRef<DashboardPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <DashboardPageLayout\n        {...restProps}\n        cols='1fr 1fr'\n        filters={filters}\n        regions={[a, b]}\n        regionFullWidth={[c]}\n        ref={ref}\n      />\n    );\n  }\n);\n\nexport default DashboardPage;\n"]}

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

@@ -1,13 +1,15 @@
-import { FunctionComponent, Ref, ReactNode } from 'react';
+import { FunctionComponent, Ref, ReactNode, ReactElement } from 'react';
 import { BaseProps, ForwardProps, NoChildrenProp, AsProp } from '../../types';
-import { TabsProps } from '../Tabs';
-import Breadcrumbs, { BreadcrumbsProps } from '../Breadcrumbs';
+import Tabs, { TabPanel, TabsProps } from '../Tabs';
+import { BreadcrumbsProps } from '../Breadcrumbs';
 export interface PageTemplateProps extends BaseProps, AsProp, NoChildrenProp {
     title: string;
     icon?: string;
     actions?: ReactNode;
     banners?: ReactNode;
     path?: BreadcrumbsProps['path'];
+    header?: ReactNode;
+    scrollContent?: boolean;
     ref?: Ref<HTMLDivElement>;
 }
 export interface TabbedPageProps extends PageTemplateProps {
@@ -56,15 +58,20 @@ export interface NarrowWideNarrowPageProps extends PageTemplateProps {
     c: ReactNode;
 }
 export interface PageLayoutProps extends PageTemplateProps {
+    tabs?: ReactElement<typeof Tabs>;
     regions: ReactNode[];
-    regionsGridRef?: Ref<HTMLDivElement>;
+    regionsRef?: Ref<HTMLDivElement>;
     cols?: string;
 }
-export declare const StyledPageLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPageHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledBannerRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPageIcon: import("styled-components").StyledComponent<FunctionComponent<import("../Flex").FlexProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledBreadcrumbs: typeof Breadcrumbs;
+export declare const StyledPageHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledRegions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledScrollableTabPanel: typeof TabPanel;
+export declare const StyledPageLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    scrollContent: PageLayoutProps['scrollContent'];
+}, never>;
 export declare const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps>;
 export declare const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps>;
 export declare const TwoColumnPage: FunctionComponent<TwoColumnPageProps & ForwardProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EACH,SAAS,EAEV,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAM9E,OAAa,EAAY,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpD,OAAO,WAAW,EAAE,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,MAAM,EAAE,cAAc;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,IAAI,EAAE,SAAS,CAAC;IAChB,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IAChE,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IAChE,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB;IAClE,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,cAAc,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,yGAM5B,CAAC;AAIF,eAAO,MAAM,gBAAgB,4GAK3B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,cAAc,iKAgBzB,CAAC;AAIH,eAAO,MAAM,iBAAiB,EAAE,OAAO,WAIrC,CAAC;AAsGH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAiCxE,CAAC;AACF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAI9E,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAI9E,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAIlF,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAOhF,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAIhF,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAIhF,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,GAAG,YAAY,CAQtF,CAAC;AAEJ,eAAO,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,GAAG,YAAY,CAQtF,CAAC;AAEJ,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAQ1F,CAAC"}
+{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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"}