@veeqo/ui 14.10.2 → 14.11.0-beta-1

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":"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"}
+{"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/Card/Card.cjs

@@ -1,8 +1,11 @@
 'use strict';
 
 var React = require('react');
+var framerMotion = require('framer-motion');
 var CardHeader = require('../CardHeader/CardHeader.cjs');
-var styled = require('./styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var Card_module = require('./Card.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -12,6 +15,30 @@ const collapseAnimationVariants = {
     expanded: { height: 'auto' },
     collapsed: { height: 0 },
 };
+/**
+ * Stable class used for styled-components selector interpolation.
+ * Consumers (e.g. Modal) use `& > ${Card.Surface}` in template literals,
+ * which calls `.toString()` and expects a CSS class selector.
+ */
+const SURFACE_STABLE_CLASS = 'veeqo-card-surface';
+const Surface = React__default.default.forwardRef(({ elevation = 1, accent, className, children, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([
+        SURFACE_STABLE_CLASS,
+        Card_module.surface,
+        Card_module[`elevation-${elevation}`],
+        accent ? Card_module[`accent-${accent}`] : undefined,
+        className,
+    ]), ...rest }, children)));
+Surface.displayName = 'Card.Surface';
+Surface.toString = () => `.${SURFACE_STABLE_CLASS}`;
+const Section = React__default.default.forwardRef(({ className, ...rest }, ref) => (React__default.default.createElement("section", { ref: ref, className: buildClassnames.buildClassnames([Card_module.section, className]), ...rest })));
+Section.displayName = 'Card.Section';
+const FullBleed = React__default.default.forwardRef(({ className, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([Card_module.fullBleed, className]), ...rest })));
+FullBleed.displayName = 'Card.FullBleed';
+const FOOTER_STABLE_CLASS = 'veeqo-card-footer';
+const Footer = React__default.default.forwardRef(({ className, ...rest }, ref) => (React__default.default.createElement("footer", { ref: ref, className: buildClassnames.buildClassnames([FOOTER_STABLE_CLASS, Card_module.footer, className]), ...rest })));
+Footer.displayName = 'Card.Footer';
+Footer.toString = () => `.${FOOTER_STABLE_CLASS}`;
+/* --- Main Card component --- */
 const Card = ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
     const [isCollapsed, setIsCollapsed] = React.useState(false);
     const toggleCollapsed = () => {
@@ -20,18 +47,18 @@ const Card = ({ className, style, title, subtitle, headerTitleSlot, headerAction
     const showHeader = title || headerTitleSlot !== undefined;
     const headerMarkup = showHeader && (React__default.default.createElement(CardHeader.CardHeader, { title: title, subtitle: subtitle, titleSlot: headerTitleSlot, actionSlot: headerActionSlot, action: action, onClickClose: onClose, isCollapsed: isCollapsed, onClickCollapse: collapsable ? toggleCollapsed : undefined }));
     const showBody = (collapsable && !isCollapsed) || !collapsable;
-    const bodyMarkup = (React__default.default.createElement(styled.Body, { animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
-        React__default.default.createElement(styled.Section, null, children)));
-    const footerMarkup = renderFooter !== undefined && React__default.default.createElement(styled.Footer, null, renderFooter());
-    return (React__default.default.createElement(styled.Surface, { className: className, style: style, elevation: elevation, accent: accent },
+    const bodyMarkup = (React__default.default.createElement(framerMotion.motion.div, { className: Card_module.body, animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
+        React__default.default.createElement(Section, null, children)));
+    const footerMarkup = renderFooter !== undefined && React__default.default.createElement(Footer, null, renderFooter());
+    return (React__default.default.createElement(Surface, { className: className, style: style, elevation: elevation, accent: accent },
         headerMarkup,
         bodyMarkup,
         footerMarkup));
 };
-Card.Surface = styled.Surface;
-Card.Section = styled.Section;
-Card.FullBleed = styled.FullBleed;
-Card.Footer = styled.Footer;
+Card.Surface = Surface;
+Card.Section = Section;
+Card.FullBleed = FullBleed;
+Card.Footer = Footer;
 
 exports.Card = Card;
 //# sourceMappingURL=Card.cjs.map

package/dist/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n  expanded: { height: 'auto' },\n  collapsed: { height: 0 },\n};\n\ntype CardAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport type CardProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  title?: string;\n  subtitle?: string;\n  headerTitleSlot?: React.ReactNode;\n  headerActionSlot?: React.ReactNode;\n  action?: CardAction;\n  collapsable?: boolean;\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children: ReactNode;\n  onClose?: () => void;\n  renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n  className,\n  style,\n  title,\n  subtitle,\n  headerTitleSlot,\n  headerActionSlot,\n  action,\n  collapsable,\n  elevation,\n  accent,\n  children,\n  onClose,\n  renderFooter,\n}: CardProps) => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const toggleCollapsed = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  const showHeader = title || headerTitleSlot !== undefined;\n  const headerMarkup = showHeader && (\n    <CardHeader\n      title={title}\n      subtitle={subtitle}\n      titleSlot={headerTitleSlot}\n      actionSlot={headerActionSlot}\n      action={action}\n      onClickClose={onClose}\n      isCollapsed={isCollapsed}\n      onClickCollapse={collapsable ? toggleCollapsed : undefined}\n    />\n  );\n\n  const showBody = (collapsable && !isCollapsed) || !collapsable;\n  const bodyMarkup = (\n    <Body\n      animate={showBody ? 'expanded' : 'collapsed'}\n      variants={collapseAnimationVariants}\n      transition={{ duration: 0.3, ease: 'easeOut' }}\n    >\n      <Section>{children}</Section>\n    </Body>\n  );\n\n  const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n  return (\n    <Surface className={className} style={style} elevation={elevation} accent={accent}>\n      {headerMarkup}\n      {bodyMarkup}\n      {footerMarkup}\n    </Surface>\n  );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["useState","React","CardHeader","Body","Section","Footer","Surface","FullBleed"],"mappings":";;;;;;;;;;AAKA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AAuBM,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BC,sBAAA,CAAA,aAAA,CAACC,qBAAU,EAAA,EACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAAA,CAC1D,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdD,sBAAA,CAAA,aAAA,CAACE,WAAI,EAAA,EACH,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAF,sBAAA,CAAA,aAAA,CAACG,cAAO,EAAA,IAAA,EAAE,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,IAAA,EAAE,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEJ,sBAAA,CAAA,aAAA,CAACK,cAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAGA,cAAO;AACtB,IAAI,CAAC,OAAO,GAAGF,cAAO;AACtB,IAAI,CAAC,SAAS,GAAGG,gBAAS;AAC1B,IAAI,CAAC,MAAM,GAAGF,aAAM;;;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { CardHeader } from '../CardHeader';\nimport { buildClassnames } from '../../utils';\nimport styles from './Card.module.scss';\n\nexport type CardElevation = 0 | 1 | 2 | 3 | 4;\n\nconst collapseAnimationVariants = {\n  expanded: { height: 'auto' },\n  collapsed: { height: 0 },\n};\n\ntype CardAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport type CardProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  title?: string;\n  subtitle?: string;\n  headerTitleSlot?: React.ReactNode;\n  headerActionSlot?: React.ReactNode;\n  action?: CardAction;\n  collapsable?: boolean;\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children: ReactNode;\n  onClose?: () => void;\n  renderFooter?: () => ReactNode;\n};\n\n/* --- Sub-components --- */\n\nexport interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children?: ReactNode;\n}\n\n/**\n * Stable class used for styled-components selector interpolation.\n * Consumers (e.g. Modal) use `& > ${Card.Surface}` in template literals,\n * which calls `.toString()` and expects a CSS class selector.\n */\nconst SURFACE_STABLE_CLASS = 'veeqo-card-surface';\n\nconst Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n  ({ elevation = 1, accent, className, children, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([\n        SURFACE_STABLE_CLASS,\n        styles.surface,\n        styles[`elevation-${elevation}`],\n        accent ? styles[`accent-${accent}`] : undefined,\n        className,\n      ])}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\nSurface.displayName = 'Card.Surface';\nSurface.toString = () => `.${SURFACE_STABLE_CLASS}`;\n\nconst Section = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, ...rest }, ref) => (\n    <section ref={ref} className={buildClassnames([styles.section, className])} {...rest} />\n  ),\n);\nSection.displayName = 'Card.Section';\n\nconst FullBleed = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.fullBleed, className])} {...rest} />\n  ),\n);\nFullBleed.displayName = 'Card.FullBleed';\n\nconst FOOTER_STABLE_CLASS = 'veeqo-card-footer';\n\nconst Footer = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, ...rest }, ref) => (\n    <footer ref={ref} className={buildClassnames([FOOTER_STABLE_CLASS, styles.footer, className])} {...rest} />\n  ),\n);\nFooter.displayName = 'Card.Footer';\nFooter.toString = () => `.${FOOTER_STABLE_CLASS}`;\n\n/* --- Main Card component --- */\n\nexport const Card = ({\n  className,\n  style,\n  title,\n  subtitle,\n  headerTitleSlot,\n  headerActionSlot,\n  action,\n  collapsable,\n  elevation,\n  accent,\n  children,\n  onClose,\n  renderFooter,\n}: CardProps) => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const toggleCollapsed = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  const showHeader = title || headerTitleSlot !== undefined;\n  const headerMarkup = showHeader && (\n    <CardHeader\n      title={title}\n      subtitle={subtitle}\n      titleSlot={headerTitleSlot}\n      actionSlot={headerActionSlot}\n      action={action}\n      onClickClose={onClose}\n      isCollapsed={isCollapsed}\n      onClickCollapse={collapsable ? toggleCollapsed : undefined}\n    />\n  );\n\n  const showBody = (collapsable && !isCollapsed) || !collapsable;\n  const bodyMarkup = (\n    <motion.div\n      className={styles.body}\n      animate={showBody ? 'expanded' : 'collapsed'}\n      variants={collapseAnimationVariants}\n      transition={{ duration: 0.3, ease: 'easeOut' }}\n    >\n      <Section>{children}</Section>\n    </motion.div>\n  );\n\n  const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n  return (\n    <Surface className={className} style={style} elevation={elevation} accent={accent}>\n      {headerMarkup}\n      {bodyMarkup}\n      {footerMarkup}\n    </Surface>\n  );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["React","buildClassnames","styles","useState","CardHeader","motion"],"mappings":"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"}

package/dist/components/Card/Card.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { CardElevation } from './styled';
+export type CardElevation = 0 | 1 | 2 | 3 | 4;
 type CardAction = {
     title: string;
     onClick: () => void;
@@ -19,11 +19,16 @@ export type CardProps = {
     onClose?: () => void;
     renderFooter?: () => ReactNode;
 };
+export interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {
+    elevation?: CardElevation;
+    accent?: 'info' | 'success' | 'error';
+    children?: ReactNode;
+}
 export declare const Card: {
     ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }: CardProps): React.JSX.Element;
-    Surface: import("styled-components").StyledComponent<"div", any, import("./styled").SurfaceProps, never>;
-    Section: import("styled-components").StyledComponent<"section", any, {}, never>;
-    FullBleed: import("styled-components").StyledComponent<"div", any, {}, never>;
-    Footer: import("styled-components").StyledComponent<"footer", any, {}, never>;
+    Surface: React.ForwardRefExoticComponent<SurfaceProps & React.RefAttributes<HTMLDivElement>>;
+    Section: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+    FullBleed: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 };
 export {};

package/dist/components/Card/Card.js

@@ -1,11 +1,38 @@
 import React__default, { useState } from 'react';
+import { motion } from 'framer-motion';
 import { CardHeader } from '../CardHeader/CardHeader.js';
-import { Body, Section, Footer, Surface, FullBleed } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './Card.module.scss.js';
 
 const collapseAnimationVariants = {
     expanded: { height: 'auto' },
     collapsed: { height: 0 },
 };
+/**
+ * Stable class used for styled-components selector interpolation.
+ * Consumers (e.g. Modal) use `& > ${Card.Surface}` in template literals,
+ * which calls `.toString()` and expects a CSS class selector.
+ */
+const SURFACE_STABLE_CLASS = 'veeqo-card-surface';
+const Surface = React__default.forwardRef(({ elevation = 1, accent, className, children, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([
+        SURFACE_STABLE_CLASS,
+        styles.surface,
+        styles[`elevation-${elevation}`],
+        accent ? styles[`accent-${accent}`] : undefined,
+        className,
+    ]), ...rest }, children)));
+Surface.displayName = 'Card.Surface';
+Surface.toString = () => `.${SURFACE_STABLE_CLASS}`;
+const Section = React__default.forwardRef(({ className, ...rest }, ref) => (React__default.createElement("section", { ref: ref, className: buildClassnames([styles.section, className]), ...rest })));
+Section.displayName = 'Card.Section';
+const FullBleed = React__default.forwardRef(({ className, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.fullBleed, className]), ...rest })));
+FullBleed.displayName = 'Card.FullBleed';
+const FOOTER_STABLE_CLASS = 'veeqo-card-footer';
+const Footer = React__default.forwardRef(({ className, ...rest }, ref) => (React__default.createElement("footer", { ref: ref, className: buildClassnames([FOOTER_STABLE_CLASS, styles.footer, className]), ...rest })));
+Footer.displayName = 'Card.Footer';
+Footer.toString = () => `.${FOOTER_STABLE_CLASS}`;
+/* --- Main Card component --- */
 const Card = ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
     const [isCollapsed, setIsCollapsed] = useState(false);
     const toggleCollapsed = () => {
@@ -14,7 +41,7 @@ const Card = ({ className, style, title, subtitle, headerTitleSlot, headerAction
     const showHeader = title || headerTitleSlot !== undefined;
     const headerMarkup = showHeader && (React__default.createElement(CardHeader, { title: title, subtitle: subtitle, titleSlot: headerTitleSlot, actionSlot: headerActionSlot, action: action, onClickClose: onClose, isCollapsed: isCollapsed, onClickCollapse: collapsable ? toggleCollapsed : undefined }));
     const showBody = (collapsable && !isCollapsed) || !collapsable;
-    const bodyMarkup = (React__default.createElement(Body, { animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
+    const bodyMarkup = (React__default.createElement(motion.div, { className: styles.body, animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
         React__default.createElement(Section, null, children)));
     const footerMarkup = renderFooter !== undefined && React__default.createElement(Footer, null, renderFooter());
     return (React__default.createElement(Surface, { className: className, style: style, elevation: elevation, accent: accent },

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n  expanded: { height: 'auto' },\n  collapsed: { height: 0 },\n};\n\ntype CardAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport type CardProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  title?: string;\n  subtitle?: string;\n  headerTitleSlot?: React.ReactNode;\n  headerActionSlot?: React.ReactNode;\n  action?: CardAction;\n  collapsable?: boolean;\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children: ReactNode;\n  onClose?: () => void;\n  renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n  className,\n  style,\n  title,\n  subtitle,\n  headerTitleSlot,\n  headerActionSlot,\n  action,\n  collapsable,\n  elevation,\n  accent,\n  children,\n  onClose,\n  renderFooter,\n}: CardProps) => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const toggleCollapsed = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  const showHeader = title || headerTitleSlot !== undefined;\n  const headerMarkup = showHeader && (\n    <CardHeader\n      title={title}\n      subtitle={subtitle}\n      titleSlot={headerTitleSlot}\n      actionSlot={headerActionSlot}\n      action={action}\n      onClickClose={onClose}\n      isCollapsed={isCollapsed}\n      onClickCollapse={collapsable ? toggleCollapsed : undefined}\n    />\n  );\n\n  const showBody = (collapsable && !isCollapsed) || !collapsable;\n  const bodyMarkup = (\n    <Body\n      animate={showBody ? 'expanded' : 'collapsed'}\n      variants={collapseAnimationVariants}\n      transition={{ duration: 0.3, ease: 'easeOut' }}\n    >\n      <Section>{children}</Section>\n    </Body>\n  );\n\n  const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n  return (\n    <Surface className={className} style={style} elevation={elevation} accent={accent}>\n      {headerMarkup}\n      {bodyMarkup}\n      {footerMarkup}\n    </Surface>\n  );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["React"],"mappings":";;;;AAKA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AAuBM,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAAA,CAC1D,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA,EAAE,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,EAAE,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,IAAI,CAAC,MAAM,GAAG,MAAM;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { CardHeader } from '../CardHeader';\nimport { buildClassnames } from '../../utils';\nimport styles from './Card.module.scss';\n\nexport type CardElevation = 0 | 1 | 2 | 3 | 4;\n\nconst collapseAnimationVariants = {\n  expanded: { height: 'auto' },\n  collapsed: { height: 0 },\n};\n\ntype CardAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport type CardProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  title?: string;\n  subtitle?: string;\n  headerTitleSlot?: React.ReactNode;\n  headerActionSlot?: React.ReactNode;\n  action?: CardAction;\n  collapsable?: boolean;\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children: ReactNode;\n  onClose?: () => void;\n  renderFooter?: () => ReactNode;\n};\n\n/* --- Sub-components --- */\n\nexport interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children?: ReactNode;\n}\n\n/**\n * Stable class used for styled-components selector interpolation.\n * Consumers (e.g. Modal) use `& > ${Card.Surface}` in template literals,\n * which calls `.toString()` and expects a CSS class selector.\n */\nconst SURFACE_STABLE_CLASS = 'veeqo-card-surface';\n\nconst Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n  ({ elevation = 1, accent, className, children, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([\n        SURFACE_STABLE_CLASS,\n        styles.surface,\n        styles[`elevation-${elevation}`],\n        accent ? styles[`accent-${accent}`] : undefined,\n        className,\n      ])}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\nSurface.displayName = 'Card.Surface';\nSurface.toString = () => `.${SURFACE_STABLE_CLASS}`;\n\nconst Section = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, ...rest }, ref) => (\n    <section ref={ref} className={buildClassnames([styles.section, className])} {...rest} />\n  ),\n);\nSection.displayName = 'Card.Section';\n\nconst FullBleed = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.fullBleed, className])} {...rest} />\n  ),\n);\nFullBleed.displayName = 'Card.FullBleed';\n\nconst FOOTER_STABLE_CLASS = 'veeqo-card-footer';\n\nconst Footer = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, ...rest }, ref) => (\n    <footer ref={ref} className={buildClassnames([FOOTER_STABLE_CLASS, styles.footer, className])} {...rest} />\n  ),\n);\nFooter.displayName = 'Card.Footer';\nFooter.toString = () => `.${FOOTER_STABLE_CLASS}`;\n\n/* --- Main Card component --- */\n\nexport const Card = ({\n  className,\n  style,\n  title,\n  subtitle,\n  headerTitleSlot,\n  headerActionSlot,\n  action,\n  collapsable,\n  elevation,\n  accent,\n  children,\n  onClose,\n  renderFooter,\n}: CardProps) => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const toggleCollapsed = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  const showHeader = title || headerTitleSlot !== undefined;\n  const headerMarkup = showHeader && (\n    <CardHeader\n      title={title}\n      subtitle={subtitle}\n      titleSlot={headerTitleSlot}\n      actionSlot={headerActionSlot}\n      action={action}\n      onClickClose={onClose}\n      isCollapsed={isCollapsed}\n      onClickCollapse={collapsable ? toggleCollapsed : undefined}\n    />\n  );\n\n  const showBody = (collapsable && !isCollapsed) || !collapsable;\n  const bodyMarkup = (\n    <motion.div\n      className={styles.body}\n      animate={showBody ? 'expanded' : 'collapsed'}\n      variants={collapseAnimationVariants}\n      transition={{ duration: 0.3, ease: 'easeOut' }}\n    >\n      <Section>{children}</Section>\n    </motion.div>\n  );\n\n  const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n  return (\n    <Surface className={className} style={style} elevation={elevation} accent={accent}>\n      {headerMarkup}\n      {bodyMarkup}\n      {footerMarkup}\n    </Surface>\n  );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._surface_1a6rc_1 {\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Elevation levels */\n._elevation-0_1a6rc_12 {\n  box-shadow: none;\n}\n\n._elevation-1_1a6rc_16 {\n  box-shadow: var(--shadows-sm);\n}\n\n._elevation-2_1a6rc_20 {\n  box-shadow: var(--shadows-base);\n}\n\n._elevation-3_1a6rc_24 {\n  box-shadow: var(--shadows-md);\n}\n\n._elevation-4_1a6rc_28 {\n  box-shadow: var(--shadows-lg);\n}\n\n/* Accent bar via pseudo-element */\n._accent-info_1a6rc_33::after,\n._accent-success_1a6rc_34::after,\n._accent-error_1a6rc_35::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: var(--sizes-xs);\n}\n\n._accent-info_1a6rc_33::after {\n  background-color: var(--colors-secondary-blue-base);\n}\n\n._accent-success_1a6rc_34::after {\n  background-color: var(--colors-secondary-green-base);\n}\n\n._accent-error_1a6rc_35::after {\n  background-color: var(--colors-secondary-red-base);\n}\n\n/* Body: motion.div wrapper for collapse */\n._body_1a6rc_57 {\n  overflow-y: hidden;\n}\n._body_1a6rc_57:not(:first-child) > ._section_1a6rc_60:first-child {\n  margin-top: 0;\n}\n\n/* Section */\n._section_1a6rc_60 {\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-top: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n  font-family: var(--text-body-font-family);\n  font-size: var(--text-body-font-size);\n  font-weight: var(--text-body-font-weight);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n}\n._section_1a6rc_60 + ._section_1a6rc_60 {\n  border-top: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  padding-top: var(--sizes-md);\n}\n\n/* FullBleed */\n._fullBleed_1a6rc_82 {\n  margin-left: calc(-1 * var(--sizes-md));\n  margin-right: calc(-1 * var(--sizes-md));\n}\n\n/* Footer */\n._footer_1a6rc_88 {\n  margin-top: var(--sizes-base);\n  padding: var(--sizes-md);\n  z-index: 2;\n}");
+var styles = {"surface":"_surface_1a6rc_1","elevation-0":"_elevation-0_1a6rc_12","elevation-1":"_elevation-1_1a6rc_16","elevation-2":"_elevation-2_1a6rc_20","elevation-3":"_elevation-3_1a6rc_24","elevation-4":"_elevation-4_1a6rc_28","accent-info":"_accent-info_1a6rc_33","accent-success":"_accent-success_1a6rc_34","accent-error":"_accent-error_1a6rc_35","body":"_body_1a6rc_57","section":"_section_1a6rc_60","fullBleed":"_fullBleed_1a6rc_82","footer":"_footer_1a6rc_88"};
+
+module.exports = styles;
+//# sourceMappingURL=Card.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.module.scss.cjs","sources":["../../../src/components/Card/Card.module.scss"],"sourcesContent":[".surface {\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Elevation levels */\n.elevation-0 {\n  box-shadow: none;\n}\n\n.elevation-1 {\n  box-shadow: var(--shadows-sm);\n}\n\n.elevation-2 {\n  box-shadow: var(--shadows-base);\n}\n\n.elevation-3 {\n  box-shadow: var(--shadows-md);\n}\n\n.elevation-4 {\n  box-shadow: var(--shadows-lg);\n}\n\n/* Accent bar via pseudo-element */\n.accent-info::after,\n.accent-success::after,\n.accent-error::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: var(--sizes-xs);\n}\n\n.accent-info::after {\n  background-color: var(--colors-secondary-blue-base);\n}\n\n.accent-success::after {\n  background-color: var(--colors-secondary-green-base);\n}\n\n.accent-error::after {\n  background-color: var(--colors-secondary-red-base);\n}\n\n/* Body: motion.div wrapper for collapse */\n.body {\n  overflow-y: hidden;\n\n  &:not(:first-child) > .section:first-child {\n    margin-top: 0;\n  }\n}\n\n/* Section */\n.section {\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-top: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n\n  font-family: var(--text-body-font-family);\n  font-size: var(--text-body-font-size);\n  font-weight: var(--text-body-font-weight);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n\n  & + & {\n    border-top: var(--sizes-line) solid var(--colors-neutral-grey-base);\n    padding-top: var(--sizes-md);\n  }\n}\n\n/* FullBleed */\n.fullBleed {\n  margin-left: calc(-1 * var(--sizes-md));\n  margin-right: calc(-1 * var(--sizes-md));\n}\n\n/* Footer */\n.footer {\n  margin-top: var(--sizes-base);\n  padding: var(--sizes-md);\n  z-index: 2;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,8iEAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._surface_1a6rc_1 {\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Elevation levels */\n._elevation-0_1a6rc_12 {\n  box-shadow: none;\n}\n\n._elevation-1_1a6rc_16 {\n  box-shadow: var(--shadows-sm);\n}\n\n._elevation-2_1a6rc_20 {\n  box-shadow: var(--shadows-base);\n}\n\n._elevation-3_1a6rc_24 {\n  box-shadow: var(--shadows-md);\n}\n\n._elevation-4_1a6rc_28 {\n  box-shadow: var(--shadows-lg);\n}\n\n/* Accent bar via pseudo-element */\n._accent-info_1a6rc_33::after,\n._accent-success_1a6rc_34::after,\n._accent-error_1a6rc_35::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: var(--sizes-xs);\n}\n\n._accent-info_1a6rc_33::after {\n  background-color: var(--colors-secondary-blue-base);\n}\n\n._accent-success_1a6rc_34::after {\n  background-color: var(--colors-secondary-green-base);\n}\n\n._accent-error_1a6rc_35::after {\n  background-color: var(--colors-secondary-red-base);\n}\n\n/* Body: motion.div wrapper for collapse */\n._body_1a6rc_57 {\n  overflow-y: hidden;\n}\n._body_1a6rc_57:not(:first-child) > ._section_1a6rc_60:first-child {\n  margin-top: 0;\n}\n\n/* Section */\n._section_1a6rc_60 {\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-top: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n  font-family: var(--text-body-font-family);\n  font-size: var(--text-body-font-size);\n  font-weight: var(--text-body-font-weight);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n}\n._section_1a6rc_60 + ._section_1a6rc_60 {\n  border-top: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  padding-top: var(--sizes-md);\n}\n\n/* FullBleed */\n._fullBleed_1a6rc_82 {\n  margin-left: calc(-1 * var(--sizes-md));\n  margin-right: calc(-1 * var(--sizes-md));\n}\n\n/* Footer */\n._footer_1a6rc_88 {\n  margin-top: var(--sizes-base);\n  padding: var(--sizes-md);\n  z-index: 2;\n}");
+var styles = {"surface":"_surface_1a6rc_1","elevation-0":"_elevation-0_1a6rc_12","elevation-1":"_elevation-1_1a6rc_16","elevation-2":"_elevation-2_1a6rc_20","elevation-3":"_elevation-3_1a6rc_24","elevation-4":"_elevation-4_1a6rc_28","accent-info":"_accent-info_1a6rc_33","accent-success":"_accent-success_1a6rc_34","accent-error":"_accent-error_1a6rc_35","body":"_body_1a6rc_57","section":"_section_1a6rc_60","fullBleed":"_fullBleed_1a6rc_82","footer":"_footer_1a6rc_88"};
+
+export { styles as default };
+//# sourceMappingURL=Card.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.module.scss.js","sources":["../../../src/components/Card/Card.module.scss"],"sourcesContent":[".surface {\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Elevation levels */\n.elevation-0 {\n  box-shadow: none;\n}\n\n.elevation-1 {\n  box-shadow: var(--shadows-sm);\n}\n\n.elevation-2 {\n  box-shadow: var(--shadows-base);\n}\n\n.elevation-3 {\n  box-shadow: var(--shadows-md);\n}\n\n.elevation-4 {\n  box-shadow: var(--shadows-lg);\n}\n\n/* Accent bar via pseudo-element */\n.accent-info::after,\n.accent-success::after,\n.accent-error::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: var(--sizes-xs);\n}\n\n.accent-info::after {\n  background-color: var(--colors-secondary-blue-base);\n}\n\n.accent-success::after {\n  background-color: var(--colors-secondary-green-base);\n}\n\n.accent-error::after {\n  background-color: var(--colors-secondary-red-base);\n}\n\n/* Body: motion.div wrapper for collapse */\n.body {\n  overflow-y: hidden;\n\n  &:not(:first-child) > .section:first-child {\n    margin-top: 0;\n  }\n}\n\n/* Section */\n.section {\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-top: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n\n  font-family: var(--text-body-font-family);\n  font-size: var(--text-body-font-size);\n  font-weight: var(--text-body-font-weight);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n\n  & + & {\n    border-top: var(--sizes-line) solid var(--colors-neutral-grey-base);\n    padding-top: var(--sizes-md);\n  }\n}\n\n/* FullBleed */\n.fullBleed {\n  margin-left: calc(-1 * var(--sizes-md));\n  margin-right: calc(-1 * var(--sizes-md));\n}\n\n/* Footer */\n.footer {\n  margin-top: var(--sizes-base);\n  padding: var(--sizes-md);\n  z-index: 2;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,8iEAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}