@audius/harmony 0.3.2 → 0.3.4

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

@@ -1 +1 @@
-{"version":3,"file":"FilterButtonOption.js","sources":["../../../../src/components/button/FilterButton/FilterButtonOption.tsx"],"sourcesContent":["import { forwardRef, MouseEventHandler, Ref, useCallback } from 'react'\n\nimport { CSSObject } from '@emotion/react'\n\nimport { Text } from '~harmony/components/text/Text'\nimport { useTheme } from '~harmony/foundations'\n\nimport { BaseButton } from '../BaseButton/BaseButton'\n\nimport { FilterButtonOptionType } from './types'\n\ntype FilterButtonOptionProps<Value extends string> = {\n  activeValue?: Value | null\n  isActive?: boolean\n  option: FilterButtonOptionType<Value>\n  onChange: (option: Value) => void\n}\n\nexport const FilterButtonOption = forwardRef(function <Value extends string>(\n  props: FilterButtonOptionProps<Value>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const { activeValue, option, onChange, isActive } = props\n  const { color, cornerRadius, spacing, typography } = useTheme()\n\n  // Popup Styles\n  const optionIconCss: CSSObject = {\n    width: spacing.unit4,\n    height: spacing.unit4\n  }\n\n  const activeOptionCss: CSSObject = {\n    transform: 'none',\n    backgroundColor: color.secondary.s300,\n    color: color.static.white\n  }\n\n  const optionCss: CSSObject = {\n    background: 'transparent',\n    border: 'none',\n    color: color.text.default,\n    fontWeight: typography.weight.medium,\n    gap: spacing.s,\n    paddingLeft: spacing.m,\n    paddingRight: spacing.m,\n    paddingTop: spacing.s,\n    paddingBottom: spacing.s,\n    width: '100%',\n    borderRadius: cornerRadius.s,\n    justifyContent: 'flex-start',\n\n    '&:hover': activeOptionCss,\n    '&:hover .helperText': {\n      color: color.static.white\n    },\n\n    '&:active': {\n      transform: 'none'\n    }\n  }\n\n  const handleChange = useCallback<MouseEventHandler>(\n    (e) => {\n      e.stopPropagation()\n      onChange(option.value)\n    },\n    [option.value, onChange]\n  )\n\n  return (\n    <BaseButton\n      ref={ref}\n      key={option.value}\n      iconLeft={option.icon}\n      styles={{\n        button: {\n          ...optionCss,\n          ...(option.value === activeValue || isActive ? activeOptionCss : {})\n        },\n        icon: optionIconCss\n      }}\n      aria-label={option.label ?? option.value}\n      role='option'\n      onClick={handleChange}\n    >\n      {option.leadingElement ?? null}\n      <Text variant='body' strength='strong'>\n        {option.label ?? option.value}\n      </Text>\n      {option.helperText ? (\n        <Text\n          variant='body'\n          strength='strong'\n          color={option.value === activeValue ? 'staticWhite' : 'subdued'}\n          className='helperText'\n        >\n          {option.helperText}\n        </Text>\n      ) : null}\n    </BaseButton>\n  )\n})\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"FilterButtonOption.js","sources":["../../../../src/components/button/FilterButton/FilterButtonOption.tsx"],"sourcesContent":["import { forwardRef, MouseEventHandler, Ref, useCallback } from 'react'\n\nimport { CSSObject } from '@emotion/react'\n\nimport { Text } from '~harmony/components/text/Text'\nimport { useTheme } from '~harmony/foundations'\n\nimport { BaseButton } from '../BaseButton/BaseButton'\n\nimport { FilterButtonOptionType } from './types'\n\ntype FilterButtonOptionProps<Value extends string> = {\n  activeValue?: Value | null\n  isActive?: boolean\n  option: FilterButtonOptionType<Value>\n  onChange: (option: Value) => void\n}\n\nexport const FilterButtonOption = forwardRef(function <Value extends string>(\n  props: FilterButtonOptionProps<Value>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const { activeValue, option, onChange, isActive } = props\n  const { color, cornerRadius, spacing, typography } = useTheme()\n\n  // Popup Styles\n  const optionIconCss: CSSObject = {\n    width: spacing.unit4,\n    height: spacing.unit4\n  }\n\n  const activeOptionCss: CSSObject = {\n    transform: 'none',\n    backgroundColor: color.secondary.s300,\n    color: color.static.white\n  }\n\n  const optionCss: CSSObject = {\n    background: 'transparent',\n    border: 'none',\n    color: color.text.default,\n    fontWeight: typography.weight.medium,\n    gap: spacing.s,\n    paddingLeft: spacing.m,\n    paddingRight: spacing.m,\n    paddingTop: spacing.s,\n    paddingBottom: spacing.s,\n    width: '100%',\n    borderRadius: cornerRadius.s,\n    justifyContent: 'flex-start',\n\n    '&:hover': activeOptionCss,\n    '&:hover .helperText': {\n      color: color.static.white\n    },\n\n    '&:active': {\n      transform: 'none'\n    }\n  }\n\n  const handleChange = useCallback<MouseEventHandler>(\n    (e) => {\n      e.stopPropagation()\n      onChange(option.value)\n    },\n    [option.value, onChange]\n  )\n\n  return (\n    <BaseButton\n      ref={ref}\n      key={option.value}\n      iconLeft={option.icon}\n      styles={{\n        button: {\n          ...optionCss,\n          ...(option.value === activeValue || isActive ? activeOptionCss : {})\n        },\n        icon: optionIconCss\n      }}\n      aria-label={option.label ?? option.value}\n      role='option'\n      onClick={handleChange}\n    >\n      {option.leadingElement ?? null}\n      <Text variant='body' strength='strong'>\n        {option.label ?? option.value}\n      </Text>\n      {option.helperText ? (\n        <Text\n          variant='body'\n          strength='strong'\n          color={option.value === activeValue ? 'white' : 'subdued'}\n          className='helperText'\n        >\n          {option.helperText}\n        </Text>\n      ) : null}\n    </BaseButton>\n  )\n})\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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":";AAeA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAqBhD;;GAEG;AACH,eAAO,MAAM,YAAY,gLAyLxB,CAAA"}
+{"version":3,"file":"FollowButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/FollowButton/FollowButton.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAqBhD;;GAEG;AACH,eAAO,MAAM,YAAY,gLAsKxB,CAAA"}

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

@@ -84,9 +84,7 @@ var FollowButton = forwardRef(function (props, ref) {
         text = messages.unfollow;
     }
     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 textColor = checkedValue || isHovering || isPressing ? 'white' : 'active';
     var borderRadius = variant === 'pill' ? cornerRadius['2xl'] : cornerRadius.s;
     var rootCss = {
         cursor: 'pointer',
@@ -100,31 +98,15 @@ var FollowButton = forwardRef(function (props, ref) {
         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)'
-            }
+            backgroundColor: color.primary.p300,
+            boxShadow: shadows.mid
         },
         '&:active': {
-            backgroundColor: color.primary.primary,
+            backgroundColor: color.primary.p500,
             borderWidth: 0,
-            boxShadow: 'none',
-            '&::before': {
-                backgroundColor: 'rgba(0, 0, 0, 0.2)'
-            }
+            boxShadow: 'none'
         }
     };
     // Handles case where user mouses down, moves cursor, and mouses up
@@ -153,7 +135,7 @@ var FollowButton = forwardRef(function (props, ref) {
         // @ts-ignore flex not smart enough
         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] })));
+        onClick: handleClick }, buttonProps, rootProps, { children: [jsx(Icon, { height: 18, width: 18, color: textColor }), jsx(Text, __assign({ variant: 'label', tag: 'span', size: size === 'small' ? 's' : 'l', strength: 'default', color: textColor }, { children: text })), type === 'checkbox' ? (jsx(InputRoot, __assign({}, inputProps, { checked: isFollowing }))) : null] })));
 });
 
 export { FollowButton };

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

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

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

