@radui/ui 1.0.0 → 1.1.0

package/dist/styles/clarity/Badge/badge.clarity.scss

@@ -0,0 +1,118 @@
+.rad-ui-badge-root {
+  --rad-ui-badge-gap: var(--rad-ui-spacing-1);
+  --rad-ui-badge-padding-x-sm: calc(var(--rad-ui-spacing-1) + var(--rad-ui-density-gap-xs));
+  --rad-ui-badge-padding-x-md: calc(var(--rad-ui-spacing-2) + var(--rad-ui-density-gap-xs));
+  --rad-ui-badge-padding-x-lg: var(--rad-ui-spacing-3);
+  --rad-ui-badge-padding-x-xl: calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs));
+  --rad-ui-badge-font-size-sm: calc(var(--rad-ui-font-size-1) - (var(--rad-ui-spacing-1) / 4));
+  --rad-ui-badge-font-size-lg: calc(var(--rad-ui-font-size-2) - (var(--rad-ui-spacing-1) / 4));
+
+  // Tone scale the soft variant is built from: neutral gray by default,
+  // the chosen accent when `color` is set.
+  --rad-ui-badge-tone-800: var(--rad-ui-color-gray-800);
+  --rad-ui-badge-tone-950: var(--rad-ui-color-gray-950);
+  --rad-ui-badge-tone-1000: var(--rad-ui-color-gray-1000);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rad-ui-badge-gap);
+  min-height: var(--rad-ui-size-5);
+  padding-inline: var(--rad-ui-badge-padding-x-md);
+  border: var(--rad-ui-border-width-default) solid transparent;
+  border-radius: var(--rad-ui-control-radius-sm);
+  box-sizing: border-box;
+  box-shadow: var(--rad-ui-shadow-none);
+  font-family: var(--rad-ui-font-mono);
+  font-size: var(--rad-ui-font-size-1);
+  font-weight: 600;
+  line-height: var(--rad-ui-line-height-1);
+  white-space: nowrap;
+
+  &[data-color] {
+    --rad-ui-badge-tone-800: var(--rad-ui-color-accent-800);
+    --rad-ui-badge-tone-950: var(--rad-ui-color-accent-950);
+    --rad-ui-badge-tone-1000: var(--rad-ui-color-accent-1000);
+  }
+
+  &[data-variant="solid"] {
+    background-color: var(--rad-ui-text-primary);
+    border-color: transparent;
+    color: var(--rad-ui-surface-panel);
+
+    // Solid fill uses the 950 step (as Button does): the 800 step cannot carry
+    // light text at WCAG AA for most accent scales (e.g. gray 3.2:1, sky 1.5:1).
+    &[data-color] {
+      background-color: var(--rad-ui-color-accent-950);
+      color: var(--rad-ui-color-accent-50);
+    }
+  }
+
+  // Translucent tint of the tone with vivid text. The tint composites over
+  // whatever surface the badge sits on. Text is 950 in dark; light mixes in
+  // 1000 (--rad-ui-badge-soft-text-weight) because 950 alone falls just under
+  // WCAG AA on some scales. Every scale clears 4.5:1 in both appearances.
+  &[data-variant="soft"] {
+    background-color: color-mix(in srgb, var(--rad-ui-badge-tone-800) 14%, transparent);
+    border-color: transparent;
+    color: color-mix(in srgb, var(--rad-ui-badge-tone-950) var(--rad-ui-badge-soft-text-weight, 70%), var(--rad-ui-badge-tone-1000));
+  }
+
+  &[data-variant="surface"] {
+    background-color: var(--rad-ui-surface-panel);
+    border-color: var(--rad-ui-border-soft);
+    box-shadow: var(--rad-ui-shadow-xs);
+    color: var(--rad-ui-text-primary);
+
+    &[data-color] {
+      background-color: var(--rad-ui-color-accent-50);
+      border-color: var(--rad-ui-color-accent-300);
+      color: var(--rad-ui-color-accent-950);
+    }
+  }
+
+  &[data-variant="outline"] {
+    background-color: transparent;
+    border-color: var(--rad-ui-border-soft);
+    color: var(--rad-ui-text-primary);
+
+    &[data-color] {
+      border-color: var(--rad-ui-color-accent-400);
+      color: var(--rad-ui-color-accent-950);
+    }
+  }
+
+  &[data-variant="ghost"] {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--rad-ui-text-primary);
+
+    &[data-color] {
+      color: var(--rad-ui-color-accent-950);
+    }
+  }
+
+  &[data-size="small"] {
+    min-height: var(--rad-ui-size-4);
+    padding-inline: var(--rad-ui-badge-padding-x-sm);
+    font-size: var(--rad-ui-badge-font-size-sm);
+  }
+
+  &[data-size="medium"] {
+    min-height: var(--rad-ui-size-5);
+    padding-inline: var(--rad-ui-badge-padding-x-md);
+    font-size: var(--rad-ui-font-size-1);
+  }
+
+  &[data-size="large"] {
+    min-height: var(--rad-ui-size-6);
+    padding-inline: var(--rad-ui-badge-padding-x-lg);
+    font-size: var(--rad-ui-badge-font-size-lg);
+  }
+
+  &[data-size="x-large"] {
+    min-height: calc(var(--rad-ui-size-6) + var(--rad-ui-spacing-1));
+    padding-inline: var(--rad-ui-badge-padding-x-xl);
+    font-size: var(--rad-ui-font-size-2);
+  }
+}

