@apple-pie/slice 0.1.10 → 0.1.12

package/README.md

@@ -1,22 +1,10 @@
 # Slice (`@apple-pie/slice`)
 
-Slice is a TypeScript-first React UI kit with theme tokens, utility hooks, optional Zustand stores, Storybook docs, and benchmark tooling.
+Slice is a TypeScript-first React UI kit with typed theme tokens, composable components, hooks, optional Zustand stores, worker-backed uploads, Storybook documentation, and benchmark tooling.
 
-## Beta and links
+The package is currently in beta. Until `1.0.0`, breaking API changes may still happen.
 
-- This project is currently in **beta**. Until the official v1 release, breaking changes may be introduced without prior notice.
-- Documentation and showcase: https://slice-uikit.com
-- Repository: access is limited to authorized contributors/collaborators.
-
-## What is included
-
-- 30+ reusable UI components (inputs, buttons, navigation, overlays, feedback, layout, icons, upload UI, camera/stream UI)
-- Theme system with light/dark presets and typed theme tokens
-- React hooks for theme, window sizing, keyboard shortcuts, local storage, resize, and more
-- Optional Zustand-powered stores (`tip`, `uploads`, `window`, `SSE`, `WS`, `LocalDB`)
-- Utility functions and low-level objects such as `IndexedDB`, `SSEConnection`, and `WSConnection`
-- Rollup + TypeScript build pipeline for CJS, ESM, and declaration output
-- Component performance benchmarks powered by Vitest
+Docs and showcase: https://slice-uikit.com
 
 ## Installation
 
@@ -24,52 +12,55 @@ Slice is a TypeScript-first React UI kit with theme tokens, utility hooks, optio
 npm install @apple-pie/slice
 ```
 
-Peer dependencies:
+Required peer dependencies:
 
 ```bash
 npm install react react-dom motion
 ```
 
-Optional (only if using store exports):
+Optional peer dependency for store APIs:
 
 ```bash
 npm install zustand
 ```
 
-## Quick start
+## Quick Start
 
 ```tsx
-import { ThemeProvider, Avatar, Button, useTheme } from '@apple-pie/slice';
+import { Avatar, Button, ThemeProvider, useTheme } from '@apple-pie/slice';
 
 function ThemeToggle() {
-  const theme = useTheme();
-  return (
-    <Button
-      label={theme.isDark ? 'Switch to Light' : 'Switch to Dark'}
-      onClick={() => theme.toggle()}
-    />
-  );
+	const theme = useTheme();
+
+	return (
+		<Button
+			label={theme.isDark ? 'Switch to Light' : 'Switch to Dark'}
+			onClick={() => theme.toggle()}
+		/>
+	);
 }
 
 export default function App() {
-  return (
-    <ThemeProvider system>
-      <Avatar size={32} first="John" last="Appleseed" />
-      <ThemeToggle />
-    </ThemeProvider>
-  );
+	return (
+		<ThemeProvider system>
+			<Avatar size={32} first="John" last="Appleseed" />
+			<ThemeToggle />
+		</ThemeProvider>
+	);
 }
 ```
 
-## Public API
+`ThemeProvider` is the default theme bootstrap for the library. It sets the active `data-slice-theme` value on the document root, renders a `data-slice-theme-scope` wrapper, and pulls in the packaged theme CSS token files used by components and Storybook.
 
-Root import:
+## Package Surface
+
+Primary entrypoint:
 
 ```ts
