@esportsplus/ui 0.1.8 → 0.2.2

package/src/tokens/scss/spacer.scss

@@ -1,8 +1,8 @@
-@use '../../lib';
-@use 'size';
-
-$spacer: (
-    300: lib.map-get(size.$size, 900) * 1,
-    400: lib.map-get(size.$size, 900) * 2,
-    500: lib.map-get(size.$size, 900) * 3
-);
+@use '../../lib';
+@use 'size';
+
+$spacer: (
+    300: lib.map-get(size.$size, 900) * 1,
+    400: lib.map-get(size.$size, 900) * 2,
+    500: lib.map-get(size.$size, 900) * 3
+);

package/src/tokens/scss/state.scss

@@ -1,86 +1,86 @@
-/**
- *------------------------------------------------------------------------------
- *
- *  Buttons, Links, And Other Modules Display CSS Properties Based On Module
- *  'State' ( :hover, :active, etc. )
- *
- *  Desired Result:
- *  - Default Colors Assigned To Element;
- *  - On 'highlight' Or ':hover' Display A Slightly Brighter Version Of
- *    The Default Color;
- *  - On 'pressed' Or ':active' Display Slightly Darker Version Of The
- *    Default Color;
- *
- *  End Product Gives Off The Illusion Of A Static -> Hovering -> Pressed
- *  Button Without Dealing With Transforms To Shift Elements.
- *
- *  Mixin Also Handles Removing Duplicate List Keys
- *
- */
-
-@use '../../lib';
-
-$state: (
-    active: '&.--active',
-    inactive: '&:not(.--active)',
-
-    disabled: '&.--disabled',
-    enabled: '&:not(.--disabled)',
-
-    default: '&:not(.--active):not(:hover)',
-    hover: '&:not(.--active):hover',
-    pressed: '&:not(.--active):active'
-);
-
-
-@function state($key, $replace: null) {
-    $selector: lib.map-get($state, $key);
-
-    // To Avoid Overcomplicating The Responsibility Of This Function Limit
-    // Replace Parameter To String Values Only
-    @if $replace {
-        @if type-of($replace) != 'string' or type-of($selector) != 'string' {
-            @error "'lib.string-replace' Cannot Be Used On A List!";
-        }
-
-        $selector: lib.string-replace('&', $replace, $selector);
-    }
-
-    @return $selector;
-}
-
-
-@mixin state($states) {
-    $selector: ();
-
-    @each $s in lib.list-to-list($states) {
-        $section: state($s);
-
-        @if $section {
-            $selector: lib.list-append($selector, $section);
-        }
-    }
-
-    #{lib.list-implode(',', lib.list-unique($selector))} {
-        @content;
-    }
-}
-
-@mixin state-utility($class, $property, $values) {
-    $keys: $values;
-
-    @if type-of($keys) == 'map' {
-        $keys: lib.map-keys($keys);
-    }
-
-    #{$class} {
-        @each $key in $keys {
-            &-#{$key} {
-                --#{$property}-active: var(--color-#{$key}-300);
-                --#{$property}-default: var(--color-#{$key}-400);
-                --#{$property}-hover: var(--color-#{$key}-300);
-                --#{$property}-pressed: var(--color-#{$key}-500);
-            }
-        }
-    }
-}
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Buttons, Links, And Other Modules Display CSS Properties Based On Module
+ *  'State' ( :hover, :active, etc. )
+ *
+ *  Desired Result:
+ *  - Default Colors Assigned To Element;
+ *  - On 'highlight' Or ':hover' Display A Slightly Brighter Version Of
+ *    The Default Color;
+ *  - On 'pressed' Or ':active' Display Slightly Darker Version Of The
+ *    Default Color;
+ *
+ *  End Product Gives Off The Illusion Of A Static -> Hovering -> Pressed
+ *  Button Without Dealing With Transforms To Shift Elements.
+ *
+ *  Mixin Also Handles Removing Duplicate List Keys
+ *
+ */
+
+@use '../../lib';
+
+$state: (
+    active: '&.--active',
+    inactive: '&:not(.--active)',
+
+    disabled: '&.--disabled',
+    enabled: '&:not(.--disabled)',
+
+    default: '&:not(.--active):not(:hover)',
+    hover: '&:not(.--active):hover',
+    pressed: '&:not(.--active):active'
+);
+
+
+@function state($key, $replace: null) {
+    $selector: lib.map-get($state, $key);
+
+    // To Avoid Overcomplicating The Responsibility Of This Function Limit
+    // Replace Parameter To String Values Only
+    @if $replace {
+        @if type-of($replace) != 'string' or type-of($selector) != 'string' {
+            @error "'lib.string-replace' Cannot Be Used On A List!";
+        }
+
+        $selector: lib.string-replace('&', $replace, $selector);
+    }
+
+    @return $selector;
+}
+
+
+@mixin state($states) {
+    $selector: ();
+
+    @each $s in lib.list-to-list($states) {
+        $section: state($s);
+
+        @if $section {
+            $selector: lib.list-append($selector, $section);
+        }
+    }
+
+    #{lib.list-implode(',', lib.list-unique($selector))} {
+        @content;
+    }
+}
+
+@mixin state-utility($class, $property, $values) {
+    $keys: $values;
+
+    @if type-of($keys) == 'map' {
+        $keys: lib.map-keys($keys);
+    }
+
+    #{$class} {
+        @each $key in $keys {
+            &-#{$key} {
+                --#{$property}-active: var(--color-#{$key}-300);
+                --#{$property}-default: var(--color-#{$key}-400);
+                --#{$property}-hover: var(--color-#{$key}-300);
+                --#{$property}-pressed: var(--color-#{$key}-500);
+            }
+        }
+    }
+}

package/src/tokens/scss/transition-duration.scss

@@ -1,5 +1,5 @@
-$transition-duration: (
-    300: 0.08s,
-    400: 0.16s,
-    500: 0.24s
-);
+$transition-duration: (
+    300: 0.08s,
+    400: 0.16s,
+    500: 0.24s
+);

package/storage/fonts/montserrat/index.css

