From d08bc4f4f0031e10047a991140feb0e4a3b18c3d Mon Sep 17 00:00:00 2001
From: mariaeilertsen <maria.eilertsen@fremtind.no>
Date: Fri, 1 Nov 2024 14:35:03 +0100
Subject: [PATCH 01/14] fix: flex component

---
 packages/jokul/src/components/flex/Flex.tsx   | 199 ++++++++++++------
 .../flex/documentation/FlexExample.tsx        |  43 ++--
 .../utilities/polymorphism/polymorphism.ts    |  37 +++-
 3 files changed, 182 insertions(+), 97 deletions(-)

diff --git a/packages/jokul/src/components/flex/Flex.tsx b/packages/jokul/src/components/flex/Flex.tsx
index fb05216eee1..2110cc4752a 100644
--- a/packages/jokul/src/components/flex/Flex.tsx
+++ b/packages/jokul/src/components/flex/Flex.tsx
@@ -1,70 +1,147 @@
-import React, { type CSSProperties } from "react";
-import tokens from "../../core/tokens.js";
-import { AsChildProps } from "../../utilities/polymorphism/as-child.js";
-import {
-    PolymorphicPropsWithRef,
-    PolymorphicRef,
-} from "../../utilities/polymorphism/polymorphism.js";
-import { SlotComponent } from "../../utilities/polymorphism/SlotComponent.js";
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+import { Expand, PolymorphicComponentPropWithRef, PolymorphicRef } from "../../utilities/polymorphism/polymorphism";
 
-export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
-export type GapValue = Exclude<keyof (typeof tokens)["spacing"], 0>;
+type Size = 1 | 2 | 3 | 4 | 6 | 4.8 | 8.4 | 2.1 | 10.2 | 3.9 | 9.3 | 5.7 | 7.5;
+type Center = "md" | "lg" | "xl" | "xxl" | boolean;
+type Layout = Expand<"auto" | Size | `${Size}`[][number] | "2.10">;
+type Gap =
+    | "none"
+    | "xs"
+    | "sm"
+    | "md"
+    | "lg"
+    | "xl"
+    | "xxl"
+    | "xxl xl"
+    | "xxl lg"
+    | "xxl md"
+    | "xxl sm"
+    | "xxl xs"
+    | "xl none"
+    | "xl xxl"
+    | "xl lg"
+    | "xl md"
+    | "xl sm"
+    | "xl xs"
+    | "xl none"
+    | "lg xxl"
+    | "lg xl"
+    | "lg md"
+    | "lg sm"
+    | "lg xs"
+    | "lg none"
+    | "md xxl"
+    | "md xl"
+    | "md lg"
+    | "md sm"
+    | "md xs"
+    | "md none"
+    | "sm xxl"
+    | "sm xl"
+    | "sm lg"
+    | "sm md"
+    | "sm xs"
+    | "sm none"
+    | "xs xxl"
+    | "xs xl"
+    | "xs lg"
+    | "xs md"
+    | "xs sm"
+    | "xs none"
+    | "none xxl"
+    | "none xl"
+    | "none lg"
+    | "none md"
+    | "none sm"
+    | "none xs";
 
-export type FlexProps<ElementType extends React.ElementType> =
-    PolymorphicPropsWithRef<
-        ElementType,
-        {
-            direction?: FlexDirection;
-            wrap?: boolean;
-            gap?: GapValue;
-            colGap?: GapValue;
-            rowGap?: GapValue;
-        } & Pick<
-            CSSProperties,
-            "alignContent" | "alignItems" | "justifyContent" | "justifyItems"
-        >
-    >;
+type FlexBaseProps = {
+    align?: "normal" | "start" | "center" | "end" | "baseline" | "stretch";
+    alignContent?:
+        | "normal"
+        | "start"
+        | "center"
+        | "end"
+        | "stretch"
+        | "baseline"
+        | "space-between"
+        | "space-around"
+        | "space-evenly";
+    center?: Center;
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    fill?: boolean;
+    gap?: Gap | { xs?: Gap; sm?: Gap; md?: Gap; lg?: Gap; xl?: Gap; xxl?: Gap };
+    inline?: boolean;
+    text?: "left" | "right" | "center";
+    justify?: "normal" | "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+    layout?:
+        | Layout
+        | {
+              xs?: Layout;
+              sm?: Layout;
+              md?: Layout;
+              lg?: Layout;
+              xl?: Layout;
+              xxl?: Layout;
+          };
+    wrap?: "wrap" | "nowrap" | "reverse";
+};
 
-export type FlexComponent = <ElementType extends React.ElementType = "div">(
-    props: FlexProps<ElementType> & AsChildProps,
-) => React.ReactElement | null;
+export type FlexProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As, FlexBaseProps>;
 
-export const Flex = React.forwardRef(function Flex<
-    ElementType extends React.ElementType = "div",
->(props: FlexProps<ElementType>, ref?: PolymorphicRef<ElementType>) {
-    const {
-        asChild,
-        as = "div",
-        alignContent,
-        alignItems,
-        children,
-        colGap,
-        direction,
-        gap,
-        justifyContent,
-        justifyItems,
-        rowGap,
-        wrap = false,
-        ...rest
-    } = props;
-    const Component = asChild ? SlotComponent : as;
+type FlexComponent = <As extends React.ElementType = "div">(props: FlexProps<As>) => JSX.Element;
 
-    const flexStyle: CSSProperties = {
-        display: "flex",
-        flexDirection: direction,
+export const Flex: FlexComponent = forwardRef(function Flex<As extends React.ElementType = "div">(
+    {
+        align,
         alignContent,
-        alignItems,
-        justifyContent,
-        justifyItems,
-        ...(wrap ? { flexWrap: "wrap" } : {}),
-        ...(gap ? { gap: tokens.spacing[gap] } : {}),
-        ...(colGap ? { columnGap: tokens.spacing[colGap] } : {}),
-        ...(rowGap ? { rowGap: tokens.spacing[rowGap] } : {}),
-    };
+        as,
+        center = false,
+        className,
+        direction = "row",
+        fill,
+        gap = "md",
+        inline,
+        justify,
+        layout = {},
+        text,
+        wrap = "wrap",
+        ...rest
+    }: FlexProps<As>,
+    ref?: PolymorphicRef<As>,
+) {
+    const Tag = as || "div";
+    const gaps = toObj(gap).flatMap(([breakpoint, gap]) => {
+        const [row, col = row] = gap.trim().split(" ");
+        return [`${breakpoint}-row-gap-${row}`, `${breakpoint}-col-gap-${col}`];
+    });
+    const layouts = toObj(layout).map(
+        ([breakpoint, layout]) => `${breakpoint}-${Number(`${layout}`.replace("auto", "0"))}`, // Convert to number to convert 2.10 to 2.1 and false to 0
+    );
 
     return (
-        <Component ref={ref} {...rest} style={{ ...flexStyle, ...rest.style }}>
-            {children}
-        </Component>
+        <Tag
+            {...rest}
+            className={clsx(
+                "jkl-flex",
+                !align || `align-${align}`,
+                !alignContent || `align-content-${alignContent}`,
+                !center || `center-${center === true ? "xxl" : center}`,
+                !fill || "fill",
+                !inline || "inline",
+                !justify || `justify-${justify}`,
+                !text || `text-${text}`,
+                !wrap || `wrap-${wrap}`,
+                "flex",
+                "direction",
+                ...gaps,
+                ...layouts,
+                className,
+            )}
+            ref={ref}
+        />
     );
-}) as FlexComponent;
+}) as FlexComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element
+
+const toObj = (value: string | number | object) => Object.entries(typeof value === "object" ? value : { xs: value });
diff --git a/packages/jokul/src/components/flex/documentation/FlexExample.tsx b/packages/jokul/src/components/flex/documentation/FlexExample.tsx
index b9f0e1859a6..e7608771d04 100644
--- a/packages/jokul/src/components/flex/documentation/FlexExample.tsx
+++ b/packages/jokul/src/components/flex/documentation/FlexExample.tsx
@@ -1,8 +1,10 @@
 import { ExampleComponentProps, ExampleKnobsProps } from "doc-utils/index.js";
 import React, { CSSProperties, FC } from "react";
