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

package/lib-esm/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-esm/query-state.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import isEqual from 'lodash/isEqual';
 import { QueryParamProvider, useQueryParams } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
@@ -9,13 +9,16 @@ export const useComponentQueryState = (componentName) => {
         [componentName]: COMPONENT_STATE_META[componentName],
     });
     const componentState = queryState[componentName];
+    const componentStateRef = useRef(componentState);
+    componentStateRef.current = componentState;
     const setState = useCallback((updates) => {
-        const newState = { ...componentState, ...updates };
-        if (isEqual(componentState, newState)) {
+        const currentState = componentStateRef.current;
+        const newState = { ...currentState, ...updates };
+        if (isEqual(currentState, newState)) {
             return;
         }
         setQueryState({ [componentName]: newState });
-    }, [componentState, setQueryState]);
+    }, [componentName, setQueryState]);
     return [componentState, setState];
 };
 //# sourceMappingURL=query-state.js.map

package/lib-esm/query-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAM3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpE,oBAAC,kBAAkB,IAAC,OAAO,EAAE,mBAAmB,KAAM,KAAK,GAAI,CAChE,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,aAAqB,EAAE,EAAE;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,cAAc,CAAC;QACjD,CAAC,aAAa,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC;KACrD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,OAAgC,EAAE,EAAE;QACnC,MAAM,QAAQ,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,OAAO,EAAE,CAAC;QAGnD,IAAI,OAAO,CAAC,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"}
+{"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAM3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpE,oBAAC,kBAAkB,IAAC,OAAO,EAAE,mBAAmB,KAAM,KAAK,GAAI,CAChE,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,aAAqB,EAAE,EAAE;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,cAAc,CAAC;QACjD,CAAC,aAAa,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC;KACrD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAGjD,MAAM,iBAAiB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IACjD,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC;IAE3C,MAAM,QAAQ,GAAG,WAAW,CAC1B,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,OAAO,CAAC,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"}

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

