reshaped 2.2.0 → 2.2.1

package/components/Actionable/Actionable.module.css

@@ -1 +1 @@
-.root{-webkit-tap-highlight-color:none;background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-align:initial;text-decoration:none;vertical-align:top}.root:focus{outline:none;z-index:var(--rs-z-index-raised)}[role=button].root,button.root{cursor:pointer}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.--full-width{width:100%}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-focus-inset-shadow)}[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-focus-inset-shadow)}
+.root{-webkit-tap-highlight-color:transparent;background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-align:initial;text-decoration:none;vertical-align:top}.root:focus{outline:none;z-index:var(--rs-z-index-raised)}[role=button].root,button.root{cursor:pointer}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.--full-width{width:100%}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-focus-inset-shadow)}[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-focus-inset-shadow)}

package/components/Checkbox/Checkbox.module.css

@@ -1 +1 @@
-.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-unit-x2);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:indeterminate+.decorator,.root.--error .input:indeterminate+.decorator,.root.--error:hover .input:indeterminate+.decorator,.root:hover .input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:indeterminate+.decorator:before,.root.--error .input:indeterminate+.decorator:before,.root.--error:hover .input:indeterminate+.decorator:before,.root:hover .input:indeterminate+.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--rs-unit-x2)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator,.root:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.input:checked+.decorator .icon,.root.--error .input:checked+.decorator .icon,.root.--error:hover .input:checked+.decorator .icon,.root:hover .input:checked+.decorator .icon{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .decorator,.root.--disabled:hover .input:checked+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator,.root.--disabled:hover .input:checked+.decorator,.root.--disabled:hover .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:indeterminate+.decorator:before{background:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
+.root{-webkit-tap-highlight-color:transparent;align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-unit-x2);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:indeterminate+.decorator,.root.--error .input:indeterminate+.decorator,.root.--error:hover .input:indeterminate+.decorator,.root:hover .input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:indeterminate+.decorator:before,.root.--error .input:indeterminate+.decorator:before,.root.--error:hover .input:indeterminate+.decorator:before,.root:hover .input:indeterminate+.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--rs-unit-x2)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator,.root:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.input:checked+.decorator .icon,.root.--error .input:checked+.decorator .icon,.root.--error:hover .input:checked+.decorator .icon,.root:hover .input:checked+.decorator .icon{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .decorator,.root.--disabled:hover .input:checked+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator,.root.--disabled:hover .input:checked+.decorator,.root.--disabled:hover .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:indeterminate+.decorator:before{background:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}

package/components/DropdownMenu/DropdownMenu.js

@@ -57,7 +57,7 @@ const DropdownMenuItem = (props) => {
         if (onClick)
             onClick(e);
     };
-    return (React.createElement(MenuItem, Object.assign({}, props, { roundedCorners: true, className: s.item, attributes: Object.assign(Object.assign({}, props.attributes), { role: "menuitem" }), onClick: handleClick })));
+    return (React.createElement(MenuItem, Object.assign({}, props, { roundedCorners: true, className: s.item, attributes: Object.assign({ role: "menuitem" }, props.attributes), onClick: handleClick })));
 };
 const DropdownMenuSubMenu = (props) => {
     const { children } = props;

package/components/Radio/Radio.module.css

@@ -1 +1 @@
-.root{align-items:center;cursor:pointer;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .input:not(:checked)+.decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:var(--rs-unit-x2);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);border-width:2px}.input:checked+.decorator:after,.root.--error .input:checked+.decorator:after,.root.--error:hover .input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.text{margin-inline-start:var(--rs-unit-x2)}.root.--error .decorator,.root.--error:hover .input+.decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .input+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .input:checked+.decorator{border-color:transparent}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
+.root{-webkit-tap-highlight-color:transparent;align-items:center;cursor:pointer;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .input:not(:checked)+.decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:var(--rs-unit-x2);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);border-width:2px}.input:checked+.decorator:after,.root.--error .input:checked+.decorator:after,.root.--error:hover .input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.text{margin-inline-start:var(--rs-unit-x2)}.root.--error .decorator,.root.--error:hover .input+.decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .input+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .input:checked+.decorator{border-color:transparent}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}

package/components/Select/Select.js

