@salutejs/sdds-cs 0.318.0-canary.2009.15430753944.0 → 0.318.0-canary.2012.15487817329.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.
@@ -15,11 +15,11 @@ var config = exports.config = {
15
15
  },
16
16
  variations: {
17
17
  view: {
18
- "default": /*#__PURE__*/(0, _emotion.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 "])), _emotion.comboboxNewTokens.textFieldColor, _emotion.comboboxNewTokens.textFieldClearColor, _emotion.comboboxNewTokens.textFieldPlaceholderColor, _emotion.comboboxNewTokens.textFieldPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldClearPlaceholderColor, _emotion.comboboxNewTokens.textFieldClearPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldBackgroundColor, _emotion.comboboxNewTokens.textFieldBackgroundColorFocus, _emotion.comboboxNewTokens.textFieldCaretColor, _emotion.comboboxNewTokens.textFieldTextBeforeColor, _emotion.comboboxNewTokens.textFieldTextAfterColor, _emotion.comboboxNewTokens.textFieldLabelColor, _emotion.comboboxNewTokens.textFieldLeftHelperColor, _emotion.comboboxNewTokens.textFieldFocusColor, _emotion.comboboxNewTokens.textFieldBorderColor, _emotion.comboboxNewTokens.textFieldBorderColorHover, _emotion.comboboxNewTokens.textFieldBorderColorFocus, _emotion.comboboxNewTokens.textFieldContentSlotColor, _emotion.comboboxNewTokens.textFieldContentSlotColorHover, _emotion.comboboxNewTokens.textFieldContentSlotColorActive, _emotion.comboboxNewTokens.textFieldContentSlotRightColor, _emotion.comboboxNewTokens.textFieldContentSlotRightColorHover, _emotion.comboboxNewTokens.textFieldContentSlotRightColorActive, _emotion.comboboxNewTokens.textFieldIndicatorColor, _emotion.comboboxNewTokens.textFieldOptionalColor, _emotion.comboboxNewTokens.textFieldChipCloseIconColor, _emotion.comboboxNewTokens.textFieldChipColor, _emotion.comboboxNewTokens.textFieldChipBackground, _emotion.comboboxNewTokens.textFieldChipColorHover, _emotion.comboboxNewTokens.textFieldChipBackgroundHover, _emotion.comboboxNewTokens.textFieldChipColorActive, _emotion.comboboxNewTokens.textFieldChipBackgroundActive, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnly, _emotion.comboboxNewTokens.textFieldChipColorReadOnly, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipColorReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipOpacityReadonly, _emotion.comboboxNewTokens.dropdownBorderColor, _emotion.comboboxNewTokens.disclosureIconColor, _emotion.comboboxNewTokens.disclosureIconColorHover, _emotion.comboboxNewTokens.itemBackgroundHover),
19
- negative: /*#__PURE__*/(0, _emotion.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 "])), _emotion.comboboxNewTokens.textFieldColor, _emotion.comboboxNewTokens.textFieldClearColor, _emotion.comboboxNewTokens.textFieldPlaceholderColor, _emotion.comboboxNewTokens.textFieldPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldClearPlaceholderColor, _emotion.comboboxNewTokens.textFieldClearPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldBackgroundColor, _emotion.comboboxNewTokens.textFieldBackgroundColorFocus, _emotion.comboboxNewTokens.textFieldCaretColor, _emotion.comboboxNewTokens.textFieldTextBeforeColor, _emotion.comboboxNewTokens.textFieldTextAfterColor, _emotion.comboboxNewTokens.textFieldLabelColor, _emotion.comboboxNewTokens.textFieldLeftHelperColor, _emotion.comboboxNewTokens.textFieldFocusColor, _emotion.comboboxNewTokens.textFieldBorderColor, _emotion.comboboxNewTokens.textFieldBorderColorHover, _emotion.comboboxNewTokens.textFieldBorderColorFocus, _emotion.comboboxNewTokens.textFieldContentSlotColor, _emotion.comboboxNewTokens.textFieldContentSlotColorHover, _emotion.comboboxNewTokens.textFieldContentSlotColorActive, _emotion.comboboxNewTokens.textFieldContentSlotRightColor, _emotion.comboboxNewTokens.textFieldContentSlotRightColorHover, _emotion.comboboxNewTokens.textFieldContentSlotRightColorActive, _emotion.comboboxNewTokens.textFieldIndicatorColor, _emotion.comboboxNewTokens.textFieldOptionalColor, _emotion.comboboxNewTokens.textFieldChipCloseIconColor, _emotion.comboboxNewTokens.textFieldChipColor, _emotion.comboboxNewTokens.textFieldChipBackground, _emotion.comboboxNewTokens.textFieldChipColorHover, _emotion.comboboxNewTokens.textFieldChipBackgroundHover, _emotion.comboboxNewTokens.textFieldChipColorActive, _emotion.comboboxNewTokens.textFieldChipBackgroundActive, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnly, _emotion.comboboxNewTokens.textFieldChipColorReadOnly, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipColorReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipOpacityReadonly, _emotion.comboboxNewTokens.dropdownBorderColor, _emotion.comboboxNewTokens.disclosureIconColor, _emotion.comboboxNewTokens.disclosureIconColorHover, _emotion.comboboxNewTokens.itemBackgroundHover)
18
+ "default": /*#__PURE__*/(0, _emotion.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\n ", ": var(--surface-solid-primary);\n "])), _emotion.comboboxNewTokens.textFieldColor, _emotion.comboboxNewTokens.textFieldClearColor, _emotion.comboboxNewTokens.textFieldPlaceholderColor, _emotion.comboboxNewTokens.textFieldPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldClearPlaceholderColor, _emotion.comboboxNewTokens.textFieldClearPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldBackgroundColor, _emotion.comboboxNewTokens.textFieldBackgroundColorFocus, _emotion.comboboxNewTokens.textFieldCaretColor, _emotion.comboboxNewTokens.textFieldTextBeforeColor, _emotion.comboboxNewTokens.textFieldTextAfterColor, _emotion.comboboxNewTokens.textFieldLabelColor, _emotion.comboboxNewTokens.textFieldLeftHelperColor, _emotion.comboboxNewTokens.textFieldFocusColor, _emotion.comboboxNewTokens.textFieldBorderColor, _emotion.comboboxNewTokens.textFieldBorderColorHover, _emotion.comboboxNewTokens.textFieldBorderColorFocus, _emotion.comboboxNewTokens.textFieldContentSlotColor, _emotion.comboboxNewTokens.textFieldContentSlotColorHover, _emotion.comboboxNewTokens.textFieldContentSlotColorActive, _emotion.comboboxNewTokens.textFieldContentSlotRightColor, _emotion.comboboxNewTokens.textFieldContentSlotRightColorHover, _emotion.comboboxNewTokens.textFieldContentSlotRightColorActive, _emotion.comboboxNewTokens.textFieldIndicatorColor, _emotion.comboboxNewTokens.textFieldOptionalColor, _emotion.comboboxNewTokens.textFieldChipCloseIconColor, _emotion.comboboxNewTokens.textFieldChipColor, _emotion.comboboxNewTokens.textFieldChipBackground, _emotion.comboboxNewTokens.textFieldChipColorHover, _emotion.comboboxNewTokens.textFieldChipBackgroundHover, _emotion.comboboxNewTokens.textFieldChipColorActive, _emotion.comboboxNewTokens.textFieldChipBackgroundActive, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnly, _emotion.comboboxNewTokens.textFieldChipColorReadOnly, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipColorReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipOpacityReadonly, _emotion.comboboxNewTokens.dropdownBorderColor, _emotion.comboboxNewTokens.disclosureIconColor, _emotion.comboboxNewTokens.disclosureIconColorHover, _emotion.comboboxNewTokens.itemBackgroundHover, _emotion.comboboxNewTokens.dividerColor),
19
+ negative: /*#__PURE__*/(0, _emotion.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\n ", ": var(--surface-solid-primary);\n "])), _emotion.comboboxNewTokens.textFieldColor, _emotion.comboboxNewTokens.textFieldClearColor, _emotion.comboboxNewTokens.textFieldPlaceholderColor, _emotion.comboboxNewTokens.textFieldPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldClearPlaceholderColor, _emotion.comboboxNewTokens.textFieldClearPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldBackgroundColor, _emotion.comboboxNewTokens.textFieldBackgroundColorFocus, _emotion.comboboxNewTokens.textFieldCaretColor, _emotion.comboboxNewTokens.textFieldTextBeforeColor, _emotion.comboboxNewTokens.textFieldTextAfterColor, _emotion.comboboxNewTokens.textFieldLabelColor, _emotion.comboboxNewTokens.textFieldLeftHelperColor, _emotion.comboboxNewTokens.textFieldFocusColor, _emotion.comboboxNewTokens.textFieldBorderColor, _emotion.comboboxNewTokens.textFieldBorderColorHover, _emotion.comboboxNewTokens.textFieldBorderColorFocus, _emotion.comboboxNewTokens.textFieldContentSlotColor, _emotion.comboboxNewTokens.textFieldContentSlotColorHover, _emotion.comboboxNewTokens.textFieldContentSlotColorActive, _emotion.comboboxNewTokens.textFieldContentSlotRightColor, _emotion.comboboxNewTokens.textFieldContentSlotRightColorHover, _emotion.comboboxNewTokens.textFieldContentSlotRightColorActive, _emotion.comboboxNewTokens.textFieldIndicatorColor, _emotion.comboboxNewTokens.textFieldOptionalColor, _emotion.comboboxNewTokens.textFieldChipCloseIconColor, _emotion.comboboxNewTokens.textFieldChipColor, _emotion.comboboxNewTokens.textFieldChipBackground, _emotion.comboboxNewTokens.textFieldChipColorHover, _emotion.comboboxNewTokens.textFieldChipBackgroundHover, _emotion.comboboxNewTokens.textFieldChipColorActive, _emotion.comboboxNewTokens.textFieldChipBackgroundActive, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnly, _emotion.comboboxNewTokens.textFieldChipColorReadOnly, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipColorReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipOpacityReadonly, _emotion.comboboxNewTokens.dropdownBorderColor, _emotion.comboboxNewTokens.disclosureIconColor, _emotion.comboboxNewTokens.disclosureIconColorHover, _emotion.comboboxNewTokens.itemBackgroundHover, _emotion.comboboxNewTokens.dividerColor)
20
20
  },
21
21
  size: {
22
- s: /*#__PURE__*/(0, _emotion.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 "])), _emotion.comboboxNewTokens.textFieldHeight, _emotion.comboboxNewTokens.textFieldPadding, _emotion.comboboxNewTokens.textFieldPaddingWithChips, _emotion.comboboxNewTokens.textFieldBorderRadius, _emotion.comboboxNewTokens.textFieldBorderWidth, _emotion.comboboxNewTokens.textFieldLeftContentMargin, _emotion.comboboxNewTokens.textFieldRightContentMargin, _emotion.comboboxNewTokens.textFieldTextBeforeMargin, _emotion.comboboxNewTokens.textFieldTextAfterMargin, _emotion.comboboxNewTokens.textFieldFontFamily, _emotion.comboboxNewTokens.textFieldFontSize, _emotion.comboboxNewTokens.textFieldFontStyle, _emotion.comboboxNewTokens.textFieldFontWeight, _emotion.comboboxNewTokens.textFieldLetterSpacing, _emotion.comboboxNewTokens.textFieldLineHeight, _emotion.comboboxNewTokens.textFieldLabelOffset, _emotion.comboboxNewTokens.textFieldLabelFontFamily, _emotion.comboboxNewTokens.textFieldLabelFontSize, _emotion.comboboxNewTokens.textFieldLabelFontStyle, _emotion.comboboxNewTokens.textFieldLabelFontWeight, _emotion.comboboxNewTokens.textFieldLabelLetterSpacing, _emotion.comboboxNewTokens.textFieldLabelLineHeight, _emotion.comboboxNewTokens.textFieldLeftHelperOffset, _emotion.comboboxNewTokens.textFieldLeftHelperFontFamily, _emotion.comboboxNewTokens.textFieldLeftHelperFontSize, _emotion.comboboxNewTokens.textFieldLeftHelperFontStyle, _emotion.comboboxNewTokens.textFieldLeftHelperFontWeight, _emotion.comboboxNewTokens.textFieldLeftHelperLetterSpacing, _emotion.comboboxNewTokens.textFieldLeftHelperLineHeight, _emotion.comboboxNewTokens.textFieldLabelInnerPadding, _emotion.comboboxNewTokens.textFieldContentLabelInnerPadding, _emotion.comboboxNewTokens.textFieldIndicatorSizeInner, _emotion.comboboxNewTokens.textFieldIndicatorSizeOuter, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementInner, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementOuter, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementInnerRight, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementOuterRight, _emotion.comboboxNewTokens.textFieldClearIndicatorLabelPlacementInner, _emotion.comboboxNewTokens.textFieldClearIndicatorLabelPlacementInnerRight, _emotion.comboboxNewTokens.textFieldClearIndicatorHintInnerRight, _emotion.comboboxNewTokens.textFieldChipGap, _emotion.comboboxNewTokens.textFieldChipBorderRadius, _emotion.comboboxNewTokens.textFieldChipWidth, _emotion.comboboxNewTokens.textFieldChipHeight, _emotion.comboboxNewTokens.textFieldChipPadding, _emotion.comboboxNewTokens.textFieldChipClearContentMarginLeft, _emotion.comboboxNewTokens.textFieldChipClearContentMarginRight, _emotion.comboboxNewTokens.textFieldChipCloseIconSize, _emotion.comboboxNewTokens.textFieldChipFontFamily, _emotion.comboboxNewTokens.textFieldChipFontSize, _emotion.comboboxNewTokens.textFieldChipFontStyle, _emotion.comboboxNewTokens.textFieldChipFontWeight, _emotion.comboboxNewTokens.textFieldChipLetterSpacing, _emotion.comboboxNewTokens.textFieldChipLineHeight, _emotion.comboboxNewTokens.emptyStatePadding, _emotion.comboboxNewTokens.padding, _emotion.comboboxNewTokens.borderRadius, _emotion.comboboxNewTokens.itemHeight, _emotion.comboboxNewTokens.itemPadding, _emotion.comboboxNewTokens.itemPaddingTight, _emotion.comboboxNewTokens.itemBorderRadius, _emotion.comboboxNewTokens.itemIconSize, _emotion.comboboxNewTokens.itemIconSizeTight, _emotion.comboboxNewTokens.itemIconMargin, _emotion.comboboxNewTokens.fontFamily, _emotion.comboboxNewTokens.fontSize, _emotion.comboboxNewTokens.fontStyle, _emotion.comboboxNewTokens.fontWeight, _emotion.comboboxNewTokens.fontLetterSpacing, _emotion.comboboxNewTokens.fontLineHeight, _emotion.comboboxNewTokens.cellPadding, _emotion.comboboxNewTokens.cellPaddingLeftContent, _emotion.comboboxNewTokens.cellPaddingContent, _emotion.comboboxNewTokens.cellPaddingRightContent, _emotion.comboboxNewTokens.cellTextboxGap, _emotion.comboboxNewTokens.cellGap, _emotion.comboboxNewTokens.cellTitleFontFamily, _emotion.comboboxNewTokens.cellTitleFontSize, _emotion.comboboxNewTokens.cellTitleFontStyle, _emotion.comboboxNewTokens.cellTitleFontWeight, _emotion.comboboxNewTokens.cellTitleLetterSpacing, _emotion.comboboxNewTokens.cellTitleLineHeight, _emotion.comboboxNewTokens.checkboxTriggerSize, _emotion.comboboxNewTokens.checkboxTriggerSizeTight, _emotion.comboboxNewTokens.checkboxTriggerBorderRadius, _emotion.comboboxNewTokens.checkboxTriggerBorderRadiusTight, _emotion.comboboxNewTokens.checkboxFillColor, _emotion.comboboxNewTokens.checkboxIconColor, _emotion.comboboxNewTokens.checkboxTriggerBorderCheckedColor, _emotion.comboboxNewTokens.checkboxTriggerBorderWidth, _emotion.comboboxNewTokens.checkboxTriggerBorderColor, _emotion.comboboxNewTokens.indicatorSize, _emotion.comboboxNewTokens.dropdownBorderWidth)
22
+ s: /*#__PURE__*/(0, _emotion.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\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.25rem;\n ", ": 0.25rem;\n "])), _emotion.comboboxNewTokens.textFieldHeight, _emotion.comboboxNewTokens.textFieldPadding, _emotion.comboboxNewTokens.textFieldPaddingWithChips, _emotion.comboboxNewTokens.textFieldBorderRadius, _emotion.comboboxNewTokens.textFieldBorderWidth, _emotion.comboboxNewTokens.textFieldLeftContentMargin, _emotion.comboboxNewTokens.textFieldRightContentMargin, _emotion.comboboxNewTokens.textFieldTextBeforeMargin, _emotion.comboboxNewTokens.textFieldTextAfterMargin, _emotion.comboboxNewTokens.textFieldFontFamily, _emotion.comboboxNewTokens.textFieldFontSize, _emotion.comboboxNewTokens.textFieldFontStyle, _emotion.comboboxNewTokens.textFieldFontWeight, _emotion.comboboxNewTokens.textFieldLetterSpacing, _emotion.comboboxNewTokens.textFieldLineHeight, _emotion.comboboxNewTokens.textFieldLabelOffset, _emotion.comboboxNewTokens.textFieldLabelFontFamily, _emotion.comboboxNewTokens.textFieldLabelFontSize, _emotion.comboboxNewTokens.textFieldLabelFontStyle, _emotion.comboboxNewTokens.textFieldLabelFontWeight, _emotion.comboboxNewTokens.textFieldLabelLetterSpacing, _emotion.comboboxNewTokens.textFieldLabelLineHeight, _emotion.comboboxNewTokens.textFieldLeftHelperOffset, _emotion.comboboxNewTokens.textFieldLeftHelperFontFamily, _emotion.comboboxNewTokens.textFieldLeftHelperFontSize, _emotion.comboboxNewTokens.textFieldLeftHelperFontStyle, _emotion.comboboxNewTokens.textFieldLeftHelperFontWeight, _emotion.comboboxNewTokens.textFieldLeftHelperLetterSpacing, _emotion.comboboxNewTokens.textFieldLeftHelperLineHeight, _emotion.comboboxNewTokens.textFieldLabelInnerPadding, _emotion.comboboxNewTokens.textFieldContentLabelInnerPadding, _emotion.comboboxNewTokens.textFieldIndicatorSizeInner, _emotion.comboboxNewTokens.textFieldIndicatorSizeOuter, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementInner, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementOuter, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementInnerRight, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementOuterRight, _emotion.comboboxNewTokens.textFieldClearIndicatorLabelPlacementInner, _emotion.comboboxNewTokens.textFieldClearIndicatorLabelPlacementInnerRight, _emotion.comboboxNewTokens.textFieldClearIndicatorHintInnerRight, _emotion.comboboxNewTokens.textFieldChipGap, _emotion.comboboxNewTokens.textFieldChipBorderRadius, _emotion.comboboxNewTokens.textFieldChipWidth, _emotion.comboboxNewTokens.textFieldChipHeight, _emotion.comboboxNewTokens.textFieldChipPadding, _emotion.comboboxNewTokens.textFieldChipClearContentMarginLeft, _emotion.comboboxNewTokens.textFieldChipClearContentMarginRight, _emotion.comboboxNewTokens.textFieldChipCloseIconSize, _emotion.comboboxNewTokens.textFieldChipFontFamily, _emotion.comboboxNewTokens.textFieldChipFontSize, _emotion.comboboxNewTokens.textFieldChipFontStyle, _emotion.comboboxNewTokens.textFieldChipFontWeight, _emotion.comboboxNewTokens.textFieldChipLetterSpacing, _emotion.comboboxNewTokens.textFieldChipLineHeight, _emotion.comboboxNewTokens.emptyStatePadding, _emotion.comboboxNewTokens.padding, _emotion.comboboxNewTokens.borderRadius, _emotion.comboboxNewTokens.itemHeight, _emotion.comboboxNewTokens.itemPadding, _emotion.comboboxNewTokens.itemPaddingTight, _emotion.comboboxNewTokens.itemBorderRadius, _emotion.comboboxNewTokens.itemIconSize, _emotion.comboboxNewTokens.itemIconSizeTight, _emotion.comboboxNewTokens.itemIconMargin, _emotion.comboboxNewTokens.fontFamily, _emotion.comboboxNewTokens.fontSize, _emotion.comboboxNewTokens.fontStyle, _emotion.comboboxNewTokens.fontWeight, _emotion.comboboxNewTokens.fontLetterSpacing, _emotion.comboboxNewTokens.fontLineHeight, _emotion.comboboxNewTokens.cellPadding, _emotion.comboboxNewTokens.cellPaddingLeftContent, _emotion.comboboxNewTokens.cellPaddingContent, _emotion.comboboxNewTokens.cellPaddingRightContent, _emotion.comboboxNewTokens.cellTextboxGap, _emotion.comboboxNewTokens.cellGap, _emotion.comboboxNewTokens.cellTitleFontFamily, _emotion.comboboxNewTokens.cellTitleFontSize, _emotion.comboboxNewTokens.cellTitleFontStyle, _emotion.comboboxNewTokens.cellTitleFontWeight, _emotion.comboboxNewTokens.cellTitleLetterSpacing, _emotion.comboboxNewTokens.cellTitleLineHeight, _emotion.comboboxNewTokens.checkboxTriggerSize, _emotion.comboboxNewTokens.checkboxTriggerSizeTight, _emotion.comboboxNewTokens.checkboxTriggerBorderRadius, _emotion.comboboxNewTokens.checkboxTriggerBorderRadiusTight, _emotion.comboboxNewTokens.checkboxFillColor, _emotion.comboboxNewTokens.checkboxIconColor, _emotion.comboboxNewTokens.checkboxTriggerBorderCheckedColor, _emotion.comboboxNewTokens.checkboxTriggerBorderWidth, _emotion.comboboxNewTokens.checkboxTriggerBorderColor, _emotion.comboboxNewTokens.indicatorSize, _emotion.comboboxNewTokens.dropdownBorderWidth, _emotion.comboboxNewTokens.dividerMarginTop, _emotion.comboboxNewTokens.dividerMarginRight, _emotion.comboboxNewTokens.dividerMarginBottom, _emotion.comboboxNewTokens.dividerMarginLeft, _emotion.comboboxNewTokens.dividerMarginTopTight, _emotion.comboboxNewTokens.dividerMarginBottomTight)
23
23
  },
24
24
  labelPlacement: {
25
25
  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 "])), _emotion.comboboxNewTokens.textFieldPlaceholderColor, _emotion.comboboxNewTokens.textFieldLabelInnerFontFamily, _emotion.comboboxNewTokens.textFieldLabelInnerFontSize, _emotion.comboboxNewTokens.textFieldLabelInnerFontStyle, _emotion.comboboxNewTokens.textFieldLabelInnerFontWeight, _emotion.comboboxNewTokens.textFieldLabelInnerLetterSpacing, _emotion.comboboxNewTokens.textFieldLabelInnerLineHeight),
@@ -8,6 +8,8 @@ import { Combobox } from './Combobox';
8
8
 
9
9
  type StorySelectProps = ComponentProps<typeof Combobox> & {
10
10
  enableContentLeft?: boolean;
11
+ selectAllLabel?: string;
12
+ selectAllSticky?: boolean;
11
13
  };
12
14
 
13
15
  const view = ['default', 'negative'];
@@ -416,3 +418,187 @@ const MultipleStory = (args: StorySelectProps) => {
416
418
  export const Multiple: StoryObj<StorySelectProps> = {
417
419
  render: (args) => <MultipleStory {...args} />,
418
420
  };
421
+
422
+ const flatItems = [
423
+ {
424
+ value: 'north_america',
425
+ label: 'Северная Америка',
426
+ },
427
+ {
428
+ value: 'rio_de_janeiro',
429
+ label: 'Рио-де-Жанейро',
430
+ },
431
+ {
432
+ value: 'sao_paulo',
433
+ label: 'Сан-Паулу',
434
+ },
435
+ {
436
+ value: 'buenos_aires',
437
+ label: 'Буэнос-Айрес',
438
+ },
439
+ {
440
+ value: 'cordoba',
441
+ label: 'Кордова',
442
+ },
443
+ {
444
+ value: 'bogota',
445
+ label: 'Богота',
446
+ },
447
+ {
448
+ value: 'medellin',
449
+ label: 'Медельин',
450
+ },
451
+ {
452
+ value: 'paris',
453
+ label: 'Париж',
454
+ },
455
+ {
456
+ value: 'lyon',
457
+ label: 'Лион',
458
+ },
459
+ {
460
+ value: 'berlin',
461
+ label: 'Берлин',
462
+ },
463
+ {
464
+ value: 'munich',
465
+ label: 'Мюнхен',
466
+ },
467
+ {
468
+ value: 'rome',
469
+ label: 'Рим',
470
+ },
471
+ {
472
+ value: 'milan',
473
+ label: 'Милан',
474
+ },
475
+ {
476
+ value: 'madrid',
477
+ label: 'Мадрид',
478
+ },
479
+ {
480
+ value: 'barcelona',
481
+ label: 'Барселона',
482
+ },
483
+ {
484
+ value: 'london',
485
+ label: 'Лондон',
486
+ },
487
+ {
488
+ value: 'manchester',
489
+ label: 'Манчестер',
490
+ },
491
+ {
492
+ value: 'beijing',
493
+ label: 'Пекин',
494
+ },
495
+ {
496
+ value: 'shanghai',
497
+ label: 'Шанхай',
498
+ },
499
+ {
500
+ value: 'tokyo',
501
+ label: 'Токио',
502
+ },
503
+ {
504
+ value: 'osaka',
505
+ label: 'Осака',
506
+ },
507
+ {
508
+ value: 'delhi',
509
+ label: 'Дели',
510
+ },
511
+ {
512
+ value: 'mumbai',
513
+ label: 'Мумбаи',
514
+ },
515
+ {
516
+ value: 'seoul',
517
+ label: 'Сеул',
518
+ },
519
+ {
520
+ value: 'busan',
521
+ label: 'Пусан',
522
+ },
523
+ {
524
+ value: 'bangkok',
525
+ label: 'Бангкок',
526
+ },
527
+ {
528
+ value: 'phuket',
529
+ label: 'Пхукет',
530
+ },
531
+ {
532
+ value: 'africa',
533
+ label: 'Африка',
534
+ },
535
+ ];
536
+
537
+ const SelectAllStory = (args: StorySelectProps) => {
538
+ const [value, setValue] = useState([]);
539
+ const [checked, setChecked] = useState(false);
540
+ const [indeterminate, setIndeterminate] = useState(false);
541
+
542
+ const handleClick = () => {
543
+ if (checked && !indeterminate) {
544
+ setValue([]);
545
+ } else {
546
+ setValue(flatItems.map((item) => item.value));
547
+ }
548
+ };
549
+
550
+ React.useEffect(() => {
551
+ if (value.length === 0) {
552
+ setChecked(false);
553
+ setIndeterminate(false);
554
+ } else if (value.length === flatItems.length) {
555
+ setChecked(true);
556
+ setIndeterminate(false);
557
+ } else {
558
+ setChecked(true);
559
+ setIndeterminate(true);
560
+ }
561
+ }, [value]);
562
+
563
+ return (
564
+ <div style={{ width: '400px' }}>
565
+ <Combobox
566
+ placeholder="Placeholder"
567
+ multiple
568
+ items={flatItems}
569
+ value={value}
570
+ onChange={setValue}
571
+ listOverflow="auto"
572
+ listMaxHeight="300px"
573
+ selectAllOptions={{
574
+ sticky: args?.selectAllSticky || false,
575
+ label: args?.selectAllLabel,
576
+ checked,
577
+ indeterminate,
578
+ onClick: handleClick,
579
+ }}
580
+ />
581
+ </div>
582
+ );
583
+ };
584
+
585
+ export const SelectAll: StoryObj<StorySelectProps> = {
586
+ render: (args) => <SelectAllStory {...args} />,
587
+ argTypes: {
588
+ selectAllSticky: {
589
+ control: 'boolean',
590
+ },
591
+ selectAllLabel: {
592
+ control: 'text',
593
+ },
594
+ },
595
+ args: {
596
+ selectAllSticky: false,
597
+ selectAllLabel: 'Выбрать все',
598
+ },
599
+ parameters: {
600
+ controls: {
601
+ include: ['selectAllSticky', 'selectAllLabel'],
602
+ },
603
+ },
604
+ };
@@ -107,7 +107,10 @@ const StoryDefault = ({
107
107
  contentRight={enableContentRight ? <IconCalendarOutline size={iconSize} /> : undefined}
108
108
  onBlur={onBlur}
109
109
  onFocus={onFocus}
110
- onToggle={(is) => setIsOpen(is)}
110
+ onToggle={(is) => {
111
+ setIsOpen(is);
112
+ onToggle(is);
113
+ }}
111
114
  onChangeValue={onChangeValue}
112
115
  onCommitDate={onCommitDate}
113
116
  {...rest}
@@ -143,6 +146,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
143
146
  includeEdgeDates: true,
144
147
  min: new Date(2024, 1, 1),
145
148
  max: new Date(2024, 12, 29),
149
+ closeAfterDateSelect: true,
146
150
  maskWithFormat: false,
147
151
  required: false,
148
152
  requiredPlacement: 'right',
@@ -238,7 +242,10 @@ const StoryRange = ({
238
242
  secondTextfieldTextBefore={
239
243
  showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
240
244
  }
241
- onToggle={(is) => setIsOpen(is)}
245
+ onToggle={(is) => {
246
+ setIsOpen(is);
247
+ onToggle(is);
248
+ }}
242
249
  onChangeFirstValue={onChangeFirstValue}
243
250
  onChangeSecondValue={onChangeSecondValue}
244
251
  {...dividerIconProps}
@@ -275,6 +282,7 @@ export const Range: StoryObj<StoryPropsRange> = {
275
282
  includeEdgeDates: true,
276
283
  min: new Date(2024, 1, 1),
277
284
  max: new Date(2024, 12, 29),
285
+ closeAfterDateSelect: true,
278
286
  renderFromDate: new Date(2024, 4, 14),
279
287
  maskWithFormat: false,
280
288
  required: false,
@@ -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 ", ": 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)
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\n ", ": var(--surface-solid-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, _plasmaNewHope.selectTokens.dividerColor),
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\n ", ": var(--surface-solid-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, _plasmaNewHope.selectTokens.dividerColor)
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.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)
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\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)
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,6 +9,8 @@ import { Select } from './Select';
9
9
 
10
10
  type StorySelectProps = ComponentProps<typeof Select> & {
11
11
  enableContentLeft?: boolean;
12
+ selectAllLabel?: string;
13
+ selectAllSticky?: boolean;
12
14
  };
13
15
 
14
16
  const view = ['default', 'negative'];
@@ -454,3 +456,187 @@ const PredefinedStory = ({ enableContentLeft, ...args }: StorySelectProps) => {
454
456
  export const Predefined: StoryObj<StorySelectProps> = {
455
457
  render: (args) => <PredefinedStory {...args} />,
456
458
  };
459
+
460
+ const flatItems = [
461
+ {
462
+ value: 'north_america',
463
+ label: 'Северная Америка',
464
+ },
465
+ {
466
+ value: 'rio_de_janeiro',
467
+ label: 'Рио-де-Жанейро',
468
+ },
469
+ {
470
+ value: 'sao_paulo',
471
+ label: 'Сан-Паулу',
472
+ },
473
+ {
474
+ value: 'buenos_aires',
475
+ label: 'Буэнос-Айрес',
476
+ },
477
+ {
478
+ value: 'cordoba',
479
+ label: 'Кордова',
480
+ },
481
+ {
482
+ value: 'bogota',
483
+ label: 'Богота',
484
+ },
485
+ {
486
+ value: 'medellin',
487
+ label: 'Медельин',
488
+ },
489
+ {
490
+ value: 'paris',
491
+ label: 'Париж',
492
+ },
493
+ {
494
+ value: 'lyon',
495
+ label: 'Лион',
496
+ },
497
+ {
498
+ value: 'berlin',
499
+ label: 'Берлин',
500
+ },
501
+ {
502
+ value: 'munich',
503
+ label: 'Мюнхен',
504
+ },
505
+ {
506
+ value: 'rome',
507
+ label: 'Рим',
508
+ },
509
+ {
510
+ value: 'milan',
511
+ label: 'Милан',
512
+ },
513
+ {
514
+ value: 'madrid',
515
+ label: 'Мадрид',
516
+ },
517
+ {
518
+ value: 'barcelona',
519
+ label: 'Барселона',
520
+ },
521
+ {
522
+ value: 'london',
523
+ label: 'Лондон',
524
+ },
525
+ {
526
+ value: 'manchester',
527
+ label: 'Манчестер',
528
+ },
529
+ {
530
+ value: 'beijing',
531
+ label: 'Пекин',
532
+ },
533
+ {
534
+ value: 'shanghai',
535
+ label: 'Шанхай',
536
+ },
537
+ {
538
+ value: 'tokyo',
539
+ label: 'Токио',
540
+ },
541
+ {
542
+ value: 'osaka',
543
+ label: 'Осака',
544
+ },
545
+ {
546
+ value: 'delhi',
547
+ label: 'Дели',
548
+ },
549
+ {
550
+ value: 'mumbai',
551
+ label: 'Мумбаи',
552
+ },
553
+ {
554
+ value: 'seoul',
555
+ label: 'Сеул',
556
+ },
557
+ {
558
+ value: 'busan',
559
+ label: 'Пусан',
560
+ },
561
+ {
562
+ value: 'bangkok',
563
+ label: 'Бангкок',
564
+ },
565
+ {
566
+ value: 'phuket',
567
+ label: 'Пхукет',
568
+ },
569
+ {
570
+ value: 'africa',
571
+ label: 'Африка',
572
+ },
573
+ ];
574
+
575
+ const SelectAllStory = (args: StorySelectProps) => {
576
+ const [value, setValue] = useState([]);
577
+ const [checked, setChecked] = useState(false);
578
+ const [indeterminate, setIndeterminate] = useState(false);
579
+
580
+ const handleClick = () => {
581
+ if (checked && !indeterminate) {
582
+ setValue([]);
583
+ } else {
584
+ setValue(flatItems.map((item) => item.value));
585
+ }
586
+ };
587
+
588
+ React.useEffect(() => {
589
+ if (value.length === 0) {
590
+ setChecked(false);
591
+ setIndeterminate(false);
592
+ } else if (value.length === flatItems.length) {
593
+ setChecked(true);
594
+ setIndeterminate(false);
595
+ } else {
596
+ setChecked(true);
597
+ setIndeterminate(true);
598
+ }
599
+ }, [value]);
600
+
601
+ return (
602
+ <div style={{ width: '400px' }}>
603
+ <Select
604
+ placeholder="Placeholder"
605
+ multiselect
606
+ items={flatItems}
607
+ value={value}
608
+ onChange={setValue}
609
+ listOverflow="auto"
610
+ listMaxHeight="300px"
611
+ selectAllOptions={{
612
+ sticky: args?.selectAllSticky || false,
613
+ label: args?.selectAllLabel,
614
+ checked,
615
+ indeterminate,
616
+ onClick: handleClick,
617
+ }}
618
+ />
619
+ </div>
620
+ );
621
+ };
622
+
623
+ export const SelectAll: StoryObj<StorySelectProps> = {
624
+ render: (args) => <SelectAllStory {...args} />,
625
+ argTypes: {
626
+ selectAllSticky: {
627
+ control: 'boolean',
628
+ },
629
+ selectAllLabel: {
630
+ control: 'text',
631
+ },
632
+ },
633
+ args: {
634
+ selectAllSticky: false,
635
+ selectAllLabel: 'Выбрать все',
636
+ },
637
+ parameters: {
638
+ controls: {
639
+ include: ['selectAllSticky', 'selectAllLabel'],
640
+ },
641
+ },
642
+ };