@jobber/components 6.40.2 → 6.41.0

package/dist/DataTable/index.cjs

@@ -14,7 +14,16 @@ require('../isSymbol-cjs.js');
 require('../Glimmer-cjs.js');
 require('../tslib.es6-cjs.js');
 require('../Content-cjs.js');
-require('../Option-cjs.js');
+require('../Select/index.cjs');
+require('../omit-cjs.js');
+require('../_baseGet-cjs.js');
+require('../isTypedArray-cjs.js');
+require('../identity-cjs.js');
+require('../_getTag-cjs.js');
+require('../keysIn-cjs.js');
+require('../_baseAssignValue-cjs.js');
+require('../_baseFlatten-cjs.js');
+require('../_setToString-cjs.js');
 require('../FormField-cjs.js');
 require('framer-motion');
 require('@jobber/design');

package/dist/DataTable/index.mjs

@@ -12,7 +12,16 @@ import '../isSymbol-es.js';
 import '../Glimmer-es.js';
 import '../tslib.es6-es.js';
 import '../Content-es.js';
-import '../Option-es.js';
+import '../Select/index.mjs';
+import '../omit-es.js';
+import '../_baseGet-es.js';
+import '../isTypedArray-es.js';
+import '../identity-es.js';
+import '../_getTag-es.js';
+import '../keysIn-es.js';
+import '../_baseAssignValue-es.js';
+import '../_baseFlatten-es.js';
+import '../_setToString-es.js';
 import '../FormField-es.js';
 import 'framer-motion';
 import '@jobber/design';

package/dist/DataTable-cjs.js

@@ -6,7 +6,7 @@ var React = require('react');
 var useResizeObserver = require('./useResizeObserver-cjs.js');
 var Glimmer = require('./Glimmer-cjs.js');
 var tslib_es6 = require('./tslib.es6-cjs.js');
-var Option = require('./Option-cjs.js');
+var Select_index = require('./Select/index.cjs');
 var Button = require('./Button-cjs.js');
 var Text = require('./Text-cjs.js');
 
