reshaped 4.2.0-canary.0 → 4.2.0

package/dist/components/TextField/TextField.module.css

@@ -1 +1 @@
-.root{--rs-p-h:var(--rs-text-field-p-h);--rs-p-v:0px;--rs-text-field-start-slot-padding:var(--rs-unit-x2);--rs-text-field-end-slot-padding:var(--rs-unit-x2);--rs-text-field-focus-border-color:var(--rs-color-border-primary);display:flex;align-items:center;position:relative;z-index:0;background:var(--rs-color-background-elevation-base);border-radius:var(--rs-text-field-radius);padding:var(--rs-unit-x1) var(--rs-text-field-p-h);min-height:var(--rs-text-field-min-height)}.root.--focused,.root:has(.icon:active),.root:not(:has(button:focus,a:focus,[tabindex="0"]:focus,[role=button]:focus,select:focus)):focus-within{box-shadow:var(--rs-outline-shadow)}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.root.--rounded{--rs-text-field-radius:var(--rs-radius-circular)}.inner{display:inline-flex;flex-grow:1}.input{border:none;outline:none;position:relative;z-index:1;background:none;flex-grow:1;box-sizing:border-box;width:100%;color:var(--rs-color-foreground-neutral);min-height:var(--rs-text-field-min-height);margin:calc(var(--rs-text-field-p-v) * -1) calc(var(--rs-text-field-gap) * -1);padding-inline:var(--rs-text-field-gap);padding-block:0;font-weight:var(--rs-font-weight-regular);font-family:var(--rs-font-family-body)}.input:-webkit-autofill{-webkit-background-clip:text;-webkit-text-fill-color:var(--rs-color-foreground-neutral)}.affix,.input{font-size:var(--rs-text-field-font-size);line-height:var(--rs-text-field-line-height);letter-spacing:var(--rs-text-field-letter-spacing)}.affix,.icon,.slot{max-width:100%;position:relative;z-index:5;display:flex;align-items:center;flex-shrink:0;min-height:calc(var(--rs-text-field-min-height) - var(--rs-unit-x2))}.affix--position-start,.icon--position-start,.slot--position-start{margin-inline-end:var(--rs-text-field-gap)}.affix--position-end,.icon--position-end,.slot--position-end{margin-inline-start:var(--rs-text-field-gap)}.icon{cursor:text}.icon.icon--position-start{margin-inline-start:calc(var(--rs-text-field-icon-align) * -1)}.icon.icon--position-end{margin-inline-end:calc(var(--rs-text-field-icon-align) * -1)}.slot.slot--position-start{--rs-text-field-slot-adjustment:calc(var(--rs-text-field-start-slot-padding) - var(--rs-text-field-p-h));margin-inline-start:var(--rs-text-field-slot-adjustment)}.icon+.slot.slot--position-start{margin-inline-start:0}.slot.slot--position-start:has(+.slot--position-start){margin-inline-end:calc(max(calc(var(--rs-text-field-slot-adjustment) * -1), 0px) + var(--rs-text-field-gap))}.slot.slot--position-end{--rs-text-field-slot-adjustment:calc(var(--rs-text-field-end-slot-padding) - var(--rs-text-field-p-h));margin-inline-end:var(--rs-text-field-slot-adjustment)}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:calc(var(--rs-text-field-gap) + 1px)}.affix.affix--position-start:after{content:"";position:absolute;inset-block:var(--rs-unit-x1-5);inset-inline-end:0;border-inline-end:1px solid var(--rs-color-border-neutral-faded)}.affix.affix--position-end{padding-inline-start:calc(var(--rs-text-field-gap) + 1px)}.affix.affix--position-end:after{content:"";position:absolute;inset-block:var(--rs-unit-x1-5);inset-inline-start:0;border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.input+.affix--position-end,.input+.icon--position-end,.input+.slot--position-end{margin-inline-start:auto}.root.--disabled{--rs-text-field-border-color:var(--rs-color-border-disabled);background:var(--rs-color-background-disabled-faded)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-small{--rs-text-field-gap:var(--rs-unit-x1-5);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-text-field-p-h:var(--rs-unit-x2);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-caption-1);--rs-text-field-line-height:var(--rs-line-height-caption-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-text-field-p-v) * 2)}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-p-h:var(--rs-unit-x3);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2) * 2)}.--size-large{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-p-h:var(--rs-unit-x4);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-p-h:var(--rs-unit-x5);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) * 2)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded)}.root.--variant-ghost{background:transparent}.root.--variant-headless{--rs-text-field-focus-border-color:transparent;background:transparent;box-shadow:none!important}.root.--status-error:not(.--variant-headless){box-shadow:0 0 0 var(--rs-outline-width) var(--rs-color-border-critical) inset}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-1)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-text-field-gap:var(--rs-unit-x1-5);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-text-field-p-h:var(--rs-unit-x2);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-caption-1);--rs-text-field-line-height:var(--rs-line-height-caption-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-text-field-p-v) * 2)}.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-p-h:var(--rs-unit-x3);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2) * 2)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-p-h:var(--rs-unit-x4);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-p-h:var(--rs-unit-x5);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) * 2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-text-field-gap:var(--rs-unit-x1-5);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-text-field-p-h:var(--rs-unit-x2);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-caption-1);--rs-text-field-line-height:var(--rs-line-height-caption-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-text-field-p-v) * 2)}.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-p-h:var(--rs-unit-x3);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2) * 2)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-p-h:var(--rs-unit-x4);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-p-h:var(--rs-unit-x5);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) * 2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-text-field-gap:var(--rs-unit-x1-5);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-text-field-p-h:var(--rs-unit-x2);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-caption-1);--rs-text-field-line-height:var(--rs-line-height-caption-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-text-field-p-v) * 2)}.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-p-h:var(--rs-unit-x3);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2) * 2)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-p-h:var(--rs-unit-x4);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-p-h:var(--rs-unit-x5);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) * 2)}}
+.root{--rs-p-h:var(--rs-text-field-p-h);--rs-p-v:0px;--rs-text-field-start-slot-padding:var(--rs-unit-x2);--rs-text-field-end-slot-padding:var(--rs-unit-x2);--rs-text-field-focus-border-color:var(--rs-color-border-primary);display:flex;align-items:center;position:relative;z-index:0;background:var(--rs-color-background-elevation-base);border-radius:var(--rs-text-field-radius);padding:var(--rs-unit-x1) var(--rs-text-field-p-h);min-height:var(--rs-text-field-min-height)}.root.--focused,.root:has(.icon:active),.root:not(:has(button:focus,a:focus,[tabindex="0"]:focus,[role=button]:focus,select:focus)):focus-within{box-shadow:var(--rs-outline-shadow)}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.root.--rounded{--rs-text-field-radius:var(--rs-radius-circular)}.inner{display:inline-flex;flex-grow:1}.input{border:none;outline:none;position:relative;z-index:1;background:none;flex-grow:1;box-sizing:border-box;width:100%;color:var(--rs-color-foreground-neutral);min-height:var(--rs-text-field-min-height);margin:calc(var(--rs-text-field-p-v) * -1) calc(var(--rs-text-field-gap) * -1);padding-inline:var(--rs-text-field-gap);padding-block:0;font-weight:var(--rs-font-weight-regular);font-family:var(--rs-font-family-body)}.input:-webkit-autofill{-webkit-background-clip:text;-webkit-text-fill-color:var(--rs-color-foreground-neutral)}.affix,.input{font-size:var(--rs-text-field-font-size);line-height:var(--rs-text-field-line-height);letter-spacing:var(--rs-text-field-letter-spacing)}.affix,.icon,.slot{max-width:100%;position:relative;z-index:5;display:flex;align-items:center;flex-shrink:0;min-height:calc(var(--rs-text-field-min-height) - var(--rs-unit-x2))}.affix--position-start,.icon--position-start,.slot--position-start{margin-inline-end:var(--rs-text-field-gap)}.affix--position-end,.icon--position-end,.slot--position-end{margin-inline-start:var(--rs-text-field-gap)}.icon{cursor:text}.icon.icon--position-start{margin-inline-start:calc(var(--rs-text-field-icon-align) * -1)}.icon.icon--position-end{margin-inline-end:calc(var(--rs-text-field-icon-align) * -1)}.slot.slot--position-start{--rs-text-field-slot-adjustment:calc(var(--rs-text-field-start-slot-padding) - var(--rs-text-field-p-h));margin-inline-start:var(--rs-text-field-slot-adjustment)}.icon+.slot.slot--position-start{margin-inline-start:0}.slot.slot--position-start:has(+.slot--position-start){margin-inline-end:calc(max(calc(var(--rs-text-field-slot-adjustment) * -1), 0px) + var(--rs-text-field-gap))}.slot.slot--position-end{--rs-text-field-slot-adjustment:calc(var(--rs-text-field-end-slot-padding) - var(--rs-text-field-p-h));margin-inline-end:var(--rs-text-field-slot-adjustment)}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:calc(var(--rs-text-field-gap) + 1px)}.affix.affix--position-start:after{content:"";position:absolute;inset-block:var(--rs-unit-x1-5);inset-inline-end:0;border-inline-end:1px solid var(--rs-color-border-neutral-faded)}.affix.affix--position-end{padding-inline-start:calc(var(--rs-text-field-gap) + 1px)}.affix.affix--position-end:after{content:"";position:absolute;inset-block:var(--rs-unit-x1-5);inset-inline-start:0;border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.input+.affix--position-end,.input+.icon--position-end,.input+.slot--position-end{margin-inline-start:auto}.root.--disabled{--rs-text-field-border-color:var(--rs-color-border-disabled);background:var(--rs-color-background-disabled-faded)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-small{--rs-text-field-gap:var(--rs-unit-x1);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-text-field-p-h:var(--rs-unit-x2);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-caption-1);--rs-text-field-line-height:var(--rs-line-height-caption-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-text-field-p-v) * 2)}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-p-h:var(--rs-unit-x3);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2) * 2)}.--size-large{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-p-h:var(--rs-unit-x4);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-p-h:var(--rs-unit-x5);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) * 2)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded)}.root.--variant-ghost{background:transparent}.root.--variant-headless{--rs-text-field-focus-border-color:transparent;background:transparent;box-shadow:none!important}.root.--status-error:not(.--variant-headless){box-shadow:0 0 0 var(--rs-outline-width) var(--rs-color-border-critical) inset}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-1)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-text-field-gap:var(--rs-unit-x1);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-text-field-p-h:var(--rs-unit-x2);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-caption-1);--rs-text-field-line-height:var(--rs-line-height-caption-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-text-field-p-v) * 2)}.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-p-h:var(--rs-unit-x3);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2) * 2)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-p-h:var(--rs-unit-x4);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-p-h:var(--rs-unit-x5);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) * 2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-text-field-gap:var(--rs-unit-x1);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-text-field-p-h:var(--rs-unit-x2);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-caption-1);--rs-text-field-line-height:var(--rs-line-height-caption-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-text-field-p-v) * 2)}.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-p-h:var(--rs-unit-x3);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2) * 2)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-p-h:var(--rs-unit-x4);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-p-h:var(--rs-unit-x5);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) * 2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-text-field-gap:var(--rs-unit-x1);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-text-field-p-h:var(--rs-unit-x2);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-caption-1);--rs-text-field-line-height:var(--rs-line-height-caption-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-text-field-p-v) * 2)}.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-p-h:var(--rs-unit-x3);--rs-text-field-icon-align:var(--rs-unit-x0-5);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2) * 2)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-p-h:var(--rs-unit-x4);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x3) * 2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-p-h:var(--rs-unit-x5);--rs-text-field-icon-align:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-1);--rs-text-field-line-height:var(--rs-line-height-body-1);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-1);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) * 2)}}

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

