@geneui/components 3.0.0-next-06dadf3-29102024 → 3.0.0-next-63cb5e7-01112024

package/Avatar.js

@@ -0,0 +1,63 @@
+import React__default, { useState, useEffect } from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import { _ as _objectWithoutProperties, a as _extends } from './ArrowLeft-b88e2ba8.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+
+var _excluded = ["size", "color"];
+var SvgSquare = function SvgSquare(_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: "M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-14a2 2 0 0 1-2-2v-14Z",
+    fill: color
+  }));
+};
+
+var css_248z = ".avatar{align-items:center;border-radius:var(--guit-ref-radius-full);display:flex;justify-content:center;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none}.avatar_size_6Xlarge{font-family:var(--guit-sem-font-heading-medium-semibold-font-family);font-size:var(--guit-sem-font-heading-medium-semibold-font-size);font-weight:var(--guit-sem-font-heading-medium-semibold-font-weight);height:var(--guit-sem-dimension-height-6xlarge);line-height:var(--guit-sem-font-heading-medium-semibold-line-height);width:var(--guit-sem-dimension-width-6xlarge)}.avatar_size_large{height:var(--guit-sem-dimension-height-large);width:var(--guit-sem-dimension-width-large)}.avatar_size_large,.avatar_size_medium{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)}.avatar_size_medium{height:var(--guit-sem-dimension-height-medium);width:var(--guit-sem-dimension-width-medium)}.avatar_size_small{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);height:var(--guit-sem-dimension-height-small);line-height:var(--guit-sem-font-label-small-default-medium-line-height);width:var(--guit-sem-dimension-width-small)}.avatar_color_neutral{background-color:var(--guit-sem-color-background-neutral-2);color:var(--guit-sem-color-foreground-neutral-2)}.avatar_color_blue{background-color:var(--guit-sem-color-background-accent-blue-1);color:var(--guit-sem-color-foreground-accent-blue)}.avatar_color_red{background-color:var(--guit-sem-color-background-accent-red-1);color:var(--guit-sem-color-foreground-accent-red)}.avatar_color_green{background-color:var(--guit-sem-color-background-accent-green-1);color:var(--guit-sem-color-foreground-accent-green)}.avatar_color_orange{background-color:var(--guit-sem-color-background-accent-orange-1);color:var(--guit-sem-color-foreground-accent-orange)}.avatar_color_purple{background-color:var(--guit-sem-color-background-accent-purple-1);color:var(--guit-sem-color-foreground-accent-purple)}.avatar_color_lagoon{background-color:var(--guit-sem-color-background-accent-lagoon-1);color:var(--guit-sem-color-foreground-accent-lagoon)}.avatar_color_magenta{background-color:var(--guit-sem-color-background-accent-magenta-1);color:var(--guit-sem-color-foreground-accent-magenta)}.avatar_color_slate{background-color:var(--guit-sem-color-background-accent-slate-1);color:var(--guit-sem-color-foreground-accent-slate)}.avatar:active:before,.avatar:hover:before,.avatar_disabled:before{content:\"\";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.avatar_disabled{pointer-events:none}.avatar_disabled:before{background-color:var(--guit-sem-color-background-transparent-inverse-disabled)}.avatar_button{cursor:pointer}.avatar_button:hover:before{background-color:var(--guit-sem-color-background-transparent-1-hover)}.avatar_button:active:before{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.avatar__image{display:block;height:100%;object-fit:cover;object-position:center;width:100%}.avatar__text{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;text-transform:uppercase}";
+styleInject(css_248z);
+
+const iconSizes = {
+    small: 16,
+    large: 20,
+    medium: 20,
+    "6Xlarge": 48
+};
+const AvatarWrapper = ({ onClick, children, parentClass, isDisabled }) => {
+    return onClick ? (React__default.createElement("button", { type: "button", onClick: onClick, className: `${parentClass} avatar_button`, disabled: isDisabled }, children)) : (React__default.createElement("div", { className: parentClass }, children));
+};
+/**
+ * An avatar is a graphical representation of a user, typically displayed as a small image or icon. It can be a photo, illustration, or initials, and is used to personalize the user experience by visually identifying the user in interfaces such as profiles, comment sections, and messaging apps.
+ */
+const Avatar = ({ size = "medium", color = "magenta", fullName = "", src, onClick, isDisabled, isLoading, Icon = SvgSquare, // todo need to change to User icon after releasing icons
+className }) => {
+    const [proceedFullName, setProceedFullName] = useState(fullName);
+    useEffect(() => {
+        const [firstName = "", lastName = ""] = fullName.split(" ");
+        const [firstNameFirstLetter] = firstName;
+        const [lastNameFirstLetter] = lastName || "";
+        setProceedFullName(firstNameFirstLetter
+            ? `${firstNameFirstLetter}${!!lastNameFirstLetter && (size === "6Xlarge" || size === "large") ? ` ${lastNameFirstLetter}` : ""}`
+            : ``);
+    }, [fullName, size]);
+    let content = React__default.createElement(Icon, { className: "avatar__icon", size: iconSizes[size] });
+    if (src) {
+        content = React__default.createElement("img", { className: "avatar__image", alt: "avatar", src: src });
+    }
+    else if (proceedFullName) {
+        content = React__default.createElement("span", { className: "avatar__text" }, proceedFullName);
+    }
+    return isLoading ? (React__default.createElement("span", null, "skeleton")) : (React__default.createElement(AvatarWrapper, { parentClass: classNames(`avatar avatar_size_${size} avatar_color_${color}`, className, {
+            avatar_disabled: isDisabled
+        }), onClick: onClick, isDisabled: isDisabled }, content));
+};
+
+export { Avatar as default };

package/Divider.js

