@norges-domstoler/dds-components 5.2.0-beta.2 → 5.3.1

package/dist/components/ScrollableContainer/ScrollableContainer.js

@@ -0,0 +1,47 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import styled from 'styled-components';
+import { Scrollbar } from './Scrollbar.js';
+import { scrollbarTokens } from './ScrollableContainer.tokens.js';
+import { focusVisibleTransitionValue, focusVisible } from '../../helpers/styling/focusVisible.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var track = scrollbarTokens.track,
+    content = scrollbarTokens.content,
+    outerContainer = scrollbarTokens.outerContainer;
+var StyledScrollableContainer = styled.div.withConfig({
+  displayName: "ScrollableContainer__StyledScrollableContainer",
+  componentId: "sc-t0dczu-0"
+})(["grid-template:auto / 1fr ", ";overflow:hidden;position:relative;display:grid;padding:", ";"], track.width, outerContainer.padding);
+var Content = styled.div.withConfig({
+  displayName: "ScrollableContainer__Content",
+  componentId: "sc-t0dczu-1"
+})(["height:", ";overflow:auto;scrollbar-width:none;::-webkit-scrollbar{display:none;}padding-right:", ";@media (prefers-reduced-motion:no-preference){transition:", ";}:focus-visible,.focus-visible{outline:", ";outline-offset:", ";}"], function (_ref) {
+  var height = _ref.height;
+  return height;
+}, content.paddingRight, focusVisibleTransitionValue, focusVisible.outline, focusVisible.outlineOffset);
+var ScrollableContainer = function ScrollableContainer(props) {
+  var children = props.children,
+      id = props.id,
+      className = props.className,
+      _props$contentHeight = props.contentHeight,
+      contentHeight = _props$contentHeight === void 0 ? '90vh' : _props$contentHeight,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "id", "className", "contentHeight", "htmlProps"]);
+
+  var ref = useRef(null);
+  return jsxs(StyledScrollableContainer, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: [jsx(Content, Object.assign({
+      height: contentHeight,
+      ref: ref,
+      tabIndex: 0
+    }, {
+      children: children
+    })), jsx(Scrollbar, {
+      contentRef: ref
+    })]
+  }));
+};
+
+export { ScrollableContainer };

package/dist/components/ScrollableContainer/ScrollableContainer.stories.d.ts

@@ -0,0 +1,15 @@
+import { ScrollableContainerProps } from '.';
+declare const _default: {
+    title: string;
+    component: (props: ScrollableContainerProps) => JSX.Element;
+    argTypes: {
+        contentHeight: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: ScrollableContainerProps) => JSX.Element;
+export declare const JustScrollbar: () => JSX.Element;

package/dist/components/ScrollableContainer/ScrollableContainer.tokens.d.ts

@@ -0,0 +1,25 @@
+export declare const scrollbarWidthNumberPx = 10;
+export declare const scrollbarTokens: {
+    minThumbHeightPx: number;
+    track: {
+        backgroundColor: string;
+        borderRadius: string;
+        width: string;
+    };
+    thumb: {
+        base: {
+            backgroundColor: string;
+            borderRadius: string;
+            width: string;
+        };
+        hover: {
+            backgroundColor: string;
+        };
+    };
+    content: {
+        paddingRight: string;
+    };
+    outerContainer: {
+        padding: string;
+    };
+};

package/dist/components/ScrollableContainer/ScrollableContainer.tokens.js

@@ -0,0 +1,36 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var scrollbarWidthNumberPx = 10;
+var scrollbarWidth = "".concat(scrollbarWidthNumberPx, "px");
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing;
+var track = {
+  backgroundColor: 'transparent',
+  borderRadius: '100px',
+  width: scrollbarWidth
+};
+var thumb = {
+  base: {
+    backgroundColor: colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)',
+    borderRadius: '100px',
+    width: scrollbarWidth
+  },
+  hover: {
+    backgroundColor: colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)'
+  }
+};
+var content = {
+  paddingRight: spacing.SizesDdsSpacingLocalX05
+};
+var outerContainer = {
+  padding: spacing.SizesDdsSpacingLocalX025
+};
+var scrollbarTokens = {
+  minThumbHeightPx: 15,
+  track: track,
+  thumb: thumb,
+  content: content,
+  outerContainer: outerContainer
+};
+
+export { scrollbarTokens, scrollbarWidthNumberPx };

