reshaped 3.8.8 → 3.9.0-canary.1

package/dist/components/Select/index.js

@@ -1,9 +1,10 @@
 import Select from "./Select.js";
 import SelectCustom from "./SelectCustom.js";
 import SelectOption from "./SelectOption.js";
-import SelectOptionGroup from "./SelectOptionGroup.js";
+import SelectGroup from "./SelectGroup.js";
 const SelectRoot = Select;
 SelectRoot.Custom = SelectCustom;
 SelectRoot.Option = SelectOption;
-SelectRoot.OptionGroup = SelectOptionGroup;
+SelectRoot.Group = SelectGroup;
+SelectRoot.OptionGroup = SelectGroup;
 export default SelectRoot;

package/dist/components/Tabs/TabsContext.d.ts

@@ -5,8 +5,8 @@ export declare const useTabs: (value?: string) => {
     panelId: string | undefined;
     buttonId: string | undefined;
     variant?: "bordered" | "borderless" | "pills" | "pills-elevated" | undefined;
-    name?: string | undefined;
     direction?: "column" | "row" | undefined;
+    name?: string | undefined;
     onChange?: ((args: {
         value: string;
         name?: string;

package/dist/components/TextArea/TextArea.module.css

@@ -1 +1 @@
-.root{--rs-textarea-border-color:var(--rs-color-border-neutral);--rs-textarea-border-width:1px;display:grid;position:relative}.root:after{content:attr(data-rs-textarea-value) " ";overflow:hidden;overflow-wrap:break-word;visibility:hidden;white-space:pre-wrap}.input,.root:after{border:0;box-sizing:border-box;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);grid-area:1/1/2/2;padding:var(--rs-p);width:100%}.input{background:var(--rs-color-background-elevation-base);border-radius:var(--rs-radius-small);box-shadow:0 0 0 var(--rs-textarea-border-width) var(--rs-textarea-border-color) inset;color:var(--rs-color-foreground-neutral);outline:none;position:relative;z-index:1}.input:focus{box-shadow:0 0 0 2px var(--rs-color-border-primary) inset}.input[disabled]{background:var(--rs-color-background-disabled-faded);box-shadow:0 0 0 1px var(--rs-color-border-disabled) inset;color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-p:var(--rs-unit-x2)}.--size-medium .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-p:var(--rs-unit-x3)}.--size-large .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-p:var(--rs-unit-x4)}.--size-xlarge .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded{--rs-textarea-border-color:transparent}.root.--variant-faded .input{background:var(--rs-color-background-neutral-faded)}.root.--variant-headless{--rs-textarea-border-color:transparent}.root.--variant-headless .input{background:transparent}.root.--variant-headless .input:focus,.root.--variant-headless.--status-error .input,.root.--variant-headless.--status-error .input:focus{box-shadow:none}.root.--status-error{--rs-textarea-border-color:var(--rs-color-border-critical);--rs-textarea-border-width:2px}.root.--resize-auto .input,.root.--resize-none .input{resize:none}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-p:var(--rs-unit-x2)}.--size-medium--m .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-p:var(--rs-unit-x3)}.--size-large--m .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-p:var(--rs-unit-x4)}.--size-xlarge--m .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-p:var(--rs-unit-x2)}.--size-medium--l .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-p:var(--rs-unit-x3)}.--size-large--l .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-p:var(--rs-unit-x4)}.--size-xlarge--l .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-p:var(--rs-unit-x2)}.--size-medium--xl .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-p:var(--rs-unit-x3)}.--size-large--xl .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-p:var(--rs-unit-x4)}.--size-xlarge--xl .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}
+.root{--rs-textarea-border-color:var(--rs-color-border-neutral);--rs-textarea-border-width:1px;display:grid;position:relative}.root:after{content:attr(data-rs-textarea-value) " ";overflow:hidden;overflow-wrap:break-word;visibility:hidden;white-space:pre-wrap}.input,.root:after{border:0;box-sizing:border-box;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);grid-area:1/1/2/2;padding:var(--rs-p);width:100%}.input{background:var(--rs-color-background-elevation-base);border-radius:var(--rs-radius-small);box-shadow:0 0 0 var(--rs-textarea-border-width) var(--rs-textarea-border-color) inset;color:var(--rs-color-foreground-neutral);outline:none;position:relative;z-index:1}.input:focus{box-shadow:0 0 0 2px var(--rs-color-border-primary) inset}.input[disabled]{background:var(--rs-color-background-disabled-faded);box-shadow:0 0 0 1px var(--rs-color-border-disabled) inset;color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-p:var(--rs-unit-x2)}.--size-medium .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-p:var(--rs-unit-x3)}.--size-large .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-p:var(--rs-unit-x4)}.--size-xlarge .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded{--rs-textarea-border-color:transparent}.root.--variant-faded .input{background:var(--rs-color-background-neutral-faded)}.root.--variant-ghost{--rs-textarea-border-color:transparent}.root.--variant-ghost .input{background:transparent}.root.--variant-headless{--rs-textarea-border-color:transparent}.root.--variant-headless .input{background:transparent}.root.--variant-headless .input:focus,.root.--variant-headless.--status-error .input,.root.--variant-headless.--status-error .input:focus{box-shadow:none}.root.--status-error{--rs-textarea-border-color:var(--rs-color-border-critical);--rs-textarea-border-width:2px}.root.--resize-auto .input,.root.--resize-none .input{resize:none}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-p:var(--rs-unit-x2)}.--size-medium--m .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-p:var(--rs-unit-x3)}.--size-large--m .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-p:var(--rs-unit-x4)}.--size-xlarge--m .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-p:var(--rs-unit-x2)}.--size-medium--l .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-p:var(--rs-unit-x3)}.--size-large--l .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-p:var(--rs-unit-x4)}.--size-xlarge--l .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-p:var(--rs-unit-x2)}.--size-medium--xl .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-p:var(--rs-unit-x3)}.--size-large--xl .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-p:var(--rs-unit-x4)}.--size-xlarge--xl .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}

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

