@pega/cosmos-react-work 5.0.0-dev.4.8 → 5.0.0-dev.5.0

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

@@ -0,0 +1,100 @@
+import { Ref } from 'react';
+import { LinkProps, MetaListProps, NoChildrenProp, OmitStrict, RadioCheckProps, SearchInputProps } from '@pega/cosmos-react-core';
+interface BaseFilterProps {
+    /** The name of the filter. */
+    name: string;
+    /**
+     * Determines if the filter will start in an expanded state.
+     * @default true
+     */
+    expanded?: boolean;
+}
+export interface SelectFilterItemProps {
+    /** The id for the filter option. */
+    id: NonNullable<RadioCheckProps['id']>;
+    /** The label for the filter option. */
+    label: RadioCheckProps['label'];
+    /** Determines if the filter option is active or not. */
+    checked: RadioCheckProps['checked'];
+    /** The name for the filter item that will show in the selected filters section */
+    name: NonNullable<RadioCheckProps['name']>;
+}
+export interface SelectFilterProps extends BaseFilterProps {
+    /** Internal prop designating this object as a select filter. */
+    type: 'select';
+    /** The set of options for the filter. */
+    items: SelectFilterItemProps[];
+    /**
+     * Determines if the filter will render as a RadioButtonGroup or CheckboxGroup.
+     * @default 'multi-select'
+     */
+    selectType?: 'single-select' | 'multi-select';
+}
+export interface ActiveSelectFilter {
+    id: SelectFilterItemProps['id'];
+    name: SelectFilterItemProps['name'];
+    resetValue: SelectFilterItemProps & {
+        checked: false;
+    };
+    groupName: SelectFilterProps['name'];
+    type: SelectFilterProps['type'];
+}
+export interface TextFilterProps extends BaseFilterProps {
+    /** Internal prop designating this object as a text filter. */
+    type: 'text';
+    /** The value of the filter. */
+    value?: string;
+    /**
+     * Placeholder text. The default value is a locale translation of 'Search…'
+     * @default 'Search…'
+     */
+    placeholder?: string;
+}
+export type FilterProps = SelectFilterProps;
+export type ActiveFilters = ActiveSelectFilter;
+export interface SearchResultProps {
+    /** The id of the search result to be displayed. */
+    id: string;
+    /** The title of the search result. */
+    title: string;
+    /** LinkProps to be passed to . */
+    link: OmitStrict<LinkProps, 'children' | 'variant' | 'icon'>;
+    /** A description for the search result. */
+    description?: string;
+    /** A list of elements to be rendered within a MetaList categorizing the result. */
+    meta?: MetaListProps['items'];
+    /** Accents the search results with text that matches the regex */
+    accent?: RegExp;
+}
+interface BaseFilterEvent {
+    name: string;
+}
+interface SelectFilterEvent extends BaseFilterEvent {
+    type: 'select';
+    value: SelectFilterItemProps;
+}
+export type FilterEvent = SelectFilterEvent;
+export interface SearchResultsProps extends NoChildrenProp {
+    /** A set of results to render for a given search. */
+    results: SearchResultProps[];
+    /** Props related to the SearchInput. */
+    searchInputProps: SearchInputProps;
+    /** The number of total results related to a given search. */
+    count: number;
+    /** A set of filters and their current states for a given search. */
+    filters: FilterProps[];
+    /** Callback that is fired when the value of a filter changes. */
+    onFilterChange?: (filter: FilterEvent) => void;
+    /** Callback that is fired when the Clear all button is clicked. */
+    onClearAllFilters?: () => void;
+    /** Callback that is fired when the Clear button is clicked within a filter. */
+    onClearFilter?: (name: BaseFilterProps['name']) => void;
+    /** Callback that will render a Show more button at the bottom of the results and is fired when that button is clicked. */
+    onShowMore?: () => void;
+    /** Sets a loading indicator if true */
+    loading?: boolean;
+    /** A ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+export {};
+//# sourceMappingURL=SearchResults.types.d.ts.map

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

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

package/lib/components/SearchResults/SearchResults.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.types.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport {\n  LinkProps,\n  MetaListProps,\n  NoChildrenProp,\n  OmitStrict,\n  RadioCheckProps,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\n\ninterface BaseFilterProps {\n  /** The name of the filter. */\n  name: string;\n  /**\n   * Determines if the filter will start in an expanded state.\n   * @default true\n   */\n  expanded?: boolean;\n}\n\nexport interface SelectFilterItemProps {\n  /** The id for the filter option. */\n  id: NonNullable<RadioCheckProps['id']>;\n  /** The label for the filter option. */\n  label: RadioCheckProps['label'];\n  /** Determines if the filter option is active or not. */\n  checked: RadioCheckProps['checked'];\n  /** The name for the filter item that will show in the selected filters section */\n  name: NonNullable<RadioCheckProps['name']>;\n}\n\nexport interface SelectFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a select filter. */\n  type: 'select';\n  /** The set of options for the filter. */\n  items: SelectFilterItemProps[];\n  /**\n   * Determines if the filter will render as a RadioButtonGroup or CheckboxGroup.\n   * @default 'multi-select'\n   */\n  selectType?: 'single-select' | 'multi-select';\n}\n\nexport interface ActiveSelectFilter {\n  id: SelectFilterItemProps['id'];\n  name: SelectFilterItemProps['name'];\n  resetValue: SelectFilterItemProps & { checked: false };\n  groupName: SelectFilterProps['name'];\n  type: SelectFilterProps['type'];\n}\n\nexport interface TextFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a text filter. */\n  type: 'text';\n  /** The value of the filter. */\n  value?: string;\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search…'\n   * @default 'Search…'\n   */\n  placeholder?: string;\n}\n\n// For use later: export type FilterProps = TextFilterProps | SelectFilterProps;\nexport type FilterProps = SelectFilterProps;\n\nexport type ActiveFilters = ActiveSelectFilter;\n\nexport interface SearchResultProps {\n  /** The id of the search result to be displayed. */\n  id: string;\n  /** The title of the search result. */\n  title: string;\n  /** LinkProps to be passed to . */\n  link: OmitStrict<LinkProps, 'children' | 'variant' | 'icon'>;\n  /** A description for the search result. */\n  description?: string;\n  /** A list of elements to be rendered within a MetaList categorizing the result. */\n  meta?: MetaListProps['items'];\n  /** Accents the search results with text that matches the regex */\n  accent?: RegExp;\n}\n\ninterface BaseFilterEvent {\n  name: string;\n}\ninterface SelectFilterEvent extends BaseFilterEvent {\n  type: 'select';\n  value: SelectFilterItemProps;\n}\n\n// For use later: export type FilterEvent = SelectFilterEvent | TextFilterEvent;\nexport type FilterEvent = SelectFilterEvent;\n\nexport interface SearchResultsProps extends NoChildrenProp {\n  /** A set of results to render for a given search. */\n  results: SearchResultProps[];\n  /** Props related to the SearchInput. */\n  searchInputProps: SearchInputProps;\n  /** The number of total results related to a given search. */\n  count: number;\n  /** A set of filters and their current states for a given search. */\n  filters: FilterProps[];\n  /** Callback that is fired when the value of a filter changes. */\n  onFilterChange?: (filter: FilterEvent) => void;\n  /** Callback that is fired when the Clear all button is clicked. */\n  onClearAllFilters?: () => void;\n  /** Callback that is fired when the Clear button is clicked within a filter. */\n  onClearFilter?: (name: BaseFilterProps['name']) => void;\n  /** Callback that will render a Show more button at the bottom of the results and is fired when that button is clicked. */\n  onShowMore?: () => void;\n  /** Sets a loading indicator if true */\n  loading?: boolean;\n  /** A ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './SearchResults';
+export type { SearchResultsProps, SearchResultProps, FilterEvent } from './SearchResults.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/components/SearchResults/index.js

