@jobber/components 4.28.2 → 4.29.0

package/DataList.d.ts

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

package/DataList.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var DataList = require("./dist/DataList");
+
+Object.keys(DataList).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return DataList[key];
+    },
+  });
+});

package/dist/DataList/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DataList";
+export { DataListItemType } from "./DataList.types";

package/dist/DataList/index.js

@@ -0,0 +1,353 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+var Button = require('../Button-7698424c.js');
+var Text = require('../Text-e7ed0974.js');
+var isEmpty = require('lodash/isEmpty');
+var InlineLabel = require('../InlineLabel-afd5fc6f.js');
+var FormatDate = require('../FormatDate-70ea5b43.js');
+var Heading = require('../Heading-a1191b15.js');
+var Glimmer = require('../Glimmer-cfa92a88.js');
+require('classnames');
+require('react-router-dom');
+require('@jobber/design');
+require('../Typography-fd6f932a.js');
+require('../Icon-405a216c.js');
+require('../tslib.es6-5b8768b7.js');
+require('../Content-2ca1ffe1.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
+
+var css_248z$4 = ".TkdrExYnvcY- {\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n}\n\n.Z8C7qJtq5Xc- {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(225, 225, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.Gj9kAGnfKco- > * {\n  font-weight: 500;\n}\n\n.ise8kHCfhCY- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n";
+var styles$4 = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","header":"Z8C7qJtq5Xc-","headerLabel":"Gj9kAGnfKco-","listItem":"ise8kHCfhCY-"};
+styleInject_es.styleInject(css_248z$4);
+
+var css_248z$3 = "._--dXJma0jX0- {\n  display: -ms-flexbox;\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  row-gap: calc(16px * 1);\n  row-gap: var(--space-base);\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
+var styles$3 = {"emptyStateWrapper":"_--dXJma0jX0-"};
+styleInject_es.styleInject(css_248z$3);
+
+function DataListEmptyState({ message, action }) {
+    return (React__default["default"].createElement("div", { className: styles$3.emptyStateWrapper },
+        React__default["default"].createElement(Text.Text, { align: "center" }, message),
+        action && (React__default["default"].createElement(Button.Button, Object.assign({}, Object.assign(Object.assign({}, action), { variation: "subtle" }))))));
+}
+
+function DataListLayout(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_) {
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
+}
+
+const EMPTY_FILTER_RESULTS_MESSAGE = "No Results for Selected Filters";
+const EMPTY_FILTER_RESULTS_ACTION_LABEL = "Clear Filters";
+/**
+ * Breakpoints that we support
+ */
+const BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"];
+const BREAKPOINT_SIZES = {
+    xs: 0,
+    sm: 490,
+    md: 768,
+    lg: 1080,
+    xl: 1440,
+};
+
+var css_248z$2 = ".WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.liQeWCMenD0- {\n  --overflow-bg: var(--color-white);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  padding-left: calc(16px * 1);\n  padding-left: var(--space-base);\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    rgba(255, 255, 255, 1) calc(16px * 1),\n    rgba(255, 255, 255, 1) 100%\n  );\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    var(--overflow-bg) var(--space-base),\n    var(--overflow-bg) 100%\n  );\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
+var styles$2 = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
+styleInject_es.styleInject(css_248z$2);
+
+function DataListTags({ items }) {
+    const ref = React.useRef(null);
+    const [visibleIndex, setVisibleIndex] = React.useState([]);
+    const visibleItems = visibleIndex.filter(Boolean).length;
+    React.useEffect(() => {
+        var _a;
+        if (!window.IntersectionObserver)
+            return;
+        // Reset counter every time the items change
+        setVisibleIndex([]);
+        const observer = new IntersectionObserver(handleIntersection, {
+            root: ref.current,
+            threshold: buildIntersectionThreshold(items),
+        });
+        const elements = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-tag-element]");
+        elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.observe(element));
+        return () => {
+            elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
+        };
+    }, [items]);
+    return (React__default["default"].createElement("div", { className: styles$2.tags, ref: ref },
+        items.filter(Boolean).map((tag, index) => (React__default["default"].createElement("div", { key: tag, "data-tag-element": index },
+            React__default["default"].createElement(InlineLabel.InlineLabel, null, tag)))),
+        Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$2.tagCount },
+            React__default["default"].createElement(Text.Text, null,
+                "+",
+                visibleItems)))));
+    function handleIntersection(...[entries]) {
+        entries.forEach(entry => {
+            const index = entry.target.getAttribute("data-tag-element");
+            const indexNumber = Number(index);
+            if (!index || isNaN(indexNumber))
+                return;
+            setVisibleIndex(prevState => {
+                const newState = [...prevState];
+                newState[indexNumber] = entry.intersectionRatio !== 1;
+                return newState;
+            });
+        });
+    }
+}
+function buildIntersectionThreshold(items) {
+    const thresholds = [];
+    const totalItems = items.length;
+    for (let i = 1.0; i <= totalItems; i++) {
+        const ratio = i / totalItems;
+        thresholds.push(ratio);
+    }
+    thresholds.push(0);
+    return thresholds;
+}
+
+/**
+ * Return the child component that matches the `type` provided
+ */
+function getCompoundComponent(children, type) {
+    const childrenArray = React.Children.toArray(children);
+    const element = childrenArray.find(child => React.isValidElement(child) && child.type === type);
+    // Comply with the return type without casting it
+    return React.isValidElement(element) ? element : undefined;
+}
+/**
+ * Return all instances child component that matches the `type` provided
+ */
+function getCompoundComponents(children, type) {
+    const childrenArray = React.Children.toArray(children);
+    const elements = childrenArray.filter((child) => React.isValidElement(child) && child.type === type);
+    return elements;
+}
+/**
+ * Generate the default elements the DataList would use on the data provided.
+ */
+function generateListItemElements(data) {
+    return data.map(item => Object.keys(item).reduce((acc, key) => {
+        const currentItem = item[key];
+        if (!currentItem) {
+            return acc;
+        }
+        if (key === "tags" && Array.isArray(currentItem)) {
+            acc[key] = React__default["default"].createElement(DataListTags, { items: currentItem });
+        }
+        else if (key === "label" && typeof currentItem === "string") {
+            acc[key] = React__default["default"].createElement(Heading.Heading, { level: 5 }, currentItem);
+        }
+        else if (React.isValidElement(currentItem)) {
+            acc[key] = currentItem;
+        }
+        else if (currentItem instanceof Date) {
+            acc[key] = (React__default["default"].createElement(Text.Text, { variation: "subdued" },
+                React__default["default"].createElement(FormatDate.FormatDate, { date: currentItem })));
+        }
+        else {
+            acc[key] = React__default["default"].createElement(Text.Text, { variation: "subdued" }, currentItem);
+        }
+        return acc;
+    }, {}));
+}
+/**
+ * Generate the header elements with the default styling
+ */
+function generateHeaderElements(headers) {
+    const headerElements = Object.keys(headers).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: (React__default["default"].createElement("div", { className: styles$4.headerLabel },
+            React__default["default"].createElement(Text.Text, { variation: "subdued", maxLines: "single", size: "small" }, headers[key]))) })), {});
+    return isEmpty__default["default"](headerElements) ? undefined : headerElements;
+}
+/**
+ * Modify EmptyState to include an empty filter results when filtering happens
+ */
+function generateDataListEmptyState({ children, isFilterApplied, setIsFilterApplied, }) {
+    if (!children)
+        return;
+    const EmptyStateComponent = getCompoundComponent(children, DataListEmptyState);
+    if (isFilterApplied && React.isValidElement(EmptyStateComponent)) {
+        let overrideEmptyStateProps;
+        if (isFilterApplied) {
+            overrideEmptyStateProps = {
+                message: EMPTY_FILTER_RESULTS_MESSAGE,
+                action: {
+                    label: EMPTY_FILTER_RESULTS_ACTION_LABEL,
+                    onClick: () => {
+                        setIsFilterApplied(false);
+                        alert("Filters Cleared");
+                    },
+                },
+            };
+        }
+        return React__default["default"].cloneElement(EmptyStateComponent, overrideEmptyStateProps);
+    }
+    return EmptyStateComponent;
+}
+function sortSizeProp(sizeProp) {
+    return sizeProp.sort((a, b) => BREAKPOINTS.indexOf(a) - BREAKPOINTS.indexOf(b));
+}
+
+var css_248z$1 = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var styles$1 = {"results":"F56prQsXm3A-"};
+styleInject_es.styleInject(css_248z$1);
+
+const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
+function DataListTotalCount({ totalCount, loading, }) {
+    if (totalCount === undefined)
+        return null;
+    let output = null;
+    if (totalCount === null && loading) {
+        output = React__default["default"].createElement(Glimmer.Glimmer, { size: "auto", shape: "rectangle" });
+    }
+    if (typeof totalCount === "number") {
+        output = (React__default["default"].createElement(Text.Text, { variation: "subdued" },
+            "(",
+            totalCount.toLocaleString(),
+            " results)"));
+    }
+    return (React__default["default"].createElement("div", { className: styles$1.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
+}
+
+var css_248z = ".Rh--6fVpkm4- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n.zbS7UvpVoWI- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  height: calc(16px * 3);\n  height: var(--space-largest);\n  padding: calc(16px * 1) 0;\n  padding: var(--space-base) 0;\n}\n";
+var styles = {"loadingItem":"Rh--6fVpkm4-","mobileLoadingState":"zbS7UvpVoWI-"};
+styleInject_es.styleInject(css_248z);
+
+function DataListLayoutInternal({ layouts, renderLayout, mediaMatches, }) {
+    const sizePropsOfLayouts = layouts === null || layouts === void 0 ? void 0 : layouts.map(layout => layout.props.size || "xs");
+    const layoutToRender = layouts === null || layouts === void 0 ? void 0 : layouts.find(layout => {
+        const layoutSize = layout.props.size || "xs";
+        const isVisible = isLayoutVisible({
+            layoutSize,
+            mediaMatches,
+            sizePropsOfLayouts,
+        });
+        return isVisible;
+    });
+    return (layoutToRender && renderLayout(layoutToRender)) || React__default["default"].createElement(React__default["default"].Fragment, null);
+}
+/**
+ * Determine is layout is visible by checking a media query matches for the
+ * visible sizes of the layout and there isn't a larger layout that should be rendered
+ */
+function isLayoutVisible({ layoutSize, mediaMatches, sizePropsOfLayouts, }) {
+    const largerBreakpointsToHide = sizePropsOfLayouts === null || sizePropsOfLayouts === void 0 ? void 0 : sizePropsOfLayouts.filter(size => BREAKPOINTS.indexOf(size) > BREAKPOINTS.indexOf(layoutSize));
+    const sortedLargerBreakpoints = sortSizeProp(largerBreakpointsToHide || []);
+    const visibleBreakpoints = BREAKPOINTS.slice(BREAKPOINTS.indexOf(layoutSize), sortedLargerBreakpoints[0]
+        ? BREAKPOINTS.indexOf(sortedLargerBreakpoints[0])
+        : undefined);
+    const isVisibleBreakpoint = visibleBreakpoints.some(breakpoint => {
+        return Boolean(mediaMatches === null || mediaMatches === void 0 ? void 0 : mediaMatches[breakpoint]);
+    });
+    const largerLayoutIsNotVisible = largerBreakpointsToHide === null || largerBreakpointsToHide === void 0 ? void 0 : largerBreakpointsToHide.reduce((acc, breakpoint) => {
+        return acc && !(mediaMatches === null || mediaMatches === void 0 ? void 0 : mediaMatches[breakpoint]);
+    }, true);
+    return isVisibleBreakpoint && largerLayoutIsNotVisible;
+}
+
+function DataListItems({ layouts, mediaMatches, data, }) {
+    const elementData = generateListItemElements(data);
+    return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => {
+            return (React__default["default"].createElement(React__default["default"].Fragment, null, elementData.map((child, i) => {
+                return (React__default["default"].createElement("div", { className: styles$4.listItem, key: `${data[i].id}` }, layout.props.children(child)));
+            })));
+        } }));
+}
+
+function DataListHeader({ layouts, mediaMatches, headerData, headerVisibility, }) {
+    const matchingMediaQueries = Object.keys(mediaMatches || {}).filter((key) => !!(mediaMatches === null || mediaMatches === void 0 ? void 0 : mediaMatches[key]));
+    const sortedVisibleBreakpoints = sortSizeProp(matchingMediaQueries);
+    // Determines if the header should be visible based on the headerVisibility
+    const showHeader = sortedVisibleBreakpoints.reduce((previousVisibility, breakpoint) => {
+        var _a;
+        return (_a = headerVisibility[breakpoint]) !== null && _a !== void 0 ? _a : previousVisibility;
+    }, true);
+    if (!showHeader || !headerData)
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, renderLayout: layout => {
+            return (React__default["default"].createElement("div", { className: styles$4.header }, layout.props.children(headerData)));
+        }, mediaMatches: mediaMatches }));
+}
+
+const LOADING_STATE_LIMIT_ITEMS = 10;
+const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
+function DataListLoadingState({ loading, headers, layouts, mediaMatches, }) {
+    if (!loading)
+        return null;
+    const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(headers);
+    const loadingElements = loadingData.map(item => Object.keys(item).reduce((acc, key) => {
+        acc[key] = React__default["default"].createElement(Glimmer.Glimmer, null);
+        return acc;
+    }, {}));
+    return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => {
+            if (layout.props.size === "xs") {
+                return React__default["default"].createElement(LoadingStateXSBreakpoint, null);
+            }
+            return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingElements.map((child, i) => (React__default["default"].createElement("div", { className: styles.loadingItem, key: i, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout.props.children(child))))));
+        } }));
+}
+function LoadingStateXSBreakpoint() {
+    const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(0);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingData.map((_, i) => {
+        return (React__default["default"].createElement("div", { className: styles.mobileLoadingState, key: i },
+            React__default["default"].createElement(Glimmer.Glimmer.Text, null)));
+    })));
+}
+
+function useLayoutMediaQueries() {
+    const mediaQueries = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: window.matchMedia(breakpointToMediaQuery(breakpoint)) })), {});
+    const initialMatches = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: mediaQueries[breakpoint].matches })), {});
+    const [matches, setMatches] = React.useState(initialMatches);
+    const handlers = BREAKPOINTS.reduce((previous, breakpoint) => {
+        const handler = (e) => setMatches(previousMatches => (Object.assign(Object.assign({}, previousMatches), { [breakpoint]: e.matches })));
+        return Object.assign(Object.assign({}, previous), { [breakpoint]: handler });
+    }, {});
+    // Set up mediaQuery event handlers
+    React.useEffect(() => {
+        BREAKPOINTS.forEach(breakpoint => {
+            mediaQueries[breakpoint].addEventListener("change", handlers[breakpoint]);
+        });
+        return () => {
+            BREAKPOINTS.forEach(breakpoint => {
+                mediaQueries[breakpoint].removeEventListener("change", handlers[breakpoint]);
+            });
+        };
+    }, [mediaQueries]);
+    return matches;
+}
+function breakpointToMediaQuery(breakpoint) {
+    return `(min-width: ${BREAKPOINT_SIZES[breakpoint]}px)`;
+}
+
+function DataList({ data, headers, loading = false, filterApplied = false, children, title, totalCount, headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, }) {
+    const allLayouts = getCompoundComponents(children, DataListLayout);
+    const headerData = generateHeaderElements(headers);
+    const mediaMatches = useLayoutMediaQueries();
+    const showEmptyState = !loading && data.length === 0;
+    const [isFilterApplied, setIsFilterApplied] = React.useState(filterApplied);
+    const EmptyStateComponent = generateDataListEmptyState({
+        children,
+        isFilterApplied,
+        setIsFilterApplied,
+    });
+    return (React__default["default"].createElement("div", { className: styles$4.wrapper },
+        React__default["default"].createElement("div", { className: styles$4.titleContainer },
+            title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
+            React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: loading })),
+        headerData && (React__default["default"].createElement(DataListHeader, { layouts: allLayouts, headerData: headerData, headerVisibility: headerVisibility, mediaMatches: mediaMatches })),
+        React__default["default"].createElement(DataListLoadingState, { loading: loading, headers: headers, layouts: allLayouts, mediaMatches: mediaMatches }),
+        !loading && (React__default["default"].createElement(DataListItems, { data: data, layouts: allLayouts, mediaMatches: mediaMatches })),
+        showEmptyState && EmptyStateComponent));
+}
+DataList.Layout = DataListLayout;
+DataList.EmptyState = DataListEmptyState;
+
+exports.DataList = DataList;

