reshaped 4.2.0-canary.1 → 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/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.1",
+  "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.1",
-    "@reshaped/theming": "4.2.0-canary.1"
+    "@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;

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

@@ -1,58 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { classNames } from "@reshaped/utilities";
-import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect";
-import { onNextFrame, checkTransitions } from "../../../utilities/animation";
-import s from "./Expandable.module.css";
-const Expandable = (props) => {
-    const { children, active, attributes } = props;
-    const rootRef = React.useRef(null);
-    const mountedRef = React.useRef(false);
-    const [animatedHeight, setAnimatedHeight] = React.useState(active ? "auto" : null);
-    const contentClassNames = classNames(s.root, animatedHeight !== null && animatedHeight !== 0 && s["--visible"], mountedRef.current && animatedHeight !== "auto" && s["--animated"]);
-    const handleTransitionEnd = (e) => {
-        if (e.propertyName !== "height")
-            return;
-        setAnimatedHeight(active ? "auto" : null);
-    };
-    // Avoid animations happening if component is active by default
-    // onNextFrame lets us wait for the component to render first
-    React.useEffect(() => {
-        onNextFrame(() => {
-            mountedRef.current = true;
-        });
-    }, []);
-    useIsomorphicLayoutEffect(() => {
-        const rootEl = rootRef.current;
-        if (!rootEl || !mountedRef.current)
-            return;
-        if (!checkTransitions()) {
-            setAnimatedHeight(active ? "auto" : null);
-            return;
-        }
-        if (active) {
-            rootEl.style.height = "auto";
-            requestAnimationFrame(() => {
-                const targetHeight = rootEl.clientHeight;
-                rootEl.style.height = "0";
-                requestAnimationFrame(() => {
-                    setAnimatedHeight(targetHeight);
-                });
-            });
-        }
-        else {
-            rootEl.style.height = `${rootEl.clientHeight}px`;
-            requestAnimationFrame(() => {
-                setAnimatedHeight(0);
-            });
-        }
-    }, [active]);
-    return (_jsx("div", { ...attributes, className: contentClassNames, ref: rootRef, style: animatedHeight !== null
-            ? { height: animatedHeight, overflow: animatedHeight === "auto" ? "visible" : undefined }
-            : undefined, onTransitionEnd: handleTransitionEnd, 
-        // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role
-        role: "region", hidden: !active && animatedHeight === null, children: children }));
-};
-Expandable.displayName = "Expandable";
-export default Expandable;

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

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

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

@@ -1,7 +0,0 @@
-import React from "react";
-import type { Attributes } from "../../../types/global";
-export type ContentProps = {
-    active?: boolean;
-    children?: React.ReactNode;
-    attributes?: Attributes<"div">;
-};

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

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