@@ -10,9 +10,9 @@ 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, children = props.children, other = __rest(props, ["icon", "color", "size", "shadow", "ripple", "height", "width", "iconCss", "children"]);
+    var Icon = props.icon, _a = props.color, iconColor = _a === void 0 ? 'default' : _a, _b = props.size, size = _b === void 0 ? 'l' : _b, 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, isLoading = other.isLoading, asChild = other.asChild;
-    var _b = useTheme(), color = _b.color, cornerRadius = _b.cornerRadius, spacing = _b.spacing, motion = _b.motion, iconSizes = _b.iconSizes;
+    var _c = useTheme(), color = _c.color, cornerRadius = _c.cornerRadius, spacing = _c.spacing, motion = _c.motion, iconSizes = _c.iconSizes;
     var buttonCss = {
         background: 'transparent',
         border: 'none',

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'\nimport { Slottable } from '@radix-ui/react-slot'\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  BaseButtonProps\n\n/**\n * The icon component allows you to pass in an icon and\n * apply color and sizing properties.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (props: IconButtonProps, ref) => {\n    const {\n      icon: Icon,\n      color: iconColor,\n      size = 'l',\n      shadow,\n      ripple,\n      height,\n      width,\n      iconCss,\n      children,\n      ...other\n    } = props\n    const { disabled, isLoading, asChild } = other\n    const { color, cornerRadius, spacing, motion, iconSizes } = useTheme()\n\n    const buttonCss: CSSObject = {\n      background: 'transparent',\n      border: 'none',\n      borderRadius: '50%',\n      padding: spacing.xs,\n      overflow: 'unset',\n      svg: {\n        transition: `\n        transform ${motion.hover},\n        color ${motion.hover}\n        `\n      },\n      '&:hover': {\n        transform: 'scale(1.0)',\n        svg: {\n          transform: 'scale(1.1)'\n        }\n      },\n      '&:active': {\n        transform: 'scale(1.0)',\n        svg: {\n          transform: 'scale(0.98)'\n        }\n      }\n    }\n\n    const rippleCss: CSSObject = {\n      '&:hover': {\n        backgroundColor: color.neutral.n100\n      },\n      '&:active': {\n        backgroundColor: color.neutral.n150\n      },\n      '&:focus-visible': {\n        border: `1px solid ${color.secondary.secondary}`,\n        borderRadius: cornerRadius.s\n      }\n    }\n\n    const loadingIconCss: CSSObject = {\n      ...iconCss,\n      height: iconSizes[size],\n      width: iconSizes[size],\n      color: color.icon[iconColor ?? 'default']\n    }\n\n    return (\n      <BaseButton\n        ref={ref}\n        type={asChild ? undefined : 'button'}\n        {...other}\n        css={[buttonCss, ripple && rippleCss]}\n        styles={{ icon: loadingIconCss }}\n        slotted\n      >\n        {isLoading ? null : (\n          <Icon\n            aria-hidden\n            color={disabled ? 'disabled' : iconColor}\n            size={size}\n            shadow={shadow}\n            height={height}\n            width={width}\n            css={iconCss}\n          />\n        )}\n        <Slottable>{children}</Slottable>\n      </BaseButton>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"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'\nimport { Slottable } from '@radix-ui/react-slot'\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  BaseButtonProps\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 = 'default',\n      size = 'l',\n      shadow,\n      ripple,\n      height,\n      width,\n      iconCss,\n      children,\n      ...other\n    } = props\n    const { disabled, isLoading, asChild } = other\n    const { color, cornerRadius, spacing, motion, iconSizes } = useTheme()\n\n    const buttonCss: CSSObject = {\n      background: 'transparent',\n      border: 'none',\n      borderRadius: '50%',\n      padding: spacing.xs,\n      overflow: 'unset',\n      svg: {\n        transition: `\n        transform ${motion.hover},\n        color ${motion.hover}\n        `\n      },\n      '&:hover': {\n        transform: 'scale(1.0)',\n        svg: {\n          transform: 'scale(1.1)'\n        }\n      },\n      '&:active': {\n        transform: 'scale(1.0)',\n        svg: {\n          transform: 'scale(0.98)'\n        }\n      }\n    }\n\n    const rippleCss: CSSObject = {\n      '&:hover': {\n        backgroundColor: color.neutral.n100\n      },\n      '&:active': {\n        backgroundColor: color.neutral.n150\n      },\n      '&:focus-visible': {\n        border: `1px solid ${color.secondary.secondary}`,\n        borderRadius: cornerRadius.s\n      }\n    }\n\n    const loadingIconCss: CSSObject = {\n      ...iconCss,\n      height: iconSizes[size],\n      width: iconSizes[size],\n      color: color.icon[iconColor ?? 'default']\n    }\n\n    return (\n      <BaseButton\n        ref={ref}\n        type={asChild ? undefined : 'button'}\n        {...other}\n        css={[buttonCss, ripple && rippleCss]}\n        styles={{ icon: loadingIconCss }}\n        slotted\n      >\n        {isLoading ? null : (\n          <Icon\n            aria-hidden\n            color={disabled ? 'disabled' : iconColor}\n            size={size}\n            shadow={shadow}\n            height={height}\n            width={width}\n            css={iconCss}\n          />\n        )}\n        <Slottable>{children}</Slottable>\n      </BaseButton>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/checkbox/Checkbox.js

@@ -9,8 +9,8 @@ import { useControlled } from '../../hooks/useControlled.js';
 import { Box } from '../layout/Box/Box.js';
 import { Flex } from '../layout/Flex/Flex.js';
 import '../layout/Paper/Paper.js';
-import IconIndeterminate from './Indeterminate.svg.js';
-import IconSelect from './Select.svg.js';
+import img from './Indeterminate.svg.js';
+import img$1 from './Select.svg.js';
 
 /*
  * An input for choosing from predefined options:
@@ -33,8 +33,8 @@ var Checkbox = forwardRef(function (props, ref) {
     var Icon = !checked
         ? null
         : indeterminate
-            ? IconIndeterminate
-            : IconSelect;
+            ? img
+            : img$1;
     var hoverCss = {
         backgroundColor: checked ? color.secondary.s200 : color.neutral.n150
     };

package/dist/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { ChangeEvent, forwardRef, Ref, useCallback } from 'react'\n\nimport { useTheme } from '~harmony/foundations'\nimport { useControlled } from '~harmony/hooks/useControlled'\n\nimport { Flex, Box } from '../layout'\n\nimport IconIndeterminate from './Indeterminate.svg'\nimport IconSelect from './Select.svg'\nimport { CheckboxProps } from './types'\n\n/*\n * An input for choosing from predefined options:\n * (1) when used alone, it gives a binary choice (checked/unchecked)\n * (2) in a group it allows the user to select multiple values from a list of options.\n */\nexport const Checkbox = forwardRef(\n  (props: CheckboxProps, ref: Ref<HTMLInputElement>) => {\n    const {\n      checked: checkedProp,\n      defaultChecked,\n      indeterminate,\n      onChange,\n      _isFocused,\n      _isHovered,\n      ...other\n    } = props\n    const { color, motion } = useTheme()\n\n    const [checked, setChecked] = useControlled({\n      controlledProp: checkedProp,\n      defaultValue: defaultChecked,\n      stateName: 'checked',\n      componentName: 'Checkbox'\n    })\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        onChange?.(e)\n        setChecked(e.target.checked)\n      },\n      [onChange, setChecked]\n    )\n\n    const Icon = !checked\n      ? null\n      : indeterminate\n        ? IconIndeterminate\n        : IconSelect\n\n    const hoverCss = {\n      backgroundColor: checked ? color.secondary.s200 : color.neutral.n150\n    }\n\n    const focusCss = {\n      borderRadius: 6,\n      border: `2px solid ${color.border.accent}`\n    }\n\n    return (\n      <Flex\n        h='unit7'\n        w='unit7'\n        as='span'\n        alignItems='center'\n        justifyContent='center'\n      >\n        <input\n          ref={ref}\n          type='checkbox'\n          css={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            opacity: 0,\n            width: '100%',\n            height: '100%',\n            zIndex: 1,\n            margin: 0,\n            padding: 0,\n            cursor: 'pointer',\n            ':hover ~ [data-span=\"background\"]': hoverCss,\n            ':focus-visible ~ [data-span=\"focus\"]': focusCss\n          }}\n          data-indeterminate={indeterminate}\n          checked={checked}\n          onChange={handleChange}\n          {...other}\n        />\n        <Box\n          h='unit7'\n          w='unit7'\n          as='span'\n          data-span='focus'\n          css={{\n            position: 'absolute',\n            width: '100%',\n            height: '100%',\n            ...(_isFocused && focusCss)\n          }}\n        />\n        <Flex\n          borderRadius='s'\n          backgroundColor={checked ? 'accent' : 'default'}\n          h='unit5'\n          w='unit5'\n          as='span'\n          data-span='background'\n          alignItems='center'\n          justifyContent='center'\n          css={{\n            backgroundColor: checked\n              ? color.background.accent\n              : color.neutral.n200,\n            boxShadow: 'inset 2px 2px 2px 0px rgba(0, 0, 0, 0.10)',\n            transition: `background-color ${motion.hover}`,\n            ...(_isHovered && hoverCss)\n          }}\n        >\n          {Icon ? <Icon /> : null}\n        </Flex>\n      </Flex>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { ChangeEvent, forwardRef, Ref, useCallback } from 'react'\n\nimport { useTheme } from '~harmony/foundations'\nimport { useControlled } from '~harmony/hooks/useControlled'\n\nimport { Flex, Box } from '../layout'\n\nimport IconIndeterminate from './Indeterminate.svg'\nimport IconSelect from './Select.svg'\nimport { CheckboxProps } from './types'\n\n/*\n * An input for choosing from predefined options:\n * (1) when used alone, it gives a binary choice (checked/unchecked)\n * (2) in a group it allows the user to select multiple values from a list of options.\n */\nexport const Checkbox = forwardRef(\n  (props: CheckboxProps, ref: Ref<HTMLInputElement>) => {\n    const {\n      checked: checkedProp,\n      defaultChecked,\n      indeterminate,\n      onChange,\n      _isFocused,\n      _isHovered,\n      ...other\n    } = props\n    const { color, motion } = useTheme()\n\n    const [checked, setChecked] = useControlled({\n      controlledProp: checkedProp,\n      defaultValue: defaultChecked,\n      stateName: 'checked',\n      componentName: 'Checkbox'\n    })\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        onChange?.(e)\n        setChecked(e.target.checked)\n      },\n      [onChange, setChecked]\n    )\n\n    const Icon = !checked\n      ? null\n      : indeterminate\n        ? IconIndeterminate\n        : IconSelect\n\n    const hoverCss = {\n      backgroundColor: checked ? color.secondary.s200 : color.neutral.n150\n    }\n\n    const focusCss = {\n      borderRadius: 6,\n      border: `2px solid ${color.border.accent}`\n    }\n\n    return (\n      <Flex\n        h='unit7'\n        w='unit7'\n        as='span'\n        alignItems='center'\n        justifyContent='center'\n      >\n        <input\n          ref={ref}\n          type='checkbox'\n          css={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            opacity: 0,\n            width: '100%',\n            height: '100%',\n            zIndex: 1,\n            margin: 0,\n            padding: 0,\n            cursor: 'pointer',\n            ':hover ~ [data-span=\"background\"]': hoverCss,\n            ':focus-visible ~ [data-span=\"focus\"]': focusCss\n          }}\n          data-indeterminate={indeterminate}\n          checked={checked}\n          onChange={handleChange}\n          {...other}\n        />\n        <Box\n          h='unit7'\n          w='unit7'\n          as='span'\n          data-span='focus'\n          css={{\n            position: 'absolute',\n            width: '100%',\n            height: '100%',\n            ...(_isFocused && focusCss)\n          }}\n        />\n        <Flex\n          borderRadius='s'\n          backgroundColor={checked ? 'accent' : 'default'}\n          h='unit5'\n          w='unit5'\n          as='span'\n          data-span='background'\n          alignItems='center'\n          justifyContent='center'\n          css={{\n            backgroundColor: checked\n              ? color.background.accent\n              : color.neutral.n200,\n            boxShadow: 'inset 2px 2px 2px 0px rgba(0, 0, 0, 0.10)',\n            transition: `background-color ${motion.hover}`,\n            ...(_isHovered && hoverCss)\n          }}\n        >\n          {Icon ? <Icon /> : null}\n        </Flex>\n      </Flex>\n    )\n  }\n)\n"],"names":["IconIndeterminate","IconSelect","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;AAWA;;;;AAIG;IACU,QAAQ,GAAG,UAAU,CAChC,UAAC,KAAoB,EAAE,GAA0B,EAAA;AAE7C,IAAA,IAAS,WAAW,GAOlB,KAAK,CAPa,OAAA,EACpB,cAAc,GAMZ,KAAK,CANO,cAAA,EACd,aAAa,GAKX,KAAK,CALM,aAAA,EACb,QAAQ,GAIN,KAAK,CAJC,QAAA,EACR,UAAU,GAGR,KAAK,CAHG,UAAA,EACV,UAAU,GAER,KAAK,CAFG,UAAA,EACP,KAAK,GACN,MAAA,CAAA,KAAK,EARH,CAAA,SAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,YAAA,EAAA,YAAA,CAQL,CADS,CACD;IACH,IAAA,EAAA,GAAoB,QAAQ,EAAE,EAA5B,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAe,CAAA;IAE9B,IAAA,EAAA,GAAwB,aAAa,CAAC;AAC1C,QAAA,cAAc,EAAE,WAAW;AAC3B,QAAA,YAAY,EAAE,cAAc;AAC5B,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,aAAa,EAAE,UAAU;AAC1B,KAAA,CAAC,EALK,OAAO,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,UAAU,QAKxB,CAAA;AAEF,IAAA,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,CAAgC,EAAA;AAC/B,QAAA,QAAQ,aAAR,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAR,QAAQ,CAAG,CAAC,CAAC,CAAA;AACb,QAAA,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;AAC9B,KAAC,EACD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACvB,CAAA;IAED,IAAM,IAAI,GAAG,CAAC,OAAO;AACnB,UAAE,IAAI;AACN,UAAE,aAAa;AACb,cAAEA,GAAiB;cACjBC,KAAU,CAAA;AAEhB,IAAA,IAAM,QAAQ,GAAG;AACf,QAAA,eAAe,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI;KACrE,CAAA;AAED,IAAA,IAAM,QAAQ,GAAG;AACf,QAAA,YAAY,EAAE,CAAC;AACf,QAAA,MAAM,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAE;KAC3C,CAAA;AAED,IAAA,QACEC,IAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EACH,CAAC,EAAC,OAAO,EACT,CAAC,EAAC,OAAO,EACT,EAAE,EAAC,MAAM,EACT,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,iBAEvBC,GACE,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,GAAG,EAAE;AACH,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,OAAO,EAAE,CAAC;AACV,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,MAAM,EAAE,MAAM;AACd,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,OAAO,EAAE,CAAC;AACV,oBAAA,MAAM,EAAE,SAAS;AACjB,oBAAA,mCAAmC,EAAE,QAAQ;AAC7C,oBAAA,sCAAsC,EAAE,QAAQ;iBACjD,EACmB,oBAAA,EAAA,aAAa,EACjC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,YAAY,EAAA,EAClB,KAAK,CACT,CAAA,EACFA,IAAC,GAAG,EAAA,EACF,CAAC,EAAC,OAAO,EACT,CAAC,EAAC,OAAO,EACT,EAAE,EAAC,MAAM,EACC,WAAA,EAAA,OAAO,EACjB,GAAG,EAAA,QAAA,CAAA,EACD,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EAAA,GACV,UAAU,IAAI,QAAQ,EAE5B,EAAA,CAAA,EACFA,IAAC,IAAI,EAAA,QAAA,CAAA,EACH,YAAY,EAAC,GAAG,EAChB,eAAe,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,EAC/C,CAAC,EAAC,OAAO,EACT,CAAC,EAAC,OAAO,EACT,EAAE,EAAC,MAAM,EAAA,WAAA,EACC,YAAY,EACtB,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,GAAG,EAAA,QAAA,CAAA,EACD,eAAe,EAAE,OAAO;AACtB,0BAAE,KAAK,CAAC,UAAU,CAAC,MAAM;AACzB,0BAAE,KAAK,CAAC,OAAO,CAAC,IAAI,EACtB,SAAS,EAAE,2CAA2C,EACtD,UAAU,EAAE,2BAAoB,MAAM,CAAC,KAAK,CAAE,EAAA,GAC1C,UAAU,IAAI,QAAQ,kBAG3B,IAAI,GAAGA,GAAA,CAAC,IAAI,EAAA,EAAA,CAAG,GAAG,IAAI,EAClB,CAAA,CAAA,CAAA,EAAA,CAAA,CACF,EACR;AACH,CAAC;;;;"}

