@bundle-stats/ui 4.9.3-beta.0 → 4.9.3-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/lib/ui/button/button.js +6 -2
  2. package/lib/ui/button/button.js.map +1 -1
  3. package/lib/ui/button/button.module.css +30 -1
  4. package/lib/ui/control-group/control-group.js +16 -0
  5. package/lib/ui/control-group/control-group.js.map +1 -0
  6. package/lib/ui/control-group/control-group.module.css +23 -0
  7. package/lib/ui/control-group/index.js +18 -0
  8. package/lib/ui/control-group/index.js.map +1 -0
  9. package/lib/ui/dropdown/dropdown.js +4 -3
  10. package/lib/ui/dropdown/dropdown.js.map +1 -1
  11. package/lib/ui/dropdown/dropdown.module.css +26 -2
  12. package/lib/ui/index.js +3 -1
  13. package/lib/ui/index.js.map +1 -1
  14. package/lib/ui/input-search/input-search.js +1 -2
  15. package/lib/ui/input-search/input-search.js.map +1 -1
  16. package/lib/ui/input-search/input-search.module.css +1 -7
  17. package/lib-esm/ui/button/button.js +6 -2
  18. package/lib-esm/ui/button/button.js.map +1 -1
  19. package/lib-esm/ui/button/button.module.css +30 -1
  20. package/lib-esm/ui/control-group/control-group.js +9 -0
  21. package/lib-esm/ui/control-group/control-group.js.map +1 -0
  22. package/lib-esm/ui/control-group/control-group.module.css +23 -0
  23. package/lib-esm/ui/control-group/index.js +2 -0
  24. package/lib-esm/ui/control-group/index.js.map +1 -0
  25. package/lib-esm/ui/dropdown/dropdown.js +4 -3
  26. package/lib-esm/ui/dropdown/dropdown.js.map +1 -1
  27. package/lib-esm/ui/dropdown/dropdown.module.css +26 -2
  28. package/lib-esm/ui/index.js +1 -0
  29. package/lib-esm/ui/index.js.map +1 -1
  30. package/lib-esm/ui/input-search/input-search.js +1 -2
  31. package/lib-esm/ui/input-search/input-search.js.map +1 -1
  32. package/lib-esm/ui/input-search/input-search.module.css +1 -7
  33. package/package.json +8 -8
  34. package/src/ui/button/button.module.css +30 -1
  35. package/src/ui/button/button.stories.tsx +112 -23
  36. package/src/ui/button/button.tsx +15 -1
  37. package/src/ui/control-group/control-group.module.css +23 -0
  38. package/src/ui/control-group/control-group.stories.tsx +24 -0
  39. package/src/ui/control-group/control-group.tsx +17 -0
  40. package/src/ui/control-group/index.ts +1 -0
  41. package/src/ui/dropdown/dropdown.jsx +7 -6
  42. package/src/ui/dropdown/dropdown.module.css +26 -2
  43. package/src/ui/index.js +1 -0
  44. package/src/ui/input-search/input-search.module.css +1 -7
  45. package/src/ui/input-search/input-search.tsx +2 -4
  46. package/types/ui/button/button.d.ts +4 -0
  47. package/types/ui/control-group/control-group.d.ts +3 -0
  48. package/types/ui/control-group/index.d.ts +1 -0
  49. package/types/ui/dropdown/dropdown.d.ts +3 -0
  50. package/types/ui/index.d.ts +1 -0
@@ -7,6 +7,7 @@ exports.Button = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const classnames_1 = __importDefault(require("classnames"));
9
9
  const button_1 = require("ariakit/button");
10
+ const icon_1 = require("../icon");
10
11
  const button_module_css_1 = __importDefault(require("./button.module.css"));
11
12
  const SIZE = {
12
13
  SMALL: 'small',
@@ -22,11 +23,14 @@ const KIND = {
22
23
  SUCCES: 'success',
23
24
  };
24
25
  const Button = (props) => {
25
- const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = button_1.Button, ...restProps } = props;
26
+ const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = button_1.Button, children, Icon = icon_1.Icon, glyph, rightGlyph, ...restProps } = props;
26
27
  const resolvedPadding = padding || ((outline || solid) && size);
27
28
  const resolvedRadius = radius || ((outline || solid) && size);
28
29
  const rootClassName = (0, classnames_1.default)(button_module_css_1.default.root, button_module_css_1.default[size], kind && button_module_css_1.default[kind], outline && button_module_css_1.default.outline, outline && button_module_css_1.default[`outline--${kind}`], solid && button_module_css_1.default.solid, solid && button_module_css_1.default[`solid--${kind}`], resolvedPadding && button_module_css_1.default[`padding--${resolvedPadding}`], resolvedPadding && outline && button_module_css_1.default[`outline--padding--${resolvedPadding}`], resolvedRadius && button_module_css_1.default[`radius--${resolvedRadius}`], active && button_module_css_1.default.active, active && outline && button_module_css_1.default[`active-outline-${kind}`], button_module_css_1.default[size], className);
29
- return react_1.default.createElement(Component, { ...restProps, className: rootClassName });
30
+ return (react_1.default.createElement(Component, { ...restProps, className: rootClassName },
31
+ glyph && react_1.default.createElement(Icon, { glyph: glyph, size: size, className: button_module_css_1.default.glyph }),
32
+ children && react_1.default.createElement("span", { className: button_module_css_1.default.content }, children),
33
+ rightGlyph && react_1.default.createElement(Icon, { glyph: glyph, size: size, className: button_module_css_1.default.glyph })));
30
34
  };
