negodesign 0.0.80 → 0.0.82

package/dist/docs/components.js

@@ -16,26 +16,26 @@ export const categories = [
     "Login / Security",
     "Full Pages",
 ];
-const navButtonExample = `import { Menu } from "negodesign"
-
-<Menu
-  isBorder
-  isLightSwitch
-  isLanguageSwitcher
-  logo={{ label: "Negoturismo" }}
-  navMenuButton={{
-    textButtonLogin: "Sign in",
-    textButtonRegister: "Register",
-    onclickButtonLogin: () => {},
-    onclickButtonRegister: () => {},
-    buttonClass: "bg-primary text-white",
-  }}
-  navMenu={{
-    links: [
-      { label: "Home", url: "/", icon: Home01Icon },
-      { label: "Accommodation", url: "/hospedagem", icon: Hotel01Icon },
-    ],
-  }}
+const navButtonExample = `import { Menu } from "negodesign"
+
+<Menu
+  isBorder
+  isLightSwitch
+  isLanguageSwitcher
+  logo={{ label: "Negoturismo" }}
+  navMenuButton={{
+    textButtonLogin: "Sign in",
+    textButtonRegister: "Register",
+    onclickButtonLogin: () => {},
+    onclickButtonRegister: () => {},
+    buttonClass: "bg-primary text-white",
+  }}
+  navMenu={{
+    links: [
+      { label: "Home", url: "/", icon: Home01Icon },
+      { label: "Accommodation", url: "/hospedagem", icon: Hotel01Icon },
+    ],
+  }}
 />`;
 export const components = [
     {
@@ -65,12 +65,12 @@ export const components = [
         examples: [
             {
                 title: "Search Field",
-                code: `import { SearchInput } from "negodesign"
-
-<SearchInput
-  variant={1}
-  placeholder="Search..."
-  onSubmit={(q) => console.log(q)}
+                code: `import { SearchInput } from "negodesign"
+
+<SearchInput
+  variant={1}
+  placeholder="Search..."
+  onSubmit={(q) => console.log(q)}
 />`,
             },
         ],