@@ -110,9 +110,9 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
         React.createElement("div", { className: styles$2.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
         React.createElement("div", { className: styles$2.paginationNav },
             React.createElement("div", { className: styles$2.paginationSelect },
-                React.createElement(Option.Select, { value: table.getState().pagination.pageSize, onChange: value => {
+                React.createElement(Select_index.Select, { value: table.getState().pagination.pageSize, onChange: value => {
                         table.setPageSize(Number(value));
-                    }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React.createElement(Option.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)))),
+                    }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React.createElement(Select_index.Option, { key: numOfPages, value: numOfPages }, numOfPages)))),
                 React.createElement("span", { className: styles$2.paginationSelectLabel }, "per page")),
             React.createElement("div", { className: styles$2.paginationButtons },
                 React.createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => {

package/dist/DataTable-es.js

@@ -4,7 +4,7 @@ import React__default, { useCallback, useMemo } from 'react';
 import { u as useResizeObserver } from './useResizeObserver-es.js';
 import { G as Glimmer } from './Glimmer-es.js';
 import { _ as __rest } from './tslib.es6-es.js';
-import { S as Select, a as SelectOption } from './Option-es.js';
+import { Select, Option as SelectOption } from './Select/index.mjs';
 import { B as Button } from './Button-es.js';
 import { T as Text } from './Text-es.js';
 

package/dist/RecurringSelect/index.cjs

@@ -6,7 +6,19 @@ require('react');
 require('../Text-cjs.js');
 require('../Typography-cjs.js');
 require('classnames');
-require('../Option-cjs.js');
+require('../Select/index.cjs');
+require('../omit-cjs.js');
+require('../_commonjsHelpers-cjs.js');
+require('../_baseGet-cjs.js');
+require('../isTypedArray-cjs.js');
+require('../isObjectLike-cjs.js');
+require('../identity-cjs.js');
+require('../_getTag-cjs.js');
+require('../isSymbol-cjs.js');
+require('../keysIn-cjs.js');
+require('../_baseAssignValue-cjs.js');
+require('../_baseFlatten-cjs.js');
+require('../_setToString-cjs.js');
 require('../FormField-cjs.js');
 require('framer-motion');
 require('@jobber/design');

package/dist/RecurringSelect/index.mjs

@@ -4,7 +4,19 @@ import 'react';
 import '../Text-es.js';
 import '../Typography-es.js';
 import 'classnames';
-import '../Option-es.js';
+import '../Select/index.mjs';
+import '../omit-es.js';
+import '../_commonjsHelpers-es.js';
+import '../_baseGet-es.js';
+import '../isTypedArray-es.js';
+import '../isObjectLike-es.js';
+import '../identity-es.js';
+import '../_getTag-es.js';
+import '../isSymbol-es.js';
+import '../keysIn-es.js';
+import '../_baseAssignValue-es.js';
+import '../_baseFlatten-es.js';
+import '../_setToString-es.js';
 import '../FormField-es.js';
 import 'framer-motion';
 import '@jobber/design';

package/dist/RecurringSelect-cjs.js

@@ -4,7 +4,7 @@ var React = require('react');
 var DayOfMonthSelect = require('./DayOfMonthSelect-cjs.js');
 var Text = require('./Text-cjs.js');
 require('classnames');
-var Option = require('./Option-cjs.js');
+var Select_index = require('./Select/index.cjs');
 var InputNumber = require('./InputNumber-cjs.js');
 var InputGroup = require('./InputGroup-cjs.js');
 var Content = require('./Content-cjs.js');
@@ -52,11 +52,11 @@ function RecurringSelect({ value, disabled = false, onChange, }) {
             React.createElement("div", { className: styles.fullWidthWrapper },
                 React.createElement(InputGroup.InputGroup, { flowDirection: "horizontal" },
                     React.createElement(InputNumber.InputNumber, { disabled: disabled, name: "schedule-recurrence-interval", value: value.interval, min: 1, maxLength: 3, onChange: onChangeInterval }),
-                    React.createElement(Option.Select, { disabled: disabled, value: value.type, onChange: onChangeType, name: "schedule-recurrence-type" },
-                        React.createElement(Option.SelectOption, { value: DayOfMonthSelect.DurationPeriod.Day }, "Day(s)"),
-                        React.createElement(Option.SelectOption, { value: DayOfMonthSelect.DurationPeriod.Week }, "Week(s)"),
-                        React.createElement(Option.SelectOption, { value: monthlySelectOptionValue }, "Month(s)"),
-                        React.createElement(Option.SelectOption, { value: DayOfMonthSelect.DurationPeriod.Year }, "Year(s)")))),
+                    React.createElement(Select_index.Select, { disabled: disabled, value: value.type, onChange: onChangeType, name: "schedule-recurrence-type" },
+                        React.createElement(Select_index.Option, { value: DayOfMonthSelect.DurationPeriod.Day }, "Day(s)"),
+                        React.createElement(Select_index.Option, { value: DayOfMonthSelect.DurationPeriod.Week }, "Week(s)"),
+                        React.createElement(Select_index.Option, { value: monthlySelectOptionValue }, "Month(s)"),
+                        React.createElement(Select_index.Option, { value: DayOfMonthSelect.DurationPeriod.Year }, "Year(s)")))),
             hasExtraFrequencyDescriptor && (React.createElement(Text.Text, { variation: disabledTextVariation }, "on"))),
         DayOfMonthSelect.isMonthly(value) && (React.createElement(DayOfMonthSelect.MonthlySelect, { disabled: disabled, onChange: onChangeType, selectedMonthOption: value.type })),
         React.createElement(CurrentRecurrenceComponent, { disabled: disabled, recurrenceRule: value, onChange: onChange })));

package/dist/RecurringSelect-es.js

@@ -2,7 +2,7 @@ import React__default 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-es.js';
 import { T as Text } from './Text-es.js';
 import 'classnames';
-import { S as Select, a as SelectOption } from './Option-es.js';
+import { Select, Option as SelectOption } from './Select/index.mjs';
 import { I as InputNumber } from './InputNumber-es.js';
 import { I as InputGroup } from './InputGroup-es.js';
 import { C as Content } from './Content-es.js';

package/dist/Select/Select.d.ts

