@veeqo/ui 13.20.0 → 13.22.0

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"> & React.RefAttributes<unknown>>;

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":"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"}

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

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var withTokens = require('../../hoc/withTokens/withTokens.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
+var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
+var Text = require('../Text/Text.cjs');
+var Button = require('../Button/Button.cjs');
+var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
+var FeatureBanner_module = require('./FeatureBanner.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const FeatureBannerBase = ({ variant = 'primary', size = 'default', layout = 'vertical', title, contentSlot, iconSlot, actions, onClose, className, ...divProps }) => {
+    return (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", alignItems: layout === 'horizontal' ? 'center' : 'flex-start', justifyContent: "space-between", gap: "none", className: buildClassnames.buildClassnames([
+            FeatureBanner_module.featureBanner,
+            FeatureBanner_module[`${size}-size`],
+            FeatureBanner_module[`${variant}-variant`],
+            className,
+        ]), role: "region", "aria-label": title, ...divProps },
+        iconSlot && React__default.default.createElement("div", { className: FeatureBanner_module.iconBackground }, iconSlot),
+        React__default.default.createElement(FlexCol.FlexCol, { gap: "sm", flexGrow: "1", className: FeatureBanner_module[layout] },
+            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, ...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, 'default');
+
+exports.FeatureBanner = FeatureBanner;
+//# sourceMappingURL=FeatureBanner.cjs.map

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

@@ -0,0 +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 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

@@ -0,0 +1,11 @@
+import React from 'react';
+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<unknown>>;

