@apple-pie/slice 0.0.6 → 0.0.8

package/README.md

@@ -10,10 +10,10 @@ Slice is a TypeScript-first React UI kit with theme tokens, utility hooks, optio
 
 ## What is included
 
-- 30+ reusable UI components (inputs, buttons, navigation, overlays, feedback, layout, icons)
+- 30+ reusable UI components (inputs, buttons, navigation, overlays, feedback, layout, icons, upload 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 (`toast`, `tip`)
+- Optional Zustand-powered stores (`toast`, `tip`, `uploads`, `window`)
 - Rollup + TypeScript build pipeline for CJS, ESM, and declaration output
 - Component performance benchmarks powered by Vitest
 
@@ -77,6 +77,7 @@ Subpath imports are also published:
 - `@apple-pie/slice/providers/*`
 - `@apple-pie/slice/stores`
 - `@apple-pie/slice/stores/*`
+- `@apple-pie/slice/workers/*`
 - `@apple-pie/slice/theme`
 - `@apple-pie/slice/theme/colors`
 - `@apple-pie/slice/theme/corners`
@@ -87,11 +88,11 @@ Subpath imports are also published:
 ## Components
 
 - `Avatar`, `AvatarGroup`, `Badge`, `CheckBox`, `DivInput`, `Dot`, `DropDown`
-- `ErrorSummary`, `FlexDiv`, `Grouper`, `Icon`, `IconButton`
+- `ErrorSummary`, `FileIcon`, `FileList`, `FlexDiv`, `Grouper`, `Icon`, `IconButton`
 - `Logos`, `PromptInput`, `Overlay`, `Pager`, `ProgressIndicator`, `DoneCheck`
 - `RadioButton`, `RadioButtonList`, `Slider`, `Spacer`, `Switch`, `TabBar`
 - `TextField`, `TextArea`, `Tip`, `Toast`, `Button`, `ButtonBar`
-- `Card`, `Chip`, `Label`, `DocIcons`, `DraggablePanel`
+- `Card`, `Chip`, `Label`, `DocIcons`, `DraggablePanel`, `UploadArea`
 
 ## Hooks
 
@@ -108,6 +109,8 @@ Subpath imports are also published:
 
 - `toast` store: `useToast`, `useToastActions`, `toastActions`, `getToast`
 - `tip` store: `useTip`, `useTipActions`, `tipActions`, `getTip`
+- `window` store: `useWindowStore`, atomic viewport/runtime hooks, imperative viewport helpers
+- `uploads` store: `useUploadsStore`, `useUploads`, `useUploadsActions`, `createUploadsWorker`, `uploadsActions`
 
 Example:
 
@@ -115,6 +118,33 @@ Example:
 import { useToast, useToastActions } from '@apple-pie/slice/stores/toast';
 ```
 
+Uploads store example:
+
+```ts
+import {
+  createUploadsWorker,
+  uploadsActions,
+  useUploads,
+  useUploadsActions,
+} from '@apple-pie/slice/stores/uploads';
+
+const worker = createUploadsWorker();
+
+uploadsActions.initialize({ uploadURL: '/api/uploads' }, worker);
+```
+
+For consuming browser apps using a built worker asset, pass an explicit worker URL from your bundler:
+
+```ts
+import { createUploadsWorker, uploadsActions } from '@apple-pie/slice/stores/uploads';
+import uploadsWorkerUrl from '@apple-pie/slice/workers/uploads/uploads?url';
+
+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`

package/dist/cjs/chunks/Avatar-0EXaRG4e.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "Avatar-module_wrapper__U4ZJr flexBox-module_row__PWxbe type-module_body-m-regular__Qtp5G", css_user = "Avatar-module_user__GIczo flexBox-module_row__PWxbe type-module_body-m-regular__Qtp5G";
+
+styleInject_es.styleInject(".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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__zDf-z {\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__R5GpK {\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__SI-hC {\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__jGIb2 {\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__QFgN8 {\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__tdBSi {\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__-7Uyu {\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__8hGYF {\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__Cryjg {\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__PUi44 {\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__1B6fk {\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.Avatar-module_wrapper__U4ZJr {\n\tposition: relative;\n\tmin-height: var(--avatar-size);\n\tmin-width: var(--avatar-size);\n\theight: var(--avatar-size);\n\twidth: var(--avatar-size);\n\tborder: 0;\n\toutline: 0;\n}\n\n.Avatar-module_user__GIczo {\n\tfont-size: var(--avatar-font-size) !important;\n\tmin-height: var(--avatar-size);\n\tmin-width: var(--avatar-size);\n\theight: var(--avatar-size);\n\twidth: var(--avatar-size);\n\tline-height: 1em;\n\ttext-transform: uppercase;\n\tborder-radius: 100%;\n\tborder: var(--avatar-border) solid var(--avatar-border-color);\n\tbackground-color: var(--avatar-bg-color);\n\tcolor: var(--avatar-color);\n\tbackground-image: var(--avatar-bg-image);\n\tbackground-size: cover;\n\tcursor: pointer;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\ttransition: border-color 0.2s ease-in-out 0s;\n\t&:hover {\n\t\tborder-color: var(--core-link-primary);\n\t}\n}\n");
+
+const Avatar = React.memo(props => {
+    const {first: first = "", last: last = "", image: image = "", border: border = 0, color: color, borderColor: borderColor, bgColor: bgColor, firstOnly: firstOnly = !1, onClick: onClick, onKeyDown: onKeyDown, fontSize: fontSize, onToolTip: onToolTip = () => null, size: size = 34, frame: frame = 34, tabIndex: tabIndex = 0} = props, divAttributes = tslib_es6.__rest(props, [ "first", "last", "image", "border", "color", "borderColor", "bgColor", "firstOnly", "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}` : "", initials = React.useMemo(() => `${null == first ? void 0 : first.charAt(0)}${firstOnly ? "" : last.charAt(0)}`, [ first, last, firstOnly ]), bgImage = React.useMemo(() => firstOnly ? "" : image ? `url(${image})` : "", [ firstOnly, image ]), setFontSize = React.useMemo(() => {
+        if (void 0 === fontSize) return "inherit";
+        if ("auto" === fontSize) {
+            let fSize = Math.round(frame / 3);
+            return fSize = Math.min(fSize, 24), fSize = Math.max(fSize, 14), `${fSize}px`;
+        }
+        return `${fontSize}px`;
+    }, [ frame, fontSize ]), displayContent = React.useMemo(() => firstOnly || !image ? initials : null, [ firstOnly, image, initials ]), onMouseEnter = React.useCallback(event => {
+        onToolTip({
+            payload: {
+                label: first
+            },
+            event: event
+        });
+    }, [ first, onToolTip ]), onMouseLeave = React.useCallback(() => {
+        onToolTip(null);
+    }, [ onToolTip ]), avatarVars = React.useMemo(() => ({
+        "--avatar-size": `${size}px`,
+        "--avatar-frame": `${frame}px`,
+        "--avatar-border": `${border}px`,
+        "--avatar-color": null != color ? color : "var(--core-text-primary)",
+        "--avatar-bg-color": null != bgColor ? bgColor : "var(--core-surface-secondary)",
+        "--avatar-border-color": null != borderColor ? borderColor : "var(--core-surface-primary)",
+        "--avatar-bg-image": `${bgImage}`,
+        "--avatar-font-size": setFontSize
+    }), [ size, frame, border, color, bgColor, borderColor, bgImage, setFontSize ]), classNames = React.useMemo(() => `${css_wrapper}${divClass}`, [ divClass ]);
+    return jsxRuntime.jsx("div", Object.assign({
+        id: divId,
+        className: classNames,
+        style: Object.assign(Object.assign({}, divStyle), avatarVars),
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onClick: onClick,
+        onKeyDown: onKeyDown,
+        role: onClick ? "button" : "img",
+        tabIndex: onClick ? tabIndex : void 0,
+        "aria-label": `User Avatar - ${first}`
+    }, rest, {
+        children: jsxRuntime.jsx("div", {
+            "aria-hidden": !0,
+            className: css_user,
+            children: displayContent
+        })
+    }));
+});
+
+exports.Avatar = Avatar;

