@atom-learning/components 4.0.0-beta.5 → 4.0.0-beta.7

package/dist/stitches.js

@@ -0,0 +1,2 @@
+import{createStitches as m,defaultThemeMap as o}from"@atom-learning/stitches-react";import*as r from"@atom-learning/theme/lib/theme-atom";import{themeMap as d}from"@atom-learning/theme/theme-map";const e={bg:t=>({background:t}),size:t=>({height:t,width:t}),p:t=>({padding:t}),pt:t=>({paddingTop:t}),pr:t=>({paddingRight:t}),pb:t=>({paddingBottom:t}),pl:t=>({paddingLeft:t}),px:t=>({paddingLeft:t,paddingRight:t}),py:t=>({paddingTop:t,paddingBottom:t}),m:t=>({margin:t}),mt:t=>({marginTop:t}),mr:t=>({marginRight:t}),mb:t=>({marginBottom:t}),ml:t=>({marginLeft:t}),mx:t=>({marginLeft:t,marginRight:t}),my:t=>({marginTop:t,marginBottom:t})},i={sm:"(min-width: 550px)",md:"(min-width: 800px)",lg:"(min-width: 1100px)",xl:"(min-width: 1350px)",reducedMotion:"(prefers-reduced-motion)",allowMotion:"(prefers-reduced-motion: no-preference)",hover:"(hover: hover)"},p=m({theme:r,themeMap:{...o,...d},utils:e,media:i}),{css:n,getCssText:a,createTheme:g,globalCss:h,keyframes:s,styled:c,theme:f}=p;export{g as createTheme,n as css,a as getCssText,h as globalCss,s as keyframes,i as media,c as styled,f as theme,e as utils};
+//# sourceMappingURL=stitches.js.map

package/dist/stitches.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stitches.js","sources":["../src/stitches.ts"],"sourcesContent":["import type {\n  CSS as StitchesCSS,\n  PropertyValue,\n  ScaleValue\n} from '@atom-learning/stitches-react'\nimport { createStitches, defaultThemeMap } from '@atom-learning/stitches-react'\nimport type { Theme } from '@atom-learning/theme/lib/theme-atom'\nimport * as atomTheme from '@atom-learning/theme/lib/theme-atom'\nimport { themeMap } from '@atom-learning/theme/theme-map'\n\nexport const utils = {\n  bg: (value: PropertyValue<'background'>) => ({\n    background: value\n  }),\n\n  size: (value: ScaleValue<'size'> | number | string) => ({\n    height: value,\n    width: value\n  }),\n\n  p: (value: ScaleValue<'space'> | number | string) => ({\n    padding: value\n  }),\n  pt: (value: ScaleValue<'space'> | number | string) => ({\n    paddingTop: value\n  }),\n  pr: (value: ScaleValue<'space'> | number | string) => ({\n    paddingRight: value\n  }),\n  pb: (value: ScaleValue<'space'> | number | string) => ({\n    paddingBottom: value\n  }),\n  pl: (value: ScaleValue<'space'> | number | string) => ({\n    paddingLeft: value\n  }),\n  px: (value: ScaleValue<'space'> | number | string) => ({\n    paddingLeft: value,\n    paddingRight: value\n  }),\n  py: (value: ScaleValue<'space'> | number | string) => ({\n    paddingTop: value,\n    paddingBottom: value\n  }),\n\n  m: (value: ScaleValue<'space'> | number | string) => ({\n    margin: value\n  }),\n  mt: (value: ScaleValue<'space'> | number | string) => ({\n    marginTop: value\n  }),\n  mr: (value: ScaleValue<'space'> | number | string) => ({\n    marginRight: value\n  }),\n  mb: (value: ScaleValue<'space'> | number | string) => ({\n    marginBottom: value\n  }),\n  ml: (value: ScaleValue<'space'> | number | string) => ({\n    marginLeft: value\n  }),\n  mx: (value: ScaleValue<'space'> | number | string) => ({\n    marginLeft: value,\n    marginRight: value\n  }),\n  my: (value: ScaleValue<'space'> | number | string) => ({\n    marginTop: value,\n    marginBottom: value\n  })\n}\n\nexport const media = {\n  sm: '(min-width: 550px)',\n  md: '(min-width: 800px)',\n  lg: '(min-width: 1100px)',\n  xl: '(min-width: 1350px)',\n  reducedMotion: '(prefers-reduced-motion)',\n  allowMotion: '(prefers-reduced-motion: no-preference)',\n  hover: '(hover: hover)'\n}\n\nconst stitchesConfig = createStitches({\n  theme: atomTheme as Theme,\n  themeMap: {\n    ...defaultThemeMap,\n    ...themeMap\n  },\n  utils,\n  media\n})\n\nexport const {\n  css,\n  getCssText,\n  createTheme,\n  globalCss,\n  keyframes,\n  styled,\n  theme\n} = stitchesConfig\n\nexport type CSS = StitchesCSS<typeof stitchesConfig>\n"],"names":["utils","value","media","stitchesConfig","createStitches","atomTheme","defaultThemeMap","themeMap","css","getCssText","createTheme","globalCss","keyframes","styled","theme"],"mappings":"oMAUO,MAAMA,EAAQ,CACnB,GAAKC,IAAwC,CAC3C,WAAYA,CACd,GAEA,KAAOA,IAAiD,CACtD,OAAQA,EACR,MAAOA,CACT,GAEA,EAAIA,IAAkD,CACpD,QAASA,CACX,GACA,GAAKA,IAAkD,CACrD,WAAYA,CACd,GACA,GAAKA,IAAkD,CACrD,aAAcA,CAChB,GACA,GAAKA,IAAkD,CACrD,cAAeA,CACjB,GACA,GAAKA,IAAkD,CACrD,YAAaA,CACf,GACA,GAAKA,IAAkD,CACrD,YAAaA,EACb,aAAcA,CAChB,GACA,GAAKA,IAAkD,CACrD,WAAYA,EACZ,cAAeA,CACjB,GAEA,EAAIA,IAAkD,CACpD,OAAQA,CACV,GACA,GAAKA,IAAkD,CACrD,UAAWA,CACb,GACA,GAAKA,IAAkD,CACrD,YAAaA,CACf,GACA,GAAKA,IAAkD,CACrD,aAAcA,CAChB,GACA,GAAKA,IAAkD,CACrD,WAAYA,CACd,GACA,GAAKA,IAAkD,CACrD,WAAYA,EACZ,YAAaA,CACf,GACA,GAAKA,IAAkD,CACrD,UAAWA,EACX,aAAcA,CAChB,EACF,EAEaC,EAAQ,CACnB,GAAI,qBACJ,GAAI,qBACJ,GAAI,sBACJ,GAAI,sBACJ,cAAe,2BACf,YAAa,0CACb,MAAO,gBACT,EAEMC,EAAiBC,EAAe,CACpC,MAAOC,EACP,SAAU,CACR,GAAGC,EACH,GAAGC,CACL,EACA,MAAAP,EACA,MAAAE,CACF,CAAC,EAEY,CACX,IAAAM,EACA,WAAAC,EACA,YAAAC,EACA,UAAAC,EACA,UAAAC,EACA,OAAAC,EACA,MAAAC,CACF,EAAIX"}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './navigatorActions.types';
+export * from './polymorphicComponentProp.types';

package/dist/types/navigatorActions.types.d.ts

@@ -0,0 +1,4 @@
+export declare type NavigatorActions = {
+    onClick?: (...args: unknown[]) => void;
+    href?: string;
+};

