@jobber/components 4.68.18 → 4.69.1-cssdts-exp.0

package/dist/Autocomplete/index.js

@@ -13,11 +13,11 @@ var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var Text = require('../Text-259af966.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-1e8e4bd3.js');
-var InputText = require('../InputText-0e3c927f.js');
+var InputText = require('../InputText-e2d4ac19.js');
 require('../Typography-c45bf216.js');
 require('@jobber/design');
 require('../getAtlantisConfig-0f3e8af2.js');
-require('../FormField-18cda9ed.js');
+require('../FormField-a332b2a6.js');
 require('uuid');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');

package/dist/Card/colors.css.d.ts

@@ -0,0 +1,89 @@
+declare const styles: {
+  readonly "requestColor": string;
+  readonly "quoteColor": string;
+  readonly "jobColor": string;
+  readonly "invoiceColor": string;
+  readonly "blue": string;
+  readonly "blueLight": string;
+  readonly "blueLighter": string;
+  readonly "blueLightest": string;
+  readonly "blueDark": string;
+  readonly "green": string;
+  readonly "greenLight": string;
+  readonly "greenLighter": string;
+  readonly "greenLightest": string;
+  readonly "greenDark": string;
+  readonly "lime": string;
+  readonly "limeLight": string;
+  readonly "limeLighter": string;
+  readonly "limeLightest": string;
+  readonly "limeDark": string;
+  readonly "yellowGreen": string;
+  readonly "yellowGreenLight": string;
+  readonly "yellowGreenLighter": string;
+  readonly "yellowGreenLightest": string;
+  readonly "yellowGreenDark": string;
+  readonly "yellow": string;
+  readonly "yellowLight": string;
+  readonly "yellowLighter": string;
+  readonly "yellowLightest": string;
+  readonly "yellowDark": string;
+  readonly "red": string;
+  readonly "redLight": string;
+  readonly "redLighter": string;
+  readonly "redLightest": string;
+  readonly "redDark": string;
+  readonly "grey": string;
+  readonly "greyLight": string;
+  readonly "greyLighter": string;
+  readonly "greyLightest": string;
+  readonly "greyDark": string;
+  readonly "greyBlue": string;
+  readonly "greyBlueLight": string;
+  readonly "greyBlueLighter": string;
+  readonly "greyBlueLightest": string;
+  readonly "greyBlueDark": string;
+  readonly "lightBlue": string;
+  readonly "lightBlueLight": string;
+  readonly "lightBlueLighter": string;
+  readonly "lightBlueLightest": string;
+  readonly "lightBlueDark": string;
+  readonly "purple": string;
+  readonly "purpleLight": string;
+  readonly "purpleLighter": string;
+  readonly "purpleLightest": string;
+  readonly "purpleDark": string;
+  readonly "pink": string;
+  readonly "pinkLight": string;
+  readonly "pinkLighter": string;
+  readonly "pinkLightest": string;
+  readonly "pinkDark": string;
+  readonly "teal": string;
+  readonly "tealLight": string;
+  readonly "tealLighter": string;
+  readonly "tealLightest": string;
+  readonly "tealDark": string;
+  readonly "orange": string;
+  readonly "orangeLight": string;
+  readonly "orangeLighter": string;
+  readonly "orangeLightest": string;
+  readonly "orangeDark": string;
+  readonly "brown": string;
+  readonly "brownLight": string;
+  readonly "brownLighter": string;
+  readonly "brownLightest": string;
+  readonly "brownDark": string;
+  readonly "navy": string;
+  readonly "navyLight": string;
+  readonly "navyLighter": string;
+  readonly "navyLightest": string;
+  readonly "navyDark": string;
+  readonly "indigo": string;
+  readonly "indigoLight": string;
+  readonly "indigoLighter": string;
+  readonly "indigoLightest": string;
+  readonly "indigoDark": string;
+  readonly "white": string;
+};
+export = styles;
+

package/dist/Content/Spacing.css.d.ts

@@ -0,0 +1,7 @@
+declare const styles: {
+  readonly "base": string;
+  readonly "small": string;
+  readonly "large": string;
+};
+export = styles;
+

package/dist/DataList/index.js

@@ -29,7 +29,7 @@ var Combobox = require('../Combobox-95b3c413.js');
 var Chip = require('../Chip-c91fd6c8.js');
 var Icon = require('../Icon-405a216c.js');
 var debounce = require('lodash/debounce');
