@sellout/ui 0.0.17 → 0.0.19

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.
Files changed (6) hide show
  1. package/build/components/Icon.d.ts +10 -4
  2. package/build/index.d.ts +21 -31
  3. package/build/index.es.js +32 -25
  4. package/build/index.js +32 -25
  5. package/package.json +3 -3
  6. package/src/components/Icon.tsx +33 -16
package/build/components/Icon.d.ts CHANGED
@@ -3,12 +3,14 @@ import { Colors } from "../Colors";
3
3
  export declare const Icons: {
4
4
  AnalyticsLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
5
5
  BellLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
6
+ BoxOfficeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
6
7
  BullHornLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
7
8
  CalendarDayLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
8
9
  CalendarStarLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
9
10
  ExportLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
10
11
  FilterLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
11
12
  HelpLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
13
+ HomeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
12
14
  mapPinLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
13
15
  MicrophoneLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
14
16
  MinusCircleLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -22,14 +24,12 @@ export declare const Icons: {
22
24
  CalendarStarSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
23
25
  CreditCardFront: import("@fortawesome/fontawesome-common-types").IconDefinition;
24
26
  FeeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
25
- HomeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
26
27
  KeySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
27
28
  LongRightArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
28
29
  ReportSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
29
30
  SortBy: import("@fortawesome/fontawesome-common-types").IconDefinition;
30
31
  UpgradeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
31
32
  AudienceRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
32
- BoxOfficeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
33
33
  CalculatorRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
34
34
  Check: import("@fortawesome/fontawesome-common-types").IconDefinition;
35
35
  Cheers: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -50,12 +50,15 @@ export declare const Icons: {
50
50
  PrintRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
51
51
  ReportRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
52
52
  SearchRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
53
+ Settings: import("@fortawesome/fontawesome-common-types").IconDefinition;
53
54
  TicketRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
54
55
  Unlock: import("@fortawesome/fontawesome-common-types").IconDefinition;
55
56
  UpArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
57
+ Update: import("@fortawesome/fontawesome-common-types").IconDefinition;
56
58
  UpgradeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
57
59
  Upload: import("@fortawesome/fontawesome-common-types").IconDefinition;
58
60
  UsersRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
61
+ SignOut: import("@fortawesome/fontawesome-common-types").IconDefinition;
59
62
  AudienceSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
60
63
  BackArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
61
64
  Bold: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -78,8 +81,10 @@ export declare const Icons: {
78
81
  HelpSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
79
82
  HomeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
80
83
  Italic: import("@fortawesome/fontawesome-common-types").IconDefinition;
84
+ Menu: import("@fortawesome/fontawesome-common-types").IconDefinition;
81
85
  MicrophoneSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
82
86
  Mobile: import("@fortawesome/fontawesome-common-types").IconDefinition;
87
+ Plus: import("@fortawesome/fontawesome-common-types").IconDefinition;
83
88
  PlusCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
84
89
  PrintSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
85
90
  ReceiptSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -94,19 +99,20 @@ export declare const Icons: {
94
99
  UsersSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
95
100
  VenueSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
96
101
  Warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
97
- Menu: import("@fortawesome/fontawesome-common-types").IconDefinition;
98
102
  Calendar: import("@fortawesome/fontawesome-common-types").IconDefinition;
99
103
  Clock: import("@fortawesome/fontawesome-common-types").IconDefinition;
100
104
  CopyRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
101
105
  Edit: import("@fortawesome/fontawesome-common-types").IconDefinition;
102
106
  EyeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
103
107
  EyeSlashRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
108
+ Help: import("@fortawesome/fontawesome-common-types").IconDefinition;
104
109
  SadTear: import("@fortawesome/fontawesome-common-types").IconDefinition;
105
110
  UserRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
106
111
  };
107
112
  export declare type IconProps = {
108
113
  icon: any;
109
114
  color?: Colors | string | null;
115
+ hoverColor?: Colors | string | null;
110
116
  onClick?: any | null;
111
117
  size?: string | number | undefined;
112
118
  position?: string;
@@ -116,4 +122,4 @@ export declare type IconProps = {
116
122
  zIndex?: number | void;
117
123
  margin?: string | number | undefined;
118
124
  };
119
- export default function Icon({ icon, color, onClick, size, top, left, right, position, zIndex, margin, }: IconProps): JSX.Element;
125
+ export default function Icon({ icon, color, hoverColor, onClick, size, top, left, right, position, zIndex, margin, }: IconProps): JSX.Element;
package/build/index.d.ts CHANGED
@@ -7,45 +7,21 @@ import Loader, { LoaderSizes } from "./components/Loader";
7
7
  import Product from "./components/Product";
8
8
  import makeEventHandler from './utils/makeEventHandler';
9
9
  declare const Icons: {
10
- AnalyticsLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
11
- BellLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
12
- BullHornLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
13
- CalendarDayLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
14
- CalendarStarLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
15
- ExportLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
16
- FilterLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
17
- HelpLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
18
- mapPinLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
19
- MicrophoneLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
20
- MinusCircleLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
21
- PlusCircleLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
22
- ReceiptLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
23
- SearchLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
24
- SortByLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
25
- UsersLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
26
- VenueLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
27
- AnalyticsSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
28
- CalendarStarSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
29
- CreditCardFront: import("@fortawesome/fontawesome-common-types").IconDefinition;
30
- FeeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
31
- HomeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
32
- KeySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
33
- LongRightArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
34
- ReportSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
35
- SortBy: import("@fortawesome/fontawesome-common-types").IconDefinition;
36
- UpgradeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
37
10
  AudienceRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
38
11
  BoxOfficeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
39
12
  CalculatorRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
13
+ CalendarStarRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
40
14
  Check: import("@fortawesome/fontawesome-common-types").IconDefinition;
41
15
  Cheers: import("@fortawesome/fontawesome-common-types").IconDefinition;
42
16
  Clipboard: import("@fortawesome/fontawesome-common-types").IconDefinition;
43
17
  CrownRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
18
+ DashboardRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
44
19
  DeleteRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
45
20
  Dollar: import("@fortawesome/fontawesome-common-types").IconDefinition;
46
21
  DownArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
47
22
  DownloadReport: import("@fortawesome/fontawesome-common-types").IconDefinition;
48
23
  Embed: import("@fortawesome/fontawesome-common-types").IconDefinition;
24
+ Export: import("@fortawesome/fontawesome-common-types").IconDefinition;
49
25
  FeeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
50
26
  FilterRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
51
27
  GlobeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -53,7 +29,9 @@ declare const Icons: {
53
29
  KeyRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
54
30
  LeftChevron: import("@fortawesome/fontawesome-common-types").IconDefinition;
55
31
  Link: import("@fortawesome/fontawesome-common-types").IconDefinition;
32
+ MicrophoneRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
56
33
  PrintRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
34
+ ReceiptRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
57
35
  ReportRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
58
36
  SearchRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
59
37
  TicketRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -62,11 +40,12 @@ declare const Icons: {
62
40
  UpgradeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
63
41
  Upload: import("@fortawesome/fontawesome-common-types").IconDefinition;
64
42
  UsersRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
43
+ VenueRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
65
44
  AudienceSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
66
45
  BackArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
67
46
  Bold: import("@fortawesome/fontawesome-common-types").IconDefinition;
68
47
  BoxOfficeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
69
- BullhornSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
48
+ Bullhorn: import("@fortawesome/fontawesome-common-types").IconDefinition;
70
49
  CalculatorSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
71
50
  CalendarDaySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
72
51
  Cancel: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -82,14 +61,12 @@ declare const Icons: {
82
61
  EnvelopeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
83
62
  EyeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
84
63
  HelpSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
85
- HomeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
86
64
  Italic: import("@fortawesome/fontawesome-common-types").IconDefinition;
87
65
  MicrophoneSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
88
66
  Mobile: import("@fortawesome/fontawesome-common-types").IconDefinition;
89
67
  PlusCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
90
68
  PrintSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
91
69
  ReceiptSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
92
- RightChevron: import("@fortawesome/fontawesome-common-types").IconDefinition;
93
70
  RightChevronCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
94
71
  SearchSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
95
72
  Sort: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -100,14 +77,27 @@ declare const Icons: {
100
77
  UsersSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
101
78
  VenueSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
102
79
  Warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
103
- Menu: import("@fortawesome/fontawesome-common-types").IconDefinition;
104
80
  Calendar: import("@fortawesome/fontawesome-common-types").IconDefinition;
105
81
  Clock: import("@fortawesome/fontawesome-common-types").IconDefinition;
106
82
  CopyRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
107
83
  Edit: import("@fortawesome/fontawesome-common-types").IconDefinition;
108
84
  EyeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
109
85
  EyeSlashRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
86
+ HelpRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
110
87
  SadTear: import("@fortawesome/fontawesome-common-types").IconDefinition;
111
88
  UserRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
89
+ CalendarDayLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
90
+ mapPinLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
91
+ MinusCircleLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
92
+ PlusCircleLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
93
+ CalendarStarSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
94
+ CreditCardFront: import("@fortawesome/fontawesome-common-types").IconDefinition;
95
+ DashboardSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
96
+ FeeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
97
+ KeySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
98
+ LongRightArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
99
+ ReportSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
100
+ SortBy: import("@fortawesome/fontawesome-common-types").IconDefinition;
101
+ UpgradeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
112
102
  };
113
103
  export { Colors, Button, ButtonTypes, ButtonStates, Counter, Icon, Icons, Input, Loader, LoaderSizes, Product, makeEventHandler };
package/build/index.es.js CHANGED
@@ -191,23 +191,30 @@ var IconEnum = {
191
191
  UserRegular: faUser$1,
192
192
  };
193
193
 
194
+ var Container = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n color: ", ";\n /* transition: all 0.2s; */\n\n &:hover {\n color: ", ";\n }\n"], ["\n color: ", ";\n /* transition: all 0.2s; */\n\n &:hover {\n color: ",
195
+ ";\n }\n"])), function (props) { return props.color; }, function (props) {
196
+ if (props.color === 'inherit')
197
+ return null;
198
+ return props.hoverColor;
199
+ });
194
200
  var Icons = IconEnum;
195
201
  function Icon(_a) {
196
- var _b = _a.icon, icon = _b === void 0 ? Icons.AudienceRegular : _b, _c = _a.color, color = _c === void 0 ? Colors.Orange : _c, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? 20 : _d, top = _a.top, left = _a.left, right = _a.right, _e = _a.position, position = _e === void 0 ? 'relative' : _e, zIndex = _a.zIndex, margin = _a.margin;
202
+ var _b = _a.icon, icon = _b === void 0 ? Icons.AudienceRegular : _b, _c = _a.color, color = _c === void 0 ? Colors.Orange : _c, _d = _a.hoverColor, hoverColor = _d === void 0 ? null : _d, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 20 : _e, top = _a.top, left = _a.left, right = _a.right, _f = _a.position, position = _f === void 0 ? 'relative' : _f, zIndex = _a.zIndex, margin = _a.margin;
197
203
  var cursor = onClick ? 'pointer' : '';
198
- return (React.createElement(FontAwesomeIcon, { icon: icon, onClick: onClick, style: {
199
- color: color,
200
- top: top,
201
- left: left,
202
- right: right,
203
- position: position,
204
- zIndex: zIndex,
205
- fontSize: size,
206
- transition: "all 0.2s",
207
- margin: margin,
208
- cursor: cursor,
209
- } }));
210
- }
204
+ return (React.createElement(Container, { color: color, hoverColor: hoverColor },
205
+ React.createElement(FontAwesomeIcon, { icon: icon, onClick: onClick, style: {
206
+ top: top,
207
+ left: left,
208
+ right: right,
209
+ position: position,
210
+ zIndex: zIndex,
211
+ fontSize: size,
212
+ transition: "all 0.2s",
213
+ margin: margin,
214
+ cursor: cursor,
215
+ } })));
216
+ }
217
+ var templateObject_1$1;
211
218
 
212
219
  var ButtonTypes;
213
220
  (function (ButtonTypes) {
@@ -217,7 +224,7 @@ var ButtonStates;
217
224
  (function (ButtonStates) {
218
225
  ButtonStates["Active"] = "Active";
219
226
  })(ButtonStates || (ButtonStates = {}));
220
- var StyledButton = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ", ";\n\n &:hover {\n cursor: ", ";\n background-color: ", ";\n }\n\n &:active {\n cursor: ", ";\n background-color: ", ";\n }\n"], ["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ",
227
+ var StyledButton = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ", ";\n\n &:hover {\n cursor: ", ";\n background-color: ", ";\n }\n\n &:active {\n cursor: ", ";\n background-color: ", ";\n }\n"], ["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ",
221
228
  ";\n\n &:hover {\n cursor: ", ";\n background-color: ",
222
229
  ";\n }\n\n &:active {\n cursor: ", ";\n background-color: ",
223
230
  ";\n }\n"])), function (props) { return (Boolean(props.margin) ? props.margin : "0px"); }, function (props) { return (Boolean(props.padding) ? props.padding : "0px"); }, function (props) {
@@ -256,9 +263,9 @@ function Button(_a) {
256
263
  })()));
257
264
  })()));
