@autoguru/overdrive 4.0.3 → 4.0.4

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

@@ -1,50 +1,42 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Tabs/Tab.css.ts", "@autoguru/overdrive");
-
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from "../../themes/base/vars.css.js";
+import { vars } from '../../themes/base/vars.css';
 const lineBottomHeight = '1px';
 const size = '20px';
 export const root = {
-  default: style({
-    padding: "calc(".concat(vars.space['3'], " + ").concat(lineBottomHeight, ") 0"),
-    transition: "color 0.2s ".concat(vars.animation.easing.decelerate, " 0s, background-color 0.2s ").concat(vars.animation.easing.decelerate, " 0s"),
-    borderBottom: "calc(".concat(lineBottomHeight, " + ").concat(lineBottomHeight, ") solid transparent"),
-    flex: 'auto',
-    ':last-of-type': {
-      marginRight: 0
-    },
-    ':hover': {
-      color: vars.colours.intent.primary.background.strong
-    },
-    ':focus': {
-      color: vars.colours.intent.primary.background.strong
-    }
-  }, "root_default"),
-  active: style({
-    color: vars.colours.intent.primary.background.strong,
-    borderBottomColor: vars.colours.intent.primary.background.strong
-  }, "root_active")
+    default: style({
+        padding: `calc(${vars.space['3']} + ${lineBottomHeight}) 0`,
+        transition: `color 0.2s ${vars.animation.easing.decelerate} 0s, background-color 0.2s ${vars.animation.easing.decelerate} 0s`,
+        borderBottom: `calc(${lineBottomHeight} + ${lineBottomHeight}) solid transparent`,
+        flex: 'auto',
+        ':last-of-type': {
+            marginRight: 0,
+        },
+        ':hover': {
+            color: vars.colours.intent.primary.background.strong,
+        },
+        ':focus': {
+            color: vars.colours.intent.primary.background.strong,
+        },
+    }),
+    active: style({
+        color: vars.colours.intent.primary.background.strong,
+        borderBottomColor: vars.colours.intent.primary.background.strong,
+    }),
 };
 export const item = style({
-  display: 'inline-flex',
-  width: 'max-content',
-  verticalAlign: 'middle'
-}, "item");
+    display: 'inline-flex',
+    width: 'max-content',
+    verticalAlign: 'middle',
+});
 export const indication = styleVariants({
-  default: {
-    backgroundColor: vars.colours.background.light,
-    minWidth: size,
-    height: size,
-    lineHeight: size,
-    transition: "color 0.2s ".concat(vars.animation.easing.decelerate, " 0s, backgroundColor 0.2s ").concat(vars.animation.easing.decelerate, " 0s")
-  },
-  active: {
-    backgroundColor: vars.colours.intent.primary.background.strong
-  }
-}, "indication");
-
-__vanilla_filescope__.endFileScope();
+    default: {
+        backgroundColor: vars.colours.background.light,
+        minWidth: size,
+        height: size,
+        lineHeight: size,
+        transition: `color 0.2s ${vars.animation.easing.decelerate} 0s, backgroundColor 0.2s ${vars.animation.easing.decelerate} 0s`,
+    },
+    active: {
+        backgroundColor: vars.colours.intent.primary.background.strong,
+    },
+});

package/dist/components/Tabs/Tab.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ElementType, ReactElement, ReactText } from 'react';
+export interface Props {
+    children: ReactText;
+    id?: string;
+    is?: ElementType | ReactElement;
+    indication?: number;
+}
+export declare const Tab: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Tab.d.ts.map

package/dist/components/Tabs/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGN,WAAW,EAGX,YAAY,EACZ,SAAS,EAET,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,KAAK;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,GAAG,8EA0Ff,CAAC"}

package/dist/components/Tabs/Tab.js

@@ -1,83 +1,53 @@
-"use strict";
-
 import { invariant } from '@autoguru/utilities';
 import clsx from 'clsx';
 import * as React from 'react';
