✨ feat(flex.scss): Add flex grow/shrink util classes

dist/cirrus.css

@@ -13662,6 +13662,54 @@ a.tag:hover {
     align-items: baseline !important;
   }
 }
+.u-flex-grow-0 {
+  flex-grow: 0 !important;
+}
+
+.u-flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+@media screen and (min-width: 640px) {
+  .u-flex-grow-0-sm {
+    flex-grow: 0 !important;
+  }
+}
+@media screen and (min-width: 640px) {
+  .u-flex-grow-1-sm {
+    flex-grow: 1 !important;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-flex-grow-0-md {
+    flex-grow: 0 !important;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-flex-grow-1-md {
+    flex-grow: 1 !important;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-flex-grow-0-lg {
+    flex-grow: 0 !important;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-flex-grow-1-lg {
+    flex-grow: 1 !important;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-flex-grow-0-xl {
+    flex-grow: 0 !important;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-flex-grow-1-xl {
+    flex-grow: 1 !important;
+  }
+}
 .u-gap-0 {
   gap: calc(0.5rem * 0) !important;
 }

src/core/utils/flex.scss

@@ -7,6 +7,8 @@ $justify-content: flex-start, center, flex-end, space-between, space-around, spa
 
 $align-items: stretch, flex-start, center, flex-end, baseline;
 
+$flex-grow: 0, 1;
+
 @include generate-classes-for-viewport(
     $flex-directions,
     'flex-direction',
@@ -26,6 +28,14 @@ $align-items: stretch, flex-start, center, flex-end, baseline;
     $generate-viewports: #{get-viewport-flag('FLEX')}
 );
 
+// Flex grow/shrink utils
+@include generate-classes-for-viewport(
+    $flex-grow,
+    'flex-grow',
+    'u#{delimitize('flex-grow')}',
+    $generate-viewports: #{get-viewport-flag('FLEX')}
+);
+
 // Generate flex gap class map
 $flex-gaps-both: ();
 // TODO: Consider if we need to generate for row and col only