@veeqo/ui 14.10.2 → 14.11.0-beta-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/Accordion.cjs +19 -16
- package/dist/components/Accordion/Accordion.cjs.map +1 -1
- package/dist/components/Accordion/Accordion.js +19 -16
- package/dist/components/Accordion/Accordion.js.map +1 -1
- package/dist/components/Accordion/Accordion.module.scss.cjs +9 -0
- package/dist/components/Accordion/Accordion.module.scss.cjs.map +1 -0
- package/dist/components/Accordion/Accordion.module.scss.js +7 -0
- package/dist/components/Accordion/Accordion.module.scss.js.map +1 -0
- package/dist/components/Action/Action.d.ts +4 -4
- package/dist/components/Action/styles/button.module.scss.cjs +2 -2
- package/dist/components/Action/styles/button.module.scss.cjs.map +1 -1
- package/dist/components/Action/styles/button.module.scss.js +2 -2
- package/dist/components/Action/styles/button.module.scss.js.map +1 -1
- package/dist/components/Action/styles/link.module.scss.cjs +2 -2
- package/dist/components/Action/styles/link.module.scss.cjs.map +1 -1
- package/dist/components/Action/styles/link.module.scss.js +2 -2
- package/dist/components/Action/styles/link.module.scss.js.map +1 -1
- package/dist/components/Action/utils.cjs +19 -14
- package/dist/components/Action/utils.cjs.map +1 -1
- package/dist/components/Action/utils.js +19 -14
- package/dist/components/Action/utils.js.map +1 -1
- package/dist/components/Button/Button.cjs +37 -37
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.d.ts +4 -13
- package/dist/components/Button/Button.js +37 -37
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/types.d.ts +7 -16
- package/dist/components/Card/Card.cjs +36 -9
- package/dist/components/Card/Card.cjs.map +1 -1
- package/dist/components/Card/Card.d.ts +10 -5
- package/dist/components/Card/Card.js +29 -2
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.module.scss.cjs +9 -0
- package/dist/components/Card/Card.module.scss.cjs.map +1 -0
- package/dist/components/Card/Card.module.scss.js +7 -0
- package/dist/components/Card/Card.module.scss.js.map +1 -0
- package/dist/components/Card/index.d.ts +1 -0
- package/dist/components/CardHeader/CardHeader.cjs +3 -3
- package/dist/components/CardHeader/CardHeader.cjs.map +1 -1
- package/dist/components/CardHeader/CardHeader.js +3 -3
- package/dist/components/CardHeader/CardHeader.js.map +1 -1
- package/dist/components/CardHeader/CardHeader.module.scss.cjs +9 -0
- package/dist/components/CardHeader/CardHeader.module.scss.cjs.map +1 -0
- package/dist/components/CardHeader/CardHeader.module.scss.js +7 -0
- package/dist/components/CardHeader/CardHeader.module.scss.js.map +1 -0
- package/dist/components/DimensionsInput/DimensionsInput.d.ts +10 -10
- package/dist/components/FilterTag/styled.d.ts +1 -1
- package/dist/components/Flex/FlexCol/FlexCol.d.ts +1 -1
- package/dist/components/Flex/FlexRow/FlexRow.d.ts +1 -1
- package/dist/components/LegacyDataTable/SpecificState/styled.d.ts +2 -2
- package/dist/components/Pagination/styled.d.ts +12 -17
- package/dist/components/PhoneInput/index.d.ts +10 -10
- package/dist/components/Search/Search.d.ts +10 -10
- package/dist/components/SimpleTable/SimpleTable.cjs +20 -7
- package/dist/components/SimpleTable/SimpleTable.cjs.map +1 -1
- package/dist/components/SimpleTable/SimpleTable.d.ts +9 -7
- package/dist/components/SimpleTable/SimpleTable.js +15 -2
- package/dist/components/SimpleTable/SimpleTable.js.map +1 -1
- package/dist/components/SimpleTable/SimpleTable.module.scss.cjs +9 -0
- package/dist/components/SimpleTable/SimpleTable.module.scss.cjs.map +1 -0
- package/dist/components/SimpleTable/SimpleTable.module.scss.js +7 -0
- package/dist/components/SimpleTable/SimpleTable.module.scss.js.map +1 -0
- package/dist/components/Text/Text.d.ts +1 -1
- package/dist/components/TextField/TextField.d.ts +10 -10
- package/dist/components/TextField/index.d.ts +10 -10
- package/dist/components/UploadFile/UploadFile.cjs +7 -2
- package/dist/components/UploadFile/UploadFile.cjs.map +1 -1
- package/dist/components/UploadFile/UploadFile.js +7 -2
- package/dist/components/UploadFile/UploadFile.js.map +1 -1
- package/dist/components/UploadFile/UploadFile.module.scss.cjs +9 -0
- package/dist/components/UploadFile/UploadFile.module.scss.cjs.map +1 -0
- package/dist/components/UploadFile/UploadFile.module.scss.js +7 -0
- package/dist/components/UploadFile/UploadFile.module.scss.js.map +1 -0
- package/dist/components/VideoModal/styled.d.ts +1 -6
- package/dist/components/View/View.cjs +37 -9
- package/dist/components/View/View.cjs.map +1 -1
- package/dist/components/View/View.js +35 -7
- package/dist/components/View/View.js.map +1 -1
- package/dist/components/View/View.module.scss.cjs +9 -0
- package/dist/components/View/View.module.scss.cjs.map +1 -0
- package/dist/components/View/View.module.scss.js +7 -0
- package/dist/components/View/View.module.scss.js.map +1 -0
- package/dist/components/ViewTab/ViewTab.d.ts +1 -1
- package/dist/components/index.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/Accordion/styled.cjs +0 -49
- package/dist/components/Accordion/styled.cjs.map +0 -1
- package/dist/components/Accordion/styled.d.ts +0 -26
- package/dist/components/Accordion/styled.js +0 -34
- package/dist/components/Accordion/styled.js.map +0 -1
- package/dist/components/Button/Button.module.scss.cjs +0 -9
- package/dist/components/Button/Button.module.scss.cjs.map +0 -1
- package/dist/components/Button/Button.module.scss.js +0 -7
- package/dist/components/Button/Button.module.scss.js.map +0 -1
- package/dist/components/Card/styled.cjs +0 -50
- package/dist/components/Card/styled.cjs.map +0 -1
- package/dist/components/Card/styled.d.ts +0 -16
- package/dist/components/Card/styled.js +0 -40
- package/dist/components/Card/styled.js.map +0 -1
- package/dist/components/CardHeader/styled.cjs +0 -15
- package/dist/components/CardHeader/styled.cjs.map +0 -1
- package/dist/components/CardHeader/styled.d.ts +0 -2
- package/dist/components/CardHeader/styled.js +0 -8
- package/dist/components/CardHeader/styled.js.map +0 -1
- package/dist/components/SimpleTable/styled.cjs +0 -34
- package/dist/components/SimpleTable/styled.cjs.map +0 -1
- package/dist/components/SimpleTable/styled.d.ts +0 -15
- package/dist/components/SimpleTable/styled.js +0 -23
- package/dist/components/SimpleTable/styled.js.map +0 -1
- package/dist/components/UploadFile/styled.cjs +0 -54
- package/dist/components/UploadFile/styled.cjs.map +0 -1
- package/dist/components/UploadFile/styled.d.ts +0 -4
- package/dist/components/UploadFile/styled.js +0 -48
- package/dist/components/UploadFile/styled.js.map +0 -1
- package/dist/components/View/styled.cjs +0 -53
- package/dist/components/View/styled.cjs.map +0 -1
- package/dist/components/View/styled.d.ts +0 -37
- package/dist/components/View/styled.js +0 -41
- package/dist/components/View/styled.js.map +0 -1
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var framerMotion = require('framer-motion');
|
|
5
|
-
var
|
|
5
|
+
var Text = require('../Text/Text.cjs');
|
|
6
6
|
var colors = require('../../theme/modules/colors.cjs');
|
|
7
7
|
var UpArrowIcon = require('../../icons/design-system/components/UpArrowIcon.cjs');
|
|
8
|
-
var
|
|
8
|
+
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
9
|
+
var assignCssVars = require('../../utils/assignCssVars.cjs');
|
|
10
|
+
var Accordion_module = require('./Accordion.module.scss.cjs');
|
|
9
11
|
|
|
10
12
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
11
13
|
|
|
@@ -20,34 +22,35 @@ const Accordion = ({ className, children, label, iconSlot, glyphColor = colors.c
|
|
|
20
22
|
animate: { opacity: 1 },
|
|
21
23
|
transition: { from: 0, type: 'tween', duration: timeout / 1000 },
|
|
22
24
|
};
|
|
25
|
+
const leftStyle = assignCssVars.assignCssVars({ glyphColor });
|
|
23
26
|
if (variant === 'unstyled') {
|
|
24
|
-
return (React__default.default.createElement(
|
|
25
|
-
React__default.default.createElement(
|
|
26
|
-
React__default.default.createElement(
|
|
27
|
-
React__default.default.createElement(
|
|
27
|
+
return (React__default.default.createElement("details", { open: !!shouldOpenOnMount, className: buildClassnames.buildClassnames([Accordion_module.details, className]) },
|
|
28
|
+
React__default.default.createElement("summary", { className: Accordion_module.unstyledSummary, onClick: handleOpen },
|
|
29
|
+
React__default.default.createElement("div", { className: Accordion_module.top },
|
|
30
|
+
React__default.default.createElement("div", { className: Accordion_module.left, style: leftStyle },
|
|
28
31
|
iconSlot,
|
|
29
32
|
React__default.default.createElement(Text.Text, { variant: summaryTextVariant }, label)),
|
|
30
|
-
React__default.default.createElement(
|
|
33
|
+
React__default.default.createElement("div", { className: Accordion_module.right },
|
|
31
34
|
React__default.default.createElement(framerMotion.motion.span, { animate: {
|
|
32
35
|
rotate: shouldOpen ? 0 : 180,
|
|
33
36
|
}, initial: { rotate: 180 } },
|
|
34
37
|
React__default.default.createElement(UpArrowIcon.ReactComponent, { name: shouldOpen ? 'downArrow' : 'upArrow' })))),
|
|
35
|
-
!!description && React__default.default.createElement(
|
|
36
|
-
shouldOpen && (React__default.default.createElement(
|
|
38
|
+
!!description && React__default.default.createElement(Text.Text, { variant: "hintText", className: Accordion_module.description }, description)),
|
|
39
|
+
shouldOpen && (React__default.default.createElement(framerMotion.motion.div, { className: Accordion_module.unstyledContent, ...FRAMER_MOTION_CONFIG }, children))));
|
|
37
40
|
}
|
|
38
|
-
return (React__default.default.createElement(
|
|
39
|
-
React__default.default.createElement(
|
|
40
|
-
React__default.default.createElement(
|
|
41
|
-
React__default.default.createElement(
|
|
41
|
+
return (React__default.default.createElement("details", { open: !!shouldOpenOnMount, className: buildClassnames.buildClassnames([Accordion_module.details, className]) },
|
|
42
|
+
React__default.default.createElement("summary", { className: Accordion_module.summary, onClick: handleOpen },
|
|
43
|
+
React__default.default.createElement("div", { className: Accordion_module.top },
|
|
44
|
+
React__default.default.createElement("div", { className: Accordion_module.left, style: leftStyle },
|
|
42
45
|
iconSlot,
|
|
43
46
|
React__default.default.createElement(Text.Text, { variant: summaryTextVariant }, label)),
|
|
44
|
-
React__default.default.createElement(
|
|
47
|
+
React__default.default.createElement("div", { className: Accordion_module.right },
|
|
45
48
|
React__default.default.createElement(framerMotion.motion.span, { animate: {
|
|
46
49
|
rotate: shouldOpen ? 0 : 180,
|
|
47
50
|
}, initial: { rotate: 180 } },
|
|
48
51
|
React__default.default.createElement(UpArrowIcon.ReactComponent, { name: shouldOpen ? 'downArrow' : 'upArrow' })))),
|
|
49
|
-
!!description && React__default.default.createElement(
|
|
50
|
-
shouldOpen && React__default.default.createElement(
|
|
52
|
+
!!description && React__default.default.createElement(Text.Text, { variant: "hintText", className: Accordion_module.description }, description)),
|
|
53
|
+
shouldOpen && React__default.default.createElement(framerMotion.motion.div, { className: Accordion_module.content, ...FRAMER_MOTION_CONFIG }, children)));
|
|
51
54
|
};
|
|
52
55
|
|
|
53
56
|
exports.Accordion = Accordion;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.cjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\n\nimport { motion } from 'framer-motion';\nimport {
|
|
1
|
+
{"version":3,"file":"Accordion.cjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\n\nimport { motion } from 'framer-motion';\nimport { Text } from '../Text';\nimport { colors } from '../../theme/modules/colors';\nimport { UpArrowIcon } from '../../icons';\nimport { AccordionProps } from './types';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { assignCssVars } from '../../utils/assignCssVars';\nimport styles from './Accordion.module.scss';\n\nexport const Accordion: FC<AccordionProps> = ({\n className,\n children,\n label,\n iconSlot,\n glyphColor = colors.neutral.ink.lightest,\n timeout = 350,\n description,\n shouldOpenOnMount,\n variant = 'default',\n summaryTextVariant = 'body',\n}: AccordionProps) => {\n const [shouldOpen, setShouldOpen] = useState(!!shouldOpenOnMount);\n const handleOpen = () => setShouldOpen(!shouldOpen);\n\n const FRAMER_MOTION_CONFIG = {\n initial: { opacity: 0 },\n exit: { opacity: 0 },\n animate: { opacity: 1 },\n transition: { from: 0, type: 'tween', duration: timeout / 1000 },\n };\n\n const leftStyle = assignCssVars({ glyphColor });\n\n if (variant === 'unstyled') {\n return (\n <details open={!!shouldOpenOnMount} className={buildClassnames([styles.details, className])}>\n <summary className={styles.unstyledSummary} onClick={handleOpen}>\n <div className={styles.top}>\n <div className={styles.left} style={leftStyle}>\n {iconSlot}\n <Text variant={summaryTextVariant}>{label}</Text>\n </div>\n <div className={styles.right}>\n <motion.span\n animate={{\n rotate: shouldOpen ? 0 : 180,\n }}\n initial={{ rotate: 180 }}\n >\n <UpArrowIcon name={shouldOpen ? 'downArrow' : 'upArrow'} />\n </motion.span>\n </div>\n </div>\n {!!description && <Text variant=\"hintText\" className={styles.description}>{description}</Text>}\n </summary>\n {shouldOpen && (\n <motion.div className={styles.unstyledContent} {...FRAMER_MOTION_CONFIG}>{children}</motion.div>\n )}\n </details>\n );\n }\n\n return (\n <details open={!!shouldOpenOnMount} className={buildClassnames([styles.details, className])}>\n <summary className={styles.summary} onClick={handleOpen}>\n <div className={styles.top}>\n <div className={styles.left} style={leftStyle}>\n {iconSlot}\n <Text variant={summaryTextVariant}>{label}</Text>\n </div>\n <div className={styles.right}>\n <motion.span\n animate={{\n rotate: shouldOpen ? 0 : 180,\n }}\n initial={{ rotate: 180 }}\n >\n <UpArrowIcon name={shouldOpen ? 'downArrow' : 'upArrow'} />\n </motion.span>\n </div>\n </div>\n {!!description && <Text variant=\"hintText\" className={styles.description}>{description}</Text>}\n </summary>\n {shouldOpen && <motion.div className={styles.content} {...FRAMER_MOTION_CONFIG}>{children}</motion.div>}\n </details>\n );\n};\n"],"names":["colors","useState","assignCssVars","React","buildClassnames","styles","Text","motion","UpArrowIcon"],"mappings":"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"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React__default, { useState } from 'react';
|
|
2
2
|
import { motion } from 'framer-motion';
|
|
3
|
-
import {
|
|
3
|
+
import { Text } from '../Text/Text.js';
|
|
4
4
|
import { colors } from '../../theme/modules/colors.js';
|
|
5
5
|
import { ReactComponent as UpArrowIcon } from '../../icons/design-system/components/UpArrowIcon.js';
|
|
6
|
-
import {
|
|
6
|
+
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
7
|
+
import { assignCssVars } from '../../utils/assignCssVars.js';
|
|
8
|
+
import styles from './Accordion.module.scss.js';
|
|
7
9
|
|
|
8
10
|
const Accordion = ({ className, children, label, iconSlot, glyphColor = colors.neutral.ink.lightest, timeout = 350, description, shouldOpenOnMount, variant = 'default', summaryTextVariant = 'body', }) => {
|
|
9
11
|
const [shouldOpen, setShouldOpen] = useState(!!shouldOpenOnMount);
|
|
@@ -14,34 +16,35 @@ const Accordion = ({ className, children, label, iconSlot, glyphColor = colors.n
|
|
|
14
16
|
animate: { opacity: 1 },
|
|
15
17
|
transition: { from: 0, type: 'tween', duration: timeout / 1000 },
|
|
16
18
|
};
|
|
19
|
+
const leftStyle = assignCssVars({ glyphColor });
|
|
17
20
|
if (variant === 'unstyled') {
|
|
18
|
-
return (React__default.createElement(
|
|
19
|
-
React__default.createElement(
|
|
20
|
-
React__default.createElement(
|
|
21
|
-
React__default.createElement(
|
|
21
|
+
return (React__default.createElement("details", { open: !!shouldOpenOnMount, className: buildClassnames([styles.details, className]) },
|
|
22
|
+
React__default.createElement("summary", { className: styles.unstyledSummary, onClick: handleOpen },
|
|
23
|
+
React__default.createElement("div", { className: styles.top },
|
|
24
|
+
React__default.createElement("div", { className: styles.left, style: leftStyle },
|
|
22
25
|
iconSlot,
|
|
23
26
|
React__default.createElement(Text, { variant: summaryTextVariant }, label)),
|
|
24
|
-
React__default.createElement(
|
|
27
|
+
React__default.createElement("div", { className: styles.right },
|
|
25
28
|
React__default.createElement(motion.span, { animate: {
|
|
26
29
|
rotate: shouldOpen ? 0 : 180,
|
|
27
30
|
}, initial: { rotate: 180 } },
|
|
28
31
|
React__default.createElement(UpArrowIcon, { name: shouldOpen ? 'downArrow' : 'upArrow' })))),
|
|
29
|
-
!!description && React__default.createElement(
|
|
30
|
-
shouldOpen && (React__default.createElement(
|
|
32
|
+
!!description && React__default.createElement(Text, { variant: "hintText", className: styles.description }, description)),
|
|
33
|
+
shouldOpen && (React__default.createElement(motion.div, { className: styles.unstyledContent, ...FRAMER_MOTION_CONFIG }, children))));
|
|
31
34
|
}
|
|
32
|
-
return (React__default.createElement(
|
|
33
|
-
React__default.createElement(
|
|
34
|
-
React__default.createElement(
|
|
35
|
-
React__default.createElement(
|
|
35
|
+
return (React__default.createElement("details", { open: !!shouldOpenOnMount, className: buildClassnames([styles.details, className]) },
|
|
36
|
+
React__default.createElement("summary", { className: styles.summary, onClick: handleOpen },
|
|
37
|
+
React__default.createElement("div", { className: styles.top },
|
|
38
|
+
React__default.createElement("div", { className: styles.left, style: leftStyle },
|
|
36
39
|
iconSlot,
|
|
37
40
|
React__default.createElement(Text, { variant: summaryTextVariant }, label)),
|
|
38
|
-
React__default.createElement(
|
|
41
|
+
React__default.createElement("div", { className: styles.right },
|
|
39
42
|
React__default.createElement(motion.span, { animate: {
|
|
40
43
|
rotate: shouldOpen ? 0 : 180,
|
|
41
44
|
}, initial: { rotate: 180 } },
|
|
42
45
|
React__default.createElement(UpArrowIcon, { name: shouldOpen ? 'downArrow' : 'upArrow' })))),
|
|
43
|
-
!!description && React__default.createElement(
|
|
44
|
-
shouldOpen && React__default.createElement(
|
|
46
|
+
!!description && React__default.createElement(Text, { variant: "hintText", className: styles.description }, description)),
|
|
47
|
+
shouldOpen && React__default.createElement(motion.div, { className: styles.content, ...FRAMER_MOTION_CONFIG }, children)));
|
|
45
48
|
};
|
|
46
49
|
|
|
47
50
|
export { Accordion };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\n\nimport { motion } from 'framer-motion';\nimport {
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\n\nimport { motion } from 'framer-motion';\nimport { Text } from '../Text';\nimport { colors } from '../../theme/modules/colors';\nimport { UpArrowIcon } from '../../icons';\nimport { AccordionProps } from './types';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { assignCssVars } from '../../utils/assignCssVars';\nimport styles from './Accordion.module.scss';\n\nexport const Accordion: FC<AccordionProps> = ({\n className,\n children,\n label,\n iconSlot,\n glyphColor = colors.neutral.ink.lightest,\n timeout = 350,\n description,\n shouldOpenOnMount,\n variant = 'default',\n summaryTextVariant = 'body',\n}: AccordionProps) => {\n const [shouldOpen, setShouldOpen] = useState(!!shouldOpenOnMount);\n const handleOpen = () => setShouldOpen(!shouldOpen);\n\n const FRAMER_MOTION_CONFIG = {\n initial: { opacity: 0 },\n exit: { opacity: 0 },\n animate: { opacity: 1 },\n transition: { from: 0, type: 'tween', duration: timeout / 1000 },\n };\n\n const leftStyle = assignCssVars({ glyphColor });\n\n if (variant === 'unstyled') {\n return (\n <details open={!!shouldOpenOnMount} className={buildClassnames([styles.details, className])}>\n <summary className={styles.unstyledSummary} onClick={handleOpen}>\n <div className={styles.top}>\n <div className={styles.left} style={leftStyle}>\n {iconSlot}\n <Text variant={summaryTextVariant}>{label}</Text>\n </div>\n <div className={styles.right}>\n <motion.span\n animate={{\n rotate: shouldOpen ? 0 : 180,\n }}\n initial={{ rotate: 180 }}\n >\n <UpArrowIcon name={shouldOpen ? 'downArrow' : 'upArrow'} />\n </motion.span>\n </div>\n </div>\n {!!description && <Text variant=\"hintText\" className={styles.description}>{description}</Text>}\n </summary>\n {shouldOpen && (\n <motion.div className={styles.unstyledContent} {...FRAMER_MOTION_CONFIG}>{children}</motion.div>\n )}\n </details>\n );\n }\n\n return (\n <details open={!!shouldOpenOnMount} className={buildClassnames([styles.details, className])}>\n <summary className={styles.summary} onClick={handleOpen}>\n <div className={styles.top}>\n <div className={styles.left} style={leftStyle}>\n {iconSlot}\n <Text variant={summaryTextVariant}>{label}</Text>\n </div>\n <div className={styles.right}>\n <motion.span\n animate={{\n rotate: shouldOpen ? 0 : 180,\n }}\n initial={{ rotate: 180 }}\n >\n <UpArrowIcon name={shouldOpen ? 'downArrow' : 'upArrow'} />\n </motion.span>\n </div>\n </div>\n {!!description && <Text variant=\"hintText\" className={styles.description}>{description}</Text>}\n </summary>\n {shouldOpen && <motion.div className={styles.content} {...FRAMER_MOTION_CONFIG}>{children}</motion.div>}\n </details>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._details_1d76z_1 summary {\n list-style-type: none;\n}\n._details_1d76z_1 summary::-webkit-details-marker {\n display: none;\n}\n\n/* Default styled summary */\n._summary_1d76z_9 {\n display: flex;\n flex-direction: column;\n padding: var(--sizes-3);\n border-radius: var(--radius-base);\n user-select: none;\n cursor: pointer;\n border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n}\n._summary_1d76z_9:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n._summary_1d76z_9:active {\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n\n/* Unstyled summary: minimal, only focus ring */\n._unstyledSummary_1d76z_27:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n\n/* Top row: icon + label + arrow */\n._top_1d76z_33 {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: var(--sizes-base);\n}\n\n/* Left section: icon + text */\n._left_1d76z_41 {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n._left_1d76z_41 svg {\n margin-right: var(--sizes-3);\n height: var(--sizes-base);\n width: var(--sizes-base);\n color: var(--glyph-color);\n}\n\n/* Right section: arrow */\n._right_1d76z_54 {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n flex-grow: 2;\n}\n\n/* Description text below summary */\n._description_1d76z_63 {\n margin-top: var(--sizes-sm);\n}\n\n/* Default content area */\n._content_1d76z_68 {\n margin-top: var(--sizes-xs);\n /* Intentionally hardcoded: 50% transparent tint of blue.lightest with no theme token equivalent */\n background: rgba(217, 235, 248, 0.5);\n padding: 10px 26px;\n}\n\n/* Unstyled content: no additional styles, motion wrapper only */\n._unstyledContent_1d76z_76 {\n /* Motion wrapper for unstyled variant */\n}");
|
|
6
|
+
var styles = {"details":"_details_1d76z_1","summary":"_summary_1d76z_9","unstyledSummary":"_unstyledSummary_1d76z_27","top":"_top_1d76z_33","left":"_left_1d76z_41","right":"_right_1d76z_54","description":"_description_1d76z_63","content":"_content_1d76z_68","unstyledContent":"_unstyledContent_1d76z_76"};
|
|
7
|
+
|
|
8
|
+
module.exports = styles;
|
|
9
|
+
//# sourceMappingURL=Accordion.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.module.scss.cjs","sources":["../../../src/components/Accordion/Accordion.module.scss"],"sourcesContent":[".details summary {\n list-style-type: none;\n\n &::-webkit-details-marker {\n display: none;\n }\n}\n\n/* Default styled summary */\n.summary {\n display: flex;\n flex-direction: column;\n padding: var(--sizes-3);\n border-radius: var(--radius-base);\n user-select: none;\n cursor: pointer;\n\n border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n\n &:active {\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* Unstyled summary: minimal, only focus ring */\n.unstyledSummary {\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* Top row: icon + label + arrow */\n.top {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: var(--sizes-base);\n}\n\n/* Left section: icon + text */\n.left {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: var(--sizes-3);\n height: var(--sizes-base);\n width: var(--sizes-base);\n color: var(--glyph-color);\n }\n}\n\n/* Right section: arrow */\n.right {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n flex-grow: 2;\n}\n\n/* Description text below summary */\n.description {\n margin-top: var(--sizes-sm);\n}\n\n/* Default content area */\n.content {\n margin-top: var(--sizes-xs);\n /* Intentionally hardcoded: 50% transparent tint of blue.lightest with no theme token equivalent */\n background: rgba(217, 235, 248, 0.5);\n padding: 10px 26px;\n}\n\n/* Unstyled content: no additional styles, motion wrapper only */\n.unstyledContent {\n /* Motion wrapper for unstyled variant */\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,m1DAAA;;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._details_1d76z_1 summary {\n list-style-type: none;\n}\n._details_1d76z_1 summary::-webkit-details-marker {\n display: none;\n}\n\n/* Default styled summary */\n._summary_1d76z_9 {\n display: flex;\n flex-direction: column;\n padding: var(--sizes-3);\n border-radius: var(--radius-base);\n user-select: none;\n cursor: pointer;\n border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n}\n._summary_1d76z_9:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n._summary_1d76z_9:active {\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n\n/* Unstyled summary: minimal, only focus ring */\n._unstyledSummary_1d76z_27:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n\n/* Top row: icon + label + arrow */\n._top_1d76z_33 {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: var(--sizes-base);\n}\n\n/* Left section: icon + text */\n._left_1d76z_41 {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n._left_1d76z_41 svg {\n margin-right: var(--sizes-3);\n height: var(--sizes-base);\n width: var(--sizes-base);\n color: var(--glyph-color);\n}\n\n/* Right section: arrow */\n._right_1d76z_54 {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n flex-grow: 2;\n}\n\n/* Description text below summary */\n._description_1d76z_63 {\n margin-top: var(--sizes-sm);\n}\n\n/* Default content area */\n._content_1d76z_68 {\n margin-top: var(--sizes-xs);\n /* Intentionally hardcoded: 50% transparent tint of blue.lightest with no theme token equivalent */\n background: rgba(217, 235, 248, 0.5);\n padding: 10px 26px;\n}\n\n/* Unstyled content: no additional styles, motion wrapper only */\n._unstyledContent_1d76z_76 {\n /* Motion wrapper for unstyled variant */\n}");
|
|
4
|
+
var styles = {"details":"_details_1d76z_1","summary":"_summary_1d76z_9","unstyledSummary":"_unstyledSummary_1d76z_27","top":"_top_1d76z_33","left":"_left_1d76z_41","right":"_right_1d76z_54","description":"_description_1d76z_63","content":"_content_1d76z_68","unstyledContent":"_unstyledContent_1d76z_76"};
|
|
5
|
+
|
|
6
|
+
export { styles as default };
|
|
7
|
+
//# sourceMappingURL=Accordion.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.module.scss.js","sources":["../../../src/components/Accordion/Accordion.module.scss"],"sourcesContent":[".details summary {\n list-style-type: none;\n\n &::-webkit-details-marker {\n display: none;\n }\n}\n\n/* Default styled summary */\n.summary {\n display: flex;\n flex-direction: column;\n padding: var(--sizes-3);\n border-radius: var(--radius-base);\n user-select: none;\n cursor: pointer;\n\n border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n\n &:active {\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* Unstyled summary: minimal, only focus ring */\n.unstyledSummary {\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* Top row: icon + label + arrow */\n.top {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: var(--sizes-base);\n}\n\n/* Left section: icon + text */\n.left {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: var(--sizes-3);\n height: var(--sizes-base);\n width: var(--sizes-base);\n color: var(--glyph-color);\n }\n}\n\n/* Right section: arrow */\n.right {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n flex-grow: 2;\n}\n\n/* Description text below summary */\n.description {\n margin-top: var(--sizes-sm);\n}\n\n/* Default content area */\n.content {\n margin-top: var(--sizes-xs);\n /* Intentionally hardcoded: 50% transparent tint of blue.lightest with no theme token equivalent */\n background: rgba(217, 235, 248, 0.5);\n padding: 10px 26px;\n}\n\n/* Unstyled content: no additional styles, motion wrapper only */\n.unstyledContent {\n /* Motion wrapper for unstyled variant */\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,m1DAAA;;;;;"}
|
|
@@ -14,7 +14,7 @@ export declare const ActionBase: React.ForwardRefExoticComponent<(Omit<{
|
|
|
14
14
|
size?: import("./types").ActionSize | undefined;
|
|
15
15
|
type?: "button" | "submit" | "reset" | undefined;
|
|
16
16
|
variant?: import("./types").ActionVariant | undefined;
|
|
17
|
-
} & Omit<Omit<any, "ref">, "href" | "rel" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "
|
|
17
|
+
} & Omit<Omit<any, "ref">, "href" | "rel" | "placeholder" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
|
|
18
18
|
appearance?: import("./types").ActionAppearance | undefined;
|
|
19
19
|
as?: C | undefined;
|
|
20
20
|
children?: React.ReactNode;
|
|
@@ -42,7 +42,7 @@ export declare const ActionBase: React.ForwardRefExoticComponent<(Omit<{
|
|
|
42
42
|
size?: import("./types").ActionSize | undefined;
|
|
43
43
|
type?: "button" | "submit" | "reset" | undefined;
|
|
44
44
|
variant?: import("./types").ActionVariant | undefined;
|
|
45
|
-
} & Omit<Omit<any, "ref">, "href" | "rel" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "
|
|
45
|
+
} & Omit<Omit<any, "ref">, "href" | "rel" | "placeholder" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
|
|
46
46
|
appearance?: import("./types").ActionAppearance | undefined;
|
|
47
47
|
as?: C | undefined;
|
|
48
48
|
children?: React.ReactNode;
|
|
@@ -69,7 +69,7 @@ export declare const Action: React.ForwardRefExoticComponent<(Omit<Omit<Omit<{
|
|
|
69
69
|
size?: import("./types").ActionSize | undefined;
|
|
70
70
|
type?: "button" | "submit" | "reset" | undefined;
|
|
71
71
|
variant?: import("./types").ActionVariant | undefined;
|
|
72
|
-
} & Omit<Omit<any, "ref">, "href" | "rel" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "
|
|
72
|
+
} & Omit<Omit<any, "ref">, "href" | "rel" | "placeholder" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
|
|
73
73
|
appearance?: import("./types").ActionAppearance | undefined;
|
|
74
74
|
as?: C | undefined;
|
|
75
75
|
children?: React.ReactNode;
|
|
@@ -97,7 +97,7 @@ export declare const Action: React.ForwardRefExoticComponent<(Omit<Omit<Omit<{
|
|
|
97
97
|
size?: import("./types").ActionSize | undefined;
|
|
98
98
|
type?: "button" | "submit" | "reset" | undefined;
|
|
99
99
|
variant?: import("./types").ActionVariant | undefined;
|
|
100
|
-
} & Omit<Omit<any, "ref">, "href" | "rel" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "
|
|
100
|
+
} & Omit<Omit<any, "ref">, "href" | "rel" | "placeholder" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
|
|
101
101
|
appearance?: import("./types").ActionAppearance | undefined;
|
|
102
102
|
as?: C | undefined;
|
|
103
103
|
children?: React.ReactNode;
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle("._heading-xxl_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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_1dm92_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._button_1dm92_166 {\n --outline-width: var(--sizes-xs);\n --accent-color: var(--colors-neutral-ink-base);\n --accent-color-dark: var(--colors-secondary-blue-base);\n --highlight-color: var(--colors-secondary-blue-light);\n --button-height: var(--sizes-10);\n --button-inline-padding: var(--sizes-base);\n --button-radius: var(--sizes-xs);\n --button-gap: var(--sizes-sm);\n --button-icon-size: var(--sizes-base);\n --button-icon-inline-padding: var(--sizes-base);\n --button-icon-only-width: var(--sizes-10);\n --loader-size: var(--sizes-base);\n /* Structural styles */\n position: relative;\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--button-gap);\n flex-shrink: 0;\n border: var(--sizes-line) solid;\n white-space: nowrap;\n height: var(--button-height);\n padding-inline: var(--button-inline-padding);\n border-radius: var(--button-radius);\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 /* Default button */\n border-color: var(--colors-neutral-grey-dark);\n background-color: white;\n box-shadow: var(--shadows-sm);\n color: var(--accent-color);\n /* Icon Slot */\n /* External Icon */\n}\n._button_1dm92_166 svg:first-child {\n width: var(--button-icon-size);\n height: var(--button-icon-size);\n}\n._button_1dm92_166 svg:last-child:not(:first-child) {\n width: var(--sizes-4);\n height: var(--sizes-4);\n}\n._button_1dm92_166:hover {\n background-color: var(--colors-neutral-grey-lightest);\n cursor: pointer;\n}\n._button_1dm92_166:focus-visible {\n outline: var(--outline-width) solid var(--highlight-color);\n}\n._button_1dm92_166:active {\n background-color: var(--colors-neutral-grey-lightest);\n border-color: var(--accent-color-dark);\n outline: var(--outline-width) solid var(--highlight-color);\n}\n._button_1dm92_166._icon_1dm92_405 {\n padding-left: var(--button-icon-inline-padding);\n}\n._button_1dm92_166._dropdown_1dm92_408 {\n padding-right: var(--button-icon-inline-padding);\n}\n._button_1dm92_166._iconOnly_1dm92_411 {\n --button-icon-size: var(--sizes-5);\n --accent-color: var(--colors-secondary-blue-base);\n --loader-size: var(--sizes-5);\n height: var(--button-icon-only-width);\n width: var(--button-icon-only-width);\n padding-inline: var(--sizes-2);\n}\n._button_1dm92_166._sm_1dm92_419 {\n --outline-width: var(--sizes-xs);\n --button-height: var(--sizes-lg);\n --button-inline-padding: var(--sizes-3);\n --button-radius: var(--sizes-xs);\n --button-icon-size: var(--sizes-base);\n --button-icon-inline-padding: var(--sizes-sm);\n --button-icon-only-width: var(--sizes-8);\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 color: var(--accent-color);\n}\n._button_1dm92_166._xs_1dm92_437 {\n --outline-width: var(--sizes-xs);\n --button-height: var(--sizes-md);\n --button-inline-padding: var(--sizes-3);\n --button-radius: var(--sizes-xs);\n --button-gap: var(--sizes-xs);\n --button-icon-size: var(--sizes-3);\n --button-icon-inline-padding: var(--sizes-sm);\n --button-icon-only-width: var(--sizes-md);\n --loader-size: var(--sizes-3);\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 color: var(--accent-color);\n}\n._button_1dm92_166._xs_1dm92_437._iconOnly_1dm92_411 svg, ._button_1dm92_166._xs_1dm92_437._dropdown_1dm92_408 svg:last-child {\n width: var(--button-icon-size);\n height: var(--button-icon-size);\n}\n._button_1dm92_166._primary_1dm92_461 {\n --accent-color: var(--theme-primary, var(--colors-secondary-blue-base));\n --accent-color-dark: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n --highlight-color: var(--colors-secondary-blue-light);\n background-color: var(--accent-color);\n color: var(--theme-on-primary, white);\n border-color: var(--accent-color);\n}\n._button_1dm92_166._primary_1dm92_461:hover {\n --accent-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n}\n._button_1dm92_166._primary_1dm92_461:active {\n --accent-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n}\n._button_1dm92_166._destructive_1dm92_475 {\n --accent-color: var(--colors-secondary-red-base);\n --accent-color-dark: var(--colors-secondary-red-base);\n --highlight-color: var(--colors-secondary-red-light);\n}\n._button_1dm92_166._destructive_1dm92_475:hover {\n --accent-color: var(--colors-secondary-red-dark);\n}\n._button_1dm92_166._flat_1dm92_483 {\n border-color: transparent;\n box-shadow: none;\n color: var(--colors-neutral-ink-base);\n background-color: unset;\n}\n._button_1dm92_166._flat_1dm92_483:hover {\n background-color: var(--colors-neutral-grey-lightest);\n}\n._button_1dm92_166._flat_1dm92_483:active {\n background-color: var(--colors-neutral-grey-lightest);\n outline: var(--outline-width) solid var(--colors-secondary-blue-light);\n}\n._button_1dm92_166._flat_1dm92_483:focus-visible {\n outline: var(--outline-width) solid var(--colors-secondary-blue-light);\n}\n._button_1dm92_166._flat_1dm92_483._disabled_1dm92_499 {\n background-color: transparent;\n border-color: transparent;\n}\n._button_1dm92_166 ._hideContent_1dm92_503 {\n opacity: 0;\n}\n._button_1dm92_166 ._loadingWrapper_1dm92_506 {\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._button_1dm92_166 ._loadingWrapper_1dm92_506 > ._loader_1dm92_517 {\n aspect-ratio: 1;\n width: var(--loader-size);\n height: var(--loader-size);\n}\n\n._button_1dm92_166:disabled {\n cursor: not-allowed;\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n border: none;\n}");
|
|
6
|
-
var buttonStyles = {"heading-xxl":"_heading-
|
|
5
|
+
___$insertStyle("._heading-xxl_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_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_1wldv_342._base_1wldv_342 {\n --outline-width: var(--sizes-xs);\n --accent-color: var(--colors-neutral-ink-base);\n --accent-color-dark: var(--colors-secondary-blue-base);\n --highlight-color: var(--colors-secondary-blue-light);\n --button-height: var(--sizes-10);\n --button-inline-padding: var(--sizes-base);\n --button-radius: var(--sizes-xs);\n --button-gap: var(--sizes-sm);\n --button-icon-size: var(--sizes-base);\n --button-icon-inline-padding: var(--sizes-base);\n --button-icon-only-width: var(--sizes-10);\n --loader-size: var(--sizes-base);\n /* Structural styles */\n position: relative;\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--button-gap);\n flex-shrink: 0;\n border: var(--sizes-line) solid;\n white-space: nowrap;\n height: var(--button-height);\n padding-inline: var(--button-inline-padding);\n border-radius: var(--button-radius);\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 /* Default button */\n border-color: var(--colors-neutral-grey-dark);\n background-color: white;\n box-shadow: var(--shadows-sm);\n color: var(--accent-color);\n /* Icon Slot */\n /* External Icon */\n}\n._base_1wldv_342._base_1wldv_342 svg:first-child {\n width: var(--button-icon-size);\n height: var(--button-icon-size);\n}\n._base_1wldv_342._base_1wldv_342 svg:last-child:not(:first-child) {\n width: var(--sizes-4);\n height: var(--sizes-4);\n}\n._base_1wldv_342._base_1wldv_342:hover {\n background-color: var(--colors-neutral-grey-lightest);\n cursor: pointer;\n}\n._base_1wldv_342._base_1wldv_342:focus-visible {\n outline: var(--outline-width) solid var(--highlight-color);\n}\n._base_1wldv_342._base_1wldv_342:active {\n background-color: var(--colors-neutral-grey-lightest);\n border-color: var(--accent-color-dark);\n outline: var(--outline-width) solid var(--highlight-color);\n}\n._base_1wldv_342._base_1wldv_342._icon_1wldv_405 {\n padding-left: var(--button-icon-inline-padding);\n}\n._base_1wldv_342._base_1wldv_342._dropdown_1wldv_408 {\n padding-right: var(--button-icon-inline-padding);\n}\n._base_1wldv_342._base_1wldv_342._iconOnly_1wldv_411 {\n --button-icon-size: var(--sizes-5);\n --loader-size: var(--sizes-5);\n height: var(--button-icon-only-width);\n width: var(--button-icon-only-width);\n padding-inline: var(--sizes-2);\n}\n._base_1wldv_342._base_1wldv_342._sm-size_1wldv_418 {\n --outline-width: var(--sizes-xs);\n --button-height: var(--sizes-lg);\n --button-inline-padding: var(--sizes-3);\n --button-radius: var(--sizes-xs);\n --button-icon-size: var(--sizes-base);\n --button-icon-inline-padding: var(--sizes-sm);\n --button-icon-only-width: var(--sizes-8);\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 color: var(--accent-color);\n}\n._base_1wldv_342._base_1wldv_342._xs-size_1wldv_436 {\n --outline-width: var(--sizes-xs);\n --button-height: var(--sizes-md);\n --button-inline-padding: var(--sizes-3);\n --button-radius: var(--sizes-xs);\n --button-gap: var(--sizes-xs);\n --button-icon-size: var(--sizes-3);\n --button-icon-inline-padding: var(--sizes-sm);\n --button-icon-only-width: var(--sizes-md);\n --loader-size: var(--sizes-3);\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 color: var(--accent-color);\n}\n._base_1wldv_342._base_1wldv_342._xs-size_1wldv_436._iconOnly_1wldv_411 svg, ._base_1wldv_342._base_1wldv_342._xs-size_1wldv_436._dropdown_1wldv_408 svg:last-child {\n width: var(--button-icon-size);\n height: var(--button-icon-size);\n}\n._base_1wldv_342._base_1wldv_342._primary-variant_1wldv_460 {\n --accent-color: var(--theme-primary, var(--colors-secondary-blue-base));\n --accent-color-dark: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n --highlight-color: var(--colors-secondary-blue-light);\n background-color: var(--accent-color);\n color: var(--theme-on-primary, white);\n border-color: var(--accent-color);\n}\n._base_1wldv_342._base_1wldv_342._primary-variant_1wldv_460:hover {\n --accent-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n}\n._base_1wldv_342._base_1wldv_342._primary-variant_1wldv_460:active {\n --accent-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n}\n._base_1wldv_342._base_1wldv_342._destructive-variant_1wldv_474 {\n --accent-color: var(--colors-secondary-red-base);\n --accent-color-dark: var(--colors-secondary-red-base);\n --highlight-color: var(--colors-secondary-red-light);\n}\n._base_1wldv_342._base_1wldv_342._destructive-variant_1wldv_474:hover {\n --accent-color: var(--colors-secondary-red-dark);\n}\n._base_1wldv_342._base_1wldv_342._flat-variant_1wldv_482 {\n border-color: transparent;\n box-shadow: none;\n color: var(--colors-neutral-ink-base);\n background-color: unset;\n}\n._base_1wldv_342._base_1wldv_342._flat-variant_1wldv_482:hover {\n background-color: var(--colors-neutral-grey-lightest);\n}\n._base_1wldv_342._base_1wldv_342._flat-variant_1wldv_482:active {\n background-color: var(--colors-neutral-grey-lightest);\n outline: var(--outline-width) solid var(--colors-secondary-blue-light);\n}\n._base_1wldv_342._base_1wldv_342._flat-variant_1wldv_482:focus-visible {\n outline: var(--outline-width) solid var(--colors-secondary-blue-light);\n}\n._base_1wldv_342._base_1wldv_342._flat-variant_1wldv_482._disabled_1wldv_498 {\n background-color: transparent;\n border-color: transparent;\n}\n._base_1wldv_342._base_1wldv_342._disabled_1wldv_498 {\n cursor: not-allowed;\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n border: none;\n}\n\n._content_1wldv_510._content_1wldv_510 {\n display: inline-flex;\n align-items: center;\n gap: var(--button-gap, var(--sizes-sm));\n flex-wrap: nowrap;\n}\n\n._hideContent_1wldv_517._hideContent_1wldv_517 {\n visibility: hidden;\n}\n\n._loadingWrapper_1wldv_521._loadingWrapper_1wldv_521 {\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}\n\n._loader_1wldv_532._loader_1wldv_532 {\n aspect-ratio: 1;\n width: var(--loader-size);\n height: var(--loader-size);\n}");
|
|
6
|
+
var buttonStyles = {"heading-xxl":"_heading-xxl_1wldv_1","heading-xl":"_heading-xl_1wldv_12","heading-large":"_heading-large_1wldv_23","heading-medium":"_heading-medium_1wldv_34","heading-small":"_heading-small_1wldv_45","heading-table":"_heading-table_1wldv_56","subheading-large":"_subheading-large_1wldv_67","subheading-medium":"_subheading-medium_1wldv_78","subheading-small":"_subheading-small_1wldv_89","subheading-small-bold":"_subheading-small-bold_1wldv_100","body":"_body_1wldv_111","body-small":"_body-small_1wldv_122","body-bold":"_body-bold_1wldv_133","body-bold-dark":"_body-bold-dark_1wldv_144","body-small-bold":"_body-small-bold_1wldv_155","button":"_button_1wldv_166","button-small":"_button-small_1wldv_177","link-large":"_link-large_1wldv_188","link-medium":"_link-medium_1wldv_199","link":"_link_1wldv_188","link-small":"_link-small_1wldv_221","input-label":"_input-label_1wldv_232","input-label-small":"_input-label-small_1wldv_243","hint-text":"_hint-text_1wldv_254","placeholder":"_placeholder_1wldv_265","placeholder-small":"_placeholder-small_1wldv_276","placeholder-code":"_placeholder-code_1wldv_287","placeholder-code-small":"_placeholder-code-small_1wldv_298","error":"_error_1wldv_309","error-small":"_error-small_1wldv_320","success-small":"_success-small_1wldv_331","base":"_base_1wldv_342","icon":"_icon_1wldv_405","dropdown":"_dropdown_1wldv_408","iconOnly":"_iconOnly_1wldv_411","sm-size":"_sm-size_1wldv_418","xs-size":"_xs-size_1wldv_436","primary-variant":"_primary-variant_1wldv_460","destructive-variant":"_destructive-variant_1wldv_474","flat-variant":"_flat-variant_1wldv_482","disabled":"_disabled_1wldv_498","content":"_content_1wldv_510","hideContent":"_hideContent_1wldv_517","loadingWrapper":"_loadingWrapper_1wldv_521","loader":"_loader_1wldv_532"};
|
|
7
7
|
|
|
8
8
|
module.exports = buttonStyles;
|
|
9
9
|
//# sourceMappingURL=button.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.module.scss.cjs","sources":["../../../../src/components/Action/styles/button.module.scss"],"sourcesContent":["@use '../../../theme/scss/text.module.scss' as text;\n\n.
|
|
1
|
+
{"version":3,"file":"button.module.scss.cjs","sources":["../../../../src/components/Action/styles/button.module.scss"],"sourcesContent":["@use '../../../theme/scss/text.module.scss' as text;\n\n.base.base {\n --outline-width: var(--sizes-xs);\n --accent-color: var(--colors-neutral-ink-base);\n --accent-color-dark: var(--colors-secondary-blue-base);\n --highlight-color: var(--colors-secondary-blue-light);\n --button-height: var(--sizes-10);\n --button-inline-padding: var(--sizes-base);\n --button-radius: var(--sizes-xs);\n --button-gap: var(--sizes-sm);\n --button-icon-size: var(--sizes-base);\n --button-icon-inline-padding: var(--sizes-base);\n --button-icon-only-width: var(--sizes-10);\n --loader-size: var(--sizes-base);\n\n /* Structural styles */\n position: relative;\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--button-gap);\n flex-shrink: 0;\n border: var(--sizes-line) solid;\n white-space: nowrap;\n\n height: var(--button-height);\n padding-inline: var(--button-inline-padding);\n border-radius: var(--button-radius);\n\n @include text.button;\n /* Default button */\n\n border-color: var(--colors-neutral-grey-dark);\n background-color: white;\n box-shadow: var(--shadows-sm);\n color: var(--accent-color);\n\n /* Icon Slot */\n svg:first-child {\n width: var(--button-icon-size);\n height: var(--button-icon-size);\n }\n\n /* External Icon */\n svg:last-child:not(:first-child) {\n width: var(--sizes-4);\n height: var(--sizes-4);\n }\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n cursor: pointer;\n }\n\n &:focus-visible {\n outline: var(--outline-width) solid var(--highlight-color);\n }\n\n &:active {\n background-color: var(--colors-neutral-grey-lightest);\n border-color: var(--accent-color-dark);\n outline: var(--outline-width) solid var(--highlight-color);\n }\n\n &.icon {\n padding-left: var(--button-icon-inline-padding);\n }\n\n &.dropdown {\n padding-right: var(--button-icon-inline-padding);\n }\n\n &.iconOnly {\n --button-icon-size: var(--sizes-5);\n --loader-size: var(--sizes-5);\n\n height: var(--button-icon-only-width);\n width: var(--button-icon-only-width);\n padding-inline: var(--sizes-2);\n }\n\n &.sm-size {\n --outline-width: var(--sizes-xs);\n --button-height: var(--sizes-lg);\n --button-inline-padding: var(--sizes-3);\n --button-radius: var(--sizes-xs);\n --button-icon-size: var(--sizes-base);\n --button-icon-inline-padding: var(--sizes-sm);\n --button-icon-only-width: var(--sizes-8);\n\n @include text.button-small;\n\n color: var(--accent-color);\n }\n\n &.xs-size {\n --outline-width: var(--sizes-xs);\n --button-height: var(--sizes-md);\n --button-inline-padding: var(--sizes-3);\n --button-radius: var(--sizes-xs);\n --button-gap: var(--sizes-xs);\n --button-icon-size: var(--sizes-3);\n --button-icon-inline-padding: var(--sizes-sm);\n --button-icon-only-width: var(--sizes-md);\n --loader-size: var(--sizes-3);\n\n @include text.button-small;\n\n color: var(--accent-color);\n\n &.iconOnly svg,\n &.dropdown svg:last-child {\n width: var(--button-icon-size);\n height: var(--button-icon-size);\n }\n }\n\n &.primary-variant {\n --accent-color: var(--theme-primary, var(--colors-secondary-blue-base));\n --accent-color-dark: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n --highlight-color: var(--colors-secondary-blue-light);\n\n background-color: var(--accent-color);\n color: var(--theme-on-primary, white);\n border-color: var(--accent-color);\n\n &:hover {\n --accent-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n }\n\n &:active {\n --accent-color: var(--theme-primary-hover, var(--colors-secondary-blue-dark));\n }\n }\n\n &.destructive-variant {\n --accent-color: var(--colors-secondary-red-base);\n --accent-color-dark: var(--colors-secondary-red-base);\n --highlight-color: var(--colors-secondary-red-light);\n\n &:hover {\n --accent-color: var(--colors-secondary-red-dark);\n }\n }\n\n &.flat-variant {\n border-color: transparent;\n box-shadow: none;\n color: var(--colors-neutral-ink-base);\n background-color: unset;\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n }\n\n &:active {\n background-color: var(--colors-neutral-grey-lightest);\n outline: var(--outline-width) solid var(--colors-secondary-blue-light);\n }\n\n &:focus-visible {\n outline: var(--outline-width) solid var(--colors-secondary-blue-light);\n }\n\n &.disabled {\n background-color: transparent;\n border-color: transparent;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n border: none;\n }\n\n}\n\n.content.content {\n display: inline-flex;\n align-items: center;\n gap: var(--button-gap, var(--sizes-sm));\n flex-wrap: nowrap;\n}\n\n.hideContent.hideContent {\n visibility: hidden;\n}\n\n.loadingWrapper.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}\n\n// Inherits --loader-size from parent .base element via CSS custom property cascade\n.loader.loader {\n aspect-ratio: 1;\n width: var(--loader-size);\n height: var(--loader-size);\n}\n"],"names":[],"mappings":";;;;AAGE,eAAA,CAAA,8sqBAAA;AACA,mBAAA,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,MAAA,CAAA,iBAAA,CAAA,UAAA,CAAA,qBAAA,CAAA,UAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,4BAAA,CAAA,qBAAA,CAAA,gCAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,UAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,QAAA,CAAA,mBAAA;;;;"}
|