package/dist/styles/clarity/BlockQuote/blockquote.clarity.scss

@@ -0,0 +1,123 @@
+.rad-ui-block-quote {
+  --rad-ui-block-quote-font-size-lg: calc(var(--rad-ui-font-size-5) + var(--rad-ui-spacing-1));
+  --rad-ui-block-quote-font-size-xl: calc(var(--rad-ui-font-size-5) + var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs));
+
+  position: relative;
+  margin: 0;
+  max-width: calc(var(--rad-ui-size-16) * 18);
+  padding-inline-start: var(--rad-ui-spacing-6);
+  border-inline-start: var(--rad-ui-border-width-4) solid var(--rad-ui-border-default);
+  font-family: Georgia, "Times New Roman", Times, serif;
+  font-style: italic;
+  font-weight: var(--rad-ui-component-font-weight-regular);
+  letter-spacing: -0.02em;
+  color: var(--rad-ui-text-primary);
+  font-size: var(--rad-ui-font-size-4);
+  line-height: calc(var(--rad-ui-component-line-height-relaxed) + 0.05);
+
+  &[data-color] {
+    border-inline-start-color: var(--rad-ui-color-accent-600);
+    color: var(--rad-ui-color-accent-1000);
+  }
+  
+  // Size variants
+  // Size controls spacing (padding-inline-start), border width (border-inline-start-width), font size, and line height
+  // Variants should NOT override these sizing properties unless explicitly combined
+  &[data-size="small"] {
+    font-size: calc(var(--rad-ui-font-size-3) - (var(--rad-ui-spacing-1) / 4));
+    padding-inline-start: var(--rad-ui-spacing-4);
+    border-inline-start-width: var(--rad-ui-border-width-3);
+    line-height: var(--rad-ui-line-height-3);
+  }
+  
+  &[data-size="medium"] {
+    font-size: var(--rad-ui-font-size-4);
+    padding-inline-start: var(--rad-ui-spacing-6);
+    border-inline-start-width: var(--rad-ui-border-width-4);
+    line-height: calc(var(--rad-ui-component-line-height-relaxed) + 0.05);
+  }
+
+  &[data-size="large"] {
+    font-size: var(--rad-ui-block-quote-font-size-lg);
+    padding-inline-start: calc(var(--rad-ui-spacing-6) + var(--rad-ui-spacing-1));
+    border-inline-start-width: var(--rad-ui-border-width-5);
+    line-height: var(--rad-ui-line-height-3);
+  }
+
+  &[data-size="x-large"] {
+    font-size: var(--rad-ui-block-quote-font-size-xl);
+    padding-inline-start: var(--rad-ui-spacing-8);
+    border-inline-start-width: var(--rad-ui-border-width-6);
+    line-height: calc(var(--rad-ui-component-line-height-normal) + 0.2);
+  }
+  
+  // Variant styles
+  // Variants only change color, background, and border style (not sizing)
+  // If a variant must change sizing, create explicit combined selectors like:
+  // &[data-size="large"][data-variant="soft"]
+  &[data-variant="outline"] {
+    padding: var(--rad-ui-spacing-4) var(--rad-ui-spacing-5);
+    border: var(--rad-ui-border-width-default) solid var(--rad-ui-border-default);
+    border-radius: var(--rad-ui-control-radius-md);
+    background-color: var(--rad-ui-surface-panel);
+
+    &[data-size="small"] {
+      padding: var(--rad-ui-spacing-3) calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs));
+    }
+
+    &[data-size="medium"] {
+      padding: var(--rad-ui-spacing-4) var(--rad-ui-spacing-5);
+    }
+
+    &[data-size="large"] {
+      padding: calc(var(--rad-ui-spacing-4) + var(--rad-ui-density-gap-xs)) calc(var(--rad-ui-spacing-5) + var(--rad-ui-density-gap-xs));
+    }
+
+    &[data-size="x-large"] {
+      padding: var(--rad-ui-spacing-5) var(--rad-ui-spacing-6);
+    }
+
+    &[data-color] {
+      border-color: var(--rad-ui-color-accent-600);
+      color: var(--rad-ui-color-accent-1000);
+    }
+  }
+  
+  // Soft fills with the component-background step. The 50 step is the page
+  // background, so a soft quote was indistinguishable from the default one.
+  &[data-variant="soft"] {
+    background-color: var(--rad-ui-color-accent-200);
+    border-radius: var(--rad-ui-control-radius-md);
+    border-inline-start-width: 0;
+    color: var(--rad-ui-color-accent-1000);
+    padding: var(--rad-ui-spacing-4) var(--rad-ui-spacing-5);
+    
+    // Combined: soft variant with specific sizes that need padding adjustments
+    // Only add combined selectors if the variant truly needs different sizing
+    &[data-size="small"] {
+      padding: var(--rad-ui-spacing-3) calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs));
+    }
+    
+    &[data-size="medium"] {
+      padding: var(--rad-ui-spacing-4) var(--rad-ui-spacing-5);
+    }
+    
+    &[data-size="large"] {
+      padding: calc(var(--rad-ui-spacing-4) + var(--rad-ui-density-gap-xs)) calc(var(--rad-ui-spacing-5) + var(--rad-ui-density-gap-xs));
+    }
+    
+    &[data-size="x-large"] {
+      padding: var(--rad-ui-spacing-5) var(--rad-ui-spacing-6);
+    }
+
+    &[data-color] {
+      background-color: var(--rad-ui-color-accent-200);
+      color: var(--rad-ui-color-accent-1000);
+    }
+  }
+
+  &[data-variant="accent"] {
+    border-inline-start-color: var(--rad-ui-color-accent-600);
+    color: var(--rad-ui-color-accent-1000);
+  }
+}

