@veeqo/ui 14.10.2 → 14.11.0-beta-1

package/dist/components/View/View.cjs

@@ -5,13 +5,15 @@ require('../../hooks/useFocusVisible.cjs');
 var useHover = require('../../hooks/useHover.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
 require('lodash.throttle');
 var colors = require('../../theme/modules/colors.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
 var types = require('./types.cjs');
 var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
 var EditIcon = require('../../icons/design-system/components/EditIcon.cjs');
-var styled = require('./styled.cjs');
 var Text = require('../Text/Text.cjs');
+var View_module = require('./View.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -25,6 +27,14 @@ const generateClassNames = (prefix) => ({
     active: prefix ? `${prefix}-active` : undefined,
     counter: prefix ? `${prefix}-counter` : undefined,
 });
+const IconStyling = {
+    style: {
+        marginLeft: sizes.sizes.xs,
+        padding: sizes.sizes.xs,
+        height: sizes.sizes.base,
+        width: sizes.sizes.base,
+    },
+};
 /**
  *
  * @deprecated
@@ -50,14 +60,32 @@ const View = ({ id, iconSlot, name, type, className, colourPalette = colors.colo
     const isDraft = type === types.ViewTypes.draft;
     const isSaved = type === types.ViewTypes.saved;
     const fill = active ? colors.colors.neutral.ink.dark : colors.colors.neutral.ink.base;
-    return (React__default.default.createElement(styled.Container, { className: `${buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container])} ${(active && (e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.active)) || ''}`, onClick: handleClick },
-        React__default.default.createElement(styled.Contour, { "$active": active, onMouseEnter: handleEnter, onMouseLeave: handleLeave, "$colourPalette": colourPalette, "$customTextColour": customTextColour },
-            iconSlot && React__default.default.createElement(styled.CustomIconWrapper, null, iconSlot),
-            React__default.default.createElement(Text.Text, { variant: "bodyBold" }, name),
-            count && (React__default.default.createElement(styled.CounterContainer, { "$active": active || isHovered, "$colourPalette": colourPalette, "$customTextColour": customTextColour },
-                React__default.default.createElement(styled.CounterText, { className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.counter, variant: "subheadingSmall" }, count))),
-            isDraft && (React__default.default.createElement(CrossIcon.ReactComponent, { ...styled.IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.delete, onClick: handleDelete })),
-            isSaved && active && (React__default.default.createElement(EditIcon.ReactComponent, { ...styled.IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.edit, onClick: handleEdit })))));
+    const contourVars = assignCssVars.assignCssVars({
+        colourPaletteBase: colourPalette.base,
+        colourPaletteLightest: colourPalette.lightest,
+        customTextColour,
+    });
+    const textColor = customTextColour !== null && customTextColour !== void 0 ? customTextColour : colors.colors.neutral.ink.dark;
+    const isCounterActive = active || isHovered;
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
+            View_module.container,
+            classNames === null || classNames === void 0 ? void 0 : classNames.container,
+            e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
+            active ? e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.active : undefined,
+        ]), onClick: handleClick },
+        React__default.default.createElement("div", { className: buildClassnames.buildClassnames([View_module.contour, active ? View_module.active : undefined]), style: contourVars, onMouseEnter: handleEnter, onMouseLeave: handleLeave },
+            iconSlot && React__default.default.createElement("div", { className: View_module.customIconWrapper }, iconSlot),
+            React__default.default.createElement(Text.Text, { variant: "bodyBold", style: { color: textColor } }, name),
+            count != null && (React__default.default.createElement(Text.Text, { variant: "subheadingSmall", className: buildClassnames.buildClassnames([
+                    View_module.counterContainer,
+                    isCounterActive ? View_module.counterActive : undefined,
+                ]), style: {
+                    ...contourVars,
+                    ...(isCounterActive ? { backgroundColor: colourPalette.base } : undefined),
+                } },
+                React__default.default.createElement("span", { className: buildClassnames.buildClassnames([View_module.counterText, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.counter]), style: isCounterActive ? { color: '#fff' } : undefined }, count))),
+            isDraft && (React__default.default.createElement(CrossIcon.ReactComponent, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.delete, onClick: handleDelete })),
+            isSaved && active && (React__default.default.createElement(EditIcon.ReactComponent, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.edit, onClick: handleEdit })))));
 };
 
 exports.View = View;

package/dist/components/View/View.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"View.cjs","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport { CrossIcon, EditIcon } from '../../icons';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport {\n  Container,\n  Contour,\n  CounterContainer,\n  CounterText,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n} from './styled';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  return (\n    <Container\n      className={`${buildClassnames([classNames?.container, e2eClassNames?.container])} ${\n        (active && e2eClassNames?.active) || ''\n      }`}\n      onClick={handleClick}\n    >\n      <Contour\n        $active={active}\n        onMouseEnter={handleEnter}\n        onMouseLeave={handleLeave}\n        $colourPalette={colourPalette}\n        $customTextColour={customTextColour}\n      >\n        {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n        <Text variant=\"bodyBold\">{name}</Text>\n        {count && (\n          <CounterContainer\n            $active={active || isHovered}\n            $colourPalette={colourPalette}\n            $customTextColour={customTextColour}\n          >\n            <CounterText className={e2eClassNames?.counter} variant=\"subheadingSmall\">\n              {count}\n            </CounterText>\n          </CounterContainer>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </Contour>\n    </Container>\n  );\n};\n"],"names":["colors","useHover","useCallback","ViewTypes","React","Container","buildClassnames","Contour","CustomIconWrapper","Text","CounterContainer","CounterText","CrossIcon","IconStyling","EditIcon"],"mappings":"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"}
+{"version":3,"file":"View.cjs","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback, CSSProperties } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport { CrossIcon, EditIcon } from '../../icons';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { assignCssVars } from '../../utils/assignCssVars';\nimport { Text } from '../Text';\nimport styles from './View.module.scss';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  const contourVars = assignCssVars({\n    colourPaletteBase: colourPalette.base,\n    colourPaletteLightest: colourPalette.lightest,\n    customTextColour,\n  });\n\n  const textColor = customTextColour ?? colors.neutral.ink.dark;\n  const isCounterActive = active || isHovered;\n\n  return (\n    <div\n      className={buildClassnames([\n        styles.container,\n        classNames?.container,\n        e2eClassNames?.container,\n        active ? e2eClassNames?.active : undefined,\n      ])}\n      onClick={handleClick}\n    >\n      <div\n        className={buildClassnames([styles.contour, active ? styles.active : undefined])}\n        style={contourVars}\n        onMouseEnter={handleEnter}\n        onMouseLeave={handleLeave}\n      >\n        {iconSlot && <div className={styles.customIconWrapper}>{iconSlot}</div>}\n        <Text variant=\"bodyBold\" style={{ color: textColor }}>{name}</Text>\n        {count != null && (\n          <Text\n            variant=\"subheadingSmall\"\n            className={buildClassnames([\n              styles.counterContainer,\n              isCounterActive ? styles.counterActive : undefined,\n            ])}\n            style={{\n              ...contourVars,\n              ...(isCounterActive ? { backgroundColor: colourPalette.base } : undefined),\n            }}\n          >\n            <span\n              className={buildClassnames([styles.counterText, e2eClassNames?.counter])}\n              style={isCounterActive ? { color: '#fff' } : undefined}\n            >\n              {count}\n            </span>\n          </Text>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["sizes","colors","useHover","useCallback","ViewTypes","assignCssVars","React","buildClassnames","styles","Text","CrossIcon","EditIcon"],"mappings":"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"}

package/dist/components/View/View.js

@@ -3,13 +3,15 @@ import '../../hooks/useFocusVisible.js';
 import { useHover } from '../../hooks/useHover.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
+import { assignCssVars } from '../../utils/assignCssVars.js';
 import 'lodash.throttle';
 import { colors } from '../../theme/modules/colors.js';
+import { sizes } from '../../theme/modules/sizes.js';
 import { ViewTypes } from './types.js';
 import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
 import { ReactComponent as EditIcon } from '../../icons/design-system/components/EditIcon.js';
-import { Container, Contour, CustomIconWrapper, CounterContainer, CounterText, IconStyling } from './styled.js';
 import { Text } from '../Text/Text.js';
+import styles from './View.module.scss.js';
 
 const generateClassNames = (prefix) => ({
     delete: prefix ? `${prefix}-delete` : undefined,
@@ -19,6 +21,14 @@ const generateClassNames = (prefix) => ({
     active: prefix ? `${prefix}-active` : undefined,
     counter: prefix ? `${prefix}-counter` : undefined,
 });
+const IconStyling = {
+    style: {
+        marginLeft: sizes.xs,
+        padding: sizes.xs,
+        height: sizes.base,
+        width: sizes.base,
+    },
+};
 /**
  *
  * @deprecated
@@ -44,12 +54,30 @@ const View = ({ id, iconSlot, name, type, className, colourPalette = colors.seco
     const isDraft = type === ViewTypes.draft;
     const isSaved = type === ViewTypes.saved;
     const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;
-    return (React__default.createElement(Container, { className: `${buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container])} ${(active && (e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.active)) || ''}`, onClick: handleClick },
-        React__default.createElement(Contour, { "$active": active, onMouseEnter: handleEnter, onMouseLeave: handleLeave, "$colourPalette": colourPalette, "$customTextColour": customTextColour },
-            iconSlot && React__default.createElement(CustomIconWrapper, null, iconSlot),
-            React__default.createElement(Text, { variant: "bodyBold" }, name),
-            count && (React__default.createElement(CounterContainer, { "$active": active || isHovered, "$colourPalette": colourPalette, "$customTextColour": customTextColour },
-                React__default.createElement(CounterText, { className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.counter, variant: "subheadingSmall" }, count))),
+    const contourVars = assignCssVars({
+        colourPaletteBase: colourPalette.base,
+        colourPaletteLightest: colourPalette.lightest,
+        customTextColour,
+    });
+    const textColor = customTextColour !== null && customTextColour !== void 0 ? customTextColour : colors.neutral.ink.dark;
+    const isCounterActive = active || isHovered;
+    return (React__default.createElement("div", { className: buildClassnames([
+            styles.container,
+            classNames === null || classNames === void 0 ? void 0 : classNames.container,
+            e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
+            active ? e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.active : undefined,
+        ]), onClick: handleClick },
+        React__default.createElement("div", { className: buildClassnames([styles.contour, active ? styles.active : undefined]), style: contourVars, onMouseEnter: handleEnter, onMouseLeave: handleLeave },
+            iconSlot && React__default.createElement("div", { className: styles.customIconWrapper }, iconSlot),
+            React__default.createElement(Text, { variant: "bodyBold", style: { color: textColor } }, name),
+            count != null && (React__default.createElement(Text, { variant: "subheadingSmall", className: buildClassnames([
+                    styles.counterContainer,
+                    isCounterActive ? styles.counterActive : undefined,
+                ]), style: {
+                    ...contourVars,
+                    ...(isCounterActive ? { backgroundColor: colourPalette.base } : undefined),
+                } },
+                React__default.createElement("span", { className: buildClassnames([styles.counterText, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.counter]), style: isCounterActive ? { color: '#fff' } : undefined }, count))),
             isDraft && (React__default.createElement(CrossIcon, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.delete, onClick: handleDelete })),
             isSaved && active && (React__default.createElement(EditIcon, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.edit, onClick: handleEdit })))));
 };

package/dist/components/View/View.js.map

@@ -1 +1 @@
-{"version":3,"file":"View.js","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport { CrossIcon, EditIcon } from '../../icons';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport {\n  Container,\n  Contour,\n  CounterContainer,\n  CounterText,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n} from './styled';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  return (\n    <Container\n      className={`${buildClassnames([classNames?.container, e2eClassNames?.container])} ${\n        (active && e2eClassNames?.active) || ''\n      }`}\n      onClick={handleClick}\n    >\n      <Contour\n        $active={active}\n        onMouseEnter={handleEnter}\n        onMouseLeave={handleLeave}\n        $colourPalette={colourPalette}\n        $customTextColour={customTextColour}\n      >\n        {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n        <Text variant=\"bodyBold\">{name}</Text>\n        {count && (\n          <CounterContainer\n            $active={active || isHovered}\n            $colourPalette={colourPalette}\n            $customTextColour={customTextColour}\n          >\n            <CounterText className={e2eClassNames?.counter} variant=\"subheadingSmall\">\n              {count}\n            </CounterText>\n          </CounterContainer>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </Contour>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AA4BA,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IACxE,MAAM,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,OAAA,CAAS,GAAG,SAAS;IAC/C,OAAO,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,QAAA,CAAU,GAAG,SAAS;IACjD,IAAI,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,KAAA,CAAO,GAAG,SAAS;IAC3C,SAAS,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,UAAA,CAAY,GAAG,SAAS;IACrD,MAAM,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,OAAA,CAAS,GAAG,SAAS;IAC/C,OAAO,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,QAAA,CAAU,GAAG,SAAS;AAClD,CAAA,CAAC;AAEF;;;;;;AAMG;AACI,MAAM,IAAI,GAAG,CAAC,EACnB,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,aAAa,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,EACrC,gBAAgB,EAChB,KAAK,EACL,MAAM,GAAG,KAAK,EACd,OAAO,EACP,QAAQ,EACR,MAAM,EACN,YAAY,GACF,KAAI;AACd,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;IACtD,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAE;AAExD,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAM,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;AACjE,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAK,KAAI;QACR,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,QAAQ;YAAE,QAAQ,CAAC,EAAE,CAAC;AAC5B,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,EAAE,CAAC,CACf;AACD,IAAA,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAAK,KAAI;QACR,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,MAAM;YAAE,MAAM,CAAC,EAAE,CAAC;AACxB,IAAA,CAAC,EACD,CAAC,MAAM,EAAE,EAAE,CAAC,CACb;AAED,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,SAAS,CAAC,KAAK;AACxC,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,SAAS,CAAC,KAAK;IACxC,MAAM,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;IAEvE,QACEA,6BAAC,SAAS,EAAA,EACR,SAAS,EAAE,CAAA,EAAG,eAAe,CAAC,CAAC,UAAU,KAAA,IAAA,IAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,SAAS,CAAC,CAAC,CAAA,CAAA,EAC9E,CAAC,MAAM,KAAI,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,MAAM,CAAA,KAAK,EACvC,CAAA,CAAE,EACF,OAAO,EAAE,WAAW,EAAA;AAEpB,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAA,SAAA,EACG,MAAM,EACf,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,WAAW,EAAA,gBAAA,EACT,aAAa,uBACV,gBAAgB,EAAA;AAElC,YAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,IAAA,EAAE,QAAQ,CAAqB;AAC9D,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAA,EAAE,IAAI,CAAQ;YACrC,KAAK,KACJA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EAAA,SAAA,EACN,MAAM,IAAI,SAAS,EAAA,gBAAA,EACZ,aAAa,EAAA,mBAAA,EACV,gBAAgB,EAAA;AAEnC,gBAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,OAAO,EAAE,OAAO,EAAC,iBAAiB,IACtE,KAAK,CACM,CACG,CACpB;YACA,OAAO,KACNA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GACJ,WAAW,EACf,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,MAAM,EAChC,OAAO,EAAE,YAAY,EAAA,CACrB,CACH;AACA,YAAA,OAAO,IAAI,MAAM,KAChBA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,GACH,WAAW,EACf,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI,EAC9B,OAAO,EAAE,UAAU,EAAA,CACnB,CACH,CACO,CACA;AAEhB;;;;"}
+{"version":3,"file":"View.js","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback, CSSProperties } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport { CrossIcon, EditIcon } from '../../icons';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { assignCssVars } from '../../utils/assignCssVars';\nimport { Text } from '../Text';\nimport styles from './View.module.scss';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  const contourVars = assignCssVars({\n    colourPaletteBase: colourPalette.base,\n    colourPaletteLightest: colourPalette.lightest,\n    customTextColour,\n  });\n\n  const textColor = customTextColour ?? colors.neutral.ink.dark;\n  const isCounterActive = active || isHovered;\n\n  return (\n    <div\n      className={buildClassnames([\n        styles.container,\n        classNames?.container,\n        e2eClassNames?.container,\n        active ? e2eClassNames?.active : undefined,\n      ])}\n      onClick={handleClick}\n    >\n      <div\n        className={buildClassnames([styles.contour, active ? styles.active : undefined])}\n        style={contourVars}\n        onMouseEnter={handleEnter}\n        onMouseLeave={handleLeave}\n      >\n        {iconSlot && <div className={styles.customIconWrapper}>{iconSlot}</div>}\n        <Text variant=\"bodyBold\" style={{ color: textColor }}>{name}</Text>\n        {count != null && (\n          <Text\n            variant=\"subheadingSmall\"\n            className={buildClassnames([\n              styles.counterContainer,\n              isCounterActive ? styles.counterActive : undefined,\n            ])}\n            style={{\n              ...contourVars,\n              ...(isCounterActive ? { backgroundColor: colourPalette.base } : undefined),\n            }}\n          >\n            <span\n              className={buildClassnames([styles.counterText, e2eClassNames?.counter])}\n              style={isCounterActive ? { color: '#fff' } : undefined}\n            >\n              {count}\n            </span>\n          </Text>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_c6mpk_1 {\n  box-sizing: border-box;\n  position: relative;\n  padding: 14px var(--sizes-md);\n}\n\n._contour_c6mpk_7 {\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: var(--sizes-10);\n  border-radius: var(--radius-base);\n  padding: 0 var(--sizes-3);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n}\n._contour_c6mpk_7:hover {\n  border: var(--sizes-line) solid var(--colour-palette-base);\n  background-color: var(--colour-palette-lightest);\n}\n._contour_c6mpk_7 span {\n  color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\n\n._active_c6mpk_27 {\n  background-color: var(--colour-palette-lightest);\n}\n\n._counterContainer_c6mpk_31 {\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--radius-base);\n  padding: 2px 4px;\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n._counterActive_c6mpk_43 {\n  background-color: var(--colour-palette-base);\n}\n._counterActive_c6mpk_43 ._counterText_c6mpk_46 {\n  color: #fff;\n}\n\n._counterText_c6mpk_46 {\n  line-height: 1;\n}\n\n._customIconWrapper_c6mpk_54 {\n  display: flex;\n  align-items: center;\n  margin-right: var(--sizes-sm);\n}\n._customIconWrapper_c6mpk_54 svg {\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}");
+var styles = {"container":"_container_c6mpk_1","contour":"_contour_c6mpk_7","active":"_active_c6mpk_27","counterContainer":"_counterContainer_c6mpk_31","counterActive":"_counterActive_c6mpk_43","counterText":"_counterText_c6mpk_46","customIconWrapper":"_customIconWrapper_c6mpk_54"};
+
+module.exports = styles;
+//# sourceMappingURL=View.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"View.module.scss.cjs","sources":["../../../src/components/View/View.module.scss"],"sourcesContent":[".container {\n  box-sizing: border-box;\n  position: relative;\n  padding: 14px var(--sizes-md);\n}\n\n.contour {\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: var(--sizes-10);\n  border-radius: var(--radius-base);\n  padding: 0 var(--sizes-3);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n\n  &:hover {\n    border: var(--sizes-line) solid var(--colour-palette-base);\n    background-color: var(--colour-palette-lightest);\n  }\n\n  span {\n    color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n  }\n}\n\n.active {\n  background-color: var(--colour-palette-lightest);\n}\n\n.counterContainer {\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--radius-base);\n  padding: 2px 4px;\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n.counterActive {\n  background-color: var(--colour-palette-base);\n\n  .counterText {\n    color: #fff;\n  }\n}\n\n.counterText {\n  line-height: 1;\n}\n\n.customIconWrapper {\n  display: flex;\n  align-items: center;\n  margin-right: var(--sizes-sm);\n\n  svg {\n    height: var(--sizes-base);\n    width: var(--sizes-base);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,85CAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,mBAAA,CAAA,6BAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._container_c6mpk_1 {\n  box-sizing: border-box;\n  position: relative;\n  padding: 14px var(--sizes-md);\n}\n\n._contour_c6mpk_7 {\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: var(--sizes-10);\n  border-radius: var(--radius-base);\n  padding: 0 var(--sizes-3);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n}\n._contour_c6mpk_7:hover {\n  border: var(--sizes-line) solid var(--colour-palette-base);\n  background-color: var(--colour-palette-lightest);\n}\n._contour_c6mpk_7 span {\n  color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\n\n._active_c6mpk_27 {\n  background-color: var(--colour-palette-lightest);\n}\n\n._counterContainer_c6mpk_31 {\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--radius-base);\n  padding: 2px 4px;\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n._counterActive_c6mpk_43 {\n  background-color: var(--colour-palette-base);\n}\n._counterActive_c6mpk_43 ._counterText_c6mpk_46 {\n  color: #fff;\n}\n\n._counterText_c6mpk_46 {\n  line-height: 1;\n}\n\n._customIconWrapper_c6mpk_54 {\n  display: flex;\n  align-items: center;\n  margin-right: var(--sizes-sm);\n}\n._customIconWrapper_c6mpk_54 svg {\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}");
+var styles = {"container":"_container_c6mpk_1","contour":"_contour_c6mpk_7","active":"_active_c6mpk_27","counterContainer":"_counterContainer_c6mpk_31","counterActive":"_counterActive_c6mpk_43","counterText":"_counterText_c6mpk_46","customIconWrapper":"_customIconWrapper_c6mpk_54"};
+
+export { styles as default };
+//# sourceMappingURL=View.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"View.module.scss.js","sources":["../../../src/components/View/View.module.scss"],"sourcesContent":[".container {\n  box-sizing: border-box;\n  position: relative;\n  padding: 14px var(--sizes-md);\n}\n\n.contour {\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: var(--sizes-10);\n  border-radius: var(--radius-base);\n  padding: 0 var(--sizes-3);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n\n  &:hover {\n    border: var(--sizes-line) solid var(--colour-palette-base);\n    background-color: var(--colour-palette-lightest);\n  }\n\n  span {\n    color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n  }\n}\n\n.active {\n  background-color: var(--colour-palette-lightest);\n}\n\n.counterContainer {\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--radius-base);\n  padding: 2px 4px;\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n.counterActive {\n  background-color: var(--colour-palette-base);\n\n  .counterText {\n    color: #fff;\n  }\n}\n\n.counterText {\n  line-height: 1;\n}\n\n.customIconWrapper {\n  display: flex;\n  align-items: center;\n  margin-right: var(--sizes-sm);\n\n  svg {\n    height: var(--sizes-base);\n    width: var(--sizes-base);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,85CAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,mBAAA,CAAA,6BAAA;;;;"}

package/dist/components/ViewTab/ViewTab.d.ts

@@ -6,7 +6,7 @@ export interface ClassNamesReturnPayload {
     active?: string;
     counter?: string;
 }
-export declare const ViewTab: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "onClick" | "type" | "name"> & {
+export declare const ViewTab: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "onClick" | "name" | "type"> & {
     colourPalette?: import("../../theme/modules/colors").ColourPalette | undefined;
     customTextColour?: string | undefined;
     active?: boolean | undefined;

package/dist/components/index.d.ts

@@ -13,7 +13,7 @@ export { BaseContainer, type BaseContainerProps } from './BaseContainer';
 export { Breadcrumbs } from './Breadcrumbs';
 export { Button, type ButtonProps } from './Button';
 export { RangeCalendar, Calendar, useIsDateUnavailable } from './Calendars';
-export { Card } from './Card';
+export { Card, type CardElevation, type SurfaceProps } from './Card';
 export { CardHeader } from './CardHeader';
 export { Checkbox } from './Checkbox';
 export { Choice } from './Choice';

package/package.json

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

package/dist/components/Accordion/styled.cjs

@@ -1,49 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-var framerMotion = require('framer-motion');
-var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
-var Text = require('../Text/Text.cjs');
-var index = require('../../theme/index.cjs');
-var sizes = require('../../theme/modules/sizes.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-const TapBarChild = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--TapBarChild", componentId: "vui--3ngcs3" }) `display:flex;flex-direction:row;align-items:center;`;
-const Left = styled__default.default(TapBarChild).withConfig({
-    shouldForwardProp: (prop) => !['glyphColor'].includes(prop),
-}) `
-  svg {
-    margin-right: 12px;
-    height: ${sizes.sizes.base};
-    width: ${sizes.sizes.base};
-
-    color: ${({ glyphColor }) => glyphColor};
-  }
-`;
-const Right = styled__default.default(TapBarChild).withConfig({ displayName: "vui--Right", componentId: "vui--1az9xn4" }) `justify-content:flex-end;flex-grow:2;`;
-/**
- * Due to unique behaviour observed in Safari, we override the outline property when
- * the accordion is focussed.
- */
-const AccordionSummary = styled__default.default.summary.withConfig({ displayName: "vui--AccordionSummary", componentId: "vui--1cj5wqc" }) `display:flex;flex-direction:column;padding:12px;border-radius:4px;user-select:none;cursor:pointer;border:1px solid ${index.theme.colors.neutral.grey.dark};:focus{outline:none;box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}:active{box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}`;
-const Top = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Top", componentId: "vui--mks526" }) `display:flex;flex-direction:row;align-items:center;height:16px;`;
-const Description = styled__default.default(Text.Text).withConfig({ displayName: "vui--Description", componentId: "vui--z9vlxj" }) `margin-top:8px;`;
-const AccordionContent = styled__default.default(framerMotion.motion(BaseContainer.BaseContainer)).withConfig({ displayName: "vui--AccordionContent", componentId: "vui--a80u9i" }) `margin-top:4px;background:rgba(217, 235, 248, 0.5);padding:10px 26px;`;
-const AccordionDetails = styled__default.default.details.withConfig({ displayName: "vui--AccordionDetails", componentId: "vui--pwcrkp" }) `summary{list-style-type:none;::-webkit-details-marker{display:none;}}`;
-const UnstyledAccordionContent = styled__default.default(framerMotion.motion(BaseContainer.BaseContainer)).withConfig({ displayName: "vui--UnstyledAccordionContent", componentId: "vui--qyx6g0" }) ``;
-const UnstyledAccordionSummary = styled__default.default.summary.withConfig({ displayName: "vui--UnstyledAccordionSummary", componentId: "vui--mkwb1n" }) `&:focus{outline:none;box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}`;
-
-exports.Text = Text.Text;
-exports.AccordionContent = AccordionContent;
-exports.AccordionDetails = AccordionDetails;
-exports.AccordionSummary = AccordionSummary;
-exports.Description = Description;
-exports.Left = Left;
-exports.Right = Right;
-exports.Top = Top;
-exports.UnstyledAccordionContent = UnstyledAccordionContent;
-exports.UnstyledAccordionSummary = UnstyledAccordionSummary;
-//# sourceMappingURL=styled.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { theme } from '../../theme';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst TapBarChild = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst Left = styled(TapBarChild).withConfig({\n  shouldForwardProp: (prop) => !['glyphColor'].includes(prop),\n})<{ glyphColor: string }>`\n  svg {\n    margin-right: 12px;\n    height: ${sizes.base};\n    width: ${sizes.base};\n\n    color: ${({ glyphColor }) => glyphColor};\n  }\n`;\n\nconst Right = styled(TapBarChild as any)`\n  justify-content: flex-end;\n  flex-grow: 2;\n`;\n\n/**\n * Due to unique behaviour observed in Safari, we override the outline property when\n * the accordion is focussed.\n */\nconst AccordionSummary = styled.summary`\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  border-radius: 4px;\n  user-select: none;\n  cursor: pointer;\n\n  border: 1px solid ${theme.colors.neutral.grey.dark};\n\n  :focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n\n  :active {\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst Top = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 16px;\n`;\n\nconst Description = styled(Text)`\n  margin-top: 8px;\n`;\n\nconst AccordionContent = styled(motion(BaseContainer))`\n  margin-top: 4px;\n  background: rgba(217, 235, 248, 0.5);\n  padding: 10px 26px;\n`;\n\nconst AccordionDetails = styled.details`\n  summary {\n    list-style-type: none;\n    ::-webkit-details-marker {\n      display: none;\n    }\n  }\n`;\n\nconst UnstyledAccordionContent = styled(motion(BaseContainer))``;\n\nconst UnstyledAccordionSummary = styled.summary`\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nexport {\n  AccordionSummary,\n  Top,\n  Text,\n  Left,\n  Right,\n  Description,\n  AccordionDetails,\n  AccordionContent,\n  UnstyledAccordionContent,\n  UnstyledAccordionSummary,\n};\n"],"names":["styled","BaseContainer","sizes","theme","Text","motion"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,WAAW,GAAGA,uBAAM,CAACC,2BAAa,CAAC,kIAIxC;AAED,MAAM,IAAI,GAAGD,uBAAM,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC;AAC1C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5D,CAAA,CAAC,CAAwB;;;AAGZ,YAAA,EAAAE,WAAK,CAAC,IAAI,CAAA;AACX,WAAA,EAAAA,WAAK,CAAC,IAAI,CAAA;;AAEV,WAAA,EAAA,CAAC,EAAE,UAAU,EAAE,KAAK,UAAU,CAAA;;;AAI3C,MAAM,KAAK,GAAGF,uBAAM,CAAC,WAAkB,CAAC;AAKxC;;;AAGG;AACH,MAAM,gBAAgB,GAAGA,uBAAM,CAAC,OAAO,yMAQjBG,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,6CAIxBA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,kCAIjCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,GAAG,GAAGH,uBAAM,CAACC,2BAAa,CAAC;AAOjC,MAAM,WAAW,GAAGD,uBAAM,CAACI,SAAI,CAAC;AAIhC,MAAM,gBAAgB,GAAGJ,uBAAM,CAACK,mBAAM,CAACJ,2BAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qEAAA;AAMtD,MAAM,gBAAgB,GAAGD,uBAAM,CAAC,OAAO;AASvC,MAAM,wBAAwB,GAAGA,uBAAM,CAACK,mBAAM,CAACJ,2BAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,+BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA;AAE9D,MAAM,wBAAwB,GAAGD,uBAAM,CAAC,OAAO,uIAGnBG,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;;;;;;;;;;"}

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

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-import { Text } from '../Text';
-declare const Left: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
-    glyphColor: string;
-}, never>;
-declare const Right: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
-/**
- * Due to unique behaviour observed in Safari, we override the outline property when
- * the accordion is focussed.
- */
-declare const AccordionSummary: import("styled-components").StyledComponent<"summary", any, {}, never>;
-declare const Top: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-declare const Description: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
-    /**
-     * Due to unique behaviour observed in Safari, we override the outline property when
-     * the accordion is focussed.
-     */
-    as?: import("../Text").ValidTextTag | undefined;
-    muted?: boolean | undefined;
-    variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
-} & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
-declare const AccordionContent: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-declare const AccordionDetails: import("styled-components").StyledComponent<"details", any, {}, never>;
-declare const UnstyledAccordionContent: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-declare const UnstyledAccordionSummary: import("styled-components").StyledComponent<"summary", any, {}, never>;
-export { AccordionSummary, Top, Text, Left, Right, Description, AccordionDetails, AccordionContent, UnstyledAccordionContent, UnstyledAccordionSummary, };