-import { cloneElement, createElement, forwardRef, isValidElement, useContext } from 'react';
-import { useBoxStyles } from "../Box/index.js";
-import { Inline } from "../Inline/index.js";
-import { Text, useTextStyles } from "../Text/index.js";
-import * as styles from "./Tab.css.js";
-import { TabListContext } from "./TabList.js";
-import { TabsContext } from "./Tabs.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export const Tab = forwardRef((_ref, ref) => {
-  let {
-    children,
-    id: incomingId = null,
-    indication = null,
-    is: Component = 'button'
-  } = _ref;
-  const tabsContext = useContext(TabsContext);
-  const tabListContext = useContext(TabListContext);
-  !(tabsContext !== null && tabListContext !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'This tab pane isnt nested beneath <Tabs /> or <TabPanes />>') : invariant(false) : void 0;
-  const isActive = tabsContext.activeIndex === tabListContext;
-  const indicationStyles = useBoxStyles({
-    display: 'inlineBlock',
-    paddingX: '1',
-    borderRadius: 'pill'
-  });
-  const controlsId = typeof incomingId === 'string' ? incomingId : "".concat(tabsContext.id, "-").concat(tabListContext, "-tab");
-  !(typeof children === 'string' || typeof children === 'number') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Tab children have to be text.') : invariant(false) : void 0;
-  const props = {
-    className: clsx(useBoxStyles({
-      is: typeof Component === 'string' ? Component : 'button',
-      display: 'inlineFlex',
-      justifyContent: 'center',
-      backgroundColour: 'transparent',
-      marginRight: '6'
-    }), useTextStyles({
-      noWrap: true,
-      size: '3',
-      fontWeight: 'bold',
-      colour: 'light'
-    }), styles.root.default, {
-      [styles.root.active]: isActive
-    }),
-    role: 'tab',
-    'aria-selected': isActive ? 'true' : 'false',
-    'aria-controls': controlsId,
-    tabIndex: isActive ? undefined : -1,
-    onClick: () => {
-      var _tabsContext$onChange;
-
-      return (_tabsContext$onChange = tabsContext.onChange) === null || _tabsContext$onChange === void 0 ? void 0 : _tabsContext$onChange.call(tabsContext, tabListContext);
-    },
-    ref
-  };
-
-  const child = _jsxs(Inline, {
-    noWrap: true,
-    space: "2",
-    alignY: "center",
-    alignX: "center",
-    children: [_jsx("span", {
-      className: styles.item,
-      children: children
-    }), typeof indication === 'number' && _jsx(Text, {
-      strong: true,
-      is: "span",
-      size: "2",
-      align: "center",
-      display: "block",
-      colour: isActive ? 'white' : 'dark',
-      className: clsx(styles.indication.default, indicationStyles, {
-        [styles.indication.active]: isActive
-      }),
-      children: indication
-    })]
-  });
-
-  return isValidElement(Component) ? cloneElement(Component, props, child) : createElement(Component, props, child);
-});
+import { cloneElement, createElement, forwardRef, isValidElement, useContext, } from 'react';
+import { useBoxStyles } from '../Box';
+import { Inline } from '../Inline';
+import { Text, useTextStyles } from '../Text';
+import * as styles from './Tab.css';
+import { TabListContext } from './TabList';
+import { TabsContext } from './Tabs';
+export const Tab = forwardRef(({ children, id: incomingId = null, indication = null, is: Component = 'button', }, ref) => {
+    const tabsContext = useContext(TabsContext);
+    const tabListContext = useContext(TabListContext);
+    invariant(tabsContext !== null && tabListContext !== null, 'This tab pane isnt nested beneath <Tabs /> or <TabPanes />>');
+    const isActive = tabsContext.activeIndex === tabListContext;
+    const indicationStyles = useBoxStyles({
+        display: 'inlineBlock',
+        paddingX: '1',
+        borderRadius: 'pill',
+    });
+    const controlsId = typeof incomingId === 'string'
+        ? incomingId
+        : `${tabsContext.id}-${tabListContext}-tab`;
+    invariant(typeof children === 'string' || typeof children === 'number', 'Tab children have to be text.');
+    const props = {
+        className: clsx(useBoxStyles({
+            is: typeof Component === 'string' ? Component : 'button',
+            display: 'inlineFlex',
+            justifyContent: 'center',
+            backgroundColour: 'transparent',
+            marginRight: '6',
+        }), useTextStyles({
+            noWrap: true,
+            size: '3',
+            fontWeight: 'bold',
+            colour: 'light',
+        }), styles.root.default, {
+            [styles.root.active]: isActive,
+        }),
+        role: 'tab',
+        'aria-selected': isActive ? 'true' : 'false',
+        'aria-controls': controlsId,
+        tabIndex: isActive ? undefined : -1,
+        onClick: () => tabsContext.onChange?.(tabListContext),
+        ref,
+    };
+    const child = (React.createElement(Inline, { noWrap: true, space: "2", alignY: "center", alignX: "center" },
+        React.createElement("span", { className: styles.item }, children),
+        typeof indication === 'number' && (React.createElement(Text, { strong: true, is: "span", size: "2", align: "center", display: "block", colour: isActive ? 'white' : 'dark', className: clsx(styles.indication.default, indicationStyles, { [styles.indication.active]: isActive }) }, indication))));
+    return isValidElement(Component)
+        ? cloneElement(Component, props, child)
+        : createElement(Component, props, child);
+});

