@jobber/components 4.66.0 → 4.66.1-fix-hide-h.6

package/dist/DayOfMonthSelect-BiWvIxWe.js

@@ -0,0 +1,130 @@
+import React, { useId } from 'react';
+import { R as RadioGroup, a as RadioOption } from './RadioGroup-BmRK3oRx.js';
+import { T as Text } from './Text-C3-8gHkD.js';
+
+var styles$3 = {"container":"NfsRidfuJts-"};
+
+var checkboxStyles = {"checkboxWrapper":"GXNuQVAsUqs-","dayCheckboxInput":"PtlN3SI-Atc-","dayCheckbox":"VPZ0Os9TY5k-"};
+
+var WeekDay;
+(function (WeekDay) {
+    WeekDay[WeekDay["Sunday"] = 0] = "Sunday";
+    WeekDay[WeekDay["Monday"] = 1] = "Monday";
+    WeekDay[WeekDay["Tuesday"] = 2] = "Tuesday";
+    WeekDay[WeekDay["Wednesday"] = 3] = "Wednesday";
+    WeekDay[WeekDay["Thursday"] = 4] = "Thursday";
+    WeekDay[WeekDay["Friday"] = 5] = "Friday";
+    WeekDay[WeekDay["Saturday"] = 6] = "Saturday";
+})(WeekDay || (WeekDay = {}));
+var DurationPeriod;
+(function (DurationPeriod) {
+    DurationPeriod["Day"] = "Day";
+    DurationPeriod["Week"] = "Week";
+    DurationPeriod["DayOfMonth"] = "DayOfMonth";
+    DurationPeriod["WeekDayOfMonth"] = "WeekDayOfMonth";
+    DurationPeriod["Year"] = "Year";
+    DurationPeriod["Visit"] = "Visit";
+})(DurationPeriod || (DurationPeriod = {}));
+const typeInitialStateMap = {
+    [DurationPeriod.Day]: {
+        type: DurationPeriod.Day,
+    },
+    [DurationPeriod.Week]: {
+        type: DurationPeriod.Week,
+        weekDays: new Set(),
+    },
+    [DurationPeriod.DayOfMonth]: {
+        type: DurationPeriod.DayOfMonth,
+        date: new Set(),
+    },
+    [DurationPeriod.WeekDayOfMonth]: {
+        type: DurationPeriod.WeekDayOfMonth,
+        dayOfWeek: [
+            new Set(),
+            new Set(),
+            new Set(),
+            new Set(),
+        ],
+    },
+    [DurationPeriod.Year]: {
+        type: DurationPeriod.Year,
+    },
+};
+const isMonthly = (rule) => rule.type === DurationPeriod.WeekDayOfMonth ||
+    rule.type === DurationPeriod.DayOfMonth;
+
+const weekDays = [0, 1, 2, 3, 4, 5, 6];
+function WeeklySelect({ onChange, selectedDays, disabled, }) {
+    const onChangeWeekDays = (event) => {
+        const day = Number(event.currentTarget.value);
+        const next = new Set(Array.from(selectedDays));
+        if (selectedDays.has(day)) {
+            next.delete(day);
+        }
+        else {
+            next.add(day);
+        }
+        onChange(next);
+    };
+    return (React.createElement("div", { className: styles$3.container }, weekDays.map(weekDay => {
+        const isSelected = selectedDays.has(weekDay);
+        const inputId = useId();
+        return (React.createElement("div", { key: `${weekDay}`, className: checkboxStyles.checkboxWrapper },
+            React.createElement("input", { className: checkboxStyles.dayCheckboxInput, disabled: disabled, type: "checkbox", onChange: onChangeWeekDays, id: `weekly-select-${weekDay}${inputId}`, "aria-checked": isSelected, checked: isSelected, value: weekDay }),
+            React.createElement("label", { className: checkboxStyles.dayCheckbox, htmlFor: `weekly-select-${weekDay}${inputId}` }, `${WeekDay[weekDay].substr(0, 1).toUpperCase()}`)));
+    })));
+}
+
+var styles$2 = {"radioContainer":"PW6L4PJe5TY-"};
+
+function MonthlySelect({ disabled, onChange, selectedMonthOption, }) {
+    return (React.createElement("div", { className: styles$2.radioContainer },
+        React.createElement(RadioGroup, { ariaLabel: "Monthly Frequency Selector", onChange: onChange, value: selectedMonthOption },
+            React.createElement(RadioOption, { disabled: disabled, value: DurationPeriod.DayOfMonth, label: "Day of month" }),
+            React.createElement(RadioOption, { disabled: disabled, value: DurationPeriod.WeekDayOfMonth, label: "Day of week" }))));
+}
+
+var styles$1 = {"container":"pqYw6oCVwO8-","parentContainer":"xtCFaHyTmfI-"};
+
+function MonthlyDayOfWeekSelect({ disabled, selectedWeeks, onChange, }) {
+    const orderString = ["1st", "2nd", "3rd", "4th"];
+    return (React.createElement("div", { className: styles$1.parentContainer }, selectedWeeks.map((week, index) => {
+        const onChangeWeek = (weekDay) => {
+            const next = [...selectedWeeks];
+            next.splice(index, 1, weekDay);
+            onChange(next);
+        };
+        return (React.createElement("div", { className: styles$1.container, key: `${index}${week}` },
+            React.createElement(Text, null, `${orderString[index]}`),
+            React.createElement("div", null,
+                React.createElement(WeeklySelect, { disabled: disabled, selectedDays: week, onChange: onChangeWeek }))));
+    })));
+}
+
+var styles = {"container":"dBbFx0Vu16U-"};
+
+const daysInMonth = [...Array.from({ length: 31 }, (_, i) => i + 1), "LAST"];
+function DayOfMonthSelect({ selectedDays, disabled, onChange, }) {
+    return (React.createElement("div", { className: styles.container }, daysInMonth.map(day => {
+        const isSelected = selectedDays.has(day);
+        const inputId = useId();
+        return (React.createElement("div", { key: `${day}`, className: checkboxStyles.checkboxWrapper },
+            React.createElement("input", { className: checkboxStyles.dayCheckboxInput, disabled: disabled, type: "checkbox", id: `${day}-${inputId}`, onChange: handleChangeDayOfMonth, "aria-checked": isSelected, checked: isSelected, value: day }),
+            React.createElement("label", { className: checkboxStyles.dayCheckbox, htmlFor: `${day}-${inputId}` }, `${day === "LAST" ? "Last day" : day}`)));
+    })));
+    function handleChangeDayOfMonth(event) {
+        const day = event.currentTarget.value === "LAST"
+            ? event.currentTarget.value
+            : +event.currentTarget.value;
+        const next = new Set(selectedDays);
+        if (selectedDays.has(day)) {
+            next.delete(day);
+        }
+        else {
+            next.add(day);
+        }
+        onChange(next);
+    }
+}
+
+export { DurationPeriod as D, MonthlySelect as M, WeekDay as W, WeeklySelect as a, MonthlyDayOfWeekSelect as b, DayOfMonthSelect as c, isMonthly as i, typeInitialStateMap as t };

