@jobber/components 5.20.8-SCOTTTHd.45 → 5.20.8-SCOTTTHs-a30bcbb.35

package/dist/{Page-BkfoOPCN.js → Page-HF7E43fM.js}

@@ -1,17 +1,16 @@
 import React from 'react';
 import classnames from 'classnames';
-import { u as useResizeObserver } from './useResizeObserver-BwWFM8ke.js';
-import { H as Heading } from './Heading-C9cMR5S0.js';
-import { T as Text } from './Text-DLaIGPdO.js';
-import { C as Content } from './Content-CEpXEhkM.js';
-import { M as Markdown } from './Markdown-BgejP_tO.js';
-import { B as Button } from './Button-DjIsGUK9.js';
-import { M as Menu } from './Menu-SxpmzPSN.js';
-import { E as Emphasis } from './Emphasis-CkBQRq7-.js';
+import { u as useResizeObserver } from './useResizeObserver-DDopVH1n.js';
+import { H as Heading } from './Heading-De8Cz0wk.js';
+import { T as Text } from './Text-DfqZm-hl.js';
+import { C as Content } from './Content-CZscRWg1.js';
+import { M as Markdown } from './Markdown-D1xb-Cwj.js';
+import { B as Button } from './Button-B_S7hCDq.js';
+import { M as Menu } from './Menu-Bahhyk73.js';
+import { E as Emphasis } from './Emphasis-CG2lsbZH.js';
 
-var styles = {"page":"pVEdXlwstrc-","fill":"_9r84iz--C5M-","standard":"_0LO26JFXU9g-","narrow":"KiMIF8eFbuE-","titleBar":"GCeQrLFyml4-","titleRow":"Rwavr8hZaCg-","actionGroup":"KP-BTjB82iQ-","large":"GuFU-PgC1j4-","medium":"qiwlkB5pxkA-","small":"CbPnpIk7-EE-","primaryAction":"E5FEsck9zwg-","actionButton":"Sn3-wJuNCqk-","subtitle":"_9ZKFDK2jL80-","spinning":"BQdr3QpQUW8-"};
+var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","large":"SH0aNOLVhE8-","medium":"Lc7Z0FsBa6w-","small":"iF5IA1SYKoA-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
 
-// eslint-disable-next-line max-statements
 function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
     const pageStyles = classnames(styles.page, styles[width]);
     const [titleBarRef, { width: titleBarWidth = useResizeObserver.Breakpoints.large }] = useResizeObserver.useResizeObserver();
@@ -44,15 +43,21 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
                                 React.createElement(Emphasis, { variation: "bold" },
                                     React.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
                     showActionGroup && (React.createElement("div", { className: styles.actionGroup },
-                        primaryAction && (React.createElement("div", { className: styles.primaryAction },
-                            React.createElement(Button, Object.assign({}, primaryAction)))),
-                        secondaryAction && (React.createElement("div", { className: styles.actionButton },
-                            React.createElement(Button, Object.assign({}, secondaryAction)))),
+                        primaryAction && (React.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
+                            React.createElement(Button, Object.assign({}, getActionProps(primaryAction))))),
+                        secondaryAction && (React.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
+                            React.createElement(Button, Object.assign({}, getActionProps(secondaryAction))))),
                         showMenu && (React.createElement("div", { className: styles.actionButton },
                             React.createElement(Menu, { items: moreActionsMenu })))))),
                 intro && (React.createElement(Text, { size: "large" },
                     React.createElement(Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
             React.createElement(Content, null, children))));
 }
+const getActionProps = (actionProps) => {
+    const buttonProps = Object.assign({}, actionProps);
+    if (actionProps.ref)
+        delete buttonProps.ref;
+    return buttonProps;
+};
 
 export { Page as P };

package/dist/Popover/index.cjs

@@ -1,16 +1,16 @@
 'use strict';
 
-var Popover = require('../Popover-BtqYP1vV.js');
+var Popover = require('../Popover-D6YbDUxB.js');
 require('react');
 require('react-popper');
