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

package/lib/components/Predictions/Predictions.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { registerIcon, useI18n, Modal, useModalManager, InfoDialog, StyledLabel, Text, SummaryList, defaultThemeProp } from '@pega/cosmos-react-core';
+import * as polarisIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris.icon';
+import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
+registerIcon(polarisIcon, informationIcon);
+// Expand minimum width to ensure the chart is readable enough
+const StyledPredictionExplanationDialog = styled(InfoDialog)(({ theme }) => {
+    return css `
+    min-width: min(${theme.base['content-width'].md}, calc(100vw - 2rem));
+  `;
+});
+StyledPredictionExplanationDialog.defaultProps = defaultThemeProp;
+const PredictionsList = forwardRef(function PredictionsList({ items: itemsProp, progress, ...restProps }, ref) {
+    const t = useI18n();
+    const [currentItemIdTarget, setCurrentItemIdTarget] = useState();
+    const currentItem = itemsProp?.find(({ id }) => id === currentItemIdTarget?.id);
+    const items = useMemo(() => (itemsProp ?? []).map(item => ({
+        id: item.id,
+        primary: _jsx(StyledLabel, { forwardedAs: 'span', children: item.label }),
+        secondary: (_jsx(Text, { variant: 'h1', as: 'span', children: item.value })),
+        overflowStrategy: 'ellipsis',
+        actions: item.additionalInfo
+            ? [
+                {
+                    id: item.id,
+                    text: t('learn_more'),
+                    icon: 'information',
+                    onClick: (id, e) => {
+                        setCurrentItemIdTarget({
+                            id: item.id,
+                            target: e.currentTarget
+                        });
+                    }
+                }
+            ]
+            : undefined
+    })), [itemsProp]);
+    return (_jsxs(_Fragment, { children: [_jsx(SummaryList, { ...restProps, loading: progress, ref: ref, items: items }), currentItemIdTarget && currentItem?.additionalInfo && (_jsx(StyledPredictionExplanationDialog, { heading: currentItem.label, target: currentItemIdTarget.target, onDismiss: () => {
+                    setCurrentItemIdTarget(undefined);
+                }, children: currentItem.additionalInfo }))] }));
+});
+const PredictionsViewAllModal = ({ count, progress, ...restProps }) => {
+    const t = useI18n();
+    return (_jsx(Modal, { heading: t('all_predictions'), count: count, progress: progress, children: _jsx(PredictionsList, { ...restProps }) }));
+};
+const Predictions = forwardRef(function Predictions({ count, items, progress, ...restProps }, ref) {
+    const t = useI18n();
+    const { create } = useModalManager();
+    const viewAllModalRef = useRef();
+    useEffect(() => {
+        viewAllModalRef.current?.update({
+            items,
+            progress,
+            count
+        });
+    }, [items, progress, count]);
+    return (_jsx(PredictionsList, { ...restProps, ref: ref, name: t('predictions'), headingTag: 'h3', icon: 'polaris', count: count, items: items?.slice(0, 3), progress: progress, onViewAll: () => {
+            viewAllModalRef.current = create(PredictionsViewAllModal, {
+                items,
+                progress,
+                count
+            });
+        } }));
+});
+export default Predictions;
+//# sourceMappingURL=Predictions.js.map