@@ -4,6 +4,7 @@ import { Button as ButtonBaseComponent } from 'ariakit/button';
 import { Icon as BaseIcon } from '../icon';
 import css from './button.module.css';
 export const BUTTON_SIZE = {
+    XSMALL: 'xsmall',
     SMALL: 'small',
     MEDIUM: 'medium',
     LARGE: 'large',
@@ -17,13 +18,13 @@ export const BUTTON_KIND = {
     SUCCES: 'success',
 };
 export const BUTTON_GLYPHS = BaseIcon.ICONS;
-const ButtonComponent = (props) => {
+const ButtonComponent = (props, ref) => {
     const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = ButtonBaseComponent, children = null, Icon = BaseIcon, glyph, rightGlyph, ...restProps } = props;
     const resolvedPadding = padding || ((outline || solid) && size);
     const resolvedRadius = radius || ((outline || solid) && size);
     const resolvedSize = Object.values(BUTTON_SIZE).includes(size) ? size : BUTTON_SIZE.MEDIUM;
     const rootClassName = cx(css.root, kind && css[kind], css[resolvedSize], outline && css.outline, outline && css[`outline--${kind}`], solid && css.solid, solid && css[`solid--${kind}`], resolvedPadding && css.padding, resolvedRadius && css[`radius--${resolvedRadius}`], active && css.active, active && outline && css[`active-outline-${kind}`], className);
-    return (React.createElement(Component, { ...restProps, className: rootClassName },
+    return (React.createElement(Component, { ...restProps, ref: ref, className: rootClassName },
         glyph && React.createElement(Icon, { glyph: glyph, className: css.glyph }),
         children && React.createElement("span", { className: css.content }, children),
         rightGlyph && React.createElement(Icon, { glyph: rightGlyph, className: css.glyph })));

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,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,MAAM,CAAC,MAAM,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;AAEX,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,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,mBAAmB,EACnC,QAAQ,GAAG,IAAI,EACf,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,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;IAE3F,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,EACjB,GAAG,CAAC,YAAY,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,OAAO,EAC9B,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,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,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI;QACrD,QAAQ,IAAI,8BAAM,SAAS,EAAE,GAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI,CACtD,CACb,CAAC;AACJ,CAAC,CAAC;AAKF,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAIxB,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,CAAC,MAAM,WAAW,GAAG;IACzB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,MAAM,CAAC,MAAM,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;AAEX,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,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,mBAAmB,EACnC,QAAQ,GAAG,IAAI,EACf,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,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;IAE3F,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,EACjB,GAAG,CAAC,YAAY,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,OAAO,EAC9B,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,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,aAAa;QACzD,KAAK,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI;QACrD,QAAQ,IAAI,8BAAM,SAAS,EAAE,GAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAI,CACtD,CACb,CAAC;AACJ,CAAC,CAAC;AAKF,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAIxB,CAAC"}

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

@@ -3,35 +3,43 @@
   --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-property: color, background-color, border-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 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);
+  transition-duration: var(--transition-duration-in);
 }
 
 .glyph {
   flex: 0 0 auto;
+  width: var(--line-height);
+  height: var(--line-height);
 }
 
 .text {
@@ -43,13 +51,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 +114,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 +188,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 +304,10 @@ a.root {
 /**
  * Radius variation
  */
+.radius--xsmall {
+  border-radius: var(--radius-xsmall);
+}
+
 .radius--small {
   border-radius: var(--radius-small);
 }
@@ -361,5 +369,10 @@ a.root {
  * Disabled state
  */
 .root[disabled] {
-  filter: grayscale(1);
+  opacity: 0.9;
+}
+
+.root[disabled] .icon,
+.root[disabled] .content {
+  opacity: 0.8;
 }

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

@@ -4,6 +4,6 @@ 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 }));
+    return (React.createElement(FlexStack, { className: cx(css.root, className), gap: "no-space", alignItems: "center", ...restProps }));
 };
 //# sourceMappingURL=control-group.js.map

package/lib-esm/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,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"}
+{"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,GAAG,EAAC,UAAU,EACd,UAAU,EAAC,QAAQ,KACf,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC"}

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

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

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

@@ -2,17 +2,19 @@ import React from 'react';
 import cx from 'classnames';
 import { Dialog as AriakitDialog, DialogDismiss as AriakitDialogDismiss, useDialogState as useAriakitDialogState, } from 'ariakit/dialog';
 import { Stack } from '../../layout/stack';
+import { getCreatePortalElement } from '../../utils/portal';
 import { BUTTON_GLYPHS, Button } from '../button';
 import css from './dialog.module.css';
 export const useDialogState = (options = {}) => {
     return useAriakitDialogState({ animated: true, ...options });
 };
+const createPortalElement = getCreatePortalElement(css.portal);
 export const Dialog = (props) => {
     const { state, className = '', title = '', width = 'medium', center = false, modal = false, children, } = props;
     const rootClassName = cx(css.dialog, width && css[`width--${width}`], center && css.center);
     return (React.createElement(AriakitDialog, { state: state, modal: modal, backdrop: true, backdropProps: {
             className: css.backdrop,
-        }, portal: true, className: rootClassName },
+        }, portal: true, portalElement: createPortalElement, className: rootClassName },
         !modal && (React.createElement(AriakitDialogDismiss, { as: Button, glyph: BUTTON_GLYPHS.CLOSE, className: css.headerClose }, null)),
         React.createElement(Stack, { space: "medium" },
             title && (React.createElement("header", { className: css.header }, typeof title === 'string' ? React.createElement("h2", { className: css.headerTitle }, title) : title)),

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,MAAM,IAAI,aAAa,EACvB,aAAa,IAAI,oBAAoB,EACrC,cAAc,IAAI,qBAAqB,GAExC,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,UAA4B,EAAE,EAAE,EAAE;IAC/D,OAAO,qBAAqB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;AAC/D,CAAC,CAAC;AAYF,MAAM,CAAC,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,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,IAAI,GAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC;IAE5F,OAAO,CACL,oBAAC,aAAa,IACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,QACR,aAAa,EAAE;YACb,SAAS,EAAE,GAAG,CAAC,QAAQ;SACxB,EACD,MAAM,QACN,SAAS,EAAE,aAAa;QAEvB,CAAC,KAAK,IAAI,CACT,oBAAC,oBAAoB,IAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,WAAW,IAErF,IAAI,CACgB,CACxB;QACD,oBAAC,KAAK,IAAC,KAAK,EAAC,QAAQ;YAClB,KAAK,IAAI,CACR,gCAAQ,SAAS,EAAE,GAAG,CAAC,MAAM,IAC1B,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,4BAAI,SAAS,EAAE,GAAG,CAAC,WAAW,IAAG,KAAK,CAAM,CAAC,CAAC,CAAC,KAAK,CAC1E,CACV;YACD,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CACtD,CACM,CACjB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,MAAM,IAAI,aAAa,EACvB,aAAa,IAAI,oBAAoB,EACrC,cAAc,IAAI,qBAAqB,GAExC,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,UAA4B,EAAE,EAAE,EAAE;IAC/D,OAAO,qBAAqB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;AAC/D,CAAC,CAAC;AAKF,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AAY/D,MAAM,CAAC,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,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,IAAI,GAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC;IAE5F,OAAO,CACL,oBAAC,aAAa,IACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,QACR,aAAa,EAAE;YACb,SAAS,EAAE,GAAG,CAAC,QAAQ;SACxB,EACD,MAAM,QACN,aAAa,EAAE,mBAAmB,EAClC,SAAS,EAAE,aAAa;QAEvB,CAAC,KAAK,IAAI,CACT,oBAAC,oBAAoB,IAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,WAAW,IAErF,IAAI,CACgB,CACxB;QACD,oBAAC,KAAK,IAAC,KAAK,EAAC,QAAQ;YAClB,KAAK,IAAI,CACR,gCAAQ,SAAS,EAAE,GAAG,CAAC,MAAM,IAC1B,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,4BAAI,SAAS,EAAE,GAAG,CAAC,WAAW,IAAG,KAAK,CAAM,CAAC,CAAC,CAAC,KAAK,CAC1E,CACV;YACD,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CACtD,CACM,CACjB,CAAC;AACJ,CAAC,CAAC"}

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

@@ -1,15 +1,22 @@
+/** 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;
   justify-content: center;
   z-index: var(--layer-xxhigh);
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .backdrop[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .backdrop[data-leave] {
@@ -34,17 +41,20 @@
   width: calc(100vw - 2 * var(--dialog-padding));
   position: relative;
   border-radius: var(--radius-medium);
-  padding: var(--dialog-padding);
+  border: 1px solid var(--color-outline);
+  padding: calc(var(--dialog-padding) - 1px);
   background: var(--color-background);
   box-shadow: 0 0 var(--space-medium) var(--color-shadow);
   z-index: var(--layer-xxhigh);
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .dialog[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .digalog[data-leave] {
@@ -86,6 +96,7 @@
   );
   padding-bottom: 0.3em; /* extra space to compensate for the title line-height and allow to show focus state correctly on buttons */
   overflow: auto;
+  overscroll-behavior: contain;
 }
 
 /** Width variation */

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

@@ -1,19 +1,26 @@
 import React from 'react';
 import cx from 'classnames';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 import { Button, BUTTON_SIZE } from '../button';
 import css from './dropdown.module.css';
 import { Icon } from '../icon';
+export const DropdownGroup = (props) => {
+    const { className, ...restProps } = props;
+    return React.createElement("div", { className: cx(css.group, className), ...restProps });
+};
 export const DropdownItem = (props) => {
     const { className = '', isActive = false, ...restProps } = props;
     return (React.createElement(MenuItem, { className: cx(css.item, className, isActive && css.itemActive), ...restProps }));
 };
 export const Dropdown = (props) => {
-    const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', showChevron = true, disabled = false, placement, gutter = 4, shift, children, } = props;
+    const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', showChevron: initialShowChevron, disabled = false, placement, gutter = 4, shift, children, } = props;
     const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
     const menuState = useMenuState({ animated: true, placement, gutter, shift });
+    const showChevron = isUndefined(initialShowChevron) ? !isNull(label) : initialShowChevron;
     return (React.createElement(React.Fragment, null,
-        React.createElement(MenuButton, { as: Button, outline: true, size: BUTTON_SIZE.SMALL, glyph: glyph, rightGlyph: showChevron ? Icon.ICONS.CHEVRON_DOWN : undefined, disabled: disabled, state: menuState, tabIndex: null, className: cx(css.button, className) }, label),
+        React.createElement(MenuButton, { as: Button, outline: true, size: BUTTON_SIZE.SMALL, glyph: glyph, rightGlyph: showChevron ? Icon.ICONS.CHEVRON_DOWN : undefined, disabled: disabled, state: menuState, toggleOnClick: true, tabIndex: null, className: cx(css.button, className) }, label),
         React.createElement(Menu, { portal: true, state: menuState, "aria-label": dropdownAriaLabel, className: cx(css.dropdown, dropdownClassName) }, children)));
 };
 //# sourceMappingURL=dropdown.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAkB,YAAY,EAAE,MAAM,cAAc,CAAC;AAExF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,GAAG,MAAM,uBAAuB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAM/B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAgE,EAAE,EAAE;IAC/F,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjE,OAAO,CACL,oBAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,IAAI,GAAG,CAAC,UAAU,CAAC,KAAM,SAAS,GAAI,CAC5F,CAAC;AACJ,CAAC,CAAC;AAcF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAkD,EAAE,EAAE;IAC7E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,iBAAiB,GAAG,EAAE,EACtB,KAAK,GAAG,IAAI,EACZ,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,WAAW,GAAG,IAAI,EAClB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,GAAG,CAAC,EACV,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,iBAAiB,GAAG,SAAS,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAChF,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAE7E,OAAO,CACL;QACE,oBAAC,UAAU,IACT,EAAE,EAAE,MAAM,EACV,OAAO,QACP,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAC7D,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,IAEnC,KAAK,CACK;QACb,oBAAC,IAAI,IACH,MAAM,QACN,KAAK,EAAE,SAAS,gBACJ,iBAAiB,EAC7B,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,iBAAiB,CAAC,IAE7C,QAAQ,CACJ,CACN,CACJ,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAkB,YAAY,EAAE,MAAM,cAAc,CAAC;AACxF,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,GAAG,MAAM,uBAAuB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1C,OAAO,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,KAAM,SAAS,GAAI,CAAC;AACrE,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAgE,EAAE,EAAE;IAC/F,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjE,OAAO,CACL,oBAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,IAAI,GAAG,CAAC,UAAU,CAAC,KAAM,SAAS,GAAI,CAC5F,CAAC;AACJ,CAAC,CAAC;AAcF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAkD,EAAE,EAAE;IAC7E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,iBAAiB,GAAG,EAAE,EACtB,KAAK,GAAG,IAAI,EACZ,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,WAAW,EAAE,kBAAkB,EAC/B,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,GAAG,CAAC,EACV,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,iBAAiB,GAAG,SAAS,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAChF,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7E,MAAM,WAAW,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC;IAE1F,OAAO,CACL;QACE,oBAAC,UAAU,IACT,EAAE,EAAE,MAAM,EACV,OAAO,QACP,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAC7D,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,EAChB,aAAa,QACb,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,IAEnC,KAAK,CACK;QACb,oBAAC,IAAI,IACH,MAAM,QACN,KAAK,EAAE,SAAS,gBACJ,iBAAiB,EAC7B,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,iBAAiB,CAAC,IAE7C,QAAQ,CACJ,CACN,CACJ,CAAC;AACJ,CAAC,CAAC"}

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

@@ -11,18 +11,24 @@
   left: 0;
   top: 100%;
   border-radius: var(--radius-small);
+  border: 1px solid var(--color-outline);
   box-shadow: var(--shadow-layer);
   background: var(--color-background);
-  min-width: 12em;
-  z-index: var(--layer-high);
-  padding: calc(var(--space-xxxsmall) / 2);
+  min-width: 16em;
+  z-index: var(--layer-overlay);
+  padding: calc(var(--space-xxxsmall) - 1px);
+  color: var(--color-text-light);
+  font-size: var(--size-small);
+  line-height: var(--line-height);
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .dropdown[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .dropdown[data-leave] {
@@ -40,14 +46,17 @@
   outline: none;
   border: 0;
   border-radius: var(--radius-small);
-  padding: calc(var(--space-xxxsmall) + var(--space-xxxsmall) / 2);
+  padding: var(--space-xxxsmall);
   background: none;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
   text-align: left;
-  color: var(--color-text-light);
-  font-size: var(--size-small);
-  line-height: var(--line-height);
   text-decoration: none;
   cursor: default;
+  transition-property: color, background-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .item[data-active-item],
@@ -56,6 +65,7 @@
 .item:active {
   background: var(--color-highlight);
   color: var(--color-text);
+  transition-duration: var(--transition-duration-in);
 }
 
 .itemActive {
@@ -69,3 +79,40 @@
   background: var(--color-highlight-info);
   color: var(--color-primary-dark);
 }
+
+.item + .item {
+  margin-top: calc(var(--space-xxxsmall) / 2);
+}
+
+.group {
+  position: relative;
+  padding: calc(var(--space-xxxsmall) / 2 + 1px) 0 calc(var(--space-xxxsmall) / 2);
+}
+
+.group::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  left: var(--space-xxxsmall);
+  right: var(--space-xxxsmall);
+  top: 0px;
+  height: 1px;
+  border: none;
+  background: var(--color-outline);
+}
+
+.group:first-child {
+  padding-top: 0;
+}
+
+.group:first-child::before {
+  display: none;
+}
+
+.group:last-child {
+  padding-bottom: 0;
+}
+
+.group:empty {
+  display: none;
+}