reshaped 4.0.2 → 4.1.0-canary.0

package/dist/components/Button/Button.module.css

@@ -1 +1 @@
-.root{--rs-p-v:var(--rs-button-p-v);--rs-p-h:var(--rs-button-p-h);align-items:center;border-radius:var(--rs-button-radius);cursor:pointer;display:inline-flex;justify-content:center;padding:var(--rs-unit-x1) var(--rs-p-h);position:relative;text-align:initial;text-decoration:none;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform,opacity;user-select:none;z-index:0;-webkit-tap-highlight-color:transparent;background-color:var(--rs-button-background-color);box-sizing:border-box;color:var(--rs-button-color);font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);isolation:isolate;letter-spacing:var(--rs-button-letter-spacing);line-height:var(--rs-button-line-height);min-height:calc(var(--rs-button-line-height) + var(--rs-p-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-p-h) * 2))}.root:active{transform:scale(.985) translateZ(0)}.root.--highlighted{z-index:var(--rs-z-index-relative)}.root.--highlighted .highlight,.root.--highlighted:not(:has(.highlight)){background-color:var(--rs-button-highlight-color)}@media (hover:hover) and (pointer:fine){.root:hover:not(.--loading) .highlight,.root:hover:not(:has(.highlight),.--loading){background-color:var(--rs-button-highlight-color)}}.text{align-items:center;display:flex;gap:var(--rs-button-gap)}.text>:is(:first-child):not(.label,:only-child){margin-inline-start:calc(var(--rs-button-icon-align) * -1)}.text:not(:only-child)>:is(:last-child):not(.label,:only-child){margin-inline-end:calc(var(--rs-button-icon-align) * -1)}.icon{margin-inline-end:var(--rs-button-gap);margin-inline-start:calc(var(--rs-button-icon-align) * -1)}.icon.--icon-position-end{margin-inline-end:calc(var(--rs-button-icon-align) * -1);margin-inline-start:var(--rs-button-gap)}.--icon-only .icon{margin:0}.icon,.text{position:relative;z-index:var(--rs-z-index-relative)}.loader{align-items:center;display:none;justify-content:center;z-index:var(--rs-z-index-relative)}.highlight,.loader{inset:0;position:absolute}.highlight{background-color:transparent;border-radius:inherit;pointer-events:none;transform:translateZ(0);transition:var(--rs-duration-fast) var(--rs-easing-standard)}.root.--icon-only{--rs-p-h:calc(var(--rs-button-p-h) - var(--rs-unit-x1) / 2)}.root.--loading{cursor:default}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.root.--rounded,.root.--rounded:before{border-radius:var(--rs-radius-circular)}.--size-small{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1-5);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-small)}.--size-medium{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width{text-align:center;width:100%}.root.--variant-solid{--rs-button-border-width:0px}.root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-background-color:var(--rs-color-background-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted);--rs-button-color:var(--rs-color-on-background-neutral)}.root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary);--rs-button-background-color:var(--rs-color-background-primary);--rs-button-highlight-color:var(--rs-color-background-primary-highlighted);--rs-button-color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical);--rs-button-background-color:var(--rs-color-background-critical);--rs-button-highlight-color:var(--rs-color-background-critical-highlighted);--rs-button-color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive);--rs-button-background-color:var(--rs-color-background-positive);--rs-button-highlight-color:var(--rs-color-background-positive-highlighted);--rs-button-color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-media{--rs-button-group-separator-color:rgb(from var(--rs-color-black) r g b/12%);--rs-button-color:var(--rs-color-black);--rs-button-background-color:var(--rs-color-white);--rs-button-highlight-color:rgb(from var(--rs-color-white) r g b/88%)}.root.--variant-outline{--rs-button-border-width:1px}.root.--variant-outline:before{border:var(--rs-button-border-width) solid var(--rs-color-border-neutral);border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute;z-index:calc(var(--rs-z-index-relative) - 1)}.root.--variant-outline:after{box-shadow:var(--rs-shadow-outline)}.root.--variant-outline.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-neutral);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-primary);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-critical);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-positive);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-inherit{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:currentcolor;--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-ghost{--rs-button-border-width:0px;transition-duration:var(--rs-duration-rapid)}.root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-neutral);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-primary);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-primary-highlighted-faded)}.root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-critical);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-critical-highlighted-faded)}.root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-positive);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-positive-highlighted-faded)}.root.--variant-ghost.--color-inherit{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-ghost.--color-inherit .highlight{opacity:.08}.root.--variant-ghost.--color-media{--rs-button-group-separator-color:rgb(from var(--rs-color-white) r g b/12%);--rs-button-color:var(--rs-color-white);--rs-button-background-color:rgb(from var(--rs-color-black) r g b/28%);--rs-button-highlight-color:rgb(from var(--rs-color-black) r g b/12%)}.root.--raised:after,.root.--variant-outline:after{border-radius:inherit;content:"";inset:var(--rs-button-border-width);pointer-events:none;position:absolute;z-index:var(--rs-z-index-relative)}.root.--raised:after{box-shadow:var(--rs-shadow-raised-intense)}.root.--raised.--variant-outline:after,.root.--raised.--variant-solid.--color-neutral:after{box-shadow:var(--rs-shadow-raised)}.root.--raised.--variant-outline{background-color:var(--rs-color-background-elevation-raised)}.root.--disabled:not(.--color-media),.root.--disabled:not(.--color-media).--highlighted,.root.--disabled:not(.--color-media):active:not(.--loading),.root.--disabled:not(.--color-media):hover:not(.--loading){background-color:var(--rs-color-background-disabled)!important;color:var(--rs-color-foreground-disabled)!important}.root.--disabled:not(.--color-media) .highlight,.root.--disabled:not(.--color-media).--highlighted .highlight,.root.--disabled:not(.--color-media):active:not(.--loading) .highlight,.root.--disabled:not(.--color-media):hover:not(.--loading) .highlight{opacity:0!important}.root.--disabled:not(.--color-media).--highlighted.--variant-outline,.root.--disabled:not(.--color-media).--variant-outline,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-outline,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-outline{background-color:transparent!important}.root.--disabled:not(.--color-media).--highlighted.--variant-outline:before,.root.--disabled:not(.--color-media).--variant-outline:before,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-outline:before,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-outline:before{border-color:var(--rs-color-border-disabled)!important}.root.--disabled:not(.--color-media).--highlighted.--variant-outline:after,.root.--disabled:not(.--color-media).--variant-outline:after,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-outline:after,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-outline:after{content:none!important}.root.--disabled:not(.--color-media).--highlighted.--variant-ghost,.root.--disabled:not(.--color-media).--variant-ghost,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-ghost,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-ghost{background-color:transparent!important}.root.--color-media.--disabled,.root.--color-media.--disabled.--highlighted,.root.--color-media.--disabled:active,.root.--color-media.--disabled:hover{background-color:var(--rs-button-background-color)!important;opacity:.6!important}.group{display:inline-flex;position:relative}.group:has(.--full-width){display:flex}.group:has(.--variant-outline):after,.group:has(.--variant-outline):before{border-radius:var(--rs-radius-medium)}.group:has(.--variant-outline):has(.--size-small){border-radius:var(--rs-radius-small)}.group:has(.--variant-outline):before{border:1px solid var(--rs-color-border-neutral);border-radius:6px;content:"";inset:0;pointer-events:none;position:absolute;z-index:var(--rs-z-index-relative)}.group:has(.--variant-outline):after{border-radius:inherit;content:"";inset:1px;pointer-events:none;position:absolute;z-index:var(--rs-z-index-relative)}.group .root{flex-shrink:0;width:auto}.group .root:active{transform:scale(1) translateZ(0)}.group .root,.group .root .highlight{border-radius:0}.group .root:first-child,.group .root:first-child .highlight{border-end-start-radius:var(--rs-button-radius);border-start-start-radius:var(--rs-button-radius)}.group .root:last-child,.group .root:last-child .highlight{border-end-end-radius:var(--rs-button-radius);border-start-end-radius:var(--rs-button-radius)}.group .root:before{border:none;border-radius:0;inset-inline-end:auto;transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.group .root:after{content:none}.group .root:not(:first-child):before{background-color:var(--rs-button-group-separator-color);border-radius:var(--rs-radius-circular);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:-.5px;position:absolute;width:1px}.group .root.--variant-outline{background:transparent}.group .root.--full-width{flex-grow:1}.aligner{line-height:0}@media (--rs-viewport-m ){.--size-small--m{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1-5);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-small)}.--size-medium--m{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large--m{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--m{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (--rs-viewport-l ){.--size-small--l{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1-5);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-small)}.--size-medium--l{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large--l{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--l{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1-5);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-small)}.--size-medium--xl{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large--xl{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--xl{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}
+.root{--rs-p-v:var(--rs-button-p-v);--rs-p-h:var(--rs-button-p-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform,opacity;padding:var(--rs-unit-x1) var(--rs-p-h);border-radius:var(--rs-button-radius);cursor:pointer;position:relative;z-index:0;text-align:initial;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);font-size:var(--rs-button-font-size);line-height:var(--rs-button-line-height);letter-spacing:var(--rs-button-letter-spacing);box-sizing:border-box;min-height:calc(var(--rs-button-line-height) + var(--rs-p-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-p-h) * 2));background-color:var(--rs-button-background-color);color:var(--rs-button-color);isolation:isolate}.root:active{transform:scale(.985) translateZ(0)}.root.--highlighted{z-index:var(--rs-z-index-relative)}.root.--highlighted .highlight,.root.--highlighted:not(:has(.highlight)){background-color:var(--rs-button-highlight-color)}@media (hover:hover) and (pointer:fine){.root:hover:not(.--loading) .highlight,.root:hover:not(:has(.highlight),.--loading){background-color:var(--rs-button-highlight-color)}}.text{display:flex;align-items:center;gap:var(--rs-button-gap)}.text>:is(:first-child):not(.label,:only-child){margin-inline-start:calc(var(--rs-button-icon-align) * -1)}.text:not(:only-child)>:is(:last-child):not(.label,:only-child){margin-inline-end:calc(var(--rs-button-icon-align) * -1)}.icon{margin-inline-end:var(--rs-button-gap);margin-inline-start:calc(var(--rs-button-icon-align) * -1)}.icon.--icon-position-end{margin-inline-end:calc(var(--rs-button-icon-align) * -1);margin-inline-start:var(--rs-button-gap)}.--icon-only .icon{margin:0}.icon,.text{position:relative;z-index:var(--rs-z-index-relative)}.loader{display:none;align-items:center;justify-content:center;z-index:var(--rs-z-index-relative)}.highlight,.loader{position:absolute;inset:0}.highlight{pointer-events:none;border-radius:inherit;background-color:transparent;transition:var(--rs-duration-fast) var(--rs-easing-standard);transform:translateZ(0)}.root.--icon-only{--rs-p-h:calc(var(--rs-button-p-h) - var(--rs-unit-x1) / 2)}.root.--loading{cursor:default}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.root.--rounded,.root.--rounded:before{border-radius:var(--rs-radius-circular)}.--size-small{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1-5);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-small)}.--size-medium{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width{width:100%;text-align:center}.root.--variant-solid{--rs-button-border-width:0px}.root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-background-color:var(--rs-color-background-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted);--rs-button-color:var(--rs-color-on-background-neutral)}.root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary);--rs-button-background-color:var(--rs-color-background-primary);--rs-button-highlight-color:var(--rs-color-background-primary-highlighted);--rs-button-color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical);--rs-button-background-color:var(--rs-color-background-critical);--rs-button-highlight-color:var(--rs-color-background-critical-highlighted);--rs-button-color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive);--rs-button-background-color:var(--rs-color-background-positive);--rs-button-highlight-color:var(--rs-color-background-positive-highlighted);--rs-button-color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-media{--rs-button-group-separator-color:rgb(from var(--rs-color-black) r g b/12%);--rs-button-color:var(--rs-color-black);--rs-button-background-color:var(--rs-color-white);--rs-button-highlight-color:rgb(from var(--rs-color-white) r g b/88%)}.root.--variant-outline{--rs-button-border-width:1px}.root.--variant-outline:before{content:"";position:absolute;pointer-events:none;border-radius:inherit;z-index:calc(var(--rs-z-index-relative) - 1);inset:0;border:var(--rs-button-border-width) solid var(--rs-color-border-neutral)}.root.--variant-outline:after{box-shadow:var(--rs-shadow-outline)}.root.--variant-outline.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-neutral);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-primary);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-critical);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-positive);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-inherit{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:currentcolor;--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-ghost{--rs-button-border-width:0px;transition-duration:var(--rs-duration-rapid)}.root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-neutral);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-primary);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-primary-highlighted-faded)}.root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-critical);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-critical-highlighted-faded)}.root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-positive);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-positive-highlighted-faded)}.root.--variant-ghost.--color-inherit{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-ghost.--color-inherit .highlight{opacity:.08}.root.--variant-ghost.--color-media{--rs-button-group-separator-color:rgb(from var(--rs-color-white) r g b/12%);--rs-button-color:var(--rs-color-white);--rs-button-background-color:rgb(from var(--rs-color-black) r g b/28%);--rs-button-highlight-color:rgb(from var(--rs-color-black) r g b/12%)}.root.--raised:after,.root.--variant-outline:after{content:"";position:absolute;inset:var(--rs-button-border-width);pointer-events:none;border-radius:inherit;z-index:var(--rs-z-index-relative)}.root.--raised:after{box-shadow:var(--rs-shadow-raised-intense)}.root.--raised.--variant-outline:after,.root.--raised.--variant-solid.--color-neutral:after{box-shadow:var(--rs-shadow-raised)}.root.--raised.--variant-outline{background-color:var(--rs-color-background-elevation-raised)}.root.--disabled:not(.--color-media),.root.--disabled:not(.--color-media).--highlighted,.root.--disabled:not(.--color-media):active:not(.--loading),.root.--disabled:not(.--color-media):hover:not(.--loading){color:var(--rs-color-foreground-disabled)!important;background-color:var(--rs-color-background-disabled)!important}.root.--disabled:not(.--color-media) .highlight,.root.--disabled:not(.--color-media).--highlighted .highlight,.root.--disabled:not(.--color-media):active:not(.--loading) .highlight,.root.--disabled:not(.--color-media):hover:not(.--loading) .highlight{opacity:0!important}.root.--disabled:not(.--color-media).--highlighted.--variant-outline,.root.--disabled:not(.--color-media).--variant-outline,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-outline,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-outline{background-color:transparent!important}.root.--disabled:not(.--color-media).--highlighted.--variant-outline:before,.root.--disabled:not(.--color-media).--variant-outline:before,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-outline:before,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-outline:before{border-color:var(--rs-color-border-disabled)!important}.root.--disabled:not(.--color-media).--highlighted.--variant-outline:after,.root.--disabled:not(.--color-media).--variant-outline:after,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-outline:after,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-outline:after{content:none!important}.root.--disabled:not(.--color-media).--highlighted.--variant-ghost,.root.--disabled:not(.--color-media).--variant-ghost,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-ghost,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-ghost{background-color:transparent!important}.root.--color-media.--disabled,.root.--color-media.--disabled.--highlighted,.root.--color-media.--disabled:active,.root.--color-media.--disabled:hover{opacity:.6!important;background-color:var(--rs-button-background-color)!important}.group{display:inline-flex;position:relative}.group:has(.--full-width){display:flex}.group:has(.--variant-outline):after,.group:has(.--variant-outline):before{border-radius:var(--rs-radius-medium)}.group:has(.--variant-outline):has(.--size-small){border-radius:var(--rs-radius-small)}.group:has(.--variant-outline):before{content:"";position:absolute;pointer-events:none;z-index:calc(var(--rs-z-index-relative) + 1);inset:0;border:1px solid var(--rs-color-border-neutral);border-radius:6px}.group:has(.--variant-outline):after{content:"";position:absolute;inset:1px;pointer-events:none;border-radius:inherit;z-index:calc(var(--rs-z-index-relative) + 1)}.group .root{flex-shrink:0;width:auto}.group .root:active{transform:scale(1) translateZ(0)}.group .root,.group .root .highlight{border-radius:0}.group .root:first-child,.group .root:first-child .highlight{border-start-start-radius:var(--rs-button-radius);border-end-start-radius:var(--rs-button-radius)}.group .root:last-child,.group .root:last-child .highlight{border-start-end-radius:var(--rs-button-radius);border-end-end-radius:var(--rs-button-radius)}.group .root:before{border:none;inset-inline-end:auto;border-radius:0;transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.group .root:after{content:none}.group .root:not(:first-child):before{content:"";position:absolute;width:1px;inset-block:var(--rs-unit-x1);inset-inline-start:-.5px;border-radius:var(--rs-radius-circular);background-color:var(--rs-button-group-separator-color)}.group .root.--variant-outline{background:transparent}.group .root.--full-width{flex-grow:1}.aligner{line-height:0}@media (--rs-viewport-m ){.--size-small--m{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1-5);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-small)}.--size-medium--m{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large--m{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--m{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--m{width:100%;text-align:center}.--full-width-false--m{width:auto;text-align:initial}}@media (--rs-viewport-l ){.--size-small--l{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1-5);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-small)}.--size-medium--l{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large--l{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--l{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--l{width:100%;text-align:center}.--full-width-false--l{width:auto;text-align:initial}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1-5);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-small)}.--size-medium--xl{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large--xl{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--xl{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--xl{width:100%;text-align:center}.--full-width-false--xl{width:auto;text-align:initial}}

package/dist/components/Button/Button.types.d.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { ActionableProps } from "../Actionable";
-import type { IconProps } from "../Icon";
+import type { ActionableProps } from "../../components/Actionable";
+import type { IconProps } from "../../components/Icon";
 import type * as G from "../../types/global";
 import type { Attributes } from "../../types/global";
 export type Size = "xlarge" | "large" | "medium" | "small";
@@ -43,4 +43,4 @@ export type GroupProps = {
     /** Additional attributes for the root element */
     attributes?: Attributes<"div">;
 };
-export type { AlignerProps } from "../_private/Aligner";
+export type { AlignerProps } from "../../components/_private/Aligner";

package/dist/components/Button/ButtonAligner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Aligner from "../_private/Aligner/index.js";
+import Aligner from "../../components/_private/Aligner";
 import s from "./Button.module.css";
 const ButtonAligner = (props) => {
     return _jsx(Aligner, { ...props, className: [s.aligner, props.className] });

package/dist/components/Button/index.js

@@ -1,6 +1,6 @@
-import Button from "./Button.js";
-import ButtonAligner from "./ButtonAligner.js";
-import ButtonGroup from "./ButtonGroup.js";
+import Button from "./Button";
+import ButtonAligner from "./ButtonAligner";
+import ButtonGroup from "./ButtonGroup";
 const ButtonRoot = Button;
 ButtonRoot.Aligner = ButtonAligner;
 ButtonRoot.Group = ButtonGroup;

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

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "disabled" | "className" | "attributes" | "children" | "as" | "render" | "type" | "onClick" | "href" | "stopPropagation"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "as" | "attributes" | "children" | "className" | "disabled" | "href" | "onClick" | "render" | "stopPropagation" | "type"> & {
         color?: "primary" | "critical" | "positive" | "neutral" | "warning" | "media" | "inherit";
         variant?: "solid" | "outline" | "ghost";
         icon?: import("../../Icon").IconProps["svg"];
@@ -15,8 +15,8 @@ declare const _default: {
         fullWidth?: import("../../../types/global").Responsive<boolean>;
         highlighted?: boolean;
     } & import("react").RefAttributes<import("../../Actionable").ActionableRef>> & {
-        Aligner: import("react").FC<import("./..").ButtonAlignerProps>;
-        Group: import("react").FC<import("./..").ButtonGroupProps>;
+        Aligner: import("react").FC<import("../../../components/Button").ButtonAlignerProps>;
+        Group: import("react").FC<import("../../../components/Button").ButtonGroupProps>;
     };
     parameters: {
         iframe: {

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

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.groupClassName = exports.groupFullWidth = exports.group = exports.className = exports.as = exports.hrefOnClick = exports.onClick = exports.href = exports.composition = exports.aligner = exports.disabled = exports.highlighted = exports.loading = exports.fullWidth = exports.rounded = exports.raised = exports.size = exports.icon = exports.variantAndColor = void 0;
 const test_1 = require("storybook/test");
-const Avatar_1 = __importDefault(require("../../Avatar"));
-const Badge_1 = __importDefault(require("../../Badge"));
-const Button_1 = __importDefault(require("./.."));
-const Image_1 = __importDefault(require("../../Image"));
-const Text_1 = __importDefault(require("../../Text"));
-const View_1 = __importDefault(require("../../View"));
+const Avatar_1 = __importDefault(require("../../../components/Avatar"));
+const Badge_1 = __importDefault(require("../../../components/Badge"));
+const Button_1 = __importDefault(require("../../../components/Button"));
+const Image_1 = __importDefault(require("../../../components/Image"));
+const Text_1 = __importDefault(require("../../../components/Text"));
+const View_1 = __importDefault(require("../../../components/View"));
 const storybook_1 = require("../../../utilities/storybook");
 const Plus_1 = __importDefault(require("../../../icons/Plus"));
 const Zap_1 = __importDefault(require("../../../icons/Zap"));
@@ -390,6 +390,19 @@ exports.highlighted = {
 					</Button_1.default>
 				</View_1.default>
 			</storybook_1.Example.Item>
+			<storybook_1.Example.Item title="highlighted, color: primary, all variants">
+				<View_1.default gap={3} direction="row">
+					<Button_1.default highlighted color="primary" icon={Zap_1.default}>
+						Button
+					</Button_1.default>
+					<Button_1.default highlighted color="primary" variant="outline" icon={Zap_1.default}>
+						Button
+					</Button_1.default>
+					<Button_1.default highlighted color="critical" variant="ghost" icon={Zap_1.default}>
+						Button
+					</Button_1.default>
+				</View_1.default>
+			</storybook_1.Example.Item>
 			<storybook_1.Example.Item title="highlighted, color: critical, all variants">
 				<View_1.default gap={3} direction="row">
 					<Button_1.default highlighted color="critical" icon={Zap_1.default}>

package/dist/components/Calendar/Calendar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CalendarControlled from "./CalendarControlled.js";
-import CalendarUncontrolled from "./CalendarUncontrolled.js";
+import CalendarControlled from "./CalendarControlled";
+import CalendarUncontrolled from "./CalendarUncontrolled";
 const Calendar = (props) => {
     if (props.value !== undefined)
         return _jsx(CalendarControlled, { ...props });

package/dist/components/Calendar/Calendar.module.css

@@ -1 +1 @@
-.selection{table-layout:fixed;width:100%}.weekday{color:var(--rs-color-foreground-neutral-faded);font-weight:var(--rs-font-weight-regular);padding-bottom:var(--rs-unit-x2)}[dir=rtl] .control{transform:scaleX(-1)}.cell{cursor:pointer;isolation:isolate;padding:var(--rs-unit-x0-5)}.cell:empty{cursor:default}@media (hover:hover) and (pointer:fine){.cell:hover .cell-button{background-color:var(--rs-color-background-neutral-highlighted-faded)}}.cell.--active .cell-button{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.cell.--active.--selection-range .cell-button{background-color:var(--rs-color-background-neutral-highlighted-faded);color:var(--rs-color-foreground-neutral)}.cell.--active:not(.--selection-range) .cell-button{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color,background-color,border-radius}.cell.--active:not(.--selection-range) .cell-button:before{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color}.cell.--selection-start+.cell.--selection-end .cell-button:before{background-color:var(--rs-color-background-primary)}.cell.--selection-range+.--selection-end .cell-button:before,.cell.--selection-range+.--selection-range .cell-button:before,.cell.--selection-range+:hover .cell-button:before,.cell.--selection-start+.--selection-range .cell-button:before,.cell.--selection-start+:hover .cell-button:before{background-color:var(--rs-color-background-neutral-highlighted-faded)}.cell.--selection-range:not(:last-child) .cell-button,.cell.--selection-start:not(:last-child) .cell-button{border-end-end-radius:0;border-start-end-radius:0}.cell.--selection-end:not(:first-child) .cell-button,.cell.--selection-range+:hover .cell-button,.cell.--selection-range:not(:first-child) .cell-button,.cell.--selection-start+:hover .cell-button{border-end-start-radius:0;border-start-start-radius:0}.cell-button{border-radius:var(--rs-radius-small);padding:var(--rs-unit-x2);position:relative;text-align:center;z-index:10}.cell-button[disabled]{background-color:transparent!important;color:var(--rs-color-foreground-disabled)!important}.cell-button:before{content:"";inset-block:0;inset-inline-start:calc(var(--rs-unit-x1) * -1);position:absolute;width:var(--rs-unit-x1);z-index:-10}
+.selection{table-layout:fixed;width:100%}.weekday{color:var(--rs-color-foreground-neutral-faded);font-weight:var(--rs-font-weight-regular);padding-bottom:var(--rs-unit-x2)}[dir=rtl] .control{transform:scaleX(-1)}.cell{padding:var(--rs-unit-x0-5);isolation:isolate;cursor:pointer}.cell:empty{cursor:default}@media (hover:hover) and (pointer:fine){.cell:hover .cell-button{background-color:var(--rs-color-background-neutral-highlighted-faded)}}.cell.--active .cell-button{color:var(--rs-color-on-background-primary);background-color:var(--rs-color-background-primary)}.cell.--active.--selection-range .cell-button{color:var(--rs-color-foreground-neutral);background-color:var(--rs-color-background-neutral-highlighted-faded)}.cell.--active:not(.--selection-range) .cell-button{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color,background-color,border-radius}.cell.--active:not(.--selection-range) .cell-button:before{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color}.cell.--selection-start+.cell.--selection-end .cell-button:before{background-color:var(--rs-color-background-primary)}.cell.--selection-range+.--selection-end .cell-button:before,.cell.--selection-range+.--selection-range .cell-button:before,.cell.--selection-range+:hover .cell-button:before,.cell.--selection-start+.--selection-range .cell-button:before,.cell.--selection-start+:hover .cell-button:before{background-color:var(--rs-color-background-neutral-highlighted-faded)}.cell.--selection-range:not(:last-child) .cell-button,.cell.--selection-start:not(:last-child) .cell-button{border-start-end-radius:0;border-end-end-radius:0}.cell.--selection-end:not(:first-child) .cell-button,.cell.--selection-range+:hover .cell-button,.cell.--selection-range:not(:first-child) .cell-button,.cell.--selection-start+:hover .cell-button{border-start-start-radius:0;border-end-start-radius:0}.cell-button{border-radius:var(--rs-radius-small);padding:var(--rs-unit-x2);text-align:center;position:relative;z-index:10}.cell-button[disabled]{color:var(--rs-color-foreground-disabled)!important;background-color:transparent!important}.cell-button:before{content:"";position:absolute;inset-block:0;width:var(--rs-unit-x1);inset-inline-start:calc(var(--rs-unit-x1) * -1);z-index:-10}

package/dist/components/Calendar/Calendar.utils.js

@@ -14,7 +14,7 @@ export const getLocalISODate = (args) => {
 const getNormalizedDay = (args) => {
     const { date, firstWeekDay = FIRST_WEEK_DAY } = args;
     const day = date.getDay();
-    return day < firstWeekDay ? DAYS_IN_WEEK - day - firstWeekDay : day - firstWeekDay;
+    return (day - firstWeekDay + DAYS_IN_WEEK) % DAYS_IN_WEEK;
 };
 /**
  * Return an array of US weekday names for the calendar
@@ -79,9 +79,7 @@ export const getFocusableDates = (rootEl) => {
 };
 export const changeDate = (date, delta) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + delta);
 export const setMonthTo = (date, value) => {
-    const resultDate = new Date(date);
-    resultDate.setMonth(value);
-    return resultDate;
+    return new Date(date.getFullYear(), value, 1);
 };
 export const setMonthToPrevious = (date) => {
     return setMonthTo(date, date.getMonth() - 1);

package/dist/components/Calendar/CalendarControlled.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import View from "../View/index.js";
-import { onNextFrame } from "../../utilities/animation.js";
-import { applyNavigationBounds, setMonthTo, setMonthToNext, setMonthToPrevious, setYearToNext, setYearToPrevious, } from "./Calendar.utils.js";
-import CalendarControls from "./CalendarControls.js";
-import CalendarMonth from "./CalendarMonth.js";
-import CalendarYear from "./CalendarYear.js";
-import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation.js";
+import View from "../../components/View";
+import { onNextFrame } from "../../utilities/animation";
+import { applyNavigationBounds, setMonthTo, setMonthToNext, setMonthToPrevious, setYearToNext, setYearToPrevious, } from "./Calendar.utils";
+import CalendarControls from "./CalendarControls";
+import CalendarMonth from "./CalendarMonth";
+import CalendarYear from "./CalendarYear";
+import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation";
 const CalendarControlled = (props) => {
     const { value, onChange, defaultMonth, month, onMonthChange, min, max, range, firstWeekDay, selectedDates, disabledDates, monthsToRender = 1, renderMonthLabel, renderSelectedMonthLabel, renderWeekDay, previousMonthAriaLabel, previousYearAriaLabel, nextMonthAriaLabel, nextYearAriaLabel, monthSelectionAriaLabel, renderMonthAriaLabel, renderDateAriaLabel, renderDateSlot, renderDateValue, } = props;
     const [selectionMode, setSelectionMode] = React.useState("date");

package/dist/components/Calendar/CalendarControls.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import Button from "../Button/index.js";
-import Hidden from "../Hidden/index.js";
-import HiddenVisually from "../HiddenVisually/index.js";
-import Text from "../Text/index.js";
-import View from "../View/index.js";
-import { onNextFrame } from "../../utilities/animation.js";
-import IconChevronLeft from "../../icons/ChevronLeft.js";
-import IconChevronRight from "../../icons/ChevronRight.js";
+import Button from "../../components/Button";
+import Hidden from "../../components/Hidden";
+import HiddenVisually from "../../components/HiddenVisually";
+import Text from "../../components/Text";
+import View from "../../components/View";
+import { onNextFrame } from "../../utilities/animation";
+import IconChevronLeft from "../../icons/ChevronLeft";
+import IconChevronRight from "../../icons/ChevronRight";
 import s from "./Calendar.module.css";
 const CalendarControls = (props) => {
     const { selectionMode, onMonthTitleClick, monthTitleRef, monthDate, renderSelectedMonthLabel, hidePrevious, hideNext, onNextClick, onPreviousClick, monthSelectionAriaLabel = "Select a month", previousMonthAriaLabel = "Previous month", previousYearAriaLabel = "Previous year", nextMonthAriaLabel = "Next month", nextYearAriaLabel = "Next year", } = props;

package/dist/components/Calendar/CalendarDate.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import Actionable from "../Actionable/index.js";
-import { getLocalISODate } from "./Calendar.utils.js";
+import Actionable from "../../components/Actionable";
+import { getLocalISODate } from "./Calendar.utils";
 import s from "./Calendar.module.css";
 const CalendarDate = (props) => {
     const { date, isoDate, startValue, endValue, disabled: passedDisabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, onDateFocus, selectedDates, disabledDates, renderAriaLabel, renderSlot, renderValue, } = props;

package/dist/components/Calendar/CalendarMonth.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { getLocalISODate, getMonthWeeks, getWeekdayNames, isDateFocusable } from "./Calendar.utils.js";
-import CalendarDate from "./CalendarDate.js";
+import { getLocalISODate, getMonthWeeks, getWeekdayNames, isDateFocusable } from "./Calendar.utils";
+import CalendarDate from "./CalendarDate";
 import s from "./Calendar.module.css";
 const CalendarMonth = (props) => {
     const { date, value, onChange, min, max, range, firstWeekDay, selectedDates, disabledDates, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, renderDateSlot, renderDateValue, } = props;

package/dist/components/Calendar/CalendarUncontrolled.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import CalendarControlled from "./CalendarControlled.js";
+import CalendarControlled from "./CalendarControlled";
 const CalendarUncontrolled = (props) => {
     const { onChange, defaultValue, range, ...controlledProps } = props;
     const [value, setValue] = React.useState(defaultValue || null);

package/dist/components/Calendar/CalendarYear.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import Actionable from "../Actionable/index.js";
-import { onNextFrame } from "../../utilities/animation.js";
-import { getMonthNames } from "./Calendar.utils.js";
+import Actionable from "../../components/Actionable";
+import { onNextFrame } from "../../utilities/animation";
+import { getMonthNames } from "./Calendar.utils";
 import s from "./Calendar.module.css";
 const MONTHS_PER_ROW = 3;
 const CalendarYear = (props) => {

package/dist/components/Calendar/index.js

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

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

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite";
 import { type Mock } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("./..").CalendarProps>;
+    component: import("react").FC<import("../../../components/Calendar").CalendarProps>;
     parameters: {
         iframe: {
             url: string;

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

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.keyboardNavigation = exports.monthSelection = exports.ariaLabels = exports.translation = exports.firstWeekDay = exports.minMax = exports.disabledDates = exports.selectedDates = exports.renderDate = exports.monthsToRender = exports.controlled = exports.uncontrolled = exports.month = exports.base = void 0;
 const test_1 = require("storybook/test");
-const Calendar_1 = __importDefault(require("./.."));
-const Text_1 = __importDefault(require("../../Text"));
+const Calendar_1 = __importDefault(require("../../../components/Calendar"));
+const Text_1 = __importDefault(require("../../../components/Text"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {
     title: "Components/Calendar",

package/dist/components/Calendar/useCalendarKeyboardNavigation.js

@@ -1,7 +1,7 @@
 import React from "react";
-import useHotkeys from "../../hooks/useHotkeys.js";
-import * as keys from "../../constants/keys.js";
-import { getFocusableDates } from "./Calendar.utils.js";
+import useHotkeys from "../../hooks/useHotkeys";
+import * as keys from "../../constants/keys";
+import { getFocusableDates } from "./Calendar.utils";
 const useCalendarKeyboardNavigation = (props) => {
     const { rootRef, changeToNextMonth, changeToPreviousMonth, monthDate, verticalDelta, min, max } = props;
     const overflowCountRef = React.useRef(0);

package/dist/components/Card/Card.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { classNames } from "@reshaped/utilities";
-import Actionable from "../Actionable/index.js";
-import View from "../View/index.js";
-import { resolveMixin } from "../../styles/mixin.js";
+import Actionable from "../../components/Actionable";
+import View from "../../components/View";
+import { resolveMixin } from "../../styles/mixin";
 import s from "./Card.module.css";
 const Card = forwardRef((props, ref) => {
     const { padding = 4, borderRadius, selected, raised, bleed, height, direction, gap, align, justify, onClick, href, children, className, attributes, 

package/dist/components/Card/Card.module.css

@@ -1 +1 @@
-.root{background:var(--rs-color-background-elevation-base);color:var(--rs-color-foreground-neutral);display:block;position:relative;text-align:initial}.content{border-radius:inherit;height:100%;overflow:hidden}.--selected>.content:after{border-radius:inherit;box-shadow:0 0 0 2px var(--rs-color-border-primary) inset;content:"";inset:0;pointer-events:none;position:absolute;z-index:var(--rs-z-index-relative)}.--elevation-raised{background:var(--rs-color-background-elevation-raised)}.--actionable:not(.--selected)>.content:before{background:var(--rs-color-background-neutral-faded);content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}@media (hover:hover) and (pointer:fine){.--actionable:not(.--selected):hover>.content:before{opacity:1}}
+.root{background:var(--rs-color-background-elevation-base);color:var(--rs-color-foreground-neutral);display:block;position:relative;text-align:initial}.content{overflow:hidden;border-radius:inherit;height:100%}.--selected>.content:after{content:"";position:absolute;inset:0;box-shadow:0 0 0 2px var(--rs-color-border-primary) inset;border-radius:inherit;z-index:var(--rs-z-index-relative);pointer-events:none}.--elevation-raised{background:var(--rs-color-background-elevation-raised)}.--actionable:not(.--selected)>.content:before{content:"";position:absolute;inset:0;background:var(--rs-color-background-neutral-faded);opacity:0;pointer-events:none;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}@media (hover:hover) and (pointer:fine){.--actionable:not(.--selected):hover>.content:before{opacity:1}}

package/dist/components/Card/Card.types.d.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { ActionableProps } from "../Actionable";
-import type { ViewProps } from "../View";
+import type { ActionableProps } from "../../components/Actionable";
+import type { ViewProps } from "../../components/View";
 import type { Attributes } from "../../types/global";
 export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = Pick<ViewProps, "padding" | "bleed" | "height" | "direction" | "gap" | "align" | "justify" | "borderRadius"> & {
     /** Highlight the component when component is used for an active state */

package/dist/components/Card/index.js

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

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.className = exports.as = exports.href = exports.onClick = exports.layout = exports.bleed = exports.raised = exports.selected = exports.borderRadius = exports.padding = void 0;
 const react_1 = require("react");
 const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../Button"));
-const Card_1 = __importDefault(require("./.."));
+const Button_1 = __importDefault(require("../../../components/Button"));
+const Card_1 = __importDefault(require("../../../components/Card"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {
     title: "Components/Card",

package/dist/components/Carousel/Carousel.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
 import { rafThrottle } from "@reshaped/utilities/internal";
-import View from "../View/index.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import useRTL from "../../hooks/useRTL.js";
-import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
-import CarouselControl from "./CarouselControl.js";
+import View from "../../components/View";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
+import useRTL from "../../hooks/useRTL";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props";
+import CarouselControl from "./CarouselControl";
 import s from "./Carousel.module.css";
 const Carousel = (props) => {
     const { children, gap = 3, visibleItems, bleed, navigationDisplay, onChange, onScroll, instanceRef, className, attributes, } = props;
@@ -115,7 +115,7 @@ const Carousel = (props) => {
             ...responsiveVariables("--rs-carousel-items", visibleItems),
             ...responsiveVariables("--rs-carousel-bleed", bleed),
             ...attributes?.style,
-        }, children: [navigationDisplay !== "hidden" && (_jsxs(_Fragment, { children: [_jsx(CarouselControl, { isRTL: isRTL, type: "back", ref: prevControlElRef, oppositeControlElRef: nextControlElRef, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateBack, mounted: mounted }), _jsx(CarouselControl, { isRTL: isRTL, type: "forward", ref: nextControlElRef, oppositeControlElRef: prevControlElRef, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateForward, mounted: mounted })] })), _jsx(View, { as: "ul", direction: "row", wrap: false, gap: gap, className: s.scroll, attributes: { ref: scrollElRef, onScroll: handleScroll }, children: React.Children.map(children, (child, index) => (_jsx(View.Item, { className: s.item, as: "li", attributes: { ref: (el) => handleItemRef(el, index) }, children: child }))) })] }));
+        }, children: [navigationDisplay !== "hidden" && (_jsxs(_Fragment, { children: [_jsx(CarouselControl, { isRTL: isRTL, type: "back", controlRef: prevControlElRef, oppositeControlElRef: nextControlElRef, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateBack, mounted: mounted }), _jsx(CarouselControl, { isRTL: isRTL, type: "forward", controlRef: nextControlElRef, oppositeControlElRef: prevControlElRef, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateForward, mounted: mounted })] })), _jsx(View, { as: "ul", direction: "row", wrap: false, gap: gap, className: s.scroll, attributes: { ref: scrollElRef, onScroll: handleScroll }, children: React.Children.map(children, (child, index) => (_jsx(View.Item, { className: s.item, as: "li", attributes: { ref: (el) => handleItemRef(el, index) }, children: child }))) })] }));
 };
 Carousel.displayName = "Carousel";
 export default Carousel;

package/dist/components/Carousel/Carousel.module.css

@@ -1 +1 @@
-.root{isolation:isolate;position:relative;width:100%}.control{display:none;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.75);transform-origin:50%;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.--control-prev{left:0}.--control-next{left:100%}.--control-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.scroll{overflow:auto;-ms-overflow-style:none;overflow:-moz-scrollbars-none;-webkit-overflow-scrolling:touch;backface-visibility:hidden;margin:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed) * -1);outline:none;padding:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-behavior:smooth;scroll-padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-snap-type:x mandatory;scrollbar-width:none}[data-rs-keyboard] .scroll:focus{box-shadow:var(--rs-outline-shadow)}.scroll::-webkit-scrollbar{display:none;height:0;width:0}.item{--rs-carousel-item-width:calc(100% / var(--rs-carousel-items) - var(--rs-view-gap-value) * (var(--rs-carousel-items) - 1) / var(--rs-carousel-items));position:relative;scroll-snap-align:start;width:var(--rs-carousel-item-width)}@media (--rs-viewport-l ),(hover:hover){.--control-rendered{display:block}}@media (hover:none){.--bleed .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}}@media (--rs-viewport-m ) and (hover:none){.--bleed-true--m .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--m .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-l ) and (hover:none){.--bleed-true--l .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--l .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-xl ) and (hover:none){.--bleed-true--xl .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--xl .item{width:var(--rs-carousel-item-width)}}.root{--rs-carousel-items-s:unset;--rs-carousel-items-m:var(--rs-carousel-items-s);--rs-carousel-items-l:var(--rs-carousel-items-m);--rs-carousel-items-xl:var(--rs-carousel-items-l);--rs-carousel-items:var(--rs-carousel-items-s);--rs-carousel-bleed-s:0;--rs-carousel-bleed-m:var(--rs-carousel-bleed-s);--rs-carousel-bleed-l:var(--rs-carousel-bleed-m);--rs-carousel-bleed-xl:var(--rs-carousel-bleed-l);--rs-carousel-bleed:var(--rs-carousel-bleed-s)}@media (--rs-viewport-m ){.root{--rs-carousel-items:var(--rs-carousel-items-m);--rs-carousel-bleed:var(--rs-carousel-bleed-m)}}@media (--rs-viewport-l ){.root{--rs-carousel-items:var(--rs-carousel-items-l);--rs-carousel-bleed:var(--rs-carousel-bleed-l)}}@media (--rs-viewport-xl ){.root{--rs-carousel-items:var(--rs-carousel-items-xl);--rs-carousel-bleed:var(--rs-carousel-bleed-xl)}}
+.root{position:relative;isolation:isolate;width:100%}.control{position:absolute;top:50%;opacity:0;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;transform-origin:50%;transform:translate(-50%,-50%) scale(.75);display:none;z-index:var(--rs-z-index-relative)}.--control-prev{left:0}.--control-next{left:100%}.--control-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.scroll{overflow:auto;-ms-overflow-style:none;overflow:-moz-scrollbars-none;-webkit-overflow-scrolling:touch;backface-visibility:hidden;scroll-behavior:smooth;scrollbar-width:none;margin:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed) * -1);padding:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-snap-type:x mandatory;scroll-padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));outline:none}[data-rs-keyboard] .scroll:focus{box-shadow:var(--rs-outline-shadow)}.scroll::-webkit-scrollbar{display:none;width:0;height:0}.item{--rs-carousel-item-width:calc(100% / var(--rs-carousel-items) - var(--rs-view-gap-value) * (var(--rs-carousel-items) - 1) / var(--rs-carousel-items));scroll-snap-align:start;width:var(--rs-carousel-item-width);position:relative}@media (--rs-viewport-l ),(hover:hover){.--control-rendered{display:block}}@media (hover:none){.--bleed .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}}@media (--rs-viewport-m ) and (hover:none){.--bleed-true--m .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--m .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-l ) and (hover:none){.--bleed-true--l .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--l .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-xl ) and (hover:none){.--bleed-true--xl .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--xl .item{width:var(--rs-carousel-item-width)}}.root{--rs-carousel-items-s:unset;--rs-carousel-items-m:var(--rs-carousel-items-s);--rs-carousel-items-l:var(--rs-carousel-items-m);--rs-carousel-items-xl:var(--rs-carousel-items-l);--rs-carousel-items:var(--rs-carousel-items-s);--rs-carousel-bleed-s:0;--rs-carousel-bleed-m:var(--rs-carousel-bleed-s);--rs-carousel-bleed-l:var(--rs-carousel-bleed-m);--rs-carousel-bleed-xl:var(--rs-carousel-bleed-l);--rs-carousel-bleed:var(--rs-carousel-bleed-s)}@media (--rs-viewport-m ){.root{--rs-carousel-items:var(--rs-carousel-items-m);--rs-carousel-bleed:var(--rs-carousel-bleed-m)}}@media (--rs-viewport-l ){.root{--rs-carousel-items:var(--rs-carousel-items-l);--rs-carousel-bleed:var(--rs-carousel-bleed-l)}}@media (--rs-viewport-xl ){.root{--rs-carousel-items:var(--rs-carousel-items-xl);--rs-carousel-bleed:var(--rs-carousel-bleed-xl)}}

