@jobber/components 8.17.0 → 8.17.1-rename-sel-3e22d86.4

package/LegacySelect.d.ts

@@ -0,0 +1 @@
+export * from "./dist/LegacySelect";

package/{Select.js → LegacySelect.js}

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true,
 });
 
-var Select = require("./dist/Select");
+var LegacySelect = require("./dist/LegacySelect");
 
-Object.keys(Select).forEach(function(key) {
+Object.keys(LegacySelect).forEach(function(key) {
   if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return Select[key];
+      return LegacySelect[key];
     },
   });
 });

package/dist/DataTable/index.cjs

@@ -10,7 +10,7 @@ require('@jobber/hooks');
 require('../Glimmer-cjs.js');
 require('../tslib.es6-cjs.js');
 require('../Content-cjs.js');
-require('../Select-cjs.js');
+require('../LegacySelect-cjs.js');
 require('../useAtlantisFormFieldName-cjs.js');
 require('../FormFieldWrapper-cjs.js');
 require('framer-motion');

package/dist/DataTable/index.mjs

@@ -8,7 +8,7 @@ import '@jobber/hooks';
 import '../Glimmer-es.js';
 import '../tslib.es6-es.js';
 import '../Content-es.js';
-import '../Select-es.js';
+import '../LegacySelect-es.js';
 import '../useAtlantisFormFieldName-es.js';
 import '../FormFieldWrapper-es.js';
 import 'framer-motion';

package/dist/DataTable-cjs.js

@@ -6,7 +6,7 @@ var React = require('react');
 var jobberHooks = require('@jobber/hooks');
 var Glimmer = require('./Glimmer-cjs.js');
 var tslib_es6 = require('./tslib.es6-cjs.js');
-var Select = require('./Select-cjs.js');
+var LegacySelect = require('./LegacySelect-cjs.js');
 var Button = require('./Button-cjs.js');
 var Text = require('./Text-cjs.js');
 var DataTableTable = require('./DataTableTable-cjs.js');
