@jobber/components 2.72.4-pre.27 → 2.75.1-pre.1

package/CHANGELOG.md

@@ -8,6 +8,39 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.75.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.74.0...@jobber/components@2.75.0) (2022-01-28)
+
+
+### Features
+
+* Announce chip deletion and addition JOB-41252 ([#848](https://github.com/GetJobber/atlantis/issues/848)) ([f251b42](https://github.com/GetJobber/atlantis/commit/f251b42c5aa98ee07f7e16d3605a6bd965a8231b))
+
+
+
+
+
+# [2.74.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.73.0...@jobber/components@2.74.0) (2022-01-26)
+
+
+### Features
+
+* **components:** Support dismissible type on Chips ([#847](https://github.com/GetJobber/atlantis/issues/847)) ([5f88b41](https://github.com/GetJobber/atlantis/commit/5f88b41576f80529bcd7479a5313ffc699d9e31e))
+
+
+
+
+
+# [2.73.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.72.3...@jobber/components@2.73.0) (2022-01-24)
+
+
+### Features
+
+* **components:** Left-align wrapping button labels when Icon is present  ([#841](https://github.com/GetJobber/atlantis/issues/841)) ([8fc93a4](https://github.com/GetJobber/atlantis/commit/8fc93a4f3cbef9b39fe7e5a82e538cc26c41eeae))
+
+
+
+
+
 ## [2.72.3](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.72.2...@jobber/components@2.72.3) (2022-01-21)
 
 **Note:** Version bump only for package @jobber/components

package/dist/Button/index.js

@@ -14,7 +14,7 @@ require('@jobber/design');
 var index$2 = require('../Icon/index.js');
 var reactRouterDom = require('react-router-dom');
 
-var css = ":root {\n  --button--color-variation: var(--color-interactive);\n  --button--color-variation--hover: var(--color-interactive--hover);\n  --button--color-surface: var(--color-surface);\n  --button--color-surface--hover: var(--color-surface--background);\n  --button--color-primaryLabel: var(--color-white);\n\n  --button--duration-loading: 2s;\n}\n\n.mvrsWRM8T3kCECXcDS2gd {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-height: calc(var(--base-unit) * 2.25);\n  box-sizing: border-box;\n  margin: 0;\n  border: var(--border-base) solid var(--color-interactive);\n  border: var(--border-base) solid var(--color-interactive);\n  border: var(--border-base) solid var(--button--color-variation);\n  border-radius: var(--radius-base);\n  color: var(--color-interactive);\n  color: var(--color-interactive);\n  color: var(--button--color-variation);\n  fill: var(--color-interactive);\n  fill: var(--color-interactive);\n  fill: var(--button--color-variation);\n  -webkit-font-smoothing: antialiased;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  background-color: var(--color-surface);\n  background-color: var(--color-surface);\n  background-color: var(--button--color-surface);\n  cursor: pointer;\n  transition: all var(--timing-base);\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.mvrsWRM8T3kCECXcDS2gd * {\n  color: inherit;\n  fill: inherit !important; /* required to over-ride very specific fill from <Icon> */\n}\n\n.mvrsWRM8T3kCECXcDS2gd:hover,\na.mvrsWRM8T3kCECXcDS2gd:hover,\n.mvrsWRM8T3kCECXcDS2gd:focus,\na.mvrsWRM8T3kCECXcDS2gd:focus,\n.mvrsWRM8T3kCECXcDS2gd:active,\na.mvrsWRM8T3kCECXcDS2gd:active {\n  border-color: var(--color-interactive--hover);\n  border-color: var(--color-interactive--hover);\n  border-color: var(--button--color-variation--hover);\n  color: var(--color-interactive--hover);\n  color: var(--color-interactive--hover);\n  color: var(--button--color-variation--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--button--color-variation--hover);\n  background-color: var(--color-surface--background);\n  background-color: var(--color-surface--background);\n  background-color: var(--button--color-surface--hover);\n}\n\n.mvrsWRM8T3kCECXcDS2gd:focus,\na.mvrsWRM8T3kCECXcDS2gd:focus,\n.mvrsWRM8T3kCECXcDS2gd:active,\na.mvrsWRM8T3kCECXcDS2gd:active {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/* Variation */\n\n._32HTPrDFyNRObzZRUxmhK6 {\n  --button--color-variation: var(--color-interactive);\n  --button--color-variation--hover: var(--color-interactive--hover);\n}\n\n._2skm9hoZI_lSBKFKHaBFHp {\n  --button--color-variation: var(--color-informative);\n  --button--color-variation--hover: var(--color-informative--onSurface);\n}\n\n._1XNe0NyiiX5gO7kNceanXE {\n  --button--color-variation: var(--color-destructive);\n  --button--color-variation--hover: var(--color-destructive--hover);\n}\n\n/* Subtle is special because, by default, it's styled as a secondary button */\n\n._15tUs2IB4Sic31aZYG7h3E {\n  --button--color-variation: var(--color-interactive--subtle);\n  --button--color-variation--hover: var(--color-interactive--subtle--hover);\n}\n\n/* Type */\n\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z),\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):hover,\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):focus {\n  color: var(--color-white);\n  color: var(--color-white);\n  color: var(--button--color-primaryLabel);\n  background-color: var(--color-interactive);\n  background-color: var(--color-interactive);\n  background-color: var(--button--color-variation);\n  fill: var(--color-white);\n  fill: var(--color-white);\n  fill: var(--button--color-primaryLabel);\n}\n\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):hover,\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):focus {\n  background-color: var(--color-interactive--hover);\n  background-color: var(--color-interactive--hover);\n  background-color: var(--button--color-variation--hover);\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3 {\n  color: var(--color-interactive);\n  color: var(--color-interactive);\n  color: var(--button--color-variation);\n  fill: var(--color-interactive);\n  fill: var(--color-interactive);\n  fill: var(--button--color-variation);\n  background-color: var(--color-surface);\n  background-color: var(--color-surface);\n  background-color: var(--button--color-surface);\n}\n\n._3QATgEdYmR2g9Hx6X6wCF-,\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3 {\n  border-color: var(--color-interactive);\n  border-color: var(--color-interactive);\n  border-color: var(--button--color-variation);\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3:hover,\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3:focus {\n  color: var(--color-interactive--hover);\n  color: var(--color-interactive--hover);\n  color: var(--button--color-variation--hover);\n  background-color: var(--color-surface--background);\n  background-color: var(--color-surface--background);\n  background-color: var(--button--color-surface--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--button--color-variation--hover);\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF- {\n  background-color: var(--color-surface);\n  background-color: var(--color-surface);\n  background-color: var(--button--color-surface);\n}\n\n._1IACxHVlJ8fUbaQh9Wo5wR,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF- {\n  border-color: transparent;\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:hover,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:focus {\n  background-color: var(--color-surface--background);\n  background-color: var(--color-surface--background);\n  background-color: var(--button--color-surface--hover);\n}\n\n._1IACxHVlJ8fUbaQh9Wo5wR:hover,\n._1IACxHVlJ8fUbaQh9Wo5wR:focus,\na._1IACxHVlJ8fUbaQh9Wo5wR:hover,\na._1IACxHVlJ8fUbaQh9Wo5wR:focus,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:hover,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:focus,\na._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:hover,\na._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:focus {\n  border-color: transparent;\n}\n\n._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR {\n  border-color: transparent;\n  background-color: transparent;\n}\n\n._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:hover,\n._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:focus,\na._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:hover,\na._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:focus {\n  border-color: transparent;\n  color: var(--color-interactive--subtle--hover);\n  fill: var(--color-interactive--subtle--hover);\n}\n\n/* Disabled */\n\n.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z,\na.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z,\n.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z:hover,\na.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z:hover {\n  border-color: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  background-color: var(--color-disabled--secondary);\n  fill: var(--color-disabled);\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n/* Sizes */\n\n._2bWEvNhV0hrUXGMEL-47ZW {\n  min-height: calc(var(--base-unit) * 1.5);\n  padding: 0 var(--space-small);\n}\n\n._1RWacHIaSoZ24Qq5QuiwLl {\n  min-height: calc(var(--base-unit) * 2.25);\n  padding: 0 calc(var(--space-base) - 4px);\n}\n\n._2lIWqvRcZzkk5iJxGXwXOZ {\n  min-height: calc(var(--base-unit) * 3);\n  padding: 0 var(--space-base);\n}\n\n/* Icon */\n\n.s4L5ovtQ1xiOYCxjZtZzA {\n  width: calc(var(--base-unit) * 2.25);\n  padding: 0;\n}\n\n.s4L5ovtQ1xiOYCxjZtZzA._2bWEvNhV0hrUXGMEL-47ZW {\n  width: calc(var(--space-small) * 3);\n}\n\n.s4L5ovtQ1xiOYCxjZtZzA._1RWacHIaSoZ24Qq5QuiwLl {\n  width: calc(var(--space-base) * 2.25);\n}\n\n.s4L5ovtQ1xiOYCxjZtZzA._2lIWqvRcZzkk5iJxGXwXOZ {\n  width: calc(var(--space-large) * 2);\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR {\n  width: auto;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:first-child {\n  margin-right: var(--space-small);\n}\n\n.ynAOdrWxU2gjfmktgPvCV > *:first-child {\n  margin-left: var(--space-small);\n  margin-right: 0;\n  -ms-flex-order: 1;\n      order: 1;\n}\n\n.azjQzmR6DJOHc9VhR8P_8 {\n  width: 100%;\n}\n\n._3tkzLKKpGYFY0HgS8OkM_e {\n  background-image: linear-gradient(\n    135deg,\n    rgba(0, 0, 0, 10%) 0%,\n    rgba(0, 0, 0, 10%) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(0, 0, 0, 10%) 50%,\n    rgba(0, 0, 0, 10%) 75%,\n    transparent 75%,\n    transparent 100%\n  );\n  background-size: var(--space-larger) var(--space-larger);\n  pointer-events: none;\n  cursor: not-allowed;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-duration: var(--button--duration-loading);\n          animation-duration: 2s;\n          animation-duration: 2s;\n          animation-duration: var(--button--duration-loading);\n  -webkit-animation-iteration-count: infinite;\n          animation-iteration-count: infinite;\n  -webkit-animation-name: _1g5cSkv2FhbaOp_SpZQve_;\n          animation-name: _1g5cSkv2FhbaOp_SpZQve_;\n  -webkit-animation-timing-function: linear;\n          animation-timing-function: linear;\n}\n\n._3ReFsKtTKUcgG7PduYChd3._3tkzLKKpGYFY0HgS8OkM_e:not(._15tUs2IB4Sic31aZYG7h3E) {\n  background-image: linear-gradient(\n    135deg,\n    rgba(255, 255, 255, 25%) 0%,\n    rgba(255, 255, 255, 25%) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(255, 255, 255, 25%) 50%,\n    rgba(255, 255, 255, 25%) 75%,\n    transparent 75%,\n    transparent 100%\n  );\n}\n\n@-webkit-keyframes _1g5cSkv2FhbaOp_SpZQve_ {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n\n@keyframes _1g5cSkv2FhbaOp_SpZQve_ {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n";
+var css = ":root {\n  --button--color-variation: var(--color-interactive);\n  --button--color-variation--hover: var(--color-interactive--hover);\n  --button--color-surface: var(--color-surface);\n  --button--color-surface--hover: var(--color-surface--background);\n  --button--color-primaryLabel: var(--color-white);\n\n  --button--duration-loading: 2s;\n}\n\n.mvrsWRM8T3kCECXcDS2gd {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-height: calc(var(--base-unit) * 2.25);\n  box-sizing: border-box;\n  margin: 0;\n  border: var(--border-base) solid var(--color-interactive);\n  border: var(--border-base) solid var(--color-interactive);\n  border: var(--border-base) solid var(--button--color-variation);\n  border-radius: var(--radius-base);\n  color: var(--color-interactive);\n  color: var(--color-interactive);\n  color: var(--button--color-variation);\n  fill: var(--color-interactive);\n  fill: var(--color-interactive);\n  fill: var(--button--color-variation);\n  -webkit-font-smoothing: antialiased;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  background-color: var(--color-surface);\n  background-color: var(--color-surface);\n  background-color: var(--button--color-surface);\n  cursor: pointer;\n  transition: all var(--timing-base);\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.mvrsWRM8T3kCECXcDS2gd * {\n  color: inherit;\n  fill: inherit !important; /* required to over-ride very specific fill from <Icon> */\n}\n\n.mvrsWRM8T3kCECXcDS2gd:hover,\na.mvrsWRM8T3kCECXcDS2gd:hover,\n.mvrsWRM8T3kCECXcDS2gd:focus,\na.mvrsWRM8T3kCECXcDS2gd:focus,\n.mvrsWRM8T3kCECXcDS2gd:active,\na.mvrsWRM8T3kCECXcDS2gd:active {\n  border-color: var(--color-interactive--hover);\n  border-color: var(--color-interactive--hover);\n  border-color: var(--button--color-variation--hover);\n  color: var(--color-interactive--hover);\n  color: var(--color-interactive--hover);\n  color: var(--button--color-variation--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--button--color-variation--hover);\n  background-color: var(--color-surface--background);\n  background-color: var(--color-surface--background);\n  background-color: var(--button--color-surface--hover);\n}\n\n.mvrsWRM8T3kCECXcDS2gd:focus,\na.mvrsWRM8T3kCECXcDS2gd:focus,\n.mvrsWRM8T3kCECXcDS2gd:active,\na.mvrsWRM8T3kCECXcDS2gd:active {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/* Variation */\n\n._32HTPrDFyNRObzZRUxmhK6 {\n  --button--color-variation: var(--color-interactive);\n  --button--color-variation--hover: var(--color-interactive--hover);\n}\n\n._2skm9hoZI_lSBKFKHaBFHp {\n  --button--color-variation: var(--color-informative);\n  --button--color-variation--hover: var(--color-informative--onSurface);\n}\n\n._1XNe0NyiiX5gO7kNceanXE {\n  --button--color-variation: var(--color-destructive);\n  --button--color-variation--hover: var(--color-destructive--hover);\n}\n\n/* Subtle is special because, by default, it's styled as a secondary button */\n\n._15tUs2IB4Sic31aZYG7h3E {\n  --button--color-variation: var(--color-interactive--subtle);\n  --button--color-variation--hover: var(--color-interactive--subtle--hover);\n}\n\n/* Type */\n\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z),\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):hover,\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):focus {\n  color: var(--color-white);\n  color: var(--color-white);\n  color: var(--button--color-primaryLabel);\n  background-color: var(--color-interactive);\n  background-color: var(--color-interactive);\n  background-color: var(--button--color-variation);\n  fill: var(--color-white);\n  fill: var(--color-white);\n  fill: var(--button--color-primaryLabel);\n}\n\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):hover,\n._3ReFsKtTKUcgG7PduYChd3:not(._15tUs2IB4Sic31aZYG7h3E):not(._2A9nPQukZwPTOhSExvR0-Z):focus {\n  background-color: var(--color-interactive--hover);\n  background-color: var(--color-interactive--hover);\n  background-color: var(--button--color-variation--hover);\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3 {\n  color: var(--color-interactive);\n  color: var(--color-interactive);\n  color: var(--button--color-variation);\n  fill: var(--color-interactive);\n  fill: var(--color-interactive);\n  fill: var(--button--color-variation);\n  background-color: var(--color-surface);\n  background-color: var(--color-surface);\n  background-color: var(--button--color-surface);\n}\n\n._3QATgEdYmR2g9Hx6X6wCF-,\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3 {\n  border-color: var(--color-interactive);\n  border-color: var(--color-interactive);\n  border-color: var(--button--color-variation);\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3:hover,\n._15tUs2IB4Sic31aZYG7h3E._3ReFsKtTKUcgG7PduYChd3:focus {\n  color: var(--color-interactive--hover);\n  color: var(--color-interactive--hover);\n  color: var(--button--color-variation--hover);\n  background-color: var(--color-surface--background);\n  background-color: var(--color-surface--background);\n  background-color: var(--button--color-surface--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--button--color-variation--hover);\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF- {\n  background-color: var(--color-surface);\n  background-color: var(--color-surface);\n  background-color: var(--button--color-surface);\n}\n\n._1IACxHVlJ8fUbaQh9Wo5wR,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF- {\n  border-color: transparent;\n}\n\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:hover,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:focus {\n  background-color: var(--color-surface--background);\n  background-color: var(--color-surface--background);\n  background-color: var(--button--color-surface--hover);\n}\n\n._1IACxHVlJ8fUbaQh9Wo5wR:hover,\n._1IACxHVlJ8fUbaQh9Wo5wR:focus,\na._1IACxHVlJ8fUbaQh9Wo5wR:hover,\na._1IACxHVlJ8fUbaQh9Wo5wR:focus,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:hover,\n._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:focus,\na._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:hover,\na._15tUs2IB4Sic31aZYG7h3E._3QATgEdYmR2g9Hx6X6wCF-:focus {\n  border-color: transparent;\n}\n\n._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR {\n  border-color: transparent;\n  background-color: transparent;\n}\n\n._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:hover,\n._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:focus,\na._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:hover,\na._15tUs2IB4Sic31aZYG7h3E._1IACxHVlJ8fUbaQh9Wo5wR:focus {\n  border-color: transparent;\n  color: var(--color-interactive--subtle--hover);\n  fill: var(--color-interactive--subtle--hover);\n}\n\n/* Disabled */\n\n.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z,\na.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z,\n.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z:hover,\na.mvrsWRM8T3kCECXcDS2gd._2A9nPQukZwPTOhSExvR0-Z:hover {\n  border-color: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  background-color: var(--color-disabled--secondary);\n  fill: var(--color-disabled);\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n/* Sizes */\n\n._2bWEvNhV0hrUXGMEL-47ZW {\n  min-height: calc(var(--base-unit) * 1.5);\n  padding: 0 var(--space-small);\n}\n\n._1RWacHIaSoZ24Qq5QuiwLl {\n  min-height: calc(var(--base-unit) * 2.25);\n  padding: 0 calc(var(--space-base) - 4px);\n}\n\n._2lIWqvRcZzkk5iJxGXwXOZ {\n  min-height: calc(var(--base-unit) * 3);\n  padding: 0 var(--space-base);\n}\n\n/* Icon */\n\n.s4L5ovtQ1xiOYCxjZtZzA {\n  width: calc(var(--base-unit) * 2.25);\n  padding: 0;\n}\n\n.s4L5ovtQ1xiOYCxjZtZzA._2bWEvNhV0hrUXGMEL-47ZW {\n  width: calc(var(--space-small) * 3);\n}\n\n.s4L5ovtQ1xiOYCxjZtZzA._1RWacHIaSoZ24Qq5QuiwLl {\n  width: calc(var(--space-base) * 2.25);\n}\n\n.s4L5ovtQ1xiOYCxjZtZzA._2lIWqvRcZzkk5iJxGXwXOZ {\n  width: calc(var(--space-large) * 2);\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR {\n  width: auto;\n}\n\n[dir=\"ltr\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: left;\n}\n\n[dir=\"ltr\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: left;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:dir(ltr) {\n  text-align: left;\n}\n\n[dir=\"rtl\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: right;\n}\n\n[dir=\"rtl\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: right;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:dir(rtl) {\n  text-align: right;\n}\n\n[dir=\"ltr\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: left;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:dir(ltr) {\n  text-align: left;\n}\n\n[dir=\"rtl\"] ._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: right;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:dir(rtl) {\n  text-align: right;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > * {\n  text-align: start;\n}\n\n._2QzHdqV8dZvAzrDhFuq9VR > *:first-child {\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  margin-right: var(--space-small);\n}\n\n.ynAOdrWxU2gjfmktgPvCV > *:first-child {\n  margin-left: var(--space-small);\n  margin-right: 0;\n  -ms-flex-order: 1;\n      order: 1;\n}\n\n.azjQzmR6DJOHc9VhR8P_8 {\n  width: 100%;\n}\n\n._3tkzLKKpGYFY0HgS8OkM_e {\n  background-image: linear-gradient(\n    135deg,\n    rgba(0, 0, 0, 10%) 0%,\n    rgba(0, 0, 0, 10%) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(0, 0, 0, 10%) 50%,\n    rgba(0, 0, 0, 10%) 75%,\n    transparent 75%,\n    transparent 100%\n  );\n  background-size: var(--space-larger) var(--space-larger);\n  pointer-events: none;\n  cursor: not-allowed;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-duration: var(--button--duration-loading);\n          animation-duration: 2s;\n          animation-duration: 2s;\n          animation-duration: var(--button--duration-loading);\n  -webkit-animation-iteration-count: infinite;\n          animation-iteration-count: infinite;\n  -webkit-animation-name: _1g5cSkv2FhbaOp_SpZQve_;\n          animation-name: _1g5cSkv2FhbaOp_SpZQve_;\n  -webkit-animation-timing-function: linear;\n          animation-timing-function: linear;\n}\n\n._3ReFsKtTKUcgG7PduYChd3._3tkzLKKpGYFY0HgS8OkM_e:not(._15tUs2IB4Sic31aZYG7h3E) {\n  background-image: linear-gradient(\n    135deg,\n    rgba(255, 255, 255, 25%) 0%,\n    rgba(255, 255, 255, 25%) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(255, 255, 255, 25%) 50%,\n    rgba(255, 255, 255, 25%) 75%,\n    transparent 75%,\n    transparent 100%\n  );\n}\n\n@-webkit-keyframes _1g5cSkv2FhbaOp_SpZQve_ {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n\n@keyframes _1g5cSkv2FhbaOp_SpZQve_ {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n";
 var styles = {"button":"mvrsWRM8T3kCECXcDS2gd","work":"_32HTPrDFyNRObzZRUxmhK6","learning":"_2skm9hoZI_lSBKFKHaBFHp","destructive":"_1XNe0NyiiX5gO7kNceanXE","subtle":"_15tUs2IB4Sic31aZYG7h3E","primary":"_3ReFsKtTKUcgG7PduYChd3","disabled":"_2A9nPQukZwPTOhSExvR0-Z","secondary":"_3QATgEdYmR2g9Hx6X6wCF-","tertiary":"_1IACxHVlJ8fUbaQh9Wo5wR","small":"_2bWEvNhV0hrUXGMEL-47ZW","base":"_1RWacHIaSoZ24Qq5QuiwLl","large":"_2lIWqvRcZzkk5iJxGXwXOZ","onlyIcon":"s4L5ovtQ1xiOYCxjZtZzA","hasIconAndLabel":"_2QzHdqV8dZvAzrDhFuq9VR","iconOnRight":"ynAOdrWxU2gjfmktgPvCV","fullWidth":"azjQzmR6DJOHc9VhR8P_8","loading":"_3tkzLKKpGYFY0HgS8OkM_e","animateStripes":"_1g5cSkv2FhbaOp_SpZQve_"};
 __chunk_2.styleInject(css);
 

package/dist/Chips/InternalChipDismissible/hooks/useInternalChipDismissible.d.ts

@@ -4,7 +4,7 @@ export declare function useInternalChipDismissible({ children, selected, onChang
     ref: import("react").RefObject<HTMLDivElement>;
     sortedVisibleChipOptions: import("../../Chip").ChipProps[];
     availableChipOptions: import("../../Chip").ChipProps[];
-    handleChipRemove: (value: string) => () => void;
+    handleChipRemove: (chip: import("../../Chip").ChipProps) => () => void;
     handleChipAdd: (value: string) => void;
     handleCustomAdd: ((value: string) => void) | undefined;
     handleChipClick: (value: string) => ((event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void) | undefined;

package/dist/Chips/index.js

@@ -225,9 +225,13 @@ function useInternalChipDismissible(_a) {
         return selected.indexOf(chip.value);
     });
     var availableChipOptions = chipOptions.filter(function (chip) { return !selected.includes(chip.value); });
+    var liveAnnounce = hooks.useLiveAnnounce().liveAnnounce;
     var actions = {
-        handleChipRemove: function (value) {
-            return function () { return onChange(selected.filter(function (val) { return val !== value; })); };
+        handleChipRemove: function (chip) {
+            return function () {
+                liveAnnounce(chip.label + " Removed");
+                onChange(selected.filter(function (val) { return val !== chip.value; }));
+            };
         },
         handleChipAdd: function (value) { return onChange(__chunk_1.__spread(selected, [value])); },
         handleCustomAdd: onCustomAdd,
@@ -237,10 +241,12 @@ function useInternalChipDismissible(_a) {
             return function (event) { return onClick(event, value); };
         },
         handleEmptyBackspace: function () {
-            actions.handleChipRemove(selected[selected.length - 1])();
+            actions.handleChipRemove(sortedVisibleChipOptions[selected.length - 1])();
         },
     };
-    return __chunk_1.__assign(__chunk_1.__assign({}, actions), { ref: ref, sortedVisibleChipOptions: sortedVisibleChipOptions, availableChipOptions: availableChipOptions });
+    return __chunk_1.__assign(__chunk_1.__assign({}, actions), { ref: ref,
+        sortedVisibleChipOptions: sortedVisibleChipOptions,
+        availableChipOptions: availableChipOptions });
 }
 
 var menuId = uuid.v1();
@@ -253,6 +259,7 @@ function useInternalChipDismissibleInput(_a) {
     var _g = __chunk_1.__read(React.useState(false), 2), shouldCancelBlur = _g[0], setShouldCancelBlur = _g[1];
     var canAddCustomOption = onCustomOptionSelect !== undefined && !isLoadingMore;
     var maxOptionIndex = allOptions.length - 1;
+    var liveAnnounce = hooks.useLiveAnnounce().liveAnnounce;
     React.useEffect(function () {
         setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
     }, [options]);
@@ -297,6 +304,7 @@ function useInternalChipDismissibleInput(_a) {
             var setValue = selected.custom ? onCustomOptionSelect : onOptionSelect;
             if (setValue) {
                 setValue(selected.value);
+                liveAnnounce(selected.label + " Added");
                 actions.handleReset();
                 (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }
@@ -456,7 +464,7 @@ function InternalChipDismissibleInput(props) {
 function InternalChipDismissible(props) {
     var _a = useInternalChipDismissible(props), availableChipOptions = _a.availableChipOptions, wrapperRef = _a.ref, sortedVisibleChipOptions = _a.sortedVisibleChipOptions, handleChipClick = _a.handleChipClick, handleChipAdd = _a.handleChipAdd, handleChipRemove = _a.handleChipRemove, handleCustomAdd = _a.handleCustomAdd, handleEmptyBackspace = _a.handleEmptyBackspace;
     return (React__default.createElement("div", { ref: wrapperRef, className: styles$1.wrapper, "data-testid": "dismissible-chips" },
-        sortedVisibleChipOptions.map(function (chip) { return (React__default.createElement(ChipDismissible, __chunk_1.__assign({ key: chip.value }, chip, { onClick: handleChipClick(chip.value), onRequestRemove: handleChipRemove(chip.value) }))); }),
+        sortedVisibleChipOptions.map(function (chip) { return (React__default.createElement(ChipDismissible, __chunk_1.__assign({ key: chip.value }, chip, { onClick: handleChipClick(chip.value), onRequestRemove: handleChipRemove(chip) }))); }),
         React__default.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onEmptyBackspace: handleEmptyBackspace, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "2.72.4-pre.27+e96d9d7",
+  "version": "2.75.1-pre.1+cbcc700",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,9 +17,9 @@
     "dist/*"
   ],
   "dependencies": {
-    "@jobber/design": "^0.21.0",
+    "@jobber/design": "^0.21.1-pre.43+cbcc700",
     "@jobber/formatters": "^0.2.0",
-    "@jobber/hooks": "^1.10.0",
+    "@jobber/hooks": "^1.11.0",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@types/color": "^3.0.1",
@@ -85,5 +85,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "e96d9d7f609d496955590bd7fb1b96b901ea93e3"
+  "gitHead": "cbcc700f3e2896b0f7ff93ca699acc68d6ca167f"
 }