@selfcommunity/react-ui 0.7.0-alpha.50 → 0.7.0-alpha.51

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.
@@ -16,6 +16,10 @@
16
16
  |Rule Name|Global class|Description|
17
17
  |---|---|---|
18
18
  |root|.SCLoyaltyProgramSkeleton-root|Styles applied to the root element.|
19
+ |header|.SCLoyaltyProgramSkeleton-header|Styles applied to the card header element.|
20
+ |title|.SCLoyaltyProgramSkeleton-title|Styles applied to the title element.|
21
+ |content|.SCLoyaltyProgramSkeleton-content|Styles applied to the card content section.|
22
+ |actions|.SCLoyaltyProgramSkeleton-actions|Styles applied to the action section.|
19
23
  *
20
24
  */
21
25
  export default function LoyaltyProgramSkeleton(): JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgram/Skeleton.tsx"],"names":[],"mappings":"AAeA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,IAAI,GAAG,CAAC,OAAO,CAE5D"}
1
+ {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgram/Skeleton.tsx"],"names":[],"mappings":"AAiCA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,IAAI,GAAG,CAAC,OAAO,CAwB5D"}
@@ -4,17 +4,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  const react_1 = __importDefault(require("react"));
7
- const Skeleton_1 = require("../Skeleton");
8
7
  const styles_1 = require("@mui/material/styles");
8
+ const material_1 = require("@mui/material");
9
+ const Widget_1 = __importDefault(require("../Widget"));
9
10
  const PREFIX = 'SCLoyaltyProgramSkeleton';
10
11
  const classes = {
11
- root: `${PREFIX}-root`
12
+ root: `${PREFIX}-root`,
13
+ header: `${PREFIX}-header`,
14
+ title: `${PREFIX}-title`,
15
+ content: `${PREFIX}-content`,
16
+ actions: `${PREFIX}-actions`
12
17
  };
13
- const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
18
+ const Root = (0, styles_1.styled)(Widget_1.default, {
14
19
  name: PREFIX,
15
20
  slot: 'Root',
16
21
  overridesResolver: (props, styles) => styles.root
17
- })(({ theme }) => ({}));
22
+ })(({ theme }) => ({
23
+ [`& .${classes.header}`]: {
24
+ display: 'flex',
25
+ alignItems: 'start',
26
+ flexWrap: 'wrap',
27
+ marginTop: theme.spacing(2)
28
+ },
29
+ [`& .${classes.title}`]: {
30
+ display: 'flex'
31
+ },
32
+ [`& .${classes.actions}`]: {
33
+ justifyContent: 'space-between'
34
+ }
35
+ }));
18
36
  /**
19
37
  * > API documentation for the Community-JS Loyalty Program Skeleton component. Learn about the available props and the CSS API.
20
38
 
@@ -33,10 +51,27 @@ const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
33
51
  |Rule Name|Global class|Description|
34
52
  |---|---|---|
35
53
  |root|.SCLoyaltyProgramSkeleton-root|Styles applied to the root element.|
54
+ |header|.SCLoyaltyProgramSkeleton-header|Styles applied to the card header element.|
55
+ |title|.SCLoyaltyProgramSkeleton-title|Styles applied to the title element.|
56
+ |content|.SCLoyaltyProgramSkeleton-content|Styles applied to the card content section.|
57
+ |actions|.SCLoyaltyProgramSkeleton-actions|Styles applied to the action section.|
36
58
  *
37
59
  */
38
60
  function LoyaltyProgramSkeleton() {
39
- return react_1.default.createElement(Root, { className: classes.root });
61
+ return (react_1.default.createElement(Root, { className: classes.root },
62
+ react_1.default.createElement(material_1.CardContent, { className: classes.content },
63
+ react_1.default.createElement(material_1.Typography, { className: classes.title },
64
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 40, width: "50%", variant: "text" })),
65
+ react_1.default.createElement(material_1.Grid, { container: true, spacing: 2, className: classes.header },
66
+ react_1.default.createElement(material_1.Grid, { item: true },
67
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: 40, height: 40 })),
68
+ react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: true, container: true },
69
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 20, width: "50%", variant: "text" }),
70
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }),
71
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 10, width: "70%", variant: "text" })))),
72
+ react_1.default.createElement(material_1.CardActions, { className: classes.actions },
73
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 30, width: "30%", variant: "rectangular" }),
74
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 20, width: "30%", variant: "rectangular" }))));
40
75
  }
41
76
  exports.default = LoyaltyProgramSkeleton;
