@veeqo/ui 13.21.0 → 13.22.1

package/dist/components/Button/Button.cjs

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var Loader = require('../Loader/Loader.cjs');
+var withTokens = require('../../hoc/withTokens/withTokens.cjs');
 var styled = require('./components/styled.cjs');
 var DropdownIcon = require('../../icons/custom/components/DropdownIcon.cjs');
 
@@ -18,7 +19,7 @@ const variantMap = {
     link: styled.LinkButton,
     unstyled: styled.UnstyledButton,
 };
-const Button = React.forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, contentStyles, ...otherProps }, ref) => {
+const ButtonBase = React.forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, contentStyles, ...otherProps }, ref) => {
     if (variant === 'unstyled') {
         return (React__default.default.createElement(styled.UnstyledButton, { ref: ref, className: className, ...otherProps }, children));
     }
@@ -33,6 +34,7 @@ const Button = React.forwardRef(({ className, children, iconSlot, variant = 'def
         loading && (React__default.default.createElement(styled.LoadingWrapper, null,
             React__default.default.createElement(Loader.Loader, null)))));
 });
+const Button = withTokens.withTokens(ButtonBase);
 
 exports.Button = Button;
 //# sourceMappingURL=Button.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\n\nimport {\n  DefaultButton,\n  DefaultDestructiveButton,\n  PrimaryButton,\n  PrimaryDestructiveButton,\n  FlatButton,\n  LinkButton,\n  UnstyledButton,\n  LoadingWrapper,\n  MainContent,\n} from './components/styled';\nimport { DropdownIcon } from '../../icons';\n\nconst variantMap = {\n  default: DefaultButton,\n  primary: PrimaryButton,\n  destructive: DefaultDestructiveButton,\n  primaryDestructive: PrimaryDestructiveButton,\n  flat: FlatButton,\n  link: LinkButton,\n  unstyled: UnstyledButton,\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      iconSlot,\n      variant = 'default',\n      size = 'base',\n      dropdown = false,\n      loading = false,\n      contentStyles,\n      ...otherProps\n    }: ButtonProps,\n    ref,\n  ) => {\n    if (variant === 'unstyled') {\n      return (\n        <UnstyledButton ref={ref} className={className} {...otherProps}>\n          {children}\n        </UnstyledButton>\n      );\n    }\n\n    const VariantButton = variantMap[variant];\n\n    const hasChildren = children !== undefined;\n    const hasIcon = !!iconSlot;\n    return (\n      <VariantButton\n        ref={ref}\n        className={className}\n        size={size}\n        hasText={hasChildren}\n        hasIcon={hasIcon}\n        hasDropdown={dropdown}\n        {...otherProps}\n      >\n        {(hasChildren || hasIcon) && (\n          <MainContent\n            $loading={loading}\n            hasText={!!children}\n            size={children || size === 'sm' ? 'base' : 'md'}\n            style={contentStyles}\n          >\n            {iconSlot && iconSlot}\n            {children !== undefined && children}\n            {dropdown && <DropdownIcon />}\n          </MainContent>\n        )}\n\n        {loading && (\n          <LoadingWrapper>\n            <Loader />\n          </LoadingWrapper>\n        )}\n      </VariantButton>\n    );\n  },\n);\n"],"names":["DefaultButton","PrimaryButton","DefaultDestructiveButton","PrimaryDestructiveButton","FlatButton","LinkButton","UnstyledButton","forwardRef","React","MainContent","DropdownIcon","LoadingWrapper","Loader"],"mappings":";;;;;;;;;;;AAkBA,MAAM,UAAU,GAAG;AACjB,IAAA,OAAO,EAAEA,oBAAa;AACtB,IAAA,OAAO,EAAEC,oBAAa;AACtB,IAAA,WAAW,EAAEC,+BAAwB;AACrC,IAAA,kBAAkB,EAAEC,+BAAwB;AAC5C,IAAA,IAAI,EAAEC,iBAAU;AAChB,IAAA,IAAI,EAAEC,iBAAU;AAChB,IAAA,QAAQ,EAAEC,qBAAc;CACzB;AAEY,MAAA,MAAM,GAAGC,gBAAU,CAC9B,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,aAAa,EACb,GAAG,UAAU,EACD,EACd,GAAG,KACD;IACF,IAAI,OAAO,KAAK,UAAU,EAAE;AAC1B,QAAA,QACEC,sBAAC,CAAA,aAAA,CAAAF,qBAAc,EAAC,EAAA,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAM,GAAA,UAAU,IAC3D,QAAQ,CACM;AAEpB;AAED,IAAA,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC;AAEzC,IAAA,MAAM,WAAW,GAAG,QAAQ,KAAK,SAAS;AAC1C,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ;AAC1B,IAAA,QACEE,sBAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,QAAQ,EAAA,GACjB,UAAU,EAAA;AAEb,QAAA,CAAC,WAAW,IAAI,OAAO,MACtBA,sBAAA,CAAA,aAAA,CAACC,kBAAW,EAAA,EAAA,UAAA,EACA,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,IAAI,EAC/C,KAAK,EAAE,aAAa,EAAA;AAEnB,YAAA,QAAQ,IAAI,QAAQ;YACpB,QAAQ,KAAK,SAAS,IAAI,QAAQ;AAClC,YAAA,QAAQ,IAAID,sBAAA,CAAA,aAAA,CAACE,yBAAY,EAAA,IAAA,CAAG,CACjB,CACf;QAEA,OAAO,KACNF,sBAAA,CAAA,aAAA,CAACG,qBAAc,EAAA,IAAA;AACb,YAAAH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAG,IAAA,CAAA,CACK,CAClB,CACa;AAEpB,CAAC;;;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\n\nimport {\n  DefaultButton,\n  DefaultDestructiveButton,\n  PrimaryButton,\n  PrimaryDestructiveButton,\n  FlatButton,\n  LinkButton,\n  UnstyledButton,\n  LoadingWrapper,\n  MainContent,\n} from './components/styled';\nimport { DropdownIcon } from '../../icons';\n\nconst variantMap = {\n  default: DefaultButton,\n  primary: PrimaryButton,\n  destructive: DefaultDestructiveButton,\n  primaryDestructive: PrimaryDestructiveButton,\n  flat: FlatButton,\n  link: LinkButton,\n  unstyled: UnstyledButton,\n};\n\nconst ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      iconSlot,\n      variant = 'default',\n      size = 'base',\n      dropdown = false,\n      loading = false,\n      contentStyles,\n      ...otherProps\n    }: ButtonProps,\n    ref,\n  ) => {\n    if (variant === 'unstyled') {\n      return (\n        <UnstyledButton ref={ref} className={className} {...otherProps}>\n          {children}\n        </UnstyledButton>\n      );\n    }\n\n    const VariantButton = variantMap[variant];\n\n    const hasChildren = children !== undefined;\n    const hasIcon = !!iconSlot;\n    return (\n      <VariantButton\n        ref={ref}\n        className={className}\n        size={size}\n        hasText={hasChildren}\n        hasIcon={hasIcon}\n        hasDropdown={dropdown}\n        {...otherProps}\n      >\n        {(hasChildren || hasIcon) && (\n          <MainContent\n            $loading={loading}\n            hasText={!!children}\n            size={children || size === 'sm' ? 'base' : 'md'}\n            style={contentStyles}\n          >\n            {iconSlot && iconSlot}\n            {children !== undefined && children}\n            {dropdown && <DropdownIcon />}\n          </MainContent>\n        )}\n\n        {loading && (\n          <LoadingWrapper>\n            <Loader />\n          </LoadingWrapper>\n        )}\n      </VariantButton>\n    );\n  },\n);\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["DefaultButton","PrimaryButton","DefaultDestructiveButton","PrimaryDestructiveButton","FlatButton","LinkButton","UnstyledButton","forwardRef","React","MainContent","DropdownIcon","LoadingWrapper","Loader","withTokens"],"mappings":";;;;;;;;;;;;AAmBA,MAAM,UAAU,GAAG;AACjB,IAAA,OAAO,EAAEA,oBAAa;AACtB,IAAA,OAAO,EAAEC,oBAAa;AACtB,IAAA,WAAW,EAAEC,+BAAwB;AACrC,IAAA,kBAAkB,EAAEC,+BAAwB;AAC5C,IAAA,IAAI,EAAEC,iBAAU;AAChB,IAAA,IAAI,EAAEC,iBAAU;AAChB,IAAA,QAAQ,EAAEC,qBAAc;CACzB;AAED,MAAM,UAAU,GAAGC,gBAAU,CAC3B,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,aAAa,EACb,GAAG,UAAU,EACD,EACd,GAAG,KACD;IACF,IAAI,OAAO,KAAK,UAAU,EAAE;AAC1B,QAAA,QACEC,sBAAC,CAAA,aAAA,CAAAF,qBAAc,EAAC,EAAA,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAM,GAAA,UAAU,IAC3D,QAAQ,CACM;AAEpB;AAED,IAAA,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC;AAEzC,IAAA,MAAM,WAAW,GAAG,QAAQ,KAAK,SAAS;AAC1C,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ;AAC1B,IAAA,QACEE,sBAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,QAAQ,EAAA,GACjB,UAAU,EAAA;AAEb,QAAA,CAAC,WAAW,IAAI,OAAO,MACtBA,sBAAA,CAAA,aAAA,CAACC,kBAAW,EAAA,EAAA,UAAA,EACA,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,IAAI,EAC/C,KAAK,EAAE,aAAa,EAAA;AAEnB,YAAA,QAAQ,IAAI,QAAQ;YACpB,QAAQ,KAAK,SAAS,IAAI,QAAQ;AAClC,YAAA,QAAQ,IAAID,sBAAA,CAAA,aAAA,CAACE,yBAAY,EAAA,IAAA,CAAG,CACjB,CACf;QAEA,OAAO,KACNF,sBAAA,CAAA,aAAA,CAACG,qBAAc,EAAA,IAAA;AACb,YAAAH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAG,IAAA,CAAA,CACK,CAClB,CACa;AAEpB,CAAC,CACF;MAEY,MAAM,GAAGC,qBAAU,CAAC,UAAU;;;;"}

package/dist/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare const Button: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../hoc/withTokens").WithTokensProps & {
     children?: React.ReactNode;
     variant?: import("./types").ButtonVariant | undefined;
     size?: "base" | "sm" | undefined;
@@ -7,4 +7,4 @@ export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAtt
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
     contentStyles?: React.CSSProperties | undefined;
-} & React.RefAttributes<HTMLButtonElement>>;
+} & React.RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -1,5 +1,6 @@
 import React__default, { forwardRef } from 'react';
 import { Loader } from '../Loader/Loader.js';
+import { withTokens } from '../../hoc/withTokens/withTokens.js';
 import { UnstyledButton, MainContent, LoadingWrapper, DefaultButton, PrimaryButton, DefaultDestructiveButton, PrimaryDestructiveButton, FlatButton, LinkButton } from './components/styled.js';
 import { DropdownIcon } from '../../icons/custom/components/DropdownIcon.js';
 
@@ -12,7 +13,7 @@ const variantMap = {
     link: LinkButton,
     unstyled: UnstyledButton,
 };
-const Button = forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, contentStyles, ...otherProps }, ref) => {
+const ButtonBase = forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, contentStyles, ...otherProps }, ref) => {
     if (variant === 'unstyled') {
         return (React__default.createElement(UnstyledButton, { ref: ref, className: className, ...otherProps }, children));
     }
@@ -27,6 +28,7 @@ const Button = forwardRef(({ className, children, iconSlot, variant = 'default',
         loading && (React__default.createElement(LoadingWrapper, null,
             React__default.createElement(Loader, null)))));
 });