package/dist/types/polymorphicComponentProp.types.d.ts

@@ -0,0 +1,60 @@
+/**
+ * The goal of these types is to make sure that our polymorphic components accept
+ * the correct attributes, and any ref passed onto the polymorphic component has
+ * the correct type.
+ *
+ * For example, when you pass `as="a"`, it should accept an `href` attribute and,
+ * the `ref` should be of type `HTMLAnchorElement`.
+ *
+ * If you pass `as="button"` instead, it should not accept `href` and the `ref`
+ * should be of type `HTMLButtonElement`.
+ *
+ *
+ * Taken from:
+ * https://blog.logrocket.com/build-strongly-typed-polymorphic-components-react-typescript/
+ */
+/// <reference types="react" />
+/**
+ * A generic that is used to capture the `as` prop value
+ */
+declare type AsProp<C extends React.ElementType> = {
+    as?: C;
+};
+/**
+ * A type of the `as` prop, plus any custom defined props.
+ */
+declare type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+/**
+ * Adds a typed `as` prop to a list of props.
+ */
+declare type PolymorphicComponentProp<C extends React.ElementType, Props = Record<string, unknown>> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+/**
+ * Type to capture the `ref` prop type from the element type
+ * passed into the `as` prop.
+ */
+export declare type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+/**
+ * Usage example:
+ *
+ * ```tsx
+ * type MyComponentProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<
+ *   C,
+ *   { myProp: string }
+ * >
+ *
+ * const MyComponent: <C extends React.ElementType = 'span'>(
+ *   props: MyComponentProps<C>
+ * ) => React.ReactElement | null = React.forwardRef(
+ *   <C extends React.ElementType = 'span'>(
+ *     { children, as, myProp }: MyComponentProps<C>,
+ *     ref?: MyComponentProps<C>['ref']
+ *   ) => {
+ *     ...
+ *   }
+ * )
+ * ```
+ */
+export declare type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = Record<string, unknown>> = PolymorphicComponentProp<C, Props> & {
+    ref?: PolymorphicRef<C>;
+};
+export {};

package/dist/utilities/create-theme-variants/createThemeVariants.d.ts

