@autoguru/overdrive 4.1.3 → 4.1.4

package/dist/components/Tabs/TabList.js

@@ -1,75 +1,126 @@
+"use strict";
+
 import { ArrowLeftIcon, ArrowRightIcon } from '@autoguru/icons';
 import { invariant } from '@autoguru/utilities';
 import * as React from 'react';
-import { Children, createContext, isValidElement, useCallback, useEffect, useRef, useState, } from 'react';
+import { Children, createContext, isValidElement, useCallback, useEffect, useRef, useState } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
-import { animate, ownerWindow, useEventCallback } from '../../utils';
-import { Box } from '../Box';
-import { Button } from '../Button';
-import { Icon } from '../Icon';
-import { useTextStyles } from '../Text';
-import * as styles from './TabList.css';
+import { animate, ownerWindow, useEventCallback } from "../../utils/index.js";
+import { Box } from "../Box/index.js";
+import { Button } from "../Button/index.js";
+import { Icon } from "../Icon/index.js";
+import { useTextStyles } from "../Text/index.js";
+import * as styles from "./TabList.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export const TabListContext = createContext(null);
-export const TabList = ({ children, stretch = false, scrollable = false, }) => {
-    invariant(!(stretch && scrollable), 'Tabs: `stretch={true}` and `scrollable={true}` cannot be used at the same time.');
-    const wrapperRef = useRef(null);
-    const innerRef = useRef(null);
-    const tabs = Children.map(flattenChildren(children), (child, index) => {
-        if (!isValidElement(child))
-            return null;
-        return (React.createElement(TabListContext.Provider, { value: index }, child));
+export const TabList = _ref => {
+  let {
+    children,
+    stretch = false,
+    scrollable = false
+  } = _ref;
+  !!(stretch && scrollable) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Tabs: `stretch={true}` and `scrollable={true}` cannot be used at the same time.') : invariant(false) : void 0;
+  const wrapperRef = useRef(null);
+  const innerRef = useRef(null);
+  const tabs = Children.map(flattenChildren(children), (child, index) => {
+    if (!isValidElement(child)) return null;
+    return _jsx(TabListContext.Provider, {
+      value: index,
+      children: child
     });
-    const [displayScroll, setDisplayScroll] = useState({
-        start: false,
-        end: false,
-    });
-    const updateScrollButtonState = useEventCallback(() => {
-        if (scrollable) {
-            const { scrollWidth, clientWidth, scrollLeft, } = wrapperRef.current;
-            const showStartScroll = scrollLeft > 1;
-            const showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
-            if (showStartScroll !== displayScroll.start ||
-                showEndScroll !== displayScroll.end) {
-                setDisplayScroll({
-                    start: showStartScroll,
-                    end: showEndScroll,
-                });
-            }
-        }
-    });
-    const handleOnScroll = useCallback(() => {
-        updateScrollButtonState();
-    }, []);
-    const scrollToItem = (delta) => {
-        if (wrapperRef.current) {
-            const scrollValue = wrapperRef.current.scrollLeft + delta;
-            animate(wrapperRef.current, 'scrollLeft', scrollValue, 300);
-        }
+  });
+  const [displayScroll, setDisplayScroll] = useState({
+    start: false,
+    end: false
+  });
+  const updateScrollButtonState = useEventCallback(() => {
+    if (scrollable) {
+      const {
+        scrollWidth,
+        clientWidth,
+        scrollLeft
+      } = wrapperRef.current;
+      const showStartScroll = scrollLeft > 1;
+      const showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
+
+      if (showStartScroll !== displayScroll.start || showEndScroll !== displayScroll.end) {
+        setDisplayScroll({
+          start: showStartScroll,
+          end: showEndScroll
+        });
+      }
+    }
+  });
+  const handleOnScroll = useCallback(() => {
+    updateScrollButtonState();
+  }, []);
+
+  const scrollToItem = delta => {
+    if (wrapperRef.current) {
+      const scrollValue = wrapperRef.current.scrollLeft + delta;
+      animate(wrapperRef.current, 'scrollLeft', scrollValue, 300);
+    }
+  };
+
+  const handleStartButton = () => void scrollToItem(-wrapperRef.current.clientWidth);
+
+  const handleEndButton = () => void scrollToItem(wrapperRef.current.clientWidth);
+
+  useEffect(() => {
+    const win = ownerWindow(wrapperRef.current);
+
+    const handleResize = () => {
+      updateScrollButtonState();
+    };
+
+    win.addEventListener('resize', handleResize);
+    return () => {
+      win.removeEventListener('resize', handleResize);
     };
-    const handleStartButton = () => void scrollToItem(-wrapperRef.current.clientWidth);
-    const handleEndButton = () => void scrollToItem(wrapperRef.current.clientWidth);
-    useEffect(() => {
-        const win = ownerWindow(wrapperRef.current);
-        const handleResize = () => {
-            updateScrollButtonState();
-        };
-        win.addEventListener('resize', handleResize);
-        return () => {
-            win.removeEventListener('resize', handleResize);
-        };
-    }, []);
-    useEffect(() => {
-        updateScrollButtonState();
-    }, [children]);
-    const shouldShowScrollButtons = scrollable && (displayScroll.start || displayScroll.end);
-    return (React.createElement(Box, { overflow: "hidden", alignItems: "center", className: [
-            styles.root.default,
-            shouldShowScrollButtons && styles.root.scroll,
-        ] },
-        shouldShowScrollButtons ? (React.createElement(Button, { minimal: true, rounded: true, size: "small", disabled: !displayScroll.start, onClick: handleStartButton },
-            React.createElement(Icon, { icon: ArrowLeftIcon }))) : null,
-        React.createElement(Box, { ref: wrapperRef, className: [scrollable && styles.listWrapperScroll], onScroll: handleOnScroll },
-            React.createElement(Box, { ref: innerRef, display: stretch ? 'flex' : 'block', flexWrap: "nowrap", width: "full", role: "tablist", "aria-orientation": "horizontal", className: useTextStyles({ noWrap: true }) }, tabs)),
-        shouldShowScrollButtons ? (React.createElement(Button, { minimal: true, rounded: true, size: "small", disabled: !displayScroll.end, onClick: handleEndButton },
-            React.createElement(Icon, { icon: ArrowRightIcon }))) : null));
-};
+  }, []);
+  useEffect(() => {
+    updateScrollButtonState();
+  }, [children]);
+  const shouldShowScrollButtons = scrollable && (displayScroll.start || displayScroll.end);
+  return _jsxs(Box, {
+    overflow: "hidden",
+    alignItems: "center",
+    className: [styles.root.default, shouldShowScrollButtons && styles.root.scroll],
+    children: [shouldShowScrollButtons ? _jsx(Button, {
+      minimal: true,
+      rounded: true,
+      size: "small",
+      disabled: !displayScroll.start,
+      onClick: handleStartButton,
+      children: _jsx(Icon, {
+        icon: ArrowLeftIcon
+      })
+    }) : null, _jsx(Box, {
+      ref: wrapperRef,
+      className: [scrollable && styles.listWrapperScroll],
+      onScroll: handleOnScroll,
+      children: _jsx(Box, {
+        ref: innerRef,
+        display: stretch ? 'flex' : 'block',
+        flexWrap: "nowrap",
+        width: "full",
+        role: "tablist",
+        "aria-orientation": "horizontal",
+        className: useTextStyles({
+          noWrap: true
+        }),
+        children: tabs
+      })
+    }), shouldShowScrollButtons ? _jsx(Button, {
+      minimal: true,
+      rounded: true,
+      size: "small",
+      disabled: !displayScroll.end,
+      onClick: handleEndButton,
+      children: _jsx(Icon, {
+        icon: ArrowRightIcon
+      })
+    }) : null]
+  });
+};

package/dist/components/Tabs/TabPane.css.js

@@ -1,5 +1,13 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Tabs/TabPane.css.ts", "@autoguru/overdrive");
+
 import { style } from '@vanilla-extract/css';
 export const root = style({
-    float: 'left',
-    outline: 'none',
-});
+  float: 'left',
+  outline: 'none'
+}, "root");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Tabs/TabPane.js

@@ -1,18 +1,35 @@
+"use strict";
+
 import { invariant } from '@autoguru/utilities';
 import * as React from 'react';
 import { useContext } from 'react';
-import { Box } from '../Box';
-import * as styles from './TabPane.css';
-import { TabPanesContext } from './TabPanes';
-import { TabsContext } from './Tabs';
-export const TabPane = ({ children, id: incomingId = null, }) => {
-    const tabPanesContext = useContext(TabPanesContext);
-    const tabsContext = useContext(TabsContext);
-    invariant(tabPanesContext !== null && tabsContext !== null, 'TabPane rendered outside Tabs or TabPanes');
-    const { paneIndex, renderInactive } = tabPanesContext;
-    const myId = typeof incomingId === 'string'
-        ? incomingId
-        : `${tabsContext.id}-${paneIndex}-tab`;
-    const isActive = tabsContext.activeIndex === paneIndex;
-    return (React.createElement(Box, { display: isActive ? undefined : 'none', "aria-hidden": isActive ? undefined : true, className: styles.root, tabIndex: 0, role: "tabpanel", id: myId, width: "full" }, isActive || renderInactive ? children : undefined));
-};
+import { Box } from "../Box/index.js";
+import * as styles from "./TabPane.css.js";
+import { TabPanesContext } from "./TabPanes.js";
+import { TabsContext } from "./Tabs.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TabPane = _ref => {
+  let {
+    children,
+    id: incomingId = null
+  } = _ref;
+  const tabPanesContext = useContext(TabPanesContext);
+  const tabsContext = useContext(TabsContext);
+  !(tabPanesContext !== null && tabsContext !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'TabPane rendered outside Tabs or TabPanes') : invariant(false) : void 0;
+  const {
+    paneIndex,
+    renderInactive
+  } = tabPanesContext;
+  const myId = typeof incomingId === 'string' ? incomingId : "".concat(tabsContext.id, "-").concat(paneIndex, "-tab");
+  const isActive = tabsContext.activeIndex === paneIndex;
+  return _jsx(Box, {
+    display: isActive ? undefined : 'none',
+    "aria-hidden": isActive ? undefined : true,
+    className: styles.root,
+    tabIndex: 0,
+    role: "tabpanel",
+    id: myId,
+    width: "full",
+    children: isActive || renderInactive ? children : undefined
+  });
+};