@@ -14,7 +14,7 @@ type BaseProps = {
     /** Component render variant
      * @default "outline"
      */
-    variant?: "outline" | "faded" | "headless";
+    variant?: "outline" | "faded" | "ghost" | "headless";
     /** Disable the text area user interaction */
     disabled?: boolean;
     /** Placeholder text when there is no value */

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

@@ -1 +1 @@
-.root{--rs-p-h:var(--rs-text-field-gap);--rs-text-field-border-color:var(--rs-color-border-neutral);--rs-text-field-focus-border-color:var(--rs-color-border-primary);--rs-text-field-border-width:1px;--rs-text-field-start-slot-padding:var(--rs-unit-x2);--rs-text-field-end-slot-padding:var(--rs-unit-x1);align-items:center;background:var(--rs-color-background-elevation-base);border-radius:var(--rs-text-field-radius);box-shadow:0 0 0 var(--rs-text-field-border-width) var(--rs-text-field-border-color) inset;column-gap:var(--rs-text-field-gap);display:flex;padding:0 var(--rs-text-field-gap);position:relative;z-index:0}.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:0 0 0 2px var(--rs-text-field-focus-border-color) inset}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--rounded .affix:first-child,.root.--rounded .icon:first-child{padding-inline-start:var(--rs-unit-x1)}.root.--rounded .input:first-child{padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.inner{column-gap:var(--rs-text-field-gap);display:inline-flex;flex-grow:1}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:0 calc(var(--rs-text-field-gap) * -1);outline:none;padding-block:var(--rs-text-field-p-v);padding-inline:var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.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);letter-spacing:var(--rs-text-field-letter-spacing);line-height:var(--rs-text-field-line-height)}.icon{cursor:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;max-width:100%;min-height:var(--rs-text-field-attachment-height);position:relative;z-index:5}.input+.affix--position-end,.input+.icon--position-end,.input+.slot--position-end{margin-inline-start:auto}.slot--position-start{margin-inline-start:calc(var(--rs-text-field-start-slot-padding) - var(--rs-text-field-gap))}.slot--position-end{margin-inline-end:calc(var(--rs-text-field-end-slot-padding) - var(--rs-text-field-gap))}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:var(--rs-text-field-gap)}.affix.affix--position-start:after{border-inline-end:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-end:0;position:absolute}.affix.affix--position-end{padding-inline-start:var(--rs-text-field-gap)}.affix.affix--position-end:after{border-inline-start:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:0;position:absolute}.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-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--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-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--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-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.root.--variant-faded{--rs-text-field-border-color:transparent;background:var(--rs-color-background-neutral-faded)}.root.--variant-headless{--rs-text-field-border-color:transparent;--rs-text-field-focus-border-color:transparent;background:transparent}.root.--status-error{--rs-text-field-border-color:var(--rs-color-border-critical);--rs-text-field-border-width:2px}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large--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-x3);--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-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--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-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}}@media (--rs-viewport-l ){.--size-small--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large--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-x3);--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-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--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-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large--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-x3);--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-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--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-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}}
+.root{--rs-p-h:var(--rs-text-field-gap);--rs-text-field-border-color:var(--rs-color-border-neutral);--rs-text-field-focus-border-color:var(--rs-color-border-primary);--rs-text-field-border-width:1px;--rs-text-field-start-slot-padding:var(--rs-unit-x2);--rs-text-field-end-slot-padding:var(--rs-unit-x1);align-items:center;background:var(--rs-color-background-elevation-base);border-radius:var(--rs-text-field-radius);box-shadow:0 0 0 var(--rs-text-field-border-width) var(--rs-text-field-border-color) inset;column-gap:var(--rs-text-field-gap);display:flex;padding:0 var(--rs-text-field-gap);position:relative;z-index:0}.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:0 0 0 2px var(--rs-text-field-focus-border-color) inset}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--rounded .affix:first-child,.root.--rounded .icon:first-child{padding-inline-start:var(--rs-unit-x1)}.root.--rounded .input:first-child{padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.inner{column-gap:var(--rs-text-field-gap);display:inline-flex;flex-grow:1}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:0 calc(var(--rs-text-field-gap) * -1);outline:none;padding-block:var(--rs-text-field-p-v);padding-inline:var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.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);letter-spacing:var(--rs-text-field-letter-spacing);line-height:var(--rs-text-field-line-height)}.icon{cursor:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;max-width:100%;min-height:var(--rs-text-field-attachment-height);position:relative;z-index:5}.input+.affix--position-end,.input+.icon--position-end,.input+.slot--position-end{margin-inline-start:auto}.slot--position-start{margin-inline-start:calc(var(--rs-text-field-start-slot-padding) - var(--rs-text-field-gap))}.slot--position-end{margin-inline-end:calc(var(--rs-text-field-end-slot-padding) - var(--rs-text-field-gap))}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:var(--rs-text-field-gap)}.affix.affix--position-start:after{border-inline-end:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-end:0;position:absolute}.affix.affix--position-end{padding-inline-start:var(--rs-text-field-gap)}.affix.affix--position-end:after{border-inline-start:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:0;position:absolute}.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-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--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-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--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-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.root.--variant-faded{--rs-text-field-border-color:transparent;background:var(--rs-color-background-neutral-faded)}.root.--variant-ghost,.root.--variant-headless{--rs-text-field-border-color:transparent;background:transparent}.root.--variant-headless{--rs-text-field-focus-border-color:transparent}.root.--status-error{--rs-text-field-border-color:var(--rs-color-border-critical);--rs-text-field-border-width:2px}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large--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-x3);--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-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--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-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}}@media (--rs-viewport-l ){.--size-small--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large--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-x3);--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-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--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-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large--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-x3);--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-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--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-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}}

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