@@ -0,0 +1,23 @@
+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 = ".divider{display:inline-flex;gap:var(--guit-ref-spacing-xsmall);overflow:hidden}.divider:before{content:\"\";display:block;flex:1;pointer-events:none}.divider_horizontal{align-items:center;width:100%}.divider_horizontal.divider:after,.divider_horizontal.divider:before{border-block-start:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid);min-width:var(--guit-sem-dimension-width-medium)}.divider_horizontal.divider_inset{padding-inline:var(--guit-ref-spacing-large)}.divider_horizontal.divider:empty:after{display:none}.divider_vertical{align-items:center;flex-direction:column;height:100%}.divider_vertical.divider:before{border-inline-start:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid)}.divider_vertical.divider:after{display:none}.divider_vertical.divider_inset{padding-block:var(--guit-ref-spacing-large)}.divider_color_default .divider__icon,.divider_color_default .divider__text,.divider_color_strong .divider__icon,.divider_color_strong .divider__text{color:var(--guit-sem-color-foreground-neutral-1)}.divider_color_default.divider:after,.divider_color_default.divider:before{border-block-color:var(--guit-sem-color-border-neutral-2);border-inline-color:var(--guit-sem-color-border-neutral-2)}.divider_color_strong.divider:after,.divider_color_strong.divider:before{border-block-color:var(--guit-sem-color-border-neutral-3);border-inline-color:var(--guit-sem-color-border-neutral-3)}.divider_color_brand.divider:after,.divider_color_brand.divider:before{border-block-color:var(--guit-sem-color-border-brand);border-inline-color:var(--guit-sem-color-border-brand)}.divider_color_brand .divider__icon,.divider_color_brand .divider__text{color:var(--guit-sem-color-foreground-brand)}.divider_color_inverse.divider:after,.divider_color_inverse.divider:before{border-block-color:var(--guit-sem-color-border-inverse);border-inline-color:var(--guit-sem-color-border-inverse)}.divider_color_inverse .divider__icon,.divider_color_inverse .divider__text{color:var(--guit-sem-color-foreground-inverse)}.divider_withLabel_before.divider:before{display:none}.divider_withLabel_before.divider:after,.divider_withLabel_center.divider:after{content:\"\";flex:1}.divider_withLabel_center .divider__element{max-width:calc(100% - var(--guit-sem-dimension-width-medium)*4)}.divider_withLabel_after.divider:before{flex:1}.divider_withLabel_after .divider__element,.divider_withLabel_before .divider__element{max-width:calc(100% - var(--guit-sem-dimension-width-medium)*2.8)}.divider__label{align-items:center;display:flex;gap:var(--guit-ref-spacing-3xsmall);overflow:hidden}.divider__text{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)}.divider__icon{flex:0 0 auto}.divider__element{display:flex;flex:0 0 auto;min-width:0;order:1}";
+styleInject(css_248z);
+
+/**
+ * A divider separates sections of content to establish visual rhythm and hierarchy. Combine dividers with appropriate spacing and text hierarchy to effectively organize content within your layout.
+ */
+const Divider = ({ appearance = "default", Icon, vertical, label, labelPosition = "before", content, inset = false, className }) => {
+    return (React__default.createElement("div", { className: classNames(`divider divider_${inset ? "inset" : "block"} divider_color_${appearance}  `, className, {
+            divider_horizontal: !vertical,
+            divider_vertical: vertical,
+            [` divider_withLabel_${labelPosition}`]: (label || Icon) && !vertical
+        }) }, !vertical && (React__default.createElement(React__default.Fragment, null,
+        content && React__default.createElement("div", { className: "divider__element" }, content),
+        (label || Icon) && (React__default.createElement("div", { className: "divider__label" },
+            label && React__default.createElement("span", { className: "divider__text ellipsis-text" }, label),
+            Icon && React__default.createElement(Icon, { className: "divider__icon", size: 20 })))))));
+};
+
+export { Divider as default };

package/{GeneUIProvider/index.js → GeneUIProvider.js}

@@ -1,9 +1,9 @@
-import React__default, { createContext, useRef, useState, useEffect } from 'react';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import React__default, { createContext, useRef, useState, useMemo, useEffect } from 'react';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
 
 /**
  * Do not edit directly
- * Generated on Thu, 03 Oct 2024 08:57:05 GMT
+ * Generated on Thu, 24 Oct 2024 17:13:23 GMT
  */
 
 const GuitRefColorNeutral800base = "#141414";
@@ -193,6 +193,7 @@ const GuitRefShadowBlur2xsmall = "0.2rem";
 const GuitRefShadowBlurXsmall = "0.4rem";
 const GuitRefShadowBlurSmall = "0.6rem";
 const GuitRefShadowBlurMedium = "0.8rem";
+const GuitRefShadowSpreadNegativeXsmall = "-0.4rem";
 const GuitRefShadowSpreadNone = "0rem";
 const GuitRefShadowSpread2xsmall = "0.2rem";
 const GuitRefShadowSpreadXsmall = "0.4rem";
@@ -442,7 +443,7 @@ const GuitSemShadowFloating2PositionY1 = "0.4rem";
 const GuitSemShadowFloating1PositionX2 = "0rem";
 const GuitSemShadowFloating1PositionY2 = "0rem";
 const GuitSemShadowFloating1Blur2 = "0.2rem";
-const GuitSemShadowFloating1Spread2 = "0rem";
+const GuitSemShadowFloating1Spread2 = "-0.4rem";
 const GuitSemShadowFloating2Blur1 = "0.6rem";
 const GuitSemShadowFloating2Spread1 = "0.4rem";
 const GuitSemShadowFloating3PositionX1 = "0rem";
@@ -450,13 +451,13 @@ const GuitSemShadowFloating3PositionY1 = "0.6rem";
 const GuitSemShadowFloating2PositionX2 = "0rem";
 const GuitSemShadowFloating2PositionY2 = "-0.2rem";
 const GuitSemShadowFloating2Blur2 = "0.4rem";
-const GuitSemShadowFloating2Spread2 = "0.2rem";
+const GuitSemShadowFloating2Spread2 = "-0.4rem";
 const GuitSemShadowFloating3Blur1 = "0.8rem";
 const GuitSemShadowFloating3Spread1 = "0.4rem";
 const GuitSemShadowFloating3PositionX2 = "0rem";
 const GuitSemShadowFloating3PositionY2 = "-0.2rem";
 const GuitSemShadowFloating3Blur2 = "0.6rem";
-const GuitSemShadowFloating3Spread2 = "0.2rem";
+const GuitSemShadowFloating3Spread2 = "-0.4rem";
 const GuitSemShadowRaisedTopPositionX = "0rem";
 const GuitSemShadowRaisedTopPositionY = "-0.2rem";
 const GuitSemShadowRaisedTopBlur = "0.6rem";