-import tokens from "../../../core/tokens.js";
-import { Card } from "../../card/Card.js";
-import { Flex, FlexDirection, GapValue } from "../Flex.js";
+import { ExampleComponentProps, ExampleKnobsProps } from "../../../../../../utils/dev-example";
+import { tokens } from "../../../core";
+import { Flex } from "../Flex";
+
+import "../styles/_index.scss";
 
 export const flexExampleKnobs: ExampleKnobsProps = {
     boolProps: ["wrap"],
@@ -37,14 +39,9 @@ export const flexExampleKnobs: ExampleKnobsProps = {
 };
 
 const boxStyle: CSSProperties = {
-    width: "250px",
-    height: "150px",
     backgroundColor: "var(--jkl-color-background-container-low)",
     border: "1px solid var(--jkl-color-border-subdued)",
     borderRadius: "4px",
-    display: "grid",
-    placeContent: "center",
-    flexGrow: 1,
 };
 
 export const FlexExample: FC<ExampleComponentProps> = ({
@@ -65,26 +62,16 @@ export const FlexExample: FC<ExampleComponentProps> = ({
             : (parseInt(choiceValues?.["rowGap"] || "0") as GapValue);
 
     return (
-        <Flex
-            asChild
-            direction={choiceValues?.["direction"] as FlexDirection}
-            wrap={boolValues?.["wrap"]}
-            gap={gap}
-            colGap={colGap}
-            rowGap={rowGap}
-            style={{ maxWidth: "80vw" }}
-        >
-            <Card variant="outlined" padding="l">
-                <div style={boxStyle}>1</div>
-                <div style={boxStyle}>2</div>
-                <div style={boxStyle}>3</div>
-                <div style={boxStyle}>4</div>
-                <div style={boxStyle}>5</div>
-                <div style={boxStyle}>6</div>
-                <div style={boxStyle}>7</div>
-                <div style={boxStyle}>8</div>
-                <div style={boxStyle}>9</div>
-            </Card>
+        <Flex center layout={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 6 }}>
+            <div style={boxStyle}>1</div>
+            <div style={boxStyle}>2</div>
+            <div style={boxStyle}>3</div>
+            <div style={boxStyle}>4</div>
+            <div style={boxStyle}>5</div>
+            <div style={boxStyle}>6</div>
+            <div style={boxStyle}>7</div>
+            <div style={boxStyle}>8</div>
+            <div style={boxStyle}>9</div>
         </Flex>
     );
 };
diff --git a/packages/jokul/src/utilities/polymorphism/polymorphism.ts b/packages/jokul/src/utilities/polymorphism/polymorphism.ts
index f5047c47893..7a863f36d37 100644
--- a/packages/jokul/src/utilities/polymorphism/polymorphism.ts
+++ b/packages/jokul/src/utilities/polymorphism/polymorphism.ts
@@ -6,6 +6,7 @@ type PropsToOmit<
     ElementType extends React.ElementType,
     Props,
 > = keyof (ElementTypeProp<ElementType> & Props);
+// type PropsToOmit<ElementType extends React.ElementType, Props> = keyof (ElementTypeProp<ElementType> & Props);
 
 export type PolymorphicProps<
     ElementType extends React.ElementType,
@@ -16,12 +17,32 @@ export type PolymorphicProps<
         PropsToOmit<ElementType, Props>
     >;
 
-export type PolymorphicRef<ElementType extends React.ElementType> =
-    React.ComponentPropsWithRef<ElementType>["ref"];
+export type PolymorphicRef<As extends React.ElementType> = React.ComponentPropsWithRef<As>["ref"];
 
-export type PolymorphicPropsWithRef<
-    ElementType extends React.ElementType,
-    Props = {},
-> = PolymorphicProps<ElementType, Props> & {
-    ref?: PolymorphicRef<ElementType>;
-};
+// old utility with ref
+export type PolymorphicPropsWithRef<ElementType extends React.ElementType, Props = {}> = PolymorphicProps<
+    ElementType,
+    Props
+> & { ref?: PolymorphicRef<ElementType> };
+
+// This is a new type utitlity with ref
+// Implementation of reusable polymorphic types
+// Explaination: https://blog.logrocket.com/build-strongly-typed-polymorphic-components-react-typescript/
+type AsProp<As extends React.ElementType> = { as?: As };
+type PropsToOmit<As extends React.ElementType, P> = keyof (AsProp<As> & P);
+type PolymorphicComponentProp<As extends React.ElementType, Props = object> = React.PropsWithChildren<
+    Props & AsProp<As>
+> &
+    Omit<React.ComponentPropsWithoutRef<As>, PropsToOmit<As, Props>>;
+
+export type PolymorphicComponentPropWithRef<As extends React.ElementType, Props = object> = PolymorphicComponentProp<
+    As,
+    Props
+> & { ref?: PolymorphicRef<As> };
+
+// Les https://stackoverflow.com/q/57683303
+export type Expand<T> = T extends (...args: infer A) => infer R
+    ? (...args: Expand<A>) => Expand<R>
+    : T extends infer O
+    ? { [K in keyof O]: O[K] }
+    : never;

From 6bfcf19f21dcfc08272cae48ed5a454340da8676 Mon Sep 17 00:00:00 2001
From: mariaeilertsen <maria.eilertsen@fremtind.no>
Date: Wed, 6 Nov 2024 11:53:28 +0100
Subject: [PATCH 02/14] fix: attempt on documentation

---
 .../flex/documentation/FlexExample.tsx        | 143 ++++++++++++++----
 1 file changed, 110 insertions(+), 33 deletions(-)

diff --git a/packages/jokul/src/components/flex/documentation/FlexExample.tsx b/packages/jokul/src/components/flex/documentation/FlexExample.tsx
index e7608771d04..7626c2c72bb 100644
--- a/packages/jokul/src/components/flex/documentation/FlexExample.tsx
+++ b/packages/jokul/src/components/flex/documentation/FlexExample.tsx
@@ -1,40 +1,130 @@
 import { ExampleComponentProps, ExampleKnobsProps } from "doc-utils/index.js";
 import React, { CSSProperties, FC } from "react";
 import { ExampleComponentProps, ExampleKnobsProps } from "../../../../../../utils/dev-example";
-import { tokens } from "../../../core";
 import { Flex } from "../Flex";
 
 import "../styles/_index.scss";
 
 export const flexExampleKnobs: ExampleKnobsProps = {
-    boolProps: ["wrap"],
+    boolProps: ["fill", "inline"],
     choiceProps: [
         {
-            name: "direction",
-            values: ["row", "row-reverse", "column", "column-reverse"],
+            name: "layout",
+            values: [
+                "auto",
+                1,
+                2,
+                3,
+                4,
+                6,
+                4.8,
+                8.4,
+                "2.10",
+                10.2,
+                3.9,
+                9.3,
+                5.7,
+                7.5,
+                "{ xs: 1, md: 2, lg: 4 }",
+                "{ xs: 1, md: 'auto' }",
+            ],
             defaultValue: 0,
         },
         {
             name: "gap",
-            values: Object.keys(tokens.spacing).sort(
-                (a, b) => parseInt(a) - parseInt(b),
-            ),
+            values: [
+                "none",
+                "xs",
+                "sm",
+                "md",
+                "lg",
+                "xl",
+                "xxl",
+                "xxl xl",
+                "xxl lg",
+                "xxl md",
+                "xxl sm",
+                "xxl xs",
+                "xl none",
+                "xl xxl",
+                "xl lg",
+                "xl md",
+                "xl sm",
+                "xl xs",
+                "xl none",
+                "lg xxl",
+                "lg xl",
+                "lg md",
+                "lg sm",
+                "lg xs",
+                "lg none",
+                "md xxl",
+                "md xl",
+                "md lg",
+                "md sm",
+                "md xs",
+                "md none",
+                "sm xxl",
+                "sm xl",
+                "sm lg",
+                "sm md",
+                "sm xs",
+                "sm none",
+                "xs xxl",
+                "xs xl",
+                "xs lg",
+                "xs md",
+                "xs sm",
+                "xs none",
+                "none xxl",
+                "none xl",
+                "none lg",
+                "none md",
+                "none sm",
+                "none xs",
+            ],
+            defaultValue: 0,
+        },
+        {
+            name: "direction",
+            values: ["row", "column", "row-reverse", "column-reverse"],
             defaultValue: 0,
         },
         {
-            name: "rowGap",
-            values: Object.keys(tokens.spacing).sort(
-                (a, b) => parseInt(a) - parseInt(b),
-            ),
+            name: "center",
+            values: ["false", "true", "xxl", "xl", "lg", "md"],
             defaultValue: 0,
         },
         {
-            name: "colGap",
-            values: Object.keys(tokens.spacing).sort(
-                (a, b) => parseInt(a) - parseInt(b),
-            ),
+            name: "align",
+            values: ["normal", "start", "center", "end", "baseline", "stretch"],
             defaultValue: 0,
         },
+        {
+            name: "alignContent",
+            values: [
+                "normal",
+                "start",
+                "center",
+                "end",
+                "baseline",
+                "stretch",
+                "space-around",
+                "space-between",
+                "space-evenly",
+            ],
+            defaultValue: "normal",
+        },
+        {
+            name: "justify",
+            values: ["normal", "start", "center", "end", "space-around", "space-between", "space-evenly"],
+            defaultValue: "normal",
+        },
+        {
+            name: "wrap",
+            values: ["wrap", "nowrap", "reverse"],
+            defaultValue: "wrap",
+        },
     ],
 };
 
@@ -44,25 +134,9 @@ const boxStyle: CSSProperties = {
     borderRadius: "4px",
 };
 
-export const FlexExample: FC<ExampleComponentProps> = ({
-    boolValues,
-    choiceValues,
-}) => {
-    const gap =
-        choiceValues?.["gap"] === "0"
-            ? undefined
-            : (parseInt(choiceValues?.["gap"] || "0") as GapValue);
-    const colGap =
-        choiceValues?.["colGap"] === "0"
-            ? undefined
-            : (parseInt(choiceValues?.["colGap"] || "0") as GapValue);
-    const rowGap =
-        choiceValues?.["rowGap"] === "0"
-            ? undefined
-            : (parseInt(choiceValues?.["rowGap"] || "0") as GapValue);
-
+export const FlexExample: FC<ExampleComponentProps> = ({ boolValues, choiceValues }) => {
     return (
-        <Flex center layout={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 6 }}>
+        <Flex center fill layout={1}>
             <div style={boxStyle}>1</div>
             <div style={boxStyle}>2</div>
             <div style={boxStyle}>3</div>
@@ -72,6 +146,9 @@ export const FlexExample: FC<ExampleComponentProps> = ({
             <div style={boxStyle}>7</div>
             <div style={boxStyle}>8</div>
             <div style={boxStyle}>9</div>
+            <div style={boxStyle}>10</div>
+            <div style={boxStyle}>11</div>
+            <div style={boxStyle}>12</div>
         </Flex>
     );
 };

From 3a39959dc2a0fb637c786ea3acaf3e2d58f845de Mon Sep 17 00:00:00 2001
From: mariaeilertsen <maria.eilertsen@fremtind.no>
Date: Wed, 6 Nov 2024 11:56:42 +0100
Subject: [PATCH 03/14] fix: adjustments

---
 .../src/components/flex/documentation/FlexExample.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/jokul/src/components/flex/documentation/FlexExample.tsx b/packages/jokul/src/components/flex/documentation/FlexExample.tsx
index 7626c2c72bb..fbfb3d0bfd7 100644
--- a/packages/jokul/src/components/flex/documentation/FlexExample.tsx
+++ b/packages/jokul/src/components/flex/documentation/FlexExample.tsx
@@ -113,17 +113,17 @@ export const flexExampleKnobs: ExampleKnobsProps = {
                 "space-between",
                 "space-evenly",
             ],
-            defaultValue: "normal",
+            defaultValue: 0,
         },
         {
             name: "justify",
             values: ["normal", "start", "center", "end", "space-around", "space-between", "space-evenly"],
-            defaultValue: "normal",
+            defaultValue: 0,
         },
         {
             name: "wrap",
             values: ["wrap", "nowrap", "reverse"],
-            defaultValue: "wrap",
+            defaultValue: 0,
         },
     ],
 };
@@ -136,7 +136,7 @@ const boxStyle: CSSProperties = {
 
 export const FlexExample: FC<ExampleComponentProps> = ({ boolValues, choiceValues }) => {
     return (
-        <Flex center fill layout={1}>
+        <Flex fill gap="xs" layout={1}>
             <div style={boxStyle}>1</div>
             <div style={boxStyle}>2</div>
             <div style={boxStyle}>3</div>

From 33ab3ff5fa78f3c1bc537c4e2f8d8eb92ad9bfac Mon Sep 17 00:00:00 2001
From: mariaeilertsen <maria.eilertsen@fremtind.no>
Date: Thu, 7 Nov 2024 09:14:10 +0100
Subject: [PATCH 04/14] fix: string props

---
 .../flex/documentation/FlexExample.tsx        | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/jokul/src/components/flex/documentation/FlexExample.tsx b/packages/jokul/src/components/flex/documentation/FlexExample.tsx
index fbfb3d0bfd7..ed227e57ccd 100644
--- a/packages/jokul/src/components/flex/documentation/FlexExample.tsx
+++ b/packages/jokul/src/components/flex/documentation/FlexExample.tsx
@@ -12,19 +12,19 @@ export const flexExampleKnobs: ExampleKnobsProps = {
             name: "layout",
             values: [
                 "auto",
-                1,
-                2,
-                3,
-                4,
-                6,
-                4.8,
-                8.4,
+                "1",
+                "2",
+                "3",
+                "4",
+                "6",
+                "4.8",
+                "8.4",
                 "2.10",
-                10.2,
-                3.9,
-                9.3,
-                5.7,
-                7.5,
+                "10.2",
+                "3.9",
+                "9.3",
+                "5.7",
+                "7.5",
                 "{ xs: 1, md: 2, lg: 4 }",
                 "{ xs: 1, md: 'auto' }",
             ],

From 39ef942ec53601add4ba82e486c4340abd5c4032 Mon Sep 17 00:00:00 2001
From: mariaeilertsen <maria.eilertsen@fremtind.no>
Date: Thu, 7 Nov 2024 09:24:06 +0100
Subject: [PATCH 05/14] fix: lost styling recovered

---
 .../src/components/flex/styles/_index.scss    |    1 +
 .../src/components/flex/styles/flex.scss      | 1106 +++++++++++++++++
 2 files changed, 1107 insertions(+)
 create mode 100644 packages/jokul/src/components/flex/styles/_index.scss
 create mode 100644 packages/jokul/src/components/flex/styles/flex.scss

diff --git a/packages/jokul/src/components/flex/styles/_index.scss b/packages/jokul/src/components/flex/styles/_index.scss
new file mode 100644
index 00000000000..021cfee1035
--- /dev/null
+++ b/packages/jokul/src/components/flex/styles/_index.scss
@@ -0,0 +1 @@
+@forward "flex";
diff --git a/packages/jokul/src/components/flex/styles/flex.scss b/packages/jokul/src/components/flex/styles/flex.scss
new file mode 100644
index 00000000000..d9d7147ec8c
--- /dev/null
+++ b/packages/jokul/src/components/flex/styles/flex.scss
@@ -0,0 +1,1106 @@
+/**
+$container: (
+    "43.75rem": $container-md,
+    "60rem": $container-lg,
+    "75rem": $container-xl,
+    "90rem": $container-xxl,
+    "100%": $container-full,
+); 
+**/
+
+// midlertidige custom tokens som egentlig burde legges inn i tokens.sccs
+// en ny form for spacing tokens som regner ut selv hva som blir riktig, å implementere dette vil kreve ny dokumentasjon
+:root {
+    --container-md: 43.75rem;
+    --container-lg: 60rem;
+    --container-xl: 75rem;
+    --container-xxl: 90rem;
+    --container-full: 100%;
+    --jkl-unit-10: 0.5rem;
+    --jkl-unit-05: calc(var(--jkl-unit-10) * 0.5);
+    --jkl-unit-15: calc(var(--jkl-unit-10) * 1.5);
+    --jkl-unit-20: calc(var(--jkl-unit-10) * 2);
+    --jkl-unit-25: calc(var(--jkl-unit-10) * 2.5);
+    --jkl-unit-30: calc(var(--jkl-unit-10) * 3);
+    --jkl-unit-40: calc(var(--jkl-unit-10) * 4);
+    --jkl-unit-50: calc(var(--jkl-unit-10) * 5);
+    --jkl-unit-60: calc(var(--jkl-unit-10) * 6);
+    --jkl-unit-70: calc(var(--jkl-unit-10) * 7);
+    --jkl-unit-80: calc(var(--jkl-unit-10) * 8);
+    --jkl-unit-90: calc(var(--jkl-unit-10) * 9);
+    --jkl-unit-100: calc(var(--jkl-unit-10) * 10);
+}
+
+:where(.flex) {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+:where(.fill > *) {
+    flex-grow: 1;
+}
+
+:where(.flex > *) {
+    --jkl-flex-gap: 0px;
+    --jkl-flex-layout: auto;
+    box-sizing: border-box;
+    flex-basis: calc((100% - (12 / var(--jkl-flex-layout) - 1) * var(--jkl-flex-gap)) / 12 * var(--jkl-flex-layout));
+
+    min-width: calc(var(--jkl-flex-layout) * 0px);
+    min-height: calc(var(--jkl-flex-layout) * 0px);
+}
+
+.inline {
+    display: inline-flex;
+}
+
+.column {
+    flex-direction: column;
+}
+
+.column-reverse {
+    flex-direction: column-reverse;
+}
+
+.row-reverse {
+    flex-direction: row-reverse;
+}
+
+.wrap-reverse {
+    flex-wrap: wrap-reverse;
+}
+
+.wrap-nowrap {
+    flex-wrap: nowrap;
+}
+
+:where(.wrap-nowrap > *) {
+    flex-shrink: calc(var(--jkl-flex-layout) * 0);
+}
+
+.text-left {
+    text-align: left;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-right {
+    text-align: right;
+}
+
+.align-start {
+    align-items: flex-start;
+}
+
+.align-center {
+    align-items: center;
+}
+
+.align-end {
+    align-items: flex-end;
+}
+
+.align-baseline {
+    align-items: baseline;
+}
+
+.align-stretch {
+    align-items: stretch;
+}
+
+.align-content-start {
+    align-content: flex-start;
+}
+
+.align-content-center {
+    align-content: center;
+}
+
+.align-content-end {
+    align-content: flex-end;
+}
+
+.align-content-stretch {
+    align-content: stretch;
+}
+
+.align-content-baseline {
+    align-content: baseline;
+}
+
+.align-content-space-around {
+    align-content: space-around;
+}
+
+.align-content-space-between {
+    align-content: space-between;
+}
+
+.align-content-space-evenly {
+    align-content: space-evenly;
+}
+
+.justify-start {
+    justify-content: flex-start;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-end {
+    justify-content: flex-end;
+}
+
+.justify-space-around {
+    justify-content: space-around;
+}
+
+.justify-space-between {
+    justify-content: space-between;
+}
+
+.justify-space-evenly {
+    justify-content: space-evenly;
+}
+
+.center-md {
+    max-width: var(--container-md);
+}
+
+.center-md,
+.center-lg,
+.center-xl,
+.center-xxl {
+    box-sizing: border-box;
+    margin-inline: auto;
+    width: calc(100% - var(--jkl-unit-50));
+}
+
+.center-lg,
+.center-xl,
+.center-xxl {
+    @media (width >= 64em) {
+        max-width: var(--container-lg);
+    }
+}
+
+.center-xl,
+.center-xxl {
+    @media (width >= 75em) {
+        max-width: var(--container-xl);
+    }
+}
+
+.center-xxl {
+    @media (width >= 101.25em) {
+        max-width: var(--container-xxl);
+    }
+}
+
+.xs-10\.2 > :where(:nth-child(2n - 1)),
+.xs-2\.1 > :where(:nth-child(2n)) {
+    --jkl-flex-layout: 10;
+}
+
+.xs-2\.1 > :where(:nth-child(2n - 1)),
+.xs-10\.2 > :where(:nth-child(2n)) {
+    --jkl-flex-layout: 2;
+}
+
+.xs-3\.9 > :where(:nth-child(2n - 1)),
+.xs-9\.3 > :where(:nth-child(2n)) {
+    --jkl-flex-layout: 3;
+}
+
+.xs-4\.8 > :where(:nth-child(2n - 1)),
+.xs-8\.4 > :where(:nth-child(2n)) {
+    --jkl-flex-layout: 4;
+}
+
+.xs-5\.7 > :where(:nth-child(2n - 1)),
+.xs-7\.5 > :where(:nth-child(2n)) {
+    --jkl-flex-layout: 5;
+}
+
+.xs-7\.5 > :where(:nth-child(2n - 1)),
+.xs-5\.7 > :where(:nth-child(2n)) {
+    --jkl-flex-layout: 7;
+}
+
+.xs-8\.4 > :where(:nth-child(2n - 1)),
+.xs-4\.8 > :where(:nth-child(2n)) {
+    --jkl-flex-layout: 8;
+}
+
+.xs-9\.3 > :where(:nth-child(2n - 1)),
+.xs-3\.9 > :where(:nth-child(2n)) {
+    --jkl-flex-layout: 9;
+}
+
+.xs-0 > * {
+    --jkl-flex-layout: auto;
+}
+
+.xs-1 > * {
+    --jkl-flex-layout: 12;
+}
+
+.xs-2 > * {
+    --jkl-flex-layout: 6;
+}
+
+.xs-3 > * {
+    --jkl-flex-layout: 4;
+}
+
+.xs-4 > * {
+    --jkl-flex-layout: 4;
+}
+
+.xs-6 > * {
+    --jkl-flex-layout: 2;
+}
+
+.xs-row-gap-none {
+    row-gap: 0;
+}
+
+.xs-col-gap-none {
+    column-gap: 0;
+
+    > * {
+        --jkl-flex-gap: 0px;
+    }
+}
+
+.xs-row-gap-xs {
+    row-gap: var(--jkl-unit-10);
+}
+
+.xs-col-gap-xs {
+    column-gap: var(--jkl-unit-10);
+
+    & > * {
+        --jkl-flex-gap: var(--jkl-unit-10);
+    }
+}
+
+.xs-row-gap-sm {
+    row-gap: var(--jkl-unit-20);
+}
+
+.xs-col-gap-sm {
+    column-gap: var(--jkl-unit-20);
+
+    & > * {
+        --jkl-flex-gap: var(--jkl-unit-20);
+    }
+}
+
+.xs-row-gap-md {
+    row-gap: var(--jkl-unit-30);
+}
+
+.xs-col-gap-md {
+    column-gap: var(--jkl-unit-30);
+
+    & > * {
+        --jkl-flex-gap: var(--jkl-unit-30);
+    }
+}
+
+.xs-row-gap-lg {
+    row-gap: var(--jkl-unit-40);
+}
+
+.xs-col-gap-lg {
+    column-gap: var(--jkl-unit-40);
+
+    & > * {
+        --jkl-flex-gap: var(--jkl-unit-40);
+    }
+}
+
+.xs-row-gap-xl {
+    row-gap: var(--jkl-unit-50);
+}
+
+.xs-col-gap-xl {
+    column-gap: var(--jkl-unit-50);
+
+    & > * {
+        --jkl-flex-gap: var(--jkl-unit-50);
+    }
+}
+
+.xs-row-gap-xxl {
+    row-gap: var(--jkl-unit-100);
+}
+
+.xs-col-gap-xxl {
+    column-gap: var(--jkl-unit-100);
+
+    & > * {
+        --jkl-flex-gap: var(--jkl-unit-100);
+    }
+}
+
+@media (width >= 37.5em) {
+    /* var(--jkl-breakpoint-sm) */
+    .sm-2\.1 > :where(:nth-child(2n - 1)),
+    .sm-10\.2 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 2;
+    }
+
+    .sm-10\.2 > :where(:nth-child(2n - 1)),
+    .sm-2\.1 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 10;
+    }
+
+    .sm-3\.9 > :where(:nth-child(2n - 1)),
+    .sm-9\.3 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 3;
+    }
+
+    .sm-9\.3 > :where(:nth-child(2n - 1)),
+    .sm-3\.9 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 9;
+    }
+
+    .sm-4\.8 > :where(:nth-child(2n - 1)),
+    .sm-8\.4 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 4;
+    }
+
+    .sm-8\.4 > :where(:nth-child(2n - 1)),
+    .sm-4\.8 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 8;
+    }
+
+    .sm-5\.7 > :where(:nth-child(2n - 1)),
+    .sm-7\.5 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 5;
+    }
+
+    .sm-7\.5 > :where(:nth-child(2n - 1)),
+    .sm-5\.7 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 7;
+    }
+
+    .sm-0 > * {
+        --jkl-flex-layout: auto;
+    }
+
+    .sm-1 > * {
+        --jkl-flex-layout: 12;
+    }
+
+    .sm-2 > * {
+        --jkl-flex-layout: 6;
+    }
+
+    .sm-3 > * {
+        --jkl-flex-layout: 4;
+    }
+
+    .sm-4 > * {
+        --jkl-flex-layout: 3;
+    }
+
+    .sm-6 > * {
+        --jkl-flex-layout: 2;
+    }
+
+    .sm-row-gap-none {
+        row-gap: 0;
+    }
+
+    .sm-col-gap-none {
+        column-gap: 0;
+
+        & > * {
+            --jkl-flex-gap: 0px;
+        }
+    }
+
+    .sm-row-gap-xs {
+        row-gap: var(--jkl-unit-10);
+    }
+
+    .sm-col-gap-xs {
+        column-gap: var(--jkl-unit-10);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-10);
+        }
+    }
+
+    .sm-row-gap-sm {
+        row-gap: var(--jkl-unit-20);
+    }
+
+    .sm-col-gap-sm {
+        column-gap: var(--jkl-unit-20);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-20);
+        }
+    }
+
+    .sm-row-gap-md {
+        row-gap: var(--jkl-unit-30);
+    }
+
+    .sm-col-gap-md {
+        column-gap: var(--jkl-unit-30);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-30);
+        }
+    }
+
+    .sm-row-gap-lg {
+        row-gap: var(--jkl-unit-40);
+    }
+
+    .sm-col-gap-lg {
+        column-gap: var(--jkl-unit-40);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-40);
+        }
+    }
+
+    .sm-row-gap-xl {
+        row-gap: var(--jkl-unit-50);
+    }
+
+    .sm-col-gap-xl {
+        column-gap: var(--jkl-unit-50);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-50);
+        }
+    }
+
+    .sm-row-gap-xxl {
+        row-gap: var(--jkl-unit-100);
+    }
+
+    .sm-col-gap-xxl {
+        column-gap: var(--jkl-unit-100);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-100);
+        }
+    }
+}
+
+@media (width >= 50em) {
+    /* var(--jkl-breakpoint-md) */
+    .md-2\.1 > :where(:nth-child(2n - 1)),
+    .md-10\.2 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 2;
+    }
+
+    .md-10\.2 > :where(:nth-child(2n - 1)),
+    .md-2\.1 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 10;
+    }
+
+    .md-3\.9 > :where(:nth-child(2n - 1)),
+    .md-9\.3 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 3;
+    }
+
+    .md-9\.3 > :where(:nth-child(2n - 1)),
+    .md-3\.9 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 9;
+    }
+
+    .md-4\.8 > :where(:nth-child(2n - 1)),
+    .md-8\.4 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 4;
+    }
+
+    .md-8\.4 > :where(:nth-child(2n - 1)),
+    .md-4\.8 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 8;
+    }
+
+    .md-5\.7 > :where(:nth-child(2n - 1)),
+    .md-7\.5 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 5;
+    }
+
+    .md-7\.5 > :where(:nth-child(2n - 1)),
+    .md-5\.7 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 7;
+    }
+
+    .md-0 > * {
+        --jkl-flex-layout: auto;
+    }
+
+    .md-1 > * {
+        --jkl-flex-layout: 12;
+    }
+
+    .md-2 > * {
+        --jkl-flex-layout: 6;
+    }
+
+    .md-3 > * {
+        --jkl-flex-layout: 4;
+    }
+
+    .md-4 > * {
+        --jkl-flex-layout: 3;
+    }
+
+    .md-6 > * {
+        --jkl-flex-layout: 2;
+    }
+
+    .md-row-gap-none {
+        row-gap: 0;
+    }
+
+    .md-col-gap-none {
+        column-gap: 0;
+
+        & > * {
+            --jkl-flex-gap: 0px;
+        }
+    }
+
+    .md-row-gap-xs {
+        row-gap: var(--jkl-unit-10);
+    }
+
+    .md-col-gap-xs {
+        column-gap: var(--jkl-unit-10);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-10);
+        }
+    }
+
+    .md-row-gap-sm {
+        row-gap: var(--jkl-unit-20);
+    }
+
+    .md-col-gap-sm {
+        column-gap: var(--jkl-unit-20);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-20);
+        }
+    }
+
+    .md-row-gap-md {
+        row-gap: var(--jkl-unit-30);
+    }
+
+    .md-col-gap-md {
+        column-gap: var(--jkl-unit-30);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-30);
+        }
+    }
+
+    .md-row-gap-lg {
+        row-gap: var(--jkl-unit-40);
+    }
+
+    .md-col-gap-lg {
+        column-gap: var(--jkl-unit-40);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-40);
+        }
+    }
+
+    .md-row-gap-xl {
+        row-gap: var(--jkl-unit-50);
+    }
+
+    .md-col-gap-xl {
+        column-gap: var(--jkl-unit-50);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-50);
+        }
+    }
+
+    .md-row-gap-xxl {
+        row-gap: var(--jkl-unit-100);
+    }
+
+    .md-col-gap-xxl {
+        column-gap: var(--jkl-unit-100);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-100);
+        }
+    }
+}
+
+@media (width >= 64em) {
+    /* var(--jkl-breakpoint-lg) */
+    .lg-2\.1 > :where(:nth-child(2n - 1)),
+    .lg-10\.2 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 2;
+    }
+
+    .lg-10\.2 > :where(:nth-child(2n - 1)),
+    .lg-2\.1 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 10;
+    }
+
+    .lg-3\.9 > :where(:nth-child(2n - 1)),
+    .lg-9\.3 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 3;
+    }
+
+    .lg-9\.3 > :where(:nth-child(2n - 1)),
+    .lg-3\.9 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 9;
+    }
+
+    .lg-4\.8 > :where(:nth-child(2n - 1)),
+    .lg-8\.4 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 4;
+    }
+
+    .lg-8\.4 > :where(:nth-child(2n - 1)),
+    .lg-4\.8 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 8;
+    }
+
+    .lg-5\.7 > :where(:nth-child(2n - 1)),
+    .lg-7\.5 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 5;
+    }
+
+    .lg-7\.5 > :where(:nth-child(2n - 1)),
+    .lg-5\.7 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 7;
+    }
+
+    .lg-0 > * {
+        --jkl-flex-layout: auto;
+    }
+
+    .lg-1 > * {
+        --jkl-flex-layout: 12;
+    }
+
+    .lg-2 > * {
+        --jkl-flex-layout: 6;
+    }
+
+    .lg-3 > * {
+        --jkl-flex-layout: 4;
+    }
+
+    .lg-4 > * {
+        --jkl-flex-layout: 3;
+    }
+
+    .lg-6 > * {
+        --jkl-flex-layout: 2;
+    }
+
+    .lg-row-gap-none {
+        row-gap: 0;
+    }
+
+    .lg-col-gap-none {
+        column-gap: 0;
+
+        & > * {
+            --jkl-flex-gap: 0px;
+        }
+    }
+
+    .lg-row-gap-xs {
+        row-gap: var(--jkl-unit-10);
+    }
+
+    .lg-col-gap-xs {
+        column-gap: var(--jkl-unit-10);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-10);
+        }
+    }
+
+    .lg-row-gap-sm {
+        row-gap: var(--jkl-unit-20);
+    }
+
+    .lg-col-gap-sm {
+        column-gap: var(--jkl-unit-20);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-20);
+        }
+    }
+
+    .lg-row-gap-md {
+        row-gap: var(--jkl-unit-30);
+    }
+
+    .lg-col-gap-md {
+        column-gap: var(--jkl-unit-30);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-30);
+        }
+    }
+
+    .lg-row-gap-lg {
+        row-gap: var(--jkl-unit-40);
+    }
+
+    .lg-col-gap-lg {
+        column-gap: var(--jkl-unit-40);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-40);
+        }
+    }
+
+    .lg-row-gap-xl {
+        row-gap: var(--jkl-unit-50);
+    }
+
+    .lg-col-gap-xl {
+        column-gap: var(--jkl-unit-50);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-50);
+        }
+    }
+
+    .lg-row-gap-xxl {
+        row-gap: var(--jkl-unit-100);
+    }
+
+    .lg-col-gap-xxl {
+        column-gap: var(--jkl-unit-100);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-100);
+        }
+    }
+}
+
+@media (width >= 75em) {
+    /* var(--jkl-breakpoint-xl) */
+    .xl-2\.1 > :where(:nth-child(2n - 1)),
+    .xl-10\.2 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 2;
+    }
+
+    .xl-10\.2 > :where(:nth-child(2n - 1)),
+    .xl-2\.1 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 10;
+    }
+
+    .xl-3\.9 > :where(:nth-child(2n - 1)),
+    .xl-9\.3 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 3;
+    }
+
+    .xl-9\.3 > :where(:nth-child(2n - 1)),
+    .xl-3\.9 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 9;
+    }
+
+    .xl-4\.8 > :where(:nth-child(2n - 1)),
+    .xl-8\.4 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 4;
+    }
+
+    .xl-8\.4 > :where(:nth-child(2n - 1)),
+    .xl-4\.8 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 8;
+    }
+
+    .xl-5\.7 > :where(:nth-child(2n - 1)),
+    .xl-7\.5 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 5;
+    }
+
+    .xl-7\.5 > :where(:nth-child(2n - 1)),
+    .xl-5\.7 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 7;
+    }
+
+    .xl-0 > * {
+        --jkl-flex-layout: auto;
+    }
+
+    .xl-1 > * {
+        --jkl-flex-layout: 12;
+    }
+
+    .xl-2 > * {
+        --jkl-flex-layout: 6;
+    }
+
+    .xl-3 > * {
+        --jkl-flex-layout: 4;
+    }
+
+    .xl-4 > * {
+        --jkl-flex-layout: 3;
+    }
+
+    .xl-6 > * {
+        --jkl-flex-layout: 2;
+    }
+
+    .xl-row-gap-none {
+        row-gap: 0;
+    }
+
+    .xl-col-gap-none {
+        column-gap: 0;
+
+        & > * {
+            --jkl-flex-gap: 0px;
+        }
+    }
+
+    .xl-row-gap-xs {
+        row-gap: var(--jkl-unit-10);
+    }
+
+    .xl-col-gap-xs {
+        column-gap: var(--jkl-unit-10);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-10);
+        }
+    }
+
+    .xl-row-gap-sm {
+        row-gap: var(--jkl-unit-20);
+    }
+
+    .xl-col-gap-sm {
+        column-gap: var(--jkl-unit-20);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-20);
+        }
+    }
+
+    .xl-row-gap-md {
+        row-gap: var(--jkl-unit-30);
+    }
+
+    .xl-col-gap-md {
+        column-gap: var(--jkl-unit-30);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-30);
+        }
+    }
+
+    .xl-row-gap-lg {
+        row-gap: var(--jkl-unit-40);
+    }
+
+    .xl-col-gap-lg {
+        column-gap: var(--jkl-unit-40);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-40);
+        }
+    }
+
+    .xl-row-gap-xl {
+        row-gap: var(--jkl-unit-50);
+    }
+
+    .xl-col-gap-xl {
+        column-gap: var(--jkl-unit-50);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-50);
+        }
+    }
+
+    .xl-row-gap-xxl {
+        row-gap: var(--jkl-unit-100);
+    }
+
+    .xl-col-gap-xxl {
+        column-gap: var(--jkl-unit-100);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-100);
+        }
+    }
+}
+
+@media (width >= 101.25em) {
+    /* var(--jkl-breakpoint-xxl) */
+    .xxl-2\.1 > :where(:nth-child(2n - 1)),
+    .xxl-10\.2 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 2;
+    }
+
+    .xxl-10\.2 > :where(:nth-child(2n - 1)),
+    .xxl-2\.1 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 10;
+    }
+
+    .xxl-3\.9 > :where(:nth-child(2n - 1)),
+    .xxl-9\.3 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 3;
+    }
+
+    .xxl-9\.3 > :where(:nth-child(2n - 1)),
+    .xxl-3\.9 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 9;
+    }
+
+    .xxl-4\.8 > :where(:nth-child(2n - 1)),
+    .xxl-8\.4 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 4;
+    }
+
+    .xxl-8\.4 > :where(:nth-child(2n - 1)),
+    .xxl-4\.8 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 8;
+    }
+
+    .xxl-5\.7 > :where(:nth-child(2n - 1)),
+    .xxl-7\.5 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 5;
+    }
+
+    .xxl-7\.5 > :where(:nth-child(2n - 1)),
+    .xxl-5\.7 > :where(:nth-child(2n)) {
+        --jkl-flex-layout: 7;
+    }
+
+    .xxl-0 > * {
+        --jkl-flex-layout: auto;
+    }
+
+    .xxl-1 > * {
+        --jkl-flex-layout: 12;
+    }
+
+    .xxl-2 > * {
+        --jkl-flex-layout: 6;
+    }
+
+    .xxl-3 > * {
+        --jkl-flex-layout: 4;
+    }
+
+    .xxl-4 > * {
+        --jkl-flex-layout: 3;
+    }
+
+    .xxl-6 > * {
+        --jkl-flex-layout: 2;
+    }
+
+    .xxl-row-gap-none {
+        row-gap: 0;
+    }
+
+    .xxl-col-gap-none {
+        column-gap: 0;
+
+        & > * {
+            --jkl-flex-gap: 0px;
+        }
+    }
+
+    .xxl-row-gap-xs {
+        row-gap: var(--jkl-unit-10);
+    }
+
+    .xxl-col-gap-xs {
+        column-gap: var(--jkl-unit-10);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-10);
+        }
+    }
+
+    .xxl-row-gap-sm {
+        row-gap: var(--jkl-unit-20);
+    }
+
+    .xxl-col-gap-sm {
+        column-gap: var(--jkl-unit-20);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-20);
+        }
+    }
+
+    .xxl-row-gap-md {
+        row-gap: var(--jkl-unit-30);
+    }
+
+    .xxl-col-gap-md {
+        column-gap: var(--jkl-unit-30);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-30);
+        }
+    }
+
+    .xxl-row-gap-lg {
+        row-gap: var(--jkl-unit-40);
+    }
+
+    .xxl-col-gap-lg {
+        column-gap: var(--jkl-unit-40);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-40);
+        }
+    }
+
+    .xxl-row-gap-xl {
+        row-gap: var(--jkl-unit-50);
+    }
+
+    .xxl-col-gap-xl {
+        column-gap: var(--jkl-unit-50);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-50);
+        }
+    }
+
+    .xxl-row-gap-xxl {
+        row-gap: var(--jkl-unit-100);
+    }
+
+    .xxl-col-gap-xxl {
+        column-gap: var(--jkl-unit-100);
+
+        & > * {
+            --jkl-flex-gap: var(--jkl-unit-100);
+        }
+    }
+}