package/dist/components/Carousel/Carousel.types.d.ts

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { ActionableRef } from "../Actionable";
+import type { ActionableRef } from "../../components/Actionable";
 import type * as G from "../../types/global";
 import type { Attributes } from "../../types/global";
 export type Instance = {
@@ -13,6 +13,7 @@ export type Instance = {
 } | undefined;
 export type ControlProps = {
     type: "back" | "forward";
+    controlRef: React.RefObject<ActionableRef | null>;
     oppositeControlElRef: React.RefObject<ActionableRef | null>;
     scrollElRef: React.RefObject<HTMLElement | null>;
     scrollPosition: number;

package/dist/components/Carousel/CarouselControl.d.ts

@@ -1,4 +1,6 @@
-import type { ActionableRef } from "../Actionable";
 import * as T from "./Carousel.types";
-declare const CarouselControl: import("react").ForwardRefExoticComponent<T.ControlProps & import("react").RefAttributes<ActionableRef>>;
+declare function CarouselControl(props: T.ControlProps): import("react").JSX.Element;
+declare namespace CarouselControl {
+    var displayName: string;
+}
 export default CarouselControl;

package/dist/components/Carousel/CarouselControl.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useState } from "react";
+import { useState } from "react";
 import { classNames } from "@reshaped/utilities";
-import Button from "../Button/index.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import IconChevronLeft from "../../icons/ChevronLeft.js";
-import IconChevronRight from "../../icons/ChevronRight.js";
+import Button from "../../components/Button";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
+import IconChevronLeft from "../../icons/ChevronLeft";
+import IconChevronRight from "../../icons/ChevronRight";
 import s from "./Carousel.module.css";
-const CarouselControl = forwardRef((props, ref) => {
-    const { type, scrollElRef, oppositeControlElRef, scrollPosition, onClick, isRTL, mounted } = props;
+const CarouselControl = (props) => {
+    const { type, controlRef, scrollElRef, oppositeControlElRef, scrollPosition, onClick, isRTL, mounted, } = props;
     const [visible, setVisible] = useState(false);
     const [rendered, setRendered] = useState(false);
     const isNext = type === "forward";
@@ -26,7 +26,9 @@ const CarouselControl = forwardRef((props, ref) => {
         if (hideControl) {
             setVisible(false);
             timer = setTimeout(() => setRendered(false), 1500);
-            oppositeControlElRef.current?.focus();
+            if (controlRef.current && document.activeElement === controlRef.current) {
+                oppositeControlElRef.current?.focus();
+            }
         }
         else {
             setRendered(true);
@@ -37,7 +39,7 @@ const CarouselControl = forwardRef((props, ref) => {
                 clearTimeout(timer);
         };
     }, [scrollPosition, scrollElRef, mounted, isNext]);
-    return (_jsx("div", { className: controlClassNames, children: _jsx(Button, { size: "small", onClick: onClick, icon: isDisplayedAsNext ? IconChevronRight : IconChevronLeft, rounded: true, variant: "outline", raised: true, attributes: { "aria-disabled": !visible, "aria-hidden": true }, ref: ref }) }));
-});
+    return (_jsx("div", { className: controlClassNames, children: _jsx(Button, { size: "small", onClick: onClick, icon: isDisplayedAsNext ? IconChevronRight : IconChevronLeft, rounded: true, variant: "outline", raised: true, attributes: { "aria-disabled": !visible, "aria-hidden": true }, ref: controlRef }) }));
+};
 CarouselControl.displayName = "CarouselControl";
 export default CarouselControl;

package/dist/components/Carousel/index.js

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

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

@@ -3,7 +3,7 @@ import React from "react";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: React.FC<import("./..").CarouselProps>;
+    component: React.FC<import("../../../components/Carousel").CarouselProps>;
     parameters: {
         a11y: {
             disable: boolean;

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

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.className = exports.instanceRef = exports.navigationDisplay = exports.bleed = exports.gap = exports.visibleItems = exports.base = void 0;
 const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../Button"));
-const Carousel_1 = __importDefault(require("./.."));
-const View_1 = __importDefault(require("../../View"));
+const Button_1 = __importDefault(require("../../../components/Button"));
+const Carousel_1 = __importDefault(require("../../../components/Carousel"));
+const View_1 = __importDefault(require("../../../components/View"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {
     title: "Components/Carousel",

package/dist/components/Checkbox/Checkbox.js

@@ -2,14 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import { useCheckboxGroup } from "../CheckboxGroup/index.js";
-import { useFormControl } from "../FormControl/index.js";
-import HiddenInput from "../HiddenInput/index.js";
-import Icon from "../Icon/index.js";
-import Text from "../Text/index.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
-import IconCheckmark from "../../icons/Checkmark.js";
+import { useCheckboxGroup } from "../../components/CheckboxGroup";
+import { useFormControl } from "../../components/FormControl";
+import HiddenInput from "../../components/HiddenInput";
+import Icon from "../../components/Icon";
+import Text from "../../components/Text";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props";
+import IconCheckmark from "../../icons/Checkmark";
 import s from "./Checkbox.module.css";
 const Checkbox = (props) => {
     const { children, value, onChange, indeterminate, size = "medium", className, attributes, inputAttributes, } = props;