@bundle-stats/ui 4.9.3-beta.1 → 4.10.0-beta.0

package/lib/ui/button/button.js

@@ -7,6 +7,7 @@ exports.Button = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const button_1 = require("ariakit/button");
+const icon_1 = require("../icon");
 const button_module_css_1 = __importDefault(require("./button.module.css"));
 const SIZE = {
     SMALL: 'small',
@@ -22,11 +23,14 @@ const KIND = {
     SUCCES: 'success',
 };
 const Button = (props) => {
-    const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = button_1.Button, ...restProps } = props;
+    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;
     const resolvedPadding = padding || ((outline || solid) && size);
     const resolvedRadius = radius || ((outline || solid) && size);
     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);
-    return react_1.default.createElement(Component, { ...restProps, className: rootClassName });
+    return (react_1.default.createElement(Component, { ...restProps, className: rootClassName },
+        glyph && react_1.default.createElement(Icon, { glyph: glyph, size: size, className: button_module_css_1.default.glyph }),
+        children && react_1.default.createElement("span", { className: button_module_css_1.default.content }, children),
+        rightGlyph && react_1.default.createElement(Icon, { glyph: glyph, size: size, className: button_module_css_1.default.glyph })));
 };
 exports.Button = Button;
 exports.Button.SIZE = SIZE;

package/lib/ui/button/button.js.map

@@ -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"}
+{"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"}

package/lib/ui/button/button.module.css

@@ -1,11 +1,18 @@
 .root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xxsmall);
   appearance: none;
   padding: 0;
   border: 0;
   background: none;
   transition: var(--transition-out);
   color: var(--color-text-ultra-light);
-  line-height: 1;
+  font-family: var(--font-family);
+}
+
+a.root {
+  text-decoration: none;
 }
 
 .root:hover,
@@ -15,6 +22,15 @@
   transition: var(--transition-in);
 }
 
