Seperate components into internal-only category

polaris.shopify.com/content/components/deprecated/contextual-save-bar.mdx

@@ -0,0 +1,40 @@
+---
+title: Contextual save bar
+shortDescription: Informs merchants of their options once they have made changes to a form on the page or while creating a new object.
+category: Deprecated
+keywords:
+  - form
+  - forms
+  - action
+  - actions
+  - save
+  - cancel
+  - logo
+examples:
+  - fileName: contextual-save-bar-default.tsx
+    title: Default
+    description: Use the save action to provide an opportunity to save changes. Use the discard action to allow merchants the option to discard their changes. Use the message to provide helpful context on the nature of those changes.
+  - fileName: contextual-save-bar-with-flush-contents.tsx
+    title: With flush contents
+    description: Use the alignContentFlush flag when you want to omit the logo from the contextual save bar and repurpose that space to extend the message contents fully to the left side of the container.
+  - fileName: contextual-save-bar-with-full-width.tsx
+    title: With full width
+    description: Use the fullWidth flag when you want to remove the default max-width set on the contextual save bar.
+previewImg: /images/components/deprecated/contextual-save-bar.png
+status: Deprecated
+---
+
+# {frontmatter.title}
+
+<Lede>
+
+The contextual save bar tells merchants their options once they have made changes to a form on the page. This component is also shown while creating a new object like a product or customer. Merchants can use this component to save or discard their work.
+
+</Lede>
+
+<StatusBanner status={frontmatter.status}>
+  This component is no longer supported. Please use the [App Bridge Contextual
+  Save Bar
+  API](https://shopify.dev/docs/api/app-bridge-library/reference/contextual-save-bar)
+  instead.
+</StatusBanner>

polaris.shopify.com/content/components/deprecated/frame.mdx

@@ -0,0 +1,40 @@
+---
+title: Frame
+shortDescription: Creates the structure of the Shopify admin. All of the main sections of the admin are nested in the frame.
+category: Deprecated
+keywords:
+  - navigation
+  - nav
+  - links
+  - primary navigation
+  - main navigation
+  - global
+  - frame
+  - sidebar
+  - side bar
+  - loading
+  - top bar
+  - menu
+  - toast
+examples:
+  - fileName: frame-in-an-application.tsx
+    title: In an application
+    description: Use to present the frame structure and all of its elements.
+  - fileName: frame-with-an-offset.tsx
+    title: With an offset
+    description: Use to present the frame structure and all of its elements with an offset provided to the theme.
+previewImg: /images/components/deprecated/frame.png
+status: Deprecated
+---
+
+# {frontmatter.title}
+
+<Lede>
+
+The frame component, while not visible in the user interface itself, provides the structure for an application. It wraps the main elements and houses the primary [navigation](https://polaris.shopify.com/components/deprecated/navigation), [top bar](https://polaris.shopify.com/components/top-bar), [toast](https://polaris.shopify.com/components/deprecated/toast), and [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) components.
+
+</Lede>
+
+<StatusBanner status={frontmatter.status}>
+  This component is no longer supported.
+</StatusBanner>

polaris.shopify.com/content/components/deprecated/index.mdx

@@ -2,8 +2,7 @@
 title: Deprecated
 shortDescription: Deprecated components will be removed in future major versions of Polaris. They should be avoided and will show warnings.
 expanded: true
-order: 12
-previewImg: /images/components/deprecated.png
+order: 13
 ---
 
 # {frontmatter.title}

polaris.shopify.com/content/components/deprecated/loading.mdx

@@ -0,0 +1,30 @@
+---
+title: Loading
+shortDescription: Used to indicate to merchants that a page is loading or an upload is processing.
+category: Deprecated
+keywords:
+  - spinner
+  - loader
+  - loading
+  - loading bar
+examples:
+  - fileName: loading-default.tsx
+    title: Default
+    description: Use to indicate that the page is loading.
+previewImg: /images/components/deprecated/loading.png
+status: Deprecated
+---
+
+# {frontmatter.title}
+
+<Lede>
+
+The loading component is used to indicate to merchants that a page is loading or an upload is processing.
+
+</Lede>
+
+<StatusBanner status={frontmatter.status}>
+  This component is no longer supported. Please use the [App Bridge Loading
+  API](https://shopify.dev/docs/api/app-bridge-library/reference/loading)
+  instead.
+</StatusBanner>

polaris.shopify.com/content/components/deprecated/modal.mdx

@@ -0,0 +1,74 @@
+---
+title: Modal
+shortDescription: Used to interrupt merchants with urgent information, details, or actions.
+category: Deprecated
+keywords:
+  - modal
+  - src
+  - open
+  - title
+  - width
+  - height
+  - primary action
+  - secondary action
+  - tertiary action
+  - destructive action
+  - footer
+  - instant
+  - sectioned
+  - large
+  - small
+  - limit height
+  - loading
+  - outer wrapper
+  - iframe
+  - overlay
+  - dialog
+  - alert
+examples:
+  - fileName: modal-default.tsx
+    title: Default
+    description: Use as the default option for a modal.
+  - fileName: modal-with-primary-action.tsx
+    title: With primary action
+    description: Use to let merchants take a key action.
+  - fileName: modal-with-destructive-primary-action.tsx
+    title: With destructive primary action
+    description: Use to let merchants take a key action that cannot be undone.
+  - fileName: modal-with-primary-and-secondary-actions.tsx
+    title: With primary and secondary actions
+    description: Use to let merchants take key actions at the bottom of the modal.
+  - fileName: modal-large.tsx
+    title: Large
+    description: Use when you need to increase the width of your modal.
+  - fileName: modal-small.tsx
+    title: Small
+    description: Use when you need to decrease the width of your modal.
+  - fileName: modal-without-a-title.tsx
+    title: Without a title
+    description: A title is required for accessibility, but you may hide it.
+  - fileName: modal-with-scroll-listener.tsx
+    title: With scroll listener
+    description: Use to implement infinite scroll of modal content.
+  - fileName: modal-with-activator-ref.tsx
+    title: With activator ref
+    description: Provide an activator ref when it’s more convenient than providing an element. This ensures proper focus management when closing the modal. See the [accessibility features of a modal](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) for more information regarding focus.
+  - fileName: modal-without-an-activator-prop.tsx
+    title: Without an activator prop
+    description: Use an external activator when technical limitations prevent you from passing the activator as an element or a ref. Make sure to focus the activator on close when choosing this approach. See the [accessibility features of a modal](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) for more information regarding focus.
+previewImg: /images/components/deprecated/modal.png
+status: Deprecated
+---
+
+# {frontmatter.title}
+
+<Lede>
+
+Modals are overlays that require merchants to take an action before they can continue interacting with the rest of Shopify. They can be disruptive and should be used thoughtfully and sparingly.
+
+</Lede>
+
+<StatusBanner status={frontmatter.status}>
+  This component is no longer supported. Please use the [App Bridge Modal
+  API](https://shopify.dev/docs/api/app-bridge-library/reference/modal) instead.
+</StatusBanner>

polaris.shopify.com/content/components/deprecated/navigation.mdx

@@ -0,0 +1,67 @@
+---
+title: Navigation
+category: Deprecated
+keywords:
+  - navigation
+  - nav
+  - links
+  - primary navigation
+  - main navigation
+  - frame
+  - sidebar
+  - side bar
+examples:
+  - fileName: navigation-default.tsx
+    title: Default
+    description: Use to present a navigation menu in the [frame](https://polaris.shopify.com/components/frame).
+  - fileName: navigation-with-multiple-secondary-navigations.tsx
+    title: With multiple secondary navigations
+    description: Use to present a secondary action, related to a section and to title the section.
+  - fileName: navigation-with-an-active-root-item-with-secondary-navigation-items.tsx
+    title: With an active root item with secondary navigation items
+    description: Use to present a secondary action, related to a section and to title the section.
+  - fileName: navigation-with-a-secondary-action-for-a-section-and-a-section-title.tsx
+    title: With a secondary action for a section and a section title
+    description: Use to present a secondary action, related to a section and to title the section.
+  - fileName: navigation-with-a-secondary-action-for-an-item.tsx
+    title: With a secondary action for an item
+    description: Use to add a different action for an item than the main action, like to view or add something.
+  - fileName: navigation-with-multiple-secondary-actions.tsx
+    title: With multiple secondary actions
+    description: Used to add one or two secondary actions to the navigation item.
+  - fileName: navigation-with-section-rollup.tsx
+    title: With section rollup
+    description: Use to show a limited number of items in a section with an option to expand the remaining items.
+  - fileName: navigation-with-section-separator.tsx
+    title: With section separator
+    description: Use to add a horizontal line below the section.
+  - fileName: navigation-with-various-states-and-secondary-elements.tsx
+    title: With various states and secondary elements
+    description: This example showcases the many elements that can compose a navigation, especially useful for testing purposes.
+  - fileName: navigation-with-truncation-for-various-states.tsx
+    title: With truncation active for various states
+    description: This example showcases how elements are displayed with the truncateText prop as true for various states.
+  - fileName: navigation-with-aria-labelledby.tsx
+    title: With aria-labelledby
+    description: This example shows how to add an aria-labelledby to add a hidden label to the `nav` element.
+  - fileName: navigation-using-major-icons.tsx
+    title: Using Major icons
+    description: This example shows how to use the shouldResizeIcon prop when using Major icons
+previewImg: /images/components/deprecated/navigation.png
+status: Deprecated
+---
+
+# {frontmatter.title}
+
+<Lede>
+
+The navigation component is used to display the primary navigation in the sidebar of the [frame](https://polaris.shopify.com/components/frame) of an application. Navigation includes a list of links that merchants use to move between sections of the application.
+
+</Lede>
+
+<StatusBanner status={frontmatter.status}>
+  This component is no longer supported. Please use the [App Bridge Navigation
+  Menu
+  API](https://shopify.dev/docs/api/app-bridge-library/reference/navigation-menu)
+  instead.
+</StatusBanner>

polaris.shopify.com/content/components/deprecated/sheet.mdx

@@ -78,5 +78,5 @@ The sheet component is best used in cases where the merchant needs to see elemen
 
 ## Related components
 
-- To offer an action before merchants can go to the next step in the flow, use the [modal component](https://polaris.shopify.com/components/overlays/modal)
+- To offer an action before merchants can go to the next step in the flow, use the [modal component](https://polaris.shopify.com/components/deprecated/modal)
 - To present a small amount of content or a menu of actions in a non-blocking overlay, use the [popover component](https://polaris.shopify.com/components/overlays/popover)

polaris.shopify.com/content/components/deprecated/toast.mdx

@@ -0,0 +1,48 @@
+---
+title: Toast
+shortDescription: A non-disruptive message that provides quick feedback on the outcome of an action.
+category: Deprecated
+keywords:
+  - toast
+  - flash message
+  - snackbar
+  - notification bar
+  - temporary feedback
+  - timed feedback
+  - message
+  - overlay
+  - popup
+  - iframe
+  - duration
+examples:
+  - fileName: toast-default.tsx
+    title: Default
+    description: Use to convey general confirmation or actions that aren’t critical. For example, you might show a toast message to inform the merchant that their recent action was successful.
+  - fileName: toast-multiple-messages.tsx
+    title: Multiple messages
+    description: Use multiple toast messages to inform the merchant about distinct actions.
+  - fileName: toast-with-custom-duration.tsx
+    title: With custom duration
+    description: Use to shorten or lengthen the default duration of 5000 milliseconds.
+  - fileName: toast-with-action.tsx
+    title: With action
+    description: Use when a merchant has the ability to act on the message. For example, to undo a change or retry an action.
+  - fileName: toast-error.tsx
+    title: Error
+    description: Although error toast is still available and used in the system, we discourage its use. Reserve it for errors not caused by merchants, like a connection issue. Error toast should convey what went wrong in plain language and should not go over 3 words. For all other error message types, follow the [error message guidelines](https://polaris.shopify.com/patterns/error-messages).
+previewImg: /images/components/deprecated/toast.png
+status: Deprecated
+---
+
+# {frontmatter.title}
+
+<Lede>
+
+The toast component is a non-disruptive message that appears at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action.
+
+</Lede>
+
+<StatusBanner status={frontmatter.status}>
+  This component is no longer supported. Please use the [App Bridge Toast
+  API](https://shopify.dev/docs/api/app-bridge-library/reference/toast) instead.
+</StatusBanner>

polaris.shopify.com/content/components/deprecated/top-bar.mdx

@@ -0,0 +1,37 @@
+---
+title: Top bar
+shortDescription: Appears at the top of the page and is used to brand and navigate major applications areas.
+category: Deprecated
+keywords:
+  - global chrome
+  - global features
+  - topbar
+  - top bar
+  - header
+  - nav bar
+  - bar
+  - navbar
+  - brand
+  - search
+  - user
+  - menu
+  - logo
+examples:
+  - fileName: top-bar-default.tsx
+    title: Default
+    description: Use to provide structure for the top of an application. Style the top bar component using the app provider component with a theme. Providing just the `background` key for the top bar component theme will result in intelligent defaults being set for complementary colors with contrasting text.
+previewImg: /images/components/deprecated/top-bar.png
+status: Deprecated
+---
+
+# {frontmatter.title}
+
+<Lede>
+
+The top bar is a header component that allows merchants to search, access menus, and navigate by clicking on the logo. It’s always visible at the top of interfaces like Shopify or Shopify Plus. Third-party apps that use the top bar can customize the color to match their brand using the [app provider](https://polaris.shopify.com/components/app-provider) component and are required to use their own logo.
+
+</Lede>
+
+<StatusBanner status={frontmatter.status}>
+  This component is no longer supported.
+</StatusBanner>

polaris.shopify.com/content/components/index.mdx

@@ -13,11 +13,14 @@ Components are the reusable building blocks for creating Shopify admin experienc
 </Lede>
 
 <Stack gap="1200">
-{posts.map(group => <Box>
+{posts.map(group =>
 
-<h2>{group.title}</h2>
+group.children.filter(a => !a.hideFromNav).length !== 0 ? (<Box>
 
-<RichCardGrid cards={group.children} />
+  <h2>{group.title}</h2>
+  <RichCardGrid cards={group.children} />
+</Box>) : null
+
+)}
 
-</Box>)}
 </Stack>