package/dist/components/Tabs/TabPanes.css.js

@@ -1,10 +1,18 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Tabs/TabPanes.css.ts", "@autoguru/overdrive");
+
 import { style } from '@vanilla-extract/css';
 export const root = style({
-    float: 'left',
-    outline: 'none',
-    ':after': {
-        display: 'table',
-        clear: 'both',
-        content: '""',
-    },
-});
+  float: 'left',
+  outline: 'none',
+  ':after': {
+    display: 'table',
+    clear: 'both',
+    content: '""'
+  }
+}, "root");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Tabs/TabPanes.js

@@ -1,10 +1,27 @@
+"use strict";
+
 import * as React from 'react';
 import { Children, createContext } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
-import { Box } from '../Box';
-import * as styles from './TabPanes.css';
+import { Box } from "../Box/index.js";
+import * as styles from "./TabPanes.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const TabPanesContext = createContext(null);
-export const TabPanes = ({ renderInactivePanes = false, children, }) => (React.createElement(Box, { paddingY: "6", className: styles.root, width: "full" }, Children.map(flattenChildren(children), (child, index) => (React.createElement(TabPanesContext.Provider, { value: {
+export const TabPanes = _ref => {
+  let {
+    renderInactivePanes = false,
+    children
+  } = _ref;
+  return _jsx(Box, {
+    paddingY: "6",
+    className: styles.root,
+    width: "full",
+    children: Children.map(flattenChildren(children), (child, index) => _jsx(TabPanesContext.Provider, {
+      value: {
         paneIndex: index,
-        renderInactive: renderInactivePanes,
-    } }, child)))));
+        renderInactive: renderInactivePanes
+      },
+      children: child
+    }))
+  });
+};

