@salutejs/plasma-new-hope 0.117.0-canary.1344.10270215610.0 → 0.118.0-canary.1328.10279808885.0

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { accordionConfig } from '../../../../components/Accordion';
+
+import { config } from './Breadcrumbs.config';
+import { Breadcrumbs } from './Breadcrumbs';
+
+type BreadcrumbsProps = ComponentProps<typeof Breadcrumbs>;
+
+const meta: Meta<BreadcrumbsProps> = {
+    title: 'plasma_web/Breadcrumbs',
+    decorators: [WithTheme],
+    component: Breadcrumbs,
+    args: {
+        view: 'default',
+        size: 'm',
+        showItems: 2,
+        items: [
+            { title: 'Home', href: '/' },
+            { title: 'About as', href: '/' },
+            { renderItem: () => <span>Custom Item</span> },
+            { title: 'Contacts' },
+        ],
+    },
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(accordionConfig, config)),
+        ...disableProps(['separator']),
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<BreadcrumbsProps> = {
+    render: (props: BreadcrumbsProps) => {
+        return <Breadcrumbs {...props} />;
+    },
+};

package/styled-components/cjs/index.js

@@ -80,6 +80,17 @@ Object.keys(_ButtonGroup).forEach(function (key) {
     }
   });
 });
+var _Breadcrumbs = /*#__PURE__*/require("./components/Breadcrumbs");
+Object.keys(_Breadcrumbs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Breadcrumbs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Breadcrumbs[key];
+    }
+  });
+});
 var _Chip = /*#__PURE__*/require("./components/Chip");
 Object.keys(_Chip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/styled-components/es/components/Accordion/Accordion.tokens.js

@@ -23,7 +23,6 @@ export var tokens = {
   accordionItemFocus: '--plasma-accordion-item-focus',
   accordionItemBorder: '--plasma-accordion-item-border',
   accordionItemBorderBottom: '--plasma-accordion-item-border-bottom',
-  accordionItemIconColor: '--plasma-accordion-item-color-icon',
   accordionItemTitleColor: '--plasma-accordion-item-title-color',
   accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',
   accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',

package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js

@@ -33,10 +33,10 @@ export var StyledAccordionBody = /*#__PURE__*/styled.div.withConfig({
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");overflow:hidden;padding-right:var(", ");padding-left:var(", ");text-align:left;"], tokens.accordionItemTextColor, tokens.accordionItemTextFontFamily, tokens.accordionItemTextFontSize, tokens.accordionItemTextFontWeight, tokens.accordionItemTextFontStyle, tokens.accordionItemTextLetterSpacing, tokens.accordionItemTextLineHeight, tokens.accordionItemPaddingHorizontal, tokens.accordionItemPaddingHorizontalLeft);
 export var StyledArrow = /*#__PURE__*/styled(IconChevronDownFill).withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-8"
-})(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemIconColor);
+})(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemTextColor);
 export var StyledMinus = /*#__PURE__*/styled(IconMinus).withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-9"
-})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
+})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemTextColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
 export var StyledPlus = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-10"
 })(["position:relative;height:1rem;display:flex;align-items:center;justify-content:center;width:1rem;"]);

package/styled-components/es/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,50 @@
+import React, { forwardRef } from 'react';
+import { cx } from '../../utils';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as viewCSS } from './variations/_view/base';
+import { base, Separator } from './Breadcrumbs.styles';
+import { addSeparator, convertIconSize, getRenderItems } from './utils';
+export var breadcrumbsRoot = function breadcrumbsRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
+    var view = _ref.view,
+      size = _ref.size,
+      separator = _ref.separator,
+      items = _ref.items,
+      _ref$showItems = _ref.showItems,
+      showItems = _ref$showItems === void 0 ? items.length : _ref$showItems,
+      className = _ref.className;
+    var renderSeparator = separator !== null && separator !== void 0 ? separator : /*#__PURE__*/React.createElement(Separator, {
+      color: "inherit",
+      size: convertIconSize(size)
+    });
+    var renderItems = getRenderItems(items, renderSeparator, showItems);
+    var itemsWithSeparator = addSeparator(renderItems, renderSeparator);
+    return /*#__PURE__*/React.createElement(Root, {
+      ref: outerRootRef,
+      size: size,
+      view: view,
+      className: cx(className),
+      items: items
+    }, itemsWithSeparator.map(function (item) {
+      return item;
+    }));
+  });
+};
+export var breadcrumbsConfig = {
+  name: 'Breadcrumbs',
+  tag: 'div',
+  layout: breadcrumbsRoot,
+  base: base,
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'm'
+  }
+};

