@jobber/components 2.86.0 → 2.86.2

package/dist/RecurringSelect/types.d.ts

@@ -1,65 +1,65 @@
-export declare enum WeekDay {
-    Sunday = 0,
-    Monday = 1,
-    Tuesday = 2,
-    Wednesday = 3,
-    Thursday = 4,
-    Friday = 5,
-    Saturday = 6
-}
-export declare type DayOfMonth = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | "LAST";
-export declare enum DurationPeriod {
-    Day = "Day",
-    Week = "Week",
-    DayOfMonth = "DayOfMonth",
-    WeekDayOfMonth = "WeekDayOfMonth",
-    Year = "Year",
-    Visit = "Visit"
-}
-export interface RecurrenceRuleDay {
-    type: DurationPeriod.Day;
-}
-export interface RecurrenceRuleWeek {
-    type: DurationPeriod.Week;
-    weekDays: Set<WeekDay>;
-}
-export interface RecurrenceRuleYear {
-    type: DurationPeriod.Year;
-}
-export interface RecurrenceRuleDayOfMonth {
-    type: DurationPeriod.DayOfMonth;
-    date: Set<DayOfMonth>;
-}
-export interface RecurrenceRuleWeekDayOfMonth {
-    type: DurationPeriod.WeekDayOfMonth;
-    dayOfWeek: [Set<WeekDay>, Set<WeekDay>, Set<WeekDay>, Set<WeekDay>];
-}
-export declare type RecurrenceRule = {
-    interval: number;
-} & (RecurrenceRuleDay | RecurrenceRuleWeek | RecurrenceRuleYear | RecurrenceRuleDayOfMonth | RecurrenceRuleWeekDayOfMonth);
-export interface InitialStateMap {
-    [DurationPeriod.Day]: {
-        type: DurationPeriod.Day;
-    };
-    [DurationPeriod.Week]: {
-        type: DurationPeriod.Week;
-        weekDays: Set<WeekDay>;
-    };
-    [DurationPeriod.DayOfMonth]: {
-        type: DurationPeriod.DayOfMonth;
-        date: Set<DayOfMonth>;
-    };
-    [DurationPeriod.WeekDayOfMonth]: {
-        type: DurationPeriod.WeekDayOfMonth;
-        dayOfWeek: [Set<WeekDay>, Set<WeekDay>, Set<WeekDay>, Set<WeekDay>];
-    };
-    [DurationPeriod.Year]: {
-        type: DurationPeriod.Year;
-    };
-}
-export declare const typeInitialStateMap: InitialStateMap;
-export declare const isMonthly: (rule: RecurrenceRule) => rule is ({
-    interval: number;
-} & RecurrenceRuleDayOfMonth) | ({
-    interval: number;
-} & RecurrenceRuleWeekDayOfMonth);
+export declare enum WeekDay {
+    Sunday = 0,
+    Monday = 1,
+    Tuesday = 2,
+    Wednesday = 3,
+    Thursday = 4,
+    Friday = 5,
+    Saturday = 6
+}
+export declare type DayOfMonth = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | "LAST";
+export declare enum DurationPeriod {
+    Day = "Day",
+    Week = "Week",
+    DayOfMonth = "DayOfMonth",
+    WeekDayOfMonth = "WeekDayOfMonth",
+    Year = "Year",
+    Visit = "Visit"
+}
+export interface RecurrenceRuleDay {
+    type: DurationPeriod.Day;
+}
+export interface RecurrenceRuleWeek {
+    type: DurationPeriod.Week;
+    weekDays: Set<WeekDay>;
+}
+export interface RecurrenceRuleYear {
+    type: DurationPeriod.Year;
+}
+export interface RecurrenceRuleDayOfMonth {
+    type: DurationPeriod.DayOfMonth;
+    date: Set<DayOfMonth>;
+}
+export interface RecurrenceRuleWeekDayOfMonth {
+    type: DurationPeriod.WeekDayOfMonth;
+    dayOfWeek: [Set<WeekDay>, Set<WeekDay>, Set<WeekDay>, Set<WeekDay>];
+}
+export declare type RecurrenceRule = {
+    interval: number;
+} & (RecurrenceRuleDay | RecurrenceRuleWeek | RecurrenceRuleYear | RecurrenceRuleDayOfMonth | RecurrenceRuleWeekDayOfMonth);
+export interface InitialStateMap {
+    [DurationPeriod.Day]: {
+        type: DurationPeriod.Day;
+    };
+    [DurationPeriod.Week]: {
+        type: DurationPeriod.Week;
+        weekDays: Set<WeekDay>;
+    };
+    [DurationPeriod.DayOfMonth]: {
+        type: DurationPeriod.DayOfMonth;
+        date: Set<DayOfMonth>;
+    };
+    [DurationPeriod.WeekDayOfMonth]: {
+        type: DurationPeriod.WeekDayOfMonth;
+        dayOfWeek: [Set<WeekDay>, Set<WeekDay>, Set<WeekDay>, Set<WeekDay>];
+    };
+    [DurationPeriod.Year]: {
+        type: DurationPeriod.Year;
+    };
+}
+export declare const typeInitialStateMap: InitialStateMap;
+export declare const isMonthly: (rule: RecurrenceRule) => rule is ({
+    interval: number;
+} & RecurrenceRuleDayOfMonth) | ({
+    interval: number;
+} & RecurrenceRuleWeekDayOfMonth);