package/dist/DayOfMonthSelect-xX1cSHtJ.js

@@ -0,0 +1,137 @@
+'use strict';
+
+var React = require('react');
+var RadioGroup = require('./RadioGroup-c3Iqj10U.js');
+var Text = require('./Text-CuGgzpie.js');
+
+var styles$3 = {"container":"NfsRidfuJts-"};
+
+var checkboxStyles = {"checkboxWrapper":"GXNuQVAsUqs-","dayCheckboxInput":"PtlN3SI-Atc-","dayCheckbox":"VPZ0Os9TY5k-"};
+
+exports.WeekDay = void 0;
+(function (WeekDay) {
+    WeekDay[WeekDay["Sunday"] = 0] = "Sunday";
+    WeekDay[WeekDay["Monday"] = 1] = "Monday";
+    WeekDay[WeekDay["Tuesday"] = 2] = "Tuesday";
+    WeekDay[WeekDay["Wednesday"] = 3] = "Wednesday";
+    WeekDay[WeekDay["Thursday"] = 4] = "Thursday";
+    WeekDay[WeekDay["Friday"] = 5] = "Friday";
+    WeekDay[WeekDay["Saturday"] = 6] = "Saturday";
+})(exports.WeekDay || (exports.WeekDay = {}));
+exports.DurationPeriod = void 0;
+(function (DurationPeriod) {
+    DurationPeriod["Day"] = "Day";
+    DurationPeriod["Week"] = "Week";
+    DurationPeriod["DayOfMonth"] = "DayOfMonth";
+    DurationPeriod["WeekDayOfMonth"] = "WeekDayOfMonth";
+    DurationPeriod["Year"] = "Year";
+    DurationPeriod["Visit"] = "Visit";
+})(exports.DurationPeriod || (exports.DurationPeriod = {}));
+const typeInitialStateMap = {
+    [exports.DurationPeriod.Day]: {
+        type: exports.DurationPeriod.Day,
+    },
+    [exports.DurationPeriod.Week]: {
+        type: exports.DurationPeriod.Week,
+        weekDays: new Set(),
+    },
+    [exports.DurationPeriod.DayOfMonth]: {
+        type: exports.DurationPeriod.DayOfMonth,
+        date: new Set(),
+    },
+    [exports.DurationPeriod.WeekDayOfMonth]: {
+        type: exports.DurationPeriod.WeekDayOfMonth,
+        dayOfWeek: [
+            new Set(),
+            new Set(),
+            new Set(),
+            new Set(),
+        ],
+    },
+    [exports.DurationPeriod.Year]: {
+        type: exports.DurationPeriod.Year,
+    },
+};
+const isMonthly = (rule) => rule.type === exports.DurationPeriod.WeekDayOfMonth ||
+    rule.type === exports.DurationPeriod.DayOfMonth;
+
+const weekDays = [0, 1, 2, 3, 4, 5, 6];
+function WeeklySelect({ onChange, selectedDays, disabled, }) {
+    const onChangeWeekDays = (event) => {
+        const day = Number(event.currentTarget.value);
+        const next = new Set(Array.from(selectedDays));
+        if (selectedDays.has(day)) {
+            next.delete(day);
+        }
+        else {
+            next.add(day);
+        }
+        onChange(next);
+    };
+    return (React.createElement("div", { className: styles$3.container }, weekDays.map(weekDay => {
+        const isSelected = selectedDays.has(weekDay);
+        const inputId = React.useId();
+        return (React.createElement("div", { key: `${weekDay}`, className: checkboxStyles.checkboxWrapper },
+            React.createElement("input", { className: checkboxStyles.dayCheckboxInput, disabled: disabled, type: "checkbox", onChange: onChangeWeekDays, id: `weekly-select-${weekDay}${inputId}`, "aria-checked": isSelected, checked: isSelected, value: weekDay }),
+            React.createElement("label", { className: checkboxStyles.dayCheckbox, htmlFor: `weekly-select-${weekDay}${inputId}` }, `${exports.WeekDay[weekDay].substr(0, 1).toUpperCase()}`)));
+    })));
+}
+
+var styles$2 = {"radioContainer":"PW6L4PJe5TY-"};
+
+function MonthlySelect({ disabled, onChange, selectedMonthOption, }) {
+    return (React.createElement("div", { className: styles$2.radioContainer },
+        React.createElement(RadioGroup.RadioGroup, { ariaLabel: "Monthly Frequency Selector", onChange: onChange, value: selectedMonthOption },
+            React.createElement(RadioGroup.RadioOption, { disabled: disabled, value: exports.DurationPeriod.DayOfMonth, label: "Day of month" }),
+            React.createElement(RadioGroup.RadioOption, { disabled: disabled, value: exports.DurationPeriod.WeekDayOfMonth, label: "Day of week" }))));
+}
+
+var styles$1 = {"container":"pqYw6oCVwO8-","parentContainer":"xtCFaHyTmfI-"};
+
+function MonthlyDayOfWeekSelect({ disabled, selectedWeeks, onChange, }) {
+    const orderString = ["1st", "2nd", "3rd", "4th"];
+    return (React.createElement("div", { className: styles$1.parentContainer }, selectedWeeks.map((week, index) => {
+        const onChangeWeek = (weekDay) => {
+            const next = [...selectedWeeks];
+            next.splice(index, 1, weekDay);
+            onChange(next);
+        };
+        return (React.createElement("div", { className: styles$1.container, key: `${index}${week}` },
+            React.createElement(Text.Text, null, `${orderString[index]}`),
+            React.createElement("div", null,
+                React.createElement(WeeklySelect, { disabled: disabled, selectedDays: week, onChange: onChangeWeek }))));
+    })));
+}
+
+var styles = {"container":"dBbFx0Vu16U-"};
+
+const daysInMonth = [...Array.from({ length: 31 }, (_, i) => i + 1), "LAST"];
+function DayOfMonthSelect({ selectedDays, disabled, onChange, }) {
+    return (React.createElement("div", { className: styles.container }, daysInMonth.map(day => {
+        const isSelected = selectedDays.has(day);
+        const inputId = React.useId();
+        return (React.createElement("div", { key: `${day}`, className: checkboxStyles.checkboxWrapper },
+            React.createElement("input", { className: checkboxStyles.dayCheckboxInput, disabled: disabled, type: "checkbox", id: `${day}-${inputId}`, onChange: handleChangeDayOfMonth, "aria-checked": isSelected, checked: isSelected, value: day }),
+            React.createElement("label", { className: checkboxStyles.dayCheckbox, htmlFor: `${day}-${inputId}` }, `${day === "LAST" ? "Last day" : day}`)));
+    })));
+    function handleChangeDayOfMonth(event) {
+        const day = event.currentTarget.value === "LAST"
+            ? event.currentTarget.value
+            : +event.currentTarget.value;
+        const next = new Set(selectedDays);
+        if (selectedDays.has(day)) {
+            next.delete(day);
+        }
+        else {
+            next.add(day);
+        }
+        onChange(next);
+    }
+}
+
+exports.DayOfMonthSelect = DayOfMonthSelect;
+exports.MonthlyDayOfWeekSelect = MonthlyDayOfWeekSelect;
+exports.MonthlySelect = MonthlySelect;
+exports.WeeklySelect = WeeklySelect;
+exports.isMonthly = isMonthly;
+exports.typeInitialStateMap = typeInitialStateMap;

