@jobber/components 4.68.6 → 4.68.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var Card = require('../Card-3178033c.js');
5
+ var Card = require('../Card-138e5f40.js');
6
6
  require('react');
7
7
  require('classnames');
8
8
  require('../style-inject.es-9d2f5f4e.js');
@@ -12,8 +12,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
  var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
14
14
 
15
- var css_248z$1 = ":root {\n --card--accent-color: var(--color-grey);\n --card--base-padding: var(--space-base);\n}\n\n._2wxPdv7kELk- {\n --card--border-color: var(--color-border);\n display: block;\n width: 100%;\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--border-base) solid var(--card--border-color);\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n outline-color: rgb(147, 161, 169);\n outline-color: var(--color-focus);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._2wxPdv7kELk- > * {\n --public-content--padding: var(--card--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2wxPdv7kELk- > * > * {\n --public-content--padding: 0;\n}\n\n._2wxPdv7kELk-:active {\n outline: 0;\n}\n\n._5LfUFF9DYsk- {\n border-top-width: 0;\n}\n\n._5LfUFF9DYsk-::before {\n content: \" \";\n display: block;\n margin: 0 calc(-1 * (16px / 16));\n margin: 0 calc(-1 * calc(16px / 16));\n margin: 0 calc(-1 * var(--border-base));\n border-top: 0.5rem solid rgb(181, 181, 181);\n border-top: 0.5rem solid var(--card--accent-color);\n border-radius: calc(16px / 8) calc(16px / 8) 0 0;\n border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n.tRfpysqqk8s- {\n --card--border-color: transparent;\n box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n rgba(0, 0, 0, 0.1),\n 0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n box-shadow: var(--shadow-base);\n color: inherit;\n text-decoration: inherit;\n cursor: pointer;\n transition: all 100ms linear;\n transition: all var(--timing-quick) linear;\n}\n\n.tRfpysqqk8s-:hover,\n.tRfpysqqk8s-:focus {\n background-color: rgb(244, 246, 250);\n background-color: var(--color-surface--hover);\n}\n\n.fAPeD1InvAI- {\n display: -ms-flexbox;\n display: flex;\n padding: calc(16px * 1);\n padding: var(--card--base-padding);\n background-color: rgb(238, 240, 242);\n background-color: var(--color-surface--background);\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: start;\n align-items: flex-start;\n gap: calc(16px / 2);\n gap: var(--space-small);\n}\n";
16
- var styles = {"card":"_2wxPdv7kELk-","accent":"_5LfUFF9DYsk-","clickable":"tRfpysqqk8s-","header":"fAPeD1InvAI-"};
15
+ var css_248z$1 = ":root {\n --card--accent-color: var(--color-grey);\n --card--base-padding: var(--space-base);\n --card--border: var(--border-base) solid var(--color-border);\n --card--header-background: var(--color-surface--background);\n}\n\n._2wxPdv7kELk- {\n display: block;\n width: 100%;\n border: calc(16px / 16) solid rgb(217, 223, 225);\n border: var(--card--border);\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n outline-color: rgb(147, 161, 169);\n outline-color: var(--color-focus);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n}\n\n._2wxPdv7kELk-:active {\n outline: 0;\n}\n\n:root .jobber-retheme ._2wxPdv7kELk-:not(.tRfpysqqk8s-) {\n --card--base-padding: var(--space-base);\n --card--border: none;\n --card--header-background: transparent;\n}\n\n@media (min-width: 768px) {\n\n:root .jobber-retheme ._2wxPdv7kELk-:not(.tRfpysqqk8s-) {\n --card--base-padding: 0;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n:root .jobber-retheme ._2wxPdv7kELk-:not(.tRfpysqqk8s-) {\n --card--base-padding: 0;\n}\n }\n\n/* Adjust `Content` components public padding to match the cards */\n\n._2wxPdv7kELk- > * {\n --public-content--padding: var(--card--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2wxPdv7kELk- > * > * {\n --public-content--padding: 0;\n}\n\n._5LfUFF9DYsk- {\n border-top-width: 0;\n}\n\n._5LfUFF9DYsk-::before {\n content: \" \";\n display: block;\n margin: 0 calc(-1 * (16px / 16));\n margin: 0 calc(-1 * calc(16px / 16));\n margin: 0 calc(-1 * var(--border-base));\n border-top: 0.5rem solid rgb(181, 181, 181);\n border-top: 0.5rem solid var(--card--accent-color);\n border-radius: calc(16px / 8) calc(16px / 8) 0 0;\n border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n.tRfpysqqk8s- {\n --card--border: none;\n\n box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n rgba(0, 0, 0, 0.1),\n 0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n\n box-shadow: var(--shadow-base);\n color: inherit;\n text-decoration: inherit;\n cursor: pointer;\n transition: all 100ms linear;\n transition: all var(--timing-quick) linear;\n}\n\n.tRfpysqqk8s-:hover,\n.tRfpysqqk8s-:focus {\n background-color: rgb(244, 246, 250);\n background-color: var(--color-surface--hover);\n}\n\n.fAPeD1InvAI- {\n display: -ms-flexbox;\n display: flex;\n padding: calc(16px * 1);\n padding: var(--card--base-padding);\n background-color: rgb(238, 240, 242);\n background-color: var(--card--header-background);\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: start;\n align-items: flex-start;\n gap: calc(16px / 2);\n gap: var(--space-small);\n}\n\n.jobber-retheme .fAPeD1InvAI- {\n padding: calc(16px * 1);\n padding: var(--card--base-padding);\n padding-bottom: 0;\n}\n\n@media (min-width: 768px) {\n\n.jobber-retheme .fAPeD1InvAI- {\n padding: calc(16px * 1) 0;\n padding: var(--space-base) 0;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.jobber-retheme .fAPeD1InvAI- {\n padding: calc(16px * 1) 0;\n padding: var(--space-base) 0;\n}\n }\n\n.jobber-retheme .fAPeD1InvAI- h3 {\n font-family: \"Inter\", Helvetica, Arial, sans-serif;\n font-family: var(--typography--fontFamily-normal);\n font-size: calc((16px * 1) * 1.5);\n font-size: calc(calc(16px * 1) * 1.5);\n font-size: var(--typography--fontSize-largest);\n}\n";
16
+ var styles = {"card":"_2wxPdv7kELk-","clickable":"tRfpysqqk8s-","accent":"_5LfUFF9DYsk-","header":"fAPeD1InvAI-"};
17
17
  styleInject_es.styleInject(css_248z$1);