@@ -111,9 +111,9 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
         React.createElement("div", { className: styles$1.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
         React.createElement("div", { className: styles$1.paginationNav },
             React.createElement("div", { className: styles$1.paginationSelect },
-                React.createElement(Select.Select, { value: table.getState().pagination.pageSize, onChange: value => {
+                React.createElement(LegacySelect.LegacySelect, { value: table.getState().pagination.pageSize, onChange: value => {
                         table.setPageSize(Number(value));
-                    }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React.createElement(Select.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)))),
+                    }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React.createElement(LegacySelect.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)))),
                 React.createElement("span", { className: styles$1.paginationSelectLabel }, "per page")),
             React.createElement("div", { className: styles$1.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 { useResizeObserver, Breakpoints } from '@jobber/hooks';
 import { G as Glimmer } from './Glimmer-es.js';
 import { _ as __rest } from './tslib.es6-es.js';
-import { a as Select, S as SelectOption } from './Select-es.js';
+import { L as LegacySelect, S as SelectOption } from './LegacySelect-es.js';
 import { B as Button } from './Button-es.js';
 import { T as Text } from './Text-es.js';
 import { S as SortIcon, a as SortDirection, m as DataTableTable, f as DataTableHeader, g as DataTableHeaderCell, j as DataTableRow, c as DataTableCell, k as DataTableRowActions, D as DataTableActions, b as DataTableBody, d as DataTableContainer, l as DataTableSortableHeader, e as DataTableFooter, h as DataTablePagination, i as DataTablePaginationButton } from './DataTableTable-es.js';
@@ -109,7 +109,7 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
         React__default.createElement("div", { className: styles$1.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
         React__default.createElement("div", { className: styles$1.paginationNav },
             React__default.createElement("div", { className: styles$1.paginationSelect },
-                React__default.createElement(Select, { value: table.getState().pagination.pageSize, onChange: value => {
+                React__default.createElement(LegacySelect, { value: table.getState().pagination.pageSize, onChange: value => {
                         table.setPageSize(Number(value));
                     }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React__default.createElement(SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)))),
                 React__default.createElement("span", { className: styles$1.paginationSelectLabel }, "per page")),

package/dist/LegacySelect/LegacySelect.d.ts

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

package/dist/{Select/Select.types.d.ts → LegacySelect/LegacySelect.types.d.ts}

@@ -1,7 +1,7 @@
 import type { Ref } from "react";
 import type { FormFieldProps } from "../FormField";
 import type { FocusEvents, HTMLInputBaseProps, RebuiltInputCommonProps } from "../sharedHelpers/types";
-export interface SelectProps extends Omit<HTMLInputBaseProps, "readOnly" | "maxLength">, FocusEvents<HTMLSelectElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix" | "align" | "showMiniLabel">, Pick<FormFieldProps, "prefix" | "suffix" | "align" | "children"> {
+export interface LegacySelectProps extends Omit<HTMLInputBaseProps, "readOnly" | "maxLength">, FocusEvents<HTMLSelectElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix" | "align" | "showMiniLabel">, Pick<FormFieldProps, "prefix" | "suffix" | "align" | "children"> {
     readonly value?: string | number;
     onChange?(newValue?: string | number): void;
     readonly inputRef?: Ref<HTMLSelectElement>;

package/dist/{Select → LegacySelect}/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var Select = require('../Select-cjs.js');
+var LegacySelect = require('../LegacySelect-cjs.js');
 require('react');
 require('classnames');
 require('../useAtlantisFormFieldName-cjs.js');
@@ -23,5 +23,5 @@ require('../filterDataAttributes-cjs.js');
 
 
 
-exports.Option = Select.SelectOption;
-exports.Select = Select.Select;
+exports.LegacySelect = LegacySelect.LegacySelect;
+exports.Option = LegacySelect.SelectOption;

package/dist/LegacySelect/index.d.ts

@@ -0,0 +1,3 @@
+export { Option } from "./Option";
+export { LegacySelect } from "./LegacySelect";
+export type { LegacySelectProps } from "./LegacySelect.types";

package/dist/{Select → LegacySelect}/index.mjs

@@ -1,4 +1,4 @@
-export { S as Option, a as Select } from '../Select-es.js';
+export { L as LegacySelect, S as Option } from '../LegacySelect-es.js';
 import 'react';
 import 'classnames';
 import '../useAtlantisFormFieldName-es.js';

package/dist/{Select-cjs.js → LegacySelect-cjs.js}

@@ -35,13 +35,13 @@ function useSelectActions({ onChange, onBlur, onFocus, }) {
     };
 }
 
-var styles = {"select":"-hmXAsAfH9U-","selectPostfix":"_5ST4c1fXDYU-","spinning":"oOACJmrVDf0-"};
+var styles = {"select":"Bm9c8--1XKs-","selectPostfix":"LBiZF2RZlxc-","spinning":"oMOHhBwUzbs-"};
 
 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) {
+function LegacySelect(props) {
     var _a;
     const { mergedRef, wrapperRef } = useSelectRefs(props.inputRef);
     const dataAttrs = filterDataAttributes.filterDataAttributes(props);
@@ -72,8 +72,8 @@ function useSelectRefs(inputRef) {
     const wrapperRef = React.useRef(null);
     return { mergedRef, wrapperRef };
 }
-Select.Option = SelectOption;
-Select.OptionGroup = OptionGroup;
+LegacySelect.Option = SelectOption;
+LegacySelect.OptionGroup = OptionGroup;
 
-exports.Select = Select;
+exports.LegacySelect = LegacySelect;
 exports.SelectOption = SelectOption;

package/dist/{Select-es.js → LegacySelect-es.js}

@@ -33,13 +33,13 @@ function useSelectActions({ onChange, onBlur, onFocus, }) {
     };
 }
 
-var styles = {"select":"-hmXAsAfH9U-","selectPostfix":"_5ST4c1fXDYU-","spinning":"oOACJmrVDf0-"};
+var styles = {"select":"Bm9c8--1XKs-","selectPostfix":"LBiZF2RZlxc-","spinning":"oMOHhBwUzbs-"};
 
 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) {
+function LegacySelect(props) {
     var _a;
     const { mergedRef, wrapperRef } = useSelectRefs(props.inputRef);
     const dataAttrs = filterDataAttributes(props);
@@ -70,7 +70,7 @@ function useSelectRefs(inputRef) {
     const wrapperRef = useRef(null);
     return { mergedRef, wrapperRef };
 }
-Select.Option = SelectOption;
-Select.OptionGroup = OptionGroup;
+LegacySelect.Option = SelectOption;
+LegacySelect.OptionGroup = OptionGroup;
 
-export { SelectOption as S, Select as a };
+export { LegacySelect as L, SelectOption as S };

package/dist/docs/Autocomplete/Autocomplete.md

@@ -455,7 +455,7 @@ different from the rest.
 ## Related components
 
 * If you want to present a list of predefined options without text input, or the
-  number of options is smaller, use a [Select](../Select/Select.md)
+  number of options is smaller, use a [LegacySelect](../LegacySelect/LegacySelect.md)
 * If autocompleted results are not required for the text input, use
   [InputText](../InputText/InputText.md)
 * If a text input appearance is not required, and options can only be from a

package/dist/docs/Chip/Chip.md

@@ -238,8 +238,8 @@ export function ChipInvalidExample(
   single-select, multi-select, and add/dismiss functionality "out of the box"
 * [FilterPicker](../FilterPicker/FilterPicker.md) is most commonly triggered by a Chip,
   but is a separate component
-* [Select](../Select/Select.md) is a simpler single-select "dropdown" that
-  presents as a form element and should be preferred in forms
+* [LegacySelect](../LegacySelect/LegacySelect.md) is a simpler single-select "dropdown"
+  that presents as a form element and should be preferred in forms
 * [RadioGroup](../RadioGroup/RadioGroup.md) should be used to allow the user to
   select "one-of-many" items (single-select) and the labels for the items are
   longer than 1 or 2 words.

package/dist/docs/{Select/Select.md → LegacySelect/LegacySelect.md}

@@ -1,17 +1,21 @@
-# Select
+# LegacySelect
 
-A Select is used to present a defined list of options to choose from.
+> **This component was previously named `Select`.** It has been renamed to
+> `LegacySelect` to make room for a new `Select` implementation.
+
+A LegacySelect is used to present a defined list of options to choose from.
 
 ## Design & usage guidelines
 
-Nested within the Select component, Option defines the options that can be
-selected. For grouping options with section headers, use Select.OptionGroup.
+Nested within the LegacySelect component, Option defines the options that can be
+selected. For grouping options with section headers, use
+LegacySelect.OptionGroup.
 
 #### Custom grouped menu and browser support
 
 To enable the enhanced grouped menu styling (bold section headers, edge‑to‑edge
 dividers and hover backgrounds), set the `UNSAFE_experimentalStyles` prop on
-`Select`.
+`LegacySelect`.
 
 * When `UNSAFE_experimentalStyles` is true and the browser supports
   `appearance: base-select` (Chromium 123+), the select renders with the
@@ -26,16 +30,16 @@ dividers and hover backgrounds), set the `UNSAFE_experimentalStyles` prop on
 
 ```tsx
 import React, { useState } from "react";
-import { Option, Select } from "@jobber/components/Select";
+import { LegacySelect, Option } from "@jobber/components/LegacySelect";
 
-export function SelectInvalidExample() {
+export function LegacySelectInvalidExample() {
   const [value, setValue] = useState<string | number | undefined>("");
 
   return (
-    <Select invalid={true} value={value} onChange={setValue}>
+    <LegacySelect invalid={true} value={value} onChange={setValue}>
       <Option value="sad">Tony</Option>
       <Option value="old">Steve</Option>
-    </Select>
+    </LegacySelect>
   );
 }
 ```
@@ -44,58 +48,58 @@ export function SelectInvalidExample() {
 
 ```tsx
 import React, { useState } from "react";
-import { Option, Select } from "@jobber/components/Select";
+import { LegacySelect, Option } from "@jobber/components/LegacySelect";
 
-export function SelectDisabledExample() {
+export function LegacySelectDisabledExample() {
   const [value, setValue] = useState<string | number | undefined>("");
 
   return (
-    <Select disabled={true} value={value} onChange={setValue}>
+    <LegacySelect disabled={true} value={value} onChange={setValue}>
       <Option value="sad">Tony</Option>
       <Option value="old">Steve</Option>
-    </Select>
+    </LegacySelect>
   );
 }
 ```
 
 ## Option Grouping
 
-Use `Select.OptionGroup` to organize options with section headers for better
-user experience and visual hierarchy. The `label` prop is required as it
+Use `LegacySelect.OptionGroup` to organize options with section headers for
+better user experience and visual hierarchy. The `label` prop is required as it
 provides the section header text.
 
 ### Basic Option Groups
 
 ```tsx
 import React, { useState } from "react";
-import { Select } from "@jobber/components/Select";
+import { LegacySelect } from "@jobber/components/LegacySelect";
 
-export function SelectCustomOptionGroupsExample() {
+export function LegacySelectCustomOptionGroupsExample() {
   const [value, setValue] = useState<string | number | undefined>("");
 
   return (
-    <Select
+    <LegacySelect
       placeholder="Select an option"
       UNSAFE_experimentalStyles={true}
       value={value}
       onChange={setValue}
     >
-      <Select.OptionGroup label="Team A">
-        <Select.Option value="alice">Alice</Select.Option>
-        <Select.Option value="bob">Bob</Select.Option>
-        <Select.Option value="charlie">Charlie</Select.Option>
-      </Select.OptionGroup>
-      <Select.OptionGroup label="Team B">
-        <Select.Option value="diana">Diana</Select.Option>
-        <Select.Option value="evan">Evan</Select.Option>
-        <Select.Option value="frank">Frank</Select.Option>
-      </Select.OptionGroup>
-      <Select.OptionGroup label="Team C">
-        <Select.Option value="grace">Grace</Select.Option>
-        <Select.Option value="hector">Hector</Select.Option>
-        <Select.Option value="isabel">Isabel</Select.Option>
-      </Select.OptionGroup>
-    </Select>
+      <LegacySelect.OptionGroup label="Team A">
+        <LegacySelect.Option value="alice">Alice</LegacySelect.Option>
+        <LegacySelect.Option value="bob">Bob</LegacySelect.Option>
+        <LegacySelect.Option value="charlie">Charlie</LegacySelect.Option>
+      </LegacySelect.OptionGroup>
+      <LegacySelect.OptionGroup label="Team B">
+        <LegacySelect.Option value="diana">Diana</LegacySelect.Option>
+        <LegacySelect.Option value="evan">Evan</LegacySelect.Option>
+        <LegacySelect.Option value="frank">Frank</LegacySelect.Option>
+      </LegacySelect.OptionGroup>
+      <LegacySelect.OptionGroup label="Team C">
+        <LegacySelect.Option value="grace">Grace</LegacySelect.Option>
+        <LegacySelect.Option value="hector">Hector</LegacySelect.Option>
+        <LegacySelect.Option value="isabel">Isabel</LegacySelect.Option>
+      </LegacySelect.OptionGroup>
+    </LegacySelect>
   );
 }
 ```
@@ -104,31 +108,31 @@ export function SelectCustomOptionGroupsExample() {
 
 ```tsx
 import React, { useState } from "react";
-import { Select } from "@jobber/components/Select";
+import { LegacySelect } from "@jobber/components/LegacySelect";
 
-export function SelectCustomOptionGroupDisabledExample() {
+export function LegacySelectCustomOptionGroupDisabledExample() {
   const [value, setValue] = useState<string | number | undefined>("");
 
   return (
-    <Select
+    <LegacySelect
       UNSAFE_experimentalStyles
       placeholder="Select an option"
       value={value}
       onChange={setValue}
     >
-      <Select.OptionGroup label="Available Items">
-        <Select.Option value="option1">Option 1</Select.Option>
-        <Select.Option value="option2">Option 2</Select.Option>
-      </Select.OptionGroup>
-      <Select.OptionGroup label="Unavailable Items" disabled>
-        <Select.Option value="option3">Option 3</Select.Option>
-        <Select.Option value="option4">Option 4</Select.Option>
-      </Select.OptionGroup>
-      <Select.OptionGroup label="More Items">
-        <Select.Option value="option5">Option 5</Select.Option>
-        <Select.Option value="option6">Option 6</Select.Option>
-      </Select.OptionGroup>
-    </Select>
+      <LegacySelect.OptionGroup label="Available Items">
+        <LegacySelect.Option value="option1">Option 1</LegacySelect.Option>
+        <LegacySelect.Option value="option2">Option 2</LegacySelect.Option>
+      </LegacySelect.OptionGroup>
+      <LegacySelect.OptionGroup label="Unavailable Items" disabled>
+        <LegacySelect.Option value="option3">Option 3</LegacySelect.Option>
+        <LegacySelect.Option value="option4">Option 4</LegacySelect.Option>
+      </LegacySelect.OptionGroup>
+      <LegacySelect.OptionGroup label="More Items">
+        <LegacySelect.Option value="option5">Option 5</LegacySelect.Option>
+        <LegacySelect.Option value="option6">Option 6</LegacySelect.Option>
+      </LegacySelect.OptionGroup>
+    </LegacySelect>
   );
 }
 ```
@@ -138,7 +142,7 @@ export function SelectCustomOptionGroupDisabledExample() {
 
 ### Custom (Chromium) vs native
 
-Select is native by default. Opt into the customizable Chrome UI with
+LegacySelect is native by default. Opt into the customizable Chrome UI with
 `UNSAFE_experimentalStyles`. This enhances grouped menus in Chromium 123+ when
 the browser supports `appearance: base-select`.
 
@@ -149,7 +153,7 @@ displayed value) is still rendered by the browser's picker. As a result,
 right/center alignment of the displayed value is not configurable in Chromium's
 customizable select.
 
-* Need right/center alignment? Use the native Select (omit
+* Need right/center alignment? Use the native LegacySelect (omit
   `UNSAFE_experimentalStyles`).
 * You can still style the grouped dropdown (optgroup/option) in the custom UI,
   but the closed value alignment will remain default.
@@ -158,10 +162,11 @@ customizable select.
 
 ### Composable usage
 
-Select supports composition via subcomponents:
+LegacySelect supports composition via subcomponents:
 
-* `Select.Option`: item in the list. Provide `value` and children as the label.
-* `Select.OptionGroup`: group options under a `label`. Use with
+* `LegacySelect.Option`: item in the list. Provide `value` and children as the
+  label.
+* `LegacySelect.OptionGroup`: group options under a `label`. Use with
   `UNSAFE_experimentalStyles` to opt into the customizable grouped menu in
   Chromium.
 
@@ -177,11 +182,11 @@ Select supports composition via subcomponents:
 General guidance on `UNSAFE_` props can be found in
 [Customizing components](../customizing-components/customizing-components.md).
 
-Select subcomponents allow `UNSAFE_className` and `UNSAFE_style` to target the
-native elements:
+LegacySelect subcomponents allow `UNSAFE_className` and `UNSAFE_style` to target
+the native elements:
 
-* `Select.OptionGroup` maps to `<optgroup>`
-* `Select.Option` maps to `<option>`
+* `LegacySelect.OptionGroup` maps to `<optgroup>`
+* `LegacySelect.Option` maps to `<option>`
 
 Note that native `<select>` UX differs per browser. Use `UNSAFE_` props with
 caution and test across environments. In the custom UI (Chromium), only the
@@ -192,7 +197,7 @@ dropdown content is stylable; the closed value alignment is not.
 
 ### Web
 
-#### Select
+#### LegacySelect
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
@@ -234,14 +239,14 @@ dropdown content is stylable; the closed value alignment is not.
 | `UNSAFE_experimentalStyles` | `boolean` | No | — | Opt-in to the customizable select UI (Chromium 123+). When true, the component will apply the custom select styles De... |
 | `value` | `number | string` | No | — |  |
 
-#### Select.Option
+#### LegacySelect.Option
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `disabled` | `boolean` | No | — |  |
 | `value` | `string` | No | — | The content of this attribute represents the value to be submitted with the form, should this option be selected. |
 
-#### Select.OptionGroup
+#### LegacySelect.OptionGroup
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|

package/dist/docs/Menu/Menu.md

@@ -216,7 +216,7 @@ Minimum menu item height:
 * For a comparable action-list experience in native mobile, use
   [BottomSheet](/components/BottomSheet) from `@jobber/components-native`
 * To allow the user to choose a value from a predefined list within a form, use
-  a [Select](../Select/Select.md)
+  a [LegacySelect](../LegacySelect/LegacySelect.md)
 * To allow the user to search and filter through a list of options, use a
   [FilterPicker](../FilterPicker/FilterPicker.md)
 

package/dist/docs/MultiSelect/MultiSelect.md

@@ -22,7 +22,7 @@ the `onOptionsChange` prop.
 Adjusting the
 [size](/storybook/web/?path=/story/components-deprecated-multiselect--sizes) of
 the MultiSelect can be used to help align with common adjacent elements such as
-[InputText](../InputText/InputText.md) or [Select](../Select/Select.md).
+[InputText](../InputText/InputText.md) or [Select](/components/Select).
 
 ## Accessibility
 

package/dist/docs/Tabs/Tabs.md

@@ -28,7 +28,8 @@ pattern for the user.
 To show multiple groupings of content at once, use [Card](../Card/Card.md).
 
 To allow the user to select one-of-many options in a form, use
-[RadioGroup](../RadioGroup/RadioGroup.md) or [Select](../Select/Select.md).
+[RadioGroup](../RadioGroup/RadioGroup.md) or
+[LegacySelect](../LegacySelect/LegacySelect.md).
 
 ## Accessibility
 

package/dist/docs/index.md

@@ -60,6 +60,7 @@
 [InputTime](./InputTime/InputTime.md)
 [InputValidation](./InputValidation/InputValidation.md)
 [interaction](./interaction/interaction.md)
+[LegacySelect](./LegacySelect/LegacySelect.md)
 [LightBox](./LightBox/LightBox.md)
 [Link](./Link/Link.md)
 [List](./List/List.md)
@@ -79,7 +80,6 @@
 [ResponsiveSwitcher](./ResponsiveSwitcher/ResponsiveSwitcher.md)
 [scaffolding](./scaffolding/scaffolding.md)
 [SegmentedControl](./SegmentedControl/SegmentedControl.md)
-[Select](./Select/Select.md)
 [settings](./settings/settings.md)
 [SideDrawer](./SideDrawer/SideDrawer.md)
 [SideKick](./SideKick/SideKick.md)

package/dist/index.cjs

@@ -72,7 +72,7 @@ var Popover = require('./Popover-cjs.js');
 var ProgressBar = require('./ProgressBar-cjs.js');
 var RadioGroup = require('./RadioGroup-cjs.js');
 var ResponsiveSwitcher = require('./ResponsiveSwitcher-cjs.js');
-var Select = require('./Select-cjs.js');
+var LegacySelect = require('./LegacySelect-cjs.js');
 var SegmentedControl = require('./SegmentedControl-cjs.js');
 var SideDrawer = require('./SideDrawer-cjs.js');
 var SideKick = require('./SideKick-cjs.js');
@@ -309,8 +309,8 @@ exports.ProgressBar = ProgressBar.ProgressBar;
 exports.RadioGroup = RadioGroup.RadioGroup;
 exports.RadioOption = RadioGroup.RadioOption;
 exports.ResponsiveSwitcher = ResponsiveSwitcher.ResponsiveSwitcher;
-exports.Option = Select.SelectOption;
-exports.Select = Select.Select;
+exports.LegacySelect = LegacySelect.LegacySelect;
+exports.Option = LegacySelect.SelectOption;
 exports.SegmentedControl = SegmentedControl.SegmentedControl;
 exports.SegmentedControlContext = SegmentedControl.SegmentedControlContext;
 exports.SegmentedControlProvider = SegmentedControl.SegmentedControlProvider;

package/dist/index.d.mts

@@ -62,7 +62,7 @@ export * from "./Popover";
 export * from "./ProgressBar";
 export * from "./RadioGroup";
 export * from "./ResponsiveSwitcher";
-export * from "./Select";
+export * from "./LegacySelect";
 export * from "./SegmentedControl";
 export * from "./SideDrawer";
 export * from "./SideKick";

package/dist/index.d.ts

@@ -62,7 +62,7 @@ export * from "./Popover";
 export * from "./ProgressBar";
 export * from "./RadioGroup";
 export * from "./ResponsiveSwitcher";
-export * from "./Select";
+export * from "./LegacySelect";
 export * from "./SegmentedControl";
 export * from "./SideDrawer";
 export * from "./SideKick";

package/dist/index.mjs

@@ -70,7 +70,7 @@ export { P as Popover, u as usePopoverContext, a as usePopoverStyles } from './P
 export { P as ProgressBar } from './ProgressBar-es.js';
 export { R as RadioGroup, a as RadioOption } from './RadioGroup-es.js';
 export { R as ResponsiveSwitcher } from './ResponsiveSwitcher-es.js';
-export { S as Option, a as Select } from './Select-es.js';
+export { L as LegacySelect, S as Option } from './LegacySelect-es.js';
 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/dist/styles.css

@@ -7997,14 +7997,14 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
  */
 @supports ((-webkit-appearance: base-select) or (appearance: base-select)) {
     /* opt into customizing select */
-    .-hmXAsAfH9U-,
-    .-hmXAsAfH9U-::picker(select) {
+    .Bm9c8--1XKs-,
+    .Bm9c8--1XKs-::picker(select) {
       -webkit-appearance: base-select;
               appearance: base-select;
     }
 
     /* Dropdown styling + transitions */
-    .-hmXAsAfH9U-::picker(select) {
+    .Bm9c8--1XKs-::picker(select) {
       box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
       box-shadow: var(--shadow-base);
       margin-top: 8px;
@@ -8044,24 +8044,24 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
         -webkit-transform var(--timing-base) ease-out;
     }
 
-    .-hmXAsAfH9U-::picker-icon {
+    .Bm9c8--1XKs-::picker-icon {
       display: none;
     }
 
-    .-hmXAsAfH9U-:not(:open)::picker(select) {
+    .Bm9c8--1XKs-:not(:open)::picker(select) {
       opacity: 0;
       -webkit-transform: scale(0.95);
               transform: scale(0.95);
     }
 
-    .-hmXAsAfH9U-:open::picker(select) {
+    .Bm9c8--1XKs-:open::picker(select) {
       opacity: 1;
       -webkit-transform: translateY(0) scale(1);
               transform: translateY(0) scale(1);
     }
 
     /* options */
-    .-hmXAsAfH9U- option {
+    .Bm9c8--1XKs- option {
       padding: 4px 0;
       padding: var(--space-smaller) 0;
       color: hsl(198, 35%, 21%);
@@ -8071,16 +8071,16 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       cursor: pointer;
     }
 
-    .-hmXAsAfH9U- option:hover,
-    .-hmXAsAfH9U- option:focus,
-    .-hmXAsAfH9U- option:focus-visible,
-    .-hmXAsAfH9U- option:checked {
+    .Bm9c8--1XKs- option:hover,
+    .Bm9c8--1XKs- option:focus,
+    .Bm9c8--1XKs- option:focus-visible,
+    .Bm9c8--1XKs- option:checked {
       background-color: hsl(43, 18%, 92%);
       background-color: var(--color-surface--hover);
     }
 
     /* optgroup headers */
-    .-hmXAsAfH9U- optgroup {
+    .Bm9c8--1XKs- optgroup {
       padding: 8px 0 0 0;
       padding: var(--space-small) 0 0 0;
       color: hsl(197, 90%, 12%);
@@ -8095,36 +8095,36 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
     }
 
     /* Divider directly under the group label */
-    .-hmXAsAfH9U- optgroup option:first-child {
+    .Bm9c8--1XKs- optgroup option:first-child {
       border-top: 1px solid hsl(200, 13%, 87%);
       border-top: var(--border-base) solid var(--color-border);
     }
 
     /* Disabled groups and their options */
-    .-hmXAsAfH9U- optgroup[disabled] {
+    .Bm9c8--1XKs- optgroup[disabled] {
       color: hsl(0, 0%, 58%);
       color: var(--color-disabled);
     }
-    .-hmXAsAfH9U- optgroup[disabled] option,
-    .-hmXAsAfH9U- option[disabled] {
+    .Bm9c8--1XKs- optgroup[disabled] option,
+    .Bm9c8--1XKs- option[disabled] {
       color: hsl(0, 0%, 58%);
       color: var(--color-disabled);
       cursor: default;
     }
 
-    .-hmXAsAfH9U- optgroup[disabled] option:focus,
-    .-hmXAsAfH9U- optgroup[disabled] option:focus-visible,
-    .-hmXAsAfH9U- optgroup[disabled] option:checked,
-    .-hmXAsAfH9U- optgroup[disabled] option:hover,
-    .-hmXAsAfH9U- option[disabled]:focus,
-    .-hmXAsAfH9U- option[disabled]:focus-visible,
-    .-hmXAsAfH9U- option[disabled]:checked,
-    .-hmXAsAfH9U- option[disabled]:hover {
+    .Bm9c8--1XKs- optgroup[disabled] option:focus,
+    .Bm9c8--1XKs- optgroup[disabled] option:focus-visible,
+    .Bm9c8--1XKs- optgroup[disabled] option:checked,
+    .Bm9c8--1XKs- optgroup[disabled] option:hover,
+    .Bm9c8--1XKs- option[disabled]:focus,
+    .Bm9c8--1XKs- option[disabled]:focus-visible,
+    .Bm9c8--1XKs- option[disabled]:checked,
+    .Bm9c8--1XKs- option[disabled]:hover {
       background-color: transparent;
     }
 
     /* Animate the chevron rotation for the provided postfix class */
-    .-hmXAsAfH9U- + ._5ST4c1fXDYU- svg {
+    .Bm9c8--1XKs- + .LBiZF2RZlxc- svg {
       transition: -webkit-transform 100ms;
       transition: -webkit-transform var(--timing-quick);
       transition: transform 100ms;
@@ -8135,7 +8135,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
               transform-origin: 50% 50%;
     }
     /* Rotate the postfix chevron when the select is open */
-    .-hmXAsAfH9U-:open + ._5ST4c1fXDYU- svg {
+    .Bm9c8--1XKs-:open + .LBiZF2RZlxc- svg {
       -webkit-transform: rotate(180deg);
               transform: rotate(180deg);
     }

package/dist/utils/meta/meta.json

@@ -126,6 +126,9 @@
     "InputText",
     "InputTime",
     "InputValidation",
+    "LegacySelect",
+    "LegacySelect.Option",
+    "LegacySelect.OptionGroup",
     "LightBox",
     "LightBox.Background",
     "LightBox.Caption",
@@ -201,9 +204,6 @@
     "SegmentedControlContext.Consumer",
     "SegmentedControlContext.Provider",
     "SegmentedControlProvider",
-    "Select",
-    "Select.Option",
-    "Select.OptionGroup",
     "SideDrawer",
     "SideDrawer.Actions",
     "SideDrawer.BackButton",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.17.0",
+  "version": "8.17.1-rename-sel-3e22d86.4+3e22d863",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -345,10 +345,10 @@
       "import": "./dist/ResponsiveSwitcher/index.mjs",
       "require": "./dist/ResponsiveSwitcher/index.cjs"
     },
-    "./Select": {
-      "types": "./dist/Select/index.d.ts",
-      "import": "./dist/Select/index.mjs",
-      "require": "./dist/Select/index.cjs"
+    "./LegacySelect": {
+      "types": "./dist/LegacySelect/index.d.ts",
+      "import": "./dist/LegacySelect/index.mjs",
+      "require": "./dist/LegacySelect/index.cjs"
     },
     "./SideDrawer": {
       "types": "./dist/SideDrawer/index.d.ts",
@@ -546,5 +546,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "202afd57218f0140cd2cf489742f99afd22e6b2c"
+  "gitHead": "3e22d863d7c9a143b1ded63e8b02868e84925501"
 }

package/Select.d.ts

@@ -1 +0,0 @@
-export * from "./dist/Select";

package/dist/Select/Select.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-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/index.d.ts

@@ -1,3 +0,0 @@
-export { Option } from "./Option";
-export { Select } from "./Select";
-export type { SelectProps } from "./Select.types";