import React from 'react';
import type { SharedProps } from '@coinbase/cds-common/types';
import type { AvatarBaseProps } from './Avatar';
export declare const cdsHexagonTestId = 'cds-hexagon';
export declare const hexagonClipPathContainerId = 'cds-hexagon-clipPath-container';
export declare const hexagonAvatarClipId = 'cds-hexagon-avatar-clipper';
/**
 * We need to mount this to the DOM one time
 * This is currently done in the PortalProvider
 */
export declare const HexagonAvatarClipPath: {
  (): import('react/jsx-runtime').JSX.Element;
  displayName: string;
};
/**
 * @deprecated This will be removed in a future major release.
 * @deprecationExpectedRemoval v9
 */
export declare const hexagonSvgTransformStyles: {
  readonly standard: {
    readonly s: {
      readonly transform: 'scale(1.1) translateX(-0.3px)';
    };
    readonly m: {
      readonly transform: 'scale(1.075) translateX(-0.25px)';
    };
    readonly l: {
      readonly transform: 'scaleY(1.075) translateX(-0.25px)';
    };
    readonly xl: {
      readonly transform: 'scaleY(1.075) translateX(-0.25px)';
    };
    readonly xxl: {
      readonly transform: 'scaleX(1.05) scaleY(1.075) translateX(-0.55px)';
    };
    readonly xxxl: {
      readonly transform: 'scaleX(1.05) scaleY(1.075) translateX(-0.55px)';
    };
  };
  readonly offset: {
    readonly s: {
      readonly transform: 'scaleX(1.3) scaleY(1.325)';
    };
    readonly m: {
      readonly transform: 'scaleX(1.25) scaleY(1.275)';
    };
    readonly l: {
      readonly transform: 'scaleX(1.2) scaleY(1.25)';
    };
    readonly xl: {
      readonly transform: 'scaleX(1.175) scaleY(1.215)';
    };
    readonly xxl: {
      readonly transform: 'scaleX(1.15) scaleY(1.2125) translateX(-0.25px)';
    };
    readonly xxxl: {
      readonly transform: 'scaleX(1.125) scaleY(1.2) translateX(-0.25px)';
    };
  };
};
type HexagonBorderProps = SharedProps & {
  /**
   * The color that is applied to the stroke. This color will be overridden by any color set by CSS in the className prop
   */
  strokeColor: string;
  offset?: boolean;
  size?: AvatarBaseProps['size'];
  /**
   * Optional class that is placed on the container element.
   * To affect the stroke of the SVG path(s), you may set the color attribute.
   * Child path elements are programmed to use the currentColor CSS value to inherit this color.
   */
  className?: string;
  computedSize?: string | number;
};
export declare const HexagonBorder: React.MemoExoticComponent<
  ({
    strokeColor,
    offset,
    testID,
    className,
  }: HexagonBorderProps) => import('react/jsx-runtime').JSX.Element
>;
export declare const HexagonClipPathPortal: React.FC;
export declare const IsoHexagonClipPath: {
  (): import('react/jsx-runtime').JSX.Element;
  displayName: string;
};
export {};
//# sourceMappingURL=Hexagon.d.ts.map