@cashub/ui 0.49.0-beta.11 → 0.49.0-beta.13
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.
|
Binary file
|
|
Binary file
|
package/package.json
CHANGED
package/section/Section.js
CHANGED
|
@@ -4,105 +4,220 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
9
|
var _bgMarkerRegistry = _interopRequireDefault(require("../layout/bgMarkerRegistry"));
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
|
|
11
|
-
|
|
12
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
|
+
const Section = _ref => {
|
|
15
|
+
let {
|
|
16
|
+
backgroundReverse,
|
|
17
|
+
backgroundMarker,
|
|
18
|
+
backgroundMap,
|
|
19
|
+
border,
|
|
20
|
+
marginBottomS,
|
|
21
|
+
noMarginBottom,
|
|
22
|
+
children,
|
|
23
|
+
...rest
|
|
24
|
+
} = _ref;
|
|
25
|
+
const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
|
|
26
|
+
if (backgroundReverse) {
|
|
27
|
+
let markerStyle = '';
|
|
28
|
+
if (backgroundMarker || backgroundMap) {
|
|
29
|
+
const markerKey = theme?.bgMarkerKey || 'ember';
|
|
30
|
+
const marker = _bgMarkerRegistry.default[markerKey] || _bgMarkerRegistry.default.ember;
|
|
31
|
+
markerStyle = `
|
|
32
|
+
background-image: url(${marker.circle}), url(${marker.triangle});
|
|
33
|
+
background-repeat: no-repeat;
|
|
34
|
+
background-position: left top, right bottom;
|
|
35
|
+
background-size: 337px 312px, 166px 225px;
|
|
36
|
+
`;
|
|
37
|
+
}
|
|
38
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Outer, {
|
|
39
|
+
marginBottomS: marginBottomS,
|
|
40
|
+
noMarginBottom: noMarginBottom,
|
|
41
|
+
...rest,
|
|
42
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GlassLayer, {
|
|
43
|
+
markerStyle: markerStyle,
|
|
44
|
+
border: border
|
|
45
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentLayer, {
|
|
46
|
+
...rest,
|
|
47
|
+
children: children
|
|
48
|
+
})]
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(PlainSection, {
|
|
52
|
+
backgroundMarker: backgroundMarker,
|
|
53
|
+
backgroundMap: backgroundMap,
|
|
54
|
+
border: border,
|
|
55
|
+
marginBottomS: marginBottomS,
|
|
56
|
+
noMarginBottom: noMarginBottom,
|
|
57
|
+
...rest,
|
|
58
|
+
children: children
|
|
59
|
+
});
|
|
60
|
+
};
|
|
61
|
+
const Outer = _styledComponents.default.div`
|
|
62
|
+
position: relative;
|
|
12
63
|
border-radius: var(--border-radius);
|
|
64
|
+
margin-bottom: var(--spacing);
|
|
65
|
+
${_ref2 => {
|
|
66
|
+
let {
|
|
67
|
+
marginBottomS
|
|
68
|
+
} = _ref2;
|
|
69
|
+
return marginBottomS && 'margin-bottom: var(--spacing-s);';
|
|
70
|
+
}}
|
|
71
|
+
${_ref3 => {
|
|
72
|
+
let {
|
|
73
|
+
noMarginBottom
|
|
74
|
+
} = _ref3;
|
|
75
|
+
return noMarginBottom && 'margin-bottom: 0;';
|
|
76
|
+
}}
|
|
77
|
+
`;
|
|
78
|
+
const GlassLayer = _styledComponents.default.div`
|
|
79
|
+
position: absolute;
|
|
80
|
+
inset: 0;
|
|
81
|
+
border-radius: inherit;
|
|
82
|
+
background-color: rgba(255, 255, 255, 0.06);
|
|
83
|
+
backdrop-filter: blur(20px);
|
|
84
|
+
-webkit-backdrop-filter: blur(20px);
|
|
85
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
86
|
+
pointer-events: none;
|
|
87
|
+
${_ref4 => {
|
|
88
|
+
let {
|
|
89
|
+
markerStyle
|
|
90
|
+
} = _ref4;
|
|
91
|
+
return markerStyle;
|
|
92
|
+
}}
|
|
93
|
+
${_ref5 => {
|
|
94
|
+
let {
|
|
95
|
+
border
|
|
96
|
+
} = _ref5;
|
|
97
|
+
return border && 'border: var(--border-width) solid var(--border-color);';
|
|
98
|
+
}}
|
|
99
|
+
`;
|
|
100
|
+
const ContentLayer = _styledComponents.default.div`
|
|
101
|
+
position: relative;
|
|
13
102
|
color: var(--font-on-background);
|
|
14
103
|
padding: var(--spacing);
|
|
15
|
-
|
|
16
|
-
${_ref => {
|
|
104
|
+
${_ref6 => {
|
|
17
105
|
let {
|
|
18
|
-
|
|
19
|
-
} =
|
|
20
|
-
return
|
|
21
|
-
position: relative;
|
|
22
|
-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
23
|
-
|
|
24
|
-
&::before {
|
|
25
|
-
content: '';
|
|
26
|
-
position: absolute;
|
|
27
|
-
inset: 0;
|
|
28
|
-
background-color: rgba(255, 255, 255, 0.06);
|
|
29
|
-
backdrop-filter: blur(20px);
|
|
30
|
-
-webkit-backdrop-filter: blur(20px);
|
|
31
|
-
border-radius: inherit;
|
|
32
|
-
z-index: -1;
|
|
33
|
-
pointer-events: none;
|
|
34
|
-
}
|
|
35
|
-
`;
|
|
106
|
+
paddingS
|
|
107
|
+
} = _ref6;
|
|
108
|
+
return paddingS && 'padding: var(--spacing-s);';
|
|
36
109
|
}}
|
|
37
|
-
${
|
|
110
|
+
${_ref7 => {
|
|
111
|
+
let {
|
|
112
|
+
paddingXS
|
|
113
|
+
} = _ref7;
|
|
114
|
+
return paddingXS && 'padding: var(--spacing-xs);';
|
|
115
|
+
}}
|
|
116
|
+
${_ref8 => {
|
|
117
|
+
let {
|
|
118
|
+
noPadding
|
|
119
|
+
} = _ref8;
|
|
120
|
+
return noPadding && 'padding: 0;';
|
|
121
|
+
}}
|
|
122
|
+
${_ref9 => {
|
|
123
|
+
let {
|
|
124
|
+
noPaddingX
|
|
125
|
+
} = _ref9;
|
|
126
|
+
return noPaddingX && 'padding-left: 0; padding-right: 0;';
|
|
127
|
+
}}
|
|
128
|
+
${_ref10 => {
|
|
129
|
+
let {
|
|
130
|
+
noPaddingTop
|
|
131
|
+
} = _ref10;
|
|
132
|
+
return noPaddingTop && 'padding-top: 0;';
|
|
133
|
+
}}
|
|
134
|
+
${_ref11 => {
|
|
135
|
+
let {
|
|
136
|
+
noPaddingBottom
|
|
137
|
+
} = _ref11;
|
|
138
|
+
return noPaddingBottom && 'padding-bottom: 0;';
|
|
139
|
+
}}
|
|
140
|
+
${_ref12 => {
|
|
141
|
+
let {
|
|
142
|
+
fullHeight
|
|
143
|
+
} = _ref12;
|
|
144
|
+
return fullHeight && 'height: 100%;';
|
|
145
|
+
}}
|
|
146
|
+
`;
|
|
147
|
+
const PlainSection = _styledComponents.default.div`
|
|
148
|
+
background: var(--color-background1);
|
|
149
|
+
border-radius: var(--border-radius);
|
|
150
|
+
color: var(--font-on-background);
|
|
151
|
+
padding: var(--spacing);
|
|
152
|
+
margin-bottom: var(--spacing);
|
|
153
|
+
${_ref13 => {
|
|
38
154
|
let {
|
|
39
155
|
paddingS
|
|
40
|
-
} =
|
|
156
|
+
} = _ref13;
|
|
41
157
|
return paddingS && 'padding: var(--spacing-s);';
|
|
42
158
|
}}
|
|
43
|
-
${
|
|
159
|
+
${_ref14 => {
|
|
44
160
|
let {
|
|
45
161
|
paddingXS
|
|
46
|
-
} =
|
|
162
|
+
} = _ref14;
|
|
47
163
|
return paddingXS && 'padding: var(--spacing-xs);';
|
|
48
164
|
}}
|
|
49
|
-
${
|
|
165
|
+
${_ref15 => {
|
|
50
166
|
let {
|
|
51
167
|
noPadding
|
|
52
|
-
} =
|
|
168
|
+
} = _ref15;
|
|
53
169
|
return noPadding && 'padding: 0;';
|
|
54
170
|
}}
|
|
55
|
-
${
|
|
171
|
+
${_ref16 => {
|
|
56
172
|
let {
|
|
57
173
|
noPadding,
|
|
58
|
-
backgroundReverse,
|
|
59
174
|
backgroundMarker,
|
|
60
175
|
backgroundMap
|
|
61
|
-
} =
|
|
62
|
-
return noPadding && !
|
|
176
|
+
} = _ref16;
|
|
177
|
+
return noPadding && !backgroundMarker && !backgroundMap && 'background: transparent;';
|
|
63
178
|
}}
|
|
64
|
-
${
|
|
179
|
+
${_ref17 => {
|
|
65
180
|
let {
|
|
66
181
|
noPaddingX
|
|
67
|
-
} =
|
|
182
|
+
} = _ref17;
|
|
68
183
|
return noPaddingX && 'padding-left: 0; padding-right: 0;';
|
|
69
184
|
}}
|
|
70
|
-
${
|
|
185
|
+
${_ref18 => {
|
|
71
186
|
let {
|
|
72
187
|
noPaddingTop
|
|
73
|
-
} =
|
|
188
|
+
} = _ref18;
|
|
74
189
|
return noPaddingTop && 'padding-top: 0;';
|
|
75
190
|
}}
|
|
76
|
-
${
|
|
191
|
+
${_ref19 => {
|
|
77
192
|
let {
|
|
78
193
|
noPaddingBottom
|
|
79
|
-
} =
|
|
194
|
+
} = _ref19;
|
|
80
195
|
return noPaddingBottom && 'padding-bottom: 0;';
|
|
81
196
|
}}
|
|
82
|
-
${
|
|
197
|
+
${_ref20 => {
|
|
83
198
|
let {
|
|
84
199
|
marginBottomS
|
|
85
|
-
} =
|
|
200
|
+
} = _ref20;
|
|
86
201
|
return marginBottomS && 'margin-bottom: var(--spacing-s);';
|
|
87
202
|
}}
|
|
88
|
-
${
|
|
203
|
+
${_ref21 => {
|
|
89
204
|
let {
|
|
90
205
|
noMarginBottom
|
|
91
|
-
} =
|
|
206
|
+
} = _ref21;
|
|
92
207
|
return noMarginBottom && 'margin-bottom: 0;';
|
|
93
208
|
}}
|
|
94
|
-
${
|
|
209
|
+
${_ref22 => {
|
|
95
210
|
let {
|
|
96
211
|
fullHeight
|
|
97
|
-
} =
|
|
212
|
+
} = _ref22;
|
|
98
213
|
return fullHeight && 'height: calc(100% - var(--spacing));';
|
|
99
214
|
}}
|
|
100
|
-
${
|
|
215
|
+
${_ref23 => {
|
|
101
216
|
let {
|
|
102
217
|
backgroundMarker,
|
|
103
218
|
backgroundMap,
|
|
104
219
|
theme
|
|
105
|
-
} =
|
|
220
|
+
} = _ref23;
|
|
106
221
|
if (!backgroundMarker && !backgroundMap) return '';
|
|
107
222
|
const markerKey = theme?.bgMarkerKey || 'ember';
|
|
108
223
|
const marker = _bgMarkerRegistry.default[markerKey] || _bgMarkerRegistry.default.ember;
|
|
@@ -113,16 +228,16 @@ const Section = _styledComponents.default.div`
|
|
|
113
228
|
background-size: 337px 312px, 166px 225px;
|
|
114
229
|
`;
|
|
115
230
|
}}
|
|
116
|
-
${
|
|
231
|
+
${_ref24 => {
|
|
117
232
|
let {
|
|
118
233
|
border
|
|
119
|
-
} =
|
|
234
|
+
} = _ref24;
|
|
120
235
|
return border && 'border: var(--border-width) solid var(--border-color);';
|
|
121
236
|
}}
|
|
122
|
-
${
|
|
237
|
+
${_ref25 => {
|
|
123
238
|
let {
|
|
124
239
|
checkboxGroup
|
|
125
|
-
} =
|
|
240
|
+
} = _ref25;
|
|
126
241
|
return checkboxGroup && `
|
|
127
242
|
background: transparent;
|
|
128
243
|
width: 50%;
|