package/dist/DescriptionList/DescriptionList.d.ts

@@ -4,7 +4,7 @@ interface DescriptionListProps {
      * A tuple where the first item is the string to display as the term
      * and the second value is the string to display as the definition
      */
-    data: [string, string | ReactNode][];
+    readonly data: [string, string | ReactNode][];
 }
 export declare function DescriptionList({ data }: DescriptionListProps): JSX.Element;
 export {};

package/dist/DescriptionList/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var DescriptionList = require('../DescriptionList-CU1oU0gy.js');
+require('react');
+require('../Typography-Dcec2MjG.js');
+require('classnames');
+
+
+
+exports.DescriptionList = DescriptionList.DescriptionList;

package/dist/DescriptionList/index.mjs

@@ -0,0 +1,4 @@
+export { D as DescriptionList } from '../DescriptionList-BqaFf2PH.js';
+import 'react';
+import '../Typography-BD0mo9T9.js';
+import 'classnames';

package/dist/DescriptionList-BqaFf2PH.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { T as Typography } from './Typography-BD0mo9T9.js';
+
+var styles = {"descriptionList":"EQDmgmJchDA-","termGroup":"DkzfClUGQlc-"};
+
+function DescriptionList({ data }) {
+    return (React.createElement("dl", { className: styles.descriptionList }, data.map(([term, description], i) => (React.createElement("div", { key: `${term}-${i}`, className: styles.termGroup },
+        React.createElement(Typography, { element: "dt", textColor: "heading", size: "base" }, term),
+        React.createElement(Typography, { element: "dd", textColor: "text", size: "base" }, description))))));
+}
+
+export { DescriptionList as D };