@@ -0,0 +1,2 @@
+export { default } from './SearchResults';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SearchResults/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './SearchResults';\nexport type { SearchResultsProps, SearchResultProps, FilterEvent } from './SearchResults.types';\n"]}

package/lib/components/Stages/StageGlimpse.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+import { StageProps } from './Stages.types';
+export interface StageGlimpseProps {
+    stage: StageProps;
+}
+declare const StageGlimpse: FunctionComponent<StageGlimpseProps>;
+export default StageGlimpse;
+//# sourceMappingURL=StageGlimpse.d.ts.map

package/lib/components/Stages/StageGlimpse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StageGlimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAK5C,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA6BtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Stages/StageGlimpse.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Icon, Flex, registerIcon, Text, useI18n, StyledIcon } from '@pega/cosmos-react-core';
+import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
+import { StyledDateTimeDisplay, StyledStep, StyledStepsContainer } from './Stages.styles';
+registerIcon(checkIcon);
+const StageGlimpse = ({ stage }) => {
+    const t = useI18n();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { children: stage.date ? (_jsx(StyledDateTimeDisplay, { value: stage.date, variant: 'relative', format: 'short' })) : (_jsx(Text, { variant: 'secondary', children: t('not_started') })) }), stage.steps && (_jsx(StyledStepsContainer, { children: stage.steps.map(({ id, name, completed }) => (_jsxs(Flex, { as: StyledStep, container: { gap: 0.5 }, completed: completed, children: [completed ? (_jsx(Icon, { name: 'check' })) : (_jsx(StyledIcon, { as: 'span', role: 'presentation', "aria-hidden": 'true', children: "\u2022" })), _jsx("div", { children: name })] }, id))) }))] }));
+};
+export default StageGlimpse;
+//# sourceMappingURL=StageGlimpse.js.map