-require('../useRefocusOnActivator-BcTcbVPp.js');
-require('../ButtonDismiss-B3THrLQF.js');
-require('../Button-DV8P6VM4.js');
+require('../useRefocusOnActivator-DWAxYZut.js');
+require('../ButtonDismiss-DcTAOplu.js');
+require('../Button-X03o-OsV.js');
 require('classnames');
 require('react-router-dom');
-require('../Icon-wS5vpmx3.js');
+require('../Icon-DMURv2lZ.js');
 require('@jobber/design');
-require('../Typography-KvPMVZyR.js');
+require('../Typography-DYUPEo3A.js');
 
 
 

package/dist/Popover/index.mjs

@@ -1,11 +1,11 @@
-export { P as Popover } from '../Popover-Bj4ft3ue.js';
+export { P as Popover } from '../Popover-7MYNDMaT.js';
 import 'react';
 import 'react-popper';
-import '../useRefocusOnActivator-DHo9bEuK.js';
-import '../ButtonDismiss-57RsWXKG.js';
-import '../Button-DjIsGUK9.js';
+import '../useRefocusOnActivator-pF1A-PEc.js';
+import '../ButtonDismiss-DUIaPWcl.js';
+import '../Button-B_S7hCDq.js';
 import 'classnames';
 import 'react-router-dom';
-import '../Icon-CTO4wvIZ.js';
+import '../Icon-BPJYIZWC.js';
 import '@jobber/design';
-import '../Typography-DdPGuT7r.js';
+import '../Typography-DhGlhWcl.js';

package/dist/{Popover-Bj4ft3ue.js → Popover-7MYNDMaT.js}

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { usePopper } from 'react-popper';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-DHo9bEuK.js';
-import { B as ButtonDismiss } from './ButtonDismiss-57RsWXKG.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-pF1A-PEc.js';
+import { B as ButtonDismiss } from './ButtonDismiss-DUIaPWcl.js';
 
-var classes = {"popover":"TDuYbqXaLW0-","header":"oSlK4rLUvzE-","dismissButton":"XVPpPb-7e30-","arrow":"LJCpn0zf1e8-","spinning":"cC3VM4XP25s-"};
+var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
 
 function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", }) {
     const [popperElement, setPopperElement] = useState();

package/dist/{Popover-BtqYP1vV.js → Popover-D6YbDUxB.js}

@@ -2,10 +2,10 @@
 
 var React = require('react');
 var reactPopper = require('react-popper');
-var useRefocusOnActivator = require('./useRefocusOnActivator-BcTcbVPp.js');
-var ButtonDismiss = require('./ButtonDismiss-B3THrLQF.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-DWAxYZut.js');
+var ButtonDismiss = require('./ButtonDismiss-DcTAOplu.js');
 
-var classes = {"popover":"TDuYbqXaLW0-","header":"oSlK4rLUvzE-","dismissButton":"XVPpPb-7e30-","arrow":"LJCpn0zf1e8-","spinning":"cC3VM4XP25s-"};
+var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
 
 function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", }) {
     const [popperElement, setPopperElement] = React.useState();

