@bundle-stats/ui 4.23.0-beta.1 → 4.23.0-beta.10

package/lib/components/summary/summary.module.css

@@ -5,10 +5,6 @@
 
 .row {
   width: 100%;
-  display: flex;
-  align-items: stretch;
-  flex-wrap: wrap;
-  gap: var(--space-small);
 }
 
 .rowGroup {
@@ -26,13 +22,6 @@
   margin-top: var(--summary-gap);
 }
 
-.items {
-  display: flex;
-  align-items: stretch;
-  flex-wrap: wrap;
-  gap: var(--space-medium);
-}
-
 .item {
   flex: 1 1 10%; /* force equal sizes */
   min-width: 8em;
@@ -42,7 +31,7 @@
 }
 
 .item::before {
-  content: "";
+  content: '';
   border-radius: var(--radius-medium);
   background: var(--color-highlight);
   display: block;
@@ -56,13 +45,15 @@
   transition: var(--transition-out);
 }
 
+.item:focus::before,
+.item:active::before,
 .item:hover::before {
   opacity: 1;
   transition: var(--transition-in);
 }
 
 .item + .item::after {
-  content: "";
+  content: '';
   border-radius: var(--radius-medium);
   background: var(--color-outline);
   display: block;
@@ -75,7 +66,12 @@
   transition: var(--transition-out);
 }
 
