@dxos/react-ui-pickers 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/dist/lib/browser/index.mjs

@@ -14,17 +14,25 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
   });
   const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
   const suppressNextTooltip = useRef(false);
-  return /* @__PURE__ */ React.createElement(Popover.Root, {
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
+  return /* @__PURE__ */ React.createElement(Tooltip.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React.createElement(Popover.Root, {
     open: emojiPickerOpen,
     onOpenChange: (nextOpen) => {
       setEmojiPickerOpen(nextOpen);
       suppressNextTooltip.current = true;
     }
   }, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
-    asChild: true,
-    content: t("select emoji label"),
-    side: "bottom",
-    suppressNextTooltip
+    asChild: true
   }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React.createElement(Toolbar.Button, {
@@ -38,7 +46,9 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
   }, t("select emoji label")), /* @__PURE__ */ React.createElement(Icon, {
     icon: "ph--user-circle--regular",
     size: 5
-  })))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
+  })))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
+    side: "bottom"
+  }, t("select emoji label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
     side: "bottom",
     onKeyDownCapture: (event) => {
       if (event.key === "Escape") {
@@ -59,7 +69,7 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
     maxFrequentRows: 0,
     noCountryFlags: true,
     theme: themeMode
-  }), /* @__PURE__ */ React.createElement(Popover.Arrow, null))));
+  }), /* @__PURE__ */ React.createElement(Popover.Arrow, null)))));
 };
 var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear, triggerVariant = "ghost", classNames }) => {
   const { t } = useTranslation("os");
@@ -108,10 +118,8 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
     autoFocus: true,
     maxFrequentRows: 0,
     noCountryFlags: true
-  }), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
-    asChild: true,
-    content: t("clear label"),
-    side: "right"
+  }), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+    asChild: true
   }, /* @__PURE__ */ React.createElement(Button, {
     variant: triggerVariant,
     onClick: onClickClear,
@@ -121,7 +129,9 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
   }, t("clear label")), /* @__PURE__ */ React.createElement(Icon, {
     icon: "ph--arrow-counter-clockwise--regular",
     size: 5
-  }))));
+  }))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
+    side: "right"
+  }, t("clear label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null)))));
 };
 
 // packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx
@@ -144,8 +154,19 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
   ]);
   const [open, setOpen] = useState2(false);
   const suppressNextTooltip = useRef2(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState2(false);
   const TriggerRoot = rootVariant === "toolbar-button" ? Toolbar2.Button : Button2;
-  return /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
+  return /* @__PURE__ */ React2.createElement(Tooltip2.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
     modal: false,
     open,
     onOpenChange: (nextOpen) => {
@@ -153,10 +174,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
       suppressNextTooltip.current = true;
     }
   }, /* @__PURE__ */ React2.createElement(Tooltip2.Trigger, {
-    asChild: true,
-    content: label,
-    side: "bottom",
-    suppressNextTooltip
+    asChild: true
   }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React2.createElement(TriggerRoot, {
@@ -176,7 +194,9 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
   }), /* @__PURE__ */ React2.createElement(Icon2, {
     icon: "ph--caret-down--bold",
     size: 3
-  })))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
+  })))), /* @__PURE__ */ React2.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip2.Content, {
+    side: "bottom"
+  }, label, /* @__PURE__ */ React2.createElement(Tooltip2.Arrow, null))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
     side: "bottom",
     classNames: "!is-min"
   }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
@@ -197,7 +217,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
   }, /* @__PURE__ */ React2.createElement(Icon2, {
     icon: "ph--x--regular",
     size: iconSize
-  }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))));
+  }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))));
 };
 
 // packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "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, { useRef, 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  const suppressNextTooltip = useRef<boolean>(false);\n\n  return (\n    <Popover.Root\n      open={emojiPickerOpen}\n      onOpenChange={(nextOpen) => {\n        setEmojiPickerOpen(nextOpen);\n        suppressNextTooltip.current = true;\n      }}\n    >\n      <Tooltip.Trigger\n        asChild\n        content={t('select emoji label')}\n        side='bottom'\n        suppressNextTooltip={suppressNextTooltip}\n      >\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              suppressNextTooltip.current = true;\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, useRef, 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 suppressNextTooltip = useRef<boolean>(false);\n\n  const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n  return (\n    <DropdownMenu.Root\n      modal={false}\n      open={open}\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        suppressNextTooltip.current = true;\n      }}\n    >\n      <Tooltip.Trigger asChild content={label} side='bottom' suppressNextTooltip={suppressNextTooltip}>\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": "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etF,IAAMC,aAAa,CAAC,EAAE,GAAGC,MAAAA,MAAyC;AACvE,QAAM,EAAEC,EAAC,IAAKC,gBAAe,IAAA;AAE7B,SACE,gBAAAC,OAAA,cAACC,cAAAA;IACCC,WAAWC;IACXC,OAAON,EAAE,mBAAA;IACTO,MAAK;IACLC,QAAQC;IACP,GAAGV;;AAGV;AAEA,IAAMM,cAAc,CAAC,EAAEK,OAAOC,WAAW,EAAC,MAAmD;AAC3F,SAAO,gBAAAT,OAAA,cAACU,OAAAA;IAAKL,MAAM,OAAOG,KAAAA;IAAkBG,MAAMF;;AACpD;AAMA,IAAMG,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,IAAML,aAAaK,MAAMC,IAAI,CAACR,SAASA,KAAKS,MAAM,mBAAA,IAAuB,CAAA,KAAMT,IAAAA;",
