@salutejs/plasma-new-hope 0.324.0-dev.0 → 0.324.1-canary.1963.15248654504.0

package/styled-components/cjs/components/PaginationDots/PaginationDots.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaginationDots = exports.DotsBase = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * Оборачивающий компонент для пагинации точками.
+ * Стилизованный компонент, обладающий всеми свойствами ``div``.
+ */
+var DotsBase = exports.DotsBase = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
+  componentId: "plasma-new-hope__sc-1ritf0l-0"
+})(["display:flex;flex-wrap:wrap;align-self:center;align-items:center;margin:0;padding:0;list-style:none;"]);
+
+/**
+ * Оборачивающий компонент для пагинации точками.
+ * Стилизованный компонент, обладающий всеми свойствами ``div``.
+ * @deprecated
+ */
+var PaginationDots = exports.PaginationDots = /*#__PURE__*/(0, _styledComponents["default"])(DotsBase).withConfig({
+  componentId: "plasma-new-hope__sc-1ritf0l-1"
+})([""]);

package/styled-components/cjs/components/PaginationDots/SmartPaginationDots.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SmartPaginationDots = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
+var _usePaginationDots2 = /*#__PURE__*/require("./usePaginationDots");
+var _PaginationDots = /*#__PURE__*/require("./PaginationDots");
+var _PaginationDot = /*#__PURE__*/require("./PaginationDot");
+var _excluded = ["items", "index", "visibleItems", "onIndexChange"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/**
+ * Компонент для отображения точек пагинации
+ * с возможностью ограничения количества видимых элементов.
+ * @deprecated
+ */
+var SmartPaginationDots = exports.SmartPaginationDots = function SmartPaginationDots(_ref) {
+  var items = _ref.items,
+    index = _ref.index,
+    visibleItems = _ref.visibleItems,
+    onIndexChange = _ref.onIndexChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _usePaginationDots = (0, _usePaginationDots2.usePaginationDots)({
+      items: items,
+      index: index,
+      visibleItems: visibleItems
+    }),
+    sliced = _usePaginationDots.sliced,
+    activeId = _usePaginationDots.activeId;
+  return /*#__PURE__*/_react["default"].createElement(_PaginationDots.PaginationDots, rest, sliced.map(function (_ref2, i) {
+    var id = _ref2.id;
+    return /*#__PURE__*/_react["default"].createElement(_PaginationDot.PaginationDot, {
+      key: "item:".concat(i),
+      isActive: id === activeId,
+      onClick: function onClick() {
+        return onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(i);
+      }
+    });
+  }));
+};

package/styled-components/cjs/components/PaginationDots/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PaginationDot", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationDot.PaginationDot;
+  }
+});
+Object.defineProperty(exports, "PaginationDots", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationDots.PaginationDots;
+  }
+});
+Object.defineProperty(exports, "SmartPaginationDots", {
+  enumerable: true,
+  get: function get() {
+    return _SmartPaginationDots.SmartPaginationDots;
+  }
+});
+var _SmartPaginationDots = /*#__PURE__*/require("./SmartPaginationDots");
+var _PaginationDots = /*#__PURE__*/require("./PaginationDots");
+var _PaginationDot = /*#__PURE__*/require("./PaginationDot");

package/styled-components/cjs/components/PaginationDots/usePaginationDots.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePaginationDots = void 0;
+var _react = /*#__PURE__*/require("react");
+var usePaginationDots = exports.usePaginationDots = function usePaginationDots(_ref) {
+  var items = _ref.items,
+    index = _ref.index,
+    _ref$visibleItems = _ref.visibleItems,
+    visibleItems = _ref$visibleItems === void 0 ? 7 : _ref$visibleItems;
+  var activeId = items[index].id;
+  var prevIndex = (0, _react.useRef)(null);
+  var direction = 0;
+  if (prevIndex.current !== null) {
+    direction = index > prevIndex.current ? 1 : -1;
+  }
+  var start;
+  var end;
+  if (direction === 1) {
+    end = Math.min(Math.max(index + 2, visibleItems), items.length);
+    start = Math.max(end - visibleItems, 0);
+  } else if (direction === -1) {
+    start = Math.min(Math.max(index - 1, 0), items.length - visibleItems);
+    end = start + visibleItems;
+  } else {
+    start = Math.max(index - Math.floor(visibleItems / 2), 0);
+    end = Math.min(start + visibleItems, items.length);
+    start = end - visibleItems;
+  }
+  var sliced = items.slice(start, end);
+  prevIndex.current = index;
+  return {
+    sliced: sliced,
+    activeId: activeId
+  };
+};

package/styled-components/cjs/components/Select/Select.tokens.js