31
35
  exports.Button = Button;
32
36
  exports.Button.SIZE = SIZE;
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,2CAA+D;AAE/D,4EAAsC;AAEtC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,MAAM,IAAI,GAAG;IACX,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;CACT,CAAC;AAgBJ,MAAM,MAAM,GAAG,CACpB,KAAqF,EACrF,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,EAAE,EAAE,SAAS,GAAG,eAAmB,EACnC,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAGV,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,2BAAG,CAAC,IAAI,EACR,2BAAG,CAAC,IAAI,CAAC,EACT,IAAI,IAAI,2BAAG,CAAC,IAAI,CAAC,EAEjB,OAAO,IAAI,2BAAG,CAAC,OAAO,EACtB,OAAO,IAAI,2BAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,2BAAG,CAAC,KAAK,EAClB,KAAK,IAAI,2BAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,2BAAG,CAAC,YAAY,eAAe,EAAE,CAAC,EACrD,eAAe,IAAI,OAAO,IAAI,2BAAG,CAAC,qBAAqB,eAAe,EAAE,CAAC,EACzE,cAAc,IAAI,2BAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,2BAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,2BAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,2BAAG,CAAC,IAAI,CAAC,EACT,SAAS,CACV,CAAC;IAEF,OAAO,8BAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAChE,CAAC,CAAC;AA3CW,QAAA,MAAM,UA2CjB;AAEF,cAAM,CAAC,IAAI,GAAG,IAAI,CAAC;AACnB,cAAM,CAAC,IAAI,GAAG,IAAI,CAAC"}
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,2CAA+D;AAE/D,kCAA2C;AAC3C,4EAAsC;AAEtC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,MAAM,IAAI,GAAG;IACX,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;CACT,CAAC;AAmBJ,MAAM,MAAM,GAAG,CACpB,KAAqF,EACrF,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,EAAE,EAAE,SAAS,GAAG,eAAmB,EACnC,QAAQ,EACR,IAAI,GAAG,WAAQ,EACf,KAAK,EACL,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAGV,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,2BAAG,CAAC,IAAI,EACR,2BAAG,CAAC,IAAI,CAAC,EACT,IAAI,IAAI,2BAAG,CAAC,IAAI,CAAC,EAEjB,OAAO,IAAI,2BAAG,CAAC,OAAO,EACtB,OAAO,IAAI,2BAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,2BAAG,CAAC,KAAK,EAClB,KAAK,IAAI,2BAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,2BAAG,CAAC,YAAY,eAAe,EAAE,CAAC,EACrD,eAAe,IAAI,OAAO,IAAI,2BAAG,CAAC,qBAAqB,eAAe,EAAE,CAAC,EACzE,cAAc,IAAI,2BAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,2BAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,2BAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,2BAAG,CAAC,IAAI,CAAC,EACT,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa;QAC/C,KAAK,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI;QACjE,QAAQ,IAAI,wCAAM,SAAS,EAAE,2BAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI,CAC7D,CACb,CAAC;AACJ,CAAC,CAAC;AArDW,QAAA,MAAM,UAqDjB;AAEF,cAAM,CAAC,IAAI,GAAG,IAAI,CAAC;AACnB,cAAM,CAAC,IAAI,GAAG,IAAI,CAAC"}
@@ -1,11 +1,18 @@
1
1
  .root {
2
+ display: inline-flex;
3
+ align-items: center;
4
+ gap: var(--space-xxsmall);
2
5
  appearance: none;
3
6
  padding: 0;
4
7
  border: 0;
5
8
  background: none;
6
9
  transition: var(--transition-out);
7
10
  color: var(--color-text-ultra-light);
8
- line-height: 1;
11
+ font-family: var(--font-family);
12
+ }
13
+
14
+ a.root {
15
+ text-decoration: none;
9
16
  }
10
17
 
11
18
  .root:hover,
@@ -15,6 +22,15 @@
15
22
  transition: var(--transition-in);
16
23
  }
17
24
 
25
+ .glyph {
26
+ flex: 0 0 auto;
27
+ }
28
+
29
+ .text {
30
+ min-width: 0;
31
+ flex: 1 1 auto;
32
+ }
33
+
18
34
  /**
19
35
  * Kind variation
20
36
  */
@@ -233,14 +249,27 @@
233
249
  */
234
250
  .small {
235
251
  font-size: var(--size-small);
252
+ gap: var(--space-xxxsmall);
253
+ line-height: var(--space-xsmall);
254
+ }
255
+
256
+ .small .glyph {
257
+ width: calc(var(--space-xsmall) + 2px);
258
+ height: calc(var(--space-xsmall) + 2px);
259
+ margin-top: -1px;
260
+ margin-bottom: -1px;
236
261
  }
237
262
 
238
263
  .medium {
239
264
  font-size: var(--size-medium);
265
+ gap: var(--space-xxsmall);
266
+ line-height: var(--space-small);
240
267
  }
241
268
 
242
269
  .large {
243
270
  font-size: var(--size-large);
271
+ gap: var(--space-xxsmall);
272
+ line-height: var(--space-small);
244
273
  }
245
274
 
