@doist/reactist 29.1.0 → 29.1.2

package/lib/tooltip/tooltip.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var reactCompilerRuntime = require('react-compiler-runtime');
 var React = require('react');
 var react = require('@ariakit/react');
 var box = require('../box/box.js');
@@ -27,39 +28,94 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var defaultShowTimeout = 500;
-var defaultHideTimeout = 100;
-var TooltipContext = React__namespace.createContext({
-    showTimeout: defaultShowTimeout,
-    hideTimeout: defaultHideTimeout,
+const defaultShowTimeout = 500;
+const defaultHideTimeout = 100;
+const TooltipContext = /*#__PURE__*/React__namespace.createContext({
+  showTimeout: defaultShowTimeout,
+  hideTimeout: defaultHideTimeout
 });
-function TooltipProvider(_a) {
-    var _b = _a.showTimeout, showTimeout = _b === void 0 ? defaultShowTimeout : _b, _c = _a.hideTimeout, hideTimeout = _c === void 0 ? defaultHideTimeout : _c, children = _a.children;
-    var value = React__namespace.useMemo(function () { return ({ showTimeout: showTimeout, hideTimeout: hideTimeout }); }, [showTimeout, hideTimeout]);
-    return React__namespace.createElement(TooltipContext.Provider, { value: value }, children);
+function TooltipProvider(t0) {
+  const $ = reactCompilerRuntime.c(6);
+  const {
+    showTimeout: t1,
+    hideTimeout: t2,
+    children
+  } = t0;
+  const showTimeout = t1 === undefined ? defaultShowTimeout : t1;
+  const hideTimeout = t2 === undefined ? defaultHideTimeout : t2;
+  let t3;
+  if ($[0] !== hideTimeout || $[1] !== showTimeout) {
+    t3 = {
+      showTimeout,
+      hideTimeout
+    };
+    $[0] = hideTimeout;
+    $[1] = showTimeout;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const value = t3;
+  let t4;
+  if ($[3] !== children || $[4] !== value) {
+    t4 = /*#__PURE__*/React__namespace.createElement(TooltipContext.Provider, {
+      value: value
+    }, children);
+    $[3] = children;
+    $[4] = value;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
 }
-var Tooltip = React__namespace.forwardRef(function (_a, ref) {
-    var children = _a.children, content = _a.content, _b = _a.position, position = _b === void 0 ? 'top' : _b, _c = _a.gapSize, gapSize = _c === void 0 ? 3 : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, showTimeout = _a.showTimeout, hideTimeout = _a.hideTimeout, exceptionallySetClassName = _a.exceptionallySetClassName;
-    var _e = React__namespace.useContext(TooltipContext), globalShowTimeout = _e.showTimeout, globalHideTimeout = _e.hideTimeout;
-    var tooltip = react.useTooltipStore({
-        placement: position,
-        showTimeout: showTimeout !== null && showTimeout !== void 0 ? showTimeout : globalShowTimeout,
-        hideTimeout: hideTimeout !== null && hideTimeout !== void 0 ? hideTimeout : globalHideTimeout,
-    });
-    React__namespace.useImperativeHandle(ref, function () { return tooltip; }, [tooltip]);
-    var isOpen = tooltip.useState('open');
-    var child = React__namespace.Children.only(children);
-    if (!child) {
-        return child;
-    }
-    if (typeof child.ref === 'string') {
-        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded');
-    }
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement(react.TooltipAnchor, { render: child, store: tooltip, ref: child.ref }),
-        isOpen && content ? (React__namespace.createElement(react.Tooltip, { store: tooltip, gutter: gapSize, render: React__namespace.createElement(box.Box, { className: [tooltip_module["default"].tooltip, exceptionallySetClassName], background: "toast", borderRadius: "standard", paddingX: "small", paddingY: "xsmall", maxWidth: "medium", width: "fitContent", overflow: "hidden", textAlign: "center" }) },
-            withArrow ? React__namespace.createElement(react.TooltipArrow, null) : null,
-            typeof content === 'function' ? content() : content)) : null));
+const Tooltip = /*#__PURE__*/React__namespace.forwardRef(({
+  children,
+  content,
+  position = 'top',
+  gapSize = 3,
+  withArrow = false,
+  showTimeout,
+  hideTimeout,
+  exceptionallySetClassName
+}, ref) => {
+  const {
+    showTimeout: globalShowTimeout,
+    hideTimeout: globalHideTimeout
+  } = React__namespace.useContext(TooltipContext);
+  const tooltip = react.useTooltipStore({
+    placement: position,
+    showTimeout: showTimeout ?? globalShowTimeout,
+    hideTimeout: hideTimeout ?? globalHideTimeout
+  });
+  React__namespace.useImperativeHandle(ref, () => tooltip, [tooltip]);
+  const isOpen = tooltip.useState('open');
+  const child = React__namespace.Children.only(children);
+  if (!child) {
+    return child;
+  }
+  if (typeof child.ref === 'string') {
+    throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded');
+  }
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(react.TooltipAnchor, {
+    render: child,
+    store: tooltip,
+    ref: child.ref
+  }), isOpen && content ? /*#__PURE__*/React__namespace.createElement(react.Tooltip, {
+    store: tooltip,
+    gutter: gapSize,
+    render: /*#__PURE__*/React__namespace.createElement(box.Box, {
+      className: [tooltip_module["default"].tooltip, exceptionallySetClassName],
+      background: "toast",
+      borderRadius: "standard",
+      paddingX: "small",
+      paddingY: "xsmall",
+      maxWidth: "medium",
+      width: "fitContent",
+      overflow: "hidden",
+      textAlign: "center"
+    })
+  }, withArrow ? /*#__PURE__*/React__namespace.createElement(react.TooltipArrow, null) : null, typeof content === 'function' ? content() : content) : null);
 });
 Tooltip.displayName = 'Tooltip';
 

package/lib/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":[null],"names":["React","useTooltipStore","TooltipAnchor","AriakitTooltip","Box","styles","TooltipArrow"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n    useTooltipStore,\n} from '@ariakit/react'\n\nimport { Box } from '../box'\n\nimport styles from './tooltip.module.css'\n\nimport type { TooltipStore, TooltipStoreState } from '@ariakit/react'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst defaultShowTimeout = 500\nconst defaultHideTimeout = 100\n\ntype TooltipContextState = {\n    showTimeout: number\n    hideTimeout: number\n}\n\nconst TooltipContext = React.createContext<TooltipContextState>({\n    showTimeout: defaultShowTimeout,\n    hideTimeout: defaultHideTimeout,\n})\n\nfunction TooltipProvider({\n    showTimeout = defaultShowTimeout,\n    hideTimeout = defaultHideTimeout,\n    children,\n}: React.PropsWithChildren<{\n    showTimeout?: number\n    hideTimeout?: number\n}>) {\n    const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])\n    return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>\n}\n\ninterface TooltipProps extends ObfuscatedClassName {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * The amount of time in milliseconds to wait before showing the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 500\n     */\n    showTimeout?: number\n\n    /**\n     * The amount of time in milliseconds to wait before hiding the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 100\n     */\n    hideTimeout?: number\n}\n\nconst Tooltip = React.forwardRef<TooltipStore, TooltipProps>(\n    (\n        {\n            children,\n            content,\n            position = 'top',\n            gapSize = 3,\n            withArrow = false,\n            showTimeout,\n            hideTimeout,\n            exceptionallySetClassName,\n        },\n        ref,\n    ) => {\n        const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } =\n            React.useContext(TooltipContext)\n\n        const tooltip = useTooltipStore({\n            placement: position,\n            showTimeout: showTimeout ?? globalShowTimeout,\n            hideTimeout: hideTimeout ?? globalHideTimeout,\n        })\n\n        React.useImperativeHandle(ref, () => tooltip, [tooltip])\n\n        const isOpen = tooltip.useState('open')\n\n        const child = React.Children.only(\n            children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n        )\n\n        if (!child) {\n            return child\n        }\n\n        if (typeof child.ref === 'string') {\n            throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n        }\n\n        return (\n            <>\n                <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n                {isOpen && content ? (\n                    <AriakitTooltip\n                        store={tooltip}\n                        gutter={gapSize}\n                        render={\n                            <Box\n                                className={[styles.tooltip, exceptionallySetClassName]}\n                                background=\"toast\"\n                                borderRadius=\"standard\"\n                                paddingX=\"small\"\n                                paddingY=\"xsmall\"\n                                maxWidth=\"medium\"\n                                width=\"fitContent\"\n                                overflow=\"hidden\"\n                                textAlign=\"center\"\n                            />\n                        }\n                    >\n                        {withArrow ? <TooltipArrow /> : null}\n                        {typeof content === 'function' ? content() : content}\n                    </AriakitTooltip>\n                ) : null}\n            </>\n        )\n    },\n)\n\nTooltip.displayName = 'Tooltip'\n\nexport type { TooltipProps }\nexport { Tooltip, TooltipProvider }\n"],"names":["defaultShowTimeout","defaultHideTimeout","TooltipContext","React","createContext","showTimeout","hideTimeout","TooltipProvider","t0","$","_c","t1","t2","children","undefined","t3","value","t4","createElement","Provider","Tooltip","forwardRef","content","position","gapSize","withArrow","exceptionallySetClassName","ref","globalShowTimeout","globalHideTimeout","useContext","tooltip","useTooltipStore","placement","useImperativeHandle","isOpen","useState","child","Children","only","Error","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","displayName"],"mappings":"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"}

package/lib/utils/common-helpers.js

@@ -24,25 +24,26 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var uid = 0;
+let uid = 0;
 function uniqueId() {
-    return uid++;
+  return uid++;
 }
 function generateElementId(prefix) {
-    var num = uniqueId();
-    return "".concat(prefix, "-").concat(num);
+  const num = uniqueId();
+  return `${prefix}-${num}`;
 }
+
 /**
  * @deprecated Use `useId` available from React 18 or above instead.
  */
 function useId(providedId) {
-    var ref = React__namespace.useRef(providedId !== null && providedId !== void 0 ? providedId : null);
-    // eslint-disable-next-line react-hooks/refs
-    if (!ref.current) {
-        ref.current = generateElementId('element');
-    }
-    // eslint-disable-next-line react-hooks/refs
-    return ref.current;
+  const ref = React__namespace.useRef(providedId ?? null);
+  // eslint-disable-next-line react-hooks/refs
+  if (!ref.current) {
+    ref.current = generateElementId('element');
+  }
+  // eslint-disable-next-line react-hooks/refs
+  return ref.current;
 }
 
 exports.generateElementId = generateElementId;

package/lib/utils/common-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"common-helpers.js","sources":["../../src/utils/common-helpers.ts"],"sourcesContent":[null],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAI,GAAG,GAAG,CAAC,CAAA;AACX,SAAS,QAAQ,GAAA;IACb,OAAO,GAAG,EAAE,CAAA;AAChB,CAAC;AAEK,SAAU,iBAAiB,CAAC,MAAc,EAAA;AAC5C,IAAA,IAAM,GAAG,GAAG,QAAQ,EAAE,CAAA;AACtB,IAAA,OAAO,EAAG,CAAA,MAAA,CAAA,MAAM,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,GAAG,CAAE,CAAA;AAC7B,CAAC;AAED;;AAEG;AACG,SAAU,KAAK,CAAC,UAAmB,EAAA;AACrC,IAAA,IAAM,GAAG,GAAGA,gBAAK,CAAC,MAAM,CAAgB,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,KAAA,CAAA,GAAA,UAAU,GAAI,IAAI,CAAC,CAAA;;AAE3D,IAAA,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;AACd,QAAA,GAAG,CAAC,OAAO,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAA;KAC7C;;IAED,OAAO,GAAG,CAAC,OAAO,CAAA;AACtB;;;;;"}
+{"version":3,"file":"common-helpers.js","sources":["../../src/utils/common-helpers.ts"],"sourcesContent":["import * as React from 'react'\n\nlet uid = 0\nfunction uniqueId() {\n    return uid++\n}\n\nexport function generateElementId(prefix: string): string {\n    const num = uniqueId()\n    return `${prefix}-${num}`\n}\n\n/**\n * @deprecated Use `useId` available from React 18 or above instead.\n */\nexport function useId(providedId?: string): string {\n    const ref = React.useRef<string | null>(providedId ?? null)\n    // eslint-disable-next-line react-hooks/refs\n    if (!ref.current) {\n        ref.current = generateElementId('element')\n    }\n    // eslint-disable-next-line react-hooks/refs\n    return ref.current\n}\n"],"names":["uid","uniqueId","generateElementId","prefix","num","useId","providedId","ref","React","useRef","current"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAIA,GAAG,GAAG,CAAC,CAAA;AACX,SAASC,QAAQA,GAAG;AAChB,EAAA,OAAOD,GAAG,EAAE,CAAA;AAChB,CAAA;AAEO,SAASE,iBAAiBA,CAACC,MAAc,EAAU;AACtD,EAAA,MAAMC,GAAG,GAAGH,QAAQ,EAAE,CAAA;AACtB,EAAA,OAAO,CAAGE,EAAAA,MAAM,CAAIC,CAAAA,EAAAA,GAAG,CAAE,CAAA,CAAA;AAC7B,CAAA;;AAEA;AACA;AACA;AACO,SAASC,KAAKA,CAACC,UAAmB,EAAU;EAC/C,MAAMC,GAAG,GAAGC,gBAAK,CAACC,MAAM,CAAgBH,UAAU,IAAI,IAAI,CAAC,CAAA;AAC3D;AACA,EAAA,IAAI,CAACC,GAAG,CAACG,OAAO,EAAE;AACdH,IAAAA,GAAG,CAACG,OAAO,GAAGR,iBAAiB,CAAC,SAAS,CAAC,CAAA;AAC9C,GAAA;AACA;EACA,OAAOK,GAAG,CAACG,OAAO,CAAA;AACtB;;;;;"}

package/lib/utils/polymorphism.js

@@ -25,6 +25,89 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`
+ * prop instead.
+ *
+ * This can be customized via the second generic parameter, as there are cases where it may be
+ * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the
+ * `className` prop while not replacing it with the `exceptionallySetClassName` one.
+ *
+ * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop
+ * @see PolymorphicComponent for details about this feature
+ */
+
+/**
+ * Given a component or element type, and a set of additional props, this builds the entire set of
+ * props for a polymorphic component.
+ *
+ * It does three things:
+ *
+ * 1. it merges the element type props with the `OwnProps`
+ * 2. it adds the `as` prop to allow for polymorphism to happen
+ * 3. it optionally obfuscates or omits the className prop if present
+ *
+ * @see PolymorphicProp
+ * @see WithObfuscatedClassName
+ */
+
+/**
+ * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via
+ * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.
+ *
+ * @see PolymorphicComponentProps
+ * @see WithObfuscatedClassName
+ */
+
+/**
+ * A component that can customize the React element type that it renders (a.k.a. a polymorphic
+ * component). This is achieved by passing a prop `as={ElementType}` or `as="html-tag-name"`.
+ *
+ * It transparently takes care of forwarding refs, and properly sets the ref type depending on the
+ * element type.
+ *
+ * ## Recognizing props based on the polymorphic type
+ *
+ * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop
+ * component or HTML element is, the type system will automatically allow you to pass props that are
+ * not explicitly defined by you, but that are recognized as valid props to be passed to the
+ * component you are rendering.
+ *
+ * For instance, see the following example:
+ *
+ * ```jsx
+ * <Box as="label" htmlFor="field-id">Hello</Box>
+ * ```
+ *
+ * The `htmlFor` prop is exclusive to label elements. If you omit the `as="label"` prop, the type
+ * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of
+ * an incorrect type to such prop. For instance, the example below will issue a type error:
+ *
+ * ```jsx
+ * <Box as="label" htmlFor={123}>Hello</Box>
+ * ```
+ *
+ * ## Omitting or obfuscating the `className` prop
+ *
+ * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`
+ * prop instead.
+ *
+ * This is to discourage customizing design system components via custom styling, while still
+ * leaving the door open to do it as an escape hatch when the design system still has shortcomings
+ * with respect to the product designs we want to achieve.
+ *
+ * The cumbersome name also serves the purpose of aiding in easily searching for the places in the
+ * code where this escape hatch was needed, in order to identify areas where the design system
+ * components need to improve to better match our needs.
+ *
+ * This behaviour can be customized via an optional second generic argument that allows to disable
+ * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop
+ * name.
+ *
+ * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)
+ */
+
 /**
  * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a
  * convenience over merely using React.forwardRef directly, and then manually forcing the resulting
@@ -33,7 +116,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
  * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)
  */
 function polymorphicComponent(render) {
-    return React__namespace.forwardRef(render);
+  return /*#__PURE__*/React__namespace.forwardRef(render);
 }
 
 exports.polymorphicComponent = polymorphicComponent;

package/lib/utils/polymorphism.js.map

@@ -1 +1 @@
-{"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":[null],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAoLA;;;;;;AAMG;AACH,SAAS,oBAAoB,CAI3B,MAA6E,EAAA;AAC3E,IAAA,OAAOA,gBAAK,CAAC,UAAU,CAAC,MAAM,CAI7B,CAAA;AACL;;;;"}
+{"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport * as React from 'react'\n\nimport type { ObfuscatedClassName } from './common-types'\n\ntype Merge<P1, P2> = Omit<P1, keyof P2> & P2\n\ntype EmptyObject = {\n    [K in any]: never\n}\n\ntype ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName'\n\n/**\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This can be customized via the second generic parameter, as there are cases where it may be\n * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the\n * `className` prop while not replacing it with the `exceptionallySetClassName` one.\n *\n * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop\n * @see PolymorphicComponent for details about this feature\n */\ntype WithObfuscatedClassName<\n    Props,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode,\n> = 'className' extends keyof Props\n    ? ShouldObfuscateClassName extends 'obfuscateClassName'\n        ? Omit<Props, 'className'> & ObfuscatedClassName\n        : ShouldObfuscateClassName extends 'omitClassName'\n          ? Omit<Props, 'className'>\n          : ShouldObfuscateClassName extends 'keepClassName'\n            ? Props\n            : never\n    : Props\n\ntype PolymorphicProp<ComponentType extends React.ElementType> = {\n    /**\n     * Used to instruct this component what React element to render as. It can be both a string\n     * representing a HTML tag name, or a React component.\n     *\n     * When using this prop, the component you apply it to will also recognize in its props types\n     * all the props from the component or HTML element you are rendering it as.\n     *\n     * Some uses for this feature:\n     *\n     * - Using some of our layout components, while at the same time being able to set them to use\n     *   semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).\n     * - Using a design system link component, but have it internally use a client-side router link\n     *   implemented via a React component (e.g. react-router's `Link`).\n     *\n     * Keep in mind that not all compositions of this kind may work well, especially when composing\n     * with another React component and not with a HTML tag name. In particular, if the components\n     * being composed have opposing concerns of clashing features (e.g. they have contradicting\n     * styles applied to them) things may not go well. In those cases prefer to nest them instead.\n     *\n     * @see PolymorphicComponent\n     */\n    as?: ComponentType\n}\n\n/**\n * Given a component or element type, and a set of additional props, this builds the entire set of\n * props for a polymorphic component.\n *\n * It does three things:\n *\n * 1. it merges the element type props with the `OwnProps`\n * 2. it adds the `as` prop to allow for polymorphism to happen\n * 3. it optionally obfuscates or omits the className prop if present\n *\n * @see PolymorphicProp\n * @see WithObfuscatedClassName\n */\ntype PolymorphicComponentProps<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode,\n> = Merge<\n    WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>,\n    OwnProps & PolymorphicProp<ComponentType>\n>\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n    Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>\n\ntype ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName]\n\ntype ElementByTagOrAny<ComponentType extends React.ElementType> =\n    ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any\n\n/**\n * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via\n * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.\n *\n * @see PolymorphicComponentProps\n * @see WithObfuscatedClassName\n */\ninterface ForwardRefFunction<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode,\n> {\n    (\n        props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>,\n        ref:\n            | ((instance: ElementByTagOrAny<ComponentType> | null) => void)\n            | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null>\n            | null,\n    ): React.ReactElement | null\n    displayName?: string\n}\n\n/**\n * A component that can customize the React element type that it renders (a.k.a. a polymorphic\n * component). This is achieved by passing a prop `as={ElementType}` or `as=\"html-tag-name\"`.\n *\n * It transparently takes care of forwarding refs, and properly sets the ref type depending on the\n * element type.\n *\n * ## Recognizing props based on the polymorphic type\n *\n * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop\n * component or HTML element is, the type system will automatically allow you to pass props that are\n * not explicitly defined by you, but that are recognized as valid props to be passed to the\n * component you are rendering.\n *\n * For instance, see the following example:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor=\"field-id\">Hello</Box>\n * ```\n *\n * The `htmlFor` prop is exclusive to label elements. If you omit the `as=\"label\"` prop, the type\n * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of\n * an incorrect type to such prop. For instance, the example below will issue a type error:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor={123}>Hello</Box>\n * ```\n *\n * ## Omitting or obfuscating the `className` prop\n *\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This is to discourage customizing design system components via custom styling, while still\n * leaving the door open to do it as an escape hatch when the design system still has shortcomings\n * with respect to the product designs we want to achieve.\n *\n * The cumbersome name also serves the purpose of aiding in easily searching for the places in the\n * code where this escape hatch was needed, in order to identify areas where the design system\n * components need to improve to better match our needs.\n *\n * This behaviour can be customized via an optional second generic argument that allows to disable\n * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop\n * name.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\ninterface PolymorphicComponent<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName',\n> {\n    <TT extends React.ElementType = ComponentType>(\n        props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>,\n    ): React.ReactElement | null\n    readonly $$typeof: symbol\n    defaultProps?: Partial<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    propTypes?: React.WeakValidationMap<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    displayName?: string\n}\n\n/**\n * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a\n * convenience over merely using React.forwardRef directly, and then manually forcing the resulting\n * value to be typed using `as PolymorphicComponent<…>`.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\nfunction polymorphicComponent<\n    ComponentType extends React.ElementType = 'div',\n    OwnProps = EmptyObject,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName',\n>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>) {\n    return React.forwardRef(render) as PolymorphicComponent<\n        ComponentType,\n        OwnProps,\n        ShouldObfuscateClassName\n    >\n}\n\nexport type { PolymorphicComponent }\nexport { polymorphicComponent }\n"],"names":["polymorphicComponent","render","React","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAuCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,oBAAoBA,CAI3BC,MAA6E,EAAE;AAC7E,EAAA,oBAAOC,gBAAK,CAACC,UAAU,CAACF,MAAM,CAAC,CAAA;AAKnC;;;;"}

package/lib/utils/responsive-props.js

@@ -2,7 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DEBUG = process.env.NODE_ENV === 'development';
+/**
+ * A responsive prop supports receiving values of its given base type, or an object mapping a
+ * responsive breakpoint name to a value from the prop's base type.
+ *
+ * Some examples:
+ *
+ * - `align={{ mobile: 'left', tablet: 'center', desktop: 'right' }}`
+ */
+
+const DEBUG = process.env.NODE_ENV === 'development';
+
 /**
  * Builds a css module class name for a given prop + prop-value combination.
  *
@@ -21,27 +31,28 @@ var DEBUG = process.env.NODE_ENV === 'development';
  * @param value the given prop's value
  */
 function getClassNames(styles, property, value) {
-    if (!value) {
-        return null;
-    }
-    var classList = [];
-    if (typeof value === 'string') {
-        classList.push(styles["".concat(property, "-").concat(value)]);
-    }
-    else {
-        if (value.mobile)
-            classList.push(styles["".concat(property, "-").concat(value.mobile)]);
-        if (value.tablet)
-            classList.push(styles["tablet-".concat(property, "-").concat(value.tablet)]);
-        if (value.desktop)
-            classList.push(styles["desktop-".concat(property, "-").concat(value.desktop)]);
-    }
-    if (DEBUG && !classList.every(Boolean)) {
-        // eslint-disable-next-line no-console
-        console.warn('Not all generated class names were found', { property: property, value: value, classList: classList });
-    }
-    return classList;
+  if (!value) {
+    return null;
+  }
+  const classList = [];
+  if (typeof value === 'string') {
+    classList.push(styles[`${property}-${value}`]);
+  } else {
+    if (value.mobile) classList.push(styles[`${property}-${value.mobile}`]);
+    if (value.tablet) classList.push(styles[`tablet-${property}-${value.tablet}`]);
+    if (value.desktop) classList.push(styles[`desktop-${property}-${value.desktop}`]);
+  }
+  if (DEBUG && !classList.every(Boolean)) {
+    // eslint-disable-next-line no-console
+    console.warn('Not all generated class names were found', {
+      property,
+      value,
+      classList
+    });
+  }
+  return classList;
 }
+
 /**
  * A mapping over a responsive prop value.
  *
@@ -53,17 +64,17 @@ function getClassNames(styles, property, value) {
  * @param mapper the mapping function
  */
 function mapResponsiveProp(fromValue, mapper) {
-    if (!fromValue) {
-        return undefined;
-    }
-    if (typeof fromValue !== 'object') {
-        return mapper(fromValue);
-    }
-    return {
-        mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,
-        tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,
-        desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined,
-    };
+  if (!fromValue) {
+    return undefined;
+  }
+  if (typeof fromValue !== 'object') {
+    return mapper(fromValue);
+  }
+  return {
+    mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,
+    tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,
+    desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined
+  };
 }
 
 exports.getClassNames = getClassNames;

package/lib/utils/responsive-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-props.js","sources":["../../src/utils/responsive-props.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAgBA,IAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAA;AAEpD;;;;;;;;;;;;;;;;AAgBG;AACH,SAAS,aAAa,CAClB,MAA8B,EAC9B,QAAgB,EAChB,KAAgD,EAAA;IAEhD,IAAI,CAAC,KAAK,EAAE;AACR,QAAA,OAAO,IAAI,CAAA;KACd;IAED,IAAM,SAAS,GAA8B,EAAE,CAAA;AAE/C,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,QAAA,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAAA,CAAA,MAAA,CAAG,QAAQ,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,KAAK,CAAE,CAAC,CAAC,CAAA;KACjD;SAAM;QACH,IAAI,KAAK,CAAC,MAAM;AAAE,YAAA,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAAG,CAAA,MAAA,CAAA,QAAQ,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAE,CAAC,CAAC,CAAA;QACvE,IAAI,KAAK,CAAC,MAAM;AAAE,YAAA,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,SAAU,CAAA,MAAA,CAAA,QAAQ,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,CAAE,CAAC,CAAC,CAAA;QAC9E,IAAI,KAAK,CAAC,OAAO;AAAE,YAAA,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,UAAW,CAAA,MAAA,CAAA,QAAQ,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,KAAK,CAAC,OAAO,CAAE,CAAC,CAAC,CAAA;KACpF;IAED,IAAI,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;;AAEpC,QAAA,OAAO,CAAC,IAAI,CAAC,0CAA0C,EAAE,EAAE,QAAQ,EAAA,QAAA,EAAE,KAAK,OAAA,EAAE,SAAS,EAAA,SAAA,EAAE,CAAC,CAAA;KAC3F;AAED,IAAA,OAAO,SAAS,CAAA;AACpB,CAAC;AAED;;;;;;;;;AASG;AACH,SAAS,iBAAiB,CACtB,SAA2C,EAC3C,MAA0B,EAAA;IAE1B,IAAI,CAAC,SAAS,EAAE;AACZ,QAAA,OAAO,SAAS,CAAA;KACnB;AAED,IAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;AAC/B,QAAA,OAAO,MAAM,CAAC,SAAS,CAAC,CAAA;KAC3B;IAED,OAAO;AACH,QAAA,MAAM,EAAE,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS;AAC/D,QAAA,MAAM,EAAE,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS;AAC/D,QAAA,OAAO,EAAE,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,SAAS;KACrE,CAAA;AACL;;;;;"}
+{"version":3,"file":"responsive-props.js","sources":["../../src/utils/responsive-props.ts"],"sourcesContent":["type ResponsiveBreakpoints = 'mobile' | 'tablet' | 'desktop'\n\ntype Atom = string | number | boolean\n\n/**\n * A responsive prop supports receiving values of its given base type, or an object mapping a\n * responsive breakpoint name to a value from the prop's base type.\n *\n * Some examples:\n *\n * - `align={{ mobile: 'left', tablet: 'center', desktop: 'right' }}`\n */\ntype ResponsiveProp<AtomType extends Atom> =\n    | AtomType\n    | Readonly<{ [key in ResponsiveBreakpoints]?: AtomType }>\n\nconst DEBUG = process.env.NODE_ENV === 'development'\n\n/**\n * Builds a css module class name for a given prop + prop-value combination.\n *\n * We have a convention of building the internal utility-based class names system in a way that\n * resembles the prop for which it is used and the value of the prop. For instance, in a component\n * with a prop `width` with possible values `narrow` and `wide`, we encode the styles for each of\n * these alternatives in the class-names `.width-narrow` and `.width-wide`.\n *\n * Furthermore, this helper is aware of responsive prop values. For instance, if you provide the\n * `width` prop above with the value `['narrow', 'wide']` this returns `['narrow', 'tablet-wide']`.\n * That is, it returns an array of class names, following the same convention above, but also\n * prefixing by the viewport width variant (`tablet-` or `desktop-`).\n *\n * @param styles the class names mapping imported from a css module\n * @param property the prop name\n * @param value the given prop's value\n */\nfunction getClassNames(\n    styles: Record<string, string>,\n    property: string,\n    value: ResponsiveProp<string> | null | undefined,\n): Array<string | undefined> | null {\n    if (!value) {\n        return null\n    }\n\n    const classList: Array<string | undefined> = []\n\n    if (typeof value === 'string') {\n        classList.push(styles[`${property}-${value}`])\n    } else {\n        if (value.mobile) classList.push(styles[`${property}-${value.mobile}`])\n        if (value.tablet) classList.push(styles[`tablet-${property}-${value.tablet}`])\n        if (value.desktop) classList.push(styles[`desktop-${property}-${value.desktop}`])\n    }\n\n    if (DEBUG && !classList.every(Boolean)) {\n        // eslint-disable-next-line no-console\n        console.warn('Not all generated class names were found', { property, value, classList })\n    }\n\n    return classList\n}\n\n/**\n * A mapping over a responsive prop value.\n *\n * Since response values can be an object but also a scalar value, this helper makes it easier to\n * to map the values when it's an object but keeps it consistent for the case when it is a scalar\n * value as well.\n *\n * @param fromValue the responsive prop value\n * @param mapper the mapping function\n */\nfunction mapResponsiveProp<From extends Atom, To extends Atom>(\n    fromValue: ResponsiveProp<From> | undefined,\n    mapper: (from: From) => To,\n): ResponsiveProp<To> | undefined {\n    if (!fromValue) {\n        return undefined\n    }\n\n    if (typeof fromValue !== 'object') {\n        return mapper(fromValue)\n    }\n\n    return {\n        mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,\n        tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,\n        desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined,\n    }\n}\n\nexport type { ResponsiveBreakpoints, ResponsiveProp }\nexport { getClassNames, mapResponsiveProp }\n"],"names":["DEBUG","process","env","NODE_ENV","getClassNames","styles","property","value","classList","push","mobile","tablet","desktop","every","Boolean","console","warn","mapResponsiveProp","fromValue","mapper","undefined"],"mappings":";;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKA,MAAMA,KAAK,GAAGC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,CAAA;;AAEpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,aAAaA,CAClBC,MAA8B,EAC9BC,QAAgB,EAChBC,KAAgD,EAChB;EAChC,IAAI,CAACA,KAAK,EAAE;AACR,IAAA,OAAO,IAAI,CAAA;AACf,GAAA;EAEA,MAAMC,SAAoC,GAAG,EAAE,CAAA;AAE/C,EAAA,IAAI,OAAOD,KAAK,KAAK,QAAQ,EAAE;IAC3BC,SAAS,CAACC,IAAI,CAACJ,MAAM,CAAC,CAAGC,EAAAA,QAAQ,CAAIC,CAAAA,EAAAA,KAAK,CAAE,CAAA,CAAC,CAAC,CAAA;AAClD,GAAC,MAAM;AACH,IAAA,IAAIA,KAAK,CAACG,MAAM,EAAEF,SAAS,CAACC,IAAI,CAACJ,MAAM,CAAC,CAAA,EAAGC,QAAQ,CAAIC,CAAAA,EAAAA,KAAK,CAACG,MAAM,CAAA,CAAE,CAAC,CAAC,CAAA;AACvE,IAAA,IAAIH,KAAK,CAACI,MAAM,EAAEH,SAAS,CAACC,IAAI,CAACJ,MAAM,CAAC,CAAA,OAAA,EAAUC,QAAQ,CAAIC,CAAAA,EAAAA,KAAK,CAACI,MAAM,CAAA,CAAE,CAAC,CAAC,CAAA;AAC9E,IAAA,IAAIJ,KAAK,CAACK,OAAO,EAAEJ,SAAS,CAACC,IAAI,CAACJ,MAAM,CAAC,CAAA,QAAA,EAAWC,QAAQ,CAAIC,CAAAA,EAAAA,KAAK,CAACK,OAAO,CAAA,CAAE,CAAC,CAAC,CAAA;AACrF,GAAA;EAEA,IAAIZ,KAAK,IAAI,CAACQ,SAAS,CAACK,KAAK,CAACC,OAAO,CAAC,EAAE;AACpC;AACAC,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,EAAE;MAAEV,QAAQ;MAAEC,KAAK;AAAEC,MAAAA,SAAAA;AAAU,KAAC,CAAC,CAAA;AAC5F,GAAA;AAEA,EAAA,OAAOA,SAAS,CAAA;AACpB,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASS,iBAAiBA,CACtBC,SAA2C,EAC3CC,MAA0B,EACI;EAC9B,IAAI,CAACD,SAAS,EAAE;AACZ,IAAA,OAAOE,SAAS,CAAA;AACpB,GAAA;AAEA,EAAA,IAAI,OAAOF,SAAS,KAAK,QAAQ,EAAE;IAC/B,OAAOC,MAAM,CAACD,SAAS,CAAC,CAAA;AAC5B,GAAA;EAEA,OAAO;AACHR,IAAAA,MAAM,EAAEQ,SAAS,CAACR,MAAM,GAAGS,MAAM,CAACD,SAAS,CAACR,MAAM,CAAC,GAAGU,SAAS;AAC/DT,IAAAA,MAAM,EAAEO,SAAS,CAACP,MAAM,GAAGQ,MAAM,CAACD,SAAS,CAACP,MAAM,CAAC,GAAGS,SAAS;IAC/DR,OAAO,EAAEM,SAAS,CAACN,OAAO,GAAGO,MAAM,CAACD,SAAS,CAACN,OAAO,CAAC,GAAGQ,SAAAA;GAC5D,CAAA;AACL;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@doist/reactist",
     "description": "Open source React components by Doist",
-    "version": "29.1.0",
+    "version": "29.1.2",
     "repository": "https://github.com/Doist/reactist",
     "homepage": "https://github.com/Doist/reactist#readme",
     "bugs": {
@@ -65,17 +65,20 @@
         "classnames": "^2.2.5",
         "prop-types": "^15.6.2",
         "react": "^17.0.0 || ^18.0.0",
+        "react-compiler-runtime": "^1.0.0",
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "devDependencies": {
         "@ariakit/react": "0.4.19",
-        "@babel/core": "^7.9.6",
+        "@babel/cli": "7.28.3",
+        "@babel/core": "7.28.5",
         "@babel/plugin-proposal-class-properties": "^7.10.1",
         "@babel/plugin-proposal-export-default-from": "^7.0.0",
         "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
         "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
         "@babel/plugin-proposal-object-rest-spread": "^7.10.1",
         "@babel/plugin-proposal-optional-chaining": "7.21.0",
+        "@babel/plugin-transform-runtime": "7.28.5",
         "@babel/plugin-transform-spread": "^7.0.0",
         "@babel/polyfill": "^7.0.0",
         "@babel/preset-env": "^7.0.0",
@@ -86,6 +89,7 @@
         "@doist/prettier-config": "4.0.0",
         "@doist/tsconfig": "2.0.0",
         "@geometricpanda/storybook-addon-badges": "^0.2.2",
+        "@rollup/plugin-babel": "6.1.0",
         "@rollup/plugin-commonjs": "28.0.9",
         "@rollup/plugin-node-resolve": "16.0.3",
         "@rollup/plugin-terser": "0.4.4",
@@ -118,6 +122,7 @@
         "autoprefixer": "^9.8.0",
         "babel-core": "^7.0.0-bridge.0",
         "babel-loader": "^8.1.0",
+        "babel-plugin-react-compiler": "1.0.0",
         "chromatic": "^6.11.4",
         "classnames": "^2.2.5",
         "css-loader": "^4.2.2",
@@ -147,6 +152,7 @@
         "prettier": "3.6.2",
         "raw-loader": "^4.0.1",
         "react": "^17.0.2",
+        "react-compiler-runtime": "1.0.0",
         "react-docgen-typescript-loader": "^3.7.2",
         "react-dom": "^17.0.2",
         "react-is": "^17.0.2",
@@ -155,6 +161,7 @@
         "rimraf": "^3.0.2",
         "rollup": "2.79.2",
         "rollup-plugin-styles": "4.0.0",
+        "rollup-plugin-visualizer": "6.0.5",
         "style-loader": "^0.23.1",
         "svg-url-loader": "^6.0.0",
         "ts-loader": "^8.0.2",
@@ -163,6 +170,7 @@
         "webpack": "^4.43.0"
     },
     "dependencies": {
+        "@babel/runtime": "^7.28.4",
         "aria-hidden": "^1.2.1",
         "dayjs": "^1.8.10",
         "patch-package": "^6.4.6",