@doist/reactist 28.7.0 → 28.7.3

package/lib/spinner/spinner.js

@@ -1,2 +1,37 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./spinner.module.css.js");function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var a=r(e);exports.Spinner=function({size:e=18}){return a.createElement("svg",{"aria-hidden":!0,width:e,height:e,viewBox:"0 0 24 24",className:t.default.svg,"data-chromatic":"ignore"},a.createElement("g",{fill:"none",fillRule:"nonzero"},a.createElement("path",{className:t.default.tint,d:"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"}),a.createElement("path",{className:t.default.fill,d:"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"})))};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var spinner_module = require('./spinner.module.css.js');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function Spinner(_a) {
+    var _b = _a.size, size = _b === void 0 ? 18 : _b;
+    return (React__namespace.createElement("svg", { "aria-hidden": true, width: size, height: size, viewBox: "0 0 24 24", className: spinner_module["default"].svg, "data-chromatic": "ignore" },
+        React__namespace.createElement("g", { fill: "none", fillRule: "nonzero" },
+            React__namespace.createElement("path", { className: spinner_module["default"].tint, d: "M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z" }),
+            React__namespace.createElement("path", { className: spinner_module["default"].fill, d: "M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z" }))));
+}
+
+exports.Spinner = Spinner;
 //# sourceMappingURL=spinner.js.map

