@metamask-previews/design-system-react 0.11.0-preview.fa05289 → 0.13.0-preview.8028c20

package/dist/components/BadgeWrapper/BadgeWrapper.cjs

@@ -24,10 +24,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BadgeWrapper = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const react_1 = __importStar(require("react"));
-const types_1 = require("../../types/index.cjs");
 const tw_merge_1 = require("../../utils/tw-merge.cjs");
-exports.BadgeWrapper = (0, react_1.forwardRef)(({ children, childrenContainerProps, badge, badgeContainerProps, position = types_1.BadgeWrapperPosition.BottomRight, positionAnchorShape = types_1.BadgeWrapperPositionAnchorShape.Circular, positionXOffset = 0, positionYOffset = 0, customPosition, className = '', style, ...props }, ref) => {
+exports.BadgeWrapper = (0, react_1.forwardRef)(({ children, childrenContainerProps, badge, badgeContainerProps, position = design_system_shared_1.BadgeWrapperPosition.BottomRight, positionAnchorShape = design_system_shared_1.BadgeWrapperPositionAnchorShape.Circular, positionXOffset = 0, positionYOffset = 0, customPosition, className = '', style, ...props }, ref) => {
     const [anchorWidth, setAnchorWidth] = (0, react_1.useState)(0);
     const [anchorHeight, setAnchorHeight] = (0, react_1.useState)(0);
     const [badgeWidth, setBadgeWidth] = (0, react_1.useState)(0);
@@ -51,10 +51,10 @@ exports.BadgeWrapper = (0, react_1.forwardRef)(({ children, childrenContainerPro
         if (customPosition) {
             return customPosition;
         }
-        const anchorShapeXOffset = positionAnchorShape === types_1.BadgeWrapperPositionAnchorShape.Rectangular
+        const anchorShapeXOffset = positionAnchorShape === design_system_shared_1.BadgeWrapperPositionAnchorShape.Rectangular
             ? 0
             : anchorWidth * 0.1464;
-        const anchorShapeYOffset = positionAnchorShape === types_1.BadgeWrapperPositionAnchorShape.Rectangular
+        const anchorShapeYOffset = positionAnchorShape === design_system_shared_1.BadgeWrapperPositionAnchorShape.Rectangular
             ? 0
             : anchorHeight * 0.1464;
         const badgeCenteringXOffset = badgeWidth / 2;
@@ -62,13 +62,13 @@ exports.BadgeWrapper = (0, react_1.forwardRef)(({ children, childrenContainerPro
         const finalXOffset = anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;
         const finalYOffset = anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;
         switch (position) {
-            case types_1.BadgeWrapperPosition.TopRight:
+            case design_system_shared_1.BadgeWrapperPosition.TopRight:
                 return { top: finalYOffset, right: finalXOffset };
-            case types_1.BadgeWrapperPosition.TopLeft:
+            case design_system_shared_1.BadgeWrapperPosition.TopLeft:
                 return { top: finalYOffset, left: finalXOffset };
-            case types_1.BadgeWrapperPosition.BottomLeft:
+            case design_system_shared_1.BadgeWrapperPosition.BottomLeft:
                 return { bottom: finalYOffset, left: finalXOffset };
-            case types_1.BadgeWrapperPosition.BottomRight:
+            case design_system_shared_1.BadgeWrapperPosition.BottomRight:
             default:
                 return { bottom: finalYOffset, right: finalXOffset };
         }

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.cjs","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.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '@metamask-previews/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.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AAQf,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,uGA+GxB,CAAC"}
+{"version":3,"file":"BadgeWrapper.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAMN,cAAc;AAIf,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,uGA+GxB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AAQf,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,uGA+GxB,CAAC"}
+{"version":3,"file":"BadgeWrapper.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAMN,cAAc;AAIf,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,uGA+GxB,CAAC"}

package/dist/components/BadgeWrapper/BadgeWrapper.mjs

@@ -4,9 +4,9 @@ function $importDefault(module) {
     }
     return module;
 }
+import { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape } from "@metamask-previews/design-system-shared";
 import $React, { forwardRef, useState, useLayoutEffect, useMemo, useRef } from "react";
 const React = $importDefault($React);
-import { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape } from "../../types/index.mjs";
 import { twMerge } from "../../utils/tw-merge.mjs";
 export const BadgeWrapper = forwardRef(({ children, childrenContainerProps, badge, badgeContainerProps, position = BadgeWrapperPosition.BottomRight, positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular, positionXOffset = 0, positionYOffset = 0, customPosition, className = '', style, ...props }, ref) => {
     const [anchorWidth, setAnchorWidth] = useState(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":"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","sourcesContent":["import {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '@metamask-previews/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-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\n/**\n * BadgeWrapper component props (React platform-specific)\n * Extends shared props from @metamask-previews/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-previews/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-previews/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,gDAAgD;AACvF,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-previews/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-previews/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,gDAAgD;AACvF,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-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\n/**\n * BadgeWrapper component props (React platform-specific)\n * Extends shared props from @metamask-previews/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-previews/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,gFAIiD;AAH/C,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-previews/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-previews/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,gDAAgD;AACjD,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-previews/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,gDAAgD;AACjD,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-previews/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,gDAAgD;AACjD,OAAO,EAAE,YAAY,EAAE,2BAAuB","sourcesContent":["export {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n  type BadgeWrapperCustomPosition,\n} from '@metamask-previews/design-system-shared';\nexport { BadgeWrapper } from './BadgeWrapper';\nexport type { BadgeWrapperProps } from './BadgeWrapper.types';\n"]}

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs

@@ -74,9 +74,9 @@ exports.ButtonPrimary = (0, react_1.forwardRef)(({ className, isDanger, isInvers
             !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
         isInverse &&
             isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
-    ], 'focus-visible:ring-0', isInverse
-        ? 'focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
-        : 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', 
+    ], 'focus-visible:outline-none focus-visible:ring-0', isInverse
+        ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
+        : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', 
     // Loading styles
     isLoading && 'cursor-not-allowed', 
     // Disabled styles (but not loading)

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonPrimary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,yBAAyB;IACzB,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,sCAAsC;QACtC,mCAAmC;QACnC,SAAS,IAAI,yBAAyB;KACvC;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,0BAA0B;KACxC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,yBAAyB;QACzB,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI;YACZ,6BAA6B;YAC7B,gCAAgC;SACjC;QACH,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,8BAA8B;YAC9B,iCAAiC;SAClC;QACH,SAAS;YACP,CAAC,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACtE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE,EACD,sBAAsB,EACtB,SAAS;QACP,CAAC,CAAC,iGAAiG;QACnG,CAAC,CAAC,8FAA8F;IAClG,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nexport const ButtonPrimary = forwardRef<HTMLButtonElement, ButtonPrimaryProps>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default primary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-icon-default text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-icon-default-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-error-default text-error-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-error-default-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'bg-default text-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        !isDanger &&\n          !isInverse && [\n            'hover:bg-icon-default-hover',\n            'active:bg-icon-default-pressed',\n          ],\n        isDanger &&\n          !isInverse && [\n            'hover:bg-error-default-hover',\n            'active:bg-error-default-pressed',\n          ],\n        isInverse &&\n          !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n      ],\n      'focus-visible:ring-0',\n      isInverse\n        ? 'focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n        : 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonPrimary.displayName = 'ButtonPrimary';\n"]}
+{"version":3,"file":"ButtonPrimary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,yBAAyB;IACzB,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,sCAAsC;QACtC,mCAAmC;QACnC,SAAS,IAAI,yBAAyB;KACvC;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,0BAA0B;KACxC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,yBAAyB;QACzB,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI;YACZ,6BAA6B;YAC7B,gCAAgC;SACjC;QACH,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,8BAA8B;YAC9B,iCAAiC;SAClC;QACH,SAAS;YACP,CAAC,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACtE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nexport const ButtonPrimary = forwardRef<HTMLButtonElement, ButtonPrimaryProps>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default primary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-icon-default text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-icon-default-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-error-default text-error-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-error-default-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'bg-default text-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        !isDanger &&\n          !isInverse && [\n            'hover:bg-icon-default-hover',\n            'active:bg-icon-default-pressed',\n          ],\n        isDanger &&\n          !isInverse && [\n            'hover:bg-error-default-hover',\n            'active:bg-error-default-pressed',\n          ],\n        isInverse &&\n          !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n      ],\n      'focus-visible:outline-none focus-visible:ring-0',\n      isInverse\n        ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n        : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonPrimary.displayName = 'ButtonPrimary';\n"]}

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs

@@ -55,9 +55,9 @@ export const ButtonPrimary = forwardRef(({ className, isDanger, isInverse, isDis
             !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
         isInverse &&
             isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
-    ], 'focus-visible:ring-0', isInverse
-        ? 'focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
-        : 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', 
+    ], 'focus-visible:outline-none focus-visible:ring-0', isInverse
+        ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
+        : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', 
     // Loading styles
     isLoading && 'cursor-not-allowed', 
     // Disabled styles (but not loading)

package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonPrimary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,uCAAmC;AACrD,OAAO,EAAE,UAAU,EAAE,sCAA4B;AAIjD,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,yBAAyB;IACzB,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,sCAAsC;QACtC,mCAAmC;QACnC,SAAS,IAAI,yBAAyB;KACvC;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,0BAA0B;KACxC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,yBAAyB;QACzB,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI;YACZ,6BAA6B;YAC7B,gCAAgC;SACjC;QACH,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,8BAA8B;YAC9B,iCAAiC;SAClC;QACH,SAAS;YACP,CAAC,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACtE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE,EACD,sBAAsB,EACtB,SAAS;QACP,CAAC,CAAC,iGAAiG;QACnG,CAAC,CAAC,8FAA8F;IAClG,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nexport const ButtonPrimary = forwardRef<HTMLButtonElement, ButtonPrimaryProps>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default primary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-icon-default text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-icon-default-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-error-default text-error-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-error-default-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'bg-default text-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        !isDanger &&\n          !isInverse && [\n            'hover:bg-icon-default-hover',\n            'active:bg-icon-default-pressed',\n          ],\n        isDanger &&\n          !isInverse && [\n            'hover:bg-error-default-hover',\n            'active:bg-error-default-pressed',\n          ],\n        isInverse &&\n          !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n      ],\n      'focus-visible:ring-0',\n      isInverse\n        ? 'focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n        : 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonPrimary.displayName = 'ButtonPrimary';\n"]}
+{"version":3,"file":"ButtonPrimary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,uCAAmC;AACrD,OAAO,EAAE,UAAU,EAAE,sCAA4B;AAIjD,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,yBAAyB;IACzB,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,sCAAsC;QACtC,mCAAmC;QACnC,SAAS,IAAI,yBAAyB;KACvC;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,0BAA0B;KACxC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,yBAAyB;QACzB,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI;YACZ,6BAA6B;YAC7B,gCAAgC;SACjC;QACH,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,8BAA8B;YAC9B,iCAAiC;SAClC;QACH,SAAS;YACP,CAAC,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACtE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nexport const ButtonPrimary = forwardRef<HTMLButtonElement, ButtonPrimaryProps>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default primary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-icon-default text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-icon-default-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-error-default text-error-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-error-default-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'bg-default text-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        !isDanger &&\n          !isInverse && [\n            'hover:bg-icon-default-hover',\n            'active:bg-icon-default-pressed',\n          ],\n        isDanger &&\n          !isInverse && [\n            'hover:bg-error-default-hover',\n            'active:bg-error-default-pressed',\n          ],\n        isInverse &&\n          !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n      ],\n      'focus-visible:outline-none focus-visible:ring-0',\n      isInverse\n        ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n        : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonPrimary.displayName = 'ButtonPrimary';\n"]}

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs

@@ -67,9 +67,9 @@ exports.ButtonSecondary = (0, react_1.forwardRef)(({ className, isDanger, isInve
         isInverse && !isDanger && ['hover:bg-hover', 'active:bg-pressed'],
         isInverse &&
             isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
-    ], 'focus-visible:ring-0', isInverse
-        ? 'focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
-        : 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', 
+    ], 'focus-visible:outline-none focus-visible:ring-0', isInverse
+        ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
+        : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', 
     // Loading styles
     isLoading && 'cursor-not-allowed', 
     // Disabled styles (but not loading)

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonSecondary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,eAAe,GAAG,IAAA,kBAAU,EAIvC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,2BAA2B;IAC3B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,uBAAuB;QACvB,mCAAmC;QACnC,SAAS,IAAI,kBAAkB;KAChC;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,6BAA6B;QAC7B,mCAAmC;QACnC,SAAS,IAAI,kBAAkB;KAChC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qEAAqE;QACrE,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,wCAAwC;QACxC,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI,CAAC,sBAAsB,EAAE,yBAAyB,CAAC;QACnE,QAAQ;YACN,CAAC,SAAS,IAAI,CAAC,sBAAsB,EAAE,yBAAyB,CAAC;QACnE,SAAS,IAAI,CAAC,QAAQ,IAAI,CAAC,gBAAgB,EAAE,mBAAmB,CAAC;QACjE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE,EACD,sBAAsB,EACtB,SAAS;QACP,CAAC,CAAC,iGAAiG;QACnG,CAAC,CAAC,8FAA8F;IAClG,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = forwardRef<\n  HTMLButtonElement,\n  ButtonSecondaryProps\n>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default secondary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-muted text-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-muted-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-muted text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-muted-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'border-2 border-primary-inverse bg-transparent text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'border-0 bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        !isDanger &&\n          !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],\n        isDanger &&\n          !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],\n        isInverse && !isDanger && ['hover:bg-hover', 'active:bg-pressed'],\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n      ],\n      'focus-visible:ring-0',\n      isInverse\n        ? 'focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n        : 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonSecondary.displayName = 'ButtonSecondary';\n"]}
+{"version":3,"file":"ButtonSecondary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,eAAe,GAAG,IAAA,kBAAU,EAIvC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,2BAA2B;IAC3B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,uBAAuB;QACvB,mCAAmC;QACnC,SAAS,IAAI,kBAAkB;KAChC;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,6BAA6B;QAC7B,mCAAmC;QACnC,SAAS,IAAI,kBAAkB;KAChC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qEAAqE;QACrE,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,wCAAwC;QACxC,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI,CAAC,sBAAsB,EAAE,yBAAyB,CAAC;QACnE,QAAQ;YACN,CAAC,SAAS,IAAI,CAAC,sBAAsB,EAAE,yBAAyB,CAAC;QACnE,SAAS,IAAI,CAAC,QAAQ,IAAI,CAAC,gBAAgB,EAAE,mBAAmB,CAAC;QACjE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = forwardRef<\n  HTMLButtonElement,\n  ButtonSecondaryProps\n>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default secondary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-muted text-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-muted-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-muted text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-muted-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'border-2 border-primary-inverse bg-transparent text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'border-0 bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        !isDanger &&\n          !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],\n        isDanger &&\n          !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],\n        isInverse && !isDanger && ['hover:bg-hover', 'active:bg-pressed'],\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n      ],\n      'focus-visible:outline-none focus-visible:ring-0',\n      isInverse\n        ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n        : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonSecondary.displayName = 'ButtonSecondary';\n"]}

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs

@@ -48,9 +48,9 @@ export const ButtonSecondary = forwardRef(({ className, isDanger, isInverse, isD
         isInverse && !isDanger && ['hover:bg-hover', 'active:bg-pressed'],
         isInverse &&
             isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
-    ], 'focus-visible:ring-0', isInverse
-        ? 'focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
-        : 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', 
+    ], 'focus-visible:outline-none focus-visible:ring-0', isInverse
+        ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
+        : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', 
     // Loading styles
     isLoading && 'cursor-not-allowed', 
     // Disabled styles (but not loading)

package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonSecondary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,uCAAmC;AACrD,OAAO,EAAE,UAAU,EAAE,sCAA4B;AAIjD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAIvC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,2BAA2B;IAC3B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,uBAAuB;QACvB,mCAAmC;QACnC,SAAS,IAAI,kBAAkB;KAChC;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,6BAA6B;QAC7B,mCAAmC;QACnC,SAAS,IAAI,kBAAkB;KAChC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qEAAqE;QACrE,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,wCAAwC;QACxC,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI,CAAC,sBAAsB,EAAE,yBAAyB,CAAC;QACnE,QAAQ;YACN,CAAC,SAAS,IAAI,CAAC,sBAAsB,EAAE,yBAAyB,CAAC;QACnE,SAAS,IAAI,CAAC,QAAQ,IAAI,CAAC,gBAAgB,EAAE,mBAAmB,CAAC;QACjE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE,EACD,sBAAsB,EACtB,SAAS;QACP,CAAC,CAAC,iGAAiG;QACnG,CAAC,CAAC,8FAA8F;IAClG,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = forwardRef<\n  HTMLButtonElement,\n  ButtonSecondaryProps\n>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default secondary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-muted text-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-muted-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-muted text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-muted-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'border-2 border-primary-inverse bg-transparent text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'border-0 bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        !isDanger &&\n          !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],\n        isDanger &&\n          !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],\n        isInverse && !isDanger && ['hover:bg-hover', 'active:bg-pressed'],\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n      ],\n      'focus-visible:ring-0',\n      isInverse\n        ? 'focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n        : 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonSecondary.displayName = 'ButtonSecondary';\n"]}
+{"version":3,"file":"ButtonSecondary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,uCAAmC;AACrD,OAAO,EAAE,UAAU,EAAE,sCAA4B;AAIjD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAIvC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,2BAA2B;IAC3B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,uBAAuB;QACvB,mCAAmC;QACnC,SAAS,IAAI,kBAAkB;KAChC;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,6BAA6B;QAC7B,mCAAmC;QACnC,SAAS,IAAI,kBAAkB;KAChC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qEAAqE;QACrE,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,wCAAwC;QACxC,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI,CAAC,sBAAsB,EAAE,yBAAyB,CAAC;QACnE,QAAQ;YACN,CAAC,SAAS,IAAI,CAAC,sBAAsB,EAAE,yBAAyB,CAAC;QACnE,SAAS,IAAI,CAAC,QAAQ,IAAI,CAAC,gBAAgB,EAAE,mBAAmB,CAAC;QACjE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = forwardRef<\n  HTMLButtonElement,\n  ButtonSecondaryProps\n>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default secondary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-muted text-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-muted-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-muted text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-muted-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'border-2 border-primary-inverse bg-transparent text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'border-0 bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        !isDanger &&\n          !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],\n        isDanger &&\n          !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],\n        isInverse && !isDanger && ['hover:bg-hover', 'active:bg-pressed'],\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n      ],\n      'focus-visible:outline-none focus-visible:ring-0',\n      isInverse\n        ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n        : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonSecondary.displayName = 'ButtonSecondary';\n"]}

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs

@@ -69,9 +69,9 @@ exports.ButtonTertiary = (0, react_1.forwardRef)(({ className, isDanger, isInver
             'hover:bg-error-muted-hover',
             'active:bg-error-muted-pressed',
         ],
-    ], 'focus-visible:ring-0', isInverse
-        ? 'focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
-        : 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', 
+    ], 'focus-visible:outline-none focus-visible:ring-0', isInverse
+        ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
+        : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', 
     // Loading styles
     isLoading && 'cursor-not-allowed', 
     // Disabled styles (but not loading)

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,cAAc,GAAG,IAAA,kBAAU,EAItC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,0BAA0B;IAC1B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,mCAAmC;QACnC,+CAA+C;QAC/C,SAAS,IAAI,mDAAmD;KACjE;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,gBAAgB;QAChB,mBAAmB;QACnB,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACrE,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,4BAA4B;YAC5B,+BAA+B;SAChC;KACJ,EACD,sBAAsB,EACtB,SAAS;QACP,CAAC,CAAC,iGAAiG;QACnG,CAAC,CAAC,8FAA8F;IAClG,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = forwardRef<\n  HTMLButtonElement,\n  ButtonTertiaryProps\n>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default tertiary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-transparent text-primary-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-transparent text-error-default',\n          // Loading state uses error muted pressed color\n          isLoading && 'bg-error-muted-pressed text-error-default-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'bg-transparent text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        'hover:bg-hover',\n        'active:bg-pressed',\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n        isDanger &&\n          !isInverse && [\n            'hover:bg-error-muted-hover',\n            'active:bg-error-muted-pressed',\n          ],\n      ],\n      'focus-visible:ring-0',\n      isInverse\n        ? 'focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n        : 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonTertiary.displayName = 'ButtonTertiary';\n"]}
+{"version":3,"file":"ButtonTertiary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,cAAc,GAAG,IAAA,kBAAU,EAItC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,0BAA0B;IAC1B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,mCAAmC;QACnC,+CAA+C;QAC/C,SAAS,IAAI,mDAAmD;KACjE;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,gBAAgB;QAChB,mBAAmB;QACnB,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACrE,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,4BAA4B;YAC5B,+BAA+B;SAChC;KACJ,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = forwardRef<\n  HTMLButtonElement,\n  ButtonTertiaryProps\n>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default tertiary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-transparent text-primary-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-transparent text-error-default',\n          // Loading state uses error muted pressed color\n          isLoading && 'bg-error-muted-pressed text-error-default-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'bg-transparent text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        'hover:bg-hover',\n        'active:bg-pressed',\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n        isDanger &&\n          !isInverse && [\n            'hover:bg-error-muted-hover',\n            'active:bg-error-muted-pressed',\n          ],\n      ],\n      'focus-visible:outline-none focus-visible:ring-0',\n      isInverse\n        ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n        : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonTertiary.displayName = 'ButtonTertiary';\n"]}