42
77
  //# sourceMappingURL=Skeleton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgram/Skeleton.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,0CAA4C;AAC5C,iDAA4C;AAE5C,MAAM,MAAM,GAAG,0BAA0B,CAAC;AAE1C,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,GAAG,MAAM,OAAO;CACvB,CAAC;AAEF,MAAM,IAAI,GAAG,IAAA,eAAM,EAAC,0BAAe,EAAE;IACnC,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI;CAClD,CAAC,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACtB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAwB,sBAAsB;IAC5C,OAAO,8BAAC,IAAI,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,GAAI,CAAC;AAC3C,CAAC;AAFD,yCAEC"}
1
+ {"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgram/Skeleton.tsx"],"names":[],"mappings":"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"}
@@ -1,3 +1,28 @@
1
+ /**
2
+ * > API documentation for the Community-JS Loyalty Program Detail Skeleton Prize component. Learn about the available props and the CSS API.
3
+
4
+ #### Import
5
+
6
+ ```jsx
7
+ import {LoyaltyProgramDetailSkeletonPrize} from '@selfcommunity/react-ui';
8
+ ```
9
+
10
+ #### Component Name
11
+
12
+ The name `SCLoyaltyProgramDetailSkeletonPrize` can be used when providing style overrides in the theme.
13
+
14
+ #### CSS
15
+
16
+ |Rule Name|Global class|Description|
17
+ |---|---|---|
18
+ |root|.SCLoyaltyProgramDetailSkeletonPrize-root|Styles applied to the root element.|
19
+ |chip|.SCLoyaltyProgramDetailSkeletonPrize-chip|Styles applied to the chip element.|
20
+ |content|.SCLoyaltyProgramDetailSkeletonPrize-content|Styles applied to the card content section.|
21
+ |title|.SCLoyaltyProgramDetailSkeletonPrize-title|Styles applied to the title element.|
22
+ |actions|.SCLoyaltyProgramDetailSkeletonPrize-actions|Styles applied to the action section.|
23
+ *
24
+ */
25
+ export declare function PrizeSkeleton(): JSX.Element;
1
26
  /**
2
27
  * > API documentation for the Community-JS Loyalty Program Detail Skeleton component. Learn about the available props and the CSS API.
3
28
 
@@ -16,6 +41,10 @@
16
41
  |Rule Name|Global class|Description|
17
42
  |---|---|---|
18
43
  |root|.SCLoyaltyProgramDetailSkeleton-root|Styles applied to the root element.|
44
+ |header|.SCLoyaltyProgramDetailSkeleton-header|Styles applied to the card header element.|
45
+ |content|.SCLoyaltyProgramDetailSkeleton-content|Styles applied to the card content section.|
46
+ |list|.SCLoyaltyProgramDetailSkeleton-list|Styles applied to the list section.|
47
+ |listItem|.SCLoyaltyProgramDetailSkeleton-list-item|Styles applied to the list item elements.|
19
48
  *
20
49
  */
21
50
  export default function LoyaltyProgramDetailSkeleton(): JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgramDetail/Skeleton.tsx"],"names":[],"mappings":"AAeA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,4BAA4B,IAAI,GAAG,CAAC,OAAO,CAElE"}
