@app-studio/web 0.5.0 → 0.7.0

package/dist/web.cjs.development.js

@@ -8,6 +8,7 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var appStudio = require('app-studio');
 var reactRouterDom = require('react-router-dom');
+var Layout = require('src/components/Layout');
 var format = _interopDefault(require('date-fns/format'));
 var formik = require('formik');
 var zustand = require('zustand');
@@ -16,11 +17,15 @@ var useButtonState = function useButtonState() {
   var _React$useState = React__default.useState(false),
     isHovered = _React$useState[0],
     setIsHovered = _React$useState[1];
+  // This custom react hook 'useButtonState' is defined for managing the state of a button, especially for hover interactions.
   return {
     isHovered: isHovered,
     setIsHovered: setIsHovered
   };
+  // The 'setIsHovered' function is used to update the value of 'isHovered' state when the hover status of the button changes.
+  // A state variable 'isHovered' is declared with its initial value set to 'false', indicating that the button is not hovered by default.
 };
+// The hook returns an object containing 'isHovered' state and the 'setIsHovered' function to enable state management from the consumer component.
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -600,7 +605,9 @@ var LinkComponent = function LinkComponent(props) {
 var Link = LinkComponent;
 
 var ButtonSizes = {
+  // Defines a constant 'ButtonSizes' as a mapping from 'Size' to corresponding 'CSSProperties'.
   xs: {
+    // Establishes style configuration for extra-small (xs) button size.
     width: 79,
     paddingTop: 8,
     paddingBottom: 8,
@@ -619,6 +626,7 @@ var ButtonSizes = {
     paddingRight: 16,
     fontWeight: 600,
     fontSize: 'sm',
+    // Establishes style configuration for medium (md) button size.
     lineHeight: 20,
     letterSpacing: 1.25
   },
@@ -628,6 +636,7 @@ var ButtonSizes = {
     paddingBottom: 12,
     paddingLeft: 18,
     paddingRight: 18,
+    // Establishes style configuration for large (lg) button size.
     fontWeight: 600,
     fontSize: 'md',
     lineHeight: 24,
@@ -637,6 +646,7 @@ var ButtonSizes = {
     width: 178,
     paddingTop: 14,
     paddingBottom: 14,
+    // Establishes style configuration for extra-large (xl) button size.
     paddingLeft: 22,
     paddingRight: 22,
     fontWeight: 600,
@@ -647,28 +657,38 @@ var ButtonSizes = {
   xl: {
     width: 220,
     paddingTop: 16,
+    // Defines a constant 'ButtonShapes' with style properties for different button shapes such as 'sharp', 'rounded', and 'pillShaped'.
     paddingBottom: 16,
+    // Sets the border-radius for a sharp-edged button shape to '0'.
     paddingLeft: 26,
+    // Sets the border-radius for a rounded button shape to '4'.
     paddingRight: 26,
+    // Sets the border-radius for a pill-shaped button to '24'.
     fontWeight: 600,
     fontSize: 'xl',
+    // Defines a constant 'IconSizes' as a mapping from 'Size' to corresponding 'CSSProperties' for icons.
     lineHeight: 24,
+    // Sets the width, height, and padding for icons of extra-small size.
     letterSpacing: 1.25
   }
 };
 var ButtonShapes = {
+  // Sets the width, height, and padding for icons of small size.
   sharp: 0,
   rounded: 4,
   pillShaped: 24
 };
+// Sets the width, height, and padding for icons of medium size.
 var IconSizes$1 = {
   xs: {
     width: 24,
     height: 24,
+    // Sets the width, height, and padding for icons of large size.
     padding: 12
   },
   sm: {
     width: 24,
+    // Sets the width, height, and padding for icons of extra-large size.
     height: 24,
     padding: 15
   },
@@ -939,6 +959,7 @@ var ButtonView = function ButtonView(_ref) {
   var reverse = isHovered && effect === 'reverse';
   var ButtonVariants = {
     filled: {
+      // Defines CSS properties for 'link' variant of the button with conditional styles based on reverse state, includes text decoration.
       backgroundColor: reverse ? 'transparent' : buttonColor,
       color: reverse ? buttonColor : 'color.white',
       borderWidth: 1,
@@ -947,15 +968,20 @@ var ButtonView = function ButtonView(_ref) {
     },
     outline: {
       backgroundColor: reverse ? buttonColor : 'transparent',
+      // Defines CSS properties for 'ghost' variant of the button with conditional styles based on reverse state.
       borderWidth: 1,
       borderStyle: 'solid',
       borderColor: reverse ? buttonColor : colorScheme,
+      // Fetches size-specific styles from ButtonSizes based on the 'size' prop.
       color: reverse ? 'white' : buttonColor
     },
+    // Adjusts button width based on isAuto and isFilled properties, using buttonSizeStyles for fallback width.
     link: {
       backgroundColor: 'transparent',
+      // Changes padding for the button based on whether isIconRounded is true or false.
       borderWidth: 1,
       borderStyle: 'solid',
+      // Creates the content for the button including loaders and icons positioned based on their respective properties.
       borderColor: reverse ? buttonColor : 'transparent',
       color: buttonColor,
       textDecoration: reverse ? 'none' : 'underline'
@@ -968,6 +994,7 @@ var ButtonView = function ButtonView(_ref) {
       borderColor: reverse ? buttonColor : 'transparent'
     }
   };
+  // Executes rendering of the button or a link element based on the variant; applies conditional rendering for externalHref in 'link' variant.
   var buttonSizeStyles = ButtonSizes[size];
   var buttonVariant = ButtonVariants[variant];
   var scaleWidth = {
@@ -1004,23 +1031,32 @@ var ButtonView = function ButtonView(_ref) {
   }, content) : content);
 };
 
+// Importing a custom hook to manage the state specific to the button component.
 var ButtonComponent = function ButtonComponent(props) {
+  // Importing the view part of the button, which is presumably a presentational component.
   var _useButtonState = useButtonState(),
     isHovered = _useButtonState.isHovered,
     setIsHovered = _useButtonState.setIsHovered;
+  // Defining the button component with generic React Functional Component type augmented with ButtonProps type.
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
-  return React__default.createElement(ButtonView, Object.assign({
-    isHovered: isHovered,
-    setIsHovered: setIsHovered,
-    onMouseEnter: handleHover,
-    onMouseLeave: handleHover
-  }, props));
+  // Destructuring the state and state update function from the custom hook for button state management.
+  return (
+    // Defines a function to toggle the hover state of the button.
+    React__default.createElement(ButtonView, Object.assign({
+      isHovered: isHovered,
+      // Rendering the ButtonView component and spreading the received props on it.
+      setIsHovered: setIsHovered,
+      // Passing the isHovered state and the setIsHovered function to the ButtonView.
+      onMouseEnter: handleHover,
+      // Binding handleHover function to onMouseEnter and onMouseLeave events to toggle hover effect.
+      onMouseLeave: handleHover
+    }, props))
+  );
+  // Exports the Button component for use in other parts of the application.
 };
-/**
- * Buttons allow us to trigger an event or an action with a single click.
- */
+
 var Button = ButtonComponent;
 
 var useCheckboxState = function useCheckboxState(_ref) {
@@ -1040,34 +1076,43 @@ var useCheckboxState = function useCheckboxState(_ref) {
   };
 };
 
+// Import Headings type definition from Label.type module for type safety and consistency.
 var HeadingSizes = {
+  // Initialize a constant 'HeadingSizes' to define styles for different heading levels.
   h1: {
+    // Use TypeScript's 'Record' utility type to ensure the object matches the shape of 'Headings'.
     fontSize: 96,
+    // Define style properties for 'h1' heading tag, including font size, line height, and letter spacing.
     lineHeight: 112,
     letterSpacing: -1.5
   },
   h2: {
     fontSize: 60,
+    // Define style properties for 'h2' heading tag similar to 'h1', but with adjusted values for size and spacing.
     lineHeight: 71,
     letterSpacing: -0.5
   },
   h3: {
     fontSize: 48,
+    // Define style properties for 'h3' heading tag with a standard letter spacing of 0.
     lineHeight: 57,
     letterSpacing: 0
   },
   h4: {
     fontSize: 34,
+    // Provide style properties for 'h4' heading tag, with a slight increase in letter spacing.
     lineHeight: 40,
     letterSpacing: 0.25
   },
   h5: {
     fontSize: 24,
+    // Set the 'h5' heading tag styles, opting for no additional letter spacing.
     lineHeight: 28,
     letterSpacing: 0
   },
   h6: {
     fontSize: 20,
+    // Set the 'h6' heading tag styles, with the smallest font size and a subtle letter spacing.
     lineHeight: 24,
     letterSpacing: 0.15
   }
@@ -1088,21 +1133,36 @@ var LabelView = function LabelView(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+  // The fontStyle prop toggles between 'italic' and 'normal' based on the 'isItalic' boolean prop.
   var headingStyles = heading ? HeadingSizes[heading] : {};
-  return React__default.createElement(appStudio.Element, Object.assign({
-    as: "label",
-    width: "100%",
-    fontSize: size,
-    fontStyle: isItalic ? 'italic' : 'normal',
-    fontWeight: appStudio.Typography.fontWeights[weight],
-    textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
-  }, headingStyles, props), children);
+  // fontWeight is derived from the Typography module, ensuring consistent font weighting across the app.
+  return (
+    // textDecoration conditionally applies 'line-through' or 'underline' based on respective boolean props; defaults to 'none' if both are false.
+    React__default.createElement(appStudio.Element, Object.assign({
+      as: "label",
+      // Spreads any additional style properties from headingStyles into the Element if a heading size is specified.
+      width: "100%",
+      // Spreads the rest of the props to support extensibility of the LabelView component for future use cases.
+      fontSize: size,
+      // Includes children elements inside the Element, allowing for nested content within the label.
+      fontStyle: isItalic ? 'italic' : 'normal',
+      fontWeight: appStudio.Typography.fontWeights[weight],
+      textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
+    }, headingStyles, props), children)
+  );
 };
 
+// Import custom type 'LabelProps' to type check the properties passed into the Label component.
 var LabelComponent = function LabelComponent(props) {
-  return React__default.createElement(LabelView, Object.assign({}, props));
+  return (
+    // Import 'LabelView' as a visual component for the label, separating the view from business logic.
+    React__default.createElement(LabelView, Object.assign({}, props))
+    // Define 'LabelComponent' as a functional component that uses React's FC type for type checking and utilizing React features.
+  );
 };
+// Pass all properties received by 'LabelComponent' to 'LabelView' using the spread syntax, ensuring it has all props needed for rendering.
 var Label = LabelComponent;
+// Export the 'LabelComponent' as 'Label' to be reused throughout the project.
 
 var Sizes = {
   xs: {
@@ -1159,7 +1219,134 @@ var IconSizes$2 = {
   '6xl': 60
 };
 
-var _excluded$i = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles"];
+var HeadingSizes$1 = {
+  h1: {
+    fontSize: 96,
+    lineHeight: 112,
+    letterSpacing: -1.5
+  },
+  h2: {
+    fontSize: 60,
+    lineHeight: 71,
+    letterSpacing: -0.5
+  },
+  h3: {
+    fontSize: 48,
+    lineHeight: 57,
+    letterSpacing: 0
+  },
+  h4: {
+    fontSize: 34,
+    lineHeight: 40,
+    letterSpacing: 0.25
+  },
+  h5: {
+    fontSize: 24,
+    lineHeight: 28,
+    letterSpacing: 0
+  },
+  h6: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15
+  }
+};
+
+var _excluded$i = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
+var TextContent = function TextContent(_ref) {
+  var children = _ref.children,
+    isSub = _ref.isSub,
+    isSup = _ref.isSup;
+  return React__default.createElement(React__default.Fragment, null, typeof children === 'string' ? React__default.createElement(React__default.Fragment, null, isSub && React__default.createElement("sup", null, children), isSup && React__default.createElement("sup", null, children), !isSub && !isSup && React__default.createElement(React__default.Fragment, null, children)) : children);
+};
+var TruncateText = function TruncateText(_ref2) {
+  var text = _ref2.text,
+    _ref2$maxLines = _ref2.maxLines,
+    maxLines = _ref2$maxLines === void 0 ? 1 : _ref2$maxLines;
+  var containerRef = React.useRef(null);
+  var _useState = React.useState(text.length),
+    truncatedLength = _useState[0],
+    setTruncatedLength = _useState[1];
+  React.useEffect(function () {
+    var textNode = containerRef.current;
+    if (!textNode) return;
+    var updateTruncatedText = function updateTruncatedText() {
+      var comLineHeight = getComputedStyle(textNode).lineHeight;
+      var lineHeight = comLineHeight !== 'normal' ? parseFloat(comLineHeight) : 20;
+      var maxHeight = lineHeight * maxLines;
+      var start = 0;
+      var end = text.length;
+      var middle;
+      while (start <= end) {
+        middle = Math.floor((start + end) / 2);
+        textNode.innerText = text.substring(0, middle) + '...';
+        var currentHeight = textNode.offsetHeight;
+        if (currentHeight > maxHeight) {
+          end = middle - 1;
+        } else {
+          start = middle + 1;
+        }
+      }
+      setTruncatedLength(end);
+    };
+    updateTruncatedText();
+  }, [text, maxLines]);
+  var displayText = text.length > truncatedLength ? text.substring(0, truncatedLength) + '...' : text;
+  return React__default.createElement("div", {
+    ref: containerRef
+  }, displayText);
+};
+var TextView = function TextView(_ref3) {
+  var children = _ref3.children,
+    heading = _ref3.heading,
+    maxLines = _ref3.maxLines,
+    _ref3$isItalic = _ref3.isItalic,
+    isItalic = _ref3$isItalic === void 0 ? false : _ref3$isItalic,
+    _ref3$isUnderlined = _ref3.isUnderlined,
+    isUnderlined = _ref3$isUnderlined === void 0 ? false : _ref3$isUnderlined,
+    _ref3$isSub = _ref3.isSub,
+    isSub = _ref3$isSub === void 0 ? false : _ref3$isSub,
+    _ref3$isSup = _ref3.isSup,
+    isSup = _ref3$isSup === void 0 ? false : _ref3$isSup,
+    _ref3$isStriked = _ref3.isStriked,
+    isStriked = _ref3$isStriked === void 0 ? false : _ref3$isStriked,
+    _ref3$isTruncated = _ref3.isTruncated,
+    isTruncated = _ref3$isTruncated === void 0 ? false : _ref3$isTruncated,
+    _ref3$weight = _ref3.weight,
+    weight = _ref3$weight === void 0 ? 'normal' : _ref3$weight,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 'md' : _ref3$size,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$i);
+  var headingStyles = heading ? HeadingSizes$1[heading] : {};
+  var noLineBreak = isSub || isSup ? {
+    display: 'inline'
+  } : {};
+  var fontSize = appStudio.Typography.fontSizes[size];
+  return React__default.createElement(appStudio.Element, Object.assign({
+    role: "text",
+    fontSize: fontSize,
+    lineHeight: appStudio.Typography.lineHeights[size],
+    fontStyle: isItalic ? 'italic' : 'normal',
+    fontWeight: appStudio.Typography.fontWeights[weight],
+    textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
+  }, noLineBreak, headingStyles, props), isTruncated && maxLines && typeof children === 'string' ? React__default.createElement(TruncateText, {
+    text: children,
+    maxLines: maxLines
+  }) : React__default.createElement(TextContent, Object.assign({
+    isSub: isSub,
+    isSup: isSup
+  }, props), children));
+};
+
+var TextComponent = function TextComponent(props) {
+  return React__default.createElement(TextView, Object.assign({}, props));
+};
+/**
+ * The Text component is a simple component that renders a text string or paragraphs as a DOM element in the UI. It is a <p> tag by default.
+ */
+var Text = TextComponent;
+
+var _excluded$j = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles", "infoText"];
 var CheckboxView = function CheckboxView(_ref) {
   var id = _ref.id,
     icon = _ref.icon,
@@ -1196,7 +1383,8 @@ var CheckboxView = function CheckboxView(_ref) {
       checkbox: {},
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    infoText = _ref.infoText,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
@@ -1237,9 +1425,22 @@ var CheckboxView = function CheckboxView(_ref) {
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
     size: appStudio.Typography.fontSizes[size]
-  }, checkboxStyle.container, props), labelPosition === 'left' && label && React__default.createElement(appStudio.View, null, label), React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? React__default.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : React__default.createElement(CheckSvg, {
+  }, checkboxStyle.container, props), React__default.createElement(Layout.Vertical, {
+    gap: 8
+  }, React__default.createElement(Layout.Horizontal, {
+    gap: 10,
+    alignItems: "center"
+  }, labelPosition === 'left' && label && React__default.createElement(Text, Object.assign({
+    size: size
+  }, styles == null ? void 0 : styles.label), label), React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? React__default.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : React__default.createElement(CheckSvg, {
     size: IconSizes$2[size]
-  }))), labelPosition === 'right' && label && React__default.createElement(appStudio.View, null, label));
+  }))), labelPosition === 'right' && label && React__default.createElement(Text, Object.assign({
+    size: size
+  }, styles == null ? void 0 : styles.label), label)), infoText && React__default.createElement(Text, Object.assign({
+    marginLeft: labelPosition === 'left' ? 0 : 27,
+    color: "color.gray.400",
+    size: "sm"
+  }, styles == null ? void 0 : styles.infoText), infoText)));
 };
 
 var CheckboxComponent = function CheckboxComponent(props) {
@@ -2737,133 +2938,6 @@ var useCountryPickerState = function useCountryPickerState(_ref) {
   };
 };
 
