@jobber/components 7.5.0 → 7.7.0

package/dist/InputText/index.mjs

@@ -1,20 +1,21 @@
 import React__default, { forwardRef, useRef, useImperativeHandle, useMemo, useId } from 'react';
 import { useSafeLayoutEffect } from '@jobber/hooks';
-import { k as FormField, b as useAtlantisFormFieldName, n as mergeRefs, l as formFieldStyles, f as FormFieldWrapper, m as FormFieldPostFix } from '../FormField-es.js';
+import { F 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';
+import { u as useAtlantisFormFieldName, m as mergeRefs, h as formFieldStyles, c as FormFieldWrapper, i as FormFieldPostFix } from '../mergeRefs-es.js';
 import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
+import 'react-router-dom';
 import '../Icon-es.js';
-import '../Text-es.js';
 import '../Typography-es.js';
+import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
-import 'react-router-dom';
 
 /**
  * Hook for resizing a textarea based on its content. The textarea will grow up to the max number of rows specified.

package/dist/InputTime/index.cjs

@@ -3,13 +3,14 @@
 var React = require('react');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 var debounce = require('../debounce-cjs.js');
-var FormField = require('../FormField-cjs.js');
+var mergeRefs = require('../mergeRefs-cjs.js');
 require('classnames');
 require('@jobber/design');
 require('react-hook-form');
 require('../Button-cjs.js');
 var filterDataAttributes = require('../filterDataAttributes-cjs.js');
 var omit = require('../omit-cjs.js');
+var FormField = require('../FormField-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
 require('../_commonjsHelpers-cjs.js');
@@ -302,12 +303,12 @@ function InputTimeRebuilt(_a) {
     const descriptionIdentifier = `descriptionUUID--${id}`;
     const descriptionVisible = props.description && !props.inline;
     const isInvalid = Boolean(props.error || props.invalid);
-    return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: props.name, error: props.error || "", identifier: id, descriptionIdentifier: descriptionIdentifier, invalid: props.invalid, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: props.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
-        React.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: FormField.formFieldStyles.input, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, required: props.required, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
+    return (React.createElement(mergeRefs.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: props.name, error: props.error || "", identifier: id, descriptionIdentifier: descriptionIdentifier, invalid: props.invalid, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: props.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
+        React.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: mergeRefs.formFieldStyles.input, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, required: props.required, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
 }
 function useInputTimeRefs(inputRef) {
     const internalRef = React.useRef(null);
-    const mergedRef = FormField.mergeRefs([internalRef, inputRef]);
+    const mergedRef = mergeRefs.mergeRefs([internalRef, inputRef]);
     const wrapperRef = React.useRef(null);
     return { internalRef, mergedRef, wrapperRef };
 }

package/dist/InputTime/index.mjs

@@ -1,13 +1,14 @@
 import React__default, { useState, useCallback, useEffect, useId, useRef } from 'react';
 import { _ as __rest } from '../tslib.es6-es.js';
 import { a as debounce } from '../debounce-es.js';
-import { f as FormFieldWrapper, l as formFieldStyles, n as mergeRefs, k as FormField } from '../FormField-es.js';
+import { c as FormFieldWrapper, h as formFieldStyles, m as mergeRefs } from '../mergeRefs-es.js';
 import 'classnames';
 import '@jobber/design';
 import 'react-hook-form';
 import '../Button-es.js';
 import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
 import { o as omit } from '../omit-es.js';
+import { F as FormField } from '../FormField-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
 import '../_commonjsHelpers-es.js';

package/dist/RecurringSelect/index.cjs

@@ -6,20 +6,8 @@ require('react');
 require('../Text-cjs.js');
 require('../Typography-cjs.js');
 require('classnames');
-require('../Select/index.cjs');
-require('../omit-cjs.js');
-require('../_commonjsHelpers-cjs.js');
-require('../_getAllKeys-cjs.js');
-require('../isTypedArray-cjs.js');
-require('../isObjectLike-cjs.js');
-require('../isSymbol-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('../Select-cjs.js');
+require('../mergeRefs-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
@@ -35,6 +23,7 @@ require('../filterDataAttributes-cjs.js');
 require('../InputNumber/index.cjs');
 require('../Text-cjs2.js');
 require('../clsx-cjs.js');
+require('../FormField-cjs.js');
 require('../InputGroup-cjs.js');
 require('../Content-cjs.js');
 require('../RadioGroup-cjs.js');

package/dist/RecurringSelect/index.mjs

@@ -4,20 +4,8 @@ import 'react';
 import '../Text-es.js';
 import '../Typography-es.js';
 import 'classnames';
-import '../Select/index.mjs';
-import '../omit-es.js';
-import '../_commonjsHelpers-es.js';
-import '../_getAllKeys-es.js';
-import '../isTypedArray-es.js';
-import '../isObjectLike-es.js';
-import '../isSymbol-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 '../Select-es.js';
+import '../mergeRefs-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
@@ -33,6 +21,7 @@ import '../filterDataAttributes-es.js';
 import '../InputNumber/index.mjs';
 import '../Text-es2.js';
 import '../clsx-es.js';
+import '../FormField-es.js';
 import '../InputGroup-es.js';
 import '../Content-es.js';
 import '../RadioGroup-es.js';

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 Select_index = require('./Select/index.cjs');
+var Select = require('./Select-cjs.js');
 var InputNumber_index = require('./InputNumber/index.cjs');
 var InputGroup = require('./InputGroup-cjs.js');
 var Content = require('./Content-cjs.js');
@@ -55,11 +55,11 @@ function RecurringSelect({ value, disabled = false, onChange, }) {
             React.createElement("div", { className: styles.fullWidthWrapper },
                 React.createElement(InputGroup.InputGroup, { flowDirection: "horizontal" },
                     React.createElement(InputNumber_index.InputNumber, { disabled: disabled, name: "schedule-recurrence-interval", value: value.interval, min: 1, maxLength: 3, onChange: onChangeInterval }),
-                    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)")))),
+                    React.createElement(Select.Select, { disabled: disabled, value: value.type, onChange: onChangeType, name: "schedule-recurrence-type" },
+                        React.createElement(Select.SelectOption, { value: DayOfMonthSelect.DurationPeriod.Day }, "Day(s)"),
+                        React.createElement(Select.SelectOption, { value: DayOfMonthSelect.DurationPeriod.Week }, "Week(s)"),
+                        React.createElement(Select.SelectOption, { value: monthlySelectOptionValue }, "Month(s)"),
+                        React.createElement(Select.SelectOption, { 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 { Select, Option as SelectOption } from './Select/index.mjs';
+import { a as Select, S as SelectOption } from './Select-es.js';
 import { InputNumber } from './InputNumber/index.mjs';
 import { I as InputGroup } from './InputGroup-es.js';
 import { C as Content } from './Content-es.js';

package/dist/Select/Select.d.ts

@@ -1,3 +1,7 @@
 import React from "react";
-import type { SelectLegacyProps } from "./Select.types";
-export declare function Select(props: SelectLegacyProps): React.JSX.Element;
+import type { SelectProps } from "./Select.types";
+export declare function Select(props: SelectProps): React.JSX.Element;
+export declare namespace Select {
+    var Option: typeof import("./Option").Option;
+    var OptionGroup: typeof import("./OptionGroup").OptionGroup;
+}

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

@@ -1,20 +1,7 @@
 import type { Ref } from "react";
-import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
+import type { FormFieldProps } from "../FormField";
 import type { FocusEvents, HTMLInputBaseProps, RebuiltInputCommonProps } from "../sharedHelpers/types";
-/**
- * @deprecated Use the v2 Select component instead (version={2}).
- */
-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"> {
-    /**
-     * Changes the width to roughly the same size as the maximum character length
-     */
-    readonly maxLength?: number;
-}
-/**
- * Rebuilt version of the Select component without React Hook Form dependency.
- */
-export interface SelectRebuiltProps extends Omit<HTMLInputBaseProps, "readOnly" | "maxLength">, FocusEvents<HTMLSelectElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix" | "align" | "showMiniLabel">, Pick<SelectLegacyProps, "prefix" | "suffix" | "align" | "children"> {
-    defaultValue?: never;
+export interface SelectProps extends Omit<HTMLInputBaseProps, "readOnly" | "maxLength">, FocusEvents<HTMLSelectElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix" | "align" | "showMiniLabel" | "version">, Pick<FormFieldProps, "prefix" | "suffix" | "align" | "children"> {
     readonly value?: string | number;
     onChange?(newValue?: string | number): void;
     readonly inputRef?: Ref<HTMLSelectElement>;