1
+ {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgramDetail/Skeleton.tsx"],"names":[],"mappings":"AA8CA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,IAAI,GAAG,CAAC,OAAO,CAoB3C;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,4BAA4B,IAAI,GAAG,CAAC,OAAO,CAwClE"}
@@ -3,18 +3,88 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.PrizeSkeleton = void 0;
6
7
  const react_1 = __importDefault(require("react"));
7
- const Skeleton_1 = require("../Skeleton");
8
8
  const styles_1 = require("@mui/material/styles");
9
+ const material_1 = require("@mui/material");
10
+ const Widget_1 = __importDefault(require("../Widget"));
9
11
  const PREFIX = 'SCLoyaltyProgramDetailSkeleton';
10
12
  const classes = {
11
- root: `${PREFIX}-root`
13
+ root: `${PREFIX}-root`,
14
+ header: `${PREFIX}-header`,
15
+ title: `${PREFIX}-title`,
16
+ content: `${PREFIX}-content`,
17
+ actions: `${PREFIX}-actions`,
18
+ list: `${PREFIX}-list`,
19
+ listItem: `${PREFIX}-list-item`,
20
+ chip: `${PREFIX}-chip`
12
21
  };
13
- const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
22
+ const Root = (0, styles_1.styled)(Widget_1.default, {
14
23
  name: PREFIX,
15
24
  slot: 'Root',
16
25
  overridesResolver: (props, styles) => styles.root
17
- })(({ theme }) => ({}));
26
+ })(({ theme }) => ({
27
+ [`& .${classes.list}`]: {
28
+ display: 'flex',
29
+ flexDirection: 'row'
30
+ }
31
+ }));
32
+ const PrizeRoot = (0, styles_1.styled)(Widget_1.default, {
33
+ name: `${PREFIX}-Prize`,
34
+ slot: 'Root',
35
+ overridesResolver: (props, styles) => styles.root
36
+ })(({ theme }) => ({
37
+ [`& .${classes.root}`]: {
38
+ flexDirection: 'column',
39
+ justifyContent: 'space-between'
40
+ },
41
+ [`& .${classes.chip}`]: {
42
+ display: 'flex',
43
+ alignItems: 'center',
44
+ justifyContent: 'center'
45
+ },
46
+ [`& .${classes.actions}`]: {
47
+ justifyContent: 'center'
48
+ }
49
+ }));
50
+ /**
51
+ * > API documentation for the Community-JS Loyalty Program Detail Skeleton Prize component. Learn about the available props and the CSS API.
52
+
53
+ #### Import
54
+
55
+ ```jsx
56
+ import {LoyaltyProgramDetailSkeletonPrize} from '@selfcommunity/react-ui';
57
+ ```
58
+
59
+ #### Component Name
60
+
61
+ The name `SCLoyaltyProgramDetailSkeletonPrize` can be used when providing style overrides in the theme.
62
+
63
+ #### CSS
64
+
65
+ |Rule Name|Global class|Description|
66
+ |---|---|---|
67
+ |root|.SCLoyaltyProgramDetailSkeletonPrize-root|Styles applied to the root element.|
68
+ |chip|.SCLoyaltyProgramDetailSkeletonPrize-chip|Styles applied to the chip element.|
69
+ |content|.SCLoyaltyProgramDetailSkeletonPrize-content|Styles applied to the card content section.|
70
+ |title|.SCLoyaltyProgramDetailSkeletonPrize-title|Styles applied to the title element.|
71
+ |actions|.SCLoyaltyProgramDetailSkeletonPrize-actions|Styles applied to the action section.|
72
+ *
73
+ */
74
+ function PrizeSkeleton() {
75
+ return (react_1.default.createElement(PrizeRoot, { className: classes.root },
76
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "100%", height: 40 }),
77
+ react_1.default.createElement(material_1.Box, { className: classes.chip },
78
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", variant: "circular", width: 30, height: 15 })),
79
+ react_1.default.createElement(material_1.CardContent, { className: classes.content },
80
+ react_1.default.createElement(material_1.Typography, { gutterBottom: true, variant: "body1", component: "div", className: classes.title },
81
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 15, width: "70%", variant: "text" })),
82
+ react_1.default.createElement(material_1.Typography, { variant: "body2" },
83
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }))),
84
+ react_1.default.createElement(material_1.CardActions, { className: classes.actions },
85
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 20, width: 50, variant: "rectangular" }))));
86
+ }
87
+ exports.PrizeSkeleton = PrizeSkeleton;
18
88
  /**
19
89
  * > API documentation for the Community-JS Loyalty Program Detail Skeleton component. Learn about the available props and the CSS API.
20
90
 
@@ -33,10 +103,30 @@ const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
33
103
  |Rule Name|Global class|Description|
34
104
  |---|---|---|
35
105
  |root|.SCLoyaltyProgramDetailSkeleton-root|Styles applied to the root element.|
106
+ |header|.SCLoyaltyProgramDetailSkeleton-header|Styles applied to the card header element.|
107
+ |content|.SCLoyaltyProgramDetailSkeleton-content|Styles applied to the card content section.|
108
+ |list|.SCLoyaltyProgramDetailSkeleton-list|Styles applied to the list section.|
109
+ |listItem|.SCLoyaltyProgramDetailSkeleton-list-item|Styles applied to the list item elements.|
36
110
  *
37
111
  */