@@ -0,0 +1,333 @@
+import { Theme } from '@atom-learning/theme/lib/theme-atom';
+import { CSS, theme } from '../../stitches';
+/**
+ * Generates a Stitches variants object based on keys in our theme.
+ * You can use the string `$key` in your CSS object, which will be replaced
+ * with the token from our theme.
+ *
+ *
+ * @example
+ * ```ts
+ * createThemeVariants('space', { p: '$key' })
+ *
+ * // Result:
+ * // {
+ * //   0: { p: '$space$0' },
+ * //   1: { p: '$space$1' },
+ * //   2: { p: '$space$2' },
+ * //   ...etc
+ * // }
+ * ```
+ */
+export declare const createThemeVariants: <ThemeProperty extends keyof Theme>(themeProperty: ThemeProperty, styles: CSS) => Record<keyof (string & {
+    className: string;
+    selector: string;
+} & {
+    colors: {
+        textBold: import("@atom-learning/stitches-react/types/theme").Token<"textBold", string, "colors", "">;
+        textRegular: import("@atom-learning/stitches-react/types/theme").Token<"textRegular", string, "colors", "">;
+        textSubtle: import("@atom-learning/stitches-react/types/theme").Token<"textSubtle", string, "colors", "">;
+        textMinimal: import("@atom-learning/stitches-react/types/theme").Token<"textMinimal", string, "colors", "">;
+        background: import("@atom-learning/stitches-react/types/theme").Token<"background", string, "colors", "">;
+        backgroundAccent: import("@atom-learning/stitches-react/types/theme").Token<"backgroundAccent", string, "colors", "">;
+        grey100: import("@atom-learning/stitches-react/types/theme").Token<"grey100", string, "colors", "">;
+        grey200: import("@atom-learning/stitches-react/types/theme").Token<"grey200", string, "colors", "">;
+        grey300: import("@atom-learning/stitches-react/types/theme").Token<"grey300", string, "colors", "">;
+        grey400: import("@atom-learning/stitches-react/types/theme").Token<"grey400", string, "colors", "">;
+        grey500: import("@atom-learning/stitches-react/types/theme").Token<"grey500", string, "colors", "">;
+        grey600: import("@atom-learning/stitches-react/types/theme").Token<"grey600", string, "colors", "">;
+        grey700: import("@atom-learning/stitches-react/types/theme").Token<"grey700", string, "colors", "">;
+        grey800: import("@atom-learning/stitches-react/types/theme").Token<"grey800", string, "colors", "">;
+        grey900: import("@atom-learning/stitches-react/types/theme").Token<"grey900", string, "colors", "">;
+        grey1000: import("@atom-learning/stitches-react/types/theme").Token<"grey1000", string, "colors", "">;
+        grey1100: import("@atom-learning/stitches-react/types/theme").Token<"grey1100", string, "colors", "">;
+        grey1200: import("@atom-learning/stitches-react/types/theme").Token<"grey1200", string, "colors", "">;
+        blue100: import("@atom-learning/stitches-react/types/theme").Token<"blue100", string, "colors", "">;
+        blue200: import("@atom-learning/stitches-react/types/theme").Token<"blue200", string, "colors", "">;
+        blue300: import("@atom-learning/stitches-react/types/theme").Token<"blue300", string, "colors", "">;
+        blue400: import("@atom-learning/stitches-react/types/theme").Token<"blue400", string, "colors", "">;
+        blue500: import("@atom-learning/stitches-react/types/theme").Token<"blue500", string, "colors", "">;
+        blue600: import("@atom-learning/stitches-react/types/theme").Token<"blue600", string, "colors", "">;
+        blue700: import("@atom-learning/stitches-react/types/theme").Token<"blue700", string, "colors", "">;
+        blue800: import("@atom-learning/stitches-react/types/theme").Token<"blue800", string, "colors", "">;
+        blue900: import("@atom-learning/stitches-react/types/theme").Token<"blue900", string, "colors", "">;
+        blue1000: import("@atom-learning/stitches-react/types/theme").Token<"blue1000", string, "colors", "">;
+        blue1100: import("@atom-learning/stitches-react/types/theme").Token<"blue1100", string, "colors", "">;
+        blue1200: import("@atom-learning/stitches-react/types/theme").Token<"blue1200", string, "colors", "">;
+        pink100: import("@atom-learning/stitches-react/types/theme").Token<"pink100", string, "colors", "">;
+        pink200: import("@atom-learning/stitches-react/types/theme").Token<"pink200", string, "colors", "">;
+        pink300: import("@atom-learning/stitches-react/types/theme").Token<"pink300", string, "colors", "">;
+        pink400: import("@atom-learning/stitches-react/types/theme").Token<"pink400", string, "colors", "">;
+        pink500: import("@atom-learning/stitches-react/types/theme").Token<"pink500", string, "colors", "">;
+        pink600: import("@atom-learning/stitches-react/types/theme").Token<"pink600", string, "colors", "">;
+        pink700: import("@atom-learning/stitches-react/types/theme").Token<"pink700", string, "colors", "">;
+        pink800: import("@atom-learning/stitches-react/types/theme").Token<"pink800", string, "colors", "">;
+        pink900: import("@atom-learning/stitches-react/types/theme").Token<"pink900", string, "colors", "">;
+        pink1000: import("@atom-learning/stitches-react/types/theme").Token<"pink1000", string, "colors", "">;
+        pink1100: import("@atom-learning/stitches-react/types/theme").Token<"pink1100", string, "colors", "">;
+        pink1200: import("@atom-learning/stitches-react/types/theme").Token<"pink1200", string, "colors", "">;
+        purple100: import("@atom-learning/stitches-react/types/theme").Token<"purple100", string, "colors", "">;
+        purple200: import("@atom-learning/stitches-react/types/theme").Token<"purple200", string, "colors", "">;
+        purple300: import("@atom-learning/stitches-react/types/theme").Token<"purple300", string, "colors", "">;
+        purple400: import("@atom-learning/stitches-react/types/theme").Token<"purple400", string, "colors", "">;
+        purple500: import("@atom-learning/stitches-react/types/theme").Token<"purple500", string, "colors", "">;
+        purple600: import("@atom-learning/stitches-react/types/theme").Token<"purple600", string, "colors", "">;
+        purple700: import("@atom-learning/stitches-react/types/theme").Token<"purple700", string, "colors", "">;
+        purple800: import("@atom-learning/stitches-react/types/theme").Token<"purple800", string, "colors", "">;
+        purple900: import("@atom-learning/stitches-react/types/theme").Token<"purple900", string, "colors", "">;
+        purple1000: import("@atom-learning/stitches-react/types/theme").Token<"purple1000", string, "colors", "">;
+        purple1100: import("@atom-learning/stitches-react/types/theme").Token<"purple1100", string, "colors", "">;
+        purple1200: import("@atom-learning/stitches-react/types/theme").Token<"purple1200", string, "colors", "">;
+        cyan100: import("@atom-learning/stitches-react/types/theme").Token<"cyan100", string, "colors", "">;
+        cyan200: import("@atom-learning/stitches-react/types/theme").Token<"cyan200", string, "colors", "">;
+        cyan300: import("@atom-learning/stitches-react/types/theme").Token<"cyan300", string, "colors", "">;
+        cyan400: import("@atom-learning/stitches-react/types/theme").Token<"cyan400", string, "colors", "">;
+        cyan500: import("@atom-learning/stitches-react/types/theme").Token<"cyan500", string, "colors", "">;
+        cyan600: import("@atom-learning/stitches-react/types/theme").Token<"cyan600", string, "colors", "">;
+        cyan700: import("@atom-learning/stitches-react/types/theme").Token<"cyan700", string, "colors", "">;
+        cyan800: import("@atom-learning/stitches-react/types/theme").Token<"cyan800", string, "colors", "">;
+        cyan900: import("@atom-learning/stitches-react/types/theme").Token<"cyan900", string, "colors", "">;
+        cyan1000: import("@atom-learning/stitches-react/types/theme").Token<"cyan1000", string, "colors", "">;
+        cyan1100: import("@atom-learning/stitches-react/types/theme").Token<"cyan1100", string, "colors", "">;
+        cyan1200: import("@atom-learning/stitches-react/types/theme").Token<"cyan1200", string, "colors", "">;
+        green100: import("@atom-learning/stitches-react/types/theme").Token<"green100", string, "colors", "">;
+        green200: import("@atom-learning/stitches-react/types/theme").Token<"green200", string, "colors", "">;
+        green300: import("@atom-learning/stitches-react/types/theme").Token<"green300", string, "colors", "">;
+        green400: import("@atom-learning/stitches-react/types/theme").Token<"green400", string, "colors", "">;
+        green500: import("@atom-learning/stitches-react/types/theme").Token<"green500", string, "colors", "">;
+        green600: import("@atom-learning/stitches-react/types/theme").Token<"green600", string, "colors", "">;
+        green700: import("@atom-learning/stitches-react/types/theme").Token<"green700", string, "colors", "">;
+        green800: import("@atom-learning/stitches-react/types/theme").Token<"green800", string, "colors", "">;
+        green900: import("@atom-learning/stitches-react/types/theme").Token<"green900", string, "colors", "">;
+        green1000: import("@atom-learning/stitches-react/types/theme").Token<"green1000", string, "colors", "">;
+        green1100: import("@atom-learning/stitches-react/types/theme").Token<"green1100", string, "colors", "">;
+        green1200: import("@atom-learning/stitches-react/types/theme").Token<"green1200", string, "colors", "">;
+        magenta100: import("@atom-learning/stitches-react/types/theme").Token<"magenta100", string, "colors", "">;
+        magenta200: import("@atom-learning/stitches-react/types/theme").Token<"magenta200", string, "colors", "">;
+        magenta300: import("@atom-learning/stitches-react/types/theme").Token<"magenta300", string, "colors", "">;
+        magenta400: import("@atom-learning/stitches-react/types/theme").Token<"magenta400", string, "colors", "">;
+        magenta500: import("@atom-learning/stitches-react/types/theme").Token<"magenta500", string, "colors", "">;
+        magenta600: import("@atom-learning/stitches-react/types/theme").Token<"magenta600", string, "colors", "">;
+        magenta700: import("@atom-learning/stitches-react/types/theme").Token<"magenta700", string, "colors", "">;
+        magenta800: import("@atom-learning/stitches-react/types/theme").Token<"magenta800", string, "colors", "">;
+        magenta900: import("@atom-learning/stitches-react/types/theme").Token<"magenta900", string, "colors", "">;
+        magenta1000: import("@atom-learning/stitches-react/types/theme").Token<"magenta1000", string, "colors", "">;
+        magenta1100: import("@atom-learning/stitches-react/types/theme").Token<"magenta1100", string, "colors", "">;
+        magenta1200: import("@atom-learning/stitches-react/types/theme").Token<"magenta1200", string, "colors", "">;
+        red100: import("@atom-learning/stitches-react/types/theme").Token<"red100", string, "colors", "">;
+        red200: import("@atom-learning/stitches-react/types/theme").Token<"red200", string, "colors", "">;
+        red300: import("@atom-learning/stitches-react/types/theme").Token<"red300", string, "colors", "">;
+        red400: import("@atom-learning/stitches-react/types/theme").Token<"red400", string, "colors", "">;
+        red500: import("@atom-learning/stitches-react/types/theme").Token<"red500", string, "colors", "">;
+        red600: import("@atom-learning/stitches-react/types/theme").Token<"red600", string, "colors", "">;
+        red700: import("@atom-learning/stitches-react/types/theme").Token<"red700", string, "colors", "">;
+        red800: import("@atom-learning/stitches-react/types/theme").Token<"red800", string, "colors", "">;
+        red900: import("@atom-learning/stitches-react/types/theme").Token<"red900", string, "colors", "">;
+        red1000: import("@atom-learning/stitches-react/types/theme").Token<"red1000", string, "colors", "">;
+        red1100: import("@atom-learning/stitches-react/types/theme").Token<"red1100", string, "colors", "">;
+        red1200: import("@atom-learning/stitches-react/types/theme").Token<"red1200", string, "colors", "">;
+        teal100: import("@atom-learning/stitches-react/types/theme").Token<"teal100", string, "colors", "">;
+        teal200: import("@atom-learning/stitches-react/types/theme").Token<"teal200", string, "colors", "">;
+        teal300: import("@atom-learning/stitches-react/types/theme").Token<"teal300", string, "colors", "">;
+        teal400: import("@atom-learning/stitches-react/types/theme").Token<"teal400", string, "colors", "">;
+        teal500: import("@atom-learning/stitches-react/types/theme").Token<"teal500", string, "colors", "">;
+        teal600: import("@atom-learning/stitches-react/types/theme").Token<"teal600", string, "colors", "">;
+        teal700: import("@atom-learning/stitches-react/types/theme").Token<"teal700", string, "colors", "">;
+        teal800: import("@atom-learning/stitches-react/types/theme").Token<"teal800", string, "colors", "">;
+        teal900: import("@atom-learning/stitches-react/types/theme").Token<"teal900", string, "colors", "">;
+        teal1000: import("@atom-learning/stitches-react/types/theme").Token<"teal1000", string, "colors", "">;
+        teal1100: import("@atom-learning/stitches-react/types/theme").Token<"teal1100", string, "colors", "">;
+        teal1200: import("@atom-learning/stitches-react/types/theme").Token<"teal1200", string, "colors", "">;
+        orange100: import("@atom-learning/stitches-react/types/theme").Token<"orange100", string, "colors", "">;
+        orange200: import("@atom-learning/stitches-react/types/theme").Token<"orange200", string, "colors", "">;
+        orange300: import("@atom-learning/stitches-react/types/theme").Token<"orange300", string, "colors", "">;
+        orange400: import("@atom-learning/stitches-react/types/theme").Token<"orange400", string, "colors", "">;
+        orange500: import("@atom-learning/stitches-react/types/theme").Token<"orange500", string, "colors", "">;
+        orange600: import("@atom-learning/stitches-react/types/theme").Token<"orange600", string, "colors", "">;
+        orange700: import("@atom-learning/stitches-react/types/theme").Token<"orange700", string, "colors", "">;
+        orange800: import("@atom-learning/stitches-react/types/theme").Token<"orange800", string, "colors", "">;
+        orange900: import("@atom-learning/stitches-react/types/theme").Token<"orange900", string, "colors", "">;
+        orange1000: import("@atom-learning/stitches-react/types/theme").Token<"orange1000", string, "colors", "">;
+        orange1100: import("@atom-learning/stitches-react/types/theme").Token<"orange1100", string, "colors", "">;
+        orange1200: import("@atom-learning/stitches-react/types/theme").Token<"orange1200", string, "colors", "">;
+        yellow100: import("@atom-learning/stitches-react/types/theme").Token<"yellow100", string, "colors", "">;
+        yellow200: import("@atom-learning/stitches-react/types/theme").Token<"yellow200", string, "colors", "">;
+        yellow300: import("@atom-learning/stitches-react/types/theme").Token<"yellow300", string, "colors", "">;
+        yellow400: import("@atom-learning/stitches-react/types/theme").Token<"yellow400", string, "colors", "">;
+        yellow500: import("@atom-learning/stitches-react/types/theme").Token<"yellow500", string, "colors", "">;
+        yellow600: import("@atom-learning/stitches-react/types/theme").Token<"yellow600", string, "colors", "">;
+        yellow700: import("@atom-learning/stitches-react/types/theme").Token<"yellow700", string, "colors", "">;
+        yellow800: import("@atom-learning/stitches-react/types/theme").Token<"yellow800", string, "colors", "">;
+        yellow900: import("@atom-learning/stitches-react/types/theme").Token<"yellow900", string, "colors", "">;
+        yellow1000: import("@atom-learning/stitches-react/types/theme").Token<"yellow1000", string, "colors", "">;
+        yellow1100: import("@atom-learning/stitches-react/types/theme").Token<"yellow1100", string, "colors", "">;
+        yellow1200: import("@atom-learning/stitches-react/types/theme").Token<"yellow1200", string, "colors", "">;
+        lime100: import("@atom-learning/stitches-react/types/theme").Token<"lime100", string, "colors", "">;
+        lime200: import("@atom-learning/stitches-react/types/theme").Token<"lime200", string, "colors", "">;
+        lime300: import("@atom-learning/stitches-react/types/theme").Token<"lime300", string, "colors", "">;
+        lime400: import("@atom-learning/stitches-react/types/theme").Token<"lime400", string, "colors", "">;
+        lime500: import("@atom-learning/stitches-react/types/theme").Token<"lime500", string, "colors", "">;
+        lime600: import("@atom-learning/stitches-react/types/theme").Token<"lime600", string, "colors", "">;
+        lime700: import("@atom-learning/stitches-react/types/theme").Token<"lime700", string, "colors", "">;
+        lime800: import("@atom-learning/stitches-react/types/theme").Token<"lime800", string, "colors", "">;
+        lime900: import("@atom-learning/stitches-react/types/theme").Token<"lime900", string, "colors", "">;
+        lime1000: import("@atom-learning/stitches-react/types/theme").Token<"lime1000", string, "colors", "">;
+        lime1100: import("@atom-learning/stitches-react/types/theme").Token<"lime1100", string, "colors", "">;
+        lime1200: import("@atom-learning/stitches-react/types/theme").Token<"lime1200", string, "colors", "">;
+        lapis100: import("@atom-learning/stitches-react/types/theme").Token<"lapis100", string, "colors", "">;
+        lapis200: import("@atom-learning/stitches-react/types/theme").Token<"lapis200", string, "colors", "">;
+        lapis300: import("@atom-learning/stitches-react/types/theme").Token<"lapis300", string, "colors", "">;
+        lapis400: import("@atom-learning/stitches-react/types/theme").Token<"lapis400", string, "colors", "">;
+        lapis500: import("@atom-learning/stitches-react/types/theme").Token<"lapis500", string, "colors", "">;
+        lapis600: import("@atom-learning/stitches-react/types/theme").Token<"lapis600", string, "colors", "">;
+        lapis700: import("@atom-learning/stitches-react/types/theme").Token<"lapis700", string, "colors", "">;
+        lapis800: import("@atom-learning/stitches-react/types/theme").Token<"lapis800", string, "colors", "">;
+        lapis900: import("@atom-learning/stitches-react/types/theme").Token<"lapis900", string, "colors", "">;
+        lapis1000: import("@atom-learning/stitches-react/types/theme").Token<"lapis1000", string, "colors", "">;
+        lapis1100: import("@atom-learning/stitches-react/types/theme").Token<"lapis1100", string, "colors", "">;
+        lapis1200: import("@atom-learning/stitches-react/types/theme").Token<"lapis1200", string, "colors", "">;
+        maroon100: import("@atom-learning/stitches-react/types/theme").Token<"maroon100", string, "colors", "">;
+        maroon200: import("@atom-learning/stitches-react/types/theme").Token<"maroon200", string, "colors", "">;
+        maroon300: import("@atom-learning/stitches-react/types/theme").Token<"maroon300", string, "colors", "">;
+        maroon400: import("@atom-learning/stitches-react/types/theme").Token<"maroon400", string, "colors", "">;
+        maroon500: import("@atom-learning/stitches-react/types/theme").Token<"maroon500", string, "colors", "">;
+        maroon600: import("@atom-learning/stitches-react/types/theme").Token<"maroon600", string, "colors", "">;
+        maroon700: import("@atom-learning/stitches-react/types/theme").Token<"maroon700", string, "colors", "">;
+        maroon800: import("@atom-learning/stitches-react/types/theme").Token<"maroon800", string, "colors", "">;
+        maroon900: import("@atom-learning/stitches-react/types/theme").Token<"maroon900", string, "colors", "">;
+        maroon1000: import("@atom-learning/stitches-react/types/theme").Token<"maroon1000", string, "colors", "">;
+        maroon1100: import("@atom-learning/stitches-react/types/theme").Token<"maroon1100", string, "colors", "">;
+        maroon1200: import("@atom-learning/stitches-react/types/theme").Token<"maroon1200", string, "colors", "">;
+        marsh100: import("@atom-learning/stitches-react/types/theme").Token<"marsh100", string, "colors", "">;
+        marsh200: import("@atom-learning/stitches-react/types/theme").Token<"marsh200", string, "colors", "">;
+        marsh300: import("@atom-learning/stitches-react/types/theme").Token<"marsh300", string, "colors", "">;
+        marsh400: import("@atom-learning/stitches-react/types/theme").Token<"marsh400", string, "colors", "">;
+        marsh500: import("@atom-learning/stitches-react/types/theme").Token<"marsh500", string, "colors", "">;
+        marsh600: import("@atom-learning/stitches-react/types/theme").Token<"marsh600", string, "colors", "">;
+        marsh700: import("@atom-learning/stitches-react/types/theme").Token<"marsh700", string, "colors", "">;
+        marsh800: import("@atom-learning/stitches-react/types/theme").Token<"marsh800", string, "colors", "">;
+        marsh900: import("@atom-learning/stitches-react/types/theme").Token<"marsh900", string, "colors", "">;
+        marsh1000: import("@atom-learning/stitches-react/types/theme").Token<"marsh1000", string, "colors", "">;
+        marsh1100: import("@atom-learning/stitches-react/types/theme").Token<"marsh1100", string, "colors", "">;
+        marsh1200: import("@atom-learning/stitches-react/types/theme").Token<"marsh1200", string, "colors", "">;
+        tonal50: import("@atom-learning/stitches-react/types/theme").Token<"tonal50", string, "colors", "">;
+        tonal100: import("@atom-learning/stitches-react/types/theme").Token<"tonal100", string, "colors", "">;
+        tonal200: import("@atom-learning/stitches-react/types/theme").Token<"tonal200", string, "colors", "">;
+        tonal300: import("@atom-learning/stitches-react/types/theme").Token<"tonal300", string, "colors", "">;
+        tonal400: import("@atom-learning/stitches-react/types/theme").Token<"tonal400", string, "colors", "">;
+        tonal500: import("@atom-learning/stitches-react/types/theme").Token<"tonal500", string, "colors", "">;
+        tonal600: import("@atom-learning/stitches-react/types/theme").Token<"tonal600", string, "colors", "">;
+        alpha100: import("@atom-learning/stitches-react/types/theme").Token<"alpha100", string, "colors", "">;
+        alpha150: import("@atom-learning/stitches-react/types/theme").Token<"alpha150", string, "colors", "">;
+        alpha200: import("@atom-learning/stitches-react/types/theme").Token<"alpha200", string, "colors", "">;
+        alpha250: import("@atom-learning/stitches-react/types/theme").Token<"alpha250", string, "colors", "">;
+        alpha600: import("@atom-learning/stitches-react/types/theme").Token<"alpha600", string, "colors", "">;
+        brandRed: import("@atom-learning/stitches-react/types/theme").Token<"brandRed", string, "colors", "">;
+        brandRedAccent: import("@atom-learning/stitches-react/types/theme").Token<"brandRedAccent", string, "colors", "">;
+        brandGreen: import("@atom-learning/stitches-react/types/theme").Token<"brandGreen", string, "colors", "">;
+        brandGreenAccent: import("@atom-learning/stitches-react/types/theme").Token<"brandGreenAccent", string, "colors", "">;
+        brandPurple: import("@atom-learning/stitches-react/types/theme").Token<"brandPurple", string, "colors", "">;
+        brandPurpleAccent: import("@atom-learning/stitches-react/types/theme").Token<"brandPurpleAccent", string, "colors", "">;
+        brandYellow: import("@atom-learning/stitches-react/types/theme").Token<"brandYellow", string, "colors", "">;
+        brandYellowAccent: import("@atom-learning/stitches-react/types/theme").Token<"brandYellowAccent", string, "colors", "">;
+        infoLight: import("@atom-learning/stitches-react/types/theme").Token<"infoLight", string, "colors", "">;
+        info: import("@atom-learning/stitches-react/types/theme").Token<"info", string, "colors", "">;
+        infoMid: import("@atom-learning/stitches-react/types/theme").Token<"infoMid", string, "colors", "">;
+        infoDark: import("@atom-learning/stitches-react/types/theme").Token<"infoDark", string, "colors", "">;
+        successLight: import("@atom-learning/stitches-react/types/theme").Token<"successLight", string, "colors", "">;
+        success: import("@atom-learning/stitches-react/types/theme").Token<"success", string, "colors", "">;
+        successMid: import("@atom-learning/stitches-react/types/theme").Token<"successMid", string, "colors", "">;
+        successDark: import("@atom-learning/stitches-react/types/theme").Token<"successDark", string, "colors", "">;
+        dangerLight: import("@atom-learning/stitches-react/types/theme").Token<"dangerLight", string, "colors", "">;
+        danger: import("@atom-learning/stitches-react/types/theme").Token<"danger", string, "colors", "">;
+        dangerMid: import("@atom-learning/stitches-react/types/theme").Token<"dangerMid", string, "colors", "">;
+        dangerDark: import("@atom-learning/stitches-react/types/theme").Token<"dangerDark", string, "colors", "">;
+        warningLight: import("@atom-learning/stitches-react/types/theme").Token<"warningLight", string, "colors", "">;
+        warning: import("@atom-learning/stitches-react/types/theme").Token<"warning", string, "colors", "">;
+        warningMid: import("@atom-learning/stitches-react/types/theme").Token<"warningMid", string, "colors", "">;
+        warningDark: import("@atom-learning/stitches-react/types/theme").Token<"warningDark", string, "colors", "">;
+        warningText: import("@atom-learning/stitches-react/types/theme").Token<"warningText", string, "colors", "">;
+        subjectEnglish: import("@atom-learning/stitches-react/types/theme").Token<"subjectEnglish", string, "colors", "">;
+        subjectMaths: import("@atom-learning/stitches-react/types/theme").Token<"subjectMaths", string, "colors", "">;
+        subjectScience: import("@atom-learning/stitches-react/types/theme").Token<"subjectScience", string, "colors", "">;
+        subjectVerbalReasoning: import("@atom-learning/stitches-react/types/theme").Token<"subjectVerbalReasoning", string, "colors", "">;
+        subjectNonVerbalReasoning: import("@atom-learning/stitches-react/types/theme").Token<"subjectNonVerbalReasoning", string, "colors", "">;
+        subjectCreativeWriting: import("@atom-learning/stitches-react/types/theme").Token<"subjectCreativeWriting", string, "colors", "">;
+        subjectExamSkills: import("@atom-learning/stitches-react/types/theme").Token<"subjectExamSkills", string, "colors", "">;
+        glBlueLight: import("@atom-learning/stitches-react/types/theme").Token<"glBlueLight", string, "colors", "">;
+        glBluePrimary: import("@atom-learning/stitches-react/types/theme").Token<"glBluePrimary", string, "colors", "">;
+        glBlueDark: import("@atom-learning/stitches-react/types/theme").Token<"glBlueDark", string, "colors", "">;
+        primary100: import("@atom-learning/stitches-react/types/theme").Token<"primary100", string, "colors", "">;
+        primary200: import("@atom-learning/stitches-react/types/theme").Token<"primary200", string, "colors", "">;
+        primary300: import("@atom-learning/stitches-react/types/theme").Token<"primary300", string, "colors", "">;
+        primary400: import("@atom-learning/stitches-react/types/theme").Token<"primary400", string, "colors", "">;
+        primary500: import("@atom-learning/stitches-react/types/theme").Token<"primary500", string, "colors", "">;
+        primary600: import("@atom-learning/stitches-react/types/theme").Token<"primary600", string, "colors", "">;
+        primary700: import("@atom-learning/stitches-react/types/theme").Token<"primary700", string, "colors", "">;
+        primary800: import("@atom-learning/stitches-react/types/theme").Token<"primary800", string, "colors", "">;
+        primary900: import("@atom-learning/stitches-react/types/theme").Token<"primary900", string, "colors", "">;
+        primary1000: import("@atom-learning/stitches-react/types/theme").Token<"primary1000", string, "colors", "">;
+        primary1100: import("@atom-learning/stitches-react/types/theme").Token<"primary1100", string, "colors", "">;
+        primary1200: import("@atom-learning/stitches-react/types/theme").Token<"primary1200", string, "colors", "">;
+    };
+    space: {
+        0: import("@atom-learning/stitches-react/types/theme").Token<"0", string, "space", "">;
+        1: import("@atom-learning/stitches-react/types/theme").Token<"1", string, "space", "">;
+        2: import("@atom-learning/stitches-react/types/theme").Token<"2", string, "space", "">;
+        3: import("@atom-learning/stitches-react/types/theme").Token<"3", string, "space", "">;
+        4: import("@atom-learning/stitches-react/types/theme").Token<"4", string, "space", "">;
+        5: import("@atom-learning/stitches-react/types/theme").Token<"5", string, "space", "">;
+        6: import("@atom-learning/stitches-react/types/theme").Token<"6", string, "space", "">;
+        7: import("@atom-learning/stitches-react/types/theme").Token<"7", string, "space", "">;
+        8: import("@atom-learning/stitches-react/types/theme").Token<"8", string, "space", "">;
+        9: import("@atom-learning/stitches-react/types/theme").Token<"9", string, "space", "">;
+        24: import("@atom-learning/stitches-react/types/theme").Token<"24", string, "space", "">;
+    };
+    fontSizes: {
+        xs: import("@atom-learning/stitches-react/types/theme").Token<"xs", string, "fontSizes", "">;
+        sm: import("@atom-learning/stitches-react/types/theme").Token<"sm", string, "fontSizes", "">;
+        md: import("@atom-learning/stitches-react/types/theme").Token<"md", string, "fontSizes", "">;
+        lg: import("@atom-learning/stitches-react/types/theme").Token<"lg", string, "fontSizes", "">;
+        xl: import("@atom-learning/stitches-react/types/theme").Token<"xl", string, "fontSizes", "">;
+        "2xl": import("@atom-learning/stitches-react/types/theme").Token<"2xl", string, "fontSizes", "">;
+        "3xl": import("@atom-learning/stitches-react/types/theme").Token<"3xl", string, "fontSizes", "">;
+        "4xl": import("@atom-learning/stitches-react/types/theme").Token<"4xl", string, "fontSizes", "">;
+    };
+    fonts: {
+        sans: import("@atom-learning/stitches-react/types/theme").Token<"sans", string, "fonts", "">;
+        mono: import("@atom-learning/stitches-react/types/theme").Token<"mono", string, "fonts", "">;
+        display: import("@atom-learning/stitches-react/types/theme").Token<"display", string, "fonts", "">;
+        body: import("@atom-learning/stitches-react/types/theme").Token<"body", string, "fonts", "">;
+    };
+    sizes: {
+        0: import("@atom-learning/stitches-react/types/theme").Token<"0", string, "sizes", "">;
+        1: import("@atom-learning/stitches-react/types/theme").Token<"1", string, "sizes", "">;
+        2: import("@atom-learning/stitches-react/types/theme").Token<"2", string, "sizes", "">;
+        3: import("@atom-learning/stitches-react/types/theme").Token<"3", string, "sizes", "">;
+        4: import("@atom-learning/stitches-react/types/theme").Token<"4", string, "sizes", "">;
+        5: import("@atom-learning/stitches-react/types/theme").Token<"5", string, "sizes", "">;
+        6: import("@atom-learning/stitches-react/types/theme").Token<"6", string, "sizes", "">;
+        7: import("@atom-learning/stitches-react/types/theme").Token<"7", string, "sizes", "">;
+        8: import("@atom-learning/stitches-react/types/theme").Token<"8", string, "sizes", "">;
+    };
+    radii: {
+        0: import("@atom-learning/stitches-react/types/theme").Token<"0", string, "radii", "">;
+        1: import("@atom-learning/stitches-react/types/theme").Token<"1", string, "radii", "">;
+        2: import("@atom-learning/stitches-react/types/theme").Token<"2", string, "radii", "">;
+        3: import("@atom-learning/stitches-react/types/theme").Token<"3", string, "radii", "">;
+        round: import("@atom-learning/stitches-react/types/theme").Token<"round", string, "radii", "">;
+    };
+    shadows: {
+        0: import("@atom-learning/stitches-react/types/theme").Token<"0", string, "shadows", "">;
+        1: import("@atom-learning/stitches-react/types/theme").Token<"1", string, "shadows", "">;
+        2: import("@atom-learning/stitches-react/types/theme").Token<"2", string, "shadows", "">;
+        3: import("@atom-learning/stitches-react/types/theme").Token<"3", string, "shadows", "">;
+    };
+    ratios: {
+        "16-9": import("@atom-learning/stitches-react/types/theme").Token<"16-9", string, "ratios", "">;
+        "3-2": import("@atom-learning/stitches-react/types/theme").Token<"3-2", string, "ratios", "">;
+        "4-3": import("@atom-learning/stitches-react/types/theme").Token<"4-3", string, "ratios", "">;
+        "1-1": import("@atom-learning/stitches-react/types/theme").Token<"1-1", string, "ratios", "">;
+        "3-4": import("@atom-learning/stitches-react/types/theme").Token<"3-4", string, "ratios", "">;
+    };
+})[ThemeProperty], CSS>;