package/styled-components/es/components/Breadcrumbs/Breadcrumbs.styles.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { css } from 'styled-components';
+import { linkConfig } from '../Link';
+import { component, mergeConfig } from '../../engines';
+import { IconDisclosureRight } from '../_Icon';
+import { addFocus } from '../../mixins';
+import { tokens } from './Breadcrumbs.tokens';
+var mergedLinkConfig = /*#__PURE__*/mergeConfig(linkConfig);
+var Link = /*#__PURE__*/component(mergedLinkConfig);
+export var StyledLink = /*#__PURE__*/styled(Link).withConfig({
+  componentId: "plasma-new-hope__sc-4bjoev-0"
+})(["opacity:", ";", ""], function (_ref) {
+  var isHref = _ref.isHref;
+  return isHref ? 1 : "var(".concat(tokens.breadcrumbsOpacity, ")");
+}, /*#__PURE__*/addFocus({
+  outlineOffset: '0rem',
+  outlineSize: '0.125rem',
+  outlineRadius: '0rem',
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.breadcrumbsFocusOutlineColor, ")")
+}));
+export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;align-items:center;gap:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.breadcrumbsGap, tokens.breadcrumbsColor, tokens.breadcrumbsFontFamily, tokens.breadcrumbsFontSize, tokens.breadcrumbsFontWeight, tokens.breadcrumbsFontStyle, tokens.breadcrumbsLetterSpacing, tokens.breadcrumbsLineHeight);
+export var Separator = /*#__PURE__*/styled(IconDisclosureRight).withConfig({
+  componentId: "plasma-new-hope__sc-4bjoev-1"
+})(["color:var(", ");opacity:var(", ");"], tokens.breadcrumbsColor, tokens.breadcrumbsOpacity);

package/styled-components/es/components/Breadcrumbs/Breadcrumbs.template-doc.mdx

@@ -0,0 +1,96 @@
+---
+id: breadcrumbs
+title: Breadcrumbs
+---
+
+import { PropsTable } from '@site/src/components';
+
+# Breadcrumbs
+<PropsTable name="Breadcrumbs" />
+
+# Обычное использование
+
+```tsx live
+import React from 'react';
+import { Breadcrumbs } from '@salutejs/{{ package }}';
+
+export function App() {
+    const items = [
+        { title: 'Home', href: '/' },
+        { title: 'About as', href: '/' },
+        { renderItem: () => <span>Custom Item</span> },
+        { title: 'Contacts' },
+    ];
+
+    return (
+        <div>
+            <Breadcrumbs items={items} />
+        </div>
+    );
+}
+```
+# Использование с shorter
+```tsx live
+import React from 'react';
+import { Breadcrumbs } from '@salutejs/{{ package }}';
+
+export function App() {
+    const items = [
+        { title: 'Home', href: '/' },
+        { title: 'About as', href: '/' },
+        { renderItem: () => <span>Custom Item</span> },
+        { title: 'Contacts' },
+    ];
+
+    return (
+        <div style=\{{"flexDirection": 'column'}}>
+            <div>
+                <Breadcrumbs items={items} showItems={2} />
+            </div>
+            <div>
+                 <Breadcrumbs items={items} showItems={3} />
+            </div>
+        </div>
+    );
+}
+```
+
+# Использование с кастомным элементом
+```tsx live
+import React from 'react';
+import { Breadcrumbs, Dropdown } from '@salutejs/{{ package }}';
+
+export function App() {
+    const items = [
+        { title: 'Home', href: '/' },
+        { title: 'About as', href: '/' },
+        {
+            renderItem: () => {
+                const itemsDropdown = [
+                    {
+                        value: 'Custom Item 1',
+                        label: 'Custom Item 1',
+                    },
+                    {
+                        value: 'Custom Item 2',
+                        label: 'Custom Item 2',
+                    },
+                ];
+                return (
+                    <Dropdown variant="tight" placement="bottom" items={itemsDropdown} trigger="hover">
+                        <span>...</span>
+                    </Dropdown>
+                );
+            },
+        },
+        { title: 'Contacts' },
+    ];
+
+
+    return (
+        <div style=\{{height: '200px'}}>
+            <Breadcrumbs items={items} />
+        </div>
+    );
+}
+```