@@ -36,6 +36,8 @@ var tokens = exports.tokens = {
   itemIconSizeTight: '--plasma-select-item-icon-size-tight',
   itemIconMargin: '--plasma-select-item-icon-margin',
   itemBackgroundHover: '--plasma-select-item-background-hover',
+  itemDisabledOpacity: '--plasma-select-item-disabled-opacity',
+  itemDisabledColor: '--plasma-select-item-disabled-color',
   cellPadding: '--plasma-select-cell-padding',
   cellPaddingLeftContent: '--plasma-select-cell-padding-left-content',
   cellPaddingContent: '--plasma-select-cell-padding-content',

package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.js

@@ -103,7 +103,9 @@ var Item = exports.Item = function Item(_ref) {
   }))), !multiselect && checked.get(item.value) === 'done' && /*#__PURE__*/_react["default"].createElement(_Item.StyledIconDone, {
     size: (0, _utils2.sizeToIconSize)(size, variant),
     color: "inherit"
-  })), renderItem ? /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, renderItem(item)) : /*#__PURE__*/_react["default"].createElement(_Item.StyledWrapper, null, /*#__PURE__*/_react["default"].createElement(_Item.StyledCell, {
+  })), renderItem ? /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, renderItem(item)) : /*#__PURE__*/_react["default"].createElement(_Item.StyledWrapper, {
+    disabled: itemDisabled
+  }, /*#__PURE__*/_react["default"].createElement(_Item.StyledCell, {
     contentLeft: contentLeft,
     contentRight: contentRight
     // TODO: #1548

package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js

@@ -21,7 +21,10 @@ var mergedIndicatorConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Indicator.in
 var Indicator = /*#__PURE__*/(0, _engines.component)(mergedIndicatorConfig);
 var StyledWrapper = exports.StyledWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-0"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");width:100%;& div.cell-content,& div.cell-textbox{flex:1;}& div.cell-textbox-title{position:relative;}& div.cell-textbox-title:before{content:' ';visibility:hidden;}& div.cell-textbox-title span{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"], _Cell.cellTokens.cellTitleColor, _Select.constants.cellTitleColor, _Cell.cellTokens.cellBackgroundColor, _Select.constants.cellBackgroundColor, _Cell.cellTokens.cellPadding, _Select.tokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Select.tokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Select.tokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Select.tokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Select.tokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Select.tokens.cellGap, _Cell.cellTokens.cellTitleFontFamily, _Select.tokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Select.tokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Select.tokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Select.tokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Select.tokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Select.tokens.cellTitleLineHeight);
+})(["", ":", ";", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");width:100%;& div.cell-content,& div.cell-textbox{flex:1;}& div.cell-textbox-title{position:relative;}& div.cell-textbox-title:before{content:' ';visibility:hidden;}& div.cell-textbox-title span{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"], _Cell.cellTokens.cellTitleColor, function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? "var(".concat(_Select.tokens.itemDisabledColor, ")") : "var(".concat(_Select.constants.cellTitleColor, ")");
+}, _Cell.cellTokens.cellBackgroundColor, _Select.constants.cellBackgroundColor, _Cell.cellTokens.cellPadding, _Select.tokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Select.tokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Select.tokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Select.tokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Select.tokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Select.tokens.cellGap, _Cell.cellTokens.cellTitleFontFamily, _Select.tokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Select.tokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Select.tokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Select.tokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Select.tokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Select.tokens.cellTitleLineHeight);
 var StyledCell = exports.StyledCell = /*#__PURE__*/(0, _styledComponents["default"])(Cell).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-1"
 })([""]);
@@ -39,47 +42,47 @@ var sizeMap = exports.sizeMap = {
 };
 var StyledArrow = exports.StyledArrow = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconDisclosureRightCentered).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-4"
-})(["width:", ";height:", ";"], function (_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'xs' : _ref$size;
-  return "var(".concat(_Select.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-}, function (_ref2) {
+})(["width:", ";height:", ";"], function (_ref2) {
   var _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 'xs' : _ref2$size;
   return "var(".concat(_Select.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-});
-var StyledIconDone = exports.StyledIconDone = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconDone).withConfig({
-  componentId: "plasma-new-hope__sc-fr2h0y-5"
-})(["width:", ";height:", ";"], function (_ref3) {
+}, function (_ref3) {
   var _ref3$size = _ref3.size,
     size = _ref3$size === void 0 ? 'xs' : _ref3$size;
   return "var(".concat(_Select.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-}, function (_ref4) {
+});
+var StyledIconDone = exports.StyledIconDone = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconDone).withConfig({
+  componentId: "plasma-new-hope__sc-fr2h0y-5"
+})(["width:", ";height:", ";"], function (_ref4) {
   var _ref4$size = _ref4.size,
     size = _ref4$size === void 0 ? 'xs' : _ref4$size;
   return "var(".concat(_Select.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
+}, function (_ref5) {
+  var _ref5$size = _ref5.size,
+    size = _ref5$size === void 0 ? 'xs' : _ref5$size;
+  return "var(".concat(_Select.tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
 });
 var DisclosureIconWrapper = exports.DisclosureIconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-6"
 })(["margin:var(", ");line-height:0;color:var(", ");&:hover{color:var(", ");}"], _Select.tokens.disclosureIconMargin, _Select.tokens.disclosureIconColor, _Select.tokens.disclosureIconColorHover);
 var IconWrapper = exports.IconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-7"
-})(["display:flex;align-items:center;justify-content:center;flex:none;width:", ";height:", ";margin:var(", ");line-height:0;color:var(", ");"], function (_ref5) {
-  var variant = _ref5.variant;
-  return "var(".concat(variant === 'tight' ? _Select.tokens.itemIconSizeTight : _Select.tokens.itemIconSize, ")");
-}, function (_ref6) {
+})(["display:flex;align-items:center;justify-content:center;flex:none;width:", ";height:", ";margin:var(", ");line-height:0;color:var(", ");"], function (_ref6) {
   var variant = _ref6.variant;
   return "var(".concat(variant === 'tight' ? _Select.tokens.itemIconSizeTight : _Select.tokens.itemIconSize, ")");
+}, function (_ref7) {
+  var variant = _ref7.variant;
+  return "var(".concat(variant === 'tight' ? _Select.tokens.itemIconSizeTight : _Select.tokens.itemIconSize, ")");
 }, _Select.tokens.itemIconMargin, _Select.tokens.checkboxFillColor);
 var StyledText = exports.StyledText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-8"
 })(["", ";flex:1;"], /*#__PURE__*/(0, _mixins.applyEllipsis)());
 var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-9"
