@dxos/react-ui-pickers 0.7.5-labs.c0e040f → 0.7.5-labs.d199c0f

package/dist/lib/node-esm/index.mjs

@@ -137,39 +137,25 @@ var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickC
 };
 
 // packages/ui/react-ui-pickers/src/components/HuePicker.tsx
+import React3 from "react";
+import { useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { hues } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-pickers/src/components/ToolbarPicker.tsx
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React2, { useRef as useRef2, useState as useState2 } from "react";
-import { Button as Button2, DropdownMenu, Icon as Icon2, Toolbar as Toolbar2, Tooltip as Tooltip2, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { hues, mx } from "@dxos/react-ui-theme";
-var HuePreview = ({ hue }) => {
-  const size = 20;
-  return /* @__PURE__ */ React2.createElement("svg", {
-    width: size,
-    height: size,
-    viewBox: `0 0 ${size} ${size}`
-  }, /* @__PURE__ */ React2.createElement("rect", {
-    x: 0,
-    y: 0,
-    width: size,
-    height: size,
-    fill: `var(--dx-${hue}Surface)`
-  }), /* @__PURE__ */ React2.createElement("text", {
-    x: "10",
-    y: "15",
-    textAnchor: "middle",
-    fontSize: "14",
-    fontWeight: "bold",
-    fill: `var(--dx-${hue}SurfaceText)`
-  }, "T"));
-};
-var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultHue }) => {
-  const { t } = useTranslation2("os");
-  const [hueValue, setHueValue] = useControllableState2({
-    prop: hue,
-    onChange: onChangeHue,
-    defaultProp: defaultHue
+import React2, { useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { DropdownMenu, Icon as Icon2, Toolbar as Toolbar2, Tooltip as Tooltip2 } from "@dxos/react-ui";
+import { mx } from "@dxos/react-ui-theme";
+var ToolbarPickerButton = ({ Component, disabled, classNames, defaultValue: _defaultValue, value: _value, values, label, icon, onChange, onReset }) => {
+  const [value, setValue] = useControllableState2({
+    prop: _value,
+    defaultProp: _defaultValue,
+    onChange
   });
-  const [huePickerOpen, setHuePickerOpen] = useState2(false);
+  useEffect(() => setValue(_value), [
+    _value
+  ]);
+  const [open, setOpen] = useState2(false);
   const suppressNextTooltip = useRef2(false);
   const [triggerTooltipOpen, setTriggerTooltipOpen] = useState2(false);
   return /* @__PURE__ */ React2.createElement(Tooltip2.Root, {
@@ -184,9 +170,9 @@ var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultH
     }
   }, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
     modal: false,
-    open: huePickerOpen,
+    open,
     onOpenChange: (nextOpen) => {
-      setHuePickerOpen(nextOpen);
+      setOpen(nextOpen);
       suppressNextTooltip.current = true;
     }
   }, /* @__PURE__ */ React2.createElement(Tooltip2.Trigger, {
@@ -198,86 +184,140 @@ var HuePickerToolbarButton = ({ disabled, hue, onChangeHue, classNames, defaultH
     disabled
   }, /* @__PURE__ */ React2.createElement("span", {
     className: "sr-only"
-  }, t("select hue label")), /* @__PURE__ */ React2.createElement(Icon2, {
-    icon: "ph--palette--regular",
+  }, label), value && /* @__PURE__ */ React2.createElement(Component, {
+    value
+  }) || /* @__PURE__ */ React2.createElement(Icon2, {
+    icon,
     size: 5
   })))), /* @__PURE__ */ React2.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip2.Content, {
     side: "bottom"
-  }, t("select hue label"), /* @__PURE__ */ React2.createElement(Tooltip2.Arrow, null))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
+  }, label, /* @__PURE__ */ React2.createElement(Tooltip2.Arrow, null))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
     side: "bottom",
     classNames: "!w-40"
   }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
     classNames: "grid grid-cols-6"