+const Button = withTokens(ButtonBase);
 
 export { Button };
 //# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\n\nimport {\n  DefaultButton,\n  DefaultDestructiveButton,\n  PrimaryButton,\n  PrimaryDestructiveButton,\n  FlatButton,\n  LinkButton,\n  UnstyledButton,\n  LoadingWrapper,\n  MainContent,\n} from './components/styled';\nimport { DropdownIcon } from '../../icons';\n\nconst variantMap = {\n  default: DefaultButton,\n  primary: PrimaryButton,\n  destructive: DefaultDestructiveButton,\n  primaryDestructive: PrimaryDestructiveButton,\n  flat: FlatButton,\n  link: LinkButton,\n  unstyled: UnstyledButton,\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      iconSlot,\n      variant = 'default',\n      size = 'base',\n      dropdown = false,\n      loading = false,\n      contentStyles,\n      ...otherProps\n    }: ButtonProps,\n    ref,\n  ) => {\n    if (variant === 'unstyled') {\n      return (\n        <UnstyledButton ref={ref} className={className} {...otherProps}>\n          {children}\n        </UnstyledButton>\n      );\n    }\n\n    const VariantButton = variantMap[variant];\n\n    const hasChildren = children !== undefined;\n    const hasIcon = !!iconSlot;\n    return (\n      <VariantButton\n        ref={ref}\n        className={className}\n        size={size}\n        hasText={hasChildren}\n        hasIcon={hasIcon}\n        hasDropdown={dropdown}\n        {...otherProps}\n      >\n        {(hasChildren || hasIcon) && (\n          <MainContent\n            $loading={loading}\n            hasText={!!children}\n            size={children || size === 'sm' ? 'base' : 'md'}\n            style={contentStyles}\n          >\n            {iconSlot && iconSlot}\n            {children !== undefined && children}\n            {dropdown && <DropdownIcon />}\n          </MainContent>\n        )}\n\n        {loading && (\n          <LoadingWrapper>\n            <Loader />\n          </LoadingWrapper>\n        )}\n      </VariantButton>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;AAkBA,MAAM,UAAU,GAAG;AACjB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,WAAW,EAAE,wBAAwB;AACrC,IAAA,kBAAkB,EAAE,wBAAwB;AAC5C,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,QAAQ,EAAE,cAAc;CACzB;AAEY,MAAA,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,aAAa,EACb,GAAG,UAAU,EACD,EACd,GAAG,KACD;IACF,IAAI,OAAO,KAAK,UAAU,EAAE;AAC1B,QAAA,QACEA,cAAC,CAAA,aAAA,CAAA,cAAc,EAAC,EAAA,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAM,GAAA,UAAU,IAC3D,QAAQ,CACM;AAEpB;AAED,IAAA,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC;AAEzC,IAAA,MAAM,WAAW,GAAG,QAAQ,KAAK,SAAS;AAC1C,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ;AAC1B,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,QAAQ,EAAA,GACjB,UAAU,EAAA;AAEb,QAAA,CAAC,WAAW,IAAI,OAAO,MACtBA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAA,UAAA,EACA,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,IAAI,EAC/C,KAAK,EAAE,aAAa,EAAA;AAEnB,YAAA,QAAQ,IAAI,QAAQ;YACpB,QAAQ,KAAK,SAAS,IAAI,QAAQ;AAClC,YAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,IAAA,CAAG,CACjB,CACf;QAEA,OAAO,KACNA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA;AACb,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAG,IAAA,CAAA,CACK,CAClB,CACa;AAEpB,CAAC;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\n\nimport {\n  DefaultButton,\n  DefaultDestructiveButton,\n  PrimaryButton,\n  PrimaryDestructiveButton,\n  FlatButton,\n  LinkButton,\n  UnstyledButton,\n  LoadingWrapper,\n  MainContent,\n} from './components/styled';\nimport { DropdownIcon } from '../../icons';\n\nconst variantMap = {\n  default: DefaultButton,\n  primary: PrimaryButton,\n  destructive: DefaultDestructiveButton,\n  primaryDestructive: PrimaryDestructiveButton,\n  flat: FlatButton,\n  link: LinkButton,\n  unstyled: UnstyledButton,\n};\n\nconst ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      iconSlot,\n      variant = 'default',\n      size = 'base',\n      dropdown = false,\n      loading = false,\n      contentStyles,\n      ...otherProps\n    }: ButtonProps,\n    ref,\n  ) => {\n    if (variant === 'unstyled') {\n      return (\n        <UnstyledButton ref={ref} className={className} {...otherProps}>\n          {children}\n        </UnstyledButton>\n      );\n    }\n\n    const VariantButton = variantMap[variant];\n\n    const hasChildren = children !== undefined;\n    const hasIcon = !!iconSlot;\n    return (\n      <VariantButton\n        ref={ref}\n        className={className}\n        size={size}\n        hasText={hasChildren}\n        hasIcon={hasIcon}\n        hasDropdown={dropdown}\n        {...otherProps}\n      >\n        {(hasChildren || hasIcon) && (\n          <MainContent\n            $loading={loading}\n            hasText={!!children}\n            size={children || size === 'sm' ? 'base' : 'md'}\n            style={contentStyles}\n          >\n            {iconSlot && iconSlot}\n            {children !== undefined && children}\n            {dropdown && <DropdownIcon />}\n          </MainContent>\n        )}\n\n        {loading && (\n          <LoadingWrapper>\n            <Loader />\n          </LoadingWrapper>\n        )}\n      </VariantButton>\n    );\n  },\n);\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["React"],"mappings":";;;;;;AAmBA,MAAM,UAAU,GAAG;AACjB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,WAAW,EAAE,wBAAwB;AACrC,IAAA,kBAAkB,EAAE,wBAAwB;AAC5C,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,QAAQ,EAAE,cAAc;CACzB;AAED,MAAM,UAAU,GAAG,UAAU,CAC3B,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,aAAa,EACb,GAAG,UAAU,EACD,EACd,GAAG,KACD;IACF,IAAI,OAAO,KAAK,UAAU,EAAE;AAC1B,QAAA,QACEA,cAAC,CAAA,aAAA,CAAA,cAAc,EAAC,EAAA,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAM,GAAA,UAAU,IAC3D,QAAQ,CACM;AAEpB;AAED,IAAA,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC;AAEzC,IAAA,MAAM,WAAW,GAAG,QAAQ,KAAK,SAAS;AAC1C,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ;AAC1B,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,QAAQ,EAAA,GACjB,UAAU,EAAA;AAEb,QAAA,CAAC,WAAW,IAAI,OAAO,MACtBA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAA,UAAA,EACA,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,IAAI,EAC/C,KAAK,EAAE,aAAa,EAAA;AAEnB,YAAA,QAAQ,IAAI,QAAQ;YACpB,QAAQ,KAAK,SAAS,IAAI,QAAQ;AAClC,YAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,IAAA,CAAG,CACjB,CACf;QAEA,OAAO,KACNA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA;AACb,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAG,IAAA,CAAA,CACK,CAClB,CACa;AAEpB,CAAC,CACF;MAEY,MAAM,GAAG,UAAU,CAAC,UAAU;;;;"}

package/dist/components/Button/components/styled.cjs

@@ -53,7 +53,7 @@ const BaseButton = styled__default.default.button.withConfig({ displayName: "vui
 }} &:hover{cursor:pointer;}&:disabled{pointer-events:none;cursor:unset !important;}`;
 const DefaultButton = styled__default.default(BaseButton).withConfig({ displayName: "vui--DefaultButton", componentId: "vui--1xzjfje" }) `border-color:${index.theme.colors.neutral.grey.dark};background-color:white;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);color:${({ hasText }) => hasText ? index.theme.colors.neutral.ink.base : index.theme.colors.secondary.blue.base};&:hover{background-color:${index.theme.colors.neutral.grey.lightest};}&:active{background-color:${index.theme.colors.neutral.grey.lightest};border-color:${index.theme.colors.secondary.blue.base};box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};outline:0;}&:disabled{box-shadow:none !important;background-color:${index.theme.colors.neutral.grey.base} !important;border-color:${index.theme.colors.neutral.grey.base} !important;color:${index.theme.colors.neutral.ink.light} !important;}`;
 const DefaultDestructiveButton = styled__default.default(DefaultButton).withConfig({ displayName: "vui--DefaultDestructiveButton", componentId: "vui--1ixaf03" }) `color:${index.theme.colors.secondary.red.base};&:hover{color:${index.theme.colors.secondary.red.dark};}&:active{border-color:${index.theme.colors.secondary.red.base};box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.red.light};color:${index.theme.colors.secondary.red.dark};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.red.light};}`;
-const PrimaryButton = styled__default.default(DefaultButton).withConfig({ displayName: "vui--PrimaryButton", componentId: "vui--16w0ufk" }) `background-color:${index.theme.colors.secondary.blue.base};border-color:${index.theme.colors.secondary.blue.base};color:white;&:hover{background-color:${index.theme.colors.secondary.blue.dark};border-color:${index.theme.colors.secondary.blue.dark};}&:active{background-color:${index.theme.colors.secondary.blue.dark};border-color:${index.theme.colors.secondary.blue.dark};box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};}`;
+const PrimaryButton = styled__default.default(DefaultButton).withConfig({ displayName: "vui--PrimaryButton", componentId: "vui--16w0ufk" }) `background-color:var(--theme-primary, ${index.theme.colors.secondary.blue.base});border-color:var(--theme-primary, ${index.theme.colors.secondary.blue.base});color:var(--theme-on-primary, white);&:hover{background-color:var(--theme-primary-hover, ${index.theme.colors.secondary.blue.dark});border-color:var(--theme-primary-hover, ${index.theme.colors.secondary.blue.dark});}&:active{background-color:var(--theme-primary-hover, ${index.theme.colors.secondary.blue.dark});border-color:var(--theme-primary-hover, ${index.theme.colors.secondary.blue.dark});box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};}`;
 const PrimaryDestructiveButton = styled__default.default(PrimaryButton).withConfig({ displayName: "vui--PrimaryDestructiveButton", componentId: "vui--1w3lv3r" }) `background-color:${index.theme.colors.secondary.red.base};border-color:${index.theme.colors.secondary.red.base};color:white;&:hover{background-color:${index.theme.colors.secondary.red.dark};border-color:${index.theme.colors.secondary.red.dark};}&:active{background-color:${index.theme.colors.secondary.red.dark};border-color:${index.theme.colors.secondary.red.dark};box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.red.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.red.light};}`;
 const FlatButton = styled__default.default(BaseButton).withConfig({ displayName: "vui--FlatButton", componentId: "vui--fqczse" }) `border-color:transparent;box-shadow:none;color:${index.theme.colors.neutral.ink.base};&:hover{background-color:${index.theme.colors.neutral.grey.light};}&:active{background-color:${index.theme.colors.neutral.grey.light};box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${index.theme.colors.secondary.blue.light};outline:0;}&:disabled{background-color:transparent;border-color:transparent;}`;
 const UnstyledButton = styled__default.default.button.withConfig({ displayName: "vui--UnstyledButton", componentId: "vui--1fxilc" }) `appearance:none;border:0;background-color:transparent;padding:0;font:inherit;&:hover{cursor:pointer;}`;

package/dist/components/Button/components/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Button/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\ninterface ButtonDisplayProps {\n  size: 'sm' | 'base';\n  hasText: boolean;\n  hasIcon: boolean;\n  hasDropdown: boolean;\n}\n\nexport const MainContent = styled.span<{\n  $loading?: boolean;\n  hasText: boolean;\n  size: 'base' | 'md';\n}>`\n  display: inline-flex;\n  align-items: center;\n\n  gap: ${({ hasText }) => (hasText ? '8px' : '4px')};\n  ${({ $loading }) => ($loading ? 'opacity: 0;' : null)};\n\n  svg {\n    width: ${({ size }) => sizes[size]};\n    height: ${({ size }) => sizes[size]};\n  }\n`;\n\nconst BaseButton = styled.button<ButtonDisplayProps>`\n  position: relative;\n  box-sizing: border-box;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-family: ${theme.fontFamily};\n  font-weight: 400;\n  border: 1px solid;\n  background-color: transparent;\n  white-space: nowrap;\n\n  ${(props) => {\n    let height = '40px';\n    let paddingLeft = '24px';\n    let paddingRight = '24px';\n    let borderRadius = '8px';\n    let fontSize = '16px';\n    let outlineWidth = '4px';\n\n    if (props.hasIcon) {\n      paddingLeft = '16px';\n    }\n\n    if (props.hasDropdown) {\n      paddingRight = '16px';\n    }\n\n    if (props.size === 'sm') {\n      height = '32px';\n      paddingLeft = '16px';\n      paddingRight = '16px';\n      borderRadius = '4px';\n      fontSize = '14px';\n      outlineWidth = '2px';\n\n      if (props.hasIcon) {\n        paddingLeft = '8px';\n      }\n\n      if (props.hasDropdown) {\n        paddingRight = '8px';\n      }\n    }\n\n    if (!props.hasText) {\n      paddingLeft = '8px';\n      paddingRight = '8px';\n    }\n\n    return `\n      --outline-width: ${outlineWidth};\n\n      height: ${height};\n      padding-left: ${paddingLeft};\n      padding-right: ${paddingRight};\n      border-radius: ${borderRadius};\n      font-size: ${fontSize};\n      line-height: ${fontSize};\n    `;\n  }}\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:disabled {\n    pointer-events: none;\n    cursor: unset !important;\n  }\n`;\n\nexport const DefaultButton = styled(BaseButton as any)`\n  border-color: ${theme.colors.neutral.grey.dark};\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n  color: ${({ hasText }) =>\n    hasText ? theme.colors.neutral.ink.base : theme.colors.secondary.blue.base};\n\n  &:hover {\n    background-color: ${theme.colors.neutral.grey.lightest};\n  }\n\n  &:active {\n    background-color: ${theme.colors.neutral.grey.lightest};\n    border-color: ${theme.colors.secondary.blue.base};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: ${theme.colors.neutral.grey.base} !important;\n    border-color: ${theme.colors.neutral.grey.base} !important;\n    color: ${theme.colors.neutral.ink.light} !important;\n  }\n`;\n\nexport const DefaultDestructiveButton = styled(DefaultButton as any)`\n  color: ${theme.colors.secondary.red.base};\n\n  &:hover {\n    color: ${theme.colors.secondary.red.dark};\n  }\n\n  &:active {\n    border-color: ${theme.colors.secondary.red.base};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n    color: ${theme.colors.secondary.red.dark};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n  }\n`;\n\nexport const PrimaryButton = styled(DefaultButton as any)`\n  background-color: ${theme.colors.secondary.blue.base};\n  border-color: ${theme.colors.secondary.blue.base};\n  color: white;\n\n  &:hover {\n    background-color: ${theme.colors.secondary.blue.dark};\n    border-color: ${theme.colors.secondary.blue.dark};\n  }\n\n  &:active {\n    background-color: ${theme.colors.secondary.blue.dark};\n    border-color: ${theme.colors.secondary.blue.dark};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n`;\n\nexport const PrimaryDestructiveButton = styled(PrimaryButton as any)`\n  background-color: ${theme.colors.secondary.red.base};\n  border-color: ${theme.colors.secondary.red.base};\n  color: white;\n\n  &:hover {\n    background-color: ${theme.colors.secondary.red.dark};\n    border-color: ${theme.colors.secondary.red.dark};\n  }\n\n  &:active {\n    background-color: ${theme.colors.secondary.red.dark};\n    border-color: ${theme.colors.secondary.red.dark};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n  }\n`;\n\nexport const FlatButton = styled(BaseButton as any)`\n  border-color: transparent;\n  box-shadow: none;\n  color: ${theme.colors.neutral.ink.base};\n\n  &:hover {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n\n  &:active {\n    background-color: ${theme.colors.neutral.grey.light};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n    outline: 0;\n  }\n\n  &:disabled {\n    background-color: transparent;\n    border-color: transparent;\n  }\n`;\n\nexport const UnstyledButton = styled.button`\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n\n  &:hover {\n    cursor: pointer;\n  }\n`;\n\nexport const LinkButton = styled(UnstyledButton)<ButtonDisplayProps>`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-family: ${theme.text.link.fontFamily};\n  font-size: ${theme.text.link.fontSize};\n  line-height: ${theme.text.link.fontSize};\n  font-weight: ${theme.text.link.fontWeight};\n  line-height: ${theme.text.link.lineHeight};\n  text-decoration: ${theme.text.link.textDecoration};\n  color: ${theme.colors.secondary.blue.base};\n\n  &:hover {\n    color: ${theme.colors.secondary.blue.dark};\n  }\n\n  & > * + * {\n    margin-left: ${theme.sizes.xs};\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow:\n      0 0 0 4px white,\n      0 0 0 8px ${theme.colors.secondary.blue.light};\n    border-radius: 4px;\n  }\n`;\n\nexport const LoadingWrapper = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n`;\n"],"names":["styled","sizes","theme"],"mappings":"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"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Button/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\ninterface ButtonDisplayProps {\n  size: 'sm' | 'base';\n  hasText: boolean;\n  hasIcon: boolean;\n  hasDropdown: boolean;\n}\n\nexport const MainContent = styled.span<{\n  $loading?: boolean;\n  hasText: boolean;\n  size: 'base' | 'md';\n}>`\n  display: inline-flex;\n  align-items: center;\n\n  gap: ${({ hasText }) => (hasText ? '8px' : '4px')};\n  ${({ $loading }) => ($loading ? 'opacity: 0;' : null)};\n\n  svg {\n    width: ${({ size }) => sizes[size]};\n    height: ${({ size }) => sizes[size]};\n  }\n`;\n\nconst BaseButton = styled.button<ButtonDisplayProps>`\n  position: relative;\n  box-sizing: border-box;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-family: ${theme.fontFamily};\n  font-weight: 400;\n  border: 1px solid;\n  background-color: transparent;\n  white-space: nowrap;\n\n  ${(props) => {\n    let height = '40px';\n    let paddingLeft = '24px';\n    let paddingRight = '24px';\n    let borderRadius = '8px';\n    let fontSize = '16px';\n    let outlineWidth = '4px';\n\n    if (props.hasIcon) {\n      paddingLeft = '16px';\n    }\n\n    if (props.hasDropdown) {\n      paddingRight = '16px';\n    }\n\n    if (props.size === 'sm') {\n      height = '32px';\n      paddingLeft = '16px';\n      paddingRight = '16px';\n      borderRadius = '4px';\n      fontSize = '14px';\n      outlineWidth = '2px';\n\n      if (props.hasIcon) {\n        paddingLeft = '8px';\n      }\n\n      if (props.hasDropdown) {\n        paddingRight = '8px';\n      }\n    }\n\n    if (!props.hasText) {\n      paddingLeft = '8px';\n      paddingRight = '8px';\n    }\n\n    return `\n      --outline-width: ${outlineWidth};\n\n      height: ${height};\n      padding-left: ${paddingLeft};\n      padding-right: ${paddingRight};\n      border-radius: ${borderRadius};\n      font-size: ${fontSize};\n      line-height: ${fontSize};\n    `;\n  }}\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:disabled {\n    pointer-events: none;\n    cursor: unset !important;\n  }\n`;\n\nexport const DefaultButton = styled(BaseButton as any)`\n  border-color: ${theme.colors.neutral.grey.dark};\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n  color: ${({ hasText }) =>\n    hasText ? theme.colors.neutral.ink.base : theme.colors.secondary.blue.base};\n\n  &:hover {\n    background-color: ${theme.colors.neutral.grey.lightest};\n  }\n\n  &:active {\n    background-color: ${theme.colors.neutral.grey.lightest};\n    border-color: ${theme.colors.secondary.blue.base};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: ${theme.colors.neutral.grey.base} !important;\n    border-color: ${theme.colors.neutral.grey.base} !important;\n    color: ${theme.colors.neutral.ink.light} !important;\n  }\n`;\n\nexport const DefaultDestructiveButton = styled(DefaultButton as any)`\n  color: ${theme.colors.secondary.red.base};\n\n  &:hover {\n    color: ${theme.colors.secondary.red.dark};\n  }\n\n  &:active {\n    border-color: ${theme.colors.secondary.red.base};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n    color: ${theme.colors.secondary.red.dark};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n  }\n`;\n\nexport const PrimaryButton = styled(DefaultButton as any)`\n  background-color: var(--theme-primary, ${theme.colors.secondary.blue.base});\n  border-color: var(--theme-primary, ${theme.colors.secondary.blue.base});\n  color: var(--theme-on-primary, white);\n\n  &:hover {\n    background-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n    border-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n  }\n\n  &:active {\n    background-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n    border-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n`;\n\nexport const PrimaryDestructiveButton = styled(PrimaryButton as any)`\n  background-color: ${theme.colors.secondary.red.base};\n  border-color: ${theme.colors.secondary.red.base};\n  color: white;\n\n  &:hover {\n    background-color: ${theme.colors.secondary.red.dark};\n    border-color: ${theme.colors.secondary.red.dark};\n  }\n\n  &:active {\n    background-color: ${theme.colors.secondary.red.dark};\n    border-color: ${theme.colors.secondary.red.dark};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n  }\n`;\n\nexport const FlatButton = styled(BaseButton as any)`\n  border-color: transparent;\n  box-shadow: none;\n  color: ${theme.colors.neutral.ink.base};\n\n  &:hover {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n\n  &:active {\n    background-color: ${theme.colors.neutral.grey.light};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n    outline: 0;\n  }\n\n  &:disabled {\n    background-color: transparent;\n    border-color: transparent;\n  }\n`;\n\nexport const UnstyledButton = styled.button`\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n\n  &:hover {\n    cursor: pointer;\n  }\n`;\n\nexport const LinkButton = styled(UnstyledButton)<ButtonDisplayProps>`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-family: ${theme.text.link.fontFamily};\n  font-size: ${theme.text.link.fontSize};\n  line-height: ${theme.text.link.fontSize};\n  font-weight: ${theme.text.link.fontWeight};\n  line-height: ${theme.text.link.lineHeight};\n  text-decoration: ${theme.text.link.textDecoration};\n  color: ${theme.colors.secondary.blue.base};\n\n  &:hover {\n    color: ${theme.colors.secondary.blue.dark};\n  }\n\n  & > * + * {\n    margin-left: ${theme.sizes.xs};\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow:\n      0 0 0 4px white,\n      0 0 0 8px ${theme.colors.secondary.blue.light};\n    border-radius: 4px;\n  }\n`;\n\nexport const LoadingWrapper = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n`;\n"],"names":["styled","sizes","theme"],"mappings":";;;;;;;;;;AAWO,MAAM,WAAW,GAAGA,uBAAM,CAAC,IAAI,CAQ7B,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2CAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC,CAAA,CAAA,EAC/C,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,aAAa,GAAG,IAAI,CAAC,CAAA,WAAA,EAG1C,CAAC,EAAE,IAAI,EAAE,KAAKC,WAAK,CAAC,IAAI,CAAC,CACxB,QAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAKA,WAAK,CAAC,IAAI,CAAC;AAIvC,MAAM,UAAU,GAAGD,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yIAAA,EAQfE,WAAK,CAAC,UAAU,CAAA,kFAAA,EAM7B,CAAC,KAAK,KAAI;IACV,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,WAAW,GAAG,MAAM;IACxB,IAAI,YAAY,GAAG,MAAM;IACzB,IAAI,YAAY,GAAG,KAAK;IACxB,IAAI,QAAQ,GAAG,MAAM;IACrB,IAAI,YAAY,GAAG,KAAK;IAExB,IAAI,KAAK,CAAC,OAAO,EAAE;QACjB,WAAW,GAAG,MAAM;AACrB;IAED,IAAI,KAAK,CAAC,WAAW,EAAE;QACrB,YAAY,GAAG,MAAM;AACtB;AAED,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,EAAE;QACvB,MAAM,GAAG,MAAM;QACf,WAAW,GAAG,MAAM;QACpB,YAAY,GAAG,MAAM;QACrB,YAAY,GAAG,KAAK;QACpB,QAAQ,GAAG,MAAM;QACjB,YAAY,GAAG,KAAK;QAEpB,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,WAAW,GAAG,KAAK;AACpB;QAED,IAAI,KAAK,CAAC,WAAW,EAAE;YACrB,YAAY,GAAG,KAAK;AACrB;AACF;AAED,IAAA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;QAClB,WAAW,GAAG,KAAK;QACnB,YAAY,GAAG,KAAK;AACrB;IAED,OAAO;yBACc,YAAY,CAAA;;gBAErB,MAAM,CAAA;sBACA,WAAW,CAAA;uBACV,YAAY,CAAA;uBACZ,YAAY,CAAA;mBAChB,QAAQ,CAAA;qBACN,QAAQ,CAAA;KACxB;AACH,CAAC,mFAUF;AAEM,MAAM,aAAa,GAAGF,uBAAM,CAAC,UAAiB,CAAC,CACpC,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAAAE,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,0EAAA,EAGrC,CAAC,EAAE,OAAO,EAAE,KACnB,OAAO,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAGA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAGtD,0BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAIlC,4BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,cAAA,EACtCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CACP,sCAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAIjC,uDAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,mEAAA,EAMtDA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,yBAAA,EAClCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACrC,kBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;AAIpC,MAAM,wBAAwB,GAAGF,uBAAM,CAAC,aAAoB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,+BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACzDE,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAG7B,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,wBAAA,EAIxBA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CACN,sCAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,OAAA,EAChEA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,0DAICA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK;AAIhE,MAAA,aAAa,GAAGF,uBAAM,CAAC,aAAoB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EACdE,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,uCACpCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,2FAAA,EAIpBA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,6CACpCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,wDAAA,EAI5BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,6CACpCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAClC,uCAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,uDAAA,EAIjCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAIjE,MAAA,wBAAwB,GAAGF,uBAAM,CAAC,aAAoB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,+BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAC9CE,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,iBACnCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,sCAAA,EAIzBA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,iBACnCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,4BAAA,EAI3BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,iBACnCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CACN,sCAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,uDAAA,EAIhCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK;AAIhE,MAAA,UAAU,GAAGF,uBAAM,CAAC,UAAiB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+CAAA,EAGxCE,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,0BAAA,EAGhBA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,4BAAA,EAI/BA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,sCAAA,EACVA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,uDAAA,EAIjCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,8EAAA;MAUjE,cAAc,GAAGF,uBAAM,CAAC,MAAM;MAY9B,UAAU,GAAGA,uBAAM,CAAC,cAAc,CAAC,CAK/B,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sEAAA,EAAAE,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,cAC5BA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,aAAA,EACtBA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CACxB,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,gBAC1BA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA,iBAAA,EACtBA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CACxC,OAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,eAAA,EAG9BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,2BAI1BA,WAAK,CAAC,KAAK,CAAC,EAAE,oEAOfA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,oBAAA;MAKtC,cAAc,GAAGF,uBAAM,CAAC,GAAG;;;;;;;;;;;;"}

