@cruk/cruk-react-components 2.0.1 → 3.0.0

package/lib/components/Link/styles.d.ts

@@ -1,18 +1,22 @@
-import { AnchorHTMLAttributes } from "react";
-import { TextProps } from "../Text";
-import { ThemeType } from "../../types";
-export declare const ChevyWithLevee: import("styled-components").StyledComponent<({ faIcon, color, size, ...rest }: import("../IconFa").IconFaProps) => JSX.Element, any, {}, never>;
-export declare const StyledLink: import("styled-components").StyledComponent<import("react").FunctionComponent<TextProps>, any, AnchorHTMLAttributes<HTMLElement> & import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
-    textColor?: string | undefined;
-    textAlign?: "left" | "right" | "center" | "justify" | undefined;
-    textSize?: import("../../types").FontSizeType | undefined;
-    textWeight?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-    wordBreak?: import("../../types").WordBreakType | undefined;
-    overflowWrap?: import("../../types").OverflowWrapType | undefined;
-    ref?: import("react").Ref<HTMLElement> | undefined;
-} & {
-    theme: ThemeType;
-    appearance?: "primary" | "secondary" | undefined;
-    textHoverColor?: string | undefined;
-}, never>;
+import { AnchorHTMLAttributes } from "react";
+import { TextProps } from "../Text";
+import { ThemeType } from "../../types";
+type ThemeProp = {
+    theme: ThemeType;
+};
+export declare const ChevyWithLevee: import("styled-components").StyledComponent<({ faIcon, color, size, ...rest }: import("../IconFa").IconFaProps) => JSX.Element, any, ThemeProp, never>;
+export declare const StyledLink: import("styled-components").StyledComponent<import("react").FunctionComponent<TextProps>, any, AnchorHTMLAttributes<HTMLElement> & import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
+    textColor?: string | undefined;
+    textAlign?: "left" | "right" | "center" | "justify" | undefined;
+    textSize?: import("../../types").FontSizeType | undefined;
+    textWeight?: number | undefined;
+    as?: import("react").ElementType | undefined;
+    wordBreak?: import("../../types").WordBreakType | undefined;
+    overflowWrap?: import("../../types").OverflowWrapType | undefined;
+    ref?: import("react").Ref<HTMLElement> | undefined;
+} & {
+    theme: ThemeType;
+    appearance?: "primary" | "secondary" | undefined;
+    textHoverColor?: string | undefined;
+}, never>;
+export {};

package/lib/components/Loader/Loader.stories.d.ts

