@alto-avios/alto-ui 3.4.0 → 3.4.1

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

@@ -6,17 +6,29 @@ declare const imageVariants: (props?: ({
     fit?: "none" | "fill" | "contain" | "cover" | "scale-down" | "scaleDown" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'className' | 'style'>, Pick<BorderVariants, 'borderRadius'>, BackgroundVariants, VariantProps<typeof imageVariants> {
-    /** Image url that will be used as a fallback in case `src` prop is not set or image cannot be loaded */
+    /**
+     * Image url that will be used as a fallback in case `src` prop is not set or image cannot be loaded
+     */
     fallbackSrc?: string;
-    /** Called when image fails to load */
+    /**
+     * Called when image fails to load
+     */
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
-    /** Called when image is loaded */
+    /**
+     * Called when image is loaded
+     */
     onLoad?: React.ReactEventHandler<HTMLImageElement>;
-    /** Polymorphism with children, the component will render the children instead of the image */
+    /**
+     * Polymorphism with children, the component will render the children instead of the image
+     */
     asChild?: boolean;
-    /** To support polymorphism with children */
+    /**
+     * To support polymorphism with children
+     */
     children?: React.ReactNode;
-    /** Aspect ratio of the image */
+    /**
+     * Aspect ratio of the image
+     */
     aspectRatio?: number;
     backgroundColour?: BackgroundVariants['backgroundColor'];
 }

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

@@ -1 +1,2 @@
 export { default } from './Image';
+export type { ImageProps } from './Image';

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

@@ -1 +1,2 @@
 export { default } from './Label';
+export type { LabelProps } from './Label';

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

@@ -1 +1,2 @@
 export { default } from './Link';
+export type { LinkProps } from './Link';

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

@@ -1,2 +1,2 @@
-export type { ListBoxItemProps } from './ListBoxItem';
 export { default } from './ListBoxItem';
+export type { ListBoxItemProps } from './ListBoxItem';

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

@@ -1 +1,2 @@
 export { default } from './LoadingSpinner';
+export type { LoadingSpinnerProps } from './LoadingSpinner';

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

@@ -1 +1,2 @@
 export { default } from './Menu';
+export type { MenuProps } from './Menu';

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

@@ -1 +1,2 @@
 export { default } from './NumberField';
+export type { NumberFieldProps } from './NumberField';

package/dist/components/Paragraph/Paragraph.d.ts

@@ -1,13 +1,14 @@
 import { default as React } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor';
+import { WithResponsive } from '../../utils/breakpoint/responsive';
 declare const paragraph: (props?: ({
     size?: "lg" | "sm" | "xs" | "md" | null | undefined;
     textAlign?: "center" | "end" | "start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ParagraphVariants = VariantProps<typeof paragraph>;
 type ParagraphSize = 'xs' | 'sm' | 'md' | 'lg';
-export interface ParagraphProps extends ParagraphVariants {
+interface BaseProps extends ParagraphVariants {
     children: React.ReactNode;
     /**
      * The size of the paragraph
@@ -30,5 +31,7 @@ export interface ParagraphProps extends ParagraphVariants {
      */
     textAlign?: 'start' | 'center' | 'end';
 }
+type ResponsiveKeys = 'size' | 'textAlign';
+export type ParagraphProps = WithResponsive<BaseProps, ResponsiveKeys>;
 export declare const Paragraph: ({ children, size, foregroundColor, fgColor, textAlign, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
 export default Paragraph;

package/dist/components/Paragraph/Paragraph.js

@@ -1,6 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
+import { resolveResponsiveProp } from "../../utils/breakpoint/responsive.js";
+import { useBreakpoint } from "../../utils/breakpoint/hooks/useBreakpoint.js";
 import '../../assets/Paragraph.css';const paragraph$1 = "_paragraph_rcir1_1";
 const xs = "_xs_rcir1_13";
 const sm = "_sm_rcir1_19";
@@ -46,13 +48,16 @@ const Paragraph = ({
   textAlign = "start",
   ...props
 }) => {
+  const breakpoint = useBreakpoint();
+  const finalSize = resolveResponsiveProp(size, breakpoint);
+  const finalTextAlign = resolveResponsiveProp(textAlign, breakpoint);
+  const resolvedFontColor = fgColor ?? foregroundColor ?? "secondary";
   if (fgColor) {
     console.warn("The `fgColor` prop has been deprecated. Please use `foregroundColor` instead.");
   }
-  const resolvedFontColor = fgColor ?? foregroundColor ?? "secondary";
   return /* @__PURE__ */ jsx("p", { className: `${paragraph({
-    size,
-    textAlign
+    size: finalSize,
+    textAlign: finalTextAlign
   })} ${foregroundColorVariants({
     foregroundColor: resolvedFontColor
   })}`, ...props, children });

package/dist/components/Paragraph/Paragraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Paragraph.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1 +1,2 @@
 export { default } from './Paragraph';
+export type { ParagraphProps } from './Paragraph';

package/dist/components/PasswordField/PasswordField.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { FieldProps } from '../_base/Field';
 import { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
-type PasswordStrengthValidation = {
+export type PasswordStrengthValidation = {
     message: string;
     validation: (value?: string) => boolean;
 };

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

@@ -1 +1,2 @@
 export { default } from './PasswordField';
+export type { PasswordFieldProps } from './PasswordField';

package/dist/components/Popover/Popover.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { OverlayTriggerState } from 'react-stately';
 type PlacementType = 'top' | 'top start' | 'top end' | 'right' | 'right top' | 'right bottom' | 'bottom' | 'bottom start' | 'bottom end' | 'left' | 'left top' | 'left bottom';
 type ArrowDirectionType = 'top' | 'right' | 'bottom' | 'left';
-interface InternalPopoverProps {
+export interface InternalPopoverProps {
     /**
      * @private Internal use only - placement of the popover
      * This prop should only be used by internal components like Menu
@@ -43,6 +43,6 @@ export interface PopoverProps {
     /** Whether to show the directional arrow on the popover */
     hasArrow?: boolean;
 }
-type CombinedPopoverProps = PopoverProps & InternalPopoverProps;
+export type CombinedPopoverProps = PopoverProps & InternalPopoverProps;
 export declare const Popover: ({ children, state, arrowDirection, triggerRef, hasArrow, placement, shouldFlip, isNonModal, allowTabOut, autoFocus, }: CombinedPopoverProps) => import("react/jsx-runtime").JSX.Element;
 export default Popover;

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

@@ -1 +1,2 @@
 export { default } from './Popover';
+export type { PopoverProps, InternalPopoverProps, CombinedPopoverProps, } from './Popover';

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

@@ -1,2 +1,2 @@
-export type { RadioProps } from './Radio';
 export { default } from './Radio';
+export type { RadioProps } from './Radio';

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,5 +1,5 @@
 import { RadioGroupProps as AriaRadioGroupProps, ValidationResult } from 'react-aria-components';
-interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children'> {
+export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children'> {
     children?: React.ReactNode;
     /**
      * The label for the TextField

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

@@ -1 +1,2 @@
 export { default } from './RadioGroup';
+export type { RadioGroupProps } from './RadioGroup';

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

@@ -1 +1,2 @@
 export { default } from './SearchField';
+export type { SearchFieldProps } from './SearchField';

package/dist/components/Section/Section.d.ts

@@ -3,7 +3,7 @@ import { BackgroundVariants } from '../../utils/backgroundColor/backgroundColor'
 import { PaddingVariants } from '../../utils/padding/padding';
 import { FlexVariants } from '../../utils/flex/flex';
 type SectionPaddingValue = 'default' | PaddingVariants['paddingX'];
-type SectionPadding = {
+export type SectionPadding = {
     paddingX?: SectionPaddingValue;
     paddingY?: SectionPaddingValue;
     paddingTop?: SectionPaddingValue;
@@ -18,7 +18,7 @@ export interface SectionProps extends BackgroundVariants, SectionPadding, Pick<F
     backgroundColour?: BackgroundVariants['backgroundColor'];
     className?: string;
 }
-interface ContainerProps {
+export interface ContainerProps {
     children: React.ReactNode;
     className?: string;
     containerMaxWidth?: 'full-width' | 'page';

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

@@ -1 +1,2 @@
 export { default } from './Section';
+export type { SectionProps, ContainerProps } from './Section';

package/dist/components/SelectCard/SelectCard.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { CheckboxProps } from 'react-aria-components';
 import { RadioProps } from '../Radio';
-type SelectCardContextType = {
+export type SelectCardContextType = {
     /**
      * The input type of the select card.
      * @default 'checkbox'
@@ -17,7 +17,8 @@ type SelectCardContextType = {
 } & Omit<CheckboxProps, 'children' | 'focusStyle'>) | ({
     type: 'radio';
 } & Omit<RadioProps, 'children' | 'focusStyle'>));
-type SelectCardProps = SelectCardContextType & {
+export declare const SelectCardContext: React.Context<SelectCardContextType>;
+export type SelectCardProps = SelectCardContextType & {
     /**
      * The compounds components of the SelectCard:
      * - SelectCard.Header

package/dist/components/SelectCard/SelectCard.js

@@ -80,6 +80,7 @@ SelectCard.Label = Label;
 SelectCard.Body = Body;
 SelectCard.Details = Details;
 export {
+  SelectCardContext,
   SelectCard as default
 };
 //# sourceMappingURL=SelectCard.js.map

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

@@ -1 +1,2 @@
 export { default } from './SelectCard';
+export type { SelectCardContext, SelectCardProps } from './SelectCard';

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

@@ -1 +1,2 @@
 export { default } from './SelectNative';
+export type { SelectNativeOption, SelectNativeProps } from './SelectNative';

package/dist/components/Slider/Slider.d.ts

@@ -1,10 +1,11 @@
+import { SliderRenderProps } from 'react-aria-components';
 export type SliderMode = 'numeric' | 'currency' | 'duration' | 'time';
 export interface CurrencyFormatOptions extends Omit<Intl.NumberFormatOptions, 'style'> {
     currency: string;
     locale?: string;
 }
-type FormatOptions = Intl.NumberFormatOptions | ((value: number, maxValue?: number) => string);
-type BaseSliderProps = {
+export type FormatOptions = Intl.NumberFormatOptions | ((value: number, maxValue?: number) => string);
+export type BaseSliderProps = {
     label?: string;
     description?: string;
     isDisabled?: boolean;
@@ -16,18 +17,29 @@ type BaseSliderProps = {
     id?: string;
     showTooltip?: boolean;
 };
-type SingleSliderProps = BaseSliderProps & {
+export type SingleSliderProps = BaseSliderProps & {
     isRange?: false;
     defaultValue?: number;
     value?: number;
     onChange?: (value: number) => void;
 };
-type RangeSliderProps = BaseSliderProps & {
+export type RangeSliderProps = BaseSliderProps & {
     isRange: true;
     defaultValue?: [number, number];
     value?: [number, number];
     onChange?: (value: [number, number]) => void;
 };
 export type SliderProps = SingleSliderProps | RangeSliderProps;
+export interface CustomThumbProps {
+    index: number;
+    state: SliderRenderProps['state'];
+    formatValue: (val: number) => string;
+    isDisabled?: boolean;
+    showTooltip?: boolean;
+    label: string;
+    minValue: number;
+    maxValue: number;
+    isRange?: boolean;
+}
 export declare const Slider: ({ label, description, isDisabled, isRange, minValue, maxValue, step, formatOptions, defaultValue, value, id: providedId, onChange, showTooltip, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
 export default Slider;

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

@@ -1 +1,2 @@
 export { default } from './Slider';
+export type { CurrencyFormatOptions, BaseSliderProps, SliderProps, SingleSliderProps, RangeSliderProps, CustomThumbProps, } from './Slider';

package/dist/components/SubHeading/SubHeading.d.ts

@@ -5,10 +5,10 @@ declare const subHeading: (props?: ({
     size?: "sm" | "xs" | null | undefined;
     textAlign?: "center" | "end" | "start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type HeadingVariants = VariantProps<typeof subHeading>;
+export type SubHeadingVariants = VariantProps<typeof subHeading>;
 type SubHeadingLevel = 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 type SubHeadingSize = 'xs' | 'sm';
-export interface HeadingProps extends HeadingVariants {
+export interface SubHeadingProps extends SubHeadingVariants {
     /**
      * children
      */
@@ -37,5 +37,5 @@ export interface HeadingProps extends HeadingVariants {
      */
     textAlign?: 'start' | 'center' | 'end';
 }
-export declare const SubHeading: ({ children, as: Component, size, foregroundColor, fgColor, textAlign, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SubHeading: ({ children, as: Component, size, foregroundColor, fgColor, textAlign, ...props }: SubHeadingProps) => import("react/jsx-runtime").JSX.Element;
 export default SubHeading;

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

@@ -1 +1,2 @@
 export { default } from './SubHeading';
+export type { SubHeadingProps } from './SubHeading';

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

@@ -1 +1,2 @@
 export { default } from './Switch';
+export type { SwitchProps } from './Switch';

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

@@ -1 +1,2 @@
 export { default } from './Tag';
+export type { TagProps } from './Tag';

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

@@ -1 +1,2 @@
 export { default } from './TagGroup';
+export type { TagGroupProps } from './TagGroup';

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

@@ -1 +1,2 @@
 export { default } from './TextField';
+export type { TextFieldProps } from './TextField';

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

@@ -1 +1,2 @@
 export { default } from './ToggleButton';
+export type { ToggleButtonProps } from './ToggleButton';

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

@@ -1 +1,2 @@
 export { default } from './ToggleIconButton';
+export type { ToggleIconButtonProps } from './ToggleIconButton';

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

@@ -1 +1,2 @@
 export { default } from './Tooltip';
+export type { TooltipProps } from './Tooltip';

package/dist/components/index.d.ts

@@ -1,62 +1,122 @@
 export { default as Accordion } from './Accordion';
+export type * from './Accordion';
 export { default as AviosBadge } from './AviosBadge';
+export type * from './AviosBadge';
 export { default as AviosCurrencySymbol } from './AviosCurrencySymbol';
+export type * from './AviosCurrencySymbol';
 export { default as Badge } from './Badge';
+export type * from './Badge';
 export { default as Box } from './Box';
+export type * from './Box';
 export { default as Button } from './Button';
+export type * from './Button';
 export { default as ButtonGroup } from './ButtonGroup';
+export type * from './ButtonGroup';
 export { default as CalloutBanner } from './CalloutBanner';
+export type * from './CalloutBanner';
 export { default as CardSection } from './CardSection';
+export type * from './CardSection';
 export { default as Checkbox } from './Checkbox';
+export type * from './Checkbox';
 export { default as CheckboxGroup } from './CheckboxGroup';
+export type * from './CheckboxGroup';
 export { default as ComboBox } from './ComboBox';
+export type * from './ComboBox';
 export { default as CreditCardNumberField } from './CreditCardNumberField';
+export type * from './CreditCardNumberField';
 export { default as CreditCardSecurityCodeField } from './CreditCardSecurityCodeField';
+export type * from './CreditCardSecurityCodeField';
 export { default as DateField } from './DateField';
+export type * from './DateField';
 export { default as DestinationHeading } from './DestinationHeading';
+export type * from './DestinationHeading';
 export { default as DetailsDisclosure } from './DetailsDisclosure';
+export type * from './DetailsDisclosure';
 export { default as Dialog } from './Dialog';
+export type * from './Dialog';
 export { default as ErrorSummary } from './ErrorSummary';
+export type * from './ErrorSummary';
 export { default as Eyebrow } from './Eyebrow';
+export type * from './Eyebrow';
 export { default as FieldDescription } from './FieldDescription';
+export type * from './FieldDescription';
 export { default as FieldError } from './FieldError';
+export type * from './FieldError';
 export { default as FieldHeader } from './FieldHeader';
+export type * from './FieldHeader';
 export { default as FieldLabel } from './FieldLabel';
+export type * from './FieldLabel';
 export { default as Fieldset } from './Fieldset';
+export type * from './Fieldset';
 export { default as FieldsetHeader } from './FieldsetHeader';
+export type * from './FieldsetHeader';
 export { default as Form } from './Form';
+export type * from './Form';
 export { default as Grid } from './Grid';
+export type * from './Grid';
 export { default as Heading } from './Heading';
+export type * from './Heading';
 export { default as Icon } from './Icon';
+export type * from './Icon';
 export { default as IconBackdrop } from './IconBackdrop';
+export type * from './IconBackdrop';
 export { default as IconButton } from './IconButton';
+export type * from './IconButton';
 export { default as Image } from './Image';
+export type * from './Image';
 export { default as Label } from './Label';
+export type * from './Label';
 export { default as Link } from './Link';
+export type * from './Link';
 export { default as ListBox } from './ListBox';
+export type * from './ListBox';
 export { default as ListBoxItem } from './ListBoxItem';
+export type * from './ListBoxItem';
 export { default as LoadingSpinner } from './LoadingSpinner';
+export type * from './LoadingSpinner';
 export { default as Menu } from './Menu';
+export type * from './Menu';
 export { default as NumberField } from './NumberField';
+export type * from './NumberField';
 export { default as Paragraph } from './Paragraph';
+export type * from './Paragraph';
 export { default as PhoneNumberField } from './PhoneNumberField';
+export type * from './PhoneNumberField';
 export { default as Popover } from './Popover';
+export type * from './Popover';
 export { default as PasswordField } from './PasswordField';
+export type * from './PasswordField';
 export { default as Radio } from './Radio';
+export type * from './Radio';
 export { default as RadioGroup } from './RadioGroup';
+export type * from './RadioGroup';
 export { default as SearchField } from './SearchField';
+export type * from './SearchField';
 export { default as Section } from './Section';
-export { default as Select } from './SelectNative';
+export type * from './Section';
 export { default as SelectCard } from './SelectCard';
+export type * from './SelectCard';
 export { default as SelectNative } from './SelectNative';
-export { default as Spacer } from './Spacer';
+export type * from './SelectNative';
 export { default as Slider } from './Slider';
+export type * from './Slider';
+export { default as Spacer } from './Spacer';
+export type * from './Spacer';
 export { default as SubHeading } from './SubHeading';
+export type * from './SubHeading';
 export { default as Switch } from './Switch';
+export type * from './Switch';
 export { default as Tag } from './Tag';
+export type * from './Tag';
 export { default as TagGroup } from './TagGroup';
+export type * from './TagGroup';
 export { default as TextField } from './TextField';
+export type * from './TextField';
 export { default as TextAreaField } from './TextAreaField';
+export type * from './TextAreaField';
 export { default as ToggleButton } from './ToggleButton';
+export type * from './ToggleButton';
 export { default as ToggleIconButton } from './ToggleIconButton';
+export type * from './ToggleIconButton';
 export { default as Tooltip } from './Tooltip';
+export type * from './Tooltip';

package/dist/components/index.js

@@ -47,10 +47,10 @@ import { Radio } from "./Radio/Radio.js";
 import { RadioGroup } from "./RadioGroup/RadioGroup.js";
 import { SearchField } from "./SearchField/SearchField.js";
 import { default as default8 } from "./Section/Section.js";
-import { SelectNative, SelectNative as SelectNative2 } from "./SelectNative/SelectNative.js";
 import { default as default9 } from "./SelectCard/SelectCard.js";
-import { Spacer } from "./Spacer/Spacer.js";
+import { SelectNative } from "./SelectNative/SelectNative.js";
 import { Slider } from "./Slider/Slider.js";
+import { Spacer } from "./Spacer/Spacer.js";
 import { SubHeading } from "./SubHeading/SubHeading.js";
 import { Switch } from "./Switch/Switch.js";
 import { Tag } from "./Tag/Tag.js";
@@ -109,9 +109,8 @@ export {
   RadioGroup,
   SearchField,
   default8 as Section,
-  SelectNative as Select,
   default9 as SelectCard,
-  SelectNative2 as SelectNative,
+  SelectNative,
   Slider,
   Spacer,
   SubHeading,

package/dist/index.js

@@ -47,10 +47,10 @@ import { Radio } from "./components/Radio/Radio.js";
 import { RadioGroup } from "./components/RadioGroup/RadioGroup.js";
 import { SearchField } from "./components/SearchField/SearchField.js";
 import { default as default8 } from "./components/Section/Section.js";
-import { SelectNative, SelectNative as SelectNative2 } from "./components/SelectNative/SelectNative.js";
 import { default as default9 } from "./components/SelectCard/SelectCard.js";
-import { Spacer } from "./components/Spacer/Spacer.js";
+import { SelectNative } from "./components/SelectNative/SelectNative.js";
 import { Slider } from "./components/Slider/Slider.js";
+import { Spacer } from "./components/Spacer/Spacer.js";
 import { SubHeading } from "./components/SubHeading/SubHeading.js";
 import { Switch } from "./components/Switch/Switch.js";
 import { Tag } from "./components/Tag/Tag.js";
@@ -109,9 +109,8 @@ export {
   RadioGroup,
   SearchField,
   default8 as Section,
-  SelectNative as Select,
   default9 as SelectCard,
-  SelectNative2 as SelectNative,
+  SelectNative,
   Slider,
   Spacer,
   SubHeading,

package/dist/utils/breakpoint/hooks/useBreakpoint.d.ts

@@ -0,0 +1,11 @@
+import { Breakpoint } from '../theme/breakpoints';
+/**
+ * A custom hook that returns the current breakpoint based on the window size.
+ *
+ * @param fallback - The fallback value to return if the `window` object is not available.
+ * @returns The current breakpoint based on the window size.
+ * @see {@link BREAKPOINTS} for the defined breakpoints.
+ * @see {@link Breakpoint} for the type of the breakpoints.
+ * @see {@link useBreakpointOriginal} for the original hook from the `use-breakpoint` library.
+ */
+export declare const useBreakpoint: (fallback?: Breakpoint) => Breakpoint;

package/dist/utils/breakpoint/hooks/useBreakpoint.js

@@ -0,0 +1,79 @@
+import { BREAKPOINTS } from "../theme/breakpoints.js";
+import { useMemo, useCallback, useSyncExternalStore, useDebugValue } from "react";
+const createMediaQueries = (breakpoints) => {
+  const sortedBreakpoints = Object.keys(breakpoints).sort((a, b) => breakpoints[b] - breakpoints[a]);
+  return sortedBreakpoints.map((breakpoint, index) => {
+    let query = "";
+    const minWidth = breakpoints[breakpoint];
+    const nextBreakpoint = sortedBreakpoints[index - 1];
+    const maxWidth = nextBreakpoint ? breakpoints[nextBreakpoint] : null;
+    if (minWidth >= 0) {
+      query = `(min-width: ${minWidth}px)`;
+    }
+    if (maxWidth !== null) {
+      if (query) {
+        query += " and ";
+      }
+      query += `(max-width: ${maxWidth - 1}px)`;
+    }
+    const mediaQuery = {
+      breakpoint,
+      maxWidth: maxWidth ? maxWidth - 1 : null,
+      minWidth,
+      query
+    };
+    return mediaQuery;
+  });
+};
+const EMPTY_BREAKPOINT = {
+  breakpoint: null,
+  minWidth: null,
+  maxWidth: null,
+  query: null
+};
+const useBreakpoint$1 = (config, defaultBreakpoint) => {
+  const mediaQueries = useMemo(() => createMediaQueries(config), [config]);
+  const subscribe = useCallback((callback) => {
+    const unsubscribers = [];
+    mediaQueries.forEach(({ query }) => {
+      const list = window.matchMedia(query);
+      const supportsNewEventListeners = "addEventListener" in list && "removeEventListener" in list;
+      if (supportsNewEventListeners) {
+        list.addEventListener("change", callback);
+      } else {
+        list.addListener(callback);
+      }
+      unsubscribers.push(supportsNewEventListeners ? () => list.removeEventListener("change", callback) : () => list.removeListener(callback));
+    });
+    return () => unsubscribers.forEach((unsubscriber) => unsubscriber());
+  }, [mediaQueries]);
+  const getSnapshot = useCallback(() => {
+    const mediaMatch = mediaQueries.find((mediaQuery) => window.matchMedia(mediaQuery.query).matches);
+    if (mediaMatch)
+      return mediaMatch;
+    if (defaultBreakpoint) {
+      const defaultMatch = mediaQueries.find((mediaQuery) => mediaQuery.breakpoint === defaultBreakpoint);
+      if (defaultMatch)
+        return defaultMatch;
+    }
+    return EMPTY_BREAKPOINT;
+  }, [defaultBreakpoint, mediaQueries]);
+  const getServerSnapshot = useCallback(() => {
+    const defaultMatch = mediaQueries.find((mediaQuery) => mediaQuery.breakpoint === defaultBreakpoint);
+    return defaultMatch ?? EMPTY_BREAKPOINT;
+  }, [defaultBreakpoint, mediaQueries]);
+  const currentBreakpoint = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  useDebugValue(currentBreakpoint, (c) => typeof c.breakpoint === "string" ? `${c.breakpoint} (${c.minWidth} ≤ x${c.maxWidth ? ` < ${c.maxWidth + 1}` : ""})` : "");
+  return currentBreakpoint;
+};
+const useBreakpoint = (fallback = "base") => {
+  const canUseMatchMedia = typeof window !== "undefined" && typeof window.matchMedia === "function";
+  if (!canUseMatchMedia) {
+    return fallback;
+  }
+  return useBreakpoint$1(BREAKPOINTS, fallback).breakpoint;
+};
+export {
+  useBreakpoint
+};
+//# sourceMappingURL=useBreakpoint.js.map

package/dist/utils/breakpoint/hooks/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}