package/dist/components/Accordion/styled.js

@@ -1,34 +0,0 @@
-import styled from 'styled-components';
-import { motion } from 'framer-motion';
-import { BaseContainer } from '../BaseContainer/BaseContainer.js';
-import { Text } from '../Text/Text.js';
-import { theme } from '../../theme/index.js';
-import { sizes } from '../../theme/modules/sizes.js';
-
-const TapBarChild = styled(BaseContainer).withConfig({ displayName: "vui--TapBarChild", componentId: "vui--3ngcs3" }) `display:flex;flex-direction:row;align-items:center;`;
-const Left = styled(TapBarChild).withConfig({
-    shouldForwardProp: (prop) => !['glyphColor'].includes(prop),
-}) `
-  svg {
-    margin-right: 12px;
-    height: ${sizes.base};
-    width: ${sizes.base};
-
-    color: ${({ glyphColor }) => glyphColor};
-  }
-`;
-const Right = styled(TapBarChild).withConfig({ displayName: "vui--Right", componentId: "vui--1az9xn4" }) `justify-content:flex-end;flex-grow:2;`;
-/**
- * Due to unique behaviour observed in Safari, we override the outline property when
- * the accordion is focussed.
- */
-const AccordionSummary = styled.summary.withConfig({ displayName: "vui--AccordionSummary", componentId: "vui--1cj5wqc" }) `display:flex;flex-direction:column;padding:12px;border-radius:4px;user-select:none;cursor:pointer;border:1px solid ${theme.colors.neutral.grey.dark};:focus{outline:none;box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}:active{box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}`;
-const Top = styled(BaseContainer).withConfig({ displayName: "vui--Top", componentId: "vui--mks526" }) `display:flex;flex-direction:row;align-items:center;height:16px;`;
-const Description = styled(Text).withConfig({ displayName: "vui--Description", componentId: "vui--z9vlxj" }) `margin-top:8px;`;
-const AccordionContent = styled(motion(BaseContainer)).withConfig({ displayName: "vui--AccordionContent", componentId: "vui--a80u9i" }) `margin-top:4px;background:rgba(217, 235, 248, 0.5);padding:10px 26px;`;
-const AccordionDetails = styled.details.withConfig({ displayName: "vui--AccordionDetails", componentId: "vui--pwcrkp" }) `summary{list-style-type:none;::-webkit-details-marker{display:none;}}`;
-const UnstyledAccordionContent = styled(motion(BaseContainer)).withConfig({ displayName: "vui--UnstyledAccordionContent", componentId: "vui--qyx6g0" }) ``;
-const UnstyledAccordionSummary = styled.summary.withConfig({ displayName: "vui--UnstyledAccordionSummary", componentId: "vui--mkwb1n" }) `&:focus{outline:none;box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}`;
-
-export { AccordionContent, AccordionDetails, AccordionSummary, Description, Left, Right, Text, Top, UnstyledAccordionContent, UnstyledAccordionSummary };
-//# sourceMappingURL=styled.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { theme } from '../../theme';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst TapBarChild = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst Left = styled(TapBarChild).withConfig({\n  shouldForwardProp: (prop) => !['glyphColor'].includes(prop),\n})<{ glyphColor: string }>`\n  svg {\n    margin-right: 12px;\n    height: ${sizes.base};\n    width: ${sizes.base};\n\n    color: ${({ glyphColor }) => glyphColor};\n  }\n`;\n\nconst Right = styled(TapBarChild as any)`\n  justify-content: flex-end;\n  flex-grow: 2;\n`;\n\n/**\n * Due to unique behaviour observed in Safari, we override the outline property when\n * the accordion is focussed.\n */\nconst AccordionSummary = styled.summary`\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  border-radius: 4px;\n  user-select: none;\n  cursor: pointer;\n\n  border: 1px solid ${theme.colors.neutral.grey.dark};\n\n  :focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n\n  :active {\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst Top = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 16px;\n`;\n\nconst Description = styled(Text)`\n  margin-top: 8px;\n`;\n\nconst AccordionContent = styled(motion(BaseContainer))`\n  margin-top: 4px;\n  background: rgba(217, 235, 248, 0.5);\n  padding: 10px 26px;\n`;\n\nconst AccordionDetails = styled.details`\n  summary {\n    list-style-type: none;\n    ::-webkit-details-marker {\n      display: none;\n    }\n  }\n`;\n\nconst UnstyledAccordionContent = styled(motion(BaseContainer))``;\n\nconst UnstyledAccordionSummary = styled.summary`\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nexport {\n  AccordionSummary,\n  Top,\n  Text,\n  Left,\n  Right,\n  Description,\n  AccordionDetails,\n  AccordionContent,\n  UnstyledAccordionContent,\n  UnstyledAccordionSummary,\n};\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,kIAIxC;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC;AAC1C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5D,CAAA,CAAC,CAAwB;;;AAGZ,YAAA,EAAA,KAAK,CAAC,IAAI,CAAA;AACX,WAAA,EAAA,KAAK,CAAC,IAAI,CAAA;;AAEV,WAAA,EAAA,CAAC,EAAE,UAAU,EAAE,KAAK,UAAU,CAAA;;;AAI3C,MAAM,KAAK,GAAG,MAAM,CAAC,WAAkB,CAAC;AAKxC;;;AAGG;AACH,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,yMAQjB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,6CAIxB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,kCAIjC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAOjC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;AAIhC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qEAAA;AAMtD,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO;AASvC,MAAM,wBAAwB,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,+BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA;AAE9D,MAAM,wBAAwB,GAAG,MAAM,CAAC,OAAO,uIAGnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;"}

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