@geneui/components 3.0.0-next-9ffcb93-16102024 → 3.0.0-next-48d0ef7-31102024

package/Pill.js

@@ -0,0 +1,64 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import { _ as _objectWithoutProperties, a as _extends } from './ArrowLeft-b88e2ba8.js';
+import { c as classNames } from './index-ce02421b.js';
+import Tooltip from './Tooltip.js';
+import { a as useEllipsisDetection } from './useEllipsisDetection-46d712b6.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import 'react-dom';
+import './GeneUIProvider.js';
+
+var _excluded = ["size", "color"];
+var SvgDot = function SvgDot(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "currentColor" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z",
+    fill: color
+  }));
+};
+
+var css_248z = ".pill{align-items:center;display:inline-flex;max-width:100%;vertical-align:top}.pill_icon_after{flex-direction:row-reverse}.pill_size_medium:not(.pill_icon_only){gap:var(--guit-ref-spacing-xsmall);padding-bottom:var(--guit-ref-spacing-2xsmall);padding-top:var(--guit-ref-spacing-2xsmall)}.pill_size_medium:not(.pill_icon_before,.pill_size_medium.pill_icon_after,.pill_size_medium.pill_icon_only){min-width:var(--guit-sem-dimension-width-large);padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-medium)}.pill_size_medium.pill_icon_after,.pill_size_medium.pill_icon_before{min-width:var(--guit-sem-dimension-width-3xlarge)}.pill_size_medium.pill_icon_before{padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-xsmall)}.pill_size_medium.pill_icon_after{padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-medium)}.pill_size_medium.pill_icon_only{min-width:var(--guit-sem-dimension-width-medium);padding:var(--guit-ref-spacing-2xsmall)}.pill_size_small:not(.pill_icon_only){gap:var(--guit-ref-spacing-2xsmall);padding-bottom:var(--guit-ref-spacing-4xsmall);padding-top:var(--guit-ref-spacing-4xsmall)}.pill_size_small:not(.pill_icon_before,.pill_size_small.pill_icon_after,.pill_size_small.pill_icon_only){min-width:var(--guit-sem-dimension-width-large);padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-medium)}.pill_size_small.pill_icon_after,.pill_size_small.pill_icon_before{min-width:var(--guit-sem-dimension-width-3xlarge)}.pill_size_small.pill_icon_before{padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-xsmall)}.pill_size_small.pill_icon_after{padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-medium)}.pill_size_small.pill_icon_only{min-width:var(--guit-sem-dimension-width-small);padding:var(--guit-ref-spacing-4xsmall)}.pill_size_medium:not(.pill_icon_only),.pill_size_small:not(.pill_icon_only){font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.pill_size_smallNudge{gap:var(--guit-ref-spacing-3xsmall);padding-bottom:var(--guit-ref-spacing-4xsmall);padding-top:var(--guit-ref-spacing-4xsmall)}.pill_size_smallNudge:not(.pill_icon_only){font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.pill_size_smallNudge:not(.pill_icon_before,.pill_size_smallNudge.pill_icon_after,.pill_size_smallNudge.pill_icon_only){min-width:var(--guit-sem-dimension-width-medium);padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-xsmall)}.pill_size_smallNudge.pill_icon_after,.pill_size_smallNudge.pill_icon_before{min-width:var(--guit-sem-dimension-width-large)}.pill_size_smallNudge.pill_icon_before{padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-3xsmall)}.pill_size_smallNudge.pill_icon_after{padding-inline-end:var(--guit-ref-spacing-3xsmall);padding-inline-start:var(--guit-ref-spacing-xsmall)}.pill_size_smallNudge.pill_icon_only{min-width:var(--guit-sem-dimension-width-small-nudge);padding:var(--guit-ref-spacing-4xsmall)}.pill_fill.pill_size_medium,.pill_fill.pill_size_small{border-radius:var(--guit-ref-radius-3xsmall)}.pill_fill.pill_size_smallNudge{border-radius:var(--guit-ref-radius-4xsmall)}.pill_fill.pill_color_informative{background-color:var(--guit-sem-color-background-informative)}.pill_fill.pill_color_neutral{background-color:var(--guit-sem-color-background-neutral-3)}.pill_fill.pill_color_error{background-color:var(--guit-sem-color-background-error-1)}.pill_fill.pill_color_success{background-color:var(--guit-sem-color-background-success-1)}.pill_fill.pill_color_warning{background-color:var(--guit-sem-color-background-warning-1)}.pill_fill.pill_color_purple{background-color:var(--guit-sem-color-background-accent-purple-1)}.pill_fill.pill_color_lagoon{background-color:var(--guit-sem-color-background-accent-lagoon-1)}.pill_fill.pill_color_magenta{background-color:var(--guit-sem-color-background-accent-magenta-1)}.pill_fill.pill_color_slate{background-color:var(--guit-sem-color-background-accent-slate-1)}.pill_fill.pill_color_inverse{background-color:var(--guit-sem-color-background-inverse);color:var(--guit-sem-color-foreground-neutral-2)}.pill_color_informative{color:var(--guit-sem-color-foreground-informative)}.pill_color_neutral{color:var(--guit-sem-color-foreground-neutral-2)}.pill_color_error{color:var(--guit-sem-color-foreground-error)}.pill_color_success{color:var(--guit-sem-color-foreground-success)}.pill_color_warning{color:var(--guit-sem-color-foreground-warning)}.pill_color_purple{color:var(--guit-sem-color-foreground-accent-purple)}.pill_color_lagoon{color:var(--guit-sem-color-foreground-accent-lagoon)}.pill_color_magenta{color:var(--guit-sem-color-foreground-accent-magenta)}.pill_color_slate{color:var(--guit-sem-color-foreground-accent-slate)}.pill:not(.pill_fill).pill_color_inverse{color:var(--guit-sem-color-foreground-inverse)}.pill__text{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}.pill__icon{flex:0 0 auto}";
+styleInject(css_248z);
+
+const iconSizes = {
+    smallNudge: 16,
+    small: 20,
+    medium: 20
+};
+/**
+ * A Pill component used to display concise information or categorize content. Often used for labels or status indicators, Pill components are visually distinct and can convey different meanings through text and color coding.
+ */
+const Pill = ({ color = "informative", size = "medium", text, iconAlignment = "before", isFill, withDot = true, Icon, className }) => {
+    const [isWithDot, setIsWithDot] = useState(withDot);
+    const textRef = useRef(null);
+    const isTruncated = useEllipsisDetection(textRef, [text]);
+    useEffect(() => {
+        setIsWithDot(!Icon && withDot);
+    }, [Icon, withDot]);
+    let iconContent = null;
+    if (Icon) {
+        iconContent = React__default.createElement(Icon, { size: iconSizes[size], className: "pill__icon" });
+    }
+    else if (isWithDot) {
+        iconContent = React__default.createElement(SvgDot, { size: iconSizes[size], className: "pill__icon" });
+    }
+    return (React__default.createElement("div", { className: classNames(`pill pill_size_${size} pill_color_${color}`, className, {
+            [`pill_icon_${isWithDot ? "before" : iconAlignment}`]: text && iconContent,
+            pill_icon_only: !text,
+            pill_fill: isFill
+        }) },
+        iconContent,
+        text && (React__default.createElement(Tooltip, { text: text, isVisible: isTruncated, appearance: color === "inverse" ? "inverse" : "default" },
+            React__default.createElement("span", { ref: textRef, className: "pill__text ellipsis-text" }, text)))));
+};
+
+export { Pill as default };