38
112
  function LoyaltyProgramDetailSkeleton() {
39
- return react_1.default.createElement(Root, { className: classes.root });
113
+ return (react_1.default.createElement(Root, { className: classes.root },
114
+ react_1.default.createElement(material_1.CardHeader, { className: classes.header, avatar: react_1.default.createElement(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: 40, height: 40 }), title: react_1.default.createElement(material_1.Skeleton, { animation: "wave", variant: "circular", width: 30, height: 15 }) }),
115
+ react_1.default.createElement(material_1.CardContent, { className: classes.content },
116
+ react_1.default.createElement(react_1.default.Fragment, null,
117
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 15, width: "70%", variant: "text" }),
118
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 10, width: "90%", variant: "text" })),
119
+ react_1.default.createElement(material_1.Typography, { mt: 1, className: classes.title },
120
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 10, width: "40%" })),
121
+ react_1.default.createElement(material_1.Grid, { container: true, spacing: 0, mt: 0.5, mb: 1, className: classes.list }, [...Array(8)].map((prize, index) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 6, key: index, className: classes.listItem },
122
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 10, width: "50%" }))))),
123
+ react_1.default.createElement(material_1.Typography, { mb: 1 },
124
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 15, width: "60%", variant: "text", className: classes.title }),
125
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 10, width: "80%", variant: "text" }),
126
+ react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" })),
127
+ react_1.default.createElement(material_1.Grid, { container: true, spacing: { xs: 2 }, columns: { xs: 4 }, className: classes.list }, [...Array(4)].map((prize, index) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 2, key: index, className: classes.listItem },
128
+ react_1.default.createElement(PrizeRoot, null,
129
+ react_1.default.createElement(PrizeSkeleton, null)))))))));
40
130
  }
41
131
  exports.default = LoyaltyProgramDetailSkeleton;
42
132
  //# sourceMappingURL=Skeleton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgramDetail/Skeleton.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,0CAA4C;AAC5C,iDAA4C;AAE5C,MAAM,MAAM,GAAG,gCAAgC,CAAC;AAEhD,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,GAAG,MAAM,OAAO;CACvB,CAAC;AAEF,MAAM,IAAI,GAAG,IAAA,eAAM,EAAC,0BAAe,EAAE;IACnC,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI;CAClD,CAAC,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACtB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAwB,4BAA4B;IAClD,OAAO,8BAAC,IAAI,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,GAAI,CAAC;AAC3C,CAAC;AAFD,+CAEC"}
