feat(docs): link done

apps/docs/components/sandpack/language-selector.tsx

@@ -22,7 +22,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onC
     <Tabs
       aria-label="Language selector"
       classNames={{
-        base: "absolute right-3 bottom-10",
+        base: "absolute right-3 bottom-4",
         cursor: "bg-zinc-400 dark:bg-zinc-700",
         tabList:
           "bg-transparent relative before:bg-white/5 before:w-full before:rounded-lg before:h-full before:content-[''] before:block before:z-1 before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100",
@@ -32,7 +32,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onC
       size="xs"
       onSelectionChange={handleToggle}
     >
-      <Tab key="vite-react-ts" title={<TypescriptIcon className="text-lg text-[#93adcb]" />} />
+      <Tab key="vite-react-ts" title={<TypescriptIcon className="text-lg text-[#3b69ff]" />} />
       <Tab key="vite-react" title={<JavascriptIcon className="text-lg  text-[#dbbe82]" />} />
     </Tabs>
   );

apps/docs/content/components/accordion/compact.ts

@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =

apps/docs/content/components/accordion/controlled.ts

@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const [selectedKeys, setSelectedKeys] = React.useState(new Set(["1"]));

apps/docs/content/components/accordion/custom-motion.ts

@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =

apps/docs/content/components/accordion/custom-styles.ts

@@ -182,11 +182,11 @@ const InvalidCardIcon = `export const InvalidCardIcon = (props) => (
   </svg>
 );`;
 
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-import { MonitorMobileIcon } from "./MonitorMobileIcon";
+import {MonitorMobileIcon} from "./MonitorMobileIcon";
-import { ShieldSecurityIcon } from "./ShieldSecurityIcon";
+import {ShieldSecurityIcon} from "./ShieldSecurityIcon";
-import { InfoIcon } from "./InfoIcon";
+import {InfoIcon} from "./InfoIcon";
-import { InvalidCardIcon } from "./InvalidCardIcon";
+import {InvalidCardIcon} from "./InvalidCardIcon";
 
 export default function App() {
   const itemStyles = {

apps/docs/content/components/accordion/default-expanded-keys.ts

@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =

apps/docs/content/components/accordion/disabled-keys.ts

@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =

apps/docs/content/components/accordion/indicator-function.ts

@@ -71,10 +71,10 @@ const SunIcon = `export const SunIcon = (props) => (
   </svg>
 );`;
 
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-import { AnchorIcon } from "./AnchorIcon";
+import {AnchorIcon} from "./AnchorIcon";
-import { MoonIcon } from "./MoonIcon";
+import {MoonIcon} from "./MoonIcon";
-import { SunIcon } from "./SunIcon";
+import {SunIcon} from "./SunIcon";
 
 export default function App() {
   const defaultContent =

apps/docs/content/components/accordion/indicator.ts

@@ -71,10 +71,10 @@ const SunIcon = `export const SunIcon = (props) => (
   </svg>
 );`;
 
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-import { AnchorIcon } from './AnchorIcon';
+import {AnchorIcon} from './AnchorIcon';
-import { MoonIcon } from './MoonIcon';
+import {MoonIcon} from './MoonIcon';
-import { SunIcon } from './SunIcon';
+import {SunIcon} from './SunIcon';
 
 export default function App() {
   const defaultContent =

apps/docs/content/components/accordion/multiple.ts

@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =

apps/docs/content/components/accordion/start-content.ts

@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem, Avatar } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem, Avatar} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =

apps/docs/content/components/accordion/subtitle.ts

@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =

apps/docs/content/components/accordion/usage.ts

@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =

apps/docs/content/components/accordion/variants.ts

@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =

apps/docs/content/components/avatar/bordered.ts

@@ -1,4 +1,4 @@
-const App = `import { Avatar } from "@nextui-org/react";
+const App = `import {Avatar} from "@nextui-org/react
 
 export default function App() {
   return (

apps/docs/content/components/avatar/colors.ts

@@ -1,4 +1,4 @@
-const App = `import { Avatar } from "@nextui-org/react";
+const App = `import {Avatar} from "@nextui-org/react
 
 export default function App() {
   return (

apps/docs/content/components/avatar/custom-fallback.ts

@@ -18,8 +18,8 @@ const CameraIcon = `export const CameraIcon = ({fill, size, height, width, ...pr
   );
 };`;
 
-const App = `import { Avatar } from "@nextui-org/react";
+const App = `import {Avatar} from "@nextui-org/react
-import { CameraIcon } from './CameraIcon';
+import {CameraIcon} from './CameraIcon';
 
 export default function App() {
   return (

apps/docs/content/components/avatar/custom-impl.ts

@@ -1,7 +1,7 @@
-const App = `import { forwardRef } from "react";
+const App = `import {forwardRef} from "react";
-import { useMemo } from "react";
+import {useMemo} from "react";
 
-import { AvatarIcon, useAvatar } from "@nextui-org/react";
+import {AvatarIcon, useAvatar} from "@nextui-org/react";
 
 const MyAvatar = forwardRef((props, ref) => {
   const {
@@ -61,9 +61,9 @@ Avatar.displayName = "MyAvatar";
 
 export default MyAvatar;`;
 
-const AppTs = `import { forwardRef, useMemo } from "react";
+const AppTs = `import {forwardRef, useMemo} from "react";
 
-import { AvatarIcon, useAvatar, AvatarProps as BaseAvatarProps } from "@nextui-org/react";
+import {AvatarIcon, useAvatar, AvatarProps as BaseAvatarProps} from "@nextui-org/react";
 
 export interface AvatarProps extends BaseAvatarProps {}
 

apps/docs/content/components/avatar/custom.ts

@@ -1,4 +1,4 @@
-const App = `import { Avatar, AvatarIcon } from "@nextui-org/react";
+const App = `import {Avatar, AvatarIcon} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/avatar/disabled.ts

@@ -1,4 +1,4 @@
-const App = `import { Avatar } from "@nextui-org/react";
+const App = `import {Avatar} from "@nextui-org/react
 
 export default function App() {
   return (

apps/docs/content/components/avatar/fallbacks.ts

@@ -1,4 +1,4 @@
-const App = `import { Avatar } from "@nextui-org/react";
+const App = `import {Avatar} from "@nextui-org/react
 
 export default function App() {
   return (

apps/docs/content/components/avatar/group-custom-count.ts

@@ -1,4 +1,4 @@
-const App = `import { Avatar, AvatarGroup } from "@nextui-org/react";
+const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/avatar/group-disabled.ts

@@ -1,4 +1,4 @@
-const App = `import { Avatar, AvatarGroup } from "@nextui-org/react";
+const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/avatar/group-grid.ts

@@ -1,4 +1,4 @@
-const App = `import { Avatar, AvatarGroup } from "@nextui-org/react";
+const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/avatar/group-max.ts

@@ -1,4 +1,4 @@
-const App = `import { Avatar, AvatarGroup } from "@nextui-org/react";
+const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/avatar/group-total.ts

@@ -1,4 +1,4 @@
-const App = `import { Avatar, AvatarGroup } from "@nextui-org/react";
+const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/avatar/group.ts

@@ -1,4 +1,4 @@
-const App = `import { Avatar, AvatarGroup } from "@nextui-org/react";
+const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/avatar/radius.ts

@@ -1,4 +1,4 @@
-const App = `import { Avatar } from "@nextui-org/react";
+const App = `import {Avatar} from "@nextui-org/react
 
 export default function App() {
   return (

apps/docs/content/components/avatar/sizes.ts

@@ -1,4 +1,4 @@
-const App = `import { Avatar } from "@nextui-org/react";
+const App = `import {Avatar} from "@nextui-org/react
 
 export default function App() {
   return (

apps/docs/content/components/avatar/usage.ts

@@ -1,4 +1,4 @@
-const App = `import { Avatar } from "@nextui-org/react";
+const App = `import {Avatar} from "@nextui-org/react
 
 export default function App() {
   return (

apps/docs/content/components/badge/a11y.ts

@@ -18,8 +18,8 @@ export const NotificationIcon = `export const NotificationIcon = ({size, height,
   );
 };`;
 
-const App = `import { Badge, Button } from "@nextui-org/react";
+const App = `import {Badge, Button} from "@nextui-org/react";
-import { NotificationIcon } from "./NotificationIcon";
+import {NotificationIcon} from "./NotificationIcon";
 
 export default function App() {
   return (

apps/docs/content/components/badge/colors.ts

@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/badge/content-examples.ts

@@ -44,9 +44,9 @@ export const CheckIcon = `export const CheckIcon = ({
   );
 };`;
 
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
-import { NotificationIcon } from "./NotificationIcon";
+import {NotificationIcon} from "./NotificationIcon";
-import { CheckIcon } from "./CheckIcon";
+import {CheckIcon} from "./CheckIcon";
 
 export default function App() {
   return (

apps/docs/content/components/badge/disable-outline.ts

@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/badge/placements.ts

@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/badge/radius.ts

@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/badge/shapes.ts

@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/badge/sizes.ts

@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/badge/usage.ts

@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/badge/variants.ts

@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/badge/visibility.ts

@@ -48,9 +48,9 @@ export const CartIcon = `export const CartIcon = ({ size, height, width, ...prop
   );
 };`;
 
-const App = `import { Badge, Avatar, Switch } from "@nextui-org/react";
+const App = `import {Badge, Avatar, Switch} from "@nextui-org/react";
-import { NotificationIcon } from "./NotificationIcon";
+import {NotificationIcon} from "./NotificationIcon";
-import { CartIcon } from "./CartIcon";
+import {CartIcon} from "./CartIcon";
 
 export default function App() {
   const [isInvisible, setIsInvisible] = React.useState(false);

apps/docs/content/components/button/colors.ts

@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/button/custom-impl.ts

@@ -1,6 +1,6 @@
-const App = `import { forwardRef } from "react";
+const App = `import {forwardRef} from "react";
 
-import { useButton, Drip, Spinner } from "@nextui-org/react";
+import {useButton, Drip, Spinner} from "@nextui-org/react";
 
 const MyButton = forwardRef((props, ref) => {
   const {
@@ -37,9 +37,9 @@ MyButton.displayName = "MyButton";
 
 export default MyButton;`;
 
-const AppTs = `import { forwardRef } from "react";
+const AppTs = `import {forwardRef} from "react";
 
-import { useButton, Drip, Spinner, ButtonProps as BaseButtonProps } from "@nextui-org/react";
+import {useButton, Drip, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react";
 
 export interface ButtonProps extends BaseButtonProps {}
 

apps/docs/content/components/button/custom-styles.ts

@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/button/disabled.ts

@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/button/group-disabled.ts

@@ -1,4 +1,4 @@
-const App = `import { Button, ButtonGroup } from "@nextui-org/react";
+const App = `import {Button, ButtonGroup} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/button/group-use-case.ts

@@ -4,8 +4,8 @@ const ChevronDownIcon = `export const ChevronDownIcon = () => (
   </svg>
 );`;
 
-const App = `import { Button, ButtonGroup, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from "@nextui-org/react";
+const App = `import {Button, ButtonGroup, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem} from "@nextui-org/react";
-import { ChevronDownIcon } from './ChevronDownIcon';
+import {ChevronDownIcon} from './ChevronDownIcon';
 
 export default function App() {
   const [selectedOption, setSelectedOption] = React.useState(new Set(["merge"]));

apps/docs/content/components/button/group.ts

@@ -1,4 +1,4 @@
-const App = `import { Button, ButtonGroup } from "@nextui-org/react";
+const App = `import {Button, ButtonGroup} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/button/icon-only.ts

@@ -56,9 +56,9 @@ const CameraIcon = `export const CameraIcon = ({
   );
 };`;
 
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
-import { HeartIcon } from './HeartIcon';
+import {HeartIcon} from './HeartIcon';
-import { CameraIcon } from './CameraIcon';
+import {CameraIcon} from './CameraIcon';
 
 export default function App() {
   return (

apps/docs/content/components/button/icons.ts

@@ -65,9 +65,9 @@ const CameraIcon = `export const CameraIcon = ({
   );
 };`;
 
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
-import { UserIcon } from './UserIcon';
+import {UserIcon} from './UserIcon';
-import { CameraIcon } from './CameraIcon';
+import {CameraIcon} from './CameraIcon';
 
 export default function App() {
   return (

apps/docs/content/components/button/loading.ts

@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/button/radius.ts

@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/button/sizes.ts

@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/button/usage.ts

@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/button/variants.ts

@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/card/blurred-footer.ts

@@ -1,4 +1,4 @@
-const App = `import { Card, CardFooter, Image, Button } from "@nextui-org/react";
+const App = `import {Card, CardFooter, Image, Button} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/card/blurred.ts

@@ -140,13 +140,13 @@ const ShuffleIcon = `export const ShuffleIcon = ({size = 24, width, height, ...p
   </svg>
 );`;
 
-const App = `import { Card, CardFooter, Image, Button, Progress } from "@nextui-org/react";
+const App = `import {Card, CardFooter, Image, Button, Progress} from "@nextui-org/react";
-import { HeartIcon } from "./HeartIcon";
+import {HeartIcon} from "./HeartIcon";
-import { PauseCircleIcon } from "./PauseCircleIcon";
+import {PauseCircleIcon} from "./PauseCircleIcon";
-import { NextIcon } from "./NextIcon";
+import {NextIcon} from "./NextIcon";
-import { PreviousIcon } from "./PreviousIcon";
+import {PreviousIcon} from "./PreviousIcon";
-import { RepeatOneIcon } from "./RepeatOneIcon";
+import {RepeatOneIcon} from "./RepeatOneIcon";
-import { ShuffleIcon } from "./ShuffleIcon";
+import {ShuffleIcon} from "./ShuffleIcon";
 
 export default function App() {
   const [liked, setLiked] = React.useState(false);

apps/docs/content/components/card/composition.ts

@@ -1,4 +1,4 @@
-const App = `import { Card, CardHeader, CardBody, Avatar, Button } from "@nextui-org/react";
+const App = `import {Card, CardHeader, CardBody, Avatar, Button} from "@nextui-org/react";
 
 export default function App() {
   const [isFollowed, setIsFollowed] = React.useState(false);

apps/docs/content/components/card/cover-image.ts

@@ -1,4 +1,4 @@
-const App = `import { Card, CardHeader, CardBody, CardFooter, Image, Button } from "@nextui-org/react";
+const App = `import {Card, CardHeader, CardBody, CardFooter, Image, Button} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/card/divider.ts

@@ -1,4 +1,4 @@
-const App = `import { Card, CardHeader, CardBody, CardFooter, Divider, Link, Image } from "@nextui-org/react";
+const App = `import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/card/image.ts

@@ -1,4 +1,4 @@
-const App = `import { Card, CardHeader, CardBody, Image } from "@nextui-org/react";
+const App = `import {Card, CardHeader, CardBody, Image} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/card/primary-action.ts

@@ -1,4 +1,4 @@
-const App = `import { Card, CardBody, CardFooter, Image } from "@nextui-org/react";
+const App = `import {Card, CardBody, CardFooter, Image} from "@nextui-org/react";
 
 export default function App() {
   const list = [

apps/docs/content/components/card/usage.ts

@@ -1,4 +1,4 @@
-const App = `import { Card, CardBody } from "@nextui-org/react";
+const App = `import {Card, CardBody} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/checkbox-group/controlled.ts

@@ -1,4 +1,4 @@
-const App = `import { CheckboxGroup, Checkbox } from "@nextui-org/react";
+const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react";
 
 export default function App() {
   const [selected, setSelected] = React.useState(["buenos-aires", "sydney"]);

apps/docs/content/components/checkbox-group/custom-implementation.ts

@@ -17,8 +17,8 @@ const CheckIcon = `export const CheckIcon = (props) =>
     </svg>
   );`;
 
-const CustomCheckbox = `import { useCheckbox, Chip, VisuallyHidden, tv } from "@nextui-org/react";
+const CustomCheckbox = `import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react";
-import { CheckIcon } from './CheckIcon.jsx'
+import {CheckIcon} from './CheckIcon.jsx'
 
 const checkbox = tv({
   slots: {
@@ -75,8 +75,8 @@ export const CustomCheckbox = (props) => {
   );
 }`;
 
-const App = `import { CheckboxGroup } from "@nextui-org/react";
+const App = `import {CheckboxGroup} from "@nextui-org/react";
-import { CustomCheckbox } from "./CustomCheckbox";
+import {CustomCheckbox} from "./CustomCheckbox";
 
 export default function App() {
   const [groupSelected, setGroupSelected] = React.useState([]);

apps/docs/content/components/checkbox-group/custom-styles.ts

@@ -1,4 +1,4 @@
-const CustomCheckbox = `import { Checkbox, Link, User, Chip, cn } from "@nextui-org/react";
+const CustomCheckbox = `import {Checkbox, Link, User, Chip, cn} from "@nextui-org/react";
 
 export const CustomCheckbox = ({ user, statusColor, value }) => {
   return (
@@ -36,8 +36,8 @@ export const CustomCheckbox = ({ user, statusColor, value }) => {
   );
 };`;
 
-const App = `import { CheckboxGroup } from "@nextui-org/react";
+const App = `import {CheckboxGroup} from "@nextui-org/react";
-import { CustomCheckbox } from "./CustomCheckbox";
+import {CustomCheckbox} from "./CustomCheckbox";
 
 export default function App() {
   const [groupSelected, setGroupSelected] = React.useState([]);

apps/docs/content/components/checkbox-group/disabled.ts

@@ -1,4 +1,4 @@
-const App = `import { CheckboxGroup, Checkbox } from "@nextui-org/react";
+const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/checkbox-group/horizontal.ts

@@ -1,4 +1,4 @@
-const App = `import { CheckboxGroup, Checkbox } from "@nextui-org/react";
+const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/checkbox-group/usage.ts

@@ -1,4 +1,4 @@
-const App = `import { CheckboxGroup, Checkbox } from "@nextui-org/react";
+const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/checkbox/colors.ts

@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/checkbox/controlled.ts

@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   const [isSelected, setIsSelected] = React.useState(false);

apps/docs/content/components/checkbox/custom-check-icon.ts

@@ -52,9 +52,9 @@ const PlusIcon = `export const PlusIcon = ({ size, height, width, ...props }) =>
   );
 };`;
 
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
-import { HeartIcon } from './HeartIcon.jsx';  
+import {HeartIcon} from './HeartIcon.jsx';  
-import { PlusIcon } from './PlusIcon.jsx';
+import {PlusIcon} from './PlusIcon.jsx';
 
 export default function App() {
   return (

apps/docs/content/components/checkbox/custom-implementation.ts

@@ -17,8 +17,8 @@ const CheckIcon = `export const CheckIcon = (props) =>
     </svg>
   );`;
 
-const App = `import { useCheckbox, Chip, VisuallyHidden, tv } from "@nextui-org/react";
+const App = `import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react";
-import { CheckIcon } from './CheckIcon.jsx'
+import {CheckIcon} from './CheckIcon.jsx'
 
 const checkbox = tv({
   slots: {

apps/docs/content/components/checkbox/custom-styles.ts

@@ -1,4 +1,4 @@
-const App = `import { Checkbox, Link, User, Chip, cn } from "@nextui-org/react";
+const App = `import {Checkbox, Link, User, Chip, cn} from "@nextui-org/react";
 
 export default function App() {
   const [isSelected, setIsSelected] = React.useState(false);

apps/docs/content/components/checkbox/disabled.ts

@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/checkbox/indeterminate.ts

@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/checkbox/line-through.ts

@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/checkbox/radius.ts

@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/checkbox/sizes.ts

@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/checkbox/usage.ts

@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/chip/avatar.ts

@@ -1,4 +1,4 @@
-const App = `import { Chip, Avatar } from "@nextui-org/react";
+const App = `import {Chip, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/chip/close-button.ts

@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/chip/colors.ts

@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/chip/custom-styles.ts

@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/chip/disabled.ts

@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/chip/list.ts

@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 const initialFruits = ["Apple", "Banana", "Cherry", "Watermelon", "Orange"]
 

apps/docs/content/components/chip/radius.ts

@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/chip/sizes.ts

@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/chip/start-end-content.ts

@@ -38,9 +38,9 @@ export const CheckIcon = `export const CheckIcon = ({
   );
 };`;
 
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
-import { NotificationIcon } from "./NotificationIcon";
+import {NotificationIcon} from "./NotificationIcon";
-import { CheckIcon } from "./CheckIcon";
+import {CheckIcon} from "./CheckIcon";
 
 export default function App() {
   return (

apps/docs/content/components/chip/usage.ts

@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/chip/variants.ts

@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/circular-progress/colors.ts

@@ -1,4 +1,4 @@
-const App = `import { CircularProgress } from "@nextui-org/react";
+const App = `import {CircularProgress} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/circular-progress/custom-styles.ts

@@ -1,4 +1,4 @@
-const App = `import { CircularProgress, Card, CardBody, CardFooter, Chip } from "@nextui-org/react";
+const App = `import {CircularProgress, Card, CardBody, CardFooter, Chip} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/circular-progress/label.ts

@@ -1,4 +1,4 @@
-const App = `import { CircularProgress } from "@nextui-org/react";
+const App = `import {CircularProgress} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/circular-progress/sizes.ts

@@ -1,4 +1,4 @@
-const App = `import { CircularProgress } from "@nextui-org/react";
+const App = `import {CircularProgress} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/circular-progress/usage.ts

@@ -1,4 +1,4 @@
-const App = `import { CircularProgress } from "@nextui-org/react";
+const App = `import {CircularProgress} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/circular-progress/value-formatting.ts

@@ -1,4 +1,4 @@
-const App = `import { CircularProgress } from "@nextui-org/react";
+const App = `import {CircularProgress} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/circular-progress/value.ts

@@ -1,4 +1,4 @@
-const App = `import { CircularProgress } from "@nextui-org/react";
+const App = `import {CircularProgress} from "@nextui-org/react";
 
 export default function App() {
   const [value, setValue] = React.useState(0);

apps/docs/content/components/code/colors.ts

@@ -1,4 +1,4 @@
-const App = `import { Code } from "@nextui-org/react";
+const App = `import {Code} from "@nextui-org/react";
 
 export default function App() {
   return (

apps/docs/content/components/code/sizes.ts

@@ -1,4 +1,4 @@
-const App = `import { Code } from "@nextui-org/react";
+const App = `import {Code} from "@nextui-org/react";
 
 export default function App() {
   return (