package/dist/components/checkbox/Indeterminate.svg.js

@@ -2,7 +2,7 @@ import 'react';
 import '@emotion/react';
 import '@emotion/css';
 
-var IconIndeterminate = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%20%20%3Cg%20filter%3D%22url%28%23filter0_d_6946_1483%29%22%3E%20%20%20%20%3Crect%20x%3D%221.33337%22%20y%3D%226.66675%22%20width%3D%2213.3333%22%20height%3D%222.66667%22%20rx%3D%221.33333%22%20fill%3D%22white%22%2F%3E%20%20%3C%2Fg%3E%20%20%3Cdefs%3E%20%20%20%20%3Cfilter%20id%3D%22filter0_d_6946_1483%22%20x%3D%221.33337%22%20y%3D%226.66675%22%20width%3D%2217.3334%22%20height%3D%226.66675%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%20%20%20%20%20%20%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%20%20%20%20%20%20%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%20%20%20%20%20%20%3CfeOffset%20dx%3D%222%22%20dy%3D%222%22%2F%3E%20%20%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%221%22%2F%3E%20%20%20%20%20%20%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%20%20%20%20%20%20%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.1%200%22%2F%3E%20%20%20%20%20%20%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_6946_1483%22%2F%3E%20%20%20%20%20%20%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_6946_1483%22%20result%3D%22shape%22%2F%3E%20%20%20%20%3C%2Ffilter%3E%20%20%3C%2Fdefs%3E%3C%2Fsvg%3E";
+var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3e %3cg filter='url(%23filter0_d_6946_1483)'%3e %3crect x='1.33337' y='6.66675' width='13.3333' height='2.66667' rx='1.33333' fill='white'/%3e %3c/g%3e %3cdefs%3e %3cfilter id='filter0_d_6946_1483' x='1.33337' y='6.66675' width='17.3334' height='6.66675' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e %3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e %3cfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e %3cfeOffset dx='2' dy='2'/%3e %3cfeGaussianBlur stdDeviation='1'/%3e %3cfeComposite in2='hardAlpha' operator='out'/%3e %3cfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0'/%3e %3cfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_6946_1483'/%3e %3cfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_6946_1483' result='shape'/%3e %3c/filter%3e %3c/defs%3e%3c/svg%3e";
 
-export { IconIndeterminate as default };
+export { img as default };
 //# sourceMappingURL=Indeterminate.svg.js.map

