@pega/cosmos-react-work 4.0.0-dev.9.1 → 4.0.0-rc.1

package/lib/components/Tasks/Tasks.d.ts

@@ -1,22 +1,28 @@
-import { ReactNode, FC, ReactElement } from 'react';
-import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { FC } from 'react';
+import { ForwardProps, NoChildrenProp, ListToolbarProps, SearchInputProps, TestIdProp, AvatarProps } from '@pega/cosmos-react-core';
+import { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';
 import { TaskItemProps } from './TaskList';
-export interface TasksProps extends NoChildrenProp {
-    /** An array of TaskItemProps to generate the list.  */
+export interface TasksProps extends NoChildrenProp, TestIdProp {
+    /** An array of TaskItemProps to generate the list. */
     items: TaskItemProps[];
-    /** Content to render when the list is empty. */
-    emptyPlaceholder: ReactNode;
     /** Heading text to render at the top of the list. */
-    headerText: string;
-    /** A visual element i.e. (Avatar | Icon) to accompany the header text. */
-    headerVisual?: ReactElement;
-    /** A region for supplemental task list info or controls. */
-    headerSecondary?: ReactNode;
+    name: ListToolbarProps['name'];
+    /** A visual to accompany the header text. */
+    avatar?: Pick<AvatarProps, 'name' | 'icon' | 'imageSrc' | 'status'>;
+    /** Definition of view selection. */
+    viewSelector?: Pick<ViewSelectorProps, 'views' | 'onViewSelect'>;
     /** Integer representing the total count of tasks. */
-    count?: number | null;
-    /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer. */
+    count?: number;
+    /** Opt-in search configuration. */
+    search?: Pick<SearchInputProps, 'value' | 'onSearchChange'>;
+    /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. */
     onExpandToggle?: () => void;
 }
-declare const Tasks: FC<ForwardProps & TasksProps>;
-export default Tasks;
+export declare const StyledTasks: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & ForwardProps>, import("styled-components").DefaultTheme, {
+    openItem?: boolean | undefined;
+}, never>;
+declare const _default: FC<ForwardProps & TasksProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["show-more-less"]>;
+};
+export default _default;
 //# sourceMappingURL=Tasks.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAGzE,OAAO,EAWL,YAAY,EACZ,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAEjC,OAAiB,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAE/D,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,uDAAuD;IACvD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,gDAAgD;IAChD,gBAAgB,EAAE,SAAS,CAAC;IAC5B,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,4DAA4D;IAC5D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,2IAA2I;IAC3I,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAYD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CA6DxC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAGhD,OAAO,EAOL,YAAY,EACZ,cAAc,EAGd,gBAAgB,EAChB,gBAAgB,EAGhB,UAAU,EACV,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAEzG,OAAiB,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAG/D,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,UAAU;IAC5D,sDAAsD;IACtD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,qDAAqD;IACrD,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;IACpE,oCAAoC;IACpC,YAAY,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,cAAc,CAAC,CAAC;IACjE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,MAAM,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,gBAAgB,CAAC,CAAC;IAC5D,qJAAqJ;IACrJ,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW;;SAMtB,CAAC;;;;AAuEH,wBAAmD"}

package/lib/components/Tasks/Tasks.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { Card, CardHeader, CardContent, CardFooter, Flex, Text, SummaryItem, Count, Button, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';
+import { Card, CardHeader, CardContent, CardFooter, Button, useI18n, defaultThemeProp, ListToolbar, EmptyState, useTestIds, Avatar, withTestIds } from '@pega/cosmos-react-core';
 import TaskList, { TaskItem } from './TaskList';
-const StyledTasks = styled(Card)(({ theme, openItem }) => {
+import { getTasksTestIds } from './Tasks.test-ids';
+export const StyledTasks = styled(Card)(({ theme, openItem }) => {
     return openItem
         ? css `
         box-shadow: ${theme.base.shadow.low};
@@ -12,16 +13,15 @@ const StyledTasks = styled(Card)(({ theme, openItem }) => {
 });
 StyledTasks.defaultProps = defaultThemeProp;
 const Tasks = (props) => {
-    const { items = [], headerText, headerVisual, headerSecondary, count, onExpandToggle, emptyPlaceholder, ...restProps } = props;
+    const { testId, items = [], name, avatar, viewSelector, count = items.length, search, onExpandToggle, ...restProps } = props;
+    const testIds = useTestIds(testId, getTasksTestIds);
     const openItem = items.find(item => item.content);
     const t = useI18n();
-    const hasFooter = useMemo(() => {
-        return !openItem && typeof count === 'number' && count > 3;
-    }, [openItem, count]);
+    const hasFooter = !!(!openItem && onExpandToggle && count > 0);
     const TaskItems = useMemo(() => {
-        return openItem ? _jsx(TaskItem, { ...openItem }) : _jsx(TaskList, { items: items, hasFooter: hasFooter });
+        return openItem ? (_jsx(TaskItem, { ...openItem })) : (_jsx(TaskList, { items: items, hasFooter: hasFooter, testId: testIds.root }));
     }, [items, openItem]);
-    return (_jsxs(StyledTasks, { ...restProps, openItem: !!openItem, children: [!openItem && (_jsx(CardHeader, { children: _jsx(SummaryItem, { visual: headerVisual, primary: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h2', children: headerText }), _jsx(Count, { children: count ?? null })] }), secondary: headerSecondary }) })), _jsx(CardContent, { children: items.length > 0 ? TaskItems : emptyPlaceholder }), hasFooter && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', "aria-label": t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
+    return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, "data-app-region": true, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [avatar && _jsx(Avatar, { ...avatar }), _jsx(ListToolbar, { name: name, headingTag: 'h2', viewSelector: viewSelector, count: { total: count }, search: search, item: { grow: 1 } })] })), _jsx(CardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) }), hasFooter && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { "data-testid": testIds.showMoreLess, variant: 'link', "aria-label": t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
                         onExpandToggle?.();
                         if (!!count && count <= items.length) {
                             const { currentTarget } = e;
@@ -32,5 +32,5 @@ const Tasks = (props) => {
                         }
                     }, children: t(!!count && count > items.length ? 'show_more' : 'show_less') }) }))] }));
 };
-export default Tasks;
+export default withTestIds(Tasks, getTasksTestIds);
 //# sourceMappingURL=Tasks.js.map

package/lib/components/Tasks/Tasks.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode, FC, ReactElement, useMemo, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Flex,\n  Text,\n  SummaryItem,\n  Count,\n  Button,\n  useI18n,\n  ForwardProps,\n  NoChildrenProp,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem, TaskItemProps } from './TaskList';\n\nexport interface TasksProps extends NoChildrenProp {\n  /** An array of TaskItemProps to generate the list.  */\n  items: TaskItemProps[];\n  /** Content to render when the list is empty. */\n  emptyPlaceholder: ReactNode;\n  /** Heading text to render at the top of the list. */\n  headerText: string;\n  /** A visual element i.e. (Avatar | Icon) to accompany the header text. */\n  headerVisual?: ReactElement;\n  /** A region for supplemental task list info or controls. */\n  headerSecondary?: ReactNode;\n  /** Integer representing the total count of tasks. */\n  count?: number | null;\n  /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer. */\n  onExpandToggle?: () => void;\n}\n\nconst StyledTasks = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n  return openItem\n    ? css`\n        box-shadow: ${theme.base.shadow.low};\n      `\n    : null;\n});\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n  const {\n    items = [],\n    headerText,\n    headerVisual,\n    headerSecondary,\n    count,\n    onExpandToggle,\n    emptyPlaceholder,\n    ...restProps\n  } = props;\n  const openItem = items.find(item => item.content);\n  const t = useI18n();\n\n  const hasFooter = useMemo(() => {\n    return !openItem && typeof count === 'number' && count > 3;\n  }, [openItem, count]);\n\n  const TaskItems = useMemo(() => {\n    return openItem ? <TaskItem {...openItem} /> : <TaskList items={items} hasFooter={hasFooter} />;\n  }, [items, openItem]);\n\n  return (\n    <StyledTasks {...restProps} openItem={!!openItem}>\n      {!openItem && (\n        <CardHeader>\n          <SummaryItem\n            visual={headerVisual}\n            primary={\n              <Flex container={{ alignItems: 'center', gap: 1 }}>\n                <Text variant='h2'>{headerText}</Text>\n                <Count>{count ?? null}</Count>\n              </Flex>\n            }\n            secondary={headerSecondary}\n          />\n        </CardHeader>\n      )}\n      <CardContent>{items.length > 0 ? TaskItems : emptyPlaceholder}</CardContent>\n\n      {hasFooter && (\n        <CardFooter justify='center'>\n          <Button\n            variant='link'\n            aria-label={t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks'])}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              onExpandToggle?.();\n              if (!!count && count <= items.length) {\n                const { currentTarget } = e;\n                requestAnimationFrame(() => {\n                  if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n                });\n              }\n            }}\n          >\n            {t(!!count && count > items.length ? 'show_more' : 'show_less')}\n          </Button>\n        </CardFooter>\n      )}\n    </StyledTasks>\n  );\n};\n\nexport default Tasks;\n"]}
+{"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useMemo, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Button,\n  useI18n,\n  ForwardProps,\n  NoChildrenProp,\n  defaultThemeProp,\n  ListToolbar,\n  ListToolbarProps,\n  SearchInputProps,\n  EmptyState,\n  useTestIds,\n  TestIdProp,\n  AvatarProps,\n  Avatar,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport TaskList, { TaskItem, TaskItemProps } from './TaskList';\nimport { getTasksTestIds } from './Tasks.test-ids';\n\nexport interface TasksProps extends NoChildrenProp, TestIdProp {\n  /** An array of TaskItemProps to generate the list. */\n  items: TaskItemProps[];\n  /** Heading text to render at the top of the list. */\n  name: ListToolbarProps['name'];\n  /** A visual to accompany the header text. */\n  avatar?: Pick<AvatarProps, 'name' | 'icon' | 'imageSrc' | 'status'>;\n  /** Definition of view selection. */\n  viewSelector?: Pick<ViewSelectorProps, 'views' | 'onViewSelect'>;\n  /** Integer representing the total count of tasks. */\n  count?: number;\n  /** Opt-in search configuration. */\n  search?: Pick<SearchInputProps, 'value' | 'onSearchChange'>;\n  /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. */\n  onExpandToggle?: () => void;\n}\n\nexport const StyledTasks = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n  return openItem\n    ? css`\n        box-shadow: ${theme.base.shadow.low};\n      `\n    : null;\n});\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n  const {\n    testId,\n    items = [],\n    name,\n    avatar,\n    viewSelector,\n    count = items.length,\n    search,\n    onExpandToggle,\n    ...restProps\n  } = props;\n  const testIds = useTestIds(testId, getTasksTestIds);\n  const openItem = items.find(item => item.content);\n  const t = useI18n();\n\n  const hasFooter = !!(!openItem && onExpandToggle && count > 0);\n\n  const TaskItems = useMemo(() => {\n    return openItem ? (\n      <TaskItem {...openItem} />\n    ) : (\n      <TaskList items={items} hasFooter={hasFooter} testId={testIds.root} />\n    );\n  }, [items, openItem]);\n\n  return (\n    <StyledTasks data-testid={testIds.root} {...restProps} openItem={!!openItem} data-app-region>\n      {!openItem && (\n        <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n          {avatar && <Avatar {...avatar} />}\n          <ListToolbar\n            name={name}\n            headingTag='h2'\n            viewSelector={viewSelector}\n            count={{ total: count }}\n            search={search}\n            item={{ grow: 1 }}\n          />\n        </CardHeader>\n      )}\n      <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>\n\n      {hasFooter && (\n        <CardFooter justify='center'>\n          <Button\n            data-testid={testIds.showMoreLess}\n            variant='link'\n            aria-label={t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks'])}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              onExpandToggle?.();\n              if (!!count && count <= items.length) {\n                const { currentTarget } = e;\n                requestAnimationFrame(() => {\n                  if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n                });\n              }\n            }}\n          >\n            {t(!!count && count > items.length ? 'show_more' : 'show_less')}\n          </Button>\n        </CardFooter>\n      )}\n    </StyledTasks>\n  );\n};\n\nexport default withTestIds(Tasks, getTasksTestIds);\n"]}

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

@@ -0,0 +1,4 @@
+export declare const getTasksTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["show-more-less"]>;
+export declare const getTaskListTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+export declare const getTaskItemTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["open-task"]>;
+//# sourceMappingURL=Tasks.test-ids.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tasks.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,mHAAsD,CAAC;AAEnF,eAAO,MAAM,kBAAkB,mGAA0C,CAAC;AAE1E,eAAO,MAAM,kBAAkB,8GAAqD,CAAC"}

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

@@ -0,0 +1,5 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const getTasksTestIds = createTestIds('tasks', ['show-more-less']);
+export const getTaskListTestIds = createTestIds('task-list', []);
+export const getTaskItemTestIds = createTestIds('task-item', ['open-task']);
+//# sourceMappingURL=Tasks.test-ids.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tasks.test-ids.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,EAAE,CAAC,gBAAgB,CAAU,CAAC,CAAC;AAEnF,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,EAAW,CAAC,CAAC;AAE1E,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC,WAAW,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getTasksTestIds = createTestIds('tasks', ['show-more-less'] as const);\n\nexport const getTaskListTestIds = createTestIds('task-list', [] as const);\n\nexport const getTaskItemTestIds = createTestIds('task-item', ['open-task'] as const);\n"]}

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

@@ -1,6 +1,4 @@
-export { default } from './Tasks';
-export { TasksProps } from './Tasks';
-export { default as TaskList } from './TaskList';
-export { TaskListProps } from './TaskList';
-export { TaskItemProps } from './TaskList';
+export { default, type TasksProps } from './Tasks';
+export { default as TaskList, type TaskListProps, type TaskItemProps } from './TaskList';
+export { listToolbarHelpers as tasksHelpers } from '@pega/cosmos-react-core';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AACzF,OAAO,EAAE,kBAAkB,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC"}

package/lib/components/Tasks/index.js

@@ -1,3 +1,4 @@
 export { default } from './Tasks';
 export { default as TaskList } from './TaskList';
+export { listToolbarHelpers as tasksHelpers } from '@pega/cosmos-react-core';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tasks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './Tasks';\nexport { TasksProps } from './Tasks';\nexport { default as TaskList } from './TaskList';\nexport { TaskListProps } from './TaskList';\nexport { TaskItemProps } from './TaskList';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tasks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAmB,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAA0C,MAAM,YAAY,CAAC;AACzF,OAAO,EAAE,kBAAkB,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { default, type TasksProps } from './Tasks';\nexport { default as TaskList, type TaskListProps, type TaskItemProps } from './TaskList';\nexport { listToolbarHelpers as tasksHelpers } from '@pega/cosmos-react-core';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAIlD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAqE7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwC,MAAM,OAAO,CAAC;AAE5F,OAAO,EAEL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAIlD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAkF5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/Timeline/Timeline.js

@@ -1,24 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, Fragment, useEffect, useState } from 'react';
-import { Progress, useConsolidatedRef, useItemIntersection } from '@pega/cosmos-react-core';
-import { isSameGroup, sortByDate } from './utils';
-import { StyledDate, StyledTimelineTable, StyledLoadingCell } from './Timeline.styles';
+import { forwardRef, useEffect, useState } from 'react';
+import { Progress, useConsolidatedRef, useItemIntersection, DateTimeDisplay, Grid } from '@pega/cosmos-react-core';
+import { groupByActivity, sortByDate } from './utils';
+import { StyledDate, StyledTimeline, StyledLoadingCell } from './Timeline.styles';
 import TimelineItem from './TimelineItem';
-const Timeline = forwardRef(({ activity, currentTime, sortOrder = 'descending', groupBy = 'date', loading, loadMore, ...restProps }, ref) => {
+const Timeline = forwardRef(function Timeline({ activity, currentTime, sortOrder = 'descending', groupBy = 'date', loading, loadMore, ...restProps }, ref) {
     const [sortedData, setSortedData] = useState(() => sortByDate(activity, sortOrder));
-    const tableRef = useConsolidatedRef(ref);
-    useItemIntersection(tableRef, activity.length - 1, () => {
+    const listRef = useConsolidatedRef(ref);
+    useItemIntersection(listRef, activity.length - 1, () => {
         if (!loading)
             loadMore?.();
-    }, ':scope > tbody > tr');
+    }, `:scope li > div`);
     useEffect(() => {
         setSortedData(sortByDate(activity, sortOrder));
     }, [activity, sortOrder]);
-    return (_jsx(StyledTimelineTable, { ref: tableRef, ...restProps, children: _jsxs("tbody", { children: [sortedData.map((item, index) => {
-                    const isFirstItemInGroup = !isSameGroup(sortedData[index - 1]?.date, item.date, groupBy);
-                    const isLastItemInGroup = !isSameGroup(sortedData[index + 1]?.date, item.date, groupBy);
-                    return (_jsxs(Fragment, { children: [isFirstItemInGroup && groupBy !== 'none' && (_jsx("tr", { children: _jsx("td", { colSpan: 3, children: _jsx(StyledDate, { variant: groupBy, format: 'long', value: item.date }) }) })), _jsx(TimelineItem, { item: item, timeFormat: groupBy === 'date' ? 'time' : 'datetime', prevItemDate: isFirstItemInGroup ? undefined : sortedData[index - 1].date, nextItemDate: isLastItemInGroup ? undefined : sortedData[index + 1].date, currentTime: currentTime })] }, item.id));
-                }), loading && (_jsx("tr", { children: _jsx(StyledLoadingCell, { colSpan: 3, children: _jsx(Progress, { placement: 'local' }) }) }))] }) }));
+    return (_jsxs(Grid, { ...restProps, container: {
+            cols: 'auto 1fr',
+            colGap: 0.75,
+            alignItems: 'start'
+        }, sm: { container: { cols: 'auto auto  1fr', colGap: 0.25 } }, as: StyledTimeline, ref: listRef, children: [groupBy === 'none'
+                ? sortedData.map((item, index) => (_jsx(TimelineItem, { item: item, timeFormat: 'datetime', prevItemDate: sortedData[index - 1]?.date, nextItemDate: sortedData[index + 1]?.date, currentTime: currentTime }, item.id)))
+                : groupByActivity(sortedData, groupBy).map(groupedData => (_jsxs(Grid, { item: { colStartEnd: '1/-1' }, as: 'li', children: [_jsx(DateTimeDisplay, { as: StyledDate, variant: groupBy, format: 'long', value: groupedData[0].date }), _jsx("ol", { children: groupedData.map((item, index) => (_jsx(TimelineItem, { item: item, timeFormat: groupBy === 'date' ? 'time' : 'datetime', prevItemDate: groupedData[index - 1]?.date, nextItemDate: groupedData[index + 1]?.date, currentTime: currentTime }, item.id))) })] }, groupedData[0].id))), loading && (_jsx("li", { children: _jsx(StyledLoadingCell, { children: _jsx(Progress, { placement: 'local' }) }) }))] }));
 });
 export default Timeline;
 //# sourceMappingURL=Timeline.js.map

package/lib/components/Timeline/Timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  Fragment,\n  FunctionComponent,\n  PropsWithoutRef,\n  useEffect,\n  useState\n} from 'react';\n\nimport {\n  Progress,\n  ForwardProps,\n  useConsolidatedRef,\n  useItemIntersection\n} from '@pega/cosmos-react-core';\n\nimport { isSameGroup, sortByDate } from './utils';\nimport type TimelineProps from './Timeline.types';\nimport { StyledDate, StyledTimelineTable, StyledLoadingCell } from './Timeline.styles';\nimport TimelineItem from './TimelineItem';\n\nconst Timeline: FunctionComponent<TimelineProps & ForwardProps> = forwardRef(\n  (\n    {\n      activity,\n      currentTime,\n      sortOrder = 'descending',\n      groupBy = 'date',\n      loading,\n      loadMore,\n      ...restProps\n    }: PropsWithoutRef<TimelineProps>,\n    ref: TimelineProps['ref']\n  ) => {\n    const [sortedData, setSortedData] = useState(() => sortByDate(activity, sortOrder));\n\n    const tableRef = useConsolidatedRef(ref);\n    useItemIntersection(\n      tableRef,\n      activity.length - 1,\n      () => {\n        if (!loading) loadMore?.();\n      },\n      ':scope > tbody > tr'\n    );\n\n    useEffect(() => {\n      setSortedData(sortByDate(activity, sortOrder));\n    }, [activity, sortOrder]);\n\n    return (\n      <StyledTimelineTable ref={tableRef} {...restProps}>\n        <tbody>\n          {sortedData.map((item, index) => {\n            const isFirstItemInGroup = !isSameGroup(\n              sortedData[index - 1]?.date,\n              item.date,\n              groupBy\n            );\n            const isLastItemInGroup = !isSameGroup(sortedData[index + 1]?.date, item.date, groupBy);\n            return (\n              <Fragment key={item.id}>\n                {isFirstItemInGroup && groupBy !== 'none' && (\n                  <tr>\n                    <td colSpan={3}>\n                      <StyledDate variant={groupBy} format='long' value={item.date} />\n                    </td>\n                  </tr>\n                )}\n                <TimelineItem\n                  item={item}\n                  timeFormat={groupBy === 'date' ? 'time' : 'datetime'}\n                  prevItemDate={isFirstItemInGroup ? undefined : sortedData[index - 1].date}\n                  nextItemDate={isLastItemInGroup ? undefined : sortedData[index + 1].date}\n                  currentTime={currentTime}\n                />\n              </Fragment>\n            );\n          })}\n          {loading && (\n            <tr>\n              <StyledLoadingCell colSpan={3}>\n                <Progress placement='local' />\n              </StyledLoadingCell>\n            </tr>\n          )}\n        </tbody>\n      </StyledTimelineTable>\n    );\n  }\n);\n\nexport default Timeline;\n"]}
+{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useEffect, useState } from 'react';\n\nimport {\n  Progress,\n  ForwardProps,\n  useConsolidatedRef,\n  useItemIntersection,\n  DateTimeDisplay,\n  Grid\n} from '@pega/cosmos-react-core';\n\nimport { groupByActivity, sortByDate } from './utils';\nimport type TimelineProps from './Timeline.types';\nimport { StyledDate, StyledTimeline, StyledLoadingCell } from './Timeline.styles';\nimport TimelineItem from './TimelineItem';\n\nconst Timeline: FunctionComponent<TimelineProps & ForwardProps> = forwardRef(function Timeline(\n  {\n    activity,\n    currentTime,\n    sortOrder = 'descending',\n    groupBy = 'date',\n    loading,\n    loadMore,\n    ...restProps\n  }: PropsWithoutRef<TimelineProps>,\n  ref: TimelineProps['ref']\n) {\n  const [sortedData, setSortedData] = useState(() => sortByDate(activity, sortOrder));\n\n  const listRef = useConsolidatedRef(ref);\n  useItemIntersection(\n    listRef,\n    activity.length - 1,\n    () => {\n      if (!loading) loadMore?.();\n    },\n    `:scope li > div`\n  );\n\n  useEffect(() => {\n    setSortedData(sortByDate(activity, sortOrder));\n  }, [activity, sortOrder]);\n\n  return (\n    <Grid\n      {...restProps}\n      container={{\n        cols: 'auto 1fr',\n        colGap: 0.75,\n        alignItems: 'start'\n      }}\n      sm={{ container: { cols: 'auto auto  1fr', colGap: 0.25 } }}\n      as={StyledTimeline}\n      ref={listRef}\n    >\n      {groupBy === 'none'\n        ? sortedData.map((item, index) => (\n            <TimelineItem\n              key={item.id}\n              item={item}\n              timeFormat='datetime'\n              prevItemDate={sortedData[index - 1]?.date}\n              nextItemDate={sortedData[index + 1]?.date}\n              currentTime={currentTime}\n            />\n          ))\n        : groupByActivity(sortedData, groupBy).map(groupedData => (\n            <Grid item={{ colStartEnd: '1/-1' }} as='li' key={groupedData[0].id}>\n              <DateTimeDisplay\n                as={StyledDate}\n                variant={groupBy}\n                format='long'\n                value={groupedData[0].date}\n              />\n              <ol>\n                {groupedData.map((item, index) => (\n                  <TimelineItem\n                    key={item.id}\n                    item={item}\n                    timeFormat={groupBy === 'date' ? 'time' : 'datetime'}\n                    prevItemDate={groupedData[index - 1]?.date}\n                    nextItemDate={groupedData[index + 1]?.date}\n                    currentTime={currentTime}\n                  />\n                ))}\n              </ol>\n            </Grid>\n          ))}\n      {loading && (\n        <li>\n          <StyledLoadingCell>\n            <Progress placement='local' />\n          </StyledLoadingCell>\n        </li>\n      )}\n    </Grid>\n  );\n});\n\nexport default Timeline;\n"]}

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

@@ -12,11 +12,10 @@ interface StyledBulletWrapperProps {
     isNextFuture: boolean;
     hasIcon: boolean;
 }
-export declare const StyledBulletWrapper: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, StyledBulletWrapperProps, never>;
-export declare const StyledDate: 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 StyledTimelineTable: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledTimeWrapper: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBulletWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, StyledBulletWrapperProps, never>;
+export declare const StyledDate: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTimeline: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTime: 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 StyledLoadingCell: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledLoadingCell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};
 //# sourceMappingURL=Timeline.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,UAAU,mOASrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,0OAU5B,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA+B,OAAO;SAOnE,CAAC;AAIH,eAAO,MAAM,gBAAgB,gQAM5B,CAAC;AAIF,eAAO,MAAM,kBAAkB,mOAU7B,CAAC;AAIH,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,8HA6D/B,CAAC;AAIF,eAAO,MAAM,UAAU,8OAetB,CAAC;AAIF,eAAO,MAAM,mBAAmB,2GAkC9B,CAAC;AAIH,eAAO,MAAM,iBAAiB,wGAQ5B,CAAC;AAIH,eAAO,MAAM,UAAU,8OAKrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,wGAO7B,CAAC"}
+{"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,UAAU,mOASrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,0OAS5B,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA+B,OAAO;SAMnE,CAAC;AAIH,eAAO,MAAM,gBAAgB,gQAG5B,CAAC;AAIF,eAAO,MAAM,kBAAkB,mOAU7B,CAAC;AAIH,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,gIA8D/B,CAAC;AAIF,eAAO,MAAM,UAAU,wGAetB,CAAC;AAIF,eAAO,MAAM,cAAc,wGAiBzB,CAAC;AAIH,eAAO,MAAM,UAAU,8OAUrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAQ7B,CAAC"}

package/lib/components/Timeline/Timeline.styles.js

@@ -2,8 +2,8 @@ import styled, { css } from 'styled-components';
 import { Button, calculateFontSize, Card, CardContent, DateTimeDisplay, defaultThemeProp, Flex, Grid, StyledBackdrop, StyledIcon, useDirection } from '@pega/cosmos-react-core';
 export const StyledCard = styled(Card)(({ theme }) => {
     return css `
-    border-top: 0.0625rem solid ${theme.base.colors.slate.light};
-    padding: ${theme.base.spacing} 0;
+    border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};
+    padding-block: ${theme.base.spacing};
     &:not(& &) {
       border-radius: 0;
       background-color: transparent;
@@ -14,8 +14,7 @@ StyledCard.defaultProps = defaultThemeProp;
 export const StyledCardContent = styled(CardContent)(({ theme }) => {
     return css `
     &:not(${StyledCard} ${StyledCard} > &) {
-      padding: ${theme.base.spacing} 0;
-      padding-inline-start: ${theme.base['hit-area']['mouse-min']};
+      padding: ${theme.base.spacing} 0 ${theme.base.spacing} ${theme.base['hit-area']['mouse-min']};
       @media (pointer: coarse) {
         padding-inline-start: ${theme.base['hit-area']['finger-min']};
       }
@@ -28,16 +27,12 @@ export const StyledToggleButton = styled(Button)(({ theme, collapsed }) => {
     transition: transform calc(2 * ${theme.base.animation.speed})
       ${theme.base.animation.timing.ease};
     transform: ${collapsed ? 'rotate(-90deg)' : 'rotate(0)'};
-    color: ${theme.components.button.color};
   `;
 });
 StyledToggleButton.defaultProps = defaultThemeProp;
 export const StyledCardHeader = styled(Grid) `
   padding: 0;
   min-height: 2rem;
-  ${StyledToggleButton} {
-    align-self: start;
-  }
 `;
 StyledCardHeader.defaultProps = defaultThemeProp;
 export const StyledTimelineIcon = styled(Flex)(({ theme }) => {
@@ -52,12 +47,13 @@ export const StyledTimelineIcon = styled(Flex)(({ theme }) => {
   `;
 });
 StyledTimelineIcon.defaultProps = defaultThemeProp;
-export const StyledBulletWrapper = styled.td(({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {
+export const StyledBulletWrapper = styled.span(({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {
     const { rtl } = useDirection();
     return css `
+      height: 100%;
       position: relative;
       text-align: center;
-      padding-top: calc(2.25 * ${theme.base.spacing} + 0.0625rem);
+      padding-block-start: calc(2.25 * ${theme.base.spacing} + 0.0625rem);
       min-width: 2rem;
 
       ${hasPrev &&
@@ -66,7 +62,7 @@ export const StyledBulletWrapper = styled.td(({ theme, hasPrev, hasNext, isPrevF
           content: '';
           display: block;
           position: absolute;
-          top: 0;
+          inset-block-start: 0;
           inset-inline-start: 50%;
           transform: translateX(${rtl ? '50%' : '-50%'});
           width: 0.0625rem;
@@ -82,7 +78,7 @@ export const StyledBulletWrapper = styled.td(({ theme, hasPrev, hasNext, isPrevF
           content: '';
           display: block;
           position: absolute;
-          top: calc(2.25 * ${theme.base.spacing} + 0.75rem);
+          inset-block-start: calc(2.25 * ${theme.base.spacing} + 0.75rem);
           inset-inline-start: 50%;
           transform: translateX(${rtl ? '50%' : '-50%'});
           width: 0.0625rem;
@@ -101,82 +97,61 @@ export const StyledBulletWrapper = styled.td(({ theme, hasPrev, hasNext, isPrevF
       }
 
       @media (min-width: ${theme.base.breakpoints.sm}) {
-        padding-top: calc(${theme.base.spacing} + 0.0625rem);
+        padding-block-start: calc(${theme.base.spacing} + 0.0625rem);
         &::before {
           height: calc(${theme.base.spacing} + 0.75rem);
         }
         &::after {
-          top: calc(${theme.base.spacing} + 0.75rem);
+          inset-block-start: calc(${theme.base.spacing} + 0.75rem);
           height: calc(100% - ${theme.base.spacing} - 0.75rem);
         }
       }
     `;
 });
 StyledBulletWrapper.defaultProps = defaultThemeProp;
-export const StyledDate = styled(DateTimeDisplay)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }, components: { text } } }) => {
+export const StyledDate = styled.h2(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }, components: { text } } }) => {
     const fontSizes = calculateFontSize(fontSize, fontScale);
     return css `
-      display: block;
+      grid-column: 1 / -1;
       padding-block: calc(3 * ${spacing}) calc(1.25 * ${spacing});
       font-size: ${fontSizes[text.h2['font-size']]};
       font-weight: ${text.h2['font-weight']};
     `;
 });
 StyledDate.defaultProps = defaultThemeProp;
-export const StyledTimelineTable = styled.table(({ theme }) => {
+export const StyledTimeline = styled.ol(({ theme }) => {
     return css `
-    tr {
-      &:first-child ${StyledDate} {
-        padding-block-start: 0;
-      }
-      td {
-        border-inline-start: ${theme.base.spacing} solid transparent;
-        border-inline-end: ${theme.base.spacing} solid transparent;
-        vertical-align: top;
-      }
-      td:first-child {
-        border-inline-start: none;
-      }
+    ol,
+    li {
+      display: contents;
+    }
 
-      td:last-child {
-        border-inline-end: none;
-      }
+    li:first-child ${StyledDate} {
+      padding-block-start: 0;
     }
-    border-collapse: collapse;
-    width: 100%;
+
     @media (min-width: ${theme.base.breakpoints.sm}) {
-      column-gap: ${theme.base.spacing};
-      tr {
-        td {
-          border-inline-start: calc(0.5 * ${theme.base.spacing}) solid transparent;
-          border-inline-end: calc(0.5 * ${theme.base.spacing}) solid transparent;
-        }
-      }
       ${StyledCard} {
-        padding: calc(0.5 * ${theme.base.spacing}) 0;
+        padding-block: calc(0.5 * ${theme.base.spacing});
       }
     }
   `;
 });
-StyledTimelineTable.defaultProps = defaultThemeProp;
-export const StyledTimeWrapper = styled.td(({ theme }) => {
+StyledTimeline.defaultProps = defaultThemeProp;
+export const StyledTime = styled(DateTimeDisplay)(({ theme }) => {
     return css `
+    opacity: ${theme.base.transparency['transparent-2']};
+    white-space: nowrap;
     @media (min-width: ${theme.base.breakpoints.sm}) {
       text-align: end;
       line-height: ${theme.base['hit-area']['mouse-min']};
-      padding-top: calc(0.5 * ${theme.base.spacing} + 0.0625rem);
+      padding-block-start: calc(0.5 * ${theme.base.spacing} + 0.0625rem);
     }
   `;
 });
-StyledTimeWrapper.defaultProps = defaultThemeProp;
-export const StyledTime = styled(DateTimeDisplay)(({ theme }) => {
-    return css `
-    opacity: ${theme.base.transparency['transparent-2']};
-    white-space: nowrap;
-  `;
-});
 StyledTime.defaultProps = defaultThemeProp;
-export const StyledLoadingCell = styled.td `
+export const StyledLoadingCell = styled.div `
+  grid-column: 1 / -1;
   position: relative;
   height: 2.8rem;
 

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

@@ -1 +1 @@
-{"version":3,"file":"Timeline.styles.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  calculateFontSize,\n  Card,\n  CardContent,\n  DateTimeDisplay,\n  defaultThemeProp,\n  Flex,\n  FontSize,\n  Grid,\n  StyledBackdrop,\n  StyledIcon,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n  return css`\n    border-top: 0.0625rem solid ${theme.base.colors.slate.light};\n    padding: ${theme.base.spacing} 0;\n    &:not(& &) {\n      border-radius: 0;\n      background-color: transparent;\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled(CardContent)(({ theme }) => {\n  return css`\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding: ${theme.base.spacing} 0;\n      padding-inline-start: ${theme.base['hit-area']['mouse-min']};\n      @media (pointer: coarse) {\n        padding-inline-start: ${theme.base['hit-area']['finger-min']};\n      }\n    }\n  `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledToggleButton = styled(Button)<{ collapsed: boolean }>(({ theme, collapsed }) => {\n  return css`\n    transition: transform calc(2 * ${theme.base.animation.speed})\n      ${theme.base.animation.timing.ease};\n    transform: ${collapsed ? 'rotate(-90deg)' : 'rotate(0)'};\n    color: ${theme.components.button.color};\n  `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled(Grid)`\n  padding: 0;\n  min-height: 2rem;\n  ${StyledToggleButton} {\n    align-self: start;\n  }\n`;\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineIcon = styled(Flex)(({ theme }) => {\n  return css`\n    border-radius: 50%;\n    color: ${theme.base.palette.light};\n    background: ${theme.base.palette.info};\n    & > ${StyledIcon} {\n      height: 1em;\n      width: 1em;\n    }\n  `;\n});\n\nStyledTimelineIcon.defaultProps = defaultThemeProp;\n\ninterface StyledBulletWrapperProps {\n  hasPrev: boolean;\n  hasNext: boolean;\n  isPrevFuture: boolean;\n  isNextFuture: boolean;\n  hasIcon: boolean;\n}\n\nexport const StyledBulletWrapper = styled.td<StyledBulletWrapperProps>(\n  ({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {\n    const { rtl } = useDirection();\n    return css`\n      position: relative;\n      text-align: center;\n      padding-top: calc(2.25 * ${theme.base.spacing} + 0.0625rem);\n      min-width: 2rem;\n\n      ${hasPrev &&\n      css`\n        &::before {\n          content: '';\n          display: block;\n          position: absolute;\n          top: 0;\n          inset-inline-start: 50%;\n          transform: translateX(${rtl ? '50%' : '-50%'});\n          width: 0.0625rem;\n          height: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n          border-inline-start: 0.0625rem ${isPrevFuture ? 'dashed' : 'solid'}\n            ${theme.base.palette.info};\n        }\n      `}\n\n      ${hasNext &&\n      css`\n        &::after {\n          content: '';\n          display: block;\n          position: absolute;\n          top: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n          inset-inline-start: 50%;\n          transform: translateX(${rtl ? '50%' : '-50%'});\n          width: 0.0625rem;\n          height: calc(100% - 2.25 * ${theme.base.spacing} - 0.75rem);\n          border-inline-start: 0.0625rem ${isNextFuture ? 'dashed' : 'solid'}\n            ${theme.base.palette.info};\n        }\n      `}\n\n      & > ${StyledTimelineIcon} {\n        position: relative;\n        margin: 0;\n        z-index: 1;\n        width: ${hasIcon ? '1.5rem' : '0.5rem'};\n        height: ${hasIcon ? '1.5rem' : '0.5rem'};\n      }\n\n      @media (min-width: ${theme.base.breakpoints.sm}) {\n        padding-top: calc(${theme.base.spacing} + 0.0625rem);\n        &::before {\n          height: calc(${theme.base.spacing} + 0.75rem);\n        }\n        &::after {\n          top: calc(${theme.base.spacing} + 0.75rem);\n          height: calc(100% - ${theme.base.spacing} - 0.75rem);\n        }\n      }\n    `;\n  }\n);\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDate = styled(DateTimeDisplay)(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n    return css`\n      display: block;\n      padding-block: calc(3 * ${spacing}) calc(1.25 * ${spacing});\n      font-size: ${fontSizes[text.h2['font-size'] as FontSize]};\n      font-weight: ${text.h2['font-weight']};\n    `;\n  }\n);\n\nStyledDate.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineTable = styled.table(({ theme }) => {\n  return css`\n    tr {\n      &:first-child ${StyledDate} {\n        padding-block-start: 0;\n      }\n      td {\n        border-inline-start: ${theme.base.spacing} solid transparent;\n        border-inline-end: ${theme.base.spacing} solid transparent;\n        vertical-align: top;\n      }\n      td:first-child {\n        border-inline-start: none;\n      }\n\n      td:last-child {\n        border-inline-end: none;\n      }\n    }\n    border-collapse: collapse;\n    width: 100%;\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      column-gap: ${theme.base.spacing};\n      tr {\n        td {\n          border-inline-start: calc(0.5 * ${theme.base.spacing}) solid transparent;\n          border-inline-end: calc(0.5 * ${theme.base.spacing}) solid transparent;\n        }\n      }\n      ${StyledCard} {\n        padding: calc(0.5 * ${theme.base.spacing}) 0;\n      }\n    }\n  `;\n});\n\nStyledTimelineTable.defaultProps = defaultThemeProp;\n\nexport const StyledTimeWrapper = styled.td(({ theme }) => {\n  return css`\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      text-align: end;\n      line-height: ${theme.base['hit-area']['mouse-min']};\n      padding-top: calc(0.5 * ${theme.base.spacing} + 0.0625rem);\n    }\n  `;\n});\n\nStyledTimeWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTime = styled(DateTimeDisplay)(({ theme }) => {\n  return css`\n    opacity: ${theme.base.transparency['transparent-2']};\n    white-space: nowrap;\n  `;\n});\n\nStyledTime.defaultProps = defaultThemeProp;\n\nexport const StyledLoadingCell = styled.td`\n  position: relative;\n  height: 2.8rem;\n\n  ${StyledBackdrop} {\n    background: transparent;\n  }\n`;\n"]}
+{"version":3,"file":"Timeline.styles.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  calculateFontSize,\n  Card,\n  CardContent,\n  DateTimeDisplay,\n  defaultThemeProp,\n  Flex,\n  FontSize,\n  Grid,\n  StyledBackdrop,\n  StyledIcon,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n  return css`\n    border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding-block: ${theme.base.spacing};\n    &:not(& &) {\n      border-radius: 0;\n      background-color: transparent;\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled(CardContent)(({ theme }) => {\n  return css`\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding: ${theme.base.spacing} 0 ${theme.base.spacing} ${theme.base['hit-area']['mouse-min']};\n      @media (pointer: coarse) {\n        padding-inline-start: ${theme.base['hit-area']['finger-min']};\n      }\n    }\n  `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledToggleButton = styled(Button)<{ collapsed: boolean }>(({ theme, collapsed }) => {\n  return css`\n    transition: transform calc(2 * ${theme.base.animation.speed})\n      ${theme.base.animation.timing.ease};\n    transform: ${collapsed ? 'rotate(-90deg)' : 'rotate(0)'};\n  `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled(Grid)`\n  padding: 0;\n  min-height: 2rem;\n`;\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineIcon = styled(Flex)(({ theme }) => {\n  return css`\n    border-radius: 50%;\n    color: ${theme.base.palette.light};\n    background: ${theme.base.palette.info};\n    & > ${StyledIcon} {\n      height: 1em;\n      width: 1em;\n    }\n  `;\n});\n\nStyledTimelineIcon.defaultProps = defaultThemeProp;\n\ninterface StyledBulletWrapperProps {\n  hasPrev: boolean;\n  hasNext: boolean;\n  isPrevFuture: boolean;\n  isNextFuture: boolean;\n  hasIcon: boolean;\n}\n\nexport const StyledBulletWrapper = styled.span<StyledBulletWrapperProps>(\n  ({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {\n    const { rtl } = useDirection();\n    return css`\n      height: 100%;\n      position: relative;\n      text-align: center;\n      padding-block-start: calc(2.25 * ${theme.base.spacing} + 0.0625rem);\n      min-width: 2rem;\n\n      ${hasPrev &&\n      css`\n        &::before {\n          content: '';\n          display: block;\n          position: absolute;\n          inset-block-start: 0;\n          inset-inline-start: 50%;\n          transform: translateX(${rtl ? '50%' : '-50%'});\n          width: 0.0625rem;\n          height: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n          border-inline-start: 0.0625rem ${isPrevFuture ? 'dashed' : 'solid'}\n            ${theme.base.palette.info};\n        }\n      `}\n\n      ${hasNext &&\n      css`\n        &::after {\n          content: '';\n          display: block;\n          position: absolute;\n          inset-block-start: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n          inset-inline-start: 50%;\n          transform: translateX(${rtl ? '50%' : '-50%'});\n          width: 0.0625rem;\n          height: calc(100% - 2.25 * ${theme.base.spacing} - 0.75rem);\n          border-inline-start: 0.0625rem ${isNextFuture ? 'dashed' : 'solid'}\n            ${theme.base.palette.info};\n        }\n      `}\n\n      & > ${StyledTimelineIcon} {\n        position: relative;\n        margin: 0;\n        z-index: 1;\n        width: ${hasIcon ? '1.5rem' : '0.5rem'};\n        height: ${hasIcon ? '1.5rem' : '0.5rem'};\n      }\n\n      @media (min-width: ${theme.base.breakpoints.sm}) {\n        padding-block-start: calc(${theme.base.spacing} + 0.0625rem);\n        &::before {\n          height: calc(${theme.base.spacing} + 0.75rem);\n        }\n        &::after {\n          inset-block-start: calc(${theme.base.spacing} + 0.75rem);\n          height: calc(100% - ${theme.base.spacing} - 0.75rem);\n        }\n      }\n    `;\n  }\n);\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDate = styled.h2(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n    return css`\n      grid-column: 1 / -1;\n      padding-block: calc(3 * ${spacing}) calc(1.25 * ${spacing});\n      font-size: ${fontSizes[text.h2['font-size'] as FontSize]};\n      font-weight: ${text.h2['font-weight']};\n    `;\n  }\n);\n\nStyledDate.defaultProps = defaultThemeProp;\n\nexport const StyledTimeline = styled.ol(({ theme }) => {\n  return css`\n    ol,\n    li {\n      display: contents;\n    }\n\n    li:first-child ${StyledDate} {\n      padding-block-start: 0;\n    }\n\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      ${StyledCard} {\n        padding-block: calc(0.5 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledTimeline.defaultProps = defaultThemeProp;\n\nexport const StyledTime = styled(DateTimeDisplay)(({ theme }) => {\n  return css`\n    opacity: ${theme.base.transparency['transparent-2']};\n    white-space: nowrap;\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      text-align: end;\n      line-height: ${theme.base['hit-area']['mouse-min']};\n      padding-block-start: calc(0.5 * ${theme.base.spacing} + 0.0625rem);\n    }\n  `;\n});\n\nStyledTime.defaultProps = defaultThemeProp;\n\nexport const StyledLoadingCell = styled.div`\n  grid-column: 1 / -1;\n  position: relative;\n  height: 2.8rem;\n\n  ${StyledBackdrop} {\n    background: transparent;\n  }\n`;\n"]}

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

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode, Ref } from 'react';
+import { MouseEvent, ReactElement, ReactNode, Ref } from 'react';
 import { BaseProps, FieldValueListProps, IconProps, ListToolbarProps, NoChildrenProp, OmitStrict, StatusProps } from '@pega/cosmos-react-core';
 import { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types';
 import { AcceptedMouseEventElement } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
@@ -14,10 +14,10 @@ export interface ActivityObject {
     /** Represents the current status of activity */
     status?: StatusProps;
     /** The set of field values to render in the list. */
-    content?: FieldValueListProps['fields'] | ReactNode;
+    content?: FieldValueListProps['fields'] | ReactElement;
 }
-export declare type TimelineSortOrder = 'ascending' | 'descending';
-export declare type TimelineGroupBy = Extract<DateTimeVariant, 'date' | 'monthyear' | 'quarteryear' | 'year'> | 'none';
+export type TimelineSortOrder = 'ascending' | 'descending';
+export type TimelineGroupBy = Extract<DateTimeVariant, 'date' | 'monthyear' | 'quarteryear' | 'year'> | 'none';
 export default interface TimelineProps extends BaseProps, NoChildrenProp {
     /** List of activity */
     activity: ActivityObject[];
@@ -25,12 +25,12 @@ export default interface TimelineProps extends BaseProps, NoChildrenProp {
     currentTime: Date;
     /**
      * List of activity sorted in ascending or descending order.
-     * @default "descending"
+     * @default 'descending'
      */
     sortOrder?: TimelineSortOrder;
     /**
      * List of activity grouped by day, month, quarter or year.
-     * @default "date"
+     * @default 'date'
      */
     groupBy?: TimelineGroupBy;
     /**
@@ -49,7 +49,7 @@ export interface TimelineToolbarProps extends OmitStrict<ListToolbarProps, 'sort
         onItemClick: (id: TimelineSortOrder, e: MouseEvent<AcceptedMouseEventElement>) => void;
         /**
          * Currently selected sort order.
-         * @default "descending"
+         * @default 'descending'
          */
         selected: TimelineProps['sortOrder'];
     };
@@ -58,7 +58,7 @@ export interface TimelineToolbarProps extends OmitStrict<ListToolbarProps, 'sort
         onItemClick: (id: TimelineGroupBy, e: MouseEvent<AcceptedMouseEventElement>) => void;
         /**
          * Currently selected sort order.
-         * @default "date"
+         * @default 'date'
          */
         selected: TimelineProps['groupBy'];
     };

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

@@ -1 +1 @@
-{"version":3,"file":"Timeline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EACL,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,gEAAgE,CAAC;AACjG,OAAO,EAAE,yBAAyB,EAAE,MAAM,wDAAwD,CAAC;AAEnG,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,kDAAkD;IAClD,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,gDAAgD;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;CACrD;AAED,oBAAY,iBAAiB,GAAG,WAAW,GAAG,YAAY,CAAC;AAC3D,oBAAY,eAAe,GACvB,OAAO,CAAC,eAAe,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC,GACvE,MAAM,CAAC;AAEX,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IACtE,uBAAuB;IACvB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,2BAA2B;IAC3B,WAAW,EAAE,IAAI,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAqB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1F,IAAI,CAAC,EAAE;QACL,iDAAiD;QACjD,WAAW,EAAE,CAAC,EAAE,EAAE,iBAAiB,EAAE,CAAC,EAAE,UAAU,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;QACvF;;;WAGG;QACH,QAAQ,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;KACtC,CAAC;IACF,KAAK,CAAC,EAAE;QACN,iDAAiD;QACjD,WAAW,EAAE,CAAC,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,UAAU,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;QACrF;;;WAGG;QACH,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH"}
+{"version":3,"file":"Timeline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EACL,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,gEAAgE,CAAC;AACjG,OAAO,EAAE,yBAAyB,EAAE,MAAM,wDAAwD,CAAC;AAEnG,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,kDAAkD;IAClD,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,gDAAgD;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC;CACxD;AAED,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,YAAY,CAAC;AAC3D,MAAM,MAAM,eAAe,GACvB,OAAO,CAAC,eAAe,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC,GACvE,MAAM,CAAC;AAEX,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IACtE,uBAAuB;IACvB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,2BAA2B;IAC3B,WAAW,EAAE,IAAI,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAqB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1F,IAAI,CAAC,EAAE;QACL,iDAAiD;QACjD,WAAW,EAAE,CAAC,EAAE,EAAE,iBAAiB,EAAE,CAAC,EAAE,UAAU,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;QACvF;;;WAGG;QACH,QAAQ,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;KACtC,CAAC;IACF,KAAK,CAAC,EAAE;QACN,iDAAiD;QACjD,WAAW,EAAE,CAAC,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,UAAU,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;QACrF;;;WAGG;QACH,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH"}