package/dist/components/ScrollableContainer/Scrollbar.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+import { BaseComponentProps } from '../../types';
+export declare type ScrollbarProps = BaseComponentProps<HTMLDivElement, {
+    /** Ref til container med innholdet som skal scrolles. */
+    contentRef?: RefObject<HTMLDivElement>;
+}>;
+export declare const Scrollbar: (props: ScrollbarProps) => JSX.Element | null;

package/dist/components/ScrollableContainer/Scrollbar.js

@@ -0,0 +1,178 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+import { scrollbarTokens } from './ScrollableContainer.tokens.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var track = scrollbarTokens.track,
+    thumb = scrollbarTokens.thumb,
+    minThumbHeightPx = scrollbarTokens.minThumbHeightPx;
+var ScrollbarOuterWrapper = styled.div.withConfig({
+  displayName: "Scrollbar__ScrollbarOuterWrapper",
+  componentId: "sc-mphi5n-0"
+})([""]);
+var ScrollbarElements = styled.div.withConfig({
+  displayName: "Scrollbar__ScrollbarElements",
+  componentId: "sc-mphi5n-1"
+})(["display:block;height:100%;position:relative;display:grid;justify-items:center;"]);
+var Track = styled.div.withConfig({
+  displayName: "Scrollbar__Track",
+  componentId: "sc-mphi5n-2"
+})(["bottom:0;top:0;position:absolute;background-color:", ";border-radius:", ";width:", ";"], track.backgroundColor, track.borderRadius, track.width);
+var Thumb = styled.div.withConfig({
+  displayName: "Scrollbar__Thumb",
+  componentId: "sc-mphi5n-3"
+})(["position:absolute;background-color:", ";border-radius:", ";width:", ";transition:background-color 0.2s;&:hover{background-color:", ";}"], thumb.base.backgroundColor, thumb.base.borderRadius, thumb.base.width, thumb.hover.backgroundColor);
+var Scrollbar = function Scrollbar(props) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      contentRef = props.contentRef,
+      rest = __rest(props, ["id", "className", "htmlProps", "contentRef"]);
+
+  var trackRef = useRef(null);
+  var thumbRef = useRef(null);
+
+  var _useState = useState(minThumbHeightPx),
+      _useState2 = _slicedToArray(_useState, 2),
+      thumbHeight = _useState2[0],
+      setThumbHeight = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isScrollable = _useState4[0],
+      setIsScrollable = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      thumbTop = _useState6[0],
+      setThumbTop = _useState6[1];
+
+  var observer = useRef(null);
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      scrollStartPosition = _useState8[0],
+      setScrollStartPosition = _useState8[1];
+
+  var _useState9 = useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      initialScrollTop = _useState10[0],
+      setInitialScrollTop = _useState10[1];
+
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      isDragging = _useState12[0],
+      setIsDragging = _useState12[1];
+
+  function handleResize(ref, trackSize) {
+    var clientHeight = ref.clientHeight,
+        scrollHeight = ref.scrollHeight;
+    setIsScrollable(clientHeight !== scrollHeight);
+    setThumbHeight(Math.max(clientHeight / scrollHeight * trackSize, minThumbHeightPx));
+  }
+
+  var handleTrackClick = useCallback(function (e) {
+    if (contentRef && contentRef.current) {
+      var trackCurrent = trackRef.current;
+      var contentCurrent = contentRef.current;
+
+      if (trackCurrent && contentCurrent) {
+        var clientY = e.clientY;
+        var target = e.target;
+        var rect = target.getBoundingClientRect();
+        var trackTop = rect.top;
+        var thumbOffset = -(thumbHeight / 2);
+        var clickRatio = (clientY - trackTop + thumbOffset) / trackCurrent.clientHeight;
+        var scrollAmount = Math.floor(clickRatio * contentCurrent.scrollHeight);
+        contentCurrent.scrollTo({
+          top: scrollAmount,
+          behavior: 'smooth'
+        });
+      }
+    }
+  }, [thumbHeight]);
+  var handleThumbPositioning = useCallback(function () {
+    console.log('positioning');
+
+    if (!(contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) || !trackRef.current || !thumbRef.current) {
+      return;
+    }
+
+    var _contentRef$current = contentRef.current,
+        contentTop = _contentRef$current.scrollTop,
+        contentHeight = _contentRef$current.scrollHeight;
+    var clientHeight = trackRef.current.clientHeight;
+    var newTop = +contentTop / +contentHeight * clientHeight;
+    newTop = Math.min(newTop, clientHeight - thumbHeight);
+    setThumbTop(newTop);
+  }, []);
+  useEffect(function () {
+    if (contentRef && contentRef.current && trackRef.current) {
+      var ref = contentRef.current;
+      var clientHeight = trackRef.current.clientHeight;
+      observer.current = new ResizeObserver(function () {
+        handleResize(ref, clientHeight);
+      });
+      observer.current.observe(ref);
+      ref.addEventListener('scroll', handleThumbPositioning);
+      return function () {
+        var _a;
+
+        (_a = observer.current) === null || _a === void 0 ? void 0 : _a.unobserve(ref);
+        ref.removeEventListener('scroll', handleThumbPositioning);
+      };
+    }
+  }, []);
+  var handleThumbMousedown = useCallback(function (e) {
+    setScrollStartPosition(e.clientY);
+    if (contentRef && contentRef.current) setInitialScrollTop(contentRef.current.scrollTop);
+    setIsDragging(true);
+  }, []);
+  var handleThumbMouseup = useCallback(function () {
+    if (isDragging) {
+      setIsDragging(false);
+    }
+  }, [isDragging]);
+  var handleThumbMousemove = useCallback(function (e) {
+    if (contentRef && contentRef.current) {
+      if (isDragging) {
+        var _contentRef$current2 = contentRef.current,
+            contentScrollHeight = _contentRef$current2.scrollHeight,
+            contentOffsetHeight = _contentRef$current2.offsetHeight;
+        var deltaY = (e.clientY - scrollStartPosition) * (contentOffsetHeight / thumbHeight);
+        var newScrollTop = Math.min(initialScrollTop + deltaY, contentScrollHeight - contentOffsetHeight);
+        contentRef.current.scrollTop = newScrollTop;
+      }
+    }
+  }, [isDragging, scrollStartPosition, thumbHeight]);
+  useEffect(function () {
+    document.addEventListener('mousemove', handleThumbMousemove);
+    document.addEventListener('mouseup', handleThumbMouseup);
+    document.addEventListener('mouseleave', handleThumbMouseup);
+    return function () {
+      document.removeEventListener('mousemove', handleThumbMousemove);
+      document.removeEventListener('mouseup', handleThumbMouseup);
+      document.removeEventListener('mouseleave', handleThumbMouseup);
+    };
+  }, [handleThumbMousemove, handleThumbMouseup]);
+  return isScrollable ? jsx(ScrollbarOuterWrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: jsxs(ScrollbarElements, {
+      children: [jsx(Track, {
+        ref: trackRef,
+        onClick: handleTrackClick
+      }), jsx(Thumb, {
+        style: {
+          height: thumbHeight,
+          top: thumbTop
+        },
+        ref: thumbRef,
+        onMouseDown: handleThumbMousedown
+      })]
+    })
+  })) : null;
+};
+
+export { Scrollbar };

