@pyreon/unistyle 0.11.5 → 0.11.6

package/README.md

@@ -29,7 +29,12 @@ const theme = {
   breakpoints: { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 },
 }
 
-Provider({ theme, children: [/* your app */] })
+Provider({
+  theme,
+  children: [
+    /* your app */
+  ],
+})
 ```
 
 ## API
@@ -71,12 +76,12 @@ theme object → normalize (fill gaps) → transform (property → breakpoint pi
 
 **Parameters:**
 
-| Param | Type | Description |
-| ----- | ---- | ----------- |
-| key | `string` | Theme prop name to read from styled-component props |
-| css | `function` | `css` tagged template function |
-| styles | `function` | Style processor (use the exported `styles`) |
-| normalize | `boolean` | Fill missing breakpoints by inheriting from previous (default: true) |
+| Param     | Type       | Description                                                          |
+| --------- | ---------- | -------------------------------------------------------------------- |
+| key       | `string`   | Theme prop name to read from styled-component props                  |
+| css       | `function` | `css` tagged template function                                       |
+| styles    | `function` | Style processor (use the exported `styles`)                          |
+| normalize | `boolean`  | Fill missing breakpoints by inheriting from previous (default: true) |
 
 ### styles
 
@@ -98,16 +103,16 @@ Supports shorthand properties (`margin`, `padding`, `borderRadius`) with automat
 import { value, values, stripUnit } from '@pyreon/unistyle'
 
 // value(input, rootSize?, outputUnit?) => string | number | null
-value(16)          // => '1rem'     (16 / 16)
-value(24)          // => '1.5rem'   (24 / 16)
-value(0)           // => '0'        (always unitless)
-value('2em')       // => '2em'      (string passthrough)
+value(16) // => '1rem'     (16 / 16)
+value(24) // => '1.5rem'   (24 / 16)
+value(0) // => '0'        (always unitless)
+value('2em') // => '2em'      (string passthrough)
 value(16, 16, 'px') // => '16px'
 
 // stripUnit(input, unitReturn?)
-stripUnit('24px')           // => 24
-stripUnit('24px', true)     // => [24, 'px']
-stripUnit(24)               // => 24
+stripUnit('24px') // => 24
+stripUnit('24px', true) // => [24, 'px']
+stripUnit(24) // => 24
 
 // values(array, rootSize?, outputUnit?) => string
 // Picks first non-null and converts
@@ -122,14 +127,14 @@ import { alignContent, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y } from '@pyreon/
 
 Maps alignment keywords to CSS flex values:
 
-| Keyword | X-axis CSS | Y-axis CSS |
-| ------- | ---------- | ---------- |
-| `left` / `top` | `flex-start` | `flex-start` |
-| `center` | `center` | `center` |
-| `right` / `bottom` | `flex-end` | `flex-end` |
-| `spaceBetween` | `space-between` | `space-between` |
-| `spaceAround` | `space-around` | `space-around` |
-| `block` | `stretch` | `stretch` |
+| Keyword            | X-axis CSS      | Y-axis CSS      |
+| ------------------ | --------------- | --------------- |
+| `left` / `top`     | `flex-start`    | `flex-start`    |
+| `center`           | `center`        | `center`        |
+| `right` / `bottom` | `flex-end`      | `flex-end`      |
+| `spaceBetween`     | `space-between` | `space-between` |
+| `spaceAround`      | `space-around`  | `space-around`  |
+| `block`            | `stretch`       | `stretch`       |
 
 ### Default Breakpoints
 
@@ -155,14 +160,14 @@ Breakpoint values are converted to `em` units in media queries for correct cross
 
 ### Other Exports
 
-| Export | Description |
-| ------ | ----------- |
-| `createMediaQueries` | Builds breakpoint-name → tagged-template-function map |
-| `transformTheme` | Pivots property-centric theme to breakpoint-centric |
-| `normalizeTheme` | Fills gaps so every breakpoint has a complete set of values |
-| `sortBreakpoints` | Sorts breakpoint definitions by value (ascending) |
-| `extendCss` | Helper for processing ExtendCss props (string, function, callback) |
-| `Provider` / `context` | Theme context provider and consumer |
+| Export                 | Description                                                        |
+| ---------------------- | ------------------------------------------------------------------ |
+| `createMediaQueries`   | Builds breakpoint-name → tagged-template-function map              |
+| `transformTheme`       | Pivots property-centric theme to breakpoint-centric                |
+| `normalizeTheme`       | Fills gaps so every breakpoint has a complete set of values        |
+| `sortBreakpoints`      | Sorts breakpoint definitions by value (ascending)                  |
+| `extendCss`            | Helper for processing ExtendCss props (string, function, callback) |
+| `Provider` / `context` | Theme context provider and consumer                                |
 
 ## Responsive Value Formats
 
@@ -183,11 +188,11 @@ When using `normalize: true` (default), missing breakpoints inherit from the pre
 
 ## Peer Dependencies
 
-| Package | Version |
-| ------- | ------- |
-| @pyreon/core | >= 0.0.1 |
+| Package            | Version  |
+| ------------------ | -------- |
+| @pyreon/core       | >= 0.0.1 |
 | @pyreon/reactivity | >= 0.0.1 |
-| @pyreon/ui-core | >= 0.0.1 |
+| @pyreon/ui-core    | >= 0.0.1 |
 
 ## License
 

package/lib/index.d.ts

@@ -22,7 +22,7 @@ type PyreonTheme = {
  * enriched.__PYREON__.sortedBreakpoints // ['xs', 'sm', 'md']
  * enriched.__PYREON__.media.sm          // tagged-template for @media (min-width: 36em)
  */
-declare function enrichTheme<T extends PyreonTheme>(theme: T): T & Required<Pick<PyreonTheme, "__PYREON__">>;
+declare function enrichTheme<T extends PyreonTheme>(theme: T): T & Required<Pick<PyreonTheme, '__PYREON__'>>;
 //#endregion
 //#region src/context.d.ts
 type TProvider = {
@@ -30,9 +30,14 @@ type TProvider = {
   children?: VNode | null;
 };
 /**
+ * @internal Low-level provider — use `PyreonUI` from `@pyreon/ui-core` instead.
+ *
  * Unistyle Provider — wraps the core Provider and enriches the theme
  * with pre-computed sorted breakpoints and media-query tagged-template
  * helpers consumed by `makeItResponsive`.
+ *
+ * @deprecated Prefer `<PyreonUI theme={theme} mode="light">` which handles
+ * all three context layers (styler, core, mode) in one component.
  */
 declare function Provider(props: TProvider): VNode | null;
 //#endregion
@@ -490,12 +495,12 @@ type Styles = ({
 declare const styles$1: Styles;
 //#endregion
 //#region src/types.d.ts
-type Defaults = "initial" | "inherit";
-type Units = "px" | "rem" | "em" | "%" | "vh" | "vw" | "vmin" | "vmax" | "ex";
+type Defaults = 'initial' | 'inherit';
+type Units = 'px' | 'rem' | 'em' | '%' | 'vh' | 'vw' | 'vmin' | 'vmax' | 'ex';
 type UnitValue = number | `${number}${Units}`;
-type PropertyValue = UnitValue | "auto" | Defaults | `calc(${string | number})`;
-type Color = `#${string | number}` | "currentColor" | "transparent" | `rgb(${number}, ${number}, ${number})` | `rgb(${number},${number},${number})` | `rgba(${number}, ${number}, ${number}, ${number})` | `rgba(${number},${number},${number},${number})` | `hsl(${number}, ${number}%, ${number}%)` | `hsl(${number},${number}%,${number}%)` | `hsla(${number}, ${number}%, ${number}%, ${number})` | `hsla(${number},${number}%,${number}%,${number})` | BrowserColors | Defaults;
-type BrowserColors = "black" | "silver" | "gray" | "white" | "maroon" | "red" | "purple" | "fuchsia" | "green" | "lime" | "olive" | "yellow" | "navy" | "blue" | "teal" | "aqua" | "orange" | "aliceblue" | "antiquewhite" | "aquamarine" | "azure" | "beige" | "bisque" | "blanchedalmond" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "limegreen" | "linen" | "magenta" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "oldlace" | "olivedrab" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "whitesmoke" | "yellowgreen" | "rebeccapurple";
+type PropertyValue = UnitValue | 'auto' | Defaults | `calc(${string | number})`;
+type Color = `#${string | number}` | 'currentColor' | 'transparent' | `rgb(${number}, ${number}, ${number})` | `rgb(${number},${number},${number})` | `rgba(${number}, ${number}, ${number}, ${number})` | `rgba(${number},${number},${number},${number})` | `hsl(${number}, ${number}%, ${number}%)` | `hsl(${number},${number}%,${number}%)` | `hsla(${number}, ${number}%, ${number}%, ${number})` | `hsla(${number},${number}%,${number}%,${number})` | BrowserColors | Defaults;
+type BrowserColors = 'black' | 'silver' | 'gray' | 'white' | 'maroon' | 'red' | 'purple' | 'fuchsia' | 'green' | 'lime' | 'olive' | 'yellow' | 'navy' | 'blue' | 'teal' | 'aqua' | 'orange' | 'aliceblue' | 'antiquewhite' | 'aquamarine' | 'azure' | 'beige' | 'bisque' | 'blanchedalmond' | 'blueviolet' | 'brown' | 'burlywood' | 'cadetblue' | 'chartreuse' | 'chocolate' | 'coral' | 'cornflowerblue' | 'cornsilk' | 'crimson' | 'cyan' | 'darkblue' | 'darkcyan' | 'darkgoldenrod' | 'darkgray' | 'darkgreen' | 'darkgrey' | 'darkkhaki' | 'darkmagenta' | 'darkolivegreen' | 'darkorange' | 'darkorchid' | 'darkred' | 'darksalmon' | 'darkseagreen' | 'darkslateblue' | 'darkslategray' | 'darkslategrey' | 'darkturquoise' | 'darkviolet' | 'deeppink' | 'deepskyblue' | 'dimgray' | 'dimgrey' | 'dodgerblue' | 'firebrick' | 'floralwhite' | 'forestgreen' | 'gainsboro' | 'ghostwhite' | 'gold' | 'goldenrod' | 'greenyellow' | 'grey' | 'honeydew' | 'hotpink' | 'indianred' | 'indigo' | 'ivory' | 'khaki' | 'lavender' | 'lavenderblush' | 'lawngreen' | 'lemonchiffon' | 'lightblue' | 'lightcoral' | 'lightcyan' | 'lightgoldenrodyellow' | 'lightgray' | 'lightgreen' | 'lightgrey' | 'lightpink' | 'lightsalmon' | 'lightseagreen' | 'lightskyblue' | 'lightslategray' | 'lightslategrey' | 'lightsteelblue' | 'lightyellow' | 'limegreen' | 'linen' | 'magenta' | 'mediumaquamarine' | 'mediumblue' | 'mediumorchid' | 'mediumpurple' | 'mediumseagreen' | 'mediumslateblue' | 'mediumspringgreen' | 'mediumturquoise' | 'mediumvioletred' | 'midnightblue' | 'mintcream' | 'mistyrose' | 'moccasin' | 'navajowhite' | 'oldlace' | 'olivedrab' | 'orangered' | 'orchid' | 'palegoldenrod' | 'palegreen' | 'paleturquoise' | 'palevioletred' | 'papayawhip' | 'peachpuff' | 'peru' | 'pink' | 'plum' | 'powderblue' | 'rosybrown' | 'royalblue' | 'saddlebrown' | 'salmon' | 'sandybrown' | 'seagreen' | 'seashell' | 'sienna' | 'skyblue' | 'slateblue' | 'slategray' | 'slategrey' | 'snow' | 'springgreen' | 'steelblue' | 'tan' | 'thistle' | 'tomato' | 'turquoise' | 'violet' | 'wheat' | 'whitesmoke' | 'yellowgreen' | 'rebeccapurple';
 //#endregion
 //#region src/units/stripUnit.d.ts
 type Value$1<V> = V extends string ? number : V;