258
265
  }
259
- var templateObject_1$1, templateObject_2;
266
+ var templateObject_1$2, templateObject_2;
260
267
 
261
- var Container = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"])));
268
+ var Container$1 = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"])));
262
269
  var IconContainer = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n flex: 1;\n /* background-color: blue; */\n height: 100%;\n\n &:hover {\n cursor: ", ";\n }\n\n .svg-inline--fa {\n color: ", " !important;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n flex: 1;\n /* background-color: blue; */\n height: 100%;\n\n &:hover {\n cursor: ", ";\n }\n\n .svg-inline--fa {\n color: ",
263
270
  " !important;\n }\n"])), function (props) { return props.justify; }, function (props) { return (props.active ? "pointer" : null); }, function (props) {
264
271
  return props.active ? lighten(0.025, Colors.Orange) : null;
@@ -268,16 +275,16 @@ function Counter(_a) {
268
275
  var value = _a.value, maxValue = _a.maxValue, _b = _a.minValue, minValue = _b === void 0 ? 0 : _b, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement;
269
276
  var canDecrement = value > minValue;
270
277
  var canIncrement = Boolean(!Boolean(maxValue) || (maxValue && value < maxValue));
271
- return (React.createElement(Container, null,
278
+ return (React.createElement(Container$1, null,
272
279
  React.createElement(IconContainer, { active: canDecrement, onClick: function () { return (canDecrement ? onDecrement() : null); }, justify: "flex-start" },
273
280
  React.createElement(Icon, { icon: Icons.MinusCircleLight, color: canDecrement ? Colors.Orange : Colors.Grey5 })),
274
281
  React.createElement(Value, null, value),
275
282
  React.createElement(IconContainer, { active: canIncrement, onClick: function () { return (canIncrement ? onIncrement() : null); }, justify: "flex-end" },
276
283
  React.createElement(Icon, { icon: Icons.PlusCircleLight, color: canIncrement ? Colors.Orange : Colors.Grey5 }))));
277
284
  }
278
- var templateObject_1$2, templateObject_2$1, templateObject_3;
285
+ var templateObject_1$3, templateObject_2$1, templateObject_3;
279
286
 
280
- var Form = styled.form(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ", ";\n"], ["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ",
287
+ var Form = styled.form(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ", ";\n"], ["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ",
281
288
  ";\n"])), function (props) { return props.width; }, function (props) {
282
289
  if (props.focused)
283
290
  return Colors.Grey3;
@@ -349,11 +356,11 @@ function Input(_a) {
349
356
  return React.createElement(Spacer, null);
350
357
  })()));
