@orioncactuscorp/ui 1.0.0

package/src/scss/mixins/_motion.test.ts

@@ -0,0 +1,336 @@
+import { compileString } from 'sass';
+import { describe, expect, it } from 'vitest';
+
+describe('motion utilities', () => {
+  const compileMotion = (scss: string) =>
+    compileString(
+      `
+      @use 'mixins/motion' as *;
+
+      ${scss}
+      `,
+      {
+        loadPaths: ['src/scss'],
+      },
+    );
+
+  it('emits transition items for semantic intent and pace', () => {
+    const result = compileMotion(`
+      .target {
+        transition: oc-motion((background-color, color, box-shadow), feedback, $pace: quick);
+      }
+    `);
+
+    expect(result.css).toContain(
+      'background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-quick) * 1) var(--oc-motion-timing-feedback)',
+    );
+    expect(result.css).toContain(
+      'color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-quick) * 1) var(--oc-motion-timing-feedback)',
+    );
+    expect(result.css).toContain(
+      'box-shadow calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-quick) * 1) var(--oc-motion-timing-feedback)',
+    );
+  });
+
+  it('keeps numeric duration scale separate from pace', () => {
+    const result = compileMotion(`
+      .target {
+        transition: oc-motion(opacity, feedback, $pace: slow, $duration-scale: 0.9);
+      }
+    `);
+
+    expect(result.css).toContain(
+      'opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-slow) * 0.9) var(--oc-motion-timing-feedback)',
+    );
+  });
+
+  it('scales transform amplitude through motion scale tokens', () => {
+    const result = compileMotion(`
+      .feedback {
+        transform: scale(oc-motion-scale(0.95, feedback));
+      }
+
+      .reveal {
+        transform: scale(oc-motion-scale(var(--local-scale), reveal));
+      }
+    `);
+
+    expect(result.css).toContain(
+      'transform: scale(max(0, 1 + (0.95 - 1) * var(--oc-motion-scale-feedback)))',
+    );
+    expect(result.css).toContain(
+      'transform: scale(max(0, 1 + (var(--local-scale) - 1) * var(--oc-motion-scale-reveal)))',
+    );
+  });
+
+  it('scales transform distance through motion distance tokens', () => {
+    const result = compileMotion(`
+      .reveal {
+        transform: translateY(oc-motion-distance(-1rem, reveal));
+      }
+
+      .reject {
+        transform: translateX(oc-motion-distance(var(--local-distance), reject));
+      }
+    `);
+
+    expect(result.css).toContain(
+      'transform: translateY(calc(-1rem * var(--oc-motion-distance-scale-reveal)))',
+    );
+    expect(result.css).toContain(
+      'transform: translateX(calc(var(--local-distance) * var(--oc-motion-distance-scale-reject)))',
+    );
+  });
+
+  it('accepts a CSS duration token for non-spring motion', () => {
+    const result = compileMotion(`
+      .target {
+        @include oc-motion(opacity, feedback, $duration-token: var(--local-feedback-time));
+      }
+    `);
+
+    expect(result.css).toContain(
+      'opacity calc(var(--local-feedback-time) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)',
+    );
+    expect(result.css).toContain(
+      'transition-duration: calc(var(--local-feedback-time) * var(--oc-motion-duration-scale-reduced) * var(--oc-motion-pace-normal) * 1);',
+    );
+    expect(result.css).toContain(
+      'transition-timing-function: var(--oc-motion-timing-feedback);',
+    );
+  });
+
+  it('uses smooth opacity and snappy transform for reveal motion', () => {
+    const result = compileMotion(`
+      .target {
+        transition: oc-motion((opacity, transform), reveal);
+      }
+    `);
+
+    expect(result.css).toContain(
+      'transition: opacity calc(0.561s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
+    );
+    expect(result.css).toContain(
+      ', transform calc(0.58s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
+    );
+  });
+
+  it('uses spring timing for reject feedback motion', () => {
+    const result = compileMotion(`
+      .target {
+        transition: oc-motion(transform, reject);
+      }
+
+      .exit {
+        transition: oc-motion(transform, reject, $phase: exit);
+      }
+    `);
+
+    expect(result.css).toContain('.target {\n  transition: transform calc(');
+    expect(result.css).toContain(
+      ' * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
+    );
+    expect(result.css).toContain(
+      '.exit {\n  transition: transform calc(var(--oc-motion-duration-reject) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-reject);',
+    );
+  });
+
+  it('uses snappy spring timing for feedback settle motion', () => {
+    const result = compileMotion(`
+      .target {
+        transition: oc-motion(transform, feedback, $phase: settle);
+      }
+    `);
+
+    expect(result.css).toContain(
+      'transform calc(0.326s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
+    );
+    expect(result.css).not.toContain('var(--oc-motion-duration-feedback)');
+  });
+
+  it('keeps gesture settle on the token easing path', () => {
+    const result = compileMotion(`
+      .target {
+        transition: oc-motion(transform, gesture, $phase: settle);
+      }
+    `);
+
+    expect(result.css).toContain(
+      'transform calc(var(--oc-motion-duration-gesture-settle) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-gesture-settle)',
+    );
+    expect(result.css).not.toContain('linear(');
+  });
+
+  it('applies runtime duration scale and pace tokens to spring-backed motion duration', () => {
+    const result = compileMotion(`
+      .target {
+        transition: oc-motion(transform, reveal, $pace: slow, $duration-scale: 0.9);
+      }
+    `);
+
+    expect(result.css).toContain(
+      'transform calc(0.58s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-slow) * 0.9) linear(',
+    );
+  });
+
+  it('uses smooth spring for reveal exit motion', () => {
+    const result = compileMotion(`
+      .target {
+        transition: oc-motion((opacity, transform), reveal, $phase: exit);
+      }
+    `);
+
+    expect(result.css).toContain(
+      'opacity calc(0.233s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
+    );
+    expect(result.css).toContain(
+      ', transform calc(0.233s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
+    );
+  });
+
+  it('emits reduced motion policy from the mixin', () => {
+    const result = compileMotion(`
+      .target {
+        @include oc-motion((opacity, transform), reveal);
+      }
+    `);
+
+    expect(result.css).toContain(
+      'transition: opacity calc(0.561s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
+    );
+    expect(result.css).toContain(
+      ', transform calc(0.58s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
+    );
+    expect(result.css).toContain('@media (prefers-reduced-motion: reduce)');
+    expect(result.css).toContain('transition-property: opacity;');
+    expect(result.css).toContain(
+      'transition-duration: calc(var(--oc-motion-duration-reveal) * var(--oc-motion-duration-scale-reduced) * var(--oc-motion-pace-normal) * 1);',
+    );
+    expect(result.css).toContain(
+      'transition-timing-function: var(--oc-motion-timing-reveal);',
+    );
+    expect(result.css).toContain('transform: none;');
+  });
+
+  it('preserves spatial motion when explicitly requested', () => {
+    const result = compileMotion(`
+      .target {
+        @include oc-motion(transform, move, $reduced: preserve);
+      }
+    `);
+
+    const reducedCss = result.css.slice(
+      result.css.indexOf('@media (prefers-reduced-motion: reduce)'),
+    );
+
+    expect(reducedCss).toContain(
+      'transition-duration: calc(var(--oc-motion-duration-move) * var(--oc-motion-duration-scale-preserve) * var(--oc-motion-pace-normal) * 1);',
+    );
+    expect(reducedCss).toContain(
+      'transition-timing-function: var(--oc-motion-timing-move);',
+    );
+    expect(reducedCss).not.toContain('transform: none;');
+    expect(reducedCss).not.toContain('transition: none;');
+  });
+
+  it('removes reduced feedback motion when no feedback-safe property remains', () => {
+    const result = compileMotion(`
+      .target {
+        @include oc-motion(transform, feedback);
+      }
+    `);
+
+    const reducedCss = result.css.slice(
+      result.css.indexOf('@media (prefers-reduced-motion: reduce)'),
+    );
+
+    expect(reducedCss).toContain('transition: none;');
+    expect(reducedCss).toContain('transform: none;');
+  });
+
+  it('does not emit reduced-motion media for function-only usage', () => {
+    const result = compileMotion(`
+      .target {
+        transition: oc-motion(opacity, feedback);
+      }
+    `);
+
+    expect(result.css).not.toContain('prefers-reduced-motion');
+  });
+
+  it('rejects numeric pace values', () => {
+    expect(() =>
+      compileMotion(`
+        .target {
+          transition: oc-motion(opacity, feedback, $pace: 0.85);
+        }
+      `),
+    ).toThrow('Unknown oc-motion pace: 0.85. Use quick, normal, or slow.');
+  });
+
+  it('rejects negative duration scale values', () => {
+    expect(() =>
+      compileMotion(`
+        .target {
+          transition: oc-motion(opacity, feedback, $duration-scale: -0.1);
+        }
+      `),
+    ).toThrow('oc-motion $duration-scale must be greater than or equal to 0.');
+  });
+
+  it('rejects unit scale values', () => {
+    expect(() =>
+      compileMotion(`
+        .target {
+          transform: scale(oc-motion-scale(95%, feedback));
+        }
+      `),
+    ).toThrow('oc-motion-scale $scale must be a unitless number.');
+  });
+
+  it('rejects negative scale values', () => {
+    expect(() =>
+      compileMotion(`
+        .target {
+          transform: scale(oc-motion-scale(-0.1, feedback));
+        }
+      `),
+    ).toThrow('oc-motion-scale $scale must be greater than or equal to 0.');
+  });
+
+  it('rejects unknown phase values', () => {
+    expect(() =>
+      compileMotion(`
+        .target {
+          transition: oc-motion(opacity, reveal, $phase: leave);
+        }
+      `),
+    ).toThrow(
+      'Unknown oc-motion phase: leave. Use change, enter, exit, settle, or loop.',
+    );
+  });
+
+  it('rejects duration token overrides for spring-backed motion', () => {
+    expect(() =>
+      compileMotion(`
+        .target {
+          transition: oc-motion(opacity, reveal, $duration-token: var(--local-reveal-time));
+        }
+      `),
+    ).toThrow(
+      'oc-motion $duration-token is not supported for spring-backed motion.',
+    );
+  });
+
+  it('rejects unknown reduced policies', () => {
+    expect(() =>
+      compileMotion(`
+        .target {
+          @include oc-motion(opacity, feedback, $reduced: shrink);
+        }
+      `),
+    ).toThrow(
+      'Unknown oc-motion reduced policy: shrink. Use auto, preserve, fade, static, or feedback.',
+    );
+  });
+});

