feature: add large breakpoint

Author: lorant-one

src/once-ui/components/Flex.tsx

@@ -302,4 +302,4 @@ const Flex = forwardRef<HTMLDivElement, ComponentProps>(
 );
 
 Flex.displayName = "Flex";
-export { Flex };
+export { Flex };

src/once-ui/interfaces.ts

@@ -133,8 +133,8 @@ export interface StyleProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export interface ConditionalProps extends HTMLAttributes<HTMLDivElement> {
-  hide?: "s" | "m";
-  show?: "s" | "m";
+  hide?: "s" | "m" | "l";
+  show?: "s" | "m" | "l";
 }
 
 export interface DisplayProps extends HTMLAttributes<HTMLDivElement> {

src/once-ui/styles/layout.scss

@@ -26,6 +26,10 @@
     flex-direction: row-reverse;
 }
 
+.l-flex-show {
+    display: none;
+}
+
 .m-flex-show {
     display: none;
 }
@@ -34,6 +38,32 @@
     display: none;
 }
 
+@media (--l) {
+    .l-flex-hide {
+        display: none !important;
+    }
+
+    .l-flex-show {
+        display: flex !important;
+    }
+
+    .l-flex-column {
+        flex-direction: column !important;
+    }
+
+    .l-flex-row {
+        flex-direction: row !important;
+    }
+
+    .l-flex-column-reverse {
+        flex-direction: column-reverse !important;
+    }
+    
+    .l-flex-row-reverse {
+        flex-direction: row-reverse !important;
+    }
+}
+
 @media (--m) {
     .m-flex-hide {
         display: none !important;