@salutejs/plasma-new-hope 0.78.0-canary.1176.8923666060.0 → 0.78.0-canary.1176.8938411285.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Checkbox/Checkbox.css +7 -7
- package/cjs/components/Checkbox/Checkbox.js +3 -1
- package/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.js +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/cjs/components/Checkbox/{Checkbox.styles_d1mumx.css → Checkbox.styles_1266095.css} +1 -1
- package/cjs/components/Checkbox/Checkbox.tokens.js +4 -1
- package/cjs/components/Checkbox/Checkbox.tokens.js.map +1 -1
- package/cjs/components/Radiobox/Radiobox.css +9 -9
- package/cjs/components/Radiobox/Radiobox.js +3 -1
- package/cjs/components/Radiobox/Radiobox.js.map +1 -1
- package/cjs/components/Radiobox/Radiobox.styles.js +1 -1
- package/cjs/components/Radiobox/Radiobox.styles.js.map +1 -1
- package/cjs/components/Radiobox/Radiobox.styles_1skfuon.css +2 -0
- package/cjs/components/Radiobox/Radiobox.tokens.js +3 -1
- package/cjs/components/Radiobox/Radiobox.tokens.js.map +1 -1
- package/cjs/index.css +9 -9
- package/es/components/Checkbox/Checkbox.css +7 -7
- package/es/components/Checkbox/Checkbox.js +3 -1
- package/es/components/Checkbox/Checkbox.js.map +1 -1
- package/es/components/Checkbox/Checkbox.styles.js +1 -1
- package/es/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/es/components/Checkbox/{Checkbox.styles_d1mumx.css → Checkbox.styles_1266095.css} +1 -1
- package/es/components/Checkbox/Checkbox.tokens.js +4 -1
- package/es/components/Checkbox/Checkbox.tokens.js.map +1 -1
- package/es/components/Radiobox/Radiobox.css +9 -9
- package/es/components/Radiobox/Radiobox.js +3 -1
- package/es/components/Radiobox/Radiobox.js.map +1 -1
- package/es/components/Radiobox/Radiobox.styles.js +1 -1
- package/es/components/Radiobox/Radiobox.styles.js.map +1 -1
- package/es/components/Radiobox/Radiobox.styles_1skfuon.css +2 -0
- package/es/components/Radiobox/Radiobox.tokens.js +3 -1
- package/es/components/Radiobox/Radiobox.tokens.js.map +1 -1
- package/es/index.css +9 -9
- package/package.json +2 -2
- package/styled-components/cjs/components/Checkbox/Checkbox.js +3 -1
- package/styled-components/cjs/components/Checkbox/Checkbox.styles.js +1 -1
- package/styled-components/cjs/components/Checkbox/Checkbox.tokens.js +4 -1
- package/styled-components/cjs/components/Radiobox/Radiobox.js +3 -1
- package/styled-components/cjs/components/Radiobox/Radiobox.styles.js +1 -1
- package/styled-components/cjs/components/Radiobox/Radiobox.tokens.js +3 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Radiobox/Radiobox.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Checkbox/Checkbox.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Radiobox/Radiobox.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Checkbox/Checkbox.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Radiobox/Radiobox.config.js +2 -2
- package/styled-components/es/components/Checkbox/Checkbox.js +3 -1
- package/styled-components/es/components/Checkbox/Checkbox.styles.js +1 -1
- package/styled-components/es/components/Checkbox/Checkbox.tokens.js +4 -1
- package/styled-components/es/components/Radiobox/Radiobox.js +3 -1
- package/styled-components/es/components/Radiobox/Radiobox.styles.js +1 -1
- package/styled-components/es/components/Radiobox/Radiobox.tokens.js +3 -1
- package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Radiobox/Radiobox.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Radiobox/Radiobox.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Checkbox/Checkbox.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Radiobox/Radiobox.config.js +2 -2
- package/types/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/types/components/Checkbox/Checkbox.styles.d.ts.map +1 -1
- package/types/components/Checkbox/Checkbox.tokens.d.ts +3 -0
- package/types/components/Checkbox/Checkbox.tokens.d.ts.map +1 -1
- package/types/components/Radiobox/Radiobox.d.ts.map +1 -1
- package/types/components/Radiobox/Radiobox.styles.d.ts.map +1 -1
- package/types/components/Radiobox/Radiobox.tokens.d.ts +2 -0
- package/types/components/Radiobox/Radiobox.tokens.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Checkbox/Checkbox.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Radiobox/Radiobox.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Checkbox/Checkbox.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Radiobox/Radiobox.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Checkbox/Checkbox.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Radiobox/Radiobox.config.d.ts.map +1 -1
- package/cjs/components/Radiobox/Radiobox.styles_155ubn2.css +0 -2
- package/es/components/Radiobox/Radiobox.styles_155ubn2.css +0 -2
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
|
|
5
5
|
.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059{position:relative;}.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:var(--plasma-checkbox-trigger-border-radius);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059.base_hr4zpz_focusVisible__d6390059:focus::before,.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem transparent;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added] + label .base_hr4zpz_checkboxTrigger__d6390059{border-color:transparent;position:relative;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added] + label .base_hr4zpz_checkboxTrigger__d6390059::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:var(--plasma-checkbox-trigger-border-radius);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added] + label .base_hr4zpz_checkboxTrigger__d6390059::before{box-shadow:0 0 0 0.125rem var(--plasma-checkbox-focus-color);}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added]:checked + label .base_hr4zpz_checkboxTrigger__d6390059,.base_hr4zpz_b1y5wkm1__d6390059 input[type='checkbox'][data-focus-visible-added]:indeterminate + label .base_hr4zpz_checkboxTrigger__d6390059{position:relative;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added]:checked + label .base_hr4zpz_checkboxTrigger__d6390059::before,.base_hr4zpz_b1y5wkm1__d6390059 input[type='checkbox'][data-focus-visible-added]:indeterminate + label .base_hr4zpz_checkboxTrigger__d6390059::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma-checkbox-trigger-border-radius) + 0.125rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added]:checked + label .base_hr4zpz_checkboxTrigger__d6390059::before,.base_hr4zpz_b1y5wkm1__d6390059 input[type='checkbox'][data-focus-visible-added]:indeterminate + label .base_hr4zpz_checkboxTrigger__d6390059::before{box-shadow:0 0 0 0.063rem var(--plasma-checkbox-focus-color);}
|
|
6
6
|
|
|
7
|
-
.
|
|
8
|
-
.
|
|
9
|
-
.
|
|
10
|
-
.
|
|
11
|
-
.
|
|
12
|
-
.
|
|
13
|
-
.
|
|
7
|
+
.Checkbox_styles_1266095_b1udywkg__e7223270{margin:var(--plasma-checkbox-margin);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;}.Checkbox_styles_1266095_b1udywkg__e7223270 .Checkbox_styles_1266095_singleLine__e7223270{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
8
|
+
.Checkbox_styles_1266095_s165w87d__e7223270{position:absolute;width:1px;height:1px;overflow:hidden;-webkit-clip:rect(0 0 0 0);clip:rect(0 0 0 0);}.Checkbox_styles_1266095_s165w87d__e7223270:focus{outline:0 none;}
|
|
9
|
+
.Checkbox_styles_1266095_sft3zxv__e7223270{margin:var(--plasma-checkbox-trigger-margin);width:var(--plasma-checkbox-trigger-size);height:var(--plasma-checkbox-trigger-size);border-radius:var(--plasma-checkbox-trigger-border-radius);position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:transparent;border:0.125rem solid var(--plasma-checkbox-trigger-border-color);box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}input:not(:indeterminate) + label .Checkbox_styles_1266095_sft3zxv__e7223270 div{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 0.15s ease-in-out;-webkit-transition:transform 0.15s ease-in-out;transition:transform 0.15s ease-in-out;}input:checked + label .Checkbox_styles_1266095_sft3zxv__e7223270 div{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
|
|
10
|
+
.Checkbox_styles_1266095_s1u3nd7e__e7223270{position:relative;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;cursor:inherit;}
|
|
11
|
+
.Checkbox_styles_1266095_shwv1in__e7223270{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:var(--plasma-checkbox-content-top-offset);margin-left:var(--plasma-checkbox-content-left-offset);}
|
|
12
|
+
.Checkbox_styles_1266095_s1my1ay__e7223270{font-family:var(--plasma-checkbox-label-font-family);font-size:var(--plasma-checkbox-label-font-size);font-style:var(--plasma-checkbox-label-font-style);font-weight:var(--plasma-checkbox-label-font-weight);-webkit-letter-spacing:var(--plasma-checkbox-label-letter-spacing);-moz-letter-spacing:var(--plasma-checkbox-label-letter-spacing);-ms-letter-spacing:var(--plasma-checkbox-label-letter-spacing);letter-spacing:var(--plasma-checkbox-label-letter-spacing);line-height:var(--plasma-checkbox-label-line-height);}
|
|
13
|
+
.Checkbox_styles_1266095_s14u8fnn__e7223270{margin-top:var(--plasma-checkbox-description-margin-top);color:var(--plasma-checkbox-description-color);font-family:var(--plasma-checkbox-description-font-family);font-size:var(--plasma-checkbox-description-font-size);font-style:var(--plasma-checkbox-description-font-style);font-weight:var(--plasma-checkbox-description-font-weight);-webkit-letter-spacing:var(--plasma-checkbox-description-letter-spacing);-moz-letter-spacing:var(--plasma-checkbox-description-letter-spacing);-ms-letter-spacing:var(--plasma-checkbox-description-letter-spacing);letter-spacing:var(--plasma-checkbox-description-letter-spacing);line-height:var(--plasma-checkbox-description-line-height);}.Checkbox_styles_1266095_s14u8fnn__e7223270.Checkbox_styles_1266095_onlyDescription__e7223270{margin-top:0;}
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var plasmaCore = require('@salutejs/plasma-core');
|
|
8
|
+
var index = require('../../utils/index.js');
|
|
8
9
|
var base$1 = require('./variations/_view/base.js');
|
|
9
10
|
var base = require('./variations/_size/base.js');
|
|
10
11
|
var base$2 = require('./variations/_disabled/base.js');
|
|
@@ -49,6 +50,7 @@ var checkboxRoot = function checkboxRoot(Root) {
|
|
|
49
50
|
var canFocused = focused ? 0 : -1;
|
|
50
51
|
var hasContent = label || description;
|
|
51
52
|
var singleLineClass = singleLine ? Checkbox_tokens.classes.singleLine : undefined;
|
|
53
|
+
var onlyDescriptionClass = !label && description ? Checkbox_tokens.classes.onlyDescription : undefined;
|
|
52
54
|
return /*#__PURE__*/React.createElement(Root, {
|
|
53
55
|
view: view,
|
|
54
56
|
size: size,
|
|
@@ -76,7 +78,7 @@ var checkboxRoot = function checkboxRoot(Root) {
|
|
|
76
78
|
id: uniqLabelId,
|
|
77
79
|
"aria-hidden": isLabelAriaHidden
|
|
78
80
|
}, label), description && /*#__PURE__*/React.createElement(Checkbox_styles.StyledDescription, {
|
|
79
|
-
className: singleLineClass,
|
|
81
|
+
className: index.cx(singleLineClass, onlyDescriptionClass),
|
|
80
82
|
id: uniqDescriptionId
|
|
81
83
|
}, description))));
|
|
82
84
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef } from 'react';\nimport { safeUseId, useForkRef, extractTextFrom } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../engines/types';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { Done, Indeterminate } from './IconsSvg';\nimport {\n StyledContent,\n StyledContentWrapper,\n StyledDescription,\n StyledInput,\n StyledLabel,\n StyledTrigger,\n base,\n} from './Checkbox.styles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport { classes } from './Checkbox.tokens';\n\nexport const checkboxRoot = (Root: RootProps<HTMLInputElement, CheckboxProps>) =>\n forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {\n const {\n size,\n view,\n focused,\n disabled,\n id,\n label,\n description,\n indeterminate,\n style,\n className,\n singleLine = false,\n 'aria-label': ariaLabelExternal,\n ...rest\n } = props;\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkRef = useForkRef(inputRef, ref);\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = Boolean(indeterminate);\n }\n }, [inputRef, indeterminate]);\n\n const uniqId = safeUseId();\n const uniqLabelId = `label-${uniqId}`;\n const uniqDescriptionId = `description-${uniqId}`;\n const checkboxId = id || `input-${uniqId}`;\n\n const ariaLabel = useMemo(() => ariaLabelExternal || extractTextFrom(label), [ariaLabelExternal, label]);\n const isLabelAriaHidden = typeof label === 'string';\n const canFocused = focused ? 0 : -1;\n const hasContent = label || description;\n const singleLineClass = singleLine ? classes.singleLine : undefined;\n\n return (\n <Root\n view={view}\n size={size}\n disabled={disabled}\n focused={focused}\n style={style}\n className={className}\n tabIndex={-1}\n >\n <StyledInput\n {...rest}\n id={checkboxId}\n ref={forkRef}\n type=\"checkbox\"\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={uniqDescriptionId}\n tabIndex={canFocused}\n />\n <StyledContentWrapper htmlFor={checkboxId}>\n <StyledTrigger className={classes.checkboxTrigger}>\n {indeterminate ? <Indeterminate /> : <Done />}\n </StyledTrigger>\n {hasContent && (\n <StyledContent className={singleLineClass}>\n {label && (\n <StyledLabel\n className={singleLineClass}\n id={uniqLabelId}\n aria-hidden={isLabelAriaHidden}\n >\n {label}\n </StyledLabel>\n )}\n {description && (\n <StyledDescription
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef } from 'react';\nimport { safeUseId, useForkRef, extractTextFrom } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../engines/types';\nimport { cx } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { Done, Indeterminate } from './IconsSvg';\nimport {\n StyledContent,\n StyledContentWrapper,\n StyledDescription,\n StyledInput,\n StyledLabel,\n StyledTrigger,\n base,\n} from './Checkbox.styles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport { classes } from './Checkbox.tokens';\n\nexport const checkboxRoot = (Root: RootProps<HTMLInputElement, CheckboxProps>) =>\n forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {\n const {\n size,\n view,\n focused,\n disabled,\n id,\n label,\n description,\n indeterminate,\n style,\n className,\n singleLine = false,\n 'aria-label': ariaLabelExternal,\n ...rest\n } = props;\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkRef = useForkRef(inputRef, ref);\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = Boolean(indeterminate);\n }\n }, [inputRef, indeterminate]);\n\n const uniqId = safeUseId();\n const uniqLabelId = `label-${uniqId}`;\n const uniqDescriptionId = `description-${uniqId}`;\n const checkboxId = id || `input-${uniqId}`;\n\n const ariaLabel = useMemo(() => ariaLabelExternal || extractTextFrom(label), [ariaLabelExternal, label]);\n const isLabelAriaHidden = typeof label === 'string';\n const canFocused = focused ? 0 : -1;\n const hasContent = label || description;\n const singleLineClass = singleLine ? classes.singleLine : undefined;\n const onlyDescriptionClass = !label && description ? classes.onlyDescription : undefined;\n\n return (\n <Root\n view={view}\n size={size}\n disabled={disabled}\n focused={focused}\n style={style}\n className={className}\n tabIndex={-1}\n >\n <StyledInput\n {...rest}\n id={checkboxId}\n ref={forkRef}\n type=\"checkbox\"\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={uniqDescriptionId}\n tabIndex={canFocused}\n />\n <StyledContentWrapper htmlFor={checkboxId}>\n <StyledTrigger className={classes.checkboxTrigger}>\n {indeterminate ? <Indeterminate /> : <Done />}\n </StyledTrigger>\n {hasContent && (\n <StyledContent className={singleLineClass}>\n {label && (\n <StyledLabel\n className={singleLineClass}\n id={uniqLabelId}\n aria-hidden={isLabelAriaHidden}\n >\n {label}\n </StyledLabel>\n )}\n {description && (\n <StyledDescription\n className={cx(singleLineClass, onlyDescriptionClass)}\n id={uniqDescriptionId}\n >\n {description}\n </StyledDescription>\n )}\n </StyledContent>\n )}\n </StyledContentWrapper>\n </Root>\n );\n });\n\nexport const checkboxConfig = {\n name: 'Checkbox',\n tag: 'div',\n layout: checkboxRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n },\n focused: {\n css: focusedCSS,\n },\n },\n defaults: {\n size: 'm',\n view: 'accent',\n },\n};\n"],"names":["checkboxRoot","Root","forwardRef","props","ref","size","view","focused","disabled","id","label","description","indeterminate","style","className","_props$singleLine","singleLine","ariaLabelExternal","rest","_objectWithoutProperties","_excluded","inputRef","useRef","forkRef","useForkRef","useEffect","current","Boolean","uniqId","safeUseId","uniqLabelId","concat","uniqDescriptionId","checkboxId","ariaLabel","useMemo","extractTextFrom","isLabelAriaHidden","canFocused","hasContent","singleLineClass","classes","undefined","onlyDescriptionClass","onlyDescription","React","createElement","tabIndex","StyledInput","_extends","type","StyledContentWrapper","htmlFor","StyledTrigger","checkboxTrigger","_Indeterminate","Indeterminate","_Done","Done","StyledContent","StyledLabel","StyledDescription","cx","checkboxConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","focusedCSS","defaults"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","sources":["../../../src/components/Checkbox/Checkbox.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyEllipsis, applyNoUserSelect } from '../../mixins';\n\nimport { classes, tokens } from './Checkbox.tokens';\n\nexport const base = css`\n margin: var(${tokens.margin});\n\n ${applyNoUserSelect()};\n\n position: relative;\n align-items: flex-start;\n display: flex;\n cursor: pointer;\n\n .${classes.singleLine} {\n ${applyEllipsis()};\n }\n`;\n\nexport const StyledInput = styled.input`\n position: absolute;\n\n &:focus {\n outline: 0 none;\n }\n\n /* Спрятать от IE */\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n`;\n\nexport const StyledTrigger = styled.div`\n margin: var(${tokens.triggerMargin});\n\n width: var(${tokens.triggerSize});\n height: var(${tokens.triggerSize});\n border-radius: var(${tokens.triggerBorderRadius});\n\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n\n background: transparent;\n border: 0.125rem solid var(${tokens.triggerBorderColor});\n box-sizing: border-box;\n\n flex-shrink: 0;\n flex-grow: 0;\n\n input:not(:indeterminate) + label & div {\n transform: scale(0);\n transition: transform 0.15s ease-in-out;\n }\n\n input:checked + label & div {\n transform: scale(1);\n }\n`;\n\nexport const StyledContentWrapper = styled.label`\n position: relative;\n align-items: flex-start;\n display: flex;\n width: 100%;\n cursor: inherit;\n`;\n\nexport const StyledContent = styled.div`\n display: flex;\n flex-direction: column;\n\n margin-top: var(${tokens.contentTopOffset});\n margin-left: var(${tokens.contentLeftOffset});\n`;\n\nexport const StyledLabel = styled.span`\n font-family: var(${tokens.labelFontFamily});\n font-size: var(${tokens.labelFontSize});\n font-style: var(${tokens.labelFontStyle});\n font-weight: var(${tokens.labelFontWeight});\n letter-spacing: var(${tokens.labelLetterSpacing});\n line-height: var(${tokens.labelLineHeight});\n`;\n\nexport const StyledDescription = styled.div`\n margin-top:
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","sources":["../../../src/components/Checkbox/Checkbox.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyEllipsis, applyNoUserSelect } from '../../mixins';\n\nimport { classes, tokens } from './Checkbox.tokens';\n\nexport const base = css`\n margin: var(${tokens.margin});\n\n ${applyNoUserSelect()};\n\n position: relative;\n align-items: flex-start;\n display: flex;\n cursor: pointer;\n\n .${classes.singleLine} {\n ${applyEllipsis()};\n }\n`;\n\nexport const StyledInput = styled.input`\n position: absolute;\n\n &:focus {\n outline: 0 none;\n }\n\n /* Спрятать от IE */\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n`;\n\nexport const StyledTrigger = styled.div`\n margin: var(${tokens.triggerMargin});\n\n width: var(${tokens.triggerSize});\n height: var(${tokens.triggerSize});\n border-radius: var(${tokens.triggerBorderRadius});\n\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n\n background: transparent;\n border: 0.125rem solid var(${tokens.triggerBorderColor});\n box-sizing: border-box;\n\n flex-shrink: 0;\n flex-grow: 0;\n\n input:not(:indeterminate) + label & div {\n transform: scale(0);\n transition: transform 0.15s ease-in-out;\n }\n\n input:checked + label & div {\n transform: scale(1);\n }\n`;\n\nexport const StyledContentWrapper = styled.label`\n position: relative;\n align-items: flex-start;\n display: flex;\n width: 100%;\n cursor: inherit;\n`;\n\nexport const StyledContent = styled.div`\n display: flex;\n flex-direction: column;\n\n margin-top: var(${tokens.contentTopOffset});\n margin-left: var(${tokens.contentLeftOffset});\n`;\n\nexport const StyledLabel = styled.span`\n font-family: var(${tokens.labelFontFamily});\n font-size: var(${tokens.labelFontSize});\n font-style: var(${tokens.labelFontStyle});\n font-weight: var(${tokens.labelFontWeight});\n letter-spacing: var(${tokens.labelLetterSpacing});\n line-height: var(${tokens.labelLineHeight});\n`;\n\nexport const StyledDescription = styled.div`\n margin-top: var(${tokens.descriptionMarginTop});\n color: var(${tokens.descriptionColor});\n\n font-family: var(${tokens.descriptionFontFamily});\n font-size: var(${tokens.descriptionFontSize});\n font-style: var(${tokens.descriptionFontStyle});\n font-weight: var(${tokens.descriptionFontWeight});\n letter-spacing: var(${tokens.descriptionLetterSpacing});\n line-height: var(${tokens.descriptionLineHeight});\n\n &.${classes.onlyDescription} {\n margin-top: 0;\n }\n`;\n"],"names":["base","StyledInput","styled","name","class","propsAsIs","StyledTrigger","StyledContentWrapper","StyledContent","StyledLabel","StyledDescription"],"mappings":";;;;;;AAOO,IAAMA,IAAI,GAahB,WAAA;AAEM,IAAMC,WAAW,gBAAGC,YAAM,CAAA,OAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAYhC,EAAA;AAEM,IAAMC,aAAa,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CA2BlC,EAAA;AAEM,IAAME,oBAAoB,gBAAGL,YAAM,CAAA,OAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAMzC,EAAA;AAEM,IAAMG,aAAa,gBAAGN,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAMlC,EAAA;AAEM,IAAMI,WAAW,gBAAGP,YAAM,CAAA,MAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAOhC,EAAA;AAEM,IAAMK,iBAAiB,gBAAGR,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CActC;;;;;;;;;;"}
|
|
@@ -4,4 +4,4 @@
|
|
|
4
4
|
.s1u3nd7e{position:relative;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;cursor:inherit;}
|
|
5
5
|
.shwv1in{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:var(--plasma-checkbox-content-top-offset);margin-left:var(--plasma-checkbox-content-left-offset);}
|
|
6
6
|
.s1my1ay{font-family:var(--plasma-checkbox-label-font-family);font-size:var(--plasma-checkbox-label-font-size);font-style:var(--plasma-checkbox-label-font-style);font-weight:var(--plasma-checkbox-label-font-weight);-webkit-letter-spacing:var(--plasma-checkbox-label-letter-spacing);-moz-letter-spacing:var(--plasma-checkbox-label-letter-spacing);-ms-letter-spacing:var(--plasma-checkbox-label-letter-spacing);letter-spacing:var(--plasma-checkbox-label-letter-spacing);line-height:var(--plasma-checkbox-label-line-height);}
|
|
7
|
-
.s14u8fnn{margin-top:
|
|
7
|
+
.s14u8fnn{margin-top:var(--plasma-checkbox-description-margin-top);color:var(--plasma-checkbox-description-color);font-family:var(--plasma-checkbox-description-font-family);font-size:var(--plasma-checkbox-description-font-size);font-style:var(--plasma-checkbox-description-font-style);font-weight:var(--plasma-checkbox-description-font-weight);-webkit-letter-spacing:var(--plasma-checkbox-description-letter-spacing);-moz-letter-spacing:var(--plasma-checkbox-description-letter-spacing);-ms-letter-spacing:var(--plasma-checkbox-description-letter-spacing);letter-spacing:var(--plasma-checkbox-description-letter-spacing);line-height:var(--plasma-checkbox-description-line-height);}.s14u8fnn.only-description{margin-top:0;}
|
|
@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var classes = {
|
|
6
6
|
singleLine: 'single-line',
|
|
7
|
-
checkboxTrigger: 'checkbox-trigger'
|
|
7
|
+
checkboxTrigger: 'checkbox-trigger',
|
|
8
|
+
onlyDescription: 'only-description'
|
|
8
9
|
};
|
|
9
10
|
var tokens = {
|
|
10
11
|
margin: '--plasma-checkbox-margin',
|
|
@@ -19,6 +20,8 @@ var tokens = {
|
|
|
19
20
|
labelFontWeight: '--plasma-checkbox-label-font-weight',
|
|
20
21
|
labelLetterSpacing: '--plasma-checkbox-label-letter-spacing',
|
|
21
22
|
labelLineHeight: '--plasma-checkbox-label-line-height',
|
|
23
|
+
descriptionMarginTop: '--plasma-checkbox-description-margin-top',
|
|
24
|
+
descriptionOnlyMarginTop: '--plasma-checkbox-description-only-margin-top',
|
|
22
25
|
descriptionFontFamily: '--plasma-checkbox-description-font-family',
|
|
23
26
|
descriptionFontSize: '--plasma-checkbox-description-font-size',
|
|
24
27
|
descriptionFontStyle: '--plasma-checkbox-description-font-style',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.tokens.js","sources":["../../../src/components/Checkbox/Checkbox.tokens.ts"],"sourcesContent":["export const classes = {\n singleLine: 'single-line',\n checkboxTrigger: 'checkbox-trigger',\n};\n\nexport const tokens = {\n margin: '--plasma-checkbox-margin',\n triggerMargin: '--plasma-checkbox-trigger-margin',\n triggerSize: '--plasma-checkbox-trigger-size',\n triggerBorderRadius: '--plasma-checkbox-trigger-border-radius',\n contentTopOffset: '--plasma-checkbox-content-top-offset',\n contentLeftOffset: '--plasma-checkbox-content-left-offset',\n labelFontFamily: '--plasma-checkbox-label-font-family',\n labelFontSize: '--plasma-checkbox-label-font-size',\n labelFontStyle: '--plasma-checkbox-label-font-style',\n labelFontWeight: '--plasma-checkbox-label-font-weight',\n labelLetterSpacing: '--plasma-checkbox-label-letter-spacing',\n labelLineHeight: '--plasma-checkbox-label-line-height',\n descriptionFontFamily: '--plasma-checkbox-description-font-family',\n descriptionFontSize: '--plasma-checkbox-description-font-size',\n descriptionFontStyle: '--plasma-checkbox-description-font-style',\n descriptionFontWeight: '--plasma-checkbox-description-font-weight',\n descriptionLetterSpacing: '--plasma-checkbox-description-letter-spacing',\n descriptionLineHeight: '--plasma-checkbox-description-line-height',\n\n fillColor: '--plasma-checkbox-fill-color',\n iconColor: '--plasma-checkbox-icon-color',\n descriptionColor: '--plasma-checkbox-description-color',\n triggerBorderColor: '--plasma-checkbox-trigger-border-color',\n\n focusColor: '--plasma-checkbox-focus-color',\n disabledOpacity: '--plasma-checkbox-disabled-opacity',\n};\n"],"names":["classes","singleLine","checkboxTrigger","tokens","margin","triggerMargin","triggerSize","triggerBorderRadius","contentTopOffset","contentLeftOffset","labelFontFamily","labelFontSize","labelFontStyle","labelFontWeight","labelLetterSpacing","labelLineHeight","descriptionFontFamily","descriptionFontSize","descriptionFontStyle","descriptionFontWeight","descriptionLetterSpacing","descriptionLineHeight","fillColor","iconColor","descriptionColor","triggerBorderColor","focusColor","disabledOpacity"],"mappings":";;;;AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,UAAU,EAAE,aAAa;AACzBC,EAAAA,eAAe,EAAE,kBAAA;AACrB,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,MAAM,EAAE,0BAA0B;AAClCC,EAAAA,aAAa,EAAE,kCAAkC;AACjDC,EAAAA,WAAW,EAAE,gCAAgC;AAC7CC,EAAAA,mBAAmB,EAAE,yCAAyC;AAC9DC,EAAAA,gBAAgB,EAAE,sCAAsC;AACxDC,EAAAA,iBAAiB,EAAE,uCAAuC;AAC1DC,EAAAA,eAAe,EAAE,qCAAqC;AACtDC,EAAAA,aAAa,EAAE,mCAAmC;AAClDC,EAAAA,cAAc,EAAE,oCAAoC;AACpDC,EAAAA,eAAe,EAAE,qCAAqC;AACtDC,EAAAA,kBAAkB,EAAE,wCAAwC;AAC5DC,EAAAA,eAAe,EAAE,qCAAqC;AACtDC,EAAAA,qBAAqB,EAAE,2CAA2C;AAClEC,EAAAA,mBAAmB,EAAE,yCAAyC;AAC9DC,EAAAA,oBAAoB,EAAE,0CAA0C;AAChEC,EAAAA,qBAAqB,EAAE,2CAA2C;AAClEC,EAAAA,wBAAwB,EAAE,8CAA8C;AACxEC,EAAAA,qBAAqB,EAAE,2CAA2C;AAElEC,EAAAA,SAAS,EAAE,8BAA8B;AACzCC,EAAAA,SAAS,EAAE,8BAA8B;AACzCC,EAAAA,gBAAgB,EAAE,qCAAqC;AACvDC,EAAAA,kBAAkB,EAAE,wCAAwC;AAE5DC,EAAAA,UAAU,EAAE,+BAA+B;AAC3CC,EAAAA,eAAe,EAAE,oCAAA;AACrB;;;;;"}
|
|
1
|
+
{"version":3,"file":"Checkbox.tokens.js","sources":["../../../src/components/Checkbox/Checkbox.tokens.ts"],"sourcesContent":["export const classes = {\n singleLine: 'single-line',\n checkboxTrigger: 'checkbox-trigger',\n onlyDescription: 'only-description',\n};\n\nexport const tokens = {\n margin: '--plasma-checkbox-margin',\n triggerMargin: '--plasma-checkbox-trigger-margin',\n triggerSize: '--plasma-checkbox-trigger-size',\n triggerBorderRadius: '--plasma-checkbox-trigger-border-radius',\n contentTopOffset: '--plasma-checkbox-content-top-offset',\n contentLeftOffset: '--plasma-checkbox-content-left-offset',\n labelFontFamily: '--plasma-checkbox-label-font-family',\n labelFontSize: '--plasma-checkbox-label-font-size',\n labelFontStyle: '--plasma-checkbox-label-font-style',\n labelFontWeight: '--plasma-checkbox-label-font-weight',\n labelLetterSpacing: '--plasma-checkbox-label-letter-spacing',\n labelLineHeight: '--plasma-checkbox-label-line-height',\n descriptionMarginTop: '--plasma-checkbox-description-margin-top',\n descriptionOnlyMarginTop: '--plasma-checkbox-description-only-margin-top',\n descriptionFontFamily: '--plasma-checkbox-description-font-family',\n descriptionFontSize: '--plasma-checkbox-description-font-size',\n descriptionFontStyle: '--plasma-checkbox-description-font-style',\n descriptionFontWeight: '--plasma-checkbox-description-font-weight',\n descriptionLetterSpacing: '--plasma-checkbox-description-letter-spacing',\n descriptionLineHeight: '--plasma-checkbox-description-line-height',\n\n fillColor: '--plasma-checkbox-fill-color',\n iconColor: '--plasma-checkbox-icon-color',\n descriptionColor: '--plasma-checkbox-description-color',\n triggerBorderColor: '--plasma-checkbox-trigger-border-color',\n\n focusColor: '--plasma-checkbox-focus-color',\n disabledOpacity: '--plasma-checkbox-disabled-opacity',\n};\n"],"names":["classes","singleLine","checkboxTrigger","onlyDescription","tokens","margin","triggerMargin","triggerSize","triggerBorderRadius","contentTopOffset","contentLeftOffset","labelFontFamily","labelFontSize","labelFontStyle","labelFontWeight","labelLetterSpacing","labelLineHeight","descriptionMarginTop","descriptionOnlyMarginTop","descriptionFontFamily","descriptionFontSize","descriptionFontStyle","descriptionFontWeight","descriptionLetterSpacing","descriptionLineHeight","fillColor","iconColor","descriptionColor","triggerBorderColor","focusColor","disabledOpacity"],"mappings":";;;;AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,UAAU,EAAE,aAAa;AACzBC,EAAAA,eAAe,EAAE,kBAAkB;AACnCC,EAAAA,eAAe,EAAE,kBAAA;AACrB,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,MAAM,EAAE,0BAA0B;AAClCC,EAAAA,aAAa,EAAE,kCAAkC;AACjDC,EAAAA,WAAW,EAAE,gCAAgC;AAC7CC,EAAAA,mBAAmB,EAAE,yCAAyC;AAC9DC,EAAAA,gBAAgB,EAAE,sCAAsC;AACxDC,EAAAA,iBAAiB,EAAE,uCAAuC;AAC1DC,EAAAA,eAAe,EAAE,qCAAqC;AACtDC,EAAAA,aAAa,EAAE,mCAAmC;AAClDC,EAAAA,cAAc,EAAE,oCAAoC;AACpDC,EAAAA,eAAe,EAAE,qCAAqC;AACtDC,EAAAA,kBAAkB,EAAE,wCAAwC;AAC5DC,EAAAA,eAAe,EAAE,qCAAqC;AACtDC,EAAAA,oBAAoB,EAAE,0CAA0C;AAChEC,EAAAA,wBAAwB,EAAE,+CAA+C;AACzEC,EAAAA,qBAAqB,EAAE,2CAA2C;AAClEC,EAAAA,mBAAmB,EAAE,yCAAyC;AAC9DC,EAAAA,oBAAoB,EAAE,0CAA0C;AAChEC,EAAAA,qBAAqB,EAAE,2CAA2C;AAClEC,EAAAA,wBAAwB,EAAE,8CAA8C;AACxEC,EAAAA,qBAAqB,EAAE,2CAA2C;AAElEC,EAAAA,SAAS,EAAE,8BAA8B;AACzCC,EAAAA,SAAS,EAAE,8BAA8B;AACzCC,EAAAA,gBAAgB,EAAE,qCAAqC;AACvDC,EAAAA,kBAAkB,EAAE,wCAAwC;AAE5DC,EAAAA,UAAU,EAAE,+BAA+B;AAC3CC,EAAAA,eAAe,EAAE,oCAAA;AACrB;;;;;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
.
|
|
2
|
-
.
|
|
3
|
-
.
|
|
4
|
-
.
|
|
5
|
-
.
|
|
6
|
-
.
|
|
7
|
-
.
|
|
1
|
+
.Checkbox_styles_1266095_b1udywkg__e7223270{margin:var(--plasma-checkbox-margin);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;}.Checkbox_styles_1266095_b1udywkg__e7223270 .Checkbox_styles_1266095_singleLine__e7223270{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
2
|
+
.Checkbox_styles_1266095_s165w87d__e7223270{position:absolute;width:1px;height:1px;overflow:hidden;-webkit-clip:rect(0 0 0 0);clip:rect(0 0 0 0);}.Checkbox_styles_1266095_s165w87d__e7223270:focus{outline:0 none;}
|
|
3
|
+
.Checkbox_styles_1266095_sft3zxv__e7223270{margin:var(--plasma-checkbox-trigger-margin);width:var(--plasma-checkbox-trigger-size);height:var(--plasma-checkbox-trigger-size);border-radius:var(--plasma-checkbox-trigger-border-radius);position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:transparent;border:0.125rem solid var(--plasma-checkbox-trigger-border-color);box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}input:not(:indeterminate) + label .Checkbox_styles_1266095_sft3zxv__e7223270 div{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 0.15s ease-in-out;-webkit-transition:transform 0.15s ease-in-out;transition:transform 0.15s ease-in-out;}input:checked + label .Checkbox_styles_1266095_sft3zxv__e7223270 div{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
|
|
4
|
+
.Checkbox_styles_1266095_s1u3nd7e__e7223270{position:relative;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;cursor:inherit;}
|
|
5
|
+
.Checkbox_styles_1266095_shwv1in__e7223270{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:var(--plasma-checkbox-content-top-offset);margin-left:var(--plasma-checkbox-content-left-offset);}
|
|
6
|
+
.Checkbox_styles_1266095_s1my1ay__e7223270{font-family:var(--plasma-checkbox-label-font-family);font-size:var(--plasma-checkbox-label-font-size);font-style:var(--plasma-checkbox-label-font-style);font-weight:var(--plasma-checkbox-label-font-weight);-webkit-letter-spacing:var(--plasma-checkbox-label-letter-spacing);-moz-letter-spacing:var(--plasma-checkbox-label-letter-spacing);-ms-letter-spacing:var(--plasma-checkbox-label-letter-spacing);letter-spacing:var(--plasma-checkbox-label-letter-spacing);line-height:var(--plasma-checkbox-label-line-height);}
|
|
7
|
+
.Checkbox_styles_1266095_s14u8fnn__e7223270{margin-top:var(--plasma-checkbox-description-margin-top);color:var(--plasma-checkbox-description-color);font-family:var(--plasma-checkbox-description-font-family);font-size:var(--plasma-checkbox-description-font-size);font-style:var(--plasma-checkbox-description-font-style);font-weight:var(--plasma-checkbox-description-font-weight);-webkit-letter-spacing:var(--plasma-checkbox-description-letter-spacing);-moz-letter-spacing:var(--plasma-checkbox-description-letter-spacing);-ms-letter-spacing:var(--plasma-checkbox-description-letter-spacing);letter-spacing:var(--plasma-checkbox-description-letter-spacing);line-height:var(--plasma-checkbox-description-line-height);}.Checkbox_styles_1266095_s14u8fnn__e7223270.Checkbox_styles_1266095_onlyDescription__e7223270{margin-top:0;}
|
|
8
8
|
|
|
9
9
|
.base_11n1fn3_b1yt66an__50fb7cfc input:checked + label .base_11n1fn3_radioboxTrigger__50fb7cfc{border:none;background:var(--plasma-radiobox-fill-color);border-color:var(--plasma-radiobox-fill-color);}
|
|
10
10
|
|
|
@@ -12,5 +12,5 @@
|
|
|
12
12
|
|
|
13
13
|
.base_1d7o4za_buxu4te__19288bae .base_1d7o4za_radioboxTrigger__19288bae{position:relative;}.base_1d7o4za_buxu4te__19288bae .base_1d7o4za_radioboxTrigger__19288bae::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:var(--plasma-radiobox-trigger-border-radius);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_1d7o4za_buxu4te__19288bae .base_1d7o4za_radioboxTrigger__19288bae.base_1d7o4za_focusVisible__19288bae:focus::before,.base_1d7o4za_buxu4te__19288bae .base_1d7o4za_radioboxTrigger__19288bae[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem transparent;}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added] + label .base_1d7o4za_radioboxTrigger__19288bae{border-color:transparent;position:relative;}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added] + label .base_1d7o4za_radioboxTrigger__19288bae::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:var(--plasma-radiobox-trigger-border-radius);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added] + label .base_1d7o4za_radioboxTrigger__19288bae::before{box-shadow:0 0 0 0.125rem var(--plasma-radiobox-focus-color);}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added]:checked + label .base_1d7o4za_radioboxTrigger__19288bae{position:relative;}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added]:checked + label .base_1d7o4za_radioboxTrigger__19288bae::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma-radiobox-trigger-border-radius) + 0.125rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added]:checked + label .base_1d7o4za_radioboxTrigger__19288bae::before{box-shadow:0 0 0 0.063rem var(--plasma-radiobox-focus-color);}
|
|
14
14
|
|
|
15
|
-
.
|
|
16
|
-
.
|
|
15
|
+
.Radiobox_styles_1skfuon_s14xglkp__585ca743{width:var(--plasma-radiobox-ellipse-size);height:var(--plasma-radiobox-ellipse-size);border-radius:var(--plasma-radiobox-ellipse-size);background-color:var(--plasma-radiobox-ellipse-color);-webkit-transition:-webkit-transform 0.3s ease-in-out;-webkit-transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);}input:checked + label .Radiobox_styles_1skfuon_s14xglkp__585ca743{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
|
|
16
|
+
.Radiobox_styles_1skfuon_bdte4ex__585ca743{--plasma-checkbox-label-font-family:var(--plasma-radiobox-label-font-family);--plasma-checkbox-label-font-size:var(--plasma-radiobox-label-font-size);--plasma-checkbox-label-font-style:var(--plasma-radiobox-label-font-style);--plasma-checkbox-label-font-weight:var(--plasma-radiobox-label-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-radiobox-label-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-radiobox-label-line-height);--plasma-checkbox-description-margin-top:var(--plasma-checkbox-description-margin-top);--plasma-checkbox-description-font-family:var(--plasma-radiobox-description-font-family);--plasma-checkbox-description-font-size:var(--plasma-radiobox-description-font-size);--plasma-checkbox-description-font-style:var(--plasma-radiobox-description-font-style);--plasma-checkbox-description-font-weight:var(--plasma-radiobox-description-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-radiobox-description-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-radiobox-description-line-height);--plasma-checkbox-fill-color:var(--plasma-radiobox-fill-color);--plasma-checkbox-description-color:var(--plasma-radiobox-description-color);--plasma-checkbox-trigger-border-color:var(--plasma-radiobox-trigger-border-color);--plasma-checkbox-content-top-offset:var(--plasma-radiobox-content-top-offset);--plasma-checkbox-content-left-offset:var(--plasma-radiobox-content-left-offset);--plasma-checkbox-trigger-size:var(--plasma-radiobox-trigger-size);--plasma-checkbox-trigger-border-radius:var(--plasma-radiobox-trigger-border-radius);--plasma-checkbox-trigger-margin:var(--plasma-radiobox-trigger-margin);margin:var(--plasma-radiobox-margin);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;}.Radiobox_styles_1skfuon_bdte4ex__585ca743 .Radiobox_styles_1skfuon_singleLine__585ca743{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
@@ -6,6 +6,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var plasmaCore = require('@salutejs/plasma-core');
|
|
8
8
|
var Checkbox_styles = require('../Checkbox/Checkbox.styles.js');
|
|
9
|
+
var index = require('../../utils/index.js');
|
|
9
10
|
var base$1 = require('./variations/_view/base.js');
|
|
10
11
|
var base = require('./variations/_size/base.js');
|
|
11
12
|
var base$2 = require('./variations/_disabled/base.js');
|
|
@@ -41,6 +42,7 @@ var radioboxRoot = function radioboxRoot(Root) {
|
|
|
41
42
|
var canFocused = focused ? 0 : -1;
|
|
42
43
|
var hasContent = label || description;
|
|
43
44
|
var singleLineClass = singleLine ? Radiobox_tokens.classes.singleLine : undefined;
|
|
45
|
+
var onlyDescriptionClass = !label && description ? Radiobox_tokens.classes.onlyDescription : undefined;
|
|
44
46
|
return /*#__PURE__*/React.createElement(Root, {
|
|
45
47
|
view: view,
|
|
46
48
|
size: size,
|
|
@@ -64,7 +66,7 @@ var radioboxRoot = function radioboxRoot(Root) {
|
|
|
64
66
|
}, _StyledEllipse || (_StyledEllipse = /*#__PURE__*/React.createElement(Radiobox_styles.StyledEllipse, null))), hasContent && /*#__PURE__*/React.createElement(Checkbox_styles.StyledContent, {
|
|
65
67
|
className: singleLineClass
|
|
66
68
|
}, label && /*#__PURE__*/React.createElement(Checkbox_styles.StyledLabel, {
|
|
67
|
-
className: singleLineClass,
|
|
69
|
+
className: index.cx(singleLineClass, onlyDescriptionClass),
|
|
68
70
|
id: uniqLabelId,
|
|
69
71
|
"aria-hidden": isLabelAriaHidden
|
|
70
72
|
}, label), description && /*#__PURE__*/React.createElement(Checkbox_styles.StyledDescription, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radiobox.js","sources":["../../../src/components/Radiobox/Radiobox.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { safeUseId, extractTextFrom } from '@salutejs/plasma-core';\nimport type { InputHTMLAttributes } from '@salutejs/plasma-core';\n\nimport type { Filter, RootProps } from '../../engines/types';\nimport {\n StyledContentWrapper,\n StyledDescription,\n StyledInput,\n StyledLabel,\n StyledContent,\n StyledTrigger,\n} from '../Checkbox/Checkbox.styles';\nimport { BaseboxProps } from '../Checkbox/Checkbox.types';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { StyledEllipse, base } from './Radiobox.styles';\nimport { classes } from './Radiobox.tokens';\n\ntype RadioboxProps = Filter<InputHTMLAttributes<HTMLInputElement>, 'size'> & Omit<BaseboxProps, 'indeterminate'>;\n\nexport const radioboxRoot = (Root: RootProps<HTMLInputElement, RadioboxProps>) =>\n forwardRef<HTMLInputElement, RadioboxProps>((props, ref) => {\n const {\n size,\n view,\n focused,\n disabled,\n id,\n label,\n description,\n style,\n className,\n singleLine = false,\n 'aria-label': ariaLabelExternal,\n ...rest\n } = props;\n\n const uniqId = safeUseId();\n const uniqLabelId = `label-${uniqId}`;\n const uniqDescriptionId = `description-${uniqId}`;\n const radioboxId = id || `input-${uniqId}`;\n\n const ariaLabel = useMemo(() => ariaLabelExternal || extractTextFrom(label), [ariaLabelExternal, label]);\n const isLabelAriaHidden = typeof label === 'string';\n const canFocused = focused ? 0 : -1;\n const hasContent = label || description;\n const singleLineClass = singleLine ? classes.singleLine : undefined;\n\n return (\n <Root\n view={view}\n size={size}\n disabled={disabled}\n focused={focused}\n style={style}\n className={className}\n tabIndex={-1}\n >\n <StyledInput\n {...rest}\n id={radioboxId}\n ref={ref}\n type=\"radio\"\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={uniqDescriptionId}\n tabIndex={canFocused}\n />\n <StyledContentWrapper htmlFor={radioboxId}>\n <StyledTrigger className={classes.radioboxTrigger}>\n <StyledEllipse />\n </StyledTrigger>\n {hasContent && (\n <StyledContent className={singleLineClass}>\n {label && (\n <StyledLabel\n className={singleLineClass}\n id={uniqLabelId}\n aria-hidden={isLabelAriaHidden}\n >\n {label}\n </StyledLabel>\n )}\n {description && (\n <StyledDescription className={singleLineClass} id={uniqDescriptionId}>\n {description}\n </StyledDescription>\n )}\n </StyledContent>\n )}\n </StyledContentWrapper>\n </Root>\n );\n });\n\nexport const radioboxConfig = {\n name: 'Radiobox',\n tag: 'div',\n layout: radioboxRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n },\n focused: {\n css: focusedCSS,\n },\n },\n defaults: {\n size: 'm',\n view: 'accent',\n },\n};\n"],"names":["radioboxRoot","Root","forwardRef","props","ref","size","view","focused","disabled","id","label","description","style","className","_props$singleLine","singleLine","ariaLabelExternal","rest","_objectWithoutProperties","_excluded","uniqId","safeUseId","uniqLabelId","concat","uniqDescriptionId","radioboxId","ariaLabel","useMemo","extractTextFrom","isLabelAriaHidden","canFocused","hasContent","singleLineClass","classes","undefined","React","createElement","tabIndex","StyledInput","_extends","type","StyledContentWrapper","htmlFor","StyledTrigger","radioboxTrigger","_StyledEllipse","StyledEllipse","StyledContent","StyledLabel","StyledDescription","radioboxConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","focusedCSS","defaults"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Radiobox.js","sources":["../../../src/components/Radiobox/Radiobox.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { safeUseId, extractTextFrom } from '@salutejs/plasma-core';\nimport type { InputHTMLAttributes } from '@salutejs/plasma-core';\n\nimport type { Filter, RootProps } from '../../engines/types';\nimport {\n StyledContentWrapper,\n StyledDescription,\n StyledInput,\n StyledLabel,\n StyledContent,\n StyledTrigger,\n} from '../Checkbox/Checkbox.styles';\nimport { BaseboxProps } from '../Checkbox/Checkbox.types';\nimport { cx } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { StyledEllipse, base } from './Radiobox.styles';\nimport { classes } from './Radiobox.tokens';\n\ntype RadioboxProps = Filter<InputHTMLAttributes<HTMLInputElement>, 'size'> & Omit<BaseboxProps, 'indeterminate'>;\n\nexport const radioboxRoot = (Root: RootProps<HTMLInputElement, RadioboxProps>) =>\n forwardRef<HTMLInputElement, RadioboxProps>((props, ref) => {\n const {\n size,\n view,\n focused,\n disabled,\n id,\n label,\n description,\n style,\n className,\n singleLine = false,\n 'aria-label': ariaLabelExternal,\n ...rest\n } = props;\n\n const uniqId = safeUseId();\n const uniqLabelId = `label-${uniqId}`;\n const uniqDescriptionId = `description-${uniqId}`;\n const radioboxId = id || `input-${uniqId}`;\n\n const ariaLabel = useMemo(() => ariaLabelExternal || extractTextFrom(label), [ariaLabelExternal, label]);\n const isLabelAriaHidden = typeof label === 'string';\n const canFocused = focused ? 0 : -1;\n const hasContent = label || description;\n const singleLineClass = singleLine ? classes.singleLine : undefined;\n const onlyDescriptionClass = !label && description ? classes.onlyDescription : undefined;\n\n return (\n <Root\n view={view}\n size={size}\n disabled={disabled}\n focused={focused}\n style={style}\n className={className}\n tabIndex={-1}\n >\n <StyledInput\n {...rest}\n id={radioboxId}\n ref={ref}\n type=\"radio\"\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={uniqDescriptionId}\n tabIndex={canFocused}\n />\n <StyledContentWrapper htmlFor={radioboxId}>\n <StyledTrigger className={classes.radioboxTrigger}>\n <StyledEllipse />\n </StyledTrigger>\n {hasContent && (\n <StyledContent className={singleLineClass}>\n {label && (\n <StyledLabel\n className={cx(singleLineClass, onlyDescriptionClass)}\n id={uniqLabelId}\n aria-hidden={isLabelAriaHidden}\n >\n {label}\n </StyledLabel>\n )}\n {description && (\n <StyledDescription className={singleLineClass} id={uniqDescriptionId}>\n {description}\n </StyledDescription>\n )}\n </StyledContent>\n )}\n </StyledContentWrapper>\n </Root>\n );\n });\n\nexport const radioboxConfig = {\n name: 'Radiobox',\n tag: 'div',\n layout: radioboxRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n },\n focused: {\n css: focusedCSS,\n },\n },\n defaults: {\n size: 'm',\n view: 'accent',\n },\n};\n"],"names":["radioboxRoot","Root","forwardRef","props","ref","size","view","focused","disabled","id","label","description","style","className","_props$singleLine","singleLine","ariaLabelExternal","rest","_objectWithoutProperties","_excluded","uniqId","safeUseId","uniqLabelId","concat","uniqDescriptionId","radioboxId","ariaLabel","useMemo","extractTextFrom","isLabelAriaHidden","canFocused","hasContent","singleLineClass","classes","undefined","onlyDescriptionClass","onlyDescription","React","createElement","tabIndex","StyledInput","_extends","type","StyledContentWrapper","htmlFor","StyledTrigger","radioboxTrigger","_StyledEllipse","StyledEllipse","StyledContent","StyledLabel","cx","StyledDescription","radioboxConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","focusedCSS","defaults"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radiobox.styles.js","sources":["../../../src/components/Radiobox/Radiobox.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\n\nimport { checkboxTokens } from '../Checkbox';\nimport { applyEllipsis, applyNoUserSelect } from '../../mixins';\n\nimport { classes, tokens } from './Radiobox.tokens';\n\n// NOTE: Необходимое переопределение токенов из компонента Checkbox т.к. используются его части\nconst mappingOverride = `\n ${checkboxTokens.labelFontFamily}: var(${tokens.labelFontFamily});\n ${checkboxTokens.labelFontSize}: var(${tokens.labelFontSize});\n ${checkboxTokens.labelFontStyle}: var(${tokens.labelFontStyle});\n ${checkboxTokens.labelFontWeight}: var(${tokens.labelFontWeight});\n ${checkboxTokens.labelLetterSpacing}: var(${tokens.labelLetterSpacing});\n ${checkboxTokens.labelLineHeight}: var(${tokens.labelLineHeight});\n ${checkboxTokens.descriptionFontFamily}: var(${tokens.descriptionFontFamily});\n ${checkboxTokens.descriptionFontSize}: var(${tokens.descriptionFontSize});\n ${checkboxTokens.descriptionFontStyle}: var(${tokens.descriptionFontStyle});\n ${checkboxTokens.descriptionFontWeight}: var(${tokens.descriptionFontWeight});\n ${checkboxTokens.descriptionLetterSpacing}: var(${tokens.descriptionLetterSpacing});\n ${checkboxTokens.descriptionLineHeight}: var(${tokens.descriptionLineHeight});\n\n ${checkboxTokens.fillColor}: var(${tokens.fillColor});\n ${checkboxTokens.descriptionColor}: var(${tokens.descriptionColor});\n ${checkboxTokens.triggerBorderColor}: var(${tokens.triggerBorderColor});\n\n ${checkboxTokens.contentTopOffset}: var(${tokens.contentTopOffset});\n ${checkboxTokens.contentLeftOffset}: var(${tokens.contentLeftOffset});\n ${checkboxTokens.triggerSize}: var(${tokens.triggerSize});\n ${checkboxTokens.triggerBorderRadius}: var(${tokens.triggerBorderRadius});\n ${checkboxTokens.triggerMargin}: var(${tokens.triggerMargin});\n`;\n\nexport const StyledEllipse = styled.div`\n width: var(${tokens.ellipseSize});\n height: var(${tokens.ellipseSize});\n border-radius: var(${tokens.ellipseSize});\n\n background-color: var(${tokens.ellipseColor});\n transition: transform 0.3s ease-in-out;\n transform: scale(0);\n\n input:checked + label & {\n transform: scale(1);\n }\n`;\n\nexport const base = css`\n ${mappingOverride};\n\n margin: var(${tokens.margin});\n\n ${applyNoUserSelect()};\n\n position: relative;\n align-items: flex-start;\n display: flex;\n cursor: pointer;\n\n .${classes.singleLine} {\n ${applyEllipsis()};\n }\n`;\n"],"names":["StyledEllipse","styled","name","class","propsAsIs","base"],"mappings":";;;;;;AAQA;;
|
|
1
|
+
{"version":3,"file":"Radiobox.styles.js","sources":["../../../src/components/Radiobox/Radiobox.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\n\nimport { checkboxTokens } from '../Checkbox';\nimport { applyEllipsis, applyNoUserSelect } from '../../mixins';\n\nimport { classes, tokens } from './Radiobox.tokens';\n\n// NOTE: Необходимое переопределение токенов из компонента Checkbox т.к. используются его части\nconst mappingOverride = `\n ${checkboxTokens.labelFontFamily}: var(${tokens.labelFontFamily});\n ${checkboxTokens.labelFontSize}: var(${tokens.labelFontSize});\n ${checkboxTokens.labelFontStyle}: var(${tokens.labelFontStyle});\n ${checkboxTokens.labelFontWeight}: var(${tokens.labelFontWeight});\n ${checkboxTokens.labelLetterSpacing}: var(${tokens.labelLetterSpacing});\n ${checkboxTokens.labelLineHeight}: var(${tokens.labelLineHeight});\n ${checkboxTokens.descriptionMarginTop}: var(${tokens.descriptionMarginTop});\n ${checkboxTokens.descriptionFontFamily}: var(${tokens.descriptionFontFamily});\n ${checkboxTokens.descriptionFontSize}: var(${tokens.descriptionFontSize});\n ${checkboxTokens.descriptionFontStyle}: var(${tokens.descriptionFontStyle});\n ${checkboxTokens.descriptionFontWeight}: var(${tokens.descriptionFontWeight});\n ${checkboxTokens.descriptionLetterSpacing}: var(${tokens.descriptionLetterSpacing});\n ${checkboxTokens.descriptionLineHeight}: var(${tokens.descriptionLineHeight});\n\n ${checkboxTokens.fillColor}: var(${tokens.fillColor});\n ${checkboxTokens.descriptionColor}: var(${tokens.descriptionColor});\n ${checkboxTokens.triggerBorderColor}: var(${tokens.triggerBorderColor});\n\n ${checkboxTokens.contentTopOffset}: var(${tokens.contentTopOffset});\n ${checkboxTokens.contentLeftOffset}: var(${tokens.contentLeftOffset});\n ${checkboxTokens.triggerSize}: var(${tokens.triggerSize});\n ${checkboxTokens.triggerBorderRadius}: var(${tokens.triggerBorderRadius});\n ${checkboxTokens.triggerMargin}: var(${tokens.triggerMargin});\n`;\n\nexport const StyledEllipse = styled.div`\n width: var(${tokens.ellipseSize});\n height: var(${tokens.ellipseSize});\n border-radius: var(${tokens.ellipseSize});\n\n background-color: var(${tokens.ellipseColor});\n transition: transform 0.3s ease-in-out;\n transform: scale(0);\n\n input:checked + label & {\n transform: scale(1);\n }\n`;\n\nexport const base = css`\n ${mappingOverride};\n\n margin: var(${tokens.margin});\n\n ${applyNoUserSelect()};\n\n position: relative;\n align-items: flex-start;\n display: flex;\n cursor: pointer;\n\n .${classes.singleLine} {\n ${applyEllipsis()};\n }\n`;\n"],"names":["StyledEllipse","styled","name","class","propsAsIs","base"],"mappings":";;;;;;AAQA;;AA2BO,IAAMA,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAYlC,EAAA;AAEM,IAAMC,IAAI,GAehB;;;;;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.s14xglkp{width:var(--plasma-radiobox-ellipse-size);height:var(--plasma-radiobox-ellipse-size);border-radius:var(--plasma-radiobox-ellipse-size);background-color:var(--plasma-radiobox-ellipse-color);-webkit-transition:-webkit-transform 0.3s ease-in-out;-webkit-transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);}input:checked + label .s14xglkp{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
|
|
2
|
+
.bdte4ex{--plasma-checkbox-label-font-family:var(--plasma-radiobox-label-font-family);--plasma-checkbox-label-font-size:var(--plasma-radiobox-label-font-size);--plasma-checkbox-label-font-style:var(--plasma-radiobox-label-font-style);--plasma-checkbox-label-font-weight:var(--plasma-radiobox-label-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-radiobox-label-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-radiobox-label-line-height);--plasma-checkbox-description-margin-top:var(--plasma-checkbox-description-margin-top);--plasma-checkbox-description-font-family:var(--plasma-radiobox-description-font-family);--plasma-checkbox-description-font-size:var(--plasma-radiobox-description-font-size);--plasma-checkbox-description-font-style:var(--plasma-radiobox-description-font-style);--plasma-checkbox-description-font-weight:var(--plasma-radiobox-description-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-radiobox-description-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-radiobox-description-line-height);--plasma-checkbox-fill-color:var(--plasma-radiobox-fill-color);--plasma-checkbox-description-color:var(--plasma-radiobox-description-color);--plasma-checkbox-trigger-border-color:var(--plasma-radiobox-trigger-border-color);--plasma-checkbox-content-top-offset:var(--plasma-radiobox-content-top-offset);--plasma-checkbox-content-left-offset:var(--plasma-radiobox-content-left-offset);--plasma-checkbox-trigger-size:var(--plasma-radiobox-trigger-size);--plasma-checkbox-trigger-border-radius:var(--plasma-radiobox-trigger-border-radius);--plasma-checkbox-trigger-margin:var(--plasma-radiobox-trigger-margin);margin:var(--plasma-radiobox-margin);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;}.bdte4ex .single-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var classes = {
|
|
6
6
|
singleLine: 'single-line',
|
|
7
|
-
radioboxTrigger: 'radiobox-trigger'
|
|
7
|
+
radioboxTrigger: 'radiobox-trigger',
|
|
8
|
+
onlyDescription: 'only-description'
|
|
8
9
|
};
|
|
9
10
|
var tokens = {
|
|
10
11
|
labelFontFamily: '--plasma-radiobox-label-font-family',
|
|
@@ -13,6 +14,7 @@ var tokens = {
|
|
|
13
14
|
labelFontWeight: '--plasma-radiobox-label-font-weight',
|
|
14
15
|
labelLetterSpacing: '--plasma-radiobox-label-letter-spacing',
|
|
15
16
|
labelLineHeight: '--plasma-radiobox-label-line-height',
|
|
17
|
+
descriptionMarginTop: '--plasma-checkbox-description-margin-top',
|
|
16
18
|
descriptionFontFamily: '--plasma-radiobox-description-font-family',
|
|
17
19
|
descriptionFontSize: '--plasma-radiobox-description-font-size',
|
|
18
20
|
descriptionFontStyle: '--plasma-radiobox-description-font-style',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radiobox.tokens.js","sources":["../../../src/components/Radiobox/Radiobox.tokens.ts"],"sourcesContent":["export const classes = {\n singleLine: 'single-line',\n radioboxTrigger: 'radiobox-trigger',\n};\n\nexport const tokens = {\n labelFontFamily: '--plasma-radiobox-label-font-family',\n labelFontSize: '--plasma-radiobox-label-font-size',\n labelFontStyle: '--plasma-radiobox-label-font-style',\n labelFontWeight: '--plasma-radiobox-label-font-weight',\n labelLetterSpacing: '--plasma-radiobox-label-letter-spacing',\n labelLineHeight: '--plasma-radiobox-label-line-height',\n descriptionFontFamily: '--plasma-radiobox-description-font-family',\n descriptionFontSize: '--plasma-radiobox-description-font-size',\n descriptionFontStyle: '--plasma-radiobox-description-font-style',\n descriptionFontWeight: '--plasma-radiobox-description-font-weight',\n descriptionLetterSpacing: '--plasma-radiobox-description-letter-spacing',\n descriptionLineHeight: '--plasma-radiobox-description-line-height',\n\n fillColor: '--plasma-radiobox-fill-color',\n descriptionColor: '--plasma-radiobox-description-color',\n triggerBorderColor: '--plasma-radiobox-trigger-border-color',\n\n contentTopOffset: '--plasma-radiobox-content-top-offset',\n contentLeftOffset: '--plasma-radiobox-content-left-offset',\n triggerSize: '--plasma-radiobox-trigger-size',\n triggerBorderRadius: '--plasma-radiobox-trigger-border-radius',\n triggerMargin: '--plasma-radiobox-trigger-margin',\n margin: '--plasma-radiobox-margin',\n\n ellipseSize: '--plasma-radiobox-ellipse-size',\n ellipseColor: '--plasma-radiobox-ellipse-color',\n\n disabledOpacity: '--plasma-radiobox-disabled-opacity',\n focusColor: '--plasma-radiobox-focus-color',\n};\n"],"names":["classes","singleLine","radioboxTrigger","tokens","labelFontFamily","labelFontSize","labelFontStyle","labelFontWeight","labelLetterSpacing","labelLineHeight","descriptionFontFamily","descriptionFontSize","descriptionFontStyle","descriptionFontWeight","descriptionLetterSpacing","descriptionLineHeight","fillColor","descriptionColor","triggerBorderColor","contentTopOffset","contentLeftOffset","triggerSize","triggerBorderRadius","triggerMargin","margin","ellipseSize","ellipseColor","disabledOpacity","focusColor"],"mappings":";;;;AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,UAAU,EAAE,aAAa;AACzBC,EAAAA,eAAe,EAAE,kBAAA;AACrB,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,eAAe,EAAE,qCAAqC;AACtDC,EAAAA,aAAa,EAAE,mCAAmC;AAClDC,EAAAA,cAAc,EAAE,oCAAoC;AACpDC,EAAAA,eAAe,EAAE,qCAAqC;AACtDC,EAAAA,kBAAkB,EAAE,wCAAwC;AAC5DC,EAAAA,eAAe,EAAE,qCAAqC;AACtDC,EAAAA,qBAAqB,EAAE,2CAA2C;AAClEC,EAAAA,mBAAmB,EAAE,yCAAyC;AAC9DC,EAAAA,oBAAoB,EAAE,0CAA0C;AAChEC,EAAAA,qBAAqB,EAAE,2CAA2C;AAClEC,EAAAA,wBAAwB,EAAE,8CAA8C;AACxEC,EAAAA,qBAAqB,EAAE,2CAA2C;AAElEC,EAAAA,SAAS,EAAE,8BAA8B;AACzCC,EAAAA,gBAAgB,EAAE,qCAAqC;AACvDC,EAAAA,kBAAkB,EAAE,wCAAwC;AAE5DC,EAAAA,gBAAgB,EAAE,sCAAsC;AACxDC,EAAAA,iBAAiB,EAAE,uCAAuC;AAC1DC,EAAAA,WAAW,EAAE,gCAAgC;AAC7CC,EAAAA,mBAAmB,EAAE,yCAAyC;AAC9DC,EAAAA,aAAa,EAAE,kCAAkC;AACjDC,EAAAA,MAAM,EAAE,0BAA0B;AAElCC,EAAAA,WAAW,EAAE,gCAAgC;AAC7CC,EAAAA,YAAY,EAAE,iCAAiC;AAE/CC,EAAAA,eAAe,EAAE,oCAAoC;AACrDC,EAAAA,UAAU,EAAE,+BAAA;AAChB;;;;;"}
|
|
1
|
+
{"version":3,"file":"Radiobox.tokens.js","sources":["../../../src/components/Radiobox/Radiobox.tokens.ts"],"sourcesContent":["export const classes = {\n singleLine: 'single-line',\n radioboxTrigger: 'radiobox-trigger',\n onlyDescription: 'only-description',\n};\n\nexport const tokens = {\n labelFontFamily: '--plasma-radiobox-label-font-family',\n labelFontSize: '--plasma-radiobox-label-font-size',\n labelFontStyle: '--plasma-radiobox-label-font-style',\n labelFontWeight: '--plasma-radiobox-label-font-weight',\n labelLetterSpacing: '--plasma-radiobox-label-letter-spacing',\n labelLineHeight: '--plasma-radiobox-label-line-height',\n descriptionMarginTop: '--plasma-checkbox-description-margin-top',\n descriptionFontFamily: '--plasma-radiobox-description-font-family',\n descriptionFontSize: '--plasma-radiobox-description-font-size',\n descriptionFontStyle: '--plasma-radiobox-description-font-style',\n descriptionFontWeight: '--plasma-radiobox-description-font-weight',\n descriptionLetterSpacing: '--plasma-radiobox-description-letter-spacing',\n descriptionLineHeight: '--plasma-radiobox-description-line-height',\n\n fillColor: '--plasma-radiobox-fill-color',\n descriptionColor: '--plasma-radiobox-description-color',\n triggerBorderColor: '--plasma-radiobox-trigger-border-color',\n\n contentTopOffset: '--plasma-radiobox-content-top-offset',\n contentLeftOffset: '--plasma-radiobox-content-left-offset',\n triggerSize: '--plasma-radiobox-trigger-size',\n triggerBorderRadius: '--plasma-radiobox-trigger-border-radius',\n triggerMargin: '--plasma-radiobox-trigger-margin',\n margin: '--plasma-radiobox-margin',\n\n ellipseSize: '--plasma-radiobox-ellipse-size',\n ellipseColor: '--plasma-radiobox-ellipse-color',\n\n disabledOpacity: '--plasma-radiobox-disabled-opacity',\n focusColor: '--plasma-radiobox-focus-color',\n};\n"],"names":["classes","singleLine","radioboxTrigger","onlyDescription","tokens","labelFontFamily","labelFontSize","labelFontStyle","labelFontWeight","labelLetterSpacing","labelLineHeight","descriptionMarginTop","descriptionFontFamily","descriptionFontSize","descriptionFontStyle","descriptionFontWeight","descriptionLetterSpacing","descriptionLineHeight","fillColor","descriptionColor","triggerBorderColor","contentTopOffset","contentLeftOffset","triggerSize","triggerBorderRadius","triggerMargin","margin","ellipseSize","ellipseColor","disabledOpacity","focusColor"],"mappings":";;;;AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,UAAU,EAAE,aAAa;AACzBC,EAAAA,eAAe,EAAE,kBAAkB;AACnCC,EAAAA,eAAe,EAAE,kBAAA;AACrB,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,eAAe,EAAE,qCAAqC;AACtDC,EAAAA,aAAa,EAAE,mCAAmC;AAClDC,EAAAA,cAAc,EAAE,oCAAoC;AACpDC,EAAAA,eAAe,EAAE,qCAAqC;AACtDC,EAAAA,kBAAkB,EAAE,wCAAwC;AAC5DC,EAAAA,eAAe,EAAE,qCAAqC;AACtDC,EAAAA,oBAAoB,EAAE,0CAA0C;AAChEC,EAAAA,qBAAqB,EAAE,2CAA2C;AAClEC,EAAAA,mBAAmB,EAAE,yCAAyC;AAC9DC,EAAAA,oBAAoB,EAAE,0CAA0C;AAChEC,EAAAA,qBAAqB,EAAE,2CAA2C;AAClEC,EAAAA,wBAAwB,EAAE,8CAA8C;AACxEC,EAAAA,qBAAqB,EAAE,2CAA2C;AAElEC,EAAAA,SAAS,EAAE,8BAA8B;AACzCC,EAAAA,gBAAgB,EAAE,qCAAqC;AACvDC,EAAAA,kBAAkB,EAAE,wCAAwC;AAE5DC,EAAAA,gBAAgB,EAAE,sCAAsC;AACxDC,EAAAA,iBAAiB,EAAE,uCAAuC;AAC1DC,EAAAA,WAAW,EAAE,gCAAgC;AAC7CC,EAAAA,mBAAmB,EAAE,yCAAyC;AAC9DC,EAAAA,aAAa,EAAE,kCAAkC;AACjDC,EAAAA,MAAM,EAAE,0BAA0B;AAElCC,EAAAA,WAAW,EAAE,gCAAgC;AAC7CC,EAAAA,YAAY,EAAE,iCAAiC;AAE/CC,EAAAA,eAAe,EAAE,oCAAoC;AACrDC,EAAAA,UAAU,EAAE,+BAAA;AAChB;;;;;"}
|
package/cjs/index.css
CHANGED
|
@@ -73,13 +73,13 @@
|
|
|
73
73
|
|
|
74
74
|
.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059{position:relative;}.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:var(--plasma-checkbox-trigger-border-radius);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059.base_hr4zpz_focusVisible__d6390059:focus::before,.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem transparent;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added] + label .base_hr4zpz_checkboxTrigger__d6390059{border-color:transparent;position:relative;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added] + label .base_hr4zpz_checkboxTrigger__d6390059::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:var(--plasma-checkbox-trigger-border-radius);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added] + label .base_hr4zpz_checkboxTrigger__d6390059::before{box-shadow:0 0 0 0.125rem var(--plasma-checkbox-focus-color);}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added]:checked + label .base_hr4zpz_checkboxTrigger__d6390059,.base_hr4zpz_b1y5wkm1__d6390059 input[type='checkbox'][data-focus-visible-added]:indeterminate + label .base_hr4zpz_checkboxTrigger__d6390059{position:relative;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added]:checked + label .base_hr4zpz_checkboxTrigger__d6390059::before,.base_hr4zpz_b1y5wkm1__d6390059 input[type='checkbox'][data-focus-visible-added]:indeterminate + label .base_hr4zpz_checkboxTrigger__d6390059::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma-checkbox-trigger-border-radius) + 0.125rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added]:checked + label .base_hr4zpz_checkboxTrigger__d6390059::before,.base_hr4zpz_b1y5wkm1__d6390059 input[type='checkbox'][data-focus-visible-added]:indeterminate + label .base_hr4zpz_checkboxTrigger__d6390059::before{box-shadow:0 0 0 0.063rem var(--plasma-checkbox-focus-color);}
|
|
75
75
|
|
|
76
|
-
.
|
|
77
|
-
.
|
|
78
|
-
.
|
|
79
|
-
.
|
|
80
|
-
.
|
|
81
|
-
.
|
|
82
|
-
.
|
|
76
|
+
.Checkbox_styles_1266095_b1udywkg__e7223270{margin:var(--plasma-checkbox-margin);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;}.Checkbox_styles_1266095_b1udywkg__e7223270 .Checkbox_styles_1266095_singleLine__e7223270{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
77
|
+
.Checkbox_styles_1266095_s165w87d__e7223270{position:absolute;width:1px;height:1px;overflow:hidden;-webkit-clip:rect(0 0 0 0);clip:rect(0 0 0 0);}.Checkbox_styles_1266095_s165w87d__e7223270:focus{outline:0 none;}
|
|
78
|
+
.Checkbox_styles_1266095_sft3zxv__e7223270{margin:var(--plasma-checkbox-trigger-margin);width:var(--plasma-checkbox-trigger-size);height:var(--plasma-checkbox-trigger-size);border-radius:var(--plasma-checkbox-trigger-border-radius);position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:transparent;border:0.125rem solid var(--plasma-checkbox-trigger-border-color);box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}input:not(:indeterminate) + label .Checkbox_styles_1266095_sft3zxv__e7223270 div{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 0.15s ease-in-out;-webkit-transition:transform 0.15s ease-in-out;transition:transform 0.15s ease-in-out;}input:checked + label .Checkbox_styles_1266095_sft3zxv__e7223270 div{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
|
|
79
|
+
.Checkbox_styles_1266095_s1u3nd7e__e7223270{position:relative;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;cursor:inherit;}
|
|
80
|
+
.Checkbox_styles_1266095_shwv1in__e7223270{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:var(--plasma-checkbox-content-top-offset);margin-left:var(--plasma-checkbox-content-left-offset);}
|
|
81
|
+
.Checkbox_styles_1266095_s1my1ay__e7223270{font-family:var(--plasma-checkbox-label-font-family);font-size:var(--plasma-checkbox-label-font-size);font-style:var(--plasma-checkbox-label-font-style);font-weight:var(--plasma-checkbox-label-font-weight);-webkit-letter-spacing:var(--plasma-checkbox-label-letter-spacing);-moz-letter-spacing:var(--plasma-checkbox-label-letter-spacing);-ms-letter-spacing:var(--plasma-checkbox-label-letter-spacing);letter-spacing:var(--plasma-checkbox-label-letter-spacing);line-height:var(--plasma-checkbox-label-line-height);}
|
|
82
|
+
.Checkbox_styles_1266095_s14u8fnn__e7223270{margin-top:var(--plasma-checkbox-description-margin-top);color:var(--plasma-checkbox-description-color);font-family:var(--plasma-checkbox-description-font-family);font-size:var(--plasma-checkbox-description-font-size);font-style:var(--plasma-checkbox-description-font-style);font-weight:var(--plasma-checkbox-description-font-weight);-webkit-letter-spacing:var(--plasma-checkbox-description-letter-spacing);-moz-letter-spacing:var(--plasma-checkbox-description-letter-spacing);-ms-letter-spacing:var(--plasma-checkbox-description-letter-spacing);letter-spacing:var(--plasma-checkbox-description-letter-spacing);line-height:var(--plasma-checkbox-description-line-height);}.Checkbox_styles_1266095_s14u8fnn__e7223270.Checkbox_styles_1266095_onlyDescription__e7223270{margin-top:0;}
|
|
83
83
|
|
|
84
84
|
.base_11n1fn3_b1yt66an__50fb7cfc input:checked + label .base_11n1fn3_radioboxTrigger__50fb7cfc{border:none;background:var(--plasma-radiobox-fill-color);border-color:var(--plasma-radiobox-fill-color);}
|
|
85
85
|
|
|
@@ -87,8 +87,8 @@
|
|
|
87
87
|
|
|
88
88
|
.base_1d7o4za_buxu4te__19288bae .base_1d7o4za_radioboxTrigger__19288bae{position:relative;}.base_1d7o4za_buxu4te__19288bae .base_1d7o4za_radioboxTrigger__19288bae::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:var(--plasma-radiobox-trigger-border-radius);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_1d7o4za_buxu4te__19288bae .base_1d7o4za_radioboxTrigger__19288bae.base_1d7o4za_focusVisible__19288bae:focus::before,.base_1d7o4za_buxu4te__19288bae .base_1d7o4za_radioboxTrigger__19288bae[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem transparent;}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added] + label .base_1d7o4za_radioboxTrigger__19288bae{border-color:transparent;position:relative;}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added] + label .base_1d7o4za_radioboxTrigger__19288bae::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:var(--plasma-radiobox-trigger-border-radius);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added] + label .base_1d7o4za_radioboxTrigger__19288bae::before{box-shadow:0 0 0 0.125rem var(--plasma-radiobox-focus-color);}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added]:checked + label .base_1d7o4za_radioboxTrigger__19288bae{position:relative;}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added]:checked + label .base_1d7o4za_radioboxTrigger__19288bae::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma-radiobox-trigger-border-radius) + 0.125rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added]:checked + label .base_1d7o4za_radioboxTrigger__19288bae::before{box-shadow:0 0 0 0.063rem var(--plasma-radiobox-focus-color);}
|
|
89
89
|
|
|
90
|
-
.
|
|
91
|
-
.
|
|
90
|
+
.Radiobox_styles_1skfuon_s14xglkp__585ca743{width:var(--plasma-radiobox-ellipse-size);height:var(--plasma-radiobox-ellipse-size);border-radius:var(--plasma-radiobox-ellipse-size);background-color:var(--plasma-radiobox-ellipse-color);-webkit-transition:-webkit-transform 0.3s ease-in-out;-webkit-transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);}input:checked + label .Radiobox_styles_1skfuon_s14xglkp__585ca743{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
|
|
91
|
+
.Radiobox_styles_1skfuon_bdte4ex__585ca743{--plasma-checkbox-label-font-family:var(--plasma-radiobox-label-font-family);--plasma-checkbox-label-font-size:var(--plasma-radiobox-label-font-size);--plasma-checkbox-label-font-style:var(--plasma-radiobox-label-font-style);--plasma-checkbox-label-font-weight:var(--plasma-radiobox-label-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-radiobox-label-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-radiobox-label-line-height);--plasma-checkbox-description-margin-top:var(--plasma-checkbox-description-margin-top);--plasma-checkbox-description-font-family:var(--plasma-radiobox-description-font-family);--plasma-checkbox-description-font-size:var(--plasma-radiobox-description-font-size);--plasma-checkbox-description-font-style:var(--plasma-radiobox-description-font-style);--plasma-checkbox-description-font-weight:var(--plasma-radiobox-description-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-radiobox-description-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-radiobox-description-line-height);--plasma-checkbox-fill-color:var(--plasma-radiobox-fill-color);--plasma-checkbox-description-color:var(--plasma-radiobox-description-color);--plasma-checkbox-trigger-border-color:var(--plasma-radiobox-trigger-border-color);--plasma-checkbox-content-top-offset:var(--plasma-radiobox-content-top-offset);--plasma-checkbox-content-left-offset:var(--plasma-radiobox-content-left-offset);--plasma-checkbox-trigger-size:var(--plasma-radiobox-trigger-size);--plasma-checkbox-trigger-border-radius:var(--plasma-radiobox-trigger-border-radius);--plasma-checkbox-trigger-margin:var(--plasma-radiobox-trigger-margin);margin:var(--plasma-radiobox-margin);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;}.Radiobox_styles_1skfuon_bdte4ex__585ca743 .Radiobox_styles_1skfuon_singleLine__585ca743{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
92
92
|
|
|
93
93
|
.Popover_styles_rmr9za_s1g1xbt5__0bafa6fb{display:inline-block;}
|
|
94
94
|
.Popover_styles_rmr9za_s12xwbyh__0bafa6fb{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;position:relative;}
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
|
|
5
5
|
.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059{position:relative;}.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:var(--plasma-checkbox-trigger-border-radius);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059.base_hr4zpz_focusVisible__d6390059:focus::before,.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem transparent;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added] + label .base_hr4zpz_checkboxTrigger__d6390059{border-color:transparent;position:relative;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added] + label .base_hr4zpz_checkboxTrigger__d6390059::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:var(--plasma-checkbox-trigger-border-radius);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added] + label .base_hr4zpz_checkboxTrigger__d6390059::before{box-shadow:0 0 0 0.125rem var(--plasma-checkbox-focus-color);}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added]:checked + label .base_hr4zpz_checkboxTrigger__d6390059,.base_hr4zpz_b1y5wkm1__d6390059 input[type='checkbox'][data-focus-visible-added]:indeterminate + label .base_hr4zpz_checkboxTrigger__d6390059{position:relative;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added]:checked + label .base_hr4zpz_checkboxTrigger__d6390059::before,.base_hr4zpz_b1y5wkm1__d6390059 input[type='checkbox'][data-focus-visible-added]:indeterminate + label .base_hr4zpz_checkboxTrigger__d6390059::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma-checkbox-trigger-border-radius) + 0.125rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added]:checked + label .base_hr4zpz_checkboxTrigger__d6390059::before,.base_hr4zpz_b1y5wkm1__d6390059 input[type='checkbox'][data-focus-visible-added]:indeterminate + label .base_hr4zpz_checkboxTrigger__d6390059::before{box-shadow:0 0 0 0.063rem var(--plasma-checkbox-focus-color);}
|
|
6
6
|
|
|
7
|
-
.
|
|
8
|
-
.
|
|
9
|
-
.
|
|
10
|
-
.
|
|
11
|
-
.
|
|
12
|
-
.
|
|
13
|
-
.
|
|
7
|
+
.Checkbox_styles_1266095_b1udywkg__e7223270{margin:var(--plasma-checkbox-margin);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;}.Checkbox_styles_1266095_b1udywkg__e7223270 .Checkbox_styles_1266095_singleLine__e7223270{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
8
|
+
.Checkbox_styles_1266095_s165w87d__e7223270{position:absolute;width:1px;height:1px;overflow:hidden;-webkit-clip:rect(0 0 0 0);clip:rect(0 0 0 0);}.Checkbox_styles_1266095_s165w87d__e7223270:focus{outline:0 none;}
|
|
9
|
+
.Checkbox_styles_1266095_sft3zxv__e7223270{margin:var(--plasma-checkbox-trigger-margin);width:var(--plasma-checkbox-trigger-size);height:var(--plasma-checkbox-trigger-size);border-radius:var(--plasma-checkbox-trigger-border-radius);position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:transparent;border:0.125rem solid var(--plasma-checkbox-trigger-border-color);box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}input:not(:indeterminate) + label .Checkbox_styles_1266095_sft3zxv__e7223270 div{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 0.15s ease-in-out;-webkit-transition:transform 0.15s ease-in-out;transition:transform 0.15s ease-in-out;}input:checked + label .Checkbox_styles_1266095_sft3zxv__e7223270 div{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
|
|
10
|
+
.Checkbox_styles_1266095_s1u3nd7e__e7223270{position:relative;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;cursor:inherit;}
|
|
11
|
+
.Checkbox_styles_1266095_shwv1in__e7223270{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:var(--plasma-checkbox-content-top-offset);margin-left:var(--plasma-checkbox-content-left-offset);}
|
|
12
|
+
.Checkbox_styles_1266095_s1my1ay__e7223270{font-family:var(--plasma-checkbox-label-font-family);font-size:var(--plasma-checkbox-label-font-size);font-style:var(--plasma-checkbox-label-font-style);font-weight:var(--plasma-checkbox-label-font-weight);-webkit-letter-spacing:var(--plasma-checkbox-label-letter-spacing);-moz-letter-spacing:var(--plasma-checkbox-label-letter-spacing);-ms-letter-spacing:var(--plasma-checkbox-label-letter-spacing);letter-spacing:var(--plasma-checkbox-label-letter-spacing);line-height:var(--plasma-checkbox-label-line-height);}
|
|
13
|
+
.Checkbox_styles_1266095_s14u8fnn__e7223270{margin-top:var(--plasma-checkbox-description-margin-top);color:var(--plasma-checkbox-description-color);font-family:var(--plasma-checkbox-description-font-family);font-size:var(--plasma-checkbox-description-font-size);font-style:var(--plasma-checkbox-description-font-style);font-weight:var(--plasma-checkbox-description-font-weight);-webkit-letter-spacing:var(--plasma-checkbox-description-letter-spacing);-moz-letter-spacing:var(--plasma-checkbox-description-letter-spacing);-ms-letter-spacing:var(--plasma-checkbox-description-letter-spacing);letter-spacing:var(--plasma-checkbox-description-letter-spacing);line-height:var(--plasma-checkbox-description-line-height);}.Checkbox_styles_1266095_s14u8fnn__e7223270.Checkbox_styles_1266095_onlyDescription__e7223270{margin-top:0;}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
2
|
import React, { forwardRef, useRef, useEffect, useMemo } from 'react';
|
|
3
3
|
import { useForkRef, safeUseId, extractTextFrom } from '@salutejs/plasma-core';
|
|
4
|
+
import { cx } from '../../utils/index.js';
|
|
4
5
|
import { base as base$2 } from './variations/_view/base.js';
|
|
5
6
|
import { base as base$1 } from './variations/_size/base.js';
|
|
6
7
|
import { base as base$3 } from './variations/_disabled/base.js';
|
|
@@ -45,6 +46,7 @@ var checkboxRoot = function checkboxRoot(Root) {
|
|
|
45
46
|
var canFocused = focused ? 0 : -1;
|
|
46
47
|
var hasContent = label || description;
|
|
47
48
|
var singleLineClass = singleLine ? classes.singleLine : undefined;
|
|
49
|
+
var onlyDescriptionClass = !label && description ? classes.onlyDescription : undefined;
|
|
48
50
|
return /*#__PURE__*/React.createElement(Root, {
|
|
49
51
|
view: view,
|
|
50
52
|
size: size,
|
|
@@ -72,7 +74,7 @@ var checkboxRoot = function checkboxRoot(Root) {
|
|
|
72
74
|
id: uniqLabelId,
|
|
73
75
|
"aria-hidden": isLabelAriaHidden
|
|
74
76
|
}, label), description && /*#__PURE__*/React.createElement(StyledDescription, {
|
|
75
|
-
className: singleLineClass,
|
|
77
|
+
className: cx(singleLineClass, onlyDescriptionClass),
|
|
76
78
|
id: uniqDescriptionId
|
|
77
79
|
}, description))));
|
|
78
80
|
});
|