@@ -1,79 +1,79 @@
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Montserrat Regular'), local('Montserrat-Regular'),
-         url('Montserrat-Regular.woff2') format('woff2'),
-         url('Montserrat-Regular.woff') format('woff');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: italic;
-    font-weight: 400;
-    src: local('Montserrat Italic'), local('Montserrat-Italic'),
-         url('Montserrat-Italic.woff2') format('woff2'),
-         url('Montserrat-Italic.woff') format('woff');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 500;
-    src: local('Montserrat Medium'), local('Montserrat-Medium'),
-         url('Montserrat-Medium.woff2') format('woff2'),
-         url('Montserrat-Medium.woff') format('woff');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: italic;
-    font-weight: 500;
-    src: local('Montserrat MediumItalic'), local('Montserrat-MediumItalic'),
-         url('Montserrat-MediumItalic.woff2') format('woff2'),
-         url('Montserrat-MediumItalic.woff') format('woff');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 600;
-    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
-         url('Montserrat-SemiBold.woff2') format('woff2'),
-         url('Montserrat-SemiBold.woff') format('woff');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: italic;
-    font-weight: 600;
-    src: local('Montserrat SemiBoldItalic'), local('Montserrat-SemiBoldItalic'),
-         url('Montserrat-SemiBoldItalic.woff2') format('woff2'),
-         url('Montserrat-SemiBoldItalic.woff') format('woff');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 700;
-    src: local('Montserrat Bold'), local('Montserrat Bold'),
-         url('Montserrat-Bold.woff2') format('woff2'),
-         url('Montserrat-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: italic;
-    font-weight: 700;
-    src: local('Montserrat BoldItalic'), local('Montserrat-BoldItalic'),
-         url('Montserrat-BoldItalic.woff2') format('woff2'),
-         url('Montserrat-BoldItalic.woff') format('woff');
-}
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Montserrat Regular'), local('Montserrat-Regular'),
+         url('Montserrat-Regular.woff2') format('woff2'),
+         url('Montserrat-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 400;
+    src: local('Montserrat Italic'), local('Montserrat-Italic'),
+         url('Montserrat-Italic.woff2') format('woff2'),
+         url('Montserrat-Italic.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Montserrat Medium'), local('Montserrat-Medium'),
+         url('Montserrat-Medium.woff2') format('woff2'),
+         url('Montserrat-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 500;
+    src: local('Montserrat MediumItalic'), local('Montserrat-MediumItalic'),
+         url('Montserrat-MediumItalic.woff2') format('woff2'),
+         url('Montserrat-MediumItalic.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
+         url('Montserrat-SemiBold.woff2') format('woff2'),
+         url('Montserrat-SemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 600;
+    src: local('Montserrat SemiBoldItalic'), local('Montserrat-SemiBoldItalic'),
+         url('Montserrat-SemiBoldItalic.woff2') format('woff2'),
+         url('Montserrat-SemiBoldItalic.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Montserrat Bold'), local('Montserrat Bold'),
+         url('Montserrat-Bold.woff2') format('woff2'),
+         url('Montserrat-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 700;
+    src: local('Montserrat BoldItalic'), local('Montserrat-BoldItalic'),
+         url('Montserrat-BoldItalic.woff2') format('woff2'),
+         url('Montserrat-BoldItalic.woff') format('woff');
+}

package/tokens.scss

@@ -1,2 +1,2 @@
-// Dart sass doesn't support changing root directory for the package to 'src'
+// Dart sass doesn't support changing root directory for the package to 'src'
 @forward './src/tokens';

package/tsconfig.json

@@ -1,11 +1,11 @@
-{
-    "compilerOptions": {
-        "baseUrl": ".",
-        "declaration": true,
-        "declarationDir": "build",
-        "outDir": "build"
-    },
-    "exclude": ["node_modules"],
-    "extends": "./node_modules/@esportsplus/typescript/tsconfig.base.json",
-    "include": ["src"]
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "declaration": true,
+        "declarationDir": "build",
+        "outDir": "build"
+    },
+    "exclude": ["node_modules"],
+    "extends": "./node_modules/@esportsplus/typescript/tsconfig.base.json",
+    "include": ["src"]
 }

package/utilities/styles.css

@@ -1,4 +1,5 @@
 .--background-state{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default)}.--background-state.--active{--background: var(--background-active)}.--background-state:not(.--active):hover{--background: var(--background-hover)}.--background-state:not(.--active):active{--background: var(--background-pressed)}.--border,.--border-bottom,.--border-left,.--border-right,.--border-top{--border-color: var(--border-color-default);--border-style: solid;--border-width: var(--border-width-400)}.--border-dashed{--border-style: dashed}.--border-dotted{--border-style: dotted}.--border-radius{--border-radius: var(--border-radius-400)}.--border-radius-0px{--border-radius: var(--border-radius-0px)}.--border-radius-circle{--border-radius: var(--border-radius-circle)}.--border-radius-curved{--border-radius: var(--border-radius-curved)}.--border-radius-100{--border-radius: var(--border-radius-100)}.--border-radius-200{--border-radius: var(--border-radius-200)}.--border-radius-300{--border-radius: var(--border-radius-300)}.--border-radius-400{--border-radius: var(--border-radius-400)}.--border-radius-500{--border-radius: var(--border-radius-500)}.--border-radius-600{--border-radius: var(--border-radius-600)}.--border-state{--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: transparent;--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default)}.--border-state.--active{--border-color: var(--border-color-active)}.--border-state:not(.--active):hover{--border-color: var(--border-color-hover)}.--border-state:not(.--active):active{--border-color: var(--border-color-pressed)}.--border-width{--border-width: var(--border-width-400)}.--border-width-400{--border-width: var(--border-width-400)}.--border-width-500{--border-width: var(--border-width-500)}.--border-width-600{--border-width: var(--border-width-600)}.--border-width-700{--border-width: var(--border-width-700)}.--color-inherit{--color: inherit}.--color-state{--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default)}.--color-state.--active{--color: var(--color-active)}.--color-state:not(.--active):hover{--color: var(--color-hover)}.--color-state:not(.--active):active{--color: var(--color-pressed)}.--background-primary{--background-active: var(--color-primary-300);--background-default: var(--color-primary-400);--background-hover: var(--color-primary-300);--background-pressed: var(--color-primary-500)}.--background-secondary{--background-active: var(--color-secondary-300);--background-default: var(--color-secondary-400);--background-hover: var(--color-secondary-300);--background-pressed: var(--color-secondary-500)}.--background-black{--background-active: var(--color-black-300);--background-default: var(--color-black-400);--background-hover: var(--color-black-300);--background-pressed: var(--color-black-500)}.--background-blue{--background-active: var(--color-blue-300);--background-default: var(--color-blue-400);--background-hover: var(--color-blue-300);--background-pressed: var(--color-blue-500)}.--background-border{--background-active: var(--color-border-300);--background-default: var(--color-border-400);--background-hover: var(--color-border-300);--background-pressed: var(--color-border-500)}.--background-green{--background-active: var(--color-green-300);--background-default: var(--color-green-400);--background-hover: var(--color-green-300);--background-pressed: var(--color-green-500)}.--background-grey{--background-active: var(--color-grey-300);--background-default: var(--color-grey-400);--background-hover: var(--color-grey-300);--background-pressed: var(--color-grey-500)}.--background-purple{--background-active: var(--color-purple-300);--background-default: var(--color-purple-400);--background-hover: var(--color-purple-300);--background-pressed: var(--color-purple-500)}.--background-red{--background-active: var(--color-red-300);--background-default: var(--color-red-400);--background-hover: var(--color-red-300);--background-pressed: var(--color-red-500)}.--background-text{--background-active: var(--color-text-300);--background-default: var(--color-text-400);--background-hover: var(--color-text-300);--background-pressed: var(--color-text-500)}.--background-white{--background-active: var(--color-white-300);--background-default: var(--color-white-400);--background-hover: var(--color-white-300);--background-pressed: var(--color-white-500)}.--background-yellow{--background-active: var(--color-yellow-300);--background-default: var(--color-yellow-400);--background-hover: var(--color-yellow-300);--background-pressed: var(--color-yellow-500)}.--border-primary{--border-color-active: var(--color-primary-300);--border-color-default: var(--color-primary-400);--border-color-hover: var(--color-primary-300);--border-color-pressed: var(--color-primary-500)}.--border-secondary{--border-color-active: var(--color-secondary-300);--border-color-default: var(--color-secondary-400);--border-color-hover: var(--color-secondary-300);--border-color-pressed: var(--color-secondary-500)}.--border-black{--border-color-active: var(--color-black-300);--border-color-default: var(--color-black-400);--border-color-hover: var(--color-black-300);--border-color-pressed: var(--color-black-500)}.--border-blue{--border-color-active: var(--color-blue-300);--border-color-default: var(--color-blue-400);--border-color-hover: var(--color-blue-300);--border-color-pressed: var(--color-blue-500)}.--border-border{--border-color-active: var(--color-border-300);--border-color-default: var(--color-border-400);--border-color-hover: var(--color-border-300);--border-color-pressed: var(--color-border-500)}.--border-green{--border-color-active: var(--color-green-300);--border-color-default: var(--color-green-400);--border-color-hover: var(--color-green-300);--border-color-pressed: var(--color-green-500)}.--border-grey{--border-color-active: var(--color-grey-300);--border-color-default: var(--color-grey-400);--border-color-hover: var(--color-grey-300);--border-color-pressed: var(--color-grey-500)}.--border-purple{--border-color-active: var(--color-purple-300);--border-color-default: var(--color-purple-400);--border-color-hover: var(--color-purple-300);--border-color-pressed: var(--color-purple-500)}.--border-red{--border-color-active: var(--color-red-300);--border-color-default: var(--color-red-400);--border-color-hover: var(--color-red-300);--border-color-pressed: var(--color-red-500)}.--border-text{--border-color-active: var(--color-text-300);--border-color-default: var(--color-text-400);--border-color-hover: var(--color-text-300);--border-color-pressed: var(--color-text-500)}.--border-white{--border-color-active: var(--color-white-300);--border-color-default: var(--color-white-400);--border-color-hover: var(--color-white-300);--border-color-pressed: var(--color-white-500)}.--border-yellow{--border-color-active: var(--color-yellow-300);--border-color-default: var(--color-yellow-400);--border-color-hover: var(--color-yellow-300);--border-color-pressed: var(--color-yellow-500)}.--color-primary{--color-active: var(--color-primary-300);--color-default: var(--color-primary-400);--color-hover: var(--color-primary-300);--color-pressed: var(--color-primary-500)}.--color-secondary{--color-active: var(--color-secondary-300);--color-default: var(--color-secondary-400);--color-hover: var(--color-secondary-300);--color-pressed: var(--color-secondary-500)}.--color-black{--color-active: var(--color-black-300);--color-default: var(--color-black-400);--color-hover: var(--color-black-300);--color-pressed: var(--color-black-500)}.--color-blue{--color-active: var(--color-blue-300);--color-default: var(--color-blue-400);--color-hover: var(--color-blue-300);--color-pressed: var(--color-blue-500)}.--color-border{--color-active: var(--color-border-300);--color-default: var(--color-border-400);--color-hover: var(--color-border-300);--color-pressed: var(--color-border-500)}.--color-green{--color-active: var(--color-green-300);--color-default: var(--color-green-400);--color-hover: var(--color-green-300);--color-pressed: var(--color-green-500)}.--color-grey{--color-active: var(--color-grey-300);--color-default: var(--color-grey-400);--color-hover: var(--color-grey-300);--color-pressed: var(--color-grey-500)}.--color-purple{--color-active: var(--color-purple-300);--color-default: var(--color-purple-400);--color-hover: var(--color-purple-300);--color-pressed: var(--color-purple-500)}.--color-red{--color-active: var(--color-red-300);--color-default: var(--color-red-400);--color-hover: var(--color-red-300);--color-pressed: var(--color-red-500)}.--color-text{--color-active: var(--color-text-300);--color-default: var(--color-text-400);--color-hover: var(--color-text-300);--color-pressed: var(--color-text-500)}.--color-white{--color-active: var(--color-white-300);--color-default: var(--color-white-400);--color-hover: var(--color-white-300);--color-pressed: var(--color-white-500)}.--color-yellow{--color-active: var(--color-yellow-300);--color-default: var(--color-yellow-400);--color-hover: var(--color-yellow-300);--color-pressed: var(--color-yellow-500)}