package/dist/components/ScrollableContainer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Scrollbar';
+export * from './ScrollableContainer';
+export * from './scrollbarStyling';

package/dist/components/ScrollableContainer/scrollbarStyling.d.ts

@@ -0,0 +1,26 @@
+/**
+ * CSS-in-JS scrollbar styling til bruk der det ikke passer å bruke dedikerte komponenter. Inkluderer styling for webkit pseudo-elementer og for Firefox.
+ */
+export declare const scrollbarStyling: {
+    webkit: {
+        '&::-webkit-scrollbar': {
+            width: string;
+            height: string;
+        };
+        '&::-webkit-scrollbar-track': {
+            background: string;
+            borderRadius: string;
+        };
+        '&::-webkit-scrollbar-thumb': {
+            background: string;
+            borderRadius: string;
+        };
+    };
+    '&::-webkit-scrollbar-thumb:hover': {
+        background: string;
+    };
+    firefox: {
+        scrollbarColor: string;
+        scrollbarWidth: string;
+    };
+};

package/dist/components/ScrollableContainer/scrollbarStyling.js

@@ -0,0 +1,40 @@
+import { scrollbarTokens } from './ScrollableContainer.tokens.js';
+
+var thumb = scrollbarTokens.thumb,
+    track = scrollbarTokens.track;
+/**
+ * CSS-in-JS scrollbar styling til bruk der det ikke passer å bruke dedikerte komponenter. Inkluderer styling for webkit pseudo-elementer og for Firefox.
+ */
+
+var scrollbarStyling = {
+  webkit: {
+    /* width */
+    '&::-webkit-scrollbar': {
+      width: track.width,
+      height: track.width
+    },
+
+    /* Track */
+    '&::-webkit-scrollbar-track': {
+      background: track.backgroundColor,
+      borderRadius: track.borderRadius
+    },
+
+    /* Handle */
+    '&::-webkit-scrollbar-thumb': {
+      background: thumb.base.backgroundColor,
+      borderRadius: thumb.base.borderRadius
+    }
+  },
+
+  /* Handle on hover */
+  '&::-webkit-scrollbar-thumb:hover': {
+    background: thumb.hover.backgroundColor
+  },
+  firefox: {
+    scrollbarColor: thumb.base.backgroundColor + ' ' + track.backgroundColor,
+    scrollbarWidth: 'thin'
+  }
+};
+
+export { scrollbarStyling };