From 5b454a379e8627e2c4344ebc3b328ad89af2df22 Mon Sep 17 00:00:00 2001
From: mariaeilertsen <maria.eilertsen@fremtind.no>
Date: Thu, 14 Nov 2024 09:37:32 +0100
Subject: [PATCH 06/14] fix: fjerne duplicates

---
 .../utilities/polymorphism/polymorphism.ts    | 19 +++----------------
 1 file changed, 3 insertions(+), 16 deletions(-)

diff --git a/packages/jokul/src/utilities/polymorphism/polymorphism.ts b/packages/jokul/src/utilities/polymorphism/polymorphism.ts
index 7a863f36d37..9b99eddd0a2 100644
--- a/packages/jokul/src/utilities/polymorphism/polymorphism.ts
+++ b/packages/jokul/src/utilities/polymorphism/polymorphism.ts
@@ -2,12 +2,6 @@ type ElementTypeProp<ElementType extends React.ElementType> = {
     as?: ElementType;
 };
 
-type PropsToOmit<
-    ElementType extends React.ElementType,
-    Props,
-> = keyof (ElementTypeProp<ElementType> & Props);
-// type PropsToOmit<ElementType extends React.ElementType, Props> = keyof (ElementTypeProp<ElementType> & Props);
-
 export type PolymorphicProps<
     ElementType extends React.ElementType,
     Props = {},