+.--margin,.--margin-horizontal{margin-left:var(--margin-horizontal);margin-right:var(--margin-horizontal)}.--margin,.--margin-vertical{margin-bottom:var(--margin-vertical);margin-top:var(--margin-vertical)}.--margin-bottom{margin-bottom:var(--margin-vertical)}.--margin-top{margin-top:var(--margin-vertical)}.--margin-left{margin-left:var(--margin-horizontal)}.--margin-right{margin-right:var(--margin-horizontal)}.--padding,.--padding-horizontal{padding-left:var(--padding-horizontal);padding-right:var(--padding-horizontal)}.--padding.--border,.--padding-horizontal.--border{padding-left:calc(var(--padding-horizontal) - var(--border-width));padding-right:calc(var(--padding-horizontal) - var(--border-width))}.--padding,.--padding-vertical{padding-bottom:var(--padding-vertical);padding-top:var(--padding-vertical)}.--padding.--border,.--padding-vertical.--border{padding-bottom:calc(var(--padding-vertical) - var(--border-width));padding-top:calc(var(--padding-vertical) - var(--border-width))}.--padding-bottom{padding-bottom:var(--padding-vertical)}.--padding-top{padding-top:var(--padding-vertical)}.--padding-left{padding-left:var(--padding-horizontal)}.--padding-right{padding-right:var(--padding-horizontal)}
 .--absolute-bottom,.--absolute-top{left:0;position:absolute;right:0}.--absolute-left,.--absolute-right{bottom:0;position:absolute;top:0}.--absolute-center{position:absolute;bottom:50%;right:50%;transform:translate(50%, 50%)}.--absolute-full{position:absolute;top:0;right:0;bottom:0;left:0}.--absolute-horizontal,.--absolute-horizontal-bottom,.--absolute-horizontal-top{position:absolute;right:50%;transform:translateX(50%)}.--absolute-vertical,.--absolute-vertical-left,.--absolute-vertical-right{position:absolute;bottom:50%;transform:translateY(50%)}.--absolute-bottom,.--absolute-horizontal-bottom{bottom:0}.--absolute-top,.--absolute-horizontal-top{top:0}.--absolute-left,.--absolute-vertical-left{left:0}.--absolute-right,.--absolute-vertical-right{right:0}
 .--border{border:var(--border-width) var(--border-style) var(--border-color)}.--border-bottom{border-bottom:var(--border-width) var(--border-style) var(--border-color)}.--border-left{border-left:var(--border-width) var(--border-style) var(--border-color)}.--border-right{border-right:var(--border-width) var(--border-style) var(--border-color)}.--border-top{border-top:var(--border-width) var(--border-style) var(--border-color)}.--border-offset-bottom{margin-bottom:calc(var(--border-width)*-1)}.--border-offset-left{margin-left:calc(var(--border-width)*-1)}.--border-offset-right{margin-right:calc(var(--border-width)*-1)}.--border-offset-top{margin-top:calc(var(--border-width)*-1)}.--border-radius{border-radius:var(--border-radius)}
 .--disabled{opacity:.64;pointer-events:none}