@@ -1,10 +1,2 @@
-import { FormFieldProps } from "../FormField";
-/**
- * The following is the same as:
- *   type BaseProps = Omit<FormFieldProps, "type" | "children">;
- * Unfortunately Docz doesn't currently support Omit so it has been reduced to
- * its component parts.
- */
-type SelectProps = Pick<FormFieldProps, Exclude<keyof FormFieldProps, "type" | "rows" | "keyboard" | "actionsRef" | "clearable" | "pattern">>;
-export declare function Select(props: SelectProps): JSX.Element;
-export {};
+import { SelectLegacyProps } from "./Select.types";
+export declare function Select(props: SelectLegacyProps): JSX.Element;

package/dist/Select/Select.rebuilt.d.ts

@@ -0,0 +1,2 @@
+import { SelectRebuiltProps } from "./Select.types";
+export declare function SelectRebuilt(props: SelectRebuiltProps): JSX.Element;

package/dist/Select/Select.types.d.ts

@@ -0,0 +1,12 @@
+import { CommonFormFieldProps, FormFieldProps } from "../FormField";
+export interface SelectLegacyProps extends Pick<CommonFormFieldProps, "id" | "align" | "description" | "disabled" | "invalid" | "inline" | "name" | "onValidation" | "placeholder" | "size" | "value" | "onChange">, Pick<FormFieldProps, "autofocus" | "onEnter" | "onBlur" | "onFocus" | "inputRef" | "wrapperRef" | "validations" | "children" | "prefix" | "suffix" | "defaultValue" | "version"> {
+}
+/**
+ * Rebuilt version of the Select component without React Hook Form dependency.
+ */
+export interface SelectRebuiltProps extends Omit<SelectLegacyProps, "defaultValue" | "version" | "onChange" | "value" | "validations" | "onValidation"> {
+    defaultValue?: never;
+    readonly value?: string | number;
+    onChange?(newValue?: string | number): void;
+    version: 2;
+}

package/dist/Select/hooks/useSelectActions.d.ts

@@ -0,0 +1,16 @@
+import { ChangeEvent } from "react";
+interface UseSelectActionsProps {
+    readonly onChange?: (newValue: string | number, event?: ChangeEvent<HTMLSelectElement>) => void;
+    readonly onBlur?: () => void;
+    readonly onFocus?: () => void;
+}
+/**
+ * Hook with actions on the Select component.
+ */
+export declare function useSelectActions({ onChange, onBlur, onFocus, }: UseSelectActionsProps): {
+    handleChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+    handleBlur: () => void;
+    handleFocus: () => void;
+    handleClear: () => void;
+};
+export {};

package/dist/Select/hooks/useSelectFormField.d.ts

@@ -0,0 +1,34 @@
+import { ChangeEvent } from "react";
+export interface UseSelectFormFieldProps {
+    readonly id: string;
+    readonly name: string;
+    readonly disabled?: boolean;
+    readonly autofocus?: boolean;
+    readonly description?: string;
+    readonly inline?: boolean;
+    readonly error?: string;
+    readonly invalid?: boolean;
+    readonly value?: string | number;
+    readonly handleChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+    readonly handleBlur: () => void;
+    readonly handleFocus: () => void;
+}
+export interface UseSelectFormFieldReturn {
+    readonly fieldProps: {
+        readonly id: string;
+        readonly name: string;
+        readonly disabled?: boolean;
+        readonly autoFocus?: boolean;
+        readonly onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+        readonly onBlur: () => void;
+        readonly onFocus: () => void;
+        readonly value?: string | number;
+        readonly "aria-describedby"?: string;
+    };
+    readonly descriptionIdentifier: string;
+}
+/**
+ * Hook for managing the props of a Select component.
+ * Extracted from FormField's useAtlantisFormField.
+ */
+export declare function useSelectFormField({ id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, }: UseSelectFormFieldProps): UseSelectFormFieldReturn;

package/dist/Select/index.cjs

@@ -1,23 +1,130 @@
 'use strict';
 
