@sproutsocial/seeds-react-menu 0.1.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/.eslintrc.js +4 -0
- package/.turbo/turbo-build.log +21 -0
- package/CHANGELOG.md +46 -0
- package/dist/esm/index.js +2651 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/index.d.mts +197 -0
- package/dist/index.d.ts +197 -0
- package/dist/index.js +2670 -0
- package/dist/index.js.map +1 -0
- package/jest.config.js +12 -0
- package/package.json +50 -0
- package/src/ActionMenu/ActionMenu.feature +20 -0
- package/src/ActionMenu/ActionMenu.tsx +113 -0
- package/src/ActionMenu/__tests__/ActionMenu.test.tsx +99 -0
- package/src/ActionMenu/__tests__/ActionMenu.typetest.tsx +73 -0
- package/src/ActionMenu/index.ts +1 -0
- package/src/ComboBox/ComboBox.feature +96 -0
- package/src/ComboBox/TokenInput.feature +84 -0
- package/src/MenuContent/MenuContent.tsx +28 -0
- package/src/MenuContent/MenuContentTypes.ts +7 -0
- package/src/MenuContent/__tests__/MenuContent.test.tsx +59 -0
- package/src/MenuContent/__tests__/MenuContent.typetest.tsx +18 -0
- package/src/MenuContent/index.tsx +2 -0
- package/src/MenuContent/styles.tsx +10 -0
- package/src/MenuContext.tsx +116 -0
- package/src/MenuFooter/MenuFooter.feature +30 -0
- package/src/MenuFooter/MenuFooter.tsx +7 -0
- package/src/MenuFooter/MenuFooterTypes.ts +1 -0
- package/src/MenuFooter/__tests__/MenuFooter.test.tsx +76 -0
- package/src/MenuFooter/__tests__/MenuFooter.typetest.tsx +20 -0
- package/src/MenuFooter/index.ts +2 -0
- package/src/MenuFooter/styles.tsx +7 -0
- package/src/MenuGroup/MenuGroup.feature +114 -0
- package/src/MenuGroup/MenuGroup.tsx +33 -0
- package/src/MenuGroup/MenuGroupTypes.ts +29 -0
- package/src/MenuGroup/__tests__/MenuGroup.test.tsx +95 -0
- package/src/MenuGroup/__tests__/MenuGroup.typetest.tsx +45 -0
- package/src/MenuGroup/index.tsx +8 -0
- package/src/MenuGroup/styles.tsx +37 -0
- package/src/MenuHeader/MenuHeader.feature +59 -0
- package/src/MenuHeader/MenuHeader.tsx +30 -0
- package/src/MenuHeader/MenuHeaderTypes.ts +26 -0
- package/src/MenuHeader/__tests__/MenuHeader.test.tsx +67 -0
- package/src/MenuHeader/__tests__/MenuHeader.typetest.tsx +27 -0
- package/src/MenuHeader/index.ts +2 -0
- package/src/MenuHeader/styles.tsx +75 -0
- package/src/MenuItem/MenuItem.feature +88 -0
- package/src/MenuItem/MenuItem.tsx +44 -0
- package/src/MenuItem/MenuItemTypes.ts +37 -0
- package/src/MenuItem/__tests__/MenuItem.test.tsx +228 -0
- package/src/MenuItem/__tests__/MenuItem.typetest.tsx +41 -0
- package/src/MenuItem/index.ts +5 -0
- package/src/MenuItem/styles.tsx +71 -0
- package/src/MenuItemSelectable/MenuItemSelectable.feature +99 -0
- package/src/MenuItemSelectable/MenuItemSelectable.tsx +136 -0
- package/src/MenuItemSelectable/MenuItemSelectableTypes.ts +15 -0
- package/src/MenuItemSelectable/__tests__/MenuItemSelectable.test.tsx +303 -0
- package/src/MenuItemSelectable/__tests__/MenuItemSelectable.typetest.tsx +56 -0
- package/src/MenuItemSelectable/index.ts +5 -0
- package/src/MenuItemSelectable/styles.tsx +21 -0
- package/src/MenuLabel.tsx +12 -0
- package/src/MenuRoot/MenuRoot.feature +93 -0
- package/src/MenuRoot/MenuRoot.tsx +70 -0
- package/src/MenuRoot/__tests__/MenuRoot.test.tsx +197 -0
- package/src/MenuRoot/__tests__/MenuRoot.typetest.tsx +76 -0
- package/src/MenuRoot/index.ts +1 -0
- package/src/MenuToggleButton.tsx +29 -0
- package/src/MultiSelectMenu/MultiSelectMenu.feature +70 -0
- package/src/MultiSelectMenu/MultiSelectMenu.tsx +133 -0
- package/src/MultiSelectMenu/MultiSelectMenuTypes.ts +8 -0
- package/src/MultiSelectMenu/__tests__/MultiSelectMenu.test.tsx +349 -0
- package/src/MultiSelectMenu/__tests__/MultiSelectMenu.typetest.tsx +78 -0
- package/src/MultiSelectMenu/index.ts +1 -0
- package/src/SingleSelectMenu/SingleSelectMenu.feature +23 -0
- package/src/SingleSelectMenu/SingleSelectMenu.tsx +56 -0
- package/src/SingleSelectMenu/SingleSelectMenuTypes.ts +9 -0
- package/src/SingleSelectMenu/__tests__/SingleSelectMenu.test.tsx +167 -0
- package/src/SingleSelectMenu/__tests__/SingleSelectMenu.typetest.tsx +95 -0
- package/src/SingleSelectMenu/index.ts +3 -0
- package/src/__tests__/Menu.test.tsx +423 -0
- package/src/constants.ts +17 -0
- package/src/hooks/useItemsFromChildren.tsx +81 -0
- package/src/index.ts +20 -0
- package/src/menuTestingUtils.tsx +72 -0
- package/src/reducers/__tests__/useSelectStateReducer.test.tsx +37 -0
- package/src/reducers/useSelectStateReducer.tsx +27 -0
- package/src/styled.d.ts +7 -0
- package/src/types.ts +16 -0
- package/src/utils/itemToString.ts +5 -0
- package/tsconfig.json +12 -0
- package/tsup.config.ts +11 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,2670 @@
|
|
|
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 __commonJS = (cb, mod) => function __require() {
|
|
9
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
10
|
+
};
|
|
11
|
+
var __export = (target, all) => {
|
|
12
|
+
for (var name in all)
|
|
13
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
14
|
+
};
|
|
15
|
+
var __copyProps = (to, from, except, desc) => {
|
|
16
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
17
|
+
for (let key of __getOwnPropNames(from))
|
|
18
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
19
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
20
|
+
}
|
|
21
|
+
return to;
|
|
22
|
+
};
|
|
23
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
24
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
25
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
26
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
27
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
28
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
29
|
+
mod
|
|
30
|
+
));
|
|
31
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
32
|
+
|
|
33
|
+
// ../../node_modules/object-assign/index.js
|
|
34
|
+
var require_object_assign = __commonJS({
|
|
35
|
+
"../../node_modules/object-assign/index.js"(exports, module2) {
|
|
36
|
+
"use strict";
|
|
37
|
+
var getOwnPropertySymbols = Object.getOwnPropertySymbols;
|
|
38
|
+
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
39
|
+
var propIsEnumerable = Object.prototype.propertyIsEnumerable;
|
|
40
|
+
function toObject(val) {
|
|
41
|
+
if (val === null || val === void 0) {
|
|
42
|
+
throw new TypeError("Object.assign cannot be called with null or undefined");
|
|
43
|
+
}
|
|
44
|
+
return Object(val);
|
|
45
|
+
}
|
|
46
|
+
function shouldUseNative() {
|
|
47
|
+
try {
|
|
48
|
+
if (!Object.assign) {
|
|
49
|
+
return false;
|
|
50
|
+
}
|
|
51
|
+
var test1 = new String("abc");
|
|
52
|
+
test1[5] = "de";
|
|
53
|
+
if (Object.getOwnPropertyNames(test1)[0] === "5") {
|
|
54
|
+
return false;
|
|
55
|
+
}
|
|
56
|
+
var test2 = {};
|
|
57
|
+
for (var i = 0; i < 10; i++) {
|
|
58
|
+
test2["_" + String.fromCharCode(i)] = i;
|
|
59
|
+
}
|
|
60
|
+
var order2 = Object.getOwnPropertyNames(test2).map(function(n) {
|
|
61
|
+
return test2[n];
|
|
62
|
+
});
|
|
63
|
+
if (order2.join("") !== "0123456789") {
|
|
64
|
+
return false;
|
|
65
|
+
}
|
|
66
|
+
var test3 = {};
|
|
67
|
+
"abcdefghijklmnopqrst".split("").forEach(function(letter) {
|
|
68
|
+
test3[letter] = letter;
|
|
69
|
+
});
|
|
70
|
+
if (Object.keys(Object.assign({}, test3)).join("") !== "abcdefghijklmnopqrst") {
|
|
71
|
+
return false;
|
|
72
|
+
}
|
|
73
|
+
return true;
|
|
74
|
+
} catch (err) {
|
|
75
|
+
return false;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
module2.exports = shouldUseNative() ? Object.assign : function(target, source) {
|
|
79
|
+
var from;
|
|
80
|
+
var to = toObject(target);
|
|
81
|
+
var symbols;
|
|
82
|
+
for (var s = 1; s < arguments.length; s++) {
|
|
83
|
+
from = Object(arguments[s]);
|
|
84
|
+
for (var key in from) {
|
|
85
|
+
if (hasOwnProperty.call(from, key)) {
|
|
86
|
+
to[key] = from[key];
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
if (getOwnPropertySymbols) {
|
|
90
|
+
symbols = getOwnPropertySymbols(from);
|
|
91
|
+
for (var i = 0; i < symbols.length; i++) {
|
|
92
|
+
if (propIsEnumerable.call(from, symbols[i])) {
|
|
93
|
+
to[symbols[i]] = from[symbols[i]];
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
return to;
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
// src/index.ts
|
|
104
|
+
var src_exports = {};
|
|
105
|
+
__export(src_exports, {
|
|
106
|
+
ActionMenu: () => ActionMenu,
|
|
107
|
+
INPUT_TYPES: () => INPUT_TYPES,
|
|
108
|
+
MenuContent: () => MenuContent,
|
|
109
|
+
MenuContext: () => MenuContext,
|
|
110
|
+
MenuFooter: () => MenuFooter,
|
|
111
|
+
MenuGroup: () => MenuGroup,
|
|
112
|
+
MenuHeader: () => MenuHeader,
|
|
113
|
+
MenuItem: () => MenuItem,
|
|
114
|
+
MenuItemContainer: () => MenuItemContainer,
|
|
115
|
+
MenuItemSelectable: () => MenuItemSelectable,
|
|
116
|
+
MenuItemSelectableAction: () => MenuItemSelectableAction,
|
|
117
|
+
MenuItemSelectableRow: () => MenuItemSelectableRow,
|
|
118
|
+
MenuItemSelectableText: () => MenuItemSelectableText,
|
|
119
|
+
MenuLabel: () => MenuLabel,
|
|
120
|
+
MenuProvider: () => MenuProvider,
|
|
121
|
+
MenuRoot: () => MenuRoot,
|
|
122
|
+
MenuToggleButton: () => MenuToggleButton,
|
|
123
|
+
MultiSelectMenu: () => MultiSelectMenu,
|
|
124
|
+
SelectionIndicator: () => SelectionIndicator,
|
|
125
|
+
SingleSelectMenu: () => SingleSelectMenu,
|
|
126
|
+
StyledMenuGroup: () => StyledMenuGroup,
|
|
127
|
+
StyledMenuGroupUl: () => StyledMenuGroupUl,
|
|
128
|
+
StyledTitle: () => StyledTitle,
|
|
129
|
+
defaultUseSelectProps: () => defaultUseSelectProps,
|
|
130
|
+
useItemsFromChildren: () => useItemsFromChildren,
|
|
131
|
+
useMenu: () => useMenu,
|
|
132
|
+
useMenuContext: () => useMenuContext,
|
|
133
|
+
useSelectStateReducer: () => useSelectStateReducer
|
|
134
|
+
});
|
|
135
|
+
module.exports = __toCommonJS(src_exports);
|
|
136
|
+
|
|
137
|
+
// src/MenuItem/MenuItem.tsx
|
|
138
|
+
var import_react2 = require("react");
|
|
139
|
+
|
|
140
|
+
// src/MenuContext.tsx
|
|
141
|
+
var import_react = require("react");
|
|
142
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
143
|
+
var defaultMenuContext = {
|
|
144
|
+
items: [],
|
|
145
|
+
itemsMap: {}
|
|
146
|
+
};
|
|
147
|
+
var useMenu = ({
|
|
148
|
+
items = [],
|
|
149
|
+
isListbox = false,
|
|
150
|
+
isOpen = false,
|
|
151
|
+
...rest
|
|
152
|
+
} = {}) => {
|
|
153
|
+
const menuProps = (0, import_react.useMemo)(() => ({ ...rest }), [rest]);
|
|
154
|
+
const itemsMap = (0, import_react.useMemo)(
|
|
155
|
+
() => items.reduce((map, item) => {
|
|
156
|
+
map[`${item.id}`] = item;
|
|
157
|
+
return map;
|
|
158
|
+
}, {}),
|
|
159
|
+
[items]
|
|
160
|
+
);
|
|
161
|
+
return {
|
|
162
|
+
isOpen,
|
|
163
|
+
isListbox,
|
|
164
|
+
items,
|
|
165
|
+
itemsMap,
|
|
166
|
+
...menuProps
|
|
167
|
+
};
|
|
168
|
+
};
|
|
169
|
+
var MenuContext = (0, import_react.createContext)(defaultMenuContext);
|
|
170
|
+
var MenuProvider = ({
|
|
171
|
+
children,
|
|
172
|
+
...overrides
|
|
173
|
+
}) => {
|
|
174
|
+
const filterContext = useMenu(overrides);
|
|
175
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuContext.Provider, { value: { ...filterContext }, children });
|
|
176
|
+
};
|
|
177
|
+
var useMenuContext = () => {
|
|
178
|
+
const menuContextValue = (0, import_react.useContext)(MenuContext);
|
|
179
|
+
if (menuContextValue === null) {
|
|
180
|
+
throw new Error(
|
|
181
|
+
"useMenuContext must be used within a <MenuContext.Provider />"
|
|
182
|
+
);
|
|
183
|
+
}
|
|
184
|
+
return menuContextValue;
|
|
185
|
+
};
|
|
186
|
+
|
|
187
|
+
// src/constants.ts
|
|
188
|
+
var MENU_ITEM_ROLES = {
|
|
189
|
+
MENUITEM: "menuitem",
|
|
190
|
+
LISTITEM: "listitem",
|
|
191
|
+
OPTION: "option",
|
|
192
|
+
RADIO: "menuitemradio",
|
|
193
|
+
CHECKBOX: "menuitemcheckbox"
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
// src/MenuItem/styles.tsx
|
|
197
|
+
var import_styled_components2 = __toESM(require("styled-components"));
|
|
198
|
+
|
|
199
|
+
// ../../node_modules/@babel/runtime/helpers/esm/extends.js
|
|
200
|
+
function _extends() {
|
|
201
|
+
_extends = Object.assign ? Object.assign.bind() : function(target) {
|
|
202
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
203
|
+
var source = arguments[i];
|
|
204
|
+
for (var key in source) {
|
|
205
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
206
|
+
target[key] = source[key];
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
return target;
|
|
211
|
+
};
|
|
212
|
+
return _extends.apply(this, arguments);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
// ../../node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js
|
|
216
|
+
function _assertThisInitialized(self) {
|
|
217
|
+
if (self === void 0) {
|
|
218
|
+
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
219
|
+
}
|
|
220
|
+
return self;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
// ../../node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js
|
|
224
|
+
function _setPrototypeOf(o, p) {
|
|
225
|
+
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o2, p2) {
|
|
226
|
+
o2.__proto__ = p2;
|
|
227
|
+
return o2;
|
|
228
|
+
};
|
|
229
|
+
return _setPrototypeOf(o, p);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
// ../../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js
|
|
233
|
+
function _inheritsLoose(subClass, superClass) {
|
|
234
|
+
subClass.prototype = Object.create(superClass.prototype);
|
|
235
|
+
subClass.prototype.constructor = subClass;
|
|
236
|
+
_setPrototypeOf(subClass, superClass);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
// ../../node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
|
|
240
|
+
function _getPrototypeOf(o) {
|
|
241
|
+
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf2(o2) {
|
|
242
|
+
return o2.__proto__ || Object.getPrototypeOf(o2);
|
|
243
|
+
};
|
|
244
|
+
return _getPrototypeOf(o);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
// ../../node_modules/@babel/runtime/helpers/esm/isNativeFunction.js
|
|
248
|
+
function _isNativeFunction(fn) {
|
|
249
|
+
try {
|
|
250
|
+
return Function.toString.call(fn).indexOf("[native code]") !== -1;
|
|
251
|
+
} catch (e) {
|
|
252
|
+
return typeof fn === "function";
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
// ../../node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js
|
|
257
|
+
function _isNativeReflectConstruct() {
|
|
258
|
+
try {
|
|
259
|
+
var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
|
|
260
|
+
}));
|
|
261
|
+
} catch (t2) {
|
|
262
|
+
}
|
|
263
|
+
return (_isNativeReflectConstruct = function _isNativeReflectConstruct2() {
|
|
264
|
+
return !!t;
|
|
265
|
+
})();
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
// ../../node_modules/@babel/runtime/helpers/esm/construct.js
|
|
269
|
+
function _construct(t, e, r) {
|
|
270
|
+
if (_isNativeReflectConstruct())
|
|
271
|
+
return Reflect.construct.apply(null, arguments);
|
|
272
|
+
var o = [null];
|
|
273
|
+
o.push.apply(o, e);
|
|
274
|
+
var p = new (t.bind.apply(t, o))();
|
|
275
|
+
return r && _setPrototypeOf(p, r.prototype), p;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
// ../../node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js
|
|
279
|
+
function _wrapNativeSuper(Class) {
|
|
280
|
+
var _cache = typeof Map === "function" ? /* @__PURE__ */ new Map() : void 0;
|
|
281
|
+
_wrapNativeSuper = function _wrapNativeSuper2(Class2) {
|
|
282
|
+
if (Class2 === null || !_isNativeFunction(Class2))
|
|
283
|
+
return Class2;
|
|
284
|
+
if (typeof Class2 !== "function") {
|
|
285
|
+
throw new TypeError("Super expression must either be null or a function");
|
|
286
|
+
}
|
|
287
|
+
if (typeof _cache !== "undefined") {
|
|
288
|
+
if (_cache.has(Class2))
|
|
289
|
+
return _cache.get(Class2);
|
|
290
|
+
_cache.set(Class2, Wrapper);
|
|
291
|
+
}
|
|
292
|
+
function Wrapper() {
|
|
293
|
+
return _construct(Class2, arguments, _getPrototypeOf(this).constructor);
|
|
294
|
+
}
|
|
295
|
+
Wrapper.prototype = Object.create(Class2.prototype, {
|
|
296
|
+
constructor: {
|
|
297
|
+
value: Wrapper,
|
|
298
|
+
enumerable: false,
|
|
299
|
+
writable: true,
|
|
300
|
+
configurable: true
|
|
301
|
+
}
|
|
302
|
+
});
|
|
303
|
+
return _setPrototypeOf(Wrapper, Class2);
|
|
304
|
+
};
|
|
305
|
+
return _wrapNativeSuper(Class);
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
// ../../node_modules/polished/dist/polished.esm.js
|
|
309
|
+
var ERRORS = {
|
|
310
|
+
"1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
|
|
311
|
+
"2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
|
|
312
|
+
"3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
|
|
313
|
+
"4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
|
|
314
|
+
"5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
|
|
315
|
+
"6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
|
|
316
|
+
"7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
|
|
317
|
+
"8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
|
|
318
|
+
"9": "Please provide a number of steps to the modularScale helper.\n\n",
|
|
319
|
+
"10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
|
|
320
|
+
"11": 'Invalid value passed as base to modularScale, expected number or em string but got "%s"\n\n',
|
|
321
|
+
"12": 'Expected a string ending in "px" or a number passed as the first argument to %s(), got "%s" instead.\n\n',
|
|
322
|
+
"13": 'Expected a string ending in "px" or a number passed as the second argument to %s(), got "%s" instead.\n\n',
|
|
323
|
+
"14": 'Passed invalid pixel value ("%s") to %s(), please pass a value like "12px" or 12.\n\n',
|
|
324
|
+
"15": 'Passed invalid base value ("%s") to %s(), please pass a value like "12px" or 12.\n\n',
|
|
325
|
+
"16": "You must provide a template to this method.\n\n",
|
|
326
|
+
"17": "You passed an unsupported selector state to this method.\n\n",
|
|
327
|
+
"18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
|
|
328
|
+
"19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
|
|
329
|
+
"20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
|
|
330
|
+
"21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
|
|
331
|
+
"22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
|
|
332
|
+
"23": "fontFace expects a name of a font-family.\n\n",
|
|
333
|
+
"24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
|
|
334
|
+
"25": "fontFace expects localFonts to be an array.\n\n",
|
|
335
|
+
"26": "fontFace expects fileFormats to be an array.\n\n",
|
|
336
|
+
"27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
|
|
337
|
+
"28": "Please supply a filename to retinaImage() as the first argument.\n\n",
|
|
338
|
+
"29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
|
|
339
|
+
"30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
|
|
340
|
+
"31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
|
|
341
|
+
"32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
|
|
342
|
+
"33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
|
|
343
|
+
"34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
|
|
344
|
+
"35": 'borderRadius expects one of "top", "bottom", "left" or "right" as the first argument.\n\n',
|
|
345
|
+
"36": "Property must be a string value.\n\n",
|
|
346
|
+
"37": "Syntax Error at %s.\n\n",
|
|
347
|
+
"38": "Formula contains a function that needs parentheses at %s.\n\n",
|
|
348
|
+
"39": "Formula is missing closing parenthesis at %s.\n\n",
|
|
349
|
+
"40": "Formula has too many closing parentheses at %s.\n\n",
|
|
350
|
+
"41": "All values in a formula must have the same unit or be unitless.\n\n",
|
|
351
|
+
"42": "Please provide a number of steps to the modularScale helper.\n\n",
|
|
352
|
+
"43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
|
|
353
|
+
"44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
|
|
354
|
+
"45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
|
|
355
|
+
"46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
|
|
356
|
+
"47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
|
|
357
|
+
"48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
|
|
358
|
+
"49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
|
|
359
|
+
"50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
|
|
360
|
+
"51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
|
|
361
|
+
"52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
|
|
362
|
+
"53": "fontFace expects localFonts to be an array.\n\n",
|
|
363
|
+
"54": "fontFace expects fileFormats to be an array.\n\n",
|
|
364
|
+
"55": "fontFace expects a name of a font-family.\n\n",
|
|
365
|
+
"56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
|
|
366
|
+
"57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
|
|
367
|
+
"58": "Please supply a filename to retinaImage() as the first argument.\n\n",
|
|
368
|
+
"59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
|
|
369
|
+
"60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
|
|
370
|
+
"61": "Property must be a string value.\n\n",
|
|
371
|
+
"62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
|
|
372
|
+
"63": 'borderRadius expects one of "top", "bottom", "left" or "right" as the first argument.\n\n',
|
|
373
|
+
"64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
|
|
374
|
+
"65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
|
|
375
|
+
"66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
|
|
376
|
+
"67": "You must provide a template to this method.\n\n",
|
|
377
|
+
"68": "You passed an unsupported selector state to this method.\n\n",
|
|
378
|
+
"69": 'Expected a string ending in "px" or a number passed as the first argument to %s(), got %s instead.\n\n',
|
|
379
|
+
"70": 'Expected a string ending in "px" or a number passed as the second argument to %s(), got %s instead.\n\n',
|
|
380
|
+
"71": 'Passed invalid pixel value %s to %s(), please pass a value like "12px" or 12.\n\n',
|
|
381
|
+
"72": 'Passed invalid base value %s to %s(), please pass a value like "12px" or 12.\n\n',
|
|
382
|
+
"73": "Please provide a valid CSS variable.\n\n",
|
|
383
|
+
"74": "CSS variable not found.\n\n",
|
|
384
|
+
"75": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
|
|
385
|
+
};
|
|
386
|
+
function format() {
|
|
387
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
388
|
+
args[_key] = arguments[_key];
|
|
389
|
+
}
|
|
390
|
+
var a = args[0];
|
|
391
|
+
var b = [];
|
|
392
|
+
var c;
|
|
393
|
+
for (c = 1; c < args.length; c += 1) {
|
|
394
|
+
b.push(args[c]);
|
|
395
|
+
}
|
|
396
|
+
b.forEach(function(d) {
|
|
397
|
+
a = a.replace(/%[a-z]/, d);
|
|
398
|
+
});
|
|
399
|
+
return a;
|
|
400
|
+
}
|
|
401
|
+
var PolishedError = /* @__PURE__ */ function(_Error) {
|
|
402
|
+
_inheritsLoose(PolishedError2, _Error);
|
|
403
|
+
function PolishedError2(code) {
|
|
404
|
+
var _this;
|
|
405
|
+
if (process.env.NODE_ENV === "production") {
|
|
406
|
+
_this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
|
|
407
|
+
} else {
|
|
408
|
+
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
|
409
|
+
args[_key2 - 1] = arguments[_key2];
|
|
410
|
+
}
|
|
411
|
+
_this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
|
|
412
|
+
}
|
|
413
|
+
return _assertThisInitialized(_this);
|
|
414
|
+
}
|
|
415
|
+
return PolishedError2;
|
|
416
|
+
}(/* @__PURE__ */ _wrapNativeSuper(Error));
|
|
417
|
+
function colorToInt(color2) {
|
|
418
|
+
return Math.round(color2 * 255);
|
|
419
|
+
}
|
|
420
|
+
function convertToInt(red, green, blue) {
|
|
421
|
+
return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
|
|
422
|
+
}
|
|
423
|
+
function hslToRgb(hue, saturation, lightness, convert) {
|
|
424
|
+
if (convert === void 0) {
|
|
425
|
+
convert = convertToInt;
|
|
426
|
+
}
|
|
427
|
+
if (saturation === 0) {
|
|
428
|
+
return convert(lightness, lightness, lightness);
|
|
429
|
+
}
|
|
430
|
+
var huePrime = (hue % 360 + 360) % 360 / 60;
|
|
431
|
+
var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
|
|
432
|
+
var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
|
|
433
|
+
var red = 0;
|
|
434
|
+
var green = 0;
|
|
435
|
+
var blue = 0;
|
|
436
|
+
if (huePrime >= 0 && huePrime < 1) {
|
|
437
|
+
red = chroma;
|
|
438
|
+
green = secondComponent;
|
|
439
|
+
} else if (huePrime >= 1 && huePrime < 2) {
|
|
440
|
+
red = secondComponent;
|
|
441
|
+
green = chroma;
|
|
442
|
+
} else if (huePrime >= 2 && huePrime < 3) {
|
|
443
|
+
green = chroma;
|
|
444
|
+
blue = secondComponent;
|
|
445
|
+
} else if (huePrime >= 3 && huePrime < 4) {
|
|
446
|
+
green = secondComponent;
|
|
447
|
+
blue = chroma;
|
|
448
|
+
} else if (huePrime >= 4 && huePrime < 5) {
|
|
449
|
+
red = secondComponent;
|
|
450
|
+
blue = chroma;
|
|
451
|
+
} else if (huePrime >= 5 && huePrime < 6) {
|
|
452
|
+
red = chroma;
|
|
453
|
+
blue = secondComponent;
|
|
454
|
+
}
|
|
455
|
+
var lightnessModification = lightness - chroma / 2;
|
|
456
|
+
var finalRed = red + lightnessModification;
|
|
457
|
+
var finalGreen = green + lightnessModification;
|
|
458
|
+
var finalBlue = blue + lightnessModification;
|
|
459
|
+
return convert(finalRed, finalGreen, finalBlue);
|
|
460
|
+
}
|
|
461
|
+
var namedColorMap = {
|
|
462
|
+
aliceblue: "f0f8ff",
|
|
463
|
+
antiquewhite: "faebd7",
|
|
464
|
+
aqua: "00ffff",
|
|
465
|
+
aquamarine: "7fffd4",
|
|
466
|
+
azure: "f0ffff",
|
|
467
|
+
beige: "f5f5dc",
|
|
468
|
+
bisque: "ffe4c4",
|
|
469
|
+
black: "000",
|
|
470
|
+
blanchedalmond: "ffebcd",
|
|
471
|
+
blue: "0000ff",
|
|
472
|
+
blueviolet: "8a2be2",
|
|
473
|
+
brown: "a52a2a",
|
|
474
|
+
burlywood: "deb887",
|
|
475
|
+
cadetblue: "5f9ea0",
|
|
476
|
+
chartreuse: "7fff00",
|
|
477
|
+
chocolate: "d2691e",
|
|
478
|
+
coral: "ff7f50",
|
|
479
|
+
cornflowerblue: "6495ed",
|
|
480
|
+
cornsilk: "fff8dc",
|
|
481
|
+
crimson: "dc143c",
|
|
482
|
+
cyan: "00ffff",
|
|
483
|
+
darkblue: "00008b",
|
|
484
|
+
darkcyan: "008b8b",
|
|
485
|
+
darkgoldenrod: "b8860b",
|
|
486
|
+
darkgray: "a9a9a9",
|
|
487
|
+
darkgreen: "006400",
|
|
488
|
+
darkgrey: "a9a9a9",
|
|
489
|
+
darkkhaki: "bdb76b",
|
|
490
|
+
darkmagenta: "8b008b",
|
|
491
|
+
darkolivegreen: "556b2f",
|
|
492
|
+
darkorange: "ff8c00",
|
|
493
|
+
darkorchid: "9932cc",
|
|
494
|
+
darkred: "8b0000",
|
|
495
|
+
darksalmon: "e9967a",
|
|
496
|
+
darkseagreen: "8fbc8f",
|
|
497
|
+
darkslateblue: "483d8b",
|
|
498
|
+
darkslategray: "2f4f4f",
|
|
499
|
+
darkslategrey: "2f4f4f",
|
|
500
|
+
darkturquoise: "00ced1",
|
|
501
|
+
darkviolet: "9400d3",
|
|
502
|
+
deeppink: "ff1493",
|
|
503
|
+
deepskyblue: "00bfff",
|
|
504
|
+
dimgray: "696969",
|
|
505
|
+
dimgrey: "696969",
|
|
506
|
+
dodgerblue: "1e90ff",
|
|
507
|
+
firebrick: "b22222",
|
|
508
|
+
floralwhite: "fffaf0",
|
|
509
|
+
forestgreen: "228b22",
|
|
510
|
+
fuchsia: "ff00ff",
|
|
511
|
+
gainsboro: "dcdcdc",
|
|
512
|
+
ghostwhite: "f8f8ff",
|
|
513
|
+
gold: "ffd700",
|
|
514
|
+
goldenrod: "daa520",
|
|
515
|
+
gray: "808080",
|
|
516
|
+
green: "008000",
|
|
517
|
+
greenyellow: "adff2f",
|
|
518
|
+
grey: "808080",
|
|
519
|
+
honeydew: "f0fff0",
|
|
520
|
+
hotpink: "ff69b4",
|
|
521
|
+
indianred: "cd5c5c",
|
|
522
|
+
indigo: "4b0082",
|
|
523
|
+
ivory: "fffff0",
|
|
524
|
+
khaki: "f0e68c",
|
|
525
|
+
lavender: "e6e6fa",
|
|
526
|
+
lavenderblush: "fff0f5",
|
|
527
|
+
lawngreen: "7cfc00",
|
|
528
|
+
lemonchiffon: "fffacd",
|
|
529
|
+
lightblue: "add8e6",
|
|
530
|
+
lightcoral: "f08080",
|
|
531
|
+
lightcyan: "e0ffff",
|
|
532
|
+
lightgoldenrodyellow: "fafad2",
|
|
533
|
+
lightgray: "d3d3d3",
|
|
534
|
+
lightgreen: "90ee90",
|
|
535
|
+
lightgrey: "d3d3d3",
|
|
536
|
+
lightpink: "ffb6c1",
|
|
537
|
+
lightsalmon: "ffa07a",
|
|
538
|
+
lightseagreen: "20b2aa",
|
|
539
|
+
lightskyblue: "87cefa",
|
|
540
|
+
lightslategray: "789",
|
|
541
|
+
lightslategrey: "789",
|
|
542
|
+
lightsteelblue: "b0c4de",
|
|
543
|
+
lightyellow: "ffffe0",
|
|
544
|
+
lime: "0f0",
|
|
545
|
+
limegreen: "32cd32",
|
|
546
|
+
linen: "faf0e6",
|
|
547
|
+
magenta: "f0f",
|
|
548
|
+
maroon: "800000",
|
|
549
|
+
mediumaquamarine: "66cdaa",
|
|
550
|
+
mediumblue: "0000cd",
|
|
551
|
+
mediumorchid: "ba55d3",
|
|
552
|
+
mediumpurple: "9370db",
|
|
553
|
+
mediumseagreen: "3cb371",
|
|
554
|
+
mediumslateblue: "7b68ee",
|
|
555
|
+
mediumspringgreen: "00fa9a",
|
|
556
|
+
mediumturquoise: "48d1cc",
|
|
557
|
+
mediumvioletred: "c71585",
|
|
558
|
+
midnightblue: "191970",
|
|
559
|
+
mintcream: "f5fffa",
|
|
560
|
+
mistyrose: "ffe4e1",
|
|
561
|
+
moccasin: "ffe4b5",
|
|
562
|
+
navajowhite: "ffdead",
|
|
563
|
+
navy: "000080",
|
|
564
|
+
oldlace: "fdf5e6",
|
|
565
|
+
olive: "808000",
|
|
566
|
+
olivedrab: "6b8e23",
|
|
567
|
+
orange: "ffa500",
|
|
568
|
+
orangered: "ff4500",
|
|
569
|
+
orchid: "da70d6",
|
|
570
|
+
palegoldenrod: "eee8aa",
|
|
571
|
+
palegreen: "98fb98",
|
|
572
|
+
paleturquoise: "afeeee",
|
|
573
|
+
palevioletred: "db7093",
|
|
574
|
+
papayawhip: "ffefd5",
|
|
575
|
+
peachpuff: "ffdab9",
|
|
576
|
+
peru: "cd853f",
|
|
577
|
+
pink: "ffc0cb",
|
|
578
|
+
plum: "dda0dd",
|
|
579
|
+
powderblue: "b0e0e6",
|
|
580
|
+
purple: "800080",
|
|
581
|
+
rebeccapurple: "639",
|
|
582
|
+
red: "f00",
|
|
583
|
+
rosybrown: "bc8f8f",
|
|
584
|
+
royalblue: "4169e1",
|
|
585
|
+
saddlebrown: "8b4513",
|
|
586
|
+
salmon: "fa8072",
|
|
587
|
+
sandybrown: "f4a460",
|
|
588
|
+
seagreen: "2e8b57",
|
|
589
|
+
seashell: "fff5ee",
|
|
590
|
+
sienna: "a0522d",
|
|
591
|
+
silver: "c0c0c0",
|
|
592
|
+
skyblue: "87ceeb",
|
|
593
|
+
slateblue: "6a5acd",
|
|
594
|
+
slategray: "708090",
|
|
595
|
+
slategrey: "708090",
|
|
596
|
+
snow: "fffafa",
|
|
597
|
+
springgreen: "00ff7f",
|
|
598
|
+
steelblue: "4682b4",
|
|
599
|
+
tan: "d2b48c",
|
|
600
|
+
teal: "008080",
|
|
601
|
+
thistle: "d8bfd8",
|
|
602
|
+
tomato: "ff6347",
|
|
603
|
+
turquoise: "40e0d0",
|
|
604
|
+
violet: "ee82ee",
|
|
605
|
+
wheat: "f5deb3",
|
|
606
|
+
white: "fff",
|
|
607
|
+
whitesmoke: "f5f5f5",
|
|
608
|
+
yellow: "ff0",
|
|
609
|
+
yellowgreen: "9acd32"
|
|
610
|
+
};
|
|
611
|
+
function nameToHex(color2) {
|
|
612
|
+
if (typeof color2 !== "string")
|
|
613
|
+
return color2;
|
|
614
|
+
var normalizedColorName = color2.toLowerCase();
|
|
615
|
+
return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color2;
|
|
616
|
+
}
|
|
617
|
+
var hexRegex = /^#[a-fA-F0-9]{6}$/;
|
|
618
|
+
var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
|
|
619
|
+
var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
|
|
620
|
+
var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
|
|
621
|
+
var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
|
|
622
|
+
var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
|
|
623
|
+
var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
|
|
624
|
+
var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
|
|
625
|
+
function parseToRgb(color2) {
|
|
626
|
+
if (typeof color2 !== "string") {
|
|
627
|
+
throw new PolishedError(3);
|
|
628
|
+
}
|
|
629
|
+
var normalizedColor = nameToHex(color2);
|
|
630
|
+
if (normalizedColor.match(hexRegex)) {
|
|
631
|
+
return {
|
|
632
|
+
red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
|
|
633
|
+
green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
|
|
634
|
+
blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
|
|
635
|
+
};
|
|
636
|
+
}
|
|
637
|
+
if (normalizedColor.match(hexRgbaRegex)) {
|
|
638
|
+
var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
|
|
639
|
+
return {
|
|
640
|
+
red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
|
|
641
|
+
green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
|
|
642
|
+
blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
|
|
643
|
+
alpha
|
|
644
|
+
};
|
|
645
|
+
}
|
|
646
|
+
if (normalizedColor.match(reducedHexRegex)) {
|
|
647
|
+
return {
|
|
648
|
+
red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
|
|
649
|
+
green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
|
|
650
|
+
blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
|
|
651
|
+
};
|
|
652
|
+
}
|
|
653
|
+
if (normalizedColor.match(reducedRgbaHexRegex)) {
|
|
654
|
+
var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
|
|
655
|
+
return {
|
|
656
|
+
red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
|
|
657
|
+
green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
|
|
658
|
+
blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
|
|
659
|
+
alpha: _alpha
|
|
660
|
+
};
|
|
661
|
+
}
|
|
662
|
+
var rgbMatched = rgbRegex.exec(normalizedColor);
|
|
663
|
+
if (rgbMatched) {
|
|
664
|
+
return {
|
|
665
|
+
red: parseInt("" + rgbMatched[1], 10),
|
|
666
|
+
green: parseInt("" + rgbMatched[2], 10),
|
|
667
|
+
blue: parseInt("" + rgbMatched[3], 10)
|
|
668
|
+
};
|
|
669
|
+
}
|
|
670
|
+
var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
|
|
671
|
+
if (rgbaMatched) {
|
|
672
|
+
return {
|
|
673
|
+
red: parseInt("" + rgbaMatched[1], 10),
|
|
674
|
+
green: parseInt("" + rgbaMatched[2], 10),
|
|
675
|
+
blue: parseInt("" + rgbaMatched[3], 10),
|
|
676
|
+
alpha: parseFloat("" + rgbaMatched[4])
|
|
677
|
+
};
|
|
678
|
+
}
|
|
679
|
+
var hslMatched = hslRegex.exec(normalizedColor);
|
|
680
|
+
if (hslMatched) {
|
|
681
|
+
var hue = parseInt("" + hslMatched[1], 10);
|
|
682
|
+
var saturation = parseInt("" + hslMatched[2], 10) / 100;
|
|
683
|
+
var lightness = parseInt("" + hslMatched[3], 10) / 100;
|
|
684
|
+
var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
|
|
685
|
+
var hslRgbMatched = rgbRegex.exec(rgbColorString);
|
|
686
|
+
if (!hslRgbMatched) {
|
|
687
|
+
throw new PolishedError(4, normalizedColor, rgbColorString);
|
|
688
|
+
}
|
|
689
|
+
return {
|
|
690
|
+
red: parseInt("" + hslRgbMatched[1], 10),
|
|
691
|
+
green: parseInt("" + hslRgbMatched[2], 10),
|
|
692
|
+
blue: parseInt("" + hslRgbMatched[3], 10)
|
|
693
|
+
};
|
|
694
|
+
}
|
|
695
|
+
var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
|
|
696
|
+
if (hslaMatched) {
|
|
697
|
+
var _hue = parseInt("" + hslaMatched[1], 10);
|
|
698
|
+
var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
|
|
699
|
+
var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
|
|
700
|
+
var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
|
|
701
|
+
var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
|
|
702
|
+
if (!_hslRgbMatched) {
|
|
703
|
+
throw new PolishedError(4, normalizedColor, _rgbColorString);
|
|
704
|
+
}
|
|
705
|
+
return {
|
|
706
|
+
red: parseInt("" + _hslRgbMatched[1], 10),
|
|
707
|
+
green: parseInt("" + _hslRgbMatched[2], 10),
|
|
708
|
+
blue: parseInt("" + _hslRgbMatched[3], 10),
|
|
709
|
+
alpha: parseFloat("" + hslaMatched[4])
|
|
710
|
+
};
|
|
711
|
+
}
|
|
712
|
+
throw new PolishedError(5);
|
|
713
|
+
}
|
|
714
|
+
var reduceHexValue = function reduceHexValue2(value) {
|
|
715
|
+
if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
|
|
716
|
+
return "#" + value[1] + value[3] + value[5];
|
|
717
|
+
}
|
|
718
|
+
return value;
|
|
719
|
+
};
|
|
720
|
+
function numberToHex(value) {
|
|
721
|
+
var hex = value.toString(16);
|
|
722
|
+
return hex.length === 1 ? "0" + hex : hex;
|
|
723
|
+
}
|
|
724
|
+
function rgb(value, green, blue) {
|
|
725
|
+
if (typeof value === "number" && typeof green === "number" && typeof blue === "number") {
|
|
726
|
+
return reduceHexValue("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
|
|
727
|
+
} else if (typeof value === "object" && green === void 0 && blue === void 0) {
|
|
728
|
+
return reduceHexValue("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
|
|
729
|
+
}
|
|
730
|
+
throw new PolishedError(6);
|
|
731
|
+
}
|
|
732
|
+
function rgba(firstValue, secondValue, thirdValue, fourthValue) {
|
|
733
|
+
if (typeof firstValue === "string" && typeof secondValue === "number") {
|
|
734
|
+
var rgbValue = parseToRgb(firstValue);
|
|
735
|
+
return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
|
|
736
|
+
} else if (typeof firstValue === "number" && typeof secondValue === "number" && typeof thirdValue === "number" && typeof fourthValue === "number") {
|
|
737
|
+
return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
|
|
738
|
+
} else if (typeof firstValue === "object" && secondValue === void 0 && thirdValue === void 0 && fourthValue === void 0) {
|
|
739
|
+
return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
|
|
740
|
+
}
|
|
741
|
+
throw new PolishedError(7);
|
|
742
|
+
}
|
|
743
|
+
function curried(f, length, acc) {
|
|
744
|
+
return function fn() {
|
|
745
|
+
var combined = acc.concat(Array.prototype.slice.call(arguments));
|
|
746
|
+
return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
|
|
747
|
+
};
|
|
748
|
+
}
|
|
749
|
+
function curry(f) {
|
|
750
|
+
return curried(f, f.length, []);
|
|
751
|
+
}
|
|
752
|
+
function guard(lowerBoundary, upperBoundary, value) {
|
|
753
|
+
return Math.max(lowerBoundary, Math.min(upperBoundary, value));
|
|
754
|
+
}
|
|
755
|
+
function transparentize(amount, color2) {
|
|
756
|
+
if (color2 === "transparent")
|
|
757
|
+
return color2;
|
|
758
|
+
var parsedColor = parseToRgb(color2);
|
|
759
|
+
var alpha = typeof parsedColor.alpha === "number" ? parsedColor.alpha : 1;
|
|
760
|
+
var colorWithAlpha = _extends({}, parsedColor, {
|
|
761
|
+
alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
|
|
762
|
+
});
|
|
763
|
+
return rgba(colorWithAlpha);
|
|
764
|
+
}
|
|
765
|
+
var curriedTransparentize = /* @__PURE__ */ curry(transparentize);
|
|
766
|
+
|
|
767
|
+
// ../seeds-react-mixins/src/index.ts
|
|
768
|
+
var import_styled_components = require("styled-components");
|
|
769
|
+
var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
|
|
770
|
+
var visuallyHidden = import_styled_components.css`
|
|
771
|
+
position: absolute;
|
|
772
|
+
width: 1px;
|
|
773
|
+
height: 1px;
|
|
774
|
+
padding: 0;
|
|
775
|
+
margin: -1px;
|
|
776
|
+
overflow: hidden;
|
|
777
|
+
clip: rect(0 0 0 0);
|
|
778
|
+
border: 0;
|
|
779
|
+
`;
|
|
780
|
+
var focusRing = import_styled_components.css`
|
|
781
|
+
box-shadow: 0 0 0 1px ${import_seeds_react_theme.theme.colors.button.primary.background.base},
|
|
782
|
+
0 0px 0px 4px
|
|
783
|
+
${curriedTransparentize(0.7, import_seeds_react_theme.theme.colors.button.primary.background.base)};
|
|
784
|
+
outline: none;
|
|
785
|
+
|
|
786
|
+
&::-moz-focus-inner {
|
|
787
|
+
border: 0;
|
|
788
|
+
}
|
|
789
|
+
`;
|
|
790
|
+
var pill = import_styled_components.css`
|
|
791
|
+
min-width: ${import_seeds_react_theme.theme.space[600]};
|
|
792
|
+
min-height: ${import_seeds_react_theme.theme.space[600]};
|
|
793
|
+
padding: ${import_seeds_react_theme.theme.space[300]};
|
|
794
|
+
border-radius: ${import_seeds_react_theme.theme.radii.pill};
|
|
795
|
+
`;
|
|
796
|
+
var disabled = import_styled_components.css`
|
|
797
|
+
opacity: 0.4;
|
|
798
|
+
pointer-events: none;
|
|
799
|
+
`;
|
|
800
|
+
|
|
801
|
+
// ../../node_modules/@styled-system/core/dist/index.esm.js
|
|
802
|
+
var import_object_assign = __toESM(require_object_assign());
|
|
803
|
+
var merge = function merge2(a, b) {
|
|
804
|
+
var result = (0, import_object_assign.default)({}, a, b);
|
|
805
|
+
for (var key in a) {
|
|
806
|
+
var _assign;
|
|
807
|
+
if (!a[key] || typeof b[key] !== "object")
|
|
808
|
+
continue;
|
|
809
|
+
(0, import_object_assign.default)(result, (_assign = {}, _assign[key] = (0, import_object_assign.default)(a[key], b[key]), _assign));
|
|
810
|
+
}
|
|
811
|
+
return result;
|
|
812
|
+
};
|
|
813
|
+
var sort = function sort2(obj) {
|
|
814
|
+
var next = {};
|
|
815
|
+
Object.keys(obj).sort(function(a, b) {
|
|
816
|
+
return a.localeCompare(b, void 0, {
|
|
817
|
+
numeric: true,
|
|
818
|
+
sensitivity: "base"
|
|
819
|
+
});
|
|
820
|
+
}).forEach(function(key) {
|
|
821
|
+
next[key] = obj[key];
|
|
822
|
+
});
|
|
823
|
+
return next;
|
|
824
|
+
};
|
|
825
|
+
var defaults = {
|
|
826
|
+
breakpoints: [40, 52, 64].map(function(n) {
|
|
827
|
+
return n + "em";
|
|
828
|
+
})
|
|
829
|
+
};
|
|
830
|
+
var createMediaQuery = function createMediaQuery2(n) {
|
|
831
|
+
return "@media screen and (min-width: " + n + ")";
|
|
832
|
+
};
|
|
833
|
+
var getValue = function getValue2(n, scale) {
|
|
834
|
+
return get(scale, n, n);
|
|
835
|
+
};
|
|
836
|
+
var get = function get2(obj, key, def, p, undef) {
|
|
837
|
+
key = key && key.split ? key.split(".") : [key];
|
|
838
|
+
for (p = 0; p < key.length; p++) {
|
|
839
|
+
obj = obj ? obj[key[p]] : undef;
|
|
840
|
+
}
|
|
841
|
+
return obj === undef ? def : obj;
|
|
842
|
+
};
|
|
843
|
+
var createParser = function createParser2(config9) {
|
|
844
|
+
var cache = {};
|
|
845
|
+
var parse = function parse2(props) {
|
|
846
|
+
var styles = {};
|
|
847
|
+
var shouldSort = false;
|
|
848
|
+
var isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
|
|
849
|
+
for (var key in props) {
|
|
850
|
+
if (!config9[key])
|
|
851
|
+
continue;
|
|
852
|
+
var sx = config9[key];
|
|
853
|
+
var raw = props[key];
|
|
854
|
+
var scale = get(props.theme, sx.scale, sx.defaults);
|
|
855
|
+
if (typeof raw === "object") {
|
|
856
|
+
cache.breakpoints = !isCacheDisabled && cache.breakpoints || get(props.theme, "breakpoints", defaults.breakpoints);
|
|
857
|
+
if (Array.isArray(raw)) {
|
|
858
|
+
cache.media = !isCacheDisabled && cache.media || [null].concat(cache.breakpoints.map(createMediaQuery));
|
|
859
|
+
styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
|
|
860
|
+
continue;
|
|
861
|
+
}
|
|
862
|
+
if (raw !== null) {
|
|
863
|
+
styles = merge(styles, parseResponsiveObject(cache.breakpoints, sx, scale, raw, props));
|
|
864
|
+
shouldSort = true;
|
|
865
|
+
}
|
|
866
|
+
continue;
|
|
867
|
+
}
|
|
868
|
+
(0, import_object_assign.default)(styles, sx(raw, scale, props));
|
|
869
|
+
}
|
|
870
|
+
if (shouldSort) {
|
|
871
|
+
styles = sort(styles);
|
|
872
|
+
}
|
|
873
|
+
return styles;
|
|
874
|
+
};
|
|
875
|
+
parse.config = config9;
|
|
876
|
+
parse.propNames = Object.keys(config9);
|
|
877
|
+
parse.cache = cache;
|
|
878
|
+
var keys = Object.keys(config9).filter(function(k) {
|
|
879
|
+
return k !== "config";
|
|
880
|
+
});
|
|
881
|
+
if (keys.length > 1) {
|
|
882
|
+
keys.forEach(function(key) {
|
|
883
|
+
var _createParser;
|
|
884
|
+
parse[key] = createParser2((_createParser = {}, _createParser[key] = config9[key], _createParser));
|
|
885
|
+
});
|
|
886
|
+
}
|
|
887
|
+
return parse;
|
|
888
|
+
};
|
|
889
|
+
var parseResponsiveStyle = function parseResponsiveStyle2(mediaQueries, sx, scale, raw, _props) {
|
|
890
|
+
var styles = {};
|
|
891
|
+
raw.slice(0, mediaQueries.length).forEach(function(value, i) {
|
|
892
|
+
var media = mediaQueries[i];
|
|
893
|
+
var style = sx(value, scale, _props);
|
|
894
|
+
if (!media) {
|
|
895
|
+
(0, import_object_assign.default)(styles, style);
|
|
896
|
+
} else {
|
|
897
|
+
var _assign2;
|
|
898
|
+
(0, import_object_assign.default)(styles, (_assign2 = {}, _assign2[media] = (0, import_object_assign.default)({}, styles[media], style), _assign2));
|
|
899
|
+
}
|
|
900
|
+
});
|
|
901
|
+
return styles;
|
|
902
|
+
};
|
|
903
|
+
var parseResponsiveObject = function parseResponsiveObject2(breakpoints, sx, scale, raw, _props) {
|
|
904
|
+
var styles = {};
|
|
905
|
+
for (var key in raw) {
|
|
906
|
+
var breakpoint = breakpoints[key];
|
|
907
|
+
var value = raw[key];
|
|
908
|
+
var style = sx(value, scale, _props);
|
|
909
|
+
if (!breakpoint) {
|
|
910
|
+
(0, import_object_assign.default)(styles, style);
|
|
911
|
+
} else {
|
|
912
|
+
var _assign3;
|
|
913
|
+
var media = createMediaQuery(breakpoint);
|
|
914
|
+
(0, import_object_assign.default)(styles, (_assign3 = {}, _assign3[media] = (0, import_object_assign.default)({}, styles[media], style), _assign3));
|
|
915
|
+
}
|
|
916
|
+
}
|
|
917
|
+
return styles;
|
|
918
|
+
};
|
|
919
|
+
var createStyleFunction = function createStyleFunction2(_ref) {
|
|
920
|
+
var properties = _ref.properties, property = _ref.property, scale = _ref.scale, _ref$transform = _ref.transform, transform = _ref$transform === void 0 ? getValue : _ref$transform, defaultScale = _ref.defaultScale;
|
|
921
|
+
properties = properties || [property];
|
|
922
|
+
var sx = function sx2(value, scale2, _props) {
|
|
923
|
+
var result = {};
|
|
924
|
+
var n = transform(value, scale2, _props);
|
|
925
|
+
if (n === null)
|
|
926
|
+
return;
|
|
927
|
+
properties.forEach(function(prop) {
|
|
928
|
+
result[prop] = n;
|
|
929
|
+
});
|
|
930
|
+
return result;
|
|
931
|
+
};
|
|
932
|
+
sx.scale = scale;
|
|
933
|
+
sx.defaults = defaultScale;
|
|
934
|
+
return sx;
|
|
935
|
+
};
|
|
936
|
+
var system = function system2(args) {
|
|
937
|
+
if (args === void 0) {
|
|
938
|
+
args = {};
|
|
939
|
+
}
|
|
940
|
+
var config9 = {};
|
|
941
|
+
Object.keys(args).forEach(function(key) {
|
|
942
|
+
var conf = args[key];
|
|
943
|
+
if (conf === true) {
|
|
944
|
+
config9[key] = createStyleFunction({
|
|
945
|
+
property: key,
|
|
946
|
+
scale: key
|
|
947
|
+
});
|
|
948
|
+
return;
|
|
949
|
+
}
|
|
950
|
+
if (typeof conf === "function") {
|
|
951
|
+
config9[key] = conf;
|
|
952
|
+
return;
|
|
953
|
+
}
|
|
954
|
+
config9[key] = createStyleFunction(conf);
|
|
955
|
+
});
|
|
956
|
+
var parser = createParser(config9);
|
|
957
|
+
return parser;
|
|
958
|
+
};
|
|
959
|
+
var compose = function compose2() {
|
|
960
|
+
var config9 = {};
|
|
961
|
+
for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
962
|
+
parsers[_key] = arguments[_key];
|
|
963
|
+
}
|
|
964
|
+
parsers.forEach(function(parser2) {
|
|
965
|
+
if (!parser2 || !parser2.config)
|
|
966
|
+
return;
|
|
967
|
+
(0, import_object_assign.default)(config9, parser2.config);
|
|
968
|
+
});
|
|
969
|
+
var parser = createParser(config9);
|
|
970
|
+
return parser;
|
|
971
|
+
};
|
|
972
|
+
|
|
973
|
+
// ../../node_modules/@styled-system/layout/dist/index.esm.js
|
|
974
|
+
var isNumber = function isNumber2(n) {
|
|
975
|
+
return typeof n === "number" && !isNaN(n);
|
|
976
|
+
};
|
|
977
|
+
var getWidth = function getWidth2(n, scale) {
|
|
978
|
+
return get(scale, n, !isNumber(n) || n > 1 ? n : n * 100 + "%");
|
|
979
|
+
};
|
|
980
|
+
var config = {
|
|
981
|
+
width: {
|
|
982
|
+
property: "width",
|
|
983
|
+
scale: "sizes",
|
|
984
|
+
transform: getWidth
|
|
985
|
+
},
|
|
986
|
+
height: {
|
|
987
|
+
property: "height",
|
|
988
|
+
scale: "sizes"
|
|
989
|
+
},
|
|
990
|
+
minWidth: {
|
|
991
|
+
property: "minWidth",
|
|
992
|
+
scale: "sizes"
|
|
993
|
+
},
|
|
994
|
+
minHeight: {
|
|
995
|
+
property: "minHeight",
|
|
996
|
+
scale: "sizes"
|
|
997
|
+
},
|
|
998
|
+
maxWidth: {
|
|
999
|
+
property: "maxWidth",
|
|
1000
|
+
scale: "sizes"
|
|
1001
|
+
},
|
|
1002
|
+
maxHeight: {
|
|
1003
|
+
property: "maxHeight",
|
|
1004
|
+
scale: "sizes"
|
|
1005
|
+
},
|
|
1006
|
+
size: {
|
|
1007
|
+
properties: ["width", "height"],
|
|
1008
|
+
scale: "sizes"
|
|
1009
|
+
},
|
|
1010
|
+
overflow: true,
|
|
1011
|
+
overflowX: true,
|
|
1012
|
+
overflowY: true,
|
|
1013
|
+
display: true,
|
|
1014
|
+
verticalAlign: true
|
|
1015
|
+
};
|
|
1016
|
+
var layout = system(config);
|
|
1017
|
+
var index_esm_default = layout;
|
|
1018
|
+
|
|
1019
|
+
// ../../node_modules/@styled-system/color/dist/index.esm.js
|
|
1020
|
+
var config2 = {
|
|
1021
|
+
color: {
|
|
1022
|
+
property: "color",
|
|
1023
|
+
scale: "colors"
|
|
1024
|
+
},
|
|
1025
|
+
backgroundColor: {
|
|
1026
|
+
property: "backgroundColor",
|
|
1027
|
+
scale: "colors"
|
|
1028
|
+
},
|
|
1029
|
+
opacity: true
|
|
1030
|
+
};
|
|
1031
|
+
config2.bg = config2.backgroundColor;
|
|
1032
|
+
var color = system(config2);
|
|
1033
|
+
var index_esm_default2 = color;
|
|
1034
|
+
|
|
1035
|
+
// ../../node_modules/@styled-system/typography/dist/index.esm.js
|
|
1036
|
+
var defaults2 = {
|
|
1037
|
+
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
|
|
1038
|
+
};
|
|
1039
|
+
var config3 = {
|
|
1040
|
+
fontFamily: {
|
|
1041
|
+
property: "fontFamily",
|
|
1042
|
+
scale: "fonts"
|
|
1043
|
+
},
|
|
1044
|
+
fontSize: {
|
|
1045
|
+
property: "fontSize",
|
|
1046
|
+
scale: "fontSizes",
|
|
1047
|
+
defaultScale: defaults2.fontSizes
|
|
1048
|
+
},
|
|
1049
|
+
fontWeight: {
|
|
1050
|
+
property: "fontWeight",
|
|
1051
|
+
scale: "fontWeights"
|
|
1052
|
+
},
|
|
1053
|
+
lineHeight: {
|
|
1054
|
+
property: "lineHeight",
|
|
1055
|
+
scale: "lineHeights"
|
|
1056
|
+
},
|
|
1057
|
+
letterSpacing: {
|
|
1058
|
+
property: "letterSpacing",
|
|
1059
|
+
scale: "letterSpacings"
|
|
1060
|
+
},
|
|
1061
|
+
textAlign: true,
|
|
1062
|
+
fontStyle: true
|
|
1063
|
+
};
|
|
1064
|
+
var typography = system(config3);
|
|
1065
|
+
var index_esm_default3 = typography;
|
|
1066
|
+
|
|
1067
|
+
// ../../node_modules/@styled-system/flexbox/dist/index.esm.js
|
|
1068
|
+
var config4 = {
|
|
1069
|
+
alignItems: true,
|
|
1070
|
+
alignContent: true,
|
|
1071
|
+
justifyItems: true,
|
|
1072
|
+
justifyContent: true,
|
|
1073
|
+
flexWrap: true,
|
|
1074
|
+
flexDirection: true,
|
|
1075
|
+
// item
|
|
1076
|
+
flex: true,
|
|
1077
|
+
flexGrow: true,
|
|
1078
|
+
flexShrink: true,
|
|
1079
|
+
flexBasis: true,
|
|
1080
|
+
justifySelf: true,
|
|
1081
|
+
alignSelf: true,
|
|
1082
|
+
order: true
|
|
1083
|
+
};
|
|
1084
|
+
var flexbox = system(config4);
|
|
1085
|
+
var index_esm_default4 = flexbox;
|
|
1086
|
+
|
|
1087
|
+
// ../../node_modules/@styled-system/grid/dist/index.esm.js
|
|
1088
|
+
var defaults3 = {
|
|
1089
|
+
space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
|
|
1090
|
+
};
|
|
1091
|
+
var config5 = {
|
|
1092
|
+
gridGap: {
|
|
1093
|
+
property: "gridGap",
|
|
1094
|
+
scale: "space",
|
|
1095
|
+
defaultScale: defaults3.space
|
|
1096
|
+
},
|
|
1097
|
+
gridColumnGap: {
|
|
1098
|
+
property: "gridColumnGap",
|
|
1099
|
+
scale: "space",
|
|
1100
|
+
defaultScale: defaults3.space
|
|
1101
|
+
},
|
|
1102
|
+
gridRowGap: {
|
|
1103
|
+
property: "gridRowGap",
|
|
1104
|
+
scale: "space",
|
|
1105
|
+
defaultScale: defaults3.space
|
|
1106
|
+
},
|
|
1107
|
+
gridColumn: true,
|
|
1108
|
+
gridRow: true,
|
|
1109
|
+
gridAutoFlow: true,
|
|
1110
|
+
gridAutoColumns: true,
|
|
1111
|
+
gridAutoRows: true,
|
|
1112
|
+
gridTemplateColumns: true,
|
|
1113
|
+
gridTemplateRows: true,
|
|
1114
|
+
gridTemplateAreas: true,
|
|
1115
|
+
gridArea: true
|
|
1116
|
+
};
|
|
1117
|
+
var grid = system(config5);
|
|
1118
|
+
var index_esm_default5 = grid;
|
|
1119
|
+
|
|
1120
|
+
// ../../node_modules/@styled-system/border/dist/index.esm.js
|
|
1121
|
+
var config6 = {
|
|
1122
|
+
border: {
|
|
1123
|
+
property: "border",
|
|
1124
|
+
scale: "borders"
|
|
1125
|
+
},
|
|
1126
|
+
borderWidth: {
|
|
1127
|
+
property: "borderWidth",
|
|
1128
|
+
scale: "borderWidths"
|
|
1129
|
+
},
|
|
1130
|
+
borderStyle: {
|
|
1131
|
+
property: "borderStyle",
|
|
1132
|
+
scale: "borderStyles"
|
|
1133
|
+
},
|
|
1134
|
+
borderColor: {
|
|
1135
|
+
property: "borderColor",
|
|
1136
|
+
scale: "colors"
|
|
1137
|
+
},
|
|
1138
|
+
borderRadius: {
|
|
1139
|
+
property: "borderRadius",
|
|
1140
|
+
scale: "radii"
|
|
1141
|
+
},
|
|
1142
|
+
borderTop: {
|
|
1143
|
+
property: "borderTop",
|
|
1144
|
+
scale: "borders"
|
|
1145
|
+
},
|
|
1146
|
+
borderTopLeftRadius: {
|
|
1147
|
+
property: "borderTopLeftRadius",
|
|
1148
|
+
scale: "radii"
|
|
1149
|
+
},
|
|
1150
|
+
borderTopRightRadius: {
|
|
1151
|
+
property: "borderTopRightRadius",
|
|
1152
|
+
scale: "radii"
|
|
1153
|
+
},
|
|
1154
|
+
borderRight: {
|
|
1155
|
+
property: "borderRight",
|
|
1156
|
+
scale: "borders"
|
|
1157
|
+
},
|
|
1158
|
+
borderBottom: {
|
|
1159
|
+
property: "borderBottom",
|
|
1160
|
+
scale: "borders"
|
|
1161
|
+
},
|
|
1162
|
+
borderBottomLeftRadius: {
|
|
1163
|
+
property: "borderBottomLeftRadius",
|
|
1164
|
+
scale: "radii"
|
|
1165
|
+
},
|
|
1166
|
+
borderBottomRightRadius: {
|
|
1167
|
+
property: "borderBottomRightRadius",
|
|
1168
|
+
scale: "radii"
|
|
1169
|
+
},
|
|
1170
|
+
borderLeft: {
|
|
1171
|
+
property: "borderLeft",
|
|
1172
|
+
scale: "borders"
|
|
1173
|
+
},
|
|
1174
|
+
borderX: {
|
|
1175
|
+
properties: ["borderLeft", "borderRight"],
|
|
1176
|
+
scale: "borders"
|
|
1177
|
+
},
|
|
1178
|
+
borderY: {
|
|
1179
|
+
properties: ["borderTop", "borderBottom"],
|
|
1180
|
+
scale: "borders"
|
|
1181
|
+
}
|
|
1182
|
+
};
|
|
1183
|
+
config6.borderTopWidth = {
|
|
1184
|
+
property: "borderTopWidth",
|
|
1185
|
+
scale: "borderWidths"
|
|
1186
|
+
};
|
|
1187
|
+
config6.borderTopColor = {
|
|
1188
|
+
property: "borderTopColor",
|
|
1189
|
+
scale: "colors"
|
|
1190
|
+
};
|
|
1191
|
+
config6.borderTopStyle = {
|
|
1192
|
+
property: "borderTopStyle",
|
|
1193
|
+
scale: "borderStyles"
|
|
1194
|
+
};
|
|
1195
|
+
config6.borderTopLeftRadius = {
|
|
1196
|
+
property: "borderTopLeftRadius",
|
|
1197
|
+
scale: "radii"
|
|
1198
|
+
};
|
|
1199
|
+
config6.borderTopRightRadius = {
|
|
1200
|
+
property: "borderTopRightRadius",
|
|
1201
|
+
scale: "radii"
|
|
1202
|
+
};
|
|
1203
|
+
config6.borderBottomWidth = {
|
|
1204
|
+
property: "borderBottomWidth",
|
|
1205
|
+
scale: "borderWidths"
|
|
1206
|
+
};
|
|
1207
|
+
config6.borderBottomColor = {
|
|
1208
|
+
property: "borderBottomColor",
|
|
1209
|
+
scale: "colors"
|
|
1210
|
+
};
|
|
1211
|
+
config6.borderBottomStyle = {
|
|
1212
|
+
property: "borderBottomStyle",
|
|
1213
|
+
scale: "borderStyles"
|
|
1214
|
+
};
|
|
1215
|
+
config6.borderBottomLeftRadius = {
|
|
1216
|
+
property: "borderBottomLeftRadius",
|
|
1217
|
+
scale: "radii"
|
|
1218
|
+
};
|
|
1219
|
+
config6.borderBottomRightRadius = {
|
|
1220
|
+
property: "borderBottomRightRadius",
|
|
1221
|
+
scale: "radii"
|
|
1222
|
+
};
|
|
1223
|
+
config6.borderLeftWidth = {
|
|
1224
|
+
property: "borderLeftWidth",
|
|
1225
|
+
scale: "borderWidths"
|
|
1226
|
+
};
|
|
1227
|
+
config6.borderLeftColor = {
|
|
1228
|
+
property: "borderLeftColor",
|
|
1229
|
+
scale: "colors"
|
|
1230
|
+
};
|
|
1231
|
+
config6.borderLeftStyle = {
|
|
1232
|
+
property: "borderLeftStyle",
|
|
1233
|
+
scale: "borderStyles"
|
|
1234
|
+
};
|
|
1235
|
+
config6.borderRightWidth = {
|
|
1236
|
+
property: "borderRightWidth",
|
|
1237
|
+
scale: "borderWidths"
|
|
1238
|
+
};
|
|
1239
|
+
config6.borderRightColor = {
|
|
1240
|
+
property: "borderRightColor",
|
|
1241
|
+
scale: "colors"
|
|
1242
|
+
};
|
|
1243
|
+
config6.borderRightStyle = {
|
|
1244
|
+
property: "borderRightStyle",
|
|
1245
|
+
scale: "borderStyles"
|
|
1246
|
+
};
|
|
1247
|
+
var border = system(config6);
|
|
1248
|
+
var index_esm_default6 = border;
|
|
1249
|
+
|
|
1250
|
+
// ../../node_modules/@styled-system/background/dist/index.esm.js
|
|
1251
|
+
var config7 = {
|
|
1252
|
+
background: true,
|
|
1253
|
+
backgroundImage: true,
|
|
1254
|
+
backgroundSize: true,
|
|
1255
|
+
backgroundPosition: true,
|
|
1256
|
+
backgroundRepeat: true
|
|
1257
|
+
};
|
|
1258
|
+
config7.bgImage = config7.backgroundImage;
|
|
1259
|
+
config7.bgSize = config7.backgroundSize;
|
|
1260
|
+
config7.bgPosition = config7.backgroundPosition;
|
|
1261
|
+
config7.bgRepeat = config7.backgroundRepeat;
|
|
1262
|
+
var background = system(config7);
|
|
1263
|
+
var index_esm_default7 = background;
|
|
1264
|
+
|
|
1265
|
+
// ../../node_modules/@styled-system/position/dist/index.esm.js
|
|
1266
|
+
var defaults4 = {
|
|
1267
|
+
space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
|
|
1268
|
+
};
|
|
1269
|
+
var config8 = {
|
|
1270
|
+
position: true,
|
|
1271
|
+
zIndex: {
|
|
1272
|
+
property: "zIndex",
|
|
1273
|
+
scale: "zIndices"
|
|
1274
|
+
},
|
|
1275
|
+
top: {
|
|
1276
|
+
property: "top",
|
|
1277
|
+
scale: "space",
|
|
1278
|
+
defaultScale: defaults4.space
|
|
1279
|
+
},
|
|
1280
|
+
right: {
|
|
1281
|
+
property: "right",
|
|
1282
|
+
scale: "space",
|
|
1283
|
+
defaultScale: defaults4.space
|
|
1284
|
+
},
|
|
1285
|
+
bottom: {
|
|
1286
|
+
property: "bottom",
|
|
1287
|
+
scale: "space",
|
|
1288
|
+
defaultScale: defaults4.space
|
|
1289
|
+
},
|
|
1290
|
+
left: {
|
|
1291
|
+
property: "left",
|
|
1292
|
+
scale: "space",
|
|
1293
|
+
defaultScale: defaults4.space
|
|
1294
|
+
}
|
|
1295
|
+
};
|
|
1296
|
+
var position = system(config8);
|
|
1297
|
+
var index_esm_default8 = position;
|
|
1298
|
+
|
|
1299
|
+
// ../../node_modules/@styled-system/space/dist/index.esm.js
|
|
1300
|
+
var defaults5 = {
|
|
1301
|
+
space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
|
|
1302
|
+
};
|
|
1303
|
+
var isNumber3 = function isNumber4(n) {
|
|
1304
|
+
return typeof n === "number" && !isNaN(n);
|
|
1305
|
+
};
|
|
1306
|
+
var getMargin = function getMargin2(n, scale) {
|
|
1307
|
+
if (!isNumber3(n)) {
|
|
1308
|
+
return get(scale, n, n);
|
|
1309
|
+
}
|
|
1310
|
+
var isNegative = n < 0;
|
|
1311
|
+
var absolute = Math.abs(n);
|
|
1312
|
+
var value = get(scale, absolute, absolute);
|
|
1313
|
+
if (!isNumber3(value)) {
|
|
1314
|
+
return isNegative ? "-" + value : value;
|
|
1315
|
+
}
|
|
1316
|
+
return value * (isNegative ? -1 : 1);
|
|
1317
|
+
};
|
|
1318
|
+
var configs = {};
|
|
1319
|
+
configs.margin = {
|
|
1320
|
+
margin: {
|
|
1321
|
+
property: "margin",
|
|
1322
|
+
scale: "space",
|
|
1323
|
+
transform: getMargin,
|
|
1324
|
+
defaultScale: defaults5.space
|
|
1325
|
+
},
|
|
1326
|
+
marginTop: {
|
|
1327
|
+
property: "marginTop",
|
|
1328
|
+
scale: "space",
|
|
1329
|
+
transform: getMargin,
|
|
1330
|
+
defaultScale: defaults5.space
|
|
1331
|
+
},
|
|
1332
|
+
marginRight: {
|
|
1333
|
+
property: "marginRight",
|
|
1334
|
+
scale: "space",
|
|
1335
|
+
transform: getMargin,
|
|
1336
|
+
defaultScale: defaults5.space
|
|
1337
|
+
},
|
|
1338
|
+
marginBottom: {
|
|
1339
|
+
property: "marginBottom",
|
|
1340
|
+
scale: "space",
|
|
1341
|
+
transform: getMargin,
|
|
1342
|
+
defaultScale: defaults5.space
|
|
1343
|
+
},
|
|
1344
|
+
marginLeft: {
|
|
1345
|
+
property: "marginLeft",
|
|
1346
|
+
scale: "space",
|
|
1347
|
+
transform: getMargin,
|
|
1348
|
+
defaultScale: defaults5.space
|
|
1349
|
+
},
|
|
1350
|
+
marginX: {
|
|
1351
|
+
properties: ["marginLeft", "marginRight"],
|
|
1352
|
+
scale: "space",
|
|
1353
|
+
transform: getMargin,
|
|
1354
|
+
defaultScale: defaults5.space
|
|
1355
|
+
},
|
|
1356
|
+
marginY: {
|
|
1357
|
+
properties: ["marginTop", "marginBottom"],
|
|
1358
|
+
scale: "space",
|
|
1359
|
+
transform: getMargin,
|
|
1360
|
+
defaultScale: defaults5.space
|
|
1361
|
+
}
|
|
1362
|
+
};
|
|
1363
|
+
configs.margin.m = configs.margin.margin;
|
|
1364
|
+
configs.margin.mt = configs.margin.marginTop;
|
|
1365
|
+
configs.margin.mr = configs.margin.marginRight;
|
|
1366
|
+
configs.margin.mb = configs.margin.marginBottom;
|
|
1367
|
+
configs.margin.ml = configs.margin.marginLeft;
|
|
1368
|
+
configs.margin.mx = configs.margin.marginX;
|
|
1369
|
+
configs.margin.my = configs.margin.marginY;
|
|
1370
|
+
configs.padding = {
|
|
1371
|
+
padding: {
|
|
1372
|
+
property: "padding",
|
|
1373
|
+
scale: "space",
|
|
1374
|
+
defaultScale: defaults5.space
|
|
1375
|
+
},
|
|
1376
|
+
paddingTop: {
|
|
1377
|
+
property: "paddingTop",
|
|
1378
|
+
scale: "space",
|
|
1379
|
+
defaultScale: defaults5.space
|
|
1380
|
+
},
|
|
1381
|
+
paddingRight: {
|
|
1382
|
+
property: "paddingRight",
|
|
1383
|
+
scale: "space",
|
|
1384
|
+
defaultScale: defaults5.space
|
|
1385
|
+
},
|
|
1386
|
+
paddingBottom: {
|
|
1387
|
+
property: "paddingBottom",
|
|
1388
|
+
scale: "space",
|
|
1389
|
+
defaultScale: defaults5.space
|
|
1390
|
+
},
|
|
1391
|
+
paddingLeft: {
|
|
1392
|
+
property: "paddingLeft",
|
|
1393
|
+
scale: "space",
|
|
1394
|
+
defaultScale: defaults5.space
|
|
1395
|
+
},
|
|
1396
|
+
paddingX: {
|
|
1397
|
+
properties: ["paddingLeft", "paddingRight"],
|
|
1398
|
+
scale: "space",
|
|
1399
|
+
defaultScale: defaults5.space
|
|
1400
|
+
},
|
|
1401
|
+
paddingY: {
|
|
1402
|
+
properties: ["paddingTop", "paddingBottom"],
|
|
1403
|
+
scale: "space",
|
|
1404
|
+
defaultScale: defaults5.space
|
|
1405
|
+
}
|
|
1406
|
+
};
|
|
1407
|
+
configs.padding.p = configs.padding.padding;
|
|
1408
|
+
configs.padding.pt = configs.padding.paddingTop;
|
|
1409
|
+
configs.padding.pr = configs.padding.paddingRight;
|
|
1410
|
+
configs.padding.pb = configs.padding.paddingBottom;
|
|
1411
|
+
configs.padding.pl = configs.padding.paddingLeft;
|
|
1412
|
+
configs.padding.px = configs.padding.paddingX;
|
|
1413
|
+
configs.padding.py = configs.padding.paddingY;
|
|
1414
|
+
var margin = system(configs.margin);
|
|
1415
|
+
var padding = system(configs.padding);
|
|
1416
|
+
var space = compose(margin, padding);
|
|
1417
|
+
|
|
1418
|
+
// ../../node_modules/@styled-system/shadow/dist/index.esm.js
|
|
1419
|
+
var shadow = system({
|
|
1420
|
+
boxShadow: {
|
|
1421
|
+
property: "boxShadow",
|
|
1422
|
+
scale: "shadows"
|
|
1423
|
+
},
|
|
1424
|
+
textShadow: {
|
|
1425
|
+
property: "textShadow",
|
|
1426
|
+
scale: "shadows"
|
|
1427
|
+
}
|
|
1428
|
+
});
|
|
1429
|
+
|
|
1430
|
+
// ../../node_modules/@styled-system/css/dist/index.esm.js
|
|
1431
|
+
function _extends2() {
|
|
1432
|
+
_extends2 = Object.assign || function(target) {
|
|
1433
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
1434
|
+
var source = arguments[i];
|
|
1435
|
+
for (var key in source) {
|
|
1436
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
1437
|
+
target[key] = source[key];
|
|
1438
|
+
}
|
|
1439
|
+
}
|
|
1440
|
+
}
|
|
1441
|
+
return target;
|
|
1442
|
+
};
|
|
1443
|
+
return _extends2.apply(this, arguments);
|
|
1444
|
+
}
|
|
1445
|
+
var get3 = function get4(obj, key, def, p, undef) {
|
|
1446
|
+
key = key && key.split ? key.split(".") : [key];
|
|
1447
|
+
for (p = 0; p < key.length; p++) {
|
|
1448
|
+
obj = obj ? obj[key[p]] : undef;
|
|
1449
|
+
}
|
|
1450
|
+
return obj === undef ? def : obj;
|
|
1451
|
+
};
|
|
1452
|
+
var defaultBreakpoints = [40, 52, 64].map(function(n) {
|
|
1453
|
+
return n + "em";
|
|
1454
|
+
});
|
|
1455
|
+
var defaultTheme = {
|
|
1456
|
+
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
|
|
1457
|
+
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
|
|
1458
|
+
};
|
|
1459
|
+
var aliases = {
|
|
1460
|
+
bg: "backgroundColor",
|
|
1461
|
+
m: "margin",
|
|
1462
|
+
mt: "marginTop",
|
|
1463
|
+
mr: "marginRight",
|
|
1464
|
+
mb: "marginBottom",
|
|
1465
|
+
ml: "marginLeft",
|
|
1466
|
+
mx: "marginX",
|
|
1467
|
+
my: "marginY",
|
|
1468
|
+
p: "padding",
|
|
1469
|
+
pt: "paddingTop",
|
|
1470
|
+
pr: "paddingRight",
|
|
1471
|
+
pb: "paddingBottom",
|
|
1472
|
+
pl: "paddingLeft",
|
|
1473
|
+
px: "paddingX",
|
|
1474
|
+
py: "paddingY"
|
|
1475
|
+
};
|
|
1476
|
+
var multiples = {
|
|
1477
|
+
marginX: ["marginLeft", "marginRight"],
|
|
1478
|
+
marginY: ["marginTop", "marginBottom"],
|
|
1479
|
+
paddingX: ["paddingLeft", "paddingRight"],
|
|
1480
|
+
paddingY: ["paddingTop", "paddingBottom"],
|
|
1481
|
+
size: ["width", "height"]
|
|
1482
|
+
};
|
|
1483
|
+
var scales = {
|
|
1484
|
+
color: "colors",
|
|
1485
|
+
backgroundColor: "colors",
|
|
1486
|
+
borderColor: "colors",
|
|
1487
|
+
margin: "space",
|
|
1488
|
+
marginTop: "space",
|
|
1489
|
+
marginRight: "space",
|
|
1490
|
+
marginBottom: "space",
|
|
1491
|
+
marginLeft: "space",
|
|
1492
|
+
marginX: "space",
|
|
1493
|
+
marginY: "space",
|
|
1494
|
+
padding: "space",
|
|
1495
|
+
paddingTop: "space",
|
|
1496
|
+
paddingRight: "space",
|
|
1497
|
+
paddingBottom: "space",
|
|
1498
|
+
paddingLeft: "space",
|
|
1499
|
+
paddingX: "space",
|
|
1500
|
+
paddingY: "space",
|
|
1501
|
+
top: "space",
|
|
1502
|
+
right: "space",
|
|
1503
|
+
bottom: "space",
|
|
1504
|
+
left: "space",
|
|
1505
|
+
gridGap: "space",
|
|
1506
|
+
gridColumnGap: "space",
|
|
1507
|
+
gridRowGap: "space",
|
|
1508
|
+
gap: "space",
|
|
1509
|
+
columnGap: "space",
|
|
1510
|
+
rowGap: "space",
|
|
1511
|
+
fontFamily: "fonts",
|
|
1512
|
+
fontSize: "fontSizes",
|
|
1513
|
+
fontWeight: "fontWeights",
|
|
1514
|
+
lineHeight: "lineHeights",
|
|
1515
|
+
letterSpacing: "letterSpacings",
|
|
1516
|
+
border: "borders",
|
|
1517
|
+
borderTop: "borders",
|
|
1518
|
+
borderRight: "borders",
|
|
1519
|
+
borderBottom: "borders",
|
|
1520
|
+
borderLeft: "borders",
|
|
1521
|
+
borderWidth: "borderWidths",
|
|
1522
|
+
borderStyle: "borderStyles",
|
|
1523
|
+
borderRadius: "radii",
|
|
1524
|
+
borderTopRightRadius: "radii",
|
|
1525
|
+
borderTopLeftRadius: "radii",
|
|
1526
|
+
borderBottomRightRadius: "radii",
|
|
1527
|
+
borderBottomLeftRadius: "radii",
|
|
1528
|
+
borderTopWidth: "borderWidths",
|
|
1529
|
+
borderTopColor: "colors",
|
|
1530
|
+
borderTopStyle: "borderStyles",
|
|
1531
|
+
borderBottomWidth: "borderWidths",
|
|
1532
|
+
borderBottomColor: "colors",
|
|
1533
|
+
borderBottomStyle: "borderStyles",
|
|
1534
|
+
borderLeftWidth: "borderWidths",
|
|
1535
|
+
borderLeftColor: "colors",
|
|
1536
|
+
borderLeftStyle: "borderStyles",
|
|
1537
|
+
borderRightWidth: "borderWidths",
|
|
1538
|
+
borderRightColor: "colors",
|
|
1539
|
+
borderRightStyle: "borderStyles",
|
|
1540
|
+
outlineColor: "colors",
|
|
1541
|
+
boxShadow: "shadows",
|
|
1542
|
+
textShadow: "shadows",
|
|
1543
|
+
zIndex: "zIndices",
|
|
1544
|
+
width: "sizes",
|
|
1545
|
+
minWidth: "sizes",
|
|
1546
|
+
maxWidth: "sizes",
|
|
1547
|
+
height: "sizes",
|
|
1548
|
+
minHeight: "sizes",
|
|
1549
|
+
maxHeight: "sizes",
|
|
1550
|
+
flexBasis: "sizes",
|
|
1551
|
+
size: "sizes",
|
|
1552
|
+
// svg
|
|
1553
|
+
fill: "colors",
|
|
1554
|
+
stroke: "colors"
|
|
1555
|
+
};
|
|
1556
|
+
var positiveOrNegative = function positiveOrNegative2(scale, value) {
|
|
1557
|
+
if (typeof value !== "number" || value >= 0) {
|
|
1558
|
+
return get3(scale, value, value);
|
|
1559
|
+
}
|
|
1560
|
+
var absolute = Math.abs(value);
|
|
1561
|
+
var n = get3(scale, absolute, absolute);
|
|
1562
|
+
if (typeof n === "string")
|
|
1563
|
+
return "-" + n;
|
|
1564
|
+
return n * -1;
|
|
1565
|
+
};
|
|
1566
|
+
var transforms = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(acc, curr) {
|
|
1567
|
+
var _extends22;
|
|
1568
|
+
return _extends2({}, acc, (_extends22 = {}, _extends22[curr] = positiveOrNegative, _extends22));
|
|
1569
|
+
}, {});
|
|
1570
|
+
var responsive = function responsive2(styles) {
|
|
1571
|
+
return function(theme2) {
|
|
1572
|
+
var next = {};
|
|
1573
|
+
var breakpoints = get3(theme2, "breakpoints", defaultBreakpoints);
|
|
1574
|
+
var mediaQueries = [null].concat(breakpoints.map(function(n) {
|
|
1575
|
+
return "@media screen and (min-width: " + n + ")";
|
|
1576
|
+
}));
|
|
1577
|
+
for (var key in styles) {
|
|
1578
|
+
var value = typeof styles[key] === "function" ? styles[key](theme2) : styles[key];
|
|
1579
|
+
if (value == null)
|
|
1580
|
+
continue;
|
|
1581
|
+
if (!Array.isArray(value)) {
|
|
1582
|
+
next[key] = value;
|
|
1583
|
+
continue;
|
|
1584
|
+
}
|
|
1585
|
+
for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
|
|
1586
|
+
var media = mediaQueries[i];
|
|
1587
|
+
if (!media) {
|
|
1588
|
+
next[key] = value[i];
|
|
1589
|
+
continue;
|
|
1590
|
+
}
|
|
1591
|
+
next[media] = next[media] || {};
|
|
1592
|
+
if (value[i] == null)
|
|
1593
|
+
continue;
|
|
1594
|
+
next[media][key] = value[i];
|
|
1595
|
+
}
|
|
1596
|
+
}
|
|
1597
|
+
return next;
|
|
1598
|
+
};
|
|
1599
|
+
};
|
|
1600
|
+
var css2 = function css3(args) {
|
|
1601
|
+
return function(props) {
|
|
1602
|
+
if (props === void 0) {
|
|
1603
|
+
props = {};
|
|
1604
|
+
}
|
|
1605
|
+
var theme2 = _extends2({}, defaultTheme, {}, props.theme || props);
|
|
1606
|
+
var result = {};
|
|
1607
|
+
var obj = typeof args === "function" ? args(theme2) : args;
|
|
1608
|
+
var styles = responsive(obj)(theme2);
|
|
1609
|
+
for (var key in styles) {
|
|
1610
|
+
var x = styles[key];
|
|
1611
|
+
var val = typeof x === "function" ? x(theme2) : x;
|
|
1612
|
+
if (key === "variant") {
|
|
1613
|
+
var variant3 = css3(get3(theme2, val))(theme2);
|
|
1614
|
+
result = _extends2({}, result, {}, variant3);
|
|
1615
|
+
continue;
|
|
1616
|
+
}
|
|
1617
|
+
if (val && typeof val === "object") {
|
|
1618
|
+
result[key] = css3(val)(theme2);
|
|
1619
|
+
continue;
|
|
1620
|
+
}
|
|
1621
|
+
var prop = get3(aliases, key, key);
|
|
1622
|
+
var scaleName = get3(scales, prop);
|
|
1623
|
+
var scale = get3(theme2, scaleName, get3(theme2, prop, {}));
|
|
1624
|
+
var transform = get3(transforms, prop, get3);
|
|
1625
|
+
var value = transform(scale, val, val);
|
|
1626
|
+
if (multiples[prop]) {
|
|
1627
|
+
var dirs = multiples[prop];
|
|
1628
|
+
for (var i = 0; i < dirs.length; i++) {
|
|
1629
|
+
result[dirs[i]] = value;
|
|
1630
|
+
}
|
|
1631
|
+
} else {
|
|
1632
|
+
result[prop] = value;
|
|
1633
|
+
}
|
|
1634
|
+
}
|
|
1635
|
+
return result;
|
|
1636
|
+
};
|
|
1637
|
+
};
|
|
1638
|
+
var index_esm_default9 = css2;
|
|
1639
|
+
|
|
1640
|
+
// ../../node_modules/@styled-system/variant/dist/index.esm.js
|
|
1641
|
+
var variant = function variant2(_ref) {
|
|
1642
|
+
var _config;
|
|
1643
|
+
var scale = _ref.scale, _ref$prop = _ref.prop, prop = _ref$prop === void 0 ? "variant" : _ref$prop, _ref$variants = _ref.variants, variants = _ref$variants === void 0 ? {} : _ref$variants, key = _ref.key;
|
|
1644
|
+
var sx;
|
|
1645
|
+
if (Object.keys(variants).length) {
|
|
1646
|
+
sx = function sx2(value, scale2, props) {
|
|
1647
|
+
return index_esm_default9(get(scale2, value, null))(props.theme);
|
|
1648
|
+
};
|
|
1649
|
+
} else {
|
|
1650
|
+
sx = function sx2(value, scale2) {
|
|
1651
|
+
return get(scale2, value, null);
|
|
1652
|
+
};
|
|
1653
|
+
}
|
|
1654
|
+
sx.scale = scale || key;
|
|
1655
|
+
sx.defaults = variants;
|
|
1656
|
+
var config9 = (_config = {}, _config[prop] = sx, _config);
|
|
1657
|
+
var parser = createParser(config9);
|
|
1658
|
+
return parser;
|
|
1659
|
+
};
|
|
1660
|
+
var buttonStyle = variant({
|
|
1661
|
+
key: "buttons"
|
|
1662
|
+
});
|
|
1663
|
+
var textStyle = variant({
|
|
1664
|
+
key: "textStyles",
|
|
1665
|
+
prop: "textStyle"
|
|
1666
|
+
});
|
|
1667
|
+
var colorStyle = variant({
|
|
1668
|
+
key: "colorStyles",
|
|
1669
|
+
prop: "colors"
|
|
1670
|
+
});
|
|
1671
|
+
|
|
1672
|
+
// ../../node_modules/styled-system/dist/index.esm.js
|
|
1673
|
+
var width = index_esm_default.width;
|
|
1674
|
+
var height = index_esm_default.height;
|
|
1675
|
+
var minWidth = index_esm_default.minWidth;
|
|
1676
|
+
var minHeight = index_esm_default.minHeight;
|
|
1677
|
+
var maxWidth = index_esm_default.maxWidth;
|
|
1678
|
+
var maxHeight = index_esm_default.maxHeight;
|
|
1679
|
+
var size = index_esm_default.size;
|
|
1680
|
+
var verticalAlign = index_esm_default.verticalAlign;
|
|
1681
|
+
var display = index_esm_default.display;
|
|
1682
|
+
var overflow = index_esm_default.overflow;
|
|
1683
|
+
var overflowX = index_esm_default.overflowX;
|
|
1684
|
+
var overflowY = index_esm_default.overflowY;
|
|
1685
|
+
var opacity = index_esm_default2.opacity;
|
|
1686
|
+
var fontSize = index_esm_default3.fontSize;
|
|
1687
|
+
var fontFamily = index_esm_default3.fontFamily;
|
|
1688
|
+
var fontWeight = index_esm_default3.fontWeight;
|
|
1689
|
+
var lineHeight = index_esm_default3.lineHeight;
|
|
1690
|
+
var textAlign = index_esm_default3.textAlign;
|
|
1691
|
+
var fontStyle = index_esm_default3.fontStyle;
|
|
1692
|
+
var letterSpacing = index_esm_default3.letterSpacing;
|
|
1693
|
+
var alignItems = index_esm_default4.alignItems;
|
|
1694
|
+
var alignContent = index_esm_default4.alignContent;
|
|
1695
|
+
var justifyItems = index_esm_default4.justifyItems;
|
|
1696
|
+
var justifyContent = index_esm_default4.justifyContent;
|
|
1697
|
+
var flexWrap = index_esm_default4.flexWrap;
|
|
1698
|
+
var flexDirection = index_esm_default4.flexDirection;
|
|
1699
|
+
var flex = index_esm_default4.flex;
|
|
1700
|
+
var flexGrow = index_esm_default4.flexGrow;
|
|
1701
|
+
var flexShrink = index_esm_default4.flexShrink;
|
|
1702
|
+
var flexBasis = index_esm_default4.flexBasis;
|
|
1703
|
+
var justifySelf = index_esm_default4.justifySelf;
|
|
1704
|
+
var alignSelf = index_esm_default4.alignSelf;
|
|
1705
|
+
var order = index_esm_default4.order;
|
|
1706
|
+
var gridGap = index_esm_default5.gridGap;
|
|
1707
|
+
var gridColumnGap = index_esm_default5.gridColumnGap;
|
|
1708
|
+
var gridRowGap = index_esm_default5.gridRowGap;
|
|
1709
|
+
var gridColumn = index_esm_default5.gridColumn;
|
|
1710
|
+
var gridRow = index_esm_default5.gridRow;
|
|
1711
|
+
var gridAutoFlow = index_esm_default5.gridAutoFlow;
|
|
1712
|
+
var gridAutoColumns = index_esm_default5.gridAutoColumns;
|
|
1713
|
+
var gridAutoRows = index_esm_default5.gridAutoRows;
|
|
1714
|
+
var gridTemplateColumns = index_esm_default5.gridTemplateColumns;
|
|
1715
|
+
var gridTemplateRows = index_esm_default5.gridTemplateRows;
|
|
1716
|
+
var gridTemplateAreas = index_esm_default5.gridTemplateAreas;
|
|
1717
|
+
var gridArea = index_esm_default5.gridArea;
|
|
1718
|
+
var borderWidth = index_esm_default6.borderWidth;
|
|
1719
|
+
var borderStyle = index_esm_default6.borderStyle;
|
|
1720
|
+
var borderColor = index_esm_default6.borderColor;
|
|
1721
|
+
var borderTop = index_esm_default6.borderTop;
|
|
1722
|
+
var borderRight = index_esm_default6.borderRight;
|
|
1723
|
+
var borderBottom = index_esm_default6.borderBottom;
|
|
1724
|
+
var borderLeft = index_esm_default6.borderLeft;
|
|
1725
|
+
var borderRadius = index_esm_default6.borderRadius;
|
|
1726
|
+
var backgroundImage = index_esm_default7.backgroundImage;
|
|
1727
|
+
var backgroundSize = index_esm_default7.backgroundSize;
|
|
1728
|
+
var backgroundPosition = index_esm_default7.backgroundPosition;
|
|
1729
|
+
var backgroundRepeat = index_esm_default7.backgroundRepeat;
|
|
1730
|
+
var zIndex = index_esm_default8.zIndex;
|
|
1731
|
+
var top = index_esm_default8.top;
|
|
1732
|
+
var right = index_esm_default8.right;
|
|
1733
|
+
var bottom = index_esm_default8.bottom;
|
|
1734
|
+
var left = index_esm_default8.left;
|
|
1735
|
+
|
|
1736
|
+
// src/MenuItem/styles.tsx
|
|
1737
|
+
var import_seeds_react_checkbox = require("@sproutsocial/seeds-react-checkbox");
|
|
1738
|
+
var highlightedStyles = import_styled_components2.css`
|
|
1739
|
+
cursor: pointer;
|
|
1740
|
+
border: 1px solid ${({ theme: theme2 }) => theme2.colors.listItem.border.base};
|
|
1741
|
+
background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.hover};
|
|
1742
|
+
`;
|
|
1743
|
+
var MenuItemContainer = import_styled_components2.default.li`
|
|
1744
|
+
border-radius: ${({ theme: theme2 }) => theme2.radii[500]};
|
|
1745
|
+
background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.base};
|
|
1746
|
+
border: 1px solid ${({ theme: theme2 }) => theme2.colors.listItem.background.base};
|
|
1747
|
+
color: ${({ theme: theme2 }) => theme2.colors.text.body};
|
|
1748
|
+
font-family: ${({ theme: theme2 }) => theme2.fontFamily};
|
|
1749
|
+
font-weight: ${({ theme: theme2 }) => theme2.fontWeights.normal};
|
|
1750
|
+
padding: ${({ theme: theme2 }) => theme2.space[300]};
|
|
1751
|
+
list-style-type: none;
|
|
1752
|
+
outline: 0;
|
|
1753
|
+
${({ theme: theme2 }) => theme2.typography[200]};
|
|
1754
|
+
transition: all ${({ theme: theme2 }) => theme2.duration["fast"]};
|
|
1755
|
+
|
|
1756
|
+
/* Highlighted */
|
|
1757
|
+
${({ $highlighted }) => $highlighted && highlightedStyles}
|
|
1758
|
+
|
|
1759
|
+
/* Hovered, but not focused */
|
|
1760
|
+
&:hover {
|
|
1761
|
+
${highlightedStyles}
|
|
1762
|
+
${import_seeds_react_checkbox.CheckboxContainer} {
|
|
1763
|
+
${import_seeds_react_checkbox.checkboxContainerHoverStyles}
|
|
1764
|
+
}
|
|
1765
|
+
${import_seeds_react_checkbox.InputWrapper} {
|
|
1766
|
+
${import_seeds_react_checkbox.inputWrapperHoverStyles}
|
|
1767
|
+
}
|
|
1768
|
+
${import_seeds_react_checkbox.PillInput} {
|
|
1769
|
+
${import_seeds_react_checkbox.pillInputHoverStyles}
|
|
1770
|
+
}
|
|
1771
|
+
}
|
|
1772
|
+
|
|
1773
|
+
/* focused */
|
|
1774
|
+
&:focus {
|
|
1775
|
+
${focusRing}
|
|
1776
|
+
}
|
|
1777
|
+
|
|
1778
|
+
/* Pressed state*/
|
|
1779
|
+
&:active {
|
|
1780
|
+
background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.active};
|
|
1781
|
+
color: ${({ theme: theme2 }) => theme2.colors.text.inverse};
|
|
1782
|
+
}
|
|
1783
|
+
|
|
1784
|
+
&[aria-disabled="true"] {
|
|
1785
|
+
cursor: not-allowed;
|
|
1786
|
+
${disabled}
|
|
1787
|
+
}
|
|
1788
|
+
|
|
1789
|
+
${border}
|
|
1790
|
+
${color}
|
|
1791
|
+
${flexbox}
|
|
1792
|
+
${grid}
|
|
1793
|
+
${layout}
|
|
1794
|
+
${space}
|
|
1795
|
+
`;
|
|
1796
|
+
|
|
1797
|
+
// src/MenuItem/MenuItem.tsx
|
|
1798
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
1799
|
+
var MenuItem = ({
|
|
1800
|
+
id,
|
|
1801
|
+
children,
|
|
1802
|
+
role = "menuitem",
|
|
1803
|
+
label,
|
|
1804
|
+
onClick,
|
|
1805
|
+
onKeyDown,
|
|
1806
|
+
disabled: disabled2 = false,
|
|
1807
|
+
ref,
|
|
1808
|
+
color: color2,
|
|
1809
|
+
...props
|
|
1810
|
+
}) => {
|
|
1811
|
+
const { getItemProps, itemsMap, highlightedIndex, isListbox } = (0, import_react2.useContext)(MenuContext);
|
|
1812
|
+
const item = itemsMap[id] || { index: 0, id };
|
|
1813
|
+
const highlighted = highlightedIndex === item?.index;
|
|
1814
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
1815
|
+
MenuItemContainer,
|
|
1816
|
+
{
|
|
1817
|
+
id,
|
|
1818
|
+
tabIndex: role !== MENU_ITEM_ROLES.LISTITEM && !disabled2 ? -1 : void 0,
|
|
1819
|
+
$highlighted: highlighted,
|
|
1820
|
+
...getItemProps?.({
|
|
1821
|
+
...isListbox ? {} : { role: "menuitem" },
|
|
1822
|
+
item,
|
|
1823
|
+
index: item.index,
|
|
1824
|
+
// This prop no longer supported in downshift
|
|
1825
|
+
// disabled,
|
|
1826
|
+
onClick,
|
|
1827
|
+
onKeyDown
|
|
1828
|
+
}),
|
|
1829
|
+
...props,
|
|
1830
|
+
children
|
|
1831
|
+
}
|
|
1832
|
+
);
|
|
1833
|
+
};
|
|
1834
|
+
|
|
1835
|
+
// src/MenuItemSelectable/MenuItemSelectable.tsx
|
|
1836
|
+
var import_react3 = require("react");
|
|
1837
|
+
var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
|
|
1838
|
+
var import_seeds_react_checkbox2 = require("@sproutsocial/seeds-react-checkbox");
|
|
1839
|
+
var import_seeds_react_switch = require("@sproutsocial/seeds-react-switch");
|
|
1840
|
+
var import_seeds_react_radio = require("@sproutsocial/seeds-react-radio");
|
|
1841
|
+
var import_styled_components4 = require("styled-components");
|
|
1842
|
+
var import_seeds_react_box = require("@sproutsocial/seeds-react-box");
|
|
1843
|
+
|
|
1844
|
+
// src/MenuItemSelectable/styles.tsx
|
|
1845
|
+
var import_styled_components3 = __toESM(require("styled-components"));
|
|
1846
|
+
var MenuItemSelectableRow = import_styled_components3.default.div`
|
|
1847
|
+
display: flex;
|
|
1848
|
+
align-items: center;
|
|
1849
|
+
pointer-events: none;
|
|
1850
|
+
`;
|
|
1851
|
+
var MenuItemSelectableAction = import_styled_components3.default.div`
|
|
1852
|
+
margin-right: ${({ theme: theme2 }) => theme2.space[300]};
|
|
1853
|
+
display: flex;
|
|
1854
|
+
align-items: center;
|
|
1855
|
+
justify-content: center;
|
|
1856
|
+
flex-shrink: 0;
|
|
1857
|
+
`;
|
|
1858
|
+
var MenuItemSelectableText = import_styled_components3.default.div`
|
|
1859
|
+
word-break: break-word;
|
|
1860
|
+
flex-grow: 1;
|
|
1861
|
+
min-width: 0;
|
|
1862
|
+
`;
|
|
1863
|
+
|
|
1864
|
+
// src/MenuItemSelectable/MenuItemSelectable.tsx
|
|
1865
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
1866
|
+
var SelectionIndicator = ({
|
|
1867
|
+
id,
|
|
1868
|
+
inputType = "icon",
|
|
1869
|
+
"aria-labelledby": labeledBy,
|
|
1870
|
+
selected
|
|
1871
|
+
}) => {
|
|
1872
|
+
const { space: space2 } = (0, import_styled_components4.useTheme)();
|
|
1873
|
+
const inputStub = (e) => {
|
|
1874
|
+
e.stopPropagation();
|
|
1875
|
+
};
|
|
1876
|
+
switch (inputType) {
|
|
1877
|
+
case "checkbox":
|
|
1878
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1879
|
+
import_seeds_react_checkbox2.Checkbox,
|
|
1880
|
+
{
|
|
1881
|
+
onChange: () => {
|
|
1882
|
+
},
|
|
1883
|
+
checked: selected,
|
|
1884
|
+
"aria-labelledby": labeledBy,
|
|
1885
|
+
id: `MenuItemSelectable-${inputType}-${id}`
|
|
1886
|
+
}
|
|
1887
|
+
);
|
|
1888
|
+
case "switch":
|
|
1889
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1890
|
+
import_seeds_react_switch.Switch,
|
|
1891
|
+
{
|
|
1892
|
+
onClick: inputStub,
|
|
1893
|
+
checked: !!selected,
|
|
1894
|
+
"aria-labelledby": labeledBy,
|
|
1895
|
+
id: `MenuItemSelectable-${inputType}-${id}`
|
|
1896
|
+
}
|
|
1897
|
+
);
|
|
1898
|
+
case "radio":
|
|
1899
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1900
|
+
import_seeds_react_radio.Radio,
|
|
1901
|
+
{
|
|
1902
|
+
checked: selected,
|
|
1903
|
+
id: `MenuItemSelectable-${inputType}-${id}`,
|
|
1904
|
+
name: `MenuItemSelectable-${inputType}`,
|
|
1905
|
+
"aria-labelledby": labeledBy
|
|
1906
|
+
}
|
|
1907
|
+
);
|
|
1908
|
+
case "icon":
|
|
1909
|
+
if (selected) {
|
|
1910
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_icon.Icon, { name: "check-solid", "aria-hidden": true, size: "small" });
|
|
1911
|
+
} else {
|
|
1912
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_box.Box, { width: space2["400"] });
|
|
1913
|
+
}
|
|
1914
|
+
default:
|
|
1915
|
+
return null;
|
|
1916
|
+
}
|
|
1917
|
+
};
|
|
1918
|
+
var MenuItemSelectable = ({
|
|
1919
|
+
id,
|
|
1920
|
+
children,
|
|
1921
|
+
inputType = "icon",
|
|
1922
|
+
inputLabel,
|
|
1923
|
+
...props
|
|
1924
|
+
}) => {
|
|
1925
|
+
const { selectedItem, selectedItems, isListbox } = (0, import_react3.useContext)(MenuContext);
|
|
1926
|
+
const selected = (0, import_react3.useMemo)(
|
|
1927
|
+
() => selectedItem?.id === id || !!selectedItems?.find((item) => item?.id === id),
|
|
1928
|
+
[selectedItem, selectedItems]
|
|
1929
|
+
);
|
|
1930
|
+
if (isListbox === false) {
|
|
1931
|
+
console.warn(
|
|
1932
|
+
"MenuItemSelectable is invalid when isListbox is false (Menu)"
|
|
1933
|
+
);
|
|
1934
|
+
}
|
|
1935
|
+
const label = inputLabel || `menu-item-child-${id}`;
|
|
1936
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1937
|
+
MenuItem,
|
|
1938
|
+
{
|
|
1939
|
+
active: selected,
|
|
1940
|
+
id,
|
|
1941
|
+
"aria-selected": selected,
|
|
1942
|
+
...props,
|
|
1943
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MenuItemSelectableRow, { children: [
|
|
1944
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuItemSelectableAction, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1945
|
+
SelectionIndicator,
|
|
1946
|
+
{
|
|
1947
|
+
id,
|
|
1948
|
+
"aria-labelledby": label,
|
|
1949
|
+
inputType,
|
|
1950
|
+
selected: !!selected
|
|
1951
|
+
}
|
|
1952
|
+
) }),
|
|
1953
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuItemSelectableText, { id: label, children })
|
|
1954
|
+
] })
|
|
1955
|
+
}
|
|
1956
|
+
);
|
|
1957
|
+
};
|
|
1958
|
+
|
|
1959
|
+
// src/MenuItemSelectable/MenuItemSelectableTypes.ts
|
|
1960
|
+
var INPUT_TYPES = {
|
|
1961
|
+
CHECKBOX: "checkbox",
|
|
1962
|
+
RADIO: "radio",
|
|
1963
|
+
SWITCH: "switch",
|
|
1964
|
+
ICON: "icon"
|
|
1965
|
+
};
|
|
1966
|
+
|
|
1967
|
+
// src/MenuHeader/MenuHeader.tsx
|
|
1968
|
+
var import_react4 = require("react");
|
|
1969
|
+
|
|
1970
|
+
// src/MenuHeader/styles.tsx
|
|
1971
|
+
var import_styled_components5 = __toESM(require("styled-components"));
|
|
1972
|
+
var MenuHeaderContainer = import_styled_components5.default.div`
|
|
1973
|
+
border-color: ${({ theme: theme2 }) => theme2.colors.container.border.base};
|
|
1974
|
+
border-bottom-width: 1px;
|
|
1975
|
+
border-bottom-style: solid;
|
|
1976
|
+
box-sizing: border-box;
|
|
1977
|
+
width: 100%;
|
|
1978
|
+
font-size: ${({ theme: theme2 }) => theme2.typography[200].fontSize};
|
|
1979
|
+
display: flex;
|
|
1980
|
+
padding: ${({ theme: theme2 }) => theme2.space[350]} ${({ theme: theme2 }) => theme2.space[400]};
|
|
1981
|
+
|
|
1982
|
+
> a {
|
|
1983
|
+
white-space: nowrap;
|
|
1984
|
+
}
|
|
1985
|
+
|
|
1986
|
+
&:first-child {
|
|
1987
|
+
flex-grow: 1;
|
|
1988
|
+
justify-self: start;
|
|
1989
|
+
}
|
|
1990
|
+
|
|
1991
|
+
&:last-child {
|
|
1992
|
+
flex-grow: 1;
|
|
1993
|
+
justify-self: end;
|
|
1994
|
+
}
|
|
1995
|
+
|
|
1996
|
+
${({ $leftAction, theme: theme2 }) => $leftAction && `
|
|
1997
|
+
padding-left: ${theme2.space[350]};
|
|
1998
|
+
`}
|
|
1999
|
+
|
|
2000
|
+
${border}
|
|
2001
|
+
${color}
|
|
2002
|
+
${flexbox}
|
|
2003
|
+
${grid}
|
|
2004
|
+
${layout}
|
|
2005
|
+
${space}
|
|
2006
|
+
${position}
|
|
2007
|
+
`;
|
|
2008
|
+
var MenuTitleText = import_styled_components5.default.h3`
|
|
2009
|
+
color: ${({ theme: theme2 }) => theme2.colors.text.headline};
|
|
2010
|
+
font-weight: ${({ theme: theme2 }) => theme2.fontWeights.bold};
|
|
2011
|
+
margin: 0px;
|
|
2012
|
+
flex-grow: 2;
|
|
2013
|
+
justify-self: start;
|
|
2014
|
+
|
|
2015
|
+
${({ $leftAction, theme: theme2 }) => $leftAction && `
|
|
2016
|
+
padding-left: ${theme2.space[350]};
|
|
2017
|
+
`}
|
|
2018
|
+
|
|
2019
|
+
${({ theme: theme2 }) => theme2.typography[200]}
|
|
2020
|
+
`;
|
|
2021
|
+
var MenuChildrenContainer = import_styled_components5.default.div`
|
|
2022
|
+
grid-column: 1 / -1;
|
|
2023
|
+
margin-top: ${({ theme: theme2 }) => theme2.space[300]};
|
|
2024
|
+
`;
|
|
2025
|
+
|
|
2026
|
+
// src/MenuHeader/MenuHeader.tsx
|
|
2027
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
2028
|
+
var MenuHeader = ({
|
|
2029
|
+
children,
|
|
2030
|
+
title,
|
|
2031
|
+
leftAction,
|
|
2032
|
+
rightAction,
|
|
2033
|
+
...rest
|
|
2034
|
+
}) => {
|
|
2035
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MenuHeaderContainer, { $leftAction: !!leftAction, ...rest, children: [
|
|
2036
|
+
leftAction && leftAction,
|
|
2037
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuTitleText, { $leftAction: !!leftAction, children: title }),
|
|
2038
|
+
rightAction && rightAction,
|
|
2039
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuChildrenContainer, { children })
|
|
2040
|
+
] }) });
|
|
2041
|
+
};
|
|
2042
|
+
|
|
2043
|
+
// src/MenuContent/styles.tsx
|
|
2044
|
+
var import_styled_components6 = __toESM(require("styled-components"));
|
|
2045
|
+
var StyledMenuContent = import_styled_components6.default.ul`
|
|
2046
|
+
margin: 0;
|
|
2047
|
+
padding: ${({ theme: theme2 }) => theme2.space[300]} 0;
|
|
2048
|
+
&:focus {
|
|
2049
|
+
${focusRing}
|
|
2050
|
+
}
|
|
2051
|
+
`;
|
|
2052
|
+
|
|
2053
|
+
// src/MenuContent/MenuContent.tsx
|
|
2054
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
2055
|
+
var MenuContent = ({
|
|
2056
|
+
id = "menu_content",
|
|
2057
|
+
children,
|
|
2058
|
+
...rest
|
|
2059
|
+
}) => {
|
|
2060
|
+
const { getToggleButtonProps } = useMenuContext();
|
|
2061
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2062
|
+
StyledMenuContent,
|
|
2063
|
+
{
|
|
2064
|
+
autoFocus: true,
|
|
2065
|
+
id,
|
|
2066
|
+
tabIndex: 0,
|
|
2067
|
+
onKeyDown: getToggleButtonProps?.().onKeyDown,
|
|
2068
|
+
"aria-activedescendant": getToggleButtonProps?.()["aria-activedescendant"],
|
|
2069
|
+
...rest,
|
|
2070
|
+
children
|
|
2071
|
+
}
|
|
2072
|
+
);
|
|
2073
|
+
};
|
|
2074
|
+
|
|
2075
|
+
// src/MenuFooter/MenuFooter.tsx
|
|
2076
|
+
var import_react5 = require("react");
|
|
2077
|
+
|
|
2078
|
+
// src/MenuFooter/styles.tsx
|
|
2079
|
+
var import_styled_components7 = __toESM(require("styled-components"));
|
|
2080
|
+
var import_seeds_react_box2 = require("@sproutsocial/seeds-react-box");
|
|
2081
|
+
var StyledMenuFooterBox = (0, import_styled_components7.default)(import_seeds_react_box2.Box)`
|
|
2082
|
+
padding: ${(p) => p.theme.space[350]};
|
|
2083
|
+
border-top: 1px solid ${(p) => p.theme.colors.container.border.base};
|
|
2084
|
+
`;
|
|
2085
|
+
|
|
2086
|
+
// src/MenuFooter/MenuFooter.tsx
|
|
2087
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
2088
|
+
var MenuFooter = ({ children, ...rest }) => {
|
|
2089
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledMenuFooterBox, { ...rest, children });
|
|
2090
|
+
};
|
|
2091
|
+
|
|
2092
|
+
// src/MenuGroup/MenuGroup.tsx
|
|
2093
|
+
var import_react8 = require("react");
|
|
2094
|
+
|
|
2095
|
+
// src/MenuGroup/styles.tsx
|
|
2096
|
+
var import_styled_components10 = __toESM(require("styled-components"));
|
|
2097
|
+
|
|
2098
|
+
// ../seeds-react-text/dist/esm/index.js
|
|
2099
|
+
var import_react6 = require("react");
|
|
2100
|
+
var import_styled_components8 = __toESM(require("styled-components"));
|
|
2101
|
+
var import_styled_components9 = __toESM(require("styled-components"));
|
|
2102
|
+
var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
|
|
2103
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
2104
|
+
var import_react7 = require("react");
|
|
2105
|
+
var Container = import_styled_components9.default.span`
|
|
2106
|
+
margin: 0;
|
|
2107
|
+
padding-left: 0;
|
|
2108
|
+
padding-right: 0;
|
|
2109
|
+
font-family: ${(props) => props.theme.fontFamily};
|
|
2110
|
+
font-style: ${(props) => {
|
|
2111
|
+
return props.isItalicized && "italic";
|
|
2112
|
+
}};
|
|
2113
|
+
|
|
2114
|
+
${(props) => props.truncated && import_styled_components9.css`
|
|
2115
|
+
display: block;
|
|
2116
|
+
overflow: hidden;
|
|
2117
|
+
white-space: nowrap;
|
|
2118
|
+
text-overflow: ellipsis;
|
|
2119
|
+
`}
|
|
2120
|
+
|
|
2121
|
+
${(props) => props.breakWord && import_styled_components9.css`
|
|
2122
|
+
word-break: break-word;
|
|
2123
|
+
hyphens: auto;
|
|
2124
|
+
`}
|
|
2125
|
+
|
|
2126
|
+
${import_seeds_react_system_props.COMMON}
|
|
2127
|
+
${import_seeds_react_system_props.LAYOUT}
|
|
2128
|
+
${import_seeds_react_system_props.FLEXBOX}
|
|
2129
|
+
${import_seeds_react_system_props.GRID}
|
|
2130
|
+
${import_seeds_react_system_props.TYPOGRAPHY}
|
|
2131
|
+
`;
|
|
2132
|
+
var styles_default = Container;
|
|
2133
|
+
var Headline = (0, import_styled_components8.default)(styles_default)`
|
|
2134
|
+
color: ${(props) => props.theme.colors.text.headline};
|
|
2135
|
+
font-weight: ${(props) => props.theme.fontWeights.bold};
|
|
2136
|
+
${(props) => props.theme.typography[400]}
|
|
2137
|
+
`;
|
|
2138
|
+
var SubHeadline = (0, import_styled_components8.default)(styles_default)`
|
|
2139
|
+
color: ${(props) => props.theme.colors.text.headline};
|
|
2140
|
+
font-weight: ${(props) => props.theme.fontWeights.bold};
|
|
2141
|
+
${(props) => props.theme.typography[300]}
|
|
2142
|
+
`;
|
|
2143
|
+
var SmallSubHeadline = (0, import_styled_components8.default)(styles_default)`
|
|
2144
|
+
color: ${(props) => props.theme.colors.text.headline};
|
|
2145
|
+
font-weight: ${(props) => props.theme.fontWeights.bold};
|
|
2146
|
+
${(props) => props.theme.typography[200]}
|
|
2147
|
+
`;
|
|
2148
|
+
var Byline = (0, import_styled_components8.default)(styles_default)`
|
|
2149
|
+
color: ${(props) => props.theme.colors.text.subtext};
|
|
2150
|
+
${(props) => props.theme.typography[200]}
|
|
2151
|
+
`;
|
|
2152
|
+
var SmallByline = (0, import_styled_components8.default)(styles_default)`
|
|
2153
|
+
color: ${(props) => props.theme.colors.text.subtext};
|
|
2154
|
+
${(props) => props.theme.typography[100]}
|
|
2155
|
+
`;
|
|
2156
|
+
var BodyCopy = (0, import_styled_components8.default)(styles_default)`
|
|
2157
|
+
color: ${(props) => props.theme.colors.text.body};
|
|
2158
|
+
${(props) => props.theme.typography[300]}
|
|
2159
|
+
`;
|
|
2160
|
+
var SmallBodyCopy = (0, import_styled_components8.default)(styles_default)`
|
|
2161
|
+
color: ${(props) => props.theme.colors.text.body};
|
|
2162
|
+
${(props) => props.theme.typography[200]}
|
|
2163
|
+
`;
|
|
2164
|
+
var Text = ({ fontSize: fontSize2, children, qa, color: color2, ...rest }) => {
|
|
2165
|
+
const qaText = typeof children === "string" ? children : void 0;
|
|
2166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2167
|
+
styles_default,
|
|
2168
|
+
{
|
|
2169
|
+
typeScale: fontSize2,
|
|
2170
|
+
"data-qa-text": qaText,
|
|
2171
|
+
color: color2,
|
|
2172
|
+
...qa,
|
|
2173
|
+
...rest,
|
|
2174
|
+
children
|
|
2175
|
+
}
|
|
2176
|
+
);
|
|
2177
|
+
};
|
|
2178
|
+
Headline.displayName = "Text.Headline";
|
|
2179
|
+
SubHeadline.displayName = "Text.SubHeadline";
|
|
2180
|
+
SmallSubHeadline.displayName = "Text.SmallSubHeadline";
|
|
2181
|
+
Byline.displayName = "Text.Byline";
|
|
2182
|
+
SmallByline.displayName = "Text.SmallByline";
|
|
2183
|
+
BodyCopy.displayName = "Text.BodyCopy";
|
|
2184
|
+
SmallBodyCopy.displayName = "Text.SmallBodyCopy";
|
|
2185
|
+
Text.Headline = Headline;
|
|
2186
|
+
Text.SubHeadline = SubHeadline;
|
|
2187
|
+
Text.SmallSubHeadline = SmallSubHeadline;
|
|
2188
|
+
Text.Byline = Byline;
|
|
2189
|
+
Text.SmallByline = SmallByline;
|
|
2190
|
+
Text.BodyCopy = BodyCopy;
|
|
2191
|
+
Text.SmallBodyCopy = SmallBodyCopy;
|
|
2192
|
+
var Text_default = Text;
|
|
2193
|
+
var src_default = Text_default;
|
|
2194
|
+
|
|
2195
|
+
// src/MenuGroup/styles.tsx
|
|
2196
|
+
var StyledMenuGroup = import_styled_components10.default.li`
|
|
2197
|
+
&:not(:last-child) {
|
|
2198
|
+
border-bottom: 1px solid
|
|
2199
|
+
${({ theme: theme2 }) => theme2.colors.container.border.base};
|
|
2200
|
+
}
|
|
2201
|
+
list-style: none;
|
|
2202
|
+
margin: 0;
|
|
2203
|
+
${border}
|
|
2204
|
+
${position}
|
|
2205
|
+
${color}
|
|
2206
|
+
${flexbox}
|
|
2207
|
+
${grid}
|
|
2208
|
+
${layout}
|
|
2209
|
+
${space}
|
|
2210
|
+
`;
|
|
2211
|
+
var StyledTitle = (0, import_styled_components10.default)(src_default.SmallSubHeadline)`
|
|
2212
|
+
margin: ${({ theme: theme2 }) => theme2.space[200]} 0px
|
|
2213
|
+
${({ theme: theme2 }) => theme2.space[300]} ${({ theme: theme2 }) => theme2.space[300]};
|
|
2214
|
+
`;
|
|
2215
|
+
var StyledMenuGroupUl = import_styled_components10.default.ul`
|
|
2216
|
+
margin: 0;
|
|
2217
|
+
padding: ${({ theme: theme2 }) => theme2.space[300]};
|
|
2218
|
+
`;
|
|
2219
|
+
|
|
2220
|
+
// src/MenuGroup/MenuGroup.tsx
|
|
2221
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
2222
|
+
var MenuGroup = ({
|
|
2223
|
+
titleAs = "h3",
|
|
2224
|
+
children,
|
|
2225
|
+
title,
|
|
2226
|
+
color: color2,
|
|
2227
|
+
...rest
|
|
2228
|
+
}) => {
|
|
2229
|
+
const titleId = `menu-group-title-${Math.random().toString(36).slice(2, 11)}`;
|
|
2230
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
2231
|
+
StyledMenuGroup,
|
|
2232
|
+
{
|
|
2233
|
+
role: "group",
|
|
2234
|
+
"aria-labelledby": title ? titleId : void 0,
|
|
2235
|
+
color: color2,
|
|
2236
|
+
...rest,
|
|
2237
|
+
children: [
|
|
2238
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledTitle, { as: titleAs, id: titleId, children: title }),
|
|
2239
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledMenuGroupUl, { children })
|
|
2240
|
+
]
|
|
2241
|
+
}
|
|
2242
|
+
);
|
|
2243
|
+
};
|
|
2244
|
+
|
|
2245
|
+
// src/MenuRoot/MenuRoot.tsx
|
|
2246
|
+
var import_react9 = require("react");
|
|
2247
|
+
var import_styled_components11 = __toESM(require("styled-components"));
|
|
2248
|
+
var import_seeds_react_popout = require("@sproutsocial/seeds-react-popout");
|
|
2249
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
2250
|
+
var CustomPopoutContent = (0, import_styled_components11.default)(import_seeds_react_popout.Popout.Content)`
|
|
2251
|
+
padding: 0;
|
|
2252
|
+
margin-left: 0;
|
|
2253
|
+
margin-right: 0;
|
|
2254
|
+
`;
|
|
2255
|
+
var MenuRoot = ({
|
|
2256
|
+
children,
|
|
2257
|
+
triggerElement,
|
|
2258
|
+
popoutProps,
|
|
2259
|
+
width: width2 = "300px",
|
|
2260
|
+
...contextProps
|
|
2261
|
+
}) => {
|
|
2262
|
+
const { isListbox, isOpen, openMenu, closeMenu, getMenuProps } = contextProps;
|
|
2263
|
+
const setIsOpen = (0, import_react9.useCallback)(
|
|
2264
|
+
(newIsOpen) => {
|
|
2265
|
+
newIsOpen ? openMenu?.() : closeMenu?.();
|
|
2266
|
+
},
|
|
2267
|
+
[openMenu, closeMenu]
|
|
2268
|
+
);
|
|
2269
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MenuProvider, { ...contextProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2270
|
+
import_seeds_react_popout.Popout,
|
|
2271
|
+
{
|
|
2272
|
+
isOpen: !!isOpen,
|
|
2273
|
+
setIsOpen,
|
|
2274
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CustomPopoutContent, { width: width2, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2275
|
+
"div",
|
|
2276
|
+
{
|
|
2277
|
+
...getMenuProps?.(
|
|
2278
|
+
{
|
|
2279
|
+
...isListbox ? {} : { role: "menu" }
|
|
2280
|
+
},
|
|
2281
|
+
// Suppress ref error for now
|
|
2282
|
+
{ suppressRefError: true }
|
|
2283
|
+
),
|
|
2284
|
+
children
|
|
2285
|
+
}
|
|
2286
|
+
) }),
|
|
2287
|
+
focusLockProps: {
|
|
2288
|
+
// correct jerking motion when scrolling while the Popout is open
|
|
2289
|
+
// returnFocus: false,
|
|
2290
|
+
crossFrame: false
|
|
2291
|
+
},
|
|
2292
|
+
disableWrapperAria: true,
|
|
2293
|
+
...popoutProps,
|
|
2294
|
+
children: triggerElement
|
|
2295
|
+
}
|
|
2296
|
+
) });
|
|
2297
|
+
};
|
|
2298
|
+
|
|
2299
|
+
// src/MenuLabel.tsx
|
|
2300
|
+
var import_react10 = require("react");
|
|
2301
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
2302
|
+
var MenuLabel = ({ children, ...rest }) => {
|
|
2303
|
+
const { getLabelProps } = useMenuContext();
|
|
2304
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { as: "label", color: "text.body", ...getLabelProps?.(), ...rest, children });
|
|
2305
|
+
};
|
|
2306
|
+
|
|
2307
|
+
// src/MenuToggleButton.tsx
|
|
2308
|
+
var import_react11 = require("react");
|
|
2309
|
+
var import_seeds_react_button = require("@sproutsocial/seeds-react-button");
|
|
2310
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
2311
|
+
var MenuToggleButton = ({
|
|
2312
|
+
children,
|
|
2313
|
+
...rest
|
|
2314
|
+
}) => {
|
|
2315
|
+
const { getToggleButtonProps, isListbox, getDropdownProps } = (0, import_react11.useContext)(MenuContext);
|
|
2316
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2317
|
+
import_seeds_react_button.Button,
|
|
2318
|
+
{
|
|
2319
|
+
appearance: "secondary",
|
|
2320
|
+
...getToggleButtonProps?.({
|
|
2321
|
+
// Decide if we want the preventKeyAction stuff. Maybe create a prop to allow for this to be overriden.
|
|
2322
|
+
...getDropdownProps?.({ preventKeyAction: true }),
|
|
2323
|
+
refKey: "innerRef",
|
|
2324
|
+
...isListbox ? {} : { role: "button", "aria-haspopup": "menu" }
|
|
2325
|
+
}),
|
|
2326
|
+
...rest,
|
|
2327
|
+
children
|
|
2328
|
+
}
|
|
2329
|
+
);
|
|
2330
|
+
};
|
|
2331
|
+
|
|
2332
|
+
// src/ActionMenu/ActionMenu.tsx
|
|
2333
|
+
var import_react13 = require("react");
|
|
2334
|
+
var import_downshift2 = require("downshift");
|
|
2335
|
+
|
|
2336
|
+
// src/hooks/useItemsFromChildren.tsx
|
|
2337
|
+
var import_react12 = __toESM(require("react"));
|
|
2338
|
+
var walkAllChildren = (children, callback) => {
|
|
2339
|
+
const walk = (element, parents2) => {
|
|
2340
|
+
if (element === null || element === void 0)
|
|
2341
|
+
return;
|
|
2342
|
+
callback(element, parents2);
|
|
2343
|
+
const newParents = [...parents2, element];
|
|
2344
|
+
const children2 = element.props?.children;
|
|
2345
|
+
import_react12.default.Children.toArray(children2).forEach((child) => {
|
|
2346
|
+
walk(child, newParents);
|
|
2347
|
+
});
|
|
2348
|
+
};
|
|
2349
|
+
const parents = [];
|
|
2350
|
+
import_react12.default.Children.toArray(children).forEach((child) => {
|
|
2351
|
+
walk(child, parents);
|
|
2352
|
+
});
|
|
2353
|
+
};
|
|
2354
|
+
var checkIfIsElement = (element, name) => {
|
|
2355
|
+
return !!(element && typeof element === "object" && "type" in element && typeof element.type !== "string" && typeof element.type.name === "string" && element.type.name === name);
|
|
2356
|
+
};
|
|
2357
|
+
var getAllMenuItems = (children) => {
|
|
2358
|
+
const allMenuItems = [];
|
|
2359
|
+
walkAllChildren(children, (element, parents) => {
|
|
2360
|
+
if (checkIfIsElement(element, "MenuItem") || checkIfIsElement(element, "MenuItemSelectable")) {
|
|
2361
|
+
allMenuItems.push({
|
|
2362
|
+
element,
|
|
2363
|
+
parents
|
|
2364
|
+
});
|
|
2365
|
+
}
|
|
2366
|
+
});
|
|
2367
|
+
return allMenuItems;
|
|
2368
|
+
};
|
|
2369
|
+
var useItemsFromChildren = ({
|
|
2370
|
+
children
|
|
2371
|
+
}) => {
|
|
2372
|
+
const { allMenuItems, menuItemsMap } = (0, import_react12.useMemo)(() => {
|
|
2373
|
+
const allMenuItemElements = getAllMenuItems(children);
|
|
2374
|
+
const menuItemsMap2 = {};
|
|
2375
|
+
const allMenuItems2 = allMenuItemElements.map(
|
|
2376
|
+
({ element, parents }, index) => {
|
|
2377
|
+
const item = {
|
|
2378
|
+
id: element.props.id,
|
|
2379
|
+
disabled: element.props.disabled,
|
|
2380
|
+
index,
|
|
2381
|
+
element,
|
|
2382
|
+
parents
|
|
2383
|
+
};
|
|
2384
|
+
menuItemsMap2[`${item.id}`] = item;
|
|
2385
|
+
return item;
|
|
2386
|
+
}
|
|
2387
|
+
);
|
|
2388
|
+
return { allMenuItems: allMenuItems2, menuItemsMap: menuItemsMap2 };
|
|
2389
|
+
}, [children]);
|
|
2390
|
+
return { allMenuItems, menuItemsMap };
|
|
2391
|
+
};
|
|
2392
|
+
|
|
2393
|
+
// src/reducers/useSelectStateReducer.tsx
|
|
2394
|
+
var import_downshift = require("downshift");
|
|
2395
|
+
var useSelectStateReducer = (state, actionAndChanges) => {
|
|
2396
|
+
const { type, changes } = actionAndChanges;
|
|
2397
|
+
switch (type) {
|
|
2398
|
+
case import_downshift.useSelect.stateChangeTypes.ToggleButtonBlur:
|
|
2399
|
+
return {
|
|
2400
|
+
...changes,
|
|
2401
|
+
// keep menu open on blur
|
|
2402
|
+
isOpen: true
|
|
2403
|
+
};
|
|
2404
|
+
default:
|
|
2405
|
+
return changes;
|
|
2406
|
+
}
|
|
2407
|
+
};
|
|
2408
|
+
var defaultUseSelectProps = {
|
|
2409
|
+
stateReducer: useSelectStateReducer,
|
|
2410
|
+
isItemDisabled: (item) => !!item.disabled
|
|
2411
|
+
};
|
|
2412
|
+
|
|
2413
|
+
// src/utils/itemToString.ts
|
|
2414
|
+
var itemToString = (item) => {
|
|
2415
|
+
return item ? item.id : "";
|
|
2416
|
+
};
|
|
2417
|
+
|
|
2418
|
+
// src/ActionMenu/ActionMenu.tsx
|
|
2419
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2420
|
+
var ActionMenu = ({
|
|
2421
|
+
children,
|
|
2422
|
+
stateReducer: externalStateReducer,
|
|
2423
|
+
...useSelectProps
|
|
2424
|
+
}) => {
|
|
2425
|
+
const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
|
|
2426
|
+
const handleStateChange = (changes) => {
|
|
2427
|
+
const { selectedItem } = changes;
|
|
2428
|
+
if (selectedItem.element?.props?.disabled) {
|
|
2429
|
+
return;
|
|
2430
|
+
}
|
|
2431
|
+
if (changes.type === import_downshift2.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === import_downshift2.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton) {
|
|
2432
|
+
const isEnterKeyDown = changes.type === import_downshift2.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter;
|
|
2433
|
+
const selectedItemProps = selectedItem.element?.props;
|
|
2434
|
+
const syntheticKeyboardEvent = new KeyboardEvent("keydown", {
|
|
2435
|
+
key: isEnterKeyDown ? "Enter" : " ",
|
|
2436
|
+
code: isEnterKeyDown ? "Enter" : "Space",
|
|
2437
|
+
bubbles: true,
|
|
2438
|
+
cancelable: true,
|
|
2439
|
+
view: window
|
|
2440
|
+
});
|
|
2441
|
+
selectedItemProps?.onClick?.(
|
|
2442
|
+
syntheticKeyboardEvent
|
|
2443
|
+
);
|
|
2444
|
+
}
|
|
2445
|
+
};
|
|
2446
|
+
const { isOpen, ...useSelectReturnProps } = (0, import_downshift2.useSelect)({
|
|
2447
|
+
...defaultUseSelectProps,
|
|
2448
|
+
items: allMenuItems,
|
|
2449
|
+
itemToString,
|
|
2450
|
+
onSelectedItemChange: handleStateChange,
|
|
2451
|
+
stateReducer: (state, actionAndChanges) => {
|
|
2452
|
+
let newState;
|
|
2453
|
+
newState = useSelectStateReducer(state, actionAndChanges);
|
|
2454
|
+
return externalStateReducer ? externalStateReducer(state, {
|
|
2455
|
+
...actionAndChanges,
|
|
2456
|
+
changes: newState
|
|
2457
|
+
}) : newState;
|
|
2458
|
+
},
|
|
2459
|
+
...useSelectProps
|
|
2460
|
+
});
|
|
2461
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2462
|
+
MenuRoot,
|
|
2463
|
+
{
|
|
2464
|
+
...{
|
|
2465
|
+
isListbox: false,
|
|
2466
|
+
items: allMenuItems,
|
|
2467
|
+
itemsMap: menuItemsMap,
|
|
2468
|
+
itemToString,
|
|
2469
|
+
isOpen,
|
|
2470
|
+
...useSelectProps,
|
|
2471
|
+
...useSelectReturnProps
|
|
2472
|
+
},
|
|
2473
|
+
children
|
|
2474
|
+
}
|
|
2475
|
+
);
|
|
2476
|
+
};
|
|
2477
|
+
|
|
2478
|
+
// src/SingleSelectMenu/SingleSelectMenu.tsx
|
|
2479
|
+
var import_react14 = require("react");
|
|
2480
|
+
var import_downshift3 = require("downshift");
|
|
2481
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
2482
|
+
var SingleSelectMenu = ({
|
|
2483
|
+
children,
|
|
2484
|
+
stateReducer: externalStateReducer,
|
|
2485
|
+
...useSelectProps
|
|
2486
|
+
}) => {
|
|
2487
|
+
const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
|
|
2488
|
+
const { isOpen, ...useSelectReturnProps } = (0, import_downshift3.useSelect)({
|
|
2489
|
+
...defaultUseSelectProps,
|
|
2490
|
+
items: allMenuItems,
|
|
2491
|
+
itemToString,
|
|
2492
|
+
stateReducer: (state, actionAndChanges) => {
|
|
2493
|
+
let newState;
|
|
2494
|
+
newState = useSelectStateReducer(state, actionAndChanges);
|
|
2495
|
+
return externalStateReducer ? externalStateReducer(state, {
|
|
2496
|
+
...actionAndChanges,
|
|
2497
|
+
changes: newState
|
|
2498
|
+
}) : newState;
|
|
2499
|
+
},
|
|
2500
|
+
...useSelectProps
|
|
2501
|
+
});
|
|
2502
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2503
|
+
MenuRoot,
|
|
2504
|
+
{
|
|
2505
|
+
...{
|
|
2506
|
+
isListbox: true,
|
|
2507
|
+
items: allMenuItems,
|
|
2508
|
+
itemsMap: menuItemsMap,
|
|
2509
|
+
itemToString,
|
|
2510
|
+
isOpen,
|
|
2511
|
+
...useSelectProps,
|
|
2512
|
+
...useSelectReturnProps
|
|
2513
|
+
},
|
|
2514
|
+
children
|
|
2515
|
+
}
|
|
2516
|
+
);
|
|
2517
|
+
};
|
|
2518
|
+
|
|
2519
|
+
// src/MultiSelectMenu/MultiSelectMenu.tsx
|
|
2520
|
+
var import_react15 = require("react");
|
|
2521
|
+
var import_downshift4 = require("downshift");
|
|
2522
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
2523
|
+
var selectReducerForMultiSelect = (state, actionAndChanges) => {
|
|
2524
|
+
const { changes, type } = actionAndChanges;
|
|
2525
|
+
switch (type) {
|
|
2526
|
+
case import_downshift4.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
|
|
2527
|
+
case import_downshift4.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
|
|
2528
|
+
case import_downshift4.useSelect.stateChangeTypes.ItemClick:
|
|
2529
|
+
return {
|
|
2530
|
+
...changes,
|
|
2531
|
+
isOpen: true,
|
|
2532
|
+
// keep the menu open after selection.
|
|
2533
|
+
// TODO: Confirm that keeping highlightedIndex the same is the desired UX
|
|
2534
|
+
// highlightedIndex: 0, // with the first option highlighted.
|
|
2535
|
+
highlightedIndex: state.highlightedIndex
|
|
2536
|
+
// keep highlightedIndex the same instead of returning to 0
|
|
2537
|
+
};
|
|
2538
|
+
}
|
|
2539
|
+
return changes;
|
|
2540
|
+
};
|
|
2541
|
+
var MultiSelectMenu = ({
|
|
2542
|
+
children,
|
|
2543
|
+
stateReducer: externalStateReducer,
|
|
2544
|
+
getA11yMultiStatusMessage,
|
|
2545
|
+
onMultiSelectStateChange,
|
|
2546
|
+
multiSelectStateReducer,
|
|
2547
|
+
...useSelectProps
|
|
2548
|
+
}) => {
|
|
2549
|
+
const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
|
|
2550
|
+
const multiSelectOverrides = Object.entries({
|
|
2551
|
+
...useSelectProps,
|
|
2552
|
+
getA11yStatusMessage: getA11yMultiStatusMessage,
|
|
2553
|
+
onStateChange: onMultiSelectStateChange,
|
|
2554
|
+
stateReducer: multiSelectStateReducer
|
|
2555
|
+
}).reduce(
|
|
2556
|
+
(a, [k, v]) => v ? (a[k] = v, a) : a,
|
|
2557
|
+
{}
|
|
2558
|
+
);
|
|
2559
|
+
const {
|
|
2560
|
+
getSelectedItemProps,
|
|
2561
|
+
addSelectedItem,
|
|
2562
|
+
removeSelectedItem,
|
|
2563
|
+
selectedItems,
|
|
2564
|
+
getDropdownProps,
|
|
2565
|
+
...useMultipleSelectionReturnProps
|
|
2566
|
+
} = (0, import_downshift4.useMultipleSelection)(multiSelectOverrides);
|
|
2567
|
+
const { isOpen, ...useSelectReturnProps } = (0, import_downshift4.useSelect)({
|
|
2568
|
+
...defaultUseSelectProps,
|
|
2569
|
+
items: allMenuItems,
|
|
2570
|
+
itemToString,
|
|
2571
|
+
selectedItem: null,
|
|
2572
|
+
defaultHighlightedIndex: 0,
|
|
2573
|
+
stateReducer: (state, actionAndChanges) => {
|
|
2574
|
+
let newState;
|
|
2575
|
+
newState = useSelectStateReducer(state, actionAndChanges);
|
|
2576
|
+
newState = selectReducerForMultiSelect(state, {
|
|
2577
|
+
...actionAndChanges,
|
|
2578
|
+
changes: newState
|
|
2579
|
+
});
|
|
2580
|
+
return externalStateReducer ? externalStateReducer(state, {
|
|
2581
|
+
...actionAndChanges,
|
|
2582
|
+
changes: newState
|
|
2583
|
+
}) : newState;
|
|
2584
|
+
},
|
|
2585
|
+
onStateChange: ({ type, selectedItem: newSelectedItem }) => {
|
|
2586
|
+
switch (type) {
|
|
2587
|
+
case import_downshift4.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
|
|
2588
|
+
case import_downshift4.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
|
|
2589
|
+
case import_downshift4.useSelect.stateChangeTypes.ItemClick:
|
|
2590
|
+
case import_downshift4.useSelect.stateChangeTypes.ToggleButtonBlur:
|
|
2591
|
+
if (!newSelectedItem)
|
|
2592
|
+
break;
|
|
2593
|
+
if (selectedItems?.find((item) => item?.id === newSelectedItem.id)) {
|
|
2594
|
+
removeSelectedItem(newSelectedItem);
|
|
2595
|
+
} else {
|
|
2596
|
+
addSelectedItem(newSelectedItem);
|
|
2597
|
+
}
|
|
2598
|
+
break;
|
|
2599
|
+
default:
|
|
2600
|
+
break;
|
|
2601
|
+
}
|
|
2602
|
+
},
|
|
2603
|
+
...useSelectProps
|
|
2604
|
+
});
|
|
2605
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2606
|
+
MenuRoot,
|
|
2607
|
+
{
|
|
2608
|
+
...{
|
|
2609
|
+
isListbox: true,
|
|
2610
|
+
items: allMenuItems,
|
|
2611
|
+
itemsMap: menuItemsMap,
|
|
2612
|
+
itemToString,
|
|
2613
|
+
isOpen,
|
|
2614
|
+
getSelectedItemProps,
|
|
2615
|
+
addSelectedItem,
|
|
2616
|
+
removeSelectedItem,
|
|
2617
|
+
selectedItems,
|
|
2618
|
+
getDropdownProps,
|
|
2619
|
+
getA11yMultiStatusMessage,
|
|
2620
|
+
onMultiSelectStateChange,
|
|
2621
|
+
multiSelectStateReducer,
|
|
2622
|
+
...useSelectProps,
|
|
2623
|
+
...useSelectReturnProps,
|
|
2624
|
+
...useMultipleSelectionReturnProps
|
|
2625
|
+
},
|
|
2626
|
+
children
|
|
2627
|
+
}
|
|
2628
|
+
);
|
|
2629
|
+
};
|
|
2630
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
2631
|
+
0 && (module.exports = {
|
|
2632
|
+
ActionMenu,
|
|
2633
|
+
INPUT_TYPES,
|
|
2634
|
+
MenuContent,
|
|
2635
|
+
MenuContext,
|
|
2636
|
+
MenuFooter,
|
|
2637
|
+
MenuGroup,
|
|
2638
|
+
MenuHeader,
|
|
2639
|
+
MenuItem,
|
|
2640
|
+
MenuItemContainer,
|
|
2641
|
+
MenuItemSelectable,
|
|
2642
|
+
MenuItemSelectableAction,
|
|
2643
|
+
MenuItemSelectableRow,
|
|
2644
|
+
MenuItemSelectableText,
|
|
2645
|
+
MenuLabel,
|
|
2646
|
+
MenuProvider,
|
|
2647
|
+
MenuRoot,
|
|
2648
|
+
MenuToggleButton,
|
|
2649
|
+
MultiSelectMenu,
|
|
2650
|
+
SelectionIndicator,
|
|
2651
|
+
SingleSelectMenu,
|
|
2652
|
+
StyledMenuGroup,
|
|
2653
|
+
StyledMenuGroupUl,
|
|
2654
|
+
StyledTitle,
|
|
2655
|
+
defaultUseSelectProps,
|
|
2656
|
+
useItemsFromChildren,
|
|
2657
|
+
useMenu,
|
|
2658
|
+
useMenuContext,
|
|
2659
|
+
useSelectStateReducer
|
|
2660
|
+
});
|
|
2661
|
+
/*! Bundled license information:
|
|
2662
|
+
|
|
2663
|
+
object-assign/index.js:
|
|
2664
|
+
(*
|
|
2665
|
+
object-assign
|
|
2666
|
+
(c) Sindre Sorhus
|
|
2667
|
+
@license MIT
|
|
2668
|
+
*)
|
|
2669
|
+
*/
|
|
2670
|
+
//# sourceMappingURL=index.js.map
|