@equinor/eds-core-react 2.3.3 → 2.3.4

package/dist/eds-core-react.cjs

@@ -9566,8 +9566,15 @@ const UnstyledInput = styled__default.default.input.withConfig({
 const ChipContainer = styled__default.default.div.withConfig({
   displayName: "MultipleInput__ChipContainer",
   componentId: "sc-1evc1aa-1"
-})(["display:flex;flex-wrap:wrap;gap:0.5rem;height:100%;"]);
+})(["display:flex;flex-wrap:wrap;align-items:center;align-content:center;min-height:100%;gap:", ";margin:", ";"], ({
+  $density
+}) => $density === 'compact' ? '2px' : '0.5rem', ({
+  $density
+}) => $density === 'compact' ? '-2px 0' : '0');
 const MultipleInput = () => {
+  const {
+    density
+  } = useEds();
   const {
     selectedItems,
     selectionDisplay,
@@ -9602,23 +9609,31 @@ const MultipleInput = () => {
     e.stopPropagation();
     handleChipRemove(item, index, false);
   };
+  const minHeight = density === 'compact' ? '24px' : '36px';
   return /*#__PURE__*/jsxRuntime.jsx(Input$4, {
     as: 'div',
     variant: variant,
     rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
     rightAdornments: /*#__PURE__*/jsxRuntime.jsx(RightAdornments, {}),
     readOnly: readOnly,
-    style: {
+    style: selectionDisplay === 'chips' ? {
       height: 'auto',
-      minHeight: '36px'
-    },
+      minHeight
+    } : undefined,
+    "data-density": density,
     children: /*#__PURE__*/jsxRuntime.jsxs(ChipContainer, {
+      $density: density,
       children: [selectionDisplay === 'chips' && selectedItems.map((item, index) => /*#__PURE__*/jsxRuntime.jsx(Chip, {
         ref: el => {
           if (el) chipRefs.current.set(getLabel(item), el);else chipRefs.current.delete(getLabel(item));
         },
         style: {
-          outline: '1px solid var(--eds-color-accent-12)'
+          outline: '1px solid var(--eds-color-accent-12)',
+          ...(density === 'compact' && {
+            height: '16px',
+            fontSize: '12px',
+            gridGap: '0px'
+          })
         },
         onDelete: handleChipDelete(item, index),
         onClick: handleChipClick(item, index),

package/dist/esm/components/Autocomplete/MultipleInput.mjs

@@ -4,6 +4,7 @@ import { useAutocompleteContext } from './AutocompleteContext.mjs';
 import { RightAdornments } from './RightAdornments.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Chip } from '../Chip/Chip.mjs';
+import { useEds } from '../EdsProvider/eds.context.mjs';
 import { Input } from '../Input/Input.mjs';
 
 const UnstyledInput = styled.input.withConfig({
@@ -13,8 +14,15 @@ const UnstyledInput = styled.input.withConfig({
 const ChipContainer = styled.div.withConfig({
   displayName: "MultipleInput__ChipContainer",
   componentId: "sc-1evc1aa-1"
-})(["display:flex;flex-wrap:wrap;gap:0.5rem;height:100%;"]);
+})(["display:flex;flex-wrap:wrap;align-items:center;align-content:center;min-height:100%;gap:", ";margin:", ";"], ({
+  $density
+}) => $density === 'compact' ? '2px' : '0.5rem', ({
+  $density
+}) => $density === 'compact' ? '-2px 0' : '0');
 const MultipleInput = () => {
+  const {
+    density
+  } = useEds();
   const {
     selectedItems,
     selectionDisplay,
@@ -49,23 +57,31 @@ const MultipleInput = () => {
     e.stopPropagation();
     handleChipRemove(item, index, false);
   };
+  const minHeight = density === 'compact' ? '24px' : '36px';
   return /*#__PURE__*/jsx(Input, {
     as: 'div',
     variant: variant,
     rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
     rightAdornments: /*#__PURE__*/jsx(RightAdornments, {}),
     readOnly: readOnly,
-    style: {
+    style: selectionDisplay === 'chips' ? {
       height: 'auto',
-      minHeight: '36px'
-    },
+      minHeight
+    } : undefined,
+    "data-density": density,
     children: /*#__PURE__*/jsxs(ChipContainer, {
+      $density: density,
       children: [selectionDisplay === 'chips' && selectedItems.map((item, index) => /*#__PURE__*/jsx(Chip, {
         ref: el => {
           if (el) chipRefs.current.set(getLabel(item), el);else chipRefs.current.delete(getLabel(item));
         },
         style: {
-          outline: '1px solid var(--eds-color-accent-12)'
+          outline: '1px solid var(--eds-color-accent-12)',
+          ...(density === 'compact' && {
+            height: '16px',
+            fontSize: '12px',
+            gridGap: '0px'
+          })
         },
         onDelete: handleChipDelete(item, index),
         onClick: handleChipClick(item, index),

package/dist/types/components/Typography/index.d.ts

@@ -6,3 +6,4 @@ export type { TypographyNextProps } from './Typography.new.types';
 export type { HeadingProps } from './Heading.types';
 export type { ParagraphProps } from './Paragraph.types';
 export type { FontFamily, FontSize, LineHeight, BaselineAlignment, FontWeight, Tracking, } from './types';
+export type { TypographyVariants, ColorVariants, TypographyGroups, } from './Typography.tokens';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -98,8 +98,8 @@
     "downshift": "9.0.10",
     "react-aria": "^3.44.0",
     "@equinor/eds-icons": "^1.2.1",
-    "@equinor/eds-utils": "^2.0.0",
-    "@equinor/eds-tokens": "^2.1.1"
+    "@equinor/eds-tokens": "^2.1.1",
+    "@equinor/eds-utils": "^2.0.0"
   },
   "scripts": {
     "build": "rollup -c && tsc -p tsconfig.build.json",