@@ -13,4 +14,3 @@
 .--text-bold{font-weight:var(--font-weight-500)}.--text-bold-600{font-weight:var(--font-weight-600)}.--text-center{text-align:center}.--text-crop::after,.--text-crop::before,.--text-crop-bottom::after,.--text-crop-top::before{content:"";display:block;height:0;width:100%}.--text-crop::after,.--text-crop-bottom::after{margin-bottom:calc((1 - var(--line-height))*.618em)}.--text-crop::before,.--text-crop-top::before{margin-top:calc((1 - var(--line-height))*.618em)}.--text-italic{font-style:italic}.--text-linethrough{text-decoration:line-through}.--text-multiplier{font-size:calc(var(--font-size)*var(--text-multiplier))}.--text-outline{color:var(--color);word-break:break-word;word-wrap:break-word}@supports(-webkit-text-stroke-width: 1px){.--text-outline{color:rgba(0,0,0,0);-webkit-text-fill-color:rgba(0,0,0,0);-webkit-text-stroke-color:var(--color);-webkit-text-stroke-width:var(--stroke-width)}}.--text-strike-through{text-decoration:line-through;text-decoration-thickness:var(--line-width)}.--text-truncate{line-height:var(--size);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.--text-underline{text-decoration:underline}.--text-underline-dotted{text-decoration:underline;text-decoration-style:dotted}.--text-uppercase{text-transform:uppercase}
 .--viewport{overflow:hidden;height:calc(100svh - var(--margin-vertical, 0px)*2);width:calc(100vw - var(--margin-horizontal, 0px)*2)}
 .--width{width:var(--width)}
-.--margin,.--margin-horizontal{margin-left:var(--margin-horizontal);margin-right:var(--margin-horizontal)}.--margin,.--margin-vertical{margin-bottom:var(--margin-vertical);margin-top:var(--margin-vertical)}.--margin-bottom{margin-bottom:var(--margin-vertical)}.--margin-top{margin-top:var(--margin-vertical)}.--margin-left{margin-left:var(--margin-horizontal)}.--margin-right{margin-right:var(--margin-horizontal)}.--padding,.--padding-horizontal{padding-left:var(--padding-horizontal);padding-right:var(--padding-horizontal)}.--padding.--border,.--padding-horizontal.--border{padding-left:calc(var(--padding-horizontal) - var(--border-width));padding-right:calc(var(--padding-horizontal) - var(--border-width))}.--padding,.--padding-vertical{padding-bottom:var(--padding-vertical);padding-top:var(--padding-vertical)}.--padding.--border,.--padding-vertical.--border{padding-bottom:calc(var(--padding-vertical) - var(--border-width));padding-top:calc(var(--padding-vertical) - var(--border-width))}.--padding-bottom{padding-bottom:var(--padding-vertical)}.--padding-top{padding-top:var(--padding-vertical)}.--padding-left{padding-left:var(--padding-horizontal)}.--padding-right{padding-right:var(--padding-horizontal)}

package/utilities/variables.css

@@ -1,3 +1,4 @@
+.--margin-border-width,.--margin-horizontal-border-width{--margin-horizontal: var(--border-width-400)}.--margin-border-width-400,.--margin-horizontal-border-width-400{--margin-horizontal: var(--border-width-400)}.--margin-border-width,.--margin-horizontal-border-width{--margin-horizontal: var(--border-width-400)}.--margin-border-width-500,.--margin-horizontal-border-width-500{--margin-horizontal: var(--border-width-500)}.--margin-border-width,.--margin-horizontal-border-width{--margin-horizontal: var(--border-width-400)}.--margin-border-width-600,.--margin-horizontal-border-width-600{--margin-horizontal: var(--border-width-600)}.--margin-border-width,.--margin-horizontal-border-width{--margin-horizontal: var(--border-width-400)}.--margin-border-width-700,.--margin-horizontal-border-width-700{--margin-horizontal: var(--border-width-700)}.--margin-spacer,.--margin-horizontal-spacer{--margin-horizontal: var(--spacer-400)}.--margin-spacer-300,.--margin-horizontal-spacer-300{--margin-horizontal: var(--spacer-300)}.--margin-spacer,.--margin-horizontal-spacer{--margin-horizontal: var(--spacer-400)}.--margin-spacer-400,.--margin-horizontal-spacer-400{--margin-horizontal: var(--spacer-400)}.--margin-spacer,.--margin-horizontal-spacer{--margin-horizontal: var(--spacer-400)}.--margin-spacer-500,.--margin-horizontal-spacer-500{--margin-horizontal: var(--spacer-500)}.--margin-0px,.--margin-horizontal-0px{--margin-horizontal: var(--size-0px)}.--margin-100,.--margin-horizontal-100{--margin-horizontal: var(--size-100)}.--margin-200,.--margin-horizontal-200{--margin-horizontal: var(--size-200)}.--margin-300,.--margin-horizontal-300{--margin-horizontal: var(--size-300)}.--margin-400,.--margin-horizontal-400{--margin-horizontal: var(--size-400)}.--margin-500,.--margin-horizontal-500{--margin-horizontal: var(--size-500)}.--margin-600,.--margin-horizontal-600{--margin-horizontal: var(--size-600)}.--margin-700,.--margin-horizontal-700{--margin-horizontal: var(--size-700)}.--margin-800,.--margin-horizontal-800{--margin-horizontal: var(--size-800)}.--margin-900,.--margin-horizontal-900{--margin-horizontal: var(--size-900)}.--margin-inherit,.--margin-horizontal-inherit{--margin-horizontal: inherit}.--margin-border-width,.--margin-vertical-border-width{--margin-vertical: var(--border-width-400)}.--margin-border-width-400,.--margin-vertical-border-width-400{--margin-vertical: var(--border-width-400)}.--margin-border-width,.--margin-vertical-border-width{--margin-vertical: var(--border-width-400)}.--margin-border-width-500,.--margin-vertical-border-width-500{--margin-vertical: var(--border-width-500)}.--margin-border-width,.--margin-vertical-border-width{--margin-vertical: var(--border-width-400)}.--margin-border-width-600,.--margin-vertical-border-width-600{--margin-vertical: var(--border-width-600)}.--margin-border-width,.--margin-vertical-border-width{--margin-vertical: var(--border-width-400)}.--margin-border-width-700,.--margin-vertical-border-width-700{--margin-vertical: var(--border-width-700)}.--margin-spacer,.--margin-vertical-spacer{--margin-vertical: var(--spacer-400)}.--margin-spacer-300,.--margin-vertical-spacer-300{--margin-vertical: var(--spacer-300)}.--margin-spacer,.--margin-vertical-spacer{--margin-vertical: var(--spacer-400)}.--margin-spacer-400,.--margin-vertical-spacer-400{--margin-vertical: var(--spacer-400)}.--margin-spacer,.--margin-vertical-spacer{--margin-vertical: var(--spacer-400)}.--margin-spacer-500,.--margin-vertical-spacer-500{--margin-vertical: var(--spacer-500)}.--margin-0px,.--margin-vertical-0px{--margin-vertical: var(--size-0px)}.--margin-100,.--margin-vertical-100{--margin-vertical: var(--size-100)}.--margin-200,.--margin-vertical-200{--margin-vertical: var(--size-200)}.--margin-300,.--margin-vertical-300{--margin-vertical: var(--size-300)}.--margin-400,.--margin-vertical-400{--margin-vertical: var(--size-400)}.--margin-500,.--margin-vertical-500{--margin-vertical: var(--size-500)}.--margin-600,.--margin-vertical-600{--margin-vertical: var(--size-600)}.--margin-700,.--margin-vertical-700{--margin-vertical: var(--size-700)}.--margin-800,.--margin-vertical-800{--margin-vertical: var(--size-800)}.--margin-900,.--margin-vertical-900{--margin-vertical: var(--size-900)}.--margin-inherit,.--margin-vertical-inherit{--margin-vertical: inherit}.--padding-border-width,.--padding-horizontal-border-width{--padding-horizontal: var(--border-width-400)}.--padding-border-width-400,.--padding-horizontal-border-width-400{--padding-horizontal: var(--border-width-400)}.--padding-border-width,.--padding-horizontal-border-width{--padding-horizontal: var(--border-width-400)}.--padding-border-width-500,.--padding-horizontal-border-width-500{--padding-horizontal: var(--border-width-500)}.--padding-border-width,.--padding-horizontal-border-width{--padding-horizontal: var(--border-width-400)}.--padding-border-width-600,.--padding-horizontal-border-width-600{--padding-horizontal: var(--border-width-600)}.--padding-border-width,.--padding-horizontal-border-width{--padding-horizontal: var(--border-width-400)}.--padding-border-width-700,.--padding-horizontal-border-width-700{--padding-horizontal: var(--border-width-700)}.--padding-spacer,.--padding-horizontal-spacer{--padding-horizontal: var(--spacer-400)}.--padding-spacer-300,.--padding-horizontal-spacer-300{--padding-horizontal: var(--spacer-300)}.--padding-spacer,.--padding-horizontal-spacer{--padding-horizontal: var(--spacer-400)}.--padding-spacer-400,.--padding-horizontal-spacer-400{--padding-horizontal: var(--spacer-400)}.--padding-spacer,.--padding-horizontal-spacer{--padding-horizontal: var(--spacer-400)}.--padding-spacer-500,.--padding-horizontal-spacer-500{--padding-horizontal: var(--spacer-500)}.--padding-0px,.--padding-horizontal-0px{--padding-horizontal: var(--size-0px)}.--padding-100,.--padding-horizontal-100{--padding-horizontal: var(--size-100)}.--padding-200,.--padding-horizontal-200{--padding-horizontal: var(--size-200)}.--padding-300,.--padding-horizontal-300{--padding-horizontal: var(--size-300)}.--padding-400,.--padding-horizontal-400{--padding-horizontal: var(--size-400)}.--padding-500,.--padding-horizontal-500{--padding-horizontal: var(--size-500)}.--padding-600,.--padding-horizontal-600{--padding-horizontal: var(--size-600)}.--padding-700,.--padding-horizontal-700{--padding-horizontal: var(--size-700)}.--padding-800,.--padding-horizontal-800{--padding-horizontal: var(--size-800)}.--padding-900,.--padding-horizontal-900{--padding-horizontal: var(--size-900)}.--padding-inherit,.--padding-horizontal-inherit{--padding-horizontal: inherit}.--padding-border-width,.--padding-vertical-border-width{--padding-vertical: var(--border-width-400)}.--padding-border-width-400,.--padding-vertical-border-width-400{--padding-vertical: var(--border-width-400)}.--padding-border-width,.--padding-vertical-border-width{--padding-vertical: var(--border-width-400)}.--padding-border-width-500,.--padding-vertical-border-width-500{--padding-vertical: var(--border-width-500)}.--padding-border-width,.--padding-vertical-border-width{--padding-vertical: var(--border-width-400)}.--padding-border-width-600,.--padding-vertical-border-width-600{--padding-vertical: var(--border-width-600)}.--padding-border-width,.--padding-vertical-border-width{--padding-vertical: var(--border-width-400)}.--padding-border-width-700,.--padding-vertical-border-width-700{--padding-vertical: var(--border-width-700)}.--padding-spacer,.--padding-vertical-spacer{--padding-vertical: var(--spacer-400)}.--padding-spacer-300,.--padding-vertical-spacer-300{--padding-vertical: var(--spacer-300)}.--padding-spacer,.--padding-vertical-spacer{--padding-vertical: var(--spacer-400)}.--padding-spacer-400,.--padding-vertical-spacer-400{--padding-vertical: var(--spacer-400)}.--padding-spacer,.--padding-vertical-spacer{--padding-vertical: var(--spacer-400)}.--padding-spacer-500,.--padding-vertical-spacer-500{--padding-vertical: var(--spacer-500)}.--padding-0px,.--padding-vertical-0px{--padding-vertical: var(--size-0px)}.--padding-100,.--padding-vertical-100{--padding-vertical: var(--size-100)}.--padding-200,.--padding-vertical-200{--padding-vertical: var(--size-200)}.--padding-300,.--padding-vertical-300{--padding-vertical: var(--size-300)}.--padding-400,.--padding-vertical-400{--padding-vertical: var(--size-400)}.--padding-500,.--padding-vertical-500{--padding-vertical: var(--size-500)}.--padding-600,.--padding-vertical-600{--padding-vertical: var(--size-600)}.--padding-700,.--padding-vertical-700{--padding-vertical: var(--size-700)}.--padding-800,.--padding-vertical-800{--padding-vertical: var(--size-800)}.--padding-900,.--padding-vertical-900{--padding-vertical: var(--size-900)}.--padding-inherit,.--padding-vertical-inherit{--padding-vertical: inherit}.--margin-auto,.--margin-horizontal-auto{--margin-horizontal: auto}.--margin-auto,.--margin-vertical-auto{--margin-vertical: auto}
 .--background-state{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default)}.--background-state.--active{--background: var(--background-active)}.--background-state:not(.--active):hover{--background: var(--background-hover)}.--background-state:not(.--active):active{--background: var(--background-pressed)}
 .--border,.--border-bottom,.--border-left,.--border-right,.--border-top{--border-color: var(--border-color-default);--border-style: solid;--border-width: var(--border-width-400)}.--border-dashed{--border-style: dashed}.--border-dotted{--border-style: dotted}.--border-radius{--border-radius: var(--border-radius-400)}.--border-radius-0px{--border-radius: var(--border-radius-0px)}.--border-radius-circle{--border-radius: var(--border-radius-circle)}.--border-radius-curved{--border-radius: var(--border-radius-curved)}.--border-radius-100{--border-radius: var(--border-radius-100)}.--border-radius-200{--border-radius: var(--border-radius-200)}.--border-radius-300{--border-radius: var(--border-radius-300)}.--border-radius-400{--border-radius: var(--border-radius-400)}.--border-radius-500{--border-radius: var(--border-radius-500)}.--border-radius-600{--border-radius: var(--border-radius-600)}.--border-state{--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: transparent;--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default)}.--border-state.--active{--border-color: var(--border-color-active)}.--border-state:not(.--active):hover{--border-color: var(--border-color-hover)}.--border-state:not(.--active):active{--border-color: var(--border-color-pressed)}.--border-width{--border-width: var(--border-width-400)}.--border-width-400{--border-width: var(--border-width-400)}.--border-width-500{--border-width: var(--border-width-500)}.--border-width-600{--border-width: var(--border-width-600)}.--border-width-700{--border-width: var(--border-width-700)}
 .--color-inherit{--color: inherit}.--color-state{--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default)}.--color-state.--active{--color: var(--color-active)}.--color-state:not(.--active):hover{--color: var(--color-hover)}.--color-state:not(.--active):active{--color: var(--color-pressed)}
