@bundle-stats/ui 4.2.3-beta.0 → 4.2.3-beta.1

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

@@ -0,0 +1,366 @@
+.root {
+  /* use for vertical padding and to compute gap and horizontal spacing */
+  --button-space: 0px;
+  /* button border width */
+  --border-width: 0px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(max(var(--button-space), var(--space-xxsmall)) * 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-family: var(--font-family);
+  white-space: nowrap;
+}
+
+a.root {
+  text-decoration: none;
+}
+
+.root:hover,
+.root:active,
+.root:focus {
+  outline: none;
+  color: var(--color-text-light);
+  transition: var(--transition-in);
+}
+
+.glyph {
+  flex: 0 0 auto;
+}
+
+.text {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+/**
+ * Kind variation
+ */
+.primary {
+  color: var(--color-primary);
+}
+
+.primary:hover,
+.primary:active,
+.primary:focus {
+  color: var(--color-primary-dark);
+}
+
+.secondary {
+  color: var(--color-secondary);
+}
+
+.secondary:hover,
+.secondary:active,
+.secondary:focus {
+  color: var(--color-secondary-dark);
+}
+
+.danger {
+  color: var(--color-danger);
+}
+
+.danger:hover,
+.danger:active,
+.danger:focus {
+  color: var(--color-danger-dark);
+}
+
+.warning {
+  color: var(--color-warning);
+}
+
+.warning:hover,
+.warning:active,
+.warning:focus {
+  color: var(--color-warning-dark);
+}
+
+.info {
+  color: var(--color-info);
+}
+
+.info:hover,
+.info:active,
+.info:focus {
+  color: var(--color-info-dark);
+}
+
+.success {
+  color: var(--color-success);
+}
+
+.success:hover,
+.success:active,
+.success:focus {
+  color: var(--color-success-dark);
+}
+
+/**
+ * Solid Kind variation
+ */
+.solid {
+  background: var(--color-text-ultra-light);
+  color: var(--color-background);
+}
+
+.solid:hover,
+.solid:active,
+.solid:focus {
+  background: var(--color-text-light);
+  color: var(--color-background);
+}
+
+.solid--primary {
+  background: var(--color-primary);
+}
+
+.solid--primary:hover,
+.solid--primary:active,
+.solid--primary:focus {
+  background: var(--color-primary-dark);
+}
+
+.solid--secondary {
+  background: var(--color-secondary);
+}
+
+.solid--secondary:hover,
+.solid--secondary:active,
+.solid--secondary:focus {
+  background: var(--color-secondary-dark);
+}
+
+.solid--danger {
+  background: var(--color-danger);
+}
+
+.solid--danger:hover,
+.solid--danger:active,
+.solid--danger:focus {
+  background: var(--color-danger-dark);
+}
+
+.solid--warning {
+  background: var(--color-warning);
+}
+
+.solid--warning:hover,
+.solid--warning:active,
+.solid--warning:focus {
+  background: var(--color-warning-dark);
+}
+
+.solid--info {
+  background: var(--color-info);
+}
+
+.solid--info:hover,
+.solid--info:active,
+.solid--info:focus {
+  background: var(--color-info-dark);
+}
+
+.solid--success {
+  background: var(--color-success);
+}
+
+.solid--success:hover,
+.solid--success:active,
+.solid--success:focus {
+  background: var(--color-success-dark);
+}
+
+/**
+ * Size variation
+ */
+.small {
+  --button-space: var(--space-xxsmall);
+
+  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));
+}
+
+.medium .glyph {
+  width: calc(var(--space-small) + var(--space-xxxsmall));
+  height: calc(var(--space-small) + var(--space-xxxsmall));
+}
+
+.large {
+  --button-space: var(--space-small);
+
+  font-size: var(--size-large);
+  line-height: var(--space-medium);
+}
+
+.large .glyph {
+  width: var(--space-medium);
+  height: var(--space-medium);
+}
+
+/**
+ * Outline variation
+ */
+.outline {
+  --border-width: 1px;
+  border-color: var(--color-outline);
+}
+
+.outline:hover,
+.outline:active,
+.outline:focus {
+  border-color: var(--color-outline-dark);
+}
+
+.outline--primary {
+  border-color: var(--color-outline-primary);
+}
+
+.outline--primary:hover,
+.outline--primary:active,
+.outline--primary:focus {
+  border-color: var(--color-outline-primary-dark);
+}
+
+.outline--secondary {
+  border-color: var(--color-outline-secondary);
+}
+
+.outline--secondary:hover,
+.outline--secondary:active,
+.outline--secondary:focus {
+  border-color: var(--color-outline-secondary-dark);
+}
+
+.outline--danger {
+  border-color: var(--color-outline-danger);
+}
+
+.outline--danger:hover,
+.outline--danger:active,
+.outline--danger:focus {
+  border-color: var(--color-outline-danger-dark);
+}
+
+.outline--warning {
+  border-color: var(--color-outline-warning);
+}
+
+.outline--warning:hover,
+.outline--warning:active,
+.outline--warning:focus {
+  border-color: var(--color-outline-warning-dark);
+}
+
+.outline--info {
+  border-color: var(--color-outline-info);
+}
+
+.outline--info:hover,
+.outline--info:active,
+.outline--info:focus {
+  border-color: var(--color-outline-info-dark);
+}
+
+.outline--success {
+  border-color: var(--color-outline-success);
+}
+
+.outline--success:hover,
+.outline--success:active,
+.outline--success:focus {
+  border-color: var(--color-outline-success-dark);
+}
+
+
+/**
+ * Padding variation
+ */
+.padding {
+  padding: calc(var(--button-space) - var(--border-width));
+}
+
+/**
+ * Radius variation
+ */
+.radius--small {
+  border-radius: var(--radius-small);
+}
+
+.radius--medium {
+  border-radius: var(--radius-medium);
+}
+
+.radius--large {
+  border-radius: var(--radius-large);
+}
+
+.radius--circle {
+  border-radius: 50%;
+}
+
+/**
+ * Active variation
+ */
+.active {
+  text-decoration: underline;
+}
+
+.active-outline-default {
+  background: var(--color-highlight);
+  text-decoration: none;
+}
+
+.active-outline-primary {
+  background: var(--color-highlight-primary);
+  text-decoration: none;
+}
+.active-outline-secondary {
+  background: var(--color-highlight-secondary);
+  text-decoration: none;
+}
+
+.active-outline-info {
+  background: var(--color-highlight-info);
+  text-decoration: none;
+}
+
+.active-outline-success {
+  background: var(--color-highlight-success);
+  text-decoration: none;
+}
+
+.active-outline-warning {
+  background: var(--color-highlight-warning);
+  text-decoration: none;
+}
+
+.active-outline-danger {
+  background: var(--color-highlight-danger);
+  text-decoration: none;
+}
+
+/**
+ * Disabled state
+ */
+.root[disabled] {
+  filter: grayscale(1);
+}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/ui/container/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAG5B,OAAO,GAAG,MAAM,wBAAwB,CAAC;AAMzC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,SAAS,EACG,EAAE,EAAE,CAAC,CACpB,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IAC3C,6BAAK,SAAS,EAAE,GAAG,CAAC,KAAK,KAAM,SAAS,GAAI,CAClC,CACb,CAAC"}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/ui/container/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,wBAAwB,CAAC;AAMzC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,SAAS,EACG,EAAE,EAAE,CAAC,CACpB,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IAC3C,6BAAK,SAAS,EAAE,GAAG,CAAC,KAAK,KAAM,SAAS,GAAI,CAClC,CACb,CAAC"}

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/copy-to-clipboard/copy-to-clipboard.js

