@aquera/nile-elements 0.1.38 → 0.1.39-beta-1.0

package/src/nile-toast/nile-toast.css.ts

@@ -15,7 +15,7 @@ export const styles = css`
     display: contents;
 
     /* For better DX, we'll reset the margin here so the base part can inherit it */
-    margin: 0;
+    margin: var(--nile-spacing-none);
   }
 
   .alert {
@@ -25,10 +25,10 @@ export const styles = css`
     display: flex;
     align-items: flex-start;
     border: solid 2px 2px;
-    border-radius: 8px;
+    border-radius: var(--nile-radius-md, var(--ng-radius-xl));
     margin: inherit;
-    padding: 16px;
-    gap: 16px;
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
     width: max-content;
     min-width: 400px;
   }
@@ -39,8 +39,8 @@ export const styles = css`
   }
 
   .alert__prefix-icon-container {
-    background-color: red;
-    border-radius: 4px;
+    background-color: var(--nile-colors-red-500);
+    border-radius: var(--nile-radius-sm);
     box-sizing: border-box;
     display: flex;
     justify-content: center;
@@ -51,57 +51,57 @@ export const styles = css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: 10px;
+    font-size: var(--nile-type-scale-1);
   }
 
   .alert--success {
-    border: 1px solid var(--nile-toast-color-border-success);
-    background: var(--nile-toast-color-background-success);
-    box-shadow: var(--nile-toast-color-box-shadow);
+    border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-secondary-alt));
+    background: var(--nile-toast-color-background-success, var(--ng-colors-bg-primary-alt));
+    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
   }
 
   .alert--success .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-success);
+    background: var(--nile-toast-color-icon-background-color-success, var(--ng-colors-bg-primary-alt));
   }
 
   .alert--info {
-    border: 1px solid var(--nile-toast-color-border-info);
-    background: var(--nile-toast-color-background-info);
-    box-shadow: var(--nile-toast-color-box-shadow);
+    border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-secondary-alt));
+    background: var(--nile-toast-color-background-info, var(--ng-colors-bg-primary-alt));
+    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
   }
 
   .alert--info .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-info);
+    background: var(--nile-toast-color-icon-background-color-info, var(--ng-colors-bg-primary-alt));
   }
 
   .alert--warning {
-    border: 1px solid var(--nile-toast-color-border-warning);
-    background: var(--nile-toast-color-background-warning);
-    box-shadow: var(--nile-toast-color-box-shadow);
+    border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-secondary-alt));
+    background: var(--nile-toast-color-background-warning, var(--ng-colors-bg-primary-alt));
+    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
   }
 
   .alert--warning .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-warning);
+    background: var(--nile-toast-color-icon-background-color-warning, var(--ng-colors-bg-primary-alt));
   }
 
   .alert--error {
-    border: 1px solid var(--nile-toast-color-border-error);
-    background: var(--nile-toast-color-background-error);
-    box-shadow: var(--nile-toast-color-box-shadow);
+    border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-secondary-alt));
+    background: var(--nile-toast-color-background-error, var(--ng-colors-bg-primary-alt));
+    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
   }
 
   .alert--error .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-error);
+    background: var(--nile-toast-color-icon-background-color-error, var(--ng-colors-bg-primary-alt));
   }
 
   .alert--gray {
-    border: 1px solid var(--nile-toast-color-border-gray);
-    background: var(--nile-toast-color-background-gray);
-    box-shadow: var(--nile-toast-color-box-shadow);
+    border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-secondary-alt));
+    background: var(--nile-toast-color-background-gray, var(--ng-colors-bg-primary-alt));
+    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
   }
 
   .alert--gray .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-gray);
+    background: var(--nile-toast-color-icon-background-color-gray, var(--ng-colors-bg-primary-alt));
   }
 
   .alert--black {
@@ -121,25 +121,23 @@ export const styles = css`
     align-items: center;
     flex-direction: column;
     align-items: flex-start;