package/dist/FormatDate/index.js

@@ -2,35 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var FormatDate = require('../FormatDate-70ea5b43.js');
+require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function FormatDate({ date: inputDate, showYear = true, }) {
-    let dateObject;
-    if (inputDate instanceof Date) {
-        dateObject = inputDate;
-    }
-    else if (typeof inputDate === "string") {
-        dateObject = new Date(inputDate);
-    }
-    else {
-        dateObject = new Date(inputDate.year, inputDate.month - 1, inputDate.day);
-    }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, strFormatDate(dateObject, showYear));
-}
-function strFormatDate(date, showYear = true) {
-    let formatOptions = {
-        month: "short",
-        day: "numeric",
-    };
-    if (showYear) {
-        formatOptions = Object.assign(Object.assign({}, formatOptions), { year: "numeric" });
-    }
-    return date.toLocaleDateString(undefined, formatOptions);
-}
-
-exports.FormatDate = FormatDate;
-exports.strFormatDate = strFormatDate;
+exports.FormatDate = FormatDate.FormatDate;
+exports.strFormatDate = FormatDate.strFormatDate;

package/dist/FormatDate-70ea5b43.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function FormatDate({ date: inputDate, showYear = true, }) {
+    let dateObject;
+    if (inputDate instanceof Date) {
+        dateObject = inputDate;
+    }
+    else if (typeof inputDate === "string") {
+        dateObject = new Date(inputDate);
+    }
+    else {
+        dateObject = new Date(inputDate.year, inputDate.month - 1, inputDate.day);
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, strFormatDate(dateObject, showYear));
+}
+function strFormatDate(date, showYear = true) {
+    let formatOptions = {
+        month: "short",
+        day: "numeric",
+    };
+    if (showYear) {
+        formatOptions = Object.assign(Object.assign({}, formatOptions), { year: "numeric" });
+    }
+    return date.toLocaleDateString(undefined, formatOptions);
+}
+
+exports.FormatDate = FormatDate;
+exports.strFormatDate = strFormatDate;

