@veeqo/ui 6.0.0-beta.7 → 6.0.0

package/dist/components/FilterTag/FilterTag.d.ts

@@ -5,4 +5,4 @@ export interface ClassNamesReturnPayload {
     container?: string;
     cross?: string;
 }
-export declare const FilterTag: ({ className, e2eClassName, label, text, iconSlot, fill, content, footer, onClick, }: FilterTagProps) => React.JSX.Element;
+export declare const FilterTag: ({ className, e2eClassName, label, text, iconSlot, fill, content, footer, header, onClickAway, onClick, shouldCloseOnClickAway, }: FilterTagProps) => React.JSX.Element;

package/dist/components/FilterTag/styled.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { Text } from '../Text';
 import { AnimatedDropdown } from '../AnimatedDropdown';
-declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Container: import("styled-components").StyledComponent<"div", any, {
+    as: string;
+}, "as">;
 declare const GroupLabel: import("styled-components").StyledComponent<"span", any, {} & import("../Text/types").TextProps, never>;
 declare const MainIcon: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {
-    shouldShow?: boolean | undefined;
+    $shouldShow?: boolean | undefined;
 }, never>;
 declare const StyledCrossIcon: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
 declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/FilterTag/types.d.ts

@@ -8,5 +8,8 @@ export interface FilterTagProps {
     fill?: string;
     content?: ReactNode;
     footer?: ReactNode;
+    header?: ReactNode;
+    onClickAway?: (event: Event, closeDropdown?: () => void) => void;
     onClick?: () => void;
+    shouldCloseOnClickAway?: boolean;
 }

package/dist/components/Modal/types.d.ts

@@ -19,12 +19,12 @@ type DefaultHeaderOptions = {
     headerTitle: string;
     headerSubtitle?: string;
 };