package/dist/components/Tabs/Tabs.js

@@ -1,13 +1,25 @@
+"use strict";
+
 import * as React from 'react';
 import { createContext, useMemo } from 'react';
-import { useId, useUncontrolledState } from '../../utils';
+import { useId, useUncontrolledState } from "../../utils/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const TabsContext = createContext(null);
-export const Tabs = ({ id: incomingId, active = 0, onChange, children, }) => {
-    const [activeState, setActiveState] = useUncontrolledState(active, onChange);
-    const id = useId(incomingId ?? undefined);
-    return (React.createElement(TabsContext.Provider, { value: useMemo(() => ({
-            id,
-            activeIndex: activeState,
-            onChange: setActiveState,
-        }), [id, activeState]) }, children));
-};
+export const Tabs = _ref => {
+  let {
+    id: incomingId,
+    active = 0,
+    onChange,
+    children
+  } = _ref;
+  const [activeState, setActiveState] = useUncontrolledState(active, onChange);
+  const id = useId(incomingId !== null && incomingId !== void 0 ? incomingId : undefined);
+  return _jsx(TabsContext.Provider, {
+    value: useMemo(() => ({
+      id,
+      activeIndex: activeState,
+      onChange: setActiveState
+    }), [id, activeState]),
+    children: children
+  });
+};