@@ -0,0 +1,7 @@
+import React from "react";
+import type * as T from "./Presence.types";
+declare function Presence<As extends keyof React.JSX.IntrinsicElements = "span">(props: T.Props<As>): React.JSX.Element;
+declare namespace Presence {
+    var displayName: string;
+}
+export default Presence;

package/dist/components/_private/Presence/Presence.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "@reshaped/utilities";
+import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect";
+import s from "./Presence.module.css";
+const PresenceItem = (props) => {
+    const { as, entry, status, itemClassName, enterClassName, exitClassName, onExited } = props;
+    // Rendering a union of every intrinsic tag name blows up the JSX prop type
+    const TagName = as;
+    const elRef = React.useRef(null);
+    const itemClassNames = classNames(s.item, status && s[`--${status}`], itemClassName, status === "enter" && enterClassName, status === "exit" && exitClassName);
+    const handleAnimationEnd = (e) => {
+        if (status !== "exit" || e.target !== elRef.current)
+            return;
+        onExited(entry.id);
+    };
+    // Exiting items are removed when their animation ends, so the ones that never
+    // start it have to be released here. Reduced motion keeps the animation and only
+    // zeroes its duration, which makes it end on the next frame instead
+    useIsomorphicLayoutEffect(() => {
+        const el = elRef.current;
+        if (status !== "exit" || !el)
+            return;
+        if (el.getAnimations().length > 0)
+            return;
+        onExited(entry.id);
+    }, [status, entry.id, onExited]);
+    return (_jsx(TagName, { ref: elRef, className: itemClassNames, "aria-hidden": status === "exit" || undefined, onAnimationEnd: handleAnimationEnd, children: entry.children }));
+};
+const Presence = (props) => {
+    const { children, itemKey, as: TagName = "span", className, itemClassName, enterClassName, exitClassName, attributes, } = props;
+    const idRef = React.useRef(0);
+    // Holds the children of the last committed render, which become the exiting ones on a key change
+    const childrenRef = React.useRef(children);
+    const [state, setState] = React.useState(() => ({ id: 0, key: itemKey, exiting: [] }));
+    // Rendering both children at the same time has to happen in the same pass as the key change,
+    // otherwise the previous children get unmounted before we can animate them out
+    if (state.key !== itemKey) {
+        idRef.current += 1;
+        setState({
+            id: idRef.current,
+            key: itemKey,
+            status: "enter",
+            exiting: [
+                // An item swapped back in before it finished exiting is replaced by the new one
+                ...state.exiting.filter((entry) => entry.key !== itemKey),
+                { id: state.id, key: state.key, children: childrenRef.current },
+            ],
+        });
+    }
+    const handleExited = React.useCallback((id) => {
+        setState((prevState) => ({
+            ...prevState,
+            exiting: prevState.exiting.filter((entry) => entry.id !== id),
+        }));
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+        childrenRef.current = children;
+    });
+    const itemProps = {
+        as: TagName,
+        itemClassName,
+        enterClassName,
+        exitClassName,
+        onExited: handleExited,
+    };
+    return (_jsxs(TagName, { ...attributes, className: classNames(s.root, className), children: [state.exiting.map((entry) => (_jsx(PresenceItem, { entry: entry, status: "exit", ...itemProps }, entry.id))), _jsx(PresenceItem, { entry: { id: state.id, key: itemKey, children }, status: state.status, ...itemProps }, state.id)] }));
+};
+Presence.displayName = "Presence";
+export default Presence;

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

