@atom-learning/components 5.13.0-beta.0 → 5.14.0

package/dist/components/data-table/DataTableTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { Box } from '../box'\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled(Box, {\n  p: '$2',\n  bg: 'white',\n  borderRadius: '$3'\n})\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      stickyHeaderOffset?: number\n      headerCss?: CSS\n      numberOfStickyColumns?: number\n      scrollContainerCss?: CSS\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  ...props\n}: DataTableTableProps): JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n\n  const scrollTarget = React.useMemo(() => {\n    if (typeof window === 'undefined') return null\n    return window\n  }, [])\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    scrollTarget,\n    setTablePosition\n  ])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n      <TableContainer>\n        <Table\n          corners=\"round\"\n          size=\"lg\"\n          {...props}\n          ref={tableRef}\n          numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n          scrollContainerCss={{\n            ...scrollOptions.scrollContainerCss\n          }}\n          scrollContainerkey={buildScrollContainerKey()}\n          css={{\n            ...css,\n            ...(isPending && {\n              opacity: 0.5,\n              pointerEvents: 'none',\n              transition: 'opacity 250ms linear 150ms'\n            })\n          }}\n        >\n          <DataTable.Head\n            theme={theme}\n            sortable={sortable}\n            isSticky={scrollOptions.hasStickyHeader}\n            stickyOffset={scrollOptions.stickyHeaderOffset}\n            css={scrollOptions.headerCss}\n            showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n            totalSuffix={scrollOptions.totalSuffix}\n          />\n          <DataTable.Body striped={striped} rowAction={rowAction} />\n        </Table>\n      </TableContainer>\n    </>\n  )\n}\n"],"names":["TableContainer","styled","Box","DataTableTable","sortable","striped","theme","css","scrollOptions","rowAction","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","rowSelection","enableRowSelection","tableId","setTablePosition","useDataTable","tableRef","React","isTableVisible","isScrolling","scrollTarget","updatePosition","tableTop","tableBottom","prevPosition","handleScroll","observerOffset","observerOptions","handleTableIntersection","entries","entry","tableObserver","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","DataTableLoading","Table","DataTable"],"mappings":"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"}
+{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { Box } from '../box'\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled(Box, {\n  p: '$2',\n  bg: 'white',\n  borderRadius: '$3'\n})\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      stickyHeaderOffset?: number\n      headerCss?: CSS\n      numberOfStickyColumns?: number\n      scrollContainerCss?: CSS\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n    withContainer?: boolean\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  withContainer = false,\n  ...props\n}: DataTableTableProps): JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n\n  const scrollTarget = React.useMemo(() => {\n    if (typeof window === 'undefined') return null\n    return window\n  }, [])\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    scrollTarget,\n    setTablePosition\n  ])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  const tableComponent = (\n    <Table\n      corners=\"round\"\n      size=\"lg\"\n      {...props}\n      ref={tableRef}\n      numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n      scrollContainerCss={{\n        ...scrollOptions.scrollContainerCss\n      }}\n      scrollContainerkey={buildScrollContainerKey()}\n      css={{\n        ...css,\n        ...(isPending && {\n          opacity: 0.5,\n          pointerEvents: 'none',\n          transition: 'opacity 250ms linear 150ms'\n        })\n      }}\n    >\n      <DataTable.Head\n        theme={theme}\n        sortable={sortable}\n        isSticky={scrollOptions.hasStickyHeader}\n        stickyOffset={scrollOptions.stickyHeaderOffset}\n        css={scrollOptions.headerCss}\n        showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n        totalSuffix={scrollOptions.totalSuffix}\n      />\n      <DataTable.Body striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer>{tableComponent}</TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"names":["TableContainer","styled","Box","DataTableTable","sortable","striped","theme","css","scrollOptions","rowAction","withContainer","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","rowSelection","enableRowSelection","tableId","setTablePosition","useDataTable","tableRef","React","isTableVisible","isScrolling","scrollTarget","updatePosition","tableTop","tableBottom","prevPosition","handleScroll","observerOffset","observerOptions","handleTableIntersection","entries","entry","tableObserver","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","tableComponent","Table","DataTable","DataTableLoading"],"mappings":"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"}

package/dist/components/data-table/pagination/Pagination.d.ts

@@ -24,8 +24,6 @@ declare const StyledNav: import("@atom-learning/stitches-react/types/styled-comp
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dialog/Dialog.d.ts

@@ -22,8 +22,6 @@ export declare const Dialog: import("@atom-learning/stitches-react/types/styled-
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -393,8 +391,6 @@ export declare const Dialog: import("@atom-learning/stitches-react/types/styled-
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -763,8 +759,6 @@ export declare const Dialog: import("@atom-learning/stitches-react/types/styled-
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1134,8 +1128,6 @@ export declare const Dialog: import("@atom-learning/stitches-react/types/styled-
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1508,8 +1500,6 @@ export declare const Dialog: import("@atom-learning/stitches-react/types/styled-
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
-                black: string;
-                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1859,8 +1849,8 @@ export declare const Dialog: import("@atom-learning/stitches-react/types/styled-
         closeDialogText?: string;
         showCloseButton?: boolean;
     }) => import("react").JSX.Element;
-    Heading: ({ css, ...props }: React.ComponentProps<typeof import("..").Heading>) => import("react").JSX.Element;
-    Footer: ({ css, ...props }: React.ComponentProps<typeof import("..").Flex>) => import("react").JSX.Element;
+    Heading: ({ css, ...props }: import("react").ComponentProps<typeof import("..").Heading>) => import("react").JSX.Element;
+    Footer: ({ css, ...props }: import("react").ComponentProps<typeof import("..").Flex>) => import("react").JSX.Element;
     Description: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
     Title: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
     Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/dialog/DialogBackground.d.ts

@@ -22,8 +22,6 @@ export declare const DialogBackground: import("@atom-learning/stitches-react/typ
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -392,8 +390,6 @@ export declare const DialogBackground: import("@atom-learning/stitches-react/typ
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dialog/DialogClose.d.ts

@@ -22,8 +22,6 @@ export declare const DialogClose: import("@atom-learning/stitches-react/types/st
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dialog/DialogContent.d.ts

@@ -25,8 +25,6 @@ declare const StyledDialogContent: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dismissible/index.d.ts

@@ -1,6 +1,6 @@
 export declare const Dismissible: {
-    ({ disabled, dismissed, onDismiss, ...rest }: React.PropsWithChildren<import("./DismissibleRoot").IDismissibleRootInternalProps & import("./DismissibleRoot").IDismissibleRootProps>): import("react").JSX.Element;
+    ({ disabled, dismissed, onDismiss, ...rest }: import("react").PropsWithChildren<import("./DismissibleRoot").IDismissibleRootInternalProps & import("./DismissibleRoot").IDismissibleRootProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    Trigger: ({ asChild, ...rest }: React.PropsWithChildren<import("./DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
+    Trigger: ({ asChild, ...rest }: import("react").PropsWithChildren<import("./DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
 };

package/dist/components/dismissible-group/index.d.ts

@@ -1,7 +1,7 @@
 export declare const DismissibleGroup: {
-    ({ as: Component, disabled, onDismiss, ...rest }: React.PropsWithChildren<import("./DismissibleGroupRoot").IDismissibleGroupRootProps>): import("react").JSX.Element;
+    ({ as: Component, disabled, onDismiss, ...rest }: import("react").PropsWithChildren<import("./DismissibleGroupRoot").IDismissibleGroupRootProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    Item: ({ children, value, disabled: itemDisabled, ...rest }: React.PropsWithChildren<import("./DismissibleGroupItem").TDismissibleGroupItemProps>) => import("react").JSX.Element;
-    Trigger: ({ asChild, ...rest }: React.PropsWithChildren<import("../../components/dismissible/DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
+    Item: ({ children, value, disabled: itemDisabled, ...rest }: import("react").PropsWithChildren<import("./DismissibleGroupItem").TDismissibleGroupItemProps>) => import("react").JSX.Element;
+    Trigger: ({ asChild, ...rest }: import("react").PropsWithChildren<import("../../components/dismissible/DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
 };

package/dist/components/divider/Divider.d.ts

@@ -25,8 +25,6 @@ export declare const StyledDivider: import("@atom-learning/stitches-react/types/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/drawer/Drawer.d.ts

@@ -30,8 +30,6 @@ export declare const Drawer: {
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -401,8 +399,6 @@ export declare const Drawer: {
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -772,8 +768,6 @@ export declare const Drawer: {
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1143,8 +1137,6 @@ export declare const Drawer: {
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;

package/dist/components/drawer/DrawerContent.d.ts

@@ -26,8 +26,6 @@ export declare const StyledContent: import("@atom-learning/stitches-react/types/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/drawer/DrawerFooter.d.ts

@@ -22,8 +22,6 @@ export declare const DrawerFooter: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/drawer/DrawerHeader.d.ts

@@ -22,8 +22,6 @@ export declare const DrawerHeader: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/drawer/DrawerMain.d.ts

@@ -22,8 +22,6 @@ export declare const DrawerMain: import("@atom-learning/stitches-react/types/sty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/drawer/DrawerOverlay.d.ts

@@ -22,8 +22,6 @@ export declare const DrawerOverlay: import("@atom-learning/stitches-react/types/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/drawer/DrawerTrigger.d.ts

@@ -22,8 +22,6 @@ export declare const DrawerTrigger: import("@atom-learning/stitches-react/types/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -24,8 +24,6 @@ export declare const DropdownMenu: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -395,8 +393,6 @@ export declare const DropdownMenu: import("@atom-learning/stitches-react/types/s
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -766,8 +762,6 @@ export declare const DropdownMenu: import("@atom-learning/stitches-react/types/s
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1141,8 +1135,6 @@ export declare const DropdownMenu: import("@atom-learning/stitches-react/types/s
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1512,8 +1504,6 @@ export declare const DropdownMenu: import("@atom-learning/stitches-react/types/s
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;

package/dist/components/dropdown-menu/DropdownMenuContent.d.ts

@@ -22,8 +22,6 @@ export declare const DropdownMenuContent: import("@atom-learning/stitches-react/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dropdown-menu/DropdownMenuItem.d.ts

@@ -56,8 +56,6 @@ export declare const DropdownMenuItem: import("@atom-learning/stitches-react/typ
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dropdown-menu/DropdownMenuSeparator.d.ts

@@ -22,8 +22,6 @@ export declare const DropdownMenuSeparator: import("@atom-learning/stitches-reac
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dropdown-menu/DropdownMenuTrigger.d.ts

@@ -22,8 +22,6 @@ export declare const DropdownMenuTrigger: import("@atom-learning/stitches-react/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/empty-state/EmptyState.d.ts

@@ -29,8 +29,6 @@ declare const EmptyStateContainer: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -401,8 +399,6 @@ declare const EmptyStateContainer: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -782,8 +778,6 @@ export declare const EmptyState: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
-                black: string;
-                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1158,8 +1152,6 @@ export declare const EmptyState: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
-                black: string;
-                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1535,8 +1527,6 @@ export declare const EmptyState: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
-                black: string;
-                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1917,8 +1907,6 @@ export declare const EmptyState: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
-                black: string;
-                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -2293,8 +2281,6 @@ export declare const EmptyState: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
-                black: string;
-                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;

package/dist/components/empty-state/EmptyStateBody.d.ts

@@ -31,8 +31,6 @@ declare const StyledEmptyStateBody: import("@atom-learning/stitches-react/types/
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -406,8 +404,6 @@ declare const StyledEmptyStateBody: import("@atom-learning/stitches-react/types/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/empty-state/EmptyStateImage.d.ts

@@ -29,8 +29,6 @@ declare const StyledEmptyStateImage: import("@atom-learning/stitches-react/types
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
-                black: string;
-                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -406,8 +404,6 @@ declare const StyledEmptyStateImage: import("@atom-learning/stitches-react/types
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/empty-state/EmptyStateTitle.d.ts

@@ -25,8 +25,6 @@ declare const StyledEmptyStateTitle: import("@atom-learning/stitches-react/types
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/flex/Flex.d.ts

@@ -28,8 +28,6 @@ export declare const Flex: import("@atom-learning/stitches-react/types/styled-co
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/form/Form.d.ts

@@ -25,8 +25,6 @@ declare const StyledForm: import("@atom-learning/stitches-react/types/styled-com
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/grid/Grid.d.ts

@@ -25,8 +25,6 @@ declare const GridContainer: import("@atom-learning/stitches-react/types/styled-
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/heading/Heading.d.ts

@@ -28,8 +28,6 @@ export declare const StyledHeading: import("@atom-learning/stitches-react/types/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/icon/Icon.d.ts

@@ -26,8 +26,6 @@ export declare const StyledIcon: import("@atom-learning/stitches-react/types/sty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/image/Image.d.ts

@@ -26,8 +26,6 @@ export declare const StyledImage: import("@atom-learning/stitches-react/types/st
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/inline-message/InlineMessage.d.ts

@@ -29,8 +29,6 @@ declare const InlineMessageContainer: import("@atom-learning/stitches-react/type
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -401,8 +399,6 @@ declare const InlineMessageContainer: import("@atom-learning/stitches-react/type
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/input/Input.d.ts

@@ -30,8 +30,6 @@ export declare const InputBackground: import("@atom-learning/stitches-react/type
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -405,8 +403,6 @@ export declare const InputBackground: import("@atom-learning/stitches-react/type
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -776,8 +772,6 @@ declare const StyledInputText: import("@atom-learning/stitches-react/types/style
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/keyboard-shortcut/KeyboardShortcut.d.ts

@@ -47,8 +47,6 @@ declare const StyledKeyboardShortcutIndicator: import("@atom-learning/stitches-r
             textMinimal: string;
             background: string;
             backgroundAccent: string;
-            black: string;
-            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -420,8 +418,6 @@ declare const StyledKeyboardShortcutIndicator: import("@atom-learning/stitches-r
         textMinimal: string;
         background: string;
         backgroundAccent: string;
-        black: string;
-        white: string;
         grey100: string;
         grey200: string;
         grey300: string;