package/dist/components/checkbox/Indeterminate.svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"Indeterminate.svg.js","sources":["../../../src/components/checkbox/Indeterminate.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%20%20%3Cg%20filter%3D%22url%28%23filter0_d_6946_1483%29%22%3E%20%20%20%20%3Crect%20x%3D%221.33337%22%20y%3D%226.66675%22%20width%3D%2213.3333%22%20height%3D%222.66667%22%20rx%3D%221.33333%22%20fill%3D%22white%22%2F%3E%20%20%3C%2Fg%3E%20%20%3Cdefs%3E%20%20%20%20%3Cfilter%20id%3D%22filter0_d_6946_1483%22%20x%3D%221.33337%22%20y%3D%226.66675%22%20width%3D%2217.3334%22%20height%3D%226.66675%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%20%20%20%20%20%20%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%20%20%20%20%20%20%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%20%20%20%20%20%20%3CfeOffset%20dx%3D%222%22%20dy%3D%222%22%2F%3E%20%20%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%221%22%2F%3E%20%20%20%20%20%20%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%20%20%20%20%20%20%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.1%200%22%2F%3E%20%20%20%20%20%20%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_6946_1483%22%2F%3E%20%20%20%20%20%20%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_6946_1483%22%20result%3D%22shape%22%2F%3E%20%20%20%20%3C%2Ffilter%3E%20%20%3C%2Fdefs%3E%3C%2Fsvg%3E\""],"names":[],"mappings":";;;;AAgHA,wBAAe,4oDAA4oD;;;;"}
+{"version":3,"file":"Indeterminate.svg.js","sources":["../../../src/components/checkbox/Indeterminate.svg"],"sourcesContent":["var img = \"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3e %3cg filter='url(%23filter0_d_6946_1483)'%3e %3crect x='1.33337' y='6.66675' width='13.3333' height='2.66667' rx='1.33333' fill='white'/%3e %3c/g%3e %3cdefs%3e %3cfilter id='filter0_d_6946_1483' x='1.33337' y='6.66675' width='17.3334' height='6.66675' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e %3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e %3cfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e %3cfeOffset dx='2' dy='2'/%3e %3cfeGaussianBlur stdDeviation='1'/%3e %3cfeComposite in2='hardAlpha' operator='out'/%3e %3cfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0'/%3e %3cfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_6946_1483'/%3e %3cfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_6946_1483' result='shape'/%3e %3c/filter%3e %3c/defs%3e%3c/svg%3e\";\n  export default img;"],"names":[],"mappings":";;;;AAsHG,IAAC,GAAG,GAAG;;;;"}

package/dist/components/checkbox/Select.svg.js

@@ -2,7 +2,7 @@ import 'react';
 import '@emotion/react';
 import '@emotion/css';
 
-var IconSelect = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%20%20%3Cg%20clip-path%3D%22url%28%23clip0_6946_1478%29%22%3E%20%20%20%20%3Cg%20filter%3D%22url%28%23filter0_d_6946_1478%29%22%3E%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.415%202.92479C13.9447%203.33857%2014.0386%204.10337%2013.6248%204.633L7.13144%2012.9441C7.07164%2013.0207%207.00451%2013.0881%206.93191%2013.1462C6.87971%2013.222%206.81738%2013.2932%206.74565%2013.3579C6.24616%2013.8076%205.47667%2013.7673%205.02694%2013.2678L2.31259%2010.2532C1.86286%209.75375%201.90319%208.98421%202.40266%208.53448C2.90214%208.08475%203.67162%208.12508%204.12135%208.62461L5.88661%2010.5837C5.88661%2010.5837%2011.293%203.66415%2011.7068%203.13453C12.1206%202.60489%2012.8854%202.51099%2013.415%202.92479Z%22%20fill%3D%22white%22%2F%3E%20%20%20%20%3C%2Fg%3E%20%20%3C%2Fg%3E%20%20%3Cdefs%3E%20%20%20%20%3Cfilter%20id%3D%22filter0_d_6946_1478%22%20x%3D%222%22%20y%3D%222.66675%22%20width%3D%2215.8828%22%20height%3D%2215.0037%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%20%20%20%20%20%20%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%20%20%20%20%20%20%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%20%20%20%20%20%20%3CfeOffset%20dx%3D%222%22%20dy%3D%222%22%2F%3E%20%20%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%221%22%2F%3E%20%20%20%20%20%20%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%20%20%20%20%20%20%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.1%200%22%2F%3E%20%20%20%20%20%20%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_6946_1478%22%2F%3E%20%20%20%20%20%20%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_6946_1478%22%20result%3D%22shape%22%2F%3E%20%20%20%20%3C%2Ffilter%3E%20%20%20%20%3CclipPath%20id%3D%22clip0_6946_1478%22%3E%20%20%20%20%20%20%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%20%20%20%20%3C%2FclipPath%3E%20%20%3C%2Fdefs%3E%3C%2Fsvg%3E";
+var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3e %3cg clip-path='url(%23clip0_6946_1478)'%3e %3cg filter='url(%23filter0_d_6946_1478)'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.415 2.92479C13.9447 3.33857 14.0386 4.10337 13.6248 4.633L7.13144 12.9441C7.07164 13.0207 7.00451 13.0881 6.93191 13.1462C6.87971 13.222 6.81738 13.2932 6.74565 13.3579C6.24616 13.8076 5.47667 13.7673 5.02694 13.2678L2.31259 10.2532C1.86286 9.75375 1.90319 8.98421 2.40266 8.53448C2.90214 8.08475 3.67162 8.12508 4.12135 8.62461L5.88661 10.5837C5.88661 10.5837 11.293 3.66415 11.7068 3.13453C12.1206 2.60489 12.8854 2.51099 13.415 2.92479Z' fill='white'/%3e %3c/g%3e %3c/g%3e %3cdefs%3e %3cfilter id='filter0_d_6946_1478' x='2' y='2.66675' width='15.8828' height='15.0037' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e %3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e %3cfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e %3cfeOffset dx='2' dy='2'/%3e %3cfeGaussianBlur stdDeviation='1'/%3e %3cfeComposite in2='hardAlpha' operator='out'/%3e %3cfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0'/%3e %3cfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_6946_1478'/%3e %3cfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_6946_1478' result='shape'/%3e %3c/filter%3e %3cclipPath id='clip0_6946_1478'%3e %3crect width='16' height='16' fill='white'/%3e %3c/clipPath%3e %3c/defs%3e%3c/svg%3e";
 
-export { IconSelect as default };
+export { img as default };
 //# sourceMappingURL=Select.svg.js.map

package/dist/components/checkbox/Select.svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.svg.js","sources":["../../../src/components/checkbox/Select.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%20%20%3Cg%20clip-path%3D%22url%28%23clip0_6946_1478%29%22%3E%20%20%20%20%3Cg%20filter%3D%22url%28%23filter0_d_6946_1478%29%22%3E%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.415%202.92479C13.9447%203.33857%2014.0386%204.10337%2013.6248%204.633L7.13144%2012.9441C7.07164%2013.0207%207.00451%2013.0881%206.93191%2013.1462C6.87971%2013.222%206.81738%2013.2932%206.74565%2013.3579C6.24616%2013.8076%205.47667%2013.7673%205.02694%2013.2678L2.31259%2010.2532C1.86286%209.75375%201.90319%208.98421%202.40266%208.53448C2.90214%208.08475%203.67162%208.12508%204.12135%208.62461L5.88661%2010.5837C5.88661%2010.5837%2011.293%203.66415%2011.7068%203.13453C12.1206%202.60489%2012.8854%202.51099%2013.415%202.92479Z%22%20fill%3D%22white%22%2F%3E%20%20%20%20%3C%2Fg%3E%20%20%3C%2Fg%3E%20%20%3Cdefs%3E%20%20%20%20%3Cfilter%20id%3D%22filter0_d_6946_1478%22%20x%3D%222%22%20y%3D%222.66675%22%20width%3D%2215.8828%22%20height%3D%2215.0037%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%20%20%20%20%20%20%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%20%20%20%20%20%20%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%20%20%20%20%20%20%3CfeOffset%20dx%3D%222%22%20dy%3D%222%22%2F%3E%20%20%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%221%22%2F%3E%20%20%20%20%20%20%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%20%20%20%20%20%20%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.1%200%22%2F%3E%20%20%20%20%20%20%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_6946_1478%22%2F%3E%20%20%20%20%20%20%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_6946_1478%22%20result%3D%22shape%22%2F%3E%20%20%20%20%3C%2Ffilter%3E%20%20%20%20%3CclipPath%20id%3D%22clip0_6946_1478%22%3E%20%20%20%20%20%20%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%20%20%20%20%3C%2FclipPath%3E%20%20%3C%2Fdefs%3E%3C%2Fsvg%3E\""],"names":[],"mappings":";;;;AAoHA,iBAAe,83EAA83E;;;;"}
+{"version":3,"file":"Select.svg.js","sources":["../../../src/components/checkbox/Select.svg"],"sourcesContent":["var img = \"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3e %3cg clip-path='url(%23clip0_6946_1478)'%3e %3cg filter='url(%23filter0_d_6946_1478)'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.415 2.92479C13.9447 3.33857 14.0386 4.10337 13.6248 4.633L7.13144 12.9441C7.07164 13.0207 7.00451 13.0881 6.93191 13.1462C6.87971 13.222 6.81738 13.2932 6.74565 13.3579C6.24616 13.8076 5.47667 13.7673 5.02694 13.2678L2.31259 10.2532C1.86286 9.75375 1.90319 8.98421 2.40266 8.53448C2.90214 8.08475 3.67162 8.12508 4.12135 8.62461L5.88661 10.5837C5.88661 10.5837 11.293 3.66415 11.7068 3.13453C12.1206 2.60489 12.8854 2.51099 13.415 2.92479Z' fill='white'/%3e %3c/g%3e %3c/g%3e %3cdefs%3e %3cfilter id='filter0_d_6946_1478' x='2' y='2.66675' width='15.8828' height='15.0037' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e %3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e %3cfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e %3cfeOffset dx='2' dy='2'/%3e %3cfeGaussianBlur stdDeviation='1'/%3e %3cfeComposite in2='hardAlpha' operator='out'/%3e %3cfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0'/%3e %3cfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_6946_1478'/%3e %3cfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_6946_1478' result='shape'/%3e %3c/filter%3e %3cclipPath id='clip0_6946_1478'%3e %3crect width='16' height='16' fill='white'/%3e %3c/clipPath%3e %3c/defs%3e%3c/svg%3e\";\n  export default img;"],"names":[],"mappings":";;;;AA0HG,IAAC,GAAG,GAAG;;;;"}