@@ -0,0 +1 @@
+.root{display:grid;grid-template-areas:"presence"}.item{grid-area:presence;min-width:0}.--exit{pointer-events:none}

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

@@ -0,0 +1,45 @@
+import type React from "react";
+import type { ClassName } from "@reshaped/utilities";
+import type { Attributes } from "../../../types/global";
+export type Status = "enter" | "exit";
+export type Entry = {
+    id: number;
+    key: unknown;
+    children?: React.ReactNode;
+};
+export type State = {
+    /** Id of the currently rendered entry */
+    id: number;
+    /** Key the currently rendered entry was rendered with */
+    key: unknown;
+    /** Undefined until the first swap happens to avoid animating on mount */
+    status?: Status;
+    /** Entries kept mounted until their exit animation ends */
+    exiting: Entry[];
+};
+export type ItemProps = Pick<Props, "itemClassName" | "enterClassName" | "exitClassName"> & {
+    as: keyof React.JSX.IntrinsicElements;
+    entry: Entry;
+    status?: Status;
+    onExited: (id: number) => void;
+};
+export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
+    children?: React.ReactNode;
+    /**
+     * Identity of the current children, compared by reference.
+     * Changing it renders the previous and the next children at the same time
+     */
+    itemKey: unknown;
+    /** Render the root and every item as a different element */
+    as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
+    /** Additional classname for the root element */
+    className?: ClassName;
+    /** Classname of every rendered item */
+    itemClassName?: ClassName;
+    /** Classname of the item animating in, added on every change except the first render */
+    enterClassName?: ClassName;
+    /** Classname of the item animating out, the item is removed when its animation ends */
+    exitClassName?: ClassName;
+    /** Additional attributes for the root element */
+    attributes?: Attributes<TagName>;
+};