-var InputText = require('../InputText-0e3c927f.js');
+var InputText = require('../InputText-e2d4ac19.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
 var Typography = require('../Typography-c45bf216.js');
 require('../Content-2ca1ffe1.js');
@@ -40,7 +40,7 @@ require('react-hook-form');
 require('@jobber/hooks/useAssert');
 require('../Avatar-76a799fa.js');
 require('color');
-require('../FormField-18cda9ed.js');
+require('../FormField-a332b2a6.js');
 require('@jobber/hooks/useShowClear');
 require('../InputValidation-a7a737f9.js');
 
@@ -52,7 +52,7 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var css_248z$f = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n  --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n/*\n * Header\n */\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto -webkit-max-content;\n  grid-template-columns: auto max-content;\n}\n\n.jGHZZYZm1ZY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(217, 223, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n  --data-list--header-actions-gap: var(--space-small);\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px / 2);\n  gap: var(--data-list--header-actions-gap);\n}\n\n@media (max-width: 489px) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n.jMSVGIAr5tk- > p {\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: var(--data-list--header-actions-gap);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n  display: grid;\n  grid-template-columns: minmax(0px, auto);\n  min-height: var(--data-list--minimum-item-height);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--hover);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  text-align: left;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n  outline: none;\n  background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n  .ise8kHCfhCY-:hover,\n  .ise8kHCfhCY-:focus-within {\n    background-color: transparent;\n  }\n\n  .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n    background-color: var(--data-list-item-active-color);\n  }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\n  -webkit-column-gap: calc(16px / 2);\n  -webkit-column-gap: var(--space-small);\n     -moz-column-gap: calc(16px / 2);\n     -moz-column-gap: var(--space-small);\n          column-gap: calc(16px / 2);\n          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n\n  /* To compensate the Checkbox's label margin that we are using for screen-readers */\n  margin-right: calc((16px * 1) * -1);\n  margin-right: calc(calc(16px * 1) * -1);\n  margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  -ms-flex-order: 2;\n      order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n  -ms-flex-order: 1;\n      order: 1;\n  padding-top: calc(16px / 4);\n  padding-top: var(--space-smaller);\n  opacity: 1;\n  transition: opacity 100ms ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n  opacity: 1;\n}\n\n/*\n * Filters\n */\n\n.Kkp-IYmwq-s- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  background-color: var(--color-overlay--dimmed);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n  position: absolute;\n  top: auto;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  text-indent: -10000px;\n}\n";
+var css_248z$f = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n  --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n/*\n * Header\n */\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc((16px / 2) + (16px / 4)) 0;\n  padding: calc(calc(16px / 2) + calc(16px / 4)) 0;\n  padding: calc(var(--space-small) + var(--space-smaller)) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto fit-content(calc(16px * 14));\n  grid-template-columns: auto fit-content(calc(var(--base-unit) * 14));\n}\n\n.jGHZZYZm1ZY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(217, 223, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n  --data-list--header-actions-gap: var(--space-small);\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px / 2);\n  gap: var(--data-list--header-actions-gap);\n}\n\n@media (max-width: 489px) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n.jMSVGIAr5tk- > p {\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: var(--data-list--header-actions-gap);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n  display: grid;\n  grid-template-columns: minmax(0px, auto);\n  min-height: var(--data-list--minimum-item-height);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--hover);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  text-align: left;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n  outline: none;\n  background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n  .ise8kHCfhCY-:hover,\n  .ise8kHCfhCY-:focus-within {\n    background-color: transparent;\n  }\n\n  .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n    background-color: var(--data-list-item-active-color);\n  }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\n  -webkit-column-gap: calc(16px / 2);\n  -webkit-column-gap: var(--space-small);\n     -moz-column-gap: calc(16px / 2);\n     -moz-column-gap: var(--space-small);\n          column-gap: calc(16px / 2);\n          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n\n  /* To compensate the Checkbox's label margin that we are using for screen-readers */\n  margin-right: calc((16px * 1) * -1);\n  margin-right: calc(calc(16px * 1) * -1);\n  margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  -ms-flex-order: 2;\n      order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n  -ms-flex-order: 1;\n      order: 1;\n  padding-top: calc(16px / 4);\n  padding-top: var(--space-smaller);\n  opacity: 1;\n  transition: opacity 100ms ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n  opacity: 1;\n}\n\n/*\n * Filters\n */\n\n.Kkp-IYmwq-s- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  background-color: var(--color-overlay--dimmed);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n  position: absolute;\n  top: auto;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  text-indent: -10000px;\n}\n";
 var styles$f = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","batchSelectContainer":"GiD7MjZJbcw-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","listItemClickable":"Tq6e0BGwcSM-","active":"Pc0JGX6jCD4-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-","srOnly":"esUiRgWabYw-"};
 styleInject_es.styleInject(css_248z$f);
 