package/dist/ProgressBar/ProgressBar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import sizes from "./ProgressBarSizes.css";
+import sizes from "./ProgressBarSizes.module.css";
 interface ProgressBarProps {
     /**
      * The current step that the progress bar is on.

package/dist/ProgressBar/ProgressBarStepped.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import sizes from "./ProgressBarSizes.css";
+import sizes from "./ProgressBarSizes.module.css";
 interface ProgressBarSteppedProps {
     readonly currentStep: number;
     readonly totalSteps: number;

package/dist/ProgressBar/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var ProgressBar = require('../ProgressBar-I5Udn0mH.js');
+var ProgressBar = require('../ProgressBar-2-d75gIg.js');
 require('react');
 require('classnames');
 

package/dist/ProgressBar/index.mjs

@@ -1,3 +1,3 @@
-export { P as ProgressBar } from '../ProgressBar-DjYP7ien.js';
+export { P as ProgressBar } from '../ProgressBar-B4ASNvko.js';
 import 'react';
 import 'classnames';

package/dist/{ProgressBar-I5Udn0mH.js → ProgressBar-2-d75gIg.js}

@@ -3,9 +3,9 @@
 var React = require('react');
 var classnames = require('classnames');
 
-var styles = {"ProgressBar":"S1cioqW7loo-","SteppedProgressBar":"nv5fejwjHzo-","wrapper":"dyBDsjWCui4-","spinning":"s-mZrn0UgAg-"};
+var styles = {"ProgressBar":"p9AgTzIbTwY-","SteppedProgressBar":"w8NAw4ZMB6g-","wrapper":"d4oS-DGtcKA-","spinning":"f58JiDXlkHA-"};
 
-var sizes = {"smaller":"Tww7j0fUI68-","small":"IahmFcoY2w8-","base":"VObuDHeYwoQ-","spinning":"l-5Q3ivNmdk-"};
+var sizes = {"smaller":"dylWWgubHwM-","small":"z92YJQrscvI-","base":"DKfNM1to61A-","spinning":"GHfs7cB4nQQ-"};
 
 function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base", }) {
     const steppedProgressBarClassName = classnames(styles.ProgressBar, styles.SteppedProgressBar, sizes[size]);

package/dist/{ProgressBar-DjYP7ien.js → ProgressBar-B4ASNvko.js}

@@ -1,9 +1,9 @@
 import React from 'react';
 import classnames from 'classnames';
 
-var styles = {"ProgressBar":"S1cioqW7loo-","SteppedProgressBar":"nv5fejwjHzo-","wrapper":"dyBDsjWCui4-","spinning":"s-mZrn0UgAg-"};
+var styles = {"ProgressBar":"p9AgTzIbTwY-","SteppedProgressBar":"w8NAw4ZMB6g-","wrapper":"d4oS-DGtcKA-","spinning":"f58JiDXlkHA-"};
 
-var sizes = {"smaller":"Tww7j0fUI68-","small":"IahmFcoY2w8-","base":"VObuDHeYwoQ-","spinning":"l-5Q3ivNmdk-"};
+var sizes = {"smaller":"dylWWgubHwM-","small":"z92YJQrscvI-","base":"DKfNM1to61A-","spinning":"GHfs7cB4nQQ-"};
 
 function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base", }) {
     const steppedProgressBarClassName = classnames(styles.ProgressBar, styles.SteppedProgressBar, sizes[size]);

package/dist/RadioGroup/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var RadioGroup = require('../RadioGroup-BZa_EIsC.js');
+var RadioGroup = require('../RadioGroup-D-HbIO_A.js');
 require('react');
-require('../Text-BEqy0ojx.js');
-require('../Typography-KvPMVZyR.js');
+require('../Text-CJWvewR1.js');
+require('../Typography-DYUPEo3A.js');
 require('classnames');
 
 

package/dist/RadioGroup/index.mjs

@@ -1,5 +1,5 @@
-export { R as RadioGroup, a as RadioOption } from '../RadioGroup-Df97LaoL.js';
+export { R as RadioGroup, a as RadioOption } from '../RadioGroup-dvfhizdp.js';
 import 'react';
-import '../Text-DLaIGPdO.js';
-import '../Typography-DdPGuT7r.js';
+import '../Text-DfqZm-hl.js';
+import '../Typography-DhGlhWcl.js';
 import 'classnames';

package/dist/{RadioGroup-BZa_EIsC.js → RadioGroup-D-HbIO_A.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 var React = require('react');
-var Text = require('./Text-BEqy0ojx.js');
+var Text = require('./Text-CJWvewR1.js');
 
-var styles = {"radioGroup":"_5P8wEHDUdKY-","input":"_08ZPdlE98Ko-","label":"-PUoLXltVlQ-","description":"_8r6qT-6S9EI-","children":"C5SzbO1epLk-","spinning":"MGk1BKR2AqU-"};
+var styles = {"radioGroup":"KZfSK2vhTyI-","input":"w1Rr3bk2t5g-","label":"gN41T07x0l0-","description":"Ke2WKKuvmRo-","children":"JZOA-psW-FI-","spinning":"_54fzkHxkCbs-"};
 
 /**
  * For rendering props only. To make updates to

package/dist/{RadioGroup-Df97LaoL.js → RadioGroup-dvfhizdp.js}

@@ -1,7 +1,7 @@
 import React, { useId } from 'react';
-import { T as Text } from './Text-DLaIGPdO.js';
+import { T as Text } from './Text-DfqZm-hl.js';
 
-var styles = {"radioGroup":"_5P8wEHDUdKY-","input":"_08ZPdlE98Ko-","label":"-PUoLXltVlQ-","description":"_8r6qT-6S9EI-","children":"C5SzbO1epLk-","spinning":"MGk1BKR2AqU-"};
+var styles = {"radioGroup":"KZfSK2vhTyI-","input":"w1Rr3bk2t5g-","label":"gN41T07x0l0-","description":"Ke2WKKuvmRo-","children":"JZOA-psW-FI-","spinning":"_54fzkHxkCbs-"};
 
 /**
  * For rendering props only. To make updates to

package/dist/RecurringSelect/components/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var DayOfMonthSelect = require('../../DayOfMonthSelect-CcWIMFOx.js');
+var DayOfMonthSelect = require('../../DayOfMonthSelect-CZ7rnmlM.js');
 require('react');
-require('../../RadioGroup-BZa_EIsC.js');
-require('../../Text-BEqy0ojx.js');
-require('../../Typography-KvPMVZyR.js');
+require('../../RadioGroup-D-HbIO_A.js');
+require('../../Text-CJWvewR1.js');
+require('../../Typography-DYUPEo3A.js');
 require('classnames');
 
 

package/dist/RecurringSelect/components/index.mjs

@@ -1,6 +1,6 @@
-export { c as DayOfMonthSelect, b as MonthlyDayOfWeekSelect, M as MonthlySelect, a as WeeklySelect } from '../../DayOfMonthSelect-cPZnYky8.js';
+export { c as DayOfMonthSelect, b as MonthlyDayOfWeekSelect, M as MonthlySelect, a as WeeklySelect } from '../../DayOfMonthSelect-DugeJycT.js';
 import 'react';
-import '../../RadioGroup-Df97LaoL.js';
-import '../../Text-DLaIGPdO.js';
-import '../../Typography-DdPGuT7r.js';
+import '../../RadioGroup-dvfhizdp.js';
+import '../../Text-DfqZm-hl.js';
+import '../../Typography-DhGlhWcl.js';
 import 'classnames';

package/dist/RecurringSelect/index.cjs

@@ -1,27 +1,27 @@
 'use strict';
 
-var RecurringSelect = require('../RecurringSelect-CV4ULOfb.js');
-var DayOfMonthSelect = require('../DayOfMonthSelect-CcWIMFOx.js');
+var RecurringSelect = require('../RecurringSelect-C9Wr70RP.js');
+var DayOfMonthSelect = require('../DayOfMonthSelect-CZ7rnmlM.js');
 require('react');
-require('../Text-BEqy0ojx.js');
-require('../Typography-KvPMVZyR.js');
+require('../Text-CJWvewR1.js');
+require('../Typography-DYUPEo3A.js');
 require('classnames');
-require('../Option-DgNQL6hs.js');
-require('../FormField-Eiia0LI8.js');
-require('../tslib.es6-Bi0OHwyo.js');
+require('../Option-CUvVnbIK.js');
+require('../FormField-1MVxQMeP.js');
+require('../tslib.es6-D1nA6hj6.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('../Button-DV8P6VM4.js');
+require('../Button-X03o-OsV.js');
 require('react-router-dom');
-require('../Icon-wS5vpmx3.js');
-require('../useFormFieldFocus-CUdV5BLE.js');
-require('../InputValidation-C2_Px5sQ.js');
-require('../Spinner-Bj9GuPzT.js');
-require('../InputNumber-DsyFL51e.js');
-require('../InputGroup-RIxfB-G6.js');
-require('../Content-CaBYhgC3.js');
-require('../RadioGroup-BZa_EIsC.js');
+require('../Icon-DMURv2lZ.js');
+require('../useFormFieldFocus-0wEDq1A1.js');
+require('../InputValidation-Cex0nlcu.js');
+require('../Spinner-Cl4eyZlz.js');
+require('../InputNumber-DzTGZO-F.js');
+require('../InputGroup-C6N8CNLw.js');
+require('../Content-Bvcrqi5z.js');
+require('../RadioGroup-D-HbIO_A.js');
 
 
 

package/dist/RecurringSelect/index.mjs

@@ -1,22 +1,22 @@
-export { R as RecurringSelect } from '../RecurringSelect-_rcV3Zgr.js';
-export { D as DurationPeriod, W as WeekDay } from '../DayOfMonthSelect-cPZnYky8.js';
+export { R as RecurringSelect } from '../RecurringSelect-I1vyl-PX.js';
+export { D as DurationPeriod, W as WeekDay } from '../DayOfMonthSelect-DugeJycT.js';
 import 'react';
-import '../Text-DLaIGPdO.js';
-import '../Typography-DdPGuT7r.js';
+import '../Text-DfqZm-hl.js';
+import '../Typography-DhGlhWcl.js';
 import 'classnames';
-import '../Option-n8g0g5G6.js';
-import '../FormField-D7e_zEry.js';
-import '../tslib.es6-eq3zexCS.js';
+import '../Option-_Eghqezi.js';
+import '../FormField-vy2Hd8hQ.js';
+import '../tslib.es6-CeHUynox.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import '../Button-DjIsGUK9.js';
+import '../Button-B_S7hCDq.js';
 import 'react-router-dom';
-import '../Icon-CTO4wvIZ.js';
-import '../useFormFieldFocus-sKGbcg5A.js';
-import '../InputValidation-DERTcXrX.js';
-import '../Spinner-DwfGkh1X.js';
-import '../InputNumber-BQ6gxLvL.js';
-import '../InputGroup-BS_Ipf-7.js';
-import '../Content-CEpXEhkM.js';
-import '../RadioGroup-Df97LaoL.js';
+import '../Icon-BPJYIZWC.js';
+import '../useFormFieldFocus-ClQ0z2uo.js';
+import '../InputValidation-CzNHjrwl.js';
+import '../Spinner-COTKfUIp.js';
+import '../InputNumber-DBJKWRuF.js';
+import '../InputGroup-i9ru0LcP.js';
+import '../Content-CZscRWg1.js';
+import '../RadioGroup-dvfhizdp.js';

package/dist/{RecurringSelect-CV4ULOfb.js → RecurringSelect-C9Wr70RP.js}

@@ -1,13 +1,13 @@
 'use strict';
 
 var React = require('react');
-var DayOfMonthSelect = require('./DayOfMonthSelect-CcWIMFOx.js');
-var Text = require('./Text-BEqy0ojx.js');
+var DayOfMonthSelect = require('./DayOfMonthSelect-CZ7rnmlM.js');
+var Text = require('./Text-CJWvewR1.js');
 require('classnames');
-var Option = require('./Option-DgNQL6hs.js');
-var InputNumber = require('./InputNumber-DsyFL51e.js');
-var InputGroup = require('./InputGroup-RIxfB-G6.js');
-var Content = require('./Content-CaBYhgC3.js');
+var Option = require('./Option-CUvVnbIK.js');
+var InputNumber = require('./InputNumber-DzTGZO-F.js');
+var InputGroup = require('./InputGroup-C6N8CNLw.js');
+var Content = require('./Content-Bvcrqi5z.js');
 
 function CurrentRecurrenceComponent({ recurrenceRule, disabled = false, onChange, }) {
     switch (recurrenceRule.type) {
@@ -34,7 +34,7 @@ function CurrentRecurrenceComponent({ recurrenceRule, disabled = false, onChange
     }
 }
 
-var styles = {"container":"ANBCH37jH0k-","fullWidthWrapper":"ZV0GgII8eWQ-","spinning":"J8GkWi2uW-I-"};
+var styles = {"container":"v2xMxsPFwcM-","fullWidthWrapper":"cfDwOgEkPHQ-","spinning":"s4XnDjTR4Uw-"};
 
 function RecurringSelect({ value, disabled = false, onChange, }) {
     const disabledTextVariation = disabled ? "disabled" : undefined;

package/dist/{RecurringSelect-_rcV3Zgr.js → RecurringSelect-I1vyl-PX.js}

@@ -1,11 +1,11 @@
 import React from 'react';
-import { D as DurationPeriod, c as DayOfMonthSelect, b as MonthlyDayOfWeekSelect, a as WeeklySelect, i as isMonthly, M as MonthlySelect, t as typeInitialStateMap } from './DayOfMonthSelect-cPZnYky8.js';
-import { T as Text } from './Text-DLaIGPdO.js';
+import { D as DurationPeriod, c as DayOfMonthSelect, b as MonthlyDayOfWeekSelect, a as WeeklySelect, i as isMonthly, M as MonthlySelect, t as typeInitialStateMap } from './DayOfMonthSelect-DugeJycT.js';
+import { T as Text } from './Text-DfqZm-hl.js';
 import 'classnames';
-import { S as Select, a as SelectOption } from './Option-n8g0g5G6.js';
-import { I as InputNumber } from './InputNumber-BQ6gxLvL.js';
-import { I as InputGroup } from './InputGroup-BS_Ipf-7.js';
-import { C as Content } from './Content-CEpXEhkM.js';
+import { S as Select, a as SelectOption } from './Option-_Eghqezi.js';
+import { I as InputNumber } from './InputNumber-DBJKWRuF.js';
+import { I as InputGroup } from './InputGroup-i9ru0LcP.js';
+import { C as Content } from './Content-CZscRWg1.js';
 
 function CurrentRecurrenceComponent({ recurrenceRule, disabled = false, onChange, }) {
     switch (recurrenceRule.type) {
@@ -32,7 +32,7 @@ function CurrentRecurrenceComponent({ recurrenceRule, disabled = false, onChange
     }
 }
 
-var styles = {"container":"ANBCH37jH0k-","fullWidthWrapper":"ZV0GgII8eWQ-","spinning":"J8GkWi2uW-I-"};
+var styles = {"container":"v2xMxsPFwcM-","fullWidthWrapper":"cfDwOgEkPHQ-","spinning":"s4XnDjTR4Uw-"};
 
 function RecurringSelect({ value, disabled = false, onChange, }) {
     const disabledTextVariation = disabled ? "disabled" : undefined;

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,24 @@
+import React, { type PropsWithChildren } from "react";
+import { SegmentedControlOption } from "./SegmentedControlOption";
+interface SegmentedControlProps<T> extends PropsWithChildren {
+    /**
+     * The currently selected option
+     */
+    readonly selectedValue?: T;
+    /**
+     * A callback function that is called whenever the selected option changes
+     */
+    readonly onSelectValue?: (value: T) => void;
+    /**
+     * The default option to be selected initially
+     */
+    readonly defaultValue?: T;
+}
+export declare function SegmentedControl<T>({ selectedValue, onSelectValue, defaultValue, children, }: SegmentedControlProps<T>): JSX.Element;
+export declare namespace SegmentedControl {
+    var Option: typeof SegmentedControlOption;
+    var Base: React.ForwardRefExoticComponent<{
+        children?: React.ReactNode;
+    } & React.RefAttributes<HTMLDivElement>>;
+}
+export {};