@@ -52,7 +52,7 @@ const Select = (props) => {
                 children || (placeholder ? React.createElement(Text, { color: "neutral-faded" }, placeholder) : null)),
             React.createElement("input", { type: "hidden", value: value, name: name }))),
         React.createElement("div", { className: s.arrow },
-            React.createElement(Icon, { svg: IconArrow, color: "neutral-faded", size: responsivePropDependency(size, (size) => {
+            React.createElement(Icon, { svg: IconArrow, color: disabled ? "disabled" : "neutral-faded", size: responsivePropDependency(size, (size) => {
                     return size === "large" || size === "xlarge" ? 5 : 4;
                 }) }))));
 };

package/components/Slider/Slider.module.css

@@ -1 +1 @@
-.root{align-items:center;cursor:pointer;display:flex;height:var(--rs-unit-x4)}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);left:50%;opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);transform:translate(-50%);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;-webkit-user-select:none;-moz-user-select:none;user-select:none}.thumb,.tooltip{position:absolute}.thumb{height:100%;width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-unit-x4)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x9);width:var(--rs-unit-x9)}.thumb:hover .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1)) scale(1.1)!important}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
+.root{align-items:center;cursor:pointer;display:flex;height:var(--rs-unit-x4);-webkit-user-select:none;-moz-user-select:none;user-select:none}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);left:50%;opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);transform:translate(-50%);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;-webkit-user-select:none;-moz-user-select:none;user-select:none}.thumb,.tooltip{position:absolute}.thumb{height:100%;width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-unit-x4)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x9);width:var(--rs-unit-x9)}.thumb:hover .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1)) scale(1.1)!important}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}

package/components/Switch/Switch.module.css

@@ -1 +1 @@
-.root{align-items:center;display:inline-flex;gap:var(--rs-unit-x2);position:relative;vertical-align:top}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(var(--rs-unit-x3))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x3) * -1))}[data-rs-keyboard] .input:focus+.area{box-shadow:var(--rs-focus-shadow)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;border-radius:calc(var(--rs-unit-x1) * 5 / 2);box-sizing:border-box;cursor:pointer;display:flex;height:calc(var(--rs-unit-x1) * 5);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:calc(var(--rs-unit-x1) * 8)}.thumb{background:var(--rs-color-white);border-radius:50%;box-shadow:var(--rs-shadow-raised);height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:var(--rs-unit-x4)}.root--size-small .area{height:calc(var(--rs-unit-x1) * 4);width:calc(var(--rs-unit-x1) * 6)}.root--size-small .thumb{height:var(--rs-unit-x3);width:var(--rs-unit-x3)}.root--size-small .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x2))}[dir=rtl] .root--size-small .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x2) * -1))}.root--reversed{flex-direction:row-reverse}
+.root{-webkit-tap-highlight-color:transparent;align-items:center;display:inline-flex;gap:var(--rs-unit-x2);position:relative;vertical-align:top}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(var(--rs-unit-x3))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x3) * -1))}[data-rs-keyboard] .input:focus+.area{box-shadow:var(--rs-focus-shadow)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;border-radius:calc(var(--rs-unit-x1) * 5 / 2);box-sizing:border-box;cursor:pointer;display:flex;height:calc(var(--rs-unit-x1) * 5);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:calc(var(--rs-unit-x1) * 8)}.thumb{background:var(--rs-color-white);border-radius:50%;box-shadow:var(--rs-shadow-raised);height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:var(--rs-unit-x4)}.root--size-small .area{height:calc(var(--rs-unit-x1) * 4);width:calc(var(--rs-unit-x1) * 6)}.root--size-small .thumb{height:var(--rs-unit-x3);width:var(--rs-unit-x3)}.root--size-small .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x2))}[dir=rtl] .root--size-small .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x2) * -1))}.root--reversed{flex-direction:row-reverse}

package/components/_private/Flyout/Flyout.types.d.ts

@@ -73,5 +73,7 @@ export type ContextProps = {
     handleClick: () => void;
     handleBlur: (e: React.FocusEvent) => void;
     handleFocus: () => void;
+    handleContentMouseDown: () => void;
+    handleContentMouseUp: () => void;
 } & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "trapFocusMode" | "contentGap">;
 export {};

package/components/_private/Flyout/FlyoutContent.js

@@ -7,7 +7,7 @@ import { useFlyoutContext } from "./Flyout.context.js";
 import s from "./Flyout.module.css";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