@@ -1,6 +1,13 @@
-import { Story, Meta } from "@storybook/react";
-declare const _default: Meta<{}>;
-export default _default;
-export declare const LoaderDefault: Story;
-export declare const SU2CLoader: Story;
-export declare const BowelbabeLoader: Story;
+import { StoryObj } from "@storybook/react";
+import Loader from ".";
+declare const _default: {
+    title: string;
+    component: () => JSX.Element;
+    args: {};
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof Loader>;
+export declare const LoaderDefault: Story;
+export declare const LoaderSU2C: Story;
+export declare const LoaderBowelbabe: Story;

package/lib/components/Loader/Loader.test.cypress.d.ts

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

package/lib/components/Loader/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-/**
- *
- * Loaders are used after some user interaction that we assume will take some time to complete. They inform the user that their request is beeing processed and that they should wait.
- */
-declare const Loader: () => JSX.Element;
-export default Loader;
+/// <reference types="react" />
+/**
+ *
+ * Loaders are used after some user interaction that we assume will take some time to complete. They inform the user that their request is beeing processed and that they should wait.
+ */
+declare const Loader: () => JSX.Element;
+export default Loader;

package/lib/components/Loader/styles.d.ts

@@ -1,2 +1,7 @@
-export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const Spinner: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { ThemeType } from "../../types";
+type SpinnerProps = {
+    theme: ThemeType;
+};
+export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const Spinner: import("styled-components").StyledComponent<"div", any, SpinnerProps, never>;
+export {};

package/lib/components/Modal/Modal.stories.d.ts

@@ -1,7 +1,13 @@
-import { Story, Meta } from "@storybook/react";
-import { ModalProps } from ".";
-declare const _default: Meta<ModalProps>;
-export default _default;
-export declare const ModalDefault: Story<ModalProps>;
-export declare const SU2CModal: Story<ModalProps>;
-export declare const BowelbabeModal: Story<ModalProps>;
+import { StoryObj } from "@storybook/react";
+import Modal, { ModalProps } from ".";
+declare const _default: {
+    title: string;
+    component: ({ modalName, closeFunction, showCloseButton, maxWidth, top, backgroundColor, children, width, margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft, padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft, }: ModalProps) => JSX.Element;
+    args: {};
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof Modal>;
+export declare const ModalDefault: Story;
+export declare const ModalSU2C: Story;
+export declare const ModalBowelbabe: Story;

package/lib/components/Modal/Modal.test.cypress.d.ts

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

package/lib/components/Modal/index.d.ts

@@ -1,32 +1,32 @@
-import { ReactNode } from "react";
-import { SpacingProps } from "../Spacing";
-export type ModalProps = SpacingProps & {
-    /** modal name used for aria-label */
-    modalName: string;
-    /** callback function called on modal close */
-    closeFunction: () => void;
-    /** flag to reveal close button with cross in the top right of modal */
-    showCloseButton?: boolean;
-    /** set max width of modal */
-    maxWidth?: string;
-    /** set space from top of view port that modal appears */
-    top?: string;
-    /** background color of dialogue */
-    backgroundColor?: string;
-    /** children components  */
-    children?: ReactNode;
-    /** width of modal */
-    width?: string;
-};
-/**
- *
- * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.
- * ## How modals work
- * - Modals are positioned over everything else in the document and remove scroll from the "body" tag so that modal content scrolls instead.
- * - Modals are unmounted when closed.
- * - Modal's "trap" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.
- * ## Accessibility
- * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.
- */
-declare const Modal: ({ modalName, closeFunction, showCloseButton, maxWidth, top, backgroundColor, children, width, margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft, padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft, }: ModalProps) => JSX.Element;
-export default Modal;
+import { ReactNode } from "react";
+import { SpacingProps } from "../Spacing";
+export type ModalProps = SpacingProps & {
+    /** modal name used for aria-label */
+    modalName: string;
+    /** callback function called on modal close */
+    closeFunction: () => void;
+    /** flag to reveal close button with cross in the top right of modal */
+    showCloseButton?: boolean;
+    /** set max width of modal */
+    maxWidth?: string;
+    /** set space from top of view port that modal appears */
+    top?: string;
+    /** background color of dialogue */
+    backgroundColor?: string;
+    /** children components  */
+    children?: ReactNode;
+    /** width of modal */
+    width?: string;
+};
+/**
+ *
+ * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.
+ * ## How modals work
+ * - Modals are positioned over everything else in the document and remove scroll from the "body" tag so that modal content scrolls instead.
+ * - Modals are unmounted when closed.
+ * - Modal's "trap" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.
+ * ## Accessibility
+ * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.
+ */
+declare const Modal: ({ modalName, closeFunction, showCloseButton, maxWidth, top, backgroundColor, children, width, margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft, padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft, }: ModalProps) => JSX.Element;
+export default Modal;

package/lib/components/Modal/styles.d.ts

@@ -1,24 +1,27 @@
-/// <reference types="react" />
-import { ThemeType } from "../../types";
-type ContentProps = {
-    backgroundColor?: string;
-    theme: ThemeType;
-    top: string;
-    width: string;
-    maxWidth: string;
-};
-export declare const Background: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Content: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Box").BoxProps>, any, ContentProps, never>;
-export declare const CloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").ButtonHTMLAttributes<HTMLElement> & {
-    appearance?: import("../../types").ButtonAppearanceType | undefined;
-    full?: boolean | undefined;
-    href?: string | undefined;
-    size?: "m" | "l" | undefined;
-    css?: any;
-    as?: import("react").ElementType<any> | undefined;
-    isIconButton?: boolean | undefined;
-    ref?: import("react").Ref<HTMLElement> | undefined;
-    children?: import("react").ReactNode;
-}, "css" | "as" | keyof import("react").ButtonHTMLAttributes<HTMLElement> | "appearance" | "full" | "href" | "size" | "isIconButton"> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
-export {};
+/// <reference types="react" />
+import { ThemeType } from "../../types";
+type ThemeProp = {
+    theme: ThemeType;
+};
+type ContentProps = {
+    backgroundColor?: string;
+    theme: ThemeType;
+    top: string;
+    width: string;
+    maxWidth: string;
+};
+export declare const Background: import("styled-components").StyledComponent<"div", any, ThemeProp, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Content: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Box").BoxProps>, any, ContentProps, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").ButtonHTMLAttributes<HTMLElement> & {
+    appearance?: import("../../types").ButtonAppearanceType | undefined;
+    full?: boolean | undefined;
+    href?: string | undefined;
+    size?: "m" | "l" | undefined;
+    css?: any;
+    as?: import("react").ElementType | undefined;
+    isIconButton?: boolean | undefined;
+    ref?: import("react").Ref<HTMLElement> | undefined;
+    children?: import("react").ReactNode;
+}, "css" | "as" | keyof import("react").ButtonHTMLAttributes<HTMLElement> | "appearance" | "full" | "href" | "size" | "isIconButton"> & import("react").RefAttributes<HTMLElement>>, any, ThemeProp, never>;
+export {};

