@metamask-previews/design-system-react 0.0.0-preview.ff8ed96 → 0.2.0-preview.a7d80d5

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAQ1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,wGAyJtB,CAAC"}
+{"version":3,"file":"ButtonBase.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAQ1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,wGAiMtB,CAAC"}

package/dist/components/ButtonBase/ButtonBase.mjs

@@ -11,31 +11,39 @@ import { ButtonBaseSize } from "../../types/index.mjs";
 import { twMerge } from "../../utils/tw-merge.mjs";
 import { Icon, IconName, IconSize } from "../Icon/index.mjs";
 import { Text, FontWeight, TextColor } from "../Text/index.mjs";
-import { BUTTON_BASE_SIZE_CLASS_MAP } from "./ButtonBase.constants.mjs";
-export const ButtonBase = forwardRef(({ children, className, size = ButtonBaseSize.Lg, isFullWidth, asChild, isDisabled, isLoading, loadingText, loadingIconProps, loadingTextProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, textProps, style, ...props }, ref) => {
+import { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from "./ButtonBase.constants.mjs";
+export const ButtonBase = forwardRef(({ children, className, size = ButtonBaseSize.Lg, isFullWidth, asChild, isDisabled, isLoading, loadingText, loadingIconProps, loadingTextProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, textProps, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-pressed': ariaPressed, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'aria-haspopup': ariaHaspopup, ...props }, ref) => {
     const Component = asChild ? Slot : 'button';
     const isInteractive = !(isDisabled ?? isLoading);
+    // Calculate tabIndex based on asChild and disabled state
+    const getTabIndex = () => {
+        if (asChild) {
+            return undefined;
+        }
+        return isDisabled ? -1 : undefined;
+    };
     const renderLoadingState = () => (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "absolute inline-flex items-center" },
-            React.createElement(Icon, { name: IconName.Loading, size: IconSize.Sm, className: twMerge('text-inherit mr-2 animate-spin', loadingIconProps?.className), ...loadingIconProps }),
+        React.createElement("span", { className: "absolute inline-flex items-center", "aria-hidden": "true" },
+            React.createElement(Icon, { name: IconName.Loading, size: IconSize.Sm, className: twMerge('mr-2 animate-spin text-inherit', loadingIconProps?.className), ...loadingIconProps }),
             React.createElement(Text, { fontWeight: FontWeight.Medium, color: TextColor.Inherit, asChild: true, ...loadingTextProps },
                 React.createElement("span", null, loadingText))),
-        React.createElement("span", { className: "invisible inline-flex items-center" }, children)));
+        React.createElement("span", { className: "invisible inline-flex items-center" }, children),
+        React.createElement("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, loadingText || 'Loading')));
     const renderStartContent = () => {
         if (startIconName) {
-            return (React.createElement(Icon, { name: startIconName, size: IconSize.Sm, className: twMerge('text-inherit mr-2 flex-shrink-0', startIconProps?.className), ...startIconProps }));
+            return (React.createElement(Icon, { name: startIconName, size: IconSize.Sm, className: twMerge('mr-2 shrink-0 text-inherit', startIconProps?.className), "aria-hidden": "true", ...startIconProps }));
         }
         if (startAccessory) {
-            return React.createElement("span", { className: "mr-2" }, startAccessory);
+            return (React.createElement("span", { className: "mr-2", "aria-hidden": "true" }, startAccessory));
         }
         return null;
     };
     const renderEndContent = () => {
         if (endIconName) {
-            return (React.createElement(Icon, { name: endIconName, size: IconSize.Sm, className: twMerge('text-inherit ml-2 flex-shrink-0', endIconProps?.className), ...endIconProps }));
+            return (React.createElement(Icon, { name: endIconName, size: IconSize.Sm, className: twMerge('ml-2 shrink-0 text-inherit', endIconProps?.className), "aria-hidden": "true", ...endIconProps }));
         }
         if (endAccessory) {
-            return React.createElement("span", { className: "ml-2" }, endAccessory);
+            return (React.createElement("span", { className: "ml-2", "aria-hidden": "true" }, endAccessory));
         }
         return null;
     };
@@ -48,16 +56,16 @@ export const ButtonBase = forwardRef(({ children, className, size = ButtonBaseSi
     };
     const mergedClassName = twMerge(
     // Base styles
-    'inline-flex items-center justify-center', 'rounded-full px-4', 'font-medium text-default', 'bg-muted', 'min-w-[80px] overflow-hidden', 
+    'inline-flex items-center justify-center', 'rounded-xl px-4', 'font-medium text-default', 'bg-muted', 'min-w-20 overflow-hidden', 
     // Add relative positioning for loading state
     'relative', 
     // Size
-    BUTTON_BASE_SIZE_CLASS_MAP[size], 
+    TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size], 
     // Full width
     isFullWidth && 'w-full', 
     // Animation classes - only applied when interactive
     isInteractive && [
-        'transition-[transform,colors,opacity]',
+        'transition-all',
         'duration-100',
         'ease-linear',
         'active:scale-[0.97]',
@@ -67,7 +75,7 @@ export const ButtonBase = forwardRef(({ children, className, size = ButtonBaseSi
     (isDisabled || isLoading) && 'cursor-not-allowed', isDisabled && 'opacity-50', 
     // Custom classes
     className);
-    return (React.createElement(Component, { ref: ref, className: mergedClassName, disabled: asChild ? undefined : (isDisabled ?? isLoading), style: style, ...props },
+    return (React.createElement(Component, { ref: ref, className: mergedClassName, disabled: asChild ? undefined : (isDisabled ?? isLoading), "aria-disabled": isDisabled ? 'true' : undefined, "aria-busy": isLoading ? 'true' : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-pressed": ariaPressed, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, role: asChild ? undefined : 'button', tabIndex: getTabIndex(), style: style, ...props },
         renderStartContent(),
         React.createElement(Slottable, null, isLoading ? renderLoadingState() : renderContent()),
         renderEndContent()));

package/dist/components/ButtonBase/ButtonBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,6BAA6B;AACvD,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,0BAAgB;AACnD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,0BAAgB;AAEtD,OAAO,EAAE,0BAA0B,EAAE,mCAA+B;AAGpE,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,WAAW,EACX,OAAO,EACP,UAAU,EACV,SAAS,EACT,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC5C,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,CAC/B;QACE,8BAAM,SAAS,EAAC,mCAAmC;YACjD,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,CAAC,OAAO,EACtB,IAAI,EAAE,QAAQ,CAAC,EAAE,EACjB,SAAS,EAAE,OAAO,CAChB,gCAAgC,EAChC,gBAAgB,EAAE,SAAS,CAC5B,KACG,gBAAgB,GACpB;YACF,oBAAC,IAAI,IACH,UAAU,EAAE,UAAU,CAAC,MAAM,EAC7B,KAAK,EAAE,SAAS,CAAC,OAAO,EACxB,OAAO,WACH,gBAAgB;gBAEpB,kCAAO,WAAW,CAAQ,CACrB,CACF;QACP,8BAAM,SAAS,EAAC,oCAAoC,IAAE,QAAQ,CAAQ,CACrE,CACJ,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,aAAa,EAAE;YACjB,OAAO,CACL,oBAAC,IAAI,IACH,IAAI,EAAE,aAAa,EACnB,IAAI,EAAE,QAAQ,CAAC,EAAE,EACjB,SAAS,EAAE,OAAO,CAChB,iCAAiC,EACjC,cAAc,EAAE,SAAS,CAC1B,KACG,cAAc,GAClB,CACH,CAAC;SACH;QACD,IAAI,cAAc,EAAE;YAClB,OAAO,8BAAM,SAAS,EAAC,MAAM,IAAE,cAAc,CAAQ,CAAC;SACvD;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,WAAW,EAAE;YACf,OAAO,CACL,oBAAC,IAAI,IACH,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE,QAAQ,CAAC,EAAE,EACjB,SAAS,EAAE,OAAO,CAChB,iCAAiC,EACjC,YAAY,EAAE,SAAS,CACxB,KACG,YAAY,GAChB,CACH,CAAC;SACH;QACD,IAAI,YAAY,EAAE;YAChB,OAAO,8BAAM,SAAS,EAAC,MAAM,IAAE,YAAY,CAAQ,CAAC;SACrD;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAC5C,OAAO,CACL,oBAAC,IAAI,IACH,UAAU,EAAE,UAAU,CAAC,MAAM,EAC7B,KAAK,EAAE,SAAS,CAAC,OAAO,EACxB,OAAO,WACH,SAAS;gBAEb,kCAAO,QAAQ,CAAQ,CAClB,CACR,CAAC;SACH;QACD,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,yCAAyC,EACzC,mBAAmB,EACnB,0BAA0B,EAC1B,UAAU,EACV,8BAA8B;IAC9B,6CAA6C;IAC7C,UAAU;IACV,OAAO;IACP,0BAA0B,CAAC,IAAI,CAAC;IAChC,aAAa;IACb,WAAW,IAAI,QAAQ;IACvB,oDAAoD;IACpD,aAAa,IAAI;QACf,uCAAuC;QACvC,cAAc;QACd,aAAa;QACb,qBAAqB;QACrB,2CAA2C;KAC5C;IACD,0DAA0D;IAC1D,CAAC,UAAU,IAAI,SAAS,CAAC,IAAI,oBAAoB,EACjD,UAAU,IAAI,YAAY;IAC1B,iBAAiB;IACjB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,EACzD,KAAK,EAAE,KAAK,KACR,KAAK;QAER,kBAAkB,EAAE;QACrB,oBAAC,SAAS,QACP,SAAS,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,CACzC;QACX,gBAAgB,EAAE,CACT,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import { Slot, Slottable } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { ButtonBaseSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconSize } from '../Icon';\nimport { Text, FontWeight, TextColor } from '../Text';\n\nimport { BUTTON_BASE_SIZE_CLASS_MAP } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(\n  (\n    {\n      children,\n      className,\n      size = ButtonBaseSize.Lg,\n      isFullWidth,\n      asChild,\n      isDisabled,\n      isLoading,\n      loadingText,\n      loadingIconProps,\n      loadingTextProps,\n      startIconName,\n      startIconProps,\n      startAccessory,\n      endIconName,\n      endIconProps,\n      endAccessory,\n      textProps,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : 'button';\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const renderLoadingState = () => (\n      <>\n        <span className=\"absolute inline-flex items-center\">\n          <Icon\n            name={IconName.Loading}\n            size={IconSize.Sm}\n            className={twMerge(\n              'text-inherit mr-2 animate-spin',\n              loadingIconProps?.className,\n            )}\n            {...loadingIconProps}\n          />\n          <Text\n            fontWeight={FontWeight.Medium}\n            color={TextColor.Inherit}\n            asChild\n            {...loadingTextProps}\n          >\n            <span>{loadingText}</span>\n          </Text>\n        </span>\n        <span className=\"invisible inline-flex items-center\">{children}</span>\n      </>\n    );\n\n    const renderStartContent = () => {\n      if (startIconName) {\n        return (\n          <Icon\n            name={startIconName}\n            size={IconSize.Sm}\n            className={twMerge(\n              'text-inherit mr-2 flex-shrink-0',\n              startIconProps?.className,\n            )}\n            {...startIconProps}\n          />\n        );\n      }\n      if (startAccessory) {\n        return <span className=\"mr-2\">{startAccessory}</span>;\n      }\n      return null;\n    };\n\n    const renderEndContent = () => {\n      if (endIconName) {\n        return (\n          <Icon\n            name={endIconName}\n            size={IconSize.Sm}\n            className={twMerge(\n              'text-inherit ml-2 flex-shrink-0',\n              endIconProps?.className,\n            )}\n            {...endIconProps}\n          />\n        );\n      }\n      if (endAccessory) {\n        return <span className=\"ml-2\">{endAccessory}</span>;\n      }\n      return null;\n    };\n\n    const renderContent = () => {\n      if (children && typeof children === 'string') {\n        return (\n          <Text\n            fontWeight={FontWeight.Medium}\n            color={TextColor.Inherit}\n            asChild\n            {...textProps}\n          >\n            <span>{children}</span>\n          </Text>\n        );\n      }\n      return children;\n    };\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex items-center justify-center',\n      'rounded-full px-4',\n      'font-medium text-default',\n      'bg-muted',\n      'min-w-[80px] overflow-hidden',\n      // Add relative positioning for loading state\n      'relative',\n      // Size\n      BUTTON_BASE_SIZE_CLASS_MAP[size],\n      // Full width\n      isFullWidth && 'w-full',\n      // Animation classes - only applied when interactive\n      isInteractive && [\n        'transition-[transform,colors,opacity]',\n        'duration-100',\n        'ease-linear',\n        'active:scale-[0.97]',\n        'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]',\n      ],\n      // Disabled state - apply to both isDisabled and isLoading\n      (isDisabled || isLoading) && 'cursor-not-allowed',\n      isDisabled && 'opacity-50',\n      // Custom classes\n      className,\n    );\n\n    return (\n      <Component\n        ref={ref}\n        className={mergedClassName}\n        disabled={asChild ? undefined : (isDisabled ?? isLoading)}\n        style={style}\n        {...props}\n      >\n        {renderStartContent()}\n        <Slottable>\n          {isLoading ? renderLoadingState() : renderContent()}\n        </Slottable>\n        {renderEndContent()}\n      </Component>\n    );\n  },\n);\n\nButtonBase.displayName = 'ButtonBase';\n"]}
+{"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Slot, Slottable } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { ButtonBaseSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconSize } from '../Icon';\nimport { Text, FontWeight, TextColor } from '../Text';\n\nimport { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(\n  (\n    {\n      children,\n      className,\n      size = ButtonBaseSize.Lg,\n      isFullWidth,\n      asChild,\n      isDisabled,\n      isLoading,\n      loadingText,\n      loadingIconProps,\n      loadingTextProps,\n      startIconName,\n      startIconProps,\n      startAccessory,\n      endIconName,\n      endIconProps,\n      endAccessory,\n      textProps,\n      style,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      'aria-pressed': ariaPressed,\n      'aria-expanded': ariaExpanded,\n      'aria-controls': ariaControls,\n      'aria-haspopup': ariaHaspopup,\n      ...props\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : 'button';\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    // Calculate tabIndex based on asChild and disabled state\n    const getTabIndex = () => {\n      if (asChild) {\n        return undefined;\n      }\n      return isDisabled ? -1 : undefined;\n    };\n\n    const renderLoadingState = () => (\n      <>\n        <span className=\"absolute inline-flex items-center\" aria-hidden=\"true\">\n          <Icon\n            name={IconName.Loading}\n            size={IconSize.Sm}\n            className={twMerge(\n              'mr-2 animate-spin text-inherit',\n              loadingIconProps?.className,\n            )}\n            {...loadingIconProps}\n          />\n          <Text\n            fontWeight={FontWeight.Medium}\n            color={TextColor.Inherit}\n            asChild\n            {...loadingTextProps}\n          >\n            <span>{loadingText}</span>\n          </Text>\n        </span>\n        <span className=\"invisible inline-flex items-center\">{children}</span>\n        {/* Screen reader announcement for loading */}\n        <span className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n          {loadingText || 'Loading'}\n        </span>\n      </>\n    );\n\n    const renderStartContent = () => {\n      if (startIconName) {\n        return (\n          <Icon\n            name={startIconName}\n            size={IconSize.Sm}\n            className={twMerge(\n              'mr-2 shrink-0 text-inherit',\n              startIconProps?.className,\n            )}\n            aria-hidden=\"true\"\n            {...startIconProps}\n          />\n        );\n      }\n      if (startAccessory) {\n        return (\n          <span className=\"mr-2\" aria-hidden=\"true\">\n            {startAccessory}\n          </span>\n        );\n      }\n      return null;\n    };\n\n    const renderEndContent = () => {\n      if (endIconName) {\n        return (\n          <Icon\n            name={endIconName}\n            size={IconSize.Sm}\n            className={twMerge(\n              'ml-2 shrink-0 text-inherit',\n              endIconProps?.className,\n            )}\n            aria-hidden=\"true\"\n            {...endIconProps}\n          />\n        );\n      }\n      if (endAccessory) {\n        return (\n          <span className=\"ml-2\" aria-hidden=\"true\">\n            {endAccessory}\n          </span>\n        );\n      }\n      return null;\n    };\n\n    const renderContent = () => {\n      if (children && typeof children === 'string') {\n        return (\n          <Text\n            fontWeight={FontWeight.Medium}\n            color={TextColor.Inherit}\n            asChild\n            {...textProps}\n          >\n            <span>{children}</span>\n          </Text>\n        );\n      }\n      return children;\n    };\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex items-center justify-center',\n      'rounded-xl px-4',\n      'font-medium text-default',\n      'bg-muted',\n      'min-w-20 overflow-hidden',\n      // Add relative positioning for loading state\n      'relative',\n      // Size\n      TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n      // Full width\n      isFullWidth && 'w-full',\n      // Animation classes - only applied when interactive\n      isInteractive && [\n        'transition-all',\n        'duration-100',\n        'ease-linear',\n        'active:scale-[0.97]',\n        'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]',\n      ],\n      // Disabled state - apply to both isDisabled and isLoading\n      (isDisabled || isLoading) && 'cursor-not-allowed',\n      isDisabled && 'opacity-50',\n      // Custom classes\n      className,\n    );\n\n    return (\n      <Component\n        ref={ref}\n        className={mergedClassName}\n        disabled={asChild ? undefined : (isDisabled ?? isLoading)}\n        aria-disabled={isDisabled ? 'true' : undefined}\n        aria-busy={isLoading ? 'true' : undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        aria-pressed={ariaPressed}\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={ariaHaspopup}\n        role={asChild ? undefined : 'button'}\n        tabIndex={getTabIndex()}\n        style={style}\n        {...props}\n      >\n        {renderStartContent()}\n        <Slottable>\n          {isLoading ? renderLoadingState() : renderContent()}\n        </Slottable>\n        {renderEndContent()}\n      </Component>\n    );\n  },\n);\n\nButtonBase.displayName = 'ButtonBase';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.types.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { ButtonBaseSize } from '../../types';\nimport type { IconName, IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type ButtonBaseProps = ComponentProps<'button'> & {\n  /**\n   * Required prop for the content to be rendered within the ButtonBase\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop for additional CSS classes to be applied to the ButtonBase 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 size of the ButtonBase\n   *\n   * @default ButtonBaseSize.Lg\n   */\n  size?: ButtonBaseSize;\n  /**\n   * Optional props to be passed to the Text component when children is a string\n   */\n  textProps?: Partial<TextProps>;\n  /**\n   * Optional prop that when true, makes the button take up the full width of its container\n   *\n   * @default false\n   */\n  isFullWidth?: boolean;\n  /**\n   * Optional boolean that determines if the component should merge its props onto its immediate child\n   * instead of rendering a button element\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Optional prop that when true, shows a loading spinner\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Optional prop for text to display when button is in loading state\n   */\n  loadingText?: string;\n  /**\n   * Optional props to be passed to the loading Text component\n   */\n  loadingTextProps?: Partial<TextProps>;\n  /**\n   * Optional prop to specify an icon to show at the start of the button\n   */\n  startIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the start icon\n   */\n  startIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the start of the button\n   */\n  startAccessory?: React.ReactNode;\n  /**\n   * Optional prop to specify an icon to show at the end of the button\n   */\n  endIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the end icon\n   */\n  endIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the end of the button\n   */\n  endAccessory?: React.ReactNode;\n  /**\n   * Optional prop that when true, disables the button\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional prop to pass additional properties to the loading icon\n   */\n  loadingIconProps?: Partial<IconProps>;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n};\n"]}
+{"version":3,"file":"ButtonBase.types.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { ButtonBaseSize } from '../../types';\nimport type { IconName, IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type ButtonBaseProps = ComponentProps<'button'> & {\n  /**\n   * Required prop for the content to be rendered within the ButtonBase\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop for additional CSS classes to be applied to the ButtonBase 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 size of the ButtonBase\n   *\n   * @default ButtonBaseSize.Lg\n   */\n  size?: ButtonBaseSize;\n  /**\n   * Optional props to be passed to the Text component when children is a string\n   */\n  textProps?: Partial<TextProps>;\n  /**\n   * Optional prop that when true, makes the button take up the full width of its container\n   *\n   * @default false\n   */\n  isFullWidth?: boolean;\n  /**\n   * Optional boolean that determines if the component should merge its props onto its immediate child\n   * instead of rendering a button element\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Optional prop that when true, shows a loading spinner\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Optional prop for text to display when button is in loading state\n   */\n  loadingText?: string;\n  /**\n   * Optional props to be passed to the loading Text component\n   */\n  loadingTextProps?: Partial<TextProps>;\n  /**\n   * Optional prop to specify an icon to show at the start of the button\n   */\n  startIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the start icon\n   */\n  startIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the start of the button\n   */\n  startAccessory?: React.ReactNode;\n  /**\n   * Optional prop to specify an icon to show at the end of the button\n   */\n  endIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the end icon\n   */\n  endIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the end of the button\n   */\n  endAccessory?: React.ReactNode;\n  /**\n   * Optional prop that when true, disables the button\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional prop to pass additional properties to the loading icon\n   */\n  loadingIconProps?: Partial<IconProps>;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n\n  // Accessibility props\n  /**\n   * Optional accessible label for the button. Use when the button text doesn't fully describe its purpose.\n   * This will be used as the aria-label attribute.\n   */\n  'aria-label'?: string;\n  /**\n   * Optional ID of an element that labels the button.\n   * This will be used as the aria-labelledby attribute.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Optional ID of an element that describes the button.\n   * This will be used as the aria-describedby attribute.\n   */\n  'aria-describedby'?: string;\n  /**\n   * Optional prop to indicate if the button is pressed (for toggle buttons).\n   * This will be used as the aria-pressed attribute.\n   */\n  'aria-pressed'?: boolean | 'mixed';\n  /**\n   * Optional prop to indicate if the button controls a collapsible element.\n   * This will be used as the aria-expanded attribute.\n   */\n  'aria-expanded'?: boolean;\n  /**\n   * Optional prop to indicate if the button controls another element.\n   * This will be used as the aria-controls attribute.\n   */\n  'aria-controls'?: string;\n  /**\n   * Optional prop to indicate if the button has a popup (menu, listbox, tree, grid, or dialog).\n   * This will be used as the aria-haspopup attribute.\n   */\n  'aria-haspopup'?:\n    | boolean\n    | 'false'\n    | 'true'\n    | 'menu'\n    | 'listbox'\n    | 'tree'\n    | 'grid'\n    | 'dialog';\n};\n"]}

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

@@ -88,5 +88,40 @@ export type ButtonBaseProps = ComponentProps<'button'> & {
      * Should be used sparingly and only for dynamic styles that can't be achieved with className.
      */
     style?: React.CSSProperties;
+    /**
+     * Optional accessible label for the button. Use when the button text doesn't fully describe its purpose.
+     * This will be used as the aria-label attribute.
+     */
+    'aria-label'?: string;
+    /**
+     * Optional ID of an element that labels the button.
+     * This will be used as the aria-labelledby attribute.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Optional ID of an element that describes the button.
+     * This will be used as the aria-describedby attribute.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Optional prop to indicate if the button is pressed (for toggle buttons).
+     * This will be used as the aria-pressed attribute.
+     */
+    'aria-pressed'?: boolean | 'mixed';
+    /**
+     * Optional prop to indicate if the button controls a collapsible element.
+     * This will be used as the aria-expanded attribute.
+     */
+    'aria-expanded'?: boolean;
+    /**
+     * Optional prop to indicate if the button controls another element.
+     * This will be used as the aria-controls attribute.
+     */
+    'aria-controls'?: string;
+    /**
+     * Optional prop to indicate if the button has a popup (menu, listbox, tree, grid, or dialog).
+     * This will be used as the aria-haspopup attribute.
+     */
+    'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
 };
 //# sourceMappingURL=ButtonBase.types.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACvD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
+{"version":3,"file":"ButtonBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACvD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAG5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EACZ,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,CAAC;CACd,CAAC"}

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

@@ -88,5 +88,40 @@ export type ButtonBaseProps = ComponentProps<'button'> & {
      * Should be used sparingly and only for dynamic styles that can't be achieved with className.
      */
     style?: React.CSSProperties;
+    /**
+     * Optional accessible label for the button. Use when the button text doesn't fully describe its purpose.
+     * This will be used as the aria-label attribute.
+     */
+    'aria-label'?: string;
+    /**
+     * Optional ID of an element that labels the button.
+     * This will be used as the aria-labelledby attribute.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Optional ID of an element that describes the button.
+     * This will be used as the aria-describedby attribute.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Optional prop to indicate if the button is pressed (for toggle buttons).
+     * This will be used as the aria-pressed attribute.
+     */
+    'aria-pressed'?: boolean | 'mixed';
+    /**
+     * Optional prop to indicate if the button controls a collapsible element.
+     * This will be used as the aria-expanded attribute.
+     */
+    'aria-expanded'?: boolean;
+    /**
+     * Optional prop to indicate if the button controls another element.
+     * This will be used as the aria-controls attribute.
+     */
+    'aria-controls'?: string;
+    /**
+     * Optional prop to indicate if the button has a popup (menu, listbox, tree, grid, or dialog).
+     * This will be used as the aria-haspopup attribute.
+     */
+    'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
 };
 //# sourceMappingURL=ButtonBase.types.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACvD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
+{"version":3,"file":"ButtonBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACvD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAG5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EACZ,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,CAAC;CACd,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.types.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { ButtonBaseSize } from '../../types';\nimport type { IconName, IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type ButtonBaseProps = ComponentProps<'button'> & {\n  /**\n   * Required prop for the content to be rendered within the ButtonBase\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop for additional CSS classes to be applied to the ButtonBase 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 size of the ButtonBase\n   *\n   * @default ButtonBaseSize.Lg\n   */\n  size?: ButtonBaseSize;\n  /**\n   * Optional props to be passed to the Text component when children is a string\n   */\n  textProps?: Partial<TextProps>;\n  /**\n   * Optional prop that when true, makes the button take up the full width of its container\n   *\n   * @default false\n   */\n  isFullWidth?: boolean;\n  /**\n   * Optional boolean that determines if the component should merge its props onto its immediate child\n   * instead of rendering a button element\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Optional prop that when true, shows a loading spinner\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Optional prop for text to display when button is in loading state\n   */\n  loadingText?: string;\n  /**\n   * Optional props to be passed to the loading Text component\n   */\n  loadingTextProps?: Partial<TextProps>;\n  /**\n   * Optional prop to specify an icon to show at the start of the button\n   */\n  startIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the start icon\n   */\n  startIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the start of the button\n   */\n  startAccessory?: React.ReactNode;\n  /**\n   * Optional prop to specify an icon to show at the end of the button\n   */\n  endIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the end icon\n   */\n  endIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the end of the button\n   */\n  endAccessory?: React.ReactNode;\n  /**\n   * Optional prop that when true, disables the button\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional prop to pass additional properties to the loading icon\n   */\n  loadingIconProps?: Partial<IconProps>;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n};\n"]}
+{"version":3,"file":"ButtonBase.types.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { ButtonBaseSize } from '../../types';\nimport type { IconName, IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type ButtonBaseProps = ComponentProps<'button'> & {\n  /**\n   * Required prop for the content to be rendered within the ButtonBase\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop for additional CSS classes to be applied to the ButtonBase 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 size of the ButtonBase\n   *\n   * @default ButtonBaseSize.Lg\n   */\n  size?: ButtonBaseSize;\n  /**\n   * Optional props to be passed to the Text component when children is a string\n   */\n  textProps?: Partial<TextProps>;\n  /**\n   * Optional prop that when true, makes the button take up the full width of its container\n   *\n   * @default false\n   */\n  isFullWidth?: boolean;\n  /**\n   * Optional boolean that determines if the component should merge its props onto its immediate child\n   * instead of rendering a button element\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Optional prop that when true, shows a loading spinner\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Optional prop for text to display when button is in loading state\n   */\n  loadingText?: string;\n  /**\n   * Optional props to be passed to the loading Text component\n   */\n  loadingTextProps?: Partial<TextProps>;\n  /**\n   * Optional prop to specify an icon to show at the start of the button\n   */\n  startIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the start icon\n   */\n  startIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the start of the button\n   */\n  startAccessory?: React.ReactNode;\n  /**\n   * Optional prop to specify an icon to show at the end of the button\n   */\n  endIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the end icon\n   */\n  endIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the end of the button\n   */\n  endAccessory?: React.ReactNode;\n  /**\n   * Optional prop that when true, disables the button\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional prop to pass additional properties to the loading icon\n   */\n  loadingIconProps?: Partial<IconProps>;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n\n  // Accessibility props\n  /**\n   * Optional accessible label for the button. Use when the button text doesn't fully describe its purpose.\n   * This will be used as the aria-label attribute.\n   */\n  'aria-label'?: string;\n  /**\n   * Optional ID of an element that labels the button.\n   * This will be used as the aria-labelledby attribute.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Optional ID of an element that describes the button.\n   * This will be used as the aria-describedby attribute.\n   */\n  'aria-describedby'?: string;\n  /**\n   * Optional prop to indicate if the button is pressed (for toggle buttons).\n   * This will be used as the aria-pressed attribute.\n   */\n  'aria-pressed'?: boolean | 'mixed';\n  /**\n   * Optional prop to indicate if the button controls a collapsible element.\n   * This will be used as the aria-expanded attribute.\n   */\n  'aria-expanded'?: boolean;\n  /**\n   * Optional prop to indicate if the button controls another element.\n   * This will be used as the aria-controls attribute.\n   */\n  'aria-controls'?: string;\n  /**\n   * Optional prop to indicate if the button has a popup (menu, listbox, tree, grid, or dialog).\n   * This will be used as the aria-haspopup attribute.\n   */\n  'aria-haspopup'?:\n    | boolean\n    | 'false'\n    | 'true'\n    | 'menu'\n    | 'listbox'\n    | 'tree'\n    | 'grid'\n    | 'dialog';\n};\n"]}

package/dist/components/ButtonIcon/ButtonIcon.cjs

@@ -44,7 +44,7 @@ exports.ButtonIcon = (0, react_1.forwardRef)(({ className, iconName, iconProps,
     ], 
     // Non-floating styles
     !isFloating && [
-        'bg-transparent rounded',
+        'rounded bg-transparent',
         // Only apply hover/active styles when interactive
         isInteractive && 'hover:bg-hover active:bg-pressed',
         !isInverse && 'text-icon-default',

package/dist/components/ButtonIcon/ButtonIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,iDAA6C;AAC7C,uDAA+C;AAC/C,4CAA+B;AAE/B,qEAGgC;AAGnB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,UAAU,CAAC;IAElC,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,6CAA6C;IAC7C,cAAc;IACd,2DAAoC,CAAC,IAAI,CAAC;IAC1C,kBAAkB;IAClB,UAAU,IAAI;QACZ,cAAc;QACd,CAAC,SAAS,IAAI,yCAAyC;QACvD,SAAS,IAAI,yCAAyC;KACvD;IACD,sBAAsB;IACtB,CAAC,UAAU,IAAI;QACb,wBAAwB;QACxB,kDAAkD;QAClD,aAAa,IAAI,kCAAkC;QACnD,CAAC,SAAS,IAAI,mBAAmB;QACjC,SAAS,IAAI,yBAAyB;KACvC;IACD,iBAAiB;IACjB,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,0CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,UAAU,gBACR,SAAS,EACrB,KAAK,EAAE,KAAK,KACR,KAAK;QAET,8BAAC,WAAI,IACH,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,mDAA4B,CAAC,IAAI,CAAC,EACxC,SAAS,EAAE,IAAA,kBAAO,EAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,KACpD,SAAS,GACb,CACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonIconSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon } from '../Icon';\n\nimport {\n  TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n  MAP_BUTTONICON_SIZE_ICONSIZE,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(\n  (\n    {\n      className,\n      iconName,\n      iconProps,\n      ariaLabel,\n      isDisabled = false,\n      isInverse = false,\n      isFloating = false,\n      size = ButtonIconSize.Md,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInteractive = !isDisabled;\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex items-center justify-center p-0',\n      // Size styles\n      TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size],\n      // Floating styles\n      isFloating && [\n        'rounded-full',\n        !isInverse && 'bg-icon-default text-background-default',\n        isInverse && 'bg-icon-default text-background-default',\n      ],\n      // Non-floating styles\n      !isFloating && [\n        'bg-transparent rounded',\n        // Only apply hover/active styles when interactive\n        isInteractive && 'hover:bg-hover active:bg-pressed',\n        !isInverse && 'text-icon-default',\n        isInverse && 'text-background-default',\n      ],\n      // Disabled state\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    return (\n      <button\n        ref={ref}\n        className={mergedClassName}\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        style={style}\n        {...props}\n      >\n        <Icon\n          name={iconName}\n          size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n          className={twMerge('text-inherit', iconProps?.className)}\n          {...iconProps}\n        />\n      </button>\n    );\n  },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"]}
+{"version":3,"file":"ButtonIcon.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,iDAA6C;AAC7C,uDAA+C;AAC/C,4CAA+B;AAE/B,qEAGgC;AAGnB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,UAAU,CAAC;IAElC,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,6CAA6C;IAC7C,cAAc;IACd,2DAAoC,CAAC,IAAI,CAAC;IAC1C,kBAAkB;IAClB,UAAU,IAAI;QACZ,cAAc;QACd,CAAC,SAAS,IAAI,yCAAyC;QACvD,SAAS,IAAI,yCAAyC;KACvD;IACD,sBAAsB;IACtB,CAAC,UAAU,IAAI;QACb,wBAAwB;QACxB,kDAAkD;QAClD,aAAa,IAAI,kCAAkC;QACnD,CAAC,SAAS,IAAI,mBAAmB;QACjC,SAAS,IAAI,yBAAyB;KACvC;IACD,iBAAiB;IACjB,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,0CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,UAAU,gBACR,SAAS,EACrB,KAAK,EAAE,KAAK,KACR,KAAK;QAET,8BAAC,WAAI,IACH,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,mDAA4B,CAAC,IAAI,CAAC,EACxC,SAAS,EAAE,IAAA,kBAAO,EAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,KACpD,SAAS,GACb,CACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonIconSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon } from '../Icon';\n\nimport {\n  TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n  MAP_BUTTONICON_SIZE_ICONSIZE,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(\n  (\n    {\n      className,\n      iconName,\n      iconProps,\n      ariaLabel,\n      isDisabled = false,\n      isInverse = false,\n      isFloating = false,\n      size = ButtonIconSize.Md,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInteractive = !isDisabled;\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex items-center justify-center p-0',\n      // Size styles\n      TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size],\n      // Floating styles\n      isFloating && [\n        'rounded-full',\n        !isInverse && 'bg-icon-default text-background-default',\n        isInverse && 'bg-icon-default text-background-default',\n      ],\n      // Non-floating styles\n      !isFloating && [\n        'rounded bg-transparent',\n        // Only apply hover/active styles when interactive\n        isInteractive && 'hover:bg-hover active:bg-pressed',\n        !isInverse && 'text-icon-default',\n        isInverse && 'text-background-default',\n      ],\n      // Disabled state\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    return (\n      <button\n        ref={ref}\n        className={mergedClassName}\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        style={style}\n        {...props}\n      >\n        <Icon\n          name={iconName}\n          size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n          className={twMerge('text-inherit', iconProps?.className)}\n          {...iconProps}\n        />\n      </button>\n    );\n  },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"]}

package/dist/components/ButtonIcon/ButtonIcon.mjs

@@ -25,7 +25,7 @@ export const ButtonIcon = forwardRef(({ className, iconName, iconProps, ariaLabe
     ], 
     // Non-floating styles
     !isFloating && [
-        'bg-transparent rounded',
+        'rounded bg-transparent',
         // Only apply hover/active styles when interactive
         isInteractive && 'hover:bg-hover active:bg-pressed',
         !isInverse && 'text-icon-default',

package/dist/components/ButtonIcon/ButtonIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,oCAAoC,EACpC,4BAA4B,EAC7B,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,UAAU,CAAC;IAElC,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,6CAA6C;IAC7C,cAAc;IACd,oCAAoC,CAAC,IAAI,CAAC;IAC1C,kBAAkB;IAClB,UAAU,IAAI;QACZ,cAAc;QACd,CAAC,SAAS,IAAI,yCAAyC;QACvD,SAAS,IAAI,yCAAyC;KACvD;IACD,sBAAsB;IACtB,CAAC,UAAU,IAAI;QACb,wBAAwB;QACxB,kDAAkD;QAClD,aAAa,IAAI,kCAAkC;QACnD,CAAC,SAAS,IAAI,mBAAmB;QACjC,SAAS,IAAI,yBAAyB;KACvC;IACD,iBAAiB;IACjB,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,UAAU,gBACR,SAAS,EACrB,KAAK,EAAE,KAAK,KACR,KAAK;QAET,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACxC,SAAS,EAAE,OAAO,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,KACpD,SAAS,GACb,CACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonIconSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon } from '../Icon';\n\nimport {\n  TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n  MAP_BUTTONICON_SIZE_ICONSIZE,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(\n  (\n    {\n      className,\n      iconName,\n      iconProps,\n      ariaLabel,\n      isDisabled = false,\n      isInverse = false,\n      isFloating = false,\n      size = ButtonIconSize.Md,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInteractive = !isDisabled;\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex items-center justify-center p-0',\n      // Size styles\n      TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size],\n      // Floating styles\n      isFloating && [\n        'rounded-full',\n        !isInverse && 'bg-icon-default text-background-default',\n        isInverse && 'bg-icon-default text-background-default',\n      ],\n      // Non-floating styles\n      !isFloating && [\n        'bg-transparent rounded',\n        // Only apply hover/active styles when interactive\n        isInteractive && 'hover:bg-hover active:bg-pressed',\n        !isInverse && 'text-icon-default',\n        isInverse && 'text-background-default',\n      ],\n      // Disabled state\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    return (\n      <button\n        ref={ref}\n        className={mergedClassName}\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        style={style}\n        {...props}\n      >\n        <Icon\n          name={iconName}\n          size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n          className={twMerge('text-inherit', iconProps?.className)}\n          {...iconProps}\n        />\n      </button>\n    );\n  },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"]}
+{"version":3,"file":"ButtonIcon.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,oCAAoC,EACpC,4BAA4B,EAC7B,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,UAAU,CAAC;IAElC,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,6CAA6C;IAC7C,cAAc;IACd,oCAAoC,CAAC,IAAI,CAAC;IAC1C,kBAAkB;IAClB,UAAU,IAAI;QACZ,cAAc;QACd,CAAC,SAAS,IAAI,yCAAyC;QACvD,SAAS,IAAI,yCAAyC;KACvD;IACD,sBAAsB;IACtB,CAAC,UAAU,IAAI;QACb,wBAAwB;QACxB,kDAAkD;QAClD,aAAa,IAAI,kCAAkC;QACnD,CAAC,SAAS,IAAI,mBAAmB;QACjC,SAAS,IAAI,yBAAyB;KACvC;IACD,iBAAiB;IACjB,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,UAAU,gBACR,SAAS,EACrB,KAAK,EAAE,KAAK,KACR,KAAK;QAET,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACxC,SAAS,EAAE,OAAO,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,KACpD,SAAS,GACb,CACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonIconSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon } from '../Icon';\n\nimport {\n  TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n  MAP_BUTTONICON_SIZE_ICONSIZE,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(\n  (\n    {\n      className,\n      iconName,\n      iconProps,\n      ariaLabel,\n      isDisabled = false,\n      isInverse = false,\n      isFloating = false,\n      size = ButtonIconSize.Md,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInteractive = !isDisabled;\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex items-center justify-center p-0',\n      // Size styles\n      TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size],\n      // Floating styles\n      isFloating && [\n        'rounded-full',\n        !isInverse && 'bg-icon-default text-background-default',\n        isInverse && 'bg-icon-default text-background-default',\n      ],\n      // Non-floating styles\n      !isFloating && [\n        'rounded bg-transparent',\n        // Only apply hover/active styles when interactive\n        isInteractive && 'hover:bg-hover active:bg-pressed',\n        !isInverse && 'text-icon-default',\n        isInverse && 'text-background-default',\n      ],\n      // Disabled state\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    return (\n      <button\n        ref={ref}\n        className={mergedClassName}\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        style={style}\n        {...props}\n      >\n        <Icon\n          name={iconName}\n          size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n          className={twMerge('text-inherit', iconProps?.className)}\n          {...iconProps}\n        />\n      </button>\n    );\n  },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"]}

package/dist/components/Checkbox/Checkbox.cjs

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

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

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

package/dist/components/Checkbox/Checkbox.mjs

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

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

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

package/dist/components/Icon/Icon.cjs

@@ -19,7 +19,7 @@ const Icon = ({ name, size = types_1.IconSize.Md, color = types_1.IconColor.Icon
         console.warn(`Icon "${name}" not found`);
         return null;
     }
-    const mergedClassName = (0, tw_merge_1.twMerge)('inline-block', Icon_constants_1.ICON_SIZE_CLASS_MAP[size], color, className);
+    const mergedClassName = (0, tw_merge_1.twMerge)('inline-block', Icon_constants_1.TWCLASSMAP_ICON_SIZE_DIMENSION[size], color, className);
     return (react_1.default.createElement(IconComponent, { className: mergedClassName, ...props, style: style }));
 };
 exports.Icon = Icon;

package/dist/components/Icon/Icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAAkD;AAClD,uDAA+C;AAE/C,yDAAuD;AAEvD,6CAAgC;AAEzB,MAAM,IAAI,GAAwB,CAAC,EACxC,IAAI,EACJ,IAAI,GAAG,gBAAQ,CAAC,EAAE,EAClB,KAAK,GAAG,iBAAS,CAAC,WAAW,EAC7B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,aAAa,GAAG,aAAK,CAAC,IAAI,CAAC,CAAC;IAElC,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,cAAc,EACd,oCAAmB,CAAC,IAAI,CAAC,EACzB,KAAK,EACL,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,aAAa,IACZ,SAAS,EAAE,eAAe,KACrB,KAAuC,EAC5C,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,IAAI,QAkCf","sourcesContent":["import React from 'react';\n\nimport { IconSize, IconColor } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport { ICON_SIZE_CLASS_MAP } from './Icon.constants';\nimport type { IconProps } from './Icon.types';\nimport { Icons } from './icons';\n\nexport const Icon: React.FC<IconProps> = ({\n  name,\n  size = IconSize.Md,\n  color = IconColor.IconDefault,\n  className,\n  style,\n  ...props\n}) => {\n  if (!name) {\n    console.warn('Icon name is required');\n    return null;\n  }\n\n  const IconComponent = Icons[name];\n\n  if (!IconComponent) {\n    console.warn(`Icon \"${name}\" not found`);\n    return null;\n  }\n\n  const mergedClassName = twMerge(\n    'inline-block',\n    ICON_SIZE_CLASS_MAP[size],\n    color,\n    className,\n  );\n\n  return (\n    <IconComponent\n      className={mergedClassName}\n      {...(props as React.SVGProps<SVGSVGElement>)}\n      style={style}\n    />\n  );\n};\n"]}
+{"version":3,"file":"Icon.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAAkD;AAClD,uDAA+C;AAE/C,yDAAkE;AAElE,6CAAgC;AAEzB,MAAM,IAAI,GAAwB,CAAC,EACxC,IAAI,EACJ,IAAI,GAAG,gBAAQ,CAAC,EAAE,EAClB,KAAK,GAAG,iBAAS,CAAC,WAAW,EAC7B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,aAAa,GAAG,aAAK,CAAC,IAAI,CAAC,CAAC;IAElC,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,cAAc,EACd,+CAA8B,CAAC,IAAI,CAAC,EACpC,KAAK,EACL,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,aAAa,IACZ,SAAS,EAAE,eAAe,KACrB,KAAuC,EAC5C,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,IAAI,QAkCf","sourcesContent":["import React from 'react';\n\nimport { IconSize, IconColor } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport { TWCLASSMAP_ICON_SIZE_DIMENSION } from './Icon.constants';\nimport type { IconProps } from './Icon.types';\nimport { Icons } from './icons';\n\nexport const Icon: React.FC<IconProps> = ({\n  name,\n  size = IconSize.Md,\n  color = IconColor.IconDefault,\n  className,\n  style,\n  ...props\n}) => {\n  if (!name) {\n    console.warn('Icon name is required');\n    return null;\n  }\n\n  const IconComponent = Icons[name];\n\n  if (!IconComponent) {\n    console.warn(`Icon \"${name}\" not found`);\n    return null;\n  }\n\n  const mergedClassName = twMerge(\n    'inline-block',\n    TWCLASSMAP_ICON_SIZE_DIMENSION[size],\n    color,\n    className,\n  );\n\n  return (\n    <IconComponent\n      className={mergedClassName}\n      {...(props as React.SVGProps<SVGSVGElement>)}\n      style={style}\n    />\n  );\n};\n"]}

package/dist/components/Icon/Icon.constants.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ICON_SIZE_CLASS_MAP = void 0;
+exports.TWCLASSMAP_ICON_SIZE_DIMENSION = void 0;
 const types_1 = require("../../types/index.cjs");
-exports.ICON_SIZE_CLASS_MAP = {
+exports.TWCLASSMAP_ICON_SIZE_DIMENSION = {
     [types_1.IconSize.Xs]: 'w-3 h-3',
     [types_1.IconSize.Sm]: 'w-4 h-4',
     [types_1.IconSize.Md]: 'w-5 h-5',

package/dist/components/Icon/Icon.constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.constants.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":";;;AAAA,iDAAuC;AAE1B,QAAA,mBAAmB,GAA6B;IAC3D,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO;CAClC,CAAC","sourcesContent":["import { IconSize } from '../../types';\n\nexport const ICON_SIZE_CLASS_MAP: Record<IconSize, string> = {\n  [IconSize.Xs]: 'w-3 h-3', // 12px\n  [IconSize.Sm]: 'w-4 h-4', // 16px\n  [IconSize.Md]: 'w-5 h-5', // 20px\n  [IconSize.Lg]: 'w-6 h-6', // 24px\n  [IconSize.Xl]: 'w-8 h-8', // 32px\n};\n"]}
+{"version":3,"file":"Icon.constants.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":";;;AAAA,iDAAuC;AAE1B,QAAA,8BAA8B,GAA6B;IACtE,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO;CAClC,CAAC","sourcesContent":["import { IconSize } from '../../types';\n\nexport const TWCLASSMAP_ICON_SIZE_DIMENSION: Record<IconSize, string> = {\n  [IconSize.Xs]: 'w-3 h-3', // 12px\n  [IconSize.Sm]: 'w-4 h-4', // 16px\n  [IconSize.Md]: 'w-5 h-5', // 20px\n  [IconSize.Lg]: 'w-6 h-6', // 24px\n  [IconSize.Xl]: 'w-8 h-8', // 32px\n};\n"]}

package/dist/components/Icon/Icon.constants.d.cts

@@ -1,3 +1,3 @@
 import { IconSize } from "../../types/index.cjs";
-export declare const ICON_SIZE_CLASS_MAP: Record<IconSize, string>;
+export declare const TWCLASSMAP_ICON_SIZE_DIMENSION: Record<IconSize, string>;
 //# sourceMappingURL=Icon.constants.d.cts.map

package/dist/components/Icon/Icon.constants.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAEvC,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAMxD,CAAC"}
+{"version":3,"file":"Icon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAEvC,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAMnE,CAAC"}

package/dist/components/Icon/Icon.constants.d.mts

@@ -1,3 +1,3 @@
 import { IconSize } from "../../types/index.mjs";
-export declare const ICON_SIZE_CLASS_MAP: Record<IconSize, string>;
+export declare const TWCLASSMAP_ICON_SIZE_DIMENSION: Record<IconSize, string>;
 //# sourceMappingURL=Icon.constants.d.mts.map

package/dist/components/Icon/Icon.constants.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAEvC,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAMxD,CAAC"}
+{"version":3,"file":"Icon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAEvC,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAMnE,CAAC"}

package/dist/components/Icon/Icon.constants.mjs

@@ -1,5 +1,5 @@
 import { IconSize } from "../../types/index.mjs";
-export const ICON_SIZE_CLASS_MAP = {
+export const TWCLASSMAP_ICON_SIZE_DIMENSION = {
     [IconSize.Xs]: 'w-3 h-3',
     [IconSize.Sm]: 'w-4 h-4',
     [IconSize.Md]: 'w-5 h-5',

package/dist/components/Icon/Icon.constants.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.constants.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAEvC,MAAM,CAAC,MAAM,mBAAmB,GAA6B;IAC3D,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO;CAClC,CAAC","sourcesContent":["import { IconSize } from '../../types';\n\nexport const ICON_SIZE_CLASS_MAP: Record<IconSize, string> = {\n  [IconSize.Xs]: 'w-3 h-3', // 12px\n  [IconSize.Sm]: 'w-4 h-4', // 16px\n  [IconSize.Md]: 'w-5 h-5', // 20px\n  [IconSize.Lg]: 'w-6 h-6', // 24px\n  [IconSize.Xl]: 'w-8 h-8', // 32px\n};\n"]}
+{"version":3,"file":"Icon.constants.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAEvC,MAAM,CAAC,MAAM,8BAA8B,GAA6B;IACtE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO;CAClC,CAAC","sourcesContent":["import { IconSize } from '../../types';\n\nexport const TWCLASSMAP_ICON_SIZE_DIMENSION: Record<IconSize, string> = {\n  [IconSize.Xs]: 'w-3 h-3', // 12px\n  [IconSize.Sm]: 'w-4 h-4', // 16px\n  [IconSize.Md]: 'w-5 h-5', // 20px\n  [IconSize.Lg]: 'w-6 h-6', // 24px\n  [IconSize.Xl]: 'w-8 h-8', // 32px\n};\n"]}

package/dist/components/Icon/Icon.mjs

@@ -8,7 +8,7 @@ import $React from "react";
 const React = $importDefault($React);
 import { IconSize, IconColor } from "../../types/index.mjs";
 import { twMerge } from "../../utils/tw-merge.mjs";
-import { ICON_SIZE_CLASS_MAP } from "./Icon.constants.mjs";
+import { TWCLASSMAP_ICON_SIZE_DIMENSION } from "./Icon.constants.mjs";
 import { Icons } from "./icons/index.mjs";
 export const Icon = ({ name, size = IconSize.Md, color = IconColor.IconDefault, className, style, ...props }) => {
     if (!name) {
@@ -20,7 +20,7 @@ export const Icon = ({ name, size = IconSize.Md, color = IconColor.IconDefault,
         console.warn(`Icon "${name}" not found`);
         return null;
     }
-    const mergedClassName = twMerge('inline-block', ICON_SIZE_CLASS_MAP[size], color, className);
+    const mergedClassName = twMerge('inline-block', TWCLASSMAP_ICON_SIZE_DIMENSION[size], color, className);
     return (React.createElement(IconComponent, { className: mergedClassName, ...props, style: style }));
 };
 //# sourceMappingURL=Icon.mjs.map

package/dist/components/Icon/Icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,8BAAoB;AAClD,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAE/C,OAAO,EAAE,mBAAmB,EAAE,6BAAyB;AAEvD,OAAO,EAAE,KAAK,EAAE,0BAAgB;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,IAAI,EACJ,IAAI,GAAG,QAAQ,CAAC,EAAE,EAClB,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAElC,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,eAAe,GAAG,OAAO,CAC7B,cAAc,EACd,mBAAmB,CAAC,IAAI,CAAC,EACzB,KAAK,EACL,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,eAAe,KACrB,KAAuC,EAC5C,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { IconSize, IconColor } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport { ICON_SIZE_CLASS_MAP } from './Icon.constants';\nimport type { IconProps } from './Icon.types';\nimport { Icons } from './icons';\n\nexport const Icon: React.FC<IconProps> = ({\n  name,\n  size = IconSize.Md,\n  color = IconColor.IconDefault,\n  className,\n  style,\n  ...props\n}) => {\n  if (!name) {\n    console.warn('Icon name is required');\n    return null;\n  }\n\n  const IconComponent = Icons[name];\n\n  if (!IconComponent) {\n    console.warn(`Icon \"${name}\" not found`);\n    return null;\n  }\n\n  const mergedClassName = twMerge(\n    'inline-block',\n    ICON_SIZE_CLASS_MAP[size],\n    color,\n    className,\n  );\n\n  return (\n    <IconComponent\n      className={mergedClassName}\n      {...(props as React.SVGProps<SVGSVGElement>)}\n      style={style}\n    />\n  );\n};\n"]}
+{"version":3,"file":"Icon.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,8BAAoB;AAClD,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAE/C,OAAO,EAAE,8BAA8B,EAAE,6BAAyB;AAElE,OAAO,EAAE,KAAK,EAAE,0BAAgB;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,IAAI,EACJ,IAAI,GAAG,QAAQ,CAAC,EAAE,EAClB,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAElC,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,eAAe,GAAG,OAAO,CAC7B,cAAc,EACd,8BAA8B,CAAC,IAAI,CAAC,EACpC,KAAK,EACL,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,eAAe,KACrB,KAAuC,EAC5C,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { IconSize, IconColor } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport { TWCLASSMAP_ICON_SIZE_DIMENSION } from './Icon.constants';\nimport type { IconProps } from './Icon.types';\nimport { Icons } from './icons';\n\nexport const Icon: React.FC<IconProps> = ({\n  name,\n  size = IconSize.Md,\n  color = IconColor.IconDefault,\n  className,\n  style,\n  ...props\n}) => {\n  if (!name) {\n    console.warn('Icon name is required');\n    return null;\n  }\n\n  const IconComponent = Icons[name];\n\n  if (!IconComponent) {\n    console.warn(`Icon \"${name}\" not found`);\n    return null;\n  }\n\n  const mergedClassName = twMerge(\n    'inline-block',\n    TWCLASSMAP_ICON_SIZE_DIMENSION[size],\n    color,\n    className,\n  );\n\n  return (\n    <IconComponent\n      className={mergedClassName}\n      {...(props as React.SVGProps<SVGSVGElement>)}\n      style={style}\n    />\n  );\n};\n"]}