package/dist/styles/clarity/Breadcrumb/breadcrumb.clarity.scss

@@ -0,0 +1,50 @@
+.rad-ui-breadcrumb-root {
+    color: var(--rad-ui-text-secondary);
+    font-family: var(--rad-ui-font-sans);
+    font-size: var(--rad-ui-font-size-2);
+    line-height: var(--rad-ui-line-height-2);
+}
+
+.rad-ui-breadcrumb-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--rad-ui-spacing-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.rad-ui-breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--rad-ui-spacing-2);
+    min-width: 0;
+}
+
+.rad-ui-breadcrumb-link {
+    color: var(--rad-ui-text-secondary);
+    text-decoration: none;
+    border-radius: var(--rad-ui-radius-sm);
+
+    &:hover {
+        color: var(--rad-ui-text-primary);
+        text-decoration: underline;
+        text-underline-offset: 0.16em;
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: var(--rad-ui-focus-ring-shadow-sm);
+    }
+}
+
+.rad-ui-breadcrumb-page {
+    color: var(--rad-ui-text-primary);
+    font-weight: var(--rad-ui-font-weight-medium);
+}
+
+.rad-ui-breadcrumb-separator {
+    color: var(--rad-ui-text-muted);
+    user-select: none;
+}

package/dist/styles/clarity/Button/button.clarity.scss