@@ -19,13 +13,11 @@ export type PolymorphicProps<
 
 export type PolymorphicRef<As extends React.ElementType> = React.ComponentPropsWithRef<As>["ref"];
 
-// old utility with ref
-export type PolymorphicPropsWithRef<ElementType extends React.ElementType, Props = {}> = PolymorphicProps<
-    ElementType,
+export type PolymorphicComponentPropWithRef<As extends React.ElementType, Props = object> = PolymorphicComponentProp<
+    As,
     Props
-> & { ref?: PolymorphicRef<ElementType> };
+> & { ref?: PolymorphicRef<As> };
 
-// This is a new type utitlity with ref
 // Implementation of reusable polymorphic types
 // Explaination: https://blog.logrocket.com/build-strongly-typed-polymorphic-components-react-typescript/
 type AsProp<As extends React.ElementType> = { as?: As };
@@ -35,11 +27,6 @@ type PolymorphicComponentProp<As extends React.ElementType, Props = object> = Re
 > &
     Omit<React.ComponentPropsWithoutRef<As>, PropsToOmit<As, Props>>;
 
-export type PolymorphicComponentPropWithRef<As extends React.ElementType, Props = object> = PolymorphicComponentProp<
-    As,
-    Props
-> & { ref?: PolymorphicRef<As> };
-
 // Les https://stackoverflow.com/q/57683303
 export type Expand<T> = T extends (...args: infer A) => infer R
     ? (...args: Expand<A>) => Expand<R>

From 64f37fe4594f327a7752db7cb16f6fe93c147cb4 Mon Sep 17 00:00:00 2001
From: mariaeilertsen <maria.eilertsen@fremtind.no>
Date: Thu, 9 Jan 2025 12:19:17 +0100
Subject: [PATCH 07/14] =?UTF-8?q?fix:=20fors=C3=B8k=20p=C3=A5=20=C3=A5=20r?=
 =?UTF-8?q?ydde=20scss?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/jokul/src/components/flex/Flex.tsx   | 32 +++++++++++++++----
 .../src/components/flex/styles/flex.scss      |  5 ++-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/packages/jokul/src/components/flex/Flex.tsx b/packages/jokul/src/components/flex/Flex.tsx
index 2110cc4752a..602270aadda 100644
--- a/packages/jokul/src/components/flex/Flex.tsx
+++ b/packages/jokul/src/components/flex/Flex.tsx
@@ -1,6 +1,10 @@
 import clsx from "clsx";
 import React, { forwardRef } from "react";