18
18
 
19
19
  var css_248z = ".vvT4WQQNm1A- {\n --card--accent-color: var(--color-request);\n}\n\n.ewWSA-AqPBs- {\n --card--accent-color: var(--color-quote);\n}\n\n.ZuQFWmcM-38- {\n --card--accent-color: var(--color-job);\n}\n\n.b9aB-DbfSI8- {\n --card--accent-color: var(--color-invoice);\n}\n\n._6tFyd9Op3QY- {\n --card--accent-color: var(--color-blue);\n}\n\n.uFlsik1sMf8- {\n --card--accent-color: var(--color-blue--light);\n}\n\n._2dO0zCHWU48- {\n --card--accent-color: var(--color-blue--lighter);\n}\n\n.RR-XaNyu23U- {\n --card--accent-color: var(--color-blue--lightest);\n}\n\n.HLricrV5TRM- {\n --card--accent-color: var(--color-blue--dark);\n}\n\n.fvMAXzbYjVo- {\n --card--accent-color: var(--color-green);\n}\n\n.vppB-fszJ7M- {\n --card--accent-color: var(--color-green--light);\n}\n\n.EH4yrRyVrog- {\n --card--accent-color: var(--color-green--lighter);\n}\n\n.jfuIATPvpzw- {\n --card--accent-color: var(--color-green--lightest);\n}\n\n.mDgzdSzCmlw- {\n --card--accent-color: var(--color-green--dark);\n}\n\n.OWeyNXobrek- {\n --card--accent-color: var(--color-lime);\n}\n\n.gBd-jW7hc2A- {\n --card--accent-color: var(--color-lime--light);\n}\n\n.PZ3p2kISQl8- {\n --card--accent-color: var(--color-lime--lighter);\n}\n\n.wk56Avrf5u8- {\n --card--accent-color: var(--color-lime--lightest);\n}\n\n.BpxVs0ESZZQ- {\n --card--accent-color: var(--color-lime--lightest);\n}\n\n.W1Plus-w90s- {\n --card--accent-color: var(--color-yellowGreen);\n}\n\n.MBvezPZf2r0- {\n --card--accent-color: var(--color-yellowGreen--light);\n}\n\n.HpMA-8L7gEQ- {\n --card--accent-color: var(--color-yellowGreen--lighter);\n}\n\n.Z7K3xhC6jU8- {\n --card--accent-color: var(--color-yellowGreen--lightest);\n}\n\n.qYud5BgZVDQ- {\n --card--accent-color: var(--color-yellowGreen--dark);\n}\n\n.UmKFuhj-odE- {\n --card--accent-color: var(--color-yellow);\n}\n\n.urbYXsHvb-o- {\n --card--accent-color: var(--color-yellow--light);\n}\n\n.J5f4ygfEe1M- {\n --card--accent-color: var(--color-yellow--lighter);\n}\n\n.f0YOqNTXr2c- {\n --card--accent-color: var(--color-yellow--lightest);\n}\n\n.zYMhMXskG-o- {\n --card--accent-color: var(--color-yellow--dark);\n}\n\n.xMW5G3bcZ-U- {\n --card--accent-color: var(--color-red);\n}\n\n.-O8T8zi0AkQ- {\n --card--accent-color: var(--color-red--light);\n}\n\n.WNaOw-wPD40- {\n --card--accent-color: var(--color-red--light);\n}\n\n._3jne5angZmM- {\n --card--accent-color: var(--color-red--lightest);\n}\n\n.Ce3FxZAnXks- {\n --card--accent-color: var(--color-red--dark);\n}\n\n.Ubx9QHfbYVg- {\n --card--accent-color: var(--color-grey);\n}\n\n._9orHaOxo3ew- {\n --card--accent-color: var(--color-grey--light);\n}\n\n.gvgk4-Qr7G8- {\n --card--accent-color: var(--color-grey--lighter);\n}\n\n._6dk6hwjKwz8- {\n --card--accent-color: var(--color-grey--lightest);\n}\n\n.LFsxlyhhXWE- {\n --card--accent-color: var(--color-grey--dark);\n}\n\n.MNze-s50Qx0- {\n --card--accent-color: var(--color-greyBlue);\n}\n\n._1O6fbjtLDXE- {\n --card--accent-color: var(--color-greyBlue--light);\n}\n\n._3coHcfDM3VA- {\n --card--accent-color: var(--color-greyBlue--lighter);\n}\n\n._1GwEUK3RMmk- {\n --card--accent-color: var(--color-greyBlue--lightest);\n}\n\n._03qQDU55XhA- {\n --card--accent-color: var(--color-greyBlue--dark);\n}\n\n.XrONNgApzcY- {\n --card--accent-color: var(--color-lightBlue);\n}\n\n.axCpC15OAsQ- {\n --card--accent-color: var(--color-lightBlue--light);\n}\n\n.l7-ZKiT7ECs- {\n --card--accent-color: var(--color-lightBlue--lighter);\n}\n\n.R-d7ifPGd-U- {\n --card--accent-color: var(--color-lightBlue--lightest);\n}\n\n.tjGcvlfZNo0- {\n --card--accent-color: var(--color-lightBlue--dark);\n}\n\n._6yFi1QGzU-0- {\n --card--accent-color: var(--color-purple);\n}\n\n.s5B034ADstg- {\n --card--accent-color: var(--color-purple--light);\n}\n\n.XvHFMKO2QkA- {\n --card--accent-color: var(--color-purple--lighter);\n}\n\n.z1yqV2h-X0o- {\n --card--accent-color: var(--color-purple--lightest);\n}\n\n.ShqfQED9t1k- {\n --card--accent-color: var(--color-purple--dark);\n}\n\n.TSAuQcS9guw- {\n --card--accent-color: var(--color-pink);\n}\n\n.GwUX04DtVTg- {\n --card--accent-color: var(--color-pink--light);\n}\n\n.OOxzzrT-Kyg- {\n --card--accent-color: var(--color-pink--lighter);\n}\n\n._9iIg4vnXMPQ- {\n --card--accent-color: var(--color-pink--lightest);\n}\n\n._3VTCutRlbfQ- {\n --card--accent-color: var(--color-pink--dark);\n}\n\n.fG-k53wCdy8- {\n --card--accent-color: var(--color-teal);\n}\n\n.GMNha2EEVYg- {\n --card--accent-color: var(--color-teal--light);\n}\n\n._8mCqw-pGqc8- {\n --card--accent-color: var(--color-teal--lighter);\n}\n\n.XHd3g6apCv8- {\n --card--accent-color: var(--color-teal--lightest);\n}\n\n.XadpYA5oNNU- {\n --card--accent-color: var(--color-teal--dark);\n}\n\n.yOjNuw4uX2M- {\n --card--accent-color: var(--color-orange);\n}\n\n.CFBZb6YwS8U- {\n --card--accent-color: var(--color-orange--light);\n}\n\n.dj0X5xsNtZA- {\n --card--accent-color: var(--color-orange--lighter);\n}\n\n.bSU2KCid1GE- {\n --card--accent-color: var(--color-orange--lightest);\n}\n\n.dPKWRPFuIko- {\n --card--accent-color: var(--color-orange--dark);\n}\n\n.i90uzcHXLBQ- {\n --card--accent-color: var(--color-brown);\n}\n\n.Q1g5O8oxNQ8- {\n --card--accent-color: var(--color-brown--light);\n}\n\n.UimWc99bIs0- {\n --card--accent-color: var(--color-brown--lighter);\n}\n\n.AUWBtBoPSB4- {\n --card--accent-color: var(--color-brown--lightest);\n}\n\n._7xEA4hCoooA- {\n --card--accent-color: var(--color-brown--dark);\n}\n\n.IqAniikSo1A- {\n --card--accent-color: var(--color-navy);\n}\n\n.NTbn2du5U28- {\n --card--accent-color: var(--color-navy--light);\n}\n\n.RbY7pJetOU0- {\n --card--accent-color: var(--color-navy--lighter);\n}\n\n.TAlHuH8GUaY- {\n --card--accent-color: var(--color-navy--lightest);\n}\n\n.Pm1CuBHrg0Q- {\n --card--accent-color: var(--color-navy--dark);\n}\n\n._-4HRcMjMcTg- {\n --card--accent-color: var(--color-indigo);\n}\n\n.frP-WGi4cig- {\n --card--accent-color: var(--color-indigo--light);\n}\n\n.GzJbf-nczMU- {\n --card--accent-color: var(--color-indigo--lighter);\n}\n\n.LFsNJs2wsGY- {\n --card--accent-color: var(--color-indigo--lightest);\n}\n\n.KRBIaqOA1G4- {\n --card--accent-color: var(--color-indigo--dark);\n}\n\n.OXOOKDn6V-M- {\n --card--accent-color: var(--color-white);\n}\n";
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var Card = require('../Card-3178033c.js');
6
+ var Card = require('../Card-138e5f40.js');
7
7
  var Content = require('../Content-2ca1ffe1.js');
