@audius/harmony 0.0.34 → 0.1.0

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

@@ -13,8 +13,8 @@ export declare const BaseButton: (props: {
     minWidth?: number | undefined;
     fullWidth?: boolean | undefined;
     styles?: {
-        button: CSSObject;
-        icon: CSSObject;
+        button?: CSSObject | undefined;
+        icon?: CSSObject | undefined;
     } | undefined;
     asChild?: boolean | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {

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

@@ -4,8 +4,8 @@ import type { IconComponent } from '../../icon';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'destructive';
 export type ButtonSize = 'small' | 'default' | 'large';
 type BaseButtonStyles = {
-    button: CSSObject;
-    icon: CSSObject;
+    button?: CSSObject;
+    icon?: CSSObject;
 };
 export type HTMLButtonProps = ComponentPropsWithoutRef<'button'>;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/BaseButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,CAAA;AAEhF,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;AAEtD,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,SAAS,CAAA;IACjB,IAAI,EAAE,SAAS,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAA;AAEhE;;;KAGK;AACL,KAAK,aAAa,GAAG;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAE/B;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAEhC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAA;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,eAAe,GACjB,aAAa,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/BaseButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,CAAA;AAEhF,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;AAEtD,KAAK,gBAAgB,GAAG;IACtB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAA;AAEhE;;;KAGK;AACL,KAAK,aAAa,GAAG;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAE/B;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAEhC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAA;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,eAAe,GACjB,aAAa,CAAA"}

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

@@ -6,7 +6,7 @@
  * a delete operation.
  */
 export declare const Button: (props: {
-    color?: "white" | "background" | "blue" | "orange" | "red" | "darkRed" | "green" | "lightGreen" | "gradient" | undefined;
+    color?: "white" | "background" | "blue" | "orange" | "red" | "darkRed" | "green" | "lightGreen" | "trendingBlue" | "aiGreen" | "gradient" | undefined;
     hexColor?: `#${string}` | undefined;
     variant?: import("./types").ButtonVariant | undefined;
     size?: import("./types").ButtonSize | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"FilterButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FilterButton/FilterButton.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAsB,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAE/D,eAAO,MAAM,YAAY,gLAmNxB,CAAA"}
+{"version":3,"file":"FilterButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FilterButton/FilterButton.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAE3C,eAAO,MAAM,YAAY,gLAkLxB,CAAA"}

package/dist/components/button/FilterButton/FilterButton.js

@@ -1,29 +1,28 @@
 import { __assign } from '../../../_virtual/_tslib.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { forwardRef, useState, useCallback, useRef } from 'react';
+import { jsxs } from '@emotion/react/jsx-runtime';
+import { forwardRef, useState, useCallback, useEffect, useRef } from 'react';
 import { useTheme } from '@emotion/react';
 import { BaseButton } from '../BaseButton/BaseButton.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 { IconCloseAlt, IconCaretDown } from '../../../icons/utilityIcons.js';
+import { IconCloseAlt } from '../../../icons/utilityIcons.js';
 import '@emotion/css';
 
 var FilterButton = forwardRef(function FilterButton(props, ref) {
-    var _a, _b;
-    var selectionProp = props.selection, label = props.label, options = props.options, onSelect = props.onSelect, disabled = props.disabled, _c = props.variant, variant = _c === void 0 ? 'fillContainer' : _c, _d = props.size, size = _d === void 0 ? 'default' : _d, _e = props.iconRight, iconRight = _e === void 0 ? IconCaretDown : _e, popupAnchorOrigin = props.popupAnchorOrigin, popupTransformOrigin = props.popupTransformOrigin, popupPortalLocation = props.popupPortalLocation, popupZIndex = props.popupZIndex;
-    var _f = useTheme(), color = _f.color, cornerRadius = _f.cornerRadius, spacing = _f.spacing, typography = _f.typography;
-    var _g = useControlled({
-        controlledProp: selectionProp,
+    var valueProp = props.value, children = props.children, labelProp = props.label, onChange = props.onChange, onClick = props.onClick, onOpen = props.onOpen, onReset = props.onReset, disabled = props.disabled, _a = props.variant, variant = _a === void 0 ? 'fillContainer' : _a, _b = props.size, size = _b === void 0 ? 'default' : _b, iconRight = props.iconRight;
+    var _c = useTheme(), color = _c.color, cornerRadius = _c.cornerRadius, spacing = _c.spacing, typography = _c.typography;
+    var _d = useControlled({
+        controlledProp: valueProp,
         defaultValue: null,
-        stateName: 'selection',
+        stateName: 'value',
         componentName: 'FilterButton'
-    }), selection = _g[0], setSelection = _g[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 _h = useState(false), isOpen = _h[0], setIsOpen = _h[1];
+    }), value = _d[0], setValue = _d[1];
+    var _e = useControlled({
+        controlledProp: labelProp,
+        defaultValue: null,
+        stateName: 'label',
+        componentName: 'FilterButton'
+    }), label = _e[0], setLabel = _e[1];
+    var _f = useState(false), isOpen = _f[0], setIsOpen = _f[1];
     // Size Styles
     var defaultStyles = {
         paddingLeft: spacing.m,
@@ -53,76 +52,71 @@ var FilterButton = forwardRef(function FilterButton(props, ref) {
             transform: 'none'
         }
     };
-    var activeStyle = variant !== 'fillContainer' || selection === null
+    var activeStyle = variant !== 'fillContainer' || value === null
         ? {
             border: "1px solid ".concat(color.border.strong),
             background: color.background.surface2
         }
         : {};
+    var hoverStyle = {
+        border: "1px solid ".concat(color.neutral.n800),
+        transform: 'none'
+    };
     // Button Styles
-    var buttonCss = __assign(__assign(__assign({ background: 'transparent', border: "1px solid ".concat(color.border.strong), borderRadius: cornerRadius.s, color: variant === 'fillContainer' && selection !== null
+    var buttonCss = __assign(__assign(__assign({ background: 'transparent', border: "1px solid ".concat(color.border.strong), borderRadius: cornerRadius.s, color: variant === 'fillContainer' && value !== null
             ? color.static.white
-            : color.text.default, gap: spacing.xs, fontSize: typography.size.s, fontWeight: typography.weight.demiBold, lineHeight: typography.lineHeight.s, opacity: disabled ? 0.6 : 1, '&:hover': {
-            border: "1px solid ".concat(color.neutral.n800),
-            transform: 'none'
-        }, '&:active': __assign(__assign({}, activeStyle), { transform: 'none' }) }, (size === 'small' ? smallStyles : defaultStyles)), (isOpen ? activeStyle : {})), (variant === 'fillContainer' && selection !== null
+            : color.text.default, gap: spacing.xs, fontSize: typography.size.s, fontWeight: typography.weight.demiBold, lineHeight: typography.lineHeight.s, opacity: disabled ? 0.6 : 1, '&:hover': hoverStyle, '&:focus': hoverStyle, '&:active': __assign(__assign({}, activeStyle), { transform: 'none' }) }, (size === 'small' ? smallStyles : defaultStyles)), (isOpen ? activeStyle : {})), (variant === 'fillContainer' && value !== null
         ? fillContainerStyles
         : {}));
     var iconCss = size === 'small' ? smallIconStyles : defaultIconStyles;
-    // Popup Styles
-    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': {
-            transform: 'none',
-            backgroundColor: color.secondary.s300,
-            color: color.special.white
-        },
-        '&:active': {
-            transform: 'none'
-        }
-    };
-    var optionIconCss = {
-        width: spacing.unit4,
-        height: spacing.unit4
-    };
     var handleButtonClick = useCallback(function () {
-        if (variant === 'fillContainer' && selection !== null) {
-            setSelection(null);
-            // @ts-ignore
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(null);
+        if (onClick) {
+            onClick();
         }
         else {
-            setIsOpen(function (isOpen) { return !isOpen; });
+            if (variant === 'fillContainer' && value !== null) {
+                setValue(null);
+                setLabel(null);
+                // @ts-ignore
+                onChange === null || onChange === void 0 ? void 0 : onChange(null);
+                onReset === null || onReset === void 0 ? void 0 : onReset();
+            }
+            else {
+                setIsOpen(function (isOpen) { return !isOpen; });
+            }
+        }
+    }, [
+        value,
+        variant,
+        setIsOpen,
+        setValue,
+        setLabel,
+        onChange,
+        onClick,
+        onReset
+    ]);
+    useEffect(function () {
+        if (isOpen) {
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
         }
-    }, [selection, variant, setIsOpen, setSelection, onSelect]);
-    var handleOptionSelect = useCallback(function (option) {
-        setSelection(option.value);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(option.value);
-    }, [onSelect, setSelection]);
+    }, [isOpen, onOpen]);
+    var handleChange = useCallback(function (value, label) {
+        setValue(value);
+        setLabel(label);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }, [onChange, setValue, setLabel]);
     var anchorRef = useRef(null);
     return (jsxs(BaseButton, __assign({ ref: ref || anchorRef, styles: {
             button: buttonCss,
             icon: iconCss
-        }, onClick: handleButtonClick, iconRight: variant === 'fillContainer' && selection !== null
+        }, onClick: handleButtonClick, iconRight: variant === 'fillContainer' && value !== null
             ? IconCloseAlt
-            : iconRight, disabled: disabled, "aria-haspopup": 'listbox', "aria-expanded": isOpen }, { children: [selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : label, jsx(Popup, __assign({ anchorRef: ref || anchorRef, isVisible: isOpen, onClose: function () { return setIsOpen(false); }, anchorOrigin: popupAnchorOrigin, transformOrigin: popupTransformOrigin, portalLocation: popupPortalLocation, zIndex: popupZIndex }, { children: jsx(Paper, __assign({ mt: 's', border: 'strong', shadow: 'far' }, { children: jsx(Box, __assign({ p: 's' }, { children: jsx(Flex, __assign({ direction: 'column', alignItems: 'flex-start', justifyContent: 'center', role: 'listbox', "aria-label": (_b = selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : label) !== null && _b !== void 0 ? _b : props['aria-label'], "aria-activedescendant": selectedLabel }, { children: options.map(function (option) {
-                                var _a, _b;
-                                return (jsx(BaseButton, __assign({ iconLeft: option.icon, styles: {
-                                        button: optionCss,
-                                        icon: optionIconCss
-                                    }, onClick: function () { return handleOptionSelect(option); }, "aria-label": (_a = option.label) !== null && _a !== void 0 ? _a : option.value, role: 'option' }, { children: (_b = option.label) !== null && _b !== void 0 ? _b : option.value }), option.value));
-                            }) })) })) })) }))] })));
+            : iconRight, disabled: disabled, "aria-haspopup": 'listbox', "aria-expanded": isOpen }, { children: [label, children === null || children === void 0 ? void 0 : children({
+                isOpen: isOpen,
+                setIsOpen: setIsOpen,
+                handleChange: handleChange,
+                anchorRef: anchorRef
+            })] })));
 });
 
 export { FilterButton };

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

