@metamask/design-system-react 0.12.0 → 0.14.0

package/dist/components/BadgeWrapper/BadgeWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { CSSProperties } from 'react';\nimport React, {\n  forwardRef,\n  useState,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport type { BadgeWrapperProps } from './BadgeWrapper.types';\n\nexport const BadgeWrapper = forwardRef<HTMLDivElement, BadgeWrapperProps>(\n  (\n    {\n      children,\n      childrenContainerProps,\n      badge,\n      badgeContainerProps,\n      position = BadgeWrapperPosition.BottomRight,\n      positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular,\n      positionXOffset = 0,\n      positionYOffset = 0,\n      customPosition,\n      className = '',\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const [anchorWidth, setAnchorWidth] = useState(0);\n    const [anchorHeight, setAnchorHeight] = useState(0);\n    const [badgeWidth, setBadgeWidth] = useState(0);\n    const [badgeHeight, setBadgeHeight] = useState(0);\n\n    const anchorRef = useRef<HTMLDivElement | null>(null);\n    const badgeRef = useRef<HTMLDivElement | null>(null);\n\n    // Measure both elements once on mount\n    useLayoutEffect(() => {\n      if (anchorRef.current) {\n        const { width, height } = anchorRef.current.getBoundingClientRect();\n        setAnchorWidth(width);\n        setAnchorHeight(height);\n      }\n      if (badgeRef.current) {\n        const { width, height } = badgeRef.current.getBoundingClientRect();\n        setBadgeWidth(width);\n        setBadgeHeight(height);\n      }\n    }, []); // empty deps → run only after first render\n\n    const finalPositions = useMemo<React.CSSProperties>(() => {\n      if (customPosition) {\n        return customPosition as CSSProperties;\n      }\n\n      const anchorShapeXOffset =\n        positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n          ? 0\n          : anchorWidth * 0.1464;\n      const anchorShapeYOffset =\n        positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n          ? 0\n          : anchorHeight * 0.1464;\n\n      const badgeCenteringXOffset = badgeWidth / 2;\n      const badgeCenteringYOffset = badgeHeight / 2;\n\n      const finalXOffset =\n        anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;\n      const finalYOffset =\n        anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;\n\n      switch (position) {\n        case BadgeWrapperPosition.TopRight:\n          return { top: finalYOffset, right: finalXOffset };\n        case BadgeWrapperPosition.TopLeft:\n          return { top: finalYOffset, left: finalXOffset };\n        case BadgeWrapperPosition.BottomLeft:\n          return { bottom: finalYOffset, left: finalXOffset };\n        case BadgeWrapperPosition.BottomRight:\n        default:\n          return { bottom: finalYOffset, right: finalXOffset };\n      }\n    }, [\n      position,\n      positionAnchorShape,\n      anchorWidth,\n      anchorHeight,\n      badgeWidth,\n      badgeHeight,\n      positionXOffset,\n      positionYOffset,\n      customPosition,\n    ]);\n\n    const containerClassName = twMerge(\n      'relative inline-flex self-start',\n      className,\n    );\n\n    return (\n      <div ref={ref} className={containerClassName} style={style} {...props}>\n        <div\n          className=\"inline-flex\"\n          ref={anchorRef}\n          {...childrenContainerProps}\n        >\n          {children}\n        </div>\n\n        <div\n          ref={badgeRef}\n          className=\"absolute\"\n          style={finalPositions}\n          {...badgeContainerProps}\n        >\n          {badge}\n        </div>\n      </div>\n    );\n  },\n);\n\nBadgeWrapper.displayName = 'BadgeWrapper';\n"]}
+{"version":3,"file":"BadgeWrapper.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,EAChC,uCAAuC;AAExC,OAAO,QAAO,EACZ,UAAU,EACV,QAAQ,EACR,eAAe,EACf,OAAO,EACP,MAAM,EACP,cAAc;;AAEf,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAI/C,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,CACE,EACE,QAAQ,EACR,sBAAsB,EACtB,KAAK,EACL,mBAAmB,EACnB,QAAQ,GAAG,oBAAoB,CAAC,WAAW,EAC3C,mBAAmB,GAAG,+BAA+B,CAAC,QAAQ,EAC9D,eAAe,GAAG,CAAC,EACnB,eAAe,GAAG,CAAC,EACnB,cAAc,EACd,SAAS,GAAG,EAAE,EACd,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAChD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAElD,MAAM,SAAS,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAErD,sCAAsC;IACtC,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;YACpE,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,eAAe,CAAC,MAAM,CAAC,CAAC;SACzB;QACD,IAAI,QAAQ,CAAC,OAAO,EAAE;YACpB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;YACnE,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,cAAc,CAAC,MAAM,CAAC,CAAC;SACxB;IACH,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,2CAA2C;IAEnD,MAAM,cAAc,GAAG,OAAO,CAAsB,GAAG,EAAE;QACvD,IAAI,cAAc,EAAE;YAClB,OAAO,cAA+B,CAAC;SACxC;QAED,MAAM,kBAAkB,GACtB,mBAAmB,KAAK,+BAA+B,CAAC,WAAW;YACjE,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,WAAW,GAAG,MAAM,CAAC;QAC3B,MAAM,kBAAkB,GACtB,mBAAmB,KAAK,+BAA+B,CAAC,WAAW;YACjE,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,YAAY,GAAG,MAAM,CAAC;QAE5B,MAAM,qBAAqB,GAAG,UAAU,GAAG,CAAC,CAAC;QAC7C,MAAM,qBAAqB,GAAG,WAAW,GAAG,CAAC,CAAC;QAE9C,MAAM,YAAY,GAChB,kBAAkB,GAAG,qBAAqB,GAAG,eAAe,CAAC;QAC/D,MAAM,YAAY,GAChB,kBAAkB,GAAG,qBAAqB,GAAG,eAAe,CAAC;QAE/D,QAAQ,QAAQ,EAAE;YAChB,KAAK,oBAAoB,CAAC,QAAQ;gBAChC,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;YACpD,KAAK,oBAAoB,CAAC,OAAO;gBAC/B,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;YACnD,KAAK,oBAAoB,CAAC,UAAU;gBAClC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;YACtD,KAAK,oBAAoB,CAAC,WAAW,CAAC;YACtC;gBACE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;SACxD;IACH,CAAC,EAAE;QACD,QAAQ;QACR,mBAAmB;QACnB,WAAW;QACX,YAAY;QACZ,UAAU;QACV,WAAW;QACX,eAAe;QACf,eAAe;QACf,cAAc;KACf,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,OAAO,CAChC,iCAAiC,EACjC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,kBAAkB,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QACnE,6BACE,SAAS,EAAC,aAAa,EACvB,GAAG,EAAE,SAAS,KACV,sBAAsB,IAEzB,QAAQ,CACL;QAEN,6BACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAC,UAAU,EACpB,KAAK,EAAE,cAAc,KACjB,mBAAmB,IAEtB,KAAK,CACF,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '@metamask/design-system-shared';\nimport type { CSSProperties } from 'react';\nimport React, {\n  forwardRef,\n  useState,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\n\nimport type { BadgeWrapperProps } from './BadgeWrapper.types';\n\nexport const BadgeWrapper = forwardRef<HTMLDivElement, BadgeWrapperProps>(\n  (\n    {\n      children,\n      childrenContainerProps,\n      badge,\n      badgeContainerProps,\n      position = BadgeWrapperPosition.BottomRight,\n      positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular,\n      positionXOffset = 0,\n      positionYOffset = 0,\n      customPosition,\n      className = '',\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const [anchorWidth, setAnchorWidth] = useState(0);\n    const [anchorHeight, setAnchorHeight] = useState(0);\n    const [badgeWidth, setBadgeWidth] = useState(0);\n    const [badgeHeight, setBadgeHeight] = useState(0);\n\n    const anchorRef = useRef<HTMLDivElement | null>(null);\n    const badgeRef = useRef<HTMLDivElement | null>(null);\n\n    // Measure both elements once on mount\n    useLayoutEffect(() => {\n      if (anchorRef.current) {\n        const { width, height } = anchorRef.current.getBoundingClientRect();\n        setAnchorWidth(width);\n        setAnchorHeight(height);\n      }\n      if (badgeRef.current) {\n        const { width, height } = badgeRef.current.getBoundingClientRect();\n        setBadgeWidth(width);\n        setBadgeHeight(height);\n      }\n    }, []); // empty deps → run only after first render\n\n    const finalPositions = useMemo<React.CSSProperties>(() => {\n      if (customPosition) {\n        return customPosition as CSSProperties;\n      }\n\n      const anchorShapeXOffset =\n        positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n          ? 0\n          : anchorWidth * 0.1464;\n      const anchorShapeYOffset =\n        positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n          ? 0\n          : anchorHeight * 0.1464;\n\n      const badgeCenteringXOffset = badgeWidth / 2;\n      const badgeCenteringYOffset = badgeHeight / 2;\n\n      const finalXOffset =\n        anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;\n      const finalYOffset =\n        anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;\n\n      switch (position) {\n        case BadgeWrapperPosition.TopRight:\n          return { top: finalYOffset, right: finalXOffset };\n        case BadgeWrapperPosition.TopLeft:\n          return { top: finalYOffset, left: finalXOffset };\n        case BadgeWrapperPosition.BottomLeft:\n          return { bottom: finalYOffset, left: finalXOffset };\n        case BadgeWrapperPosition.BottomRight:\n        default:\n          return { bottom: finalYOffset, right: finalXOffset };\n      }\n    }, [\n      position,\n      positionAnchorShape,\n      anchorWidth,\n      anchorHeight,\n      badgeWidth,\n      badgeHeight,\n      positionXOffset,\n      positionYOffset,\n      customPosition,\n    ]);\n\n    const containerClassName = twMerge(\n      'relative inline-flex self-start',\n      className,\n    );\n\n    return (\n      <div ref={ref} className={containerClassName} style={style} {...props}>\n        <div\n          className=\"inline-flex\"\n          ref={anchorRef}\n          {...childrenContainerProps}\n        >\n          {children}\n        </div>\n\n        <div\n          ref={badgeRef}\n          className=\"absolute\"\n          style={finalPositions}\n          {...badgeContainerProps}\n        >\n          {badge}\n        </div>\n      </div>\n    );\n  },\n);\n\nBadgeWrapper.displayName = 'BadgeWrapper';\n"]}

package/dist/components/BadgeWrapper/BadgeWrapper.types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.types.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type {\n  BadgeWrapperPosition,\n  BadgeWrapperCustomPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '../../types';\n\n/**\n * Badge component props.\n */\nexport type BadgeWrapperProps = {\n  /**\n   * Optional prop to determine the shape of the anchoring element.\n   * This prop gets used along with position, positionXOffset, and positionYOffset\n   * to determine the final position.\n   * Possible values:\n   * BadgeWrapperPositionAnchorShape.Circular,\n   * - BadgeWrapperPositionAnchorShape.Rectangular,\n   *\n   * @default BadgeWrapperPositionAnchorShape.Circular\n   */\n  positionAnchorShape?: BadgeWrapperPositionAnchorShape;\n  /**\n   * Optional prop to control the preset position of the badge.\n   * This prop gets used along with positionAnchorShape, positionXOffset, and positionYOffset\n   * to determine the final position.\n   *\n   * @default BadgeWrapperPosition.TopRight\n   */\n  position?: BadgeWrapperPosition;\n  /**\n   * Optional prop to move the preset position horizontally.\n   * This prop gets used along with position, positionAnchorShape, and positionYOffset\n   * to determine the final position.\n   *\n   * @default 0\n   */\n  positionXOffset?: number;\n  /**\n   * Optional prop to move the preset position vertically.\n   * This prop gets used along with position, positionAnchorShape, and positionXOffset\n   * to determine the final position.\n   *\n   * @default 0\n   */\n  positionYOffset?: number;\n  /**\n   * Optional prop to customize the position through the position object.\n   * Position object - {top: 0, right: 0, bottom: 0, left: 0}\n   */\n  customPosition?: BadgeWrapperCustomPosition;\n  /**\n   * The element that the badge will attach itself to.\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop to pass additional props to the children container\n   */\n  childrenContainerProps?: ComponentProps<'div'>;\n  /**\n   * Any element that will be placed in the position of the badge.\n   */\n  badge: React.ReactNode;\n  /**\n   * Optional prop to pass additional props to the badge container\n   */\n  badgeContainerProps?: ComponentProps<'div'>;\n  /**\n   * Optional prop for additional CSS classes to be applied to the BadgeWrapper component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: React.CSSProperties;\n  /**\n   * Optional prop to add a test id to the BadgeWrapper\n   */\n  'data-testid'?: string;\n} & ComponentProps<'div'>;\n"]}
+{"version":3,"file":"BadgeWrapper.types.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeWrapperPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\n/**\n * BadgeWrapper component props (React platform-specific)\n * Extends shared props from @metamask/design-system-shared with React-specific platform concerns\n */\nexport type BadgeWrapperProps = BadgeWrapperPropsShared & {\n  /**\n   * Optional prop to pass additional props to the children container\n   */\n  childrenContainerProps?: ComponentProps<'div'>;\n  /**\n   * Optional prop to pass additional props to the badge container\n   */\n  badgeContainerProps?: ComponentProps<'div'>;\n  /**\n   * Optional prop for additional CSS classes to be applied to the BadgeWrapper component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: React.CSSProperties;\n  /**\n   * Optional prop to add a test id to the BadgeWrapper\n   */\n  'data-testid'?: string;\n} & ComponentProps<'div'>;\n"]}

package/dist/components/BadgeWrapper/BadgeWrapper.types.d.cts

@@ -1,61 +1,14 @@
+import type { BadgeWrapperPropsShared } from "@metamask/design-system-shared";
 import type { ComponentProps } from "react";
-import type { BadgeWrapperPosition, BadgeWrapperCustomPosition, BadgeWrapperPositionAnchorShape } from "../../types/index.cjs";
 /**
- * Badge component props.
+ * BadgeWrapper component props (React platform-specific)
+ * Extends shared props from @metamask/design-system-shared with React-specific platform concerns
  */
-export type BadgeWrapperProps = {
-    /**
-     * Optional prop to determine the shape of the anchoring element.
-     * This prop gets used along with position, positionXOffset, and positionYOffset
-     * to determine the final position.
-     * Possible values:
-     * BadgeWrapperPositionAnchorShape.Circular,
-     * - BadgeWrapperPositionAnchorShape.Rectangular,
-     *
-     * @default BadgeWrapperPositionAnchorShape.Circular
-     */
-    positionAnchorShape?: BadgeWrapperPositionAnchorShape;
-    /**
-     * Optional prop to control the preset position of the badge.
-     * This prop gets used along with positionAnchorShape, positionXOffset, and positionYOffset
-     * to determine the final position.
-     *
-     * @default BadgeWrapperPosition.TopRight
-     */
-    position?: BadgeWrapperPosition;
-    /**
-     * Optional prop to move the preset position horizontally.
-     * This prop gets used along with position, positionAnchorShape, and positionYOffset
-     * to determine the final position.
-     *
-     * @default 0
-     */
-    positionXOffset?: number;
-    /**
-     * Optional prop to move the preset position vertically.
-     * This prop gets used along with position, positionAnchorShape, and positionXOffset
-     * to determine the final position.
-     *
-     * @default 0
-     */
-    positionYOffset?: number;
-    /**
-     * Optional prop to customize the position through the position object.
-     * Position object - {top: 0, right: 0, bottom: 0, left: 0}
-     */
-    customPosition?: BadgeWrapperCustomPosition;
-    /**
-     * The element that the badge will attach itself to.
-     */
-    children: React.ReactNode;
+export type BadgeWrapperProps = BadgeWrapperPropsShared & {
     /**
      * Optional prop to pass additional props to the children container
      */
     childrenContainerProps?: ComponentProps<'div'>;
-    /**
-     * Any element that will be placed in the position of the badge.
-     */
-    badge: React.ReactNode;
     /**
      * Optional prop to pass additional props to the badge container
      */

package/dist/components/BadgeWrapper/BadgeWrapper.types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EACV,oBAAoB,EACpB,0BAA0B,EAC1B,+BAA+B,EAChC,8BAAoB;AAErB;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;;;;;OASG;IACH,mBAAmB,CAAC,EAAE,+BAA+B,CAAC;IACtD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC/C;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC"}
+{"version":3,"file":"BadgeWrapper.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,uCAAuC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,uBAAuB,GAAG;IACxD;;OAEG;IACH,sBAAsB,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC/C;;OAEG;IACH,mBAAmB,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC"}

package/dist/components/BadgeWrapper/BadgeWrapper.types.d.mts

@@ -1,61 +1,14 @@
+import type { BadgeWrapperPropsShared } from "@metamask/design-system-shared";
 import type { ComponentProps } from "react";
-import type { BadgeWrapperPosition, BadgeWrapperCustomPosition, BadgeWrapperPositionAnchorShape } from "../../types/index.mjs";
 /**
- * Badge component props.
+ * BadgeWrapper component props (React platform-specific)
+ * Extends shared props from @metamask/design-system-shared with React-specific platform concerns
  */
-export type BadgeWrapperProps = {
-    /**
-     * Optional prop to determine the shape of the anchoring element.
-     * This prop gets used along with position, positionXOffset, and positionYOffset
-     * to determine the final position.
-     * Possible values:
-     * BadgeWrapperPositionAnchorShape.Circular,
-     * - BadgeWrapperPositionAnchorShape.Rectangular,
-     *
-     * @default BadgeWrapperPositionAnchorShape.Circular
-     */
-    positionAnchorShape?: BadgeWrapperPositionAnchorShape;
-    /**
-     * Optional prop to control the preset position of the badge.
-     * This prop gets used along with positionAnchorShape, positionXOffset, and positionYOffset
-     * to determine the final position.
-     *
-     * @default BadgeWrapperPosition.TopRight
-     */
-    position?: BadgeWrapperPosition;
-    /**
-     * Optional prop to move the preset position horizontally.
-     * This prop gets used along with position, positionAnchorShape, and positionYOffset
-     * to determine the final position.
-     *
-     * @default 0
-     */
-    positionXOffset?: number;
-    /**
-     * Optional prop to move the preset position vertically.
-     * This prop gets used along with position, positionAnchorShape, and positionXOffset
-     * to determine the final position.
-     *
-     * @default 0
-     */
-    positionYOffset?: number;
-    /**
-     * Optional prop to customize the position through the position object.
-     * Position object - {top: 0, right: 0, bottom: 0, left: 0}
-     */
-    customPosition?: BadgeWrapperCustomPosition;
-    /**
-     * The element that the badge will attach itself to.
-     */
-    children: React.ReactNode;
+export type BadgeWrapperProps = BadgeWrapperPropsShared & {
     /**
      * Optional prop to pass additional props to the children container
      */
     childrenContainerProps?: ComponentProps<'div'>;
-    /**
-     * Any element that will be placed in the position of the badge.
-     */
-    badge: React.ReactNode;
     /**
      * Optional prop to pass additional props to the badge container
      */

package/dist/components/BadgeWrapper/BadgeWrapper.types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EACV,oBAAoB,EACpB,0BAA0B,EAC1B,+BAA+B,EAChC,8BAAoB;AAErB;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;;;;;OASG;IACH,mBAAmB,CAAC,EAAE,+BAA+B,CAAC;IACtD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC/C;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC"}
+{"version":3,"file":"BadgeWrapper.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,uCAAuC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,uBAAuB,GAAG;IACxD;;OAEG;IACH,sBAAsB,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC/C;;OAEG;IACH,mBAAmB,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC"}

package/dist/components/BadgeWrapper/BadgeWrapper.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type {\n  BadgeWrapperPosition,\n  BadgeWrapperCustomPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '../../types';\n\n/**\n * Badge component props.\n */\nexport type BadgeWrapperProps = {\n  /**\n   * Optional prop to determine the shape of the anchoring element.\n   * This prop gets used along with position, positionXOffset, and positionYOffset\n   * to determine the final position.\n   * Possible values:\n   * BadgeWrapperPositionAnchorShape.Circular,\n   * - BadgeWrapperPositionAnchorShape.Rectangular,\n   *\n   * @default BadgeWrapperPositionAnchorShape.Circular\n   */\n  positionAnchorShape?: BadgeWrapperPositionAnchorShape;\n  /**\n   * Optional prop to control the preset position of the badge.\n   * This prop gets used along with positionAnchorShape, positionXOffset, and positionYOffset\n   * to determine the final position.\n   *\n   * @default BadgeWrapperPosition.TopRight\n   */\n  position?: BadgeWrapperPosition;\n  /**\n   * Optional prop to move the preset position horizontally.\n   * This prop gets used along with position, positionAnchorShape, and positionYOffset\n   * to determine the final position.\n   *\n   * @default 0\n   */\n  positionXOffset?: number;\n  /**\n   * Optional prop to move the preset position vertically.\n   * This prop gets used along with position, positionAnchorShape, and positionXOffset\n   * to determine the final position.\n   *\n   * @default 0\n   */\n  positionYOffset?: number;\n  /**\n   * Optional prop to customize the position through the position object.\n   * Position object - {top: 0, right: 0, bottom: 0, left: 0}\n   */\n  customPosition?: BadgeWrapperCustomPosition;\n  /**\n   * The element that the badge will attach itself to.\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop to pass additional props to the children container\n   */\n  childrenContainerProps?: ComponentProps<'div'>;\n  /**\n   * Any element that will be placed in the position of the badge.\n   */\n  badge: React.ReactNode;\n  /**\n   * Optional prop to pass additional props to the badge container\n   */\n  badgeContainerProps?: ComponentProps<'div'>;\n  /**\n   * Optional prop for additional CSS classes to be applied to the BadgeWrapper component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: React.CSSProperties;\n  /**\n   * Optional prop to add a test id to the BadgeWrapper\n   */\n  'data-testid'?: string;\n} & ComponentProps<'div'>;\n"]}
+{"version":3,"file":"BadgeWrapper.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeWrapperPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\n/**\n * BadgeWrapper component props (React platform-specific)\n * Extends shared props from @metamask/design-system-shared with React-specific platform concerns\n */\nexport type BadgeWrapperProps = BadgeWrapperPropsShared & {\n  /**\n   * Optional prop to pass additional props to the children container\n   */\n  childrenContainerProps?: ComponentProps<'div'>;\n  /**\n   * Optional prop to pass additional props to the badge container\n   */\n  badgeContainerProps?: ComponentProps<'div'>;\n  /**\n   * Optional prop for additional CSS classes to be applied to the BadgeWrapper component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: React.CSSProperties;\n  /**\n   * Optional prop to add a test id to the BadgeWrapper\n   */\n  'data-testid'?: string;\n} & ComponentProps<'div'>;\n"]}

package/dist/components/BadgeWrapper/index.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BadgeWrapper = exports.BadgeWrapperPositionAnchorShape = exports.BadgeWrapperPosition = void 0;
-var types_1 = require("../../types/index.cjs");
-Object.defineProperty(exports, "BadgeWrapperPosition", { enumerable: true, get: function () { return types_1.BadgeWrapperPosition; } });
-Object.defineProperty(exports, "BadgeWrapperPositionAnchorShape", { enumerable: true, get: function () { return types_1.BadgeWrapperPositionAnchorShape; } });
+var design_system_shared_1 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "BadgeWrapperPosition", { enumerable: true, get: function () { return design_system_shared_1.BadgeWrapperPosition; } });
+Object.defineProperty(exports, "BadgeWrapperPositionAnchorShape", { enumerable: true, get: function () { return design_system_shared_1.BadgeWrapperPositionAnchorShape; } });
 var BadgeWrapper_1 = require("./BadgeWrapper.cjs");
 Object.defineProperty(exports, "BadgeWrapper", { enumerable: true, get: function () { return BadgeWrapper_1.BadgeWrapper; } });
 //# sourceMappingURL=index.cjs.map

package/dist/components/BadgeWrapper/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":";;;AAAA,+CAGqB;AAFnB,6GAAA,oBAAoB,OAAA;AACpB,wHAAA,+BAA+B,OAAA;AAGjC,mDAA8C;AAArC,4GAAA,YAAY,OAAA","sourcesContent":["export {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '../../types';\nexport type { BadgeWrapperCustomPosition } from '../../types';\nexport { BadgeWrapper } from './BadgeWrapper';\nexport type { BadgeWrapperProps } from './BadgeWrapper.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":";;;AAAA,uEAIwC;AAHtC,4HAAA,oBAAoB,OAAA;AACpB,uIAAA,+BAA+B,OAAA;AAGjC,mDAA8C;AAArC,4GAAA,YAAY,OAAA","sourcesContent":["export {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n  type BadgeWrapperCustomPosition,\n} from '@metamask/design-system-shared';\nexport { BadgeWrapper } from './BadgeWrapper';\nexport type { BadgeWrapperProps } from './BadgeWrapper.types';\n"]}

package/dist/components/BadgeWrapper/index.d.cts

@@ -1,5 +1,4 @@
-export { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape, } from "../../types/index.cjs";
-export type { BadgeWrapperCustomPosition } from "../../types/index.cjs";
+export { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape, type BadgeWrapperCustomPosition, } from "@metamask/design-system-shared";
 export { BadgeWrapper } from "./BadgeWrapper.cjs";
 export type { BadgeWrapperProps } from "./BadgeWrapper.types.cjs";
 //# sourceMappingURL=index.d.cts.map

package/dist/components/BadgeWrapper/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,GAChC,8BAAoB;AACrB,YAAY,EAAE,0BAA0B,EAAE,8BAAoB;AAC9D,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,EAC/B,KAAK,0BAA0B,GAChC,uCAAuC;AACxC,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}

package/dist/components/BadgeWrapper/index.d.mts

@@ -1,5 +1,4 @@
-export { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape, } from "../../types/index.mjs";
-export type { BadgeWrapperCustomPosition } from "../../types/index.mjs";
+export { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape, type BadgeWrapperCustomPosition, } from "@metamask/design-system-shared";
 export { BadgeWrapper } from "./BadgeWrapper.mjs";
 export type { BadgeWrapperProps } from "./BadgeWrapper.types.mjs";
 //# sourceMappingURL=index.d.mts.map

package/dist/components/BadgeWrapper/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,GAChC,8BAAoB;AACrB,YAAY,EAAE,0BAA0B,EAAE,8BAAoB;AAC9D,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,EAC/B,KAAK,0BAA0B,GAChC,uCAAuC;AACxC,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}

package/dist/components/BadgeWrapper/index.mjs

@@ -1,3 +1,3 @@
-export { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape } from "../../types/index.mjs";
+export { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape } from "@metamask/design-system-shared";
 export { BadgeWrapper } from "./BadgeWrapper.mjs";
 //# sourceMappingURL=index.mjs.map

package/dist/components/BadgeWrapper/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,EAChC,8BAAoB;AAErB,OAAO,EAAE,YAAY,EAAE,2BAAuB","sourcesContent":["export {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '../../types';\nexport type { BadgeWrapperCustomPosition } from '../../types';\nexport { BadgeWrapper } from './BadgeWrapper';\nexport type { BadgeWrapperProps } from './BadgeWrapper.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,EAEhC,uCAAuC;AACxC,OAAO,EAAE,YAAY,EAAE,2BAAuB","sourcesContent":["export {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n  type BadgeWrapperCustomPosition,\n} from '@metamask/design-system-shared';\nexport { BadgeWrapper } from './BadgeWrapper';\nexport type { BadgeWrapperProps } from './BadgeWrapper.types';\n"]}

package/dist/components/Checkbox/Checkbox.cjs

@@ -59,11 +59,11 @@ exports.Checkbox = (0, react_1.forwardRef)(({ id, isSelected, isDisabled = false
     else if (isInvalid) {
         baseBorder = 'border-error-default';
     }
-    const checkboxClasses = (0, tw_merge_1.twMerge)('relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95', baseBg, baseBorder, checkboxContainerProps?.className);
+    const checkboxClasses = (0, tw_merge_1.twMerge)('relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default', baseBg, baseBorder, checkboxContainerProps?.className);
     const iconClasses = (0, tw_merge_1.twMerge)('pointer-events-none transition-opacity', isSelected ? 'opacity-100' : 'opacity-0', checkedIconProps?.className);
     return (react_1.default.createElement("label", { htmlFor: id, className: outerClassName, style: style, ...props },
         react_1.default.createElement("div", { className: "relative" },
-            react_1.default.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: "absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", ...inputProps }),
+            react_1.default.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: "peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", ...inputProps }),
             react_1.default.createElement("div", { className: checkboxClasses, ...checkboxContainerProps },
                 react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Check, color: Icon_1.IconColor.PrimaryInverse, size: Icon_1.IconSize.Sm, ...checkedIconProps, className: iconClasses }))),
         label ? (react_1.default.createElement(Text_1.Text, { asChild: true, ...labelProps, className: (0, tw_merge_1.twMerge)('ml-3', labelProps?.className) },

package/dist/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAA+D;AAE/D,uDAA+C;AAC/C,4CAA8D;AAC9D,4CAA+B;AAIlB,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAChC,CACE,EACE,EAAE,EACF,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,UAAU,EACV,QAAQ,EACR,UAAU,EACV,sBAAsB,EACtB,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC5D,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC/D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,EAAE,CAAC;SACf;IACH,CAAC,CAAC;IAEF,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEzE,MAAM,cAAc,GAAG,IAAA,kBAAO,EAC5B,0BAA0B,EAC1B,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,MAAM,MAAM,GAAG,UAAU;QACvB,CAAC,CAAC,qFAAqF;QACvF,CAAC,CAAC,6DAA6D,CAAC;IAClE,IAAI,UAAU,GAAG,gBAAgB,CAAC;IAClC,IAAI,UAAU,EAAE;QACd,UAAU,GAAG,wBAAwB,CAAC;KACvC;SAAM,IAAI,SAAS,EAAE;QACpB,UAAU,GAAG,sBAAsB,CAAC;KACrC;IAED,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,4GAA4G,EAC5G,MAAM,EACN,UAAU,EACV,sBAAsB,EAAE,SAAS,CAClC,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,kBAAO,EACzB,wCAAwC,EACxC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,EACxC,gBAAgB,EAAE,SAAS,CAC5B,CAAC;IAEF,OAAO,CACL,yCAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QACpE,uCAAK,SAAS,EAAC,UAAU;YACvB,yCACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,UAAU,kBACN,SAAS,EACvB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,aAAa,EACxB,SAAS,EAAC,iFAAiF,KACvF,UAAU,GACd;YACF,uCAAK,SAAS,EAAE,eAAe,KAAM,sBAAsB;gBACzD,8BAAC,WAAI,IACH,IAAI,EAAE,eAAQ,CAAC,KAAK,EACpB,KAAK,EAAE,gBAAS,CAAC,cAAc,EAC/B,IAAI,EAAE,eAAQ,CAAC,EAAE,KACb,gBAAgB,EACpB,SAAS,EAAE,WAAW,GACtB,CACE,CACF;QACL,KAAK,CAAC,CAAC,CAAC,CACP,8BAAC,WAAI,IACH,OAAO,WACH,UAAU,EACd,SAAS,EAAE,IAAA,kBAAO,EAAC,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC;YAEjD,4CAAO,KAAK,CAAQ,CACf,CACR,CAAC,CAAC,CAAC,IAAI,CACF,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import type { ChangeEvent, KeyboardEvent } from 'react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { Text } from '../Text';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n  (\n    {\n      id,\n      isSelected,\n      isDisabled = false,\n      isInvalid = false,\n      label,\n      labelProps,\n      onChange,\n      inputProps,\n      checkboxContainerProps,\n      checkedIconProps,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(event.target.checked);\n    };\n\n    const handleClick = () => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(!isSelected);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        handleClick();\n      }\n    };\n\n    useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);\n\n    const outerClassName = twMerge(\n      'inline-flex items-center',\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    const baseBg = isSelected\n      ? 'bg-primary-default hover:bg-primary-default-hover active:bg-primary-default-pressed'\n      : 'bg-default hover:bg-default-hover active:bg-default-pressed';\n    let baseBorder = 'border-default';\n    if (isSelected) {\n      baseBorder = 'border-primary-default';\n    } else if (isInvalid) {\n      baseBorder = 'border-error-default';\n    }\n\n    const checkboxClasses = twMerge(\n      'relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95',\n      baseBg,\n      baseBorder,\n      checkboxContainerProps?.className,\n    );\n\n    const iconClasses = twMerge(\n      'pointer-events-none transition-opacity',\n      isSelected ? 'opacity-100' : 'opacity-0',\n      checkedIconProps?.className,\n    );\n\n    return (\n      <label htmlFor={id} className={outerClassName} style={style} {...props}>\n        <div className=\"relative\">\n          <input\n            type=\"checkbox\"\n            id={id}\n            checked={isSelected}\n            disabled={isDisabled}\n            aria-invalid={isInvalid}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            className=\"absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n            {...inputProps}\n          />\n          <div className={checkboxClasses} {...checkboxContainerProps}>\n            <Icon\n              name={IconName.Check}\n              color={IconColor.PrimaryInverse}\n              size={IconSize.Sm}\n              {...checkedIconProps}\n              className={iconClasses}\n            />\n          </div>\n        </div>\n        {label ? (\n          <Text\n            asChild\n            {...labelProps}\n            className={twMerge('ml-3', labelProps?.className)}\n          >\n            <span>{label}</span>\n          </Text>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}
+{"version":3,"file":"Checkbox.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ChangeEvent, KeyboardEvent } from 'react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { Text } from '../Text';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n  (\n    {\n      id,\n      isSelected,\n      isDisabled = false,\n      isInvalid = false,\n      label,\n      labelProps,\n      onChange,\n      inputProps,\n      checkboxContainerProps,\n      checkedIconProps,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(event.target.checked);\n    };\n\n    const handleClick = () => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(!isSelected);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        handleClick();\n      }\n    };\n\n    useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);\n\n    const outerClassName = twMerge(\n      'inline-flex items-center',\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    const baseBg = isSelected\n      ? 'bg-primary-default hover:bg-primary-default-hover active:bg-primary-default-pressed'\n      : 'bg-default hover:bg-default-hover active:bg-default-pressed';\n    let baseBorder = 'border-default';\n    if (isSelected) {\n      baseBorder = 'border-primary-default';\n    } else if (isInvalid) {\n      baseBorder = 'border-error-default';\n    }\n\n    const checkboxClasses = twMerge(\n      'relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default',\n      baseBg,\n      baseBorder,\n      checkboxContainerProps?.className,\n    );\n\n    const iconClasses = twMerge(\n      'pointer-events-none transition-opacity',\n      isSelected ? 'opacity-100' : 'opacity-0',\n      checkedIconProps?.className,\n    );\n\n    return (\n      <label htmlFor={id} className={outerClassName} style={style} {...props}>\n        <div className=\"relative\">\n          <input\n            type=\"checkbox\"\n            id={id}\n            checked={isSelected}\n            disabled={isDisabled}\n            aria-invalid={isInvalid}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            className=\"peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n            {...inputProps}\n          />\n          <div className={checkboxClasses} {...checkboxContainerProps}>\n            <Icon\n              name={IconName.Check}\n              color={IconColor.PrimaryInverse}\n              size={IconSize.Sm}\n              {...checkedIconProps}\n              className={iconClasses}\n            />\n          </div>\n        </div>\n        {label ? (\n          <Text\n            asChild\n            {...labelProps}\n            className={twMerge('ml-3', labelProps?.className)}\n          >\n            <span>{label}</span>\n          </Text>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}

package/dist/components/Checkbox/Checkbox.mjs

@@ -40,11 +40,11 @@ export const Checkbox = forwardRef(({ id, isSelected, isDisabled = false, isInva
     else if (isInvalid) {
         baseBorder = 'border-error-default';
     }
-    const checkboxClasses = twMerge('relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95', baseBg, baseBorder, checkboxContainerProps?.className);
+    const checkboxClasses = twMerge('relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default', baseBg, baseBorder, checkboxContainerProps?.className);
     const iconClasses = twMerge('pointer-events-none transition-opacity', isSelected ? 'opacity-100' : 'opacity-0', checkedIconProps?.className);
     return (React.createElement("label", { htmlFor: id, className: outerClassName, style: style, ...props },
         React.createElement("div", { className: "relative" },
-            React.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: "absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", ...inputProps }),
+            React.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: "peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", ...inputProps }),
             React.createElement("div", { className: checkboxClasses, ...checkboxContainerProps },
                 React.createElement(Icon, { name: IconName.Check, color: IconColor.PrimaryInverse, size: IconSize.Sm, ...checkedIconProps, className: iconClasses }))),
         label ? (React.createElement(Text, { asChild: true, ...labelProps, className: twMerge('ml-3', labelProps?.className) },

package/dist/components/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ChangeEvent, KeyboardEvent } from 'react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { Text } from '../Text';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n  (\n    {\n      id,\n      isSelected,\n      isDisabled = false,\n      isInvalid = false,\n      label,\n      labelProps,\n      onChange,\n      inputProps,\n      checkboxContainerProps,\n      checkedIconProps,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(event.target.checked);\n    };\n\n    const handleClick = () => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(!isSelected);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        handleClick();\n      }\n    };\n\n    useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);\n\n    const outerClassName = twMerge(\n      'inline-flex items-center',\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    const baseBg = isSelected\n      ? 'bg-primary-default hover:bg-primary-default-hover active:bg-primary-default-pressed'\n      : 'bg-default hover:bg-default-hover active:bg-default-pressed';\n    let baseBorder = 'border-default';\n    if (isSelected) {\n      baseBorder = 'border-primary-default';\n    } else if (isInvalid) {\n      baseBorder = 'border-error-default';\n    }\n\n    const checkboxClasses = twMerge(\n      'relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95',\n      baseBg,\n      baseBorder,\n      checkboxContainerProps?.className,\n    );\n\n    const iconClasses = twMerge(\n      'pointer-events-none transition-opacity',\n      isSelected ? 'opacity-100' : 'opacity-0',\n      checkedIconProps?.className,\n    );\n\n    return (\n      <label htmlFor={id} className={outerClassName} style={style} {...props}>\n        <div className=\"relative\">\n          <input\n            type=\"checkbox\"\n            id={id}\n            checked={isSelected}\n            disabled={isDisabled}\n            aria-invalid={isInvalid}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            className=\"absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n            {...inputProps}\n          />\n          <div className={checkboxClasses} {...checkboxContainerProps}>\n            <Icon\n              name={IconName.Check}\n              color={IconColor.PrimaryInverse}\n              size={IconSize.Sm}\n              {...checkedIconProps}\n              className={iconClasses}\n            />\n          </div>\n        </div>\n        {label ? (\n          <Text\n            asChild\n            {...labelProps}\n            className={twMerge('ml-3', labelProps?.className)}\n          >\n            <span>{label}</span>\n          </Text>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}
+{"version":3,"file":"Checkbox.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ChangeEvent, KeyboardEvent } from 'react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { Text } from '../Text';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n  (\n    {\n      id,\n      isSelected,\n      isDisabled = false,\n      isInvalid = false,\n      label,\n      labelProps,\n      onChange,\n      inputProps,\n      checkboxContainerProps,\n      checkedIconProps,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(event.target.checked);\n    };\n\n    const handleClick = () => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(!isSelected);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        handleClick();\n      }\n    };\n\n    useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);\n\n    const outerClassName = twMerge(\n      'inline-flex items-center',\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    const baseBg = isSelected\n      ? 'bg-primary-default hover:bg-primary-default-hover active:bg-primary-default-pressed'\n      : 'bg-default hover:bg-default-hover active:bg-default-pressed';\n    let baseBorder = 'border-default';\n    if (isSelected) {\n      baseBorder = 'border-primary-default';\n    } else if (isInvalid) {\n      baseBorder = 'border-error-default';\n    }\n\n    const checkboxClasses = twMerge(\n      'relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default',\n      baseBg,\n      baseBorder,\n      checkboxContainerProps?.className,\n    );\n\n    const iconClasses = twMerge(\n      'pointer-events-none transition-opacity',\n      isSelected ? 'opacity-100' : 'opacity-0',\n      checkedIconProps?.className,\n    );\n\n    return (\n      <label htmlFor={id} className={outerClassName} style={style} {...props}>\n        <div className=\"relative\">\n          <input\n            type=\"checkbox\"\n            id={id}\n            checked={isSelected}\n            disabled={isDisabled}\n            aria-invalid={isInvalid}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            className=\"peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n            {...inputProps}\n          />\n          <div className={checkboxClasses} {...checkboxContainerProps}>\n            <Icon\n              name={IconName.Check}\n              color={IconColor.PrimaryInverse}\n              size={IconSize.Sm}\n              {...checkedIconProps}\n              className={iconClasses}\n            />\n          </div>\n        </div>\n        {label ? (\n          <Text\n            asChild\n            {...labelProps}\n            className={twMerge('ml-3', labelProps?.className)}\n          >\n            <span>{label}</span>\n          </Text>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}

package/dist/components/Text/Text.types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.types.cjs","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  FontFamily,\n  FontStyle,\n  FontWeight,\n  OverflowWrap,\n  TextAlign,\n  TextVariant,\n  TextTransform,\n  TextColor,\n} from '../../types';\n\nexport type TextProps = {\n  /**\n   * Optional prop for inline styles\n   */\n  style?: React.CSSProperties;\n  /**\n   * Optional prop to change the font size of the component. The Text component uses responsive font sizes.\n   * Different variants map to specific HTML elements by default.\n   *\n   * @default TextVariant.BodyMd\n   */\n  variant?: TextVariant;\n  /**\n   * The text content or elements to be rendered within the component.\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop for additional CSS classes to be applied to the Text component.\n   */\n  className?: string;\n  /**\n   * Optional prop to control the font weight of the text.\n   * Regular: 400\n   * Medium: 500\n   * Bold: 700\n   */\n  fontWeight?: FontWeight;\n  /**\n   * Optional prop to adjust the font family.\n   * Default: Geist\n   * Accent: MM Sans\n   * Hero: MM Poly\n   */\n  fontFamily?: FontFamily;\n  /**\n   * Optional prop to control the font style of the text.\n   * Options: Normal, Italic\n   */\n  fontStyle?: FontStyle;\n  /**\n   * Optional prop to apply text transformation to the content.\n   * Options: Uppercase, Lowercase, Capitalize, Normal\n   */\n  textTransform?: TextTransform;\n  /**\n   * Optional prop to control the text alignment within its container.\n   * Options: Left, Center, Right, Justify\n   */\n  textAlign?: TextAlign;\n  /**\n   * Optional prop to determine how text should wrap when it reaches the edge of its container.\n   * Options: BreakWord, Anywhere, Normal\n   */\n  overflowWrap?: OverflowWrap;\n  /**\n   * Optional prop that when true, adds an ellipsis (...) when text overflows its container.\n   *\n   * @default false\n   */\n  ellipsis?: boolean;\n  /**\n   * Optional boolean that determines if the component should merge its props onto its immediate child\n   * instead of rendering a default DOM element.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Optional prop that sets the color of the text using predefined theme colors.\n   *\n   * @default TextColor.TextDefault\n   */\n  color?: TextColor;\n  /**\n   * Optional prop for testing purposes\n   */\n  'data-testid'?: string;\n};\n"]}
+{"version":3,"file":"Text.types.cjs","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  FontFamily,\n  FontStyle,\n  FontWeight,\n  OverflowWrap,\n  TextAlign,\n  TextVariant,\n  TextTransform,\n  TextColor,\n} from '../../types';\n\nexport type TextProps = {\n  /**\n   * Optional prop for inline styles\n   */\n  style?: React.CSSProperties;\n  /**\n   * Optional prop to change the font size of the component. The Text component uses responsive font sizes.\n   * Different variants map to specific HTML elements by default.\n   *\n   * @default TextVariant.BodyMd\n   */\n  variant?: TextVariant;\n  /**\n   * The text content or elements to be rendered within the component.\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop for additional CSS classes to be applied to the Text component.\n   */\n  className?: string;\n  /**\n   * Optional prop to control the font weight of the text.\n   * Regular: 400\n   * Medium: 500\n   * Bold: 600\n   */\n  fontWeight?: FontWeight;\n  /**\n   * Optional prop to adjust the font family.\n   * Default: Geist\n   * Accent: MM Sans\n   * Hero: MM Poly\n   */\n  fontFamily?: FontFamily;\n  /**\n   * Optional prop to control the font style of the text.\n   * Options: Normal, Italic\n   */\n  fontStyle?: FontStyle;\n  /**\n   * Optional prop to apply text transformation to the content.\n   * Options: Uppercase, Lowercase, Capitalize, Normal\n   */\n  textTransform?: TextTransform;\n  /**\n   * Optional prop to control the text alignment within its container.\n   * Options: Left, Center, Right, Justify\n   */\n  textAlign?: TextAlign;\n  /**\n   * Optional prop to determine how text should wrap when it reaches the edge of its container.\n   * Options: BreakWord, Anywhere, Normal\n   */\n  overflowWrap?: OverflowWrap;\n  /**\n   * Optional prop that when true, adds an ellipsis (...) when text overflows its container.\n   *\n   * @default false\n   */\n  ellipsis?: boolean;\n  /**\n   * Optional boolean that determines if the component should merge its props onto its immediate child\n   * instead of rendering a default DOM element.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Optional prop that sets the color of the text using predefined theme colors.\n   *\n   * @default TextColor.TextDefault\n   */\n  color?: TextColor;\n  /**\n   * Optional prop for testing purposes\n   */\n  'data-testid'?: string;\n};\n"]}

package/dist/components/Text/Text.types.d.cts

@@ -24,7 +24,7 @@ export type TextProps = {
      * Optional prop to control the font weight of the text.
      * Regular: 400
      * Medium: 500
-     * Bold: 700
+     * Bold: 600
      */
     fontWeight?: FontWeight;
     /**

package/dist/components/Text/Text.types.d.mts

@@ -24,7 +24,7 @@ export type TextProps = {
      * Optional prop to control the font weight of the text.
      * Regular: 400
      * Medium: 500
-     * Bold: 700
+     * Bold: 600
      */
     fontWeight?: FontWeight;
     /**

package/dist/components/Text/Text.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.types.mjs","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  FontFamily,\n  FontStyle,\n  FontWeight,\n  OverflowWrap,\n  TextAlign,\n  TextVariant,\n  TextTransform,\n  TextColor,\n} from '../../types';\n\nexport type TextProps = {\n  /**\n   * Optional prop for inline styles\n   */\n  style?: React.CSSProperties;\n  /**\n   * Optional prop to change the font size of the component. The Text component uses responsive font sizes.\n   * Different variants map to specific HTML elements by default.\n   *\n   * @default TextVariant.BodyMd\n   */\n  variant?: TextVariant;\n  /**\n   * The text content or elements to be rendered within the component.\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop for additional CSS classes to be applied to the Text component.\n   */\n  className?: string;\n  /**\n   * Optional prop to control the font weight of the text.\n   * Regular: 400\n   * Medium: 500\n   * Bold: 700\n   */\n  fontWeight?: FontWeight;\n  /**\n   * Optional prop to adjust the font family.\n   * Default: Geist\n   * Accent: MM Sans\n   * Hero: MM Poly\n   */\n  fontFamily?: FontFamily;\n  /**\n   * Optional prop to control the font style of the text.\n   * Options: Normal, Italic\n   */\n  fontStyle?: FontStyle;\n  /**\n   * Optional prop to apply text transformation to the content.\n   * Options: Uppercase, Lowercase, Capitalize, Normal\n   */\n  textTransform?: TextTransform;\n  /**\n   * Optional prop to control the text alignment within its container.\n   * Options: Left, Center, Right, Justify\n   */\n  textAlign?: TextAlign;\n  /**\n   * Optional prop to determine how text should wrap when it reaches the edge of its container.\n   * Options: BreakWord, Anywhere, Normal\n   */\n  overflowWrap?: OverflowWrap;\n  /**\n   * Optional prop that when true, adds an ellipsis (...) when text overflows its container.\n   *\n   * @default false\n   */\n  ellipsis?: boolean;\n  /**\n   * Optional boolean that determines if the component should merge its props onto its immediate child\n   * instead of rendering a default DOM element.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Optional prop that sets the color of the text using predefined theme colors.\n   *\n   * @default TextColor.TextDefault\n   */\n  color?: TextColor;\n  /**\n   * Optional prop for testing purposes\n   */\n  'data-testid'?: string;\n};\n"]}
+{"version":3,"file":"Text.types.mjs","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  FontFamily,\n  FontStyle,\n  FontWeight,\n  OverflowWrap,\n  TextAlign,\n  TextVariant,\n  TextTransform,\n  TextColor,\n} from '../../types';\n\nexport type TextProps = {\n  /**\n   * Optional prop for inline styles\n   */\n  style?: React.CSSProperties;\n  /**\n   * Optional prop to change the font size of the component. The Text component uses responsive font sizes.\n   * Different variants map to specific HTML elements by default.\n   *\n   * @default TextVariant.BodyMd\n   */\n  variant?: TextVariant;\n  /**\n   * The text content or elements to be rendered within the component.\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop for additional CSS classes to be applied to the Text component.\n   */\n  className?: string;\n  /**\n   * Optional prop to control the font weight of the text.\n   * Regular: 400\n   * Medium: 500\n   * Bold: 600\n   */\n  fontWeight?: FontWeight;\n  /**\n   * Optional prop to adjust the font family.\n   * Default: Geist\n   * Accent: MM Sans\n   * Hero: MM Poly\n   */\n  fontFamily?: FontFamily;\n  /**\n   * Optional prop to control the font style of the text.\n   * Options: Normal, Italic\n   */\n  fontStyle?: FontStyle;\n  /**\n   * Optional prop to apply text transformation to the content.\n   * Options: Uppercase, Lowercase, Capitalize, Normal\n   */\n  textTransform?: TextTransform;\n  /**\n   * Optional prop to control the text alignment within its container.\n   * Options: Left, Center, Right, Justify\n   */\n  textAlign?: TextAlign;\n  /**\n   * Optional prop to determine how text should wrap when it reaches the edge of its container.\n   * Options: BreakWord, Anywhere, Normal\n   */\n  overflowWrap?: OverflowWrap;\n  /**\n   * Optional prop that when true, adds an ellipsis (...) when text overflows its container.\n   *\n   * @default false\n   */\n  ellipsis?: boolean;\n  /**\n   * Optional boolean that determines if the component should merge its props onto its immediate child\n   * instead of rendering a default DOM element.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Optional prop that sets the color of the text using predefined theme colors.\n   *\n   * @default TextColor.TextDefault\n   */\n  color?: TextColor;\n  /**\n   * Optional prop for testing purposes\n   */\n  'data-testid'?: string;\n};\n"]}

package/dist/types/index.cjs

@@ -1,46 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconName = exports.IconColor = exports.IconSize = exports.TextButtonSize = exports.FontFamily = exports.TextTransform = exports.FontStyle = exports.OverflowWrap = exports.FontWeight = exports.TextAlign = exports.TextColor = exports.TextVariant = exports.ButtonIconVariant = exports.ButtonIconSize = exports.ButtonVariant = exports.ButtonSize = exports.ButtonHeroSize = exports.ButtonTertiarySize = exports.ButtonSecondarySize = exports.ButtonPrimarySize = exports.ButtonBaseSize = exports.BoxBorderColor = exports.BoxBackgroundColor = exports.BoxJustifyContent = exports.BoxAlignItems = exports.BoxFlexWrap = exports.BoxFlexDirection = exports.BadgeWrapperPosition = exports.BadgeWrapperPositionAnchorShape = exports.AvatarGroupVariant = exports.AvatarIconSeverity = exports.AvatarAccountVariant = exports.AvatarBaseShape = exports.AvatarShape = exports.AvatarSize = exports.AvatarTokenSize = exports.AvatarNetworkSize = exports.AvatarIconSize = exports.AvatarGroupSize = exports.AvatarFaviconSize = exports.AvatarAccountSize = exports.AvatarBaseSize = void 0;
-/**
- * AvatarBase - size
- */
-var AvatarBaseSize;
-(function (AvatarBaseSize) {
-    /**
-     * Represents an extra small avatar size (16px).
-     */
-    AvatarBaseSize["Xs"] = "xs";
-    /**
-     * Represents a small avatar size (24px).
-     */
-    AvatarBaseSize["Sm"] = "sm";
-    /**
-     * Represents a medium avatar size (32px).
-     */
-    AvatarBaseSize["Md"] = "md";
-    /**
-     * Represents a large avatar size (40px).
-     */
-    AvatarBaseSize["Lg"] = "lg";
-    /**
-     * Represents an extra large avatar size (48px).
-     */
-    AvatarBaseSize["Xl"] = "xl";
-})(AvatarBaseSize || (exports.AvatarSize = exports.AvatarTokenSize = exports.AvatarNetworkSize = exports.AvatarIconSize = exports.AvatarGroupSize = exports.AvatarFaviconSize = exports.AvatarAccountSize = exports.AvatarBaseSize = AvatarBaseSize = {}));
-/**
- * Avatar - shape
- */
-var AvatarShape;
-(function (AvatarShape) {
-    /**
-     * Represents a circular Avatar.
-     */
-    AvatarShape["Circle"] = "circle";
-    /**
-     * Represents a squared Avatar
-     */
-    AvatarShape["Square"] = "square";
-})(AvatarShape || (exports.AvatarBaseShape = exports.AvatarShape = AvatarShape = {}));
+exports.IconName = exports.IconColor = exports.IconSize = exports.TextButtonSize = exports.FontFamily = exports.TextTransform = exports.FontStyle = exports.OverflowWrap = exports.FontWeight = exports.TextAlign = exports.TextColor = exports.TextVariant = exports.ButtonIconVariant = exports.ButtonIconSize = exports.ButtonVariant = exports.ButtonSize = exports.ButtonHeroSize = exports.ButtonTertiarySize = exports.ButtonSecondarySize = exports.ButtonPrimarySize = exports.ButtonBaseSize = exports.BoxBorderColor = exports.BoxBackgroundColor = exports.BoxJustifyContent = exports.BoxAlignItems = exports.BoxFlexWrap = exports.BoxFlexDirection = exports.AvatarGroupVariant = exports.AvatarIconSeverity = exports.AvatarAccountVariant = exports.AvatarSize = exports.AvatarTokenSize = exports.AvatarNetworkSize = exports.AvatarIconSize = exports.AvatarGroupSize = exports.AvatarFaviconSize = exports.AvatarAccountSize = exports.AvatarBaseShape = exports.AvatarBaseSize = void 0;
+var design_system_shared_1 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "AvatarBaseSize", { enumerable: true, get: function () { return design_system_shared_1.AvatarBaseSize; } });
+Object.defineProperty(exports, "AvatarBaseShape", { enumerable: true, get: function () { return design_system_shared_1.AvatarBaseShape; } });
+var design_system_shared_2 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "AvatarAccountSize", { enumerable: true, get: function () { return design_system_shared_2.AvatarBaseSize; } });
+var design_system_shared_3 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "AvatarFaviconSize", { enumerable: true, get: function () { return design_system_shared_3.AvatarBaseSize; } });
+var design_system_shared_4 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "AvatarGroupSize", { enumerable: true, get: function () { return design_system_shared_4.AvatarBaseSize; } });
+var design_system_shared_5 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "AvatarIconSize", { enumerable: true, get: function () { return design_system_shared_5.AvatarBaseSize; } });
+var design_system_shared_6 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "AvatarNetworkSize", { enumerable: true, get: function () { return design_system_shared_6.AvatarBaseSize; } });
+var design_system_shared_7 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "AvatarTokenSize", { enumerable: true, get: function () { return design_system_shared_7.AvatarBaseSize; } });
+var design_system_shared_8 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "AvatarSize", { enumerable: true, get: function () { return design_system_shared_8.AvatarBaseSize; } });
 /**
  * AvatarAccount - variant
  */