-type ModalAction = {
+export type Action = {
     label: string;
 } & ButtonProps;
 type DefaultFooterOptions = {
-    leftActions?: ModalAction[];
-    rightActions?: ModalAction[];
+    leftActions?: Action[];
+    rightActions?: Action[];
 };
 type HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;
 type FooterOptions = WithFooterSlot | DefaultFooterOptions;

package/dist/components/Pagination/styled.d.ts

@@ -8,7 +8,7 @@ export declare const PaginationButton: import("styled-components").StyledCompone
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
-export declare const PageInput: import("styled-components").StyledComponent<import("react").FC<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "style" | "onKeyDown" | "autoComplete"> & {
+export declare const PageInput: import("styled-components").StyledComponent<import("react").FC<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "onKeyDown" | "autoComplete"> & {
     className?: string | undefined;
     type?: import("../TextField/types").TextFieldType | undefined;
     value?: string | undefined;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { PopoverProps } from './types';
-export declare const Popover: ({ id: passedId, children, zIndex, placement, anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, useAnchorWidth, supressWarnings, ...dialogProps }: PopoverProps) => React.JSX.Element;
+export declare const Popover: ({ id: passedId, children, zIndex, placement, anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop, useAnchorWidth, ...dialogProps }: PopoverProps) => React.JSX.Element;

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

@@ -1,11 +1,11 @@
 import { KeyboardEventHandler } from 'react';
 type UseHandleFocusArgs = {
-    popperElement: HTMLDialogElement | null;
+    popperElement: HTMLDialogElement | HTMLDivElement | null;
     anchorElement: HTMLElement | null;
     onClose: () => void;
     disableFocusLock?: boolean;
 };
 export declare const useHandleFocus: ({ popperElement, anchorElement, onClose, disableFocusLock, }: UseHandleFocusArgs) => {
-    handleKeyDown: KeyboardEventHandler<HTMLDialogElement>;
+    handleKeyDown: KeyboardEventHandler<HTMLDivElement | HTMLDialogElement>;
 };
 export {};

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

@@ -1,12 +1,11 @@
 type UseUpdateAriaAnchor = {
     anchorElement: HTMLElement | null;
     popoverId: string;
-    supressWarnings?: boolean;
 };
 /**
  * Update the anchor element to sent the required attributes if they haven't already set them.
  *
  * This allows current, inaccesible usages to be improved.
  */
-export declare const useUpdateAriaAnchor: ({ anchorElement, popoverId, supressWarnings, }: UseUpdateAriaAnchor) => void;
+export declare const useUpdateAriaAnchor: ({ anchorElement, popoverId }: UseUpdateAriaAnchor) => void;
 export {};

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

@@ -5,20 +5,20 @@ export type PopoverProps = DialogHTMLAttributes<HTMLDialogElement> & {
     zIndex?: number;
     placement?: Placement;
     anchorElement: HTMLElement | null;
+    useAnchorWidth?: boolean;
     rootElementRef?: HTMLElement;
     /**
-     * Will disable the focus lock if set to true, use only if taking manual control.
+     * Will disable the focus lock if set to true, use only if taking manual control of focus.
      */
     disableFocusLock?: boolean;
     /**
-     * When background is clicked, or ESC key is pressed we call this to close the popover.
+     * Removes the backdrop, only use if taking control of closing the popover.
      */
-    onShouldClose: () => void;
-    useAnchorWidth?: boolean;
+    removeBackdrop?: boolean;
     /**
-     * To supress A11y warnings. Use with care, if you are certain these are wrong.
+     * When background is clicked, or ESC key is pressed we call this to close the popover.
      */
-    supressWarnings?: boolean;
+    onShouldClose: () => void;
 };
 export type BackdropProps = {
     zIndex: number;

package/dist/components/PriceInput/styled.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ComponentSize } from '../types';
-export declare const StyledTextField: import("styled-components").StyledComponent<import("react").FC<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "style" | "onKeyDown" | "autoComplete"> & {
+export declare const StyledTextField: import("styled-components").StyledComponent<import("react").FC<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "onKeyDown" | "autoComplete"> & {
     className?: string | undefined;
     type?: import("../TextField/types").TextFieldType | undefined;
     value?: string | undefined;

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

@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ForwardedChoiceProps } from '../Choice';
 type RadioValue = string | number;
 export interface RadioProps extends ForwardedChoiceProps {
     id?: string;
+    className?: string;
     checked: boolean;
     value?: RadioValue;
     disabled?: boolean;
     name?: string;
     onChange: (checked: boolean, value?: RadioValue) => void;
+    children?: ReactNode;
 }
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/RangeCalendar/RangeCalendar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CalendarDate } from '@internationalized/date';
+import type { DateValue, RangeCalendarProps } from 'react-aria-components';
+export type CalendarProps = RangeCalendarProps<DateValue> & React.RefAttributes<HTMLDivElement> & {
+    'aria-label': string;
+    isMultiMonth?: boolean;
+    disabledRanges?: CalendarDate[][];
+    disallowWeekends?: boolean;
+};
+export declare const RangeCalendar: ({ disabledRanges, disallowWeekends, isMultiMonth, ...props }: CalendarProps) => React.JSX.Element;

package/dist/components/RangeCalendar/RangeCalendar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/RangeCalendar/components/CalendarGrid.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CalendarGridProps } from 'react-aria-components';
+export declare const CalendarGrid: (props: CalendarGridProps) => React.JSX.Element;

package/dist/components/RangeCalendar/components/StyledRangeCalendar/StyledRangeCalendar.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledRangeCalendar: import("styled-components").StyledComponent<(<T extends import("react-aria-components").DateValue>(props: import("react-aria-components").RangeCalendarProps<T> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>), any, {}, never>;

package/dist/components/RangeCalendar/components/StyledRangeCalendar/buttonStyles.d.ts

@@ -0,0 +1 @@
+export declare const buttonStyles: import("styled-components").FlattenSimpleInterpolation;

package/dist/components/RangeCalendar/components/StyledRangeCalendar/calendarCellStyles.d.ts

@@ -0,0 +1 @@
+export declare const calenderCellStyles: import("styled-components").FlattenSimpleInterpolation;

package/dist/components/RangeCalendar/components/StyledRangeCalendar/headerStyles.d.ts

@@ -0,0 +1 @@
+export declare const headerStyles: import("styled-components").FlattenSimpleInterpolation;

package/dist/components/RangeCalendar/components/StyledRangeCalendar/index.d.ts

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

package/dist/components/RangeCalendar/components/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TextStyles } from '../../../theme/modules/text';
+export declare const getTextStyles: (textTheme: TextStyles) => string;

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

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

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+type ScreenReaderOnlyProps = {
+    children: ReactNode;
+};
+/**
+ * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.
+ *  * **This is not a replacement for `aria-label`.**
+ *
+ * Note: aria-label is intended for interactive elements or for elements made interactive via other ARIA declarations when there's no visible text in the DOM to serve as a label.
+ *
+ * In general, screen reader-only content should be reserved for information that is apparent visually but not apparent to blind screen reader users.
+ *
+ * **Example use cases:**
+ * - Adding instructional cues and indicators
+ * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with "Search orders"
+ * - Skip to links to take the user to the main content (still need to be visibile when focused)
+ * - Breadcrumb navigation, making it clear with a "you are here" screen reader text
+ */
+export declare const ScreenReaderOnly: ({ children }: ScreenReaderOnlyProps) => React.JSX.Element;
+export {};

package/dist/components/ScreenReaderOnly/ScreenReaderOnly.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/extend-expect';
+import 'jest-styled-components';

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

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

package/dist/components/Search/Search.d.ts

@@ -1,28 +1,3 @@
 import React from 'react';
-export declare const Search: React.ForwardRefExoticComponent<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<React.InputHTMLAttributes<HTMLInputElement>, "style" | "onKeyDown" | "autoComplete"> & {
-    className?: string | undefined;
-    type?: import("../TextField/types").TextFieldType | undefined;
-    value?: string | undefined;
-    onChange?: ((value: string) => void) | undefined;
-    placeholder?: string | undefined;
-    step?: string | undefined;
-    name?: string | undefined;
-    min?: string | undefined;
-    max?: string | undefined;
-    pattern?: string | undefined;
-    hasError?: boolean | undefined;
-    size?: "base" | "sm" | undefined;
-    multiline?: boolean | undefined;
-    rows?: string | undefined;
-    invalid?: boolean | undefined;
-    disabled?: boolean | undefined;
-    spellCheck?: boolean | undefined;
-    id?: string | undefined;
-} & {
-    isLoading?: boolean | undefined;
-    fill?: string | undefined;
-    onClearClick?: ((event: React.SyntheticEvent<Element, Event>) => void) | undefined;
-    reversed?: boolean | undefined;
-    error?: string | undefined;
-    onChange: (value: string) => void;
-} & React.RefAttributes<HTMLInputElement>>;
+import { SearchProps } from './types';
+export declare const Search: ({ type, disabled, onClearClick, onChange, onBlur, onFocus, onKeyUp, onKeyDown, onKeyPress, value, error, placeholder, className, name, isLoading, fill, reversed, autoComplete, size, }: SearchProps) => React.JSX.Element;

package/dist/components/Search/styled.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Loader } from '../Loader';
-declare const Input: import("styled-components").StyledComponent<import("react").FC<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "style" | "onKeyDown" | "autoComplete"> & {
+declare const Input: import("styled-components").StyledComponent<import("react").FC<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "onKeyDown" | "autoComplete"> & {
     className?: string | undefined;
     type?: import("../TextField/types").TextFieldType | undefined;
     value?: string | undefined;

package/dist/components/Select/Select.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-type SelectOption = {
+export type SelectOption = {
     label: string;
     value: string;
     disabled?: boolean;
+    hidden?: boolean;
 };
-export interface SelectProps {
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'onChange'> {
     id?: string;
     className?: string;
     options: Array<SelectOption>;
@@ -15,4 +16,3 @@ export interface SelectProps {
     onChange?: (value: string) => void;
 }
 export declare const Select: React.FC<SelectProps & React.RefAttributes<HTMLSelectElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps>;
-export {};

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,7 @@
+export type SkeletonProps = {
+    width?: string;
+    height?: string;
+};
+export declare const Skeleton: import("styled-components").StyledComponent<"div", any, {
+    'aria-hidden': true;
+} & SkeletonProps, "aria-hidden">;

package/dist/components/Skeleton/Skeleton.test.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const TextField: React.ForwardRefExoticComponent<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<React.InputHTMLAttributes<HTMLInputElement>, "style" | "onKeyDown" | "autoComplete"> & {
+export declare const TextField: React.ForwardRefExoticComponent<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<React.InputHTMLAttributes<HTMLInputElement>, "onKeyDown" | "autoComplete"> & {
     className?: string | undefined;
     type?: import("./types").TextFieldType | undefined;
     value?: string | undefined;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const TextField: import("react").FC<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "style" | "onKeyDown" | "autoComplete"> & {
+export declare const TextField: import("react").FC<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "onKeyDown" | "autoComplete"> & {
     className?: string | undefined;
     type?: import("./types").TextFieldType | undefined;
     value?: string | undefined;

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

@@ -4,7 +4,7 @@ export type TextFieldType = 'text' | 'email' | 'number' | 'password' | 'search'
 /**
  * TextField properties.
  */
-export type TextFieldProps = Omit<EventHandlerProps, 'onChange' | 'onKeyDown'> & Pick<React.InputHTMLAttributes<HTMLInputElement>, 'autoComplete' | 'onKeyDown' | 'style'> & {
+export type TextFieldProps = Omit<EventHandlerProps, 'onChange' | 'onKeyDown'> & Pick<React.InputHTMLAttributes<HTMLInputElement>, 'autoComplete' | 'onKeyDown'> & {
     className?: string;
     /** Input element type */
     type?: TextFieldType;

package/dist/components/Toggle/Toggle.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ToggleProps } from './types';
 /**
- * A toggle switch component, use-cases should wrap with a label or
+ * A toggle switch component, use-cases should provide a label, wrap with a custom one or pass in an aria-label.
  */
 export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Toggle/styled.d.ts

@@ -4,7 +4,7 @@ declare const Slider: import("styled-components").StyledComponent<"span", any, {
     disabled?: boolean | undefined;
 }, never>;
 declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
-declare const Switch: import("styled-components").StyledComponent<"label", any, ToggleProps, never>;
+declare const Switch: import("styled-components").StyledComponent<"span", any, ToggleProps, never>;
 declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
 }, never>;

package/dist/components/Toggle/types.d.ts

@@ -1,5 +1,6 @@
+import { ForwardedChoiceProps } from '../Choice';
 import { EventHandlerProps } from '../types';
-export interface ToggleProps extends EventHandlerProps {
+export interface ToggleProps extends EventHandlerProps, ForwardedChoiceProps {
     id?: string;
     switched?: boolean;
     name?: string;

package/dist/components/UploadFile/components/UploadedFile/UploadedFile.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 type UploadedFileProps = {
     file?: File;
     resetSelection: () => void;
+    disabled?: boolean;
 };
-export declare const UploadedFile: ({ file, resetSelection }: UploadedFileProps) => React.JSX.Element | null;
+export declare const UploadedFile: ({ file, resetSelection, disabled }: UploadedFileProps) => React.JSX.Element | null;
 export {};

package/dist/components/ViewTab/ViewTab.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { ViewTabProps } from './types';
 export interface ClassNamesReturnPayload {
     delete?: string;
     edit?: string;
@@ -7,4 +6,16 @@ export interface ClassNamesReturnPayload {
     active?: string;
     counter?: string;
 }
-export declare const ViewTab: React.ForwardRefExoticComponent<ViewTabProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ViewTab: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "name" | "id" | "onClick"> & {
+    colourPalette?: import("../../theme/modules/colors").ColourPalette | undefined;
+    customTextColour?: string | undefined;
+    active?: boolean | undefined;
+    name: string;
+    iconSlot?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    id: string;
+    type?: "fixed" | "saved" | "draft" | undefined;
+    count?: string | number | null | undefined;
+    onClick: (id: string) => void;
+    subAction?: ((id: string) => void) | undefined;
+    ariaContext: string;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ViewTab/types.d.ts

@@ -1,13 +1,11 @@
-import { ReactElement } from 'react';
+import { ButtonHTMLAttributes, ReactElement } from 'react';
 import { ColourPalette } from '../../theme/modules/colors';
 export declare enum ViewTabTypes {
     saved = "saved",
     fixed = "fixed",
     draft = "draft"
 }
-export type ViewTabProps = {
-    /** ClassName to override styles on outer root element */
-    className?: string;
+export type ViewTabProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'name' | 'id' | 'type'> & {
     /** Colour palette for the ViewTab */
     colourPalette?: ColourPalette;
     /** customTextColour - Custom Rest State colour */
@@ -23,7 +21,7 @@ export type ViewTabProps = {
     /** ViewTab type */
     type?: keyof typeof ViewTabTypes;
     /** Number or string value to show near viewTab label */
-    count?: number | string;
+    count?: number | string | null;
     /** Event handler for when ViewTab component is clicked (should get activated) */
     onClick: (id: string) => void;
     /**  Event handler for when ViewTab component is clicked and isActive */

package/dist/components/WeightInput/styled.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const Row: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledTextField: import("styled-components").StyledComponent<import("react").FC<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "style" | "onKeyDown" | "autoComplete"> & {
+declare const StyledTextField: import("styled-components").StyledComponent<import("react").FC<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "onKeyDown" | "autoComplete"> & {
     className?: string | undefined;
     type?: import("../TextField/types").TextFieldType | undefined;
     value?: string | undefined;

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export { Accordion } from './Accordion';
-export { ActionList } from './ActionList';
+export { ActionMenu } from './ActionMenu';
+export { Alert } from './Alert';
 export { Anchor } from './Anchor';
 export { AnimatedDropdown } from './AnimatedDropdown';
 export { Avatar } from './Avatar';
@@ -8,16 +9,20 @@ export { Banner } from './Banner';
 export { BaseContainer } from './BaseContainer';
 export { Breadcrumbs } from './Breadcrumbs';
 export { Button } from './Button';
+export { RangeCalendar } from './RangeCalendar';
 export { Card } from './Card';
 export { CardHeader } from './CardHeader';
 export { Checkbox } from './Checkbox';
 export { Choice } from './Choice';
 export { ChoiceList } from './ChoiceList';
 export { CopyToClipboard } from './CopyToClipboard';
+export { DateRangeInput } from './DateRangeInput';
+export { DateRangePicker, DATE_RANGE_OPTIONS, DEFAULT_PRESET, DEFAULT_RANGE, DateRanges, checkIfDateRangeInvalid, getDateRange, } from './DateRangePicker';
 export { DataTable, useCellWidths, useColumns, useDragToScroll, useNested, useScrollPosition, useSelection, } from './DataTable';
 export { DescriptionList } from './DescriptionList';
 export { DetailPage } from './DetailPage';
 export { DimensionsInput } from './DimensionsInput';
+export { Dropdown } from './Dropdown';
 export { FilterTag } from './FilterTag';
 export { Grid } from './Grid';
 export { Image } from './Image';
@@ -26,18 +31,18 @@ export { LegacyDataTable } from './LegacyDataTable';
 export { Loader } from './Loader';
 export { LoginWithAmazonButton } from './LoginWithAmazonButton';
 export { Modal } from './Modal';
-export { PageHeader } from './PageHeader';
 export { Pagination } from './Pagination';
-export { PaginationRange } from './PaginationRange';
 export { Popover } from './Popover';
 export { Portal } from './Portal';
 export { PriceInput } from './PriceInput';
 export { Radio } from './Radio';
+export { ScreenReaderOnly } from './ScreenReaderOnly';
 export { Search } from './Search';
 export { SegmentedControl } from './SegmentedControl';
 export { Select } from './Select';
 export { ShortcutKeys } from './ShortcutKeys';
 export { SimpleTable } from './SimpleTable';
+export { Skeleton } from './Skeleton';
 export { Slider } from './Slider';
 export { Stack } from './Stack';
 export { Stepper } from './Stepper';

package/dist/hoc/withLabels/withLabels.d.ts

@@ -1,5 +1,6 @@
 import React, { ComponentType, FC } from 'react';
 export interface WithLabelsProps {
+    id?: string;
     label?: string;
     hint?: string | React.ReactNode;
     error?: string;

package/dist/hooks/index.d.ts

@@ -5,3 +5,4 @@ export { useFocusVisible, FocusVisibleManager } from './useFocusVisible';
 export { useHover } from './useHover';
 export { useIsOverflowing } from './useIsOverflowing';
 export { useTabs } from './useTabs';
+export { useId } from './useId';

package/dist/hooks/useDropdown.d.ts

@@ -1,6 +1,10 @@
-export declare function useDropdown(): {
+type UseDropdownInputProps = {
+    anchorElement?: HTMLDivElement | HTMLButtonElement | null;
+};
+export declare const useDropdown: ({ anchorElement }?: UseDropdownInputProps) => {
     shouldShowDropdown: boolean;
     toggleShouldShowDropdown: () => void;
     setShouldShowDropdown: (state: boolean) => void;
     closeDropdown: () => void;
 };
+export {};

package/dist/hooks/useId.d.ts

@@ -0,0 +1,4 @@
+export declare const useId: ({ id, prefix }: {
+    id?: string | undefined;
+    prefix?: string | undefined;
+}) => string;

package/dist/hooks/useId.test.d.ts

@@ -0,0 +1 @@
+export {};