package/dist/utilities/create-theme-variants/createThemeVariants.js

@@ -0,0 +1,2 @@
+import{theme as c}from"../../stitches.js";const s=(e,t)=>Object.keys(c[e]).reduce((a,r)=>({...a,[r]:JSON.parse(JSON.stringify(t).replace(/\$key/g,`$${e}$${r}`))}),{});export{s as createThemeVariants};
+//# sourceMappingURL=createThemeVariants.js.map

package/dist/utilities/create-theme-variants/createThemeVariants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createThemeVariants.js","sources":["../../../src/utilities/create-theme-variants/createThemeVariants.ts"],"sourcesContent":["import { Theme } from '@atom-learning/theme/lib/theme-atom'\n\nimport { CSS, theme } from '../../stitches'\n\n/**\n * Generates a Stitches variants object based on keys in our theme.\n * You can use the string `$key` in your CSS object, which will be replaced\n * with the token from our theme.\n *\n *\n * @example\n * ```ts\n * createThemeVariants('space', { p: '$key' })\n *\n * // Result:\n * // {\n * //   0: { p: '$space$0' },\n * //   1: { p: '$space$1' },\n * //   2: { p: '$space$2' },\n * //   ...etc\n * // }\n * ```\n */\nexport const createThemeVariants = <ThemeProperty extends keyof Theme>(\n  themeProperty: ThemeProperty,\n  styles: CSS\n): Record<keyof typeof theme[ThemeProperty], CSS> =>\n  Object.keys(theme[themeProperty]).reduce(\n    (acc, key) => ({\n      ...acc,\n      [key]: JSON.parse(\n        JSON.stringify(styles).replace(/\\$key/g, `$${themeProperty}$${key}`)\n      )\n    }),\n    {}\n  ) as Record<keyof typeof theme[ThemeProperty], CSS>\n"],"names":["createThemeVariants","themeProperty","styles","theme","acc","key"],"mappings":"0CAuBa,MAAAA,EAAsB,CACjCC,EACAC,IAEA,OAAO,KAAKC,EAAMF,EAAc,EAAE,OAChC,CAACG,EAAKC,KAAS,CACb,GAAGD,EACH,CAACC,GAAM,KAAK,MACV,KAAK,UAAUH,CAAM,EAAE,QAAQ,SAAU,IAAID,KAAiBI,GAAK,CACrE,CACF,GACA,CACF,CAAA"}