package/dist/components/internal/MenuItem.js

@@ -51,7 +51,7 @@ var MenuItem = forwardRef(function (props, ref) {
     return (jsxs(BaseButton, __assign({ ref: ref, iconLeft: icon, styles: {
             button: __assign(__assign(__assign({}, optionCss), (isActive ? activeOptionCss : {})), styles === null || styles === void 0 ? void 0 : styles.button),
             icon: __assign(__assign({}, optionIconCss), styles === null || styles === void 0 ? void 0 : styles.icon)
-        }, onClick: handleClick, role: variant === 'option' ? 'option' : undefined }, other, { onChange: undefined }, { children: [leadingElement !== null && leadingElement !== void 0 ? leadingElement : null, typeof label === 'string' ? (jsx(Text, __assign({ variant: 'body', size: variant === 'option' ? 'l' : 'm', strength: variant === 'button' ? 'strong' : 'default' }, { children: variant === 'option' ? (label !== null && label !== void 0 ? label : props.value) : label }))) : (label), typeof helperText === 'string' ? (jsx(Text, __assign({ variant: 'body', size: variant === 'option' ? 'l' : 'm', strength: variant === 'button' ? 'strong' : 'default', color: isActive ? 'staticWhite' : 'subdued' }, { children: helperText }))) : ((helperText !== null && helperText !== void 0 ? helperText : null))] })));
+        }, onClick: handleClick, role: variant === 'option' ? 'option' : undefined }, other, { onChange: undefined }, { children: [leadingElement !== null && leadingElement !== void 0 ? leadingElement : null, typeof label === 'string' ? (jsx(Text, __assign({ variant: 'body', size: variant === 'option' ? 'l' : 'm', strength: variant === 'button' ? 'strong' : 'default' }, { children: variant === 'option' ? (label !== null && label !== void 0 ? label : props.value) : label }))) : (label), typeof helperText === 'string' ? (jsx(Text, __assign({ variant: 'body', size: variant === 'option' ? 'l' : 'm', strength: variant === 'button' ? 'strong' : 'default', color: isActive ? 'white' : 'subdued' }, { children: helperText }))) : ((helperText !== null && helperText !== void 0 ? helperText : null))] })));
 });
 
 export { MenuItem };

