reshaped 3.2.0-canary.6 → 3.2.0-canary.7

package/dist/components/_private/Flyout/useFlyout.js

@@ -1,25 +1,8 @@
 import React from "react";
 import useRTL from "../../../hooks/useRTL.js";
-import { getClosestFlyoutTarget, getShadowRoot } from "../../../utilities/dom.js";
+import { getClosestFlyoutTarget, getShadowRoot } from "../../../utilities/dom/index.js";
 import calculatePosition from "./utilities/calculatePosition.js";
-const topPos = ["top-start", "top", "top-end"];
-const bottomPos = ["bottom-start", "bottom", "bottom-end"];
-const startPos = ["start", "start-bottom", "start-top"];
-const endPos = ["end", "end-bottom", "end-top"];
-const order = {
-    top: [...topPos, ...bottomPos, ...endPos, ...startPos],
-    bottom: [...bottomPos, ...topPos, ...endPos, ...startPos],
-    start: [...startPos, ...endPos, ...topPos, ...bottomPos],
-    end: [...endPos, ...startPos, ...topPos, ...bottomPos],
-};
-/**
- * Get an order of positions to try to fit popover on the screen based on its starting position
- */
-const getPositionOrder = (position) => {
-    const types = ["top", "bottom", "start", "end"];
-    const type = types.find((type) => position.startsWith(type)) || "bottom";
-    return order[type];
-};
+import getPositionFallbacks from "./utilities/getPositionFallbacks.js";
 /**
  * Check if element visually fits on the screen
  */
@@ -60,12 +43,13 @@ const resetStyles = {
  * Set position of the target element to fit on the screen
  */
 const flyout = (args) => {
-    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, ...options } = args;
-    const { position, forcePosition, width, container } = options;
+    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentGap = 0, ...options } = args;
+    const { position, fallbackPositions, width, container, lastUsedFallback, onFallback } = options;
     const targetClone = flyoutEl.cloneNode(true);
     const triggerBounds = passedTriggerBounds || triggerEl.getBoundingClientRect();