-var Option = require('../Option-cjs.js');
-require('react');
-require('../FormField-cjs.js');
+var React = require('react');
+var omit = require('../omit-cjs.js');
+var FormField = require('../FormField-cjs.js');
+require('classnames');
+require('../tslib.es6-cjs.js');
+require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('../Button-cjs.js');
-require('react-router-dom');
-require('../tslib.es6-cjs.js');
+require('../_commonjsHelpers-cjs.js');
+require('../_baseGet-cjs.js');
+require('../isTypedArray-cjs.js');
+require('../isObjectLike-cjs.js');
+require('../identity-cjs.js');
+require('../_getTag-cjs.js');
+require('../isSymbol-cjs.js');
+require('../keysIn-cjs.js');
+require('../_baseAssignValue-cjs.js');
+require('../_baseFlatten-cjs.js');
+require('../_setToString-cjs.js');
 require('../Icon-cjs.js');
-require('../Typography-cjs.js');
 require('../Text-cjs.js');
+require('../Typography-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
-require('react-hook-form');
+require('react-router-dom');
+
+function Select$1(props) {
+    const formFieldProps = omit.omit(Object.assign({}, props), ["version"]);
+    return React.createElement(FormField.FormField, Object.assign({ type: "select" }, formFieldProps));
+}
+
+/**
+ * Hook with actions on the Select component.
+ */
+function useSelectActions({ onChange, onBlur, onFocus, }) {
+    function handleChange(event) {
+        const newValue = event.currentTarget.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
+    }
+    function handleBlur() {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }
+    function handleFocus() {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }
+    // Noop for SelectRebuilt since onClear is a required prop for FormFieldWrapper
+    // but Select is not clearable.
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    function handleClear() { }
+    return {
+        handleChange,
+        handleBlur,
+        handleFocus,
+        handleClear,
+    };
+}
+
+/**
+ * Hook for managing the props of a Select component.
+ * Extracted from FormField's useAtlantisFormField.
+ */
+function useSelectFormField({ id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, }) {
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const fieldProps = Object.assign({ id,
+        name,
+        disabled, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value }, (description &&
+        !inline && { "aria-describedby": descriptionIdentifier }));
+    return { fieldProps, descriptionIdentifier };
+}
+
+function SelectRebuilt(props) {
+    var _a;
+    const selectRef = (_a = props.inputRef) !== null && _a !== void 0 ? _a : React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    const { inputStyle } = FormField.useFormFieldWrapperStyles(Object.assign({}, omit.omit(props, ["version"])));
+    const id = useSelectId(props);
+    const { name } = FormField.useAtlantisFormFieldName({
+        nameProp: props.name,
+        id: id,
+    });
+    const { handleChange, handleBlur, handleFocus, handleClear } = useSelectActions({
+        onChange: props.onChange,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+    });
+    const inputProps = omit.omit(props, [
+        "onChange",
+        "onBlur",
+        "onFocus",
+        "size",
+        "placeholder",
+        "version",
+    ]);
+    const { fieldProps, descriptionIdentifier } = useSelectFormField(Object.assign(Object.assign({}, inputProps), { id,
+        name,
+        handleChange,
+        handleBlur,
+        handleFocus }));
+    return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autofocus, name: name, wrapperRef: wrapperRef, error: "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, onClear: handleClear, clearable: "never" },
+        React.createElement(React.Fragment, null,
+            React.createElement("select", Object.assign({}, fieldProps, { ref: selectRef, className: inputStyle }), props.children),
+            React.createElement(FormField.FormFieldPostFix, { variation: "select" }))));
+}
+function useSelectId(props) {
+    const generatedId = React.useId();
+    return props.id || generatedId;
+}
 
+function SelectOption({ children, disabled, value }) {
+    return (React.createElement("option", { disabled: disabled, value: value }, children));
+}
 
+function isNewSelectProps(props) {
+    return props.version === 2;
+}
+function Select(props) {
+    if (isNewSelectProps(props)) {
+        return React.createElement(SelectRebuilt, Object.assign({}, props));
+    }
+    else {
+        return React.createElement(Select$1, Object.assign({}, props));
+    }
+}
 
-exports.Option = Option.SelectOption;
-exports.Select = Option.Select;
+exports.Option = SelectOption;
+exports.Select = Select;