package/dist/DescriptionList-CU1oU0gy.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+var Typography = require('./Typography-Dcec2MjG.js');
+
+var styles = {"descriptionList":"EQDmgmJchDA-","termGroup":"DkzfClUGQlc-"};
+
+function DescriptionList({ data }) {
+    return (React.createElement("dl", { className: styles.descriptionList }, data.map(([term, description], i) => (React.createElement("div", { key: `${term}-${i}`, className: styles.termGroup },
+        React.createElement(Typography.Typography, { element: "dt", textColor: "heading", size: "base" }, term),
+        React.createElement(Typography.Typography, { element: "dd", textColor: "text", size: "base" }, description))))));
+}
+
+exports.DescriptionList = DescriptionList;

package/dist/Disclosure/index.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var Disclosure = require('../Disclosure-D26ohdpw.js');
+require('react');
+require('../useResizeObserver-B4v7ebGO.js');
+require('../_commonjsHelpers-BZy5LDD5.js');
+require('../debounce-pg3VOrFc.js');
+require('../isObjectLike-D1IeOnmx.js');
+require('../isSymbol-Bbb_qQGw.js');
+require('../Icon-fa-Ii8qc.js');
+require('@jobber/design');
+require('../Typography-Dcec2MjG.js');
+require('classnames');
+
+
+
+exports.Disclosure = Disclosure.Disclosure;