package/styled-components/es/components/Breadcrumbs/Breadcrumbs.tokens.js

@@ -0,0 +1,15 @@
+export var classes = {
+  breadcrumbsRoot: 'breadcrumbs-root'
+};
+export var tokens = {
+  breadcrumbsGap: '--plasma-breadcrumbs-gap',
+  breadcrumbsOpacity: '--plasma-breadcrumbs-opacity',
+  breadcrumbsFocusOutlineColor: '--plasma-breadcrumbs-focus-outline-color',
+  breadcrumbsColor: '--plasma-breadcrumbs-color',
+  breadcrumbsFontFamily: '--plasma-breadcrumbs-font-family',
+  breadcrumbsFontSize: '--plasma-breadcrumbs-font-size',
+  breadcrumbsFontStyle: '--plasma-breadcrumbs-font-style',
+  breadcrumbsFontWeight: '--plasma-breadcrumbs-font-weight',
+  breadcrumbsLetterSpacing: '--plasma-breadcrumbs-letter-spacing',
+  breadcrumbsLineHeight: '--plasma-breadcrumbs-line-height'
+};

package/styled-components/es/components/Breadcrumbs/Breadcrumbs.types.js

@@ -0,0 +1 @@
+export {};

package/styled-components/es/components/Breadcrumbs/index.js

@@ -0,0 +1,2 @@
+export { breadcrumbsRoot, breadcrumbsConfig } from './Breadcrumbs';
+export { tokens as breadcrumbsTokens, classes as breadcrumbsClasses } from './Breadcrumbs.tokens';

package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js

@@ -0,0 +1,33 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from 'react';
+import { addSeparator } from '../../utils';
+import { StyledHidden, StyledRoot, StyledShorter } from './BreadcrumbShorter.styles';
+export var BreadcrumbShorter = function BreadcrumbShorter(_ref) {
+  var children = _ref.children,
+    separator = _ref.separator;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    openShorter = _useState2[0],
+    setOpenShorter = _useState2[1];
+  var renderItems = addSeparator(children, separator);
+  var onKeyPress = function onKeyPress(event) {
+    event.persist();
+    if (event.keyCode === 13) {
+      setOpenShorter(true);
+    }
+  };
+  return /*#__PURE__*/React.createElement(StyledRoot, null, !openShorter && /*#__PURE__*/React.createElement(StyledShorter, {
+    tabIndex: 0,
+    onClick: function onClick() {
+      return setOpenShorter(true);
+    },
+    onKeyDown: onKeyPress
+  }, "..."), openShorter && /*#__PURE__*/React.createElement(StyledHidden, null, renderItems.map(function (item) {
+    return item;
+  })));
+};

package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { addFocus } from '../../../../mixins';
+import { tokens } from '../../Breadcrumbs.tokens';
+export var StyledRoot = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1shiits-0"
+})([""]);
+export var StyledShorter = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1shiits-1"
+})(["cursor:pointer;", ""], /*#__PURE__*/addFocus({
+  outlineOffset: '0.125rem',
+  outlineSize: '0.125rem',
+  outlineRadius: '0',
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.breadcrumbsFocusOutlineColor, ")")
+}));
+export var StyledHidden = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1shiits-2"
+})(["display:flex;align-items:center;gap:var(", ");"], tokens.breadcrumbsGap);

package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js

@@ -0,0 +1 @@
+export {};