@@ -0,0 +1,26 @@
+import React, { useCallback, useState } from 'react';
+import cx from 'classnames';
+import { useCopyToClipboard } from 'react-use';
+import I18N from '../../i18n';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { Tooltip } from '../tooltip';
+import css from './copy-to-clipboard.module.css';
+export const CopyToClipboard = (props) => {
+    const { className = '', children, text, ...restProps } = props;
+    const [, copyToClipboard] = useCopyToClipboard();
+    const [doneTimeout, setDoneTimeout] = useState();
+    const handleOnClick = useCallback(() => {
+        if (doneTimeout) {
+            clearTimeout(doneTimeout);
+            setDoneTimeout(null);
+        }
+        setDoneTimeout(null);
+        copyToClipboard(text);
+        const done = setTimeout(() => setDoneTimeout(null), 2000);
+        setDoneTimeout(done);
+    }, [text, doneTimeout, setDoneTimeout]);
+    const rootClassName = cx(css.root, className, doneTimeout && css.done);
+    return (React.createElement(Tooltip, { title: doneTimeout ? I18N.COPY_TO_CLIPBOARD_DONE : I18N.COPY_TO_CLIPBOARD, as: Button, type: "button", rightGlyph: doneTimeout ? Icon.ICONS.CLIPBOARD_CHECK : Icon.ICONS.CLIPBOARD, onClick: handleOnClick, className: rootClassName, ...restProps }, children));
+};
+//# sourceMappingURL=copy-to-clipboard.js.map