package/TextLink.js

@@ -0,0 +1,20 @@
+import React__default from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+
+var css_248z = ".textLink{border-radius:var(--guit-ref-radius-4xsmall);cursor:pointer;display:inline-flex;word-break:break-word}.textLink_underline .textLink__text{font-family:var(--guit-sem-font-body-medium-underline-medium-font-family);font-size:var(--guit-sem-font-body-medium-underline-medium-font-size);font-weight:var(--guit-sem-font-body-medium-underline-medium-font-weight);line-height:var(--guit-sem-font-body-medium-underline-medium-line-height);-webkit-text-decoration:var(--guit-sem-font-body-medium-underline-medium-text-decoration);text-decoration:var(--guit-sem-font-body-medium-underline-medium-text-decoration)}.textLink:not(.textLink_underline) .textLink__text{font-family:var(--guit-sem-font-body-medium-default-medium-font-family);font-size:var(--guit-sem-font-body-medium-default-medium-font-size);font-weight:var(--guit-sem-font-body-medium-default-medium-font-weight);line-height:var(--guit-sem-font-body-medium-default-medium-line-height)}.textLink_color_primary{color:var(--guit-sem-color-foreground-brand)}.textLink_color_primary:hover{color:var(--guit-sem-color-foreground-brand-hover)}.textLink_color_primary:active{color:var(--guit-sem-color-foreground-brand-pressed)}.textLink_color_secondary{color:var(--guit-sem-color-foreground-neutral-2)}.textLink_color_secondary:hover{color:var(--guit-sem-color-foreground-neutral-2-hover)}.textLink_color_secondary:active{color:var(--guit-sem-color-foreground-neutral-2-pressed)}.textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse)}.textLink_color_inverse:hover{color:var(--guit-sem-color-foreground-inverse-hover)}.textLink_color_inverse:active{color:var(--guit-sem-color-foreground-inverse-pressed)}.textLink_disabled{pointer-events:none}.textLink_disabled:not(.textLink_color_inverse){color:var(--guit-sem-color-foreground-disabled)}.textLink_disabled.textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse-disabled)}.textLink__text{color:inherit}.textLink__icon{flex:0 0 auto;vertical-align:middle}.textLink__icon_before{margin-inline-end:var(--guit-ref-spacing-3xsmall)}.textLink__icon_after{margin-inline-start:var(--guit-ref-spacing-3xsmall)}";
+styleInject(css_248z);
+
+/**
+ * A link is styled text that navigates users to another location, either within the current experience or to a different app or website.
+ */
+const TextLink = ({ text, href, iconBefore, rel, target = "self", underline, appearance = "primary", disabled, onClick, isLoading, Icon, className }) => isLoading ? (React__default.createElement("span", null, "skeleton")) : (React__default.createElement("a", Object.assign({ target: `_${target}`, rel: rel, className: classNames(`textLink textLink_color_${appearance}`, className, {
+        textLink_underline: underline,
+        textLink_disabled: disabled
+    }), href: href, onClick: onClick }, (disabled && { tabIndex: -1 })),
+    React__default.createElement("span", { className: "textLink__text" },
+        Icon && iconBefore && React__default.createElement(Icon, { className: "textLink__icon textLink__icon_before", size: 20 }),
+        text,
+        Icon && !iconBefore && React__default.createElement(Icon, { className: "textLink__icon textLink__icon_after", size: 20 }))));
+
+export { TextLink as default };

