@coinbase/cds-web 0.0.0 → 8.13.2

package/dts/layout/Spacer.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { Polymorphic } from '../core/polymorphism';
+import { type BoxBaseProps } from './Box';
+export declare const spacerDefaultElement = 'span';
+export type SpacerDefaultElement = typeof spacerDefaultElement;
+export type SpacerBaseProps = Polymorphic.ExtendableProps<
+  BoxBaseProps,
+  {
+    /** Space in the horizontal direction */
+    horizontal?: ThemeVars.Space;
+    /** Space in the vertical direction */
+    vertical?: ThemeVars.Space;
+    /** Max space in the horizontal direction */
+    maxHorizontal?: ThemeVars.Space;
+    /** Max space in the vertical direction */
+    maxVertical?: ThemeVars.Space;
+    /** Min space in the horizontal direction */
+    minHorizontal?: ThemeVars.Space;
+    /** Min space in the vertical direction */
+    minVertical?: ThemeVars.Space;
+  }
+>;
+export type SpacerProps<AsComponent extends React.ElementType> = Polymorphic.Props<
+  AsComponent,
+  SpacerBaseProps
+>;
+type SpacerComponent = (<AsComponent extends React.ElementType = SpacerDefaultElement>(
+  props: SpacerProps<AsComponent>,
+) => Polymorphic.ReactReturn) &
+  Polymorphic.ReactNamed;
+export declare const Spacer: SpacerComponent;
+export {};
+//# sourceMappingURL=Spacer.d.ts.map

package/dts/layout/Spacer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../src/layout/Spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAE/C,eAAO,MAAM,oBAAoB,SAAS,CAAC;AAE3C,MAAM,MAAM,oBAAoB,GAAG,OAAO,oBAAoB,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,eAAe,CACvD,YAAY,EACZ;IACE,wCAAwC;IACxC,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B,sCAAsC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC3B,4CAA4C;IAC5C,aAAa,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAChC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B,4CAA4C;IAC5C,aAAa,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAChC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAC/B,CACF,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CAChF,WAAW,EACX,eAAe,CAChB,CAAC;AAEF,KAAK,eAAe,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,oBAAoB,EACnF,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,KAC5B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,MAAM,EAAE,eA0CpB,CAAC"}

package/dts/layout/VStack.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { Polymorphic } from '../core/polymorphism';
+import { type BoxBaseProps } from './Box';
+export declare const vStackDefaultElement = 'div';
+export type VStackDefaultElement = typeof vStackDefaultElement;
+export type VStackBaseProps = BoxBaseProps;
+export type VStackProps<AsComponent extends React.ElementType> = Polymorphic.Props<
+  AsComponent,
+  VStackBaseProps
+>;
+type VStackComponent = (<AsComponent extends React.ElementType = VStackDefaultElement>(
+  props: VStackProps<AsComponent>,
+) => Polymorphic.ReactReturn) &
+  Polymorphic.ReactNamed;
+export declare const VStack: VStackComponent;
+export {};
+//# sourceMappingURL=VStack.d.ts.map

package/dts/layout/VStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["../../src/layout/VStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAE/C,eAAO,MAAM,oBAAoB,QAAQ,CAAC;AAE1C,MAAM,MAAM,oBAAoB,GAAG,OAAO,oBAAoB,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC;AAE3C,MAAM,MAAM,WAAW,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CAChF,WAAW,EACX,eAAe,CAChB,CAAC;AAEF,KAAK,eAAe,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,oBAAoB,EACnF,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,KAC5B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,MAAM,EAAE,eAYpB,CAAC"}

package/dts/layout/__figma__/Divider.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Divider.figma.d.ts.map

package/dts/layout/__figma__/Divider.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.figma.d.ts","sourceRoot":"","sources":["../../../src/layout/__figma__/Divider.figma.tsx"],"names":[],"mappings":""}

package/dts/layout/__figma__/Fallback.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Fallback.figma.d.ts.map