@@ -93,14 +93,14 @@ export const components = [
         examples: [
             {
                 title: "Simple Hero",
-                code: `import { SimpleHero } from "negodesign"
-
-<SimpleHero
-  title="Find your ideal stay"
-  subTitle="Welcome"
-  description="Verified hotels, guest houses and apartments."
-  image="/images/hero.jpg"
-  buttons={[{ label: "Explore", variant: "default" }]}
+                code: `import { SimpleHero } from "negodesign"
+
+<SimpleHero
+  title="Find your ideal stay"
+  subTitle="Welcome"
+  description="Verified hotels, guest houses and apartments."
+  image="/images/hero.jpg"
+  buttons={[{ label: "Explore", variant: "default" }]}
 />`,
                 href: "/hero",
             },
@@ -127,24 +127,24 @@ export const components = [
         examples: [
             {
                 title: "Carousel Hero",
-                code: `import { CarouselHero } from "negodesign"
-
-<CarouselHero
-  titleClass="md:text-2xl lg:text-4xl"
-  descriptionClass="text-xs md:text-lg"
-  simpleMenu={{
-    logo: { url: "/", label: "Negoturismo", className: "text-white" },
-    links: [{ label: "Accommodation", url: "#", icon: Hotel01Icon }],
-    isLanguageSwitcher: false,
-    isLightSwitch: false,
-  }}
-  items={[
-    {
-      title: "Find your ideal stay",
-      description: "Verified hotels, guest houses and apartments.",
-      image: "https://images.unsplash.com/photo-1566073771259",
-    },
-  ]}
+                code: `import { CarouselHero } from "negodesign"
+
+<CarouselHero
+  titleClass="md:text-2xl lg:text-4xl"
+  descriptionClass="text-xs md:text-lg"
+  simpleMenu={{
+    logo: { url: "/", label: "Negoturismo", className: "text-white" },
+    links: [{ label: "Accommodation", url: "#", icon: Hotel01Icon }],
+    isLanguageSwitcher: false,
+    isLightSwitch: false,
+  }}
+  items={[
+    {
+      title: "Find your ideal stay",
+      description: "Verified hotels, guest houses and apartments.",
+      image: "https://images.unsplash.com/photo-1566073771259",
+    },
+  ]}
 />`,
                 href: "/hero/carousel",
             },
@@ -174,14 +174,14 @@ export const components = [
         examples: [
             {
                 title: "CTA Image Banner",
-                code: `import { CtaCardImageBanner } from "negodesign"
-
-<CtaCardImageBanner
-  title="Let's get in touch"
-  description="Talk to us and discover the best offers."
-  primaryText="Contact"
-  primaryHref="#"
-  imageSrc="/images/banner.jpg"
+                code: `import { CtaCardImageBanner } from "negodesign"
+
+<CtaCardImageBanner
+  title="Let's get in touch"
+  description="Talk to us and discover the best offers."
+  primaryText="Contact"
+  primaryHref="#"
+  imageSrc="/images/banner.jpg"
 />`,
                 href: "/banner",
             },
@@ -212,13 +212,13 @@ export const components = [
         examples: [
             {
                 title: "Notification Banner",
-                code: `import { NotificationBanner } from "negodesign"
-
-<NotificationBanner
-  strongText="New"
-  description="New offers available!"
-  ctaText="View offers"
-  onDismiss={() => console.log("dismissed")}
+                code: `import { NotificationBanner } from "negodesign"
+
+<NotificationBanner
+  strongText="New"
+  description="New offers available!"
+  ctaText="View offers"
+  onDismiss={() => console.log("dismissed")}
 />`,
             },
         ],
@@ -245,14 +245,14 @@ export const components = [
         examples: [
             {
                 title: "Ad Banner",
-                code: `import { AdCardBanner } from "negodesign"
-
-<AdCardBanner
-  tagText="This ad could be yours."
-  titleHighlight="This ad"
-  titleMain="could be yours."
-  buttonText="Learn more"
-  onClickButton={() => console.log("clicked")}
+                code: `import { AdCardBanner } from "negodesign"
+
+<AdCardBanner
+  tagText="This ad could be yours."
+  titleHighlight="This ad"
+  titleMain="could be yours."
+  buttonText="Learn more"
+  onClickButton={() => console.log("clicked")}
 />`,
                 href: "/banner/cad-add",
             },
@@ -278,13 +278,13 @@ export const components = [
         examples: [
             {
                 title: "CTA Banner",
-                code: `import { CtaCardBanner } from "negodesign"
-
-<CtaCardBanner
-  title="Let's get in touch"
-  description="We have the ideal solution for you."
-  primaryText="Contact"
-  secondaryText="Learn more"
+                code: `import { CtaCardBanner } from "negodesign"
+
+<CtaCardBanner
+  title="Let's get in touch"
+  description="We have the ideal solution for you."
+  primaryText="Contact"
+  secondaryText="Learn more"
 />`,
                 href: "/banner/card-contact-cta",
             },
@@ -312,16 +312,16 @@ export const components = [
         examples: [
             {
                 title: "Media Card",
-                code: `import { CardMedia } from "negodesign"
-
-<CardMedia
-  {...item}
-  variant={2}
-  isImageButtonMaximized
-  isVideoButtonMaximized
-  onFavoriteClick={(id) => console.log(id)}
-  onButtonProfile={(id) => console.log(id)}
-  onButtonDetails={(id) => console.log(id)}
+                code: `import { CardMedia } from "negodesign"
+
+<CardMedia
+  {...item}
+  variant={2}
+  isImageButtonMaximized
+  isVideoButtonMaximized
+  onFavoriteClick={(id) => console.log(id)}
+  onButtonProfile={(id) => console.log(id)}
+  onButtonDetails={(id) => console.log(id)}
 />`,
                 href: "/card/media",
             },
@@ -359,13 +359,13 @@ export const components = [
         examples: [
             {
                 title: "Profile Card",
-                code: `import { CardProfile } from "negodesign"
-
-<CardProfile
-  {...item}
-  variant={1}
-  onFavoriteClick={(id) => console.log(id)}
-  onWhatsappClick={(id) => console.log(id)}
+                code: `import { CardProfile } from "negodesign"
+
+<CardProfile
+  {...item}
+  variant={1}
+  onFavoriteClick={(id) => console.log(id)}
+  onWhatsappClick={(id) => console.log(id)}
 />`,
                 href: "/card/profile",
             },
@@ -400,16 +400,16 @@ export const components = [
         examples: [
             {
                 title: "Badge Carousel",
-                code: `import { CarouselBadge } from "negodesign"
-
-<CarouselBadge
-  orientation="horizontal"
-  itemStyle="BORDER"
-  items={[
-    { label: "Hotels", value: "hotel", icon: Hotel01Icon },
-    { label: "Pensions", value: "pensao", icon: BedDoubleIcon },
-  ]}
-  onClick={(value) => console.log(value)}
+                code: `import { CarouselBadge } from "negodesign"
+
+<CarouselBadge
+  orientation="horizontal"
+  itemStyle="BORDER"
+  items={[
+    { label: "Hotels", value: "hotel", icon: Hotel01Icon },
+    { label: "Pensions", value: "pensao", icon: BedDoubleIcon },
+  ]}
+  onClick={(value) => console.log(value)}
 />`,
                 href: "/carousel/badge",
             },
@@ -441,18 +441,18 @@ export const components = [
         examples: [
             {
                 title: "Highlights Carousel",
-                code: `import { CarouselHighlights } from "negodesign"
-
-<CarouselHighlights
-  varient={2}
-  headerProps={{
-    title: "Highlights",
-    description: "The best organizations",
-    onButtonViewAll: () => {},
-  }}
-  items={highlights}
-  onClickBtn={(id) => console.log(id)}
-  onClickFavorite={(id) => console.log(id)}
+                code: `import { CarouselHighlights } from "negodesign"
+
+<CarouselHighlights
+  varient={2}
+  headerProps={{
+    title: "Highlights",
+    description: "The best organizations",
+    onButtonViewAll: () => {},
+  }}
+  items={highlights}
+  onClickBtn={(id) => console.log(id)}
+  onClickFavorite={(id) => console.log(id)}
 />`,
                 href: "/carousel/highlights",
             },
@@ -479,16 +479,16 @@ export const components = [
         examples: [
             {
                 title: "Promotion Carousel",
-                code: `import { CarouselPromotion } from "negodesign"
-
-<CarouselPromotion
-  items={promotions}
-  headerProps={{
-    title: "Promotions",
-    onButtonViewAll: () => {},
-  }}
-  onClickBuy={(id) => console.log(id)}
-  onClickShop={(id) => console.log(id)}
+                code: `import { CarouselPromotion } from "negodesign"
+
+<CarouselPromotion
+  items={promotions}
+  headerProps={{
+    title: "Promotions",
+    onButtonViewAll: () => {},
+  }}
+  onClickBuy={(id) => console.log(id)}
+  onClickShop={(id) => console.log(id)}
 />`,
                 href: "/carousel/promotion",
             },
@@ -515,15 +515,15 @@ export const components = [
         examples: [
             {
                 title: "Media Grid",
-                code: `import { CarouselGridMedia } from "negodesign"
-
-<CarouselGridMedia
-  items={media}
-  headerProps={{
-    title: "Explore",
-    onButtonViewAll: () => {},
-  }}
-  onFavoriteClick={(id) => console.log(id)}
+                code: `import { CarouselGridMedia } from "negodesign"
+
+<CarouselGridMedia
+  items={media}
+  headerProps={{
+    title: "Explore",
+    onButtonViewAll: () => {},
+  }}
+  onFavoriteClick={(id) => console.log(id)}
 />`,
                 href: "/carousel/grid/media",
             },
@@ -554,14 +554,14 @@ export const components = [
         examples: [
             {
                 title: "Simple Grid",
-                code: `import { ItemsSimpleGrid } from "negodesign"
-
-<ItemsSimpleGrid
-  variant={1}
-  items={[
-    { icon: Coffee03Icon, title: "Coffee", description: "Start your day right" },
-  ]}
-  onClick={(id) => console.log(id)}
+                code: `import { ItemsSimpleGrid } from "negodesign"
+
+<ItemsSimpleGrid
+  variant={1}
+  items={[
+    { icon: Coffee03Icon, title: "Coffee", description: "Start your day right" },
+  ]}
+  onClick={(id) => console.log(id)}
 />`,
                 href: "/grid/simple",
             },
@@ -585,13 +585,13 @@ export const components = [
         examples: [
             {
                 title: "Panel Grid",
-                code: `import { ItemsPanel } from "negodesign"
-
-<ItemsPanel
-  style="grid"
-  variant={1}
-  items={items}
-  onClick={(id) => console.log(id)}
+                code: `import { ItemsPanel } from "negodesign"
+
+<ItemsPanel
+  style="grid"
+  variant={1}
+  items={items}
+  onClick={(id) => console.log(id)}
 />`,
                 href: "/grid/panel",
             },
@@ -617,53 +617,53 @@ export const components = [
             {
                 title: "Variant 1 — Centered Grid",
                 href: "/modal",
-                code: `import { ModalGridSelection } from "negodesign"
-
-let isOpen = $state(false);
-let selected = $state(null);
-
-<ModalGridSelection
-  bind:isOpen
-  bind:selectedCard={selected}
-  title="What will you be using this for?"
-  subtitle="We'll use this to recommend you our personalized features"
-  totalSteps={3}
-  currentStep={1}
-  cards={[
-    { title: "Student", description: "You're here to impress your teachers.", icon: "nd-cap-icon" },
-    { title: "Business", description: "You're here to grow your brand.", icon: "nd-briefcase-icon" },
-    { title: "Personal", description: "You're here to make anything.", icon: "nd-user-icon" },
-  ]}
-  onSelect={(card) => console.log(card)}
-  onBack={() => console.log("back")}
-  onContinue={() => console.log("continue")}
+                code: `import { ModalGridSelection } from "negodesign"
+
+let isOpen = $state(false);
+let selected = $state(null);
+
+<ModalGridSelection
+  bind:isOpen
+  bind:selectedCard={selected}
+  title="What will you be using this for?"
+  subtitle="We'll use this to recommend you our personalized features"
+  totalSteps={3}
+  currentStep={1}
+  cards={[
+    { title: "Student", description: "You're here to impress your teachers.", icon: "nd-cap-icon" },
+    { title: "Business", description: "You're here to grow your brand.", icon: "nd-briefcase-icon" },
+    { title: "Personal", description: "You're here to make anything.", icon: "nd-user-icon" },
+  ]}
+  onSelect={(card) => console.log(card)}
+  onBack={() => console.log("back")}
+  onContinue={() => console.log("continue")}
 />`,
             },
             {
                 title: "Variant 2 — Dark Grid with Categories",
-                code: `import { ModalGridSelection } from "negodesign"
-
-let isOpen = $state(false);
-let selected = $state(null);
-
-<ModalGridSelection
-  variant={2}
-  bind:isOpen
-  bind:selectedCard={selected}
-  title="What are you planning to use this app for?"
-  categories={[
-    { label: "Marketing", value: "marketing" },
-    { label: "Product", value: "product" },
-    { label: "Engineering", value: "engineering" },
-  ]}
-  cards={[
-    { title: "Work Stuff", description: "Just the usual boring work stuff.", icon: "nd-briefcase-icon" },
-    { title: "UI/UX Design", description: "Design apps and prototypes.", icon: "nd-palette-icon" },
-    { title: "Finance", description: "Because I need money.", icon: "nd-money-icon" },
-    { title: "Productivity", description: "Sometimes we need to be productive.", icon: "nd-clock-icon" },
-  ]}
-  onSelect={(card) => console.log(card)}
-  onContinue={() => console.log("continue")}
+                code: `import { ModalGridSelection } from "negodesign"
+
+let isOpen = $state(false);
+let selected = $state(null);
+
+<ModalGridSelection
+  variant={2}
+  bind:isOpen
+  bind:selectedCard={selected}
+  title="What are you planning to use this app for?"
+  categories={[
+    { label: "Marketing", value: "marketing" },
+    { label: "Product", value: "product" },
+    { label: "Engineering", value: "engineering" },
+  ]}
+  cards={[
+    { title: "Work Stuff", description: "Just the usual boring work stuff.", icon: "nd-briefcase-icon" },
+    { title: "UI/UX Design", description: "Design apps and prototypes.", icon: "nd-palette-icon" },
+    { title: "Finance", description: "Because I need money.", icon: "nd-money-icon" },
+    { title: "Productivity", description: "Sometimes we need to be productive.", icon: "nd-clock-icon" },
+  ]}
+  onSelect={(card) => console.log(card)}
+  onContinue={() => console.log("continue")}
 />`,
             },
         ],
@@ -698,27 +698,27 @@ let selected = $state(null);
             {
                 title: "Modal Badge Selection",
                 href: "/modal",
-                code: `import { ModalBadgeSelection } from "negodesign"
-
-let isOpen = $state(false);
-let selected = $state(null);
-
-<ModalBadgeSelection
-  bind:isOpen
-  bind:selectedBadge={selected}
-  title="What team are you currently on?"
-  subtitle="Please select one answer only."
-  totalSteps={5}
-  currentStep={2}
-  badges={[
-    { label: "Marketing", value: "marketing" },
-    { label: "Engineering", value: "engineering" },
-    { label: "Design", value: "design" },
-    { label: "Operations", value: "operations" },
-  ]}
-  onSelect={(badge) => console.log(badge)}
-  onContinue={() => console.log("continue")}
-  onSkip={() => console.log("skip")}
+                code: `import { ModalBadgeSelection } from "negodesign"
+
+let isOpen = $state(false);
+let selected = $state(null);
+
+<ModalBadgeSelection
+  bind:isOpen
+  bind:selectedBadge={selected}
+  title="What team are you currently on?"
+  subtitle="Please select one answer only."
+  totalSteps={5}
+  currentStep={2}
+  badges={[
+    { label: "Marketing", value: "marketing" },
+    { label: "Engineering", value: "engineering" },
+    { label: "Design", value: "design" },
+    { label: "Operations", value: "operations" },
+  ]}
+  onSelect={(badge) => console.log(badge)}
+  onContinue={() => console.log("continue")}
+  onSkip={() => console.log("skip")}
 />`,
             },
         ],
@@ -750,44 +750,44 @@ let selected = $state(null);
             {
                 title: "Modal Share Selection",
                 href: "/modal",
-                code: `import { ModalShareSelection } from "negodesign"
-
-let isOpen = $state(false);
-
-<ModalShareSelection
-  bind:isOpen
-  title="Share this design"
-  linkValue="https://example.com/design/123"
-  isWhatsapp
-  isInstagram
-  isFacebook
-  isTwitter
-  isLinkedin
-  isPinterest
-  isTumblr
-  onShare={(network) => console.log(network)}
-  onCopy={(link) => console.log(link)}
+                code: `import { ModalShareSelection } from "negodesign"
+
+let isOpen = $state(false);
+
+<ModalShareSelection
+  bind:isOpen
+  title="Share this design"
+  linkValue="https://example.com/design/123"
+  isWhatsapp
+  isInstagram
+  isFacebook
+  isTwitter
+  isLinkedin
+  isPinterest
+  isTumblr
+  onShare={(network) => console.log(network)}
+  onCopy={(link) => console.log(link)}
 />`,
             },
             {
                 title: "Modal Share Selection — custom networks",
-                code: `import { ModalShareSelection } from "negodesign"
-import type { ModelSocialShare } from "negodesign"
-
-let isOpen = $state(false);
-
-const networks: ModelSocialShare[] = [
-  { name: "WhatsApp", img: "/img/icons8-whatsapp-48.png", color: "#25D366" },
-  { name: "Facebook", img: "/img/icons8-facebook-48.png", color: "#1877F2" },
-];
-
-<ModalShareSelection
-  bind:isOpen
-  title="Share this design"
-  linkValue="https://example.com/design/123"
-  {networks}
-  onShare={(network) => console.log(network)}
-  onCopy={(link) => console.log(link)}
+                code: `import { ModalShareSelection } from "negodesign"
+import type { ModelSocialShare } from "negodesign"
+
+let isOpen = $state(false);
+
+const networks: ModelSocialShare[] = [
+  { name: "WhatsApp", img: "/img/icons8-whatsapp-48.png", color: "#25D366" },
+  { name: "Facebook", img: "/img/icons8-facebook-48.png", color: "#1877F2" },
+];
+
+<ModalShareSelection
+  bind:isOpen
+  title="Share this design"
+  linkValue="https://example.com/design/123"
+  {networks}
+  onShare={(network) => console.log(network)}
+  onCopy={(link) => console.log(link)}
 />`,
             },
         ],
@@ -824,17 +824,17 @@ const networks: ModelSocialShare[] = [
             {
                 title: "Modal Notification",
                 href: "/modal",
-                code: `import { ModalNotification } from "negodesign"
-
-let isOpen = $state(false);
-
-<ModalNotification
-  bind:isOpen
-  title="Be the first to know when new content is available"
-  description="Sign up to receive tips and tricks on how to create online designs that make people take action."
-  placeholder="Your email address"
-  buttonText="Sign me up"
-  onSubmit={(email) => console.log(email)}
+                code: `import { ModalNotification } from "negodesign"
+
+let isOpen = $state(false);
+
+<ModalNotification
+  bind:isOpen
+  title="Be the first to know when new content is available"
+  description="Sign up to receive tips and tricks on how to create online designs that make people take action."
+  placeholder="Your email address"
+  buttonText="Sign me up"
+  onSubmit={(email) => console.log(email)}
 />`,
             },
         ],
@@ -862,16 +862,16 @@ let isOpen = $state(false);
             {
                 title: "Modal Feedback",
                 href: "/modal",
-                code: `import { ModalFeedback } from "negodesign"
-
-let isOpen = $state(false);
-
-<ModalFeedback
-  bind:isOpen
-  title="Your Feedback"
-  icon="🔥"
-  onSubmit={(content, images) => console.log(content, images)}
-  onAddImage={() => console.log("add image")}
+                code: `import { ModalFeedback } from "negodesign"
+
+let isOpen = $state(false);
+
+<ModalFeedback
+  bind:isOpen
+  title="Your Feedback"
+  icon="🔥"
+  onSubmit={(content, images) => console.log(content, images)}
+  onAddImage={() => console.log("add image")}
 />`,
             },
         ],
@@ -902,22 +902,22 @@ let isOpen = $state(false);
             {
                 title: "Form with multiple input types",
                 href: "/form",
-                code: `import { Form } from "negodesign"
-
-<Form
-  onSubmit={(data) => console.log(data)}
-  submitText="Save"
-  inputs={[
-    { type: "text", name: "name", label: "Full Name", placeholder: "John Doe", required: true },
-    { type: "email", name: "email", label: "Email", placeholder: "john@example.com", required: true },
-    { type: "select", name: "role", label: "Role", options: [
-      { value: "ADMIN", label: "Admin" },
-      { value: "USER", label: "User" },
-    ]},
-    { type: "toggle", name: "active", label: "Active", description: "Enable this account" },
-    { type: "textarea", name: "bio", label: "Bio", placeholder: "Tell us about yourself", fill: true },
-    { type: "badges", name: "tags", label: "Tags", placeholder: "Add tags...", suggestions: ["React", "Svelte", "Vue"] },
-  ]}
+                code: `import { Form } from "negodesign"
+
+<Form
+  onSubmit={(data) => console.log(data)}
+  submitText="Save"
+  inputs={[
+    { type: "text", name: "name", label: "Full Name", placeholder: "John Doe", required: true },
+    { type: "email", name: "email", label: "Email", placeholder: "john@example.com", required: true },
+    { type: "select", name: "role", label: "Role", options: [
+      { value: "ADMIN", label: "Admin" },
+      { value: "USER", label: "User" },
+    ]},
+    { type: "toggle", name: "active", label: "Active", description: "Enable this account" },
+    { type: "textarea", name: "bio", label: "Bio", placeholder: "Tell us about yourself", fill: true },
+    { type: "badges", name: "tags", label: "Tags", placeholder: "Add tags...", suggestions: ["React", "Svelte", "Vue"] },
+  ]}
 />`,
             },
         ],
@@ -943,22 +943,22 @@ let isOpen = $state(false);
             {
                 title: "Modal Form",
                 href: "/modal",
-                code: `import { ModalForm } from "negodesign"
-
-let isOpen = $state(false);
-
-<ModalForm
-  bind:isOpen
-  title="Edit Profile"
-  subtitle="Update your personal information"
-  submitText="Save Changes"
-  inputs={[
-    { type: "text", name: "name", label: "Name", value: "John Doe", required: true },
-    { type: "email", name: "email", label: "Email", value: "john@example.com" },
-    { type: "toggle", name: "newsletter", label: "Newsletter", description: "Receive updates" },
-  ]}
-  onSubmit={(data) => console.log(data)}
-  onCancel={() => console.log("cancelled")}
+                code: `import { ModalForm } from "negodesign"
+
+let isOpen = $state(false);
+
+<ModalForm
+  bind:isOpen
+  title="Edit Profile"
+  subtitle="Update your personal information"
+  submitText="Save Changes"
+  inputs={[
+    { type: "text", name: "name", label: "Name", value: "John Doe", required: true },
+    { type: "email", name: "email", label: "Email", value: "john@example.com" },
+    { type: "toggle", name: "newsletter", label: "Newsletter", description: "Receive updates" },
+  ]}
+  onSubmit={(data) => console.log(data)}
+  onCancel={() => console.log("cancelled")}
 />`,
             },
         ],
@@ -979,6 +979,46 @@ let isOpen = $state(false);
             { name: "class", type: "string", description: "Extra container CSS class" },
         ],
     },
+    {
+        slug: "modal-form-email-or-phone",
+        name: "ModalFormEmailOrPhone",
+        category: "Forms",
+        description: "Modal form for sending OTP verification codes via email or phone. Supports pre-set email/phone with mutual selection and disabling, or single combined input.",
+        path: "src/lib/components/ui/modal/form/ui/ModalFormEmailOrPhone.svelte",
+        importPath: "ModalFormEmailOrPhone",
+        examples: [
+            {
+                title: "Modal Form Email or Phone",
+                href: "/modal",
+                code: `import { ModalFormEmailOrPhone } from "negodesign"
+
+let isOpen = $state(false);
+
+<ModalFormEmailOrPhone
+  bind:isOpen
+  email="user@example.com"
+  phone="+244 923 456 789"
+  onSubmit={(data) => console.log(data)}
+/>`,
+            },
+        ],
+        props: [
+            { name: "title", type: "string", description: "Modal title" },
+            { name: "subtitle", type: "string", description: "Modal subtitle" },
+            { name: "email", type: "string", description: "Pre-set email address" },
+            { name: "phone", type: "string", description: "Pre-set phone number" },
+            { name: "isOpen", type: "boolean", description: "Controls modal visibility (bindable)" },
+            { name: "submitText", type: "string", description: "Submit button text" },
+            { name: "submitLoadingText", type: "string", description: "Loading state button text", default: "A enviar..." },
+            { name: "cancelText", type: "string", description: "Cancel button text", default: "Cancelar" },
+            { name: "isLoading", type: "boolean", description: "Loading state", default: "false" },
+            { name: "showCancel", type: "boolean", description: "Shows the cancel button", default: "true" },
+            { name: "onSubmit", type: "(data: ModalFormEmailOrPhoneSubmitData) => void", description: "Called when form is submitted" },
+            { name: "onCancel", type: "() => void", description: "Called when Cancel is clicked" },
+            { name: "onClose", type: "() => void", description: "Called when modal is closed" },
+            { name: "class", type: "string", description: "Extra container CSS class" },
+        ],
+    },
     {
         slug: "modal-upload",
         name: "ModalUpload",
@@ -990,21 +1030,21 @@ let isOpen = $state(false);
             {
                 title: "Modal Upload",
                 href: "/modal",
-                code: `import { ModalUpload } from "negodesign"
-import type { UploadFile } from "negodesign"
-
-let isOpen = $state(false);
-let files = $state<UploadFile[]>([]);
-
-<ModalUpload
-  bind:isOpen
-  bind:files
-  acceptedFormats="csv, xlsx, xls"
-  multiple
-  onFilesSelected={(f) => console.log("selected", f)}
-  onUpload={(f) => console.log("upload", f)}
-  onRemoveFile={(id) => console.log("remove", id)}
-  onDownload={() => console.log("download sample")}
+                code: `import { ModalUpload } from "negodesign"
+import type { UploadFile } from "negodesign"
+
+let isOpen = $state(false);
+let files = $state<UploadFile[]>([]);
+
+<ModalUpload
+  bind:isOpen
+  bind:files
+  acceptedFormats="csv, xlsx, xls"
+  multiple
+  onFilesSelected={(f) => console.log("selected", f)}
+  onUpload={(f) => console.log("upload", f)}
+  onRemoveFile={(id) => console.log("remove", id)}
+  onDownload={() => console.log("download sample")}
 />`,
             },
         ],
@@ -1037,25 +1077,25 @@ let files = $state<UploadFile[]>([]);
         examples: [
             {
                 title: "Modal Core",
-                code: `import { ModalCore } from "negodesign"
-
-let isOpen = $state(false);
-
-<ModalCore
-  bind:isOpen
-  title="Custom Modal"
-  subtitle="With custom content"
-  totalSteps={3}
-  currentStep={1}
-  showProgress
-  showBack
-  showSkip
-  onContinue={() => console.log("continue")}
-  onSkip={() => console.log("skip")}
->
-  {#snippet content()}
-    <p>Your custom content here</p>
-  {/snippet}
+                code: `import { ModalCore } from "negodesign"
+
+let isOpen = $state(false);
+
+<ModalCore
+  bind:isOpen
+  title="Custom Modal"
+  subtitle="With custom content"
+  totalSteps={3}
+  currentStep={1}
+  showProgress
+  showBack
+  showSkip
+  onContinue={() => console.log("continue")}
+  onSkip={() => console.log("skip")}
+>
+  {#snippet content()}
+    <p>Your custom content here</p>
+  {/snippet}
 </ModalCore>`,
             },
         ],
@@ -1091,18 +1131,18 @@ let isOpen = $state(false);
             {
                 title: "Modal Map",
                 href: "/modal",
-                code: `import { ModalMap } from "negodesign"
-
-let isOpen = $state(false);
-
-<ModalMap
-  bind:isOpen
-  title="Location"
-  address="211 Throop Ave Brooklyn, New York City"
-  description="New York is served by three airports."
-  onSearch={(q) => console.log(q)}
-  onApply={(addr, desc) => console.log(addr, desc)}
-  onCancel={() => console.log("cancel")}
+                code: `import { ModalMap } from "negodesign"
+
+let isOpen = $state(false);
+
+<ModalMap
+  bind:isOpen
+  title="Location"
+  address="211 Throop Ave Brooklyn, New York City"
+  description="New York is served by three airports."
+  onSearch={(q) => console.log(q)}
+  onApply={(addr, desc) => console.log(addr, desc)}
+  onCancel={() => console.log("cancel")}
 />`,
             },
         ],
@@ -1140,17 +1180,17 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Footer",
-                code: `import { Footer } from "negodesign"
-
-<Footer
-  isNewsletter={true}
-  items={[
-    { title: "Solutions", items: [{ text: "Marketing" }] },
-  ]}
-  socialsMedia={[
-    { icon: "facebook", text: "Facebook", href: "#" },
-  ]}
-  companyName="Negoturismo"
+                code: `import { Footer } from "negodesign"
+
+<Footer
+  isNewsletter={true}
+  items={[
+    { title: "Solutions", items: [{ text: "Marketing" }] },
+  ]}
+  socialsMedia={[
+    { icon: "facebook", text: "Facebook", href: "#" },
+  ]}
+  companyName="Negoturismo"
 />`,
                 href: "/footer",
             },
@@ -1177,15 +1217,15 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Admin Panel",
-                code: `import { AdminPanel } from "negodesign"
-
-<AdminPanel>
-  {#snippet appsidebar()}
-    <MenuBarSidebar {user} {menus} {menusButtons} />
-  {/snippet}
-  {#snippet content()}
-    <AdminContent>...content...</AdminContent>
-  {/snippet}
+                code: `import { AdminPanel } from "negodesign"
+
+<AdminPanel>
+  {#snippet appsidebar()}
+    <MenuBarSidebar {user} {menus} {menusButtons} />
+  {/snippet}
+  {#snippet content()}
+    <AdminContent>...content...</AdminContent>
+  {/snippet}
 </AdminPanel>`,
                 href: "/admin/01",
             },
@@ -1206,13 +1246,13 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Data Table",
-                code: `import { DataTableCore } from "negodesign"
-
-<DataTableCore
-  items={rows}
-  config={columns}
-  columnFilter="name"
-  actions={RowActions}
+                code: `import { DataTableCore } from "negodesign"
+
+<DataTableCore
+  items={rows}
+  config={columns}
+  columnFilter="name"
+  actions={RowActions}
 />`,
                 href: "/datatable/01",
             },
@@ -1234,12 +1274,12 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Sidebar",
-                code: `import { MenuBarSidebar } from "negodesign"
-
-<MenuBarSidebar
-  {menus}
-  {user}
-  {menusButtons}
+                code: `import { MenuBarSidebar } from "negodesign"
+
+<MenuBarSidebar
+  {menus}
+  {user}
+  {menusButtons}
 />`,
             },
         ],
@@ -1262,15 +1302,15 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Login Page",
-                code: `import { PageLogin } from "negodesign"
-
-<PageLogin
-  title="Negodesign"
-  formType="EMAIL_PASSWORD"
-  carousel={[
-    { title: "Welcome", description: "Access your account", buttonText: "Sign in" },
-  ]}
-  onSubmit={(credential) => console.log(credential)}
+                code: `import { PageLogin } from "negodesign"
+
+<PageLogin
+  title="Negodesign"
+  formType="EMAIL_PASSWORD"
+  carousel={[
+    { title: "Welcome", description: "Access your account", buttonText: "Sign in" },
+  ]}
+  onSubmit={(credential) => console.log(credential)}
 />`,
                 href: "/login/admin/01",
             },
@@ -1297,36 +1337,36 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Register Page — All Fields",
-                code: `import { PageRegister } from "negodesign"
-
-<PageRegister
-  title="Negodesign"
-  fields={{
-    isName: true,
-    isEmail: true,
-    isPassword: true,
-    isConfirmPassword: true,
-    isBirthday: true,
-    isGender: true,
-    isPhone: true,
-  }}
-  onSubmit={(data) => console.log(data)}
+                code: `import { PageRegister } from "negodesign"
+
+<PageRegister
+  title="Negodesign"
+  fields={{
+    isName: true,
+    isEmail: true,
+    isPassword: true,
+    isConfirmPassword: true,
+    isBirthday: true,
+    isGender: true,
+    isPhone: true,
+  }}
+  onSubmit={(data) => console.log(data)}
 />`,
                 href: "/register/admin/01",
             },
             {
                 title: "Register Page — Minimal (email + password)",
-                code: `import { PageRegister } from "negodesign"
-
-<PageRegister
-  variant={2}
-  title="Negodesign"
-  fields={{
-    isEmail: true,
-    isPassword: true,
-    isConfirmPassword: true,
-  }}
-  onSubmit={(data) => console.log(data)}
+                code: `import { PageRegister } from "negodesign"
+
+<PageRegister
+  variant={2}
+  title="Negodesign"
+  fields={{
+    isEmail: true,
+    isPassword: true,
+    isConfirmPassword: true,
+  }}
+  onSubmit={(data) => console.log(data)}
 />`,
             },
         ],
@@ -1354,13 +1394,13 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Company Profile",
-                code: `import { CompanyProfile } from "negodesign"
-
-<CompanyProfile
-  data={data}
-  isLoading={false}
-  onWhatsapp={(id) => console.log(id)}
-  onEmail={(id) => console.log(id)}
+                code: `import { CompanyProfile } from "negodesign"
+
+<CompanyProfile
+  data={data}
+  isLoading={false}
+  onWhatsapp={(id) => console.log(id)}
+  onEmail={(id) => console.log(id)}
 />`,
                 href: "/company-profile",
             },
@@ -1384,14 +1424,14 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Privacy Policy",
-                code: `import { PrivacyPolicyOrTermsOfUse } from "negodesign"
-
-<PrivacyPolicyOrTermsOfUse
-  variant={1}
-  title="Privacy Policy"
-  lastUpdated="August 15, 2026"
-  breadcrumb={[{ label: "Home", href: "/" }]}
-  sections={[{ id: "intro", title: "Introduction", blocks: [] }]}
+                code: `import { PrivacyPolicyOrTermsOfUse } from "negodesign"
+
+<PrivacyPolicyOrTermsOfUse
+  variant={1}
+  title="Privacy Policy"
+  lastUpdated="August 15, 2026"
+  breadcrumb={[{ label: "Home", href: "/" }]}
+  sections={[{ id: "intro", title: "Introduction", blocks: [] }]}
 />`,
                 href: "/privacy-policy-or-terms-of-use",
             },
@@ -1416,15 +1456,15 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Product Details",
-                code: `import { ProductDetails } from "negodesign"
-
-<ProductDetails
-  varient={1}
-  data={productData}
-  isLoading={false}
-  onBuy={(id) => alert("Buy " + id)}
-  onFavorite={(id) => alert("Favorite " + id)}
-  onCart={(id) => alert("Cart " + id)}
+                code: `import { ProductDetails } from "negodesign"
+
+<ProductDetails
+  varient={1}
+  data={productData}
+  isLoading={false}
+  onBuy={(id) => alert("Buy " + id)}
+  onFavorite={(id) => alert("Favorite " + id)}
+  onCart={(id) => alert("Cart " + id)}
 />`,
                 href: "/product-details/01",
             },
@@ -1450,15 +1490,15 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "User Profile",
-                code: `import { ProfileUser } from "negodesign"
-
-<ProfileUser
-  varient={1}
-  data={userData}
-  isLoading={false}
-  onLoginAsUser={(id) => alert(id)}
-  onAddAddress={() => alert("Add")}
-  onChangePassword={(p) => alert(JSON.stringify(p))}
+                code: `import { ProfileUser } from "negodesign"
+
+<ProfileUser
+  varient={1}
+  data={userData}
+  isLoading={false}
+  onLoginAsUser={(id) => alert(id)}
+  onAddAddress={() => alert("Add")}
+  onChangePassword={(p) => alert(JSON.stringify(p))}
 />`,
                 href: "/profile-user/01",
             },
@@ -1486,17 +1526,17 @@ let isOpen = $state(false);
             {
                 title: "Tab Underline",
                 href: "/tab",
-                code: `import { TabUnderline } from "negodesign"
-
-<TabUnderline
-  items={[
-    { label: "Tab 1", value: "tab1" },
-    { label: "Tab 2", value: "tab2" },
-  ]}
-  contents={{
-    tab1: () => <p>Content 1</p>,
-    tab2: () => <p>Content 2</p>,
-  }}
+                code: `import { TabUnderline } from "negodesign"
+
+<TabUnderline
+  items={[
+    { label: "Tab 1", value: "tab1" },
+    { label: "Tab 2", value: "tab2" },
+  ]}
+  contents={{
+    tab1: () => <p>Content 1</p>,
+    tab2: () => <p>Content 2</p>,
+  }}
 />`,
             },
         ],
@@ -1516,14 +1556,14 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Empty State",
-                code: `import { NotFoundEmpty } from "negodesign"
-
-<NotFoundEmpty
-  title="No results found"
-  description="Try adjusting your search or filter to find what you're looking for."
-  showAction
-  actionLabel="Clear filters"
-  onAction={() => console.log("clear")}
+                code: `import { NotFoundEmpty } from "negodesign"
+
+<NotFoundEmpty
+  title="No results found"
+  description="Try adjusting your search or filter to find what you're looking for."
+  showAction
+  actionLabel="Clear filters"
+  onAction={() => console.log("clear")}
 />`,
             },
         ],
@@ -1548,11 +1588,11 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Admin Content",
-                code: `import { AdminContent } from "negodesign"
-
-<AdminContent>
-  <h1>Dashboard</h1>
-  <p>Content goes here</p>
+                code: `import { AdminContent } from "negodesign"
+
+<AdminContent>
+  <h1>Dashboard</h1>
+  <p>Content goes here</p>
 </AdminContent>`,
             },
         ],
@@ -1570,12 +1610,12 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Input Email",
-                code: `import { InputEmail } from "negodesign"
-
-<InputEmail
-  label="Email"
-  placeholder="john@example.com"
-  bind:value={email}
+                code: `import { InputEmail } from "negodesign"
+
+<InputEmail
+  label="Email"
+  placeholder="john@example.com"
+  bind:value={email}
 />`,
             },
         ],
@@ -1595,12 +1635,12 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Input Phone",
-                code: `import { InputPhone } from "negodesign"
-
-<InputPhone
-  label="Phone"
-  placeholder="+1 234 567 890"
-  bind:value={phone}
+                code: `import { InputPhone } from "negodesign"
+
+<InputPhone
+  label="Phone"
+  placeholder="+1 234 567 890"
+  bind:value={phone}
 />`,
             },
         ],
@@ -1620,12 +1660,12 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Input Password",
-                code: `import { InputPassword } from "negodesign"
-
-<InputPassword
-  label="Password"
-  placeholder="Enter your password"
-  bind:value={password}
+                code: `import { InputPassword } from "negodesign"
+
+<InputPassword
+  label="Password"
+  placeholder="Enter your password"
+  bind:value={password}
 />`,
             },
         ],
@@ -1645,12 +1685,12 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Input Username",
-                code: `import { InputUsername } from "negodesign"
-
-<InputUsername
-  label="Username"
-  placeholder="john_doe"
-  bind:value={username}
+                code: `import { InputUsername } from "negodesign"
+
+<InputUsername
+  label="Username"
+  placeholder="john_doe"
+  bind:value={username}
 />`,
             },
         ],