package/dist/SegmentedControl/SegmentedControlBase.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const SegmentedControlBase: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { SegmentedControlBase };

package/dist/SegmentedControl/SegmentedControlOption.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from "react";
+interface SegmentedControlOptionProps<TValue extends string | number> extends PropsWithChildren {
+    /**
+     * The unique value associated with this option. This value is used to determine
+     * which option is selected and is passed to the onSelectValue callback.
+     */
+    readonly value: TValue;
+    /**
+     * An aria-label that describes the option.
+     */
+    readonly ariaLabel?: string;
+}
+export declare function SegmentedControlOption<TValue extends string | number>({ value, children, ariaLabel, }: SegmentedControlOptionProps<TValue>): JSX.Element;
+export {};

package/dist/SegmentedControl/SegmentedControlProvider.d.ts

@@ -0,0 +1,14 @@
+import React, { ChangeEventHandler, PropsWithChildren } from "react";
+interface SegmentedControlProviderContext<T = unknown> {
+    handleChange: ChangeEventHandler<HTMLInputElement>;
+    selectedValue: T;
+}
+export declare const SegmentedControlContext: React.Context<SegmentedControlProviderContext<unknown>>;
+interface SegmentedControlProviderProps<T> extends PropsWithChildren {
+    readonly selectedValue?: T;
+    readonly onSelectValue?: (value: T) => void;
+    readonly defaultValue?: T;
+}
+export declare const useSegmentedControl: <T>() => SegmentedControlProviderContext<T>;
+export declare function SegmentedControlProvider<T>({ children, selectedValue, onSelectValue: onSelectValue, defaultValue, }: SegmentedControlProviderProps<T>): JSX.Element;
+export {};