package/dts/layout/__figma__/Fallback.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fallback.figma.d.ts","sourceRoot":"","sources":["../../../src/layout/__figma__/Fallback.figma.tsx"],"names":[],"mappings":""}

package/dts/layout/index.d.ts

@@ -0,0 +1,10 @@
+export * from './Box';
+export * from './Divider';
+export * from './Fallback';
+export * from './Grid';
+export * from './GridColumn';
+export * from './Group';
+export * from './HStack';
+export * from './Spacer';
+export * from './VStack';
+//# sourceMappingURL=index.d.ts.map

package/dts/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC"}

package/dts/loaders/CircularProgress.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+export type CircularProgressProps = {
+  /** Radius of circular progress */
+  radius: number;
+  /** Stroke width of circular progress */
+  strokeWidth: number;
+  /**
+   * For determinate variant, you can specify the exact moment to pause the circular progress at
+   */
+  progress: number;
+  /**
+   *  A boolean flag indicating whether the circular progress is
+   *  in indeterminate or determinate states.
+   *  Indeterminate (true) - indicators visualize an unspecified wait time
+   *  Determinate (false) - indicators display how long an operation will take.
+   *  @default true
+   */
+  indeterminate?: boolean;
+} & SharedProps;
+export declare const CircularProgress: React.MemoExoticComponent<
+  ({
+    radius,
+    strokeWidth,
+    progress,
+    indeterminate,
+    testID,
+  }: CircularProgressProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=CircularProgress.d.ts.map

package/dts/loaders/CircularProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../src/loaders/CircularProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,MAAM,MAAM,qBAAqB,GAAG;IAClC,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,WAAW,CAAC;AAEhB,eAAO,MAAM,gBAAgB,uFACuC,qBAAqB,6CA2CxF,CAAC"}

package/dts/loaders/MaterialSpinner.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+export type MaterialSpinnerProp = {
+  /** Size of the spinner */
+  size: number;
+  /** Color of the spinner */
+  color: ThemeVars.Color;
+} & SharedProps;
+/**
+ * @deprecated Use Spinner component instead
+ */
+export declare const MaterialSpinner: React.MemoExoticComponent<
+  ({ size, color, testID }: MaterialSpinnerProp) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=MaterialSpinner.d.ts.map

package/dts/loaders/MaterialSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaterialSpinner.d.ts","sourceRoot":"","sources":["../../src/loaders/MaterialSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAW1E,MAAM,MAAM,mBAAmB,GAAG;IAChC,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC;CACxB,GAAG,WAAW,CAAC;AAEhB;;GAEG;AACH,eAAO,MAAM,eAAe,sDAAkC,mBAAmB,6CA6C/E,CAAC"}

package/dts/loaders/Spinner.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { type BoxDefaultElement, type BoxProps } from '../layout/Box';
+export type SpinnerBaseProps = {
+  /**
+   * The font size of the spinner in pixels - used to calculate the width, height, and borderWidth. Width and height are 10em while borderWidth is 1.1em.
+   */
+  size: number;
+};
+export type SpinnerProps = SpinnerBaseProps & BoxProps<BoxDefaultElement>;
+export declare const Spinner: React.MemoExoticComponent<
+  ({
+    color,
+    size,
+    style,
+    className,
+    accessibilityLabel,
+    testID,
+    ...props
+  }: SpinnerProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=Spinner.d.ts.map

package/dts/loaders/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/loaders/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAgC1E,eAAO,MAAM,OAAO,sGASf,YAAY,6CAwBhB,CAAC"}

package/dts/loaders/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Spinner';
+//# sourceMappingURL=index.d.ts.map

package/dts/loaders/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/loaders/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dts/media/Avatar.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { AvatarSize } from '@coinbase/cds-common';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { AvatarFallbackColor, AvatarShape, SharedProps } from '@coinbase/cds-common/types';
+import { type BoxDefaultElement, type BoxProps } from '../layout/Box';
+export declare const fallbackImageSrc =
+  'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAOAA4AwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+t80Zo4o4oAM0ZrsPBvw7m8Sxi7uZDa2GcKwHzyeu30HvXdf8Kp0Dytnlz7v+ennHP8Ah+lAHiuaM12XjL4dTeG4jd2sjXViDhiR88f1x1HvXG8UAGaKOKKADI9Kkt4vtFxFEOC7Bc/U4qPJ9KVXZGDLwwOQaAPpS0tY7G1ht4VCRRKEVcdABipc1meG9eh8RaRBeRMNzACRB1R+4/z2rU/OgCK5t47y3lgmUPFKpR1I6gjBr5uu4fst1NCefLdkz64OK+g/EWuQ+HtJnvJmHyjCIerv2Ar55klaWRnblmJJPqaAG5HpRRk+lFABzVnTtOutWvY7W0iMs8hwqj+Z9BVbB9a9o+GXhlNI0VL2VR9rvFD5PVY/4R+PX8vSgCfwX4EXwsDNJdSTXTrh1RisQ/Dv9T+QrrP89aT8qPyoA5Txr4FHilRNHdSQ3Ua4RHYtEfw7fUfrXjOo6dc6Tey2t3EYp4zgqf5j1FfSP5VxvxN8Mpq+jPfRKPtlmpfI6tH/ABD8Ov5+tAHi/NFGDRQBY060+3aja22f9dKsf5kD+tfSKIsaKigKqjAAHAFFFAC/j+lL+P6UUUAH4/pTXRZEZGG5WGCCOooooA+btRtPsOoXVtn/AFMrR/kSKKKKAP/Z';
+export type AvatarBaseProps = SharedProps & {
+  /** Absolute url to the image that should be shown in the Avatar. If no src is provided then a generic fallback image is used. */
+  src?: string;
+  /** Shape of Avatar.
+   * Note: If the shape is a hexagon, do not use name.
+   */
+  shape?: AvatarShape;
+  /** Size for a given avatar. */
+  size?: AvatarSize;
+  /** Adds a border to the Avatar */
+  borderColor?: ThemeVars.Color;
+  /**
+   * Override the default fallback background and border color
+   * @default blue
+   */
+  colorScheme?: AvatarFallbackColor;
+  /** This is the name associated with the Avatar's entity. It will be used to generate a fallback. */
+  name?: string;
+  /** Adds treatment that indicates that the Avatar is currently selected */
+  selected?: boolean;
+  /** This is the name associated with the entity in the Avatar. This is used in the image alt tag for accessibility. */
+  alt?: string;
+  /**
+   * @danger Creates a custom Avatar size. The size prop should be used in most circumstances.
+   * @deprecated Use the style prop instead to set the width/height properties
+   * This is an escape hatch when using the Avatar in a fixed size container where you cannot control the dimensions.
+   */
+  dangerouslySetSize?: number;
+};
+export type AvatarProps = AvatarBaseProps & BoxProps<BoxDefaultElement>;
+export declare const Avatar: React.MemoExoticComponent<
+  ({
+    src,
+    shape,
+    size,
+    borderColor,
+    colorScheme,
+    name,
+    selected,
+    alt,
+    testID,
+    dangerouslySetSize,
+    className,
+    style,
+    ...props
+  }: AvatarProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=Avatar.d.ts.map

package/dts/media/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/media/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAIhG,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAM3E,eAAO,MAAM,gBAAgB,4iDAC8gD,CAAC;AAoF5iD,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,iIAAiI;IACjI,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kCAAkC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,oGAAoG;IACpG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sHAAsH;IACtH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAExE,eAAO,MAAM,MAAM,0JAed,WAAW,6CAgHf,CAAC"}

package/dts/media/Hexagon.d.ts

@@ -0,0 +1,90 @@
+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;
+};
+/**
+ * Because the hexagon is not symmetrical, we have to get all mathy to scale the border appropriately
+ * Note: These values were manually set with my eyeballs
+ */
+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;
+};
+export declare const HexagonBorder: React.MemoExoticComponent<
+  ({
+    strokeColor,
+    offset,
+    size,
+    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

package/dts/media/Hexagon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hexagon.d.ts","sourceRoot":"","sources":["../../src/media/Hexagon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAO9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,eAAO,MAAM,gBAAgB,gBAAgB,CAAC;AAC9C,eAAO,MAAM,0BAA0B,mCAAmC,CAAC;AAC3E,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAEhE;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;CAkBjC,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiB5B,CAAC;AAOX,KAAK,kBAAkB,GAAG,WAAW,GAAG;IACtC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,aAAa,gFAOrB,kBAAkB,6CAyBtB,CAAC;AAUF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAiCxC,CAAC;AAGH,eAAO,MAAM,kBAAkB;;;CAK9B,CAAC"}

package/dts/media/RemoteImage.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { AvatarSize } from '@coinbase/cds-common/types/AvatarSize';
+import type { AspectRatio, Shape } from '@coinbase/cds-common/types/Shape';
+import { type BoxProps } from '../layout/Box';
+declare const resizeCss: {
+  cover: import('@linaria/core').LinariaClassName;
+  contain: import('@linaria/core').LinariaClassName;
+};
+export type RemoteImageBaseProps = Omit<BoxProps<'img'>, 'aspectRatio'> & {
+  /** Absolute url to the image that should be shown in the RemoteImage. If no source is provided then a generic fallback image is used. */
+  source?: string;
+  resizeMode?: keyof typeof resizeCss;
+  /**
+   * Shape of RemoteImage
+   * @default square
+   * */
+  shape?: Shape;
+  /**
+   * Size for a given RemoteImage. If width or height is not defined,
+   * it will set size = m as default
+   *
+   * @default m
+   * */
+  size?: AvatarSize;
+  aspectRatio?: AspectRatio;
+};
+export type RemoteImageProps = RemoteImageBaseProps;
+export declare const RemoteImage: React.MemoExoticComponent<
+  ({
+    width,
+    height,
+    aspectRatio,
+    shape,
+    source,
+    alt,
+    className,
+    resizeMode,
+    size,
+    borderColor,
+    borderWidth,
+    style,
+    ...props
+  }: RemoteImageProps) => import('react/jsx-runtime').JSX.Element
+>;
+export {};
+//# sourceMappingURL=RemoteImage.d.ts.map

package/dts/media/RemoteImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteImage.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAK7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAI3E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMnD,QAAA,MAAM,SAAS;;;CAOd,CAAC;AAsCF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG;IACxE,yIAAyI;IACzI,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IACpC;;;SAGK;IACL,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;;;SAKK;IACL,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAEpD,eAAO,MAAM,WAAW,yJAenB,gBAAgB,6CA0CpB,CAAC"}

package/dts/media/RemoteImageGroup.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type {
+  AvatarSize,
+  Shape,
+  SharedAccessibilityProps,
+  SharedProps,
+} from '@coinbase/cds-common/types';
+export type RemoteImageGroupBaseProps = SharedProps &
+  SharedAccessibilityProps & {
+    /**
+     * Indicates the number of remote image before it collapses
+     * @default 4
+     */
+    max?: number;
+    /**
+     * Size of all RemoteImage children in the group.
+     * @default m
+     */
+    size?: AvatarSize | number;
+    /**
+     * Shape of all RemoteImage children in the group
+     * @default circle
+     */
+    shape?: Shape;
+    /** Children content */
+    children?: React.ReactNode;
+  };
+export type RemoteImageGroupProps = RemoteImageGroupBaseProps;
+export declare const RemoteImageGroup: ({
+  children,
+  size,
+  max,
+  shape,
+  testID,
+  ...props
+}: RemoteImageGroupProps) => import('react/jsx-runtime').JSX.Element;
+//# sourceMappingURL=RemoteImageGroup.d.ts.map

package/dts/media/RemoteImageGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteImageGroup.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImageGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EACV,UAAU,EACV,KAAK,EACL,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AASpC,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAoB9D,eAAO,MAAM,gBAAgB,GAAI,kDAO9B,qBAAqB,4CAwEvB,CAAC"}

package/dts/media/__figma__/Avatar.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Avatar.figma.d.ts.map

package/dts/media/__figma__/Avatar.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.figma.d.ts","sourceRoot":"","sources":["../../../src/media/__figma__/Avatar.figma.tsx"],"names":[],"mappings":""}

package/dts/media/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Avatar';
+export * from './RemoteImage';
+export * from './RemoteImageGroup';
+//# sourceMappingURL=index.d.ts.map

package/dts/media/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/media/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC"}

package/dts/motion/AnimatedCaret.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SharedProps } from '@coinbase/cds-common/types';
+import { type IconProps } from '../icons/Icon';
+export type AnimatedCaretBaseProps = SharedProps & {
+  rotate: number;
+};
+export type AnimatedCaretProps = AnimatedCaretBaseProps & Partial<Omit<IconProps, 'name'>>;
+export declare const AnimatedCaret: React.NamedExoticComponent<AnimatedCaretProps>;
+//# sourceMappingURL=AnimatedCaret.d.ts.map

package/dts/motion/AnimatedCaret.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedCaret.d.ts","sourceRoot":"","sources":["../../src/motion/AnimatedCaret.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAI5E,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAKrD,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG;IACjD,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAW3F,eAAO,MAAM,aAAa,gDAuCxB,CAAC"}

package/dts/motion/ColorSurge.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { HintMotionBaseProps } from './types';
+export type ColorSurgeRefBaseProps = {
+  play: (background?: ThemeVars.Color) => Promise<void>;
+};
+export type ColorSurgeBaseProps = HintMotionBaseProps & {
+  /**
+   * The surge color
+   * @default bgPrimary
+   */
+  background?: ThemeVars.Color;
+};
+export type ColorSurgeTypes = ColorSurgeBaseProps;
+/**
+ * Please consult with the motion team in #ask-motion before using this component.
+ */
+export declare const ColorSurge: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    HintMotionBaseProps & {
+      /**
+       * The surge color
+       * @default bgPrimary
+       */
+      background?: ThemeVars.Color;
+    } & React.RefAttributes<ColorSurgeRefBaseProps>
+  >
+>;
+//# sourceMappingURL=ColorSurge.d.ts.map

package/dts/motion/ColorSurge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSurge.d.ts","sourceRoot":"","sources":["../../src/motion/ColorSurge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAMjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnD,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,GAAG;IACtD;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAIlD;;GAEG;AACH,eAAO,MAAM,UAAU;IAdrB;;;OAGG;iBACU,SAAS,CAAC,KAAK;iDA4D7B,CAAC"}

package/dts/motion/Pulse.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { MotionTransition, PulseVariant } from '@coinbase/cds-common';
+import type { HintMotionBaseProps } from './types';
+export type PulseBaseProps = HintMotionBaseProps & {
+  /**
+   * Variant controls opacity of the pulse
+   * @default moderate
+   */
+  variant?: PulseVariant;
+  children: React.ReactNode;
+  /**
+   * Specifies the number of times the pulse animation should loop.
+   * Provide a positive integer to define an exact number of loops.
+   * To enable infinite looping, omit this property or leave it undefined.
+   * By default, the animation loops infinitely if this property is not specified.
+   * @default Infinity
+   */
+  iterations?: number;
+  /**
+   * Custom motion transition to override default motion config
+   */
+  motionConfig?: Partial<MotionTransition>;
+};
+export type PulseRefBaseProps = {
+  play: (variant?: PulseVariant) => Promise<void>;
+  stop: () => void;
+};
+export type PulseProps = PulseBaseProps;
+export declare const calculateRepeatValue: (iterations: number | undefined) => number;
+/**
+ * Please consult with the motion team in #ask-motion before using this component.
+ */
+export declare const Pulse: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    HintMotionBaseProps & {
+      /**
+       * Variant controls opacity of the pulse
+       * @default moderate
+       */
+      variant?: PulseVariant;
+      children: React.ReactNode;
+      /**
+       * Specifies the number of times the pulse animation should loop.
+       * Provide a positive integer to define an exact number of loops.
+       * To enable infinite looping, omit this property or leave it undefined.
+       * By default, the animation loops infinitely if this property is not specified.
+       * @default Infinity
+       */
+      iterations?: number;
+      /**
+       * Custom motion transition to override default motion config
+       */
+      motionConfig?: Partial<MotionTransition>;
+    } & React.RefAttributes<PulseRefBaseProps>
+  >
+>;
+//# sourceMappingURL=Pulse.d.ts.map

package/dts/motion/Pulse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pulse.d.ts","sourceRoot":"","sources":["../../src/motion/Pulse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAI3E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnD,MAAM,MAAM,cAAc,GAAG,mBAAmB,GAAG;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAExC,eAAO,MAAM,oBAAoB,GAAI,YAAY,MAAM,GAAG,SAAS,WAMlE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK;IAtChB;;;OAGG;cACO,YAAY;cACZ,KAAK,CAAC,SAAS;IACzB;;;;;;OAMG;iBACU,MAAM;IACnB;;OAEG;mBACY,OAAO,CAAC,gBAAgB,CAAC;4CAyEzC,CAAC"}

package/dts/motion/Shake.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { HintMotionBaseProps } from './types';
+export type ShakeRefBaseProps = {
+  play: () => Promise<void>;
+};
+export type ShakeBaseProps = HintMotionBaseProps & {
+  children: React.ReactNode;
+};
+export type ShakeProps = ShakeBaseProps;
+/**
+ * Please consult with the motion team in #ask-motion before using this component.
+ */
+export declare const Shake: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    HintMotionBaseProps & {
+      children: React.ReactNode;
+    } & React.RefAttributes<ShakeRefBaseProps>
+  >
+>;
+//# sourceMappingURL=Shake.d.ts.map

package/dts/motion/Shake.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shake.d.ts","sourceRoot":"","sources":["../../src/motion/Shake.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAK7F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,mBAAmB,GAAG;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAExC;;GAEG;AACH,eAAO,MAAM,KAAK;cARN,KAAK,CAAC,SAAS;4CAwC1B,CAAC"}

package/dts/motion/types.d.ts

@@ -0,0 +1,29 @@
+import type {
+  MotionBaseSpec,
+  MotionTransition as MotionBaseTransition,
+} from '@coinbase/cds-common/types/Motion';
+import type { TargetAndTransition, Transition, Variant } from 'framer-motion';
+export type HintMotionBaseProps = {
+  /**
+   * Disable animation on component mount
+   * @default false
+   */
+  disableAnimateOnMount?: boolean;
+};
+export type MotionSpec = {
+  toValue: MotionBaseSpec['toValue'] | string;
+  fromValue?: MotionBaseSpec['fromValue'] | string;
+} & Omit<MotionBaseSpec, 'toValue' | 'fromValue'>;
+export type MotionState = 'enter' | 'exit';
+export type MotionVariant = {
+  enter?: Variant;
+  exit?: Variant;
+};
+export type MotionConfigs =
+  | MotionSpec[]
+  | {
+      tokens: MotionSpec[];
+      transitionEnd?: TargetAndTransition['transitionEnd'];
+    };
+export type MotionTransition = Partial<MotionBaseTransition> & Transition;
+//# sourceMappingURL=types.d.ts.map

package/dts/motion/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/motion/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,IAAI,oBAAoB,EACzC,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE9E,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAC5C,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;CAClD,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,WAAW,CAAC,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAC3C,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GACrB,UAAU,EAAE,GACZ;IACE,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,aAAa,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;CACtD,CAAC;AAEN,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,oBAAoB,CAAC,GAAG,UAAU,CAAC"}