reshaped 3.8.2 → 3.8.4-canary.0

package/dist/components/Select/index.js

@@ -1 +1,9 @@
-export { default } from "./Select.js";
+import Select from "./Select.js";
+import SelectCustom from "./SelectCustom.js";
+import SelectOption from "./SelectOption.js";
+import SelectOptionGroup from "./SelectOptionGroup.js";
+const SelectRoot = Select;
+SelectRoot.Custom = SelectCustom;
+SelectRoot.Option = SelectOption;
+SelectRoot.OptionGroup = SelectOptionGroup;
+export default SelectRoot;

package/dist/components/Stepper/Stepper.d.ts

@@ -1,10 +1,8 @@
 import React from "react";
 import type * as T from "./Stepper.types";
-declare const StepperItem: {
+export declare const StepperItem: {
     (_: T.ItemProps): null;
     displayName: string;
 };
-declare const Stepper: React.FC<T.Props> & {
-    Item: typeof StepperItem;
-};
+declare const Stepper: React.FC<T.Props>;
 export default Stepper;

package/dist/components/Stepper/Stepper.js

@@ -16,7 +16,7 @@ const StepperItemPrivate = (props) => {
     return (_jsxs(View, { attributes: attributes, className: className, children: [_jsxs(View, { direction: "row", gap: 2, align: "center", position: "static", children: [_jsxs(View.Item, { children: [_jsx(View, { align: "center", justify: "center", backgroundColor: active || completed ? "primary" : "neutral-faded", borderColor: active || completed ? undefined : "neutral-faded", borderRadius: "circular", as: "span", width: 8, height: 8, zIndex: 5, children: _jsx(Text, { variant: "body-3", weight: active ? "bold" : "medium", children: completed ? _jsx(Icon, { svg: IconCheckmark, size: 4 }) : step }) }), direction === "column" && !last && _jsx(Divider, { vertical: true, className: s.verticalDivider })] }), labelDisplay ? _jsx(Hidden, { hide: labelHidden, children: labelNode }) : labelNode] }), direction === "column" && children && (_jsx(Expandable, { active: active, children: _jsx(View, { paddingStart: 10, paddingTop: 2, children: children }) }))] }));
 };
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const StepperItem = (_) => null;
+export const StepperItem = (_) => null;
 const Stepper = (props) => {
     const { children, direction = "row", activeId, labelDisplay, gap = 3, className, attributes, } = props;
     const vertical = direction === "column";
@@ -31,7 +31,6 @@ const Stepper = (props) => {
             return (_jsxs(React.Fragment, { children: [_jsx(StepperItemPrivate, { ...props, id: itemId, active: activeId?.toString() === itemId, step: index + 1, last: index === length - 1, direction: direction, labelDisplay: labelDisplay }), !vertical && index < length - 1 && (_jsx(View, { grow: true, children: _jsx(Divider, {}) }))] }, index));
         }) }));
 };
-Stepper.Item = StepperItem;
 Stepper.displayName = "Stepper";
 StepperItem.displayName = "Stepper.Item";
 export default Stepper;

package/dist/components/Stepper/index.d.ts

@@ -1,2 +1,6 @@
-export { default } from "./Stepper";
+import Stepper, { StepperItem } from "./Stepper";
+declare const StepperRoot: typeof Stepper & {
+    Item: typeof StepperItem;
+};
+export default StepperRoot;
 export type { Props as StepperProps } from "./Stepper.types";

package/dist/components/Stepper/index.js

@@ -1 +1,4 @@
-export { default } from "./Stepper.js";
+import Stepper, { StepperItem } from "./Stepper.js";
+const StepperRoot = Stepper;
+StepperRoot.Item = StepperItem;
+export default StepperRoot;

package/dist/components/Stepper/tests/Stepper.stories.d.ts