package/dist/utilities/create-theme-variants/index.d.ts

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

package/dist/utilities/css-wrapper/CSSWrapper.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { CSS } from '../../stitches';
+declare type CssWrapperProps = {
+    css?: CSS;
+    children: React.ReactNode;
+};
+export declare const CSSWrapper: {
+    ({ css, children }: CssWrapperProps): React.ReactElement;
+    displayName: string;
+};
+export {};

package/dist/utilities/css-wrapper/CSSWrapper.js

@@ -0,0 +1,2 @@
+import*as e from"react";import{Box as m}from"../../components/box/Box.js";const a=({css:r,children:t})=>r?e.createElement(m,{css:r},t):e.createElement(e.Fragment,null,t);a.displayName="CSSWrapper";export{a as CSSWrapper};
+//# sourceMappingURL=CSSWrapper.js.map

package/dist/utilities/css-wrapper/CSSWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSSWrapper.js","sources":["../../../src/utilities/css-wrapper/CSSWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport type { CSS } from '~/stitches'\n\ntype CssWrapperProps = {\n  css?: CSS\n  children: React.ReactNode\n}\n\nexport const CSSWrapper = ({\n  css,\n  children\n}: CssWrapperProps): React.ReactElement =>\n  css ? (\n    <Box css={css}>{children}</Box>\n  ) : (\n    // children could be multiple elements/components,\n    // so we need a fragment here.\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    <>{children}</>\n  )\n\nCSSWrapper.displayName = 'CSSWrapper'\n"],"names":["CSSWrapper","css","children","React","Box"],"mappings":"0EAUa,MAAAA,EAAa,CAAC,CACzB,IAAAC,EACA,SAAAC,CACF,IACED,EACEE,EAAA,cAACC,EAAA,CAAI,IAAKH,GAAMC,CAAS,EAKzBC,EAAA,cAAAA,EAAA,SAAA,KAAGD,CAAS,EAGhBF,EAAW,YAAc"}

package/dist/utilities/css-wrapper/index.d.ts

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

package/dist/utilities/event/index.d.ts

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

package/dist/utilities/event/preventEvent.d.ts

@@ -0,0 +1 @@
+export declare const preventEvent: (event: React.PointerEvent | Event | React.SyntheticEvent) => void;

package/dist/utilities/event/preventEvent.js

@@ -0,0 +1,2 @@
+const t=e=>{e.preventDefault()};export{t as preventEvent};
+//# sourceMappingURL=preventEvent.js.map

package/dist/utilities/event/preventEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preventEvent.js","sources":["../../../src/utilities/event/preventEvent.ts"],"sourcesContent":["/*\nUsed to block default radix hover to open menu behaviour\nProps: https://github.com/radix-ui/primitives/issues/1630\n*/\nexport const preventEvent = (\n  event: React.PointerEvent | Event | React.SyntheticEvent\n): void => {\n  const e = event as Event\n  e.preventDefault()\n}\n"],"names":["preventEvent","event"],"mappings":"AAIO,MAAMA,EACXC,GACS,CACCA,EACR,eACJ,CAAA"}

package/dist/utilities/hooks/useCallbackRef.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export declare const useCallbackRef: () => [
+    React.MutableRefObject<HTMLElement | null>,
+    (HTMLElement: any) => void
+];
+export declare const useCallbackRefState: () => [
+    HTMLElement | null,
+    (HTMLElement: any) => void
+];

package/dist/utilities/hooks/useCallbackRef.js

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=useCallbackRef.js.map

package/dist/utilities/hooks/useCallbackRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCallbackRef.js","sources":["../../../src/utilities/hooks/useCallbackRef.ts"],"sourcesContent":["import * as React from 'react'\n\nexport const useCallbackRef: () => [\n  React.MutableRefObject<HTMLElement | null>,\n  (HTMLElement) => void\n] = () => {\n  const elRef = React.useRef<HTMLElement | null>(null)\n\n  const setElRefCallback = React.useCallback((el) => {\n    if (el) elRef.current = el\n  }, [])\n\n  return [elRef, setElRefCallback]\n}\n\nexport const useCallbackRefState: () => [\n  HTMLElement | null,\n  (HTMLElement) => void\n] = () => {\n  const [elRef, setElRef] = React.useState<HTMLElement | null>(null)\n\n  const setElRefCallback = React.useCallback((el) => {\n    if (el) setElRef(el)\n  }, [])\n\n  return [elRef, setElRefCallback]\n}\n"],"names":["useCallbackRef","elRef","React","setElRefCallback","el","useCallbackRefState","setElRef"],"mappings":"wBAEa,MAAAA,EAGT,IAAM,CACR,MAAMC,EAAQC,EAAM,OAA2B,IAAI,EAE7CC,EAAmBD,EAAM,YAAaE,GAAO,CAC7CA,IAAIH,EAAM,QAAUG,EAC1B,EAAG,CAAA,CAAE,EAEL,MAAO,CAACH,EAAOE,CAAgB,CACjC,EAEaE,EAGT,IAAM,CACR,KAAM,CAACJ,EAAOK,CAAQ,EAAIJ,EAAM,SAA6B,IAAI,EAE3DC,EAAmBD,EAAM,YAAaE,GAAO,CAC7CA,GAAIE,EAASF,CAAE,CACrB,EAAG,CAAA,CAAE,EAEL,MAAO,CAACH,EAAOE,CAAgB,CACjC"}

package/dist/utilities/hooks/useIsMountedRef.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useIsMountedRef: () => import("react").MutableRefObject<boolean | undefined>;

package/dist/utilities/hooks/useIsMountedRef.js

@@ -0,0 +1,2 @@
+import{useRef as r,useEffect as t}from"react";const u=()=>{const e=r();return t(()=>(e.current=!0,()=>{e.current=!1})),e};export{u as useIsMountedRef};
+//# sourceMappingURL=useIsMountedRef.js.map

package/dist/utilities/hooks/useIsMountedRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMountedRef.js","sources":["../../../src/utilities/hooks/useIsMountedRef.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport const useIsMountedRef = () => {\n  const isMountedRef = useRef<boolean>()\n\n  useEffect(() => {\n    isMountedRef.current = true\n    return () => {\n      isMountedRef.current = false\n    }\n  })\n\n  return isMountedRef\n}\n"],"names":["useIsMountedRef","isMountedRef","useRef","useEffect"],"mappings":"8CAEa,MAAAA,EAAkB,IAAM,CACnC,MAAMC,EAAeC,EAAgB,EAErC,OAAAC,EAAU,KACRF,EAAa,QAAU,GAChB,IAAM,CACXA,EAAa,QAAU,EACzB,EACD,EAEMA,CACT"}

package/dist/utilities/hooks/useResizeObserver.d.ts

@@ -0,0 +1,8 @@
+declare type TUseResizeObserverOptions = {
+    elements: (HTMLElement | undefined | null)[];
+    onResize: (entries: ResizeObserverEntry[]) => void;
+    delay?: number;
+};
+declare type TUseResizeObserverOutput = ResizeObserver | null;
+export declare const useResizeObserver: ({ delay, elements, onResize }: TUseResizeObserverOptions) => TUseResizeObserverOutput;
+export {};

package/dist/utilities/hooks/useResizeObserver.js

@@ -0,0 +1,2 @@
+import*as t from"react";import{debounce as u}from"throttle-debounce";const c=o=>{try{return new ResizeObserver(o)}catch{return null}},l=({delay:o=500,elements:n,onResize:s})=>{const e=t.useMemo(()=>c(u(o,s)),[o,s]);return t.useEffect(()=>(n.forEach(r=>{r&&(e==null||e.observe(r))}),()=>{n.forEach(r=>r&&(e==null?void 0:e.unobserve(r)))}),[e,n]),e};export{l as useResizeObserver};
+//# sourceMappingURL=useResizeObserver.js.map

package/dist/utilities/hooks/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.js","sources":["../../../src/utilities/hooks/useResizeObserver.ts"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\ntype TUseResizeObserverOptions = {\n  elements: (HTMLElement | undefined | null)[]\n  onResize: (entries: ResizeObserverEntry[]) => void\n  delay?: number\n}\n\ntype TUseResizeObserverOutput = ResizeObserver | null\n\nconst createResizeObserver = (\n  callback: (entries: ResizeObserverEntry[]) => void\n) => {\n  try {\n    return new ResizeObserver(callback)\n  } catch {\n    return null\n  }\n}\n\nexport const useResizeObserver = ({\n  delay = 500,\n  elements,\n  onResize\n}: TUseResizeObserverOptions): TUseResizeObserverOutput => {\n  const observer = React.useMemo(\n    () => createResizeObserver(debounce(delay, onResize)),\n    [delay, onResize]\n  )\n\n  React.useEffect(() => {\n    elements.forEach((element) => {\n      if (element) {\n        observer?.observe(element)\n      }\n    })\n\n    return () => {\n      elements.forEach((element) => element && observer?.unobserve(element))\n    }\n  }, [observer, elements])\n\n  return observer\n}\n"],"names":["createResizeObserver","callback","useResizeObserver","delay","elements","onResize","observer","React","debounce","element"],"mappings":"qEAWA,MAAMA,EACJC,GACG,CACH,GAAI,CACF,OAAO,IAAI,eAAeA,CAAQ,CACpC,OACE,OAAO,IACT,CACF,EAEaC,EAAoB,CAAC,CAChC,MAAAC,EAAQ,IACR,SAAAC,EACA,SAAAC,CACF,IAA2D,CACzD,MAAMC,EAAWC,EAAM,QACrB,IAAMP,EAAqBQ,EAASL,EAAOE,CAAQ,CAAC,EACpD,CAACF,EAAOE,CAAQ,CAClB,EAEA,OAAAE,EAAM,UAAU,KACdH,EAAS,QAASK,GAAY,CACxBA,IACFH,GAAA,MAAAA,EAAU,QAAQG,CAEtB,EAAA,CAAC,EAEM,IAAM,CACXL,EAAS,QAASK,GAAYA,IAAWH,GAAA,KAAA,OAAAA,EAAU,UAAUG,CAAAA,EAAQ,CACvE,GACC,CAACH,EAAUF,CAAQ,CAAC,EAEhBE,CACT"}