@@ -8,4 +9,3 @@
 .--text-100{--font-size: var(--font-size-100)}.--text-200{--font-size: var(--font-size-200)}.--text-300{--font-size: var(--font-size-300)}.--text-400{--font-size: var(--font-size-400)}.--text-500{--font-size: var(--font-size-500)}.--text-600{--font-size: var(--font-size-600)}.--text-700{--font-size: var(--font-size-700)}.--text-800{--font-size: var(--font-size-800)}.--text-outline{--color: inherit;--stroke-width: var(--border-width-400)}.--text-outline-400{--stroke-width: var(--border-width-400)}.--text-outline-500{--stroke-width: var(--border-width-500)}.--text-outline-600{--stroke-width: var(--border-width-600)}.--text-outline-700{--stroke-width: var(--border-width-700)}.--text-strike-through{--line-width: var(--border-width-400)}.--text-strike-through-400{--line-width: var(--border-width-400)}.--text-strike-through-500{--line-width: var(--border-width-500)}.--text-strike-through-600{--line-width: var(--border-width-600)}.--text-strike-through-700{--line-width: var(--border-width-700)}
 .--transition-duration{--transition-duration: var(--transition-duration-400)}.--transition-duration-300{--transition-duration: var(--transition-duration-300)}.--transition-duration-400{--transition-duration: var(--transition-duration-400)}.--transition-duration-500{--transition-duration: var(--transition-duration-500)}
 .--width-full{--width: 100%}.--width-half{--width: 50%}