package/lib-esm/ui/copy-to-clipboard/copy-to-clipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-to-clipboard.js","sourceRoot":"","sources":["../../../src/ui/copy-to-clipboard/copy-to-clipboard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAE/C,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,GAAG,MAAM,gCAAgC,CAAC;AASjD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC7D,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE/D,MAAM,CAAC,EAAE,eAAe,CAAC,GAAG,kBAAkB,EAAE,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAwC,CAAC;IAEvF,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,WAAW,EAAE,CAAC;YAChB,YAAY,CAAC,WAAW,CAAC,CAAC;YAC1B,cAAc,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;QAED,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,eAAe,CAAC,IAAI,CAAC,CAAC;QAEtB,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;QAC1D,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;IAExC,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,WAAW,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;IAEvE,OAAO,CACL,oBAAC,OAAO,IACN,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EACzE,EAAE,EAAE,MAAM,EACV,IAAI,EAAC,QAAQ,EACb,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAC3E,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,aAAa,KACpB,SAAS,IAEZ,QAAQ,CACD,CACX,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,15 @@
+.root {
+  white-space: nowrap;
+  /** override tooltip styles */
+  color: var(--color-text-ultra-light) !important;
+}
+
+/** done state */
+.root svg {
+  transition: var(--ui-transition-out);
+}
+
+.done svg {
+  color: var(--color-success);
+  transition: var(--ui-transition-in);
+}

package/lib-esm/ui/copy-to-clipboard/index.js

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

package/lib-esm/ui/copy-to-clipboard/index.js.map

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import cx from 'classnames';
+import { Dialog as AriakitDialog, DialogDismiss as AriakitDialogDismiss } from 'ariakit/dialog';
+import { Stack } from '../../layout/stack';
+import { BUTTON_GLYPHS, Button } from '../button';
+import css from './dialog.module.css';
+export { useDialogState } from 'ariakit/dialog';
+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 },
+        !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)),
+            React.createElement("div", { className: cx(css.content, className) }, children))));
+};
+//# sourceMappingURL=dialog.js.map

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

@@ -0,0 +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,EAAE,MAAM,IAAI,aAAa,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEhG,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAYhD,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"}

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