package/dist/components/Tabs/index.js

@@ -1,5 +1,7 @@
-export { Tabs } from './Tabs';
-export { Tab } from './Tab';
-export { TabList } from './TabList';
-export { TabPane } from './TabPane';
-export { TabPanes } from './TabPanes';
+"use strict";
+
+export { Tabs } from "./Tabs.js";
+export { Tab } from "./Tab.js";
+export { TabList } from "./TabList.js";
+export { TabPane } from "./TabPane.js";
+export { TabPanes } from "./TabPanes.js";

package/dist/components/Text/Text.js

@@ -1,14 +1,35 @@
+"use strict";
+
 import * as React from 'react';
-import { Box } from '../Box';
-import { useTextStyles } from './useTextStyles';
-export const Text = ({ children, className = '', is: Component = 'span', align = 'left', colour, display, fontWeight = 'normal', transform, noWrap, size = '4', strong = false, }) => (React.createElement(Box, { is: Component, display: display, textAlign: align, className: [
-        useTextStyles({
-            is: Component,
-            size,
-            colour: colour ?? (strong ? 'dark' : undefined),
-            fontWeight: strong ? 'bold' : fontWeight,
-            transform,
-            noWrap,
-        }),
-        className,
-    ] }, children));
+import { Box } from "../Box/index.js";
+import { useTextStyles } from "./useTextStyles.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Text = _ref => {
+  let {
+    children,
+    className = '',
+    is: Component = 'span',
+    align = 'left',
+    colour,
+    display,
+    fontWeight = 'normal',
+    transform,
+    noWrap,
+    size = '4',
+    strong = false
+  } = _ref;
+  return _jsx(Box, {
+    is: Component,
+    display: display,
+    textAlign: align,
+    className: [useTextStyles({
+      is: Component,
+      size,
+      colour: colour !== null && colour !== void 0 ? colour : strong ? 'dark' : undefined,
+      fontWeight: strong ? 'bold' : fontWeight,
+      transform,
+      noWrap
+    }), className],
+    children: children
+  });
+};

package/dist/components/Text/index.js

@@ -1,2 +1,4 @@
-export { Text } from './Text';
-export { useTextStyles } from './useTextStyles';
+"use strict";
+
+export { Text } from "./Text.js";
+export { useTextStyles } from "./useTextStyles.js";

package/dist/components/Text/useTextStyles.css.js

@@ -1,22 +1,42 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Text/useTextStyles.css.ts", "@autoguru/overdrive");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../themes/base/vars.css';
-import { mapTokenToProperty } from '../../utils/mapTokenToProperty';
+import { vars } from "../../themes/base/vars.css.js";
+import { mapTokenToProperty } from "../../utils/mapTokenToProperty.js";
 export const root = style({
-    selectors: {
-        '&::selection': {
-            color: vars.typography.colour.white,
-            background: vars.typography.colour.primary,
-        },
-    },
-});
-export const sizes = styleVariants(Object.entries(vars.typography.size).reduce((result, [name, size]) => ({
-    ...result,
+  selectors: {
+    '&::selection': {
+      color: vars.typography.colour.white,
+      background: vars.typography.colour.primary
+    }
+  }
+}, "root");
+export const sizes = styleVariants(Object.entries(vars.typography.size).reduce((result, _ref) => {
+  let [name, size] = _ref;
+  return _objectSpread(_objectSpread({}, result), {}, {
     [name]: {
-        fontSize: size.fontSize,
-        lineHeight: size.lineHeight,
-    },
-}), {}));
-export const colours = styleVariants(mapTokenToProperty(vars.typography.colour, 'color'));
-export const fontWeight = styleVariants(mapTokenToProperty(vars.typography.fontWeight, 'fontWeight'));
-export const noWrap = style({ whiteSpace: 'nowrap' });
-export const transform = styleVariants(mapTokenToProperty({ uppercase: 'uppercase', capitalize: 'capitalize' }, 'textTransform'));
+      fontSize: size.fontSize,
+      lineHeight: size.lineHeight
+    }
+  });
+}, {}), "sizes");
+export const colours = styleVariants(mapTokenToProperty(vars.typography.colour, 'color'), "colours");
+export const fontWeight = styleVariants(mapTokenToProperty(vars.typography.fontWeight, 'fontWeight'), "fontWeight");
+export const noWrap = style({
+  whiteSpace: 'nowrap'
+}, "noWrap");
+export const transform = styleVariants(mapTokenToProperty({
+  uppercase: 'uppercase',
+  capitalize: 'capitalize'
+}, 'textTransform'), "transform");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Text/useTextStyles.js

