{"version":1,"pages":[{"id":"Wscb14J8fVkCuNEcYFN3","title":"Release Notes","pathname":"/","siteSpaceId":"sitesp_oP8Qf"},{"id":"JroYowPPZwyt8JmzEPMN","title":"Downloads","pathname":"/downloads","siteSpaceId":"sitesp_oP8Qf"},{"id":"dllGEEzrT7SdM1Z9lcvg","title":"Frequently Asked Questions","pathname":"/frequently-asked-questions","siteSpaceId":"sitesp_oP8Qf"},{"id":"rswXGbVGoS45MVFeHv3E","title":"Introduction","pathname":"/developers/introduction","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Developers"}]},{"id":"5zHEPQmG44VPtKyjyznO","title":"Color Variables","pathname":"/developers/color-variables","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Developers"}]},{"id":"fdqJrs9vcrPSyr5FqQLM","title":"Font Family","pathname":"/developers/font-family","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Developers"}]},{"id":"YbBcAj9yq2QlXknApf36","title":"Vanilla JS","pathname":"/developers/vanilla-js","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Developers"}]},{"id":"HGNP7SSXpQzqz9UpKV08","title":"React","pathname":"/developers/react","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Developers"}]},{"id":"2LQ6EEnWCqcPHzsS2d8G","title":"Vue","pathname":"/developers/vue","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Developers"}]},{"id":"3rIxfcDfiykvC101ARur","title":"Angular","pathname":"/developers/angular","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Developers"}]},{"id":"ypwDhWEiparRS5SBCqyX","title":"RTL Support","pathname":"/developers/rtl-support","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Developers"}]},{"id":"0wLQkb5bJsAUu8vXD9zr","title":"Light Mode/Dark Mode","pathname":"/developers/light-mode-dark-mode","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Developers"}]},{"id":"BUZqlN8rIfkgKX5Ts7rH","title":"Navigation/Routers","pathname":"/developers/navigation-routers","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Developers"}]},{"id":"GaP7yd8GN0u2u2mIZlIv","title":"Input Interactions","pathname":"/developers/input-interactions","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Developers"}]},{"id":"tAoaXK4CX9mRzE1UFVXb","title":"Typography","pathname":"/foundations/typography","siteSpaceId":"sitesp_oP8Qf","description":"Designers should prioritize clarity and readability by using a balanced type scale to create a clear visual hierarchy. Avoid relying on color for emphasis; instead, use type size and weight to guide u","breadcrumbs":[{"label":"Foundations"}]},{"id":"YfY4zQp6hC9raTUems7m","title":"Colors","pathname":"/foundations/colors","siteSpaceId":"sitesp_oP8Qf","description":"","breadcrumbs":[{"label":"Foundations"}]},{"id":"XeRY65FnEdwjgvaGgWAK","title":"Icons & Visuals","pathname":"/foundations/icons-and-visuals","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Foundations"}]},{"id":"EZdQT5BtE8nozRSCJZDN","title":"Images","pathname":"/foundations/images","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Foundations"}]},{"id":"JiA27E3bTdb3pG5y3kiJ","title":"Layout & Breakpoints","pathname":"/foundations/layout-and-breakpoints","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Foundations"}]},{"id":"kRIF63p2uRvTLy11TPO4","title":"Utils","pathname":"/foundations/utils","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Foundations"}]},{"id":"51JZooGz7TbBy8WWRyg6","title":"Accordions","pathname":"/components/accordions","siteSpaceId":"sitesp_oP8Qf","description":"Accordions are used to organize content into collapsible sections, allowing users to expand and collapse sections as needed.","breadcrumbs":[{"label":"Components"}]},{"id":"T8RWenY2uDF5XX4AEmwP","title":"Accordion","pathname":"/components/accordions/accordion","siteSpaceId":"sitesp_oP8Qf","description":"Accordions are used to organize content into collapsible sections, allowing users to expand and collapse sections as needed.","breadcrumbs":[{"label":"Components"},{"label":"Accordions"}]},{"id":"0NrpWUmfKQUZlSwMvdY3","title":"Accordion Groups","pathname":"/components/accordions/accordion-groups","siteSpaceId":"sitesp_oP8Qf","description":"Accordion groups are designed to organize content into collapsible sections, enabling users to expand and collapse each section as needed for a streamlined and manageable browsing experience.","breadcrumbs":[{"label":"Components"},{"label":"Accordions"}]},{"id":"UEH4ltPSAxI60L3ra8l3","title":"Alert","pathname":"/components/alert","siteSpaceId":"sitesp_oP8Qf","description":"Alert banners are used to convey important information or warnings to users.","breadcrumbs":[{"label":"Components"}]},{"id":"gGkDYgiHGT97EpkvYJfZ","title":"Attach File","pathname":"/components/attach-file","siteSpaceId":"sitesp_oP8Qf","description":"Attach file fields are used to allow users to upload files from their device.","breadcrumbs":[{"label":"Components"}]},{"id":"s8ISgYAPuI126PM6UDu3","title":"Avatar","pathname":"/components/avatar","siteSpaceId":"sitesp_oP8Qf","description":"Avatar visually represents a user through a profile image or initials, helping to identify individuals within the interface.","breadcrumbs":[{"label":"Components"}]},{"id":"0pPc1BnP8dcXJNe3Cqmp","title":"Breadcrumbs","pathname":"/components/breadcrumbs","siteSpaceId":"sitesp_oP8Qf","description":"Breadcrumbs provide a navigation aid that shows users their current location within a site's hierarchy, allowing them to trace their path back to previous pages easily.","breadcrumbs":[{"label":"Components"}]},{"id":"HVHxVhveDWp9pEzFh40u","title":"Buttons","pathname":"/components/buttons","siteSpaceId":"sitesp_oP8Qf","description":"Buttons are fundamental interactive elements used in user interfaces to trigger actions, submit forms, and navigate through different parts of an application","breadcrumbs":[{"label":"Components"}]},{"id":"L3OaT6fR0cxSl9pz5wOr","title":"Button","pathname":"/components/buttons/button","siteSpaceId":"sitesp_oP8Qf","description":"Text button is used to initiate actions on a page or form.","breadcrumbs":[{"label":"Components"},{"label":"Buttons"}]},{"id":"7uvVRwSdVNqgNzmnv05X","title":"Icon Button","pathname":"/components/buttons/icon-button","siteSpaceId":"sitesp_oP8Qf","description":"Icon Button is used to perform an action with an icon, without requiring a text label. It is often used for actions like editing, deleting, or navigating.","breadcrumbs":[{"label":"Components"},{"label":"Buttons"}]},{"id":"IVnHIxtn8I5UhM82EXkn","title":"Link Button","pathname":"/components/buttons/link-button","siteSpaceId":"sitesp_oP8Qf","description":"A Link Button is styled as a button but acts like a hyperlink, guiding users to other pages or resources. It’s commonly used for navigational actions such as \"Learn More\" or \"Download\".","breadcrumbs":[{"label":"Components"},{"label":"Buttons"}]},{"id":"UmmL41amcjxo0pztGwtg","title":"Social Media Buttons","pathname":"/components/buttons/social-media-buttons","siteSpaceId":"sitesp_oP8Qf","description":"Social Media Login Buttons enable quick login or signup using social media accounts, offering a convenient authentication option.","breadcrumbs":[{"label":"Components"},{"label":"Buttons"}]},{"id":"QxNTbEpjmNgH4ipW57FM","title":"Split Button","pathname":"/components/buttons/split-button","siteSpaceId":"sitesp_oP8Qf","description":"A Split Button combines a dropdown menu for related options in one compact UI component, allowing quick execution of default tasks and easy access to additional actions.","breadcrumbs":[{"label":"Components"},{"label":"Buttons"}]},{"id":"Kk8Lp3YxpOfUaVMD8637","title":"Checkbox","pathname":"/components/checkbox","siteSpaceId":"sitesp_oP8Qf","description":"Checkbox components are versatile interactive elements used in user interfaces to enable users to make single or multiple selections.","breadcrumbs":[{"label":"Components"}]},{"id":"ykXubToTWFG3Kf66ARrP","title":"Checkbox","pathname":"/components/checkbox/checkbox","siteSpaceId":"sitesp_oP8Qf","description":"Checkboxes allow users to select multiple options from a set of predefined options.","breadcrumbs":[{"label":"Components"},{"label":"Checkbox"}]},{"id":"LtGbdQkrRnhYY7XnqbZw","title":"Checkbox Groups","pathname":"/components/checkbox/checkbox-groups","siteSpaceId":"sitesp_oP8Qf","description":"Checkbox groups enable users to select multiple options from a predefined list, offering flexibility in choice and customization of preferences.","breadcrumbs":[{"label":"Components"},{"label":"Checkbox"}]},{"id":"bRPrJtTgl8ubepjCmcgF","title":"Cards","pathname":"/components/cards","siteSpaceId":"sitesp_oP8Qf","breadcrumbs":[{"label":"Components"}]},{"id":"QzEGHRolx7baVfNby2K9","title":"Banner Cards","pathname":"/components/cards/banner-cards","siteSpaceId":"sitesp_oP8Qf","description":"Banner cards use interactive and clickable features to engage users, enhancing the presentation of content effectively.","breadcrumbs":[{"label":"Components"},{"label":"Cards"}]},{"id":"a2BmZ03xFgEH6llploU1","title":"Event Card","pathname":"/components/cards/event-card","siteSpaceId":"sitesp_oP8Qf","description":"Event cards provide a compact, visually engaging way to display key details about upcoming events, enabling quick discovery, interaction, and navigation.","breadcrumbs":[{"label":"Components"},{"label":"Cards"}]},{"id":"HiiAQZoCwhS3HtaEN8mV","title":"Group Card","pathname":"/components/cards/group-card","siteSpaceId":"sitesp_oP8Qf","description":"Group cards provide a concise, visually structured summary of a team or group, enabling users to review key details and take action with clarity and confidence.","breadcrumbs":[{"label":"Components"},{"label":"Cards"}]},{"id":"GQiT9pixjonjRsZ6tKrP","title":"Pricing Card","pathname":"/components/cards/pricing-card","siteSpaceId":"sitesp_oP8Qf","description":"The Pricing Card is a flexible UI component designed to present pricing-based content or listings — such as real estate, SaaS plans, or subscription offerings — in a visually engaging and informative","breadcrumbs":[{"label":"Components"},{"label":"Cards"}]},{"id":"nbPY43jVqOjJk2kdWBeW","title":"Team Member Card","pathname":"/components/cards/team-member-card","siteSpaceId":"sitesp_oP8Qf","description":"Team Member Cards provide a quick, visually organized snapshot of an individual’s identity, role, and status within a team, helping users easily recognize and understand team composition at a glance.","breadcrumbs":[{"label":"Components"},{"label":"Cards"}]},{"id":"YOY8Yxp4PofpDXIsnxU4","title":"Team Section Card","pathname":"/components/cards/team-section-card","siteSpaceId":"sitesp_oP8Qf","description":"Team Section Cards provide a clean, visual introduction to individual team members by highlighting their image, name, and role, helping users quickly recognize key personnel and understand organizatio","breadcrumbs":[{"label":"Components"},{"label":"Cards"}]},{"id":"vqVYZB83sqjUcx95irSa","title":"Video Card","pathname":"/components/cards/video-card","siteSpaceId":"sitesp_oP8Qf","description":"Video cards deliver key video content with supporting details and actions in a compact, engaging layout.","breadcrumbs":[{"label":"Components"},{"label":"Cards"}]},{"id":"ymNyIDUCx3Yl9qRfAaVW","title":"Custom Cards","pathname":"/components/cards/custom-cards","siteSpaceId":"sitesp_oP8Qf","description":"Custom cards provide a flexible, user-driven layout that allows full control over the card’s appearance and content. Ideal for showcasing a variety of data types or visuals, these cards can be styled,","breadcrumbs":[{"label":"Components"},{"label":"Cards"}]},{"id":"PFc8pNEvBFbYSGEopSRu","title":"Chips","pathname":"/components/chips","siteSpaceId":"sitesp_oP8Qf","description":"Chips are small, interactive components used to display information, filter content, or trigger actions.","breadcrumbs":[{"label":"Components"}]},{"id":"tHKUqRLUHLIKQSUgS3jh","title":"Credit Card","pathname":"/components/credit-card","siteSpaceId":"sitesp_oP8Qf","description":"Credit card visualizations are used to display key information about a credit card in a visually appealing format.","breadcrumbs":[{"label":"Components"}]},{"id":"RosQFn7mAdpMwpB9GT95","title":"Credit Card Input Field","pathname":"/components/credit-card-input-field","siteSpaceId":"sitesp_oP8Qf","description":"Credit Card Input Field enables users to input and verify their card information.","breadcrumbs":[{"label":"Components"}]},{"id":"i0zaSdh8aTvIZqzPk3lB","title":"Header","pathname":"/components/header","siteSpaceId":"sitesp_oP8Qf","description":"Headers play a crucial role in structuring content, providing clear navigation and enhancing readability by organizing information into distinct, easily digestible sections for users.","breadcrumbs":[{"label":"Components"}]},{"id":"dNDFIWEmblCbrLkBbsus","title":"Home Carousel","pathname":"/components/home-carousel","siteSpaceId":"sitesp_oP8Qf","description":"Banner cards use interactive and clickable features to engage users, enhancing the presentation of content effectively.","breadcrumbs":[{"label":"Components"}]},{"id":"ogPIJbqdLiEFZee2yjfw","title":"Interactive Banner","pathname":"/components/interactive-banner","siteSpaceId":"sitesp_oP8Qf","description":"Interactive banners use dynamic elements like animations and clickable features to capture attention and encourage actions, enhancing the user experience with flexible content presentation.","breadcrumbs":[{"label":"Components"}]},{"id":"7y9QM7LVXTAcugCo96VT","title":"Menu","pathname":"/components/menu","siteSpaceId":"sitesp_oP8Qf","description":"Menus streamline navigation by categorizing links, making it easy for users to find and access different sections quickly and efficiently.","breadcrumbs":[{"label":"Components"}]},{"id":"L35Dcl7TES1Ov71qfARL","title":"Number Field","pathname":"/components/number-field","siteSpaceId":"sitesp_oP8Qf","description":"Number Input Field allows users to enter numeric values with precision, ideal for fields requiring quantities, amounts, or other numerical data.","breadcrumbs":[{"label":"Components"}]},{"id":"sRW79D8sa55WZi1lOMbT","title":"Pagination","pathname":"/components/pagination","siteSpaceId":"sitesp_oP8Qf","description":"Pagination divides content into discrete pages, allowing users to navigate through large sets of information easily and maintain an organized viewing experience.","breadcrumbs":[{"label":"Components"}]},{"id":"0WYdjMLGBpZ7BsaS0zGi","title":"Phone Number Field","pathname":"/components/phone-number-field","siteSpaceId":"sitesp_oP8Qf","description":"Phone Number Field allows users to enter and validate phone numbers in a standardized format, often with options for country code selection.","breadcrumbs":[{"label":"Components"}]},{"id":"LiMHuQjZ8AWky796LuAd","title":"Progress Indicators","pathname":"/components/progress-indicators","siteSpaceId":"sitesp_oP8Qf","description":"Progress Indicators visually display the completion status of a task or process, helping users understand how much has been completed and how much remains.","breadcrumbs":[{"label":"Components"}]},{"id":"PQggYJdnV6vkHqFysIQk","title":"Expectation Levels","pathname":"/components/progress-indicators/expectation-levels","siteSpaceId":"sitesp_oP8Qf","description":"Expectation Levels Progress Bar visually represents stages of achievement or quality standards, helping users track their progress toward meeting defined goals.","breadcrumbs":[{"label":"Components"},{"label":"Progress Indicators"}]},{"id":"KjtloNAoUSnmvoKYXbcL","title":"Progress Bar","pathname":"/components/progress-indicators/progress-bar","siteSpaceId":"sitesp_oP8Qf","description":"Progress bars are used to visually indicate the progression of a task or process.","breadcrumbs":[{"label":"Components"},{"label":"Progress Indicators"}]},{"id":"BShtTYZlEzL7aJmeeJq9","title":"Progress Circle","pathname":"/components/progress-indicators/progress-circle","siteSpaceId":"sitesp_oP8Qf","description":"Progress circle are used to visually represent the completion status of a task or process in a circular format.","breadcrumbs":[{"label":"Components"},{"label":"Progress Indicators"}]},{"id":"5d0dj4CSWpRnLRzX39Oh","title":"Progress Semi-Circle","pathname":"/components/progress-indicators/progress-semi-circle","siteSpaceId":"sitesp_oP8Qf","description":"Progress semi-circles are used to visually represent the completion status of a task or process in a semi-circular format.","breadcrumbs":[{"label":"Components"},{"label":"Progress Indicators"}]},{"id":"ONdzTUbcVlNz9VwkvkMo","title":"Quick Select Field","pathname":"/components/quick-select-field","siteSpaceId":"sitesp_oP8Qf","description":"Quick Select components are used to provide users with a fast way to choose from a list of predefined options.","breadcrumbs":[{"label":"Components"}]},{"id":"JHId8fJXM3cP8o6U6xbK","title":"Radio Buttons","pathname":"/components/radio-buttons","siteSpaceId":"sitesp_oP8Qf","description":"Radio buttons let users select one option from a group of exclusive choices, ensuring a clear and simple decision-making process in forms.","breadcrumbs":[{"label":"Components"}]},{"id":"amwkzWNxduX3qCZBqjmd","title":"Radio Input","pathname":"/components/radio-buttons/radio-input","siteSpaceId":"sitesp_oP8Qf","description":"Radio Input is used to allow users to select a single option from a set of mutually exclusive choices.","breadcrumbs":[{"label":"Components"},{"label":"Radio Buttons"}]},{"id":"arsR1DTgCE1DwcrmNrLB","title":"Radio Buttons Groups","pathname":"/components/radio-buttons/radio-buttons-groups","siteSpaceId":"sitesp_oP8Qf","description":"Radio Input is used to allow users to select a single option from a set of mutually exclusive choices.","breadcrumbs":[{"label":"Components"},{"label":"Radio Buttons"}]},{"id":"Ji4Z06LkTxULoTIYkG61","title":"Search Input Field","pathname":"/components/search-input-field","siteSpaceId":"sitesp_oP8Qf","description":"Search Input Field is used to allow users to enter search queries and filter through content.","breadcrumbs":[{"label":"Components"}]},{"id":"rSSgBjhTq9YdOtI1YBGf","title":"Segmentation","pathname":"/components/segmentation","siteSpaceId":"sitesp_oP8Qf","description":"Segmentation in user interfaces categorizes content and controls into distinct groups, enhancing navigation and usability through clear, manageable selections.","breadcrumbs":[{"label":"Components"}]},{"id":"ITPfz7mglHEKqoZJnI3U","title":"Segmented Controls","pathname":"/components/segmentation/segmented-controls","siteSpaceId":"sitesp_oP8Qf","description":"Segmented Controls are used for areas of the UI that require simple configuration options in a compact manner","breadcrumbs":[{"label":"Components"},{"label":"Segmentation"}]},{"id":"FqcSrgMYVEd3LbNwdGLN","title":"Segmented Tabs","pathname":"/components/segmentation/segmented-tabs","siteSpaceId":"sitesp_oP8Qf","description":"Segmented tabs are used in user interfaces to categorize and display content in an organized, compact manner, allowing for easy navigation between different sections.","breadcrumbs":[{"label":"Components"},{"label":"Segmentation"}]},{"id":"iDjHjhzCdyeXlGymtfk7","title":"Select Input Field","pathname":"/components/select-input-field","siteSpaceId":"sitesp_oP8Qf","description":"Select Input Field allows users to choose an option from a predefined list, making it easy to select a specific value while ensuring data consistency.","breadcrumbs":[{"label":"Components"}]},{"id":"M1EsDBYZVZZMpGhoHfaP","title":"Slider","pathname":"/components/slider","siteSpaceId":"sitesp_oP8Qf","description":"Sliders are used to allow users to select a value from a range by dragging a handle along a track.","breadcrumbs":[{"label":"Components"}]},{"id":"gQGq3G4UTLfrRhVJY1bB","title":"Steppers","pathname":"/components/steppers","siteSpaceId":"sitesp_oP8Qf","description":"Step indicators are used to show users their current position within a sequence of steps.","breadcrumbs":[{"label":"Components"}]},{"id":"HCdc6YUr6emJclzlSVuh","title":"Timeline","pathname":"/components/steppers/timeline","siteSpaceId":"sitesp_oP8Qf","description":"A Timeline is a navigation component that guides users through sequential steps in a process, displaying progress and providing clear direction across tasks.","breadcrumbs":[{"label":"Components"},{"label":"Steppers"}]},{"id":"LfW08NnHwsORJGwRT7T0","title":"Vertical Stepper","pathname":"/components/steppers/vertical-stepper","siteSpaceId":"sitesp_oP8Qf","description":"Step indicators are used to show users their current position within a sequence of steps.","breadcrumbs":[{"label":"Components"},{"label":"Steppers"}]},{"id":"52ZhSxLV7l02PdvOnQjw","title":"Sticky Bar","pathname":"/components/sticky-bar","siteSpaceId":"sitesp_oP8Qf","description":"A sticky bar is a fixed navigation element that provides continuous access to essential actions, links, or tools as users scroll through a page.","breadcrumbs":[{"label":"Components"}]},{"id":"VEStpFJRv6fLskBKQBst","title":"Tabs","pathname":"/components/tabs","siteSpaceId":"sitesp_oP8Qf","description":"Tabs organize content into separate sections within the same interface, allowing users to switch between views without navigating away from the page.","breadcrumbs":[{"label":"Components"}]},{"id":"VtFDFZNJHmdBvk5qCNRo","title":"Text Area Field","pathname":"/components/text-area-field","siteSpaceId":"sitesp_oP8Qf","description":"Text Area is a multi-line text input component used to capture long-form user input.","breadcrumbs":[{"label":"Components"}]},{"id":"zhGPB8icxDMszi2sB85f","title":"Text Field","pathname":"/components/text-field","siteSpaceId":"sitesp_oP8Qf","description":"Text Field allows users to input text into a UI. It is commonly used in forms and dialogs.","breadcrumbs":[{"label":"Components"}]},{"id":"Rom2QtVBO98m6E09XcvC","title":"Toggle Switch","pathname":"/components/toggle-switch","siteSpaceId":"sitesp_oP8Qf","description":"Toggle Switch is used to turn a setting on or off. It provides a clear visual indication of the current state.","breadcrumbs":[{"label":"Components"}]},{"id":"gPzR1OlWLztNcNWuXD3n","title":"Tooltip","pathname":"/components/tooltip","siteSpaceId":"sitesp_oP8Qf","description":"Tooltips are used to provide additional information when users hover over, focus on, or tap an element.","breadcrumbs":[{"label":"Components"}]}]}