@@ -0,0 +1,93 @@
+.backdrop {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 99999 !important;
+}
+
+.backdrop::before {
+  content: ' ';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--color-backdrop);
+  filter:
+}
+
+.dialog {
+  --dialog-header-height: var(--space-medium);
+  --dialog-vspace: var(--space-xsmall);
+  --dialog-padding: var(--space-xsmall);
+
+  width: calc(100vw - 2 * var(--dialog-padding));
+  position: relative;
+  border-radius: var(--radius-medium);
+  padding: var(--dialog-padding);
+  background: var(--color-background);
+  box-shadow: 0 0 var(--space-medium) var(--color-shadow);
+}
+
+.header {
+  min-height: var(--dialog-header-height);
+}
+
+.header:empty {
+  display: none;
+}
+
+.headerTitle {
+  font-weight: bold;
+}
+
+.headerClose {
+  position: absolute;
+  right: var(--space-xxsmall);
+  top: var(--space-xxsmall);
+  padding: var(--space-xxxsmall);
+  flex: 0 0 auto;
+  color: var(--color-outline-dark);
+}
+
+.headerClose:hover,
+.headerClose:focus,
+.headerClose:active {
+  color: var(--color-text-ultra-light);
+}
+
+.content {
+  width: 100%;
+  max-height: calc(100vh - 2 * var(--space-medium) - 2 * var(--dialog-padding) - var(--dialog-header-height) - var(--dialog-vspace));
+  padding-bottom: 0.3em; /* extra space to compensate for the title line-height and allow to show focus state correctly on buttons */
+  overflow: auto;
+}
+
+/** Width variation */
+.width--narrow {
+  max-width: 480px;
+}
+
+.width--medium {
+  max-width: 640px;
+}
+
+.width--wide {
+  max-width: 960px;
+}
+
+.width--extra-wide {
+  max-width: calc(var(--max-width) + 2 * var(--space-medium));
+}
+
+/** Center variation */
+.center {
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .dialog {
+    --dialog-vspace: var(--space-medium);
+    --dialog-padding: var(--space-large);
+  }
+}

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

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

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

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

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

@@ -1,51 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
-import { FlexStack } from '../../layout/flex-stack';
-import { Icon } from '../icon';
+import { Button, BUTTON_SIZE } from '../button';
 import css from './dropdown.module.css';
-const Item = ({ className = '', isActive = false, ...restProps }) => (React.createElement(MenuItem, { className: cx(css.item, className, isActive && css.itemActive), ...restProps }));
-Item.propTypes = {
-    className: PropTypes.string,
-    isActive: PropTypes.bool,
-};
-Item.defaultProps = {
-    className: '',
-    isActive: false,
+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, buttonClassName, label, ariaLabel, glyph, children } = props;
-    const rootClassName = cx(css.root, className);
-    const menuState = useMenuState();
-    return (React.createElement("div", { className: rootClassName },
-        React.createElement(MenuButton, { state: menuState, className: cx(css.button, buttonClassName), tabIndex: null },
-            React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", className: css.label },
-                glyph && React.createElement(Icon, { className: css.labelIcon, glyph: glyph }),
-                label && React.createElement("span", { className: css.labelText }, label))),
-        React.createElement(Menu, { state: menuState, "aria-label": ariaLabel || label, className: css.dropdown }, typeof children === 'function'
-            ? children({
-                MenuItem: Item,
-                menu: menuState,
-                menuItemClassName: css.item,
-                menuItemActiveClassName: css.itemActive,
-            })
-            : children)));
-};
-Dropdown.defaultProps = {
-    className: '',
-    buttonClassName: '',
-    label: null,
-    ariaLabel: '',
-    glyph: null,
-};
-Dropdown.propTypes = {
-    className: PropTypes.string,
-    buttonClassName: PropTypes.string,
-    label: PropTypes.node,
-    ariaLabel: PropTypes.string,
-    glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
+    const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', disabled = false, placement, gutter = 4, shift, children, } = props;
+    const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
+    const menuState = useMenuState({ placement, gutter, shift });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(MenuButton, { as: Button, outline: true, size: BUTTON_SIZE.SMALL, glyph: glyph, disabled: disabled, state: menuState, tabIndex: null, className: cx(css.button, className) }, label),
+        React.createElement(Menu, { portal: true, state: menuState, "aria-label": dropdownAriaLabel, className: cx(css.dropdown, dropdownClassName) }, children)));
 };
-Dropdown.Item = Item;
 //# 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.jsx"],"names":[],"mappings":"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"}
+{"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;AAMxC,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;AAaF,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,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,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAE7D,OAAO,CACL;QACE,oBAAC,UAAU,IACT,EAAE,EAAE,MAAM,EACV,OAAO,QACP,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAE,KAAK,EACZ,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"}