@veeqo/ui 14.10.3 → 14.11.0-beta-1

package/dist/components/Action/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport baseStyles from './styles/base.module.scss';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport { ActionAppearance, ActionSize, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n  className?: string;\n  variant?: ActionVariant;\n  disabled?: boolean;\n  size?: ActionSize;\n  dropdown?: boolean;\n  iconSlot?: React.ReactNode;\n  children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n  [\n    (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles.primary,\n    (variant === 'destructive' || variant === 'primaryDestructive') && buttonStyles.destructive,\n    variant === 'flat' && buttonStyles.flat,\n  ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n  const baseClasses = [props.className, baseStyles.reset];\n  const hasIcon = !!props.iconSlot;\n  const isIconOnly = hasIcon && (props.children == null || props.children === '');\n  const iconClasses = [hasIcon && buttonStyles.icon, isIconOnly && buttonStyles.iconOnly];\n\n  switch (appearance) {\n    case 'button':\n      return buildClassnames([\n        ...baseClasses,\n        buttonStyles.button,\n        ...iconClasses,\n        props.disabled && buttonStyles.disabled,\n        props.size && props.size !== 'base' && buttonStyles[props.size],\n        props.dropdown && buttonStyles.dropdown,\n        ...getButtonVariantClasses(props.variant),\n      ]);\n    case 'link':\n      return buildClassnames([\n        ...baseClasses,\n        linkStyles.link,\n        !props.size && linkStyles.inherit,\n        props.size && props.size !== 'base' && linkStyles[props.size],\n      ]);\n    default:\n      return buildClassnames(baseClasses);\n  }\n};\n"],"names":["buttonStyles","baseStyles","buildClassnames","linkStyles"],"mappings":";;;;;;;;MAiBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;IACE,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAKA,aAAY,CAAC,OAAO;IACnF,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB,KAAKA,aAAY,CAAC,WAAW;AAC3F,IAAA,OAAO,KAAK,MAAM,IAAIA,aAAY,CAAC,IAAI;AACxC,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;IAChG,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,SAAS,EAAEC,WAAU,CAAC,KAAK,CAAC;AACvD,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;AAChC,IAAA,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG,CAAC,OAAO,IAAID,aAAY,CAAC,IAAI,EAAE,UAAU,IAAIA,aAAY,CAAC,QAAQ,CAAC;AAEvF,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAOE,+BAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAAF,aAAY,CAAC,MAAM;AACnB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAIA,aAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAIA,aAAY,CAAC,KAAK,CAAC,IAAI,CAAC;AAC/D,gBAAA,KAAK,CAAC,QAAQ,IAAIA,aAAY,CAAC,QAAQ;AACvC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAOE,+BAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAAC,WAAU,CAAC,IAAI;AACf,gBAAA,CAAC,KAAK,CAAC,IAAI,IAAIA,WAAU,CAAC,OAAO;AACjC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAIA,WAAU,CAAC,KAAK,CAAC,IAAI,CAAC;AAC9D,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAOD,+BAAe,CAAC,WAAW,CAAC;AACtC;AACH;;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport baseStyles from './styles/base.module.scss';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport { ActionAppearance, ActionSize, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n  className?: string;\n  variant?: ActionVariant;\n  disabled?: boolean;\n  size?: ActionSize;\n  dropdown?: boolean;\n  iconSlot?: React.ReactNode;\n  children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n  [\n    (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles['primary-variant'],\n    (variant === 'destructive' || variant === 'primaryDestructive') &&\n      buttonStyles['destructive-variant'],\n    variant === 'flat' && buttonStyles['flat-variant'],\n  ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n  const hasIcon = !!props.iconSlot;\n  const isIconOnly = hasIcon && !props.children;\n  const iconClasses = [\n    hasIcon && !isIconOnly && buttonStyles.icon,\n    isIconOnly && buttonStyles.iconOnly,\n  ];\n\n  switch (appearance) {\n    case 'button':\n      return buildClassnames([\n        props.className,\n        baseStyles.reset,\n        buttonStyles.base,\n        ...iconClasses,\n        props.disabled && buttonStyles.disabled,\n        props.size && props.size !== 'base' && buttonStyles[`${props.size}-size`],\n        props.dropdown && buttonStyles.dropdown,\n        ...getButtonVariantClasses(props.variant),\n      ]);\n    case 'link':\n      return buildClassnames([\n        props.className,\n        baseStyles.reset,\n        linkStyles.base,\n        !props.size && linkStyles['inherit-size'],\n        props.size && props.size !== 'base' && linkStyles[`${props.size}-size`],\n      ]);\n    default:\n      return buildClassnames([props.className, baseStyles.reset]);\n  }\n};\n"],"names":["buttonStyles","buildClassnames","baseStyles","linkStyles"],"mappings":";;;;;;;;MAiBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;AACE,IAAA,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAKA,aAAY,CAAC,iBAAiB,CAAC;AAC9F,IAAA,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB;QAC5DA,aAAY,CAAC,qBAAqB,CAAC;AACrC,IAAA,OAAO,KAAK,MAAM,IAAIA,aAAY,CAAC,cAAc,CAAC;AACnD,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;AAChG,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;IAChC,MAAM,UAAU,GAAG,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ;AAC7C,IAAA,MAAM,WAAW,GAAG;AAClB,QAAA,OAAO,IAAI,CAAC,UAAU,IAAIA,aAAY,CAAC,IAAI;QAC3C,UAAU,IAAIA,aAAY,CAAC,QAAQ;KACpC;AAED,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAOC,+BAAe,CAAC;AACrB,gBAAA,KAAK,CAAC,SAAS;AACf,gBAAAC,WAAU,CAAC,KAAK;AAChB,gBAAAF,aAAY,CAAC,IAAI;AACjB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAIA,aAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAIA,aAAY,CAAC,CAAA,EAAG,KAAK,CAAC,IAAI,OAAO,CAAC;AACzE,gBAAA,KAAK,CAAC,QAAQ,IAAIA,aAAY,CAAC,QAAQ;AACvC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAOC,+BAAe,CAAC;AACrB,gBAAA,KAAK,CAAC,SAAS;AACf,gBAAAC,WAAU,CAAC,KAAK;AAChB,gBAAAC,WAAU,CAAC,IAAI;AACf,gBAAA,CAAC,KAAK,CAAC,IAAI,IAAIA,WAAU,CAAC,cAAc,CAAC;AACzC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAIA,WAAU,CAAC,CAAA,EAAG,KAAK,CAAC,IAAI,OAAO,CAAC;AACxE,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAOF,+BAAe,CAAC,CAAC,KAAK,CAAC,SAAS,EAAEC,WAAU,CAAC,KAAK,CAAC,CAAC;AAC9D;AACH;;;;;"}

package/dist/components/Action/utils.js

@@ -5,35 +5,40 @@ import buttonStyles from './styles/button.module.scss.js';
 import linkStyles from './styles/link.module.scss.js';
 
 const getButtonVariantClasses = (variant) => [
-    (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles.primary,
-    (variant === 'destructive' || variant === 'primaryDestructive') && buttonStyles.destructive,
-    variant === 'flat' && buttonStyles.flat,
+    (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles['primary-variant'],
+    (variant === 'destructive' || variant === 'primaryDestructive') &&
+        buttonStyles['destructive-variant'],
+    variant === 'flat' && buttonStyles['flat-variant'],
 ].filter(Boolean);
 const getAppearanceClasses = (appearance, props) => {
-    const baseClasses = [props.className, baseStyles.reset];
     const hasIcon = !!props.iconSlot;
-    const isIconOnly = hasIcon && (props.children == null || props.children === '');
-    const iconClasses = [hasIcon && buttonStyles.icon, isIconOnly && buttonStyles.iconOnly];
+    const isIconOnly = hasIcon && !props.children;
+    const iconClasses = [
+        hasIcon && !isIconOnly && buttonStyles.icon,
+        isIconOnly && buttonStyles.iconOnly,
+    ];
     switch (appearance) {
         case 'button':
             return buildClassnames([
-                ...baseClasses,
-                buttonStyles.button,
+                props.className,
+                baseStyles.reset,
+                buttonStyles.base,
                 ...iconClasses,
                 props.disabled && buttonStyles.disabled,
-                props.size && props.size !== 'base' && buttonStyles[props.size],
+                props.size && props.size !== 'base' && buttonStyles[`${props.size}-size`],
                 props.dropdown && buttonStyles.dropdown,
                 ...getButtonVariantClasses(props.variant),
             ]);
         case 'link':
             return buildClassnames([
-                ...baseClasses,
-                linkStyles.link,
-                !props.size && linkStyles.inherit,
-                props.size && props.size !== 'base' && linkStyles[props.size],
+                props.className,
+                baseStyles.reset,
+                linkStyles.base,
+                !props.size && linkStyles['inherit-size'],
+                props.size && props.size !== 'base' && linkStyles[`${props.size}-size`],
             ]);
         default:
-            return buildClassnames(baseClasses);
+            return buildClassnames([props.className, baseStyles.reset]);
     }
 };
 

package/dist/components/Action/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport baseStyles from './styles/base.module.scss';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport { ActionAppearance, ActionSize, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n  className?: string;\n  variant?: ActionVariant;\n  disabled?: boolean;\n  size?: ActionSize;\n  dropdown?: boolean;\n  iconSlot?: React.ReactNode;\n  children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n  [\n    (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles.primary,\n    (variant === 'destructive' || variant === 'primaryDestructive') && buttonStyles.destructive,\n    variant === 'flat' && buttonStyles.flat,\n  ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n  const baseClasses = [props.className, baseStyles.reset];\n  const hasIcon = !!props.iconSlot;\n  const isIconOnly = hasIcon && (props.children == null || props.children === '');\n  const iconClasses = [hasIcon && buttonStyles.icon, isIconOnly && buttonStyles.iconOnly];\n\n  switch (appearance) {\n    case 'button':\n      return buildClassnames([\n        ...baseClasses,\n        buttonStyles.button,\n        ...iconClasses,\n        props.disabled && buttonStyles.disabled,\n        props.size && props.size !== 'base' && buttonStyles[props.size],\n        props.dropdown && buttonStyles.dropdown,\n        ...getButtonVariantClasses(props.variant),\n      ]);\n    case 'link':\n      return buildClassnames([\n        ...baseClasses,\n        linkStyles.link,\n        !props.size && linkStyles.inherit,\n        props.size && props.size !== 'base' && linkStyles[props.size],\n      ]);\n    default:\n      return buildClassnames(baseClasses);\n  }\n};\n"],"names":[],"mappings":";;;;;;MAiBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;IACE,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAK,YAAY,CAAC,OAAO;IACnF,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB,KAAK,YAAY,CAAC,WAAW;AAC3F,IAAA,OAAO,KAAK,MAAM,IAAI,YAAY,CAAC,IAAI;AACxC,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;IAChG,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC;AACvD,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;AAChC,IAAA,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG,CAAC,OAAO,IAAI,YAAY,CAAC,IAAI,EAAE,UAAU,IAAI,YAAY,CAAC,QAAQ,CAAC;AAEvF,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAA,YAAY,CAAC,MAAM;AACnB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAI,YAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC;AAC/D,gBAAA,KAAK,CAAC,QAAQ,IAAI,YAAY,CAAC,QAAQ;AACvC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAA,UAAU,CAAC,IAAI;AACf,gBAAA,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU,CAAC,OAAO;AACjC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC;AAC9D,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAO,eAAe,CAAC,WAAW,CAAC;AACtC;AACH;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport baseStyles from './styles/base.module.scss';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport { ActionAppearance, ActionSize, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n  className?: string;\n  variant?: ActionVariant;\n  disabled?: boolean;\n  size?: ActionSize;\n  dropdown?: boolean;\n  iconSlot?: React.ReactNode;\n  children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n  [\n    (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles['primary-variant'],\n    (variant === 'destructive' || variant === 'primaryDestructive') &&\n      buttonStyles['destructive-variant'],\n    variant === 'flat' && buttonStyles['flat-variant'],\n  ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n  const hasIcon = !!props.iconSlot;\n  const isIconOnly = hasIcon && !props.children;\n  const iconClasses = [\n    hasIcon && !isIconOnly && buttonStyles.icon,\n    isIconOnly && buttonStyles.iconOnly,\n  ];\n\n  switch (appearance) {\n    case 'button':\n      return buildClassnames([\n        props.className,\n        baseStyles.reset,\n        buttonStyles.base,\n        ...iconClasses,\n        props.disabled && buttonStyles.disabled,\n        props.size && props.size !== 'base' && buttonStyles[`${props.size}-size`],\n        props.dropdown && buttonStyles.dropdown,\n        ...getButtonVariantClasses(props.variant),\n      ]);\n    case 'link':\n      return buildClassnames([\n        props.className,\n        baseStyles.reset,\n        linkStyles.base,\n        !props.size && linkStyles['inherit-size'],\n        props.size && props.size !== 'base' && linkStyles[`${props.size}-size`],\n      ]);\n    default:\n      return buildClassnames([props.className, baseStyles.reset]);\n  }\n};\n"],"names":[],"mappings":";;;;;;MAiBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;AACE,IAAA,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAK,YAAY,CAAC,iBAAiB,CAAC;AAC9F,IAAA,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB;QAC5D,YAAY,CAAC,qBAAqB,CAAC;AACrC,IAAA,OAAO,KAAK,MAAM,IAAI,YAAY,CAAC,cAAc,CAAC;AACnD,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;AAChG,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;IAChC,MAAM,UAAU,GAAG,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ;AAC7C,IAAA,MAAM,WAAW,GAAG;AAClB,QAAA,OAAO,IAAI,CAAC,UAAU,IAAI,YAAY,CAAC,IAAI;QAC3C,UAAU,IAAI,YAAY,CAAC,QAAQ;KACpC;AAED,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,KAAK,CAAC,SAAS;AACf,gBAAA,UAAU,CAAC,KAAK;AAChB,gBAAA,YAAY,CAAC,IAAI;AACjB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAI,YAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,YAAY,CAAC,CAAA,EAAG,KAAK,CAAC,IAAI,OAAO,CAAC;AACzE,gBAAA,KAAK,CAAC,QAAQ,IAAI,YAAY,CAAC,QAAQ;AACvC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,KAAK,CAAC,SAAS;AACf,gBAAA,UAAU,CAAC,KAAK;AAChB,gBAAA,UAAU,CAAC,IAAI;AACf,gBAAA,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU,CAAC,cAAc,CAAC;AACzC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,UAAU,CAAC,CAAA,EAAG,KAAK,CAAC,IAAI,OAAO,CAAC;AACxE,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAO,eAAe,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;AAC9D;AACH;;;;"}

package/dist/components/Button/Button.cjs

@@ -1,56 +1,56 @@
 'use strict';
 
 var React = require('react');
-var Loader = require('../Loader/Loader.cjs');
 var withTokens = require('../../hoc/withTokens/withTokens.cjs');
+var DropdownIcon = require('../../icons/custom/components/DropdownIcon.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
-var assignCssVars = require('../../utils/assignCssVars.cjs');
-var DropdownIcon = require('../../icons/custom/components/DropdownIcon.cjs');
-var Button_module = require('./Button.module.scss.cjs');
+var button_module = require('../Action/styles/button.module.scss.cjs');
+var utils = require('../Action/utils.cjs');
+var Loader = require('../Loader/Loader.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-/* eslint-disable react/button-has-type */
 /**
- * @deprecated Use the `Action` component instead
+ * @deprecated Use the `Action` component instead.
+ * Button triggers actions such as submitting forms, opening dialogs, or deleting records.
  */
-const ButtonBase = React.forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, contentStyles, as, ...otherProps }, ref) => {
-    const Element = as || 'button';
+const ButtonBase = React.forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, disabled, type = 'button', ...otherProps }, ref) => {
     if (variant === 'unstyled') {
-        return (React__default.default.createElement(Element, { ref: ref, className: buildClassnames.buildClassnames([Button_module['unstyled-variant'], className]), ...otherProps }, children));
-    }
-    const hasChildren = children !== undefined;
-    const hasIcon = !!iconSlot;
-    const iconSize = hasChildren || size === 'sm' ? 'var(--sizes-base)' : 'var(--sizes-md)';
-    const mainContentStyle = { ...assignCssVars.assignCssVars({ buttonIconSize: iconSize }), ...contentStyles };
-    if (variant === 'link') {
-        return (React__default.default.createElement(Element, { ref: ref, className: buildClassnames.buildClassnames([Button_module['link-variant'], hasChildren && Button_module.hasText, className]), ...otherProps },
-            (hasChildren || hasIcon) && (React__default.default.createElement("span", { className: buildClassnames.buildClassnames([Button_module.mainContent, loading && Button_module.loading]), style: mainContentStyle },
-                iconSlot && iconSlot,
-                children !== undefined && children,
-                dropdown && React__default.default.createElement(DropdownIcon.DropdownIcon, null))),
-            loading && (React__default.default.createElement("div", { className: Button_module.loadingWrapper },
-                React__default.default.createElement(Loader.Loader, null)))));
+        return (React__default.default.createElement("button", { ...otherProps, ref: ref, 
+            // eslint-disable-next-line react/button-has-type
+            type: type, className: utils.getAppearanceClasses('unstyled', { className }), disabled: disabled || loading, "aria-busy": loading || undefined }, children));
     }
-    return (React__default.default.createElement(Element, { ref: ref, className: buildClassnames.buildClassnames([
-            Button_module.base,
-            Button_module[`${variant}-variant`],
-            Button_module[`${size}-size`],
-            hasIcon && Button_module.hasIcon,
-            hasChildren && Button_module.hasText,
-            dropdown && Button_module.hasDropdown,
-            className,
-        ]), ...otherProps },
-        (hasChildren || hasIcon) && (React__default.default.createElement("span", { className: buildClassnames.buildClassnames([Button_module.mainContent, loading && Button_module.loading]), style: mainContentStyle },
-            iconSlot && iconSlot,
-            children !== undefined && children,
-            dropdown && React__default.default.createElement(DropdownIcon.DropdownIcon, null))),
-        loading && (React__default.default.createElement("div", { className: Button_module.loadingWrapper },
-            React__default.default.createElement(Loader.Loader, null)))));
+    const isLink = variant === 'link';
+    const appearance = isLink ? 'link' : 'button';
+    const classNames = utils.getAppearanceClasses(appearance, {
+        className,
+        variant: isLink ? undefined : variant,
+        disabled,
+        size,
+        dropdown,
+        iconSlot,
+        children,
+    });
+    return (React__default.default.createElement("button", { ...otherProps, ref: ref, 
+        // eslint-disable-next-line react/button-has-type
+        type: type, className: classNames, disabled: disabled || loading, "aria-busy": loading || undefined }, isLink ? (React__default.default.createElement(React__default.default.Fragment, null,
+        iconSlot,
+        children,
+        dropdown && React__default.default.createElement(DropdownIcon.DropdownIcon, null))) : (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement("span", { className: buildClassnames.buildClassnames([
+                button_module.content,
+                loading && button_module.hideContent,
+            ]) },
+            iconSlot,
+            children,
+            dropdown && React__default.default.createElement(DropdownIcon.DropdownIcon, null)),
+        loading && (React__default.default.createElement("div", { className: button_module.loadingWrapper, role: "status", "aria-label": "Loading" },
+            React__default.default.createElement(Loader.Loader, { className: button_module.loader })))))));
 });
+ButtonBase.displayName = 'Button';
 const Button = withTokens.withTokens(ButtonBase);
 
 exports.Button = Button;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ElementType } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport { DropdownIcon } from '../../icons';\n\nimport styles from './Button.module.scss';\n\n/* eslint-disable react/button-has-type */\n\n/**\n * @deprecated Use the `Action` component instead\n */\nexport const 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      as,\n      ...otherProps\n    }: ButtonProps,\n    ref,\n  ) => {\n    const Element: ElementType = as || 'button';\n\n    if (variant === 'unstyled') {\n      return (\n        <Element\n          ref={ref}\n          className={buildClassnames([styles['unstyled-variant'], className])}\n          {...otherProps}\n        >\n          {children}\n        </Element>\n      );\n    }\n\n    const hasChildren = children !== undefined;\n    const hasIcon = !!iconSlot;\n    const iconSize = hasChildren || size === 'sm' ? 'var(--sizes-base)' : 'var(--sizes-md)';\n    const mainContentStyle = { ...assignCssVars({ buttonIconSize: iconSize }), ...contentStyles };\n\n    if (variant === 'link') {\n      return (\n        <Element\n          ref={ref}\n          className={buildClassnames([styles['link-variant'], hasChildren && styles.hasText, className])}\n          {...otherProps}\n        >\n          {(hasChildren || hasIcon) && (\n            <span className={buildClassnames([styles.mainContent, loading && styles.loading])} style={mainContentStyle}>\n              {iconSlot && iconSlot}\n              {children !== undefined && children}\n              {dropdown && <DropdownIcon />}\n            </span>\n          )}\n\n          {loading && (\n            <div className={styles.loadingWrapper}>\n              <Loader />\n            </div>\n          )}\n        </Element>\n      );\n    }\n\n    return (\n      <Element\n        ref={ref}\n        className={buildClassnames([\n          styles.base,\n          styles[`${variant}-variant`],\n          styles[`${size}-size`],\n          hasIcon && styles.hasIcon,\n          hasChildren && styles.hasText,\n          dropdown && styles.hasDropdown,\n          className,\n        ])}\n        {...otherProps}\n      >\n        {(hasChildren || hasIcon) && (\n          <span className={buildClassnames([styles.mainContent, loading && styles.loading])} style={mainContentStyle}>\n            {iconSlot && iconSlot}\n            {children !== undefined && children}\n            {dropdown && <DropdownIcon />}\n          </span>\n        )}\n\n        {loading && (\n          <div className={styles.loadingWrapper}>\n            <Loader />\n          </div>\n        )}\n      </Element>\n    );\n  },\n);\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["forwardRef","React","buildClassnames","styles","assignCssVars","DropdownIcon","Loader","withTokens"],"mappings":"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"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { withTokens } from '../../hoc/withTokens';\nimport { DropdownIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport buttonStyles from '../Action/styles/button.module.scss';\nimport { getAppearanceClasses } from '../Action/utils';\nimport { Loader } from '../Loader';\nimport { ButtonProps } from './types';\n\n/**\n * @deprecated Use the `Action` component instead.\n * Button triggers actions such as submitting forms, opening dialogs, or deleting records.\n */\nexport const 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      disabled,\n      type = 'button',\n      ...otherProps\n    }: ButtonProps,\n    ref,\n  ) => {\n    if (variant === 'unstyled') {\n      return (\n        <button\n          {...otherProps}\n          ref={ref}\n          // eslint-disable-next-line react/button-has-type\n          type={type}\n          className={getAppearanceClasses('unstyled', { className })}\n          disabled={disabled || loading}\n          aria-busy={loading || undefined}\n        >\n          {children}\n        </button>\n      );\n    }\n\n    const isLink = variant === 'link';\n    const appearance = isLink ? 'link' : 'button';\n\n    const classNames = getAppearanceClasses(appearance, {\n      className,\n      variant: isLink ? undefined : variant,\n      disabled,\n      size,\n      dropdown,\n      iconSlot,\n      children,\n    });\n\n    return (\n      <button\n        {...otherProps}\n        ref={ref}\n        // eslint-disable-next-line react/button-has-type\n        type={type}\n        className={classNames}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n      >\n        {isLink ? (\n          <>\n            {iconSlot}\n            {children}\n            {dropdown && <DropdownIcon />}\n          </>\n        ) : (\n          <>\n            <span\n              className={buildClassnames([\n                buttonStyles.content,\n                loading && buttonStyles.hideContent,\n              ])}\n            >\n              {iconSlot}\n              {children}\n              {dropdown && <DropdownIcon />}\n            </span>\n            {loading && (\n              <div className={buttonStyles.loadingWrapper} role=\"status\" aria-label=\"Loading\">\n                <Loader className={buttonStyles.loader} />\n              </div>\n            )}\n          </>\n        )}\n      </button>\n    );\n  },\n);\n\nButtonBase.displayName = 'Button';\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["forwardRef","React","getAppearanceClasses","DropdownIcon","buildClassnames","buttonStyles","Loader","withTokens"],"mappings":";;;;;;;;;;;;;;;AAUA;;;AAGG;AACI,MAAM,UAAU,GAAGA,gBAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,GAAG,UAAU,EACD,EACd,GAAG,KACD;IACF,IAAI,OAAO,KAAK,UAAU,EAAE;AAC1B,QAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,UAAU,EACd,GAAG,EAAE,GAAG;;YAER,IAAI,EAAE,IAAI,EACV,SAAS,EAAEC,0BAAoB,CAAC,UAAU,EAAE,EAAE,SAAS,EAAE,CAAC,EAC1D,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAAA,WAAA,EAClB,OAAO,IAAI,SAAS,EAAA,EAE9B,QAAQ,CACF;AAEZ,IAAA;AAED,IAAA,MAAM,MAAM,GAAG,OAAO,KAAK,MAAM;IACjC,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ;AAE7C,IAAA,MAAM,UAAU,GAAGA,0BAAoB,CAAC,UAAU,EAAE;QAClD,SAAS;QACT,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO;QACrC,QAAQ;QACR,IAAI;QACJ,QAAQ;QACR,QAAQ;QACR,QAAQ;AACT,KAAA,CAAC;AAEF,IAAA,QACED,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,UAAU,EACd,GAAG,EAAE,GAAG;;QAER,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAAA,WAAA,EAClB,OAAO,IAAI,SAAS,IAE9B,MAAM,IACLA,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;QACG,QAAQ;QACR,QAAQ;QACR,QAAQ,IAAIA,qCAACE,yBAAY,EAAA,IAAA,CAAG,CAC5B,KAEHF,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;QACEA,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEG,+BAAe,CAAC;AACzB,gBAAAC,aAAY,CAAC,OAAO;gBACpB,OAAO,IAAIA,aAAY,CAAC,WAAW;aACpC,CAAC,EAAA;YAED,QAAQ;YACR,QAAQ;AACR,YAAA,QAAQ,IAAIJ,sBAAA,CAAA,aAAA,CAACE,yBAAY,EAAA,IAAA,CAAG,CACxB;AACN,QAAA,OAAO,KACNF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEI,aAAY,CAAC,cAAc,EAAE,IAAI,EAAC,QAAQ,gBAAY,SAAS,EAAA;AAC7E,YAAAJ,sBAAA,CAAA,aAAA,CAACK,aAAM,EAAA,EAAC,SAAS,EAAED,aAAY,CAAC,MAAM,EAAA,CAAI,CACtC,CACP,CACA,CACJ,CACM;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,QAAQ;MAEpB,MAAM,GAAGE,qBAAU,CAAC,UAAU;;;;;"}

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

@@ -1,30 +1,21 @@
 import React from 'react';
 /**
- * @deprecated Use the `Action` component instead
+ * @deprecated Use the `Action` component instead.
+ * Button triggers actions such as submitting forms, opening dialogs, or deleting records.
  */
 export declare const ButtonBase: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../hoc/withTokens").WithTokensProps & {
     children?: React.ReactNode;
     variant?: import("./types").ButtonVariant | undefined;
-    size?: "base" | "sm" | undefined;
+    size?: import("./types").ButtonSize | undefined;
     iconSlot?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
-    contentStyles?: React.CSSProperties | undefined;
-    as?: React.ElementType | undefined;
-    href?: string | undefined;
-    target?: string | undefined;
-    rel?: string | undefined;
 } & React.RefAttributes<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;
+    size?: import("./types").ButtonSize | undefined;
     iconSlot?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
-    contentStyles?: React.CSSProperties | undefined;
-    as?: React.ElementType | undefined;
-    href?: string | undefined;
-    target?: string | undefined;
-    rel?: string | undefined;
 } & React.RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -1,50 +1,50 @@
 import React__default, { forwardRef } from 'react';
-import { Loader } from '../Loader/Loader.js';
 import { withTokens } from '../../hoc/withTokens/withTokens.js';
+import { DropdownIcon } from '../../icons/custom/components/DropdownIcon.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
-import { assignCssVars } from '../../utils/assignCssVars.js';
-import { DropdownIcon } from '../../icons/custom/components/DropdownIcon.js';
-import styles from './Button.module.scss.js';
+import buttonStyles from '../Action/styles/button.module.scss.js';
+import { getAppearanceClasses } from '../Action/utils.js';
+import { Loader } from '../Loader/Loader.js';
 
-/* eslint-disable react/button-has-type */
 /**
- * @deprecated Use the `Action` component instead
+ * @deprecated Use the `Action` component instead.
+ * Button triggers actions such as submitting forms, opening dialogs, or deleting records.
  */
-const ButtonBase = forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, contentStyles, as, ...otherProps }, ref) => {
-    const Element = as || 'button';
+const ButtonBase = forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, disabled, type = 'button', ...otherProps }, ref) => {
     if (variant === 'unstyled') {
-        return (React__default.createElement(Element, { ref: ref, className: buildClassnames([styles['unstyled-variant'], className]), ...otherProps }, children));
-    }
-    const hasChildren = children !== undefined;
-    const hasIcon = !!iconSlot;
-    const iconSize = hasChildren || size === 'sm' ? 'var(--sizes-base)' : 'var(--sizes-md)';
-    const mainContentStyle = { ...assignCssVars({ buttonIconSize: iconSize }), ...contentStyles };
-    if (variant === 'link') {
-        return (React__default.createElement(Element, { ref: ref, className: buildClassnames([styles['link-variant'], hasChildren && styles.hasText, className]), ...otherProps },
-            (hasChildren || hasIcon) && (React__default.createElement("span", { className: buildClassnames([styles.mainContent, loading && styles.loading]), style: mainContentStyle },
-                iconSlot && iconSlot,
-                children !== undefined && children,
-                dropdown && React__default.createElement(DropdownIcon, null))),
-            loading && (React__default.createElement("div", { className: styles.loadingWrapper },
-                React__default.createElement(Loader, null)))));
+        return (React__default.createElement("button", { ...otherProps, ref: ref, 
+            // eslint-disable-next-line react/button-has-type
+            type: type, className: getAppearanceClasses('unstyled', { className }), disabled: disabled || loading, "aria-busy": loading || undefined }, children));
     }
-    return (React__default.createElement(Element, { ref: ref, className: buildClassnames([
-            styles.base,
-            styles[`${variant}-variant`],
-            styles[`${size}-size`],
-            hasIcon && styles.hasIcon,
-            hasChildren && styles.hasText,
-            dropdown && styles.hasDropdown,
-            className,
-        ]), ...otherProps },
-        (hasChildren || hasIcon) && (React__default.createElement("span", { className: buildClassnames([styles.mainContent, loading && styles.loading]), style: mainContentStyle },
-            iconSlot && iconSlot,
-            children !== undefined && children,
-            dropdown && React__default.createElement(DropdownIcon, null))),
-        loading && (React__default.createElement("div", { className: styles.loadingWrapper },
-            React__default.createElement(Loader, null)))));
+    const isLink = variant === 'link';
+    const appearance = isLink ? 'link' : 'button';
+    const classNames = getAppearanceClasses(appearance, {
+        className,
+        variant: isLink ? undefined : variant,
+        disabled,
+        size,
+        dropdown,
+        iconSlot,
+        children,
+    });
+    return (React__default.createElement("button", { ...otherProps, ref: ref, 
+        // eslint-disable-next-line react/button-has-type
+        type: type, className: classNames, disabled: disabled || loading, "aria-busy": loading || undefined }, isLink ? (React__default.createElement(React__default.Fragment, null,
+        iconSlot,
+        children,
+        dropdown && React__default.createElement(DropdownIcon, null))) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("span", { className: buildClassnames([
+                buttonStyles.content,
+                loading && buttonStyles.hideContent,
+            ]) },
+            iconSlot,
+            children,
+            dropdown && React__default.createElement(DropdownIcon, null)),
+        loading && (React__default.createElement("div", { className: buttonStyles.loadingWrapper, role: "status", "aria-label": "Loading" },
+            React__default.createElement(Loader, { className: buttonStyles.loader })))))));
 });