package/dist/SegmentedControl/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var SegmentedControl = require('../SegmentedControl-DzBa195G.js');
+require('react');
+
+
+
+exports.SegmentedControl = SegmentedControl.SegmentedControl;
+exports.SegmentedControlContext = SegmentedControl.SegmentedControlContext;
+exports.SegmentedControlProvider = SegmentedControl.SegmentedControlProvider;
+exports.useSegmentedControl = SegmentedControl.useSegmentedControl;

package/dist/SegmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SegmentedControl";
+export * from "./SegmentedControlProvider";

package/dist/SegmentedControl/index.mjs

@@ -0,0 +1,2 @@
+export { S as SegmentedControl, a as SegmentedControlContext, b as SegmentedControlProvider, u as useSegmentedControl } from '../SegmentedControl-GQ0n11O0.js';
+import 'react';

package/dist/SegmentedControl-DzBa195G.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var React = require('react');
+
+const SegmentedControlContext = React.createContext({
+    handleChange: () => ({}),
+    selectedValue: null,
+});
+const useSegmentedControl = () => {
+    return React.useContext(SegmentedControlContext);
+};
+function SegmentedControlProvider({ children, selectedValue, onSelectValue: onSelectValue, defaultValue, }) {
+    const isControlled = selectedValue !== undefined && onSelectValue !== undefined;
+    const [internalSelectedValue, setInternalSelectedValue] = React.useState(defaultValue);
+    const handleChange = React.useCallback(event => {
+        const value = event.target.value;
+        if (!isControlled) {
+            setInternalSelectedValue(value);
+        }
+        onSelectValue === null || onSelectValue === void 0 ? void 0 : onSelectValue(value);
+    }, [onSelectValue, isControlled]);
+    const currentSelectedOption = isControlled
+        ? selectedValue
+        : internalSelectedValue;
+    const hasInitialized = React.useRef(false);
+    if (!hasInitialized.current && currentSelectedOption !== undefined) {
+        onSelectValue === null || onSelectValue === void 0 ? void 0 : onSelectValue(currentSelectedOption);
+        hasInitialized.current = true;
+    }
+    return (React.createElement(SegmentedControlContext.Provider, { value: {
+            handleChange,
+            selectedValue: currentSelectedOption,
+        } }, children));
+}
+
+function SegmentedControlOption({ value, children, ariaLabel, }) {
+    const { selectedValue, handleChange } = useSegmentedControl();
+    const localChecked = React.useMemo(() => selectedValue === value, [selectedValue, value]);
+    const inputId = `${value.toString()}_${React.useId()}`;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("input", { type: "radio", id: inputId, checked: localChecked, value: value, onChange: handleChange, "aria-label": ariaLabel, tabIndex: localChecked ? 0 : -1 }),
+        React.createElement("label", { htmlFor: inputId }, children)));
+}
+
+var styles = {"container":"FDDKTZkTdfM-","spinning":"iKliBX-y4ec-"};
+
+const SegmentedControlBase = React.forwardRef(function SegmentedControlBase({ children }, ref) {
+    const optionCount = React.Children.count(children);
+    return (React.createElement("div", { ref: ref, className: styles.container, style: {
+            "--segmentedControl--option-count": optionCount,
+        } },
+        children,
+        React.createElement("span", null)));
+});
+
+function SegmentedControl({ selectedValue, onSelectValue, defaultValue, children, }) {
+    const container = React.useRef(null);
+    return (React.createElement(SegmentedControlProvider, { selectedValue: selectedValue, onSelectValue: onSelectValue, defaultValue: defaultValue },
+        React.createElement(SegmentedControlBase, { ref: container }, children)));
+}
+SegmentedControl.Option = SegmentedControlOption;
+SegmentedControl.Base = SegmentedControlBase;
+
+exports.SegmentedControl = SegmentedControl;
+exports.SegmentedControlContext = SegmentedControlContext;
+exports.SegmentedControlProvider = SegmentedControlProvider;
+exports.useSegmentedControl = useSegmentedControl;