246
275
  /**
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.ControlGroup = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const classnames_1 = __importDefault(require("classnames"));
9
+ const flex_stack_1 = require("../../layout/flex-stack");
10
+ const control_group_module_css_1 = __importDefault(require("./control-group.module.css"));
11
+ const ControlGroup = (props) => {
12
+ const { className = '', ...restProps } = props;
13
+ return (react_1.default.createElement(flex_stack_1.FlexStack, { className: (0, classnames_1.default)(control_group_module_css_1.default.root, className), space: "no-space", alignItems: "center", ...restProps }));
14
+ };
15
+ exports.ControlGroup = ControlGroup;
16
+ //# sourceMappingURL=control-group.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"control-group.js","sourceRoot":"","sources":["../../../src/ui/control-group/control-group.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAE5B,wDAAoD;AACpD,0FAA6C;AAEtC,MAAM,YAAY,GAAG,CAAC,KAA6C,EAAE,EAAE;IAC5E,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC/C,OAAO,CACL,8BAAC,sBAAS,IACR,SAAS,EAAE,IAAA,oBAAE,EAAC,kCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,QAAQ,KACf,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,YAAY,gBAUvB"}
@@ -0,0 +1,23 @@
1
+ .root > *:not(:first-child) {
2
+ border-top-left-radius: 0px;
3
+ border-bottom-left-radius: 0px;
4
+
5
+ margin-left: -1px;
6
+ }
7
+
8
+ .root > *:not(:last-child) {
9
+ border-top-right-radius: 0px;
10
+ border-bottom-right-radius: 0px;
11
+ }
12
+
13
+ .root > * {
14
+ position: relative;
15
+ z-index: 0;
16
+ }
17
+
18
+ .root > *:hover,
19
+ .root > *:active,
20
+ .root > *:focus {
21
+ z-index: 1;
22
+ box-shadow: none;
23
+ }
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./control-group"), exports);
18
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/control-group/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAgC"}
@@ -9,7 +9,6 @@ const prop_types_1 = __importDefault(require("prop-types"));
9
9
  const classnames_1 = __importDefault(require("classnames"));
10
10
  const menu_1 = require("ariakit/menu");
11
11
  const flex_stack_1 = require("../../layout/flex-stack");
12
- const button_1 = require("../button");
13
12
  const icon_1 = require("../icon");
14
13
  const dropdown_module_css_1 = __importDefault(require("./dropdown.module.css"));
15
14
  const Item = ({ className = '', isActive = false, ...restProps }) => (react_1.default.createElement(menu_1.MenuItem, { className: (0, classnames_1.default)(dropdown_module_css_1.default.item, className, isActive && dropdown_module_css_1.default.itemActive), ...restProps }));
@@ -22,11 +21,11 @@ Item.defaultProps = {
22
21
  isActive: false,
23
22
  };
24
23
  const Dropdown = (props) => {
25
- const { className, buttonClassName, label, ariaLabel, glyph, children } = props;
24
+ const { className, buttonClassName, label, ariaLabel, glyph, disabled, children } = props;
26
25
  const rootClassName = (0, classnames_1.default)(dropdown_module_css_1.default.root, className);
27
26
  const menuState = (0, menu_1.useMenuState)();
28
27
  return (react_1.default.createElement("div", { className: rootClassName },
29
- react_1.default.createElement(menu_1.MenuButton, { as: button_1.Button, outline: true, size: button_1.Button.SIZE.SMALL, state: menuState, tabIndex: null, className: (0, classnames_1.default)(dropdown_module_css_1.default.button, buttonClassName) },
28
+ react_1.default.createElement(menu_1.MenuButton, { state: menuState, className: (0, classnames_1.default)(dropdown_module_css_1.default.button, buttonClassName), disabled: disabled, tabIndex: null },
30
29
  react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", className: dropdown_module_css_1.default.label },
31
30
  glyph && react_1.default.createElement(icon_1.Icon, { className: dropdown_module_css_1.default.labelIcon, glyph: glyph }),
32
31
  label && react_1.default.createElement("span", { className: dropdown_module_css_1.default.labelText }, label))),
@@ -46,6 +45,7 @@ exports.Dropdown.defaultProps = {
46
45
  label: null,
47
46
  ariaLabel: '',
48
47
  glyph: null,
48
+ disabled: false,
49
49
  };
50
50
  exports.Dropdown.propTypes = {
51
51
  className: prop_types_1.default.string,
@@ -53,6 +53,7 @@ exports.Dropdown.propTypes = {
53
53
  label: prop_types_1.default.node,
54
54
  ariaLabel: prop_types_1.default.string,
55
55
  glyph: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
56
+ disabled: prop_types_1.default.bool,
56
57
  children: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.element, prop_types_1.default.func]).isRequired,
57
58
  };
58
59
  exports.Dropdown.Item = Item;
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,4DAA4B;AAC5B,uCAAwE;AAExE,wDAAoD;AACpD,sCAAmC;AACnC,kCAA+B;AAC/B,gFAAwC;AAExC,MAAM,IAAI,GAAG,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CACnE,8BAAC,eAAQ,IAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,6BAAG,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,IAAI,6BAAG,CAAC,UAAU,CAAC,KAAM,SAAS,GAAI,CAC5F,CAAC;AAEF,IAAI,CAAC,SAAS,GAAG;IACf,SAAS,EAAE,oBAAS,CAAC,MAAM;IAC3B,QAAQ,EAAE,oBAAS,CAAC,IAAI;CACzB,CAAC;AAEF,IAAI,CAAC,YAAY,GAAG;IAClB,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEK,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,EAAE;IAChC,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAChF,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,6BAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,IAAA,mBAAY,GAAE,CAAC;IAEjC,OAAO,CACL,uCAAK,SAAS,EAAE,aAAa;QAC3B,8BAAC,iBAAU,IACT,EAAE,EAAE,eAAM,EACV,OAAO,QACP,IAAI,EAAE,eAAM,CAAC,IAAI,CAAC,KAAK,EACvB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,IAAA,oBAAE,EAAC,6BAAG,CAAC,MAAM,EAAE,eAAe,CAAC;YAE1C,8BAAC,sBAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,6BAAG,CAAC,KAAK;gBACjE,KAAK,IAAI,8BAAC,WAAI,IAAC,SAAS,EAAE,6BAAG,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI;gBACzD,KAAK,IAAI,wCAAM,SAAS,EAAE,6BAAG,CAAC,SAAS,IAAG,KAAK,CAAQ,CAC9C,CACD;QACb,8BAAC,WAAI,IAAC,KAAK,EAAE,SAAS,gBAAc,SAAS,IAAI,KAAK,EAAE,SAAS,EAAE,6BAAG,CAAC,QAAQ,IAC5E,OAAO,QAAQ,KAAK,UAAU;YAC7B,CAAC,CAAC,QAAQ,CAAC;gBACP,QAAQ,EAAE,IAAI;gBACd,IAAI,EAAE,SAAS;gBACf,iBAAiB,EAAE,6BAAG,CAAC,IAAI;gBAC3B,uBAAuB,EAAE,6BAAG,CAAC,UAAU;aACxC,CAAC;YACJ,CAAC,CAAC,QAAQ,CACP,CACH,CACP,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,QAAQ,YAgCnB;AAEF,gBAAQ,CAAC,YAAY,GAAG;IACtB,SAAS,EAAE,EAAE;IACb,eAAe,EAAE,EAAE;IACnB,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,EAAE;IACb,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,gBAAQ,CAAC,SAAS,GAAG;IAEnB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAG3B,eAAe,EAAE,oBAAS,CAAC,MAAM;IAGjC,KAAK,EAAE,oBAAS,CAAC,IAAI;IAGrB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAG3B,KAAK,EAAE,oBAAS,CAAC,SAAS,CAAC,CAAC,oBAAS,CAAC,MAAM,EAAE,oBAAS,CAAC,IAAI,CAAC,CAAC;IAG9D,QAAQ,EAAE,oBAAS,CAAC,SAAS,CAAC,CAAC,oBAAS,CAAC,MAAM,EAAE,oBAAS,CAAC,OAAO,EAAE,oBAAS,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU;CAChG,CAAC;AAEF,gBAAQ,CAAC,IAAI,GAAG,IAAI,CAAC"}
1
+ {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.jsx"],"names":[],"mappings":"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"}
@@ -3,9 +3,33 @@
3
3
  }
4
4
 
5
5
  .button {
6
+ background: none;
7
+ border: none;
8
+ padding: 0;
9
+
10
+ border: 1px solid var(--color-outline);
11
+ border-radius: var(--radius-small);
12
+ padding: calc(var(--space-xxsmall) - 1px);
13
+
14
+ appearance: none;
15
+ background: none;
6
16
  font-size: var(--size-small);
7
17
  line-height: var(--space-small);
8
18
  white-space: nowrap;
19
+ color: var(--color-text-light);
20
+ }
21
+
22
+ .button[aria-expanded=true],
23
+ .button:hover,
24
+ .button:focus,
25
+ .button:active {
26
+ outline: none;
27
+ box-shadow: var(--outline-hover);
28
+ color: var(--color-text);
29
+ }
30
+
31
+ .button[disabled] {
32
+ color: var(--color-text-ultra-light);
9
33
  }
10
34
 
11
35
  .dropdown {
@@ -17,7 +41,7 @@
17
41
  background: var(--color-background);
18
42
  min-width: 12em;
19
43
  z-index: var(--layer-high);
20
- padding: var(--space-xxxsmall);
44
+ padding: calc(var(--space-xxxsmall) / 2);
21
45
  }
22
46
 
23
47
  .dropdown:focus {
@@ -31,7 +55,7 @@
31
55
  outline: none;
32
56
  border: 0;
33
57
  border-radius: var(--radius-small);
34
- padding: var(--space-xxxsmall) var(--space-xxxsmall);
58
+ padding: var(--space-xxxsmall) calc(var(--space-xxxsmall) + var(--space-xxxsmall) / 2);
35
59
  background: none;
36
60
  text-align: left;
37
61
  color: var(--color-text-light);
package/lib/ui/index.js CHANGED
@@ -1,12 +1,14 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Tooltip = exports.Tag = exports.Tabs = exports.Table = exports.Skeleton = exports.Loader = exports.InputSearch = exports.Input = exports.Icon = exports.HoverCard = exports.HorizontalBarChart = exports.Filters = exports.FileName = exports.EmptySet = exports.Dropdown = exports.Container = exports.Button = exports.Alert = void 0;
3
+ exports.Tooltip = exports.Tag = exports.Tabs = exports.Table = exports.Skeleton = exports.Loader = exports.InputSearch = exports.Input = exports.Icon = exports.HoverCard = exports.HorizontalBarChart = exports.Filters = exports.FileName = exports.EmptySet = exports.Dropdown = exports.ControlGroup = exports.Container = exports.Button = exports.Alert = void 0;
4
4
  var alert_1 = require("./alert");
5
5
  Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return alert_1.Alert; } });
6
6
  var button_1 = require("./button");
7
7
  Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
8
8
  var container_1 = require("./container");
9
9
  Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return container_1.Container; } });
10
+ var control_group_1 = require("./control-group");
11
+ Object.defineProperty(exports, "ControlGroup", { enumerable: true, get: function () { return control_group_1.ControlGroup; } });
10
12
  var dropdown_1 = require("./dropdown");
11
13
  Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return dropdown_1.Dropdown; } });
12
14
  var empty_set_1 = require("./empty-set");
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.js"],"names":[],"mappings":";;;AAAA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAChB,+DAA4D;AAAnD,0HAAA,kBAAkB,OAAA;AAC3B,2CAAyC;AAAhC,uGAAA,SAAS,OAAA;AAClB,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,6BAA4B;AAAnB,0FAAA,GAAG,OAAA;AACZ,qCAAoC;AAA3B,kGAAA,OAAO,OAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.js"],"names":[],"mappings":";;;AAAA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAChB,+DAA4D;AAAnD,0HAAA,kBAAkB,OAAA;AAC3B,2CAAyC;AAAhC,uGAAA,SAAS,OAAA;AAClB,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,6BAA4B;AAAnB,0FAAA,GAAG,OAAA;AACZ,qCAAoC;AAA3B,kGAAA,OAAO,OAAA"}
@@ -57,8 +57,7 @@ const InputSearch = (props) => {
57
57
  }, [changeValue]);
58
58
  return (react_1.default.createElement("div", { className: rootClassname },
59
59
  react_1.default.createElement(input_1.Input, { className: input_search_module_css_1.default.input, placeholder: placeholder, onChange: inputOnChange, value: value, size: "small", autoComplete: "off" }),
60
- value && (react_1.default.createElement(button_1.Button, { radius: "circle", padding: "small", type: "button", onClick: clearButtonOnClick, "aria-label": "Clear search", className: input_search_module_css_1.default.cancelButton },
61
- react_1.default.createElement(icon_1.Icon, { className: input_search_module_css_1.default.cancelButtonIcon, glyph: icon_1.Icon.ICONS.CANCEL })))));
60
+ value && (react_1.default.createElement(button_1.Button, { radius: "circle", glyph: icon_1.Icon.ICONS.CANCEL, type: "button", onClick: clearButtonOnClick, "aria-label": "Clear search", className: input_search_module_css_1.default.cancelButton }))));
62
61
  };
63
62
  exports.InputSearch = InputSearch;
64
63
  //# sourceMappingURL=input-search.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"input-search.js","sourceRoot":"","sources":["../../../src/ui/input-search/input-search.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAgE;AAChE,4DAA4B;AAC5B,+DAAuC;AACvC,uDAA+B;AAE/B,sCAAmC;AACnC,kCAA+B;AAC/B,oCAAiC;AAEjC,wFAA4C;AASrC,MAAM,WAAW,GAAG,CACzB,KAAuE,EACvE,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,WAAW,GAAG,QAAQ,EACtB,YAAY,GAAG,EAAE,EACjB,QAAQ,GAAG,cAAI,EACf,YAAY,GAAG,GAAG,GACnB,GAAG,KAAK,CAAC;IACV,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,iCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,YAAY,CAAC,CAAC;IAGjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,QAAQ,CAAC,YAAY,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EAAC,IAAA,kBAAQ,EAAC,QAAQ,EAAE,YAAY,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAExF,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,CAAC,QAAgB,EAAE,EAAE;QACnB,IAAI,QAAQ,KAAK,KAAK,EAAE;YACtB,qBAAqB,CAAC,QAAQ,CAAC,CAAC;YAChC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACpB;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB,CAAC;IAEF,MAAM,aAAa,GAAG,IAAA,mBAAW,EAC/B,CAAC,KAA0C,EAAE,EAAE;QAC7C,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,kBAAkB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC1C,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,uCAAK,SAAS,EAAE,aAAa;QAC3B,8BAAC,aAAK,IACJ,SAAS,EAAE,iCAAG,CAAC,KAAK,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,OAAO,EACZ,YAAY,EAAC,KAAK,GAClB;QACD,KAAK,IAAI,CACR,8BAAC,eAAM,IACL,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,kBAAkB,gBAChB,cAAc,EACzB,SAAS,EAAE,iCAAG,CAAC,YAAY;YAE3B,8BAAC,WAAI,IAAC,SAAS,EAAE,iCAAG,CAAC,gBAAgB,EAAE,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,MAAM,GAAI,CAC5D,CACV,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAlEW,QAAA,WAAW,eAkEtB"}
1
+ {"version":3,"file":"input-search.js","sourceRoot":"","sources":["../../../src/ui/input-search/input-search.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAgE;AAChE,4DAA4B;AAC5B,+DAAuC;AACvC,uDAA+B;AAE/B,sCAAmC;AACnC,kCAA+B;AAC/B,oCAAiC;AAEjC,wFAA4C;AASrC,MAAM,WAAW,GAAG,CACzB,KAAuE,EACvE,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,WAAW,GAAG,QAAQ,EACtB,YAAY,GAAG,EAAE,EACjB,QAAQ,GAAG,cAAI,EACf,YAAY,GAAG,GAAG,GACnB,GAAG,KAAK,CAAC;IACV,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,iCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,YAAY,CAAC,CAAC;IAGjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,QAAQ,CAAC,YAAY,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EAAC,IAAA,kBAAQ,EAAC,QAAQ,EAAE,YAAY,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAExF,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,CAAC,QAAgB,EAAE,EAAE;QACnB,IAAI,QAAQ,KAAK,KAAK,EAAE;YACtB,qBAAqB,CAAC,QAAQ,CAAC,CAAC;YAChC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACpB;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB,CAAC;IAEF,MAAM,aAAa,GAAG,IAAA,mBAAW,EAC/B,CAAC,KAA0C,EAAE,EAAE;QAC7C,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,kBAAkB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC1C,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,uCAAK,SAAS,EAAE,aAAa;QAC3B,8BAAC,aAAK,IACJ,SAAS,EAAE,iCAAG,CAAC,KAAK,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,OAAO,EACZ,YAAY,EAAC,KAAK,GAClB;QACD,KAAK,IAAI,CACR,8BAAC,eAAM,IACL,MAAM,EAAC,QAAQ,EACf,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,MAAM,EACxB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,kBAAkB,gBAChB,cAAc,EACzB,SAAS,EAAE,iCAAG,CAAC,YAAY,GAC3B,CACH,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAhEW,QAAA,WAAW,eAgEtB"}
@@ -13,12 +13,6 @@
13
13
  right: var(--space-xxxsmall);
14
14
  top: 50%;
15
15
  transform: translateY(-50%);
16
+ padding: var(--space-xxxsmall);
16
17
  background: radial-gradient(var(--color-background) 50%, transparent);
17
- color: var(--color-text-ultra-light);
18
- }
19
-
20
- .cancelButton:focus,
21
- .cancelButton:hover,
22
- .cancelButton:active {
23
- color: var(--color-text-light);
24
18
  }
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import cx from 'classnames';
3
3
  import { Button as ButtonBaseComponent } from 'ariakit/button';
4
+ import { Icon as BaseIcon } from '../icon';
4
5
  import css from './button.module.css';
5
6
  const SIZE = {
6
7
  SMALL: 'small',
@@ -16,11 +17,14 @@ const KIND = {
16
17
  SUCCES: 'success',
17
18
  };
18
19
  export const Button = (props) => {
19
- const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = ButtonBaseComponent, ...restProps } = props;
20
+ const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = ButtonBaseComponent, children, Icon = BaseIcon, glyph, rightGlyph, ...restProps } = props;
20
21
  const resolvedPadding = padding || ((outline || solid) && size);
21
22
  const resolvedRadius = radius || ((outline || solid) && size);
22
23
  const rootClassName = cx(css.root, css[size], kind && css[kind], outline && css.outline, outline && css[`outline--${kind}`], solid && css.solid, solid && css[`solid--${kind}`], resolvedPadding && css[`padding--${resolvedPadding}`], resolvedPadding && outline && css[`outline--padding--${resolvedPadding}`], resolvedRadius && css[`radius--${resolvedRadius}`], active && css.active, active && outline && css[`active-outline-${kind}`], css[size], className);
23
- return React.createElement(Component, { ...restProps, className: rootClassName });
24
+ return (React.createElement(Component, { ...restProps, className: rootClassName },
25
+ glyph && React.createElement(Icon, { glyph: glyph, size: size, className: css.glyph }),
26
+ children && React.createElement("span", { className: css.content }, children),
27
+ rightGlyph && React.createElement(Icon, { glyph: glyph, size: size, className: css.glyph })));
24
28
  };
25
29
  Button.SIZE = SIZE;
26
30
  Button.KIND = KIND;
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,MAAM,IAAI,GAAG;IACX,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;CACT,CAAC;AAgBX,MAAM,CAAC,MAAM,MAAM,GAAG,CACpB,KAAqF,EACrF,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,EAAE,EAAE,SAAS,GAAG,mBAAmB,EACnC,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAGV,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,GAAG,CAAC,IAAI,CAAC,EACT,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,EAEjB,OAAO,IAAI,GAAG,CAAC,OAAO,EACtB,OAAO,IAAI,GAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,GAAG,CAAC,KAAK,EAClB,KAAK,IAAI,GAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,GAAG,CAAC,YAAY,eAAe,EAAE,CAAC,EACrD,eAAe,IAAI,OAAO,IAAI,GAAG,CAAC,qBAAqB,eAAe,EAAE,CAAC,EACzE,cAAc,IAAI,GAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,GAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,GAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,GAAG,CAAC,IAAI,CAAC,EACT,SAAS,CACV,CAAC;IAEF,OAAO,oBAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAChE,CAAC,CAAC;AAEF,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;AACnB,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC"}
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,MAAM,IAAI,GAAG;IACX,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;CACT,CAAC;AAmBX,MAAM,CAAC,MAAM,MAAM,GAAG,CACpB,KAAqF,EACrF,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,EAAE,EAAE,SAAS,GAAG,mBAAmB,EACnC,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAGV,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,GAAG,CAAC,IAAI,CAAC,EACT,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,EAEjB,OAAO,IAAI,GAAG,CAAC,OAAO,EACtB,OAAO,IAAI,GAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,GAAG,CAAC,KAAK,EAClB,KAAK,IAAI,GAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,GAAG,CAAC,YAAY,eAAe,EAAE,CAAC,EACrD,eAAe,IAAI,OAAO,IAAI,GAAG,CAAC,qBAAqB,eAAe,EAAE,CAAC,EACzE,cAAc,IAAI,GAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,GAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,GAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,GAAG,CAAC,IAAI,CAAC,EACT,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa;QAC/C,KAAK,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI;QACjE,QAAQ,IAAI,8BAAM,SAAS,EAAE,GAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI,CAC7D,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;AACnB,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC"}
@@ -1,11 +1,18 @@
1
1
  .root {
2
+ display: inline-flex;
3
+ align-items: center;
4
+ gap: var(--space-xxsmall);
2
5
  appearance: none;
3
6
  padding: 0;
4
7
  border: 0;
5
8
  background: none;
6
9
  transition: var(--transition-out);
7
10
  color: var(--color-text-ultra-light);
8
- line-height: 1;
11
+ font-family: var(--font-family);
12
+ }
13
+
14
+ a.root {
15
+ text-decoration: none;
9
16
  }
10
17
 
11
18
  .root:hover,
@@ -15,6 +22,15 @@
15
22
  transition: var(--transition-in);
16
23
  }
17
24
 
25
+ .glyph {
26
+ flex: 0 0 auto;
27
+ }
28
+
29
+ .text {
30
+ min-width: 0;
31
+ flex: 1 1 auto;
32
+ }
33
+
18
34
  /**
19
35
  * Kind variation
20
36
  */
