@atom-learning/components 2.32.3-beta.0 → 2.33.0

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './stitches';
+export { ColorScheme } from './experiments/color-scheme';
 export { createThemeVariants, focusVisibleStyleBlock } from './utilities';

package/dist/index.js

@@ -1 +1 @@
-import{Accordion as p}from"./components/accordion/Accordion.js";import{ActionIcon as x}from"./components/action-icon/ActionIcon.js";import{AlertDialog as i}from"./components/alert-dialog/AlertDialog.js";import{AlertProvider as l,useAlert as d}from"./components/alert-dialog/alert-context/AlertContext.js";import{Avatar as n}from"./components/avatar/Avatar.js";import{Badge as c}from"./components/badge/Badge.js";import{Box as g}from"./components/box/Box.js";import{Button as F,StyledButton as S}from"./components/button/Button.js";import{Carousel as I,useCarousel as h}from"./components/carousel/Carousel.js";import{Checkbox as D}from"./components/checkbox/Checkbox.js";import{CheckboxField as G}from"./components/checkbox-field/CheckboxField.js";import{Chip as w}from"./components/chip/Chip.js";import{ChipGroup as A}from"./components/chip/ChipGroup.js";import{ChipDismissibleGroup as L}from"./components/chip-dismissible-group/index.js";import{ChipToggleGroup as M}from"./components/chip-toggle-group/index.js";import{Combobox as V}from"./components/combobox/Combobox.js";import{useDataTable as E}from"./components/data-table/DataTableContext.js";import{DataTable as j}from"./components/data-table/DataTable.js";import{DateField as z}from"./components/date-field/DateField.js";import{DateInput as K}from"./components/date-input/DateInput.js";import{Dialog as Q}from"./components/dialog/Dialog.js";import{Dismissible as X}from"./components/dismissible/index.js";import{DismissibleGroup as Z}from"./components/dismissible-group/index.js";import{Divider as $}from"./components/divider/Divider.js";import{DropdownMenu as ro}from"./components/dropdown-menu/DropdownMenu.js";import{EmptyState as to}from"./components/empty-state/EmptyState.js";import{FieldWrapper as mo}from"./components/field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as fo}from"./components/field-wrapper/InlineFieldWrapper.js";import{FileInput as ao}from"./components/file-input/FileInput.js";import{Flex as so}from"./components/flex/Flex.js";import{Form as uo}from"./components/form/Form.js";import"dlv";import"react-hook-form";import{Grid as bo}from"./components/grid/Grid.js";import{Heading as Co}from"./components/heading/Heading.js";import{Icon as So}from"./components/icon/Icon.js";import{Image as Io}from"./components/image/Image.js";import{InlineMessage as Bo}from"./components/inline-message/InlineMessage.js";import{Input as ko}from"./components/input/Input.js";import{InputField as vo}from"./components/input-field/InputField.js";import{Label as yo}from"./components/label/Label.js";import{Link as Po,StyledLink as Lo}from"./components/link/Link.js";import{List as Mo}from"./components/list/List.js";import{Loader as Vo}from"./components/loader/Loader.js";import{MarkdownContent as Eo}from"./components/markdown-content/MarkdownContent.js";import{NavigationMenu as jo}from"./components/navigation/NavigationMenu.js";import{NotificationBadge as zo}from"./components/notification-badge/NotificationBadge.js";import{NumberInput as Ko}from"./components/number-input/NumberInput.js";import{NumberInputField as Qo}from"./components/number-input-field/NumberInputField.js";import{PasswordField as Xo}from"./components/password-field/PasswordField.js";import{PasswordInput as Zo}from"./components/password-input/PasswordInput.js";import{Popover as $o}from"./components/popover/Popover.js";import{ProgressBar as rr}from"./components/progress-bar/ProgressBar.js";import{RadioButton as tr}from"./components/radio-button/RadioButton.js";import{RadioButtonGroup as mr}from"./components/radio-button/RadioButtonGroup.js";import{RadioButtonField as fr}from"./components/radio-button-field/RadioButtonField.js";import{RadioCard as ar}from"./components/radio-card/RadioCard.js";import{RadioCardGroup as dr}from"./components/radio-card/RadioCardGroup.js";import{SearchField as nr}from"./components/search-field/SearchField.js";import{SearchInput as cr}from"./components/search-input/SearchInput.js";import{Select as gr}from"./components/select/Select.js";import{SelectField as Fr}from"./components/select-field/SelectField.js";import{Sidedrawer as Tr}from"./components/sidedrawer/Sidedrawer.js";import{Slider as hr}from"./components/slider/Slider.js";import{SliderField as Dr}from"./components/slider-field/SliderField.js";import{Stack as Gr}from"./components/stack/Stack.js";import{StackContent as wr}from"./components/stack-content/StackContent.js";import{Stepper as Ar}from"./components/stepper/Stepper.js";import{Switch as Lr}from"./components/switch/Switch.js";import{Table as Mr}from"./components/table/Table.js";import{Tabs as Vr}from"./components/tabs/Tabs.js";import{Text as Er}from"./components/text/Text.js";import{Textarea as jr}from"./components/textarea/Textarea.js";import{TextareaField as zr}from"./components/textarea-field/TextareaField.js";import{ToastProvider as Kr}from"./components/toast/ToastProvider.js";import{ToggleGroup as Qr}from"./components/toggle-group/index.js";import{Tooltip as Xr}from"./components/tooltip/Tooltip.js";import{TopBar as Zr}from"./components/top-bar/TopBar.js";import{Video as $r}from"./components/video/Video.js";import{createTheme as re,css as ee,getCssText as te,globalCss as pe,keyframes as me,media as xe,styled as fe,theme as ie,utils as ae}from"./stitches.js";import{createThemeVariants as de}from"./utilities/create-theme-variants/createThemeVariants.js";import{focusVisibleStyleBlock as ne}from"./utilities/style/focus-visible-style-block.js";import{default as ce}from"react-hot-toast";export{p as Accordion,x as ActionIcon,i as AlertDialog,l as AlertProvider,n as Avatar,c as Badge,g as Box,F as Button,I as Carousel,D as Checkbox,G as CheckboxField,w as Chip,L as ChipDismissibleGroup,A as ChipGroup,M as ChipToggleGroup,V as Combobox,j as DataTable,z as DateField,K as DateInput,Q as Dialog,X as Dismissible,Z as DismissibleGroup,$ as Divider,ro as DropdownMenu,to as EmptyState,mo as FieldWrapper,ao as FileInput,so as Flex,uo as Form,bo as Grid,Co as Heading,So as Icon,Io as Image,fo as InlineFieldWrapper,Bo as InlineMessage,ko as Input,vo as InputField,yo as Label,Po as Link,Mo as List,Vo as Loader,Eo as MarkdownContent,jo as NavigationMenu,zo as NotificationBadge,Ko as NumberInput,Qo as NumberInputField,Xo as PasswordField,Zo as PasswordInput,$o as Popover,rr as ProgressBar,tr as RadioButton,fr as RadioButtonField,mr as RadioButtonGroup,ar as RadioCard,dr as RadioCardGroup,nr as SearchField,cr as SearchInput,gr as Select,Fr as SelectField,Tr as Sidedrawer,hr as Slider,Dr as SliderField,Gr as Stack,wr as StackContent,Ar as Stepper,S as StyledButton,Lo as StyledLink,Lr as Switch,Mr as Table,Vr as Tabs,Er as Text,jr as Textarea,zr as TextareaField,Kr as ToastProvider,Qr as ToggleGroup,Xr as Tooltip,Zr as TopBar,$r as Video,re as createTheme,de as createThemeVariants,ee as css,ne as focusVisibleStyleBlock,te as getCssText,pe as globalCss,me as keyframes,xe as media,fe as styled,ie as theme,ce as toast,d as useAlert,h as useCarousel,E as useDataTable,ae as utils};
+import{Accordion as p}from"./components/accordion/Accordion.js";import{ActionIcon as x}from"./components/action-icon/ActionIcon.js";import{AlertDialog as i}from"./components/alert-dialog/AlertDialog.js";import{AlertProvider as l,useAlert as d}from"./components/alert-dialog/alert-context/AlertContext.js";import{Avatar as n}from"./components/avatar/Avatar.js";import{Badge as c}from"./components/badge/Badge.js";import{Box as C}from"./components/box/Box.js";import{Button as g,StyledButton as F}from"./components/button/Button.js";import{Carousel as h,useCarousel as I}from"./components/carousel/Carousel.js";import{Checkbox as D}from"./components/checkbox/Checkbox.js";import{CheckboxField as G}from"./components/checkbox-field/CheckboxField.js";import{Chip as w}from"./components/chip/Chip.js";import{ChipGroup as A}from"./components/chip/ChipGroup.js";import{ChipDismissibleGroup as L}from"./components/chip-dismissible-group/index.js";import{ChipToggleGroup as M}from"./components/chip-toggle-group/index.js";import{Combobox as V}from"./components/combobox/Combobox.js";import{useDataTable as E}from"./components/data-table/DataTableContext.js";import{DataTable as j}from"./components/data-table/DataTable.js";import{DateField as z}from"./components/date-field/DateField.js";import{DateInput as K}from"./components/date-input/DateInput.js";import{Dialog as Q}from"./components/dialog/Dialog.js";import{Dismissible as X}from"./components/dismissible/index.js";import{DismissibleGroup as Z}from"./components/dismissible-group/index.js";import{Divider as $}from"./components/divider/Divider.js";import{DropdownMenu as ro}from"./components/dropdown-menu/DropdownMenu.js";import{EmptyState as to}from"./components/empty-state/EmptyState.js";import{FieldWrapper as mo}from"./components/field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as fo}from"./components/field-wrapper/InlineFieldWrapper.js";import{FileInput as ao}from"./components/file-input/FileInput.js";import{Flex as so}from"./components/flex/Flex.js";import{Form as uo}from"./components/form/Form.js";import"dlv";import"react-hook-form";import{Grid as bo}from"./components/grid/Grid.js";import{Heading as So}from"./components/heading/Heading.js";import{Icon as Fo}from"./components/icon/Icon.js";import{Image as ho}from"./components/image/Image.js";import{InlineMessage as Bo}from"./components/inline-message/InlineMessage.js";import{Input as ko}from"./components/input/Input.js";import{InputField as vo}from"./components/input-field/InputField.js";import{Label as yo}from"./components/label/Label.js";import{Link as Po,StyledLink as Lo}from"./components/link/Link.js";import{List as Mo}from"./components/list/List.js";import{Loader as Vo}from"./components/loader/Loader.js";import{MarkdownContent as Eo}from"./components/markdown-content/MarkdownContent.js";import{NavigationMenu as jo}from"./components/navigation/NavigationMenu.js";import{NotificationBadge as zo}from"./components/notification-badge/NotificationBadge.js";import{NumberInput as Ko}from"./components/number-input/NumberInput.js";import{NumberInputField as Qo}from"./components/number-input-field/NumberInputField.js";import{PasswordField as Xo}from"./components/password-field/PasswordField.js";import{PasswordInput as Zo}from"./components/password-input/PasswordInput.js";import{Popover as $o}from"./components/popover/Popover.js";import{ProgressBar as rr}from"./components/progress-bar/ProgressBar.js";import{RadioButton as tr}from"./components/radio-button/RadioButton.js";import{RadioButtonGroup as mr}from"./components/radio-button/RadioButtonGroup.js";import{RadioButtonField as fr}from"./components/radio-button-field/RadioButtonField.js";import{RadioCard as ar}from"./components/radio-card/RadioCard.js";import{RadioCardGroup as dr}from"./components/radio-card/RadioCardGroup.js";import{SearchField as nr}from"./components/search-field/SearchField.js";import{SearchInput as cr}from"./components/search-input/SearchInput.js";import{Select as Cr}from"./components/select/Select.js";import{SelectField as gr}from"./components/select-field/SelectField.js";import{Sidedrawer as Tr}from"./components/sidedrawer/Sidedrawer.js";import{Slider as Ir}from"./components/slider/Slider.js";import{SliderField as Dr}from"./components/slider-field/SliderField.js";import{Stack as Gr}from"./components/stack/Stack.js";import{StackContent as wr}from"./components/stack-content/StackContent.js";import{Stepper as Ar}from"./components/stepper/Stepper.js";import{Switch as Lr}from"./components/switch/Switch.js";import{Table as Mr}from"./components/table/Table.js";import{Tabs as Vr}from"./components/tabs/Tabs.js";import{Text as Er}from"./components/text/Text.js";import{Textarea as jr}from"./components/textarea/Textarea.js";import{TextareaField as zr}from"./components/textarea-field/TextareaField.js";import{ToastProvider as Kr}from"./components/toast/ToastProvider.js";import{ToggleGroup as Qr}from"./components/toggle-group/index.js";import{Tooltip as Xr}from"./components/tooltip/Tooltip.js";import{TopBar as Zr}from"./components/top-bar/TopBar.js";import{Video as $r}from"./components/video/Video.js";import{createTheme as re,css as ee,getCssText as te,globalCss as pe,keyframes as me,media as xe,styled as fe,theme as ie,utils as ae}from"./stitches.js";import{ColorScheme as de}from"./experiments/color-scheme/ColorScheme.js";import{createThemeVariants as ne}from"./utilities/create-theme-variants/createThemeVariants.js";import{focusVisibleStyleBlock as ce}from"./utilities/style/focus-visible-style-block.js";import{default as Ce}from"react-hot-toast";export{p as Accordion,x as ActionIcon,i as AlertDialog,l as AlertProvider,n as Avatar,c as Badge,C as Box,g as Button,h as Carousel,D as Checkbox,G as CheckboxField,w as Chip,L as ChipDismissibleGroup,A as ChipGroup,M as ChipToggleGroup,de as ColorScheme,V as Combobox,j as DataTable,z as DateField,K as DateInput,Q as Dialog,X as Dismissible,Z as DismissibleGroup,$ as Divider,ro as DropdownMenu,to as EmptyState,mo as FieldWrapper,ao as FileInput,so as Flex,uo as Form,bo as Grid,So as Heading,Fo as Icon,ho as Image,fo as InlineFieldWrapper,Bo as InlineMessage,ko as Input,vo as InputField,yo as Label,Po as Link,Mo as List,Vo as Loader,Eo as MarkdownContent,jo as NavigationMenu,zo as NotificationBadge,Ko as NumberInput,Qo as NumberInputField,Xo as PasswordField,Zo as PasswordInput,$o as Popover,rr as ProgressBar,tr as RadioButton,fr as RadioButtonField,mr as RadioButtonGroup,ar as RadioCard,dr as RadioCardGroup,nr as SearchField,cr as SearchInput,Cr as Select,gr as SelectField,Tr as Sidedrawer,Ir as Slider,Dr as SliderField,Gr as Stack,wr as StackContent,Ar as Stepper,F as StyledButton,Lo as StyledLink,Lr as Switch,Mr as Table,Vr as Tabs,Er as Text,jr as Textarea,zr as TextareaField,Kr as ToastProvider,Qr as ToggleGroup,Xr as Tooltip,Zr as TopBar,$r as Video,re as createTheme,ne as createThemeVariants,ee as css,ce as focusVisibleStyleBlock,te as getCssText,pe as globalCss,me as keyframes,xe as media,fe as styled,ie as theme,Ce as toast,d as useAlert,I as useCarousel,E as useDataTable,ae as utils};