-.--margin-border-width,.--margin-horizontal-border-width{--margin-horizontal: var(--border-width-400)}.--margin-border-width-400,.--margin-horizontal-border-width-400{--margin-horizontal: var(--border-width-400)}.--margin-border-width,.--margin-horizontal-border-width{--margin-horizontal: var(--border-width-400)}.--margin-border-width-500,.--margin-horizontal-border-width-500{--margin-horizontal: var(--border-width-500)}.--margin-border-width,.--margin-horizontal-border-width{--margin-horizontal: var(--border-width-400)}.--margin-border-width-600,.--margin-horizontal-border-width-600{--margin-horizontal: var(--border-width-600)}.--margin-border-width,.--margin-horizontal-border-width{--margin-horizontal: var(--border-width-400)}.--margin-border-width-700,.--margin-horizontal-border-width-700{--margin-horizontal: var(--border-width-700)}.--margin-spacer,.--margin-horizontal-spacer{--margin-horizontal: var(--spacer-400)}.--margin-spacer-300,.--margin-horizontal-spacer-300{--margin-horizontal: var(--spacer-300)}.--margin-spacer,.--margin-horizontal-spacer{--margin-horizontal: var(--spacer-400)}.--margin-spacer-400,.--margin-horizontal-spacer-400{--margin-horizontal: var(--spacer-400)}.--margin-spacer,.--margin-horizontal-spacer{--margin-horizontal: var(--spacer-400)}.--margin-spacer-500,.--margin-horizontal-spacer-500{--margin-horizontal: var(--spacer-500)}.--margin-0px,.--margin-horizontal-0px{--margin-horizontal: var(--size-0px)}.--margin-100,.--margin-horizontal-100{--margin-horizontal: var(--size-100)}.--margin-200,.--margin-horizontal-200{--margin-horizontal: var(--size-200)}.--margin-300,.--margin-horizontal-300{--margin-horizontal: var(--size-300)}.--margin-400,.--margin-horizontal-400{--margin-horizontal: var(--size-400)}.--margin-500,.--margin-horizontal-500{--margin-horizontal: var(--size-500)}.--margin-600,.--margin-horizontal-600{--margin-horizontal: var(--size-600)}.--margin-700,.--margin-horizontal-700{--margin-horizontal: var(--size-700)}.--margin-800,.--margin-horizontal-800{--margin-horizontal: var(--size-800)}.--margin-900,.--margin-horizontal-900{--margin-horizontal: var(--size-900)}.--margin-inherit,.--margin-horizontal-inherit{--margin-horizontal: inherit}.--margin-border-width,.--margin-vertical-border-width{--margin-vertical: var(--border-width-400)}.--margin-border-width-400,.--margin-vertical-border-width-400{--margin-vertical: var(--border-width-400)}.--margin-border-width,.--margin-vertical-border-width{--margin-vertical: var(--border-width-400)}.--margin-border-width-500,.--margin-vertical-border-width-500{--margin-vertical: var(--border-width-500)}.--margin-border-width,.--margin-vertical-border-width{--margin-vertical: var(--border-width-400)}.--margin-border-width-600,.--margin-vertical-border-width-600{--margin-vertical: var(--border-width-600)}.--margin-border-width,.--margin-vertical-border-width{--margin-vertical: var(--border-width-400)}.--margin-border-width-700,.--margin-vertical-border-width-700{--margin-vertical: var(--border-width-700)}.--margin-spacer,.--margin-vertical-spacer{--margin-vertical: var(--spacer-400)}.--margin-spacer-300,.--margin-vertical-spacer-300{--margin-vertical: var(--spacer-300)}.--margin-spacer,.--margin-vertical-spacer{--margin-vertical: var(--spacer-400)}.--margin-spacer-400,.--margin-vertical-spacer-400{--margin-vertical: var(--spacer-400)}.--margin-spacer,.--margin-vertical-spacer{--margin-vertical: var(--spacer-400)}.--margin-spacer-500,.--margin-vertical-spacer-500{--margin-vertical: var(--spacer-500)}.--margin-0px,.--margin-vertical-0px{--margin-vertical: var(--size-0px)}.--margin-100,.--margin-vertical-100{--margin-vertical: var(--size-100)}.--margin-200,.--margin-vertical-200{--margin-vertical: var(--size-200)}.--margin-300,.--margin-vertical-300{--margin-vertical: var(--size-300)}.--margin-400,.--margin-vertical-400{--margin-vertical: var(--size-400)}.--margin-500,.--margin-vertical-500{--margin-vertical: var(--size-500)}.--margin-600,.--margin-vertical-600{--margin-vertical: var(--size-600)}.--margin-700,.--margin-vertical-700{--margin-vertical: var(--size-700)}.--margin-800,.--margin-vertical-800{--margin-vertical: var(--size-800)}.--margin-900,.--margin-vertical-900{--margin-vertical: var(--size-900)}.--margin-inherit,.--margin-vertical-inherit{--margin-vertical: inherit}.--padding-border-width,.--padding-horizontal-border-width{--padding-horizontal: var(--border-width-400)}.--padding-border-width-400,.--padding-horizontal-border-width-400{--padding-horizontal: var(--border-width-400)}.--padding-border-width,.--padding-horizontal-border-width{--padding-horizontal: var(--border-width-400)}.--padding-border-width-500,.--padding-horizontal-border-width-500{--padding-horizontal: var(--border-width-500)}.--padding-border-width,.--padding-horizontal-border-width{--padding-horizontal: var(--border-width-400)}.--padding-border-width-600,.--padding-horizontal-border-width-600{--padding-horizontal: var(--border-width-600)}.--padding-border-width,.--padding-horizontal-border-width{--padding-horizontal: var(--border-width-400)}.--padding-border-width-700,.--padding-horizontal-border-width-700{--padding-horizontal: var(--border-width-700)}.--padding-spacer,.--padding-horizontal-spacer{--padding-horizontal: var(--spacer-400)}.--padding-spacer-300,.--padding-horizontal-spacer-300{--padding-horizontal: var(--spacer-300)}.--padding-spacer,.--padding-horizontal-spacer{--padding-horizontal: var(--spacer-400)}.--padding-spacer-400,.--padding-horizontal-spacer-400{--padding-horizontal: var(--spacer-400)}.--padding-spacer,.--padding-horizontal-spacer{--padding-horizontal: var(--spacer-400)}.--padding-spacer-500,.--padding-horizontal-spacer-500{--padding-horizontal: var(--spacer-500)}.--padding-0px,.--padding-horizontal-0px{--padding-horizontal: var(--size-0px)}.--padding-100,.--padding-horizontal-100{--padding-horizontal: var(--size-100)}.--padding-200,.--padding-horizontal-200{--padding-horizontal: var(--size-200)}.--padding-300,.--padding-horizontal-300{--padding-horizontal: var(--size-300)}.--padding-400,.--padding-horizontal-400{--padding-horizontal: var(--size-400)}.--padding-500,.--padding-horizontal-500{--padding-horizontal: var(--size-500)}.--padding-600,.--padding-horizontal-600{--padding-horizontal: var(--size-600)}.--padding-700,.--padding-horizontal-700{--padding-horizontal: var(--size-700)}.--padding-800,.--padding-horizontal-800{--padding-horizontal: var(--size-800)}.--padding-900,.--padding-horizontal-900{--padding-horizontal: var(--size-900)}.--padding-inherit,.--padding-horizontal-inherit{--padding-horizontal: inherit}.--padding-border-width,.--padding-vertical-border-width{--padding-vertical: var(--border-width-400)}.--padding-border-width-400,.--padding-vertical-border-width-400{--padding-vertical: var(--border-width-400)}.--padding-border-width,.--padding-vertical-border-width{--padding-vertical: var(--border-width-400)}.--padding-border-width-500,.--padding-vertical-border-width-500{--padding-vertical: var(--border-width-500)}.--padding-border-width,.--padding-vertical-border-width{--padding-vertical: var(--border-width-400)}.--padding-border-width-600,.--padding-vertical-border-width-600{--padding-vertical: var(--border-width-600)}.--padding-border-width,.--padding-vertical-border-width{--padding-vertical: var(--border-width-400)}.--padding-border-width-700,.--padding-vertical-border-width-700{--padding-vertical: var(--border-width-700)}.--padding-spacer,.--padding-vertical-spacer{--padding-vertical: var(--spacer-400)}.--padding-spacer-300,.--padding-vertical-spacer-300{--padding-vertical: var(--spacer-300)}.--padding-spacer,.--padding-vertical-spacer{--padding-vertical: var(--spacer-400)}.--padding-spacer-400,.--padding-vertical-spacer-400{--padding-vertical: var(--spacer-400)}.--padding-spacer,.--padding-vertical-spacer{--padding-vertical: var(--spacer-400)}.--padding-spacer-500,.--padding-vertical-spacer-500{--padding-vertical: var(--spacer-500)}.--padding-0px,.--padding-vertical-0px{--padding-vertical: var(--size-0px)}.--padding-100,.--padding-vertical-100{--padding-vertical: var(--size-100)}.--padding-200,.--padding-vertical-200{--padding-vertical: var(--size-200)}.--padding-300,.--padding-vertical-300{--padding-vertical: var(--size-300)}.--padding-400,.--padding-vertical-400{--padding-vertical: var(--size-400)}.--padding-500,.--padding-vertical-500{--padding-vertical: var(--size-500)}.--padding-600,.--padding-vertical-600{--padding-vertical: var(--size-600)}.--padding-700,.--padding-vertical-700{--padding-vertical: var(--size-700)}.--padding-800,.--padding-vertical-800{--padding-vertical: var(--size-800)}.--padding-900,.--padding-vertical-900{--padding-vertical: var(--size-900)}.--padding-inherit,.--padding-vertical-inherit{--padding-vertical: inherit}.--margin-auto,.--margin-horizontal-auto{--margin-horizontal: auto}.--margin-auto,.--margin-vertical-auto{--margin-vertical: auto}

