@lablup/ui-common 0.2.0-alpha.18 → 0.2.0-alpha.19

package/dist/forks/ComplexSelector/ComplexSelector.styles.d.ts

@@ -111,19 +111,59 @@ export declare const styles: {
 };
 export declare const interactionOverlayStyles: {
     backgroundColor: {
+        "--astryx-press-alpha": string;
+        kKVMdj: string;
+        k44tkh: string;
+        kyAemX: string;
+        kWV6AL: string;
+        "--_press-paint": string;
+        "--_press-paint-image": string;
         kWkggS: string;
+        kKwaWg: string;
         $$css: boolean;
     };
     backgroundImage: {
+        "--astryx-press-alpha": string;
+        kKVMdj: string;
+        k44tkh: string;
+        kyAemX: string;
+        kWV6AL: string;
+        "--_press-paint": string;
+        "--_press-paint-image": string;
         kKwaWg: string;
         $$css: boolean;
     };
     backgroundImageOnNeutral: {
+        "--astryx-press-alpha": string;
+        kKVMdj: string;
+        k44tkh: string;
+        kyAemX: string;
+        kWV6AL: string;
+        "--_press-paint": string;
+        "--_press-paint-image": string;
         kKwaWg: string;
         $$css: boolean;
     };
     pressedBackgroundColor: {
+        "--astryx-press-alpha": string;
+        kKVMdj: string;
+        k44tkh: string;
+        kyAemX: string;
+        kWV6AL: string;
+        "--_press-paint": string;
+        "--_press-paint-image": string;
         kWkggS: string;
+        kKwaWg: string;
+        $$css: boolean;
+    };
+    pressedAlpha: {
+        "--astryx-press-alpha": string;
+        kKVMdj: string;
+        k44tkh: string;
+        kyAemX: string;
+        kWV6AL: string;
+        "--_press-paint": string;
+        "--_press-paint-image": string;
         $$css: boolean;
     };
 };

package/dist/forks/ComplexSelector/ComplexSelector.styles.js

@@ -59,12 +59,12 @@ var e = {
 		kGVxlE: "x1gnnqk1 x1s17dad x15ysqaf",
 		k63SB2: "x1e4wzip",
 		k1ekBW: "xrafxwg",
-		k3aq6I: "x3oybdh xk4oym4",
+		k3aq6I: "x3oybdh xk4oym4 x5lqen6 x3y5scg",
 		$$css: !0
 	},
 	triggerGhostDisabled: {
 		kKwaWg: "x18o3ruo",
-		k3aq6I: "x1c071of x1pdlv7q",
+		k3aq6I: "x1c071of x1pdlv7q x1ylxtyb",
 		$$css: !0
 	},
 	triggerIcon: {
@@ -111,19 +111,59 @@ var e = {
 	}
 }, t = {
 	backgroundColor: {
-		kWkggS: "xjbqb8w x1anq1lc xoevpu5 xprvw0a",
+		"--astryx-press-alpha": "x11z29ks xli5ek3",
+		kKVMdj: "x14e4jsf",
+		k44tkh: "x8s9nux",
+		kyAemX: "xwkbtvz",
+		kWV6AL: "xziyay6",
+		"--_press-paint": "xz2mauf",
+		"--_press-paint-image": "x1l7afqf",
+		kWkggS: "xjbqb8w x1anq1lc x1s5nr2v x13ugjdw xl8sb5e xoevpu5 xprvw0a",
+		kKwaWg: "x7ngsy6 xubczrd",
 		$$css: !0
 	},
 	backgroundImage: {
-		kKwaWg: "x7uyq82 xmvprkv xetgvay",
+		"--astryx-press-alpha": "x11z29ks xli5ek3",
+		kKVMdj: "x14e4jsf",
+		k44tkh: "x8s9nux",
+		kyAemX: "xwkbtvz",
+		kWV6AL: "xziyay6",
+		"--_press-paint": "xz2mauf",
+		"--_press-paint-image": "x1l7afqf",
+		kKwaWg: "x7uyq82 x3f84ok x7ngsy6 xubczrd xmvprkv xetgvay",
 		$$css: !0
 	},
 	backgroundImageOnNeutral: {
-		kKwaWg: "x14bno8m xzmimnh x1otsd3y xo3fi6e",
+		"--astryx-press-alpha": "x11z29ks xli5ek3",
+		kKVMdj: "x14e4jsf",
+		k44tkh: "x8s9nux",
+		kyAemX: "xwkbtvz",
+		kWV6AL: "xziyay6",
+		"--_press-paint": "xz2mauf",
+		"--_press-paint-image": "x1l7afqf",
+		kKwaWg: "x14bno8m xzmimnh xvbnuu x5rw36h x1qxwyo6 x1otsd3y xo3fi6e",
 		$$css: !0
 	},
 	pressedBackgroundColor: {
-		kWkggS: "x1anq1lc",
+		"--astryx-press-alpha": "x11z29ks xli5ek3",
+		kKVMdj: "x14e4jsf",
+		k44tkh: "x8s9nux",
+		kyAemX: "xwkbtvz",
+		kWV6AL: "xziyay6",
+		"--_press-paint": "xz2mauf",
+		"--_press-paint-image": "x1l7afqf",
+		kWkggS: "x1anq1lc x1s5nr2v x13ugjdw xl8sb5e",
+		kKwaWg: "x7ngsy6 xubczrd",
+		$$css: !0
+	},
+	pressedAlpha: {
+		"--astryx-press-alpha": "x11z29ks xli5ek3",
+		kKVMdj: "x14e4jsf",
+		k44tkh: "x8s9nux",
+		kyAemX: "xwkbtvz",
+		kWV6AL: "xziyay6",
+		"--_press-paint": "xz2mauf",
+		"--_press-paint-image": "x1l7afqf",
 		$$css: !0
 	}
 };