package/dist/Select/Option.d.ts

@@ -1,17 +1,17 @@
-import { ReactNode } from "react";
-interface InputSelectProps {
-    readonly children?: ReactNode;
-    readonly disabled?: boolean;
-    /**
-     * The content of this attribute represents the value to be submitted with the
-     * form, should this option be selected.
-     */
-    readonly value?: string;
-}
-declare function SelectOption({ children, disabled, value }: InputSelectProps): JSX.Element;
-/**
- * Whatever mechanism that docz is using to parse out props fails if this
- * component is called Option internally. We have opened an issue with them
- * to find out more information.
- */
-export { SelectOption as Option };
+import { ReactNode } from "react";
+interface InputSelectProps {
+    readonly children?: ReactNode;
+    readonly disabled?: boolean;
+    /**
+     * The content of this attribute represents the value to be submitted with the
+     * form, should this option be selected.
+     */
+    readonly value?: string;
+}
+declare function SelectOption({ children, disabled, value }: InputSelectProps): JSX.Element;
+/**
+ * Whatever mechanism that docz is using to parse out props fails if this
+ * component is called Option internally. We have opened an issue with them
+ * to find out more information.
+ */
+export { SelectOption as Option };

package/dist/Select/Select.d.ts

@@ -1,10 +1,10 @@
-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.
- */
-declare type SelectProps = Pick<FormFieldProps, Exclude<keyof FormFieldProps, "type" | "rows" | "keyboard" | "actionsRef">>;
-export declare function Select(props: SelectProps): JSX.Element;
-export {};
+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.
+ */
+declare type SelectProps = Pick<FormFieldProps, Exclude<keyof FormFieldProps, "type" | "rows" | "keyboard" | "actionsRef">>;
+export declare function Select(props: SelectProps): JSX.Element;
+export {};

package/dist/Select/index.d.ts

@@ -1,2 +1,2 @@
-export { Select } from "./Select";
-export { Option } from "./Option";
+export { Select } from "./Select";
+export { Option } from "./Option";

package/dist/Select/index.js

@@ -2,33 +2,34 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var __chunk_1 = require('../chunk-b67af3cb.js');
+var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
-var React__default = _interopDefault(React);
-require('../chunk-17e02351.js');
-require('classnames');
-require('../Typography/index.js');
-require('../Text/index.js');
-require('@jobber/design');
-require('../Icon/index.js');
+var FormField = require('../FormField-a92c7bac.js');
 require('uuid');
 require('react-hook-form');
-var index$4 = require('../FormField/index.js');
+require('../style-inject.es-dcee06b6.js');
+require('classnames');
+require('../Button-5b2f1636.js');
 require('react-router-dom');
-require('../Button/index.js');
+require('../Icon-d5ad1a6d.js');
+require('@jobber/design');
+require('../Typography-7e542a72.js');
+require('../Text-9bc093e9.js');
+require('../InputValidation-24d3621a.js');
 require('framer-motion');