8
8
  var Emphasis = require('../Emphasis-b2d1b3aa.js');
9
9
  require('classnames');
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var RadioGroup = require('../RadioGroup-ebaa4f87.js');
5
+ var RadioGroup = require('../RadioGroup-8f43daa8.js');
6
6
  require('react');
7
7
  require('uuid');
8
8
  require('../style-inject.es-9d2f5f4e.js');
@@ -0,0 +1,47 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var uuid = require('uuid');
5
+ var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
6
+ var Text = require('./Text-4a2bc89f.js');
7
+
8
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
+
10
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
+
12
+ var css_248z = "._5P8wEHDUdKY- {\n --radio--checked-thickness: var(--border-thicker);\n --radio-diameter: var(--space-base);\n --radio--checked-shadow: 0px 0px 0px var(--space-minuscule)\n var(--color-interactive--hover);\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.jobber-retheme ._5P8wEHDUdKY- {\n --radio--checked-thickness: calc(\n var(--border-thicker) + var(--space-smallest)\n );\n --radio-diameter: calc(var(--space-base) + var(--space-smaller));\n --radio--checked-shadow: 0px 0px 0px var(--space-minuscule) transparent;\n}\n\n._08ZPdlE98Ko- {\n /* Hide checkbox on UI but not screen readers and still allow focus state */\n position: absolute;\n left: -999vw;\n}\n\n.-PUoLXltVlQ- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: calc((16px * 1) * 0.875);\n font-size: calc(calc(16px * 1) * 0.875);\n font-size: var(--typography--fontSize-base);\n cursor: pointer;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n._08ZPdlE98Ko- + .-PUoLXltVlQ-::before {\n content: \"\";\n display: block;\n width: var(--radio-diameter);\n height: var(--radio-diameter);\n box-sizing: border-box;\n margin: calc(16px / 8) calc(16px / 2) 0 0;\n margin: var(--space-smallest) var(--space-small) 0 0;\n border: calc(16px / 8) solid rgb(125, 176, 14);\n border: var(--border-thick) solid var(--color-interactive);\n border-radius: 100%;\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n transition: all 100ms ease-out;\n transition: all var(--timing-quick) ease-out;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n}\n\n.jobber-retheme ._08ZPdlE98Ko- + .-PUoLXltVlQ-::before {\n margin-top: 0;\n border-color: rgb(217, 223, 225);\n border-color: var(--color-border);\n}\n\n._08ZPdlE98Ko-:hover + .-PUoLXltVlQ-::before {\n border-color: rgb(125, 176, 14);\n border-color: var(--color-interactive);\n}\n\n._08ZPdlE98Ko-:checked + .-PUoLXltVlQ-::before {\n box-shadow: var(--radio--checked-shadow);\n border-color: rgb(81, 114, 9);\n border-color: var(--color-interactive--hover);\n border-width: var(--radio--checked-thickness);\n background-color: rgb(125, 176, 14);\n background-color: var(--color-interactive);\n}\n\n._08ZPdlE98Ko-:focus:checked + .-PUoLXltVlQ-:before {\n box-shadow: var(--radio--checked-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(--radio--checked-shadow), var(--shadow-focus);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- {\n color: rgb(181, 181, 181);\n color: var(--color-disabled);\n cursor: not-allowed;\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ-::before {\n border-color: rgb(225, 225, 225);\n border-color: var(--color-disabled--secondary);\n}\n\n.jobber-retheme ._08ZPdlE98Ko-:checked + .-PUoLXltVlQ-::before {\n border-color: rgb(125, 176, 14);\n border-color: var(--color-interactive);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n}\n\n._08ZPdlE98Ko-[disabled]:checked + .-PUoLXltVlQ-::before {\n --radio--checked-shadow: 0px 0px 0px var(--space-minuscule)\n var(--color-disabled);\n border-color: rgb(181, 181, 181);\n border-color: var(--color-disabled);\n}\n\n._8r6qT-6S9EI-,\n.C5SzbO1epLk- {\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n padding-left: calc(var(--radio-diameter) + (16px / 2));\n padding-left: calc(var(--radio-diameter) + calc(16px / 2));\n padding-left: calc(var(--radio-diameter) + var(--space-small));\n}\n\n.jobber-retheme ._8r6qT-6S9EI-,\n.jobber-retheme .C5SzbO1epLk- {\n margin-top: calc((16px / 4) * -1);\n margin-top: calc(calc(16px / 4) * -1);\n margin-top: calc(var(--space-smaller) * -1);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- + ._8r6qT-6S9EI- > p {\n color: rgb(181, 181, 181);\n color: var(--color-disabled);\n}\n";
13
+ var styles = {"radioGroup":"_5P8wEHDUdKY-","input":"_08ZPdlE98Ko-","label":"-PUoLXltVlQ-","description":"_8r6qT-6S9EI-","children":"C5SzbO1epLk-"};
14
+ styleInject_es.styleInject(css_248z);
15
+
16
+ /**
17
+ * For rendering props only. To make updates to
18
+ * the real RadioOption, look at InternalRadioOption
19
+ */
20
+ function RadioOption({ children }) {
21
+ return React__default["default"].createElement(React__default["default"].Fragment, null, children);
22
+ }
23
+ function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }) {
24
+ const inputId = `${value.toString()}_${uuid.v1()}`;
25
+ const shouldRenderIndependentChildren = label && children;
26
+ return (React__default["default"].createElement("div", null,
27
+ React__default["default"].createElement("input", { onChange: handleChange, type: "radio", name: name, value: value, disabled: disabled, checked: checked, id: inputId, className: styles.input, "aria-describedby": description ? `${inputId}_description` : undefined }),
28
+ React__default["default"].createElement("label", { className: styles.label, htmlFor: inputId }, label ? label : children),
29
+ description && (React__default["default"].createElement("div", { className: styles.description, id: `${inputId}_description` },
30
+ React__default["default"].createElement(Text.Text, { variation: "subdued", size: "small" }, description))),
31
+ shouldRenderIndependentChildren && (React__default["default"].createElement("div", { className: styles.children, id: `${inputId}_children` }, children))));
32
+ function handleChange() {
33
+ onChange(value);
34
+ }
35
+ }
36
+
37
+ function RadioGroup({ children, value, ariaLabel, onChange, name = uuid.v1(), }) {
38
+ return (React__default["default"].createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: styles.radioGroup }, React__default["default"].Children.map(children, option => (React__default["default"].createElement(InternalRadioOption, Object.assign({ checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
39
+ function handleChange(newValue) {
40
+ if (newValue !== value) {
41
+ onChange(newValue);
42
+ }
43
+ }
44
+ }
45
+
46
+ exports.RadioGroup = RadioGroup;
47
+ exports.RadioOption = RadioOption;
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var uuid = require('uuid');
7
7
  var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
8
- var RadioGroup = require('../RadioGroup-ebaa4f87.js');
8
+ var RadioGroup = require('../RadioGroup-8f43daa8.js');
9
9
  var Text = require('../Text-4a2bc89f.js');
10
10
  require('classnames');
11
11
  require('../Typography-973b122e.js');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "4.68.6",
3
+ "version": "4.68.8",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -83,5 +83,5 @@
83
83
  "> 1%",
84
84
  "IE 10"
85
85
  ],
86
- "gitHead": "2902c007636f73a986d9edc58abc66863913bc95"
86
+ "gitHead": "c4d2fd4b6a26dd95ed3b995d8743e87f2827b654"
87
87
  }
@@ -1,47 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var uuid = require('uuid');
5
- var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
6
- var Text = require('./Text-4a2bc89f.js');
7
-
8
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
-
10
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
-
12
- var css_248z = "._5P8wEHDUdKY- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n._08ZPdlE98Ko- {\n /* Hide checkbox on UI but not screen readers and still allow focus state */\n position: absolute;\n left: -999vw;\n}\n\n.-PUoLXltVlQ- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: calc((16px * 1) * 0.875);\n font-size: calc(calc(16px * 1) * 0.875);\n font-size: var(--typography--fontSize-base);\n cursor: pointer;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n._08ZPdlE98Ko- + .-PUoLXltVlQ-::before {\n content: \"\";\n display: block;\n width: calc(16px * 1);\n width: var(--space-base);\n height: calc(16px * 1);\n height: var(--space-base);\n box-sizing: border-box;\n margin: calc(16px / 8) calc(16px / 2) 0 0;\n margin: var(--space-smallest) var(--space-small) 0 0;\n border: calc(16px / 8) solid rgb(125, 176, 14);\n border: var(--border-thick) solid var(--color-interactive);\n border-radius: 100%;\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n transition: all 200ms;\n transition: all var(--timing-base);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n}\n\n._08ZPdlE98Ko-:focus + .-PUoLXltVlQ-:before {\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\n._08ZPdlE98Ko-:focus:checked + .-PUoLXltVlQ-:before {\n box-shadow: 0px 0px 0px calc(16px / 16) rgb(81, 114, 9),\n 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: 0px 0px 0px var(--space-minuscule) var(--color-interactive--hover),\n var(--shadow-focus);\n}\n\n._08ZPdlE98Ko-:checked + .-PUoLXltVlQ-::before {\n box-shadow: 0px 0px 0px calc(16px / 16) rgb(81, 114, 9);\n box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-interactive--hover);\n border-color: rgb(81, 114, 9);\n border-color: var(--color-interactive--hover);\n border-width: calc(16px / 4);\n border-width: var(--border-thicker);\n background-color: rgb(125, 176, 14);\n background-color: var(--color-interactive);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- {\n color: rgb(181, 181, 181);\n color: var(--color-disabled);\n cursor: not-allowed;\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ-::before {\n border-color: rgb(225, 225, 225);\n border-color: var(--color-disabled--secondary);\n}\n\n._08ZPdlE98Ko-[disabled]:checked + .-PUoLXltVlQ-::before {\n box-shadow: 0px 0px 0px calc(16px / 16) rgb(181, 181, 181);\n box-shadow: 0px 0px 0px var(--space-minuscule) var(--color-disabled);\n border-color: rgb(181, 181, 181);\n border-color: var(--color-grey);\n background-color: rgb(225, 225, 225);\n background-color: var(--color-disabled--secondary);\n}\n\n._8r6qT-6S9EI-,\n.C5SzbO1epLk- {\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n padding-left: calc(16px * 1.5);\n padding-left: var(--space-large);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- + ._8r6qT-6S9EI- > p {\n color: rgb(181, 181, 181);\n color: var(--color-disabled);\n}\n";
13
- var styles = {"radioGroup":"_5P8wEHDUdKY-","input":"_08ZPdlE98Ko-","label":"-PUoLXltVlQ-","description":"_8r6qT-6S9EI-","children":"C5SzbO1epLk-"};
14
- styleInject_es.styleInject(css_248z);
15
-
16
- /**
17
- * For rendering props only. To make updates to
18
- * the real RadioOption, look at InternalRadioOption
19
- */
20
- function RadioOption({ children }) {
21
- return React__default["default"].createElement(React__default["default"].Fragment, null, children);
22
- }
23
- function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }) {
24
- const inputId = `${value.toString()}_${uuid.v1()}`;
25
- const shouldRenderIndependentChildren = label && children;
26
- return (React__default["default"].createElement("div", null,
27
- React__default["default"].createElement("input", { onChange: handleChange, type: "radio", name: name, value: value, disabled: disabled, checked: checked, id: inputId, className: styles.input, "aria-describedby": description ? `${inputId}_description` : undefined }),
28
- React__default["default"].createElement("label", { className: styles.label, htmlFor: inputId }, label ? label : children),
29
- description && (React__default["default"].createElement("div", { className: styles.description, id: `${inputId}_description` },
30
- React__default["default"].createElement(Text.Text, { variation: "subdued", size: "small" }, description))),
31
- shouldRenderIndependentChildren && (React__default["default"].createElement("div", { className: styles.children, id: `${inputId}_children` }, children))));
32
- function handleChange() {
33
- onChange(value);
34
- }
35
- }
36
-
37
- function RadioGroup({ children, value, ariaLabel, onChange, name = uuid.v1(), }) {
38
- return (React__default["default"].createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: styles.radioGroup }, React__default["default"].Children.map(children, option => (React__default["default"].createElement(InternalRadioOption, Object.assign({ checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
39
- function handleChange(newValue) {
40
- if (newValue !== value) {
41
- onChange(newValue);
42
- }
43
- }
44
- }
45
-
46
- exports.RadioGroup = RadioGroup;
47
- exports.RadioOption = RadioOption;