package/dist/forks/ComplexSelector/ComplexSelector.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComplexSelector.styles.js","names":[],"sources":["../../../src/forks/ComplexSelector/ComplexSelector.styles.ts"],"sourcesContent":["/* eslint-disable */\n// @ts-nocheck\n// @generated by scripts/sync-forks.mjs. Do not edit.\n//\n// Compiled StyleX from @astryxdesign/core 0.6.5, reused by the\n// ComplexSelector fork so it renders with upstream's own class names\n// (src/forks/compiled.ts). Copyright (c) Meta Platforms, Inc. and\n// affiliates; MIT, see NOTICE.\n\n// dist/ComplexSelector/ComplexSelector.js\nexport const styles = {\n  triggerContainer: {\n    kVAEAm: \"x1n2onr6\",\n    k1xSpc: \"x78zum5\",\n    kGNEyG: \"x6s0dn4\",\n    kjj79g: \"x1qughib\",\n    kOIVth: \"x1txdalj\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"xce4md1\",\n    kg3NbH: \"xrrkdod\",\n    kMv6JI: \"x9ynric\",\n    kGuDYH: \"xcr08ib x1w61h2b\",\n    kLWn49: \"x1kq96og\",\n    kMwMTN: \"x1tgivj0\",\n    kkrTdU: \"x1ypdohk x16khyan\",\n    $$css: true,\n  },\n  trigger: {\n    k1xSpc: \"x78zum5\",\n    kGNEyG: \"x6s0dn4\",\n    kjj79g: \"x1qughib\",\n    kOIVth: \"x1txdalj\",\n    kzQI83: \"x1iyjqo2\",\n    kmuXW: \"xs83m0k\",\n    kCS8Yb: \"x1r8uery\",\n    k7Eaqz: \"xeuugli\",\n    kmVPX3: \"x1717udv\",\n    kogj98: \"x1ghz6dp\",\n    kMzoRj: \"xc342km\",\n    ksu8eU: \"xng3xce\",\n    kWkggS: \"xjbqb8w\",\n    kMv6JI: \"xjb2p0i\",\n    kGuDYH: \"x1qlqyl8\",\n    kLWn49: \"x15bjb6t\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk x16khyan\",\n    kI3sdo: \"x1a2a7pz\",\n    kaIpWk: \"xh6dtrn\",\n    $$css: true,\n  },\n  triggerText: {\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true,\n  },\n  placeholder: {\n    kMwMTN: \"xv1l7n4\",\n    $$css: true,\n  },\n  triggerGhost: {\n    kzqmXN: \"x14atkfc\",\n    kMzoRj: \"xc342km\",\n    kWkggS: \"xjbqb8w\",\n    kGVxlE: \"x1gnnqk1 x1s17dad x15ysqaf\",\n    k63SB2: \"x1e4wzip\",\n    k1ekBW: \"xrafxwg\",\n    k3aq6I: \"x3oybdh xk4oym4\",\n    $$css: true,\n  },\n  triggerGhostDisabled: {\n    kKwaWg: \"x18o3ruo\",\n    k3aq6I: \"x1c071of x1pdlv7q\",\n    $$css: true,\n  },\n  triggerIcon: {\n    kmuXW: \"x2lah0s\",\n    $$css: true,\n  },\n  triggerIconRotation: {\n    k1ekBW: \"x11xpdln\",\n    kIyJzY: \"xuedmi6\",\n    kAMwcw: \"xlr8y92\",\n    k3nNDw: \"x1g0ag68\",\n    $$css: true,\n  },\n  triggerIconOpen: {\n    k3aq6I: \"x19jd1h0\",\n    $$css: true,\n  },\n  popover: {\n    k7Eaqz: \"xrzjruh\",\n    $$css: true,\n  },\n  content: {\n    kB7OPa: \"x9f619\",\n    kskxy: \"xpnbb6b\",\n    kVQacm: \"xysyzu8\",\n    kmVPX3: \"x1b2ylru\",\n    $$css: true,\n  },\n  sm: {\n    kZKoxP: \"x6k0iem\",\n    $$css: true,\n  },\n  md: {\n    kZKoxP: \"x1ueg155\",\n    $$css: true,\n  },\n  lg: {\n    kZKoxP: \"xssyfek\",\n    $$css: true,\n  },\n  disabled: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true,\n  },\n};\n\n// dist/utils/interactionOverlay.stylex.js\nexport const interactionOverlayStyles = {\n  backgroundColor: {\n    kWkggS: \"xjbqb8w x1anq1lc xoevpu5 xprvw0a\",\n    $$css: true,\n  },\n  backgroundImage: {\n    kKwaWg: \"x7uyq82 xmvprkv xetgvay\",\n    $$css: true,\n  },\n  backgroundImageOnNeutral: {\n    kKwaWg: \"x14bno8m xzmimnh x1otsd3y xo3fi6e\",\n    $$css: true,\n  },\n  pressedBackgroundColor: {\n    kWkggS: \"x1anq1lc\",\n    $$css: true,\n  },\n};\n"],"mappings":";AAUA,IAAa,IAAS;CACpB,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,sBAAsB;EACpB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,OAAO;EACP,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF,GAGa,IAA2B;CACtC,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,0BAA0B;EACxB,QAAQ;EACR,OAAO;CACT;CACA,wBAAwB;EACtB,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"ComplexSelector.styles.js","names":[],"sources":["../../../src/forks/ComplexSelector/ComplexSelector.styles.ts"],"sourcesContent":["/* eslint-disable */\n// @ts-nocheck\n// @generated by scripts/sync-forks.mjs. Do not edit.\n//\n// Compiled StyleX from @astryxdesign/core 0.7.0, reused by the\n// ComplexSelector fork so it renders with upstream's own class names\n// (src/forks/compiled.ts). Copyright (c) Meta Platforms, Inc. and\n// affiliates; MIT, see NOTICE.\n\n// dist/ComplexSelector/ComplexSelector.js\nexport const styles = {\n  triggerContainer: {\n    kVAEAm: \"x1n2onr6\",\n    k1xSpc: \"x78zum5\",\n    kGNEyG: \"x6s0dn4\",\n    kjj79g: \"x1qughib\",\n    kOIVth: \"x1txdalj\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"xce4md1\",\n    kg3NbH: \"xrrkdod\",\n    kMv6JI: \"x9ynric\",\n    kGuDYH: \"xcr08ib x1w61h2b\",\n    kLWn49: \"x1kq96og\",\n    kMwMTN: \"x1tgivj0\",\n    kkrTdU: \"x1ypdohk x16khyan\",\n    $$css: true,\n  },\n  trigger: {\n    k1xSpc: \"x78zum5\",\n    kGNEyG: \"x6s0dn4\",\n    kjj79g: \"x1qughib\",\n    kOIVth: \"x1txdalj\",\n    kzQI83: \"x1iyjqo2\",\n    kmuXW: \"xs83m0k\",\n    kCS8Yb: \"x1r8uery\",\n    k7Eaqz: \"xeuugli\",\n    kmVPX3: \"x1717udv\",\n    kogj98: \"x1ghz6dp\",\n    kMzoRj: \"xc342km\",\n    ksu8eU: \"xng3xce\",\n    kWkggS: \"xjbqb8w\",\n    kMv6JI: \"xjb2p0i\",\n    kGuDYH: \"x1qlqyl8\",\n    kLWn49: \"x15bjb6t\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk x16khyan\",\n    kI3sdo: \"x1a2a7pz\",\n    kaIpWk: \"xh6dtrn\",\n    $$css: true,\n  },\n  triggerText: {\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true,\n  },\n  placeholder: {\n    kMwMTN: \"xv1l7n4\",\n    $$css: true,\n  },\n  triggerGhost: {\n    kzqmXN: \"x14atkfc\",\n    kMzoRj: \"xc342km\",\n    kWkggS: \"xjbqb8w\",\n    kGVxlE: \"x1gnnqk1 x1s17dad x15ysqaf\",\n    k63SB2: \"x1e4wzip\",\n    k1ekBW: \"xrafxwg\",\n    k3aq6I: \"x3oybdh xk4oym4 x5lqen6 x3y5scg\",\n    $$css: true,\n  },\n  triggerGhostDisabled: {\n    kKwaWg: \"x18o3ruo\",\n    k3aq6I: \"x1c071of x1pdlv7q x1ylxtyb\",\n    $$css: true,\n  },\n  triggerIcon: {\n    kmuXW: \"x2lah0s\",\n    $$css: true,\n  },\n  triggerIconRotation: {\n    k1ekBW: \"x11xpdln\",\n    kIyJzY: \"xuedmi6\",\n    kAMwcw: \"xlr8y92\",\n    k3nNDw: \"x1g0ag68\",\n    $$css: true,\n  },\n  triggerIconOpen: {\n    k3aq6I: \"x19jd1h0\",\n    $$css: true,\n  },\n  popover: {\n    k7Eaqz: \"xrzjruh\",\n    $$css: true,\n  },\n  content: {\n    kB7OPa: \"x9f619\",\n    kskxy: \"xpnbb6b\",\n    kVQacm: \"xysyzu8\",\n    kmVPX3: \"x1b2ylru\",\n    $$css: true,\n  },\n  sm: {\n    kZKoxP: \"x6k0iem\",\n    $$css: true,\n  },\n  md: {\n    kZKoxP: \"x1ueg155\",\n    $$css: true,\n  },\n  lg: {\n    kZKoxP: \"xssyfek\",\n    $$css: true,\n  },\n  disabled: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true,\n  },\n};\n\n// dist/utils/interactionOverlay.stylex.js\nexport const interactionOverlayStyles = {\n  backgroundColor: {\n    \"--astryx-press-alpha\": \"x11z29ks xli5ek3\",\n    kKVMdj: \"x14e4jsf\",\n    k44tkh: \"x8s9nux\",\n    kyAemX: \"xwkbtvz\",\n    kWV6AL: \"xziyay6\",\n    \"--_press-paint\": \"xz2mauf\",\n    \"--_press-paint-image\": \"x1l7afqf\",\n    kWkggS: \"xjbqb8w x1anq1lc x1s5nr2v x13ugjdw xl8sb5e xoevpu5 xprvw0a\",\n    kKwaWg: \"x7ngsy6 xubczrd\",\n    $$css: true,\n  },\n  backgroundImage: {\n    \"--astryx-press-alpha\": \"x11z29ks xli5ek3\",\n    kKVMdj: \"x14e4jsf\",\n    k44tkh: \"x8s9nux\",\n    kyAemX: \"xwkbtvz\",\n    kWV6AL: \"xziyay6\",\n    \"--_press-paint\": \"xz2mauf\",\n    \"--_press-paint-image\": \"x1l7afqf\",\n    kKwaWg: \"x7uyq82 x3f84ok x7ngsy6 xubczrd xmvprkv xetgvay\",\n    $$css: true,\n  },\n  backgroundImageOnNeutral: {\n    \"--astryx-press-alpha\": \"x11z29ks xli5ek3\",\n    kKVMdj: \"x14e4jsf\",\n    k44tkh: \"x8s9nux\",\n    kyAemX: \"xwkbtvz\",\n    kWV6AL: \"xziyay6\",\n    \"--_press-paint\": \"xz2mauf\",\n    \"--_press-paint-image\": \"x1l7afqf\",\n    kKwaWg: \"x14bno8m xzmimnh xvbnuu x5rw36h x1qxwyo6 x1otsd3y xo3fi6e\",\n    $$css: true,\n  },\n  pressedBackgroundColor: {\n    \"--astryx-press-alpha\": \"x11z29ks xli5ek3\",\n    kKVMdj: \"x14e4jsf\",\n    k44tkh: \"x8s9nux\",\n    kyAemX: \"xwkbtvz\",\n    kWV6AL: \"xziyay6\",\n    \"--_press-paint\": \"xz2mauf\",\n    \"--_press-paint-image\": \"x1l7afqf\",\n    kWkggS: \"x1anq1lc x1s5nr2v x13ugjdw xl8sb5e\",\n    kKwaWg: \"x7ngsy6 xubczrd\",\n    $$css: true,\n  },\n  pressedAlpha: {\n    \"--astryx-press-alpha\": \"x11z29ks xli5ek3\",\n    kKVMdj: \"x14e4jsf\",\n    k44tkh: \"x8s9nux\",\n    kyAemX: \"xwkbtvz\",\n    kWV6AL: \"xziyay6\",\n    \"--_press-paint\": \"xz2mauf\",\n    \"--_press-paint-image\": \"x1l7afqf\",\n    $$css: true,\n  },\n};\n"],"mappings":";AAUA,IAAa,IAAS;CACpB,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,sBAAsB;EACpB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,OAAO;EACP,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF,GAGa,IAA2B;CACtC,iBAAiB;EACf,wBAAwB;EACxB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,kBAAkB;EAClB,wBAAwB;EACxB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,wBAAwB;EACxB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,kBAAkB;EAClB,wBAAwB;EACxB,QAAQ;EACR,OAAO;CACT;CACA,0BAA0B;EACxB,wBAAwB;EACxB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,kBAAkB;EAClB,wBAAwB;EACxB,QAAQ;EACR,OAAO;CACT;CACA,wBAAwB;EACtB,wBAAwB;EACxB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,kBAAkB;EAClB,wBAAwB;EACxB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,wBAAwB;EACxB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,kBAAkB;EAClB,wBAAwB;EACxB,OAAO;CACT;AACF"}

package/dist/forks/ComplexSelector/index.d.ts