package/lib/components/Stages/StageGlimpse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StageGlimpse.js","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC9F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE1F,YAAY,CAAC,SAAS,CAAC,CAAC;AAMxB,MAAM,YAAY,GAAyC,CAAC,EAAE,KAAK,EAAqB,EAAE,EAAE;IAC1F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,8BACE,wBACG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,KAAC,qBAAqB,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,GAAG,CAC/E,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,CACpD,GACG,EACL,KAAK,CAAC,KAAK,IAAI,CACd,KAAC,oBAAoB,cAClB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC5C,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAW,SAAS,EAAE,SAAS,aACzE,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM,uBAE/C,CACd,EACD,wBAAM,IAAI,GAAO,KARiC,EAAE,CAS/C,CACR,CAAC,GACmB,CACxB,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport { Icon, Flex, registerIcon, Text, useI18n, StyledIcon } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport { StageProps } from './Stages.types';\nimport { StyledDateTimeDisplay, StyledStep, StyledStepsContainer } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nexport interface StageGlimpseProps {\n  stage: StageProps;\n}\n\nconst StageGlimpse: FunctionComponent<StageGlimpseProps> = ({ stage }: StageGlimpseProps) => {\n  const t = useI18n();\n  return (\n    <>\n      <div>\n        {stage.date ? (\n          <StyledDateTimeDisplay value={stage.date} variant='relative' format='short' />\n        ) : (\n          <Text variant='secondary'>{t('not_started')}</Text>\n        )}\n      </div>\n      {stage.steps && (\n        <StyledStepsContainer>\n          {stage.steps.map(({ id, name, completed }) => (\n            <Flex as={StyledStep} container={{ gap: 0.5 }} key={id} completed={completed}>\n              {completed ? (\n                <Icon name='check' />\n              ) : (\n                <StyledIcon as='span' role='presentation' aria-hidden='true'>\n                  •\n                </StyledIcon>\n              )}\n              <div>{name}</div>\n            </Flex>\n          ))}\n        </StyledStepsContainer>\n      )}\n    </>\n  );\n};\n\nexport default StageGlimpse;\n"]}

package/lib/components/Stages/Stages.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import type { StagesProps } from './Stages.types';
+declare const Stages: FunctionComponent<StagesProps & ForwardProps>;
+export default Stages;
+//# sourceMappingURL=Stages.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAalD,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAmLxD,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/lib/components/Stages/Stages.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';
+import { remToPx } from 'polished';
+import { Icon, Text, registerIcon, Flex, useI18n, Button, Modal, useBreakpoint, debounce, useModalManager, useConsolidatedRef, useUID, InfoDialog, useArrows, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
+import StageGlimpse from './StageGlimpse';
+import { StyledInnerStage, StyledStage, StyledStageContainer, StyledStageGlimpse, StyledStages, StyledStagesDescription } from './Stages.styles';
+registerIcon(checkIcon);
+const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadStage, ...restProps }, ref) {
+    const t = useI18n();
+    const stagesRef = useConsolidatedRef(ref);
+    const stagesRefs = useRef([]);
+    const [target, setTarget] = useState(null);
+    const { create: createModal } = useModalManager();
+    const modalMethods = useRef();
+    const [showModal, setShowModal] = useState(false);
+    const isSmallOrAbove = useBreakpoint('sm');
+    const [compressedView, setCompressedView] = useState(false);
+    const [minExpandedWidth, setMinExpandedWidth] = useState(0);
+    useArrows(stagesRef, {
+        selector: ':scope > li > button:not([aria-expanded])',
+        dir: 'left-right'
+    });
+    const dialogId = useUID();
+    const descriptionId = useUID();
+    useEffect(() => {
+        if (stagesRef.current) {
+            if (compressedView) {
+                const resizeObserver = new ResizeObserver(debounce((entries) => {
+                    if (entries[0].contentRect.width > minExpandedWidth) {
+                        setCompressedView(false);
+                    }
+                }, 100));
+                resizeObserver.observe(stagesRef.current);
+                return () => resizeObserver.disconnect();
+            }
+            const intersectionObserver = new IntersectionObserver(entries => {
+                if (!entries[0].isIntersecting) {
+                    setCompressedView(true);
+                    if (entries[0].rootBounds)
+                        setMinExpandedWidth(entries[0].rootBounds.width);
+                }
+            }, {
+                root: stagesRef.current,
+                rootMargin: remToPx(0.0625),
+                threshold: 1
+            });
+            if (stagesRef.current.lastElementChild) {
+                intersectionObserver.observe(stagesRef.current.lastElementChild);
+                return () => intersectionObserver.disconnect();
+            }
+        }
+    }, [minExpandedWidth, compressedView, stages.length]);
+    const stagesToLoad = onLoadStage
+        ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)
+        : [];
+    const openModal = () => {
+        setShowModal(true);
+        if (stagesToLoad.length > 0)
+            onLoadStage?.(stagesToLoad);
+        modalMethods.current = createModal(Modal, {
+            heading: caseTitle
+                ? t('stages_case_lifecycle', [caseTitle])
+                : t('stages_default_case_lifecycle'),
+            progress: stagesToLoad.length > 0,
+            children: stages.map(stage => (_jsxs(Fragment, { children: [_jsx(Text, { variant: 'h2', children: stage.name }), _jsx(StageGlimpse, { stage: stage })] }, stage.id))),
+            onBeforeClose: () => {
+                setShowModal(false);
+                target?.focus();
+                setTarget(null);
+                modalMethods.current = undefined;
+            }
+        });
+    };
+    useAfterInitialEffect(() => {
+        modalMethods.current?.update({
+            progress: stagesToLoad.length > 0,
+            children: stages.map(stage => (_jsxs(Fragment, { children: [_jsx(Text, { variant: 'h2', children: stage.name }), _jsx(StageGlimpse, { stage: stage })] }, stage.id)))
+        });
+    }, [stagesToLoad.length]);
+    return (_jsxs(Flex, { ...restProps, container: true, as: StyledStages, ref: stagesRef, "aria-orientation": 'horizontal', "aria-label": t('stages_label'), "aria-describedby": descriptionId, children: [_jsx(StyledStagesDescription, { id: descriptionId, children: t('stages_description') }), stages.map((stage, index) => {
+                const isCurrent = stage.id === current;
+                let stageStatusText = t(stage.completed ? 'completed' : 'not_started');
+                if (isCurrent)
+                    stageStatusText = t('current');
+                const hasToLoad = stagesToLoad.includes(stage.id);
+                return (_jsxs(Fragment, { children: [_jsx(Flex, { as: StyledStageContainer, item: { grow: 1, shrink: 0 }, children: _jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: {
+                                    grow: compressedView && !isCurrent ? 0 : 1,
+                                    shrink: compressedView && isCurrent ? 1 : 0
+                                }, "aria-current": isCurrent ? 'step' : undefined, "aria-label": t('stages_stage_label', [stage.name, stageStatusText]), onClick: (e) => {
+                                    if (isSmallOrAbove) {
+                                        if (hasToLoad)
+                                            onLoadStage?.([stage.id]);
+                                        setTarget(e.currentTarget);
+                                    }
+                                    else {
+                                        openModal();
+                                    }
+                                }, ref: (el) => {
+                                    stagesRefs.current[index] = el;
+                                }, "aria-expanded": target && isSmallOrAbove, "aria-controls": target ? dialogId : undefined, "aria-haspopup": true, children: [stage.completed && _jsx(Icon, { name: 'check' }), (!compressedView || isCurrent || !stage.completed) && (_jsx(StyledInnerStage, { ellipsis: isCurrent && compressedView, children: !isCurrent && compressedView ? index + 1 : stage.name }))] }) }), target && stagesRefs.current[index] === target && isSmallOrAbove && !showModal && (_jsx(InfoDialog, { heading: stage.name, target: target, progress: hasToLoad ? t('loading') : undefined, onDismiss: () => {
+                                setTarget(null);
+                            }, placement: 'bottom-start', children: !hasToLoad && (_jsxs(StyledStageGlimpse, { children: [_jsx(StageGlimpse, { stage: stage }), _jsx(Button, { variant: 'secondary', onClick: openModal, children: t('stages_see_full_lifecycle') })] })) }))] }, stage.id));
+            })] }));
+});
+export default Stages;
+//# sourceMappingURL=Stages.js.map