package/dist/components/internal/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../src/components/internal/MenuItem.tsx"],"sourcesContent":["import {\n  forwardRef,\n  MouseEventHandler,\n  ReactNode,\n  Ref,\n  useCallback\n} from 'react'\n\nimport { CSSObject } from '@emotion/react'\n\nimport { BaseButton } from '~harmony/components/button/BaseButton/BaseButton'\nimport { BaseButtonProps } from '~harmony/components/button/BaseButton/types'\nimport { IconComponent } from '~harmony/components/icon'\nimport { Text } from '~harmony/components/text/Text'\nimport { useTheme } from '~harmony/foundations'\n\nexport type MenuItemProps<Value extends string> = Omit<\n  BaseButtonProps,\n  'variant' | 'onChange'\n> & {\n  variant?: 'option' | 'button'\n  label?: ReactNode\n  icon?: IconComponent\n  leadingElement?: ReactNode\n  helperText?: ReactNode\n  isActive?: boolean\n} & (\n    | {\n        variant: 'option'\n        onChange: (option: Value) => void\n        value: Value\n      }\n    | { variant: 'button' }\n  )\n\nexport const MenuItem = forwardRef(function <Value extends string>(\n  props: MenuItemProps<Value>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const {\n    label,\n    isActive,\n    onClick,\n    icon,\n    leadingElement,\n    variant,\n    helperText,\n    styles,\n    ...other\n  } = props\n\n  const { color, cornerRadius, spacing, typography } = useTheme()\n\n  // Popup Styles\n  const optionIconCss: CSSObject = {\n    width: spacing.unit4,\n    height: spacing.unit4\n  }\n\n  const activeOptionCss: CSSObject = {\n    transform: 'none',\n    backgroundColor: color.secondary.s300,\n    color: color.static.white,\n    '& a, & span': { color: color.static.white }\n  }\n\n  const optionCss: CSSObject = {\n    height: variant === 'option' ? 36 : 40,\n    background: 'transparent',\n    border: 'none',\n    color: color.text.default,\n    fontWeight: typography.weight.medium,\n    gap: spacing.s,\n    paddingLeft: spacing.m,\n    paddingRight: spacing.m,\n    paddingTop: spacing.s,\n    paddingBottom: spacing.s,\n    width: '100%',\n    borderRadius: cornerRadius.s,\n    justifyContent: 'flex-start',\n\n    '&:hover': activeOptionCss,\n    '&:active': {\n      transform: 'none'\n    }\n  }\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (e) => {\n      e.stopPropagation()\n      onClick?.(e)\n\n      if (variant === 'option') {\n        props.onChange(props.value)\n      }\n    },\n    [onClick, props, variant]\n  )\n\n  return (\n    <BaseButton\n      ref={ref}\n      iconLeft={icon}\n      styles={{\n        button: {\n          ...optionCss,\n          ...(isActive ? activeOptionCss : {}),\n          ...styles?.button\n        },\n        icon: {\n          ...optionIconCss,\n          ...styles?.icon\n        }\n      }}\n      onClick={handleClick}\n      role={variant === 'option' ? 'option' : undefined}\n      {...other}\n      onChange={undefined}\n    >\n      {leadingElement ?? null}\n      {typeof label === 'string' ? (\n        <Text\n          variant='body'\n          size={variant === 'option' ? 'l' : 'm'}\n          strength={variant === 'button' ? 'strong' : 'default'}\n        >\n          {variant === 'option' ? (label ?? props.value) : label}\n        </Text>\n      ) : (\n        label\n      )}\n      {typeof helperText === 'string' ? (\n        <Text\n          variant='body'\n          size={variant === 'option' ? 'l' : 'm'}\n          strength={variant === 'button' ? 'strong' : 'default'}\n          color={isActive ? 'staticWhite' : 'subdued'}\n        >\n          {helperText}\n        </Text>\n      ) : (\n        (helperText ?? null)\n      )}\n    </BaseButton>\n  )\n})\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"MenuItem.js","sources":["../../../src/components/internal/MenuItem.tsx"],"sourcesContent":["import {\n  forwardRef,\n  MouseEventHandler,\n  ReactNode,\n  Ref,\n  useCallback\n} from 'react'\n\nimport { CSSObject } from '@emotion/react'\n\nimport { BaseButton } from '~harmony/components/button/BaseButton/BaseButton'\nimport { BaseButtonProps } from '~harmony/components/button/BaseButton/types'\nimport { IconComponent } from '~harmony/components/icon'\nimport { Text } from '~harmony/components/text/Text'\nimport { useTheme } from '~harmony/foundations'\n\nexport type MenuItemProps<Value extends string> = Omit<\n  BaseButtonProps,\n  'variant' | 'onChange'\n> & {\n  variant?: 'option' | 'button'\n  label?: ReactNode\n  icon?: IconComponent\n  leadingElement?: ReactNode\n  helperText?: ReactNode\n  isActive?: boolean\n} & (\n    | {\n        variant: 'option'\n        onChange: (option: Value) => void\n        value: Value\n      }\n    | { variant: 'button' }\n  )\n\nexport const MenuItem = forwardRef(function <Value extends string>(\n  props: MenuItemProps<Value>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const {\n    label,\n    isActive,\n    onClick,\n    icon,\n    leadingElement,\n    variant,\n    helperText,\n    styles,\n    ...other\n  } = props\n\n  const { color, cornerRadius, spacing, typography } = useTheme()\n\n  // Popup Styles\n  const optionIconCss: CSSObject = {\n    width: spacing.unit4,\n    height: spacing.unit4\n  }\n\n  const activeOptionCss: CSSObject = {\n    transform: 'none',\n    backgroundColor: color.secondary.s300,\n    color: color.static.white,\n    '& a, & span': { color: color.static.white }\n  }\n\n  const optionCss: CSSObject = {\n    height: variant === 'option' ? 36 : 40,\n    background: 'transparent',\n    border: 'none',\n    color: color.text.default,\n    fontWeight: typography.weight.medium,\n    gap: spacing.s,\n    paddingLeft: spacing.m,\n    paddingRight: spacing.m,\n    paddingTop: spacing.s,\n    paddingBottom: spacing.s,\n    width: '100%',\n    borderRadius: cornerRadius.s,\n    justifyContent: 'flex-start',\n\n    '&:hover': activeOptionCss,\n    '&:active': {\n      transform: 'none'\n    }\n  }\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (e) => {\n      e.stopPropagation()\n      onClick?.(e)\n\n      if (variant === 'option') {\n        props.onChange(props.value)\n      }\n    },\n    [onClick, props, variant]\n  )\n\n  return (\n    <BaseButton\n      ref={ref}\n      iconLeft={icon}\n      styles={{\n        button: {\n          ...optionCss,\n          ...(isActive ? activeOptionCss : {}),\n          ...styles?.button\n        },\n        icon: {\n          ...optionIconCss,\n          ...styles?.icon\n        }\n      }}\n      onClick={handleClick}\n      role={variant === 'option' ? 'option' : undefined}\n      {...other}\n      onChange={undefined}\n    >\n      {leadingElement ?? null}\n      {typeof label === 'string' ? (\n        <Text\n          variant='body'\n          size={variant === 'option' ? 'l' : 'm'}\n          strength={variant === 'button' ? 'strong' : 'default'}\n        >\n          {variant === 'option' ? (label ?? props.value) : label}\n        </Text>\n      ) : (\n        label\n      )}\n      {typeof helperText === 'string' ? (\n        <Text\n          variant='body'\n          size={variant === 'option' ? 'l' : 'm'}\n          strength={variant === 'button' ? 'strong' : 'default'}\n          color={isActive ? 'white' : 'subdued'}\n        >\n          {helperText}\n        </Text>\n      ) : (\n        (helperText ?? null)\n      )}\n    </BaseButton>\n  )\n})\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/nav-item/NavItem.js

@@ -17,7 +17,7 @@ var NavItem = function (_a) {
     var hasLeftIcon = !!LeftIcon;
     var hasRightIcon = !!RightIcon;
     var backgroundColor = isSelected ? color.secondary.s400 : undefined;
-    var textAndIconColor = isSelected ? 'staticWhite' : 'default';
+    var textAndIconColor = isSelected ? 'white' : 'default';
     var insetBorderColor = isSelected
         ? 'none'
         : "inset 0 0 0 1px ".concat(color.border.default);
@@ -42,7 +42,7 @@ var NavItem = function (_a) {
                     opacity: !isSelected ? 0.8 : undefined,
                     transition: "opacity ".concat(motion.quick)
                 }
-            } }, { children: [jsxs(Flex, __assign({ alignItems: 'center', gap: 'm', flex: 1, h: variant === 'compact' ? 'unit5' : 'unit6', pv: 's', css: {
+            } }, { children: [jsxs(Flex, __assign({ alignItems: 'center', gap: variant === 'compact' ? 'xs' : 'm', flex: 1, h: variant === 'compact' ? 'unit5' : 'unit6', pv: 's', css: {
                         maxWidth: '240px'
                     } }, { children: [leftOverride || leftIconWithNotification, jsx(Text, __assign({ variant: 'title', size: textSize, strength: 'weak', lineHeight: 'single', color: textAndIconColor, ellipses: true, css: {
                                 flex: 1,

package/dist/components/nav-item/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../../../src/components/nav-item/NavItem.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { useTheme } from '@emotion/react'\n\nimport { motion } from '../../foundations/motion'\nimport { Flex } from '../layout/Flex'\nimport { NotificationCount } from '../notification-count'\nimport { Text } from '../text/Text'\n\nimport type { NavItemProps } from './types'\n\n/**\n * A navigation item component, typically used in sidebars or navigation menus.\n * Supports default, hover, and selected states, as well as optional left and right icons.\n */\nexport const NavItem = ({\n  children,\n  leftIcon: LeftIcon,\n  rightIcon: RightIcon,\n  isSelected = false,\n  onClick,\n  textSize = 'l',\n  hasNotification = false,\n  leftOverride,\n  variant = 'default',\n  isChild = false,\n  ...props\n}: NavItemProps) => {\n  const { color } = useTheme()\n\n  const hasLeftIcon = !!LeftIcon\n  const hasRightIcon = !!RightIcon\n\n  const backgroundColor = isSelected ? color.secondary.s400 : undefined\n\n  const textAndIconColor = isSelected ? 'staticWhite' : 'default'\n  const insetBorderColor = isSelected\n    ? 'none'\n    : `inset 0 0 0 1px ${color.border.default}`\n\n  const leftIconWithNotification = useMemo(() => {\n    const icon = hasLeftIcon ? (\n      <LeftIcon size='l' color={textAndIconColor} />\n    ) : null\n\n    if (hasNotification && !!icon) {\n      return (\n        <NotificationCount size='s' isSelected={isSelected}>\n          {icon}\n        </NotificationCount>\n      )\n    }\n    return icon\n  }, [hasNotification, hasLeftIcon, LeftIcon, textAndIconColor, isSelected])\n\n  return (\n    <Flex\n      alignItems='center'\n      gap='s'\n      pl='s'\n      pr='s'\n      w='240px'\n      css={{\n        cursor: 'pointer',\n        transition: `background-color ${motion.hover}`\n      }}\n      {...props}\n      onClick={onClick}\n    >\n      <Flex\n        alignItems='center'\n        flex={1}\n        gap='m'\n        p='s'\n        borderRadius='m'\n        css={{\n          backgroundColor,\n          transition: `opacity ${motion.quick}`,\n          '&:hover': {\n            backgroundColor: isSelected ? undefined : color.background.surface2,\n            boxShadow: insetBorderColor\n          },\n          '&:active': {\n            opacity: !isSelected ? 0.8 : undefined,\n            transition: `opacity ${motion.quick}`\n          }\n        }}\n      >\n        <Flex\n          alignItems='center'\n          gap='m'\n          flex={1}\n          h={variant === 'compact' ? 'unit5' : 'unit6'}\n          pv='s'\n          css={{\n            maxWidth: '240px'\n          }}\n        >\n          {leftOverride || leftIconWithNotification}\n          <Text\n            variant='title'\n            size={textSize}\n            strength='weak'\n            lineHeight='single'\n            color={textAndIconColor}\n            ellipses\n            css={{\n              flex: 1,\n              marginLeft: isChild ? 'm' : undefined\n            }}\n          >\n            {children}\n          </Text>\n        </Flex>\n        {hasRightIcon ? RightIcon : null}\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"NavItem.js","sources":["../../../src/components/nav-item/NavItem.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { useTheme } from '@emotion/react'\n\nimport { motion } from '../../foundations/motion'\nimport { Flex } from '../layout/Flex'\nimport { NotificationCount } from '../notification-count'\nimport { Text } from '../text/Text'\n\nimport type { NavItemProps } from './types'\n\n/**\n * A navigation item component, typically used in sidebars or navigation menus.\n * Supports default, hover, and selected states, as well as optional left and right icons.\n */\nexport const NavItem = ({\n  children,\n  leftIcon: LeftIcon,\n  rightIcon: RightIcon,\n  isSelected = false,\n  onClick,\n  textSize = 'l',\n  hasNotification = false,\n  leftOverride,\n  variant = 'default',\n  isChild = false,\n  ...props\n}: NavItemProps) => {\n  const { color } = useTheme()\n\n  const hasLeftIcon = !!LeftIcon\n  const hasRightIcon = !!RightIcon\n\n  const backgroundColor = isSelected ? color.secondary.s400 : undefined\n\n  const textAndIconColor = isSelected ? 'white' : 'default'\n  const insetBorderColor = isSelected\n    ? 'none'\n    : `inset 0 0 0 1px ${color.border.default}`\n\n  const leftIconWithNotification = useMemo(() => {\n    const icon = hasLeftIcon ? (\n      <LeftIcon size='l' color={textAndIconColor} />\n    ) : null\n\n    if (hasNotification && !!icon) {\n      return (\n        <NotificationCount size='s' isSelected={isSelected}>\n          {icon}\n        </NotificationCount>\n      )\n    }\n    return icon\n  }, [hasNotification, hasLeftIcon, LeftIcon, textAndIconColor, isSelected])\n\n  return (\n    <Flex\n      alignItems='center'\n      gap='s'\n      pl='s'\n      pr='s'\n      w='240px'\n      css={{\n        cursor: 'pointer',\n        transition: `background-color ${motion.hover}`\n      }}\n      {...props}\n      onClick={onClick}\n    >\n      <Flex\n        alignItems='center'\n        flex={1}\n        gap='m'\n        p='s'\n        borderRadius='m'\n        css={{\n          backgroundColor,\n          transition: `opacity ${motion.quick}`,\n          '&:hover': {\n            backgroundColor: isSelected ? undefined : color.background.surface2,\n            boxShadow: insetBorderColor\n          },\n          '&:active': {\n            opacity: !isSelected ? 0.8 : undefined,\n            transition: `opacity ${motion.quick}`\n          }\n        }}\n      >\n        <Flex\n          alignItems='center'\n          gap={variant === 'compact' ? 'xs' : 'm'}\n          flex={1}\n          h={variant === 'compact' ? 'unit5' : 'unit6'}\n          pv='s'\n          css={{\n            maxWidth: '240px'\n          }}\n        >\n          {leftOverride || leftIconWithNotification}\n          <Text\n            variant='title'\n            size={textSize}\n            strength='weak'\n            lineHeight='single'\n            color={textAndIconColor}\n            ellipses\n            css={{\n              flex: 1,\n              marginLeft: isChild ? 'm' : undefined\n            }}\n          >\n            {children}\n          </Text>\n        </Flex>\n        {hasRightIcon ? RightIcon : null}\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/notification-count/NotificationCount.js

@@ -44,7 +44,7 @@ var NotificationCount = function (_a) {
     var textStyles = __assign({}, (isSelected && {
         color: color.neutral.n950
     }));
-    return (jsxs(Flex, __assign({ className: 'parent', alignItems: 'center', justifyContent: 'center', css: containerStyles, inline: true }, props, { children: [children, jsx(Flex, __assign({ as: 'span', h: getDimension(size), ph: 'xs', direction: 'column', justifyContent: 'center', alignItems: 'center', gap: 's', borderRadius: 'circle', css: badgeStyles }, { children: jsx(Text, __assign({ variant: 'label', size: 'xs', css: textStyles, color: 'staticWhite' }, { children: count !== undefined ? formatCount(count) : '' })) }))] })));
+    return (jsxs(Flex, __assign({ className: 'parent', alignItems: 'center', justifyContent: 'center', css: containerStyles, inline: true }, props, { children: [children, jsx(Flex, __assign({ as: 'span', h: getDimension(size), ph: 'xs', direction: 'column', justifyContent: 'center', alignItems: 'center', gap: 's', borderRadius: 'circle', css: badgeStyles }, { children: jsx(Text, __assign({ variant: 'label', size: 'xs', css: textStyles, color: 'white' }, { children: count !== undefined ? formatCount(count) : '' })) }))] })));
 };
 
 export { NotificationCount };

package/dist/components/notification-count/NotificationCount.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCount.js","sources":["../../../src/components/notification-count/NotificationCount.tsx"],"sourcesContent":["import { useTheme, CSSObject } from '@emotion/react'\n\nimport { formatCount } from '~harmony/utils/formatCount'\n\nimport { Flex } from '../layout/Flex'\nimport { Text } from '../text/Text'\n\nimport type { NotificationCountProps } from './types'\n\n/**\n * A small badge that displays a notification count and can wrap an icon, typically used with icons or buttons\n * to indicate unread or pending notifications.\n */\nexport const NotificationCount = ({\n  count,\n  size,\n  children,\n  isSelected = false,\n  hasBorder = true,\n  ...props\n}: NotificationCountProps) => {\n  const { spacing, color } = useTheme()\n\n  const getDimension = (size?: NotificationCountProps['size']) => {\n    const borderAdjustment = hasBorder ? 2 : 0\n    switch (size) {\n      case 's':\n        return spacing.unit2 + borderAdjustment\n      case 'm':\n        return spacing.unit4 + borderAdjustment\n      default:\n        return spacing.unit5 + borderAdjustment\n    }\n  }\n\n  const getBorderColor = () => {\n    if (!hasBorder) return 'none'\n    return isSelected ? color.secondary.s400 : color.background.surface1\n  }\n\n  const containerStyles: CSSObject = children\n    ? {\n        position: 'relative'\n      }\n    : {}\n\n  const badgeStyles: CSSObject = {\n    minWidth: getDimension(size),\n    backgroundColor: isSelected\n      ? color.background.surface1\n      : color.primary.p300,\n    border: hasBorder ? `1px solid ${getBorderColor()}` : 'none',\n    ...(children && {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      transform: 'translate(5%, -10%)'\n    })\n  }\n\n  const textStyles: CSSObject = {\n    ...(isSelected && {\n      color: color.neutral.n950\n    })\n  }\n\n  return (\n    <Flex\n      className='parent'\n      alignItems='center'\n      justifyContent='center'\n      css={containerStyles}\n      inline\n      {...props}\n    >\n      {children}\n      <Flex\n        as='span'\n        h={getDimension(size)}\n        ph='xs'\n        direction='column'\n        justifyContent='center'\n        alignItems='center'\n        gap='s'\n        borderRadius='circle'\n        css={badgeStyles}\n      >\n        <Text variant='label' size='xs' css={textStyles} color='staticWhite'>\n          {count !== undefined ? formatCount(count) : ''}\n        </Text>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"NotificationCount.js","sources":["../../../src/components/notification-count/NotificationCount.tsx"],"sourcesContent":["import { useTheme, CSSObject } from '@emotion/react'\n\nimport { formatCount } from '~harmony/utils/formatCount'\n\nimport { Flex } from '../layout/Flex'\nimport { Text } from '../text/Text'\n\nimport type { NotificationCountProps } from './types'\n\n/**\n * A small badge that displays a notification count and can wrap an icon, typically used with icons or buttons\n * to indicate unread or pending notifications.\n */\nexport const NotificationCount = ({\n  count,\n  size,\n  children,\n  isSelected = false,\n  hasBorder = true,\n  ...props\n}: NotificationCountProps) => {\n  const { spacing, color } = useTheme()\n\n  const getDimension = (size?: NotificationCountProps['size']) => {\n    const borderAdjustment = hasBorder ? 2 : 0\n    switch (size) {\n      case 's':\n        return spacing.unit2 + borderAdjustment\n      case 'm':\n        return spacing.unit4 + borderAdjustment\n      default:\n        return spacing.unit5 + borderAdjustment\n    }\n  }\n\n  const getBorderColor = () => {\n    if (!hasBorder) return 'none'\n    return isSelected ? color.secondary.s400 : color.background.surface1\n  }\n\n  const containerStyles: CSSObject = children\n    ? {\n        position: 'relative'\n      }\n    : {}\n\n  const badgeStyles: CSSObject = {\n    minWidth: getDimension(size),\n    backgroundColor: isSelected\n      ? color.background.surface1\n      : color.primary.p300,\n    border: hasBorder ? `1px solid ${getBorderColor()}` : 'none',\n    ...(children && {\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      transform: 'translate(5%, -10%)'\n    })\n  }\n\n  const textStyles: CSSObject = {\n    ...(isSelected && {\n      color: color.neutral.n950\n    })\n  }\n\n  return (\n    <Flex\n      className='parent'\n      alignItems='center'\n      justifyContent='center'\n      css={containerStyles}\n      inline\n      {...props}\n    >\n      {children}\n      <Flex\n        as='span'\n        h={getDimension(size)}\n        ph='xs'\n        direction='column'\n        justifyContent='center'\n        alignItems='center'\n        gap='s'\n        borderRadius='circle'\n        css={badgeStyles}\n      >\n        <Text variant='label' size='xs' css={textStyles} color='white'>\n          {count !== undefined ? formatCount(count) : ''}\n        </Text>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AASA;;;AAGG;AACI,IAAM,iBAAiB,GAAG,UAAC,EAOT,EAAA;IANvB,IAAA,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAkB,GAAA,EAAA,CAAA,UAAA,EAAlB,UAAU,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAA,EAAA,EAClB,EAAgB,GAAA,EAAA,CAAA,SAAA,EAAhB,SAAS,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,IAAI,GAAA,EAAA,EACb,KAAK,GANwB,MAAA,CAAA,EAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,WAAA,CAOjC,CADS,CAAA;IAEF,IAAA,EAAA,GAAqB,QAAQ,EAAE,EAA7B,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAe,CAAA;IAErC,IAAM,YAAY,GAAG,UAAC,IAAqC,EAAA;QACzD,IAAM,gBAAgB,GAAG,SAAS,GAAG,CAAC,GAAG,CAAC,CAAA;AAC1C,QAAA,QAAQ,IAAI;AACV,YAAA,KAAK,GAAG;AACN,gBAAA,OAAO,OAAO,CAAC,KAAK,GAAG,gBAAgB,CAAA;AACzC,YAAA,KAAK,GAAG;AACN,gBAAA,OAAO,OAAO,CAAC,KAAK,GAAG,gBAAgB,CAAA;AACzC,YAAA;AACE,gBAAA,OAAO,OAAO,CAAC,KAAK,GAAG,gBAAgB,CAAA;AAC1C,SAAA;AACH,KAAC,CAAA;AAED,IAAA,IAAM,cAAc,GAAG,YAAA;AACrB,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,OAAO,MAAM,CAAA;AAC7B,QAAA,OAAO,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAA;AACtE,KAAC,CAAA;IAED,IAAM,eAAe,GAAc,QAAQ;AACzC,UAAE;AACE,YAAA,QAAQ,EAAE,UAAU;AACrB,SAAA;UACD,EAAE,CAAA;IAEN,IAAM,WAAW,GACf,QAAA,CAAA,EAAA,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,EAC5B,eAAe,EAAE,UAAU;AACzB,cAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;cACzB,KAAK,CAAC,OAAO,CAAC,IAAI,EACtB,MAAM,EAAE,SAAS,GAAG,YAAa,CAAA,MAAA,CAAA,cAAc,EAAE,CAAE,GAAG,MAAM,EAAA,GACxD,QAAQ,IAAI;AACd,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,SAAS,EAAE,qBAAqB;AACjC,KAAA,EACF,CAAA;AAED,IAAA,IAAM,UAAU,GAAA,QAAA,CAAA,EAAA,GACV,UAAU,IAAI;AAChB,QAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;AAC1B,KAAA,EACF,CAAA;IAED,QACEA,KAAC,IAAI,EAAA,QAAA,CAAA,EACH,SAAS,EAAC,QAAQ,EAClB,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,GAAG,EAAE,eAAe,EACpB,MAAM,EACF,IAAA,EAAA,EAAA,KAAK,EAER,EAAA,QAAA,EAAA,CAAA,QAAQ,EACTC,GAAC,CAAA,IAAI,aACH,EAAE,EAAC,MAAM,EACT,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,EACrB,EAAE,EAAC,IAAI,EACP,SAAS,EAAC,QAAQ,EAClB,cAAc,EAAC,QAAQ,EACvB,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAC,GAAG,EACP,YAAY,EAAC,QAAQ,EACrB,GAAG,EAAE,WAAW,EAAA,EAAA,EAAA,QAAA,EAEhBA,GAAC,CAAA,IAAI,EAAC,QAAA,CAAA,EAAA,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAC,OAAO,gBAC3D,KAAK,KAAK,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,EAAE,EACzC,CAAA,CAAA,EAAA,CAAA,CACF,CACF,EAAA,CAAA,CAAA,EACR;AACH;;;;"}

package/dist/components/popup-menu/PopupMenu.d.ts

@@ -8,6 +8,7 @@ export declare const PopupMenu: (props: {
     onClose?: (() => void) | undefined;
     renderMenu?: ((menuItems: PopupMenuItem[]) => JSX.Element) | undefined;
     dismissOnMouseLeave?: boolean | undefined;
+    overrideIconColor?: boolean | undefined;
     renderTrigger: (anchorRef: import("react").MutableRefObject<any>, triggerPopup: (onMouseEnter?: boolean | undefined) => void, triggerProps: Partial<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>) => import("react").ReactNode;
     id?: string | undefined;
 } & {

package/dist/components/popup-menu/PopupMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupMenu.d.ts","sourceRoot":"","sources":["../../../src/components/popup-menu/PopupMenu.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,aAAa,EAAkB,MAAM,SAAS,CAAA;AAEvD;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;mJAgHrB,CAAA"}
+{"version":3,"file":"PopupMenu.d.ts","sourceRoot":"","sources":["../../../src/components/popup-menu/PopupMenu.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAkB,MAAM,SAAS,CAAA;AAEvD;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;mJAoKrB,CAAA"}

package/dist/components/popup-menu/PopupMenu.js

@@ -1,18 +1,21 @@
 import { __assign } from '../../_virtual/_tslib.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import { forwardRef, useRef, useState, useCallback } from 'react';
+import { useTheme } from '@emotion/react';
 import cn from 'classnames';
+import { Box } from '../layout/Box/Box.js';
+import { Flex } from '../layout/Flex/Flex.js';
 import { Popup } from '../popup/Popup.js';
-import styles from './PopupMenu.module.css.js';
 
 /**
  * A menu that shows on top of the UI. Ideal for overflow menus, dropdowns, etc
  */
 var PopupMenu = forwardRef(function PopupMenu(props, ref) {
-    var items = props.items, onClose = props.onClose, renderMenu = props.renderMenu, renderTrigger = props.renderTrigger, dismissOnMouseLeave = props.dismissOnMouseLeave, hideCloseButton = props.hideCloseButton, title = props.title, className = props.className, zIndex = props.zIndex, containerRef = props.containerRef, anchorOrigin = props.anchorOrigin, transformOrigin = props.transformOrigin, id = props.id, fixed = props.fixed;
+    var items = props.items, onClose = props.onClose, renderMenu = props.renderMenu, renderTrigger = props.renderTrigger, dismissOnMouseLeave = props.dismissOnMouseLeave, hideCloseButton = props.hideCloseButton, title = props.title, className = props.className, zIndex = props.zIndex, containerRef = props.containerRef, anchorOrigin = props.anchorOrigin, transformOrigin = props.transformOrigin, id = props.id, fixed = props.fixed, overrideIconColor = props.overrideIconColor;
+    var _a = useTheme(), spacing = _a.spacing, typography = _a.typography, color = _a.color;
     var clickInsideRef = useRef();
     var anchorRef = useRef(null);
-    var _a = useState(false), isPopupVisible = _a[0], setIsPopupVisible = _a[1];
+    var _b = useState(false), isPopupVisible = _b[0], setIsPopupVisible = _b[1];
     var triggerPopup = useCallback(function (onMouseEnter) {
         if (onMouseEnter && isPopupVisible)
             return;
@@ -35,17 +38,44 @@ var PopupMenu = forwardRef(function PopupMenu(props, ref) {
         'aria-expanded': isPopupVisible ? 'true' : undefined,
         id: triggerId
     };
-    return (jsxs("div", __assign({ ref: clickInsideRef }, { children: [renderTrigger(anchorRef, triggerPopup, triggerProps), jsx(Popup, __assign({ anchorRef: anchorRef, checkIfClickInside: function (target) {
+    var popupCss = {
+        margin: spacing.s,
+        padding: spacing.s,
+        border: "1px solid ".concat(color.border.strong)
+    };
+    var menuItemCss = {
+        fontSize: typography.size.m,
+        fontWeight: typography.weight.demiBold,
+        color: color.text.default,
+        cursor: 'pointer',
+        '&:hover': {
+            color: color.text.staticWhite,
+            background: color.secondary.s300,
+            path: {
+                fill: color.text.staticWhite
+            }
+        },
+        '&.destructive': {
+            color: color.status.error,
+            '&:hover': {
+                background: color.status.error,
+                color: color.text.staticWhite
+            }
+        }
+    };
+    var iconCss = {
+        path: {
+            fill: overrideIconColor ? undefined : color.text.default
+        }
+    };
+    return (jsxs(Box, __assign({ ref: clickInsideRef }, { children: [renderTrigger(anchorRef, triggerPopup, triggerProps), jsx(Popup, __assign({ anchorRef: anchorRef, checkIfClickInside: function (target) {
                     if (target instanceof Element && clickInsideRef) {
                         return clickInsideRef.current.contains(target);
                     }
                     return false;
-                }, isVisible: isPopupVisible, showHeader: Boolean(title), hideCloseButton: hideCloseButton, onClose: handlePopupClose, ref: ref, title: title || '', zIndex: zIndex, containerRef: containerRef, transformOrigin: transformOrigin, anchorOrigin: anchorOrigin, className: cn(styles.popup, className), dismissOnMouseLeave: dismissOnMouseLeave, fixed: fixed }, { children: renderMenu ? (renderMenu(items)) : (jsx("ul", __assign({ className: styles.menu, role: 'menu', "aria-labelledby": triggerId, tabIndex: -1 }, { children: items.map(function (item, i) {
-                        var _a;
-                        return (jsxs("li", __assign({ role: 'menuitem', className: cn(styles.item, item.className, (_a = {},
-                                _a[styles.destructive] = item.destructive,
-                                _a)), onClick: handleMenuItemClick(item), tabIndex: i === 0 ? 0 : -1 }, { children: [item.icon ? (jsx("div", __assign({ className: cn(styles.icon, item.iconClassName) }, { children: item.icon }))) : null, item.text] }), typeof item.text === 'string' ? item.text : i));
-                    }) }))) }))] })));
+                }, isVisible: isPopupVisible, showHeader: Boolean(title), hideCloseButton: hideCloseButton, onClose: handlePopupClose, ref: ref, title: title || '', zIndex: zIndex, containerRef: containerRef, transformOrigin: transformOrigin, anchorOrigin: anchorOrigin, className: className, css: popupCss, dismissOnMouseLeave: dismissOnMouseLeave, fixed: fixed }, { children: renderMenu ? (renderMenu(items)) : (jsx(Box, __assign({ as: 'ul', role: 'menu', "aria-labelledby": triggerId, tabIndex: -1, css: { all: 'unset' } }, { children: items.map(function (item, i) { return (jsxs(Flex, __assign({ as: 'li', role: 'menuitem', className: cn(item.className, {
+                            destructive: item.destructive
+                        }), onClick: handleMenuItemClick(item), tabIndex: i === 0 ? 0 : -1, css: menuItemCss, alignItems: 'center', gap: 's', p: 's', ph: 'm', borderRadius: 's' }, { children: [item.icon ? (jsx(Flex, __assign({ css: iconCss, className: item.iconClassName, alignItems: 'center', justifyContent: 'center', w: 'unit5', h: 'unit5' }, { children: item.icon }))) : null, item.text] }), typeof item.text === 'string' ? item.text : i)); }) }))) }))] })));
 });
 
 export { PopupMenu };