@sproutsocial/seeds-react-skeleton 1.0.0 → 1.1.1
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/.turbo/turbo-build.log +10 -10
- package/CHANGELOG.md +16 -0
- package/dist/esm/index.js +3 -19
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +10 -3
- package/dist/index.d.ts +10 -3
- package/dist/index.js +6 -22
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/src/Skeleton.tsx +5 -4
- package/src/SkeletonTypes.ts +3 -0
- package/src/index.ts +1 -0
package/.turbo/turbo-build.log
CHANGED
|
@@ -8,14 +8,14 @@ CLI Target: es2022
|
|
|
8
8
|
CLI Cleaning output folder
|
|
9
9
|
CJS Build start
|
|
10
10
|
ESM Build start
|
|
11
|
-
CJS dist/index.js 4.
|
|
12
|
-
CJS dist/index.js.map 5.
|
|
13
|
-
CJS ⚡️ Build success in
|
|
14
|
-
ESM dist/esm/index.js 3.
|
|
15
|
-
ESM dist/esm/index.js.map 5.
|
|
16
|
-
ESM ⚡️ Build success in
|
|
11
|
+
CJS dist/index.js 4.73 KB
|
|
12
|
+
CJS dist/index.js.map 5.14 KB
|
|
13
|
+
CJS ⚡️ Build success in 115ms
|
|
14
|
+
ESM dist/esm/index.js 3.03 KB
|
|
15
|
+
ESM dist/esm/index.js.map 5.07 KB
|
|
16
|
+
ESM ⚡️ Build success in 115ms
|
|
17
17
|
DTS Build start
|
|
18
|
-
DTS ⚡️ Build success in
|
|
19
|
-
DTS dist/index.d.ts
|
|
20
|
-
DTS dist/index.d.mts
|
|
21
|
-
Done in 41.
|
|
18
|
+
DTS ⚡️ Build success in 33678ms
|
|
19
|
+
DTS dist/index.d.ts 604.00 B
|
|
20
|
+
DTS dist/index.d.mts 604.00 B
|
|
21
|
+
Done in 41.06s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-skeleton
|
|
2
2
|
|
|
3
|
+
## 1.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
|
|
8
|
+
- Updated dependencies [9fd8bac]
|
|
9
|
+
- @sproutsocial/seeds-react-system-props@3.0.2
|
|
10
|
+
- @sproutsocial/seeds-react-theme@2.2.1
|
|
11
|
+
- @sproutsocial/seeds-react-box@1.1.2
|
|
12
|
+
|
|
13
|
+
## 1.1.0
|
|
14
|
+
|
|
15
|
+
### Minor Changes
|
|
16
|
+
|
|
17
|
+
- 55e2d47: Skeleton now exports a functional component so `react-docgen` can generate the appropriate docs
|
|
18
|
+
|
|
3
19
|
## 1.0.0
|
|
4
20
|
|
|
5
21
|
### Major Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -109,28 +109,12 @@ var Skeleton = styled(Box).attrs(SkeletonAttrs)`
|
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
111
|
`;
|
|
112
|
-
var
|
|
113
|
-
borderRadius,
|
|
114
|
-
height,
|
|
115
|
-
width,
|
|
116
|
-
...props
|
|
117
|
-
}) => {
|
|
118
|
-
return /* @__PURE__ */ jsx(
|
|
119
|
-
Skeleton,
|
|
120
|
-
{
|
|
121
|
-
borderRadius,
|
|
122
|
-
height,
|
|
123
|
-
width,
|
|
124
|
-
...props
|
|
125
|
-
}
|
|
126
|
-
);
|
|
127
|
-
};
|
|
128
|
-
var Skeleton_default = SkeletonComponent;
|
|
112
|
+
var Skeleton_default = Skeleton;
|
|
129
113
|
|
|
130
114
|
// src/index.ts
|
|
131
|
-
var
|
|
115
|
+
var index_default = Skeleton_default;
|
|
132
116
|
export {
|
|
133
117
|
Skeleton_default as Skeleton,
|
|
134
|
-
|
|
118
|
+
index_default as default
|
|
135
119
|
};
|
|
136
120
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Skeleton.tsx","../../src/index.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport Box
|
|
1
|
+
{"version":3,"sources":["../../src/Skeleton.tsx","../../src/index.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { SkeletonProps } from \"./SkeletonTypes\";\n\n/**\n *\n * @param borderRadius\n * @returns classname string for handling appropriate loader style depending on passed in properties\n */\n// @ts-ignore TODO: fix noImplicitAny error here. IDK why there are no types for this component\nconst SkeletonAttrs = ({ borderRadius, height, width }) => ({\n className:\n borderRadius === \"pill\" && height === width ? \"circular\" : \"linear\",\n});\n\nconst Skeleton = styled(Box).attrs(SkeletonAttrs)`\n position: relative;\n background: ${(props) =>\n props.theme.colors.container.background.decorative.neutral};\n overflow: hidden;\n &.circular {\n &:before {\n position: absolute;\n top: -25%;\n left: -25%;\n content: '';\n background-image: ${(props) => `conic-gradient(\n ${props.theme.colors.container.background.decorative.neutral} 270deg,\n ${props.theme.colors.container.border.decorative.neutral} 300deg\n );`};\n height: 150%;\n width: 150%;\n animation: SkeletonRotate 2s infinite linear;\n }\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n content: '';\n height: calc(100% - 8px);\n width: calc(100% - 8px);\n background: ${(p) => p.theme.colors.app.background.base};\n border-radius: 50%;\n }\n }\n &.linear {\n position: relative;\n background-image: ${(props) => `linear-gradient(\n 288deg,\n ${props.theme.colors.container.background.decorative.neutral} 32%,\n ${props.theme.colors.container.border.decorative.neutral},\n ${props.theme.colors.container.background.decorative.neutral} 68%\n );`}\n background-size: 400%;\n background-repeat: no-repeat;\n animation: SkeletonShimmer 2s linear infinite reverse;\n overflow: hidden;\n &:after {\n position: absolute;\n bottom: 0;\n content: \"\";\n height: calc(100% - 4px);\n width: 100%;\n background: ${(props) =>\n props.theme.colors.container.background.decorative.neutral};\n \n }\n }\n\n @media (prefers-reduced-motion) {\n &.linear,\n &.circular::before {\n animation: none;\n }\n &:before,\n &:after {\n display: none;\n }\n &.linear,\n &.circular {\n border: 1px solid ${(props) =>\n props.theme.colors.container.border.decorative.neutral};\n animation: SkeletonPulse 2s linear infinite alternate; \n }\n }\n\n @keyframes SkeletonRotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n @keyframes SkeletonRotateFade {\n 50% {\n transform: rotate(360deg);\n }\n 90% {\n opacity: 1;\n }\n 100% {\n transform: rotate(720deg);\n opacity: 0;\n }\n }\n\n @keyframes SkeletonShimmer {\n 0% {\n background-position: 0% 0;\n }\n 100% {\n background-position: 100% 0;\n }\n }\n @keyframes SkeletonPulse {\n 0% {\n border-color: ${(props) =>\n props.theme.colors.container.border.decorative.neutral}FF;\n }\n 100% {\n border-color: ${(props) =>\n props.theme.colors.container.border.decorative.neutral}1A;\n }\n }\n`;\n\n// @TODO: Refine types that are passed to SkeletonComponent\nexport const SkeletonComponent = ({\n borderRadius,\n height,\n width,\n ...props\n}: SkeletonProps) => {\n return (\n <Skeleton\n borderRadius={borderRadius}\n height={height}\n width={width}\n {...props}\n />\n );\n};\n\nexport default Skeleton;\n","import Skeleton from \"./Skeleton\";\n\nexport default Skeleton;\nexport * from \"./SkeletonTypes\";\nexport { Skeleton };\n"],"mappings":";AAAA,OAAO,YAAY;AACnB,OAAO,SAAS;AAoIZ;AA3HJ,IAAM,gBAAgB,CAAC,EAAE,cAAc,QAAQ,MAAM,OAAO;AAAA,EAC1D,WACE,iBAAiB,UAAU,WAAW,QAAQ,aAAa;AAC/D;AAEA,IAAM,WAAW,OAAO,GAAG,EAAE,MAAM,aAAa;AAAA;AAAA,gBAEhC,CAAC,UACb,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAQpC,CAAC,UAAU;AAAA,QAC7B,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA,QAC1D,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA,OACvD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAaa,CAAC,MAAM,EAAE,MAAM,OAAO,IAAI,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMrC,CAAC,UAAU;AAAA;AAAA,QAE3B,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA,QAC1D,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA,QACtD,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA,OAC3D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWa,CAAC,UACb,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAgBxC,CAAC,UACnB,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAiCxC,CAAC,UACf,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA,sBAGxC,CAAC,UACf,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAsB9D,IAAO,mBAAQ;;;AC5If,IAAO,gBAAQ;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as styled_components from 'styled-components';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
|
|
2
4
|
import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
|
|
3
5
|
|
|
4
|
-
|
|
6
|
+
interface SkeletonProps extends TypeBoxProps {
|
|
7
|
+
}
|
|
5
8
|
|
|
6
|
-
|
|
9
|
+
declare const Skeleton: styled_components.StyledComponent<react.ForwardRefExoticComponent<Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & react.RefAttributes<HTMLDivElement>>, styled_components.DefaultTheme, {
|
|
10
|
+
className: string;
|
|
11
|
+
}, "className">;
|
|
12
|
+
|
|
13
|
+
export { Skeleton, type SkeletonProps, Skeleton as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as styled_components from 'styled-components';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
|
|
2
4
|
import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
|
|
3
5
|
|
|
4
|
-
|
|
6
|
+
interface SkeletonProps extends TypeBoxProps {
|
|
7
|
+
}
|
|
5
8
|
|
|
6
|
-
|
|
9
|
+
declare const Skeleton: styled_components.StyledComponent<react.ForwardRefExoticComponent<Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & react.RefAttributes<HTMLDivElement>>, styled_components.DefaultTheme, {
|
|
10
|
+
className: string;
|
|
11
|
+
}, "className">;
|
|
12
|
+
|
|
13
|
+
export { Skeleton, type SkeletonProps, Skeleton as default };
|
package/dist/index.js
CHANGED
|
@@ -28,12 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
|
|
30
30
|
// src/index.ts
|
|
31
|
-
var
|
|
32
|
-
__export(
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
33
|
Skeleton: () => Skeleton_default,
|
|
34
|
-
default: () =>
|
|
34
|
+
default: () => index_default
|
|
35
35
|
});
|
|
36
|
-
module.exports = __toCommonJS(
|
|
36
|
+
module.exports = __toCommonJS(index_exports);
|
|
37
37
|
|
|
38
38
|
// src/Skeleton.tsx
|
|
39
39
|
var import_styled_components = __toESM(require("styled-components"));
|
|
@@ -146,26 +146,10 @@ var Skeleton = (0, import_styled_components.default)(import_seeds_react_box.defa
|
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
148
|
`;
|
|
149
|
-
var
|
|
150
|
-
borderRadius,
|
|
151
|
-
height,
|
|
152
|
-
width,
|
|
153
|
-
...props
|
|
154
|
-
}) => {
|
|
155
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
156
|
-
Skeleton,
|
|
157
|
-
{
|
|
158
|
-
borderRadius,
|
|
159
|
-
height,
|
|
160
|
-
width,
|
|
161
|
-
...props
|
|
162
|
-
}
|
|
163
|
-
);
|
|
164
|
-
};
|
|
165
|
-
var Skeleton_default = SkeletonComponent;
|
|
149
|
+
var Skeleton_default = Skeleton;
|
|
166
150
|
|
|
167
151
|
// src/index.ts
|
|
168
|
-
var
|
|
152
|
+
var index_default = Skeleton_default;
|
|
169
153
|
// Annotate the CommonJS export names for ESM import in node:
|
|
170
154
|
0 && (module.exports = {
|
|
171
155
|
Skeleton
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Skeleton.tsx"],"sourcesContent":["import Skeleton from \"./Skeleton\";\n\nexport default Skeleton;\nexport { Skeleton };\n","import styled from \"styled-components\";\nimport Box
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Skeleton.tsx"],"sourcesContent":["import Skeleton from \"./Skeleton\";\n\nexport default Skeleton;\nexport * from \"./SkeletonTypes\";\nexport { Skeleton };\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { SkeletonProps } from \"./SkeletonTypes\";\n\n/**\n *\n * @param borderRadius\n * @returns classname string for handling appropriate loader style depending on passed in properties\n */\n// @ts-ignore TODO: fix noImplicitAny error here. IDK why there are no types for this component\nconst SkeletonAttrs = ({ borderRadius, height, width }) => ({\n className:\n borderRadius === \"pill\" && height === width ? \"circular\" : \"linear\",\n});\n\nconst Skeleton = styled(Box).attrs(SkeletonAttrs)`\n position: relative;\n background: ${(props) =>\n props.theme.colors.container.background.decorative.neutral};\n overflow: hidden;\n &.circular {\n &:before {\n position: absolute;\n top: -25%;\n left: -25%;\n content: '';\n background-image: ${(props) => `conic-gradient(\n ${props.theme.colors.container.background.decorative.neutral} 270deg,\n ${props.theme.colors.container.border.decorative.neutral} 300deg\n );`};\n height: 150%;\n width: 150%;\n animation: SkeletonRotate 2s infinite linear;\n }\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n content: '';\n height: calc(100% - 8px);\n width: calc(100% - 8px);\n background: ${(p) => p.theme.colors.app.background.base};\n border-radius: 50%;\n }\n }\n &.linear {\n position: relative;\n background-image: ${(props) => `linear-gradient(\n 288deg,\n ${props.theme.colors.container.background.decorative.neutral} 32%,\n ${props.theme.colors.container.border.decorative.neutral},\n ${props.theme.colors.container.background.decorative.neutral} 68%\n );`}\n background-size: 400%;\n background-repeat: no-repeat;\n animation: SkeletonShimmer 2s linear infinite reverse;\n overflow: hidden;\n &:after {\n position: absolute;\n bottom: 0;\n content: \"\";\n height: calc(100% - 4px);\n width: 100%;\n background: ${(props) =>\n props.theme.colors.container.background.decorative.neutral};\n \n }\n }\n\n @media (prefers-reduced-motion) {\n &.linear,\n &.circular::before {\n animation: none;\n }\n &:before,\n &:after {\n display: none;\n }\n &.linear,\n &.circular {\n border: 1px solid ${(props) =>\n props.theme.colors.container.border.decorative.neutral};\n animation: SkeletonPulse 2s linear infinite alternate; \n }\n }\n\n @keyframes SkeletonRotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n @keyframes SkeletonRotateFade {\n 50% {\n transform: rotate(360deg);\n }\n 90% {\n opacity: 1;\n }\n 100% {\n transform: rotate(720deg);\n opacity: 0;\n }\n }\n\n @keyframes SkeletonShimmer {\n 0% {\n background-position: 0% 0;\n }\n 100% {\n background-position: 100% 0;\n }\n }\n @keyframes SkeletonPulse {\n 0% {\n border-color: ${(props) =>\n props.theme.colors.container.border.decorative.neutral}FF;\n }\n 100% {\n border-color: ${(props) =>\n props.theme.colors.container.border.decorative.neutral}1A;\n }\n }\n`;\n\n// @TODO: Refine types that are passed to SkeletonComponent\nexport const SkeletonComponent = ({\n borderRadius,\n height,\n width,\n ...props\n}: SkeletonProps) => {\n return (\n <Skeleton\n borderRadius={borderRadius}\n height={height}\n width={width}\n {...props}\n />\n );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,+BAAmB;AACnB,6BAAgB;AAoIZ;AA3HJ,IAAM,gBAAgB,CAAC,EAAE,cAAc,QAAQ,MAAM,OAAO;AAAA,EAC1D,WACE,iBAAiB,UAAU,WAAW,QAAQ,aAAa;AAC/D;AAEA,IAAM,eAAW,yBAAAA,SAAO,uBAAAC,OAAG,EAAE,MAAM,aAAa;AAAA;AAAA,gBAEhC,CAAC,UACb,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAQpC,CAAC,UAAU;AAAA,QAC7B,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA,QAC1D,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA,OACvD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAaa,CAAC,MAAM,EAAE,MAAM,OAAO,IAAI,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMrC,CAAC,UAAU;AAAA;AAAA,QAE3B,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA,QAC1D,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA,QACtD,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA,OAC3D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWa,CAAC,UACb,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAgBxC,CAAC,UACnB,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAiCxC,CAAC,UACf,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA,sBAGxC,CAAC,UACf,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAsB9D,IAAO,mBAAQ;;;AD5If,IAAO,gBAAQ;","names":["styled","Box"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-skeleton",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "Seeds React Skeleton",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,9 +18,9 @@
|
|
|
18
18
|
"test:watch": "jest --watch --coverage=false"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@sproutsocial/seeds-react-theme": "
|
|
22
|
-
"@sproutsocial/seeds-react-system-props": "
|
|
23
|
-
"@sproutsocial/seeds-react-box": "
|
|
21
|
+
"@sproutsocial/seeds-react-theme": "^2.2.0",
|
|
22
|
+
"@sproutsocial/seeds-react-system-props": "^3.0.1",
|
|
23
|
+
"@sproutsocial/seeds-react-box": "^1.1.1"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@types/react": "^18.0.0",
|
package/src/Skeleton.tsx
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import styled from "styled-components";
|
|
2
|
-
import Box
|
|
2
|
+
import Box from "@sproutsocial/seeds-react-box";
|
|
3
|
+
import type { SkeletonProps } from "./SkeletonTypes";
|
|
3
4
|
|
|
4
5
|
/**
|
|
5
6
|
*
|
|
@@ -123,12 +124,12 @@ const Skeleton = styled(Box).attrs(SkeletonAttrs)`
|
|
|
123
124
|
`;
|
|
124
125
|
|
|
125
126
|
// @TODO: Refine types that are passed to SkeletonComponent
|
|
126
|
-
const SkeletonComponent = ({
|
|
127
|
+
export const SkeletonComponent = ({
|
|
127
128
|
borderRadius,
|
|
128
129
|
height,
|
|
129
130
|
width,
|
|
130
131
|
...props
|
|
131
|
-
}:
|
|
132
|
+
}: SkeletonProps) => {
|
|
132
133
|
return (
|
|
133
134
|
<Skeleton
|
|
134
135
|
borderRadius={borderRadius}
|
|
@@ -139,4 +140,4 @@ const SkeletonComponent = ({
|
|
|
139
140
|
);
|
|
140
141
|
};
|
|
141
142
|
|
|
142
|
-
export default
|
|
143
|
+
export default Skeleton;
|