@app-studio/web 0.3.64 → 0.3.65

package/dist/web.cjs.development.js

@@ -11,6 +11,9 @@ var reactRouterDom = require('react-router-dom');
 var format = _interopDefault(require('date-fns/format'));
 var formik = require('formik');
 var zustand = require('zustand');
+var View$1 = require('src/components/Layout/View/View');
+var components = require('src/components');
+var Svg = require('src/components/Svg');
 
 var useButtonState = function useButtonState() {
   var _React$useState = React__default.useState(false),
@@ -772,7 +775,7 @@ var LoaderComponent = function LoaderComponent(props) {
  */
 var Loader = LoaderComponent;
 
-var _excluded$c = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition"];
+var _excluded$c = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered"];
 var ButtonView = function ButtonView(_ref) {
   var _props$onClick;
   var icon = _ref.icon,
@@ -806,34 +809,46 @@ var ButtonView = function ButtonView(_ref) {
     loaderProps = _ref$loaderProps === void 0 ? {} : _ref$loaderProps,
     _ref$loaderPosition = _ref.loaderPosition,
     loaderPosition = _ref$loaderPosition === void 0 ? 'left' : _ref$loaderPosition,
+    _ref$effect = _ref.effect,
+    effect = _ref$effect === void 0 ? 'default' : _ref$effect,
+    isHovered = _ref.isHovered,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var isActive = !(isDisabled || isLoading);
   var defaultNativeProps = {
     disabled: !isActive
   };
   var buttonColor = isActive ? colorScheme : 'theme.disabled';
+  var hovering = isHovered && effect === 'hover';
+  var reverse = isHovered && effect === 'reverse';
   var ButtonVariants = {
     filled: {
-      backgroundColor: buttonColor,
-      color: 'color.white'
+      backgroundColor: reverse ? 'transparent' : buttonColor,
+      color: reverse ? buttonColor : 'color.white',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: reverse ? buttonColor : 'transparent'
     },
     outline: {
-      backgroundColor: 'transparent',
+      backgroundColor: reverse ? buttonColor : 'transparent',
       borderWidth: 1,
       borderStyle: 'solid',
-      borderColor: colorScheme,
-      color: buttonColor
+      borderColor: reverse ? buttonColor : colorScheme,
+      color: reverse ? 'white' : buttonColor
     },
     link: {
       backgroundColor: 'transparent',
-      border: 'none',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: reverse ? buttonColor : 'transparent',
       color: buttonColor,
-      textDecorationLine: 'underline'
+      textDecoration: reverse ? 'none' : 'underline'
     },
     ghost: {
-      backgroundColor: 'transparent',
-      border: 'none',
-      color: buttonColor
+      backgroundColor: reverse ? buttonColor : 'transparent',
+      color: reverse ? 'color.white' : buttonColor,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: reverse ? buttonColor : 'transparent'
     }
   };
   var buttonSizeStyles = ButtonSizes[size];
@@ -845,7 +860,7 @@ var ButtonView = function ButtonView(_ref) {
     padding: isIconRounded ? IconSizes$1[size].padding : ButtonSizes[size].padding
   };
   var content = React__default.createElement(Horizontal, {
-    gap: 4
+    gap: 10
   }, isLoading && loaderPosition === 'left' && React__default.createElement(Loader, Object.assign({}, loaderProps)), icon && iconPosition === 'left' && !isLoading && icon, children, icon && iconPosition === 'right' && !isLoading && icon, isLoading && loaderPosition === 'right' && React__default.createElement(Loader, Object.assign({}, loaderProps)));
   return React__default.createElement(appStudio.Element, Object.assign({
     gap: 8,
@@ -860,7 +875,10 @@ var ButtonView = function ButtonView(_ref) {
     backgroundColor: buttonColor,
     borderRadius: ButtonShapes[shape],
     onClick: (_props$onClick = props.onClick) != null ? _props$onClick : onClick,
-    cursor: isActive ? 'pointer' : 'default'
+    cursor: isActive ? 'pointer' : 'default',
+    filter: hovering ? 'brightness(0.85)' : 'brightness(1)',
+    transition: hovering && !props.isDisabled ? 'transform 0.3s ease' : '',
+    transform: hovering && !props.isDisabled ? 'translateY(-5px)' : ''
   }, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, changePadding, shadow, props), variant === 'link' && externalHref ? React__default.createElement(Link, {
     href: externalHref,
     textDecorationColor: colorScheme,
@@ -877,9 +895,10 @@ var ButtonComponent = function ButtonComponent(props) {
     return setIsHovered(!isHovered);
   };
   return React__default.createElement(ButtonView, Object.assign({
+    isHovered: isHovered,
+    setIsHovered: setIsHovered,
     onMouseEnter: handleHover,
-    onMouseLeave: handleHover,
-    filter: isHovered ? 'brightness(0.85)' : 'brightness(1)'
+    onMouseLeave: handleHover
   }, props));
 };
 /**
@@ -2601,32 +2620,6 @@ var useCountryPickerState = function useCountryPickerState(_ref) {
   };
 };
 
-var _excluded$f = ["children", "wrap", "justify", "isReversed"];
-var VerticalView = function VerticalView(_ref) {
-  var children = _ref.children,
-    _ref$wrap = _ref.wrap,
-    wrap = _ref$wrap === void 0 ? 'nowrap' : _ref$wrap,
-    _ref$justify = _ref.justify,
-    justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
-    _ref$isReversed = _ref.isReversed,
-    isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
-  return React__default.createElement(appStudio.View, Object.assign({
-    display: "flex",
-    flexWrap: wrap,
-    flexDirection: isReversed ? 'column-reverse' : 'column',
-    justifyContent: justify
-  }, props), children);
-};
-
-/**
- * Vertical layout aligns all the elements in a container on the vertical axis.
- */
-var VerticalComponent = function VerticalComponent(props) {
-  return React__default.createElement(VerticalView, Object.assign({}, props));
-};
-var Vertical = VerticalComponent;
-
 var HeadingSizes$1 = {
   h1: {
     fontSize: 96,
@@ -2660,7 +2653,7 @@ var HeadingSizes$1 = {
   }
 };
 
-var _excluded$g = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
+var _excluded$f = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
 var TextContent = function TextContent(_ref) {
   var children = _ref.children,
     isSub = _ref.isSub,
@@ -2724,7 +2717,7 @@ var TextView = function TextView(_ref3) {
     weight = _ref3$weight === void 0 ? 'normal' : _ref3$weight,
     _ref3$size = _ref3.size,
     size = _ref3$size === void 0 ? 'md' : _ref3$size,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$f);
   var headingStyles = heading ? HeadingSizes$1[heading] : {};
   var noLineBreak = isSub || isSup ? {
     display: 'inline'
@@ -2754,14 +2747,14 @@ var TextComponent = function TextComponent(props) {
  */
 var Text = TextComponent;
 
-var _excluded$h = ["children", "styles"];
+var _excluded$g = ["children", "styles"];
 var HelperText = function HelperText(_ref) {
   var children = _ref.children,
     _ref$styles = _ref.styles,
     styles = _ref$styles === void 0 ? {
       helperText: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   return React__default.createElement(Text, Object.assign({
     size: "xs",
     marginVertical: 0,
@@ -2770,6 +2763,32 @@ var HelperText = function HelperText(_ref) {
   }, styles['helperText'], props), children);
 };
 
+var _excluded$h = ["children", "wrap", "justify", "isReversed"];
+var VerticalView = function VerticalView(_ref) {
+  var children = _ref.children,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? 'nowrap' : _ref$wrap,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
+    _ref$isReversed = _ref.isReversed,
+    isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+  return React__default.createElement(appStudio.View, Object.assign({
+    display: "flex",
+    flexWrap: wrap,
+    flexDirection: isReversed ? 'column-reverse' : 'column',
+    justifyContent: justify
+  }, props), children);
+};
+
+/**
+ * Vertical layout aligns all the elements in a container on the vertical axis.
+ */
+var VerticalComponent = function VerticalComponent(props) {
+  return React__default.createElement(VerticalView, Object.assign({}, props));
+};
+var Vertical = VerticalComponent;
+
 var _excluded$i = ["children", "helperText", "error", "styles"];
 var FieldContainer = function FieldContainer(_ref) {
   var children = _ref.children,
@@ -4936,6 +4955,622 @@ var FileImage = function FileImage(_ref2) {
   }, props));
 };
 
+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,
+    setTabsState: setTabsState
+  };
+};
+
+var TabsView = function TabsView(props) {
+  var tabs = props.tabs,
+    styles = props.styles,
+    isActive = props.isActive,
+    setIsActive = props.setIsActive,
+    tabsState = props.tabsState,
+    setTabsState = props.setTabsState;
+  var moveSelectedTabToTop = function moveSelectedTabToTop(idx) {
+    var newTabs = [].concat(tabs);
+    var selectedTab = newTabs.splice(idx, 1);
+    newTabs.unshift(selectedTab[0]);
+    setTabsState(newTabs);
+    setIsActive(newTabs[0]);
+  };
+  var isContentActive = function isContentActive(tab) {
+    return tab.value === tabsState[0].value;
+  };
+  return React__default.createElement(components.Horizontal, Object.assign({
+    width: "100w",
+    height: '100%'
+  }, styles == null ? void 0 : styles.container), React__default.createElement(components.Horizontal, Object.assign({
+    marginBottom: 20
+  }, styles == null ? void 0 : styles.headerTabs), tabs.map(function (tab, idx) {
+    return React__default.createElement(components.Button, Object.assign({
+      key: tab.title,
+      onClick: function onClick() {
+        moveSelectedTabToTop(idx);
+      },
+      variant: isActive.value === tab.value ? 'filled' : 'ghost',
+      shape: "pillShaped",
+      cursor: "pointer",
+      isAuto: true
+    }, styles == null ? void 0 : styles.tab, isActive.value === tab.value ? styles == null ? void 0 : styles.activeTab : {}), React__default.createElement(components.Text, Object.assign({}, styles == null ? void 0 : styles.title, isActive.value === tab.value ? styles == null ? void 0 : styles.activeText : {}), tab.title));
+  })), React__default.createElement(View$1.View, Object.assign({
+    width: '100%',
+    height: "100%"
+  }, styles == null ? void 0 : styles.content), tabsState.map(function (tab, idx) {
+    return isContentActive(tab) && React__default.createElement(View$1.View, {
+      key: idx
+    }, tab.content);
+  })));
+};
+
+// 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,
+    isActive: isActive,
+    tabsState: tabsState,
+    setTabsState: setTabsState,
+    setIsActive: setIsActive
+  });
+};
+var Tabs = /*#__PURE__*/React__default.memo(TabsComponent);
+
+var Themes = {
+  default: {
+    container: {
+      backgroundColor: 'white',
+      border: 'color.blackAlpha.800'
+    },
+    content: {
+      color: 'color.blackAlpha.800'
+    }
+  },
+  info: {
+    container: {
+      backgroundColor: 'color.blue.200',
+      border: 'color.blue.400'
+    },
+    content: {
+      color: '#60a5fa'
+    }
+  },
+  success: {
+    container: {
+      backgroundColor: 'color.green.200',
+      border: 'color.green.400'
+    },
+    content: {
+      color: '#22c55e'
+    }
+  },
+  error: {
+    container: {
+      backgroundColor: 'color.red.200',
+      border: 'color.red.400'
+    },
+    content: {
+      color: '#ef4444'
+    }
+  },
+  warning: {
+    container: {
+      backgroundColor: 'color.orange.200',
+      border: 'color.orange.400'
+    },
+    content: {
+      color: '#f97316'
+    }
+  }
+};
+
+var AlertView = function AlertView(_ref) {
+  var _styles$icon$color;
+  var icon = _ref.icon,
+    title = _ref.title,
+    styles = _ref.styles,
+    description = _ref.description,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant;
+  return React__default.createElement(components.Horizontal, Object.assign({
+    gap: 15,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderStyle: "solid",
+    padding: 16,
+    wrap: "nowrap",
+    borderColor: Themes[variant].container.border
+  }, styles == null ? void 0 : styles.container), React__default.createElement(components.View, {
+    alignSelf: 'center'
+  }, icon ? icon : React__default.createElement(Svg.WarningSvg, {
+    size: 24,
+    color: (_styles$icon$color = styles == null ? void 0 : styles.icon.color) != null ? _styles$icon$color : Themes[variant].content.color
+  })), React__default.createElement(components.Vertical, {
+    gap: 10
+  }, React__default.createElement(components.Text, Object.assign({
+    fontSize: "16px",
+    color: Themes[variant].content.color
+  }, styles == null ? void 0 : styles.title), title), React__default.createElement(components.Text, Object.assign({
+    fontSize: "14px",
+    color: Themes[variant].content.color
+  }, styles == null ? void 0 : styles.description), description)));
+};
+
+var AlertComponent = function AlertComponent(_ref) {
+  var icon = _ref.icon,
+    title = _ref.title,
+    styles = _ref.styles,
+    description = _ref.description,
+    variant = _ref.variant;
+  return React__default.createElement(AlertView, {
+    icon: icon,
+    title: title,
+    styles: styles,
+    description: description,
+    variant: variant
+  });
+};
+var Alert = AlertComponent;
+
+var _excluded$A = ["ratio", "children"];
+var AspectRatioView = function AspectRatioView(_ref) {
+  var _ref$ratio = _ref.ratio,
+    ratio = _ref$ratio === void 0 ? 16 / 9 : _ref$ratio,
+    children = _ref.children,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+  return React__default.createElement(components.Center, Object.assign({
+    width: '100%',
+    position: "relative",
+    overflow: "hidden",
+    paddingTop: 1 / ratio * 100 + "%",
+    borderRadius: 8
+  }, props), React__default.createElement(components.View, {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  }, children));
+};
+
+var _excluded$B = ["ratio", "children"];
+var AspectRatioComponent = function AspectRatioComponent(_ref) {
+  var ratio = _ref.ratio,
+    children = _ref.children,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+  return React__default.createElement(AspectRatioView, Object.assign({
+    ratio: ratio
+  }, props), children);
+};
+var AspectRatio = AspectRatioComponent;
+
+var useAvatarState = function useAvatarState() {
+  var _useState = React.useState(false),
+    imageError = _useState[0],
+    setImageError = _useState[1];
+  return {
+    imageError: imageError,
+    setImageError: setImageError
+  };
+};
+
+var AvatarSizeMap = {
+  xs: 24,
+  sm: 32,
+  md: 48,
+  lg: 64,
+  xl: 80
+};
+
+var AvatarView = function AvatarView(_ref) {
+  var src = _ref.src,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$fallback = _ref.fallback,
+    fallback = _ref$fallback === void 0 ? 'IM' : _ref$fallback,
+    styles = _ref.styles,
+    imageError = _ref.imageError,
+    setImageError = _ref.setImageError;
+  var avatarSize = AvatarSizeMap[size];
+  var imageStyle = _extends({
+    objectFit: 'cover'
+  }, (styles == null ? void 0 : styles.image) || {});
+  return React__default.createElement(components.Center, Object.assign({
+    role: "avatar",
+    width: avatarSize,
+    height: avatarSize,
+    borderRadius: "50%",
+    overflow: "hidden",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: imageError ? 'black' : 'transparent',
+    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)" // Add shadow effect
+  }, styles == null ? void 0 : styles.container), !imageError ? React__default.createElement(appStudio.Image, {
+    alt: "IM",
+    src: src,
+    style: imageStyle,
+    width: avatarSize,
+    height: avatarSize,
+    onError: function onError() {
+      return setImageError(true);
+    }
+  }) : React__default.createElement(components.Text, Object.assign({
+    size: size
+  }, styles == null ? void 0 : styles.fallback), fallback));
+};
+
+var AvatarComponent = function AvatarComponent(_ref) {
+  var src = _ref.src,
+    size = _ref.size,
+    styles = _ref.styles,
+    fallback = _ref.fallback;
+  var _useAvatarState = useAvatarState(),
+    imageError = _useAvatarState.imageError,
+    setImageError = _useAvatarState.setImageError;
+  return React__default.createElement(AvatarView, {
+    src: src,
+    size: size,
+    styles: styles,
+    fallback: fallback,
+    imageError: imageError,
+    setImageError: setImageError
+  });
+};
+var Avatar = AvatarComponent;
+
+var BadgeSizes = {
+  xs: {
+    minWidth: '20px',
+    height: '20px',
+    padding: '0 6px'
+  },
+  sm: {
+    minWidth: '24px',
+    height: '24px',
+    padding: '0 8px'
+  },
+  md: {
+    minWidth: '28px',
+    height: '28px',
+    padding: '0 10px'
+  },
+  lg: {
+    minWidth: '32px',
+    height: '32px',
+    padding: '0 12px'
+  },
+  xl: {
+    minWidth: '36px',
+    height: '36px',
+    padding: '0 14px'
+  }
+};
+var BadgeShapes = {
+  sharp: 0,
+  rounded: 4,
+  pillShaped: 24
+};
+// Example of how you might adjust styles based on the 'position' prop
+var PositionStyles = {
+  'top-right': {
+    top: 0,
+    right: 0,
+    position: 'absolute'
+  },
+  'top-left': {
+    top: 0,
+    left: 0,
+    position: 'absolute'
+  },
+  'bottom-right': {
+    bottom: 0,
+    right: 0,
+    position: 'absolute'
+  },
+  'bottom-left': {
+    bottom: 0,
+    left: 0,
+    position: 'absolute'
+  }
+};
+
+var BadgeView = function BadgeView(_ref) {
+  var content = _ref.content,
+    position = _ref.position,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'pillShaped' : _ref$shape,
+    _ref$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    styles = _ref.styles;
+  var BadgeVariants = {
+    filled: {
+      backgroundColor: colorScheme,
+      color: 'color.white',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'transparent'
+    },
+    outline: {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: colorScheme,
+      color: colorScheme
+    },
+    link: {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'transparent',
+      color: colorScheme,
+      textDecoration: 'underline'
+    },
+    ghost: {
+      backgroundColor: 'transparent',
+      color: colorScheme,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'transparent'
+    }
+  };
+  var combinedStyles = _extends({
+    width: 'fit-content',
+    borderRadius: BadgeShapes[shape]
+  }, BadgeSizes[size], BadgeVariants[variant], position ? PositionStyles[position] : {}, styles == null ? void 0 : styles.container);
+  return React__default.createElement(components.Center, Object.assign({
+    role: "badge"
+  }, combinedStyles), React__default.createElement(components.Text, Object.assign({
+    role: "badgeText",
+    size: size
+  }, styles == null ? void 0 : styles.text), content));
+};
+
+var Badge = function Badge(_ref) {
+  var content = _ref.content,
+    shape = _ref.shape,
+    colorScheme = _ref.colorScheme,
+    position = _ref.position,
+    variant = _ref.variant,
+    size = _ref.size,
+    styles = _ref.styles;
+  return React__default.createElement(BadgeView, {
+    content: content,
+    shape: shape,
+    colorScheme: colorScheme,
+    position: position,
+    variant: variant,
+    size: size,
+    styles: styles
+  });
+};
+
+var useToggleState = function useToggleState(defaultToggled) {
+  var _useState = React.useState(false),
+    isHovered = _useState[0],
+    setIsHovered = _useState[1];
+  var _useState2 = React.useState(defaultToggled),
+    isToggle = _useState2[0],
+    setIsToggled = _useState2[1];
+  return {
+    isHovered: isHovered,
+    setIsHovered: setIsHovered,
+    isToggle: isToggle,
+    setIsToggled: setIsToggled
+  };
+};
+
+var ToggleShapes = {
+  sharp: 0,
+  rounded: 4,
+  pillShaped: 24
+};
+
+var _excluded$C = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
+var ToggleView = function ToggleView(_ref) {
+  var children = _ref.children,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'rounded' : _ref$shape,
+    _ref$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? 'color.trueGray.400' : _ref$colorScheme,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'ghost' : _ref$variant,
+    isHovered = _ref.isHovered,
+    setIsHovered = _ref.setIsHovered,
+    isDisabled = _ref.isDisabled,
+    isToggle = _ref.isToggle,
+    setIsToggled = _ref.setIsToggled,
+    onToggle = _ref.onToggle,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+  var toggleColor = !isDisabled ? colorScheme : 'theme.disabled';
+  var isActive = !!(isToggle || isHovered);
+  var ToggleVariants = {
+    outline: {
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: colorScheme
+    },
+    link: {
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: isActive ? toggleColor : 'transparent',
+      textDecoration: 'underline'
+    },
+    ghost: {}
+  };
+  var handleToggle = function handleToggle() {
+    if (!isDisabled) {
+      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 React__default.createElement(components.Center, Object.assign({
+    role: "Toggle",
+    padding: shape === 'pillShaped' ? '10px 12px' : '8px',
+    width: "fit-content",
+    color: isActive ? 'color.white' : toggleColor,
+    backgroundColor: isActive ? toggleColor : 'transparent',
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    },
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    borderRadius: ToggleShapes[shape],
+    onClick: handleToggle
+  }, ToggleVariants[variant], props), children);
+};
+
+var _excluded$D = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
+var ToggleComponent = function ToggleComponent(_ref) {
+  var children = _ref.children,
+    shape = _ref.shape,
+    colorScheme = _ref.colorScheme,
+    variant = _ref.variant,
+    isDisabled = _ref.isDisabled,
+    _ref$isToggled = _ref.isToggled,
+    isToggled = _ref$isToggled === void 0 ? false : _ref$isToggled,
+    onToggle = _ref.onToggle,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+  var _useToggleState = useToggleState(isToggled),
+    isHovered = _useToggleState.isHovered,
+    setIsHovered = _useToggleState.setIsHovered,
+    isToggle = _useToggleState.isToggle,
+    setIsToggled = _useToggleState.setIsToggled;
+  React.useEffect(function () {
+    setIsToggled(isToggled);
+  }, [isToggled]);
+  return React__default.createElement(ToggleView, Object.assign({
+    shape: shape,
+    colorScheme: colorScheme,
+    variant: variant,
+    isDisabled: isDisabled,
+    isHovered: isHovered,
+    setIsHovered: setIsHovered,
+    isToggle: isToggle,
+    setIsToggled: setIsToggled,
+    onToggle: onToggle
+  }, props), children);
+};
+var Toggle = ToggleComponent;
+
+var useToggleGroupState = function useToggleGroupState() {
+  var _useState = React.useState([]),
+    activeToggles = _useState[0],
+    setActiveToggles = _useState[1];
+  return {
+    activeToggles: activeToggles,
+    setActiveToggles: setActiveToggles
+  };
+};
+
+var ToggleGroupView = function ToggleGroupView(_ref) {
+  var items = _ref.items,
+    onToggleChange = _ref.onToggleChange,
+    activeToggles = _ref.activeToggles,
+    setActiveToggles = _ref.setActiveToggles,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'rounded' : _ref$shape,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'ghost' : _ref$variant,
+    _ref$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? 'color.trueGray.400' : _ref$colorScheme;
+  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;
+        });
+      }
+      onToggleChange == null || onToggleChange(newActiveToggles);
+      return newActiveToggles;
+    });
+  }, [onToggleChange, setActiveToggles]);
+  return React__default.createElement(components.Horizontal, {
+    role: "ToggleGroup",
+    display: "flex",
+    gap: 5
+  }, items.map(function (item) {
+    return React__default.createElement(components.Toggle, {
+      role: "toggle-" + item.id,
+      key: item.id,
+      colorScheme: colorScheme,
+      shape: shape,
+      variant: variant,
+      isToggled: activeToggles.includes(item.id) || item.isActive,
+      onToggle: function onToggle(state) {
+        return handleToggle(item.id, state);
+      },
+      isDisabled: item.isDisabled,
+      isIntern: true
+    }, item.value);
+  }));
+};
+
+var ToggleGroupComponent = function ToggleGroupComponent(_ref) {
+  var items = _ref.items,
+    shape = _ref.shape,
+    colorScheme = _ref.colorScheme,
+    variant = _ref.variant,
+    onToggleChange = _ref.onToggleChange;
+  var _useToggleGroupState = useToggleGroupState(),
+    activeToggles = _useToggleGroupState.activeToggles,
+    setActiveToggles = _useToggleGroupState.setActiveToggles;
+  return React__default.createElement(ToggleGroupView, {
+    items: items,
+    shape: shape,
+    colorScheme: colorScheme,
+    variant: variant,
+    activeToggles: activeToggles,
+    setActiveToggles: setActiveToggles,
+    onToggleChange: onToggleChange
+  });
+};
+var ToggleGroup = ToggleGroupComponent;
+
+exports.Alert = Alert;
+exports.AspectRatio = AspectRatio;
+exports.Avatar = Avatar;
+exports.Badge = Badge;
 exports.Bottom = Bottom;
 exports.Button = Button;
 exports.Center = Center;
@@ -4963,9 +5598,12 @@ exports.Password = Password;
 exports.Right = Right;
 exports.Select = Select;
 exports.Switch = Switch;
+exports.Tabs = Tabs;
 exports.Text = Text;
 exports.TextArea = TextArea;
 exports.TextField = TextField;
+exports.Toggle = Toggle;
+exports.ToggleGroup = ToggleGroup;
 exports.Top = Top;
 exports.Vertical = Vertical;
 exports.View = View;