-require('../InputValidation/index.js');
-require('../Spinner/index.js');
+require('../Spinner-18d3dee6.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function Select(props) {
-    return React__default.createElement(index$4.FormField, __chunk_1.__assign({ type: "select" }, props));
+function Select(props) {
+    return React__default["default"].createElement(FormField.FormField, tslib_es6.__assign({ type: "select" }, props));
 }
 
-function SelectOption(_a) {
-    var children = _a.children, disabled = _a.disabled, value = _a.value;
-    return (React__default.createElement("option", { disabled: disabled, value: value }, children));
+function SelectOption(_a) {
+    var children = _a.children, disabled = _a.disabled, value = _a.value;
+    return (React__default["default"].createElement("option", { disabled: disabled, value: value }, children));
 }
 
 exports.Option = SelectOption;

package/dist/Spinner/Spinner.d.ts

@@ -1,15 +1,15 @@
-interface SpinnerProps {
-    /**
-     * Specifies the size of the spinner
-     *
-     * @default "base"
-     */
-    readonly size?: "small" | "base";
-    /**
-     * Spinner becomes an inline element when true,
-     * otherwise it is a block element
-     */
-    readonly inline?: boolean;
-}
-export declare function Spinner({ size, inline }: SpinnerProps): JSX.Element;
-export {};
+interface SpinnerProps {
+    /**
+     * Specifies the size of the spinner
+     *
+     * @default "base"
+     */
+    readonly size?: "small" | "base";
+    /**
+     * Spinner becomes an inline element when true,
+     * otherwise it is a block element
+     */
+    readonly inline?: boolean;
+}
+export declare function Spinner({ size, inline }: SpinnerProps): JSX.Element;
+export {};

package/dist/Spinner/index.d.ts

@@ -1 +1 @@
-export { Spinner } from "./Spinner";
+export { Spinner } from "./Spinner";

package/dist/Spinner/index.js

@@ -2,25 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+var Spinner = require('../Spinner-18d3dee6.js');
+require('react');
+require('classnames');
+require('../style-inject.es-dcee06b6.js');
 
-var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
 
-var css = "._2Vxgrs4a5osOKmp9b0i7ud {\n  width: var(--space-larger);\n  height: var(--space-larger);\n  box-shadow: 0px 0px 4px 2px rgba(1, 41, 57, 0.4);\n  border: solid var(--color-blue--light);\n  border-top-color: var(--color-white);\n  border-width: calc(var(--space-small) * 0.75);\n  border-radius: var(--radius-circle);\n  background-color: var(--color-blue--lightest);\n  -webkit-animation-duration: 1s;\n          animation-duration: 1s;\n  -webkit-animation-iteration-count: infinite;\n          animation-iteration-count: infinite;\n  -webkit-animation-name: _3bn_eCsItKh7HS1dEQIERv;\n          animation-name: _3bn_eCsItKh7HS1dEQIERv;\n  -webkit-animation-timing-function: linear;\n          animation-timing-function: linear;\n  will-change: transform;\n}\n\n@-webkit-keyframes _3bn_eCsItKh7HS1dEQIERv {\n  0% {\n    -webkit-transform: rotate(0deg);\n            transform: rotate(0deg);\n  }\n\n  100% {\n    -webkit-transform: rotate(359deg);\n            transform: rotate(359deg);\n  }\n}\n\n@keyframes _3bn_eCsItKh7HS1dEQIERv {\n  0% {\n    -webkit-transform: rotate(0deg);\n            transform: rotate(0deg);\n  }\n\n  100% {\n    -webkit-transform: rotate(359deg);\n            transform: rotate(359deg);\n  }\n}\n\n._3uMtJrFH9VsqhWvHLkG1SQ {\n  width: var(--space-base);\n  height: var(--space-base);\n  border-width: var(--space-smaller);\n}\n\n._20N4X28gVsanpe8jhUzYxj {\n  display: inline-block;\n  margin-top: calc(var(--space-smaller) * -1);\n  vertical-align: middle;\n}\n";
-var styles = {"spinner":"_2Vxgrs4a5osOKmp9b0i7ud","animationSpin":"_3bn_eCsItKh7HS1dEQIERv","small":"_3uMtJrFH9VsqhWvHLkG1SQ","inline-left":"_20N4X28gVsanpe8jhUzYxj","inline-right":"_20N4X28gVsanpe8jhUzYxj","inline":"_20N4X28gVsanpe8jhUzYxj"};
-__chunk_2.styleInject(css);
 
-function Spinner(_a) {
-    var _b;
-    var _c = _a.size, size = _c === void 0 ? "base" : _c, inline = _a.inline;
-    var spinnerStyles = classnames(styles.spinner, (_b = {},
-        _b[styles.small] = size === "small",
-        _b[styles.inline] = inline,
-        _b));
-    return (React__default.createElement("div", { className: spinnerStyles, role: "alert", "aria-busy": true, "aria-label": "loading" }));
-}
-
-exports.Spinner = Spinner;
+exports.Spinner = Spinner.Spinner;

package/dist/Spinner-18d3dee6.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var styleInject_es = require('./style-inject.es-dcee06b6.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css = "._2Vxgrs4a5osOKmp9b0i7ud {\n  width: var(--space-larger);\n  height: var(--space-larger);\n  box-shadow: 0px 0px 4px 2px rgba(1, 41, 57, 0.4);\n  border: solid var(--color-blue--light);\n  border-top-color: var(--color-white);\n  border-width: calc(var(--space-small) * 0.75);\n  border-radius: var(--radius-circle);\n  background-color: var(--color-blue--lightest);\n  -webkit-animation-duration: 1s;\n          animation-duration: 1s;\n  -webkit-animation-iteration-count: infinite;\n          animation-iteration-count: infinite;\n  -webkit-animation-name: _3bn_eCsItKh7HS1dEQIERv;\n          animation-name: _3bn_eCsItKh7HS1dEQIERv;\n  -webkit-animation-timing-function: linear;\n          animation-timing-function: linear;\n  will-change: transform;\n}\n\n@-webkit-keyframes _3bn_eCsItKh7HS1dEQIERv {\n  0% {\n    -webkit-transform: rotate(0deg);\n            transform: rotate(0deg);\n  }\n\n  100% {\n    -webkit-transform: rotate(359deg);\n            transform: rotate(359deg);\n  }\n}\n\n@keyframes _3bn_eCsItKh7HS1dEQIERv {\n  0% {\n    -webkit-transform: rotate(0deg);\n            transform: rotate(0deg);\n  }\n\n  100% {\n    -webkit-transform: rotate(359deg);\n            transform: rotate(359deg);\n  }\n}\n\n._3uMtJrFH9VsqhWvHLkG1SQ {\n  width: var(--space-base);\n  height: var(--space-base);\n  border-width: var(--space-smaller);\n}\n\n._20N4X28gVsanpe8jhUzYxj {\n  display: inline-block;\n  margin-top: calc(var(--space-smaller) * -1);\n  vertical-align: middle;\n}\n";
+var styles = {"spinner":"_2Vxgrs4a5osOKmp9b0i7ud","animationSpin":"_3bn_eCsItKh7HS1dEQIERv","small":"_3uMtJrFH9VsqhWvHLkG1SQ","inline-left":"_20N4X28gVsanpe8jhUzYxj","inline-right":"_20N4X28gVsanpe8jhUzYxj","inline":"_20N4X28gVsanpe8jhUzYxj"};
+styleInject_es.styleInject(css);
+
+function Spinner(_a) {
+    var _b;
+    var _c = _a.size, size = _c === void 0 ? "base" : _c, inline = _a.inline;
+    var spinnerStyles = classnames__default["default"](styles.spinner, (_b = {},
+        _b[styles.small] = size === "small",
+        _b[styles.inline] = inline,
+        _b));
+    return (React__default["default"].createElement("div", { className: spinnerStyles, role: "alert", "aria-busy": true, "aria-label": "loading" }));
+}
+
+exports.Spinner = Spinner;

package/dist/StatusLabel/StatusLabel.d.ts

@@ -1,25 +1,25 @@
-export declare type StatusType = "success" | "warning" | "critical" | "inactive" | "informative";
-export interface StatusLabelType {
-    readonly statusLabel: string;
-    readonly statusType?: StatusType;
-}
-interface StatusLabelProps {
-    /**
-     * Text to display
-     */
-    readonly label: string;
-    /**
-     * Alignment of label
-     *
-     * @default "start"
-     */
-    readonly alignment?: "start" | "end";
-    /**
-     * Status color of the indicator beside text
-     *
-     * @default "inactive"
-     */
-    readonly status: StatusType;
-}
-export declare function StatusLabel({ label, alignment, status, }: StatusLabelProps): JSX.Element;
-export {};
+export declare type StatusType = "success" | "warning" | "critical" | "inactive" | "informative";
+export interface StatusLabelType {
+    readonly statusLabel: string;
+    readonly statusType?: StatusType;
+}
+interface StatusLabelProps {
+    /**
+     * Text to display
+     */
+    readonly label: string;
+    /**
+     * Alignment of label
+     *
+     * @default "start"
+     */
+    readonly alignment?: "start" | "end";
+    /**
+     * Status color of the indicator beside text
+     *
+     * @default "inactive"
+     */
+    readonly status: StatusType;
+}
+export declare function StatusLabel({ label, alignment, status, }: StatusLabelProps): JSX.Element;
+export {};

package/dist/StatusLabel/index.d.ts

@@ -1 +1 @@
-export { StatusLabel } from "./StatusLabel";
+export { StatusLabel } from "./StatusLabel";

package/dist/StatusLabel/index.js

@@ -2,30 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-require('../chunk-b67af3cb.js');
 var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
-require('../Typography/index.js');
-var index$1 = require('../Text/index.js');
+var classnames = require('classnames');
+var styleInject_es = require('../style-inject.es-dcee06b6.js');
+var Text = require('../Text-9bc093e9.js');
+require('../Typography-7e542a72.js');
+require('../tslib.es6-5b50eb8e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 var css = ":root {\n  --statusLabel-icon-diameter: calc(var(--space-base) - var(--space-smaller));\n}\n\n.NUUO4mR41Qn5Pf0pzjhZe {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n._2XU8xQD0q92o9P2Ej5EdwP {\n  width: calc(var(--space-base) - var(--space-smaller));\n  width: calc(var(--space-base) - var(--space-smaller));\n  width: var(--statusLabel-icon-diameter);\n  height: calc(var(--space-base) - var(--space-smaller));\n  height: calc(var(--space-base) - var(--space-smaller));\n  height: var(--statusLabel-icon-diameter);\n  margin-top: var(--space-smallest);\n  border-radius: var(--radius-base);\n  background-color: var(--color-success);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n}\n\n._3eQHL9hZlneMfEoGaF0dDv {\n  -ms-flex-direction: row-reverse;\n      flex-direction: row-reverse;\n}\n";
 var styles = {"statusLabelRow":"NUUO4mR41Qn5Pf0pzjhZe","statusIndicator":"_2XU8xQD0q92o9P2Ej5EdwP","labelTextEndAligned":"_3eQHL9hZlneMfEoGaF0dDv"};
-__chunk_2.styleInject(css);
+styleInject_es.styleInject(css);
 
-function StatusLabel(_a) {
-    var label = _a.label, _b = _a.alignment, alignment = _b === void 0 ? "start" : _b, _c = _a.status, status = _c === void 0 ? "inactive" : _c;
-    var containerClassNames = classnames(styles.statusLabelRow, alignment === "end" && styles.labelTextEndAligned);
-    return (React__default.createElement("div", { role: "status", className: containerClassNames },
-        React__default.createElement(StatusLabelIcon, { status: status }),
-        React__default.createElement(index$1.Text, { size: "small", align: alignment }, label)));
-}
-function StatusLabelIcon(_a) {
-    var status = _a.status;
-    return (React__default.createElement("div", { style: { backgroundColor: "var(--color-" + status }, className: styles.statusIndicator }));
+function StatusLabel(_a) {
+    var label = _a.label, _b = _a.alignment, alignment = _b === void 0 ? "start" : _b, _c = _a.status, status = _c === void 0 ? "inactive" : _c;
+    var containerClassNames = classnames__default["default"](styles.statusLabelRow, alignment === "end" && styles.labelTextEndAligned);
+    return (React__default["default"].createElement("div", { role: "status", className: containerClassNames },
+        React__default["default"].createElement(StatusLabelIcon, { status: status }),
+        React__default["default"].createElement(Text.Text, { size: "small", align: alignment }, label)));
+}
+function StatusLabelIcon(_a) {
+    var status = _a.status;
+    return (React__default["default"].createElement("div", { style: { backgroundColor: "var(--color-" + status }, className: styles.statusIndicator }));
 }
 
 exports.StatusLabel = StatusLabel;

package/dist/Switch/Switch.d.ts

@@ -1,14 +1,14 @@
-interface SwitchProps {
-    readonly value?: boolean;
-    /**
-     * Adds a name for the hidden input and an ID so a label can be used to
-     * describe the switch instead of an aria-label. This prevents screen readers
-     * from reading the label twice
-     */
-    readonly name?: string;
-    readonly ariaLabel?: string;
-    readonly disabled?: boolean;
-    onChange?(newValue: boolean): void;
-}
-export declare function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, }: SwitchProps): JSX.Element;
-export {};
+interface SwitchProps {
+    readonly value?: boolean;
+    /**
+     * Adds a name for the hidden input and an ID so a label can be used to
+     * describe the switch instead of an aria-label. This prevents screen readers
+     * from reading the label twice
+     */
+    readonly name?: string;
+    readonly ariaLabel?: string;
+    readonly disabled?: boolean;
+    onChange?(newValue: boolean): void;
+}
+export declare function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, }: SwitchProps): JSX.Element;
+export {};

package/dist/Switch/index.d.ts

@@ -1 +1 @@
-export { Switch } from "./Switch";
+export { Switch } from "./Switch";

package/dist/Switch/index.js

@@ -2,59 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+var Switch = require('../Switch-d2bec677.js');
+require('../tslib.es6-5b50eb8e.js');
+require('react');
+require('classnames');
+require('../style-inject.es-dcee06b6.js');
+require('../Typography-7e542a72.js');
 
-var __chunk_1 = require('../chunk-b67af3cb.js');
-var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
-var index = require('../Typography/index.js');
 
-var css = ":root {\n  --switch--pipSize: calc(var(--space-base) * 1.875);\n  --switch--labelWidth: calc(var(--switch--pipSize) * 1.3);\n  --switch--borderOffset: calc(var(--border-base) * 2);\n}\n\n._1TYiN0KipS0HguS_tKWfjN,\n._1TYiN0KipS0HguS_tKWfjN * {\n  box-sizing: border-box;\n  transition: all var(--timing-base);\n}\n\n._1TYiN0KipS0HguS_tKWfjN {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  width: calc(calc(calc(var(--space-base) * 1.875) * 1.3) + calc(var(--space-base) * 1.875));\n  width: calc(calc(calc(var(--space-base) * 1.875) * 1.3) + calc(var(--space-base) * 1.875));\n  width: calc(var(--switch--labelWidth) + var(--switch--pipSize));\n  padding: 0;\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(var(--space-base) * 1.875);\n  border-radius: calc(var(--space-base) * 1.875);\n  border-radius: var(--switch--pipSize);\n  overflow: hidden;\n  line-height: normal;\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n._1TYiN0KipS0HguS_tKWfjN:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n._2FTUgoy1jHHC6Zp3jZiFem {\n  border-color: var(--color-interactive);\n  background-color: var(--color-interactive);\n}\n\n._17OASjesGo_G7ojFH6iMvI {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  margin-left: calc(-1 * calc(calc(var(--space-base) * 1.875) * 1.3));\n  margin-left: calc(-1 * calc(calc(var(--space-base) * 1.875) * 1.3));\n  margin-left: calc(-1 * var(--switch--labelWidth));\n  pointer-events: none;\n  -ms-flex: 1 1 100%;\n      flex: 1 1 100%;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._2FTUgoy1jHHC6Zp3jZiFem ._17OASjesGo_G7ojFH6iMvI {\n  margin-left: calc(-1 * calc(var(--border-base) * 2));\n  margin-left: calc(-1 * calc(var(--border-base) * 2));\n  margin-left: calc(-1 * var(--switch--borderOffset));\n}\n\n._2QoMYBKIeOc4fkTMpeJ-0Y {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  min-width: calc(calc(var(--space-base) * 1.875) * 1.3);\n  min-width: calc(calc(var(--space-base) * 1.875) * 1.3);\n  min-width: var(--switch--labelWidth);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  pointer-events: none;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n._2QoMYBKIeOc4fkTMpeJ-0Y:first-of-type {\n  padding-left: var(--space-small);\n}\n\n._2QoMYBKIeOc4fkTMpeJ-0Y:last-of-type {\n  padding-right: var(--space-small);\n}\n\n.JsY6cDqLe8d_25vumz97W {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  width: calc(var(--space-base) * 1.875);\n  width: calc(var(--space-base) * 1.875);\n  width: var(--switch--pipSize);\n  height: calc(var(--space-base) * 1.875);\n  height: calc(var(--space-base) * 1.875);\n  height: var(--switch--pipSize);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-circle);\n  background-color: var(--color-surface);\n}\n\n._2FTUgoy1jHHC6Zp3jZiFem .JsY6cDqLe8d_25vumz97W {\n  border-color: var(--color-green);\n}\n\n._3uDSBuknYCWotuDOq6jYUD {\n  border-color: var(--color-disabled--secondary);\n  background-color: var(--color-surface--background);\n  cursor: not-allowed;\n}\n\n._3uDSBuknYCWotuDOq6jYUD .JsY6cDqLe8d_25vumz97W {\n  border-color: var(--color-disabled--secondary);\n}\n";
-var styles = {"track":"_1TYiN0KipS0HguS_tKWfjN","isChecked":"_2FTUgoy1jHHC6Zp3jZiFem","toggle":"_17OASjesGo_G7ojFH6iMvI","label":"_2QoMYBKIeOc4fkTMpeJ-0Y","pip":"JsY6cDqLe8d_25vumz97W","disabled":"_3uDSBuknYCWotuDOq6jYUD"};
-__chunk_2.styleInject(css);
 
-function Switch(_a) {
-    var _b;
-    var providedValue = _a.value, ariaLabel = _a.ariaLabel, name = _a.name, disabled = _a.disabled, onChange = _a.onChange;
-    var _c = __chunk_1.__read(React.useState(false), 2), statefulValue = _c[0], setValue = _c[1];
-    var value = providedValue != undefined ? providedValue : statefulValue;
-    var toggleSwitch = function () {
-        if (disabled) {
-            return;
-        }
-        var newValue = !value;
-        onChange && onChange(newValue);
-        if (providedValue == undefined) {
-            setValue(newValue);
-        }
-    };
-    var className = classnames(styles.track, (_b = {},
-        _b[styles.isChecked] = value,
-        _b[styles.disabled] = disabled,
-        _b));
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
-            React__default.createElement("span", { className: styles.toggle },
-                React__default.createElement(Label, { as: "On", disabled: disabled }),
-                React__default.createElement("span", { className: styles.pip }),
-                React__default.createElement(Label, { as: "Off", disabled: disabled }))),
-        React__default.createElement("input", { name: name, type: "hidden", value: String(value) })));
-}
-function Label(_a) {
-    var as = _a.as, disabled = _a.disabled;
-    var getTextColor = function () {
-        if (disabled) {
-            return "grey";
-        }
-        else if (as === "On") {
-            return "white";
-        }
-        return "greyBlue";
-    };
-    return (React__default.createElement("span", { className: styles.label },
-        React__default.createElement(index.Typography, { element: "span", textColor: getTextColor(), size: "small", fontWeight: "bold", textCase: "uppercase" }, as)));
-}
-
-exports.Switch = Switch;
+exports.Switch = Switch.Switch;