+ButtonBase.displayName = 'Button';
 const Button = withTokens(ButtonBase);
 
 export { Button, ButtonBase };

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ElementType } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport { DropdownIcon } from '../../icons';\n\nimport styles from './Button.module.scss';\n\n/* eslint-disable react/button-has-type */\n\n/**\n * @deprecated Use the `Action` component instead\n */\nexport const 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      as,\n      ...otherProps\n    }: ButtonProps,\n    ref,\n  ) => {\n    const Element: ElementType = as || 'button';\n\n    if (variant === 'unstyled') {\n      return (\n        <Element\n          ref={ref}\n          className={buildClassnames([styles['unstyled-variant'], className])}\n          {...otherProps}\n        >\n          {children}\n        </Element>\n      );\n    }\n\n    const hasChildren = children !== undefined;\n    const hasIcon = !!iconSlot;\n    const iconSize = hasChildren || size === 'sm' ? 'var(--sizes-base)' : 'var(--sizes-md)';\n    const mainContentStyle = { ...assignCssVars({ buttonIconSize: iconSize }), ...contentStyles };\n\n    if (variant === 'link') {\n      return (\n        <Element\n          ref={ref}\n          className={buildClassnames([styles['link-variant'], hasChildren && styles.hasText, className])}\n          {...otherProps}\n        >\n          {(hasChildren || hasIcon) && (\n            <span className={buildClassnames([styles.mainContent, loading && styles.loading])} style={mainContentStyle}>\n              {iconSlot && iconSlot}\n              {children !== undefined && children}\n              {dropdown && <DropdownIcon />}\n            </span>\n          )}\n\n          {loading && (\n            <div className={styles.loadingWrapper}>\n              <Loader />\n            </div>\n          )}\n        </Element>\n      );\n    }\n\n    return (\n      <Element\n        ref={ref}\n        className={buildClassnames([\n          styles.base,\n          styles[`${variant}-variant`],\n          styles[`${size}-size`],\n          hasIcon && styles.hasIcon,\n          hasChildren && styles.hasText,\n          dropdown && styles.hasDropdown,\n          className,\n        ])}\n        {...otherProps}\n      >\n        {(hasChildren || hasIcon) && (\n          <span className={buildClassnames([styles.mainContent, loading && styles.loading])} style={mainContentStyle}>\n            {iconSlot && iconSlot}\n            {children !== undefined && children}\n            {dropdown && <DropdownIcon />}\n          </span>\n        )}\n\n        {loading && (\n          <div className={styles.loadingWrapper}>\n            <Loader />\n          </div>\n        )}\n      </Element>\n    );\n  },\n);\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["React"],"mappings":";;;;;;;;;AAUA;AAEA;;AAEG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,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,EAAE,EACF,GAAG,UAAU,EACD,EACd,GAAG,KACD;AACF,IAAA,MAAM,OAAO,GAAgB,EAAE,IAAI,QAAQ;IAE3C,IAAI,OAAO,KAAK,UAAU,EAAE;QAC1B,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,SAAS,CAAC,CAAC,EAAA,GAC/D,UAAU,EAAA,EAEb,QAAQ,CACD;AAEb,IAAA;AAED,IAAA,MAAM,WAAW,GAAG,QAAQ,KAAK,SAAS;AAC1C,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ;AAC1B,IAAA,MAAM,QAAQ,GAAG,WAAW,IAAI,IAAI,KAAK,IAAI,GAAG,mBAAmB,GAAG,iBAAiB;AACvF,IAAA,MAAM,gBAAgB,GAAG,EAAE,GAAG,aAAa,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,aAAa,EAAE;IAE7F,IAAI,OAAO,KAAK,MAAM,EAAE;AACtB,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,WAAW,IAAI,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA,GAC1F,UAAU,EAAA;YAEb,CAAC,WAAW,IAAI,OAAO,MACtBA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAA;AACvG,gBAAA,QAAQ,IAAI,QAAQ;gBACpB,QAAQ,KAAK,SAAS,IAAI,QAAQ;AAClC,gBAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,IAAA,CAAG,CACxB,CACR;AAEA,YAAA,OAAO,KACNA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA;AACnC,gBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,CAAG,CACN,CACP,CACO;AAEb,IAAA;IAED,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,IAAI;AACX,YAAA,MAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;AAC5B,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;YACtB,OAAO,IAAI,MAAM,CAAC,OAAO;YACzB,WAAW,IAAI,MAAM,CAAC,OAAO;YAC7B,QAAQ,IAAI,MAAM,CAAC,WAAW;YAC9B,SAAS;AACV,SAAA,CAAC,KACE,UAAU,EAAA;QAEb,CAAC,WAAW,IAAI,OAAO,MACtBA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAA;AACvG,YAAA,QAAQ,IAAI,QAAQ;YACpB,QAAQ,KAAK,SAAS,IAAI,QAAQ;AAClC,YAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,IAAA,CAAG,CACxB,CACR;AAEA,QAAA,OAAO,KACNA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA;AACnC,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,CAAG,CACN,CACP,CACO;AAEd,CAAC;MAGU,MAAM,GAAG,UAAU,CAAC,UAAU;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { withTokens } from '../../hoc/withTokens';\nimport { DropdownIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport buttonStyles from '../Action/styles/button.module.scss';\nimport { getAppearanceClasses } from '../Action/utils';\nimport { Loader } from '../Loader';\nimport { ButtonProps } from './types';\n\n/**\n * @deprecated Use the `Action` component instead.\n * Button triggers actions such as submitting forms, opening dialogs, or deleting records.\n */\nexport const 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      disabled,\n      type = 'button',\n      ...otherProps\n    }: ButtonProps,\n    ref,\n  ) => {\n    if (variant === 'unstyled') {\n      return (\n        <button\n          {...otherProps}\n          ref={ref}\n          // eslint-disable-next-line react/button-has-type\n          type={type}\n          className={getAppearanceClasses('unstyled', { className })}\n          disabled={disabled || loading}\n          aria-busy={loading || undefined}\n        >\n          {children}\n        </button>\n      );\n    }\n\n    const isLink = variant === 'link';\n    const appearance = isLink ? 'link' : 'button';\n\n    const classNames = getAppearanceClasses(appearance, {\n      className,\n      variant: isLink ? undefined : variant,\n      disabled,\n      size,\n      dropdown,\n      iconSlot,\n      children,\n    });\n\n    return (\n      <button\n        {...otherProps}\n        ref={ref}\n        // eslint-disable-next-line react/button-has-type\n        type={type}\n        className={classNames}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n      >\n        {isLink ? (\n          <>\n            {iconSlot}\n            {children}\n            {dropdown && <DropdownIcon />}\n          </>\n        ) : (\n          <>\n            <span\n              className={buildClassnames([\n                buttonStyles.content,\n                loading && buttonStyles.hideContent,\n              ])}\n            >\n              {iconSlot}\n              {children}\n              {dropdown && <DropdownIcon />}\n            </span>\n            {loading && (\n              <div className={buttonStyles.loadingWrapper} role=\"status\" aria-label=\"Loading\">\n                <Loader className={buttonStyles.loader} />\n              </div>\n            )}\n          </>\n        )}\n      </button>\n    );\n  },\n);\n\nButtonBase.displayName = 'Button';\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["React"],"mappings":";;;;;;;;;AAUA;;;AAGG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,GAAG,UAAU,EACD,EACd,GAAG,KACD;IACF,IAAI,OAAO,KAAK,UAAU,EAAE;AAC1B,QAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,UAAU,EACd,GAAG,EAAE,GAAG;;YAER,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,oBAAoB,CAAC,UAAU,EAAE,EAAE,SAAS,EAAE,CAAC,EAC1D,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAAA,WAAA,EAClB,OAAO,IAAI,SAAS,EAAA,EAE9B,QAAQ,CACF;AAEZ,IAAA;AAED,IAAA,MAAM,MAAM,GAAG,OAAO,KAAK,MAAM;IACjC,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ;AAE7C,IAAA,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,EAAE;QAClD,SAAS;QACT,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO;QACrC,QAAQ;QACR,IAAI;QACJ,QAAQ;QACR,QAAQ;QACR,QAAQ;AACT,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,UAAU,EACd,GAAG,EAAE,GAAG;;QAER,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAAA,WAAA,EAClB,OAAO,IAAI,SAAS,IAE9B,MAAM,IACLA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACG,QAAQ;QACR,QAAQ;QACR,QAAQ,IAAIA,6BAAC,YAAY,EAAA,IAAA,CAAG,CAC5B,KAEHA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACEA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,YAAY,CAAC,OAAO;gBACpB,OAAO,IAAI,YAAY,CAAC,WAAW;aACpC,CAAC,EAAA;YAED,QAAQ;YACR,QAAQ;AACR,YAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,IAAA,CAAG,CACxB;AACN,QAAA,OAAO,KACNA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,YAAY,CAAC,cAAc,EAAE,IAAI,EAAC,QAAQ,gBAAY,SAAS,EAAA;AAC7E,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAE,YAAY,CAAC,MAAM,EAAA,CAAI,CACtC,CACP,CACA,CACJ,CACM;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,QAAQ;MAEpB,MAAM,GAAG,UAAU,CAAC,UAAU;;;;"}

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