@@ -959,7 +959,7 @@ function InternalDataListSearch() {
             // If the initial value changes, reset the input.
             , { 
                 // If the initial value changes, reset the input.
-                key: initialValue, defaultValue: initialValue, ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, size: "small" })),
+                key: initialValue, defaultValue: initialValue, ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
         React__default["default"].createElement("div", { className: styles$4.searchButton },
             React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React__default["default"].createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default["default"].createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
     function getPlaceholder() {

package/dist/DataTable/index.js

@@ -9,11 +9,11 @@ var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Glimmer = require('../Glimmer-cfa92a88.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-a4f8abe7.js');
+var Option = require('../Option-e5274cd8.js');
 var Button = require('../Button-b73a5e01.js');
 var Text = require('../Text-259af966.js');
 require('../Content-2ca1ffe1.js');
-require('../FormField-18cda9ed.js');
+require('../FormField-a332b2a6.js');
 require('uuid');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');

package/dist/FormField/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-18cda9ed.js');
+var FormField = require('../FormField-a332b2a6.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('uuid');

package/dist/{FormField-18cda9ed.js → FormField-a332b2a6.js}

@@ -54,7 +54,7 @@ function FormFieldDescription({ id, description, }) {
         React__default["default"].createElement(Text.Text, { size: "small", variation: "subdued" }, description)));
 }
 
-var css_248z = "._07kZJ5ltI5E- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding-left: calc(16px / 2);\n  padding-left: var(--space-small);\n}\n\n.t1fFX8kDJh8- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  right: calc(16px * 1);\n  right: var(--space-base);\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  padding: 0;\n  border: none;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.t1fFX8kDJh8-:focus {\n  outline: none;\n}\n\n.t1fFX8kDJh8-:hover,\n.t1fFX8kDJh8-:focus-visible {\n  outline: none;\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n}\n\n.t1fFX8kDJh8-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
+var css_248z = "._07kZJ5ltI5E- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding-left: calc(16px / 2);\n  padding-left: var(--space-small);\n}\n\n.t1fFX8kDJh8- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  right: calc(16px / 2);\n  right: var(--space-small);\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  padding: 0;\n  border: none;\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.t1fFX8kDJh8-:focus {\n  outline: none;\n}\n\n.t1fFX8kDJh8-:hover,\n.t1fFX8kDJh8-:focus-visible {\n  outline: none;\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n}\n\n.t1fFX8kDJh8-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n";
 var styles = {"clearContainer":"_07kZJ5ltI5E-","clearInput":"t1fFX8kDJh8-"};
 styleInject_es.styleInject(css_248z);
 

package/dist/Gallery/Gallery.css.d.ts

@@ -0,0 +1,9 @@
+declare const styles: {
+  readonly "gallery": string;
+  readonly "galleryLarge": string;
+  readonly "showMoreButton": string;
+  readonly "baseShowMoreButton": string;
+  readonly "largeShowMoreButton": string;
+};
+export = styles;
+

package/dist/Glimmer/style/Shape.css.d.ts

@@ -0,0 +1,9 @@
+declare const styles: {
+  readonly "rectangle": string;
+  readonly "rectangleShort": string;
+  readonly "rectangleShorter": string;
+  readonly "square": string;
+  readonly "circle": string;
+};
+export = styles;
+

package/dist/Glimmer/style/Sizes.css.d.ts

@@ -0,0 +1,10 @@
+declare const styles: {
+  readonly "small": string;
+  readonly "base": string;
+  readonly "large": string;
+  readonly "larger": string;
+  readonly "largest": string;
+  readonly "auto": string;
+};
+export = styles;
+

package/dist/Glimmer/style/Timing.css.d.ts

@@ -0,0 +1,6 @@
+declare const styles: {
+  readonly "base": string;
+  readonly "fast": string;
+};
+export = styles;
+

package/dist/Grid/GridAlign.css.d.ts

@@ -0,0 +1,8 @@
+declare const styles: {
+  readonly "center": string;
+  readonly "start": string;
+  readonly "end": string;
+  readonly "stretch": string;
+};
+export = styles;
+

package/dist/InputDate/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var omit = require('lodash/omit');
 var React = require('react');
-var FormField = require('../FormField-18cda9ed.js');
+var FormField = require('../FormField-a332b2a6.js');
 var DatePicker = require('../DatePicker-64c5ab1a.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');

package/dist/InputEmail/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-18cda9ed.js');
+var FormField = require('../FormField-a332b2a6.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputNumber/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputNumber = require('../InputNumber-29416358.js');
+var InputNumber = require('../InputNumber-3f5d3f8d.js');
 require('react');
-require('../FormField-18cda9ed.js');
+require('../FormField-a332b2a6.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/{InputNumber-29416358.js → InputNumber-3f5d3f8d.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-18cda9ed.js');
+var FormField = require('./FormField-a332b2a6.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputPassword/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-18cda9ed.js');
+var FormField = require('../FormField-a332b2a6.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputPhoneNumber/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var FormField = require('../FormField-18cda9ed.js');
+var FormField = require('../FormField-a332b2a6.js');
 require('uuid');
 require('classnames');
 require('@jobber/hooks/useShowClear');

package/dist/InputText/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-0e3c927f.js');
+var InputText = require('../InputText-e2d4ac19.js');
 require('react');
-require('../FormField-18cda9ed.js');
+require('../FormField-a332b2a6.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/{InputText-0e3c927f.js → InputText-e2d4ac19.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-18cda9ed.js');
+var FormField = require('./FormField-a332b2a6.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputTime/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
 var temporal = require('@std-proposal/temporal');
-var FormField = require('../FormField-18cda9ed.js');
+var FormField = require('../FormField-a332b2a6.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/Modal/Sizes.css.d.ts

@@ -0,0 +1,6 @@
+declare const styles: {
+  readonly "small": string;
+  readonly "large": string;
+};
+export = styles;
+

package/dist/{Option-a4f8abe7.js → Option-e5274cd8.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-18cda9ed.js');
+var FormField = require('./FormField-a332b2a6.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/ProgressBar/Sizes.css.d.ts

@@ -0,0 +1,7 @@
+declare const styles: {
+  readonly "smaller": string;
+  readonly "small": string;
+  readonly "base": string;
+};
+export = styles;
+

package/dist/RecurringSelect/index.js

@@ -9,11 +9,11 @@ var RadioGroup = require('../RadioGroup-ca7a5978.js');
 var Text = require('../Text-259af966.js');
 require('classnames');
 require('../Typography-c45bf216.js');
-var Option = require('../Option-a4f8abe7.js');
-var InputNumber = require('../InputNumber-29416358.js');
+var Option = require('../Option-e5274cd8.js');
+var InputNumber = require('../InputNumber-3f5d3f8d.js');
 var InputGroup = require('../InputGroup-8d4fd4eb.js');
 var Content = require('../Content-2ca1ffe1.js');
-require('../FormField-18cda9ed.js');
+require('../FormField-a332b2a6.js');
 require('../tslib.es6-5b8768b7.js');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');

package/dist/Select/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Option = require('../Option-a4f8abe7.js');
+var Option = require('../Option-e5274cd8.js');
 require('react');
-require('../FormField-18cda9ed.js');
+require('../FormField-a332b2a6.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/Typography/css/Emphasis.css.d.ts

@@ -0,0 +1,6 @@
+declare const styles: {
+  readonly "italic": string;
+  readonly "highlight": string;
+};
+export = styles;
+

package/dist/Typography/css/FontFamilies.css.d.ts

@@ -0,0 +1,6 @@
+declare const styles: {
+  readonly "base": string;
+  readonly "display": string;
+};
+export = styles;
+

package/dist/Typography/css/FontSizes.css.d.ts

@@ -0,0 +1,12 @@
+declare const styles: {
+  readonly "extravagant": string;
+  readonly "jumbo": string;
+  readonly "largest": string;
+  readonly "larger": string;
+  readonly "large": string;
+  readonly "base": string;
+  readonly "small": string;
+  readonly "smaller": string;
+};
+export = styles;
+

package/dist/Typography/css/FontWeights.css.d.ts

@@ -0,0 +1,10 @@
+declare const styles: {
+  readonly "regular": string;
+  readonly "medium": string;
+  readonly "semiBold": string;
+  readonly "bold": string;
+  readonly "extraBold": string;
+  readonly "black": string;
+};
+export = styles;
+

package/dist/Typography/css/TextAlignment.css.d.ts

@@ -0,0 +1,7 @@
+declare const styles: {
+  readonly "start": string;
+  readonly "center": string;
+  readonly "end": string;
+};
+export = styles;
+

package/dist/Typography/css/TextCases.css.d.ts

@@ -0,0 +1,7 @@
+declare const styles: {
+  readonly "uppercase": string;
+  readonly "lowercase": string;
+  readonly "capitalize": string;
+};
+export = styles;
+

package/dist/Typography/css/TextColors.css.d.ts

@@ -0,0 +1,22 @@
+declare const styles: {
+  readonly "blue": string;
+  readonly "grey": string;
+  readonly "greyBlueDark": string;
+  readonly "greyBlue": string;
+  readonly "green": string;
+  readonly "red": string;
+  readonly "yellow": string;
+  readonly "yellowDark": string;
+  readonly "lightBlue": string;
+  readonly "white": string;
+  readonly "heading": string;
+  readonly "text": string;
+  readonly "textSecondary": string;
+  readonly "critical": string;
+  readonly "warning": string;
+  readonly "informative": string;
+  readonly "success": string;
+  readonly "disabled": string;
+};
+export = styles;
+

package/dist/Typography/css/Truncate.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "textTruncate": string;
+};
+export = styles;
+

package/dist/Typography/css/Typography.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "base": string;
+};
+export = styles;
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.68.18",
+  "version": "4.69.1-cssdts-exp.0+7f541aa6",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.51.1",
-    "@jobber/formatters": "*",
+    "@jobber/formatters": "^0.2.2",
     "@jobber/hooks": "^2.8.0",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -68,6 +68,7 @@
     "postcss-import": "^12.0.1",
     "postcss-preset-env": "^8.3.0",
     "rollup": "^2.79.1",
+    "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-multi-input": "^1.4.1",
     "rollup-plugin-postcss": "^4.0.2",
     "typed-css-modules": "^0.7.0",
@@ -83,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "d77f29e8f0decc8bffc4f570cff9183020ab137e"
+  "gitHead": "7f541aa6785aca6bc2a9213a2777ea69daca2a69"
 }

package/rollup.config.js

@@ -3,6 +3,7 @@ import multiInput from "rollup-plugin-multi-input";
 import typescript from "@rollup/plugin-typescript";
 import postcss from "rollup-plugin-postcss";
 import commonjs from "@rollup/plugin-commonjs";
+import copy from "rollup-plugin-copy";
 
 export default {
   input: `src/*/index.{ts,tsx}`,
@@ -37,6 +38,62 @@ export default {
     commonjs({
       ignore: ["time-input-polyfill", "time-input-polyfill/supportsTime"],
     }),
+    copy({
+      targets: [
+        { src: "src/Card/colors.css.d.ts", dest: "dist/Card" },
+        { src: "src/Content/Spacing.css.d.ts", dest: "dist/Content" },
+        { src: "src/Gallery/Gallery.css.d.ts", dest: "dist/Gallery" },
+        { src: "src/Grid/GridAlign.css.d.ts", dest: "dist/Grid" },
+        { src: "src/Modal/Sizes.css.d.ts", dest: "dist/Modal" },
+        { src: "src/ProgressBar/Sizes.css.d.ts", dest: "dist/ProgressBar" },
+        {
+          src: "src/Typography/css/Emphasis.css.d.ts",
+          dest: "dist/Typography/css",
+        },
+        {
+          src: "src/Typography/css/FontFamilies.css.d.ts",
+          dest: "dist/Typography/css",
+        },
+        {
+          src: "src/Typography/css/FontSizes.css.d.ts",
+          dest: "dist/Typography/css",
+        },
+        {
+          src: "src/Typography/css/FontWeights.css.d.ts",
+          dest: "dist/Typography/css",
+        },
+        {
+          src: "src/Typography/css/TextAlignment.css.d.ts",
+          dest: "dist/Typography/css",
+        },
+        {
+          src: "src/Typography/css/TextCases.css.d.ts",
+          dest: "dist/Typography/css",
+        },
+        {
+          src: "src/Typography/css/TextColors.css.d.ts",
+          dest: "dist/Typography/css",
+        },
+        {
+          src: "src/Typography/css/Truncate.css.d.ts",
+          dest: "dist/Typography/css",
+        },
+        {
+          src: "src/Typography/css/Typography.css.d.ts",
+          dest: "dist/Typography/css",
+        },
+        { src: "src/Glimmer/style/Shape.css.d.ts", dest: "dist/Glimmer/style" },
+        { src: "src/Glimmer/style/Sizes.css.d.ts", dest: "dist/Glimmer/style" },
+        {
+          src: "src/Glimmer/style/Timing.css.d.ts",
+          dest: "dist/Glimmer/style",
+        },
+        {
+          src: "src/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContent.css.d.ts",
+          dest: "dist/Combobox/components/ComboboxContent/ComboboxContentList",
+        },
+      ],
+    }),
   ],
   output: [
     {