@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

package/src/styles/export/breakpoint.ts

@@ -1,12 +1,12 @@
 // Export breakpoints from SCSS tokens
 // TODO: Remove this file and use the SCSS module instead but now is best solution this one
 const breakpoints = {
-  xs: '0px',
-  sm: '480px',
-  md: '768px',
-  lg: '992px',
-  xl: '1240px',
-  xxl: '1380px',
+  xs: "0px",
+  sm: "480px",
+  md: "768px",
+  lg: "992px",
+  xl: "1240px",
+  xxl: "1380px",
 };
 
-export default breakpoints; 
+export default breakpoints;

package/src/styles/export/color.js

@@ -2,26 +2,108 @@
 // Do not edit this file directly - edit the SCSS source instead
 
 export const exports = {
-  "orange": "#f16e00",
-  "orange-dark": "#f16e00",
-  "black": "#000000",
-  "white": "#ffffff",
-  "blue": "#4bb4e6",
-  "green": "#50be87",
-  "pink": "#ffb4e6",
-  "violet": "#a885d8",
-  "yellow": "#ffd200",
-  "gray-300": "#eeeeee",
-  "gray-400": "#ddd",
-  "gray-500": "#dddddd",
-  "gray-600": "#999",
-  "gray-700": "#666",
-  "gray-800": "#595959",
-  "gray-900": "#333",
-  "success": "rgba(34, 135, 34, 0.0784313725)",
-  "danger": "rgba(205, 60, 20, 0.0784313725)",
-  "info": "rgba(65, 112, 216, 0.0784313725)",
-  "warning": "rgba(255, 204, 0, 0.0784313725)"
+  "light-background-primary": "#ffffff",
+  "light-background-secondary": "#f4f4f4",
+  "light-background-contrast": "#141414",
+  "light-background-accent": "#fff6ed",
+  "light-background-accent1-blog": "#fff6cc",
+  "light-background-accent2-blog": "#eee7f7",
+  "light-surface-primary": "#ffffff",
+  "light-surface-secondary": "#ff7900",
+  "light-surface-tertiary": "#f15e00",
+  "light-surface-subtle": "#eeeeee",
+  "light-surface-moderate": "#dddddd",
+  "light-surface-contrast": "#141414",
+  "light-surface-accent": "#fff6ed",
+  "light-fill-primary": "#ffffff",
+  "light-fill-secondary": "#ff7900",
+  "light-fill-tertiary": "#f15e00",
+  "light-fill-subtle": "#eeeeee",
+  "light-fill-moderate": "#dddddd",
+  "light-fill-disabled": "#cccccc",
+  "light-fill-contrast": "#000000",
+  "light-fill-accent1": "#4bb4e6",
+  "light-fill-accent2": "#50be87",
+  "light-fill-accent3": "#ffb4e6",
+  "light-fill-accent4": "#a885d8",
+  "light-fill-accent5": "#ffd200",
+  "light-fill-information": "rgba(65, 112, 216, 0.0784313725)",
+  "light-fill-positive": "rgba(34, 135, 34, 0.0784313725)",
+  "light-fill-warning": "rgba(255, 204, 0, 0.0784313725)",
+  "light-fill-negative": "rgba(205, 60, 20, 0.0784313725)",
+  "light-border-subtle": "#dddddd",
+  "light-border-strong": "#cccccc",
+  "light-border-contrast": "#000000",
+  "light-border-accent": "#f15e00",
+  "light-border-information": "#4170d8",
+  "light-border-positive": "#228722",
+  "light-border-warning": "#ffcc00",
+  "light-border-negative": "#cd3c14",
+  "light-icon-default": "#000000",
+  "light-icon-inverse": "#ffffff",
+  "light-icon-brand": "#f15e00",
+  "light-icon-accent": "#ffc48f",
+  "light-icon-disabled": "#cccccc",
+  "light-icon-information": "#4170d8",
+  "light-icon-positive": "#228722",
+  "light-icon-warning": "#ffcc00",
+  "light-icon-negative": "#cd3c14",
+  "light-text-default": "#000000",
+  "light-text-secondary": "#666666",
+  "light-text-disabled": "#cccccc",
+  "light-text-inverse": "#ffffff",
+  "light-text-accent": "#f15e00",
+  "dark-background-primary": "#141414",
+  "dark-background-secondary": "#333333",
+  "dark-background-contrast": "#ffffff",
+  "dark-background-accent": "#2b1a10",
+  "dark-background-accent1-blog": "#62342d",
+  "dark-background-accent2-blog": "#2b1a10",
+  "dark-surface-primary": "#141414",
+  "dark-surface-secondary": "#ff7900",
+  "dark-surface-tertiary": "#f15e00",
+  "dark-surface-subtle": "#333333",
+  "dark-surface-moderate": "#595959",
+  "dark-surface-contrast": "#ffffff",
+  "dark-surface-accent": "#2b1a10",
+  "dark-fill-primary": "#000000",
+  "dark-fill-secondary": "#ff7900",
+  "dark-fill-tertiary": "#f15e00",
+  "dark-fill-subtle": "#333333",
+  "dark-fill-moderate": "#595959",
+  "dark-fill-disabled": "#666666",
+  "dark-fill-contrast": "#ffffff",
+  "dark-fill-accent1": "#4bb4e6",
+  "dark-fill-accent2": "#50be87",
+  "dark-fill-accent3": "#ffb4e6",
+  "dark-fill-accent4": "#a885d8",
+  "dark-fill-accent5": "#ffd200",
+  "dark-fill-information": "rgba(65, 112, 216, 0.2)",
+  "dark-fill-positive": "rgba(34, 135, 34, 0.2)",
+  "dark-fill-warning": "rgba(255, 204, 0, 0.2)",
+  "dark-fill-negative": "rgba(205, 60, 20, 0.2)",
+  "dark-border-subtle": "#333333",
+  "dark-border-strong": "#666666",
+  "dark-border-contrast": "#ffffff",
+  "dark-border-accent": "#ff7900",
+  "dark-border-information": "#6699ff",
+  "dark-border-positive": "#66cc66",
+  "dark-border-warning": "#ffcc00",
+  "dark-border-negative": "#ff4d4d",
+  "dark-icon-default": "#ffffff",
+  "dark-icon-inverse": "#000000",
+  "dark-icon-brand": "#ff7900",
+  "dark-icon-accent": "#da8436",
+  "dark-icon-disabled": "#666666",
+  "dark-icon-information": "#6699ff",
+  "dark-icon-positive": "#66cc66",
+  "dark-icon-warning": "#ffcc00",
+  "dark-icon-negative": "#ff4d4d",
+  "dark-text-default": "#ffffff",
+  "dark-text-secondary": "#cccccc",
+  "dark-text-disabled": "#666666",
+  "dark-text-inverse": "#000000",
+  "dark-text-accent": "#ff7900"
 };
 
 export default exports;