package/dist/Select/index.d.ts

@@ -1,2 +1,5 @@
-export { Select } from "./Select";
+import { SelectLegacyProps, SelectRebuiltProps } from "./Select.types";
 export { Option } from "./Option";
+export type SelectShimProps = SelectLegacyProps | SelectRebuiltProps;
+export declare function Select(props: SelectShimProps): JSX.Element;
+export { SelectRebuiltProps, SelectLegacyProps };

package/dist/Select/index.mjs

@@ -1,16 +1,127 @@
-export { a as Option, S as Select } from '../Option-es.js';
-import 'react';
-import '../FormField-es.js';
+import React__default, { useRef, useId } from 'react';
+import { o as omit } from '../omit-es.js';
+import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix } from '../FormField-es.js';
+import 'classnames';
+import '../tslib.es6-es.js';
+import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import '../Button-es.js';
-import 'react-router-dom';
-import '../tslib.es6-es.js';
+import '../_commonjsHelpers-es.js';
+import '../_baseGet-es.js';
+import '../isTypedArray-es.js';
+import '../isObjectLike-es.js';
+import '../identity-es.js';
+import '../_getTag-es.js';
+import '../isSymbol-es.js';
+import '../keysIn-es.js';
+import '../_baseAssignValue-es.js';
+import '../_baseFlatten-es.js';
+import '../_setToString-es.js';
 import '../Icon-es.js';
-import '../Typography-es.js';
 import '../Text-es.js';
+import '../Typography-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
-import 'react-hook-form';
+import 'react-router-dom';
+
+function Select$1(props) {
+    const formFieldProps = omit(Object.assign({}, props), ["version"]);
+    return React__default.createElement(FormField, Object.assign({ type: "select" }, formFieldProps));
+}
+
+/**
+ * Hook with actions on the Select component.
+ */
+function useSelectActions({ onChange, onBlur, onFocus, }) {
+    function handleChange(event) {
+        const newValue = event.currentTarget.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
+    }
+    function handleBlur() {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }
+    function handleFocus() {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }
+    // Noop for SelectRebuilt since onClear is a required prop for FormFieldWrapper
+    // but Select is not clearable.
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    function handleClear() { }
+    return {
+        handleChange,
+        handleBlur,
+        handleFocus,
+        handleClear,
+    };
+}
+
+/**
+ * Hook for managing the props of a Select component.
+ * Extracted from FormField's useAtlantisFormField.
+ */
+function useSelectFormField({ id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, }) {
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const fieldProps = Object.assign({ id,
+        name,
+        disabled, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value }, (description &&
+        !inline && { "aria-describedby": descriptionIdentifier }));
+    return { fieldProps, descriptionIdentifier };
+}
+
+function SelectRebuilt(props) {
+    var _a;
+    const selectRef = (_a = props.inputRef) !== null && _a !== void 0 ? _a : useRef(null);
+    const wrapperRef = useRef(null);
+    const { inputStyle } = useFormFieldWrapperStyles(Object.assign({}, omit(props, ["version"])));
+    const id = useSelectId(props);
+    const { name } = useAtlantisFormFieldName({
+        nameProp: props.name,
+        id: id,
+    });
+    const { handleChange, handleBlur, handleFocus, handleClear } = useSelectActions({
+        onChange: props.onChange,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+    });
+    const inputProps = omit(props, [
+        "onChange",
+        "onBlur",
+        "onFocus",
+        "size",
+        "placeholder",
+        "version",
+    ]);
+    const { fieldProps, descriptionIdentifier } = useSelectFormField(Object.assign(Object.assign({}, inputProps), { id,
+        name,
+        handleChange,
+        handleBlur,
+        handleFocus }));
+    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autofocus, name: name, wrapperRef: wrapperRef, error: "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, onClear: handleClear, clearable: "never" },
+        React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("select", Object.assign({}, fieldProps, { ref: selectRef, className: inputStyle }), props.children),
+            React__default.createElement(FormFieldPostFix, { variation: "select" }))));
+}
+function useSelectId(props) {
+    const generatedId = useId();
+    return props.id || generatedId;
+}
+
+function SelectOption({ children, disabled, value }) {
+    return (React__default.createElement("option", { disabled: disabled, value: value }, children));
+}
+
+function isNewSelectProps(props) {
+    return props.version === 2;
+}
+function Select(props) {
+    if (isNewSelectProps(props)) {
+        return React__default.createElement(SelectRebuilt, Object.assign({}, props));
+    }
+    else {
+        return React__default.createElement(Select$1, Object.assign({}, props));
+    }
+}
+
+export { SelectOption as Option, Select };