package/lib/components/Pagination/Pagination.stories.d.ts

@@ -1,8 +1,20 @@
-import { Story, Meta } from "@storybook/react";
-import { PaginationProps } from ".";
-declare const _default: Meta<PaginationProps>;
-export default _default;
-export declare const PaginationDefault: Story<PaginationProps>;
-export declare const PaginationFirstPage: Story<PaginationProps>;
-export declare const SU2CPagination: Story<PaginationProps>;
-export declare const BowelbabePagination: Story<PaginationProps>;
+import { StoryObj } from "@storybook/react";
+import Pagination, { PaginationProps } from ".";
+declare const _default: {
+    title: string;
+    component: ({ current, items, hideLast, pagerCallback, perPage, searchParam, children, }: PaginationProps) => JSX.Element;
+    args: {
+        current: number;
+        perPage: number;
+        items: number;
+        pagerCallback: (n: number) => void;
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof Pagination>;
+export declare const PaginationDefault: Story;
+export declare const PaginationFirstPage: Story;
+export declare const PaginationLastPage: Story;
+export declare const ErrorTextSU2C: Story;
+export declare const ErrorTextBowelbabe: Story;

package/lib/components/Pagination/Pagination.test.cypress.d.ts

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

package/lib/components/Pagination/index.d.ts

@@ -1,24 +1,24 @@
-import { ReactNode } from "react";
-export type PaginationProps = {
-    /** set current page number */
-    current: number;
-    /** total number of pages */
-    items: number;
-    /** don't show an ellipsise and then the last page link, usefull for search results where the last page isn't important */
-    hideLast?: boolean;
-    /** callback function which is passed the selected page number on click */
-    pagerCallback: (n: number) => void;
-    /** number of items per page */
-    perPage: number;
-    /** the name of the search param in the url that is modified on page click, defaults to 'page' */
-    searchParam?: string;
-    children?: ReactNode;
-};
-/**
- *
- * Pagination is used when we are viewing large amounts of data.
-Data is split into multiple pages and pagination is used to
-easily navigate through these pages.
- */
-declare const Pagination: ({ current, items, hideLast, pagerCallback, perPage, searchParam, children, }: PaginationProps) => JSX.Element;
-export default Pagination;
+import { ReactNode } from "react";
+export type PaginationProps = {
+    /** set current page number */
+    current: number;
+    /** total number of pages */
+    items: number;
+    /** don't show an ellipsise and then the last page link, usefull for search results where the last page isn't important */
+    hideLast?: boolean;
+    /** callback function which is passed the selected page number on click */
+    pagerCallback: (n: number) => void;
+    /** number of items per page */
+    perPage: number;
+    /** the name of the search param in the url that is modified on page click, defaults to 'page' */
+    searchParam?: string;
+    children?: ReactNode;
+};
+/**
+ *
+ * Pagination is used when we are viewing large amounts of data.
+Data is split into multiple pages and pagination is used to
+easily navigate through these pages.
+ */
+declare const Pagination: ({ current, items, hideLast, pagerCallback, perPage, searchParam, children, }: PaginationProps) => JSX.Element;
+export default Pagination;

package/lib/components/Pagination/styles.d.ts

@@ -1,10 +1,14 @@
-type PaginationStyledProps = {
-    active?: boolean;
-    name?: string;
-    disabled?: boolean;
-};
-export declare const PagerWrapper: import("styled-components").StyledComponent<"div", any, PaginationStyledProps, never>;
-export declare const PagerList: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const PagerLink: import("styled-components").StyledComponent<"a", any, PaginationStyledProps, never>;
-export declare const PagerItem: import("styled-components").StyledComponent<"li", any, {}, never>;
-export {};
+import { ThemeType } from "../../types";
+type PaginationStyledProps = {
+    active?: boolean;
+    name?: string;
+    disabled?: boolean;
+};
+type ThemeProps = {
+    theme: ThemeType;
+};
+export declare const PagerWrapper: import("styled-components").StyledComponent<"div", any, PaginationStyledProps, never>;
+export declare const PagerList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const PagerLink: import("styled-components").StyledComponent<"a", any, PaginationStyledProps, never>;
+export declare const PagerItem: import("styled-components").StyledComponent<"li", any, ThemeProps, never>;
+export {};

package/lib/components/PopOver/PopOver.test.cypress.d.ts

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

package/lib/components/PopOver/Popover.stories.d.ts

@@ -1,7 +1,18 @@
-import { Story, Meta } from "@storybook/react";
-import { PopOverProps } from ".";
-declare const _default: Meta<PopOverProps>;
-export default _default;
-export declare const PopOverDefault: Story<PopOverProps>;
-export declare const SU2CPopover: Story<PopOverProps>;
-export declare const BowelbabePopover: Story<PopOverProps>;
+import { StoryObj } from "@storybook/react";
+import PopOver, { PopOverProps } from ".";
+declare const _default: {
+    title: string;
+    component: ({ onPopOverIsOpenChange, children, minWidth, maxWidth, position, modalLabel, modalContent, css, full, }: PopOverProps) => JSX.Element;
+    args: {
+        modalLabel: string;
+        minWidth: string;
+        modalContent: JSX.Element;
+        children: JSX.Element;
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof PopOver>;
+export declare const PopOverDefault: Story;
+export declare const PopOverSU2C: Story;
+export declare const PopOverBowelbabe: Story;

package/lib/components/PopOver/index.d.ts

@@ -1,24 +1,26 @@
-import { ReactNode } from "react";
-import { PopOverPositionType } from "../../types";
-export type PopOverProps = {
-    /** used for aria-label of modal */
-    modalLabel: string;
-    /** contents in side the popover modal */
-    modalContent: ReactNode;
-    /**  position that the popover opens relative to the triggering element, the trigger element is the child of the component */
-    position?: PopOverPositionType;
-    css?: string;
-    /**  popover modal max width */
-    maxWidth?: string;
-    /**  popover modal min width */
-    minWidth?: string;
-    /**  popover isOpen changed handler */
-    onPopOverIsOpenChange?: (isOpen: boolean) => void;
-    children?: ReactNode;
-};
-/**
- * Popover is a non-modal dialog that floats around its disclosure. It's
-commonly used for displaying additional rich content on top of something.
-*/
-declare const PopOver: ({ onPopOverIsOpenChange, children, minWidth, maxWidth, position, modalLabel, modalContent, css, }: PopOverProps) => JSX.Element;
-export default PopOver;
+import { ReactNode } from "react";
+import { PopOverPositionType } from "../../types";
+export type PopOverProps = {
+    /** modalLabel: used for aria-label of modal */
+    modalLabel: string;
+    /** modalContent: contents in side the popover modal */
+    modalContent: ReactNode;
+    /** position: position that the popover opens relative to the triggering element, the trigger element is the child of the component */
+    position?: PopOverPositionType;
+    /** full: enable child button extend full width */
+    full?: boolean;
+    /**  maxWidth: popover modal max width */
+    maxWidth?: string;
+    /**  minWidth: popover modal min width */
+    minWidth?: string;
+    /**  onPopOverIsOpenChange: popover isOpen changed handler */
+    onPopOverIsOpenChange?: (isOpen: boolean) => void;
+    children?: ReactNode;
+    css?: string;
+};
+/**
+ * Popover is a non-modal dialog that floats around its disclosure. It's
+commonly used for displaying additional rich content on top of something.
+*/
+declare const PopOver: ({ onPopOverIsOpenChange, children, minWidth, maxWidth, position, modalLabel, modalContent, css, full, }: PopOverProps) => JSX.Element;
+export default PopOver;

package/lib/components/PopOver/styles.d.ts

@@ -1,10 +1,11 @@
-import { ThemeType, PopOverPositionType } from "../../types";
-export declare const PopOverWrapper: import("styled-components").StyledComponent<"div", any, {
-    css?: string | undefined;
-}, never>;
-export declare const PopOverModal: import("styled-components").StyledComponent<"div", any, {
-    position: PopOverPositionType;
-    theme?: ThemeType | undefined;
-    maxWidth: string;
-    minWidth: string;
-}, never>;
+import { ThemeType, PopOverPositionType } from "../../types";
+export declare const PopOverWrapper: import("styled-components").StyledComponent<"div", any, {
+    full: boolean;
+    css?: string | undefined;
+}, never>;
+export declare const PopOverModal: import("styled-components").StyledComponent<"div", any, {
+    position: PopOverPositionType;
+    theme?: ThemeType | undefined;
+    maxWidth: string;
+    minWidth: string;
+}, never>;

package/lib/components/ProgressBar/ProgressBar.stories.d.ts

@@ -1,10 +1,19 @@
-import { Story, Meta } from "@storybook/react";
-import { ProgressBarProps } from ".";
-declare const _default: Meta<ProgressBarProps>;
-export default _default;
-export declare const ProgressBarDefault: Story<ProgressBarProps>;
-export declare const ProgressBarCircular: Story<ProgressBarProps>;
-export declare const SU2CProgressBar: Story<ProgressBarProps>;
-export declare const SU2CProgressBarCircular: Story<ProgressBarProps>;
-export declare const BowelbabeProgressBar: Story<ProgressBarProps>;
-export declare const BowelbabeProgressBarCircular: Story<ProgressBarProps>;
+import { StoryObj } from "@storybook/react";
+import ProgressBar, { ProgressBarProps } from ".";
+declare const _default: {
+    title: string;
+    component: ({ percentage, isCircular, circleContents, circleSize, barColor, secondaryBarColor, secondaryPercentage, children, }: ProgressBarProps) => JSX.Element;
+    args: {
+        percentage: number;
+        secondaryPercentage: number;
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof ProgressBar>;
+export declare const ProgressBarDefault: Story;
+export declare const ProgressBarCircular: Story;
+export declare const ProgressBarSU2C: Story;
+export declare const ProgressBarCircularSU2C: Story;
+export declare const ProgressBarBowelbabe: Story;
+export declare const ProgressBarCircularBowelbabe: Story;

package/lib/components/ProgressBar/ProgressBar.test.cypress.d.ts

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

package/lib/components/ProgressBar/index.d.ts

@@ -1,24 +1,24 @@
-import { ReactNode } from "react";
-export type ProgressBarProps = {
-    /** percentage value of the progressbar */
-    percentage: number;
-    /** percentage value of a secondary (highter) amount of the progressbar */
-    secondaryPercentage?: number;
-    /** flag which converts line bar to donut chart */
-    isCircular?: boolean;
-    /** contents inside the donut chart */
-    circleContents?: ReactNode;
-    /** diameter of the donut chart */
-    circleSize?: string;
-    /** foreground colour of chart bar */
-    barColor?: string;
-    /** foreground colour of chart secondary bar */
-    secondaryBarColor?: string;
-    children?: ReactNode;
-};
-/**
- * Provide up-to-date feedback on the progress of a workflow or action with
-simple yet flexible progress bars.
-*/
-declare const ProgressBar: ({ percentage, isCircular, circleContents, circleSize, barColor, secondaryBarColor, secondaryPercentage, children, }: ProgressBarProps) => JSX.Element;
-export default ProgressBar;
+import { ReactNode } from "react";
+export type ProgressBarProps = {
+    /** percentage value of the progressbar */
+    percentage: number;
+    /** percentage value of a secondary (highter) amount of the progressbar */
+    secondaryPercentage?: number;
+    /** flag which converts line bar to donut chart */
+    isCircular?: boolean;
+    /** contents inside the donut chart */
+    circleContents?: ReactNode;
+    /** diameter of the donut chart */
+    circleSize?: string;
+    /** foreground colour of chart bar */
+    barColor?: string;
+    /** foreground colour of chart secondary bar */
+    secondaryBarColor?: string;
+    children?: ReactNode;
+};
+/**
+ * Provide up-to-date feedback on the progress of a workflow or action with
+simple yet flexible progress bars.
+*/
+declare const ProgressBar: ({ percentage, isCircular, circleContents, circleSize, barColor, secondaryBarColor, secondaryPercentage, children, }: ProgressBarProps) => JSX.Element;
+export default ProgressBar;

package/lib/components/ProgressBar/styles.d.ts

@@ -1,30 +1,30 @@
-import { ThemeType } from "../../types";
-type ThemeProp = {
-    theme: ThemeType;
-};
-type LineProgressBarProps = {
-    percentage: number;
-    barColor?: string;
-    isSecondary?: boolean;
-};
-type LineProgressWrapperProps = {
-    percentage: number;
-    secondaryPercentage: number;
-};
-type CircleWrapperProps = {
-    circleSize: string;
-};
-export declare const ProgressBarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LineProgressBarWrapper: import("styled-components").StyledComponent<"div", any, LineProgressWrapperProps, never>;
-export declare const LineProgressBar: import("styled-components").StyledComponent<"div", any, LineProgressBarProps, never>;
-export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const CircularWrapper: import("styled-components").StyledComponent<"div", any, CircleWrapperProps, never>;
-export declare const CircleSvg: import("styled-components").StyledComponent<"svg", any, {}, never>;
-export declare const EmptyCircle: import("styled-components").StyledComponent<"circle", any, {}, never>;
-export declare const FullCircle: import("styled-components").StyledComponent<"circle", any, ThemeProp & {
-    strokeDashoffsetInit: number;
-    barColor?: string | undefined;
-    isSecondary?: boolean | undefined;
-}, never>;
-export declare const CircularValue: import("styled-components").StyledComponent<"div", any, {}, never>;
-export {};
+import { ThemeType } from "../../types";
+type ThemeProp = {
+    theme: ThemeType;
+};
+type LineProgressBarProps = {
+    percentage: number;
+    barColor?: string;
+    isSecondary?: boolean;
+};
+type LineProgressWrapperProps = {
+    percentage: number;
+    secondaryPercentage: number;
+};
+type CircleWrapperProps = {
+    circleSize: string;
+};
+export declare const ProgressBarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LineProgressBarWrapper: import("styled-components").StyledComponent<"div", any, LineProgressWrapperProps, never>;
+export declare const LineProgressBar: import("styled-components").StyledComponent<"div", any, LineProgressBarProps, never>;
+export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const CircularWrapper: import("styled-components").StyledComponent<"div", any, CircleWrapperProps, never>;
+export declare const CircleSvg: import("styled-components").StyledComponent<"svg", any, {}, never>;
+export declare const EmptyCircle: import("styled-components").StyledComponent<"circle", any, ThemeProp, never>;
+export declare const FullCircle: import("styled-components").StyledComponent<"circle", any, ThemeProp & {
+    strokeDashoffsetInit: number;
+    barColor?: string | undefined;
+    isSecondary?: boolean | undefined;
+}, never>;
+export declare const CircularValue: import("styled-components").StyledComponent<"div", any, ThemeProp, never>;
+export {};