-})(["display:flex;align-items:center;min-height:var(", ");margin:0 calc(0.125rem + var(", ",0rem));box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");color:var(--text-primary);border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], _Select.tokens.itemHeight, _Select.tokens.dropdownBorderWidth, function (_ref7) {
-  var variant = _ref7.variant;
+})(["display:flex;align-items:center;min-height:var(", ");margin:0 calc(0.125rem + var(", ",0rem));box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");color:var(--text-primary);border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:var(", ");color:var(", ");cursor:not-allowed;}:focus{outline:none;}", ";"], _Select.tokens.itemHeight, _Select.tokens.dropdownBorderWidth, function (_ref8) {
+  var variant = _ref8.variant;
   return "var(".concat(variant === 'tight' ? _Select.tokens.itemPaddingTight : _Select.tokens.itemPadding, ")");
-}, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight, _Select.constants.itemBackground, _Select.tokens.borderRadius, _Select.tokens.dropdownBorderWidth, _Select.classes.dropdownItemIsDisabled, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsActive, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsDisabled, _Select.constants.opacity, /*#__PURE__*/(0, _mixins.addFocus)({
+}, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight, _Select.constants.itemBackground, _Select.tokens.borderRadius, _Select.tokens.dropdownBorderWidth, _Select.classes.dropdownItemIsDisabled, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsActive, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsDisabled, _Select.tokens.itemDisabledOpacity, _Select.tokens.itemDisabledColor, /*#__PURE__*/(0, _mixins.addFocus)({
   outlineSize: '0.0625rem',
   outlineOffset: '0',
   outlineColor: /*#__PURE__*/"var(".concat(_Select.constants.focusColor, ")"),

package/styled-components/cjs/examples/plasma_b2c/components/Note/Note.config.js

@@ -20,10 +20,10 @@ var config = exports.config = {
       info: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-info);", ":var(--text-primary);", ":var(--text-info);"], _Note.noteTokens.background, _Note.noteTokens.color, _Note.noteTokens.contentBeforeColor)
     },
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem 1.875rem;", ":1.5rem 1.75rem;", ":0.875rem;", ":0.75rem;", ":1rem;", ":0.25rem;", ":1.5rem;", ":2rem;", ":0.25rem 0;", ":var(--plasma-typo-text-l-font-family);", ":var(--plasma-typo-text-l-font-size);", ":var(--plasma-typo-text-l-font-style);", ":var(--plasma-typo-text-l-bold-font-weight);", ":var(--plasma-typo-text-l-letter-spacing);", ":var(--plasma-typo-text-l-line-height);", ":var(--plasma-typo-text-l-font-family);", ":var(--plasma-typo-text-l-font-size);", ":var(--plasma-typo-text-l-font-style);", ":var(--plasma-typo-text-l-font-weight);", ":var(--plasma-typo-text-l-letter-spacing);", ":var(--plasma-typo-text-l-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.25rem 1.5rem;", ":1.25rem;", ":0.75rem;", ":0.625rem;", ":0.75rem;", ":0.125rem;", ":1.5rem;", ":1.5rem;", ":0;", ":var(--plasma-typo-text-m-font-family);", ":var(--plasma-typo-text-m-font-size);", ":var(--plasma-typo-text-m-font-style);", ":var(--plasma-typo-text-m-bold-font-weight);", ":var(--plasma-typo-text-m-letter-spacing);", ":var(--plasma-typo-text-m-line-height);", ":var(--plasma-typo-text-m-font-family);", ":var(--plasma-typo-text-m-font-size);", ":var(--plasma-typo-text-m-font-style);", ":var(--plasma-typo-text-m-font-weight);", ":var(--plasma-typo-text-m-letter-spacing);", ":var(--plasma-typo-text-m-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem 1.25rem;", ":1rem;", ":0.625rem;", ":0.5rem;", ":0.75rem;", ":0.125rem;", ":1rem;", ":1.125rem;", ":0.063rem 0;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-bold-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem 1rem;", ":0.75rem;", ":0.5rem;", ":0.375rem;", ":0.5rem;", ":0.125rem;", ":1rem;", ":1rem;", ":0;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-bold-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem 1.875rem;", ":1.5rem 1.75rem;", ":0.875rem;", ":0.75rem;", ":1rem;", ":0.25rem;", ":1rem;", ":1rem;", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":1.5rem;", ":1.5rem;", ":1.5rem;", ":2rem;", ":0.25rem 0;", ":var(--plasma-typo-text-l-font-family);", ":var(--plasma-typo-text-l-font-size);", ":var(--plasma-typo-text-l-font-style);", ":var(--plasma-typo-text-l-bold-font-weight);", ":var(--plasma-typo-text-l-letter-spacing);", ":var(--plasma-typo-text-l-line-height);", ":1.875rem;", ":var(--plasma-typo-text-l-font-family);", ":var(--plasma-typo-text-l-font-size);", ":var(--plasma-typo-text-l-font-style);", ":var(--plasma-typo-text-l-font-weight);", ":var(--plasma-typo-text-l-letter-spacing);", ":var(--plasma-typo-text-l-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.closeIconTop, _Note.noteTokens.closeIconRight, _Note.noteTokens.closeIconColor, _Note.noteTokens.closeIconColorOnHover, _Note.noteTokens.closeIconSize, _Note.noteTokens.closeIconButtonSize, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.titlePaddingRight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.25rem 1.5rem;", ":1.25rem;", ":0.75rem;", ":0.625rem;", ":0.75rem;", ":0.125rem;", ":0.75rem;", ":0.75rem;", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":1.5rem;", ":1.5rem;", ":1.5rem;", ":1.5rem;", ":0;", ":var(--plasma-typo-text-m-font-family);", ":var(--plasma-typo-text-m-font-size);", ":var(--plasma-typo-text-m-font-style);", ":var(--plasma-typo-text-m-bold-font-weight);", ":var(--plasma-typo-text-m-letter-spacing);", ":var(--plasma-typo-text-m-line-height);", ":1.75rem;", ":var(--plasma-typo-text-m-font-family);", ":var(--plasma-typo-text-m-font-size);", ":var(--plasma-typo-text-m-font-style);", ":var(--plasma-typo-text-m-font-weight);", ":var(--plasma-typo-text-m-letter-spacing);", ":var(--plasma-typo-text-m-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.closeIconTop, _Note.noteTokens.closeIconRight, _Note.noteTokens.closeIconColor, _Note.noteTokens.closeIconColorOnHover, _Note.noteTokens.closeIconSize, _Note.noteTokens.closeIconButtonSize, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.titlePaddingRight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem 1.25rem;", ":1rem;", ":0.625rem;", ":0.5rem;", ":0.75rem;", ":0.125rem;", ":0.625rem;", ":0.625rem;", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":1.5rem;", ":1.5rem;", ":1rem;", ":1.125rem;", ":0.063rem 0;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-bold-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":1.625rem;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.closeIconTop, _Note.noteTokens.closeIconRight, _Note.noteTokens.closeIconColor, _Note.noteTokens.closeIconColorOnHover, _Note.noteTokens.closeIconSize, _Note.noteTokens.closeIconButtonSize, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.titlePaddingRight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem 1rem;", ":0.75rem;", ":0.5rem;", ":0.375rem;", ":0.5rem;", ":0.125rem;", ":0.625rem;", ":0.625rem;", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-bold-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":1.5rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.closeIconTop, _Note.noteTokens.closeIconRight, _Note.noteTokens.closeIconColor, _Note.noteTokens.closeIconColorOnHover, _Note.noteTokens.closeIconSize, _Note.noteTokens.closeIconButtonSize, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.titlePaddingRight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight)
     }
   }
 };

package/styled-components/cjs/examples/plasma_b2c/components/Note/Note.stories.tsx

@@ -67,6 +67,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         text: 'Text',
         enableContentBefore: true,
         contentBeforeSizing: 'fixed',
+        hasClose: true,
     },
     render: ({ enableContentBefore, ...args }) => (
         <div style={{ height: '100vh' }}>

package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.config.js

@@ -15,16 +15,16 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--inverse-text-primary-active);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary-hover);", ":var(--inverse-text-secondary-hover);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.textFieldHintIconColor),
-      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-positive);", ":var(--surface-positive-hover);", ":var(--surface-positive-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.textFieldHintIconColor),
-      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-warning);", ":var(--surface-warning-hover);", ":var(--surface-warning-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.textFieldHintIconColor),
-      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-negative);", ":var(--surface-negative-hover);", ":var(--surface-negative-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.textFieldHintIconColor),
-      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover),
-      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover),
-      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover),
-      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-active);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-light-surface-transparent-deep-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover),
-      black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-active);", ":var(--on-light-surface-solid-default);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-light-surface-solid-default-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover),
-      white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-text-primary-hover);", ":var(--on-light-text-primary-active);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary-hover);", ":var(--on-light-text-secondary-active);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-dark-surface-solid-default-active);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.itemBackgroundHover, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--inverse-text-primary-active);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary-hover);", ":var(--inverse-text-secondary-hover);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor, _.selectTokens.textFieldHintIconColor),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-positive);", ":var(--surface-positive-hover);", ":var(--surface-positive-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor, _.selectTokens.textFieldHintIconColor),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-warning);", ":var(--surface-warning-hover);", ":var(--surface-warning-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor, _.selectTokens.textFieldHintIconColor),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-negative);", ":var(--surface-negative-hover);", ":var(--surface-negative-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor, _.selectTokens.textFieldHintIconColor),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-active);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-light-surface-transparent-deep-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor),
+      black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-active);", ":var(--on-light-surface-solid-default);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-light-surface-solid-default-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor),
+      white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-text-primary-hover);", ":var(--on-light-text-primary-active);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary-hover);", ":var(--on-light-text-secondary-active);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-dark-surface-solid-default-active);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":0.4;", ":var(--text-primary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.itemBackgroundHover, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":-0.0625rem -0.438rem -0.0625rem 0.75rem;", ":0.25rem;", ":-0.438rem -0.438rem -0.438rem 0;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.688rem -0.5rem;", ":2.375rem;", ":0.563rem -2.938rem auto auto;", ":0.563rem -2.188rem auto auto;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;", ":1.5rem auto auto -0.875rem;", ":1.5rem -0.875rem auto auto;", ":1.5rem -2.488rem auto auto;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0  0.75rem 0 1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 -0.125rem 0 0.5rem;", ":3.5rem;", ":1.5rem 0 1.5rem;", ":0.125rem;", ":0.875rem;", ":1.5rem;", ":1rem 1.125rem;", ":0.75rem 1.125rem;", ":0.75rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.5rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.25rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":transparent;", ":0.125rem;", ":var(--text-secondary);", ":0.375rem;"], _.selectTokens.textFieldHeight, _.selectTokens.textFieldPadding, _.selectTokens.textFieldPaddingWithChips, _.selectTokens.textFieldBorderRadius, _.selectTokens.textFieldLeftContentMargin, _.selectTokens.textFieldRightContentMargin, _.selectTokens.textFieldRightContentWithHintMargin, _.selectTokens.textFieldContentRightWrapperGap, _.selectTokens.textFieldContentRightWrapperMargin, _.selectTokens.textFieldTextBeforeMargin, _.selectTokens.textFieldTextAfterMargin, _.selectTokens.textFieldFontFamily, _.selectTokens.textFieldFontSize, _.selectTokens.textFieldFontStyle, _.selectTokens.textFieldFontWeight, _.selectTokens.textFieldLetterSpacing, _.selectTokens.textFieldLineHeight, _.selectTokens.textFieldLabelOffset, _.selectTokens.textFieldLabelFontFamily, _.selectTokens.textFieldLabelFontSize, _.selectTokens.textFieldLabelFontStyle, _.selectTokens.textFieldLabelFontWeight, _.selectTokens.textFieldLabelLetterSpacing, _.selectTokens.textFieldLabelLineHeight, _.selectTokens.textFieldHintMargin, _.selectTokens.textFieldHintTargetSize, _.selectTokens.textFieldHintInnerLabelPlacementOffset, _.selectTokens.textFieldClearHintInnerLabelPlacementOffset, _.selectTokens.textFieldLeftHelperOffset, _.selectTokens.textFieldLeftHelperFontFamily, _.selectTokens.textFieldLeftHelperFontSize, _.selectTokens.textFieldLeftHelperFontStyle, _.selectTokens.textFieldLeftHelperFontWeight, _.selectTokens.textFieldLeftHelperLetterSpacing, _.selectTokens.textFieldLeftHelperLineHeight, _.selectTokens.textFieldLabelInnerPadding, _.selectTokens.textFieldContentLabelInnerPadding, _.selectTokens.textFieldIndicatorSizeInner, _.selectTokens.textFieldIndicatorSizeOuter, _.selectTokens.textFieldIndicatorLabelPlacementInner, _.selectTokens.textFieldIndicatorLabelPlacementOuter, _.selectTokens.textFieldIndicatorLabelPlacementInnerRight, _.selectTokens.textFieldIndicatorLabelPlacementOuterRight, _.selectTokens.textFieldClearIndicatorLabelPlacementInner, _.selectTokens.textFieldClearIndicatorLabelPlacementInnerRight, _.selectTokens.textFieldClearIndicatorHintInnerRight, _.selectTokens.textFieldChipGap, _.selectTokens.textFieldChipBorderRadius, _.selectTokens.textFieldChipWidth, _.selectTokens.textFieldChipHeight, _.selectTokens.textFieldChipPadding, _.selectTokens.textFieldChipClearContentMarginLeft, _.selectTokens.textFieldChipClearContentMarginRight, _.selectTokens.textFieldChipCloseIconSize, _.selectTokens.textFieldChipFontFamily, _.selectTokens.textFieldChipFontSize, _.selectTokens.textFieldChipFontStyle, _.selectTokens.textFieldChipFontWeight, _.selectTokens.textFieldChipLetterSpacing, _.selectTokens.textFieldChipLineHeight, _.selectTokens.buttonArrowMargin, _.selectTokens.targetHeight, _.selectTokens.buttonPadding, _.selectTokens.padding, _.selectTokens.borderRadius, _.selectTokens.itemHeight, _.selectTokens.itemPadding, _.selectTokens.itemPaddingTight, _.selectTokens.itemBorderRadius, _.selectTokens.itemIconMargin, _.selectTokens.itemIconSize, _.selectTokens.itemIconSizeTight, _.selectTokens.cellPadding, _.selectTokens.cellPaddingLeftContent, _.selectTokens.cellPaddingContent, _.selectTokens.cellPaddingRightContent, _.selectTokens.cellTextboxGap, _.selectTokens.cellGap, _.selectTokens.cellTitleFontFamily, _.selectTokens.cellTitleFontSize, _.selectTokens.cellTitleFontStyle, _.selectTokens.cellTitleFontWeight, _.selectTokens.cellTitleLetterSpacing, _.selectTokens.cellTitleLineHeight, _.selectTokens.fontFamily, _.selectTokens.fontSize, _.selectTokens.fontStyle, _.selectTokens.fontWeight, _.selectTokens.fontLetterSpacing, _.selectTokens.fontLineHeight, _.selectTokens.checkboxTriggerSize, _.selectTokens.checkboxTriggerSizeTight, _.selectTokens.checkboxTriggerBorderRadius, _.selectTokens.checkboxTriggerBorderRadiusTight, _.selectTokens.checkboxFillColor, _.selectTokens.checkboxIconColor, _.selectTokens.checkboxTriggerBorderCheckedColor, _.selectTokens.checkboxTriggerBorderWidth, _.selectTokens.checkboxTriggerBorderColor, _.selectTokens.indicatorSize),

