@elliemae/ds-dialog 2.2.0-alpha.1 → 3.0.0-next.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.
Files changed (4) hide show
  1. package/cjs/styles.js +19 -43
  2. package/esm/styles.js +14 -38
  3. package/package.json +3 -3
  4. package/types/styles.d.ts +11 -11
package/cjs/styles.js CHANGED
@@ -3,9 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
- var styled = require('styled-components');
7
- var dsSystem = require('@elliemae/ds-system');
8
- var styledComponents = require('@xstyled/styled-components');
6
+ var styled = require('@xstyled/styled-components');
9
7
  var utils = require('./utils.js');
10
8
 
11
9
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -13,24 +11,20 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
13
11
  var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
14
12
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
15
13
 
16
- var _templateObject;
17
- const FixedBody = dsSystem.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n body {\n overflow: hidden;\n \n ", "\n }\n"])), _ref => {
14
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
15
+ const FixedBody = styled.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n body {\n overflow: hidden;\n \n ", "\n }\n"])), _ref => {
18
16
  let {
19
17
  isBodyOverflow
20
18
  } = _ref;
21
19
  return isBodyOverflow ? "padding-right: 15px !important;" : "";
22
20
  });
23
- const StyledDialogBackground = /*#__PURE__*/styled__default["default"].div.withConfig({
24
- componentId: "sc-106vqwv-0"
25
- })(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;z-index:", ";"], _ref2 => {
21
+ const StyledDialogBackground = styled__default["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n position: fixed;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n background: rgba(37, 41, 47, 50%);\n overflow-y: auto;\n z-index: ", ";\n"])), _ref2 => {
26
22
  let {
27
23
  zIndex
28
24
  } = _ref2;
29
25
  return zIndex;
30
26
  });
31
- const StyledDialogContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
32
- componentId: "sc-106vqwv-1"
33
- })(["height:fit-content;position:absolute;top:0;bottom:0;left:0;right:0;margin:", ";width:", ";min-width:300px;box-shadow:0 10px 20px 0 ", ";background:", ";overflow-y:auto;", " &:focus{outline:none;}"], _ref3 => {
27
+ const StyledDialogContainer = styled__default["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n height: fit-content;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: ", ";\n width: ", ";\n min-width: 300px;\n box-shadow: 0 10px 20px 0 ", ";\n background: ", ";\n overflow-y: auto;\n ", "\n &:focus {\n outline: none;\n }\n"])), _ref3 => {
34
28
  let {
35
29
  centered
36
30
  } = _ref3;
@@ -50,21 +44,15 @@ const StyledDialogContainer = /*#__PURE__*/styled__default["default"].div.withCo
50
44
  theme
51
45
  } = _ref6;
52
46
  return theme.colors.neutral['000'];
53
- }, styledComponents.space);
54
- const DSDialogTitle = /*#__PURE__*/styled__default["default"].h3.withConfig({
55
- componentId: "sc-106vqwv-2"
56
- })(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;"], _ref7 => {
47
+ }, styled.space);
48
+ const DSDialogTitle = styled__default["default"].h3(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n font-size: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 0;\n"])), _ref7 => {
57
49
  let {
58
50
  theme
59
51
  } = _ref7;
60
52
  return theme.fontSizes.title[700];
61
53
  });
62
- const DSDialogAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
63
- componentId: "sc-106vqwv-3"
64
- })([""]);
65
- const DSDialogHeader = /*#__PURE__*/styled__default["default"].div.withConfig({
66
- componentId: "sc-106vqwv-4"
67
- })(["display:grid;align-items:center;grid-auto-flow:column;min-height:", ";padding:10px ", ";& ", " + ", "{align-self:flex-start;justify-self:flex-end;}& ", ":only-child{justify-self:flex-end;}", ""], _ref8 => {
54
+ const DSDialogAddon = styled__default["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"]([""])));
55
+ const DSDialogHeader = styled__default["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n display: grid;\n align-items: center;\n grid-auto-flow: column;\n min-height: ", ";\n padding: 10px ", ";\n & ", " + ", " {\n align-self: flex-start;\n justify-self: flex-end;\n }\n & ", ":only-child {\n justify-self: flex-end;\n }\n ", "\n"])), _ref8 => {
68
56
  let {
69
57
  theme
70
58
  } = _ref8;
@@ -74,47 +62,35 @@ const DSDialogHeader = /*#__PURE__*/styled__default["default"].div.withConfig({
74
62
  theme
75
63
  } = _ref9;
76
64
  return theme.space.xs;
77
- }, DSDialogTitle, DSDialogAddon, DSDialogAddon, styledComponents.space);
78
- const DSDialogSeparator = /*#__PURE__*/styled__default["default"].hr.attrs(() => ({
65
+ }, DSDialogTitle, DSDialogAddon, DSDialogAddon, styled.space);
66
+ const DSDialogSeparator = styled__default["default"].hr.attrs(() => ({
79
67
  'aria-hidden': true
80
- })).withConfig({
81
- componentId: "sc-106vqwv-5"
82
- })(["margin:0;border-top:1px solid ", ";"], _ref10 => {
68
+ }))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n margin: 0;\n border-top: 1px solid ", ";\n"])), _ref10 => {
83
69
  let {
84
70
  theme
85
71
  } = _ref10;