-  }, hues.map((hue2) => {
+  }, values.map((_value2) => {
     return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
-      key: hue2,
-      checked: hue2 === hueValue,
-      onCheckedChange: () => setHueValue(hue2),
-      classNames: "px-0 py-2 items-center justify-center"
-    }, /* @__PURE__ */ React2.createElement(HuePreview, {
-      hue: hue2
+      key: _value2,
+      checked: _value2 === value,
+      onCheckedChange: () => setValue(_value2),
+      classNames: "!p-0 items-center justify-center"
+    }, /* @__PURE__ */ React2.createElement(Component, {
+      value: _value2
     }));
-  })), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))));
+  }), onReset && /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
+    onCheckedChange: () => onReset(),
+    classNames: "!p-0 items-center justify-center"
+  }, /* @__PURE__ */ React2.createElement(Icon2, {
+    icon: "ph--x--regular",
+    size: 5
+  }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))));
 };
-var HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }) => {
+
+// packages/ui/react-ui-pickers/src/components/HuePicker.tsx
+var HuePicker = (props) => {
   const { t } = useTranslation2("os");
-  const [hueValue, setHueValue] = useControllableState2({
-    prop: hue,
-    onChange: onChangeHue,
-    defaultProp: defaultHue
+  return /* @__PURE__ */ React3.createElement(ToolbarPickerButton, {
+    Component: HuePreview,
+    label: t("select hue label"),
+    icon: "ph--palette--regular",
+    values: hues,
+    ...props
   });
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
-    modal: false
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Button2, {
-    variant: "ghost",
-    classNames: "gap-2 plb-1",
-    disabled
-  }, /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, t("select hue label")), /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: "pis-14 grow flex items-center justify-center gap-2"
-  }, hue ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(HuePreview, {
-    hue: hueValue
-  }), /* @__PURE__ */ React2.createElement("span", null, t(`${hueValue} label`))) : /* @__PURE__ */ React2.createElement("span", null, t("select a hue label"))), /* @__PURE__ */ React2.createElement(Icon2, {
-    icon: "ph--caret-down--regular",
-    size: 4
-  }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
-    side: "right"
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, hues.map((hue2) => {
-    return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
-      key: hue2,
-      checked: hue2 === hueValue,
-      onCheckedChange: () => setHueValue(hue2)
-    }, /* @__PURE__ */ React2.createElement(HuePreview, {
-      hue: hue2
-    }), /* @__PURE__ */ React2.createElement("span", {
-      className: "grow"
-    }, t(`${hue2} label`)), /* @__PURE__ */ React2.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React2.createElement(Icon2, {
-      icon: "ph--check--regular",
-      size: 4
-    })));
-  })), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React2.createElement(Tooltip2.Root, null, /* @__PURE__ */ React2.createElement(Tooltip2.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Button2, {
-    variant: "ghost",
-    onClick: onClickClear,
-    disabled
-  }, /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, t("clear label")), /* @__PURE__ */ React2.createElement(Icon2, {
-    icon: "ph--arrow-counter-clockwise--regular",
+};
+var HuePreview = ({ value }) => {
+  const size = 16;
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: "flex p-[2px] justify-center items-center"
+  }, /* @__PURE__ */ React3.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: `0 0 ${size} ${size}`
+  }, /* @__PURE__ */ React3.createElement("rect", {
+    x: 0,
+    y: 0,
+    width: size,
+    height: size,
+    fill: `var(--dx-${value}Fill)`,
+    strokeWidth: 4
+  })));
+};
+
+// packages/ui/react-ui-pickers/src/components/IconPicker.tsx
+import React4 from "react";
+import { Icon as Icon3, useTranslation as useTranslation3 } from "@dxos/react-ui";
+var IconPicker = ({ ...props }) => {
+  const { t } = useTranslation3("os");
+  return /* @__PURE__ */ React4.createElement(ToolbarPickerButton, {
+    Component: IconPreview,
+    label: t("select icon label"),
+    icon: "ph--selection--regular",
+    values: iconValues,
+    ...props
+  });
+};
+var IconPreview = ({ value }) => {
+  return /* @__PURE__ */ React4.createElement(Icon3, {
+    icon: `ph--${value}--regular`,
     size: 5
-  }))), /* @__PURE__ */ React2.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip2.Content, {
-    side: "right"
-  }, t("clear label"), /* @__PURE__ */ React2.createElement(Tooltip2.Arrow, null)))));
+  });
 };