package/dist/components/Button/components/styled.js

@@ -47,7 +47,7 @@ const BaseButton = styled.button.withConfig({ displayName: "vui--BaseButton", co
 }} &:hover{cursor:pointer;}&:disabled{pointer-events:none;cursor:unset !important;}`;
 const DefaultButton = styled(BaseButton).withConfig({ displayName: "vui--DefaultButton", componentId: "vui--1xzjfje" }) `border-color:${theme.colors.neutral.grey.dark};background-color:white;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);color:${({ hasText }) => hasText ? theme.colors.neutral.ink.base : theme.colors.secondary.blue.base};&:hover{background-color:${theme.colors.neutral.grey.lightest};}&:active{background-color:${theme.colors.neutral.grey.lightest};border-color:${theme.colors.secondary.blue.base};box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};outline:0;}&:disabled{box-shadow:none !important;background-color:${theme.colors.neutral.grey.base} !important;border-color:${theme.colors.neutral.grey.base} !important;color:${theme.colors.neutral.ink.light} !important;}`;
 const DefaultDestructiveButton = styled(DefaultButton).withConfig({ displayName: "vui--DefaultDestructiveButton", componentId: "vui--1ixaf03" }) `color:${theme.colors.secondary.red.base};&:hover{color:${theme.colors.secondary.red.dark};}&:active{border-color:${theme.colors.secondary.red.base};box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.red.light};color:${theme.colors.secondary.red.dark};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.red.light};}`;
-const PrimaryButton = styled(DefaultButton).withConfig({ displayName: "vui--PrimaryButton", componentId: "vui--16w0ufk" }) `background-color:${theme.colors.secondary.blue.base};border-color:${theme.colors.secondary.blue.base};color:white;&:hover{background-color:${theme.colors.secondary.blue.dark};border-color:${theme.colors.secondary.blue.dark};}&:active{background-color:${theme.colors.secondary.blue.dark};border-color:${theme.colors.secondary.blue.dark};box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};}`;
+const PrimaryButton = styled(DefaultButton).withConfig({ displayName: "vui--PrimaryButton", componentId: "vui--16w0ufk" }) `background-color:var(--theme-primary, ${theme.colors.secondary.blue.base});border-color:var(--theme-primary, ${theme.colors.secondary.blue.base});color:var(--theme-on-primary, white);&:hover{background-color:var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});border-color:var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});}&:active{background-color:var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});border-color:var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};}`;
 const PrimaryDestructiveButton = styled(PrimaryButton).withConfig({ displayName: "vui--PrimaryDestructiveButton", componentId: "vui--1w3lv3r" }) `background-color:${theme.colors.secondary.red.base};border-color:${theme.colors.secondary.red.base};color:white;&:hover{background-color:${theme.colors.secondary.red.dark};border-color:${theme.colors.secondary.red.dark};}&:active{background-color:${theme.colors.secondary.red.dark};border-color:${theme.colors.secondary.red.dark};box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.red.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.red.light};}`;
 const FlatButton = styled(BaseButton).withConfig({ displayName: "vui--FlatButton", componentId: "vui--fqczse" }) `border-color:transparent;box-shadow:none;color:${theme.colors.neutral.ink.base};&:hover{background-color:${theme.colors.neutral.grey.light};}&:active{background-color:${theme.colors.neutral.grey.light};box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};outline:0;}&:disabled{background-color:transparent;border-color:transparent;}`;
 const UnstyledButton = styled.button.withConfig({ displayName: "vui--UnstyledButton", componentId: "vui--1fxilc" }) `appearance:none;border:0;background-color:transparent;padding:0;font:inherit;&:hover{cursor:pointer;}`;

package/dist/components/Button/components/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/Button/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\ninterface ButtonDisplayProps {\n  size: 'sm' | 'base';\n  hasText: boolean;\n  hasIcon: boolean;\n  hasDropdown: boolean;\n}\n\nexport const MainContent = styled.span<{\n  $loading?: boolean;\n  hasText: boolean;\n  size: 'base' | 'md';\n}>`\n  display: inline-flex;\n  align-items: center;\n\n  gap: ${({ hasText }) => (hasText ? '8px' : '4px')};\n  ${({ $loading }) => ($loading ? 'opacity: 0;' : null)};\n\n  svg {\n    width: ${({ size }) => sizes[size]};\n    height: ${({ size }) => sizes[size]};\n  }\n`;\n\nconst BaseButton = styled.button<ButtonDisplayProps>`\n  position: relative;\n  box-sizing: border-box;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-family: ${theme.fontFamily};\n  font-weight: 400;\n  border: 1px solid;\n  background-color: transparent;\n  white-space: nowrap;\n\n  ${(props) => {\n    let height = '40px';\n    let paddingLeft = '24px';\n    let paddingRight = '24px';\n    let borderRadius = '8px';\n    let fontSize = '16px';\n    let outlineWidth = '4px';\n\n    if (props.hasIcon) {\n      paddingLeft = '16px';\n    }\n\n    if (props.hasDropdown) {\n      paddingRight = '16px';\n    }\n\n    if (props.size === 'sm') {\n      height = '32px';\n      paddingLeft = '16px';\n      paddingRight = '16px';\n      borderRadius = '4px';\n      fontSize = '14px';\n      outlineWidth = '2px';\n\n      if (props.hasIcon) {\n        paddingLeft = '8px';\n      }\n\n      if (props.hasDropdown) {\n        paddingRight = '8px';\n      }\n    }\n\n    if (!props.hasText) {\n      paddingLeft = '8px';\n      paddingRight = '8px';\n    }\n\n    return `\n      --outline-width: ${outlineWidth};\n\n      height: ${height};\n      padding-left: ${paddingLeft};\n      padding-right: ${paddingRight};\n      border-radius: ${borderRadius};\n      font-size: ${fontSize};\n      line-height: ${fontSize};\n    `;\n  }}\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:disabled {\n    pointer-events: none;\n    cursor: unset !important;\n  }\n`;\n\nexport const DefaultButton = styled(BaseButton as any)`\n  border-color: ${theme.colors.neutral.grey.dark};\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n  color: ${({ hasText }) =>\n    hasText ? theme.colors.neutral.ink.base : theme.colors.secondary.blue.base};\n\n  &:hover {\n    background-color: ${theme.colors.neutral.grey.lightest};\n  }\n\n  &:active {\n    background-color: ${theme.colors.neutral.grey.lightest};\n    border-color: ${theme.colors.secondary.blue.base};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: ${theme.colors.neutral.grey.base} !important;\n    border-color: ${theme.colors.neutral.grey.base} !important;\n    color: ${theme.colors.neutral.ink.light} !important;\n  }\n`;\n\nexport const DefaultDestructiveButton = styled(DefaultButton as any)`\n  color: ${theme.colors.secondary.red.base};\n\n  &:hover {\n    color: ${theme.colors.secondary.red.dark};\n  }\n\n  &:active {\n    border-color: ${theme.colors.secondary.red.base};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n    color: ${theme.colors.secondary.red.dark};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n  }\n`;\n\nexport const PrimaryButton = styled(DefaultButton as any)`\n  background-color: ${theme.colors.secondary.blue.base};\n  border-color: ${theme.colors.secondary.blue.base};\n  color: white;\n\n  &:hover {\n    background-color: ${theme.colors.secondary.blue.dark};\n    border-color: ${theme.colors.secondary.blue.dark};\n  }\n\n  &:active {\n    background-color: ${theme.colors.secondary.blue.dark};\n    border-color: ${theme.colors.secondary.blue.dark};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n`;\n\nexport const PrimaryDestructiveButton = styled(PrimaryButton as any)`\n  background-color: ${theme.colors.secondary.red.base};\n  border-color: ${theme.colors.secondary.red.base};\n  color: white;\n\n  &:hover {\n    background-color: ${theme.colors.secondary.red.dark};\n    border-color: ${theme.colors.secondary.red.dark};\n  }\n\n  &:active {\n    background-color: ${theme.colors.secondary.red.dark};\n    border-color: ${theme.colors.secondary.red.dark};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n  }\n`;\n\nexport const FlatButton = styled(BaseButton as any)`\n  border-color: transparent;\n  box-shadow: none;\n  color: ${theme.colors.neutral.ink.base};\n\n  &:hover {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n\n  &:active {\n    background-color: ${theme.colors.neutral.grey.light};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n    outline: 0;\n  }\n\n  &:disabled {\n    background-color: transparent;\n    border-color: transparent;\n  }\n`;\n\nexport const UnstyledButton = styled.button`\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n\n  &:hover {\n    cursor: pointer;\n  }\n`;\n\nexport const LinkButton = styled(UnstyledButton)<ButtonDisplayProps>`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-family: ${theme.text.link.fontFamily};\n  font-size: ${theme.text.link.fontSize};\n  line-height: ${theme.text.link.fontSize};\n  font-weight: ${theme.text.link.fontWeight};\n  line-height: ${theme.text.link.lineHeight};\n  text-decoration: ${theme.text.link.textDecoration};\n  color: ${theme.colors.secondary.blue.base};\n\n  &:hover {\n    color: ${theme.colors.secondary.blue.dark};\n  }\n\n  & > * + * {\n    margin-left: ${theme.sizes.xs};\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow:\n      0 0 0 4px white,\n      0 0 0 8px ${theme.colors.secondary.blue.light};\n    border-radius: 4px;\n  }\n`;\n\nexport const LoadingWrapper = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n`;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/Button/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\ninterface ButtonDisplayProps {\n  size: 'sm' | 'base';\n  hasText: boolean;\n  hasIcon: boolean;\n  hasDropdown: boolean;\n}\n\nexport const MainContent = styled.span<{\n  $loading?: boolean;\n  hasText: boolean;\n  size: 'base' | 'md';\n}>`\n  display: inline-flex;\n  align-items: center;\n\n  gap: ${({ hasText }) => (hasText ? '8px' : '4px')};\n  ${({ $loading }) => ($loading ? 'opacity: 0;' : null)};\n\n  svg {\n    width: ${({ size }) => sizes[size]};\n    height: ${({ size }) => sizes[size]};\n  }\n`;\n\nconst BaseButton = styled.button<ButtonDisplayProps>`\n  position: relative;\n  box-sizing: border-box;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-family: ${theme.fontFamily};\n  font-weight: 400;\n  border: 1px solid;\n  background-color: transparent;\n  white-space: nowrap;\n\n  ${(props) => {\n    let height = '40px';\n    let paddingLeft = '24px';\n    let paddingRight = '24px';\n    let borderRadius = '8px';\n    let fontSize = '16px';\n    let outlineWidth = '4px';\n\n    if (props.hasIcon) {\n      paddingLeft = '16px';\n    }\n\n    if (props.hasDropdown) {\n      paddingRight = '16px';\n    }\n\n    if (props.size === 'sm') {\n      height = '32px';\n      paddingLeft = '16px';\n      paddingRight = '16px';\n      borderRadius = '4px';\n      fontSize = '14px';\n      outlineWidth = '2px';\n\n      if (props.hasIcon) {\n        paddingLeft = '8px';\n      }\n\n      if (props.hasDropdown) {\n        paddingRight = '8px';\n      }\n    }\n\n    if (!props.hasText) {\n      paddingLeft = '8px';\n      paddingRight = '8px';\n    }\n\n    return `\n      --outline-width: ${outlineWidth};\n\n      height: ${height};\n      padding-left: ${paddingLeft};\n      padding-right: ${paddingRight};\n      border-radius: ${borderRadius};\n      font-size: ${fontSize};\n      line-height: ${fontSize};\n    `;\n  }}\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:disabled {\n    pointer-events: none;\n    cursor: unset !important;\n  }\n`;\n\nexport const DefaultButton = styled(BaseButton as any)`\n  border-color: ${theme.colors.neutral.grey.dark};\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n  color: ${({ hasText }) =>\n    hasText ? theme.colors.neutral.ink.base : theme.colors.secondary.blue.base};\n\n  &:hover {\n    background-color: ${theme.colors.neutral.grey.lightest};\n  }\n\n  &:active {\n    background-color: ${theme.colors.neutral.grey.lightest};\n    border-color: ${theme.colors.secondary.blue.base};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: ${theme.colors.neutral.grey.base} !important;\n    border-color: ${theme.colors.neutral.grey.base} !important;\n    color: ${theme.colors.neutral.ink.light} !important;\n  }\n`;\n\nexport const DefaultDestructiveButton = styled(DefaultButton as any)`\n  color: ${theme.colors.secondary.red.base};\n\n  &:hover {\n    color: ${theme.colors.secondary.red.dark};\n  }\n\n  &:active {\n    border-color: ${theme.colors.secondary.red.base};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n    color: ${theme.colors.secondary.red.dark};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n  }\n`;\n\nexport const PrimaryButton = styled(DefaultButton as any)`\n  background-color: var(--theme-primary, ${theme.colors.secondary.blue.base});\n  border-color: var(--theme-primary, ${theme.colors.secondary.blue.base});\n  color: var(--theme-on-primary, white);\n\n  &:hover {\n    background-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n    border-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n  }\n\n  &:active {\n    background-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n    border-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n`;\n\nexport const PrimaryDestructiveButton = styled(PrimaryButton as any)`\n  background-color: ${theme.colors.secondary.red.base};\n  border-color: ${theme.colors.secondary.red.base};\n  color: white;\n\n  &:hover {\n    background-color: ${theme.colors.secondary.red.dark};\n    border-color: ${theme.colors.secondary.red.dark};\n  }\n\n  &:active {\n    background-color: ${theme.colors.secondary.red.dark};\n    border-color: ${theme.colors.secondary.red.dark};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n  }\n`;\n\nexport const FlatButton = styled(BaseButton as any)`\n  border-color: transparent;\n  box-shadow: none;\n  color: ${theme.colors.neutral.ink.base};\n\n  &:hover {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n\n  &:active {\n    background-color: ${theme.colors.neutral.grey.light};\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n    outline: 0;\n  }\n\n  &:disabled {\n    background-color: transparent;\n    border-color: transparent;\n  }\n`;\n\nexport const UnstyledButton = styled.button`\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n\n  &:hover {\n    cursor: pointer;\n  }\n`;\n\nexport const LinkButton = styled(UnstyledButton)<ButtonDisplayProps>`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-family: ${theme.text.link.fontFamily};\n  font-size: ${theme.text.link.fontSize};\n  line-height: ${theme.text.link.fontSize};\n  font-weight: ${theme.text.link.fontWeight};\n  line-height: ${theme.text.link.lineHeight};\n  text-decoration: ${theme.text.link.textDecoration};\n  color: ${theme.colors.secondary.blue.base};\n\n  &:hover {\n    color: ${theme.colors.secondary.blue.dark};\n  }\n\n  & > * + * {\n    margin-left: ${theme.sizes.xs};\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow:\n      0 0 0 4px white,\n      0 0 0 8px ${theme.colors.secondary.blue.light};\n    border-radius: 4px;\n  }\n`;\n\nexport const LoadingWrapper = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n`;\n"],"names":[],"mappings":"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"}

package/dist/components/Button/types.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode, ButtonHTMLAttributes, ReactElement, CSSProperties } from 'react';
+import { WithTokensProps } from '../../hoc/withTokens/withTokens';
 export type ButtonVariant = 'default' | 'destructive' | 'primary' | 'primaryDestructive' | 'flat' | 'link' | 'unstyled';
 /**
  * Button properties.
  */
-export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithTokensProps & {
     children?: ReactNode;
     /** Variant styles */
     variant?: ButtonVariant;

package/dist/components/FeatureBanner/FeatureBanner.cjs

@@ -27,10 +27,10 @@ const FeatureBannerBase = ({ variant = 'primary', size = 'default', layout = 've
             React__default.default.createElement(FlexCol.FlexCol, { gap: "xs" },
                 React__default.default.createElement(Text.Text, { variant: "headingSmall" }, title),
                 contentSlot && React__default.default.createElement(FlexCol.FlexCol, { gap: size === 'default' ? 'sm' : 'xs' }, contentSlot)),
-            actions && actions.length > 0 && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "sm" }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.default.createElement(Button.Button, { key: label, size: "sm", variant: actionVariant, className: buildClassnames.buildClassnames([actionVariant === 'primary' && FeatureBanner_module.primaryAction]), ...actionProps }, label)))))),
+            actions && actions.length > 0 && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "sm" }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.default.createElement(Button.Button, { key: label, size: "sm", variant: actionVariant, ...actionProps }, label)))))),
         onClose && (React__default.default.createElement(Button.Button, { variant: "flat", size: "sm", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClose, "aria-label": "Close banner" }))));
 };
-const FeatureBanner = withTokens.withTokens(FeatureBannerBase);
+const FeatureBanner = withTokens.withTokens(FeatureBannerBase, 'default');
 
 exports.FeatureBanner = FeatureBanner;
 //# sourceMappingURL=FeatureBanner.cjs.map

package/dist/components/FeatureBanner/FeatureBanner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureBanner.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { withTokens } from '../../hoc/withTokens';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { FeatureBannerProps } from './types';\n\nimport styles from './FeatureBanner.module.scss';\n\nconst FeatureBannerBase = ({\n  variant = 'primary',\n  size = 'default',\n  layout = 'vertical',\n  title,\n  contentSlot,\n  iconSlot,\n  actions,\n  onClose,\n  className,\n  ...divProps\n}: FeatureBannerProps) => {\n  return (\n    <FlexRow\n      flexWrap=\"nowrap\"\n      alignItems={layout === 'horizontal' ? 'center' : 'flex-start'}\n      justifyContent=\"space-between\"\n      gap=\"none\"\n      className={buildClassnames([\n        styles.featureBanner,\n        styles[`${size}-size`],\n        styles[`${variant}-variant`],\n        className,\n      ])}\n      role=\"region\"\n      aria-label={title}\n      {...divProps}\n    >\n      {iconSlot && <div className={styles.iconBackground}>{iconSlot}</div>}\n\n      <FlexCol gap=\"sm\" flexGrow=\"1\" className={styles[layout]}>\n        <FlexCol gap=\"xs\">\n          <Text variant=\"headingSmall\">{title}</Text>\n\n          {contentSlot && <FlexCol gap={size === 'default' ? 'sm' : 'xs'}>{contentSlot}</FlexCol>}\n        </FlexCol>\n\n        {actions && actions.length > 0 && (\n          <FlexRow flexWrap=\"nowrap\" gap=\"sm\">\n            {actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (\n              <Button\n                key={label}\n                size=\"sm\"\n                variant={actionVariant}\n                className={buildClassnames([actionVariant === 'primary' && styles.primaryAction])}\n                {...actionProps}\n              >\n                {label}\n              </Button>\n            ))}\n          </FlexRow>\n        )}\n      </FlexCol>\n\n      {onClose && (\n        <Button\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClose}\n          aria-label=\"Close banner\"\n        />\n      )}\n    </FlexRow>\n  );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase);\n"],"names":["React","FlexRow","buildClassnames","styles","FlexCol","Text","Button","CrossIcon","withTokens"],"mappings":";;;;;;;;;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,UAAU,EACnB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACQ,KAAI;AACvB,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAE,MAAM,KAAK,YAAY,GAAG,QAAQ,GAAG,YAAY,EAC7D,cAAc,EAAC,eAAe,EAC9B,GAAG,EAAC,MAAM,EACV,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,oBAAM,CAAC,aAAa;AACpB,YAAAA,oBAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAAA,oBAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;YAC5B,SAAS;AACV,SAAA,CAAC,EACF,IAAI,EAAC,QAAQ,EACD,YAAA,EAAA,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIH,8CAAK,SAAS,EAAEG,oBAAM,CAAC,cAAc,EAAG,EAAA,QAAQ,CAAO;AAEpE,QAAAH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAED,oBAAM,CAAC,MAAM,CAAC,EAAA;AACtD,YAAAH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,SAAI,EAAC,EAAA,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIL,qCAACI,eAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,EAAG,EAAA,WAAW,CAAW,CAC/E;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BJ,sBAAC,CAAA,aAAA,CAAAC,eAAO,IAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAChC,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzED,sBAAA,CAAA,aAAA,CAACM,aAAM,EACL,EAAA,GAAG,EAAE,KAAK,EACV,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,aAAa,EACtB,SAAS,EAAEJ,+BAAe,CAAC,CAAC,aAAa,KAAK,SAAS,IAAIC,oBAAM,CAAC,aAAa,CAAC,CAAC,EAC7E,GAAA,WAAW,IAEd,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;AAET,QAAA,OAAO,KACNH,sBAAC,CAAA,aAAA,CAAAM,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEN,sBAAA,CAAA,aAAA,CAACO,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EACL,YAAA,EAAA,cAAc,EACzB,CAAA,CACH,CACO;AAEd,CAAC;MAEY,aAAa,GAAGC,qBAAU,CAAC,iBAAiB;;;;"}
+{"version":3,"file":"FeatureBanner.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { withTokens } from '../../hoc/withTokens';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { FeatureBannerProps } from './types';\n\nimport styles from './FeatureBanner.module.scss';\n\nconst FeatureBannerBase = ({\n  variant = 'primary',\n  size = 'default',\n  layout = 'vertical',\n  title,\n  contentSlot,\n  iconSlot,\n  actions,\n  onClose,\n  className,\n  ...divProps\n}: FeatureBannerProps) => {\n  return (\n    <FlexRow\n      flexWrap=\"nowrap\"\n      alignItems={layout === 'horizontal' ? 'center' : 'flex-start'}\n      justifyContent=\"space-between\"\n      gap=\"none\"\n      className={buildClassnames([\n        styles.featureBanner,\n        styles[`${size}-size`],\n        styles[`${variant}-variant`],\n        className,\n      ])}\n      role=\"region\"\n      aria-label={title}\n      {...divProps}\n    >\n      {iconSlot && <div className={styles.iconBackground}>{iconSlot}</div>}\n\n      <FlexCol gap=\"sm\" flexGrow=\"1\" className={styles[layout]}>\n        <FlexCol gap=\"xs\">\n          <Text variant=\"headingSmall\">{title}</Text>\n\n          {contentSlot && <FlexCol gap={size === 'default' ? 'sm' : 'xs'}>{contentSlot}</FlexCol>}\n        </FlexCol>\n\n        {actions && actions.length > 0 && (\n          <FlexRow flexWrap=\"nowrap\" gap=\"sm\">\n            {actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (\n              <Button key={label} size=\"sm\" variant={actionVariant} {...actionProps}>\n                {label}\n              </Button>\n            ))}\n          </FlexRow>\n        )}\n      </FlexCol>\n\n      {onClose && (\n        <Button\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClose}\n          aria-label=\"Close banner\"\n        />\n      )}\n    </FlexRow>\n  );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase, 'default');\n"],"names":["React","FlexRow","buildClassnames","styles","FlexCol","Text","Button","CrossIcon","withTokens"],"mappings":";;;;;;;;;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,UAAU,EACnB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACQ,KAAI;AACvB,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAE,MAAM,KAAK,YAAY,GAAG,QAAQ,GAAG,YAAY,EAC7D,cAAc,EAAC,eAAe,EAC9B,GAAG,EAAC,MAAM,EACV,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,oBAAM,CAAC,aAAa;AACpB,YAAAA,oBAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAAA,oBAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;YAC5B,SAAS;AACV,SAAA,CAAC,EACF,IAAI,EAAC,QAAQ,EACD,YAAA,EAAA,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIH,8CAAK,SAAS,EAAEG,oBAAM,CAAC,cAAc,EAAG,EAAA,QAAQ,CAAO;AAEpE,QAAAH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAED,oBAAM,CAAC,MAAM,CAAC,EAAA;AACtD,YAAAH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,SAAI,EAAC,EAAA,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIL,qCAACI,eAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,EAAG,EAAA,WAAW,CAAW,CAC/E;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BJ,sBAAC,CAAA,aAAA,CAAAC,eAAO,EAAC,EAAA,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAChC,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzED,sBAAA,CAAA,aAAA,CAACM,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,aAAa,EAAM,GAAA,WAAW,EAClE,EAAA,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;AAET,QAAA,OAAO,KACNN,sBAAC,CAAA,aAAA,CAAAM,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEN,sBAAA,CAAA,aAAA,CAACO,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EACL,YAAA,EAAA,cAAc,EACzB,CAAA,CACH,CACO;AAEd,CAAC;AAEY,MAAA,aAAa,GAAGC,qBAAU,CAAC,iBAAiB,EAAE,SAAS;;;;"}

package/dist/components/FeatureBanner/FeatureBanner.d.ts

@@ -1,14 +1,11 @@
 import React from 'react';
-export declare const FeatureBanner: {
-    ({ theme, ...props }: Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & import("../../hoc/withTokens").WithTokensProps & {
-        variant?: import("./types").FeatureBannerVariant | undefined;
-        size?: import("./types").FeatureBannerSize | undefined;
-        layout?: import("./types").FeatureBannerLayout | undefined;
-        title: string;
-        contentSlot?: React.ReactNode;
-        iconSlot?: React.ReactNode;
-        actions?: import("./types").FeatureBannerAction[] | undefined;
-        onClose?: (() => void) | undefined;
-    }): React.JSX.Element;
-    displayName: string;
-};
+export declare const FeatureBanner: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & import("../../hoc/withTokens").WithTokensProps & {
+    variant?: import("./types").FeatureBannerVariant | undefined;
+    size?: import("./types").FeatureBannerSize | undefined;
+    layout?: import("./types").FeatureBannerLayout | undefined;
+    title: string;
+    contentSlot?: React.ReactNode;
+    iconSlot?: React.ReactNode;
+    actions?: import("./types").FeatureBannerAction[] | undefined;
+    onClose?: (() => void) | undefined;
+} & React.RefAttributes<never>>;

package/dist/components/FeatureBanner/FeatureBanner.js

@@ -21,10 +21,10 @@ const FeatureBannerBase = ({ variant = 'primary', size = 'default', layout = 've
             React__default.createElement(FlexCol, { gap: "xs" },
                 React__default.createElement(Text, { variant: "headingSmall" }, title),
                 contentSlot && React__default.createElement(FlexCol, { gap: size === 'default' ? 'sm' : 'xs' }, contentSlot)),
-            actions && actions.length > 0 && (React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "sm" }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.createElement(Button, { key: label, size: "sm", variant: actionVariant, className: buildClassnames([actionVariant === 'primary' && styles.primaryAction]), ...actionProps }, label)))))),
+            actions && actions.length > 0 && (React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "sm" }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.createElement(Button, { key: label, size: "sm", variant: actionVariant, ...actionProps }, label)))))),
         onClose && (React__default.createElement(Button, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClose, "aria-label": "Close banner" }))));
 };
-const FeatureBanner = withTokens(FeatureBannerBase);
+const FeatureBanner = withTokens(FeatureBannerBase, 'default');
 
 export { FeatureBanner };
 //# sourceMappingURL=FeatureBanner.js.map

package/dist/components/FeatureBanner/FeatureBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureBanner.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { withTokens } from '../../hoc/withTokens';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { FeatureBannerProps } from './types';\n\nimport styles from './FeatureBanner.module.scss';\n\nconst FeatureBannerBase = ({\n  variant = 'primary',\n  size = 'default',\n  layout = 'vertical',\n  title,\n  contentSlot,\n  iconSlot,\n  actions,\n  onClose,\n  className,\n  ...divProps\n}: FeatureBannerProps) => {\n  return (\n    <FlexRow\n      flexWrap=\"nowrap\"\n      alignItems={layout === 'horizontal' ? 'center' : 'flex-start'}\n      justifyContent=\"space-between\"\n      gap=\"none\"\n      className={buildClassnames([\n        styles.featureBanner,\n        styles[`${size}-size`],\n        styles[`${variant}-variant`],\n        className,\n      ])}\n      role=\"region\"\n      aria-label={title}\n      {...divProps}\n    >\n      {iconSlot && <div className={styles.iconBackground}>{iconSlot}</div>}\n\n      <FlexCol gap=\"sm\" flexGrow=\"1\" className={styles[layout]}>\n        <FlexCol gap=\"xs\">\n          <Text variant=\"headingSmall\">{title}</Text>\n\n          {contentSlot && <FlexCol gap={size === 'default' ? 'sm' : 'xs'}>{contentSlot}</FlexCol>}\n        </FlexCol>\n\n        {actions && actions.length > 0 && (\n          <FlexRow flexWrap=\"nowrap\" gap=\"sm\">\n            {actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (\n              <Button\n                key={label}\n                size=\"sm\"\n                variant={actionVariant}\n                className={buildClassnames([actionVariant === 'primary' && styles.primaryAction])}\n                {...actionProps}\n              >\n                {label}\n              </Button>\n            ))}\n          </FlexRow>\n        )}\n      </FlexCol>\n\n      {onClose && (\n        <Button\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClose}\n          aria-label=\"Close banner\"\n        />\n      )}\n    </FlexRow>\n  );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase);\n"],"names":["React"],"mappings":";;;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,UAAU,EACnB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACQ,KAAI;AACvB,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAE,MAAM,KAAK,YAAY,GAAG,QAAQ,GAAG,YAAY,EAC7D,cAAc,EAAC,eAAe,EAC9B,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,aAAa;AACpB,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,MAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;YAC5B,SAAS;AACV,SAAA,CAAC,EACF,IAAI,EAAC,QAAQ,EACD,YAAA,EAAA,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIA,sCAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAG,EAAA,QAAQ,CAAO;AAEpE,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,EAAA;AACtD,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIA,6BAAC,OAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,EAAG,EAAA,WAAW,CAAW,CAC/E;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAChC,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzEA,cAAA,CAAA,aAAA,CAAC,MAAM,EACL,EAAA,GAAG,EAAE,KAAK,EACV,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,KAAK,SAAS,IAAI,MAAM,CAAC,aAAa,CAAC,CAAC,EAC7E,GAAA,WAAW,IAEd,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;AAET,QAAA,OAAO,KACNA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EACL,YAAA,EAAA,cAAc,EACzB,CAAA,CACH,CACO;AAEd,CAAC;MAEY,aAAa,GAAG,UAAU,CAAC,iBAAiB;;;;"}
+{"version":3,"file":"FeatureBanner.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { withTokens } from '../../hoc/withTokens';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { FeatureBannerProps } from './types';\n\nimport styles from './FeatureBanner.module.scss';\n\nconst FeatureBannerBase = ({\n  variant = 'primary',\n  size = 'default',\n  layout = 'vertical',\n  title,\n  contentSlot,\n  iconSlot,\n  actions,\n  onClose,\n  className,\n  ...divProps\n}: FeatureBannerProps) => {\n  return (\n    <FlexRow\n      flexWrap=\"nowrap\"\n      alignItems={layout === 'horizontal' ? 'center' : 'flex-start'}\n      justifyContent=\"space-between\"\n      gap=\"none\"\n      className={buildClassnames([\n        styles.featureBanner,\n        styles[`${size}-size`],\n        styles[`${variant}-variant`],\n        className,\n      ])}\n      role=\"region\"\n      aria-label={title}\n      {...divProps}\n    >\n      {iconSlot && <div className={styles.iconBackground}>{iconSlot}</div>}\n\n      <FlexCol gap=\"sm\" flexGrow=\"1\" className={styles[layout]}>\n        <FlexCol gap=\"xs\">\n          <Text variant=\"headingSmall\">{title}</Text>\n\n          {contentSlot && <FlexCol gap={size === 'default' ? 'sm' : 'xs'}>{contentSlot}</FlexCol>}\n        </FlexCol>\n\n        {actions && actions.length > 0 && (\n          <FlexRow flexWrap=\"nowrap\" gap=\"sm\">\n            {actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (\n              <Button key={label} size=\"sm\" variant={actionVariant} {...actionProps}>\n                {label}\n              </Button>\n            ))}\n          </FlexRow>\n        )}\n      </FlexCol>\n\n      {onClose && (\n        <Button\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClose}\n          aria-label=\"Close banner\"\n        />\n      )}\n    </FlexRow>\n  );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase, 'default');\n"],"names":["React"],"mappings":";;;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,UAAU,EACnB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACQ,KAAI;AACvB,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAE,MAAM,KAAK,YAAY,GAAG,QAAQ,GAAG,YAAY,EAC7D,cAAc,EAAC,eAAe,EAC9B,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,aAAa;AACpB,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,MAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;YAC5B,SAAS;AACV,SAAA,CAAC,EACF,IAAI,EAAC,QAAQ,EACD,YAAA,EAAA,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIA,sCAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAG,EAAA,QAAQ,CAAO;AAEpE,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,EAAA;AACtD,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIA,6BAAC,OAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,EAAG,EAAA,WAAW,CAAW,CAC/E;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAChC,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,aAAa,EAAM,GAAA,WAAW,EAClE,EAAA,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;AAET,QAAA,OAAO,KACNA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EACL,YAAA,EAAA,cAAc,EACzB,CAAA,CACH,CACO;AAEd,CAAC;AAEY,MAAA,aAAa,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS;;;;"}

package/dist/components/FeatureBanner/FeatureBanner.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._featureBanner_dh7ox_1 {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n}\n\n/* Sizes */\n._default-size_dh7ox_9 {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-md);\n}\n\n._sm-size_dh7ox_15 {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n._xs-size_dh7ox_21 {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n/* Variants */\n._primary-variant_dh7ox_28 {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n._secondary-variant_dh7ox_34 {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-accent);\n  border: none;\n}\n\n/* Layout */\n._vertical_dh7ox_42 {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n}\n\n._horizontal_dh7ox_48 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n}\n\n/* Icon background */\n._iconBackground_dh7ox_56 {\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n  padding: var(--sizes-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n._iconBackground_dh7ox_56 > svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}\n\n/* Primary action button theme override */\n._primaryAction_dh7ox_73._primaryAction_dh7ox_73 {\n  background-color: var(--theme-primary);\n  border-color: var(--theme-primary);\n  color: var(--theme-on-primary);\n}\n._primaryAction_dh7ox_73._primaryAction_dh7ox_73:hover {\n  background-color: var(--theme-primary-hover);\n  border-color: var(--theme-primary-hover);\n}\n._primaryAction_dh7ox_73._primaryAction_dh7ox_73:active {\n  background-color: var(--theme-primary-hover);\n  border-color: var(--theme-primary-hover);\n}");
-var styles = {"featureBanner":"_featureBanner_dh7ox_1","default-size":"_default-size_dh7ox_9","sm-size":"_sm-size_dh7ox_15","xs-size":"_xs-size_dh7ox_21","primary-variant":"_primary-variant_dh7ox_28","secondary-variant":"_secondary-variant_dh7ox_34","vertical":"_vertical_dh7ox_42","horizontal":"_horizontal_dh7ox_48","iconBackground":"_iconBackground_dh7ox_56","primaryAction":"_primaryAction_dh7ox_73"};
+___$insertStyle("._featureBanner_137qn_1 {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n}\n\n/* Sizes */\n._default-size_137qn_9 {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-md);\n}\n\n._sm-size_137qn_15 {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n._xs-size_137qn_21 {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n/* Variants */\n._primary-variant_137qn_28 {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n._secondary-variant_137qn_34 {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n  border: none;\n}\n\n/* Layout */\n._vertical_137qn_42 {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n}\n\n._horizontal_137qn_48 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n}\n\n/* Icon background */\n._iconBackground_137qn_56 {\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n  padding: var(--sizes-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n._iconBackground_137qn_56 > svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}");
+var styles = {"featureBanner":"_featureBanner_137qn_1","default-size":"_default-size_137qn_9","sm-size":"_sm-size_137qn_15","xs-size":"_xs-size_137qn_21","primary-variant":"_primary-variant_137qn_28","secondary-variant":"_secondary-variant_137qn_34","vertical":"_vertical_137qn_42","horizontal":"_horizontal_137qn_48","iconBackground":"_iconBackground_137qn_56"};
 
 module.exports = styles;
 //# sourceMappingURL=FeatureBanner.module.scss.cjs.map

package/dist/components/FeatureBanner/FeatureBanner.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureBanner.module.scss.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":[".featureBanner {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n}\n\n/* Sizes */\n.default-size {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-md);\n}\n\n.sm-size {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n.xs-size {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n/* Variants */\n.primary-variant {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n.secondary-variant {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-accent);\n  border: none;\n}\n\n/* Layout */\n.vertical {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n}\n\n.horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n}\n\n/* Icon background */\n.iconBackground {\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n  padding: var(--sizes-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.iconBackground > svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}\n\n/* Primary action button theme override */\n.primaryAction.primaryAction {\n  background-color: var(--theme-primary);\n  border-color: var(--theme-primary);\n  color: var(--theme-on-primary);\n\n  &:hover {\n    background-color: var(--theme-primary-hover);\n    border-color: var(--theme-primary-hover);\n  }\n\n  &:active {\n    background-color: var(--theme-primary-hover);\n    border-color: var(--theme-primary-hover);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,kpEAAA;AACA,aAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,yBAAA;;;;"}
+{"version":3,"file":"FeatureBanner.module.scss.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":[".featureBanner {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n}\n\n/* Sizes */\n.default-size {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-md);\n}\n\n.sm-size {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n.xs-size {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n/* Variants */\n.primary-variant {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n.secondary-variant {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n  border: none;\n}\n\n/* Layout */\n.vertical {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n}\n\n.horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n}\n\n/* Icon background */\n.iconBackground {\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n  padding: var(--sizes-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.iconBackground > svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,koDAAA;AACA,aAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,gBAAA,CAAA,0BAAA;;;;"}

package/dist/components/FeatureBanner/FeatureBanner.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._featureBanner_dh7ox_1 {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n}\n\n/* Sizes */\n._default-size_dh7ox_9 {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-md);\n}\n\n._sm-size_dh7ox_15 {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n._xs-size_dh7ox_21 {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n/* Variants */\n._primary-variant_dh7ox_28 {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n._secondary-variant_dh7ox_34 {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-accent);\n  border: none;\n}\n\n/* Layout */\n._vertical_dh7ox_42 {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n}\n\n._horizontal_dh7ox_48 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n}\n\n/* Icon background */\n._iconBackground_dh7ox_56 {\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n  padding: var(--sizes-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n._iconBackground_dh7ox_56 > svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}\n\n/* Primary action button theme override */\n._primaryAction_dh7ox_73._primaryAction_dh7ox_73 {\n  background-color: var(--theme-primary);\n  border-color: var(--theme-primary);\n  color: var(--theme-on-primary);\n}\n._primaryAction_dh7ox_73._primaryAction_dh7ox_73:hover {\n  background-color: var(--theme-primary-hover);\n  border-color: var(--theme-primary-hover);\n}\n._primaryAction_dh7ox_73._primaryAction_dh7ox_73:active {\n  background-color: var(--theme-primary-hover);\n  border-color: var(--theme-primary-hover);\n}");
-var styles = {"featureBanner":"_featureBanner_dh7ox_1","default-size":"_default-size_dh7ox_9","sm-size":"_sm-size_dh7ox_15","xs-size":"_xs-size_dh7ox_21","primary-variant":"_primary-variant_dh7ox_28","secondary-variant":"_secondary-variant_dh7ox_34","vertical":"_vertical_dh7ox_42","horizontal":"_horizontal_dh7ox_48","iconBackground":"_iconBackground_dh7ox_56","primaryAction":"_primaryAction_dh7ox_73"};
+insertStyle("._featureBanner_137qn_1 {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n}\n\n/* Sizes */\n._default-size_137qn_9 {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-md);\n}\n\n._sm-size_137qn_15 {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n._xs-size_137qn_21 {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n/* Variants */\n._primary-variant_137qn_28 {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n._secondary-variant_137qn_34 {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n  border: none;\n}\n\n/* Layout */\n._vertical_137qn_42 {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n}\n\n._horizontal_137qn_48 {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n}\n\n/* Icon background */\n._iconBackground_137qn_56 {\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n  padding: var(--sizes-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n._iconBackground_137qn_56 > svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}");
+var styles = {"featureBanner":"_featureBanner_137qn_1","default-size":"_default-size_137qn_9","sm-size":"_sm-size_137qn_15","xs-size":"_xs-size_137qn_21","primary-variant":"_primary-variant_137qn_28","secondary-variant":"_secondary-variant_137qn_34","vertical":"_vertical_137qn_42","horizontal":"_horizontal_137qn_48","iconBackground":"_iconBackground_137qn_56"};
 
 export { styles as default };
 //# sourceMappingURL=FeatureBanner.module.scss.js.map

package/dist/components/FeatureBanner/FeatureBanner.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureBanner.module.scss.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":[".featureBanner {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n}\n\n/* Sizes */\n.default-size {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-md);\n}\n\n.sm-size {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n.xs-size {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n/* Variants */\n.primary-variant {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n.secondary-variant {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-accent);\n  border: none;\n}\n\n/* Layout */\n.vertical {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n}\n\n.horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n}\n\n/* Icon background */\n.iconBackground {\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n  padding: var(--sizes-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.iconBackground > svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}\n\n/* Primary action button theme override */\n.primaryAction.primaryAction {\n  background-color: var(--theme-primary);\n  border-color: var(--theme-primary);\n  color: var(--theme-on-primary);\n\n  &:hover {\n    background-color: var(--theme-primary-hover);\n    border-color: var(--theme-primary-hover);\n  }\n\n  &:active {\n    background-color: var(--theme-primary-hover);\n    border-color: var(--theme-primary-hover);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,kpEAAA;AACA,aAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,yBAAA;;;;"}
+{"version":3,"file":"FeatureBanner.module.scss.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":[".featureBanner {\n  border: var(--sizes-line) solid var(--theme-surface-alt);\n  border-radius: var(--radius-base);\n  background-color: var(--feature-banner-bg);\n  padding: var(--banner-padding);\n}\n\n/* Sizes */\n.default-size {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-md);\n}\n\n.sm-size {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n.xs-size {\n  --banner-padding: var(--sizes-sm);\n  --content-padding: 8px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n/* Variants */\n.primary-variant {\n  --feature-banner-bg: var(--theme-surface);\n  --icon-bg-color: var(--theme-primary);\n  --icon-color: var(--theme-on-primary);\n}\n\n.secondary-variant {\n  --feature-banner-bg: var(--theme-surface-secondary);\n  --icon-bg-color: var(--theme-surface);\n  --icon-color: var(--theme-primary);\n  border: none;\n}\n\n/* Layout */\n.vertical {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n}\n\n.horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: var(--content-padding);\n}\n\n/* Icon background */\n.iconBackground {\n  border-radius: var(--radius-base);\n  background-color: var(--icon-bg-color);\n  padding: var(--sizes-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.iconBackground > svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,koDAAA;AACA,aAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,gBAAA,CAAA,0BAAA;;;;"}

package/dist/components/Pagination/styled.d.ts

@@ -6,7 +6,7 @@ export declare const PageLimitContainer: import("styled-components").StyledCompo
     flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const PaginationButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare const PaginationButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("../../hoc/withTokens").WithTokensProps & {
     children?: import("react").ReactNode;
     variant?: import("../Button/types").ButtonVariant | undefined;
     size?: "base" | "sm" | undefined;
@@ -14,7 +14,7 @@ export declare const PaginationButton: import("styled-components").StyledCompone
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
     contentStyles?: import("react").CSSProperties | undefined;
-} & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+} & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export declare const PageInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<{
     form?: string | undefined;
     slot?: string | undefined;

package/dist/components/TokenProvider/TokenProvider.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._default_1f5az_1 {\n  --theme-surface: var(--colors-secondary-blue-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text-primary: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-accent: var(--colors-secondary-blue-dark);\n  --theme-accent: var(--colors-secondary-blue-base);\n  --theme-primary: var(--colors-secondary-blue-base);\n  --theme-primary-hover: var(--colors-secondary-blue-dark);\n  --theme-on-primary: #ffffff;\n}\n\n._purple_1f5az_15 {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text-primary: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-accent: var(--colors-secondary-purple-dark);\n  --theme-accent: var(--colors-secondary-purple-dark);\n  --theme-primary: var(--colors-secondary-purple-base);\n  --theme-primary-hover: var(--colors-secondary-purple-dark);\n  --theme-on-primary: #ffffff;\n}\n\n._teal_1f5az_29 {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text-primary: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-accent: var(--colors-secondary-teal-dark);\n  --theme-accent: var(--colors-secondary-teal-dark);\n  --theme-primary: var(--colors-secondary-teal-base);\n  --theme-primary-hover: var(--colors-secondary-teal-dark);\n  --theme-on-primary: #ffffff;\n}");
-var styles = {"default":"_default_1f5az_1","purple":"_purple_1f5az_15","teal":"_teal_1f5az_29"};
+___$insertStyle("._default_bvuwk_1 {\n  --theme-surface: var(--colors-secondary-blue-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text-primary: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-accent: var(--colors-secondary-blue-dark);\n  --theme-accent: var(--colors-secondary-blue-base);\n  --theme-primary: var(--colors-secondary-blue-base);\n  --theme-primary-hover: var(--colors-secondary-blue-dark);\n  --theme-on-primary: #ffffff;\n}\n\n._purple_bvuwk_15 {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text-primary: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-accent: var(--colors-secondary-purple-dark);\n  --theme-accent: var(--colors-secondary-purple-base);\n  --theme-primary: var(--colors-secondary-purple-dark);\n  --theme-primary-hover: var(--colors-secondary-purple-base);\n  --theme-on-primary: #ffffff;\n}\n\n._teal_bvuwk_29 {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text-primary: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-accent: var(--colors-secondary-teal-dark);\n  --theme-accent: var(--colors-secondary-teal-base);\n  --theme-primary: var(--colors-secondary-teal-dark);\n  --theme-primary-hover: var(--colors-secondary-teal-base);\n  --theme-on-primary: #ffffff;\n}");
+var styles = {"default":"_default_bvuwk_1","purple":"_purple_bvuwk_15","teal":"_teal_bvuwk_29"};
 
 module.exports = styles;
 //# sourceMappingURL=TokenProvider.module.scss.cjs.map

package/dist/components/TokenProvider/TokenProvider.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TokenProvider.module.scss.cjs","sources":["../../../src/components/TokenProvider/TokenProvider.module.scss"],"sourcesContent":[".default {\n  --theme-surface: var(--colors-secondary-blue-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text-primary: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-accent: var(--colors-secondary-blue-dark);\n  --theme-accent: var(--colors-secondary-blue-base);\n  --theme-primary: var(--colors-secondary-blue-base);\n  --theme-primary-hover: var(--colors-secondary-blue-dark);\n  --theme-on-primary: #ffffff;\n}\n\n.purple {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text-primary: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-accent: var(--colors-secondary-purple-dark);\n  --theme-accent: var(--colors-secondary-purple-dark);\n  --theme-primary: var(--colors-secondary-purple-base);\n  --theme-primary-hover: var(--colors-secondary-purple-dark);\n  --theme-on-primary: #ffffff;\n}\n\n.teal {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text-primary: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-accent: var(--colors-secondary-teal-dark);\n  --theme-accent: var(--colors-secondary-teal-dark);\n  --theme-primary: var(--colors-secondary-teal-base);\n  --theme-primary-hover: var(--colors-secondary-teal-dark);\n  --theme-on-primary: #ffffff;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,g2DAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
+{"version":3,"file":"TokenProvider.module.scss.cjs","sources":["../../../src/components/TokenProvider/TokenProvider.module.scss"],"sourcesContent":[".default {\n  --theme-surface: var(--colors-secondary-blue-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text-primary: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-accent: var(--colors-secondary-blue-dark);\n  --theme-accent: var(--colors-secondary-blue-base);\n  --theme-primary: var(--colors-secondary-blue-base);\n  --theme-primary-hover: var(--colors-secondary-blue-dark);\n  --theme-on-primary: #ffffff;\n}\n\n.purple {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text-primary: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-accent: var(--colors-secondary-purple-dark);\n  --theme-accent: var(--colors-secondary-purple-base);\n  --theme-primary: var(--colors-secondary-purple-dark);\n  --theme-primary-hover: var(--colors-secondary-purple-base);\n  --theme-on-primary: #ffffff;\n}\n\n.teal {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text-primary: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-accent: var(--colors-secondary-teal-dark);\n  --theme-accent: var(--colors-secondary-teal-base);\n  --theme-primary: var(--colors-secondary-teal-dark);\n  --theme-primary-hover: var(--colors-secondary-teal-base);\n  --theme-on-primary: #ffffff;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,g2DAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

package/dist/components/TokenProvider/TokenProvider.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._default_1f5az_1 {\n  --theme-surface: var(--colors-secondary-blue-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text-primary: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-accent: var(--colors-secondary-blue-dark);\n  --theme-accent: var(--colors-secondary-blue-base);\n  --theme-primary: var(--colors-secondary-blue-base);\n  --theme-primary-hover: var(--colors-secondary-blue-dark);\n  --theme-on-primary: #ffffff;\n}\n\n._purple_1f5az_15 {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text-primary: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-accent: var(--colors-secondary-purple-dark);\n  --theme-accent: var(--colors-secondary-purple-dark);\n  --theme-primary: var(--colors-secondary-purple-base);\n  --theme-primary-hover: var(--colors-secondary-purple-dark);\n  --theme-on-primary: #ffffff;\n}\n\n._teal_1f5az_29 {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text-primary: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-accent: var(--colors-secondary-teal-dark);\n  --theme-accent: var(--colors-secondary-teal-dark);\n  --theme-primary: var(--colors-secondary-teal-base);\n  --theme-primary-hover: var(--colors-secondary-teal-dark);\n  --theme-on-primary: #ffffff;\n}");
-var styles = {"default":"_default_1f5az_1","purple":"_purple_1f5az_15","teal":"_teal_1f5az_29"};
+insertStyle("._default_bvuwk_1 {\n  --theme-surface: var(--colors-secondary-blue-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text-primary: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-accent: var(--colors-secondary-blue-dark);\n  --theme-accent: var(--colors-secondary-blue-base);\n  --theme-primary: var(--colors-secondary-blue-base);\n  --theme-primary-hover: var(--colors-secondary-blue-dark);\n  --theme-on-primary: #ffffff;\n}\n\n._purple_bvuwk_15 {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text-primary: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-accent: var(--colors-secondary-purple-dark);\n  --theme-accent: var(--colors-secondary-purple-base);\n  --theme-primary: var(--colors-secondary-purple-dark);\n  --theme-primary-hover: var(--colors-secondary-purple-base);\n  --theme-on-primary: #ffffff;\n}\n\n._teal_bvuwk_29 {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text-primary: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-accent: var(--colors-secondary-teal-dark);\n  --theme-accent: var(--colors-secondary-teal-base);\n  --theme-primary: var(--colors-secondary-teal-dark);\n  --theme-primary-hover: var(--colors-secondary-teal-base);\n  --theme-on-primary: #ffffff;\n}");
+var styles = {"default":"_default_bvuwk_1","purple":"_purple_bvuwk_15","teal":"_teal_bvuwk_29"};
 
 export { styles as default };
 //# sourceMappingURL=TokenProvider.module.scss.js.map

package/dist/components/TokenProvider/TokenProvider.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenProvider.module.scss.js","sources":["../../../src/components/TokenProvider/TokenProvider.module.scss"],"sourcesContent":[".default {\n  --theme-surface: var(--colors-secondary-blue-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text-primary: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-accent: var(--colors-secondary-blue-dark);\n  --theme-accent: var(--colors-secondary-blue-base);\n  --theme-primary: var(--colors-secondary-blue-base);\n  --theme-primary-hover: var(--colors-secondary-blue-dark);\n  --theme-on-primary: #ffffff;\n}\n\n.purple {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text-primary: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-accent: var(--colors-secondary-purple-dark);\n  --theme-accent: var(--colors-secondary-purple-dark);\n  --theme-primary: var(--colors-secondary-purple-base);\n  --theme-primary-hover: var(--colors-secondary-purple-dark);\n  --theme-on-primary: #ffffff;\n}\n\n.teal {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text-primary: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-accent: var(--colors-secondary-teal-dark);\n  --theme-accent: var(--colors-secondary-teal-dark);\n  --theme-primary: var(--colors-secondary-teal-base);\n  --theme-primary-hover: var(--colors-secondary-teal-dark);\n  --theme-on-primary: #ffffff;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,g2DAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
+{"version":3,"file":"TokenProvider.module.scss.js","sources":["../../../src/components/TokenProvider/TokenProvider.module.scss"],"sourcesContent":[".default {\n  --theme-surface: var(--colors-secondary-blue-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text-primary: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-accent: var(--colors-secondary-blue-dark);\n  --theme-accent: var(--colors-secondary-blue-base);\n  --theme-primary: var(--colors-secondary-blue-base);\n  --theme-primary-hover: var(--colors-secondary-blue-dark);\n  --theme-on-primary: #ffffff;\n}\n\n.purple {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text-primary: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-accent: var(--colors-secondary-purple-dark);\n  --theme-accent: var(--colors-secondary-purple-base);\n  --theme-primary: var(--colors-secondary-purple-dark);\n  --theme-primary-hover: var(--colors-secondary-purple-base);\n  --theme-on-primary: #ffffff;\n}\n\n.teal {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-secondary: #ffffff;\n  --theme-surface-alt: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text-primary: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-accent: var(--colors-secondary-teal-dark);\n  --theme-accent: var(--colors-secondary-teal-base);\n  --theme-primary: var(--colors-secondary-teal-dark);\n  --theme-primary-hover: var(--colors-secondary-teal-base);\n  --theme-on-primary: #ffffff;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,g2DAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

package/dist/components/VideoModal/styled.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const PopupContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const VideoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonSC: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare const ButtonSC: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("../../hoc/withTokens").WithTokensProps & {
     children?: import("react").ReactNode;
     variant?: import("../Button/types").ButtonVariant | undefined;
     size?: "base" | "sm" | undefined;
@@ -9,4 +9,4 @@ export declare const ButtonSC: import("styled-components").StyledComponent<impor
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
     contentStyles?: import("react").CSSProperties | undefined;
-} & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+} & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

package/dist/hoc/withTokens/withTokens.cjs

@@ -7,9 +7,24 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const withTokens = (Component) => {
-    const ComponentWithTokens = ({ theme = 'default', ...props }) => (React__default.default.createElement(TokenProvider.TokenProvider, { theme: theme },
-        React__default.default.createElement(Component, { ...props })));
+/**
+ * HOC that adds an optional `theme` prop to a component.
+ * When a theme is provided (via prop or `defaultTheme`), wraps the component
+ * in a `TokenProvider`. Otherwise renders the component directly, allowing it
+ * to inherit tokens from a parent `TokenProvider`. Forwards refs to the wrapped component.
+ *
+ * @param Component - The component to wrap
+ * @param defaultTheme - Optional default theme applied when no `theme` prop is passed
+ */
+const withTokens = (Component, defaultTheme) => {
+    const ComponentWithTokens = React.forwardRef(({ theme = defaultTheme, ...props }, ref) => {
+        const Comp = Component;
+        if (theme) {
+            return (React__default.default.createElement(TokenProvider.TokenProvider, { theme: theme },
+                React__default.default.createElement(Comp, { ref: ref, ...props })));
+        }
+        return React__default.default.createElement(Comp, { ref: ref, ...props });
+    });
     ComponentWithTokens.displayName = `withTokens(${Component.displayName || Component.name || 'Component'})`;
     return ComponentWithTokens;
 };

package/dist/hoc/withTokens/withTokens.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"withTokens.cjs","sources":["../../../src/hoc/withTokens/withTokens.tsx"],"sourcesContent":["import React, { ComponentType } from 'react';\nimport { ThemeType } from '../../components/TokenProvider/TokenProvider';\nimport { TokenProvider } from '../../components/TokenProvider';\n\nexport type WithTokensProps = {\n  theme?: ThemeType;\n};\n\nexport const withTokens = <P extends object>(Component: ComponentType<P>) => {\n  const ComponentWithTokens = ({ theme = 'default', ...props }: P & WithTokensProps) => (\n    <TokenProvider theme={theme}>\n      <Component {...(props as P)} />\n    </TokenProvider>\n  );\n\n  ComponentWithTokens.displayName = `withTokens(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithTokens;\n};\n"],"names":["React","TokenProvider"],"mappings":";;;;;;;;;AAQa,MAAA,UAAU,GAAG,CAAmB,SAA2B,KAAI;IAC1E,MAAM,mBAAmB,GAAG,CAAC,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,KAAK,EAAuB,MAC/EA,sBAAA,CAAA,aAAA,CAACC,2BAAa,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;AACzB,QAAAD,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAM,EAAA,GAAA,KAAW,EAAI,CAAA,CACjB,CACjB;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}
+{"version":3,"file":"withTokens.cjs","sources":["../../../src/hoc/withTokens/withTokens.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ElementRef } from 'react';\nimport { ThemeType } from '../../components/TokenProvider/TokenProvider';\nimport { TokenProvider } from '../../components/TokenProvider';\n\nexport type WithTokensProps = {\n  theme?: ThemeType;\n};\n\n/**\n * HOC that adds an optional `theme` prop to a component.\n * When a theme is provided (via prop or `defaultTheme`), wraps the component\n * in a `TokenProvider`. Otherwise renders the component directly, allowing it\n * to inherit tokens from a parent `TokenProvider`. Forwards refs to the wrapped component.\n *\n * @param Component - The component to wrap\n * @param defaultTheme - Optional default theme applied when no `theme` prop is passed\n */\nexport const withTokens = <C extends ComponentType<any>>(\n  Component: C,\n  defaultTheme?: ThemeType,\n) => {\n  type P = React.ComponentPropsWithoutRef<C>;\n  type R = ElementRef<C>;\n\n  const ComponentWithTokens = forwardRef<R, P & WithTokensProps>(\n    ({ theme = defaultTheme, ...props }, ref) => {\n      const Comp = Component as ComponentType<any>;\n\n      if (theme) {\n        return (\n          <TokenProvider theme={theme}>\n            <Comp ref={ref} {...props} />\n          </TokenProvider>\n        );\n      }\n\n      return <Comp ref={ref} {...props} />;\n    },\n  );\n\n  ComponentWithTokens.displayName = `withTokens(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithTokens;\n};\n"],"names":["forwardRef","React","TokenProvider"],"mappings":";;;;;;;;;AAQA;;;;;;;;AAQG;MACU,UAAU,GAAG,CACxB,SAAY,EACZ,YAAwB,KACtB;AAIF,IAAA,MAAM,mBAAmB,GAAGA,gBAAU,CACpC,CAAC,EAAE,KAAK,GAAG,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;QAC1C,MAAM,IAAI,GAAG,SAA+B;AAE5C,QAAA,IAAI,KAAK,EAAE;AACT,YAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,2BAAa,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;gBACzBD,sBAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,GAAG,EAAE,GAAG,KAAM,KAAK,EAAA,CAAI,CACf;AAEnB;QAED,OAAOA,sBAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,CAAI;AACtC,KAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}

package/dist/hoc/withTokens/withTokens.d.ts

@@ -1,9 +1,15 @@
-import React, { ComponentType } from 'react';
+import React from 'react';
 import { ThemeType } from '../../components/TokenProvider/TokenProvider';
 export type WithTokensProps = {
     theme?: ThemeType;
 };
-export declare const withTokens: <P extends object>(Component: React.ComponentType<P>) => {
-    ({ theme, ...props }: P & WithTokensProps): React.JSX.Element;
-    displayName: string;
-};
+/**
+ * HOC that adds an optional `theme` prop to a component.
+ * When a theme is provided (via prop or `defaultTheme`), wraps the component
+ * in a `TokenProvider`. Otherwise renders the component directly, allowing it
+ * to inherit tokens from a parent `TokenProvider`. Forwards refs to the wrapped component.
+ *
+ * @param Component - The component to wrap
+ * @param defaultTheme - Optional default theme applied when no `theme` prop is passed
+ */
+export declare const withTokens: <C extends React.ComponentType<any>>(Component: C, defaultTheme?: ThemeType) => React.ForwardRefExoticComponent<React.PropsWithoutRef<React.PropsWithoutRef<React.ComponentProps<C>> & WithTokensProps> & React.RefAttributes<React.ElementRef<C>>>;

package/dist/hoc/withTokens/withTokens.js

@@ -1,9 +1,24 @@
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import { TokenProvider } from '../../components/TokenProvider/TokenProvider.js';
 
-const withTokens = (Component) => {
-    const ComponentWithTokens = ({ theme = 'default', ...props }) => (React__default.createElement(TokenProvider, { theme: theme },
-        React__default.createElement(Component, { ...props })));
+/**
+ * HOC that adds an optional `theme` prop to a component.
+ * When a theme is provided (via prop or `defaultTheme`), wraps the component
+ * in a `TokenProvider`. Otherwise renders the component directly, allowing it
+ * to inherit tokens from a parent `TokenProvider`. Forwards refs to the wrapped component.
+ *
+ * @param Component - The component to wrap
+ * @param defaultTheme - Optional default theme applied when no `theme` prop is passed
+ */
+const withTokens = (Component, defaultTheme) => {
+    const ComponentWithTokens = forwardRef(({ theme = defaultTheme, ...props }, ref) => {
+        const Comp = Component;
+        if (theme) {
+            return (React__default.createElement(TokenProvider, { theme: theme },
+                React__default.createElement(Comp, { ref: ref, ...props })));
+        }
+        return React__default.createElement(Comp, { ref: ref, ...props });
+    });
     ComponentWithTokens.displayName = `withTokens(${Component.displayName || Component.name || 'Component'})`;
     return ComponentWithTokens;
 };

package/dist/hoc/withTokens/withTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"withTokens.js","sources":["../../../src/hoc/withTokens/withTokens.tsx"],"sourcesContent":["import React, { ComponentType } from 'react';\nimport { ThemeType } from '../../components/TokenProvider/TokenProvider';\nimport { TokenProvider } from '../../components/TokenProvider';\n\nexport type WithTokensProps = {\n  theme?: ThemeType;\n};\n\nexport const withTokens = <P extends object>(Component: ComponentType<P>) => {\n  const ComponentWithTokens = ({ theme = 'default', ...props }: P & WithTokensProps) => (\n    <TokenProvider theme={theme}>\n      <Component {...(props as P)} />\n    </TokenProvider>\n  );\n\n  ComponentWithTokens.displayName = `withTokens(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithTokens;\n};\n"],"names":["React"],"mappings":";;;AAQa,MAAA,UAAU,GAAG,CAAmB,SAA2B,KAAI;IAC1E,MAAM,mBAAmB,GAAG,CAAC,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,KAAK,EAAuB,MAC/EA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;AACzB,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAM,EAAA,GAAA,KAAW,EAAI,CAAA,CACjB,CACjB;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}
+{"version":3,"file":"withTokens.js","sources":["../../../src/hoc/withTokens/withTokens.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ElementRef } from 'react';\nimport { ThemeType } from '../../components/TokenProvider/TokenProvider';\nimport { TokenProvider } from '../../components/TokenProvider';\n\nexport type WithTokensProps = {\n  theme?: ThemeType;\n};\n\n/**\n * HOC that adds an optional `theme` prop to a component.\n * When a theme is provided (via prop or `defaultTheme`), wraps the component\n * in a `TokenProvider`. Otherwise renders the component directly, allowing it\n * to inherit tokens from a parent `TokenProvider`. Forwards refs to the wrapped component.\n *\n * @param Component - The component to wrap\n * @param defaultTheme - Optional default theme applied when no `theme` prop is passed\n */\nexport const withTokens = <C extends ComponentType<any>>(\n  Component: C,\n  defaultTheme?: ThemeType,\n) => {\n  type P = React.ComponentPropsWithoutRef<C>;\n  type R = ElementRef<C>;\n\n  const ComponentWithTokens = forwardRef<R, P & WithTokensProps>(\n    ({ theme = defaultTheme, ...props }, ref) => {\n      const Comp = Component as ComponentType<any>;\n\n      if (theme) {\n        return (\n          <TokenProvider theme={theme}>\n            <Comp ref={ref} {...props} />\n          </TokenProvider>\n        );\n      }\n\n      return <Comp ref={ref} {...props} />;\n    },\n  );\n\n  ComponentWithTokens.displayName = `withTokens(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithTokens;\n};\n"],"names":["React"],"mappings":";;;AAQA;;;;;;;;AAQG;MACU,UAAU,GAAG,CACxB,SAAY,EACZ,YAAwB,KACtB;AAIF,IAAA,MAAM,mBAAmB,GAAG,UAAU,CACpC,CAAC,EAAE,KAAK,GAAG,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;QAC1C,MAAM,IAAI,GAAG,SAA+B;AAE5C,QAAA,IAAI,KAAK,EAAE;AACT,YAAA,QACEA,cAAC,CAAA,aAAA,CAAA,aAAa,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;gBACzBA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,GAAG,EAAE,GAAG,KAAM,KAAK,EAAA,CAAI,CACf;AAEnB;QAED,OAAOA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,CAAI;AACtC,KAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}

package/dist/icons/design-system/components/RocketIcon.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespaceCompat(e) {
+    if (e && typeof e === 'object' && 'default' in e) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
+
+const RocketIcon = (props) => (React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: 24, height: 24, ...props },
+    React__namespace.createElement("path", { fill: "currentColor", d: "m4.82 8-1.837-.802a.57.57 0 0 1-.335-.423.55.55 0 0 1 .146-.51l1.94-1.94q.247-.262.605-.365.357-.102.707-.043l1.167.218a13.4 13.4 0 0 0-1.415 1.882q-.54.89-.977 1.983m8.81-6.052q.116.015.225.051.11.036.212.139a.67.67 0 0 1 .204.422q.072 1.445-.569 2.96a8.4 8.4 0 0 1-1.808 2.684 11.5 11.5 0 0 1-1.604 1.35 9.6 9.6 0 0 1-1.867.983.74.74 0 0 1-.423.073.48.48 0 0 1-.306-.145L5.725 8.51a.678.678 0 0 1-.073-.73q.423-1.02.984-1.858.562-.84 1.35-1.626a8.2 8.2 0 0 1 2.683-1.794q1.516-.627 2.96-.554M9.88 6.308a.87.87 0 0 0 .678.292.92.92 0 0 0 .693-.292.87.87 0 0 0 .292-.678.92.92 0 0 0-.292-.692.94.94 0 0 0-.693-.278.9.9 0 0 0-.678.278.92.92 0 0 0-.291.692.87.87 0 0 0 .291.678m-1.677 5.06q1.094-.436 1.983-.969.89-.533 1.882-1.407l.204 1.152q.073.365-.037.714a1.44 1.44 0 0 1-.357.598l-1.925 1.94a.59.59 0 0 1-.525.153.56.56 0 0 1-.437-.328zm-5.148-1.005q.584-.57 1.386-.57t1.37.57q.555.554.562 1.363.007.81-.561 1.378-.438.423-1.35.708-.91.284-2.573.473.19-1.648.459-2.566.27-.92.707-1.356" })));
+
+exports.ReactComponent = RocketIcon;
+//# sourceMappingURL=RocketIcon.cjs.map

package/dist/icons/design-system/components/RocketIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RocketIcon.cjs","sources":["../../../../src/icons/design-system/components/RocketIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { SVGProps } from 'react';\n\nconst RocketIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 16 16\"\n    width={24}\n    height={24}\n    {...props}\n  >\n    <path\n      fill=\"currentColor\"\n      d=\"m4.82 8-1.837-.802a.57.57 0 0 1-.335-.423.55.55 0 0 1 .146-.51l1.94-1.94q.247-.262.605-.365.357-.102.707-.043l1.167.218a13.4 13.4 0 0 0-1.415 1.882q-.54.89-.977 1.983m8.81-6.052q.116.015.225.051.11.036.212.139a.67.67 0 0 1 .204.422q.072 1.445-.569 2.96a8.4 8.4 0 0 1-1.808 2.684 11.5 11.5 0 0 1-1.604 1.35 9.6 9.6 0 0 1-1.867.983.74.74 0 0 1-.423.073.48.48 0 0 1-.306-.145L5.725 8.51a.678.678 0 0 1-.073-.73q.423-1.02.984-1.858.562-.84 1.35-1.626a8.2 8.2 0 0 1 2.683-1.794q1.516-.627 2.96-.554M9.88 6.308a.87.87 0 0 0 .678.292.92.92 0 0 0 .693-.292.87.87 0 0 0 .292-.678.92.92 0 0 0-.292-.692.94.94 0 0 0-.693-.278.9.9 0 0 0-.678.278.92.92 0 0 0-.291.692.87.87 0 0 0 .291.678m-1.677 5.06q1.094-.436 1.983-.969.89-.533 1.882-1.407l.204 1.152q.073.365-.037.714a1.44 1.44 0 0 1-.357.598l-1.925 1.94a.59.59 0 0 1-.525.153.56.56 0 0 1-.437-.328zm-5.148-1.005q.584-.57 1.386-.57t1.37.57q.555.554.562 1.363.007.81-.561 1.378-.438.423-1.35.708-.91.284-2.573.473.19-1.648.459-2.566.27-.92.707-1.356\"\n    />\n  </svg>\n);\nexport { RocketIcon as ReactComponent };\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAM,UAAU,GAAG,CAAC,KAA8B,MAChDA,gBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,KACN,KAAK,EAAA;IAETA,gBACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,+9BAA+9B,EAAA,CACj+B,CACE;;;;"}

package/dist/icons/design-system/components/RocketIcon.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const RocketIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export { RocketIcon as ReactComponent };

package/dist/icons/design-system/components/RocketIcon.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+const RocketIcon = (props) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", width: 24, height: 24, ...props },
+    React.createElement("path", { fill: "currentColor", d: "m4.82 8-1.837-.802a.57.57 0 0 1-.335-.423.55.55 0 0 1 .146-.51l1.94-1.94q.247-.262.605-.365.357-.102.707-.043l1.167.218a13.4 13.4 0 0 0-1.415 1.882q-.54.89-.977 1.983m8.81-6.052q.116.015.225.051.11.036.212.139a.67.67 0 0 1 .204.422q.072 1.445-.569 2.96a8.4 8.4 0 0 1-1.808 2.684 11.5 11.5 0 0 1-1.604 1.35 9.6 9.6 0 0 1-1.867.983.74.74 0 0 1-.423.073.48.48 0 0 1-.306-.145L5.725 8.51a.678.678 0 0 1-.073-.73q.423-1.02.984-1.858.562-.84 1.35-1.626a8.2 8.2 0 0 1 2.683-1.794q1.516-.627 2.96-.554M9.88 6.308a.87.87 0 0 0 .678.292.92.92 0 0 0 .693-.292.87.87 0 0 0 .292-.678.92.92 0 0 0-.292-.692.94.94 0 0 0-.693-.278.9.9 0 0 0-.678.278.92.92 0 0 0-.291.692.87.87 0 0 0 .291.678m-1.677 5.06q1.094-.436 1.983-.969.89-.533 1.882-1.407l.204 1.152q.073.365-.037.714a1.44 1.44 0 0 1-.357.598l-1.925 1.94a.59.59 0 0 1-.525.153.56.56 0 0 1-.437-.328zm-5.148-1.005q.584-.57 1.386-.57t1.37.57q.555.554.562 1.363.007.81-.561 1.378-.438.423-1.35.708-.91.284-2.573.473.19-1.648.459-2.566.27-.92.707-1.356" })));
+
+export { RocketIcon as ReactComponent };
+//# sourceMappingURL=RocketIcon.js.map