@@ -1671,16 +1711,16 @@ let isOpen = $state(false);
             {
                 title: "Input Calendar",
                 href: "/input-calendar",
-                code: `import { InputCalendar } from "negodesign"
-
-<script lang="ts">
-  let birthDate = $state("");
-</script>
-
-<InputCalendar
-  label="Birth date"
-  placeholder="dd/mm/yyyy"
-  bind:value={birthDate}
+                code: `import { InputCalendar } from "negodesign"
+
+<script lang="ts">
+  let birthDate = $state("");
+</script>
+
+<InputCalendar
+  label="Birth date"
+  placeholder="dd/mm/yyyy"
+  bind:value={birthDate}
 />`,
             },
         ],
@@ -1709,17 +1749,17 @@ let isOpen = $state(false);
             {
                 title: "Input Calendar Interval",
                 href: "/input-calendar-interval",
-                code: `import { InputCalendarInterval } from "negodesign"
-
-<script lang="ts">
-  let startDate = $state("");
-  let endDate = $state("");
-</script>
-
-<InputCalendarInterval
-  label="Travel period"
-  bind:startValue={startDate}
-  bind:endValue={endDate}
+                code: `import { InputCalendarInterval } from "negodesign"
+
+<script lang="ts">
+  let startDate = $state("");
+  let endDate = $state("");
+</script>
+
+<InputCalendarInterval
+  label="Travel period"
+  bind:startValue={startDate}
+  bind:endValue={endDate}
 />`,
             },
         ],
