@codecademy/gamut 67.4.2 → 67.5.0

package/dist/Tabs/Tab.d.ts

@@ -3,7 +3,7 @@ import { TabProps as ReactAriaTabProps } from 'react-aria-components';
 import { TabButtonProps } from './TabButton';
 interface TabBaseProps extends TabButtonProps, ReactAriaTabProps {
 }
-export type TabProps = TabBaseProps & Omit<ReactAriaTabProps, 'id'> & {
+export type TabProps = Omit<TabBaseProps, 'id'> & {
     /**
      * the id matches up the tab and tab panel
      */

package/dist/Tabs/Tab.js

@@ -8,7 +8,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const TabBase = /*#__PURE__*/_styled(ReactAriaTab, {
   target: "eknaphq0",
   label: "TabBase"
-})(tabVariants, tabStates, tabElementBaseProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9UYWJzL1RhYi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJnQiIsImZpbGUiOiIuLi8uLi9zcmMvVGFicy9UYWIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHtcbiAgVGFiIGFzIFJlYWN0QXJpYVRhYixcbiAgVGFiUHJvcHMgYXMgUmVhY3RBcmlhVGFiUHJvcHMsXG59IGZyb20gJ3JlYWN0LWFyaWEtY29tcG9uZW50cyc7XG5cbmltcG9ydCB7IHRhYkVsZW1lbnRCYXNlUHJvcHMgfSBmcm9tICcuL3Byb3BzJztcbmltcG9ydCB7IFRhYkJ1dHRvblByb3BzLCB0YWJTdGF0ZXMsIHRhYlZhcmlhbnRzIH0gZnJvbSAnLi9UYWJCdXR0b24nO1xuaW1wb3J0IHsgdXNlVGFiIH0gZnJvbSAnLi9UYWJQcm92aWRlcic7XG5cbmludGVyZmFjZSBUYWJCYXNlUHJvcHMgZXh0ZW5kcyBUYWJCdXR0b25Qcm9wcywgUmVhY3RBcmlhVGFiUHJvcHMge31cblxuZXhwb3J0IHR5cGUgVGFiUHJvcHMgPSBUYWJCYXNlUHJvcHMgJlxuICBPbWl0PFJlYWN0QXJpYVRhYlByb3BzLCAnaWQnPiAmIHtcbiAgICAvKipcbiAgICAgKiB0aGUgaWQgbWF0Y2hlcyB1cCB0aGUgdGFiIGFuZCB0YWIgcGFuZWxcbiAgICAgKi9cbiAgICBpZDogc3RyaW5nO1xuICB9O1xuXG5jb25zdCBUYWJCYXNlID0gc3R5bGVkKFJlYWN0QXJpYVRhYik8VGFiUHJvcHM+KFxuICB0YWJWYXJpYW50cyxcbiAgdGFiU3RhdGVzLFxuICB0YWJFbGVtZW50QmFzZVByb3BzXG4pO1xuXG5leHBvcnQgY29uc3QgVGFiOiBSZWFjdC5GQzxUYWJQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyB2YXJpYW50IH0gPSB1c2VUYWIoKTtcblxuICByZXR1cm4gPFRhYkJhc2Ugey4uLnByb3BzfSB2YXJpYW50PXt2YXJpYW50fSAvPjtcbn07XG4iXX0= */");
+})(tabVariants, tabStates, tabElementBaseProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9UYWJzL1RhYi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JnQiIsImZpbGUiOiIuLi8uLi9zcmMvVGFicy9UYWIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHtcbiAgVGFiIGFzIFJlYWN0QXJpYVRhYixcbiAgVGFiUHJvcHMgYXMgUmVhY3RBcmlhVGFiUHJvcHMsXG59IGZyb20gJ3JlYWN0LWFyaWEtY29tcG9uZW50cyc7XG5cbmltcG9ydCB7IHRhYkVsZW1lbnRCYXNlUHJvcHMgfSBmcm9tICcuL3Byb3BzJztcbmltcG9ydCB7IFRhYkJ1dHRvblByb3BzLCB0YWJTdGF0ZXMsIHRhYlZhcmlhbnRzIH0gZnJvbSAnLi9UYWJCdXR0b24nO1xuaW1wb3J0IHsgdXNlVGFiIH0gZnJvbSAnLi9UYWJQcm92aWRlcic7XG5cbmludGVyZmFjZSBUYWJCYXNlUHJvcHMgZXh0ZW5kcyBUYWJCdXR0b25Qcm9wcywgUmVhY3RBcmlhVGFiUHJvcHMge31cblxuZXhwb3J0IHR5cGUgVGFiUHJvcHMgPSBPbWl0PFRhYkJhc2VQcm9wcywgJ2lkJz4gJiB7XG4gIC8qKlxuICAgKiB0aGUgaWQgbWF0Y2hlcyB1cCB0aGUgdGFiIGFuZCB0YWIgcGFuZWxcbiAgICovXG4gIGlkOiBzdHJpbmc7XG59O1xuXG5jb25zdCBUYWJCYXNlID0gc3R5bGVkKFJlYWN0QXJpYVRhYik8VGFiUHJvcHM+KFxuICB0YWJWYXJpYW50cyxcbiAgdGFiU3RhdGVzLFxuICB0YWJFbGVtZW50QmFzZVByb3BzXG4pO1xuXG5leHBvcnQgY29uc3QgVGFiOiBSZWFjdC5GQzxUYWJQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyB2YXJpYW50IH0gPSB1c2VUYWIoKTtcblxuICByZXR1cm4gPFRhYkJhc2Ugey4uLnByb3BzfSB2YXJpYW50PXt2YXJpYW50fSAvPjtcbn07XG4iXX0= */");
 export const Tab = props => {
   const {
     variant

package/dist/Tabs/TabPanel.d.ts

@@ -1,20 +1,18 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { TabPanelProps as ReactAriaTabPanelProps } from 'react-aria-components';
 import { TabElementStyleProps } from './props';
 interface TabPanelBaseProps extends TabElementStyleProps, ReactAriaTabPanelProps {
 }
-export type TabPanelProps = TabPanelBaseProps & Omit<ReactAriaTabPanelProps, 'id'> & {
+export type TabPanelProps = Omit<TabPanelBaseProps, 'id' | 'shouldForceMount'> & {
     /**
      * the id matches up the tab and tab panel
      */
     id: string;
-};
-export declare const TabPanel: import("@emotion/styled").StyledComponent<ReactAriaTabPanelProps & import("react").RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & TabPanelBaseProps & Omit<ReactAriaTabPanelProps, "id"> & {
     /**
-     * the id matches up the tab and tab panel
+     * Whether to mount the tab panel in the DOM even when it is not currently selected.
+     * This is a wrapper around the `shouldForceMount` prop in react-aria-components that also visually hides the inactive tab panel.
      */
-    id: string;
-}, {}, {}>;
+    shouldForceMount?: boolean;
+};
+export declare const TabPanel: React.FC<TabPanelProps>;
 export {};

package/dist/Tabs/TabPanel.js

@@ -1,7 +1,22 @@
 import _styled from "@emotion/styled/base";
+import { system } from '@codecademy/gamut-styles';
+import * as React from 'react';
 import { TabPanel as ReactAriaTabPanel } from 'react-aria-components';
 import { tabElementBaseProps } from './props';
-export const TabPanel = /*#__PURE__*/_styled(ReactAriaTabPanel, {
+import { jsx as _jsx } from "react/jsx-runtime";
+const tabPanelStates = system.states({
+  shouldForceMount: {
+    "&[data-inert='true']": {
+      display: 'none'
+    }
+  }
+});
+const StyledTabPanel = /*#__PURE__*/_styled(ReactAriaTabPanel, {
   target: "e1bw1p150",
-  label: "TabPanel"
-})(tabElementBaseProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9UYWJzL1RhYlBhbmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQkUiLCJmaWxlIjoiLi4vLi4vc3JjL1RhYnMvVGFiUGFuZWwudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtcbiAgVGFiUGFuZWwgYXMgUmVhY3RBcmlhVGFiUGFuZWwsXG4gIFRhYlBhbmVsUHJvcHMgYXMgUmVhY3RBcmlhVGFiUGFuZWxQcm9wcyxcbn0gZnJvbSAncmVhY3QtYXJpYS1jb21wb25lbnRzJztcblxuaW1wb3J0IHsgdGFiRWxlbWVudEJhc2VQcm9wcywgVGFiRWxlbWVudFN0eWxlUHJvcHMgfSBmcm9tICcuL3Byb3BzJztcblxuaW50ZXJmYWNlIFRhYlBhbmVsQmFzZVByb3BzXG4gIGV4dGVuZHMgVGFiRWxlbWVudFN0eWxlUHJvcHMsXG4gICAgUmVhY3RBcmlhVGFiUGFuZWxQcm9wcyB7fVxuXG5leHBvcnQgdHlwZSBUYWJQYW5lbFByb3BzID0gVGFiUGFuZWxCYXNlUHJvcHMgJlxuICBPbWl0PFJlYWN0QXJpYVRhYlBhbmVsUHJvcHMsICdpZCc+ICYge1xuICAgIC8qKlxuICAgICAqIHRoZSBpZCBtYXRjaGVzIHVwIHRoZSB0YWIgYW5kIHRhYiBwYW5lbFxuICAgICAqL1xuICAgIGlkOiBzdHJpbmc7XG4gIH07XG5cbmV4cG9ydCBjb25zdCBUYWJQYW5lbCA9XG4gIHN0eWxlZChSZWFjdEFyaWFUYWJQYW5lbCk8VGFiUGFuZWxQcm9wcz4odGFiRWxlbWVudEJhc2VQcm9wcyk7XG4iXX0= */");
+  label: "StyledTabPanel"
+})(tabElementBaseProps, tabPanelStates, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9UYWJzL1RhYlBhbmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQ3VCIiwiZmlsZSI6Ii4uLy4uL3NyYy9UYWJzL1RhYlBhbmVsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHN5c3RlbSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQge1xuICBUYWJQYW5lbCBhcyBSZWFjdEFyaWFUYWJQYW5lbCxcbiAgVGFiUGFuZWxQcm9wcyBhcyBSZWFjdEFyaWFUYWJQYW5lbFByb3BzLFxufSBmcm9tICdyZWFjdC1hcmlhLWNvbXBvbmVudHMnO1xuXG5pbXBvcnQgeyB0YWJFbGVtZW50QmFzZVByb3BzLCBUYWJFbGVtZW50U3R5bGVQcm9wcyB9IGZyb20gJy4vcHJvcHMnO1xuXG5pbnRlcmZhY2UgVGFiUGFuZWxCYXNlUHJvcHNcbiAgZXh0ZW5kcyBUYWJFbGVtZW50U3R5bGVQcm9wcyxcbiAgICBSZWFjdEFyaWFUYWJQYW5lbFByb3BzIHt9XG5cbmV4cG9ydCB0eXBlIFRhYlBhbmVsUHJvcHMgPSBPbWl0PFxuICBUYWJQYW5lbEJhc2VQcm9wcyxcbiAgJ2lkJyB8ICdzaG91bGRGb3JjZU1vdW50J1xuPiAmIHtcbiAgLyoqXG4gICAqIHRoZSBpZCBtYXRjaGVzIHVwIHRoZSB0YWIgYW5kIHRhYiBwYW5lbFxuICAgKi9cbiAgaWQ6IHN0cmluZztcbiAgLyoqXG4gICAqIFdoZXRoZXIgdG8gbW91bnQgdGhlIHRhYiBwYW5lbCBpbiB0aGUgRE9NIGV2ZW4gd2hlbiBpdCBpcyBub3QgY3VycmVudGx5IHNlbGVjdGVkLlxuICAgKiBUaGlzIGlzIGEgd3JhcHBlciBhcm91bmQgdGhlIGBzaG91bGRGb3JjZU1vdW50YCBwcm9wIGluIHJlYWN0LWFyaWEtY29tcG9uZW50cyB0aGF0IGFsc28gdmlzdWFsbHkgaGlkZXMgdGhlIGluYWN0aXZlIHRhYiBwYW5lbC5cbiAgICovXG4gIHNob3VsZEZvcmNlTW91bnQ/OiBib29sZWFuO1xufTtcblxuY29uc3QgdGFiUGFuZWxTdGF0ZXMgPSBzeXN0ZW0uc3RhdGVzKHtcbiAgc2hvdWxkRm9yY2VNb3VudDoge1xuICAgIFwiJltkYXRhLWluZXJ0PSd0cnVlJ11cIjoge1xuICAgICAgZGlzcGxheTogJ25vbmUnLFxuICAgIH0sXG4gIH0sXG59KTtcblxuY29uc3QgU3R5bGVkVGFiUGFuZWwgPSBzdHlsZWQoUmVhY3RBcmlhVGFiUGFuZWwpPFRhYlBhbmVsUHJvcHM+KFxuICB0YWJFbGVtZW50QmFzZVByb3BzLFxuICB0YWJQYW5lbFN0YXRlc1xuKTtcblxuZXhwb3J0IGNvbnN0IFRhYlBhbmVsOiBSZWFjdC5GQzxUYWJQYW5lbFByb3BzPiA9IChwcm9wcykgPT4ge1xuICByZXR1cm4gPFN0eWxlZFRhYlBhbmVsIHsuLi5wcm9wc30gLz47XG59O1xuIl19 */");
+export const TabPanel = props => {
+  return /*#__PURE__*/_jsx(StyledTabPanel, {
+    ...props
+  });
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "67.4.2",
+  "version": "67.5.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@codecademy/gamut-icons": "9.52.1",
@@ -56,5 +56,5 @@
     "dist/**/[A-Z]**/[A-Z]*.js",
     "dist/**/[A-Z]**/index.js"
   ],
-  "gitHead": "744ff3c93e9b07a521e644609f13a30ec53232ab"
+  "gitHead": "f4a4ef485fda782578023925e775fb237ba26355"
 }