How to use the @paprika/button.Icon function in @paprika/button

position: relative;
  ${triggerStylesProps()}
`;

export const iconStyles = css`
  height: 100%;
  pointer-events: none;
  position: absolute;
  right: ${tokens.space};
  top: 0;
  ${stylers.fontSize(-1)}

  ${({ isDisabled }) => isDisabled && `color: ${tokens.color.blackLighten60};`}
`;

export const ClearButtonStyled = styled(Button.Icon)`
  height: 100%;
  margin-right: 2px;
  position: absolute;
  /* 14px + 8px */
  right: ${({ shouldHideCaret }) => (shouldHideCaret ? 0 : "22px")};
  top: 0;

  > span {
    height: 14px;
    line-height: 14px;

    > svg {
      color: ${tokens.color.blackLighten20};
      vertical-align: text-top;
    }
  }

const TriggerButton = props => {
  const { icon, isConfirmOpen, children, onOpenConfirm, confirmId, triggerRef, ...moreProps } = props;

  const TriggerComponent = icon ? Button.Icon : Button;

  return (
    
      {icon || children}
    
  );
};

import React from "react";
import PropTypes from "prop-types";
import RawButton from "@paprika/raw-button";
import Button from "@paprika/button";

export const ButtonTypes = {
  ICON: "icon",
  RAW: "raw",
  SIMPLE: "simple",
};

const ButtonComponentMap = {
  icon: Button.Icon,
  raw: RawButton,
  simple: Button,
};

ButtonTypes.ALL = Object.values(ButtonTypes);

const propTypes = {
  children: PropTypes.node,
  buttonType: PropTypes.oneOf(ButtonTypes.ALL),
  isOpen: PropTypes.bool,
  menuRefId: PropTypes.string,
  onOpenMenu: PropTypes.func,
  triggerRef: PropTypes.shape({ current: PropTypes.instanceOf(Object) }) || null,
};

const defaultProps = {