-    const { flyout, id, flyoutElRef, handleTransitionEnd, triggerType, handleMouseEnter, handleMouseLeave, contentGap, contentClassName, contentAttributes, trapFocusMode, } = useFlyoutContext();
+    const { flyout, id, flyoutElRef, handleTransitionEnd, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, } = useFlyoutContext();
     const { styles, status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     useIsomorphicLayoutEffect(() => {
@@ -33,7 +33,9 @@ const FlyoutContent = (props) => {
     else if (trapFocusMode === "action-menu") {
         role = "menu";
     }
-    const content = (React.createElement("div", { className: contentClassNames, style: Object.assign(Object.assign({}, styles), { "--rs-flyout-gap": contentGap }), ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined },
+    const content = (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("div", { className: contentClassNames, style: Object.assign(Object.assign({}, styles), { "--rs-flyout-gap": contentGap }), ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp },
         React.createElement("div", Object.assign({ role: role }, attributes, { id: id, "aria-modal": triggerType === "click", style: contentAttributes === null || contentAttributes === void 0 ? void 0 : contentAttributes.style, className: innerClassNames }), children)));
     return React.createElement(Portal, null, content);
 };

package/components/_private/Flyout/FlyoutControlled.js

@@ -21,6 +21,7 @@ const FlyoutRoot = (props) => {
     const timerRef = React.useRef();
     const releaseFocusRef = React.useRef(null);
     const lockedRef = React.useRef(false);
+    const lockedBlurEffects = React.useRef(false);
     const shouldReturnFocusRef = React.useRef(true);
     const flyout = useFlyout(triggerElRef, flyoutElRef, {
         width,
@@ -70,7 +71,9 @@ const FlyoutRoot = (props) => {
         // Empty flyouts don't move the focus so they have to be closed on blur
         focusedContent ||
             // Content menu keeps the focus on the original trigger so moving the focus away from it shouldn't close it
-            (triggerType === "hover" && trapFocusMode === "content-menu")) {
+            (triggerType === "hover" && trapFocusMode === "content-menu") ||
+            // Prevent from closing in case user interacts with items inside content
+            lockedBlurEffects.current) {
             return;
         }
         handleClose();
@@ -94,6 +97,8 @@ const FlyoutRoot = (props) => {
             handleClose();
         }
     }, [status, handleOpen, handleClose]);
+    const handleContentMouseDown = () => (lockedBlurEffects.current = true);
+    const handleContentMouseUp = () => (lockedBlurEffects.current = false);
     /**
      * Control the display based on the props
      */
@@ -204,6 +209,8 @@ const FlyoutRoot = (props) => {
             handleMouseLeave,
             handleTransitionEnd,
             handleClick: handleTriggerClick,
+            handleContentMouseDown,
+            handleContentMouseUp,
             triggerType,
             trapFocusMode,
             contentGap,

package/config/next.d.ts

@@ -1,5 +1,4 @@
-export declare const config: {
-    modularizeImports: {
-        reshaped: string[][];
-    };
-};
+/**
+ * TODO: Work in progress
+ * Needs named exports support before we can use it
+ */

package/config/next.js

@@ -1,8 +1,22 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.config = void 0;
-exports.config = {
-    modularizeImports: {
-        reshaped: [[""]],
-    },
-};
+/**
+ * TODO: Work in progress
+ * Needs named exports support before we can use it
+ */
+// export const config = {
+// 	modularizeImports: {
+// 		reshaped: {
+// 			transform: {
+// 				// Utilities
+// 				// classNames: "reshaped/utilities/classNames",
+// 				// Hooks
+// 				useToast: "reshaped/components/Toast",
+// 				useFormControl: "reshaped/components/FormControl",
+// 				useTheme: "reshaped/components/Theme",
+// 				"use.*": "reshaped/hooks/{{ member }}",
+// 				// Components
+// 				"*": "reshaped/components/{{ member }}",
+// 			},
+// 		},
+// 	},
+// };

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": "2.2.0",
+	"version": "2.2.1",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -65,8 +65,8 @@
 		"release:lib": "yarn build && yarn publish",
 		"release:beta": "yarn build && yarn publish --tag beta",
 		"release:test": "yarn build && yarn pack --filename reshaped-test.tgz",
-		"release:source": "git archive -o reshaped-source-v$(jq -r .version package.json).zip HEAD . ':!.chromatic'",
-		"release:copy": "sh ./bin/copy-release.sh",
+		"release:source": "sh ./bin/release-source.sh",
+		"release:copy": "sh ./bin/release-copy.sh",
 		"chromatic": "chromatic -b build:chromatic --project-token=$(cat .chromatic)",
 		"test:vrt": "yarn chromatic",
 		"test:unit": "jest --config tools/jest/jest.config.js",
@@ -80,9 +80,9 @@
 	],
 	"devDependencies": {
 		"@size-limit/preset-big-lib": "8.2.6",
-		"@storybook/addon-a11y": "7.1.1",
-		"@storybook/react": "7.1.1",
-		"@storybook/react-vite": "7.1.1",
+		"@storybook/addon-a11y": "7.2.1",
+		"@storybook/react": "7.2.1",
+		"@storybook/react-vite": "7.2.1",
 		"@testing-library/jest-dom": "5.17.0",
 		"@testing-library/react": "14.0.0",
 		"@testing-library/user-event": "14.4.3",
@@ -97,7 +97,7 @@
 		"chromatic": "6.20.0",
 		"eslint": "8.46.0",
 		"eslint-config-airbnb-typescript": "17.1.0",
-		"eslint-config-prettier": "8.10.0",
+		"eslint-config-prettier": "9.0.0",
 		"eslint-plugin-import": "2.28.0",
 		"eslint-plugin-jsx-a11y": "6.7.1",
 		"eslint-plugin-prettier": "5.0.0",
@@ -118,7 +118,7 @@
 		"react-dom": "18.2.0",
 		"resolve-tspaths": "0.8.14",
 		"size-limit": "8.2.6",
-		"storybook": "7.1.1",
+		"storybook": "7.2.1",
 		"stylelint": "15.10.2",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "34.0.0",

package/cli/theming/definitions/minimal.d.ts

@@ -1,3 +0,0 @@
-import { UserThemeDefinition } from "../tokens/types";
-declare const theme: UserThemeDefinition;
-export default theme;

package/cli/theming/definitions/minimal.js

@@ -1,80 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const reshaped_1 = __importDefault(require("./reshaped"));
-const theme = Object.assign(Object.assign({}, reshaped_1.default), { color: Object.assign(Object.assign({}, reshaped_1.default.color), { foregroundNeutral: {
-            hex: "#161a26",
-            hexDark: "#f2f3f5",
-        }, foregroundNeutralFaded: {
-            hex: "#717787",
-            hexDark: "#9f9e9e",
-        }, foregroundPrimary: {
-            hex: "#2383e2",
-            hexDark: "#5098ff",
-        }, foregroundDisabled: {
-            hex: "#d4d0d0",
-            hexDark: "#656565",
-        }, backgroundPrimary: {
-            hex: "#2383e2",
-            hexDark: "#4281DB",
-        }, backgroundPrimaryFaded: {
-            hex: "#e5f4fb",
-            hexDark: "#1e2c45",
-        }, backgroundPrimaryHighlighted: {
-            hex: "#3273CC",
-            hexDark: "#3273CC",
-        }, backgroundElevationBase: {
-            hex: "#ffffff",
-            hexDark: "#232323",
-        }, backgroundElevationRaised: {
-            hex: "#ffffff",
-            hexDark: "#262626",
-        }, backgroundElevationOverlay: {
-            hex: "#ffffff",
-            hexDark: "#292929",
-        }, backgroundNeutral: {
-            hex: "#e3e3e5",
-            hexDark: "#4f5155",
-        }, backgroundNeutralFaded: {
-            hex: "#f2f3f5",
-            hexDark: "#34363f",
-        }, backgroundNeutralHighlighted: {
-            hex: "#dedee1",
-            hexDark: "#595c60",
-        }, backgroundPage: {
-            hex: "#ffffff",
-            hexDark: "#191919",
-        }, backgroundPageFaded: {
-            hex: "#F7F7F5",
-            hexDark: "#202020",
-        }, backgroundDisabled: {
-            hex: "#ECEEF3",
-            hexDark: "#313131",
-        }, backgroundDisabledFaded: {
-            hex: "#F4F5F7",
-            hexDark: "#262626",
-        }, borderPrimary: {
-            hex: "#3D76C7",
-            hexDark: "#5A91E0",
-        }, borderPrimaryFaded: {
-            hex: "#c6d9f4",
-            hexDark: "#163a6a",
-        }, borderNeutral: {
-            hex: "#d2d2d2",
-            hexDark: "#414141",
-        }, borderNeutralFaded: {
-            hex: "#E2E2E2",
-            hexDark: "#464646",
-        }, borderDisabled: {
-            hex: "#E2E2E2",
-            hexDark: "#404040",
-        } }), unit: Object.assign(Object.assign({}, reshaped_1.default.unit), { radiusSmall: {
-            px: 2,
-        }, radiusMedium: {
-            px: 4,
-        }, radiusLarge: {
-            px: 6,
-        } }) });
-exports.default = theme;

package/styles/aspectRatio/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/styles/aspectRatio/index.test.js

@@ -1,24 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import getAspectRatioStyles from "./index.js";
-describe("Styles/AspectRatio", () => {
-    test("handles positive value", () => {
-        expect(getAspectRatioStyles(1 / 2)).toMatchSnapshot();
-    });
-    test("handles 0 value", () => {
-        expect(getAspectRatioStyles(0)).toMatchSnapshot();
-    });
-    test("handles undefined value", () => {
-        expect(getAspectRatioStyles()).toMatchSnapshot();
-    });
-    test("handles responsive value", () => __awaiter(void 0, void 0, void 0, function* () {
-        expect(getAspectRatioStyles({ s: 4, m: 0, l: 2 })).toMatchSnapshot();
-    }));
-});

package/styles/bleed/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/styles/bleed/index.test.js

@@ -1,24 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import getBleedStyles from "./index.js";
-describe("Styles/Bleed", () => {
-    test("handles positive value", () => {
-        expect(getBleedStyles(4)).toMatchSnapshot();
-    });
-    test("handles 0 value", () => {
-        expect(getBleedStyles(0)).toMatchSnapshot();
-    });
-    test("handles undefined value", () => {
-        expect(getBleedStyles()).toMatchSnapshot();
-    });
-    test("handles responsive value", () => __awaiter(void 0, void 0, void 0, function* () {
-        expect(getBleedStyles({ s: 4, m: 0, l: 2 })).toMatchSnapshot();
-    }));
-});

package/styles/height/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/styles/height/index.test.js

@@ -1,27 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import getHeightStyles from "./index.js";
-describe("Styles/Height", () => {
-    test("handles px value", () => {
-        expect(getHeightStyles("50px")).toMatchSnapshot();
-    });
-    test("handles % value", () => {
-        expect(getHeightStyles("50%")).toMatchSnapshot();
-    });
-    test("handles unit value", () => {
-        expect(getHeightStyles(5)).toMatchSnapshot();
-    });
-    test("handles undefined value", () => {
-        expect(getHeightStyles()).toMatchSnapshot();
-    });
-    test("handles responsive value", () => __awaiter(void 0, void 0, void 0, function* () {
-        expect(getHeightStyles({ s: "50px", l: "50%" })).toMatchSnapshot();
-    }));
-});

package/styles/inset/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/styles/inset/index.test.js

@@ -1,27 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import getInsetStyles from "./index.js";
-describe("Styles/Inset", () => {
-    test("handles positive value", () => {
-        expect(getInsetStyles(4)).toMatchSnapshot();
-    });
-    test("handles 0 value", () => {
-        expect(getInsetStyles(0)).toMatchSnapshot();
-    });
-    test("handles undefined value", () => {
-        expect(getInsetStyles()).toMatchSnapshot();
-    });
-    test("handles responsive value", () => __awaiter(void 0, void 0, void 0, function* () {
-        expect(getInsetStyles({ s: 4, m: 0, l: 2 })).toMatchSnapshot();
-    }));
-    test("handles value width defined side", () => {
-        expect(getInsetStyles(4, "start")).toMatchSnapshot();
-    });
-});

package/styles/maxHeight/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/styles/maxHeight/index.test.js

@@ -1,27 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import getMaxHeightStyles from "./index.js";
-describe("Styles/MaxHeight", () => {
-    test("handles px value", () => {
-        expect(getMaxHeightStyles("50px")).toMatchSnapshot();
-    });
-    test("handles % value", () => {
-        expect(getMaxHeightStyles("50%")).toMatchSnapshot();
-    });
-    test("handles unit value", () => {
-        expect(getMaxHeightStyles(5)).toMatchSnapshot();
-    });
-    test("handles undefined value", () => {
-        expect(getMaxHeightStyles()).toMatchSnapshot();
-    });
-    test("handles responsive value", () => __awaiter(void 0, void 0, void 0, function* () {
-        expect(getMaxHeightStyles({ s: "50px", l: "50%" })).toMatchSnapshot();
-    }));
-});

package/styles/maxWidth/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/styles/maxWidth/index.test.js

@@ -1,27 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import getMaxWidthStyles from "./index.js";
-describe("Styles/MaxWidth", () => {
-    test("handles px value", () => {
-        expect(getMaxWidthStyles("50px")).toMatchSnapshot();
-    });
-    test("handles % value", () => {
-        expect(getMaxWidthStyles("50%")).toMatchSnapshot();
-    });
-    test("handles unit value", () => {
-        expect(getMaxWidthStyles(5)).toMatchSnapshot();
-    });
-    test("handles undefined value", () => {
-        expect(getMaxWidthStyles()).toMatchSnapshot();
-    });
-    test("handles responsive value", () => __awaiter(void 0, void 0, void 0, function* () {
-        expect(getMaxWidthStyles({ s: "50px", l: "50%" })).toMatchSnapshot();
-    }));
-});

package/styles/padding/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/styles/padding/index.test.js

@@ -1,24 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import getPaddingStyles from "./index.js";
-describe("Styles/Padding", () => {
-    test("handles positive value", () => {
-        expect(getPaddingStyles(4)).toMatchSnapshot();
-    });
-    test("handles 0 value", () => {
-        expect(getPaddingStyles(0)).toMatchSnapshot();
-    });
-    test("handles undefined value", () => {
-        expect(getPaddingStyles()).toMatchSnapshot();
-    });
-    test("handles responsive value", () => __awaiter(void 0, void 0, void 0, function* () {
-        expect(getPaddingStyles({ s: 4, m: 0, l: 2 })).toMatchSnapshot();
-    }));
-});

package/styles/position/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/styles/position/index.test.js

@@ -1,21 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import getPositionStyles from "./index.js";
-describe("Styles/Position", () => {
-    test("handles value", () => {
-        expect(getPositionStyles("absolute")).toMatchSnapshot();
-    });
-    test("handles undefined value", () => {
-        expect(getPositionStyles()).toMatchSnapshot();
-    });
-    test("handles responsive value", () => __awaiter(void 0, void 0, void 0, function* () {
-        expect(getPositionStyles({ s: "absolute", l: "fixed" })).toMatchSnapshot();
-    }));
-});

package/styles/radius/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/styles/radius/index.test.js

@@ -1,24 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import getRadiusStyles from "./index.js";
-describe("Styles/Radius", () => {
-    test("handles value", () => {
-        expect(getRadiusStyles("large")).toMatchSnapshot();
-    });
-    test("handles none", () => {
-        expect(getRadiusStyles("none")).toMatchSnapshot();
-    });
-    test("handles undefined value", () => {
-        expect(getRadiusStyles()).toMatchSnapshot();
-    });
-    test("handles responsive value", () => __awaiter(void 0, void 0, void 0, function* () {
-        expect(getRadiusStyles({ s: "small", m: "none", l: "circular" })).toMatchSnapshot();
-    }));
-});

package/styles/width/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/styles/width/index.test.js

@@ -1,27 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import getWidthStyles from "./index.js";
-describe("Styles/Width", () => {
-    test("handles px value", () => {
-        expect(getWidthStyles("50px")).toMatchSnapshot();
-    });
-    test("handles % value", () => {
-        expect(getWidthStyles("50%")).toMatchSnapshot();
-    });
-    test("handles unit value", () => {
-        expect(getWidthStyles(5)).toMatchSnapshot();
-    });
-    test("handles undefined value", () => {
-        expect(getWidthStyles()).toMatchSnapshot();
-    });
-    test("handles responsive value", () => __awaiter(void 0, void 0, void 0, function* () {
-        expect(getWidthStyles({ s: "50px", l: "50%" })).toMatchSnapshot();
-    }));
-});