@@ -491,10 +492,10 @@ const GuitSemColorForegroundBrand = "light-dark(#1473E6, #95C0F4)";
 const GuitSemColorForegroundBrandHover = "light-dark(#105EBC, #C3DBF9)";
 const GuitSemColorForegroundBrandPressed = "light-dark(#0A3B75, #E8F1FD)";
 const GuitSemColorBackgroundNeutral2 = "light-dark(#F5F5F5, #262627)";
-const GuitSemColorBackgroundNeutral2Hover = "light-dark(#E8E8E8, #323234)";
 const GuitSemColorForegroundError = "light-dark(#98332F, #F8CBC9)";
-const GuitSemColorBackgroundNeutral2Pressed = "light-dark(#D3D3D4, #1c1c1c)";
+const GuitSemColorBackgroundNeutral2Hover = "light-dark(#E8E8E8, #323234)";
 const GuitSemColorForegroundSuccess = "light-dark(#18714C, #B6ECD5)";
+const GuitSemColorBackgroundNeutral2Pressed = "light-dark(#D3D3D4, #1c1c1c)";
 const GuitSemColorBackgroundNeutral3 = "light-dark(#E8E8E8, #323234)";
 const GuitSemColorForegroundWarning = "light-dark(#7E6030, #F0D09D)";
 const GuitSemColorForegroundRecommendation = "light-dark(#553EB7, #D7CFF7)";
@@ -514,12 +515,13 @@ const GuitSemColorForegroundInverse = "light-dark(#FFFFFF, #262627)";
 const GuitSemColorForegroundInverseHover = "light-dark(#F5F5F5, #323234)";
 const GuitSemColorForegroundInversePressed = "light-dark(#E8E8E8, #1c1c1c)";
 const GuitSemColorForegroundInverseDisabled = "light-dark(#B7B7B9, #646468)";
-const GuitSemColorForegroundDisabled = "light-dark(#929295, #646468)";
 const GuitSemColorBackgroundError1Pressed = "light-dark(#F2A09C, #61211E)";
+const GuitSemColorForegroundDisabled = "light-dark(#929295, #646468)";
 const GuitSemColorForegroundAccentBlue = "light-dark(#105EBC, #C3DBF9)";
 const GuitSemColorForegroundAccentRed = "light-dark(#98332F, #F8CBC9)";
 const GuitSemColorForegroundAccentGreen = "light-dark(#18714C, #B6ECD5)";
-const GuitSemColorForegroundAccentOrange = "light-dark(#684F27, #F7E4C7)";
+const GuitSemColorForegroundAccentOrange1 = "light-dark(#E6AF57, #BA8B40)";
+const GuitSemColorForegroundAccentOrange2 = "light-dark(#684F27, #F7E4C7)";
 const GuitSemColorForegroundAccentPurple = "light-dark(#553EB7, #D7CFF7)";
 const GuitSemColorForegroundAccentLagoon = "light-dark(#23636C, #C8DCDF)";
 const GuitSemColorForegroundAccentMagenta = "light-dark(#A60063, #EDCADF)";
