@audius/harmony 0.0.25

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const PrimaryWithColor: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const Destructive: Story;
+//# sourceMappingURL=Button.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../src/components/button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAOjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAyB7B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AAGpC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAA;AAGhC,eAAO,MAAM,gBAAgB,EAAE,KAAyC,CAAA;AAGxE,eAAO,MAAM,SAAS,EAAE,KAAmD,CAAA;AAG3E,eAAO,MAAM,QAAQ,EAAE,KAAkD,CAAA;AAGzE,eAAO,MAAM,WAAW,EAAE,KAAqD,CAAA"}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FilterButtonProps } from './types';
+export declare const FilterButton: (props: FilterButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+//# sourceMappingURL=FilterButton.d.ts.map

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

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

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

@@ -0,0 +1,129 @@
+import { __assign } from '../../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef, useState, useCallback, 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 '@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,
+        defaultValue: null,
+        stateName: 'selection',
+        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];
+    // Size Styles
+    var defaultStyles = {
+        paddingLeft: spacing.m,
+        paddingRight: spacing.m,
+        paddingTop: spacing.s,
+        paddingBottom: spacing.s
+    };
+    var defaultIconStyles = {
+        width: spacing.unit4,
+        height: spacing.unit4
+    };
+    var smallStyles = {
+        paddingLeft: spacing.m,
+        paddingRight: spacing.m,
+        paddingTop: spacing.xs,
+        paddingBottom: spacing.xs
+    };
+    var smallIconStyles = {
+        width: spacing.unit3,
+        height: spacing.unit3
+    };
+    var fillContainerStyles = {
+        background: color.secondary.s400,
+        border: "1px solid ".concat(color.secondary.s400),
+        '&:hover': {
+            border: "1px solid ".concat(color.secondary.s400),
+            transform: 'none'
+        }
+    };
+    var activeStyle = variant !== 'fillContainer' || selection === null
+        ? {
+            border: "1px solid ".concat(color.border.strong),
+            background: color.background.surface2
+        }
+        : {};
+    // 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
+        ? 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);
+        }
+        else {
+            setIsOpen(function (isOpen) { return !isOpen; });
+        }
+    }, [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]);
+    var anchorRef = useRef(null);
+    return (jsxs(BaseButton, __assign({ ref: ref || anchorRef, styles: {
+            button: buttonCss,
+            icon: iconCss
+        }, onClick: handleButtonClick, iconRight: variant === 'fillContainer' && selection !== 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));
+                            }) })) })) })) }))] })));
+});
+
+export { FilterButton };
+//# sourceMappingURL=FilterButton.js.map

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

@@ -0,0 +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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"}

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

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

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

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

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

