@audius/harmony 0.0.33 → 0.1.0

package/dist/components/button/OptionsFilterButton/OptionsFilterButton.js

@@ -0,0 +1,123 @@
+import { __rest, __assign } from '../../../_virtual/_tslib.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { forwardRef, useState, useRef, useCallback, useMemo } from 'react';
+import { useTheme } from '@emotion/react';
+import { BaseButton } from '../BaseButton/BaseButton.js';
+import '../../common/HiddenInput.js';
+import '../../radio-group/RadioGroupContext.js';
+import { Text } from '../../text/Text.js';
+import { TextInput } from '../../input/TextInput/TextInput.js';
+import { TextInputSize } from '../../input/TextInput/types.js';
+import '../../input/PasswordInput/PasswordInput.js';
+import '../../input/TokenAmountInput/TokenAmountInput.js';
+import { Box } from '../../layout/Box/Box.js';
+import { Flex } from '../../layout/Flex/Flex.js';
+import { Paper } from '../../layout/Paper/Paper.js';
+import { Popup } from '../../popup/Popup.js';
+import { useControlled } from '../../../hooks/useControlled.js';
+import { IconCaretDown, IconSearch } from '../../../icons/utilityIcons.js';
+import '@emotion/css';
+import { FilterButton } from '../FilterButton/FilterButton.js';
+import { SelectPopupKeyHandler } from './SelectPopupKeyHandler.js';
+
+var messages = {
+    noMatches: 'No matches'
+};
+var FilterButtonOptions = function (props) {
+    var activeValue = props.activeValue, options = props.options, onChange = props.onChange, optionRefs = props.optionRefs;
+    var _a = useTheme(), color = _a.color, cornerRadius = _a.cornerRadius, spacing = _a.spacing, typography = _a.typography;
+    // Popup Styles
+    var optionIconCss = {
+        width: spacing.unit4,
+        height: spacing.unit4
+    };
+    var activeOptionCss = {
+        transform: 'none',
+        backgroundColor: color.secondary.s300,
+        color: color.special.white
+    };
+    var optionCss = {
+        background: 'transparent',
+        border: 'none',
+        color: color.text.default,
+        fontWeight: typography.weight.medium,
+        gap: spacing.s,
+        paddingLeft: spacing.m,
+        paddingRight: spacing.m,
+        paddingTop: spacing.s,
+        paddingBottom: spacing.s,
+        width: '100%',
+        borderRadius: cornerRadius.s,
+        justifyContent: 'flex-start',
+        '&:hover': activeOptionCss,
+        '&:active': {
+            transform: 'none'
+        }
+    };
+    if (!options.length) {
+        return (jsx(Flex, __assign({ justifyContent: 'center' }, { children: jsx(Text, __assign({ variant: 'body', color: 'subdued', size: 's' }, { children: messages.noMatches })) })));
+    }
+    return (jsx(Flex, __assign({ direction: 'column' }, { children: options.map(function (option, index) {
+            var _a, _b, _c;
+            return (jsxs(BaseButton, __assign({ iconLeft: option.icon, styles: {
+                    button: __assign(__assign({}, optionCss), (option.value === activeValue ? activeOptionCss : {})),
+                    icon: optionIconCss
+                }, onClick: function () { return onChange(option); }, "aria-label": (_a = option.label) !== null && _a !== void 0 ? _a : option.value, role: 'option', ref: function (el) {
+                    if (optionRefs && optionRefs.current && el) {
+                        optionRefs.current[index] = el;
+                    }
+                } }, { children: [(_b = option.leadingElement) !== null && _b !== void 0 ? _b : null, jsx(Text, __assign({ variant: 'body', strength: 'strong' }, { children: (_c = option.label) !== null && _c !== void 0 ? _c : option.value })), option.helperText ? (jsx(Text, __assign({ variant: 'body', strength: 'strong', color: 'subdued' }, { children: option.helperText }))) : null] }), option.value));
+        }) })));
+};
+var OptionsFilterButton = forwardRef(function OptionsFilterButton(props, ref) {
+    var _a;
+    var selectionProp = props.selection, options = props.options, optionsLabel = props.optionsLabel, showFilterInput = props.showFilterInput, _b = props.filterInputPlaceholder, filterInputPlaceholder = _b === void 0 ? 'Search' : _b, popupAnchorOrigin = props.popupAnchorOrigin, popupMaxHeight = props.popupMaxHeight, popupTransformOrigin = props.popupTransformOrigin, popupPortalLocation = props.popupPortalLocation, popupZIndex = props.popupZIndex, filterButtonProps = __rest(props, ["selection", "options", "optionsLabel", "showFilterInput", "filterInputPlaceholder", "popupAnchorOrigin", "popupMaxHeight", "popupTransformOrigin", "popupPortalLocation", "popupZIndex"]);
+    var _c = useControlled({
+        controlledProp: selectionProp,
+        defaultValue: null,
+        stateName: 'selection',
+        componentName: 'FilterButton'
+    }), selection = _c[0], setSelection = _c[1];
+    var _d = useState(''), filterInputValue = _d[0], setFilterInputValue = _d[1];
+    var selectedOption = options.find(function (option) { return option.value === selection; });
+    var selectedLabel = (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value;
+    var inputRef = useRef(null);
+    var optionRefs = useRef([]);
+    var scrollRef = useRef(null);
+    var handleOptionSelect = useCallback(function (handleChange, setIsOpen) {
+        return function (option) {
+            var _a;
+            setSelection(option.value);
+            handleChange(option.value, (_a = option.label) !== null && _a !== void 0 ? _a : '');
+            setIsOpen(false);
+        };
+    }, [setSelection]);
+    var handleOpen = useCallback(function () {
+        // Focus the input after the popup is open
+        setTimeout(function () {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+        }, 0);
+    }, [inputRef]);
+    var filteredOptions = useMemo(function () {
+        return options.filter(function (_a) {
+            var label = _a.label;
+            return (!filterInputValue ||
+                (label === null || label === void 0 ? void 0 : label.toLowerCase().includes(filterInputValue.toLowerCase())));
+        });
+    }, [options, filterInputValue]);
+    return (jsx(FilterButton, __assign({ iconRight: IconCaretDown }, filterButtonProps, { value: selection, onOpen: handleOpen, onReset: function () { return setFilterInputValue(''); }, label: selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : filterButtonProps.label }, { children: function (_a) {
+            var isOpen = _a.isOpen, setIsOpen = _a.setIsOpen, handleChange = _a.handleChange, anchorRef = _a.anchorRef;
+            return (jsx(SelectPopupKeyHandler, __assign({ options: filteredOptions, disabled: !isOpen, onOptionSelect: handleOptionSelect(handleChange, setIsOpen), optionRefs: optionRefs, scrollRef: scrollRef }, { children: function (activeValue) {
+                    var _a;
+                    return (jsx(Popup, __assign({ anchorRef: ref || anchorRef, isVisible: isOpen, onClose: function () { return setIsOpen(false); }, anchorOrigin: popupAnchorOrigin, transformOrigin: popupTransformOrigin, portalLocation: popupPortalLocation, zIndex: popupZIndex, onAfterClose: function () { return setFilterInputValue(''); } }, { children: jsx(Paper, __assign({ mt: 's', border: 'strong', shadow: 'far', onClick: function (e) { return e.stopPropagation(); } }, { children: jsx(Flex, __assign({ p: 's', direction: 'column', alignItems: 'flex-start', role: 'listbox', "aria-label": (_a = selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : filterButtonProps.label) !== null && _a !== void 0 ? _a : props['aria-label'], "aria-activedescendant": selectedLabel, css: { maxHeight: popupMaxHeight, overflowY: 'auto' }, ref: scrollRef }, { children: jsxs(Flex, __assign({ direction: 'column', w: '100%', gap: 's' }, { children: [showFilterInput ? (jsx(TextInput, { ref: inputRef, placeholder: filterInputPlaceholder, label: filterInputPlaceholder, size: TextInputSize.SMALL, startIcon: IconSearch, onClick: function (e) {
+                                                e.stopPropagation();
+                                            }, onChange: function (e) {
+                                                setFilterInputValue(e.target.value);
+                                            }, autoComplete: 'off' })) : null, optionsLabel ? (jsx(Box, __assign({ pt: 's', ph: 'm' }, { children: jsx(Text, __assign({ variant: 'label', size: 'xs' }, { children: optionsLabel })) }))) : null, jsx(FilterButtonOptions, { activeValue: activeValue, options: filteredOptions, optionRefs: optionRefs, onChange: handleOptionSelect(handleChange, setIsOpen) })] })) })) })) })));
+                } })));
+        } })));
+});
+
+export { FilterButtonOptions, OptionsFilterButton };
+//# sourceMappingURL=OptionsFilterButton.js.map

package/dist/components/button/OptionsFilterButton/OptionsFilterButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsFilterButton.js","sources":["../../../../src/components/button/OptionsFilterButton/OptionsFilterButton.tsx"],"sourcesContent":["import {\n  forwardRef,\n  RefObject,\n  useState,\n  useCallback,\n  useRef,\n  useMemo\n} from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { BaseButton } from 'components/button/BaseButton/BaseButton'\nimport { TextInput, TextInputSize } from 'components/input'\nimport { Box, Flex, Paper } from 'components/layout'\nimport { Popup } from 'components/popup'\nimport { Text } from 'components/text'\nimport { useControlled } from 'hooks/useControlled'\nimport { IconCaretDown, IconSearch } from 'icons'\n\nimport { FilterButton } from '../FilterButton/FilterButton'\n\nimport { SelectPopupKeyHandler } from './SelectPopupKeyHandler'\nimport { OptionsFilterButtonProps, OptionsFilterButtonOption } from './types'\n\nconst messages = {\n  noMatches: 'No matches'\n}\n\ntype FilterButtonOptionsProps = {\n  activeValue?: string | null\n  options: OptionsFilterButtonOption[]\n  optionRefs?: RefObject<HTMLButtonElement[]>\n  onChange: (option: OptionsFilterButtonOption) => void\n}\n\nexport const FilterButtonOptions = (props: FilterButtonOptionsProps) => {\n  const { activeValue, options, onChange, optionRefs } = props\n  const { color, cornerRadius, spacing, typography } = useTheme()\n\n  // Popup Styles\n  const optionIconCss: CSSObject = {\n    width: spacing.unit4,\n    height: spacing.unit4\n  }\n\n  const activeOptionCss: CSSObject = {\n    transform: 'none',\n    backgroundColor: color.secondary.s300,\n    color: color.special.white\n  }\n\n  const optionCss: CSSObject = {\n    background: 'transparent',\n    border: 'none',\n    color: color.text.default,\n    fontWeight: typography.weight.medium,\n    gap: spacing.s,\n    paddingLeft: spacing.m,\n    paddingRight: spacing.m,\n    paddingTop: spacing.s,\n    paddingBottom: spacing.s,\n    width: '100%',\n    borderRadius: cornerRadius.s,\n    justifyContent: 'flex-start',\n\n    '&:hover': activeOptionCss,\n\n    '&:active': {\n      transform: 'none'\n    }\n  }\n\n  if (!options.length) {\n    return (\n      <Flex justifyContent='center'>\n        <Text variant='body' color='subdued' size='s'>\n          {messages.noMatches}\n        </Text>\n      </Flex>\n    )\n  }\n\n  return (\n    <Flex direction='column'>\n      {options.map((option, index) => (\n        <BaseButton\n          key={option.value}\n          iconLeft={option.icon}\n          styles={{\n            button: {\n              ...optionCss,\n              ...(option.value === activeValue ? activeOptionCss : {})\n            },\n            icon: optionIconCss\n          }}\n          onClick={() => onChange(option)}\n          aria-label={option.label ?? option.value}\n          role='option'\n          ref={(el) => {\n            if (optionRefs && optionRefs.current && el) {\n              optionRefs.current[index] = el\n            }\n          }}\n        >\n          {option.leadingElement ?? null}\n          <Text variant='body' strength='strong'>\n            {option.label ?? option.value}\n          </Text>\n          {option.helperText ? (\n            <Text variant='body' strength='strong' color='subdued'>\n              {option.helperText}\n            </Text>\n          ) : null}\n        </BaseButton>\n      ))}\n    </Flex>\n  )\n}\n\nexport const OptionsFilterButton = forwardRef<\n  HTMLButtonElement,\n  OptionsFilterButtonProps\n>(function OptionsFilterButton(props, ref) {\n  const {\n    selection: selectionProp,\n    options,\n    optionsLabel,\n    showFilterInput,\n    filterInputPlaceholder = 'Search',\n    popupAnchorOrigin,\n    popupMaxHeight,\n    popupTransformOrigin,\n    popupPortalLocation,\n    popupZIndex,\n    ...filterButtonProps\n  } = props\n\n  const [selection, setSelection] = useControlled({\n    controlledProp: selectionProp,\n    defaultValue: null,\n    stateName: 'selection',\n    componentName: 'FilterButton'\n  })\n\n  const [filterInputValue, setFilterInputValue] = useState('')\n  const selectedOption = options.find((option) => option.value === selection)\n  const selectedLabel = selectedOption?.label ?? selectedOption?.value\n  const inputRef = useRef<HTMLInputElement>(null)\n  const optionRefs = useRef([])\n  const scrollRef = useRef<HTMLDivElement>(null)\n\n  const handleOptionSelect = useCallback(\n    (\n        handleChange: (value: string, label: string) => void,\n        setIsOpen: (isOpen: boolean) => void\n      ) =>\n      (option: OptionsFilterButtonOption) => {\n        setSelection(option.value)\n        handleChange(option.value, option.label ?? '')\n        setIsOpen(false)\n      },\n    [setSelection]\n  )\n\n  const handleOpen = useCallback(() => {\n    // Focus the input after the popup is open\n    setTimeout(() => {\n      inputRef.current?.focus({ preventScroll: true })\n    }, 0)\n  }, [inputRef])\n\n  const filteredOptions = useMemo(\n    () =>\n      options.filter(({ label }) => {\n        return (\n          !filterInputValue ||\n          label?.toLowerCase().includes(filterInputValue.toLowerCase())\n        )\n      }),\n    [options, filterInputValue]\n  )\n\n  return (\n    <FilterButton\n      iconRight={IconCaretDown}\n      {...filterButtonProps}\n      value={selection}\n      onOpen={handleOpen}\n      onReset={() => setFilterInputValue('')}\n      label={selectedLabel ?? filterButtonProps.label}\n    >\n      {({ isOpen, setIsOpen, handleChange, anchorRef }) => (\n        <SelectPopupKeyHandler\n          options={filteredOptions}\n          disabled={!isOpen}\n          onOptionSelect={handleOptionSelect(handleChange, setIsOpen)}\n          optionRefs={optionRefs}\n          scrollRef={scrollRef}\n        >\n          {(activeValue) => (\n            <Popup\n              anchorRef={(ref as RefObject<HTMLElement>) || anchorRef}\n              isVisible={isOpen}\n              onClose={() => setIsOpen(false)}\n              anchorOrigin={popupAnchorOrigin}\n              transformOrigin={popupTransformOrigin}\n              portalLocation={popupPortalLocation}\n              zIndex={popupZIndex}\n              onAfterClose={() => setFilterInputValue('')}\n            >\n              <Paper\n                mt='s'\n                border='strong'\n                shadow='far'\n                onClick={(e) => e.stopPropagation()}\n              >\n                <Flex\n                  p='s'\n                  direction='column'\n                  alignItems='flex-start'\n                  role='listbox'\n                  aria-label={\n                    selectedLabel ??\n                    filterButtonProps.label ??\n                    props['aria-label']\n                  }\n                  aria-activedescendant={selectedLabel}\n                  css={{ maxHeight: popupMaxHeight, overflowY: 'auto' }}\n                  ref={scrollRef}\n                >\n                  <Flex direction='column' w='100%' gap='s'>\n                    {showFilterInput ? (\n                      <TextInput\n                        ref={inputRef}\n                        placeholder={filterInputPlaceholder}\n                        label={filterInputPlaceholder}\n                        size={TextInputSize.SMALL}\n                        startIcon={IconSearch}\n                        onClick={(e) => {\n                          e.stopPropagation()\n                        }}\n                        onChange={(e) => {\n                          setFilterInputValue(e.target.value)\n                        }}\n                        autoComplete='off'\n                      />\n                    ) : null}\n                    {optionsLabel ? (\n                      <Box pt='s' ph='m'>\n                        <Text variant='label' size='xs'>\n                          {optionsLabel}\n                        </Text>\n                      </Box>\n                    ) : null}\n                    <FilterButtonOptions\n                      activeValue={activeValue}\n                      options={filteredOptions}\n                      optionRefs={optionRefs}\n                      onChange={handleOptionSelect(handleChange, setIsOpen)}\n                    />\n                  </Flex>\n                </Flex>\n              </Paper>\n            </Popup>\n          )}\n        </SelectPopupKeyHandler>\n      )}\n    </FilterButton>\n  )\n})\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/button/{FilterButton/FilterButton.stories.d.ts → OptionsFilterButton/OptionsFilterButton.stories.d.ts}

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { FilterButton } from './FilterButton';
-declare const meta: Meta<typeof FilterButton>;
+import { OptionsFilterButton } from './OptionsFilterButton';
+declare const meta: Meta<typeof OptionsFilterButton>;
 export default meta;
-type Story = StoryObj<typeof FilterButton>;
+type Story = StoryObj<typeof OptionsFilterButton>;
 export declare const Primary: Story;
 export declare const FillContainer: Story;
 export declare const ReplaceLabel: Story;
 export declare const CustomIcon: Story;
 export declare const Accessibility: Story;
-//# sourceMappingURL=FilterButton.stories.d.ts.map
+//# sourceMappingURL=OptionsFilterButton.stories.d.ts.map

package/dist/components/button/OptionsFilterButton/OptionsFilterButton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsFilterButton.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/button/OptionsFilterButton/OptionsFilterButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAMtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAwB1C,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAGjD,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAe3B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAexB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAqB3B,CAAA"}

package/dist/components/button/OptionsFilterButton/SelectPopupKeyHandler.d.ts

@@ -0,0 +1,18 @@
+import { RefObject, ReactNode } from 'react';
+import { FilterButtonOption } from '../FilterButton/types';
+type SelectPopupKeyHandlerProps = {
+    children: (activeValue: string | null) => ReactNode;
+    disabled?: boolean;
+    onOptionSelect: (option: FilterButtonOption) => void;
+    optionRefs: RefObject<HTMLButtonElement[]>;
+    options: FilterButtonOption[];
+    scrollRef: RefObject<HTMLDivElement>;
+};
+/**
+ * Handles key events for the popup inside the Select component
+ *
+ * Calls the `children` function with the currently active value
+ */
+export declare const SelectPopupKeyHandler: (props: SelectPopupKeyHandlerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SelectPopupKeyHandler.d.ts.map

package/dist/components/button/OptionsFilterButton/SelectPopupKeyHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectPopupKeyHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/button/OptionsFilterButton/SelectPopupKeyHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,SAAS,EAAa,MAAM,OAAO,CAAA;AAEjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE1D,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,KAAK,SAAS,CAAA;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACpD,UAAU,EAAE,SAAS,CAAC,iBAAiB,EAAE,CAAC,CAAA;IAC1C,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAA;CACrC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,UAAW,0BAA0B,qDAkFtE,CAAA"}

package/dist/components/button/OptionsFilterButton/SelectPopupKeyHandler.js

@@ -0,0 +1,82 @@
+import { jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { useState, useEffect } from 'react';
+
+/**
+ * Handles key events for the popup inside the Select component
+ *
+ * Calls the `children` function with the currently active value
+ */
+var SelectPopupKeyHandler = function (props) {
+    var _a;
+    var disabled = props.disabled, options = props.options, onOptionSelect = props.onOptionSelect, optionRefs = props.optionRefs, scrollRef = props.scrollRef, children = props.children;
+    var _b = useState(null), activeIndex = _b[0], setActiveIndex = _b[1];
+    var activeValue = activeIndex !== null ? (_a = options[activeIndex]) === null || _a === void 0 ? void 0 : _a.value : null;
+    useEffect(function () {
+        var adjustScrollPosition = function (newIndex) {
+            var _a;
+            if (newIndex !== null) {
+                if (optionRefs.current) {
+                    optionRefs.current[newIndex].scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            }
+            else {
+                (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior: 'smooth' });
+            }
+        };
+        var handleKeyDown = function (event) {
+            if (disabled) {
+                return;
+            }
+            switch (event.key) {
+                case 'ArrowUp':
+                    event.stopPropagation();
+                    event.preventDefault();
+                    setActiveIndex(function (prevIndex) {
+                        var getNewIndex = function () {
+                            if (prevIndex === null) {
+                                return options.length - 1;
+                            }
+                            return prevIndex > 0 ? prevIndex - 1 : null;
+                        };
+                        var newIndex = getNewIndex();
+                        adjustScrollPosition(newIndex);
+                        return newIndex;
+                    });
+                    break;
+                case 'ArrowDown':
+                    event.stopPropagation();
+                    event.preventDefault();
+                    setActiveIndex(function (prevIndex) {
+                        var getNewIndex = function () {
+                            if (prevIndex === null) {
+                                return 0;
+                            }
+                            return prevIndex < options.length - 1 ? prevIndex + 1 : null;
+                        };
+                        var newIndex = getNewIndex();
+                        adjustScrollPosition(newIndex);
+                        return newIndex;
+                    });
+                    break;
+                case 'Enter':
+                    event.stopPropagation();
+                    event.preventDefault();
+                    if (activeIndex !== null && options[activeIndex]) {
+                        onOptionSelect(options[activeIndex]);
+                    }
+                    break;
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return function () {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [disabled, options, activeIndex, scrollRef, optionRefs]);
+    return jsx(Fragment, { children: children(activeValue) });
+};
+
+export { SelectPopupKeyHandler };
+//# sourceMappingURL=SelectPopupKeyHandler.js.map

package/dist/components/button/OptionsFilterButton/SelectPopupKeyHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectPopupKeyHandler.js","sources":["../../../../src/components/button/OptionsFilterButton/SelectPopupKeyHandler.tsx"],"sourcesContent":["import { RefObject, useState, ReactNode, useEffect } from 'react'\n\nimport { FilterButtonOption } from '../FilterButton/types'\n\ntype SelectPopupKeyHandlerProps = {\n  children: (activeValue: string | null) => ReactNode\n  disabled?: boolean\n  onOptionSelect: (option: FilterButtonOption) => void\n  optionRefs: RefObject<HTMLButtonElement[]>\n  options: FilterButtonOption[]\n  scrollRef: RefObject<HTMLDivElement>\n}\n\n/**\n * Handles key events for the popup inside the Select component\n *\n * Calls the `children` function with the currently active value\n */\nexport const SelectPopupKeyHandler = (props: SelectPopupKeyHandlerProps) => {\n  const { disabled, options, onOptionSelect, optionRefs, scrollRef, children } =\n    props\n  const [activeIndex, setActiveIndex] = useState<number | null>(null)\n  const activeValue = activeIndex !== null ? options[activeIndex]?.value : null\n\n  useEffect(() => {\n    const adjustScrollPosition = (newIndex: number | null) => {\n      if (newIndex !== null) {\n        if (optionRefs.current) {\n          optionRefs.current[newIndex].scrollIntoView({\n            behavior: 'smooth',\n            block: 'start'\n          })\n        }\n      } else {\n        scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (disabled) {\n        return\n      }\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.stopPropagation()\n          event.preventDefault()\n          setActiveIndex((prevIndex) => {\n            const getNewIndex = () => {\n              if (prevIndex === null) {\n                return options.length - 1\n              }\n\n              return prevIndex > 0 ? prevIndex - 1 : null\n            }\n\n            const newIndex = getNewIndex()\n            adjustScrollPosition(newIndex)\n\n            return newIndex\n          })\n          break\n        case 'ArrowDown':\n          event.stopPropagation()\n          event.preventDefault()\n          setActiveIndex((prevIndex) => {\n            const getNewIndex = () => {\n              if (prevIndex === null) {\n                return 0\n              }\n\n              return prevIndex < options.length - 1 ? prevIndex + 1 : null\n            }\n\n            const newIndex = getNewIndex()\n            adjustScrollPosition(newIndex)\n\n            return newIndex\n          })\n          break\n        case 'Enter':\n          event.stopPropagation()\n          event.preventDefault()\n          if (activeIndex !== null && options[activeIndex]) {\n            onOptionSelect(options[activeIndex])\n          }\n          break\n        default:\n          break\n      }\n    }\n\n    window.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [disabled, options, activeIndex, scrollRef, optionRefs])\n\n  return <>{children(activeValue)}</>\n}\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/button/OptionsFilterButton/types.d.ts

@@ -0,0 +1,62 @@
+/// <reference types="react" />
+import { IconComponent } from "../../icon";
+import { Origin } from "../../popup/types";
+import { FilterButtonProps } from '../FilterButton/types';
+export type OptionsFilterButtonOption = {
+    value: string;
+    /**
+     * The label to display. If not provided, uses the value.
+     */
+    label?: string;
+    helperText?: string;
+    icon?: IconComponent;
+    leadingElement?: JSX.Element;
+};
+export type FilterButtonPopupProps = {
+    /**
+     * Popup anchor origin
+     * @default { horizontal: 'center', vertical: 'bottom' }
+     */
+    popupAnchorOrigin?: Origin;
+    /**
+     * Popup max height
+     */
+    popupMaxHeight?: number;
+    /**
+     * Popup transform origin
+     * @default { horizontal: 'center', vertical: 'top' }
+     */
+    popupTransformOrigin?: Origin;
+    /**
+     * Popup portal location passed to the inner popup
+     */
+    popupPortalLocation?: HTMLElement;
+    /**
+     * zIndex applied to the inner Popup component
+     */
+    popupZIndex?: number;
+};
+export type OptionsFilterButtonProps = {
+    /**
+     * Selection options
+     * e.g. { label: 'Option A', icon: IconRadar }
+     */
+    options: OptionsFilterButtonOption[];
+    /**
+     * Label to display above options
+     */
+    optionsLabel?: string;
+    /**
+     * The selected value
+     */
+    selection?: string | null;
+    /**
+     * Show a text input to filter the options
+     */
+    showFilterInput?: boolean;
+    /**
+     * Placeholder text for the filter input
+     */
+    filterInputPlaceholder?: string;
+} & FilterButtonPopupProps & Omit<FilterButtonProps, 'children' | 'value'>;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/button/OptionsFilterButton/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/OptionsFilterButton/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,mBAAuB;AAC/C,OAAO,EAAE,MAAM,EAAE,0BAA8B;AAE/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAEzD,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAE7B;;OAEG;IACH,mBAAmB,CAAC,EAAE,WAAW,CAAA;IAEjC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,OAAO,EAAE,yBAAyB,EAAE,CAAA;IAEpC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAEzB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC,GAAG,sBAAsB,GACxB,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,OAAO,CAAC,CAAA"}

package/dist/components/button/UnstyledButton.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+/**
+ * A button element with no styling.
+ * For use when you want the correct HTML button role on something that isn't visually a button
+ * e.g. icons, etc
+ */
+export declare const UnstyledButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+//# sourceMappingURL=UnstyledButton.d.ts.map

package/dist/components/button/UnstyledButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnstyledButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/UnstyledButton.tsx"],"names":[],"mappings":";AAEA;;;;GAIG;AACH,eAAO,MAAM,cAAc;;;qHAK1B,CAAA"}

package/dist/components/button/UnstyledButton.js

@@ -0,0 +1,13 @@
+import { __makeTemplateObject } from '../../_virtual/_tslib.js';
+import styled from '@emotion/styled';
+
+/**
+ * A button element with no styling.
+ * For use when you want the correct HTML button role on something that isn't visually a button
+ * e.g. icons, etc
+ */
+var UnstyledButton = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n"], ["\n  border: none;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n"])));
+var templateObject_1;
+
+export { UnstyledButton };
+//# sourceMappingURL=UnstyledButton.js.map

package/dist/components/button/UnstyledButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnstyledButton.js","sources":["../../../src/components/button/UnstyledButton.tsx"],"sourcesContent":["import styled from '@emotion/styled'\n\n/**\n * A button element with no styling.\n * For use when you want the correct HTML button role on something that isn't visually a button\n * e.g. icons, etc\n */\nexport const UnstyledButton = styled.button`\n  border: none;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n`\n"],"names":[],"mappings":";;;AAEA;;;;AAIG;AACU,IAAA,cAAc,GAAG,MAAM,CAAC,MAAM,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,8EAAA,CAAA,EAAA,CAAA,8EAK1C,CAAA,CAAA,CAAA,EAAA;;;;;"}

package/dist/components/button/index.d.ts

@@ -7,5 +7,8 @@ export { FollowButton } from './FollowButton/FollowButton';
 export * from './FollowButton/types';
 export { FilterButton } from './FilterButton/FilterButton';
 export * from './FilterButton/types';
+export { OptionsFilterButton, FilterButtonOptions } from './OptionsFilterButton/OptionsFilterButton';
+export * from './OptionsFilterButton/types';
 export { IconButton, IconButtonProps } from './IconButton/IconButton';
+export { UnstyledButton } from './UnstyledButton';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,cAAc,qBAAqB,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,cAAc,sBAAsB,CAAA;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,cAAc,sBAAsB,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,cAAc,qBAAqB,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,cAAc,sBAAsB,CAAA;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,cAAc,sBAAsB,CAAA;AACpC,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,2CAA2C,CAAA;AAClD,cAAc,6BAA6B,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/components/completion-check/CompletionCheck.js

@@ -9,7 +9,6 @@ import '@emotion/css';
 import '../layout/Box/Box.js';
 import { Flex } from '../layout/Flex/Flex.js';
 import '../layout/Paper/Paper.js';
-import '../layout/Popup/Popup.js';
 import styles from './CompletionCheck.module.css.js';
 
 var CompletionDefault = function () { return (jsx("div", { className: cn(styles.defaultCompletionIcon) })); };

package/dist/components/completion-check/CompletionCheck.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompletionCheck.js","sources":["../../../src/components/completion-check/CompletionCheck.tsx"],"sourcesContent":["import type { CSSProperties } from 'react'\n\nimport { useTransition, animated } from '@react-spring/web'\nimport cn from 'classnames'\n\nimport { IconValidationCheck, IconValidationX } from 'icons'\n\nimport { Flex } from '../layout'\n\nimport styles from './CompletionCheck.module.css'\nimport type { CompletionCheckProps } from './types'\n\nexport const CompletionDefault = () => (\n  <div className={cn(styles.defaultCompletionIcon)} />\n)\nexport const CompletionEmpty = () => (\n  <div className={cn(styles.completionIcon, styles.emptyCompletionIcon)} />\n)\n\ntype CompletionChangeIconProps = {\n  iconStyles: CSSProperties\n}\n\nexport const CompletionError = (props: CompletionChangeIconProps) => (\n  <animated.div\n    style={props.iconStyles}\n    className={cn(styles.completionIcon, styles.xIcon)}\n  >\n    {' '}\n    <IconValidationX size='s' />{' '}\n  </animated.div>\n)\nexport const CompletionSuccess = (props: CompletionChangeIconProps) => (\n  <animated.div\n    style={props.iconStyles}\n    className={cn(styles.completionIcon, styles.checkIcon)}\n  >\n    {' '}\n    <IconValidationCheck size='s' />\n  </animated.div>\n)\n\nconst completionComponents = {\n  complete: CompletionSuccess,\n  error: CompletionError,\n  incomplete: CompletionEmpty\n}\n\nexport const CompletionCheck = (props: CompletionCheckProps) => {\n  const transitions = useTransition(props.value, {\n    from: { x: 0 },\n    enter: { x: 1 },\n    leave: { x: 0 }\n  })\n  return (\n    <Flex alignItems='center' className={styles.container}>\n      <CompletionDefault />\n      {transitions((style, value) => {\n        if (completionComponents[value]) {\n          const CompletionIcon = completionComponents[value]\n          return (\n            <CompletionIcon\n              iconStyles={{\n                opacity: style.x.to({\n                  output: [0.3, 1]\n                }) as any,\n                transform: style.x\n                  .to({\n                    range: [0, 0.75, 1],\n                    output: [0, 1.2, 1]\n                  })\n                  .to((x) => `scale3d(${x}, ${x}, ${x})`) as any\n              }}\n            />\n          )\n        }\n        return null\n      })}\n    </Flex>\n  )\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"CompletionCheck.js","sources":["../../../src/components/completion-check/CompletionCheck.tsx"],"sourcesContent":["import type { CSSProperties } from 'react'\n\nimport { useTransition, animated } from '@react-spring/web'\nimport cn from 'classnames'\n\nimport { IconValidationCheck, IconValidationX } from 'icons'\n\nimport { Flex } from '../layout'\n\nimport styles from './CompletionCheck.module.css'\nimport type { CompletionCheckProps } from './types'\n\nexport const CompletionDefault = () => (\n  <div className={cn(styles.defaultCompletionIcon)} />\n)\nexport const CompletionEmpty = () => (\n  <div className={cn(styles.completionIcon, styles.emptyCompletionIcon)} />\n)\n\ntype CompletionChangeIconProps = {\n  iconStyles: CSSProperties\n}\n\nexport const CompletionError = (props: CompletionChangeIconProps) => (\n  <animated.div\n    style={props.iconStyles}\n    className={cn(styles.completionIcon, styles.xIcon)}\n  >\n    {' '}\n    <IconValidationX size='s' />{' '}\n  </animated.div>\n)\nexport const CompletionSuccess = (props: CompletionChangeIconProps) => (\n  <animated.div\n    style={props.iconStyles}\n    className={cn(styles.completionIcon, styles.checkIcon)}\n  >\n    {' '}\n    <IconValidationCheck size='s' />\n  </animated.div>\n)\n\nconst completionComponents = {\n  complete: CompletionSuccess,\n  error: CompletionError,\n  incomplete: CompletionEmpty\n}\n\nexport const CompletionCheck = (props: CompletionCheckProps) => {\n  const transitions = useTransition(props.value, {\n    from: { x: 0 },\n    enter: { x: 1 },\n    leave: { x: 0 }\n  })\n  return (\n    <Flex alignItems='center' className={styles.container}>\n      <CompletionDefault />\n      {transitions((style, value) => {\n        if (completionComponents[value]) {\n          const CompletionIcon = completionComponents[value]\n          return (\n            <CompletionIcon\n              iconStyles={{\n                opacity: style.x.to({\n                  output: [0.3, 1]\n                }) as any,\n                transform: style.x\n                  .to({\n                    range: [0, 0.75, 1],\n                    output: [0, 1.2, 1]\n                  })\n                  .to((x) => `scale3d(${x}, ${x}, ${x})`) as any\n              }}\n            />\n          )\n        }\n        return null\n      })}\n    </Flex>\n  )\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/hint/Hint.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import type { IconComponent } from "../icon";
 import { PaperProps } from "../layout/Paper";
 type HintProps = {
-    icon: IconComponent;
+    icon?: IconComponent;
     actions?: ReactNode;
 } & PaperProps;
 export declare const Hint: (props: HintProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/hint/Hint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hint.d.ts","sourceRoot":"","sources":["../../../src/components/hint/Hint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAuB;AAEpD,OAAO,EAAS,UAAU,EAAE,wBAA+B;AAG3D,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,aAAa,CAAA;IACnB,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,GAAG,UAAU,CAAA;AAKd,eAAO,MAAM,IAAI,UAAW,SAAS,qDA2BpC,CAAA"}
+{"version":3,"file":"Hint.d.ts","sourceRoot":"","sources":["../../../src/components/hint/Hint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAuB;AAEpD,OAAO,EAAS,UAAU,EAAE,wBAA+B;AAI3D,KAAK,SAAS,GAAG;IACf,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,GAAG,UAAU,CAAA;AAKd,eAAO,MAAM,IAAI,UAAW,SAAS,qDA2BpC,CAAA"}

package/dist/components/hint/Hint.js

@@ -4,14 +4,16 @@ import '../layout/Box/Box.js';
 import '@emotion/react';
 import { Flex } from '../layout/Flex/Flex.js';
 import { Paper } from '../layout/Paper/Paper.js';
-import '../layout/Popup/Popup.js';
-import { Text } from '../text/Text/Text.js';
+import { Text } from '../text/Text.js';
+import { IconQuestionCircle } from '../../icons/utilityIcons.js';
+import 'react';
+import '@emotion/css';
 
 /*
  * A way of informing the user of important details in line in a prominent way.
  */
 var Hint = function (props) {
-    var Icon = props.icon, children = props.children, actions = props.actions, other = __rest(props, ["icon", "children", "actions"]);
+    var _a = props.icon, Icon = _a === void 0 ? IconQuestionCircle : _a, children = props.children, actions = props.actions, other = __rest(props, ["icon", "children", "actions"]);
     return (jsxs(Paper, __assign({ role: 'alert', backgroundColor: 'surface2', ph: 'l', pv: 'm', direction: 'column', gap: 'm', shadow: 'flat', border: 'strong' }, other, { children: [jsxs(Flex, __assign({ gap: 'l', alignItems: 'center' }, { children: [jsx(Icon, { size: 'l', color: 'default' }), jsx(Text, __assign({ variant: 'body', color: 'default' }, { children: children }))] })), actions ? (jsx(Flex, __assign({ pl: 'unit10', gap: 'l' }, { children: actions }))) : null] })));
 };
 

package/dist/components/hint/Hint.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hint.js","sources":["../../../src/components/hint/Hint.tsx"],"sourcesContent":["import { ReactNode } from 'react'\n\nimport type { IconComponent } from 'components/icon'\nimport { Flex } from 'components/layout'\nimport { Paper, PaperProps } from 'components/layout/Paper'\nimport { Text } from 'components/text'\n\ntype HintProps = {\n  icon: IconComponent\n  actions?: ReactNode\n} & PaperProps\n\n/*\n * A way of informing the user of important details in line in a prominent way.\n */\nexport const Hint = (props: HintProps) => {\n  const { icon: Icon, children, actions, ...other } = props\n  return (\n    <Paper\n      role='alert'\n      backgroundColor='surface2'\n      ph='l'\n      pv='m'\n      direction='column'\n      gap='m'\n      shadow='flat'\n      border='strong'\n      {...other}\n    >\n      <Flex gap='l' alignItems='center'>\n        <Icon size='l' color='default' />\n        <Text variant='body' color='default'>\n          {children}\n        </Text>\n      </Flex>\n      {actions ? (\n        <Flex pl='unit10' gap='l'>\n          {actions}\n        </Flex>\n      ) : null}\n    </Paper>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAYA;;AAEG;AACI,IAAM,IAAI,GAAG,UAAC,KAAgB,EAAA;IAC3B,IAAM,IAAI,GAAkC,KAAK,CAAA,IAAvC,EAAE,QAAQ,GAAwB,KAAK,CAA7B,QAAA,EAAE,OAAO,GAAe,KAAK,QAApB,EAAK,KAAK,UAAK,KAAK,EAAnD,CAA2C,MAAA,EAAA,UAAA,EAAA,SAAA,CAAA,CAAF,CAAU;IACzD,QACEA,KAAC,KAAK,EAAA,QAAA,CAAA,EACJ,IAAI,EAAC,OAAO,EACZ,eAAe,EAAC,UAAU,EAC1B,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAC,GAAG,EACP,MAAM,EAAC,MAAM,EACb,MAAM,EAAC,QAAQ,EACX,EAAA,KAAK,eAETA,IAAC,CAAA,IAAI,aAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAC/B,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAG,CAAA,EACjCA,GAAC,CAAA,IAAI,aAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAA,EAAA,EAAA,QAAA,EACjC,QAAQ,EAAA,CAAA,CACJ,CACF,EAAA,CAAA,CAAA,EACN,OAAO,IACNA,GAAA,CAAC,IAAI,EAAC,QAAA,CAAA,EAAA,EAAE,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,EAAA,EAAA,EAAA,QAAA,EACtB,OAAO,EAAA,CAAA,CACH,IACL,IAAI,CACF,EAAA,CAAA,CAAA,EACT;AACH;;;;"}
+{"version":3,"file":"Hint.js","sources":["../../../src/components/hint/Hint.tsx"],"sourcesContent":["import { ReactNode } from 'react'\n\nimport type { IconComponent } from 'components/icon'\nimport { Flex } from 'components/layout'\nimport { Paper, PaperProps } from 'components/layout/Paper'\nimport { Text } from 'components/text'\nimport { IconQuestionCircle } from 'icons'\n\ntype HintProps = {\n  icon?: IconComponent\n  actions?: ReactNode\n} & PaperProps\n\n/*\n * A way of informing the user of important details in line in a prominent way.\n */\nexport const Hint = (props: HintProps) => {\n  const { icon: Icon = IconQuestionCircle, children, actions, ...other } = props\n  return (\n    <Paper\n      role='alert'\n      backgroundColor='surface2'\n      ph='l'\n      pv='m'\n      direction='column'\n      gap='m'\n      shadow='flat'\n      border='strong'\n      {...other}\n    >\n      <Flex gap='l' alignItems='center'>\n        <Icon size='l' color='default' />\n        <Text variant='body' color='default'>\n          {children}\n        </Text>\n      </Flex>\n      {actions ? (\n        <Flex pl='unit10' gap='l'>\n          {actions}\n        </Flex>\n      ) : null}\n    </Paper>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAaA;;AAEG;AACI,IAAM,IAAI,GAAG,UAAC,KAAgB,EAAA;IAC3B,IAAA,EAAA,GAAiE,KAAK,CAAA,IAAvC,EAAzB,IAAI,mBAAG,kBAAkB,GAAA,EAAA,EAAE,QAAQ,GAAwB,KAAK,SAA7B,EAAE,OAAO,GAAe,KAAK,CAApB,OAAA,EAAK,KAAK,GAAA,MAAA,CAAK,KAAK,EAAxE,CAAgE,MAAA,EAAA,UAAA,EAAA,SAAA,CAAA,CAAF,CAAU;IAC9E,QACEA,KAAC,KAAK,EAAA,QAAA,CAAA,EACJ,IAAI,EAAC,OAAO,EACZ,eAAe,EAAC,UAAU,EAC1B,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAC,GAAG,EACP,MAAM,EAAC,MAAM,EACb,MAAM,EAAC,QAAQ,EACX,EAAA,KAAK,eAETA,IAAC,CAAA,IAAI,aAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAC/B,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAG,CAAA,EACjCA,GAAC,CAAA,IAAI,aAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAA,EAAA,EAAA,QAAA,EACjC,QAAQ,EAAA,CAAA,CACJ,CACF,EAAA,CAAA,CAAA,EACN,OAAO,IACNA,GAAA,CAAC,IAAI,EAAC,QAAA,CAAA,EAAA,EAAE,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,EAAA,EAAA,EAAA,QAAA,EACtB,OAAO,EAAA,CAAA,CACH,IACL,IAAI,CACF,EAAA,CAAA,CAAA,EACT;AACH;;;;"}

package/dist/components/icon.d.ts

@@ -11,6 +11,7 @@ export type IconProps = {
     height?: number;
     width?: number;
     shadow?: ShadowOptions;
+    title?: string;
 };
 type SVGIconProps = SVGBaseProps & IconProps;
 export type IconComponent = ComponentType<SVGBaseProps | SVGIconProps>;

package/dist/components/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/components/icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEjD,KAAK,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;AAE3C,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,aAAa,CAAA;CACvB,CAAA;AAED,KAAK,YAAY,GAAG,YAAY,GAAG,SAAS,CAAA;AAE5C,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,YAAY,GAAG,YAAY,CAAC,CAAA"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/components/icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEjD,KAAK,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;AAE3C,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,KAAK,YAAY,GAAG,YAAY,GAAG,SAAS,CAAA;AAE5C,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,YAAY,GAAG,YAAY,CAAC,CAAA"}

package/dist/components/index.d.ts

@@ -13,8 +13,15 @@ export * from './segmented-control';
 export * from './scrollbar';
 export * from './radio';
 export * from './radio-group';
+export * from './popup';
 export * from './popup-menu';
 export * from './modal';
 export * from './progress-bar';
 export * from './scrubber';
+export * from './skeleton';
+export * from './artwork';
+export * from './music-badge';
+export { default as LoadingSpinner } from './loading-spinner/LoadingSpinner';
+export * from './pill';
+export * from './common/HiddenInput';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAC5E,cAAc,QAAQ,CAAA;AACtB,cAAc,sBAAsB,CAAA"}

package/dist/components/input/PasswordInput/PasswordInput.js

@@ -9,7 +9,9 @@ import '@emotion/react';
 import '@emotion/css';
 import '../../button/FollowButton/FollowButton.js';
 import '../../button/FilterButton/FilterButton.js';
+import '../../button/OptionsFilterButton/OptionsFilterButton.js';
 import { IconButton } from '../../button/IconButton/IconButton.js';
+import '../../button/UnstyledButton.js';
 import { TextInput } from '../TextInput/TextInput.js';
 import '../TextInput/types.js';
 

package/dist/components/input/PasswordInput/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","sources":["../../../../src/components/input/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { useToggle } from 'react-use'\n\nimport { IconButton } from 'components/button'\nimport { IconVisibilityHidden, IconVisibilityPublic } from 'icons'\n\nimport { TextInput } from '../TextInput'\n\nimport type { PasswordInputProps } from './types'\n\nconst messages = {\n  hidePasswordInput: 'Hide password input',\n  showPasswordInput: 'Show password input'\n}\n\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  (props, ref) => {\n    const { hideVisibilityToggle, ...restProps } = props\n    const [isPasswordVisible, toggleIsPasswordVisible] = useToggle(false)\n    const VisibilityIcon = isPasswordVisible\n      ? IconVisibilityPublic\n      : IconVisibilityHidden\n\n    return (\n      <TextInput\n        ref={ref}\n        type={isPasswordVisible ? 'text' : 'password'}\n        endAdornment={\n          hideVisibilityToggle ? null : (\n            <IconButton\n              icon={VisibilityIcon}\n              color='subdued'\n              onClick={toggleIsPasswordVisible}\n              aria-label={\n                isPasswordVisible\n                  ? messages.hidePasswordInput\n                  : messages.showPasswordInput\n              }\n              ripple\n            />\n          )\n        }\n        {...restProps}\n      />\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;AAWA,IAAM,QAAQ,GAAG;AACf,IAAA,iBAAiB,EAAE,qBAAqB;AACxC,IAAA,iBAAiB,EAAE,qBAAqB;CACzC,CAAA;IAEY,aAAa,GAAG,UAAU,CACrC,UAAC,KAAK,EAAE,GAAG,EAAA;IACD,IAAA,oBAAoB,GAAmB,KAAK,CAAxB,oBAAA,EAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAA9C,CAAsC,sBAAA,CAAA,CAAF,CAAU;IAC9C,IAAA,EAAA,GAA+C,SAAS,CAAC,KAAK,CAAC,EAA9D,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,uBAAuB,GAAA,EAAA,CAAA,CAAA,CAAoB,CAAA;IACrE,IAAM,cAAc,GAAG,iBAAiB;AACtC,UAAE,oBAAoB;UACpB,oBAAoB,CAAA;IAExB,QACEA,IAAC,SAAS,EAAA,QAAA,CAAA,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,iBAAiB,GAAG,MAAM,GAAG,UAAU,EAC7C,YAAY,EACV,oBAAoB,GAAG,IAAI,IACzBA,GAAA,CAAC,UAAU,EACT,EAAA,IAAI,EAAE,cAAc,EACpB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,uBAAuB,EAAA,YAAA,EAE9B,iBAAiB;kBACb,QAAQ,CAAC,iBAAiB;AAC5B,kBAAE,QAAQ,CAAC,iBAAiB,EAEhC,MAAM,EACN,IAAA,EAAA,CAAA,CACH,EAEC,EAAA,SAAS,CACb,CAAA,EACH;AACH,CAAC;;;;"}
+{"version":3,"file":"PasswordInput.js","sources":["../../../../src/components/input/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { useToggle } from 'react-use'\n\nimport { IconButton } from 'components/button'\nimport { IconVisibilityHidden, IconVisibilityPublic } from 'icons'\n\nimport { TextInput } from '../TextInput'\n\nimport type { PasswordInputProps } from './types'\n\nconst messages = {\n  hidePasswordInput: 'Hide password input',\n  showPasswordInput: 'Show password input'\n}\n\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  (props, ref) => {\n    const { hideVisibilityToggle, ...restProps } = props\n    const [isPasswordVisible, toggleIsPasswordVisible] = useToggle(false)\n    const VisibilityIcon = isPasswordVisible\n      ? IconVisibilityPublic\n      : IconVisibilityHidden\n\n    return (\n      <TextInput\n        ref={ref}\n        type={isPasswordVisible ? 'text' : 'password'}\n        endAdornment={\n          hideVisibilityToggle ? null : (\n            <IconButton\n              icon={VisibilityIcon}\n              color='subdued'\n              onClick={toggleIsPasswordVisible}\n              aria-label={\n                isPasswordVisible\n                  ? messages.hidePasswordInput\n                  : messages.showPasswordInput\n              }\n              ripple\n            />\n          )\n        }\n        {...restProps}\n      />\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;AAWA,IAAM,QAAQ,GAAG;AACf,IAAA,iBAAiB,EAAE,qBAAqB;AACxC,IAAA,iBAAiB,EAAE,qBAAqB;CACzC,CAAA;IAEY,aAAa,GAAG,UAAU,CACrC,UAAC,KAAK,EAAE,GAAG,EAAA;IACD,IAAA,oBAAoB,GAAmB,KAAK,CAAxB,oBAAA,EAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAA9C,CAAsC,sBAAA,CAAA,CAAF,CAAU;IAC9C,IAAA,EAAA,GAA+C,SAAS,CAAC,KAAK,CAAC,EAA9D,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,uBAAuB,GAAA,EAAA,CAAA,CAAA,CAAoB,CAAA;IACrE,IAAM,cAAc,GAAG,iBAAiB;AACtC,UAAE,oBAAoB;UACpB,oBAAoB,CAAA;IAExB,QACEA,IAAC,SAAS,EAAA,QAAA,CAAA,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,iBAAiB,GAAG,MAAM,GAAG,UAAU,EAC7C,YAAY,EACV,oBAAoB,GAAG,IAAI,IACzBA,GAAA,CAAC,UAAU,EACT,EAAA,IAAI,EAAE,cAAc,EACpB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,uBAAuB,EAAA,YAAA,EAE9B,iBAAiB;kBACb,QAAQ,CAAC,iBAAiB;AAC5B,kBAAE,QAAQ,CAAC,iBAAiB,EAEhC,MAAM,EACN,IAAA,EAAA,CAAA,CACH,EAEC,EAAA,SAAS,CACb,CAAA,EACH;AACH,CAAC;;;;"}

package/dist/components/input/SelectablePill/SelectablePill.js

@@ -3,7 +3,7 @@ import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 import { useTheme } from '@emotion/react';
 import { HiddenInput } from '../../common/HiddenInput.js';
 import { useRadioGroup } from '../../radio-group/useRadioGroup.js';
-import { Text } from '../../text/Text/Text.js';
+import { Text } from '../../text/Text.js';
 
 var RadioInput = function (props) {
     var _a = useRadioGroup(props), name = _a.name, checked = _a.checked, onChange = _a.onChange;
@@ -26,7 +26,7 @@ var SelectablePill = function (props) {
     var activeCss = __assign({ backgroundColor: theme.color.secondary.s400, color: theme.color.static.white, border: "1px solid ".concat(theme.color.secondary.s400) }, (size === 'large' && {
         boxShadow: 'none'
     }));
-    var rootCss = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ display: 'inline-flex', position: 'relative', alignItems: 'center', justifyContent: 'center', gap: theme.spacing.xs, color: theme.color.text.default, backgroundColor: theme.color.background.white, cursor: 'pointer', userSelect: 'none', transition: 'all 0.12s ease-out', textWrap: 'nowrap', border: "1px solid ".concat(theme.color.border.strong), borderRadius: theme.cornerRadius['2xl'] }, (size === 'small' && {
+    var rootCss = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ display: 'inline-flex', position: 'relative', alignItems: 'center', justifyContent: 'center', gap: theme.spacing.s, color: theme.color.text.default, backgroundColor: theme.color.background.white, cursor: 'pointer', userSelect: 'none', transition: 'all 0.12s ease-out', textWrap: 'nowrap', border: "1px solid ".concat(theme.color.border.strong), borderRadius: theme.cornerRadius['2xl'] }, (size === 'small' && {
         height: theme.spacing.xl,
         paddingInline: theme.spacing.m
     })), (size === 'large' && {