package/dist/cjs/chunks/AvatarGroup-BsRUAZl0.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), Avatar = require("./Avatar-0EXaRG4e.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "AvatarGroup-module_wrapper__mmcUR flexBox-module_rowStart__nJZnW", css_avatar = "AvatarGroup-module_avatar__YbQ5O";
+
+styleInject_es.styleInject(".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__mmcUR {\n\tgap: var(--ag-gap);\n\tmargin: var(--ag-margin);\n}\n\n.AvatarGroup-module_avatar__YbQ5O {\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, border: border = 3, overlap: overlap = 8, gap: gap = 0, borderColor: borderColor, margin: margin = 0, firstOnly: firstOnly = !1, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "avatars", "size", "border", "overlap", "gap", "borderColor", "margin", "firstOnly", "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(() => ({
+        "--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, {
+            first: avatar.first,
+            last: avatar.last,
+            image: avatar.image || avatar.avatar,
+            size: size,
+            frame: size,
+            border: border,
+            borderColor: borderColor,
+            color: avatar.color,
+            bgColor: avatar.bgColor,
+            firstOnly: firstOnly,
+            onToolTip: onToolTip
+        })
+    }, `avatar_${avatar.email}_${index}`)) : null, [ avatars, size, border, borderColor, firstOnly, onToolTip ]), classNames = React.useMemo(() => `${css_wrapper}${divClass}`, [ divClass ]);
+    return jsxRuntime.jsx("div", Object.assign({
+        id: divId,
+        className: classNames,
+        style: Object.assign(Object.assign({}, divStyle), cssVars)
+    }, rest, {
+        children: renderedAvatars
+    }));
+});
+
+exports.AvatarGroup = AvatarGroup;