351
358
  }
352
- var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6;
359
+ var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6;
353
360
 
354
- var Row = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"])), function (props) { return props.justify; });
361
+ var Row = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"])), function (props) { return props.justify; });
355
362
  var Column = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
356
- var Container$1 = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"], ["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"])), Colors.White, Colors.Grey6);
363
+ var Container$2 = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"], ["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"])), Colors.White, Colors.Grey6);
357
364
  var Title = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n font-size: 1.8rem;\n color: ", ";\n font-weight: 600;\n margin-bottom: 5px;\n"], ["\n font-size: 1.8rem;\n color: ", ";\n font-weight: 600;\n margin-bottom: 5px;\n"])), Colors.Grey1);
358
365
  var Price = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n font-size: 1.4rem;\n font-weight: 500;\n color: ", ";\n margin-bottom: 5px;\n"], ["\n font-size: 1.4rem;\n font-weight: 500;\n color: ", ";\n margin-bottom: 5px;\n"])), Colors.Grey2);
359
366
  var Subtitle = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n font-size: 1.2rem;\n font-weight: 500;\n line-height: 160%;\n color: ", ";\n"], ["\n font-size: 1.2rem;\n font-weight: 500;\n line-height: 160%;\n color: ", ";\n"])), Colors.Grey3);