package/dist/components/FeatureBanner/FeatureBanner.js

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { withTokens } from '../../hoc/withTokens/withTokens.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
+import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
+import { Text } from '../Text/Text.js';
+import { Button } from '../Button/Button.js';
+import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
+import styles from './FeatureBanner.module.scss.js';
+
+const FeatureBannerBase = ({ variant = 'primary', size = 'default', layout = 'vertical', title, contentSlot, iconSlot, actions, onClose, className, ...divProps }) => {
+    return (React__default.createElement(FlexRow, { flexWrap: "nowrap", alignItems: layout === 'horizontal' ? 'center' : 'flex-start', justifyContent: "space-between", gap: "none", className: buildClassnames([
+            styles.featureBanner,
+            styles[`${size}-size`],
+            styles[`${variant}-variant`],
+            className,
+        ]), role: "region", "aria-label": title, ...divProps },
+        iconSlot && React__default.createElement("div", { className: styles.iconBackground }, iconSlot),
+        React__default.createElement(FlexCol, { gap: "sm", flexGrow: "1", className: styles[layout] },
+            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, ...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, 'default');
+
+export { FeatureBanner };
+//# sourceMappingURL=FeatureBanner.js.map

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

@@ -0,0 +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 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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._featureBanner_u2p7m_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_u2p7m_9 {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-md);\n}\n\n._sm-size_u2p7m_15 {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n._xs-size_u2p7m_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_u2p7m_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_u2p7m_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_u2p7m_42 {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n}\n\n._horizontal_u2p7m_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_u2p7m_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_u2p7m_56 > svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}");
+var styles = {"featureBanner":"_featureBanner_u2p7m_1","default-size":"_default-size_u2p7m_9","sm-size":"_sm-size_u2p7m_15","xs-size":"_xs-size_u2p7m_21","primary-variant":"_primary-variant_u2p7m_28","secondary-variant":"_secondary-variant_u2p7m_34","vertical":"_vertical_u2p7m_42","horizontal":"_horizontal_u2p7m_48","iconBackground":"_iconBackground_u2p7m_56"};
+
+module.exports = styles;
+//# sourceMappingURL=FeatureBanner.module.scss.cjs.map

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

@@ -0,0 +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"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,ioDAAA;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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._featureBanner_u2p7m_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_u2p7m_9 {\n  --banner-padding: var(--sizes-base);\n  --content-padding: 16px 8px;\n  --icon-size: var(--sizes-md);\n}\n\n._sm-size_u2p7m_15 {\n  --banner-padding: var(--sizes-3);\n  --content-padding: 12px 8px;\n  --icon-size: var(--sizes-5);\n}\n\n._xs-size_u2p7m_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_u2p7m_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_u2p7m_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_u2p7m_42 {\n  flex-direction: column;\n  align-items: flex-start;\n  padding-inline: var(--content-padding);\n}\n\n._horizontal_u2p7m_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_u2p7m_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_u2p7m_56 > svg {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  color: var(--icon-color);\n}");
+var styles = {"featureBanner":"_featureBanner_u2p7m_1","default-size":"_default-size_u2p7m_9","sm-size":"_sm-size_u2p7m_15","xs-size":"_xs-size_u2p7m_21","primary-variant":"_primary-variant_u2p7m_28","secondary-variant":"_secondary-variant_u2p7m_34","vertical":"_vertical_u2p7m_42","horizontal":"_horizontal_u2p7m_48","iconBackground":"_iconBackground_u2p7m_56"};
+
+export { styles as default };
+//# sourceMappingURL=FeatureBanner.module.scss.js.map

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

@@ -0,0 +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"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,ioDAAA;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/index.d.ts

@@ -0,0 +1,2 @@
+export { FeatureBanner } from './FeatureBanner';
+export type { FeatureBannerProps, FeatureBannerVariant, FeatureBannerSize, FeatureBannerLayout, FeatureBannerAction } from './types';

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

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { WithTokensProps } from '../../hoc/withTokens/withTokens';
+/** Visual style of the banner */
+export type FeatureBannerVariant = 'primary' | 'secondary';
+/** Controls the padding density of the banner */
+export type FeatureBannerSize = 'default' | 'sm' | 'xs';
+/** Direction of the banner content flow */
+export type FeatureBannerLayout = 'vertical' | 'horizontal';
+/** Configuration for an action button within the banner */
+export type FeatureBannerAction = {
+    /** Button label text */
+    label: string;
+    /** Click handler for the action */
+    onClick: () => void;
+    /** Button style — `'primary'` for emphasis, `'default'` for secondary actions */
+    variant?: 'primary' | 'default';
+};
+export type FeatureBannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & WithTokensProps & {
+    /** Visual style of the banner. `'primary'` has a solid icon background, `'secondary'` has a white background */
+    variant?: FeatureBannerVariant;
+    /** Controls padding density */
+    size?: FeatureBannerSize;
+    /** Direction of content flow. `'vertical'` stacks content, `'horizontal'` places content side-by-side */
+    layout?: FeatureBannerLayout;
+    /** Banner heading text, also used as the `aria-label` for the region */
+    title: string;
+    /** Flexible content area below the title for message text, links, or any custom content */
+    contentSlot?: ReactNode;
+    /** Icon displayed in a themed background container */
+    iconSlot?: ReactNode;
+    /** Action buttons rendered below the content */
+    actions?: FeatureBannerAction[];
+    /** Close handler. When provided, renders a close button */
+    onClose?: () => void;
+};

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("react").RefAttributes<unknown>>, 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_1ad7m_1 {\n  --theme-surface: var(--colors-secondary-blue-lightest);\n  --theme-surface-hover: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-link: var(--colors-secondary-blue-dark);\n  --theme-icon: var(--colors-secondary-blue-base);\n  --theme-action-bg: var(--colors-secondary-blue-base);\n  --theme-action-bg-hover: var(--colors-secondary-blue-dark);\n  --theme-action-text: #ffffff;\n}\n\n._purple_1ad7m_14 {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-hover: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-link: var(--colors-secondary-purple-dark);\n  --theme-icon: var(--colors-secondary-purple-dark);\n  --theme-action-bg: var(--colors-secondary-purple-base);\n  --theme-action-bg-hover: var(--colors-secondary-purple-dark);\n  --theme-action-text: #ffffff;\n}\n\n._teal_1ad7m_27 {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-hover: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-link: var(--colors-secondary-teal-dark);\n  --theme-icon: var(--colors-secondary-teal-dark);\n  --theme-action-bg: var(--colors-secondary-teal-base);\n  --theme-action-bg-hover: var(--colors-secondary-teal-dark);\n  --theme-action-text: #ffffff;\n}");
-var styles = {"default":"_default_1ad7m_1","purple":"_purple_1ad7m_14","teal":"_teal_1ad7m_27"};
+___$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"};
 
 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-hover: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-link: var(--colors-secondary-blue-dark);\n  --theme-icon: var(--colors-secondary-blue-base);\n  --theme-action-bg: var(--colors-secondary-blue-base);\n  --theme-action-bg-hover: var(--colors-secondary-blue-dark);\n  --theme-action-text: #ffffff;\n}\n\n.purple {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-hover: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-link: var(--colors-secondary-purple-dark);\n  --theme-icon: var(--colors-secondary-purple-dark);\n  --theme-action-bg: var(--colors-secondary-purple-base);\n  --theme-action-bg-hover: var(--colors-secondary-purple-dark);\n  --theme-action-text: #ffffff;\n}\n\n.teal {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-hover: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-link: var(--colors-secondary-teal-dark);\n  --theme-icon: var(--colors-secondary-teal-dark);\n  --theme-action-bg: var(--colors-secondary-teal-base);\n  --theme-action-bg-hover: var(--colors-secondary-teal-dark);\n  --theme-action-text: #ffffff;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,4tDAAA;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-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;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._default_1ad7m_1 {\n  --theme-surface: var(--colors-secondary-blue-lightest);\n  --theme-surface-hover: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-link: var(--colors-secondary-blue-dark);\n  --theme-icon: var(--colors-secondary-blue-base);\n  --theme-action-bg: var(--colors-secondary-blue-base);\n  --theme-action-bg-hover: var(--colors-secondary-blue-dark);\n  --theme-action-text: #ffffff;\n}\n\n._purple_1ad7m_14 {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-hover: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-link: var(--colors-secondary-purple-dark);\n  --theme-icon: var(--colors-secondary-purple-dark);\n  --theme-action-bg: var(--colors-secondary-purple-base);\n  --theme-action-bg-hover: var(--colors-secondary-purple-dark);\n  --theme-action-text: #ffffff;\n}\n\n._teal_1ad7m_27 {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-hover: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-link: var(--colors-secondary-teal-dark);\n  --theme-icon: var(--colors-secondary-teal-dark);\n  --theme-action-bg: var(--colors-secondary-teal-base);\n  --theme-action-bg-hover: var(--colors-secondary-teal-dark);\n  --theme-action-text: #ffffff;\n}");
-var styles = {"default":"_default_1ad7m_1","purple":"_purple_1ad7m_14","teal":"_teal_1ad7m_27"};
+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"};
 
 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-hover: var(--colors-secondary-blue-light);\n  --theme-border: var(--colors-secondary-blue-base);\n  --theme-text: var(--colors-secondary-blue-darkest);\n  --theme-text-secondary: var(--colors-secondary-blue-dark);\n  --theme-text-link: var(--colors-secondary-blue-dark);\n  --theme-icon: var(--colors-secondary-blue-base);\n  --theme-action-bg: var(--colors-secondary-blue-base);\n  --theme-action-bg-hover: var(--colors-secondary-blue-dark);\n  --theme-action-text: #ffffff;\n}\n\n.purple {\n  --theme-surface: var(--colors-secondary-purple-lightest);\n  --theme-surface-hover: var(--colors-secondary-purple-light);\n  --theme-border: var(--colors-secondary-purple-light);\n  --theme-text: var(--colors-secondary-purple-darkest);\n  --theme-text-secondary: var(--colors-secondary-purple-dark);\n  --theme-text-link: var(--colors-secondary-purple-dark);\n  --theme-icon: var(--colors-secondary-purple-dark);\n  --theme-action-bg: var(--colors-secondary-purple-base);\n  --theme-action-bg-hover: var(--colors-secondary-purple-dark);\n  --theme-action-text: #ffffff;\n}\n\n.teal {\n  --theme-surface: var(--colors-secondary-teal-lightest);\n  --theme-surface-hover: var(--colors-secondary-teal-light);\n  --theme-border: var(--colors-secondary-teal-light);\n  --theme-text: var(--colors-secondary-teal-darkest);\n  --theme-text-secondary: var(--colors-secondary-teal-dark);\n  --theme-text-link: var(--colors-secondary-teal-dark);\n  --theme-icon: var(--colors-secondary-teal-dark);\n  --theme-action-bg: var(--colors-secondary-teal-base);\n  --theme-action-bg-hover: var(--colors-secondary-teal-dark);\n  --theme-action-text: #ffffff;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,4tDAAA;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-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;;;;"}

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("react").RefAttributes<unknown>>, any, {}, never>;

package/dist/components/index.d.ts

@@ -28,6 +28,7 @@ export { DetailPage } from './DetailPage';
 export { DimensionsInput } from './DimensionsInput';
 export { Divider, type DividerProps } from './Divider';
 export { Dropdown } from './Dropdown';
+export { FeatureBanner, type FeatureBannerProps } from './FeatureBanner';
 export { FilterTag } from './FilterTag';
 export { Grid } from './Grid';
 export { Image } from './Image';

package/dist/hoc/withTokens/withTokens.cjs

@@ -7,9 +7,23 @@ 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) => {
+        if (theme) {
+            return (React__default.default.createElement(TokenProvider.TokenProvider, { theme: theme },
+                React__default.default.createElement(Component, { ref: ref, ...props })));
+        }
+        return React__default.default.createElement(Component, { 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 } 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 = <P extends object>(\n  Component: ComponentType<P>,\n  defaultTheme?: ThemeType,\n) => {\n  const ComponentWithTokens = forwardRef<unknown, P & WithTokensProps>(\n    ({ theme = defaultTheme, ...props }, ref) => {\n      if (theme) {\n        return (\n          <TokenProvider theme={theme}>\n            <Component ref={ref} {...(props as P)} />\n          </TokenProvider>\n        );\n      }\n\n      return <Component ref={ref} {...(props as P)} />;\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,SAA2B,EAC3B,YAAwB,KACtB;AACF,IAAA,MAAM,mBAAmB,GAAGA,gBAAU,CACpC,CAAC,EAAE,KAAK,GAAG,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC1C,QAAA,IAAI,KAAK,EAAE;AACT,YAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,2BAAa,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;gBACzBD,sBAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,GAAG,EAAE,GAAG,KAAO,KAAW,EAAA,CAAI,CAC3B;AAEnB;QAED,OAAOA,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,GAAG,EAAE,GAAG,EAAA,GAAO,KAAW,EAAA,CAAI;AAClD,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

@@ -3,7 +3,13 @@ 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: <P extends object>(Component: React.ComponentType<P>, defaultTheme?: ThemeType) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P & WithTokensProps> & React.RefAttributes<unknown>>;

package/dist/hoc/withTokens/withTokens.js

@@ -1,9 +1,23 @@
-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) => {
+        if (theme) {
+            return (React__default.createElement(TokenProvider, { theme: theme },
+                React__default.createElement(Component, { ref: ref, ...props })));
+        }
+        return React__default.createElement(Component, { 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 } 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 = <P extends object>(\n  Component: ComponentType<P>,\n  defaultTheme?: ThemeType,\n) => {\n  const ComponentWithTokens = forwardRef<unknown, P & WithTokensProps>(\n    ({ theme = defaultTheme, ...props }, ref) => {\n      if (theme) {\n        return (\n          <TokenProvider theme={theme}>\n            <Component ref={ref} {...(props as P)} />\n          </TokenProvider>\n        );\n      }\n\n      return <Component ref={ref} {...(props as P)} />;\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,SAA2B,EAC3B,YAAwB,KACtB;AACF,IAAA,MAAM,mBAAmB,GAAG,UAAU,CACpC,CAAC,EAAE,KAAK,GAAG,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC1C,QAAA,IAAI,KAAK,EAAE;AACT,YAAA,QACEA,cAAC,CAAA,aAAA,CAAA,aAAa,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;gBACzBA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,GAAG,EAAE,GAAG,KAAO,KAAW,EAAA,CAAI,CAC3B;AAEnB;QAED,OAAOA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,GAAG,EAAE,GAAG,EAAA,GAAO,KAAW,EAAA,CAAI;AAClD,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/index.cjs

@@ -38,6 +38,7 @@ var DetailPage = require('./components/DetailPage/DetailPage.cjs');
 var DimensionsInput = require('./components/DimensionsInput/DimensionsInput.cjs');
 var Divider = require('./components/Divider/Divider.cjs');
 var Dropdown = require('./components/Dropdown/Dropdown.cjs');
+var FeatureBanner = require('./components/FeatureBanner/FeatureBanner.cjs');
 var FilterTag = require('./components/FilterTag/FilterTag.cjs');
 var index$1 = require('./components/Grid/index.cjs');
 var Image = require('./components/Image/Image.cjs');
@@ -394,6 +395,7 @@ exports.DetailPage = DetailPage.DetailPage;
 exports.DimensionsInput = DimensionsInput.DimensionsInput;
 exports.Divider = Divider.Divider;
 exports.Dropdown = Dropdown.Dropdown;
+exports.FeatureBanner = FeatureBanner.FeatureBanner;
 exports.FilterTag = FilterTag.FilterTag;
 exports.Grid = index$1.Grid;
 exports.Image = Image.Image;

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

@@ -36,6 +36,7 @@ export { DetailPage } from './components/DetailPage/DetailPage.js';
 export { DimensionsInput } from './components/DimensionsInput/DimensionsInput.js';
 export { Divider } from './components/Divider/Divider.js';
 export { Dropdown } from './components/Dropdown/Dropdown.js';
+export { FeatureBanner } from './components/FeatureBanner/FeatureBanner.js';
 export { FilterTag } from './components/FilterTag/FilterTag.js';
 export { Grid } from './components/Grid/index.js';
 export { Image } from './components/Image/Image.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.20.0",
+  "version": "13.22.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",