package/{index-65217440.js → Tooltip.js}

@@ -1,8 +1,7 @@
-import { _ as __rest } from './tslib.es6-f211516f.js';
 import * as React from 'react';
-import React__default, { useLayoutEffect, useEffect, useRef, useContext, useState, useMemo, Children, cloneElement, Fragment } from 'react';
+import React__default, { useLayoutEffect, useEffect, useRef, useContext, useState, Children, cloneElement, Fragment } from 'react';
 import * as ReactDOM from 'react-dom';
-import { GeneUIDesignSystemContext } from './GeneUIProvider/index.js';
+import { GeneUIDesignSystemContext } from './GeneUIProvider.js';
 import { s as styleInject } from './style-inject.es-746bb8ed.js';
 
 /**
@@ -474,10 +473,12 @@ const flip = function (options) {
         return {};
       }
       const side = getSide(placement);
+      const initialSideAxis = getSideAxis(initialPlacement);
       const isBasePlacement = getSide(initialPlacement) === initialPlacement;
       const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
       const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
-      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
+      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
+      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements = [initialPlacement, ...fallbackPlacements];
@@ -523,8 +524,17 @@ const flip = function (options) {
           switch (fallbackStrategy) {
             case 'bestFit':
               {
-                var _overflowsData$map$so;
-                const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
+                var _overflowsData$filter2;
+                const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
+                  if (hasFallbackAxisSideDirection) {
+                    const currentSideAxis = getSideAxis(d.placement);
+                    return currentSideAxis === initialSideAxis ||
+                    // Create a bias to the `y` side axis due to horizontal
+                    // reading directions favoring greater width.
+                    currentSideAxis === 'y';
+                  }
+                  return true;
+                }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
                 if (placement) {
                   resetPlacement = placement;
                 }
@@ -575,10 +585,9 @@ async function convertValueToCoords(state, options) {
     crossAxis: 0,
     alignmentAxis: null
   } : {
-    mainAxis: 0,
-    crossAxis: 0,
-    alignmentAxis: null,
-    ...rawValue
+    mainAxis: rawValue.mainAxis || 0,
+    crossAxis: rawValue.crossAxis || 0,
+    alignmentAxis: rawValue.alignmentAxis
   };
   if (alignment && typeof alignmentAxis === 'number') {
     crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
@@ -700,7 +709,11 @@ const shift = function (options) {
         ...limitedCoords,
         data: {
           x: limitedCoords.x - x,
-          y: limitedCoords.y - y
+          y: limitedCoords.y - y,
+          enabled: {
+            [mainAxis]: checkMainAxis,
+            [crossAxis]: checkCrossAxis
+          }
         }
       };
     }
@@ -3577,59 +3590,77 @@ function requireReactIs_development () {
 	}
 } (reactIs));
 
-var css_248z = "[data-gene-ui-version=\"2.16.3\"] .tooltip{align-items:flex-start;border-radius:var(--guit-ref-radius-3xsmall);box-shadow:var(--guit-sem-shadow-floating-2-position-x-1) var(--guit-sem-shadow-floating-2-position-y-1) var(--guit-sem-shadow-floating-2-blur-1) var(--guit-sem-shadow-floating-2-spread-1) var(--guit-sem-color-floating-2-rgba-1),var(--guit-sem-shadow-floating-2-position-x-2) var(--guit-sem-shadow-floating-2-position-y-2) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-shadow-floating-2-spread-2) var(--guit-sem-color-floating-2-rgba-2);display:flex;gap:var(--guit-ref-spacing-3xsmall);justify-content:space-between;max-width:24rem;min-width:var(--guit-sem-dimension-width-3xlarge);padding:var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-medium)}[data-gene-ui-version=\"2.16.3\"] .tooltip_position_top .tooltip__arrow{transform:rotate(0deg)}[data-gene-ui-version=\"2.16.3\"] .tooltip_position_bottom .tooltip__arrow{transform:rotate(180deg)}[data-gene-ui-version=\"2.16.3\"] .tooltip_position_left .tooltip__arrow{transform:rotate(-90deg)}[data-gene-ui-version=\"2.16.3\"] .tooltip_position_right .tooltip__arrow{transform:rotate(90deg)}[data-gene-ui-version=\"2.16.3\"] .tooltip_color_default{background-color:var(--guit-sem-color-background-neutral-4)}[data-gene-ui-version=\"2.16.3\"] .tooltip_color_default .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-4)}[data-gene-ui-version=\"2.16.3\"] .tooltip_color_default .tooltip__icon,[data-gene-ui-version=\"2.16.3\"] .tooltip_color_default .tooltip__text{color:var(--guit-sem-color-foreground-inverse-notheme)}[data-gene-ui-version=\"2.16.3\"] .tooltip_color_inverse{background-color:var(--guit-sem-color-background-neutral-1)}[data-gene-ui-version=\"2.16.3\"] .tooltip_color_inverse .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-1)}[data-gene-ui-version=\"2.16.3\"] .tooltip_color_inverse .tooltip__icon,[data-gene-ui-version=\"2.16.3\"] .tooltip_color_inverse .tooltip__text{color:var(--guit-sem-color-foreground-neutral-2)}[data-gene-ui-version=\"2.16.3\"] .tooltip__arrow{height:4px;position:absolute;width:12px}[data-gene-ui-version=\"2.16.3\"] .tooltip__textWrapper{display:flex;flex-direction:column;gap:var(--guit-sem-font-caption-large-medium-paragraph-spacing)}[data-gene-ui-version=\"2.16.3\"] .tooltip__text{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;font-family:var(--guit-sem-font-caption-large-medium-font-family);font-size:var(--guit-sem-font-caption-large-medium-font-size);font-weight:var(--guit-sem-font-caption-large-medium-font-weight);letter-spacing:var(--guit-sem-font-caption-large-medium-letter-spacing);line-height:var(--guit-sem-font-caption-large-medium-llne-height);overflow:hidden;word-break:break-word}[data-gene-ui-version=\"2.16.3\"] .tooltip__icon{align-items:center;display:flex;flex:0 0 auto;justify-content:center}";
+var css_248z = ".tooltip{align-items:flex-start;border-radius:var(--guit-ref-radius-3xsmall);box-shadow:var(--guit-sem-shadow-floating-2-position-x-1) var(--guit-sem-shadow-floating-2-position-y-1) var(--guit-sem-shadow-floating-2-blur-1) var(--guit-sem-shadow-floating-2-spread-1) var(--guit-sem-color-floating-2-rgba-1),var(--guit-sem-shadow-floating-2-position-x-2) var(--guit-sem-shadow-floating-2-position-y-2) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-shadow-floating-2-spread-2) var(--guit-sem-color-floating-2-rgba-2);display:flex;gap:var(--guit-ref-spacing-3xsmall);justify-content:space-between;max-width:24rem;min-width:var(--guit-sem-dimension-width-3xlarge);padding:var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-medium)}.tooltip_position_top .tooltip__arrow{transform:rotate(0deg)}.tooltip_position_bottom .tooltip__arrow{transform:rotate(180deg)}.tooltip_position_left .tooltip__arrow{transform:rotate(-90deg)}.tooltip_position_right .tooltip__arrow{transform:rotate(90deg)}.tooltip_color_default{background-color:var(--guit-sem-color-background-neutral-4)}.tooltip_color_default .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-4)}.tooltip_color_default .tooltip__icon,.tooltip_color_default .tooltip__text{color:var(--guit-sem-color-foreground-inverse-notheme)}.tooltip_color_inverse{background-color:var(--guit-sem-color-background-neutral-1-nudge)}.tooltip_color_inverse .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.tooltip_color_inverse .tooltip__icon,.tooltip_color_inverse .tooltip__text{color:var(--guit-sem-color-foreground-neutral-2)}.tooltip__arrow{position:absolute}.tooltip__textWrapper{display:flex;flex-direction:column;gap:var(--guit-sem-font-caption-large-medium-paragraph-spacing)}.tooltip__text{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;font-family:var(--guit-sem-font-caption-large-medium-font-family);font-size:var(--guit-sem-font-caption-large-medium-font-size);font-weight:var(--guit-sem-font-caption-large-medium-font-weight);letter-spacing:var(--guit-sem-font-caption-large-medium-letter-spacing);line-height:var(--guit-sem-font-caption-large-medium-llne-height);overflow:hidden;word-break:break-word}.tooltip__icon{flex:0 0 auto}";
 styleInject(css_248z);
 
 const positions = [
-    'top',
-    'right',
-    'bottom',
-    'left',
-    'top-start',
-    'top-end',
-    'right-start',
-    'right-end',
-    'bottom-start',
-    'bottom-end',
-    'left-start',
-    'left-end'
+    "top",
+    "right",
+    "bottom",
+    "left",
+    "top-start",
+    "top-end",
+    "right-start",
+    "right-end",
+    "bottom-start",
+    "bottom-end",
+    "left-start",
+    "left-end"
 ];
 const correctPosition = {
-    'bottom-center': 'bottom',
-    'bottom-left': 'bottom-start',
-    'bottom-right': 'bottom-end',
-    'left-bottom': 'left-end',
-    'left-center': 'left',
-    'left-top': 'left-start',
-    'right-bottom': 'right-end',
-    'right-center': 'right',
-    'right-top': 'right-start',
-    'top-center': 'top',
-    'top-left': 'top-start',
-    'top-right': 'top-end'
+    "bottom-center": "bottom",
+    "bottom-left": "bottom-start",
+    "bottom-right": "bottom-end",
+    "left-bottom": "left-end",
+    "left-center": "left",
+    "left-top": "left-start",
+    "right-bottom": "right-end",
+    "right-center": "right",
+    "right-top": "right-start",
+    "top-center": "top",
+    "top-left": "top-start",
+    "top-right": "top-end"
+};
+const arrowPositions = {
+    "top-start": "left",
+    "top-end": "right",
+    "bottom-end": "right",
+    "bottom-start": "left"
 };
-const FindAndSetRef = (children, childProps, componentRef, checked = false) => {
+const staticSides = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right"
+};
+const FindAndSetRef = (children, childProps, componentRef, checked, Tooltip) => {
+    let isChecked = checked;
     return Children.map(children, (node, i) => {
         const el = node;
         let newProps = Object.assign({}, childProps);
-        if (typeof (el === null || el === void 0 ? void 0 : el.type) === 'string') {
-            if (!el.ref && i === 0 && !checked) {
-                checked = true;
+        if (!React__default.isValidElement(el))
+            return null;
+        if (el.type === Tooltip) {
+            return null;
+        }
+        if (typeof (el === null || el === void 0 ? void 0 : el.type) === "string") {
+            if (!el.ref && i === 0 && !isChecked) {
+                isChecked = true;
                 newProps = Object.assign(Object.assign({}, newProps), { ref: componentRef });
             }
             return cloneElement(el, newProps);
         }
-        if (typeof (el === null || el === void 0 ? void 0 : el.type) === 'function') {
+        if (typeof (el === null || el === void 0 ? void 0 : el.type) === "function") {
             if (!el.ref) {
                 newProps = Object.assign(Object.assign({}, newProps), { ref: componentRef });
             }
-            return cloneElement(el.type(el.props), newProps);
+            return FindAndSetRef(cloneElement(el.type(el.props), newProps), newProps, componentRef, isChecked, Tooltip);
         }
         if ((el === null || el === void 0 ? void 0 : el.type) === Fragment && el.props.children) {
-            return FindAndSetRef(el.props.children, newProps, componentRef, checked);
+            return FindAndSetRef(el.props.children, newProps, componentRef, isChecked, Tooltip);
         }
         if (reactIsExports.isForwardRef(el)) {
-            return FindAndSetRef(el.type.render(el.props, el.ref), newProps, componentRef, checked);
+            return FindAndSetRef(el.type.render(el.props, el.ref), newProps, componentRef, isChecked, Tooltip);
         }
         return el && cloneElement(el, newProps);
     });
@@ -3638,9 +3669,7 @@ const FindAndSetRef = (children, childProps, componentRef, checked = false) => {
 A tooltip is a small, elevated surface that appears to provide contextual information when a user hovers over or focuses on a UI element.
 Tooltips should be used to offer helpful plaintext information, not to communicate system feedback. Use a popover instead if you need to deliver structured information or enable interactions.
 */