package/styled-components/es/components/Breadcrumbs/utils/index.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { BreadcrumbShorter } from '../ui/BreadcrumbShorter/BreadcrumbShorter';
+import { StyledLink } from '../Breadcrumbs.styles';
+export var shortItems = function shortItems(items, renderSeparator, showItems) {
+  if (!showItems || showItems < 2 || items.length <= showItems) {
+    return items;
+  }
+  var leftSlice = Math.floor(showItems / 2);
+  var rightSlice = items.length - leftSlice - showItems % 2;
+  var renderItems = items.slice(leftSlice, rightSlice);
+  var shorter = /*#__PURE__*/React.createElement(BreadcrumbShorter, {
+    separator: renderSeparator
+  }, renderItems);
+  items.splice(leftSlice, rightSlice - leftSlice, shorter);
+  return items;
+};
+export var convertIconSize = function convertIconSize(size) {
+  switch (size) {
+    case 's':
+    case 'xs':
+      return 'xs';
+    default:
+      return 's';
+  }
+};
+export var getRenderItems = function getRenderItems(items, renderSeparator, showItems) {
+  var renderItems = shortItems(items.map(function (item) {
+    if ('renderItem' in item) {
+      return item.renderItem();
+    }
+    return /*#__PURE__*/React.createElement(StyledLink, {
+      tabIndex: 0,
+      href: item.href,
+      isHref: Boolean(item.href)
+    }, item.title);
+  }), renderSeparator, showItems);
+  return renderItems;
+};
+export var addSeparator = function addSeparator(items, renderSeparator) {
+  return items.flatMap(function (item, idx) {
+    return idx < items.length - 1 ? [item, renderSeparator] : [item];
+  });
+};

package/styled-components/es/components/Breadcrumbs/variations/_size/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/Breadcrumbs/variations/_view/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/Button/Button.styles.js

@@ -35,10 +35,10 @@ export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
 })(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
 export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-9d9bqj-5"
-})(["display:flex;margin:var(", ");"], tokens.buttonLeftContentMargin);
+})(["display:flex;margin:var(", ");align-self:var(", ");"], tokens.buttonLeftContentMargin, tokens.buttonLeftContentAlignSelf);
 export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-9d9bqj-6"
-})(["display:flex;margin:var(", ");"], tokens.buttonRightContentMargin);
+})(["display:flex;margin:var(", ");align-self:var(", ");"], tokens.buttonRightContentMargin, tokens.buttonRightContentAlignSelf);
 export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    justify-content: center;\n\n    appearance: none;\n    border: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    a& {\n        text-decoration: none;\n    }\n\n    /* NOTE:\n        --plasma_computed-btn-br-radius is defined in Button.tsx\n    */\n    --plasma_private-btn-br: var(--plasma_computed-btn-br);\n    border-radius: var(--plasma_private-btn-br);\n\n    &&.", " {\n        width: var(", ");\n        padding: 0;\n    }\n"])), /*#__PURE__*/String(classes.buttonSquare), tokens.buttonHeight);
 
 // INFO: Для возможности переиспользования стилей в других компонентах

package/styled-components/es/components/Button/Button.tokens.js