@@ -374,7 +381,7 @@ function Product(_a) {
374
381
  setShowEllipsis(!showEllipsis);
375
382
  setShowMore(!showMore);
376
383
  };
377
- return (React.createElement(Container$1, null,
384
+ return (React.createElement(Container$2, null,
378
385
  React.createElement(Row, { justify: "space-between" },
379
386
  React.createElement(Column, null,
380
387
  React.createElement(Title, null, title),
@@ -393,7 +400,7 @@ function Product(_a) {
393
400
  React.createElement(ShowMore, { onClick: function () { return toggle(); } }, showMore ? "Show Less" : "Show More")));
394
401
  })()));
395
402
  }
396
- var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
403
+ var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
397
404
 
398
405
  function makeEventHandler(executeOnEvent) {
399
406
  if (executeOnEvent === void 0) { executeOnEvent = function () { }; }
package/build/index.js CHANGED
@@ -196,23 +196,30 @@ var IconEnum = {
196
196
  UserRegular: freeRegularSvgIcons.faUser,
197
197
  };
198
198
 
199
+ var Container = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n color: ", ";\n /* transition: all 0.2s; */\n\n &:hover {\n color: ", ";\n }\n"], ["\n color: ", ";\n /* transition: all 0.2s; */\n\n &:hover {\n color: ",
200
+ ";\n }\n"])), function (props) { return props.color; }, function (props) {
201
+ if (props.color === 'inherit')
202
+ return null;
203
+ return props.hoverColor;
204
+ });
199
205
  var Icons = IconEnum;