@@ -779,6 +781,7 @@ var jsTokens = /*#__PURE__*/Object.freeze({
     GuitRefShadowPositioningSmall: GuitRefShadowPositioningSmall,
     GuitRefShadowPositioningXsmall: GuitRefShadowPositioningXsmall,
     GuitRefShadowSpread2xsmall: GuitRefShadowSpread2xsmall,
+    GuitRefShadowSpreadNegativeXsmall: GuitRefShadowSpreadNegativeXsmall,
     GuitRefShadowSpreadNone: GuitRefShadowSpreadNone,
     GuitRefShadowSpreadXsmall: GuitRefShadowSpreadXsmall,
     GuitRefSizing2xlarge: GuitRefSizing2xlarge,
@@ -937,7 +940,8 @@ var jsTokens = /*#__PURE__*/Object.freeze({
     GuitSemColorForegroundAccentGreen: GuitSemColorForegroundAccentGreen,
     GuitSemColorForegroundAccentLagoon: GuitSemColorForegroundAccentLagoon,
     GuitSemColorForegroundAccentMagenta: GuitSemColorForegroundAccentMagenta,
-    GuitSemColorForegroundAccentOrange: GuitSemColorForegroundAccentOrange,
+    GuitSemColorForegroundAccentOrange1: GuitSemColorForegroundAccentOrange1,
+    GuitSemColorForegroundAccentOrange2: GuitSemColorForegroundAccentOrange2,
     GuitSemColorForegroundAccentPurple: GuitSemColorForegroundAccentPurple,
     GuitSemColorForegroundAccentRed: GuitSemColorForegroundAccentRed,
     GuitSemColorForegroundAccentSlate: GuitSemColorForegroundAccentSlate,
@@ -1216,7 +1220,7 @@ var jsTokens = /*#__PURE__*/Object.freeze({
 });
 
 const bootstrap = () => {
-    import('../tokens-8ab1179c.js');
+    import('./tokens-0abb4e1b.js');
     return jsTokens;
 };
 
@@ -1243,7 +1247,7 @@ var typings = "index.d.ts";
 var scripts = {
 	start: "npm run test && storybook dev -p 6006",
 	dev: "concurrently --kill-others -g \"npm:test:watch\" \"npm:start\"",
-	test: "jest --silent --config ./configs/jest.config.js --rootDir ./ --coverage --json --outputFile=./coverage/.jest-test-results.json",
+	test: "jest --config ./configs/jest.config.js --rootDir ./ --coverage --json --outputFile=./coverage/.jest-test-results.json",
 	"test:watch": "npm run test -- --watchAll --json",
 	"test-report": "babel-node --config-file ./configs/.babelrc ./scripts/testReport.js",
 	build: "babel-node --config-file ./configs/.babelrc ./scripts/build.js",
@@ -1283,8 +1287,6 @@ var devDependencies = {
 	"@commitlint/cli": "^17.1.2",
 	"@commitlint/config-conventional": "^17.1.0",
 	"@faker-js/faker": "^7.6.0",
-	"@rollup/plugin-alias": "^4.0.2",
-	"@rollup/plugin-babel": "^6.0.0",
 	"@rollup/plugin-commonjs": "^23.0.0",
 	"@rollup/plugin-image": "^3.0.1",
 	"@rollup/plugin-json": "^6.0.0",
@@ -1306,8 +1308,13 @@ var devDependencies = {
 	"@storybook/react-docgen-typescript-plugin": "^1.0.6--canary.9.0c3f3b7.0",
 	"@storybook/react-webpack5": "^7.6.15",
 	"@storybook/theming": "^7.6.15",
+	"@types/enzyme": "^3.10.18",
 	"@types/enzyme-adapter-react-16": "^1.0.9",
 	"@types/jest": "^29.5.11",
+	"@types/react-dom": "^18.3.1",
+	"@types/react-is": "^18.3.0",
+	"@typescript-eslint/eslint-plugin": "^8.11.0",
+	"@typescript-eslint/parser": "^8.11.0",
 	autoprefixer: "^10.4.13",
 	"babel-jest": "^29.7.0",
 	"babel-loader": "^8.2.5",
@@ -1319,16 +1326,19 @@ var devDependencies = {
 	"cross-env": "^7.0.3",
 	"css-loader": "^6.7.3",
 	"cz-conventional-changelog": "^3.3.0",
+	dayjs: "^1.11.13",
 	enzyme: "^3.11.0",
 	"enzyme-adapter-react-16": "^1.15.7",
 	"enzyme-to-json": "^3.6.2",
-	eslint: "^8.25.0",
+	eslint: "^8.57.1",
 	"eslint-config-airbnb": "^19.0.4",
-	"eslint-config-prettier": "^8.5.0",
-	"eslint-plugin-import": "^2.26.0",
-	"eslint-plugin-jsx-a11y": "^6.6.1",
-	"eslint-plugin-react": "^7.31.11",
-	"eslint-plugin-react-hooks": "^4.6.0",
+	"eslint-config-prettier": "^9.1.0",
+	"eslint-import-resolver-typescript": "^3.6.3",
+	"eslint-plugin-import": "^2.31.0",
+	"eslint-plugin-jsx-a11y": "^6.10.1",
+	"eslint-plugin-prettier": "^5.2.1",
+	"eslint-plugin-react": "^7.37.1",
+	"eslint-plugin-react-hooks": "^4.6.2",
 	figlet: "^1.5.2",
 	"file-loader": "^6.2.0",
 	"git-cz": "^4.9.0",
@@ -1347,12 +1357,11 @@ var devDependencies = {
 	postcss: "^8.4.31",
 	"postcss-prefix-selector": "^1.16.0",
 	"postcss-url": "^10.1.3",
-	prettier: "^2.7.1",
+	prettier: "^3.3.3",
 	react: "^16.8.1",
 	"react-dom": "^16.8.1",
 	"react-test-renderer": "^16.12.0",
 	rollup: "^3.1.0",
-	"rollup-plugin-peer-deps-external": "^2.2.0",
 	"rollup-plugin-postcss": "^4.0.0",
 	"rollup-plugin-scss": "^4.0.0",
 	"rollup-plugin-svg": "^1.0.1",
@@ -1377,42 +1386,18 @@ var devDependencies = {
 	yargs: "^17.7.2"
 };
 var dependencies = {
-	"@geneui/icons": "^1.0.4",
-	"@geneui/tokens": "^1.6.0-beta",
+	"@floating-ui/core": "^1.6.8",
 	"@floating-ui/react": "^0.26.16",
+	"@floating-ui/react-dom": "^2.1.2",
+	"@floating-ui/utils": "^0.2.8",
+	"@geneui/icons": "^1.0.4",
+	"@geneui/tokens": "^1.8.0-beta",
 	classnames: "^2.3.2",
-	dayjs: "^1.11.5",
-	"draft-js": "^0.11.7",
-	"draftjs-to-html": "^0.9.1",
-	"file-saver": "^2.0.5",
-	highcharts: "^10.2.1",
-	"highcharts-react-official": "^3.1.0",
-	"html-to-draftjs": "^1.5.0",
-	i: "^0.3.7",
-	immer: "^9.0.18",
-	"jodit-react": "^1.3.23",
-	"pure-react-carousel": "^1.30.1",
-	"qrcode.react": "^3.1.0",
-	"rc-slider": "^8.6.9",
-	"react-beautiful-dnd": "^13.1.1",
-	"react-colorful": "^5.6.1",
-	"react-custom-scrollbars": "^4.2.1",
-	"react-dnd": "^16.0.1",
-	"react-dnd-html5-backend": "^16.0.1",
-	"react-draft-wysiwyg": "^1.15.0",
-	"react-fast-compare": "^3.2.0",
-	"react-is": "^17.0.2",
-	"react-loading-skeleton": "^1.1.1",
-	"react-swipeable": "^7.0.0",
-	"react-tiny-popover": "^3.4.5",
-	"react-tiny-popover-latest": "npm:react-tiny-popover@^6.0.4",
-	"react-virtualized": "^9.21.1",
-	"resize-observer-polyfill": "^1.5.1",
-	xlsx: "^0.18.5"
+	"react-is": "^17.0.2"
 };
 var husky = {
 	hooks: {
-		"pre-commit": "lint-staged --config ./configs/.lintstagedrc.json",
+		"pre-commit": "lint-staged --concurrent false --config ./configs/.lintstagedrc.json",
 		"commit-msg": "commitlint --config ./configs/commitlint.config.js -E HUSKY_GIT_PARAMS"
 	}
 };
@@ -1449,30 +1434,32 @@ var pgk = {
 	license: license
 };
 
-var css_248z$1 = "@import \"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap\";:root{--font-family:\"Open Sans\",\"Arial\",\"Helvetica Neue\",sans-serif;--hero:#1473e6;--confirm:#2bc784;--warning:#e6af57;--danger:#e64e48;--note:#fdc625;--message:#8bd779;--background:#fff;--foreground:#3d3d5f;--hero-hover:#1267cf;--hero-sc:#fff;--hero-rgb:20,115,230;--hero-sc-rgb:255,255,255;--confirm-hover:#26b276;--confirm-sc:#fff;--confirm-rgb:43,199,132;--confirm-sc-rgb:255,255,255;--warning-hover:#e3a441;--warning-sc:#fff;--warning-rgb:230,175,87;--warning-sc-rgb:255,255,255;--danger-hover:#e33832;--danger-sc:#fff;--danger-rgb:230,78,72;--danger-sc-rgb:255,255,255;--note-hover:#fdbf0c;--note-sc:#000;--note-rgb:253,198,37;--note-sc-rgb:0,0,0;--message-hover:#7ad165;--message-sc:#000;--message-rgb:139,215,121;--message-sc-rgb:0,0,0;--background-hover:#f2f2f2;--background-sc:#000;--background-rgb:255,255,255;--background-sc-rgb:0,0,0;--foreground-hover:#33334f;--foreground-sc:#fff;--foreground-rgb:61,61,95;--foreground-sc-rgb:255,255,255}.invert-colors{--background:var(--foreground);--background-hover:var(--foreground-hover);--background-sc:var(--foreground-sc);--background-rgb:var(--foreground-rgb);--background-sc-rgb:var(--foreground-sc-rgb)}*{-webkit-font-smoothing:subpixel-antialiased;-webkit-tap-highlight-color:transparent;background:none;border:0;border-radius:0;margin:0;outline:0;padding:0;vertical-align:top}*,:after,:before{box-sizing:border-box}@media screen and (min-width:1024px){:not(main)::-webkit-scrollbar{height:var(--scrollbar-size,16px);width:var(--scrollbar-size,16px)}:not(main)::-webkit-scrollbar-button,:not(main)::-webkit-scrollbar-corner{display:none}:not(main)::-webkit-scrollbar-thumb{background:rgba(var(--background-sc-rgb),.05) content-box;border:var(--scrollbar-space,4px) solid #0000;border-radius:var(--scrollbar-size,16px)}:not(main)::-webkit-scrollbar-thumb:active,:not(main)::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--background-sc-rgb),.1)}:not(main)::-webkit-scrollbar-track{background:#0000}}a{color:inherit;text-decoration:none;transition:color .3s,background .3s}table{border-collapse:collapse;border-spacing:0;width:100%}img,svg{display:block;max-width:100%}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;color:inherit;display:block;font:inherit}button::input-placeholder,input::input-placeholder,optgroup::input-placeholder,select::input-placeholder,textarea::input-placeholder{font-family:inherit;opacity:1}button:placeholder,input:placeholder,optgroup:placeholder,select:placeholder,textarea:placeholder{font-family:inherit;opacity:1}button::placeholder,input::placeholder,optgroup::placeholder,select::placeholder,textarea::placeholder{font-family:inherit;opacity:1}button:input-placeholder,input:input-placeholder,optgroup:input-placeholder,select:input-placeholder,textarea:input-placeholder{font-family:inherit;opacity:1}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background:var(--page-background,#f0f2f5);color:rgba(var(--background-sc-rgb),.75);font:10px/1.15 var(--font-family);height:100%;max-width:100vw}html.view-small{font-size:8.12px}html.view-normal{font-size:9.12px}html #root,html body{width:100%}body{font-size:1.4rem}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:normal}h1{font-size:3.2rem}h1.large{font-size:3.8rem}h2{font-size:2.8rem}h3{font-size:1.8rem}h4{font-size:1.6rem}h5{font-size:1.4rem}h6{font-size:1.2rem}li{display:block}.capitalize-text{text-transform:capitalize}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}input::-ms-clear{display:none}.pointer-events-none{pointer-events:none}.cursor-pointer,[data-react-beautiful-dnd-drag-handle=\"0\"]{cursor:pointer}.color-danger{color:var(--danger)!important}.color-confirm{color:var(--confirm)!important}.color-hero{color:var(--hero)!important}::selection{background:rgba(var(--hero-rgb),.15);color:var(--hero)}.vertical-resizing-cursor *{cursor:col-resize!important}.vertical-resizing-cursor :not(:active){pointer-events:none}.cursor-grab{cursor:grab}.cursor-grab:active{cursor:grabbing}.m-rl-2{margin:0 .2rem}.m-tb-2{margin:.2rem 0}.m-t-2{margin-top:.2rem}.m-r-2{margin-inline-end:.2rem}.m-l-2{margin-inline-start:.2rem}.m-b-2{margin-bottom:.2rem}.m-rl-4{margin:0 .4rem}.m-tb-4{margin:.4rem 0}.m-t-4{margin-top:.4rem}.m-r-4{margin-inline-end:.4rem}.m-l-4{margin-inline-start:.4rem}.m-b-4{margin-bottom:.4rem}.m-rl-6{margin:0 .6rem}.m-tb-6{margin:.6rem 0}.m-t-6{margin-top:.6rem}.m-r-6{margin-inline-end:.6rem}.m-l-6{margin-inline-start:.6rem}.m-b-6{margin-bottom:.6rem}.m-rl-8{margin:0 .8rem}.m-tb-8{margin:.8rem 0}.m-t-8{margin-top:.8rem}.m-r-8{margin-inline-end:.8rem}.m-l-8{margin-inline-start:.8rem}.m-b-8{margin-bottom:.8rem}.m-rl-10{margin:0 1rem}.m-tb-10{margin:1rem 0}.m-t-10{margin-top:1rem}.m-r-10{margin-inline-end:1rem}.m-l-10{margin-inline-start:1rem}.m-b-10{margin-bottom:1rem}.m-rl-12{margin:0 1.2rem}.m-tb-12{margin:1.2rem 0}.m-t-12{margin-top:1.2rem}.m-r-12{margin-inline-end:1.2rem}.m-l-12{margin-inline-start:1.2rem}.m-b-12{margin-bottom:1.2rem}.m-rl-14{margin:0 1.4rem}.m-tb-14{margin:1.4rem 0}.m-t-14{margin-top:1.4rem}.m-r-14{margin-inline-end:1.4rem}.m-l-14{margin-inline-start:1.4rem}.m-b-14{margin-bottom:1.4rem}.m-rl-16{margin:0 1.6rem}.m-tb-16{margin:1.6rem 0}.m-t-16{margin-top:1.6rem}.m-r-16{margin-inline-end:1.6rem}.m-l-16{margin-inline-start:1.6rem}.m-b-16{margin-bottom:1.6rem}.m-rl-18{margin:0 1.8rem}.m-tb-18{margin:1.8rem 0}.m-t-18{margin-top:1.8rem}.m-r-18{margin-inline-end:1.8rem}.m-l-18{margin-inline-start:1.8rem}.m-b-18{margin-bottom:1.8rem}.m-rl-20{margin:0 2rem}.m-tb-20{margin:2rem 0}.m-t-20{margin-top:2rem}.m-r-20{margin-inline-end:2rem}.m-l-20{margin-inline-start:2rem}.m-b-20{margin-bottom:2rem}.m-rl-22{margin:0 2.2rem}.m-tb-22{margin:2.2rem 0}.m-t-22{margin-top:2.2rem}.m-r-22{margin-inline-end:2.2rem}.m-l-22{margin-inline-start:2.2rem}.m-b-22{margin-bottom:2.2rem}.m-rl-24{margin:0 2.4rem}.m-tb-24{margin:2.4rem 0}.m-t-24{margin-top:2.4rem}.m-r-24{margin-inline-end:2.4rem}.m-l-24{margin-inline-start:2.4rem}.m-b-24{margin-bottom:2.4rem}.m-rl-26{margin:0 2.6rem}.m-tb-26{margin:2.6rem 0}.m-t-26{margin-top:2.6rem}.m-r-26{margin-inline-end:2.6rem}.m-l-26{margin-inline-start:2.6rem}.m-b-26{margin-bottom:2.6rem}.m-rl-28{margin:0 2.8rem}.m-tb-28{margin:2.8rem 0}.m-t-28{margin-top:2.8rem}.m-r-28{margin-inline-end:2.8rem}.m-l-28{margin-inline-start:2.8rem}.m-b-28{margin-bottom:2.8rem}.m-rl-30{margin:0 3rem}.m-tb-30{margin:3rem 0}.m-t-30{margin-top:3rem}.m-r-30{margin-inline-end:3rem}.m-l-30{margin-inline-start:3rem}.m-b-30{margin-bottom:3rem}.m-rl-32{margin:0 3.2rem}.m-tb-32{margin:3.2rem 0}.m-t-32{margin-top:3.2rem}.m-r-32{margin-inline-end:3.2rem}.m-l-32{margin-inline-start:3.2rem}.m-b-32{margin-bottom:3.2rem}.m-rl-34{margin:0 3.4rem}.m-tb-34{margin:3.4rem 0}.m-t-34{margin-top:3.4rem}.m-r-34{margin-inline-end:3.4rem}.m-l-34{margin-inline-start:3.4rem}.m-b-34{margin-bottom:3.4rem}.m-rl-36{margin:0 3.6rem}.m-tb-36{margin:3.6rem 0}.m-t-36{margin-top:3.6rem}.m-r-36{margin-inline-end:3.6rem}.m-l-36{margin-inline-start:3.6rem}.m-b-36{margin-bottom:3.6rem}.m-rl-38{margin:0 3.8rem}.m-tb-38{margin:3.8rem 0}.m-t-38{margin-top:3.8rem}.m-r-38{margin-inline-end:3.8rem}.m-l-38{margin-inline-start:3.8rem}.m-b-38{margin-bottom:3.8rem}.m-rl-40{margin:0 4rem}.m-tb-40{margin:4rem 0}.m-t-40{margin-top:4rem}.m-r-40{margin-inline-end:4rem}.m-l-40{margin-inline-start:4rem}.m-b-40{margin-bottom:4rem}.m-rl-42{margin:0 4.2rem}.m-tb-42{margin:4.2rem 0}.m-t-42{margin-top:4.2rem}.m-r-42{margin-inline-end:4.2rem}.m-l-42{margin-inline-start:4.2rem}.m-b-42{margin-bottom:4.2rem}.m-rl-44{margin:0 4.4rem}.m-tb-44{margin:4.4rem 0}.m-t-44{margin-top:4.4rem}.m-r-44{margin-inline-end:4.4rem}.m-l-44{margin-inline-start:4.4rem}.m-b-44{margin-bottom:4.4rem}.m-rl-46{margin:0 4.6rem}.m-tb-46{margin:4.6rem 0}.m-t-46{margin-top:4.6rem}.m-r-46{margin-inline-end:4.6rem}.m-l-46{margin-inline-start:4.6rem}.m-b-46{margin-bottom:4.6rem}";
+var css_248z$1 = "a,abbr,acronym,address,applet,b,big,blockquote,body,caption,center,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,ins,kbd,label,legend,li,main,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,u,ul,var{border:0;box-sizing:border-box;margin:0;padding:0;vertical-align:initial}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:\"\";content:none;font-family:Arial,Helvetica,sans-serif}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}input::-ms-clear{display:none}::-moz-focus-inner{border:0;padding:0}a{text-decoration:none}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0}button,select{background:none;padding:0;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[role=button],button{background-color:initial;border:none;color:inherit;cursor:pointer;font:inherit;margin:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:initial}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;height:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-decoration{-webkit-appearance:none}[type=number]{-moz-appearance:textfield}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}select::-ms-expand{display:none}:after,:before{box-sizing:border-box}";
 styleInject(css_248z$1);
 
-var css_248z = ".ellipsis-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:focus-visible{outline:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-focus);outline-offset:var(--guit-ref-border-width-thin)}";
+var css_248z = "@import \"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap\";html{font-size:10px}.ellipsis-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:focus-visible{outline:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-focus);outline-offset:var(--guit-ref-border-width-thin)}";
 styleInject(css_248z);
 
 const GeneUIDesignSystemContext = createContext({
-    theme: 'light',
+    theme: "light",
     tokens: {},
     geneUIProviderRef: { current: null }
 });
-const GeneUIProvider = ({ children, tokens = null, theme = 'light' }) => {
+function GeneUIProvider({ children, tokens = null, theme = "light" }) {
     const geneUIProviderRef = useRef(null);
     const [isRefExist, setIsRefExist] = useState(false);
-    const contextValue = {
+    const contextValue = useMemo(() => ({
         theme,
-        tokens: tokens ? tokens : bootstrap(),
+        tokens: tokens || bootstrap(),
         geneUIProviderRef
-    };
+    }), [theme, tokens, geneUIProviderRef]);
     useEffect(() => {
-        geneUIProviderRef.current && !isRefExist && setIsRefExist(true);
+        if (geneUIProviderRef.current && !isRefExist) {
+            setIsRefExist(true);
+        }
     }, [geneUIProviderRef.current]);
     return (React__default.createElement(GeneUIDesignSystemContext.Provider, { value: contextValue },
-        React__default.createElement("div", { "data-gene-ui-version": pgk.version, ref: geneUIProviderRef, style: { height: '100%' } }, isRefExist && children)));
-};
+        React__default.createElement("div", { "data-gene-ui-version": pgk.version, ref: geneUIProviderRef, style: { height: "100%" } }, isRefExist && children)));
+}
 
 export { GeneUIDesignSystemContext, GeneUIProvider as default };

package/HelperText.js

@@ -0,0 +1,69 @@
+import React__default from 'react';
+import { _ as _objectWithoutProperties, a as _extends } from './ArrowLeft-b88e2ba8.js';
+import { c as classNames } from './index-ce02421b.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+
+var _excluded$1 = ["size", "color"];
+var SvgErrorAlertFill = function SvgErrorAlertFill(_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$1);
+  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 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-.75 5.758a.75.75 0 1 1 1.5 0v5.243a.75.75 0 1 1-1.5 0v-5.243Zm.75 9.235a.915.915 0 1 1 0-1.83.915.915 0 0 1 0 1.83Z",
+    fill: color
+  }));
+};
+
+var _excluded = ["size", "color"];
+var SvgWarningFill = function SvgWarningFill(_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", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "m2.13 19.503 9.075-15.997a1 1 0 0 1 1.375-.368 1 1 0 0 1 .365.375l8.928 15.996a1.004 1.004 0 0 1-.375 1.358.997.997 0 0 1-.497.133h-18.002a.997.997 0 0 1-.999-.997c0-.175.044-.348.13-.5Zm9.33-5.035a.748.748 0 0 0 1.278-.531v-5.254a.753.753 0 0 0-.749-.751.748.748 0 0 0-.749.751v5.254c0 .199.08.39.22.531Zm1.442 2.552a.915.915 0 0 1-.913.917.915.915 0 0 1-.914-.917.915.915 0 1 1 1.827 0Z",
+    fill: color
+  }));
+};
+
+var css_248z = ".helperText{display:inline-flex;gap:var(--guit-ref-spacing-3xsmall);max-width:100%}.helperText_size_medium .helperText__text{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)}.helperText_size_small .helperText__text{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)}.helperText_type_rest{color:var(--guit-sem-color-foreground-neutral-2)}.helperText_type_danger{color:var(--guit-sem-color-foreground-error)}.helperText_type_warning{color:var(--guit-sem-color-foreground-neutral-2)}.helperText_type_warning .helperText__icon{color:var(--guit-sem-color-foreground-warning)}.helperText_disabled,.helperText_disabled .helperText__icon{color:var(--guit-sem-color-foreground-disabled)}.helperText__icon{flex:0 0 auto}";
+styleInject(css_248z);
+
+/**
+ * The Helper Text provides users with additional information or guidance related to a specific input field in a form. This text helps users understand the expected format, requirements, or purpose of the input, thereby improving form completion accuracy and user confidence.
+ */
+const HelperText = ({ size = "medium", type = "rest", text, Icon, isDisabled, isLoading, className }) => {
+    const iconSize = {
+        small: 16,
+        medium: 20
+    };
+    const iconMap = {
+        danger: React__default.createElement(SvgErrorAlertFill, { size: iconSize[size] }),
+        warning: React__default.createElement(SvgWarningFill, { size: iconSize[size] }),
+        rest: Icon && React__default.createElement(Icon, { size: iconSize[size] })
+    };
+    return (React__default.createElement("div", { className: classNames(`helperText helperText_type_${type} helperText_size_${size}`, className, {
+            helperText_disabled: isDisabled
+        }) }, isLoading ? ("skeleton") : (React__default.createElement(React__default.Fragment, null,
+        iconMap[type] && React__default.createElement("div", { className: "helperText__icon" }, iconMap[type]),
+        React__default.createElement("p", { className: "helperText__text" }, text)))));
+};
+
+export { HelperText as default };