-import { Avatar, useTheme, ThemeProvider } from '@apple-pie/slice';
+import { Avatar, ThemeProvider, useTheme } from '@apple-pie/slice';
 ```
 
-Subpath imports are also published:
+Published subpaths:
 
 - `@apple-pie/slice/components/*`
 - `@apple-pie/slice/hooks`
@@ -78,131 +69,82 @@ Subpath imports are also published:
 - `@apple-pie/slice/providers/*`
 - `@apple-pie/slice/stores`
 - `@apple-pie/slice/stores/*`
-- `@apple-pie/slice/utils`
-- `@apple-pie/slice/utils/objects`
-- `@apple-pie/slice/workers/*`
 - `@apple-pie/slice/theme`
 - `@apple-pie/slice/theme/colors`
 - `@apple-pie/slice/theme/corners`
 - `@apple-pie/slice/theme/elevations`
+- `@apple-pie/slice/theme/motion`
 - `@apple-pie/slice/theme/type`
 - `@apple-pie/slice/theme/themes`
+- `@apple-pie/slice/utils`
+- `@apple-pie/slice/utils/objects`
+- `@apple-pie/slice/workers/*`
 
-## Components
-
-- `Avatar`, `AvatarGroup`, `Badge`, `CheckBox`, `DivInput`, `Dot`, `DropDown`
-- `Camera`
-- `ErrorSummary`, `FileIcon`, `FileList`, `FlexDiv`, `Grouper`, `Icon`, `IconButton`
-- `PromptInput`, `Overlay`, `Pager`, `ProgressIndicator`, `DoneCheck`
-- `RadioButton`, `RadioButtonList`, `Slider`, `Spacer`, `Switch`, `TabBar`
-- `TextField`, `TextArea`, `Tip`, `Toast`, `Button`, `ButtonBar`
-- `Chip`, `Label`, `DraggablePanel`, `UploadArea`
-
-Example:
+Example subpath imports:
 
-```tsx
-import { useRef } from 'react';
-import { Camera } from '@apple-pie/slice';
-import type { CameraElement } from '@apple-pie/slice';
-
-export function CameraExample() {
-  const cameraRef = useRef<CameraElement | null>(null);
-
-  return (
-    <>
-      <Camera
-        ref={cameraRef}
-        width={400}
-        height={320}
-        sessionSettings={{
-          videoDeviceId: 'preferred-video-device-id',
-          micDeviceId: 'preferred-mic-device-id',
-        }}
-      />
-      <button onClick={() => cameraRef.current?.snapshot?.()}>
-        Take Snapshot
-      </button>
-      <button onClick={() => cameraRef.current?.toggleVideo?.()}>
-        Toggle Video
-      </button>
-    </>
-  );
-}
+```ts
+import { Avatar } from '@apple-pie/slice/components/Avatar';
+import { useTheme } from '@apple-pie/slice/hooks/useTheme';
+import { ThemeProvider } from '@apple-pie/slice/providers/ThemeProvider';
+import { useUploadsActions } from '@apple-pie/slice/stores/uploads';
+import { lightTheme } from '@apple-pie/slice/theme/themes';
+import { IndexedDB } from '@apple-pie/slice/utils/objects';
 ```
 
-## Hooks
-
-- `useTheme`, `useObserveTheme`
-- `useKeyboardShortcuts`
-- `useDoubleClick`
-- `useToolTip`
-- `useLastUpdated`
-- `useLocalStore`
-- `useWindow` with optional geolocation helpers (`geolocationSupported`, `location`, `locationError`, `gettingLocation`, `requestGeolocation`)
-- `useObserveResize`
-
-## Stores (optional)
+## What’s Included
 
-- `tip` store: `useTip`, `useTipActions`, `tipActions`, `getTip`
-- `LocalDB` store: `useLocalDBStore`, `useManageLocalDB`, `useLocalDB`, `useLocalDBValues`, `useLocalDBError`, `localDBActions`
-- `SSE` store: `useSSEStore`, `useSSE`, `useMessage`, `useConnectionMessage`, `useConnectionClose`, `useIsConnected`
-- `WS` store: `useWSStore`, `useWS`, `useMessage`, `useConnectionMessage`, `useConnectionClose`, `useIsConnected`
-- `window` store: `useWindowStore`, atomic viewport/runtime hooks, imperative viewport helpers, and explicit location actions/selectors
-- `uploads` store: `useUploadsStore`, `useUploads`, `useUploadsActions`, `createUploadsWorker`, `uploadsActions`
+- 30+ React components covering inputs, navigation, overlays, feedback, media, layout, upload, and utility UI
+- Theme tokens and presets for colors, corners, elevations, motion, typography, and full light/dark themes
+- React hooks for theme state, resize observation, keyboard shortcuts, local storage, double-click, tooltips, and window helpers
+- Optional Zustand stores for `LocalDB`, `SSE`, `WS`, `tip`, `toast`, `uploads`, and `window`
+- Worker-backed uploads via `@apple-pie/slice/workers/uploads`
+- Utility functions plus low-level `IndexedDB`, `SSEConnection`, and `WSConnection` helpers
 
-Uploads store example:
+## Upload Worker Example
 
 ```tsx
+import { useEffect, useRef } from 'react';
 import { UploadArea } from '@apple-pie/slice';
 import {
-  createUploadsWorker,
-  useUploads,
-  useUploadsActions,
-  useUploadsWorkerStatus,
+	createUploadsWorker,
+	useUploads,
+	useUploadsActions,
+	useUploadsWorkerStatus,
 } from '@apple-pie/slice/stores/uploads';
-import { useEffect, useRef } from 'react';
 
 function UploadsExample() {
-  const workerRef = useRef<Worker | null>(null);
-  const uploads = useUploads();
-  const workerStatus = useUploadsWorkerStatus();
-  const actions = useUploadsActions();
-
-  useEffect(() => {
-    if (workerRef.current) return;
-    workerRef.current = createUploadsWorker();
-    actions.initialize({ uploadURL: '/api/uploads' }, workerRef.current);
-  }, [actions]);
-
-  return (
-    <div>
-      <UploadArea
-        busy={workerStatus === 'busy'}
-        files={uploads.map((upload) => ({
-          id: upload.id,
-          file: upload.file,
-          progress: upload.progress,
-          error: upload.error,
-        }))}
-        onUpload={(files) => actions.push(files)}
-        showProgress={true}
-        title={'Upload files'}
-        message={'Drag and drop files here or click to upload'}
-      />
-
-      <div>worker: {workerStatus}</div>
-
-      {uploads.map((upload) => (
-        <div key={upload.id}>
-          {upload.file.name} - {upload.status} - {upload.progress ?? 0}%
-        </div>
-      ))}
-    </div>
-  );
+	const workerRef = useRef<Worker | null>(null);
+	const uploads = useUploads();
+	const workerStatus = useUploadsWorkerStatus();
+	const actions = useUploadsActions();
+
+	useEffect(() => {
+		if (workerRef.current) return;
+		workerRef.current = createUploadsWorker();
+		actions.initialize({ uploadURL: '/api/uploads' }, workerRef.current);
+	}, [actions]);
+
+	return (
+		<div>
+			<UploadArea
+				busy={workerStatus === 'busy'}
+				files={uploads.map((upload) => ({
+					id: upload.id,
+					file: upload.file,
+					progress: upload.progress,
+					error: upload.error,
+				}))}
+				onUpload={(files) => actions.push(files)}
+				showProgress={true}
+				title={'Upload files'}
+				message={'Drag and drop files here or click to upload'}
+			/>
+		</div>
+	);
 }
 ```
 
-For consuming browser apps using a built worker asset, pass an explicit worker URL from your bundler:
+If your app needs an explicit worker URL, import the built worker asset from the worker subpath:
 
 ```ts
 import { createUploadsWorker, uploadsActions } from '@apple-pie/slice/stores/uploads';
@@ -212,49 +154,27 @@ const worker = createUploadsWorker(uploadsWorkerUrl);
 uploadsActions.initialize({ uploadURL: '/api/uploads' }, worker);
 ```
 
-This worker URL pattern assumes modern frontend tooling such as Vite or similar browser-focused bundlers.
-
-## Theme exports
-
-- Presets: `lightTheme`, `darkTheme`
-- Color tokens: `light`, `dark`
-- Elevation tokens: `elevations` / `Elevation`
-- Types: `SliceTheme`, `Colors`, `Type`, `Corners`, `Elevations`
-
-## Utilities
-
-- Package utilities are published from `@apple-pie/slice/utils`
-- Low-level utility objects such as `IndexedDB`, `SSEConnection`, and `WSConnection` are also published from `@apple-pie/slice/utils/objects`
-- Internal utility source lives under `src/utils/functions/*`
-- Shared utility CSS modules live under `src/utils/styling/*`
-
 ## Development
 
 ```bash
-npm run dev               # Vite dev app
-npm run storybook         # Storybook on :6006
-npm run test              # Vitest tests
-npm run benchmark         # Benchmarks with formatted report
-npm run benchmark:raw     # Raw vitest benchmark output
-npm run build             # Rollup + types + css copy
-npm run lint              # Biome format + check
+npm run dev
+npm run storybook
+npm run test
+npm run benchmark
+npm run build
+npm run build:min
+npm run lint
 ```
 
-Benchmark details: `benchmarks/GUIDE.md`
-
-Build architecture details: `contributor-docs/build-architecture.md`
-
-## Build outputs
+`npm run build` produces:
 
-`npm run build` generates:
+- CommonJS in `dist/cjs`
+- ESM in `dist/esm`
+- type declarations in `dist/types`
+- shared CSS modules in `dist/css`
 
-- `dist/esm` for ESM
-- `dist/cjs` for CommonJS
-- `dist/types` for `.d.ts`
-- `dist/css` for shared utility css modules
+## Contributors
 
-## Notes
+Contribution setup and workflow: [CONTRIBUTING.md](./CONTRIBUTING.md)
 
-- Styling is CSS-module based and published with CSS side effects enabled (`"**/*.css"`).
-- Storybook docs (`*.stories.*` and `documentation/**`) are excluded from publishable type output.
-- Named media query aliases are compiled via PostCSS custom media. Definitions live in `src/theme/breakpoints/custom-media.css` and can be used in CSS as `@media (--bp-tablet) { ... }`.
+Build and publish architecture details: [contributor-docs/build-architecture.md](./contributor-docs/build-architecture.md)