package/dist/components/Search/Search.js

@@ -1,7 +1,6 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useId } from 'react';
 import styled, { css } from 'styled-components';
 import { searchTokens } from './Search.tokens.js';
 import { Input as Input$1, OuterInputContainer, InputContainer } from '../../helpers/Input/Input.styles.js';
@@ -33,7 +32,6 @@ var ButtonWrapper = styled.div.withConfig({
   displayName: "Search__ButtonWrapper",
   componentId: "sc-1ax3s9s-3"
 })([""]);
-var nextUniqueId = 0;
 var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$componentSize = _a.componentSize,
       componentSize = _a$componentSize === void 0 ? 'medium' : _a$componentSize,
@@ -46,10 +44,8 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
       ariaDescribedby = _a['aria-describedby'],
       rest = __rest(_a, ["componentSize", "buttonProps", "name", "tip", "id", "className", "style", 'aria-describedby']);
 
-  var _useState = useState(id !== null && id !== void 0 ? id : "searchInput-".concat(nextUniqueId++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-searchInput");
   var hasTip = !!tip;
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var containerProps = {

package/dist/components/Select/Select.js

@@ -1,11 +1,12 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState } from 'react';
+import React, { useId } from 'react';
 import ReactSelect, { components } from 'react-select';
 import { prefix, getCustomStyles, Wrapper, Container, Label } from './Select.styles.js';
 import { selectTokens } from './Select.tokens.js';
 import { CheckIcon } from '../../icons/tsx/check.js';
+import { CloseSmallIcon } from '../../icons/tsx/closeSmall.js';
+import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
 import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
 import { InputMessage } from '../InputMessage/InputMessage.js';
 import { Icon } from '../Icon/Icon.js';
@@ -14,7 +15,10 @@ import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../util
 var DdsOption = components.Option,
     NoOptionsMessage = components.NoOptionsMessage,
     Input = components.Input,
-    SingleValue = components.SingleValue;
+    SingleValue = components.SingleValue,
+    ClearIndicator = components.ClearIndicator,
+    DropdownIndicator = components.DropdownIndicator,
+    MultiValueRemove = components.MultiValueRemove;
 var createSelectOptions = function createSelectOptions() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -32,7 +36,7 @@ var IconOption = function IconOption(props) {
   return jsxs(DdsOption, Object.assign({}, props, {
     children: [props.isSelected && jsx(Icon, {
       icon: CheckIcon,
-      iconSize: "inherit"
+      iconSize: "medium"
     }), props.children]
   }));
 };
@@ -55,6 +59,33 @@ var NoOptionsMessageCustom = function NoOptionsMessageCustom(props) {
   }));
 };
 
+var CustomClearIndicator = function CustomClearIndicator(props) {
+  return jsx(ClearIndicator, Object.assign({}, props, {
+    children: jsx(Icon, {
+      icon: CloseSmallIcon,
+      iconSize: "medium"
+    })
+  }));
+};
+
+var CustomMultiValueRemove = function CustomMultiValueRemove(props) {
+  return jsx(MultiValueRemove, Object.assign({}, props, {
+    children: jsx(Icon, {
+      icon: CloseSmallIcon,
+      iconSize: "medium"
+    })
+  }));
+};
+
+var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
+  return jsx(DropdownIndicator, Object.assign({}, props, {
+    children: jsx(Icon, {
+      icon: ChevronDownIcon,
+      iconSize: "medium"
+    })
+  }));
+};
+
 function escapeRegexCharacters(text) {
   return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 }