package/dist/Switch-d2bec677.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
+var React = require('react');
+var classnames = require('classnames');
+var styleInject_es = require('./style-inject.es-dcee06b6.js');
+var Typography = require('./Typography-7e542a72.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css = ":root {\n  --switch--pipSize: calc(var(--space-base) * 1.875);\n  --switch--labelWidth: calc(var(--switch--pipSize) * 1.3);\n  --switch--borderOffset: calc(var(--border-base) * 2);\n}\n\n._1TYiN0KipS0HguS_tKWfjN,\n._1TYiN0KipS0HguS_tKWfjN * {\n  box-sizing: border-box;\n  transition: all var(--timing-base);\n}\n\n._1TYiN0KipS0HguS_tKWfjN {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  width: calc(calc(calc(var(--space-base) * 1.875) * 1.3) + calc(var(--space-base) * 1.875));\n  width: calc(calc(calc(var(--space-base) * 1.875) * 1.3) + calc(var(--space-base) * 1.875));\n  width: calc(var(--switch--labelWidth) + var(--switch--pipSize));\n  padding: 0;\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(var(--space-base) * 1.875);\n  border-radius: calc(var(--space-base) * 1.875);\n  border-radius: var(--switch--pipSize);\n  overflow: hidden;\n  line-height: normal;\n  background-color: var(--color-surface--background);\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n._1TYiN0KipS0HguS_tKWfjN:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n._2FTUgoy1jHHC6Zp3jZiFem {\n  border-color: var(--color-interactive);\n  background-color: var(--color-interactive);\n}\n\n._17OASjesGo_G7ojFH6iMvI {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  margin-left: calc(-1 * calc(calc(var(--space-base) * 1.875) * 1.3));\n  margin-left: calc(-1 * calc(calc(var(--space-base) * 1.875) * 1.3));\n  margin-left: calc(-1 * var(--switch--labelWidth));\n  pointer-events: none;\n  -ms-flex: 1 1 100%;\n      flex: 1 1 100%;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._2FTUgoy1jHHC6Zp3jZiFem ._17OASjesGo_G7ojFH6iMvI {\n  margin-left: calc(-1 * calc(var(--border-base) * 2));\n  margin-left: calc(-1 * calc(var(--border-base) * 2));\n  margin-left: calc(-1 * var(--switch--borderOffset));\n}\n\n._2QoMYBKIeOc4fkTMpeJ-0Y {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  min-width: calc(calc(var(--space-base) * 1.875) * 1.3);\n  min-width: calc(calc(var(--space-base) * 1.875) * 1.3);\n  min-width: var(--switch--labelWidth);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  pointer-events: none;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n._2QoMYBKIeOc4fkTMpeJ-0Y:first-of-type {\n  padding-left: var(--space-small);\n}\n\n._2QoMYBKIeOc4fkTMpeJ-0Y:last-of-type {\n  padding-right: var(--space-small);\n}\n\n.JsY6cDqLe8d_25vumz97W {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  width: calc(var(--space-base) * 1.875);\n  width: calc(var(--space-base) * 1.875);\n  width: var(--switch--pipSize);\n  height: calc(var(--space-base) * 1.875);\n  height: calc(var(--space-base) * 1.875);\n  height: var(--switch--pipSize);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-circle);\n  background-color: var(--color-surface);\n}\n\n._2FTUgoy1jHHC6Zp3jZiFem .JsY6cDqLe8d_25vumz97W {\n  border-color: var(--color-green);\n}\n\n._3uDSBuknYCWotuDOq6jYUD {\n  border-color: var(--color-disabled--secondary);\n  background-color: var(--color-surface--background);\n  cursor: not-allowed;\n}\n\n._3uDSBuknYCWotuDOq6jYUD .JsY6cDqLe8d_25vumz97W {\n  border-color: var(--color-disabled--secondary);\n}\n";
+var styles = {"track":"_1TYiN0KipS0HguS_tKWfjN","isChecked":"_2FTUgoy1jHHC6Zp3jZiFem","toggle":"_17OASjesGo_G7ojFH6iMvI","label":"_2QoMYBKIeOc4fkTMpeJ-0Y","pip":"JsY6cDqLe8d_25vumz97W","disabled":"_3uDSBuknYCWotuDOq6jYUD"};
+styleInject_es.styleInject(css);
+
+function Switch(_a) {
+    var _b;
+    var providedValue = _a.value, ariaLabel = _a.ariaLabel, name = _a.name, disabled = _a.disabled, onChange = _a.onChange;
+    var _c = tslib_es6.__read(React.useState(false), 2), statefulValue = _c[0], setValue = _c[1];
+    var value = providedValue != undefined ? providedValue : statefulValue;
+    var toggleSwitch = function () {
+        if (disabled) {
+            return;
+        }
+        var newValue = !value;
+        onChange && onChange(newValue);
+        if (providedValue == undefined) {
+            setValue(newValue);
+        }
+    };
+    var className = classnames__default["default"](styles.track, (_b = {},
+        _b[styles.isChecked] = value,
+        _b[styles.disabled] = disabled,
+        _b));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
+            React__default["default"].createElement("span", { className: styles.toggle },
+                React__default["default"].createElement(Label, { as: "On", disabled: disabled }),
+                React__default["default"].createElement("span", { className: styles.pip }),
+                React__default["default"].createElement(Label, { as: "Off", disabled: disabled }))),
+        React__default["default"].createElement("input", { name: name, type: "hidden", value: String(value) })));
+}
+function Label(_a) {
+    var as = _a.as, disabled = _a.disabled;
+    var getTextColor = function () {
+        if (disabled) {
+            return "grey";
+        }
+        else if (as === "On") {
+            return "white";
+        }
+        return "greyBlue";
+    };
+    return (React__default["default"].createElement("span", { className: styles.label },
+        React__default["default"].createElement(Typography.Typography, { element: "span", textColor: getTextColor(), size: "small", fontWeight: "bold", textCase: "uppercase" }, as)));
+}
+
+exports.Switch = Switch;