+var icons = [
+  "ph--air-traffic-control--regular",
+  "ph--asterisk--regular",
+  "ph--atom--regular",
+  "ph--basketball--regular",
+  "ph--butterfly--regular",
+  "ph--cactus--regular",
+  "ph--cake--regular",
+  "ph--calendar-dots--regular",
+  "ph--campfire--regular",
+  "ph--command--regular",
+  "ph--confetti--regular",
+  "ph--detective--regular",
+  "ph--disco-ball--regular",
+  "ph--dna--regular",
+  "ph--factory--regular",
+  "ph--flag-banner-fold--regular",
+  "ph--flask--regular",
+  "ph--flower-lotus--regular",
+  "ph--flying-saucer--regular",
+  "ph--game-controller--regular",
+  "ph--gavel--regular",
+  "ph--gift--regular",
+  "ph--guitar--regular",
+  "ph--hamburger--regular",
+  "ph--handshake--regular",
+  "ph--heart--regular",
+  "ph--lightbulb--regular",
+  "ph--lock--regular",
+  "ph--martini--regular",
+  "ph--medal-military--regular",
+  "ph--moped-front--regular",
+  "ph--office-chair--regular",
+  "ph--paint-brush-household--regular",
+  "ph--peace--regular",
+  "ph--person-simple-hike--regular",
+  "ph--piggy-bank--regular",
+  "ph--potted-plant--regular",
+  "ph--radioactive--regular",
+  "ph--rocket-launch--regular",
+  "ph--shield-star--regular",
+  "ph--shopping-cart--regular",
+  "ph--stethoscope--regular",
+  "ph--student--regular",
+  "ph--sun--regular",
+  "ph--tote--regular",
+  "ph--tree--regular",
+  "ph--users-three--regular",
+  "ph--yin-yang--regular"
+];
+var iconValues = icons.map((icon) => icon.match(/ph--(.+)--regular/)?.[1] ?? icon);
 export {
   EmojiPickerBlock,
   EmojiPickerToolbarButton,
-  HuePickerBlock,
-  HuePickerToolbarButton
+  HuePicker,
+  IconPicker,
+  ToolbarPickerButton
 };
 //# sourceMappingURL=index.mjs.map

