@audius/harmony 0.0.33 → 0.1.0

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 '../../layout/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, isDisabled = props.isDisabled, _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
-            ? color.special.white
-            : color.text.default, gap: spacing.xs, fontSize: typography.size.s, fontWeight: typography.weight.demiBold, lineHeight: typography.lineHeight.s, '&: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
+    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': 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: isDisabled, "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, Popup } from 'components/layout'\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      isDisabled,\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.special.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\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={isDisabled}\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":"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"}
+{"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 "../../layout/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;
-    /**
-     * What to do when an option is selected
-     */
-    onSelect?: (label: string) => void;
+    iconRight?: IconComponent | null;
     /**
-     * Whether interaction is disabled
+     * What to do when the value is changed
      */
-    isDisabled?: boolean;
+    onChange?: (value: string) => void;
     /**
-     * Popup anchor origin
-     * @default { horizontal: 'center', vertical: 'bottom' }
+     * What to do when the filter button is opened
      */
-    popupAnchorOrigin?: Origin;
+    onOpen?: () => void;
     /**
-     * Popup transform origin
-     * @default { horizontal: 'center', vertical: 'top' }
+     * If provided, will be called when the selected value is reset
      */
-    popupTransformOrigin?: Origin;
+    onReset?: () => void;
     /**
-     * Popup portal location passed to the inner popup
+     * What to do when the button is clicked
+     * This will override the default behavior of toggling isOpen
      */
-    popupPortalLocation?: HTMLElement;
+    onClick?: () => void;
     /**
-     * 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,iCAAqC;AAEtD,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,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;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/FollowButton/FollowButton.js

@@ -4,7 +4,7 @@ import { forwardRef, useState, useCallback, useEffect } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Flex } from '../../layout/Flex/Flex.js';
-import { Text } from '../../text/Text/Text.js';
+import { Text } from '../../text/Text.js';
 import { useControlled } from '../../../hooks/useControlled.js';
 import { IconUserFollow, IconUserFollowing, IconUserUnfollow } from '../../../icons/utilityIcons.js';
 import '@emotion/css';

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

@@ -1 +1 @@
-{"version":3,"file":"FollowButton.js","sources":["../../../../src/components/button/FollowButton/FollowButton.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, forwardRef, Ref } from 'react'\n\nimport { useTheme, type CSSObject } from '@emotion/react'\nimport styled from '@emotion/styled'\n\nimport type { IconComponent } from 'components/icon'\nimport { Flex } from 'components/layout/Flex'\nimport { Text } from 'components/text/Text'\nimport { useControlled } from 'hooks/useControlled'\nimport { IconUserFollowing, IconUserFollow, IconUserUnfollow } from 'icons'\n\nimport type { FollowButtonProps } from './types'\n\nconst defaultMessages = {\n  follow: 'Follow',\n  following: 'Following',\n  unfollow: 'Unfollow'\n}\n\nconst InputRoot = styled.input({\n  cursor: 'inherit',\n  position: 'absolute',\n  opacity: 0,\n  width: '100%',\n  height: '100%',\n  top: 0,\n  left: 0,\n  margin: 0,\n  padding: 0,\n  zIndex: 1\n})\n\n/**\n * Special button for following or unfollowing a user.\n */\nexport const FollowButton = forwardRef(\n  (props: FollowButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const {\n      variant = 'default',\n      isFollowing = false,\n      onUnfollow,\n      onFollow,\n      size = 'default',\n      fullWidth = true,\n      messages: messagesProp,\n      ...other\n    } = props\n    const messages = { ...defaultMessages, ...messagesProp }\n    const { type } = other\n    const [value, setValueState] = useControlled({\n      componentName: 'FollowButton',\n      controlledProp: isFollowing,\n      defaultValue: undefined,\n      stateName: 'following'\n    })\n\n    // Track hover manually to swap text and icon\n    const [isHovering, setIsHovering] = useState(false)\n    const [isPressing, setIsPressing] = useState(false)\n\n    const handleMouseEnter = useCallback(() => {\n      setIsHovering(true)\n    }, [])\n\n    const handleMouseDown = useCallback(() => {\n      setIsPressing(true)\n    }, [])\n\n    const handleMouseLeave = useCallback(() => {\n      setIsHovering(false)\n    }, [])\n\n    const handleMouseUp = useCallback(() => {\n      setIsPressing(false)\n    }, [])\n\n    const handlePressIn = useCallback(() => {\n      setIsHovering(true)\n      setIsPressing(true)\n    }, [])\n\n    const handlePressOut = useCallback(() => {\n      setIsHovering(false)\n      setIsPressing(false)\n    }, [])\n\n    useEffect(() => {}, [value])\n\n    const handleClick = useCallback(() => {\n      if (value) {\n        onUnfollow?.()\n      } else {\n        onFollow?.()\n      }\n      setValueState(!value)\n    }, [value, setValueState, onUnfollow, onFollow])\n\n    const checkedValue = value\n    let Icon: IconComponent | null = IconUserFollow\n    let text = messages.follow\n    if (checkedValue && !isHovering) {\n      Icon = IconUserFollowing\n      text = messages.following\n    } else if (checkedValue && isHovering && !isPressing) {\n      Icon = IconUserUnfollow\n      text = messages.unfollow\n    }\n\n    const { color, cornerRadius, motion, shadows } = useTheme()\n\n    const textColor =\n      checkedValue || isHovering || isPressing\n        ? color.static.white\n        : color.primary.primary\n\n    const borderRadius =\n      variant === 'pill' ? cornerRadius['2xl'] : cornerRadius.s\n\n    const rootCss: CSSObject = {\n      cursor: 'pointer',\n      minWidth: size === 'small' ? 128 : 152,\n      width: fullWidth ? '100%' : undefined,\n      userSelect: 'none',\n      borderRadius,\n      backgroundColor: checkedValue\n        ? color.primary.primary\n        : color.special.white,\n      boxShadow: shadows.near,\n      border: `1px solid ${color.primary.primary}`,\n      transition: `\n        transform ${motion.hover},\n        border-color ${motion.hover},\n        background-color ${motion.hover},\n        color ${motion.hover}\n      `,\n      '::before': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        backgroundColor: 'rgba(0, 0, 0, 0)',\n        borderRadius\n      },\n      '&:hover': {\n        backgroundColor: color.primary.primary,\n        borderWidth: 0,\n        boxShadow: shadows.mid,\n        '&::before': {\n          backgroundColor: 'rgba(255, 255, 255, 0.2)'\n        }\n      },\n      '&:active': {\n        backgroundColor: color.primary.primary,\n        borderWidth: 0,\n        boxShadow: 'none',\n        '&::before': {\n          backgroundColor: 'rgba(0, 0, 0, 0.2)'\n        }\n      }\n    }\n\n    // Handles case where user mouses down, moves cursor, and mouses up\n    useEffect(() => {\n      if (isPressing) {\n        document.addEventListener('mouseup', handleMouseUp)\n        return () => {\n          document.removeEventListener('mouseup', handleMouseUp)\n        }\n      }\n      return undefined\n    }, [isPressing, handleMouseUp])\n\n    const rootProps = {\n      onMouseEnter: handleMouseEnter,\n      onMouseLeave: handleMouseLeave,\n      onMouseDown: handleMouseDown,\n      onMouseUp: handleMouseUp,\n      onTouchStart: handlePressIn,\n      onTouchEnd: handlePressOut\n    }\n\n    const buttonProps = type === 'checkbox' ? undefined : other\n    const inputProps = type === 'checkbox' ? other : undefined\n\n    return (\n      <Flex\n        // @ts-ignore flex not smart enough\n        ref={ref}\n        as={type === 'checkbox' ? 'label' : 'button'}\n        h={size === 'small' ? 28 : 32}\n        direction='row'\n        alignItems='center'\n        justifyContent='center'\n        gap='xs'\n        pv='s'\n        css={rootCss}\n        // @ts-ignore flex not smart enough\n        onClick={handleClick}\n        {...buttonProps}\n        {...rootProps}\n      >\n        {/* TODO: use theme icon colors (confirm w/design) */}\n        <Icon height={18} width={18} css={{ path: { fill: textColor } }} />\n        <Text\n          variant='label'\n          tag='span'\n          size={size === 'small' ? 's' : 'l'}\n          strength='default'\n          css={{ color: textColor }}\n        >\n          {text}\n        </Text>\n        {type === 'checkbox' ? (\n          <InputRoot {...inputProps} checked={isFollowing} />\n        ) : null}\n      </Flex>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"FollowButton.js","sources":["../../../../src/components/button/FollowButton/FollowButton.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, forwardRef, Ref } from 'react'\n\nimport { useTheme, type CSSObject } from '@emotion/react'\nimport styled from '@emotion/styled'\n\nimport type { IconComponent } from 'components/icon'\nimport { Flex } from 'components/layout/Flex'\nimport { Text } from 'components/text'\nimport { useControlled } from 'hooks/useControlled'\nimport { IconUserFollowing, IconUserFollow, IconUserUnfollow } from 'icons'\n\nimport type { FollowButtonProps } from './types'\n\nconst defaultMessages = {\n  follow: 'Follow',\n  following: 'Following',\n  unfollow: 'Unfollow'\n}\n\nconst InputRoot = styled.input({\n  cursor: 'inherit',\n  position: 'absolute',\n  opacity: 0,\n  width: '100%',\n  height: '100%',\n  top: 0,\n  left: 0,\n  margin: 0,\n  padding: 0,\n  zIndex: 1\n})\n\n/**\n * Special button for following or unfollowing a user.\n */\nexport const FollowButton = forwardRef(\n  (props: FollowButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const {\n      variant = 'default',\n      isFollowing = false,\n      onUnfollow,\n      onFollow,\n      size = 'default',\n      fullWidth = true,\n      messages: messagesProp,\n      ...other\n    } = props\n    const messages = { ...defaultMessages, ...messagesProp }\n    const { type } = other\n    const [value, setValueState] = useControlled({\n      componentName: 'FollowButton',\n      controlledProp: isFollowing,\n      defaultValue: undefined,\n      stateName: 'following'\n    })\n\n    // Track hover manually to swap text and icon\n    const [isHovering, setIsHovering] = useState(false)\n    const [isPressing, setIsPressing] = useState(false)\n\n    const handleMouseEnter = useCallback(() => {\n      setIsHovering(true)\n    }, [])\n\n    const handleMouseDown = useCallback(() => {\n      setIsPressing(true)\n    }, [])\n\n    const handleMouseLeave = useCallback(() => {\n      setIsHovering(false)\n    }, [])\n\n    const handleMouseUp = useCallback(() => {\n      setIsPressing(false)\n    }, [])\n\n    const handlePressIn = useCallback(() => {\n      setIsHovering(true)\n      setIsPressing(true)\n    }, [])\n\n    const handlePressOut = useCallback(() => {\n      setIsHovering(false)\n      setIsPressing(false)\n    }, [])\n\n    useEffect(() => {}, [value])\n\n    const handleClick = useCallback(() => {\n      if (value) {\n        onUnfollow?.()\n      } else {\n        onFollow?.()\n      }\n      setValueState(!value)\n    }, [value, setValueState, onUnfollow, onFollow])\n\n    const checkedValue = value\n    let Icon: IconComponent | null = IconUserFollow\n    let text = messages.follow\n    if (checkedValue && !isHovering) {\n      Icon = IconUserFollowing\n      text = messages.following\n    } else if (checkedValue && isHovering && !isPressing) {\n      Icon = IconUserUnfollow\n      text = messages.unfollow\n    }\n\n    const { color, cornerRadius, motion, shadows } = useTheme()\n\n    const textColor =\n      checkedValue || isHovering || isPressing\n        ? color.static.white\n        : color.primary.primary\n\n    const borderRadius =\n      variant === 'pill' ? cornerRadius['2xl'] : cornerRadius.s\n\n    const rootCss: CSSObject = {\n      cursor: 'pointer',\n      minWidth: size === 'small' ? 128 : 152,\n      width: fullWidth ? '100%' : undefined,\n      userSelect: 'none',\n      borderRadius,\n      backgroundColor: checkedValue\n        ? color.primary.primary\n        : color.special.white,\n      boxShadow: shadows.near,\n      border: `1px solid ${color.primary.primary}`,\n      transition: `\n        transform ${motion.hover},\n        border-color ${motion.hover},\n        background-color ${motion.hover},\n        color ${motion.hover}\n      `,\n      '::before': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        backgroundColor: 'rgba(0, 0, 0, 0)',\n        borderRadius\n      },\n      '&:hover': {\n        backgroundColor: color.primary.primary,\n        borderWidth: 0,\n        boxShadow: shadows.mid,\n        '&::before': {\n          backgroundColor: 'rgba(255, 255, 255, 0.2)'\n        }\n      },\n      '&:active': {\n        backgroundColor: color.primary.primary,\n        borderWidth: 0,\n        boxShadow: 'none',\n        '&::before': {\n          backgroundColor: 'rgba(0, 0, 0, 0.2)'\n        }\n      }\n    }\n\n    // Handles case where user mouses down, moves cursor, and mouses up\n    useEffect(() => {\n      if (isPressing) {\n        document.addEventListener('mouseup', handleMouseUp)\n        return () => {\n          document.removeEventListener('mouseup', handleMouseUp)\n        }\n      }\n      return undefined\n    }, [isPressing, handleMouseUp])\n\n    const rootProps = {\n      onMouseEnter: handleMouseEnter,\n      onMouseLeave: handleMouseLeave,\n      onMouseDown: handleMouseDown,\n      onMouseUp: handleMouseUp,\n      onTouchStart: handlePressIn,\n      onTouchEnd: handlePressOut\n    }\n\n    const buttonProps = type === 'checkbox' ? undefined : other\n    const inputProps = type === 'checkbox' ? other : undefined\n\n    return (\n      <Flex\n        // @ts-ignore flex not smart enough\n        ref={ref}\n        as={type === 'checkbox' ? 'label' : 'button'}\n        h={size === 'small' ? 28 : 32}\n        direction='row'\n        alignItems='center'\n        justifyContent='center'\n        gap='xs'\n        pv='s'\n        css={rootCss}\n        // @ts-ignore flex not smart enough\n        onClick={handleClick}\n        {...buttonProps}\n        {...rootProps}\n      >\n        {/* TODO: use theme icon colors (confirm w/design) */}\n        <Icon height={18} width={18} css={{ path: { fill: textColor } }} />\n        <Text\n          variant='label'\n          tag='span'\n          size={size === 'small' ? 's' : 'l'}\n          strength='default'\n          css={{ color: textColor }}\n        >\n          {text}\n        </Text>\n        {type === 'checkbox' ? (\n          <InputRoot {...inputProps} checked={isFollowing} />\n        ) : null}\n      </Flex>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import { type CSSObject } from '@emotion/react';
-import type { IconComponent, IconProps } from "../../icon";
+import type { IconComponent, IconProps } from '../../icon';
 import type { BaseButtonProps } from '../BaseButton/types';
 export type IconButtonProps = {
     icon: IconComponent;
     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,mBAAuB;AAG/D,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 'components/icon'\n\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":";;;;;;AAoBA;;;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"}