@@ -64,7 +95,6 @@ function searchFilter(text, search) {
   var searchFilterRegex = new RegExp("(?:^|[\\s-(])".concat(escapeRegexCharacters(search.toLowerCase())));
   return searchFilterRegex.test(text.toLowerCase());
 }
-var nextUniqueId = 0;
 
 var SelectInner = function SelectInner(_a, ref) {
   var id = _a.id,
@@ -91,10 +121,8 @@ var SelectInner = function SelectInner(_a, ref) {
       customSingleValueElement = _a.customSingleValueElement,
       rest = __rest(_a, ["id", "label", "errorMessage", "tip", "required", "readOnly", "options", "isMulti", "value", "defaultValue", "width", "closeMenuOnSelect", "className", "style", "isDisabled", "isClearable", "placeholder", "customOptionElement", "customSingleValueElement"]);
 
-  var _useState = useState(id !== null && id !== void 0 ? id : "select-".concat(nextUniqueId++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-select");
   var hasLabel = !!label;
   var hasErrorMessage = !!errorMessage;
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
@@ -143,7 +171,10 @@ var SelectInner = function SelectInner(_a, ref) {
       Input: CustomInput,
       SingleValue: customSingleValueElement ? function (props) {
         return CustomSingleValue(props, customSingleValueElement);
-      } : SingleValue
+      } : SingleValue,
+      ClearIndicator: CustomClearIndicator,
+      DropdownIndicator: CustomDropdownIndicator,
+      MultiValueRemove: CustomMultiValueRemove
     },
     'aria-invalid': hasErrorMessage ? true : undefined
   }, rest);

package/dist/components/Select/Select.styles.js

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import { typographyTokens } from '../Typography/Typography.tokens.js';
 import { selectTokens } from './Select.tokens.js';
 import { Typography } from '../Typography/Typography.js';
-import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 
 var prefix = 'dds-select';
 var Label = styled(Typography).withConfig({
@@ -12,14 +12,14 @@ var Label = styled(Typography).withConfig({
 var Container = styled.div.withConfig({
   displayName: "Selectstyles__Container",
   componentId: "sc-19jkd5s-1"
-})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}position:relative;", " ", " *::selection{", "}", " &:hover{", " ", "{", "}}&:focus-within{", " ", "{", "}}", " .", "__menu-list{", "}&:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{", "}", " ", ""], selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_ref) {
+})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}position:relative;", " *::selection{", "}", " &:hover{", " ", "{", "}}&:focus-within{", " ", "{", "}}", " .", "__menu-list{", " ", "}&:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{", "}", " ", ""], selectTokens.container.base, typographyTokens.selection.base, function (_ref) {
   var hasLabel = _ref.hasLabel,
       isMulti = _ref.isMulti;
   return isMulti && hasLabel ? css([".", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.valueContainer.isMulti.withLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.withLabel.base) : isMulti && !hasLabel ? css([".", "__control{", "}.", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.input.isMulti.noLabel.base, prefix, selectTokens.valueContainer.isMulti.noLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.noLabel.base) : hasLabel ? css([".", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.valueContainer.withLabel.base, prefix, selectTokens.indicatorsContainer.withLabel.base) : css([".", "__control{", "}.", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.input.noLabel.base, prefix, selectTokens.valueContainer.noLabel.base, prefix, selectTokens.indicatorsContainer.noLabel.base);
 }, selectTokens.container.hover.base, Label, selectTokens.label.hover.base, selectTokens.container.focus.base, Label, selectTokens.label.focus.base, function (_ref2) {
   var errorMessage = _ref2.errorMessage;
   return errorMessage && css(["", " &:hover{", "}&:focus-within{", "}"], selectTokens.container.danger.base, selectTokens.container.danger.hover.base, selectTokens.container.danger.focus.base);
-}, prefix, scrollbarStyling, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_ref3) {
+}, prefix, scrollbarStyling.webkit, scrollbarStyling.firefox, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_ref3) {
   var isDisabled = _ref3.isDisabled;
   return isDisabled && css(["cursor:not-allowed;", " &:hover{box-shadow:none;", " ", "{", "}&:hover .", "__dropdown-indicator{", "}}"], selectTokens.container.disabled.base, selectTokens.container.disabled.base, Label, selectTokens.label.base, prefix, selectTokens.dropdownIndicator.base);
 }, function (_ref4) {
@@ -89,7 +89,7 @@ var getCustomStyles = function getCustomStyles() {
           transition: 'color 0.2s, background-color 0.2s'
         }
       }), selectTokens.multiValueRemove.base), {
-        svg: Object.assign({}, selectTokens.multiValueRemove.icon.base),
+        padding: 0,
         '&:hover': Object.assign({}, selectTokens.multiValueRemove.hover.base),
         '&:focus': {
           backgroundColor: 'blue'
@@ -127,6 +127,9 @@ var getCustomStyles = function getCustomStyles() {
       return Object.assign(Object.assign({
         display: 'inline-flex'
       }, selectTokens.clearIndicator.base), {
+        '@media (prefers-reduced-motion: no-preference)': {
+          transition: 'color 0.2s'
+        },
         '&:hover': Object.assign({}, selectTokens.clearIndicator.hover.base)
       });
     },

package/dist/components/Select/Select.tokens.d.ts

@@ -100,9 +100,6 @@ export declare const selectTokens: {
         hover: {
             base: CSSObject;
         };
-        icon: {
-            base: CSSObject;
-        };
     };
     indicatorsContainer: {
         withLabel: {

package/dist/components/Select/Select.tokens.js

@@ -8,8 +8,7 @@ var Colors = ddsBaseTokens.colors,
     Spacing = ddsBaseTokens.spacing,
     FontPackages = ddsBaseTokens.fontPackages,
     BorderRadius = ddsBaseTokens.borderRadius,
-    Border = ddsBaseTokens.border,
-    IconSizes = ddsBaseTokens.iconSizes;
+    Border = ddsBaseTokens.border;
 var textDefault = ddsReferenceTokens.textDefault;
 var multiValueContainerMinHeight = "".concat(Spacing.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing.SizesDdsSpacingLocalX025NumberPx * 2 + calculateHeightWithLineHeight(FontPackages.supportingStyle_inputtext_01.numbers.lineHeightNumber, FontPackages.supportingStyle_inputtext_01.numbers.fontSizeNumber), "px"); //custom spacing so that multiselect has same height as single value select
 
@@ -90,8 +89,7 @@ var drodownIndicatorReadOnlyBase = {
   color: 'transparent'
 };
 var clearIndicatorBase = {
-  color: Colors.DdsColorNeutralsGray6,
-  padding: " 0 ".concat(Spacing.SizesDdsSpacingLocalX025, " 0 0")
+  color: Colors.DdsColorNeutralsGray6
 };
 var loadingIndicatorBase = {
   color: Colors.DdsColorNeutralsGray6,
@@ -117,13 +115,11 @@ var optionBase = Object.assign(Object.assign({
   color: textDefault.textColor
 });
 var optionHoverBase = {
-  backgroundColor: Colors.DdsColorInteractiveLighter
-};
-var optionSelectedBase = Object.assign(Object.assign({
   backgroundColor: Colors.DdsColorInteractiveLightest
-}, FontPackages.body_sans_02.base), {
-  fontWeight: 600
-});
+};
+var optionSelectedBase = Object.assign({
+  backgroundColor: Colors.DdsColorNeutralsWhite
+}, FontPackages.body_sans_02.base);
 var noOptionsMessageBase = Object.assign({
   padding: "".concat(Spacing.SizesDdsSpacingLocalX05, " ").concat(Spacing.SizesDdsSpacingLocalX1),
   color: Colors.DdsColorNeutralsGray6
@@ -148,17 +144,12 @@ var multiValueLabelBase = Object.assign(Object.assign({
   fontWeight: 'bold'
 });
 var multiValueRemoveBase = {
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX025),
   color: Colors.DdsColorNeutralsGray9
 };
 var multiValueRemoveHoverBase = {
   color: Colors.DdsColorNeutralsWhite,
   backgroundColor: Colors.DdsColorInteractiveBase
 };
-var multiValueRemoveIconBase = {
-  height: IconSizes.DdsIconsizeSmall,
-  width: IconSizes.DdsIconsizeSmall
-};
 var containerDisabledBase = {
   backgroundColor: Colors.DdsColorNeutralsGray1,
   borderColor: Colors.DdsColorNeutralsGray5
@@ -267,9 +258,6 @@ var selectTokens = {
     base: multiValueRemoveBase,
     hover: {
       base: multiValueRemoveHoverBase
-    },
-    icon: {
-      base: multiValueRemoveIconBase
     }
   },
   indicatorsContainer: {