@@ -0,0 +1,78 @@
+import { IconComponent } from "../../icon";
+import { Origin } from "../../layout/Popup/types";
+export type FilterButtonSize = 'default' | 'small';
+export type FilterButtonVariant = 'fillContainer' | 'replaceLabel';
+export type FilterButtonOption = {
+    value: string;
+    /**
+     * The label to display. If not provided, uses the value.
+     */
+    label?: string;
+    icon?: IconComponent;
+};
+export type FilterButtonProps = {
+    /**
+     * Selection options
+     * e.g. { label: 'Option A', icon: IconRadar }
+     */
+    options: FilterButtonOption[];
+    /**
+     * The text that appears on the button component.
+     * If no label is provided, a different Icon can be specified
+     * to contextually inform users.
+     */
+    label?: string;
+    /**
+     * If no label is provided, specify an optional aria-label
+     */
+    'aria-label'?: string;
+    /**
+     * The selected value
+     */
+    selection?: string | null;
+    /**
+     * The button size
+     * @default FilterButtonSize.DEFAULT
+     */
+    size?: FilterButtonSize;
+    /**
+     * The type of filter button
+     * @default FilterButtonType.FILL_CONTAINER
+     */
+    variant?: FilterButtonVariant;
+    /**
+     * Optional icon element to include on the left side of the button
+     */
+    iconLeft?: IconComponent;
+    /**
+     * 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;
+    /**
+     * Whether interaction is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Popup anchor origin
+     * @default { horizontal: 'center', vertical: 'bottom' }
+     */
+    popupAnchorOrigin?: Origin;
+    /**
+     * Popup transform origin
+     * @default { horizontal: 'center', vertical: 'top' }
+     */
+    popupTransformOrigin?: Origin;
+    /**
+     * Popup portal location passed to the inner popup
+     */
+    popupPortalLocation?: HTMLElement;
+    /**
+     * zIndex applied to the inner Popup component
+     */
+    popupZIndex?: number;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,6 @@
+import type { FollowButtonProps } from './types';
+/**
+ * Special button for following or unfollowing a user.
+ */
+export declare const FollowButton: (props: FollowButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FollowButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FollowButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FollowButton/FollowButton.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAqBhD;;GAEG;AACH,eAAO,MAAM,YAAY,UAAW,iBAAiB,qDAiJpD,CAAA"}

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

@@ -0,0 +1,128 @@
+import { __rest, __assign } from '../../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { 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 { useControlled } from '../../../hooks/useControlled.js';
+import { IconUserFollow, IconUserFollowing, IconUserUnfollow } from '../../../icons/utilityIcons.js';
+import '@emotion/css';
+
+var messages = {
+    follow: 'Follow',
+    following: 'Following',
+    unfollow: 'Unfollow'
+};
+var InputRoot = styled.input({
+    cursor: 'inherit',
+    position: 'absolute',
+    opacity: 0,
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    margin: 0,
+    padding: 0,
+    zIndex: 1
+});
+/**
+ * Special button for following or unfollowing a user.
+ */
+var FollowButton = function (props) {
+    var _a = props.variant, variant = _a === void 0 ? 'default' : _a, _b = props.isFollowing, isFollowing = _b === void 0 ? false : _b, onUnfollow = props.onUnfollow, onFollow = props.onFollow, _c = props.size, size = _c === void 0 ? 'default' : _c, other = __rest(props, ["variant", "isFollowing", "onUnfollow", "onFollow", "size"]);
+    var type = other.type;
+    var _d = useControlled({
+        componentName: 'FollowButton',
+        controlledProp: isFollowing,
+        defaultValue: undefined,
+        stateName: 'following'
+    }), value = _d[0], setValueState = _d[1];
+    // Track hover manually to swap text and icon
+    var _e = useState(false), isHovering = _e[0], setIsHovering = _e[1];
+    var _f = useState(false), isPressing = _f[0], setIsPressing = _f[1];
+    var handleMouseEnter = useCallback(function () {
+        setIsHovering(true);
+    }, []);
+    var handleMouseDown = useCallback(function () {
+        setIsPressing(true);
+    }, []);
+    var handleMouseLeave = useCallback(function () {
+        setIsHovering(false);
+    }, []);
+    var handleMouseUp = useCallback(function () {
+        setIsPressing(false);
+    }, []);
+    var handlePressIn = useCallback(function () {
+        setIsHovering(true);
+        setIsPressing(true);
+    }, []);
+    var handlePressOut = useCallback(function () {
+        setIsHovering(false);
+        setIsPressing(false);
+    }, []);
+    useEffect(function () { }, [value]);
+    var handleClick = useCallback(function () {
+        if (value) {
+            onUnfollow === null || onUnfollow === void 0 ? void 0 : onUnfollow();
+        }
+        else {
+            onFollow === null || onFollow === void 0 ? void 0 : onFollow();
+        }
+        setValueState(!value);
+    }, [value, setValueState, onUnfollow, onFollow]);
+    var checkedValue = value;
+    var Icon = IconUserFollow;
+    var text = messages.follow;
+    if (checkedValue && !isHovering) {
+        Icon = IconUserFollowing;
+        text = messages.following;
+    }
+    else if (checkedValue && isHovering && !isPressing) {
+        Icon = IconUserUnfollow;
+        text = messages.unfollow;
+    }
+    var _g = useTheme(), color = _g.color, cornerRadius = _g.cornerRadius;
+    var textColor = checkedValue || isHovering || isPressing
+        ? color.static.white
+        : color.primary.primary;
+    var rootCss = {
+        cursor: 'pointer',
+        minWidth: size === 'small' ? 128 : 152,
+        width: '100%',
+        userSelect: 'none',
+        borderRadius: variant === 'pill' ? cornerRadius['2xl'] : cornerRadius.s,
+        background: isPressing
+            ? color.primary.p500
+            : checkedValue || isHovering
+                ? color.primary.primary
+                : color.static.white,
+        border: "1px solid ".concat(isPressing ? color.primary.p500 : color.primary.primary)
+    };
+    // Handles case where user mouses down, moves cursor, and mouses up
+    useEffect(function () {
+        if (isPressing) {
+            document.addEventListener('mouseup', handleMouseUp);
+            return function () {
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+        return undefined;
+    }, [isPressing, handleMouseUp]);
+    var rootProps = {
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        onTouchStart: handlePressIn,
+        onTouchEnd: handlePressOut
+    };
+    var buttonProps = type === 'checkbox' ? undefined : other;
+    var inputProps = type === 'checkbox' ? other : undefined;
+    return (jsxs(Flex, __assign({ as: type === 'checkbox' ? 'label' : 'button', h: size === 'small' ? 28 : 32, direction: 'row', alignItems: 'center', justifyContent: 'center', gap: 'xs', pv: 's', css: rootCss, 
+        // @ts-ignore flex not smart enough
+        onClick: handleClick }, buttonProps, rootProps, { children: [jsx(Icon, { height: 18, width: 18, css: { path: { fill: textColor } } }), jsx(Text, __assign({ variant: 'label', size: size === 'small' ? 's' : 'l', strength: 'default', css: { color: textColor } }, { children: text })), type === 'checkbox' ? (jsx(InputRoot, __assign({}, inputProps, { checked: isFollowing }))) : null] })));
+};
+
+export { FollowButton };
+//# sourceMappingURL=FollowButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FollowButton.js","sources":["../../../../src/components/button/FollowButton/FollowButton.tsx"],"sourcesContent":["import { useState, useCallback, useEffect } 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 messages = {\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 = (props: FollowButtonProps) => {\n  const {\n    variant = 'default',\n    isFollowing = false,\n    onUnfollow,\n    onFollow,\n    size = 'default',\n    ...other\n  } = props\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 } = useTheme()\n\n  const textColor =\n    checkedValue || isHovering || isPressing\n      ? color.static.white\n      : color.primary.primary\n\n  const rootCss: CSSObject = {\n    cursor: 'pointer',\n    minWidth: size === 'small' ? 128 : 152,\n    width: '100%',\n    userSelect: 'none',\n    borderRadius: variant === 'pill' ? cornerRadius['2xl'] : cornerRadius.s,\n    background: isPressing\n      ? color.primary.p500\n      : checkedValue || isHovering\n      ? color.primary.primary\n      : color.static.white,\n    border: `1px solid ${\n      isPressing ? color.primary.p500 : color.primary.primary\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      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        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"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAaA,IAAM,QAAQ,GAAG;AACf,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,QAAQ,EAAE,UAAU;CACrB,CAAA;AAED,IAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;AAC7B,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,KAAK,EAAE,MAAM;AACb,IAAA,MAAM,EAAE,MAAM;AACd,IAAA,GAAG,EAAE,CAAC;AACN,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,MAAM,EAAE,CAAC;AACT,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,MAAM,EAAE,CAAC;AACV,CAAA,CAAC,CAAA;AAEF;;AAEG;AACI,IAAM,YAAY,GAAG,UAAC,KAAwB,EAAA;AAEjD,IAAA,IAAA,KAME,KAAK,CAAA,OANY,EAAnB,OAAO,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,SAAS,GAAA,EAAA,EACnB,KAKE,KAAK,CAAA,WALY,EAAnB,WAAW,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAA,EAAA,EACnB,UAAU,GAIR,KAAK,WAJG,EACV,QAAQ,GAGN,KAAK,CAAA,QAHC,EACR,EAEE,GAAA,KAAK,KAFS,EAAhB,IAAI,mBAAG,SAAS,GAAA,EAAA,EACb,KAAK,GAAA,MAAA,CACN,KAAK,EAPH,CAAA,SAAA,EAAA,aAAA,EAAA,YAAA,EAAA,UAAA,EAAA,MAAA,CAOL,CADS,CACD;AACD,IAAA,IAAA,IAAI,GAAK,KAAK,CAAA,IAAV,CAAU;IAChB,IAAA,EAAA,GAAyB,aAAa,CAAC;AAC3C,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,cAAc,EAAE,WAAW;AAC3B,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,SAAS,EAAE,WAAW;AACvB,KAAA,CAAC,EALK,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,QAKzB,CAAA;;IAGI,IAAA,EAAA,GAA8B,QAAQ,CAAC,KAAK,CAAC,EAA5C,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAmB,CAAA;IAC7C,IAAA,EAAA,GAA8B,QAAQ,CAAC,KAAK,CAAC,EAA5C,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAmB,CAAA;IAEnD,IAAM,gBAAgB,GAAG,WAAW,CAAC,YAAA;QACnC,aAAa,CAAC,IAAI,CAAC,CAAA;KACpB,EAAE,EAAE,CAAC,CAAA;IAEN,IAAM,eAAe,GAAG,WAAW,CAAC,YAAA;QAClC,aAAa,CAAC,IAAI,CAAC,CAAA;KACpB,EAAE,EAAE,CAAC,CAAA;IAEN,IAAM,gBAAgB,GAAG,WAAW,CAAC,YAAA;QACnC,aAAa,CAAC,KAAK,CAAC,CAAA;KACrB,EAAE,EAAE,CAAC,CAAA;IAEN,IAAM,aAAa,GAAG,WAAW,CAAC,YAAA;QAChC,aAAa,CAAC,KAAK,CAAC,CAAA;KACrB,EAAE,EAAE,CAAC,CAAA;IAEN,IAAM,aAAa,GAAG,WAAW,CAAC,YAAA;QAChC,aAAa,CAAC,IAAI,CAAC,CAAA;QACnB,aAAa,CAAC,IAAI,CAAC,CAAA;KACpB,EAAE,EAAE,CAAC,CAAA;IAEN,IAAM,cAAc,GAAG,WAAW,CAAC,YAAA;QACjC,aAAa,CAAC,KAAK,CAAC,CAAA;QACpB,aAAa,CAAC,KAAK,CAAC,CAAA;KACrB,EAAE,EAAE,CAAC,CAAA;IAEN,SAAS,CAAC,eAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAE5B,IAAM,WAAW,GAAG,WAAW,CAAC,YAAA;AAC9B,QAAA,IAAI,KAAK,EAAE;AACT,YAAA,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,UAAU,EAAI,CAAA;AACf,SAAA;AAAM,aAAA;AACL,YAAA,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,QAAQ,EAAI,CAAA;AACb,SAAA;AACD,QAAA,aAAa,CAAC,CAAC,KAAK,CAAC,CAAA;KACtB,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEhD,IAAM,YAAY,GAAG,KAAK,CAAA;IAC1B,IAAI,IAAI,GAAyB,cAAc,CAAA;AAC/C,IAAA,IAAI,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAA;AAC1B,IAAA,IAAI,YAAY,IAAI,CAAC,UAAU,EAAE;QAC/B,IAAI,GAAG,iBAAiB,CAAA;AACxB,QAAA,IAAI,GAAG,QAAQ,CAAC,SAAS,CAAA;AAC1B,KAAA;AAAM,SAAA,IAAI,YAAY,IAAI,UAAU,IAAI,CAAC,UAAU,EAAE;QACpD,IAAI,GAAG,gBAAgB,CAAA;AACvB,QAAA,IAAI,GAAG,QAAQ,CAAC,QAAQ,CAAA;AACzB,KAAA;IAEK,IAAA,EAAA,GAA0B,QAAQ,EAAE,EAAlC,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,YAAY,GAAA,EAAA,CAAA,YAAe,CAAA;AAE1C,IAAA,IAAM,SAAS,GACb,YAAY,IAAI,UAAU,IAAI,UAAU;AACtC,UAAE,KAAK,CAAC,MAAM,CAAC,KAAK;AACpB,UAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAA;AAE3B,IAAA,IAAM,OAAO,GAAc;AACzB,QAAA,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,IAAI,KAAK,OAAO,GAAG,GAAG,GAAG,GAAG;AACtC,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,UAAU,EAAE,MAAM;AAClB,QAAA,YAAY,EAAE,OAAO,KAAK,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,CAAC;AACvE,QAAA,UAAU,EAAE,UAAU;AACpB,cAAE,KAAK,CAAC,OAAO,CAAC,IAAI;cAClB,YAAY,IAAI,UAAU;AAC5B,kBAAE,KAAK,CAAC,OAAO,CAAC,OAAO;AACvB,kBAAE,KAAK,CAAC,MAAM,CAAC,KAAK;AACtB,QAAA,MAAM,EAAE,YACN,CAAA,MAAA,CAAA,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CACvD;KACH,CAAA;;AAGD,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAI,UAAU,EAAE;AACd,YAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;YACnD,OAAO,YAAA;AACL,gBAAA,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;AACxD,aAAC,CAAA;AACF,SAAA;AACD,QAAA,OAAO,SAAS,CAAA;AAClB,KAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAA;AAE/B,IAAA,IAAM,SAAS,GAAG;AAChB,QAAA,YAAY,EAAE,gBAAgB;AAC9B,QAAA,YAAY,EAAE,gBAAgB;AAC9B,QAAA,WAAW,EAAE,eAAe;AAC5B,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,UAAU,EAAE,cAAc;KAC3B,CAAA;AAED,IAAA,IAAM,WAAW,GAAG,IAAI,KAAK,UAAU,GAAG,SAAS,GAAG,KAAK,CAAA;AAC3D,IAAA,IAAM,UAAU,GAAG,IAAI,KAAK,UAAU,GAAG,KAAK,GAAG,SAAS,CAAA;IAE1D,QACEA,IAAC,CAAA,IAAI,EACH,QAAA,CAAA,EAAA,EAAE,EAAE,IAAI,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,EAC5C,CAAC,EAAE,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,EAAE,EAC7B,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,GAAG,EAAC,IAAI,EACR,EAAE,EAAC,GAAG,EACN,GAAG,EAAE,OAAO;;AAEZ,QAAA,OAAO,EAAE,WAAW,EAAA,EAChB,WAAW,EACX,SAAS,eAGbC,GAAC,CAAA,IAAI,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAA,CAAI,EACnEA,GAAC,CAAA,IAAI,aACH,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,IAAI,KAAK,OAAO,GAAG,GAAG,GAAG,GAAG,EAClC,QAAQ,EAAC,SAAS,EAClB,GAAG,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAExB,EAAA,EAAA,QAAA,EAAA,IAAI,IACA,EACN,IAAI,KAAK,UAAU,IAClBA,IAAC,SAAS,EAAA,QAAA,CAAA,EAAA,EAAK,UAAU,EAAE,EAAA,OAAO,EAAE,WAAW,EAAA,CAAA,CAAI,IACjD,IAAI,CAAA,EAAA,CAAA,CACH,EACR;AACH;;;;"}

package/dist/components/button/FollowButton/FollowButton.stories.d.ts

@@ -0,0 +1,23 @@
+import type { Meta } from '@storybook/react';
+import { FollowButton } from './FollowButton';
+import type { FollowButtonProps } from './types';
+declare const meta: Meta<typeof FollowButton>;
+export default meta;
+export declare const Default: {};
+export declare const Pill: {
+    args: {
+        variant: string;
+    };
+};
+export declare const Variants: {
+    render: (props: FollowButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export declare const Sizes: {
+    render: (props: FollowButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export declare const AsCheckbox: {
+    render: (props: FollowButtonProps & {
+        type: 'checkbox';
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=FollowButton.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FollowButton.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FollowButton/FollowButton.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAI5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAchD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAInC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,OAAO,IAAK,CAAA;AAEzB,eAAO,MAAM,IAAI;;;;CAIhB,CAAA;AAuBD,eAAO,MAAM,QAAQ;oBArBW,iBAAiB;CAuBhD,CAAA;AAuBD,eAAO,MAAM,KAAK;oBArBW,iBAAiB;CAuB7C,CAAA;AAeD,eAAO,MAAM,UAAU;oBAbW,iBAAiB,GAAG;QAAE,IAAI,EAAE,UAAU,CAAA;KAAE;CAezE,CAAA"}

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

@@ -0,0 +1,32 @@
+import type { ComponentPropsWithoutRef } from 'react';
+type InputProps = ({
+    type: 'checkbox';
+} & Omit<ComponentPropsWithoutRef<'input'>, 'chiildren' | 'size'>) | ({
+    type?: 'button' | undefined;
+} & Omit<ComponentPropsWithoutRef<'button'>, 'children'>);
+export type FollowButtonProps = {
+    /**
+     * Swap between the default (squared) and pill (rounded) forms.
+     * @default default
+     */
+    variant?: 'default' | 'pill';
+    /**
+     * Swap between the default and small sizes.
+     * @default default
+     */
+    size?: 'default' | 'small';
+    /**
+     * The current state of the button
+     */
+    isFollowing?: boolean;
+    /**
+     * Callback for when a follow is triggered.
+     */
+    onFollow?: () => void;
+    /**
+     * Callback for when an unfollow is triggered.
+     */
+    onUnfollow?: () => void;
+} & InputProps;
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FollowButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAErD,KAAK,UAAU,GACX,CAAC;IACC,IAAI,EAAE,UAAU,CAAA;CACjB,GAAG,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC,GAClE,CAAC;IACC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;CAC5B,GAAG,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC,CAAA;AAE7D,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAE5B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAE1B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB,GAAG,UAAU,CAAA"}

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { type CSSObject } from '@emotion/react';
+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'>;
+/**
+ * The icon component allows you to pass in an icon and
+ * apply color and sizing properties.
+ */
+export declare const IconButton: (props: {
+    icon: IconComponent;
+    ripple?: boolean | undefined;
+    'aria-label': string;
+    iconCss?: CSSObject | undefined;
+} & Pick<IconProps, "color" | "size" | "shadow" | "height" | "width"> & Pick<BaseButtonProps, "disabled" | "type" | "className" | "onClick"> & 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

@@ -0,0 +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,CAAC,eAAe,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC,CAAA;AAEtE;;;GAGG;AACH,eAAO,MAAM,UAAU;UAXf,aAAa;;kBAEL,MAAM;;iSAiErB,CAAA"}

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

@@ -0,0 +1,38 @@
+import { __rest, __assign } from '../../../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useTheme } from '@emotion/react';
+import { BaseButton } from '../BaseButton/BaseButton.js';
+
+/**
+ * The icon component allows you to pass in an icon and
+ * apply color and sizing properties.
+ */
+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, other = __rest(props, ["icon", "color", "size", "shadow", "ripple", "height", "width", "iconCss"]);
+    var disabled = other.disabled;
+    var _b = useTheme(), color = _b.color, cornerRadius = _b.cornerRadius, spacing = _b.spacing;
+    var buttonCss = {
+        background: 'transparent',
+        border: 'none',
+        borderRadius: '50%',
+        padding: spacing.xs,
+        overflow: 'unset'
+    };
+    var rippleCss = {
+        '&:hover': {
+            backgroundColor: color.neutral.n100
+        },
+        '&:active': {
+            backgroundColor: color.neutral.n150
+        },
+        '&:focus-visible': {
+            border: "1px solid ".concat(color.secondary.secondary),
+            borderRadius: cornerRadius.s
+        }
+    };
+    return (jsx(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 }) })));
+});
+
+export { IconButton };
+//# sourceMappingURL=IconButton.js.map

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

@@ -0,0 +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<BaseButtonProps, 'onClick' | 'disabled' | 'className' | 'type'>\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      ...other\n    } = props\n    const { disabled } = other\n    const { color, cornerRadius, spacing } = useTheme()\n\n    const buttonCss: CSSObject = {\n      background: 'transparent',\n      border: 'none',\n      borderRadius: '50%',\n      padding: spacing.xs,\n      overflow: 'unset'\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      </BaseButton>\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":";;;;;;AAiBA;;;AAGG;IACU,UAAU,GAAG,UAAU,CAClC,UAAC,KAAsB,EAAE,GAAG,EAAA;IAExB,IAAM,IAAI,GASR,KAAK,CAAA,IATG,EACH,SAAS,GAQd,KAAK,CAAA,KARS,EAChB,EAAA,GAOE,KAAK,CAPG,IAAA,EAAV,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,GAAG,GAAA,EAAA,EACV,MAAM,GAMJ,KAAK,CAAA,MAND,EACN,MAAM,GAKJ,KAAK,CAAA,MALD,EACN,MAAM,GAIJ,KAAK,CAJD,MAAA,EACN,KAAK,GAGH,KAAK,CAAA,KAHF,EACL,OAAO,GAEL,KAAK,CAAA,OAFA,EACJ,KAAK,UACN,KAAK,EAVH,CAUL,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,CAAA,CADS,CACD;AACD,IAAA,IAAA,QAAQ,GAAK,KAAK,CAAA,QAAV,CAAU;AACpB,IAAA,IAAA,EAAmC,GAAA,QAAQ,EAAE,EAA3C,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAe,CAAA;AAEnD,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;KAClB,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,GAAA,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,EAErCA,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,EAAA,CAAA,CACS,EACd;AACH,CAAC;;;;"}

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { IconButton } from './IconButton';
+declare const meta: Meta<typeof IconButton>;
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+export declare const Primary: Story;
+export declare const Default: Story;
+export declare const Size: Story;
+export declare const Color: Story;
+export declare const Ripple: Story;
+//# sourceMappingURL=IconButton.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/button/IconButton/IconButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKtD,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;AAE1D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAYjC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAErB,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAUlB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAA"}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * A plain Button component (no border/background). Includes a few variants and options to
+ * include and position icons.
+ */
+export declare const PlainButton: (props: {
+    variant?: import("./types").PlainButtonVariant | undefined;
+    size?: import("./types").PlainButtonSize | undefined;
+} & Omit<import("../BaseButton/types").BaseButtonProps, "styles"> & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+//# sourceMappingURL=PlainButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlainButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/PlainButton/PlainButton.tsx"],"names":[],"mappings":";AAQA;;;GAGG;AACH,eAAO,MAAM,WAAW;;;sNAoFvB,CAAA"}