@salutejs/plasma-new-hope 0.324.0-canary.1985.15205350468.0 → 0.324.1-canary.1986.15225031077.0

package/styled-components/cjs/components/Combobox/ComboboxNew/ui/SelectAll/SelectAll.styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.DividerWrapper = exports.Divider = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
+var _Combobox = /*#__PURE__*/require("../../Combobox.tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-10t9fym-0"
+})(["position:", ";z-index:10;top:0;display:flex;flex-direction:column;background:var(", ");margin-bottom:", ";border-top-left-radius:calc(var(", ") - 0.125rem - var(", ",0rem));border-top-right-radius:calc(var(", ") - 0.125rem - var(", ",0rem));"], function (_ref) {
+  var sticky = _ref.sticky;
+  return sticky ? 'sticky' : 'static';
+}, _Combobox.constants.background, function (_ref2) {
+  var variant = _ref2.variant;
+  return "var(".concat(variant === 'tight' ? _Combobox.tokens.dividerMarginBottomTight : _Combobox.tokens.dividerMarginBottom, ")");
+}, _Combobox.tokens.borderRadius, _Combobox.tokens.dropdownBorderWidth, _Combobox.tokens.borderRadius, _Combobox.tokens.dropdownBorderWidth);
+var DividerWrapper = exports.DividerWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-10t9fym-1"
+})(["margin:0 calc(0.125rem + var(", ",0rem));background:var(", ");"], _Combobox.tokens.dropdownBorderWidth, _Combobox.constants.background);
+var Divider = exports.Divider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-10t9fym-2"
+})(["height:0.0625rem;margin-top:", ";margin-right:var(", ");margin-left:var(", ");background:var(", ");"], function (_ref3) {
+  var variant = _ref3.variant;
+  return "var(".concat(variant === 'tight' ? _Combobox.tokens.dividerMarginTopTight : _Combobox.tokens.dividerMarginTop, ")");
+}, _Combobox.tokens.dividerMarginRight, _Combobox.tokens.dividerMarginLeft, _Combobox.tokens.dividerColor);

package/styled-components/cjs/components/Combobox/ComboboxNew/ui/index.js

@@ -35,4 +35,15 @@ Object.keys(_VirtualList).forEach(function (key) {
       return _VirtualList[key];
     }
   });
+});
+var _SelectAll = /*#__PURE__*/require("./SelectAll/SelectAll");
+Object.keys(_SelectAll).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SelectAll[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SelectAll[key];
+    }
+  });
 });

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

@@ -29,11 +29,12 @@ var composeNumberFormat = exports.composeNumberFormat = function composeNumberFo
         onChange(changeEvent, values);
       }
     };