package/lib/components/Stages/Stages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  useState,\n  useRef,\n  useEffect,\n  forwardRef,\n  MouseEvent,\n  PropsWithoutRef,\n  Fragment\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Icon,\n  Text,\n  registerIcon,\n  Flex,\n  ForwardProps,\n  useI18n,\n  Button,\n  Modal,\n  useBreakpoint,\n  debounce,\n  useModalManager,\n  useConsolidatedRef,\n  useUID,\n  ModalMethods,\n  InfoDialog,\n  useArrows,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport {\n  StyledInnerStage,\n  StyledStage,\n  StyledStageContainer,\n  StyledStageGlimpse,\n  StyledStages,\n  StyledStagesDescription\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = forwardRef(function Stages(\n  { current, stages, caseTitle, onLoadStage, ...restProps }: PropsWithoutRef<StagesProps>,\n  ref: StagesProps['ref']\n) {\n  const t = useI18n();\n\n  const stagesRef = useConsolidatedRef(ref);\n  const stagesRefs = useRef<HTMLButtonElement[]>([]);\n\n  const [target, setTarget] = useState<HTMLButtonElement | null>(null);\n\n  const { create: createModal } = useModalManager();\n  const modalMethods = useRef<ModalMethods>();\n  const [showModal, setShowModal] = useState(false);\n\n  const isSmallOrAbove = useBreakpoint('sm');\n  const [compressedView, setCompressedView] = useState(false);\n  const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n  useArrows(stagesRef, {\n    selector: ':scope > li > button:not([aria-expanded])',\n    dir: 'left-right'\n  });\n\n  const dialogId = useUID();\n  const descriptionId = useUID();\n\n  useEffect(() => {\n    if (stagesRef.current) {\n      if (compressedView) {\n        const resizeObserver = new ResizeObserver(\n          debounce((entries: ResizeObserverEntry[]) => {\n            if (entries[0].contentRect.width > minExpandedWidth) {\n              setCompressedView(false);\n            }\n          }, 100)\n        );\n        resizeObserver.observe(stagesRef.current);\n        return () => resizeObserver.disconnect();\n      }\n\n      const intersectionObserver = new IntersectionObserver(\n        entries => {\n          if (!entries[0].isIntersecting) {\n            setCompressedView(true);\n            if (entries[0].rootBounds) setMinExpandedWidth(entries[0].rootBounds.width);\n          }\n        },\n        {\n          root: stagesRef.current,\n          rootMargin: remToPx(0.0625),\n          threshold: 1\n        }\n      );\n\n      if (stagesRef.current.lastElementChild) {\n        intersectionObserver.observe(stagesRef.current.lastElementChild);\n        return () => intersectionObserver.disconnect();\n      }\n    }\n  }, [minExpandedWidth, compressedView, stages.length]);\n\n  const stagesToLoad = onLoadStage\n    ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n    : [];\n\n  const openModal = () => {\n    setShowModal(true);\n    if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n    modalMethods.current = createModal(Modal, {\n      heading: caseTitle\n        ? t('stages_case_lifecycle', [caseTitle])\n        : t('stages_default_case_lifecycle'),\n      progress: stagesToLoad.length > 0,\n      children: stages.map(stage => (\n        <Fragment key={stage.id}>\n          <Text variant='h2'>{stage.name}</Text>\n          <StageGlimpse stage={stage} />\n        </Fragment>\n      )),\n      onBeforeClose: () => {\n        setShowModal(false);\n        target?.focus();\n        setTarget(null);\n        modalMethods.current = undefined;\n      }\n    });\n  };\n\n  useAfterInitialEffect(() => {\n    modalMethods.current?.update({\n      progress: stagesToLoad.length > 0,\n      children: stages.map(stage => (\n        <Fragment key={stage.id}>\n          <Text variant='h2'>{stage.name}</Text>\n          <StageGlimpse stage={stage} />\n        </Fragment>\n      ))\n    });\n  }, [stagesToLoad.length]);\n\n  return (\n    <Flex\n      {...restProps}\n      container\n      as={StyledStages}\n      ref={stagesRef}\n      aria-orientation='horizontal'\n      aria-label={t('stages_label')}\n      aria-describedby={descriptionId}\n    >\n      <StyledStagesDescription id={descriptionId}>\n        {t('stages_description')}\n      </StyledStagesDescription>\n      {stages.map((stage, index) => {\n        const isCurrent = stage.id === current;\n        let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n        if (isCurrent) stageStatusText = t('current');\n        const hasToLoad = stagesToLoad.includes(stage.id);\n        return (\n          <Fragment key={stage.id}>\n            <Flex as={StyledStageContainer} item={{ grow: 1, shrink: 0 }}>\n              <Flex\n                container={{ justify: 'center', alignItems: 'center' }}\n                as={StyledStage}\n                item={{\n                  grow: compressedView && !isCurrent ? 0 : 1,\n                  shrink: compressedView && isCurrent ? 1 : 0\n                }}\n                aria-current={isCurrent ? 'step' : undefined}\n                aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n                onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                  if (isSmallOrAbove) {\n                    if (hasToLoad) onLoadStage?.([stage.id]);\n                    setTarget(e.currentTarget);\n                  } else {\n                    openModal();\n                  }\n                }}\n                ref={(el: HTMLButtonElement) => {\n                  stagesRefs.current[index] = el;\n                }}\n                aria-expanded={target && isSmallOrAbove}\n                aria-controls={target ? dialogId : undefined}\n                aria-haspopup\n              >\n                {stage.completed && <Icon name='check' />}\n                {(!compressedView || isCurrent || !stage.completed) && (\n                  <StyledInnerStage ellipsis={isCurrent && compressedView}>\n                    {!isCurrent && compressedView ? index + 1 : stage.name}\n                  </StyledInnerStage>\n                )}\n              </Flex>\n            </Flex>\n            {target && stagesRefs.current[index] === target && isSmallOrAbove && !showModal && (\n              <InfoDialog\n                heading={stage.name}\n                target={target}\n                progress={hasToLoad ? t('loading') : undefined}\n                onDismiss={() => {\n                  setTarget(null);\n                }}\n                placement='bottom-start'\n              >\n                {!hasToLoad && (\n                  <StyledStageGlimpse>\n                    <StageGlimpse stage={stage} />\n                    <Button variant='secondary' onClick={openModal}>\n                      {t('stages_see_full_lifecycle')}\n                    </Button>\n                  </StyledStageGlimpse>\n                )}\n              </InfoDialog>\n            )}\n          </Fragment>\n        );\n      })}\n    </Flex>\n  );\n});\n\nexport default Stages;\n"]}

