@entur/chip 0.6.18 → 0.6.20

package/dist/chip.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.esm.js","sources":["../src/ChoiceChipGroupContext.tsx","../src/ChoiceChip.tsx","../src/ActionChip.tsx","../src/TagChip.tsx","../src/FilterChip.tsx","../src/ChoiceChipGroup.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\ntype ChoiceChipGroupContextProps = {\n  name: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  value: string | null;\n};\n\nconst ChoiceChipGroupContext =\n  React.createContext<ChoiceChipGroupContextProps | null>(null);\n\nexport const ChoiceChipGroupContextProvider = ChoiceChipGroupContext.Provider;\n\nexport const useChoiceChipGroupContext: () => ChoiceChipGroupContextProps =\n  () => {\n    const context = React.useContext(ChoiceChipGroupContext);\n    if (!context) {\n      throw new Error(\n        'You need to wrap your ChoiceChips in a ChoiceChipGroup-component',\n      );\n    }\n    return context;\n  };\n","import React from 'react';\nimport cx from 'classnames';\nimport { useChoiceChipGroupContext } from './ChoiceChipGroupContext';\nimport './BaseChip.scss';\nimport './ChoiceChip.scss';\n\nexport type ChoiceChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Om Choicechip er deaktivert eller ikke\n   * @default false\n   */\n  disabled?: boolean;\n  /** Label til ChoiceChip */\n  children?: React.ReactNode;\n  /** Verdien til ChoiceChip */\n  value: string;\n} & Omit<\n  React.DetailedHTMLProps<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HTMLInputElement\n  >,\n  'value'\n>;\n\nexport const ChoiceChip = React.forwardRef<HTMLInputElement, ChoiceChipProps>(\n  (\n    { className, children, value, disabled = false, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    const classList = cx(className, 'eds-chip', {\n      'eds-chip--disabled': disabled,\n      'eds-chip--leading-icon': hasLeadingIcon,\n      'eds-chip--trailing-icon': hasTrailingIcon,\n    });\n    const {\n      name,\n      value: selectedValue,\n      onChange,\n    } = useChoiceChipGroupContext();\n    return (\n      <label className=\"eds-choice-chip\" style={style}>\n        <input\n          className=\"eds-choice-chip__input\"\n          type=\"radio\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          checked={selectedValue === value}\n          onChange={onChange}\n          {...rest}\n        />\n        <div className={classList}>{children}</div>\n      </label>\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { LoadingDots } from '@entur/loader';\nimport './BaseChip.scss';\nimport './ActionChip.scss';\n\nexport type ActionChipProps = {\n  /** Teksten som vises i ActionChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Om chip-en er opptatt, f.eks med å oppdatere informasjon\n   * @default false\n   */\n  loading?: boolean;\n} & React.DetailedHTMLProps<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n>;\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  (\n    { children, className, loading = false, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    const ariaLabelValue = () => {\n      if (rest['aria-label']) return rest['aria-label'];\n      if (loading) return ariaLabelWhenLoading;\n      return undefined;\n    };\n\n    const ariaLabelWhenLoading = childrenArray\n      .filter(child => typeof child === 'string')\n      .join(' ');\n\n    const actionChip = (\n      <button\n        className={classNames(\n          'eds-chip',\n          'eds-action-chip',\n          {\n            'eds-chip--leading-icon': hasLeadingIcon,\n            'eds-chip--trailing-icon': hasTrailingIcon,\n            'eds-action-chip--disabled': rest.disabled,\n          },\n          className,\n        )}\n        ref={ref}\n        aria-busy={loading}\n        aria-label={ariaLabelValue()}\n        type=\"button\"\n        {...rest}\n      >\n        {loading ? (\n          <LoadingDots className=\"eds-action-chip__loading-dots\" />\n        ) : (\n          children\n        )}\n      </button>\n    );\n\n    if (rest.disabled) {\n      return (\n        <div className=\"eds-action-chip--disabled__wrapper\">{actionChip}</div>\n      );\n    }\n    return <>{actionChip}</>;\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { CloseIcon } from '@entur/icons';\nimport './BaseChip.scss';\nimport './TagChip.scss';\n\nexport type TagChipProps = {\n  /** Teksten som vises i TagChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Callback for når man klikker på krysset */\n  onClose: () => void;\n  /** Skjermlesertekst for X-knappen */\n  closeButtonAriaLabel?: string;\n};\n\nexport const TagChip = React.forwardRef<HTMLButtonElement, TagChipProps>(\n  (\n    { children, className, onClose, closeButtonAriaLabel, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    const selectedCloseLabel =\n      closeButtonAriaLabel ?? 'Fjern ' + children?.toString();\n\n    return (\n      <div\n        className={classNames('eds-chip', 'eds-tag-chip', className)}\n        {...rest}\n      >\n        {children}\n        <button\n          className=\"eds-tag-chip__close-button\"\n          type=\"button\"\n          onClick={onClose}\n          aria-label={selectedCloseLabel}\n          ref={ref}\n        >\n          <CloseIcon />\n        </button>\n      </div>\n    );\n  },\n);\n","import React from 'react';\nimport cx from 'classnames';\nimport './BaseChip.scss';\nimport './FilterChip.scss';\n\nexport type FilterChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label til FilterChip */\n  children?: React.ReactNode;\n  /** Verdien til FilterChip */\n  value: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const FilterChip = React.forwardRef<HTMLInputElement, FilterChipProps>(\n  (\n    { className, children, value, disabled = false, name, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const classList = cx(className, 'eds-chip', 'eds-filter-chip');\n\n    return (\n      <label className={classList} style={style}>\n        <input\n          className=\"eds-filter-chip__input\"\n          type=\"checkbox\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          {...rest}\n        />\n        <span className=\"eds-filter-chip__icon\">\n          <CheckboxIcon />\n        </span>\n        {children}\n      </label>\n    );\n  },\n);\n\nconst CheckboxIcon: React.FC = () => {\n  return (\n    <svg\n      className=\"eds-filter-chip-icon\"\n      width=\"11px\"\n      height=\"9px\"\n      viewBox=\"6 11 37 33\"\n    >\n      <path\n        className=\"eds-filter-chip-icon__path\"\n        d=\"M14.1 27.2l7.1 7.2 14.6-14.8\"\n        fill=\"none\"\n      />\n    </svg>\n  );\n};\n","import React from 'react';\nimport { ChoiceChipGroupContextProvider } from './ChoiceChipGroupContext';\nimport { Fieldset } from '@entur/form';\nexport type ChoiceChipGroupProps = {\n  /** Navnet til ChoiceChipsGroup */\n  name: string;\n  /** Verdien til den valgte ChoiceChipen */\n  value: string | null;\n  /** ChoiceChip-komponentene sendes inn som children */\n  children: React.ReactNode;\n  /** En callback som blir kalles hver gang en ChoiceChip klikkes på  */\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Labelen til ChoiceChip-gruppen. */\n  label?: React.ReactNode;\n  [key: string]: any;\n};\n\nexport const ChoiceChipGroup: React.FC<ChoiceChipGroupProps> = ({\n  name,\n  value,\n  children,\n  onChange,\n  label,\n  ...rest\n}) => {\n  const contextValue = React.useMemo(\n    () => ({ name, value, onChange }),\n    [name, value, onChange],\n  );\n  return (\n    <ChoiceChipGroupContextProvider value={contextValue}>\n      <Fieldset className=\"eds-choice-chips-group\" label={label} {...rest}>\n        {children}\n      </Fieldset>\n    </ChoiceChipGroupContextProvider>\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('chip', 'form');\n\nexport * from './ChoiceChip';\nexport * from './ActionChip';\nexport * from './TagChip';\nexport * from './FilterChip';\nexport * from './ChoiceChipGroup';\n"],"names":["ChoiceChipGroupContext","React","createContext","ChoiceChipGroupContextProvider","Provider","useChoiceChipGroupContext","context","useContext","Error","ChoiceChip","forwardRef","ref","className","children","value","disabled","style","rest","childrenArray","Children","toArray","hasLeadingIcon","length","hasTrailingIcon","classList","cx","name","selectedValue","onChange","type","checked","ActionChip","loading","ariaLabelValue","ariaLabelWhenLoading","undefined","filter","child","join","actionChip","classNames","LoadingDots","TagChip","onClose","closeButtonAriaLabel","selectedCloseLabel","toString","onClick","CloseIcon","FilterChip","CheckboxIcon","width","height","viewBox","d","fill","ChoiceChipGroup","label","contextValue","useMemo","Fieldset","warnAboutMissingStyles"],"mappings":"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"}
+{"version":3,"file":"chip.esm.js","sources":["../src/ChoiceChipGroupContext.tsx","../src/ChoiceChip.tsx","../src/ActionChip.tsx","../src/TagChip.tsx","../src/FilterChip.tsx","../src/ChoiceChipGroup.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\ntype ChoiceChipGroupContextProps = {\n  name: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  value: string | null;\n};\n\nconst ChoiceChipGroupContext =\n  React.createContext<ChoiceChipGroupContextProps | null>(null);\n\nexport const ChoiceChipGroupContextProvider = ChoiceChipGroupContext.Provider;\n\nexport const useChoiceChipGroupContext: () => ChoiceChipGroupContextProps =\n  () => {\n    const context = React.useContext(ChoiceChipGroupContext);\n    if (!context) {\n      throw new Error(\n        'You need to wrap your ChoiceChips in a ChoiceChipGroup-component',\n      );\n    }\n    return context;\n  };\n","import React from 'react';\nimport cx from 'classnames';\nimport { useChoiceChipGroupContext } from './ChoiceChipGroupContext';\nimport './BaseChip.scss';\nimport './ChoiceChip.scss';\n\nexport type ChoiceChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Om Choicechip er deaktivert eller ikke\n   * @default false\n   */\n  disabled?: boolean;\n  /** Label til ChoiceChip */\n  children?: React.ReactNode;\n  /** Verdien til ChoiceChip */\n  value: string;\n} & Omit<\n  React.DetailedHTMLProps<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HTMLInputElement\n  >,\n  'value'\n>;\n\nexport const ChoiceChip = React.forwardRef<HTMLInputElement, ChoiceChipProps>(\n  (\n    { className, children, value, disabled = false, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    const classList = cx(className, 'eds-chip', {\n      'eds-chip--disabled': disabled,\n      'eds-chip--leading-icon': hasLeadingIcon,\n      'eds-chip--trailing-icon': hasTrailingIcon,\n    });\n    const {\n      name,\n      value: selectedValue,\n      onChange,\n    } = useChoiceChipGroupContext();\n    return (\n      <label className=\"eds-choice-chip\" style={style}>\n        <input\n          className=\"eds-choice-chip__input\"\n          type=\"radio\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          checked={selectedValue === value}\n          onChange={onChange}\n          {...rest}\n        />\n        <div className={classList}>{children}</div>\n      </label>\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { LoadingDots } from '@entur/loader';\nimport './BaseChip.scss';\nimport './ActionChip.scss';\n\nexport type ActionChipProps = {\n  /** Teksten som vises i ActionChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Om chip-en er opptatt, f.eks med å oppdatere informasjon\n   * @default false\n   */\n  loading?: boolean;\n} & React.DetailedHTMLProps<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n>;\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  (\n    { children, className, loading = false, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    const ariaLabelValue = () => {\n      if (rest['aria-label']) return rest['aria-label'];\n      if (loading) return ariaLabelWhenLoading;\n      return undefined;\n    };\n\n    const ariaLabelWhenLoading = childrenArray\n      .filter(child => typeof child === 'string')\n      .join(' ');\n\n    const actionChip = (\n      <button\n        className={classNames(\n          'eds-chip',\n          'eds-action-chip',\n          {\n            'eds-chip--leading-icon': hasLeadingIcon,\n            'eds-chip--trailing-icon': hasTrailingIcon,\n            'eds-action-chip--disabled': rest.disabled,\n          },\n          className,\n        )}\n        ref={ref}\n        aria-busy={loading}\n        aria-label={ariaLabelValue()}\n        type=\"button\"\n        {...rest}\n      >\n        {loading ? (\n          <LoadingDots className=\"eds-action-chip__loading-dots\" />\n        ) : (\n          children\n        )}\n      </button>\n    );\n\n    if (rest.disabled) {\n      return (\n        <div className=\"eds-action-chip--disabled__wrapper\">{actionChip}</div>\n      );\n    }\n    return <>{actionChip}</>;\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { CloseIcon } from '@entur/icons';\nimport './BaseChip.scss';\nimport './TagChip.scss';\n\nexport type TagChipProps = {\n  /** Teksten som vises i TagChip */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Callback for når man klikker på krysset */\n  onClose: () => void;\n  /** Skjermlesertekst for X-knappen */\n  closeButtonAriaLabel?: string;\n};\n\nexport const TagChip = React.forwardRef<HTMLButtonElement, TagChipProps>(\n  (\n    { children, className, onClose, closeButtonAriaLabel, ...rest },\n    ref: React.Ref<HTMLButtonElement>,\n  ) => {\n    const selectedCloseLabel =\n      closeButtonAriaLabel ?? 'Fjern ' + children?.toString();\n\n    return (\n      <div\n        className={classNames('eds-chip', 'eds-tag-chip', className)}\n        {...rest}\n      >\n        {children}\n        <button\n          className=\"eds-tag-chip__close-button\"\n          type=\"button\"\n          onClick={onClose}\n          aria-label={selectedCloseLabel}\n          ref={ref}\n        >\n          <CloseIcon />\n        </button>\n      </div>\n    );\n  },\n);\n","import React from 'react';\nimport cx from 'classnames';\nimport './BaseChip.scss';\nimport './FilterChip.scss';\n\nexport type FilterChipProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Label til FilterChip */\n  children?: React.ReactNode;\n  /** Verdien til FilterChip */\n  value: string;\n} & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const FilterChip = React.forwardRef<HTMLInputElement, FilterChipProps>(\n  (\n    { className, children, value, disabled = false, name, style, ...rest },\n    ref: React.Ref<HTMLInputElement>,\n  ) => {\n    const classList = cx(className, 'eds-chip', 'eds-filter-chip');\n\n    return (\n      <label className={classList} style={style}>\n        <input\n          className=\"eds-filter-chip__input\"\n          type=\"checkbox\"\n          name={name}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          {...rest}\n        />\n        <span className=\"eds-filter-chip__icon\">\n          <CheckboxIcon />\n        </span>\n        {children}\n      </label>\n    );\n  },\n);\n\nconst CheckboxIcon: React.FC = () => {\n  return (\n    <svg\n      className=\"eds-filter-chip-icon\"\n      width=\"11px\"\n      height=\"9px\"\n      viewBox=\"6 11 37 33\"\n    >\n      <path\n        className=\"eds-filter-chip-icon__path\"\n        d=\"M14.1 27.2l7.1 7.2 14.6-14.8\"\n        fill=\"none\"\n      />\n    </svg>\n  );\n};\n","import React from 'react';\nimport { ChoiceChipGroupContextProvider } from './ChoiceChipGroupContext';\nimport { Fieldset } from '@entur/form';\nexport type ChoiceChipGroupProps = {\n  /** Navnet til ChoiceChipsGroup */\n  name: string;\n  /** Verdien til den valgte ChoiceChipen */\n  value: string | null;\n  /** ChoiceChip-komponentene sendes inn som children */\n  children: React.ReactNode;\n  /** En callback som blir kalles hver gang en ChoiceChip klikkes på  */\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Labelen til ChoiceChip-gruppen. */\n  label?: React.ReactNode;\n  [key: string]: any;\n};\n\nexport const ChoiceChipGroup: React.FC<ChoiceChipGroupProps> = ({\n  name,\n  value,\n  children,\n  onChange,\n  label,\n  ...rest\n}) => {\n  const contextValue = React.useMemo(\n    () => ({ name, value, onChange }),\n    [name, value, onChange],\n  );\n  return (\n    <ChoiceChipGroupContextProvider value={contextValue}>\n      <Fieldset className=\"eds-choice-chips-group\" label={label} {...rest}>\n        {children}\n      </Fieldset>\n    </ChoiceChipGroupContextProvider>\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('chip', 'form');\n\nexport * from './ChoiceChip';\nexport * from './ActionChip';\nexport * from './TagChip';\nexport * from './FilterChip';\nexport * from './ChoiceChipGroup';\n"],"names":["ChoiceChipGroupContext","React","createContext","ChoiceChipGroupContextProvider","Provider","useChoiceChipGroupContext","context","useContext","Error","ChoiceChip","forwardRef","ref","className","children","value","disabled","style","rest","_excluded","childrenArray","Children","toArray","hasLeadingIcon","length","hasTrailingIcon","classList","cx","name","selectedValue","onChange","createElement","type","checked","ActionChip","loading","ariaLabelValue","ariaLabelWhenLoading","undefined","filter","child","join","actionChip","classNames","LoadingDots","Fragment","TagChip","onClose","closeButtonAriaLabel","selectedCloseLabel","toString","onClick","CloseIcon","FilterChip","CheckboxIcon","width","height","viewBox","d","fill","ChoiceChipGroup","label","contextValue","useMemo","Fieldset","warnAboutMissingStyles"],"mappings":"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"}

package/dist/styles.css

@@ -2,6 +2,77 @@
   --eds-chip: 1;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-choice-chip {
+  cursor: pointer;
+  display: inline-block;
+  margin-right: 0.75rem;
+  position: relative;
+  transition: all 0.1s ease-out;
+}
+.eds-choice-chip__input {
+  -moz-appearance: none;
+       appearance: none;
+  height: 0;
+  position: absolute;
+  width: 0;
+  -webkit-appearance: none;
+}
+.eds-choice-chip__input ~ .eds-chip {
+  background-color: transparent;
+}
+.eds-contrast .eds-choice-chip__input ~ .eds-chip {
+  border-color: #aeb7e2;
+  color: #ffffff;
+}
+.eds-choice-chip__input:checked ~ .eds-chip {
+  background-color: #181c56;
+  border-color: #181c56;
+  color: #ffffff;
+}
+.eds-contrast .eds-choice-chip__input:checked ~ .eds-chip {
+  border-color: #aeb7e2;
+  background-color: #aeb7e2;
+  color: #181c56;
+}
+.eds-choice-chip__input:focus ~ .eds-chip {
+  outline: none;
+  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+  outline-offset: 0.125rem;
+}
+.eds-contrast .eds-choice-chip__input:focus ~ .eds-chip {
+  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+}
+.eds-choice-chip__input:not(:checked):not(:disabled):hover ~ .eds-chip {
+  border-color: #181c56;
+}
+.eds-contrast .eds-choice-chip__input:not(:checked):not(:disabled):hover ~ .eds-chip {
+  border-color: #ffffff;
+}
+.eds-choice-chip__input:checked:hover ~ .eds-chip {
+  background-color: #3b3e6f;
+  border-color: #3b3e6f;
+}
+.eds-contrast .eds-choice-chip__input:checked:hover ~ .eds-chip {
+  background-color: #bac2e6;
+  border-color: #bac2e6;
+}
+.eds-choice-chip__input:active ~ .eds-chip {
+  background-color: #d1d4e3;
+  border-color: #d1d4e3;
+}
+.eds-contrast .eds-choice-chip__input:active ~ .eds-chip {
+  background: #33376d;
+}
+.eds-choice-chip .eds-chip--disabled {
+  border-style: dashed;
+  cursor: not-allowed;
+}
+.eds-contrast .eds-choice-chip .eds-chip--disabled {
+  opacity: 1;
+  border-color: #8285a8;
+  color: #babbcf;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-chip {
   background: #ebebf1;
   border: 0.0625rem solid #d1d4e3;
@@ -31,54 +102,50 @@
   margin-left: 0.5rem;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-tag-chip {
-  cursor: default;
-  padding-right: 0.25rem;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-.eds-tag-chip__close-button {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: none;
-  border: none;
-  border-radius: 50%;
-  color: #181c56;
+.eds-action-chip {
   cursor: pointer;
-  display: flex;
-  font-size: 0.875rem;
-  padding: 0.25rem;
-  margin-left: 0.25rem;
-  transition: box-shadow 0.1s ease-in-out, background 0.1s ease-in-out;
-}
-.eds-contrast .eds-tag-chip__close-button {
-  color: #ffffff;
-}
-.eds-tag-chip__close-button:hover {
-  background: #babbcf;
 }
-.eds-contrast .eds-tag-chip__close-button:hover {
-  background: #54568c;
-}
-.eds-tag-chip__close-button:focus {
-  outline-offset: 0.125rem;
+.eds-action-chip:focus {
   outline: none;
   box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+  outline-offset: 0.125rem;
 }
-.eds-contrast .eds-tag-chip__close-button:focus {
+.eds-contrast .eds-action-chip:focus {
   box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+}
+.eds-action-chip:hover {
+  border-color: #181c56;
+}
+.eds-contrast .eds-action-chip:hover {
+  background-color: #54568c;
+  border-color: #54568c;
+}
+.eds-action-chip:active {
+  background: #d1d4e3;
+}
+.eds-contrast .eds-action-chip:active {
+  background-color: #292b6a;
+  border-color: #292b6a;
+}
+.eds-action-chip--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.eds-action-chip--disabled__wrapper {
+  cursor: not-allowed;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.eds-contrast .eds-action-chip__loading-dots .eds-loading-dots__dot {
+  background-color: #ffffff;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-filter-chip {
   cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   padding-left: 0.25rem;
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }
@@ -93,8 +160,7 @@
 }
 .eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon__path {
   stroke: #181c56;
-  -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
-          animation: stroke ease-in-out 0.2s 0.1s forwards;
+  animation: stroke ease-in-out 0.2s 0.1s forwards;
 }
 .eds-contrast .eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon__path {
   stroke: #5ac39a;
@@ -153,124 +219,47 @@
   stroke-width: 0.375rem;
 }
 
-@-webkit-keyframes stroke {
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
 @keyframes stroke {
   100% {
     stroke-dashoffset: 0;
   }
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-choice-chip {
-  cursor: pointer;
-  display: inline-block;
-  margin-right: 0.75rem;
-  position: relative;
-  transition: all 0.1s ease-out;
+.eds-tag-chip {
+  cursor: default;
+  padding-right: 0.25rem;
+  width: -moz-fit-content;
+  width: fit-content;
 }
-.eds-choice-chip__input {
-  -moz-appearance: none;
-       appearance: none;
-  height: 0;
-  position: absolute;
-  width: 0;
+.eds-tag-chip__close-button {
   -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+  border-radius: 50%;
+  color: #181c56;
+  cursor: pointer;
+  display: flex;
+  font-size: 0.875rem;
+  padding: 0.25rem;
+  margin-left: 0.25rem;
+  transition: box-shadow 0.1s ease-in-out, background 0.1s ease-in-out;
 }
-.eds-choice-chip__input ~ .eds-chip {
-  background-color: transparent;
-}
-.eds-contrast .eds-choice-chip__input ~ .eds-chip {
-  border-color: #aeb7e2;
+.eds-contrast .eds-tag-chip__close-button {
   color: #ffffff;
 }
-.eds-choice-chip__input:checked ~ .eds-chip {
-  background-color: #181c56;
-  border-color: #181c56;
-  color: #ffffff;
+.eds-tag-chip__close-button:hover {
+  background: #babbcf;
 }
-.eds-contrast .eds-choice-chip__input:checked ~ .eds-chip {
-  border-color: #aeb7e2;
-  background-color: #aeb7e2;
-  color: #181c56;
+.eds-contrast .eds-tag-chip__close-button:hover {
+  background: #54568c;
 }
-.eds-choice-chip__input:focus ~ .eds-chip {
-  outline: none;
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+.eds-tag-chip__close-button:focus {
   outline-offset: 0.125rem;
-}
-.eds-contrast .eds-choice-chip__input:focus ~ .eds-chip {
-  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
-}
-.eds-choice-chip__input:not(:checked):not(:disabled):hover ~ .eds-chip {
-  border-color: #181c56;
-}
-.eds-contrast .eds-choice-chip__input:not(:checked):not(:disabled):hover ~ .eds-chip {
-  border-color: #ffffff;
-}
-.eds-choice-chip__input:checked:hover ~ .eds-chip {
-  background-color: #3b3e6f;
-  border-color: #3b3e6f;
-}
-.eds-contrast .eds-choice-chip__input:checked:hover ~ .eds-chip {
-  background-color: #bac2e6;
-  border-color: #bac2e6;
-}
-.eds-choice-chip__input:active ~ .eds-chip {
-  background-color: #d1d4e3;
-  border-color: #d1d4e3;
-}
-.eds-contrast .eds-choice-chip__input:active ~ .eds-chip {
-  background: #33376d;
-}
-.eds-choice-chip .eds-chip--disabled {
-  border-style: dashed;
-  cursor: not-allowed;
-}
-.eds-contrast .eds-choice-chip .eds-chip--disabled {
-  opacity: 1;
-  border-color: #8285a8;
-  color: #babbcf;
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-action-chip {
-  cursor: pointer;
-}
-.eds-action-chip:focus {
   outline: none;
   box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
-  outline-offset: 0.125rem;
 }
-.eds-contrast .eds-action-chip:focus {
+.eds-contrast .eds-tag-chip__close-button:focus {
   box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
-}
-.eds-action-chip:hover {
-  border-color: #181c56;
-}
-.eds-contrast .eds-action-chip:hover {
-  background-color: #54568c;
-  border-color: #54568c;
-}
-.eds-action-chip:active {
-  background: #d1d4e3;
-}
-.eds-contrast .eds-action-chip:active {
-  background-color: #292b6a;
-  border-color: #292b6a;
-}
-.eds-action-chip--disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-.eds-action-chip--disabled__wrapper {
-  cursor: not-allowed;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-.eds-contrast .eds-action-chip__loading-dots .eds-loading-dots__dot {
-  background-color: #ffffff;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/chip",
-  "version": "0.6.18",
+  "version": "0.6.20",
   "license": "EUPL-1.2",
   "main": "dist/index.js",
   "module": "dist/chip.esm.js",
@@ -27,12 +27,12 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/form": "^5.4.15",
-    "@entur/icons": "^5.4.3",
-    "@entur/loader": "^0.4.18",
-    "@entur/tokens": "^3.4.5",
-    "@entur/utils": "^0.5.1",
+    "@entur/form": "^5.4.17",
+    "@entur/icons": "^5.7.0",
+    "@entur/loader": "^0.4.21",
+    "@entur/tokens": "^3.7.0",
+    "@entur/utils": "^0.5.4",
     "classnames": "^2.3.1"
   },
-  "gitHead": "224040bb9f98c2c8975ce76f0786265c9e3459e2"
+  "gitHead": "ff44073d29948fc811c0dbd6921c003794285c06"
 }