+.glyph {
+  flex: 0 0 auto;
+}
+
+.text {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
 /**
  * Kind variation
  */
@@ -233,14 +249,27 @@
  */
 .small {
   font-size: var(--size-small);
+  gap: var(--space-xxxsmall);
+  line-height: var(--space-xsmall);
+}
+
+.small .glyph {
+  width: calc(var(--space-xsmall) + 2px);
+  height: calc(var(--space-xsmall) + 2px);
+  margin-top: -1px;
+  margin-bottom: -1px;
 }
 
 .medium {
   font-size: var(--size-medium);
+  gap: var(--space-xxsmall);
+  line-height: var(--space-small);
 }
 
 .large {
   font-size: var(--size-large);
+  gap: var(--space-xxsmall);
+  line-height: var(--space-small);
 }
 
 /**

package/lib/ui/control-group/control-group.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlGroup = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const flex_stack_1 = require("../../layout/flex-stack");
+const control_group_module_css_1 = __importDefault(require("./control-group.module.css"));
+const ControlGroup = (props) => {
+    const { className = '', ...restProps } = props;
+    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 }));
+};
+exports.ControlGroup = ControlGroup;
+//# sourceMappingURL=control-group.js.map

package/lib/ui/control-group/control-group.js.map

@@ -0,0 +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"}

package/lib/ui/control-group/control-group.module.css

@@ -0,0 +1,23 @@
+.root > *:not(:first-child) {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+
+  margin-left: -1px;
+}
+
+.root > *:not(:last-child) {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.root > * {
+  position: relative;
+  z-index: 0;
+}
+
+.root > *:hover,
+.root > *:active,
+.root > *:focus {
+  z-index: 1;
+  box-shadow: none;
+}

package/lib/ui/control-group/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./control-group"), exports);
+//# sourceMappingURL=index.js.map

package/lib/ui/control-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/control-group/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAgC"}

package/lib/ui/dropdown/dropdown.module.css

@@ -41,7 +41,7 @@
   background: var(--color-background);
   min-width: 12em;
   z-index: var(--layer-high);
-  padding: var(--space-xxxsmall);
+  padding: calc(var(--space-xxxsmall) / 2);
 }
 
 .dropdown:focus {
@@ -55,7 +55,7 @@
   outline: none;
   border: 0;
   border-radius: var(--radius-small);
-  padding: var(--space-xxxsmall) var(--space-xxxsmall);
+  padding: var(--space-xxxsmall) calc(var(--space-xxxsmall) + var(--space-xxxsmall) / 2);
   background: none;
   text-align: left;
   color: var(--color-text-light);

package/lib/ui/index.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+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;
 var alert_1 = require("./alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return alert_1.Alert; } });
 var button_1 = require("./button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
 var container_1 = require("./container");
 Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return container_1.Container; } });
+var control_group_1 = require("./control-group");
+Object.defineProperty(exports, "ControlGroup", { enumerable: true, get: function () { return control_group_1.ControlGroup; } });
 var dropdown_1 = require("./dropdown");
 Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return dropdown_1.Dropdown; } });
 var empty_set_1 = require("./empty-set");

package/lib/ui/index.js.map

@@ -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"}
+{"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"}

package/lib/ui/input-search/input-search.js

@@ -57,8 +57,7 @@ const InputSearch = (props) => {
     }, [changeValue]);
     return (react_1.default.createElement("div", { className: rootClassname },
         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" }),
-        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 },
-            react_1.default.createElement(icon_1.Icon, { className: input_search_module_css_1.default.cancelButtonIcon, glyph: icon_1.Icon.ICONS.CANCEL })))));
+        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 }))));
 };
 exports.InputSearch = InputSearch;
 //# sourceMappingURL=input-search.js.map

package/lib/ui/input-search/input-search.js.map

@@ -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"}
+{"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"}

package/lib/ui/input-search/input-search.module.css

@@ -13,12 +13,6 @@
   right: var(--space-xxxsmall);
   top: 50%;
   transform: translateY(-50%);
+  padding: var(--space-xxxsmall);
   background: radial-gradient(var(--color-background) 50%, transparent);
-  color: var(--color-text-ultra-light);
-}
-
-.cancelButton:focus,
-.cancelButton:hover,
-.cancelButton:active {
-  color: var(--color-text-light);
 }

package/lib-esm/ui/button/button.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { Button as ButtonBaseComponent } from 'ariakit/button';
+import { Icon as BaseIcon } from '../icon';
 import css from './button.module.css';
 const SIZE = {
     SMALL: 'small',
@@ -16,11 +17,14 @@ const KIND = {
     SUCCES: 'success',
 };
 export const Button = (props) => {
-    const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = ButtonBaseComponent, ...restProps } = props;
+    const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = ButtonBaseComponent, children, Icon = BaseIcon, glyph, rightGlyph, ...restProps } = props;
     const resolvedPadding = padding || ((outline || solid) && size);
     const resolvedRadius = radius || ((outline || solid) && size);
     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);
-    return React.createElement(Component, { ...restProps, className: rootClassName });
+    return (React.createElement(Component, { ...restProps, className: rootClassName },
+        glyph && React.createElement(Icon, { glyph: glyph, size: size, className: css.glyph }),
+        children && React.createElement("span", { className: css.content }, children),
+        rightGlyph && React.createElement(Icon, { glyph: glyph, size: size, className: css.glyph })));
 };
 Button.SIZE = SIZE;
 Button.KIND = KIND;

package/lib-esm/ui/button/button.js.map

@@ -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"}
+{"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"}

package/lib-esm/ui/button/button.module.css

@@ -1,11 +1,18 @@
 .root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xxsmall);
   appearance: none;
   padding: 0;
   border: 0;
   background: none;
   transition: var(--transition-out);
   color: var(--color-text-ultra-light);
-  line-height: 1;
+  font-family: var(--font-family);
+}
+
+a.root {
+  text-decoration: none;
 }
 
 .root:hover,
@@ -15,6 +22,15 @@
   transition: var(--transition-in);
 }
 
+.glyph {
+  flex: 0 0 auto;
+}
+
+.text {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
 /**
  * Kind variation
  */
@@ -233,14 +249,27 @@
  */
 .small {
   font-size: var(--size-small);
+  gap: var(--space-xxxsmall);
+  line-height: var(--space-xsmall);
+}
+
+.small .glyph {
+  width: calc(var(--space-xsmall) + 2px);
+  height: calc(var(--space-xsmall) + 2px);
+  margin-top: -1px;
+  margin-bottom: -1px;
 }
 
 .medium {
   font-size: var(--size-medium);
+  gap: var(--space-xxsmall);
+  line-height: var(--space-small);
 }
 
 .large {
   font-size: var(--size-large);
+  gap: var(--space-xxsmall);
+  line-height: var(--space-small);
 }
 
 /**

package/lib-esm/ui/control-group/control-group.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import cx from 'classnames';
+import { FlexStack } from '../../layout/flex-stack';
+import css from './control-group.module.css';
+export const ControlGroup = (props) => {
+    const { className = '', ...restProps } = props;
+    return (React.createElement(FlexStack, { className: cx(css.root, className), space: "no-space", alignItems: "center", ...restProps }));
+};
+//# sourceMappingURL=control-group.js.map

package/lib-esm/ui/control-group/control-group.js.map

@@ -0,0 +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"}

package/lib-esm/ui/control-group/control-group.module.css

@@ -0,0 +1,23 @@
+.root > *:not(:first-child) {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+
+  margin-left: -1px;
+}
+
+.root > *:not(:last-child) {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.root > * {
+  position: relative;
+  z-index: 0;
+}
+
+.root > *:hover,
+.root > *:active,
+.root > *:focus {
+  z-index: 1;
+  box-shadow: none;
+}

package/lib-esm/ui/control-group/index.js

@@ -0,0 +1,2 @@
+export * from './control-group';
+//# sourceMappingURL=index.js.map

package/lib-esm/ui/control-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/control-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/lib-esm/ui/dropdown/dropdown.module.css

@@ -41,7 +41,7 @@
   background: var(--color-background);
   min-width: 12em;
   z-index: var(--layer-high);
-  padding: var(--space-xxxsmall);
+  padding: calc(var(--space-xxxsmall) / 2);
 }
 
 .dropdown:focus {
@@ -55,7 +55,7 @@
   outline: none;
   border: 0;
   border-radius: var(--radius-small);
-  padding: var(--space-xxxsmall) var(--space-xxxsmall);
+  padding: var(--space-xxxsmall) calc(var(--space-xxxsmall) + var(--space-xxxsmall) / 2);
   background: none;
   text-align: left;
   color: var(--color-text-light);

package/lib-esm/ui/index.js

@@ -1,6 +1,7 @@
 export { Alert } from './alert';
 export { Button } from './button';
 export { Container } from './container';
+export { ControlGroup } from './control-group';
 export { Dropdown } from './dropdown';
 export { EmptySet } from './empty-set';
 export { FileName } from './file-name';

package/lib-esm/ui/index.js.map

@@ -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"}
+{"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"}

package/lib-esm/ui/input-search/input-search.js

@@ -28,7 +28,6 @@ export const InputSearch = (props) => {
     }, [changeValue]);
     return (React.createElement("div", { className: rootClassname },
         React.createElement(Input, { className: css.input, placeholder: placeholder, onChange: inputOnChange, value: value, size: "small", autoComplete: "off" }),
-        value && (React.createElement(Button, { radius: "circle", padding: "small", type: "button", onClick: clearButtonOnClick, "aria-label": "Clear search", className: css.cancelButton },
-            React.createElement(Icon, { className: css.cancelButtonIcon, glyph: Icon.ICONS.CANCEL })))));
+        value && (React.createElement(Button, { radius: "circle", glyph: Icon.ICONS.CANCEL, type: "button", onClick: clearButtonOnClick, "aria-label": "Clear search", className: css.cancelButton }))));
 };
 //# sourceMappingURL=input-search.js.map

package/lib-esm/ui/input-search/input-search.js.map

@@ -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"}
+{"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"}

package/lib-esm/ui/input-search/input-search.module.css

@@ -13,12 +13,6 @@
   right: var(--space-xxxsmall);
   top: 50%;
   transform: translateY(-50%);
+  padding: var(--space-xxxsmall);
   background: radial-gradient(var(--color-background) 50%, transparent);
-  color: var(--color-text-ultra-light);
-}
-
-.cancelButton:focus,
-.cancelButton:hover,
-.cancelButton:active {
-  color: var(--color-text-light);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.9.3-beta.1",
+  "version": "4.10.0-beta.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -39,9 +39,9 @@
     "@babel/preset-env": "7.23.9",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
-    "@storybook/addon-essentials": "7.6.14",
-    "@storybook/react": "7.6.14",
-    "@storybook/react-webpack5": "7.6.14",
+    "@storybook/addon-essentials": "7.6.15",
+    "@storybook/react": "7.6.15",
+    "@storybook/react-webpack5": "7.6.15",
     "@types/react": "18.2.55",
     "@types/react-router-dom": "5.3.3",
     "babel-plugin-require-context-hook": "1.0.0",
@@ -59,7 +59,7 @@
     "react-dom": "18.2.0",
     "react-router-dom": "5.3.4",
     "rimraf": "5.0.5",
-    "storybook": "7.6.14",
+    "storybook": "7.6.15",
     "typescript": "5.1.6",
     "typescript-plugin-css-modules": "5.1.0"
   },
@@ -72,10 +72,10 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "4.9.3-beta.1",
+    "@bundle-stats/utils": "4.10.0-beta.0",
     "ariakit": "2.0.0-next.44",
     "modern-css-reset": "1.4.0",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "b9d91632ef75366b05184a82c52fead61497babe"
+  "gitHead": "3aa6e1ced0c3ce890c50e9ea4eddc2dbe2d28afb"
 }

package/src/ui/button/button.module.css

@@ -1,11 +1,18 @@
 .root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xxsmall);
   appearance: none;
   padding: 0;
   border: 0;
   background: none;
   transition: var(--transition-out);
   color: var(--color-text-ultra-light);
-  line-height: 1;
+  font-family: var(--font-family);
+}
+
+a.root {
+  text-decoration: none;
 }
 
 .root:hover,
@@ -15,6 +22,15 @@
   transition: var(--transition-in);
 }
 
+.glyph {
+  flex: 0 0 auto;
+}
+
+.text {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
 /**
  * Kind variation
  */
@@ -233,14 +249,27 @@
  */
 .small {
   font-size: var(--size-small);
+  gap: var(--space-xxxsmall);
+  line-height: var(--space-xsmall);
+}
+
+.small .glyph {
+  width: calc(var(--space-xsmall) + 2px);
+  height: calc(var(--space-xsmall) + 2px);
+  margin-top: -1px;
+  margin-bottom: -1px;
 }
 
 .medium {
   font-size: var(--size-medium);
+  gap: var(--space-xxsmall);
+  line-height: var(--space-small);
 }
 
 .large {
   font-size: var(--size-large);
+  gap: var(--space-xxsmall);
+  line-height: var(--space-small);
 }
 
 /**

package/src/ui/button/button.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, Story } from '@storybook/react';
 
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
+import { Icon } from '../icon';
 import { Button } from '.';
 
 export default {
@@ -14,53 +15,73 @@ const Template: Story = ({ children = 'Action', ...props }) => (
   <Button {...props}>{children}</Button>
 );
 
+const Items = (props) => (
+  <FlexStack alignItems="top" style={{ flexWrap: 'wrap', gap: '12px' }} {...props} />
+);
+
 export const Default = Template.bind({});
 
 export const All = () => (
   <Stack space="large">
     <Stack space="medium">
       <h2>Size</h2>
-      <FlexStack space="small" alignItems="top">
+      <Items>
         {Object.values(Button.SIZE).map((size) => (
           <Button size={size} key={size}>
             Action {size}
           </Button>
         ))}
-      </FlexStack>
+      </Items>
     </Stack>
     <Stack space="medium">
       <h2>Kind</h2>
-      <Stack space="small">
-        <FlexStack space="small" alignItems="top">
+      <Stack space="medium">
+        <Items>
           {Object.values(Button.KIND).map((kind) => (
             <Button kind={kind} key={kind}>
               Action {kind}
             </Button>
           ))}
-        </FlexStack>
+        </Items>
         <h3>Active</h3>
-        <FlexStack space="small" alignItems="top">
+        <Items>
           {Object.values(Button.KIND).map((kind) => (
             <Button kind={kind} key={kind} active>
               Action {kind}
             </Button>
           ))}
-        </FlexStack>
+        </Items>
+        <h3>As link</h3>
+        <Items>
+          {Object.values(Button.KIND).map((kind) => (
+            <Button kind={kind} key={kind} as="a" href="#">
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
+        <h3>With icon</h3>
+        <Items>
+          {Object.values(Button.KIND).map((kind) => (
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} kind={kind} key={kind}>
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
         <h3>Disabled</h3>
-        <FlexStack space="small" alignItems="top">
+        <Items>
           {Object.values(Button.KIND).map((kind) => (
             <Button kind={kind} key={kind} disabled>
               Action {kind}
             </Button>
           ))}
-        </FlexStack>
+        </Items>
       </Stack>
     </Stack>
     <Stack space="medium">
       <h2>Outline & Kind</h2>
-      <Stack space="small">
+      <Stack space="medium">
         {Object.values(Button.SIZE).map((size) => (
-          <FlexStack space="small" alignItems="top" key={size}>
+          <Items key={size}>
             <Button outline size={size}>
               Action default
             </Button>
@@ -69,10 +90,10 @@ export const All = () => (
                 Action {kind}
               </Button>
             ))}
-          </FlexStack>
+          </Items>
         ))}
         <h3>Active</h3>
-        <FlexStack space="small" alignItems="top">
+        <Items>
           <Button outline active>
             Action default
           </Button>
@@ -81,9 +102,43 @@ export const All = () => (
               Action {kind}
             </Button>
           ))}
-        </FlexStack>
+        </Items>
+        <h3>With icon</h3>
+        {Object.values(Button.SIZE).map((size) => (
+          <Items key={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size}>
+              Action default
+            </Button>
+            {Object.values(Button.KIND).map((kind) => (
+              <Button
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                outline
+                kind={kind}
+                size={size}
+                key={kind}
+              >
+                Action {kind}
+              </Button>
+            ))}
+          </Items>
+        ))}
+        <h3>Only icon</h3>
+        {Object.values(Button.SIZE).map((size) => (
+          <Items key={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size} />
+            {Object.values(Button.KIND).map((kind) => (
+              <Button
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                outline
+                kind={kind}
+                size={size}
+                key={kind}
+              />
+            ))}
+          </Items>
+        ))}
         <h3>Disabled</h3>
-        <FlexStack space="small" alignItems="top">
+        <Items>
           <Button outline disabled>
             Action default
           </Button>
@@ -92,14 +147,14 @@ export const All = () => (
               Action {kind}
             </Button>
           ))}
-        </FlexStack>
+        </Items>
       </Stack>
     </Stack>
     <Stack space="medium">
       <h2>Solid & Kind</h2>
-      <Stack space="small">
+      <Stack space="medium">
         {Object.values(Button.SIZE).map((size) => (
-          <FlexStack space="small" alignItems="top" key={size}>
+          <Items key={size}>
             <Button solid size={size}>
               Action default
             </Button>
@@ -108,10 +163,10 @@ export const All = () => (
                 Action {kind}
               </Button>
             ))}
-          </FlexStack>
+          </Items>
         ))}
         <h3>Active</h3>
-        <FlexStack space="small" alignItems="top">
+        <Items>
           <Button solid active>
             Action default
           </Button>
@@ -120,9 +175,43 @@ export const All = () => (
               Action {kind}
             </Button>
           ))}
-        </FlexStack>
+        </Items>
+        <h3>With icon</h3>
+        {Object.values(Button.SIZE).map((size) => (
+          <Items key={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size}>
+              Action default
+            </Button>
+            {Object.values(Button.KIND).map((kind) => (
+              <Button
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                solid
+                kind={kind}
+                size={size}
+                key={kind}
+              >
+                Action {kind}
+              </Button>
+            ))}
+          </Items>
+        ))}
+        <h3>Only icon</h3>
+        {Object.values(Button.SIZE).map((size) => (
+          <Items key={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size} />
+            {Object.values(Button.KIND).map((kind) => (
+              <Button
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                solid
+                kind={kind}
+                size={size}
+                key={kind}
+              />
+            ))}
+          </Items>
+        ))}
         <h3>Disabled</h3>
-        <FlexStack space="small" alignItems="top">
+        <Items>
           <Button solid disabled>
             Action default
           </Button>
@@ -131,7 +220,7 @@ export const All = () => (
               Action {kind}
             </Button>
           ))}
-        </FlexStack>
+        </Items>
       </Stack>
     </Stack>
   </Stack>

package/src/ui/button/button.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import { Button as ButtonBaseComponent } from 'ariakit/button';
 
+import { Icon as BaseIcon } from '../icon';
 import css from './button.module.css';
 
 const SIZE = {
@@ -31,6 +32,9 @@ interface ButtonProps<T extends React.ElementType> {
   radius?: Size | 'circle' | 'none';
   padding?: Size | 'none';
   as?: T;
+  Icon?: React.ElementType;
+  glyph?: React.ComponentProps<typeof BaseIcon>['glyph'];
+  rightGlyph?: React.ComponentProps<typeof BaseIcon>['glyph'];
 }
 
 export const Button = <T extends React.ElementType = 'button'>(
@@ -46,6 +50,10 @@ export const Button = <T extends React.ElementType = 'button'>(
     radius = '',
     padding = '',
     as: Component = ButtonBaseComponent,
+    children,
+    Icon = BaseIcon,
+    glyph,
+    rightGlyph,
     ...restProps
   } = props;
 
@@ -75,7 +83,13 @@ export const Button = <T extends React.ElementType = 'button'>(
     className,
   );
 
-  return <Component {...restProps} className={rootClassName} />;
+  return (
+    <Component {...restProps} className={rootClassName}>
+      {glyph && <Icon glyph={glyph} size={size} className={css.glyph} />}
+      {children && <span className={css.content}>{children}</span>}
+      {rightGlyph && <Icon glyph={glyph} size={size} className={css.glyph} />}
+    </Component>
+  );
 };
 
 Button.SIZE = SIZE;

package/src/ui/control-group/control-group.module.css

@@ -0,0 +1,23 @@
+.root > *:not(:first-child) {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+
+  margin-left: -1px;
+}
+
+.root > *:not(:last-child) {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.root > * {
+  position: relative;
+  z-index: 0;
+}
+
+.root > *:hover,
+.root > *:active,
+.root > *:focus {
+  z-index: 1;
+  box-shadow: none;
+}

package/src/ui/control-group/control-group.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+
+import { Button } from '../button';
+import { ControlGroup } from '.';
+
+export default {
+  title: 'UI/ControlGroup',
+  component: ControlGroup,
+} as Meta;
+
+export const Default = () => (
+  <ControlGroup>
+    <Button outline type="button">
+      Option A
+    </Button>
+    <Button outline type="button">
+      Option B
+    </Button>
+    <Button outline type="button">
+      Option C
+    </Button>
+  </ControlGroup>
+);

package/src/ui/control-group/control-group.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { FlexStack } from '../../layout/flex-stack';
+import css from './control-group.module.css';
+
+export const ControlGroup = (props: React.ComponentProps<typeof FlexStack>) => {
+  const { className = '', ...restProps } = props;
+  return (
+    <FlexStack
+      className={cx(css.root, className)}
+      space="no-space"
+      alignItems="center"
+      {...restProps}
+    />
+  );
+};

package/src/ui/control-group/index.ts

@@ -0,0 +1 @@
+export * from './control-group';

package/src/ui/dropdown/dropdown.module.css

@@ -41,7 +41,7 @@
   background: var(--color-background);
   min-width: 12em;
   z-index: var(--layer-high);
-  padding: var(--space-xxxsmall);
+  padding: calc(var(--space-xxxsmall) / 2);
 }
 
 .dropdown:focus {
@@ -55,7 +55,7 @@
   outline: none;
   border: 0;
   border-radius: var(--radius-small);
-  padding: var(--space-xxxsmall) var(--space-xxxsmall);
+  padding: var(--space-xxxsmall) calc(var(--space-xxxsmall) + var(--space-xxxsmall) / 2);
   background: none;
   text-align: left;
   color: var(--color-text-light);

package/src/ui/index.js

@@ -1,6 +1,7 @@
 export { Alert } from './alert';
 export { Button } from './button';
 export { Container } from './container';
+export { ControlGroup } from './control-group';
 export { Dropdown } from './dropdown';
 export { EmptySet } from './empty-set';
 export { FileName } from './file-name';

package/src/ui/input-search/input-search.module.css

@@ -13,12 +13,6 @@
   right: var(--space-xxxsmall);
   top: 50%;
   transform: translateY(-50%);
+  padding: var(--space-xxxsmall);
   background: radial-gradient(var(--color-background) 50%, transparent);
-  color: var(--color-text-ultra-light);
-}
-
-.cancelButton:focus,
-.cancelButton:hover,
-.cancelButton:active {
-  color: var(--color-text-light);
 }

package/src/ui/input-search/input-search.tsx

@@ -71,14 +71,12 @@ export const InputSearch = (
       {value && (
         <Button
           radius="circle"
-          padding="small"
+          glyph={Icon.ICONS.CANCEL}
           type="button"
           onClick={clearButtonOnClick}
           aria-label="Clear search"
           className={css.cancelButton}
-        >
-          <Icon className={css.cancelButtonIcon} glyph={Icon.ICONS.CANCEL} />
-        </Button>
+        />
       )}
     </div>
   );

package/types/ui/button/button.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Icon as BaseIcon } from '../icon';
 declare const SIZE: {
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
@@ -23,6 +24,9 @@ interface ButtonProps<T extends React.ElementType> {
     radius?: Size | 'circle' | 'none';
     padding?: Size | 'none';
     as?: T;
+    Icon?: React.ElementType;
+    glyph?: React.ComponentProps<typeof BaseIcon>['glyph'];
+    rightGlyph?: React.ComponentProps<typeof BaseIcon>['glyph'];
 }
 export declare const Button: {
     <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "button">(props: ButtonProps<T> & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, keyof ButtonProps<T>>): React.JSX.Element;

package/types/ui/control-group/control-group.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FlexStack } from '../../layout/flex-stack';
+export declare const ControlGroup: (props: React.ComponentProps<typeof FlexStack>) => React.JSX.Element;

package/types/ui/control-group/index.d.ts

@@ -0,0 +1 @@
+export * from './control-group';

package/types/ui/index.d.ts

@@ -1,6 +1,7 @@
 export { Alert } from "./alert";
 export { Button } from "./button";
 export { Container } from "./container";
+export { ControlGroup } from "./control-group";
 export { Dropdown } from "./dropdown";
 export { EmptySet } from "./empty-set";
 export { FileName } from "./file-name";