@@ -1,29 +1,20 @@
-import { ReactNode, ButtonHTMLAttributes, ReactElement, CSSProperties, ElementType } from 'react';
+import { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';
 import { WithTokensProps } from '../../hoc/withTokens/withTokens';
 export type ButtonVariant = 'default' | 'destructive' | 'primary' | 'primaryDestructive' | 'flat' | 'link' | 'unstyled';
+export type ButtonSize = 'xs' | 'sm' | 'base';
 /**
- * Button properties.
+ * @deprecated Use `ActionProps` from the `Action` component instead
  */
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithTokensProps & {
     children?: ReactNode;
     /** Variant styles */
     variant?: ButtonVariant;
     /** Button sizes */
-    size?: 'sm' | 'base';
-    /** Icon */
+    size?: ButtonSize;
+    /** Icon rendered before children */
     iconSlot?: ReactElement;
-    /** Renders a dropdown indicator inside the button */
+    /** Renders a dropdown chevron indicator */
     dropdown?: boolean;
-    /** Renders a loading indicator inside the button */
+    /** Shows a loading spinner */
     loading?: boolean;
-    /** Additional styles for mainContent */
-    contentStyles?: CSSProperties;
-    /** Render as a different element type (e.g. 'a' for links) */
-    as?: ElementType;
-    /** URL when rendered as an anchor (use with as="a") */
-    href?: string;
-    /** Link target (use with as="a") */
-    target?: string;
-    /** Link rel attribute (use with as="a") */
-    rel?: string;
 };

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

@@ -9,15 +9,10 @@ export declare const PageLimitContainer: import("styled-components").StyledCompo
 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;
+    size?: import("../Button/types").ButtonSize | undefined;
     iconSlot?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
-    contentStyles?: import("react").CSSProperties | undefined;
-    as?: import("react").ElementType | undefined;
-    href?: string | undefined;
-    target?: string | undefined;
-    rel?: string | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export declare const PageInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<{
     rel?: string | undefined;

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

@@ -4,13 +4,8 @@ export declare const VideoWrapper: import("styled-components").StyledComponent<"
 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;
+    size?: import("../Button/types").ButtonSize | undefined;
     iconSlot?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
-    contentStyles?: import("react").CSSProperties | undefined;
-    as?: import("react").ElementType | undefined;
-    href?: string | undefined;
-    target?: string | undefined;
-    rel?: string | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

package/package.json

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

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

@@ -1,9 +0,0 @@
-'use strict';
-
-var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
-
-___$insertStyle("._heading-xxl_1cokg_1 {\n  font-family: var(--text-heading-xxl-font-family);\n  font-style: var(--text-heading-xxl-font-style);\n  font-weight: var(--text-heading-xxl-font-weight);\n  font-size: var(--text-heading-xxl-font-size);\n  line-height: var(--text-heading-xxl-line-height);\n  color: var(--text-heading-xxl-color);\n  text-decoration: var(--text-heading-xxl-text-decoration);\n  letter-spacing: var(--text-heading-xxl-letter-spacing);\n}\n\n._heading-xl_1cokg_12 {\n  font-family: var(--text-heading-xl-font-family);\n  font-style: var(--text-heading-xl-font-style);\n  font-weight: var(--text-heading-xl-font-weight);\n  font-size: var(--text-heading-xl-font-size);\n  line-height: var(--text-heading-xl-line-height);\n  color: var(--text-heading-xl-color);\n  text-decoration: var(--text-heading-xl-text-decoration);\n  letter-spacing: var(--text-heading-xl-letter-spacing);\n}\n\n._heading-large_1cokg_23 {\n  font-family: var(--text-heading-large-font-family);\n  font-style: var(--text-heading-large-font-style);\n  font-weight: var(--text-heading-large-font-weight);\n  font-size: var(--text-heading-large-font-size);\n  line-height: var(--text-heading-large-line-height);\n  color: var(--text-heading-large-color);\n  text-decoration: var(--text-heading-large-text-decoration);\n  letter-spacing: var(--text-heading-large-letter-spacing);\n}\n\n._heading-medium_1cokg_34 {\n  font-family: var(--text-heading-medium-font-family);\n  font-style: var(--text-heading-medium-font-style);\n  font-weight: var(--text-heading-medium-font-weight);\n  font-size: var(--text-heading-medium-font-size);\n  line-height: var(--text-heading-medium-line-height);\n  color: var(--text-heading-medium-color);\n  text-decoration: var(--text-heading-medium-text-decoration);\n  letter-spacing: var(--text-heading-medium-letter-spacing);\n}\n\n._heading-small_1cokg_45 {\n  font-family: var(--text-heading-small-font-family);\n  font-style: var(--text-heading-small-font-style);\n  font-weight: var(--text-heading-small-font-weight);\n  font-size: var(--text-heading-small-font-size);\n  line-height: var(--text-heading-small-line-height);\n  color: var(--text-heading-small-color);\n  text-decoration: var(--text-heading-small-text-decoration);\n  letter-spacing: var(--text-heading-small-letter-spacing);\n}\n\n._heading-table_1cokg_56 {\n  font-family: var(--text-heading-table-font-family);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  font-size: var(--text-heading-table-font-size);\n  line-height: var(--text-heading-table-line-height);\n  color: var(--text-heading-table-color);\n  text-decoration: var(--text-heading-table-text-decoration);\n  letter-spacing: var(--text-heading-table-letter-spacing);\n}\n\n._subheading-large_1cokg_67 {\n  font-family: var(--text-subheading-large-font-family);\n  font-style: var(--text-subheading-large-font-style);\n  font-weight: var(--text-subheading-large-font-weight);\n  font-size: var(--text-subheading-large-font-size);\n  line-height: var(--text-subheading-large-line-height);\n  color: var(--text-subheading-large-color);\n  text-decoration: var(--text-subheading-large-text-decoration);\n  letter-spacing: var(--text-subheading-large-letter-spacing);\n}\n\n._subheading-medium_1cokg_78 {\n  font-family: var(--text-subheading-medium-font-family);\n  font-style: var(--text-subheading-medium-font-style);\n  font-weight: var(--text-subheading-medium-font-weight);\n  font-size: var(--text-subheading-medium-font-size);\n  line-height: var(--text-subheading-medium-line-height);\n  color: var(--text-subheading-medium-color);\n  text-decoration: var(--text-subheading-medium-text-decoration);\n  letter-spacing: var(--text-subheading-medium-letter-spacing);\n}\n\n._subheading-small_1cokg_89 {\n  font-family: var(--text-subheading-small-font-family);\n  font-style: var(--text-subheading-small-font-style);\n  font-weight: var(--text-subheading-small-font-weight);\n  font-size: var(--text-subheading-small-font-size);\n  line-height: var(--text-subheading-small-line-height);\n  color: var(--text-subheading-small-color);\n  text-decoration: var(--text-subheading-small-text-decoration);\n  letter-spacing: var(--text-subheading-small-letter-spacing);\n}\n\n._subheading-small-bold_1cokg_100 {\n  font-family: var(--text-subheading-small-bold-font-family);\n  font-style: var(--text-subheading-small-bold-font-style);\n  font-weight: var(--text-subheading-small-bold-font-weight);\n  font-size: var(--text-subheading-small-bold-font-size);\n  line-height: var(--text-subheading-small-bold-line-height);\n  color: var(--text-subheading-small-bold-color);\n  text-decoration: var(--text-subheading-small-bold-text-decoration);\n  letter-spacing: var(--text-subheading-small-bold-letter-spacing);\n}\n\n._body_1cokg_111 {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n}\n\n._body-small_1cokg_122 {\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  font-size: var(--text-body-small-font-size);\n  line-height: var(--text-body-small-line-height);\n  color: var(--text-body-small-color);\n  text-decoration: var(--text-body-small-text-decoration);\n  letter-spacing: var(--text-body-small-letter-spacing);\n}\n\n._body-bold_1cokg_133 {\n  font-family: var(--text-body-bold-font-family);\n  font-style: var(--text-body-bold-font-style);\n  font-weight: var(--text-body-bold-font-weight);\n  font-size: var(--text-body-bold-font-size);\n  line-height: var(--text-body-bold-line-height);\n  color: var(--text-body-bold-color);\n  text-decoration: var(--text-body-bold-text-decoration);\n  letter-spacing: var(--text-body-bold-letter-spacing);\n}\n\n._body-bold-dark_1cokg_144 {\n  font-family: var(--text-body-bold-dark-font-family);\n  font-style: var(--text-body-bold-dark-font-style);\n  font-weight: var(--text-body-bold-dark-font-weight);\n  font-size: var(--text-body-bold-dark-font-size);\n  line-height: var(--text-body-bold-dark-line-height);\n  color: var(--text-body-bold-dark-color);\n  text-decoration: var(--text-body-bold-dark-text-decoration);\n  letter-spacing: var(--text-body-bold-dark-letter-spacing);\n}\n\n._body-small-bold_1cokg_155 {\n  font-family: var(--text-body-small-bold-font-family);\n  font-style: var(--text-body-small-bold-font-style);\n  font-weight: var(--text-body-small-bold-font-weight);\n  font-size: var(--text-body-small-bold-font-size);\n  line-height: var(--text-body-small-bold-line-height);\n  color: var(--text-body-small-bold-color);\n  text-decoration: var(--text-body-small-bold-text-decoration);\n  letter-spacing: var(--text-body-small-bold-letter-spacing);\n}\n\n._button_1cokg_166 {\n  font-family: var(--text-button-font-family);\n  font-style: var(--text-button-font-style);\n  font-weight: var(--text-button-font-weight);\n  font-size: var(--text-button-font-size);\n  line-height: var(--text-button-line-height);\n  color: var(--text-button-color);\n  text-decoration: var(--text-button-text-decoration);\n  letter-spacing: var(--text-button-letter-spacing);\n}\n\n._button-small_1cokg_177 {\n  font-family: var(--text-button-small-font-family);\n  font-style: var(--text-button-small-font-style);\n  font-weight: var(--text-button-small-font-weight);\n  font-size: var(--text-button-small-font-size);\n  line-height: var(--text-button-small-line-height);\n  color: var(--text-button-small-color);\n  text-decoration: var(--text-button-small-text-decoration);\n  letter-spacing: var(--text-button-small-letter-spacing);\n}\n\n._link-large_1cokg_188 {\n  font-family: var(--text-link-large-font-family);\n  font-style: var(--text-link-large-font-style);\n  font-weight: var(--text-link-large-font-weight);\n  font-size: var(--text-link-large-font-size);\n  line-height: var(--text-link-large-line-height);\n  color: var(--text-link-large-color);\n  text-decoration: var(--text-link-large-text-decoration);\n  letter-spacing: var(--text-link-large-letter-spacing);\n}\n\n._link-medium_1cokg_199 {\n  font-family: var(--text-link-medium-font-family);\n  font-style: var(--text-link-medium-font-style);\n  font-weight: var(--text-link-medium-font-weight);\n  font-size: var(--text-link-medium-font-size);\n  line-height: var(--text-link-medium-line-height);\n  color: var(--text-link-medium-color);\n  text-decoration: var(--text-link-medium-text-decoration);\n  letter-spacing: var(--text-link-medium-letter-spacing);\n}\n\n._link_1cokg_188 {\n  font-family: var(--text-link-font-family);\n  font-style: var(--text-link-font-style);\n  font-weight: var(--text-link-font-weight);\n  font-size: var(--text-link-font-size);\n  line-height: var(--text-link-line-height);\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n  letter-spacing: var(--text-link-letter-spacing);\n}\n\n._link-small_1cokg_221 {\n  font-family: var(--text-link-small-font-family);\n  font-style: var(--text-link-small-font-style);\n  font-weight: var(--text-link-small-font-weight);\n  font-size: var(--text-link-small-font-size);\n  line-height: var(--text-link-small-line-height);\n  color: var(--text-link-small-color);\n  text-decoration: var(--text-link-small-text-decoration);\n  letter-spacing: var(--text-link-small-letter-spacing);\n}\n\n._input-label_1cokg_232 {\n  font-family: var(--text-input-label-font-family);\n  font-style: var(--text-input-label-font-style);\n  font-weight: var(--text-input-label-font-weight);\n  font-size: var(--text-input-label-font-size);\n  line-height: var(--text-input-label-line-height);\n  color: var(--text-input-label-color);\n  text-decoration: var(--text-input-label-text-decoration);\n  letter-spacing: var(--text-input-label-letter-spacing);\n}\n\n._input-label-small_1cokg_243 {\n  font-family: var(--text-input-label-small-font-family);\n  font-style: var(--text-input-label-small-font-style);\n  font-weight: var(--text-input-label-small-font-weight);\n  font-size: var(--text-input-label-small-font-size);\n  line-height: var(--text-input-label-small-line-height);\n  color: var(--text-input-label-small-color);\n  text-decoration: var(--text-input-label-small-text-decoration);\n  letter-spacing: var(--text-input-label-small-letter-spacing);\n}\n\n._hint-text_1cokg_254 {\n  font-family: var(--text-hint-text-font-family);\n  font-style: var(--text-hint-text-font-style);\n  font-weight: var(--text-hint-text-font-weight);\n  font-size: var(--text-hint-text-font-size);\n  line-height: var(--text-hint-text-line-height);\n  color: var(--text-hint-text-color);\n  text-decoration: var(--text-hint-text-text-decoration);\n  letter-spacing: var(--text-hint-text-letter-spacing);\n}\n\n._placeholder_1cokg_265 {\n  font-family: var(--text-placeholder-font-family);\n  font-style: var(--text-placeholder-font-style);\n  font-weight: var(--text-placeholder-font-weight);\n  font-size: var(--text-placeholder-font-size);\n  line-height: var(--text-placeholder-line-height);\n  color: var(--text-placeholder-color);\n  text-decoration: var(--text-placeholder-text-decoration);\n  letter-spacing: var(--text-placeholder-letter-spacing);\n}\n\n._placeholder-small_1cokg_276 {\n  font-family: var(--text-placeholder-small-font-family);\n  font-style: var(--text-placeholder-small-font-style);\n  font-weight: var(--text-placeholder-small-font-weight);\n  font-size: var(--text-placeholder-small-font-size);\n  line-height: var(--text-placeholder-small-line-height);\n  color: var(--text-placeholder-small-color);\n  text-decoration: var(--text-placeholder-small-text-decoration);\n  letter-spacing: var(--text-placeholder-small-letter-spacing);\n}\n\n._placeholder-code_1cokg_287 {\n  font-family: var(--text-placeholder-code-font-family);\n  font-style: var(--text-placeholder-code-font-style);\n  font-weight: var(--text-placeholder-code-font-weight);\n  font-size: var(--text-placeholder-code-font-size);\n  line-height: var(--text-placeholder-code-line-height);\n  color: var(--text-placeholder-code-color);\n  text-decoration: var(--text-placeholder-code-text-decoration);\n  letter-spacing: var(--text-placeholder-code-letter-spacing);\n}\n\n._placeholder-code-small_1cokg_298 {\n  font-family: var(--text-placeholder-code-small-font-family);\n  font-style: var(--text-placeholder-code-small-font-style);\n  font-weight: var(--text-placeholder-code-small-font-weight);\n  font-size: var(--text-placeholder-code-small-font-size);\n  line-height: var(--text-placeholder-code-small-line-height);\n  color: var(--text-placeholder-code-small-color);\n  text-decoration: var(--text-placeholder-code-small-text-decoration);\n  letter-spacing: var(--text-placeholder-code-small-letter-spacing);\n}\n\n._error_1cokg_309 {\n  font-family: var(--text-error-font-family);\n  font-style: var(--text-error-font-style);\n  font-weight: var(--text-error-font-weight);\n  font-size: var(--text-error-font-size);\n  line-height: var(--text-error-line-height);\n  color: var(--text-error-color);\n  text-decoration: var(--text-error-text-decoration);\n  letter-spacing: var(--text-error-letter-spacing);\n}\n\n._error-small_1cokg_320 {\n  font-family: var(--text-error-small-font-family);\n  font-style: var(--text-error-small-font-style);\n  font-weight: var(--text-error-small-font-weight);\n  font-size: var(--text-error-small-font-size);\n  line-height: var(--text-error-small-line-height);\n  color: var(--text-error-small-color);\n  text-decoration: var(--text-error-small-text-decoration);\n  letter-spacing: var(--text-error-small-letter-spacing);\n}\n\n._success-small_1cokg_331 {\n  font-family: var(--text-success-small-font-family);\n  font-style: var(--text-success-small-font-style);\n  font-weight: var(--text-success-small-font-weight);\n  font-size: var(--text-success-small-font-size);\n  line-height: var(--text-success-small-line-height);\n  color: var(--text-success-small-color);\n  text-decoration: var(--text-success-small-text-decoration);\n  letter-spacing: var(--text-success-small-letter-spacing);\n}\n\n._base_1cokg_342 {\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: var(--font-family);\n  font-weight: 400;\n  border: 1px solid;\n  background-color: transparent;\n  white-space: nowrap;\n}\n._base_1cokg_342:hover {\n  cursor: pointer;\n}\n._base_1cokg_342:disabled {\n  pointer-events: none;\n  cursor: unset !important;\n}\n\n._base-size_1cokg_364 {\n  --outline-width: var(--sizes-xs);\n  height: var(--sizes-10);\n  padding-left: var(--sizes-sm);\n  padding-right: var(--sizes-sm);\n  border-radius: var(--radius-md);\n  font-size: var(--sizes-base);\n  line-height: var(--sizes-base);\n}\n\n._base-size_1cokg_364._hasText_1cokg_374 {\n  padding-left: var(--sizes-md);\n  padding-right: var(--sizes-md);\n}\n\n._base-size_1cokg_364._hasText_1cokg_374._hasIcon_1cokg_379 {\n  padding-left: var(--sizes-base);\n}\n\n._base-size_1cokg_364._hasText_1cokg_374._hasDropdown_1cokg_383 {\n  padding-right: var(--sizes-base);\n}\n\n._sm-size_1cokg_387 {\n  --outline-width: 2px;\n  height: var(--sizes-lg);\n  padding-left: var(--sizes-sm);\n  padding-right: var(--sizes-sm);\n  border-radius: var(--radius-base);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-font-size);\n}\n\n._sm-size_1cokg_387._hasText_1cokg_374 {\n  padding-left: var(--sizes-base);\n  padding-right: var(--sizes-base);\n}\n\n._sm-size_1cokg_387._hasText_1cokg_374._hasIcon_1cokg_379 {\n  padding-left: var(--sizes-sm);\n}\n\n._sm-size_1cokg_387._hasText_1cokg_374._hasDropdown_1cokg_383 {\n  padding-right: var(--sizes-sm);\n}\n\n._default-variant_1cokg_410 {\n  border-color: var(--colors-neutral-grey-dark);\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n}\n._default-variant_1cokg_410:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._default-variant_1cokg_410:active {\n  background-color: var(--colors-neutral-grey-lightest);\n  border-color: var(--colors-secondary-blue-base);\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n}\n._default-variant_1cokg_410:focus-visible {\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._default-variant_1cokg_410:disabled {\n  box-shadow: none !important;\n  background-color: var(--colors-neutral-grey-base) !important;\n  border-color: var(--colors-neutral-grey-base) !important;\n  color: var(--colors-neutral-ink-light) !important;\n}\n\n._default-variant_1cokg_410._hasText_1cokg_374 {\n  color: var(--colors-neutral-ink-base);\n}\n\n._default-variant_1cokg_410:not(._hasText_1cokg_374) {\n  color: var(--colors-secondary-blue-base);\n}\n\n._destructive-variant_1cokg_442 {\n  border-color: var(--colors-neutral-grey-dark);\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n  color: var(--colors-secondary-red-base);\n}\n._destructive-variant_1cokg_442:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n  color: var(--colors-secondary-red-dark);\n}\n._destructive-variant_1cokg_442:active {\n  background-color: var(--colors-neutral-grey-lightest);\n  border-color: var(--colors-secondary-red-base);\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n  color: var(--colors-secondary-red-dark);\n}\n._destructive-variant_1cokg_442:focus-visible {\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n  outline: 0;\n}\n._destructive-variant_1cokg_442:disabled {\n  box-shadow: none !important;\n  background-color: var(--colors-neutral-grey-base) !important;\n  border-color: var(--colors-neutral-grey-base) !important;\n  color: var(--colors-neutral-ink-light) !important;\n}\n\n._primary-variant_1cokg_469 {\n  background-color: var(--theme-primary, var(--colors-secondary-blue-base));\n  border-color: var(--theme-primary, var(--colors-secondary-blue-base));\n  color: var(--theme-on-primary, white);\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n}\n._primary-variant_1cokg_469:hover {\n  background-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n  border-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n}\n._primary-variant_1cokg_469:active {\n  background-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n  border-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n}\n._primary-variant_1cokg_469:focus-visible {\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._primary-variant_1cokg_469:disabled {\n  box-shadow: none !important;\n  background-color: var(--colors-neutral-grey-base) !important;\n  border-color: var(--colors-neutral-grey-base) !important;\n  color: var(--colors-neutral-ink-light) !important;\n}\n\n._primaryDestructive-variant_1cokg_495 {\n  background-color: var(--colors-secondary-red-base);\n  border-color: var(--colors-secondary-red-base);\n  color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n}\n._primaryDestructive-variant_1cokg_495:hover {\n  background-color: var(--colors-secondary-red-dark);\n  border-color: var(--colors-secondary-red-dark);\n}\n._primaryDestructive-variant_1cokg_495:active {\n  background-color: var(--colors-secondary-red-dark);\n  border-color: var(--colors-secondary-red-dark);\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n}\n._primaryDestructive-variant_1cokg_495:focus-visible {\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n  outline: 0;\n}\n._primaryDestructive-variant_1cokg_495:disabled {\n  box-shadow: none !important;\n  background-color: var(--colors-neutral-grey-base) !important;\n  border-color: var(--colors-neutral-grey-base) !important;\n  color: var(--colors-neutral-ink-light) !important;\n}\n\n._flat-variant_1cokg_521 {\n  border-color: transparent;\n  box-shadow: none;\n  color: var(--colors-neutral-ink-base);\n}\n._flat-variant_1cokg_521:hover {\n  background-color: var(--colors-neutral-grey-light);\n}\n._flat-variant_1cokg_521:active {\n  background-color: var(--colors-neutral-grey-light);\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n}\n._flat-variant_1cokg_521:focus-visible {\n  box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._flat-variant_1cokg_521:disabled {\n  background-color: transparent;\n  border-color: transparent;\n}\n\n._link-variant_1cokg_542 {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  font-family: var(--text-link-font-family);\n  font-style: var(--text-link-font-style);\n  font-weight: var(--text-link-font-weight);\n  font-size: var(--text-link-font-size);\n  line-height: var(--text-link-line-height);\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n  letter-spacing: var(--text-link-letter-spacing);\n  letter-spacing: normal;\n  color: var(--colors-secondary-blue-base);\n}\n._link-variant_1cokg_542:hover {\n  cursor: pointer;\n  color: var(--colors-secondary-blue-dark);\n}\n._link-variant_1cokg_542 > * + * {\n  margin-left: var(--sizes-xs);\n}\n._link-variant_1cokg_542:focus-visible {\n  outline: 0;\n  box-shadow: 0 0 0 4px white, 0 0 0 8px var(--colors-secondary-blue-light);\n  border-radius: 4px;\n}\n\n._unstyled-variant_1cokg_575 {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n}\n._unstyled-variant_1cokg_575:hover {\n  cursor: pointer;\n}\n\n._mainContent_1cokg_586 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--sizes-xs);\n}\n._mainContent_1cokg_586 svg {\n  width: var(--button-icon-size);\n  height: var(--button-icon-size);\n}\n\n._hasText_1cokg_374 ._mainContent_1cokg_586 {\n  gap: var(--sizes-sm);\n}\n\n._mainContent_1cokg_586._loading_1cokg_600 {\n  opacity: 0;\n}\n\n._loadingWrapper_1cokg_604 {\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}");
-var styles = {"heading-xxl":"_heading-xxl_1cokg_1","heading-xl":"_heading-xl_1cokg_12","heading-large":"_heading-large_1cokg_23","heading-medium":"_heading-medium_1cokg_34","heading-small":"_heading-small_1cokg_45","heading-table":"_heading-table_1cokg_56","subheading-large":"_subheading-large_1cokg_67","subheading-medium":"_subheading-medium_1cokg_78","subheading-small":"_subheading-small_1cokg_89","subheading-small-bold":"_subheading-small-bold_1cokg_100","body":"_body_1cokg_111","body-small":"_body-small_1cokg_122","body-bold":"_body-bold_1cokg_133","body-bold-dark":"_body-bold-dark_1cokg_144","body-small-bold":"_body-small-bold_1cokg_155","button":"_button_1cokg_166","button-small":"_button-small_1cokg_177","link-large":"_link-large_1cokg_188","link-medium":"_link-medium_1cokg_199","link":"_link_1cokg_188","link-small":"_link-small_1cokg_221","input-label":"_input-label_1cokg_232","input-label-small":"_input-label-small_1cokg_243","hint-text":"_hint-text_1cokg_254","placeholder":"_placeholder_1cokg_265","placeholder-small":"_placeholder-small_1cokg_276","placeholder-code":"_placeholder-code_1cokg_287","placeholder-code-small":"_placeholder-code-small_1cokg_298","error":"_error_1cokg_309","error-small":"_error-small_1cokg_320","success-small":"_success-small_1cokg_331","base":"_base_1cokg_342","base-size":"_base-size_1cokg_364","hasText":"_hasText_1cokg_374","hasIcon":"_hasIcon_1cokg_379","hasDropdown":"_hasDropdown_1cokg_383","sm-size":"_sm-size_1cokg_387","default-variant":"_default-variant_1cokg_410","destructive-variant":"_destructive-variant_1cokg_442","primary-variant":"_primary-variant_1cokg_469","primaryDestructive-variant":"_primaryDestructive-variant_1cokg_495","flat-variant":"_flat-variant_1cokg_521","link-variant":"_link-variant_1cokg_542","unstyled-variant":"_unstyled-variant_1cokg_575","mainContent":"_mainContent_1cokg_586","loading":"_loading_1cokg_600","loadingWrapper":"_loadingWrapper_1cokg_604"};
-
-module.exports = styles;
-//# sourceMappingURL=Button.module.scss.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.module.scss.cjs","sources":["../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use '../../theme/scss/text.module.scss' as text;\n\n// Base class (shared by default, primary, destructive, primaryDestructive, flat)\n\n.base {\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: var(--font-family);\n  font-weight: 400;\n  border: 1px solid;\n  background-color: transparent;\n  white-space: nowrap;\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:disabled {\n    pointer-events: none;\n    cursor: unset !important;\n  }\n}\n\n// Size classes\n\n.base-size {\n  --outline-width: var(--sizes-xs);\n\n  height: var(--sizes-10);\n  padding-left: var(--sizes-sm);\n  padding-right: var(--sizes-sm);\n  border-radius: var(--radius-md);\n  font-size: var(--sizes-base);\n  line-height: var(--sizes-base);\n}\n\n.base-size.hasText {\n  padding-left: var(--sizes-md);\n  padding-right: var(--sizes-md);\n}\n\n.base-size.hasText.hasIcon {\n  padding-left: var(--sizes-base);\n}\n\n.base-size.hasText.hasDropdown {\n  padding-right: var(--sizes-base);\n}\n\n.sm-size {\n  --outline-width: 2px;\n\n  height: var(--sizes-lg);\n  padding-left: var(--sizes-sm);\n  padding-right: var(--sizes-sm);\n  border-radius: var(--radius-base);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-font-size); // intentionally matches font-size for button height control\n}\n\n.sm-size.hasText {\n  padding-left: var(--sizes-base);\n  padding-right: var(--sizes-base);\n}\n\n.sm-size.hasText.hasIcon {\n  padding-left: var(--sizes-sm);\n}\n\n.sm-size.hasText.hasDropdown {\n  padding-right: var(--sizes-sm);\n}\n\n// Variant: default\n\n.default-variant {\n  border-color: var(--colors-neutral-grey-dark);\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &:active {\n    background-color: var(--colors-neutral-grey-lightest);\n    border-color: var(--colors-secondary-blue-base);\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: var(--colors-neutral-grey-base) !important;\n    border-color: var(--colors-neutral-grey-base) !important;\n    color: var(--colors-neutral-ink-light) !important;\n  }\n}\n\n// Default variant conditional color based on hasText\n.default-variant.hasText {\n  color: var(--colors-neutral-ink-base);\n}\n\n.default-variant:not(.hasText) {\n  color: var(--colors-secondary-blue-base);\n}\n\n// Variant: destructive (extends default visually)\n\n.destructive-variant {\n  border-color: var(--colors-neutral-grey-dark);\n  background-color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n  color: var(--colors-secondary-red-base);\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n    color: var(--colors-secondary-red-dark);\n  }\n\n  &:active {\n    background-color: var(--colors-neutral-grey-lightest);\n    border-color: var(--colors-secondary-red-base);\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n    color: var(--colors-secondary-red-dark);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: var(--colors-neutral-grey-base) !important;\n    border-color: var(--colors-neutral-grey-base) !important;\n    color: var(--colors-neutral-ink-light) !important;\n  }\n}\n\n// Variant: primary\n\n.primary-variant {\n  background-color: var(--theme-primary, var(--colors-secondary-blue-base));\n  border-color: var(--theme-primary, var(--colors-secondary-blue-base));\n  color: var(--theme-on-primary, white);\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n\n  &:hover {\n    background-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n    border-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n  }\n\n  &:active {\n    background-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n    border-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: var(--colors-neutral-grey-base) !important;\n    border-color: var(--colors-neutral-grey-base) !important;\n    color: var(--colors-neutral-ink-light) !important;\n  }\n}\n\n// Variant: primaryDestructive\n\n.primaryDestructive-variant {\n  background-color: var(--colors-secondary-red-base);\n  border-color: var(--colors-secondary-red-base);\n  color: white;\n  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n\n  &:hover {\n    background-color: var(--colors-secondary-red-dark);\n    border-color: var(--colors-secondary-red-dark);\n  }\n\n  &:active {\n    background-color: var(--colors-secondary-red-dark);\n    border-color: var(--colors-secondary-red-dark);\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-red-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    box-shadow: none !important;\n    background-color: var(--colors-neutral-grey-base) !important;\n    border-color: var(--colors-neutral-grey-base) !important;\n    color: var(--colors-neutral-ink-light) !important;\n  }\n}\n\n// Variant: flat\n\n.flat-variant {\n  border-color: transparent;\n  box-shadow: none;\n  color: var(--colors-neutral-ink-base);\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-light);\n  }\n\n  &:active {\n    background-color: var(--colors-neutral-grey-light);\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:disabled {\n    background-color: transparent;\n    border-color: transparent;\n  }\n}\n\n// Variant: link (standalone — does NOT use .base)\n\n.link-variant {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  font: inherit;\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n\n  @include text.link;\n\n  // Override mixin's letter-spacing: the SC version never set it\n  letter-spacing: normal;\n  color: var(--colors-secondary-blue-base);\n\n  &:hover {\n    cursor: pointer;\n    color: var(--colors-secondary-blue-dark);\n  }\n\n  & > * + * {\n    margin-left: var(--sizes-xs);\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow:\n      0 0 0 4px white,\n      0 0 0 8px var(--colors-secondary-blue-light);\n    border-radius: 4px;\n  }\n}\n\n// Variant: unstyled (standalone — does NOT use .base)\n\n.unstyled-variant {\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\n// Sub-elements\n\n.mainContent {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--sizes-xs);\n\n  svg {\n    width: var(--button-icon-size);\n    height: var(--button-icon-size);\n  }\n}\n\n.hasText .mainContent {\n  gap: var(--sizes-sm);\n}\n\n.mainContent.loading {\n  opacity: 0;\n}\n\n.loadingWrapper {\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":";;;;AAGE,eAAA,CAAA,kqsBAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,uBAAA,CAAA,kCAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,iBAAA,CAAA,4BAAA,CAAA,QAAA,CAAA,mBAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,mBAAA,CAAA,8BAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,mBAAA,CAAA,8BAAA,CAAA,kBAAA,CAAA,6BAAA,CAAA,wBAAA,CAAA,mCAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,4BAAA,CAAA,qBAAA,CAAA,gCAAA,CAAA,iBAAA,CAAA,4BAAA,CAAA,4BAAA,CAAA,uCAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,kBAAA,CAAA,6BAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,2BAAA;;;;"}