package/Info.js

@@ -0,0 +1,64 @@
+import React__default, { useState, useMemo } from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import { _ as _objectWithoutProperties, a as _extends } from './ArrowLeft-b88e2ba8.js';
+import Tooltip from './Tooltip.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import 'react-dom';
+import './GeneUIProvider.js';
+
+var _excluded = ["size", "color"];
+var SvgInfoOutline = function SvgInfoOutline(_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 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18.5a8.5 8.5 0 1 1 8.5-8.5 8.51 8.51 0 0 1-8.5 8.5Z",
+    fill: color
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M11.97 10.237a.75.75 0 0 0-.75.75v5.243a.75.75 0 0 0 1.5 0v-5.243a.75.75 0 0 0-.75-.75Z",
+    fill: color
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M11.969 6.995a.914.914 0 1 0 0 1.829.914.914 0 0 0 0-1.829Z",
+    fill: color
+  }));
+};
+
+var css_248z = ".info{border-radius:var(--guit-ref-radius-3xsmall);line-height:0}.info_appearance_default{color:var(--guit-sem-color-foreground-neutral-2)}.info_appearance_brand{color:var(--guit-sem-color-foreground-brand)}.info_appearance_inverse{color:var(--guit-sem-color-foreground-inverse)}.info_disabled{color:var(--guit-sem-color-foreground-disabled);pointer-events:none}";
+styleInject(css_248z);
+
+const iconSizes = {
+    small: 24,
+    smallNudge: 20,
+    XSmall: 16
+};
+/**
+ * Info icon component used to provide additional contextual information to users. It appears as a small icon, and is placed near elements where further explanation or clarification is useful.
+ */
+const Info = ({ infoText, disabled, size = "smallNudge", appearance = "default", className }) => {
+    const [alwaysShow, setAlwaysShow] = useState(false);
+    const keyDownHandler = (event) => {
+        if (disabled)
+            return;
+        if (event.key === "Enter") {
+            setAlwaysShow((prev) => !prev);
+        }
+    };
+    const handleBlur = () => !disabled && alwaysShow && setAlwaysShow(false);
+    const buttonClassNames = useMemo(() => classNames("info", className, {
+        [`info_appearance_${appearance}`]: appearance,
+        info_disabled: disabled
+    }), [appearance, className, disabled]);
+    return (React__default.createElement(Tooltip, { text: infoText, alwaysShow: alwaysShow, appearance: appearance === "inverse" ? "inverse" : "default" },
+        React__default.createElement("button", { type: "button", disabled: disabled, "aria-pressed": alwaysShow, className: buttonClassNames, onKeyDown: keyDownHandler, onBlur: handleBlur },
+            React__default.createElement(SvgInfoOutline, { className: "info__icon", size: iconSizes[size] }))));
+};
+
+export { Info as default };