package/lib/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sources":["../../src/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size = 18 }: { size?: number }) {\n    return (\n        <svg\n            aria-hidden\n            width={size}\n            height={size}\n            viewBox=\"0 0 24 24\"\n            className={styles.svg}\n            data-chromatic=\"ignore\"\n        >\n            <g fill=\"none\" fillRule=\"nonzero\">\n                <path\n                    className={styles.tint}\n                    d=\"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z\"\n                />\n                <path\n                    className={styles.fill}\n                    d=\"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z\"\n                />\n            </g>\n        </svg>\n    )\n}\n\nexport { Spinner }\n"],"names":["size","React","width","height","viewBox","className","styles","svg","createElement","fill","fillRule","tint","d"],"mappings":"2aAGA,UAAiBA,KAAEA,EAAO,KACtB,OACIC,wCAEIC,MAAOF,EACPG,OAAQH,EACRI,QAAQ,YACRC,UAAWC,EAAM,QAACC,qBACH,UAEfN,EAAAO,cAAA,IAAA,CAAGC,KAAK,OAAOC,SAAS,WACpBT,EACIO,cAAA,OAAA,CAAAH,UAAWC,EAAM,QAACK,KAClBC,EAAE,iJAENX,EAAAO,cAAA,OAAA,CACIH,UAAWC,EAAM,QAACG,KAClBG,EAAE"}
+{"version":3,"file":"spinner.js","sources":["../../src/spinner/spinner.tsx"],"sourcesContent":[null],"names":["React","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,SAAS,OAAO,CAAC,EAAgC,EAAA;AAA9B,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,IAAS,EAAT,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,GAAA,EAAA,CAAA;IACxB,QACIA,6DAEI,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,WAAW,EACnB,SAAS,EAAEC,yBAAM,CAAC,GAAG,oBACN,QAAQ,EAAA;AAEvB,QAAAD,gBAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAA;YAC7BA,gBACI,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEC,yBAAM,CAAC,IAAI,EACtB,CAAC,EAAC,8IAA8I,EAClJ,CAAA;AACF,YAAAD,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAEC,yBAAM,CAAC,IAAI,EACtB,CAAC,EAAC,2NAA2N,EAAA,CAC/N,CACF,CACF,EACT;AACL;;;;"}

package/lib/spinner/spinner.module.css.js

@@ -1,2 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={svg:"_51539197",spinner:"_54fbe2b3",tint:"a0c466ed",fill:"_745b73d3"};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_c7f5018f = {"svg":"_51539197","spinner":"_54fbe2b3","tint":"a0c466ed","fill":"_745b73d3"};
+
+exports["default"] = modules_c7f5018f;
 //# sourceMappingURL=spinner.module.css.js.map

package/lib/spinner/spinner.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"spinner.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/lib/stack/index.d.ts

@@ -1 +1 @@
-export * from './stack';
+export * from './stack';

package/lib/stack/stack.d.ts

@@ -1,15 +1,15 @@
-import type { ResponsiveProp } from '../utils/responsive-props';
-import type { DividerWeight, Space } from '../utils/common-types';
-import type { ReusableBoxProps } from '../box';
-type Align = 'start' | 'center' | 'end';
-interface StackProps extends ReusableBoxProps {
-    /** Space between items */
-    space?: ResponsiveProp<Space>;
-    /** Align items horizontally */
-    align?: ResponsiveProp<Align>;
-    /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */
-    dividers?: DividerWeight;
-}
-declare const Stack: import("../utils/polymorphism").PolymorphicComponent<"div", StackProps, "obfuscateClassName">;
-export type { StackProps };
-export { Stack };
+import type { ResponsiveProp } from '../utils/responsive-props';
+import type { DividerWeight, Space } from '../utils/common-types';
+import type { ReusableBoxProps } from '../box';
+type Align = 'start' | 'center' | 'end';
+interface StackProps extends ReusableBoxProps {
+    /** Space between items */
+    space?: ResponsiveProp<Space>;
+    /** Align items horizontally */
+    align?: ResponsiveProp<Align>;
+    /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */
+    dividers?: DividerWeight;
+}
+declare const Stack: import("../utils/polymorphism").PolymorphicComponent<"div", StackProps, "obfuscateClassName">;
+export type { StackProps };
+export { Stack };

package/lib/stack/stack.js

@@ -1,2 +1,53 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("react-keyed-flatten-children"),i=require("../utils/polymorphism.js"),n=require("../utils/responsive-props.js"),l=require("../box/box.js"),a=require("../divider/divider.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var c=s(r),u=o(t);const d=["as","space","align","dividers","width","children","exceptionallySetClassName"];exports.Stack=i.polymorphicComponent((function(r,t){let{as:i,space:o,align:s,dividers:p="none",width:f="full",children:m,exceptionallySetClassName:v}=r,j=e.objectWithoutProperties(r,d);const b=void 0===s?void 0:n.mapResponsiveProp(s,e=>"start"===e?"flexStart":"end"===e?"flexEnd":"center");return c.createElement(l.Box,e.objectSpread2(e.objectSpread2({},j),{},{display:"flex",flexDirection:"column",width:f,alignItems:b,gap:o,as:i,className:v,ref:t}),"none"!==p?c.Children.map(u.default(m),(e,r)=>r>0?c.createElement(c.Fragment,null,c.createElement(a.Divider,{weight:p}),e):e):m)}));
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var flattenChildren = require('react-keyed-flatten-children');
+var polymorphism = require('../utils/polymorphism.js');
+var responsiveProps = require('../utils/responsive-props.js');
+var box = require('../box/box.js');
+var divider = require('../divider/divider.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var flattenChildren__default = /*#__PURE__*/_interopDefaultLegacy(flattenChildren);
+
+var Stack = polymorphism.polymorphicComponent(function Stack(_a, ref) {
+    var as = _a.as, space = _a.space, align = _a.align, _b = _a.dividers, dividers = _b === void 0 ? 'none' : _b, _c = _a.width, width = _c === void 0 ? 'full' : _c, children = _a.children, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["as", "space", "align", "dividers", "width", "children", "exceptionallySetClassName"]);
+    var alignItems = align === undefined
+        ? undefined
+        : responsiveProps.mapResponsiveProp(align, function (align) {
+            return align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center';
+        });
+    return (React__namespace.createElement(box.Box, tslib.__assign({}, props, { display: "flex", flexDirection: "column", width: width, alignItems: alignItems, gap: space, as: as, className: exceptionallySetClassName, ref: ref }), dividers !== 'none'
+        ? React__namespace.Children.map(flattenChildren__default["default"](children), function (child, index) {
+            return index > 0 ? (React__namespace.createElement(React__namespace.Fragment, null,
+                React__namespace.createElement(divider.Divider, { weight: dividers }),
+                child)) : (child);
+        })
+        : children));
+});
+
+exports.Stack = Stack;
 //# sourceMappingURL=stack.js.map

package/lib/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sources":["../../src/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { mapResponsiveProp } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../utils/responsive-props'\nimport type { DividerWeight, Space } from '../utils/common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\ntype Align = 'start' | 'center' | 'end'\n\ninterface StackProps extends ReusableBoxProps {\n    /** Space between items */\n    space?: ResponsiveProp<Space>\n    /** Align items horizontally */\n    align?: ResponsiveProp<Align>\n    /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */\n    dividers?: DividerWeight\n}\n\nconst Stack = polymorphicComponent<'div', StackProps>(function Stack(\n    {\n        as,\n        space,\n        align,\n        dividers = 'none',\n        width = 'full',\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const alignItems: BoxProps['alignItems'] =\n        align === undefined\n            ? undefined\n            : mapResponsiveProp(align, (align) =>\n                  align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n              )\n\n    return (\n        <Box\n            {...props}\n            display=\"flex\"\n            flexDirection=\"column\"\n            width={width}\n            alignItems={alignItems}\n            gap={space}\n            as={as}\n            className={exceptionallySetClassName}\n            ref={ref}\n        >\n            {dividers !== 'none'\n                ? React.Children.map(flattenChildren(children), (child, index) =>\n                      index > 0 ? (\n                          <>\n                              <Divider weight={dividers} />\n                              {child}\n                          </>\n                      ) : (\n                          child\n                      ),\n                  )\n                : children}\n        </Box>\n    )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["polymorphicComponent","_ref","ref","as","space","align","dividers","width","children","exceptionallySetClassName","props","_objectWithoutProperties","objectWithoutProperties","_excluded","alignItems","undefined","mapResponsiveProp","React","createElement","Box","display","flexDirection","gap","className","Children","map","flattenChildren","child","index","Fragment","Divider","weight"],"mappings":"0xBAsBcA,EAAAA,sBAAwC,SAAAC,EAWlDC,GAAG,IAVHC,GACIA,EADJC,MAEIA,EAFJC,MAGIA,EAHJC,SAIIA,EAAW,OAJfC,MAKIA,EAAQ,OALZC,SAMIA,EANJC,0BAOIA,GAGDR,EAFIS,EAEJC,EAAAC,wBAAAX,EAAAY,GAEH,MAAMC,OACQC,IAAVV,OACMU,EACAC,EAAAA,kBAAkBX,EAAQA,GACZ,UAAVA,EAAoB,YAAwB,QAAVA,EAAkB,UAAY,UAG9E,OACIY,EAACC,cAAAC,yCACOT,GADR,GAAA,CAEIU,QAAQ,OACRC,cAAc,SACdd,MAAOA,EACPO,WAAYA,EACZQ,IAAKlB,EACLD,GAAIA,EACJoB,UAAWd,EACXP,IAAKA,IAES,SAAbI,EACKW,EAAMO,SAASC,IAAIC,EAAe,QAAClB,GAAW,CAACmB,EAAOC,IAClDA,EAAQ,EACJX,EAAAC,cAAAD,EAAAY,SAAA,KACIZ,EAAAC,cAACY,UAAO,CAACC,OAAQzB,IAChBqB,GAGLA,GAGRnB"}
+{"version":3,"file":"stack.js","sources":["../../src/stack/stack.tsx"],"sourcesContent":[null],"names":["polymorphicComponent","__rest","mapResponsiveProp","React","Box","flattenChildren","Divider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBM,IAAA,KAAK,GAAGA,iCAAoB,CAAoB,SAAS,KAAK,CAChE,EASC,EACD,GAAG,EAAA;AATC,IAAA,IAAA,EAAE,GAAA,EAAA,CAAA,EAAA,EACF,KAAK,WAAA,EACL,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,EAAiB,GAAA,EAAA,CAAA,QAAA,EAAjB,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,MAAM,GAAA,EAAA,EACjB,EAAc,GAAA,EAAA,CAAA,KAAA,EAAd,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,MAAM,GAAA,EAAA,EACd,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,yBAAyB,GAAA,EAAA,CAAA,yBAAA,EACtB,KAAK,GAAAC,YAAA,CAAA,EAAA,EARZ,sFASC,CADW,CAAA;AAIZ,IAAA,IAAM,UAAU,GACZ,KAAK,KAAK,SAAS;AACf,UAAE,SAAS;AACX,UAAEC,iCAAiB,CAAC,KAAK,EAAE,UAAC,KAAK,EAAA;YAC3B,OAAA,KAAK,KAAK,OAAO,GAAG,WAAW,GAAG,KAAK,KAAK,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAA;AAAxE,SAAwE,CAC3E,CAAA;AAEX,IAAA,QACIC,gBAAC,CAAA,aAAA,CAAAC,OAAG,qBACI,KAAK,EAAA,EACT,OAAO,EAAC,MAAM,EACd,aAAa,EAAC,QAAQ,EACtB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,KAAK,EACV,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,yBAAyB,EACpC,GAAG,EAAE,GAAG,EAEP,CAAA,EAAA,QAAQ,KAAK,MAAM;AAChB,UAAED,gBAAK,CAAC,QAAQ,CAAC,GAAG,CAACE,mCAAe,CAAC,QAAQ,CAAC,EAAE,UAAC,KAAK,EAAE,KAAK,EAAA;AACvD,YAAA,OAAA,KAAK,GAAG,CAAC,IACLF,gBAAA,CAAA,aAAA,CAAAA,gBAAA,CAAA,QAAA,EAAA,IAAA;AACI,gBAAAA,gBAAA,CAAA,aAAA,CAACG,eAAO,EAAA,EAAC,MAAM,EAAE,QAAQ,EAAI,CAAA;AAC5B,gBAAA,KAAK,CACP,KAEH,KAAK,CACR,CAAA;AAPD,SAOC,CACJ;AACH,UAAE,QAAQ,CACZ,EACT;AACL,CAAC;;;;"}

package/lib/switch-field/index.d.ts

@@ -1 +1 @@
-export * from './switch-field';
+export * from './switch-field';

package/lib/switch-field/switch-field.d.ts

@@ -1,19 +1,19 @@
-import * as React from 'react';
-import { FieldComponentProps } from '../base-field';
-interface SwitchFieldProps extends Omit<FieldComponentProps<HTMLInputElement>, 'type' | 'auxiliaryLabel' | 'maxWidth' | 'aria-describedby' | 'aria-label' | 'aria-labelledby'> {
-    /**
-     * Identifies the element (or elements) that describes the switch for assistive technologies.
-     */
-    'aria-describedby'?: string;
-    /**
-     * Defines a string value that labels the current switch for assistive technologies.
-     */
-    'aria-label'?: string;
-    /**
-     * Identifies the element (or elements) that labels the current switch for assistive technologies.
-     */
-    'aria-labelledby'?: string;
-}
-declare const SwitchField: React.ForwardRefExoticComponent<Omit<SwitchFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export { SwitchField };
-export type { SwitchFieldProps };
+import * as React from 'react';
+import { FieldComponentProps } from '../base-field';
+interface SwitchFieldProps extends Omit<FieldComponentProps<HTMLInputElement>, 'type' | 'auxiliaryLabel' | 'maxWidth' | 'aria-describedby' | 'aria-label' | 'aria-labelledby'> {
+    /**
+     * Identifies the element (or elements) that describes the switch for assistive technologies.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Defines a string value that labels the current switch for assistive technologies.
+     */
+    'aria-label'?: string;
+    /**
+     * Identifies the element (or elements) that labels the current switch for assistive technologies.
+     */
+    'aria-labelledby'?: string;
+}
+declare const SwitchField: React.ForwardRefExoticComponent<Omit<SwitchFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { SwitchField };
+export type { SwitchFieldProps };

package/lib/switch-field/switch-field.js

@@ -1,2 +1,75 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),t=require("../stack/stack.js"),r=require("../text/text.js"),n=require("../hidden-visually/hidden-visually.js"),i=require("../base-field/base-field.js"),d=require("../utils/common-helpers.js"),u=require("./switch-field.module.css.js");function s(e){if(e&&e.__esModule)return e;var l=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var t=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(l,a,t.get?t:{enumerable:!0,get:function(){return e[a]}})}})),l.default=e,l}var c=s(l);const o=["label","message","tone","disabled","hidden","defaultChecked","id","aria-describedby","aria-label","aria-labelledby","onChange"];exports.SwitchField=c.forwardRef((function(l,s){var b,f,h;let{label:p,message:m,tone:y="neutral",disabled:g=!1,hidden:j,defaultChecked:v,id:k,"aria-describedby":x,"aria-label":q,"aria-labelledby":E,onChange:S}=l,B=e.objectWithoutProperties(l,o);const C=d.useId(k),O=d.useId(),P=null!=x?x:m?O:void 0,_=null!=q?q:void 0,w=null!=E?E:void 0,[N,F]=c.useState(!1),[I,K]=c.useState(null!=(b=null!=(f=B.checked)?f:v)&&b),M=null!=(h=B.checked)?h:I;return c.createElement(t.Stack,{space:"small",hidden:j},c.createElement(a.Box,{className:[u.default.container,g?u.default.disabled:null,M?u.default.checked:null,N?u.default.keyFocused:null],as:"label",display:"flex",alignItems:"center"},c.createElement(a.Box,{position:"relative",display:"inlineBlock",overflow:"visible",marginRight:"small",flexShrink:0,className:u.default.toggle},c.createElement(n.HiddenVisually,null,c.createElement("input",e.objectSpread2(e.objectSpread2({},B),{},{id:C,type:"checkbox",disabled:g,"aria-describedby":P,"aria-label":_,"aria-labelledby":w,ref:s,checked:M,onChange:e=>{null==S||S(e),e.defaultPrevented||K(e.currentTarget.checked)},onBlur:e=>{F(!1),null==B||null==B.onBlur||B.onBlur(e)},onKeyUp:e=>{F(!0),null==B||null==B.onKeyUp||B.onKeyUp(e)}}))),c.createElement("span",{className:u.default.handle})),c.createElement(r.Text,{exceptionallySetClassName:u.default.label},p)),m?c.createElement(i.FieldMessage,{id:O,tone:y},m):null)}));
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var box = require('../box/box.js');
+var stack = require('../stack/stack.js');
+var text = require('../text/text.js');
+var hiddenVisually = require('../hidden-visually/hidden-visually.js');
+var baseField = require('../base-field/base-field.js');
+var commonHelpers = require('../utils/common-helpers.js');
+var switchField_module = require('./switch-field.module.css.js');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var SwitchField = React__namespace.forwardRef(function SwitchField(_a, ref) {
+    var _b, _c, _d;
+    var label = _a.label, message = _a.message, _e = _a.tone, tone = _e === void 0 ? 'neutral' : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, hidden = _a.hidden, defaultChecked = _a.defaultChecked, originalId = _a.id, originalAriaDescribedBy = _a["aria-describedby"], originalAriaLabel = _a["aria-label"], originalAriaLabelledby = _a["aria-labelledby"], onChange = _a.onChange, props = tslib.__rest(_a, ["label", "message", "tone", "disabled", "hidden", "defaultChecked", "id", 'aria-describedby', 'aria-label', 'aria-labelledby', "onChange"]);
+    var id = commonHelpers.useId(originalId);
+    var messageId = commonHelpers.useId();
+    var ariaDescribedBy = originalAriaDescribedBy !== null && originalAriaDescribedBy !== void 0 ? originalAriaDescribedBy : (message ? messageId : undefined);
+    var ariaLabel = originalAriaLabel !== null && originalAriaLabel !== void 0 ? originalAriaLabel : undefined;
+    var ariaLabelledBy = originalAriaLabelledby !== null && originalAriaLabelledby !== void 0 ? originalAriaLabelledby : undefined;
+    var _g = React__namespace.useState(false), keyFocused = _g[0], setKeyFocused = _g[1];
+    var _h = React__namespace.useState((_c = (_b = props.checked) !== null && _b !== void 0 ? _b : defaultChecked) !== null && _c !== void 0 ? _c : false), checkedState = _h[0], setChecked = _h[1];
+    var isChecked = (_d = props.checked) !== null && _d !== void 0 ? _d : checkedState;
+    return (React__namespace.createElement(stack.Stack, { space: "small", hidden: hidden },
+        React__namespace.createElement(box.Box, { className: [
+                switchField_module["default"].container,
+                disabled ? switchField_module["default"].disabled : null,
+                isChecked ? switchField_module["default"].checked : null,
+                keyFocused ? switchField_module["default"].keyFocused : null,
+            ], as: "label", display: "flex", alignItems: "center" },
+            React__namespace.createElement(box.Box, { position: "relative", display: "inlineBlock", overflow: "visible", marginRight: "small", flexShrink: 0, className: switchField_module["default"].toggle },
+                React__namespace.createElement(hiddenVisually.HiddenVisually, null,
+                    React__namespace.createElement("input", tslib.__assign({}, props, { id: id, type: "checkbox", disabled: disabled, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref: ref, checked: isChecked, onChange: function (event) {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(event);
+                            if (!event.defaultPrevented) {
+                                setChecked(event.currentTarget.checked);
+                            }
+                        }, onBlur: function (event) {
+                            var _a;
+                            setKeyFocused(false);
+                            (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                        }, onKeyUp: function (event) {
+                            var _a;
+                            setKeyFocused(true);
+                            (_a = props === null || props === void 0 ? void 0 : props.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                        } }))),
+                React__namespace.createElement("span", { className: switchField_module["default"].handle })),
+            React__namespace.createElement(text.Text, { exceptionallySetClassName: switchField_module["default"].label }, label)),
+        message ? (React__namespace.createElement(baseField.FieldMessage, { id: messageId, tone: tone }, message)) : null));
+});
+
+exports.SwitchField = SwitchField;
 //# sourceMappingURL=switch-field.js.map

package/lib/switch-field/switch-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-field.js","sources":["../../src/switch-field/switch-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\nimport { HiddenVisually } from '../hidden-visually'\nimport { FieldComponentProps, FieldMessage } from '../base-field'\nimport { useId } from '../utils/common-helpers'\nimport styles from './switch-field.module.css'\n\ninterface SwitchFieldProps\n    extends Omit<\n        FieldComponentProps<HTMLInputElement>,\n        | 'type'\n        | 'auxiliaryLabel'\n        | 'maxWidth'\n        | 'aria-describedby'\n        | 'aria-label'\n        | 'aria-labelledby'\n    > {\n    /**\n     * Identifies the element (or elements) that describes the switch for assistive technologies.\n     */\n    'aria-describedby'?: string\n\n    /**\n     * Defines a string value that labels the current switch for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current switch for assistive technologies.\n     */\n    'aria-labelledby'?: string\n}\n\nconst SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(\n    {\n        label,\n        message,\n        tone = 'neutral',\n        disabled = false,\n        hidden,\n        defaultChecked,\n        id: originalId,\n        'aria-describedby': originalAriaDescribedBy,\n        'aria-label': originalAriaLabel,\n        'aria-labelledby': originalAriaLabelledby,\n        onChange,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(originalId)\n    const messageId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : undefined)\n    const ariaLabel = originalAriaLabel ?? undefined\n    const ariaLabelledBy = originalAriaLabelledby ?? undefined\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    styles.container,\n                    disabled ? styles.disabled : null,\n                    isChecked ? styles.checked : null,\n                    keyFocused ? styles.keyFocused : null,\n                ]}\n                as=\"label\"\n                display=\"flex\"\n                alignItems=\"center\"\n            >\n                <Box\n                    position=\"relative\"\n                    display=\"inlineBlock\"\n                    overflow=\"visible\"\n                    marginRight=\"small\"\n                    flexShrink={0}\n                    className={styles.toggle}\n                >\n                    <HiddenVisually>\n                        <input\n                            {...props}\n                            id={id}\n                            type=\"checkbox\"\n                            disabled={disabled}\n                            aria-describedby={ariaDescribedBy}\n                            aria-label={ariaLabel}\n                            aria-labelledby={ariaLabelledBy}\n                            ref={ref}\n                            checked={isChecked}\n                            onChange={(event) => {\n                                onChange?.(event)\n                                if (!event.defaultPrevented) {\n                                    setChecked(event.currentTarget.checked)\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setKeyFocused(false)\n                                props?.onBlur?.(event)\n                            }}\n                            onKeyUp={(event) => {\n                                setKeyFocused(true)\n                                props?.onKeyUp?.(event)\n                            }}\n                        />\n                    </HiddenVisually>\n                    <span className={styles.handle} />\n                </Box>\n                <Text exceptionallySetClassName={styles.label}>{label}</Text>\n            </Box>\n            {message ? (\n                <FieldMessage id={messageId} tone={tone}>\n                    {message}\n                </FieldMessage>\n            ) : null}\n        </Stack>\n    )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["React","forwardRef","ref","_ref2","_props$checked","_props$checked2","label","message","tone","disabled","hidden","defaultChecked","id","originalId","aria-describedby","originalAriaDescribedBy","aria-label","originalAriaLabel","aria-labelledby","originalAriaLabelledby","onChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","useId","messageId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","useState","checkedState","setChecked","checked","isChecked","createElement","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","handle","Text","exceptionallySetClassName","FieldMessage"],"mappings":"+0BAmCoBA,EAAMC,YAA+C,SAerEC,EAAAA,GAAG,IAAAC,EAAAC,EAAAC,EAAA,IAdHC,MACIA,EADJC,QAEIA,EAFJC,KAGIA,EAAO,UAHXC,SAIIA,GAAW,EAJfC,OAKIA,EALJC,eAMIA,EACAC,GAAIC,EACJC,mBAAoBC,EACpBC,aAAcC,EACdC,kBAAmBC,EAVvBC,SAWIA,GAGDC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMb,EAAKc,QAAMb,GACXc,EAAYD,EAAAA,QAEZE,EAAkBb,MAAAA,EAAAA,EAA4BR,EAAUoB,OAAYE,EACpEC,EAAYb,MAAAA,EAAAA,OAAqBY,EACjCE,EAAiBZ,MAAAA,EAAAA,OAA0BU,GAE1CG,EAAYC,GAAiBjC,EAAMkC,UAAS,IAC5CC,EAAcC,GAAcpC,EAAMkC,SAAN,OAAeZ,EAAf,OAAeA,EAAAA,EAAMe,SAArBjC,EAAgCO,IAAhCR,GAC7BmC,SAAYhB,EAAAA,EAAMe,WAAWF,EAEnC,OACInC,EAACuC,cAAAC,QAAM,CAAAC,MAAM,QAAQ/B,OAAQA,GACzBV,EAACuC,cAAAG,MACG,CAAAC,UAAW,CACPC,EAAAA,QAAOC,UACPpC,EAAWmC,EAAAA,QAAOnC,SAAW,KAC7B6B,EAAYM,EAAM,QAACP,QAAU,KAC7BL,EAAaY,EAAM,QAACZ,WAAa,MAErCc,GAAG,QACHC,QAAQ,OACRC,WAAW,UAEXhD,EAACuC,cAAAG,MACG,CAAAO,SAAS,WACTF,QAAQ,cACRG,SAAS,UACTC,YAAY,QACZC,WAAY,EACZT,UAAWC,EAAM,QAACS,QAElBrD,EAAAuC,cAACe,iBAAc,KACXtD,EAAAuC,cAAA,2CACQjB,GADR,GAAA,CAEIV,GAAIA,EACJ2C,KAAK,WACL9C,SAAUA,qBACQmB,EAAeZ,aACrBc,EAASZ,kBACJa,EACjB7B,IAAKA,EACLmC,QAASC,EACTlB,SAAWoC,IACP,MAAApC,GAAAA,EAAWoC,GACNA,EAAMC,kBACPrB,EAAWoB,EAAME,cAAcrB,UAGvCsB,OAASH,IACLvB,GAAc,GACT,MAALX,SAAAA,EAAOqC,QAAPrC,EAAOqC,OAASH,IAEpBI,QAAUJ,IACNvB,GAAc,GACT,MAALX,SAAAA,EAAOsC,SAAPtC,EAAOsC,QAAUJ,QAI7BxD,EAAAuC,cAAA,OAAA,CAAMI,UAAWC,EAAM,QAACiB,UAE5B7D,EAACuC,cAAAuB,OAAK,CAAAC,0BAA2BnB,EAAM,QAACtC,OAAQA,IAEnDC,EACGP,EAAAuC,cAACyB,EAAAA,aAAa,CAAApD,GAAIe,EAAWnB,KAAMA,GAC9BD,GAEL"}
+{"version":3,"file":"switch-field.js","sources":["../../src/switch-field/switch-field.tsx"],"sourcesContent":[null],"names":["React","__rest","useId","Stack","Box","styles","HiddenVisually","__assign","Text","FieldMessage"],"mappings":"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"}

package/lib/switch-field/switch-field.module.css.js

@@ -1,2 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"bae487be",disabled:"_408d32a0",checked:"_99b0ead7",toggle:"_5af09fb5",label:"a66e1846",handle:"_0dcf70ec",keyFocused:"_1f5e7fd4"};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_8e05f7c9 = {"disabled":"_408d32a0","label":"a66e1846","checked":"_99b0ead7","toggle":"_5af09fb5","handle":"_0dcf70ec","keyFocused":"_1f5e7fd4","container":"bae487be"};
+
+exports["default"] = modules_8e05f7c9;
 //# sourceMappingURL=switch-field.module.css.js.map

package/lib/switch-field/switch-field.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-field.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"switch-field.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/lib/tabs/index.d.ts

@@ -1 +1 @@
-export * from './tabs';
+export * from './tabs';

package/lib/tabs/tabs.d.ts

@@ -1,125 +1,125 @@
-import * as React from 'react';
-import { TabProps as BaseTabProps, TabPanelProps as BaseTabPanelProps } from '@ariakit/react';
-import type { ObfuscatedClassName, Space } from '../utils/common-types';
-interface TabsProps {
-    /**
-     * The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>`
-     * components
-     */
-    children: React.ReactNode;
-    /**
-     * Determines the look and feel of the tabs
-     */
-    variant?: 'themed' | 'neutral';
-    /**
-     * The id of the selected tab. Assigning a value makes this a controlled component
-     */
-    selectedId?: string | null;
-    /**
-     * The tab to initially select. This can be used if the component should not
-     * be a controlled component but needs to have a tab selected
-     */
-    defaultSelectedId?: string | null;
-    /**
-     * Called with the tab id when a tab is selected
-     */
-    onSelectedIdChange?: (selectedId: string | null | undefined) => void;
-}
-/**
- * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
- */
-declare function Tabs({ children, selectedId, defaultSelectedId, variant, onSelectedIdChange, }: TabsProps): React.ReactElement;
-interface TabProps extends ObfuscatedClassName, Omit<BaseTabProps, 'store' | 'className' | 'children' | 'id'> {
-    /**
-     * The content to render inside of the tab button
-     */
-    children: React.ReactNode;
-    /**
-     * The tab's identifier. This must match its corresponding `<TabPanel>`'s id
-     */
-    id: string;
-    /**
-     * Defines wether or not the tab is disabled.
-     */
-    disabled?: boolean;
-}
-/**
- * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
- */
-declare const Tab: React.ForwardRefExoticComponent<Omit<TabProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-type TabListProps = ({
-    /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */
-    'aria-label': string;
-} | {
-    /**
-     * One or more element IDs used to label the tab list for assistive technologies. Required if
-     * `aria-label` is omitted.
-     */
-    'aria-labelledby': string;
-} | {
-    /**
-     * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden
-     */
-    'aria-hidden': boolean;
-}) & {
-    /**
-     * A list of `<Tab>` elements
-     */
-    children: React.ReactNode;
-    /**
-     * Controls the spacing between tabs
-     */
-    space?: Space;
-    /**
-     * The width of the tab list.
-     *
-     * - `'maxContent'`: Each tab will be as wide as its content.
-     * - `'full'`: Each tab will be as wide as the tab list.
-     *
-     * @default 'maxContent'
-     */
-    width?: 'maxContent' | 'full';
-    /**
-     * How to align the tabs within the tab list.
-     *
-     * @default 'start'
-     */
-    align?: 'start' | 'center' | 'end';
-} & ObfuscatedClassName;
-/**
- * A component used to group `<Tab>` elements together.
- */
-declare function TabList({ children, space, width, align, exceptionallySetClassName, ...props }: TabListProps): React.ReactElement | null;
-interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement>, Pick<BaseTabPanelProps, 'render'> {
-    /** The content to be rendered inside the tab */
-    children?: React.ReactNode;
-    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */
-    id: string;
-    /**
-     * By default, the tab panel's content is always rendered even when they are not active. This
-     * behaviour can be changed to 'active', which renders only when the tab is active, and 'lazy',
-     * meaning while inactive tab panels will not be rendered initially, they will remain mounted
-     * once they are active until the entire Tabs tree is unmounted.
-     */
-    renderMode?: 'always' | 'active' | 'lazy';
-}
-/**
- * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a
- * corresponding `<Tab>` component.
- */
-declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
-type TabAwareSlotProps = {
-    /**
-     * Render prop used to provide the content to be rendered inside the slot. The render prop will
-     * be called with the current `selectedId`
-     */
-    children: (provided: {
-        selectedId?: string | null;
-    }) => React.ReactElement | null;
-};
-/**
- * Allows content to be rendered based on the current tab being selected while outside of the
- * TabPanel component. Can be placed freely within the main `<Tabs>` component.
- */
-declare function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null;
-export { Tab, Tabs, TabList, TabPanel, TabAwareSlot };
+import * as React from 'react';
+import { TabProps as BaseTabProps, TabPanelProps as BaseTabPanelProps } from '@ariakit/react';
+import type { ObfuscatedClassName, Space } from '../utils/common-types';
+interface TabsProps {
+    /**
+     * The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>`
+     * components
+     */
+    children: React.ReactNode;
+    /**
+     * Determines the look and feel of the tabs
+     */
+    variant?: 'themed' | 'neutral';
+    /**
+     * The id of the selected tab. Assigning a value makes this a controlled component
+     */
+    selectedId?: string | null;
+    /**
+     * The tab to initially select. This can be used if the component should not
+     * be a controlled component but needs to have a tab selected
+     */
+    defaultSelectedId?: string | null;
+    /**
+     * Called with the tab id when a tab is selected
+     */
+    onSelectedIdChange?: (selectedId: string | null | undefined) => void;
+}
+/**
+ * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
+ */
+declare function Tabs({ children, selectedId, defaultSelectedId, variant, onSelectedIdChange, }: TabsProps): React.ReactElement;
+interface TabProps extends ObfuscatedClassName, Omit<BaseTabProps, 'store' | 'className' | 'children' | 'id'> {
+    /**
+     * The content to render inside of the tab button
+     */
+    children: React.ReactNode;
+    /**
+     * The tab's identifier. This must match its corresponding `<TabPanel>`'s id
+     */
+    id: string;
+    /**
+     * Defines wether or not the tab is disabled.
+     */
+    disabled?: boolean;
+}
+/**
+ * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
+ */
+declare const Tab: React.ForwardRefExoticComponent<Omit<TabProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type TabListProps = ({
+    /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */
+    'aria-label': string;
+} | {
+    /**
+     * One or more element IDs used to label the tab list for assistive technologies. Required if
+     * `aria-label` is omitted.
+     */
+    'aria-labelledby': string;
+} | {
+    /**
+     * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden
+     */
+    'aria-hidden': boolean;
+}) & {
+    /**
+     * A list of `<Tab>` elements
+     */
+    children: React.ReactNode;
+    /**
+     * Controls the spacing between tabs
+     */
+    space?: Space;
+    /**
+     * The width of the tab list.
+     *
+     * - `'maxContent'`: Each tab will be as wide as its content.
+     * - `'full'`: Each tab will be as wide as the tab list.
+     *
+     * @default 'maxContent'
+     */
+    width?: 'maxContent' | 'full';
+    /**
+     * How to align the tabs within the tab list.
+     *
+     * @default 'start'
+     */
+    align?: 'start' | 'center' | 'end';
+} & ObfuscatedClassName;
+/**
+ * A component used to group `<Tab>` elements together.
+ */
+declare function TabList({ children, space, width, align, exceptionallySetClassName, ...props }: TabListProps): React.ReactElement | null;
+interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement>, Pick<BaseTabPanelProps, 'render'> {
+    /** The content to be rendered inside the tab */
+    children?: React.ReactNode;
+    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */
+    id: string;
+    /**
+     * By default, the tab panel's content is always rendered even when they are not active. This
+     * behaviour can be changed to 'active', which renders only when the tab is active, and 'lazy',
+     * meaning while inactive tab panels will not be rendered initially, they will remain mounted
+     * once they are active until the entire Tabs tree is unmounted.
+     */
+    renderMode?: 'always' | 'active' | 'lazy';
+}
+/**
+ * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a
+ * corresponding `<Tab>` component.
+ */
+declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+type TabAwareSlotProps = {
+    /**
+     * Render prop used to provide the content to be rendered inside the slot. The render prop will
+     * be called with the current `selectedId`
+     */
+    children: (provided: {
+        selectedId?: string | null;
+    }) => React.ReactElement | null;
+};
+/**
+ * Allows content to be rendered based on the current tab being selected while outside of the
+ * TabPanel component. Can be placed freely within the main `<Tabs>` component.
+ */
+declare function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null;
+export { Tab, Tabs, TabList, TabPanel, TabAwareSlot };