package/webpack.config.ts

@@ -1,26 +1,26 @@
-import { config, entry } from '@esportsplus/webpack';
-
-
-export default config.css({
-    contenthash: false,
-    entry: {
-        components: {
-            styles: entry.css('./src/components/**/index.scss'),
-            variables: entry.css('./src/components/**/variables.scss')
-        },
-        fonts: {
-            montserrat: entry.css('./storage/fonts/montserrat/index.css')
-        },
-        normalize: entry.css('modern-normalize/modern-normalize.css'),
-        utilities: {
-            styles: entry.css('./src/css-utilities/**/index.scss'),
-            variables: entry.css('./src/css-utilities/**/variables.scss')
-        }
-    },
-    mode: 'production',
-    // Temporary output until css root directory can be set through
-    // package.json or similar ( like 'main' key )
-    output: {
-        path: '.'
-    }
+import { config, entry } from '@esportsplus/webpack';
+
+
+export default config.css({
+    contenthash: false,
+    entry: {
+        components: {
+            styles: entry.css('./src/components/**/index.scss'),
+            variables: entry.css('./src/components/**/variables.scss')
+        },
+        fonts: {
+            montserrat: entry.css('./storage/fonts/montserrat/index.css')
+        },
+        normalize: entry.css('modern-normalize/modern-normalize.css'),
+        utilities: {
+            styles: entry.css('./src/css-utilities/**/index.scss'),
+            variables: entry.css('./src/css-utilities/**/variables.scss')
+        }
+    },
+    mode: 'production',
+    // Temporary output until css root directory can be set through
+    // package.json or similar ( like 'main' key )
+    output: {
+        path: '.'
+    }
 });