diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap index 8e7cd5aa4f45..c0e3d91a1384 100644 --- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap +++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap @@ -160,6 +160,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -219,6 +220,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -307,6 +309,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -366,6 +369,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap index e57bf2a7375e..0e6854cbdb80 100644 --- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap +++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap @@ -201,6 +201,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -260,6 +261,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -371,6 +373,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -430,6 +433,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -836,6 +840,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -895,6 +900,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -1150,6 +1156,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -1209,6 +1216,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -1319,6 +1327,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -1378,6 +1387,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -1488,6 +1498,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -1547,6 +1558,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -1657,6 +1669,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -1716,6 +1729,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -1931,6 +1945,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -1990,6 +2005,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -2101,6 +2117,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -2160,6 +2177,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -2377,6 +2395,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -2436,6 +2455,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -2650,6 +2670,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -2709,6 +2730,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -2820,6 +2842,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -2879,6 +2902,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -2970,6 +2994,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -3029,6 +3054,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -3261,6 +3287,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -3320,6 +3347,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -3431,6 +3459,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -3490,6 +3519,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -3808,6 +3838,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -3867,6 +3898,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -4151,6 +4183,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -4210,6 +4243,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -4349,6 +4383,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -4408,6 +4443,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -4513,6 +4549,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -4572,6 +4609,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -4711,6 +4749,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -4770,6 +4809,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -4875,6 +4915,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -4934,6 +4975,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -5073,6 +5115,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -5132,6 +5175,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -5237,6 +5281,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -5296,6 +5341,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -5579,6 +5625,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -5638,6 +5685,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -5749,6 +5797,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -5808,6 +5857,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -6347,6 +6397,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -6406,6 +6457,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -6911,6 +6963,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -6970,6 +7023,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -7315,6 +7369,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -7374,6 +7429,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -7685,6 +7741,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -7744,6 +7801,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -7903,6 +7961,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -7962,6 +8021,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -8087,6 +8147,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -8146,6 +8207,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -8305,6 +8367,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -8364,6 +8427,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -8489,6 +8553,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -8548,6 +8613,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -8707,6 +8773,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -8766,6 +8833,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -8891,6 +8959,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -8950,6 +9019,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -9295,6 +9365,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -9354,6 +9425,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -9665,6 +9737,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -9724,6 +9797,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -9883,6 +9957,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -9942,6 +10017,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -10067,6 +10143,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -10126,6 +10203,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -10285,6 +10363,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -10344,6 +10423,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -10469,6 +10549,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -10528,6 +10609,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -10687,6 +10769,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -10746,6 +10829,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -10871,6 +10955,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -10930,6 +11015,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -11275,6 +11361,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -11334,6 +11421,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -11645,6 +11733,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -11704,6 +11793,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -11863,6 +11953,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -11922,6 +12013,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -12047,6 +12139,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -12106,6 +12199,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -12265,6 +12359,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -12324,6 +12419,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -12449,6 +12545,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -12508,6 +12605,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -12667,6 +12765,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -12726,6 +12825,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -12851,6 +12951,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -12910,6 +13011,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -13136,6 +13238,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -13195,6 +13298,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -13306,6 +13410,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -13365,6 +13470,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -13517,6 +13623,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -13576,6 +13683,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -13668,6 +13776,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -13727,6 +13836,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -13819,6 +13929,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -13878,6 +13989,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -14092,6 +14204,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -14151,6 +14264,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -14262,6 +14376,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -14321,6 +14436,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -14525,6 +14641,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -14584,6 +14701,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -14816,6 +14934,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -14875,6 +14994,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -14986,6 +15106,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -15045,6 +15166,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -15380,6 +15502,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -15439,6 +15562,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -15739,6 +15863,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -15798,6 +15923,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -15957,6 +16083,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -16016,6 +16143,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -16175,6 +16303,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -16234,6 +16363,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -16393,6 +16523,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -16452,6 +16583,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -16684,6 +16816,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -16743,6 +16876,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -16854,6 +16988,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -16913,6 +17048,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -17248,6 +17384,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -17307,6 +17444,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -17607,6 +17745,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -17666,6 +17805,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -17825,6 +17965,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -17884,6 +18025,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -18043,6 +18185,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -18102,6 +18245,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -18261,6 +18405,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -18320,6 +18465,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -18546,6 +18692,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -18605,6 +18752,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -18716,6 +18864,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -18775,6 +18924,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -18927,6 +19077,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -18986,6 +19137,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -19078,6 +19230,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -19137,6 +19290,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -19229,6 +19383,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -19288,6 +19443,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -19514,6 +19670,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -19573,6 +19730,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -19684,6 +19842,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -19743,6 +19902,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -20000,6 +20160,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -20059,6 +20220,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -20282,6 +20444,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -20341,6 +20504,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -20434,6 +20598,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -20493,6 +20658,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -20586,6 +20752,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -20645,6 +20812,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -20887,6 +21055,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -20946,6 +21115,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -21072,6 +21242,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -21131,6 +21302,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -21536,6 +21708,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -21595,6 +21768,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -21819,6 +21993,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -21878,6 +22053,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -22119,6 +22295,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -22178,6 +22355,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -22304,6 +22482,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -22363,6 +22542,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -22768,6 +22948,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -22827,6 +23008,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -23051,6 +23233,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -23110,6 +23293,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -23352,6 +23536,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -23411,6 +23596,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -23537,6 +23723,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -23596,6 +23783,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -24052,6 +24240,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -24111,6 +24300,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -24386,6 +24576,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -24445,6 +24636,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -24687,6 +24879,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -24746,6 +24939,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -24872,6 +25066,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -24931,6 +25126,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -25387,6 +25583,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -25446,6 +25643,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -25721,6 +25919,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -25780,6 +25979,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -25993,6 +26193,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -26052,6 +26253,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -26163,6 +26365,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -26222,6 +26425,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -26313,6 +26517,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -26372,6 +26577,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -26708,6 +26914,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -26767,6 +26974,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -26878,6 +27086,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -26937,6 +27146,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -28806,6 +29016,7 @@ export var storyboard = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -28865,6 +29076,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -30280,6 +30492,7 @@ export var storyboard = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -30339,6 +30552,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -31720,6 +31934,7 @@ export var storyboard = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -31779,6 +31994,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -32342,6 +32558,7 @@ export var storyboard = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -32401,6 +32618,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -32692,6 +32910,7 @@ export var storyboard = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -32751,6 +32970,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -33314,6 +33534,7 @@ export var storyboard = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -33373,6 +33594,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -33664,6 +33886,7 @@ export var storyboard = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -33723,6 +33946,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -34286,6 +34510,7 @@ export var storyboard = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -34345,6 +34570,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -34636,6 +34862,7 @@ export var storyboard = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -34695,6 +34922,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -35296,6 +35524,7 @@ export var storyboard = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -35355,6 +35584,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -35688,6 +35918,7 @@ export var storyboard = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -35747,6 +35978,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -36348,6 +36580,7 @@ export var storyboard = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -36407,6 +36640,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -36740,6 +36974,7 @@ export var storyboard = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -36799,6 +37034,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -37400,6 +37636,7 @@ export var storyboard = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -37459,6 +37696,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -37792,6 +38030,7 @@ export var storyboard = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -37851,6 +38090,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -38087,6 +38327,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -38146,6 +38387,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -38257,6 +38499,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -38316,6 +38559,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -38502,6 +38746,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -38561,6 +38806,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -38670,6 +38916,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -38729,6 +38976,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -38838,6 +39086,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -38897,6 +39146,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -39112,6 +39362,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -39171,6 +39422,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -39282,6 +39534,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -39341,6 +39594,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -39499,6 +39753,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -39558,6 +39813,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -39772,6 +40028,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -39831,6 +40088,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -39942,6 +40200,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -40001,6 +40260,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -40263,6 +40523,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -40322,6 +40583,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -40582,6 +40844,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -40641,6 +40904,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -40752,6 +41016,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -40811,6 +41076,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -41030,6 +41296,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -41089,6 +41356,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -41257,6 +41525,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -41316,6 +41585,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -41433,6 +41703,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -41492,6 +41763,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -41734,6 +42006,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -41793,6 +42066,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -41919,6 +42193,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -41978,6 +42253,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -42274,6 +42550,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -42333,6 +42610,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -42451,6 +42729,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -42510,6 +42789,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -42905,6 +43185,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -42964,6 +43245,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -43090,6 +43372,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -43149,6 +43432,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -43447,6 +43731,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -43506,6 +43791,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -43624,6 +43910,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -43683,6 +43970,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -44009,6 +44297,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -44068,6 +44357,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -44178,6 +44468,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -44237,6 +44528,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -44972,6 +45264,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -45031,6 +45324,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -45124,6 +45418,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -45183,6 +45478,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -45276,6 +45572,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -45335,6 +45632,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -45428,6 +45726,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -45487,6 +45786,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -45582,6 +45882,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -45641,6 +45942,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -45734,6 +46036,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -45793,6 +46096,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -45886,6 +46190,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -45945,6 +46250,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -46038,6 +46344,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -46097,6 +46404,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -46258,6 +46566,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -46317,6 +46626,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -46439,6 +46749,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -46498,6 +46809,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -46593,6 +46905,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -46652,6 +46965,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -46745,6 +47059,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -46804,6 +47119,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -46897,6 +47213,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -46956,6 +47273,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -47049,6 +47367,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -47108,6 +47427,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -47201,6 +47521,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -47260,6 +47581,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -47353,6 +47675,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -47412,6 +47735,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -47505,6 +47829,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -47564,6 +47889,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -47657,6 +47983,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -47716,6 +48043,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -47809,6 +48137,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -47868,6 +48197,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -47961,6 +48291,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -48020,6 +48351,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -48113,6 +48445,7 @@ export var App = (props) => { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -48172,6 +48505,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -48404,6 +48738,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -48463,6 +48798,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -48574,6 +48910,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -48633,6 +48970,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -48968,6 +49306,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -49027,6 +49366,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -49327,6 +49667,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -49386,6 +49727,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -49545,6 +49887,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -49604,6 +49947,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -49763,6 +50107,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -49822,6 +50167,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -49981,6 +50327,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -50040,6 +50387,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -50272,6 +50620,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -50331,6 +50680,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -50442,6 +50792,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -50501,6 +50852,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -50835,6 +51187,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -50894,6 +51247,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -51193,6 +51547,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -51252,6 +51607,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -51411,6 +51767,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -51470,6 +51827,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -51629,6 +51987,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -51688,6 +52047,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -51847,6 +52207,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -51906,6 +52267,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -52138,6 +52500,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -52197,6 +52560,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -52308,6 +52672,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -52367,6 +52732,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -52745,6 +53111,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -52804,6 +53171,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -53147,6 +53515,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -53206,6 +53575,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -53365,6 +53735,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -53424,6 +53795,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -53583,6 +53955,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -53642,6 +54015,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -53801,6 +54175,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -53860,6 +54235,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -54098,6 +54474,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -54157,6 +54534,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -54283,6 +54661,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -54342,6 +54721,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -54547,6 +54927,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -54606,6 +54987,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -54724,6 +55106,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -54783,6 +55166,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -54999,6 +55383,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -55058,6 +55443,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -55146,6 +55532,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -55205,6 +55592,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -55341,6 +55729,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -55400,6 +55789,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -55498,6 +55888,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -55557,6 +55948,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -55655,6 +56047,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -55714,6 +56107,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -55917,6 +56311,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -55976,6 +56371,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -56064,6 +56460,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -56123,6 +56520,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -56317,6 +56715,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -56376,6 +56775,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -56512,6 +56912,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -56571,6 +56972,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -56670,6 +57072,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -56729,6 +57132,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -56920,6 +57324,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -56979,6 +57384,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -57067,6 +57473,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -57126,6 +57533,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -57330,6 +57738,7 @@ export var storyboard = ( "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -57389,6 +57798,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -57502,6 +57912,7 @@ export var storyboard = ( "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -57561,6 +57972,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -57752,6 +58164,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -57811,6 +58224,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -57899,6 +58313,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -57958,6 +58373,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -58049,6 +58465,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -58108,6 +58525,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -58307,6 +58725,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -58366,6 +58785,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -58454,6 +58874,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -58513,6 +58934,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -58682,6 +59104,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -58741,6 +59164,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -58859,6 +59283,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -58918,6 +59343,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -59111,6 +59537,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -59170,6 +59597,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -59258,6 +59686,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -59317,6 +59746,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -59583,6 +60013,7 @@ export var storyboard = ( "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -59642,6 +60073,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -59774,6 +60206,7 @@ export var storyboard = ( "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -59833,6 +60266,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -59965,6 +60399,7 @@ export var storyboard = ( "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -60024,6 +60459,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -60216,6 +60652,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -60275,6 +60712,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -60363,6 +60801,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -60422,6 +60861,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -60530,6 +60970,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -60589,6 +61030,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -60826,6 +61268,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -60885,6 +61328,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -60996,6 +61440,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -61055,6 +61500,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -61503,6 +61949,7 @@ export var storyboard = ( "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -61562,6 +62009,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -61660,6 +62108,7 @@ export var storyboard = ( "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -61719,6 +62168,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -61931,6 +62381,7 @@ export var storyboard = ( "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -61990,6 +62441,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -62200,6 +62652,7 @@ export var storyboard = ( "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -62259,6 +62712,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -62393,6 +62847,7 @@ export var storyboard = ( "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -62452,6 +62907,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -62584,6 +63040,7 @@ export var storyboard = ( "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -62643,6 +63100,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -62862,6 +63320,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -62921,6 +63380,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -63032,6 +63492,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -63091,6 +63552,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -63231,6 +63693,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -63290,6 +63753,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -63399,6 +63863,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -63458,6 +63923,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -63675,6 +64141,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -63734,6 +64201,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -63845,6 +64313,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -63904,6 +64373,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -63995,6 +64465,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -64054,6 +64525,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -64301,6 +64773,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -64360,6 +64833,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -64471,6 +64945,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -64530,6 +65005,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -64890,6 +65366,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -64949,6 +65426,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -65274,6 +65752,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -65333,6 +65812,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -65506,6 +65986,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -65565,6 +66046,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -65708,6 +66190,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -65767,6 +66250,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -65876,6 +66360,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -65935,6 +66420,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -66108,6 +66594,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -66167,6 +66654,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -66310,6 +66798,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -66369,6 +66858,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -66478,6 +66968,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -66537,6 +67028,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -66710,6 +67202,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -66769,6 +67262,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -66912,6 +67406,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -66971,6 +67466,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -67080,6 +67576,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -67139,6 +67636,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -67355,6 +67853,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -67414,6 +67913,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -67525,6 +68025,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -67584,6 +68085,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -67675,6 +68177,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -67734,6 +68237,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -67960,6 +68464,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -68019,6 +68524,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -68130,6 +68636,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -68189,6 +68696,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -68348,6 +68856,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -68407,6 +68916,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -68536,6 +69046,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -68595,6 +69106,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, @@ -68694,6 +69206,7 @@ Object { "specialSizeMeasurements": Object { "alignContent": null, "alignItems": null, + "alignSelf": null, "borderRadius": null, "clientHeight": 0, "clientWidth": 0, @@ -68753,6 +69266,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, + "justifySelf": null, "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts index 475ff3c1295c..50c273f01bb7 100644 --- a/editor/src/components/canvas/dom-walker.ts +++ b/editor/src/components/canvas/dom-walker.ts @@ -68,7 +68,12 @@ import { fastForEach } from '../../core/shared/utils' import type { EditorState, EditorStorePatched } from '../editor/store/editor-state' import { shallowEqual } from '../../core/shared/equality-utils' import { pick } from '../../core/shared/object-utils' -import { getFlexAlignment, getFlexJustifyContent, MaxContent } from '../inspector/inspector-common' +import { + getFlexAlignment, + getFlexJustifyContent, + getSelfAlignment, + MaxContent, +} from '../inspector/inspector-common' import type { EditorDispatch } from '../editor/action-types' import { runDOMWalker } from '../editor/actions/action-creators' import { CanvasContainerOuterId } from './canvas-component-entry' @@ -684,6 +689,8 @@ function getSpecialMeasurements( const justifyContent = getFlexJustifyContent(elementStyle.justifyContent) const alignContent = getFlexJustifyContent(elementStyle.alignContent) const alignItems = getFlexAlignment(elementStyle.alignItems) + const alignSelf = getSelfAlignment(elementStyle.alignSelf) + const justifySelf = getSelfAlignment(elementStyle.justifySelf) const margin = applicative4Either( applicativeSidesPxTransform, @@ -901,6 +908,8 @@ function getSpecialMeasurements( containerElementPropertiesFromProps, rowGap, columnGap, + justifySelf, + alignSelf, ) } diff --git a/editor/src/components/editor/action-types.ts b/editor/src/components/editor/action-types.ts index 54ac5bcb998c..9ad3c9a4ac96 100644 --- a/editor/src/components/editor/action-types.ts +++ b/editor/src/components/editor/action-types.ts @@ -86,6 +86,7 @@ import type { Bounds } from 'utopia-vscode-common' import type { Optic } from '../../core/shared/optics/optics' import { makeOptic } from '../../core/shared/optics/optics' import type { ElementPathTrees } from '../../core/shared/element-path-tree' +import { assertNever } from '../../core/shared/utils' export { isLoggedIn, loggedInUser, notLoggedIn } from '../../common/user' export type { LoginState, UserDetails } from '../../common/user' @@ -1472,3 +1473,22 @@ export const usingDispatch = ( export type Alignment = 'left' | 'hcenter' | 'right' | 'top' | 'vcenter' | 'bottom' export type Distribution = 'horizontal' | 'vertical' + +export function isAlignment( + alignmentOrDistribution: Alignment | Distribution, +): alignmentOrDistribution is Alignment { + switch (alignmentOrDistribution) { + case 'bottom': + case 'hcenter': + case 'left': + case 'right': + case 'top': + case 'vcenter': + return true + case 'horizontal': + case 'vertical': + return false + default: + assertNever(alignmentOrDistribution) + } +} diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx index d2fe43d86b6f..a1c4cea4ef20 100644 --- a/editor/src/components/editor/actions/actions.tsx +++ b/editor/src/components/editor/actions/actions.tsx @@ -350,7 +350,7 @@ import type { UpdateMetadataInEditorState, SetErrorBoundaryHandling, } from '../action-types' -import { isLoggedIn } from '../action-types' +import { isAlignment, isLoggedIn } from '../action-types' import type { Mode } from '../editor-modes' import { isCommentMode, isFollowMode, isTextEditMode } from '../editor-modes' import { EditorModes, isLiveMode, isSelectMode } from '../editor-modes' @@ -624,6 +624,7 @@ import { getDefaultedRemixRootDir, getRemixRootDir } from '../store/remix-derive import { isReplaceKeepChildrenAndStyleTarget } from '../../navigator/navigator-item/component-picker-context-menu' import { canCondenseJSXElementChild } from '../../../utils/can-condense' import { getNavigatorTargetsFromEditorState } from '../../navigator/navigator-utils' +import { applyValuesAtPath } from '../../canvas/commands/adjust-number-command' export const MIN_CODE_PANE_REOPEN_WIDTH = 100 @@ -6180,59 +6181,32 @@ export function alignOrDistributeSelectedViews( .map(trueUpGroupElementChanged), ] - if (selectedViews.length > 0) { - // this array of canvasFrames excludes the non-layoutables. it means in a multiselect, they will not be considered - const canvasFrames: Array<{ - target: ElementPath - frame: CanvasRectangle - }> = Utils.stripNulls( - selectedViews.map((target) => { - const instanceGlobalFrame = MetadataUtils.getFrameInCanvasCoords(target, editor.jsxMetadata) - if (instanceGlobalFrame == null || isInfinityRectangle(instanceGlobalFrame)) { - return null - } else { - return { - target: target, - frame: instanceGlobalFrame, - } - } - }), - ) + let workingEditorState = { ...editor } - if (canvasFrames.length > 0) { - const parentPath = EP.parentPath(selectedViews[0]) - const sourceIsParent = selectedViews.length === 1 && parentPath != null - let source: CanvasRectangle - if (sourceIsParent) { - const parentFrame = MetadataUtils.getFrameInCanvasCoords(parentPath, editor.jsxMetadata) + const targetAlignment = isAlignment(alignmentOrDistribution) + if (targetAlignment) { + workingEditorState = alignFlexOrGridChildren( + workingEditorState, + selectedViews.filter((v) => + MetadataUtils.isFlexOrGridChild(workingEditorState.jsxMetadata, v), + ), + alignmentOrDistribution, + ) + } - // if the parent frame is null, that means we probably ran into some error state, - // as it means the child's globalFrame should also be null, so we shouldn't be in this branch - const maybeSource = Utils.forceNotNull( - `found no parent global frame for ${EP.toComponentId(parentPath!)}`, - parentFrame, - ) + workingEditorState = alignFlowChildren( + workingEditorState, + selectedViews.filter( + (v) => + !targetAlignment || !MetadataUtils.isFlexOrGridChild(workingEditorState.jsxMetadata, v), + ), + alignmentOrDistribution, + ) - // If the parent frame is infinite, fall back to using the selected element's frame - source = isInfinityRectangle(maybeSource) ? canvasFrames[0].frame : maybeSource - } else { - source = Utils.boundingRectangleArray(Utils.pluck(canvasFrames, 'frame'))! // I know this can't be null because we checked the canvasFrames array is non-empty - } - const updatedCanvasFrames = alignOrDistributeCanvasRects( - editor.jsxMetadata, - canvasFrames, - source, - alignmentOrDistribution, - sourceIsParent, - ) - return { - ...setCanvasFramesInnerNew(editor, updatedCanvasFrames, null), - trueUpElementsAfterDomWalkerRuns: groupTrueUps, - } - } + return { + ...workingEditorState, + trueUpElementsAfterDomWalkerRuns: groupTrueUps, } - - return editor } function alignOrDistributeCanvasRects( @@ -6342,8 +6316,7 @@ function alignOrDistributeCanvasRects( break } default: - const _exhaustiveCheck: never = alignmentOrDistribution - throw new Error('Something went really wrong.') + assertNever(alignmentOrDistribution) } return results @@ -6607,3 +6580,109 @@ function removeErrorMessagesForFile(editor: EditorState, filename: string): Edit ), ) } + +function alignFlexOrGridChildren(editor: EditorState, views: ElementPath[], alignment: Alignment) { + let workingEditorState = { ...editor } + for (const view of views) { + function apply(prop: 'alignSelf' | 'justifySelf', value: string) { + return applyValuesAtPath(workingEditorState, view, [ + { path: PP.create('style', prop), value: jsExpressionValue(value, emptyComments) }, + ]).editorStateWithChanges + } + + const { align, justify } = MetadataUtils.getRelativeAlignJustify( + workingEditorState.jsxMetadata, + view, + ) + + switch (alignment) { + case 'bottom': + workingEditorState = apply(align, 'end') + break + case 'top': + workingEditorState = apply(align, 'start') + break + case 'vcenter': + workingEditorState = apply(align, 'center') + break + case 'hcenter': + workingEditorState = apply(justify, 'center') + break + case 'left': + workingEditorState = apply(justify, 'start') + break + case 'right': + workingEditorState = apply(justify, 'end') + break + default: + assertNever(alignment) + } + } + return workingEditorState +} + +function alignFlowChildren( + editor: EditorState, + views: ElementPath[], + alignmentOrDistribution: Alignment | Distribution, +) { + let workingEditorState = { ...editor } + + if (views.length > 0) { + // this array of canvasFrames excludes the non-layoutables. it means in a multiselect, they will not be considered + const canvasFrames: Array<{ + target: ElementPath + frame: CanvasRectangle + }> = Utils.stripNulls( + views.map((target) => { + const instanceGlobalFrame = MetadataUtils.getFrameInCanvasCoords( + target, + workingEditorState.jsxMetadata, + ) + if (instanceGlobalFrame == null || isInfinityRectangle(instanceGlobalFrame)) { + return null + } else { + return { + target: target, + frame: instanceGlobalFrame, + } + } + }), + ) + + if (canvasFrames.length > 0) { + const parentPath = EP.parentPath(views[0]) + const sourceIsParent = views.length === 1 && parentPath != null + let source: CanvasRectangle + if (sourceIsParent) { + const parentFrame = MetadataUtils.getFrameInCanvasCoords( + parentPath, + workingEditorState.jsxMetadata, + ) + + // if the parent frame is null, that means we probably ran into some error state, + // as it means the child's globalFrame should also be null, so we shouldn't be in this branch + const maybeSource = Utils.forceNotNull( + `found no parent global frame for ${EP.toComponentId(parentPath!)}`, + parentFrame, + ) + + // If the parent frame is infinite, fall back to using the selected element's frame + source = isInfinityRectangle(maybeSource) ? canvasFrames[0].frame : maybeSource + } else { + source = Utils.boundingRectangleArray(Utils.pluck(canvasFrames, 'frame'))! // I know this can't be null because we checked the canvasFrames array is non-empty + } + const updatedCanvasFrames = alignOrDistributeCanvasRects( + workingEditorState.jsxMetadata, + canvasFrames, + source, + alignmentOrDistribution, + sourceIsParent, + ) + workingEditorState = { + ...setCanvasFramesInnerNew(workingEditorState, updatedCanvasFrames, null), + } + } + } + return workingEditorState +} diff --git a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts index 30b51566aba5..cd020e303e72 100644 --- a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts +++ b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts @@ -322,6 +322,8 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => { }, rowGap: null, columnGap: null, + justifySelf: null, + alignSelf: null, } const newDifferentValue: SpecialSizeMeasurements = { @@ -441,6 +443,8 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => { }, rowGap: null, columnGap: null, + justifySelf: null, + alignSelf: null, } it('same reference returns the same reference', () => { @@ -615,6 +619,8 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => { }, rowGap: null, columnGap: null, + justifySelf: null, + alignSelf: null, }, computedStyle: { a: 'a', @@ -766,6 +772,8 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => { }, rowGap: null, columnGap: null, + justifySelf: null, + alignSelf: null, }, computedStyle: { a: 'a', @@ -942,6 +950,8 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => { }, rowGap: null, columnGap: null, + justifySelf: null, + alignSelf: null, }, computedStyle: { a: 'a', @@ -1095,6 +1105,8 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => { }, rowGap: null, columnGap: null, + justifySelf: null, + alignSelf: null, }, computedStyle: { a: 'a', @@ -1248,6 +1260,8 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => { }, rowGap: null, columnGap: null, + justifySelf: null, + alignSelf: null, }, computedStyle: { a: 'a', diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts index 805fe41df090..f379de57390f 100644 --- a/editor/src/components/editor/store/store-deep-equality-instances.ts +++ b/editor/src/components/editor/store/store-deep-equality-instances.ts @@ -2263,6 +2263,9 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall< newSize.columnGap, ).areEqual + const justifySelfEquals = oldSize.justifySelf === newSize.justifySelf + const alignSelfEquals = oldSize.alignSelf === newSize.alignSelf + const areEqual = offsetResult.areEqual && coordinateSystemBoundsResult.areEqual && @@ -2310,7 +2313,9 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall< gridContainerPropertiesFromPropsEqual && gridElementPropertiesFromPropsEqual && rowGapEquals && - columnGapEquals + columnGapEquals && + justifySelfEquals && + alignSelfEquals if (areEqual) { return keepDeepEqualityResult(oldSize, true) } else { @@ -2363,6 +2368,8 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall< newSize.elementGridPropertiesFromProps, newSize.rowGap, newSize.columnGap, + newSize.justifySelf, + newSize.alignSelf, ) return keepDeepEqualityResult(sizeMeasurements, false) } diff --git a/editor/src/components/inspector/alignment-buttons.tsx b/editor/src/components/inspector/alignment-buttons.tsx new file mode 100644 index 000000000000..e34735130ae2 --- /dev/null +++ b/editor/src/components/inspector/alignment-buttons.tsx @@ -0,0 +1,379 @@ +/** @jsxRuntime classic */ +/** @jsx jsx */ +import { jsx } from '@emotion/react' +import React from 'react' +import { MetadataUtils } from '../../core/model/element-metadata-utils' +import { mapDropNulls } from '../../core/shared/array-utils' +import * as EP from '../../core/shared/element-path' +import { zeroRectangle, zeroRectIfNullOrInfinity } from '../../core/shared/math-utils' +import * as PP from '../../core/shared/property-path' +import { assertNever } from '../../core/shared/utils' +import { Button, Icn, Icons } from '../../uuiui' +import type { DropdownMenuItem } from '../../uuiui/radix-components' +import { + DropdownMenu, + regularDropdownMenuItem, + separatorDropdownMenuItem, +} from '../../uuiui/radix-components' +import type { Alignment, Distribution, EditorAction } from '../editor/action-types' +import { + alignSelectedViews, + distributeSelectedViews, + unsetProperty, +} from '../editor/actions/action-creators' +import { useDispatch } from '../editor/store/dispatch-context' +import { Substores, useEditorState, useRefEditorState } from '../editor/store/store-hook' +import { getControlStyles } from './common/control-styles' +import { OptionChainControl } from './controls/option-chain-control' +import { UIGridRow } from './widgets/ui-grid-row' + +type ActiveAlignments = { [key in Alignment]: boolean } + +export const AlignmentButtons = React.memo(() => { + const dispatch = useDispatch() + + const selectedViews = useRefEditorState((store) => store.editor.selectedViews) + + const disableAlign = selectedViews.current.length === 0 + const disableDistribute = selectedViews.current.length < 3 + + const activeAlignments = useActiveAlignments() + const hasActiveAlignments = React.useMemo(() => { + return ( + activeAlignments.bottom || + activeAlignments.left || + activeAlignments.right || + activeAlignments.vcenter || + activeAlignments.hcenter || + activeAlignments.top + ) + }, [activeAlignments]) + + const getUnsetAlignmentsActions = useGetUnsetAlignmentsActions(activeAlignments) + + const unsetAllAlignments = React.useCallback(() => { + const actions = getUnsetAlignmentsActions().map((a) => a.action) + dispatch(actions) + }, [dispatch, getUnsetAlignmentsActions]) + + const distributeSelected = React.useCallback( + (distribution: Distribution) => { + dispatch([distributeSelectedViews(distribution)], 'everyone') + }, + [dispatch], + ) + + const distributeHorizontal = React.useCallback( + () => distributeSelected('horizontal'), + [distributeSelected], + ) + + const distributeVertical = React.useCallback( + () => distributeSelected('vertical'), + [distributeSelected], + ) + + const dropdownOpener = React.useCallback(() => { + return ( + + ) + }, []) + + const alignSelected = React.useCallback( + (alignment: Alignment) => { + if (activeAlignments[alignment]) { + const unsetAlignment = getUnsetAlignmentsActions() + .filter((a) => a.alignments.includes(alignment)) + .map((a) => a.action) + dispatch(unsetAlignment) + } else { + dispatch([alignSelectedViews(alignment)], 'everyone') + } + }, + [dispatch, activeAlignments, getUnsetAlignmentsActions], + ) + + const dropdownItems = React.useMemo(() => { + let items: DropdownMenuItem[] = [] + + if (hasActiveAlignments) { + items.push( + regularDropdownMenuItem({ + id: 'unset', + label: 'Unset', + onSelect: unsetAllAlignments, + }), + separatorDropdownMenuItem('sep'), + ) + } + + items.push( + regularDropdownMenuItem({ + id: 'distribute-horizontal', + label: 'Distribute Horizontal', + onSelect: distributeHorizontal, + disabled: disableDistribute, + icon: ( + + ), + }), + regularDropdownMenuItem({ + id: 'distribute-vertical', + label: 'Distribute Vertical', + onSelect: distributeVertical, + disabled: disableDistribute, + icon: ( + + ), + }), + ) + + return items + }, [ + disableDistribute, + distributeHorizontal, + distributeVertical, + hasActiveAlignments, + unsetAllAlignments, + ]) + + const chainValueJustify = React.useMemo(() => { + return activeAlignments.left + ? 'left' + : activeAlignments.hcenter + ? 'hcenter' + : activeAlignments.right + ? 'right' + : null + }, [activeAlignments]) + + const chainValueAlign = React.useMemo(() => { + return activeAlignments.top + ? 'top' + : activeAlignments.vcenter + ? 'vcenter' + : activeAlignments.bottom + ? 'bottom' + : null + }, [activeAlignments]) + + return ( + + + + + + + ) +}) +AlignmentButtons.displayName = 'AlignmentButtons' + +function useActiveAlignments(): ActiveAlignments { + const selectedViews = useRefEditorState((store) => store.editor.selectedViews) + + const jsxMetadata = useEditorState( + Substores.metadata, + (store) => store.editor.jsxMetadata, + 'useActiveAlignments jsxMetadata', + ) + + const isActive = React.useCallback( + (alignment: Alignment) => { + if (selectedViews.current.length === 0) { + return false + } + return selectedViews.current.every((view) => { + const isFlexOrGridChild = MetadataUtils.isFlexOrGridChild(jsxMetadata, view) + const { align, justify } = MetadataUtils.getRelativeAlignJustify(jsxMetadata, view) + + const meta = MetadataUtils.findElementByElementPath(jsxMetadata, view) + if (meta == null) { + return false + } + + const parent = MetadataUtils.findElementByElementPath(jsxMetadata, EP.parentPath(view)) + const parentFrame = + parent != null ? zeroRectIfNullOrInfinity(parent.globalFrame) : zeroRectangle + + switch (alignment) { + case 'top': + return isFlexOrGridChild + ? meta.specialSizeMeasurements[align] === 'flex-start' || + meta.specialSizeMeasurements[align] === 'start' + : meta.specialSizeMeasurements.offset.y === 0 + case 'bottom': + return isFlexOrGridChild + ? meta.specialSizeMeasurements[align] === 'flex-end' || + meta.specialSizeMeasurements[align] === 'end' + : parent != null && + meta.specialSizeMeasurements.offset.y === + parentFrame.height - meta.specialSizeMeasurements.clientHeight + case 'vcenter': + return isFlexOrGridChild + ? meta.specialSizeMeasurements[align] === 'center' + : parent != null && + meta.specialSizeMeasurements.offset.y === + Math.ceil( + parentFrame.height / 2 - meta.specialSizeMeasurements.clientHeight / 2, + ) + case 'left': + return isFlexOrGridChild + ? meta.specialSizeMeasurements[justify] === 'flex-start' || + meta.specialSizeMeasurements[justify] === 'start' + : meta.specialSizeMeasurements.offset.x === 0 + case 'right': + return isFlexOrGridChild + ? meta.specialSizeMeasurements[justify] === 'flex-end' || + meta.specialSizeMeasurements[justify] === 'end' + : parent != null && + meta.specialSizeMeasurements.offset.x === + parentFrame.width - meta.specialSizeMeasurements.clientWidth + case 'hcenter': + return isFlexOrGridChild + ? meta.specialSizeMeasurements[justify] === 'center' + : parent != null && + meta.specialSizeMeasurements.offset.x === + Math.ceil(parentFrame.width / 2 - meta.specialSizeMeasurements.clientWidth / 2) + default: + assertNever(alignment) + return false + } + }) + }, + [jsxMetadata, selectedViews], + ) + + return React.useMemo(() => { + return { + left: isActive('left'), + hcenter: isActive('hcenter'), + right: isActive('right'), + top: isActive('top'), + vcenter: isActive('vcenter'), + bottom: isActive('bottom'), + } + }, [isActive]) +} + +type UnsetAlignment = { + alignments: Alignment[] + action: EditorAction +} + +function useGetUnsetAlignmentsActions(activeAlignments: ActiveAlignments) { + const selectedViews = useRefEditorState((store) => store.editor.selectedViews) + + const jsxMetadata = useEditorState( + Substores.metadata, + (store) => store.editor.jsxMetadata, + 'useGetUnsetAlignmentsActions jsxMetadata', + ) + + return React.useCallback((): UnsetAlignment[] => { + const activeAlignmentsList = Object.entries(activeAlignments).reduce((acc, [key, set]) => { + if (set) { + return acc.concat(key as Alignment) + } + return acc + }, [] as Alignment[]) + + return mapDropNulls((path) => { + let actions: UnsetAlignment[] = [] + + const isFlexOrGridChild = MetadataUtils.isFlexOrGridChild(jsxMetadata, path) + const { align, justify } = MetadataUtils.getRelativeAlignJustify(jsxMetadata, path) + + if (activeAlignments.left || activeAlignments.hcenter || activeAlignments.right) { + const alignments: Alignment[] = activeAlignmentsList.filter( + (alignment) => alignment === 'left' || alignment === 'hcenter' || alignment === 'right', + ) + actions.push({ + action: unsetProperty(path, PP.create('style', isFlexOrGridChild ? justify : 'left')), + alignments: alignments, + }) + } + + if (activeAlignments.top || activeAlignments.vcenter || activeAlignments.bottom) { + const alignments: Alignment[] = activeAlignmentsList.filter( + (alignment) => alignment === 'top' || alignment === 'vcenter' || alignment === 'bottom', + ) + actions.push({ + action: unsetProperty(path, PP.create('style', isFlexOrGridChild ? align : 'top')), + alignments: alignments, + }) + } + + return actions + }, selectedViews.current).flat() + }, [activeAlignments, selectedViews, jsxMetadata]) +} diff --git a/editor/src/components/inspector/controls/option-chain-control.tsx b/editor/src/components/inspector/controls/option-chain-control.tsx index cdcf1b84b9fa..a0000f4fb299 100644 --- a/editor/src/components/inspector/controls/option-chain-control.tsx +++ b/editor/src/components/inspector/controls/option-chain-control.tsx @@ -16,6 +16,7 @@ export interface OptionChainOption { label?: string tooltip?: string forceCallOnSubmitValue?: boolean // Call the onSubmitValue again even when the control is already on that value + disabled?: boolean } export function getOptionControlTestId(testIdPrefix: string, postfix: string): string { @@ -93,6 +94,9 @@ export const OptionChainControl: React.FunctionComponent< value={props.value === option.value} // eslint-disable-next-line react/jsx-no-bind onSubmitValue={(isChecked: boolean) => { + if (option.disabled === true) { + return + } if (isChecked || option.forceCallOnSubmitValue) { props.onSubmitValue(option.value) } else { diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts index 8718b4106c3f..e51e2fecd4fd 100644 --- a/editor/src/components/inspector/inspector-common.ts +++ b/editor/src/components/inspector/inspector-common.ts @@ -101,6 +101,7 @@ export function getFlexJustifyContent(value: string | null): FlexJustifyContent } export type FlexAlignment = StartCenterEnd | 'auto' | 'stretch' +export type SelfAlignment = FlexAlignment | 'end' | 'start' export function getFlexAlignment(value: string | null): FlexAlignment | null { switch (value) { @@ -119,6 +120,17 @@ export function getFlexAlignment(value: string | null): FlexAlignment | null { } } +export function getSelfAlignment(value: string | null): SelfAlignment | null { + switch (value) { + case 'end': + return 'end' + case 'start': + return 'start' + default: + return getFlexAlignment(value) + } +} + function stringToFlexDirection(str: string | null): FlexDirection | null { switch (str) { case 'row': diff --git a/editor/src/components/inspector/inspector.tsx b/editor/src/components/inspector/inspector.tsx index ead15872c320..e4ea5d8d688c 100644 --- a/editor/src/components/inspector/inspector.tsx +++ b/editor/src/components/inspector/inspector.tsx @@ -14,15 +14,9 @@ import * as PP from '../../core/shared/property-path' import * as EP from '../../core/shared/element-path' import Utils from '../../utils/utils' import { setFocus } from '../common/actions' -import type { Alignment, Distribution, EditorAction } from '../editor/action-types' +import type { EditorAction } from '../editor/action-types' import * as EditorActions from '../editor/actions/action-creators' -import { - alignSelectedViews, - distributeSelectedViews, - setProp_UNSAFE, - transientActions, - unsetProperty, -} from '../editor/actions/action-creators' +import { setProp_UNSAFE, transientActions, unsetProperty } from '../editor/actions/action-creators' import type { ElementsToRerender } from '../editor/store/editor-state' import { @@ -51,7 +45,6 @@ import { useKeepReferenceEqualityIfPossible, useKeepShallowReferenceEquality, } from '../../utils/react-performance' -import { Icn, useColorTheme, UtopiaTheme, FlexRow, Button, SquareButton } from '../../uuiui' import { getElementsToTarget } from './common/inspector-utils' import type { ElementPath, PropertyPath } from '../../core/shared/project-file-types' import { unless, when } from '../../utils/react-conditionals' @@ -112,128 +105,6 @@ export interface InspectorProps extends TargetSelectorSectionProps { selectedViews: Array } -interface AlignDistributeButtonProps { - onMouseUp: () => void - toolTip: string - iconType: string - disabled: boolean -} - -const AlignDistributeButton = React.memo( - (props: AlignDistributeButtonProps) => { - return ( - - - - ) - }, -) -AlignDistributeButton.displayName = 'AlignDistributeButton' - -const AlignmentButtons = React.memo((props: { numberOfTargets: number }) => { - const colorTheme = useColorTheme() - const dispatch = useDispatch() - const alignSelected = React.useCallback( - (alignment: Alignment) => { - dispatch([alignSelectedViews(alignment)], 'everyone') - }, - [dispatch], - ) - - const distributeSelected = React.useCallback( - (distribution: Distribution) => { - dispatch([distributeSelectedViews(distribution)], 'everyone') - }, - [dispatch], - ) - const disableAlign = props.numberOfTargets === 0 - const disableDistribute = props.numberOfTargets < 3 - const multipleTargets = props.numberOfTargets > 1 - - const alignLeft = React.useCallback(() => alignSelected('left'), [alignSelected]) - const alignHCenter = React.useCallback(() => alignSelected('hcenter'), [alignSelected]) - const alignRight = React.useCallback(() => alignSelected('right'), [alignSelected]) - const alignTop = React.useCallback(() => alignSelected('top'), [alignSelected]) - const alignVCenter = React.useCallback(() => alignSelected('vcenter'), [alignSelected]) - const alignBottom = React.useCallback(() => alignSelected('bottom'), [alignSelected]) - const distributeHorizontal = React.useCallback( - () => distributeSelected('horizontal'), - [distributeSelected], - ) - const distributeVertical = React.useCallback( - () => distributeSelected('vertical'), - [distributeSelected], - ) - - return ( - - - - - - - - - - - ) -}) -AlignmentButtons.displayName = 'AlignmentButtons' - function buildNonDefaultPositionPaths(propertyTarget: Array): Array { return [ stylePropPathMappingFn('right', propertyTarget), @@ -415,7 +286,6 @@ export const Inspector = React.memo((props: InspectorProps) => { const shouldShowStyleSectionContents = styleSectionOpen && !shouldHideInspectorSections const shouldShowAdvancedSectionContents = advancedSectionOpen && !shouldHideInspectorSections - const shouldShowAlignmentButtons = !isCodeElement && inspectorPreferences.includes('layout') const shouldShowClassNameSubsection = isTwindEnabled() && inspectorPreferences.includes('visual') const shouldShowTargetSelectorSection = canEdit && inspectorPreferences.includes('visual') const shouldShowFlexSection = @@ -475,14 +345,7 @@ export const Inspector = React.memo((props: InspectorProps) => { paddingBottom: 50, }} > - {rootElementIsSelected ? ( - - ) : ( - when( - shouldShowAlignmentButtons, - , - ) - )} + {when(rootElementIsSelected, )} {anyComponents || multiselectedContract === 'fragment' ? ( ) : null} diff --git a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx index 0c729df8b904..794b24cbe1d9 100644 --- a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx +++ b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx @@ -93,8 +93,6 @@ interface LTWHPixelValues { export const FrameUpdatingLayoutSection = React.memo(() => { const dispatch = useDispatch() const metadataRef = useRefEditorState(metadataSelector) - const allElementsPropsRef = useRefEditorState((store) => store.editor.allElementProps) - const pathTreesRef = useRefEditorState((store) => store.editor.elementPathTree) const selectedViewsRef = useRefEditorState(selectedViewsSelector) const projectContentsRef = useRefEditorState((store) => store.editor.projectContents) const originalGlobalFrame: CanvasRectangle = useEditorState( @@ -292,14 +290,14 @@ export const FrameUpdatingLayoutSection = React.memo(() => { { const selectedElementContract = useEditorState( @@ -33,6 +30,32 @@ export const SimplifiedLayoutSubsection = React.memo(() => { const showWrapperSectionWarning = selectedElementContract === 'wrapper-div' + const isCodeElement = useEditorState( + Substores.metadata, + (store) => + store.editor.selectedViews.length > 0 && + store.editor.selectedViews.every( + (path) => + MetadataUtils.isConditional(path, store.editor.jsxMetadata) || + MetadataUtils.isExpressionOtherJavascript(path, store.editor.jsxMetadata) || + MetadataUtils.isJSXMapExpression(path, store.editor.jsxMetadata), + ), + 'SimplifiedLayoutSubsection isCodeElement', + ) + + const inspectorPreferences = useEditorState( + Substores.propertyControlsInfo, + (store) => + getInspectorPreferencesForTargets( + store.editor.selectedViews, + store.editor.propertyControlsInfo, + store.editor.projectContents, + ), + 'SimplifiedLayoutSubsection inspectorPreferences', + ) + + const shouldShowAlignmentButtons = !isCodeElement && inspectorPreferences.includes('layout') + return ( { {when( showLayoutSection, <> + {when(shouldShowAlignmentButtons, )} diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts index af022ad5a6e8..fb5587eb39d7 100644 --- a/editor/src/core/model/element-metadata-utils.ts +++ b/editor/src/core/model/element-metadata-utils.ts @@ -630,6 +630,24 @@ export const MetadataUtils = { MetadataUtils.getFlexDirection(instance), ) }, + isFlexOrGridChild: function (jsxMetadata: ElementInstanceMetadataMap, path: ElementPath) { + return ( + MetadataUtils.isFlexLayoutedContainer( + MetadataUtils.findElementByElementPath(jsxMetadata, EP.parentPath(path)), + ) || MetadataUtils.isGridCell(jsxMetadata, path) + ) + }, + getRelativeAlignJustify: function ( + jsxMetadata: ElementInstanceMetadataMap, + path: ElementPath, + ): { align: 'alignSelf' | 'justifySelf'; justify: 'alignSelf' | 'justifySelf' } { + const direction = MetadataUtils.getSimpleFlexDirection( + MetadataUtils.findElementByElementPath(jsxMetadata, EP.parentPath(path)), + ) + const align = direction.direction === 'horizontal' ? 'alignSelf' : 'justifySelf' + const justify = direction.direction === 'horizontal' ? 'justifySelf' : 'alignSelf' + return { align, justify } + }, flexDirectionToSimpleFlexDirection: function (flexDirection: FlexDirection): { direction: Direction forwardOrReverse: ForwardOrReverse diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap index 911b3ef6a132..0dc742581b14 100644 --- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap +++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap @@ -112,7 +112,7 @@ Array [ "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(AlignmentButtons)", + "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedFunctionComponent(RootElementIndicator)", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedClass(ComponentSection)", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedFunctionComponent(InspectorSectionHeader)", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(FragmentSection)", @@ -278,6 +278,133 @@ Array [ "/div/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)", "/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))", "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'", + "/label/div/Icon/img", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'", + "/label/div/Icon/img", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled(div))", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(DropdownMenuTrigger)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-vertical'", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled.DropdownMenuContent)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenuPortal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenu)", + "/Symbol(react.forward_ref)(Primitive.button)/button/Symbol(react.forward_ref)(Styled(div))/div", "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())", "/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)", "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)", @@ -772,7 +899,7 @@ Array [ "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(AlignmentButtons)", + "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedFunctionComponent(RootElementIndicator)", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedClass(ComponentSection)", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedFunctionComponent(InspectorSectionHeader)", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(FragmentSection)", @@ -877,6 +1004,133 @@ Array [ "/div/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)", "/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))", "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'", + "/label/div/Icon/img", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'", + "/label/div/Icon/img", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled(div))", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(DropdownMenuTrigger)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-vertical'", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled.DropdownMenuContent)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenuPortal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenu)", + "/Symbol(react.forward_ref)(Primitive.button)/button/Symbol(react.forward_ref)(Styled(div))/div", "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())", "/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)", "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)", @@ -1640,6 +1894,133 @@ Array [ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)", "/div/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)/UtopiaSpiedFunctionComponent($)", "/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)/UtopiaSpiedFunctionComponent($)/UtopiaSpiedExoticType(Symbol(react.provider))", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'", + "/label/div/Icon/img", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'", + "/label/div/Icon/img", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled(div))", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(DropdownMenuTrigger)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-vertical'", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled.DropdownMenuContent)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenuPortal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenu)", + "/Symbol(react.forward_ref)(Primitive.button)/button/Symbol(react.forward_ref)(Styled(div))/div", "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())", "/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)", "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)", @@ -2562,6 +2943,133 @@ Array [ "/UtopiaSpiedExoticType(Symbol(react.fragment))/PropertyControlsSection/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)", "/PropertyControlsSection/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div", "/div/div/Symbol(react.forward_ref)(Styled(span))/span", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()", + "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'", + "/label/div/Icon/img", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'", + "/label/div/Icon/img", + "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)", + "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div", + "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'", + "/label/div/Icon/img", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled(div))", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(DropdownMenuTrigger)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-vertical'", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled.DropdownMenuContent)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenuPortal)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenu)", + "/Symbol(react.forward_ref)(Primitive.button)/button/Symbol(react.forward_ref)(Styled(div))/div", "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())", "/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)", "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)", diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx index 3c487db99578..b5f21e06e6c8 100644 --- a/editor/src/core/performance/performance-regression-tests.spec.tsx +++ b/editor/src/core/performance/performance-regression-tests.spec.tsx @@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`737`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`864`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) @@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`989`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1116`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) @@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`530`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`657`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) @@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => { const renderCountAfter = renderResult.getNumberOfRenders() // if this breaks, GREAT NEWS but update the test please :) - expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`655`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`782`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) }) diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts index 63442cce8e72..f0c68e7b10f1 100644 --- a/editor/src/core/shared/element-template.ts +++ b/editor/src/core/shared/element-template.ts @@ -34,7 +34,11 @@ import { firstLetterIsLowerCase } from './string-utils' import { intrinsicHTMLElementNamesAsStrings } from './dom-utils' import type { MapLike } from 'typescript' import { forceNotNull } from './optional-utils' -import type { FlexAlignment, FlexJustifyContent } from '../../components/inspector/inspector-common' +import type { + FlexAlignment, + FlexJustifyContent, + SelfAlignment, +} from '../../components/inspector/inspector-common' import { allComments } from './utopia-flags' import type { Optic } from './optics/optics' import { fromField } from './optics/optic-creators' @@ -2812,6 +2816,8 @@ export interface SpecialSizeMeasurements { justifyContent: FlexJustifyContent | null alignContent: FlexJustifyContent | null alignItems: FlexAlignment | null + alignSelf: SelfAlignment | null + justifySelf: SelfAlignment | null htmlElementName: string renderedChildrenCount: number globalContentBoxForChildren: MaybeInfinityCanvasRectangle | null @@ -2882,6 +2888,8 @@ export function specialSizeMeasurements( elementGridPropertiesFromProps: GridElementProperties, rowGap: number | null, columnGap: number | null, + justifySelf: SelfAlignment | null, + alignSelf: SelfAlignment | null, ): SpecialSizeMeasurements { return { offset, @@ -2932,6 +2940,8 @@ export function specialSizeMeasurements( elementGridPropertiesFromProps, rowGap, columnGap, + justifySelf, + alignSelf, } } @@ -3009,6 +3019,8 @@ export const emptySpecialSizeMeasurements = specialSizeMeasurements( }, null, null, + null, + null, ) export function walkElement( diff --git a/editor/src/uuiui/radix-components.tsx b/editor/src/uuiui/radix-components.tsx index 1e5e446bd83d..4d1192f407b0 100644 --- a/editor/src/uuiui/radix-components.tsx +++ b/editor/src/uuiui/radix-components.tsx @@ -151,6 +151,7 @@ export const DropdownMenu = React.memo((props) => { key={item.id} onSelect={item.onSelect} css={{ + opacity: item.disabled ? 0.5 : 1, ':hover': { backgroundColor: item.danger ? colorTheme.errorForeground.value