reshaped 4.0.3 → 4.1.0

package/dist/components/_private/Expandable/Expandable.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
-import { onNextFrame, checkTransitions } from "../../../utilities/animation.js";
+import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect";
+import { onNextFrame, checkTransitions } from "../../../utilities/animation";
 import s from "./Expandable.module.css";
 const Expandable = (props) => {
     const { children, active, attributes } = props;

package/dist/components/_private/Expandable/Expandable.module.css

@@ -1 +1 @@
-.root{height:0;overflow:hidden}.root.--animated{transition:height var(--rs-duration-medium) var(--rs-easing-standard)}
+.root{overflow:hidden;position:relative;height:0}.root.--animated{transition:height var(--rs-duration-medium) var(--rs-easing-standard)}

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

@@ -1 +1 @@
-export { default } from "./Expandable.js";
+export { default } from "./Expandable";

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

@@ -2,9 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import ReactDOM from "react-dom";
-import Theme from "../../Theme/index.js";
-import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
-import useToggle from "../../../hooks/useToggle.js";
+import Theme from "../../../components/Theme";
+import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect";
+import useToggle from "../../../hooks/useToggle";
 import s from "./Portal.module.css";
 const PortalScopeContext = React.createContext({});
 export const usePortalScope = () => {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { ThemeProps } from "../../Theme";
+import { ThemeProps } from "../../../components/Theme";
 export type Props = {
     children?: React.ReactNode;
     targetRef?: React.RefObject<HTMLElement | ShadowRoot | null>;

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

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

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

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.base = void 0;
 const react_1 = __importDefault(require("react"));
-const Portal_1 = __importDefault(require("./.."));
+const Portal_1 = __importDefault(require("../../../../components/_private/Portal"));
 exports.default = { title: "Internal/Portal" };
 const base = () => {
     const ref = react_1.default.useRef(null);

package/dist/hooks/_internal/useDrag.js

@@ -1,10 +1,10 @@
 "use client";
 import React from "react";
 import { disableScroll, enableScroll } from "@reshaped/utilities/internal";
-import useHandlerRef from "../useHandlerRef.js";
-import useHotkeys from "../useHotkeys.js";
-import useToggle from "../useToggle.js";
-import * as keys from "../../constants/keys.js";
+import useHandlerRef from "../../hooks/useHandlerRef";
+import useHotkeys from "../../hooks/useHotkeys";
+import useToggle from "../../hooks/useToggle";
+import * as keys from "../../constants/keys";
 const useDrag = (cb, options) => {
     const { disabled, containerRef: passedContainerRef, orientation = "all" } = options || {};
     const cbRef = useHandlerRef(cb);

package/dist/hooks/_internal/useFadeSide.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 declare const useFadeSide: (scrollableRef: React.RefObject<HTMLElement | null>, options?: {
     disabled?: boolean;
-}) => "start" | "end" | "both" | null;
+}) => "both" | "end" | "start" | null;
 export default useFadeSide;

package/dist/hooks/_internal/useFadeSide.js

@@ -1,8 +1,8 @@
 "use client";
 import React from "react";
 import { rafThrottle } from "@reshaped/utilities/internal";
-import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect.js";
-import useRTL from "../useRTL.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
+import useRTL from "../../hooks/useRTL";
 const useFadeSide = (scrollableRef, options = {}) => {
     const { disabled } = options;
     const [rtl] = useRTL();

package/dist/hooks/_internal/useSingletonRTL.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { isRTL } from "@reshaped/utilities";
-import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect.js";
+import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect";
 const SingletonRTLContext = React.createContext({
     rtl: [false, () => { }],
 });

package/dist/hooks/_internal/useSingletonViewport.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { breakpoints as defaultBreakpoints } from "@reshaped/theming";
-import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
 const SingletonViewportContext = React.createContext({
     viewport: "s",
 });

package/dist/hooks/tests/useDrag.stories.js

@@ -8,8 +8,8 @@ const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
 const Button_1 = __importDefault(require("../../components/Button"));
 const View_1 = __importDefault(require("../../components/View"));
-const useDrag_1 = __importDefault(require("../_internal/useDrag"));
-const useToggle_1 = __importDefault(require("../useToggle"));
+const useDrag_1 = __importDefault(require("../../hooks/_internal/useDrag"));
+const useToggle_1 = __importDefault(require("../../hooks/useToggle"));
 exports.default = {
     title: "Hooks/Internal/useDrag",
     parameters: {

package/dist/hooks/tests/useElementId.stories.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.id = void 0;
 const test_1 = require("storybook/test");
-const useElementId_1 = __importDefault(require("../useElementId"));
+const useElementId_1 = __importDefault(require("../../hooks/useElementId"));
 exports.default = {
     title: "Hooks/useElementId",
     parameters: {

package/dist/hooks/tests/useResponsiveClientValue.stories.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.boolean = exports.base = void 0;
 const View_1 = __importDefault(require("../../components/View"));
-const useResponsiveClientValue_1 = __importDefault(require("../useResponsiveClientValue"));
+const useResponsiveClientValue_1 = __importDefault(require("../../hooks/useResponsiveClientValue"));
 exports.default = {
     title: "Hooks/useResponsiveClientValue",
     parameters: {

package/dist/hooks/useHandlerRef.js

@@ -1,5 +1,5 @@
 import React from "react";
-import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
 /**
  * Hook for wrapping event handlers passed as props with a ref
  * This way we can keep the instance of the ref the same and pass this ref to the effects dependency array

package/dist/hooks/useHotkeys.js

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { useSingletonHotkeys } from "./_internal/useSingletonHotkeys.js";
+import { useSingletonHotkeys } from "./_internal/useSingletonHotkeys";
 const useHotkeys = (hotkeys, deps = [], options) => {
     const { addHotkeys, isPressed } = useSingletonHotkeys();
     const generatedRef = React.useRef(null);

package/dist/hooks/useIsDismissible.js

@@ -3,7 +3,7 @@
  * Example: Use to only close the latest opened Flyout/Modal
  */
 import React from "react";
-import useElementId from "./useElementId.js";
+import useElementId from "../hooks/useElementId";
 let queue = {};
 let latestId = null;
 const removeFromQueue = (id) => {

package/dist/hooks/useKeyboardArrowNavigation.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { focusFirstElement, focusLastElement, focusNextElement, focusPreviousElement, getFocusableElements, } from "@reshaped/utilities/internal";
-import useHotkeys from "./useHotkeys.js";
+import useHotkeys from "./useHotkeys";
 const useKeyboardArrowNavigation = (props) => {
     const { ref, disabled, orientation, circular } = props;
     const backHotkeys = [];

package/dist/hooks/useKeyboardMode.js

@@ -1,2 +1,2 @@
-import { useSingletonKeyboardMode } from "./_internal/useSingletonKeyboardMode.js";
+import { useSingletonKeyboardMode } from "./_internal/useSingletonKeyboardMode";
 export default useSingletonKeyboardMode;

package/dist/hooks/useOnClickOutside.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { keys } from "@reshaped/utilities";
-import useHandlerRef from "./useHandlerRef.js";
+import useHandlerRef from "./useHandlerRef";
 const useOnClickOutside = (refs, handler, options) => {
     const { disabled } = options || {};
     const handlerRef = useHandlerRef(handler);

package/dist/hooks/useRTL.js

@@ -1,2 +1,2 @@
-import { useSingletonRTL } from "./_internal/useSingletonRTL.js";
+import { useSingletonRTL } from "./_internal/useSingletonRTL";
 export default useSingletonRTL;

package/dist/hooks/useResponsiveClientValue.js

@@ -1,6 +1,6 @@
 "use client";
 import { useMemo } from "react";
-import useViewport from "./useViewport.js";
+import useViewport from "../hooks/useViewport";
 const useResponsiveClientValue = (value) => {
     const viewport = useViewport();
     return useMemo(() => {

package/dist/hooks/useViewport.js

@@ -1,4 +1,4 @@
-import useSingletonViewport from "./_internal/useSingletonViewport.js";
+import useSingletonViewport from "../hooks/_internal/useSingletonViewport";
 const useViewport = () => {
     const { viewport } = useSingletonViewport();
     return viewport;

package/dist/index.d.ts

@@ -35,6 +35,8 @@ export type { LinkProps } from "./components/Link";
 export { default as Link } from "./components/Link";
 export type { LoaderProps } from "./components/Loader";
 export { default as Loader } from "./components/Loader";
+export type { LoaderTextProps } from "./components/LoaderText";
+export { default as LoaderText } from "./components/LoaderText";
 export type { MenuItemProps } from "./components/MenuItem";
 export { default as MenuItem } from "./components/MenuItem";
 export type { ModalProps } from "./components/Modal";

package/dist/index.js

@@ -1,82 +1,83 @@
-export { default as Alert } from "./components/Alert/index.js";
-export { default as Autocomplete } from "./components/Autocomplete/index.js";
-export { default as Avatar } from "./components/Avatar/index.js";
-export { default as Badge } from "./components/Badge/index.js";
-export { default as Breadcrumbs } from "./components/Breadcrumbs/index.js";
-export { default as Button } from "./components/Button/index.js";
-export { default as Calendar } from "./components/Calendar/index.js";
-export { default as Card } from "./components/Card/index.js";
-export { default as Carousel } from "./components/Carousel/index.js";
-export { default as Checkbox } from "./components/Checkbox/index.js";
-export { default as CheckboxGroup } from "./components/CheckboxGroup/index.js";
-export { default as ContextMenu } from "./components/ContextMenu/index.js";
-export { default as Divider } from "./components/Divider/index.js";
-export { default as DropdownMenu } from "./components/DropdownMenu/index.js";
-export { default as FileUpload } from "./components/FileUpload/index.js";
-export { default as Link } from "./components/Link/index.js";
-export { default as Loader } from "./components/Loader/index.js";
-export { default as MenuItem } from "./components/MenuItem/index.js";
-export { default as Modal } from "./components/Modal/index.js";
-export { default as NumberField } from "./components/NumberField/index.js";
-export { default as Pagination } from "./components/Pagination/index.js";
-export { default as PinField } from "./components/PinField/index.js";
-export { default as Popover } from "./components/Popover/index.js";
-export { default as ProgressBar } from "./components/ProgressBar/index.js";
-export { default as ProgressIndicator } from "./components/ProgressIndicator/index.js";
-export { default as Radio } from "./components/Radio/index.js";
-export { default as RadioGroup } from "./components/RadioGroup/index.js";
-export { default as Select, SelectTrigger } from "./components/Select/index.js";
-export { default as Skeleton } from "./components/Skeleton/index.js";
-export { default as Slider } from "./components/Slider/index.js";
-export { default as Switch } from "./components/Switch/index.js";
-export { default as Table } from "./components/Table/index.js";
-export { default as Tabs } from "./components/Tabs/index.js";
-export { default as TextArea } from "./components/TextArea/index.js";
-export { default as TextField } from "./components/TextField/index.js";
-export { ToastProvider, useToast } from "./components/Toast/index.js";
-export { default as ToggleButton } from "./components/ToggleButton/index.js";
-export { default as ToggleButtonGroup } from "./components/ToggleButtonGroup/index.js";
-export { default as Tooltip } from "./components/Tooltip/index.js";
-export { default as Accordion } from "./components/Accordion/index.js";
-export { default as Actionable } from "./components/Actionable/index.js";
-export { default as Container } from "./components/Container/index.js";
-export { default as Dismissible } from "./components/Dismissible/index.js";
-export { default as Flyout } from "./components/Flyout/index.js";
-export { default as FormControl } from "./components/FormControl/index.js";
-export { default as Grid } from "./components/Grid/index.js";
-export { default as Hidden } from "./components/Hidden/index.js";
-export { default as HiddenInput } from "./components/HiddenInput/index.js";
-export { default as HiddenVisually } from "./components/HiddenVisually/index.js";
-export { default as Icon } from "./components/Icon/index.js";
-export { default as Image } from "./components/Image/index.js";
-export { default as Overlay } from "./components/Overlay/index.js";
-export { default as Reshaped } from "./components/Reshaped/index.js";
-export { default as Resizable } from "./components/Resizable/index.js";
-export { default as ScrollArea } from "./components/ScrollArea/index.js";
-export { default as Text } from "./components/Text/index.js";
-export { default as View } from "./components/View/index.js";
+export { default as Alert } from "./components/Alert";
+export { default as Autocomplete } from "./components/Autocomplete";
+export { default as Avatar } from "./components/Avatar";
+export { default as Badge } from "./components/Badge";
+export { default as Breadcrumbs } from "./components/Breadcrumbs";
+export { default as Button } from "./components/Button";
+export { default as Calendar } from "./components/Calendar";
+export { default as Card } from "./components/Card";
+export { default as Carousel } from "./components/Carousel";
+export { default as Checkbox } from "./components/Checkbox";
+export { default as CheckboxGroup } from "./components/CheckboxGroup";
+export { default as ContextMenu } from "./components/ContextMenu";
+export { default as Divider } from "./components/Divider";
+export { default as DropdownMenu } from "./components/DropdownMenu";
+export { default as FileUpload } from "./components/FileUpload";
+export { default as Link } from "./components/Link";
+export { default as Loader } from "./components/Loader";
+export { default as LoaderText } from "./components/LoaderText";
+export { default as MenuItem } from "./components/MenuItem";
+export { default as Modal } from "./components/Modal";
+export { default as NumberField } from "./components/NumberField";
+export { default as Pagination } from "./components/Pagination";
+export { default as PinField } from "./components/PinField";
+export { default as Popover } from "./components/Popover";
+export { default as ProgressBar } from "./components/ProgressBar";
+export { default as ProgressIndicator } from "./components/ProgressIndicator";
+export { default as Radio } from "./components/Radio";
+export { default as RadioGroup } from "./components/RadioGroup";
+export { default as Select, SelectTrigger } from "./components/Select";
+export { default as Skeleton } from "./components/Skeleton";
+export { default as Slider } from "./components/Slider";
+export { default as Switch } from "./components/Switch";
+export { default as Table } from "./components/Table";
+export { default as Tabs } from "./components/Tabs";
+export { default as TextArea } from "./components/TextArea";
+export { default as TextField } from "./components/TextField";
+export { ToastProvider, useToast } from "./components/Toast";
+export { default as ToggleButton } from "./components/ToggleButton";
+export { default as ToggleButtonGroup } from "./components/ToggleButtonGroup";
+export { default as Tooltip } from "./components/Tooltip";
+export { default as Accordion } from "./components/Accordion";
+export { default as Actionable } from "./components/Actionable";
+export { default as Container } from "./components/Container";
+export { default as Dismissible } from "./components/Dismissible";
+export { default as Flyout } from "./components/Flyout";
+export { default as FormControl } from "./components/FormControl";
+export { default as Grid } from "./components/Grid";
+export { default as Hidden } from "./components/Hidden";
+export { default as HiddenInput } from "./components/HiddenInput";
+export { default as HiddenVisually } from "./components/HiddenVisually";
+export { default as Icon } from "./components/Icon";
+export { default as Image } from "./components/Image";
+export { default as Overlay } from "./components/Overlay";
+export { default as Reshaped } from "./components/Reshaped";
+export { default as Resizable } from "./components/Resizable";
+export { default as ScrollArea } from "./components/ScrollArea";
+export { default as Text } from "./components/Text";
+export { default as View } from "./components/View";
 /**
  * Hooks
  */
-export { useFormControl } from "./components/FormControl/index.js";
-export { default as Theme, useTheme } from "./components/Theme/index.js";
-export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue.js";
-export { default as useHandlerRef } from "./hooks/useHandlerRef.js";
-export { default as useHotkeys } from "./hooks/useHotkeys.js";
-export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect.js";
-export { default as useKeyboardArrowNavigation } from "./hooks/useKeyboardArrowNavigation.js";
-export { default as useKeyboardMode } from "./hooks/useKeyboardMode.js";
-export { default as useOnClickOutside } from "./hooks/useOnClickOutside.js";
-export { default as useRTL } from "./hooks/useRTL.js";
-export { default as useScrollLock } from "./hooks/useScrollLock.js";
-export { default as useToggle } from "./hooks/useToggle.js";
-export { default as useIsDismissible } from "./hooks/useIsDismissible.js";
+export { useFormControl } from "./components/FormControl";
+export { default as Theme, useTheme } from "./components/Theme";
+export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue";
+export { default as useHandlerRef } from "./hooks/useHandlerRef";
+export { default as useHotkeys } from "./hooks/useHotkeys";
+export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
+export { default as useKeyboardArrowNavigation } from "./hooks/useKeyboardArrowNavigation";
+export { default as useKeyboardMode } from "./hooks/useKeyboardMode";
+export { default as useOnClickOutside } from "./hooks/useOnClickOutside";
+export { default as useRTL } from "./hooks/useRTL";
+export { default as useScrollLock } from "./hooks/useScrollLock";
+export { default as useToggle } from "./hooks/useToggle";
+export { default as useIsDismissible } from "./hooks/useIsDismissible";
 /**
  * Utility functions
  */
-export { responsivePropDependency } from "./utilities/props.js";
+export { responsivePropDependency } from "./utilities/props";
 export { classNames, TrapFocus } from "@reshaped/utilities";
 /**
  * Dev utilities
  */
-export { default as Placeholder } from "./utilities/storybook/Placeholder.js";
+export { default as Placeholder } from "./utilities/storybook/Placeholder";

package/dist/styles/mixin.d.ts

@@ -1,5 +1,5 @@
 import type { ClassName } from "@reshaped/utilities";
-import type { Mixin } from "./types";
+import type { Mixin } from "../styles/types";
 export declare const resolveMixin: (mixin: Mixin) => {
     variables: React.CSSProperties;
     classNames: ClassName[];

package/dist/styles/mixin.js

@@ -1,20 +1,21 @@
-import align from "./resolvers/align/index.js";
-import aspectRatio from "./resolvers/aspectRatio/index.js";
-import bleed from "./resolvers/bleed/index.js";
-import border, { borderBlock, borderBottom, borderColor, borderEnd, borderInline, borderStart, borderTop, } from "./resolvers/border/index.js";
-import height from "./resolvers/height/index.js";
-import inset, { insetBlock, insetBottom, insetEnd, insetInline, insetStart, insetTop, } from "./resolvers/inset/index.js";
-import justify from "./resolvers/justify/index.js";
-import maxHeight from "./resolvers/maxHeight/index.js";
-import maxWidth from "./resolvers/maxWidth/index.js";
-import minHeight from "./resolvers/minHeight/index.js";
-import minWidth from "./resolvers/minWidth/index.js";
-import padding, { paddingBlock, paddingBottom, paddingEnd, paddingInline, paddingStart, paddingTop, } from "./resolvers/padding/index.js";
-import position from "./resolvers/position/index.js";
-import radius from "./resolvers/radius/index.js";
-import shadow from "./resolvers/shadow/index.js";
-import textAlign from "./resolvers/textAlign/index.js";
-import width from "./resolvers/width/index.js";
+import align from "../styles/resolvers/align";
+import aspectRatio from "../styles/resolvers/aspectRatio";
+import bleed from "../styles/resolvers/bleed";
+import border, { borderBlock, borderBottom, borderColor, borderEnd, borderInline, borderStart, borderTop, } from "../styles/resolvers/border";
+import height from "../styles/resolvers/height";
+import inset, { insetBlock, insetBottom, insetEnd, insetInline, insetStart, insetTop, } from "../styles/resolvers/inset";
+import justify from "../styles/resolvers/justify";
+import maxHeight from "../styles/resolvers/maxHeight";
+import maxWidth from "../styles/resolvers/maxWidth";
+import minHeight from "../styles/resolvers/minHeight";
+import minWidth from "../styles/resolvers/minWidth";
+import padding, { paddingBlock, paddingBottom, paddingEnd, paddingInline, paddingStart, paddingTop, } from "../styles/resolvers/padding";
+import position from "../styles/resolvers/position";
+import radius from "../styles/resolvers/radius";
+import shadow from "../styles/resolvers/shadow";
+import textAlign from "../styles/resolvers/textAlign";
+import width from "../styles/resolvers/width";
+import zIndex from "../styles/resolvers/zIndex";
 const mixinMap = {
     align,
     aspectRatio,
@@ -52,6 +53,7 @@ const mixinMap = {
     textAlign,
     width,
     shadow,
+    zIndex,
 };
 export const resolveMixin = (mixin) => {
     const output = {

package/dist/styles/resolvers/align/index.d.ts

@@ -1,4 +1,4 @@
-import * as T from "../../types";
+import * as T from "../../../styles/types";
 import "./align.css";
 declare const align: T.StyleResolver<T.Align>;
 export default align;

package/dist/styles/resolvers/align/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../../utilities/props.js";
+import { responsiveVariables } from "../../../utilities/props";
 import "./align.css";
 const align = (value) => {
     if (!value)

package/dist/styles/resolvers/aspectRatio/index.d.ts

@@ -1,4 +1,4 @@
-import * as T from "../../types";
+import * as T from "../../../styles/types";
 import "./aspectRatio.css";
 declare const aspectRatio: T.StyleResolver<T.AspectRatio>;
 export default aspectRatio;

package/dist/styles/resolvers/aspectRatio/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../../utilities/props.js";
+import { responsiveVariables } from "../../../utilities/props";
 import "./aspectRatio.css";
 const aspectRatio = (value) => {
     if (!value)

package/dist/styles/resolvers/bleed/index.d.ts

@@ -1,3 +1,3 @@
-import * as T from "../../types";
+import * as T from "../../../styles/types";
 declare const bleed: T.StyleResolver<T.Bleed>;
 export default bleed;

package/dist/styles/resolvers/bleed/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsivePropDependency, responsiveVariables, } from "../../../utilities/props.js";
+import { responsiveClassNames, responsivePropDependency, responsiveVariables, } from "../../../utilities/props";
 import s from "./bleed.module.css";
 const bleed = (value) => {
     if (value === undefined)

package/dist/styles/resolvers/border/borderWidth.css

@@ -1 +1 @@
-[style*="--rs-border-w"]:before{border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute;z-index:var(--rs-z-index-relative)}[style*="--rs-border-w-s:"]:before{border:var(--rs-border-w) solid var(--rs-border-color);--rs-border-w-s:1px;--rs-border-w-m:var(--rs-border-w-s);--rs-border-w-l:var(--rs-border-w-m);--rs-border-w-xl:var(--rs-border-w-l);--rs-border-w:var(--rs-border-w-s)}[style*="--rs-border-w-top"]:before{border-top:var(--rs-border-w-top) solid var(--rs-border-color);--rs-border-w-top-s:1px;--rs-border-w-top-m:var(--rs-border-w-top-s);--rs-border-w-top-l:var(--rs-border-w-top-m);--rs-border-w-top-xl:var(--rs-border-w-top-l);--rs-border-w-top:var(--rs-border-w-top-s)}[style*="--rs-border-w-bottom"]:before{border-bottom:var(--rs-border-w-bottom) solid var(--rs-border-color);--rs-border-w-bottom-s:1px;--rs-border-w-bottom-m:var(--rs-border-w-bottom-s);--rs-border-w-bottom-l:var(--rs-border-w-bottom-m);--rs-border-w-bottom-xl:var(--rs-border-w-bottom-l);--rs-border-w-bottom:var(--rs-border-w-bottom-s)}[style*="--rs-border-w-start"]:before{border-inline-start:var(--rs-border-w-start) solid var(--rs-border-color);--rs-border-w-start-s:1px;--rs-border-w-start-m:var(--rs-border-w-start-s);--rs-border-w-start-l:var(--rs-border-w-start-m);--rs-border-w-start-xl:var(--rs-border-w-start-l);--rs-border-w-start:var(--rs-border-w-start-s)}[style*="--rs-border-w-end"]:before{border-inline-end:var(--rs-border-w-end) solid var(--rs-border-color);--rs-border-w-end-s:1px;--rs-border-w-end-m:var(--rs-border-w-end-s);--rs-border-w-end-l:var(--rs-border-w-end-m);--rs-border-w-end-xl:var(--rs-border-w-end-l);--rs-border-w-end:var(--rs-border-w-end-s)}[style*="--rs-border-w-inline"]:before{border-inline:var(--rs-border-w-inline) solid var(--rs-border-color);--rs-border-w-inline-s:1px;--rs-border-w-inline-m:var(--rs-border-w-inline-s);--rs-border-w-inline-l:var(--rs-border-w-inline-m);--rs-border-w-inline-xl:var(--rs-border-w-inline-l);--rs-border-w-inline:var(--rs-border-w-inline-s)}[style*="--rs-border-w-block"]:before{border-block:var(--rs-border-w-block) solid var(--rs-border-color);--rs-border-w-block-s:1px;--rs-border-w-block-m:var(--rs-border-w-block-s);--rs-border-w-block-l:var(--rs-border-w-block-m);--rs-border-w-block-xl:var(--rs-border-w-block-l);--rs-border-w-block:var(--rs-border-w-block-s)}@media (--rs-viewport-m ){[style*="--rs-border-w-s:"]:before{--rs-border-w:var(--rs-border-w-m)}[style*="--rs-border-w-top"]:before{--rs-border-w-top:var(--rs-border-w-top-m)}[style*="--rs-border-w-bottom"]:before{--rs-border-w-bottom:var(--rs-border-w-bottom-m)}[style*="--rs-border-w-start"]:before{--rs-border-w-start:var(--rs-border-w-start-m)}[style*="--rs-border-w-end"]:before{--rs-border-w-end:var(--rs-border-w-end-m)}[style*="--rs-border-w-inline"]:before{--rs-border-w-inline:var(--rs-border-w-inline-m)}[style*="--rs-border-w-block"]:before{--rs-border-w-block:var(--rs-border-w-block-m)}}@media (--rs-viewport-l ){[style*="--rs-border-w-s:"]:before{--rs-border-w:var(--rs-border-w-l)}[style*="--rs-border-w-top"]:before{--rs-border-w-top:var(--rs-border-w-top-l)}[style*="--rs-border-w-bottom"]:before{--rs-border-w-bottom:var(--rs-border-w-bottom-l)}[style*="--rs-border-w-start"]:before{--rs-border-w-start:var(--rs-border-w-start-l)}[style*="--rs-border-w-end"]:before{--rs-border-w-end:var(--rs-border-w-end-l)}[style*="--rs-border-w-inline"]:before{--rs-border-w-inline:var(--rs-border-w-inline-l)}[style*="--rs-border-w-block"]:before{--rs-border-w-block:var(--rs-border-w-block-l)}}@media (--rs-viewport-xl ){[style*="--rs-border-w-s:"]:before{--rs-border-w:var(--rs-border-w-xl)}[style*="--rs-border-w-top"]:before{--rs-border-w-top:var(--rs-border-w-top-xl)}[style*="--rs-border-w-bottom"]:before{--rs-border-w-bottom:var(--rs-border-w-bottom-xl)}[style*="--rs-border-w-start"]:before{--rs-border-w-start:var(--rs-border-w-start-xl)}[style*="--rs-border-w-end"]:before{--rs-border-w-end:var(--rs-border-w-end-xl)}[style*="--rs-border-w-inline"]:before{--rs-border-w-inline:var(--rs-border-w-inline-xl)}[style*="--rs-border-w-block"]:before{--rs-border-w-block:var(--rs-border-w-block-xl)}}
+[style*="--rs-border-w"]:before{content:"";position:absolute;pointer-events:none;border-radius:inherit;z-index:var(--rs-z-index-relative);inset:0}[style*="--rs-border-w-s:"]:before{border:var(--rs-border-w) solid var(--rs-border-color);--rs-border-w-s:1px;--rs-border-w-m:var(--rs-border-w-s);--rs-border-w-l:var(--rs-border-w-m);--rs-border-w-xl:var(--rs-border-w-l);--rs-border-w:var(--rs-border-w-s)}[style*="--rs-border-w-top"]:before{border-top:var(--rs-border-w-top) solid var(--rs-border-color);--rs-border-w-top-s:1px;--rs-border-w-top-m:var(--rs-border-w-top-s);--rs-border-w-top-l:var(--rs-border-w-top-m);--rs-border-w-top-xl:var(--rs-border-w-top-l);--rs-border-w-top:var(--rs-border-w-top-s)}[style*="--rs-border-w-bottom"]:before{border-bottom:var(--rs-border-w-bottom) solid var(--rs-border-color);--rs-border-w-bottom-s:1px;--rs-border-w-bottom-m:var(--rs-border-w-bottom-s);--rs-border-w-bottom-l:var(--rs-border-w-bottom-m);--rs-border-w-bottom-xl:var(--rs-border-w-bottom-l);--rs-border-w-bottom:var(--rs-border-w-bottom-s)}[style*="--rs-border-w-start"]:before{border-inline-start:var(--rs-border-w-start) solid var(--rs-border-color);--rs-border-w-start-s:1px;--rs-border-w-start-m:var(--rs-border-w-start-s);--rs-border-w-start-l:var(--rs-border-w-start-m);--rs-border-w-start-xl:var(--rs-border-w-start-l);--rs-border-w-start:var(--rs-border-w-start-s)}[style*="--rs-border-w-end"]:before{border-inline-end:var(--rs-border-w-end) solid var(--rs-border-color);--rs-border-w-end-s:1px;--rs-border-w-end-m:var(--rs-border-w-end-s);--rs-border-w-end-l:var(--rs-border-w-end-m);--rs-border-w-end-xl:var(--rs-border-w-end-l);--rs-border-w-end:var(--rs-border-w-end-s)}[style*="--rs-border-w-inline"]:before{border-inline:var(--rs-border-w-inline) solid var(--rs-border-color);--rs-border-w-inline-s:1px;--rs-border-w-inline-m:var(--rs-border-w-inline-s);--rs-border-w-inline-l:var(--rs-border-w-inline-m);--rs-border-w-inline-xl:var(--rs-border-w-inline-l);--rs-border-w-inline:var(--rs-border-w-inline-s)}[style*="--rs-border-w-block"]:before{border-block:var(--rs-border-w-block) solid var(--rs-border-color);--rs-border-w-block-s:1px;--rs-border-w-block-m:var(--rs-border-w-block-s);--rs-border-w-block-l:var(--rs-border-w-block-m);--rs-border-w-block-xl:var(--rs-border-w-block-l);--rs-border-w-block:var(--rs-border-w-block-s)}@media (--rs-viewport-m ){[style*="--rs-border-w-s:"]:before{--rs-border-w:var(--rs-border-w-m)}[style*="--rs-border-w-top"]:before{--rs-border-w-top:var(--rs-border-w-top-m)}[style*="--rs-border-w-bottom"]:before{--rs-border-w-bottom:var(--rs-border-w-bottom-m)}[style*="--rs-border-w-start"]:before{--rs-border-w-start:var(--rs-border-w-start-m)}[style*="--rs-border-w-end"]:before{--rs-border-w-end:var(--rs-border-w-end-m)}[style*="--rs-border-w-inline"]:before{--rs-border-w-inline:var(--rs-border-w-inline-m)}[style*="--rs-border-w-block"]:before{--rs-border-w-block:var(--rs-border-w-block-m)}}@media (--rs-viewport-l ){[style*="--rs-border-w-s:"]:before{--rs-border-w:var(--rs-border-w-l)}[style*="--rs-border-w-top"]:before{--rs-border-w-top:var(--rs-border-w-top-l)}[style*="--rs-border-w-bottom"]:before{--rs-border-w-bottom:var(--rs-border-w-bottom-l)}[style*="--rs-border-w-start"]:before{--rs-border-w-start:var(--rs-border-w-start-l)}[style*="--rs-border-w-end"]:before{--rs-border-w-end:var(--rs-border-w-end-l)}[style*="--rs-border-w-inline"]:before{--rs-border-w-inline:var(--rs-border-w-inline-l)}[style*="--rs-border-w-block"]:before{--rs-border-w-block:var(--rs-border-w-block-l)}}@media (--rs-viewport-xl ){[style*="--rs-border-w-s:"]:before{--rs-border-w:var(--rs-border-w-xl)}[style*="--rs-border-w-top"]:before{--rs-border-w-top:var(--rs-border-w-top-xl)}[style*="--rs-border-w-bottom"]:before{--rs-border-w-bottom:var(--rs-border-w-bottom-xl)}[style*="--rs-border-w-start"]:before{--rs-border-w-start:var(--rs-border-w-start-xl)}[style*="--rs-border-w-end"]:before{--rs-border-w-end:var(--rs-border-w-end-xl)}[style*="--rs-border-w-inline"]:before{--rs-border-w-inline:var(--rs-border-w-inline-xl)}[style*="--rs-border-w-block"]:before{--rs-border-w-block:var(--rs-border-w-block-xl)}}

package/dist/styles/resolvers/border/index.d.ts

@@ -1,4 +1,4 @@
-import * as T from "../../types";
+import * as T from "../../../styles/types";
 import "./borderWidth.css";
 declare const border: T.StyleResolver<T.Border>;
 export declare const borderTop: T.StyleResolver<T.Border>;

package/dist/styles/resolvers/border/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsivePropDependency, responsiveVariables, } from "../../../utilities/props.js";
+import { responsiveClassNames, responsivePropDependency, responsiveVariables, } from "../../../utilities/props";
 import "./borderWidth.css";
 import s from "./border.module.css";
 const border = (value) => {

package/dist/styles/resolvers/height/index.d.ts

@@ -1,3 +1,3 @@
-import * as T from "../../types";
+import * as T from "../../../styles/types";
 declare const height: T.StyleResolver<T.Height>;
 export default height;

package/dist/styles/resolvers/height/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsiveVariables } from "../../../utilities/props.js";
+import { responsiveClassNames, responsiveVariables } from "../../../utilities/props";
 import s from "./height.module.css";
 const height = (value) => {
     if (!value)

package/dist/styles/resolvers/inset/index.d.ts

@@ -1,10 +1,10 @@
-import * as T from "../../types";
+import * as T from "../../../styles/types";
 import "./inset.css";
 declare const inset: T.StyleResolver<T.Inset>;
 export declare const insetTop: T.StyleResolver<T.Inset>;
 export declare const insetBottom: T.StyleResolver<T.Inset>;
 export declare const insetStart: T.StyleResolver<T.Inset>;
 export declare const insetEnd: T.StyleResolver<T.Inset>;
-export declare const insetInline: T.StyleResolver<T.Inset>;
-export declare const insetBlock: T.StyleResolver<T.Inset>;
+export declare const insetInline: T.StyleResolver<T.InsetAxis>;
+export declare const insetBlock: T.StyleResolver<T.InsetAxis>;
 export default inset;

package/dist/styles/resolvers/inset/index.js

@@ -1,4 +1,5 @@
-import { responsiveVariables } from "../../../utilities/props.js";
+import { responsiveClassNames, responsiveVariables } from "../../../utilities/props";
+import s from "./inset.module.css";
 import "./inset.css";
 const inset = (value) => {
     if (value === undefined)
@@ -28,11 +29,19 @@ export const insetEnd = (value) => {
 export const insetInline = (value) => {
     if (value === undefined)
         return {};
-    return { variables: responsiveVariables("--rs-inset-inline", value) };
+    const classNames = responsiveClassNames(s, (value) => (value === "center" ? "--inline-center" : "--inline-unit"), value, { excludeValueFromClassName: true });
+    return {
+        classNames: [s.root, classNames],
+        variables: responsiveVariables("--rs-inset-inline", value),
+    };
 };
 export const insetBlock = (value) => {
     if (value === undefined)
         return {};
-    return { variables: responsiveVariables("--rs-inset-block", value) };
+    const classNames = responsiveClassNames(s, (value) => (value === "center" ? "--block-center" : "--block-unit"), value, { excludeValueFromClassName: true });
+    return {
+        classNames: [s.root, classNames],
+        variables: responsiveVariables("--rs-inset-block", value),
+    };
 };
 export default inset;