@@ -4,4 +4,4 @@
  * (facebook/astryx#6362). Astryx's is excluded (exports.exclude.json).
  */
 export { ComplexSelector } from './ComplexSelector';
-export type { ComplexSelectorHandle, ComplexSelectorProps, ComplexSelectorRenderState, ComplexSelectorSize, ComplexSelectorStatus, ComplexSelectorVariant, } from './ComplexSelector';
+export type { ComplexSelectorHandle, ComplexSelectorProps, ComplexSelectorRenderState, ComplexSelectorRenderTriggerProps, ComplexSelectorSize, ComplexSelectorStatus, ComplexSelectorVariant, } from './ComplexSelector';

package/dist/forks/Drawer/Drawer.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { BaseProps } from '@astryxdesign/core';
 import { DialogPurpose } from '@astryxdesign/core/Dialog';
+import { SpacingStep } from '@astryxdesign/core/Layout';
 export interface DrawerProps extends BaseProps<HTMLDialogElement> {
     /** Ref forwarded to the root <dialog> element */
     ref?: React.Ref<HTMLDialogElement>;
@@ -64,6 +65,16 @@ export interface DrawerProps extends BaseProps<HTMLDialogElement> {
      * @default 'info'
      */
     purpose?: DialogPurpose;
+    /**
+     * Internal padding of the drawer content using the spacing scale, matching
+     * Dialog. Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8,
+     * 10. When omitted, uses the theme default for drawers (`--spacing-4`, 16px,
+     * unless the theme sets `padding` on `drawer`), as Dialog does. Pass `0` for
+     * a full-bleed content area. The content area is a container: a Section that
+     * is its only child escapes the padding, bleed children such as Table and
+     * Divider compensate against it, and a Layout picks it up for its regions.
+     */
+    padding?: SpacingStep;
     /**
      * Drawer content. Rendered inside a full-height scrollable area.
      * Focus the element with `data-autofocus` on open, if present.
@@ -90,6 +101,11 @@ export interface DrawerProps extends BaseProps<HTMLDialogElement> {
  * close the drawer, and `DrawerHeader` renders a close button when given
  * `onOpenChange`.
  *
+ * Like Dialog, the drawer is a container: `padding` (or a theme's `padding`
+ * on `drawer`) insets the content area, a lone Section child escapes that
+ * inset, and a Layout inside picks it up for its header, content, and footer
+ * regions. The default inset is `--spacing-4`, matching Dialog.
+ *
  * @example
  * ```
  * const [selected, setSelected] = useState(null);
@@ -98,12 +114,14 @@ export interface DrawerProps extends BaseProps<HTMLDialogElement> {
  *   isOpen={selected != null}
  *   onOpenChange={handleOpenChange}
  *   label={`Details: ${selected?.name}`}>
- *   <DrawerHeader title={selected?.name} onOpenChange={handleOpenChange} />
- *   <HostDetails host={selected} />
+ *   <Layout
+ *     header={<DrawerHeader title={selected?.name} onOpenChange={handleOpenChange} />}
+ *     content={<LayoutContent><HostDetails host={selected} /></LayoutContent>}
+ *   />
  * </Drawer>
  * ```
  */
-export declare function Drawer({ isOpen, onOpenChange, side, width, isFullWidthOnMobile, label, hasScrim, purpose, children, xstyle, className, style, onClick: onClickProp, onKeyDown: onKeyDownProp, ref, ...props }: DrawerProps): import("react").JSX.Element;
+export declare function Drawer({ isOpen, onOpenChange, side, width, isFullWidthOnMobile, label, hasScrim, purpose, padding, children, xstyle, className, style, onClick: onClickProp, onKeyDown: onKeyDownProp, ref, ...props }: DrawerProps): import("react").JSX.Element;
 export declare namespace Drawer {
     var displayName: string;
 }

package/dist/forks/Drawer/Drawer.js

@@ -3,92 +3,97 @@ import { ModalPortalContext as e, modalZIndexBase as t } from "../../components/
 import { compiledStyles as n } from "../compiled.js";
 import { dynamicStyles as r, styles as i } from "./Drawer.styles.js";
 import { useDrawerDialogPresence as a } from "./useDrawerDialogPresence.js";
-import { useCallback as o, useEffect as s, useId as ee, useRef as c, useState as l } from "react";
-import { overlayPaddingReset as te } from "@astryxdesign/core/Layout";
-import { useFocusTrap as u, useMergedRefs as d, useScrollLock as f } from "@astryxdesign/core/hooks";
-import { LayerDepthProvider as p, useLayerDismissal as m } from "@astryxdesign/core/Layer";
-import { composeEventHandlers as ne, mergeProps as h, themeProps as g } from "@astryxdesign/core/utils";
-import { jsx as _ } from "react/jsx-runtime";
-import * as v from "@stylexjs/stylex";
+import { useCallback as o, useEffect as s, useId as c, useRef as l, useState as u } from "react";
+import { container as ee, overlayPaddingReset as te } from "@astryxdesign/core/Layout";
+import { useFocusTrap as ne, useMergedRefs as re, useScrollLock as d } from "@astryxdesign/core/hooks";
+import { LayerDepthProvider as f, useLayerDismissal as ie } from "@astryxdesign/core/Layer";
+import { composeEventHandlers as p, mergeProps as m, themeProps as h } from "@astryxdesign/core/utils";
+import { jsx as g } from "react/jsx-runtime";
+import * as _ from "@stylexjs/stylex";
+import { containerPaddingBlockEndVarStyles as ae, containerPaddingBlockStartVarStyles as v, containerPaddingInlineVarStyles as oe, paddingStyles as y, spacingStepToToken as b } from "@astryxdesign/core/Layout/padding.stylex";
 //#region src/forks/Drawer/Drawer.tsx
-var y = 56, re = "100dvw", b = n(i), ie = r, ae = 1e3, x = /* @__PURE__ */ new Map();
-function oe(e) {
-	let n = Math.max(999, ...x.values()), r = Math.min(n + 1, t() - 1);
-	return x.set(e, r), r;
+var x = 56, se = "100dvw", S = n(i), ce = r, le = 1e3, C = /* @__PURE__ */ new Map();
+function ue(e) {
+	let n = Math.max(999, ...C.values()), r = Math.min(n + 1, t() - 1);
+	return C.set(e, r), r;
 }
-function S(e) {
-	x.delete(e);
+function w(e) {
+	C.delete(e);
 }
-var C = "x1iyjqo2 x2lwn1j xh8yej3 x1odjw0f x6ikm8r xish69e xx69xxh x1a148e8 x1a2a7pz";
-function w({ isOpen: t, onOpenChange: n, side: r = "end", width: i = 400, isFullWidthOnMobile: x = !1, label: w, hasScrim: T = !0, purpose: E = "info", children: D, xstyle: O, className: k, style: A, onClick: j, onKeyDown: M, ref: N, ...P }) {
-	let F = c(null), { containerRef: I } = u({ isActive: t && T }), L = d(N, F, I), R = E !== "required", z = E === "info", [B, V] = l(t);
-	t && !B && V(!0), a({
-		dialogRef: F,
+function T({ isOpen: t, onOpenChange: n, side: r = "end", width: i = 400, isFullWidthOnMobile: C = !1, label: T, hasScrim: E = !0, purpose: D = "info", padding: O, children: k, xstyle: A, className: j, style: M, onClick: N, onKeyDown: P, ref: F, ...I }) {
+	let L = l(null), { containerRef: R } = ne({ isActive: t && E }), z = re(F, L, R), B = D !== "required", V = D === "info", H = O == null, U = O ?? 4, W = b[U], [G, K] = u(t);
+	t && !G && K(!0), a({
+		dialogRef: L,
 		isOpen: t,
-		isModal: T,
-		setIsRendered: V
+		isModal: E,
+		setIsRendered: K
 	});
-	let [H, U] = l(null);
+	let [de, fe] = u(null);
 	s(() => {
-		U(t && T ? F.current : null);
-	}, [t, T]);
-	let W = ee(), [G, K] = l(ae);
+		fe(t && E ? L.current : null);
+	}, [t, E]);
+	let q = c(), [pe, me] = u(le);
 	s(() => {
-		if (!(!B || T)) return K(oe(W)), () => S(W);
+		if (!(!G || E)) return me(ue(q)), () => w(q);
 	}, [
-		B,
-		T,
-		W
+		G,
+		E,
+		q
 	]);
-	let q = o(() => {
+	let J = o(() => {
 		n(!1);
-	}, [n]), { shouldDismissOnCloseRequest: J } = m({
-		isActive: B,
-		escapeBehavior: R ? "close" : "block",
-		onDismiss: q,
-		getContainer: () => F.current
+	}, [n]), { shouldDismissOnCloseRequest: Y } = ie({
+		isActive: G,
+		escapeBehavior: B ? "close" : "block",
+		onDismiss: J,
+		getContainer: () => L.current
 	});
-	f(t && T);
-	let se = o((e) => {
-		e.preventDefault(), J() && R && q();
+	d(t && E);
+	let he = o((e) => {
+		e.preventDefault(), Y() && B && J();
 	}, [
-		R,
-		q,
-		J
-	]), ce = o((e) => {
-		e.target === e.currentTarget && T && z && n(!1);
+		B,
+		J,
+		Y
+	]), ge = o((e) => {
+		e.target === e.currentTarget && E && V && n(!1);
 	}, [
-		z,
-		T,
+		V,
+		E,
 		n
-	]), Y = typeof i == "number" ? `${i}px` : i, le = x ? re : `min(${Y}, calc(100dvw - ${y}px))`, X = c(r);
-	t && (X.current = r);
-	let Z = t ? r : X.current, ue = Z === "start" ? b.start : b.end, Q = Z === "start" ? b.startOpen : b.endOpen, { open: de, ...$ } = P;
-	return /* @__PURE__ */ _("dialog", {
-		ref: L,
-		...h(g("drawer", { side: Z }), v.props(b.dialog, te.reset, ue, ie.inlineSize(Y, le), B && b.rendered, t && Q, T && b.scrim, T && t && b.scrimOpen, O), k, T ? A : {
-			zIndex: G,
-			...A
+	]), X = typeof i == "number" ? `${i}px` : i, _e = C ? se : `min(${X}, calc(100dvw - ${x}px))`, Z = l(r);
+	t && (Z.current = r);
+	let Q = t ? r : Z.current, ve = Q === "start" ? S.start : S.end, ye = Q === "start" ? S.startOpen : S.endOpen, { open: be, ...$ } = I;
+	return /* @__PURE__ */ g("dialog", {
+		ref: z,
+		...m(h("drawer", { side: Q }), _.props(S.dialog, te.reset, ve, ce.inlineSize(X, _e), G && S.rendered, t && ye, E && S.scrim, E && t && S.scrimOpen, A), j, E ? M : {
+			zIndex: pe,
+			...M
 		}),
 		...$,
-		"aria-label": w,
-		"aria-modal": $["aria-modal"] ?? (T ? "true" : void 0),
-		...E === "required" && T ? { role: "alertdialog" } : void 0,
-		onClick: ne(j, ce),
-		onKeyDown: M,
-		onCancel: se,
-		children: /* @__PURE__ */ _(p, { children: /* @__PURE__ */ _("div", {
+		"aria-label": T,
+		"aria-modal": $["aria-modal"] ?? (E ? "true" : void 0),
+		...D === "required" && E ? { role: "alertdialog" } : void 0,
+		onClick: p(N, ge),
+		onKeyDown: P,
+		onCancel: he,
+		children: /* @__PURE__ */ g(f, { children: /* @__PURE__ */ g("div", {
 			tabIndex: -1,
-			className: C,
-			children: /* @__PURE__ */ _(e, {
-				value: H,
-				children: D
+			..._.props(S.content, ...ee(H ? { useThemeDefault: "drawer" } : {
+				paddingInnerX: W,
+				paddingInnerY: W,
+				paddingOuterX: W,
+				paddingOuterY: W
+			}), !H && U !== 4 && y[U], !H && U !== 4 && oe[U], !H && U !== 4 && v[U], !H && U !== 4 && ae[U], S.contentSafeArea),
+			children: /* @__PURE__ */ g(e, {
+				value: de,
+				children: k
 			})
 		}) })
 	});
 }
-w.displayName = "Drawer";
+T.displayName = "Drawer";
 //#endregion
-export { w as Drawer };
+export { T as Drawer };
 
 //# sourceMappingURL=Drawer.js.map

package/dist/forks/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/forks/Drawer/Drawer.tsx"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n// Modifications copyright (c) Lablup Inc.\n//\n// Forked from @astryxdesign/lab 0.6.5-canary.8701623, src/Drawer/Drawer.tsx\n// (MIT; see NOTICE). Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * Drawer, ui-common's copy of Astryx lab's, with three changes (not upstream):\n *\n * - **A scrimless drawer stays out of the top layer.** lab 0.6.5 opens it as\n *   a manual popover; this copy keeps the `show()` + z-index it had before\n *   (base 1000, later drawers above), because ui-common's `Modal` and\n *   notification stack are z-index surfaces: a top-layer drawer painted over\n *   a confirm or a notification opened while it was up, and the modal stack\n *   then inerted the drawer it could not cover.\n * - **`aria-modal` passes through.** A scrimless drawer is non-modal, but a\n *   consumer that restores modality by hand (its own mask and focus trap) can\n *   now say so; the default is unchanged.\n * - **ui-common's `Modal` opens above a scrimmed drawer.** That drawer is a\n *   modal `<dialog>`, top layer and inerting everything outside it, so a\n *   `Modal` portalled to the body sat behind it, unreachable. The drawer\n *   provides its dialog through `ModalPortalContext` while it is open and\n *   modal, and a `Modal` inside renders there and enters the top layer\n *   after it (modalStack.ts).\n *\n * Escape routing is upstream's since lab 0.6.5: the drawer registers with\n * core's layer-dismissal stack, so a popover, selector or modal opened inside\n * it closes first and nested drawers close top-first. Everything else is\n * upstream's too. Its style namespaces are Astryx's compiled output\n * (src/forks/compiled.ts).\n *\n * Delete this fork, and its exports.exclude.json entry, once ui-common's\n * `Modal` and notification stack are top layer themselves and lab passes\n * `aria-modal` through (CONTRIBUTING, \"Forks of Astryx components\").\n */\n\n/*\n * Upstream's file notes, kept:\n *\n * Overlay panel for inspectors and detail views — the \"click a table row,\n * see its details\" pattern. Slides in from the inline start or end edge and\n * floats above the page content: unlike a docked panel it never reflows the\n * layout underneath, it overlays it (with or without a scrim).\n *\n * Inline axis only (start/end). Block-axis sheets are BottomSheet's job;\n * a drawer is always a full-height side panel.\n *\n * Sizing is viewport-aware: `width` is the desktop budget, and below\n * the mobile breakpoint it preserves a 56px reveal of the page behind, capped\n * by the requested width (or fills the viewport with `isFullWidthOnMobile`).\n *\n * Uses the native `<dialog>` element (same precedent as Dialog/MobileNav):\n * - `showModal()` when `hasScrim` (default) — top-layer rendering, focus\n *   trapping, `::backdrop`, no z-index management.\n * - `showPopover()` when `hasScrim={false}` — non-modal top-layer overlay;\n *   the page behind stays interactive (e.g. master-detail inspectors).\n *   (ui-common: `show()` and a z-index instead; see the header above.)\n *\n * Entry animation uses `@starting-style`; exit slides out before the active\n * modal-dialog or manual-popover host releases the top layer and focus returns\n * to the element that opened the drawer. React owns `display` for both legs\n * rather than a discrete `display` transition, so the panel stops painting in\n * the same commit as the host closes — see the `rendered` style for why.\n *\n * Sibling drawers use the shared layer dismissal stack for topmost-only Escape\n * handling and the browser top layer's chronological paint order.\n *\n * Dismissal follows Dialog: `purpose` decides whether Escape and a scrim click\n * request close, and Drawer renders no close button of its own. Compose\n * `DrawerHeader` with `onOpenChange` for a visible close action, as with\n * `DialogHeader`.\n *\n */\n\nimport { useCallback, useEffect, useId, useRef, useState, type ReactNode } from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { StyleXStyles } from \"@stylexjs/stylex\";\nimport type { BaseProps } from \"@astryxdesign/core\";\nimport type { DialogPurpose } from \"@astryxdesign/core/Dialog\";\nimport { useFocusTrap, useMergedRefs, useScrollLock } from \"@astryxdesign/core/hooks\";\nimport { LayerDepthProvider, useLayerDismissal } from \"@astryxdesign/core/Layer\";\nimport { composeEventHandlers, mergeProps, themeProps } from \"@astryxdesign/core/utils\";\nimport { overlayPaddingReset } from \"@astryxdesign/core/Layout\";\n\nimport { compiledStyles } from \"../compiled\";\nimport * as compiled from \"./Drawer.styles\";\nimport { ModalPortalContext, modalZIndexBase } from \"../../components/Modal/modalStack\";\nimport { useDrawerDialogPresence } from \"./useDrawerDialogPresence\";\n\n// =============================================================================\n// Styles\n// =============================================================================\n\n// Material's established mobile drawer pattern leaves a 56dp reveal. Using\n// the same value in CSS pixels gives the overlay a stable visual relationship\n// to the page behind while the requested width remains an upper bound.\nconst MOBILE_PAGE_REVEAL = 56;\nconst MOBILE_WIDTH_FULL = \"100dvw\";\n\n// @astryxdesign/lab dist/Drawer/Drawer.js `styles` and `dynamicStyles`.\nconst styles = compiledStyles(compiled.styles);\nconst dynamicStyles = compiled.dynamicStyles as {\n  inlineSize: (desktopWidth: string, mobileWidth: string) => StyleXStyles;\n};\n\n// ui-common: stacking for scrimless drawers, which open with `show()` and so\n// need a z-index; modal drawers rely on the top layer's chronological order.\n// Module-level; only mutated inside effects (SSR-safe). 1000 is the app-level\n// drawer convention lab used before 0.6.5. A new drawer goes one above the\n// highest OPEN one, so the value is bounded by how many are open at once, and\n// it stays below the modal band so a Modal always paints over a drawer.\nconst NON_MODAL_BASE_Z = 1000;\nconst openNonModalDrawers = new Map<string, number>();\n\nfunction registerNonModalDrawer(id: string): number {\n  const highest = Math.max(NON_MODAL_BASE_Z - 1, ...openNonModalDrawers.values());\n  const z = Math.min(highest + 1, modalZIndexBase() - 1);\n  openNonModalDrawers.set(id, z);\n  return z;\n}\n\nfunction unregisterNonModalDrawer(id: string): void {\n  openNonModalDrawers.delete(id);\n}\n\n// Upstream's `content` style, which its compiler folded into this class list\n// (dist/Drawer/Drawer.js).\nconst CONTENT_CLASS_NAME =\n  \"x1iyjqo2 x2lwn1j xh8yej3 x1odjw0f x6ikm8r xish69e xx69xxh x1a148e8 x1a2a7pz\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface DrawerProps extends BaseProps<HTMLDialogElement> {\n  /** Ref forwarded to the root <dialog> element */\n  ref?: React.Ref<HTMLDialogElement>;\n\n  /**\n   * Whether the drawer is open. Fully controlled — pair with `onOpenChange`.\n   */\n  isOpen: boolean;\n\n  /**\n   * Called when the drawer requests an open-state change. Escape and a scrim\n   * click call it with `false` as `purpose` allows; a `DrawerHeader` close\n   * button calls it when you pass the same callback to the header. The caller\n   * owns the open state. When sibling drawers are open, Escape only closes the\n   * top (last-opened) drawer.\n   */\n  onOpenChange: (isOpen: boolean) => void;\n\n  /**\n   * Which edge the drawer slides from.\n   * - `'end'` — inline-end edge (right in LTR) — the inspector convention\n   * - `'start'` — inline-start edge (left in LTR)\n   * @default 'end'\n   */\n  side?: \"start\" | \"end\";\n\n  /**\n   * Desktop width budget. A number is pixels; a string is any CSS length\n   * (`'50%'`, `'32rem'`). Below the mobile breakpoint (640px), this\n   * remains the maximum while the drawer preserves a 56px reveal of the page\n   * behind — see `isFullWidthOnMobile`.\n   * @default 400\n   */\n  width?: number | string;\n\n  /**\n   * Whether the drawer covers the full viewport width on mobile\n   * (below 640px) instead of preserving the default 56px reveal of the page\n   * behind. The reveal makes the drawer read as an overlay rather than a\n   * navigation.\n   * @default false\n   */\n  isFullWidthOnMobile?: boolean;\n\n  /**\n   * Accessible label for the drawer (required — the drawer has no\n   * built-in heading to derive a name from).\n   */\n  label: string;\n\n  /**\n   * Whether to render a modal scrim behind the drawer.\n   * - `true` (default) — `showModal()`: top layer, focus trap, body scroll\n   *   lock, click-outside-to-close.\n   * - `false` — `showPopover()`: non-modal top-layer overlay; the page behind\n   *   stays interactive. Escape still closes through the shared layer stack.\n   * @default true\n   */\n  hasScrim?: boolean;\n\n  /**\n   * Configures how the drawer enables dismissals, matching Dialog.\n   * - required: Disables Escape and scrim click (for mandatory flows); a\n   *   modal required drawer is exposed as an `alertdialog`\n   * - form: Prevents scrim click, allows the Escape key\n   * - info: Allows Escape and scrim click\n   *\n   * A non-modal drawer has no scrim, so `form` and `info` behave the same.\n   * @default 'info'\n   */\n  purpose?: DialogPurpose;\n\n  /**\n   * Drawer content. Rendered inside a full-height scrollable area.\n   * Focus the element with `data-autofocus` on open, if present.\n   */\n  children: ReactNode;\n\n  /**\n   * Test ID for the root element.\n   */\n  \"data-testid\"?: string;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * An overlay panel for inspectors and detail views.\n *\n * Slides in from the logical start or end edge and floats above the page\n * using the native `<dialog>` element: modal with a scrim by default, or a\n * non-modal overlay with `hasScrim={false}` that leaves the page behind\n * interactive. `width` is the desktop budget; below 640px the panel preserves\n * a 56px page reveal without exceeding that budget (or fills the viewport\n * with `isFullWidthOnMobile`). Escape\n * closes the top-most open drawer; focus returns to the element that\n * opened it.\n *\n * Dismissal matches Dialog: `purpose` decides whether Escape and a scrim click\n * close the drawer, and `DrawerHeader` renders a close button when given\n * `onOpenChange`.\n *\n * @example\n * ```\n * const [selected, setSelected] = useState(null);\n * const handleOpenChange = isOpen => !isOpen && setSelected(null);\n * <Drawer\n *   isOpen={selected != null}\n *   onOpenChange={handleOpenChange}\n *   label={`Details: ${selected?.name}`}>\n *   <DrawerHeader title={selected?.name} onOpenChange={handleOpenChange} />\n *   <HostDetails host={selected} />\n * </Drawer>\n * ```\n */\nexport function Drawer({\n  isOpen,\n  onOpenChange,\n  side = \"end\",\n  width = 400,\n  isFullWidthOnMobile = false,\n  label,\n  hasScrim = true,\n  purpose = \"info\",\n  children,\n  xstyle,\n  className,\n  style,\n  onClick: onClickProp,\n  onKeyDown: onKeyDownProp,\n  ref,\n  ...props\n}: DrawerProps) {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const { containerRef: focusTrapRef } = useFocusTrap<HTMLDialogElement>({\n    isActive: isOpen && hasScrim,\n  });\n  const mergedDialogRef = useMergedRefs(ref, dialogRef, focusTrapRef);\n  // Derive dismissal behavior from purpose, as Dialog does.\n  const allowEscape = purpose !== \"required\";\n  const allowScrimClick = purpose === \"info\";\n  // Whether the panel paints: true while open and for the whole slide-out.\n  const [isRendered, setIsRendered] = useState(isOpen);\n\n  // Adjusted during render, not in an effect: the panel has to be rendered in\n  // the same commit that targets the open transform, or @starting-style has\n  // nothing to animate from.\n  if (isOpen && !isRendered) {\n    setIsRendered(true);\n  }\n\n  useDrawerDialogPresence({\n    dialogRef,\n    isOpen,\n    isModal: hasScrim,\n    setIsRendered,\n  });\n\n  // ui-common: the dialog a Modal inside renders into, set only once\n  // showModal() has run (the effect above), so the Modal's popover enters the\n  // top layer after the dialog and paints above it. A scrimless drawer is not\n  // top layer (`show()`), so a body-portalled Modal already stacks above it.\n  const [modalHost, setModalHost] = useState<HTMLDialogElement | null>(null);\n  useEffect(() => {\n    setModalHost(isOpen && hasScrim ? dialogRef.current : null);\n  }, [isOpen, hasScrim]);\n\n  // ui-common: a scrimless drawer's z-index, last opened on top.\n  const drawerId = useId();\n  const [stackZ, setStackZ] = useState(NON_MODAL_BASE_Z);\n  // Held while the panel paints, slide-out included, so a drawer opened during\n  // another's exit goes above it rather than taking the same value.\n  useEffect(() => {\n    if (!isRendered || hasScrim) return;\n    setStackZ(registerNonModalDrawer(drawerId));\n    return () => unregisterNonModalDrawer(drawerId);\n  }, [isRendered, hasScrim, drawerId]);\n\n  const handleDismiss = useCallback(() => {\n    onOpenChange(false);\n  }, [onOpenChange]);\n\n  // The shared stack owns Escape delivery across every overlay family. The\n  // provider below gives layers opened from Drawer content a greater logical\n  // depth even when they render elsewhere in the DOM or browser top layer.\n  const { shouldDismissOnCloseRequest } = useLayerDismissal({\n    // The native host stays present through the slide-out. Keep this entry on\n    // the stack until the same commit that hides the host, so a second Escape\n    // cannot fall through to a lower layer during the exit animation.\n    isActive: isRendered,\n    // A `required` drawer consumes Escape without closing, so the press cannot\n    // fall through and dismiss a layer behind it either.\n    escapeBehavior: allowEscape ? \"close\" : \"block\",\n    onDismiss: handleDismiss,\n    getContainer: () => dialogRef.current,\n  });\n\n  // Lock body scroll while a modal drawer is open (iOS Safari workaround).\n  useScrollLock(isOpen && hasScrim);\n\n  // A modal dialog's native cancel event is a platform close request (for\n  // example Android Back). Keep controlled state authoritative and apply the\n  // same top-most/IME rules as the shared Escape listener.\n  const handleCancel = useCallback(\n    (event: React.SyntheticEvent<HTMLDialogElement>) => {\n      event.preventDefault();\n      if (shouldDismissOnCloseRequest() && allowEscape) {\n        handleDismiss();\n      }\n    },\n    [allowEscape, handleDismiss, shouldDismissOnCloseRequest],\n  );\n\n  // Clicks on the ::backdrop target the <dialog> element itself; clicks on\n  // drawer content always target a child (the content area fills the panel).\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDialogElement>) => {\n      if (event.target === event.currentTarget && hasScrim && allowScrimClick) {\n        onOpenChange(false);\n      }\n    },\n    [allowScrimClick, hasScrim, onOpenChange],\n  );\n\n  const widthValue = typeof width === \"number\" ? `${width}px` : width;\n  const mobileWidth = isFullWidthOnMobile\n    ? MOBILE_WIDTH_FULL\n    : `min(${widthValue}, calc(100dvw - ${MOBILE_PAGE_REVEAL}px))`;\n\n  // The side the panel is ANCHORED to, which is the side it must slide back\n  // out to. Latched at open, because a consumer commonly derives `side` from\n  // the same state that drives `isOpen` (`side={selected?.side ?? 'end'}`):\n  // that state clears on close, so the live prop flips mid-exit and the panel\n  // teleports to the other edge and slides out the wrong way. Children stay\n  // mounted for the exit for the same reason; so does the anchor.\n  const exitSideRef = useRef(side);\n  if (isOpen) {\n    exitSideRef.current = side;\n  }\n  const anchoredSide = isOpen ? side : exitSideRef.current;\n\n  const sideStyle = anchoredSide === \"start\" ? styles.start : styles.end;\n  const sideOpenStyle = anchoredSide === \"start\" ? styles.startOpen : styles.endOpen;\n\n  // Filter out native `open` to prevent InvalidStateError when passed\n  const { open: _open, ...safeProps } = props as Record<string, unknown>;\n\n  return (\n    <dialog\n      ref={mergedDialogRef}\n      {...mergeProps(\n        themeProps(\"drawer\", { side: anchoredSide }),\n        stylex.props(\n          styles.dialog,\n          overlayPaddingReset.reset,\n          sideStyle,\n          dynamicStyles.inlineSize(widthValue, mobileWidth),\n          isRendered && styles.rendered,\n          isOpen && sideOpenStyle,\n          hasScrim && styles.scrim,\n          hasScrim && isOpen && styles.scrimOpen,\n          xstyle,\n        ),\n        className,\n        // ui-common: the consumer's style may still override the stack.\n        hasScrim ? style : { zIndex: stackZ, ...style },\n      )}\n      {...safeProps}\n      aria-label={label}\n      // ui-common: scrimless by itself is non-modal, but a consumer that\n      // restores the modality by hand (a portal supplying its own mask and\n      // focus trap) must be able to say so.\n      aria-modal={\n        (safeProps[\"aria-modal\"] as React.AriaAttributes[\"aria-modal\"]) ??\n        (hasScrim ? \"true\" : undefined)\n      }\n      {...(purpose === \"required\" && hasScrim ? { role: \"alertdialog\" } : undefined)}\n      onClick={composeEventHandlers(onClickProp, handleClick)}\n      onKeyDown={onKeyDownProp}\n      onCancel={handleCancel}\n    >\n      <LayerDepthProvider>\n        {/* Scrollable content area — tabIndex so the dialog's focusing steps\n            land on the panel body rather than the first button inside. */}\n        <div tabIndex={-1} className={CONTENT_CLASS_NAME}>\n          <ModalPortalContext value={modalHost}>{children}</ModalPortalContext>\n        </div>\n      </LayerDepthProvider>\n    </dialog>\n  );\n}\n\nDrawer.displayName = \"Drawer\";\n"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/forks/Drawer/Drawer.tsx"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n// Modifications copyright (c) Lablup Inc.\n//\n// Forked from @astryxdesign/lab 0.7.0-canary.97a0d31, src/Drawer/Drawer.tsx\n// (MIT; see NOTICE). Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * Drawer, ui-common's copy of Astryx lab's, with three changes (not upstream):\n *\n * - **A scrimless drawer stays out of the top layer.** lab 0.6.5 opens it as\n *   a manual popover; this copy keeps the `show()` + z-index it had before\n *   (base 1000, later drawers above), because ui-common's `Modal` and\n *   notification stack are z-index surfaces: a top-layer drawer painted over\n *   a confirm or a notification opened while it was up, and the modal stack\n *   then inerted the drawer it could not cover.\n * - **`aria-modal` passes through.** A scrimless drawer is non-modal, but a\n *   consumer that restores modality by hand (its own mask and focus trap) can\n *   now say so; the default is unchanged.\n * - **ui-common's `Modal` opens above a scrimmed drawer.** That drawer is a\n *   modal `<dialog>`, top layer and inerting everything outside it, so a\n *   `Modal` portalled to the body sat behind it, unreachable. The drawer\n *   provides its dialog through `ModalPortalContext` while it is open and\n *   modal, and a `Modal` inside renders there and enters the top layer\n *   after it (modalStack.ts).\n *\n * Escape routing is upstream's since lab 0.6.5: the drawer registers with\n * core's layer-dismissal stack, so a popover, selector or modal opened inside\n * it closes first and nested drawers close top-first. Everything else is\n * upstream's too. Its style namespaces are Astryx's compiled output\n * (src/forks/compiled.ts).\n *\n * Delete this fork, and its exports.exclude.json entry, once ui-common's\n * `Modal` and notification stack are top layer themselves and lab passes\n * `aria-modal` through (CONTRIBUTING, \"Forks of Astryx components\").\n */\n\n/*\n * Upstream's file notes, kept:\n *\n * Overlay panel for inspectors and detail views — the \"click a table row,\n * see its details\" pattern. Slides in from the inline start or end edge and\n * floats above the page content: unlike a docked panel it never reflows the\n * layout underneath, it overlays it (with or without a scrim).\n *\n * Inline axis only (start/end). Block-axis sheets are BottomSheet's job;\n * a drawer is always a full-height side panel.\n *\n * Sizing is viewport-aware: `width` is the desktop budget, and below\n * the mobile breakpoint it preserves a 56px reveal of the page behind, capped\n * by the requested width (or fills the viewport with `isFullWidthOnMobile`).\n *\n * Uses the native `<dialog>` element (same precedent as Dialog/MobileNav):\n * - `showModal()` when `hasScrim` (default) — top-layer rendering, focus\n *   trapping, `::backdrop`, no z-index management.\n * - `showPopover()` when `hasScrim={false}` — non-modal top-layer overlay;\n *   the page behind stays interactive (e.g. master-detail inspectors).\n *   (ui-common: `show()` and a z-index instead; see the header above.)\n *\n * Entry animation uses `@starting-style`; exit slides out before the active\n * modal-dialog or manual-popover host releases the top layer and focus returns\n * to the element that opened the drawer. React owns `display` for both legs\n * rather than a discrete `display` transition, so the panel stops painting in\n * the same commit as the host closes — see the `rendered` style for why.\n *\n * Sibling drawers use the shared layer dismissal stack for topmost-only Escape\n * handling and the browser top layer's chronological paint order.\n *\n * Dismissal follows Dialog: `purpose` decides whether Escape and a scrim click\n * request close, and Drawer renders no close button of its own. Compose\n * `DrawerHeader` with `onOpenChange` for a visible close action, as with\n * `DialogHeader`.\n *\n * The scrolling content area is the drawer's container, like Dialog's inner\n * box: the `padding` prop, else the theme's `padding` on `drawer`, insets it\n * through container tokens, defaulting to `--spacing-4` like Dialog, and the\n * applied inset is published so a lone Section child escapes it and a Layout\n * redistributes it to its regions. Compose `DrawerHeader` inside a `Layout`, as\n * `DialogHeader` is composed in Dialog, so the header is not padded twice. The\n * root dialog stays the overlay boundary (`overlayPaddingReset`).\n *\n * SYNC: When modified, update these files to stay in sync:\n * - /packages/lab/src/Drawer/Drawer.doc.mjs (props table, features, usage)\n * - /packages/lab/src/Drawer/Drawer.test.tsx (tests for new/changed behavior)\n * - /packages/lab/src/Drawer/Drawer.spec.md (component contract)\n * - /packages/lab/src/Drawer/index.ts (exports if types change)\n * - /apps/storybook/stories/Drawer.stories.tsx (examples and visual coverage)\n */\n\nimport { useCallback, useEffect, useId, useRef, useState, type ReactNode } from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { StyleXStyles } from \"@stylexjs/stylex\";\nimport type { BaseProps } from \"@astryxdesign/core\";\nimport type { DialogPurpose } from \"@astryxdesign/core/Dialog\";\nimport { useFocusTrap, useMergedRefs, useScrollLock } from \"@astryxdesign/core/hooks\";\nimport { LayerDepthProvider, useLayerDismissal } from \"@astryxdesign/core/Layer\";\nimport { composeEventHandlers, mergeProps, themeProps } from \"@astryxdesign/core/utils\";\nimport { container, overlayPaddingReset } from \"@astryxdesign/core/Layout\";\nimport {\n  containerPaddingBlockEndVarStyles,\n  containerPaddingBlockStartVarStyles,\n  containerPaddingInlineVarStyles,\n  paddingStyles,\n  spacingStepToToken,\n} from \"@astryxdesign/core/Layout/padding.stylex\";\nimport type { SpacingStep, SpacingToken } from \"@astryxdesign/core/Layout\";\n\nimport { compiledStyles } from \"../compiled\";\nimport * as compiled from \"./Drawer.styles\";\nimport { ModalPortalContext, modalZIndexBase } from \"../../components/Modal/modalStack\";\nimport { useDrawerDialogPresence } from \"./useDrawerDialogPresence\";\n\n// =============================================================================\n// Styles\n// =============================================================================\n\n// Material's established mobile drawer pattern leaves a 56dp reveal. Using\n// the same value in CSS pixels gives the overlay a stable visual relationship\n// to the page behind while the requested width remains an upper bound.\nconst MOBILE_PAGE_REVEAL = 56;\nconst MOBILE_WIDTH_FULL = \"100dvw\";\n\n// @astryxdesign/lab dist/Drawer/Drawer.js `styles` and `dynamicStyles`.\nconst styles = compiledStyles(compiled.styles);\nconst dynamicStyles = compiled.dynamicStyles as {\n  inlineSize: (desktopWidth: string, mobileWidth: string) => StyleXStyles;\n};\n\n// ui-common: stacking for scrimless drawers, which open with `show()` and so\n// need a z-index; modal drawers rely on the top layer's chronological order.\n// Module-level; only mutated inside effects (SSR-safe). 1000 is the app-level\n// drawer convention lab used before 0.6.5. A new drawer goes one above the\n// highest OPEN one, so the value is bounded by how many are open at once, and\n// it stays below the modal band so a Modal always paints over a drawer.\nconst NON_MODAL_BASE_Z = 1000;\nconst openNonModalDrawers = new Map<string, number>();\n\nfunction registerNonModalDrawer(id: string): number {\n  const highest = Math.max(NON_MODAL_BASE_Z - 1, ...openNonModalDrawers.values());\n  const z = Math.min(highest + 1, modalZIndexBase() - 1);\n  openNonModalDrawers.set(id, z);\n  return z;\n}\n\nfunction unregisterNonModalDrawer(id: string): void {\n  openNonModalDrawers.delete(id);\n}\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface DrawerProps extends BaseProps<HTMLDialogElement> {\n  /** Ref forwarded to the root <dialog> element */\n  ref?: React.Ref<HTMLDialogElement>;\n\n  /**\n   * Whether the drawer is open. Fully controlled — pair with `onOpenChange`.\n   */\n  isOpen: boolean;\n\n  /**\n   * Called when the drawer requests an open-state change. Escape and a scrim\n   * click call it with `false` as `purpose` allows; a `DrawerHeader` close\n   * button calls it when you pass the same callback to the header. The caller\n   * owns the open state. When sibling drawers are open, Escape only closes the\n   * top (last-opened) drawer.\n   */\n  onOpenChange: (isOpen: boolean) => void;\n\n  /**\n   * Which edge the drawer slides from.\n   * - `'end'` — inline-end edge (right in LTR) — the inspector convention\n   * - `'start'` — inline-start edge (left in LTR)\n   * @default 'end'\n   */\n  side?: \"start\" | \"end\";\n\n  /**\n   * Desktop width budget. A number is pixels; a string is any CSS length\n   * (`'50%'`, `'32rem'`). Below the mobile breakpoint (640px), this\n   * remains the maximum while the drawer preserves a 56px reveal of the page\n   * behind — see `isFullWidthOnMobile`.\n   * @default 400\n   */\n  width?: number | string;\n\n  /**\n   * Whether the drawer covers the full viewport width on mobile\n   * (below 640px) instead of preserving the default 56px reveal of the page\n   * behind. The reveal makes the drawer read as an overlay rather than a\n   * navigation.\n   * @default false\n   */\n  isFullWidthOnMobile?: boolean;\n\n  /**\n   * Accessible label for the drawer (required — the drawer has no\n   * built-in heading to derive a name from).\n   */\n  label: string;\n\n  /**\n   * Whether to render a modal scrim behind the drawer.\n   * - `true` (default) — `showModal()`: top layer, focus trap, body scroll\n   *   lock, click-outside-to-close.\n   * - `false` — `showPopover()`: non-modal top-layer overlay; the page behind\n   *   stays interactive. Escape still closes through the shared layer stack.\n   * @default true\n   */\n  hasScrim?: boolean;\n\n  /**\n   * Configures how the drawer enables dismissals, matching Dialog.\n   * - required: Disables Escape and scrim click (for mandatory flows); a\n   *   modal required drawer is exposed as an `alertdialog`\n   * - form: Prevents scrim click, allows the Escape key\n   * - info: Allows Escape and scrim click\n   *\n   * A non-modal drawer has no scrim, so `form` and `info` behave the same.\n   * @default 'info'\n   */\n  purpose?: DialogPurpose;\n\n  /**\n   * Internal padding of the drawer content using the spacing scale, matching\n   * Dialog. Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8,\n   * 10. When omitted, uses the theme default for drawers (`--spacing-4`, 16px,\n   * unless the theme sets `padding` on `drawer`), as Dialog does. Pass `0` for\n   * a full-bleed content area. The content area is a container: a Section that\n   * is its only child escapes the padding, bleed children such as Table and\n   * Divider compensate against it, and a Layout picks it up for its regions.\n   */\n  padding?: SpacingStep;\n\n  /**\n   * Drawer content. Rendered inside a full-height scrollable area.\n   * Focus the element with `data-autofocus` on open, if present.\n   */\n  children: ReactNode;\n\n  /**\n   * Test ID for the root element.\n   */\n  \"data-testid\"?: string;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * An overlay panel for inspectors and detail views.\n *\n * Slides in from the logical start or end edge and floats above the page\n * using the native `<dialog>` element: modal with a scrim by default, or a\n * non-modal overlay with `hasScrim={false}` that leaves the page behind\n * interactive. `width` is the desktop budget; below 640px the panel preserves\n * a 56px page reveal without exceeding that budget (or fills the viewport\n * with `isFullWidthOnMobile`). Escape\n * closes the top-most open drawer; focus returns to the element that\n * opened it.\n *\n * Dismissal matches Dialog: `purpose` decides whether Escape and a scrim click\n * close the drawer, and `DrawerHeader` renders a close button when given\n * `onOpenChange`.\n *\n * Like Dialog, the drawer is a container: `padding` (or a theme's `padding`\n * on `drawer`) insets the content area, a lone Section child escapes that\n * inset, and a Layout inside picks it up for its header, content, and footer\n * regions. The default inset is `--spacing-4`, matching Dialog.\n *\n * @example\n * ```\n * const [selected, setSelected] = useState(null);\n * const handleOpenChange = isOpen => !isOpen && setSelected(null);\n * <Drawer\n *   isOpen={selected != null}\n *   onOpenChange={handleOpenChange}\n *   label={`Details: ${selected?.name}`}>\n *   <Layout\n *     header={<DrawerHeader title={selected?.name} onOpenChange={handleOpenChange} />}\n *     content={<LayoutContent><HostDetails host={selected} /></LayoutContent>}\n *   />\n * </Drawer>\n * ```\n */\nexport function Drawer({\n  isOpen,\n  onOpenChange,\n  side = \"end\",\n  width = 400,\n  isFullWidthOnMobile = false,\n  label,\n  hasScrim = true,\n  purpose = \"info\",\n  padding,\n  children,\n  xstyle,\n  className,\n  style,\n  onClick: onClickProp,\n  onKeyDown: onKeyDownProp,\n  ref,\n  ...props\n}: DrawerProps) {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const { containerRef: focusTrapRef } = useFocusTrap<HTMLDialogElement>({\n    isActive: isOpen && hasScrim,\n  });\n  const mergedDialogRef = useMergedRefs(ref, dialogRef, focusTrapRef);\n  // Derive dismissal behavior from purpose, as Dialog does.\n  const allowEscape = purpose !== \"required\";\n  const allowScrimClick = purpose === \"info\";\n  // Same lowering as Dialog: with no padding prop the content area reads the\n  // theme's --astryx-drawer-padding chain (--spacing-4 when unset), else the\n  // explicit step.\n  const usesThemePadding = padding == null;\n  const effectivePadding = padding ?? 4;\n  const paddingToken = spacingStepToToken[effectivePadding] as SpacingToken;\n  // Whether the panel paints: true while open and for the whole slide-out.\n  const [isRendered, setIsRendered] = useState(isOpen);\n\n  // Adjusted during render, not in an effect: the panel has to be rendered in\n  // the same commit that targets the open transform, or @starting-style has\n  // nothing to animate from.\n  if (isOpen && !isRendered) {\n    setIsRendered(true);\n  }\n\n  useDrawerDialogPresence({\n    dialogRef,\n    isOpen,\n    isModal: hasScrim,\n    setIsRendered,\n  });\n\n  // ui-common: the dialog a Modal inside renders into, set only once\n  // showModal() has run (the effect above), so the Modal's popover enters the\n  // top layer after the dialog and paints above it. A scrimless drawer is not\n  // top layer (`show()`), so a body-portalled Modal already stacks above it.\n  const [modalHost, setModalHost] = useState<HTMLDialogElement | null>(null);\n  useEffect(() => {\n    setModalHost(isOpen && hasScrim ? dialogRef.current : null);\n  }, [isOpen, hasScrim]);\n\n  // ui-common: a scrimless drawer's z-index, last opened on top.\n  const drawerId = useId();\n  const [stackZ, setStackZ] = useState(NON_MODAL_BASE_Z);\n  // Held while the panel paints, slide-out included, so a drawer opened during\n  // another's exit goes above it rather than taking the same value.\n  useEffect(() => {\n    if (!isRendered || hasScrim) return;\n    setStackZ(registerNonModalDrawer(drawerId));\n    return () => unregisterNonModalDrawer(drawerId);\n  }, [isRendered, hasScrim, drawerId]);\n\n  const handleDismiss = useCallback(() => {\n    onOpenChange(false);\n  }, [onOpenChange]);\n\n  // The shared stack owns Escape delivery across every overlay family. The\n  // provider below gives layers opened from Drawer content a greater logical\n  // depth even when they render elsewhere in the DOM or browser top layer.\n  const { shouldDismissOnCloseRequest } = useLayerDismissal({\n    // The native host stays present through the slide-out. Keep this entry on\n    // the stack until the same commit that hides the host, so a second Escape\n    // cannot fall through to a lower layer during the exit animation.\n    isActive: isRendered,\n    // A `required` drawer consumes Escape without closing, so the press cannot\n    // fall through and dismiss a layer behind it either.\n    escapeBehavior: allowEscape ? \"close\" : \"block\",\n    onDismiss: handleDismiss,\n    getContainer: () => dialogRef.current,\n  });\n\n  // Lock body scroll while a modal drawer is open (iOS Safari workaround).\n  useScrollLock(isOpen && hasScrim);\n\n  // A modal dialog's native cancel event is a platform close request (for\n  // example Android Back). Keep controlled state authoritative and apply the\n  // same top-most/IME rules as the shared Escape listener.\n  const handleCancel = useCallback(\n    (event: React.SyntheticEvent<HTMLDialogElement>) => {\n      event.preventDefault();\n      if (shouldDismissOnCloseRequest() && allowEscape) {\n        handleDismiss();\n      }\n    },\n    [allowEscape, handleDismiss, shouldDismissOnCloseRequest],\n  );\n\n  // Clicks on the ::backdrop target the <dialog> element itself; clicks on\n  // drawer content always target a child (the content area fills the panel).\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDialogElement>) => {\n      if (event.target === event.currentTarget && hasScrim && allowScrimClick) {\n        onOpenChange(false);\n      }\n    },\n    [allowScrimClick, hasScrim, onOpenChange],\n  );\n\n  const widthValue = typeof width === \"number\" ? `${width}px` : width;\n  const mobileWidth = isFullWidthOnMobile\n    ? MOBILE_WIDTH_FULL\n    : `min(${widthValue}, calc(100dvw - ${MOBILE_PAGE_REVEAL}px))`;\n\n  // The side the panel is ANCHORED to, which is the side it must slide back\n  // out to. Latched at open, because a consumer commonly derives `side` from\n  // the same state that drives `isOpen` (`side={selected?.side ?? 'end'}`):\n  // that state clears on close, so the live prop flips mid-exit and the panel\n  // teleports to the other edge and slides out the wrong way. Children stay\n  // mounted for the exit for the same reason; so does the anchor.\n  const exitSideRef = useRef(side);\n  if (isOpen) {\n    exitSideRef.current = side;\n  }\n  const anchoredSide = isOpen ? side : exitSideRef.current;\n\n  const sideStyle = anchoredSide === \"start\" ? styles.start : styles.end;\n  const sideOpenStyle = anchoredSide === \"start\" ? styles.startOpen : styles.endOpen;\n\n  // Filter out native `open` to prevent InvalidStateError when passed\n  const { open: _open, ...safeProps } = props as Record<string, unknown>;\n\n  return (\n    <dialog\n      ref={mergedDialogRef}\n      {...mergeProps(\n        themeProps(\"drawer\", { side: anchoredSide }),\n        stylex.props(\n          styles.dialog,\n          overlayPaddingReset.reset,\n          sideStyle,\n          dynamicStyles.inlineSize(widthValue, mobileWidth),\n          isRendered && styles.rendered,\n          isOpen && sideOpenStyle,\n          hasScrim && styles.scrim,\n          hasScrim && isOpen && styles.scrimOpen,\n          xstyle,\n        ),\n        className,\n        // ui-common: the consumer's style may still override the stack.\n        hasScrim ? style : { zIndex: stackZ, ...style },\n      )}\n      {...safeProps}\n      aria-label={label}\n      // ui-common: scrimless by itself is non-modal, but a consumer that\n      // restores the modality by hand (a portal supplying its own mask and\n      // focus trap) must be able to say so.\n      aria-modal={\n        (safeProps[\"aria-modal\"] as React.AriaAttributes[\"aria-modal\"]) ??\n        (hasScrim ? \"true\" : undefined)\n      }\n      {...(purpose === \"required\" && hasScrim ? { role: \"alertdialog\" } : undefined)}\n      onClick={composeEventHandlers(onClickProp, handleClick)}\n      onKeyDown={onKeyDownProp}\n      onCancel={handleCancel}\n    >\n      <LayerDepthProvider>\n        {/* Scrollable content area — tabIndex so the dialog's focusing steps\n            land on the panel body rather than the first button inside. */}\n        <div\n          tabIndex={-1}\n          {...stylex.props(\n            styles.content,\n            ...container(\n              usesThemePadding\n                ? { useThemeDefault: \"drawer\" }\n                : {\n                    paddingInnerX: paddingToken,\n                    paddingInnerY: paddingToken,\n                    paddingOuterX: paddingToken,\n                    paddingOuterY: paddingToken,\n                  },\n            ),\n            !usesThemePadding &&\n              effectivePadding !== 4 &&\n              paddingStyles[effectivePadding],\n            !usesThemePadding &&\n              effectivePadding !== 4 &&\n              containerPaddingInlineVarStyles[effectivePadding],\n            !usesThemePadding &&\n              effectivePadding !== 4 &&\n              containerPaddingBlockStartVarStyles[effectivePadding],\n            !usesThemePadding &&\n              effectivePadding !== 4 &&\n              containerPaddingBlockEndVarStyles[effectivePadding],\n            styles.contentSafeArea,\n          )}\n        >\n          <ModalPortalContext value={modalHost}>{children}</ModalPortalContext>\n        </div>\n      </LayerDepthProvider>\n    </dialog>\n  );\n}\n\nDrawer.displayName = \"Drawer\";\n"],"mappings":"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"}

package/dist/forks/Drawer/Drawer.styles.d.ts

@@ -83,6 +83,22 @@ export declare const styles: {
         k5sjJv: string;
         $$css: boolean;
     };
+    content: {
+        kzQI83: string;
+        kAzted: string;
+        kzqmXN: string;
+        kORKVm: string;
+        kXHlph: string;
+        kZeWKH: string;
+        kFalU9: string;
+        kI3sdo: string;
+        kWkggS: string;
+        $$css: boolean;
+    };
+    contentSafeArea: {
+        kGO01o: string;
+        $$css: boolean;
+    };
 };
 export declare const _temp: {
     ks0D6T: string;

package/dist/forks/Drawer/Drawer.styles.js

@@ -83,6 +83,22 @@ var e = {
 	scrimOpen: {
 		k5sjJv: "xb3n6bw xxiuuzi",
 		$$css: !0
+	},
+	content: {
+		kzQI83: "x1iyjqo2",
+		kAzted: "x2lwn1j",
+		kzqmXN: "xh8yej3",
+		kORKVm: "x1odjw0f",
+		kXHlph: "x6ikm8r",
+		kZeWKH: "xish69e",
+		kFalU9: "xx69xxh",
+		kI3sdo: "x1a2a7pz",
+		kWkggS: "x10xzikg",
+		$$css: !0
+	},
+	contentSafeArea: {
+		kGO01o: "xvmia7e",
+		$$css: !0
 	}
 }, t = {
 	ks0D6T: "xlbgzzq",

package/dist/forks/Drawer/Drawer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.js","names":[],"sources":["../../../src/forks/Drawer/Drawer.styles.ts"],"sourcesContent":["/* eslint-disable */\n// @ts-nocheck\n// @generated by scripts/sync-forks.mjs. Do not edit.\n//\n// Compiled StyleX from @astryxdesign/lab 0.6.5-canary.8701623, reused by the\n// Drawer fork so it renders with upstream's own class names\n// (src/forks/compiled.ts). Copyright (c) Meta Platforms, Inc. and\n// affiliates; MIT, see NOTICE.\n\n// dist/Drawer/Drawer.js\nexport const styles = {\n  dialog: {\n    kMv6JI: \"x9ynric\",\n    kGuDYH: \"xjm74w1\",\n    k63SB2: \"xxovm9e\",\n    kLWn49: \"xw6l6zx\",\n    kKX8nH: \"x1j61x8r\",\n    k9WMMc: \"x1yc453h\",\n    kJI5tL: \"x7ssn7h\",\n    kTHuQy: \"xzugeeo\",\n    kP9fke: \"x6mezaz\",\n    kb6lSQ: \"x1i21sxh\",\n    k4JVr9: \"xp3md9m\",\n    kKMj4B: \"x19pm5ym\",\n    khDVqt: \"xeaf4i8\",\n    kTgw9: \"x1lldw8n\",\n    kHjlTd: \"x1h4wwuj\",\n    kE4Cay: \"xxydokm\",\n    kVAEAm: \"xixxii4\",\n    kogj98: \"x1ghz6dp\",\n    kmVPX3: \"x1717udv\",\n    kaIpWk: \"x2u8bby\",\n    ks0D6T: \"x1x1rfll\",\n    kskxy: \"x7ab17h\",\n    kB7OPa: \"x9f619\",\n    kXwgrk: \"xdt5ytf\",\n    kWkggS: \"x10xzikg\",\n    kGVxlE: \"x1kcpxr7\",\n    kVQacm: \"xb3r6kr\",\n    kZeWKH: \"xish69e\",\n    kI3sdo: \"x1a2a7pz\",\n    k87sOh: \"x13vifvy\",\n    krVfgx: \"x1ey2m1c\",\n    kZKoxP: \"xtdtrs8\",\n    k1xSpc: \"x1s85apg\",\n    k1ekBW: \"x11xpdln\",\n    kIyJzY: \"x80gvsz\",\n    kAMwcw: \"xlr8y92\",\n    k6CgDc: \"xzg1mie\",\n    $$css: true,\n  },\n  rendered: {\n    k1xSpc: \"x78zum5\",\n    $$css: true,\n  },\n  end: {\n    kt4wiu: \"xtijo5x\",\n    kLqNvP: \"xhi6v0a\",\n    k2ei4v: \"xgbv0en\",\n    kVhnKS: \"x1t7ytsu\",\n    kGJrpR: \"x1j92z86\",\n    k3aq6I: \"xumwmo6 x1df3fe5\",\n    $$css: true,\n  },\n  endOpen: {\n    k3aq6I: \"xbryuvx x1yqmsfc x1lymnkk\",\n    $$css: true,\n  },\n  start: {\n    kLqNvP: \"x1o0tod\",\n    kt4wiu: \"x1woyocn\",\n    ke9TFa: \"xw8tdv1\",\n    k8ry5P: \"x18b5jzi\",\n    kBCPoo: \"x1gejf6u\",\n    k3aq6I: \"x5i6ehr xttggg\",\n    $$css: true,\n  },\n  startOpen: {\n    k3aq6I: \"xbryuvx x6mt36l x14gflnl\",\n    $$css: true,\n  },\n  scrim: {\n    kGyWv1: \"xnixb3f\",\n    kba3nw: \"x1abwkk1\",\n    k5sjJv: \"xph5o2a\",\n    kND0Po: \"x167zut7\",\n    k9an0g: \"xft5bk6\",\n    kb4ib: \"x15h3t91\",\n    kA5Tbj: \"x1viac0w\",\n    $$css: true,\n  },\n  scrimOpen: {\n    k5sjJv: \"xb3n6bw xxiuuzi\",\n    $$css: true,\n  },\n};\nexport const _temp = {\n  ks0D6T: \"xlbgzzq\",\n  $$css: true,\n};\nexport const dynamicStyles = {\n  inlineSize: (desktopWidth, mobileWidth) => [\n    _temp,\n    {\n      kzqmXN:\n        (desktopWidth != null ? \"x11ymkkh \" : desktopWidth) +\n        (mobileWidth != null ? \"xci7e5a\" : mobileWidth),\n      $$css: true,\n    },\n    {\n      \"--x-1xmrurk\": ((val) =>\n        typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(\n        desktopWidth,\n      ),\n      \"--x-fqzwsx\": ((val) =>\n        typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(\n        mobileWidth,\n      ),\n    },\n  ],\n};\n"],"mappings":";AAUA,IAAa,IAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;AACF,GACa,IAAQ;CACnB,QAAQ;CACR,OAAO;AACT,GACa,IAAgB,EAC3B,aAAa,GAAc,MAAgB;CACzC;CACA;EACE,SACG,KAAgB,OAAqB,IAAd,gBACvB,KAAe,OAAmB,IAAZ;EACzB,OAAO;CACT;CACA;EACE,iBAAiB,MACf,OAAO,KAAQ,WAAW,IAAM,OAAO,KAAoB,KAAA,EAAA,CAC3D,CACF;EACA,gBAAgB,MACd,OAAO,KAAQ,WAAW,IAAM,OAAO,KAAoB,KAAA,EAAA,CAC3D,CACF;CACF;AACF,EACF"}
+{"version":3,"file":"Drawer.styles.js","names":[],"sources":["../../../src/forks/Drawer/Drawer.styles.ts"],"sourcesContent":["/* eslint-disable */\n// @ts-nocheck\n// @generated by scripts/sync-forks.mjs. Do not edit.\n//\n// Compiled StyleX from @astryxdesign/lab 0.7.0-canary.97a0d31, reused by the\n// Drawer fork so it renders with upstream's own class names\n// (src/forks/compiled.ts). Copyright (c) Meta Platforms, Inc. and\n// affiliates; MIT, see NOTICE.\n\n// dist/Drawer/Drawer.js\nexport const styles = {\n  dialog: {\n    kMv6JI: \"x9ynric\",\n    kGuDYH: \"xjm74w1\",\n    k63SB2: \"xxovm9e\",\n    kLWn49: \"xw6l6zx\",\n    kKX8nH: \"x1j61x8r\",\n    k9WMMc: \"x1yc453h\",\n    kJI5tL: \"x7ssn7h\",\n    kTHuQy: \"xzugeeo\",\n    kP9fke: \"x6mezaz\",\n    kb6lSQ: \"x1i21sxh\",\n    k4JVr9: \"xp3md9m\",\n    kKMj4B: \"x19pm5ym\",\n    khDVqt: \"xeaf4i8\",\n    kTgw9: \"x1lldw8n\",\n    kHjlTd: \"x1h4wwuj\",\n    kE4Cay: \"xxydokm\",\n    kVAEAm: \"xixxii4\",\n    kogj98: \"x1ghz6dp\",\n    kmVPX3: \"x1717udv\",\n    kaIpWk: \"x2u8bby\",\n    ks0D6T: \"x1x1rfll\",\n    kskxy: \"x7ab17h\",\n    kB7OPa: \"x9f619\",\n    kXwgrk: \"xdt5ytf\",\n    kWkggS: \"x10xzikg\",\n    kGVxlE: \"x1kcpxr7\",\n    kVQacm: \"xb3r6kr\",\n    kZeWKH: \"xish69e\",\n    kI3sdo: \"x1a2a7pz\",\n    k87sOh: \"x13vifvy\",\n    krVfgx: \"x1ey2m1c\",\n    kZKoxP: \"xtdtrs8\",\n    k1xSpc: \"x1s85apg\",\n    k1ekBW: \"x11xpdln\",\n    kIyJzY: \"x80gvsz\",\n    kAMwcw: \"xlr8y92\",\n    k6CgDc: \"xzg1mie\",\n    $$css: true,\n  },\n  rendered: {\n    k1xSpc: \"x78zum5\",\n    $$css: true,\n  },\n  end: {\n    kt4wiu: \"xtijo5x\",\n    kLqNvP: \"xhi6v0a\",\n    k2ei4v: \"xgbv0en\",\n    kVhnKS: \"x1t7ytsu\",\n    kGJrpR: \"x1j92z86\",\n    k3aq6I: \"xumwmo6 x1df3fe5\",\n    $$css: true,\n  },\n  endOpen: {\n    k3aq6I: \"xbryuvx x1yqmsfc x1lymnkk\",\n    $$css: true,\n  },\n  start: {\n    kLqNvP: \"x1o0tod\",\n    kt4wiu: \"x1woyocn\",\n    ke9TFa: \"xw8tdv1\",\n    k8ry5P: \"x18b5jzi\",\n    kBCPoo: \"x1gejf6u\",\n    k3aq6I: \"x5i6ehr xttggg\",\n    $$css: true,\n  },\n  startOpen: {\n    k3aq6I: \"xbryuvx x6mt36l x14gflnl\",\n    $$css: true,\n  },\n  scrim: {\n    kGyWv1: \"xnixb3f\",\n    kba3nw: \"x1abwkk1\",\n    k5sjJv: \"xph5o2a\",\n    kND0Po: \"x167zut7\",\n    k9an0g: \"xft5bk6\",\n    kb4ib: \"x15h3t91\",\n    kA5Tbj: \"x1viac0w\",\n    $$css: true,\n  },\n  scrimOpen: {\n    k5sjJv: \"xb3n6bw xxiuuzi\",\n    $$css: true,\n  },\n  content: {\n    kzQI83: \"x1iyjqo2\",\n    kAzted: \"x2lwn1j\",\n    kzqmXN: \"xh8yej3\",\n    kORKVm: \"x1odjw0f\",\n    kXHlph: \"x6ikm8r\",\n    kZeWKH: \"xish69e\",\n    kFalU9: \"xx69xxh\",\n    kI3sdo: \"x1a2a7pz\",\n    kWkggS: \"x10xzikg\",\n    $$css: true,\n  },\n  contentSafeArea: {\n    kGO01o: \"xvmia7e\",\n    $$css: true,\n  },\n};\nexport const _temp = {\n  ks0D6T: \"xlbgzzq\",\n  $$css: true,\n};\nexport const dynamicStyles = {\n  inlineSize: (desktopWidth, mobileWidth) => [\n    _temp,\n    {\n      kzqmXN:\n        (desktopWidth != null ? \"x11ymkkh \" : desktopWidth) +\n        (mobileWidth != null ? \"xci7e5a\" : mobileWidth),\n      $$css: true,\n    },\n    {\n      \"--x-1xmrurk\": ((val) =>\n        typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(\n        desktopWidth,\n      ),\n      \"--x-fqzwsx\": ((val) =>\n        typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(\n        mobileWidth,\n      ),\n    },\n  ],\n};\n"],"mappings":";AAUA,IAAa,IAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;AACF,GACa,IAAQ;CACnB,QAAQ;CACR,OAAO;AACT,GACa,IAAgB,EAC3B,aAAa,GAAc,MAAgB;CACzC;CACA;EACE,SACG,KAAgB,OAAqB,IAAd,gBACvB,KAAe,OAAmB,IAAZ;EACzB,OAAO;CACT;CACA;EACE,iBAAiB,MACf,OAAO,KAAQ,WAAW,IAAM,OAAO,KAAoB,KAAA,EAAA,CAC3D,CACF;EACA,gBAAgB,MACd,OAAO,KAAQ,WAAW,IAAM,OAAO,KAAoB,KAAA,EAAA,CAC3D,CACF;CACF;AACF,EACF"}