@veeqo/ui 15.15.1 → 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/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;;;;;"}
|
|
@@ -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;;;;"}
|