86
72
  return theme.colors.neutral['080'];
87
73
  });
88
- const DSDialogBody = /*#__PURE__*/styled__default["default"].div.withConfig({
89
- componentId: "sc-106vqwv-6"
90
- })(["padding:", ";overflow-y:auto;", " ", " ", " ", ""], _ref11 => {
74
+ const DSDialogBody = styled__default["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n padding: ", ";\n overflow-y: auto;\n ", "\n ", "\n ", "\n ", "\n"])), _ref11 => {
91
75
  let {
92
76
  theme
93
77
  } = _ref11;
94
78
  return theme.space.xs;
95
- }, styledComponents.layout, styledComponents.space, styledComponents.flexboxes, styledComponents.sizing);
96
- const DSDialogPrimaryMessage = /*#__PURE__*/styled__default["default"].h3.withConfig({
97
- componentId: "sc-106vqwv-7"
98
- })(["margin:0;"]);
99
- const DSDialogSecondaryMessage = /*#__PURE__*/styled__default["default"].p.withConfig({
100
- componentId: "sc-106vqwv-8"
101
- })(["margin:0;color:", ";"], _ref12 => {
79
+ }, styled.layout, styled.space, styled.flexboxes, styled.sizing);
80
+ const DSDialogPrimaryMessage = styled__default["default"].h3(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default["default"](["\n margin: 0;\n"])));
81
+ const DSDialogSecondaryMessage = styled__default["default"].p(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default["default"](["\n margin: 0;\n color: ", ";\n"])), _ref12 => {
102
82
  let {
103
83
  theme
104
84
  } = _ref12;
105
85
  return theme.colors.neutral[500];
106
86
  });
107
- const DSDialogDefaultLayout = /*#__PURE__*/styled__default["default"].div.withConfig({
108
- componentId: "sc-106vqwv-9"
109
- })(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref13 => {
87
+ const DSDialogDefaultLayout = styled__default["default"].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default["default"](["\n display: grid;\n grid-auto-flow: row;\n justify-items: center;\n align-items: center;\n grid-gap: ", ";\n\n ", " {\n text-align: center;\n }\n"])), _ref13 => {
110
88
  let {
111
89
  theme
112
90
  } = _ref13;
113
91
  return theme.space.xxs;
114
92
  }, DSDialogSecondaryMessage);
115
- const DSDialogFooter = /*#__PURE__*/styled__default["default"].div.withConfig({
116
- componentId: "sc-106vqwv-10"
117
- })(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", " ", ""], _ref14 => {
93
+ const DSDialogFooter = styled__default["default"].div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default["default"](["\n display: grid;\n grid-auto-flow: column;\n align-items: center;\n justify-content: flex-end;\n grid-gap: ", ";\n min-height: ", ";\n padding: 0 ", ";\n ", "\n ", "\n ", "\n"])), _ref14 => {
118
94
  let {
119
95
  theme
120
96
  } = _ref14;
@@ -129,7 +105,7 @@ const DSDialogFooter = /*#__PURE__*/styled__default["default"].div.withConfig({
129
105
  theme
130
106
  } = _ref16;
131
107
  return theme.space.xs;
132
- }, styledComponents.space, styledComponents.flexboxes, styledComponents.sizing);
108
+ }, styled.space, styled.flexboxes, styled.sizing);
133
109
 
134
110
  exports.DSDialogAddon = DSDialogAddon;
135
111
  exports.DSDialogBody = DSDialogBody;
package/esm/styles.js CHANGED
@@ -1,27 +1,21 @@
1
1
  import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
- import styled from 'styled-components';
3
- import { createGlobalStyle } from '@elliemae/ds-system';
4
- import { space, layout, flexboxes, sizing } from '@xstyled/styled-components';
2
+ import styled, { createGlobalStyle, space, layout, flexboxes, sizing } from '@xstyled/styled-components';
5
3
  import { allSizes } from './utils.js';