package/dist/lib/node-esm/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/EmojiPicker.tsx", "../../../src/components/HuePicker.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} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = {\n  disabled?: boolean;\n  defaultEmoji?: string;\n  emoji?: string;\n  onChangeEmoji?: (nextEmoji: string) => void;\n  onClickClear?: ButtonProps['onClick'];\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  disabled,\n  defaultEmoji,\n  emoji,\n  onChangeEmoji,\n  classNames,\n}: ThemedClassName<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 = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: 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    <>\n      <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n        <Popover.Trigger asChild>\n          <Button variant='ghost' classNames='gap-2 text-2xl plb-1' disabled={disabled}>\n            <span className='sr-only'>{t('select emoji label')}</span>\n            <span className='grow pis-14'>{emojiValue}</span>\n            <Icon icon='ph--caret-down--regular' size={4} />\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='ghost' 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    </>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useRef, useState } from 'react';\n\nimport {\n  Button,\n  type ButtonProps,\n  DropdownMenu,\n  Icon,\n  type ThemedClassName,\n  Toolbar,\n  Tooltip,\n  useTranslation,\n} from '@dxos/react-ui';\nimport { hues, mx } from '@dxos/react-ui-theme';\n\nconst HuePreview = ({ hue }: { hue: string }) => {\n  const size = 20;\n  return (\n    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n      <rect x={0} y={0} width={size} height={size} fill={`var(--dx-${hue}Surface)`} />\n      <text x='10' y='15' textAnchor='middle' fontSize='14' fontWeight='bold' fill={`var(--dx-${hue}SurfaceText)`}>\n        T\n      </text>\n    </svg>\n  );\n};\n\nexport type HuePickerProps = {\n  disabled?: boolean;\n  defaultHue?: string;\n  hue?: string;\n  onChangeHue?: (nextHue: string) => void;\n  onClickClear?: ButtonProps['onClick'];\n};\n\n/**\n * A toolbar button for picking hue. Use only in `role=toolbar` elements. Unable to unset the value.\n */\nexport const HuePickerToolbarButton = ({\n  disabled,\n  hue,\n  onChangeHue,\n  classNames,\n  defaultHue,\n}: ThemedClassName<Omit<HuePickerProps, 'onClickClear'>>) => {\n  const { t } = useTranslation('os');\n\n  const [hueValue, setHueValue] = useControllableState<string>({\n    prop: hue,\n    onChange: onChangeHue,\n    defaultProp: defaultHue,\n  });\n\n  const [huePickerOpen, setHuePickerOpen] = useState<boolean>(false);\n\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      <DropdownMenu.Root\n        modal={false}\n        open={huePickerOpen}\n        onOpenChange={(nextOpen) => {\n          setHuePickerOpen(nextOpen);\n          suppressNextTooltip.current = true;\n        }}\n      >\n        <Tooltip.Trigger asChild>\n          <DropdownMenu.Trigger asChild>\n            <Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>\n              <span className='sr-only'>{t('select hue label')}</span>\n              <Icon icon='ph--palette--regular' size={5} />\n            </Toolbar.Button>\n          </DropdownMenu.Trigger>\n        </Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content side='bottom'>\n            {t('select hue label')}\n            <Tooltip.Arrow />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content side='bottom' classNames='!w-40'>\n            <DropdownMenu.Viewport classNames='grid grid-cols-6'>\n              {hues.map((hue) => {\n                return (\n                  <DropdownMenu.CheckboxItem\n                    key={hue}\n                    checked={hue === hueValue}\n                    onCheckedChange={() => setHueValue(hue)}\n                    classNames={'px-0 py-2 items-center justify-center'}\n                  >\n                    <HuePreview hue={hue} />\n                  </DropdownMenu.CheckboxItem>\n                );\n              })}\n            </DropdownMenu.Viewport>\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n    </Tooltip.Root>\n  );\n};\n\n/**\n * A button for picking hue alongside a button for unsetting it.\n */\nexport const HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => {\n  const { t } = useTranslation('os');\n\n  const [hueValue, setHueValue] = useControllableState<string>({\n    prop: hue,\n    onChange: onChangeHue,\n    defaultProp: defaultHue,\n  });\n\n  return (\n    <>\n      <DropdownMenu.Root modal={false}>\n        <DropdownMenu.Trigger asChild>\n          <Button variant='ghost' classNames='gap-2 plb-1' disabled={disabled}>\n            <span className='sr-only'>{t('select hue label')}</span>\n            <div role='none' className='pis-14 grow flex items-center justify-center gap-2'>\n              {hue ? (\n                <>\n                  <HuePreview hue={hueValue!} />\n                  <span>{t(`${hueValue} label`)}</span>\n                </>\n              ) : (\n                <span>{t('select a hue label')}</span>\n              )}\n            </div>\n            <Icon icon='ph--caret-down--regular' size={4} />\n          </Button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content side='right'>\n            <DropdownMenu.Viewport>\n              {hues.map((hue) => {\n                return (\n                  <DropdownMenu.CheckboxItem\n                    key={hue}\n                    checked={hue === hueValue}\n                    onCheckedChange={() => setHueValue(hue)}\n                  >\n                    <HuePreview hue={hue} />\n                    <span className='grow'>{t(`${hue} label`)}</span>\n                    <DropdownMenu.ItemIndicator>\n                      <Icon icon='ph--check--regular' size={4} />\n                    </DropdownMenu.ItemIndicator>\n                  </DropdownMenu.CheckboxItem>\n                );\n              })}\n            </DropdownMenu.Viewport>\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n      <Tooltip.Root>\n        <Tooltip.Trigger asChild>\n          <Button variant='ghost' 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    </>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["emojiData", "EmojiMart", "useControllableState", "React", "useRef", "useState", "Button", "Popover", "Toolbar", "Tooltip", "useMediaQuery", "useThemeContext", "useTranslation", "Icon", "EmojiPickerToolbarButton", "disabled", "defaultEmoji", "emoji", "onChangeEmoji", "classNames", "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", "isMd", "useMediaQuery", "ssr", "emojiValue", "variant", "sideOffset", "onClick", "useControllableState", "React", "useRef", "useState", "Button", "DropdownMenu", "Icon", "Toolbar", "Tooltip", "useTranslation", "hues", "mx", "HuePreview", "hue", "size", "React", "svg", "width", "height", "viewBox", "rect", "x", "y", "fill", "text", "textAnchor", "fontSize", "fontWeight", "HuePickerToolbarButton", "disabled", "onChangeHue", "classNames", "defaultHue", "t", "useTranslation", "hueValue", "setHueValue", "useControllableState", "prop", "onChange", "defaultProp", "huePickerOpen", "setHuePickerOpen", "useState", "suppressNextTooltip", "useRef", "triggerTooltipOpen", "setTriggerTooltipOpen", "Tooltip", "Root", "open", "onOpenChange", "nextOpen", "current", "DropdownMenu", "modal", "Trigger", "asChild", "Toolbar", "Button", "mx", "span", "className", "Icon", "icon", "Portal", "Content", "side", "Arrow", "Viewport", "hues", "map", "CheckboxItem", "key", "checked", "onCheckedChange", "HuePickerBlock", "onClickClear", "variant", "div", "role", "ItemIndicator", "onClick"]
+  "sources": ["../../../src/components/EmojiPicker.tsx", "../../../src/components/HuePicker.tsx", "../../../src/components/ToolbarPicker.tsx", "../../../src/components/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} from '@dxos/react-ui';\n\nimport './emoji.css';\n\nexport type EmojiPickerProps = {\n  disabled?: boolean;\n  defaultEmoji?: string;\n  emoji?: string;\n  onChangeEmoji?: (nextEmoji: string) => void;\n  onClickClear?: ButtonProps['onClick'];\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  disabled,\n  defaultEmoji,\n  emoji,\n  onChangeEmoji,\n  classNames,\n}: ThemedClassName<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 * @deprecated\n */\nexport const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: 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    <>\n      <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>\n        <Popover.Trigger asChild>\n          <Button variant='ghost' classNames='gap-2 text-2xl plb-1' disabled={disabled}>\n            <span className='sr-only'>{t('select emoji label')}</span>\n            <span className='grow pis-14'>{emojiValue}</span>\n            <Icon icon='ph--caret-down--regular' size={4} />\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='ghost' 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    </>\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 { ToolbarPickerButton, type ToolbarPickerProps } from './ToolbarPicker';\n\nexport type HuePickerProps = {\n  disabled?: boolean;\n  defaultValue?: string;\n  value?: string;\n  onChange?: (nextHue: string) => void;\n  onReset?: ButtonProps['onClick'];\n} & Pick<ToolbarPickerProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset'>;\n\nexport const HuePicker = (props: ThemedClassName<HuePickerProps>) => {\n  const { t } = useTranslation('os');\n\n  return (\n    <ToolbarPickerButton\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 width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\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 { DropdownMenu, Icon, type ThemedClassName, Toolbar, Tooltip } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type ToolbarPickerProps = {\n  Component: FC<{ value: string }>;\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};\n\nexport const ToolbarPickerButton = ({\n  Component,\n  disabled,\n  classNames,\n  defaultValue: _defaultValue,\n  value: _value,\n  values,\n  label,\n  icon,\n  onChange,\n  onReset,\n}: ThemedClassName<ToolbarPickerProps>) => {\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  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            <Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>\n              <span className='sr-only'>{label}</span>\n              {(value && <Component value={value} />) || <Icon icon={icon} size={5} />}\n            </Toolbar.Button>\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='!w-40'>\n            <DropdownMenu.Viewport classNames='grid grid-cols-6'>\n              {values.map((_value) => {\n                return (\n                  <DropdownMenu.CheckboxItem\n                    key={_value}\n                    checked={_value === value}\n                    onCheckedChange={() => setValue(_value)}\n                    classNames={'!p-0 items-center justify-center'}\n                  >\n                    <Component value={_value} />\n                  </DropdownMenu.CheckboxItem>\n                );\n              })}\n              {onReset && (\n                <DropdownMenu.CheckboxItem\n                  onCheckedChange={() => onReset()}\n                  classNames={'!p-0 items-center justify-center'}\n                >\n                  <Icon icon='ph--x--regular' size={5} />\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 ThemedClassName, useTranslation } from '@dxos/react-ui';\n\nimport { ToolbarPickerButton, type ToolbarPickerProps } from './ToolbarPicker';\n\nexport type IconPickerProps = {\n  disabled?: boolean;\n  defaultValue?: string;\n  value?: string;\n  onChange?: (nextHue: string) => void;\n  onReset?: ButtonProps['onClick'];\n} & Pick<ToolbarPickerProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset'>;\n\nexport const IconPicker = ({ ...props }: ThemedClassName<IconPickerProps>) => {\n  const { t } = useTranslation('os');\n\n  return (\n    <ToolbarPickerButton\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 }: { value: string }) => {\n  return <Icon icon={`ph--${value}--regular`} size={5} />;\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", "EmojiPickerToolbarButton", "disabled", "defaultEmoji", "emoji", "onChangeEmoji", "classNames", "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", "isMd", "useMediaQuery", "ssr", "emojiValue", "variant", "sideOffset", "onClick", "React", "useTranslation", "hues", "useControllableState", "React", "useEffect", "useRef", "useState", "DropdownMenu", "Icon", "Toolbar", "Tooltip", "mx", "ToolbarPickerButton", "Component", "disabled", "classNames", "defaultValue", "_defaultValue", "value", "_value", "values", "label", "icon", "onChange", "onReset", "setValue", "useControllableState", "prop", "defaultProp", "useEffect", "open", "setOpen", "useState", "suppressNextTooltip", "useRef", "triggerTooltipOpen", "setTriggerTooltipOpen", "React", "Tooltip", "Root", "onOpenChange", "nextOpen", "current", "DropdownMenu", "modal", "Trigger", "asChild", "Toolbar", "Button", "mx", "span", "className", "Icon", "size", "Portal", "Content", "side", "Arrow", "Viewport", "map", "CheckboxItem", "key", "checked", "onCheckedChange", "HuePicker", "props", "t", "useTranslation", "React", "ToolbarPickerButton", "Component", "HuePreview", "label", "icon", "values", "hues", "value", "size", "div", "className", "svg", "width", "height", "viewBox", "rect", "x", "y", "fill", "strokeWidth", "React", "Icon", "useTranslation", "IconPicker", "props", "t", "useTranslation", "React", "ToolbarPickerButton", "Component", "IconPreview", "label", "icon", "values", "iconValues", "value", "Icon", "size", "icons", "map", "match"]
 }

package/dist/lib/node-esm/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytes":19156,"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/emoji.css","kind":"import-statement","original":"./emoji.css"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/HuePicker.tsx":{"bytes":20630,"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},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytes":611,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx","kind":"import-statement","original":"./EmojiPicker"},{"path":"packages/ui/react-ui-pickers/src/components/HuePicker.tsx","kind":"import-statement","original":"./HuePicker"}],"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/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":21215},"packages/ui/react-ui-pickers/dist/lib/node-esm/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":"@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":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["EmojiPickerBlock","EmojiPickerToolbarButton","HuePickerBlock","HuePickerToolbarButton"],"entryPoint":"packages/ui/react-ui-pickers/src/index.ts","cssBundle":"packages/ui/react-ui-pickers/dist/lib/node-esm/index.css","inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytesInOutput":5170},"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/HuePicker.tsx":{"bytesInOutput":6083},"packages/ui/react-ui-pickers/src/index.ts":{"bytesInOutput":0}},"bytes":11609},"packages/ui/react-ui-pickers/dist/lib/node-esm/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":1017},"packages/ui/react-ui-pickers/dist/lib/node-esm/index.css":{"imports":[],"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytesInOutput":146}},"bytes":244}}}
+{"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytes":783,"imports":[]},"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytes":19195,"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/emoji.css","kind":"import-statement","original":"./emoji.css"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/ToolbarPicker.tsx":{"bytes":11504,"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},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/HuePicker.tsx":{"bytes":4122,"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/ToolbarPicker.tsx","kind":"import-statement","original":"./ToolbarPicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/IconPicker.tsx":{"bytes":7443,"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/ToolbarPicker.tsx","kind":"import-statement","original":"./ToolbarPicker"}],"format":"esm"},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytes":810,"imports":[{"path":"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx","kind":"import-statement","original":"./EmojiPicker"},{"path":"packages/ui/react-ui-pickers/src/components/HuePicker.tsx","kind":"import-statement","original":"./HuePicker"},{"path":"packages/ui/react-ui-pickers/src/components/IconPicker.tsx","kind":"import-statement","original":"./IconPicker"},{"path":"packages/ui/react-ui-pickers/src/components/ToolbarPicker.tsx","kind":"import-statement","original":"./ToolbarPicker"}],"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/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":22043},"packages/ui/react-ui-pickers/dist/lib/node-esm/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":"@dxos/react-ui-theme","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","ToolbarPickerButton"],"entryPoint":"packages/ui/react-ui-pickers/src/index.ts","cssBundle":"packages/ui/react-ui-pickers/dist/lib/node-esm/index.css","inputs":{"packages/ui/react-ui-pickers/src/components/EmojiPicker.tsx":{"bytesInOutput":5170},"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-pickers/src/components/HuePicker.tsx":{"bytesInOutput":873},"packages/ui/react-ui-pickers/src/components/ToolbarPicker.tsx":{"bytesInOutput":3048},"packages/ui/react-ui-pickers/src/components/IconPicker.tsx":{"bytesInOutput":2002},"packages/ui/react-ui-pickers/src/index.ts":{"bytesInOutput":0}},"bytes":11646},"packages/ui/react-ui-pickers/dist/lib/node-esm/index.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":1017},"packages/ui/react-ui-pickers/dist/lib/node-esm/index.css":{"imports":[],"inputs":{"packages/ui/react-ui-pickers/src/components/emoji.css":{"bytesInOutput":146}},"bytes":244}}}