-const Tooltip = (_a) => {
-    var _b;
-    var { children, position = 'top', text, customPosition, alwaysShow, padding = 10, isVisible = true, appearance = 'default', Icon } = _a, props = __rest(_a, ["children", "position", "text", "customPosition", "alwaysShow", "padding", "isVisible", "appearance", "Icon"]);
+const Tooltip = ({ children, position = "top-right", text, customPosition, alwaysShow, padding = 10, isVisible = true, appearance = "default", Icon }) => {
     const { geneUIProviderRef } = useContext(GeneUIDesignSystemContext);
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
     const arrowRef = useRef(null);
@@ -3652,14 +3681,14 @@ const Tooltip = (_a) => {
         middleware: [
             offset(padding),
             flip({
-                fallbackAxisSideDirection: 'none',
+                fallbackAxisSideDirection: "none",
                 fallbackPlacements: positions,
                 mainAxis: true
             }),
             arrow({ element: arrowRef }),
             shift(),
             {
-                name: 'getCustomPosition',
+                name: "getCustomPosition",
                 fn: () => customPosition
                     ? {
                         x: customPosition === null || customPosition === void 0 ? void 0 : customPosition.left,
@@ -3672,49 +3701,44 @@ const Tooltip = (_a) => {
     });
     const hover = useHover(context);
     const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
-    const childProps = Object.assign({}, getReferenceProps());
-    const component = useMemo(() => FindAndSetRef(children, childProps, refs.setReference), [children, childProps]);
+    const component = FindAndSetRef(children, getReferenceProps(), refs.setReference, false, Tooltip);
     useEffect(() => {
         var _a;
-        for (let i = 0; i < component.length; i++) {
-            const node = component[i];
-            if (typeof node.ref === 'function' && node.ref === refs.setReference) {
-                break;
-            }
-            if ((_a = node === null || node === void 0 ? void 0 : node.ref) === null || _a === void 0 ? void 0 : _a.current) {
-                refs.setReference(node.ref.current);
-                break;
+        if (component.length) {
+            for (let i = 0; i < component.length; i++) {
+                const node = component[i];
+                if (typeof node.ref === "function" && node.ref === refs.setReference) {
+                    break;
+                }
+                if ((_a = node === null || node === void 0 ? void 0 : node.ref) === null || _a === void 0 ? void 0 : _a.current) {
+                    refs.setReference(node.ref.current);
+                    break;
+                }
             }
         }
     }, [component]);
-    const [currentDirection] = placement.split('-');
-    const staticSide = {
-        top: 'bottom',
-        right: 'left',
-        bottom: 'top',
-        left: 'right'
-    }[currentDirection];
+    if (!component.length) {
+        return children;
+    }
+    const [currentDirection] = placement.split("-");
+    const staticSide = staticSides[currentDirection];
     const middlewareArrowData = middlewareData.arrow;
     const offsetFromEdge = 8;
-    const arrowPositions = {
-        'top-start': 'left',
-        'top-end': 'right',
-        'bottom-end': 'right',
-        'bottom-start': 'left'
-    }[placement];
-    const getCorrectPosition = arrowPositions
-        ? { [arrowPositions]: offsetFromEdge }
-        : { 'inset-inline-start': (middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.x) || undefined };
+    const arrowPosition = arrowPositions[placement];
+    const getCorrectPosition = arrowPosition
+        ? { [arrowPosition]: offsetFromEdge }
+        : { insetInlineStart: middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.x };
     return (React__default.createElement(React__default.Fragment, null,
         component,
         isVisible && (alwaysShow || isPopoverOpen) && (React__default.createElement(FloatingPortal, { root: geneUIProviderRef.current },
-            React__default.createElement("div", Object.assign({ className: `tooltip tooltip_color_${appearance}  tooltip_position_${currentDirection}`, ref: refs.setFloating, style: floatingStyles }, props, getFloatingProps()),
-                React__default.createElement("div", { className: "tooltip__arrow", ref: arrowRef, style: Object.assign(Object.assign({}, getCorrectPosition), { top: (middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.y) || undefined, [staticSide]: arrowRef.current ? `${-((_b = arrowRef === null || arrowRef === void 0 ? void 0 : arrowRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) + 5}px` : 0 }) },
+            React__default.createElement("div", Object.assign({ className: `tooltip tooltip_color_${appearance}  tooltip_position_${currentDirection}`, ref: refs.setFloating, style: floatingStyles }, getFloatingProps()),
+                React__default.createElement("div", { className: "tooltip__arrow", ref: arrowRef, style: Object.assign(Object.assign({}, getCorrectPosition), { top: middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.y, [staticSide]: arrowRef.current ? `${-arrowRef.current.offsetWidth + 6}px` : 0 }) },
                     React__default.createElement("svg", { width: "12", height: "4", viewBox: "0 0 12 4", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                        React__default.createElement("path", { className: "tooltip__arrowPath", d: "M6 4L0 0L12 0L6 4Z", fill: "white" }))),
+                        React__default.createElement("path", { className: "tooltip__arrowPath", d: "M6 4L0 0L12 0L6 4Z" }))),
                 React__default.createElement("div", { className: "tooltip__textWrapper" },
                     React__default.createElement("p", { className: "tooltip__text" }, text)),
-                Icon && React__default.createElement("div", { className: "tooltip__icon" }, Icon))))));
+                Icon && (React__default.createElement("div", { className: "tooltip__icon" },
+                    React__default.createElement(Icon, { size: 16 }))))))));
 };
 
-export { Tooltip as T, reactIsExports as r };
+export { Tooltip as default };

package/{lib → components}/atoms/Avatar/Avatar.d.ts

@@ -1,5 +1,6 @@
-import { FC, PointerEvent, JSX } from 'react';
-import './Avatar.scss';
+import React, { FC, PointerEvent } from "react";
+import { IconProps } from "@geneui/icons";
+import "./Avatar.scss";
 interface IAvatarProps {
     /**
      * Avatar background image source.
@@ -13,19 +14,19 @@ interface IAvatarProps {
      * Avatar icon <br/>
      * The `Icon` prop accepts a JSX element that will be displayed as an avatar.
      */
-    Icon?: JSX.Element;
+    Icon?: React.FC<IconProps>;
     /**
      * This prop defines the width and height for the component <br/>
      * Possible values: `6Xlarge | large | medium | small`
      */
-    size?: '6Xlarge' | 'large' | 'medium' | 'small';
+    size?: "6Xlarge" | "large" | "medium" | "small";
     /**
      * Avatar background color. This prop also has an effect on the `fullName` prop color <br/>
      * Possible values: `neutral | blue | red | green | purple | orange | lagoon | magenta | slate `
      */
-    color?: 'neutral' | 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'lagoon' | 'magenta' | 'slate';
+    color?: "neutral" | "blue" | "red" | "green" | "purple" | "orange" | "lagoon" | "magenta" | "slate";
     /**
-     * A callback function is called when the `avatar` is clicked. It receives an argument containing the event object, a mouse or keyboard event.
+     * A callback function is called when the `avatar` is clicked. It receives an argument containing the event object, a mouse or keyboard event. If onClick is not passed, the Avatar component becomes a non-interactable element.
      */
     onClick?: (e: PointerEvent<HTMLButtonElement>) => void;
     /**

package/components/atoms/Avatar/index.d.ts

@@ -0,0 +1 @@
+export { IAvatarProps, default } from "./Avatar";

package/{lib → components}/atoms/Divider/Divider.d.ts

@@ -1,12 +1,12 @@
-import { FC, JSX } from 'react';
-import { IconProps } from '@geneui/icons';
-import './Divider.scss';
+import { FC, JSX } from "react";
+import { IconProps } from "@geneui/icons";
+import "./Divider.scss";
 interface IDividerProps {
     /**
      * Divider visual style <br/>
      * Possible values: `default | strong | brand | inverse`
      */
-    appearance?: 'default' | 'strong' | 'brand' | 'inverse';
+    appearance?: "default" | "strong" | "brand" | "inverse";
     /**
      * Divider content <br/>
      * The `alignContent` prop accepts a JSX element that will be displayed alongside the divider
@@ -30,7 +30,7 @@ interface IDividerProps {
      * Divider `label` position <br/>
      * Possible values: `before | after | center`
      */
-    labelPosition?: 'before' | 'after' | 'center';
+    labelPosition?: "before" | "after" | "center";
     /**
      * provides space between the edge and the divider
      */

package/components/atoms/Divider/index.d.ts

@@ -0,0 +1 @@
+export { IDividerProps, default } from "./Divider";

package/{lib → components}/atoms/HelperText/HelperText.d.ts

@@ -1,17 +1,18 @@
-import { FC, JSX } from 'react';
-import './HelperText.scss';
+import React, { FC } from "react";
+import { IconProps } from "@geneui/icons";
+import "./HelperText.scss";
 interface IHelperTextProps {
     /**
      * Defines the size of the helper text.<br>
      * Possible values: `medium | small`.
      */
-    size?: 'medium' | 'small';
+    size?: "medium" | "small";
     /**
      * Specifies the type of the helper text. <br>
      * Possible values: `rest | danger | warning`.
      * `rest` for default information, `danger` for error messages, or `warning` for cautions.
      */
-    type?: 'rest' | 'danger' | 'warning';
+    type?: "rest" | "danger" | "warning";
     /**
      * The actual text content to be displayed as helper text.
      * This provides guidance or additional information related to the input field.
@@ -23,7 +24,7 @@ interface IHelperTextProps {
      * If `type` is `rest`, the provided `Icon` will be used (if supplied), otherwise no icon will be displayed.
      * The size of the icon will automatically adjust based on the `size` prop (`small` or `medium`).
      */
-    Icon?: JSX.Element;
+    Icon?: React.FC<IconProps>;
     /**
      * Determines whether the helper text is disabled.
      * If `true`, the helper text will appear dimmed and non-interactive.

package/components/atoms/HelperText/index.d.ts

@@ -0,0 +1 @@
+export { IHelperTextProps, default } from "./HelperText";

package/{lib → components}/atoms/Info/Info.d.ts

@@ -1,7 +1,7 @@
-import { FC } from 'react';
-import { IconProps } from '@geneui/icons';
-import './Info.scss';
-declare const iconSizes: Record<'small' | 'smallNudge' | 'XSmall', IconProps['size']>;
+import { FC } from "react";
+import { IconProps } from "@geneui/icons";
+import "./Info.scss";
+declare const iconSizes: Record<"small" | "smallNudge" | "XSmall", IconProps["size"]>;
 interface IInfoProps {
     /**
      * The text that will be displayed inside the tooltip when the user interacts with the info icon.
@@ -21,7 +21,7 @@ interface IInfoProps {
      * Determines the visual appearance of the info icon.<br>
      * Possible values: `default | brand | inverse`
      */
-    appearance?: 'default' | 'brand' | 'inverse';
+    appearance?: "default" | "brand" | "inverse";
     /**
      * Additional class for the parent element.<br>
      * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.

package/components/atoms/Info/index.d.ts

@@ -0,0 +1 @@
+export { IInfoProps, default } from "./Info";

package/{lib → components}/atoms/Label/Label.d.ts

@@ -1,11 +1,11 @@
-import { FC, JSX } from 'react';
-import './Label.scss';
+import { FC, JSX } from "react";
+import "./Label.scss";
 interface ILabelProps {
     /**
      * Label size.<br/>
      * Possible values: `medium | small`
      */
-    size?: 'medium' | 'small';
+    size?: "medium" | "small";
     /**
      * The text content of the `label`.
      * This is the main text displayed within the `label`.

package/components/atoms/Label/index.d.ts

@@ -0,0 +1 @@
+export { ILabelProps, default } from "./Label";

package/{lib → components}/atoms/Loader/Loader.d.ts

@@ -1,5 +1,5 @@
-import { FC, ReactNode } from 'react';
-import './Loader.scss';
+import { FC, ReactNode } from "react";
+import "./Loader.scss";
 interface ILoaderProps {
     /**
      * Any valid React node. Renders when "isLoading" is set to false
@@ -17,17 +17,17 @@ interface ILoaderProps {
      * Loader visual style. <br/>
      * Possible values: `brand | neutral | inverse`
      */
-    appearance?: 'brand' | 'neutral' | 'inverse';
+    appearance?: "brand" | "neutral" | "inverse";
     /**
      * Loader size <br/>
      * Possible values: `2xLarge | xLarge | large | medium | small | smallNudge`
      */
-    size?: '2xLarge' | 'xLarge' | 'large' | 'medium' | 'small' | 'smallNudge';
+    size?: "2xLarge" | "xLarge" | "large" | "medium" | "small" | "smallNudge";
     /**
      *  Loader text position. <br/>.
      *  Possible values: `below | after`
      */
-    textPosition?: 'below' | 'after';
+    textPosition?: "below" | "after";
 }
 /**
  *Loading spinner is a visual indicator that informs users an operation is in progress. Typically displayed as a rotating icon or circular animation, it signals that the system is working on a task, such as loading data or processing a request, and that the user should wait until the process is complete.

package/components/atoms/Loader/index.d.ts

@@ -0,0 +1 @@
+export { ILoaderProps, default } from "./Loader";

package/{lib → components}/atoms/Pill/Pill.d.ts

@@ -1,5 +1,6 @@
-import { FC, JSX } from 'react';
-import './Pill.scss';
+import React, { FC } from "react";
+import { IconProps } from "@geneui/icons";
+import "./Pill.scss";
 interface IPillProps {
     /**
      * The actual text content to be displayed as pill text.
@@ -10,7 +11,7 @@ interface IPillProps {
      * **Note:** If `withDot` is `true` and no custom `Icon` is provided, the dot icon will always be displayed before the text, regardless of the `iconAlignment` value.<br/>
      * Possible values: `before` or `after`.
      */
-    iconAlignment?: 'before' | 'after';
+    iconAlignment?: "before" | "after";
     /**
      * Pill visual appearance
      * When `isFill` prop set to `true`, the `pill` will have a solid fill, providing a more prominent visual appearance. If `false`, the `pill` will be displayed with an outlined style.
@@ -20,12 +21,12 @@ interface IPillProps {
      * Pill size
      * Possible values: `smallNudge | small | medium`
      */
-    size?: 'smallNudge' | 'small' | 'medium';
+    size?: "smallNudge" | "small" | "medium";
     /**
      * Pill icon <br/>
      * The `Icon` prop accepts a JSX element that will be displayed alongside the `text`
      */
-    Icon?: JSX.Element;
+    Icon?: React.FC<IconProps>;
     /**
      * Displays a dot `Icon` when no custom `Icon` is provided. <br/>
      * If `true`, a dot icon will be shown unless a custom `Icon` is specified. <br/>
@@ -36,7 +37,7 @@ interface IPillProps {
      * Pill color <br/>
      * Possible values: `informative | neutral | error | success | warning | purple | lagoon | magenta | slate | inverse`
      */
-    color?: 'informative' | 'neutral' | 'error' | 'success' | 'warning' | 'purple' | 'lagoon' | 'magenta' | 'slate' | 'inverse';
+    color?: "informative" | "neutral" | "error" | "success" | "warning" | "purple" | "lagoon" | "magenta" | "slate" | "inverse";
     /**
      * Additional class for the parent element.
      * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.

package/components/atoms/Pill/index.d.ts

@@ -0,0 +1 @@
+export { IPillProps, default } from "./Pill";