package/dist/Disclosure/index.mjs

@@ -0,0 +1,11 @@
+export { D as Disclosure } from '../Disclosure-DzRqP8wI.js';
+import 'react';
+import '../useResizeObserver-CvdP2RtU.js';
+import '../_commonjsHelpers-Dy2IPW0w.js';
+import '../debounce-BBtff9-S.js';
+import '../isObjectLike-CcKIYba1.js';
+import '../isSymbol-BmwHOL7f.js';
+import '../Icon-GaU33tZU.js';
+import '@jobber/design';
+import '../Typography-BD0mo9T9.js';
+import 'classnames';

package/dist/Disclosure-D26ohdpw.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+var useResizeObserver = require('./useResizeObserver-B4v7ebGO.js');
+var Icon = require('./Icon-fa-Ii8qc.js');
+var Typography = require('./Typography-Dcec2MjG.js');
+
+var styles = {"arrowIconWrapper":"WcgASR88I1c-","details":"N-W4pXaLGt4-","summary":"PMjHZZhHiUY-","summaryWrap":"-E1lerklSHw-","content":"CjRRsbZQp1Y-","openAnimation":"vWj6tOjTVYA-"};
+
+function Disclosure({ children, title, defaultOpen = false, }) {
+    const [isOpen, setOpen] = React.useState(defaultOpen);
+    const [isMounted, setMount] = React.useState(false);
+    const [titleRef, { exactWidth }] = useResizeObserver.useResizeObserver.useResizeObserver();
+    const isBelowBreakpoint = exactWidth && exactWidth < useResizeObserver.useResizeObserver.Breakpoints.small;
+    React.useEffect(() => {
+        setMount(true);
+    }, []);
+    return (React.createElement("details", { open: isOpen, onToggle: onToggle, className: styles.details },
+        React.createElement("summary", { className: styles.summary },
+            React.createElement("div", { className: styles.summaryWrap, ref: titleRef },
+                React.createElement(Typography.Typography, { element: "h4", size: isBelowBreakpoint ? "base" : "large", fontWeight: "bold", textColor: "heading" }, title),
+                React.createElement("span", { className: styles.arrowIconWrapper },
+                    React.createElement(Icon.Icon, { size: "large", name: "arrowDown", color: "green" })))),
+        React.createElement("span", { className: styles.content }, children)));
+    function onToggle(event) {
+        event.preventDefault();
+        const { open: currentToggleState } = event.target;
+        if (!isMounted || currentToggleState === isOpen) {
+            return;
+        }
+        setOpen(!currentToggleState);
+    }
+}
+
+exports.Disclosure = Disclosure;

package/dist/Disclosure-DzRqP8wI.js

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+import { u as useResizeObserver } from './useResizeObserver-CvdP2RtU.js';
+import { I as Icon } from './Icon-GaU33tZU.js';
+import { T as Typography } from './Typography-BD0mo9T9.js';
+
+var styles = {"arrowIconWrapper":"WcgASR88I1c-","details":"N-W4pXaLGt4-","summary":"PMjHZZhHiUY-","summaryWrap":"-E1lerklSHw-","content":"CjRRsbZQp1Y-","openAnimation":"vWj6tOjTVYA-"};
+
+function Disclosure({ children, title, defaultOpen = false, }) {
+    const [isOpen, setOpen] = useState(defaultOpen);
+    const [isMounted, setMount] = useState(false);
+    const [titleRef, { exactWidth }] = useResizeObserver.useResizeObserver();
+    const isBelowBreakpoint = exactWidth && exactWidth < useResizeObserver.Breakpoints.small;
+    useEffect(() => {
+        setMount(true);
+    }, []);
+    return (React.createElement("details", { open: isOpen, onToggle: onToggle, className: styles.details },
+        React.createElement("summary", { className: styles.summary },
+            React.createElement("div", { className: styles.summaryWrap, ref: titleRef },
+                React.createElement(Typography, { element: "h4", size: isBelowBreakpoint ? "base" : "large", fontWeight: "bold", textColor: "heading" }, title),
+                React.createElement("span", { className: styles.arrowIconWrapper },
+                    React.createElement(Icon, { size: "large", name: "arrowDown", color: "green" })))),
+        React.createElement("span", { className: styles.content }, children)));
+    function onToggle(event) {
+        event.preventDefault();
+        const { open: currentToggleState } = event.target;
+        if (!isMounted || currentToggleState === isOpen) {
+            return;
+        }
+        setOpen(!currentToggleState);
+    }
+}
+
+export { Disclosure as D };