package/src/scss/mixins/_responsive.scss

@@ -0,0 +1,366 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use '../foundations/responsive.config' as *;
+@use './breakpoint' as *;
+@use './utils' as *;
+
+$oc-responsive-stop-order: (min, sm, md, lg, xl, hg);
+$oc-responsive-point-order: (min-sm, min-md, min-lg, min-xl, min-hg);
+
+@function oc-responsive-active-stops($stops: null, $stops-name: '$oc-responsive-stops') {
+  $active-stops: $oc-responsive-stops;
+  $active-stops-name: '$oc-responsive-stops';
+
+  @if $stops != null {
+    $active-stops: $stops;
+    $active-stops-name: $stops-name;
+  }
+
+  @if list.length($active-stops) == 0 {
+    @error "#{$active-stops-name} must include at least one responsive stop.";
+  }
+
+  @return $active-stops;
+}
+
+@function oc-responsive-active-start($stops: null, $stops-name: '$oc-responsive-stops') {
+  $active-stops: oc-responsive-active-stops($stops, $stops-name);
+
+  @return list.nth($active-stops, 1);
+}
+
+@function oc-responsive-active-end($stops: null, $stops-name: '$oc-responsive-stops') {
+  $active-stops: oc-responsive-active-stops($stops, $stops-name);
+
+  @return list.nth($active-stops, list.length($active-stops));
+}
+
+@function oc-responsive-static-stop($stops: null, $stops-name: '$oc-responsive-stops') {
+  @if $oc-responsive-static-stop != null {
+    @return $oc-responsive-static-stop;
+  }
+
+  @return oc-responsive-active-start($stops, $stops-name);
+}
+
+@function oc-responsive-stop-index($stop) {
+  $index: list.index($oc-responsive-stop-order, $stop);
+
+  @if $index == null {
+    @error "Unknown responsive stop '#{$stop}'.";
+  }
+
+  @return $index;
+}
+
+@function oc-responsive-token-has-stop($values, $stop) {
+  @return map.has-key($values, $stop) and map.get($values, $stop) != null;
+}
+
+@function oc-responsive-clamp-stop($stop, $stops: null, $stops-name: '$oc-responsive-stops') {
+  $index: oc-responsive-stop-index($stop);
+  $active-start: oc-responsive-active-start($stops, $stops-name);
+  $active-end: oc-responsive-active-end($stops, $stops-name);
+  $start-index: oc-responsive-stop-index($active-start);
+  $end-index: oc-responsive-stop-index($active-end);
+
+  @if $index < $start-index {
+    @return $active-start;
+  }
+
+  @if $index > $end-index {
+    @return $active-end;
+  }
+
+  @return $stop;
+}
+
+@function oc-responsive-resolve-stop-value($values, $stop) {
+  @if oc-responsive-token-has-stop($values, $stop) {
+    @return map.get($values, $stop);
+  }
+
+  $stop-index: oc-responsive-stop-index($stop);
+
+  @for $index from $stop-index through 1 {
+    $candidate: list.nth($oc-responsive-stop-order, $index);
+
+    @if oc-responsive-token-has-stop($values, $candidate) {
+      @return map.get($values, $candidate);
+    }
+  }
+
+  @for $index from $stop-index through list.length($oc-responsive-stop-order) {
+    $candidate: list.nth($oc-responsive-stop-order, $index);
+
+    @if oc-responsive-token-has-stop($values, $candidate) {
+      @return map.get($values, $candidate);
+    }
+  }
+
+  @error "Responsive token has no stop values.";
+}
+
+@function oc-responsive-max-active-defined-stop($values, $stops: null, $stops-name: '$oc-responsive-stops', $token-name: null) {
+  $active-stops: oc-responsive-active-stops($stops, $stops-name);
+  $target-stop: null;
+
+  @each $stop in $active-stops {
+    @if oc-responsive-token-has-stop($values, $stop) {
+      $target-stop: $stop;
+    }
+  }
+
+  @if $target-stop == null {
+    @if $token-name != null {
+      @error "Responsive token '#{$token-name}' has no values in #{$stops-name}.";
+    }
+
+    @error "Responsive token has no values in #{$stops-name}.";
+  }
+
+  @return $target-stop;
+}
+
+@function oc-responsive-resolve-target-stop($values, $target, $stops: null, $stops-name: '$oc-responsive-stops', $token-name: null) {
+  @if $target == max-active-defined {
+    @return oc-responsive-max-active-defined-stop($values, $stops, $stops-name, $token-name);
+  }
+
+  @return $target;
+}
+
+@function oc-responsive-rem($value) {
+  @if meta.type-of($value) == 'number' and math.is-unitless($value) {
+    @return toRem($value);
+  }
+
+  @return $value;
+}
+
+@function oc-responsive-segment-value($values, $from-stop, $to-stop, $basis, $anchor: to, $stops: null, $stops-name: '$oc-responsive-stops') {
+  $effective-from-stop: oc-responsive-clamp-stop($from-stop, $stops, $stops-name);
+  $effective-to-stop: oc-responsive-clamp-stop($to-stop, $stops, $stops-name);
+  $from: oc-responsive-rem(oc-responsive-resolve-stop-value($values, $effective-from-stop));
+  $to: oc-responsive-rem(oc-responsive-resolve-stop-value($values, $effective-to-stop));
+
+  @if $oc-responsive-mode == static {
+    @return oc-responsive-rem(oc-responsive-resolve-stop-value($values, oc-responsive-static-stop($stops, $stops-name)));
+  }
+
+  @if $from == $to {
+    @return $to;
+  }
+
+  @if $oc-responsive-mode == fluid {
+    @return fluidClamp($from, $basis, $anchor, $to);
+  }
+
+  @error "Unknown responsive mode '#{$oc-responsive-mode}'.";
+}
+
+@function oc-responsive-point-order-index($point-name) {
+  $index: list.index($oc-responsive-point-order, $point-name);
+
+  @if $index == null {
+    @error "Unknown responsive profile point '#{$point-name}'.";
+  }
+
+  @return $index;
+}
+
+@function oc-responsive-point-media($point-name) {
+  @if meta.type-of($point-name) == 'list' and list.length($point-name) == 2 {
+    @return $point-name;
+  }
+
+  @if $point-name == min-sm {
+    @return (min, sm);
+  }
+
+  @if $point-name == min-md {
+    @return (min, md);
+  }
+
+  @if $point-name == min-lg {
+    @return (min, lg);
+  }
+
+  @if $point-name == min-xl {
+    @return (min, xl);
+  }
+
+  @if $point-name == min-hg {
+    @return (min, hg);
+  }
+
+  @error "Unknown responsive profile point '#{$point-name}'.";
+}
+
+@mixin oc-responsive-media($media) {
+  @if meta.type-of($media) == 'list' and list.length($media) == 2 {
+    @include respond-to(list.nth($media, 1), list.nth($media, 2)) {
+      @content;
+    }
+  } @else {
+    @include respond-to($media) {
+      @content;
+    }
+  }
+}
+
+@mixin oc-emit-responsive-token-values($namespace, $tokens, $stop, $only: null) {
+  @each $token, $values in $tokens {
+    @if $only == null or list.index($only, $token) != null {
+      $target-stop: oc-responsive-resolve-target-stop($values, $stop, null, '$oc-responsive-stops', $token);
+
+      --oc-#{$namespace}-#{$token}: #{oc-responsive-rem(oc-responsive-resolve-stop-value($values, $target-stop))};
+    }
+  }
+}
+
+@mixin oc-emit-stepped-point-responsive-token-values($namespace, $tokens, $target, $stops: null, $stops-name: '$oc-responsive-stops') {
+  @each $token, $values in $tokens {
+    $target-stop: oc-responsive-resolve-target-stop($values, $target, $stops, $stops-name, $token);
+
+    --oc-#{$namespace}-#{$token}: #{oc-responsive-rem(oc-responsive-resolve-stop-value($values, $target-stop))};
+  }
+}
+
+@mixin oc-emit-stepped-point-responsive-tokens($namespace, $tokens, $profile, $stops: null, $stops-name: '$oc-responsive-stops', $profile-name: '$oc-responsive-profile') {
+  @if meta.type-of($profile) != 'map' {
+    @error "#{$profile-name} must be a map.";
+  }
+
+  $profile-type: map.get($profile, type);
+
+  @if $profile-type != stepped-points {
+    @error "Unknown responsive profile type '#{$profile-type}'.";
+  }
+
+  $points: map.get($profile, points);
+
+  @if meta.type-of($points) != 'map' {
+    @error "#{$profile-name}.points must be a map.";
+  }
+
+  @if not map.has-key($points, base) {
+    @error "#{$profile-name}.points must include base.";
+  }
+
+  @each $point-name, $target in $points {
+    @if $point-name != base {
+      $point-index: oc-responsive-point-order-index($point-name);
+    }
+  }
+
+  @include oc-emit-stepped-point-responsive-token-values($namespace, $tokens, map.get($points, base), $stops, $stops-name);
+
+  @each $point-name in $oc-responsive-point-order {
+    @if map.has-key($points, $point-name) {
+      $target: map.get($points, $point-name);
+
+      @include oc-responsive-media(oc-responsive-point-media($point-name)) {
+        @include oc-emit-stepped-point-responsive-token-values($namespace, $tokens, $target, $stops, $stops-name);
+      }
+    }
+  }
+}
+
+@mixin oc-emit-stepped-responsive-tokens($namespace, $tokens, $stops: null, $stops-name: '$oc-responsive-stops') {
+  $active-stops: oc-responsive-active-stops($stops, $stops-name);
+  $default-stop: list.nth($active-stops, 1);
+
+  @include oc-emit-responsive-token-values($namespace, $tokens, $default-stop);
+
+  @if list.length($active-stops) > 1 {
+    @for $index from 2 through list.length($active-stops) {
+      $stop: list.nth($active-stops, $index);
+
+      @include respond-to(min, $stop) {
+        @include oc-emit-responsive-token-values($namespace, $tokens, $stop);
+      }
+    }
+  }
+}
+
+@mixin oc-emit-responsive-tokens($namespace, $tokens, $segments, $stops: null, $stops-name: '$oc-responsive-stops', $profile: null, $profile-name: '$oc-responsive-profile') {
+  @if $oc-responsive-mode == stepped {
+    @if $profile != null {
+      @include oc-emit-stepped-point-responsive-tokens($namespace, $tokens, $profile, $stops, $stops-name, $profile-name);
+    } @else {
+      @include oc-emit-stepped-responsive-tokens($namespace, $tokens, $stops, $stops-name);
+    }
+  } @else if $oc-responsive-mode != fluid and $oc-responsive-mode != static {
+    @error "Unknown responsive mode '#{$oc-responsive-mode}'.";
+  } @else if $profile != null {
+    @error "#{$profile-name} requires $oc-responsive-mode: stepped.";
+  } @else {
+    $default-segment: map.get($segments, default);
+    $default-stop: map.get($default-segment, stop);
+
+    @each $token, $values in $tokens {
+      --oc-#{$namespace}-#{$token}: #{oc-responsive-segment-value($values, $default-stop, $default-stop, 1, to, $stops, $stops-name)};
+    }
+
+    @if $oc-responsive-mode != static {
+      @each $segment-name, $segment in $segments {
+        @if $segment-name != default {
+          $media: map.get($segment, media);
+          $from-stop: map.get($segment, from);
+          $to-stop: map.get($segment, to);
+          $basis: map.get($segment, basis);
+          $anchor: to;
+          $only: null;
+
+          @if map.has-key($segment, anchor) {
+            $anchor: map.get($segment, anchor);
+          }
+
+          @if map.has-key($segment, only) {
+            $only: map.get($segment, only);
+          }
+
+          @include oc-responsive-media($media) {
+            @each $token, $values in $tokens {
+              @if $only == null or list.index($only, $token) != null {
+                $token-anchor: $anchor;
+                $token-basis: $basis;
+                $token-from-stop: $from-stop;
+                $token-to-stop: $to-stop;
+
+                @if map.has-key($segment, token-overrides) {
+                  $token-overrides: map.get($segment, token-overrides);
+
+                  @if map.has-key($token-overrides, $token) {
+                    $token-override: map.get($token-overrides, $token);
+
+                    @if map.has-key($token-override, anchor) {
+                      $token-anchor: map.get($token-override, anchor);
+                    }
+
+                    @if map.has-key($token-override, basis) {
+                      $token-basis: map.get($token-override, basis);
+                    }
+
+                    @if map.has-key($token-override, from) {
+                      $token-from-stop: map.get($token-override, from);
+                    }
+
+                    @if map.has-key($token-override, to) {
+                      $token-to-stop: map.get($token-override, to);
+                    }
+                  }
+                }
+
+                --oc-#{$namespace}-#{$token}: #{oc-responsive-segment-value($values, $token-from-stop, $token-to-stop, $token-basis, $token-anchor, $stops, $stops-name)};
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}