@@ -3,10 +3,7 @@ import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: React.FC<import("./..").StepperProps> & {
-        Item: {
-            (_: import("../Stepper.types").ItemProps): null;
-            displayName: string;
-        };
+        Item: typeof import("../Stepper").StepperItem;
     };
     parameters: {
         iframe: {

package/dist/components/Table/Table.d.ts

@@ -1,15 +1,9 @@
 import React from "react";
 import type * as T from "./Table.types";
-declare const TableCell: React.FC<T.CellProps>;
-declare const TableHeading: React.FC<T.HeadingProps>;
-declare const TableRow: React.FC<T.RowProps>;
-declare const TableBody: React.FC<T.BodyProps>;
-declare const TableHead: React.FC<T.HeadProps>;
-declare const Table: React.FC<T.Props> & {
-    Cell: typeof TableCell;
-    Heading: typeof TableHeading;
-    Row: typeof TableRow;
-    Body: typeof TableBody;
-    Head: typeof TableHead;
-};
+export declare const TableCell: React.FC<T.CellProps>;
+export declare const TableHeading: React.FC<T.HeadingProps>;
+export declare const TableRow: React.FC<T.RowProps>;
+export declare const TableBody: React.FC<T.BodyProps>;
+export declare const TableHead: React.FC<T.HeadProps>;
+declare const Table: React.FC<T.Props>;
 export default Table;

package/dist/components/Table/Table.js

@@ -17,23 +17,23 @@ const TableCellPrivate = (props) => {
     };
     return (_jsx(TagName, { ...attributes, className: headingClassNames, rowSpan: rowSpan, colSpan: colSpan, style: headingStyle, children: children }));
 };
-const TableCell = (props) => {
+export const TableCell = (props) => {
     return _jsx(TableCellPrivate, { ...props, tagName: "td" });
 };
-const TableHeading = (props) => {
+export const TableHeading = (props) => {
     return _jsx(TableCellPrivate, { ...props, tagName: "th" });
 };
-const TableRow = (props) => {
+export const TableRow = (props) => {
     const { highlighted, children, className, attributes } = props;
     const onClick = props.onClick || attributes?.onClick;
     const rowClassNames = classNames(s.row, highlighted && s["--row-highlighted"], className);
     return (_jsx("tr", { ...attributes, className: rowClassNames, onClick: onClick, tabIndex: onClick ? 0 : undefined, children: children }));
 };
-const TableBody = (props) => {
+export const TableBody = (props) => {
     const { children, attributes, className } = props;
     return (_jsx("tbody", { ...attributes, className: classNames(s.body, className), children: children }));
 };
-const TableHead = (props) => {
+export const TableHead = (props) => {
     const { children, attributes, className } = props;
     return (_jsx("thead", { ...attributes, className: classNames(s.head, className), children: children }));
 };
@@ -48,11 +48,6 @@ const Table = (props) => {
     const isHead = isElement && firstChild.type === TableHead;
     return (_jsx("div", { ...attributes, className: rootClassNames, ref: rootRef, children: _jsx("table", { className: s.table, children: isBody || isHead ? children : _jsx(TableBody, { children: children }) }) }));
 };
-Table.Cell = TableCell;
-Table.Heading = TableHeading;
-Table.Row = TableRow;
-Table.Body = TableBody;
-Table.Head = TableHead;
 Table.displayName = "Table";
 TableCell.displayName = "TableCell";
 TableHeading.displayName = "TableHeading";

package/dist/components/Table/index.d.ts

@@ -1,2 +1,10 @@
-export { default } from "./Table";
+import Table, { TableCell, TableHeading, TableRow, TableBody, TableHead } from "./Table";
+declare const TableRoot: typeof Table & {
+    Cell: typeof TableCell;
+    Heading: typeof TableHeading;
+    Row: typeof TableRow;
+    Body: typeof TableBody;
+    Head: typeof TableHead;
+};
+export default TableRoot;
 export type { Props as TableProps, HeadProps as TableHeadProps, BodyProps as TableBodyProps, RowProps as TableRowProps, CellProps as TableCellProps, HeadingProps as TableHeadingProps, } from "./Table.types";

package/dist/components/Table/index.js

@@ -1 +1,8 @@
-export { default } from "./Table.js";
+import Table, { TableCell, TableHeading, TableRow, TableBody, TableHead } from "./Table.js";
+const TableRoot = Table;
+TableRoot.Cell = TableCell;
+TableRoot.Heading = TableHeading;
+TableRoot.Row = TableRow;
+TableRoot.Body = TableBody;
+TableRoot.Head = TableHead;
+export default TableRoot;

package/dist/components/Table/tests/Table.stories.d.ts

@@ -3,11 +3,11 @@ import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: React.FC<import("./..").TableProps> & {
-        Cell: React.FC<import("./..").TableCellProps>;
-        Heading: React.FC<import("./..").TableHeadingProps>;
-        Row: React.FC<import("./..").TableRowProps>;
-        Body: React.FC<import("./..").TableBodyProps>;
-        Head: React.FC<import("./..").TableHeadProps>;
+        Cell: typeof import("../Table").TableCell;
+        Heading: typeof import("../Table").TableHeading;
+        Row: typeof import("../Table").TableRow;
+        Body: typeof import("../Table").TableBody;
+        Head: typeof import("../Table").TableHead;
     };
     parameters: {
         iframe: {

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

@@ -1,10 +1,3 @@
-import TabsItem from "./TabsItem";
-import TabsList from "./TabsList";
-import TabsPanel from "./TabsPanel";
 import type * as T from "./Tabs.types";
-declare const Tabs: React.FC<T.Props> & {
-    Item: typeof TabsItem;
-    List: typeof TabsList;
-    Panel: typeof TabsPanel;
-};
+declare const Tabs: React.FC<T.Props>;
 export default Tabs;

package/dist/components/Tabs/Tabs.js

@@ -1,17 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import TabsControlled from "./TabsControlled.js";
 import TabsUncontrolled from "./TabsUncontrolled.js";
-import TabsItem from "./TabsItem.js";
-import TabsList from "./TabsList.js";
-import TabsPanel from "./TabsPanel.js";
 const Tabs = (props) => {
     const { value } = props;
     if (value !== undefined)
         return _jsx(TabsControlled, { ...props });
     return _jsx(TabsUncontrolled, { ...props });
 };
-Tabs.Item = TabsItem;
-Tabs.List = TabsList;
-Tabs.Panel = TabsPanel;
 Tabs.displayName = "Tabs";
 export default Tabs;

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

@@ -1,2 +1,11 @@
-export { default } from "./Tabs";
+import Tabs from "./Tabs";
+import TabsItem from "./TabsItem";
+import TabsList from "./TabsList";
+import TabsPanel from "./TabsPanel";
+declare const TabsRoot: typeof Tabs & {
+    Item: typeof TabsItem;
+    List: typeof TabsList;
+    Panel: typeof TabsPanel;
+};
+export default TabsRoot;
 export type { Props as TabsProps, ItemProps as TabsItemProps } from "./Tabs.types";

package/dist/components/Tabs/index.js

@@ -1 +1,9 @@
-export { default } from "./Tabs.js";
+import Tabs from "./Tabs.js";
+import TabsItem from "./TabsItem.js";
+import TabsList from "./TabsList.js";
+import TabsPanel from "./TabsPanel.js";
+const TabsRoot = Tabs;
+TabsRoot.Item = TabsItem;
+TabsRoot.List = TabsList;
+TabsRoot.Panel = TabsPanel;
+export default TabsRoot;

package/dist/components/TextArea/TextArea.d.ts

@@ -1,7 +1,4 @@
 import React from "react";
-import Aligner from "../_private/Aligner";
 import type * as T from "./TextArea.types";
-declare const TextArea: React.FC<T.Props> & {
-    Aligner: typeof Aligner;
-};
+declare const TextArea: React.FC<T.Props>;
 export default TextArea;

package/dist/components/TextArea/TextArea.js

@@ -3,7 +3,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import { useFormControl } from "../FormControl/index.js";
-import Aligner from "../_private/Aligner/index.js";
 import useElementId from "../../hooks/useElementId.js";
 import s from "./TextArea.module.css";
 const TextArea = (props) => {
@@ -30,6 +29,5 @@ const TextArea = (props) => {
     }, [value, resize]);
     return (_jsx("div", { ...attributes, "data-rs-aligner-target": true, className: rootClassName, "data-rs-textarea-value": autogrowValue, children: _jsx("textarea", { rows: 3, ...inputAttributes, className: s.input, disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: inputId }) }));
 };
-TextArea.Aligner = Aligner;
 TextArea.displayName = "TextArea";
 export default TextArea;

package/dist/components/TextArea/index.d.ts

@@ -1,2 +1,7 @@
-export { default } from "./TextArea";
+import Aligner from "../_private/Aligner";
+import TextArea from "./TextArea";
+declare const TextAreaRoot: typeof TextArea & {
+    Aligner: typeof Aligner;
+};
+export default TextAreaRoot;
 export type { Props as TextAreaProps } from "./TextArea.types";

package/dist/components/TextArea/index.js

@@ -1 +1,5 @@
-export { default } from "./TextArea.js";
+import Aligner from "../_private/Aligner/index.js";
+import TextArea from "./TextArea.js";
+const TextAreaRoot = TextArea;
+TextAreaRoot.Aligner = Aligner;
+export default TextAreaRoot;

package/dist/components/TextField/TextField.d.ts

@@ -1,7 +1,4 @@
 import React from "react";
-import Aligner from "../_private/Aligner";
 import type * as T from "./TextField.types";
-declare const TextField: React.FC<T.Props> & {
-    Aligner: typeof Aligner;
-};
+declare const TextField: React.FC<T.Props>;
 export default TextField;

package/dist/components/TextField/TextField.js

@@ -5,7 +5,6 @@ import { classNames, responsiveClassNames, responsivePropDependency } from "../.
 import useElementId from "../../hooks/useElementId.js";
 import { useFormControl } from "../FormControl/index.js";
 import Icon from "../Icon/index.js";
-import Aligner from "../_private/Aligner/index.js";
 import s from "./TextField.module.css";
 const TextFieldSlot = (props) => {
     const { slot, icon, size, affix, position, id } = props;
@@ -60,6 +59,5 @@ const TextField = (props) => {
                 : undefined,
         }, "data-rs-aligner-target": true, className: rootClassName, children: [_jsx(TextFieldSlot, { position: "start", icon: icon, slot: startSlot, size: size, affix: prefix, id: id }), _jsxs("div", { className: s.inner, children: [_jsx("input", { type: "text", autoComplete: "off", ...inputAttributes, className: classNames(s.input, inputAttributes.className), disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: inputId }), _jsx(TextFieldSlot, { position: "end", icon: endIcon, slot: endSlot, size: size, affix: suffix, id: id })] })] }));
 };
-TextField.Aligner = Aligner;
 TextField.displayName = "TextField";
 export default TextField;

package/dist/components/TextField/index.d.ts

@@ -1,2 +1,7 @@
-export { default } from "./TextField";
+import Aligner from "../_private/Aligner";
+import TextField from "./TextField";
+declare const TextFieldRoot: typeof TextField & {
+    Aligner: typeof Aligner;
+};
+export default TextFieldRoot;
 export type { Props as TextFieldProps, BaseProps as TextFieldBaseProps } from "./TextField.types";

package/dist/components/TextField/index.js

@@ -1 +1,5 @@
-export { default } from "./TextField.js";
+import Aligner from "../_private/Aligner/index.js";
+import TextField from "./TextField.js";
+const TextFieldRoot = TextField;
+TextFieldRoot.Aligner = Aligner;
+export default TextFieldRoot;

package/dist/components/Timeline/Timeline.d.ts

@@ -1,7 +1,5 @@
 import React from "react";
 import type * as T from "./Timeline.types";
-declare const TimelineItem: React.FC<T.ItemProps>;
-declare const Timeline: React.FC<T.Props> & {
-    Item: typeof TimelineItem;
-};
+export declare const TimelineItem: React.FC<T.ItemProps>;
+declare const Timeline: React.FC<T.Props>;
 export default Timeline;

package/dist/components/Timeline/Timeline.js

@@ -3,7 +3,7 @@ import React, { isValidElement } from "react";
 import { classNames } from "../../utilities/props.js";
 import View from "../View/index.js";
 import s from "./Timeline.module.css";
-const TimelineItem = (props) => {
+export const TimelineItem = (props) => {
     const { children, markerSlot, className, attributes } = props;
     const hasMarker = markerSlot !== null;
     const itemClassNames = classNames(s.item, !hasMarker && s["item--full-width"], className);
@@ -16,7 +16,6 @@ const Timeline = (props) => {
             return isValidElement(child) && child.type === TimelineItem ? (child) : (_jsx(TimelineItem, { children: child }, index));
         }) }));
 };
-Timeline.Item = TimelineItem;
 Timeline.displayName = "Timeline";
 TimelineItem.displayName = "Timeline.Item";
 export default Timeline;

package/dist/components/Timeline/index.d.ts

@@ -1,2 +1,6 @@
-export { default } from "./Timeline";
+import Timeline, { TimelineItem } from "./Timeline";
+declare const TimelineRoot: typeof Timeline & {
+    Item: typeof TimelineItem;
+};
+export default TimelineRoot;
 export type { Props as TimelineProps, ItemProps as TimelineItemProps } from "./Timeline.types";

package/dist/components/Timeline/index.js

@@ -1 +1,4 @@
-export { default } from "./Timeline.js";
+import Timeline, { TimelineItem } from "./Timeline.js";
+const TimelineRoot = Timeline;
+TimelineRoot.Item = TimelineItem;
+export default TimelineRoot;

package/dist/components/Timeline/tests/Timeline.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").TimelineProps> & {
-        Item: import("react").FC<import("./..").TimelineItemProps>;
+        Item: typeof import("../Timeline").TimelineItem;
     };
     parameters: {
         iframe: {

package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.d.ts

@@ -21,3 +21,7 @@ export declare const multiple: StoryObj<{
 }>;
 export declare const selectedColor: StoryObj;
 export declare const className: StoryObj;
+export declare const testIcon: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};

package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.js

@@ -2,6 +2,9 @@ import { expect, fn, userEvent } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import ToggleButtonGroup from "../index.js";
 import ToggleButton from "../../ToggleButton/index.js";
+import IconPlus from "../../../icons/Plus.js";
+import IconMinus from "../../../icons/Minus.js";
+import IconCheckmark from "../../../icons/Checkmark.js";
 export default {
     title: "Components/ToggleButtonGroup",
     component: ToggleButtonGroup,
@@ -120,6 +123,7 @@ export const selectedColor = {
 				<ToggleButtonGroup selectedColor="primary" defaultValue={["2"]}>
 					<ToggleButton value="1">Button</ToggleButton>
 					<ToggleButton value="2">Button</ToggleButton>
+					<ToggleButton value="3">Button</ToggleButton>
 				</ToggleButtonGroup>
 			</Example.Item>
 			<Example.Item title="color: primary, selectedColor: critical">
@@ -130,6 +134,9 @@ export const selectedColor = {
 					<ToggleButton value="2" variant="ghost">
 						Button
 					</ToggleButton>
+					<ToggleButton value="3" variant="ghost">
+						Button
+					</ToggleButton>
 				</ToggleButtonGroup>
 			</Example.Item>
 		</Example>),
@@ -148,3 +155,15 @@ export const className = {
         expect(root).toHaveAttribute("id", "test-id");
     },
 };
+export const testIcon = {
+    name: "test: icon only",
+    render: () => (<Example>
+			<Example.Item title="icon only">
+				<ToggleButtonGroup selectedColor="primary">
+					<ToggleButton value="1" icon={IconPlus}/>
+					<ToggleButton value="2" icon={IconMinus}/>
+					<ToggleButton value="3" icon={IconCheckmark}/>
+				</ToggleButtonGroup>
+			</Example.Item>
+		</Example>),
+};

package/dist/components/View/View.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import type * as T from "./View.types";
+export declare const ViewItem: {
+    <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const View: {
     <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
-    Item: {
-        <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
     displayName: string;
 };
 export default View;

package/dist/components/View/View.js

@@ -6,7 +6,7 @@ import Divider from "../Divider/index.js";
 import Hidden from "../Hidden/index.js";
 import s from "./View.module.css";
 import { resolveMixin } from "../../styles/mixin.js";
-const ViewItem = (props) => {
+export const ViewItem = (props) => {
     const { columns, grow, shrink, gapBefore, 
     // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -173,7 +173,6 @@ const View = (props) => {
     };
     return (_jsx(TagName, { ...attributes, className: rootClassNames, style: rootVariables, children: formattedChildren }));
 };
-View.Item = ViewItem;
 View.displayName = "View";
 ViewItem.displayName = "View.Item";
 export default View;

package/dist/components/View/index.d.ts

@@ -1,2 +1,6 @@
-export { default } from "./View";
+import View, { ViewItem } from "./View";
+declare const ViewRoot: typeof View & {
+    Item: typeof ViewItem;
+};
+export default ViewRoot;
 export type { Props as ViewProps, ItemProps as ViewItemProps } from "./View.types";

package/dist/components/View/index.js

@@ -1 +1,4 @@
-export { default } from "./View.js";
+import View, { ViewItem } from "./View.js";
+const ViewRoot = View;
+ViewRoot.Item = ViewItem;
+export default ViewRoot;

package/dist/components/View/tests/View.stories.d.ts

@@ -5,11 +5,9 @@ declare const _default: {
     title: string;
     component: {
         <As extends keyof React.JSX.IntrinsicElements = "div">(props: ViewProps<As>): React.JSX.Element;
-        Item: {
-            <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>): React.JSX.Element;
-            displayName: string;
-        };
         displayName: string;
+    } & {
+        Item: typeof import("../View").ViewItem;
     };
     parameters: {
         iframe: {

package/dist/components/_private/Portal/Portal.d.ts

@@ -5,11 +5,9 @@ export declare const usePortalScope: () => T.Context;
  * Disclaimer: Works only for components that don't show the portal immediately
  * That gives Portal time to receive scope on first render
  */
-declare const Portal: React.FC<T.Props> & {
-    Scope: typeof PortalScope;
-};
-declare function PortalScope<T extends HTMLElement>(props: T.ScopeProps<T>): React.ReactNode;
-declare namespace PortalScope {
+declare const Portal: React.FC<T.Props>;
+export declare function PortalScope(props: T.ScopeProps<HTMLDivElement>): React.ReactNode;
+export declare namespace PortalScope {
     var displayName: string;
 }
 export default Portal;

package/dist/components/_private/Portal/Portal.js

@@ -45,12 +45,11 @@ const Portal = (props) => {
         !mountedToggle.active && _jsx("div", { ref: rootRef, className: s.root }, "root"),
     ];
 };
-function PortalScope(props) {
+export function PortalScope(props) {
     const { children } = props;
     const ref = React.useRef(null);
     return (_jsx(PortalScopeContext.Provider, { value: { scopeRef: ref }, children: children(ref) }));
 }
-Portal.Scope = PortalScope;
 Portal.displayName = "Portal";
 PortalScope.displayName = "PortalScope";
 export default Portal;

package/dist/components/_private/Portal/index.d.ts

@@ -1,2 +1,6 @@
-export { default } from "./Portal";
+import Portal, { PortalScope } from "./Portal";
+declare const PortalRoot: typeof Portal & {
+    Scope: typeof PortalScope;
+};
+export default PortalRoot;
 export type { Props as PortalProps } from "./Portal.types";

package/dist/components/_private/Portal/index.js

@@ -1 +1,4 @@
-export { default } from "./Portal.js";
+import Portal, { PortalScope } from "./Portal.js";
+const PortalRoot = Portal;
+PortalRoot.Scope = PortalScope;
+export default PortalRoot;

package/dist/config/postcss.js

@@ -1,4 +1,7 @@
 import path from "path";
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 const defaultThemeMediaCSSPath = path.resolve(__dirname, "../themes/reshaped/media.css");
 // Using [plugin]: { ...options } format here because it's supported by the most frameworks
 // - require('plugin') is not supported by Next

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reshaped",
   "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-  "version": "3.8.2",
+  "version": "3.8.4-canary.0",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",
@@ -45,15 +45,15 @@
     },
     "./themes": {
       "types": "./dist/themes/index.d.ts",
-      "default": "./dist/cjs/themes/index.js"
+      "import": "./dist/themes/index.js"
     },
     "./config/postcss": {
       "types": "./dist/config/postcss.d.ts",
-      "default": "./dist/cjs/config/postcss.js"
+      "import": "./dist/config/postcss.js"
     },
     "./config/tailwind": {
       "types": "./dist/config/tailwind.d.ts",
-      "default": "./dist/cjs/config/tailwind.js"
+      "import": "./dist/config/tailwind.js"
     },
     "./bundle": {
       "types": "./dist/bundle.d.ts",
@@ -170,10 +170,9 @@
     "clean": "sh ./bin/clean.sh",
     "commit": "git-cz",
     "changeset": "changeset",
-    "build": "pnpm clean && pnpm build:stories && pnpm build:esm && pnpm build:css && pnpm build:cjs && pnpm build:bundle",
+    "build": "pnpm clean && pnpm build:stories && pnpm build:esm && pnpm build:css && pnpm build:bundle",
     "build:themes": "node bin/cli.js theming --config dist/cjs/cli/theming/reshaped.config.js --output src/themes",
     "build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",
-    "build:cjs": "tsc -p tsconfig.cjs.json && resolve-tspaths -p tsconfig.cjs.json && node ./bin/format-cjs-build.js",
     "build:css": "postcss \"src/**/*.css\" --dir dist --base src --config tools/build",
     "build:stories": "tsc -p tsconfig.stories.json && resolve-tspaths -p tsconfig.stories.json",
     "build:bundle": "vite build && cp dist/index.d.ts dist/bundle.d.ts",

package/dist/cjs/cli/theming/index.d.ts

@@ -1,4 +0,0 @@
-import type { PassedThemeDefinition } from "../../themes/_generator/tokens/types";
-import type * as T from "../../themes/_generator/types";
-export declare const addThemeFragment: (name: string, definition: PassedThemeDefinition, options: T.CLIOptions) => void;
-export declare const addTheme: (name: string, definition: PassedThemeDefinition, options: T.CLIOptions) => void;