@@ -1,6 +1,20 @@
+"use strict";
+
 import clsx from 'clsx';
-import { useBoxStyles } from '../Box';
-import * as styles from './useTextStyles.css';
-export const useTextStyles = ({ align, colour, fontWeight, is, noWrap, size, transform, }) => {
-    return clsx(styles.root, useBoxStyles({ is, textAlign: align }), colour !== 'unset' && styles.colours[colour ?? 'neutral'], styles.fontWeight[fontWeight], noWrap && styles.noWrap, styles.sizes[size], styles.transform[transform]);
-};
+import { useBoxStyles } from "../Box/index.js";
+import * as styles from "./useTextStyles.css.js";
+export const useTextStyles = _ref => {
+  let {
+    align,
+    colour,
+    fontWeight,
+    is,
+    noWrap,
+    size,
+    transform
+  } = _ref;
+  return clsx(styles.root, useBoxStyles({
+    is,
+    textAlign: align
+  }), colour !== 'unset' && styles.colours[colour !== null && colour !== void 0 ? colour : 'neutral'], styles.fontWeight[fontWeight], noWrap && styles.noWrap, styles.sizes[size], styles.transform[transform]);
+};

package/dist/components/TextAreaInput/TextAreaInput.js

@@ -1,8 +1,35 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["field", "eventHandlers", "validation", "isLoading", "suffixed", "prefixed"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import * as React from 'react';
-import { Box } from '../Box';
-import { withEnhancedInput } from '../private/InputBase';
-export const TextAreaInput = withEnhancedInput(({ field, eventHandlers, validation, isLoading, suffixed, prefixed, ...rest }) => (React.createElement(Box, { is: "textarea", ...eventHandlers, ...field, ...rest, autoComplete: "off" })), {
-    primitiveType: 'textarea',
-    withSuffixIcon: false,
-    withPrefixIcon: false,
-});
+import { Box } from "../Box/index.js";
+import { withEnhancedInput } from "../private/InputBase/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TextAreaInput = withEnhancedInput(_ref => {
+  let {
+    field,
+    eventHandlers,
+    validation,
+    isLoading,
+    suffixed,
+    prefixed
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return _jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    is: "textarea"
+  }, eventHandlers), field), rest), {}, {
+    autoComplete: "off"
+  }));
+}, {
+  primitiveType: 'textarea',
+  withSuffixIcon: false,
+  withPrefixIcon: false
+});

package/dist/components/TextAreaInput/index.js

@@ -1 +1,3 @@
-export { TextAreaInput } from './TextAreaInput';
+"use strict";
+
+export { TextAreaInput } from "./TextAreaInput.js";

package/dist/components/TextContainer/TextContainer.js

@@ -1,9 +1,43 @@
+"use strict";
+
 import * as React from 'react';
-import { Column, Columns } from '../Columns';
-import { Stack } from '../Stack';
-export const TextContainer = ({ heading, className = '', children, action, }) => (React.createElement(Stack, { space: "2", is: "article", className: className },
-    React.createElement(TextContainerHeading, { heading: heading, action: action }),
-    children));
-const TextContainerHeading = ({ heading, action }) => (React.createElement(Columns, { noWrap: true, align: "centre", space: "4" },
-    React.createElement(Column, { grow: true }, heading),
-    action ? React.createElement(Column, { width: "auto" }, action) : null));
+import { Column, Columns } from "../Columns/index.js";
+import { Stack } from "../Stack/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const TextContainer = _ref => {
+  let {
+    heading,
+    className = '',
+    children,
+    action
+  } = _ref;
+  return _jsxs(Stack, {
+    space: "2",
+    is: "article",
+    className: className,
+    children: [_jsx(TextContainerHeading, {
+      heading: heading,
+      action: action
+    }), children]
+  });
+};
+
+const TextContainerHeading = _ref2 => {
+  let {
+    heading,
+    action
+  } = _ref2;
+  return _jsxs(Columns, {
+    noWrap: true,
+    align: "centre",
+    space: "4",
+    children: [_jsx(Column, {
+      grow: true,
+      children: heading
+    }), action ? _jsx(Column, {
+      width: "auto",
+      children: action
+    }) : null]
+  });
+};

package/dist/components/TextContainer/index.js

@@ -1 +1,3 @@
-export { TextContainer } from './TextContainer';
+"use strict";
+
+export { TextContainer } from "./TextContainer.js";