@dxos/react-ui-pickers 0.8.3 → 0.8.4-main.1da679c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-pickers",
-  "version": "0.8.3",
+  "version": "0.8.4-main.1da679c",
   "description": "A collection of picker components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -9,6 +9,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -28,25 +29,25 @@
     "@preact-signals/safe-react": "^0.9.0",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/react-ui-types": "0.8.3",
-    "@dxos/util": "0.8.3",
-    "@dxos/log": "0.8.3"
+    "@dxos/log": "0.8.4-main.1da679c",
+    "@dxos/util": "0.8.4-main.1da679c",
+    "@dxos/react-ui-types": "0.8.4-main.1da679c"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "vite": "7.1.1",
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c",
+    "@dxos/storybook-utils": "0.8.4-main.1da679c"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/react-ui": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c"
   },
   "publishConfig": {
     "access": "public"

package/src/components/EmojiPicker/EmojiPicker.stories.tsx

@@ -4,13 +4,25 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import EmojiPicker from '@emoji-mart/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { Toolbar } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { EmojiPickerBlock, EmojiPickerToolbarButton, type EmojiPickerProps } from './EmojiPicker';
+import { EmojiPickerBlock, type EmojiPickerProps, EmojiPickerToolbarButton } from './EmojiPicker';
+
+const meta = {
+  title: 'ui/react-ui-pickers/EmojiPicker',
+  component: EmojiPicker,
+  decorators: [withTheme, withLayout()],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof EmojiPicker>;
+
+export default meta;
 
 const ToolbarButtonStory = (props: EmojiPickerProps) => {
   const [emoji, setEmoji] = useState<string>(props.defaultEmoji ?? '😀');
@@ -50,13 +62,3 @@ export const Block: StoryObj<EmojiPickerProps> = {
     defaultEmoji: '😀',
   },
 };
-
-const meta: Meta = {
-  title: 'ui/react-ui-pickers/EmojiPicker',
-  decorators: [withTheme, withLayout()],
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;

package/src/components/EmojiPicker/EmojiPicker.tsx

@@ -9,7 +9,9 @@ import React, { useState } from 'react';
 
 import {
   Button,
+  ButtonGroup,
   type ButtonProps,
+  Icon,
   Popover,
   type ThemedClassName,
   Toolbar,
@@ -17,8 +19,6 @@ import {
   useMediaQuery,
   useThemeContext,
   useTranslation,
-  Icon,
-  ButtonGroup,
 } from '@dxos/react-ui';
 
 import './emoji.css';

package/src/components/HuePicker/HuePicker.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { Toolbar } from '@dxos/react-ui';
@@ -12,7 +12,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { HuePicker, type HuePickerProps } from './HuePicker';
 
-const ToolbarStory = (props: HuePickerProps) => {
+const DefaultStory = (props: HuePickerProps) => {
   const [hue, setHue] = useState<string | undefined>(props.defaultValue);
 
   return (
@@ -28,18 +28,21 @@ const ToolbarStory = (props: HuePickerProps) => {
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'ui/react-ui-pickers/HuePicker',
+  component: HuePicker,
+  render: DefaultStory,
   decorators: [withTheme, withLayout()],
   parameters: {
     layout: 'centered',
   },
-};
+} satisfies Meta<typeof HuePicker>;
 
 export default meta;
 
-export const Default: StoryObj<HuePickerProps> = {
-  render: ToolbarStory,
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {
     defaultValue: 'red',
   },

package/src/components/IconPicker/IconPicker.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { Toolbar } from '@dxos/react-ui';
@@ -12,7 +12,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { IconPicker, type IconPickerProps } from './IconPicker';
 
-const ToolbarStory = (props: IconPickerProps) => {
+const DefaultStory = (props: IconPickerProps) => {
   const [icon, setIcon] = useState<string | undefined>(props.value ?? props.defaultValue);
   console.log(icon);
 
@@ -23,17 +23,20 @@ const ToolbarStory = (props: IconPickerProps) => {
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'ui/react-ui-pickers/IconPicker',
+  component: IconPicker,
+  render: DefaultStory,
   decorators: [withTheme, withLayout()],
   parameters: {
     layout: 'centered',
   },
-};
+} satisfies Meta<typeof IconPicker>;
 
 export default meta;
 
-export const Default: StoryObj<IconPickerProps> = {
-  render: ToolbarStory,
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {},
 };

package/dist/lib/node/index.cjs

@@ -1,367 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var node_exports = {};
-__export(node_exports, {
-  EmojiPickerBlock: () => EmojiPickerBlock,
-  EmojiPickerToolbarButton: () => EmojiPickerToolbarButton,
-  HuePicker: () => HuePicker,
-  IconPicker: () => IconPicker,
-  PickerButton: () => PickerButton
-});
-module.exports = __toCommonJS(node_exports);
-var import_tracking = require("@preact-signals/safe-react/tracking");
-var import_data = __toESM(require("@emoji-mart/data"));
-var import_react = __toESM(require("@emoji-mart/react"));
-var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
-var import_react2 = __toESM(require("react"));
-var import_react_ui = require("@dxos/react-ui");
-var import_tracking2 = require("@preact-signals/safe-react/tracking");
-var import_react3 = __toESM(require("react"));
-var import_react_ui2 = require("@dxos/react-ui");
-var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_tracking3 = require("@preact-signals/safe-react/tracking");
-var import_react_use_controllable_state2 = require("@radix-ui/react-use-controllable-state");
-var import_react4 = __toESM(require("react"));
-var import_react_ui3 = require("@dxos/react-ui");
-var import_tracking4 = require("@preact-signals/safe-react/tracking");
-var import_react5 = __toESM(require("react"));
-var import_react_ui4 = require("@dxos/react-ui");
-var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onChangeEmoji }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const { t } = (0, import_react_ui.useTranslation)("os");
-    const { themeMode } = (0, import_react_ui.useThemeContext)();
-    const [_emojiValue, setEmojiValue] = (0, import_react_use_controllable_state.useControllableState)({
-      prop: emoji,
-      onChange: onChangeEmoji,
-      defaultProp: defaultEmoji
-    });
-    const [emojiPickerOpen, setEmojiPickerOpen] = (0, import_react2.useState)(false);
-    return /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Root, {
-      open: emojiPickerOpen,
-      onOpenChange: (nextOpen) => {
-        setEmojiPickerOpen(nextOpen);
-      }
-    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Trigger, {
-      asChild: true,
-      content: t("select emoji label"),
-      side: "bottom"
-    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Toolbar.Button, {
-      classNames: [
-        "gap-2 text-2xl plb-1",
-        classNames
-      ],
-      disabled
-    }, /* @__PURE__ */ import_react2.default.createElement("span", {
-      className: "sr-only"
-    }, t("select emoji label")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Icon, {
-      icon: "ph--user-circle--regular",
-      size: 5
-    })))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Portal, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Content, {
-      side: "bottom",
-      onKeyDownCapture: (event) => {
-        if (event.key === "Escape") {
-          event.stopPropagation();
-          setEmojiPickerOpen(false);
-        }
-      }
-    }, /* @__PURE__ */ import_react2.default.createElement(import_react.default, {
-      data: import_data.default,
-      onEmojiSelect: ({ native }) => {
-        if (native) {
-          setEmojiValue(native);
-          setEmojiPickerOpen(false);
-        }
-      },
-      autoFocus: true,
-      maxFrequentRows: 0,
-      noCountryFlags: true,
-      theme: themeMode
-    }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
-};
-var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear, triggerVariant = "ghost", classNames }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const { t } = (0, import_react_ui.useTranslation)("os");
-    const [isMd] = (0, import_react_ui.useMediaQuery)("md", {
-      ssr: false
-    });
-    const [emojiValue, setEmojiValue] = (0, import_react_use_controllable_state.useControllableState)({
-      prop: emoji,
-      onChange: onChangeEmoji,
-      defaultProp: defaultEmoji
-    });
-    const [emojiPickerOpen, setEmojiPickerOpen] = (0, import_react2.useState)(false);
-    return /* @__PURE__ */ import_react2.default.createElement(import_react_ui.ButtonGroup, {
-      classNames
-    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Root, {
-      open: emojiPickerOpen,
-      onOpenChange: setEmojiPickerOpen
-    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
-      variant: triggerVariant,
-      classNames: "grow gap-2 text-2xl plb-1",
-      disabled
-    }, /* @__PURE__ */ import_react2.default.createElement("span", {
-      className: "sr-only"
-    }, t("select emoji label")), /* @__PURE__ */ import_react2.default.createElement("span", null, emojiValue), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Icon, {
-      icon: "ph--caret-down--bold",
-      size: 3
-    }))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Content, {
-      side: "right",
-      sideOffset: isMd ? 0 : -310,
-      onKeyDownCapture: (event) => {
-        if (event.key === "Escape") {
-          event.stopPropagation();
-          setEmojiPickerOpen(false);
-        }
-      }
-    }, /* @__PURE__ */ import_react2.default.createElement(import_react.default, {
-      data: import_data.default,
-      onEmojiSelect: ({ native }) => {
-        if (native) {
-          setEmojiValue(native);
-          setEmojiPickerOpen(false);
-        }
-      },
-      autoFocus: true,
-      maxFrequentRows: 0,
-      noCountryFlags: true
-    }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Arrow, null))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Trigger, {
-      asChild: true,
-      content: t("clear label"),
-      side: "right"
-    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
-      variant: triggerVariant,
-      onClick: onClickClear,
-      disabled
-    }, /* @__PURE__ */ import_react2.default.createElement("span", {
-      className: "sr-only"
-    }, t("clear label")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Icon, {
-      icon: "ph--arrow-counter-clockwise--regular",
-      size: 5
-    }))));
-  } finally {
-    _effect.f();
-  }
-};
-var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultValue, value: _value, values, label, icon, onChange, onReset, rootVariant = "button", iconSize = 5 }) => {
-  var _effect = (0, import_tracking3.useSignals)();
-  try {
-    const [value, setValue] = (0, import_react_use_controllable_state2.useControllableState)({
-      prop: _value,
-      defaultProp: _defaultValue,
-      onChange
-    });
-    (0, import_react4.useEffect)(() => setValue(_value), [
-      _value
-    ]);
-    const [open, setOpen] = (0, import_react4.useState)(false);
-    const TriggerRoot = rootVariant === "toolbar-button" ? import_react_ui3.Toolbar.Button : import_react_ui3.Button;
-    return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Root, {
-      modal: false,
-      open,
-      onOpenChange: setOpen
-    }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Trigger, {
-      asChild: true,
-      content: label,
-      side: "bottom"
-    }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ import_react4.default.createElement(TriggerRoot, {
-      classNames: [
-        "gap-2 plb-1",
-        classNames
-      ],
-      disabled
-    }, /* @__PURE__ */ import_react4.default.createElement("span", {
-      className: "sr-only"
-    }, label), value && /* @__PURE__ */ import_react4.default.createElement(Component, {
-      value,
-      iconSize
-    }) || /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
-      icon,
-      size: iconSize
-    }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
-      icon: "ph--caret-down--bold",
-      size: 3
-    })))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Content, {
-      side: "bottom",
-      classNames: "!is-min"
-    }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Viewport, {
-      classNames: "grid grid-cols-[repeat(6,min-content)]"
-    }, values.map((_value2) => {
-      return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.CheckboxItem, {
-        key: _value2,
-        checked: _value2 === value,
-        onCheckedChange: () => setValue(_value2),
-        classNames: "p-1 items-center justify-center aspect-square"
-      }, /* @__PURE__ */ import_react4.default.createElement(Component, {
-        value: _value2,
-        iconSize
-      }));
-    }), onReset && /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.CheckboxItem, {
-      onCheckedChange: () => onReset(),
-      classNames: "p-1 items-center justify-center aspect-square"
-    }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Icon, {
-      icon: "ph--x--regular",
-      size: iconSize
-    }))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
-};
-var HuePicker = (props) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    const { t } = (0, import_react_ui2.useTranslation)("os");
-    return /* @__PURE__ */ import_react3.default.createElement(PickerButton, {
-      Component: HuePreview,
-      label: t("select hue label"),
-      icon: "ph--palette--regular",
-      values: import_react_ui_theme.hues,
-      ...props
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var HuePreview = ({ value }) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    const size = 16;
-    return /* @__PURE__ */ import_react3.default.createElement("div", {
-      className: "flex p-[2px] justify-center items-center"
-    }, /* @__PURE__ */ import_react3.default.createElement("svg", {
-      viewBox: `0 0 ${size} ${size}`,
-      className: "is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]"
-    }, /* @__PURE__ */ import_react3.default.createElement("rect", {
-      x: 0,
-      y: 0,
-      width: size,
-      height: size,
-      fill: `var(--dx-${value}Fill)`,
-      strokeWidth: 4
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var IconPicker = ({ ...props }) => {
-  var _effect = (0, import_tracking4.useSignals)();
-  try {
-    const { t } = (0, import_react_ui4.useTranslation)("os");
-    return /* @__PURE__ */ import_react5.default.createElement(PickerButton, {
-      Component: IconPreview,
-      label: t("select icon label"),
-      icon: "ph--selection--regular",
-      values: iconValues,
-      ...props
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var IconPreview = ({ value, iconSize = 5 }) => {
-  var _effect = (0, import_tracking4.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react5.default.createElement(import_react_ui4.Icon, {
-      icon: `ph--${value}--regular`,
-      size: iconSize
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var icons = [
-  "ph--air-traffic-control--regular",
-  "ph--asterisk--regular",
-  "ph--atom--regular",
-  "ph--basketball--regular",
-  "ph--butterfly--regular",
-  "ph--cactus--regular",
-  "ph--cake--regular",
-  "ph--calendar-dots--regular",
-  "ph--campfire--regular",
-  "ph--command--regular",
-  "ph--confetti--regular",
-  "ph--detective--regular",
-  "ph--disco-ball--regular",
-  "ph--dna--regular",
-  "ph--factory--regular",
-  "ph--flag-banner-fold--regular",
-  "ph--flask--regular",
-  "ph--flower-lotus--regular",
-  "ph--flying-saucer--regular",
-  "ph--game-controller--regular",
-  "ph--gavel--regular",
-  "ph--gift--regular",
-  "ph--guitar--regular",
-  "ph--hamburger--regular",
-  "ph--handshake--regular",
-  "ph--heart--regular",
-  "ph--lightbulb--regular",
-  "ph--lock--regular",
-  "ph--martini--regular",
-  "ph--medal-military--regular",
-  "ph--moped-front--regular",
-  "ph--office-chair--regular",
-  "ph--paint-brush-household--regular",
-  "ph--peace--regular",
-  "ph--person-simple-hike--regular",
-  "ph--piggy-bank--regular",
-  "ph--potted-plant--regular",
-  "ph--radioactive--regular",
-  "ph--rocket-launch--regular",
-  "ph--shield-star--regular",
-  "ph--shopping-cart--regular",
-  "ph--stethoscope--regular",
-  "ph--student--regular",
-  "ph--sun--regular",
-  "ph--tote--regular",
-  "ph--tree--regular",
-  "ph--users-three--regular",
-  "ph--yin-yang--regular"
-];
-var iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  EmojiPickerBlock,
-  EmojiPickerToolbarButton,
-  HuePicker,
-  IconPicker,
-  PickerButton
-});
-//# sourceMappingURL=index.cjs.map

package/dist/lib/node/index.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/EmojiPicker/EmojiPicker.tsx", "../../../src/components/HuePicker/HuePicker.tsx", "../../../src/components/PickerButton/PickerButton.tsx", "../../../src/components/IconPicker/IconPicker.tsx"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport emojiData from '@emoji-mart/data';\nimport EmojiMart from '@emoji-mart/react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useState } from 'react';\n\nimport {\n  Button,\n  type ButtonProps,\n  Popover,\n  type ThemedClassName,\n  Toolbar,\n  Tooltip,\n  useMediaQuery,\n  useThemeContext,\n  useTranslation,\n  Icon,\n  ButtonGroup,\n} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = ThemedClassName<{\n  disabled?: boolean;\n  defaultEmoji?: string;\n  emoji?: string;\n  onChangeEmoji?: (nextEmoji: string) => void;\n  onClickClear?: ButtonProps['onClick'];\n  triggerVariant?: ButtonProps['variant'];\n}>;\n\n/**\n * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const EmojiPickerToolbarButton = ({\n  classNames,\n  emoji,\n  disabled,\n  defaultEmoji,\n  onChangeEmoji,\n}: Omit<EmojiPickerProps, 'onClickClear'>) => {\n  const { t } = useTranslation('os');\n  const { themeMode } = useThemeContext();\n\n  const [_emojiValue, setEmojiValue] = useControllableState<string>({\n    prop: emoji,\n    onChange: onChangeEmoji,\n    defaultProp: defaultEmoji,\n  });\n\n  const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n  return (\n    <Popover.Root\n      open={emojiPickerOpen}\n      onOpenChange={(nextOpen) => {\n        setEmojiPickerOpen(nextOpen);\n      }}\n    >\n      <Tooltip.Trigger asChild content={t('select emoji label')} side='bottom'>\n        <Popover.Trigger asChild>\n          <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>\n            <span className='sr-only'>{t('select emoji label')}</span>\n            <Icon icon='ph--user-circle--regular' size={5} />\n          </Toolbar.Button>\n        </Popover.Trigger>\n      </Tooltip.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          side='bottom'\n          onKeyDownCapture={(event) => {\n            if (event.key === 'Escape') {\n              event.stopPropagation();\n              setEmojiPickerOpen(false);\n            }\n          }}\n        >\n          {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}\n          <EmojiMart\n            data={emojiData}\n            onEmojiSelect={({ native }: { native?: string }) => {\n              if (native) {\n                setEmojiValue(native);\n                setEmojiPickerOpen(false);\n              }\n            }}\n            autoFocus={true}\n            maxFrequentRows={0}\n            noCountryFlags={true}\n            theme={themeMode}\n          />\n          <Popover.Arrow />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n\n/**\n * A button for picking an emoji alongside a button for unsetting it.\n */\nexport const EmojiPickerBlock = ({\n  disabled,\n  defaultEmoji,\n  emoji,\n  onChangeEmoji,\n  onClickClear,\n  triggerVariant = 'ghost',\n  classNames,\n}: EmojiPickerProps) => {\n  const { t } = useTranslation('os');\n  const [isMd] = useMediaQuery('md', { ssr: false });\n\n  const [emojiValue, setEmojiValue] = useControllableState<string>({\n    prop: emoji,\n    onChange: onChangeEmoji,\n    defaultProp: defaultEmoji,\n  });\n\n  const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);\n\n  return (\n    <ButtonGroup classNames={classNames}>\n      <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n        <Popover.Trigger asChild>\n          <Button variant={triggerVariant} classNames='grow gap-2 text-2xl plb-1' disabled={disabled}>\n            <span className='sr-only'>{t('select emoji label')}</span>\n            <span>{emojiValue}</span>\n            <Icon icon='ph--caret-down--bold' size={3} />\n          </Button>\n        </Popover.Trigger>\n        <Popover.Content\n          side='right'\n          sideOffset={isMd ? 0 : -310}\n          onKeyDownCapture={(event) => {\n            if (event.key === 'Escape') {\n              event.stopPropagation();\n              setEmojiPickerOpen(false);\n            }\n          }}\n        >\n          <EmojiMart\n            data={emojiData}\n            onEmojiSelect={({ native }: { native?: string }) => {\n              if (native) {\n                setEmojiValue(native);\n                setEmojiPickerOpen(false);\n              }\n            }}\n            autoFocus={true}\n            maxFrequentRows={0}\n            noCountryFlags={true}\n          />\n          <Popover.Arrow />\n        </Popover.Content>\n      </Popover.Root>\n      <Tooltip.Trigger asChild content={t('clear label')} side='right'>\n        <Button variant={triggerVariant} onClick={onClickClear} disabled={disabled}>\n          <span className='sr-only'>{t('clear label')}</span>\n          <Icon icon='ph--arrow-counter-clockwise--regular' size={5} />\n        </Button>\n      </Tooltip.Trigger>\n    </ButtonGroup>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hues } from '@dxos/react-ui-theme';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type HuePickerProps = {\n  disabled?: boolean;\n  defaultValue?: string;\n  value?: string;\n  onChange?: (nextHue: string) => void;\n  onReset?: ButtonProps['onClick'];\n} & Pick<PickerButtonProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n  const { t } = useTranslation('os');\n\n  return (\n    <PickerButton\n      Component={HuePreview}\n      label={t('select hue label')}\n      icon='ph--palette--regular'\n      values={hues}\n      {...props}\n    />\n  );\n};\n\nconst HuePreview = ({ value }: { value: string }) => {\n  const size = 16;\n  return (\n    <div className='flex p-[2px] justify-center items-center'>\n      <svg\n        viewBox={`0 0 ${size} ${size}`}\n        className='is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]'\n      >\n        <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${value}Fill)`} strokeWidth={4} />\n      </svg>\n    </div>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type FC, useEffect, useState } from 'react';\n\nimport { Button, DropdownMenu, Icon, type IconProps, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\n\nexport type PickerButtonProps = ThemedClassName<{\n  Component: FC<{ value: string; iconSize?: IconProps['size'] }>;\n  label: string;\n  icon: string;\n  values: string[];\n  disabled?: boolean;\n  defaultValue?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  onReset?: () => void;\n  rootVariant?: 'button' | 'toolbar-button';\n  iconSize?: IconProps['size'];\n}>;\n\nexport const PickerButton = ({\n  Component,\n  disabled,\n  classNames,\n  defaultValue: _defaultValue,\n  value: _value,\n  values,\n  label,\n  icon,\n  onChange,\n  onReset,\n  rootVariant = 'button',\n  iconSize = 5,\n}: PickerButtonProps) => {\n  const [value, setValue] = useControllableState<string>({\n    prop: _value,\n    defaultProp: _defaultValue,\n    onChange,\n  });\n  // TODO(burdon): useControllableState doesn't update the prop when the value is changed. Replace it.\n  useEffect(() => setValue(_value), [_value]);\n\n  const [open, setOpen] = useState<boolean>(false);\n\n  const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n  return (\n    <DropdownMenu.Root modal={false} open={open} onOpenChange={setOpen}>\n      <Tooltip.Trigger asChild content={label} side='bottom'>\n        <DropdownMenu.Trigger asChild>\n          <TriggerRoot classNames={['gap-2 plb-1', classNames]} disabled={disabled}>\n            <span className='sr-only'>{label}</span>\n            {(value && <Component value={value} iconSize={iconSize} />) || <Icon icon={icon} size={iconSize} />}\n            <Icon icon='ph--caret-down--bold' size={3} />\n          </TriggerRoot>\n        </DropdownMenu.Trigger>\n      </Tooltip.Trigger>\n      <DropdownMenu.Portal>\n        <DropdownMenu.Content side='bottom' classNames='!is-min'>\n          <DropdownMenu.Viewport classNames='grid grid-cols-[repeat(6,min-content)]'>\n            {values.map((_value) => {\n              return (\n                <DropdownMenu.CheckboxItem\n                  key={_value}\n                  checked={_value === value}\n                  onCheckedChange={() => setValue(_value)}\n                  classNames={'p-1 items-center justify-center aspect-square'}\n                >\n                  <Component value={_value} iconSize={iconSize} />\n                </DropdownMenu.CheckboxItem>\n              );\n            })}\n            {onReset && (\n              <DropdownMenu.CheckboxItem\n                onCheckedChange={() => onReset()}\n                classNames={'p-1 items-center justify-center aspect-square'}\n              >\n                <Icon icon='ph--x--regular' size={iconSize} />\n              </DropdownMenu.CheckboxItem>\n            )}\n          </DropdownMenu.Viewport>\n          <DropdownMenu.Arrow />\n        </DropdownMenu.Content>\n      </DropdownMenu.Portal>\n    </DropdownMenu.Root>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type ButtonProps, Icon, type IconProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';\n\nimport { PickerButton, type PickerButtonProps } from '../PickerButton';\n\nexport type IconPickerProps = {\n  disabled?: boolean;\n  defaultValue?: string;\n  value?: string;\n  onChange?: (nextHue: string) => void;\n  onReset?: ButtonProps['onClick'];\n} & Pick<\n  PickerButtonProps,\n  'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset' | 'rootVariant' | 'iconSize'\n>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n  const { t } = useTranslation('os');\n\n  return (\n    <PickerButton\n      Component={IconPreview}\n      label={t('select icon label')}\n      icon='ph--selection--regular'\n      values={iconValues}\n      {...props}\n    />\n  );\n};\n\nconst IconPreview = ({ value, iconSize = 5 }: { value: string; iconSize?: IconProps['size'] }) => {\n  return <Icon icon={`ph--${value}--regular`} size={iconSize} />;\n};\n\n/**\n * https://phosphoricons.com\n * NOTE: Select icons that we are unlikely to use for the UI.\n */\nconst icons = [\n  'ph--air-traffic-control--regular',\n  'ph--asterisk--regular',\n  'ph--atom--regular',\n  'ph--basketball--regular',\n  'ph--butterfly--regular',\n  'ph--cactus--regular',\n  'ph--cake--regular',\n  'ph--calendar-dots--regular',\n  'ph--campfire--regular',\n  'ph--command--regular',\n  'ph--confetti--regular',\n  'ph--detective--regular',\n  'ph--disco-ball--regular',\n  'ph--dna--regular',\n  'ph--factory--regular',\n  'ph--flag-banner-fold--regular',\n  'ph--flask--regular',\n  'ph--flower-lotus--regular',\n  'ph--flying-saucer--regular',\n  'ph--game-controller--regular',\n  'ph--gavel--regular',\n  'ph--gift--regular',\n  'ph--guitar--regular',\n  'ph--hamburger--regular',\n  'ph--handshake--regular',\n  'ph--heart--regular',\n  'ph--lightbulb--regular',\n  'ph--lock--regular',\n  'ph--martini--regular',\n  'ph--medal-military--regular',\n  'ph--moped-front--regular',\n  'ph--office-chair--regular',\n  'ph--paint-brush-household--regular',\n  'ph--peace--regular',\n  'ph--person-simple-hike--regular',\n  'ph--piggy-bank--regular',\n  'ph--potted-plant--regular',\n  'ph--radioactive--regular',\n  'ph--rocket-launch--regular',\n  'ph--shield-star--regular',\n  'ph--shopping-cart--regular',\n  'ph--stethoscope--regular',\n  'ph--student--regular',\n  'ph--sun--regular',\n  'ph--tote--regular',\n  'ph--tree--regular',\n  'ph--users-three--regular',\n  'ph--yin-yang--regular',\n];\n\nconst iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,kBAAsB;AACtB,mBAAsB;AACtB,0CAAqC;AACrC,IAAAA,gBAAgC;AAEhC,sBAYO;;ACjBP,IAAAA,gBAAkB;AAElB,IAAAC,mBAAuE;AACvE,4BAAqB;;ACHrB,IAAAC,uCAAqC;AACrC,IAAAF,gBAAoD;AAEpD,IAAAC,mBAAmG;;ACHnG,IAAAD,gBAAkB;AAElB,IAAAC,mBAA6F;AH+BtF,IAAME,2BAA2B,CAAC,EACvCC,YACAC,OACAC,UACAC,cACAC,cAAa,MAC0B;;;AACvC,UAAM,EAAEC,EAAC,QAAKC,gCAAe,IAAA;AAC7B,UAAM,EAAEC,UAAS,QAAKC,iCAAAA;AAEtB,UAAM,CAACC,aAAaC,aAAAA,QAAiBC,0DAA6B;MAChEC,MAAMX;MACNY,UAAUT;MACVU,aAAaX;IACf,CAAA;AAEA,UAAM,CAACY,iBAAiBC,kBAAAA,QAAsBC,wBAAkB,KAAA;AAEhE,WACE,8BAAAC,QAAA,cAACC,wBAAQC,MAAI;MACXC,MAAMN;MACNO,cAAc,CAACC,aAAAA;AACbP,2BAAmBO,QAAAA;MACrB;OAEA,8BAAAL,QAAA,cAACM,wBAAQC,SAAO;MAACC,SAAAA;MAAQC,SAAStB,EAAE,oBAAA;MAAuBuB,MAAK;OAC9D,8BAAAV,QAAA,cAACC,wBAAQM,SAAO;MAACC,SAAAA;OACf,8BAAAR,QAAA,cAACW,wBAAQC,QAAM;MAAC9B,YAAY;QAAC;QAAwBA;;MAAaE;OAChE,8BAAAgB,QAAA,cAACa,QAAAA;MAAKC,WAAU;OAAW3B,EAAE,oBAAA,CAAA,GAC7B,8BAAAa,QAAA,cAACe,sBAAAA;MAAKC,MAAK;MAA2BC,MAAM;WAIlD,8BAAAjB,QAAA,cAACC,wBAAQiB,QAAM,MACb,8BAAAlB,QAAA,cAACC,wBAAQkB,SAAO;MACdT,MAAK;MACLU,kBAAkB,CAACC,UAAAA;AACjB,YAAIA,MAAMC,QAAQ,UAAU;AAC1BD,gBAAME,gBAAe;AACrBzB,6BAAmB,KAAA;QACrB;MACF;OAGA,8BAAAE,QAAA,cAACwB,aAAAA,SAAAA;MACCC,MAAMC,YAAAA;MACNC,eAAe,CAAC,EAAEC,OAAM,MAAuB;AAC7C,YAAIA,QAAQ;AACVpC,wBAAcoC,MAAAA;AACd9B,6BAAmB,KAAA;QACrB;MACF;MACA+B,WAAW;MACXC,iBAAiB;MACjBC,gBAAgB;MAChBC,OAAO3C;QAET,8BAAAW,QAAA,cAACC,wBAAQgC,OAAK,IAAA,CAAA,CAAA,CAAA;;;;AAKxB;AAKO,IAAMC,mBAAmB,CAAC,EAC/BlD,UACAC,cACAF,OACAG,eACAiD,cACAC,iBAAiB,SACjBtD,WAAU,MACO;;;AACjB,UAAM,EAAEK,EAAC,QAAKC,gCAAe,IAAA;AAC7B,UAAM,CAACiD,IAAAA,QAAQC,+BAAc,MAAM;MAAEC,KAAK;IAAM,CAAA;AAEhD,UAAM,CAACC,YAAYhD,aAAAA,QAAiBC,0DAA6B;MAC/DC,MAAMX;MACNY,UAAUT;MACVU,aAAaX;IACf,CAAA;AAEA,UAAM,CAACY,iBAAiBC,kBAAAA,QAAsBC,wBAAkB,KAAA;AAEhE,WACE,8BAAAC,QAAA,cAACyC,6BAAAA;MAAY3D;OACX,8BAAAkB,QAAA,cAACC,wBAAQC,MAAI;MAACC,MAAMN;MAAiBO,cAAcN;OACjD,8BAAAE,QAAA,cAACC,wBAAQM,SAAO;MAACC,SAAAA;OACf,8BAAAR,QAAA,cAACY,wBAAAA;MAAO8B,SAASN;MAAgBtD,YAAW;MAA4BE;OACtE,8BAAAgB,QAAA,cAACa,QAAAA;MAAKC,WAAU;OAAW3B,EAAE,oBAAA,CAAA,GAC7B,8BAAAa,QAAA,cAACa,QAAAA,MAAM2B,UAAAA,GACP,8BAAAxC,QAAA,cAACe,sBAAAA;MAAKC,MAAK;MAAuBC,MAAM;UAG5C,8BAAAjB,QAAA,cAACC,wBAAQkB,SAAO;MACdT,MAAK;MACLiC,YAAYN,OAAO,IAAI;MACvBjB,kBAAkB,CAACC,UAAAA;AACjB,YAAIA,MAAMC,QAAQ,UAAU;AAC1BD,gBAAME,gBAAe;AACrBzB,6BAAmB,KAAA;QACrB;MACF;OAEA,8BAAAE,QAAA,cAACwB,aAAAA,SAAAA;MACCC,MAAMC,YAAAA;MACNC,eAAe,CAAC,EAAEC,OAAM,MAAuB;AAC7C,YAAIA,QAAQ;AACVpC,wBAAcoC,MAAAA;AACd9B,6BAAmB,KAAA;QACrB;MACF;MACA+B,WAAW;MACXC,iBAAiB;MACjBC,gBAAgB;QAElB,8BAAA/B,QAAA,cAACC,wBAAQgC,OAAK,IAAA,CAAA,CAAA,GAGlB,8BAAAjC,QAAA,cAACM,wBAAQC,SAAO;MAACC,SAAAA;MAAQC,SAAStB,EAAE,aAAA;MAAgBuB,MAAK;OACvD,8BAAAV,QAAA,cAACY,wBAAAA;MAAO8B,SAASN;MAAgBQ,SAAST;MAAcnD;OACtD,8BAAAgB,QAAA,cAACa,QAAAA;MAAKC,WAAU;OAAW3B,EAAE,aAAA,CAAA,GAC7B,8BAAAa,QAAA,cAACe,sBAAAA;MAAKC,MAAK;MAAuCC,MAAM;;;;;AAKlE;AEhJO,IAAM4B,eAAe,CAAC,EAC3BC,WACA9D,UACAF,YACAiE,cAAcC,eACdC,OAAOC,QACPC,QACAC,OACApC,MACArB,UACA0D,SACAC,cAAc,UACdC,WAAW,EAAC,MACM;;;AAClB,UAAM,CAACN,OAAOO,QAAAA,QAAY/D,qCAAAA,sBAA6B;MACrDC,MAAMwD;MACNtD,aAAaoD;MACbrD;IACF,CAAA;AAEA8D,iCAAU,MAAMD,SAASN,MAAAA,GAAS;MAACA;KAAO;AAE1C,UAAM,CAAC/C,MAAMuD,OAAAA,QAAW3D,cAAAA,UAAkB,KAAA;AAE1C,UAAM4D,cAAcL,gBAAgB,mBAAmB3C,iBAAAA,QAAQC,SAASA,iBAAAA;AAExE,WACEZ,8BAAAA,QAAA,cAAC4D,8BAAa1D,MAAI;MAAC2D,OAAO;MAAO1D;MAAYC,cAAcsD;OACzD1D,8BAAAA,QAAA,cAACM,iBAAAA,QAAQC,SAAO;MAACC,SAAAA;MAAQC,SAAS2C;MAAO1C,MAAK;OAC5CV,8BAAAA,QAAA,cAAC4D,8BAAarD,SAAO;MAACC,SAAAA;OACpBR,8BAAAA,QAAA,cAAC2D,aAAAA;MAAY7E,YAAY;QAAC;QAAeA;;MAAaE;OACpDgB,8BAAAA,QAAA,cAACa,QAAAA;MAAKC,WAAU;OAAWsC,KAAAA,GACzBH,SAASjD,8BAAAA,QAAA,cAAC8C,WAAAA;MAAUG;MAAcM;UAA2BvD,8BAAAA,QAAA,cAACe,iBAAAA,MAAAA;MAAKC;MAAYC,MAAMsC;QACvFvD,8BAAAA,QAAA,cAACe,iBAAAA,MAAAA;MAAKC,MAAK;MAAuBC,MAAM;WAI9CjB,8BAAAA,QAAA,cAAC4D,8BAAa1C,QAAM,MAClBlB,8BAAAA,QAAA,cAAC4D,8BAAazC,SAAO;MAACT,MAAK;MAAS5B,YAAW;OAC7CkB,8BAAAA,QAAA,cAAC4D,8BAAaE,UAAQ;MAAChF,YAAW;OAC/BqE,OAAOY,IAAI,CAACb,YAAAA;AACX,aACElD,8BAAAA,QAAA,cAAC4D,8BAAaI,cAAY;QACxB1C,KAAK4B;QACLe,SAASf,YAAWD;QACpBiB,iBAAiB,MAAMV,SAASN,OAAAA;QAChCpE,YAAY;SAEZkB,8BAAAA,QAAA,cAAC8C,WAAAA;QAAUG,OAAOC;QAAQK;;IAGhC,CAAA,GACCF,WACCrD,8BAAAA,QAAA,cAAC4D,8BAAaI,cAAY;MACxBE,iBAAiB,MAAMb,QAAAA;MACvBvE,YAAY;OAEZkB,8BAAAA,QAAA,cAACe,iBAAAA,MAAAA;MAAKC,MAAK;MAAiBC,MAAMsC;UAIxCvD,8BAAAA,QAAA,cAAC4D,8BAAa3B,OAAK,IAAA,CAAA,CAAA,CAAA;;;;AAK7B;ADtEO,IAAMkC,YAAY,CAACC,UAAAA;;;AACxB,UAAM,EAAEjF,EAAC,QAAKC,iBAAAA,gBAAe,IAAA;AAE7B,WACEY,8BAAAA,QAAA,cAAC6C,cAAAA;MACCC,WAAWuB;MACXjB,OAAOjE,EAAE,kBAAA;MACT6B,MAAK;MACLmC,QAAQmB;MACP,GAAGF;;;;;AAGV;AAEA,IAAMC,aAAa,CAAC,EAAEpB,MAAK,MAAqB;;;AAC9C,UAAMhC,OAAO;AACb,WACEjB,8BAAAA,QAAA,cAACuE,OAAAA;MAAIzD,WAAU;OACbd,8BAAAA,QAAA,cAACwE,OAAAA;MACCC,SAAS,OAAOxD,IAAAA,IAAQA,IAAAA;MACxBH,WAAU;OAEVd,8BAAAA,QAAA,cAAC0E,QAAAA;MAAKC,GAAG;MAAGC,GAAG;MAAGC,OAAO5D;MAAM6D,QAAQ7D;MAAM8D,MAAM,YAAY9B,KAAAA;MAAc+B,aAAa;;;;;AAIlG;AExBO,IAAMC,aAAa,CAAC,EAAE,GAAGb,MAAAA,MAAyC;;;AACvE,UAAM,EAAEjF,EAAC,QAAKC,iBAAAA,gBAAe,IAAA;AAE7B,WACEY,8BAAAA,QAAA,cAAC6C,cAAAA;MACCC,WAAWoC;MACX9B,OAAOjE,EAAE,mBAAA;MACT6B,MAAK;MACLmC,QAAQgC;MACP,GAAGf;;;;;AAGV;AAEA,IAAMc,cAAc,CAAC,EAAEjC,OAAOM,WAAW,EAAC,MAAmD;;;AAC3F,WAAOvD,8BAAAA,QAAA,cAACe,iBAAAA,MAAAA;MAAKC,MAAM,OAAOiC,KAAAA;MAAkBhC,MAAMsC;;;;;AACpD;AAMA,IAAM6B,QAAQ;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF,IAAMD,aAAaC,MAAMrB,IAAI,CAAC/C,SAASA,KAAKqE,MAAM,mBAAA,IAAuB,CAAA,KAAMrE,IAAAA;",
-  "names": ["import_react", "import_react_ui", "import_react_use_controllable_state", "EmojiPickerToolbarButton", "classNames", "emoji", "disabled", "defaultEmoji", "onChangeEmoji", "t", "useTranslation", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "React", "Popover", "Root", "open", "onOpenChange", "nextOpen", "Tooltip", "Trigger", "asChild", "content", "side", "Toolbar", "Button", "span", "className", "Icon", "icon", "size", "Portal", "Content", "onKeyDownCapture", "event", "key", "stopPropagation", "EmojiMart", "data", "emojiData", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "Arrow", "EmojiPickerBlock", "onClickClear", "triggerVariant", "isMd", "useMediaQuery", "ssr", "emojiValue", "ButtonGroup", "variant", "sideOffset", "onClick", "PickerButton", "Component", "defaultValue", "_defaultValue", "value", "_value", "values", "label", "onReset", "rootVariant", "iconSize", "setValue", "useEffect", "setOpen", "TriggerRoot", "DropdownMenu", "modal", "Viewport", "map", "CheckboxItem", "checked", "onCheckedChange", "HuePicker", "props", "HuePreview", "hues", "div", "svg", "viewBox", "rect", "x", "y", "width", "height", "fill", "strokeWidth", "IconPicker", "IconPreview", "iconValues", "icons", "match"]
-}

package/dist/lib/node/index.css

@@ -1,7 +0,0 @@
-/* packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css */
-[data-theme=dark] em-emoji-picker {
-  --background-rgb: #3B3B3F;
-  --rgb-background: #3B3B3F;
-  --font-family: "Inter Variable", ui-sans-serif;
-}
-/*# sourceMappingURL=index.css.map */

package/dist/lib/node/index.css.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/EmojiPicker/emoji.css"],
-  "sourcesContent": ["/**\n * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html\n */\n[data-theme=\"dark\"] em-emoji-picker {\n  /* TODO(burdon): Get from TW defs: modal-surface? */\n  --background-rgb: #3B3B3F;\n  --rgb-background: #3B3B3F;\n\n  --font-family: \"Inter Variable\", ui-sans-serif;\n\n  /*--font-size: 16px;*/\n  /*--color-border-over: rgba(0, 0, 0, 0.1);*/\n  /*--color-border: rgba(0, 0, 0, 0.05);*/\n  /*--category-icon-size: 24px;*/\n  /*--border-radius: 24px;*/\n  /*--font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;*/\n  /*--rgb-accent: 255, 105, 180;*/\n  /*--rgb-color: 102, 51, 153;*/\n  /*--rgb-input: 255, 235, 235;*/\n  /*--shadow: 5px 5px 15px -8px rebeccapurple;*/\n\n  /*height: 50vh;*/\n  /*min-height: 400px;*/\n  /*max-height: 800px;*/\n}\n"],
-  "mappings": ";AAGA,CAAC,iBAAmB;AAElB,oBAAkB;AAClB,oBAAkB;AAElB,iBAAe,gBAAgB,EAAE;AAgBnC;",
-  "names": []
-}