@veeqo/ui 15.15.0 → 15.15.2
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/Choice/Choice.cjs +2 -2
- package/dist/components/Choice/Choice.cjs.map +1 -1
- package/dist/components/Choice/Choice.js +2 -2
- package/dist/components/Choice/Choice.js.map +1 -1
- package/dist/components/Choice/Choice.module.scss.cjs +2 -2
- package/dist/components/Choice/Choice.module.scss.cjs.map +1 -1
- package/dist/components/Choice/Choice.module.scss.js +2 -2
- package/dist/components/Choice/Choice.module.scss.js.map +1 -1
- package/dist/components/DataTable/components/DataTable.module.scss.cjs +2 -2
- package/dist/components/DataTable/components/DataTable.module.scss.cjs.map +1 -1
- package/dist/components/DataTable/components/DataTable.module.scss.js +2 -2
- package/dist/components/DataTable/components/DataTable.module.scss.js.map +1 -1
- package/dist/components/Toggle/Toggle.cjs +1 -1
- package/dist/components/Toggle/Toggle.cjs.map +1 -1
- package/dist/components/Toggle/Toggle.js +1 -1
- package/dist/components/Toggle/Toggle.js.map +1 -1
- package/dist/components/Toggle/Toggle.module.scss.cjs +2 -2
- package/dist/components/Toggle/Toggle.module.scss.cjs.map +1 -1
- package/dist/components/Toggle/Toggle.module.scss.js +2 -2
- package/dist/components/Toggle/Toggle.module.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -41,8 +41,8 @@ const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, erro
|
|
|
41
41
|
React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
|
|
42
42
|
Badge,
|
|
43
43
|
label && (React__default.default.createElement(Text.Text, { variant: labelVariant, className: classNames.label }, label)),
|
|
44
|
-
(tooltip || tooltipContent) && (React__default.default.createElement(Tooltip.Tooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
|
|
45
|
-
React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", name: "help", width: index.theme.sizes.base
|
|
44
|
+
(tooltip || tooltipContent) && (React__default.default.createElement(Tooltip.Tooltip, { text: tooltip, content: tooltipContent, className: buildClassnames.buildClassnames([Choice_module['tooltip-trigger'], classNames.tooltip]) },
|
|
45
|
+
React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", name: "help", width: index.theme.sizes.base })))),
|
|
46
46
|
hint && (React__default.default.createElement(Text.Text, { id: `hint-${htmlFor}`, variant: "hintText", className: classNames.hint }, hint)),
|
|
47
47
|
error && (React__default.default.createElement(MiniAlert.MiniAlert, { variant: "error", title: error, className: classNames.error, isBold: false, role: "alert" })),
|
|
48
48
|
Footer)) : null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\nimport { Tooltip } from '../Tooltip';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\nimport { MiniAlert } from '../Alerts/MiniAlert';\n\nimport styles from './Choice.module.scss';\n\nexport interface ForwardedChoiceProps {\n className?: string;\n disabled?: boolean;\n label?: ReactNode;\n hint?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n error?: ReactNode;\n bordered?: boolean;\n Badge?: ReactNode;\n Accessory?: ReactNode;\n Footer?: ReactNode;\n inputPosition?: 'left' | 'right';\n labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n htmlFor: string;\n children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n hint: prefix ? 'choice__hint' : undefined,\n label: prefix ? 'choice__label' : undefined,\n tooltip: prefix ? 'choice__tooltip' : undefined,\n error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n htmlFor,\n className,\n label,\n hint,\n tooltip,\n tooltipContent,\n error,\n bordered,\n Badge,\n Accessory,\n Footer,\n children,\n disabled = false,\n labelVariant = 'body',\n inputPosition = 'left',\n}: ChoiceProps) => {\n const classNames = generateClassNames(className);\n\n const inputLayoutClass = [\n styles['input-layout'],\n Accessory ? styles['align-center'] : styles['align-top'],\n ].join(' ');\n\n const wrapperClass = buildClassnames([\n styles.wrapper,\n bordered && styles.bordered,\n disabled && styles.disabled,\n error && styles.error,\n className,\n ]);\n\n const contentMarkup = (\n <div className={styles['root-layout']}>\n {inputPosition === 'left' && <div className={inputLayoutClass}>{children}</div>}\n {Accessory && <div className={styles['accessory-layout']}>{Accessory}</div>}\n {label || hint || error || Badge || Footer ? (\n <div className={styles['text-layout']}>\n <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n {Badge}\n {label && (\n <Text variant={labelVariant} className={classNames.label}>\n {label}\n </Text>\n )}\n {(tooltip || tooltipContent) && (\n <Tooltip
|
|
1
|
+
{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\nimport { Tooltip } from '../Tooltip';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\nimport { MiniAlert } from '../Alerts/MiniAlert';\n\nimport styles from './Choice.module.scss';\n\nexport interface ForwardedChoiceProps {\n className?: string;\n disabled?: boolean;\n label?: ReactNode;\n hint?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n error?: ReactNode;\n bordered?: boolean;\n Badge?: ReactNode;\n Accessory?: ReactNode;\n Footer?: ReactNode;\n inputPosition?: 'left' | 'right';\n labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n htmlFor: string;\n children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n hint: prefix ? 'choice__hint' : undefined,\n label: prefix ? 'choice__label' : undefined,\n tooltip: prefix ? 'choice__tooltip' : undefined,\n error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n htmlFor,\n className,\n label,\n hint,\n tooltip,\n tooltipContent,\n error,\n bordered,\n Badge,\n Accessory,\n Footer,\n children,\n disabled = false,\n labelVariant = 'body',\n inputPosition = 'left',\n}: ChoiceProps) => {\n const classNames = generateClassNames(className);\n\n const inputLayoutClass = [\n styles['input-layout'],\n Accessory ? styles['align-center'] : styles['align-top'],\n ].join(' ');\n\n const wrapperClass = buildClassnames([\n styles.wrapper,\n bordered && styles.bordered,\n disabled && styles.disabled,\n error && styles.error,\n className,\n ]);\n\n const contentMarkup = (\n <div className={styles['root-layout']}>\n {inputPosition === 'left' && <div className={inputLayoutClass}>{children}</div>}\n {Accessory && <div className={styles['accessory-layout']}>{Accessory}</div>}\n {label || hint || error || Badge || Footer ? (\n <div className={styles['text-layout']}>\n <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n {Badge}\n {label && (\n <Text variant={labelVariant} className={classNames.label}>\n {label}\n </Text>\n )}\n {(tooltip || tooltipContent) && (\n <Tooltip\n text={tooltip}\n content={tooltipContent}\n className={buildClassnames([styles['tooltip-trigger'], classNames.tooltip])}\n >\n <HelpIcon\n data-testid=\"tooltip-help\"\n name=\"help\"\n width={theme.sizes.base}\n />\n </Tooltip>\n )}\n </Stack>\n {hint && (\n <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n {hint}\n </Text>\n )}\n {error && (\n <MiniAlert \n variant=\"error\" \n title={error}\n className={classNames.error}\n isBold={false}\n role=\"alert\"\n />\n )}\n {Footer}\n </div>\n ) : null}\n {inputPosition === 'right' && <div className={inputLayoutClass}>{children}</div>}\n </div>\n );\n\n return (\n <label htmlFor={htmlFor} className={wrapperClass}>\n {contentMarkup}\n </label>\n );\n};\n"],"names":["styles","buildClassnames","React","Stack","Text","Tooltip","HelpIcon","theme","MiniAlert"],"mappings":";;;;;;;;;;;;;;;;;AAiCA,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAAW;IACpD,IAAI,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS;IACzC,KAAK,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;IAC3C,OAAO,EAAE,MAAM,GAAG,iBAAiB,GAAG,SAAS;IAC/C,KAAK,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;AAC5C,CAAA,CAAC;AAEK,MAAM,MAAM,GAAG,CAAC,EACrB,OAAO,EACP,SAAS,EACT,KAAK,EACL,IAAI,EACJ,OAAO,EACP,cAAc,EACd,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,MAAM,EACrB,aAAa,GAAG,MAAM,GACV,KAAI;AAChB,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAEhD,IAAA,MAAM,gBAAgB,GAAG;QACvBA,aAAM,CAAC,cAAc,CAAC;AACtB,QAAA,SAAS,GAAGA,aAAM,CAAC,cAAc,CAAC,GAAGA,aAAM,CAAC,WAAW,CAAC;AACzD,KAAA,CAAC,IAAI,CAAC,GAAG,CAAC;IAEX,MAAM,YAAY,GAAGC,+BAAe,CAAC;AACnC,QAAAD,aAAM,CAAC,OAAO;QACd,QAAQ,IAAIA,aAAM,CAAC,QAAQ;QAC3B,QAAQ,IAAIA,aAAM,CAAC,QAAQ;QAC3B,KAAK,IAAIA,aAAM,CAAC,KAAK;QACrB,SAAS;AACV,KAAA,CAAC;IAEF,MAAM,aAAa,IACjBE,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEF,aAAM,CAAC,aAAa,CAAC,EAAA;QAClC,aAAa,KAAK,MAAM,IAAIE,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,gBAAgB,EAAA,EAAG,QAAQ,CAAO;QAC9E,SAAS,IAAIA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEF,aAAM,CAAC,kBAAkB,CAAC,EAAA,EAAG,SAAS,CAAO;AAC1E,QAAA,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,IACxCE,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEF,aAAM,CAAC,aAAa,CAAC,EAAA;AACnC,YAAAE,sBAAA,CAAA,aAAA,CAACC,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;gBACvD,KAAK;AACL,gBAAA,KAAK,KACJD,sBAAA,CAAA,aAAA,CAACE,SAAI,EAAA,EAAC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,KAAK,EAAA,EACrD,KAAK,CACD,CACR;AACA,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBF,sBAAA,CAAA,aAAA,CAACG,eAAO,EAAA,EACN,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,cAAc,EACvB,SAAS,EAAEJ,+BAAe,CAAC,CAACD,aAAM,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,EAAA;AAE3E,oBAAAE,sBAAA,CAAA,aAAA,CAACI,uBAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,IAAI,EAAC,MAAM,EACX,KAAK,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EAAA,CACvB,CACM,CACX,CACK;YACP,IAAI,KACHL,sBAAA,CAAA,aAAA,CAACE,SAAI,IAAC,EAAE,EAAE,CAAA,KAAA,EAAQ,OAAO,CAAA,CAAE,EAAE,OAAO,EAAC,UAAU,EAAC,SAAS,EAAE,UAAU,CAAC,IAAI,EAAA,EACvE,IAAI,CACA,CACR;YACA,KAAK,KACJF,sBAAA,CAAA,aAAA,CAACM,mBAAS,EAAA,EACR,OAAO,EAAC,OAAO,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,UAAU,CAAC,KAAK,EAC3B,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,OAAO,EAAA,CACZ,CACH;AACA,YAAA,MAAM,CACH,IACJ,IAAI;AACP,QAAA,aAAa,KAAK,OAAO,IAAIN,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,gBAAgB,EAAA,EAAG,QAAQ,CAAO,CAC5E,CACP;AAED,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAA,EAC7C,aAAa,CACR;AAEZ;;;;"}
|
|
@@ -35,8 +35,8 @@ const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, erro
|
|
|
35
35
|
React__default.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
|
|
36
36
|
Badge,
|
|
37
37
|
label && (React__default.createElement(Text, { variant: labelVariant, className: classNames.label }, label)),
|
|
38
|
-
(tooltip || tooltipContent) && (React__default.createElement(Tooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
|
|
39
|
-
React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", name: "help", width: theme.sizes.base
|
|
38
|
+
(tooltip || tooltipContent) && (React__default.createElement(Tooltip, { text: tooltip, content: tooltipContent, className: buildClassnames([styles['tooltip-trigger'], classNames.tooltip]) },
|
|
39
|
+
React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", name: "help", width: theme.sizes.base })))),
|
|
40
40
|
hint && (React__default.createElement(Text, { id: `hint-${htmlFor}`, variant: "hintText", className: classNames.hint }, hint)),
|
|
41
41
|
error && (React__default.createElement(MiniAlert, { variant: "error", title: error, className: classNames.error, isBold: false, role: "alert" })),
|
|
42
42
|
Footer)) : null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\nimport { Tooltip } from '../Tooltip';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\nimport { MiniAlert } from '../Alerts/MiniAlert';\n\nimport styles from './Choice.module.scss';\n\nexport interface ForwardedChoiceProps {\n className?: string;\n disabled?: boolean;\n label?: ReactNode;\n hint?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n error?: ReactNode;\n bordered?: boolean;\n Badge?: ReactNode;\n Accessory?: ReactNode;\n Footer?: ReactNode;\n inputPosition?: 'left' | 'right';\n labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n htmlFor: string;\n children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n hint: prefix ? 'choice__hint' : undefined,\n label: prefix ? 'choice__label' : undefined,\n tooltip: prefix ? 'choice__tooltip' : undefined,\n error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n htmlFor,\n className,\n label,\n hint,\n tooltip,\n tooltipContent,\n error,\n bordered,\n Badge,\n Accessory,\n Footer,\n children,\n disabled = false,\n labelVariant = 'body',\n inputPosition = 'left',\n}: ChoiceProps) => {\n const classNames = generateClassNames(className);\n\n const inputLayoutClass = [\n styles['input-layout'],\n Accessory ? styles['align-center'] : styles['align-top'],\n ].join(' ');\n\n const wrapperClass = buildClassnames([\n styles.wrapper,\n bordered && styles.bordered,\n disabled && styles.disabled,\n error && styles.error,\n className,\n ]);\n\n const contentMarkup = (\n <div className={styles['root-layout']}>\n {inputPosition === 'left' && <div className={inputLayoutClass}>{children}</div>}\n {Accessory && <div className={styles['accessory-layout']}>{Accessory}</div>}\n {label || hint || error || Badge || Footer ? (\n <div className={styles['text-layout']}>\n <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n {Badge}\n {label && (\n <Text variant={labelVariant} className={classNames.label}>\n {label}\n </Text>\n )}\n {(tooltip || tooltipContent) && (\n <Tooltip
|
|
1
|
+
{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\nimport { Tooltip } from '../Tooltip';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\nimport { MiniAlert } from '../Alerts/MiniAlert';\n\nimport styles from './Choice.module.scss';\n\nexport interface ForwardedChoiceProps {\n className?: string;\n disabled?: boolean;\n label?: ReactNode;\n hint?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n error?: ReactNode;\n bordered?: boolean;\n Badge?: ReactNode;\n Accessory?: ReactNode;\n Footer?: ReactNode;\n inputPosition?: 'left' | 'right';\n labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n htmlFor: string;\n children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n hint: prefix ? 'choice__hint' : undefined,\n label: prefix ? 'choice__label' : undefined,\n tooltip: prefix ? 'choice__tooltip' : undefined,\n error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n htmlFor,\n className,\n label,\n hint,\n tooltip,\n tooltipContent,\n error,\n bordered,\n Badge,\n Accessory,\n Footer,\n children,\n disabled = false,\n labelVariant = 'body',\n inputPosition = 'left',\n}: ChoiceProps) => {\n const classNames = generateClassNames(className);\n\n const inputLayoutClass = [\n styles['input-layout'],\n Accessory ? styles['align-center'] : styles['align-top'],\n ].join(' ');\n\n const wrapperClass = buildClassnames([\n styles.wrapper,\n bordered && styles.bordered,\n disabled && styles.disabled,\n error && styles.error,\n className,\n ]);\n\n const contentMarkup = (\n <div className={styles['root-layout']}>\n {inputPosition === 'left' && <div className={inputLayoutClass}>{children}</div>}\n {Accessory && <div className={styles['accessory-layout']}>{Accessory}</div>}\n {label || hint || error || Badge || Footer ? (\n <div className={styles['text-layout']}>\n <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n {Badge}\n {label && (\n <Text variant={labelVariant} className={classNames.label}>\n {label}\n </Text>\n )}\n {(tooltip || tooltipContent) && (\n <Tooltip\n text={tooltip}\n content={tooltipContent}\n className={buildClassnames([styles['tooltip-trigger'], classNames.tooltip])}\n >\n <HelpIcon\n data-testid=\"tooltip-help\"\n name=\"help\"\n width={theme.sizes.base}\n />\n </Tooltip>\n )}\n </Stack>\n {hint && (\n <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n {hint}\n </Text>\n )}\n {error && (\n <MiniAlert \n variant=\"error\" \n title={error}\n className={classNames.error}\n isBold={false}\n role=\"alert\"\n />\n )}\n {Footer}\n </div>\n ) : null}\n {inputPosition === 'right' && <div className={inputLayoutClass}>{children}</div>}\n </div>\n );\n\n return (\n <label htmlFor={htmlFor} className={wrapperClass}>\n {contentMarkup}\n </label>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"wrapper":"
|
|
5
|
+
___$insertStyle("._wrapper_1mn1m_1 {\n box-sizing: border-box;\n}\n._wrapper_1mn1m_1:hover {\n cursor: pointer;\n}\n._wrapper_1mn1m_1._disabled_1mn1m_7:hover {\n cursor: default;\n}\n\n._error_1mn1m_11 {\n --choice-error-border: var(--colors-secondary-red-base);\n --choice-error-focus: var(--colors-secondary-red-light);\n --choice-error-bg: var(--colors-secondary-red-base);\n /* Bordered error state */\n}\n._error_1mn1m_11._bordered_1mn1m_17 {\n border-color: var(--colors-secondary-red-base);\n}\n\n._bordered_1mn1m_17 {\n display: block;\n border: 2px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-md);\n padding: var(--sizes-base) var(--sizes-3);\n background-color: white;\n}\n._bordered_1mn1m_17:not(._disabled_1mn1m_7):hover {\n border-color: var(--colors-secondary-blue-base);\n}\n._bordered_1mn1m_17:not(._error_1mn1m_11):has(input:checked) {\n border-color: var(--colors-secondary-blue-base);\n}\n\n._root-layout_1mn1m_35 {\n display: flex;\n align-items: center;\n}\n._root-layout_1mn1m_35 > * + * {\n margin-left: var(--sizes-base);\n}\n\n._input-layout_1mn1m_43 {\n align-self: stretch;\n display: flex;\n}\n._input-layout_1mn1m_43._align-top_1mn1m_47 {\n align-items: flex-start;\n}\n._input-layout_1mn1m_43._align-center_1mn1m_50 {\n align-items: center;\n}\n\n._accessory-layout_1mn1m_54 {\n align-self: center;\n display: flex;\n align-items: center;\n}\n\n._text-layout_1mn1m_60 {\n flex: 1;\n}\n._text-layout_1mn1m_60 > span {\n display: block;\n}\n._text-layout_1mn1m_60 > * + * {\n margin-top: var(--choice-hint-gap, var(--sizes-sm));\n}\n\n._tooltip-trigger_1mn1m_70 {\n color: var(--choice-tooltip-icon-color, var(--colors-neutral-ink-lightest));\n}");
|
|
6
|
+
var styles = {"wrapper":"_wrapper_1mn1m_1","disabled":"_disabled_1mn1m_7","error":"_error_1mn1m_11","bordered":"_bordered_1mn1m_17","root-layout":"_root-layout_1mn1m_35","input-layout":"_input-layout_1mn1m_43","align-top":"_align-top_1mn1m_47","align-center":"_align-center_1mn1m_50","accessory-layout":"_accessory-layout_1mn1m_54","text-layout":"_text-layout_1mn1m_60","tooltip-trigger":"_tooltip-trigger_1mn1m_70"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=Choice.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Choice.module.scss.cjs","sources":["../../../src/components/Choice/Choice.module.scss"],"sourcesContent":[".wrapper {\n box-sizing: border-box;\n\n &:hover {\n cursor: pointer;\n }\n\n &.disabled:hover {\n cursor: default;\n }\n}\n\n.error {\n --choice-error-border: var(--colors-secondary-red-base);\n --choice-error-focus: var(--colors-secondary-red-light);\n --choice-error-bg: var(--colors-secondary-red-base);\n\n /* Bordered error state */\n &.bordered {\n border-color: var(--colors-secondary-red-base);\n }\n}\n\n.bordered {\n display: block;\n border: 2px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-md);\n padding: var(--sizes-base) var(--sizes-3);\n background-color: white;\n\n &:not(.disabled):hover {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:not(.error):has(input:checked) {\n border-color: var(--colors-secondary-blue-base);\n }\n}\n\n.root-layout {\n display: flex;\n align-items: center;\n\n & > * + * {\n margin-left: var(--sizes-base);\n }\n}\n\n.input-layout {\n align-self: stretch;\n display: flex;\n\n &.align-top {\n align-items: flex-start;\n }\n\n &.align-center {\n align-items: center;\n }\n}\n\n.accessory-layout {\n align-self: center;\n display: flex;\n align-items: center;\n}\n\n.text-layout {\n flex: 1;\n\n & > span {\n display: block;\n }\n\n & > * + * {\n margin-top: var(--sizes-sm);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Choice.module.scss.cjs","sources":["../../../src/components/Choice/Choice.module.scss"],"sourcesContent":[".wrapper {\n box-sizing: border-box;\n\n &:hover {\n cursor: pointer;\n }\n\n &.disabled:hover {\n cursor: default;\n }\n}\n\n.error {\n --choice-error-border: var(--colors-secondary-red-base);\n --choice-error-focus: var(--colors-secondary-red-light);\n --choice-error-bg: var(--colors-secondary-red-base);\n\n /* Bordered error state */\n &.bordered {\n border-color: var(--colors-secondary-red-base);\n }\n}\n\n.bordered {\n display: block;\n border: 2px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-md);\n padding: var(--sizes-base) var(--sizes-3);\n background-color: white;\n\n &:not(.disabled):hover {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:not(.error):has(input:checked) {\n border-color: var(--colors-secondary-blue-base);\n }\n}\n\n.root-layout {\n display: flex;\n align-items: center;\n\n & > * + * {\n margin-left: var(--sizes-base);\n }\n}\n\n.input-layout {\n align-self: stretch;\n display: flex;\n\n &.align-top {\n align-items: flex-start;\n }\n\n &.align-center {\n align-items: center;\n }\n}\n\n.accessory-layout {\n align-self: center;\n display: flex;\n align-items: center;\n}\n\n.text-layout {\n flex: 1;\n\n & > span {\n display: block;\n }\n\n & > * + * {\n margin-top: var(--choice-hint-gap, var(--sizes-sm));\n }\n}\n\n.tooltip-trigger {\n color: var(--choice-tooltip-icon-color, var(--colors-neutral-ink-lightest));\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,grDAAA;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"wrapper":"
|
|
3
|
+
insertStyle("._wrapper_1mn1m_1 {\n box-sizing: border-box;\n}\n._wrapper_1mn1m_1:hover {\n cursor: pointer;\n}\n._wrapper_1mn1m_1._disabled_1mn1m_7:hover {\n cursor: default;\n}\n\n._error_1mn1m_11 {\n --choice-error-border: var(--colors-secondary-red-base);\n --choice-error-focus: var(--colors-secondary-red-light);\n --choice-error-bg: var(--colors-secondary-red-base);\n /* Bordered error state */\n}\n._error_1mn1m_11._bordered_1mn1m_17 {\n border-color: var(--colors-secondary-red-base);\n}\n\n._bordered_1mn1m_17 {\n display: block;\n border: 2px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-md);\n padding: var(--sizes-base) var(--sizes-3);\n background-color: white;\n}\n._bordered_1mn1m_17:not(._disabled_1mn1m_7):hover {\n border-color: var(--colors-secondary-blue-base);\n}\n._bordered_1mn1m_17:not(._error_1mn1m_11):has(input:checked) {\n border-color: var(--colors-secondary-blue-base);\n}\n\n._root-layout_1mn1m_35 {\n display: flex;\n align-items: center;\n}\n._root-layout_1mn1m_35 > * + * {\n margin-left: var(--sizes-base);\n}\n\n._input-layout_1mn1m_43 {\n align-self: stretch;\n display: flex;\n}\n._input-layout_1mn1m_43._align-top_1mn1m_47 {\n align-items: flex-start;\n}\n._input-layout_1mn1m_43._align-center_1mn1m_50 {\n align-items: center;\n}\n\n._accessory-layout_1mn1m_54 {\n align-self: center;\n display: flex;\n align-items: center;\n}\n\n._text-layout_1mn1m_60 {\n flex: 1;\n}\n._text-layout_1mn1m_60 > span {\n display: block;\n}\n._text-layout_1mn1m_60 > * + * {\n margin-top: var(--choice-hint-gap, var(--sizes-sm));\n}\n\n._tooltip-trigger_1mn1m_70 {\n color: var(--choice-tooltip-icon-color, var(--colors-neutral-ink-lightest));\n}");
|
|
4
|
+
var styles = {"wrapper":"_wrapper_1mn1m_1","disabled":"_disabled_1mn1m_7","error":"_error_1mn1m_11","bordered":"_bordered_1mn1m_17","root-layout":"_root-layout_1mn1m_35","input-layout":"_input-layout_1mn1m_43","align-top":"_align-top_1mn1m_47","align-center":"_align-center_1mn1m_50","accessory-layout":"_accessory-layout_1mn1m_54","text-layout":"_text-layout_1mn1m_60","tooltip-trigger":"_tooltip-trigger_1mn1m_70"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=Choice.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Choice.module.scss.js","sources":["../../../src/components/Choice/Choice.module.scss"],"sourcesContent":[".wrapper {\n box-sizing: border-box;\n\n &:hover {\n cursor: pointer;\n }\n\n &.disabled:hover {\n cursor: default;\n }\n}\n\n.error {\n --choice-error-border: var(--colors-secondary-red-base);\n --choice-error-focus: var(--colors-secondary-red-light);\n --choice-error-bg: var(--colors-secondary-red-base);\n\n /* Bordered error state */\n &.bordered {\n border-color: var(--colors-secondary-red-base);\n }\n}\n\n.bordered {\n display: block;\n border: 2px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-md);\n padding: var(--sizes-base) var(--sizes-3);\n background-color: white;\n\n &:not(.disabled):hover {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:not(.error):has(input:checked) {\n border-color: var(--colors-secondary-blue-base);\n }\n}\n\n.root-layout {\n display: flex;\n align-items: center;\n\n & > * + * {\n margin-left: var(--sizes-base);\n }\n}\n\n.input-layout {\n align-self: stretch;\n display: flex;\n\n &.align-top {\n align-items: flex-start;\n }\n\n &.align-center {\n align-items: center;\n }\n}\n\n.accessory-layout {\n align-self: center;\n display: flex;\n align-items: center;\n}\n\n.text-layout {\n flex: 1;\n\n & > span {\n display: block;\n }\n\n & > * + * {\n margin-top: var(--sizes-sm);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Choice.module.scss.js","sources":["../../../src/components/Choice/Choice.module.scss"],"sourcesContent":[".wrapper {\n box-sizing: border-box;\n\n &:hover {\n cursor: pointer;\n }\n\n &.disabled:hover {\n cursor: default;\n }\n}\n\n.error {\n --choice-error-border: var(--colors-secondary-red-base);\n --choice-error-focus: var(--colors-secondary-red-light);\n --choice-error-bg: var(--colors-secondary-red-base);\n\n /* Bordered error state */\n &.bordered {\n border-color: var(--colors-secondary-red-base);\n }\n}\n\n.bordered {\n display: block;\n border: 2px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-md);\n padding: var(--sizes-base) var(--sizes-3);\n background-color: white;\n\n &:not(.disabled):hover {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:not(.error):has(input:checked) {\n border-color: var(--colors-secondary-blue-base);\n }\n}\n\n.root-layout {\n display: flex;\n align-items: center;\n\n & > * + * {\n margin-left: var(--sizes-base);\n }\n}\n\n.input-layout {\n align-self: stretch;\n display: flex;\n\n &.align-top {\n align-items: flex-start;\n }\n\n &.align-center {\n align-items: center;\n }\n}\n\n.accessory-layout {\n align-self: center;\n display: flex;\n align-items: center;\n}\n\n.text-layout {\n flex: 1;\n\n & > span {\n display: block;\n }\n\n & > * + * {\n margin-top: var(--choice-hint-gap, var(--sizes-sm));\n }\n}\n\n.tooltip-trigger {\n color: var(--choice-tooltip-icon-color, var(--colors-neutral-ink-lightest));\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,grDAAA;;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle("/* DataTable sub-component styles */\n/* ScrollContainer */\n.
|
|
6
|
-
var styles = {"scrollContainer":"
|
|
5
|
+
___$insertStyle("/* DataTable sub-component styles */\n/* ScrollContainer */\n._scrollContainer_uiqwq_3 {\n position: relative;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n/* NoWrap */\n._noWrap_uiqwq_11 {\n white-space: nowrap;\n}\n\n/* Truncate */\n._truncate_uiqwq_16 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* LoadingCellContent */\n._loadingCellContent_uiqwq_23 {\n height: 20px;\n width: 75%;\n border-radius: var(--radius-base);\n background: var(--colors-neutral-grey-base);\n background-image: linear-gradient(to right, var(--colors-neutral-grey-base) 0%, var(--colors-neutral-grey-dark) 20%, var(--colors-neutral-grey-base) 40%, var(--colors-neutral-grey-base) 100%);\n background-repeat: no-repeat;\n background-size: 800px 104px;\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: _placeholderShimmer_uiqwq_1;\n animation-timing-function: linear;\n}\n\n@keyframes _placeholderShimmer_uiqwq_1 {\n 0% {\n background-position: -468px 0;\n }\n 100% {\n background-position: 468px 0;\n }\n}\n/* EmptyBodyContent */\n._emptyBodyContent_uiqwq_47 {\n padding-top: var(--sizes-lg);\n padding-bottom: var(--sizes-lg);\n grid-column: 1/span var(--column-span);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-md);\n}\n\n._emptyBodyGlyphWrapper_uiqwq_58 {\n padding: var(--sizes-md);\n background-color: var(--colors-neutral-grey-light);\n border-radius: var(--radius-full);\n}\n\n/* Cell */\n._cell_uiqwq_65 {\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n grid-column-end: span var(--cell-span, 1);\n}\ntfoot ._cell_uiqwq_65 {\n min-height: 56px;\n border-top: 1px solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n/* Header */\n._header_uiqwq_89 {\n height: 56px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n z-index: var(--header-z-index, 0);\n background-color: white;\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n._row_uiqwq_104 {\n display: contents;\n}\n\n/* Selected rows must beat two higher-specificity rules that also paint the\n cell background:\n - striping: [data-table-id] tr:nth-child(odd) > td (0,2,2), injected per table by generateTableCss\n - hover: .tableGrid.tableGrid tr:hover td (0,3,2), defined below\n Doubling the class selectors lifts this rule to (0,4,2) so selection always\n wins, regardless of source order. Mirrors the pre-CSS-Modules `&&&& > td` (0,4,1). */\n._tableGrid_uiqwq_111._tableGrid_uiqwq_111 tr._rowSelected_uiqwq_114._rowSelected_uiqwq_114 > td {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n._rowAccentColor_uiqwq_118 > *:first-child {\n position: relative;\n}\n\n._rowAccentColor_uiqwq_118 > *:first-child::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n._wrapper_uiqwq_133 {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n}\n._wrapper_uiqwq_133, ._wrapper_uiqwq_133 * {\n box-sizing: border-box;\n}\n._wrapper_uiqwq_133 .hideHeaderDetails th > * {\n opacity: 0.1;\n}\n._wrapper_uiqwq_133 .hideHeaderDetails th .th-divider {\n opacity: 1;\n}\n\n._borderFull_uiqwq_149 {\n border-width: 1px;\n border-radius: var(--radius-base);\n}\n\n._borderVertical_uiqwq_154 {\n border-width: 0;\n border-top-width: 1px;\n border-bottom-width: 1px;\n}\n\n._borderNone_uiqwq_160 {\n border-width: 0;\n}\n\n/* TableGrid */\n._tableGrid_uiqwq_111 {\n min-width: 100%;\n width: max-content;\n display: grid;\n --density: var(--sizes-base);\n}\n._tableGrid_uiqwq_111 thead, ._tableGrid_uiqwq_111 tbody, ._tableGrid_uiqwq_111 tfoot {\n display: contents;\n}\n\n._tableGrid_uiqwq_111._tableGrid_uiqwq_111 tr:hover td {\n /* No 1:1 theme token exists for this shade */\n background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n._sortIndicator_uiqwq_181 {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: var(--colors-neutral-ink-lightest);\n}\n\n._headerContent_uiqwq_191 {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n}\n\n._clickableHeaderContent_uiqwq_205 {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n appearance: none;\n padding: 0;\n border: 0;\n border-radius: var(--radius-base);\n background-color: transparent;\n}\n._clickableHeaderContent_uiqwq_205:not(:disabled):hover {\n cursor: pointer;\n}\n._clickableHeaderContent_uiqwq_205:hover ._sortIndicator_uiqwq_181 {\n background-color: var(--colors-neutral-grey-light);\n color: var(--colors-neutral-ink-base);\n}\n._clickableHeaderContent_uiqwq_205:focus-visible {\n outline: 0;\n box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n}\n\n/* ColumnDivider ResizerBar */\n._resizerBar_uiqwq_236 {\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: var(--colors-neutral-grey-dark);\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n}\n._resizerBar_uiqwq_236::before {\n content: \"\";\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n}\n\n/* ActionBar */\n._actionBarContainer_uiqwq_258 {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 50;\n height: 56px;\n background-color: white;\n}\n\n._actionBarContent_uiqwq_271 {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 var(--sizes-sm);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n._actionBarContent_uiqwq_271 > * {\n flex: 1;\n}");
|
|
6
|
+
var styles = {"scrollContainer":"_scrollContainer_uiqwq_3","noWrap":"_noWrap_uiqwq_11","truncate":"_truncate_uiqwq_16","loadingCellContent":"_loadingCellContent_uiqwq_23","emptyBodyContent":"_emptyBodyContent_uiqwq_47","emptyBodyGlyphWrapper":"_emptyBodyGlyphWrapper_uiqwq_58","cell":"_cell_uiqwq_65","header":"_header_uiqwq_89","row":"_row_uiqwq_104","tableGrid":"_tableGrid_uiqwq_111","rowSelected":"_rowSelected_uiqwq_114","rowAccentColor":"_rowAccentColor_uiqwq_118","wrapper":"_wrapper_uiqwq_133","borderFull":"_borderFull_uiqwq_149","borderVertical":"_borderVertical_uiqwq_154","borderNone":"_borderNone_uiqwq_160","sortIndicator":"_sortIndicator_uiqwq_181","headerContent":"_headerContent_uiqwq_191","clickableHeaderContent":"_clickableHeaderContent_uiqwq_205","resizerBar":"_resizerBar_uiqwq_236","actionBarContainer":"_actionBarContainer_uiqwq_258","actionBarContent":"_actionBarContent_uiqwq_271"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=DataTable.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.module.scss.cjs","sources":["../../../../src/components/DataTable/components/DataTable.module.scss"],"sourcesContent":["/* DataTable sub-component styles */\n\n/* ScrollContainer */\n.scrollContainer {\n position: relative;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n/* NoWrap */\n.noWrap {\n white-space: nowrap;\n}\n\n/* Truncate */\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* LoadingCellContent */\n.loadingCellContent {\n height: 20px;\n width: 75%;\n border-radius: var(--radius-base);\n\n background: var(--colors-neutral-grey-base);\n background-image: linear-gradient(\n to right,\n var(--colors-neutral-grey-base) 0%,\n var(--colors-neutral-grey-dark) 20%,\n var(--colors-neutral-grey-base) 40%,\n var(--colors-neutral-grey-base) 100%\n );\n background-repeat: no-repeat;\n background-size: 800px 104px;\n\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeholderShimmer;\n animation-timing-function: linear;\n}\n\n@keyframes placeholderShimmer {\n 0% {\n background-position: -468px 0;\n }\n\n 100% {\n background-position: 468px 0;\n }\n}\n\n/* EmptyBodyContent */\n.emptyBodyContent {\n padding-top: var(--sizes-lg);\n padding-bottom: var(--sizes-lg);\n grid-column: 1 / span var(--column-span);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-md);\n}\n\n.emptyBodyGlyphWrapper {\n padding: var(--sizes-md);\n background-color: var(--colors-neutral-grey-light);\n border-radius: var(--radius-full);\n}\n\n/* Cell */\n.cell {\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n\n grid-column-end: span var(--cell-span, 1);\n\n tfoot & {\n min-height: 56px;\n border-top: 1px solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n/* Header */\n.header {\n height: 56px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n z-index: var(--header-z-index, 0);\n\n background-color: white;\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n.row {\n display: contents;\n}\n\n.rowSelected > td {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n.rowAccentColor > *:first-child {\n position: relative;\n}\n\n.rowAccentColor > *:first-child::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n.wrapper {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n\n &,\n & * {\n box-sizing: border-box;\n }\n\n :global(.hideHeaderDetails) th {\n > * {\n opacity: 0.1;\n }\n\n :global(.th-divider) {\n opacity: 1;\n }\n }\n}\n\n.borderFull {\n border-width: 1px;\n border-radius: var(--radius-base);\n}\n\n.borderVertical {\n border-width: 0;\n border-top-width: 1px;\n border-bottom-width: 1px;\n}\n\n.borderNone {\n border-width: 0;\n}\n\n/* TableGrid */\n.tableGrid {\n min-width: 100%;\n width: max-content;\n display: grid;\n\n & thead,\n & tbody,\n & tfoot {\n display: contents;\n }\n\n --density: var(--sizes-base);\n}\n\n.tableGrid.tableGrid tr:hover td {\n /* No 1:1 theme token exists for this shade */\n background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n.sortIndicator {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: var(--colors-neutral-ink-lightest);\n}\n\n.headerContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n}\n\n.clickableHeaderContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n\n appearance: none;\n padding: 0;\n border: 0;\n border-radius: var(--radius-base);\n background-color: transparent;\n\n &:not(:disabled):hover {\n cursor: pointer;\n }\n\n &:hover .sortIndicator {\n background-color: var(--colors-neutral-grey-light);\n color: var(--colors-neutral-ink-base);\n }\n\n &:focus-visible {\n outline: 0;\n box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* ColumnDivider ResizerBar */\n.resizerBar {\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: var(--colors-neutral-grey-dark);\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n }\n}\n\n/* ActionBar */\n.actionBarContainer {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 50;\n height: 56px;\n background-color: white;\n}\n\n.actionBarContent {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 var(--sizes-sm);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n & > * {\n flex: 1;\n }\n}\n"],"names":[],"mappings":";;;;AAEA,eAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"DataTable.module.scss.cjs","sources":["../../../../src/components/DataTable/components/DataTable.module.scss"],"sourcesContent":["/* DataTable sub-component styles */\n\n/* ScrollContainer */\n.scrollContainer {\n position: relative;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n/* NoWrap */\n.noWrap {\n white-space: nowrap;\n}\n\n/* Truncate */\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* LoadingCellContent */\n.loadingCellContent {\n height: 20px;\n width: 75%;\n border-radius: var(--radius-base);\n\n background: var(--colors-neutral-grey-base);\n background-image: linear-gradient(\n to right,\n var(--colors-neutral-grey-base) 0%,\n var(--colors-neutral-grey-dark) 20%,\n var(--colors-neutral-grey-base) 40%,\n var(--colors-neutral-grey-base) 100%\n );\n background-repeat: no-repeat;\n background-size: 800px 104px;\n\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeholderShimmer;\n animation-timing-function: linear;\n}\n\n@keyframes placeholderShimmer {\n 0% {\n background-position: -468px 0;\n }\n\n 100% {\n background-position: 468px 0;\n }\n}\n\n/* EmptyBodyContent */\n.emptyBodyContent {\n padding-top: var(--sizes-lg);\n padding-bottom: var(--sizes-lg);\n grid-column: 1 / span var(--column-span);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-md);\n}\n\n.emptyBodyGlyphWrapper {\n padding: var(--sizes-md);\n background-color: var(--colors-neutral-grey-light);\n border-radius: var(--radius-full);\n}\n\n/* Cell */\n.cell {\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n\n grid-column-end: span var(--cell-span, 1);\n\n tfoot & {\n min-height: 56px;\n border-top: 1px solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n/* Header */\n.header {\n height: 56px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n z-index: var(--header-z-index, 0);\n\n background-color: white;\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n.row {\n display: contents;\n}\n\n/* Selected rows must beat two higher-specificity rules that also paint the\n cell background:\n - striping: [data-table-id] tr:nth-child(odd) > td (0,2,2), injected per table by generateTableCss\n - hover: .tableGrid.tableGrid tr:hover td (0,3,2), defined below\n Doubling the class selectors lifts this rule to (0,4,2) so selection always\n wins, regardless of source order. Mirrors the pre-CSS-Modules `&&&& > td` (0,4,1). */\n.tableGrid.tableGrid tr.rowSelected.rowSelected > td {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n.rowAccentColor > *:first-child {\n position: relative;\n}\n\n.rowAccentColor > *:first-child::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n.wrapper {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n\n &,\n & * {\n box-sizing: border-box;\n }\n\n :global(.hideHeaderDetails) th {\n > * {\n opacity: 0.1;\n }\n\n :global(.th-divider) {\n opacity: 1;\n }\n }\n}\n\n.borderFull {\n border-width: 1px;\n border-radius: var(--radius-base);\n}\n\n.borderVertical {\n border-width: 0;\n border-top-width: 1px;\n border-bottom-width: 1px;\n}\n\n.borderNone {\n border-width: 0;\n}\n\n/* TableGrid */\n.tableGrid {\n min-width: 100%;\n width: max-content;\n display: grid;\n\n & thead,\n & tbody,\n & tfoot {\n display: contents;\n }\n\n --density: var(--sizes-base);\n}\n\n.tableGrid.tableGrid tr:hover td {\n /* No 1:1 theme token exists for this shade */\n background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n.sortIndicator {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: var(--colors-neutral-ink-lightest);\n}\n\n.headerContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n}\n\n.clickableHeaderContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n\n appearance: none;\n padding: 0;\n border: 0;\n border-radius: var(--radius-base);\n background-color: transparent;\n\n &:not(:disabled):hover {\n cursor: pointer;\n }\n\n &:hover .sortIndicator {\n background-color: var(--colors-neutral-grey-light);\n color: var(--colors-neutral-ink-base);\n }\n\n &:focus-visible {\n outline: 0;\n box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* ColumnDivider ResizerBar */\n.resizerBar {\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: var(--colors-neutral-grey-dark);\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n }\n}\n\n/* ActionBar */\n.actionBarContainer {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 50;\n height: 56px;\n background-color: white;\n}\n\n.actionBarContent {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 var(--sizes-sm);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n & > * {\n flex: 1;\n }\n}\n"],"names":[],"mappings":";;;;AAEA,eAAA,CAAA,iyOAAA;AACA,aAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,gBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,wBAAA,CAAA,mCAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,oBAAA,CAAA,+BAAA,CAAA,kBAAA,CAAA,6BAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle("/* DataTable sub-component styles */\n/* ScrollContainer */\n.
|
|
4
|
-
var styles = {"scrollContainer":"
|
|
3
|
+
insertStyle("/* DataTable sub-component styles */\n/* ScrollContainer */\n._scrollContainer_uiqwq_3 {\n position: relative;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n/* NoWrap */\n._noWrap_uiqwq_11 {\n white-space: nowrap;\n}\n\n/* Truncate */\n._truncate_uiqwq_16 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* LoadingCellContent */\n._loadingCellContent_uiqwq_23 {\n height: 20px;\n width: 75%;\n border-radius: var(--radius-base);\n background: var(--colors-neutral-grey-base);\n background-image: linear-gradient(to right, var(--colors-neutral-grey-base) 0%, var(--colors-neutral-grey-dark) 20%, var(--colors-neutral-grey-base) 40%, var(--colors-neutral-grey-base) 100%);\n background-repeat: no-repeat;\n background-size: 800px 104px;\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: _placeholderShimmer_uiqwq_1;\n animation-timing-function: linear;\n}\n\n@keyframes _placeholderShimmer_uiqwq_1 {\n 0% {\n background-position: -468px 0;\n }\n 100% {\n background-position: 468px 0;\n }\n}\n/* EmptyBodyContent */\n._emptyBodyContent_uiqwq_47 {\n padding-top: var(--sizes-lg);\n padding-bottom: var(--sizes-lg);\n grid-column: 1/span var(--column-span);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-md);\n}\n\n._emptyBodyGlyphWrapper_uiqwq_58 {\n padding: var(--sizes-md);\n background-color: var(--colors-neutral-grey-light);\n border-radius: var(--radius-full);\n}\n\n/* Cell */\n._cell_uiqwq_65 {\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n grid-column-end: span var(--cell-span, 1);\n}\ntfoot ._cell_uiqwq_65 {\n min-height: 56px;\n border-top: 1px solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n/* Header */\n._header_uiqwq_89 {\n height: 56px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n z-index: var(--header-z-index, 0);\n background-color: white;\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n._row_uiqwq_104 {\n display: contents;\n}\n\n/* Selected rows must beat two higher-specificity rules that also paint the\n cell background:\n - striping: [data-table-id] tr:nth-child(odd) > td (0,2,2), injected per table by generateTableCss\n - hover: .tableGrid.tableGrid tr:hover td (0,3,2), defined below\n Doubling the class selectors lifts this rule to (0,4,2) so selection always\n wins, regardless of source order. Mirrors the pre-CSS-Modules `&&&& > td` (0,4,1). */\n._tableGrid_uiqwq_111._tableGrid_uiqwq_111 tr._rowSelected_uiqwq_114._rowSelected_uiqwq_114 > td {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n._rowAccentColor_uiqwq_118 > *:first-child {\n position: relative;\n}\n\n._rowAccentColor_uiqwq_118 > *:first-child::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n._wrapper_uiqwq_133 {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n}\n._wrapper_uiqwq_133, ._wrapper_uiqwq_133 * {\n box-sizing: border-box;\n}\n._wrapper_uiqwq_133 .hideHeaderDetails th > * {\n opacity: 0.1;\n}\n._wrapper_uiqwq_133 .hideHeaderDetails th .th-divider {\n opacity: 1;\n}\n\n._borderFull_uiqwq_149 {\n border-width: 1px;\n border-radius: var(--radius-base);\n}\n\n._borderVertical_uiqwq_154 {\n border-width: 0;\n border-top-width: 1px;\n border-bottom-width: 1px;\n}\n\n._borderNone_uiqwq_160 {\n border-width: 0;\n}\n\n/* TableGrid */\n._tableGrid_uiqwq_111 {\n min-width: 100%;\n width: max-content;\n display: grid;\n --density: var(--sizes-base);\n}\n._tableGrid_uiqwq_111 thead, ._tableGrid_uiqwq_111 tbody, ._tableGrid_uiqwq_111 tfoot {\n display: contents;\n}\n\n._tableGrid_uiqwq_111._tableGrid_uiqwq_111 tr:hover td {\n /* No 1:1 theme token exists for this shade */\n background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n._sortIndicator_uiqwq_181 {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: var(--colors-neutral-ink-lightest);\n}\n\n._headerContent_uiqwq_191 {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n}\n\n._clickableHeaderContent_uiqwq_205 {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n appearance: none;\n padding: 0;\n border: 0;\n border-radius: var(--radius-base);\n background-color: transparent;\n}\n._clickableHeaderContent_uiqwq_205:not(:disabled):hover {\n cursor: pointer;\n}\n._clickableHeaderContent_uiqwq_205:hover ._sortIndicator_uiqwq_181 {\n background-color: var(--colors-neutral-grey-light);\n color: var(--colors-neutral-ink-base);\n}\n._clickableHeaderContent_uiqwq_205:focus-visible {\n outline: 0;\n box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n}\n\n/* ColumnDivider ResizerBar */\n._resizerBar_uiqwq_236 {\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: var(--colors-neutral-grey-dark);\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n}\n._resizerBar_uiqwq_236::before {\n content: \"\";\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n}\n\n/* ActionBar */\n._actionBarContainer_uiqwq_258 {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 50;\n height: 56px;\n background-color: white;\n}\n\n._actionBarContent_uiqwq_271 {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 var(--sizes-sm);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n._actionBarContent_uiqwq_271 > * {\n flex: 1;\n}");
|
|
4
|
+
var styles = {"scrollContainer":"_scrollContainer_uiqwq_3","noWrap":"_noWrap_uiqwq_11","truncate":"_truncate_uiqwq_16","loadingCellContent":"_loadingCellContent_uiqwq_23","emptyBodyContent":"_emptyBodyContent_uiqwq_47","emptyBodyGlyphWrapper":"_emptyBodyGlyphWrapper_uiqwq_58","cell":"_cell_uiqwq_65","header":"_header_uiqwq_89","row":"_row_uiqwq_104","tableGrid":"_tableGrid_uiqwq_111","rowSelected":"_rowSelected_uiqwq_114","rowAccentColor":"_rowAccentColor_uiqwq_118","wrapper":"_wrapper_uiqwq_133","borderFull":"_borderFull_uiqwq_149","borderVertical":"_borderVertical_uiqwq_154","borderNone":"_borderNone_uiqwq_160","sortIndicator":"_sortIndicator_uiqwq_181","headerContent":"_headerContent_uiqwq_191","clickableHeaderContent":"_clickableHeaderContent_uiqwq_205","resizerBar":"_resizerBar_uiqwq_236","actionBarContainer":"_actionBarContainer_uiqwq_258","actionBarContent":"_actionBarContent_uiqwq_271"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=DataTable.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.module.scss.js","sources":["../../../../src/components/DataTable/components/DataTable.module.scss"],"sourcesContent":["/* DataTable sub-component styles */\n\n/* ScrollContainer */\n.scrollContainer {\n position: relative;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n/* NoWrap */\n.noWrap {\n white-space: nowrap;\n}\n\n/* Truncate */\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* LoadingCellContent */\n.loadingCellContent {\n height: 20px;\n width: 75%;\n border-radius: var(--radius-base);\n\n background: var(--colors-neutral-grey-base);\n background-image: linear-gradient(\n to right,\n var(--colors-neutral-grey-base) 0%,\n var(--colors-neutral-grey-dark) 20%,\n var(--colors-neutral-grey-base) 40%,\n var(--colors-neutral-grey-base) 100%\n );\n background-repeat: no-repeat;\n background-size: 800px 104px;\n\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeholderShimmer;\n animation-timing-function: linear;\n}\n\n@keyframes placeholderShimmer {\n 0% {\n background-position: -468px 0;\n }\n\n 100% {\n background-position: 468px 0;\n }\n}\n\n/* EmptyBodyContent */\n.emptyBodyContent {\n padding-top: var(--sizes-lg);\n padding-bottom: var(--sizes-lg);\n grid-column: 1 / span var(--column-span);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-md);\n}\n\n.emptyBodyGlyphWrapper {\n padding: var(--sizes-md);\n background-color: var(--colors-neutral-grey-light);\n border-radius: var(--radius-full);\n}\n\n/* Cell */\n.cell {\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n\n grid-column-end: span var(--cell-span, 1);\n\n tfoot & {\n min-height: 56px;\n border-top: 1px solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n/* Header */\n.header {\n height: 56px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n z-index: var(--header-z-index, 0);\n\n background-color: white;\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n.row {\n display: contents;\n}\n\n.rowSelected > td {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n.rowAccentColor > *:first-child {\n position: relative;\n}\n\n.rowAccentColor > *:first-child::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n.wrapper {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n\n &,\n & * {\n box-sizing: border-box;\n }\n\n :global(.hideHeaderDetails) th {\n > * {\n opacity: 0.1;\n }\n\n :global(.th-divider) {\n opacity: 1;\n }\n }\n}\n\n.borderFull {\n border-width: 1px;\n border-radius: var(--radius-base);\n}\n\n.borderVertical {\n border-width: 0;\n border-top-width: 1px;\n border-bottom-width: 1px;\n}\n\n.borderNone {\n border-width: 0;\n}\n\n/* TableGrid */\n.tableGrid {\n min-width: 100%;\n width: max-content;\n display: grid;\n\n & thead,\n & tbody,\n & tfoot {\n display: contents;\n }\n\n --density: var(--sizes-base);\n}\n\n.tableGrid.tableGrid tr:hover td {\n /* No 1:1 theme token exists for this shade */\n background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n.sortIndicator {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: var(--colors-neutral-ink-lightest);\n}\n\n.headerContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n}\n\n.clickableHeaderContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n\n appearance: none;\n padding: 0;\n border: 0;\n border-radius: var(--radius-base);\n background-color: transparent;\n\n &:not(:disabled):hover {\n cursor: pointer;\n }\n\n &:hover .sortIndicator {\n background-color: var(--colors-neutral-grey-light);\n color: var(--colors-neutral-ink-base);\n }\n\n &:focus-visible {\n outline: 0;\n box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* ColumnDivider ResizerBar */\n.resizerBar {\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: var(--colors-neutral-grey-dark);\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n }\n}\n\n/* ActionBar */\n.actionBarContainer {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 50;\n height: 56px;\n background-color: white;\n}\n\n.actionBarContent {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 var(--sizes-sm);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n & > * {\n flex: 1;\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAEAA,WAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"DataTable.module.scss.js","sources":["../../../../src/components/DataTable/components/DataTable.module.scss"],"sourcesContent":["/* DataTable sub-component styles */\n\n/* ScrollContainer */\n.scrollContainer {\n position: relative;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n}\n\n/* NoWrap */\n.noWrap {\n white-space: nowrap;\n}\n\n/* Truncate */\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* LoadingCellContent */\n.loadingCellContent {\n height: 20px;\n width: 75%;\n border-radius: var(--radius-base);\n\n background: var(--colors-neutral-grey-base);\n background-image: linear-gradient(\n to right,\n var(--colors-neutral-grey-base) 0%,\n var(--colors-neutral-grey-dark) 20%,\n var(--colors-neutral-grey-base) 40%,\n var(--colors-neutral-grey-base) 100%\n );\n background-repeat: no-repeat;\n background-size: 800px 104px;\n\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeholderShimmer;\n animation-timing-function: linear;\n}\n\n@keyframes placeholderShimmer {\n 0% {\n background-position: -468px 0;\n }\n\n 100% {\n background-position: 468px 0;\n }\n}\n\n/* EmptyBodyContent */\n.emptyBodyContent {\n padding-top: var(--sizes-lg);\n padding-bottom: var(--sizes-lg);\n grid-column: 1 / span var(--column-span);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-md);\n}\n\n.emptyBodyGlyphWrapper {\n padding: var(--sizes-md);\n background-color: var(--colors-neutral-grey-light);\n border-radius: var(--radius-full);\n}\n\n/* Cell */\n.cell {\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n\n background-color: white;\n padding-bottom: var(--density);\n padding-top: var(--density);\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n\n color: var(--text-body-small-color);\n font-family: var(--text-body-small-font-family);\n font-size: var(--text-body-small-font-size);\n font-style: var(--text-body-small-font-style);\n font-weight: var(--text-body-small-font-weight);\n line-height: var(--text-body-small-line-height);\n\n grid-column-end: span var(--cell-span, 1);\n\n tfoot & {\n min-height: 56px;\n border-top: 1px solid var(--colors-secondary-blue-base);\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n/* Header */\n.header {\n height: 56px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: var(--cell-align, flex-start);\n z-index: var(--header-z-index, 0);\n\n background-color: white;\n padding-left: var(--cell-spacing, var(--sizes-3));\n padding-right: var(--cell-spacing, var(--sizes-3));\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n.row {\n display: contents;\n}\n\n/* Selected rows must beat two higher-specificity rules that also paint the\n cell background:\n - striping: [data-table-id] tr:nth-child(odd) > td (0,2,2), injected per table by generateTableCss\n - hover: .tableGrid.tableGrid tr:hover td (0,3,2), defined below\n Doubling the class selectors lifts this rule to (0,4,2) so selection always\n wins, regardless of source order. Mirrors the pre-CSS-Modules `&&&& > td` (0,4,1). */\n.tableGrid.tableGrid tr.rowSelected.rowSelected > td {\n background-color: var(--colors-brand-blue-lightest);\n}\n\n.rowAccentColor > *:first-child {\n position: relative;\n}\n\n.rowAccentColor > *:first-child::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background-color: var(--row-accent-color);\n}\n\n/* Wrapper */\n.wrapper {\n width: 100%;\n position: relative;\n border-style: solid;\n border-color: var(--colors-neutral-grey-dark);\n\n &,\n & * {\n box-sizing: border-box;\n }\n\n :global(.hideHeaderDetails) th {\n > * {\n opacity: 0.1;\n }\n\n :global(.th-divider) {\n opacity: 1;\n }\n }\n}\n\n.borderFull {\n border-width: 1px;\n border-radius: var(--radius-base);\n}\n\n.borderVertical {\n border-width: 0;\n border-top-width: 1px;\n border-bottom-width: 1px;\n}\n\n.borderNone {\n border-width: 0;\n}\n\n/* TableGrid */\n.tableGrid {\n min-width: 100%;\n width: max-content;\n display: grid;\n\n & thead,\n & tbody,\n & tfoot {\n display: contents;\n }\n\n --density: var(--sizes-base);\n}\n\n.tableGrid.tableGrid tr:hover td {\n /* No 1:1 theme token exists for this shade */\n background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n.sortIndicator {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: var(--colors-neutral-ink-lightest);\n}\n\n.headerContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n}\n\n.clickableHeaderContent {\n display: flex;\n height: 28px;\n align-items: center;\n gap: var(--sizes-xs);\n white-space: nowrap;\n\n color: var(--text-heading-table-color);\n font-family: var(--text-heading-table-font-family);\n font-size: var(--text-heading-table-font-size);\n font-style: var(--text-heading-table-font-style);\n font-weight: var(--text-heading-table-font-weight);\n line-height: var(--text-heading-table-line-height);\n\n appearance: none;\n padding: 0;\n border: 0;\n border-radius: var(--radius-base);\n background-color: transparent;\n\n &:not(:disabled):hover {\n cursor: pointer;\n }\n\n &:hover .sortIndicator {\n background-color: var(--colors-neutral-grey-light);\n color: var(--colors-neutral-ink-base);\n }\n\n &:focus-visible {\n outline: 0;\n box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n }\n}\n\n/* ColumnDivider ResizerBar */\n.resizerBar {\n position: absolute;\n right: 0;\n top: 37.5%;\n width: 1px;\n background: var(--colors-neutral-grey-dark);\n min-height: 25%;\n cursor: col-resize;\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n top: -150%;\n left: 0;\n width: 12px;\n min-height: 400%;\n z-index: 1;\n transform: translateX(-6px);\n }\n}\n\n/* ActionBar */\n.actionBarContainer {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 50;\n height: 56px;\n background-color: white;\n}\n\n.actionBarContent {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 var(--sizes-sm);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n & > * {\n flex: 1;\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAEAA,WAAA,CAAA,iyOAAA;AACA,aAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,gBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,wBAAA,CAAA,mCAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,oBAAA,CAAA,+BAAA,CAAA,kBAAA,CAAA,6BAAA;;;;"}
|
|
@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
15
15
|
*/
|
|
16
16
|
const Toggle = React.forwardRef(({ id, className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => {
|
|
17
17
|
const componentId = React.useMemo(() => id !== null && id !== void 0 ? id : generateId.generateId('toggle'), [id]);
|
|
18
|
-
return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, inputPosition: inputPosition, ...choiceProps },
|
|
18
|
+
return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, inputPosition: inputPosition, labelVariant: "bodyBold", className: Toggle_module.choice, ...choiceProps },
|
|
19
19
|
React__default.default.createElement("span", { className: buildClassnames.buildClassnames([Toggle_module.wrapper, className]) },
|
|
20
20
|
React__default.default.createElement("span", { className: buildClassnames.buildClassnames([
|
|
21
21
|
Toggle_module.switch,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.cjs","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport styles from './Toggle.module.scss';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n (\n {\n id,\n className,\n name,\n switched,\n small,\n onClick = () => {},\n disabled,\n ariaLabel,\n inputPosition = 'right',\n ...choiceProps\n }: ToggleProps,\n ref,\n ) => {\n const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n return (\n <Choice\n htmlFor={componentId}\n inputPosition={inputPosition}\n {...(choiceProps as ForwardedChoiceProps)}\n >\n <span className={buildClassnames([styles.wrapper, className])}>\n <span\n className={buildClassnames([\n styles.switch,\n small ? styles.small : undefined,\n disabled ? styles.disabled : undefined,\n switched ? styles.switched : undefined,\n ])}\n >\n <input\n id={componentId}\n role=\"switch\"\n type=\"checkbox\"\n name={name}\n aria-label={ariaLabel}\n checked={!!switched}\n onChange={(e) => (disabled ? undefined : onClick(e))}\n disabled={disabled}\n ref={ref}\n className={styles.input}\n />\n <span className={styles.slider} />\n </span>\n </span>\n </Choice>\n );\n },\n);\n"],"names":["forwardRef","useMemo","generateId","React","Choice","
|
|
1
|
+
{"version":3,"file":"Toggle.cjs","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport styles from './Toggle.module.scss';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n (\n {\n id,\n className,\n name,\n switched,\n small,\n onClick = () => {},\n disabled,\n ariaLabel,\n inputPosition = 'right',\n ...choiceProps\n }: ToggleProps,\n ref,\n ) => {\n const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n return (\n <Choice\n htmlFor={componentId}\n inputPosition={inputPosition}\n labelVariant=\"bodyBold\"\n className={styles.choice}\n {...(choiceProps as ForwardedChoiceProps)}\n >\n <span className={buildClassnames([styles.wrapper, className])}>\n <span\n className={buildClassnames([\n styles.switch,\n small ? styles.small : undefined,\n disabled ? styles.disabled : undefined,\n switched ? styles.switched : undefined,\n ])}\n >\n <input\n id={componentId}\n role=\"switch\"\n type=\"checkbox\"\n name={name}\n aria-label={ariaLabel}\n checked={!!switched}\n onChange={(e) => (disabled ? undefined : onClick(e))}\n disabled={disabled}\n ref={ref}\n className={styles.input}\n />\n <span className={styles.slider} />\n </span>\n </span>\n </Choice>\n );\n },\n);\n"],"names":["forwardRef","useMemo","generateId","React","Choice","styles","buildClassnames"],"mappings":";;;;;;;;;;;;AAQA;;AAEG;AACI,MAAM,MAAM,GAAGA,gBAAU,CAC9B,CACE,EACE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,EAAE,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,KACD;IACF,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IACnE,QACEC,qCAACC,aAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAC,UAAU,EACvB,SAAS,EAAEC,aAAM,CAAC,MAAM,EAAA,GACnB,WAAoC,EAAA;QAEzCF,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEG,+BAAe,CAAC,CAACD,aAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA;YAC3DF,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEG,+BAAe,CAAC;AACzB,oBAAAD,aAAM,CAAC,MAAM;oBACb,KAAK,GAAGA,aAAM,CAAC,KAAK,GAAG,SAAS;oBAChC,QAAQ,GAAGA,aAAM,CAAC,QAAQ,GAAG,SAAS;oBACtC,QAAQ,GAAGA,aAAM,CAAC,QAAQ,GAAG,SAAS;iBACvC,CAAC,EAAA;gBAEFF,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAEE,aAAM,CAAC,KAAK,EAAA,CACvB;gBACFF,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEE,aAAM,CAAC,MAAM,GAAI,CAC7B,CACF,CACA;AAEb,CAAC;;;;"}
|
|
@@ -9,7 +9,7 @@ import styles from './Toggle.module.scss.js';
|
|
|
9
9
|
*/
|
|
10
10
|
const Toggle = forwardRef(({ id, className, name, switched, small, onClick = () => { }, disabled, ariaLabel, inputPosition = 'right', ...choiceProps }, ref) => {
|
|
11
11
|
const componentId = useMemo(() => id !== null && id !== void 0 ? id : generateId('toggle'), [id]);
|
|
12
|
-
return (React__default.createElement(Choice, { htmlFor: componentId, inputPosition: inputPosition, ...choiceProps },
|
|
12
|
+
return (React__default.createElement(Choice, { htmlFor: componentId, inputPosition: inputPosition, labelVariant: "bodyBold", className: styles.choice, ...choiceProps },
|
|
13
13
|
React__default.createElement("span", { className: buildClassnames([styles.wrapper, className]) },
|
|
14
14
|
React__default.createElement("span", { className: buildClassnames([
|
|
15
15
|
styles.switch,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport styles from './Toggle.module.scss';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n (\n {\n id,\n className,\n name,\n switched,\n small,\n onClick = () => {},\n disabled,\n ariaLabel,\n inputPosition = 'right',\n ...choiceProps\n }: ToggleProps,\n ref,\n ) => {\n const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n return (\n <Choice\n htmlFor={componentId}\n inputPosition={inputPosition}\n {...(choiceProps as ForwardedChoiceProps)}\n >\n <span className={buildClassnames([styles.wrapper, className])}>\n <span\n className={buildClassnames([\n styles.switch,\n small ? styles.small : undefined,\n disabled ? styles.disabled : undefined,\n switched ? styles.switched : undefined,\n ])}\n >\n <input\n id={componentId}\n role=\"switch\"\n type=\"checkbox\"\n name={name}\n aria-label={ariaLabel}\n checked={!!switched}\n onChange={(e) => (disabled ? undefined : onClick(e))}\n disabled={disabled}\n ref={ref}\n className={styles.input}\n />\n <span className={styles.slider} />\n </span>\n </span>\n </Choice>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;;AAQA;;AAEG;AACI,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,EAAE,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,KACD;IACF,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { generateId } from '../../utils/generateId';\nimport { ToggleProps } from './types';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport styles from './Toggle.module.scss';\n\n/**\n * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.\n */\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n (\n {\n id,\n className,\n name,\n switched,\n small,\n onClick = () => {},\n disabled,\n ariaLabel,\n inputPosition = 'right',\n ...choiceProps\n }: ToggleProps,\n ref,\n ) => {\n const componentId = useMemo(() => id ?? generateId('toggle'), [id]);\n return (\n <Choice\n htmlFor={componentId}\n inputPosition={inputPosition}\n labelVariant=\"bodyBold\"\n className={styles.choice}\n {...(choiceProps as ForwardedChoiceProps)}\n >\n <span className={buildClassnames([styles.wrapper, className])}>\n <span\n className={buildClassnames([\n styles.switch,\n small ? styles.small : undefined,\n disabled ? styles.disabled : undefined,\n switched ? styles.switched : undefined,\n ])}\n >\n <input\n id={componentId}\n role=\"switch\"\n type=\"checkbox\"\n name={name}\n aria-label={ariaLabel}\n checked={!!switched}\n onChange={(e) => (disabled ? undefined : onClick(e))}\n disabled={disabled}\n ref={ref}\n className={styles.input}\n />\n <span className={styles.slider} />\n </span>\n </span>\n </Choice>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;;AAQA;;AAEG;AACI,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,MAAK,EAAE,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,GAAG,WAAW,EACF,EACd,GAAG,KACD;IACF,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IACnE,QACEA,6BAAC,MAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAC,UAAU,EACvB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA,GACnB,WAAoC,EAAA;QAEzCA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA;YAC3DA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,oBAAA,MAAM,CAAC,MAAM;oBACb,KAAK,GAAG,MAAM,CAAC,KAAK,GAAG,SAAS;oBAChC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAG,SAAS;oBACtC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAG,SAAS;iBACvC,CAAC,EAAA;gBAEFA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EAAA,YAAA,EACE,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,CACvB;gBACFA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,MAAM,GAAI,CAC7B,CACF,CACA;AAEb,CAAC;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"wrapper":"
|
|
5
|
+
___$insertStyle("._wrapper_141gi_1 {\n display: inline-block;\n user-select: none;\n}\n\n._switch_141gi_6 {\n display: flex;\n position: relative;\n height: 36px;\n width: 72px;\n z-index: 1;\n}\n._switch_141gi_6._small_141gi_13 {\n height: 28px;\n width: 56px;\n}\n\n._input_141gi_18 {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: var(--radius-base);\n z-index: 2;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n._input_141gi_18:disabled {\n cursor: not-allowed;\n}\n._input_141gi_18:focus-visible + ._slider_141gi_31 {\n box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n}\n._input_141gi_18:checked + ._slider_141gi_31 {\n background-color: var(--colors-secondary-blue-base);\n}\n._input_141gi_18:disabled + ._slider_141gi_31 {\n background-color: var(--colors-neutral-grey-base);\n}\n._input_141gi_18:checked:disabled + ._slider_141gi_31 {\n background-color: var(--colors-secondary-blue-light);\n}\n._input_141gi_18:checked + ._slider_141gi_31::after, ._input_141gi_18:checked + ._slider_141gi_31 svg {\n transform: translateX(36px);\n}\n._small_141gi_13 ._input_141gi_18:checked + ._slider_141gi_31::after, ._small_141gi_13 ._input_141gi_18:checked + ._slider_141gi_31 svg {\n transform: translateX(28px);\n}\n\n._slider_141gi_31 {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 18px;\n background-color: var(--colors-neutral-grey-dark);\n transition: 0.3s;\n}\n._slider_141gi_31::after {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n background-color: white;\n transition: 0.3s;\n height: 28px;\n width: 28px;\n left: var(--sizes-xs);\n bottom: var(--sizes-xs);\n}\n._small_141gi_13 ._slider_141gi_31::after {\n height: 22px;\n width: 22px;\n left: 3px;\n bottom: 3px;\n}\n._disabled_141gi_77 ._slider_141gi_31::after {\n background-color: white;\n}\n._disabled_141gi_77._switched_141gi_80 ._slider_141gi_31::after {\n background-color: var(--colors-secondary-blue-lightest);\n}\n\n._choice_141gi_84 {\n --choice-tooltip-icon-color: var(--colors-neutral-ink-base);\n --choice-hint-gap: var(--sizes-xs);\n}");
|
|
6
|
+
var styles = {"wrapper":"_wrapper_141gi_1","switch":"_switch_141gi_6","small":"_small_141gi_13","input":"_input_141gi_18","slider":"_slider_141gi_31","disabled":"_disabled_141gi_77","switched":"_switched_141gi_80","choice":"_choice_141gi_84"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=Toggle.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.module.scss.cjs","sources":["../../../src/components/Toggle/Toggle.module.scss"],"sourcesContent":[".wrapper {\n display: inline-block;\n user-select: none;\n}\n\n.switch {\n display: flex;\n position: relative;\n height: 36px;\n width: 72px;\n z-index: 1;\n\n &.small {\n height: 28px;\n width: 56px;\n }\n}\n\n.input {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: var(--radius-base);\n z-index: 2;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus-visible + .slider {\n box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n }\n\n &:checked + .slider {\n background-color: var(--colors-secondary-blue-base);\n }\n\n &:disabled + .slider {\n background-color: var(--colors-neutral-grey-base);\n }\n\n &:checked:disabled + .slider {\n background-color: var(--colors-secondary-blue-light);\n }\n\n &:checked + .slider::after,\n &:checked + .slider svg {\n transform: translateX(36px);\n }\n\n .small &:checked + .slider::after,\n .small &:checked + .slider svg {\n transform: translateX(28px);\n }\n}\n\n.slider {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 18px;\n background-color: var(--colors-neutral-grey-dark);\n transition: 0.3s;\n\n &::after {\n content: '';\n position: absolute;\n border-radius: 50%;\n background-color: white;\n transition: 0.3s;\n height: 28px;\n width: 28px;\n left: var(--sizes-xs);\n bottom: var(--sizes-xs);\n }\n\n .small &::after {\n height: 22px;\n width: 22px;\n left: 3px;\n bottom: 3px;\n }\n\n .disabled &::after {\n background-color: white;\n }\n\n .disabled.switched &::after {\n background-color: var(--colors-secondary-blue-lightest);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Toggle.module.scss.cjs","sources":["../../../src/components/Toggle/Toggle.module.scss"],"sourcesContent":[".wrapper {\n display: inline-block;\n user-select: none;\n}\n\n.switch {\n display: flex;\n position: relative;\n height: 36px;\n width: 72px;\n z-index: 1;\n\n &.small {\n height: 28px;\n width: 56px;\n }\n}\n\n.input {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: var(--radius-base);\n z-index: 2;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus-visible + .slider {\n box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n }\n\n &:checked + .slider {\n background-color: var(--colors-secondary-blue-base);\n }\n\n &:disabled + .slider {\n background-color: var(--colors-neutral-grey-base);\n }\n\n &:checked:disabled + .slider {\n background-color: var(--colors-secondary-blue-light);\n }\n\n &:checked + .slider::after,\n &:checked + .slider svg {\n transform: translateX(36px);\n }\n\n .small &:checked + .slider::after,\n .small &:checked + .slider svg {\n transform: translateX(28px);\n }\n}\n\n.slider {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 18px;\n background-color: var(--colors-neutral-grey-dark);\n transition: 0.3s;\n\n &::after {\n content: '';\n position: absolute;\n border-radius: 50%;\n background-color: white;\n transition: 0.3s;\n height: 28px;\n width: 28px;\n left: var(--sizes-xs);\n bottom: var(--sizes-xs);\n }\n\n .small &::after {\n height: 22px;\n width: 22px;\n left: 3px;\n bottom: 3px;\n }\n\n .disabled &::after {\n background-color: white;\n }\n\n .disabled.switched &::after {\n background-color: var(--colors-secondary-blue-lightest);\n }\n}\n\n.choice {\n --choice-tooltip-icon-color: var(--colors-neutral-ink-base);\n --choice-hint-gap: var(--sizes-xs);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,qlEAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"wrapper":"
|
|
3
|
+
insertStyle("._wrapper_141gi_1 {\n display: inline-block;\n user-select: none;\n}\n\n._switch_141gi_6 {\n display: flex;\n position: relative;\n height: 36px;\n width: 72px;\n z-index: 1;\n}\n._switch_141gi_6._small_141gi_13 {\n height: 28px;\n width: 56px;\n}\n\n._input_141gi_18 {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: var(--radius-base);\n z-index: 2;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n._input_141gi_18:disabled {\n cursor: not-allowed;\n}\n._input_141gi_18:focus-visible + ._slider_141gi_31 {\n box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n}\n._input_141gi_18:checked + ._slider_141gi_31 {\n background-color: var(--colors-secondary-blue-base);\n}\n._input_141gi_18:disabled + ._slider_141gi_31 {\n background-color: var(--colors-neutral-grey-base);\n}\n._input_141gi_18:checked:disabled + ._slider_141gi_31 {\n background-color: var(--colors-secondary-blue-light);\n}\n._input_141gi_18:checked + ._slider_141gi_31::after, ._input_141gi_18:checked + ._slider_141gi_31 svg {\n transform: translateX(36px);\n}\n._small_141gi_13 ._input_141gi_18:checked + ._slider_141gi_31::after, ._small_141gi_13 ._input_141gi_18:checked + ._slider_141gi_31 svg {\n transform: translateX(28px);\n}\n\n._slider_141gi_31 {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 18px;\n background-color: var(--colors-neutral-grey-dark);\n transition: 0.3s;\n}\n._slider_141gi_31::after {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n background-color: white;\n transition: 0.3s;\n height: 28px;\n width: 28px;\n left: var(--sizes-xs);\n bottom: var(--sizes-xs);\n}\n._small_141gi_13 ._slider_141gi_31::after {\n height: 22px;\n width: 22px;\n left: 3px;\n bottom: 3px;\n}\n._disabled_141gi_77 ._slider_141gi_31::after {\n background-color: white;\n}\n._disabled_141gi_77._switched_141gi_80 ._slider_141gi_31::after {\n background-color: var(--colors-secondary-blue-lightest);\n}\n\n._choice_141gi_84 {\n --choice-tooltip-icon-color: var(--colors-neutral-ink-base);\n --choice-hint-gap: var(--sizes-xs);\n}");
|
|
4
|
+
var styles = {"wrapper":"_wrapper_141gi_1","switch":"_switch_141gi_6","small":"_small_141gi_13","input":"_input_141gi_18","slider":"_slider_141gi_31","disabled":"_disabled_141gi_77","switched":"_switched_141gi_80","choice":"_choice_141gi_84"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=Toggle.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.module.scss.js","sources":["../../../src/components/Toggle/Toggle.module.scss"],"sourcesContent":[".wrapper {\n display: inline-block;\n user-select: none;\n}\n\n.switch {\n display: flex;\n position: relative;\n height: 36px;\n width: 72px;\n z-index: 1;\n\n &.small {\n height: 28px;\n width: 56px;\n }\n}\n\n.input {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: var(--radius-base);\n z-index: 2;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus-visible + .slider {\n box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n }\n\n &:checked + .slider {\n background-color: var(--colors-secondary-blue-base);\n }\n\n &:disabled + .slider {\n background-color: var(--colors-neutral-grey-base);\n }\n\n &:checked:disabled + .slider {\n background-color: var(--colors-secondary-blue-light);\n }\n\n &:checked + .slider::after,\n &:checked + .slider svg {\n transform: translateX(36px);\n }\n\n .small &:checked + .slider::after,\n .small &:checked + .slider svg {\n transform: translateX(28px);\n }\n}\n\n.slider {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 18px;\n background-color: var(--colors-neutral-grey-dark);\n transition: 0.3s;\n\n &::after {\n content: '';\n position: absolute;\n border-radius: 50%;\n background-color: white;\n transition: 0.3s;\n height: 28px;\n width: 28px;\n left: var(--sizes-xs);\n bottom: var(--sizes-xs);\n }\n\n .small &::after {\n height: 22px;\n width: 22px;\n left: 3px;\n bottom: 3px;\n }\n\n .disabled &::after {\n background-color: white;\n }\n\n .disabled.switched &::after {\n background-color: var(--colors-secondary-blue-lightest);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Toggle.module.scss.js","sources":["../../../src/components/Toggle/Toggle.module.scss"],"sourcesContent":[".wrapper {\n display: inline-block;\n user-select: none;\n}\n\n.switch {\n display: flex;\n position: relative;\n height: 36px;\n width: 72px;\n z-index: 1;\n\n &.small {\n height: 28px;\n width: 56px;\n }\n}\n\n.input {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: var(--radius-base);\n z-index: 2;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus-visible + .slider {\n box-shadow: 0 0 0 4px var(--colors-brand-blue-light);\n }\n\n &:checked + .slider {\n background-color: var(--colors-secondary-blue-base);\n }\n\n &:disabled + .slider {\n background-color: var(--colors-neutral-grey-base);\n }\n\n &:checked:disabled + .slider {\n background-color: var(--colors-secondary-blue-light);\n }\n\n &:checked + .slider::after,\n &:checked + .slider svg {\n transform: translateX(36px);\n }\n\n .small &:checked + .slider::after,\n .small &:checked + .slider svg {\n transform: translateX(28px);\n }\n}\n\n.slider {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 18px;\n background-color: var(--colors-neutral-grey-dark);\n transition: 0.3s;\n\n &::after {\n content: '';\n position: absolute;\n border-radius: 50%;\n background-color: white;\n transition: 0.3s;\n height: 28px;\n width: 28px;\n left: var(--sizes-xs);\n bottom: var(--sizes-xs);\n }\n\n .small &::after {\n height: 22px;\n width: 22px;\n left: 3px;\n bottom: 3px;\n }\n\n .disabled &::after {\n background-color: white;\n }\n\n .disabled.switched &::after {\n background-color: var(--colors-secondary-blue-lightest);\n }\n}\n\n.choice {\n --choice-tooltip-icon-color: var(--colors-neutral-ink-base);\n --choice-hint-gap: var(--sizes-xs);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,qlEAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}
|