package/lib/components/Predictions/Predictions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Predictions.js","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,YAAY,EACZ,OAAO,EACP,KAAK,EAEL,eAAe,EAEf,UAAU,EAEV,WAAW,EACX,IAAI,EACJ,WAAW,EACX,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAC9F,OAAO,KAAK,eAAe,MAAM,oEAAoE,CAAC;AAItG,YAAY,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAE3C,8DAA8D;AAC9D,MAAM,iCAAiC,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;GAChD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iCAAiC,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElE,MAAM,eAAe,GAEjB,UAAU,CAAC,SAAS,eAAe,CACrC,EACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EACR,GAAG,SAAS,EAC8E,EAC5F,GAA4B;IAE5B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,EAM3D,CAAC;IACJ,MAAM,WAAW,GAAG,SAAS,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,mBAAmB,EAAE,EAAE,CAAC,CAAC;IAEhF,MAAM,KAAK,GAAsB,OAAO,CACtC,GAAG,EAAE,CACH,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC7B,EAAE,EAAE,IAAI,CAAC,EAAE;QACX,OAAO,EAAE,KAAC,WAAW,IAAC,WAAW,EAAC,MAAM,YAAE,IAAI,CAAC,KAAK,GAAe;QACnE,SAAS,EAAE,CACT,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,IAAI,CAAC,KAAK,GACN,CACR;QACD,gBAAgB,EAAE,UAAU;QAC5B,OAAO,EAAE,IAAI,CAAC,cAAc;YAC1B,CAAC,CAAC;gBACE;oBACE,EAAE,EAAE,IAAI,CAAC,EAAE;oBACX,IAAI,EAAE,CAAC,CAAC,YAAY,CAAC;oBACrB,IAAI,EAAE,aAAa;oBACnB,OAAO,EAAE,CACP,EAAU,EACV,CAAuE,EACvE,EAAE;wBACF,sBAAsB,CAAC;4BACrB,EAAE,EAAE,IAAI,CAAC,EAAE;4BACX,MAAM,EAAE,CAAC,CAAC,aAAa;yBACxB,CAAC,CAAC;oBACL,CAAC;iBACF;aACF;YACH,CAAC,CAAC,SAAS;KACd,CAAC,CAAC,EACL,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,WAAW,OAAK,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,GAAI,EACxE,mBAAmB,IAAI,WAAW,EAAE,cAAc,IAAI,CACrD,KAAC,iCAAiC,IAChC,OAAO,EAAE,WAAW,CAAC,KAAK,EAC1B,MAAM,EAAE,mBAAmB,CAAC,MAAM,EAClC,SAAS,EAAE,GAAG,EAAE;oBACd,sBAAsB,CAAC,SAAS,CAAC,CAAC;gBACpC,CAAC,YAEA,WAAW,CAAC,cAAc,GACO,CACrC,IACA,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,uBAAuB,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAoB,EAAE,EAAE;IACtF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,KAAC,KAAK,IAAC,OAAO,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,YACpE,KAAC,eAAe,OAAK,SAAS,GAAI,GAC5B,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAClB,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAqC,EAC3E,GAA4B;IAE5B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;IACrC,MAAM,eAAe,GAAG,MAAM,EAAkC,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,OAAO,EAAE,MAAM,CAAC;YAC9B,KAAK;YACL,QAAQ;YACR,KAAK;SACN,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,KAAC,eAAe,OACV,SAAS,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,CAAC,CAAC,aAAa,CAAC,EACtB,UAAU,EAAC,IAAI,EACf,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EACzB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,GAAG,EAAE;YACd,eAAe,CAAC,OAAO,GAAG,MAAM,CAAC,uBAAuB,EAAE;gBACxD,KAAK;gBACL,QAAQ;gBACR,KAAK;aACN,CAAC,CAAC;QACL,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n  FC,\n  forwardRef,\n  FunctionComponent,\n  MouseEvent,\n  PropsWithoutRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  registerIcon,\n  useI18n,\n  Modal,\n  SummaryListProps,\n  useModalManager,\n  SummaryListItem,\n  InfoDialog,\n  ModalMethods,\n  StyledLabel,\n  Text,\n  SummaryList,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport * as polarisIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\n\nimport PredictionsProps, { PredictionItem } from './Predictions.types';\n\nregisterIcon(polarisIcon, informationIcon);\n\n// Expand minimum width to ensure the chart is readable enough\nconst StyledPredictionExplanationDialog = styled(InfoDialog)(({ theme }) => {\n  return css`\n    min-width: min(${theme.base['content-width'].md}, calc(100vw - 2rem));\n  `;\n});\n\nStyledPredictionExplanationDialog.defaultProps = defaultThemeProp;\n\nconst PredictionsList: FC<\n  PredictionsProps & Pick<SummaryListProps, 'onViewAll' | 'name' | 'icon'> & ForwardProps\n> = forwardRef(function PredictionsList(\n  {\n    items: itemsProp,\n    progress,\n    ...restProps\n  }: PropsWithoutRef<PredictionsProps & Pick<SummaryListProps, 'onViewAll' | 'name' | 'icon'>>,\n  ref: PredictionsProps['ref']\n) {\n  const t = useI18n();\n  const [currentItemIdTarget, setCurrentItemIdTarget] = useState<\n    | {\n        id: PredictionItem['id'];\n        target: HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;\n      }\n    | undefined\n  >();\n  const currentItem = itemsProp?.find(({ id }) => id === currentItemIdTarget?.id);\n\n  const items: SummaryListItem[] = useMemo(\n    () =>\n      (itemsProp ?? []).map(item => ({\n        id: item.id,\n        primary: <StyledLabel forwardedAs='span'>{item.label}</StyledLabel>,\n        secondary: (\n          <Text variant='h1' as='span'>\n            {item.value}\n          </Text>\n        ),\n        overflowStrategy: 'ellipsis',\n        actions: item.additionalInfo\n          ? [\n              {\n                id: item.id,\n                text: t('learn_more'),\n                icon: 'information',\n                onClick: (\n                  id: string,\n                  e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n                ) => {\n                  setCurrentItemIdTarget({\n                    id: item.id,\n                    target: e.currentTarget\n                  });\n                }\n              }\n            ]\n          : undefined\n      })),\n    [itemsProp]\n  );\n\n  return (\n    <>\n      <SummaryList {...restProps} loading={progress} ref={ref} items={items} />\n      {currentItemIdTarget && currentItem?.additionalInfo && (\n        <StyledPredictionExplanationDialog\n          heading={currentItem.label}\n          target={currentItemIdTarget.target}\n          onDismiss={() => {\n            setCurrentItemIdTarget(undefined);\n          }}\n        >\n          {currentItem.additionalInfo}\n        </StyledPredictionExplanationDialog>\n      )}\n    </>\n  );\n});\n\nconst PredictionsViewAllModal = ({ count, progress, ...restProps }: PredictionsProps) => {\n  const t = useI18n();\n  return (\n    <Modal heading={t('all_predictions')} count={count} progress={progress}>\n      <PredictionsList {...restProps} />\n    </Modal>\n  );\n};\n\nconst Predictions: FunctionComponent<PredictionsProps & ForwardProps> = forwardRef(\n  function Predictions(\n    { count, items, progress, ...restProps }: PropsWithoutRef<PredictionsProps>,\n    ref: PredictionsProps['ref']\n  ) {\n    const t = useI18n();\n    const { create } = useModalManager();\n    const viewAllModalRef = useRef<ModalMethods<PredictionsProps>>();\n\n    useEffect(() => {\n      viewAllModalRef.current?.update({\n        items,\n        progress,\n        count\n      });\n    }, [items, progress, count]);\n\n    return (\n      <PredictionsList\n        {...restProps}\n        ref={ref}\n        name={t('predictions')}\n        headingTag='h3'\n        icon='polaris'\n        count={count}\n        items={items?.slice(0, 3)}\n        progress={progress}\n        onViewAll={() => {\n          viewAllModalRef.current = create(PredictionsViewAllModal, {\n            items,\n            progress,\n            count\n          });\n        }}\n      />\n    );\n  }\n);\n\nexport default Predictions;\n"]}

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