-import { Expand, PolymorphicComponentPropWithRef, PolymorphicRef } from "../../utilities/polymorphism/polymorphism";
+import {
+    Expand,
+    PolymorphicComponentPropWithRef,
+    PolymorphicRef,
+} from "../../utilities/polymorphism/polymorphism.js";
 
 type Size = 1 | 2 | 3 | 4 | 6 | 4.8 | 8.4 | 2.1 | 10.2 | 3.9 | 9.3 | 5.7 | 7.5;
 type Center = "md" | "lg" | "xl" | "xxl" | boolean;
@@ -74,7 +78,14 @@ type FlexBaseProps = {
     gap?: Gap | { xs?: Gap; sm?: Gap; md?: Gap; lg?: Gap; xl?: Gap; xxl?: Gap };
     inline?: boolean;
     text?: "left" | "right" | "center";
-    justify?: "normal" | "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+    justify?:
+        | "normal"
+        | "start"
+        | "center"
+        | "end"
+        | "space-between"
+        | "space-around"
+        | "space-evenly";
     layout?:
         | Layout
         | {
@@ -88,11 +99,16 @@ type FlexBaseProps = {
     wrap?: "wrap" | "nowrap" | "reverse";
 };
 
-export type FlexProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As, FlexBaseProps>;
+export type FlexProps<As extends React.ElementType = "div"> =
+    PolymorphicComponentPropWithRef<As, FlexBaseProps>;
 
-type FlexComponent = <As extends React.ElementType = "div">(props: FlexProps<As>) => JSX.Element;
+type FlexComponent = <As extends React.ElementType = "div">(
+    props: FlexProps<As>,
+) => JSX.Element;
 
-export const Flex: FlexComponent = forwardRef(function Flex<As extends React.ElementType = "div">(
+export const Flex: FlexComponent = forwardRef(function Flex<
+    As extends React.ElementType = "div",
+>(
     {
         align,
         alignContent,
@@ -117,7 +133,8 @@ export const Flex: FlexComponent = forwardRef(function Flex<As extends React.Ele
         return [`${breakpoint}-row-gap-${row}`, `${breakpoint}-col-gap-${col}`];
     });
     const layouts = toObj(layout).map(
-        ([breakpoint, layout]) => `${breakpoint}-${Number(`${layout}`.replace("auto", "0"))}`, // Convert to number to convert 2.10 to 2.1 and false to 0
+        ([breakpoint, layout]) =>
+            `${breakpoint}-${Number(`${layout}`.replace("auto", "0"))}`, // Convert to number to convert 2.10 to 2.1 and false to 0
     );
 
     return (
@@ -144,4 +161,5 @@ export const Flex: FlexComponent = forwardRef(function Flex<As extends React.Ele
     );
 }) as FlexComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element
 
-const toObj = (value: string | number | object) => Object.entries(typeof value === "object" ? value : { xs: value });
+const toObj = (value: string | number | object) =>
+    Object.entries(typeof value === "object" ? value : { xs: value });
diff --git a/packages/jokul/src/components/flex/styles/flex.scss b/packages/jokul/src/components/flex/styles/flex.scss
index d9d7147ec8c..b7d34eeea64 100644
--- a/packages/jokul/src/components/flex/styles/flex.scss
+++ b/packages/jokul/src/components/flex/styles/flex.scss
@@ -46,7 +46,10 @@ $container: (
     --jkl-flex-gap: 0px;
     --jkl-flex-layout: auto;
     box-sizing: border-box;
-    flex-basis: calc((100% - (12 / var(--jkl-flex-layout) - 1) * var(--jkl-flex-gap)) / 12 * var(--jkl-flex-layout));
+    flex-basis: calc(
+        (100% - (12 / var(--jkl-flex-layout) - 1) * var(--jkl-flex-gap)) / 12 *
+            var(--jkl-flex-layout)
+    );
 
     min-width: calc(var(--jkl-flex-layout) * 0px);
     min-height: calc(var(--jkl-flex-layout) * 0px);

From 9e476ee395513ca8f0379987a73218ec5f69516f Mon Sep 17 00:00:00 2001
From: mariaeilertsen <maria.eilertsen@fremtind.no>
Date: Thu, 9 Jan 2025 12:24:51 +0100
Subject: [PATCH 08/14] fix: prettier test

---
 packages/jokul/src/components/flex/styles/flex.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/jokul/src/components/flex/styles/flex.scss b/packages/jokul/src/components/flex/styles/flex.scss
index b7d34eeea64..487e4987ad4 100644
--- a/packages/jokul/src/components/flex/styles/flex.scss
+++ b/packages/jokul/src/components/flex/styles/flex.scss
@@ -1107,3 +1107,5 @@ $container: (
         }
     }
 }
+
+// test

From cb92d1a40df36a427d82602b53b5d313056d7261 Mon Sep 17 00:00:00 2001
From: mariaeilertsen <maria.eilertsen@fremtind.no>
Date: Thu, 9 Jan 2025 12:28:21 +0100
Subject: [PATCH 09/14] fix: prettier test

---
 packages/jokul/src/components/flex/styles/flex.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/jokul/src/components/flex/styles/flex.scss b/packages/jokul/src/components/flex/styles/flex.scss
index 487e4987ad4..f2fdcbc65ed 100644
--- a/packages/jokul/src/components/flex/styles/flex.scss
+++ b/packages/jokul/src/components/flex/styles/flex.scss
@@ -1,3 +1,5 @@
+/** prettier-ignore **/
+
 /**
 $container: (
     "43.75rem": $container-md,
@@ -1108,4 +1110,4 @@ $container: (
     }
 }
 
-// test
+// testuh

From 9ee9c5308a4d03afffe8857114a85f07d77f662d Mon Sep 17 00:00:00 2001
From: mariaeilertsen <maria.eilertsen@fremtind.no>
Date: Thu, 9 Jan 2025 12:30:05 +0100
Subject: [PATCH 10/14] fix: prettier test

---
 packages/jokul/src/components/flex/styles/flex.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/jokul/src/components/flex/styles/flex.scss b/packages/jokul/src/components/flex/styles/flex.scss
index f2fdcbc65ed..cb06751f59e 100644
--- a/packages/jokul/src/components/flex/styles/flex.scss
+++ b/packages/jokul/src/components/flex/styles/flex.scss
@@ -1,4 +1,4 @@
-/** prettier-ignore **/
+// prettier-ignore
 
 /**
 $container: (

From 9da2ba2c8d2ea78ecac274e005836bf0502408a9 Mon Sep 17 00:00:00 2001
From: mariaeilertsen <maria.eilertsen@fremtind.no>
Date: Thu, 9 Jan 2025 12:30:53 +0100
Subject: [PATCH 11/14] fix: test prettier

---
 packages/jokul/src/components/flex/styles/flex.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/jokul/src/components/flex/styles/flex.scss b/packages/jokul/src/components/flex/styles/flex.scss
index cb06751f59e..1cd45ae7c29 100644
--- a/packages/jokul/src/components/flex/styles/flex.scss
+++ b/packages/jokul/src/components/flex/styles/flex.scss
@@ -1110,4 +1110,4 @@ $container: (
     }
 }
 
-// testuh
+// tessst

From dc60468b03d772935903704b341ec9861f72b7f4 Mon Sep 17 00:00:00 2001
From: mariaeilertsen <maria.eilertsen@fremtind.no>
Date: Thu, 9 Jan 2025 12:33:08 +0100
Subject: [PATCH 12/14] fix: prettierignore test

---
 .prettierignore                                    |  3 ++-
 .../jokul/src/components/flex/styles/flex.scss     | 14 +-------------
 2 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index bee62e0174f..ee3e5d7e54f 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -6,4 +6,5 @@ jest/
 tsconfig.json
 tsconfig-for-declarations.json
 pnpm-lock.yaml
-packages/jokul/dev-server.js
\ No newline at end of file
+packages/jokul/dev-server.js
+packages/jokul/src/components/flex/styles/flex.scss
\ No newline at end of file
diff --git a/packages/jokul/src/components/flex/styles/flex.scss b/packages/jokul/src/components/flex/styles/flex.scss
index 1cd45ae7c29..3c0912dedd4 100644
--- a/packages/jokul/src/components/flex/styles/flex.scss
+++ b/packages/jokul/src/components/flex/styles/flex.scss
@@ -1,5 +1,3 @@
-// prettier-ignore
-
 /**
 $container: (
     "43.75rem": $container-md,
@@ -1097,17 +1095,7 @@ $container: (
         }
     }
 
-    .xxl-row-gap-xxl {
-        row-gap: var(--jkl-unit-100);
-    }
-
-    .xxl-col-gap-xxl {
-        column-gap: var(--jkl-unit-100);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-100);
-        }
-    }
+    .xxl-row-gap-xxl { row-gap: var(--jkl-unit-100); }.xxl-col-gap-xxl { column-gap: var(--jkl-unit-100);& > * {--jkl-flex-gap: var(--jkl-unit-100);} }
 }
 
 // tessst

From 2fba35b418cba2c031d31058456a18d063cf93ac Mon Sep 17 00:00:00 2001
From: mariaeilertsen <maria.eilertsen@fremtind.no>
Date: Thu, 9 Jan 2025 14:04:08 +0100
Subject: [PATCH 13/14] fix: rydde opp linjer scss

---
 .../src/components/flex/styles/flex.scss      | 1030 ++---------------
 1 file changed, 124 insertions(+), 906 deletions(-)

diff --git a/packages/jokul/src/components/flex/styles/flex.scss b/packages/jokul/src/components/flex/styles/flex.scss
index 3c0912dedd4..4cd2eff8cde 100644
--- a/packages/jokul/src/components/flex/styles/flex.scss
+++ b/packages/jokul/src/components/flex/styles/flex.scss
@@ -1,15 +1,3 @@
-/**
-$container: (
-    "43.75rem": $container-md,
-    "60rem": $container-lg,
-    "75rem": $container-xl,
-    "90rem": $container-xxl,
-    "100%": $container-full,
-); 
-**/
-
-// midlertidige custom tokens som egentlig burde legges inn i tokens.sccs
-// en ny form for spacing tokens som regner ut selv hva som blir riktig, å implementere dette vil kreve ny dokumentasjon
 :root {
     --container-md: 43.75rem;
     --container-lg: 60rem;
@@ -205,897 +193,127 @@ $container: (
     }
 }
 
-.xs-10\.2 > :where(:nth-child(2n - 1)),
-.xs-2\.1 > :where(:nth-child(2n)) {
-    --jkl-flex-layout: 10;
-}
-
-.xs-2\.1 > :where(:nth-child(2n - 1)),
-.xs-10\.2 > :where(:nth-child(2n)) {
-    --jkl-flex-layout: 2;
-}
-
-.xs-3\.9 > :where(:nth-child(2n - 1)),
-.xs-9\.3 > :where(:nth-child(2n)) {
-    --jkl-flex-layout: 3;
-}
-
-.xs-4\.8 > :where(:nth-child(2n - 1)),
-.xs-8\.4 > :where(:nth-child(2n)) {
-    --jkl-flex-layout: 4;
-}
-
-.xs-5\.7 > :where(:nth-child(2n - 1)),
-.xs-7\.5 > :where(:nth-child(2n)) {
-    --jkl-flex-layout: 5;
-}
-
-.xs-7\.5 > :where(:nth-child(2n - 1)),
-.xs-5\.7 > :where(:nth-child(2n)) {
-    --jkl-flex-layout: 7;
-}
-
-.xs-8\.4 > :where(:nth-child(2n - 1)),
-.xs-4\.8 > :where(:nth-child(2n)) {
-    --jkl-flex-layout: 8;
-}
-
-.xs-9\.3 > :where(:nth-child(2n - 1)),
-.xs-3\.9 > :where(:nth-child(2n)) {
-    --jkl-flex-layout: 9;
-}
-
-.xs-0 > * {
-    --jkl-flex-layout: auto;
-}
-
-.xs-1 > * {
-    --jkl-flex-layout: 12;
-}
-
-.xs-2 > * {
-    --jkl-flex-layout: 6;
-}
-
-.xs-3 > * {
-    --jkl-flex-layout: 4;
-}
-
-.xs-4 > * {
-    --jkl-flex-layout: 4;
-}
-
-.xs-6 > * {
-    --jkl-flex-layout: 2;
-}
-
-.xs-row-gap-none {
-    row-gap: 0;
-}
-
-.xs-col-gap-none {
-    column-gap: 0;
-
-    > * {
-        --jkl-flex-gap: 0px;
-    }
-}
-
-.xs-row-gap-xs {
-    row-gap: var(--jkl-unit-10);
-}
-
-.xs-col-gap-xs {
-    column-gap: var(--jkl-unit-10);
-
-    & > * {
-        --jkl-flex-gap: var(--jkl-unit-10);
-    }
-}
-
-.xs-row-gap-sm {
-    row-gap: var(--jkl-unit-20);
-}
-
-.xs-col-gap-sm {
-    column-gap: var(--jkl-unit-20);
-
-    & > * {
-        --jkl-flex-gap: var(--jkl-unit-20);
-    }
-}
-
-.xs-row-gap-md {
-    row-gap: var(--jkl-unit-30);
-}
-
-.xs-col-gap-md {
-    column-gap: var(--jkl-unit-30);
-
-    & > * {
-        --jkl-flex-gap: var(--jkl-unit-30);
-    }
-}
-
-.xs-row-gap-lg {
-    row-gap: var(--jkl-unit-40);
-}
-
-.xs-col-gap-lg {
-    column-gap: var(--jkl-unit-40);
-
-    & > * {
-        --jkl-flex-gap: var(--jkl-unit-40);
-    }
-}
-
-.xs-row-gap-xl {
-    row-gap: var(--jkl-unit-50);
-}
-
-.xs-col-gap-xl {
-    column-gap: var(--jkl-unit-50);
-
-    & > * {
-        --jkl-flex-gap: var(--jkl-unit-50);
-    }
-}
-
-.xs-row-gap-xxl {
-    row-gap: var(--jkl-unit-100);
-}
-
-.xs-col-gap-xxl {
-    column-gap: var(--jkl-unit-100);
-
-    & > * {
-        --jkl-flex-gap: var(--jkl-unit-100);
-    }
-}
-
-@media (width >= 37.5em) {
-    /* var(--jkl-breakpoint-sm) */
-    .sm-2\.1 > :where(:nth-child(2n - 1)),
-    .sm-10\.2 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 2;
-    }
-
-    .sm-10\.2 > :where(:nth-child(2n - 1)),
-    .sm-2\.1 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 10;
-    }
-
-    .sm-3\.9 > :where(:nth-child(2n - 1)),
-    .sm-9\.3 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 3;
-    }
-
-    .sm-9\.3 > :where(:nth-child(2n - 1)),
-    .sm-3\.9 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 9;
-    }
-
-    .sm-4\.8 > :where(:nth-child(2n - 1)),
-    .sm-8\.4 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 4;
-    }
-
-    .sm-8\.4 > :where(:nth-child(2n - 1)),
-    .sm-4\.8 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 8;
-    }
-
-    .sm-5\.7 > :where(:nth-child(2n - 1)),
-    .sm-7\.5 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 5;
-    }
-
-    .sm-7\.5 > :where(:nth-child(2n - 1)),
-    .sm-5\.7 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 7;
-    }
-
-    .sm-0 > * {
-        --jkl-flex-layout: auto;
-    }
-
-    .sm-1 > * {
-        --jkl-flex-layout: 12;
-    }
-
-    .sm-2 > * {
-        --jkl-flex-layout: 6;
-    }
-
-    .sm-3 > * {
-        --jkl-flex-layout: 4;
-    }
-
-    .sm-4 > * {
-        --jkl-flex-layout: 3;
-    }
-
-    .sm-6 > * {
-        --jkl-flex-layout: 2;
-    }
-
-    .sm-row-gap-none {
-        row-gap: 0;
-    }
-
-    .sm-col-gap-none {
-        column-gap: 0;
-
-        & > * {
-            --jkl-flex-gap: 0px;
-        }
-    }
-
-    .sm-row-gap-xs {
-        row-gap: var(--jkl-unit-10);
-    }
-
-    .sm-col-gap-xs {
-        column-gap: var(--jkl-unit-10);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-10);
-        }
-    }
-
-    .sm-row-gap-sm {
-        row-gap: var(--jkl-unit-20);
-    }
-
-    .sm-col-gap-sm {
-        column-gap: var(--jkl-unit-20);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-20);
-        }
-    }
-
-    .sm-row-gap-md {
-        row-gap: var(--jkl-unit-30);
-    }
-
-    .sm-col-gap-md {
-        column-gap: var(--jkl-unit-30);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-30);
-        }
-    }
-
-    .sm-row-gap-lg {
-        row-gap: var(--jkl-unit-40);
-    }
-
-    .sm-col-gap-lg {
-        column-gap: var(--jkl-unit-40);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-40);
-        }
-    }
-
-    .sm-row-gap-xl {
-        row-gap: var(--jkl-unit-50);
-    }
-
-    .sm-col-gap-xl {
-        column-gap: var(--jkl-unit-50);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-50);
-        }
-    }
-
-    .sm-row-gap-xxl {
-        row-gap: var(--jkl-unit-100);
-    }
-
-    .sm-col-gap-xxl {
-        column-gap: var(--jkl-unit-100);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-100);
-        }
-    }
-}
-
-@media (width >= 50em) {
-    /* var(--jkl-breakpoint-md) */
-    .md-2\.1 > :where(:nth-child(2n - 1)),
-    .md-10\.2 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 2;
-    }
-
-    .md-10\.2 > :where(:nth-child(2n - 1)),
-    .md-2\.1 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 10;
-    }
-
-    .md-3\.9 > :where(:nth-child(2n - 1)),
-    .md-9\.3 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 3;
-    }
-
-    .md-9\.3 > :where(:nth-child(2n - 1)),
-    .md-3\.9 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 9;
-    }
-
-    .md-4\.8 > :where(:nth-child(2n - 1)),
-    .md-8\.4 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 4;
-    }
-
-    .md-8\.4 > :where(:nth-child(2n - 1)),
-    .md-4\.8 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 8;
-    }
-
-    .md-5\.7 > :where(:nth-child(2n - 1)),
-    .md-7\.5 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 5;
-    }
-
-    .md-7\.5 > :where(:nth-child(2n - 1)),
-    .md-5\.7 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 7;
-    }
-
-    .md-0 > * {
-        --jkl-flex-layout: auto;
-    }
-
-    .md-1 > * {
-        --jkl-flex-layout: 12;
-    }
-
-    .md-2 > * {
-        --jkl-flex-layout: 6;
-    }
-
-    .md-3 > * {
-        --jkl-flex-layout: 4;
-    }
-
-    .md-4 > * {
-        --jkl-flex-layout: 3;
-    }
-
-    .md-6 > * {
-        --jkl-flex-layout: 2;
-    }
-
-    .md-row-gap-none {
-        row-gap: 0;
-    }
-
-    .md-col-gap-none {
-        column-gap: 0;
-
-        & > * {
-            --jkl-flex-gap: 0px;
-        }
-    }
-
-    .md-row-gap-xs {
-        row-gap: var(--jkl-unit-10);
-    }
-
-    .md-col-gap-xs {
-        column-gap: var(--jkl-unit-10);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-10);
-        }
-    }
-
-    .md-row-gap-sm {
-        row-gap: var(--jkl-unit-20);
-    }
-
-    .md-col-gap-sm {
-        column-gap: var(--jkl-unit-20);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-20);
-        }
-    }
-
-    .md-row-gap-md {
-        row-gap: var(--jkl-unit-30);
-    }
-
-    .md-col-gap-md {
-        column-gap: var(--jkl-unit-30);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-30);
-        }
-    }
-
-    .md-row-gap-lg {
-        row-gap: var(--jkl-unit-40);
-    }
-
-    .md-col-gap-lg {
-        column-gap: var(--jkl-unit-40);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-40);
-        }
-    }
-
-    .md-row-gap-xl {
-        row-gap: var(--jkl-unit-50);
-    }
-
-    .md-col-gap-xl {
-        column-gap: var(--jkl-unit-50);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-50);
-        }
-    }
-
-    .md-row-gap-xxl {
-        row-gap: var(--jkl-unit-100);
-    }
-
-    .md-col-gap-xxl {
-        column-gap: var(--jkl-unit-100);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-100);
-        }
-    }
-}
-
-@media (width >= 64em) {
-    /* var(--jkl-breakpoint-lg) */
-    .lg-2\.1 > :where(:nth-child(2n - 1)),
-    .lg-10\.2 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 2;
-    }
-
-    .lg-10\.2 > :where(:nth-child(2n - 1)),
-    .lg-2\.1 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 10;
-    }
-
-    .lg-3\.9 > :where(:nth-child(2n - 1)),
-    .lg-9\.3 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 3;
-    }
-
-    .lg-9\.3 > :where(:nth-child(2n - 1)),
-    .lg-3\.9 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 9;
-    }
-
-    .lg-4\.8 > :where(:nth-child(2n - 1)),
-    .lg-8\.4 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 4;
-    }
-
-    .lg-8\.4 > :where(:nth-child(2n - 1)),
-    .lg-4\.8 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 8;
-    }
-
-    .lg-5\.7 > :where(:nth-child(2n - 1)),
-    .lg-7\.5 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 5;
-    }
-
-    .lg-7\.5 > :where(:nth-child(2n - 1)),
-    .lg-5\.7 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 7;
-    }
-
-    .lg-0 > * {
-        --jkl-flex-layout: auto;
-    }
-
-    .lg-1 > * {
-        --jkl-flex-layout: 12;
-    }
-
-    .lg-2 > * {
-        --jkl-flex-layout: 6;
-    }
-
-    .lg-3 > * {
-        --jkl-flex-layout: 4;
-    }
-
-    .lg-4 > * {
-        --jkl-flex-layout: 3;
-    }
-
-    .lg-6 > * {
-        --jkl-flex-layout: 2;
-    }
-
-    .lg-row-gap-none {
-        row-gap: 0;
-    }
-
-    .lg-col-gap-none {
-        column-gap: 0;
-
-        & > * {
-            --jkl-flex-gap: 0px;
-        }
-    }
-
-    .lg-row-gap-xs {
-        row-gap: var(--jkl-unit-10);
-    }
-
-    .lg-col-gap-xs {
-        column-gap: var(--jkl-unit-10);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-10);
-        }
-    }
-
-    .lg-row-gap-sm {
-        row-gap: var(--jkl-unit-20);
-    }
-
-    .lg-col-gap-sm {
-        column-gap: var(--jkl-unit-20);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-20);
-        }
-    }
-
-    .lg-row-gap-md {
-        row-gap: var(--jkl-unit-30);
-    }
-
-    .lg-col-gap-md {
-        column-gap: var(--jkl-unit-30);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-30);
-        }
-    }
-
-    .lg-row-gap-lg {
-        row-gap: var(--jkl-unit-40);
-    }
-
-    .lg-col-gap-lg {
-        column-gap: var(--jkl-unit-40);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-40);
-        }
-    }
-
-    .lg-row-gap-xl {
-        row-gap: var(--jkl-unit-50);
-    }
-
-    .lg-col-gap-xl {
-        column-gap: var(--jkl-unit-50);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-50);
-        }
-    }
-
-    .lg-row-gap-xxl {
-        row-gap: var(--jkl-unit-100);
-    }
-
-    .lg-col-gap-xxl {
-        column-gap: var(--jkl-unit-100);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-100);
-        }
-    }
-}
-
-@media (width >= 75em) {
-    /* var(--jkl-breakpoint-xl) */
-    .xl-2\.1 > :where(:nth-child(2n - 1)),
-    .xl-10\.2 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 2;
-    }
-
-    .xl-10\.2 > :where(:nth-child(2n - 1)),
-    .xl-2\.1 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 10;
-    }
-
-    .xl-3\.9 > :where(:nth-child(2n - 1)),
-    .xl-9\.3 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 3;
-    }
-
-    .xl-9\.3 > :where(:nth-child(2n - 1)),
-    .xl-3\.9 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 9;
-    }
-
-    .xl-4\.8 > :where(:nth-child(2n - 1)),
-    .xl-8\.4 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 4;
-    }
-
-    .xl-8\.4 > :where(:nth-child(2n - 1)),
-    .xl-4\.8 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 8;
-    }
-
-    .xl-5\.7 > :where(:nth-child(2n - 1)),
-    .xl-7\.5 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 5;
-    }
-
-    .xl-7\.5 > :where(:nth-child(2n - 1)),
-    .xl-5\.7 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 7;
-    }
-
-    .xl-0 > * {
-        --jkl-flex-layout: auto;
-    }
-
-    .xl-1 > * {
-        --jkl-flex-layout: 12;
-    }
-
-    .xl-2 > * {
-        --jkl-flex-layout: 6;
-    }
-
-    .xl-3 > * {
-        --jkl-flex-layout: 4;
-    }
-
-    .xl-4 > * {
-        --jkl-flex-layout: 3;
-    }
-
-    .xl-6 > * {
-        --jkl-flex-layout: 2;
-    }
-
-    .xl-row-gap-none {
-        row-gap: 0;
-    }
-
-    .xl-col-gap-none {
-        column-gap: 0;
-
-        & > * {
-            --jkl-flex-gap: 0px;
-        }
-    }
-
-    .xl-row-gap-xs {
-        row-gap: var(--jkl-unit-10);
-    }
-
-    .xl-col-gap-xs {
-        column-gap: var(--jkl-unit-10);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-10);
-        }
-    }
-
-    .xl-row-gap-sm {
-        row-gap: var(--jkl-unit-20);
-    }
-
-    .xl-col-gap-sm {
-        column-gap: var(--jkl-unit-20);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-20);
-        }
-    }
-
-    .xl-row-gap-md {
-        row-gap: var(--jkl-unit-30);
-    }
-
-    .xl-col-gap-md {
-        column-gap: var(--jkl-unit-30);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-30);
-        }
-    }
-
-    .xl-row-gap-lg {
-        row-gap: var(--jkl-unit-40);
-    }
-
-    .xl-col-gap-lg {
-        column-gap: var(--jkl-unit-40);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-40);
-        }
-    }
-
-    .xl-row-gap-xl {
-        row-gap: var(--jkl-unit-50);
-    }
-
-    .xl-col-gap-xl {
-        column-gap: var(--jkl-unit-50);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-50);
-        }
-    }
-
-    .xl-row-gap-xxl {
-        row-gap: var(--jkl-unit-100);
-    }
-
-    .xl-col-gap-xxl {
-        column-gap: var(--jkl-unit-100);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-100);
-        }
-    }
-}
-
-@media (width >= 101.25em) {
-    /* var(--jkl-breakpoint-xxl) */
-    .xxl-2\.1 > :where(:nth-child(2n - 1)),
-    .xxl-10\.2 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 2;
-    }
-
-    .xxl-10\.2 > :where(:nth-child(2n - 1)),
-    .xxl-2\.1 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 10;
-    }
-
-    .xxl-3\.9 > :where(:nth-child(2n - 1)),
-    .xxl-9\.3 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 3;
-    }
-
-    .xxl-9\.3 > :where(:nth-child(2n - 1)),
-    .xxl-3\.9 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 9;
-    }
-
-    .xxl-4\.8 > :where(:nth-child(2n - 1)),
-    .xxl-8\.4 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 4;
-    }
-
-    .xxl-8\.4 > :where(:nth-child(2n - 1)),
-    .xxl-4\.8 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 8;
-    }
-
-    .xxl-5\.7 > :where(:nth-child(2n - 1)),
-    .xxl-7\.5 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 5;
-    }
-
-    .xxl-7\.5 > :where(:nth-child(2n - 1)),
-    .xxl-5\.7 > :where(:nth-child(2n)) {
-        --jkl-flex-layout: 7;
-    }
-
-    .xxl-0 > * {
-        --jkl-flex-layout: auto;
-    }
-
-    .xxl-1 > * {
-        --jkl-flex-layout: 12;
-    }
-
-    .xxl-2 > * {
-        --jkl-flex-layout: 6;
-    }
-
-    .xxl-3 > * {
-        --jkl-flex-layout: 4;
-    }
-
-    .xxl-4 > * {
-        --jkl-flex-layout: 3;
-    }
-
-    .xxl-6 > * {
-        --jkl-flex-layout: 2;
-    }
-
-    .xxl-row-gap-none {
-        row-gap: 0;
-    }
-
-    .xxl-col-gap-none {
-        column-gap: 0;
-
-        & > * {
-            --jkl-flex-gap: 0px;
-        }
-    }
-
-    .xxl-row-gap-xs {
-        row-gap: var(--jkl-unit-10);
-    }
-
-    .xxl-col-gap-xs {
-        column-gap: var(--jkl-unit-10);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-10);
-        }
-    }
-
-    .xxl-row-gap-sm {
-        row-gap: var(--jkl-unit-20);
-    }
-
-    .xxl-col-gap-sm {
-        column-gap: var(--jkl-unit-20);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-20);
-        }
-    }
-
-    .xxl-row-gap-md {
-        row-gap: var(--jkl-unit-30);
-    }
-
-    .xxl-col-gap-md {
-        column-gap: var(--jkl-unit-30);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-30);
-        }
-    }
-
-    .xxl-row-gap-lg {
-        row-gap: var(--jkl-unit-40);
-    }
-
-    .xxl-col-gap-lg {
-        column-gap: var(--jkl-unit-40);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-40);
-        }
-    }
-
-    .xxl-row-gap-xl {
-        row-gap: var(--jkl-unit-50);
-    }
-
-    .xxl-col-gap-xl {
-        column-gap: var(--jkl-unit-50);
-
-        & > * {
-            --jkl-flex-gap: var(--jkl-unit-50);
-        }
-    }
-
-    .xxl-row-gap-xxl { row-gap: var(--jkl-unit-100); }.xxl-col-gap-xxl { column-gap: var(--jkl-unit-100);& > * {--jkl-flex-gap: var(--jkl-unit-100);} }
-}
-
-// tessst
+.xs-10\.2 > :where(:nth-child(2n - 1)), .xs-2\.1 > :where(:nth-child(2n)) { --jkl-flex-layout: 10; }
+.xs-2\.1 > :where(:nth-child(2n - 1)), .xs-10\.2 > :where(:nth-child(2n)) { --jkl-flex-layout: 2; }
+.xs-3\.9 > :where(:nth-child(2n - 1)), .xs-9\.3 > :where(:nth-child(2n)) { --jkl-flex-layout: 3; }
+.xs-4\.8 > :where(:nth-child(2n - 1)), .xs-8\.4 > :where(:nth-child(2n)) { --jkl-flex-layout: 4; }
+.xs-5\.7 > :where(:nth-child(2n - 1)), .xs-7\.5 > :where(:nth-child(2n)) { --jkl-flex-layout: 5; }
+.xs-7\.5 > :where(:nth-child(2n - 1)), .xs-5\.7 > :where(:nth-child(2n)) { --jkl-flex-layout: 7; }
+.xs-8\.4 > :where(:nth-child(2n - 1)), .xs-4\.8 > :where(:nth-child(2n)) { --jkl-flex-layout: 8; }
+.xs-9\.3 > :where(:nth-child(2n - 1)), .xs-3\.9 > :where(:nth-child(2n)) { --jkl-flex-layout: 9; }
+.xs-0 > * { --jkl-flex-layout: auto; } .xs-1 > * { --jkl-flex-layout: 12; } .xs-2 > * { --jkl-flex-layout: 6; }
+.xs-3 > * { --jkl-flex-layout: 4;} .xs-4 > * { --jkl-flex-layout: 4; } .xs-6 > * { --jkl-flex-layout: 2; }
+
+.xs-row-gap-none { row-gap: 0; } .xs-col-gap-none { column-gap: 0; > * { --jkl-flex-gap: 0px; } }
+.xs-row-gap-xs { row-gap: var(--jkl-unit-10); } .xs-col-gap-xs { column-gap: var(--jkl-unit-10); & > * { --jkl-flex-gap: var(--jkl-unit-10); } }
+.xs-row-gap-sm { row-gap: var(--jkl-unit-20); } .xs-col-gap-sm { column-gap: var(--jkl-unit-20); & > * { --jkl-flex-gap: var(--jkl-unit-20); } }
+.xs-row-gap-md { row-gap: var(--jkl-unit-30); } .xs-col-gap-md { column-gap: var(--jkl-unit-30); & > * { --jkl-flex-gap: var(--jkl-unit-30); } }
+.xs-row-gap-lg { row-gap: var(--jkl-unit-40); } .xs-col-gap-lg { column-gap: var(--jkl-unit-40); & > * { --jkl-flex-gap: var(--jkl-unit-40); } }
+.xs-row-gap-xl { row-gap: var(--jkl-unit-50); } .xs-col-gap-xl { column-gap: var(--jkl-unit-50); & > * { --jkl-flex-gap: var(--jkl-unit-50); } }
+.xs-row-gap-xxl { row-gap: var(--jkl-unit-100); } .xs-col-gap-xxl { column-gap: var(--jkl-unit-100); & > * { --jkl-flex-gap: var(--jkl-unit-100); } }
+
+@media (width >= 37.5em) { /* var(--jkl-breakpoint-sm) */
+    .sm-2\.1 > :where(:nth-child(2n - 1)), .sm-10\.2 > :where(:nth-child(2n)) { --jkl-flex-layout: 2; }
+    .sm-10\.2 > :where(:nth-child(2n - 1)), .sm-2\.1 > :where(:nth-child(2n)) { --jkl-flex-layout: 10; }
+    .sm-3\.9 > :where(:nth-child(2n - 1)), .sm-9\.3 > :where(:nth-child(2n)) { --jkl-flex-layout: 3; }
+    .sm-9\.3 > :where(:nth-child(2n - 1)), .sm-3\.9 > :where(:nth-child(2n)) { --jkl-flex-layout: 9; }
+    .sm-4\.8 > :where(:nth-child(2n - 1)), .sm-8\.4 > :where(:nth-child(2n)) { --jkl-flex-layout: 4; }
+    .sm-8\.4 > :where(:nth-child(2n - 1)), .sm-4\.8 > :where(:nth-child(2n)) { --jkl-flex-layout: 8; }
+    .sm-5\.7 > :where(:nth-child(2n - 1)), .sm-7\.5 > :where(:nth-child(2n)) { --jkl-flex-layout: 5; }
+    .sm-7\.5 > :where(:nth-child(2n - 1)), .sm-5\.7 > :where(:nth-child(2n)) { --jkl-flex-layout: 7; }
+    .sm-0 > * { --jkl-flex-layout: auto; } .sm-1 > * { --jkl-flex-layout: 12; } .sm-2 > * { --jkl-flex-layout: 6; }
+    .sm-3 > * { --jkl-flex-layout: 4; } .sm-4 > * { --jkl-flex-layout: 3; } .sm-6 > * { --jkl-flex-layout: 2; }
+
+    .sm-row-gap-none { row-gap: 0; }.sm-col-gap-none { column-gap: 0; & > * { --jkl-flex-gap: 0px; } }
+    .sm-row-gap-xs { row-gap: var(--jkl-unit-10); }.sm-col-gap-xs { column-gap: var(--jkl-unit-10); & > * { --jkl-flex-gap: var(--jkl-unit-10); } }
+    .sm-row-gap-sm { row-gap: var(--jkl-unit-20); }.sm-col-gap-sm { column-gap: var(--jkl-unit-20); & > * { --jkl-flex-gap: var(--jkl-unit-20); } }
+    .sm-row-gap-md { row-gap: var(--jkl-unit-30); }.sm-col-gap-md { column-gap: var(--jkl-unit-30); & > * { --jkl-flex-gap: var(--jkl-unit-30); } }
+    .sm-row-gap-lg { row-gap: var(--jkl-unit-40); }.sm-col-gap-lg { column-gap: var(--jkl-unit-40); & > * { --jkl-flex-gap: var(--jkl-unit-40); } }
+    .sm-row-gap-xl { row-gap: var(--jkl-unit-50); }.sm-col-gap-xl { column-gap: var(--jkl-unit-50); & > * { --jkl-flex-gap: var(--jkl-unit-50); } }
+    .sm-row-gap-xxl { row-gap: var(--jkl-unit-100); }.sm-col-gap-xxl { column-gap: var(--jkl-unit-100); & > * { --jkl-flex-gap: var(--jkl-unit-100); } }
+}
+
+@media (width >= 50em) { /* var(--jkl-breakpoint-md) */
+    .md-2\.1 > :where(:nth-child(2n - 1)), .md-10\.2 > :where(:nth-child(2n)) { --jkl-flex-layout: 2; }
+    .md-10\.2 > :where(:nth-child(2n - 1)), .md-2\.1 > :where(:nth-child(2n)) { --jkl-flex-layout: 10; }
+    .md-3\.9 > :where(:nth-child(2n - 1)), .md-9\.3 > :where(:nth-child(2n)) { --jkl-flex-layout: 3; }
+    .md-9\.3 > :where(:nth-child(2n - 1)), .md-3\.9 > :where(:nth-child(2n)) { --jkl-flex-layout: 9; }
+    .md-4\.8 > :where(:nth-child(2n - 1)), .md-8\.4 > :where(:nth-child(2n)) { --jkl-flex-layout: 4; }
+    .md-8\.4 > :where(:nth-child(2n - 1)), .md-4\.8 > :where(:nth-child(2n)) { --jkl-flex-layout: 8; }
+    .md-5\.7 > :where(:nth-child(2n - 1)), .md-7\.5 > :where(:nth-child(2n)) { --jkl-flex-layout: 5; }
+    .md-7\.5 > :where(:nth-child(2n - 1)), .md-5\.7 > :where(:nth-child(2n)) { --jkl-flex-layout: 7; }
+    .md-0 > * { --jkl-flex-layout: auto; } .md-1 > * { --jkl-flex-layout: 12; } .md-2 > * { --jkl-flex-layout: 6; }
+    .md-3 > * { --jkl-flex-layout: 4; } .md-4 > * { --jkl-flex-layout: 3; } .md-6 > * { --jkl-flex-layout: 2; }
+
+    .md-row-gap-none { row-gap: 0; }.md-col-gap-none { column-gap: 0; & > * { --jkl-flex-gap: 0px; } }
+    .md-row-gap-xs { row-gap: var(--jkl-unit-10); }.md-col-gap-xs { column-gap: var(--jkl-unit-10); & > * { --jkl-flex-gap: var(--jkl-unit-10); } }
+    .md-row-gap-sm { row-gap: var(--jkl-unit-20); }.md-col-gap-sm { column-gap: var(--jkl-unit-20); & > * { --jkl-flex-gap: var(--jkl-unit-20); } }
+    .md-row-gap-md { row-gap: var(--jkl-unit-30); }.md-col-gap-md { column-gap: var(--jkl-unit-30); & > * { --jkl-flex-gap: var(--jkl-unit-30); } }
+    .md-row-gap-lg { row-gap: var(--jkl-unit-40); }.md-col-gap-lg { column-gap: var(--jkl-unit-40); & > * { --jkl-flex-gap: var(--jkl-unit-40); } }
+    .md-row-gap-xl { row-gap: var(--jkl-unit-50); }.md-col-gap-xl { column-gap: var(--jkl-unit-50); & > * { --jkl-flex-gap: var(--jkl-unit-50); } }
+    .md-row-gap-xxl { row-gap: var(--jkl-unit-100); }.md-col-gap-xxl { column-gap: var(--jkl-unit-100); & > * { --jkl-flex-gap: var(--jkl-unit-100); } }
+}
+
+@media (width >= 64em) { /* var(--jkl-breakpoint-lg) */
+    .lg-2\.1 > :where(:nth-child(2n - 1)), .lg-10\.2 > :where(:nth-child(2n)) { --jkl-flex-layout: 2; }
+    .lg-10\.2 > :where(:nth-child(2n - 1)), .lg-2\.1 > :where(:nth-child(2n)) { --jkl-flex-layout: 10; }
+    .lg-3\.9 > :where(:nth-child(2n - 1)), .lg-9\.3 > :where(:nth-child(2n)) { --jkl-flex-layout: 3; }
+    .lg-9\.3 > :where(:nth-child(2n - 1)), .lg-3\.9 > :where(:nth-child(2n)) { --jkl-flex-layout: 9; }
+    .lg-4\.8 > :where(:nth-child(2n - 1)), .lg-8\.4 > :where(:nth-child(2n)) { --jkl-flex-layout: 4; }
+    .lg-8\.4 > :where(:nth-child(2n - 1)), .lg-4\.8 > :where(:nth-child(2n)) { --jkl-flex-layout: 8; }
+    .lg-5\.7 > :where(:nth-child(2n - 1)), .lg-7\.5 > :where(:nth-child(2n)) { --jkl-flex-layout: 5; }
+    .lg-7\.5 > :where(:nth-child(2n - 1)), .lg-5\.7 > :where(:nth-child(2n)) { --jkl-flex-layout: 7; }
+    .lg-0 > * { --jkl-flex-layout: auto; } .lg-1 > * { --jkl-flex-layout: 12; } .lg-2 > * { --jkl-flex-layout: 6; }
+    .lg-3 > * { --jkl-flex-layout: 4; } .lg-4 > * { --jkl-flex-layout: 3; } .lg-6 > * { --jkl-flex-layout: 2; }
+
+    .lg-row-gap-none { row-gap: 0; } .lg-col-gap-none { column-gap: 0; & > * { --jkl-flex-gap: 0px; } }
+    .lg-row-gap-xs { row-gap: var(--jkl-unit-10); }.lg-col-gap-xs { column-gap: var(--jkl-unit-10); & > * { --jkl-flex-gap: var(--jkl-unit-10); } }
+    .lg-row-gap-sm { row-gap: var(--jkl-unit-20); }.lg-col-gap-sm { column-gap: var(--jkl-unit-20); & > * { --jkl-flex-gap: var(--jkl-unit-20); } }
+    .lg-row-gap-md { row-gap: var(--jkl-unit-30); }.lg-col-gap-md { column-gap: var(--jkl-unit-30); & > * { --jkl-flex-gap: var(--jkl-unit-30); } }
+    .lg-row-gap-lg { row-gap: var(--jkl-unit-40); }.lg-col-gap-lg { column-gap: var(--jkl-unit-40); & > * { --jkl-flex-gap: var(--jkl-unit-40); } }
+    .lg-row-gap-xl { row-gap: var(--jkl-unit-50); }.lg-col-gap-xl { column-gap: var(--jkl-unit-50); & > * { --jkl-flex-gap: var(--jkl-unit-50); } }
+    .lg-row-gap-xxl { row-gap: var(--jkl-unit-100); }.lg-col-gap-xxl { column-gap: var(--jkl-unit-100); & > * { --jkl-flex-gap: var(--jkl-unit-100); } }
+}
+
+@media (width >= 75em) { /* var(--jkl-breakpoint-xl) */
+    .xl-2\.1 > :where(:nth-child(2n - 1)), .xl-10\.2 > :where(:nth-child(2n)) { --jkl-flex-layout: 2; }
+    .xl-10\.2 > :where(:nth-child(2n - 1)), .xl-2\.1 > :where(:nth-child(2n)) { --jkl-flex-layout: 10; }
+    .xl-3\.9 > :where(:nth-child(2n - 1)), .xl-9\.3 > :where(:nth-child(2n)) { --jkl-flex-layout: 3; }
+    .xl-9\.3 > :where(:nth-child(2n - 1)), .xl-3\.9 > :where(:nth-child(2n)) { --jkl-flex-layout: 9; }
+    .xl-4\.8 > :where(:nth-child(2n - 1)), .xl-8\.4 > :where(:nth-child(2n)) { --jkl-flex-layout: 4; }
+    .xl-8\.4 > :where(:nth-child(2n - 1)), .xl-4\.8 > :where(:nth-child(2n)) { --jkl-flex-layout: 8; }
+    .xl-5\.7 > :where(:nth-child(2n - 1)), .xl-7\.5 > :where(:nth-child(2n)) { --jkl-flex-layout: 5; }
+    .xl-7\.5 > :where(:nth-child(2n - 1)), .xl-5\.7 > :where(:nth-child(2n)) { --jkl-flex-layout: 7; }
+
+    .xl-0 > * { --jkl-flex-layout: auto; } .xl-1 > * { --jkl-flex-layout: 12; } .xl-2 > * { --jkl-flex-layout: 6; }
+    .xl-3 > * { --jkl-flex-layout: 4; } .xl-4 > * {--jkl-flex-layout: 3; } .xl-6 > * { --jkl-flex-layout: 2; }
+
+    .xl-row-gap-none { row-gap: 0; }.xl-col-gap-none { column-gap: 0; & > * {--jkl-flex-gap: 0px;} }
+    .xl-row-gap-xs { row-gap: var(--jkl-unit-10); }.xl-col-gap-xs { column-gap: var(--jkl-unit-10); & > * { --jkl-flex-gap: var(--jkl-unit-10); } }
+    .xl-row-gap-sm { row-gap: var(--jkl-unit-20); }.xl-col-gap-sm { column-gap: var(--jkl-unit-20); & > * { --jkl-flex-gap: var(--jkl-unit-20); } }
+    .xl-row-gap-md { row-gap: var(--jkl-unit-30); }.xl-col-gap-md { column-gap: var(--jkl-unit-30); & > * { --jkl-flex-gap: var(--jkl-unit-30); } }
+    .xl-row-gap-lg { row-gap: var(--jkl-unit-40); }.xl-col-gap-lg { column-gap: var(--jkl-unit-40); & > * { --jkl-flex-gap: var(--jkl-unit-40); } }
+    .xl-row-gap-xl { row-gap: var(--jkl-unit-50); }.xl-col-gap-xl { column-gap: var(--jkl-unit-50); & > * { --jkl-flex-gap: var(--jkl-unit-50); } }
+    .xl-row-gap-xxl { row-gap: var(--jkl-unit-100); }.xl-col-gap-xxl { column-gap: var(--jkl-unit-100); & > * {--jkl-flex-gap: var(--jkl-unit-100); } }
+}
+
+@media (width >= 101.25em) { /* var(--jkl-breakpoint-xxl) */
+    .xxl-2\.1 > :where(:nth-child(2n - 1)), .xxl-10\.2 > :where(:nth-child(2n)) { --jkl-flex-layout: 2; }
+    .xxl-10\.2 > :where(:nth-child(2n - 1)), .xxl-2\.1 > :where(:nth-child(2n)) { --jkl-flex-layout: 10; }
+    .xxl-3\.9 > :where(:nth-child(2n - 1)), .xxl-9\.3 > :where(:nth-child(2n)) { --jkl-flex-layout: 3; }
+    .xxl-9\.3 > :where(:nth-child(2n - 1)), .xxl-3\.9 > :where(:nth-child(2n)) { --jkl-flex-layout: 9; }
+    .xxl-4\.8 > :where(:nth-child(2n - 1)), .xxl-8\.4 > :where(:nth-child(2n)) { --jkl-flex-layout: 4; }
+    .xxl-8\.4 > :where(:nth-child(2n - 1)), .xxl-4\.8 > :where(:nth-child(2n)) { --jkl-flex-layout: 8; }
+    .xxl-5\.7 > :where(:nth-child(2n - 1)), .xxl-7\.5 > :where(:nth-child(2n)) { --jkl-flex-layout: 5; }
+    .xxl-7\.5 > :where(:nth-child(2n - 1)), .xxl-5\.7 > :where(:nth-child(2n)) { --jkl-flex-layout: 7; }
+    .xxl-0 > * { --jkl-flex-layout: auto; } .xxl-1 > * { --jkl-flex-layout: 12; } .xxl-2 > * { --jkl-flex-layout: 6; }
+    .xxl-3 > * { --jkl-flex-layout: 4; } .xxl-4 > * { --jkl-flex-layout: 3; } .xxl-6 > * { --jkl-flex-layout: 2; }
+
+    .xxl-row-gap-none { row-gap: 0; }.xxl-col-gap-none { column-gap: 0;& > * {--jkl-flex-gap: 0px;} }
+    .xxl-row-gap-xs { row-gap: var(--jkl-unit-10); }.xxl-col-gap-xs { column-gap: var(--jkl-unit-10); & > * { --jkl-flex-gap: var(--jkl-unit-10); } }
+    .xxl-row-gap-sm { row-gap: var(--jkl-unit-20); }.xxl-col-gap-sm { column-gap: var(--jkl-unit-20); & > * { --jkl-flex-gap: var(--jkl-unit-20); } }
+    .xxl-row-gap-md { row-gap: var(--jkl-unit-30);}.xxl-col-gap-md { column-gap: var(--jkl-unit-30); & > * { --jkl-flex-gap: var(--jkl-unit-30); } }
+    .xxl-row-gap-lg { row-gap: var(--jkl-unit-40); }.xxl-col-gap-lg { column-gap: var(--jkl-unit-40); & > * { --jkl-flex-gap: var(--jkl-unit-40); } }
+    .xxl-row-gap-xl { row-gap: var(--jkl-unit-50); }.xxl-col-gap-xl { column-gap: var(--jkl-unit-50); & > * { --jkl-flex-gap: var(--jkl-unit-50); } }
+    .xxl-row-gap-xxl { row-gap: var(--jkl-unit-100); }.xxl-col-gap-xxl { column-gap: var(--jkl-unit-100); & > * { --jkl-flex-gap: var(--jkl-unit-100); } }
+}
\ No newline at end of file