@@ -0,0 +1,132 @@
+.rad-ui-button-root{
+    --rad-ui-button-solid-background: var(--rad-ui-color-accent-950);
+    --rad-ui-button-solid-hover: var(--rad-ui-color-accent-1000);
+    --rad-ui-button-solid-foreground: var(--rad-ui-color-accent-50);
+    --rad-ui-button-font-size-lg: calc(var(--rad-ui-font-size-3) - (var(--rad-ui-spacing-1) / 4));
+
+    min-height: var(--rad-ui-control-height-md);
+    gap: var(--rad-ui-spacing-2);
+    border: var(--rad-ui-border-width-default) solid var(--rad-ui-button-solid-background);
+    border-radius: var(--rad-ui-control-radius-md);
+    display:inline-flex;
+    align-items:center;
+    justify-content:center;
+    padding-inline: var(--rad-ui-control-padding-x-md);
+    white-space: nowrap;
+    font-family: var(--rad-ui-font-sans);
+    font-size: var(--rad-ui-font-size-2);
+    line-height: var(--rad-ui-line-height-1);
+    font-weight: 600;
+    background-color: var(--rad-ui-button-solid-background);
+    color: var(--rad-ui-button-solid-foreground);
+    box-sizing: border-box;
+    box-shadow: var(--rad-ui-control-shadow-hover);
+
+    &:hover{
+        background-color: var(--rad-ui-button-solid-hover);
+        border-color: var(--rad-ui-button-solid-hover);
+    }
+
+    &:active{
+        transform: translateY(1px);
+    }
+
+    &:disabled,
+    &[data-disabled] {
+        opacity: 0.5;
+        pointer-events: none;
+        cursor: not-allowed;
+        transform: none;
+    }
+
+    &[data-variant="outline"]{
+        background-color: var(--rad-ui-surface-panel);
+        color: var(--rad-ui-color-accent-1000);
+        border-color: var(--rad-ui-color-accent-600);
+        box-shadow: var(--rad-ui-control-shadow);
+
+        &:hover{
+            background-color: var(--rad-ui-color-accent-200);
+            border-color: var(--rad-ui-color-accent-700);
+            color: var(--rad-ui-color-accent-1000);
+        }
+    }
+
+    &[data-variant="soft"]{
+        border-color: transparent;
+        color: var(--rad-ui-color-accent-1000);
+        background-color:  var(--rad-ui-color-accent-200);
+        box-shadow: var(--rad-ui-control-shadow);
+
+        &:hover{
+            background-color: var(--rad-ui-color-accent-300);
+            border-color: transparent;
+            color: var(--rad-ui-color-accent-1000);
+        }
+
+        &:active{
+            background-color: var(--rad-ui-color-accent-400);
+        }
+    }
+
+    &[data-variant="ghost"]{
+        background-color: transparent;
+        color: var(--rad-ui-color-accent-1000);
+        border-color: transparent;
+        box-shadow: var(--rad-ui-shadow-none);
+
+        &:hover{
+            border-color: transparent;
+            background-color: var(--rad-ui-color-accent-200);
+            color: var(--rad-ui-color-accent-1000);
+        }
+    }
+
+    &[data-variant="destructive"]{
+        background-color: var(--rad-ui-color-red-800);
+        border-color: var(--rad-ui-color-red-600);
+        color: var(--rad-ui-color-red-50);
+
+        &:hover{
+            background-color: var(--rad-ui-color-red-900);
+            border-color: var(--rad-ui-color-red-900);
+        }
+    }
+
+    &[data-size="small"]{
+        min-height: var(--rad-ui-size-8);
+        padding-inline: var(--rad-ui-control-padding-x-sm);
+        font-size: var(--rad-ui-font-size-1);
+    }
+
+    &[data-size="medium"]{
+        min-height: var(--rad-ui-control-height-md);
+        padding-inline: var(--rad-ui-control-padding-x-md);
+    }
+
+    &[data-size="large"]{
+        min-height: var(--rad-ui-control-height-lg);
+        padding-inline: var(--rad-ui-control-padding-x-lg);
+        font-size: var(--rad-ui-button-font-size-lg);
+    }
+
+    &[data-size="x-large"]{
+        min-height: calc(var(--rad-ui-control-height-lg) + var(--rad-ui-spacing-1));
+        padding-inline: var(--rad-ui-spacing-6);
+        font-size: var(--rad-ui-font-size-3);
+    }
+
+    &:focus-visible{
+        outline: none;
+        box-shadow: var(--rad-ui-focus-ring-shadow-offset-panel), var(--rad-ui-control-shadow-hover);
+    }
+
+    // Solid fills (default, `solid`, `destructive`): the contained ring is drawn in
+    // accent-800 on top of an accent-950 / red-800 fill (about 1.5:1), so it is not
+    // visible. Draw the ring outside the button, against the surrounding surface.
+    &:not([data-variant]):focus-visible,
+    &[data-variant="solid"]:focus-visible,
+    &[data-variant="destructive"]:focus-visible{
+        box-shadow: var(--rad-ui-focus-ring-shadow-outset), var(--rad-ui-control-shadow-hover);
+    }
+}