@@ -29,7 +29,9 @@ export var tokens = {
   buttonLetterSpacing: '--plasma-button-letter-spacing',
   buttonLineHeight: '--plasma-button-line-height',
   buttonLeftContentMargin: '--plasma-button-left-content-margin',
+  buttonLeftContentAlignSelf: '--plasma-button-left-content-align-self',
   buttonRightContentMargin: '--plasma-button-right-content-margin',
+  buttonRightContentAlignSelf: '--plasma-button-right-content-align-self',
   buttonValueMargin: '--plasma-button-value-margin',
   buttonDisabledOpacity: '--plasma-button-disabled-opacity',
   buttonFocusColor: '--plasma-button-focus-color',

package/styled-components/es/components/Select/Select.js

@@ -1,4 +1,4 @@
-var _excluded = ["multiselect", "value", "onChange", "target", "items", "placement", "label", "labelPlacement", "placeholder", "helperText", "isTargetAmount", "disabled", "view", "size", "listOverflow", "listHeight", "listWidth", "contentLeft", "onScrollBottom", "chipView", "variant", "portal", "renderValue", "renderItem"];
+var _excluded = ["value", "onChange", "target", "items", "placement", "label", "labelPlacement", "placeholder", "helperText", "disabled", "view", "size", "listOverflow", "listHeight", "listWidth", "contentLeft", "onScrollBottom", "chipView", "variant", "portal", "renderValue", "renderItem"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -26,9 +26,7 @@ export var Context = /*#__PURE__*/createContext({});
  */
 export var selectRoot = function selectRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
-    var _props$multiselect = props.multiselect,
-      multiselect = _props$multiselect === void 0 ? false : _props$multiselect,
-      outerValue = props.value,
+    var outerValue = props.value,
       outerOnChange = props.onChange,
       _props$target = props.target,
       target = _props$target === void 0 ? 'textfield-like' : _props$target,
@@ -40,8 +38,6 @@ export var selectRoot = function selectRoot(Root) {
       labelPlacement = _props$labelPlacement === void 0 ? 'outer' : _props$labelPlacement,
       placeholder = props.placeholder,
       helperText = props.helperText,
-      _props$isTargetAmount = props.isTargetAmount,
-      isTargetAmount = _props$isTargetAmount === void 0 ? false : _props$isTargetAmount,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       view = props.view,
@@ -58,7 +54,7 @@ export var selectRoot = function selectRoot(Root) {
       renderValue = props.renderValue,
       renderItem = props.renderItem,
       rest = _objectWithoutProperties(props, _excluded);
-    var _useState = useState(outerValue || multiselect ? [] : ''),
+    var _useState = useState(outerValue || props.multiselect ? [] : ''),
       _useState2 = _slicedToArray(_useState, 2),
       internalValue = _useState2[0],
       setInternalValue = _useState2[1];
@@ -119,30 +115,32 @@ export var selectRoot = function selectRoot(Root) {
       }
     };
     var handleCheckboxChange = function handleCheckboxChange(item) {
-      var checkedCopy = new Map(checked);
-      if (!checkedCopy.get(item.value.toString())) {
-        checkedCopy.set(item.value.toString(), true);
-        updateDescendants(item, checkedCopy, true);
-      } else {
-        checkedCopy.set(item.value.toString(), false);
-        updateDescendants(item, checkedCopy, false);
-      }
-      updateAncestors(item, checkedCopy);
-      var newValues = [];
-      valueToItemMap.forEach(function (item, key) {
-        if (checkedCopy.get(key)) {
-          newValues.push(item.value.toString());
+      if (props.multiselect) {
+        var checkedCopy = new Map(checked);
+        if (!checkedCopy.get(item.value)) {
+          checkedCopy.set(item.value, true);
+          updateDescendants(item, checkedCopy, true);
+        } else {
+          checkedCopy.set(item.value, false);
+          updateDescendants(item, checkedCopy, false);
+        }
+        updateAncestors(item, checkedCopy);
+        var newValues = [];
+        valueToItemMap.forEach(function (item, key) {
+          if (checkedCopy.get(key)) {
+            newValues.push(item.value);
+          }
+        });
+        if (onChange) {
+          onChange(newValues);
         }
-      });
-      if (onChange) {
-        onChange(newValues);
       }
     };
     var handleItemClick = function handleItemClick(item, e) {
       if (!isEmpty(item === null || item === void 0 ? void 0 : item.items)) {
         return;
       }
-      if (multiselect) {
+      if (props.multiselect) {
         handleCheckboxChange(item);
       } else {
         if (e) {
@@ -168,7 +166,7 @@ export var selectRoot = function selectRoot(Root) {
     var handlePressDown = function handlePressDown(item, e) {
       if (isEmpty(item.items)) {
         handleItemClick(item, e);
-      } else if (multiselect) {
+      } else if (props.multiselect) {
         handleCheckboxChange(item);
       }
     };
@@ -180,6 +178,7 @@ export var selectRoot = function selectRoot(Root) {
       }
     };
     var _useKeyNavigation = useKeyNavigation({
+        value: value,
         focusedPath: focusedPath,
         dispatchFocusedPath: dispatchFocusedPath,
         path: path,
@@ -190,10 +189,9 @@ export var selectRoot = function selectRoot(Root) {
         handlePressDown: handlePressDown,
         focusedChipIndex: focusedChipIndex,
         dispatchFocusedChipIndex: dispatchFocusedChipIndex,
-        value: value,
         valueToItemMap: valueToItemMap,
-        multiselect: multiselect,
-        isTargetAmount: isTargetAmount
+        multiselect: props.multiselect,
+        isTargetAmount: props.isTargetAmount
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
     var isCurrentListOpen = Boolean(path[0]);
@@ -227,7 +225,7 @@ export var selectRoot = function selectRoot(Root) {
       value: {
         focusedPath: focusedPath,
         checked: checked,
-        multiselect: multiselect,
+        multiselect: props.multiselect,
         size: size,
         handleCheckboxChange: handleCheckboxChange,
         handleItemClick: handleItemClick,
@@ -244,10 +242,7 @@ export var selectRoot = function selectRoot(Root) {
       trigger: "click",
       target: /*#__PURE__*/React.createElement(Target, {
         opened: isCurrentListOpen,
-        target: target,
         value: value,
-        isTargetAmount: isTargetAmount,
-        multiselect: multiselect,
         valueToItemMap: valueToItemMap,
         focusedPath: focusedPath,
         focusedToValueMap: focusedToValueMap,
@@ -257,6 +252,7 @@ export var selectRoot = function selectRoot(Root) {
         onKeyDown: onKeyDown,
         focusedChipIndex: focusedChipIndex,
         labelPlacement: labelPlacement,
+        selectProps: props,
         size: size,
         contentLeft: contentLeft,
         disabled: disabled,

package/styled-components/es/components/Select/Select.styles.js

@@ -10,7 +10,7 @@ export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
 })([".", ",.", "{width:100%;}"], /*#__PURE__*/String(popoverClasses.root), /*#__PURE__*/String(popoverClasses.target));
 export var Ul = /*#__PURE__*/styled.ul.withConfig({
   componentId: "plasma-new-hope__sc-le54jv-1"
-})(["box-sizing:border-box;background:var(", ");box-shadow:var(", ");border-radius:var(", ");width:", ";height:", ";overflow:", ";margin:", ";padding:var(", ");"], constants.background, constants.boxShadow, tokens.borderRadius, function (_ref) {
+})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";margin:", ";padding:var(", ");"], constants.background, constants.boxShadow, tokens.borderRadius, function (_ref) {
   var listWidth = _ref.listWidth;
   return listWidth || '100%';
 }, function (_ref2) {

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

@@ -79,7 +79,7 @@ export var constants = {
   focusColor: '--surface-accent',
   focusSize: '0.0625rem',
   background: '--surface-solid-card',
-  boxShadow: '--shadow-down-soft-s',
+  boxShadow: '0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04)',
   disclosureIconColor: '--text-secondary',
   disclosureIconColorHover: '--text-secondary-hover',
   itemBackground: '--plasma-colors-transparent',

package/styled-components/es/components/Select/ui/Target/Target.js

@@ -2,9 +2,6 @@ import React from 'react';
 import { Button, Textfield } from './ui';
 export var Target = function Target(_ref) {
   var value = _ref.value,
-    multiselect = _ref.multiselect,
-    isTargetAmount = _ref.isTargetAmount,
-    target = _ref.target,
     opened = _ref.opened,
     valueToItemMap = _ref.valueToItemMap,
     onChipClick = _ref.onChipClick,
@@ -18,12 +15,11 @@ export var Target = function Target(_ref) {
     disabled = _ref.disabled,
     renderValue = _ref.renderValue,
     focusedPath = _ref.focusedPath,
-    focusedToValueMap = _ref.focusedToValueMap;
-  return target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
+    focusedToValueMap = _ref.focusedToValueMap,
+    selectProps = _ref.selectProps;
+  return selectProps.target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
     opened: opened,
     value: value,
-    isTargetAmount: isTargetAmount,
-    multiselect: multiselect,
     valueToItemMap: valueToItemMap,
     onKeyDown: onKeyDown,
     label: label,
@@ -31,12 +27,11 @@ export var Target = function Target(_ref) {
     disabled: disabled,
     renderValue: renderValue,
     focusedPath: focusedPath,
-    focusedToValueMap: focusedToValueMap
+    focusedToValueMap: focusedToValueMap,
+    selectProps: selectProps
   }) : /*#__PURE__*/React.createElement(Textfield, {
     opened: opened,
     value: value,
-    isTargetAmount: isTargetAmount,
-    multiselect: multiselect,
     valueToItemMap: valueToItemMap,
     onChipClick: onChipClick,
     label: label,
@@ -49,6 +44,7 @@ export var Target = function Target(_ref) {
     disabled: disabled,
     renderValue: renderValue,
     focusedPath: focusedPath,
-    focusedToValueMap: focusedToValueMap
+    focusedToValueMap: focusedToValueMap,
+    selectProps: selectProps
   });
 };