package/dist/cjs/chunks/{Avatar-Czt-12Ih.js → Avatar-CUaQ3kN1.js}

@@ -6,7 +6,7 @@ styleInject_es.styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tju
 
 const Avatar = React.memo(props => {
     var _a;
-    const {email: email, name: name, image: image = "", borderSize: borderSize = 0, color: color, borderColor: borderColor, borderColorHover: borderColorHover, outerBorderSize: outerBorderSize, outerBorderColor: outerBorderColor, bgColor: bgColor, onClick: onClick, onKeyDown: onKeyDown, fontSize: fontSize, onToolTip: onToolTip = () => null, size: size = 34, frame: frame = 34, tabIndex: tabIndex = 0} = props, divAttributes = tslib_es6.__rest(props, [ "email", "name", "image", "borderSize", "color", "borderColor", "borderColorHover", "outerBorderSize", "outerBorderColor", "bgColor", "onClick", "onKeyDown", "fontSize", "onToolTip", "size", "frame", "tabIndex" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = React.useRef(null), [textSize, setTextSize] = React.useState("inherit"), initials = React.useMemo(() => {
+    const {email: email, name: name, image: image = "", textColor: textColor, borderWidth: borderWidth, borderSize: borderSize = 0, color: color, borderColor: borderColor, borderColorHover: borderColorHover, outerBorderSize: outerBorderSize, outerBorderColor: outerBorderColor, backgroundColor: backgroundColor, bgColor: bgColor, onClick: onClick, onKeyDown: onKeyDown, fontSize: fontSize, onToolTip: onToolTip = () => null, size: size = 34, frame: frame = 34, tabIndex: tabIndex = 0} = props, divAttributes = tslib_es6.__rest(props, [ "email", "name", "image", "textColor", "borderWidth", "borderSize", "color", "borderColor", "borderColorHover", "outerBorderSize", "outerBorderColor", "backgroundColor", "bgColor", "onClick", "onKeyDown", "fontSize", "onToolTip", "size", "frame", "tabIndex" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = React.useRef(null), [textSize, setTextSize] = React.useState("inherit"), resolvedTextColor = null != textColor ? textColor : color, resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, initials = React.useMemo(() => {
         if (!name && !email) return "";
         if (name) {
             let last;
@@ -49,16 +49,16 @@ const Avatar = React.memo(props => {
     }, [ onClick, onKeyDown ]), avatarVars = React.useMemo(() => ({
         "--avatar-size": misc.setStyle(size),
         "--avatar-frame": misc.setStyle(frame),
-        "--avatar-border": `${borderSize}px`,
-        "--avatar-color": null != color ? color : "var(--core-text-primary)",
-        "--avatar-bg-color": null != bgColor ? bgColor : "var(--core-surface-secondary)",
+        "--avatar-border": `${resolvedBorderWidth}px`,
+        "--avatar-color": null != resolvedTextColor ? resolvedTextColor : "var(--core-text-primary)",
+        "--avatar-bg-color": null != resolvedBackgroundColor ? resolvedBackgroundColor : "var(--core-surface-secondary)",
         "--avatar-border-color": null != borderColor ? borderColor : "var(--core-outline-primary)",
         "--avatar-border-color-hover": null != borderColorHover ? borderColorHover : "var(--core-outline-special)",
         "--avatar-bg-image": `${bgImage}`,
         "--avatar-font-size": misc.setStyle(textSize),
         "--avatar-outer-border-size": misc.setStyle(outerBorderSize),
         "--avatar-outer-border-color": null != outerBorderColor ? outerBorderColor : "var(--core-surface-primary)"
-    }), [ size, frame, borderSize, color, bgColor, borderColor, borderColorHover, bgImage, textSize, outerBorderSize, outerBorderColor ]), classNames = React.useMemo(() => `${css_wrapper}${divClass}`, [ divClass ]);
+    }), [ size, frame, resolvedBorderWidth, resolvedTextColor, resolvedBackgroundColor, borderColor, borderColorHover, bgImage, textSize, outerBorderSize, outerBorderColor ]), classNames = React.useMemo(() => `${css_wrapper}${divClass}`, [ divClass ]);
     return jsxRuntime.jsx("div", Object.assign({
         id: divId,
         className: classNames,

package/dist/cjs/chunks/{AvatarGroup-CGH2zY7a.js → AvatarGroup-B3M7o4Hh.js}

@@ -1,32 +1,35 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), Avatar = require("./Avatar-Czt-12Ih.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "AvatarGroup-module_wrapper__MtOyq flexBox-module_rowStart__4tcxS", css_avatar = "AvatarGroup-module_avatar__5NVpW";
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), Avatar = require("./Avatar-CUaQ3kN1.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "AvatarGroup-module_wrapper__MtOyq flexBox-module_rowStart__4tcxS", css_avatar = "AvatarGroup-module_avatar__5NVpW";
 
 styleInject_es.styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.AvatarGroup-module_wrapper__MtOyq {\n\tgap: var(--ag-gap);\n\tmargin: var(--ag-margin);\n}\n\n.AvatarGroup-module_avatar__5NVpW {\n\tdisplay: inline-block;\n\tmargin-left: var(--ag-overlap);\n\tborder-radius: 100%;\n\t&:first-child {\n\t\tmargin-left: 0;\n\t}\n}\n");
 
 const AvatarGroup = React.memo(props => {
-    const {avatars: avatars = [], size: size = 32, borderSize: borderSize = 3, overlap: overlap = 8, gap: gap = 0, borderColor: borderColor, borderColorHover: borderColorHover, outerBorderSize: outerBorderSize = 3, outerBorderColor: outerBorderColor = "var(--core-surface-primary)", margin: margin = 0, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "avatars", "size", "borderSize", "overlap", "gap", "borderColor", "borderColorHover", "outerBorderSize", "outerBorderColor", "margin", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", cssVars = React.useMemo(() => ({
+    const {avatars: avatars = [], size: size = 32, borderWidth: borderWidth, borderSize: borderSize = 3, overlap: overlap = 8, gap: gap = 0, borderColor: borderColor, borderColorHover: borderColorHover, outerBorderSize: outerBorderSize = 3, outerBorderColor: outerBorderColor = "var(--core-surface-primary)", margin: margin = 0, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "avatars", "size", "borderWidth", "borderSize", "overlap", "gap", "borderColor", "borderColorHover", "outerBorderSize", "outerBorderColor", "margin", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, cssVars = React.useMemo(() => ({
         "--ag-gap": `${null != gap ? gap : 0}px`,
         "--ag-margin": `${null != margin ? margin : 0}px`,
         "--ag-overlap": (overlap > 0 ? -overlap : 0) + "px"
-    }), [ overlap, gap, margin ]), renderedAvatars = React.useMemo(() => avatars ? avatars.map((avatar, index) => jsxRuntime.jsx("div", {
-        className: css_avatar,
-        children: jsxRuntime.jsx(Avatar.Avatar, {
-            name: `${avatar.first} ${avatar.last}`,
-            email: avatar.email,
-            image: avatar.image || avatar.avatar,
-            size: size,
-            frame: size,
-            borderSize: borderSize,
-            borderColor: borderColor,
-            borderColorHover: borderColorHover,
-            outerBorderSize: outerBorderSize,
-            outerBorderColor: outerBorderColor,
-            color: avatar.color,
-            bgColor: avatar.bgColor,
-            onToolTip: onToolTip
-        })
-    }, `avatar_${avatar.email}_${index}`)) : null, [ avatars, size, borderSize, borderColor, borderColorHover, outerBorderSize, outerBorderColor, onToolTip ]), classNames = React.useMemo(() => `${css_wrapper}${divClass}`, [ divClass ]);
+    }), [ overlap, gap, margin ]), renderedAvatars = React.useMemo(() => avatars ? avatars.map((avatar, index) => {
+        var _a, _b;
+        return jsxRuntime.jsx("div", {
+            className: css_avatar,
+            children: jsxRuntime.jsx(Avatar.Avatar, {
+                name: `${avatar.first} ${avatar.last}`,
+                email: avatar.email,
+                image: avatar.image || avatar.avatar,
+                size: size,
+                frame: size,
+                borderWidth: resolvedBorderWidth,
+                borderColor: borderColor,
+                borderColorHover: borderColorHover,
+                outerBorderSize: outerBorderSize,
+                outerBorderColor: outerBorderColor,
+                textColor: null !== (_a = avatar.textColor) && void 0 !== _a ? _a : avatar.color,
+                backgroundColor: null !== (_b = avatar.backgroundColor) && void 0 !== _b ? _b : avatar.bgColor,
+                onToolTip: onToolTip
+            })
+        }, `avatar_${avatar.email}_${index}`);
+    }) : null, [ avatars, size, resolvedBorderWidth, borderColor, borderColorHover, outerBorderSize, outerBorderColor, onToolTip ]), classNames = React.useMemo(() => `${css_wrapper}${divClass}`, [ divClass ]);
     return jsxRuntime.jsx("div", Object.assign({
         id: divId,
         className: classNames,

package/dist/cjs/chunks/{Button-mVVfNCqC.js → Button-DXvjvGtY.js}

@@ -1,19 +1,20 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), Badge = require("./Badge-CY_DG6cD.js"), Dot = require("./Dot-_HCJ3qxd.js"), Icon = require("./Icon-N0YJuKQf.js"), ProgressIndicator = require("./ProgressIndicator-CyFcr6Dk.js"), sharedTypes = require("./sharedTypes-gCECyn2N.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css = {
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), Badge = require("./Badge-CY_DG6cD.js"), Dot = require("./Dot-_HCJ3qxd.js"), Icon = require("./Icon-D1EB8S5r.js"), ProgressIndicator = require("./ProgressIndicator-BGqIwycX.js"), sharedTypes = require("./sharedTypes-gCECyn2N.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css = {
     button: "Button-module_button__2ZuB7 flexBox-module_row__z24tF",
     label: "Button-module_label__UJ3Zt",
     count: "Button-module_count__DFxVB flexBox-module_row__z24tF",
     icon: "Button-module_icon__-43u5 flexBox-module_row__z24tF",
+    xs: "Button-module_xs__cF6m0 type-module_body-xs-regular__ZAFft",
     m: "Button-module_m__DR-gs type-module_body-m-regular__LuQBA",
     l: "Button-module_l__0E0yI type-module_body-l-regular__lOYbg",
     s: "Button-module_s__dSKOL type-module_body-s-regular__vRHSP"
 };
 
-styleInject_es.styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.Button-module_button__2ZuB7 {\n\tposition: relative;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\tappearance: none;\n\t-webkit-appearance: none;\n\tbackground-image: none;\n\toutline: none;\n}\n\n.Button-module_label__UJ3Zt {\n\tuser-select: none;\n\t-webkit-user-select: none;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n\twhite-space: nowrap;\n\tword-break: break-all;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 1;\n\t-webkit-box-orient: vertical;\n\t&:hover {\n\t\ttext-decoration: var(--ui-button-decoration);\n\t}\n}\n\n.Button-module_count__DFxVB {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\ttransform: translateX(10px) translateY(-2px);\n}\n\n.Button-module_icon__-43u5 {\n\tmin-width: var(--ui-button-icon-size);\n\tmin-height: var(--ui-button-icon-size);\n\theight: var(--ui-button-icon-size);\n\twidth: var(--ui-button-icon-size);\n}\n\n.Button-module_m__DR-gs {\n}\n\n.Button-module_l__0E0yI {\n}\n\n.Button-module_s__dSKOL {\n}\n");
+styleInject_es.styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.Button-module_button__2ZuB7 {\n\tposition: relative;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\tappearance: none;\n\t-webkit-appearance: none;\n\tbackground-image: none;\n\toutline: none;\n}\n\n.Button-module_label__UJ3Zt {\n\tuser-select: none;\n\t-webkit-user-select: none;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n\twhite-space: nowrap;\n\tword-break: break-all;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 1;\n\t-webkit-box-orient: vertical;\n\t&:hover {\n\t\ttext-decoration: var(--ui-button-decoration);\n\t}\n}\n\n.Button-module_count__DFxVB {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\ttransform: translateX(10px) translateY(-2px);\n}\n\n.Button-module_icon__-43u5 {\n\tmin-width: var(--ui-button-icon-size);\n\tmin-height: var(--ui-button-icon-size);\n\theight: var(--ui-button-icon-size);\n\twidth: var(--ui-button-icon-size);\n}\n\n.Button-module_xs__cF6m0 {\n}\n\n.Button-module_m__DR-gs {\n}\n\n.Button-module_l__0E0yI {\n}\n\n.Button-module_s__dSKOL {\n}\n");
 
 const ButtonComponent = React.forwardRef((props, buttonRef) => {
-    const {children: children, size: size = "medium", variant: variant = "outline", label: label, labelSize: labelSize = "m", iconRight: iconRight, iconLeft: iconLeft, count: count = (void 0 === props.count ? void 0 : Number(props.count)), showDot: showDot, tooltip: tooltip, round: round = !1, state: state = "normal", fill: fill = !1, iconSize: iconSize = (void 0 === props.iconSize ? 20 : Number(props.iconSize)), width: width = "min-content", underline: underline = !1, borderRadius: borderRadius, iconColor: iconColor, bgColor: bgColor, bgColorDisabled: bgColorDisabled, labelColor: labelColor, transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, paddingRight: paddingRight, paddingLeft: paddingLeft, progress: progress = !1, working: working = !1, duration: duration, trigger: trigger = !1, destructive: destructive = !1, onClick: onClick = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "children", "size", "variant", "label", "labelSize", "iconRight", "iconLeft", "count", "showDot", "tooltip", "round", "state", "fill", "iconSize", "width", "underline", "borderRadius", "iconColor", "bgColor", "bgColorDisabled", "labelColor", "transition", "variants", "initial", "animate", "exit", "paddingRight", "paddingLeft", "progress", "working", "duration", "trigger", "destructive", "onClick", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [btnState, setBtnState] = React.useState(state), [lockedWidth, setLockedWidth] = React.useState(void 0), [playing, setPlaying] = React.useState(working), ref = React.useRef(null), lockCurrentWidth = React.useCallback(() => {
+    const {children: children, size: size = "medium", variant: variant = "outline", label: label, labelSize: labelSize = "m", iconRight: iconRight, iconLeft: iconLeft, count: count = (void 0 === props.count ? void 0 : Number(props.count)), showDot: showDot, tooltip: tooltip, round: round = !1, state: state = "normal", fill: fill = !1, iconSize: iconSize = (void 0 === props.iconSize ? 20 : Number(props.iconSize)), width: width = "min-content", underline: underline = !1, borderRadius: borderRadius, iconColor: iconColor, backgroundColor: backgroundColor, backgroundColorDisabled: backgroundColorDisabled, bgColor: bgColor, bgColorDisabled: bgColorDisabled, labelColor: labelColor, transition: transition, variants: variants, initial: initial, animate: animate, exit: exit, paddingRight: paddingRight, paddingLeft: paddingLeft, progress: progress = !1, working: working = !1, duration: duration, trigger: trigger = !1, destructive: destructive = !1, onClick: onClick = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "children", "size", "variant", "label", "labelSize", "iconRight", "iconLeft", "count", "showDot", "tooltip", "round", "state", "fill", "iconSize", "width", "underline", "borderRadius", "iconColor", "backgroundColor", "backgroundColorDisabled", "bgColor", "bgColorDisabled", "labelColor", "transition", "variants", "initial", "animate", "exit", "paddingRight", "paddingLeft", "progress", "working", "duration", "trigger", "destructive", "onClick", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBackgroundColorDisabled = null != backgroundColorDisabled ? backgroundColorDisabled : bgColorDisabled, [btnState, setBtnState] = React.useState(state), [lockedWidth, setLockedWidth] = React.useState(void 0), [playing, setPlaying] = React.useState(working), ref = React.useRef(null), lockCurrentWidth = React.useCallback(() => {
         ref.current && setLockedWidth(ref.current.offsetWidth);
     }, []), handleClick = React.useCallback(e => {
         onToolTip(null), "disabled" !== btnState && (progress && duration ? (lockCurrentWidth(), 
@@ -40,9 +41,9 @@ const ButtonComponent = React.forwardRef((props, buttonRef) => {
             disabled: iconColor || destructiveColor(!0)
         },
         background: {
-            normal: bgColor || (destructive ? "var(--feedback-warning)" : "var(--core-button-primary)"),
-            hover: bgColor || (destructive ? "var(--feedback-warning)" : "var(--core-button-primary)"),
-            disabled: bgColorDisabled || "var(--core-button-disabled)"
+            normal: resolvedBackgroundColor || (destructive ? "var(--feedback-warning)" : "var(--core-button-primary)"),
+            hover: resolvedBackgroundColor || (destructive ? "var(--feedback-warning)" : "var(--core-button-primary)"),
+            disabled: resolvedBackgroundColorDisabled || "var(--core-button-disabled)"
         },
         borderColor: {
             normal: "transparent",
@@ -54,7 +55,7 @@ const ButtonComponent = React.forwardRef((props, buttonRef) => {
             hover: labelColor || (destructive ? "white" : "var(--core-text-light)"),
             disabled: "var(--core-text-disabled)"
         }
-    }), [ labelColor, destructive, destructiveColor, bgColor, bgColorDisabled, iconColor ]), outline = React.useMemo(() => ({
+    }), [ labelColor, destructive, destructiveColor, resolvedBackgroundColor, resolvedBackgroundColorDisabled, iconColor ]), outline = React.useMemo(() => ({
         border: "1px",
         iconColor: {
             normal: iconColor || destructiveColor(!0),
@@ -62,9 +63,9 @@ const ButtonComponent = React.forwardRef((props, buttonRef) => {
             disabled: iconColor || destructiveColor(!0)
         },
         background: {
-            normal: bgColor || "var(--core-surface-primary)",
-            hover: bgColor || "var(--core-surface-primary)",
-            disabled: bgColorDisabled || "var(--core-surface-primary)"
+            normal: resolvedBackgroundColor || "var(--core-surface-primary)",
+            hover: resolvedBackgroundColor || "var(--core-surface-primary)",
+            disabled: resolvedBackgroundColorDisabled || "var(--core-surface-primary)"
         },
         borderColor: {
             normal: destructive ? "var(--feedback-warning)" : "var(--core-outline-primary)",
@@ -76,7 +77,7 @@ const ButtonComponent = React.forwardRef((props, buttonRef) => {
             hover: labelColor || (destructive ? "var(--feedback-warning)" : "var(--core-text-special)"),
             disabled: "var(--core-text-disabled)"
         }
-    }), [ labelColor, destructive, destructiveColor, bgColor, bgColorDisabled, iconColor ]), text = React.useMemo(() => ({
+    }), [ labelColor, destructive, destructiveColor, resolvedBackgroundColor, resolvedBackgroundColorDisabled, iconColor ]), text = React.useMemo(() => ({
         border: "1px",
         iconColor: {
             normal: destructiveColor(!0),

package/dist/cjs/chunks/{ButtonBar-CFAb4bfQ.js → ButtonBar-BZ6sme27.js}

@@ -1,11 +1,11 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BTF7BCZW.js"), Icon = require("./Icon-N0YJuKQf.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "ButtonBar-module_wrapper__FYZ3s flexBox-module_rowStart__4tcxS", css_button = "ButtonBar-module_button__bMR3h flexBox-module_row__z24tF", css_selected = "ButtonBar-module_selected__wKvmi";
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BTF7BCZW.js"), Icon = require("./Icon-D1EB8S5r.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "ButtonBar-module_wrapper__FYZ3s flexBox-module_rowStart__4tcxS", css_button = "ButtonBar-module_button__bMR3h flexBox-module_row__z24tF", css_selected = "ButtonBar-module_selected__wKvmi";
 
 styleInject_es.styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.ButtonBar-module_wrapper__FYZ3s {\n\tborder-radius: var(--bb-border-radius);\n\tborder: var(--bb-border-size) solid var(--bb-border-color);\n\toverflow: hidden;\n}\n\n.ButtonBar-module_label__UcAS1 {\n\tcolor: var(--bb-label-color);\n\tpadding-right: 4px;\n}\n\n.ButtonBar-module_button__bMR3h {\n\theight: var(--bb-button-size);\n\twidth: var(--bb-button-size);\n\tmin-height: var(--bb-button-size);\n\tmin-width: var(--bb-button-size);\n\tcursor: pointer;\n\tbackground: var(--bb-bg-color);\n\tborder: 0;\n\tborder-right: var(--bb-border-size) solid var(--bb-border-color);\n\tuser-select: none;\n\t-webkit-user-select: none;\n\tappearance: none;\n\t-webkit-appearance: none;\n\t&:first-child {\n\t\tpadding-left: 4px;\n\t}\n\t&:last-child {\n\t\tborder-right: none;\n\t\tpadding-right: 4px;\n\t}\n\t&:hover {\n\t\tbackground: var(--bb-bg-color-hover);\n\t}\n}\n\n.ButtonBar-module_selected__wKvmi {\n\tbackground: var(--bb-bg-color-active);\n\tcolor: var(--core-link-primary);\n}\n");
 
 const ButtonBar = React.memo(function(props) {
-    const {buttons: buttons = [], selected: selected, toggle: toggle = !0, buttonSize: buttonSize = 44, iconSize: iconSize = 20, borderSize: borderSize = 1, borderRadius: borderRadius = 100, borderColor: borderColor = "var(--core-outline-primary)", bgColor: bgColor = "var(--core-surface-primary)", bgColorHover: bgColorHover = "var(--core-surface-secondary)", bgColorActive: bgColorActive = "var(--core-surface-secondary)", labelColor: labelColor = "var(--core-text-primary)", onClick: onClick = button => null, onChange: onChange = button => null, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "buttons", "selected", "toggle", "buttonSize", "iconSize", "borderSize", "borderRadius", "borderColor", "bgColor", "bgColorHover", "bgColorActive", "labelColor", "onClick", "onChange", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [hovered, setHovered] = React.useState(-1), [selectedIndex, setSelectedIndex] = React.useState(selected);
+    const {buttons: buttons = [], selected: selected, toggle: toggle = !0, buttonSize: buttonSize = 44, iconSize: iconSize = 20, borderWidth: borderWidth, borderSize: borderSize = 1, borderRadius: borderRadius = 100, borderColor: borderColor = "var(--core-outline-primary)", backgroundColor: backgroundColor, backgroundColorHover: backgroundColorHover, backgroundColorActive: backgroundColorActive, bgColor: bgColor = "var(--core-surface-primary)", bgColorHover: bgColorHover = "var(--core-surface-secondary)", bgColorActive: bgColorActive = "var(--core-surface-secondary)", labelColor: labelColor = "var(--core-text-primary)", onClick: onClick = button => null, onChange: onChange = button => null, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "buttons", "selected", "toggle", "buttonSize", "iconSize", "borderWidth", "borderSize", "borderRadius", "borderColor", "backgroundColor", "backgroundColorHover", "backgroundColorActive", "bgColor", "bgColorHover", "bgColorActive", "labelColor", "onClick", "onChange", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBackgroundColorHover = null != backgroundColorHover ? backgroundColorHover : bgColorHover, resolvedBackgroundColorActive = null != backgroundColorActive ? backgroundColorActive : bgColorActive, [hovered, setHovered] = React.useState(-1), [selectedIndex, setSelectedIndex] = React.useState(selected);
     React.useEffect(() => setSelectedIndex(selected), [ selected ]);
     const handleMouseEnter = React.useCallback(index => {
         setHovered(index);
@@ -14,15 +14,15 @@ const ButtonBar = React.memo(function(props) {
     }, []), handleClick = React.useCallback((button, index) => {
         onClick(button), toggle && (setSelectedIndex(index), onChange(button));
     }, [ onChange, onClick, toggle ]), buttonClass = React.useCallback(index => toggle && selectedIndex === index ? css_selected : "", [ selectedIndex, toggle ]), iconColor = React.useCallback(index => toggle && selectedIndex === index ? "var(--core-text-special)" : hovered === index ? "var(--core-text-primary)" : "var(--core-text-secondary)", [ selectedIndex, hovered, toggle ]), cssVars = React.useMemo(() => ({
-        "--bb-border-size": `${borderSize}px`,
+        "--bb-border-size": `${resolvedBorderWidth}px`,
         "--bb-border-radius": misc.setStyle(borderRadius),
         "--bb-border-color": borderColor,
-        "--bb-bg-color": bgColor,
-        "--bb-bg-color-hover": bgColorHover,
-        "--bb-bg-color-active": bgColorActive,
+        "--bb-bg-color": resolvedBackgroundColor,
+        "--bb-bg-color-hover": resolvedBackgroundColorHover,
+        "--bb-bg-color-active": resolvedBackgroundColorActive,
         "--bb-label-color": labelColor,
         "--bb-button-size": `${buttonSize}px`
-    }), [ borderSize, borderRadius, borderColor, bgColor, labelColor, bgColorHover, buttonSize, bgColorActive ]), barButtons = React.useMemo(() => null == buttons ? void 0 : buttons.map((button, index) => jsxRuntime.jsx(BarButton, {
+    }), [ resolvedBorderWidth, borderRadius, borderColor, resolvedBackgroundColor, labelColor, resolvedBackgroundColorHover, buttonSize, resolvedBackgroundColorActive ]), barButtons = React.useMemo(() => null == buttons ? void 0 : buttons.map((button, index) => jsxRuntime.jsx(BarButton, {
         classNames: `${css_button} ${buttonClass(index)}`,
         onMouseEnter: () => handleMouseEnter(index),
         onMouseLeave: handleMouseLeave,