package/dist/styles/clarity/Callout/callout.clarity.scss

@@ -0,0 +1,183 @@
+.rad-ui-callout {
+  --rad-ui-callout-emphasis-color: var(--rad-ui-text-primary);
+  --rad-ui-callout-body-font-size: calc(var(--rad-ui-font-size-2) - (var(--rad-ui-spacing-1) / 4));
+  --rad-ui-callout-gap-md: calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs));
+  --rad-ui-callout-gap-sm: calc(var(--rad-ui-spacing-2) + var(--rad-ui-density-gap-xs));
+  --rad-ui-callout-padding-y-lg: calc(var(--rad-ui-spacing-4) + var(--rad-ui-density-gap-xs));
+
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--rad-ui-callout-gap-md);
+  border: var(--rad-ui-border-width-default) solid var(--rad-ui-border-soft);
+  border-radius: var(--rad-ui-panel-radius-lg);
+  padding: var(--rad-ui-spacing-4) calc(var(--rad-ui-spacing-4) + var(--rad-ui-density-gap-xs));
+  background-color: var(--rad-ui-surface-panel);
+  color: var(--rad-ui-text-primary);
+  box-sizing: border-box;
+  box-shadow: var(--rad-ui-shadow-none);
+
+  .rad-ui-callout-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: var(--rad-ui-size-6);
+    height: var(--rad-ui-size-6);
+    margin-top: calc(var(--rad-ui-spacing-1) / 4);
+    color: var(--rad-ui-callout-emphasis-color);
+
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+      color: inherit;
+    }
+  }
+
+  .rad-ui-callout-text {
+    margin: 0;
+    color: inherit;
+    font-size: var(--rad-ui-callout-body-font-size);
+    line-height: var(--rad-ui-line-height-3);
+
+    strong,
+    b {
+      display: block;
+      margin: 0 0 var(--rad-ui-spacing-1);
+      font-size: var(--rad-ui-callout-body-font-size);
+      line-height: var(--rad-ui-line-height-2);
+      font-weight: 600;
+      color: var(--rad-ui-callout-emphasis-color);
+    }
+
+    span {
+      display: block;
+      color: var(--rad-ui-text-secondary);
+      font-size: var(--rad-ui-callout-body-font-size);
+      line-height: calc(var(--rad-ui-line-height-2) + 0.15);
+    }
+  }
+
+  &[data-color] {
+    --rad-ui-callout-emphasis-color: var(--rad-ui-color-accent-1000);
+
+    border-color: var(--rad-ui-color-accent-500);
+    background-color: var(--rad-ui-color-accent-100);
+  }
+
+  &[data-intent="destructive"] {
+    --rad-ui-callout-emphasis-color: var(--rad-ui-danger-text);
+
+    border-color: var(--rad-ui-danger-border);
+    background-color: var(--rad-ui-danger-background);
+  }
+
+  &[data-variant="outline"] {
+    background-color: var(--rad-ui-surface-panel);
+    border-color: var(--rad-ui-border-default);
+  }
+
+  &[data-variant="soft"] {
+    background-color: var(--rad-ui-surface-muted);
+    border-color: transparent;
+  }
+
+  &[data-variant="outline"][data-color] {
+    border-color: var(--rad-ui-color-accent-600);
+  }
+
+  // Soft must read stronger than the default colored callout (accent-100), not
+  // weaker: accent-50 is the page background step.
+  &[data-variant="soft"][data-color] {
+    background-color: var(--rad-ui-color-accent-200);
+    border-color: transparent;
+  }
+
+  &[data-variant="outline"][data-intent="destructive"] {
+    border-color: var(--rad-ui-danger-border);
+  }
+
+  &[data-variant="soft"][data-intent="destructive"] {
+    background-color: var(--rad-ui-danger-background);
+    border-color: transparent;
+  }
+
+  &[data-size="small"] {
+    gap: var(--rad-ui-callout-gap-sm);
+    padding: var(--rad-ui-spacing-3) calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs));
+    border-radius: calc(var(--rad-ui-panel-radius-md) + var(--rad-ui-density-gap-xs));
+
+    .rad-ui-callout-icon {
+      width: var(--rad-ui-size-5);
+      height: var(--rad-ui-size-5);
+    }
+
+    .rad-ui-callout-text {
+      strong,
+      b {
+        margin-bottom: calc(var(--rad-ui-spacing-1) - (var(--rad-ui-spacing-1) / 4));
+        font-size: var(--rad-ui-font-size-1);
+      }
+
+      span {
+        font-size: var(--rad-ui-font-size-1);
+      }
+    }
+  }
+
+  &[data-size="medium"] {
+    gap: var(--rad-ui-callout-gap-md);
+    padding: var(--rad-ui-spacing-4) calc(var(--rad-ui-spacing-4) + var(--rad-ui-density-gap-xs));
+
+    .rad-ui-callout-icon {
+      width: var(--rad-ui-size-6);
+      height: var(--rad-ui-size-6);
+    }
+  }
+
+  &[data-size="large"] {
+    gap: var(--rad-ui-spacing-4);
+    padding: var(--rad-ui-callout-padding-y-lg) var(--rad-ui-spacing-5);
+    border-radius: calc(var(--rad-ui-panel-radius-lg) + var(--rad-ui-density-gap-xs));
+
+    .rad-ui-callout-icon {
+      width: calc(var(--rad-ui-size-6) + (var(--rad-ui-spacing-1) / 2));
+      height: calc(var(--rad-ui-size-6) + (var(--rad-ui-spacing-1) / 2));
+    }
+
+    .rad-ui-callout-text {
+      strong,
+      b {
+        font-size: var(--rad-ui-font-size-2);
+      }
+
+      span {
+        font-size: var(--rad-ui-font-size-2);
+      }
+    }
+  }
+
+  &[data-size="x-large"] {
+    gap: var(--rad-ui-spacing-4);
+    padding: var(--rad-ui-spacing-5) calc(var(--rad-ui-spacing-5) + var(--rad-ui-density-gap-xs));
+    border-radius: calc(var(--rad-ui-panel-radius-lg) + var(--rad-ui-spacing-1));
+
+    .rad-ui-callout-icon {
+      width: calc(var(--rad-ui-size-6) + var(--rad-ui-spacing-1));
+      height: calc(var(--rad-ui-size-6) + var(--rad-ui-spacing-1));
+    }
+
+    .rad-ui-callout-text {
+      strong,
+      b {
+        font-size: calc(var(--rad-ui-font-size-3) - (var(--rad-ui-spacing-1) / 4));
+      }
+
+      span {
+        font-size: calc(var(--rad-ui-font-size-3) - (var(--rad-ui-spacing-1) / 4));
+      }
+    }
+  }
+}