package/dist/components/_private/Presence/Presence.types.js

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

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

@@ -0,0 +1 @@
+export { default } from "./Presence";

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

@@ -0,0 +1 @@
+export { default } from "./Presence";

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

@@ -20,8 +20,8 @@ type HotkeyData = {
 export declare class HotkeyStore {
     hotkeyMap: Record<string, Set<HotkeyData>>;
     getSize: () => number;
-    bindHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options: HotkeyOptions) => void;
-    unbindHotkeys: (hotkeys: Hotkeys) => void;
+    hasHandlers: (pressedId: string) => boolean;
+    bindHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options: HotkeyOptions) => () => void;
     handleKeyDown: (pressedMap: PressedMap, e: KeyboardEvent) => void;
 }
 export declare const SingletonHotkeysProvider: React.FC<{

package/dist/hooks/_internal/useSingletonHotkeys.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 /**
  * Utilities
  */
 const COMBINATION_DELIMETER = "+";
-let modifiedKeys = [];
+const MODIFIER_KEYS = ["meta", "control", "alt", "shift"];
 const formatHotkey = (hotkey) => {
     if (hotkey === " ")
         return hotkey;
@@ -19,11 +19,26 @@ const getEventKey = (e) => {
     if (!e.key)
         return;
     // Having alt pressed modifies e.key value, so relying on e.code for it
-    if (e.altKey && /^[Key|Digit|Numpad]/.test(e.code)) {
-        return e.code.toLowerCase().replace(/key|digit|numpad/, "");
+    if (e.altKey && /^(Key|Digit|Numpad)/.test(e.code)) {
+        return e.code.toLowerCase().replace(/^(key|digit|numpad)/, "");
     }
     return e.key.toLowerCase();
 };
+/**
+ * Support for `mod` that represents both Mac and Win keyboards
+ * We create the hotkeyId again to sort the mod key correctly
+ */
+const getPressedIds = (pressedId) => {
+    const pressedFormattedKeys = pressedId.split(COMBINATION_DELIMETER);
+    const ids = [pressedId];
+    if (pressedFormattedKeys.includes("control")) {
+        ids.push(getHotkeyId(pressedId.replace("control", "mod")));
+    }
+    if (pressedFormattedKeys.includes("meta")) {
+        ids.push(getHotkeyId(pressedId.replace("meta", "mod")));
+    }
+    return ids;
+};
 // Removing the unknown gets highlighted an invalid syntax
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 const walkHotkeys = (hotkeys, cb) => {
@@ -39,63 +54,50 @@ const walkHotkeys = (hotkeys, cb) => {
 export class HotkeyStore {
     hotkeyMap = {};
     getSize = () => Object.keys(this.hotkeyMap).length;
+    hasHandlers = (pressedId) => {
+        return getPressedIds(pressedId).some((id) => this.hotkeyMap[id]?.size);
+    };
     bindHotkeys = (hotkeys, ref, options) => {
-        walkHotkeys(hotkeys, (id, hotkeyData) => {
-            if (!hotkeyData)
+        const boundData = [];
+        walkHotkeys(hotkeys, (id, callback) => {
+            if (!callback)
                 return;
+            const data = { callback, ref, options };
             if (!this.hotkeyMap[id]) {
                 this.hotkeyMap[id] = new Set();
             }
-            this.hotkeyMap[id].add({ callback: hotkeyData, ref, options });
+            this.hotkeyMap[id].add(data);
+            boundData.push({ id, data });
         });
-    };
-    unbindHotkeys = (hotkeys) => {
-        walkHotkeys(hotkeys, (id, hotkeyCallback) => {
-            if (!hotkeyCallback)
-                return;
-            this.hotkeyMap[id]?.forEach((data) => {
-                if (data.callback === hotkeyCallback) {
-                    this.hotkeyMap[id].delete(data);
+        return () => {
+            boundData.forEach(({ id, data }) => {
+                this.hotkeyMap[id]?.delete(data);
+                if (!this.hotkeyMap[id]?.size) {
+                    delete this.hotkeyMap[id];
                 }
             });
-            if (!this.hotkeyMap[id]?.size) {
-                delete this.hotkeyMap[id];
-            }
-        });
+        };
     };
     handleKeyDown = (pressedMap, e) => {
         const pressedKeys = Object.keys(pressedMap);
         if (!pressedKeys.length)
             return;
         const pressedId = getHotkeyId(pressedKeys.join(COMBINATION_DELIMETER));
-        const pressedFormattedKeys = pressedId.split(COMBINATION_DELIMETER);
-        const hotkeyData = this.hotkeyMap[pressedId];
-        /**
-         * Support for `mod` that represents both Mac and Win keyboards
-         * We create the hotkeyId again to sort the mod key correctly
-         */
-        const controlToModPressedId = getHotkeyId(pressedId.replace("control", "mod"));
-        const metaToModPressedId = getHotkeyId(pressedId.replace("meta", "mod"));
-        const hotkeyControlModData = pressedFormattedKeys.includes("control") && this.hotkeyMap[controlToModPressedId];
-        const hotkeyMetaModData = pressedFormattedKeys.includes("meta") && this.hotkeyMap[metaToModPressedId];
-        [hotkeyData, hotkeyControlModData, hotkeyMetaModData].forEach((hotkeyData) => {
-            if (!hotkeyData)
+        const eventTarget = e.composedPath()[0];
+        getPressedIds(pressedId).forEach((id) => {
+            const hotkeyData = this.hotkeyMap[id];
+            if (!hotkeyData?.size)
                 return;
-            if (hotkeyData?.size) {
-                hotkeyData.forEach((data) => {
-                    const eventTarget = e.composedPath()[0];
-                    if (data.ref.current &&
-                        !(eventTarget === data.ref.current || data.ref.current.contains(eventTarget))) {
-                        return;
-                    }
-                    const resolvedEvent = pressedMap[pressedId];
-                    if (data.options.preventDefault) {
-                        resolvedEvent?.preventDefault();
-                        e.preventDefault();
-                    }
-                    data.callback(e);
-                });
-            }
+            hotkeyData.forEach((data) => {
+                if (data.ref.current &&
+                    !(eventTarget === data.ref.current || data.ref.current.contains(eventTarget))) {
+                    return;
+                }
+                if (data.options.preventDefault) {
+                    e.preventDefault();
+                }
+                data.callback(e);
+            });
         });
     };
 }
@@ -104,61 +106,76 @@ const globalHotkeyStore = new HotkeyStore();
  * Components / Hooks
  */
 const HotkeyContext = React.createContext({});
-export const SingletonHotkeysProvider = (props) => {
+const HotkeysProvider = (props) => {
     const { children } = props;
-    const [pressedMap, setPressedMap] = React.useState({});
+    // Ref is the source of truth to keep the map in sync with the native events,
+    // state is mirroring it to re-render the consumers relying on isPressed
+    const pressedMapRef = React.useRef({});
+    const [, setPressedState] = React.useState({});
+    // Keyup events don't trigger for regular keys while Meta is pressed on macOS,
+    // so we track the keys pressed during that time to release them manually
+    const metaModifiedKeysRef = React.useRef([]);
     const hooksCountRef = React.useRef(0);
+    const setPressedMap = React.useCallback((nextPressedMap) => {
+        pressedMapRef.current = nextPressedMap;
+        setPressedState(nextPressedMap);
+    }, []);
     const addPressedKey = React.useCallback((e) => {
         if (e.repeat || hooksCountRef.current === 0)
             return;
         const eventKey = getEventKey(e);
         if (!eventKey)
             return;
-        const nextPressedMap = { ...pressedMap };
+        const nextPressedMap = { ...pressedMapRef.current };
         nextPressedMap[eventKey] = e;
-        // Key up won't trigger for other keys while Meta is pressed so we need to cache them
-        // and remove on Meta keyup
-        if (e.metaKey)
-            modifiedKeys.push(...Object.keys(nextPressedMap));
-        if (nextPressedMap["meta"])
-            modifiedKeys.push(eventKey);
+        if (nextPressedMap["meta"]) {
+            if (!MODIFIER_KEYS.includes(eventKey)) {
+                // Keys pressed while Meta was held might have been released already
+                // without us receiving their keyup events, so when the whole pressed combination
+                // doesn't match any hotkey - we treat them as released
+                const staleKeys = metaModifiedKeysRef.current.filter((key) => key !== eventKey && key in nextPressedMap);
+                const pressedId = getHotkeyId(Object.keys(nextPressedMap).join(COMBINATION_DELIMETER));
+                if (staleKeys.length && !globalHotkeyStore.hasHandlers(pressedId)) {
+                    staleKeys.forEach((key) => delete nextPressedMap[key]);
+                }
+            }
+            metaModifiedKeysRef.current = Object.keys(nextPressedMap).filter((key) => !MODIFIER_KEYS.includes(key));
+        }
         setPressedMap(nextPressedMap);
         return nextPressedMap;
-    }, [pressedMap]);
+    }, [setPressedMap]);
     const removePressedKey = React.useCallback((e) => {
         if (hooksCountRef.current === 0)
             return;
         const eventKey = getEventKey(e);
         if (!eventKey)
             return;
-        const nextPressedMap = { ...pressedMap };
+        const nextPressedMap = { ...pressedMapRef.current };
         delete nextPressedMap[eventKey];
-        if (eventKey === "meta" || eventKey === "control") {
-            delete nextPressedMap["mod"];
-        }
         if (eventKey === "meta") {
-            modifiedKeys.forEach((key) => {
-                if (!nextPressedMap[key])
-                    return;
+            metaModifiedKeysRef.current.forEach((key) => {
                 delete nextPressedMap[key];
             });
-            modifiedKeys = [];
+            metaModifiedKeysRef.current = [];
         }
         setPressedMap(nextPressedMap);
-    }, [pressedMap]);
-    const isPressed = (hotkey) => {
+    }, [setPressedMap]);
+    const isPressed = React.useCallback((hotkey) => {
+        const pressedMap = pressedMapRef.current;
         const keys = formatHotkey(hotkey).split(COMBINATION_DELIMETER);
-        if (keys.some((key) => !pressedMap[key]))
-            return false;
-        return true;
-    };
+        return keys.every((key) => {
+            if (key === "mod")
+                return Boolean(pressedMap["meta"] || pressedMap["control"]);
+            return Boolean(pressedMap[key]);
+        });
+    }, []);
     const handleWindowKeyDown = React.useCallback((e) => {
         // Browsers trigger keyboard event without passing e.key when you click on autocomplete
         if (!e.key)
             return;
-        const nextPressedMap = addPressedKey(e) ?? pressedMap;
+        const nextPressedMap = addPressedKey(e) ?? pressedMapRef.current;
         globalHotkeyStore.handleKeyDown(nextPressedMap, e);
-    }, [addPressedKey, pressedMap]);
+    }, [addPressedKey]);
     const handleWindowKeyUp = React.useCallback((e) => {
         if (!e.key)
             return;
@@ -166,14 +183,14 @@ export const SingletonHotkeysProvider = (props) => {
     }, [removePressedKey]);
     const handleWindowBlur = React.useCallback(() => {
         setPressedMap({});
-        modifiedKeys = [];
-    }, []);
+        metaModifiedKeysRef.current = [];
+    }, [setPressedMap]);
     const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
         hooksCountRef.current += 1;
-        globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
+        const unbindHotkeys = globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
         return () => {
             hooksCountRef.current -= 1;
-            globalHotkeyStore.unbindHotkeys(hotkeys);
+            unbindHotkeys();
         };
     }, []);
     React.useEffect(() => {
@@ -188,4 +205,13 @@ export const SingletonHotkeysProvider = (props) => {
     }, [handleWindowKeyDown, handleWindowKeyUp, handleWindowBlur]);
     return (_jsx(HotkeyContext.Provider, { value: { addHotkeys, isPressed }, children: children }));
 };
+export const SingletonHotkeysProvider = (props) => {
+    const { children } = props;
+    // Hotkeys are handled globally, so nested providers rely on the root provider
+    // instead of attaching their own window event listeners
+    const hasParentProvider = Boolean(React.useContext(HotkeyContext).addHotkeys);
+    if (hasParentProvider)
+        return _jsx(_Fragment, { children: children });
+    return _jsx(HotkeysProvider, { children: children });
+};
 export const useSingletonHotkeys = () => React.useContext(HotkeyContext);

package/dist/hooks/_internal/useSingletonKeyboardMode.js

@@ -3,6 +3,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { activateKeyboardMode, deactivateKeyboardMode } from "@reshaped/utilities/internal";
 const ESC = "Escape";
+const isEditing = (e) => {
+    const el = e.target;
+    if (!el?.tagName)
+        return false;
+    const tagName = el.tagName?.toLowerCase();
+    const editable = el.isContentEditable || tagName === "textarea" || tagName === "input";
+    if (!editable)
+        return false;
+    return e.isComposing || e.key.length === 1;
+};
 const SingletonKeyboardModeContext = React.createContext({
     disabledRef: null,
     disable: () => { },
@@ -34,6 +44,8 @@ export const SingletonKeyboardModeProvider = (props) => {
         // Prevent focus ring from appearing when using mouse but closing with esc
         if (e.key === ESC)
             return;
+        if (isEditing(e))
+            return;
         activate();
     }, [activate]);
     const handleClick = React.useCallback(() => {

package/dist/hooks/useOnClickOutside.js

@@ -10,21 +10,19 @@ const useOnClickOutside = (refs, handler, options) => {
      * before we checked if it's inside the refs
      */
     const isMouseDownInsideRef = React.useRef(false);
+    const checkEventInsideRefs = (event) => {
+        const eventEl = event.composedPath()[0];
+        if (!eventEl)
+            return false;
+        return refs.some((elRef) => !!elRef.current && (elRef.current === eventEl || elRef.current.contains(eventEl)));
+    };
     React.useEffect(() => {
         /**
          * Not checking for disabled here since some components can enable the hook
          * after it was clicked
          */
         const handleMouseDown = (event) => {
-            isMouseDownInsideRef.current = false;
-            const clickedEl = event.composedPath()[0];
-            refs.forEach((elRef) => {
-                if (!elRef.current)
-                    return;
-                if (elRef.current === clickedEl || elRef.current.contains(clickedEl)) {
-                    isMouseDownInsideRef.current = true;
-                }
-            });
+            isMouseDownInsideRef.current = checkEventInsideRefs(event);
         };
         const handleKeyDown = (event) => {
             if (![keys.ENTER, keys.SPACE].includes(event.key))
@@ -47,15 +45,25 @@ const useOnClickOutside = (refs, handler, options) => {
         if (disabled)
             return;
         const handleClick = (event) => {
-            if ("button" in event && event.button === 2)
-                return;
+            if (event.type === "contextmenu") {
+                /**
+                 * Context menu events can be claimed by a handler that opens a menu of its own,
+                 * which prevents the default browser behavior. Such events open a new flyout
+                 * instead of dismissing the current one, so they're not outside clicks
+                 */
+                if (event.defaultPrevented)
+                    return;
+                isMouseDownInsideRef.current = checkEventInsideRefs(event);
+            }
             if (isMouseDownInsideRef.current)
                 return;
             handlerRef.current?.(event);
         };
         document.addEventListener("click", handleClick);
+        document.addEventListener("contextmenu", handleClick);
         return () => {
             document.removeEventListener("click", handleClick);
+            document.removeEventListener("contextmenu", handleClick);
         };
         // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, [handlerRef, disabled, ...refs]);

package/dist/index.d.ts

@@ -90,8 +90,12 @@ export type { ActionableProps, ActionableRef } from "./components/Actionable";
 export { default as Actionable } from "./components/Actionable";
 export type { ContainerProps } from "./components/Container";
 export { default as Container } from "./components/Container";
+export type { ContentToggleProps } from "./components/ContentToggle";
+export { default as ContentToggle } from "./components/ContentToggle";
 export type { DismissibleProps } from "./components/Dismissible";
 export { default as Dismissible } from "./components/Dismissible";
+export type { ExpandableProps } from "./components/Expandable";
+export { default as Expandable } from "./components/Expandable";
 export type { FlyoutInstance, FlyoutProps, FlyoutTriggerAttributes } from "./components/Flyout";
 export { default as Flyout } from "./components/Flyout";
 export type { FormControlProps } from "./components/FormControl";
@@ -106,6 +110,8 @@ export type { HiddenVisuallyProps } from "./components/HiddenVisually";
 export { default as HiddenVisually } from "./components/HiddenVisually";
 export type { IconProps } from "./components/Icon";
 export { default as Icon } from "./components/Icon";
+export type { IconToggleProps } from "./components/IconToggle";
+export { default as IconToggle } from "./components/IconToggle";
 export type { ImageProps } from "./components/Image";
 export { default as Image } from "./components/Image";
 export type { OverlayProps } from "./components/Overlay";

package/dist/index.js

@@ -41,7 +41,9 @@ export { default as Tooltip } from "./components/Tooltip";
 export { default as Accordion } from "./components/Accordion";
 export { default as Actionable } from "./components/Actionable";
 export { default as Container } from "./components/Container";
+export { default as ContentToggle } from "./components/ContentToggle";
 export { default as Dismissible } from "./components/Dismissible";
+export { default as Expandable } from "./components/Expandable";
 export { default as Flyout } from "./components/Flyout";
 export { default as FormControl } from "./components/FormControl";
 export { default as Grid } from "./components/Grid";
@@ -49,6 +51,7 @@ export { default as Hidden } from "./components/Hidden";
 export { default as HiddenInput } from "./components/HiddenInput";
 export { default as HiddenVisually } from "./components/HiddenVisually";
 export { default as Icon } from "./components/Icon";
+export { default as IconToggle } from "./components/IconToggle";
 export { default as Image } from "./components/Image";
 export { default as Overlay } from "./components/Overlay";
 export { default as Reshaped } from "./components/Reshaped";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reshaped",
-  "version": "4.2.0-canary.0",
+  "version": "4.2.0",
   "description": "Professionally crafted design system in React and Figma for building products of any scale and complexity",
   "keywords": [
     "accessibility",
@@ -80,8 +80,8 @@
     "cssnano": "8.0.2",
     "csstype": "3.2.3",
     "postcss-custom-media": "12.0.1",
-    "@reshaped/utilities": "4.2.0-canary.0",
-    "@reshaped/theming": "4.2.0-canary.0"
+    "@reshaped/theming": "4.2.0",
+    "@reshaped/utilities": "4.2.0"
   },
   "peerDependencies": {
     "postcss": "^8",

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

@@ -1,4 +0,0 @@
-import React from "react";
-import * as T from "./Expandable.types";
-declare const Expandable: React.FC<T.ContentProps>;
-export default Expandable;