@astryxdesign/core 0.2.0-canary.c366298 → 0.2.0-canary.c75407e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,6 +8,13 @@
8
8
  * Provides the scroll container ref and content ref, renders the
9
9
  * scroll-to-bottom button, frosted glass dock, and message area.
10
10
  *
11
+ * Layout contract: the root is a flex column. The message area flexes
12
+ * (grow 1, shrink 0) to fill the space the dock doesn't need; the sticky
13
+ * dock keeps its natural height in flow. Short content therefore fills
14
+ * exactly 100% with no overflow, and long content grows past the root so
15
+ * self-scroll mode scrolls (#2573). In external-scrollRef mode the dock
16
+ * is position: fixed (out of flow) and the message area fills the root.
17
+ *
11
18
  * Density (compact/balanced/spacious) is controlled via a prop with
12
19
  * 'balanced' as the default. No JS measurement or ResizeObserver needed.
13
20
  * The container-type on root enables container queries in child components.
@@ -1 +1 @@
1
- {"version":3,"file":"ChatLayout.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAa5C,KAAK,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAEhC;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA8JD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,QAAQ,EACR,OAAoB,EACpB,UAAU,EACV,YAAY,EACZ,SAAS,EAAE,iBAAiB,EAC5B,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA4GjB;yBAzHe,UAAU"}
1
+ {"version":3,"file":"ChatLayout.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAa5C,KAAK,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAEhC;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA4KD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,QAAQ,EACR,OAAoB,EACpB,UAAU,EACV,YAAY,EACZ,SAAS,EAAE,iBAAiB,EAC5B,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA4GjB;yBAzHe,UAAU"}
@@ -12,6 +12,13 @@
12
12
  * Provides the scroll container ref and content ref, renders the
13
13
  * scroll-to-bottom button, frosted glass dock, and message area.
14
14
  *
15
+ * Layout contract: the root is a flex column. The message area flexes
16
+ * (grow 1, shrink 0) to fill the space the dock doesn't need; the sticky
17
+ * dock keeps its natural height in flow. Short content therefore fills
18
+ * exactly 100% with no overflow, and long content grows past the root so
19
+ * self-scroll mode scrolls (#2573). In external-scrollRef mode the dock
20
+ * is position: fixed (out of flow) and the message area fills the root.
21
+ *
15
22
  * Density (compact/balanced/spacious) is controlled via a prop with
16
23
  * 'balanced' as the default. No JS measurement or ResizeObserver needed.
17
24
  * The container-type on root enables container queries in child components.
@@ -47,6 +54,8 @@ const styles = {
47
54
  k9g6sI: "x12h1iku",
48
55
  kAzted: "x2lwn1j",
49
56
  kUk6DE: "x98rzlu",
57
+ k1xSpc: "x78zum5",
58
+ kXwgrk: "xdt5ytf",
50
59
  $$css: true
51
60
  },
52
61
  rootScrollable: {
@@ -59,7 +68,9 @@ const styles = {
59
68
  k1xSpc: "x78zum5",
60
69
  kXwgrk: "xdt5ytf",
61
70
  kUOVxO: "xvueqy4",
62
- kAzted: "x1us19tq",
71
+ kzQI83: "x1iyjqo2",
72
+ kmuXW: "x2lah0s",
73
+ kCS8Yb: "xdl72j9",
63
74
  kGO01o: "xjpqqx5",
64
75
  kzqmXN: "xh8yej3",
65
76
  ks0D6T: "x193iq5w",
@@ -258,10 +269,10 @@ export function ChatLayout({
258
269
  }), /*#__PURE__*/_jsxs("div", {
259
270
  ...{
260
271
  0: {
261
- className: "x1ey2m1c x1o0tod xtijo5x x1ja2u2z xc8icb0 x47corl xixxii4"
272
+ className: "x1ey2m1c x1o0tod xtijo5x x1ja2u2z xc8icb0 x47corl x2lah0s xixxii4"
262
273
  },
263
274
  1: {
264
- className: "x1ey2m1c x1o0tod xtijo5x x1ja2u2z xc8icb0 x47corl x7wzq59"
275
+ className: "x1ey2m1c x1o0tod xtijo5x x1ja2u2z xc8icb0 x47corl x2lah0s x7wzq59"
265
276
  }
266
277
  }[!!isSelfScrolling << 0],
267
278
  children: [scrollButton === undefined ? defaultScrollButton : scrollButton, /*#__PURE__*/_jsx("div", {
@@ -1 +1 @@
1
- {"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCA4Uf;yBA5Ve,QAAQ"}
1
+ {"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAwVf;yBAxWe,QAAQ"}
@@ -136,6 +136,7 @@ export function Lightbox({
136
136
  }) {
137
137
  const t = useTranslator();
138
138
  const dialogRef = useRef(null);
139
+ const containerRef = useRef(null);
139
140
  const imageWrapperRef = useRef(null);
140
141
  const triggerElementRef = useRef(null);
141
142
 
@@ -237,9 +238,18 @@ export function Lightbox({
237
238
  handleClose();
238
239
  }, [handleClose]);
239
240
 
240
- // Backdrop click
241
+ // Backdrop click. The layout container fills the whole transparent dialog,
242
+ // so clicks on the visual backdrop (the dark area around the media) land on
243
+ // the container, never on the dialog element itself — treat both as the
244
+ // backdrop. A pan drag that ends over the backdrop still fires a click on
245
+ // the common ancestor; ignore it so releasing a drag doesn't dismiss.
246
+ const didDragRef = useRef(false);
241
247
  const handleBackdropClick = useCallback(e => {
242
- if (e.target === e.currentTarget) {
248
+ if (didDragRef.current) {
249
+ didDragRef.current = false;
250
+ return;
251
+ }
252
+ if (e.target === e.currentTarget || e.target === containerRef.current) {
243
253
  handleClose();
244
254
  }
245
255
  }, [handleClose]);
@@ -293,6 +303,7 @@ export function Lightbox({
293
303
  return;
294
304
  }
295
305
  setIsDragging(true);
306
+ didDragRef.current = false;
296
307
  dragStartRef.current = {
297
308
  x: e.clientX,
298
309
  y: e.clientY,
@@ -305,6 +316,7 @@ export function Lightbox({
305
316
  return;
306
317
  }
307
318
  const handlePointerMove = e => {
319
+ didDragRef.current = true;
308
320
  const dx = e.clientX - dragStartRef.current.x;
309
321
  const dy = e.clientY - dragStartRef.current.y;
310
322
  setPan({
@@ -342,6 +354,7 @@ export function Lightbox({
342
354
  ...mergeProps(themeProps('lightbox'), stylex.props(styles.dialog, xstyle), className, style),
343
355
  ...props,
344
356
  children: /*#__PURE__*/_jsxs("div", {
357
+ ref: containerRef,
345
358
  ...{
346
359
  className: "x78zum5 xdt5ytf x6s0dn4 xl56j7k xh8yej3 x5yr21d x1n2onr6"
347
360
  },
@@ -49,6 +49,17 @@ export interface UseTableTreeDataConfig<T extends Record<string, unknown>> {
49
49
  indent?: 'sm' | 'md' | 'lg';
50
50
  /** Column that carries the indent + expander. @default the first column */
51
51
  treeColumnKey?: string;
52
+ /**
53
+ * When true, clicking anywhere on an expandable row toggles its expansion,
54
+ * in addition to the chevron. Leaf rows stay inert. No-op on flat data.
55
+ *
56
+ * This is a pointer-only convenience layered over the chevron: keyboard and
57
+ * assistive-tech users toggle via the chevron button (which stays the
58
+ * accessible control). Clicks originating from interactive cell content
59
+ * (buttons, links, form controls) or a text selection do not toggle.
60
+ * @default false (only the chevron toggles expansion).
61
+ */
62
+ hasRowClickExpansion?: boolean;
52
63
  }
53
64
  export declare function useTableTreeData<T extends Record<string, unknown>>(config: UseTableTreeDataConfig<T>): TablePlugin<T>;
54
65
  //# sourceMappingURL=useTableTreeData.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useTableTreeData.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/tree/useTableTreeData.tsx"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EACV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAOrB,8DAA8D;AAC9D,MAAM,WAAW,gBAAgB;IAC/B,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACvE,qEAAqE;IACrE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,gBAAgB,GAAG,SAAS,CAAC;IACtD,gCAAgC;IAChC,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,iBAAiB,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAC1C,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5B,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA+TD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,WAAW,CAAC,CAAC,CAAC,CAoMhB"}
1
+ {"version":3,"file":"useTableTreeData.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/tree/useTableTreeData.tsx"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EACV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAOrB,8DAA8D;AAC9D,MAAM,WAAW,gBAAgB;IAC/B,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACvE,qEAAqE;IACrE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,gBAAgB,GAAG,SAAS,CAAC;IACtD,gCAAgC;IAChC,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,iBAAiB,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAC1C,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5B,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;OASG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAmUD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,WAAW,CAAC,CAAC,CAAC,CA0OhB"}
@@ -140,7 +140,11 @@ const treeStyles = {
140
140
  $$css: true
141
141
  }, {
142
142
  "--x-paddingInlineStart": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(paddingInlineStart)
143
- }]
143
+ }],
144
+ clickableRow: {
145
+ kkrTdU: "x1ypdohk",
146
+ $$css: true
147
+ }
144
148
  };
145
149
 
146
150
  // =============================================================================
@@ -441,10 +445,40 @@ export function useTableTreeData(config) {
441
445
  unsub();
442
446
  };
443
447
  };
444
- return {
448
+ const withRef = {
445
449
  ...props,
446
450
  ref: props.ref ? mergeRefs(props.ref, treeRef) : treeRef
447
451
  };
452
+
453
+ // Whole-row-click expansion (opt-in). Only expandable rows are
454
+ // clickable; leaves and flat data stay inert. `hasExpandableRows` is
455
+ // the feature-level flag (short-circuits the whole feature when off);
456
+ // `hasChildren` is the per-row check — both are intentional.
457
+ const cfg = store.getConfig();
458
+ const rowClickExpandable = cfg.hasRowClickExpansion === true && cfg.hasExpandableRows && cfg.getRowMeta(item)?.hasChildren === true;
459
+ if (!rowClickExpandable) {
460
+ return withRef;
461
+ }
462
+ return {
463
+ ...withRef,
464
+ htmlProps: {
465
+ ...withRef.htmlProps,
466
+ onClick: event => {
467
+ // Don't hijack clicks on interactive cell content (the chevron
468
+ // already stops propagation, but a composed selection checkbox,
469
+ // link, or action button does not) or a text selection.
470
+ const target = event.target;
471
+ if (target.closest('button, a, input, select, textarea, [role="button"], [role="checkbox"], [contenteditable="true"]')) {
472
+ return;
473
+ }
474
+ if ((window.getSelection()?.toString() ?? '') !== '') {
475
+ return;
476
+ }
477
+ cfg.onToggleItem(item);
478
+ }
479
+ },
480
+ xstyle: [...withRef.xstyle, treeStyles.clickableRow]
481
+ };
448
482
  }
449
483
  };
450
484
  }, [store]);
package/dist/astryx.css CHANGED
@@ -725,6 +725,7 @@
725
725
  .x1r8uery:not(#\#):not(#\#):not(#\#){flex-basis:0}
726
726
  .xjpgo6f:not(#\#):not(#\#):not(#\#){flex-basis:200px}
727
727
  .xchdapg:not(#\#):not(#\#):not(#\#){flex-basis:300px}
728
+ .xdl72j9:not(#\#):not(#\#):not(#\#){flex-basis:auto}
728
729
  .x3ieub6:not(#\#):not(#\#):not(#\#){flex-direction:column-reverse}
729
730
  .xdt5ytf:not(#\#):not(#\#):not(#\#){flex-direction:column}
730
731
  .x15zctf7:not(#\#):not(#\#):not(#\#){flex-direction:row-reverse}