6
4
 
7
- var _templateObject;
5
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
8
6
  const FixedBody = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n body {\n overflow: hidden;\n \n ", "\n }\n"])), _ref => {
9
7
  let {
10
8
  isBodyOverflow
11
9
  } = _ref;
12
10
  return isBodyOverflow ? "padding-right: 15px !important;" : "";
13
11
  });
14
- const StyledDialogBackground = /*#__PURE__*/styled.div.withConfig({
15
- componentId: "sc-106vqwv-0"
16
- })(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;z-index:", ";"], _ref2 => {
12
+ const StyledDialogBackground = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: fixed;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n background: rgba(37, 41, 47, 50%);\n overflow-y: auto;\n z-index: ", ";\n"])), _ref2 => {
17
13
  let {
18
14
  zIndex
19
15
  } = _ref2;
20
16
  return zIndex;
21
17
  });
22
- const StyledDialogContainer = /*#__PURE__*/styled.div.withConfig({
23
- componentId: "sc-106vqwv-1"
24
- })(["height:fit-content;position:absolute;top:0;bottom:0;left:0;right:0;margin:", ";width:", ";min-width:300px;box-shadow:0 10px 20px 0 ", ";background:", ";overflow-y:auto;", " &:focus{outline:none;}"], _ref3 => {
18
+ const StyledDialogContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n height: fit-content;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: ", ";\n width: ", ";\n min-width: 300px;\n box-shadow: 0 10px 20px 0 ", ";\n background: ", ";\n overflow-y: auto;\n ", "\n &:focus {\n outline: none;\n }\n"])), _ref3 => {
25
19
  let {
26
20
  centered
27
21
  } = _ref3;
@@ -42,20 +36,14 @@ const StyledDialogContainer = /*#__PURE__*/styled.div.withConfig({
42
36
  } = _ref6;
43
37
  return theme.colors.neutral['000'];
44
38
  }, space);
45
- const DSDialogTitle = /*#__PURE__*/styled.h3.withConfig({
46
- componentId: "sc-106vqwv-2"
47
- })(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;"], _ref7 => {
39
+ const DSDialogTitle = styled.h3(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 0;\n"])), _ref7 => {
48
40
  let {
49
41
  theme
50
42
  } = _ref7;
51
43
  return theme.fontSizes.title[700];
52
44
  });
53
- const DSDialogAddon = /*#__PURE__*/styled.div.withConfig({
54
- componentId: "sc-106vqwv-3"
55
- })([""]);
56
- const DSDialogHeader = /*#__PURE__*/styled.div.withConfig({
57
- componentId: "sc-106vqwv-4"
58
- })(["display:grid;align-items:center;grid-auto-flow:column;min-height:", ";padding:10px ", ";& ", " + ", "{align-self:flex-start;justify-self:flex-end;}& ", ":only-child{justify-self:flex-end;}", ""], _ref8 => {
45
+ const DSDialogAddon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
46
+ const DSDialogHeader = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: grid;\n align-items: center;\n grid-auto-flow: column;\n min-height: ", ";\n padding: 10px ", ";\n & ", " + ", " {\n align-self: flex-start;\n justify-self: flex-end;\n }\n & ", ":only-child {\n justify-self: flex-end;\n }\n ", "\n"])), _ref8 => {
59
47
  let {
60
48
  theme
61
49
  } = _ref8;
@@ -66,46 +54,34 @@ const DSDialogHeader = /*#__PURE__*/styled.div.withConfig({
66
54
  } = _ref9;
67
55
  return theme.space.xs;
68
56
  }, DSDialogTitle, DSDialogAddon, DSDialogAddon, space);
69
- const DSDialogSeparator = /*#__PURE__*/styled.hr.attrs(() => ({
57
+ const DSDialogSeparator = styled.hr.attrs(() => ({
70
58
  'aria-hidden': true
71
- })).withConfig({
72
- componentId: "sc-106vqwv-5"
73
- })(["margin:0;border-top:1px solid ", ";"], _ref10 => {
59
+ }))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n margin: 0;\n border-top: 1px solid ", ";\n"])), _ref10 => {
74
60
  let {
75
61
  theme
76
62
  } = _ref10;
77
63
  return theme.colors.neutral['080'];
78
64
  });
79
- const DSDialogBody = /*#__PURE__*/styled.div.withConfig({
80
- componentId: "sc-106vqwv-6"
81
- })(["padding:", ";overflow-y:auto;", " ", " ", " ", ""], _ref11 => {
65
+ const DSDialogBody = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding: ", ";\n overflow-y: auto;\n ", "\n ", "\n ", "\n ", "\n"])), _ref11 => {
82
66
  let {
83
67
  theme
84
68
  } = _ref11;
85
69
  return theme.space.xs;
86
70
  }, layout, space, flexboxes, sizing);
87
- const DSDialogPrimaryMessage = /*#__PURE__*/styled.h3.withConfig({
88
- componentId: "sc-106vqwv-7"
89
- })(["margin:0;"]);
90
- const DSDialogSecondaryMessage = /*#__PURE__*/styled.p.withConfig({
91
- componentId: "sc-106vqwv-8"
92
- })(["margin:0;color:", ";"], _ref12 => {
71
+ const DSDialogPrimaryMessage = styled.h3(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n margin: 0;\n"])));
72
+ const DSDialogSecondaryMessage = styled.p(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n margin: 0;\n color: ", ";\n"])), _ref12 => {
93
73
  let {
94
74
  theme
95
75
  } = _ref12;
96
76
  return theme.colors.neutral[500];
97
77
  });
98
- const DSDialogDefaultLayout = /*#__PURE__*/styled.div.withConfig({
99
- componentId: "sc-106vqwv-9"
100
- })(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref13 => {
78
+ const DSDialogDefaultLayout = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n display: grid;\n grid-auto-flow: row;\n justify-items: center;\n align-items: center;\n grid-gap: ", ";\n\n ", " {\n text-align: center;\n }\n"])), _ref13 => {
101
79
  let {
102
80
  theme
103
81
  } = _ref13;
104
82
  return theme.space.xxs;
105
83
  }, DSDialogSecondaryMessage);
106
- const DSDialogFooter = /*#__PURE__*/styled.div.withConfig({
107
- componentId: "sc-106vqwv-10"
108
- })(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", " ", ""], _ref14 => {
84
+ const DSDialogFooter = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n display: grid;\n grid-auto-flow: column;\n align-items: center;\n justify-content: flex-end;\n grid-gap: ", ";\n min-height: ", ";\n padding: 0 ", ";\n ", "\n ", "\n ", "\n"])), _ref14 => {
109
85
  let {
110
86
  theme
111
87
  } = _ref14;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-dialog",
3
- "version": "2.2.0-alpha.1",
3
+ "version": "3.0.0-next.1",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Dialog",
6
6
  "module": "./esm/index.js",
@@ -64,8 +64,8 @@
64
64
  "build": "node ../../scripts/build/build.js"
65
65
  },
66
66
  "dependencies": {
67
- "@elliemae/ds-props-helpers": "2.2.0-alpha.1",
68
- "@elliemae/ds-system": "2.2.0-alpha.1",
67
+ "@elliemae/ds-props-helpers": "3.0.0-next.1",
68
+ "@elliemae/ds-system": "3.0.0-next.1",
69
69
  "@xstyled/styled-components": "~3.1.1",
70
70
  "react-desc": "~4.1.3"
71
71
  },
package/types/styles.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  export declare const FixedBody: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
2
- export declare const StyledDialogBackground: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
3
- export declare const StyledDialogContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, any, never>;
4
- export declare const DSDialogTitle: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
5
- export declare const DSDialogAddon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
6
- export declare const DSDialogHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
- export declare const DSDialogSeparator: import("styled-components").StyledComponent<"hr", import("styled-components").DefaultTheme, {
2
+ export declare const StyledDialogBackground: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
3
+ export declare const StyledDialogContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, any, never>;
4
+ export declare const DSDialogTitle: import("styled-components").StyledComponent<"h3", import("@xstyled/system").Theme, {}, never>;
5
+ export declare const DSDialogAddon: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
6
+ export declare const DSDialogHeader: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
7
+ export declare const DSDialogSeparator: import("styled-components").StyledComponent<"hr", import("@xstyled/system").Theme, {
8
8
  'aria-hidden': true;
9
9
  }, "aria-hidden">;
10
- export declare const DSDialogBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
11
- export declare const DSDialogPrimaryMessage: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
12
- export declare const DSDialogSecondaryMessage: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
13
- export declare const DSDialogDefaultLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
14
- export declare const DSDialogFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
10
+ export declare const DSDialogBody: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
11
+ export declare const DSDialogPrimaryMessage: import("styled-components").StyledComponent<"h3", import("@xstyled/system").Theme, {}, never>;
12
+ export declare const DSDialogSecondaryMessage: import("styled-components").StyledComponent<"p", import("@xstyled/system").Theme, {}, never>;
13
+ export declare const DSDialogDefaultLayout: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
14
+ export declare const DSDialogFooter: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;