package/dist/InlineLabel/index.js

@@ -2,29 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var classnames = require('classnames');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Typography = require('../Typography-fd6f932a.js');
+var InlineLabel = require('../InlineLabel-afd5fc6f.js');
+require('react');
+require('classnames');
+require('../style-inject.es-9d2f5f4e.js');
+require('../Typography-fd6f932a.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_248z = ".S72WkdRbhc0- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n}\n\n.bMWuAXJHkbw- {\n  padding: calc((16px / 4) * 1.5) calc((16px / 2) * 1.25);\n  padding: calc(calc(16px / 4) * 1.5) calc(calc(16px / 2) * 1.25);\n  padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.ui07veHjPII- {\n  padding: calc((16px / 4) * 1.5) calc((16px / 2) * 1.25);\n  padding: calc(calc(16px / 4) * 1.5) calc(calc(16px / 2) * 1.25);\n  padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.WIXhLSQ7z8A- {\n  padding: calc((16px / 2) * 1.25) calc((16px / 4) * 3.5);\n  padding: calc(calc(16px / 2) * 1.25) calc(calc(16px / 4) * 3.5);\n  padding: calc(var(--space-small) * 1.25) calc(var(--space-smaller) * 3.5);\n}\n\n._8RuKvOhj-Ro- {\n  color: rgb(66, 78, 86);\n  color: var(--color-greyBlue--dark);\n  background-color: rgb(232, 235, 237);\n  background-color: var(--color-greyBlue--lightest);\n}\n\n._2vEF1nvVWm8- {\n  color: rgb(128, 25, 0);\n  color: var(--color-red--dark);\n  background-color: rgb(255, 226, 219);\n  background-color: var(--color-red--lightest);\n}\n\n.Wt305sIAeoE- {\n  color: rgb(158, 98, 23);\n  color: var(--color-orange--dark);\n  background-color: rgb(253, 239, 222);\n  background-color: var(--color-orange--lightest);\n}\n\n.F8KkNxz8W3A- {\n  color: rgb(81, 114, 9);\n  color: var(--color-green--dark);\n  background-color: rgb(236, 243, 219);\n  background-color: var(--color-green--lightest);\n}\n\n.URZZoKSX4So- {\n  color: rgb(1, 27, 37);\n  color: var(--color-blue--dark);\n  background-color: rgb(217, 223, 225);\n  background-color: var(--color-blue--lightest);\n}\n\n.OeLBV-9i0Rs- {\n  color: rgb(49, 69, 98);\n  color: var(--color-navy--dark);\n  background-color: rgb(228, 233, 239);\n  background-color: var(--color-navy--lightest);\n}\n\n._2Xwx5tarf1w- {\n  color: rgb(144, 127, 10);\n  color: var(--color-yellow--dark);\n  background-color: rgb(250, 246, 219);\n  background-color: var(--color-yellow--lightest);\n}\n\n.iCqIjI7GkEk- {\n  color: rgb(99, 125, 46);\n  color: var(--color-lime--dark);\n  background-color: rgb(240, 246, 227);\n  background-color: var(--color-lime--lightest);\n}\n\n._4iEIjiZj9oA- {\n  color: rgb(88, 73, 127);\n  color: var(--color-purple--dark);\n  background-color: rgb(237, 234, 246);\n  background-color: var(--color-purple--lightest);\n}\n\n.JRW9QFSjLTA- {\n  color: rgb(116, 62, 98);\n  color: var(--color-pink--dark);\n  background-color: rgb(244, 231, 239);\n  background-color: var(--color-pink--lightest);\n}\n\n.fbhprd-Gl8k- {\n  color: rgb(40, 112, 95);\n  color: var(--color-teal--dark);\n  background-color: rgb(226, 243, 239);\n  background-color: var(--color-teal--lightest);\n}\n\n.yrF9aZSaTdw- {\n  color: rgb(122, 128, 21);\n  color: var(--color-yellowGreen--dark);\n  background-color: rgb(245, 246, 222);\n  background-color: var(--color-yellowGreen--lightest);\n}\n\n.RPvjah0FdjI- {\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-white);\n  background-color: rgb(77, 105, 116);\n  background-color: var(--color-blue--light);\n}\n\n.apwauWJ6ITc- {\n  color: rgb(39, 105, 146);\n  color: var(--color-lightBlue--dark);\n  background-color: rgb(226, 241, 250);\n  background-color: var(--color-lightBlue--lightest);\n}\n\n.n8qJynvE-n0- {\n  color: rgb(55, 69, 132);\n  color: var(--color-indigo--dark);\n  background-color: rgb(230, 233, 247);\n  background-color: var(--color-indigo--lightest);\n}\n";
-var styles = {"inlineLabel":"S72WkdRbhc0-","base":"bMWuAXJHkbw-","large":"ui07veHjPII-","larger":"WIXhLSQ7z8A-","greyBlue":"_8RuKvOhj-Ro-","red":"_2vEF1nvVWm8-","orange":"Wt305sIAeoE-","green":"F8KkNxz8W3A-","blue":"URZZoKSX4So-","navy":"OeLBV-9i0Rs-","yellow":"_2Xwx5tarf1w-","lime":"iCqIjI7GkEk-","purple":"_4iEIjiZj9oA-","pink":"JRW9QFSjLTA-","teal":"fbhprd-Gl8k-","yellowGreen":"yrF9aZSaTdw-","blueDark":"RPvjah0FdjI-","lightBlue":"apwauWJ6ITc-","indigo":"n8qJynvE-n0-"};
-styleInject_es.styleInject(css_248z);
-
-function InlineLabel({ size = "base", color = "greyBlue", children, }) {
-    const className = classnames__default["default"](styles.inlineLabel, styles[size], styles[color]);
-    const sizeMapper = {
-        base: "small",
-        large: "large",
-        larger: "large",
-    };
-    return (React__default["default"].createElement("span", { className: className },
-        React__default["default"].createElement(Typography.Typography, { element: "span", size: sizeMapper[size] }, children)));
-}
-
-exports.InlineLabel = InlineLabel;
+exports.InlineLabel = InlineLabel.InlineLabel;

package/dist/InlineLabel-afd5fc6f.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var Typography = require('./Typography-fd6f932a.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_248z = ".S72WkdRbhc0- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n}\n\n.bMWuAXJHkbw- {\n  padding: calc((16px / 4) * 1.5) calc((16px / 2) * 1.25);\n  padding: calc(calc(16px / 4) * 1.5) calc(calc(16px / 2) * 1.25);\n  padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.ui07veHjPII- {\n  padding: calc((16px / 4) * 1.5) calc((16px / 2) * 1.25);\n  padding: calc(calc(16px / 4) * 1.5) calc(calc(16px / 2) * 1.25);\n  padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.WIXhLSQ7z8A- {\n  padding: calc((16px / 2) * 1.25) calc((16px / 4) * 3.5);\n  padding: calc(calc(16px / 2) * 1.25) calc(calc(16px / 4) * 3.5);\n  padding: calc(var(--space-small) * 1.25) calc(var(--space-smaller) * 3.5);\n}\n\n._8RuKvOhj-Ro- {\n  color: rgb(66, 78, 86);\n  color: var(--color-greyBlue--dark);\n  background-color: rgb(232, 235, 237);\n  background-color: var(--color-greyBlue--lightest);\n}\n\n._2vEF1nvVWm8- {\n  color: rgb(128, 25, 0);\n  color: var(--color-red--dark);\n  background-color: rgb(255, 226, 219);\n  background-color: var(--color-red--lightest);\n}\n\n.Wt305sIAeoE- {\n  color: rgb(158, 98, 23);\n  color: var(--color-orange--dark);\n  background-color: rgb(253, 239, 222);\n  background-color: var(--color-orange--lightest);\n}\n\n.F8KkNxz8W3A- {\n  color: rgb(81, 114, 9);\n  color: var(--color-green--dark);\n  background-color: rgb(236, 243, 219);\n  background-color: var(--color-green--lightest);\n}\n\n.URZZoKSX4So- {\n  color: rgb(1, 27, 37);\n  color: var(--color-blue--dark);\n  background-color: rgb(217, 223, 225);\n  background-color: var(--color-blue--lightest);\n}\n\n.OeLBV-9i0Rs- {\n  color: rgb(49, 69, 98);\n  color: var(--color-navy--dark);\n  background-color: rgb(228, 233, 239);\n  background-color: var(--color-navy--lightest);\n}\n\n._2Xwx5tarf1w- {\n  color: rgb(144, 127, 10);\n  color: var(--color-yellow--dark);\n  background-color: rgb(250, 246, 219);\n  background-color: var(--color-yellow--lightest);\n}\n\n.iCqIjI7GkEk- {\n  color: rgb(99, 125, 46);\n  color: var(--color-lime--dark);\n  background-color: rgb(240, 246, 227);\n  background-color: var(--color-lime--lightest);\n}\n\n._4iEIjiZj9oA- {\n  color: rgb(88, 73, 127);\n  color: var(--color-purple--dark);\n  background-color: rgb(237, 234, 246);\n  background-color: var(--color-purple--lightest);\n}\n\n.JRW9QFSjLTA- {\n  color: rgb(116, 62, 98);\n  color: var(--color-pink--dark);\n  background-color: rgb(244, 231, 239);\n  background-color: var(--color-pink--lightest);\n}\n\n.fbhprd-Gl8k- {\n  color: rgb(40, 112, 95);\n  color: var(--color-teal--dark);\n  background-color: rgb(226, 243, 239);\n  background-color: var(--color-teal--lightest);\n}\n\n.yrF9aZSaTdw- {\n  color: rgb(122, 128, 21);\n  color: var(--color-yellowGreen--dark);\n  background-color: rgb(245, 246, 222);\n  background-color: var(--color-yellowGreen--lightest);\n}\n\n.RPvjah0FdjI- {\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-white);\n  background-color: rgb(77, 105, 116);\n  background-color: var(--color-blue--light);\n}\n\n.apwauWJ6ITc- {\n  color: rgb(39, 105, 146);\n  color: var(--color-lightBlue--dark);\n  background-color: rgb(226, 241, 250);\n  background-color: var(--color-lightBlue--lightest);\n}\n\n.n8qJynvE-n0- {\n  color: rgb(55, 69, 132);\n  color: var(--color-indigo--dark);\n  background-color: rgb(230, 233, 247);\n  background-color: var(--color-indigo--lightest);\n}\n";
+var styles = {"inlineLabel":"S72WkdRbhc0-","base":"bMWuAXJHkbw-","large":"ui07veHjPII-","larger":"WIXhLSQ7z8A-","greyBlue":"_8RuKvOhj-Ro-","red":"_2vEF1nvVWm8-","orange":"Wt305sIAeoE-","green":"F8KkNxz8W3A-","blue":"URZZoKSX4So-","navy":"OeLBV-9i0Rs-","yellow":"_2Xwx5tarf1w-","lime":"iCqIjI7GkEk-","purple":"_4iEIjiZj9oA-","pink":"JRW9QFSjLTA-","teal":"fbhprd-Gl8k-","yellowGreen":"yrF9aZSaTdw-","blueDark":"RPvjah0FdjI-","lightBlue":"apwauWJ6ITc-","indigo":"n8qJynvE-n0-"};
+styleInject_es.styleInject(css_248z);
+
+function InlineLabel({ size = "base", color = "greyBlue", children, }) {
+    const className = classnames__default["default"](styles.inlineLabel, styles[size], styles[color]);
+    const sizeMapper = {
+        base: "small",
+        large: "large",
+        larger: "large",
+    };
+    return (React__default["default"].createElement("span", { className: className },
+        React__default["default"].createElement(Typography.Typography, { element: "span", size: sizeMapper[size] }, children)));
+}
+
+exports.InlineLabel = InlineLabel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.28.2",
+  "version": "4.29.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "ed861032a2d9a617338a9e0a26a92a5dcc008a2f"
+  "gitHead": "55ffa8935cb077bc56d52eb7d8a5e060f78224b7"
 }

package/dist/DataList/DataList.stories.d.ts

@@ -1,7 +0,0 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { DataList } from "./DataList";
-declare const _default: ComponentMeta<typeof DataList>;
-export default _default;
-export declare const Basic: ComponentStory<typeof DataList>;
-export declare const EmptyState: ComponentStory<typeof DataList>;
-export declare const Breakpoints: ComponentStory<typeof DataList>;

package/dist/DataList/storyUtils.d.ts

@@ -1,38 +0,0 @@
-import { ApolloClient } from "@apollo/client";
-export interface ListQueryType {
-    allPeople: {
-        __typename?: "PeopleConnection";
-        pageInfo: {
-            hasNextPage: boolean;
-            endCursor: string;
-        };
-        edges: Array<{
-            __typename?: "PeopleEdge";
-            node: {
-                created: string;
-                id: string;
-                name: string;
-                gender: string;
-                hairColor: string;
-                skinColor: string;
-                homeworld: {
-                    name: string;
-                    id: string;
-                    population: number;
-                };
-            };
-            cursor: string;
-        }>;
-        totalCount?: number;
-    };
-}
-export type ListEdges = ListQueryType["allPeople"]["edges"];
-export type ListNode = ListEdges[number]["node"];
-export declare const LIST_QUERY: import("@apollo/client").DocumentNode;
-export declare const apolloClient: ApolloClient<import("@apollo/client").NormalizedCacheObject>;
-interface LoadingState {
-    loadingStatus: string;
-    loading: boolean;
-}
-export declare function getLoadingState(loadingInitialContent: boolean, loadingRefresh: boolean, loadingNextPage: boolean): LoadingState;
-export {};