@@ -233,14 +249,27 @@
233
249
  */
234
250
  .small {
235
251
  font-size: var(--size-small);
252
+ gap: var(--space-xxxsmall);
253
+ line-height: var(--space-xsmall);
254
+ }
255
+
256
+ .small .glyph {
257
+ width: calc(var(--space-xsmall) + 2px);
258
+ height: calc(var(--space-xsmall) + 2px);
259
+ margin-top: -1px;
260
+ margin-bottom: -1px;
236
261
  }
237
262
 
238
263
  .medium {
239
264
  font-size: var(--size-medium);
265
+ gap: var(--space-xxsmall);
266
+ line-height: var(--space-small);
240
267
  }
241
268
 
242
269
  .large {
243
270
  font-size: var(--size-large);
271
+ gap: var(--space-xxsmall);
272
+ line-height: var(--space-small);
244
273
  }
245
274
 
246
275
  /**
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import cx from 'classnames';
3
+ import { FlexStack } from '../../layout/flex-stack';
4
+ import css from './control-group.module.css';
5
+ export const ControlGroup = (props) => {
6
+ const { className = '', ...restProps } = props;
7
+ return (React.createElement(FlexStack, { className: cx(css.root, className), space: "no-space", alignItems: "center", ...restProps }));
8
+ };
9
+ //# sourceMappingURL=control-group.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"control-group.js","sourceRoot":"","sources":["../../../src/ui/control-group/control-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,GAAG,MAAM,4BAA4B,CAAC;AAE7C,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAA6C,EAAE,EAAE;IAC5E,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC/C,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,QAAQ,KACf,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC"}
@@ -0,0 +1,23 @@
1
+ .root > *:not(:first-child) {
2
+ border-top-left-radius: 0px;
3
+ border-bottom-left-radius: 0px;
4
+
5
+ margin-left: -1px;
6
+ }
7
+
8
+ .root > *:not(:last-child) {
9
+ border-top-right-radius: 0px;
10
+ border-bottom-right-radius: 0px;
11
+ }
12
+
13
+ .root > * {
14
+ position: relative;
15
+ z-index: 0;
16
+ }
17
+
18
+ .root > *:hover,
19
+ .root > *:active,
20
+ .root > *:focus {
21
+ z-index: 1;
22
+ box-shadow: none;
23
+ }
@@ -0,0 +1,2 @@
1
+ export * from './control-group';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/control-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
3
3
  import cx from 'classnames';
4
4
  import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
5
5
  import { FlexStack } from '../../layout/flex-stack';
6
- import { Button } from '../button';
7
6
  import { Icon } from '../icon';
8
7
  import css from './dropdown.module.css';
9
8
  const Item = ({ className = '', isActive = false, ...restProps }) => (React.createElement(MenuItem, { className: cx(css.item, className, isActive && css.itemActive), ...restProps }));
@@ -16,11 +15,11 @@ Item.defaultProps = {
16
15
  isActive: false,
17
16
  };
18
17
  export const Dropdown = (props) => {
19
- const { className, buttonClassName, label, ariaLabel, glyph, children } = props;
18
+ const { className, buttonClassName, label, ariaLabel, glyph, disabled, children } = props;
20
19
  const rootClassName = cx(css.root, className);
21
20
  const menuState = useMenuState();
22
21
  return (React.createElement("div", { className: rootClassName },
23
- React.createElement(MenuButton, { as: Button, outline: true, size: Button.SIZE.SMALL, state: menuState, tabIndex: null, className: cx(css.button, buttonClassName) },
22
+ React.createElement(MenuButton, { state: menuState, className: cx(css.button, buttonClassName), disabled: disabled, tabIndex: null },
24
23
  React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", className: css.label },
25
24
  glyph && React.createElement(Icon, { className: css.labelIcon, glyph: glyph }),
26
25
  label && React.createElement("span", { className: css.labelText }, label))),
@@ -39,6 +38,7 @@ Dropdown.defaultProps = {
39
38
  label: null,
40
39
  ariaLabel: '',
41
40
  glyph: null,
41
+ disabled: false,
42
42
  };
43
43
  Dropdown.propTypes = {
44
44
  className: PropTypes.string,
@@ -46,6 +46,7 @@ Dropdown.propTypes = {
46
46
  label: PropTypes.node,
47
47
  ariaLabel: PropTypes.string,
48
48
  glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
49
+ disabled: PropTypes.bool,
49
50
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
50
51
  };
51
52
  Dropdown.Item = Item;
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.jsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.jsx"],"names":[],"mappings":"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"}
@@ -3,9 +3,33 @@
3
3
  }
4
4
 
5
5
  .button {
6
+ background: none;
7
+ border: none;
8
+ padding: 0;
9
+
10
+ border: 1px solid var(--color-outline);
11
+ border-radius: var(--radius-small);
12
+ padding: calc(var(--space-xxsmall) - 1px);
13
+
14
+ appearance: none;
15
+ background: none;
6
16
  font-size: var(--size-small);
7
17
  line-height: var(--space-small);
8
18
  white-space: nowrap;
19
+ color: var(--color-text-light);
20
+ }
21
+
22
+ .button[aria-expanded=true],
23
+ .button:hover,
24
+ .button:focus,
25
+ .button:active {
26
+ outline: none;
27
+ box-shadow: var(--outline-hover);
28
+ color: var(--color-text);
29
+ }
30
+
31
+ .button[disabled] {
32
+ color: var(--color-text-ultra-light);
9
33
  }
10
34
 
11
35
  .dropdown {
@@ -17,7 +41,7 @@
17
41
  background: var(--color-background);
18
42
  min-width: 12em;
19
43
  z-index: var(--layer-high);
20
- padding: var(--space-xxxsmall);
44
+ padding: calc(var(--space-xxxsmall) / 2);
21
45
  }
22
46
 
23
47
  .dropdown:focus {
@@ -31,7 +55,7 @@
31
55
  outline: none;
32
56
  border: 0;
33
57
  border-radius: var(--radius-small);
34
- padding: var(--space-xxxsmall) var(--space-xxxsmall);
58
+ padding: var(--space-xxxsmall) calc(var(--space-xxxsmall) + var(--space-xxxsmall) / 2);
35
59
  background: none;
36
60
  text-align: left;
37
61
  color: var(--color-text-light);
@@ -1,6 +1,7 @@
1
1
  export { Alert } from './alert';
2
2
  export { Button } from './button';
3
3
  export { Container } from './container';
4
+ export { ControlGroup } from './control-group';
4
5
  export { Dropdown } from './dropdown';
5
6
  export { EmptySet } from './empty-set';
6
7
  export { FileName } from './file-name';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
@@ -28,7 +28,6 @@ export const InputSearch = (props) => {
28
28
  }, [changeValue]);
29
29
  return (React.createElement("div", { className: rootClassname },
30
30
  React.createElement(Input, { className: css.input, placeholder: placeholder, onChange: inputOnChange, value: value, size: "small", autoComplete: "off" }),
31
- value && (React.createElement(Button, { radius: "circle", padding: "small", type: "button", onClick: clearButtonOnClick, "aria-label": "Clear search", className: css.cancelButton },
32
- React.createElement(Icon, { className: css.cancelButtonIcon, glyph: Icon.ICONS.CANCEL })))));
31
+ value && (React.createElement(Button, { radius: "circle", glyph: Icon.ICONS.CANCEL, type: "button", onClick: clearButtonOnClick, "aria-label": "Clear search", className: css.cancelButton }))));
33
32
  };
34
33
  //# sourceMappingURL=input-search.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"input-search.js","sourceRoot":"","sources":["../../../src/ui/input-search/input-search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,IAAI,MAAM,aAAa,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,OAAO,GAAG,MAAM,2BAA2B,CAAC;AAS5C,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,KAAuE,EACvE,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,WAAW,GAAG,QAAQ,EACtB,YAAY,GAAG,EAAE,EACjB,QAAQ,GAAG,IAAI,EACf,YAAY,GAAG,GAAG,GACnB,GAAG,KAAK,CAAC;IACV,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAGjD,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,YAAY,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,qBAAqB,GAAG,WAAW,CAAC,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAExF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,QAAgB,EAAE,EAAE;QACnB,IAAI,QAAQ,KAAK,KAAK,EAAE;YACtB,qBAAqB,CAAC,QAAQ,CAAC,CAAC;YAChC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACpB;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAA0C,EAAE,EAAE;QAC7C,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,6BAAK,SAAS,EAAE,aAAa;QAC3B,oBAAC,KAAK,IACJ,SAAS,EAAE,GAAG,CAAC,KAAK,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,OAAO,EACZ,YAAY,EAAC,KAAK,GAClB;QACD,KAAK,IAAI,CACR,oBAAC,MAAM,IACL,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,kBAAkB,gBAChB,cAAc,EACzB,SAAS,EAAE,GAAG,CAAC,YAAY;YAE3B,oBAAC,IAAI,IAAC,SAAS,EAAE,GAAG,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAI,CAC5D,CACV,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"input-search.js","sourceRoot":"","sources":["../../../src/ui/input-search/input-search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,IAAI,MAAM,aAAa,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,OAAO,GAAG,MAAM,2BAA2B,CAAC;AAS5C,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,KAAuE,EACvE,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,WAAW,GAAG,QAAQ,EACtB,YAAY,GAAG,EAAE,EACjB,QAAQ,GAAG,IAAI,EACf,YAAY,GAAG,GAAG,GACnB,GAAG,KAAK,CAAC;IACV,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAGjD,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,YAAY,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,qBAAqB,GAAG,WAAW,CAAC,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAExF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,QAAgB,EAAE,EAAE;QACnB,IAAI,QAAQ,KAAK,KAAK,EAAE;YACtB,qBAAqB,CAAC,QAAQ,CAAC,CAAC;YAChC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACpB;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAA0C,EAAE,EAAE;QAC7C,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,6BAAK,SAAS,EAAE,aAAa;QAC3B,oBAAC,KAAK,IACJ,SAAS,EAAE,GAAG,CAAC,KAAK,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,OAAO,EACZ,YAAY,EAAC,KAAK,GAClB;QACD,KAAK,IAAI,CACR,oBAAC,MAAM,IACL,MAAM,EAAC,QAAQ,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACxB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,kBAAkB,gBAChB,cAAc,EACzB,SAAS,EAAE,GAAG,CAAC,YAAY,GAC3B,CACH,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}