@@ -72,24 +49,6 @@ var AvatarGroupVariant;
     AvatarGroupVariant["Network"] = "network";
     AvatarGroupVariant["Token"] = "token";
 })(AvatarGroupVariant || (exports.AvatarGroupVariant = AvatarGroupVariant = {}));
-/**
- * BadgeWrapper - positionAnchorShape
- */
-var BadgeWrapperPositionAnchorShape;
-(function (BadgeWrapperPositionAnchorShape) {
-    BadgeWrapperPositionAnchorShape["Rectangular"] = "rectangular";
-    BadgeWrapperPositionAnchorShape["Circular"] = "circular";
-})(BadgeWrapperPositionAnchorShape || (exports.BadgeWrapperPositionAnchorShape = BadgeWrapperPositionAnchorShape = {}));
-/**
- * BadgeWrapper - position.
- */
-var BadgeWrapperPosition;
-(function (BadgeWrapperPosition) {
-    BadgeWrapperPosition["TopRight"] = "top-right";
-    BadgeWrapperPosition["BottomRight"] = "bottom-right";
-    BadgeWrapperPosition["BottomLeft"] = "bottom-left";
-    BadgeWrapperPosition["TopLeft"] = "top-left";
-})(BadgeWrapperPosition || (exports.BadgeWrapperPosition = BadgeWrapperPosition = {}));
 /**
  * Box - flexDirection
  */
@@ -421,7 +380,7 @@ var TextAlign;
 var FontWeight;
 (function (FontWeight) {
     /**
-     * Weight - 700
+     * Weight - 600
      */
     FontWeight["Bold"] = "font-bold";
     /**