package/Label.js

@@ -0,0 +1,38 @@
+import React__default, { useRef } from 'react';
+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 Info from './Info.js';
+import 'react-dom';
+import './GeneUIProvider.js';
+import './ArrowLeft-b88e2ba8.js';
+
+var css_248z = ".label{display:inline-flex;max-width:100%}.label,.label__container{align-items:center;min-width:0}.label__container{display:flex;gap:var(--guit-ref-spacing-3xsmall);width:100%}.label__container-inner{align-items:center;display:flex;gap:var(--guit-ref-spacing-4xsmall);max-width:100%}.label__asterisk,.label__text{color:var(--guit-sem-color-foreground-neutral-2)}.label__asterisk_size_medium,.label__text_size_medium{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)}.label__asterisk_size_small,.label__text_size_small{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)}.label__asterisk_disabled,.label__text_disabled{color:var(--guit-sem-color-foreground-disabled);pointer-events:none}";
+styleInject(css_248z);
+
+const iconSizes = {
+    small: "XSmall",
+    medium: "smallNudge"
+};
+/**
+ * Labels identify a component or group of components. Use them with elements such as checkboxes and input fields to guide users in providing specific information, or with plain text to organize information.
+ */
+const Label = ({ size = "medium", labelText, disabled, required, infoText, isLoading, className, children }) => {
+    const labelRef = useRef(null);
+    const isTruncated = useEllipsisDetection(labelRef);
+    return (React__default.createElement("label", { className: classNames(`label`, className) },
+        children,
+        isLoading ? (React__default.createElement("span", null, "skeleton")) : (React__default.createElement("span", { className: "label__container" },
+            React__default.createElement("div", { className: "label__container-inner" },
+                React__default.createElement(Tooltip, { text: labelText, isVisible: isTruncated },
+                    React__default.createElement("span", { ref: labelRef, className: classNames(`ellipsis-text label__text label__text_size_${size}`, {
+                            label__text_disabled: disabled
+                        }) }, labelText)),
+                required && (React__default.createElement("span", { className: classNames(`label__asterisk label__text_size_${size} `, {
+                        label__text_disabled: disabled
+                    }) }, "*"))),
+            infoText && React__default.createElement(Info, { infoText: infoText, disabled: disabled, size: iconSizes[size] })))));
+};
+
+export { Label as default };