-    font-family: var(--nile-font-family-serif);
-    font-size: 14px;
-    line-height: 20px;
-    color: black;
-    gap:3px;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-display));
+    font-size: var(--nile-type-scale-3);
+    color: var(--nile-colors-dark-900);
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
   }
 
   .alert__message--title {
-    font-weight: 600;
-    color:var(--nile-colors-dark-900);
+    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
+    color:var(--nile-colors-dark-900, var(--ng-colors-primary-900));
   }
 
   .alert__message--content {
-    font-weight:400;
-    color:var(--nile-colors-dark-500);
+    font-weight:var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
   }
 
   .alert__message--content-only {
-    margin-top: 3px;
   }
 
   .alert__close-button {
@@ -151,14 +149,14 @@ export const styles = css`
   .alert__tags {
     display: flex;
     flex-wrap: wrap;
-    gap: 10px;
-    margin-top: 4px;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
   }
 
   .alert__tag {
     height: 24px;
     display: flex;
-    border-radius: 4px;
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
     border: 1px solid var(--nile-colors-neutral-400);
     background: var(--nile-colors-white-base);
   }
@@ -168,26 +166,26 @@ export const styles = css`
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 6px;
+    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-sm, var(--ng-spacing-sm));
 
-    color: var(--nile-colors-dark-900);
-    font-family:  var(--nile-font-family-serif);
-    font-size: 14px;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    font-family:  var(--nile-font-family-serif, var(--ng-font-family-display));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
   }
 
   .alert__tag-image {
     height: 24px;
     width: 24px;
-    border-radius: 4px 0 0 4px;
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));
   }
 
   .alert__prefix-img {
     height: 24px;
-    border-radius: 4px;
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
   }
 
   .alert--no-content{

package/src/nile-toast/nile-toast.ts

@@ -209,15 +209,15 @@ export class NileToast extends NileElement {
   getIconColorByVariant() {
     switch (this.variant) {
       case 'success':
-        return 'var(--nile-toast-color-icon-color-success)';
+        return 'var(--nile-toast-color-icon-color-success, var(--ng-colors-fg-success-primary))';
       case 'info':
-        return 'var(--nile-toast-color-icon-color-info)';
+        return 'var(--nile-toast-color-icon-color-info, var(--ng-colors-fg-brand-primary-600))';
       case 'warning':
-        return 'var(--nile-toast-color-icon-color-warning)';
+        return 'var(--nile-toast-color-icon-color-warning, var(--ng-colors-fg-warning-primary))';
       case 'error':
-        return 'var(--nile-toast-color-icon-color-error)';
+        return 'var(--nile-toast-color-icon-color-error, var(--ng-colors-fg-error-primary))';
       case 'gray':
-        return 'var(--nile-toast-color-icon-color-gray)';
+        return 'var(--nile-toast-color-icon-color-gray, var(--ng-colors-fg-tertiary-600))';
       case 'black':
         return 'var(--nile-toast-color-icon-color-black)';
     }
@@ -371,7 +371,7 @@ export class NileToast extends NileElement {
                 name="${this.closeIconName}"
                 label="close"
                 size="20"
-                color="var(--nile-colors-neutral-700)"
+                color="var(--nile-colors-neutral-700,var(--ng-colors-fg-quaternary-400))"
                 @click=${this.handleCloseClick}
               ></nile-icon-button>
             `

package/src/nile-toolbar/nile-toolbar.css.ts

@@ -23,12 +23,12 @@ export const styles = css`
     padding: 0 48px;
     box-sizing: border-box;
     min-height: 64px;
-    line-height: var(--nile-toolbar-line-height);
-    font-weight: var(--nile-toolbar-font-weight);
-    font-family: var(--nile-font-family-sans-serif);
-    font-size: var(--nile-toolbar-font-size);
-    background-color: var(--nile-toolbar-background-color, var(--nile-colors-white-base));
-    color: var(--nile-toolbar-text-color, rgba(0, 0, 0, 0.87));
+    line-height: var(--nile-toolbar-line-height, var(--ng-line-height-text-xl));
+    font-weight: var(--nile-toolbar-font-weight, var(--ng-font-weight-500));
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    font-size: var(--nile-toolbar-font-size, var(--ng-font-size-text-xl));
+    background-color: var(--nile-toolbar-background-color, var(--ng-colors-text-primary-on-brand));
+    color: var(--nile-toolbar-text-color, var(--ng-color-base-black));
   }
 `;
 

package/src/nile-tooltip/nile-tooltip-utils.ts

@@ -0,0 +1,271 @@
+export function isInViewport(element: HTMLElement): boolean {
+  const rect = element.getBoundingClientRect();
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+}
+
+
+export function getValidTooltipPosition(
+  triggerRect: DOMRect,
+  tooltipRect: DOMRect,
+  originalPlacement: string,
+  distance: number,
+  skidding: number,
+  caretSize: number,
+  viewportWidth: number,
+  viewportHeight: number
+): { top: number; left: number; placement: string } {
+  const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+
+  const getCandidatePosition = (placement: string) => {
+    let top = 0;
+    let left = 0;
+
+    switch (placement) {
+      case 'top':
+        top = triggerRect.top - tooltipRect.height - distance;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
+        break;
+      case 'top-start': {
+        top = triggerRect.top - tooltipRect.height - distance;
+        const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
+        left = Math.max(triggerRect.left + skidding, centeredLeft);
+        break;
+      }
+      case 'top-end': {
+        top = triggerRect.top - tooltipRect.height - distance;
+        const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
+        const maxLeft = triggerRect.right - tooltipRect.width + skidding;
+        left = Math.min(centeredLeft, maxLeft);
+        break;
+      }
+
+      case 'bottom':
+        top = triggerRect.bottom + distance;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
+        break;
+      case 'bottom-start': {
+        top = triggerRect.bottom + distance;
+        const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
+        left = Math.max(triggerRect.left + skidding, centeredLeft);
+
+        break;
+      }
+
+      case 'bottom-end': {
+        top = triggerRect.bottom + distance;
+        const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
+        const maxLeft = triggerRect.right - tooltipRect.width + skidding;
+        left = Math.min(centeredLeft, maxLeft);
+        break;
+      }
+
+      case 'left':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;
+        left = triggerRect.left - tooltipRect.width - distance;
+        break;
+      case 'left-start': {
+        const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+        top = triggerCenterY - tooltipRect.height / 2;
+        left = triggerRect.left - tooltipRect.width - distance;
+        if (top < triggerRect.top) {
+          top = triggerRect.top;
+        }
+        break;
+      }
+
+      case 'left-end': {
+        const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+        top = triggerCenterY - tooltipRect.height / 2;
+        left = triggerRect.left - tooltipRect.width - distance;
+        if (top + tooltipRect.height > triggerRect.bottom) {
+          top = triggerRect.bottom - tooltipRect.height;
+        }
+
+        break;
+      }
+
+      case 'right':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;
+        left = triggerRect.right + distance;
+        break;
+      case 'right-start': {
+        const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+        top = triggerCenterY - tooltipRect.height / 2;
+        left = triggerRect.right + distance;
+        if (top < triggerRect.top) {
+          top = triggerRect.top;
+        }
+
+        break;
+      }
+
+      case 'right-end': {
+        const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+        top = triggerCenterY - tooltipRect.height / 2;
+        left = triggerRect.right + distance;
+        if (top + tooltipRect.height > triggerRect.bottom) {
+          top = triggerRect.bottom - tooltipRect.height;
+        }
+
+        break;
+      }
+
+      default:
+        top = triggerRect.top - tooltipRect.height - distance;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
+    }
+
+    return { top, left };
+  };
+
+  const candidateFits = (top: number, left: number) =>
+    top >= 0 &&
+    left >= 0 &&
+    top + tooltipRect.height <= viewportHeight &&
+    left + tooltipRect.width <= viewportWidth;
+
+  let placement = originalPlacement;
+  let candidate = getCandidatePosition(placement);
+
+  if (!candidateFits(candidate.top, candidate.left)) {
+    if (['top', 'top-start', 'top-end'].includes(originalPlacement)) {
+      placement = 'bottom';
+    } else if (['bottom', 'bottom-start', 'bottom-end'].includes(originalPlacement)) {
+      placement = 'top';
+    } else if (['right', 'right-start', 'right-end'].includes(originalPlacement)) {
+      placement = 'left';
+    } else if (['left', 'left-start', 'left-end'].includes(originalPlacement)) {
+      placement = 'right';
+    }
+    candidate = getCandidatePosition(placement);
+    const leftCandidate = getCandidatePosition('left');
+    const bottomCandidate = getCandidatePosition('bottom');
+    const topCandidate = getCandidatePosition('top');
+    if (
+      !candidateFits(leftCandidate.top, leftCandidate.left) &&
+      !candidateFits(bottomCandidate.top, bottomCandidate.left) &&
+      !candidateFits(topCandidate.top, topCandidate.left)
+    ) {
+      placement = 'right';
+      candidate = getCandidatePosition(placement);
+    }
+    else {
+      const rightCandidate = getCandidatePosition('right');
+      if (
+        !candidateFits(rightCandidate.top, rightCandidate.left) &&
+        !candidateFits(bottomCandidate.top, bottomCandidate.left) &&
+        !candidateFits(topCandidate.top, topCandidate.left)
+      ) {
+        placement = 'left';
+        candidate = getCandidatePosition(placement);
+      }
+    }
+  }
+
+  if (candidate.left < 0) {
+    candidate.left = 5;
+  } else if (candidate.left + tooltipRect.width > viewportWidth) {
+    candidate.left = viewportWidth - tooltipRect.width - 5;
+  }
+
+  if (candidate.top < 0) {
+    candidate.top = 5;
+  } else if (candidate.top + tooltipRect.height > viewportHeight) {
+    candidate.top = viewportHeight - tooltipRect.height - 5;
+  }
+
+  return { ...candidate, placement };
+}
+
+
+
+export interface CaretPositionInput {
+  placement: string;
+  tooltipRect: DOMRect;
+  triggerRect: DOMRect;
+  caretSize: number;
+  left: number;
+  top: number;
+}
+
+export function getCaretPosition({
+  placement,
+  tooltipRect,
+  triggerRect,
+  caretSize,
+  left,
+  top
+}: CaretPositionInput): { caretLeft: number; caretTop: number } {
+  const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+  const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+
+  const [primaryPlacement, secondaryPlacement] = placement.split('-');
+
+  let caretLeft = 0;
+  let caretTop = 0;
+
+  switch (primaryPlacement) {
+    case 'top':
+      caretTop = tooltipRect.height - caretSize;
+      caretLeft = triggerCenterX - left - caretSize;
+      if (placement === 'top-end') {
+        caretLeft = triggerCenterX - left - caretSize;
+      } else if (secondaryPlacement === 'start') {
+        caretLeft = triggerCenterX - left - caretSize;
+      } else if (secondaryPlacement === 'end') {
+        caretLeft = tooltipRect.width - 2 * caretSize + 8;
+      }
+      caretLeft = Math.max(caretSize, Math.min(caretLeft, tooltipRect.width - 2 * caretSize));
+      break;
+
+    case 'bottom':
+      caretTop = -caretSize;
+      caretLeft = triggerCenterX - left - caretSize;
+      break;
+
+    case 'left':
+      caretLeft = tooltipRect.width - caretSize;
+      if (secondaryPlacement === 'start') {
+        const computedCaretTop = triggerCenterY - top - caretSize;
+        const minCaretTop = triggerRect.top - top;
+        caretTop = Math.max(computedCaretTop, minCaretTop);
+      } else if (secondaryPlacement === 'end') {
+        const computedCaretTop = triggerCenterY - top - caretSize;
+        const maxCaretTop = triggerRect.bottom - top - 2 * caretSize;
+        caretTop = Math.min(computedCaretTop, maxCaretTop);
+      } else {
+        caretTop = triggerCenterY - top - caretSize;
+      }
+      caretTop = Math.max(caretSize, Math.min(caretTop, tooltipRect.height - 2 * caretSize));
+      break;
+
+
+    case 'right':
+      caretLeft = -caretSize;
+      if (secondaryPlacement === 'start') {
+        const computedCaretTop = triggerCenterY - top - caretSize;
+        const minCaretTop = triggerRect.top - top;
+        caretTop = Math.max(computedCaretTop, minCaretTop);
+      } else if (secondaryPlacement === 'end') {
+        const computedCaretTop = triggerCenterY - top - caretSize;
+        const maxCaretTop = triggerRect.bottom - top - 2 * caretSize;
+        caretTop = Math.min(computedCaretTop, maxCaretTop);
+      } else {
+        caretTop = triggerCenterY - top - caretSize;
+      }
+      caretTop = Math.max(caretSize, Math.min(caretTop, tooltipRect.height - 2 * caretSize));
+      break;
+
+
+    default:
+      caretLeft = tooltipRect.width / 2 - caretSize;
+      caretTop = tooltipRect.height / 2 - caretSize;
+  }
+
+  return { caretLeft, caretTop };
+}

package/src/nile-tooltip/nile-tooltip.css.ts

@@ -11,60 +11,93 @@ import { css } from 'lit';
  * Tooltip CSS
  */
 export const styles = css`
-  :host {
-    --max-width: 20rem;
-    --hide-delay: 0ms;
-    --show-delay: 150ms;
 
-    display: contents;
-  }
 
-  .tooltip {
-    --arrow-size: 6px;
-    --arrow-color: var(--nile-tooltip-color-background);
-  }
+:host {
+      position: relative;
+      display: inline-block;
+    }
+    .tooltip {
+      position: fixed;
+      z-index: 1000;
+      background-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));
+      color: var(--nile-colors-white-base, var(--ng-color-base-white));
+      padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
+      border-radius: var(--nile-radius-sm, var(--ng-spacing-md));
+      font-size: var(--nile-tooltip-font-size-sm);
+      line-height: var(--nile-tooltip-line-height-sm);
+      opacity: 0;
+      transition: opacity 0.2s, transform 0.2s;
+      pointer-events: none;
+      white-space: normal;
+      visibility: hidden;
+      overflow: visible;
+ 
+    }
+    :host([open]) .tooltip {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+    .tooltip-content {
+      overflow: auto;
+      max-width: 250px;
+      max-height: 116px;
+    }
+    .tooltip-caret {
+      position: absolute;
+      width: calc(2 * var(--caret-size, 6px));
+      height: calc(2 * var(--caret-size, 6px));
+      background-color: inherit;
+      transform: rotate(45deg);
+      z-index: -1;
+    }
+    .trigger-container {
+      display: inline-block;
+    }
+ 
+ 
+:host([open]) .tooltip {
+  visibility: visible;
+  pointer-events: auto;
+  animation: fadeIn 150ms forwards;
+}
 
-  .tooltip::part(popup) {
-    pointer-events: none;
-    z-index: 1000;
-  }
+ 
+.tooltip.hide {
+  animation: fadeOut 100ms forwards;
+}
 
-  .tooltip[placement^='top']::part(popup) {
-    transform-origin: bottom;
+ 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
   }
-
-  .tooltip[placement^='bottom']::part(popup) {
-    transform-origin: top;
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
+}
 
-  .tooltip[placement^='left']::part(popup) {
-    transform-origin: right;
+ 
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
   }
-
-  .tooltip[placement^='right']::part(popup) {
-    transform-origin: left;
+  to {
+    opacity: 0;
+    transform: translateY(5px);
   }
+}
 
-  .tooltip__body {
-    display: block;
-    width: max-content;
-    max-width: var(--max-width);
-    border-radius: 4px;
-    background-color: var(--nile-tooltip-color-background);
-    font-size: var(--nile-tooltip-font-size-sm);
-    font-weight: var(--nile-tooltip-font-weight-sm);
-    line-height: var(--nile-tooltip-line-height-sm);
-    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
-    color: var(--nile-colors-white-base);
-    pointer-events: none;
-    word-break: break-word;
-  }
 
-  .tooltip__body--large {
-    font-size: var(--nile-tooltip-font-size-lg);
-    line-height: var(--nile-tooltip-line-height-lg);
-    font-weight: var(--nile-tooltip-font-weight-lg);
-  }
+
+
+
+
+ 
 `;
 
-export default [styles];
+export default [styles];