package/styled-components/cjs/examples/plasma_web/components/Note/Note.config.js

@@ -20,10 +20,10 @@ var config = exports.config = {
       info: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-info);", ":var(--text-primary);", ":var(--text-info);"], _Note.noteTokens.background, _Note.noteTokens.color, _Note.noteTokens.contentBeforeColor)
     },
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem 1.875rem;", ":1.5rem 1.75rem;", ":0.875rem;", ":0.75rem;", ":1rem;", ":0.25rem;", ":1.5rem;", ":2rem;", ":0.25rem 0;", ":var(--plasma-typo-text-l-font-family);", ":var(--plasma-typo-text-l-font-size);", ":var(--plasma-typo-text-l-font-style);", ":var(--plasma-typo-text-l-bold-font-weight);", ":var(--plasma-typo-text-l-letter-spacing);", ":var(--plasma-typo-text-l-line-height);", ":var(--plasma-typo-text-l-font-family);", ":var(--plasma-typo-text-l-font-size);", ":var(--plasma-typo-text-l-font-style);", ":var(--plasma-typo-text-l-font-weight);", ":var(--plasma-typo-text-l-letter-spacing);", ":var(--plasma-typo-text-l-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.25rem 1.5rem;", ":1.25rem;", ":0.75rem;", ":0.625rem;", ":0.75rem;", ":0.125rem;", ":1.5rem;", ":1.5rem;", ":0;", ":var(--plasma-typo-text-m-font-family);", ":var(--plasma-typo-text-m-font-size);", ":var(--plasma-typo-text-m-font-style);", ":var(--plasma-typo-text-m-bold-font-weight);", ":var(--plasma-typo-text-m-letter-spacing);", ":var(--plasma-typo-text-m-line-height);", ":var(--plasma-typo-text-m-font-family);", ":var(--plasma-typo-text-m-font-size);", ":var(--plasma-typo-text-m-font-style);", ":var(--plasma-typo-text-m-font-weight);", ":var(--plasma-typo-text-m-letter-spacing);", ":var(--plasma-typo-text-m-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem 1.25rem;", ":1rem;", ":0.625rem;", ":0.5rem;", ":0.75rem;", ":0.125rem;", ":1rem;", ":1.125rem;", ":0.063rem 0;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-bold-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem 1rem;", ":0.75rem;", ":0.5rem;", ":0.375rem;", ":0.5rem;", ":0.125rem;", ":1rem;", ":1rem;", ":0;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-bold-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem 1.875rem;", ":1.5rem 1.75rem;", ":0.875rem;", ":0.75rem;", ":1rem;", ":0.25rem;", ":1rem;", ":1rem;", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":1.5rem;", ":1.5rem;", ":1.5rem;", ":2rem;", ":0.25rem 0;", ":var(--plasma-typo-text-l-font-family);", ":var(--plasma-typo-text-l-font-size);", ":var(--plasma-typo-text-l-font-style);", ":var(--plasma-typo-text-l-bold-font-weight);", ":var(--plasma-typo-text-l-letter-spacing);", ":var(--plasma-typo-text-l-line-height);", ":1.875rem;", ":var(--plasma-typo-text-l-font-family);", ":var(--plasma-typo-text-l-font-size);", ":var(--plasma-typo-text-l-font-style);", ":var(--plasma-typo-text-l-font-weight);", ":var(--plasma-typo-text-l-letter-spacing);", ":var(--plasma-typo-text-l-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.closeIconTop, _Note.noteTokens.closeIconRight, _Note.noteTokens.closeIconColor, _Note.noteTokens.closeIconColorOnHover, _Note.noteTokens.closeIconSize, _Note.noteTokens.closeIconButtonSize, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.titlePaddingRight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.25rem 1.5rem;", ":1.25rem;", ":0.75rem;", ":0.625rem;", ":0.75rem;", ":0.125rem;", ":0.75rem;", ":0.75rem;", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":1.5rem;", ":1.5rem;", ":1.5rem;", ":1.5rem;", ":0;", ":var(--plasma-typo-text-m-font-family);", ":var(--plasma-typo-text-m-font-size);", ":var(--plasma-typo-text-m-font-style);", ":var(--plasma-typo-text-m-bold-font-weight);", ":var(--plasma-typo-text-m-letter-spacing);", ":var(--plasma-typo-text-m-line-height);", ":1.75rem;", ":var(--plasma-typo-text-m-font-family);", ":var(--plasma-typo-text-m-font-size);", ":var(--plasma-typo-text-m-font-style);", ":var(--plasma-typo-text-m-font-weight);", ":var(--plasma-typo-text-m-letter-spacing);", ":var(--plasma-typo-text-m-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.closeIconTop, _Note.noteTokens.closeIconRight, _Note.noteTokens.closeIconColor, _Note.noteTokens.closeIconColorOnHover, _Note.noteTokens.closeIconSize, _Note.noteTokens.closeIconButtonSize, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.titlePaddingRight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem 1.25rem;", ":1rem;", ":0.625rem;", ":0.5rem;", ":0.75rem;", ":0.125rem;", ":0.625rem;", ":0.625rem;", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":1.5rem;", ":1.5rem;", ":1rem;", ":1.125rem;", ":0.063rem 0;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-bold-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":1.625rem;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.closeIconTop, _Note.noteTokens.closeIconRight, _Note.noteTokens.closeIconColor, _Note.noteTokens.closeIconColorOnHover, _Note.noteTokens.closeIconSize, _Note.noteTokens.closeIconButtonSize, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.titlePaddingRight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem 1rem;", ":0.75rem;", ":0.5rem;", ":0.375rem;", ":0.5rem;", ":0.125rem;", ":0.625rem;", ":0.625rem;", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-bold-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":1.5rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);"], _Note.noteTokens.padding, _Note.noteTokens.paddingScalable, _Note.noteTokens.borderRadius, _Note.noteTokens.gap, _Note.noteTokens.gapScalable, _Note.noteTokens.contentGap, _Note.noteTokens.closeIconTop, _Note.noteTokens.closeIconRight, _Note.noteTokens.closeIconColor, _Note.noteTokens.closeIconColorOnHover, _Note.noteTokens.closeIconSize, _Note.noteTokens.closeIconButtonSize, _Note.noteTokens.fixedContentBeforeWidth, _Note.noteTokens.fixedContentBeforeHeight, _Note.noteTokens.fixedContentBeforePadding, _Note.noteTokens.titleFontFamily, _Note.noteTokens.titleFontSize, _Note.noteTokens.titleFontStyle, _Note.noteTokens.titleFontWeight, _Note.noteTokens.titleLetterSpacing, _Note.noteTokens.titleLineHeight, _Note.noteTokens.titlePaddingRight, _Note.noteTokens.textFontFamily, _Note.noteTokens.textFontSize, _Note.noteTokens.textFontStyle, _Note.noteTokens.textFontWeight, _Note.noteTokens.textLetterSpacing, _Note.noteTokens.textLineHeight)
     }
   }
 };