1
+ {"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgramDetail/Skeleton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,iDAA4C;AAC5C,4CAAoG;AACpG,uDAA+B;AAE/B,MAAM,MAAM,GAAG,gCAAgC,CAAC;AAEhD,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,GAAG,MAAM,OAAO;IACtB,MAAM,EAAE,GAAG,MAAM,SAAS;IAC1B,KAAK,EAAE,GAAG,MAAM,QAAQ;IACxB,OAAO,EAAE,GAAG,MAAM,UAAU;IAC5B,OAAO,EAAE,GAAG,MAAM,UAAU;IAC5B,IAAI,EAAE,GAAG,MAAM,OAAO;IACtB,QAAQ,EAAE,GAAG,MAAM,YAAY;IAC/B,IAAI,EAAE,GAAG,MAAM,OAAO;CACvB,CAAC;AAEF,MAAM,IAAI,GAAG,IAAA,eAAM,EAAC,gBAAM,EAAE;IAC1B,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI;CAClD,CAAC,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAAC;IACf,CAAC,MAAM,OAAO,CAAC,IAAI,EAAE,CAAC,EAAE;QACtB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;KACrB;CACF,CAAC,CAAC,CAAC;AACJ,MAAM,SAAS,GAAG,IAAA,eAAM,EAAC,gBAAM,EAAE;IAC/B,IAAI,EAAE,GAAG,MAAM,QAAQ;IACvB,IAAI,EAAE,MAAM;IACZ,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI;CAClD,CAAC,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAAC;IACf,CAAC,MAAM,OAAO,CAAC,IAAI,EAAE,CAAC,EAAE;QACtB,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,eAAe;KAChC;IACD,CAAC,MAAM,OAAO,CAAC,IAAI,EAAE,CAAC,EAAE;QACtB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,CAAC,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC,EAAE;QACzB,cAAc,EAAE,QAAQ;KACzB;CACF,CAAC,CAAC,CAAC;AACJ;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAgB,aAAa;IAC3B,OAAO,CACL,8BAAC,SAAS,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI;QAChC,8BAAC,mBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,GAAI;QAC5E,8BAAC,cAAG,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI;YAC1B,8BAAC,mBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CACnE;QACN,8BAAC,sBAAW,IAAC,SAAS,EAAE,OAAO,CAAC,OAAO;YACrC,8BAAC,qBAAU,IAAC,YAAY,QAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAE,OAAO,CAAC,KAAK;gBAC/E,8BAAC,mBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,EAAC,OAAO,EAAC,MAAM,GAAG,CACzD;YACb,8BAAC,qBAAU,IAAC,OAAO,EAAC,OAAO;gBACzB,8BAAC,mBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,GAAG,CAC1D,CACD;QACd,8BAAC,sBAAW,IAAC,SAAS,EAAE,OAAO,CAAC,OAAO;YACrC,8BAAC,mBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAC,aAAa,GAAG,CAC9D,CACJ,CACb,CAAC;AACJ,CAAC;AApBD,sCAoBC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAwB,4BAA4B;IAClD,OAAO,CACL,8BAAC,IAAI,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI;QAC3B,8BAAC,qBAAU,IACT,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,MAAM,EAAE,8BAAC,mBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EAClF,KAAK,EAAE,8BAAC,mBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC9E;QACF,8BAAC,sBAAW,IAAC,SAAS,EAAE,OAAO,CAAC,OAAO;YACrC,8BAAC,eAAK,CAAC,QAAQ;gBACb,8BAAC,mBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,EAAC,OAAO,EAAC,MAAM,GAAG;gBACpE,8BAAC,mBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,EAAC,OAAO,EAAC,MAAM,GAAG,CACrD;YACjB,8BAAC,qBAAU,IAAC,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK;gBACzC,8BAAC,mBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,GAAG,CAC1C;YACb,8BAAC,eAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC,IAAI,IAChE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,8BAAC,eAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,QAAQ;gBACvD,8BAAC,mBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,GAAG,CAChD,CACR,CAAC,CACG;YACP,8BAAC,qBAAU,IAAC,EAAE,EAAE,CAAC;gBACf,8BAAC,mBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,EAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAE,OAAO,CAAC,KAAK,GAAI;gBAC9F,8BAAC,mBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,EAAC,OAAO,EAAC,MAAM,GAAG;gBACpE,8BAAC,mBAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,GAAG,CAC1D;YACb,8BAAC,eAAI,IAAC,SAAS,QAAC,OAAO,EAAE,EAAC,EAAE,EAAE,CAAC,EAAC,EAAE,OAAO,EAAE,EAAC,EAAE,EAAE,CAAC,EAAC,EAAE,SAAS,EAAE,OAAO,CAAC,IAAI,IACxE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,8BAAC,eAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,QAAQ;gBACvD,8BAAC,SAAS;oBACR,8BAAC,aAAa,OAAG,CACP,CACP,CACR,CAAC,CACG,CACK,CACT,CACR,CAAC;AACJ,CAAC;AAxCD,+CAwCC"}
@@ -16,6 +16,10 @@
16
16
  |Rule Name|Global class|Description|
17
17
  |---|---|---|
18
18
  |root|.SCLoyaltyProgramSkeleton-root|Styles applied to the root element.|
19
+ |header|.SCLoyaltyProgramSkeleton-header|Styles applied to the card header element.|
20
+ |title|.SCLoyaltyProgramSkeleton-title|Styles applied to the title element.|
21
+ |content|.SCLoyaltyProgramSkeleton-content|Styles applied to the card content section.|
22
+ |actions|.SCLoyaltyProgramSkeleton-actions|Styles applied to the action section.|
19
23
  *
20
24
  */
21
25
  export default function LoyaltyProgramSkeleton(): JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgram/Skeleton.tsx"],"names":[],"mappings":"AAeA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,IAAI,GAAG,CAAC,OAAO,CAE5D"}