package/lib/components/Stages/Stages.styles.d.ts

@@ -0,0 +1,14 @@
+export declare const StyledStages: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInnerStage: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    ellipsis?: boolean | undefined;
+}, never>;
+export declare const StyledStage: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStageContainer: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStepsContainer: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStep: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    completed: boolean;
+}, never>;
+export declare const StyledDateTimeDisplay: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStageGlimpse: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStagesDescription: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Stages.styles.d.ts.map

package/lib/components/Stages/Stages.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,YAAY,wGAYvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;;SAW3B,CAAC;AAEH,eAAO,MAAM,WAAW,4GAgJvB,CAAC;AAIF,eAAO,MAAM,oBAAoB,wGAoDhC,CAAC;AAIF,eAAO,MAAM,oBAAoB,wGAS/B,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,OAAO;SAyBtD,CAAC;AAIH,eAAO,MAAM,qBAAqB,8OAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,uGAEnC,CAAC"}

package/lib/components/Stages/Stages.styles.js

@@ -0,0 +1,270 @@
+import styled, { css } from 'styled-components';
+import { rgba } from 'polished';
+import { calculateFontSize, DateTimeDisplay, defaultThemeProp, StyledIcon, tryCatch, useDirection } from '@pega/cosmos-react-core';
+export const StyledStages = styled.ol(({ theme }) => {
+    return css `
+    background-color: ${theme.base.palette['primary-background']};
+    border-radius: ${theme.base['border-radius']};
+    width: 100%;
+    overflow: hidden;
+    list-style: none;
+
+    &:has(:focus-visible) {
+      box-shadow: ${theme.base.shadow['focus-group']};
+    }
+  `;
+});
+StyledStages.defaultProps = defaultThemeProp;
+export const StyledInnerStage = styled.span(props => {
+    return css `
+    display: inline-block;
+    text-align: center;
+    white-space: nowrap;
+    ${props.ellipsis &&
+        css `
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `}
+  `;
+});
+export const StyledStage = styled.button(({ theme: { base: { spacing, palette, 'hit-area': hitArea, transparency } } }) => {
+    const thinBorderWidth = '0.0625rem';
+    const thickBorderWidth = '0.125rem';
+    const { rtl } = useDirection();
+    const borderShadow = tryCatch(() => rgba(palette['border-line'], 1));
+    return css `
+      background-color: inherit;
+      color: ${palette['foreground-color']};
+      outline: none;
+      border-color: transparent;
+      border-width: ${thinBorderWidth} 0;
+      border-style: solid;
+      position: relative;
+      height: calc(4 * ${spacing});
+      padding-inline-start: calc(2 * ${spacing});
+      padding-inline-end: ${spacing};
+      width: 100%;
+
+      ::before,
+      ::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: calc(2.25 * ${spacing});
+        height: calc(2.25 * ${spacing});
+        border-style: solid;
+        border-color: ${palette['border-line']};
+        border-inline-end-width: ${thinBorderWidth};
+        border-inline-start-width: 0;
+        border-top-width: ${rtl ? 0 : thinBorderWidth};
+        border-bottom-width: ${rtl ? thinBorderWidth : 0};
+        transform: rotateZ(45deg) skew(15deg, 15deg);
+
+        @media (pointer: coarse) {
+          width: calc(2.875 * ${spacing});
+          height: calc(2.875 * ${spacing});
+          transform: rotateZ(45deg) skew(20deg, 20deg);
+        }
+      }
+
+      ::before {
+        inset-inline-start: calc(-1.125 * ${spacing});
+
+        @media (pointer: coarse) {
+          inset-inline-start: calc(-1.375 * ${spacing});
+        }
+      }
+
+      ::after {
+        inset-inline-end: calc(-1.125 * ${spacing});
+        z-index: 1;
+
+        @media (pointer: coarse) {
+          inset-inline-end: calc(-1.375 * ${spacing});
+        }
+      }
+
+      &:hover,
+      &:hover::before,
+      &:hover::after {
+        border-color: ${palette['border-line']};
+      }
+
+      &:focus,
+      &:active,
+      &:focus::before,
+      &:active::before,
+      &:focus::after,
+      &:active::after {
+        border-color: ${palette.interactive};
+      }
+
+      &:focus {
+        border-width: ${thickBorderWidth} 0;
+      }
+
+      &:focus::before,
+      &:focus::after {
+        z-index: 1;
+        border-inline-end-width: ${thickBorderWidth};
+        border-top-width: ${rtl ? 0 : thickBorderWidth};
+        border-bottom-width: ${rtl ? thickBorderWidth : 0};
+      }
+
+      &:focus::before {
+        pointer-events: none;
+      }
+
+      &:active {
+        border-width: ${thinBorderWidth} 0;
+
+        ${StyledInnerStage} {
+          opacity: ${transparency['transparent-3']};
+        }
+      }
+
+      &:active::before,
+      &:active::after {
+        border-inline-end-width: ${thinBorderWidth};
+        border-top-width: ${rtl ? 0 : thinBorderWidth};
+        border-bottom-width: ${rtl ? thinBorderWidth : 0};
+      }
+
+      &[aria-current] {
+        ${StyledInnerStage} {
+          font-weight: bold;
+          opacity: 1;
+        }
+
+        :hover {
+          ${StyledInnerStage} {
+            opacity: ${transparency['transparent-2']};
+          }
+        }
+
+        ::after {
+          filter: drop-shadow(0.0625rem -0.0625rem 0.125rem ${borderShadow});
+        }
+      }
+
+      @media (pointer: coarse) {
+        height: ${hitArea['finger-min']};
+        padding-inline-start: calc(2.25 * ${spacing});
+      }
+
+      ${StyledIcon} {
+        color: ${palette.success};
+
+        & ~ ${StyledInnerStage} {
+          margin-inline-start: 0.25rem;
+        }
+      }
+
+      ${StyledInnerStage} {
+        opacity: ${transparency['transparent-2']};
+      }
+    `;
+});
+StyledStage.defaultProps = defaultThemeProp;
+export const StyledStageContainer = styled.li(({ theme: { base: { spacing, 'border-radius': borderRadius } } }) => {
+    const thinBorderWidth = '0.0625rem';
+    const thickBorderWidth = '0.125rem';
+    return css `
+      &:first-of-type > ${StyledStage} {
+        border-start-start-radius: ${borderRadius};
+        border-end-start-radius: ${borderRadius};
+        border-inline-start-width: ${thinBorderWidth};
+        padding-inline-start: ${spacing};
+
+        &:active {
+          padding-inline-start: ${spacing};
+        }
+
+        &:focus {
+          border-inline-start-width: ${thickBorderWidth};
+          padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});
+        }
+
+        ::before {
+          display: none;
+        }
+      }
+
+      &:last-of-type > ${StyledStage} {
+        border-start-end-radius: ${borderRadius};
+        border-end-end-radius: ${borderRadius};
+        border-inline-end-width: ${thinBorderWidth};
+        padding-inline-end: ${spacing};
+
+        &:active {
+          border-inline-end-width: ${thinBorderWidth};
+          padding-inline-end: ${spacing};
+        }
+
+        &:focus {
+          border-inline-end-width: ${thickBorderWidth};
+          padding-inline-end: calc(${spacing} - ${thinBorderWidth});
+        }
+
+        ::after {
+          display: none;
+        }
+      }
+    `;
+});
+StyledStageContainer.defaultProps = defaultThemeProp;
+export const StyledStepsContainer = styled.ol(({ theme }) => {
+    return css `
+    list-style-type: none;
+    margin: calc(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});
+
+    &:empty {
+      margin-block-end: 0;
+    }
+  `;
+});
+StyledStepsContainer.defaultProps = defaultThemeProp;
+export const StyledStep = styled.li(({ completed, theme }) => {
+    const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;
+    return css `
+    border-radius: 0;
+    margin-block-end: calc(${theme.base.spacing});
+    color: ${theme.base.palette['foreground-color']};
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+
+    & > ${StyledIcon} {
+      text-align: center;
+
+      ${completed &&
+        css `
+        color: ${theme.base.palette.success};
+      `}
+    }
+
+    div {
+      opacity: ${textOpacity};
+    }
+  `;
+});
+StyledStep.defaultProps = defaultThemeProp;
+export const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    font-size: ${fontSize.xs};
+    opacity: ${theme.base.transparency['transparent-2']};
+  `;
+});
+StyledDateTimeDisplay.defaultProps = defaultThemeProp;
+export const StyledStageGlimpse = styled.div(({ theme }) => {
+    return css `
+    max-width: ${theme.base['content-width'].sm};
+  `;
+});
+StyledStageGlimpse.defaultProps = defaultThemeProp;
+export const StyledStagesDescription = styled.p `
+  display: none;
+`;
+//# sourceMappingURL=Stages.styles.js.map

package/lib/components/Stages/Stages.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport {\n  calculateFontSize,\n  DateTimeDisplay,\n  defaultThemeProp,\n  StyledIcon,\n  tryCatch,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.ol(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    border-radius: ${theme.base['border-radius']};\n    width: 100%;\n    overflow: hidden;\n    list-style: none;\n\n    &:has(:focus-visible) {\n      box-shadow: ${theme.base.shadow['focus-group']};\n    }\n  `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n  return css`\n    display: inline-block;\n    text-align: center;\n    white-space: nowrap;\n    ${props.ellipsis &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n    `}\n  `;\n});\n\nexport const StyledStage = styled.button(\n  ({\n    theme: {\n      base: { spacing, palette, 'hit-area': hitArea, transparency }\n    }\n  }) => {\n    const thinBorderWidth = '0.0625rem';\n    const thickBorderWidth = '0.125rem';\n    const { rtl } = useDirection();\n    const borderShadow = tryCatch(() => rgba(palette['border-line'], 1));\n\n    return css`\n      background-color: inherit;\n      color: ${palette['foreground-color']};\n      outline: none;\n      border-color: transparent;\n      border-width: ${thinBorderWidth} 0;\n      border-style: solid;\n      position: relative;\n      height: calc(4 * ${spacing});\n      padding-inline-start: calc(2 * ${spacing});\n      padding-inline-end: ${spacing};\n      width: 100%;\n\n      ::before,\n      ::after {\n        content: '';\n        position: absolute;\n        display: block;\n        width: calc(2.25 * ${spacing});\n        height: calc(2.25 * ${spacing});\n        border-style: solid;\n        border-color: ${palette['border-line']};\n        border-inline-end-width: ${thinBorderWidth};\n        border-inline-start-width: 0;\n        border-top-width: ${rtl ? 0 : thinBorderWidth};\n        border-bottom-width: ${rtl ? thinBorderWidth : 0};\n        transform: rotateZ(45deg) skew(15deg, 15deg);\n\n        @media (pointer: coarse) {\n          width: calc(2.875 * ${spacing});\n          height: calc(2.875 * ${spacing});\n          transform: rotateZ(45deg) skew(20deg, 20deg);\n        }\n      }\n\n      ::before {\n        inset-inline-start: calc(-1.125 * ${spacing});\n\n        @media (pointer: coarse) {\n          inset-inline-start: calc(-1.375 * ${spacing});\n        }\n      }\n\n      ::after {\n        inset-inline-end: calc(-1.125 * ${spacing});\n        z-index: 1;\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(-1.375 * ${spacing});\n        }\n      }\n\n      &:hover,\n      &:hover::before,\n      &:hover::after {\n        border-color: ${palette['border-line']};\n      }\n\n      &:focus,\n      &:active,\n      &:focus::before,\n      &:active::before,\n      &:focus::after,\n      &:active::after {\n        border-color: ${palette.interactive};\n      }\n\n      &:focus {\n        border-width: ${thickBorderWidth} 0;\n      }\n\n      &:focus::before,\n      &:focus::after {\n        z-index: 1;\n        border-inline-end-width: ${thickBorderWidth};\n        border-top-width: ${rtl ? 0 : thickBorderWidth};\n        border-bottom-width: ${rtl ? thickBorderWidth : 0};\n      }\n\n      &:focus::before {\n        pointer-events: none;\n      }\n\n      &:active {\n        border-width: ${thinBorderWidth} 0;\n\n        ${StyledInnerStage} {\n          opacity: ${transparency['transparent-3']};\n        }\n      }\n\n      &:active::before,\n      &:active::after {\n        border-inline-end-width: ${thinBorderWidth};\n        border-top-width: ${rtl ? 0 : thinBorderWidth};\n        border-bottom-width: ${rtl ? thinBorderWidth : 0};\n      }\n\n      &[aria-current] {\n        ${StyledInnerStage} {\n          font-weight: bold;\n          opacity: 1;\n        }\n\n        :hover {\n          ${StyledInnerStage} {\n            opacity: ${transparency['transparent-2']};\n          }\n        }\n\n        ::after {\n          filter: drop-shadow(0.0625rem -0.0625rem 0.125rem ${borderShadow});\n        }\n      }\n\n      @media (pointer: coarse) {\n        height: ${hitArea['finger-min']};\n        padding-inline-start: calc(2.25 * ${spacing});\n      }\n\n      ${StyledIcon} {\n        color: ${palette.success};\n\n        & ~ ${StyledInnerStage} {\n          margin-inline-start: 0.25rem;\n        }\n      }\n\n      ${StyledInnerStage} {\n        opacity: ${transparency['transparent-2']};\n      }\n    `;\n  }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStageContainer = styled.li(\n  ({\n    theme: {\n      base: { spacing, 'border-radius': borderRadius }\n    }\n  }) => {\n    const thinBorderWidth = '0.0625rem';\n    const thickBorderWidth = '0.125rem';\n\n    return css`\n      &:first-of-type > ${StyledStage} {\n        border-start-start-radius: ${borderRadius};\n        border-end-start-radius: ${borderRadius};\n        border-inline-start-width: ${thinBorderWidth};\n        padding-inline-start: ${spacing};\n\n        &:active {\n          padding-inline-start: ${spacing};\n        }\n\n        &:focus {\n          border-inline-start-width: ${thickBorderWidth};\n          padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n        }\n\n        ::before {\n          display: none;\n        }\n      }\n\n      &:last-of-type > ${StyledStage} {\n        border-start-end-radius: ${borderRadius};\n        border-end-end-radius: ${borderRadius};\n        border-inline-end-width: ${thinBorderWidth};\n        padding-inline-end: ${spacing};\n\n        &:active {\n          border-inline-end-width: ${thinBorderWidth};\n          padding-inline-end: ${spacing};\n        }\n\n        &:focus {\n          border-inline-end-width: ${thickBorderWidth};\n          padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n        }\n\n        ::after {\n          display: none;\n        }\n      }\n    `;\n  }\n);\n\nStyledStageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n  return css`\n    list-style-type: none;\n    margin: calc(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n    &:empty {\n      margin-block-end: 0;\n    }\n  `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n  const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n  return css`\n    border-radius: 0;\n    margin-block-end: calc(${theme.base.spacing});\n    color: ${theme.base.palette['foreground-color']};\n\n    &:last-child {\n      margin-block-end: 0;\n    }\n\n    & > ${StyledIcon} {\n      text-align: center;\n\n      ${completed &&\n      css`\n        color: ${theme.base.palette.success};\n      `}\n    }\n\n    div {\n      opacity: ${textOpacity};\n    }\n  `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    font-size: ${fontSize.xs};\n    opacity: ${theme.base.transparency['transparent-2']};\n  `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].sm};\n  `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n\nexport const StyledStagesDescription = styled.p`\n  display: none;\n`;\n"]}