@@ -0,0 +1,23 @@
+import { ReactNode, Ref } from 'react';
+import { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+export interface PredictionItem {
+    /** A unique id to represent the item. */
+    id: string;
+    /** Label for the prediction item. */
+    label: string;
+    /** Value for the prediction item. */
+    value: string;
+    /** Additional prediction information rendered in a dialog. */
+    additionalInfo?: ReactNode;
+}
+export default interface PredictionsProps extends BaseProps, NoChildrenProp {
+    /** Integer representing the total count of items. */
+    count?: number;
+    /** An array of PredictionItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. */
+    items?: PredictionItem[];
+    /** Show a progress indicator when initially fetching list data. */
+    progress?: boolean;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+//# sourceMappingURL=Predictions.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Predictions.types.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACzE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oKAAoK;IACpK,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/Predictions/Predictions.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Predictions.types.js","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface PredictionItem {\n  /** A unique id to represent the item. */\n  id: string;\n  /** Label for the prediction item. */\n  label: string;\n  /** Value for the prediction item. */\n  value: string;\n  /** Additional prediction information rendered in a dialog. */\n  additionalInfo?: ReactNode;\n}\n\nexport default interface PredictionsProps extends BaseProps, NoChildrenProp {\n  /** Integer representing the total count of items. */\n  count?: number;\n  /** An array of PredictionItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. */\n  items?: PredictionItem[];\n  /** Show a progress indicator when initially fetching list data. */\n  progress?: boolean;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './Predictions';
+export type { default as PredictionsProps } from './Predictions.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/components/Predictions/index.js

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

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

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

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

@@ -0,0 +1,8 @@
+import { FilterProps, SearchResultsProps } from './SearchResults.types';
+interface FilterComponentProps {
+    onFilterChange?: SearchResultsProps['onFilterChange'];
+    onClearFilter?: SearchResultsProps['onClearFilter'];
+}
+declare const Filter: ({ onFilterChange, onClearFilter, name, expanded, ...control }: FilterProps & FilterComponentProps) => JSX.Element;
+export default Filter;
+//# sourceMappingURL=Filter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAyB,MAAM,uBAAuB,CAAC;AAK/F,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACrD;AAED,QAAA,MAAM,MAAM,kEAMT,WAAW,GAAG,oBAAoB,KAAG,WA6EvC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/SearchResults/Filter.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Checkbox, CheckboxGroup, ExpandCollapse, Flex, Icon, registerIcon, RadioButton, RadioButtonGroup, Text, useI18n } from '@pega/cosmos-react-core';
+import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
+import { StyledFilter, StyledFilterButton } from './SearchResults.styles';
+registerIcon(caretDownIcon);
+const Filter = ({ onFilterChange, onClearFilter, name, expanded = true, ...control }) => {
+    const t = useI18n();
+    const [filterExpanded, setFilterExpanded] = useState(expanded);
+    let filterControl;
+    let filterActive = false;
+    // eslint-disable-next-line sonarjs/no-small-switch
+    switch (control.type) {
+        case 'select': {
+            const { selectType, items } = control;
+            let SelectFilterGroup = CheckboxGroup;
+            let SelectFilter = Checkbox;
+            if (selectType === 'single-select') {
+                SelectFilterGroup = RadioButtonGroup;
+                SelectFilter = RadioButton;
+            }
+            filterControl = (_jsx(SelectFilterGroup, { label: name, labelHidden: true, onChange: e => {
+                    const item = items.find((x) => x.id === e.target.id);
+                    if (!item)
+                        return;
+                    const newItem = { ...item, checked: !item.checked };
+                    onFilterChange?.({
+                        name,
+                        type: control.type,
+                        value: newItem
+                    });
+                }, children: control.items.map((filterOption) => {
+                    if (filterOption.checked)
+                        filterActive = true;
+                    return (_jsx(SelectFilter, { id: filterOption.id, name: filterOption.name, label: filterOption.label, checked: filterOption.checked }, filterOption.id));
+                }) }));
+            break;
+        }
+        default:
+            filterControl = null;
+    }
+    return (_jsxs(StyledFilter, { children: [_jsxs(Flex, { container: { justify: 'between' }, children: [_jsxs(Flex, { as: StyledFilterButton, container: { gap: 1, alignItems: 'center' }, variant: 'text', onClick: () => setFilterExpanded(curr => !curr), "aria-expanded": filterExpanded, "aria-label": t(filterExpanded ? 'collapse_noun' : 'expand_noun', [name]), children: [_jsx(Icon, { name: 'caret-down' }), _jsx(Text, { variant: 'h3', as: 'span', children: name })] }), filterActive && (_jsx(Button, { variant: 'link', onClick: () => onClearFilter?.(name), children: t('clear') }))] }), _jsx(ExpandCollapse, { collapsed: !filterExpanded, children: filterControl })] }));
+};
+export default Filter;
+//# sourceMappingURL=Filter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EACL,MAAM,EACN,QAAQ,EACR,aAAa,EACb,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,IAAI,EACJ,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AAGnG,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE1E,YAAY,CAAC,aAAa,CAAC,CAAC;AAO5B,MAAM,MAAM,GAAG,CAAC,EACd,cAAc,EACd,aAAa,EACb,IAAI,EACJ,QAAQ,GAAG,IAAI,EACf,GAAG,OAAO,EACyB,EAAe,EAAE;IACpD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAE/D,IAAI,aAAa,CAAC;IAClB,IAAI,YAAY,GAAG,KAAK,CAAC;IACzB,mDAAmD;IACnD,QAAQ,OAAO,CAAC,IAAI,EAAE;QACpB,KAAK,QAAQ,CAAC,CAAC;YACb,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC;YACtC,IAAI,iBAAiB,GAAG,aAAa,CAAC;YACtC,IAAI,YAAY,GAAG,QAAQ,CAAC;YAC5B,IAAI,UAAU,KAAK,eAAe,EAAE;gBAClC,iBAAiB,GAAG,gBAAgB,CAAC;gBACrC,YAAY,GAAG,WAAW,CAAC;aAC5B;YACD,aAAa,GAAG,CACd,KAAC,iBAAiB,IAChB,KAAK,EAAE,IAAI,EACX,WAAW,QACX,QAAQ,EAAE,CAAC,CAAC,EAAE;oBACZ,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAwB,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;oBAC5E,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,MAAM,OAAO,GAAG,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;oBAEpD,cAAc,EAAE,CAAC;wBACf,IAAI;wBACJ,IAAI,EAAE,OAAO,CAAC,IAAI;wBAClB,KAAK,EAAE,OAAO;qBACf,CAAC,CAAC;gBACL,CAAC,YAEA,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,YAAmC,EAAE,EAAE;oBACzD,IAAI,YAAY,CAAC,OAAO;wBAAE,YAAY,GAAG,IAAI,CAAC;oBAC9C,OAAO,CACL,KAAC,YAAY,IAEX,EAAE,EAAE,YAAY,CAAC,EAAE,EACnB,IAAI,EAAE,YAAY,CAAC,IAAI,EACvB,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,IAJxB,YAAY,CAAC,EAAE,CAKpB,CACH,CAAC;gBACJ,CAAC,CAAC,GACgB,CACrB,CAAC;YACF,MAAM;SACP;QACD;YACE,aAAa,GAAG,IAAI,CAAC;KACxB;IAED,OAAO,CACL,MAAC,YAAY,eACX,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,aACrC,MAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAC3C,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,mBAChC,cAAc,gBACjB,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,aAEvE,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,EAC1B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,IAAI,GACA,IACF,EACN,YAAY,IAAI,CACf,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,YACxD,CAAC,CAAC,OAAO,CAAC,GACJ,CACV,IACI,EACP,KAAC,cAAc,IAAC,SAAS,EAAE,CAAC,cAAc,YAAG,aAAa,GAAkB,IAC/D,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { useState } from 'react';\n\nimport {\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  ExpandCollapse,\n  Flex,\n  Icon,\n  registerIcon,\n  RadioButton,\n  RadioButtonGroup,\n  Text,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport { FilterProps, SearchResultsProps, SelectFilterItemProps } from './SearchResults.types';\nimport { StyledFilter, StyledFilterButton } from './SearchResults.styles';\n\nregisterIcon(caretDownIcon);\n\ninterface FilterComponentProps {\n  onFilterChange?: SearchResultsProps['onFilterChange'];\n  onClearFilter?: SearchResultsProps['onClearFilter'];\n}\n\nconst Filter = ({\n  onFilterChange,\n  onClearFilter,\n  name,\n  expanded = true,\n  ...control\n}: FilterProps & FilterComponentProps): JSX.Element => {\n  const t = useI18n();\n  const [filterExpanded, setFilterExpanded] = useState(expanded);\n\n  let filterControl;\n  let filterActive = false;\n  // eslint-disable-next-line sonarjs/no-small-switch\n  switch (control.type) {\n    case 'select': {\n      const { selectType, items } = control;\n      let SelectFilterGroup = CheckboxGroup;\n      let SelectFilter = Checkbox;\n      if (selectType === 'single-select') {\n        SelectFilterGroup = RadioButtonGroup;\n        SelectFilter = RadioButton;\n      }\n      filterControl = (\n        <SelectFilterGroup\n          label={name}\n          labelHidden\n          onChange={e => {\n            const item = items.find((x: SelectFilterItemProps) => x.id === e.target.id);\n            if (!item) return;\n            const newItem = { ...item, checked: !item.checked };\n\n            onFilterChange?.({\n              name,\n              type: control.type,\n              value: newItem\n            });\n          }}\n        >\n          {control.items.map((filterOption: SelectFilterItemProps) => {\n            if (filterOption.checked) filterActive = true;\n            return (\n              <SelectFilter\n                key={filterOption.id}\n                id={filterOption.id}\n                name={filterOption.name}\n                label={filterOption.label}\n                checked={filterOption.checked}\n              />\n            );\n          })}\n        </SelectFilterGroup>\n      );\n      break;\n    }\n    default:\n      filterControl = null;\n  }\n\n  return (\n    <StyledFilter>\n      <Flex container={{ justify: 'between' }}>\n        <Flex\n          as={StyledFilterButton}\n          container={{ gap: 1, alignItems: 'center' }}\n          variant='text'\n          onClick={() => setFilterExpanded(curr => !curr)}\n          aria-expanded={filterExpanded}\n          aria-label={t(filterExpanded ? 'collapse_noun' : 'expand_noun', [name])}\n        >\n          <Icon name='caret-down' />\n          <Text variant='h3' as='span'>\n            {name}\n          </Text>\n        </Flex>\n        {filterActive && (\n          <Button variant='link' onClick={() => onClearFilter?.(name)}>\n            {t('clear')}\n          </Button>\n        )}\n      </Flex>\n      <ExpandCollapse collapsed={!filterExpanded}>{filterControl}</ExpandCollapse>\n    </StyledFilter>\n  );\n};\n\nexport default Filter;\n"]}

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

@@ -0,0 +1,4 @@
+import { SearchResultProps } from './SearchResults.types';
+declare const SearchResult: ({ title, link, description, meta, accent }: SearchResultProps) => JSX.Element;
+export default SearchResult;
+//# sourceMappingURL=SearchResult.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResult.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAyB1D,QAAA,MAAM,YAAY,+CAMf,iBAAiB,KAAG,WActB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/SearchResults/SearchResult.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Text, MetaList, Link, Flex, StyledPopover, calculateFontSize, replaceMatchWithElement, Mark } from '@pega/cosmos-react-core';
+const StyledSearchResult = styled.article(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    h2 ${StyledPopover} {
+      font-size: ${fontSize.s};
+      font-weight: ${theme.base['font-weight'].normal};
+    }
+    padding-block-end: calc(2 * ${theme.base.spacing});
+    border-bottom: 0.0125rem solid ${theme.base.palette['border-line']};
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+  `;
+});
+StyledSearchResult.defaultProps = defaultThemeProp;
+const StyledDescription = styled(Text) `
+  word-break: break-word;
+`;
+const SearchResult = ({ title, link, description, meta = [], accent }) => {
+    return (_jsxs(Flex, { as: StyledSearchResult, container: { direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Text, { variant: 'h2', children: _jsx(Link, { ...link, children: accent ? replaceMatchWithElement(title, accent, match => _jsx(Mark, { children: match })) : title }) }), !!meta.length && _jsx(MetaList, { items: meta })] }), description && _jsx(StyledDescription, { forwardedAs: 'p', children: description })] }));
+};
+export default SearchResult;
+//# sourceMappingURL=SearchResult.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResult.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,iBAAiB,EACjB,uBAAuB,EACvB,IAAI,EACL,MAAM,yBAAyB,CAAC;AAIjC,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;SACH,aAAa;mBACH,QAAQ,CAAC,CAAC;qBACR,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;kCAEnB,KAAK,CAAC,IAAI,CAAC,OAAO;qCACf,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;GAKnE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,GAAG,EAAE,EACT,MAAM,EACY,EAAe,EAAE;IACnC,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aACtC,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAChB,KAAC,IAAI,OAAK,IAAI,YACX,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAC,IAAI,cAAE,KAAK,GAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,GAClF,GACF,EACN,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,GAAI,IACtC,EACN,WAAW,IAAI,KAAC,iBAAiB,IAAC,WAAW,EAAC,GAAG,YAAE,WAAW,GAAqB,IAC/E,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Text,\n  MetaList,\n  Link,\n  Flex,\n  StyledPopover,\n  calculateFontSize,\n  replaceMatchWithElement,\n  Mark\n} from '@pega/cosmos-react-core';\n\nimport { SearchResultProps } from './SearchResults.types';\n\nconst StyledSearchResult = styled.article(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    h2 ${StyledPopover} {\n      font-size: ${fontSize.s};\n      font-weight: ${theme.base['font-weight'].normal};\n    }\n    padding-block-end: calc(2 * ${theme.base.spacing});\n    border-bottom: 0.0125rem solid ${theme.base.palette['border-line']};\n\n    &:last-of-type {\n      border-bottom: none;\n    }\n  `;\n});\n\nStyledSearchResult.defaultProps = defaultThemeProp;\n\nconst StyledDescription = styled(Text)`\n  word-break: break-word;\n`;\n\nconst SearchResult = ({\n  title,\n  link,\n  description,\n  meta = [],\n  accent\n}: SearchResultProps): JSX.Element => {\n  return (\n    <Flex as={StyledSearchResult} container={{ direction: 'column', gap: 1 }}>\n      <Flex container={{ direction: 'column' }}>\n        <Text variant='h2'>\n          <Link {...link}>\n            {accent ? replaceMatchWithElement(title, accent, match => <Mark>{match}</Mark>) : title}\n          </Link>\n        </Text>\n        {!!meta.length && <MetaList items={meta} />}\n      </Flex>\n      {description && <StyledDescription forwardedAs='p'>{description}</StyledDescription>}\n    </Flex>\n  );\n};\n\nexport default SearchResult;\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAmBb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EACL,kBAAkB,EAInB,MAAM,uBAAuB,CAAC;AA6E/B,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAsPvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/SearchResults/SearchResults.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useContext, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Button, Count, Flex, Grid, Icon, registerIcon, Modal, EmptyState, SearchInput, Selectable, Text, useModalManager, useI18n, useBreakpoint, useAfterInitialEffect, SummaryItem, Avatar, useTheme, AppShellContext, Progress } from '@pega/cosmos-react-core';
+import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
+import * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';
+import SearchResult from './SearchResult';
+import Filter from './Filter';
+import { StyledModalFilterContent, StyledCountText, StyledSelectedFilters, StyledSearchResults, StyledResults, StyledFilters, StyledSearchSummaryItem } from './SearchResults.styles';
+registerIcon(filterIcon, filterOnIcon);
+const FilterModal = (props) => {
+    const { activeFilters, count, filters, onFilterChange, onClearFilter, onClearAllFilters } = props;
+    const t = useI18n();
+    return (_jsx(Modal, { heading: t('filters'), autoWidth: true, children: _jsxs(Grid, { as: StyledModalFilterContent, container: { rowGap: 2 }, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Text, { as: StyledCountText, variant: 'secondary', children: t('results_count', [count], { count }) }), onClearAllFilters && !!activeFilters.length && (_jsx(Button, { variant: 'link', onClick: onClearAllFilters, children: t('clear_all') }))] }), !!activeFilters.length && (_jsx(Flex, { as: StyledSelectedFilters, container: { gap: 1 }, children: activeFilters.map(filter => {
+                        return (_jsx(Selectable, { id: filter.id, onRemove: () => onFilterChange?.({
+                                name: filter.groupName,
+                                type: filter.type,
+                                value: filter.resetValue
+                            }), children: `${filter.groupName}: ${filter.name}` }, filter.id));
+                    }) })), _jsx("div", { children: filters.map((filter) => {
+                        return (_jsx(Filter, { onFilterChange: onFilterChange, onClearFilter: onClearFilter, ...filter }, filter.name));
+                    }) })] }) }));
+};
+const SearchResults = forwardRef(function SearchResults({ results, searchInputProps, count, filters, onFilterChange, onClearAllFilters, onClearFilter, onShowMore, loading = false, ...restProps }, ref) {
+    const t = useI18n();
+    const isMedium = useBreakpoint('md');
+    const { create } = useModalManager();
+    const { searchContainerEl } = useContext(AppShellContext);
+    const filtersMethods = useRef();
+    const { placeholder = t('search_placeholder_default') } = searchInputProps;
+    const { base: { palette: { 'brand-primary': primary } } } = useTheme();
+    const [accent, setAccent] = useState();
+    const [submittedSearchValue, setSubmittedSearchValue] = useState(searchInputProps.value);
+    const activeFilters = filters.flatMap(group => {
+        if (group.type === 'select') {
+            return group.items.flatMap(item => {
+                if (item.checked) {
+                    return {
+                        id: item.id,
+                        name: item.name,
+                        resetValue: { ...item, checked: false },
+                        groupName: group.name,
+                        type: group.type
+                    };
+                }
+                return [];
+            });
+        }
+        return [];
+    });
+    const openFiltersModal = () => {
+        filtersMethods.current = create(FilterModal, {
+            activeFilters,
+            count,
+            filters,
+            onFilterChange,
+            onClearFilter,
+            onClearAllFilters
+        });
+    };
+    useAfterInitialEffect(() => {
+        if (filtersMethods.current) {
+            filtersMethods.current.update({
+                activeFilters,
+                count,
+                filters
+            });
+        }
+    }, [activeFilters, count, filters]);
+    useAfterInitialEffect(() => {
+        if (isMedium && filtersMethods.current)
+            filtersMethods.current.dismiss();
+    }, [isMedium]);
+    useAfterInitialEffect(() => {
+        setAccent(submittedSearchValue ? new RegExp(submittedSearchValue, 'gi') : undefined);
+    }, [submittedSearchValue]);
+    const searchTitle = (_jsx(SummaryItem, { as: StyledSearchSummaryItem, visual: _jsx(Avatar, { icon: 'search', name: 'search', shape: 'squircle', backgroundColor: primary, color: 'white' }), primary: _jsx(Text, { variant: 'h1', children: "Search" }), actions: onClearAllFilters &&
+            isMedium &&
+            !!activeFilters.length && (_jsx(Button, { variant: 'link', onClick: onClearAllFilters, children: t('clear_all') })) }));
+    const searchInput = (_jsx(SearchInput, { ...searchInputProps, onSearchSubmit: val => {
+            searchInputProps.onSearchSubmit?.(val);
+            setSubmittedSearchValue(val);
+        }, placeholder: placeholder }));
+    return (_jsxs(Grid, { ...restProps, as: StyledSearchResults, ref: ref, md: filters.length
+            ? {
+                container: {
+                    cols: '15rem auto'
+                }
+            }
+            : undefined, sm: filters.length
+            ? {
+                container: {
+                    cols: 'auto',
+                    rowGap: 2
+                }
+            }
+            : undefined, container: {
+            rows: 'auto auto',
+            cols: 'auto 1fr',
+            areas: '"filters results"'
+        }, children: [isMedium && !!filters.length && (_jsxs(Grid, { item: { area: 'filters', alignSelf: 'start' }, as: StyledFilters, children: [searchTitle, filters.map((filter) => {
+                        return (_jsx(Filter, { onFilterChange: onFilterChange, onClearFilter: onClearFilter, ...filter }, filter.name));
+                    })] })), _jsxs(Grid, { item: { alignSelf: 'start', area: 'results' }, container: {
+                    alignItems: 'center',
+                    rowGap: 2,
+                    rows: 'auto auto 1fr',
+                    areas: '"search" "meta" "items"'
+                }, as: StyledResults, children: [loading && _jsx(Progress, { placement: 'local' }), searchContainerEl && isMedium ? (createPortal(searchInput, searchContainerEl)) : (_jsxs(Grid, { item: { area: 'search' }, children: [!isMedium && searchTitle, searchInput] })), _jsxs(Grid, { item: { area: 'meta' }, container: { rowGap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [!loading && (_jsx(Text, { as: StyledCountText, variant: 'secondary', children: submittedSearchValue !== '' || results.length > 0
+                                            ? t('results_count', [count], { count })
+                                            : '' })), !isMedium && !!filters.length && (_jsxs(Button, { variant: 'simple', onClick: openFiltersModal, children: [_jsx(Icon, { name: activeFilters.length > 0 ? 'filter-on' : 'filter' }), "\u00A0", t('filters'), "\u00A0", _jsx(Count, { children: activeFilters.length })] }))] }), !!activeFilters.length && (_jsx(Flex, { as: StyledSelectedFilters, container: { gap: 1, wrap: 'wrap' }, children: activeFilters.map(filter => {
+                                    return (_jsx(Selectable, { id: filter.id, onRemove: () => onFilterChange?.({
+                                            name: filter.groupName,
+                                            type: filter.type,
+                                            value: filter.resetValue
+                                        }), children: `${filter.groupName}: ${filter.name}` }, filter.id));
+                                }) }))] }), _jsx(Grid, { item: { area: 'items', alignSelf: results.length ? 'start' : 'stretch' }, container: { rowGap: 2 }, children: !loading && (_jsxs(_Fragment, { children: [results.length ? (results.map((result) => {
+                                    return _jsx(SearchResult, { ...result, accent: accent }, result.id);
+                                })) : (_jsx(Grid, { item: { alignSelf: 'stretch' }, children: _jsx(EmptyState, { message: submittedSearchValue === '' ? t('empty_search') : undefined }) })), onShowMore && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(Button, { variant: 'link', onClick: onShowMore, children: t('show_more') }) }))] })) })] })] }));
+});
+export default SearchResults;
+//# sourceMappingURL=SearchResults.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useContext,\n  useRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ComponentProps,\n  useState\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n  Button,\n  Count,\n  Flex,\n  ForwardProps,\n  Grid,\n  Icon,\n  registerIcon,\n  Modal,\n  ModalMethods,\n  EmptyState,\n  SearchInput,\n  Selectable,\n  Text,\n  useModalManager,\n  useI18n,\n  useBreakpoint,\n  useAfterInitialEffect,\n  SummaryItem,\n  Avatar,\n  useTheme,\n  AppShellContext,\n  Progress\n} from '@pega/cosmos-react-core';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\nimport * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';\n\nimport {\n  SearchResultsProps,\n  SearchResultProps,\n  FilterProps,\n  ActiveFilters\n} from './SearchResults.types';\nimport SearchResult from './SearchResult';\nimport Filter from './Filter';\nimport {\n  StyledModalFilterContent,\n  StyledCountText,\n  StyledSelectedFilters,\n  StyledSearchResults,\n  StyledResults,\n  StyledFilters,\n  StyledSearchSummaryItem\n} from './SearchResults.styles';\n\nregisterIcon(filterIcon, filterOnIcon);\n\nconst FilterModal = (\n  props: Pick<\n    SearchResultsProps,\n    'count' | 'filters' | 'onFilterChange' | 'onClearFilter' | 'onClearAllFilters'\n  > & {\n    activeFilters: ActiveFilters[];\n  }\n) => {\n  const { activeFilters, count, filters, onFilterChange, onClearFilter, onClearAllFilters } = props;\n  const t = useI18n();\n\n  return (\n    <Modal heading={t('filters')} autoWidth>\n      <Grid as={StyledModalFilterContent} container={{ rowGap: 2 }}>\n        <Flex container={{ gap: 1, alignItems: 'center' }}>\n          <Text as={StyledCountText} variant='secondary'>\n            {t('results_count', [count], { count })}\n          </Text>\n          {onClearAllFilters && !!activeFilters.length && (\n            <Button variant='link' onClick={onClearAllFilters}>\n              {t('clear_all')}\n            </Button>\n          )}\n        </Flex>\n        {!!activeFilters.length && (\n          <Flex as={StyledSelectedFilters} container={{ gap: 1 }}>\n            {activeFilters.map(filter => {\n              return (\n                <Selectable\n                  key={filter.id}\n                  id={filter.id}\n                  onRemove={() =>\n                    onFilterChange?.({\n                      name: filter.groupName,\n                      type: filter.type,\n                      value: filter.resetValue\n                    })\n                  }\n                >\n                  {`${filter.groupName}: ${filter.name}`}\n                </Selectable>\n              );\n            })}\n          </Flex>\n        )}\n        <div>\n          {filters.map((filter: FilterProps) => {\n            return (\n              <Filter\n                key={filter.name}\n                onFilterChange={onFilterChange}\n                onClearFilter={onClearFilter}\n                {...filter}\n              />\n            );\n          })}\n        </div>\n      </Grid>\n    </Modal>\n  );\n};\n\nconst SearchResults: FunctionComponent<SearchResultsProps & ForwardProps> = forwardRef(\n  function SearchResults(\n    {\n      results,\n      searchInputProps,\n      count,\n      filters,\n      onFilterChange,\n      onClearAllFilters,\n      onClearFilter,\n      onShowMore,\n      loading = false,\n      ...restProps\n    }: PropsWithoutRef<SearchResultsProps>,\n    ref: SearchResultsProps['ref']\n  ) {\n    const t = useI18n();\n    const isMedium = useBreakpoint('md');\n    const { create } = useModalManager();\n    const { searchContainerEl } = useContext(AppShellContext);\n    const filtersMethods = useRef<ModalMethods<ComponentProps<typeof FilterModal>>>();\n    const { placeholder = t('search_placeholder_default') } = searchInputProps;\n    const {\n      base: {\n        palette: { 'brand-primary': primary }\n      }\n    } = useTheme();\n    const [accent, setAccent] = useState<undefined | RegExp>();\n    const [submittedSearchValue, setSubmittedSearchValue] = useState(searchInputProps.value);\n\n    const activeFilters: ActiveFilters[] = filters.flatMap(group => {\n      if (group.type === 'select') {\n        return group.items.flatMap(item => {\n          if (item.checked) {\n            return {\n              id: item.id,\n              name: item.name,\n              resetValue: { ...item, checked: false },\n              groupName: group.name,\n              type: group.type\n            };\n          }\n          return [];\n        });\n      }\n      return [];\n    });\n\n    const openFiltersModal = () => {\n      filtersMethods.current = create(FilterModal, {\n        activeFilters,\n        count,\n        filters,\n        onFilterChange,\n        onClearFilter,\n        onClearAllFilters\n      });\n    };\n\n    useAfterInitialEffect(() => {\n      if (filtersMethods.current) {\n        filtersMethods.current.update({\n          activeFilters,\n          count,\n          filters\n        });\n      }\n    }, [activeFilters, count, filters]);\n\n    useAfterInitialEffect(() => {\n      if (isMedium && filtersMethods.current) filtersMethods.current.dismiss();\n    }, [isMedium]);\n\n    useAfterInitialEffect(() => {\n      setAccent(submittedSearchValue ? new RegExp(submittedSearchValue, 'gi') : undefined);\n    }, [submittedSearchValue]);\n\n    const searchTitle = (\n      <SummaryItem\n        as={StyledSearchSummaryItem}\n        visual={\n          <Avatar\n            icon='search'\n            name='search'\n            shape='squircle'\n            backgroundColor={primary}\n            color='white'\n          />\n        }\n        primary={<Text variant='h1'>Search</Text>}\n        actions={\n          onClearAllFilters &&\n          isMedium &&\n          !!activeFilters.length && (\n            <Button variant='link' onClick={onClearAllFilters}>\n              {t('clear_all')}\n            </Button>\n          )\n        }\n      />\n    );\n    const searchInput = (\n      <SearchInput\n        {...searchInputProps}\n        onSearchSubmit={val => {\n          searchInputProps.onSearchSubmit?.(val);\n          setSubmittedSearchValue(val);\n        }}\n        placeholder={placeholder}\n      />\n    );\n\n    return (\n      <Grid\n        {...restProps}\n        as={StyledSearchResults}\n        ref={ref}\n        md={\n          filters.length\n            ? {\n                container: {\n                  cols: '15rem auto'\n                }\n              }\n            : undefined\n        }\n        sm={\n          filters.length\n            ? {\n                container: {\n                  cols: 'auto',\n                  rowGap: 2\n                }\n              }\n            : undefined\n        }\n        container={{\n          rows: 'auto auto',\n          cols: 'auto 1fr',\n          areas: '\"filters results\"'\n        }}\n      >\n        {isMedium && !!filters.length && (\n          <Grid item={{ area: 'filters', alignSelf: 'start' }} as={StyledFilters}>\n            {searchTitle}\n            {filters.map((filter: FilterProps) => {\n              return (\n                <Filter\n                  key={filter.name}\n                  onFilterChange={onFilterChange}\n                  onClearFilter={onClearFilter}\n                  {...filter}\n                />\n              );\n            })}\n          </Grid>\n        )}\n        <Grid\n          item={{ alignSelf: 'start', area: 'results' }}\n          container={{\n            alignItems: 'center',\n            rowGap: 2,\n            rows: 'auto auto 1fr',\n            areas: '\"search\" \"meta\" \"items\"'\n          }}\n          as={StyledResults}\n        >\n          {loading && <Progress placement='local' />}\n          {searchContainerEl && isMedium ? (\n            createPortal(searchInput, searchContainerEl)\n          ) : (\n            <Grid item={{ area: 'search' }}>\n              {!isMedium && searchTitle}\n              {searchInput}\n            </Grid>\n          )}\n          <Grid item={{ area: 'meta' }} container={{ rowGap: 1 }}>\n            <Flex container={{ justify: 'between', alignItems: 'center' }}>\n              {!loading && (\n                <Text as={StyledCountText} variant='secondary'>\n                  {submittedSearchValue !== '' || results.length > 0\n                    ? t('results_count', [count], { count })\n                    : ''}\n                </Text>\n              )}\n              {!isMedium && !!filters.length && (\n                <Button variant='simple' onClick={openFiltersModal}>\n                  <Icon name={activeFilters.length > 0 ? 'filter-on' : 'filter'} />\n                  &nbsp;{t('filters')}&nbsp;\n                  <Count>{activeFilters.length}</Count>\n                </Button>\n              )}\n            </Flex>\n            {!!activeFilters.length && (\n              <Flex as={StyledSelectedFilters} container={{ gap: 1, wrap: 'wrap' }}>\n                {activeFilters.map(filter => {\n                  return (\n                    <Selectable\n                      key={filter.id}\n                      id={filter.id}\n                      onRemove={() =>\n                        onFilterChange?.({\n                          name: filter.groupName,\n                          type: filter.type,\n                          value: filter.resetValue\n                        })\n                      }\n                    >\n                      {`${filter.groupName}: ${filter.name}`}\n                    </Selectable>\n                  );\n                })}\n              </Flex>\n            )}\n          </Grid>\n          <Grid\n            item={{ area: 'items', alignSelf: results.length ? 'start' : 'stretch' }}\n            container={{ rowGap: 2 }}\n          >\n            {!loading && (\n              <>\n                {results.length ? (\n                  results.map((result: SearchResultProps) => {\n                    return <SearchResult key={result.id} {...result} accent={accent} />;\n                  })\n                ) : (\n                  <Grid item={{ alignSelf: 'stretch' }}>\n                    <EmptyState\n                      message={submittedSearchValue === '' ? t('empty_search') : undefined}\n                    />\n                  </Grid>\n                )}\n                {onShowMore && (\n                  <Flex container={{ justify: 'center' }}>\n                    <Button variant='link' onClick={onShowMore}>\n                      {t('show_more')}\n                    </Button>\n                  </Flex>\n                )}\n              </>\n            )}\n          </Grid>\n        </Grid>\n      </Grid>\n    );\n  }\n);\n\nexport default SearchResults;\n"]}

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

