@veeqo/ui 14.0.5 → 14.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Accordion/styled.d.ts +5 -1
- package/dist/components/Action/Action.cjs +67 -0
- package/dist/components/Action/Action.cjs.map +1 -0
- package/dist/components/Action/Action.d.ts +67 -0
- package/dist/components/Action/Action.js +61 -0
- package/dist/components/Action/Action.js.map +1 -0
- package/dist/components/Action/index.d.ts +2 -0
- package/dist/components/Action/styles/base.module.scss.cjs +9 -0
- package/dist/components/Action/styles/base.module.scss.cjs.map +1 -0
- package/dist/components/Action/styles/base.module.scss.js +7 -0
- package/dist/components/Action/styles/base.module.scss.js.map +1 -0
- package/dist/components/Action/styles/button.module.scss.cjs +9 -0
- package/dist/components/Action/styles/button.module.scss.cjs.map +1 -0
- package/dist/components/Action/styles/button.module.scss.js +7 -0
- package/dist/components/Action/styles/button.module.scss.js.map +1 -0
- package/dist/components/Action/styles/link.module.scss.cjs +9 -0
- package/dist/components/Action/styles/link.module.scss.cjs.map +1 -0
- package/dist/components/Action/styles/link.module.scss.js +7 -0
- package/dist/components/Action/styles/link.module.scss.js.map +1 -0
- package/dist/components/Action/types.d.ts +26 -0
- package/dist/components/Action/utils.cjs +42 -0
- package/dist/components/Action/utils.cjs.map +1 -0
- package/dist/components/Action/utils.d.ts +13 -0
- package/dist/components/Action/utils.js +39 -0
- package/dist/components/Action/utils.js.map +1 -0
- package/dist/components/Anchor/Anchor.cjs +3 -1
- package/dist/components/Anchor/Anchor.cjs.map +1 -1
- package/dist/components/Anchor/Anchor.d.ts +2 -0
- package/dist/components/Anchor/Anchor.js +3 -1
- package/dist/components/Anchor/Anchor.js.map +1 -1
- package/dist/components/Anchor/Anchor.module.scss.cjs +2 -2
- package/dist/components/Anchor/Anchor.module.scss.cjs.map +1 -1
- package/dist/components/Anchor/Anchor.module.scss.js +2 -2
- package/dist/components/Anchor/Anchor.module.scss.js.map +1 -1
- package/dist/components/Banner/styled.d.ts +5 -1
- package/dist/components/Button/Button.cjs +4 -0
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.d.ts +12 -0
- package/dist/components/Button/Button.js +4 -1
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/DataTable/utils/alignmentToFlex.d.ts +1 -1
- package/dist/components/DimensionsInput/DimensionsInput.d.ts +22 -22
- package/dist/components/FeatureBanner/FeatureBanner.d.ts +1 -1
- package/dist/components/FilterTag/styled.d.ts +5 -1
- package/dist/components/Flex/FlexCol/FlexCol.d.ts +2 -2
- package/dist/components/Flex/FlexRow/FlexRow.d.ts +2 -2
- package/dist/components/LegacyDataTable/SpecificState/styled.d.ts +11 -2
- package/dist/components/Pagination/styled.d.ts +24 -24
- package/dist/components/PhoneInput/index.d.ts +22 -22
- package/dist/components/Search/Search.d.ts +22 -22
- package/dist/components/Search/styled.d.ts +22 -22
- package/dist/components/Stack/Stack.cjs +2 -4
- package/dist/components/Stack/Stack.cjs.map +1 -1
- package/dist/components/Stack/Stack.js +2 -4
- package/dist/components/Stack/Stack.js.map +1 -1
- package/dist/components/Text/Text.cjs +27 -27
- package/dist/components/Text/Text.cjs.map +1 -1
- package/dist/components/Text/Text.d.ts +11 -2
- package/dist/components/Text/Text.js +25 -25
- package/dist/components/Text/Text.js.map +1 -1
- package/dist/components/Text/Text.module.scss.cjs +9 -0
- package/dist/components/Text/Text.module.scss.cjs.map +1 -0
- package/dist/components/Text/Text.module.scss.js +7 -0
- package/dist/components/Text/Text.module.scss.js.map +1 -0
- package/dist/components/Text/index.d.ts +1 -0
- package/dist/components/Text/textVariants.cjs +14 -0
- package/dist/components/Text/textVariants.cjs.map +1 -0
- package/dist/components/Text/textVariants.js +12 -0
- package/dist/components/Text/textVariants.js.map +1 -0
- package/dist/components/Text/types.d.ts +7 -8
- package/dist/components/Text/utils.cjs +2 -2
- package/dist/components/Text/utils.cjs.map +1 -1
- package/dist/components/Text/utils.d.ts +3 -2
- package/dist/components/Text/utils.js +2 -2
- package/dist/components/Text/utils.js.map +1 -1
- package/dist/components/TextField/TextField.d.ts +22 -22
- package/dist/components/TextField/index.d.ts +22 -22
- package/dist/components/ToastsLayout/components/styled.d.ts +6 -1
- package/dist/components/View/View.cjs +3 -3
- package/dist/components/View/View.cjs.map +1 -1
- package/dist/components/View/View.js +3 -3
- package/dist/components/View/View.js.map +1 -1
- package/dist/components/View/styled.cjs +11 -11
- package/dist/components/View/styled.cjs.map +1 -1
- package/dist/components/View/styled.d.ts +27 -8
- package/dist/components/View/styled.js +11 -11
- package/dist/components/View/styled.js.map +1 -1
- package/dist/components/ViewTab/ViewTab.d.ts +1 -1
- package/dist/components/index.d.ts +4 -2
- package/dist/index.cjs +4 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/theme/scss/text.module.scss.cjs +9 -0
- package/dist/theme/scss/text.module.scss.cjs.map +1 -0
- package/dist/theme/scss/text.module.scss.js +7 -0
- package/dist/theme/scss/text.module.scss.js.map +1 -0
- package/dist/utils/getContextAwareLink.cjs +43 -0
- package/dist/utils/getContextAwareLink.cjs.map +1 -0
- package/dist/utils/getContextAwareLink.d.ts +27 -0
- package/dist/utils/getContextAwareLink.js +41 -0
- package/dist/utils/getContextAwareLink.js.map +1 -0
- package/dist/utils/index.d.ts +1 -0
- package/package.json +3 -1
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
4
|
+
require('uid/secure');
|
|
5
|
+
var base_module = require('./styles/base.module.scss.cjs');
|
|
6
|
+
var button_module = require('./styles/button.module.scss.cjs');
|
|
7
|
+
var link_module = require('./styles/link.module.scss.cjs');
|
|
8
|
+
|
|
9
|
+
const getButtonVariantClasses = (variant) => [
|
|
10
|
+
(variant === 'primary' || variant === 'primaryDestructive') && button_module.primary,
|
|
11
|
+
(variant === 'destructive' || variant === 'primaryDestructive') && button_module.destructive,
|
|
12
|
+
variant === 'flat' && button_module.flat,
|
|
13
|
+
].filter(Boolean);
|
|
14
|
+
const getAppearanceClasses = (appearance, props) => {
|
|
15
|
+
const baseClasses = [props.className, base_module.reset];
|
|
16
|
+
const hasIcon = !!props.iconSlot;
|
|
17
|
+
const isIconOnly = hasIcon && (props.children == null || props.children === '');
|
|
18
|
+
const iconClasses = [hasIcon && button_module.icon, isIconOnly && button_module.iconOnly];
|
|
19
|
+
switch (appearance) {
|
|
20
|
+
case 'button':
|
|
21
|
+
return buildClassnames.buildClassnames([
|
|
22
|
+
...baseClasses,
|
|
23
|
+
button_module.button,
|
|
24
|
+
...iconClasses,
|
|
25
|
+
props.disabled && button_module.disabled,
|
|
26
|
+
props.compact && button_module.compact,
|
|
27
|
+
...getButtonVariantClasses(props.variant),
|
|
28
|
+
]);
|
|
29
|
+
case 'link':
|
|
30
|
+
return buildClassnames.buildClassnames([
|
|
31
|
+
...baseClasses,
|
|
32
|
+
link_module.link,
|
|
33
|
+
props.compact && link_module.compact,
|
|
34
|
+
]);
|
|
35
|
+
default:
|
|
36
|
+
return buildClassnames.buildClassnames(baseClasses);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
exports.getAppearanceClasses = getAppearanceClasses;
|
|
41
|
+
exports.getButtonVariantClasses = getButtonVariantClasses;
|
|
42
|
+
//# sourceMappingURL=utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.cjs","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport baseStyles from './styles/base.module.scss';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport { ActionAppearance, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n className?: string;\n variant?: ActionVariant;\n disabled?: boolean;\n compact?: boolean;\n iconSlot?: React.ReactNode;\n children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n [\n (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles.primary,\n (variant === 'destructive' || variant === 'primaryDestructive') && buttonStyles.destructive,\n variant === 'flat' && buttonStyles.flat,\n ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n const baseClasses = [props.className, baseStyles.reset];\n const hasIcon = !!props.iconSlot;\n const isIconOnly = hasIcon && (props.children == null || props.children === '');\n const iconClasses = [hasIcon && buttonStyles.icon, isIconOnly && buttonStyles.iconOnly];\n\n switch (appearance) {\n case 'button':\n return buildClassnames([\n ...baseClasses,\n buttonStyles.button,\n ...iconClasses,\n props.disabled && buttonStyles.disabled,\n props.compact && buttonStyles.compact,\n ...getButtonVariantClasses(props.variant),\n ]);\n case 'link':\n return buildClassnames([\n ...baseClasses,\n linkStyles.link,\n props.compact && linkStyles.compact,\n ]);\n default:\n return buildClassnames(baseClasses);\n }\n};\n"],"names":["buttonStyles","baseStyles","buildClassnames","linkStyles"],"mappings":";;;;;;;;MAgBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;IACE,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAKA,aAAY,CAAC,OAAO;IACnF,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB,KAAKA,aAAY,CAAC,WAAW;AAC3F,IAAA,OAAO,KAAK,MAAM,IAAIA,aAAY,CAAC,IAAI;AACxC,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;IAChG,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,SAAS,EAAEC,WAAU,CAAC,KAAK,CAAC;AACvD,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;AAChC,IAAA,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG,CAAC,OAAO,IAAID,aAAY,CAAC,IAAI,EAAE,UAAU,IAAIA,aAAY,CAAC,QAAQ,CAAC;AAEvF,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAOE,+BAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAAF,aAAY,CAAC,MAAM;AACnB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAIA,aAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,OAAO,IAAIA,aAAY,CAAC,OAAO;AACrC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAOE,+BAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAAC,WAAU,CAAC,IAAI;AACf,gBAAA,KAAK,CAAC,OAAO,IAAIA,WAAU,CAAC,OAAO;AACpC,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAOD,+BAAe,CAAC,WAAW,CAAC;AACtC;AACH;;;;;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ActionAppearance, ActionVariant } from './types';
|
|
3
|
+
type AppearanceClassProps = {
|
|
4
|
+
className?: string;
|
|
5
|
+
variant?: ActionVariant;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
compact?: boolean;
|
|
8
|
+
iconSlot?: React.ReactNode;
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
};
|
|
11
|
+
export declare const getButtonVariantClasses: (variant?: ActionVariant) => any[];
|
|
12
|
+
export declare const getAppearanceClasses: (appearance: ActionAppearance, props: AppearanceClassProps) => string;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
2
|
+
import 'uid/secure';
|
|
3
|
+
import baseStyles from './styles/base.module.scss.js';
|
|
4
|
+
import buttonStyles from './styles/button.module.scss.js';
|
|
5
|
+
import linkStyles from './styles/link.module.scss.js';
|
|
6
|
+
|
|
7
|
+
const getButtonVariantClasses = (variant) => [
|
|
8
|
+
(variant === 'primary' || variant === 'primaryDestructive') && buttonStyles.primary,
|
|
9
|
+
(variant === 'destructive' || variant === 'primaryDestructive') && buttonStyles.destructive,
|
|
10
|
+
variant === 'flat' && buttonStyles.flat,
|
|
11
|
+
].filter(Boolean);
|
|
12
|
+
const getAppearanceClasses = (appearance, props) => {
|
|
13
|
+
const baseClasses = [props.className, baseStyles.reset];
|
|
14
|
+
const hasIcon = !!props.iconSlot;
|
|
15
|
+
const isIconOnly = hasIcon && (props.children == null || props.children === '');
|
|
16
|
+
const iconClasses = [hasIcon && buttonStyles.icon, isIconOnly && buttonStyles.iconOnly];
|
|
17
|
+
switch (appearance) {
|
|
18
|
+
case 'button':
|
|
19
|
+
return buildClassnames([
|
|
20
|
+
...baseClasses,
|
|
21
|
+
buttonStyles.button,
|
|
22
|
+
...iconClasses,
|
|
23
|
+
props.disabled && buttonStyles.disabled,
|
|
24
|
+
props.compact && buttonStyles.compact,
|
|
25
|
+
...getButtonVariantClasses(props.variant),
|
|
26
|
+
]);
|
|
27
|
+
case 'link':
|
|
28
|
+
return buildClassnames([
|
|
29
|
+
...baseClasses,
|
|
30
|
+
linkStyles.link,
|
|
31
|
+
props.compact && linkStyles.compact,
|
|
32
|
+
]);
|
|
33
|
+
default:
|
|
34
|
+
return buildClassnames(baseClasses);
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export { getAppearanceClasses, getButtonVariantClasses };
|
|
39
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport baseStyles from './styles/base.module.scss';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport { ActionAppearance, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n className?: string;\n variant?: ActionVariant;\n disabled?: boolean;\n compact?: boolean;\n iconSlot?: React.ReactNode;\n children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n [\n (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles.primary,\n (variant === 'destructive' || variant === 'primaryDestructive') && buttonStyles.destructive,\n variant === 'flat' && buttonStyles.flat,\n ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n const baseClasses = [props.className, baseStyles.reset];\n const hasIcon = !!props.iconSlot;\n const isIconOnly = hasIcon && (props.children == null || props.children === '');\n const iconClasses = [hasIcon && buttonStyles.icon, isIconOnly && buttonStyles.iconOnly];\n\n switch (appearance) {\n case 'button':\n return buildClassnames([\n ...baseClasses,\n buttonStyles.button,\n ...iconClasses,\n props.disabled && buttonStyles.disabled,\n props.compact && buttonStyles.compact,\n ...getButtonVariantClasses(props.variant),\n ]);\n case 'link':\n return buildClassnames([\n ...baseClasses,\n linkStyles.link,\n props.compact && linkStyles.compact,\n ]);\n default:\n return buildClassnames(baseClasses);\n }\n};\n"],"names":[],"mappings":";;;;;;MAgBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;IACE,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAK,YAAY,CAAC,OAAO;IACnF,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB,KAAK,YAAY,CAAC,WAAW;AAC3F,IAAA,OAAO,KAAK,MAAM,IAAI,YAAY,CAAC,IAAI;AACxC,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;IAChG,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC;AACvD,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;AAChC,IAAA,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG,CAAC,OAAO,IAAI,YAAY,CAAC,IAAI,EAAE,UAAU,IAAI,YAAY,CAAC,QAAQ,CAAC;AAEvF,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAA,YAAY,CAAC,MAAM;AACnB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAI,YAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO;AACrC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAA,UAAU,CAAC,IAAI;AACf,gBAAA,KAAK,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO;AACpC,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAO,eAAe,CAAC,WAAW,CAAC;AACtC;AACH;;;;"}
|
|
@@ -5,16 +5,18 @@ var sizes = require('../../theme/modules/sizes.cjs');
|
|
|
5
5
|
var urlUtils = require('./utils/urlUtils.cjs');
|
|
6
6
|
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
7
7
|
require('uid/secure');
|
|
8
|
+
var isExternalLink = require('./isExternalLink.cjs');
|
|
8
9
|
var Anchor_module = require('./Anchor.module.scss.cjs');
|
|
9
10
|
var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
|
|
10
11
|
var LaunchIcon = require('../../icons/design-system/components/LaunchIcon.cjs');
|
|
11
|
-
var isExternalLink = require('./isExternalLink.cjs');
|
|
12
12
|
|
|
13
13
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
14
14
|
|
|
15
15
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
16
16
|
|
|
17
17
|
/**
|
|
18
|
+
* @deprecated Use the `Action` component instead
|
|
19
|
+
*
|
|
18
20
|
* Anchor component for handling context-aware links with consistent functionality and styling options.
|
|
19
21
|
*
|
|
20
22
|
* https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Anchor.cjs","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\
|
|
1
|
+
{"version":3,"file":"Anchor.cjs","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport { buildClassnames } from '../../utils';\nimport styles from './Anchor.module.scss';\n\nimport { HelpIcon, LaunchIcon } from '../../icons';\nimport { isExternalLink } from './isExternalLink';\n\n/**\n * @deprecated Use the `Action` component instead\n *\n * Anchor component for handling context-aware links with consistent functionality and styling options.\n *\n * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev\n *\n * @param variant - The visual style variant ('base' or 'unstyled')\n * @param href - The URL the link points to (will be processed to be context-aware)\n * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)\n * @param children - The content of the anchor\n * @param rest - All other standard anchor HTML attributes\n */\nexport const Anchor = React.memo(\n ({\n variant = 'base',\n size = 'base',\n href,\n showHelpIcon = false,\n leftIconSlot = null,\n hideExternalLinkIcon = false,\n allowedHostnames = [],\n children,\n target,\n rel,\n className,\n ...rest\n }: AnchorProps) => {\n // Process the URL to make it context-aware\n const processedHref = href ? createContextAwareUrl(href) : undefined;\n\n // Determine if link is external based on processed href\n const isExternal = processedHref ? isExternalLink(processedHref, allowedHostnames) : false;\n\n // Set security attributes for external links if not given in props\n const secureTarget = target || (isExternal ? '_blank' : undefined);\n const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n // Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)\n const shouldShowExternalLinkIcon =\n (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';\n\n const classNames = buildClassnames([\n variant !== 'unstyled' && styles.anchor,\n variant === 'inherit' && styles.inherit,\n variant !== 'unstyled' && styles[size],\n className,\n ]);\n\n return (\n <a\n href={processedHref}\n target={secureTarget}\n rel={secureRel}\n className={classNames}\n {...rest}\n >\n {leftIconSlot}\n {showHelpIcon && !leftIconSlot && (\n <HelpIcon role=\"presentation\" data-testid=\"help-icon\" style={{ marginRight: sizes.xs }} />\n )}\n\n {children}\n {shouldShowExternalLinkIcon && (\n <LaunchIcon\n role=\"presentation\"\n data-testid=\"external-icon\"\n style={{ marginLeft: sizes.xs }}\n />\n )}\n </a>\n );\n },\n);\n"],"names":["React","createContextAwareUrl","isExternalLink","buildClassnames","styles","HelpIcon","sizes","LaunchIcon"],"mappings":";;;;;;;;;;;;;;;;AAUA;;;;;;;;;;;;AAYG;MACU,MAAM,GAAGA,sBAAK,CAAC,IAAI,CAC9B,CAAC,EACC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,IAAI,EACnB,oBAAoB,GAAG,KAAK,EAC5B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EACT,GAAG,IAAI,EACK,KAAI;;AAEhB,IAAA,MAAM,aAAa,GAAG,IAAI,GAAGC,8BAAqB,CAAC,IAAI,CAAC,GAAG,SAAS;;AAGpE,IAAA,MAAM,UAAU,GAAG,aAAa,GAAGC,6BAAc,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK;;AAG1F,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;;AAGzE,IAAA,MAAM,0BAA0B,GAC9B,CAAC,UAAU,IAAI,YAAY,KAAK,QAAQ,KAAK,CAAC,oBAAoB,IAAI,OAAO,KAAK,MAAM;IAE1F,MAAM,UAAU,GAAGC,+BAAe,CAAC;AACjC,QAAA,OAAO,KAAK,UAAU,IAAIC,aAAM,CAAC,MAAM;AACvC,QAAA,OAAO,KAAK,SAAS,IAAIA,aAAM,CAAC,OAAO;AACvC,QAAA,OAAO,KAAK,UAAU,IAAIA,aAAM,CAAC,IAAI,CAAC;QACtC,SAAS;AACV,KAAA,CAAC;AAEF,IAAA,QACEJ,sBAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,UAAU,KACjB,IAAI,EAAA;QAEP,YAAY;QACZ,YAAY,IAAI,CAAC,YAAY,KAC5BA,qCAACK,uBAAQ,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,WAAW,EAAC,KAAK,EAAE,EAAE,WAAW,EAAEC,WAAK,CAAC,EAAE,EAAE,EAAA,CAAI,CAC3F;QAEA,QAAQ;QACR,0BAA0B,KACzBN,sBAAA,CAAA,aAAA,CAACO,yBAAU,EAAA,EACT,IAAI,EAAC,cAAc,EAAA,aAAA,EACP,eAAe,EAC3B,KAAK,EAAE,EAAE,UAAU,EAAED,WAAK,CAAC,EAAE,EAAE,EAAA,CAC/B,CACH,CACC;AAER,CAAC;;;;"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { AnchorProps } from './types';
|
|
3
3
|
/**
|
|
4
|
+
* @deprecated Use the `Action` component instead
|
|
5
|
+
*
|
|
4
6
|
* Anchor component for handling context-aware links with consistent functionality and styling options.
|
|
5
7
|
*
|
|
6
8
|
* https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev
|
|
@@ -3,12 +3,14 @@ import { sizes } from '../../theme/modules/sizes.js';
|
|
|
3
3
|
import { createContextAwareUrl } from './utils/urlUtils.js';
|
|
4
4
|
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
5
5
|
import 'uid/secure';
|
|
6
|
+
import { isExternalLink } from './isExternalLink.js';
|
|
6
7
|
import styles from './Anchor.module.scss.js';
|
|
7
8
|
import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
|
|
8
9
|
import { ReactComponent as LaunchIcon } from '../../icons/design-system/components/LaunchIcon.js';
|
|
9
|
-
import { isExternalLink } from './isExternalLink.js';
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
|
+
* @deprecated Use the `Action` component instead
|
|
13
|
+
*
|
|
12
14
|
* Anchor component for handling context-aware links with consistent functionality and styling options.
|
|
13
15
|
*
|
|
14
16
|
* https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Anchor.js","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\
|
|
1
|
+
{"version":3,"file":"Anchor.js","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport { buildClassnames } from '../../utils';\nimport styles from './Anchor.module.scss';\n\nimport { HelpIcon, LaunchIcon } from '../../icons';\nimport { isExternalLink } from './isExternalLink';\n\n/**\n * @deprecated Use the `Action` component instead\n *\n * Anchor component for handling context-aware links with consistent functionality and styling options.\n *\n * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev\n *\n * @param variant - The visual style variant ('base' or 'unstyled')\n * @param href - The URL the link points to (will be processed to be context-aware)\n * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)\n * @param children - The content of the anchor\n * @param rest - All other standard anchor HTML attributes\n */\nexport const Anchor = React.memo(\n ({\n variant = 'base',\n size = 'base',\n href,\n showHelpIcon = false,\n leftIconSlot = null,\n hideExternalLinkIcon = false,\n allowedHostnames = [],\n children,\n target,\n rel,\n className,\n ...rest\n }: AnchorProps) => {\n // Process the URL to make it context-aware\n const processedHref = href ? createContextAwareUrl(href) : undefined;\n\n // Determine if link is external based on processed href\n const isExternal = processedHref ? isExternalLink(processedHref, allowedHostnames) : false;\n\n // Set security attributes for external links if not given in props\n const secureTarget = target || (isExternal ? '_blank' : undefined);\n const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n // Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)\n const shouldShowExternalLinkIcon =\n (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';\n\n const classNames = buildClassnames([\n variant !== 'unstyled' && styles.anchor,\n variant === 'inherit' && styles.inherit,\n variant !== 'unstyled' && styles[size],\n className,\n ]);\n\n return (\n <a\n href={processedHref}\n target={secureTarget}\n rel={secureRel}\n className={classNames}\n {...rest}\n >\n {leftIconSlot}\n {showHelpIcon && !leftIconSlot && (\n <HelpIcon role=\"presentation\" data-testid=\"help-icon\" style={{ marginRight: sizes.xs }} />\n )}\n\n {children}\n {shouldShowExternalLinkIcon && (\n <LaunchIcon\n role=\"presentation\"\n data-testid=\"external-icon\"\n style={{ marginLeft: sizes.xs }}\n />\n )}\n </a>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;;;;;;AAUA;;;;;;;;;;;;AAYG;MACU,MAAM,GAAGA,cAAK,CAAC,IAAI,CAC9B,CAAC,EACC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,IAAI,EACnB,oBAAoB,GAAG,KAAK,EAC5B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EACT,GAAG,IAAI,EACK,KAAI;;AAEhB,IAAA,MAAM,aAAa,GAAG,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC,GAAG,SAAS;;AAGpE,IAAA,MAAM,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK;;AAG1F,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;;AAGzE,IAAA,MAAM,0BAA0B,GAC9B,CAAC,UAAU,IAAI,YAAY,KAAK,QAAQ,KAAK,CAAC,oBAAoB,IAAI,OAAO,KAAK,MAAM;IAE1F,MAAM,UAAU,GAAG,eAAe,CAAC;AACjC,QAAA,OAAO,KAAK,UAAU,IAAI,MAAM,CAAC,MAAM;AACvC,QAAA,OAAO,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO;AACvC,QAAA,OAAO,KAAK,UAAU,IAAI,MAAM,CAAC,IAAI,CAAC;QACtC,SAAS;AACV,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,UAAU,KACjB,IAAI,EAAA;QAEP,YAAY;QACZ,YAAY,IAAI,CAAC,YAAY,KAC5BA,6BAAC,QAAQ,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,WAAW,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE,EAAA,CAAI,CAC3F;QAEA,QAAQ;QACR,0BAA0B,KACzBA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,IAAI,EAAC,cAAc,EAAA,aAAA,EACP,eAAe,EAC3B,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,EAAA,CAC/B,CACH,CACC;AAER,CAAC;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle("._anchor_1dmmh_1 {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n padding: 0 2px;\n}\n._anchor_1dmmh_1:focus-visible {\n outline: 0;\n border-radius: var(--radius-base);\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n._anchor_1dmmh_1:hover {\n text-decoration-thickness: 2px;\n}\n._anchor_1dmmh_1 svg {\n width: var(--icon-size);\n height: var(--icon-size);\n vertical-align: middle;\n flex-shrink: 0;\n}\n\n._lg_1dmmh_23 {\n --icon-size: var(--sizes-md);\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._md_1dmmh_35 {\n --icon-size: var(--sizes-5);\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._base_1dmmh_47 {\n --icon-size: var(--sizes-base);\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._sm_1dmmh_59 {\n --icon-size: var(--sizes-3);\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._inherit_1dmmh_71 {\n font-size: inherit;\n line-height: inherit;\n}");
|
|
6
|
-
var styles = {"anchor":"
|
|
5
|
+
___$insertStyle("._heading-xxl_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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._anchor_1h7kx_342 {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n padding: 0 2px;\n}\n._anchor_1h7kx_342:focus-visible {\n outline: 0;\n border-radius: var(--radius-base);\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n._anchor_1h7kx_342:hover {\n text-decoration-thickness: 2px;\n}\n._anchor_1h7kx_342 svg {\n width: var(--icon-size);\n height: var(--icon-size);\n vertical-align: middle;\n flex-shrink: 0;\n}\n\n._lg_1h7kx_364 {\n --icon-size: var(--sizes-md);\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._md_1h7kx_376 {\n --icon-size: var(--sizes-5);\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._base_1h7kx_388 {\n --icon-size: var(--sizes-base);\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._sm_1h7kx_400 {\n --icon-size: var(--sizes-3);\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._inherit_1h7kx_412 {\n font-size: inherit;\n line-height: inherit;\n}");
|
|
6
|
+
var styles = {"heading-xxl":"_heading-xxl_1h7kx_1","heading-xl":"_heading-xl_1h7kx_12","heading-large":"_heading-large_1h7kx_23","heading-medium":"_heading-medium_1h7kx_34","heading-small":"_heading-small_1h7kx_45","heading-table":"_heading-table_1h7kx_56","subheading-large":"_subheading-large_1h7kx_67","subheading-medium":"_subheading-medium_1h7kx_78","subheading-small":"_subheading-small_1h7kx_89","subheading-small-bold":"_subheading-small-bold_1h7kx_100","body":"_body_1h7kx_111","body-small":"_body-small_1h7kx_122","body-bold":"_body-bold_1h7kx_133","body-bold-dark":"_body-bold-dark_1h7kx_144","body-small-bold":"_body-small-bold_1h7kx_155","button":"_button_1h7kx_166","button-small":"_button-small_1h7kx_177","link-large":"_link-large_1h7kx_188","link-medium":"_link-medium_1h7kx_199","link":"_link_1h7kx_188","link-small":"_link-small_1h7kx_221","input-label":"_input-label_1h7kx_232","input-label-small":"_input-label-small_1h7kx_243","hint-text":"_hint-text_1h7kx_254","placeholder":"_placeholder_1h7kx_265","placeholder-small":"_placeholder-small_1h7kx_276","placeholder-code":"_placeholder-code_1h7kx_287","placeholder-code-small":"_placeholder-code-small_1h7kx_298","error":"_error_1h7kx_309","error-small":"_error-small_1h7kx_320","success-small":"_success-small_1h7kx_331","anchor":"_anchor_1h7kx_342","lg":"_lg_1h7kx_364","md":"_md_1h7kx_376","base":"_base_1h7kx_388","sm":"_sm_1h7kx_400","inherit":"_inherit_1h7kx_412"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=Anchor.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Anchor.module.scss.cjs","sources":["../../../src/components/Anchor/Anchor.module.scss"],"sourcesContent":["@use '../../theme/scss/text.module.scss' as text;\n\n.anchor {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n padding: 0 2px;\n\n &:focus-visible {\n outline: 0;\n border-radius: var(--radius-base);\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n\n &:hover {\n text-decoration-thickness: 2px;\n }\n\n svg {\n width: var(--icon-size);\n height: var(--icon-size);\n vertical-align: middle;\n flex-shrink: 0;\n }\n}\n\n.lg {\n --icon-size: var(--sizes-md);\n\n @include text.link-large;\n}\n\n.md {\n --icon-size: var(--sizes-5);\n\n @include text.link-medium;\n}\n\n.base {\n --icon-size: var(--sizes-base);\n\n @include text.link;\n}\n\n.sm {\n --icon-size: var(--sizes-3);\n\n @include text.link-small;\n}\n\n.inherit {\n font-size: inherit;\n line-height: inherit;\n}\n"],"names":[],"mappings":";;;;AAGE,eAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Anchor.module.scss.cjs","sources":["../../../src/components/Anchor/Anchor.module.scss"],"sourcesContent":["@use '../../theme/scss/text.module.scss' as text;\n\n.anchor {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n padding: 0 2px;\n\n &:focus-visible {\n outline: 0;\n border-radius: var(--radius-base);\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n\n &:hover {\n text-decoration-thickness: 2px;\n }\n\n svg {\n width: var(--icon-size);\n height: var(--icon-size);\n vertical-align: middle;\n flex-shrink: 0;\n }\n}\n\n.lg {\n --icon-size: var(--sizes-md);\n\n @include text.link-large;\n}\n\n.md {\n --icon-size: var(--sizes-5);\n\n @include text.link-medium;\n}\n\n.base {\n --icon-size: var(--sizes-base);\n\n @include text.link;\n}\n\n.sm {\n --icon-size: var(--sizes-3);\n\n @include text.link-small;\n}\n\n.inherit {\n font-size: inherit;\n line-height: inherit;\n}\n"],"names":[],"mappings":";;;;AAGE,eAAA,CAAA,03gBAAA;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,QAAA,CAAA,mBAAA,CAAA,IAAA,CAAA,eAAA,CAAA,IAAA,CAAA,eAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,IAAA,CAAA,eAAA,CAAA,SAAA,CAAA,oBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle("._anchor_1dmmh_1 {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n padding: 0 2px;\n}\n._anchor_1dmmh_1:focus-visible {\n outline: 0;\n border-radius: var(--radius-base);\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n._anchor_1dmmh_1:hover {\n text-decoration-thickness: 2px;\n}\n._anchor_1dmmh_1 svg {\n width: var(--icon-size);\n height: var(--icon-size);\n vertical-align: middle;\n flex-shrink: 0;\n}\n\n._lg_1dmmh_23 {\n --icon-size: var(--sizes-md);\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._md_1dmmh_35 {\n --icon-size: var(--sizes-5);\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._base_1dmmh_47 {\n --icon-size: var(--sizes-base);\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._sm_1dmmh_59 {\n --icon-size: var(--sizes-3);\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._inherit_1dmmh_71 {\n font-size: inherit;\n line-height: inherit;\n}");
|
|
4
|
-
var styles = {"anchor":"
|
|
3
|
+
insertStyle("._heading-xxl_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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_1h7kx_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._anchor_1h7kx_342 {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n padding: 0 2px;\n}\n._anchor_1h7kx_342:focus-visible {\n outline: 0;\n border-radius: var(--radius-base);\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n._anchor_1h7kx_342:hover {\n text-decoration-thickness: 2px;\n}\n._anchor_1h7kx_342 svg {\n width: var(--icon-size);\n height: var(--icon-size);\n vertical-align: middle;\n flex-shrink: 0;\n}\n\n._lg_1h7kx_364 {\n --icon-size: var(--sizes-md);\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._md_1h7kx_376 {\n --icon-size: var(--sizes-5);\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._base_1h7kx_388 {\n --icon-size: var(--sizes-base);\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._sm_1h7kx_400 {\n --icon-size: var(--sizes-3);\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._inherit_1h7kx_412 {\n font-size: inherit;\n line-height: inherit;\n}");
|
|
4
|
+
var styles = {"heading-xxl":"_heading-xxl_1h7kx_1","heading-xl":"_heading-xl_1h7kx_12","heading-large":"_heading-large_1h7kx_23","heading-medium":"_heading-medium_1h7kx_34","heading-small":"_heading-small_1h7kx_45","heading-table":"_heading-table_1h7kx_56","subheading-large":"_subheading-large_1h7kx_67","subheading-medium":"_subheading-medium_1h7kx_78","subheading-small":"_subheading-small_1h7kx_89","subheading-small-bold":"_subheading-small-bold_1h7kx_100","body":"_body_1h7kx_111","body-small":"_body-small_1h7kx_122","body-bold":"_body-bold_1h7kx_133","body-bold-dark":"_body-bold-dark_1h7kx_144","body-small-bold":"_body-small-bold_1h7kx_155","button":"_button_1h7kx_166","button-small":"_button-small_1h7kx_177","link-large":"_link-large_1h7kx_188","link-medium":"_link-medium_1h7kx_199","link":"_link_1h7kx_188","link-small":"_link-small_1h7kx_221","input-label":"_input-label_1h7kx_232","input-label-small":"_input-label-small_1h7kx_243","hint-text":"_hint-text_1h7kx_254","placeholder":"_placeholder_1h7kx_265","placeholder-small":"_placeholder-small_1h7kx_276","placeholder-code":"_placeholder-code_1h7kx_287","placeholder-code-small":"_placeholder-code-small_1h7kx_298","error":"_error_1h7kx_309","error-small":"_error-small_1h7kx_320","success-small":"_success-small_1h7kx_331","anchor":"_anchor_1h7kx_342","lg":"_lg_1h7kx_364","md":"_md_1h7kx_376","base":"_base_1h7kx_388","sm":"_sm_1h7kx_400","inherit":"_inherit_1h7kx_412"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=Anchor.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Anchor.module.scss.js","sources":["../../../src/components/Anchor/Anchor.module.scss"],"sourcesContent":["@use '../../theme/scss/text.module.scss' as text;\n\n.anchor {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n padding: 0 2px;\n\n &:focus-visible {\n outline: 0;\n border-radius: var(--radius-base);\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n\n &:hover {\n text-decoration-thickness: 2px;\n }\n\n svg {\n width: var(--icon-size);\n height: var(--icon-size);\n vertical-align: middle;\n flex-shrink: 0;\n }\n}\n\n.lg {\n --icon-size: var(--sizes-md);\n\n @include text.link-large;\n}\n\n.md {\n --icon-size: var(--sizes-5);\n\n @include text.link-medium;\n}\n\n.base {\n --icon-size: var(--sizes-base);\n\n @include text.link;\n}\n\n.sm {\n --icon-size: var(--sizes-3);\n\n @include text.link-small;\n}\n\n.inherit {\n font-size: inherit;\n line-height: inherit;\n}\n"],"names":["___$insertStyle"],"mappings":";;AAGEA,WAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Anchor.module.scss.js","sources":["../../../src/components/Anchor/Anchor.module.scss"],"sourcesContent":["@use '../../theme/scss/text.module.scss' as text;\n\n.anchor {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n padding: 0 2px;\n\n &:focus-visible {\n outline: 0;\n border-radius: var(--radius-base);\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n\n &:hover {\n text-decoration-thickness: 2px;\n }\n\n svg {\n width: var(--icon-size);\n height: var(--icon-size);\n vertical-align: middle;\n flex-shrink: 0;\n }\n}\n\n.lg {\n --icon-size: var(--sizes-md);\n\n @include text.link-large;\n}\n\n.md {\n --icon-size: var(--sizes-5);\n\n @include text.link-medium;\n}\n\n.base {\n --icon-size: var(--sizes-base);\n\n @include text.link;\n}\n\n.sm {\n --icon-size: var(--sizes-3);\n\n @include text.link-small;\n}\n\n.inherit {\n font-size: inherit;\n line-height: inherit;\n}\n"],"names":["___$insertStyle"],"mappings":";;AAGEA,WAAA,CAAA,03gBAAA;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,QAAA,CAAA,mBAAA,CAAA,IAAA,CAAA,eAAA,CAAA,IAAA,CAAA,eAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,IAAA,CAAA,eAAA,CAAA,SAAA,CAAA,oBAAA;;;;"}
|
|
@@ -12,5 +12,9 @@ export declare const IconCol: import("styled-components").StyledComponent<"div",
|
|
|
12
12
|
}, never>;
|
|
13
13
|
export declare const ChildContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
14
14
|
declare const HeaderCol: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
15
|
-
declare const StyledText: import("styled-components").StyledComponent<
|
|
15
|
+
declare const StyledText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
|
|
16
|
+
as?: import("../Text").ValidTextTag | undefined;
|
|
17
|
+
muted?: boolean | undefined;
|
|
18
|
+
variant?: "body" | "button" | "link" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
|
|
19
|
+
} & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
|
|
16
20
|
export { BannerLayout as Pill, StyledText as Text, Row, Col, HeaderCol };
|
|
@@ -19,6 +19,9 @@ const variantMap = {
|
|
|
19
19
|
link: styled.LinkButton,
|
|
20
20
|
unstyled: styled.UnstyledButton,
|
|
21
21
|
};
|
|
22
|
+
/**
|
|
23
|
+
* @deprecated Use the `Action` component instead
|
|
24
|
+
*/
|
|
22
25
|
const ButtonBase = React.forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, contentStyles, ...otherProps }, ref) => {
|
|
23
26
|
if (variant === 'unstyled') {
|
|
24
27
|
return (React__default.default.createElement(styled.UnstyledButton, { ref: ref, className: className, ...otherProps }, children));
|
|
@@ -37,4 +40,5 @@ const ButtonBase = React.forwardRef(({ className, children, iconSlot, variant =
|
|
|
37
40
|
const Button = withTokens.withTokens(ButtonBase);
|
|
38
41
|
|
|
39
42
|
exports.Button = Button;
|
|
43
|
+
exports.ButtonBase = ButtonBase;
|
|
40
44
|
//# sourceMappingURL=Button.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\n\nimport {\n DefaultButton,\n DefaultDestructiveButton,\n PrimaryButton,\n PrimaryDestructiveButton,\n FlatButton,\n LinkButton,\n UnstyledButton,\n LoadingWrapper,\n MainContent,\n} from './components/styled';\nimport { DropdownIcon } from '../../icons';\n\nconst variantMap = {\n default: DefaultButton,\n primary: PrimaryButton,\n destructive: DefaultDestructiveButton,\n primaryDestructive: PrimaryDestructiveButton,\n flat: FlatButton,\n link: LinkButton,\n unstyled: UnstyledButton,\n};\n\
|
|
1
|
+
{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\n\nimport {\n DefaultButton,\n DefaultDestructiveButton,\n PrimaryButton,\n PrimaryDestructiveButton,\n FlatButton,\n LinkButton,\n UnstyledButton,\n LoadingWrapper,\n MainContent,\n} from './components/styled';\nimport { DropdownIcon } from '../../icons';\n\nconst variantMap = {\n default: DefaultButton,\n primary: PrimaryButton,\n destructive: DefaultDestructiveButton,\n primaryDestructive: PrimaryDestructiveButton,\n flat: FlatButton,\n link: LinkButton,\n unstyled: UnstyledButton,\n};\n\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 ...otherProps\n }: ButtonProps,\n ref,\n ) => {\n if (variant === 'unstyled') {\n return (\n <UnstyledButton ref={ref} className={className} {...otherProps}>\n {children}\n </UnstyledButton>\n );\n }\n\n const VariantButton = variantMap[variant];\n\n const hasChildren = children !== undefined;\n const hasIcon = !!iconSlot;\n return (\n <VariantButton\n ref={ref}\n className={className}\n size={size}\n hasText={hasChildren}\n hasIcon={hasIcon}\n hasDropdown={dropdown}\n {...otherProps}\n >\n {(hasChildren || hasIcon) && (\n <MainContent\n $loading={loading}\n hasText={!!children}\n size={children || size === 'sm' ? 'base' : 'md'}\n style={contentStyles}\n >\n {iconSlot && iconSlot}\n {children !== undefined && children}\n {dropdown && <DropdownIcon />}\n </MainContent>\n )}\n\n {loading && (\n <LoadingWrapper>\n <Loader />\n </LoadingWrapper>\n )}\n </VariantButton>\n );\n },\n);\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["DefaultButton","PrimaryButton","DefaultDestructiveButton","PrimaryDestructiveButton","FlatButton","LinkButton","UnstyledButton","forwardRef","React","MainContent","DropdownIcon","LoadingWrapper","Loader","withTokens"],"mappings":";;;;;;;;;;;;AAmBA,MAAM,UAAU,GAAG;AACjB,IAAA,OAAO,EAAEA,oBAAa;AACtB,IAAA,OAAO,EAAEC,oBAAa;AACtB,IAAA,WAAW,EAAEC,+BAAwB;AACrC,IAAA,kBAAkB,EAAEC,+BAAwB;AAC5C,IAAA,IAAI,EAAEC,iBAAU;AAChB,IAAA,IAAI,EAAEC,iBAAU;AAChB,IAAA,QAAQ,EAAEC,qBAAc;CACzB;AAED;;AAEG;AACI,MAAM,UAAU,GAAGC,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,aAAa,EACb,GAAG,UAAU,EACD,EACd,GAAG,KACD;IACF,IAAI,OAAO,KAAK,UAAU,EAAE;AAC1B,QAAA,QACEC,sBAAA,CAAA,aAAA,CAACF,qBAAc,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAA,GAAM,UAAU,IAC3D,QAAQ,CACM;AAEpB,IAAA;AAED,IAAA,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC;AAEzC,IAAA,MAAM,WAAW,GAAG,QAAQ,KAAK,SAAS;AAC1C,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ;AAC1B,IAAA,QACEE,sBAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,QAAQ,EAAA,GACjB,UAAU,EAAA;AAEb,QAAA,CAAC,WAAW,IAAI,OAAO,MACtBA,sBAAA,CAAA,aAAA,CAACC,kBAAW,EAAA,EAAA,UAAA,EACA,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,IAAI,EAC/C,KAAK,EAAE,aAAa,EAAA;AAEnB,YAAA,QAAQ,IAAI,QAAQ;YACpB,QAAQ,KAAK,SAAS,IAAI,QAAQ;AAClC,YAAA,QAAQ,IAAID,sBAAA,CAAA,aAAA,CAACE,yBAAY,EAAA,IAAA,CAAG,CACjB,CACf;QAEA,OAAO,KACNF,sBAAA,CAAA,aAAA,CAACG,qBAAc,EAAA,IAAA;AACb,YAAAH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,IAAA,CAAG,CACK,CAClB,CACa;AAEpB,CAAC;MAGU,MAAM,GAAGC,qBAAU,CAAC,UAAU;;;;;"}
|
|
@@ -1,4 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* @deprecated Use the `Action` component instead
|
|
4
|
+
*/
|
|
5
|
+
export declare const ButtonBase: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../hoc/withTokens").WithTokensProps & {
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
variant?: import("./types").ButtonVariant | undefined;
|
|
8
|
+
size?: "base" | "sm" | undefined;
|
|
9
|
+
iconSlot?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
|
|
10
|
+
dropdown?: boolean | undefined;
|
|
11
|
+
loading?: boolean | undefined;
|
|
12
|
+
contentStyles?: React.CSSProperties | undefined;
|
|
13
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
2
14
|
export declare const Button: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../hoc/withTokens").WithTokensProps & {
|
|
3
15
|
children?: React.ReactNode;
|
|
4
16
|
variant?: import("./types").ButtonVariant | undefined;
|
|
@@ -13,6 +13,9 @@ const variantMap = {
|
|
|
13
13
|
link: LinkButton,
|
|
14
14
|
unstyled: UnstyledButton,
|
|
15
15
|
};
|
|
16
|
+
/**
|
|
17
|
+
* @deprecated Use the `Action` component instead
|
|
18
|
+
*/
|
|
16
19
|
const ButtonBase = forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, contentStyles, ...otherProps }, ref) => {
|
|
17
20
|
if (variant === 'unstyled') {
|
|
18
21
|
return (React__default.createElement(UnstyledButton, { ref: ref, className: className, ...otherProps }, children));
|
|
@@ -30,5 +33,5 @@ const ButtonBase = forwardRef(({ className, children, iconSlot, variant = 'defau
|
|
|
30
33
|
});
|
|
31
34
|
const Button = withTokens(ButtonBase);
|
|
32
35
|
|
|
33
|
-
export { Button };
|
|
36
|
+
export { Button, ButtonBase };
|
|
34
37
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\n\nimport {\n DefaultButton,\n DefaultDestructiveButton,\n PrimaryButton,\n PrimaryDestructiveButton,\n FlatButton,\n LinkButton,\n UnstyledButton,\n LoadingWrapper,\n MainContent,\n} from './components/styled';\nimport { DropdownIcon } from '../../icons';\n\nconst variantMap = {\n default: DefaultButton,\n primary: PrimaryButton,\n destructive: DefaultDestructiveButton,\n primaryDestructive: PrimaryDestructiveButton,\n flat: FlatButton,\n link: LinkButton,\n unstyled: UnstyledButton,\n};\n\
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\n\nimport {\n DefaultButton,\n DefaultDestructiveButton,\n PrimaryButton,\n PrimaryDestructiveButton,\n FlatButton,\n LinkButton,\n UnstyledButton,\n LoadingWrapper,\n MainContent,\n} from './components/styled';\nimport { DropdownIcon } from '../../icons';\n\nconst variantMap = {\n default: DefaultButton,\n primary: PrimaryButton,\n destructive: DefaultDestructiveButton,\n primaryDestructive: PrimaryDestructiveButton,\n flat: FlatButton,\n link: LinkButton,\n unstyled: UnstyledButton,\n};\n\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 ...otherProps\n }: ButtonProps,\n ref,\n ) => {\n if (variant === 'unstyled') {\n return (\n <UnstyledButton ref={ref} className={className} {...otherProps}>\n {children}\n </UnstyledButton>\n );\n }\n\n const VariantButton = variantMap[variant];\n\n const hasChildren = children !== undefined;\n const hasIcon = !!iconSlot;\n return (\n <VariantButton\n ref={ref}\n className={className}\n size={size}\n hasText={hasChildren}\n hasIcon={hasIcon}\n hasDropdown={dropdown}\n {...otherProps}\n >\n {(hasChildren || hasIcon) && (\n <MainContent\n $loading={loading}\n hasText={!!children}\n size={children || size === 'sm' ? 'base' : 'md'}\n style={contentStyles}\n >\n {iconSlot && iconSlot}\n {children !== undefined && children}\n {dropdown && <DropdownIcon />}\n </MainContent>\n )}\n\n {loading && (\n <LoadingWrapper>\n <Loader />\n </LoadingWrapper>\n )}\n </VariantButton>\n );\n },\n);\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["React"],"mappings":";;;;;;AAmBA,MAAM,UAAU,GAAG;AACjB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,WAAW,EAAE,wBAAwB;AACrC,IAAA,kBAAkB,EAAE,wBAAwB;AAC5C,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,QAAQ,EAAE,cAAc;CACzB;AAED;;AAEG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,aAAa,EACb,GAAG,UAAU,EACD,EACd,GAAG,KACD;IACF,IAAI,OAAO,KAAK,UAAU,EAAE;AAC1B,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAA,GAAM,UAAU,IAC3D,QAAQ,CACM;AAEpB,IAAA;AAED,IAAA,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC;AAEzC,IAAA,MAAM,WAAW,GAAG,QAAQ,KAAK,SAAS;AAC1C,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ;AAC1B,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,QAAQ,EAAA,GACjB,UAAU,EAAA;AAEb,QAAA,CAAC,WAAW,IAAI,OAAO,MACtBA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAA,UAAA,EACA,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,IAAI,EAC/C,KAAK,EAAE,aAAa,EAAA;AAEnB,YAAA,QAAQ,IAAI,QAAQ;YACpB,QAAQ,KAAK,SAAS,IAAI,QAAQ;AAClC,YAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,IAAA,CAAG,CACjB,CACf;QAEA,OAAO,KACNA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA;AACb,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,CAAG,CACK,CAClB,CACa;AAEpB,CAAC;MAGU,MAAM,GAAG,UAAU,CAAC,UAAU;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ColumnAlignment } from '../types';
|
|
2
|
-
export declare function alignmentToFlex(align: ColumnAlignment): "center" | "flex-
|
|
2
|
+
export declare function alignmentToFlex(align: ColumnAlignment): "center" | "flex-start" | "flex-end";
|