-var HeadingSizes$1 = {
-  h1: {
-    fontSize: 96,
-    lineHeight: 112,
-    letterSpacing: -1.5
-  },
-  h2: {
-    fontSize: 60,
-    lineHeight: 71,
-    letterSpacing: -0.5
-  },
-  h3: {
-    fontSize: 48,
-    lineHeight: 57,
-    letterSpacing: 0
-  },
-  h4: {
-    fontSize: 34,
-    lineHeight: 40,
-    letterSpacing: 0.25
-  },
-  h5: {
-    fontSize: 24,
-    lineHeight: 28,
-    letterSpacing: 0
-  },
-  h6: {
-    fontSize: 20,
-    lineHeight: 24,
-    letterSpacing: 0.15
-  }
-};
-
-var _excluded$j = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
-var TextContent = function TextContent(_ref) {
-  var children = _ref.children,
-    isSub = _ref.isSub,
-    isSup = _ref.isSup;
-  return React__default.createElement(React__default.Fragment, null, typeof children === 'string' ? React__default.createElement(React__default.Fragment, null, isSub && React__default.createElement("sup", null, children), isSup && React__default.createElement("sup", null, children), !isSub && !isSup && React__default.createElement(React__default.Fragment, null, children)) : children);
-};
-var TruncateText = function TruncateText(_ref2) {
-  var text = _ref2.text,
-    _ref2$maxLines = _ref2.maxLines,
-    maxLines = _ref2$maxLines === void 0 ? 1 : _ref2$maxLines;
-  var containerRef = React.useRef(null);
-  var _useState = React.useState(text.length),
-    truncatedLength = _useState[0],
-    setTruncatedLength = _useState[1];
-  React.useEffect(function () {
-    var textNode = containerRef.current;
-    if (!textNode) return;
-    var updateTruncatedText = function updateTruncatedText() {
-      var comLineHeight = getComputedStyle(textNode).lineHeight;
-      var lineHeight = comLineHeight !== 'normal' ? parseFloat(comLineHeight) : 20;
-      var maxHeight = lineHeight * maxLines;
-      var start = 0;
-      var end = text.length;
-      var middle;
-      while (start <= end) {
-        middle = Math.floor((start + end) / 2);
-        textNode.innerText = text.substring(0, middle) + '...';
-        var currentHeight = textNode.offsetHeight;
-        if (currentHeight > maxHeight) {
-          end = middle - 1;
-        } else {
-          start = middle + 1;
-        }
-      }
-      setTruncatedLength(end);
-    };
-    updateTruncatedText();
-  }, [text, maxLines]);
-  var displayText = text.length > truncatedLength ? text.substring(0, truncatedLength) + '...' : text;
-  return React__default.createElement("div", {
-    ref: containerRef
-  }, displayText);
-};
-var TextView = function TextView(_ref3) {
-  var children = _ref3.children,
-    heading = _ref3.heading,
-    maxLines = _ref3.maxLines,
-    _ref3$isItalic = _ref3.isItalic,
-    isItalic = _ref3$isItalic === void 0 ? false : _ref3$isItalic,
-    _ref3$isUnderlined = _ref3.isUnderlined,
-    isUnderlined = _ref3$isUnderlined === void 0 ? false : _ref3$isUnderlined,
-    _ref3$isSub = _ref3.isSub,
-    isSub = _ref3$isSub === void 0 ? false : _ref3$isSub,
-    _ref3$isSup = _ref3.isSup,
-    isSup = _ref3$isSup === void 0 ? false : _ref3$isSup,
-    _ref3$isStriked = _ref3.isStriked,
-    isStriked = _ref3$isStriked === void 0 ? false : _ref3$isStriked,
-    _ref3$isTruncated = _ref3.isTruncated,
-    isTruncated = _ref3$isTruncated === void 0 ? false : _ref3$isTruncated,
-    _ref3$weight = _ref3.weight,
-    weight = _ref3$weight === void 0 ? 'normal' : _ref3$weight,
-    _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? 'md' : _ref3$size,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$j);
-  var headingStyles = heading ? HeadingSizes$1[heading] : {};
-  var noLineBreak = isSub || isSup ? {
-    display: 'inline'
-  } : {};
-  var fontSize = appStudio.Typography.fontSizes[size];
-  return React__default.createElement(appStudio.Element, Object.assign({
-    role: "text",
-    fontSize: fontSize,
-    lineHeight: appStudio.Typography.lineHeights[size],
-    fontStyle: isItalic ? 'italic' : 'normal',
-    fontWeight: appStudio.Typography.fontWeights[weight],
-    textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
-  }, noLineBreak, headingStyles, props), isTruncated && maxLines && typeof children === 'string' ? React__default.createElement(TruncateText, {
-    text: children,
-    maxLines: maxLines
-  }) : React__default.createElement(TextContent, Object.assign({
-    isSub: isSub,
-    isSup: isSup
-  }, props), children));
-};
-
-var TextComponent = function TextComponent(props) {
-  return React__default.createElement(TextView, Object.assign({}, props));
-};
-/**
- * The Text component is a simple component that renders a text string or paragraphs as a DOM element in the UI. It is a <p> tag by default.
- */
-var Text = TextComponent;
-
 var _excluded$k = ["children", "styles"];
 var HelperText = function HelperText(_ref) {
   var children = _ref.children,
@@ -3417,7 +3491,7 @@ var DatePickerView = function DatePickerView(_ref) {
       if (onChangeText) onChangeText(event);
     } else {
       setDate(event.target.value);
-      if (onChange) onChange(event);
+      if (onChange) onChange(event.target.value);
     }
   };
   var fieldStyles = _extends({
@@ -3467,14 +3541,16 @@ var DatePickerView = function DatePickerView(_ref) {
   }, styles), label), React__default.createElement(DatePickerContent, Object.assign({
     id: id,
     name: name,
-    value: date,
     onFocus: handleFocus,
-    onChange: handleDateChange,
     disabled: isDisabled,
     readOnly: isReadOnly
-  }, fieldStyles, onChangeText && {
+  }, fieldStyles, props, {
+    value: date
+  }, onChangeText && {
     onChangeText: handleDateChange
-  }, props)))));
+  }, {
+    onChange: handleDateChange
+  })))));
 };
 
 var DatePickerComponent = function DatePickerComponent(props) {
@@ -3744,6 +3820,9 @@ var useSelectState = function useSelectState(_ref) {
   var _React$useState4 = React__default.useState(defaultValue),
     value = _React$useState4[0],
     setValue = _React$useState4[1];
+  var _React$useState5 = React__default.useState(0),
+    highlightedIndex = _React$useState5[0],
+    setHighlightedIndex = _React$useState5[1];
   return {
     value: value,
     setValue: setValue,
@@ -3752,13 +3831,15 @@ var useSelectState = function useSelectState(_ref) {
     isHovered: isHovered,
     setIsHovered: setIsHovered,
     isFocused: isFocused,
-    setIsFocused: setIsFocused
+    setIsFocused: setIsFocused,
+    highlightedIndex: highlightedIndex,
+    setHighlightedIndex: setHighlightedIndex
   };
 };
 var useItemState = function useItemState() {
-  var _React$useState5 = React__default.useState(false),
-    isHovered = _React$useState5[0],
-    setIsHovered = _React$useState5[1];
+  var _React$useState6 = React__default.useState(false),
+    isHovered = _React$useState6[0],
+    setIsHovered = _React$useState6[1];
   return {
     isHovered: isHovered,
     setIsHovered: setIsHovered
@@ -3776,7 +3857,7 @@ var IconSizes$4 = {
 var _excluded$v = ["isHovered", "setIsHovered", "option", "size", "callback"],
   _excluded2$2 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
   _excluded3$1 = ["option", "size", "removeOption"],
-  _excluded4$1 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused"];
+  _excluded4$1 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
 var Item = function Item(_ref) {
   var isHovered = _ref.isHovered,
     setIsHovered = _ref.setIsHovered,
@@ -3792,11 +3873,10 @@ var Item = function Item(_ref) {
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
-  console.log(props.name);
   return React__default.createElement(appStudio.Element, Object.assign({
     as: "li",
     margin: 0,
-    paddingVertical: 8,
+    paddingVertical: 10,
     paddingHorizontal: 12,
     listStyleType: "none",
     onMouseEnter: handleHover,
@@ -3806,7 +3886,7 @@ var Item = function Item(_ref) {
       return handleOptionClick(option);
     },
     backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
-  }, props), option);
+  }, props), React__default.createElement(Text, null, " ", option));
 };
 var SelectBox = function SelectBox(_ref2) {
   var _ref2$size = _ref2.size,
@@ -3888,7 +3968,9 @@ var DropDown$1 = function DropDown(_ref4) {
     } : _ref4$styles,
     options = _ref4.options,
     _ref4$callback = _ref4.callback,
-    callback = _ref4$callback === void 0 ? function () {} : _ref4$callback;
+    callback = _ref4$callback === void 0 ? function () {} : _ref4$callback,
+    highlightedIndex = _ref4.highlightedIndex,
+    setHighlightedIndex = _ref4.setHighlightedIndex;
   var itemStates = useItemState();
   var handleCallback = function handleCallback(option) {
     return callback(option);
@@ -3911,8 +3993,8 @@ var DropDown$1 = function DropDown(_ref4) {
     top: "100%",
     width: "100%",
     display: "flex",
-    zIndex: 1000,
-    overflowY: "auto",
+    zIndex: 100000,
+    overflowY: "scroll",
     marginTop: 5,
     marginLeft: 0,
     marginRight: 0,
@@ -3922,13 +4004,24 @@ var DropDown$1 = function DropDown(_ref4) {
     position: "absolute",
     flexDirection: "column",
     backgroundColor: "white",
-    justifyContent: "space-evenly"
-  }, shadow, styles['dropDown']), options.map(function (option) {
+    maxHeight: "200px",
+    style: {
+      scrollbarWidth: 'none' /* For Firefox */,
+      msOverflowStyle: 'none' /* For Internet Explorer and Edge */,
+      '&::-webkit-scrollbar': {
+        display: 'none' /* For Chrome, Safari, and Opera */
+      }
+    }
+  }, shadow, styles['dropDown']), options.map(function (option, index) {
     return React__default.createElement(Item, Object.assign({
       key: option,
       size: size,
       option: option,
-      callback: handleCallback
+      callback: handleCallback,
+      backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
+      onMouseEnter: function onMouseEnter() {
+        return setHighlightedIndex(index);
+      }
     }, itemStates, styles['text']));
   }));
 };
@@ -4013,6 +4106,8 @@ var SelectView = function SelectView(_ref6) {
     setIsHovered = _ref6$setIsHovered === void 0 ? function () {} : _ref6$setIsHovered,
     _ref6$setIsFocused = _ref6.setIsFocused,
     setIsFocused = _ref6$setIsFocused === void 0 ? function () {} : _ref6$setIsFocused,
+    setHighlightedIndex = _ref6.setHighlightedIndex,
+    highlightedIndex = _ref6.highlightedIndex,
     props = _objectWithoutPropertiesLoose(_ref6, _excluded4$1);
   var isWithLabel = !!(isFocused && label);
   var handleHover = function handleHover() {
@@ -4100,7 +4195,9 @@ var SelectView = function SelectView(_ref6) {
     size: size,
     styles: styles,
     options: options,
-    callback: handleCallback
+    callback: handleCallback,
+    highlightedIndex: highlightedIndex,
+    setHighlightedIndex: setHighlightedIndex
   }));
 };
 
@@ -4790,27 +4887,32 @@ var PasswordComponent$1 = function PasswordComponent(_ref) {
  */
 var FormikPassword = PasswordComponent$1;
 
-// Import the necessary types
-// Define the useComboBoxState hook properly with types
+// Defines the useComboBoxState hook with parameters for the list of items and optional placeholder texts.
 var useComboBoxState = function useComboBoxState(items, placeholder, searchPlaceholder) {
+  // State hook for filtered items with initial state set to the items passed to the hook.
   var _useState = React.useState(items),
     filteredItems = _useState[0],
     setFilteredItems = _useState[1];
+  // State hook to track the selected item with an initial state based on the placeholder or the first item.
   var _useState2 = React.useState(placeholder ? {
       value: placeholder,
       label: placeholder
     } : items[0]),
     selectedItem = _useState2[0],
     setSelectedItem = _useState2[1];
+  // State hook for highlighted index in the dropdown list, initialized to 0.
   var _useState3 = React.useState(0),
     highlightedIndex = _useState3[0],
     setHighlightedIndex = _useState3[1];
+  // State hook for search query with an initial state based on the searchPlaceholder or empty string.
   var _useState4 = React.useState(searchPlaceholder != null ? searchPlaceholder : ''),
     searchQuery = _useState4[0],
     setSearchQuery = _useState4[1];
+  // State hook to manage dropdown visibility, starts as false (hidden).
   var _useState5 = React.useState(false),
     isDropdownVisible = _useState5[0],
     setIsDropdownVisible = _useState5[1];
+  // Start of object returned by the useComboBoxState hook containing all state and state updater functions.
   return {
     filteredItems: filteredItems,
     setFilteredItems: setFilteredItems,
@@ -4891,6 +4993,7 @@ var SearchLoopSvg = function SearchLoopSvg(_ref) {
 };
 
 var _excluded$E = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "styles", "isDropdownVisible", "setIsDropdownVisible"];
+// Defines the functional component 'ComboBoxView' with destructured props.
 var ComboBoxView = function ComboBoxView(_ref) {
   var placeholder = _ref.placeholder,
     items = _ref.items,
@@ -4914,6 +5017,7 @@ var ComboBoxView = function ComboBoxView(_ref) {
     isDropdownVisible = _ref.isDropdownVisible,
     setIsDropdownVisible = _ref.setIsDropdownVisible,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+  // Sets up an effect to handle clicking outside the dropdown to close it.
   React.useEffect(function () {
     var handleClickOutside = function handleClickOutside(event) {
       var path = event.composedPath();
@@ -4929,6 +5033,7 @@ var ComboBoxView = function ComboBoxView(_ref) {
       return document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
+  // Defines 'handleSearch' to filter items based on the user's query.
   var handleSearch = function handleSearch(query) {
     setSearchQuery(query);
     if (query === '') {
@@ -4941,11 +5046,13 @@ var ComboBoxView = function ComboBoxView(_ref) {
     }
     setHighlightedIndex(0);
   };
+  // Defines 'handleSelect' to handle item selection and close the dropdown.
   var handleSelect = function handleSelect(item) {
     setSelectedItem(item);
     onSelect == null || onSelect(item);
     setIsDropdownVisible(false);
   };
+  // Starts the JSX returned by the component representing the combobox.
   return React__default.createElement(Horizontal, Object.assign({
     role: "combobox",
     wrap: "nowrap",
@@ -5207,7 +5314,6 @@ var ModalContainer = function ModalContainer(_ref2) {
   };
   return React__default.createElement(Vertical, Object.assign({
     cursor: "default",
-    overflow: "hidden",
     backgroundColor: "white",
     width: isFullScreen ? '100%' : 600,
     height: isFullScreen ? '100%' : 'fit-content',
@@ -5253,7 +5359,6 @@ var ModalBody = function ModalBody(_ref4) {
     borderStyle: 'solid'
   };
   return React__default.createElement(View, Object.assign({
-    overflowY: "auto",
     paddingVertical: 15,
     paddingHorizontal: 20
   }, defaultBorder, props), children);
@@ -5338,18 +5443,15 @@ var FileImage = function FileImage(_ref2) {
   }, props));
 };
 
+// Initializes a custom hook for managing tab states with an array of 'Tab' objects passed as properties.
 var useTabsState = function useTabsState(propTabs) {
-  // Defines a custom hook, named `useTabsState`, that manages the state of tabs within a component.
   var _useState = React.useState(propTabs[0]),
     isActive = _useState[0],
     setIsActive = _useState[1];
-  // Initializes 'isActive' state with the first tab from the 'propTabs' array, indicating the currently active tab.
   var _useState2 = React.useState(propTabs),
     tabsState = _useState2[0],
     setTabsState = _useState2[1];
-  // Initializes 'tabsState' as a stateful array that reflects the tabs passed through 'propTabs' prop, setting the initial state of tabs.
   return {
-    // The hook returns an object containing both the state and the functions to update the state, allowing components to control and access the current state of the tabs.
     isActive: isActive,
     setIsActive: setIsActive,
     tabsState: tabsState,
@@ -5357,21 +5459,31 @@ var useTabsState = function useTabsState(propTabs) {
   };
 };
 
+// Defines a functional component 'TabsView' with props of type 'TabsViewProps'.
 var TabsView = function TabsView(props) {
+  // Destructures 'tabs', 'styles', 'isActive', 'setIsActive', 'tabsState', and 'setTabsState' from the component props.
   var tabs = props.tabs,
     styles = props.styles,
     isActive = props.isActive,
     setIsActive = props.setIsActive,
     tabsState = props.tabsState,
     setTabsState = props.setTabsState;
+  // Declares a function 'moveSelectedTabToTop' that takes an index and modifies the tabs order.
   var moveSelectedTabToTop = function moveSelectedTabToTop(idx) {
+    // Creates a copy of the 'tabs' array from props to be altered.
     var newTabs = [].concat(tabs);
+    // Removes the tab at the provided index, effectively selecting this tab.
     var selectedTab = newTabs.splice(idx, 1);
+    // Places the selected tab at the start of the 'newTabs' array.
     newTabs.unshift(selectedTab[0]);
+    // Updates the state with the reordered tabs.
     setTabsState(newTabs);
+    // Sets the active tab to the first tab in the 'newTabs' array.
     setIsActive(newTabs[0]);
   };
+  // Defines a function 'isContentActive' that checks if the given tab's content is to be displayed.
   var isContentActive = function isContentActive(tab) {
+    // Returns a boolean indicating if the given tab is identical to the first tab in 'tabsState'.
     return tab.value === tabsState[0].value;
   };
   return React__default.createElement(Horizontal, Object.assign({
@@ -5400,17 +5512,14 @@ var TabsView = function TabsView(props) {
   })));
 };
 
-// Define the functional component TabsComponent that utilizes the TabsProps interface for its props.
 var TabsComponent = function TabsComponent(_ref) {
   var tabs = _ref.tabs,
     styles = _ref.styles;
-  // Destructure the 'tabs' and 'styles' properties from the component's props.
   var _useTabsState = useTabsState(tabs),
     isActive = _useTabsState.isActive,
     setIsActive = _useTabsState.setIsActive,
     tabsState = _useTabsState.tabsState,
     setTabsState = _useTabsState.setTabsState;
-  // Invoke the useTabsState custom hook with 'tabs' to manage state related to tab activities like the active tab and tab state management.
   return React__default.createElement(TabsView, {
     tabs: tabs,
     styles: styles,
@@ -5422,54 +5531,66 @@ var TabsComponent = function TabsComponent(_ref) {
 };
 var Tabs = /*#__PURE__*/React__default.memo(TabsComponent);
 
+// Define a constant object 'Themes' exporting various theme styles.
 var Themes = {
+  // Start of the 'default' theme definition with style properties.
   default: {
     container: {
       backgroundColor: 'white',
       border: 'color.blackAlpha.800'
     },
+    // Defines the content style for the 'default' theme.
     content: {
       color: 'color.blackAlpha.800'
     }
   },
+  // The 'info' theme with unique container and content styles.
   info: {
     container: {
       backgroundColor: 'color.blue.200',
       border: 'color.blue.400'
     },
+    // Content styles specific to the 'info' theme.
     content: {
       color: '#60a5fa'
     }
   },
+  // Specifies the 'success' theme with corresponding container and content styles.
   success: {
     container: {
       backgroundColor: 'color.green.200',
       border: 'color.green.400'
     },
+    // Sets the content styling nuances for the 'success' theme.
     content: {
       color: '#22c55e'
     }
   },
+  // Start of the 'error' theme with its characteristic styles.
   error: {
     container: {
       backgroundColor: 'color.red.200',
       border: 'color.red.400'
     },
+    // Content styling for the 'error' theme.
     content: {
       color: '#ef4444'
     }
   },
+  // Introduction of the 'warning' theme styles.
   warning: {
     container: {
       backgroundColor: 'color.orange.200',
       border: 'color.orange.400'
     },
+    // Defines color and aesthetics for the 'warning' theme's content.
     content: {
       color: '#f97316'
     }
   }
 };
 
+// Defines AlertView as a functional component using destructuring to extract props.
 var AlertView = function AlertView(_ref) {
   var _styles$icon$color;
   var icon = _ref.icon,
@@ -5502,6 +5623,7 @@ var AlertView = function AlertView(_ref) {
   }, styles == null ? void 0 : styles.description), description)));
 };
 
+// Definition of the AlertComponent functional component with destructured props.
 var AlertComponent = function AlertComponent(_ref) {
   var icon = _ref.icon,
     title = _ref.title,
@@ -5516,9 +5638,11 @@ var AlertComponent = function AlertComponent(_ref) {
     variant: variant
   });
 };
+// Exporting the AlertComponent as 'Alert' for use in other parts of the application.
 var Alert = AlertComponent;
 
 var _excluded$I = ["ratio", "children"];
+// Declaration of a functional component named AspectRatioView.
 var AspectRatioView = function AspectRatioView(_ref) {
   var _ref$ratio = _ref.ratio,
     ratio = _ref$ratio === void 0 ? 16 / 9 : _ref$ratio,
@@ -5540,26 +5664,31 @@ var AspectRatioView = function AspectRatioView(_ref) {
 };
 
 var _excluded$J = ["ratio", "children"];
+// Declaration of the AspectRatioComponent functional component with destructured props.
 var AspectRatioComponent = function AspectRatioComponent(_ref) {
   var ratio = _ref.ratio,
     children = _ref.children,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+  // Beginning of the return statement in the functional component.
   return React__default.createElement(AspectRatioView, Object.assign({
     ratio: ratio
   }, props), children);
 };
 var AspectRatio = AspectRatioComponent;
 
+// Defines a state hook for managing avatar image error status, initialized as false.
 var useAvatarState = function useAvatarState() {
   var _useState = React.useState(false),
     imageError = _useState[0],
     setImageError = _useState[1];
+  // Provides an object containing the image error state and its setter function.
   return {
     imageError: imageError,
     setImageError: setImageError
   };
 };
 
+// Defines a mapping of avatar sizes to their respective numeric values
 var AvatarSizeMap = {
   xs: 24,
   sm: 32,
@@ -5568,6 +5697,7 @@ var AvatarSizeMap = {
   xl: 80
 };
 
+// Declaration of the AvatarView functional component with destructured props from AvatarViewProps.
 var AvatarView = function AvatarView(_ref) {
   var src = _ref.src,
     _ref$size = _ref.size,
@@ -5577,10 +5707,13 @@ var AvatarView = function AvatarView(_ref) {
     styles = _ref.styles,
     imageError = _ref.imageError,
     setImageError = _ref.setImageError;
+  // Determines the size of the avatar by mapping the size prop to the predefined AvatarSizeMap.
   var avatarSize = AvatarSizeMap[size];
+  // Initiates a style object for the image with an objectFit property and spreads additional image styles if provided.
   var imageStyle = _extends({
     objectFit: 'cover'
   }, (styles == null ? void 0 : styles.image) || {});
+  // Start of the JSX returned by the AvatarView component, which uses the Center component as its root element.
   return React__default.createElement(Center, Object.assign({
     role: "avatar",
     width: avatarSize,
@@ -5590,7 +5723,7 @@ var AvatarView = function AvatarView(_ref) {
     borderWidth: "1px",
     borderStyle: "solid",
     borderColor: imageError ? 'black' : 'transparent',
-    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)" // Add shadow effect
+    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)"
   }, styles == null ? void 0 : styles.container), !imageError ? React__default.createElement(appStudio.Image, {
     alt: "IM",
     src: src,
@@ -5605,14 +5738,17 @@ var AvatarView = function AvatarView(_ref) {
   }, styles == null ? void 0 : styles.fallback), fallback));
 };
 
+// Defines the AvatarComponent functional component with destructured props from AvatarProps type.
 var AvatarComponent = function AvatarComponent(_ref) {
   var src = _ref.src,
     size = _ref.size,
     styles = _ref.styles,
     fallback = _ref.fallback;
+  // Uses custom hook useAvatarState to manage the avatar image loading error state.
   var _useAvatarState = useAvatarState(),
     imageError = _useAvatarState.imageError,
     setImageError = _useAvatarState.setImageError;
+  // Begins the JSX return block for rendering the AvatarView component.
   return React__default.createElement(AvatarView, {
     src: src,
     size: size,
@@ -5621,7 +5757,9 @@ var AvatarComponent = function AvatarComponent(_ref) {
     imageError: imageError,
     setImageError: setImageError
   });
+  // AvatarComponent is a functional component that wraps the AvatarView with added state logic.
 };
+// Exports the AvatarComponent as Avatar for use in other parts of the application.
 var Avatar = AvatarComponent;
 
 var BadgeSizes = {
@@ -5679,6 +5817,7 @@ var PositionStyles = {
   }
 };
 
+// Importing Text component to display the content text within the badge.
 var BadgeView = function BadgeView(_ref) {
   var content = _ref.content,
     position = _ref.position,
@@ -5700,6 +5839,7 @@ var BadgeView = function BadgeView(_ref) {
       borderColor: 'transparent'
     },
     outline: {
+      // Combining various style objects along with conditional styles based on props to create the badge's appearance.
       backgroundColor: 'transparent',
       borderWidth: 1,
       borderStyle: 'solid',
@@ -5708,10 +5848,13 @@ var BadgeView = function BadgeView(_ref) {
     },
     link: {
       backgroundColor: 'transparent',
+      // Rendering the Badge component using the Center layout component with combinedStyles applied.
       borderWidth: 1,
+      // Inserting a Text component into the badge to display the content, with dynamic size and additional text styles.
       borderStyle: 'solid',
       borderColor: 'transparent',
       color: colorScheme,
+      // Exporting BadgeView to be used in other parts of the application.
       textDecoration: 'underline'
     },
     ghost: {
@@ -5734,6 +5877,7 @@ var BadgeView = function BadgeView(_ref) {
   }, styles == null ? void 0 : styles.text), content));
 };
 
+// Importing type definitions for BadgeProps that will be used to type-check the Badge component's props.
 var Badge = function Badge(_ref) {
   var content = _ref.content,
     shape = _ref.shape,
@@ -5753,13 +5897,17 @@ var Badge = function Badge(_ref) {
   });
 };
 
+// Declares the useToggleState function which takes defaultToggled parameter to initialize the toggle state.
 var useToggleState = function useToggleState(defaultToggled) {
+  // Creates a stateful value isHovered for tracking hover state and a function setIsHovered to update that state, initially false.
   var _useState = React.useState(false),
     isHovered = _useState[0],
     setIsHovered = _useState[1];
+  // Creates a stateful value isToggle to store the current toggle state and a function setIsToggled to modify it, initialized with defaultToggled.
   var _useState2 = React.useState(defaultToggled),
     isToggle = _useState2[0],
     setIsToggled = _useState2[1];
+  // Returns an object containing the current states and the functions to update them for external use.
   return {
     isHovered: isHovered,
     setIsHovered: setIsHovered,
@@ -5811,14 +5959,12 @@ var ToggleView = function ToggleView(_ref) {
       setIsToggled(function (prev) {
         var newState = !prev;
         if (onToggle) {
-          // Check if onToggle is defined before calling it
           onToggle(newState);
         }
-        return newState; // Expecting the onToggle to possibly do something with the newState
+        return newState;
       });
     }
   };
-
   return React__default.createElement(Center, Object.assign({
     role: "Toggle",
     padding: shape === 'pillShaped' ? '10px 12px' : '8px',
@@ -5838,6 +5984,7 @@ var ToggleView = function ToggleView(_ref) {
 };
 
 var _excluded$L = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
+// Destructuring properties from ToggleProps to be used within the ToggleComponent.
 var ToggleComponent = function ToggleComponent(_ref) {
   var children = _ref.children,
     shape = _ref.shape,
@@ -5848,14 +5995,17 @@ var ToggleComponent = function ToggleComponent(_ref) {
     isToggled = _ref$isToggled === void 0 ? false : _ref$isToggled,
     onToggle = _ref.onToggle,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+  // Initializing toggle state and set state functions using the custom hook useToggleState.
   var _useToggleState = useToggleState(isToggled),
     isHovered = _useToggleState.isHovered,
     setIsHovered = _useToggleState.setIsHovered,
     isToggle = _useToggleState.isToggle,
     setIsToggled = _useToggleState.setIsToggled;
+  // Creating an effect that updates the isToggled state whenever the isToggled prop changes.
   React.useEffect(function () {
     setIsToggled(isToggled);
   }, [isToggled]);
+  // Beginning of the JSX block to render the Toggle view component.
   return React__default.createElement(ToggleView, Object.assign({
     shape: shape,
     colorScheme: colorScheme,
@@ -5870,6 +6020,7 @@ var ToggleComponent = function ToggleComponent(_ref) {
 };
 var Toggle = ToggleComponent;
 
+// Define a custom hook for managing ToggleGroup state
 var useToggleGroupState = function useToggleGroupState() {
   var _useState = React.useState([]),
     activeToggles = _useState[0],
@@ -5880,6 +6031,7 @@ var useToggleGroupState = function useToggleGroupState() {
   };
 };
 
+// ToggleGroupView component declaration with destructured properties from props.
 var ToggleGroupView = function ToggleGroupView(_ref) {
   var items = _ref.items,
     onToggleChange = _ref.onToggleChange,
@@ -5891,14 +6043,13 @@ var ToggleGroupView = function ToggleGroupView(_ref) {
     variant = _ref$variant === void 0 ? 'ghost' : _ref$variant,
     _ref$colorScheme = _ref.colorScheme,
     colorScheme = _ref$colorScheme === void 0 ? 'color.trueGray.400' : _ref$colorScheme;
+  // handleToggle is a memoized callback that handles the toggle state changes.
   var handleToggle = React.useCallback(function (id, isActive) {
     setActiveToggles(function (prevActiveToggles) {
       var newActiveToggles;
       if (isActive) {
-        // Add the ID only if it's not already included
         newActiveToggles = prevActiveToggles.includes(id) ? prevActiveToggles : [].concat(prevActiveToggles, [id]);
       } else {
-        // Remove the ID if it's included
         newActiveToggles = prevActiveToggles.filter(function (toggleId) {
           return toggleId !== id;
         });
@@ -5928,12 +6079,14 @@ var ToggleGroupView = function ToggleGroupView(_ref) {
   }));
 };
 
+// Define the functional component with destructured props
 var ToggleGroupComponent = function ToggleGroupComponent(_ref) {
   var items = _ref.items,
     shape = _ref.shape,
     colorScheme = _ref.colorScheme,
     variant = _ref.variant,
     onToggleChange = _ref.onToggleChange;
+  // Hook to manage toggle group state, returns active toggles and a setter for it
   var _useToggleGroupState = useToggleGroupState(),
     activeToggles = _useToggleGroupState.activeToggles,
     setActiveToggles = _useToggleGroupState.setActiveToggles;
@@ -5947,6 +6100,7 @@ var ToggleGroupComponent = function ToggleGroupComponent(_ref) {
     onToggleChange: onToggleChange
   });
 };
+// Expose the ToggleGroupComponent for import into other modules
 var ToggleGroup = ToggleGroupComponent;
 
 // Create your store with the initial state and actions.