package/dist/icons/design-system/components/RocketIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RocketIcon.js","sources":["../../../../src/icons/design-system/components/RocketIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { SVGProps } from 'react';\n\nconst RocketIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 16 16\"\n    width={24}\n    height={24}\n    {...props}\n  >\n    <path\n      fill=\"currentColor\"\n      d=\"m4.82 8-1.837-.802a.57.57 0 0 1-.335-.423.55.55 0 0 1 .146-.51l1.94-1.94q.247-.262.605-.365.357-.102.707-.043l1.167.218a13.4 13.4 0 0 0-1.415 1.882q-.54.89-.977 1.983m8.81-6.052q.116.015.225.051.11.036.212.139a.67.67 0 0 1 .204.422q.072 1.445-.569 2.96a8.4 8.4 0 0 1-1.808 2.684 11.5 11.5 0 0 1-1.604 1.35 9.6 9.6 0 0 1-1.867.983.74.74 0 0 1-.423.073.48.48 0 0 1-.306-.145L5.725 8.51a.678.678 0 0 1-.073-.73q.423-1.02.984-1.858.562-.84 1.35-1.626a8.2 8.2 0 0 1 2.683-1.794q1.516-.627 2.96-.554M9.88 6.308a.87.87 0 0 0 .678.292.92.92 0 0 0 .693-.292.87.87 0 0 0 .292-.678.92.92 0 0 0-.292-.692.94.94 0 0 0-.693-.278.9.9 0 0 0-.678.278.92.92 0 0 0-.291.692.87.87 0 0 0 .291.678m-1.677 5.06q1.094-.436 1.983-.969.89-.533 1.882-1.407l.204 1.152q.073.365-.037.714a1.44 1.44 0 0 1-.357.598l-1.925 1.94a.59.59 0 0 1-.525.153.56.56 0 0 1-.437-.328zm-5.148-1.005q.584-.57 1.386-.57t1.37.57q.555.554.562 1.363.007.81-.561 1.378-.438.423-1.35.708-.91.284-2.573.473.19-1.648.459-2.566.27-.92.707-1.356\"\n    />\n  </svg>\n);\nexport { RocketIcon as ReactComponent };\n"],"names":[],"mappings":";;AAGA,MAAM,UAAU,GAAG,CAAC,KAA8B,MAChD,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,KACN,KAAK,EAAA;IAET,KACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,+9BAA+9B,EAAA,CACj+B,CACE;;;;"}

