@atom-learning/components 2.28.3-beta.2 → 2.29.0-beta.2

package/dist/docs/Tooltip.mdx

@@ -1,25 +0,0 @@
----
-title: Tooltip
-component: Tooltip,Tooltip.Trigger,Tooltip.Content,Tooltip.Provider, Tooltip.Portal
-description: A component that displays information related to an element when the element receives keyboard focus or the mouse hovers over it
-category: Surfaces
----
-
-`Tooltip` exports 4 components that combine to create our tooltip. The `Tooltip.Trigger` requires a React component child (or passed to `as`) to allow the necessary event bindings and accessible properties to be cloned.
-
-Also, note that the component must accept a `ref`.
-
-`Tooltip.Provider` is **required to avoid regressions** and should be included at the root level of the application.
-
-Read more about the underlying UI component on the [Radix UI documentation site](https://radix-ui.com/primitives/docs/components/tooltip).
-
-```tsx preview
-<Tooltip.Provider>
-  <Tooltip>
-    <Tooltip.Trigger>
-      <Text>Hover on me</Text>
-    </Tooltip.Trigger>
-    <Tooltip.Content>This is the tooltip content, hello</Tooltip.Content>
-  </Tooltip>
-</Tooltip.Provider>
-```

package/dist/docs/TopBar.mdx

@@ -1,95 +0,0 @@
----
-title: TopBar
-component: TopBar,TopBar.Brand,TopBar.BrandLogo,TopBar.BrandText,TopBar.ActionIcon
-description: The top bar provides content and actions related to the current screen. It is used for branding, screen titles, navigation, and actions.
-category: Surfaces
----
-
-`TopBar` exports components that combine to form the elements that you would expect to commonly see in a TopBar. However, the `TopBar` is not limited to these components, as any components may sit within the `TopBar` to create a flexible and custom UI.
-
-By default, `TopBar` uses a flex layout with flex items placed immediately after each other. To align flex items, an optional css prop with `justifyContent` can be passed.
-
-Alternatively, if you want to avoid wrapping groups of items with a `div` purely for alignment purposes, you could use a spacer. In this example, the styling of the `Flex` component has been extended so that it stretches to fill the available space.
-
-```tsx preview
-<TopBar>
-  <TopBar.Brand href="atomlearning.co.uk">
-    <TopBar.BrandName>Admin Panel</TopBar.BrandName>
-  </TopBar.Brand>
-  <Flex css={{ flex: 1, justifySelf: 'stretch', alignSelf: 'stretch' }} />
-  <Stack gap="2" direction="row">
-    <TopBar.ActionIcon icon={Search} label="Search" />
-    <TopBar.Divider />
-    <TopBar.ActionIcon icon={SwitchOff} label="Light/Dark mode" />
-  </Stack>
-</TopBar>
-```
-
-## TopBar Size Variant
-
-TopBar has a default size of `md` which means that the default height of the component is 64px and the `Topbar.BrandLogo` is 24px.
-
-```tsx preview
-<TopBar>
-  <TopBar.Brand href="atomlearning.co.uk">
-    <TopBar.BrandLogo
-      src={
-        'https://space-1.atomlearning.com/static/f61e49cfb245016e612a34818e27dcfb.svg'
-      }
-    />
-  </TopBar.Brand>
-</TopBar>
-```
-
-If size `lg` is passed to the `TopBar` it will be 96px in height and the `TopBar.BrandLogo` will be 32px in height.
-
-```tsx preview
-<TopBar size="lg">
-  <TopBar.Brand href="atomlearning.co.uk">
-    <TopBar.BrandLogo
-      src={
-        'https://space-1.atomlearning.com/static/f61e49cfb245016e612a34818e27dcfb.svg'
-      }
-    />
-  </TopBar.Brand>
-</TopBar>
-```
-
-## TopBar.Brand
-
-`TopBar.Brand` renders a styled link.
-
-```tsx
-// You'll import the logo like this in practice, but it doesn't work
-// in these previews
-// import logo from '@atom-learning/theme/lib/assets/logo.svg'
-
-const App = () => {
-  return (
-    <TopBar>
-      <TopBar.Brand href="atomlearning.co.uk">
-        <TopBar.BrandLogo
-          src={
-            'https://space-1.atomlearning.com/static/f61e49cfb245016e612a34818e27dcfb.svg'
-          }
-        />
-        <TopBar.BrandName>Admin Panel</TopBar.BrandName>
-      </TopBar.Brand>
-    </TopBar>
-  )
-}
-```
-
-## TopBar.BrandLogo
-
-`TopBar.BrandLogo` renders an image with set styles and is primarily intended for the Atom logo.
-
-## TopBar.BrandName
-
-`TopBar.BrandName` renders a `Text` component with set styles and is primarily intended to display the name of the current app.
-
-## TopBar.ActionIcon
-
-`TopBar.ActionIcon` extends the base `ActionIcon` component with set props.
-
-Note that instead of needing to include a seperate `Icon` component as children, an icon can be passed directly to this component as a prop.

package/dist/docs/Video.mdx

@@ -1,12 +0,0 @@
----
-title: Video
-component: Video
-description: Video component supports playing Vimeo hosted videos
-category: Media
----
-
-The `Video` component supports playing Vimeo hosted videos by setting the `id`.
-
-```tsx preview
-<Video id="453650357" />
-```

package/dist/docs/accessibility.mdx

@@ -1,67 +0,0 @@
----
-title: Accessibility
-description: We aim to adhere to strict accessibility standards with AA as the minimum
-category: Overview
-priority: 4
----
-
-We have configured a few tools to help automate some accessibility testing but these tests are only valid with the context they are testing on, so they can't guarantee that a component is fully accessible. Manual testing is always required along with design validation.
-
-To enable this, `eslint-plugin-jsx-a11y` is set to strict mode. Different tools are used to validate the components as each serves a different purpose. The accessibility unit tests will fail the pipeline and prevent releasing inaccessible components.
-
-Before contributing to the codebase, please take some time to read the following sections and the reading provided.
-
-## Things to consider whilst developing
-
-- Add unit tests to test accessibility
-
-  > Add an accessibility unit test (using the `jest-axe` package) to ensure that the components’ different variations or functionality don't have any accessibility issues. Example:
-
-```tsx
-it('has no programmatically detectable a11y issues', async () => {
-  const { container } = render(<Component />)
-  expect(await axe(container)).toHaveNoViolations()
-})
-
-// or
-
-it('has no programmatically detectable a11y issues', async () => {
-  render(<Flex />, document.body)
-  const results = await axe(document.body)
-  expect(results).toHaveNoViolations()
-})
-```
-
-_Note:_ `axe` doesn't catch contrast issues when run on `jsdom` which `jest` is using.
-
-- Using `React.Fragment` where possible to avoid adding extra `<div>`
-
-  > Sometimes we break HTML semantics when we add `<div>` elements to our JSX to make our React code work, especially when working with lists (`<ol>`, `<ul>` and `<dl>`) and the HTML `<table>`. In these cases we should rather use React Fragments to group together multiple elements. for examples please look at the [React documentation](https://reactjs.org/docs/accessibility.html)
-
-- Using the React Testing Library rules into adopting a user-centric testing an approach. [Priority](https://testing-library.com/docs/queries/about/#priority)
-  - Test real interactions
-  - Verify the perceivable results
-- Always validating any concerns with the design team
-- Manually test complex components for keyboard navigation
-
-## Things to consider whilst consuming the library
-
-As mentioned above, accessibility testing is heavily reliant on the context, so when using the Design System in an app, please consider the following:
-
-- Testing the components for accessibility in the context of where they are used
-- Testing the entire page for at least the following:
-  - contrast issues
-  - keyboard navigation
-  - autofocus
-  - general accesibility issues
-- Always raising concerns to the design team
-
-## Reading list
-
-- [Axe-core rules](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md)
-- [Accessibility](https://reactjs.org/docs/accessibility.html)
-- [React Library Testing - priority](https://testing-library.com/docs/queries/about/#priority)
-- [Testing Accessibility](https://www.24a11y.com/2017/writing-automated-tests-accessibility/)
-- [Debunking the Myth: Accessibility and React](https://www.deque.com/blog/debunking-the-myth-accessibility-and-react/)
-- [Accessibility auditing with react-axe and eslint-plugin-jsx-a11y](https://web.dev/accessibility-auditing-react/)
-- [jest-axe](https://github.com/nickcolley/jest-axe#testing-react-with-react-testing-library)

package/dist/docs/coreconcepts.mdx

@@ -1,77 +0,0 @@
----
-title: Core concepts
-description: Our component library is underpinned by concepts that help with component composition, encapsulated styling and consistent UI
-category: Overview
-priority: 2
----
-
-These components are intended to provide an abstraction over HTML elements and native components, providing an interface to ease creation of user interfaces in React. This library isn't comprehensive, but it should provide enough primitive, low-level components to be able to easily create pages, layouts, content, forms, as well as using them to compose more complex components with additional logic.
-
-Each component in the design system is built from a `styled()` function and this gives them access to some common props, `as` and `css`.
-
-## Semantic elements with `as`
-
-To apply the correct semantic element to one of our components, you can use `as` and pass in a string HTML element. For example, when using the `Heading` component you can pass in `h3` to use that element.
-
-```tsx
-<Heading as="h3">Hello World</Heading>
-```
-
-```html
-<h3>Hello World</h3>
-```
-
-Some components have a restricted set of valid elements to pass into `as`, for example, `Heading` only allows `h1` through to `h6`, and some components remove the ability to change the HTML element altogether, like `<Select />` or `<Icon />` which require a certain element to work correctly, or `<InputField />` which renders multiple elements. Each of these restrictions are detailed on the component documentation under `API Reference`.
-
-Abstracting the underlying HTML from the component is beneficial as it allows us to control the document outline whilst preserving the ability to use a visually distinct style. This is often the case with container elements where you need to render a `section`, `aside`, `nav` or `main`, but still utilise a particular styled component, e.g. `<Panel as="aside" />`
-
-## Contextual styling with `css`
-
-The `css` prop is available on all of our components to allow you to style them. You can pass in an object of CSS key value pairs and the component will apply those styles as a class on the rendered component.
-
-The benefit of using the `css` prop as opposed to writing inline styles is that we can directly access values from our design tokens, write responsive styles, and use practical shorthand utilities for applying style.
-
-An additional benefit is that we can apply context specific styles to the component only when necessary and avoid the problem of assuming usage and intent when authoring the components. Adding styles to a component that may affect surrounding components is a side-effect, and our aim should always be to avoid adding side-effects to our encapsulated, reusable components.
-
-```tsx
-<Box
-  css={{
-    // we can write standard CSS here
-    fontFamily: 'Arial',
-    color: 'red',
-
-    // we can also access design tokens
-    backgroundColor: '$primary',
-    padding: '$3',
-
-    // utilise shorthand utilities
-    mb: '$3',
-    size: 30
-
-    // and write responsive styles
-    '@lg': {
-      color: 'blue'
-    },
-    '@media (prefers-color-scheme: dark)': {
-      color: 'white'
-    }
-  }}
-/>
-```
-
-There are multiple cases where a component returns more than one element, in which case the `css` prop only applies to the containing element.
-
-`@atom-learning/components` also exports the underlying `styled()` function that was used to create these components, refer to the [Stitches page](/components/stitches) to read more about the difference between `css` and `styled()`. You can also read more about our shorthand utilities and other default configuration options.
-
-## Consistency with design tokens
-
-To quote the [React UI](https://react-ui.dev/core-concepts/constraints-based-design) docs:
-
-> At the core of every high quality interface, is a set of constraints that help in creating a level of consistency and quality. Constraints help build consistent features at a faster pace by moving the decisions into reusable patterns.
-
-These constraints are baked into our design tokens and represent design decisions that encorporate spacing, sizing, colours and typography. [Stitches](https://stitches.dev) uses the [System UI](https://system-ui.com/theme/) theme specification to map these values to their corresponding CSS property. You can read more about this and see the full token set by referring to the [tokens reference](/theme/tokens).
-
-As a quick example, our tokens come in two main forms, values and scales:
-
-- For a layout property like `padding` or `margin`, the token represents the nth value on the spacing scale, e.g. `padding: '$2'` will render `padding: '8px'`.
-- For a property like `color`, it will look up the colors tokens and will use the value directly, e.g. `color: '$warning'` will render `color: 'hsl(24, 100%, 55%)'`.

package/dist/docs/introduction.mdx

@@ -1,33 +0,0 @@
----
-title: Introduction
-description: Atom Learning’s component library is a collection of generic React components built using stitches, including components that cover layout, content, data collection, media and a host of other UI concerns
-category: Overview
-priority: 1
----
-
-## Getting started
-
-Install the three packages to gain access to the components, icons and design tokens.
-
-```bash
-yarn add @atom-learning/components @atom-learning/icons @atom-learning/theme
-```
-
-All components are available as named exports from `@atom-learning/components`, and icons as named exports from `@atom-learning/icons`. The theme is consumed automatically by `@atom-learning/components` to provide the relevant token references for the `css` prop and `styled` function.
-
-```tsx
-import { ChevronRight } from '@atom-learning/icons'
-import { Box, Heading, Icon, Text } from '@atom-learning/components'
-
-const Component = () => (
-  <Box as="article">
-    <Heading css={{ mb: '$3' }}>
-      <Icon is={ChevronRight} css={{ mr: '$2' }} />
-      This is a heading
-    </Heading>
-    <Text>This is a paragraph of text</Text>
-  </Box>
-)
-```
-
-Refer to the individual component documentation for recommended usage and API references for each component, as well as the theme documentation to understand the design token usage.

package/dist/docs/versioning.mdx

@@ -1,40 +0,0 @@
----
-title: Versioning
-description: The project follows the SemVer standard to make using the library easy
-category: Overview
-priority: 5
----
-
-SemVer uses the `MAJOR`.`MINOR`.`PATCH` notation to identify changes with `MAJOR` representing breaking changes that are not backwards compatible, `MINOR` representing new features / non-breaking additions and `PATCH` representing fixes.
-
-It is also a requirement to use [Semantic commits](https://www.conventionalcommits.org/en/v1.0.0/) as each tag will translate to a different type of version upgrade. For example:
-
-- `fix` for bug fixes (patch version)
-- `perf` for performance improvements (patch version)
-- `feat` for new features (minor version)
-
-Other subjects (such as `chore`) will not cause a new release **unless** the commit footer starts with `BREAKING CHANGE:` (followed by an explanation of the breaking change).
-
-Commits that introduce a breaking change should start with `feat!:` and include the `BREAKING CHANGE:` footer. Breaking changes will cause a major version increase.
-
-_Note:_ The `precommit` hooks will prevent commits that don’t have the required tag prefixed to the message
-
-Versioning happens automatically when a feature branch gets merged into `main`. [semantic-release](https://github.com/semantic-release/semantic-release) is employed to calculate the new version number by running through all the new commits and their commit message tag. Once the new version is calculated, it updates the package.json and automatically updates the `CHANGELOG.md`. Then it proceeds to publish the new version both in `GitHub` and `npm`.
-
-_Note:_ Once a branch gets merged into `main`, it is automatically published, therefore `main` always needs to be in a pristine state. For that reason, following the [GitFlow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow) model, all work needs to happen into a branch, and `main` is locked
-
-## Purpose
-
-- To ensure that each version is marked clearly and can be consumed without any issues
-- To reduce the amount of manual effort required to publish a new version
-- To help enforce the selected standards and frameworks, and reduce the room for human error
-
-## Tools
-
-- [Semantic-release](https://github.com/semantic-release/semantic-release)
-- Plugins:
-  - `@semantic-release/commit-analyzer` - checks commits messages for the required tags
-  - `@semantic-release/release-notes-generator` - creates/updates the release notes
-  - `@semantic-release/npm` - publishes version to `npm`
-  - `@semantic-release/github` - publishes version to `GitHub Releases`
-- `husky` - precommit hook to prevent incomplete commit messages

package/dist/experiments/color-scheme/ColorScheme.d.ts

@@ -1,201 +0,0 @@
-import * as React from 'react';
-import { bases, accents } from './stitches.colorscheme.config';
-declare type TColorSchemeOwnProps = {
-    base?: keyof typeof bases;
-    accent?: keyof typeof accents;
-    interactive?: 'loContrast1' | 'loContrast2' | 'hiContrast1' | 'hiContrast2';
-    asChild?: boolean;
-};
-declare const StyledColorScheme: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, import("@stitches/react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, {
-    colors: {
-        slate1: any;
-        slate2: any;
-        slate3: any;
-        slate4: any;
-        slate5: any;
-        slate6: any;
-        slate7: any;
-        slate8: any;
-        slate9: any;
-        slate10: any;
-        blue1: any;
-        blue2: any;
-        blue3: any;
-        blue4: any;
-        blue5: any;
-        blue6: any;
-        blue7: any;
-        blue8: any;
-        blue9: any;
-        blue10: any;
-        background: any;
-        foreground: any;
-        foreground6plus: any;
-    };
-}, import("@stitches/react/types/config").DefaultThemeMap, {
-    bg: (value: {
-        readonly [$$PropertyValue]: "background";
-    }) => {
-        background: {
-            readonly [$$PropertyValue]: "background";
-        };
-    };
-    inset: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        top: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        right: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        bottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        left: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    size: (value: string | number | {
-        readonly [$$ScaleValue]: "size";
-    }) => {
-        height: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-        width: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-    };
-    p: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        padding: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pt: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pr: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pb: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pl: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    px: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    py: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    m: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        margin: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mt: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mr: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mb: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    ml: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mx: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    my: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-}>>;
-declare type TColorSchemeProps = React.ComponentProps<typeof StyledColorScheme> & TColorSchemeOwnProps;
-/**
- * @experimental Component has not been finalised. Further design input required. Use with caution.
- */
-export declare const ColorScheme: React.ForwardRefExoticComponent<Pick<TColorSchemeProps, "css" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | keyof TColorSchemeOwnProps> & React.RefAttributes<HTMLDivElement>>;
-export {};

package/dist/experiments/color-scheme/ColorScheme.js

@@ -1 +0,0 @@
-import*as o from"react";import{styled as f,colorSchemes as e}from"./stitches.colorscheme.config.js";import{Slot as d}from"@radix-ui/react-slot";const p=f("div"),t=o.forwardRef(({base:r="",accent:a="",interactive:c="",className:m,asChild:s=!1,...i},l)=>{const n=[m,e[`interactive-${c}`],e[`accent-${a}`],e[`base-${r}`]].filter(Boolean).join(" ");return o.createElement(s?d:p,{ref:l,className:n,...i})});t.displayName="ColorScheme";export{t as ColorScheme};

package/dist/experiments/color-scheme/blue.json.js

@@ -1 +0,0 @@
-var e="#F3F8FF",l="#E5F1FF",u="#D6EAFF",b="#C2DEFF",F="#B3D4FA",a="#057AFF",r="#0F67F5",v="#194DCC",D="#102DA3",A="#15235E",E={blue1:e,blue2:l,blue3:u,blue4:b,blue5:F,blue6:a,blue7:r,blue8:v,blue9:D,blue10:A};export{e as blue1,A as blue10,l as blue2,u as blue3,b as blue4,F as blue5,a as blue6,r as blue7,v as blue8,D as blue9,E as default};

package/dist/experiments/color-scheme/generateAlphaColors.d.ts

@@ -1 +0,0 @@
-export declare const generateAlphaColors: (colorName: string, colors: Record<string, string>) => Record<string, string>;

package/dist/experiments/color-scheme/generateAlphaColors.js

@@ -1 +0,0 @@
-import{parseToRgba as u}from"color2k";const M=[255,255,255,1],r=[.05,.1,.15,.2,.27,.35,.5,.7,.8,.95],n=a=>Math.round(Math.max(Math.min(a,255),0)),$=(a,h)=>{const e={};return Object.entries(h).forEach(([f,i],o)=>{const[m,p,b]=u(i),[t,s,c]=M,g=[n((m-t)/r[o]+t),n((p-s)/r[o]+s),n((b-c)/r[o]+c),r[o]];e[`${a}A${o+1}`]=`rgba(${g.join(",")})`}),e};export{$ as generateAlphaColors};

package/dist/experiments/color-scheme/index.d.ts

@@ -1 +0,0 @@
-export { ColorScheme } from './ColorScheme';

package/dist/experiments/color-scheme/slate.json.js

@@ -1 +0,0 @@
-var a="#F6F6F6",e="#EBEBEB",t="#E0E0E0",l="#CECECE",s="#C2C2C2",r="#757575",v="#545454",C="#333333",E="#1F1F1F",F="#1C1C1C",B={slate1:a,slate2:e,slate3:t,slate4:l,slate5:s,slate6:r,slate7:v,slate8:C,slate9:E,slate10:F};export{B as default,a as slate1,F as slate10,e as slate2,t as slate3,l as slate4,s as slate5,r as slate6,v as slate7,C as slate8,E as slate9};