package/dist/Divider/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var Divider = require('../Divider-DNbqt0gw.js');
+require('react');
+require('classnames');
+
+
+
+exports.Divider = Divider.Divider;

package/dist/Divider/index.mjs

@@ -0,0 +1,3 @@
+export { D as Divider } from '../Divider-BjDtIO6-.js';
+import 'react';
+import 'classnames';

package/dist/Divider-BjDtIO6-.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import classnames from 'classnames';
+
+var styles = {"divider":"dH7SqeSo70A-","large":"_07xjw8ykfvg-","larger":"TGD22T-KP78-","largest":"UUndaiRIryU-","horizontal":"HzWBc8FoucI-","vertical":"vu46ZKcGBWM-"};
+
+function Divider({ size = "base", direction = "horizontal", }) {
+    const className = classnames(styles.divider, {
+        [styles.large]: size === "large",
+        [styles.larger]: size === "larger",
+        [styles.largest]: size === "largest",
+        [styles.horizontal]: direction == "horizontal",
+        [styles.vertical]: direction == "vertical",
+    });
+    return React.createElement("div", { className: className, role: "none presentation" });
+}
+
+export { Divider as D };

package/dist/Divider-DNbqt0gw.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+
+var styles = {"divider":"dH7SqeSo70A-","large":"_07xjw8ykfvg-","larger":"TGD22T-KP78-","largest":"UUndaiRIryU-","horizontal":"HzWBc8FoucI-","vertical":"vu46ZKcGBWM-"};
+
+function Divider({ size = "base", direction = "horizontal", }) {
+    const className = classnames(styles.divider, {
+        [styles.large]: size === "large",
+        [styles.larger]: size === "larger",
+        [styles.largest]: size === "largest",
+        [styles.horizontal]: direction == "horizontal",
+        [styles.vertical]: direction == "vertical",
+    });
+    return React.createElement("div", { className: className, role: "none presentation" });
+}
+
+exports.Divider = Divider;

package/dist/Drawer/DrawerGrid.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 interface DrawerGridProps {
-    children: ReactElement | ReactElement[];
+    readonly children: ReactElement | ReactElement[];
 }
 export declare function DrawerGrid({ children }: DrawerGridProps): JSX.Element;
 export {};

package/dist/Drawer/index.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var DrawerGrid = require('../DrawerGrid-C5ohW1pQ.js');
+require('react');
+require('classnames');
+require('../Heading-BhyZ43jQ.js');
+require('../Typography-Dcec2MjG.js');
+require('../ButtonDismiss-B6rD5rB-.js');
+require('../Button-CvQJyw1M.js');
+require('react-router-dom');
+require('../Icon-fa-Ii8qc.js');
+require('@jobber/design');
+
+
+
+exports.Drawer = DrawerGrid.Drawer;
+exports.DrawerGrid = DrawerGrid.DrawerGrid;

package/dist/Drawer/index.mjs

@@ -0,0 +1,10 @@
+export { D as Drawer, a as DrawerGrid } from '../DrawerGrid-CHDVA6d2.js';
+import 'react';
+import 'classnames';
+import '../Heading-qH5QZFoM.js';
+import '../Typography-BD0mo9T9.js';
+import '../ButtonDismiss-C2LOl-QT.js';
+import '../Button-DjFrVgPj.js';
+import 'react-router-dom';
+import '../Icon-GaU33tZU.js';
+import '@jobber/design';

package/dist/DrawerGrid-C5ohW1pQ.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var Heading = require('./Heading-BhyZ43jQ.js');
+var ButtonDismiss = require('./ButtonDismiss-B6rD5rB-.js');
+
+var styles$1 = {"container":"IJAyrFb2GpA-","drawer":"Hsmk6Pg14PQ-","open":"DwF3Q9EMPvQ-","header":"TcdyXiTbnMU-","contentScroll":"srL7xqEzwhM-","content":"p6-yqttoIJI-"};
+
+function Drawer({ title, children, open = true, onRequestClose, id, }) {
+    const drawerClassNames = classnames(styles$1.container, open && styles$1.open);
+    return (React.createElement("aside", { className: drawerClassNames, "data-testid": "drawer-container", "aria-label": title, "aria-hidden": !open, id: id },
+        React.createElement("div", { className: styles$1.drawer },
+            React.createElement(Header, { title: title, onRequestClose: onRequestClose }),
+            React.createElement("div", { className: styles$1.contentScroll },
+                React.createElement("div", { className: styles$1.content }, children)))));
+}
+function Header({ title, onRequestClose }) {
+    return (React.createElement("div", { className: styles$1.header, "data-testid": "drawer-header" },
+        React.createElement(Heading.Heading, { level: 2 }, title),
+        React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: `Close ${title || "drawer"}` })));
+}
+
+var styles = {"drawerGrid":"_50Jq09W07gg-"};
+
+function DrawerGrid({ children }) {
+    return React.createElement("div", { className: styles.drawerGrid }, children);
+}
+
+exports.Drawer = Drawer;
+exports.DrawerGrid = DrawerGrid;

