by default, it can render any HTML element and supports styling via props.`,\n platforms: ['react'],\n icon: MdOutlineCheckBoxOutlineBlank\n },\n {\n href: '/components/text',\n label: 'Text',\n body: `The Text primitive is used to display simple strings of text in an interface.`,\n platforms: ['react'],\n icon: MdTextFormat\n },\n {\n href: '/components/heading',\n label: 'Heading',\n body: `This is a separate primitive from Text for semantic purposes. The Heading primitive maps to an tag, and Text maps to a
tag.`,\n platforms: ['react'],\n icon: MdFormatSize\n },\n {\n href: '/components/icon',\n label: 'Icon',\n body: `The icon component displays simple vector graphics for use in other components like Buttons.`,\n platforms: ['react'],\n icon: MdInsertEmoticon\n },\n {\n href: '/components/image',\n label: 'Image',\n body: `The Image primitive can be used to display responsive images.`,\n platforms: ['react'],\n icon: MdOutlineImage\n },\n {\n href: '/components/divider',\n label: 'Divider',\n body: `A Divider creates separations in content. Dividers can help organize content and establish visual rhythm.`,\n platforms: ['react'],\n icon: MdHorizontalRule\n },\n {\n href: '/components/scrollview',\n label: 'ScrollView',\n body: `ScrollView is essentially a View that allows scrolling of its inner contents.`,\n platforms: ['react'],\n icon: MdSwapVert\n }\n].sort(sortByLabel)\n\nexport const connectedComponents = [\n {\n href: '/connected-components/authenticator',\n label: 'Authenticator',\n body: 'The Authenticator component adds complete authentication flows to your application with minimal boilerplate.',\n platforms: ['react', 'vue', 'angular', 'flutter']\n },\n {\n href: '/connected-components/authenticator/configuration',\n label: 'Configuration',\n platforms: ['react', 'vue', 'angular', 'flutter'],\n tertiary: true\n },\n {\n href: '/connected-components/authenticator/customization',\n label: 'Customization',\n platforms: ['react', 'vue', 'angular', 'flutter'],\n tertiary: true\n },\n {\n href: '/connected-components/authenticator/headless',\n label: 'Headless Usage',\n platforms: ['react', 'vue', 'angular', 'flutter'],\n tertiary: true\n },\n {\n href: '/connected-components/geo',\n label: 'Geo',\n body: 'Amplify UI Geo provides UI components for maps and location search built on top of Amazon Location Service.',\n platforms: ['react']\n }\n]\n\nexport const dataDisplayComponents = [\n {\n href: '/components/badge',\n label: 'Badge',\n body: `A Badge is a small visual element to denote a status or message about an item. A small, color-coded visual element that contains letters or numbers, that you can use to label, categorize, or organize items.`,\n platforms: ['react'],\n icon: MdCheckCircle\n },\n {\n href: '/components/rating',\n label: 'Rating',\n body: 'The Rating component displays a read-only star rating of a product or service.',\n platforms: ['react'],\n icon: MdStarBorder\n }\n].sort(sortByLabel)\n\nexport const feedbackComponents: ComponentNavItem[] = [\n {\n href: '/components/alert',\n label: 'Alert',\n body: `An Alert displays a brief, important message in a way that attracts the user's attention without interrupting the user's task. Alerts are typically intended to be read out dynamically by a screen reader.`,\n platforms: ['react'],\n icon: MdWarning\n },\n {\n href: '/components/placeholder',\n label: 'Placeholder',\n body: `The Placeholder component is used to fill out the interface while content is loaded asynchronously.`,\n platforms: ['react'],\n icon: MdNotes\n },\n {\n href: '/components/loader',\n label: 'Loader',\n body: `Loaders provide a visual cue that an action is either processing or awaiting a result. They are used to help the customer understand the system is working to fulfill a request.`,\n platforms: ['react'],\n icon: MdRefresh\n }\n].sort(sortByLabel)\n\nexport const inputComponents = [\n {\n href: '/components/textareafield',\n label: 'TextArea Field',\n body: `The TextAreaField form primitive can be used allow users to input multiline text content.`,\n platforms: ['react'],\n icon: MdSystemUpdateAlt\n },\n {\n href: '/components/textfield',\n label: 'Text Field',\n body: `The TextField form primitive can be used allow users to input text content.`,\n platforms: ['react'],\n icon: MdInput\n },\n {\n href: '/components/selectfield',\n label: 'Select Field',\n body: 'The SelectField primitive allows you to create a drop-down list.',\n platforms: ['react'],\n icon: MdUnfoldMore\n },\n {\n href: '/components/sliderfield',\n label: 'Slider Field',\n body: `Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.`,\n platforms: ['react'],\n icon: MdTune\n },\n {\n href: '/components/stepperfield',\n label: 'Stepper Field',\n body: `A StepperField is a number input with buttons to increase or decrease the value.`,\n platforms: ['react'],\n icon: MdAddBox\n },\n {\n href: '/components/searchfield',\n label: 'Search Field',\n body: `SearchField accepts query text for search.`,\n platforms: ['react'],\n icon: MdSearch\n },\n {\n href: '/components/passwordfield',\n label: 'Password Field',\n body: `PasswordField allows users to input passwords, featuring full password manager support and an optional show/hide password button for user convenience - Amplify UI`,\n platforms: ['react'],\n icon: MdPassword\n },\n {\n href: '/components/phonenumberfield',\n label: 'Phone Number Field',\n body: `The PhoneNumberField form primitive allows users to input a phone number`,\n platforms: ['react'],\n icon: MdSmartphone\n },\n {\n href: '/components/switchfield',\n label: 'Switch Field',\n body: `The SwitchField form primitive is a toggleable input type with a checked (on) and unchecked (off) state.`,\n platforms: ['react'],\n icon: MdToggleOff\n },\n {\n href: '/components/radiogroupfield',\n label: 'Radio Group Field',\n body: `A RadioGroupField allows users to select a single option from a list of mutually exclusive options.`,\n platforms: ['react'],\n icon: MdRadioButtonChecked\n },\n {\n href: '/components/checkboxfield',\n label: 'Checkbox Field',\n body: `CheckboxField is used to mark an individual item as selected, or to select multiple items from a list of individual items.`,\n platforms: ['react'],\n icon: MdCheckBox\n },\n {\n href: '/components/togglebutton',\n label: 'Toggle Button',\n body: 'A toggle button represents an on/off state for some configuration, for example switching on/off bold text in a text editor.',\n platforms: ['react'],\n icon: MdEditAttributes\n },\n {\n href: '/components/button',\n label: 'Button',\n body: `The Button primitive is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.`,\n platforms: ['react'],\n icon: MdTouchApp\n }\n].sort(sortByLabel)\n\nexport const layoutComponents = [\n {\n href: '/components/card',\n label: 'Card',\n body: `The Card component can be used to group related pieces of content.`,\n platforms: ['react'],\n icon: MdWebAsset\n },\n {\n href: '/components/collection',\n label: 'Collection',\n body: `A Collection wraps Flex and Grid components, and provides a way to display items in a collection from a data source.`,\n platforms: ['react'],\n icon: MdSplitscreen\n },\n {\n href: '/components/flex',\n label: 'Flex',\n body: `A layout container using Flexbox.`,\n platforms: ['react'],\n icon: MdTableRows\n },\n {\n href: '/components/grid',\n label: 'Grid',\n body: 'A layout container using CSS Grid',\n platforms: ['react'],\n icon: MdGridView\n },\n {\n href: '/components/table',\n label: 'Table',\n body: `The Table primitive provides users with a styled and customizable table element.`,\n platforms: ['react'],\n icon: MdTableChart\n },\n {\n href: '/components/expander',\n label: 'Expander',\n body: `The Expander primitive enables users to expand or collapse a set of sections.`,\n platforms: ['react'],\n icon: MdExpand\n },\n {\n href: '/components/pagination',\n label: 'Pagination',\n body: `Pagination provides navigation to allow customers to move between large sets of content that are distributed across multiple pages.`,\n platforms: ['react'],\n icon: MdMoreHoriz\n }\n].sort(sortByLabel)\n\nexport const utilityComponents = [\n {\n href: '/components/visuallyhidden',\n label: 'Visually Hidden',\n body: `The Visually Hidden component is used to visually hide content while leaving it available to screen readers.`,\n platforms: ['react'],\n icon: MdDisabledVisible\n }\n].sort(sortByLabel)\n\nexport const navigationComponents: ComponentNavItem[] = [\n {\n href: '/components/link',\n label: 'Link',\n body: `Links are customizable and themable elements used for Navigation. By default Links render an anchor tag but can be configured to be used with routing libraries.`,\n platforms: ['react'],\n icon: MdLink\n },\n {\n href: '/components/menu',\n label: 'Menu',\n body: `Menu provides an accessible, interactive menu for selecting actions within an application. Dropdown menu is collision-aware and will automatically change location based on available space.`,\n platforms: ['react'],\n icon: MdMenu\n },\n {\n href: '/components/tabs',\n label: 'Tabs',\n body: `Tabs organize content into multiple sections and allow users to navigate between them.`,\n platforms: ['react'],\n icon: MdTab\n }\n].sort(sortByLabel)\n\nexport const primitiveComponents = [\n {\n components: [\n {\n href: '/components',\n label: 'Overview',\n platforms: ['react']\n }\n ]\n },\n {\n heading: 'Base',\n components: baseComponents\n },\n {\n heading: 'Feedback',\n components: feedbackComponents\n },\n {\n heading: 'Navigation',\n components: navigationComponents\n },\n {\n heading: 'Inputs',\n components: inputComponents\n },\n {\n heading: 'Layout',\n components: layoutComponents\n },\n {\n heading: 'Data display',\n components: dataDisplayComponents\n },\n {\n heading: 'Utilities',\n components: utilityComponents\n }\n]\n\nexport const legacyComponents = [\n {\n href: '/legacy-components/chatbot',\n label: 'Chatbot',\n body: 'Chatbot automatically renders a complete chat messaging interface that can be used out-of-the-box, or it can be customized using theming support.',\n platforms: ['react', 'vue', 'angular']\n },\n {\n href: '/legacy-components/storage',\n label: 'Storage',\n body: 'A set of components to help interact with S3 storage.',\n platforms: ['react', 'vue', 'angular']\n }\n]\n\nexport const guides = [\n {\n href: '/guides',\n label: 'Overview'\n },\n {\n href: '/guides/css-in-js',\n label: 'CSS in JS',\n platforms: ['react', 'vue', 'angular']\n },\n {\n href: '/guides/auth-protected',\n label: 'Protected Routes',\n platforms: ['react']\n }\n]\n\nexport const gettingStarted = [\n {\n href: '/getting-started/introduction',\n label: 'Introduction'\n }\n]\n\nexport const theming = [\n {\n href: '/theming',\n label: 'Overview'\n },\n {\n href: '/theming/responsive',\n label: 'Responsive',\n platforms: ['react']\n },\n {\n href: '/theming/default-theme',\n label: 'Default Theme',\n platforms: ['react', 'vue', 'angular']\n },\n {\n href: '/theming/default-theme/colors',\n label: 'Colors',\n platforms: ['react', 'vue', 'angular'],\n tertiary: true\n },\n {\n href: '/theming/default-theme/typography',\n label: 'Typography',\n platforms: ['react', 'vue', 'angular'],\n tertiary: true\n },\n {\n href: '/theming/default-theme/sizes',\n label: 'Sizes',\n platforms: ['react', 'vue', 'angular'],\n tertiary: true\n },\n {\n href: '/theming/dark-mode',\n label: 'Dark mode'\n },\n {\n href: '/theming/css-variables',\n label: 'CSS variables',\n platforms: ['react', 'vue', 'angular']\n },\n {\n href: '/theming/style-props',\n label: 'Style Props',\n platforms: ['react']\n }\n]\n\nexport const DISCORD = 'https://discord.gg/amplify'\nexport const COMMUNITY = 'https://amplify.aws/community'\nexport const COMMUNITY_EVENTS = 'https://amplify.aws/community/events'\nexport const COMMUNITY_POSTS = 'https://amplify.aws/community/posts'\nexport const COMMUNITY_CONTRIBUTORS =\n 'https://amplify.aws/community/contributors'\nexport const COMMUNITY_NEWSLETTERS = 'https://amplify.aws/community/newsletters'\nexport const TWITTER = 'https://twitter.com/AWSAmplify'\nexport const GITHUB = 'https://github.com/aws-amplify'\nexport const TERMS = 'https://aws.amazon.com/terms/'\nexport const PRIVACY = 'https://aws.amazon.com/privacy/'\nexport const MARKETING = 'https://aws.amazon.com/amplify/framework/'\nexport const AWS_USER_GUIDE =\n 'https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html'\nexport const IOS_REFERENCE = 'https://aws-amplify.github.io/amplify-ios/docs/'\nexport const ANDROID_REFERENCE =\n 'https://aws-amplify.github.io/aws-sdk-android/docs/reference/'\nexport const JS_REFERENCE = 'https://aws-amplify.github.io/amplify-js/api/'\n\nexport const GITHUB_REPO = `${GITHUB}/amplify-ui/`\nexport const GITHUB_REPO_FILE = `${GITHUB_REPO}/blob/main/`\n","// haimtran 25 jul 2022\n// BlogLayout, ComponentLayout and so on\n\nimport { PageContainer } from 'components/page-container'\nimport { Sidebar } from 'components/sidebar/sidebar'\nimport { Heading } from 'components/page-container'\nimport React from 'react'\nimport { RouteItem } from 'utils/get-route-context'\nimport {\n serverlessComponents,\n applicationComponents,\n archComponents,\n mlComponents,\n swiftuiComponents,\n terraformComponents,\n eksComponents,\n webComponents,\n dataComponents,\n dlComponents,\n programmingComponents,\n databaseComponents\n} from 'data/links'\n\nexport function getRoutes(slug: string): RouteItem[] {\n const routes = [\n {\n title: 'Architect',\n path: '/arch',\n open: true,\n heading: true,\n sort: true,\n routes: archComponents.map(item => {\n return {\n title: item.label,\n path: item.href\n }\n }),\n summarize: false\n },\n {\n title: 'Serverless',\n path: '/serverless',\n open: true,\n heading: true,\n sort: true,\n routes: serverlessComponents.map(item => {\n return {\n title: item.label,\n path: item.href\n }\n }),\n summarize: false\n },\n {\n title: 'Application',\n path: '/application',\n open: true,\n heading: true,\n sort: true,\n routes: applicationComponents.map(item => {\n return {\n title: item.label,\n path: item.href\n }\n }),\n summarize: false\n },\n {\n title: 'Machine Learning',\n path: '/ml',\n open: true,\n heading: true,\n sort: true,\n routes: mlComponents.map(item => {\n return {\n title: item.label,\n path: item.href\n }\n }),\n summarize: false\n },\n {\n title: 'SwiftUI',\n path: '/swiftui',\n open: true,\n heading: true,\n sort: true,\n routes: swiftuiComponents.map(item => {\n return {\n title: item.label,\n path: item.href\n }\n }),\n summarize: false\n },\n {\n title: 'Terraform',\n path: '/terraform',\n open: true,\n heading: true,\n sort: true,\n routes: terraformComponents.map(item => {\n return {\n title: item.label,\n path: item.href\n }\n }),\n summarize: false\n },\n {\n title: 'Amazon EKS',\n path: '/eks',\n open: true,\n heading: true,\n sort: true,\n routes: eksComponents.map(item => {\n return {\n title: item.label,\n path: item.href\n }\n }),\n summarize: false\n },\n {\n title: 'Web',\n path: '/web',\n open: true,\n heading: true,\n sort: true,\n routes: webComponents.map(item => {\n return {\n title: item.label,\n path: item.href\n }\n }),\n summarize: false\n },\n {\n title: 'Data',\n path: '/Dataengineer',\n open: true,\n heading: true,\n sort: true,\n routes: dataComponents.map(item => {\n return {\n title: item.label,\n path: item.href\n }\n }),\n summarize: false\n },\n {\n title: 'Deep Learning',\n path: '/dl',\n open: true,\n heading: true,\n sort: true,\n routes: dlComponents.map(item => {\n return {\n title: item.label,\n path: item.href\n }\n }),\n summarize: false\n },\n {\n title: 'Programming',\n path: '/programming',\n open: true,\n heading: true,\n sort: true,\n routes: programmingComponents.map(item => {\n return {\n title: item.label,\n path: item.href\n }\n }),\n summarize: false\n },\n {\n title: 'Database',\n path: '/database',\n open: true,\n heading: true,\n sort: true,\n routes: databaseComponents.map(item => {\n return {\n title: item.label,\n path: item.href\n }\n }),\n summarize: false\n }\n ]\n\n // check slug and return\n if (slug === '/') {\n return [routes[0]]\n }\n\n // architect\n if (slug.startsWith('/arch')) {\n return [routes[0]]\n }\n\n // serverless\n if (slug.startsWith('/serverless')) {\n return [routes[1]]\n }\n\n // application\n if (slug.startsWith('/application')) {\n return [routes[2]]\n }\n\n // ml\n if (slug.startsWith('/ml')) {\n return [routes[3]]\n }\n\n // swiftui\n if (slug.startsWith('/swiftui')) {\n return [routes[4]]\n }\n\n // terraform\n if (slug.startsWith('/terraform')) {\n return [routes[5]]\n }\n\n // eks\n if (slug.startsWith('/eks')) {\n return [routes[6]]\n }\n\n // web\n if (slug.startsWith('/web')) {\n return [routes[7]]\n }\n\n // dataengineer\n if (slug.startsWith('/dataengineer')) {\n return [routes[8]]\n }\n\n // dl\n if (slug.startsWith('/dl')) {\n return [routes[9]]\n }\n\n // programming\n if (slug.startsWith('/programming')) {\n return [routes[10]]\n }\n\n // database\n if (slug.startsWith('/database')) {\n return [routes[11]]\n }\n\n return routes\n}\n\nexport default function DefaultLayout(props: {\n children: React.ReactNode\n frontMatter: any\n hidToc?: boolean\n maxWidth?: string\n}) {\n const frontMatterSample = {\n slug: '/',\n title: 'Frontmatter Tittle',\n headings: [\n {\n level: 'h2',\n text: 'Setup',\n id: '123'\n } as Heading,\n {\n level: 'h2',\n text: 'Synthesize',\n id: '124'\n } as Heading,\n {\n level: 'h3',\n text: 'Deploy',\n id: '125'\n } as Heading\n ]\n }\n\n const { children, frontMatter, ...rest } = props\n\n const routes = getRoutes(frontMatter.slug)\n\n return (\n }\n >\n {children}\n \n )\n}\n","import { Box, BoxProps } from '@chakra-ui/react'\nimport React from 'react'\n\nfunction CodeContainer(props: BoxProps) {\n return (\n \n )\n}\n\nexport default CodeContainer\n","import { Button, ButtonProps, useClipboard } from '@chakra-ui/react'\nimport React from 'react'\nimport { t } from 'utils/i18n'\n\ninterface CopyButtonProps extends ButtonProps {\n code: string\n}\n\nfunction CopyButton({ code, ...props }: CopyButtonProps) {\n const { hasCopied, onCopy } = useClipboard(code)\n\n return (\n \n )\n}\n\nexport default CopyButton\n","import React from 'react'\n\nexport const liveEditorStyle: React.CSSProperties = {\n fontSize: 'xs',\n // fontSize: 14,\n overflowX: 'auto',\n fontFamily: 'SF Mono, Menlo, monospace'\n}\n\nexport const liveErrorStyle: React.CSSProperties = {\n fontFamily: 'SF Mono, Menlo, monospace',\n // fontSize: 14,\n fontSize: 'xs',\n padding: '1em',\n overflowX: 'auto',\n color: 'white',\n backgroundColor: 'red'\n}\n","import { chakra } from '@chakra-ui/react'\nimport * as React from 'react'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const Anchor = React.forwardRef((props: any, ref: any) => (\n \n))\n","import { chakra, HTMLChakraProps, useDimensions } from '@chakra-ui/react'\nimport React, { useRef } from 'react'\n\nexport const InlineCode = (props: HTMLChakraProps<'code'>) => {\n const codeRef = useRef(null)\n const dimensions = useDimensions(codeRef)\n\n /**\n * Value (in pixels) comes from the minimum width of\n * the `li` parent element in the changelog page\n * before the layout shifts to mobile.\n */\n const MIN_CONTENT_WIDTH = 363\n const shouldWrap = dimensions?.borderBox.width > MIN_CONTENT_WIDTH\n\n return (\n \n )\n}\n","import * as ComponentProps from '@chakra-ui/props-docs'\nimport { Code, Flex, HStack, Stack, chakra, theme } from '@chakra-ui/react'\nimport { isObject, isString } from '@chakra-ui/utils'\nimport Link from 'next/link'\nimport * as React from 'react'\nimport { Anchor } from 'components/mdx-components/anchor'\nimport { InlineCode } from 'components/mdx-components/inline-code'\n// import { convertBackticksToInlineCode } from 'utils/convert-backticks-to-inline-code'\nimport { t } from 'utils/i18n'\n\n/**\n * A map of components that use foreign theme key.\n * The key is name of the component and value is the theme key it uses.\n */\nconst themeComponentKeyAliases = {\n AlertDialog: 'Modal',\n IconButton: 'Button'\n}\n\nexport type PropsTableProps = {\n /**\n * displayName of the target component\n */\n of: keyof typeof ComponentProps\n /**\n * prop names to omit\n */\n omit?: string[] | null\n /**\n * Render only given prop names\n * Has precedence over `omit`\n */\n only?: string[] | null\n}\n\nconst PropsTable = ({\n of,\n omit = [\n 'isTruncated',\n 'layerStyle',\n 'noOfLines',\n 'textStyle',\n 'orientation',\n 'styleConfig'\n ],\n only\n}: PropsTableProps) => {\n const propList = React.useMemo(\n () => makePropsTable({ of, omit, only }),\n [of, omit, only]\n )\n\n if (!propList.length) {\n // this error breaks the build to notify you when there would be an empty table\n throw new Error(\n `No props left to render for component ${of}.\nRemove the use of for this component in the docs.`\n )\n }\n\n return (\n \n {propList.map(prop => (\n \n \n \n \n {prop.name}\n {prop.required && (\n \n {t('component.props-table.required')}\n \n )}\n \n \n \n