From 4a10527db6a6cacb1ec3b2c261f8c88eeed3be66 Mon Sep 17 00:00:00 2001
From: mariaeilertsen <maria.eilertsen@fremtind.no>
Date: Wed, 5 Feb 2025 10:23:46 +0100
Subject: [PATCH 14/14] fix: cleanup

---
 .../jokul/src/components/flex/styles/flex.scss  | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/packages/jokul/src/components/flex/styles/flex.scss b/packages/jokul/src/components/flex/styles/flex.scss
index 4cd2eff8cde..2db76a86710 100644
--- a/packages/jokul/src/components/flex/styles/flex.scss
+++ b/packages/jokul/src/components/flex/styles/flex.scss
@@ -1,24 +1,15 @@
+@charset "UTF-8";
+@use "../../../core/jkl";
+
 :root {
     --container-md: 43.75rem;
     --container-lg: 60rem;
     --container-xl: 75rem;
     --container-xxl: 90rem;
     --container-full: 100%;
-    --jkl-unit-10: 0.5rem;
-    --jkl-unit-05: calc(var(--jkl-unit-10) * 0.5);
-    --jkl-unit-15: calc(var(--jkl-unit-10) * 1.5);
-    --jkl-unit-20: calc(var(--jkl-unit-10) * 2);
-    --jkl-unit-25: calc(var(--jkl-unit-10) * 2.5);
-    --jkl-unit-30: calc(var(--jkl-unit-10) * 3);
-    --jkl-unit-40: calc(var(--jkl-unit-10) * 4);
-    --jkl-unit-50: calc(var(--jkl-unit-10) * 5);
-    --jkl-unit-60: calc(var(--jkl-unit-10) * 6);
-    --jkl-unit-70: calc(var(--jkl-unit-10) * 7);
-    --jkl-unit-80: calc(var(--jkl-unit-10) * 8);
-    --jkl-unit-90: calc(var(--jkl-unit-10) * 9);
-    --jkl-unit-100: calc(var(--jkl-unit-10) * 10);
 }
 
+
 :where(.flex) {
     box-sizing: border-box;
     display: flex;