@pega/cosmos-react-work 7.0.0-build.26.2 → 7.0.0-build.26.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Timeline/Timeline.d.ts.map +1 -1
- package/lib/components/Timeline/Timeline.js +2 -2
- package/lib/components/Timeline/Timeline.js.map +1 -1
- package/lib/components/Timeline/Timeline.styles.d.ts +2 -0
- package/lib/components/Timeline/Timeline.styles.d.ts.map +1 -1
- package/lib/components/Timeline/Timeline.styles.js +12 -9
- package/lib/components/Timeline/Timeline.styles.js.map +1 -1
- package/lib/components/Timeline/TimelineItem.d.ts.map +1 -1
- package/lib/components/Timeline/TimelineItem.js +2 -2
- package/lib/components/Timeline/TimelineItem.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAShE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAShE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAUlD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA+E5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { Progress, useConsolidatedRef, useItemIntersection, DateTimeDisplay, Grid } from '@pega/cosmos-react-core';
|
|
4
4
|
import { groupByActivity } from './utils';
|
|
5
|
-
import { StyledDate, StyledTimeline, StyledLoadingCell } from './Timeline.styles';
|
|
5
|
+
import { StyledDate, StyledTimeline, StyledLoadingCell, StyledTimelineListItem, StyledTimelineList } from './Timeline.styles';
|
|
6
6
|
import TimelineItem from './TimelineItem';
|
|
7
7
|
const Timeline = forwardRef(function Timeline({ activity, currentTime, groupBy = 'date', loading, loadMore, ...restProps }, ref) {
|
|
8
8
|
const listRef = useConsolidatedRef(ref);
|
|
@@ -16,7 +16,7 @@ const Timeline = forwardRef(function Timeline({ activity, currentTime, groupBy =
|
|
|
16
16
|
alignItems: 'start'
|
|
17
17
|
}, sm: { container: { cols: 'auto auto 1fr', colGap: 0.25 } }, as: StyledTimeline, ref: listRef, children: [groupBy === 'none'
|
|
18
18
|
? activity.map((item, index) => (_jsx(TimelineItem, { item: item, timeFormat: 'datetime', prevItemDate: activity[index - 1]?.date, nextItemDate: activity[index + 1]?.date, currentTime: currentTime }, item.id)))
|
|
19
|
-
: groupByActivity(activity, groupBy).map(groupedData => (_jsxs(Grid, { item: { colStartEnd: '1/-1' }, as:
|
|
19
|
+
: groupByActivity(activity, groupBy).map(groupedData => (_jsxs(Grid, { item: { colStartEnd: '1/-1' }, as: StyledTimelineListItem, children: [_jsx(DateTimeDisplay, { as: StyledDate, variant: groupBy, format: 'long', value: groupedData[0].date }), _jsx(StyledTimelineList, { 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(StyledTimelineListItem, { children: _jsx(StyledLoadingCell, { children: _jsx(Progress, { placement: 'local' }) }) }))] }));
|
|
20
20
|
});
|
|
21
21
|
export default Timeline;
|
|
22
22
|
//# sourceMappingURL=Timeline.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EACL,QAAQ,EACR,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,IAAI,EACL,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,
|
|
1
|
+
{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef } from 'react';\n\nimport {\n Progress,\n useConsolidatedRef,\n useItemIntersection,\n DateTimeDisplay,\n Grid\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\n\nimport { groupByActivity } from './utils';\nimport type TimelineProps from './Timeline.types';\nimport {\n StyledDate,\n StyledTimeline,\n StyledLoadingCell,\n StyledTimelineListItem,\n StyledTimelineList\n} from './Timeline.styles';\nimport TimelineItem from './TimelineItem';\n\nconst Timeline: FunctionComponent<TimelineProps & ForwardProps> = forwardRef(function Timeline(\n {\n activity,\n currentTime,\n groupBy = 'date',\n loading,\n loadMore,\n ...restProps\n }: PropsWithoutRef<TimelineProps>,\n ref: TimelineProps['ref']\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 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 ? activity.map((item, index) => (\n <TimelineItem\n key={item.id}\n item={item}\n timeFormat='datetime'\n prevItemDate={activity[index - 1]?.date}\n nextItemDate={activity[index + 1]?.date}\n currentTime={currentTime}\n />\n ))\n : groupByActivity(activity, groupBy).map(groupedData => (\n <Grid\n item={{ colStartEnd: '1/-1' }}\n as={StyledTimelineListItem}\n key={groupedData[0].id}\n >\n <DateTimeDisplay\n as={StyledDate}\n variant={groupBy}\n format='long'\n value={groupedData[0].date}\n />\n <StyledTimelineList>\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 </StyledTimelineList>\n </Grid>\n ))}\n {loading && (\n <StyledTimelineListItem>\n <StyledLoadingCell>\n <Progress placement='local' />\n </StyledLoadingCell>\n </StyledTimelineListItem>\n )}\n </Grid>\n );\n});\n\nexport default Timeline;\n"]}
|
|
@@ -16,6 +16,8 @@ interface StyledBulletWrapperProps {
|
|
|
16
16
|
}
|
|
17
17
|
export declare const StyledBulletWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, StyledBulletWrapperProps, never>;
|
|
18
18
|
export declare const StyledDate: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, {}, never>;
|
|
19
|
+
export declare const StyledTimelineList: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
|
|
20
|
+
export declare const StyledTimelineListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
|
|
19
21
|
export declare const StyledTimeline: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
|
|
20
22
|
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>;
|
|
21
23
|
export declare const StyledLoadingCell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":";AAkBA,eAAO,MAAM,UAAU,mOASrB,CAAC;AAIH,eAAO,MAAM,WAAW,0GAMvB,CAAC;AAIF,eAAO,MAAM,iBAAiB,0OAS5B,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA+B,OAAO;SASnE,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,
|
|
1
|
+
{"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":";AAkBA,eAAO,MAAM,UAAU,mOASrB,CAAC;AAIH,eAAO,MAAM,WAAW,0GAMvB,CAAC;AAIF,eAAO,MAAM,iBAAiB,0OAS5B,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA+B,OAAO;SASnE,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,kBAAkB,wGAE9B,CAAC;AAIF,eAAO,MAAM,sBAAsB,wGAMlC,CAAC;AAIF,eAAO,MAAM,cAAc,wGAQzB,CAAC;AAIH,eAAO,MAAM,UAAU,8OAUrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAQ7B,CAAC"}
|
|
@@ -131,17 +131,20 @@ export const StyledDate = styled.h2(({ theme: { base: { 'font-size': fontSize, '
|
|
|
131
131
|
`;
|
|
132
132
|
});
|
|
133
133
|
StyledDate.defaultProps = defaultThemeProp;
|
|
134
|
+
export const StyledTimelineList = styled.ol `
|
|
135
|
+
display: contents;
|
|
136
|
+
`;
|
|
137
|
+
StyledTimelineList.defaultProps = defaultThemeProp;
|
|
138
|
+
export const StyledTimelineListItem = styled.li `
|
|
139
|
+
display: contents;
|
|
140
|
+
|
|
141
|
+
&:first-child ${StyledDate} {
|
|
142
|
+
padding-block-start: 0;
|
|
143
|
+
}
|
|
144
|
+
`;
|
|
145
|
+
StyledTimelineListItem.defaultProps = defaultThemeProp;
|
|
134
146
|
export const StyledTimeline = styled.ol(({ theme }) => {
|
|
135
147
|
return css `
|
|
136
|
-
ol,
|
|
137
|
-
li {
|
|
138
|
-
display: contents;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
li:first-child ${StyledDate} {
|
|
142
|
-
padding-block-start: 0;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
148
|
@media (min-width: ${theme.base.breakpoints.sm}) {
|
|
146
149
|
${StyledCard} {
|
|
147
150
|
padding-block: calc(0.5 * ${theme.base.spacing});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.styles.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,iBAAiB,EACjB,IAAI,EACJ,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,cAAc,EACd,UAAU,EACV,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAE5E,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;0CAC8B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;qBACtD,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAKpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAA;;IAElC,eAAe;;;;CAIlB,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;YACA,UAAU,IAAI,UAAU;iBACnB,KAAK,CAAC,IAAI,CAAC,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;gCAElE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;GAGjE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IAChG,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;MACN,UAAU;uCACuB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;UACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;mBACvB,SAAS,CAAC,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,WAAW;;GAE/E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAG3C,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,OAAO,GAAG,CAAA;;aAEC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;kBACnB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI;UAC/B,UAAU;;;;GAIjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAUnD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAC5C,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,EAAE;IACnE,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;;;;yCAI2B,KAAK,CAAC,IAAI,CAAC,OAAO;;;QAGnD,OAAO;QACT,GAAG,CAAA;;;;;;;kCAOyB,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;;gCAEtB,KAAK,CAAC,IAAI,CAAC,OAAO;2CACP,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;cAC9D,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI;;OAE9B;;QAEC,OAAO;QACT,GAAG,CAAA;;;;;2CAKkC,KAAK,CAAC,IAAI,CAAC,OAAO;;kCAE3B,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;;uCAEf,KAAK,CAAC,IAAI,CAAC,OAAO;2CACd,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;cAC9D,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI;;OAE9B;;YAEK,kBAAkB;;;;iBAIb,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;kBAC5B,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;;;2BAGpB,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;oCAChB,KAAK,CAAC,IAAI,CAAC,OAAO;;yBAE7B,KAAK,CAAC,IAAI,CAAC,OAAO;;;oCAGP,KAAK,CAAC,IAAI,CAAC,OAAO;gCACtB,KAAK,CAAC,IAAI,CAAC,OAAO;;;KAG7C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CACjC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,EACjE,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IACzD,OAAO,GAAG,CAAA;;gCAEkB,OAAO,iBAAiB,OAAO;mBAC5C,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBACzC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;KACtC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;;;;;qBAMS,UAAU;;;;yBAIN,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;QAC1C,UAAU;oCACkB,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;;yBAE9B,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;qBAE7B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;wCAChB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;IAKvC,cAAc;;;CAGjB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Button,\n calculateFontSize,\n Card,\n CardContent,\n DateTimeDisplay,\n defaultThemeProp,\n Flex,\n Grid,\n StyledBackdrop,\n StyledIcon,\n useDirection\n} from '@pega/cosmos-react-core';\nimport type { FontSize } from '@pega/cosmos-react-core';\nimport { elipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\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 StyledTitle = styled.span`\n display: block;\n ${elipsisOverflow}\n && * {\n display: inline;\n }\n`;\n\nStyledTitle.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 const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${collapsed ? `rotate(${rtl ? '90deg' : '-90deg'})` : 'rotate(0)'};\n }\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"]}
|
|
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 Grid,\n StyledBackdrop,\n StyledIcon,\n useDirection\n} from '@pega/cosmos-react-core';\nimport type { FontSize } from '@pega/cosmos-react-core';\nimport { elipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\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 StyledTitle = styled.span`\n display: block;\n ${elipsisOverflow}\n && * {\n display: inline;\n }\n`;\n\nStyledTitle.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 const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${collapsed ? `rotate(${rtl ? '90deg' : '-90deg'})` : 'rotate(0)'};\n }\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 StyledTimelineList = styled.ol`\n display: contents;\n`;\n\nStyledTimelineList.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineListItem = styled.li`\n display: contents;\n\n &:first-child ${StyledDate} {\n padding-block-start: 0;\n }\n`;\n\nStyledTimelineListItem.defaultProps = defaultThemeProp;\n\nexport const StyledTimeline = styled.ol(({ theme }) => {\n return css`\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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAU/C,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAElF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAU/C,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAElF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAcvD,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,UAAU,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC5C,YAAY,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,YAAY,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,IAAI,CAAC;CACnB;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAgHrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { isValidElement, useCallback, useRef, useState } from 'react';
|
|
3
3
|
import { ExpandCollapse, Grid, Icon, Status, useBreakpoint, FieldValueItem } from '@pega/cosmos-react-core';
|
|
4
|
-
import { StyledCard, StyledCardHeader, StyledTimelineIcon, StyledCardContent, StyledBulletWrapper, StyledToggleButton, StyledTime, StyledTitle } from './Timeline.styles';
|
|
4
|
+
import { StyledCard, StyledCardHeader, StyledTimelineIcon, StyledCardContent, StyledBulletWrapper, StyledToggleButton, StyledTime, StyledTitle, StyledTimelineListItem } from './Timeline.styles';
|
|
5
5
|
import { isFutureDate } from './utils';
|
|
6
6
|
const TimelineItem = ({ item: { date, title, icon, status, content }, timeFormat, prevItemDate, nextItemDate, currentTime }) => {
|
|
7
7
|
const [collapsed, setCollapsed] = useState(true);
|
|
@@ -11,7 +11,7 @@ const TimelineItem = ({ item: { date, title, icon, status, content }, timeFormat
|
|
|
11
11
|
const isSMContentWidthOrAbove = useBreakpoint('sm', {
|
|
12
12
|
breakpointRef: contentListRef
|
|
13
13
|
});
|
|
14
|
-
return (_jsxs(
|
|
14
|
+
return (_jsxs(StyledTimelineListItem, { children: [isSmallOrAbove && _jsx(StyledTime, { variant: timeFormat, value: date }), _jsx(StyledBulletWrapper, { hasIcon: !!icon, hasPrev: !!prevItemDate, hasNext: !!nextItemDate, isPrevFuture: isFutureDate(prevItemDate, currentTime), isNextFuture: isFutureDate(nextItemDate, currentTime), children: _jsx(StyledTimelineIcon, { container: { inline: true, alignItems: 'center', justify: 'center' }, children: icon && _jsx(Icon, { name: icon }) }) }), _jsxs("div", { children: [_jsx("div", { children: _jsx(StyledCard, { children: _jsxs(StyledCardHeader, { container: {
|
|
15
15
|
cols: 'auto 1fr',
|
|
16
16
|
alignContent: 'evenly',
|
|
17
17
|
alignItems: 'center',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,EACL,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAa,EACb,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,UAAU,EACV,WAAW,
|
|
1
|
+
{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { isValidElement, useCallback, useRef, useState } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport {\n ExpandCollapse,\n Grid,\n Icon,\n Status,\n useBreakpoint,\n FieldValueItem\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, DateTimeDisplayProps } from '@pega/cosmos-react-core';\n\nimport type { ActivityObject } from './Timeline.types';\nimport {\n StyledCard,\n StyledCardHeader,\n StyledTimelineIcon,\n StyledCardContent,\n StyledBulletWrapper,\n StyledToggleButton,\n StyledTime,\n StyledTitle,\n StyledTimelineListItem\n} from './Timeline.styles';\nimport { isFutureDate } from './utils';\n\ninterface TimelineItemProps {\n item: ActivityObject;\n timeFormat: DateTimeDisplayProps['variant'];\n prevItemDate: ActivityObject['date'] | undefined;\n nextItemDate: ActivityObject['date'] | undefined;\n currentTime: Date;\n}\n\nconst TimelineItem: FunctionComponent<TimelineItemProps & ForwardProps> = ({\n item: { date, title, icon, status, content },\n timeFormat,\n prevItemDate,\n nextItemDate,\n currentTime\n}: TimelineItemProps & ForwardProps) => {\n const [collapsed, setCollapsed] = useState(true);\n const isSmallOrAbove = useBreakpoint('sm');\n\n const toggleCollapse = useCallback(() => setCollapsed(prevState => !prevState), []);\n const contentListRef = useRef<HTMLDivElement>(null);\n const isSMContentWidthOrAbove = useBreakpoint('sm', {\n breakpointRef: contentListRef\n });\n\n return (\n <StyledTimelineListItem>\n {isSmallOrAbove && <StyledTime variant={timeFormat} value={date} />}\n <StyledBulletWrapper\n hasIcon={!!icon}\n hasPrev={!!prevItemDate}\n hasNext={!!nextItemDate}\n isPrevFuture={isFutureDate(prevItemDate, currentTime)}\n isNextFuture={isFutureDate(nextItemDate, currentTime)}\n >\n <StyledTimelineIcon container={{ inline: true, alignItems: 'center', justify: 'center' }}>\n {icon && <Icon name={icon} />}\n </StyledTimelineIcon>\n </StyledBulletWrapper>\n <div>\n <div>\n <StyledCard>\n <StyledCardHeader\n container={{\n cols: 'auto 1fr',\n alignContent: 'evenly',\n alignItems: 'center',\n gap: 0.5\n }}\n sm={{ container: { cols: 'auto 1fr auto' } }}\n >\n {content && (\n <StyledToggleButton\n icon\n variant='simple'\n onClick={toggleCollapse}\n collapsed={collapsed}\n aria-expanded={!collapsed}\n compact\n >\n <Icon name='caret-down' />\n </StyledToggleButton>\n )}\n <Grid item={{ colStart: '2', colEnd: '2' }} container={{ rowGap: 0.25 }}>\n <StyledTitle>{title}</StyledTitle>\n {!isSmallOrAbove && (\n <Grid\n container={{\n cols: '1fr auto',\n alignContent: 'evenly',\n alignItems: 'center'\n }}\n >\n <StyledTime variant='time' value={date} />\n {status && <Status variant={status.variant}>{status.children}</Status>}\n </Grid>\n )}\n </Grid>\n {isSmallOrAbove && status && (\n <Grid sm={{ item: { colStart: '3', colEnd: '3' } }}>\n <Status variant={status.variant}>{status.children}</Status>\n </Grid>\n )}\n </StyledCardHeader>\n </StyledCard>\n </div>\n {content && (\n <ExpandCollapse dimension='height' collapsed={collapsed} nullWhenCollapsed>\n <StyledCardContent>\n {isValidElement<any>(content) ? (\n content\n ) : (\n <Grid\n container={{\n gap: 1,\n cols: isSMContentWidthOrAbove\n ? `repeat(${\n content.length > 1 ? '2' : '1'\n }, minmax(16ch, auto) minmax(25%, 1fr))`\n : 'minmax(0, 1fr)'\n }}\n ref={contentListRef}\n >\n {content.map(({ id, name, value, variant }) => {\n return (\n <FieldValueItem\n name={name}\n value={value}\n variant={isSmallOrAbove ? variant : 'stacked'}\n key={id ?? name}\n />\n );\n })}\n </Grid>\n )}\n </StyledCardContent>\n </ExpandCollapse>\n )}\n </div>\n </StyledTimelineListItem>\n );\n};\n\nexport default TimelineItem;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "7.0.0-build.26.
|
|
3
|
+
"version": "7.0.0-build.26.3",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"build": "tsc -b tsconfig.build.json"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@pega/cosmos-react-core": "7.0.0-build.26.
|
|
23
|
-
"@pega/cosmos-react-rte": "7.0.0-build.26.
|
|
22
|
+
"@pega/cosmos-react-core": "7.0.0-build.26.3",
|
|
23
|
+
"@pega/cosmos-react-rte": "7.0.0-build.26.3",
|
|
24
24
|
"@types/react": "^17.0.62",
|
|
25
25
|
"@types/react-dom": "^17.0.20",
|
|
26
26
|
"@types/styled-components": "^5.1.26",
|