@@ -41,7 +41,7 @@ export type BaseProps = {
     /** Component render variant
      * @default "outline"
      */
-    variant?: "outline" | "faded" | "headless";
+    variant?: "outline" | "faded" | "ghost" | "headless";
     /** Callback when the text field value changes */
     onChange?: G.ChangeHandler<string>;
     /** Callback when the text field is focused */

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { FlyoutProps, FlyoutTriggerAttributes } from "../Flyout";
-export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "contentGap" | "contentShift" | "originCoordinates" | "contentAttributes" | "contentClassName"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "originCoordinates" | "contentAttributes" | "contentClassName"> & {
     /** Node for inserting children */
     children: (attributes: FlyoutTriggerAttributes) => React.ReactNode;
     /** Text content for the tooltip */

package/dist/config/tailwind.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reshaped",
   "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-  "version": "3.8.8",
+  "version": "3.9.0-canary.1",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",
@@ -78,36 +78,37 @@
     "defaults and not IE 11"
   ],
   "devDependencies": {
-    "@changesets/cli": "2.27.8",
-    "@commitlint/cli": "19.8.1",
-    "@commitlint/config-conventional": "19.8.1",
-    "@commitlint/types": "19.8.1",
-    "@eslint/js": "9.37.0",
+    "@changesets/cli": "2.29.7",
+    "@commitlint/cli": "20.1.0",
+    "@commitlint/config-conventional": "20.0.0",
+    "@commitlint/types": "20.0.0",
+    "@eslint/js": "9.38.0",
     "@size-limit/preset-big-lib": "11.2.0",
-    "@storybook/addon-a11y": "9.1.10",
-    "@storybook/addon-docs": "9.1.10",
-    "@storybook/addon-vitest": "9.1.10",
-    "@storybook/react": "9.1.10",
-    "@storybook/react-vite": "9.1.10",
+    "@storybook/addon-a11y": "10.0.0",
+    "@storybook/addon-docs": "10.0.0",
+    "@storybook/addon-vitest": "10.0.0",
+    "@storybook/react": "10.0.0",
+    "@storybook/react-vite": "10.0.0",
     "@testing-library/user-event": "14.6.1",
     "@types/culori": "4.0.1",
     "@types/events": "3.0.3",
-    "@types/node": "24.7.0",
-    "@types/react": "19.2.1",
-    "@types/react-dom": "19.2.0",
-    "@vitejs/plugin-react": "4.6.0",
-    "@vitest/browser": "3.2.4",
-    "@vitest/coverage-istanbul": "3.2.4",
-    "@vitest/coverage-v8": "3.2.4",
-    "chromatic": "13.3.0",
-    "eslint": "9.37.0",
+    "@types/node": "24.9.2",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "@vitejs/plugin-react": "5.1.0",
+    "@vitest/browser": "4.0.4",
+    "@vitest/coverage-istanbul": "4.0.4",
+    "@vitest/coverage-v8": "4.0.4",
+    "@vitest/browser-playwright": "4.0.4",
+    "chromatic": "13.3.2",
+    "eslint": "9.38.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "6.1.1",
-    "lefthook": "1.13.6",
-    "playwright": "1.56.0",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "lefthook": "2.0.1",
+    "playwright": "1.56.1",
     "postcss": "8.5.6",
     "postcss-cli": "11.0.1",
     "postcss-each": "1.1.0",
@@ -118,17 +119,17 @@
     "react-shadow": "20.6.0",
     "resolve-tspaths": "0.8.23",
     "size-limit": "11.2.0",
-    "storybook": "9.1.10",
+    "storybook": "10.0.0",
     "stylelint": "16.25.0",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-standard": "39.0.1",
     "ts-node": "10.9.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.46.0",
-    "vite": "7.1.9",
+    "typescript-eslint": "8.46.2",
+    "vite": "7.1.12",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.2.4",
-    "vitest-browser-react": "1.0.1"
+    "vitest": "4.0.4",
+    "vitest-browser-react": "2.0.2"
   },
   "peerDependencies": {
     "postcss": "^8",
@@ -139,7 +140,7 @@
     "@changesets/changelog-github": "0.5.1",
     "@csstools/postcss-global-data": "3.1.0",
     "chalk": "4.1.2",
-    "commander": "14.0.1",
+    "commander": "14.0.2",
     "cssnano": "7.1.1",
     "csstype": "3.1.3",
     "culori": "4.0.2",
@@ -175,7 +176,7 @@
     "clean": "sh ./bin/clean.sh",
     "commit": "git-cz",
     "changeset": "changeset",
-    "build": "pnpm clean && pnpm build:stories && pnpm build:esm && pnpm build:css && pnpm build:bundle",
+    "build": "pnpm clean && pnpm build:esm && pnpm build:css && pnpm build:bundle",
     "build:themes": "node bin/cli.js theming --config dist/cli/theming/reshaped.config.js --output src/themes",
     "build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",
     "build:css": "postcss \"src/**/*.css\" --dir dist --base src --config tools/build",

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

@@ -1,44 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { Mock } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").AccordionProps> & {
-        Trigger: import("react").FC<import("../Accordion.types").TriggerProps>;
-        Content: import("react").FC<import("../Accordion.types").ContentProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const base: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const iconSize: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const iconPosition: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const gap: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const onToggle: StoryObj<{
-    handleToggle: Mock;
-}>;
-export declare const active: StoryObj<{
-    handleToggle: Mock;
-}>;
-export declare const defaultActive: StoryObj<{
-    handleToggle: Mock;
-}>;
-export declare const renderProps: StoryObj<{
-    handleToggle: Mock;
-}>;
-export declare const className: StoryObj;

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

@@ -1,204 +0,0 @@
-import { userEvent, expect, fn } from "storybook/test";
-import { Placeholder } from "../../../utilities/storybook/index.js";
-import Accordion from "../index.js";
-import Button from "../../Button/index.js";
-import View from "../../View/index.js";
-export default {
-    title: "Utility components/Accordion",
-    component: Accordion,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/accordion",
-        },
-    },
-};
-export const base = {
-    name: "base",
-    render: () => (<Accordion defaultActive>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-};
-export const iconSize = {
-    name: "iconSize",
-    render: () => (<Accordion iconSize={6}>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-};
-export const iconPosition = {
-    name: "iconPosition",
-    render: () => (<Accordion iconPosition="start">
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-};
-export const gap = {
-    name: "gap",
-    render: () => (<Accordion defaultActive gap={4}>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<Placeholder />
-			</Accordion.Content>
-		</Accordion>),
-};
-export const onToggle = {
-    name: "onToggle",
-    args: {
-        handleToggle: fn(),
-    },
-    render: (args) => (<Accordion onToggle={args.handleToggle}>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-    play: async ({ canvas, args }) => {
-        const { handleToggle } = args;
-        const trigger = canvas.getAllByRole("button")[0];
-        const content = canvas.getByRole("region", { hidden: true });
-        expect(trigger).toHaveAttribute("aria-expanded", "false");
-        await userEvent.click(trigger);
-        const triggerId = trigger.getAttribute("id");
-        const contentId = content.getAttribute("id");
-        expect(handleToggle).toBeCalledTimes(1);
-        expect(handleToggle).toBeCalledWith(true);
-        expect(trigger).toHaveAttribute("aria-expanded", "true");
-        expect(content).toBeInTheDocument();
-        expect(content.getAttribute("aria-labelledby")).toBe(triggerId);
-        expect(trigger.getAttribute("aria-controls")).toBe(contentId);
-        await userEvent.click(trigger);
-        expect(handleToggle).toBeCalledTimes(2);
-        expect(handleToggle).toBeCalledWith(false);
-        expect(trigger).toHaveAttribute("aria-expanded", "false");
-    },
-};
-export const active = {
-    name: "active",
-    args: {
-        handleToggle: fn(),
-    },
-    render: (args) => (<Accordion onToggle={args.handleToggle} active>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-    play: async ({ canvas, args }) => {
-        const { handleToggle } = args;
-        const trigger = canvas.getAllByRole("button")[0];
-        // Opened by default
-        expect(trigger).toHaveAttribute("aria-expanded", "true");
-        await userEvent.click(trigger);
-        // Calls handle toggle with a new state
-        expect(handleToggle).toBeCalledWith(false);
-        // Keeps content opened since it's controlled
-        expect(trigger).toHaveAttribute("aria-expanded", "true");
-    },
-};
-export const defaultActive = {
-    name: "defaultActive",
-    args: {
-        handleToggle: fn(),
-    },
-    render: (args) => (<Accordion onToggle={args.handleToggle} defaultActive>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-    play: async ({ canvas, args }) => {
-        const { handleToggle } = args;
-        const trigger = canvas.getAllByRole("button")[0];
-        // Opened by default
-        expect(trigger).toHaveAttribute("aria-expanded", "true");
-        await userEvent.click(trigger);
-        // Calls handle toggle with a new state
-        expect(handleToggle).toBeCalledWith(false);
-        // Keeps content opened since it's controlled
-        expect(trigger).toHaveAttribute("aria-expanded", "false");
-    },
-};
-export const renderProps = {
-    name: "children: render props",
-    args: {
-        handleToggle: fn(),
-    },
-    render: (args) => (<Accordion onToggle={args.handleToggle}>
-			<Accordion.Trigger>
-				{(attributes, { active }) => (<Button attributes={{ ...attributes, "data-active": active }}>Trigger</Button>)}
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-    play: async ({ canvas, args }) => {
-        const { handleToggle } = args;
-        const trigger = canvas.getAllByRole("button")[0];
-        const content = canvas.getByRole("region", { hidden: true });
-        const triggerId = trigger.getAttribute("id");
-        const contentId = content.getAttribute("id");
-        expect(trigger).toHaveAttribute("aria-expanded", "false");
-        expect(trigger).toHaveAttribute("id", triggerId);
-        expect(trigger).toHaveAttribute("aria-controls", contentId);
-        expect(trigger).toHaveAttribute("data-active", "false");
-        await userEvent.click(trigger);
-        expect(handleToggle).toBeCalledTimes(1);
-        expect(handleToggle).toBeCalledWith(true);
-        expect(trigger).toHaveAttribute("data-active", "true");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Accordion className="test-classname" attributes={{ id: "test-id" }}>
-				<Accordion.Trigger>
-					<Placeholder>Trigger</Placeholder>
-				</Accordion.Trigger>
-				<Accordion.Content>
-					<View paddingTop={2}>
-						<Placeholder />
-					</View>
-				</Accordion.Content>
-			</Accordion>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,40 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").ActionBarProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const positionRelative: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const positionAbsolute: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const positionFixed: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const elevated: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const offset: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const active: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const padding: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const className: StoryObj;