200
206
  function Icon(_a) {
201
- var _b = _a.icon, icon = _b === void 0 ? Icons.AudienceRegular : _b, _c = _a.color, color = _c === void 0 ? exports.Colors.Orange : _c, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? 20 : _d, top = _a.top, left = _a.left, right = _a.right, _e = _a.position, position = _e === void 0 ? 'relative' : _e, zIndex = _a.zIndex, margin = _a.margin;
207
+ var _b = _a.icon, icon = _b === void 0 ? Icons.AudienceRegular : _b, _c = _a.color, color = _c === void 0 ? exports.Colors.Orange : _c, _d = _a.hoverColor, hoverColor = _d === void 0 ? null : _d, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 20 : _e, top = _a.top, left = _a.left, right = _a.right, _f = _a.position, position = _f === void 0 ? 'relative' : _f, zIndex = _a.zIndex, margin = _a.margin;
202
208
  var cursor = onClick ? 'pointer' : '';
203
- return (React__default.createElement(reactFontawesome.FontAwesomeIcon, { icon: icon, onClick: onClick, style: {
204
- color: color,
205
- top: top,
206
- left: left,
207
- right: right,
208
- position: position,
209
- zIndex: zIndex,
210
- fontSize: size,
211
- transition: "all 0.2s",
212
- margin: margin,
213
- cursor: cursor,
214
- } }));
215
- }
209
+ return (React__default.createElement(Container, { color: color, hoverColor: hoverColor },
210
+ React__default.createElement(reactFontawesome.FontAwesomeIcon, { icon: icon, onClick: onClick, style: {
211
+ top: top,
212
+ left: left,
213
+ right: right,
214
+ position: position,
215
+ zIndex: zIndex,
216
+ fontSize: size,
217
+ transition: "all 0.2s",
218
+ margin: margin,
219
+ cursor: cursor,
220
+ } })));
221
+ }
222
+ var templateObject_1$1;
216
223
 
217
224
  (function (ButtonTypes) {
218
225
  ButtonTypes["Submit"] = "Submit";
@@ -220,7 +227,7 @@ function Icon(_a) {
220
227
  (function (ButtonStates) {
221
228
  ButtonStates["Active"] = "Active";
222
229
  })(exports.ButtonStates || (exports.ButtonStates = {}));
223
- var StyledButton = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ", ";\n\n &:hover {\n cursor: ", ";\n background-color: ", ";\n }\n\n &:active {\n cursor: ", ";\n background-color: ", ";\n }\n"], ["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ",
230
+ var StyledButton = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ", ";\n\n &:hover {\n cursor: ", ";\n background-color: ", ";\n }\n\n &:active {\n cursor: ", ";\n background-color: ", ";\n }\n"], ["\n position: relative;\n height: 40px;\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n justify-content: center;\n white-space: nowrap;\n text-align: center;\n border-radius: 10px;\n transition: all 0.2s;\n margin: ", ";\n padding: ", ";\n background-color: ",
224
231
  ";\n\n &:hover {\n cursor: ", ";\n background-color: ",
225
232
  ";\n }\n\n &:active {\n cursor: ", ";\n background-color: ",
226
233
  ";\n }\n"])), function (props) { return (Boolean(props.margin) ? props.margin : "0px"); }, function (props) { return (Boolean(props.padding) ? props.padding : "0px"); }, function (props) {
@@ -259,9 +266,9 @@ function Button(_a) {
259
266
  })()));