1
+ {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgram/Skeleton.tsx"],"names":[],"mappings":"AAiCA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,IAAI,GAAG,CAAC,OAAO,CAwB5D"}
@@ -1,15 +1,33 @@
1
1
  import React from 'react';
2
- import { GenericSkeleton } from '../Skeleton';
3
2
  import { styled } from '@mui/material/styles';
3
+ import { CardActions, CardContent, Grid, Skeleton, Typography } from '@mui/material';
4
+ import Widget from '../Widget';
4
5
  const PREFIX = 'SCLoyaltyProgramSkeleton';
5
6
  const classes = {
6
- root: `${PREFIX}-root`
7
+ root: `${PREFIX}-root`,
8
+ header: `${PREFIX}-header`,
9
+ title: `${PREFIX}-title`,
10
+ content: `${PREFIX}-content`,
11
+ actions: `${PREFIX}-actions`
7
12
  };
8
- const Root = styled(GenericSkeleton, {
13
+ const Root = styled(Widget, {
9
14
  name: PREFIX,
10
15
  slot: 'Root',
11
16
  overridesResolver: (props, styles) => styles.root
12
- })(({ theme }) => ({}));
17
+ })(({ theme }) => ({
18
+ [`& .${classes.header}`]: {
19
+ display: 'flex',
20
+ alignItems: 'start',
21
+ flexWrap: 'wrap',
22
+ marginTop: theme.spacing(2)
23
+ },
24
+ [`& .${classes.title}`]: {
25
+ display: 'flex'
26
+ },
27
+ [`& .${classes.actions}`]: {
28
+ justifyContent: 'space-between'
29
+ }
30
+ }));
13
31
  /**
14
32
  * > API documentation for the Community-JS Loyalty Program Skeleton component. Learn about the available props and the CSS API.
15
33
 
@@ -28,9 +46,26 @@ const Root = styled(GenericSkeleton, {
28
46
  |Rule Name|Global class|Description|
29
47
  |---|---|---|
30
48
  |root|.SCLoyaltyProgramSkeleton-root|Styles applied to the root element.|
49
+ |header|.SCLoyaltyProgramSkeleton-header|Styles applied to the card header element.|
50
+ |title|.SCLoyaltyProgramSkeleton-title|Styles applied to the title element.|
51
+ |content|.SCLoyaltyProgramSkeleton-content|Styles applied to the card content section.|
52
+ |actions|.SCLoyaltyProgramSkeleton-actions|Styles applied to the action section.|
31
53
  *
32
54
  */
33
55
  export default function LoyaltyProgramSkeleton() {
34
- return React.createElement(Root, { className: classes.root });
56
+ return (React.createElement(Root, { className: classes.root },
57
+ React.createElement(CardContent, { className: classes.content },
58
+ React.createElement(Typography, { className: classes.title },
59
+ React.createElement(Skeleton, { animation: "wave", height: 40, width: "50%", variant: "text" })),
60
+ React.createElement(Grid, { container: true, spacing: 2, className: classes.header },
61
+ React.createElement(Grid, { item: true },
62
+ React.createElement(Skeleton, { animation: "wave", variant: "rectangular", width: 40, height: 40 })),
63
+ React.createElement(Grid, { item: true, xs: 12, sm: true, container: true },
64
+ React.createElement(Skeleton, { animation: "wave", height: 20, width: "50%", variant: "text" }),
65
+ React.createElement(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }),
66
+ React.createElement(Skeleton, { animation: "wave", height: 10, width: "70%", variant: "text" })))),
67
+ React.createElement(CardActions, { className: classes.actions },
68
+ React.createElement(Skeleton, { animation: "wave", height: 30, width: "30%", variant: "rectangular" }),
69
+ React.createElement(Skeleton, { animation: "wave", height: 20, width: "30%", variant: "rectangular" }))));
35
70
  }
36
71
  //# sourceMappingURL=Skeleton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgram/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAE5C,MAAM,MAAM,GAAG,0BAA0B,CAAC;AAE1C,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,GAAG,MAAM,OAAO;CACvB,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,eAAe,EAAE;IACnC,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI;CAClD,CAAC,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACtB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB;IAC5C,OAAO,oBAAC,IAAI,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,GAAI,CAAC;AAC3C,CAAC"}
1
+ {"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgram/Skeleton.tsx"],"names":[],"mappings":"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"}
@@ -1,3 +1,28 @@
1
+ /**
2
+ * > API documentation for the Community-JS Loyalty Program Detail Skeleton Prize component. Learn about the available props and the CSS API.
3
+
4
+ #### Import
5
+
6
+ ```jsx
7
+ import {LoyaltyProgramDetailSkeletonPrize} from '@selfcommunity/react-ui';
8
+ ```
9
+
10
+ #### Component Name
11
+
12
+ The name `SCLoyaltyProgramDetailSkeletonPrize` can be used when providing style overrides in the theme.
13
+
14
+ #### CSS
15
+
16
+ |Rule Name|Global class|Description|
17
+ |---|---|---|
18
+ |root|.SCLoyaltyProgramDetailSkeletonPrize-root|Styles applied to the root element.|
19
+ |chip|.SCLoyaltyProgramDetailSkeletonPrize-chip|Styles applied to the chip element.|
20
+ |content|.SCLoyaltyProgramDetailSkeletonPrize-content|Styles applied to the card content section.|
21
+ |title|.SCLoyaltyProgramDetailSkeletonPrize-title|Styles applied to the title element.|
22
+ |actions|.SCLoyaltyProgramDetailSkeletonPrize-actions|Styles applied to the action section.|
23
+ *
24
+ */
25
+ export declare function PrizeSkeleton(): JSX.Element;
1
26
  /**
2
27
  * > API documentation for the Community-JS Loyalty Program Detail Skeleton component. Learn about the available props and the CSS API.
3
28
 
@@ -16,6 +41,10 @@
16
41
  |Rule Name|Global class|Description|
17
42
  |---|---|---|
18
43
  |root|.SCLoyaltyProgramDetailSkeleton-root|Styles applied to the root element.|
44
+ |header|.SCLoyaltyProgramDetailSkeleton-header|Styles applied to the card header element.|
45
+ |content|.SCLoyaltyProgramDetailSkeleton-content|Styles applied to the card content section.|
46
+ |list|.SCLoyaltyProgramDetailSkeleton-list|Styles applied to the list section.|
47
+ |listItem|.SCLoyaltyProgramDetailSkeleton-list-item|Styles applied to the list item elements.|
19
48
  *
20
49
  */