-  "names": ["emojiData", "EmojiMart", "useControllableState", "React", "useRef", "useState", "Button", "Popover", "Toolbar", "Tooltip", "useMediaQuery", "useThemeContext", "useTranslation", "Icon", "ButtonGroup", "EmojiPickerToolbarButton", "classNames", "emoji", "disabled", "defaultEmoji", "onChangeEmoji", "t", "useTranslation", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "suppressNextTooltip", "useRef", "Popover", "Root", "open", "onOpenChange", "nextOpen", "current", "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", "React", "useTranslation", "hues", "useControllableState", "React", "useEffect", "useRef", "useState", "Button", "DropdownMenu", "Icon", "Toolbar", "Tooltip", "PickerButton", "Component", "disabled", "classNames", "defaultValue", "_defaultValue", "value", "_value", "values", "label", "icon", "onChange", "onReset", "rootVariant", "iconSize", "setValue", "useControllableState", "prop", "defaultProp", "useEffect", "open", "setOpen", "useState", "suppressNextTooltip", "useRef", "TriggerRoot", "Toolbar", "Button", "React", "DropdownMenu", "Root", "modal", "onOpenChange", "nextOpen", "current", "Tooltip", "Trigger", "asChild", "content", "side", "span", "className", "Icon", "size", "Portal", "Content", "Viewport", "map", "CheckboxItem", "key", "checked", "onCheckedChange", "Arrow", "HuePicker", "props", "t", "useTranslation", "React", "PickerButton", "Component", "HuePreview", "label", "icon", "values", "hues", "value", "size", "div", "className", "svg", "viewBox", "rect", "x", "y", "width", "height", "fill", "strokeWidth", "React", "Icon", "useTranslation", "IconPicker", "props", "t", "useTranslation", "React", "PickerButton", "Component", "IconPreview", "label", "icon", "values", "iconValues", "value", "iconSize", "Icon", "size", "icons", "map", "match"]
+  "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, { useRef, 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  const suppressNextTooltip = useRef<boolean>(false);\n  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n  return (\n    <Tooltip.Root\n      open={triggerTooltipOpen}\n      onOpenChange={(nextOpen) => {\n        if (suppressNextTooltip.current) {\n          setTriggerTooltipOpen(false);\n          suppressNextTooltip.current = false;\n        } else {\n          setTriggerTooltipOpen(nextOpen);\n        }\n      }}\n    >\n      <Popover.Root\n        open={emojiPickerOpen}\n        onOpenChange={(nextOpen) => {\n          setEmojiPickerOpen(nextOpen);\n          suppressNextTooltip.current = true;\n        }}\n      >\n        <Tooltip.Trigger asChild>\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        <Tooltip.Portal>\n          <Tooltip.Content side='bottom'>\n            {t('select emoji label')}\n            <Tooltip.Arrow />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n        <Popover.Portal>\n          <Popover.Content\n            side='bottom'\n            onKeyDownCapture={(event) => {\n              if (event.key === 'Escape') {\n                event.stopPropagation();\n                setEmojiPickerOpen(false);\n                suppressNextTooltip.current = true;\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    </Tooltip.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.Root>\n        <Tooltip.Trigger asChild>\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        <Tooltip.Portal>\n          <Tooltip.Content side='right'>\n            {t('clear label')}\n            <Tooltip.Arrow />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\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, useRef, 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 suppressNextTooltip = useRef<boolean>(false);\n  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n  const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n  return (\n    <Tooltip.Root\n      open={triggerTooltipOpen}\n      onOpenChange={(nextOpen) => {\n        if (suppressNextTooltip.current) {\n          setTriggerTooltipOpen(false);\n          suppressNextTooltip.current = false;\n        } else {\n          setTriggerTooltipOpen(nextOpen);\n        }\n      }}\n    >\n      <DropdownMenu.Root\n        modal={false}\n        open={open}\n        onOpenChange={(nextOpen) => {\n          setOpen(nextOpen);\n          suppressNextTooltip.current = true;\n        }}\n      >\n        <Tooltip.Trigger asChild>\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        <Tooltip.Portal>\n          <Tooltip.Content side='bottom'>\n            {label}\n            <Tooltip.Arrow />\n          </Tooltip.Content>\n        </Tooltip.Portal>\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    </Tooltip.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": "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",
+  "names": ["emojiData", "EmojiMart", "useControllableState", "React", "useRef", "useState", "Button", "Popover", "Toolbar", "Tooltip", "useMediaQuery", "useThemeContext", "useTranslation", "Icon", "ButtonGroup", "EmojiPickerToolbarButton", "classNames", "emoji", "disabled", "defaultEmoji", "onChangeEmoji", "t", "useTranslation", "themeMode", "useThemeContext", "_emojiValue", "setEmojiValue", "useControllableState", "prop", "onChange", "defaultProp", "emojiPickerOpen", "setEmojiPickerOpen", "useState", "suppressNextTooltip", "useRef", "triggerTooltipOpen", "setTriggerTooltipOpen", "Tooltip", "Root", "open", "onOpenChange", "nextOpen", "current", "Popover", "Trigger", "asChild", "Toolbar", "Button", "span", "className", "Icon", "icon", "size", "Portal", "Content", "side", "Arrow", "onKeyDownCapture", "event", "key", "stopPropagation", "EmojiMart", "data", "emojiData", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "EmojiPickerBlock", "onClickClear", "triggerVariant", "isMd", "useMediaQuery", "ssr", "emojiValue", "ButtonGroup", "variant", "sideOffset", "onClick", "React", "useTranslation", "hues", "useControllableState", "React", "useEffect", "useRef", "useState", "Button", "DropdownMenu", "Icon", "Toolbar", "Tooltip", "PickerButton", "Component", "disabled", "classNames", "defaultValue", "_defaultValue", "value", "_value", "values", "label", "icon", "onChange", "onReset", "rootVariant", "iconSize", "setValue", "useControllableState", "prop", "defaultProp", "useEffect", "open", "setOpen", "useState", "suppressNextTooltip", "useRef", "triggerTooltipOpen", "setTriggerTooltipOpen", "TriggerRoot", "Toolbar", "Button", "React", "Tooltip", "Root", "onOpenChange", "nextOpen", "current", "DropdownMenu", "modal", "Trigger", "asChild", "span", "className", "Icon", "size", "Portal", "Content", "side", "Arrow", "Viewport", "map", "CheckboxItem", "key", "checked", "onCheckedChange", "HuePicker", "props", "t", "useTranslation", "React", "PickerButton", "Component", "HuePreview", "label", "icon", "values", "hues", "value", "size", "div", "className", "svg", "viewBox", "rect", "x", "y", "width", "height", "fill", "strokeWidth", "React", "Icon", "useTranslation", "IconPicker", "props", "t", "useTranslation", "React", "PickerButton", "Component", "IconPreview", "label", "icon", "values", "iconValues", "value", "iconSize", "Icon", "size", "icons", "map", "match"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx":{"bytes":17252,"imports":[{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css","kind":"import-statement","original":"./emoji.css"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/EmojiPicker/index.ts":{"bytes":534,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx","kind":"import-statement","original":"./EmojiPicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/PickerButton/PickerButton.tsx":{"bytes":10790,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts":{"bytes":536,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/PickerButton.tsx","kind":"import-statement","original":"./PickerButton"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx":{"bytes":4241,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts","kind":"import-statement","original":"../PickerButton"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/HuePicker/index.ts":{"bytes":522,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx","kind":"import-statement","original":"./HuePicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/IconPicker/IconPicker.tsx":{"bytes":7605,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts","kind":"import-statement","original":"../PickerButton"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/IconPicker/index.ts":{"bytes":528,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/IconPicker/IconPicker.tsx","kind":"import-statement","original":"./IconPicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytes":809,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker/index.ts","kind":"import-statement","original":"./EmojiPicker"},{"path":"packages/ui/react-ui-pickers/src/components/HuePicker/index.ts","kind":"import-statement","original":"./HuePicker"},{"path":"packages/ui/react-ui-pickers/src/components/IconPicker/index.ts","kind":"import-statement","original":"./IconPicker"},{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts","kind":"import-statement","original":"./PickerButton"}],"format":"esm"},"packages/ui/react-ui-pickers/src/index.ts":{"bytes":506,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-pickers/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":20776},"packages/ui/react-ui-pickers/dist/lib/browser/index.mjs":{"imports":[{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"exports":["EmojiPickerBlock","EmojiPickerToolbarButton","HuePicker","IconPicker","PickerButton"],"entryPoint":"packages/ui/react-ui-pickers/src/index.ts","cssBundle":"packages/ui/react-ui-pickers/dist/lib/browser/index.css","inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx":{"bytesInOutput":4473},"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/EmojiPicker/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx":{"bytesInOutput":917},"packages/ui/react-ui-pickers/src/components/PickerButton/PickerButton.tsx":{"bytesInOutput":2808},"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/HuePicker/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/IconPicker/IconPicker.tsx":{"bytesInOutput":2016},"packages/ui/react-ui-pickers/src/components/IconPicker/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/index.ts":{"bytesInOutput":0}},"bytes":10722},"packages/ui/react-ui-pickers/dist/lib/browser/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":1029},"packages/ui/react-ui-pickers/dist/lib/browser/index.css":{"imports":[],"inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytesInOutput":146}},"bytes":256}}}
+{"inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx":{"bytes":19562,"imports":[{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css","kind":"import-statement","original":"./emoji.css"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/EmojiPicker/index.ts":{"bytes":534,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx","kind":"import-statement","original":"./EmojiPicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/PickerButton/PickerButton.tsx":{"bytes":12553,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts":{"bytes":536,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/PickerButton.tsx","kind":"import-statement","original":"./PickerButton"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx":{"bytes":4241,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts","kind":"import-statement","original":"../PickerButton"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/HuePicker/index.ts":{"bytes":522,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx","kind":"import-statement","original":"./HuePicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/IconPicker/IconPicker.tsx":{"bytes":7605,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts","kind":"import-statement","original":"../PickerButton"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/IconPicker/index.ts":{"bytes":528,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/IconPicker/IconPicker.tsx","kind":"import-statement","original":"./IconPicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytes":809,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker/index.ts","kind":"import-statement","original":"./EmojiPicker"},{"path":"packages/ui/react-ui-pickers/src/components/HuePicker/index.ts","kind":"import-statement","original":"./HuePicker"},{"path":"packages/ui/react-ui-pickers/src/components/IconPicker/index.ts","kind":"import-statement","original":"./IconPicker"},{"path":"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts","kind":"import-statement","original":"./PickerButton"}],"format":"esm"},"packages/ui/react-ui-pickers/src/index.ts":{"bytes":506,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-pickers/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":22984},"packages/ui/react-ui-pickers/dist/lib/browser/index.mjs":{"imports":[{"path":"@emoji-mart/data","kind":"import-statement","external":true},{"path":"@emoji-mart/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"exports":["EmojiPickerBlock","EmojiPickerToolbarButton","HuePicker","IconPicker","PickerButton"],"entryPoint":"packages/ui/react-ui-pickers/src/index.ts","cssBundle":"packages/ui/react-ui-pickers/dist/lib/browser/index.css","inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx":{"bytesInOutput":5220},"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/EmojiPicker/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx":{"bytesInOutput":917},"packages/ui/react-ui-pickers/src/components/PickerButton/PickerButton.tsx":{"bytesInOutput":3343},"packages/ui/react-ui-pickers/src/components/PickerButton/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/HuePicker/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/IconPicker/IconPicker.tsx":{"bytesInOutput":2016},"packages/ui/react-ui-pickers/src/components/IconPicker/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/index.ts":{"bytesInOutput":0}},"bytes":12004},"packages/ui/react-ui-pickers/dist/lib/browser/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":1029},"packages/ui/react-ui-pickers/dist/lib/browser/index.css":{"imports":[],"inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker/emoji.css":{"bytesInOutput":146}},"bytes":256}}}

package/dist/lib/node/index.cjs

@@ -58,17 +58,25 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
   });
   const [emojiPickerOpen, setEmojiPickerOpen] = (0, import_react2.useState)(false);
   const suppressNextTooltip = (0, import_react2.useRef)(false);
-  return /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Root, {
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, import_react2.useState)(false);
+  return /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Root, {
     open: emojiPickerOpen,
     onOpenChange: (nextOpen) => {
       setEmojiPickerOpen(nextOpen);
       suppressNextTooltip.current = true;
     }
   }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Trigger, {
-    asChild: true,
-    content: t("select emoji label"),
-    side: "bottom",
-    suppressNextTooltip
+    asChild: true
   }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Trigger, {
     asChild: true
   }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Toolbar.Button, {
@@ -82,7 +90,9 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
   }, 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, {
+  })))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Portal, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Content, {
+    side: "bottom"
+  }, t("select emoji label"), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Arrow, null))), /* @__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") {
@@ -103,7 +113,7 @@ var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onC
     maxFrequentRows: 0,
     noCountryFlags: true,
     theme: themeMode
-  }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Arrow, null))));
+  }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Arrow, null)))));
 };
 var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear, triggerVariant = "ghost", classNames }) => {
   const { t } = (0, import_react_ui.useTranslation)("os");
@@ -152,10 +162,8 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
     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.Popover.Arrow, null))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Root, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Trigger, {
+    asChild: true
   }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
     variant: triggerVariant,
     onClick: onClickClear,
@@ -165,7 +173,9 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
   }, t("clear label")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Icon, {
     icon: "ph--arrow-counter-clockwise--regular",
     size: 5
-  }))));
+  }))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Portal, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Content, {
+    side: "right"
+  }, t("clear label"), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Tooltip.Arrow, null)))));
 };
 var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultValue, value: _value, values, label, icon, onChange, onReset, rootVariant = "button", iconSize = 5 }) => {
   const [value, setValue] = (0, import_react_use_controllable_state2.useControllableState)({
@@ -178,8 +188,19 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
   ]);
   const [open, setOpen] = (0, import_react4.useState)(false);
   const suppressNextTooltip = (0, import_react4.useRef)(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = (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, {
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Root, {
     modal: false,
     open,
     onOpenChange: (nextOpen) => {
@@ -187,10 +208,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
       suppressNextTooltip.current = true;
     }
   }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Trigger, {
-    asChild: true,
-    content: label,
-    side: "bottom",
-    suppressNextTooltip
+    asChild: true
   }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Trigger, {
     asChild: true
   }, /* @__PURE__ */ import_react4.default.createElement(TriggerRoot, {
@@ -210,7 +228,9 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
   }), /* @__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, {
+  })))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Content, {
+    side: "bottom"
+  }, label, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.Tooltip.Arrow, null))), /* @__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, {
@@ -231,7 +251,7 @@ var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultVal
   }, /* @__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))));
+  }))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Arrow, null)))));
 };
 var HuePicker = (props) => {
   const { t } = (0, import_react_ui2.useTranslation)("os");

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

@@ -1,7 +1,7 @@
 {
   "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, { useRef, 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  const suppressNextTooltip = useRef<boolean>(false);\n\n  return (\n    <Popover.Root\n      open={emojiPickerOpen}\n      onOpenChange={(nextOpen) => {\n        setEmojiPickerOpen(nextOpen);\n        suppressNextTooltip.current = true;\n      }}\n    >\n      <Tooltip.Trigger\n        asChild\n        content={t('select emoji label')}\n        side='bottom'\n        suppressNextTooltip={suppressNextTooltip}\n      >\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              suppressNextTooltip.current = true;\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, useRef, 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 suppressNextTooltip = useRef<boolean>(false);\n\n  const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n  return (\n    <DropdownMenu.Root\n      modal={false}\n      open={open}\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        suppressNextTooltip.current = true;\n      }}\n    >\n      <Tooltip.Trigger asChild content={label} side='bottom' suppressNextTooltip={suppressNextTooltip}>\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": "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",
-  "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", "suppressNextTooltip", "useRef", "React", "Popover", "Root", "open", "onOpenChange", "nextOpen", "current", "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"]
+  "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, { useRef, 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  const suppressNextTooltip = useRef<boolean>(false);\n  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n  return (\n    <Tooltip.Root\n      open={triggerTooltipOpen}\n      onOpenChange={(nextOpen) => {\n        if (suppressNextTooltip.current) {\n          setTriggerTooltipOpen(false);\n          suppressNextTooltip.current = false;\n        } else {\n          setTriggerTooltipOpen(nextOpen);\n        }\n      }}\n    >\n      <Popover.Root\n        open={emojiPickerOpen}\n        onOpenChange={(nextOpen) => {\n          setEmojiPickerOpen(nextOpen);\n          suppressNextTooltip.current = true;\n        }}\n      >\n        <Tooltip.Trigger asChild>\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        <Tooltip.Portal>\n          <Tooltip.Content side='bottom'>\n            {t('select emoji label')}\n            <Tooltip.Arrow />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n        <Popover.Portal>\n          <Popover.Content\n            side='bottom'\n            onKeyDownCapture={(event) => {\n              if (event.key === 'Escape') {\n                event.stopPropagation();\n                setEmojiPickerOpen(false);\n                suppressNextTooltip.current = true;\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    </Tooltip.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.Root>\n        <Tooltip.Trigger asChild>\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        <Tooltip.Portal>\n          <Tooltip.Content side='right'>\n            {t('clear label')}\n            <Tooltip.Arrow />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\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, useRef, 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 suppressNextTooltip = useRef<boolean>(false);\n  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);\n\n  const TriggerRoot = rootVariant === 'toolbar-button' ? Toolbar.Button : Button;\n\n  return (\n    <Tooltip.Root\n      open={triggerTooltipOpen}\n      onOpenChange={(nextOpen) => {\n        if (suppressNextTooltip.current) {\n          setTriggerTooltipOpen(false);\n          suppressNextTooltip.current = false;\n        } else {\n          setTriggerTooltipOpen(nextOpen);\n        }\n      }}\n    >\n      <DropdownMenu.Root\n        modal={false}\n        open={open}\n        onOpenChange={(nextOpen) => {\n          setOpen(nextOpen);\n          suppressNextTooltip.current = true;\n        }}\n      >\n        <Tooltip.Trigger asChild>\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        <Tooltip.Portal>\n          <Tooltip.Content side='bottom'>\n            {label}\n            <Tooltip.Arrow />\n          </Tooltip.Content>\n        </Tooltip.Portal>\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    </Tooltip.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,gBAAwC;AAExC,sBAYO;ACjBP,IAAAA,gBAAkB;AAElB,IAAAC,mBAAuE;AACvE,4BAAqB;ACHrB,IAAAC,uCAAqC;AACrC,IAAAF,gBAA4D;AAE5D,IAAAC,mBAAmG;ACHnG,IAAAD,gBAAkB;AAElB,IAAAC,mBAA6F;AH+BtF,IAAME,2BAA2B,CAAC,EACvCC,YACAC,OACAC,UACAC,cACAC,cAAa,MAC0B;AACvC,QAAM,EAAEC,EAAC,QAAKC,gCAAe,IAAA;AAC7B,QAAM,EAAEC,UAAS,QAAKC,iCAAAA;AAEtB,QAAM,CAACC,aAAaC,aAAAA,QAAiBC,0DAA6B;IAChEC,MAAMX;IACNY,UAAUT;IACVU,aAAaX;EACf,CAAA;AAEA,QAAM,CAACY,iBAAiBC,kBAAAA,QAAsBC,wBAAkB,KAAA;AAChE,QAAMC,0BAAsBC,sBAAgB,KAAA;AAC5C,QAAM,CAACC,oBAAoBC,qBAAAA,QAAyBJ,wBAAS,KAAA;AAE7D,SACE,8BAAAK,QAAA,cAACC,wBAAQC,MAAI;IACXC,MAAML;IACNM,cAAc,CAACC,aAAAA;AACb,UAAIT,oBAAoBU,SAAS;AAC/BP,8BAAsB,KAAA;AACtBH,4BAAoBU,UAAU;MAChC,OAAO;AACLP,8BAAsBM,QAAAA;MACxB;IACF;KAEA,8BAAAL,QAAA,cAACO,wBAAQL,MAAI;IACXC,MAAMV;IACNW,cAAc,CAACC,aAAAA;AACbX,yBAAmBW,QAAAA;AACnBT,0BAAoBU,UAAU;IAChC;KAEA,8BAAAN,QAAA,cAACC,wBAAQO,SAAO;IAACC,SAAAA;KACf,8BAAAT,QAAA,cAACO,wBAAQC,SAAO;IAACC,SAAAA;KACf,8BAAAT,QAAA,cAACU,wBAAQC,QAAM;IAACjC,YAAY;MAAC;MAAwBA;;IAAaE;KAChE,8BAAAoB,QAAA,cAACY,QAAAA;IAAKC,WAAU;KAAW9B,EAAE,oBAAA,CAAA,GAC7B,8BAAAiB,QAAA,cAACc,sBAAAA;IAAKC,MAAK;IAA2BC,MAAM;SAIlD,8BAAAhB,QAAA,cAACC,wBAAQgB,QAAM,MACb,8BAAAjB,QAAA,cAACC,wBAAQiB,SAAO;IAACC,MAAK;KACnBpC,EAAE,oBAAA,GACH,8BAAAiB,QAAA,cAACC,wBAAQmB,OAAK,IAAA,CAAA,CAAA,GAGlB,8BAAApB,QAAA,cAACO,wBAAQU,QAAM,MACb,8BAAAjB,QAAA,cAACO,wBAAQW,SAAO;IACdC,MAAK;IACLE,kBAAkB,CAACC,UAAAA;AACjB,UAAIA,MAAMC,QAAQ,UAAU;AAC1BD,cAAME,gBAAe;AACrB9B,2BAAmB,KAAA;AACnBE,4BAAoBU,UAAU;MAChC;IACF;KAGA,8BAAAN,QAAA,cAACyB,aAAAA,SAAAA;IACCC,MAAMC,YAAAA;IACNC,eAAe,CAAC,EAAEC,OAAM,MAAuB;AAC7C,UAAIA,QAAQ;AACVzC,sBAAcyC,MAAAA;AACdnC,2BAAmB,KAAA;MACrB;IACF;IACAoC,WAAW;IACXC,iBAAiB;IACjBC,gBAAgB;IAChBC,OAAOhD;MAET,8BAAAe,QAAA,cAACO,wBAAQa,OAAK,IAAA,CAAA,CAAA,CAAA,CAAA;AAM1B;AAKO,IAAMc,mBAAmB,CAAC,EAC/BtD,UACAC,cACAF,OACAG,eACAqD,cACAC,iBAAiB,SACjB1D,WAAU,MACO;AACjB,QAAM,EAAEK,EAAC,QAAKC,gCAAe,IAAA;AAC7B,QAAM,CAACqD,IAAAA,QAAQC,+BAAc,MAAM;IAAEC,KAAK;EAAM,CAAA;AAEhD,QAAM,CAACC,YAAYpD,aAAAA,QAAiBC,0DAA6B;IAC/DC,MAAMX;IACNY,UAAUT;IACVU,aAAaX;EACf,CAAA;AAEA,QAAM,CAACY,iBAAiBC,kBAAAA,QAAsBC,wBAAkB,KAAA;AAEhE,SACE,8BAAAK,QAAA,cAACyC,6BAAAA;IAAY/D;KACX,8BAAAsB,QAAA,cAACO,wBAAQL,MAAI;IAACC,MAAMV;IAAiBW,cAAcV;KACjD,8BAAAM,QAAA,cAACO,wBAAQC,SAAO;IAACC,SAAAA;KACf,8BAAAT,QAAA,cAACW,wBAAAA;IAAO+B,SAASN;IAAgB1D,YAAW;IAA4BE;KACtE,8BAAAoB,QAAA,cAACY,QAAAA;IAAKC,WAAU;KAAW9B,EAAE,oBAAA,CAAA,GAC7B,8BAAAiB,QAAA,cAACY,QAAAA,MAAM4B,UAAAA,GACP,8BAAAxC,QAAA,cAACc,sBAAAA;IAAKC,MAAK;IAAuBC,MAAM;QAG5C,8BAAAhB,QAAA,cAACO,wBAAQW,SAAO;IACdC,MAAK;IACLwB,YAAYN,OAAO,IAAI;IACvBhB,kBAAkB,CAACC,UAAAA;AACjB,UAAIA,MAAMC,QAAQ,UAAU;AAC1BD,cAAME,gBAAe;AACrB9B,2BAAmB,KAAA;MACrB;IACF;KAEA,8BAAAM,QAAA,cAACyB,aAAAA,SAAAA;IACCC,MAAMC,YAAAA;IACNC,eAAe,CAAC,EAAEC,OAAM,MAAuB;AAC7C,UAAIA,QAAQ;AACVzC,sBAAcyC,MAAAA;AACdnC,2BAAmB,KAAA;MACrB;IACF;IACAoC,WAAW;IACXC,iBAAiB;IACjBC,gBAAgB;MAElB,8BAAAhC,QAAA,cAACO,wBAAQa,OAAK,IAAA,CAAA,CAAA,GAGlB,8BAAApB,QAAA,cAACC,wBAAQC,MAAI,MACX,8BAAAF,QAAA,cAACC,wBAAQO,SAAO;IAACC,SAAAA;KACf,8BAAAT,QAAA,cAACW,wBAAAA;IAAO+B,SAASN;IAAgBQ,SAAST;IAAcvD;KACtD,8BAAAoB,QAAA,cAACY,QAAAA;IAAKC,WAAU;KAAW9B,EAAE,aAAA,CAAA,GAC7B,8BAAAiB,QAAA,cAACc,sBAAAA;IAAKC,MAAK;IAAuCC,MAAM;QAG5D,8BAAAhB,QAAA,cAACC,wBAAQgB,QAAM,MACb,8BAAAjB,QAAA,cAACC,wBAAQiB,SAAO;IAACC,MAAK;KACnBpC,EAAE,aAAA,GACH,8BAAAiB,QAAA,cAACC,wBAAQmB,OAAK,IAAA,CAAA,CAAA,CAAA,CAAA;AAM1B;AE9KO,IAAMyB,eAAe,CAAC,EAC3BC,WACAlE,UACAF,YACAqE,cAAcC,eACdC,OAAOC,QACPC,QACAC,OACArC,MACAxB,UACA8D,SACAC,cAAc,UACdC,WAAW,EAAC,MACM;AAClB,QAAM,CAACN,OAAOO,QAAAA,QAAYnE,qCAAAA,sBAA6B;IACrDC,MAAM4D;IACN1D,aAAawD;IACbzD;EACF,CAAA;AAEAkE,+BAAU,MAAMD,SAASN,MAAAA,GAAS;IAACA;GAAO;AAE1C,QAAM,CAAC/C,MAAMuD,OAAAA,QAAW/D,cAAAA,UAAkB,KAAA;AAE1C,QAAMC,0BAAsBC,cAAAA,QAAgB,KAAA;AAC5C,QAAM,CAACC,oBAAoBC,qBAAAA,QAAyBJ,cAAAA,UAAS,KAAA;AAE7D,QAAMgE,cAAcL,gBAAgB,mBAAmB5C,iBAAAA,QAAQC,SAASA,iBAAAA;AAExE,SACEX,8BAAAA,QAAA,cAACC,iBAAAA,QAAQC,MAAI;IACXC,MAAML;IACNM,cAAc,CAACC,aAAAA;AACb,UAAIT,oBAAoBU,SAAS;AAC/BP,8BAAsB,KAAA;AACtBH,4BAAoBU,UAAU;MAChC,OAAO;AACLP,8BAAsBM,QAAAA;MACxB;IACF;KAEAL,8BAAAA,QAAA,cAAC4D,8BAAa1D,MAAI;IAChB2D,OAAO;IACP1D;IACAC,cAAc,CAACC,aAAAA;AACbqD,cAAQrD,QAAAA;AACRT,0BAAoBU,UAAU;IAChC;KAEAN,8BAAAA,QAAA,cAACC,iBAAAA,QAAQO,SAAO;IAACC,SAAAA;KACfT,8BAAAA,QAAA,cAAC4D,8BAAapD,SAAO;IAACC,SAAAA;KACpBT,8BAAAA,QAAA,cAAC2D,aAAAA;IAAYjF,YAAY;MAAC;MAAeA;;IAAaE;KACpDoB,8BAAAA,QAAA,cAACY,QAAAA;IAAKC,WAAU;KAAWuC,KAAAA,GACzBH,SAASjD,8BAAAA,QAAA,cAAC8C,WAAAA;IAAUG;IAAcM;QAA2BvD,8BAAAA,QAAA,cAACc,iBAAAA,MAAAA;IAAKC;IAAYC,MAAMuC;MACvFvD,8BAAAA,QAAA,cAACc,iBAAAA,MAAAA;IAAKC,MAAK;IAAuBC,MAAM;SAI9ChB,8BAAAA,QAAA,cAACC,iBAAAA,QAAQgB,QAAM,MACbjB,8BAAAA,QAAA,cAACC,iBAAAA,QAAQiB,SAAO;IAACC,MAAK;KACnBiC,OACDpD,8BAAAA,QAAA,cAACC,iBAAAA,QAAQmB,OAAK,IAAA,CAAA,CAAA,GAGlBpB,8BAAAA,QAAA,cAAC4D,8BAAa3C,QAAM,MAClBjB,8BAAAA,QAAA,cAAC4D,8BAAa1C,SAAO;IAACC,MAAK;IAASzC,YAAW;KAC7CsB,8BAAAA,QAAA,cAAC4D,8BAAaE,UAAQ;IAACpF,YAAW;KAC/ByE,OAAOY,IAAI,CAACb,YAAAA;AACX,WACElD,8BAAAA,QAAA,cAAC4D,8BAAaI,cAAY;MACxBzC,KAAK2B;MACLe,SAASf,YAAWD;MACpBiB,iBAAiB,MAAMV,SAASN,OAAAA;MAChCxE,YAAY;OAEZsB,8BAAAA,QAAA,cAAC8C,WAAAA;MAAUG,OAAOC;MAAQK;;EAGhC,CAAA,GACCF,WACCrD,8BAAAA,QAAA,cAAC4D,8BAAaI,cAAY;IACxBE,iBAAiB,MAAMb,QAAAA;IACvB3E,YAAY;KAEZsB,8BAAAA,QAAA,cAACc,iBAAAA,MAAAA;IAAKC,MAAK;IAAiBC,MAAMuC;QAIxCvD,8BAAAA,QAAA,cAAC4D,8BAAaxC,OAAK,IAAA,CAAA,CAAA,CAAA,CAAA;AAM/B;ADlGO,IAAM+C,YAAY,CAACC,UAAAA;AACxB,QAAM,EAAErF,EAAC,QAAKC,iBAAAA,gBAAe,IAAA;AAE7B,SACEgB,8BAAAA,QAAA,cAAC6C,cAAAA;IACCC,WAAWuB;IACXjB,OAAOrE,EAAE,kBAAA;IACTgC,MAAK;IACLoC,QAAQmB;IACP,GAAGF;;AAGV;AAEA,IAAMC,aAAa,CAAC,EAAEpB,MAAK,MAAqB;AAC9C,QAAMjC,OAAO;AACb,SACEhB,8BAAAA,QAAA,cAACuE,OAAAA;IAAI1D,WAAU;KACbb,8BAAAA,QAAA,cAACwE,OAAAA;IACCC,SAAS,OAAOzD,IAAAA,IAAQA,IAAAA;IACxBH,WAAU;KAEVb,8BAAAA,QAAA,cAAC0E,QAAAA;IAAKC,GAAG;IAAGC,GAAG;IAAGC,OAAO7D;IAAM8D,QAAQ9D;IAAM+D,MAAM,YAAY9B,KAAAA;IAAc+B,aAAa;;AAIlG;AExBO,IAAMC,aAAa,CAAC,EAAE,GAAGb,MAAAA,MAAyC;AACvE,QAAM,EAAErF,EAAC,QAAKC,iBAAAA,gBAAe,IAAA;AAE7B,SACEgB,8BAAAA,QAAA,cAAC6C,cAAAA;IACCC,WAAWoC;IACX9B,OAAOrE,EAAE,mBAAA;IACTgC,MAAK;IACLoC,QAAQgC;IACP,GAAGf;;AAGV;AAEA,IAAMc,cAAc,CAAC,EAAEjC,OAAOM,WAAW,EAAC,MAAmD;AAC3F,SAAOvD,8BAAAA,QAAA,cAACc,iBAAAA,MAAAA;IAAKC,MAAM,OAAOkC,KAAAA;IAAkBjC,MAAMuC;;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,CAAChD,SAASA,KAAKsE,MAAM,mBAAA,IAAuB,CAAA,KAAMtE,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", "suppressNextTooltip", "useRef", "triggerTooltipOpen", "setTriggerTooltipOpen", "React", "Tooltip", "Root", "open", "onOpenChange", "nextOpen", "current", "Popover", "Trigger", "asChild", "Toolbar", "Button", "span", "className", "Icon", "icon", "size", "Portal", "Content", "side", "Arrow", "onKeyDownCapture", "event", "key", "stopPropagation", "EmojiMart", "data", "emojiData", "onEmojiSelect", "native", "autoFocus", "maxFrequentRows", "noCountryFlags", "theme", "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"]
 }