260
267
  })()));
261
268
  }
262
- var templateObject_1$1, templateObject_2;
269
+ var templateObject_1$2, templateObject_2;
263
270
 
264
- var Container = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"])));
271
+ var Container$1 = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 85px;\n min-height: 42px;\n /* background-color: red; */\n"])));
265
272
  var IconContainer = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n flex: 1;\n /* background-color: blue; */\n height: 100%;\n\n &:hover {\n cursor: ", ";\n }\n\n .svg-inline--fa {\n color: ", " !important;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n flex: 1;\n /* background-color: blue; */\n height: 100%;\n\n &:hover {\n cursor: ", ";\n }\n\n .svg-inline--fa {\n color: ",
266
273
  " !important;\n }\n"])), function (props) { return props.justify; }, function (props) { return (props.active ? "pointer" : null); }, function (props) {
267
274
  return props.active ? Polished.lighten(0.025, exports.Colors.Orange) : null;
@@ -271,16 +278,16 @@ function Counter(_a) {
271
278
  var value = _a.value, maxValue = _a.maxValue, _b = _a.minValue, minValue = _b === void 0 ? 0 : _b, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement;
272
279
  var canDecrement = value > minValue;
273
280
  var canIncrement = Boolean(!Boolean(maxValue) || (maxValue && value < maxValue));
274
- return (React__default.createElement(Container, null,
281
+ return (React__default.createElement(Container$1, null,
275
282
  React__default.createElement(IconContainer, { active: canDecrement, onClick: function () { return (canDecrement ? onDecrement() : null); }, justify: "flex-start" },
276
283
  React__default.createElement(Icon, { icon: Icons.MinusCircleLight, color: canDecrement ? exports.Colors.Orange : exports.Colors.Grey5 })),
277
284
  React__default.createElement(Value, null, value),
278
285
  React__default.createElement(IconContainer, { active: canIncrement, onClick: function () { return (canIncrement ? onIncrement() : null); }, justify: "flex-end" },
279
286
  React__default.createElement(Icon, { icon: Icons.PlusCircleLight, color: canIncrement ? exports.Colors.Orange : exports.Colors.Grey5 }))));
280
287
  }
281
- var templateObject_1$2, templateObject_2$1, templateObject_3;
288
+ var templateObject_1$3, templateObject_2$1, templateObject_3;
282
289
 
283
- var Form = styled.form(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ", ";\n"], ["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ",
290
+ var Form = styled.form(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ", ";\n"], ["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ",
284
291
  ";\n"])), function (props) { return props.width; }, function (props) {
285
292
  if (props.focused)
286
293
  return exports.Colors.Grey3;
@@ -352,11 +359,11 @@ function Input(_a) {
352
359
  return React__default.createElement(Spacer, null);
353
360
  })()));
354
361
  }
355
- var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6;
362
+ var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6;
356
363
 
357
- var Row = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"])), function (props) { return props.justify; });
364
+ var Row = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n"])), function (props) { return props.justify; });
358
365
  var Column = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
359
- var Container$1 = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"], ["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"])), exports.Colors.White, exports.Colors.Grey6);
366
+ var Container$2 = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"], ["\n background-color: ", ";\n padding: 15px;\n border-bottom: 1px solid ", ";\n"])), exports.Colors.White, exports.Colors.Grey6);
360
367
  var Title = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n font-size: 1.8rem;\n color: ", ";\n font-weight: 600;\n margin-bottom: 5px;\n"], ["\n font-size: 1.8rem;\n color: ", ";\n font-weight: 600;\n margin-bottom: 5px;\n"])), exports.Colors.Grey1);
361
368
  var Price = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n font-size: 1.4rem;\n font-weight: 500;\n color: ", ";\n margin-bottom: 5px;\n"], ["\n font-size: 1.4rem;\n font-weight: 500;\n color: ", ";\n margin-bottom: 5px;\n"])), exports.Colors.Grey2);
362
369
  var Subtitle = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n font-size: 1.2rem;\n font-weight: 500;\n line-height: 160%;\n color: ", ";\n"], ["\n font-size: 1.2rem;\n font-weight: 500;\n line-height: 160%;\n color: ", ";\n"])), exports.Colors.Grey3);