@@ -1745,11 +1785,11 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Forget Password Page",
-                code: `import { PageForgetPassword } from "negodesign"
-
-<PageForgetPassword
-  title="Negodesign"
-  onSubmit={(data) => console.log(data)}
+                code: `import { PageForgetPassword } from "negodesign"
+
+<PageForgetPassword
+  title="Negodesign"
+  onSubmit={(data) => console.log(data)}
 />`,
                 href: "/login/forget-password/01",
             },
@@ -1770,10 +1810,10 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Reset Password Page",
-                code: `import { PageResetPassword } from "negodesign"
-
-<PageResetPassword
-  onSubmit={(data) => console.log(data)}
+                code: `import { PageResetPassword } from "negodesign"
+
+<PageResetPassword
+  onSubmit={(data) => console.log(data)}
 />`,
                 href: "/login/reset-password/01",
             },
@@ -1792,10 +1832,10 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "OTP Verification Page",
-                code: `import { PageOtpVerification } from "negodesign"
-
-<PageOtpVerification
-  onSubmit={(data) => console.log(data)}
+                code: `import { PageOtpVerification } from "negodesign"
+
+<PageOtpVerification
+  onSubmit={(data) => console.log(data)}
 />`,
                 href: "/login/otp/01",
             },
@@ -1815,26 +1855,26 @@ let isOpen = $state(false);
         examples: [
             {
                 title: "Tailored Logistics Cards",
-                code: `import { Section01 } from "negodesign"
-import {
-  ShoppingBag01Icon,
-  FactoryIcon,
-  Stethoscope02Icon,
-  ComputerNetworkIcon,
-} from "@hugeicons/core-free-icons";
-
-<Section01
-  title="Tailored Logistics for Every Business"
-  description="At /XION, we understand that every industry has unique logistics challenges."
-  items={[
-    { id: "1", icon: ShoppingBag01Icon, title: "Retail & E-commerce", description: "Streamline your fulfillment process." },
-    { id: "2", icon: FactoryIcon, title: "Manufacturing", description: "Optimize your supply chain.", isActive: true },
-    { id: "3", icon: Stethoscope02Icon, title: "Healthcare & Pharmacy", description: "Ensure the safe delivery of products." },
-    { id: "4", icon: ComputerNetworkIcon, title: "Technology & Electronics", description: "Handle high-value, sensitive products." },
-  ]}
-  onSelect={(id) => console.log(id)}
-  onPrev={() => console.log("prev")}
-  onNext={() => console.log("next")}
+                code: `import { Section01 } from "negodesign"
+import {
+  ShoppingBag01Icon,
+  FactoryIcon,
+  Stethoscope02Icon,
+  ComputerNetworkIcon,
+} from "@hugeicons/core-free-icons";
+
+<Section01
+  title="Tailored Logistics for Every Business"
+  description="At /XION, we understand that every industry has unique logistics challenges."
+  items={[
+    { id: "1", icon: ShoppingBag01Icon, title: "Retail & E-commerce", description: "Streamline your fulfillment process." },
+    { id: "2", icon: FactoryIcon, title: "Manufacturing", description: "Optimize your supply chain.", isActive: true },
+    { id: "3", icon: Stethoscope02Icon, title: "Healthcare & Pharmacy", description: "Ensure the safe delivery of products." },
+    { id: "4", icon: ComputerNetworkIcon, title: "Technology & Electronics", description: "Handle high-value, sensitive products." },
+  ]}
+  onSelect={(id) => console.log(id)}
+  onPrev={() => console.log("prev")}
+  onNext={() => console.log("next")}
 />`,
                 href: "/section/01",
             },