package/dist/types/src/components/EmojiPicker.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type ButtonProps, type ThemedClassName } from '@dxos/react-ui';
 import './emoji.css';
 export type EmojiPickerProps = {
@@ -11,9 +10,10 @@ export type EmojiPickerProps = {
 /**
  * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.
  */
-export declare const EmojiPickerToolbarButton: ({ disabled, defaultEmoji, emoji, onChangeEmoji, classNames, }: ThemedClassName<Omit<EmojiPickerProps, "onClickClear">>) => React.JSX.Element;
+export declare const EmojiPickerToolbarButton: ({ disabled, defaultEmoji, emoji, onChangeEmoji, classNames, }: ThemedClassName<Omit<EmojiPickerProps, "onClickClear">>) => import("react/jsx-runtime").JSX.Element;
 /**
  * A button for picking an emoji alongside a button for unsetting it.
+ * @deprecated
  */
-export declare const EmojiPickerBlock: ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => React.JSX.Element;
+export declare const EmojiPickerBlock: ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EmojiPicker.d.ts.map

package/dist/types/src/components/EmojiPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,eAAe,EAOrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,kEAMlC,eAAe,CAAC,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,sBA8EzD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,mEAAoE,gBAAgB,sBA+DhH,CAAC"}
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker.tsx"],"names":[],"mappings":"AASA,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,eAAe,EAOrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,kEAMlC,eAAe,CAAC,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,4CA8EzD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,mEAAoE,gBAAgB,4CA+DhH,CAAC"}

package/dist/types/src/components/EmojiPicker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAM5D,OAAO,EAA8C,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AA2BlG,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,gBAAgB,CAKpD,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAK5C,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"EmojiPicker.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAM5D,OAAO,EAA8C,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AA2BlG,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,gBAAgB,CAKpD,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAK5C,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAMX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/src/components/HuePicker.d.ts

@@ -1,18 +1,11 @@
-import React from 'react';
 import { type ButtonProps, type ThemedClassName } from '@dxos/react-ui';
+import { type ToolbarPickerProps } from './ToolbarPicker';
 export type HuePickerProps = {
     disabled?: boolean;
-    defaultHue?: string;
-    hue?: string;
-    onChangeHue?: (nextHue: string) => void;
-    onClickClear?: ButtonProps['onClick'];
-};
-/**
- * A toolbar button for picking hue. Use only in `role=toolbar` elements. Unable to unset the value.
- */
-export declare const HuePickerToolbarButton: ({ disabled, hue, onChangeHue, classNames, defaultHue, }: ThemedClassName<Omit<HuePickerProps, "onClickClear">>) => React.JSX.Element;
-/**
- * A button for picking hue alongside a button for unsetting it.
- */
-export declare const HuePickerBlock: ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => React.JSX.Element;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (nextHue: string) => void;
+    onReset?: ButtonProps['onClick'];
+} & Pick<ToolbarPickerProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset'>;
+export declare const HuePicker: (props: ThemedClassName<HuePickerProps>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=HuePicker.d.ts.map

package/dist/types/src/components/HuePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HuePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/HuePicker.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEL,KAAK,WAAW,EAGhB,KAAK,eAAe,EAIrB,MAAM,gBAAgB,CAAC;AAexB,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,4DAMhC,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,sBAsEvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,6DAA8D,cAAc,sBAmEtG,CAAC"}
+{"version":3,"file":"HuePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/HuePicker.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAGxF,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE/E,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,GAAG,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;AAE7F,eAAO,MAAM,SAAS,UAAW,eAAe,CAAC,cAAc,CAAC,4CAY/D,CAAC"}

package/dist/types/src/components/HuePicker.stories.d.ts

@@ -1,8 +1,7 @@
 import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import { type HuePickerProps } from './HuePicker';
-export declare const ToolbarButtonStory: StoryObj<HuePickerProps>;
-export declare const BlockPickerStory: StoryObj<HuePickerProps>;
 declare const meta: Meta;
 export default meta;
+export declare const Default: StoryObj<HuePickerProps>;
 //# sourceMappingURL=HuePicker.stories.d.ts.map

package/dist/types/src/components/HuePicker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HuePicker.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/HuePicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAM5D,OAAO,EAA0C,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AA2B1F,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,cAAc,CAGvD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAGrD,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"HuePicker.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/HuePicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAM5D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAY7D,QAAA,MAAM,IAAI,EAAE,IAMX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,cAAc,CAK5C,CAAC"}

package/dist/types/src/components/IconPicker.d.ts

@@ -0,0 +1,11 @@
+import { type ButtonProps, type ThemedClassName } from '@dxos/react-ui';
+import { type ToolbarPickerProps } from './ToolbarPicker';
+export type IconPickerProps = {
+    disabled?: boolean;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (nextHue: string) => void;
+    onReset?: ButtonProps['onClick'];
+} & Pick<ToolbarPickerProps, 'disabled' | 'defaultValue' | 'value' | 'onChange' | 'onReset'>;
+export declare const IconPicker: ({ ...props }: ThemedClassName<IconPickerProps>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconPicker.d.ts.map

package/dist/types/src/components/IconPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/IconPicker.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAQ,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAE9F,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE/E,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,GAAG,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;AAE7F,eAAO,MAAM,UAAU,iBAAkB,eAAe,CAAC,eAAe,CAAC,4CAYxE,CAAC"}

package/dist/types/src/components/IconPicker.stories.d.ts

@@ -0,0 +1,7 @@
+import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type IconPickerProps } from './IconPicker';
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj<IconPickerProps>;
+//# sourceMappingURL=IconPicker.stories.d.ts.map

package/dist/types/src/components/IconPicker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconPicker.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/IconPicker.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAM5D,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAahE,QAAA,MAAM,IAAI,EAAE,IAMX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,eAAe,CAG7C,CAAC"}

package/dist/types/src/components/ToolbarPicker.d.ts

@@ -0,0 +1,17 @@
+import { type FC } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+export type ToolbarPickerProps = {
+    Component: FC<{
+        value: string;
+    }>;
+    label: string;
+    icon: string;
+    values: string[];
+    disabled?: boolean;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onReset?: () => void;
+};
+export declare const ToolbarPickerButton: ({ Component, disabled, classNames, defaultValue: _defaultValue, value: _value, values, label, icon, onChange, onReset, }: ThemedClassName<ToolbarPickerProps>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolbarPicker.d.ts.map

package/dist/types/src/components/ToolbarPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/ToolbarPicker.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,KAAK,EAAE,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAsB,KAAK,eAAe,EAAoB,MAAM,gBAAgB,CAAC;AAG5F,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,EAAE,EAAE,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,6HAW7B,eAAe,CAAC,kBAAkB,CAAC,4CA8ErC,CAAC"}

package/dist/types/src/components/index.d.ts

@@ -1,3 +1,5 @@
 export * from './EmojiPicker';
 export * from './HuePicker';
+export * from './IconPicker';
+export * from './ToolbarPicker';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC"}