@@ -377,7 +384,7 @@ function Product(_a) {
377
384
  setShowEllipsis(!showEllipsis);
378
385
  setShowMore(!showMore);
379
386
  };
380
- return (React__default.createElement(Container$1, null,
387
+ return (React__default.createElement(Container$2, null,
381
388
  React__default.createElement(Row, { justify: "space-between" },
382
389
  React__default.createElement(Column, null,
383
390
  React__default.createElement(Title, null, title),
@@ -396,7 +403,7 @@ function Product(_a) {
396
403
  React__default.createElement(ShowMore, { onClick: function () { return toggle(); } }, showMore ? "Show Less" : "Show More")));
397
404
  })()));
398
405
  }
399
- var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
406
+ var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
400
407
 
401
408
  function makeEventHandler(executeOnEvent) {
402
409
  if (executeOnEvent === void 0) { executeOnEvent = function () { }; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sellout/ui",
3
- "version": "0.0.17",
3
+ "version": "0.0.19",
4
4
  "main": "build/index.js",
5
5
  "module": "build/index.es.js",
6
6
  "jsnext:main": "build/index.es.js",
@@ -46,12 +46,12 @@
46
46
  "@fortawesome/pro-regular-svg-icons": "^5.12.1",
47
47
  "@fortawesome/pro-solid-svg-icons": "^5.12.1",
48
48
  "@fortawesome/react-fontawesome": "^0.1.9",
49
- "@sellout/utils": "^0.0.17",
49
+ "@sellout/utils": "^0.0.19",
50
50
  "csvtojson": "^2.0.10",
51
51
  "polished": "^3.4.4",
52
52
  "react-animate-height": "^2.0.20"
53
53
  },
54
- "gitHead": "e6d1038133a82fcc73d5506b78a92e8409d879a1",
54
+ "gitHead": "2fb6b910f23a2e8f3082818f4924a91e6b24a600",
55
55
  "peerDependencies": {
56
56
  "react": "^16.13.0",
57
57
  "react-dom": "^16.13.0",
package/src/components/Icon.tsx CHANGED
@@ -2,12 +2,27 @@ import React from 'react';
2
2
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3
3
  import { Colors } from "../Colors";
4
4
  import { IconEnum } from "./Icons";
5
+ import styled from 'styled-components';
6
+
7
+
8
+ const Container = styled.div<any>`
9
+ color: ${props => props.color};
10
+ /* transition: all 0.2s; */
11
+
12
+ &:hover {
13
+ color: ${props => {
14
+ if(props.color === 'inherit') return null;
15
+ return props.hoverColor;
16
+ }};
17
+ }
18
+ `;
5
19
 
6
20
  export const Icons = IconEnum;
7
21
 
8
22
  export type IconProps = {
9
23
  icon: any;
10
24
  color?: Colors | string | null;
25
+ hoverColor?: Colors | string | null;
11
26
  onClick?: any | null;
12
27
  size?: string | number | undefined;
13
28
  position?: string;
@@ -21,6 +36,7 @@ export type IconProps = {
21
36
  export default function Icon({
22
37
  icon = Icons.AudienceRegular,
23
38
  color = Colors.Orange,
39
+ hoverColor = null,
24
40
  onClick,
25
41
  size = 20,
26
42
  top,
@@ -33,21 +49,22 @@ export default function Icon({
33
49
  const cursor: string = onClick ? 'pointer' : '';
34
50
 
35
51
  return (
36
- <FontAwesomeIcon
37
- icon={icon as any}
38
- onClick={onClick}
39
- style={{
40
- color: color as any,
41
- top,
42
- left,
43
- right,
44
- position: position as any,
45
- zIndex: zIndex as any,
46
- fontSize: size,
47
- transition: "all 0.2s",
48
- margin,
49
- cursor,
50
- }}
51
- />
52
+ <Container color={color} hoverColor={hoverColor}>
53
+ <FontAwesomeIcon
54
+ icon={icon as any}
55
+ onClick={onClick}
56
+ style={{
57
+ top,
58
+ left,
59
+ right,
60
+ position: position as any,
61
+ zIndex: zIndex as any,
62
+ fontSize: size,
63
+ transition: "all 0.2s",
64
+ margin,
65
+ cursor,
66
+ }}
67
+ />
68
+ </Container>
52
69
  );
53
70
  }