21
50
  export default function LoyaltyProgramDetailSkeleton(): JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgramDetail/Skeleton.tsx"],"names":[],"mappings":"AAeA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,4BAA4B,IAAI,GAAG,CAAC,OAAO,CAElE"}
1
+ {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgramDetail/Skeleton.tsx"],"names":[],"mappings":"AA8CA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,IAAI,GAAG,CAAC,OAAO,CAoB3C;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,4BAA4B,IAAI,GAAG,CAAC,OAAO,CAwClE"}
@@ -1,15 +1,83 @@
1
1
  import React from 'react';
2
- import { GenericSkeleton } from '../Skeleton';
3
2
  import { styled } from '@mui/material/styles';
3
+ import { Typography, CardContent, CardHeader, Grid, Skeleton, Box, CardActions } from '@mui/material';
4
+ import Widget from '../Widget';
4
5
  const PREFIX = 'SCLoyaltyProgramDetailSkeleton';
5
6
  const classes = {
6
- root: `${PREFIX}-root`
7
+ root: `${PREFIX}-root`,
8
+ header: `${PREFIX}-header`,
9
+ title: `${PREFIX}-title`,
10
+ content: `${PREFIX}-content`,
11
+ actions: `${PREFIX}-actions`,
12
+ list: `${PREFIX}-list`,
13
+ listItem: `${PREFIX}-list-item`,
14
+ chip: `${PREFIX}-chip`
7
15
  };
8
- const Root = styled(GenericSkeleton, {
16
+ const Root = styled(Widget, {
9
17
  name: PREFIX,
10
18
  slot: 'Root',
11
19
  overridesResolver: (props, styles) => styles.root
12
- })(({ theme }) => ({}));
20
+ })(({ theme }) => ({
21
+ [`& .${classes.list}`]: {
22
+ display: 'flex',
23
+ flexDirection: 'row'
24
+ }
25
+ }));
26
+ const PrizeRoot = styled(Widget, {
27
+ name: `${PREFIX}-Prize`,
28
+ slot: 'Root',
29
+ overridesResolver: (props, styles) => styles.root
30
+ })(({ theme }) => ({
31
+ [`& .${classes.root}`]: {
32
+ flexDirection: 'column',
33
+ justifyContent: 'space-between'
34
+ },
35
+ [`& .${classes.chip}`]: {
36
+ display: 'flex',
37
+ alignItems: 'center',
38
+ justifyContent: 'center'
39
+ },
40
+ [`& .${classes.actions}`]: {
41
+ justifyContent: 'center'
42
+ }
43
+ }));
44
+ /**
45
+ * > API documentation for the Community-JS Loyalty Program Detail Skeleton Prize component. Learn about the available props and the CSS API.
46
+
47
+ #### Import
48
+
49
+ ```jsx
50
+ import {LoyaltyProgramDetailSkeletonPrize} from '@selfcommunity/react-ui';
51
+ ```
52
+
53
+ #### Component Name
54
+
55
+ The name `SCLoyaltyProgramDetailSkeletonPrize` can be used when providing style overrides in the theme.
56
+
57
+ #### CSS
58
+
59
+ |Rule Name|Global class|Description|
60
+ |---|---|---|
61
+ |root|.SCLoyaltyProgramDetailSkeletonPrize-root|Styles applied to the root element.|
62
+ |chip|.SCLoyaltyProgramDetailSkeletonPrize-chip|Styles applied to the chip element.|
63
+ |content|.SCLoyaltyProgramDetailSkeletonPrize-content|Styles applied to the card content section.|
64
+ |title|.SCLoyaltyProgramDetailSkeletonPrize-title|Styles applied to the title element.|
65
+ |actions|.SCLoyaltyProgramDetailSkeletonPrize-actions|Styles applied to the action section.|
66
+ *
67
+ */
68
+ export function PrizeSkeleton() {
69
+ return (React.createElement(PrizeRoot, { className: classes.root },
70
+ React.createElement(Skeleton, { animation: "wave", variant: "rectangular", width: "100%", height: 40 }),
71
+ React.createElement(Box, { className: classes.chip },
72
+ React.createElement(Skeleton, { animation: "wave", variant: "circular", width: 30, height: 15 })),
73
+ React.createElement(CardContent, { className: classes.content },
74
+ React.createElement(Typography, { gutterBottom: true, variant: "body1", component: "div", className: classes.title },
75
+ React.createElement(Skeleton, { animation: "wave", height: 15, width: "70%", variant: "text" })),
76
+ React.createElement(Typography, { variant: "body2" },
77
+ React.createElement(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }))),
78
+ React.createElement(CardActions, { className: classes.actions },
79
+ React.createElement(Skeleton, { animation: "wave", height: 20, width: 50, variant: "rectangular" }))));
80
+ }
13
81
  /**
14
82
  * > API documentation for the Community-JS Loyalty Program Detail Skeleton component. Learn about the available props and the CSS API.
15
83
 
@@ -28,9 +96,29 @@ const Root = styled(GenericSkeleton, {
28
96
  |Rule Name|Global class|Description|
29
97
  |---|---|---|
30
98
  |root|.SCLoyaltyProgramDetailSkeleton-root|Styles applied to the root element.|
99
+ |header|.SCLoyaltyProgramDetailSkeleton-header|Styles applied to the card header element.|
100
+ |content|.SCLoyaltyProgramDetailSkeleton-content|Styles applied to the card content section.|
101
+ |list|.SCLoyaltyProgramDetailSkeleton-list|Styles applied to the list section.|
102
+ |listItem|.SCLoyaltyProgramDetailSkeleton-list-item|Styles applied to the list item elements.|
31
103
  *
32
104
  */
