@sproutsocial/seeds-react-switch 1.0.0
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/dist/index.d.mts +25 -0
- package/dist/index.d.ts +25 -0
- package/dist/index.js +208 -0
- package/dist/index.mjs +171 -0
- package/package.json +35 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { TypeStyledComponentsCommonProps, TypeColorSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps } from '@sproutsocial/seeds-react-system-props';
|
|
3
|
+
|
|
4
|
+
interface TypeSwitchProps extends Omit<React.ComponentPropsWithoutRef<"button">, "color" | "onClick">, TypeStyledComponentsCommonProps, TypeColorSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps {
|
|
5
|
+
onClick: (e: React.SyntheticEvent<HTMLButtonElement>, checked: boolean) => void;
|
|
6
|
+
checked: boolean;
|
|
7
|
+
loading?: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* @link https://seeds.sproutsocial.com/components/switch/
|
|
13
|
+
*
|
|
14
|
+
* Switch should always have an accessible label. Use aria-label, aria-labelledby or a `Label` component.
|
|
15
|
+
* The accessible label should not change when the checked state changes.
|
|
16
|
+
* The component uses role="switch" and the `checked` prop will be used to set the aria-checked attribute.
|
|
17
|
+
*
|
|
18
|
+
* @see https://www.w3.org/WAI/ARIA/apg/patterns/switch/
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* <Switch checked={true} onClick={_onClick} aria-label="Switch Example" />
|
|
22
|
+
*/
|
|
23
|
+
declare const Switch: ({ onClick, loading, checked, disabled, ...rest }: TypeSwitchProps) => React.JSX.Element;
|
|
24
|
+
|
|
25
|
+
export { Switch, type TypeSwitchProps, Switch as default };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { TypeStyledComponentsCommonProps, TypeColorSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps } from '@sproutsocial/seeds-react-system-props';
|
|
3
|
+
|
|
4
|
+
interface TypeSwitchProps extends Omit<React.ComponentPropsWithoutRef<"button">, "color" | "onClick">, TypeStyledComponentsCommonProps, TypeColorSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps {
|
|
5
|
+
onClick: (e: React.SyntheticEvent<HTMLButtonElement>, checked: boolean) => void;
|
|
6
|
+
checked: boolean;
|
|
7
|
+
loading?: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* @link https://seeds.sproutsocial.com/components/switch/
|
|
13
|
+
*
|
|
14
|
+
* Switch should always have an accessible label. Use aria-label, aria-labelledby or a `Label` component.
|
|
15
|
+
* The accessible label should not change when the checked state changes.
|
|
16
|
+
* The component uses role="switch" and the `checked` prop will be used to set the aria-checked attribute.
|
|
17
|
+
*
|
|
18
|
+
* @see https://www.w3.org/WAI/ARIA/apg/patterns/switch/
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* <Switch checked={true} onClick={_onClick} aria-label="Switch Example" />
|
|
22
|
+
*/
|
|
23
|
+
declare const Switch: ({ onClick, loading, checked, disabled, ...rest }: TypeSwitchProps) => React.JSX.Element;
|
|
24
|
+
|
|
25
|
+
export { Switch, type TypeSwitchProps, Switch as default };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/index.ts
|
|
31
|
+
var src_exports = {};
|
|
32
|
+
__export(src_exports, {
|
|
33
|
+
Switch: () => Switch_default,
|
|
34
|
+
default: () => src_default
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(src_exports);
|
|
37
|
+
|
|
38
|
+
// src/Switch.tsx
|
|
39
|
+
var React = __toESM(require("react"));
|
|
40
|
+
var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
|
|
41
|
+
|
|
42
|
+
// src/styles.ts
|
|
43
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
44
|
+
var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
|
|
45
|
+
var import_styled_system = require("styled-system");
|
|
46
|
+
var loadingKeyFrame = import_styled_components.keyframes`
|
|
47
|
+
0% {
|
|
48
|
+
transform: rotate(0deg);
|
|
49
|
+
}
|
|
50
|
+
100% {
|
|
51
|
+
transform: rotate(360deg);
|
|
52
|
+
}
|
|
53
|
+
`;
|
|
54
|
+
var StyledSwitchButton = import_styled_components.default.button`
|
|
55
|
+
/* Base styles for Switch */
|
|
56
|
+
position: relative;
|
|
57
|
+
display: inline-flex;
|
|
58
|
+
align-self: center;
|
|
59
|
+
width: 40px;
|
|
60
|
+
height: 24px;
|
|
61
|
+
margin: 0;
|
|
62
|
+
padding: ${({ theme }) => theme.space[100]} ${({ theme }) => theme.space[200]};
|
|
63
|
+
vertical-align: middle;
|
|
64
|
+
appearance: none;
|
|
65
|
+
background-color: ${({ theme }) => theme.colors.form.background.base};
|
|
66
|
+
border-radius: 16px;
|
|
67
|
+
outline: none;
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
transition: background-color ${({ theme }) => theme.duration.fast}
|
|
70
|
+
${({ theme }) => theme.easing.ease_inout};
|
|
71
|
+
border: 1px solid ${({ theme }) => theme.colors.form.border.base};
|
|
72
|
+
white-space: nowrap;
|
|
73
|
+
overflow: hidden;
|
|
74
|
+
|
|
75
|
+
/* Mixin for styled focus ring */
|
|
76
|
+
&:focus {
|
|
77
|
+
${import_seeds_react_mixins.focusRing}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* Base styles for circle element */
|
|
81
|
+
&[aria-checked] {
|
|
82
|
+
&::after {
|
|
83
|
+
display: block;
|
|
84
|
+
width: 16px;
|
|
85
|
+
height: 16px;
|
|
86
|
+
border-radius: 50%;
|
|
87
|
+
content: "";
|
|
88
|
+
transition: transform ${({ theme }) => theme.duration.fast}
|
|
89
|
+
${({ theme }) => theme.easing.ease_inout};
|
|
90
|
+
}
|
|
91
|
+
&.loading {
|
|
92
|
+
cursor: not-allowed;
|
|
93
|
+
pointer-events: none;
|
|
94
|
+
background-size: contain;
|
|
95
|
+
background-color: ${({ theme }) => theme.colors.form.background.base};
|
|
96
|
+
&::after {
|
|
97
|
+
position: absolute;
|
|
98
|
+
box-sizing: content-box;
|
|
99
|
+
width: 8px;
|
|
100
|
+
height: 8px;
|
|
101
|
+
border-radius: ${({ theme }) => theme.radii.pill};
|
|
102
|
+
border: 3px dotted ${({ theme }) => theme.colors.icon.base};
|
|
103
|
+
background-color: transparent;
|
|
104
|
+
animation: ${loadingKeyFrame} 2s linear infinite;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
/* Checked State */
|
|
109
|
+
&[aria-checked="true"] {
|
|
110
|
+
color: ${({ theme }) => theme.colors.text.body};
|
|
111
|
+
text-align: left;
|
|
112
|
+
border-color: ${({ theme }) => theme.colors.form.border.selected};
|
|
113
|
+
background-color: ${({ theme }) => theme.colors.form.background.selected};
|
|
114
|
+
.Icon {
|
|
115
|
+
position: absolute;
|
|
116
|
+
top: 50%;
|
|
117
|
+
left: 4px;
|
|
118
|
+
transform: translate(0, -50%);
|
|
119
|
+
color: ${({ theme }) => theme.colors.icon.inverse};
|
|
120
|
+
}
|
|
121
|
+
&::after {
|
|
122
|
+
background-color: ${({ theme }) => theme.colors.icon.inverse};
|
|
123
|
+
opacity: 1;
|
|
124
|
+
transform: translate(100%, 6%);
|
|
125
|
+
}
|
|
126
|
+
&.loading::after {
|
|
127
|
+
top: 4px;
|
|
128
|
+
right: 5px;
|
|
129
|
+
}
|
|
130
|
+
&:hover,
|
|
131
|
+
&:focus {
|
|
132
|
+
&::after {
|
|
133
|
+
transform: translate(90%, 6%);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
/* Unchecked State */
|
|
138
|
+
&[aria-checked="false"] {
|
|
139
|
+
&::after {
|
|
140
|
+
background-color: ${({ theme }) => theme.colors.icon.base};
|
|
141
|
+
opacity: 0.64;
|
|
142
|
+
transform: translate(0%, 6%);
|
|
143
|
+
}
|
|
144
|
+
&.loading::after {
|
|
145
|
+
top: 4px;
|
|
146
|
+
left: 5px;
|
|
147
|
+
}
|
|
148
|
+
&:hover,
|
|
149
|
+
&:focus {
|
|
150
|
+
&::after {
|
|
151
|
+
transform: translate(10%, 6%);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/* Disabled State Styles */
|
|
157
|
+
&:disabled {
|
|
158
|
+
opacity: 0.4;
|
|
159
|
+
pointer-events: none;
|
|
160
|
+
cursor: not-allowed;
|
|
161
|
+
&[aria-checked="true"] {
|
|
162
|
+
&:hover,
|
|
163
|
+
&:focus {
|
|
164
|
+
background-color: ${({ theme }) => theme.colors.container.background.selected};
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
${import_styled_system.color}
|
|
170
|
+
${import_styled_system.layout}
|
|
171
|
+
${import_styled_system.space}
|
|
172
|
+
`;
|
|
173
|
+
|
|
174
|
+
// src/Switch.tsx
|
|
175
|
+
var Switch = ({
|
|
176
|
+
onClick,
|
|
177
|
+
loading = false,
|
|
178
|
+
checked,
|
|
179
|
+
disabled = false,
|
|
180
|
+
...rest
|
|
181
|
+
}) => {
|
|
182
|
+
const handleClick = (e) => {
|
|
183
|
+
if (!disabled) {
|
|
184
|
+
onClick(e, !checked);
|
|
185
|
+
}
|
|
186
|
+
};
|
|
187
|
+
return /* @__PURE__ */ React.createElement(
|
|
188
|
+
StyledSwitchButton,
|
|
189
|
+
{
|
|
190
|
+
type: "button",
|
|
191
|
+
role: "switch",
|
|
192
|
+
"aria-checked": checked,
|
|
193
|
+
disabled,
|
|
194
|
+
onClick: handleClick,
|
|
195
|
+
className: loading ? "loading" : "",
|
|
196
|
+
...rest
|
|
197
|
+
},
|
|
198
|
+
checked ? /* @__PURE__ */ React.createElement(import_seeds_react_icon.default, { "aria-hidden": true, size: "mini", name: "check-solid" }) : null
|
|
199
|
+
);
|
|
200
|
+
};
|
|
201
|
+
var Switch_default = Switch;
|
|
202
|
+
|
|
203
|
+
// src/index.ts
|
|
204
|
+
var src_default = Switch_default;
|
|
205
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
206
|
+
0 && (module.exports = {
|
|
207
|
+
Switch
|
|
208
|
+
});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
// src/Switch.tsx
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import Icon from "@sproutsocial/seeds-react-icon";
|
|
4
|
+
|
|
5
|
+
// src/styles.ts
|
|
6
|
+
import styled, { keyframes } from "styled-components";
|
|
7
|
+
import { focusRing } from "@sproutsocial/seeds-react-mixins";
|
|
8
|
+
import { color, layout, space } from "styled-system";
|
|
9
|
+
var loadingKeyFrame = keyframes`
|
|
10
|
+
0% {
|
|
11
|
+
transform: rotate(0deg);
|
|
12
|
+
}
|
|
13
|
+
100% {
|
|
14
|
+
transform: rotate(360deg);
|
|
15
|
+
}
|
|
16
|
+
`;
|
|
17
|
+
var StyledSwitchButton = styled.button`
|
|
18
|
+
/* Base styles for Switch */
|
|
19
|
+
position: relative;
|
|
20
|
+
display: inline-flex;
|
|
21
|
+
align-self: center;
|
|
22
|
+
width: 40px;
|
|
23
|
+
height: 24px;
|
|
24
|
+
margin: 0;
|
|
25
|
+
padding: ${({ theme }) => theme.space[100]} ${({ theme }) => theme.space[200]};
|
|
26
|
+
vertical-align: middle;
|
|
27
|
+
appearance: none;
|
|
28
|
+
background-color: ${({ theme }) => theme.colors.form.background.base};
|
|
29
|
+
border-radius: 16px;
|
|
30
|
+
outline: none;
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
transition: background-color ${({ theme }) => theme.duration.fast}
|
|
33
|
+
${({ theme }) => theme.easing.ease_inout};
|
|
34
|
+
border: 1px solid ${({ theme }) => theme.colors.form.border.base};
|
|
35
|
+
white-space: nowrap;
|
|
36
|
+
overflow: hidden;
|
|
37
|
+
|
|
38
|
+
/* Mixin for styled focus ring */
|
|
39
|
+
&:focus {
|
|
40
|
+
${focusRing}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Base styles for circle element */
|
|
44
|
+
&[aria-checked] {
|
|
45
|
+
&::after {
|
|
46
|
+
display: block;
|
|
47
|
+
width: 16px;
|
|
48
|
+
height: 16px;
|
|
49
|
+
border-radius: 50%;
|
|
50
|
+
content: "";
|
|
51
|
+
transition: transform ${({ theme }) => theme.duration.fast}
|
|
52
|
+
${({ theme }) => theme.easing.ease_inout};
|
|
53
|
+
}
|
|
54
|
+
&.loading {
|
|
55
|
+
cursor: not-allowed;
|
|
56
|
+
pointer-events: none;
|
|
57
|
+
background-size: contain;
|
|
58
|
+
background-color: ${({ theme }) => theme.colors.form.background.base};
|
|
59
|
+
&::after {
|
|
60
|
+
position: absolute;
|
|
61
|
+
box-sizing: content-box;
|
|
62
|
+
width: 8px;
|
|
63
|
+
height: 8px;
|
|
64
|
+
border-radius: ${({ theme }) => theme.radii.pill};
|
|
65
|
+
border: 3px dotted ${({ theme }) => theme.colors.icon.base};
|
|
66
|
+
background-color: transparent;
|
|
67
|
+
animation: ${loadingKeyFrame} 2s linear infinite;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
/* Checked State */
|
|
72
|
+
&[aria-checked="true"] {
|
|
73
|
+
color: ${({ theme }) => theme.colors.text.body};
|
|
74
|
+
text-align: left;
|
|
75
|
+
border-color: ${({ theme }) => theme.colors.form.border.selected};
|
|
76
|
+
background-color: ${({ theme }) => theme.colors.form.background.selected};
|
|
77
|
+
.Icon {
|
|
78
|
+
position: absolute;
|
|
79
|
+
top: 50%;
|
|
80
|
+
left: 4px;
|
|
81
|
+
transform: translate(0, -50%);
|
|
82
|
+
color: ${({ theme }) => theme.colors.icon.inverse};
|
|
83
|
+
}
|
|
84
|
+
&::after {
|
|
85
|
+
background-color: ${({ theme }) => theme.colors.icon.inverse};
|
|
86
|
+
opacity: 1;
|
|
87
|
+
transform: translate(100%, 6%);
|
|
88
|
+
}
|
|
89
|
+
&.loading::after {
|
|
90
|
+
top: 4px;
|
|
91
|
+
right: 5px;
|
|
92
|
+
}
|
|
93
|
+
&:hover,
|
|
94
|
+
&:focus {
|
|
95
|
+
&::after {
|
|
96
|
+
transform: translate(90%, 6%);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
/* Unchecked State */
|
|
101
|
+
&[aria-checked="false"] {
|
|
102
|
+
&::after {
|
|
103
|
+
background-color: ${({ theme }) => theme.colors.icon.base};
|
|
104
|
+
opacity: 0.64;
|
|
105
|
+
transform: translate(0%, 6%);
|
|
106
|
+
}
|
|
107
|
+
&.loading::after {
|
|
108
|
+
top: 4px;
|
|
109
|
+
left: 5px;
|
|
110
|
+
}
|
|
111
|
+
&:hover,
|
|
112
|
+
&:focus {
|
|
113
|
+
&::after {
|
|
114
|
+
transform: translate(10%, 6%);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* Disabled State Styles */
|
|
120
|
+
&:disabled {
|
|
121
|
+
opacity: 0.4;
|
|
122
|
+
pointer-events: none;
|
|
123
|
+
cursor: not-allowed;
|
|
124
|
+
&[aria-checked="true"] {
|
|
125
|
+
&:hover,
|
|
126
|
+
&:focus {
|
|
127
|
+
background-color: ${({ theme }) => theme.colors.container.background.selected};
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
${color}
|
|
133
|
+
${layout}
|
|
134
|
+
${space}
|
|
135
|
+
`;
|
|
136
|
+
|
|
137
|
+
// src/Switch.tsx
|
|
138
|
+
var Switch = ({
|
|
139
|
+
onClick,
|
|
140
|
+
loading = false,
|
|
141
|
+
checked,
|
|
142
|
+
disabled = false,
|
|
143
|
+
...rest
|
|
144
|
+
}) => {
|
|
145
|
+
const handleClick = (e) => {
|
|
146
|
+
if (!disabled) {
|
|
147
|
+
onClick(e, !checked);
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
return /* @__PURE__ */ React.createElement(
|
|
151
|
+
StyledSwitchButton,
|
|
152
|
+
{
|
|
153
|
+
type: "button",
|
|
154
|
+
role: "switch",
|
|
155
|
+
"aria-checked": checked,
|
|
156
|
+
disabled,
|
|
157
|
+
onClick: handleClick,
|
|
158
|
+
className: loading ? "loading" : "",
|
|
159
|
+
...rest
|
|
160
|
+
},
|
|
161
|
+
checked ? /* @__PURE__ */ React.createElement(Icon, { "aria-hidden": true, size: "mini", name: "check-solid" }) : null
|
|
162
|
+
);
|
|
163
|
+
};
|
|
164
|
+
var Switch_default = Switch;
|
|
165
|
+
|
|
166
|
+
// src/index.ts
|
|
167
|
+
var src_default = Switch_default;
|
|
168
|
+
export {
|
|
169
|
+
Switch_default as Switch,
|
|
170
|
+
src_default as default
|
|
171
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@sproutsocial/seeds-react-switch",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Seeds React Switch",
|
|
5
|
+
"author": "Sprout Social, Inc.",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"main": "dist/index.js",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist"
|
|
11
|
+
],
|
|
12
|
+
"scripts": {
|
|
13
|
+
"build": "tsup"
|
|
14
|
+
},
|
|
15
|
+
"dependencies": {
|
|
16
|
+
"styled-system": "^5.1.5",
|
|
17
|
+
"@sproutsocial/seeds-react-mixins": "^2.0.1",
|
|
18
|
+
"@sproutsocial/seeds-react-system-props": "^2.1.0",
|
|
19
|
+
"@sproutsocial/seeds-react-icon": "^1.0.0"
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"@types/react": "^17.0.0",
|
|
23
|
+
"@types/styled-components": "^5.1.26",
|
|
24
|
+
"@sproutsocial/eslint-config-seeds": "*",
|
|
25
|
+
"react": "^17.0.2",
|
|
26
|
+
"styled-components": "^5.2.3",
|
|
27
|
+
"typescript": "^5.1.6"
|
|
28
|
+
},
|
|
29
|
+
"peerDependencies": {
|
|
30
|
+
"styled-components": "^5.2.3"
|
|
31
|
+
},
|
|
32
|
+
"engines": {
|
|
33
|
+
"node": ">=18"
|
|
34
|
+
}
|
|
35
|
+
}
|