@@ -0,0 +1,11 @@
+export declare const StyledSearchResults: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFilterTitle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCountText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledModalFilterContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSelectedFilters: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFilter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFilterButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSearchSummaryItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFilters: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledResults: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=SearchResults.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,mBAAmB,yGAE/B,CAAC;AAIF,eAAO,MAAM,iBAAiB,0GAI5B,CAAC;AAIH,eAAO,MAAM,eAAe,0GAI1B,CAAC;AAIH,eAAO,MAAM,wBAAwB,yGAWpC,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAWjC,CAAC;AAIF,eAAO,MAAM,YAAY,yGAAe,CAAC;AAIzC,eAAO,MAAM,kBAAkB,qOAsB7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAYnC,CAAC;AAIF,eAAO,MAAM,aAAa,yGAWxB,CAAC;AAIH,eAAO,MAAM,aAAa,yGAOxB,CAAC"}

package/lib/components/SearchResults/SearchResults.styles.js

@@ -0,0 +1,88 @@
+import styled, { css } from 'styled-components';
+import { Button, calculateFontSize, defaultThemeProp, StyledIcon, StyledSearchInput, useDirection } from '@pega/cosmos-react-core';
+export const StyledSearchResults = styled.div `
+  min-height: inherit;
+`;
+StyledSearchResults.defaultProps = defaultThemeProp;
+export const StyledFilterTitle = styled.span(({ theme: { base } }) => {
+    return css `
+    padding-bottom: calc(2 * ${base.spacing});
+  `;
+});
+StyledFilterTitle.defaultProps = defaultThemeProp;
+export const StyledCountText = styled.span(({ theme: { base } }) => {
+    return css `
+    font-weight: ${base['font-weight']['semi-bold']};
+  `;
+});
+StyledCountText.defaultProps = defaultThemeProp;
+export const StyledModalFilterContent = styled.div(({ theme: { base: { spacing } } }) => {
+    return css `
+      margin-top: calc(0.5 * ${spacing});
+      width: calc(${spacing} * 50);
+    `;
+});
+StyledModalFilterContent.defaultProps = defaultThemeProp;
+export const StyledSelectedFilters = styled.div(({ theme: { base: { spacing } } }) => {
+    return css `
+      overflow-x: auto;
+      padding-bottom: calc(1 * ${spacing});
+    `;
+});
+StyledSelectedFilters.defaultProps = defaultThemeProp;
+export const StyledFilter = styled.div ``;
+StyledFilter.defaultProps = defaultThemeProp;
+export const StyledFilterButton = styled(Button)(({ theme: { base } }) => {
+    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);
+    const { rtl } = useDirection();
+    return css `
+    display: inline-flex;
+    font-size: ${fontSize.xl};
+
+    ${StyledIcon} {
+      height: 1em;
+      width: 1em;
+      transition: transform ${base.animation.speed} ${base.animation.timing.ease};
+    }
+
+    &[aria-expanded='true'] ${StyledIcon} {
+      transform: rotate(0);
+    }
+
+    &[aria-expanded='false'] ${StyledIcon} {
+      transform: rotate(calc(${rtl ? '1' : '-1'} * 90deg));
+    }
+  `;
+});
+StyledFilterButton.defaultProps = defaultThemeProp;
+export const StyledSearchSummaryItem = styled.div(({ theme: { base: { spacing } } }) => css `
+    column-gap: calc(${spacing} * 1);
+
+    + ${StyledSearchInput} {
+      margin-block-start: calc(${spacing} * 1);
+    }
+  `);
+StyledSearchSummaryItem.defaultProps = defaultThemeProp;
+export const StyledFilters = styled.div(({ theme }) => {
+    return css `
+    position: sticky;
+    top: var(--appshell-offset, 0);
+    max-height: calc(100vh - var(--appshell-offset, 0rem));
+    overflow: auto;
+    > ${StyledFilter}, ${StyledSearchSummaryItem} {
+      border-bottom: 0.0125rem solid ${theme.base.palette['border-line']};
+      padding: calc(${theme.base.spacing} * 2);
+    }
+  `;
+});
+StyledFilters.defaultProps = defaultThemeProp;
+export const StyledResults = styled.div(({ theme }) => {
+    return css `
+    background-color: ${theme.base.palette['primary-background']};
+    padding: calc(${theme.base.spacing} * 2);
+    position: relative;
+    min-height: calc(100vh - var(--appshell-offset, 0rem));
+  `;
+});
+StyledResults.defaultProps = defaultThemeProp;
+//# sourceMappingURL=SearchResults.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.styles.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5C,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACnE,OAAO,GAAG,CAAA;+BACmB,IAAI,CAAC,OAAO;GACxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;mBACO,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;GAChD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAChD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;+BACiB,OAAO;oBAClB,OAAO;KACtB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;iCAEmB,OAAO;KACnC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEzC,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACvE,MAAM,QAAQ,GAAG,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1E,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;;iBAEK,QAAQ,CAAC,EAAE;;MAEtB,UAAU;;;8BAGc,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;8BAGlD,UAAU;;;;+BAIT,UAAU;+BACV,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;;GAE5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAC/C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;uBACY,OAAO;;QAEtB,iBAAiB;iCACQ,OAAO;;GAErC,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;;;;QAKJ,YAAY,KAAK,uBAAuB;uCACT,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;sBAClD,KAAK,CAAC,IAAI,CAAC,OAAO;;GAErC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;oBAC5C,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  calculateFontSize,\n  defaultThemeProp,\n  StyledIcon,\n  StyledSearchInput,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledSearchResults = styled.div`\n  min-height: inherit;\n`;\n\nStyledSearchResults.defaultProps = defaultThemeProp;\n\nexport const StyledFilterTitle = styled.span(({ theme: { base } }) => {\n  return css`\n    padding-bottom: calc(2 * ${base.spacing});\n  `;\n});\n\nStyledFilterTitle.defaultProps = defaultThemeProp;\n\nexport const StyledCountText = styled.span(({ theme: { base } }) => {\n  return css`\n    font-weight: ${base['font-weight']['semi-bold']};\n  `;\n});\n\nStyledCountText.defaultProps = defaultThemeProp;\n\nexport const StyledModalFilterContent = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      margin-top: calc(0.5 * ${spacing});\n      width: calc(${spacing} * 50);\n    `;\n  }\n);\n\nStyledModalFilterContent.defaultProps = defaultThemeProp;\n\nexport const StyledSelectedFilters = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      overflow-x: auto;\n      padding-bottom: calc(1 * ${spacing});\n    `;\n  }\n);\n\nStyledSelectedFilters.defaultProps = defaultThemeProp;\n\nexport const StyledFilter = styled.div``;\n\nStyledFilter.defaultProps = defaultThemeProp;\n\nexport const StyledFilterButton = styled(Button)(({ theme: { base } }) => {\n  const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n  const { rtl } = useDirection();\n  return css`\n    display: inline-flex;\n    font-size: ${fontSize.xl};\n\n    ${StyledIcon} {\n      height: 1em;\n      width: 1em;\n      transition: transform ${base.animation.speed} ${base.animation.timing.ease};\n    }\n\n    &[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(0);\n    }\n\n    &[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(calc(${rtl ? '1' : '-1'} * 90deg));\n    }\n  `;\n});\n\nStyledFilterButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchSummaryItem = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => css`\n    column-gap: calc(${spacing} * 1);\n\n    + ${StyledSearchInput} {\n      margin-block-start: calc(${spacing} * 1);\n    }\n  `\n);\n\nStyledSearchSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledFilters = styled.div(({ theme }) => {\n  return css`\n    position: sticky;\n    top: var(--appshell-offset, 0);\n    max-height: calc(100vh - var(--appshell-offset, 0rem));\n    overflow: auto;\n    > ${StyledFilter}, ${StyledSearchSummaryItem} {\n      border-bottom: 0.0125rem solid ${theme.base.palette['border-line']};\n      padding: calc(${theme.base.spacing} * 2);\n    }\n  `;\n});\n\nStyledFilters.defaultProps = defaultThemeProp;\n\nexport const StyledResults = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    padding: calc(${theme.base.spacing} * 2);\n    position: relative;\n    min-height: calc(100vh - var(--appshell-offset, 0rem));\n  `;\n});\n\nStyledResults.defaultProps = defaultThemeProp;\n"]}