-.item:hover::after,  .item:hover + .item::after {
+.item:focus::after,
+.item:active::after,
+.item:hover::after,
+.item:focus + .item::after,
+.item:active + .item::after,
+.item:hover + .item::after {
   opacity: 0;
   transition: var(--transition-in);
 }

package/lib/css/default.css

@@ -15,6 +15,7 @@ html {
 
 body {
   background: var(--color-background);
+  accent-color: var(--color-accent);
   color: var(--color-text);
   line-height: var(--line-height);
 }
@@ -59,12 +60,14 @@ code {
 }
 
 a {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition: var(--transition-out);
 }
 
-a:hover,
+a:focus,
 a:active,
-a:focus {
-  color: var(--color-primary-dark);
+a:hover {
+  color: var(--color-accent-dark);
   outline: none;
+  transition: var(--transition-in);
 }

package/lib/css/variables.css

@@ -35,18 +35,18 @@
    * Color scheme: https://coolors.co/287acc-da444e-55b950-e5c110-192339-353538
    */
 
-   --color-gray-25: #f9f9f9;
-   /** https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/0/3F3F47/63/63/71/white */
-   --color-gray-50: #ececed;
-   --color-gray-100: #c9c9cc;
-   --color-gray-200: #a7a7aa;
-   --color-gray-300: #848489;
-   --color-gray-400: #626268;
-   --color-gray-500: #3f3f47;
-   --color-gray-600: #36363c;
-   --color-gray-700: #2c2c32;
-   --color-gray-800: #232327;
-   --color-gray-900: #19191c;
+  --color-gray-25: #f9f9f9;
+  /** https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/0/3F3F47/63/63/71/white */
+  --color-gray-50: #ececed;
+  --color-gray-100: #c9c9cc;
+  --color-gray-200: #a7a7aa;
+  --color-gray-300: #848489;
+  --color-gray-400: #626268;
+  --color-gray-500: #3f3f47;
+  --color-gray-600: #36363c;
+  --color-gray-700: #2c2c32;
+  --color-gray-800: #232327;
+  --color-gray-900: #19191c;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -98,7 +98,7 @@
   --color-green-200: #b1dfaf;
   --color-green-300: #92d28f;
   --color-green-400: #74c670;
-  --color-green-500: #55B950;
+  --color-green-500: #55b950;
   --color-green-600: #3ea839;
   --color-green-700: #2b9426;
   --color-green-800: #1b7b16;
@@ -111,30 +111,31 @@
   --color-green-ultra-dark: var(--color-green-900);
 
   --color-yellow-25: #fffdf2;
-  /* https://hihayk.github.io/scale/#4/5/40/80/0/-0/0/0/E5C110/229/193/16/white */
-  --color-yellow-50:  #faf3cf;
+  /* https://hihayk.github.io/scale/#4/5/20/80/0/-0/0/0/E5C110/229/193/16/white */
+  --color-yellow-50: #faf3cf;
   --color-yellow-100: #f6e9a9;
   --color-yellow-200: #f2df83;
   --color-yellow-300: #edd55d;
   --color-yellow-400: #e9cb36;
   --color-yellow-500: #e5c110;
-  --color-yellow-600: #ceae0e;
-  --color-yellow-700: #b79a0d;
-  --color-yellow-800: #a0870b;
-  --color-yellow-900: #89740a;
+  --color-yellow-600: #dab70f;
+  --color-yellow-700: #ceae0e;
+  --color-yellow-800: #c3a40e;
+  --color-yellow-900: #b79a0d;
 
   --color-yellow-ultra-light: var(--color-yellow-100);
   --color-yellow-light: var(--color-yellow-300);
   --color-yellow: var(--color-yellow-500);
-  --color-yellow-ultra-dark: var(--color-yellow-700);
-  --color-yellow-dark: var(--color-yellow-900);
+  --color-yellow-dark: var(--color-yellow-700);
+  --color-yellow-ultra-dark: var(--color-yellow-900);
 
   --color-dark: #111;
   --color-light: #fff;
 
-  --color-branding-light: #2b76d4;
+  /* https://hihayk.github.io/scale/#4/4/40/40/0/-0/0/0/1a477f/26/71/127/white */
+  --color-branding-light: #31598c;
   --color-branding: #1a477f;
-  --color-branding-dark: #09182a;
+  --color-branding-dark: #102b4c;
 }
 
 body {
@@ -146,6 +147,10 @@ body {
   --color-text-ultra-dark: var(--color-gray-ultra-dark);
   --color-heading: var(--color-gray-ultra-dark);
 
+  --color-accent-light: var(--color-branding-light);
+  --color-accent: var(--color-branding);
+  --color-accent-dark: var(--color-branding-dark);
+
   --color-success-light: var(--color-green-light);
   --color-success: var(--color-green);
   --color-success-dark: var(--color-green-dark);
@@ -187,8 +192,8 @@ body {
   --color-backdrop: rgba(0, 0, 0, 0.05);
   --color-shadow: rgba(0, 0, 0, 0.25);
 
-  --transition-duration-in: 0.16s;
-  --transition-duration-out: 0.10s;
+  --transition-duration-in: 120ms;
+  --transition-duration-out: 80ms;
   --transition-in: all var(--transition-duration-in) ease-in;
   --transition-out: all var(--transition-duration-out) ease-out;
 
@@ -197,9 +202,15 @@ body {
   --layer: 100;
   /** for components with overlays (tooltips, hovercards) */
   --layer-high: 1000;
+  /** for the sticky header, tabs and side panels */
   --layer-xhigh: 10000;
   /** for dialogs/modals */
   --layer-xxhigh: 100000;
+  /**
+   * z-index used by overlays (tooltips, hovercards, dropdowns)
+   * overridden by the dialog portal to place nested overlays above the dialog
+   */
+  --layer-overlay: var(--layer-high);
 
   --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
   --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);

package/lib/layout/flex-stack/flex-stack.js

@@ -9,8 +9,8 @@ const classnames_1 = __importDefault(require("classnames"));
 const tokens_1 = require("../../tokens");
 const flex_stack_module_css_1 = __importDefault(require("./flex-stack.module.css"));
 const FlexStack = (props) => {
-    const { as: Component = 'div', className = '', space = tokens_1.NO_SPACE, inline = false, alignItems = '', ...restProps } = props;
-    const rootClassName = (0, classnames_1.default)(flex_stack_module_css_1.default.root, flex_stack_module_css_1.default[`space--${space}`], flex_stack_module_css_1.default[`align-items--${alignItems}`], inline && flex_stack_module_css_1.default.inline, className);
+    const { as: Component = 'div', className = '', gap, space, inline = false, direction = '', wrap = '', alignItems = '', justifyContent = '', ...restProps } = props;
+    const rootClassName = (0, classnames_1.default)(flex_stack_module_css_1.default.root, flex_stack_module_css_1.default[`gap--${gap ?? space ?? tokens_1.NO_SPACE}`], flex_stack_module_css_1.default[`direction--${direction}`], flex_stack_module_css_1.default[`wrap--${wrap}`], flex_stack_module_css_1.default[`align-items--${alignItems}`], flex_stack_module_css_1.default[`justify-content--${justifyContent}`], inline && flex_stack_module_css_1.default.inline, className);
     return react_1.default.createElement(Component, { ...restProps, className: rootClassName });
 };
 exports.FlexStack = FlexStack;

package/lib/layout/flex-stack/flex-stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"flex-stack.js","sourceRoot":"","sources":["../../../src/layout/flex-stack/flex-stack.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAE5B,yCAAgD;AAChD,oFAA0C;AAWnC,MAAM,SAAS,GAAG,CACvB,KAAiF,EACjF,EAAE;IACF,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,iBAAQ,EAChB,MAAM,GAAG,KAAK,EACd,UAAU,GAAG,EAAE,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,+BAAG,CAAC,IAAI,EACR,+BAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EACtB,+BAAG,CAAC,gBAAgB,UAAU,EAAE,CAAC,EACjC,MAAM,IAAI,+BAAG,CAAC,MAAM,EACpB,SAAS,CACV,CAAC;IAEF,OAAO,8BAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAChE,CAAC,CAAC;AArBW,QAAA,SAAS,aAqBpB"}
+{"version":3,"file":"flex-stack.js","sourceRoot":"","sources":["../../../src/layout/flex-stack/flex-stack.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAE5B,yCAAgD;AAChD,oFAA0C;AAwBnC,MAAM,SAAS,GAAG,CACvB,KAAiF,EACjF,EAAE;IACF,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,EACH,KAAK,EACL,MAAM,GAAG,KAAK,EACd,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,UAAU,GAAG,EAAE,EACf,cAAc,GAAG,EAAE,EACnB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,+BAAG,CAAC,IAAI,EACR,+BAAG,CAAC,QAAQ,GAAG,IAAI,KAAK,IAAI,iBAAQ,EAAE,CAAC,EACvC,+BAAG,CAAC,cAAc,SAAS,EAAE,CAAC,EAC9B,+BAAG,CAAC,SAAS,IAAI,EAAE,CAAC,EACpB,+BAAG,CAAC,gBAAgB,UAAU,EAAE,CAAC,EACjC,+BAAG,CAAC,oBAAoB,cAAc,EAAE,CAAC,EACzC,MAAM,IAAI,+BAAG,CAAC,MAAM,EACpB,SAAS,CACV,CAAC;IAEF,OAAO,8BAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAChE,CAAC,CAAC;AA5BW,QAAA,SAAS,aA4BpB"}

package/lib/layout/flex-stack/flex-stack.module.css

@@ -4,43 +4,73 @@
   gap: 0;
 }
 
-/** Space variation */
-.space--xxxsmall {
+/** Gap variation */
+.gap--xxxsmall {
   gap: var(--space-xxxsmall);
 }
 
-.space--xxsmall {
+.gap--xxsmall {
   gap: var(--space-xxsmall);
 }
 
-.space--xsmall {
+.gap--xsmall {
   gap: var(--space-xsmall);
 }
 
-.space--small {
+.gap--small {
   gap: var(--space-small);
 }
 
-.space--medium {
+.gap--medium {
   gap: var(--space-medium);
 }
 
-.space--large {
+.gap--large {
   gap: var(--space-large);
 }
 
-.space--xlarge {
+.gap--xlarge {
   gap: var(--space-xlarge);
 }
 
-.space--xxlarge {
+.gap--xxlarge {
   gap: var(--space-xxlarge);
 }
 
-.space--xxxlarge {
+.gap--xxxlarge {
   gap: var(--space-xxxlarge);
 }
 
+/** Direction variation */
+.direction--row {
+  flex-direction: row;
+}
+
+.direction--row-reverse {
+  flex-direction: row-reverse;
+}
+
+.direction--column {
+  flex-direction: column;
+}
+
+.direction--column-reverse {
+  flex-direction: column-reverse;
+}
+
+/** Wrap variation */
+.wrap--nowrap {
+  flex-wrap: nowrap;
+}
+
+.wrap--wrap {
+  flex-wrap: wrap;
+}
+
+.wrap--wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
 /** Align items variation */
 .root {
   align-items: stretch;
@@ -62,6 +92,31 @@
   align-items: baseline;
 }
 
+/** Justify content variation */
+.justify-content--flex-start {
+  justify-content: flex-start;
+}
+
+.justify-content--flex-end {
+  justify-content: flex-end;
+}
+
+.justify-content--center {
+  justify-content: center;
+}
+
+.justify-content--space-between {
+  justify-content: space-between;
+}
+
+.justify-content--space-around {
+  justify-content: space-around;
+}
+
+.justify-content--space-evenly {
+  justify-content: space-evenly;
+}
+
 /** Inline variation */
 .inline {
   display: inline-flex;

package/lib/query-state.js

@@ -49,13 +49,16 @@ const useComponentQueryState = (componentName) => {
         [componentName]: utils_1.COMPONENT_STATE_META[componentName],
     });
     const componentState = queryState[componentName];
+    const componentStateRef = (0, react_1.useRef)(componentState);
+    componentStateRef.current = componentState;
     const setState = (0, react_1.useCallback)((updates) => {
-        const newState = { ...componentState, ...updates };
-        if ((0, isEqual_1.default)(componentState, newState)) {
+        const currentState = componentStateRef.current;
+        const newState = { ...currentState, ...updates };
+        if ((0, isEqual_1.default)(currentState, newState)) {
             return;
         }
         setQueryState({ [componentName]: newState });
-    }, [componentState, setQueryState]);
+    }, [componentName, setQueryState]);
     return [componentState, setState];
 };
 exports.useComponentQueryState = useComponentQueryState;

package/lib/query-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAC3C,6DAAqC;AACrC,uDAAsE;AACtE,6EAA+E;AAC/E,+CAA2D;AAMpD,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpE,8BAAC,qCAAkB,IAAC,OAAO,EAAE,oCAAmB,KAAM,KAAK,GAAI,CAChE,CAAC;AAFW,QAAA,kBAAkB,sBAE7B;AAEK,MAAM,sBAAsB,GAAG,CAAC,aAAqB,EAAE,EAAE;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,iCAAc,EAAC;QACjD,CAAC,aAAa,CAAC,EAAE,4BAAoB,CAAC,aAAa,CAAC;KACrD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAC1B,CAAC,OAAgC,EAAE,EAAE;QACnC,MAAM,QAAQ,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,OAAO,EAAE,CAAC;QAGnD,IAAI,IAAA,iBAAO,EAAC,cAAc,EAAE,QAAQ,CAAC,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,cAAc,EAAE,aAAa,CAAC,CAChC,CAAC;IAEF,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AACpC,CAAC,CAAC;AAtBW,QAAA,sBAAsB,0BAsBjC"}
+{"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,6DAAqC;AACrC,uDAAsE;AACtE,6EAA+E;AAC/E,+CAA2D;AAMpD,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpE,8BAAC,qCAAkB,IAAC,OAAO,EAAE,oCAAmB,KAAM,KAAK,GAAI,CAChE,CAAC;AAFW,QAAA,kBAAkB,sBAE7B;AAEK,MAAM,sBAAsB,GAAG,CAAC,aAAqB,EAAE,EAAE;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,iCAAc,EAAC;QACjD,CAAC,aAAa,CAAC,EAAE,4BAAoB,CAAC,aAAa,CAAC;KACrD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAGjD,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAC,cAAc,CAAC,CAAC;IACjD,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC;IAE3C,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAC1B,CAAC,OAAgC,EAAE,EAAE;QACnC,MAAM,YAAY,GAAG,iBAAiB,CAAC,OAAO,CAAC;QAC/C,MAAM,QAAQ,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,OAAO,EAAE,CAAC;QAGjD,IAAI,IAAA,iBAAO,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QAED,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,aAAa,EAAE,aAAa,CAAC,CAC/B,CAAC;IAEF,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AACpC,CAAC,CAAC;AA3BW,QAAA,sBAAsB,0BA2BjC"}

package/lib/ui/button/button.js

@@ -10,6 +10,7 @@ const button_1 = require("ariakit/button");
 const icon_1 = require("../icon");
 const button_module_css_1 = __importDefault(require("./button.module.css"));
 exports.BUTTON_SIZE = {
+    XSMALL: 'xsmall',
     SMALL: 'small',
     MEDIUM: 'medium',
     LARGE: 'large',
@@ -23,13 +24,13 @@ exports.BUTTON_KIND = {
     SUCCES: 'success',
 };
 exports.BUTTON_GLYPHS = icon_1.Icon.ICONS;
-const ButtonComponent = (props) => {
+const ButtonComponent = (props, ref) => {
     const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = button_1.Button, children = null, Icon = icon_1.Icon, glyph, rightGlyph, ...restProps } = props;
     const resolvedPadding = padding || ((outline || solid) && size);
     const resolvedRadius = radius || ((outline || solid) && size);
     const resolvedSize = Object.values(exports.BUTTON_SIZE).includes(size) ? size : exports.BUTTON_SIZE.MEDIUM;
     const rootClassName = (0, classnames_1.default)(button_module_css_1.default.root, kind && button_module_css_1.default[kind], button_module_css_1.default[resolvedSize], 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, 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}`], className);
-    return (react_1.default.createElement(Component, { ...restProps, className: rootClassName },
+    return (react_1.default.createElement(Component, { ...restProps, ref: ref, className: rootClassName },
         glyph && react_1.default.createElement(Icon, { glyph: glyph, 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: rightGlyph, className: button_module_css_1.default.glyph })));

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,kCAA2C;AAC3C,4EAAsC;AAEzB,QAAA,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEE,QAAA,WAAW,GAAG;IACzB,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;AAEE,QAAA,aAAa,GAAG,WAAQ,CAAC,KAAK,CAAC;AAmB5C,MAAM,eAAe,GAAG,CACtB,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,GAAG,IAAI,EACf,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,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAW,CAAC,MAAM,CAAC;IAE3F,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,2BAAG,CAAC,IAAI,EACR,IAAI,IAAI,2BAAG,CAAC,IAAI,CAAC,EACjB,2BAAG,CAAC,YAAY,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,OAAO,EAC9B,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,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,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI;QACrD,QAAQ,IAAI,wCAAM,SAAS,EAAE,2BAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI,CACtD,CACb,CAAC;AACJ,CAAC,CAAC;AAKW,QAAA,MAAM,GAAG,eAAK,CAAC,UAAU,CAAC,eAAe,CAIxB,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;AAEzB,QAAA,WAAW,GAAG;IACzB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEE,QAAA,WAAW,GAAG;IACzB,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;AAEE,QAAA,aAAa,GAAG,WAAQ,CAAC,KAAK,CAAC;AAmB5C,MAAM,eAAe,GAAG,CACtB,KAAqF,EACrF,GAAiC,EACjC,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,GAAG,IAAI,EACf,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,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAW,CAAC,MAAM,CAAC;IAE3F,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,2BAAG,CAAC,IAAI,EACR,IAAI,IAAI,2BAAG,CAAC,IAAI,CAAC,EACjB,2BAAG,CAAC,YAAY,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,OAAO,EAC9B,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,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,SAAS,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,aAAa;QACzD,KAAK,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI;QACrD,QAAQ,IAAI,wCAAM,SAAS,EAAE,2BAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI,CACtD,CACb,CAAC;AACJ,CAAC,CAAC;AAKW,QAAA,MAAM,GAAG,eAAK,CAAC,UAAU,CAAC,eAAe,CAIxB,CAAC"}

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

@@ -3,28 +3,32 @@
   --button-space: 0px;
   /* button border width */
   --border-width: 0px;
+  /* line height in pixels to prevent layout shift when rendering a glyph */
+  --line-height: var(--space-small);
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: calc(max(var(--button-space), var(--space-xxsmall)) * 0.66);
+  gap: calc(var(--button-space) * 0.66);
   appearance: none;
   padding: 0;
   border: var(--border-width) solid transparent;
   background: none;
-  transition: var(--transition-out);
   color: var(--color-text-ultra-light);
+  font-size: var(--size-medium);
   font-family: var(--font-family);
+  line-height: var(--line-height);
   white-space: nowrap;
+  transition: var(--transition-out);
 }
 
 a.root {
   text-decoration: none;
 }
 
+.root:focus,
 .root:hover,
-.root:active,
-.root:focus {
+.root:active {
   outline: none;
   color: var(--color-text-light);
   transition: var(--transition-in);
@@ -32,6 +36,8 @@ a.root {
 
 .glyph {
   flex: 0 0 auto;
+  width: var(--line-height);
+  height: var(--line-height);
 }
 
 .text {
@@ -43,13 +49,13 @@ a.root {
  * Kind variation
  */
 .primary {
-  color: var(--color-primary);
+  color: var(--color-accent);
 }
 
 .primary:hover,
 .primary:active,
 .primary:focus {
-  color: var(--color-primary-dark);
+  color: var(--color-accent-dark);
 }
 
 .secondary {
@@ -106,25 +112,25 @@ a.root {
  * Solid Kind variation
  */
 .solid {
-  background: var(--color-text-ultra-light);
+  background: var(--color-text-light);
   color: var(--color-background);
 }
 
 .solid:hover,
 .solid:active,
 .solid:focus {
-  background: var(--color-text-light);
+  background: var(--color-text);
   color: var(--color-background);
 }
 
 .solid--primary {
-  background: var(--color-primary);
+  background: var(--color-accent);
 }
 
 .solid--primary:hover,
 .solid--primary:active,
 .solid--primary:focus {
-  background: var(--color-primary-dark);
+  background: var(--color-accent-dark);
 }
 
 .solid--secondary {
@@ -180,40 +186,36 @@ a.root {
 /**
  * Size variation
  */
+.xsmall {
+  --button-space: var(--space-xxxsmall);
+  --line-height: var(--space-xsmall);
+
+  font-size: var(--size-xsmall);
+}
+
 .small {
   --button-space: var(--space-xxsmall);
+  --line-height: var(--space-small);
 
   font-size: var(--size-small);
-  line-height: var(--space-small);
-}
-
-.small .glyph {
-  width: var(--space-small);
-  height: var(--space-small);
 }
 
 .medium {
   --button-space: var(--space-xsmall);
-
-  font-size: var(--size-medium);
-  line-height: calc(var(--space-small) + var(--space-xxxsmall));
+  --line-height: var(--space-small);
 }
 
 .medium .glyph {
-  width: calc(var(--space-small) + var(--space-xxxsmall));
+  margin: calc(0px - var(--space-xxxsmall) / 2);
   height: calc(var(--space-small) + var(--space-xxxsmall));
+  width: calc(var(--space-small) + var(--space-xxxsmall));
 }
 
 .large {
   --button-space: var(--space-small);
+  --line-height: var(--space-medium);
 
   font-size: var(--size-large);
-  line-height: var(--space-medium);
-}
-
-.large .glyph {
-  width: var(--space-medium);
-  height: var(--space-medium);
 }
 
 /**
@@ -300,6 +302,10 @@ a.root {
 /**
  * Radius variation
  */
+.radius--xsmall {
+  border-radius: var(--radius-xsmall);
+}
+
 .radius--small {
   border-radius: var(--radius-small);
 }
@@ -361,5 +367,10 @@ a.root {
  * Disabled state
  */
 .root[disabled] {
-  filter: grayscale(1);
+  opacity: 0.9;
+}
+
+.root[disabled] .icon,
+.root[disabled] .content {
+  opacity: 0.8;
 }

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

@@ -10,7 +10,7 @@ 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 }));
+    return (react_1.default.createElement(flex_stack_1.FlexStack, { className: (0, classnames_1.default)(control_group_module_css_1.default.root, className), gap: "no-space", alignItems: "center", ...restProps }));
 };
 exports.ControlGroup = ControlGroup;
 //# sourceMappingURL=control-group.js.map

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

@@ -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"}
+{"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,GAAG,EAAC,UAAU,EACd,UAAU,EAAC,QAAQ,KACf,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,YAAY,gBAUvB"}

package/lib/ui/copy-to-clipboard/copy-to-clipboard.module.css

@@ -6,10 +6,10 @@
 
 /** done state */
 .root svg {
-  transition: var(--ui-transition-out);
+  transition: var(--transition-out);
 }
 
 .done svg {
   color: var(--color-success);
-  transition: var(--ui-transition-in);
+  transition: var(--transition-in);
 }

package/lib/ui/dialog/dialog.js

@@ -8,18 +8,20 @@ const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const dialog_1 = require("ariakit/dialog");
 const stack_1 = require("../../layout/stack");
+const portal_1 = require("../../utils/portal");
 const button_1 = require("../button");
 const dialog_module_css_1 = __importDefault(require("./dialog.module.css"));
 const useDialogState = (options = {}) => {
     return (0, dialog_1.useDialogState)({ animated: true, ...options });
 };
 exports.useDialogState = useDialogState;
+const createPortalElement = (0, portal_1.getCreatePortalElement)(dialog_module_css_1.default.portal);
 const Dialog = (props) => {
     const { state, className = '', title = '', width = 'medium', center = false, modal = false, children, } = props;
     const rootClassName = (0, classnames_1.default)(dialog_module_css_1.default.dialog, width && dialog_module_css_1.default[`width--${width}`], center && dialog_module_css_1.default.center);
     return (react_1.default.createElement(dialog_1.Dialog, { state: state, modal: modal, backdrop: true, backdropProps: {
             className: dialog_module_css_1.default.backdrop,
-        }, portal: true, className: rootClassName },
+        }, portal: true, portalElement: createPortalElement, className: rootClassName },
         !modal && (react_1.default.createElement(dialog_1.DialogDismiss, { as: button_1.Button, glyph: button_1.BUTTON_GLYPHS.CLOSE, className: dialog_module_css_1.default.headerClose }, null)),
         react_1.default.createElement(stack_1.Stack, { space: "medium" },
             title && (react_1.default.createElement("header", { className: dialog_module_css_1.default.header }, typeof title === 'string' ? react_1.default.createElement("h2", { className: dialog_module_css_1.default.headerTitle }, title) : title)),

package/lib/ui/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/dialog.tsx"],"names":[],"mappings":";;;;;;AACA,kDAA0B;AAC1B,4DAA4B;AAC5B,2CAKwB;AAExB,8CAA2C;AAC3C,sCAAkD;AAClD,4EAAsC;AAE/B,MAAM,cAAc,GAAG,CAAC,UAA4B,EAAE,EAAE,EAAE;IAC/D,OAAO,IAAA,uBAAqB,EAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;AAC/D,CAAC,CAAC;AAFW,QAAA,cAAc,kBAEzB;AAYK,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,MAAM,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,QAAQ,EAChB,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,EACb,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,2BAAG,CAAC,MAAM,EAAE,KAAK,IAAI,2BAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EAAE,MAAM,IAAI,2BAAG,CAAC,MAAM,CAAC,CAAC;IAE5F,OAAO,CACL,8BAAC,eAAa,IACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,QACR,aAAa,EAAE;YACb,SAAS,EAAE,2BAAG,CAAC,QAAQ;SACxB,EACD,MAAM,QACN,SAAS,EAAE,aAAa;QAEvB,CAAC,KAAK,IAAI,CACT,8BAAC,sBAAoB,IAAC,EAAE,EAAE,eAAM,EAAE,KAAK,EAAE,sBAAa,CAAC,KAAK,EAAE,SAAS,EAAE,2BAAG,CAAC,WAAW,IAErF,IAAI,CACgB,CACxB;QACD,8BAAC,aAAK,IAAC,KAAK,EAAC,QAAQ;YAClB,KAAK,IAAI,CACR,0CAAQ,SAAS,EAAE,2BAAG,CAAC,MAAM,IAC1B,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,sCAAI,SAAS,EAAE,2BAAG,CAAC,WAAW,IAAG,KAAK,CAAM,CAAC,CAAC,CAAC,KAAK,CAC1E,CACV;YACD,uCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,2BAAG,CAAC,OAAO,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CACtD,CACM,CACjB,CAAC;AACJ,CAAC,CAAC;AAxCW,QAAA,MAAM,UAwCjB"}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/dialog.tsx"],"names":[],"mappings":";;;;;;AACA,kDAA0B;AAC1B,4DAA4B;AAC5B,2CAKwB;AAExB,8CAA2C;AAC3C,+CAA4D;AAC5D,sCAAkD;AAClD,4EAAsC;AAE/B,MAAM,cAAc,GAAG,CAAC,UAA4B,EAAE,EAAE,EAAE;IAC/D,OAAO,IAAA,uBAAqB,EAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;AAC/D,CAAC,CAAC;AAFW,QAAA,cAAc,kBAEzB;AAKF,MAAM,mBAAmB,GAAG,IAAA,+BAAsB,EAAC,2BAAG,CAAC,MAAM,CAAC,CAAC;AAYxD,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,MAAM,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,QAAQ,EAChB,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,EACb,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,2BAAG,CAAC,MAAM,EAAE,KAAK,IAAI,2BAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EAAE,MAAM,IAAI,2BAAG,CAAC,MAAM,CAAC,CAAC;IAE5F,OAAO,CACL,8BAAC,eAAa,IACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,QACR,aAAa,EAAE;YACb,SAAS,EAAE,2BAAG,CAAC,QAAQ;SACxB,EACD,MAAM,QACN,aAAa,EAAE,mBAAmB,EAClC,SAAS,EAAE,aAAa;QAEvB,CAAC,KAAK,IAAI,CACT,8BAAC,sBAAoB,IAAC,EAAE,EAAE,eAAM,EAAE,KAAK,EAAE,sBAAa,CAAC,KAAK,EAAE,SAAS,EAAE,2BAAG,CAAC,WAAW,IAErF,IAAI,CACgB,CACxB;QACD,8BAAC,aAAK,IAAC,KAAK,EAAC,QAAQ;YAClB,KAAK,IAAI,CACR,0CAAQ,SAAS,EAAE,2BAAG,CAAC,MAAM,IAC1B,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,sCAAI,SAAS,EAAE,2BAAG,CAAC,WAAW,IAAG,KAAK,CAAM,CAAC,CAAC,CAAC,KAAK,CAC1E,CACV;YACD,uCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,2BAAG,CAAC,OAAO,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CACtD,CACM,CACjB,CAAC;AACJ,CAAC,CAAC;AAzCW,QAAA,MAAM,UAyCjB"}

package/lib/ui/dialog/dialog.module.css

@@ -1,3 +1,8 @@
+/** place overlays triggered from inside the dialog on top of the dialog */
+.portal {
+  --layer-overlay: calc(var(--layer-xxhigh) + 1);
+}
+
 .backdrop {
   display: flex;
   align-items: center;