@audius/harmony 0.0.29 → 0.0.34

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

@@ -6,14 +6,14 @@ 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 { Popup } from '../../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 selectionProp = props.selection, label = props.label, options = props.options, onSelect = props.onSelect, disabled = props.disabled, _c = props.variant, variant = _c === void 0 ? 'fillContainer' : _c, _d = props.size, size = _d === void 0 ? 'default' : _d, _e = props.iconRight, iconRight = _e === void 0 ? IconCaretDown : _e, popupAnchorOrigin = props.popupAnchorOrigin, popupTransformOrigin = props.popupTransformOrigin, popupPortalLocation = props.popupPortalLocation, popupZIndex = props.popupZIndex;
     var _f = useTheme(), color = _f.color, cornerRadius = _f.cornerRadius, spacing = _f.spacing, typography = _f.typography;
     var _g = useControlled({
         controlledProp: selectionProp,
@@ -61,8 +61,8 @@ var FilterButton = forwardRef(function FilterButton(props, ref) {
         : {};
     // 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': {
+            ? color.static.white
+            : color.text.default, gap: spacing.xs, fontSize: typography.size.s, fontWeight: typography.weight.demiBold, lineHeight: typography.lineHeight.s, opacity: disabled ? 0.6 : 1, '&:hover': {
             border: "1px solid ".concat(color.neutral.n800),
             transform: 'none'
         }, '&:active': __assign(__assign({}, activeStyle), { transform: 'none' }) }, (size === 'small' ? smallStyles : defaultStyles)), (isOpen ? activeStyle : {})), (variant === 'fillContainer' && selection !== null
@@ -116,7 +116,7 @@ var FilterButton = forwardRef(function FilterButton(props, ref) {
             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) {
+            : iconRight, disabled: disabled, "aria-haspopup": 'listbox', "aria-expanded": isOpen }, { children: [selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : label, jsx(Popup, __assign({ anchorRef: ref || anchorRef, isVisible: isOpen, onClose: function () { return setIsOpen(false); }, anchorOrigin: popupAnchorOrigin, transformOrigin: popupTransformOrigin, portalLocation: popupPortalLocation, zIndex: popupZIndex }, { children: jsx(Paper, __assign({ mt: 's', border: 'strong', shadow: 'far' }, { children: jsx(Box, __assign({ p: 's' }, { children: jsx(Flex, __assign({ direction: 'column', alignItems: 'flex-start', justifyContent: 'center', role: 'listbox', "aria-label": (_b = selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : label) !== null && _b !== void 0 ? _b : props['aria-label'], "aria-activedescendant": selectedLabel }, { children: options.map(function (option) {
                                 var _a, _b;
                                 return (jsx(BaseButton, __assign({ iconLeft: option.icon, styles: {
                                         button: optionCss,

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, RefObject, useRef, useState, useCallback } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { BaseButton } from 'components/button/BaseButton/BaseButton'\nimport { Box, Flex, Paper } from 'components/layout'\nimport { Popup } from 'components/popup'\nimport { useControlled } from 'hooks/useControlled'\nimport { IconCaretDown, IconCloseAlt } from 'icons'\n\nimport { FilterButtonOption, FilterButtonProps } from './types'\n\nexport const FilterButton = forwardRef<HTMLButtonElement, FilterButtonProps>(\n  function FilterButton(props, ref) {\n    const {\n      selection: selectionProp,\n      label,\n      options,\n      onSelect,\n      disabled,\n      variant = 'fillContainer',\n      size = 'default',\n      iconRight = IconCaretDown,\n      popupAnchorOrigin,\n      popupTransformOrigin,\n      popupPortalLocation,\n      popupZIndex\n    } = props\n    const { color, cornerRadius, spacing, typography } = useTheme()\n    const [selection, setSelection] = useControlled({\n      controlledProp: selectionProp,\n      defaultValue: null,\n      stateName: 'selection',\n      componentName: 'FilterButton'\n    })\n    const selectedOption = options.find((option) => option.value === selection)\n    const selectedLabel = selectedOption?.label ?? selectedOption?.value\n\n    const [isOpen, setIsOpen] = useState(false)\n\n    // Size Styles\n    const defaultStyles: CSSObject = {\n      paddingLeft: spacing.m,\n      paddingRight: spacing.m,\n      paddingTop: spacing.s,\n      paddingBottom: spacing.s\n    }\n    const defaultIconStyles: CSSObject = {\n      width: spacing.unit4,\n      height: spacing.unit4\n    }\n\n    const smallStyles: CSSObject = {\n      paddingLeft: spacing.m,\n      paddingRight: spacing.m,\n      paddingTop: spacing.xs,\n      paddingBottom: spacing.xs\n    }\n    const smallIconStyles: CSSObject = {\n      width: spacing.unit3,\n      height: spacing.unit3\n    }\n\n    const fillContainerStyles: CSSObject = {\n      background: color.secondary.s400,\n      border: `1px solid ${color.secondary.s400}`,\n      '&:hover': {\n        border: `1px solid ${color.secondary.s400}`,\n        transform: 'none'\n      }\n    }\n\n    const activeStyle =\n      variant !== 'fillContainer' || selection === null\n        ? {\n            border: `1px solid ${color.border.strong}`,\n            background: color.background.surface2\n          }\n        : {}\n\n    // Button Styles\n    const buttonCss: CSSObject = {\n      background: 'transparent',\n      border: `1px solid ${color.border.strong}`,\n      borderRadius: cornerRadius.s,\n      color:\n        variant === 'fillContainer' && selection !== null\n          ? color.static.white\n          : color.text.default,\n      gap: spacing.xs,\n      fontSize: typography.size.s,\n      fontWeight: typography.weight.demiBold,\n      lineHeight: typography.lineHeight.s,\n      opacity: disabled ? 0.6 : 1,\n\n      '&:hover': {\n        border: `1px solid ${color.neutral.n800}`,\n        transform: 'none'\n      },\n\n      '&:active': {\n        ...activeStyle,\n        transform: 'none'\n      },\n\n      ...(size === 'small' ? smallStyles : defaultStyles),\n      ...(isOpen ? activeStyle : {}),\n      ...(variant === 'fillContainer' && selection !== null\n        ? fillContainerStyles\n        : {})\n    }\n\n    const iconCss = size === 'small' ? smallIconStyles : defaultIconStyles\n\n    // Popup Styles\n    const optionCss: CSSObject = {\n      background: 'transparent',\n      border: 'none',\n      color: color.text.default,\n      fontWeight: typography.weight.medium,\n      gap: spacing.s,\n      paddingLeft: spacing.m,\n      paddingRight: spacing.m,\n      paddingTop: spacing.s,\n      paddingBottom: spacing.s,\n      width: '100%',\n      borderRadius: cornerRadius.s,\n      justifyContent: 'flex-start',\n\n      '&:hover': {\n        transform: 'none',\n        backgroundColor: color.secondary.s300,\n        color: color.special.white\n      },\n\n      '&:active': {\n        transform: 'none'\n      }\n    }\n    const optionIconCss: CSSObject = {\n      width: spacing.unit4,\n      height: spacing.unit4\n    }\n\n    const handleButtonClick = useCallback(() => {\n      if (variant === 'fillContainer' && selection !== null) {\n        setSelection(null)\n        // @ts-ignore\n        onSelect?.(null)\n      } else {\n        setIsOpen((isOpen: boolean) => !isOpen)\n      }\n    }, [selection, variant, setIsOpen, setSelection, onSelect])\n\n    const handleOptionSelect = useCallback(\n      (option: FilterButtonOption) => {\n        setSelection(option.value)\n        onSelect?.(option.value)\n      },\n      [onSelect, setSelection]\n    )\n\n    const anchorRef = useRef<HTMLButtonElement>(null)\n\n    return (\n      <BaseButton\n        ref={ref || anchorRef}\n        styles={{\n          button: buttonCss,\n          icon: iconCss\n        }}\n        onClick={handleButtonClick}\n        iconRight={\n          variant === 'fillContainer' && selection !== null\n            ? IconCloseAlt\n            : iconRight\n        }\n        disabled={disabled}\n        aria-haspopup='listbox'\n        aria-expanded={isOpen}\n      >\n        {selectedLabel ?? label}\n        <Popup\n          anchorRef={(ref as RefObject<HTMLElement>) || anchorRef}\n          isVisible={isOpen}\n          onClose={() => setIsOpen(false)}\n          anchorOrigin={popupAnchorOrigin}\n          transformOrigin={popupTransformOrigin}\n          portalLocation={popupPortalLocation}\n          zIndex={popupZIndex}\n        >\n          <Paper mt='s' border='strong' shadow='far'>\n            <Box p='s'>\n              <Flex\n                direction='column'\n                alignItems='flex-start'\n                justifyContent='center'\n                role='listbox'\n                aria-label={selectedLabel ?? label ?? props['aria-label']}\n                aria-activedescendant={selectedLabel}\n              >\n                {options.map((option) => (\n                  <BaseButton\n                    key={option.value}\n                    iconLeft={option.icon}\n                    styles={{\n                      button: optionCss,\n                      icon: optionIconCss\n                    }}\n                    onClick={() => handleOptionSelect(option)}\n                    aria-label={option.label ?? option.value}\n                    role='option'\n                  >\n                    {option.label ?? option.value}\n                  </BaseButton>\n                ))}\n              </Flex>\n            </Box>\n          </Paper>\n        </Popup>\n      </BaseButton>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -1 +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"}
+{"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,KAqB3B,CAAA"}

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

@@ -1,5 +1,5 @@
 import { IconComponent } from "../../icon";
-import { Origin } from "../../layout/Popup/types";
+import { Origin } from "../../popup/types";
 export type FilterButtonSize = 'default' | 'small';
 export type FilterButtonVariant = 'fillContainer' | 'replaceLabel';
 export type FilterButtonOption = {
@@ -55,7 +55,7 @@ export type FilterButtonProps = {
     /**
      * Whether interaction is disabled
      */
-    isDisabled?: boolean;
+    disabled?: boolean;
     /**
      * Popup anchor origin
      * @default { horizontal: 'center', vertical: 'bottom' }

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,aAAa,EAAE,mBAAuB;AAC/C,OAAO,EAAE,MAAM,EAAE,0BAA8B;AAE/C,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,CAAA;AAElD,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAAG,cAAc,CAAA;AAElE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAE7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAEzB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAA;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAA;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAElC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAE7B;;OAEG;IACH,mBAAmB,CAAC,EAAE,WAAW,CAAA;IAEjC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA"}

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

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 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;
+export declare const FollowButton: (props: FollowButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 //# sourceMappingURL=FollowButton.d.ts.map

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

@@ -1 +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"}
+{"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,gLAyLxB,CAAA"}

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

@@ -1,15 +1,15 @@
 import { __rest, __assign } from '../../../_virtual/_tslib.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { useState, useCallback, useEffect } from 'react';
+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';
 
-var messages = {
+var defaultMessages = {
     follow: 'Follow',
     following: 'Following',
     unfollow: 'Unfollow'
@@ -29,18 +29,19 @@ var InputRoot = styled.input({
 /**
  * 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 FollowButton = forwardRef(function (props, ref) {
+    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, _d = props.fullWidth, fullWidth = _d === void 0 ? true : _d, messagesProp = props.messages, other = __rest(props, ["variant", "isFollowing", "onUnfollow", "onFollow", "size", "fullWidth", "messages"]);
+    var messages = __assign(__assign({}, defaultMessages), messagesProp);
     var type = other.type;
-    var _d = useControlled({
+    var _e = useControlled({
         componentName: 'FollowButton',
         controlledProp: isFollowing,
         defaultValue: undefined,
         stateName: 'following'
-    }), value = _d[0], setValueState = _d[1];
+    }), value = _e[0], setValueState = _e[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 _f = useState(false), isHovering = _f[0], setIsHovering = _f[1];
+    var _g = useState(false), isPressing = _g[0], setIsPressing = _g[1];
     var handleMouseEnter = useCallback(function () {
         setIsHovering(true);
     }, []);
@@ -82,22 +83,49 @@ var FollowButton = function (props) {
         Icon = IconUserUnfollow;
         text = messages.unfollow;
     }
-    var _g = useTheme(), color = _g.color, cornerRadius = _g.cornerRadius;
+    var _h = useTheme(), color = _h.color, cornerRadius = _h.cornerRadius, motion = _h.motion, shadows = _h.shadows;
     var textColor = checkedValue || isHovering || isPressing
         ? color.static.white
         : color.primary.primary;
+    var borderRadius = variant === 'pill' ? cornerRadius['2xl'] : cornerRadius.s;
     var rootCss = {
         cursor: 'pointer',
         minWidth: size === 'small' ? 128 : 152,
-        width: '100%',
+        width: fullWidth ? '100%' : undefined,
         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)
+        borderRadius: borderRadius,
+        backgroundColor: checkedValue
+            ? color.primary.primary
+            : color.special.white,
+        boxShadow: shadows.near,
+        border: "1px solid ".concat(color.primary.primary),
+        transition: "\n        transform ".concat(motion.hover, ",\n        border-color ").concat(motion.hover, ",\n        background-color ").concat(motion.hover, ",\n        color ").concat(motion.hover, "\n      "),
+        '::before': {
+            content: '""',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderRadius: borderRadius
+        },
+        '&:hover': {
+            backgroundColor: color.primary.primary,
+            borderWidth: 0,
+            boxShadow: shadows.mid,
+            '&::before': {
+                backgroundColor: 'rgba(255, 255, 255, 0.2)'
+            }
+        },
+        '&:active': {
+            backgroundColor: color.primary.primary,
+            borderWidth: 0,
+            boxShadow: 'none',
+            '&::before': {
+                backgroundColor: 'rgba(0, 0, 0, 0.2)'
+            }
+        }
     };
     // Handles case where user mouses down, moves cursor, and mouses up
     useEffect(function () {
@@ -119,10 +147,14 @@ var FollowButton = function (props) {
     };
     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, 
+    return (jsxs(Flex
+    // @ts-ignore flex not smart enough
+    , __assign({ 
         // @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] })));
-};
+        ref: ref, 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', tag: 'span', 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

@@ -1 +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":"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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/FollowButton/types.d.ts

@@ -27,6 +27,12 @@ export type FollowButtonProps = {
      * Callback for when an unfollow is triggered.
      */
     onUnfollow?: () => void;
+    fullWidth?: boolean;
+    messages?: {
+        follow?: string;
+        following?: string;
+        unfollow?: string;
+    };
 } & InputProps;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +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"}
+{"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;IAEvB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE;QACT,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;CACF,GAAG,UAAU,CAAA"}

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'>;
+} & Pick<IconProps, 'color' | 'size' | 'shadow' | 'height' | 'width'> & Pick<BaseButtonProps, 'onClick' | 'disabled' | 'className' | 'type' | 'children'>;
 /**
  * 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" | "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"> & 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,CAAC,eAAe,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC,CAAA;AAEtE;;;GAGG;AACH,eAAO,MAAM,UAAU;UAXf,aAAa;;kBAEL,MAAM;;iSAiErB,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,CAC3D,CAAA;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU;UAdf,aAAa;;kBAEL,MAAM;;8SAwFrB,CAAA"}

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

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

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

@@ -1,14 +1,10 @@
 import type { ButtonProps } from '../Button/types';
 type SocialMedia = 'tiktok' | 'instagram' | 'twitter';
-export type SocialButtonProps = Omit<ButtonProps, 'aria-label'> & {
+export type SocialButtonProps = ButtonProps & {
     /**
      * Which social media.
      */
     socialType: SocialMedia;
-    /**
-     * Aria label text. Required since these buttons just have icons
-     */
-    'aria-label': string;
 };
 export declare const SocialButton: (props: SocialButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"SocialButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/SocialButton/SocialButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,KAAK,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAA;AAGrD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG;IAChE;;OAEG;IACH,UAAU,EAAE,WAAW,CAAA;IACvB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAmBD,eAAO,MAAM,YAAY,UAAW,iBAAiB,qDAuBpD,CAAA"}
+{"version":3,"file":"SocialButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/SocialButton/SocialButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,KAAK,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAA;AAGrD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG;IAC5C;;OAEG;IACH,UAAU,EAAE,WAAW,CAAA;CACxB,CAAA;AAmBD,eAAO,MAAM,YAAY,UAAW,iBAAiB,qDAsBpD,CAAA"}

package/dist/components/button/SocialButton/SocialButton.js

@@ -28,7 +28,7 @@ var SocialButton = function (props) {
         background: "radial-gradient(61.46% 59.09% at 36.25% 96.55%, #ffd600 0%, #ff6930 48.44%, #fe3b36 73.44%, rgba(254, 59, 54, 0) 100%),\n      radial-gradient(202.83% 136.37% at 84.5% 113.5%, #ff1b90 24.39%, #f80261 43.67%, #ed00c0 68.85%, #c500e9 77.68%, #7017ff 89.32%)"
     };
     var SocialLogo = socialLogos[socialType];
-    return (jsx(Button, __assign({}, socialButtonProps, rest, { css: __assign({ border: 'transparent' }, (socialType === 'instagram' && instagramBackgroundCss)) }, { children: jsx(SocialLogo, { color: 'staticWhite', size: 'l' }) })));
+    return (jsx(Button, __assign({}, socialButtonProps, rest, { css: __assign({ border: 'transparent' }, (socialType === 'instagram' && instagramBackgroundCss)), iconLeft: SocialLogo })));
 };
 
 export { SocialButton };

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

@@ -1 +1 @@
-{"version":3,"file":"SocialButton.js","sources":["../../../../src/components/button/SocialButton/SocialButton.tsx"],"sourcesContent":["import type { CSSObject } from '@emotion/react'\n\nimport { IconInstagram, IconTikTok, IconTwitter } from 'icons'\n\nimport { Button } from '../Button/Button'\nimport type { ButtonProps } from '../Button/types'\n\ntype SocialMedia = 'tiktok' | 'instagram' | 'twitter'\n\n// Omitting aria-label from original type purely for showing in Storybook\nexport type SocialButtonProps = Omit<ButtonProps, 'aria-label'> & {\n  /**\n   * Which social media.\n   */\n  socialType: SocialMedia\n  /**\n   * Aria label text. Required since these buttons just have icons\n   */\n  'aria-label': string\n}\n\nconst socialLogos = {\n  tiktok: IconTikTok,\n  instagram: IconInstagram,\n  twitter: IconTwitter\n}\n\nconst getSocialButtonProps = (type: SocialMedia): ButtonProps => {\n  switch (type) {\n    case 'tiktok':\n      return { hexColor: '#fe2c55' }\n    case 'twitter':\n      return { hexColor: '#1ba1f1' }\n    default:\n      return {}\n  }\n}\n\nexport const SocialButton = (props: SocialButtonProps) => {\n  const { socialType, ...rest } = props\n  const socialButtonProps = getSocialButtonProps(socialType)\n\n  const instagramBackgroundCss: CSSObject = {\n    background: `radial-gradient(61.46% 59.09% at 36.25% 96.55%, #ffd600 0%, #ff6930 48.44%, #fe3b36 73.44%, rgba(254, 59, 54, 0) 100%),\n      radial-gradient(202.83% 136.37% at 84.5% 113.5%, #ff1b90 24.39%, #f80261 43.67%, #ed00c0 68.85%, #c500e9 77.68%, #7017ff 89.32%)`\n  }\n\n  const SocialLogo = socialLogos[socialType]\n\n  return (\n    <Button\n      {...socialButtonProps}\n      {...rest}\n      css={{\n        border: 'transparent',\n        ...(socialType === 'instagram' && instagramBackgroundCss)\n      }}\n    >\n      <SocialLogo color='staticWhite' size='l' />\n    </Button>\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;AAqBA,IAAM,WAAW,GAAG;AAClB,IAAA,MAAM,EAAE,UAAU;AAClB,IAAA,SAAS,EAAE,aAAa;AACxB,IAAA,OAAO,EAAE,WAAW;CACrB,CAAA;AAED,IAAM,oBAAoB,GAAG,UAAC,IAAiB,EAAA;AAC7C,IAAA,QAAQ,IAAI;AACV,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAA;AAChC,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAA;AAChC,QAAA;AACE,YAAA,OAAO,EAAE,CAAA;AACZ,KAAA;AACH,CAAC,CAAA;AAEM,IAAM,YAAY,GAAG,UAAC,KAAwB,EAAA;IAC3C,IAAA,UAAU,GAAc,KAAK,CAAnB,UAAA,EAAK,IAAI,GAAA,MAAA,CAAK,KAAK,EAA/B,CAAuB,YAAA,CAAA,CAAF,CAAU;AACrC,IAAA,IAAM,iBAAiB,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAA;AAE1D,IAAA,IAAM,sBAAsB,GAAc;AACxC,QAAA,UAAU,EAAE,iQACuH;KACpI,CAAA;AAED,IAAA,IAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,CAAA;AAE1C,IAAA,QACEA,GAAA,CAAC,MAAM,EAAA,QAAA,CAAA,EAAA,EACD,iBAAiB,EACjB,IAAI,EACR,EAAA,GAAG,aACD,MAAM,EAAE,aAAa,EAAA,GACjB,UAAU,KAAK,WAAW,IAAI,sBAAsB,EAAC,EAAA,EAAA,EAAA,QAAA,EAG3DA,GAAC,CAAA,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,EAAG,CAAA,EAAA,CAAA,CACpC,EACV;AACH;;;;"}
+{"version":3,"file":"SocialButton.js","sources":["../../../../src/components/button/SocialButton/SocialButton.tsx"],"sourcesContent":["import type { CSSObject } from '@emotion/react'\n\nimport { IconInstagram, IconTikTok, IconTwitter } from 'icons'\n\nimport { Button } from '../Button/Button'\nimport type { ButtonProps } from '../Button/types'\n\ntype SocialMedia = 'tiktok' | 'instagram' | 'twitter'\n\n// Omitting aria-label from original type purely for showing in Storybook\nexport type SocialButtonProps = ButtonProps & {\n  /**\n   * Which social media.\n   */\n  socialType: SocialMedia\n}\n\nconst socialLogos = {\n  tiktok: IconTikTok,\n  instagram: IconInstagram,\n  twitter: IconTwitter\n}\n\nconst getSocialButtonProps = (type: SocialMedia): ButtonProps => {\n  switch (type) {\n    case 'tiktok':\n      return { hexColor: '#fe2c55' }\n    case 'twitter':\n      return { hexColor: '#1ba1f1' }\n    default:\n      return {}\n  }\n}\n\nexport const SocialButton = (props: SocialButtonProps) => {\n  const { socialType, ...rest } = props\n  const socialButtonProps = getSocialButtonProps(socialType)\n\n  const instagramBackgroundCss: CSSObject = {\n    background: `radial-gradient(61.46% 59.09% at 36.25% 96.55%, #ffd600 0%, #ff6930 48.44%, #fe3b36 73.44%, rgba(254, 59, 54, 0) 100%),\n      radial-gradient(202.83% 136.37% at 84.5% 113.5%, #ff1b90 24.39%, #f80261 43.67%, #ed00c0 68.85%, #c500e9 77.68%, #7017ff 89.32%)`\n  }\n\n  const SocialLogo = socialLogos[socialType]\n\n  return (\n    <Button\n      {...socialButtonProps}\n      {...rest}\n      css={{\n        border: 'transparent',\n        ...(socialType === 'instagram' && instagramBackgroundCss)\n      }}\n      iconLeft={SocialLogo}\n    />\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;AAiBA,IAAM,WAAW,GAAG;AAClB,IAAA,MAAM,EAAE,UAAU;AAClB,IAAA,SAAS,EAAE,aAAa;AACxB,IAAA,OAAO,EAAE,WAAW;CACrB,CAAA;AAED,IAAM,oBAAoB,GAAG,UAAC,IAAiB,EAAA;AAC7C,IAAA,QAAQ,IAAI;AACV,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAA;AAChC,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAA;AAChC,QAAA;AACE,YAAA,OAAO,EAAE,CAAA;AACZ,KAAA;AACH,CAAC,CAAA;AAEM,IAAM,YAAY,GAAG,UAAC,KAAwB,EAAA;IAC3C,IAAA,UAAU,GAAc,KAAK,CAAnB,UAAA,EAAK,IAAI,GAAA,MAAA,CAAK,KAAK,EAA/B,CAAuB,YAAA,CAAA,CAAF,CAAU;AACrC,IAAA,IAAM,iBAAiB,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAA;AAE1D,IAAA,IAAM,sBAAsB,GAAc;AACxC,QAAA,UAAU,EAAE,iQACuH;KACpI,CAAA;AAED,IAAA,IAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,CAAA;IAE1C,QACEA,GAAC,CAAA,MAAM,EACD,QAAA,CAAA,EAAA,EAAA,iBAAiB,EACjB,IAAI,EACR,EAAA,GAAG,EACD,QAAA,CAAA,EAAA,MAAM,EAAE,aAAa,EAClB,GAAC,UAAU,KAAK,WAAW,IAAI,sBAAsB,EAE1D,EAAA,QAAQ,EAAE,UAAU,EACpB,CAAA,CAAA,EACH;AACH;;;;"}

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

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

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

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

package/dist/components/button/UnstyledButton.js

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

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

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

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

@@ -2,10 +2,11 @@ export { Button } from './Button/Button';
 export * from './Button/types';
 export { PlainButton } from './PlainButton/PlainButton';
 export * from './PlainButton/types';
-export { SocialButton } from './SocialButton/SocialButton';
+export { SocialButton, SocialButtonProps } from './SocialButton/SocialButton';
 export { FollowButton } from './FollowButton/FollowButton';
 export * from './FollowButton/types';
 export { FilterButton } from './FilterButton/FilterButton';
 export * from './FilterButton/types';
 export { IconButton, IconButtonProps } from './IconButton/IconButton';
+export { UnstyledButton } from './UnstyledButton';
 //# sourceMappingURL=index.d.ts.map

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

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

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

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