package/styled-components/cjs/examples/plasma_web/components/Note/Note.stories.tsx

@@ -67,6 +67,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         text: 'Text',
         enableContentBefore: true,
         contentBeforeSizing: 'fixed',
+        hasClose: true,
     },
     render: ({ enableContentBefore, ...args }) => (
         <div style={{ height: '100vh' }}>

package/styled-components/cjs/examples/plasma_web/components/Select/Select.config.js

@@ -15,16 +15,16 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--inverse-text-primary-active);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary-hover);", ":var(--inverse-text-secondary-hover);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.textFieldBorderColor, _.selectTokens.textFieldBorderColorFocus, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.textFieldHintIconColor),
-      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-positive);", ":var(--surface-positive-hover);", ":var(--surface-positive-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.textFieldBorderColor, _.selectTokens.textFieldBorderColorFocus, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.textFieldHintIconColor),
-      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-warning);", ":var(--surface-warning-hover);", ":var(--surface-warning-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.textFieldBorderColor, _.selectTokens.textFieldBorderColorFocus, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.textFieldHintIconColor),
-      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-negative);", ":var(--surface-negative-hover);", ":var(--surface-negative-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.textFieldBorderColor, _.selectTokens.textFieldBorderColorFocus, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.textFieldHintIconColor),
-      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover),
-      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover),
-      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover),
-      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-active);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-light-surface-transparent-deep-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover),
-      black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-active);", ":var(--on-light-surface-solid-default);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-light-surface-solid-default-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover),
-      white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-text-primary-hover);", ":var(--on-light-text-primary-active);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary-hover);", ":var(--on-light-text-secondary-active);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-dark-surface-solid-default-active);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.itemBackgroundHover, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--inverse-text-primary-active);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary-hover);", ":var(--inverse-text-secondary-hover);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.textFieldBorderColor, _.selectTokens.textFieldBorderColorFocus, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor, _.selectTokens.textFieldHintIconColor),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-positive);", ":var(--surface-positive-hover);", ":var(--surface-positive-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.textFieldBorderColor, _.selectTokens.textFieldBorderColorFocus, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor, _.selectTokens.textFieldHintIconColor),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-warning);", ":var(--surface-warning-hover);", ":var(--surface-warning-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.textFieldBorderColor, _.selectTokens.textFieldBorderColorFocus, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor, _.selectTokens.textFieldHintIconColor),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--text-tertiary);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-negative);", ":var(--surface-negative-hover);", ":var(--surface-negative-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);", ":var(--text-secondary);"], _.selectTokens.textFieldColor, _.selectTokens.textFieldPlaceholderColor, _.selectTokens.textFieldPlaceholderColorFocus, _.selectTokens.textFieldBackgroundColor, _.selectTokens.textFieldBackgroundColorFocus, _.selectTokens.textFieldTextBeforeColor, _.selectTokens.textFieldTextAfterColor, _.selectTokens.textFieldLabelColor, _.selectTokens.textFieldLeftHelperColor, _.selectTokens.textFieldFocusColor, _.selectTokens.textFieldContentSlotColor, _.selectTokens.textFieldContentSlotColorHover, _.selectTokens.textFieldContentSlotColorActive, _.selectTokens.textFieldIndicatorColor, _.selectTokens.textFieldOptionalColor, _.selectTokens.textFieldBorderColor, _.selectTokens.textFieldBorderColorFocus, _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor, _.selectTokens.textFieldHintIconColor),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-active);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-light-surface-transparent-deep-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor),
+      black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-active);", ":var(--on-light-surface-solid-default);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-light-surface-solid-default-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":0.4;", ":var(--text-primary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemBackgroundHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor),
+      white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-text-primary-hover);", ":var(--on-light-text-primary-active);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary-hover);", ":var(--on-light-text-secondary-active);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-dark-surface-solid-default-active);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":0.4;", ":var(--text-primary);"], _.selectTokens.buttonColor, _.selectTokens.buttonColorHover, _.selectTokens.buttonColorActive, _.selectTokens.buttonArrowColor, _.selectTokens.buttonArrowColorHover, _.selectTokens.buttonArrowColorActive, _.selectTokens.buttonBackgroundColor, _.selectTokens.buttonBackgroundColorHover, _.selectTokens.buttonBackgroundColorActive, _.selectTokens.itemBackgroundHover, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.itemDisabledOpacity, _.selectTokens.itemDisabledColor)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":-0.0625rem -0.438rem -0.0625rem 0.75rem;", ":0.25rem;", ":-0.438rem -0.438rem -0.438rem 0;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.688rem -0.5rem;", ":2.375rem;", ":0.563rem -2.938rem auto auto;", ":0.563rem -2.188rem auto auto;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;", ":1.5rem auto auto -0.875rem;", ":1.5rem -0.875rem auto auto;", ":1.5rem -2.488rem auto auto;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0 0.75rem 0 1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 -0.125rem 0 0.5rem;", ":3.5rem;", ":1.5rem 0 1.5rem;", ":0.125rem;", ":0.875rem;", ":1.5rem;", ":1rem 1.125rem;", ":0.75rem 1.125rem;", ":0.75rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.5rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.25rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":transparent;", ":0.125rem;", ":var(--text-secondary);", ":0.375rem;"], _.selectTokens.textFieldHeight, _.selectTokens.textFieldPadding, _.selectTokens.textFieldPaddingWithChips, _.selectTokens.textFieldBorderRadius, _.selectTokens.textFieldBorderWidth, _.selectTokens.textFieldLeftContentMargin, _.selectTokens.textFieldRightContentMargin, _.selectTokens.textFieldRightContentWithHintMargin, _.selectTokens.textFieldContentRightWrapperGap, _.selectTokens.textFieldContentRightWrapperMargin, _.selectTokens.textFieldTextBeforeMargin, _.selectTokens.textFieldTextAfterMargin, _.selectTokens.textFieldFontFamily, _.selectTokens.textFieldFontSize, _.selectTokens.textFieldFontStyle, _.selectTokens.textFieldFontWeight, _.selectTokens.textFieldLetterSpacing, _.selectTokens.textFieldLineHeight, _.selectTokens.textFieldLabelOffset, _.selectTokens.textFieldLabelFontFamily, _.selectTokens.textFieldLabelFontSize, _.selectTokens.textFieldLabelFontStyle, _.selectTokens.textFieldLabelFontWeight, _.selectTokens.textFieldLabelLetterSpacing, _.selectTokens.textFieldLabelLineHeight, _.selectTokens.textFieldHintMargin, _.selectTokens.textFieldHintTargetSize, _.selectTokens.textFieldHintInnerLabelPlacementOffset, _.selectTokens.textFieldClearHintInnerLabelPlacementOffset, _.selectTokens.textFieldLeftHelperOffset, _.selectTokens.textFieldLeftHelperFontFamily, _.selectTokens.textFieldLeftHelperFontSize, _.selectTokens.textFieldLeftHelperFontStyle, _.selectTokens.textFieldLeftHelperFontWeight, _.selectTokens.textFieldLeftHelperLetterSpacing, _.selectTokens.textFieldLeftHelperLineHeight, _.selectTokens.textFieldLabelInnerPadding, _.selectTokens.textFieldContentLabelInnerPadding, _.selectTokens.textFieldIndicatorSizeInner, _.selectTokens.textFieldIndicatorSizeOuter, _.selectTokens.textFieldIndicatorLabelPlacementInner, _.selectTokens.textFieldIndicatorLabelPlacementOuter, _.selectTokens.textFieldIndicatorLabelPlacementInnerRight, _.selectTokens.textFieldIndicatorLabelPlacementOuterRight, _.selectTokens.textFieldClearIndicatorLabelPlacementInner, _.selectTokens.textFieldClearIndicatorLabelPlacementInnerRight, _.selectTokens.textFieldClearIndicatorHintInnerRight, _.selectTokens.textFieldChipGap, _.selectTokens.textFieldChipBorderRadius, _.selectTokens.textFieldChipWidth, _.selectTokens.textFieldChipHeight, _.selectTokens.textFieldChipPadding, _.selectTokens.textFieldChipClearContentMarginLeft, _.selectTokens.textFieldChipClearContentMarginRight, _.selectTokens.textFieldChipCloseIconSize, _.selectTokens.textFieldChipFontFamily, _.selectTokens.textFieldChipFontSize, _.selectTokens.textFieldChipFontStyle, _.selectTokens.textFieldChipFontWeight, _.selectTokens.textFieldChipLetterSpacing, _.selectTokens.textFieldChipLineHeight, _.selectTokens.buttonArrowMargin, _.selectTokens.targetHeight, _.selectTokens.buttonPadding, _.selectTokens.padding, _.selectTokens.borderRadius, _.selectTokens.itemHeight, _.selectTokens.itemPadding, _.selectTokens.itemPaddingTight, _.selectTokens.itemBorderRadius, _.selectTokens.itemIconMargin, _.selectTokens.itemIconSize, _.selectTokens.itemIconSizeTight, _.selectTokens.cellPadding, _.selectTokens.cellPaddingLeftContent, _.selectTokens.cellPaddingContent, _.selectTokens.cellPaddingRightContent, _.selectTokens.cellTextboxGap, _.selectTokens.cellGap, _.selectTokens.cellTitleFontFamily, _.selectTokens.cellTitleFontSize, _.selectTokens.cellTitleFontStyle, _.selectTokens.cellTitleFontWeight, _.selectTokens.cellTitleLetterSpacing, _.selectTokens.cellTitleLineHeight, _.selectTokens.fontFamily, _.selectTokens.fontSize, _.selectTokens.fontStyle, _.selectTokens.fontWeight, _.selectTokens.fontLetterSpacing, _.selectTokens.fontLineHeight, _.selectTokens.checkboxTriggerSize, _.selectTokens.checkboxTriggerSizeTight, _.selectTokens.checkboxTriggerBorderRadius, _.selectTokens.checkboxTriggerBorderRadiusTight, _.selectTokens.checkboxFillColor, _.selectTokens.checkboxIconColor, _.selectTokens.checkboxTriggerBorderCheckedColor, _.selectTokens.checkboxTriggerBorderWidth, _.selectTokens.checkboxTriggerBorderColor, _.selectTokens.indicatorSize),