-    var InputComponentWithoutEllipsis = function InputComponentWithoutEllipsis(props) {
+    var InputComponentWithoutEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return /*#__PURE__*/_react["default"].createElement(InputComponent, _extends({
+        ref: ref,
         _textEllipsisDisable: true
       }, props));
-    };
+    });
     return /*#__PURE__*/_react["default"].createElement(_reactNumberFormat.NumericFormat, _extends({
       thousandSeparator: thousandSeparator,
       decimalScale: decimalScale,

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaginationDot = exports.DotBase = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * Элемент пагинации точками.
+ * Стилизованный компонент, обладающий всеми свойствами ``div``.
+ */
+var DotBase = exports.DotBase = /*#__PURE__*/_styledComponents["default"].li.withConfig({
+  componentId: "plasma-new-hope__sc-1lu8gfj-0"
+})(["width:", ";height:0.375rem;border-radius:1rem;background:", ";transition:width 0.1s ease-in-out,background 0.3s ease-in-out;font-size:0.5rem;& + &{margin-left:0.375rem;}&:focus{outline:0 none;}"], function (_ref) {
+  var isActive = _ref.isActive;
+  return isActive ? '1.75rem' : '0.375rem';
+}, function (_ref2) {
+  var isActive = _ref2.isActive;
+  return isActive ? 'var(--text-primary)' : 'var(--surface-transparent-tertiary)';
+});
+
+/**
+ * Элемент пагинации точками.
+ * Стилизованный компонент, обладающий всеми свойствами ``div``.
+ * @deprecated
+ */
+var PaginationDot = exports.PaginationDot = /*#__PURE__*/(0, _styledComponents["default"])(DotBase).withConfig({
+  componentId: "plasma-new-hope__sc-1lu8gfj-1"
+})(["cursor:pointer;background:", ";&:hover{background:var(--text-accent);}"], function (_ref3) {
+  var isActive = _ref3.isActive;
+  return isActive ? 'var(--text-accent)' : 'var(--surface-transparent-tertiary)';
+});

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.js

@@ -427,7 +427,10 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
       listWidth: listWidth,
       ref: targetRef,
       virtual: virtual
-    }, beforeList, virtual ? /*#__PURE__*/_react["default"].createElement(_ui.VirtualList, {
+    }, beforeList, props.multiselect && props.selectAllOptions && /*#__PURE__*/_react["default"].createElement(_ui.SelectAll, {
+      selectAllOptions: props.selectAllOptions,
+      variant: variant
+    }), virtual ? /*#__PURE__*/_react["default"].createElement(_ui.VirtualList, {
       items: transformedItems,
       listMaxHeight: listMaxHeight || listHeight,
       onScroll: onScroll

package/styled-components/cjs/components/Select/Select.template-doc.mdx

@@ -508,6 +508,64 @@ Select может выглядеть как Button и как Textfield. За э
         }
         ```
     </TabItem>
+    <TabItem value="selectAll" label="Выбрать всё">
+        Работа с кнопкой "Выбрать всё" осуществляется через свойство `selectAllOptions` только в режиме `multiselect`:
+        ```tsx
+        type SelectAllProps = {
+            checked?: boolean;
+            indeterminate?: boolean;
+            label?: string;
+            onClick?: () => void;
+            sticky?: boolean;
+        };
+        ```
+        Вся логика выбора элементов и взаимодействия с компонентом лежит на стороне пользователя.
+
+        ```tsx live
+        import React, { useState } from 'react';
+        import { Select } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [checked, setChecked] = useState(false);
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
+                    <Select
+                        label="Label"
+                        placeholder="Placeholder"
+                        items={items}
+                        multiselect
+                        selectAllOptions={{
+                            checked,
+                            onClick: () => setChecked(prev => !prev)
+                        }}
+                    />
+                </div>
+            );
+        }
+        ```
+    </TabItem>
 </Tabs>
 
 

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

@@ -59,6 +59,13 @@ var tokens = exports.tokens = {
   checkboxTriggerBorderWidth: '--plasma-select-checkbox-trigger-border-width',
   indicatorSize: '--plasma-select-indicator-size',
   targetHeight: '--plasma-select-target-height',
+  dividerMarginTop: '--plasma-select-divider-margin-top',
+  dividerMarginTopTight: '--plasma-select-divider-margin-top-tight',
+  dividerMarginRight: '--plasma-select-divider-margin-right',
+  dividerMarginBottom: '--plasma-select-divider-margin-bottom',
+  dividerMarginBottomTight: '--plasma-select-divider-margin-bottom-tight',
+  dividerMarginLeft: '--plasma-select-divider-margin-left',
+  dividerColor: '--plasma-select-divider-color',
   // Токены для Button
   buttonColor: '--plasma-select-button-color',
   buttonColorHover: '--plasma-select-button-color-hover',

package/styled-components/cjs/components/Select/ui/SelectAll/SelectAll.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectAll = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
+var _Item = /*#__PURE__*/require("../Inner/ui/Item/Item.styles");
+var _SelectAll = /*#__PURE__*/require("./SelectAll.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var SelectAll = exports.SelectAll = function SelectAll(_ref) {
+  var variant = _ref.variant,
+    selectAllOptions = _ref.selectAllOptions;
+  return /*#__PURE__*/_react["default"].createElement(_SelectAll.Wrapper, {
+    variant: variant,
+    onClick: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.onClick,
+    sticky: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.sticky
+  }, /*#__PURE__*/_react["default"].createElement(_Item.Wrapper, {
+    variant: variant
+  }, /*#__PURE__*/_react["default"].createElement(_Item.IconWrapper, {
+    variant: variant
+  }, /*#__PURE__*/_react["default"].createElement(_Item.StyledCheckboxWrapper, {
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Item.StyledCheckbox, {
+    checked: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.checked,
+    indeterminate: selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.indeterminate,
+    appearance: "default"
+  }))), /*#__PURE__*/_react["default"].createElement(_Item.StyledWrapper, null, /*#__PURE__*/_react["default"].createElement(_Item.StyledCell
+  // TODO: #1548
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  , {
+    title: /*#__PURE__*/_react["default"].createElement("span", null, (selectAllOptions === null || selectAllOptions === void 0 ? void 0 : selectAllOptions.label) || 'Выбрать всё')
+  }))), /*#__PURE__*/_react["default"].createElement(_SelectAll.DividerWrapper, null, /*#__PURE__*/_react["default"].createElement(_SelectAll.Divider, {
+    variant: variant
+  })));
+};

package/styled-components/cjs/components/Select/ui/SelectAll/SelectAll.styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.DividerWrapper = exports.Divider = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
+var _Select = /*#__PURE__*/require("../../Select.tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-1f7l6yo-0"
+})(["position:", ";z-index:10;top:0;display:flex;flex-direction:column;background:var(", ");margin-right:var(", ",0rem);margin-bottom:", ";margin-left:var(", ",0rem);border-top-left-radius:calc(var(", ") - 0.125rem - var(", ",0rem));border-top-right-radius:calc(var(", ") - 0.125rem - var(", ",0rem));& > li{margin:0 0.125rem;}"], function (_ref) {
+  var sticky = _ref.sticky;
+  return sticky ? 'sticky' : 'static';
+}, _Select.constants.background, _Select.tokens.dropdownBorderWidth, function (_ref2) {
+  var variant = _ref2.variant;
+  return "var(".concat(variant === 'tight' ? _Select.tokens.dividerMarginBottomTight : _Select.tokens.dividerMarginBottom, ")");
+}, _Select.tokens.dropdownBorderWidth, _Select.tokens.borderRadius, _Select.tokens.dropdownBorderWidth, _Select.tokens.borderRadius, _Select.tokens.dropdownBorderWidth);
+var DividerWrapper = exports.DividerWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-1f7l6yo-1"
+})(["margin:0 calc(0.125rem + var(", ",0rem));background:var(", ");"], _Select.tokens.dropdownBorderWidth, _Select.constants.background);
+var Divider = exports.Divider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-1f7l6yo-2"
+})(["height:0.0625rem;margin-top:", ";margin-right:var(", ");margin-left:var(", ");background:var(", ");"], function (_ref3) {
+  var variant = _ref3.variant;
+  return "var(".concat(variant === 'tight' ? _Select.tokens.dividerMarginTopTight : _Select.tokens.dividerMarginTop, ")");
+}, _Select.tokens.dividerMarginRight, _Select.tokens.dividerMarginLeft, _Select.tokens.dividerColor);

package/styled-components/cjs/components/Select/ui/index.js

@@ -35,4 +35,15 @@ Object.keys(_VirtualList).forEach(function (key) {
       return _VirtualList[key];
     }
   });
+});
+var _SelectAll = /*#__PURE__*/require("./SelectAll/SelectAll");
+Object.keys(_SelectAll).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SelectAll[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SelectAll[key];
+    }
+  });
 });

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

@@ -413,7 +413,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       "aria-labelledby": labelId,
       "aria-describedby": helperTextId,
       placeholder: innerPlaceholderValue,
-      className: (0, _utils.cx)(hasValueClass, keepPlaceholderClass, classTextEllipsis),
+      className: (0, _utils.cx)(hasValueClass, keepPlaceholderClass, classTextEllipsis, readOnly && _TextField2.classes.readOnlyInput),
       disabled: disabled,
       readOnly: !disabled && readOnly,
       onInput: handleInput,

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

@@ -21,7 +21,8 @@ var classes = exports.classes = {
   requiredAlignRight: 'required-align-right',
   inputWrapper: 'input-wrapper',
   inputTextEllipsis: 'textfield-input-text-ellipsis',
-  contentRightCompensationMargin: 'textfield-content-right-compensation-margin'
+  contentRightCompensationMargin: 'textfield-content-right-compensation-margin',
+  readOnlyInput: 'textfield-readonly-input'
 };
 var tokens = exports.tokens = {
   color: '--plasma-textfield-color',

package/styled-components/cjs/components/TextField/variations/_label-placement/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _TextField = /*#__PURE__*/require("../../TextField.tokens");
 var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", "{position:relative;display:inline-block;color:var(", ");}}&.", "{", "{padding:var(", ");}", ":focus ~ ", ",", ".", " ~ ", ",", ".", " ~ ", "{color:var(", ");align-items:flex-start;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:100%;}&.", " ", "{color:var(", ");}}"], _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.labelColor, _TextField.classes.innerLabelPlacement, _TextField2.InputContainer, _TextField.tokens.contentLabelInnerPadding, _TextField2.Input, _TextField2.Label, _TextField2.Input, _TextField.classes.hasValue, _TextField2.Label, _TextField2.Input, _TextField.classes.keepPlaceholder, _TextField2.Label, _TextField.tokens.placeholderColor, _TextField.tokens.labelInnerPadding, _TextField.tokens.labelInnerFontFamily, _TextField.tokens.labelInnerFontSize, _TextField.tokens.labelInnerFontStyle, _TextField.tokens.labelInnerFontWeight, _TextField.tokens.labelInnerLetterSpacing, _TextField.tokens.labelInnerLineHeight, _TextField2.Label, _TextField.tokens.placeholderColor, _TextField.classes.clear, _TextField2.Label, _TextField.tokens.clearPlaceholderColor);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", "{position:relative;display:inline-block;color:var(", ");}}&.", "{", "{padding:var(", ");}", ":not(.", "):focus ~ ", ",", ".", " ~ ", ",", ".", " ~ ", "{color:var(", ");align-items:flex-start;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:100%;}&.", " ", "{color:var(", ");}}"], _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.labelColor, _TextField.classes.innerLabelPlacement, _TextField2.InputContainer, _TextField.tokens.contentLabelInnerPadding, _TextField2.Input, _TextField.classes.readOnlyInput, _TextField2.Label, _TextField2.Input, _TextField.classes.hasValue, _TextField2.Label, _TextField2.Input, _TextField.classes.keepPlaceholder, _TextField2.Label, _TextField.tokens.placeholderColor, _TextField.tokens.labelInnerPadding, _TextField.tokens.labelInnerFontFamily, _TextField.tokens.labelInnerFontSize, _TextField.tokens.labelInnerFontStyle, _TextField.tokens.labelInnerFontWeight, _TextField.tokens.labelInnerLetterSpacing, _TextField.tokens.labelInnerLineHeight, _TextField2.Label, _TextField.tokens.placeholderColor, _TextField.classes.clear, _TextField2.Label, _TextField.tokens.clearPlaceholderColor);