package/Loader.js

@@ -0,0 +1,21 @@
+import React__default from 'react';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+
+var css_248z = ".loader{align-items:center;display:inline-flex;justify-content:center}.loader_direction_below{flex-direction:column;text-align:center}.loader_size_2xLarge,.loader_size_xLarge{font-family:var(--guit-sem-font-label-large-default-medium-font-family);font-size:var(--guit-sem-font-label-large-default-semibold-font-size);font-weight:var(--guit-sem-font-label-large-default-medium-font-weight);line-height:var(--guit-sem-font-label-large-default-semibold-line-height)}.loader_size_large,.loader_size_medium,.loader_size_small,.loader_size_smallNudge{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)}.loader_size_small,.loader_size_smallNudge{gap:var(--guit-ref-spacing-xsmall)}.loader_size_2xLarge{gap:var(--guit-ref-spacing-2xlarge)}.loader_size_2xLarge .loader__spinnerWrapper{height:var(--guit-sem-dimension-height-2xlarge);width:var(--guit-sem-dimension-width-2xlarge)}.loader_size_xLarge{gap:var(--guit-ref-spacing-xlarge)}.loader_size_xLarge .loader__spinnerWrapper{height:var(--guit-sem-dimension-height-xlarge);width:var(--guit-sem-dimension-width-xlarge)}.loader_size_large{gap:var(--guit-ref-spacing-large)}.loader_size_large .loader__spinnerWrapper{height:var(--guit-sem-dimension-height-large);width:var(--guit-sem-dimension-width-large)}.loader_size_medium{gap:var(--guit-ref-spacing-medium)}.loader_size_medium .loader__spinnerWrapper{height:var(--guit-sem-dimension-height-medium);width:var(--guit-sem-dimension-width-medium)}.loader_size_small .loader__spinnerWrapper{height:var(--guit-sem-dimension-height-small);width:var(--guit-sem-dimension-width-small)}.loader_size_smallNudge .loader__spinnerWrapper{height:var(--guit-sem-dimension-height-small-nudge);width:var(--guit-sem-dimension-width-small-nudge)}.loader_color_brand .loader__text,.loader_color_neutral .loader__text{color:var(--guit-sem-color-foreground-neutral-1)}.loader_color_brand .loader__spinnerPath{stroke:var(--guit-sem-color-foreground-brand)}.loader_color_neutral .loader__spinnerPath{stroke:var(--guit-sem-color-foreground-neutral-2)}.loader_color_inverse .loader__spinnerPath{stroke:var(--guit-sem-color-foreground-inverse)}.loader_color_inverse .loader__text{color:var(--guit-sem-color-foreground-inverse)}.loader__spinnerWrapper{flex:0 0 auto;padding:var(--guit-ref-spacing-4xsmall)}.loader__spinner{animation:loader-rotate 2s linear infinite;height:100%;width:100%}.loader__spinnerPath{stroke-linecap:round;animation:loader-dash 1.5s ease-in-out infinite;transform:translateZ(0)}.loader__text{font-size:inherit;font-weight:inherit;line-height:inherit;text-transform:capitalize}@keyframes loader-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes loader-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-136}}";
+styleInject(css_248z);
+
+/**
+ *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.
+ */
+const Loader = ({ isLoading = true, text, textPosition = "after", size = "medium", appearance = "brand", children = null }) => {
+    if (isLoading) {
+        return (React__default.createElement("span", { className: `loader loader_direction_${textPosition} loader_size_${size} loader_color_${appearance}` },
+            React__default.createElement("span", { className: "loader__spinnerWrapper" },
+                React__default.createElement("svg", { className: "loader__spinner", viewBox: "0 0 50 50" },
+                    React__default.createElement("circle", { className: "loader__spinnerPath", cx: "25", cy: "25", r: "22", fill: "none", strokeWidth: "5" }))),
+            text && React__default.createElement("span", { className: `loader__text loader__textColor_${appearance}` }, text)));
+    }
+    return children;
+};
+
+export { Loader as default };