@@ -1862,19 +1902,19 @@ import {
         examples: [
             {
                 title: "Innovation Features Section",
-                code: `import { Section02 } from "negodesign"
-
-<Section02
-  title="Innovation that Moves Your Business"
-  description="We leverage the latest technology to improve the way we manage your shipments."
-  image="/images/container.jpg"
-  imageAlt="Shipping container"
-  features={[
-    { title: "Real-Time Tracking", description: "Stay up-to-date with your shipments from pick-up to delivery.", link: "/tracking", linkLabel: "Learn More" },
-    { title: "Data Analytics", description: "Gain insights into your supply chain.", link: "/analytics" },
-    { title: "Automated Updates", description: "Receive timely notifications about your shipments.", link: "/updates" },
-    { title: "Secure Portal", description: "Access your account anytime with our secure online portal.", link: "/portal" },
-  ]}
+                code: `import { Section02 } from "negodesign"
+
+<Section02
+  title="Innovation that Moves Your Business"
+  description="We leverage the latest technology to improve the way we manage your shipments."
+  image="/images/container.jpg"
+  imageAlt="Shipping container"
+  features={[
+    { title: "Real-Time Tracking", description: "Stay up-to-date with your shipments from pick-up to delivery.", link: "/tracking", linkLabel: "Learn More" },
+    { title: "Data Analytics", description: "Gain insights into your supply chain.", link: "/analytics" },
+    { title: "Automated Updates", description: "Receive timely notifications about your shipments.", link: "/updates" },
+    { title: "Secure Portal", description: "Access your account anytime with our secure online portal.", link: "/portal" },
+  ]}
 />`,
                 href: "/section/02",
             },
@@ -1901,23 +1941,23 @@ import {
         examples: [
             {
                 title: "Solutions Section",
-                code: `import { Section03 } from "negodesign"
-import {
-  Globe01Icon,
-  CustomServiceIcon,
-  ArtificialIntelligence02Icon,
-  Award01Icon,
-} from "@hugeicons/core-free-icons";
-
-<Section03
-  title="We specialize in providing reliable and efficient solutions"
-  description="Whether you need to streamline your supply chain, improve delivery times, or expand your reach globally, we're here to help you achieve your goals with precision and speed."
-  items={[
-    { id: "1", icon: Globe01Icon, title: "Global Reach", description: "With a network, we ensure that your business can reach new markets effortlessly." },
-    { id: "2", icon: CustomServiceIcon, title: "Custom Solutions", description: "We don't believe in a one-size-fits-all. We design logistics solutions tailored to your business needs." },
-    { id: "3", icon: ArtificialIntelligence02Icon, title: "Technology-Driven", description: "Our cutting-edge technology enables real-time tracking, data analytics, and seamless coordination." },
-    { id: "4", icon: Award01Icon, title: "Proven Expertise", description: "With over 10 years in the logistics industry, we have mastered the art of moving goods efficiently." },
-  ]}
+                code: `import { Section03 } from "negodesign"
+import {
+  Globe01Icon,
+  CustomServiceIcon,
+  ArtificialIntelligence02Icon,
+  Award01Icon,
+} from "@hugeicons/core-free-icons";
+
+<Section03
+  title="We specialize in providing reliable and efficient solutions"
+  description="Whether you need to streamline your supply chain, improve delivery times, or expand your reach globally, we're here to help you achieve your goals with precision and speed."
+  items={[
+    { id: "1", icon: Globe01Icon, title: "Global Reach", description: "With a network, we ensure that your business can reach new markets effortlessly." },
+    { id: "2", icon: CustomServiceIcon, title: "Custom Solutions", description: "We don't believe in a one-size-fits-all. We design logistics solutions tailored to your business needs." },
+    { id: "3", icon: ArtificialIntelligence02Icon, title: "Technology-Driven", description: "Our cutting-edge technology enables real-time tracking, data analytics, and seamless coordination." },
+    { id: "4", icon: Award01Icon, title: "Proven Expertise", description: "With over 10 years in the logistics industry, we have mastered the art of moving goods efficiently." },
+  ]}
 />`,
                 href: "/section/03",
             },