+    const contentGapModifier = parseInt(getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1"));
     // Reset all styles applied on the previous hook execution
-    targetClone.style = "";
+    targetClone.style.cssText = "";
     Object.keys(resetStyles).forEach((key) => {
         const value = resetStyles[key];
         targetClone.style[key] = value.toString();
@@ -88,37 +72,30 @@ const flyout = (args) => {
         top: containerBounds.top + document.documentElement.scrollTop - containerParent.scrollTop,
         left: containerBounds.left + document.documentElement.scrollLeft - containerParent.scrollLeft,
     };
-    let calculated = calculatePosition({ triggerBounds, flyoutBounds, scopeOffset, ...options });
-    if (!fullyVisible(calculated) && !forcePosition) {
-        const order = getPositionOrder(position);
-        const mobileOrder = order.filter((position) => position === "top" || position === "bottom");
-        const test = (testOrder, extraOptions = {}) => {
-            const { fullWidth } = extraOptions;
-            testOrder.some((currentPosition) => {
-                const calculateOptions = {
-                    ...options,
-                    width: fullWidth ? "full" : options.width,
-                    position: currentPosition,
-                };
-                const tested = calculatePosition({
-                    triggerBounds,
-                    flyoutBounds,
-                    scopeOffset,
-                    ...calculateOptions,
-                });
-                if (fullyVisible(tested)) {
-                    calculated = tested;
-                    return true;
-                }
-                return false;
-            });
-        };
-        test(order);
-        if (!fullyVisible(calculated)) {
-            test(mobileOrder, { fullWidth: true });
+    let calculated = null;
+    const testOrder = getPositionFallbacks(position, fallbackPositions);
+    testOrder.some((currentPosition, index) => {
+        const tested = calculatePosition({
+            ...options,
+            triggerBounds,
+            flyoutBounds,
+            scopeOffset,
+            position: currentPosition,
+            contentGap: contentGap * contentGapModifier,
+        });
+        const visible = fullyVisible(tested);
+        const validPosition = visible || fallbackPositions?.length === 0;
+        // Saving first try in case non of the options work
+        if (validPosition || lastUsedFallback === currentPosition) {
+            calculated = tested;
+            onFallback(currentPosition);
         }
+        return validPosition;
+    });
+    if (!calculated) {
+        throw new Error(`Reshaped: Can't calculate styles for the ${position} position`);
     }
-    targetClone.parentNode.removeChild(targetClone);
+    targetClone.parentNode?.removeChild(targetClone);
     return calculated;
 };
 const flyoutReducer = (state, action) => {
@@ -156,8 +133,13 @@ const flyoutReducer = (state, action) => {
     }
 };
 const useFlyout = (args) => {
-    const { triggerElRef, flyoutElRef, triggerBoundsRef, ...options } = args;
-    const { position: defaultPosition = "bottom", forcePosition, width, container } = options;
+    const { triggerElRef, flyoutElRef, triggerBoundsRef, contentGap, ...options } = args;
+    const { position: defaultPosition = "bottom", fallbackPositions, width, container } = options;
+    const lastUsedFallbackRef = React.useRef(defaultPosition);
+    // Memo the array internally to avoid new arrays triggering useCallback
+    const cachedFallbackPositions = React.useMemo(() => fallbackPositions, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fallbackPositions?.join(" ")]);
     const [isRTL] = useRTL();
     const [state, dispatch] = React.useReducer(flyoutReducer, {
         position: defaultPosition,
@@ -176,6 +158,9 @@ const useFlyout = (args) => {
     const remove = React.useCallback(() => {
         dispatch({ type: "remove" });
     }, []);
+    const handleFallback = React.useCallback((position) => {
+        lastUsedFallbackRef.current = position;
+    }, []);
     const updatePosition = React.useCallback((options) => {
         if (!triggerElRef.current || !flyoutElRef.current)
             return;
@@ -185,21 +170,26 @@ const useFlyout = (args) => {
             triggerBounds: triggerBoundsRef.current,
             width,
             position: defaultPosition,
-            forcePosition,
+            fallbackPositions: cachedFallbackPositions,
+            lastUsedFallback: lastUsedFallbackRef.current,
+            onFallback: handleFallback,
             rtl: isRTL,
             container,
+            contentGap,
         });
         if (nextFlyoutData)
             dispatch({ type: "position", payload: { ...nextFlyoutData, sync: options?.sync } });
     }, [
         container,
         defaultPosition,
-        forcePosition,
+        cachedFallbackPositions,
         isRTL,
         flyoutElRef,
         triggerElRef,
         triggerBoundsRef,
         width,
+        contentGap,
+        handleFallback,
     ]);
     React.useEffect(() => {
         if (state.status === "rendered")

package/dist/components/_private/Flyout/utilities/calculatePosition.js

@@ -16,24 +16,29 @@ const centerBySize = (originSize, targetSize) => {
  * Calculate styles for the current position
  */
 const calculatePosition = (args) => {
-    const { triggerBounds, flyoutBounds, scopeOffset, position: passedPosition, rtl, width } = args;
+    const { triggerBounds, flyoutBounds, scopeOffset, position: passedPosition, rtl, width, contentGap = 0, } = args;
+    const isFullWidth = width === "full" || width === "100%";
     let left = 0;
     let top = 0;
     let position = passedPosition;
     if (rtl)
         position = getRTLPosition(position);
-    if (width === "full" || width === "trigger") {
+    if (isFullWidth || width === "trigger") {
         position = position.includes("top") ? "top" : "bottom";
     }
+    const isHorizontalPosition = position.match(/^(start|end)/);
+    const isVerticalPosition = position.match(/^(top|bottom)/);
+    const flyoutWidth = flyoutBounds.width + (isHorizontalPosition ? contentGap : 0);
+    const flyoutHeight = flyoutBounds.height + (isVerticalPosition ? contentGap : 0);
     switch (position) {
         case "bottom":
         case "top":
-            left = centerBySize(triggerBounds.width, flyoutBounds.width) + triggerBounds.left;
+            left = centerBySize(triggerBounds.width, flyoutWidth) + triggerBounds.left;
             break;
         case "start":
         case "start-top":
         case "start-bottom":
-            left = triggerBounds.left - flyoutBounds.width;
+            left = triggerBounds.left - flyoutWidth;
             break;
         case "end":
         case "end-top":
@@ -46,7 +51,7 @@ const calculatePosition = (args) => {
             break;
         case "top-end":
         case "bottom-end":
-            left = triggerBounds.right - flyoutBounds.width;
+            left = triggerBounds.right - flyoutWidth;
             break;
         default:
             break;
@@ -55,7 +60,7 @@ const calculatePosition = (args) => {
         case "top":
         case "top-start":
         case "top-end":
-            top = triggerBounds.top - flyoutBounds.height;
+            top = triggerBounds.top - flyoutHeight;
             break;
         case "bottom":
         case "bottom-start":
@@ -64,7 +69,7 @@ const calculatePosition = (args) => {
             break;
         case "start":
         case "end":
-            top = centerBySize(triggerBounds.height, flyoutBounds.height) + triggerBounds.top;
+            top = centerBySize(triggerBounds.height, flyoutHeight) + triggerBounds.top;
             break;
         case "start-top":
         case "end-top":
@@ -72,7 +77,7 @@ const calculatePosition = (args) => {
             break;
         case "start-bottom":
         case "end-bottom":
-            top = triggerBounds.bottom - flyoutBounds.height;
+            top = triggerBounds.bottom - flyoutHeight;
             break;
         default:
             break;
@@ -82,9 +87,9 @@ const calculatePosition = (args) => {
     }
     top = Math.round(top + (window.scrollY || 0) - scopeOffset.top);
     left = Math.round(left + (window.scrollX || 0) - scopeOffset.left);
-    let widthStyle = Math.ceil(flyoutBounds.width);
-    const height = Math.ceil(flyoutBounds.height);
-    if (width === "full") {
+    let widthStyle = Math.ceil(flyoutWidth);
+    const height = Math.ceil(flyoutHeight);
+    if (isFullWidth) {
         left = SCREEN_OFFSET;
         widthStyle = window.innerWidth - SCREEN_OFFSET * 2;
     }

package/dist/components/_private/Flyout/utilities/getPositionFallbacks.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "../Flyout.types";
+declare const getPositionFallbacks: (position: T.Position, availableFallbacks?: T.Position[]) => T.Position[];
+export default getPositionFallbacks;

package/dist/components/_private/Flyout/utilities/getPositionFallbacks.js

@@ -0,0 +1,39 @@
+// All available positions for each side
+const positions = {
+    top: ["top-start", "top-end", "top"],
+    bottom: ["bottom-start", "bottom-end", "bottom"],
+    start: ["start-top", "start-bottom", "start"],
+    end: ["end-top", "end-bottom", "end"],
+};
+// Order of sides to try depending on the starting side
+const fallbackOrder = {
+    top: ["bottom", "start", "end"],
+    bottom: ["top", "end", "start"],
+    start: ["end", "top", "bottom"],
+    end: ["start", "bottom", "top"],
+};
+// Get an order of positions to try to fit flyout on the screen based on its starting position
+const getPositionFallbacks = (position, availableFallbacks) => {
+    const result = [position];
+    const chunks = position.split("-");
+    const [firstChunk] = chunks;
+    const passedPositionOrder = positions[firstChunk];
+    const startingFallbackIndex = passedPositionOrder.indexOf(position);
+    const fallbackIndexOrder = [startingFallbackIndex];
+    passedPositionOrder.forEach((_, index) => {
+        if (index === startingFallbackIndex)
+            return;
+        fallbackIndexOrder.push(index);
+    });
+    [firstChunk, ...fallbackOrder[firstChunk]].forEach((fallbackSide) => {
+        const fallbackOrder = positions[fallbackSide];
+        fallbackIndexOrder.forEach((index) => {
+            const position = fallbackOrder[index];
+            if (availableFallbacks?.indexOf(position) === -1)
+                return;
+            result.push(position);
+        });
+    });
+    return result;
+};
+export default getPositionFallbacks;

package/dist/config/tailwind.d.ts

@@ -1,2 +1,2 @@
 import type { ThemeDefinition } from "../themes/_generator/tokens/types";
-export declare const getTheme: (theme?: ThemeDefinition) => Record<"borderRadius" | "backgroundColor" | "borderColor" | "spacing" | "boxShadow" | "textColor" | "colors" | "screens", Record<string, string>>;
+export declare const getTheme: (theme?: ThemeDefinition) => Record<"borderRadius" | "backgroundColor" | "borderColor" | "boxShadow" | "textColor" | "colors" | "spacing" | "screens", Record<string, string>>;

package/dist/constants/breakpoints.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    m: number;
+    l: number;
+    xl: number;
+};
+export default _default;

package/dist/constants/breakpoints.js

@@ -0,0 +1,5 @@
+export default {
+    m: 660,
+    l: 900,
+    xl: 1280,
+};

package/dist/hooks/_private/useIsDismissible.js

@@ -18,26 +18,19 @@ const removeFromQueue = (id) => {
         queue = {};
 };
 const addToQueue = (id, contentRef, triggerRef) => {
-    const parentItem = latestId ? queue[latestId] : undefined;
-    const insideParent = triggerRef?.current &&
-        parentItem &&
-        parentItem.contentRef.current?.contains(triggerRef.current);
-    if (!insideParent && triggerRef && latestId) {
-        removeFromQueue(latestId);
-    }
     queue[id] = { parentId: latestId, triggerRef, contentRef };
     latestId = id;
 };
 const useIsDismissible = (active = false, contentRef, triggerRef) => {
     const id = useElementId();
-    const isDismissible = React.useCallback(() => latestId === id, [id]);
+    const isDismissible = React.useCallback(() => {
+        return active ? latestId === id : true;
+    }, [id, active]);
     React.useEffect(() => {
-        if (active) {
-            addToQueue(id, contentRef, triggerRef);
-        }
-        else {
-            removeFromQueue(id);
-        }
+        if (!active)
+            return;
+        addToQueue(id, contentRef, triggerRef);
+        return () => removeFromQueue(id);
     }, [active, id, contentRef, triggerRef]);
     return isDismissible;
 };

package/dist/hooks/_private/useSingletonKeyboardMode.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { enableKeyboardMode, disableKeyboardMode } from "../../utilities/a11y/keyboardMode.js";
+import { enableKeyboardMode, disableKeyboardMode } from "../../utilities/a11y/index.js";
 const useSingletonKeyboardMode = () => {
     React.useEffect(() => {
         const handleKeyDown = (e) => {

package/dist/hooks/tests/useResponsiveClientValue.stories.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const state: () => React.JSX.Element;
+export declare const base: () => import("react").JSX.Element;

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

@@ -1,4 +1,3 @@
-import React from "react";
 import useResponsiveClientValue from "../useResponsiveClientValue.js";
 import View from "../../components/View/index.js";
 export default { title: "Hooks/useResponsiveClientValue" };
@@ -10,4 +9,4 @@ function Example() {
     });
     return <View width={25} height={25} backgroundColor={value}/>;
 }
-export const state = () => <Example />;
+export const base = () => <Example />;

package/dist/hooks/useDrag.js

@@ -1,6 +1,7 @@
 "use client";
 import React from "react";
-import { disableUserSelect, enableUserSelect, disableScroll, enableScroll } from "../utilities/dom.js";
+import { disableUserSelect, enableUserSelect } from "../utilities/dom/index.js";
+import { disableScroll, enableScroll } from "../utilities/scroll/index.js";
 import useToggle from "./useToggle.js";
 import useHotkeys from "./useHotkeys.js";
 import * as keys from "../constants/keys.js";

package/dist/hooks/useResponsiveClientValue.js

@@ -2,21 +2,32 @@
 import React from "react";
 import { SingletonEnvironmentContext } from "./_private/useSingletonEnvironment.js";
 import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
-const breakpoints = {
-    m: 660,
-    l: 900,
-    xl: 1280,
-};
-const mediaQueries = {
-    s: `(max-width: ${breakpoints.m - 1}px)`,
-    m: `(min-width: ${breakpoints.m}px) and (max-width: ${breakpoints.l - 1}px)`,
-    l: `(min-width: ${breakpoints.l}px) and (max-width: ${breakpoints.xl - 1}px)`,
-    xl: `(min-width: ${breakpoints.xl}px)`,
-};
+import defaultBreakpoints from "../constants/breakpoints.js";
 const useResponsiveClientValue = (value) => {
     const { defaultViewport } = React.useContext(SingletonEnvironmentContext);
     const [viewport, setViewport] = React.useState(defaultViewport);
     useIsomorphicLayoutEffect(() => {
+        const rootThemeEl = document.querySelector("[data-rs-theme]");
+        const rootStyle = rootThemeEl && window.getComputedStyle(rootThemeEl);
+        /**
+         * We generate variables for the viewport breakpoints in the themes
+         * We use them here in case they're custom and fallback to the default values
+         * in case there is no SSR passing the data-rs-theme attribute
+         */
+        const breakpoints = {
+            m: (rootStyle && Number(rootStyle.getPropertyValue("--rs-viewport-m-min"))) ||
+                defaultBreakpoints.m,
+            l: (rootStyle && Number(rootStyle.getPropertyValue("--rs-viewport-l-min"))) ||
+                defaultBreakpoints.l,
+            xl: (rootStyle && Number(rootStyle.getPropertyValue("--rs-viewport-xl-min"))) ||
+                defaultBreakpoints.xl,
+        };
+        const mediaQueries = {
+            s: `(max-width: ${breakpoints.m - 1}px)`,
+            m: `(min-width: ${breakpoints.m}px) and (max-width: ${breakpoints.l - 1}px)`,
+            l: `(min-width: ${breakpoints.l}px) and (max-width: ${breakpoints.xl - 1}px)`,
+            xl: `(min-width: ${breakpoints.xl}px)`,
+        };
         const viewports = Object.keys(mediaQueries);
         const matchers = viewports.map((viewport) => {
             const mq = window.matchMedia(mediaQueries[viewport]);

package/dist/hooks/useScrollLock.d.ts

@@ -1,4 +1,7 @@
-declare const useScrollLock: () => {
+import React from "react";
+declare const useScrollLock: (props?: {
+    containerRef?: React.RefObject<HTMLElement>;
+}) => {
     scrollLocked: boolean;
     lockScroll: () => void;
     unlockScroll: () => void;

package/dist/hooks/useScrollLock.js

@@ -1,45 +1,19 @@
 "use client";
 import React from "react";
-const getScrollbarWidth = (() => {
-    let scrollbarWidth;
-    return () => {
-        if (scrollbarWidth)
-            return scrollbarWidth;
-        const scrollDiv = document.createElement("div");
-        scrollDiv.style.position = "absolute";
-        scrollDiv.style.top = "-9999px";
-        scrollDiv.style.width = "50px";
-        scrollDiv.style.height = "50px";
-        scrollDiv.style.overflow = "scroll";
-        document.body.appendChild(scrollDiv);
-        scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
-        document.body.removeChild(scrollDiv);
-        return scrollbarWidth;
-    };
-})();
-const useScrollLock = () => {
+import { lockScroll, unlockScroll } from "../utilities/scroll/index.js";
+const useScrollLock = (props) => {
+    const { containerRef } = props || {};
     const [locked, setLocked] = React.useState(false);
-    const overflowStyleRef = React.useRef();
-    const isOverflowingRef = React.useRef(false);
-    const lockScroll = React.useCallback(() => {
-        const targetEl = document.body;
-        const rect = targetEl.getBoundingClientRect();
-        isOverflowingRef.current = rect.left + rect.right < window.innerWidth;
-        overflowStyleRef.current = targetEl.style.overflow;
-        targetEl.style.overflow = "hidden";
-        if (isOverflowingRef.current) {
-            const scrollBarWidth = getScrollbarWidth();
-            targetEl.style.paddingRight = `${scrollBarWidth}px`;
-        }
-        setLocked(true);
-    }, [setLocked, isOverflowingRef, overflowStyleRef]);
-    const unlockScroll = React.useCallback(() => {
-        const targetEl = document.body;
-        targetEl.style.overflow = overflowStyleRef.current || "";
-        if (isOverflowingRef.current)
-            targetEl.style.paddingRight = "";
-        setLocked(false);
-    }, [setLocked, isOverflowingRef, overflowStyleRef]);
-    return { scrollLocked: locked, lockScroll, unlockScroll };
+    const handleLockScroll = React.useCallback(() => {
+        lockScroll({ containerEl: containerRef?.current, cb: () => setLocked(true) });
+    }, [containerRef]);
+    const handleUnlockScroll = React.useCallback(() => {
+        unlockScroll(() => setLocked(false));
+    }, []);
+    return React.useMemo(() => ({
+        scrollLocked: locked,
+        lockScroll: handleLockScroll,
+        unlockScroll: handleUnlockScroll,
+    }), [locked, handleLockScroll, handleUnlockScroll]);
 };
 export default useScrollLock;

package/dist/index.d.ts

@@ -41,6 +41,8 @@ export { default as FileUpload } from "./components/FileUpload";
 export type { FileUploadProps } from "./components/FileUpload";
 export { default as FormControl } from "./components/FormControl";
 export type { FormControlProps } from "./components/FormControl";
+export { default as Grid } from "./components/Grid";
+export type { GridProps, GridItemProps } from "./components/Grid";
 export { default as Hidden } from "./components/Hidden";
 export type { HiddenProps } from "./components/Hidden";
 export { default as HiddenVisually } from "./components/HiddenVisually";

package/dist/index.js

@@ -21,6 +21,7 @@ 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 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 HiddenVisually } from "./components/HiddenVisually/index.js";
 export { default as Hotkey } from "./components/Hotkey/index.js";

package/dist/styles/align/align.module.css

@@ -0,0 +1 @@
+.--align-start{align-items:flex-start!important}.--align-end{align-items:flex-end!important}.--align-center{align-items:center!important}.--align-stretch{align-items:stretch!important}.--align-baseline{align-items:baseline!important}@media (--rs-viewport-m ){.--align-start--m{align-items:flex-start!important}.--align-end--m{align-items:flex-end!important}.--align-center--m{align-items:center!important}.--align-stretch--m{align-items:stretch!important}.--align-baseline--m{align-items:baseline!important}}@media (--rs-viewport-l ){.--align-start--l{align-items:flex-start!important}.--align-end--l{align-items:flex-end!important}.--align-center--l{align-items:center!important}.--align-stretch--l{align-items:stretch!important}.--align-baseline--l{align-items:baseline!important}}@media (--rs-viewport-xl ){.--align-start--xl{align-items:flex-start!important}.--align-end--xl{align-items:flex-end!important}.--align-center--xl{align-items:center!important}.--align-stretch--xl{align-items:stretch!important}.--align-baseline--xl{align-items:baseline!important}}

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

@@ -0,0 +1,3 @@
+import * as T from "../types";
+declare const getAlignStyles: T.StaticStyleUtility<T.Align>;
+export default getAlignStyles;

package/dist/styles/align/index.js

@@ -0,0 +1,10 @@
+import { responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./align.module.css";
+const getAlignStyles = (value) => {
+    if (!value)
+        return null;
+    return {
+        classNames: responsiveClassNames(s, "--align", value),
+    };
+};
+export default getAlignStyles;

package/dist/styles/justify/index.d.ts

@@ -0,0 +1,3 @@
+import * as T from "../types";
+declare const getJustifyStyles: T.StaticStyleUtility<T.Justify>;
+export default getJustifyStyles;

package/dist/styles/justify/index.js

@@ -0,0 +1,10 @@
+import { responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./justify.module.css";
+const getJustifyStyles = (value) => {
+    if (!value)
+        return null;
+    return {
+        classNames: responsiveClassNames(s, "--justify", value),
+    };
+};
+export default getJustifyStyles;

package/dist/styles/justify/justify.module.css

@@ -0,0 +1 @@
+.--justify-start{justify-content:flex-start}.--justify-end{justify-content:flex-end}.--justify-center{justify-content:center}.--justify-space-between{justify-content:space-between}@media (--rs-viewport-m ){.--justify-start--m{justify-content:flex-start}.--justify-end--m{justify-content:flex-end}.--justify-center--m{justify-content:center}.--justify-space-between--m{justify-content:space-between}}@media (--rs-viewport-l ){.--justify-start--l{justify-content:flex-start}.--justify-end--l{justify-content:flex-end}.--justify-center--l{justify-content:center}.--justify-space-between--l{justify-content:space-between}}@media (--rs-viewport-xl ){.--justify-start--xl{justify-content:flex-start}.--justify-end--xl{justify-content:flex-end}.--justify-center--xl{justify-content:center}.--justify-space-between--xl{justify-content:space-between}}

package/dist/styles/types.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import * as G from "../types/global";
 export type TextAlign = "start" | "center" | "end";
+export type Justify = "start" | "center" | "end" | "space-between";
+export type Align = "start" | "center" | "end" | "stretch" | "baseline";
 export type Radius = "small" | "medium" | "large" | "circular" | "none";
 export type Position = "relative" | "absolute" | "fixed" | "sticky" | "static";
 export type BorderColor = "neutral" | "neutral-faded" | "critical" | "critical-faded" | "warning" | "warning-faded" | "positive" | "positive-faded" | "primary" | "primary-faded" | "disabled" | "brand" | "transparent";

package/dist/themes/_generator/definitions/reshaped.js

@@ -1,3 +1,4 @@
+import breakpoints from "../../../constants/breakpoints.js";
 const theme = {
     fontFamily: {
         title: {
@@ -123,7 +124,7 @@ const theme = {
         borderPositiveFaded: { hex: "#d0f3e2", hexDark: "#293b2f" },
         foregroundPositive: { hex: "#0d7544", hexDark: "#18ab66" },
         backgroundNeutral: { hex: "#dfe2ea", hexDark: "#494f60" },
-        backgroundNeutralFaded: { hex: "#f1f2f6", hexDark: "#222835" },
+        backgroundNeutralFaded: { hex: "#f3f3f5", hexDark: "#222835" },
         borderNeutral: { hex: "#0000001f", hexDark: "#ffffff24" },
         borderNeutralFaded: { hex: "#0000001a", hexDark: "#ffffff17" },
         foregroundNeutral: { hex: "#14181f", hexDark: "#eff1f5" },
@@ -187,9 +188,9 @@ const theme = {
         ],
     },
     viewport: {
-        m: { minPx: 660 },
-        l: { minPx: 900 },
-        xl: { minPx: 1280 },
+        m: { minPx: breakpoints.m },
+        l: { minPx: breakpoints.l },
+        xl: { minPx: breakpoints.xl },
     },
 };
 export default theme;

package/dist/themes/_generator/tokens/viewport/viewport.transforms.js

@@ -4,7 +4,7 @@ const transformedToken = (name, token) => {
         value.push(`(min-width: ${token.minPx}px)`);
     if (token.maxPx)
         value.push(`(max-width: ${token.maxPx}px)`);
-    return [
+    const result = [
         {
             name,
             tokenType: "viewport",
@@ -12,5 +12,14 @@ const transformedToken = (name, token) => {
             value: value.join(" and "),
         },
     ];
+    if (token.minPx) {
+        result.push({
+            name: `${name}-min`,
+            tokenType: "viewport",
+            type: "variable",
+            value: token.minPx.toString(),
+        });
+    }
+    return result;
 };
 export default transformedToken;