package/dist/DrawerGrid-CHDVA6d2.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classnames from 'classnames';
+import { H as Heading } from './Heading-qH5QZFoM.js';
+import { B as ButtonDismiss } from './ButtonDismiss-C2LOl-QT.js';
+
+var styles$1 = {"container":"IJAyrFb2GpA-","drawer":"Hsmk6Pg14PQ-","open":"DwF3Q9EMPvQ-","header":"TcdyXiTbnMU-","contentScroll":"srL7xqEzwhM-","content":"p6-yqttoIJI-"};
+
+function Drawer({ title, children, open = true, onRequestClose, id, }) {
+    const drawerClassNames = classnames(styles$1.container, open && styles$1.open);
+    return (React.createElement("aside", { className: drawerClassNames, "data-testid": "drawer-container", "aria-label": title, "aria-hidden": !open, id: id },
+        React.createElement("div", { className: styles$1.drawer },
+            React.createElement(Header, { title: title, onRequestClose: onRequestClose }),
+            React.createElement("div", { className: styles$1.contentScroll },
+                React.createElement("div", { className: styles$1.content }, children)))));
+}
+function Header({ title, onRequestClose }) {
+    return (React.createElement("div", { className: styles$1.header, "data-testid": "drawer-header" },
+        React.createElement(Heading, { level: 2 }, title),
+        React.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: `Close ${title || "drawer"}` })));
+}
+
+var styles = {"drawerGrid":"_50Jq09W07gg-"};
+
+function DrawerGrid({ children }) {
+    return React.createElement("div", { className: styles.drawerGrid }, children);
+}
+
+export { Drawer as D, DrawerGrid as a };

package/dist/Emphasis/Emphasis.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from "react";
 import { TypographyOptions } from "../Typography";
 interface EmphasisProps {
-    variation: "bold" | "italic" | "highlight";
-    children: ReactNode;
+    readonly variation: "bold" | "italic" | "highlight";
+    readonly children: ReactNode;
 }
 export interface VariationMap {
     [variation: string]: TypographyOptions;

package/dist/Emphasis/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var Emphasis = require('../Emphasis-CKaYb2Cx.js');
+require('react');
+require('../Typography-Dcec2MjG.js');
+require('classnames');
+
+
+
+exports.Emphasis = Emphasis.Emphasis;

package/dist/Emphasis/index.mjs

@@ -0,0 +1,4 @@
+export { E as Emphasis } from '../Emphasis-oLbhQdCV.js';
+import 'react';
+import '../Typography-BD0mo9T9.js';
+import 'classnames';

package/dist/Emphasis-CKaYb2Cx.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var Typography = require('./Typography-Dcec2MjG.js');
+
+function Emphasis({ variation, children }) {
+    const variationMap = {
+        bold: { element: "b", fontWeight: "bold" },
+        italic: { element: "em", emphasisType: "italic" },
+        highlight: { element: "strong", emphasisType: "highlight" },
+    };
+    return React.createElement(Typography.Typography, Object.assign({}, variationMap[variation]), children);
+}
+
+exports.Emphasis = Emphasis;

package/dist/Emphasis-oLbhQdCV.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { T as Typography } from './Typography-BD0mo9T9.js';
+
+function Emphasis({ variation, children }) {
+    const variationMap = {
+        bold: { element: "b", fontWeight: "bold" },
+        italic: { element: "em", emphasisType: "italic" },
+        highlight: { element: "strong", emphasisType: "highlight" },
+    };
+    return React.createElement(Typography, Object.assign({}, variationMap[variation]), children);
+}
+
+export { Emphasis as E };