package/dist/utilities/hooks/useCallbackRef.js

@@ -1 +1 @@
-import*as t from"react";const n=()=>{const e=t.useRef(null),u=t.useCallback(l=>{l&&(e.current=l)},[]);return[e,u]},s=()=>{const[e,u]=t.useState(null),l=t.useCallback(a=>{a&&u(a)},[]);return[e,l]};export{n as useCallbackRef,s as useCallbackRefState};
+import*as l from"react";const n=()=>{const e=l.useRef(null),u=l.useCallback(t=>{t&&(e.current=t)},[]);return[e,u]},s=()=>{const[e,u]=l.useState(null),t=l.useCallback(a=>{a&&u(a)},[]);return[e,t]};export{n as useCallbackRef,s as useCallbackRefState};

package/package.json

@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "2.32.3-beta.0",
+  "version": "2.33.0",
   "description": "",
   "files": [
     "dist"
@@ -14,10 +14,10 @@
     "dev": "NODE_ENV=development rollup -c -w",
     "build:lib": "NODE_ENV=production rollup -c",
     "build:types": "NODE_ENV=production tsc --emitDeclarationOnly && tsc-alias",
-    "build:docs": "node ./scripts/generate-component-props.mjs && node ./scripts/export-documentation.mjs",
+    "build:proptypes": "node ./scripts/generate-component-props.mjs",
     "start:sandbox": "vite -c ./sandbox/vite.config.js",
     "add-component": "node ./scripts/add-component.mjs",
-    "prepublishOnly": "run-s clean build:lib build:types build:docs",
+    "prepublishOnly": "run-s clean build:lib build:types build:proptypes",
     "clean": "del ./dist/",
     "format": "prettier 'src/**/*.{js,ts,tsx}' --write",
     "lint": "eslint 'src/**/*.{js,ts,tsx}' --fix",
@@ -104,7 +104,6 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
     "prompts": "^2.4.0",
-    "react-docgen-typescript": "2.1.0",
     "rollup": "^2.39.0",
     "rollup-plugin-esbuild": "^4.8.2",
     "rollup-plugin-json": "^4.0.0",
@@ -123,8 +122,8 @@
   "peerDependencies": {
     "@atom-learning/icons": "^1.0.0",
     "@atom-learning/theme": "^1.0.0",
-    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": "^17",
+    "react-dom": "^17"
   },
   "dependencies": {
     "@atom-learning/theme": "1.1.1",
@@ -161,6 +160,7 @@
     "mdast-util-from-markdown": "0.8.5",
     "micromark-extension-directive": "1.4.0",
     "pure-react-carousel": "^1.27.6",
+    "react-docgen-typescript": "2.1.0",
     "react-hook-form": "^6.15.4",
     "react-hook-form-persist": "^2.0.0",
     "react-hot-toast": "^1.0.2",

package/dist/components/table/TableStickyColumnsContainer.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { CSS } from '../../stitches';
-interface ITableStickyColumnsContainerProps {
-    children: React.ReactNode;
-    numberOfStickyColumns?: number;
-    css?: CSS;
-}
-export declare const TableStickyColumnsContainer: React.FC<ITableStickyColumnsContainerProps>;
-export {};

package/dist/components/table/TableStickyColumnsContainer.js

@@ -1 +0,0 @@
-import r from"react";import{Box as a}from"../box/Box.js";const i=({children:n,numberOfStickyColumns:t=0,css:l,...c})=>{const[o,p]=r.useState(!1);return r.createElement(a,{onScroll:s=>{const e=s.currentTarget.scrollLeft>0;e!==o&&p(e)},role:"scrollbar",css:{overflow:"auto",maxWidth:"100%",[`& td:nth-of-type(${t}), th:nth-of-type(${t})`]:{...o&&{boxShadow:"$colors$alpha200 -2px -3px 9px 1px",clipPath:"inset(0px -10px 0px 0px)"},...t===1&&{position:"sticky",left:"0",zIndex:"2"}},"& td":{bg:"inherit"},...l},...c},n)};export{i as TableStickyColumnsContainer};

package/dist/docs/Accordion.mdx

@@ -1,94 +0,0 @@
----
-title: Accordion
-component: Accordion,Accordion.Item,Accordion.Trigger,Accordion.Content
-description: A vertically stacked group of interactive headings that reveal an associated section of content when clicked
-category: Layout
----
-
-Functionality based on the [`Accordion`](https://radix-ui.com/primitives/docs/components/accordion) radix component.
-
-Implements experimental ColorScheme component to allow multiple colour setups.
-
-The Accordion exports 4 components that combine to make the `Accordion`. The parent Accordion contains `Accordion.Item` components, which themselves must contain `Accordion.Trigger` and `Accordion.Content`.
-
-The `Accordion.Trigger` has been simplified to include a chevron icon. Generally, you would only want to render text inside the rest.
-
-Default styling has been applied to `Accordion.Trigger`, but `Accordion.Content` is an empty container without styling. Should only text be placed inside, it is highly advisable to apply spacing to align with the styling of the rest of the Accordion. This can be done with either the `css` property, or by placing any other components inside the `Accordion.Content`.
-
-```tsx preview
-<Accordion type="single" defaultValue="1">
-  <Accordion.Item value="1">
-    <Accordion.Trigger>Accordion Header 1</Accordion.Trigger>
-    <Accordion.Content css={{ p: '$3' }}>
-      <Text>Accordion content 1</Text>
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="2">
-    <Accordion.Trigger>Accordion Header 2</Accordion.Trigger>
-    <Accordion.Content css={{ p: '$3' }}>
-      <Text>Accordion content 2</Text>
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion>
-```
-
-## Values
-
-Each `Accordion.Item` must have a value, which can either be used as a `defaultValue` on the Accordion, or by setting the `value` of the Accordion so it is a controlled component. If value is set, it must also contain an `onValueChange` function that sets the value to a new value.
-
-## Collapsible
-
-Accordions can be given the property `collapsible`, which allows all items to be collapsed. Without passing this at least one item must be open.
-
-## Type
-
-Accordions can have `type` as either `single` or `multiple`. This changes how many items can be expanded at once. The default is `single`.
-
-Note: if `multiple`, `value` and `defaultValue` must be in an array. Even if you want just one item to be visible initially, you must pass something like `defaultValue={['name']}`
-
-## Disabled
-
-An `Accordion.Item` component can take a `disabled` prop, which would make it untoggleable.
-The corresponding `Accordion.Content` component's content will be, in this case, permanently in its original state.
-
-```tsx preview live
-<Accordion type="single" defaultValue="1">
-  <Accordion.Item value="1" disabled>
-    <Accordion.Trigger>Accordion Header 1</Accordion.Trigger>
-    <Accordion.Content css={{ p: '$3' }}>
-      <Text>Accordion content 1</Text>
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="2">
-    <Accordion.Trigger>Accordion Header 2</Accordion.Trigger>
-    <Accordion.Content css={{ p: '$3' }}>
-      <Text>Accordion content 2</Text>
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion>
-```
-
-## Color Scheme
-
-You can pass in a `colorScheme` object to the Accordion.Trigger to customise the colours of the component.
-Defaults to `{ accent: "slate", interactive: "loContrast1"}`
-ColorScheme is experimental and has been implemented only locally but you can read more about how it
-currently works and available options [on the repository's github](https://github.com/Atom-Learning/components/tree/main/lib/src/experiments/color-scheme#readme).
-
-```tsx preview live
-<Accordion type="single" defaultValue="1">
-  <Accordion.Item value="1">
-    <Accordion.Trigger
-      colorScheme={{
-        accent: 'blue',
-        interactive: 'hiContrast2'
-      }}
-    >
-      Accordion Header 1
-    </Accordion.Trigger>
-    <Accordion.Content css={{ p: '$3' }}>
-      <Text>Accordion content 1</Text>
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion>
-```

package/dist/docs/ActionIcon.mdx

@@ -1,87 +0,0 @@
----
-title: Action Icon
-component: ActionIcon
-description: An accessible interactive wrapper around Icon
-category: Navigation
----
-
-`ActionIcon` should be used alongside `Icon` when you require a user interaction.
-
-```tsx preview
-<>
-  <ActionIcon label="Attach a file" appearance="simple">
-    <Icon is={Clip} />
-  </ActionIcon>
-  <ActionIcon label="Attach a file" appearance="outline">
-    <Icon is={Clip} />
-  </ActionIcon>
-  <ActionIcon label="Attach a file" appearance="solid">
-    <Icon is={Clip} />
-  </ActionIcon>
-</>
-```
-
-## Rounded Variant
-
-Setting `isRounded` makes the Action circular when paired with the options "outline" and "solid" for the `appearance` prop
-
-```tsx preview
-<>
-  <ActionIcon label="Attach a file" appearance="outline" isRounded>
-    <Icon is={Bell} />
-  </ActionIcon>
-  <ActionIcon label="Attach a file" appearance="solid" isRounded>
-    <Icon is={Bell} />
-  </ActionIcon>
-</>
-```
-
-## Disabled state
-
-Passing `disabled` makes the Action Icon take a disabled appearance, where any cursor interaction with the component will not render any changes in its UI.
-
-```tsx preview
-<>
-  <ActionIcon label="Attach a file" appearance="simple" disabled>
-    <Icon is={Bell} />
-  </ActionIcon>
-  <ActionIcon label="Attach a file" appearance="outline" disabled>
-    <Icon is={Bell} />
-  </ActionIcon>
-  <ActionIcon label="Attach a file" appearance="solid" disabled>
-    <Icon is={Bell} />
-  </ActionIcon>
-</>
-```
-
-It is recommended to pair `ActionIcon` with `Tooltip` to provide a clear visual description of the action the user is about to perform.
-
-```tsx preview
-// `Tooltip.Provider` is included here to enable the example `Tooltip`, but you should generally place it at the root of your application
-<Tooltip.Provider>
-  <Tooltip>
-    <Tooltip.Trigger asChild>
-      <ActionIcon size="lg" label="Add to basket">
-        <Icon is={Basket} size="md" />
-      </ActionIcon>
-    </Tooltip.Trigger>
-    <Tooltip.Content>Add to basket</Tooltip.Content>
-  </Tooltip>
-</Tooltip.Provider>
-```
-
-## Polymorphism
-
-The `ActionIcon` component supports polymorphism, therefore depending on whether it receives an `onClick`/`href` as a prop, it will produce a `button` or `link` respectively
-
-```tsx preview
-<ActionIcon label="Shuffle selection" onClick={() => console.log('clicked')}>
-  <Icon is={Shuffle} />
-</ActionIcon>
-```
-
-```tsx preview
-<ActionIcon label="Add a new folder" href="/directory/add">
-  <Icon is={FolderAdd} />
-</ActionIcon>
-```

package/dist/docs/AlertDialog.mdx

@@ -1,40 +0,0 @@
----
-title: Alert Dialog
-component: AlertDialog,AlertDialog.Trigger,AlertDialog.Content
-description: A modal dialog that interrupts the user with important content and expects a response
-category: Feedback
----
-
-`AlertDialog` exports a number of components that can be composed together to create a modal pop up that expects a response from the user. `AlertDialog` also exports a custom hook that can be used to dynamically render an alert based on some content and a callback; you can see an example of this below.
-
-```tsx
-import { AlertProvider, Button, useAlert } from '@atom-learning/components'
-
-const Component = () => {
-  const { showAlert } = useAlert()
-
-  const handleClick = () => {
-    showAlert({
-      title: 'Are you sure you want to delete this school?',
-      description: 'This will remove all restrictions from your school',
-      confirmActionText: 'Delete school',
-      cancelActionText: 'Cancel',
-      onAction: (result) => {
-        if (result) console.log('Confirmation')
-      }
-    })
-  }
-
-  return <Button onClick={handleClick}>Delete school</Button>
-}
-
-const App = () => (
-  <AlertProvider>
-    <Component />
-  </AlertProvider>
-)
-```
-
-### Accessibility
-
-Consider pairing the `onAction` function with a method that can announce a message to the user. In the above example a message of "School has been deleted" would be appropriate for screen reader users. [Radix UI Announce](https://radix-ui.com/primitives/docs/utilities/announce) would be a good candidate for this.

package/dist/docs/Avatar.mdx

@@ -1,129 +0,0 @@
----
-title: Avatar
-component: Avatar,Avatar.Image,Avatar.Initial,Avatar.Placeholder,Avatar.Icon
-description: Show a thumbnail representation of an individual or entity.
-category: Media
----
-
-The `Avatar` component can be used to show a visual representation of a user or entity. It helps to quickly identify users or objects.
-
-```jsx preview
-<Avatar name="Alice Smith">
-  <Avatar.Image
-    alt="Alice Smith's avatar"
-    src="https://thispersondoesnotexist.com/image"
-  />
-</Avatar>
-```
-
-Instead of an image, the initial of the name or a placeholder icon can be used
-
-```jsx preview
-<>
-  <Avatar name="Alice Smith">
-    <Avatar.Initial />
-  </Avatar>
-  <Avatar>
-    <Avatar.Placeholder />
-  </Avatar>
-</>
-```
-
-When an image src is missing it will fallback to the initial of the name.
-
-```jsx preview
-<Avatar name="Alice Smith">
-  <Avatar.Image alt="" src="" />
-</Avatar>
-```
-
-When the name is also missing it will fallback to the placeholder icon.
-
-```jsx preview
-<Avatar name="">
-  <Avatar.Image alt="Alice Smith's avatar" src="" />
-</Avatar>
-```
-
-When `<Avatar.Initial />` is used but the name is missing, it will fallback to the placeholder icon.
-
-```jsx preview
-<Avatar name="">
-  <Avatar.Initial />
-</Avatar>
-```
-
-An `onClick` prop can be used, this will make the component focusable using the keyboard, as it uses a `<button>` under the hood.
-
-```jsx preview
-<Avatar name="Alice Smith" onClick={() => alert('Thanks for clicking')}>
-  <Avatar.Initial />
-</Avatar>
-```
-
-When disabled, the onClick won't work.
-
-```jsx preview
-<Avatar
-  name="Alice Smith"
-  disabled
-  onClick={() => alert('This message will not appear')}
->
-  <Avatar.Initial />
-</Avatar>
-```
-
-Instead of an image, an icon can be passed.
-
-```jsx preview
-<>
-  <Avatar>
-    <Avatar.Icon is={BatteryMedium} />
-  </Avatar>
-</>
-```
-
-## Size
-
-The available `size`s for this component are: `xs`, `sm`, `md`, `lg`, `xl` and `xxl`. The default is `lg`.
-
-```jsx live
-<>
-  <Avatar size="xs" name="Alice Smith">
-    <Avatar.Image
-      alt="Alice Smith's avatar"
-      src="https://thispersondoesnotexist.com/image"
-    />
-  </Avatar>
-  <Avatar size="sm" name="Alice Smith">
-    <Avatar.Image
-      alt="Alice Smith's avatar"
-      src="https://thispersondoesnotexist.com/image"
-    />
-  </Avatar>
-  <Avatar size="md" name="Alice Smith">
-    <Avatar.Image
-      alt="Alice Smith's avatar"
-      src="https://thispersondoesnotexist.com/image"
-    />
-  </Avatar>
-  <Avatar size="lg" name="Alice Smith">
-    <Avatar.Image
-      alt="Alice Smith's avatar"
-      src="https://thispersondoesnotexist.com/image"
-    />
-  </Avatar>
-  <Avatar size="xl" name="Alice Smith">
-    <Avatar.Image
-      alt="Alice Smith's avatar"
-      src="https://thispersondoesnotexist.com/image"
-    />
-  </Avatar>
-  <Avatar size="xxl" name="Alice Smith">
-    <Avatar.Image
-      alt="Alice Smith's avatar"
-      src="https://thispersondoesnotexist.com/image"
-    />
-  </Avatar>
-</>
-```

package/dist/docs/Badge.mdx

@@ -1,55 +0,0 @@
----
-title: Badge
-component: Badge
-description: Highlights a small piece of information
-category: Feedback
----
-
-The `Badge` component can be used to highlight a short piece of information, like a status.
-
-```tsx preview live
-<Badge>New Data</Badge>
-```
-
-## Theme
-
-These are the available `theme`s for this component: `success`, `warning`, `danger`, `neutral` and `info`. The default is `info`
-
-```tsx preview
-<>
-  <Badge>Info</Badge>
-  <Badge theme="neutral">Neutral</Badge>
-  <Badge theme="success">Success</Badge>
-  <Badge theme="warning">Warning</Badge>
-  <Badge theme="danger">Danger</Badge>
-</>
-```
-
-## Size
-
-These are the available `size`s for this component: `xs`, `sm` and `md`. The default is `sm`
-
-```tsx preview
-<>
-  <Badge size="xs">extra small</Badge>
-  <Badge size="sm">small</Badge>
-  <Badge size="md">medium</Badge>
-</>
-```
-
-## With icons
-
-An `<Icon />` can be passed as a child to show alongside text.
-
-```tsx preview
-<>
-  <Badge>
-    <Icon is={Wifi} />
-    Info with icon
-  </Badge>
-  <Badge theme="neutral">
-    Info with icon
-    <Icon is={Wifi} />
-  </Badge>
-</>
-```

package/dist/docs/Box.mdx

@@ -1,52 +0,0 @@
----
-title: Box
-component: Box
-description: Box is our most fundamental layout component
-category: Layout
----
-
-`Box` can largely be seen as an abstraction over the `div` element. It is most useful when used as a generic containing component, and when paired with `as` and `css` allows a high degree of composition and flexibility.
-
-`Box` falls back to rendering a `div`, but we should use it to render more sematically relevant container elements e.g. `<Box as="section">`. As an example, a card component could use `Box` to render a `section`, `header` and `footer`.
-
-Avoid rendering any of these elements directly in our components — `Box` has all the same flexibility, but with the addition of the powerful `css` prop and various styling utilities based on our themes.
-
-## Example
-
-To show an example of the benefits of using `Box`, the card below is composed together using `Box` alongside other relevant components:
-
-```tsx live
-<Box
-  as="article"
-  css={{
-    border: '1px solid $tonal100',
-    borderRadius: '$1',
-    overflow: 'hidden',
-    width: '320px'
-  }}
->
-  <Box as="figure" css={{ m: 0, position: 'relative' }}>
-    <Image src="http://placekitten.com/320/200" alt="Cats having a nice time" />
-    <Text
-      as="figcaption"
-      size="sm"
-      css={{
-        bottom: '$3',
-        color: 'white',
-        position: 'absolute',
-        right: '$3'
-      }}
-    >
-      Here is a cute cat
-    </Text>
-  </Box>
-  <Stack gap="4" css={{ px: '$3', py: '$4' }}>
-    <Heading as="h2" size="sm">
-      Cat
-    </Heading>
-    <Text>
-      The cat (Felis catus) is a domestic species of small carnivorous mammal.
-    </Text>
-  </Stack>
-</Box>
-```

package/dist/docs/Button.mdx

@@ -1,68 +0,0 @@
----
-title: Button
-component: Button
-description: The Button component is a light wrapper around an HTML button element
-category: Navigation
----
-
-It adds default styling and the `css` prop. By default `primary` theme is displayed with a `solid` appearance.
-
-```tsx live
-<Button>Hello world</Button>
-```
-
-## Themes
-
-These are the available `themes` for the `Button` component: `primary` (default), `secondary`, `success`, `warning`, `danger`, and `neutral`.
-
-```tsx preview
-<>
-  <Button>Primary</Button>
-  <Button theme="secondary">Secondary</Button>
-  <Button theme="success">Success</Button>
-  <Button theme="warning">Warning</Button>
-  <Button theme="danger">Danger</Button>
-  <Button theme="neutral">Neutral</Button>
-</>
-```
-
-## Appearance
-
-There are two options for the `appearance` property: `solid` and `outline`. There are the available `outline` variations for the `primary`, `secondary` and `neutral` themes.
-
-```tsx preview
-<Button appearance="outline">Primary</Button>
-```
-
-## Disabled state
-
-Each variation has an `disabled` stated, by setting the `disabled` property.
-
-```tsx preview
-<>
-  <Button disabled>Disabled button</Button>
-  <Button theme="success" disabled>
-    Disabled button
-  </Button>
-</>
-```
-
-## Loading state
-
-When using a button to request data or fire an action that has a potential delay, including a loading state to the button can be a useful indicator that stuff is happening. The `isLoading` prop must be a boolean value to activate the loading state.
-
-```tsx live
-<Button isLoading> Hello world</Button>
-```
-
-## Polymorphism
-
-The `Button` component supports polymorphism, therefore depending on whether it receives an `onClick`/`href` as a prop, it will produce a `button` or `link` respectively
-
-```tsx preview
-<Button href="http://example.com/">I'm a link</Button>
-```
-
-```tsx preview
-<Button onClick={() => console.log('clicked')}>I'm a button</Button>
-```