package/dist/utilities/hooks/useScrollPosition.d.ts

@@ -0,0 +1,11 @@
+declare type TUseScrollPositionOptions = {
+    element?: HTMLElement | null;
+    delay?: number;
+    delayMethod?: 'throttle' | 'debounce';
+};
+declare type TUseScrollPositionOutput = {
+    left: number;
+    top: number;
+};
+export declare const useScrollPosition: ({ element, delay, delayMethod }: TUseScrollPositionOptions) => TUseScrollPositionOutput;
+export {};

package/dist/utilities/hooks/useScrollPosition.js

@@ -0,0 +1,2 @@
+import{useState as c,useMemo as u,useEffect as f}from"react";import{debounce as d,throttle as i}from"throttle-debounce";const m=({element:e,delay:t=500,delayMethod:r="throttle"})=>{const[n,s]=c({left:0,top:0}),o=u(()=>r==="debounce"?d:i,[r]);return f(()=>{if(!e)return;const l=o(t,()=>{s({left:e.scrollLeft,top:e.scrollTop})});return e.addEventListener("scroll",l),()=>{e.removeEventListener("scroll",l)}},[e,o,t]),n};export{m as useScrollPosition};
+//# sourceMappingURL=useScrollPosition.js.map

package/dist/utilities/hooks/useScrollPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollPosition.js","sources":["../../../src/utilities/hooks/useScrollPosition.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { debounce, throttle } from 'throttle-debounce'\n\ntype TUseScrollPositionOptions = {\n  element?: HTMLElement | null\n  delay?: number\n  delayMethod?: 'throttle' | 'debounce'\n}\n\ntype TUseScrollPositionOutput = {\n  left: number\n  top: number\n}\n\nexport const useScrollPosition = ({\n  element,\n  delay = 500,\n  delayMethod = 'throttle'\n}: TUseScrollPositionOptions): TUseScrollPositionOutput => {\n  const [scrollPosition, setScrollPosition] = useState({ left: 0, top: 0 })\n\n  const delayMethodFn = useMemo(\n    () => (delayMethod === 'debounce' ? debounce : throttle),\n    [delayMethod]\n  )\n\n  useEffect(() => {\n    if (!element) return\n\n    const handleScroll = delayMethodFn(delay, () => {\n      setScrollPosition({ left: element.scrollLeft, top: element.scrollTop })\n    })\n\n    element.addEventListener('scroll', handleScroll)\n\n    return () => {\n      element.removeEventListener('scroll', handleScroll)\n    }\n  }, [element, delayMethodFn, delay])\n\n  return scrollPosition\n}\n"],"names":["useScrollPosition","element","delay","delayMethod","scrollPosition","setScrollPosition","useState","delayMethodFn","useMemo","debounce","throttle","useEffect","handleScroll"],"mappings":"8HAcaA,EAAoB,CAAC,CAChC,QAAAC,EACA,MAAAC,EAAQ,IACR,YAAAC,EAAc,UAChB,IAA2D,CACzD,KAAM,CAACC,EAAgBC,CAAiB,EAAIC,EAAS,CAAE,KAAM,EAAG,IAAK,CAAE,CAAC,EAElEC,EAAgBC,EACpB,IAAOL,IAAgB,WAAaM,EAAWC,EAC/C,CAACP,CAAW,CACd,EAEA,OAAAQ,EAAU,IAAM,CACd,GAAI,CAACV,EAAS,OAEd,MAAMW,EAAeL,EAAcL,EAAO,IAAM,CAC9CG,EAAkB,CAAE,KAAMJ,EAAQ,WAAY,IAAKA,EAAQ,SAAU,CAAC,CACxE,CAAC,EAED,OAAAA,EAAQ,iBAAiB,SAAUW,CAAY,EAExC,IAAM,CACXX,EAAQ,oBAAoB,SAAUW,CAAY,CACpD,CACF,EAAG,CAACX,EAASM,EAAeL,CAAK,CAAC,EAE3BE,CACT"}