package/dist/cjs/chunks/Badge-Bv6c2YVC.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_badge = "Badge-module_badge__8-cpJ flexBox-module_row__PWxbe type-module_body-xs-medium__FxEAv";
+
+styleInject_es.styleInject(".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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__zDf-z {\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__R5GpK {\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__SI-hC {\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__jGIb2 {\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__QFgN8 {\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__tdBSi {\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__-7Uyu {\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__8hGYF {\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__Cryjg {\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__PUi44 {\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__1B6fk {\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}.Badge-module_badge__8-cpJ {\n\tline-height: 1em;\n\tcolor: var(--badge-color);\n\tbackground: var(--badge-bg);\n\tpadding: 2px 8px;\n\tmin-width: 24px;\n\twidth: min-content;\n\tborder-radius: 8px;\n\twhite-space: nowrap;\n}\n");
+
+const Badge = React.memo(props => {
+    const {count: count, variant: variant = "dark", hideNull: hideNull = !0} = props, divAttributes = tslib_es6.__rest(props, [ "count", "variant", "hideNull" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", displayCount = React.useMemo(() => void 0 === count ? "0" : "string" == typeof count ? count : count > 99 ? "99+" : count.toString(), [ count ]), cssVars = React.useMemo(() => ({
+        "--badge-color": "light" === variant ? "var(--core-text-primary)" : "var(--core-text-light)",
+        "--badge-bg": "light" === variant ? "var(--core-badge-secondary)" : "var(--core-badge-primary)"
+    }), [ variant ]);
+    return void 0 === count || "" === count || hideNull && 0 === count ? null : jsxRuntime.jsx("div", Object.assign({
+        id: divId,
+        className: `${css_badge}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        role: "status",
+        "aria-live": "polite"
+    }, rest, {
+        children: displayCount
+    }));
+});
+
+exports.Badge = Badge;

package/dist/cjs/chunks/Button-DFAWHJmQ.js

@@ -0,0 +1,246 @@
+"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-Bv6c2YVC.js"), Dot = require("./Dot-BSSClfHQ.js"), _types = require("./_types-B5xXv4NA.js"), ProgressIndicator = require("./ProgressIndicator-BbrZ7Aoc.js"), sharedTypes = require("./sharedTypes-gCECyn2N.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css = {
+    button: "Button-module_button__-gHnS flexBox-module_row__PWxbe",
+    label: "Button-module_label__jzYdr",
+    count: "Button-module_count__8YTcm flexBox-module_row__PWxbe",
+    icon: "Button-module_icon__BNF2p flexBox-module_row__PWxbe",
+    m: "Button-module_m__q-q0F type-module_body-m-regular__Qtp5G",
+    l: "Button-module_l__r6jKt type-module_body-l-regular__Ar4d3",
+    s: "Button-module_s__GucGM type-module_body-s-regular__8-FO-"
+};
+
+styleInject_es.styleInject(".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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__zDf-z {\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__R5GpK {\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__SI-hC {\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__jGIb2 {\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__QFgN8 {\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__tdBSi {\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__-7Uyu {\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__8hGYF {\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__Cryjg {\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__PUi44 {\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__1B6fk {\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__-gHnS {\n\tposition: relative;\n\tuser-select: none;\n\tmin-width: var(--ui-button-min-width);\n\t-webkit-user-select: none;\n}\n\n.Button-module_label__jzYdr {\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__8YTcm {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\ttransform: translateX(10px) translateY(-2px);\n}\n\n.Button-module_icon__BNF2p {\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__q-q0F {\n}\n\n.Button-module_l__r6jKt {\n}\n\n.Button-module_s__GucGM {\n}\n");
+
+const ButtonComponent = React.forwardRef((props, buttonRef) => {
+    const {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 = "auto", 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, [ "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), [btnWidth, setBtnWidth] = React.useState(void 0), [playing, setPlaying] = React.useState(working), ref = React.useRef(null), handleClick = React.useCallback(e => {
+        onToolTip(null), "disabled" !== btnState && (progress && duration ? setPlaying(!0) : onClick(e));
+    }, [ onToolTip, btnState, progress, duration, onClick ]);
+    React.useEffect(() => setBtnState(state), [ state ]), React.useEffect(() => setPlaying(working), [ working ]), 
+    React.useEffect(() => {
+        variant && size && labelSize && ((null == ref ? void 0 : ref.current) ? setBtnWidth(ref.current.offsetWidth) : setBtnWidth(width));
+    }, [ width, variant, labelSize, size ]), React.useImperativeHandle(buttonRef, () => ({
+        triggerClick: () => handleClick(void 0)
+    })), React.useEffect(() => {
+        trigger && handleClick(void 0);
+    }, [ trigger, handleClick ]);
+    const destructiveColor = React.useCallback(icon => {
+        if (icon) {
+            if ("disabled" === btnState) return "var(--core-text-disabled)";
+            if ("solid" === variant) return "var(--core-text-light)";
+        }
+        return destructive ? "var(--feedback-warning)" : "var(--core-text-primary)";
+    }, [ destructive, variant, btnState ]), solid = React.useMemo(() => ({
+        border: "0px",
+        iconColor: {
+            normal: iconColor || destructiveColor(!0),
+            hover: iconColor || destructiveColor(!0),
+            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)"
+        },
+        borderColor: {
+            normal: "transparent",
+            hover: "transparent",
+            disabled: "transparent"
+        },
+        color: {
+            normal: labelColor || (destructive ? "white" : "var(--core-text-light)"),
+            hover: labelColor || (destructive ? "white" : "var(--core-text-light)"),
+            disabled: "var(--core-text-disabled)"
+        }
+    }), [ labelColor, destructive, destructiveColor, bgColor, bgColorDisabled, iconColor ]), outline = React.useMemo(() => ({
+        border: "1px",
+        iconColor: {
+            normal: iconColor || destructiveColor(!0),
+            hover: iconColor || destructiveColor(!0),
+            disabled: iconColor || destructiveColor(!0)
+        },
+        background: {
+            normal: bgColor || "var(--core-surface-primary)",
+            hover: bgColor || "var(--core-surface-primary)",
+            disabled: bgColorDisabled || "var(--core-surface-primary)"
+        },
+        borderColor: {
+            normal: destructive ? "var(--feedback-warning)" : "var(--core-outline-primary)",
+            hover: destructive ? "var(--feedback-warning)" : "var(--core-outline-primary)",
+            disabled: "var(--core-outline-primary)"
+        },
+        color: {
+            normal: labelColor || (destructive ? "var(--feedback-warning)" : "var(--core-text-primary)"),
+            hover: labelColor || (destructive ? "var(--feedback-warning)" : "var(--core-text-special)"),
+            disabled: "var(--core-text-disabled)"
+        }
+    }), [ labelColor, destructive, destructiveColor, bgColor, bgColorDisabled, iconColor ]), text = React.useMemo(() => ({
+        border: "1px",
+        iconColor: {
+            normal: destructiveColor(!0),
+            hover: destructiveColor(!0),
+            disabled: "var(--core-text-disabled)"
+        },
+        background: {
+            normal: "transparent",
+            hover: "transparent",
+            disabled: "transparent"
+        },
+        borderColor: {
+            normal: "transparent",
+            hover: "transparent",
+            disabled: "transparent"
+        },
+        color: {
+            normal: labelColor || destructiveColor(!1),
+            hover: labelColor || destructiveColor(!1),
+            disabled: "var(--core-text-disabled)"
+        }
+    }), [ destructiveColor, labelColor ]), colorStyles = React.useMemo(() => ({
+        solid: solid,
+        outline: outline,
+        text: text
+    }), [ solid, outline, text ]), setPadding = React.useCallback(side => round ? 0 : "left" === side && iconLeft || "right" === side && iconRight ? 20 : 24, [ round, iconLeft, iconRight ]), sizingStyles = React.useMemo(() => ({
+        large: {
+            height: 48,
+            gap: 8,
+            iconSize: iconSize,
+            paddingLeft: setPadding("left"),
+            paddingRight: setPadding("right"),
+            width: round ? "48px" : btnWidth || "auto",
+            borderRadius: null != borderRadius ? borderRadius : "500px"
+        },
+        medium: {
+            height: 36,
+            gap: 8,
+            iconSize: iconSize,
+            paddingLeft: setPadding("left"),
+            paddingRight: setPadding("right"),
+            width: round ? "36px" : btnWidth || "auto",
+            borderRadius: null != borderRadius ? borderRadius : "500px"
+        },
+        text: {
+            height: 20,
+            gap: 8,
+            iconSize: iconSize,
+            paddingLeft: 0,
+            paddingRight: 0,
+            btnWidth: btnWidth,
+            borderRadius: 0
+        }
+    }), [ iconSize, btnWidth, round, borderRadius, setPadding ]), handleMouseEnter = React.useCallback(e => {
+        if ("disabled" !== btnState && setBtnState("hover"), !(null == ref ? void 0 : ref.current) || !tooltip) return;
+        const tip = {
+            type: sharedTypes.ToolTipType.button,
+            payload: {
+                label: tooltip
+            },
+            event: e,
+            ref: ref
+        };
+        onToolTip(tip);
+    }, [ btnState, tooltip, onToolTip ]), handleMouseLeave = React.useCallback(() => {
+        "disabled" !== btnState && setBtnState("normal"), tooltip && onToolTip(null);
+    }, [ btnState, tooltip, onToolTip ]), handleDidStop = React.useCallback(() => {
+        setPlaying(!1), onClick(void 0);
+    }, [ onClick ]), shouldShowLabel = React.useMemo(() => !(playing && !iconLeft && !iconRight) && Boolean(label), [ playing, iconLeft, iconRight, label ]), buttonStyle = React.useMemo(() => ({
+        color: colorStyles[variant].color[btnState],
+        background: fill ? "var(--core-surface-primary)" : colorStyles[variant].background[state],
+        paddingRight: null != paddingRight ? paddingRight : sizingStyles[size].paddingRight,
+        paddingLeft: null != paddingLeft ? paddingLeft : sizingStyles[size].paddingLeft,
+        borderRadius: sizingStyles[size].borderRadius,
+        height: sizingStyles[size].height,
+        maxHeight: sizingStyles[size].height,
+        minHeight: sizingStyles[size].height,
+        flex: "fill" === width ? 1 : "unset",
+        gap: sizingStyles[size].gap,
+        borderWidth: colorStyles[variant].border,
+        borderStyle: "solid",
+        borderColor: colorStyles[variant].borderColor[btnState],
+        cursor: "disabled" === state ? "default" : "pointer",
+        transition: "all 0s ease-in-out 0s"
+    }), [ colorStyles, variant, btnState, fill, state, paddingRight, paddingLeft, sizingStyles, size, width ]), progressColor = React.useMemo(() => destructive ? "var(feedback-warning)" : colorStyles[variant].color[btnState], [ destructive, colorStyles, variant, btnState ]), setStyle = React.useCallback(value => void 0 === value ? "unset" : "number" == typeof value ? `${value}px` : value, []), iconDivSize = React.useMemo(() => round ? `${buttonStyle.minHeight}px` : iconSize ? setStyle(iconSize) : "unset", [ round, iconSize, buttonStyle, setStyle ]), cssVars = React.useMemo(() => ({
+        "--ui-button-decoration": underline ? "underline" : "unset",
+        "--ui-button-min-width": btnWidth ? setStyle(btnWidth) : "unset",
+        "--ui-button-icon-size": iconDivSize
+    }), [ underline, btnWidth, setStyle, iconDivSize ]);
+    return jsxRuntime.jsxs(react.motion.div, Object.assign({
+        id: divId,
+        className: `${css.button}${divClass}`,
+        ref: ref,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        style: Object.assign(Object.assign(Object.assign({}, divStyle), buttonStyle), cssVars),
+        transition: transition,
+        variants: variants,
+        initial: initial,
+        animate: animate,
+        exit: exit,
+        onClick: handleClick
+    }, rest, {
+        children: [ !playing && iconLeft && jsxRuntime.jsx("div", {
+            className: css.icon,
+            children: jsxRuntime.jsx(_types.Icon, {
+                name: iconLeft,
+                size: sizingStyles[size].iconSize,
+                strokeColor: colorStyles[variant].iconColor[btnState],
+                pointer: "disabled" !== btnState
+            })
+        }), playing && iconLeft && jsxRuntime.jsx("div", {
+            className: css.icon,
+            children: jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, {
+                show: playing,
+                didStop: handleDidStop,
+                duration: duration,
+                size: sizingStyles[size].iconSize,
+                color: progressColor,
+                inline: !0
+            })
+        }), playing && !iconLeft && !iconRight && jsxRuntime.jsx("div", {
+            className: css.icon,
+            children: jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, {
+                show: playing,
+                didStop: handleDidStop,
+                duration: duration,
+                size: sizingStyles[size].iconSize,
+                color: progressColor,
+                inline: !1
+            })
+        }), shouldShowLabel && jsxRuntime.jsx("div", {
+            className: `${css.label} ${css[labelSize]}`,
+            children: label
+        }), playing && iconRight && jsxRuntime.jsx("div", {
+            className: css.icon,
+            children: jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, {
+                show: playing,
+                didStop: handleDidStop,
+                duration: duration,
+                size: sizingStyles[size].iconSize,
+                color: progressColor,
+                inline: !0
+            })
+        }), !playing && iconRight && jsxRuntime.jsx("div", {
+            className: css.icon,
+            children: jsxRuntime.jsx(_types.Icon, {
+                name: iconRight,
+                size: sizingStyles[size].iconSize,
+                strokeColor: colorStyles[variant].iconColor[btnState],
+                pointer: "disabled" !== btnState
+            })
+        }), jsxRuntime.jsx(Dot.Dot, {
+            show: !playing && showDot
+        }), !playing && count && jsxRuntime.jsx("div", {
+            className: css.count,
+            children: jsxRuntime.jsx(Badge.Badge, {
+                variant: "light",
+                count: Number(count)
+            })
+        }) ]
+    }));
+});
+
+ButtonComponent.displayName = "Button";
+
+const Button = React.memo(ButtonComponent);
+
+exports.Button = Button;

package/dist/cjs/chunks/ButtonBar-DOgYDAda.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js"), require("../hooks/useWindow.js");
+
+var IconButton = require("./IconButton-B53y3z1_.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "ButtonBar-module_wrapper__056Gm flexBox-module_rowStart__nJZnW", css_label = "ButtonBar-module_label__ubTGP flexBox-module_rowStart__nJZnW type-module_body-s-regular__8-FO-", css_button = "ButtonBar-module_button__woeDh flexBox-module_rowStart__nJZnW", css_selected = "ButtonBar-module_selected__0KKNw", css_divider = "ButtonBar-module_divider__kfIkV", css_last = "ButtonBar-module_last__1yYdd";
+
+styleInject_es.styleInject(".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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__zDf-z {\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__R5GpK {\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__SI-hC {\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__jGIb2 {\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__QFgN8 {\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__tdBSi {\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__-7Uyu {\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__8hGYF {\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__Cryjg {\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__PUi44 {\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__1B6fk {\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.ButtonBar-module_wrapper__056Gm {\n}\n\n.ButtonBar-module_label__ubTGP {\n\tcolor: var(--core-text-disabled);\n\tpadding-right: 4px;\n}\n\n.ButtonBar-module_button__woeDh {\n\theight: 32px;\n\tgap: 0;\n\tcursor: pointer;\n\tbackground: var(--core-surface-primary);\n\tcolor: var(--core-text-disabled);\n\t&:last-child {\n\t\t&:hover {\n\t\t\tbackground: var(--core-surface-primary);\n\t\t}\n\t}\n\t&:first-child {\n\t\t&:hover {\n\t\t\tbackground: var(--core-surface-primary);\n\t\t}\n\t}\n\t&:hover {\n\t\tbackground: var(--core-surface-primary);\n\t\tcolor: var(--core-text-primary);\n\t}\n}\n\n.ButtonBar-module_selected__0KKNw {\n\tbackground: var(--core-surface-primary);\n\tcolor: var(--core-link-primary);\n}\n\n.ButtonBar-module_divider__kfIkV {\n\tdisplay: block;\n\tbackground: var(--core-outline-primary);\n\twidth: 1px;\n\theight: 16px;\n\tmargin: 0 4px;\n}\n\n.ButtonBar-module_last__1yYdd {\n\tdisplay: none;\n}\n"), 
+exports.ButtonBar = function(props) {
+    const {options: options = [], current: current = 0, label: label, onChange: onChange = () => null, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "options", "current", "label", "onChange", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", theme = hooks_useTheme.useTheme(), [hovered, setHovered] = React.useState(-1), [currentPage, setCurrentPage] = React.useState(current);
+    React.useEffect(() => setCurrentPage(current), [ current ]);
+    const handleMouseEnter = React.useCallback(index => {
+        setHovered(index);
+    }, []), handleMouseLeave = React.useCallback(() => {
+        setHovered(-1);
+    }, []), handleClick = React.useCallback((button, index) => {
+        setCurrentPage(index), onChange(button);
+    }, [ onChange ]), display = React.useCallback(index => index === options.length - 1 ? css_last : "", [ options.length ]), selected = React.useCallback(index => currentPage === index ? css_selected : "", [ currentPage ]), iconColor = React.useCallback(index => {
+        const isHovered = hovered === index;
+        return currentPage === index ? theme.current.colors["core-icon-primary"] : isHovered ? theme.current.colors["core-button-primary"] : theme.current.colors["core-text-disabled"];
+    }, [ currentPage, hovered, theme ]);
+    return jsxRuntime.jsxs("div", Object.assign({
+        id: divId,
+        className: `${css_wrapper}${divClass}`,
+        style: divStyle
+    }, rest, {
+        children: [ label && jsxRuntime.jsx("div", {
+            className: css_label,
+            children: label
+        }), null == options ? void 0 : options.map((button, index) => jsxRuntime.jsxs("div", {
+            className: css_button,
+            onMouseEnter: () => handleMouseEnter(index),
+            onMouseLeave: () => handleMouseLeave(),
+            children: [ jsxRuntime.jsx("div", {
+                className: selected(index),
+                onClick: () => handleClick(button, index),
+                onKeyDown: () => handleClick(button, index),
+                children: jsxRuntime.jsx(IconButton.IconButton, {
+                    icon: button.icon,
+                    color: iconColor(index),
+                    label: button.label,
+                    tooltip: button.tip,
+                    onToolTip: onToolTip,
+                    hover: !0,
+                    toggle: !1
+                })
+            }), jsxRuntime.jsx("div", {
+                className: `${css_divider} ${display(index)}`
+            }) ]
+        }, `button-bar-${button.icon}-${index}`)) ]
+    }));
+};

package/dist/cjs/chunks/Card-BPClSuHa.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), _types = require("./_types-B5xXv4NA.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_card = "Card-module_card__PHKoO flexBox-module_rowStart__nJZnW type-module_body-m-regular__Qtp5G", css_icon = "Card-module_icon__k0FIP flexBox-module_row__PWxbe", css_label = "Card-module_label__mGere";
+
+styleInject_es.styleInject(".flexBox-module_row__PWxbe {\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__27lKK {\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__nJZnW {\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__dHcOU {\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__MP2Xd {\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__Kg8cV {\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__zcmtk {\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__157yI {\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__u2nwI {\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__QWEzl {\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__FxEAv {\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__rf7AV {\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__8-FO- {\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__qyYq- {\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__7GQ5Z {\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__Qtp5G {\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__Ieh9K {\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__0lZ3I {\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__Ar4d3 {\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__6tV1n {\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__I8Q1v {\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__zDf-z {\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__R5GpK {\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__SI-hC {\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__jGIb2 {\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__QFgN8 {\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__tdBSi {\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__-7Uyu {\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__8hGYF {\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__Cryjg {\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__PUi44 {\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__1B6fk {\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.Card-module_card__PHKoO {\n\tpadding: 8px 14px 8px 8px !important;\n\tcolor: var(--core-text-primary);\n\twidth: var(--card-width);\n\tmax-width: min-content;\n\tflex: var(--card-flex);\n\tgap: 8px;\n\tborder-radius: 8px;\n\tborder: 1px solid var(--core-outline-primary);\n\tcursor: pointer;\n\ttransition: all 0.25s ease-in-out 0s;\n\t&:hover {\n\t\tcolor: var(--core-button-primary);\n\t\tborder: 1px solid var(--core-button-primary);\n\t}\n}\n\n.Card-module_icon__k0FIP {\n\tmin-width: 20px;\n\tmin-height: 20px;\n\tmax-width: 20px;\n\tmax-height: 20px;\n}\n\n.Card-module_label__mGere {\n\tflex: 1;\n\tword-break: break-all;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n\toverflow-wrap: anywhere;\n\tdisplay: -webkit-box;\n\twhite-space: nowrap;\n\t-webkit-line-clamp: 1;\n\t-webkit-box-orient: vertical;\n}\n");
+
+const Card = React.memo(function(props) {
+    const {id: id, icon: icon, label: label, command: command, width: width, onCommand: onCommand = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "id", "icon", "label", "command", "width", "onCommand" ]), {className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", setStyle = React.useCallback(value => void 0 === value || "fill" === value ? "unset" : "string" == typeof value ? value : `${value}px`, []), cssVars = React.useMemo(() => ({
+        "--card-width": setStyle(width),
+        "--card-flex": "fill" === width ? "1" : "unset"
+    }), [ setStyle, width ]);
+    return jsxRuntime.jsxs("div", Object.assign({
+        id: id,
+        className: `${css_card}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        onClick: () => onCommand({
+            id: id,
+            command: command
+        }),
+        onKeyDown: () => onCommand({
+            id: id,
+            command: command
+        })
+    }, rest, {
+        children: [ icon && jsxRuntime.jsx("div", {
+            className: css_icon,
+            children: jsxRuntime.jsx(_types.Icon, {
+                name: icon
+            })
+        }), label && jsxRuntime.jsx("div", {
+            className: css_label,
+            children: label
+        }) ]
+    }));
+});
+
+exports.Card = Card;