@equinor/eds-core-react 0.18.0-envis.2 → 0.19.0-dev.20220405

package/dist/esm/components/Button/tokens/button.js

@@ -92,7 +92,7 @@ const button = {
     focus: {
       outline: {
         type: 'outline',
-        offset: '2px',
+        offset: '3px',
         style: 'dashed',
         color: outline.color,
         width: outline.width

package/dist/esm/components/Button/tokens/contained.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight_1 from '../../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
 
 const {
   colors: {
@@ -36,7 +36,7 @@ const {
     }
   }
 } = tokens;
-const primary = mergeDeepRight_1(button, {
+const primary = mergeDeepRight(button, {
   background: primaryColor,
   typography: {
     color: primaryWhite
@@ -46,7 +46,7 @@ const primary = mergeDeepRight_1(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor,
-    radius: buttonBorderRadius
+    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")")
   },
   states: {
     hover: {
@@ -54,7 +54,7 @@ const primary = mergeDeepRight_1(button, {
     }
   }
 });
-const secondary = mergeDeepRight_1(primary, {
+const secondary = mergeDeepRight(primary, {
   background: secondaryColor,
   border: {
     color: secondaryColor
@@ -68,7 +68,7 @@ const secondary = mergeDeepRight_1(primary, {
     }
   }
 });
-const danger = mergeDeepRight_1(primary, {
+const danger = mergeDeepRight(primary, {
   background: dangerColor,
   border: {
     color: dangerColor

package/dist/esm/components/Button/tokens/ghost.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight_1 from '../../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
 import { button } from './button.js';
 
 const {
@@ -35,7 +35,7 @@ const {
     }
   }
 } = tokens;
-const primary = mergeDeepRight_1(button, {
+const primary = mergeDeepRight(button, {
   typography: {
     color: primaryColor
   },
@@ -54,7 +54,7 @@ const primary = mergeDeepRight_1(button, {
     }
   }
 });
-const secondary = mergeDeepRight_1(primary, {
+const secondary = mergeDeepRight(primary, {
   typography: {
     color: secondaryColor
   },
@@ -67,7 +67,7 @@ const secondary = mergeDeepRight_1(primary, {
     }
   }
 });
-const danger = mergeDeepRight_1(primary, {
+const danger = mergeDeepRight(primary, {
   typography: {
     color: dangerColor
   },

package/dist/esm/components/Button/tokens/icon.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight_1 from '../../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
 import { button } from './button.js';
 
 const {
@@ -35,9 +35,14 @@ const {
     default__base: clicboundHeight,
     compact__standard: compactClickboundHeight
   },
-  shape
+  shape,
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
+  }
 } = tokens;
-const primary = mergeDeepRight_1(button, {
+const primary = mergeDeepRight(button, {
   height: shape.icon_button.minHeight,
   width: shape.icon_button.minWidth,
   typography: {
@@ -75,7 +80,7 @@ const primary = mergeDeepRight_1(button, {
     },
     focus: {
       outline: {
-        offset: '0px'
+        offset: "-".concat(parseInt(focusOutlineWidth), "px")
       }
     }
   },
@@ -93,7 +98,7 @@ const primary = mergeDeepRight_1(button, {
     }
   }
 });
-const secondary = mergeDeepRight_1(primary, {
+const secondary = mergeDeepRight(primary, {
   typography: {
     color: secondaryColor
   },
@@ -106,7 +111,7 @@ const secondary = mergeDeepRight_1(primary, {
     }
   }
 });
-const danger = mergeDeepRight_1(primary, {
+const danger = mergeDeepRight(primary, {
   typography: {
     color: dangerColor
   },

package/dist/esm/components/Button/tokens/outlined.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight_1 from '../../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
 import { button } from './button.js';
 
 const {
@@ -40,7 +40,7 @@ const {
     }
   }
 } = tokens;
-const primary = mergeDeepRight_1(button, {
+const primary = mergeDeepRight(button, {
   typography: {
     color: primaryColor
   },
@@ -49,7 +49,7 @@ const primary = mergeDeepRight_1(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor,
-    radius: buttonBorderRadius
+    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")")
   },
   states: {
     hover: {
@@ -69,7 +69,7 @@ const primary = mergeDeepRight_1(button, {
     }
   }
 });
-const secondary = mergeDeepRight_1(primary, {
+const secondary = mergeDeepRight(primary, {
   typography: {
     color: secondaryColor
   },
@@ -88,7 +88,7 @@ const secondary = mergeDeepRight_1(primary, {
     }
   }
 });
-const danger = mergeDeepRight_1(primary, {
+const danger = mergeDeepRight(primary, {
   typography: {
     color: dangerColor
   },

package/dist/esm/components/Card/Card.js

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import * as Card_tokens from './Card.tokens.js';
+import { bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 
 const {
   primary
@@ -10,17 +10,24 @@ const {
 const StyledCard = styled.div.withConfig({
   displayName: "Card__StyledCard",
   componentId: "sc-bjucjn-0"
-})(["height:fit-content;width:100%;position:relative;background-color:", ";box-sizing:border-box;display:grid;grid-gap:16px;grid-auto-columns:auto;align-items:center;align-content:start;cursor:", ";", ";"], ({
-  background
-}) => background, ({
-  cursor
-}) => cursor, bordersTemplate(primary.border));
-const Card = /*#__PURE__*/forwardRef(function Card({
-  children,
-  variant = 'default',
-  onClick,
-  ...rest
-}, ref) {
+})(["height:fit-content;width:100%;position:relative;background-color:", ";box-sizing:border-box;display:grid;grid-gap:16px;grid-auto-columns:auto;align-items:center;align-content:start;cursor:", ";", ";"], _ref => {
+  let {
+    background
+  } = _ref;
+  return background;
+}, _ref2 => {
+  let {
+    cursor
+  } = _ref2;
+  return cursor;
+}, bordersTemplate(primary.border));
+const Card = /*#__PURE__*/forwardRef(function Card(_ref3, ref) {
+  let {
+    children,
+    variant = 'default',
+    onClick,
+    ...rest
+  } = _ref3;
   const cursor = onClick ? 'pointer' : 'default';
   const cardVariant = variant === 'default' ? 'primary' : variant;
   const token = Card_tokens[cardVariant];

package/dist/esm/components/Card/CardActions.js

@@ -10,15 +10,19 @@ const {
 const StyledCardActions = styled.div.withConfig({
   displayName: "CardActions__StyledCardActions",
   componentId: "sc-1d5vskp-0"
-})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], ({
-  justifyContent
-}) => justifyContent, spacings.right, spacings.left, spacings.top, spacings.bottom);
-const CardActions = /*#__PURE__*/forwardRef(function CardActions({
-  children,
-  alignRight = false,
-  meta = '',
-  ...rest
-}, ref) {
+})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], _ref => {
+  let {
+    justifyContent
+  } = _ref;
+  return justifyContent;
+}, spacings.right, spacings.left, spacings.top, spacings.bottom);
+const CardActions = /*#__PURE__*/forwardRef(function CardActions(_ref2, ref) {
+  let {
+    children,
+    alignRight = false,
+    meta = '',
+    ...rest
+  } = _ref2;
   const justifyContent = alignRight ? 'flex-end' : 'flex-start';
   const props = {
     ref,

package/dist/esm/components/Card/CardContent.js

@@ -10,10 +10,11 @@ const StyledCardContent = styled.div.withConfig({
   displayName: "CardContent__StyledCardContent",
   componentId: "sc-esm4ym-0"
 })(["display:grid;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}"], spacings.right, spacings.left, spacings.bottom);
-const CardContent = /*#__PURE__*/forwardRef(function CardContent({
-  children,
-  ...props
-}, ref) {
+const CardContent = /*#__PURE__*/forwardRef(function CardContent(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(StyledCardContent, {
     ref: ref,
     ...props,

package/dist/esm/components/Card/CardHeader.js

@@ -10,10 +10,11 @@ const StyledCardHeader = styled.div.withConfig({
   displayName: "CardHeader__StyledCardHeader",
   componentId: "sc-15k8edh-0"
 })(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";>:not(:first-child){margin-left:", ";}:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], spacings.right, spacings.left, spacings.left, spacings.top, spacings.bottom);
-const CardHeader = /*#__PURE__*/forwardRef(function CardHeader({
-  children,
-  ...rest
-}, ref) {
+const CardHeader = /*#__PURE__*/forwardRef(function CardHeader(_ref, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref;
   const props = { ...rest,
     ref
   };

package/dist/esm/components/Card/CardHeaderTitle.js

@@ -6,10 +6,11 @@ const StyledCardHeaderTitle = styled.div.withConfig({
   displayName: "CardHeaderTitle__StyledCardHeaderTitle",
   componentId: "sc-11m80r3-0"
 })(["display:grid;flex-grow:2;grid-auto-columns:auto;"]);
-const CardHeaderTitle = /*#__PURE__*/forwardRef(function CardHeaderTitle({
-  children,
-  ...rest
-}, ref) {
+const CardHeaderTitle = /*#__PURE__*/forwardRef(function CardHeaderTitle(_ref, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref;
   const props = { ...rest,
     ref
   };

package/dist/esm/components/Card/CardMedia.js

@@ -10,14 +10,18 @@ const {
 const StyledCardMedia = styled.div.withConfig({
   displayName: "CardMedia__StyledCardMedia",
   componentId: "sc-kr8q9c-0"
-})(["display:flex;width:auto;", ""], ({
-  fullWidth
-}) => fullWidth ? css(["> *{width:100%;}&:first-child{img{border-top-right-radius:", ";border-top-left-radius:", ";}}&:last-child{img{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}}"], border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius) : css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings.right, spacings.left, spacings.top, spacings.right, spacings.left, spacings.right, spacings.bottom, spacings.left));
-const CardMedia = /*#__PURE__*/forwardRef(function CardMedia({
-  children,
-  fullWidth = false,
-  ...rest
-}, ref) {
+})(["display:flex;width:auto;", ""], _ref => {
+  let {
+    fullWidth
+  } = _ref;
+  return fullWidth ? css(["> *{width:100%;}&:first-child{img{border-top-right-radius:", ";border-top-left-radius:", ";}}&:last-child{img{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}}"], border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius) : css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings.right, spacings.left, spacings.top, spacings.right, spacings.left, spacings.right, spacings.bottom, spacings.left);
+});
+const CardMedia = /*#__PURE__*/forwardRef(function CardMedia(_ref2, ref) {
+  let {
+    children,
+    fullWidth = false,
+    ...rest
+  } = _ref2;
   const props = { ...rest,
     ref,
     fullWidth

package/dist/esm/components/Checkbox/Checkbox.js

@@ -1,28 +1,32 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { checkbox } from './Checkbox.tokens.js';
+import { typographyTemplate } from '@equinor/eds-utils';
 import { CheckboxInput } from './Input.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { typographyTemplate } from '../../utils/templates/index.js';
 
 /* eslint camelcase: "off" */
 const StyledLabel = styled.label.withConfig({
   displayName: "Checkbox__StyledLabel",
   componentId: "sc-yg6l8h-0"
-})(["display:inline-flex;align-items:center;cursor:", ";"], ({
-  disabled
-}) => disabled ? 'not-allowed' : 'pointer');
+})(["display:inline-flex;align-items:center;cursor:", ";"], _ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 'not-allowed' : 'pointer';
+});
 const LabelText = styled.span.withConfig({
   displayName: "Checkbox__LabelText",
   componentId: "sc-yg6l8h-1"
 })(["", ";"], typographyTemplate(checkbox.typography));
-const Checkbox = /*#__PURE__*/forwardRef(function Checkbox({
-  label,
-  disabled = false,
-  indeterminate,
-  className,
-  ...rest
-}, ref) {
+const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(_ref2, ref) {
+  let {
+    label,
+    disabled = false,
+    indeterminate,
+    className,
+    ...rest
+  } = _ref2;
   return label ? /*#__PURE__*/jsxs(StyledLabel, {
     disabled: disabled,
     className: className,

package/dist/esm/components/Checkbox/Checkbox.tokens.js

@@ -31,6 +31,11 @@ const {
   clickbounds: {
     default__base: clicboundSize,
     compact__standard: compactClickboundSize
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
   }
 } = tokens;
 const checkbox = {
@@ -56,9 +61,9 @@ const checkbox = {
       outline: {
         type: 'outline',
         style: 'dashed',
-        width: '1px',
+        width: focusOutlineWidth,
         color: focusOutlineColor,
-        offset: '11px'
+        offset: '10px'
       }
     }
   },
@@ -78,9 +83,9 @@ const checkbox = {
           outline: {
             type: 'outline',
             style: 'dashed',
-            width: '1px',
+            width: focusOutlineWidth,
             color: focusOutlineColor,
-            offset: '3px'
+            offset: '2px'
           }
         }
       }

package/dist/esm/components/Checkbox/Input.js

@@ -2,67 +2,93 @@ import { forwardRef } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { checkbox_indeterminate, checkbox as checkbox$1, checkbox_outline } from '@equinor/eds-icons';
 import { checkbox } from './Checkbox.tokens.js';
+import { outlineTemplate, spacingsTemplate, useToken } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { outlineTemplate } from '../../utils/templates/focus.js';
-import { spacingsTemplate } from '../../utils/templates/index.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 /* eslint camelcase: "off" */
-const StyledPath = styled.path.attrs(({
-  icon
-}) => ({
-  fillRule: 'evenodd',
-  clipRule: 'evenodd',
-  d: icon.svgPathData
-})).withConfig({
+const StyledPath = styled.path.attrs(_ref => {
+  let {
+    icon
+  } = _ref;
+  return {
+    fillRule: 'evenodd',
+    clipRule: 'evenodd',
+    d: icon.svgPathData
+  };
+}).withConfig({
   displayName: "Input__StyledPath",
   componentId: "sc-rqj7qf-0"
 })([""]);
-const Input = styled.input.attrs(({
-  type = 'checkbox'
-}) => ({
-  type
-})).withConfig({
+const Input = styled.input.attrs(_ref2 => {
+  let {
+    type = 'checkbox'
+  } = _ref2;
+  return {
+    type
+  };
+}).withConfig({
   displayName: "Input",
   componentId: "sc-rqj7qf-1"
-})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], ({
-  theme,
-  iconSize
-}) => parseFloat(theme.clickbound.height) / iconSize, ({
-  disabled
-}) => disabled ? 'not-allowed' : 'pointer', ({
-  theme
-}) => outlineTemplate(theme.states.focus.outline), ({
-  theme
-}) => outlineTemplate(theme.states.focus.outline));
-const Svg = styled.svg.attrs(({
-  height,
-  width,
-  fill
-}) => ({
-  name: null,
-  xmlns: 'http://www.w3.org/2000/svg',
-  height,
-  width,
-  fill
-})).withConfig({
+})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], _ref3 => {
+  let {
+    theme,
+    iconSize
+  } = _ref3;
+  return parseFloat(theme.clickbound.height) / iconSize;
+}, _ref4 => {
+  let {
+    disabled
+  } = _ref4;
+  return disabled ? 'not-allowed' : 'pointer';
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return outlineTemplate(theme.states.focus.outline);
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return outlineTemplate(theme.states.focus.outline);
+});
+const Svg = styled.svg.attrs(_ref7 => {
+  let {
+    height,
+    width,
+    fill
+  } = _ref7;
+  return {
+    name: null,
+    xmlns: 'http://www.w3.org/2000/svg',
+    height,
+    width,
+    fill
+  };
+}).withConfig({
   displayName: "Input__Svg",
   componentId: "sc-rqj7qf-2"
 })(["grid-area:input;pointer-events:none;"]);
 const InputWrapper = styled.span.withConfig({
   displayName: "Input__InputWrapper",
   componentId: "sc-rqj7qf-3"
-})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;", " @media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], ({
-  theme
-}) => spacingsTemplate(theme.spacings), ({
-  disabled
-}) => disabled ? 'transparent' : checkbox.states.hover.background);
-const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput({
-  disabled = false,
-  indeterminate,
-  ...rest
-}, ref) {
+})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;", " @media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return spacingsTemplate(theme.spacings);
+}, _ref9 => {
+  let {
+    disabled
+  } = _ref9;
+  return disabled ? 'transparent' : checkbox.states.hover.background;
+});
+const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref10, ref) {
+  let {
+    disabled = false,
+    indeterminate,
+    ...rest
+  } = _ref10;
   const {
     density
   } = useEds();

package/dist/esm/components/Chip/Chip.js

@@ -2,10 +2,8 @@ import { forwardRef, Children, cloneElement } from 'react';
 import styled, { css } from 'styled-components';
 import { Icon } from './Icon.js';
 import * as Chip_tokens from './Chip.tokens.js';
+import { outlineTemplate, bordersTemplate, spacingsTemplate, typographyTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { outlineTemplate } from '../../utils/templates/focus.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
 
 const {
   enabled,
@@ -19,20 +17,28 @@ const {
   border,
   states
 } = enabled;
-const StyledChips = styled.div.attrs(({
-  clickable,
-  deletable
-}) => ({
-  tabIndex: clickable || deletable ? 0 : null,
-  role: clickable ? 'button' : null
-})).withConfig({
+const StyledChips = styled.div.attrs(_ref => {
+  let {
+    clickable,
+    deletable
+  } = _ref;
+  return {
+    tabIndex: clickable || deletable ? 0 : null,
+    role: clickable ? 'button' : null
+  };
+}).withConfig({
   displayName: "Chip__StyledChips",
   componentId: "sc-wzsllq-0"
-})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;z-index:10;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background, height, typography.color, states.hover.typography.color, states.hover.typography.color, outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography), ({
-  clickable
-}) => clickable && css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]), ({
-  variant
-}) => {
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background, height, typography.color, states.hover.typography.color, states.hover.typography.color, outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography), _ref2 => {
+  let {
+    clickable
+  } = _ref2;
+  return clickable && css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]);
+}, _ref3 => {
+  let {
+    variant
+  } = _ref3;
+
   switch (variant) {
     case 'active':
       return css(["background:", ";"], states.active.background);
@@ -43,21 +49,31 @@ const StyledChips = styled.div.attrs(({
     default:
       return '';
   }
-}, ({
-  disabled
-}) => disabled && css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color), ({
-  deletable
-}) => deletable && css(["padding-right:4px;"]), ({
-  onlyChild
-}) => onlyChild ? css(["padding-left:8px;"]) : '');
-const Chip = /*#__PURE__*/forwardRef(function Chip({
-  children,
-  onDelete,
-  disabled = false,
-  onClick,
-  variant = 'default',
-  ...other
-}, ref) {
+}, _ref4 => {
+  let {
+    disabled
+  } = _ref4;
+  return disabled && css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color);
+}, _ref5 => {
+  let {
+    deletable
+  } = _ref5;
+  return deletable && css(["padding-right:4px;"]);
+}, _ref6 => {
+  let {
+    onlyChild
+  } = _ref6;
+  return onlyChild ? css(["padding-left:8px;"]) : '';
+});
+const Chip = /*#__PURE__*/forwardRef(function Chip(_ref7, ref) {
+  let {
+    children,
+    onDelete,
+    disabled = false,
+    onClick,
+    variant = 'default',
+    ...other
+  } = _ref7;
   const handleDelete = disabled ? undefined : onDelete;
   const handleClick = disabled ? undefined : onClick;
   const deletable = handleDelete !== undefined;