package/dist/icons/design-system/components/index.d.ts

@@ -139,6 +139,7 @@ export { ReactComponent as ReturnPaidIcon } from './ReturnPaidIcon';
 export { ReactComponent as ReturnReasonIcon } from './ReturnReasonIcon';
 export { ReactComponent as RightArrowIcon } from './RightArrowIcon';
 export { ReactComponent as RocketAssistantIcon } from './RocketAssistantIcon';
+export { ReactComponent as RocketIcon } from './RocketIcon';
 export { ReactComponent as RuleIcon } from './RuleIcon';
 export { ReactComponent as SaveIcon } from './SaveIcon';
 export { ReactComponent as ScalesIcon } from './ScalesIcon';

package/dist/index.cjs

@@ -258,6 +258,7 @@ var ReturnPaidIcon = require('./icons/design-system/components/ReturnPaidIcon.cj
 var ReturnReasonIcon = require('./icons/design-system/components/ReturnReasonIcon.cjs');
 var RightArrowIcon = require('./icons/design-system/components/RightArrowIcon.cjs');
 var RocketAssistantIcon = require('./icons/design-system/components/RocketAssistantIcon.cjs');
+var RocketIcon = require('./icons/design-system/components/RocketIcon.cjs');
 var RuleIcon = require('./icons/design-system/components/RuleIcon.cjs');
 var SaveIcon = require('./icons/design-system/components/SaveIcon.cjs');
 var ScalesIcon = require('./icons/design-system/components/ScalesIcon.cjs');
@@ -624,6 +625,7 @@ exports.ReturnPaidIcon = ReturnPaidIcon.ReactComponent;
 exports.ReturnReasonIcon = ReturnReasonIcon.ReactComponent;
 exports.RightArrowIcon = RightArrowIcon.ReactComponent;
 exports.RocketAssistantIcon = RocketAssistantIcon.ReactComponent;
+exports.RocketIcon = RocketIcon.ReactComponent;
 exports.RuleIcon = RuleIcon.ReactComponent;
 exports.SaveIcon = SaveIcon.ReactComponent;
 exports.ScalesIcon = ScalesIcon.ReactComponent;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -256,6 +256,7 @@ export { ReactComponent as ReturnPaidIcon } from './icons/design-system/componen
 export { ReactComponent as ReturnReasonIcon } from './icons/design-system/components/ReturnReasonIcon.js';
 export { ReactComponent as RightArrowIcon } from './icons/design-system/components/RightArrowIcon.js';
 export { ReactComponent as RocketAssistantIcon } from './icons/design-system/components/RocketAssistantIcon.js';
+export { ReactComponent as RocketIcon } from './icons/design-system/components/RocketIcon.js';
 export { ReactComponent as RuleIcon } from './icons/design-system/components/RuleIcon.js';
 export { ReactComponent as SaveIcon } from './icons/design-system/components/SaveIcon.js';
 export { ReactComponent as ScalesIcon } from './icons/design-system/components/ScalesIcon.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "13.21.0",
+  "version": "13.22.1",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",