@@ -1 +1 @@
-{"version":3,"file":"FilterButton.js","sources":["../../../../src/components/button/FilterButton/FilterButton.tsx"],"sourcesContent":["import { forwardRef, RefObject, useRef, useState, useCallback } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { BaseButton } from 'components/button/BaseButton/BaseButton'\nimport { Box, Flex, Paper } from 'components/layout'\nimport { Popup } from 'components/popup'\nimport { useControlled } from 'hooks/useControlled'\nimport { IconCaretDown, IconCloseAlt } from 'icons'\n\nimport { FilterButtonOption, FilterButtonProps } from './types'\n\nexport const FilterButton = forwardRef<HTMLButtonElement, FilterButtonProps>(\n  function FilterButton(props, ref) {\n    const {\n      selection: selectionProp,\n      label,\n      options,\n      onSelect,\n      disabled,\n      variant = 'fillContainer',\n      size = 'default',\n      iconRight = IconCaretDown,\n      popupAnchorOrigin,\n      popupTransformOrigin,\n      popupPortalLocation,\n      popupZIndex\n    } = props\n    const { color, cornerRadius, spacing, typography } = useTheme()\n    const [selection, setSelection] = useControlled({\n      controlledProp: selectionProp,\n      defaultValue: null,\n      stateName: 'selection',\n      componentName: 'FilterButton'\n    })\n    const selectedOption = options.find((option) => option.value === selection)\n    const selectedLabel = selectedOption?.label ?? selectedOption?.value\n\n    const [isOpen, setIsOpen] = useState(false)\n\n    // Size Styles\n    const defaultStyles: CSSObject = {\n      paddingLeft: spacing.m,\n      paddingRight: spacing.m,\n      paddingTop: spacing.s,\n      paddingBottom: spacing.s\n    }\n    const defaultIconStyles: CSSObject = {\n      width: spacing.unit4,\n      height: spacing.unit4\n    }\n\n    const smallStyles: CSSObject = {\n      paddingLeft: spacing.m,\n      paddingRight: spacing.m,\n      paddingTop: spacing.xs,\n      paddingBottom: spacing.xs\n    }\n    const smallIconStyles: CSSObject = {\n      width: spacing.unit3,\n      height: spacing.unit3\n    }\n\n    const fillContainerStyles: CSSObject = {\n      background: color.secondary.s400,\n      border: `1px solid ${color.secondary.s400}`,\n      '&:hover': {\n        border: `1px solid ${color.secondary.s400}`,\n        transform: 'none'\n      }\n    }\n\n    const activeStyle =\n      variant !== 'fillContainer' || selection === null\n        ? {\n            border: `1px solid ${color.border.strong}`,\n            background: color.background.surface2\n          }\n        : {}\n\n    // Button Styles\n    const buttonCss: CSSObject = {\n      background: 'transparent',\n      border: `1px solid ${color.border.strong}`,\n      borderRadius: cornerRadius.s,\n      color:\n        variant === 'fillContainer' && selection !== null\n          ? color.static.white\n          : color.text.default,\n      gap: spacing.xs,\n      fontSize: typography.size.s,\n      fontWeight: typography.weight.demiBold,\n      lineHeight: typography.lineHeight.s,\n      opacity: disabled ? 0.6 : 1,\n\n      '&:hover': {\n        border: `1px solid ${color.neutral.n800}`,\n        transform: 'none'\n      },\n\n      '&:active': {\n        ...activeStyle,\n        transform: 'none'\n      },\n\n      ...(size === 'small' ? smallStyles : defaultStyles),\n      ...(isOpen ? activeStyle : {}),\n      ...(variant === 'fillContainer' && selection !== null\n        ? fillContainerStyles\n        : {})\n    }\n\n    const iconCss = size === 'small' ? smallIconStyles : defaultIconStyles\n\n    // Popup Styles\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': {\n        transform: 'none',\n        backgroundColor: color.secondary.s300,\n        color: color.special.white\n      },\n\n      '&:active': {\n        transform: 'none'\n      }\n    }\n    const optionIconCss: CSSObject = {\n      width: spacing.unit4,\n      height: spacing.unit4\n    }\n\n    const handleButtonClick = useCallback(() => {\n      if (variant === 'fillContainer' && selection !== null) {\n        setSelection(null)\n        // @ts-ignore\n        onSelect?.(null)\n      } else {\n        setIsOpen((isOpen: boolean) => !isOpen)\n      }\n    }, [selection, variant, setIsOpen, setSelection, onSelect])\n\n    const handleOptionSelect = useCallback(\n      (option: FilterButtonOption) => {\n        setSelection(option.value)\n        onSelect?.(option.value)\n      },\n      [onSelect, setSelection]\n    )\n\n    const anchorRef = useRef<HTMLButtonElement>(null)\n\n    return (\n      <BaseButton\n        ref={ref || anchorRef}\n        styles={{\n          button: buttonCss,\n          icon: iconCss\n        }}\n        onClick={handleButtonClick}\n        iconRight={\n          variant === 'fillContainer' && selection !== null\n            ? IconCloseAlt\n            : iconRight\n        }\n        disabled={disabled}\n        aria-haspopup='listbox'\n        aria-expanded={isOpen}\n      >\n        {selectedLabel ?? label}\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        >\n          <Paper mt='s' border='strong' shadow='far'>\n            <Box p='s'>\n              <Flex\n                direction='column'\n                alignItems='flex-start'\n                justifyContent='center'\n                role='listbox'\n                aria-label={selectedLabel ?? label ?? props['aria-label']}\n                aria-activedescendant={selectedLabel}\n              >\n                {options.map((option) => (\n                  <BaseButton\n                    key={option.value}\n                    iconLeft={option.icon}\n                    styles={{\n                      button: optionCss,\n                      icon: optionIconCss\n                    }}\n                    onClick={() => handleOptionSelect(option)}\n                    aria-label={option.label ?? option.value}\n                    role='option'\n                  >\n                    {option.label ?? option.value}\n                  </BaseButton>\n                ))}\n              </Flex>\n            </Box>\n          </Paper>\n        </Popup>\n      </BaseButton>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;AAYa,IAAA,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG,EAAA;;AAE5B,IAAA,IAAW,aAAa,GAYtB,KAAK,CAAA,SAZiB,EACxB,KAAK,GAWH,KAAK,CAAA,KAXF,EACL,OAAO,GAUL,KAAK,QAVA,EACP,QAAQ,GASN,KAAK,CATC,QAAA,EACR,QAAQ,GAQN,KAAK,CARC,QAAA,EACR,EAOE,GAAA,KAAK,QAPkB,EAAzB,OAAO,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,eAAe,KAAA,EACzB,EAAA,GAME,KAAK,CAAA,IANS,EAAhB,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,SAAS,KAAA,EAChB,EAAA,GAKE,KAAK,CAAA,SALkB,EAAzB,SAAS,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,aAAa,GAAA,EAAA,EACzB,iBAAiB,GAIf,KAAK,CAAA,iBAJU,EACjB,oBAAoB,GAGlB,KAAK,qBAHa,EACpB,mBAAmB,GAEjB,KAAK,oBAFY,EACnB,WAAW,GACT,KAAK,YADI,CACJ;AACH,IAAA,IAAA,EAA+C,GAAA,QAAQ,EAAE,EAAvD,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,UAAU,gBAAe,CAAA;IACzD,IAAA,EAAA,GAA4B,aAAa,CAAC;AAC9C,QAAA,cAAc,EAAE,aAAa;AAC7B,QAAA,YAAY,EAAE,IAAI;AAClB,QAAA,SAAS,EAAE,WAAW;AACtB,QAAA,aAAa,EAAE,cAAc;AAC9B,KAAA,CAAC,EALK,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,QAK5B,CAAA;AACF,IAAA,IAAM,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,UAAC,MAAM,EAAA,EAAK,OAAA,MAAM,CAAC,KAAK,KAAK,SAAS,CAA1B,EAA0B,CAAC,CAAA;AAC3E,IAAA,IAAM,aAAa,GAAG,CAAA,EAAA,GAAA,cAAc,KAAd,IAAA,IAAA,cAAc,uBAAd,cAAc,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,cAAc,KAAd,IAAA,IAAA,cAAc,uBAAd,cAAc,CAAE,KAAK,CAAA;IAE9D,IAAA,EAAA,GAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,SAAS,GAAA,EAAA,CAAA,CAAA,CAAmB,CAAA;;AAG3C,IAAA,IAAM,aAAa,GAAc;QAC/B,WAAW,EAAE,OAAO,CAAC,CAAC;QACtB,YAAY,EAAE,OAAO,CAAC,CAAC;QACvB,UAAU,EAAE,OAAO,CAAC,CAAC;QACrB,aAAa,EAAE,OAAO,CAAC,CAAC;KACzB,CAAA;AACD,IAAA,IAAM,iBAAiB,GAAc;QACnC,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,OAAO,CAAC,KAAK;KACtB,CAAA;AAED,IAAA,IAAM,WAAW,GAAc;QAC7B,WAAW,EAAE,OAAO,CAAC,CAAC;QACtB,YAAY,EAAE,OAAO,CAAC,CAAC;QACvB,UAAU,EAAE,OAAO,CAAC,EAAE;QACtB,aAAa,EAAE,OAAO,CAAC,EAAE;KAC1B,CAAA;AACD,IAAA,IAAM,eAAe,GAAc;QACjC,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,OAAO,CAAC,KAAK;KACtB,CAAA;AAED,IAAA,IAAM,mBAAmB,GAAc;AACrC,QAAA,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI;AAChC,QAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,SAAS,CAAC,IAAI,CAAE;AAC3C,QAAA,SAAS,EAAE;AACT,YAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,SAAS,CAAC,IAAI,CAAE;AAC3C,YAAA,SAAS,EAAE,MAAM;AAClB,SAAA;KACF,CAAA;IAED,IAAM,WAAW,GACf,OAAO,KAAK,eAAe,IAAI,SAAS,KAAK,IAAI;AAC/C,UAAE;AACE,YAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAE;AAC1C,YAAA,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;AACtC,SAAA;UACD,EAAE,CAAA;;AAGR,IAAA,IAAM,SAAS,GAAA,QAAA,CAAA,QAAA,CAAA,QAAA,CAAA,EACb,UAAU,EAAE,aAAa,EACzB,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAE,EAC1C,YAAY,EAAE,YAAY,CAAC,CAAC,EAC5B,KAAK,EACH,OAAO,KAAK,eAAe,IAAI,SAAS,KAAK,IAAI;AAC/C,cAAE,KAAK,CAAC,MAAM,CAAC,KAAK;cAClB,KAAK,CAAC,IAAI,CAAC,OAAO,EACxB,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,EAC3B,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ,EACtC,UAAU,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,EACnC,OAAO,EAAE,QAAQ,GAAG,GAAG,GAAG,CAAC,EAE3B,SAAS,EAAE;AACT,YAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,OAAO,CAAC,IAAI,CAAE;AACzC,YAAA,SAAS,EAAE,MAAM;AAClB,SAAA,EAED,UAAU,EACL,QAAA,CAAA,QAAA,CAAA,EAAA,EAAA,WAAW,KACd,SAAS,EAAE,MAAM,EAGhB,CAAA,EAAA,GAAC,IAAI,KAAK,OAAO,GAAG,WAAW,GAAG,aAAa,EAAC,GAC/C,MAAM,GAAG,WAAW,GAAG,EAAE,EAAC,GAC1B,OAAO,KAAK,eAAe,IAAI,SAAS,KAAK,IAAI;AACnD,UAAE,mBAAmB;AACrB,UAAE,EAAE,EACP,CAAA;AAED,IAAA,IAAM,OAAO,GAAG,IAAI,KAAK,OAAO,GAAG,eAAe,GAAG,iBAAiB,CAAA;;AAGtE,IAAA,IAAM,SAAS,GAAc;AAC3B,QAAA,UAAU,EAAE,aAAa;AACzB,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO;AACzB,QAAA,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM;QACpC,GAAG,EAAE,OAAO,CAAC,CAAC;QACd,WAAW,EAAE,OAAO,CAAC,CAAC;QACtB,YAAY,EAAE,OAAO,CAAC,CAAC;QACvB,UAAU,EAAE,OAAO,CAAC,CAAC;QACrB,aAAa,EAAE,OAAO,CAAC,CAAC;AACxB,QAAA,KAAK,EAAE,MAAM;QACb,YAAY,EAAE,YAAY,CAAC,CAAC;AAC5B,QAAA,cAAc,EAAE,YAAY;AAE5B,QAAA,SAAS,EAAE;AACT,YAAA,SAAS,EAAE,MAAM;AACjB,YAAA,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI;AACrC,YAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;AAC3B,SAAA;AAED,QAAA,UAAU,EAAE;AACV,YAAA,SAAS,EAAE,MAAM;AAClB,SAAA;KACF,CAAA;AACD,IAAA,IAAM,aAAa,GAAc;QAC/B,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,OAAO,CAAC,KAAK;KACtB,CAAA;IAED,IAAM,iBAAiB,GAAG,WAAW,CAAC,YAAA;AACpC,QAAA,IAAI,OAAO,KAAK,eAAe,IAAI,SAAS,KAAK,IAAI,EAAE;YACrD,YAAY,CAAC,IAAI,CAAC,CAAA;;AAElB,YAAA,QAAQ,aAAR,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAR,QAAQ,CAAG,IAAI,CAAC,CAAA;AACjB,SAAA;AAAM,aAAA;YACL,SAAS,CAAC,UAAC,MAAe,EAAK,EAAA,OAAA,CAAC,MAAM,CAAA,EAAA,CAAC,CAAA;AACxC,SAAA;AACH,KAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAA;AAE3D,IAAA,IAAM,kBAAkB,GAAG,WAAW,CACpC,UAAC,MAA0B,EAAA;AACzB,QAAA,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC1B,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,QAAQ,CAAG,MAAM,CAAC,KAAK,CAAC,CAAA;AAC1B,KAAC,EACD,CAAC,QAAQ,EAAE,YAAY,CAAC,CACzB,CAAA;AAED,IAAA,IAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAEjD,QACEA,IAAC,CAAA,UAAU,EACT,QAAA,CAAA,EAAA,GAAG,EAAE,GAAG,IAAI,SAAS,EACrB,MAAM,EAAE;AACN,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,IAAI,EAAE,OAAO;AACd,SAAA,EACD,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EACP,OAAO,KAAK,eAAe,IAAI,SAAS,KAAK,IAAI;AAC/C,cAAE,YAAY;cACZ,SAAS,EAEf,QAAQ,EAAE,QAAQ,EAAA,eAAA,EACJ,SAAS,EAAA,eAAA,EACR,MAAM,EAAA,EAAA,EAAA,QAAA,EAAA,CAEpB,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,KAAA,CAAA,GAAb,aAAa,GAAI,KAAK,EACvBC,GAAC,CAAA,KAAK,EACJ,QAAA,CAAA,EAAA,SAAS,EAAG,GAA8B,IAAI,SAAS,EACvD,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,YAAM,EAAA,OAAA,SAAS,CAAC,KAAK,CAAC,CAAhB,EAAgB,EAC/B,YAAY,EAAE,iBAAiB,EAC/B,eAAe,EAAE,oBAAoB,EACrC,cAAc,EAAE,mBAAmB,EACnC,MAAM,EAAE,WAAW,EAEnB,EAAA,EAAA,QAAA,EAAAA,GAAA,CAAC,KAAK,EAAC,QAAA,CAAA,EAAA,EAAE,EAAC,GAAG,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EACxC,EAAA,EAAA,QAAA,EAAAA,GAAA,CAAC,GAAG,EAAA,QAAA,CAAA,EAAC,CAAC,EAAC,GAAG,EAAA,EAAA,EAAA,QAAA,EACRA,GAAC,CAAA,IAAI,EACH,QAAA,CAAA,EAAA,SAAS,EAAC,QAAQ,EAClB,UAAU,EAAC,YAAY,EACvB,cAAc,EAAC,QAAQ,EACvB,IAAI,EAAC,SAAS,EACF,YAAA,EAAA,CAAA,EAAA,GAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,KAAA,CAAA,GAAb,aAAa,GAAI,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,KAAK,CAAC,YAAY,CAAC,EAClC,uBAAA,EAAA,aAAa,EAEnC,EAAA,EAAA,QAAA,EAAA,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAA;;gCAAK,QACvBA,GAAC,CAAA,UAAU,EAET,QAAA,CAAA,EAAA,QAAQ,EAAE,MAAM,CAAC,IAAI,EACrB,MAAM,EAAE;AACN,wCAAA,MAAM,EAAE,SAAS;AACjB,wCAAA,IAAI,EAAE,aAAa;AACpB,qCAAA,EACD,OAAO,EAAE,YAAA,EAAM,OAAA,kBAAkB,CAAC,MAAM,CAAC,CAA1B,EAA0B,gBAC7B,CAAA,EAAA,GAAA,MAAM,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,EACxC,IAAI,EAAC,QAAQ,EAAA,EAAA,EAAA,QAAA,EAEZ,CAAA,EAAA,GAAA,MAAM,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,EAVxB,CAAA,EAAA,MAAM,CAAC,KAAK,CAWN,EACd;AAAA,6BAAA,CAAC,IACG,EACH,CAAA,CAAA,EAAA,CAAA,CACA,EACF,CAAA,CAAA,CAAA,EAAA,CAAA,CACG,EACd;AACH,CAAC;;;;"}
+{"version":3,"file":"FilterButton.js","sources":["../../../../src/components/button/FilterButton/FilterButton.tsx"],"sourcesContent":["import { forwardRef, useRef, useState, useCallback, useEffect } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { BaseButton } from 'components/button/BaseButton/BaseButton'\nimport { useControlled } from 'hooks/useControlled'\nimport { IconCloseAlt } from 'icons'\n\nimport { FilterButtonProps } from './types'\n\nexport const FilterButton = forwardRef<HTMLButtonElement, FilterButtonProps>(\n  function FilterButton(props, ref) {\n    const {\n      value: valueProp,\n      children,\n      label: labelProp,\n      onChange,\n      onClick,\n      onOpen,\n      onReset,\n      disabled,\n      variant = 'fillContainer',\n      size = 'default',\n      iconRight\n    } = props\n    const { color, cornerRadius, spacing, typography } = useTheme()\n    const [value, setValue] = useControlled({\n      controlledProp: valueProp,\n      defaultValue: null,\n      stateName: 'value',\n      componentName: 'FilterButton'\n    })\n\n    const [label, setLabel] = useControlled({\n      controlledProp: labelProp,\n      defaultValue: null,\n      stateName: 'label',\n      componentName: 'FilterButton'\n    })\n\n    const [isOpen, setIsOpen] = useState(false)\n\n    // Size Styles\n    const defaultStyles: CSSObject = {\n      paddingLeft: spacing.m,\n      paddingRight: spacing.m,\n      paddingTop: spacing.s,\n      paddingBottom: spacing.s\n    }\n    const defaultIconStyles: CSSObject = {\n      width: spacing.unit4,\n      height: spacing.unit4\n    }\n\n    const smallStyles: CSSObject = {\n      paddingLeft: spacing.m,\n      paddingRight: spacing.m,\n      paddingTop: spacing.xs,\n      paddingBottom: spacing.xs\n    }\n    const smallIconStyles: CSSObject = {\n      width: spacing.unit3,\n      height: spacing.unit3\n    }\n\n    const fillContainerStyles: CSSObject = {\n      background: color.secondary.s400,\n      border: `1px solid ${color.secondary.s400}`,\n      '&:hover': {\n        border: `1px solid ${color.secondary.s400}`,\n        transform: 'none'\n      }\n    }\n\n    const activeStyle =\n      variant !== 'fillContainer' || value === null\n        ? {\n            border: `1px solid ${color.border.strong}`,\n            background: color.background.surface2\n          }\n        : {}\n\n    const hoverStyle = {\n      border: `1px solid ${color.neutral.n800}`,\n      transform: 'none'\n    }\n\n    // Button Styles\n    const buttonCss: CSSObject = {\n      background: 'transparent',\n      border: `1px solid ${color.border.strong}`,\n      borderRadius: cornerRadius.s,\n      color:\n        variant === 'fillContainer' && value !== null\n          ? color.static.white\n          : color.text.default,\n      gap: spacing.xs,\n      fontSize: typography.size.s,\n      fontWeight: typography.weight.demiBold,\n      lineHeight: typography.lineHeight.s,\n      opacity: disabled ? 0.6 : 1,\n\n      '&:hover': hoverStyle,\n      '&:focus': hoverStyle,\n\n      '&:active': {\n        ...activeStyle,\n        transform: 'none'\n      },\n\n      ...(size === 'small' ? smallStyles : defaultStyles),\n      ...(isOpen ? activeStyle : {}),\n      ...(variant === 'fillContainer' && value !== null\n        ? fillContainerStyles\n        : {})\n    }\n\n    const iconCss = size === 'small' ? smallIconStyles : defaultIconStyles\n\n    const handleButtonClick = useCallback(() => {\n      if (onClick) {\n        onClick()\n      } else {\n        if (variant === 'fillContainer' && value !== null) {\n          setValue(null)\n          setLabel(null)\n          // @ts-ignore\n          onChange?.(null)\n          onReset?.()\n        } else {\n          setIsOpen((isOpen: boolean) => !isOpen)\n        }\n      }\n    }, [\n      value,\n      variant,\n      setIsOpen,\n      setValue,\n      setLabel,\n      onChange,\n      onClick,\n      onReset\n    ])\n\n    useEffect(() => {\n      if (isOpen) {\n        onOpen?.()\n      }\n    }, [isOpen, onOpen])\n\n    const handleChange = useCallback(\n      (value: string, label: string) => {\n        setValue(value)\n        setLabel(label)\n        onChange?.(value)\n      },\n      [onChange, setValue, setLabel]\n    )\n\n    const anchorRef = useRef<HTMLButtonElement>(null)\n\n    return (\n      <BaseButton\n        ref={ref || anchorRef}\n        styles={{\n          button: buttonCss,\n          icon: iconCss\n        }}\n        onClick={handleButtonClick}\n        iconRight={\n          variant === 'fillContainer' && value !== null\n            ? IconCloseAlt\n            : iconRight\n        }\n        disabled={disabled}\n        aria-haspopup='listbox'\n        aria-expanded={isOpen}\n      >\n        {label}\n        {children?.({\n          isOpen,\n          setIsOpen,\n          handleChange,\n          anchorRef\n        })}\n      </BaseButton>\n    )\n  }\n)\n"],"names":["_jsxs"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
+import { ReactNode } from 'react';
 import { IconComponent } from "../../icon";
-import { Origin } from "../../popup/types";
 export type FilterButtonSize = 'default' | 'small';
 export type FilterButtonVariant = 'fillContainer' | 'replaceLabel';
 export type FilterButtonOption = {
@@ -10,12 +10,31 @@ export type FilterButtonOption = {
     label?: string;
     icon?: IconComponent;
 };
+type ChildrenProps = {
+    /**
+     * State representing whether the FilterButton is open.
+     * This can be used to implement a popup via `children`
+     */
+    isOpen: boolean;
+    /**
+     * Set open state
+     */
+    setIsOpen: (isOpen: boolean) => void;
+    /**
+     * A function to handle when the value is changed
+     */
+    handleChange: (value: string, label: string) => void;
+    /**
+     * A ref to the anchor element (button)
+     */
+    anchorRef: React.RefObject<HTMLButtonElement>;
+};
 export type FilterButtonProps = {
     /**
-     * Selection options
-     * e.g. { label: 'Option A', icon: IconRadar }
+     * Children render prop. This can be used to render a dropdown component
+     * for example
      */
-    options: FilterButtonOption[];
+    children?: (props: ChildrenProps) => ReactNode;
     /**
      * The text that appears on the button component.
      * If no label is provided, a different Icon can be specified
@@ -27,9 +46,9 @@ export type FilterButtonProps = {
      */
     'aria-label'?: string;
     /**
-     * The selected value
+     * The value
      */
-    selection?: string | null;
+    value?: string | null;
     /**
      * The button size
      * @default FilterButtonSize.DEFAULT
@@ -47,32 +66,28 @@ export type FilterButtonProps = {
     /**
      * Optional icon element to include on the right side of the button
      */
-    iconRight?: IconComponent;
+    iconRight?: IconComponent | null;
     /**
-     * What to do when an option is selected
+     * What to do when the value is changed
      */
-    onSelect?: (label: string) => void;
+    onChange?: (value: string) => void;
     /**
-     * Whether interaction is disabled
+     * What to do when the filter button is opened
      */
-    disabled?: boolean;
+    onOpen?: () => void;
     /**
-     * Popup anchor origin
-     * @default { horizontal: 'center', vertical: 'bottom' }
+     * If provided, will be called when the selected value is reset
      */
-    popupAnchorOrigin?: Origin;
+    onReset?: () => void;
     /**
-     * Popup transform origin
-     * @default { horizontal: 'center', vertical: 'top' }
+     * What to do when the button is clicked
+     * This will override the default behavior of toggling isOpen
      */
-    popupTransformOrigin?: Origin;
+    onClick?: () => void;
     /**
-     * Popup portal location passed to the inner popup
-     */
-    popupPortalLocation?: HTMLElement;
-    /**
-     * zIndex applied to the inner Popup component
+     * Whether interaction is disabled
      */
-    popupZIndex?: number;
+    disabled?: boolean;
 };
+export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FilterButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,mBAAuB;AAC/C,OAAO,EAAE,MAAM,EAAE,0BAA8B;AAE/C,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,CAAA;AAElD,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAAG,cAAc,CAAA;AAElE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAE7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAEzB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAA;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAA;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAElC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B;;;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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FilterButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,mBAAuB;AAE/C,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,CAAA;AAGlD,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAAG,cAAc,CAAA;AAElE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB,CAAA;AAED,KAAK,aAAa,GAAG;IACnB;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC;;OAEG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD;;OAEG;IACH,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;CAC9C,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAA;IAE9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAA;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAA;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAEhC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAElC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA"}

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

@@ -7,7 +7,7 @@ export type IconButtonProps = {
     ripple?: boolean;
     'aria-label': string;
     iconCss?: CSSObject;
-} & Pick<IconProps, 'color' | 'size' | 'shadow' | 'height' | 'width'> & Pick<BaseButtonProps, 'onClick' | 'disabled' | 'className' | 'type' | 'children'>;
+} & Pick<IconProps, 'color' | 'size' | 'shadow' | 'height' | 'width'> & Pick<BaseButtonProps, 'onClick' | 'disabled' | 'className' | 'type' | 'children' | 'isLoading'>;
 /**
  * The icon component allows you to pass in an icon and
  * apply color and sizing properties.
@@ -17,5 +17,5 @@ export declare const IconButton: (props: {
     ripple?: boolean | undefined;
     'aria-label': string;
     iconCss?: CSSObject | undefined;
-} & Pick<IconProps, "color" | "size" | "shadow" | "height" | "width"> & Pick<BaseButtonProps, "disabled" | "type" | "className" | "children" | "onClick"> & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+} & Pick<IconProps, "color" | "size" | "shadow" | "height" | "width"> & Pick<BaseButtonProps, "disabled" | "type" | "className" | "children" | "onClick" | "isLoading"> & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 //# sourceMappingURL=IconButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/IconButton/IconButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAEzD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAE1D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAE1D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,aAAa,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC,GACnE,IAAI,CACF,eAAe,EACf,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,CAC3D,CAAA;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU;UAdf,aAAa;;kBAEL,MAAM;;8SAwFrB,CAAA"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/IconButton/IconButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAEzD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAE1D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAE1D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,aAAa,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC,GACnE,IAAI,CACF,eAAe,EACf,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,CACzE,CAAA;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU;UAdf,aAAa;;kBAEL,MAAM;;4TAkGrB,CAAA"}

package/dist/components/button/IconButton/IconButton.js

@@ -10,8 +10,8 @@ import { BaseButton } from '../BaseButton/BaseButton.js';
  */
 var IconButton = forwardRef(function (props, ref) {
     var Icon = props.icon, iconColor = props.color, _a = props.size, size = _a === void 0 ? 'l' : _a, shadow = props.shadow, ripple = props.ripple, height = props.height, width = props.width, iconCss = props.iconCss, children = props.children, other = __rest(props, ["icon", "color", "size", "shadow", "ripple", "height", "width", "iconCss", "children"]);
-    var disabled = other.disabled;
-    var _b = useTheme(), color = _b.color, cornerRadius = _b.cornerRadius, spacing = _b.spacing, motion = _b.motion;
+    var disabled = other.disabled, isLoading = other.isLoading;
+    var _b = useTheme(), color = _b.color, cornerRadius = _b.cornerRadius, spacing = _b.spacing, motion = _b.motion, iconSizes = _b.iconSizes;
     var buttonCss = {
         background: 'transparent',
         border: 'none',
@@ -46,7 +46,8 @@ var IconButton = forwardRef(function (props, ref) {
             borderRadius: cornerRadius.s
         }
     };
-    return (jsxs(BaseButton, __assign({ ref: ref, type: 'button' }, other, { css: [buttonCss, ripple && rippleCss] }, { children: [jsx(Icon, { "aria-hidden": true, color: disabled ? 'disabled' : iconColor, size: size, shadow: shadow, height: height, width: width, css: iconCss }), children] })));
+    var loadingIconCss = __assign(__assign({}, iconCss), { height: iconSizes[size], width: iconSizes[size], color: color.icon[iconColor !== null && iconColor !== void 0 ? iconColor : 'default'] });
+    return (jsxs(BaseButton, __assign({ ref: ref, type: 'button' }, other, { css: [buttonCss, ripple && rippleCss], styles: { icon: loadingIconCss } }, { children: [isLoading ? null : (jsx(Icon, { "aria-hidden": true, color: disabled ? 'disabled' : iconColor, size: size, shadow: shadow, height: height, width: width, css: iconCss })), children] })));
 });
 
 export { IconButton };

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/button/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { useTheme, type CSSObject } from '@emotion/react'\n\nimport type { IconComponent, IconProps } from '../../icon'\nimport { BaseButton } from '../BaseButton/BaseButton'\nimport type { BaseButtonProps } from '../BaseButton/types'\n\nexport type IconButtonProps = {\n  icon: IconComponent\n  ripple?: boolean\n  'aria-label': string\n  iconCss?: CSSObject\n} & Pick<IconProps, 'color' | 'size' | 'shadow' | 'height' | 'width'> &\n  Pick<\n    BaseButtonProps,\n    'onClick' | 'disabled' | 'className' | 'type' | 'children'\n  >\n\n/**\n * The icon component allows you to pass in an icon and\n * apply color and sizing properties.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (props: IconButtonProps, ref) => {\n    const {\n      icon: Icon,\n      color: iconColor,\n      size = 'l',\n      shadow,\n      ripple,\n      height,\n      width,\n      iconCss,\n      children,\n      ...other\n    } = props\n    const { disabled } = other\n    const { color, cornerRadius, spacing, motion } = useTheme()\n\n    const buttonCss: CSSObject = {\n      background: 'transparent',\n      border: 'none',\n      borderRadius: '50%',\n      padding: spacing.xs,\n      overflow: 'unset',\n      svg: {\n        transition: `\n        transform ${motion.hover},\n        color ${motion.hover}\n        `\n      },\n      '&:hover': {\n        transform: 'scale(1.0)',\n        svg: {\n          transform: 'scale(1.1)'\n        }\n      },\n      '&:active': {\n        transform: 'scale(1.0)',\n        svg: {\n          transform: 'scale(0.98)'\n        }\n      }\n    }\n\n    const rippleCss: CSSObject = {\n      '&:hover': {\n        backgroundColor: color.neutral.n100\n      },\n      '&:active': {\n        backgroundColor: color.neutral.n150\n      },\n      '&:focus-visible': {\n        border: `1px solid ${color.secondary.secondary}`,\n        borderRadius: cornerRadius.s\n      }\n    }\n\n    return (\n      <BaseButton\n        ref={ref}\n        type='button'\n        {...other}\n        css={[buttonCss, ripple && rippleCss]}\n      >\n        <Icon\n          aria-hidden\n          color={disabled ? 'disabled' : iconColor}\n          size={size}\n          shadow={shadow}\n          height={height}\n          width={width}\n          css={iconCss}\n        />\n        {children}\n      </BaseButton>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAmBA;;;AAGG;IACU,UAAU,GAAG,UAAU,CAClC,UAAC,KAAsB,EAAE,GAAG,EAAA;IAExB,IAAM,IAAI,GAUR,KAAK,CAVG,IAAA,EACH,SAAS,GASd,KAAK,CATS,KAAA,EAChB,EAQE,GAAA,KAAK,KARG,EAAV,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,GAAG,GAAA,EAAA,EACV,MAAM,GAOJ,KAAK,CAAA,MAPD,EACN,MAAM,GAMJ,KAAK,OAND,EACN,MAAM,GAKJ,KAAK,CALD,MAAA,EACN,KAAK,GAIH,KAAK,CAAA,KAJF,EACL,OAAO,GAGL,KAAK,QAHA,EACP,QAAQ,GAEN,KAAK,CAFC,QAAA,EACL,KAAK,GAAA,MAAA,CACN,KAAK,EAXH,CAWL,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,CAAA,CADS,CACD;AACD,IAAA,IAAA,QAAQ,GAAK,KAAK,CAAA,QAAV,CAAU;AACpB,IAAA,IAAA,EAA2C,GAAA,QAAQ,EAAE,EAAnD,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,MAAM,YAAe,CAAA;AAE3D,IAAA,IAAM,SAAS,GAAc;AAC3B,QAAA,UAAU,EAAE,aAAa;AACzB,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,OAAO,CAAC,EAAE;AACnB,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE;YACH,UAAU,EAAE,8BACA,MAAM,CAAC,KAAK,EAChB,mBAAA,CAAA,CAAA,MAAA,CAAA,MAAM,CAAC,KAAK,EACnB,YAAA,CAAA;AACF,SAAA;AACD,QAAA,SAAS,EAAE;AACT,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,GAAG,EAAE;AACH,gBAAA,SAAS,EAAE,YAAY;AACxB,aAAA;AACF,SAAA;AACD,QAAA,UAAU,EAAE;AACV,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,GAAG,EAAE;AACH,gBAAA,SAAS,EAAE,aAAa;AACzB,aAAA;AACF,SAAA;KACF,CAAA;AAED,IAAA,IAAM,SAAS,GAAc;AAC3B,QAAA,SAAS,EAAE;AACT,YAAA,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;AACpC,SAAA;AACD,QAAA,UAAU,EAAE;AACV,YAAA,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;AACpC,SAAA;AACD,QAAA,iBAAiB,EAAE;AACjB,YAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,SAAS,CAAC,SAAS,CAAE;YAChD,YAAY,EAAE,YAAY,CAAC,CAAC;AAC7B,SAAA;KACF,CAAA;AAED,IAAA,QACEA,IAAA,CAAC,UAAU,EAAA,QAAA,CAAA,EACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EAAA,EACT,KAAK,EAAA,EACT,GAAG,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,SAAS,CAAC,EAAA,EAAA,EAAA,QAAA,EAAA,CAErCC,GAAC,CAAA,IAAI,EAEH,EAAA,aAAA,EAAA,IAAA,EAAA,KAAK,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,EACxC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,OAAO,EACZ,CAAA,EACD,QAAQ,CAAA,EAAA,CAAA,CACE,EACd;AACH,CAAC;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/button/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { useTheme, type CSSObject } from '@emotion/react'\n\nimport type { IconComponent, IconProps } from '../../icon'\nimport { BaseButton } from '../BaseButton/BaseButton'\nimport type { BaseButtonProps } from '../BaseButton/types'\n\nexport type IconButtonProps = {\n  icon: IconComponent\n  ripple?: boolean\n  'aria-label': string\n  iconCss?: CSSObject\n} & Pick<IconProps, 'color' | 'size' | 'shadow' | 'height' | 'width'> &\n  Pick<\n    BaseButtonProps,\n    'onClick' | 'disabled' | 'className' | 'type' | 'children' | 'isLoading'\n  >\n\n/**\n * The icon component allows you to pass in an icon and\n * apply color and sizing properties.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (props: IconButtonProps, ref) => {\n    const {\n      icon: Icon,\n      color: iconColor,\n      size = 'l',\n      shadow,\n      ripple,\n      height,\n      width,\n      iconCss,\n      children,\n      ...other\n    } = props\n    const { disabled, isLoading } = other\n    const { color, cornerRadius, spacing, motion, iconSizes } = useTheme()\n\n    const buttonCss: CSSObject = {\n      background: 'transparent',\n      border: 'none',\n      borderRadius: '50%',\n      padding: spacing.xs,\n      overflow: 'unset',\n      svg: {\n        transition: `\n        transform ${motion.hover},\n        color ${motion.hover}\n        `\n      },\n      '&:hover': {\n        transform: 'scale(1.0)',\n        svg: {\n          transform: 'scale(1.1)'\n        }\n      },\n      '&:active': {\n        transform: 'scale(1.0)',\n        svg: {\n          transform: 'scale(0.98)'\n        }\n      }\n    }\n\n    const rippleCss: CSSObject = {\n      '&:hover': {\n        backgroundColor: color.neutral.n100\n      },\n      '&:active': {\n        backgroundColor: color.neutral.n150\n      },\n      '&:focus-visible': {\n        border: `1px solid ${color.secondary.secondary}`,\n        borderRadius: cornerRadius.s\n      }\n    }\n\n    const loadingIconCss: CSSObject = {\n      ...iconCss,\n      height: iconSizes[size],\n      width: iconSizes[size],\n      color: color.icon[iconColor ?? 'default']\n    }\n\n    return (\n      <BaseButton\n        ref={ref}\n        type='button'\n        {...other}\n        css={[buttonCss, ripple && rippleCss]}\n        styles={{ icon: loadingIconCss }}\n      >\n        {isLoading ? null : (\n          <Icon\n            aria-hidden\n            color={disabled ? 'disabled' : iconColor}\n            size={size}\n            shadow={shadow}\n            height={height}\n            width={width}\n            css={iconCss}\n          />\n        )}\n        {children}\n      </BaseButton>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+import { OptionsFilterButtonOption } from './types';
+type FilterButtonOptionsProps = {
+    activeValue?: string | null;
+    options: OptionsFilterButtonOption[];
+    optionRefs?: RefObject<HTMLButtonElement[]>;
+    onChange: (option: OptionsFilterButtonOption) => void;
+};
+export declare const FilterButtonOptions: (props: FilterButtonOptionsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const OptionsFilterButton: (props: {
+    options: OptionsFilterButtonOption[];
+    optionsLabel?: string | undefined;
+    selection?: string | null | undefined;
+    showFilterInput?: boolean | undefined;
+    filterInputPlaceholder?: string | undefined;
+} & import("./types").FilterButtonPopupProps & Omit<import("..").FilterButtonProps, "children" | "value"> & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export {};
+//# sourceMappingURL=OptionsFilterButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsFilterButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/OptionsFilterButton/OptionsFilterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EAKV,MAAM,OAAO,CAAA;AAed,OAAO,EAA4B,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAM7E,KAAK,wBAAwB,GAAG;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,yBAAyB,EAAE,CAAA;IACpC,UAAU,CAAC,EAAE,SAAS,CAAC,iBAAiB,EAAE,CAAC,CAAA;IAC3C,QAAQ,EAAE,CAAC,MAAM,EAAE,yBAAyB,KAAK,IAAI,CAAA;CACtD,CAAA;AAED,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,qDAkFlE,CAAA;AAED,eAAO,MAAM,mBAAmB;;;;;;8PAsJ9B,CAAA"}

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