@salutejs/sdds-cs 0.316.1-canary.1986.15225454757.0 → 0.316.1-canary.1987.15271848472.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Calendar/CalendarBase.config.js +1 -1
- package/components/Calendar/CalendarDouble.config.js +1 -1
- package/components/Combobox/Combobox.config.js +3 -3
- package/components/Combobox/Combobox.d.ts +0 -24
- package/components/DatePicker/DatePicker.config.js +1 -1
- package/components/Select/Select.config.js +3 -3
- package/components/Select/Select.d.ts +0 -3
- package/emotion/cjs/components/Calendar/Calendar.stories.tsx +40 -32
- package/emotion/cjs/components/Calendar/CalendarBase.config.js +1 -1
- package/emotion/cjs/components/Calendar/CalendarDouble.config.js +1 -1
- package/emotion/cjs/components/Combobox/Combobox.config.js +3 -3
- package/emotion/cjs/components/Combobox/Combobox.stories.tsx +3 -17
- package/emotion/cjs/components/DatePicker/DatePicker.config.js +1 -1
- package/emotion/cjs/components/DatePicker/DatePicker.stories.tsx +6 -0
- package/emotion/cjs/components/Select/Select.config.js +3 -3
- package/emotion/cjs/components/Select/Select.stories.tsx +2 -21
- package/emotion/es/components/Calendar/Calendar.stories.tsx +40 -32
- package/emotion/es/components/Calendar/CalendarBase.config.js +1 -1
- package/emotion/es/components/Calendar/CalendarDouble.config.js +1 -1
- package/emotion/es/components/Combobox/Combobox.config.js +3 -3
- package/emotion/es/components/Combobox/Combobox.stories.tsx +3 -17
- package/emotion/es/components/DatePicker/DatePicker.config.js +1 -1
- package/emotion/es/components/DatePicker/DatePicker.stories.tsx +6 -0
- package/emotion/es/components/Select/Select.config.js +3 -3
- package/emotion/es/components/Select/Select.stories.tsx +2 -21
- package/es/components/Calendar/CalendarBase.config.js +1 -1
- package/es/components/Calendar/CalendarDouble.config.js +1 -1
- package/es/components/Combobox/Combobox.config.js +3 -3
- package/es/components/DatePicker/DatePicker.config.js +1 -1
- package/es/components/Select/Select.config.js +3 -3
- package/package.json +4 -4
|
@@ -17,11 +17,11 @@ var config = exports.config = {
|
|
|
17
17
|
},
|
|
18
18
|
variations: {
|
|
19
19
|
view: {
|
|
20
|
-
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n ", ": var(--text-primary);\n ", ": var(--text-primary-hover);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-solid-primary);\n ", ": var(--surface-solid-primary-hover);\n ", ": var(--surface-solid-primary-active);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n
|
|
21
|
-
negative: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-negative);\n ", ": var(--text-secondary);\n ", ": var(--outline-negative);\n ", ": var(--outline-negative-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n ", ": var(--text-primary);\n ", ": var(--text-primary-hover);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-solid-primary);\n ", ": var(--surface-solid-primary-hover);\n ", ": var(--surface-solid-primary-active);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n
|
|
20
|
+
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n ", ": var(--text-primary);\n ", ": var(--text-primary-hover);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-solid-primary);\n ", ": var(--surface-solid-primary-hover);\n ", ": var(--surface-solid-primary-active);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n ", ": 1;\n ", ": var(--text-secondary);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--text-primary);\n "])), _emotion.selectTokens.textFieldColor, _emotion.selectTokens.textFieldPlaceholderColor, _emotion.selectTokens.textFieldBackgroundColor, _emotion.selectTokens.textFieldBackgroundColorFocus, _emotion.selectTokens.textFieldLabelColor, _emotion.selectTokens.textFieldLeftHelperColor, _emotion.selectTokens.textFieldContentSlotColor, _emotion.selectTokens.textFieldBorderColor, _emotion.selectTokens.textFieldBorderColorHover, _emotion.selectTokens.textFieldBorderColorFocus, _plasmaNewHope.selectTokens.textFieldIndicatorColor, _plasmaNewHope.selectTokens.textFieldOptionalColor, _emotion.selectTokens.buttonColor, _emotion.selectTokens.buttonColorHover, _emotion.selectTokens.buttonColorActive, _emotion.selectTokens.buttonArrowColor, _emotion.selectTokens.buttonArrowColorHover, _emotion.selectTokens.buttonArrowColorActive, _emotion.selectTokens.buttonBackgroundColor, _emotion.selectTokens.buttonBackgroundColorHover, _emotion.selectTokens.buttonBackgroundColorActive, _emotion.selectTokens.disclosureIconColor, _emotion.selectTokens.disclosureIconColorHover, _emotion.selectTokens.itemBackgroundHover, _emotion.selectTokens.itemDisabledOpacity, _emotion.selectTokens.itemDisabledColor, _emotion.selectTokens.dropdownBorderColor, _emotion.selectTokens.checkboxIconColor),
|
|
21
|
+
negative: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-negative);\n ", ": var(--text-secondary);\n ", ": var(--outline-negative);\n ", ": var(--outline-negative-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n ", ": var(--text-primary);\n ", ": var(--text-primary-hover);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-solid-primary);\n ", ": var(--surface-solid-primary-hover);\n ", ": var(--surface-solid-primary-active);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n ", ": 1;\n ", ": var(--text-secondary);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--text-accent);\n "])), _emotion.selectTokens.textFieldColor, _emotion.selectTokens.textFieldPlaceholderColor, _emotion.selectTokens.textFieldBackgroundColor, _emotion.selectTokens.textFieldBackgroundColorFocus, _emotion.selectTokens.textFieldLabelColor, _emotion.selectTokens.textFieldLeftHelperColor, _emotion.selectTokens.textFieldContentSlotColor, _emotion.selectTokens.textFieldBorderColor, _emotion.selectTokens.textFieldBorderColorHover, _emotion.selectTokens.textFieldBorderColorFocus, _plasmaNewHope.selectTokens.textFieldIndicatorColor, _plasmaNewHope.selectTokens.textFieldOptionalColor, _emotion.selectTokens.buttonColor, _emotion.selectTokens.buttonColorHover, _emotion.selectTokens.buttonColorActive, _emotion.selectTokens.buttonArrowColor, _emotion.selectTokens.buttonArrowColorHover, _emotion.selectTokens.buttonArrowColorActive, _emotion.selectTokens.buttonBackgroundColor, _emotion.selectTokens.buttonBackgroundColorHover, _emotion.selectTokens.buttonBackgroundColorActive, _emotion.selectTokens.disclosureIconColor, _emotion.selectTokens.disclosureIconColorHover, _emotion.selectTokens.itemBackgroundHover, _emotion.selectTokens.itemDisabledOpacity, _emotion.selectTokens.itemDisabledColor, _emotion.selectTokens.dropdownBorderColor, _emotion.selectTokens.checkboxIconColor)
|
|
22
22
|
},
|
|
23
23
|
size: {
|
|
24
|
-
s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.875rem 0.6875rem 0.875rem;\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n\n ", ": -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 0.5rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.25rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.3125rem 0 0 0;\n ", ": 1.0625rem 0 0.3125rem 0;\n\n ", ": 0.375rem;\n ", ": 0.375rem;\n ", ": 0 0 0 0;\n ", ": 0.3125rem auto auto -0.6875rem;\n ", ": 0 0 auto auto;\n ", ": 0.25rem -0.625rem auto auto;\n ", ": 1.063rem auto auto -0.75rem;\n ", ": 1.063rem -0.75rem auto auto;\n ", ": 1.063rem -2.125rem auto auto;\n\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": auto;\n ", ": 1.75rem;\n ", ": 0 0.5rem 0 0.75rem;\n ", ": 0.375rem;\n ", ": 0rem;\n ", ": 1rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0 -0.125rem 0 0.25rem;\n ", ": 2.5rem;\n ", ": 1rem 0 1rem;\n\n ", ": 0.125rem;\n ", ": 0.75rem;\n\n ", ": 0.125rem;\n\n ", ": 1.5rem;\n ", ": 0.5rem 0.75rem;\n ", ": 0.25rem 0.75rem;\n ", ": 0.5rem;\n ", ": 1.5rem;\n ", ": 1rem;\n ", ": 0 0.375rem 0 0;\n\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0.125rem;\n ", ": 0.375rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 1.25rem;\n ", ": 0.875rem;\n ", ": 0.375rem;\n ", ": 0.25rem;\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--outline-accent);\n ", ": transparent;\n ", ": 0.125rem;\n\n ", ": 0.375rem;\n\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.25rem;\n ", ": 0.25rem;\n "])), _plasmaNewHope.selectTokens.textFieldHeight, _plasmaNewHope.selectTokens.textFieldPadding, _plasmaNewHope.selectTokens.textFieldPaddingWithChips, _plasmaNewHope.selectTokens.textFieldBorderRadius, _plasmaNewHope.selectTokens.textFieldBorderWidth, _plasmaNewHope.selectTokens.textFieldLeftContentMargin, _plasmaNewHope.selectTokens.textFieldRightContentMargin, _plasmaNewHope.selectTokens.textFieldTextBeforeMargin, _plasmaNewHope.selectTokens.textFieldTextAfterMargin, _plasmaNewHope.selectTokens.textFieldFontFamily, _plasmaNewHope.selectTokens.textFieldFontSize, _plasmaNewHope.selectTokens.textFieldFontStyle, _plasmaNewHope.selectTokens.textFieldFontWeight, _plasmaNewHope.selectTokens.textFieldLetterSpacing, _plasmaNewHope.selectTokens.textFieldLineHeight, _plasmaNewHope.selectTokens.textFieldLabelOffset, _plasmaNewHope.selectTokens.textFieldLabelFontFamily, _plasmaNewHope.selectTokens.textFieldLabelFontSize, _plasmaNewHope.selectTokens.textFieldLabelFontStyle, _plasmaNewHope.selectTokens.textFieldLabelFontWeight, _plasmaNewHope.selectTokens.textFieldLabelLetterSpacing, _plasmaNewHope.selectTokens.textFieldLabelLineHeight, _plasmaNewHope.selectTokens.textFieldLeftHelperOffset, _plasmaNewHope.selectTokens.textFieldLeftHelperFontFamily, _plasmaNewHope.selectTokens.textFieldLeftHelperFontSize, _plasmaNewHope.selectTokens.textFieldLeftHelperFontStyle, _plasmaNewHope.selectTokens.textFieldLeftHelperFontWeight, _plasmaNewHope.selectTokens.textFieldLeftHelperLetterSpacing, _plasmaNewHope.selectTokens.textFieldLeftHelperLineHeight, _plasmaNewHope.selectTokens.textFieldLabelInnerPadding, _plasmaNewHope.selectTokens.textFieldContentLabelInnerPadding, _plasmaNewHope.selectTokens.textFieldIndicatorSizeInner, _plasmaNewHope.selectTokens.textFieldIndicatorSizeOuter, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementInner, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementOuter, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementInnerRight, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementOuterRight, _plasmaNewHope.selectTokens.textFieldClearIndicatorLabelPlacementInner, _plasmaNewHope.selectTokens.textFieldClearIndicatorLabelPlacementInnerRight, _plasmaNewHope.selectTokens.textFieldClearIndicatorHintInnerRight, _plasmaNewHope.selectTokens.textFieldChipGap, _plasmaNewHope.selectTokens.textFieldChipBorderRadius, _plasmaNewHope.selectTokens.textFieldChipWidth, _plasmaNewHope.selectTokens.textFieldChipHeight, _plasmaNewHope.selectTokens.textFieldChipPadding, _plasmaNewHope.selectTokens.textFieldChipClearContentMarginLeft, _plasmaNewHope.selectTokens.textFieldChipClearContentMarginRight, _plasmaNewHope.selectTokens.textFieldChipCloseIconSize, _plasmaNewHope.selectTokens.textFieldChipFontFamily, _plasmaNewHope.selectTokens.textFieldChipFontSize, _plasmaNewHope.selectTokens.textFieldChipFontStyle, _plasmaNewHope.selectTokens.textFieldChipFontWeight, _plasmaNewHope.selectTokens.textFieldChipLetterSpacing, _plasmaNewHope.selectTokens.textFieldChipLineHeight, _plasmaNewHope.selectTokens.buttonArrowMargin, _plasmaNewHope.selectTokens.targetHeight, _plasmaNewHope.selectTokens.buttonPadding, _plasmaNewHope.selectTokens.padding, _plasmaNewHope.selectTokens.borderRadius, _plasmaNewHope.selectTokens.dropdownBorderWidth, _plasmaNewHope.selectTokens.itemHeight, _plasmaNewHope.selectTokens.itemPadding, _plasmaNewHope.selectTokens.itemPaddingTight, _plasmaNewHope.selectTokens.itemBorderRadius, _plasmaNewHope.selectTokens.itemIconSize, _plasmaNewHope.selectTokens.itemIconSizeTight, _plasmaNewHope.selectTokens.itemIconMargin, _plasmaNewHope.selectTokens.cellPadding, _plasmaNewHope.selectTokens.cellPaddingLeftContent, _plasmaNewHope.selectTokens.cellPaddingContent, _plasmaNewHope.selectTokens.cellPaddingRightContent, _plasmaNewHope.selectTokens.cellTextboxGap, _plasmaNewHope.selectTokens.cellGap, _plasmaNewHope.selectTokens.cellTitleFontFamily, _plasmaNewHope.selectTokens.cellTitleFontSize, _plasmaNewHope.selectTokens.cellTitleFontStyle, _plasmaNewHope.selectTokens.cellTitleFontWeight, _plasmaNewHope.selectTokens.cellTitleLetterSpacing, _plasmaNewHope.selectTokens.cellTitleLineHeight, _plasmaNewHope.selectTokens.fontFamily, _plasmaNewHope.selectTokens.fontSize, _plasmaNewHope.selectTokens.fontStyle, _plasmaNewHope.selectTokens.fontWeight, _plasmaNewHope.selectTokens.fontLetterSpacing, _plasmaNewHope.selectTokens.fontLineHeight, _plasmaNewHope.selectTokens.checkboxTriggerSize, _plasmaNewHope.selectTokens.checkboxTriggerSizeTight, _plasmaNewHope.selectTokens.checkboxTriggerBorderRadius, _plasmaNewHope.selectTokens.checkboxTriggerBorderRadiusTight, _plasmaNewHope.selectTokens.checkboxFillColor, _plasmaNewHope.selectTokens.checkboxIconColor, _plasmaNewHope.selectTokens.checkboxTriggerBorderColor, _plasmaNewHope.selectTokens.checkboxTriggerBorderCheckedColor, _plasmaNewHope.selectTokens.checkboxTriggerBorderWidth, _plasmaNewHope.selectTokens.indicatorSize, _plasmaNewHope.selectTokens.dividerMarginTop, _plasmaNewHope.selectTokens.dividerMarginRight, _plasmaNewHope.selectTokens.dividerMarginBottom, _plasmaNewHope.selectTokens.dividerMarginLeft, _plasmaNewHope.selectTokens.dividerMarginTopTight, _plasmaNewHope.selectTokens.dividerMarginBottomTight)
|
|
24
|
+
s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.875rem 0.6875rem 0.875rem;\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n\n ", ": -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 0.5rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.25rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.3125rem 0 0 0;\n ", ": 1.0625rem 0 0.3125rem 0;\n\n ", ": 0.375rem;\n ", ": 0.375rem;\n ", ": 0 0 0 0;\n ", ": 0.3125rem auto auto -0.6875rem;\n ", ": 0 0 auto auto;\n ", ": 0.25rem -0.625rem auto auto;\n ", ": 1.063rem auto auto -0.75rem;\n ", ": 1.063rem -0.75rem auto auto;\n ", ": 1.063rem -2.125rem auto auto;\n\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": auto;\n ", ": 1.75rem;\n ", ": 0 0.5rem 0 0.75rem;\n ", ": 0.375rem;\n ", ": 0rem;\n ", ": 1rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0 -0.125rem 0 0.25rem;\n ", ": 2.5rem;\n ", ": 1rem 0 1rem;\n\n ", ": 0.125rem;\n ", ": 0.75rem;\n\n ", ": 0.125rem;\n\n ", ": 1.5rem;\n ", ": 0.5rem 0.5rem;\n ", ": 0.25rem 0.5rem;\n ", ": 0.5rem;\n ", ": 1.5rem;\n ", ": 1rem;\n ", ": 0 0.5rem 0 0;\n\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0.125rem;\n ", ": 0.375rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 1.25rem;\n ", ": 0.875rem;\n ", ": 0.375rem;\n ", ": 0.25rem;\n ", ": var(--text-primary);\n ", ": var(--on-dark-text-primary);\n ", ": var(--outline-accent);\n ", ": transparent;\n ", ": 0.125rem;\n\n ", ": 0.375rem;\n "])), _plasmaNewHope.selectTokens.textFieldHeight, _plasmaNewHope.selectTokens.textFieldPadding, _plasmaNewHope.selectTokens.textFieldPaddingWithChips, _plasmaNewHope.selectTokens.textFieldBorderRadius, _plasmaNewHope.selectTokens.textFieldBorderWidth, _plasmaNewHope.selectTokens.textFieldLeftContentMargin, _plasmaNewHope.selectTokens.textFieldRightContentMargin, _plasmaNewHope.selectTokens.textFieldTextBeforeMargin, _plasmaNewHope.selectTokens.textFieldTextAfterMargin, _plasmaNewHope.selectTokens.textFieldFontFamily, _plasmaNewHope.selectTokens.textFieldFontSize, _plasmaNewHope.selectTokens.textFieldFontStyle, _plasmaNewHope.selectTokens.textFieldFontWeight, _plasmaNewHope.selectTokens.textFieldLetterSpacing, _plasmaNewHope.selectTokens.textFieldLineHeight, _plasmaNewHope.selectTokens.textFieldLabelOffset, _plasmaNewHope.selectTokens.textFieldLabelFontFamily, _plasmaNewHope.selectTokens.textFieldLabelFontSize, _plasmaNewHope.selectTokens.textFieldLabelFontStyle, _plasmaNewHope.selectTokens.textFieldLabelFontWeight, _plasmaNewHope.selectTokens.textFieldLabelLetterSpacing, _plasmaNewHope.selectTokens.textFieldLabelLineHeight, _plasmaNewHope.selectTokens.textFieldLeftHelperOffset, _plasmaNewHope.selectTokens.textFieldLeftHelperFontFamily, _plasmaNewHope.selectTokens.textFieldLeftHelperFontSize, _plasmaNewHope.selectTokens.textFieldLeftHelperFontStyle, _plasmaNewHope.selectTokens.textFieldLeftHelperFontWeight, _plasmaNewHope.selectTokens.textFieldLeftHelperLetterSpacing, _plasmaNewHope.selectTokens.textFieldLeftHelperLineHeight, _plasmaNewHope.selectTokens.textFieldLabelInnerPadding, _plasmaNewHope.selectTokens.textFieldContentLabelInnerPadding, _plasmaNewHope.selectTokens.textFieldIndicatorSizeInner, _plasmaNewHope.selectTokens.textFieldIndicatorSizeOuter, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementInner, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementOuter, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementInnerRight, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementOuterRight, _plasmaNewHope.selectTokens.textFieldClearIndicatorLabelPlacementInner, _plasmaNewHope.selectTokens.textFieldClearIndicatorLabelPlacementInnerRight, _plasmaNewHope.selectTokens.textFieldClearIndicatorHintInnerRight, _plasmaNewHope.selectTokens.textFieldChipGap, _plasmaNewHope.selectTokens.textFieldChipBorderRadius, _plasmaNewHope.selectTokens.textFieldChipWidth, _plasmaNewHope.selectTokens.textFieldChipHeight, _plasmaNewHope.selectTokens.textFieldChipPadding, _plasmaNewHope.selectTokens.textFieldChipClearContentMarginLeft, _plasmaNewHope.selectTokens.textFieldChipClearContentMarginRight, _plasmaNewHope.selectTokens.textFieldChipCloseIconSize, _plasmaNewHope.selectTokens.textFieldChipFontFamily, _plasmaNewHope.selectTokens.textFieldChipFontSize, _plasmaNewHope.selectTokens.textFieldChipFontStyle, _plasmaNewHope.selectTokens.textFieldChipFontWeight, _plasmaNewHope.selectTokens.textFieldChipLetterSpacing, _plasmaNewHope.selectTokens.textFieldChipLineHeight, _plasmaNewHope.selectTokens.buttonArrowMargin, _plasmaNewHope.selectTokens.targetHeight, _plasmaNewHope.selectTokens.buttonPadding, _plasmaNewHope.selectTokens.padding, _plasmaNewHope.selectTokens.borderRadius, _plasmaNewHope.selectTokens.dropdownBorderWidth, _plasmaNewHope.selectTokens.itemHeight, _plasmaNewHope.selectTokens.itemPadding, _plasmaNewHope.selectTokens.itemPaddingTight, _plasmaNewHope.selectTokens.itemBorderRadius, _plasmaNewHope.selectTokens.itemIconSize, _plasmaNewHope.selectTokens.itemIconSizeTight, _plasmaNewHope.selectTokens.itemIconMargin, _plasmaNewHope.selectTokens.cellPadding, _plasmaNewHope.selectTokens.cellPaddingLeftContent, _plasmaNewHope.selectTokens.cellPaddingContent, _plasmaNewHope.selectTokens.cellPaddingRightContent, _plasmaNewHope.selectTokens.cellTextboxGap, _plasmaNewHope.selectTokens.cellGap, _plasmaNewHope.selectTokens.cellTitleFontFamily, _plasmaNewHope.selectTokens.cellTitleFontSize, _plasmaNewHope.selectTokens.cellTitleFontStyle, _plasmaNewHope.selectTokens.cellTitleFontWeight, _plasmaNewHope.selectTokens.cellTitleLetterSpacing, _plasmaNewHope.selectTokens.cellTitleLineHeight, _plasmaNewHope.selectTokens.fontFamily, _plasmaNewHope.selectTokens.fontSize, _plasmaNewHope.selectTokens.fontStyle, _plasmaNewHope.selectTokens.fontWeight, _plasmaNewHope.selectTokens.fontLetterSpacing, _plasmaNewHope.selectTokens.fontLineHeight, _plasmaNewHope.selectTokens.checkboxTriggerSize, _plasmaNewHope.selectTokens.checkboxTriggerSizeTight, _plasmaNewHope.selectTokens.checkboxTriggerBorderRadius, _plasmaNewHope.selectTokens.checkboxTriggerBorderRadiusTight, _plasmaNewHope.selectTokens.checkboxFillColor, _plasmaNewHope.selectTokens.checkboxIconColor, _plasmaNewHope.selectTokens.checkboxTriggerBorderColor, _plasmaNewHope.selectTokens.checkboxTriggerBorderCheckedColor, _plasmaNewHope.selectTokens.checkboxTriggerBorderWidth, _plasmaNewHope.selectTokens.indicatorSize)
|
|
25
25
|
},
|
|
26
26
|
labelPlacement: {
|
|
27
27
|
inner: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary)));\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n "])), _plasmaNewHope.selectTokens.textFieldPlaceholderColor, _plasmaNewHope.selectTokens.textFieldLabelInnerFontFamily, _plasmaNewHope.selectTokens.textFieldLabelInnerFontSize, _plasmaNewHope.selectTokens.textFieldLabelInnerFontStyle, _plasmaNewHope.selectTokens.textFieldLabelInnerFontWeight, _plasmaNewHope.selectTokens.textFieldLabelInnerLetterSpacing, _plasmaNewHope.selectTokens.textFieldLabelInnerLineHeight),
|
|
@@ -9,8 +9,6 @@ import { Select } from './Select';
|
|
|
9
9
|
|
|
10
10
|
type StorySelectProps = ComponentProps<typeof Select> & {
|
|
11
11
|
enableContentLeft?: boolean;
|
|
12
|
-
enableSelectAll?: boolean;
|
|
13
|
-
selectAllSticky?: boolean;
|
|
14
12
|
};
|
|
15
13
|
|
|
16
14
|
const view = ['default', 'negative'];
|
|
@@ -100,13 +98,6 @@ const meta: Meta<StorySelectProps> = {
|
|
|
100
98
|
options: ['default', 'text'],
|
|
101
99
|
if: { arg: 'target', eq: 'textfield-like' },
|
|
102
100
|
},
|
|
103
|
-
enableSelectAll: {
|
|
104
|
-
control: 'boolean',
|
|
105
|
-
},
|
|
106
|
-
selectAllSticky: {
|
|
107
|
-
control: 'boolean',
|
|
108
|
-
if: { arg: 'enableSelectAll', truthy: true },
|
|
109
|
-
},
|
|
110
101
|
...disableProps([
|
|
111
102
|
'hintText',
|
|
112
103
|
'hintTrigger',
|
|
@@ -138,8 +129,6 @@ const meta: Meta<StorySelectProps> = {
|
|
|
138
129
|
requiredPlacement: 'right',
|
|
139
130
|
hasRequiredIndicator: true,
|
|
140
131
|
chipType: 'default',
|
|
141
|
-
enableSelectAll: false,
|
|
142
|
-
selectAllSticky: false,
|
|
143
132
|
},
|
|
144
133
|
parameters: {
|
|
145
134
|
controls: {
|
|
@@ -163,8 +152,6 @@ const meta: Meta<StorySelectProps> = {
|
|
|
163
152
|
'requiredPlacement',
|
|
164
153
|
'hasRequiredIndicator',
|
|
165
154
|
'chipType',
|
|
166
|
-
'enableSelectAll',
|
|
167
|
-
'selectAllSticky',
|
|
168
155
|
],
|
|
169
156
|
},
|
|
170
157
|
},
|
|
@@ -403,7 +390,7 @@ const SingleStory = ({ enableContentLeft, ...args }: StorySelectProps) => {
|
|
|
403
390
|
export const Single: StoryObj<StorySelectProps> = {
|
|
404
391
|
parameters: {
|
|
405
392
|
controls: {
|
|
406
|
-
exclude: ['isTargetAmount', 'chipType'
|
|
393
|
+
exclude: ['isTargetAmount', 'chipType'],
|
|
407
394
|
},
|
|
408
395
|
},
|
|
409
396
|
render: (args) => <SingleStory {...args} />,
|
|
@@ -412,7 +399,7 @@ export const Single: StoryObj<StorySelectProps> = {
|
|
|
412
399
|
},
|
|
413
400
|
};
|
|
414
401
|
|
|
415
|
-
const MultiselectStory = ({ enableContentLeft,
|
|
402
|
+
const MultiselectStory = ({ enableContentLeft, ...args }: StorySelectProps) => {
|
|
416
403
|
const [value, setValue] = useState<Array<string>>([]);
|
|
417
404
|
|
|
418
405
|
return (
|
|
@@ -423,7 +410,6 @@ const MultiselectStory = ({ enableContentLeft, enableSelectAll, selectAllSticky,
|
|
|
423
410
|
value={value}
|
|
424
411
|
onChange={setValue}
|
|
425
412
|
contentLeft={enableContentLeft ? <IconPlasma size="s" color="inherit" /> : undefined}
|
|
426
|
-
selectAllOptions={enableSelectAll ? { sticky: selectAllSticky || false } : undefined}
|
|
427
413
|
/>
|
|
428
414
|
</div>
|
|
429
415
|
);
|
|
@@ -466,10 +452,5 @@ const PredefinedStory = ({ enableContentLeft, ...args }: StorySelectProps) => {
|
|
|
466
452
|
};
|
|
467
453
|
|
|
468
454
|
export const Predefined: StoryObj<StorySelectProps> = {
|
|
469
|
-
parameters: {
|
|
470
|
-
controls: {
|
|
471
|
-
exclude: ['enableSelectAll'],
|
|
472
|
-
},
|
|
473
|
-
},
|
|
474
455
|
render: (args) => <PredefinedStory {...args} />,
|
|
475
456
|
};
|
|
@@ -82,7 +82,7 @@ const getBaseEvents = (type: 'days' | 'months' | 'quarters' | 'years', datesNumb
|
|
|
82
82
|
};
|
|
83
83
|
|
|
84
84
|
const StoryDefault = (args: CalendarProps) => {
|
|
85
|
-
const { isRange, isDouble, min, max, date, includeEdgeDates, size } = args;
|
|
85
|
+
const { isRange, isDouble, min, max, date, includeEdgeDates, size, ...rest } = args;
|
|
86
86
|
const [value, setValue] = useState(new Date(2023, 10, 16));
|
|
87
87
|
const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
|
|
88
88
|
|
|
@@ -95,17 +95,22 @@ const StoryDefault = (args: CalendarProps) => {
|
|
|
95
95
|
}, []);
|
|
96
96
|
|
|
97
97
|
return (
|
|
98
|
-
<
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
98
|
+
<div style={{ height: '100vh' }}>
|
|
99
|
+
<Calendar
|
|
100
|
+
size={size}
|
|
101
|
+
isRange={isRange}
|
|
102
|
+
isDouble={isDouble}
|
|
103
|
+
date={date}
|
|
104
|
+
includeEdgeDates={includeEdgeDates}
|
|
105
|
+
min={min}
|
|
106
|
+
max={max}
|
|
107
|
+
{...rest}
|
|
108
|
+
value={(isRange ? valueRange : value) as Date & [Date, Date?]}
|
|
109
|
+
onChangeValue={
|
|
110
|
+
(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void
|
|
111
|
+
}
|
|
112
|
+
/>
|
|
113
|
+
</div>
|
|
109
114
|
);
|
|
110
115
|
};
|
|
111
116
|
|
|
@@ -117,12 +122,13 @@ export const Default: StoryObj<CalendarProps> = {
|
|
|
117
122
|
isRange: false,
|
|
118
123
|
includeEdgeDates: false,
|
|
119
124
|
size: 's',
|
|
125
|
+
stretched: false,
|
|
120
126
|
},
|
|
121
127
|
render: (args) => <StoryDefault {...args} />,
|
|
122
128
|
};
|
|
123
129
|
|
|
124
130
|
const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => {
|
|
125
|
-
const { min, max, includeEdgeDates, size, displayDouble } = args;
|
|
131
|
+
const { min, max, includeEdgeDates, size, displayDouble, ...rest } = args;
|
|
126
132
|
const [value, setValue] = useState(new Date(2023, 6, 7));
|
|
127
133
|
const [currentState, setCurrentState] = useState('Days');
|
|
128
134
|
|
|
@@ -145,32 +151,32 @@ const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => {
|
|
|
145
151
|
<CalendarDouble
|
|
146
152
|
size={size}
|
|
147
153
|
value={value}
|
|
148
|
-
min={min}
|
|
149
|
-
max={max}
|
|
150
154
|
includeEdgeDates={includeEdgeDates}
|
|
151
155
|
type={type}
|
|
152
156
|
onChangeValue={handleOnChange}
|
|
157
|
+
min={min}
|
|
158
|
+
max={max}
|
|
153
159
|
{...rest}
|
|
154
160
|
/>
|
|
155
161
|
) : (
|
|
156
162
|
<CalendarBase
|
|
157
163
|
size={size}
|
|
158
164
|
value={value}
|
|
159
|
-
min={min}
|
|
160
|
-
max={max}
|
|
161
165
|
includeEdgeDates={includeEdgeDates}
|
|
162
166
|
type={type}
|
|
163
167
|
onChangeValue={handleOnChange}
|
|
168
|
+
min={min}
|
|
169
|
+
max={max}
|
|
164
170
|
{...rest}
|
|
165
171
|
/>
|
|
166
172
|
);
|
|
167
173
|
};
|
|
168
174
|
|
|
169
175
|
const calendarMap = {
|
|
170
|
-
Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays }),
|
|
171
|
-
Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current }),
|
|
172
|
-
Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current }),
|
|
173
|
-
Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current }),
|
|
176
|
+
Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays, ...rest }),
|
|
177
|
+
Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current, ...rest }),
|
|
178
|
+
Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current, ...rest }),
|
|
179
|
+
Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current, ...rest }),
|
|
174
180
|
};
|
|
175
181
|
|
|
176
182
|
return (
|
|
@@ -189,7 +195,7 @@ const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => {
|
|
|
189
195
|
</TabItem>
|
|
190
196
|
))}
|
|
191
197
|
</Tabs>
|
|
192
|
-
<div style={{ marginTop: '1rem' }}>{calendarMap[currentState]}</div>
|
|
198
|
+
<div style={{ marginTop: '1rem', height: '100vh' }}>{calendarMap[currentState]}</div>
|
|
193
199
|
</>
|
|
194
200
|
);
|
|
195
201
|
};
|
|
@@ -204,12 +210,13 @@ export const Base: StoryObj<CalendarBaseProps & { displayDouble: boolean }> = {
|
|
|
204
210
|
max: defaultMaxDate,
|
|
205
211
|
includeEdgeDates: false,
|
|
206
212
|
displayDouble: false,
|
|
213
|
+
stretched: false,
|
|
207
214
|
},
|
|
208
215
|
render: (args) => <StoryBase {...args} />,
|
|
209
216
|
};
|
|
210
217
|
|
|
211
218
|
const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) => {
|
|
212
|
-
const { min, max, includeEdgeDates, size, displayDouble } = args;
|
|
219
|
+
const { min, max, includeEdgeDates, size, displayDouble, ...rest } = args;
|
|
213
220
|
const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 6, 1), new Date(2023, 6, 16)]);
|
|
214
221
|
const [currentState, setCurrentState] = useState('Days');
|
|
215
222
|
|
|
@@ -231,33 +238,33 @@ const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) =
|
|
|
231
238
|
return displayDouble ? (
|
|
232
239
|
<CalendarDoubleRange
|
|
233
240
|
size={size}
|
|
234
|
-
value={values}
|
|
235
241
|
min={min}
|
|
236
242
|
max={max}
|
|
237
243
|
includeEdgeDates={includeEdgeDates}
|
|
238
244
|
type={type}
|
|
239
|
-
onChangeValue={handleOnChange}
|
|
240
245
|
{...rest}
|
|
246
|
+
value={values}
|
|
247
|
+
onChangeValue={handleOnChange}
|
|
241
248
|
/>
|
|
242
249
|
) : (
|
|
243
250
|
<CalendarBaseRange
|
|
244
251
|
size={size}
|
|
245
|
-
value={values}
|
|
246
252
|
min={min}
|
|
247
253
|
max={max}
|
|
248
254
|
includeEdgeDates={includeEdgeDates}
|
|
249
255
|
type={type}
|
|
250
|
-
onChangeValue={handleOnChange}
|
|
251
256
|
{...rest}
|
|
257
|
+
value={values}
|
|
258
|
+
onChangeValue={handleOnChange}
|
|
252
259
|
/>
|
|
253
260
|
);
|
|
254
261
|
};
|
|
255
262
|
|
|
256
263
|
const calendarMap = {
|
|
257
|
-
Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays }),
|
|
258
|
-
Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current }),
|
|
259
|
-
Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current }),
|
|
260
|
-
Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current }),
|
|
264
|
+
Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays, ...rest }),
|
|
265
|
+
Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current, ...rest }),
|
|
266
|
+
Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current, ...rest }),
|
|
267
|
+
Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current, ...rest }),
|
|
261
268
|
};
|
|
262
269
|
|
|
263
270
|
return (
|
|
@@ -276,7 +283,7 @@ const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) =
|
|
|
276
283
|
</TabItem>
|
|
277
284
|
))}
|
|
278
285
|
</Tabs>
|
|
279
|
-
<div style={{ marginTop: '1rem' }}>{calendarMap[currentState]}</div>
|
|
286
|
+
<div style={{ marginTop: '1rem', height: '100vh' }}>{calendarMap[currentState]}</div>
|
|
280
287
|
</>
|
|
281
288
|
);
|
|
282
289
|
};
|
|
@@ -291,6 +298,7 @@ export const Range: StoryObj<CalendarBaseRangeProps & { displayDouble: boolean }
|
|
|
291
298
|
max: defaultMaxDate,
|
|
292
299
|
includeEdgeDates: false,
|
|
293
300
|
displayDouble: false,
|
|
301
|
+
stretched: false,
|
|
294
302
|
},
|
|
295
303
|
render: (args) => <StoryRange {...args} />,
|
|
296
304
|
};
|
|
@@ -11,7 +11,7 @@ export var config = {
|
|
|
11
11
|
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--surface-accent);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--inverse-outline-solid-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-accent);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-accent);\n ", ": var(--surface-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-accent);\n ", ": 1;\n\n ", ": var(--text-accent);\n ", ": var(--surface-clear);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-clear);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-clear);\n ", ": var(--surface-accent);\n "])), calendarBaseTokens.calendarSelectedItemBackground, calendarBaseTokens.calendarSelectedItemColor, calendarBaseTokens.calendarSelectableItemBackgroundHover, calendarBaseTokens.calendarCurrentItemBorderColor, calendarBaseTokens.calendarCurrentItemBackgroundHover, calendarBaseTokens.calendarCurrentItemColorHover, calendarBaseTokens.calendarCurrentItemChildBackgroundHover, calendarBaseTokens.calendarActiveItemBackground, calendarBaseTokens.calendarActiveItemColor, calendarBaseTokens.calendarHoveredItemBackground, calendarBaseTokens.calendarHoveredItemColor, calendarBaseTokens.calendarRangeBackground, calendarBaseTokens.calendarOutlineFocusColor, calendarBaseTokens.calendarContentPrimaryColor, calendarBaseTokens.calendarContentPrimaryDisabledColor, calendarBaseTokens.calendarContentSecondaryColor, calendarBaseTokens.calendarContentSecondaryDisabledColor, calendarBaseTokens.calendarDayOfWeekColor, calendarBaseTokens.calendarHeaderArrowColor, calendarBaseTokens.calendarDisabledOpacity, calendarBaseTokens.iconButtonColor, calendarBaseTokens.iconButtonBackgroundColor, calendarBaseTokens.iconButtonColorHover, calendarBaseTokens.iconButtonBackgroundColorHover, calendarBaseTokens.iconButtonColorActive, calendarBaseTokens.iconButtonBackgroundColorActive, calendarBaseTokens.iconButtonFocusColor)
|
|
12
12
|
},
|
|
13
13
|
size: {
|
|
14
|
-
s: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 17.5rem;\n ", ": 17rem;\n\n ", ": 0.5rem 0.5rem 0 0.5rem;\n ", ": 0.5rem;\n
|
|
14
|
+
s: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 17.5rem;\n ", ": 17rem;\n\n ", ": 0.5rem 0.5rem 0 0.5rem;\n ", ": 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.5rem 0.5rem 0 0.5rem;\n ", ": 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.5rem 0.5rem 0 0.5rem;\n ", ": 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.5rem 0 0 0;\n ", ": 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.125rem;\n\n ", ": 0.5rem;\n\n ", ": 0 0 0 0.5rem;\n ", ": 0.25rem;\n\n ", ": var(--plasma-typo-body-m-bold-font-family);\n ", ": var(--plasma-typo-body-m-bold-font-size);\n ", ": var(--plasma-typo-body-m-bold-font-style);\n ", ": var(--plasma-typo-body-m-bold-letter-spacing);\n ", ": var(--plasma-typo-body-m-bold-line-height);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-bold-font-weight);\n\n ", ": 2.5rem;\n ", ": 2.5rem;\n ", ": 1rem;\n ", ": 0.625rem;\n "])), calendarBaseTokens.calendarContainerWidth, calendarBaseTokens.calendarContainerHeight, calendarBaseTokens.calendarYearsPadding, calendarBaseTokens.calendarYearItemBorderRadius, calendarBaseTokens.calendarYearFontFamily, calendarBaseTokens.calendarYearFontSize, calendarBaseTokens.calendarYearFontStyle, calendarBaseTokens.calendarYearFontLetterSpacing, calendarBaseTokens.calendarYearFontLineHeight, calendarBaseTokens.calendarYearFontWeight, calendarBaseTokens.calendarYearSelectedFontWeight, calendarBaseTokens.calendarQuartersPadding, calendarBaseTokens.calendarQuarterItemBorderRadius, calendarBaseTokens.calendarQuarterFontFamily, calendarBaseTokens.calendarQuarterFontSize, calendarBaseTokens.calendarQuarterFontStyle, calendarBaseTokens.calendarQuarterFontLetterSpacing, calendarBaseTokens.calendarQuarterFontLineHeight, calendarBaseTokens.calendarQuarterFontWeight, calendarBaseTokens.calendarQuarterSelectedFontWeight, calendarBaseTokens.calendarMonthsPadding, calendarBaseTokens.calendarMonthItemBorderRadius, calendarBaseTokens.calendarMonthFontFamily, calendarBaseTokens.calendarMonthFontSize, calendarBaseTokens.calendarMonthFontStyle, calendarBaseTokens.calendarMonthFontLetterSpacing, calendarBaseTokens.calendarMonthFontLineHeight, calendarBaseTokens.calendarMonthFontWeight, calendarBaseTokens.calendarMonthSelectedFontWeight, calendarBaseTokens.calendarDaysPadding, calendarBaseTokens.calendarDayItemBorderRadius, calendarBaseTokens.calendarDayFontFamily, calendarBaseTokens.calendarDayFontSize, calendarBaseTokens.calendarDayFontStyle, calendarBaseTokens.calendarDayFontLetterSpacing, calendarBaseTokens.calendarDayFontLineHeight, calendarBaseTokens.calendarDayFontWeight, calendarBaseTokens.calendarDaySelectedFontWeight, calendarBaseTokens.calendarCurrentItemBorderWidth, calendarBaseTokens.calendarHeaderArrowGap, calendarBaseTokens.calendarHeaderPadding, calendarBaseTokens.calendarHeaderDateGap, calendarBaseTokens.calendarHeaderFontFamily, calendarBaseTokens.calendarHeaderFontSize, calendarBaseTokens.calendarHeaderFontStyle, calendarBaseTokens.calendarHeaderFontLetterSpacing, calendarBaseTokens.calendarHeaderFontLineHeight, calendarBaseTokens.calendarHeaderFontWeight, calendarBaseTokens.calendarHeaderFontWeightBold, calendarBaseTokens.iconButtonHeight, calendarBaseTokens.iconButtonWidth, calendarBaseTokens.iconButtonPadding, calendarBaseTokens.iconButtonRadius)
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
};
|
|
@@ -11,7 +11,7 @@ export var config = {
|
|
|
11
11
|
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--surface-accent);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--inverse-outline-solid-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-accent);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-accent);\n ", ": var(--surface-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-accent);\n ", ": 1;\n\n ", ": var(--text-primary);\n ", ": var(--surface-clear);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-clear);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-clear);\n ", ": var(--surface-accent);\n "])), calendarDoubleTokens.calendarSelectedItemBackground, calendarDoubleTokens.calendarSelectedItemColor, calendarDoubleTokens.calendarSelectableItemBackgroundHover, calendarDoubleTokens.calendarCurrentItemBorderColor, calendarDoubleTokens.calendarCurrentItemBackgroundHover, calendarDoubleTokens.calendarCurrentItemColorHover, calendarDoubleTokens.calendarCurrentItemChildBackgroundHover, calendarDoubleTokens.calendarActiveItemBackground, calendarDoubleTokens.calendarActiveItemColor, calendarDoubleTokens.calendarHoveredItemBackground, calendarDoubleTokens.calendarHoveredItemColor, calendarDoubleTokens.calendarRangeBackground, calendarDoubleTokens.calendarOutlineFocusColor, calendarDoubleTokens.calendarContentPrimaryColor, calendarDoubleTokens.calendarContentPrimaryDisabledColor, calendarDoubleTokens.calendarContentSecondaryColor, calendarDoubleTokens.calendarContentSecondaryDisabledColor, calendarDoubleTokens.calendarDayOfWeekColor, calendarDoubleTokens.calendarHeaderArrowColor, calendarDoubleTokens.calendarDisabledOpacity, calendarDoubleTokens.iconButtonColor, calendarDoubleTokens.iconButtonBackgroundColor, calendarDoubleTokens.iconButtonColorHover, calendarDoubleTokens.iconButtonBackgroundColorHover, calendarDoubleTokens.iconButtonColorActive, calendarDoubleTokens.iconButtonBackgroundColorActive, calendarDoubleTokens.iconButtonFocusColor)
|
|
12
12
|
},
|
|
13
13
|
size: {
|
|
14
|
-
s: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 37.063rem;\n ", ": 17rem;\n\n ", ": 0.5rem 0.5rem 0 0.5rem;\n ", ": 0.5rem;\n
|
|
14
|
+
s: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 37.063rem;\n ", ": 17rem;\n\n ", ": 0.5rem 0.5rem 0 0.5rem;\n ", ": 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.5rem 0.5rem 0 0.5rem;\n ", ": 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.5rem 0.5rem 0 0.5rem;\n ", ": 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.125rem;\n\n ", ": 0.5rem;\n\n ", ": 0.5rem 0 0 0;\n ", ": 0 0 0 0.5rem;\n ", ": 0.25rem;\n\n ", ": var(--plasma-typo-body-m-bold-font-family);\n ", ": var(--plasma-typo-body-m-bold-font-size);\n ", ": var(--plasma-typo-body-m-bold-font-style);\n ", ": var(--plasma-typo-body-m-bold-letter-spacing);\n ", ": var(--plasma-typo-body-m-bold-line-height);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-bold-font-weight);\n\n ", ": 2.5rem;\n ", ": 2.5rem;\n ", ": 1rem;\n ", ": 0.625rem;\n "])), calendarDoubleTokens.calendarContainerWidth, calendarDoubleTokens.calendarContainerHeight, calendarDoubleTokens.calendarYearsPadding, calendarDoubleTokens.calendarYearItemBorderRadius, calendarDoubleTokens.calendarYearFontFamily, calendarDoubleTokens.calendarYearFontSize, calendarDoubleTokens.calendarYearFontStyle, calendarDoubleTokens.calendarYearFontLetterSpacing, calendarDoubleTokens.calendarYearFontLineHeight, calendarDoubleTokens.calendarYearFontWeight, calendarDoubleTokens.calendarYearSelectedFontWeight, calendarDoubleTokens.calendarQuartersPadding, calendarDoubleTokens.calendarQuarterItemBorderRadius, calendarDoubleTokens.calendarQuarterFontFamily, calendarDoubleTokens.calendarQuarterFontSize, calendarDoubleTokens.calendarQuarterFontStyle, calendarDoubleTokens.calendarQuarterFontLetterSpacing, calendarDoubleTokens.calendarQuarterFontLineHeight, calendarDoubleTokens.calendarQuarterFontWeight, calendarDoubleTokens.calendarQuarterSelectedFontWeight, calendarDoubleTokens.calendarMonthsPadding, calendarDoubleTokens.calendarMonthItemBorderRadius, calendarDoubleTokens.calendarMonthFontFamily, calendarDoubleTokens.calendarMonthFontSize, calendarDoubleTokens.calendarMonthFontStyle, calendarDoubleTokens.calendarMonthFontLetterSpacing, calendarDoubleTokens.calendarMonthFontLineHeight, calendarDoubleTokens.calendarMonthFontWeight, calendarDoubleTokens.calendarMonthSelectedFontWeight, calendarDoubleTokens.calendarDayItemBorderRadius, calendarDoubleTokens.calendarDayFontFamily, calendarDoubleTokens.calendarDayFontSize, calendarDoubleTokens.calendarDayFontStyle, calendarDoubleTokens.calendarDayFontLetterSpacing, calendarDoubleTokens.calendarDayFontLineHeight, calendarDoubleTokens.calendarDayFontWeight, calendarDoubleTokens.calendarDaySelectedFontWeight, calendarDoubleTokens.calendarCurrentItemBorderWidth, calendarDoubleTokens.calendarHeaderArrowGap, calendarDoubleTokens.calendarDaysPadding, calendarDoubleTokens.calendarHeaderPadding, calendarDoubleTokens.calendarHeaderDateGap, calendarDoubleTokens.calendarHeaderFontFamily, calendarDoubleTokens.calendarHeaderFontSize, calendarDoubleTokens.calendarHeaderFontStyle, calendarDoubleTokens.calendarHeaderFontLetterSpacing, calendarDoubleTokens.calendarHeaderFontLineHeight, calendarDoubleTokens.calendarHeaderFontWeight, calendarDoubleTokens.calendarHeaderFontWeightBold, calendarDoubleTokens.iconButtonHeight, calendarDoubleTokens.iconButtonWidth, calendarDoubleTokens.iconButtonPadding, calendarDoubleTokens.iconButtonRadius)
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
};
|
|
@@ -9,11 +9,11 @@ export var config = {
|
|
|
9
9
|
},
|
|
10
10
|
variations: {
|
|
11
11
|
view: {
|
|
12
|
-
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-accent);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary-active);\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-hover);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-active);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": 0.72;\n ", ": var(--surface-solid-primary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n
|
|
13
|
-
negative: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-negative);\n ", ": var(--text-accent);\n\n ", ": var(--outline-negative);\n ", ": var(--outline-negative-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary-active);\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-hover);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-active);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": 0.72;\n ", ": var(--surface-solid-primary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n
|
|
12
|
+
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-accent);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary-active);\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-hover);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-active);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": 0.72;\n ", ": var(--surface-solid-primary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n "])), tokens.textFieldColor, tokens.textFieldClearColor, tokens.textFieldPlaceholderColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldClearPlaceholderColor, tokens.textFieldClearPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus, tokens.textFieldContentSlotColor, tokens.textFieldContentSlotColorHover, tokens.textFieldContentSlotColorActive, tokens.textFieldContentSlotRightColor, tokens.textFieldContentSlotRightColorHover, tokens.textFieldContentSlotRightColorActive, tokens.textFieldIndicatorColor, tokens.textFieldOptionalColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly, tokens.dropdownBorderColor, tokens.disclosureIconColor, tokens.disclosureIconColorHover, tokens.itemBackgroundHover),
|
|
13
|
+
negative: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-negative);\n ", ": var(--text-accent);\n\n ", ": var(--outline-negative);\n ", ": var(--outline-negative-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary-active);\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-hover);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-active);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": 0.72;\n ", ": var(--surface-solid-primary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n "])), tokens.textFieldColor, tokens.textFieldClearColor, tokens.textFieldPlaceholderColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldClearPlaceholderColor, tokens.textFieldClearPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus, tokens.textFieldContentSlotColor, tokens.textFieldContentSlotColorHover, tokens.textFieldContentSlotColorActive, tokens.textFieldContentSlotRightColor, tokens.textFieldContentSlotRightColorHover, tokens.textFieldContentSlotRightColorActive, tokens.textFieldIndicatorColor, tokens.textFieldOptionalColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly, tokens.dropdownBorderColor, tokens.disclosureIconColor, tokens.disclosureIconColorHover, tokens.itemBackgroundHover)
|
|
14
14
|
},
|
|
15
15
|
size: {
|
|
16
|
-
s: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.75rem 0.6875rem 0.75rem;\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n\n ", ": -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 0.5rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.25rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.3125rem 0 0 0;\n ", ": 1.0625rem 0 0.3125rem 0;\n\n ", ": 0.375rem;\n ", ": 0.375rem;\n ", ": 0 0 0 0;\n ", ": 0.3125rem auto auto -0.6875rem;\n ", ": 0 0 auto auto;\n ", ": 0.25rem -0.625rem auto auto;\n ", ": 1.063rem auto auto -0.75rem;\n ", ": 1.063rem -0.75rem auto auto;\n ", ": 1.063rem -2.125rem auto auto;\n\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": auto;\n ", ": 1.75rem;\n ", ": 0 0.5rem 0 0.75rem;\n ", ": 0.375rem;\n ", ": 0rem;\n ", ": 1rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.625rem 0.875rem 0.625rem 0.875rem;\n ", ": 0.125rem;\n ", ": 0.75rem;\n\n ", ": 1.5rem;\n ", ": 0.5rem 0.75rem;\n ", ": 0.25rem 0.75rem;\n ", ": 0.5rem;\n ", ": 1.5rem;\n ", ": 1rem;\n ", ": 0 0.375rem 0 0;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0.125rem;\n ", ": 0.375rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 1.25rem;\n ", ": 0.875rem;\n ", ": 0.375rem;\n ", ": 0.25rem;\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": none;\n ", ": 0.125rem;\n ", ": var(--outline-accent);\n\n ", ": 0.375rem;\n ", ": 0.0625rem;\n
|
|
16
|
+
s: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.75rem 0.6875rem 0.75rem;\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n\n ", ": -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 0.5rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.25rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.3125rem 0 0 0;\n ", ": 1.0625rem 0 0.3125rem 0;\n\n ", ": 0.375rem;\n ", ": 0.375rem;\n ", ": 0 0 0 0;\n ", ": 0.3125rem auto auto -0.6875rem;\n ", ": 0 0 auto auto;\n ", ": 0.25rem -0.625rem auto auto;\n ", ": 1.063rem auto auto -0.75rem;\n ", ": 1.063rem -0.75rem auto auto;\n ", ": 1.063rem -2.125rem auto auto;\n\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": auto;\n ", ": 1.75rem;\n ", ": 0 0.5rem 0 0.75rem;\n ", ": 0.375rem;\n ", ": 0rem;\n ", ": 1rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.625rem 0.875rem 0.625rem 0.875rem;\n ", ": 0.125rem;\n ", ": 0.75rem;\n\n ", ": 1.5rem;\n ", ": 0.5rem 0.75rem;\n ", ": 0.25rem 0.75rem;\n ", ": 0.5rem;\n ", ": 1.5rem;\n ", ": 1rem;\n ", ": 0 0.375rem 0 0;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0.125rem;\n ", ": 0.375rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 1.25rem;\n ", ": 0.875rem;\n ", ": 0.375rem;\n ", ": 0.25rem;\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": none;\n ", ": 0.125rem;\n ", ": var(--outline-accent);\n\n ", ": 0.375rem;\n ", ": 0.0625rem;\n "])), tokens.textFieldHeight, tokens.textFieldPadding, tokens.textFieldPaddingWithChips, tokens.textFieldBorderRadius, tokens.textFieldBorderWidth, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.textFieldFontFamily, tokens.textFieldFontSize, tokens.textFieldFontStyle, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLabelOffset, tokens.textFieldLabelFontFamily, tokens.textFieldLabelFontSize, tokens.textFieldLabelFontStyle, tokens.textFieldLabelFontWeight, tokens.textFieldLabelLetterSpacing, tokens.textFieldLabelLineHeight, tokens.textFieldLeftHelperOffset, tokens.textFieldLeftHelperFontFamily, tokens.textFieldLeftHelperFontSize, tokens.textFieldLeftHelperFontStyle, tokens.textFieldLeftHelperFontWeight, tokens.textFieldLeftHelperLetterSpacing, tokens.textFieldLeftHelperLineHeight, tokens.textFieldLabelInnerPadding, tokens.textFieldContentLabelInnerPadding, tokens.textFieldIndicatorSizeInner, tokens.textFieldIndicatorSizeOuter, tokens.textFieldIndicatorLabelPlacementInner, tokens.textFieldIndicatorLabelPlacementOuter, tokens.textFieldIndicatorLabelPlacementInnerRight, tokens.textFieldIndicatorLabelPlacementOuterRight, tokens.textFieldClearIndicatorLabelPlacementInner, tokens.textFieldClearIndicatorLabelPlacementInnerRight, tokens.textFieldClearIndicatorHintInnerRight, tokens.textFieldChipGap, tokens.textFieldChipBorderRadius, tokens.textFieldChipWidth, tokens.textFieldChipHeight, tokens.textFieldChipPadding, tokens.textFieldChipClearContentMarginLeft, tokens.textFieldChipClearContentMarginRight, tokens.textFieldChipCloseIconSize, tokens.textFieldChipFontFamily, tokens.textFieldChipFontSize, tokens.textFieldChipFontStyle, tokens.textFieldChipFontWeight, tokens.textFieldChipLetterSpacing, tokens.textFieldChipLineHeight, tokens.emptyStatePadding, tokens.padding, tokens.borderRadius, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.itemIconSize, tokens.itemIconSizeTight, tokens.itemIconMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight, tokens.checkboxTriggerSize, tokens.checkboxTriggerSizeTight, tokens.checkboxTriggerBorderRadius, tokens.checkboxTriggerBorderRadiusTight, tokens.checkboxFillColor, tokens.checkboxIconColor, tokens.checkboxTriggerBorderCheckedColor, tokens.checkboxTriggerBorderWidth, tokens.checkboxTriggerBorderColor, tokens.indicatorSize, tokens.dropdownBorderWidth)
|
|
17
17
|
},
|
|
18
18
|
labelPlacement: {
|
|
19
19
|
inner: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary)));\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n "])), tokens.textFieldPlaceholderColor, tokens.textFieldLabelInnerFontFamily, tokens.textFieldLabelInnerFontSize, tokens.textFieldLabelInnerFontStyle, tokens.textFieldLabelInnerFontWeight, tokens.textFieldLabelInnerLetterSpacing, tokens.textFieldLabelInnerLineHeight),
|
|
@@ -8,8 +8,6 @@ import { Combobox } from './Combobox';
|
|
|
8
8
|
|
|
9
9
|
type StorySelectProps = ComponentProps<typeof Combobox> & {
|
|
10
10
|
enableContentLeft?: boolean;
|
|
11
|
-
enableSelectAll?: boolean;
|
|
12
|
-
selectAllSticky?: boolean;
|
|
13
11
|
};
|
|
14
12
|
|
|
15
13
|
const view = ['default', 'negative'];
|
|
@@ -94,13 +92,6 @@ const meta: Meta<StorySelectProps> = {
|
|
|
94
92
|
emptyStateDescription: {
|
|
95
93
|
control: { type: 'text' },
|
|
96
94
|
},
|
|
97
|
-
enableSelectAll: {
|
|
98
|
-
control: 'boolean',
|
|
99
|
-
},
|
|
100
|
-
selectAllSticky: {
|
|
101
|
-
control: 'boolean',
|
|
102
|
-
if: { arg: 'enableSelectAll', truthy: true },
|
|
103
|
-
},
|
|
104
95
|
...disableProps([
|
|
105
96
|
'hintText',
|
|
106
97
|
'hintTrigger',
|
|
@@ -133,8 +124,6 @@ const meta: Meta<StorySelectProps> = {
|
|
|
133
124
|
requiredPlacement: 'right',
|
|
134
125
|
hasRequiredIndicator: true,
|
|
135
126
|
emptyStateDescription: '',
|
|
136
|
-
enableSelectAll: false,
|
|
137
|
-
selectAllSticky: false,
|
|
138
127
|
},
|
|
139
128
|
parameters: {
|
|
140
129
|
controls: {
|
|
@@ -163,8 +152,6 @@ const meta: Meta<StorySelectProps> = {
|
|
|
163
152
|
'requiredPlacement',
|
|
164
153
|
'hasRequiredIndicator',
|
|
165
154
|
'emptyStateDescription',
|
|
166
|
-
'enableSelectAll',
|
|
167
|
-
'selectAllSticky',
|
|
168
155
|
],
|
|
169
156
|
},
|
|
170
157
|
},
|
|
@@ -380,7 +367,7 @@ const items = [
|
|
|
380
367
|
{
|
|
381
368
|
value: 'africa',
|
|
382
369
|
label: 'Африка',
|
|
383
|
-
|
|
370
|
+
isDisabled: true,
|
|
384
371
|
},
|
|
385
372
|
];
|
|
386
373
|
|
|
@@ -404,12 +391,12 @@ export const Single: StoryObj<StorySelectProps> = {
|
|
|
404
391
|
render: (args) => <SingleStory {...args} />,
|
|
405
392
|
parameters: {
|
|
406
393
|
controls: {
|
|
407
|
-
exclude: ['isTargetAmount'
|
|
394
|
+
exclude: ['isTargetAmount'],
|
|
408
395
|
},
|
|
409
396
|
},
|
|
410
397
|
};
|
|
411
398
|
|
|
412
|
-
const MultipleStory = (
|
|
399
|
+
const MultipleStory = (args: StorySelectProps) => {
|
|
413
400
|
const [value, setValue] = useState([]);
|
|
414
401
|
|
|
415
402
|
return (
|
|
@@ -421,7 +408,6 @@ const MultipleStory = ({ enableSelectAll, selectAllSticky, ...args }: StorySelec
|
|
|
421
408
|
value={value}
|
|
422
409
|
onChange={setValue}
|
|
423
410
|
contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
|
|
424
|
-
selectAllOptions={enableSelectAll ? { sticky: selectAllSticky || false } : undefined}
|
|
425
411
|
/>
|
|
426
412
|
</div>
|
|
427
413
|
);
|