@jobber/components 6.36.1 → 6.38.0

package/dist/ResponsiveSwitcher/index.mjs

@@ -0,0 +1,4 @@
+export { R as ResponsiveSwitcher } from '../ResponsiveSwitcher-es.js';
+import 'react';
+import 'classnames';
+import '../getMappedAtlantisSpaceToken-es.js';

package/dist/ResponsiveSwitcher/types.d.ts

@@ -0,0 +1,26 @@
+import { type CommonAllowedElements, type CommonAtlantisProps, type GapSpacing } from "../sharedHelpers/types";
+export interface ResponsiveSwitcherProps extends CommonAtlantisProps {
+    readonly children: React.ReactNode;
+    /** The minimum width of the top-level children. If this can't be met, the children will break to row. */
+    readonly threshold: string;
+    /** The amount of space between the children. Semantic tokens are available. */
+    readonly gap?: GapSpacing;
+    /** The HTML tag to render the container as. Defaults to `div`. */
+    as?: CommonAllowedElements;
+    /** Useful for dynamic content. If the number of children is greater than this, the children will break to row. */
+    readonly limit?: number;
+    /** **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+    };
+    /** **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        container?: React.CSSProperties;
+    };
+}

package/dist/ResponsiveSwitcher-cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var getMappedAtlantisSpaceToken = require('./getMappedAtlantisSpaceToken-cjs.js');
+
+var styles = {"responsiveSwitcher":"BQqkfvwFjbQ-","limit-1":"zpPbVPrtiLc-","limit-2":"FC2KY5S6p6E-","limit-3":"XJQ0uo0TZ2w-","limit-4":"QmUWX7VCL0A-","limit-5":"_0gKXd8nPCKU-","limit-6":"DvGgLdlE8Ac-","limit-7":"_4PxEtfehh4s-","limit-8":"DZPW3Q-N5ik-","limit-9":"_2BL9H-tmzMk-","spinning":"_71sUKXu-3yM-"};
+
+function ResponsiveSwitcher({ children, threshold, gap = getMappedAtlantisSpaceToken.spaceTokens.base, limit = 2, as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
+    return (React.createElement(Tag, Object.assign({ role: role, id: id }, dataAttributes, ariaAttributes, { className: classnames(styles.responsiveSwitcher, styles[`limit-${limit}`], UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container), style: Object.assign({ "--public-responsive-switcher-threshold": threshold, "--public-responsive-switcher-space": getMappedAtlantisSpaceToken.getMappedAtlantisSpaceToken(gap), "--public-responsive-switcher-limit": limit }, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container) }), children));
+}
+
+exports.ResponsiveSwitcher = ResponsiveSwitcher;

package/dist/ResponsiveSwitcher-es.js

@@ -0,0 +1,11 @@
+import React__default from 'react';
+import classnames from 'classnames';
+import { g as getMappedAtlantisSpaceToken, s as spaceTokens } from './getMappedAtlantisSpaceToken-es.js';
+
+var styles = {"responsiveSwitcher":"BQqkfvwFjbQ-","limit-1":"zpPbVPrtiLc-","limit-2":"FC2KY5S6p6E-","limit-3":"XJQ0uo0TZ2w-","limit-4":"QmUWX7VCL0A-","limit-5":"_0gKXd8nPCKU-","limit-6":"DvGgLdlE8Ac-","limit-7":"_4PxEtfehh4s-","limit-8":"DZPW3Q-N5ik-","limit-9":"_2BL9H-tmzMk-","spinning":"_71sUKXu-3yM-"};
+
+function ResponsiveSwitcher({ children, threshold, gap = spaceTokens.base, limit = 2, as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
+    return (React__default.createElement(Tag, Object.assign({ role: role, id: id }, dataAttributes, ariaAttributes, { className: classnames(styles.responsiveSwitcher, styles[`limit-${limit}`], UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container), style: Object.assign({ "--public-responsive-switcher-threshold": threshold, "--public-responsive-switcher-space": getMappedAtlantisSpaceToken(gap), "--public-responsive-switcher-limit": limit }, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container) }), children));
+}
+
+export { ResponsiveSwitcher as R };

package/dist/SideDrawer-cjs.js

@@ -61,7 +61,7 @@ function SideDrawerBackButton({ onClick, }) {
     }, []);
     if (!backPortal)
         return null;
-    return ReactDOM.createPortal(React.createElement(Button.Button, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
+    return ReactDOM.createPortal(React.createElement(Button.ButtonNamespace, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
 }
 
 function SideDrawerFooter({ children }) {
@@ -143,7 +143,7 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
                             React.createElement("div", Object.assign({ className: classnames(styles.heading) }, slots.title.attr))),
                         React.createElement("div", { className: styles.headerActions },
                             React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.actions.attr)),
-                            React.createElement(Button.Button, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
+                            React.createElement(Button.ButtonNamespace, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
                     React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.toolbar.attr))),
                 React.createElement("div", { className: styles.content },
                     React.createElement("div", { className: styles.headerShadowListener, ref: headerShadowRef }),

package/dist/SideDrawer-es.js

@@ -8,7 +8,7 @@ import { u as useInView_2 } from './useInView-es.js';
 import { u as useIsMounted_2 } from './useIsMounted-es.js';
 import { tokens } from '@jobber/design';
 import { H as Heading } from './Heading-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import { F as Flex } from './Flex-es.js';
 
 const SideDrawerContext = createContext({
@@ -59,7 +59,7 @@ function SideDrawerBackButton({ onClick, }) {
     }, []);
     if (!backPortal)
         return null;
-    return createPortal(React__default.createElement(Button, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
+    return createPortal(React__default.createElement(ButtonNamespace, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
 }
 
 function SideDrawerFooter({ children }) {
@@ -141,7 +141,7 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
                             React__default.createElement("div", Object.assign({ className: classnames(styles.heading) }, slots.title.attr))),
                         React__default.createElement("div", { className: styles.headerActions },
                             React__default.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.actions.attr)),
-                            React__default.createElement(Button, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
+                            React__default.createElement(ButtonNamespace, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
                     React__default.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, slots.toolbar.attr))),
                 React__default.createElement("div", { className: styles.content },
                     React__default.createElement("div", { className: styles.headerShadowListener, ref: headerShadowRef }),

package/dist/SideKick/SideKick.d.ts

@@ -0,0 +1,2 @@
+import { SideKickProps } from "./types";
+export declare function SideKick({ children, sideWidth, contentMinWidth, gap, onRight, collapseBelow, collapsed, autoWidth, as: Tag, dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }: SideKickProps): JSX.Element;

package/dist/SideKick/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var SideKick = require('../SideKick-cjs.js');
+require('react');
+require('classnames');
+require('../getMappedAtlantisSpaceToken-cjs.js');
+
+
+
+exports.SideKick = SideKick.SideKick;

package/dist/SideKick/index.d.ts

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

package/dist/SideKick/index.mjs

@@ -0,0 +1,4 @@
+export { S as SideKick } from '../SideKick-es.js';
+import 'react';
+import 'classnames';
+import '../getMappedAtlantisSpaceToken-es.js';

package/dist/SideKick/types.d.ts

@@ -0,0 +1,35 @@
+import { AtlantisBreakpoints } from "../sharedHelpers/getMappedBreakpointWidth";
+import { type CommonAllowedElements, type CommonAtlantisProps, type GapSpacing } from "../sharedHelpers/types";
+export interface SideKickProps extends CommonAtlantisProps {
+    readonly children: React.ReactNode;
+    /** The width of the sidekick. */
+    readonly sideWidth?: string;
+    /** The minimum width of the content. */
+    readonly contentMinWidth?: string;
+    /** The amount of space between the sidekick and the content. Semantic tokens are available. */
+    readonly gap?: GapSpacing;
+    /** Whether to place the sidekick on the right. */
+    readonly onRight?: boolean;
+    /** The breakpoint to collapse the sidekick at. */
+    readonly collapseBelow?: keyof typeof AtlantisBreakpoints;
+    /** Force the sidekick to collapse. Use this when our breakpoints are not enough control. */
+    readonly collapsed?: boolean;
+    /** Whether to allow the sidekick to take the width of the content. Defaults to 100% */
+    readonly autoWidth?: boolean;
+    /** The HTML tag to render the container as. Defaults to `div`. */
+    as?: CommonAllowedElements;
+    /** **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+    };
+    /** **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        container?: React.CSSProperties;
+    };
+}

package/dist/SideKick-cjs.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var getMappedAtlantisSpaceToken = require('./getMappedAtlantisSpaceToken-cjs.js');
+
+var styles = {"sidekick":"Hx--3IsyLgs-","left":"bevb052oaa4-","withWidthLeft":"v17EfPAcJZI-","withWidthRight":"_3hUKFPIws6o-","right":"_22dEgb17I90-","sm":"_3yK4CuMFyqw-","md":"lY-7fyPMF6Y-","lg":"Ti0avsNfvTw-","xl":"_9dXm70WomU8-","collapsed":"dN25lKXiqB0-","spinning":"_3hsWavpv0DY-"};
+
+function SideKick({ children, sideWidth, contentMinWidth = "50%", gap = "var(--space-base)", onRight, collapseBelow, collapsed, autoWidth = false, as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
+    return (React.createElement(Tag, Object.assign({ role: role, id: id }, dataAttributes, ariaAttributes, { style: Object.assign({ "--public-sidekick-side-width": sideWidth, "--public-sidekick-min-width": contentMinWidth, "--public-sidekick-space": getMappedAtlantisSpaceToken.getMappedAtlantisSpaceToken(gap), "--public-sidekick-width": autoWidth ? "auto" : "100%" }, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container), className: classnames(styles.sidekick, onRight ? styles.right : styles.left, sideWidth
+            ? onRight
+                ? styles.withWidthRight
+                : styles.withWidthLeft
+            : null, collapseBelow && styles[collapseBelow], collapsed ? styles.collapsed : undefined, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container) }), children));
+}
+
+exports.SideKick = SideKick;

package/dist/SideKick-es.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import classnames from 'classnames';
+import { g as getMappedAtlantisSpaceToken } from './getMappedAtlantisSpaceToken-es.js';
+
+var styles = {"sidekick":"Hx--3IsyLgs-","left":"bevb052oaa4-","withWidthLeft":"v17EfPAcJZI-","withWidthRight":"_3hUKFPIws6o-","right":"_22dEgb17I90-","sm":"_3yK4CuMFyqw-","md":"lY-7fyPMF6Y-","lg":"Ti0avsNfvTw-","xl":"_9dXm70WomU8-","collapsed":"dN25lKXiqB0-","spinning":"_3hsWavpv0DY-"};
+
+function SideKick({ children, sideWidth, contentMinWidth = "50%", gap = "var(--space-base)", onRight, collapseBelow, collapsed, autoWidth = false, as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
+    return (React__default.createElement(Tag, Object.assign({ role: role, id: id }, dataAttributes, ariaAttributes, { style: Object.assign({ "--public-sidekick-side-width": sideWidth, "--public-sidekick-min-width": contentMinWidth, "--public-sidekick-space": getMappedAtlantisSpaceToken(gap), "--public-sidekick-width": autoWidth ? "auto" : "100%" }, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container), className: classnames(styles.sidekick, onRight ? styles.right : styles.left, sideWidth
+            ? onRight
+                ? styles.withWidthRight
+                : styles.withWidthLeft
+            : null, collapseBelow && styles[collapseBelow], collapsed ? styles.collapsed : undefined, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container) }), children));
+}
+
+export { SideKick as S };

package/dist/Stack/Stack.d.ts

@@ -0,0 +1,2 @@
+import { StackProps } from "./types";
+export declare function Stack({ gap, recursive, splitAfter, children, align, autoWidth, as: Tag, dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }: StackProps): JSX.Element;

package/dist/Stack/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var Stack = require('../Stack-cjs.js');
+require('react');
+require('classnames');
+require('../getMappedAtlantisSpaceToken-cjs.js');
+
+
+
+exports.Stack = Stack.Stack;

package/dist/Stack/index.d.ts

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

package/dist/Stack/index.mjs

@@ -0,0 +1,4 @@
+export { S as Stack } from '../Stack-es.js';
+import 'react';
+import 'classnames';
+import '../getMappedAtlantisSpaceToken-es.js';

package/dist/Stack/types.d.ts

@@ -0,0 +1,32 @@
+import { type CommonAllowedElements, type CommonAtlantisProps, type GapSpacing } from "../sharedHelpers/types";
+export interface StackProps extends CommonAtlantisProps {
+    readonly children: React.ReactNode;
+    /** The amount of space between the children. Semantic tokens are available. */
+    readonly gap?: GapSpacing;
+    /** Setting this will push the stack down to the bottom of the parent container,
+     * after the number of children provided (1-15).
+     * Requires parent to have height greater than the sum of the children. */
+    readonly splitAfter?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15;
+    /** Whether to recursively apply the stack spacing to all the children, not just the top-level. */
+    readonly recursive?: boolean;
+    /** The alignment of the stack. */
+    readonly align?: "start" | "center" | "end";
+    /** Whether to allow the stack to take the width of the content. Defaults to 100% */
+    readonly autoWidth?: boolean;
+    /** The HTML tag to render the container as. Defaults to `div`. */
+    as?: CommonAllowedElements;
+    /** **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+    };
+    /** **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        container?: React.CSSProperties;
+    };
+}

package/dist/Stack-cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var getMappedAtlantisSpaceToken = require('./getMappedAtlantisSpaceToken-cjs.js');
+
+var styles = {"stack":"_7bHFxCX3jv4-","start":"MoTsKGfy3zs-","center":"oXb2OHKGH4k-","end":"Clyb5sed46w-","topOnly":"_8ttf1JCju08-","recursive":"nzG883u-wZc-","splitAfter-1":"Y-Mt8C2tNsI-","splitAfter-2":"atxW7JGTiYI-","splitAfter-3":"QuY15WlcoVo-","splitAfter-4":"Vb-dwL9R1oQ-","splitAfter-5":"IjFGwSc9hoQ-","splitAfter-6":"xUe57aXJOOk-","splitAfter-7":"pSWCwyHJBsk-","splitAfter-8":"GAlopfCh8a8-","splitAfter-9":"WMC8WPjJ8TA-","splitAfter-10":"PxqAnvgqC24-","splitAfter-11":"fEFj-rRg7pw-","splitAfter-12":"eN-ykUdJrAU-","splitAfter-13":"Jic7p-x-iKg-","splitAfter-14":"PaC-tFnXMh8-","splitAfter-15":"isuG1fzSWMs-","spinning":"f07n6aE586M-"};
+
+function Stack({ gap = getMappedAtlantisSpaceToken.spaceTokens.base, recursive, splitAfter, children, align, autoWidth = false, as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
+    return (React.createElement(Tag, Object.assign({ role: role, id: id }, dataAttributes, ariaAttributes, { style: Object.assign({ "--public-stack-split": splitAfter, "--public-stack-space": getMappedAtlantisSpaceToken.getMappedAtlantisSpaceToken(gap), "--public-stack-width": autoWidth ? "auto" : "100%" }, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container), className: classnames(styles.stack, recursive ? styles.recursive : styles.topOnly, splitAfter
+            ? styles[`splitAfter-${splitAfter}`]
+            : undefined, align === "center" ? styles.center : undefined, align === "start" ? styles.start : undefined, align === "end" ? styles.end : undefined, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container) }), children));
+}
+
+exports.Stack = Stack;

package/dist/Stack-es.js

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import classnames from 'classnames';
+import { g as getMappedAtlantisSpaceToken, s as spaceTokens } from './getMappedAtlantisSpaceToken-es.js';
+
+var styles = {"stack":"_7bHFxCX3jv4-","start":"MoTsKGfy3zs-","center":"oXb2OHKGH4k-","end":"Clyb5sed46w-","topOnly":"_8ttf1JCju08-","recursive":"nzG883u-wZc-","splitAfter-1":"Y-Mt8C2tNsI-","splitAfter-2":"atxW7JGTiYI-","splitAfter-3":"QuY15WlcoVo-","splitAfter-4":"Vb-dwL9R1oQ-","splitAfter-5":"IjFGwSc9hoQ-","splitAfter-6":"xUe57aXJOOk-","splitAfter-7":"pSWCwyHJBsk-","splitAfter-8":"GAlopfCh8a8-","splitAfter-9":"WMC8WPjJ8TA-","splitAfter-10":"PxqAnvgqC24-","splitAfter-11":"fEFj-rRg7pw-","splitAfter-12":"eN-ykUdJrAU-","splitAfter-13":"Jic7p-x-iKg-","splitAfter-14":"PaC-tFnXMh8-","splitAfter-15":"isuG1fzSWMs-","spinning":"f07n6aE586M-"};
+
+function Stack({ gap = spaceTokens.base, recursive, splitAfter, children, align, autoWidth = false, as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
+    return (React__default.createElement(Tag, Object.assign({ role: role, id: id }, dataAttributes, ariaAttributes, { style: Object.assign({ "--public-stack-split": splitAfter, "--public-stack-space": getMappedAtlantisSpaceToken(gap), "--public-stack-width": autoWidth ? "auto" : "100%" }, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container), className: classnames(styles.stack, recursive ? styles.recursive : styles.topOnly, splitAfter
+            ? styles[`splitAfter-${splitAfter}`]
+            : undefined, align === "center" ? styles.center : undefined, align === "start" ? styles.start : undefined, align === "end" ? styles.end : undefined, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container) }), children));
+}
+
+export { Stack as S };

package/dist/Tiles/Tiles.d.ts

@@ -0,0 +1,2 @@
+import { TilesProps } from "./types";
+export declare function Tiles({ children, minSize, gap, autoWidth, as: Tag, dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }: TilesProps): JSX.Element;

package/dist/Tiles/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var Tiles = require('../Tiles-cjs.js');
+require('react');
+require('classnames');
+require('../getMappedAtlantisSpaceToken-cjs.js');
+
+
+
+exports.Tiles = Tiles.Tiles;

package/dist/Tiles/index.d.ts

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

package/dist/Tiles/index.mjs

@@ -0,0 +1,4 @@
+export { T as Tiles } from '../Tiles-es.js';
+import 'react';
+import 'classnames';
+import '../getMappedAtlantisSpaceToken-es.js';

package/dist/Tiles/types.d.ts

@@ -0,0 +1,26 @@
+import { type CommonAllowedElements, type CommonAtlantisProps, type GapSpacing } from "../sharedHelpers/types";
+export interface TilesProps extends CommonAtlantisProps {
+    readonly children: React.ReactNode;
+    /** The minimum size of the tiles. */
+    readonly minSize: string;
+    /** The amount of space between the tiles. Semantic tokens are available. */
+    readonly gap?: GapSpacing;
+    /** Whether to allow the tiles to take the width of the content. Defaults to 100% */
+    readonly autoWidth?: boolean;
+    /** The HTML tag to render the container as. Defaults to `div`. */
+    as?: CommonAllowedElements;
+    /** **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+    };
+    /** **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        container?: React.CSSProperties;
+    };
+}

package/dist/Tiles-cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var getMappedAtlantisSpaceToken = require('./getMappedAtlantisSpaceToken-cjs.js');
+
+var styles = {"tiles":"jC1GzRIJp74-","spinning":"Ou05ff3MXU8-"};
+
+function Tiles({ children, minSize = "30ch", gap = "base", autoWidth = false, as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
+    return (React.createElement(Tag, Object.assign({ role: role, id: id }, dataAttributes, ariaAttributes, { style: Object.assign({ "--public-tile-min-size": minSize, "--public-tile-space": getMappedAtlantisSpaceToken.getMappedAtlantisSpaceToken(gap), "--public-tiles-width": autoWidth ? "auto" : "100%" }, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container), className: classnames(styles.tiles, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container) }), children));
+}
+
+exports.Tiles = Tiles;

package/dist/Tiles-es.js

@@ -0,0 +1,11 @@
+import React__default from 'react';
+import classnames from 'classnames';
+import { g as getMappedAtlantisSpaceToken } from './getMappedAtlantisSpaceToken-es.js';
+
+var styles = {"tiles":"jC1GzRIJp74-","spinning":"Ou05ff3MXU8-"};
+
+function Tiles({ children, minSize = "30ch", gap = "base", autoWidth = false, as: Tag = "div", dataAttributes, ariaAttributes, role, id, UNSAFE_className, UNSAFE_style, }) {
+    return (React__default.createElement(Tag, Object.assign({ role: role, id: id }, dataAttributes, ariaAttributes, { style: Object.assign({ "--public-tile-min-size": minSize, "--public-tile-space": getMappedAtlantisSpaceToken(gap), "--public-tiles-width": autoWidth ? "auto" : "100%" }, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container), className: classnames(styles.tiles, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container) }), children));
+}
+
+export { Tiles as T };

package/dist/getMappedAtlantisSpaceToken-cjs.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const spaceTokens = {
+    minuscule: "var(--space-minuscule)",
+    slim: "var(--space-slim)",
+    smallest: "var(--space-smallest)",
+    smaller: "var(--space-smaller)",
+    small: "var(--space-small)",
+    base: "var(--space-base)",
+    large: "var(--space-large)",
+    larger: "var(--space-larger)",
+    largest: "var(--space-largest)",
+    extravagant: "var(--space-extravagant)",
+};
+const getMappedAtlantisSpaceToken = (space) => {
+    return spaceTokens[space] ? spaceTokens[space] : space;
+};
+
+exports.getMappedAtlantisSpaceToken = getMappedAtlantisSpaceToken;
+exports.spaceTokens = spaceTokens;

package/dist/getMappedAtlantisSpaceToken-es.js

@@ -0,0 +1,17 @@
+const spaceTokens = {
+    minuscule: "var(--space-minuscule)",
+    slim: "var(--space-slim)",
+    smallest: "var(--space-smallest)",
+    smaller: "var(--space-smaller)",
+    small: "var(--space-small)",
+    base: "var(--space-base)",
+    large: "var(--space-large)",
+    larger: "var(--space-larger)",
+    largest: "var(--space-largest)",
+    extravagant: "var(--space-extravagant)",
+};
+const getMappedAtlantisSpaceToken = (space) => {
+    return spaceTokens[space] ? spaceTokens[space] : space;
+};
+
+export { getMappedAtlantisSpaceToken as g, spaceTokens as s };

package/dist/index.cjs

@@ -21,6 +21,9 @@ var Box = require('./Box-cjs.js');
 var Button = require('./Button-cjs.js');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 var Card = require('./Card-cjs.js');
+var Cluster = require('./Cluster-cjs.js');
+var Container = require('./Container-cjs.js');
+var Cover = require('./Cover-cjs.js');
 var Checkbox_index = require('./Checkbox/index.cjs');
 var Chip = require('./Chip-cjs.js');
 var ChipDismissible = require('./ChipDismissible-cjs.js');
@@ -30,6 +33,7 @@ var Combobox = require('./Combobox-cjs.js');
 var ComboboxProvider = require('./ComboboxProvider-cjs.js');
 var ConfirmationModal = require('./ConfirmationModal-cjs.js');
 var Content = require('./Content-cjs.js');
+var ContentBlock = require('./ContentBlock-cjs.js');
 var Countdown = require('./Countdown-cjs.js');
 var DataDump = require('./DataDump-cjs.js');
 var DataList = require('./DataList-cjs.js');
@@ -51,6 +55,7 @@ var FormatEmail = require('./FormatEmail-cjs.js');
 var FormatFile = require('./FormatFile-cjs.js');
 var FormatRelativeDateTime = require('./FormatRelativeDateTime-cjs.js');
 var FormatTime = require('./FormatTime-cjs.js');
+var Frame = require('./Frame-cjs.js');
 var Gallery = require('./Gallery-cjs.js');
 var Glimmer = require('./Glimmer-cjs.js');
 var Grid = require('./Grid-cjs.js');
@@ -79,15 +84,19 @@ var ProgressBar = require('./ProgressBar-cjs.js');
 var RadioGroup = require('./RadioGroup-cjs.js');
 var RecurringSelect = require('./RecurringSelect-cjs.js');
 var DayOfMonthSelect = require('./DayOfMonthSelect-cjs.js');
+var ResponsiveSwitcher = require('./ResponsiveSwitcher-cjs.js');
 var Option = require('./Option-cjs.js');
 var SegmentedControl = require('./SegmentedControl-cjs.js');
 var SideDrawer = require('./SideDrawer-cjs.js');
+var SideKick = require('./SideKick-cjs.js');
 var Spinner = require('./Spinner-cjs.js');
 var StatusIndicator = require('./StatusIndicator-cjs.js');
 var StatusLabel = require('./StatusLabel-cjs.js');
+var Stack = require('./Stack-cjs.js');
 var Switch = require('./Switch-cjs.js');
 var Body = require('./Body-cjs.js');
 var Tabs = require('./Tabs-cjs.js');
+var Tiles = require('./Tiles-cjs.js');
 var showToast = require('./showToast-cjs.js');
 var Tooltip = require('./Tooltip-cjs.js');
 var Typography = require('./Typography-cjs.js');
@@ -110,6 +119,7 @@ require('./isSymbol-cjs.js');
 require('color');
 require('./BannerIcon-cjs.js');
 require('react-router-dom');
+require('./getMappedAtlantisSpaceToken-cjs.js');
 require('react-hook-form');
 require('./useInView-cjs.js');
 require('./useChildComponent-cjs.js');
@@ -197,13 +207,16 @@ exports.Icon = Icon.Icon;
 exports.Avatar = Avatar.Avatar;
 exports.Banner = Banner.Banner;
 exports.Box = Box.Box;
-exports.Button = Button.Button;
+exports.Button = Button.ButtonNamespace;
 exports.useButtonContext = Button.useButtonContext;
 exports.useButtonStyles = Button.useButtonStyles;
 exports.ButtonDismiss = ButtonDismiss.ButtonDismiss;
 exports.Card = Card.Card;
+exports.Cluster = Cluster.Cluster;
+exports.Container = Container.Container;
+exports.Cover = Cover.Cover;
 exports.Checkbox = Checkbox_index.Checkbox;
-exports.Chip = Chip.Chip;
+exports.Chip = Chip.ChipNamespace;
 exports.ChipDismissible = ChipDismissible.ChipDismissible;
 exports.ChipSelectable = ChipDismissible.ChipSelectable;
 exports.Chips = Chips.Chips;
@@ -211,6 +224,7 @@ exports.Combobox = Combobox.Combobox;
 exports.ComboboxContextProvider = ComboboxProvider.ComboboxContextProvider;
 exports.ConfirmationModal = ConfirmationModal.ConfirmationModal;
 exports.Content = Content.Content;
+exports.ContentBlock = ContentBlock.ContentBlock;
 exports.Countdown = Countdown.Countdown;
 exports.DataDump = DataDump.DataDump;
 exports.DataList = DataList.DataList;
@@ -249,6 +263,7 @@ exports.FormatEmail = FormatEmail.FormatEmail;
 exports.FormatFile = FormatFile.FormatFile;
 exports.FormatRelativeDateTime = FormatRelativeDateTime.FormatRelativeDateTime;
 exports.FormatTime = FormatTime.FormatTime;
+exports.Frame = Frame.Frame;
 exports.Gallery = Gallery.Gallery;
 exports.GLIMMER_TEST_ID = Glimmer.GLIMMER_TEST_ID;
 exports.Glimmer = Glimmer.Glimmer;
@@ -294,6 +309,7 @@ Object.defineProperty(exports, "WeekDay", {
 	enumerable: true,
 	get: function () { return DayOfMonthSelect.WeekDay; }
 });
+exports.ResponsiveSwitcher = ResponsiveSwitcher.ResponsiveSwitcher;
 exports.Option = Option.SelectOption;
 exports.Select = Option.Select;
 exports.SegmentedControl = SegmentedControl.SegmentedControl;
@@ -301,9 +317,11 @@ exports.SegmentedControlContext = SegmentedControl.SegmentedControlContext;
 exports.SegmentedControlProvider = SegmentedControl.SegmentedControlProvider;
 exports.useSegmentedControl = SegmentedControl.useSegmentedControl;
 exports.SideDrawer = SideDrawer.SideDrawer;
+exports.SideKick = SideKick.SideKick;
 exports.Spinner = Spinner.Spinner;
 exports.StatusIndicator = StatusIndicator.StatusIndicator;
 exports.StatusLabel = StatusLabel.StatusLabel;
+exports.Stack = Stack.Stack;
 exports.Switch = Switch.Switch;
 exports.Body = Body.Body;
 exports.Cell = Body.Cell;
@@ -315,6 +333,7 @@ exports.Row = Body.Row;
 exports.Table = Body.Table;
 exports.Tab = Tabs.Tab;
 exports.Tabs = Tabs.Tabs;
+exports.Tiles = Tiles.Tiles;
 exports.Toast = showToast.Toast;
 exports.showToast = showToast.showToast;
 exports.Tooltip = Tooltip.Tooltip;

package/dist/index.d.mts

@@ -9,12 +9,16 @@ export * from "./Box";
 export * from "./Button";
 export * from "./ButtonDismiss";
 export * from "./Card";
+export * from "./Cluster";
+export * from "./Container";
+export * from "./Cover";
 export * from "./Checkbox";
 export * from "./Chip";
 export { Chips } from "./Chips";
 export * from "./Combobox";
 export * from "./ConfirmationModal";
 export * from "./Content";
+export * from "./ContentBlock";
 export * from "./Countdown";
 export * from "./DataDump";
 export * from "./DataList";
@@ -34,6 +38,7 @@ export * from "./FormatEmail";
 export * from "./FormatFile";
 export * from "./FormatRelativeDateTime";
 export * from "./FormatTime";
+export * from "./Frame";
 export * from "./Gallery";
 export * from "./Glimmer";
 export * from "./Grid";
@@ -63,16 +68,20 @@ export * from "./Popover";
 export * from "./ProgressBar";
 export * from "./RadioGroup";
 export * from "./RecurringSelect";
+export * from "./ResponsiveSwitcher";
 export * from "./Select";
 export * from "./SegmentedControl";
 export * from "./SideDrawer";
+export * from "./SideKick";
 export * from "./Spinner";
 export * from "./StatusIndicator";
 export * from "./StatusLabel";
+export * from "./Stack";
 export * from "./Switch";
 export * from "./Table";
 export * from "./Tabs";
 export * from "./Text";
+export * from "./Tiles";
 export * from "./Toast";
 export * from "./Tooltip";
 export * from "./Typography";

package/dist/index.d.ts

@@ -9,12 +9,16 @@ export * from "./Box";
 export * from "./Button";
 export * from "./ButtonDismiss";
 export * from "./Card";
+export * from "./Cluster";
+export * from "./Container";
+export * from "./Cover";
 export * from "./Checkbox";
 export * from "./Chip";
 export { Chips } from "./Chips";
 export * from "./Combobox";
 export * from "./ConfirmationModal";
 export * from "./Content";
+export * from "./ContentBlock";
 export * from "./Countdown";
 export * from "./DataDump";
 export * from "./DataList";
@@ -34,6 +38,7 @@ export * from "./FormatEmail";
 export * from "./FormatFile";
 export * from "./FormatRelativeDateTime";
 export * from "./FormatTime";
+export * from "./Frame";
 export * from "./Gallery";
 export * from "./Glimmer";
 export * from "./Grid";
@@ -63,16 +68,20 @@ export * from "./Popover";
 export * from "./ProgressBar";
 export * from "./RadioGroup";
 export * from "./RecurringSelect";
+export * from "./ResponsiveSwitcher";
 export * from "./Select";
 export * from "./SegmentedControl";
 export * from "./SideDrawer";
+export * from "./SideKick";
 export * from "./Spinner";
 export * from "./StatusIndicator";
 export * from "./StatusLabel";
+export * from "./Stack";
 export * from "./Switch";
 export * from "./Table";
 export * from "./Tabs";
 export * from "./Text";
+export * from "./Tiles";
 export * from "./Toast";
 export * from "./Tooltip";
 export * from "./Typography";