@@ -504,12 +509,12 @@ type StripUnit = <V extends string | number, UR extends boolean = false>(value:
 declare const stripUnit: StripUnit;
 //#endregion
 //#region src/units/value.d.ts
-type CssUnits$1 = "px" | "rem" | "%" | "em" | "ex" | "cm" | "mm" | "in" | "pt" | "pc" | "ch" | "vh" | "vw" | "vmin" | "vmax";
+type CssUnits$1 = 'px' | 'rem' | '%' | 'em' | 'ex' | 'cm' | 'mm' | 'in' | 'pt' | 'pc' | 'ch' | 'vh' | 'vw' | 'vmin' | 'vmax';
 type Value = (param: string | number | null | undefined, rootSize?: number, outputUnit?: CssUnits$1) => string | number | null;
 declare const value: Value;
 //#endregion
 //#region src/units/values.d.ts
-type CssUnits = "px" | "rem" | "%" | "em" | "ex" | "cm" | "mm" | "in" | "pt" | "pc" | "ch" | "vh" | "vw" | "vmin" | "vmax";
+type CssUnits = 'px' | 'rem' | '%' | 'em' | 'ex' | 'cm' | 'mm' | 'in' | 'pt' | 'pc' | 'ch' | 'vh' | 'vw' | 'vmin' | 'vmax';
 type Values = (items: unknown[], rootSize?: number, outputUnit?: CssUnits) => string | number | null;
 declare const values: Values;
 //#endregion

package/lib/index.js

@@ -25,10 +25,10 @@ const createMediaQueries = ((props) => {
 		else if (breakpointValue != null) {
 			const emSize = breakpointValue / rootSize;
 			acc[key] = (...args) => css`
-          @media only screen and (min-width: ${emSize}em) {
-            ${css(...args)};
-          }
-        `;
+        @media only screen and (min-width: ${emSize}em) {
+          ${css(...args)};
+        }
+      `;
 		}
 		return acc;
 	}, {});
@@ -211,9 +211,14 @@ function enrichTheme(theme) {
 //#endregion
 //#region src/context.tsx
 /**
+* @internal Low-level provider — use `PyreonUI` from `@pyreon/ui-core` instead.
+*
 * Unistyle Provider — wraps the core Provider and enriches the theme
 * with pre-computed sorted breakpoints and media-query tagged-template
 * helpers consumed by `makeItResponsive`.
+*
+* @deprecated Prefer `<PyreonUI theme={theme} mode="light">` which handles
+* all three context layers (styler, core, mode) in one component.
 */
 function Provider(props) {
 	const { theme, children } = props;

package/package.json

@@ -1,24 +1,13 @@
 {
   "name": "@pyreon/unistyle",
-  "version": "0.11.5",
+  "version": "0.11.6",
+  "description": "Responsive theming and breakpoint utilities for Pyreon",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon",
     "directory": "packages/ui-system/unistyle"
   },
-  "description": "Responsive theming and breakpoint utilities for Pyreon",
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "bun": "./src/index.ts",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
-    }
-  },
-  "types": "./lib/index.d.ts",
-  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -27,8 +16,16 @@
     "LICENSE",
     "src"
   ],
-  "engines": {
-    "node": ">= 22"
+  "type": "module",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -37,20 +34,23 @@
     "prepublish": "bun run build",
     "build": "bun run vl_rolldown_build",
     "build:watch": "bun run vl_rolldown_build-watch",
-    "lint": "biome check src/",
+    "lint": "oxlint .",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   },
+  "devDependencies": {
+    "@pyreon/typescript": "^0.11.6",
+    "@vitus-labs/tools-rolldown": "^1.15.3"
+  },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.5",
-    "@pyreon/reactivity": "^0.11.5",
-    "@pyreon/ui-core": "^0.11.5",
-    "@pyreon/styler": "^0.11.5"
+    "@pyreon/core": "^0.11.6",
+    "@pyreon/reactivity": "^0.11.6",
+    "@pyreon/styler": "^0.11.6",
+    "@pyreon/ui-core": "^0.11.6"
   },
-  "devDependencies": {
-    "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.11.5"
+  "engines": {
+    "node": ">= 22"
   }
 }

package/src/__tests__/alignContent.test.ts

@@ -1,120 +1,120 @@
-import { describe, expect, it } from "vitest"
-import alignContent from "../styles/alignContent"
+import { describe, expect, it } from 'vitest'
+import alignContent from '../styles/alignContent'
 
-describe("alignContent", () => {
-  it("returns null for empty attrs", () => {
+describe('alignContent', () => {
+  it('returns null for empty attrs', () => {
     expect(alignContent({} as any)).toBeNull()
   })
 
-  it("returns null when direction is missing", () => {
-    expect(alignContent({ alignX: "left", alignY: "top" } as any)).toBeNull()
+  it('returns null when direction is missing', () => {
+    expect(alignContent({ alignX: 'left', alignY: 'top' } as any)).toBeNull()
   })
 
-  it("returns null when alignX is missing", () => {
-    expect(alignContent({ direction: "inline", alignY: "top" } as any)).toBeNull()
+  it('returns null when alignX is missing', () => {
+    expect(alignContent({ direction: 'inline', alignY: 'top' } as any)).toBeNull()
   })
 
-  it("returns null when alignY is missing", () => {
-    expect(alignContent({ direction: "inline", alignX: "left" } as any)).toBeNull()
+  it('returns null when alignY is missing', () => {
+    expect(alignContent({ direction: 'inline', alignX: 'left' } as any)).toBeNull()
   })
 
-  describe("inline direction (reverted)", () => {
-    it("returns row with align-items from Y and justify-content from X", () => {
-      const result = alignContent({ direction: "inline", alignX: "left", alignY: "top" })
+  describe('inline direction (reverted)', () => {
+    it('returns row with align-items from Y and justify-content from X', () => {
+      const result = alignContent({ direction: 'inline', alignX: 'left', alignY: 'top' })
       expect(result).toBe(
-        "flex-direction: row; align-items: flex-start; justify-content: flex-start;",
+        'flex-direction: row; align-items: flex-start; justify-content: flex-start;',
       )
     })
 
-    it("maps right/bottom correctly", () => {
-      const result = alignContent({ direction: "inline", alignX: "right", alignY: "bottom" })
-      expect(result).toBe("flex-direction: row; align-items: flex-end; justify-content: flex-end;")
+    it('maps right/bottom correctly', () => {
+      const result = alignContent({ direction: 'inline', alignX: 'right', alignY: 'bottom' })
+      expect(result).toBe('flex-direction: row; align-items: flex-end; justify-content: flex-end;')
     })
 
-    it("maps center/center", () => {
-      const result = alignContent({ direction: "inline", alignX: "center", alignY: "center" })
-      expect(result).toBe("flex-direction: row; align-items: center; justify-content: center;")
+    it('maps center/center', () => {
+      const result = alignContent({ direction: 'inline', alignX: 'center', alignY: 'center' })
+      expect(result).toBe('flex-direction: row; align-items: center; justify-content: center;')
     })
 
-    it("maps spaceBetween/spaceAround", () => {
+    it('maps spaceBetween/spaceAround', () => {
       const result = alignContent({
-        direction: "inline",
-        alignX: "spaceBetween",
-        alignY: "spaceAround",
+        direction: 'inline',
+        alignX: 'spaceBetween',
+        alignY: 'spaceAround',
       })
       expect(result).toBe(
-        "flex-direction: row; align-items: space-around; justify-content: space-between;",
+        'flex-direction: row; align-items: space-around; justify-content: space-between;',
       )
     })
 
-    it("maps block/block", () => {
-      const result = alignContent({ direction: "inline", alignX: "block", alignY: "block" })
-      expect(result).toBe("flex-direction: row; align-items: stretch; justify-content: stretch;")
+    it('maps block/block', () => {
+      const result = alignContent({ direction: 'inline', alignX: 'block', alignY: 'block' })
+      expect(result).toBe('flex-direction: row; align-items: stretch; justify-content: stretch;')
     })
   })
 
-  describe("reverseInline direction (reverted)", () => {
-    it("returns row-reverse with align-items from Y and justify-content from X", () => {
-      const result = alignContent({ direction: "reverseInline", alignX: "left", alignY: "top" })
+  describe('reverseInline direction (reverted)', () => {
+    it('returns row-reverse with align-items from Y and justify-content from X', () => {
+      const result = alignContent({ direction: 'reverseInline', alignX: 'left', alignY: 'top' })
       expect(result).toBe(
-        "flex-direction: row-reverse; align-items: flex-start; justify-content: flex-start;",
+        'flex-direction: row-reverse; align-items: flex-start; justify-content: flex-start;',
       )
     })
 
-    it("maps center/bottom", () => {
+    it('maps center/bottom', () => {
       const result = alignContent({
-        direction: "reverseInline",
-        alignX: "center",
-        alignY: "bottom",
+        direction: 'reverseInline',
+        alignX: 'center',
+        alignY: 'bottom',
       })
       expect(result).toBe(
-        "flex-direction: row-reverse; align-items: flex-end; justify-content: center;",
+        'flex-direction: row-reverse; align-items: flex-end; justify-content: center;',
       )
     })
   })
 
-  describe("rows direction (non-reverted)", () => {
-    it("returns column with align-items from X and justify-content from Y", () => {
-      const result = alignContent({ direction: "rows", alignX: "left", alignY: "top" })
+  describe('rows direction (non-reverted)', () => {
+    it('returns column with align-items from X and justify-content from Y', () => {
+      const result = alignContent({ direction: 'rows', alignX: 'left', alignY: 'top' })
       expect(result).toBe(
-        "flex-direction: column; align-items: flex-start; justify-content: flex-start;",
+        'flex-direction: column; align-items: flex-start; justify-content: flex-start;',
       )
     })
 
-    it("maps right/bottom correctly", () => {
-      const result = alignContent({ direction: "rows", alignX: "right", alignY: "bottom" })
+    it('maps right/bottom correctly', () => {
+      const result = alignContent({ direction: 'rows', alignX: 'right', alignY: 'bottom' })
       expect(result).toBe(
-        "flex-direction: column; align-items: flex-end; justify-content: flex-end;",
+        'flex-direction: column; align-items: flex-end; justify-content: flex-end;',
       )
     })
 
-    it("maps center/spaceBetween", () => {
-      const result = alignContent({ direction: "rows", alignX: "center", alignY: "spaceBetween" })
+    it('maps center/spaceBetween', () => {
+      const result = alignContent({ direction: 'rows', alignX: 'center', alignY: 'spaceBetween' })
       expect(result).toBe(
-        "flex-direction: column; align-items: center; justify-content: space-between;",
+        'flex-direction: column; align-items: center; justify-content: space-between;',
       )
     })
 
-    it("maps spaceAround/block", () => {
-      const result = alignContent({ direction: "rows", alignX: "spaceAround", alignY: "block" })
+    it('maps spaceAround/block', () => {
+      const result = alignContent({ direction: 'rows', alignX: 'spaceAround', alignY: 'block' })
       expect(result).toBe(
-        "flex-direction: column; align-items: space-around; justify-content: stretch;",
+        'flex-direction: column; align-items: space-around; justify-content: stretch;',
       )
     })
   })
 
-  describe("reverseRows direction (non-reverted)", () => {
-    it("returns column-reverse with align-items from X and justify-content from Y", () => {
-      const result = alignContent({ direction: "reverseRows", alignX: "left", alignY: "top" })
+  describe('reverseRows direction (non-reverted)', () => {
+    it('returns column-reverse with align-items from X and justify-content from Y', () => {
+      const result = alignContent({ direction: 'reverseRows', alignX: 'left', alignY: 'top' })
       expect(result).toBe(
-        "flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start;",
+        'flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start;',
       )
     })
 
-    it("maps block/center", () => {
-      const result = alignContent({ direction: "reverseRows", alignX: "block", alignY: "center" })
+    it('maps block/center', () => {
+      const result = alignContent({ direction: 'reverseRows', alignX: 'block', alignY: 'center' })
       expect(result).toBe(
-        "flex-direction: column-reverse; align-items: stretch; justify-content: center;",
+        'flex-direction: column-reverse; align-items: stretch; justify-content: center;',
       )
     })
   })