package/dist/SegmentedControl-GQ0n11O0.js

@@ -0,0 +1,62 @@
+import React, { createContext, useContext, useState, useCallback, useRef, useMemo, useId, forwardRef, Children } from 'react';
+
+const SegmentedControlContext = createContext({
+    handleChange: () => ({}),
+    selectedValue: null,
+});
+const useSegmentedControl = () => {
+    return useContext(SegmentedControlContext);
+};
+function SegmentedControlProvider({ children, selectedValue, onSelectValue: onSelectValue, defaultValue, }) {
+    const isControlled = selectedValue !== undefined && onSelectValue !== undefined;
+    const [internalSelectedValue, setInternalSelectedValue] = useState(defaultValue);
+    const handleChange = useCallback(event => {
+        const value = event.target.value;
+        if (!isControlled) {
+            setInternalSelectedValue(value);
+        }
+        onSelectValue === null || onSelectValue === void 0 ? void 0 : onSelectValue(value);
+    }, [onSelectValue, isControlled]);
+    const currentSelectedOption = isControlled
+        ? selectedValue
+        : internalSelectedValue;
+    const hasInitialized = useRef(false);
+    if (!hasInitialized.current && currentSelectedOption !== undefined) {
+        onSelectValue === null || onSelectValue === void 0 ? void 0 : onSelectValue(currentSelectedOption);
+        hasInitialized.current = true;
+    }
+    return (React.createElement(SegmentedControlContext.Provider, { value: {
+            handleChange,
+            selectedValue: currentSelectedOption,
+        } }, children));
+}
+
+function SegmentedControlOption({ value, children, ariaLabel, }) {
+    const { selectedValue, handleChange } = useSegmentedControl();
+    const localChecked = useMemo(() => selectedValue === value, [selectedValue, value]);
+    const inputId = `${value.toString()}_${useId()}`;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("input", { type: "radio", id: inputId, checked: localChecked, value: value, onChange: handleChange, "aria-label": ariaLabel, tabIndex: localChecked ? 0 : -1 }),
+        React.createElement("label", { htmlFor: inputId }, children)));
+}
+
+var styles = {"container":"FDDKTZkTdfM-","spinning":"iKliBX-y4ec-"};
+
+const SegmentedControlBase = forwardRef(function SegmentedControlBase({ children }, ref) {
+    const optionCount = Children.count(children);
+    return (React.createElement("div", { ref: ref, className: styles.container, style: {
+            "--segmentedControl--option-count": optionCount,
+        } },
+        children,
+        React.createElement("span", null)));
+});
+
+function SegmentedControl({ selectedValue, onSelectValue, defaultValue, children, }) {
+    const container = useRef(null);
+    return (React.createElement(SegmentedControlProvider, { selectedValue: selectedValue, onSelectValue: onSelectValue, defaultValue: defaultValue },
+        React.createElement(SegmentedControlBase, { ref: container }, children)));
+}
+SegmentedControl.Option = SegmentedControlOption;
+SegmentedControl.Base = SegmentedControlBase;
+
+export { SegmentedControl as S, SegmentedControlContext as a, SegmentedControlProvider as b, useSegmentedControl as u };