package/dist/components/Tabs/TabList.css.d.ts

@@ -0,0 +1,3 @@
+export declare const root: Record<"scroll" | "default", string>;
+export declare const listWrapperScroll: string;
+//# sourceMappingURL=TabList.css.d.ts.map

package/dist/components/Tabs/TabList.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabList.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,sCASf,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAa5B,CAAC"}

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

@@ -1,33 +1,25 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Tabs/TabList.css.ts", "@autoguru/overdrive");
-
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from "../../themes/base/vars.css.js";
+import { vars } from '../../themes/base/vars.css';
 export const root = styleVariants({
-  default: {
-    boxShadow: "inset 0 -1px 0 0 ".concat(vars.border.colours.gray)
-  },
-  scroll: {
-    display: 'grid',
-    gridTemplateColumns: 'auto 1fr auto',
-    gridGap: vars.space['2']
-  }
-}, "root");
+    default: {
+        boxShadow: `inset 0 -1px 0 0 ${vars.border.colours.gray}`,
+    },
+    scroll: {
+        display: 'grid',
+        gridTemplateColumns: 'auto 1fr auto',
+        gridGap: vars.space['2'],
+    },
+});
 export const listWrapperScroll = style({
-  overflowX: 'auto',
-  overflowY: 'hidden',
-  '-webkit-overflow-scrolling': 'auto',
-  overscrollBehavior: 'contain',
-  scrollBehavior: 'smooth',
-  scrollbarWidth: 'none',
-  selectors: {
-    '&::-webkit-scrollbar': {
-      display: 'none'
-    }
-  }
-}, "listWrapperScroll");
-
-__vanilla_filescope__.endFileScope();
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    '-webkit-overflow-scrolling': 'auto',
+    overscrollBehavior: 'contain',
+    scrollBehavior: 'smooth',
+    scrollbarWidth: 'none',
+    selectors: {
+        '&::-webkit-scrollbar': {
+            display: 'none',
+        },
+    },
+});

package/dist/components/Tabs/TabList.d.ts

@@ -0,0 +1,9 @@
+import type { FunctionComponent } from 'react';
+import * as React from 'react';
+export interface Props {
+    stretch?: boolean;
+    scrollable?: boolean;
+}
+export declare const TabListContext: React.Context<number>;
+export declare const TabList: FunctionComponent<Props>;
+//# sourceMappingURL=TabList.d.ts.map

package/dist/components/Tabs/TabList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoB/B,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,uBAAqC,CAAC;AAEjE,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAmI5C,CAAC"}

package/dist/components/Tabs/TabList.js

@@ -1,126 +1,75 @@
-"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/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";
+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';
 export const TabListContext = createContext(null);
-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
+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));
     });
-  });
-  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 [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);
+        }
     };
-  }, []);
-  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]
-  });
-};
+    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));
+};

package/dist/components/Tabs/TabPane.css.d.ts

@@ -0,0 +1,2 @@
+export declare const root: string;
+//# sourceMappingURL=TabPane.css.d.ts.map

package/dist/components/Tabs/TabPane.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPane.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabPane.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAGf,CAAC"}

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

@@ -1,13 +1,5 @@
-"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'
-}, "root");
-
-__vanilla_filescope__.endFileScope();
+    float: 'left',
+    outline: 'none',
+});

package/dist/components/Tabs/TabPane.d.ts

@@ -0,0 +1,5 @@
+import type { FunctionComponent } from 'react';
+export declare const TabPane: FunctionComponent<{
+    id?: string;
+}>;
+//# sourceMappingURL=TabPane.d.ts.map

package/dist/components/Tabs/TabPane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPane.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabPane.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAU/C,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAiCtD,CAAC"}

package/dist/components/Tabs/TabPane.js

@@ -1,35 +1,18 @@
-"use strict";
-
 import { invariant } from '@autoguru/utilities';
 import * as React from 'react';
 import { useContext } from 'react';
-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
-  });
-};
+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));
+};

package/dist/components/Tabs/TabPanes.css.d.ts

@@ -0,0 +1,2 @@
+export declare const root: string;
+//# sourceMappingURL=TabPanes.css.d.ts.map

package/dist/components/Tabs/TabPanes.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanes.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabPanes.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QASf,CAAC"}