33
105
  export default function LoyaltyProgramDetailSkeleton() {
34
- return React.createElement(Root, { className: classes.root });
106
+ return (React.createElement(Root, { className: classes.root },
107
+ React.createElement(CardHeader, { className: classes.header, avatar: React.createElement(Skeleton, { animation: "wave", variant: "rectangular", width: 40, height: 40 }), title: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: 30, height: 15 }) }),
108
+ React.createElement(CardContent, { className: classes.content },
109
+ React.createElement(React.Fragment, null,
110
+ React.createElement(Skeleton, { animation: "wave", height: 15, width: "70%", variant: "text" }),
111
+ React.createElement(Skeleton, { animation: "wave", height: 10, width: "90%", variant: "text" })),
112
+ React.createElement(Typography, { mt: 1, className: classes.title },
113
+ React.createElement(Skeleton, { animation: "wave", height: 10, width: "40%" })),
114
+ React.createElement(Grid, { container: true, spacing: 0, mt: 0.5, mb: 1, className: classes.list }, [...Array(8)].map((prize, index) => (React.createElement(Grid, { item: true, xs: 6, key: index, className: classes.listItem },
115
+ React.createElement(Skeleton, { animation: "wave", height: 10, width: "50%" }))))),
116
+ React.createElement(Typography, { mb: 1 },
117
+ React.createElement(Skeleton, { animation: "wave", height: 15, width: "60%", variant: "text", className: classes.title }),
118
+ React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%", variant: "text" }),
119
+ React.createElement(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" })),
120
+ React.createElement(Grid, { container: true, spacing: { xs: 2 }, columns: { xs: 4 }, className: classes.list }, [...Array(4)].map((prize, index) => (React.createElement(Grid, { item: true, xs: 2, key: index, className: classes.listItem },
121
+ React.createElement(PrizeRoot, null,
122
+ React.createElement(PrizeSkeleton, null)))))))));
35
123
  }
36
124
  //# sourceMappingURL=Skeleton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgramDetail/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAE5C,MAAM,MAAM,GAAG,gCAAgC,CAAC;AAEhD,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,GAAG,MAAM,OAAO;CACvB,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,eAAe,EAAE;IACnC,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI;CAClD,CAAC,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACtB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,4BAA4B;IAClD,OAAO,oBAAC,IAAI,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,GAAI,CAAC;AAC3C,CAAC"}
1
+ {"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/LoyaltyProgramDetail/Skeleton.tsx"],"names":[],"mappings":"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"}