package/src/styles/export/color.scss

@@ -1,24 +1,14 @@
+@use "sass:map";
 @use "../tokens/color" as color;
 
 :export {
-  orange: color.$orange;
-  orange-dark: color.$orange-dark;
-  black: color.$black;
-  white: color.$white;
-  blue: color.$blue;
-  green: color.$green;
-  pink: color.$pink;
-  violet: color.$violet;
-  yellow: color.$yellow;
-  gray-300: color.$gray-300;
-  gray-400: color.$gray-400;
-  gray-500: color.$gray-500;
-  gray-600: color.$gray-600;
-  gray-700: color.$gray-700;
-  gray-800: color.$gray-800;
-  gray-900: color.$gray-900;
-  success: color.$success;
-  danger: color.$danger;
-  info: color.$info;
-  warning: color.$warning;
+  // Export semantic color tokens from light theme
+  @each $name, $value in color.$colors-light {
+    light-#{$name}: #{$value};
+  }
+
+  // Export semantic color tokens from dark theme
+  @each $name, $value in color.$colors-dark {
+    dark-#{$name}: #{$value};
+  }
 }

package/src/styles/export/space.scss

@@ -1,5 +1,5 @@
 @use "sass:string";
-@use '../tokens/space';
+@use "../tokens/space";
 
 :export {
   @each $key, $value in space.$map {

package/src/styles/shame.scss

@@ -1,8 +1,8 @@
 @layer utilities {
   /**
-* Resets for megamenu and footer
-* This reset is required due to default list spacing in ods 1 and will be removed once megamenu and footer components are migrated to 1.
-**/
+  * Resets for megamenu and footer
+  * This reset is required due to default list spacing in ods 1 and will be removed once megamenu and footer components are migrated to 1.
+  **/
   .osk-footer-menu,
   .mm-header ul,
   .megamenu-header ul {
@@ -14,4 +14,17 @@
       margin-bottom: 0;
     }
   }
+
+  /**
+  * Fixes for header and megamenu when modal is open
+  * This is required to prevent the header and megamenu from shifting when a modal is open due to scrollbar disappearance.
+  * This is a temporary fix and will be removed once the header and megamenu components are migrated to ods2
+  **/
+  body.has-modal {
+    .mm-header.is-sticky,
+    .megamenu-header.is-sticky,
+    [data-megamenu].is-sticky:not(.megamenu) {
+      padding-right: var(--ods-modal-scrollbar-width, 0px);
+    }
+  }
 }

package/src/styles/tokens/base.scss

@@ -1,7 +1,7 @@
 @use "sass:color" as sasscolor;
 @use "./color";
 
-$font-family: "'OrangeSK Neue'", "Helvetica Neue", helvetica, arial, sans-serif;
+$font-family: "OrangeSK Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-size: 16px;
 $line-height: 1.25;
 

package/src/styles/tokens/breakpoint.scss

@@ -1,7 +1,7 @@
 @use "sass:list";
 @use "sass:meta";
-@use 'sass:map' as sassmap;
-@use '../tools/map';
+@use "sass:map" as sassmap;
+@use "../tools/map";
 
 $map: (
   xs: 0,
@@ -12,78 +12,93 @@ $map: (
   xxl: 1380px,
 );
 
-@mixin get( $breakpoint, $param: false) {
-  @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != 'default') {
+@mixin get($breakpoint, $param: false) {
+  @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != "default") {
     @warn 'Breakpoint "#{$breakpoint}" is not defined.';
 
-    @debug 'Available breakpoints:'; // stylelint-disable-line at-rule-disallowed-list
+    @debug "Available breakpoints:"; // stylelint-disable-line at-rule-disallowed-list
     @debug $map; // stylelint-disable-line at-rule-disallowed-list
   }
 
   @if (
     ($breakpoint == list.nth(sassmap.keys($map), 1) and not $param) or
-    ( not $breakpoint ) or
-    ( $breakpoint == 'default' )
+      (not $breakpoint) or
+      ($breakpoint == "default")
   ) {
     @content;
   } @else if not $param {
     // no param, just a standard mobile first media query
-    @if sassmap.has-key( $map, $breakpoint ) {
+    @if sassmap.has-key($map, $breakpoint) {
       // breakpoint is in breakpoint map, let's use stored value
-      @media screen and (min-width: sassmap.get($map, $breakpoint)) { @content; };
+      @media screen and (min-width: sassmap.get($map, $breakpoint)) {
+        @content;
+      }
     } @else {
       // breakpoint is not in breakpoint map, let's use custom value
-      @media screen and (min-width: $breakpoint) { @content; };
+      @media screen and (min-width: $breakpoint) {
+        @content;
+      }
     }
-  } @else if (
-    $param == 'down' and
-    map.next($map, $breakpoint)
-  ) {
+  } @else if ($param == "down" and map.next($map, $breakpoint)) {
     @media screen and (max-width: map.next($map, $breakpoint) - 0.02px) {
       @content;
     }
-  } @else if (
-    $param == 'down' and
-    not sassmap.has-key($map, $breakpoint)
-  ) {
-    @media screen and (max-width: $breakpoint) { @content; };
-  } @else if (
-    $param == 'only' and
-    map.next($map, $breakpoint)
-  ) {
-    @media screen and
-      (min-width: sassmap.get($map, $breakpoint)) and
-      (max-width: map.next($map, $breakpoint) - 0.02px) { @content; };
-  } @else if (
-    sassmap.has-key( $map, $param) and
-    sassmap.has-key( $map, $breakpoint)
-  ) {
-    @media screen and
-      (min-width: sassmap.get($map, $breakpoint)) and
-      (max-width: sassmap.get($map, $param) - 0.02px) { @content; };
-  } @else if (
-    $param == 'downfrom' and
-    sassmap.get($map, $breakpoint) > 0 and
-    $breakpoint != 'xs'
-  ) {
+  } @else if ($param == "down" and not sassmap.has-key($map, $breakpoint)) {
+    @media screen and (max-width: $breakpoint) {
+      @content;
+    }
+  } @else if ($param == "only" and map.next($map, $breakpoint)) {
+    @media screen and (min-width: sassmap.get($map, $breakpoint)) and (max-width: map.next($map, $breakpoint) - 0.02px) {
+      @content;
+    }
+  } @else if
+    (sassmap.has-key($map, $param) and sassmap.has-key($map, $breakpoint))
+  {
+    @media screen and (min-width: sassmap.get($map, $breakpoint)) and (max-width: sassmap.get($map, $param) - 0.02px) {
+      @content;
+    }
+  } @else if
+    (
+      $param ==
+        "downfrom" and
+        sassmap.get($map, $breakpoint) >
+        0 and
+        $breakpoint !=
+        "xs"
+    )
+  {
     @media screen and (max-width: sassmap.get($map, $breakpoint) - 0.02px) {
       @content;
     } // -1
-  } @else if (meta.type-of($param) == 'number') {
+  } @else if (meta.type-of($param) == "number") {
     @if sassmap.has-key($map, $breakpoint) {
       // breakpoint is in breakpoint map
-      @media screen and
-        (min-width: sassmap.get($map, $breakpoint)) and
-        (max-width: $param) { @content; };
+      @media screen and (min-width: sassmap.get($map, $breakpoint)) and (max-width: $param) {
+        @content;
+      }
     } @else {
       // breakpoint is not in breakpoint map, let's use custom value
-      @media screen and (min-width: $breakpoint) and (max-width: $param) { @content; }
+      @media screen and (min-width: $breakpoint) and (max-width: $param) {
+        @content;
+      }
     }
-  } @else if (
-    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'down') and
-    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'only') and
-    not ($breakpoint == list.nth(sassmap.keys($map), 1) and $param == 'downfrom')
-  ) {
+  } @else if
+    (
+      not
+        (
+          $breakpoint == list.nth(sassmap.keys($map), -1) and $param == "down"
+        ) and not
+        (
+          $breakpoint == list.nth(sassmap.keys($map), -1) and $param == "only"
+        ) and not
+        (
+          $breakpoint ==
+            list.nth(sassmap.keys($map), 1) and
+            $param ==
+            "downfrom"
+        )
+    )
+  {
     // do nothing on known edge cases. we just dont generate any code.
     @warn 'Breakpoint is not configured properly #{$breakpoint}, #{$param}';
   }
@@ -92,7 +107,7 @@ $map: (
 @mixin each() {
   @each $breakpoint, $size in $map {
     @include get($breakpoint) {
-      @content($breakpoint);
+      @content ($breakpoint);
     }
   }
 }

package/src/styles/tokens/color-vars.scss

@@ -0,0 +1,37 @@
+@use "sass:map";
+@use "./color";
+@use "./tag-colors";
+
+// Light theme CSS variables
+:root,
+:host,
+:host(.is-light),
+.is-light,
+#root.is-light,
+#root-modals.is-light,
+#root-tooltips.is-light,
+#root-dropdowns.is-light {
+  @each $name, $value in color.$colors-light {
+    --color-#{$name}: #{$value};
+  }
+  @each $name, $value in tag-colors.$tag-colors-light {
+    --#{$name}: #{$value};
+  }
+  color: var(--color-text-default);
+}
+
+// Dark theme CSS variables
+:host(.is-dark),
+.is-dark,
+#root.is-dark,
+#root-modals.is-dark,
+#root-tooltips.is-dark,
+#root-dropdowns.is-dark {
+  @each $name, $value in color.$colors-dark {
+    --color-#{$name}: #{$value};
+  }
+  @each $name, $value in tag-colors.$tag-colors-dark {
+    --#{$name}: #{$value};
+  }
+  color: var(--color-text-default);
+}

package/src/styles/tokens/color.scss

@@ -9,14 +9,14 @@ $colors-light: (
   background-accent2-blog: #eee7f7,
   surface-primary: #ffffff,
   surface-secondary: #ff7900,
-  surface-tertiary: #f16e00,
+  surface-tertiary: #f15e00,
   surface-subtle: #eeeeee,
   surface-moderate: #dddddd,
   surface-contrast: #141414,
   surface-accent: #fff6ed,
   fill-primary: #ffffff,
   fill-secondary: #ff7900,
-  fill-tertiary: #f16e00,
+  fill-tertiary: #f15e00,
   fill-subtle: #eeeeee,
   fill-moderate: #dddddd,
   fill-disabled: #cccccc,
@@ -33,14 +33,14 @@ $colors-light: (
   border-subtle: #dddddd,
   border-strong: #cccccc,
   border-contrast: #000000,
-  border-accent: #f16e00,
+  border-accent: #f15e00,
   border-information: #4170d8,
   border-positive: #228722,
   border-warning: #ffcc00,
   border-negative: #cd3c14,
   icon-default: #000000,
   icon-inverse: #ffffff,
-  icon-brand: #f16e00,
+  icon-brand: #f15e00,
   icon-accent: #ffc48f,
   icon-disabled: #cccccc,
   icon-information: #4170d8,
@@ -48,10 +48,10 @@ $colors-light: (
   icon-warning: #ffcc00,
   icon-negative: #cd3c14,
   text-default: #000000,
-  text-secondary: #000000,
+  text-secondary: #666666,
   text-disabled: #cccccc,
   text-inverse: #ffffff,
-  text-accent: #f16e00,
+  text-accent: #f15e00,
 );
 
 $colors-dark: (
@@ -63,14 +63,14 @@ $colors-dark: (
   background-accent2-blog: #2b1a10,
   surface-primary: #141414,
   surface-secondary: #ff7900,
-  surface-tertiary: #f16e00,
+  surface-tertiary: #f15e00,
   surface-subtle: #333333,
   surface-moderate: #595959,
   surface-contrast: #ffffff,
   surface-accent: #2b1a10,
   fill-primary: #000000,
   fill-secondary: #ff7900,
-  fill-tertiary: #f16e00,
+  fill-tertiary: #f15e00,
   fill-subtle: #333333,
   fill-moderate: #595959,
   fill-disabled: #666666,
@@ -112,21 +112,21 @@ $colors-dark: (
 $orange: map.get($colors-light, icon-brand);
 $orange-dark: map.get($colors-light, surface-tertiary);
 $black: map.get($colors-light, icon-default);
-$white: map.get($colors-light, icon-inverse);
+$white: map.get($colors-light, text-inverse);
 $blue: map.get($colors-light, fill-accent1);
 $green: map.get($colors-light, fill-accent2);
 $pink: map.get($colors-light, fill-accent3);
 $violet: map.get($colors-light, fill-accent4);
 $yellow: map.get($colors-light, fill-accent5);
 $yellow-lighter: #fff6b6; // not in new palette, fallback
-$red: #ff4d4d; // not in new palette, fallback
+$red: map.get($colors-dark, icon-negative);
 $gray-300: map.get($colors-light, surface-subtle);
-$gray-400: #ddd; // fallback
+$gray-400: map.get($colors-light, fill-moderate);
 $gray-500: map.get($colors-light, surface-moderate);
 $gray-600: #999; // fallback
-$gray-700: #666; // fallback
-$gray-800: #595959; // fallback
-$gray-900: #333; // fallback
+$gray-700: map.get($colors-light, text-secondary); // fallback
+$gray-800: map.get($colors-light, text-secondary);
+$gray-900: map.get($colors-dark, border-subtle);
 $success: map.get($colors-light, fill-positive);
 $danger: map.get($colors-light, fill-negative);
 $info: map.get($colors-light, fill-information);

package/src/styles/tokens/space.scss

@@ -1,14 +1,14 @@
 @use "sass:map";
 @use "sass:math";
-@use '../tools/convert';
+@use "../tools/convert";
 
 $map: (
-  'none': 0,
-  'xsmall': 5px,
-  'small': 10px,
-  'medium': 20px,
-  'large': 30px,
-  'xlarge': 60px,
+  "none": 0,
+  "xsmall": 5px,
+  "small": 10px,
+  "medium": 20px,
+  "large": 30px,
+  "xlarge": 60px,
 );
 
 /// Get space size from $space
@@ -16,11 +16,11 @@ $map: (
 /// @example
 ///   get-space();
 ///   get-space('small');
-@function get($size: 'medium') {
+@function get($size: "medium") {
   @if map.has-key($map, $size) {
     $space: map.get($map, $size);
 
-    @return if(math.unit($space) == 'rem', $space, convert.to-rem($space));
+    @return if(math.unit($space) == "rem", $space, convert.to-rem($space));
   } @else {
     @error 'Cannot find key ($size) \'#{$size}\' in $space \'#{$space}\'';
   }

package/src/styles/tokens/tag-colors.scss

@@ -0,0 +1,20 @@
+// Tag-specific color palette for variants that exist outside the main semantic system.
+// Tags intentionally keep the same colors in both light and dark themes, so we expose
+// a shared palette that is applied regardless of theme context.
+
+$tag-shared-tag-colors: (
+  tag-orange: #ffc48f,
+  tag-black: #333333,
+  tag-yellow: #fff6b6,
+  tag-green: #b8ebd6,
+  tag-blue: #b5e8f7,
+  tag-success: #228722,
+  tag-danger: #cd3c14,
+  tag-info: #4170d8,
+  tag-warning: #ffcc00,
+  tag-text-dark: #000000,
+  tag-text-light: #ffffff,
+);
+
+$tag-colors-light: $tag-shared-tag-colors;
+$tag-colors-dark: $tag-shared-tag-colors;

package/src/styles/tools/convert.scss

@@ -3,10 +3,18 @@
 @use "../tokens/base";
 
 @function to-em($size, $font-size: base.$font-size) {
+  @if $size == 0 {
+    @return 0;
+  }
+
   @return math.div($size, $font-size) * 1em;
 }
 
 @function to-rem($size, $base: base.$font-size) {
+  @if $size == 0 {
+    @return 0;
+  }
+
   @return math.div($size, $base) * 1rem;
 }
 

package/src/styles/tools/generate.scss

@@ -1,5 +1,5 @@
-@use '../tokens/breakpoint';
-@use './map' as *;
+@use "../tokens/breakpoint";
+@use "./map" as *;
 
 /// Get css propeties from map
 ///
@@ -68,7 +68,7 @@
 /// @param {Map} $map - map
 /// @param {Map} $className - class name of element
 /// @param {Map} $classSuffix - suffix for class name of element
-@mixin variants($map, $className: '', $classSuffix: '') {
+@mixin variants($map, $className: "", $classSuffix: "") {
   @each $variant, $props in $map {
     #{if(&, "&", "")}#{$className + variant-name($variant) + $classSuffix} {
       @include css-map($props);
@@ -81,7 +81,7 @@
 /// @param {Map} $map - map
 /// @param {Map} $className - class name of element
 /// @param {Map} $classSuffix - suffix for class name of element
-@mixin responsive-variants($map, $className: '', $classSuffix: '') {
+@mixin responsive-variants($map, $className: "", $classSuffix: "") {
   @each $breakpoint, $props in $map {
     @include breakpoint.get($breakpoint) {
       @include variants($props, $className, $classSuffix);
@@ -97,9 +97,9 @@
 /// // -primary
 ///   variant-name('default')
 ///
-@function variant-name($name, $prefix: '--', $suffix: '') {
+@function variant-name($name, $prefix: "--", $suffix: "") {
   @if not $name or $name == default or $name == xs {
-    @return '';
+    @return "";
   }
 
   @return #{$prefix + $name + $suffix};

package/src/styles/tools/layout.scss

@@ -1,11 +1,11 @@
-@use '../tokens/base';
+@use "../tokens/base";
 
 // -- Nicolas Gallagher's micro clearfix
 @mixin clearfix {
   &::before,
   &::after {
     // For modern browsers
-    content: '';
+    content: "";
     display: table;
   }
 
@@ -18,7 +18,7 @@
  * Resets margin-bottom of the last child to zero
  */
 @mixin reset-last-child-margin-bottom {
-  > :not([class*='mb\-']):last-child {
+  > :not([class*="mb\-"]):last-child {
     margin-bottom: 0;
   }
 }