@@ -26,7 +13,6 @@ export interface SelectRebuiltProps extends Omit<HTMLInputBaseProps, "readOnly"
      * Opt-in to the customizable select UI (Chromium 123+).
      * When true, the component will apply the custom select styles
      * Defaults to false for native behavior.
-     * Only supported by Select version={2}.
      */
     readonly UNSAFE_experimentalStyles?: boolean;
 }

package/dist/Select/index.cjs

@@ -1,117 +1,25 @@
 'use strict';
 
-var React = require('react');
-var omit = require('../omit-cjs.js');
-var FormField = require('../FormField-cjs.js');
-var classnames = require('classnames');
-require('../tslib.es6-cjs.js');
-require('react-hook-form');
+var Select = require('../Select-cjs.js');
+require('react');
+require('classnames');
+require('../mergeRefs-cjs.js');
 require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
-var filterDataAttributes = require('../filterDataAttributes-cjs.js');
-require('../_commonjsHelpers-cjs.js');
-require('../_getAllKeys-cjs.js');
-require('../isTypedArray-cjs.js');
-require('../isObjectLike-cjs.js');
-require('../isSymbol-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('../tslib.es6-cjs.js');
+require('react-router-dom');
 require('../Icon-cjs.js');
-require('../Text-cjs.js');
 require('../Typography-cjs.js');
+require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
-require('react-router-dom');
-
-// eslint-disable-next-line import/no-deprecated
-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(event) {
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-    }
-    function handleFocus(event) {
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-    }
-    return {
-        handleChange,
-        handleBlur,
-        handleFocus,
-    };
-}
-
-var styles = {"select":"-hmXAsAfH9U-","selectPostfix":"_5ST4c1fXDYU-","spinning":"oOACJmrVDf0-"};
-
-function SelectRebuilt(props) {
-    var _a;
-    const { mergedRef, wrapperRef } = useSelectRefs(props.inputRef);
-    const dataAttrs = filterDataAttributes.filterDataAttributes(props);
-    const generatedId = React.useId();
-    const id = props.id || generatedId;
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const { name } = FormField.useAtlantisFormFieldName({
-        nameProp: props.name,
-        id: id,
-    });
-    const { handleChange, handleBlur, handleFocus } = useSelectActions({
-        onChange: props.onChange,
-        onBlur: props.onBlur,
-        onFocus: props.onFocus,
-    });
-    const descriptionVisible = props.description && !props.inline;
-    const isInvalid = Boolean(props.error || props.invalid);
-    return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never" },
-        React.createElement(React.Fragment, null,
-            React.createElement("select", Object.assign({ id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, required: props.required, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
-                    ? descriptionIdentifier
-                    : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], ref: mergedRef, className: classnames(FormField.formFieldStyles.input, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
-            React.createElement(FormField.FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
-}
-function useSelectRefs(inputRef) {
-    const internalRef = React.useRef(null);
-    const mergedRef = FormField.mergeRefs([internalRef, inputRef]);
-    const wrapperRef = React.useRef(null);
-    return { mergedRef, wrapperRef };
-}
-
-function SelectOption({ children, disabled, value }) {
-    return (React.createElement("option", { disabled: disabled, value: value }, children));
-}
+require('react-hook-form');
+require('../filterDataAttributes-cjs.js');
 
-function OptionGroup({ children, label, disabled, UNSAFE_className, UNSAFE_style, }) {
-    return (React.createElement("optgroup", { label: label, disabled: disabled, className: UNSAFE_className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container }, 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));
-    }
-}
-Select.Option = SelectOption;
-Select.OptionGroup = OptionGroup;
 
-exports.Option = SelectOption;
-exports.Select = Select;
+exports.Option = Select.SelectOption;
+exports.Select = Select.Select;

package/dist/Select/index.d.ts

@@ -1,10 +1,3 @@
-import React from "react";
-import { type SelectLegacyProps, type SelectRebuiltProps } from "./Select.types";
 export { Option } from "./Option";
-export type SelectShimProps = SelectLegacyProps | SelectRebuiltProps;
-export declare function Select(props: SelectShimProps): React.JSX.Element;
-export declare namespace Select {
-    var Option: typeof import("./Option").Option;
-    var OptionGroup: typeof import("./OptionGroup").OptionGroup;
-}
-export type { SelectRebuiltProps, SelectLegacyProps };
+export { Select } from "./Select";
+export type { SelectProps } from "./Select.types";

package/dist/Select/index.mjs

@@ -1,114 +1,18 @@
-import React__default, { useId, useRef } from 'react';
-import { o as omit } from '../omit-es.js';
-import { k as FormField, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as formFieldStyles, m as FormFieldPostFix, n as mergeRefs } from '../FormField-es.js';
-import classnames from 'classnames';
-import '../tslib.es6-es.js';
-import 'react-hook-form';
+export { S as Option, a as Select } from '../Select-es.js';
+import 'react';
+import 'classnames';
+import '../mergeRefs-es.js';
 import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
-import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
-import '../_commonjsHelpers-es.js';
-import '../_getAllKeys-es.js';
-import '../isTypedArray-es.js';
-import '../isObjectLike-es.js';
-import '../isSymbol-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 '../tslib.es6-es.js';
+import 'react-router-dom';
 import '../Icon-es.js';
-import '../Text-es.js';
 import '../Typography-es.js';
+import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
-import 'react-router-dom';
-
-// eslint-disable-next-line import/no-deprecated
-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(event) {
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-    }
-    function handleFocus(event) {
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-    }
-    return {
-        handleChange,
-        handleBlur,
-        handleFocus,
-    };
-}
-
-var styles = {"select":"-hmXAsAfH9U-","selectPostfix":"_5ST4c1fXDYU-","spinning":"oOACJmrVDf0-"};
-
-function SelectRebuilt(props) {
-    var _a;
-    const { mergedRef, wrapperRef } = useSelectRefs(props.inputRef);
-    const dataAttrs = filterDataAttributes(props);
-    const generatedId = useId();
-    const id = props.id || generatedId;
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const { name } = useAtlantisFormFieldName({
-        nameProp: props.name,
-        id: id,
-    });
-    const { handleChange, handleBlur, handleFocus } = useSelectActions({
-        onChange: props.onChange,
-        onBlur: props.onBlur,
-        onFocus: props.onFocus,
-    });
-    const descriptionVisible = props.description && !props.inline;
-    const isInvalid = Boolean(props.error || props.invalid);
-    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never" },
-        React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("select", Object.assign({ id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, required: props.required, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
-                    ? descriptionIdentifier
-                    : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], ref: mergedRef, className: classnames(formFieldStyles.input, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
-            React__default.createElement(FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
-}
-function useSelectRefs(inputRef) {
-    const internalRef = useRef(null);
-    const mergedRef = mergeRefs([internalRef, inputRef]);
-    const wrapperRef = useRef(null);
-    return { mergedRef, wrapperRef };
-}
-
-function SelectOption({ children, disabled, value }) {
-    return (React__default.createElement("option", { disabled: disabled, value: value }, children));
-}
-
-function OptionGroup({ children, label, disabled, UNSAFE_className, UNSAFE_style, }) {
-    return (React__default.createElement("optgroup", { label: label, disabled: disabled, className: UNSAFE_className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container }, 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));
-    }
-}
-Select.Option = SelectOption;
-Select.OptionGroup = OptionGroup;
-
-export { SelectOption as Option, Select };
+import 'react-hook-form';
+import '../filterDataAttributes-es.js';

package/dist/Select-cjs.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var mergeRefs = require('./mergeRefs-cjs.js');
+require('./tslib.es6-cjs.js');
+require('react-hook-form');
+require('./Button-cjs.js');
+require('@jobber/design');
+var filterDataAttributes = require('./filterDataAttributes-cjs.js');
+
+function SelectOption({ children, disabled, value }) {
+    return (React.createElement("option", { disabled: disabled, value: value }, children));
+}
+
+/**
+ * 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(event) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }
+    function handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }
+    return {
+        handleChange,
+        handleBlur,
+        handleFocus,
+    };
+}
+
+var styles = {"select":"-hmXAsAfH9U-","selectPostfix":"_5ST4c1fXDYU-","spinning":"oOACJmrVDf0-"};
+
+function OptionGroup({ children, label, disabled, UNSAFE_className, UNSAFE_style, }) {
+    return (React.createElement("optgroup", { label: label, disabled: disabled, className: UNSAFE_className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container }, children));
+}
+
+function Select(props) {
+    var _a;
+    const { mergedRef, wrapperRef } = useSelectRefs(props.inputRef);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(props);
+    const generatedId = React.useId();
+    const id = props.id || generatedId;
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const { name } = mergeRefs.useAtlantisFormFieldName({
+        nameProp: props.name,
+        id: id,
+    });
+    const { handleChange, handleBlur, handleFocus } = useSelectActions({
+        onChange: props.onChange,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+    });
+    const descriptionVisible = props.description && !props.inline;
+    const isInvalid = Boolean(props.error || props.invalid);
+    return (React.createElement(mergeRefs.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never" },
+        React.createElement(React.Fragment, null,
+            React.createElement("select", Object.assign({ id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, required: props.required, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+                    ? descriptionIdentifier
+                    : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], ref: mergedRef, className: classnames(mergeRefs.formFieldStyles.input, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
+            React.createElement(mergeRefs.FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
+}
+function useSelectRefs(inputRef) {
+    const internalRef = React.useRef(null);
+    const mergedRef = mergeRefs.mergeRefs([internalRef, inputRef]);
+    const wrapperRef = React.useRef(null);
+    return { mergedRef, wrapperRef };
+}
+Select.Option = SelectOption;
+Select.OptionGroup = OptionGroup;
+
+exports.Select = Select;
+exports.SelectOption = SelectOption;

package/dist/Select-es.js

@@ -0,0 +1,75 @@
+import React__default, { useId, useRef } from 'react';
+import classnames from 'classnames';
+import { u as useAtlantisFormFieldName, c as FormFieldWrapper, h as formFieldStyles, i as FormFieldPostFix, m as mergeRefs } from './mergeRefs-es.js';
+import './tslib.es6-es.js';
+import 'react-hook-form';
+import './Button-es.js';
+import '@jobber/design';
+import { f as filterDataAttributes } from './filterDataAttributes-es.js';
+
+function SelectOption({ children, disabled, value }) {
+    return (React__default.createElement("option", { disabled: disabled, value: value }, children));
+}
+
+/**
+ * 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(event) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }
+    function handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }
+    return {
+        handleChange,
+        handleBlur,
+        handleFocus,
+    };
+}
+
+var styles = {"select":"-hmXAsAfH9U-","selectPostfix":"_5ST4c1fXDYU-","spinning":"oOACJmrVDf0-"};
+
+function OptionGroup({ children, label, disabled, UNSAFE_className, UNSAFE_style, }) {
+    return (React__default.createElement("optgroup", { label: label, disabled: disabled, className: UNSAFE_className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container }, children));
+}
+
+function Select(props) {
+    var _a;
+    const { mergedRef, wrapperRef } = useSelectRefs(props.inputRef);
+    const dataAttrs = filterDataAttributes(props);
+    const generatedId = useId();
+    const id = props.id || generatedId;
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const { name } = useAtlantisFormFieldName({
+        nameProp: props.name,
+        id: id,
+    });
+    const { handleChange, handleBlur, handleFocus } = useSelectActions({
+        onChange: props.onChange,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+    });
+    const descriptionVisible = props.description && !props.inline;
+    const isInvalid = Boolean(props.error || props.invalid);
+    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never" },
+        React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("select", Object.assign({ id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, required: props.required, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+                    ? descriptionIdentifier
+                    : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], ref: mergedRef, className: classnames(formFieldStyles.input, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
+            React__default.createElement(FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
+}
+function useSelectRefs(inputRef) {
+    const internalRef = useRef(null);
+    const mergedRef = mergeRefs([internalRef, inputRef]);
+    const wrapperRef = useRef(null);
+    return { mergedRef, wrapperRef };
+}
+Select.Option = SelectOption;
+Select.OptionGroup = OptionGroup;
+
+export { SelectOption as S, Select as a };