package/dist/index.cjs

@@ -84,7 +84,7 @@ var RadioGroup = require('./RadioGroup-cjs.js');
 var RecurringSelect = require('./RecurringSelect-cjs.js');
 var DayOfMonthSelect = require('./DayOfMonthSelect-cjs.js');
 var ResponsiveSwitcher = require('./ResponsiveSwitcher-cjs.js');
-var Option = require('./Option-cjs.js');
+var Select_index = require('./Select/index.cjs');
 var SegmentedControl = require('./SegmentedControl-cjs.js');
 var SideDrawer = require('./SideDrawer-cjs.js');
 var SideKick = require('./SideKick-cjs.js');
@@ -308,8 +308,8 @@ Object.defineProperty(exports, "WeekDay", {
 	get: function () { return DayOfMonthSelect.WeekDay; }
 });
 exports.ResponsiveSwitcher = ResponsiveSwitcher.ResponsiveSwitcher;
-exports.Option = Option.SelectOption;
-exports.Select = Option.Select;
+exports.Option = Select_index.Option;
+exports.Select = Select_index.Select;
 exports.SegmentedControl = SegmentedControl.SegmentedControl;
 exports.SegmentedControlContext = SegmentedControl.SegmentedControlContext;
 exports.SegmentedControlProvider = SegmentedControl.SegmentedControlProvider;

package/dist/index.mjs

@@ -82,7 +82,7 @@ export { R as RadioGroup, a as RadioOption } from './RadioGroup-es.js';
 export { R as RecurringSelect } from './RecurringSelect-es.js';
 export { D as DurationPeriod, W as WeekDay } from './DayOfMonthSelect-es.js';
 export { R as ResponsiveSwitcher } from './ResponsiveSwitcher-es.js';
-export { a as Option, S as Select } from './Option-es.js';
+export { Option, Select } from './Select/index.mjs';
 export { S as SegmentedControl, a as SegmentedControlContext, b as SegmentedControlProvider, u as useSegmentedControl } from './SegmentedControl-es.js';
 export { S as SideDrawer } from './SideDrawer-es.js';
 export { S as SideKick } from './SideKick-es.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.40.2",
+  "version": "6.41.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -534,5 +534,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "a6c2f81e84c7e7a662beb3484d8f7cc46a77c331"
+  "gitHead": "925c94b58b51dba6d99cfbfe779bb7d0651a2f1c"
 }

package/dist/Option-cjs.js

@@ -1,21 +0,0 @@
-'use strict';
-
-var React = require('react');
-var FormField = require('./FormField-cjs.js');
-require('classnames');
-require('./tslib.es6-cjs.js');
-require('react-hook-form');
-require('framer-motion');
-require('@jobber/design');
-require('./Button-cjs.js');
-
-function Select(props) {
-    return React.createElement(FormField.FormField, Object.assign({ type: "select" }, props));
-}
-
-function SelectOption({ children, disabled, value }) {
-    return (React.createElement("option", { disabled: disabled, value: value }, children));
-}
-
-exports.Select = Select;
-exports.SelectOption = SelectOption;

package/dist/Option-es.js

@@ -1,18 +0,0 @@
-import React__default from 'react';
-import { k as FormField } from './FormField-es.js';
-import 'classnames';
-import './tslib.es6-es.js';
-import 'react-hook-form';
-import 'framer-motion';
-import '@jobber/design';
-import './Button-es.js';
-
-function Select(props) {
-    return React__default.createElement(FormField, Object.assign({ type: "select" }, props));
-}
-
-function SelectOption({ children, disabled, value }) {
-    return (React__default.createElement("option", { disabled: disabled, value: value }, children));
-}
-
-export { Select as S, SelectOption as a };