@app-studio/web 0.9.80 → 0.9.81

package/dist/components/Accordion/Accordion/Accordion.type.d.ts

@@ -1,5 +1,5 @@
 import { ViewProps } from 'app-studio';
-export declare type Shape = 'sharp' | 'rounded';
+export declare type Shape = 'square' | 'rounded';
 export declare type Variant = 'default' | 'outline' | 'filled';
 export declare type AccordionType = 'single' | 'multiple';
 export interface AccordionContextType {

package/dist/components/Accordion/Accordion/Accordion.view.d.ts

@@ -23,7 +23,7 @@ export declare const AccordionContent: React.FC<AccordionContentProps & {
 }>;
 export declare const AccordionView: React.FC<{
     children: React.ReactNode;
-    shape?: 'sharp' | 'rounded';
+    shape?: 'square' | 'rounded';
     variant?: 'default' | 'outline' | 'filled';
     views?: any;
     baseId: string;

package/dist/components/Badge/Badge/Badge.type.d.ts

@@ -1,5 +1,5 @@
 import { ViewProps } from 'app-studio';
-export declare type Shape = 'sharp' | 'rounded' | 'pillShaped';
+export declare type Shape = 'square' | 'rounded' | 'pill';
 export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type Variant = 'filled' | 'outline' | 'link' | 'ghost';
 export declare type Position = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';

package/dist/components/Card/Card/Card.type.d.ts

@@ -1,7 +1,7 @@
 import { ViewProps } from 'app-studio';
 export declare type Variant = 'default' | 'outlined' | 'elevated';
 export declare type Size = 'sm' | 'md' | 'lg';
-export declare type Shape = 'sharp' | 'rounded' | 'pillShaped';
+export declare type Shape = 'square' | 'rounded' | 'pill';
 export interface CardStyles {
     container?: ViewProps;
     header?: ViewProps;

package/dist/components/ChatInput/ChatInput/ChatInput.type.d.ts

@@ -6,7 +6,7 @@ export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * Shape options for the ChatInput component
  */
-export declare type Shape = 'default' | 'sharp' | 'rounded';
+export declare type Shape = 'default' | 'square' | 'rounded';
 /**
  * Variant options for the ChatInput component
  */

package/dist/components/ColorPicker/ColorPicker/ColorPicker.type.d.ts

@@ -1,6 +1,6 @@
 import { ViewProps } from 'app-studio';
 export declare type Variant = 'outline' | 'default' | 'filled';
-export declare type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
+export declare type Shape = 'default' | 'square' | 'rounded' | 'pill';
 export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type ColorPickerStyles = {
     container?: ViewProps;

package/dist/components/EmojiPicker/EmojiPicker/EmojiPicker.type.d.ts

@@ -1,6 +1,6 @@
 import { ViewProps } from 'app-studio';
 export declare type Variant = 'outline' | 'default' | 'filled';
-export declare type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
+export declare type Shape = 'default' | 'square' | 'rounded' | 'pill';
 export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type EmojiPickerStyles = {
     container?: ViewProps;

package/dist/components/Form/ColorInput/ColorInput/ColorInput.type.d.ts

@@ -1,6 +1,6 @@
 import { ViewProps } from 'app-studio';
 export declare type Variant = 'outline' | 'default' | 'none';
-export declare type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
+export declare type Shape = 'default' | 'square' | 'rounded' | 'pill';
 export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type ColorInputStyles = {
     text?: ViewProps;

package/dist/components/Form/TagInput/TagInput/TagInput.type.d.ts

@@ -6,7 +6,7 @@ export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * Shape options for the TagInput component
  */
-export declare type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
+export declare type Shape = 'default' | 'square' | 'rounded' | 'pill';
 /**
  * Variant options for the TagInput component
  */

package/dist/components/Form/TextArea/TextArea/TextArea.type.d.ts

@@ -1,6 +1,6 @@
 import { ViewProps } from 'app-studio';
 export declare type Variant = 'outline' | 'default' | 'none';
-export declare type Shape = 'default' | 'sharp' | 'rounded';
+export declare type Shape = 'default' | 'square' | 'rounded';
 export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type TextAreaStyles = {
     warper?: ViewProps;

package/dist/components/Input/Input.type.d.ts

@@ -1,6 +1,6 @@
 import { ViewProps } from 'app-studio';
 export declare type Variant = 'outline' | 'default' | 'none';
-export declare type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
+export declare type Shape = 'default' | 'square' | 'rounded' | 'pill';
 export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type TextFieldStyles = {
     text?: ViewProps;

package/dist/components/Message/Message/Message.type.d.ts

@@ -1,6 +1,6 @@
 import { ViewProps } from 'app-studio';
 export declare type Position = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
-export declare type Shape = 'sharp' | 'rounded';
+export declare type Shape = 'square' | 'rounded';
 export declare type CloseButtonPosition = 'left' | 'right' | 'none';
 export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type MessageType = 'info' | 'warning' | 'error' | 'success';

package/dist/components/Modal/Modal/Modal.props.d.ts

@@ -12,7 +12,7 @@ export interface ModalProps extends Omit<ViewProps, 'size'> {
      */
     iconSize?: Size;
     /**
-     * Determines whether the modal should have sharp or rounded edges.
+     * Determines whether the modal should have square or rounded edges.
      */
     shape?: Shape;
     /**
@@ -142,7 +142,7 @@ export interface ContainerProps extends Omit<ViewProps, 'size'> {
      */
     children: React.ReactNode;
     /**
-     * To give a sharp or rounded edges to the modal
+     * To give a square or rounded edges to the modal
      */
     shape?: Shape;
     /**

package/dist/components/Slider/Slider/Slider.type.d.ts

@@ -1,5 +1,5 @@
 import { ViewProps, TextProps } from 'app-studio';
-export declare type Shape = 'sharp' | 'rounded' | 'pillShaped';
+export declare type Shape = 'square' | 'rounded' | 'pill';
 export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type Variant = 'default' | 'outline';
 export declare type Orientation = 'horizontal' | 'vertical';

package/dist/components/Title/Title/Title.props.d.ts

@@ -116,9 +116,4 @@ export interface TitleProps extends ViewProps {
      * @default 3000
      */
     alternateDuration?: number;
-    /**
-     * Component to use for rendering text content
-     * Defaults to Text from app-studio
-     */
-    textComponent?: any;
 }

package/dist/components/Toggle/Toggle/Toggle.type.d.ts

@@ -1,2 +1,2 @@
-export declare type Shape = 'sharp' | 'rounded' | 'pillShaped';
+export declare type Shape = 'square' | 'rounded' | 'pill';
 export declare type Variant = 'outline' | 'link' | 'ghost';

package/dist/components/ToggleGroup/ToggleGroup/ToggleGroup.type.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type Shape = 'sharp' | 'rounded' | 'pillShaped';
+export declare type Shape = 'square' | 'rounded' | 'pill';
 export declare type Variant = 'outline' | 'link' | 'ghost';
 export declare type ToggleItem = {
     id: string;

package/dist/pages/tabs.page.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const TabsPage: () => React.JSX.Element;
+declare const TabsPage: () => React.JSX.Element;
 export default TabsPage;

package/dist/web.cjs.development.js

@@ -184,7 +184,7 @@ var useAccordionState = _ref => {
 };
 
 var AccordionShapes = {
-  sharp: {
+  square: {
     borderRadius: 0
   },
   rounded: {
@@ -1299,17 +1299,14 @@ var MessageView = _ref => {
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
     size: "md",
-    weight: "semiBold",
-    backgroundColor: Theme[variant].container.backgroundColor
+    weight: "semiBold"
   }, views == null ? void 0 : views.title), title), subtitle && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
-    size: "sm",
-    backgroundColor: Theme[variant].container.backgroundColor
+    size: "sm"
   }, views == null ? void 0 : views.subtitle), subtitle))), showAction && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
     marginRight: 10,
     onClick: action,
     padding: "6px 10px",
-    whiteSpace: "nowrap",
-    backgroundColor: Theme[variant].container.backgroundColor
+    whiteSpace: "nowrap"
   }, containerStyle, views == null ? void 0 : views.actionText), actionText)), isClosable && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     position: "absolute",
     zIndex: 10000,
@@ -2297,9 +2294,9 @@ var BadgeSizes = {
  * Badge shapes with consistent border radius
  */
 var BadgeShapes = {
-  sharp: 0,
+  square: 0,
   rounded: '8px',
-  pillShaped: '9999px'
+  pill: '9999px'
 };
 /**
  * Badge positions for absolute positioning
@@ -2377,7 +2374,7 @@ var BadgeView = _ref => {
   var {
       content,
       position,
-      shape = 'pillShaped',
+      shape = 'pill',
       variant = 'filled',
       size = 'md',
       views,
@@ -2751,9 +2748,9 @@ var ButtonSizes = {
  * Button shapes with consistent border radius
  */
 var ButtonShapes = {
-  sharp: 0,
+  square: 0,
   rounded: 8,
-  pillShaped: 999
+  pill: 999
 };
 /**
  * Icon sizes for different button sizes
@@ -3426,9 +3423,9 @@ var CardSizes = {
  * Card shapes with consistent border radius
  */
 var CardShapes = {
-  sharp: 0,
+  square: 0,
   rounded: '8px',
-  pillShaped: '24px'
+  pill: '24px'
 };
 /**
  * Get card variants with consistent styling based on theme mode
@@ -3588,7 +3585,9 @@ var CardView = _ref4 => {
   // Prepare context value, merging default styles with user's `views` overrides
   var contextValue = React.useMemo(() => ({
     styles: {
-      container: Object.assign({}, defaultStyles.container, views == null ? void 0 : views.container),
+      container: Object.assign({}, defaultStyles.container, {
+        borderRadius: CardShapes[shape]
+      }, views == null ? void 0 : views.container),
       header: Object.assign({}, defaultStyles.header, {
         padding: sizePadding
       }, views == null ? void 0 : views.header),
@@ -3599,7 +3598,7 @@ var CardView = _ref4 => {
         padding: sizePadding
       }, views == null ? void 0 : views.footer)
     }
-  }), [defaultStyles, views, sizePadding]);
+  }), [defaultStyles, views, sizePadding, shape]);
   // Determine if we have explicit Card.Header, Card.Content, Card.Footer components
   var hasExplicitStructure = React__default.Children.toArray(children).some(child => /*#__PURE__*/React__default.isValidElement(child) && (child.type === CardHeader || child.type === CardContent || child.type === CardFooter));
   // Get the appropriate variant styles based on theme mode
@@ -3611,7 +3610,6 @@ var CardView = _ref4 => {
   // Merge styles for the root element
   var mergedRootProps = Object.assign({
     width: isFullWidth ? '100%' : 'auto',
-    borderRadius: CardShapes[shape],
     overflow: 'hidden'
   }, variantStyles, contextValue.styles.container, props, {
     style: Object.assign({}, (_contextValue$styles$ = contextValue.styles.container) == null ? void 0 : _contextValue$styles$.style, style)
@@ -6408,7 +6406,7 @@ var Shapes = {
       }
     }
   },
-  sharp: {
+  square: {
     borderRadius: 0
   },
   rounded: {
@@ -6419,7 +6417,7 @@ var Shapes = {
       }
     }
   },
-  pillShaped: {
+  pill: {
     borderRadius: '9999px'
   }
 };
@@ -8569,13 +8567,13 @@ var Shapes$1 = {
   default: {
     borderRadius: '6px'
   },
-  sharp: {
+  square: {
     borderRadius: '0px'
   },
   rounded: {
     borderRadius: '8px'
   },
-  pillShaped: {
+  pill: {
     borderRadius: '9999px'
   }
 };
@@ -11263,9 +11261,6 @@ var TagChip = _ref => {
     isReadOnly
   } = _ref;
   var [isRemoveHovered, setIsRemoveHovered] = React__default.useState(false);
-  var {
-    getColor
-  } = appStudio.useTheme();
   var chipSize = {
     xs: {
       padding: '2px 8px',
@@ -11301,24 +11296,23 @@ var TagChip = _ref => {
     alignItems: "center",
     gap: 6,
     padding: chipSize.padding,
-    backgroundColor: "color.gray.100",
+    backgroundColor: "color.gray.100.100",
     borderRadius: "16px",
     borderWidth: "1px",
     borderStyle: "solid",
-    borderColor: "color.gray.300",
+    borderColor: "color.gray.100",
     boxShadow: "0 1px 2px rgba(0,0,0,0.05)",
     transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
     opacity: isDisabled ? 0.6 : 1,
     _hover: !isDisabled && !isReadOnly ? {
-      backgroundColor: 'color.gray.200',
-      borderColor: 'color.gray.400',
+      backgroundColor: 'color.gray.100.200',
+      borderColor: 'color.gray.200',
       boxShadow: '0 4px 6px rgba(0,0,0,0.05)',
       transform: 'translateY(-1px)'
     } : {}
   }, views == null ? void 0 : views.tag), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
     fontSize: chipSize.fontSize,
-    color: isDisabled ? 'color.gray.400' : 'theme.primary',
-    fontWeight: "bold",
+    color: isDisabled ? 'color.gray.100' : 'theme.primary',
     whiteSpace: "nowrap"
   }, views == null ? void 0 : views.tagText), tag), isRemovable && !isDisabled && !isReadOnly && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     cursor: "pointer",
@@ -12813,7 +12807,7 @@ var Shapes$2 = {
   default: {
     borderRadius: '8px'
   },
-  sharp: {
+  square: {
     borderRadius: '0px'
   },
   rounded: {
@@ -14480,9 +14474,9 @@ var ThumbSizes = {
   }
 };
 var SliderShapes = {
-  sharp: 0,
+  square: 0,
   rounded: 4,
-  pillShaped: 24
+  pill: 24
 };
 var getSlider = themeMode => {
   return {
@@ -15296,7 +15290,7 @@ var hideModal = name => {
  * Following the 4px grid system
  */
 var ContainerShapes = {
-  sharp: {
+  square: {
     borderRadius: 0
   },
   rounded: {
@@ -16745,30 +16739,25 @@ var TabHeader = _ref => {
     textStyles
   } = _ref;
   // Base styles for the tab header
+  // Base styles for the tab header
   var baseStyles = {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: '10px 16px',
+    padding: '12px 16px',
     cursor: 'pointer',
-    borderTopLeftRadius: '4px',
-    borderTopRightRadius: '4px',
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: isActive ? 'theme.primary' : 'transparent',
-    borderBottomColor: isActive ? 'transparent' : 'color.gray.200',
-    backgroundColor: isActive ? 'color.white' : 'transparent',
+    borderBottom: '2px solid',
+    borderBottomColor: isActive ? 'theme.primary' : 'transparent',
+    backgroundColor: 'transparent',
     color: isActive ? 'theme.primary' : 'color.gray.600',
-    fontWeight: 'normal',
-    position: 'relative',
-    // If active, show a bottom border that matches the background color
-    // to create the illusion that the tab is connected to the content
+    fontWeight: isActive ? '600' : '500',
+    marginBottom: '-1px',
+    transition: 'all 0.2s ease',
     // Hover state
     on: {
       hover: {
-        color: 'theme.primary'
+        color: 'theme.primary',
+        borderBottomColor: isActive ? 'theme.primary' : 'color.gray.300'
       }
     }
   };
@@ -16830,7 +16819,11 @@ var TabsView = _ref => {
     React__default.createElement(appStudio.Vertical, Object.assign({
       width: "100%",
       height: '100%'
-    }, views.container), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({}, views.headerTabs), tabs.map(tab => {
+    }, views.container), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+      width: "100%",
+      borderBottom: "1px solid",
+      borderBottomColor: "color.gray.200"
+    }, views.headerTabs), tabs.map(tab => {
       // Determine if the current tab in the loop is the active one
       var isActive = tab.title === activeTab.title;
       // Prepare the onClick handler for this specific tab
@@ -17404,7 +17397,7 @@ var SlideEffect = _ref => {
   }))))));
 };
 
-var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential", "themeMode", "textComponent"];
+var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential", "themeMode"];
 function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
@@ -17435,8 +17428,7 @@ var TitleView = _ref => {
       highlightSlideDuration = 500,
       highlightSlideStagger = 50,
       highlightSlideSequential = true,
-      themeMode: elementMode,
-      textComponent
+      themeMode: elementMode
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   var {
@@ -17490,7 +17482,6 @@ var TitleView = _ref => {
     highlightSlideStagger,
     highlightSlideSequential
   }, props));
-  var TextComponent = textComponent || appStudio.Text;
   var fontSize = TitleSizes[size];
   // Highlight style props
   var highlightProps = HighlightStyles[highlightStyle](resolvedHighlightColor, resolvedHighlightSecondaryColor);
@@ -17511,13 +17502,12 @@ var TitleView = _ref => {
   // Get the text to display
   var text = typeof finalDisplayedText === 'string' ? finalDisplayedText : typeof children === 'string' ? children : '';
   // Common container props
-  var containerProps = Object.assign({
+  var containerProps = {
     ref,
-    animate: inView ? controlledAnimate : undefined
-  }, !textComponent && {
+    animate: inView ? controlledAnimate : undefined,
     as: 'h1',
     fontSize
-  });
+  };
   // Render highlighted text content (typewriter, slide, or plain)
   var renderHighlightedContent = content => {
     // If animations are enabled but not in view, render invisible placeholder
@@ -17533,8 +17523,7 @@ var TitleView = _ref => {
       return /*#__PURE__*/React__default.createElement(TypewriterEffect, Object.assign({
         text: content,
         typingSpeed: Math.max(30, highlightTypewriterDuration / (content.length * 10)),
-        cursorColor: "currentColor",
-        textComponent: TextComponent
+        cursorColor: "currentColor"
       }, highlightProps));
     }
     if (highlightSlide) {
@@ -17545,8 +17534,7 @@ var TitleView = _ref => {
         sequential: stateHighlightSlideSequential,
         direction: "up",
         fontSize: fontSize,
-        wordProps: highlightProps,
-        textComponent: TextComponent
+        wordProps: highlightProps
       });
     }
     return renderWithLineBreaks(content);
@@ -17566,13 +17554,11 @@ var TitleView = _ref => {
       lastIndex = match.index + match[0].length;
     }
     if (lastIndex < text.length) parts.push(text.substring(lastIndex));
-    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-      fontSize: fontSize
-    }, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? (/*#__PURE__*/React__default.createElement(TextComponent, {
+    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? (/*#__PURE__*/React__default.createElement(appStudio.Text, {
       key: "text-" + idx,
       as: "span",
       display: "inline"
-    }, renderWithLineBreaks(part))) : (/*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
+    }, renderWithLineBreaks(part))) : (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       key: "highlight-" + idx,
       as: "span",
       display: "inline",
@@ -17581,16 +17567,14 @@ var TitleView = _ref => {
   }
   // Case 2: Has highlight style but no highlight target - apply style to entire title
   if (highlightStyle && !activeHighlightTarget) {
-    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-      fontSize: fontSize
-    }, containerProps, props, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
+    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       as: "span",
       display: "inline",
       animate: inView ? controlledHighlightAnimate : undefined
     }, !highlightSlide ? highlightProps : {}, views == null ? void 0 : views.highlight), renderHighlightedContent(text)));
   }
   // Case 3: Default - no highlighting
-  return /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), renderWithLineBreaks(text));
+  return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), renderWithLineBreaks(text));
 };
 
 /**
@@ -17656,9 +17640,9 @@ var useToggleState = defaultToggled => {
 };
 
 var ToggleShapes = {
-  sharp: 0,
+  square: 0,
   rounded: 4,
-  pillShaped: 24
+  pill: 24
 };
 /**
  * Generate toggle variants with proper color combinations based on main color and contrast
@@ -17775,7 +17759,7 @@ var ToggleView = _ref => {
   };
   return /*#__PURE__*/React__default.createElement(appStudio.Center, Object.assign({
     role: "Toggle",
-    padding: shape === 'pillShaped' ? '10px 12px' : '8px',
+    padding: shape === 'pill' ? '10px 12px' : '8px',
     width: "fit-content",
     cursor: isDisabled ? 'not-allowed' : 'pointer',
     borderRadius: ToggleShapes[shape],
@@ -18684,13 +18668,13 @@ var Shapes$3 = {
   default: {
     borderRadius: '8px'
   },
-  sharp: {
+  square: {
     borderRadius: 0
   },
   rounded: {
     borderRadius: '8px'
   },
-  pillShaped: {
+  pill: {
     borderRadius: '9999px'
   }
 };
@@ -19152,13 +19136,13 @@ var Shapes$4 = {
   default: {
     borderRadius: '8px'
   },
-  sharp: {
+  square: {
     borderRadius: 0
   },
   rounded: {
     borderRadius: '8px'
   },
-  pillShaped: {
+  pill: {
     borderRadius: '9999px'
   }
 };