@cruk/cruk-react-components 5.0.1 → 5.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/lib/components/AllThemesWrapper.d.ts +4 -6
  2. package/lib/components/Avatar/styles.d.ts +2 -3
  3. package/lib/components/Badge/Badge.stories.d.ts +0 -1
  4. package/lib/components/Badge/index.d.ts +3 -3
  5. package/lib/components/Badge/styles.d.ts +6 -7
  6. package/lib/components/Box/index.d.ts +0 -1
  7. package/lib/components/Button/styles.d.ts +4 -6
  8. package/lib/components/Carousel/Dots.d.ts +4 -5
  9. package/lib/components/Carousel/styles.d.ts +17 -22
  10. package/lib/components/Checkbox/styles.d.ts +13 -12
  11. package/lib/components/DateField/styles.d.ts +9 -7
  12. package/lib/components/Divider.d.ts +2 -3
  13. package/lib/components/IconFa/index.d.ts +1 -1
  14. package/lib/components/IconFa/styles.d.ts +4 -5
  15. package/lib/components/Pagination/styles.d.ts +2 -2
  16. package/lib/components/ProgressBar/styles.d.ts +2 -2
  17. package/lib/components/Radio/styles.d.ts +2 -2
  18. package/lib/components/TextAreaField/styles.d.ts +1 -1
  19. package/lib/components/ThemeCheatSheet.d.ts +2 -3
  20. package/lib/src/components/Avatar/styles.js.map +1 -1
  21. package/lib/src/components/Badge/index.js +1 -1
  22. package/lib/src/components/Badge/index.js.map +1 -1
  23. package/lib/src/components/Badge/styles.js +1 -1
  24. package/lib/src/components/Badge/styles.js.map +1 -1
  25. package/lib/src/components/Box/index.js +1 -1
  26. package/lib/src/components/Box/index.js.map +1 -1
  27. package/lib/src/components/Box/styles.js +1 -1
  28. package/lib/src/components/Box/styles.js.map +1 -1
  29. package/lib/src/components/Button/styles.js.map +1 -1
  30. package/lib/src/components/Carousel/Dots.js +1 -1
  31. package/lib/src/components/Carousel/Dots.js.map +1 -1
  32. package/lib/src/components/Carousel/styles.js +1 -1
  33. package/lib/src/components/Carousel/styles.js.map +1 -1
  34. package/lib/src/components/Checkbox/index.js +1 -1
  35. package/lib/src/components/Checkbox/index.js.map +1 -1
  36. package/lib/src/components/Checkbox/styles.js +1 -1
  37. package/lib/src/components/Checkbox/styles.js.map +1 -1
  38. package/lib/src/components/DateField/styles.js.map +1 -1
  39. package/lib/src/components/Divider.js.map +1 -1
  40. package/lib/src/components/IconFa/index.js +1 -1
  41. package/lib/src/components/IconFa/index.js.map +1 -1
  42. package/lib/src/components/IconFa/styles.js +1 -1
  43. package/lib/src/components/IconFa/styles.js.map +1 -1
  44. package/lib/src/components/Pagination/index.js +1 -1
  45. package/lib/src/components/Pagination/index.js.map +1 -1
  46. package/lib/src/components/Pagination/styles.js +1 -1
  47. package/lib/src/components/Pagination/styles.js.map +1 -1
  48. package/lib/src/components/ProgressBar/styles.js.map +1 -1
  49. package/lib/src/components/Radio/index.js +1 -1
  50. package/lib/src/components/Radio/index.js.map +1 -1
  51. package/lib/src/components/Radio/styles.js +1 -1
  52. package/lib/src/components/Radio/styles.js.map +1 -1
  53. package/lib/src/components/TextAreaField/index.js +1 -1
  54. package/lib/src/components/TextAreaField/index.js.map +1 -1
  55. package/lib/src/components/TextAreaField/styles.js +1 -1
  56. package/lib/src/components/TextAreaField/styles.js.map +1 -1
  57. package/lib/src/utils/themeUtils.js +2 -0
  58. package/lib/src/utils/themeUtils.js.map +1 -0
  59. package/lib/utils/themeUtils.d.ts +3 -0
  60. package/package.json +1 -1
@@ -1,12 +1,10 @@
1
1
  import React, { type ReactNode } from "react";
2
2
  import { type ThemeType } from "../types";
3
- type TestThemeWrapperProps = {
3
+ export declare const TestThemeWrapper: ({ children, theme, }: {
4
4
  theme?: ThemeType;
5
5
  children?: ReactNode;
6
- };
7
- export declare const TestThemeWrapper: ({ children, theme, }: TestThemeWrapperProps) => React.JSX.Element;
8
- type AllThemesWrapperProps = {
6
+ }) => React.JSX.Element;
7
+ export declare const AllThemesWrapper: ({ children }: {
9
8
  children?: ReactNode;
10
- };
11
- export declare const AllThemesWrapper: ({ children }: AllThemesWrapperProps) => React.JSX.Element;
9
+ }) => React.JSX.Element;
12
10
  export default AllThemesWrapper;
@@ -1,7 +1,6 @@
1
1
  import { type ThemeType } from "../../types";
2
- type AvatarStyledProps = {
2
+ export declare const StyledAvatar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
3
3
  $size?: string;
4
4
  theme: ThemeType;
5
- };
6
- export declare const StyledAvatar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, AvatarStyledProps>> & string;
5
+ }>> & string;
7
6
  export default StyledAvatar;
@@ -4,7 +4,6 @@ declare const _default: {
4
4
  title: string;
5
5
  component: typeof Badge;
6
6
  args: {
7
- borderColor: string;
8
7
  backgroundColor: string;
9
8
  textColor: string;
10
9
  };
@@ -1,6 +1,6 @@
1
- import React, { type HTMLAttributes, type ReactNode } from "react";
1
+ import React, { type ReactNode } from "react";
2
2
  import { type SpaceType } from "../../types";
3
- export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
3
+ export type BadgeProps = {
4
4
  /** background colour of badge */
5
5
  backgroundColor?: string;
6
6
  /** border colour of badge */
@@ -25,5 +25,5 @@ at the end of a sentence, link, or button. Unless the context is clear,
25
25
  consider including additional context with a visually hidden piece of
26
26
  additional text.
27
27
  */
28
- export declare function Badge({ children, size, backgroundColor, borderColor, textColor, ...rest }: BadgeProps): React.JSX.Element;
28
+ export declare function Badge({ children, size, backgroundColor, borderColor, textColor, }: BadgeProps): React.JSX.Element;
29
29
  export default Badge;
@@ -1,11 +1,10 @@
1
1
  import { type SpaceType, type ThemeType } from "../../types";
2
- type StyleBadgeProps = {
3
- $backgroundColor?: string;
4
- $borderColor?: string;
5
- $textColor?: string;
6
- $isText?: boolean;
2
+ export declare const StyledBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
3
+ $backgroundColor: string;
4
+ $borderColor: string;
5
+ $textColor: string;
6
+ $isText: boolean;
7
7
  $size: SpaceType;
8
8
  theme: ThemeType;
9
- };
10
- export declare const StyledBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyleBadgeProps>> & string;
9
+ }>> & string;
11
10
  export default StyledBadge;
@@ -3,7 +3,6 @@ import { type SpacingProps } from "../Spacing";
3
3
  export type BoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
4
4
  /** background color of box, this will add default padding */
5
5
  backgroundColor?: string;
6
- css?: string;
7
6
  ref?: Ref<HTMLDivElement>;
8
7
  children?: ReactNode;
9
8
  /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a "span" for example */
@@ -2,14 +2,12 @@ import { type ThemeType, type ButtonAppearanceType } from "../../types";
2
2
  export declare const Spacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
3
3
  theme: ThemeType;
4
4
  }>> & string;
5
- type StyledButtonProps = {
5
+ export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
6
+ theme: ThemeType;
7
+ href?: string;
6
8
  $isIconButton: boolean;
7
9
  $appearance?: ButtonAppearanceType;
8
10
  $full?: boolean;
9
- theme: ThemeType;
10
- href?: string;
11
11
  $size?: "m" | "l";
12
12
  $css?: string;
13
- };
14
- export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledButtonProps>> & string;
15
- export {};
13
+ }>> & string;
@@ -1,12 +1,11 @@
1
1
  import React, { type ButtonHTMLAttributes } from "react";
2
- type DotProps = {
2
+ export declare const CarouselLeftButton: (props: ButtonHTMLAttributes<HTMLElement>) => React.JSX.Element;
3
+ export declare const CarouselRightButton: (props: ButtonHTMLAttributes<HTMLElement>) => React.JSX.Element;
4
+ export declare const Dots: ({ count, currentPosition, scrollToPosition, next, previous, }: {
3
5
  count: number;
4
6
  currentPosition: number;
5
7
  scrollToPosition: (to: number) => void;
6
8
  next: () => void;
7
9
  previous: () => void;
8
- };
9
- export declare const CarouselLeftButton: (props: ButtonHTMLAttributes<HTMLElement>) => React.JSX.Element;
10
- export declare const CarouselRightButton: (props: ButtonHTMLAttributes<HTMLElement>) => React.JSX.Element;
11
- export declare const Dots: ({ count, currentPosition, scrollToPosition, next, previous, }: DotProps) => React.JSX.Element;
10
+ }) => React.JSX.Element;
12
11
  export default Dots;
@@ -1,35 +1,30 @@
1
1
  import { type ThemeType } from "../../types";
2
- import { type ButtonHTMLAttributes } from "react";
3
2
  export declare const CarouselWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
4
- type ThemeProps = {
5
- theme: ThemeType;
6
- };
7
- type CarouselScrollAreaProps = {
3
+ export declare const CarouselScrollArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
8
4
  $smoothScrolling: boolean;
9
- };
10
- type CarouselCardProps = {
5
+ }>> & string;
6
+ export declare const CarouselCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
11
7
  $onlyChild: boolean;
12
8
  $fullWidthChild: boolean;
13
- };
14
- type CarouselCardInnerProps = {
9
+ }>> & string;
10
+ export declare const CarouselCardInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
15
11
  $isSelected: boolean;
16
12
  $shrinkUnselectedPages: boolean;
17
13
  $onlyChild: boolean;
18
14
  $fullWidthChild: boolean;
19
- };
20
- export declare const CarouselScrollArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, CarouselScrollAreaProps>> & string;
21
- export declare const CarouselCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, CarouselCardProps>> & string;
22
- export declare const CarouselCardInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CarouselCardInnerProps>> & string;
15
+ }>> & string;
23
16
  export declare const ButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
24
17
  export declare const VerticalAlign: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
25
- type CarouselButtonProps = ThemeProps & ButtonHTMLAttributes<HTMLElement>;
26
- export declare const CarouselButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, CarouselButtonProps>> & string;
27
- type DotContainerProps = ThemeProps & {
28
- count: number;
29
- };
30
- export declare const DotContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DotContainerProps>> & string;
31
- export declare const Dot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ThemeProps & {
32
- selected: boolean;
18
+ export declare const CarouselButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
19
+ disabled: boolean;
20
+ theme: ThemeType;
21
+ }>> & string;
22
+ export declare const DotContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
23
+ $count: number;
24
+ theme: ThemeType;
25
+ }>> & string;
26
+ export declare const Dot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
27
+ $selected: boolean;
28
+ theme: ThemeType;
33
29
  }>> & string;
34
30
  export declare const ScreenReaderOnly: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
35
- export {};
@@ -1,16 +1,17 @@
1
1
  import { type ThemeType } from "../../types";
2
- type StyledLabelProps = {
3
- checked: boolean;
4
- disabled: boolean;
5
- $hasError: boolean;
2
+ export declare const CheckWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
3
+ theme: ThemeType;
4
+ }>> & string;
5
+ export declare const Check: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
6
6
  theme: ThemeType;
7
- };
8
- type ThemeProps = {
7
+ }>> & string;
8
+ export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
9
+ $checked: boolean;
10
+ $disabled: boolean;
11
+ $hasError: boolean;
9
12
  theme: ThemeType;
10
- };
11
- export declare const CheckWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThemeProps>> & string;
12
- export declare const Check: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ThemeProps>> & string;
13
- export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledLabelProps>> & string;
13
+ }>> & string;
14
14
  export declare const SelectedBorder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
15
- export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, ThemeProps>> & string;
16
- export {};
15
+ export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
16
+ theme: ThemeType;
17
+ }>> & string;
@@ -1,14 +1,16 @@
1
1
  import { type ThemeType } from "../../types";
2
- type ThemeProps = {
3
- theme: ThemeType;
4
- };
5
2
  export declare const Fieldset: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
6
3
  export declare const TextAsLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & {
7
4
  ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
8
- }, ThemeProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
9
- export declare const DateTextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThemeProps>> & string;
10
- export declare const LargeDateTextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & ThemeProps, "ref"> & {
5
+ }, {
6
+ theme: ThemeType;
7
+ }>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
8
+ export declare const DateTextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
9
+ theme: ThemeType;
10
+ }>> & string;
11
+ export declare const LargeDateTextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & {
12
+ theme: ThemeType;
13
+ }, "ref"> & {
11
14
  ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
12
15
  }, never>> & string;
13
16
  export declare const ErrorTextWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
14
- export {};
@@ -1,6 +1,5 @@
1
1
  import React, { type ReactNode } from "react";
2
- type DividerProps = {
2
+ export declare const Divider: ({ children }: {
3
3
  children?: ReactNode;
4
- };
5
- export declare const Divider: ({ children }: DividerProps) => React.JSX.Element;
4
+ }) => React.JSX.Element;
6
5
  export default Divider;
@@ -13,5 +13,5 @@ export type IconFaProps = {
13
13
  *
14
14
  * This is an svg icon wrapper where a font awesome icon definition can be passed in a long with colour and size
15
15
  * */
16
- export declare function IconFa({ faIcon, color, size, ...rest }: IconFaProps): React.JSX.Element;
16
+ export declare function IconFa({ faIcon, color, size }: IconFaProps): React.JSX.Element;
17
17
  export default IconFa;
@@ -1,8 +1,7 @@
1
1
  import { type ThemeType } from "../../types";
2
- type StyledIconProp = {
2
+ export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGSVGElement>, {
3
3
  theme: ThemeType;
4
- color?: string;
5
- size: string;
6
- };
7
- export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGSVGElement>, StyledIconProp>> & string;
4
+ $color?: string;
5
+ $size: string;
6
+ }>> & string;
8
7
  export default StyledIcon;
@@ -2,10 +2,10 @@ import { type ThemeType } from "../../types";
2
2
  export declare const PagerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
3
3
  export declare const PagerList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
4
4
  export declare const PagerLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
5
- $active?: boolean;
6
5
  name?: string;
7
- disabled?: boolean;
8
6
  theme: ThemeType;
7
+ $active?: boolean;
8
+ $disabled?: boolean;
9
9
  }>> & string;
10
10
  export declare const PagerItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
11
11
  theme: ThemeType;
@@ -21,11 +21,11 @@ export declare const EmptyCircle: import("styled-components/dist/types").IStyled
21
21
  theme: ThemeType;
22
22
  }>> & string;
23
23
  export declare const FullCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, {
24
- $strokeDashoffsetInit: number;
25
24
  strokeDashoffset: number;
25
+ theme: ThemeType;
26
+ $strokeDashoffsetInit: number;
26
27
  $barColor?: string;
27
28
  $isSecondary?: boolean;
28
- theme: ThemeType;
29
29
  }>> & string;
30
30
  export declare const CircularValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
31
31
  theme: ThemeType;
@@ -7,8 +7,8 @@ export declare const Check: import("styled-components/dist/types").IStyledCompon
7
7
  }>> & string;
8
8
  export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
9
9
  $hasError: boolean;
10
- disabled: boolean;
11
- checked: boolean;
10
+ $disabled: boolean;
11
+ $checked: boolean;
12
12
  theme: ThemeType;
13
13
  }>> & string;
14
14
  export declare const VerticalAlign: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
@@ -2,7 +2,7 @@ import { type ThemeType } from "../../types";
2
2
  type StyledTextareaProps = {
3
3
  $hasError: boolean;
4
4
  $lineCount: number;
5
- resize: "both" | "vertical" | "horizontal" | "none";
5
+ $resize: "both" | "vertical" | "horizontal" | "none";
6
6
  theme: ThemeType;
7
7
  };
8
8
  declare const StyledTextArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, StyledTextareaProps>> & string;
@@ -1,8 +1,7 @@
1
1
  import React from "react";
2
2
  import { type ThemeType } from "../types";
3
- type Props = {
3
+ export declare function ThemeCheatSheet({ theme }: {
4
4
  theme?: ThemeType;
5
- };
6
- export declare function ThemeCheatSheet({ theme }: Props): React.JSX.Element;
5
+ }): React.JSX.Element;
7
6
  declare const _default: React.ForwardRefExoticComponent<import("styled-components").ExecutionProps & React.RefAttributes<typeof ThemeCheatSheet>> & {};
8
7
  export default _default;
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sources":["../../../../src/components/Avatar/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype AvatarStyledProps = {\n $size?: string;\n theme: ThemeType;\n};\n\nexport const StyledAvatar = styled.img<AvatarStyledProps>`\n box-sizing: border-box;\n border-radius: 50%;\n height: ${({ $size }) => $size};\n object-fit: cover;\n width: ${({ $size }) => $size};\n border-style: solid;\n border-width: 2px;\n border-color: ${({ theme }: AvatarStyledProps) => theme.colors.avatarBorder};\n`;\n\nexport default StyledAvatar;\n"],"names":["StyledAvatar","styled","img","templateObject_1","__makeTemplateObject","_a","$size","theme","colors","avatarBorder"],"mappings":"iHAQa,MAAAA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,iEAAA,qCAAA,oEAAA,OAAA,CAAmB,iEAGzB,qCAED,oEAG8C,UALjE,SAACC,GAAc,OAAPA,EAAAC,KAAO,IAEhB,SAACD,GAAc,OAAPA,EAAAC,KAAO,IAGR,SAACD,GAAiC,OAA1BA,EAAAE,MAAgCC,OAAOC,YAAb"}
1
+ {"version":3,"file":"styles.js","sources":["../../../../src/components/Avatar/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const StyledAvatar = styled.img<{\n $size?: string;\n theme: ThemeType;\n}>`\n box-sizing: border-box;\n border-radius: 50%;\n height: ${({ $size }) => $size};\n object-fit: cover;\n width: ${({ $size }) => $size};\n border-style: solid;\n border-width: 2px;\n border-color: ${({ theme }) => theme.colors.avatarBorder};\n`;\n\nexport default StyledAvatar;\n"],"names":["StyledAvatar","styled","img","templateObject_1","__makeTemplateObject","_a","$size","theme","colors","avatarBorder"],"mappings":"iHAGa,MAAAA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,iEAAA,qCAAA,oEAAA,OAAA,CAGpC,iEAG8B,qCAED,oEAG2B,UAL9C,SAACC,GAAc,OAAPA,EAAAC,KAAO,IAEhB,SAACD,GAAc,OAAPA,EAAAC,KAAO,IAGR,SAACD,GAAc,OAAPA,EAAAE,MAAaC,OAAOC,YAAb"}
@@ -1,2 +1,2 @@
1
- import{__rest as o,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import e from"react";import{useTheme as t}from"styled-components";import{crukTheme as s}from"../../themes/cruk.js";import{StyledBadge as l}from"./styles.js";function i(i){var m=i.children,d=i.size,n=void 0===d?"xs":d,c=i.backgroundColor,C=i.borderColor,a=i.textColor,b=o(i,["children","size","backgroundColor","borderColor","textColor"]),f=t(),p=r(r({},s),f);return e.createElement(l,r({theme:p,$isText:"string"==typeof m,$size:n,$backgroundColor:c,$borderColor:C,$textColor:a},b),m)}export{i as Badge,i as default};
1
+ import{__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as t}from"styled-components";import{crukTheme as e}from"../../themes/cruk.js";import{StyledBadge as i}from"./styles.js";import{themeColorOrString as s}from"../../utils/themeUtils.js";function m(m){var l=m.children,n=m.size,d=void 0===n?"xs":n,a=m.backgroundColor,p=void 0===a?"primary":a,f=m.borderColor,c=void 0===f?"transparent":f,u=m.textColor,b=void 0===u?"textOnPrimary":u,x=t(),C=o(o({},e),x),v="string"==typeof l;return r.createElement(i,{theme:C,$isText:v,$size:d,$backgroundColor:s(p,C),$borderColor:s(c,C),$textColor:s(b,C)},l)}export{m as Badge,m as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type ReactNode } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { type SpaceType } from \"../../types\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StyledBadge } from \"./styles\";\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> & {\n /** background colour of badge */\n backgroundColor?: string;\n /** border colour of badge */\n borderColor?: string;\n /** text colour of badge */\n textColor?: string;\n /** size of badge */\n size?: SpaceType;\n /** contents of badge */\n children?: ReactNode;\n};\n\n/**\n * Displays a numeric or icon indicator. You can use the icon prop to\nindicate the importance of the badge to the user.\n\nNote that depending on how they are used, badges may be confusing for users\nof screen readers and similar assistive technologies. While the styling of\nbadges provides a visual cue as to their purpose, these users will simply\nbe presented with the content of the badge. Depending on the specific\nsituation, these badges may seem like random additional words or numbers\nat the end of a sentence, link, or button. Unless the context is clear,\nconsider including additional context with a visually hidden piece of\nadditional text.\n */\nexport function Badge({\n children,\n size = \"xs\",\n backgroundColor,\n borderColor,\n textColor,\n ...rest\n}: BadgeProps) {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n return (\n <StyledBadge\n theme={theme}\n $isText={typeof children === \"string\"}\n $size={size}\n $backgroundColor={backgroundColor}\n $borderColor={borderColor}\n $textColor={textColor}\n {...rest}\n >\n {children}\n </StyledBadge>\n );\n}\n\nexport default Badge;\n"],"names":["Badge","_a","children","_b","size","backgroundColor","borderColor","textColor","rest","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","React","createElement","StyledBadge","$isText","$size","$backgroundColor","$borderColor","$textColor"],"mappings":"6OAkCM,SAAUA,EAAMC,GACpB,IAAAC,aACAC,EAAAF,EAAAG,KAAAA,OAAI,IAAAD,EAAG,KAAIA,EACXE,oBACAC,gBACAC,cACGC,EANiBC,EAAAR,EAAA,CAAA,WAAA,OAAA,kBAAA,cAAA,cAQdS,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAEL,OACEK,EAACC,cAAAC,EACCJ,EAAA,CAAAD,MAAOA,EACEM,QAAoB,iBAAbhB,EAAqBiB,MAC9Bf,EACWgB,iBAAAf,EACJgB,aAAAf,EACFgB,WAAAf,GACRC,GAEHN,EAGP"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { type SpaceType } from \"../../types\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StyledBadge } from \"./styles\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\n\nexport type BadgeProps = {\n /** background colour of badge */\n backgroundColor?: string;\n /** border colour of badge */\n borderColor?: string;\n /** text colour of badge */\n textColor?: string;\n /** size of badge */\n size?: SpaceType;\n /** contents of badge */\n children?: ReactNode;\n};\n\n/**\n * Displays a numeric or icon indicator. You can use the icon prop to\nindicate the importance of the badge to the user.\n\nNote that depending on how they are used, badges may be confusing for users\nof screen readers and similar assistive technologies. While the styling of\nbadges provides a visual cue as to their purpose, these users will simply\nbe presented with the content of the badge. Depending on the specific\nsituation, these badges may seem like random additional words or numbers\nat the end of a sentence, link, or button. Unless the context is clear,\nconsider including additional context with a visually hidden piece of\nadditional text.\n */\nexport function Badge({\n children,\n size = \"xs\",\n backgroundColor = \"primary\",\n borderColor = \"transparent\",\n textColor = \"textOnPrimary\",\n}: BadgeProps) {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n const isText = typeof children === \"string\";\n return (\n <StyledBadge\n theme={theme}\n $isText={isText}\n $size={size}\n $backgroundColor={themeColorOrString(backgroundColor, theme)}\n $borderColor={themeColorOrString(borderColor, theme)}\n $textColor={themeColorOrString(textColor, theme)}\n >\n {children}\n </StyledBadge>\n );\n}\n\nexport default Badge;\n"],"names":["Badge","_a","children","_b","size","_c","backgroundColor","_d","borderColor","_e","textColor","foundTheme","useTheme","theme","__assign","defaultTheme","isText","React","createElement","StyledBadge","$isText","$size","$backgroundColor","themeColorOrString","$borderColor"],"mappings":"gSAmCM,SAAUA,EAAMC,GACpB,IAAAC,EAAQD,EAAAC,SACRC,EAAWF,EAAAG,KAAXA,OAAI,IAAAD,EAAG,KAAIA,EACXE,EAAAJ,EAAAK,gBAAAA,OAAkB,IAAAD,EAAA,UAASA,EAC3BE,EAA2BN,EAAAO,YAA3BA,OAAW,IAAAD,EAAG,cAAaA,EAC3BE,EAAAR,EAAAS,UAAAA,OAAY,IAAAD,EAAA,gBAAeA,EAErBE,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EAA6B,iBAAbd,EACtB,OACEe,EAACC,cAAAC,EACC,CAAAN,MAAOA,EAAKO,QACHJ,EAAMK,MACRjB,EACWkB,iBAAAC,EAAmBjB,EAAiBO,GACxCW,aAAAD,EAAmBf,EAAaK,cAClCU,EAAmBb,EAAWG,IAEzCX,EAGP"}
@@ -1,2 +1,2 @@
1
- import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import r,{css as o}from"styled-components";var e,i,t=r.span(i||(i=n(["\n border-width: 1px;\n border-style: solid;\n background-color: ",";\n color: ",";\n border-color: ",";\n text-align: center;\n border-radius: 1.5rem;\n font-size: ",";\n line-height: 1rem;\n padding: ",";\n display: inline-block;\n min-width: ",";\n\n ","\n"],["\n border-width: 1px;\n border-style: solid;\n background-color: ",";\n color: ",";\n border-color: ",";\n text-align: center;\n border-radius: 1.5rem;\n font-size: ",";\n line-height: 1rem;\n padding: ",";\n display: inline-block;\n min-width: ",";\n\n ","\n"])),(function(n){var r=n.theme.colors,o=n.$backgroundColor;return o&&void 0!==r[o]?r[o]:o||r.primary}),(function(n){var r=n.theme.colors,o=n.$textColor;return o&&void 0!==r[o]?r[o]:o||r.textOnPrimary}),(function(n){var r=n.theme.colors,o=n.$borderColor,e=n.$backgroundColor;return o&&void 0!==r[o]?r[o]:o||(e&&void 0!==r[e]?r[e]:e||r.primary)}),(function(n){return n.theme.fontSizes.m}),(function(n){return n.theme.spacing.xxs}),(function(n){var r=n.$size,o=n.theme,e=o.spacing,i=o.spacing.xs;return"calc(".concat(e[r]," + ").concat(i,")")}),(function(r){var i=r.$isText,t=r.theme,c=r.$size;return!i&&o(e||(e=n(["\n padding: 0;\n border-radius: 50%;\n height: ",";\n width: ",";\n line-height: ",";\n svg {\n height: ",";\n }\n "],["\n padding: 0;\n border-radius: 50%;\n height: ",";\n width: ",";\n line-height: ",";\n svg {\n height: ",";\n }\n "])),"calc(".concat(t.spacing[c]," + ").concat(t.spacing.xs,")"),"calc(".concat(t.spacing[c]," + ").concat(t.spacing.xs,")"),"calc(".concat(t.spacing[c]," + ").concat(t.spacing.xs,")"),"calc(".concat(t.spacing[c]))}));export{t as StyledBadge,t as default};
1
+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";var e,r=t.span(e||(e=n(["\n display: inline-block;\n border-width: 1px;\n border-style: solid;\n text-align: center;\n font-size: ",";\n padding: ",";\n border-radius: ",";\n height: ",";\n width: ",";\n line-height: ",";\n min-width: ",";\n\n background-color: ",";\n border-color: ",";\n color: ",";\n"],["\n display: inline-block;\n border-width: 1px;\n border-style: solid;\n text-align: center;\n font-size: ",";\n padding: ",";\n border-radius: ",";\n height: ",";\n width: ",";\n line-height: ",";\n min-width: ",";\n\n background-color: ",";\n border-color: ",";\n color: ",";\n"])),(function(n){return n.theme.fontSizes.m}),(function(n){var t=n.theme;return n.$isText?t.spacing.xxs:0}),(function(n){return n.$isText?" 1.5rem":"50%"}),(function(n){var t=n.$isText,e=n.$size,r=n.theme;return t?"auto":"calc(".concat(r.spacing[e]," + ").concat(r.spacing.xs,")")}),(function(n){var t=n.$isText,e=n.$size,r=n.theme;return t?"auto":"calc(".concat(r.spacing[e]," + ").concat(r.spacing.xs,")")}),(function(n){var t=n.$isText,e=n.$size,r=n.theme;return t?" 1rem":"calc(".concat(r.spacing[e]," + ").concat(r.spacing.xs,")")}),(function(n){var t=n.$size,e=n.theme;return"calc(".concat(e.spacing[t]," + ").concat(e.spacing.xs,")")}),(function(n){return n.$backgroundColor}),(function(n){return n.$borderColor}),(function(n){return n.$textColor}));export{r as StyledBadge,r as default};
2
2
  //# sourceMappingURL=styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sources":["../../../../src/components/Badge/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ColorKeyType, type SpaceType, type ThemeType } from \"../../types\";\n\ntype StyleBadgeProps = {\n $backgroundColor?: string;\n $borderColor?: string;\n $textColor?: string;\n $isText?: boolean;\n $size: SpaceType;\n theme: ThemeType;\n};\n\nexport const StyledBadge = styled.span<StyleBadgeProps>`\n border-width: 1px;\n border-style: solid;\n background-color: ${({\n theme: { colors },\n $backgroundColor,\n }: StyleBadgeProps) =>\n $backgroundColor &&\n typeof colors[$backgroundColor as ColorKeyType] !== \"undefined\"\n ? colors[$backgroundColor as ColorKeyType]\n : $backgroundColor || colors.primary};\n color: ${({ theme: { colors }, $textColor }: StyleBadgeProps) =>\n $textColor && typeof colors[$textColor as ColorKeyType] !== \"undefined\"\n ? colors[$textColor as ColorKeyType]\n : $textColor || colors.textOnPrimary};\n border-color: ${({\n theme: { colors },\n $borderColor,\n $backgroundColor,\n }: StyleBadgeProps) =>\n $borderColor && typeof colors[$borderColor as ColorKeyType] !== \"undefined\"\n ? colors[$borderColor as ColorKeyType]\n : $borderColor ||\n ($backgroundColor &&\n typeof colors[$backgroundColor as ColorKeyType] !== \"undefined\"\n ? colors[$backgroundColor as ColorKeyType]\n : $backgroundColor || colors.primary)};\n text-align: center;\n border-radius: 1.5rem;\n font-size: ${({ theme }: StyleBadgeProps) => theme.fontSizes.m};\n line-height: 1rem;\n padding: ${({\n theme: {\n spacing: { xxs },\n },\n }: StyleBadgeProps) => xxs};\n display: inline-block;\n min-width: ${({\n $size,\n theme: {\n spacing,\n spacing: { xs },\n },\n }: StyleBadgeProps) => `calc(${spacing[$size]} + ${xs})`};\n\n ${({ $isText, theme, $size }: StyleBadgeProps) =>\n !$isText &&\n css`\n padding: 0;\n border-radius: 50%;\n height: ${`calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n width: ${`calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n line-height: ${`calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n svg {\n height: ${`calc(${theme.spacing[$size]}`};\n }\n `}\n`;\n\nexport default StyledBadge;\n"],"names":["StyledBadge","styled","span","templateObject_2","__makeTemplateObject","_a","colors","theme","$backgroundColor","primary","$textColor","textOnPrimary","$borderColor","fontSizes","m","spacing","xxs","$size","_b","xs","concat","$isText","css"],"mappings":"2HAaa,QAAAA,EAAcC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,uEAAA,eAAA,sBAAA,oEAAA,uCAAA,6CAAA,UAAA,MAAA,CAAiB,uEAUb,eAIA,sBAYK,oEAGiB,uCAMpC,6CAQ8B,UAarD,SArDiB,SAACC,OACVC,EAAMD,EAAAE,MAAAD,OACfE,EAAgBH,EAAAG,iBAEhB,OAAAA,QACoD,IAA7CF,EAAOE,GACVF,EAAOE,GACPA,GAAoBF,EAAOG,OAH/B,IAIO,SAACJ,OAAWC,EAAMD,EAAAE,MAAAD,OAAII,EAAUL,EAAAK,WACvC,OAAAA,QAA4D,IAAvCJ,EAAOI,GACxBJ,EAAOI,GACPA,GAAcJ,EAAOK,aAFzB,IAGc,SAACN,GACN,IAAAC,iBACTM,EAAYP,EAAAO,aACZJ,EAAgBH,EAAAG,iBAEhB,OAAAI,QAAgE,IAAzCN,EAAOM,GAC1BN,EAAOM,GACPA,IACCJ,QACmD,IAA7CF,EAAOE,GACVF,EAAOE,GACPA,GAAoBF,EAAOG,QANnC,IASW,SAACJ,GAA+B,OAAxBA,EAAAE,MAA8BM,UAAUC,CAAhB,IAElC,SAACT,GAIW,OAFLA,EAAAE,MAAAQ,QAAAC,GAEK,IAEV,SAACX,OACZY,EAAKZ,EAAAY,MACLC,EAGCb,EAAAE,MAFCQ,EAAOG,EAAAH,QACII,EAAED,EAAAH,QAAAI,GAEM,MAAA,eAAQJ,EAAQE,GAAM,OAAAG,OAAMD,EAAK,IAAjC,IAErB,SAACd,GAAE,IAAAgB,YAASd,EAAKF,EAAAE,MAAEU,EAAKZ,EAAAY,MACxB,OAACI,GACDC,gLAAG,iEAG8D,mBACD,yBACM,mCAE1B,sBAJhC,QAAAF,OAAQb,EAAMQ,QAAQE,iBAAYV,EAAMQ,QAAQI,GAAE,KACnD,QAAAC,OAAQb,EAAMQ,QAAQE,GAAM,OAAAG,OAAMb,EAAMQ,QAAQI,GAAK,KAC/C,QAAQC,OAAAb,EAAMQ,QAAQE,GAAY,OAAAG,OAAAb,EAAMQ,QAAQI,QAEnD,QAAAC,OAAQb,EAAMQ,QAAQE,IARpC"}
1
+ {"version":3,"file":"styles.js","sources":["../../../../src/components/Badge/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { type SpaceType, type ThemeType } from \"../../types\";\n\nexport const StyledBadge = styled.span<{\n $backgroundColor: string;\n $borderColor: string;\n $textColor: string;\n $isText: boolean;\n $size: SpaceType;\n theme: ThemeType;\n}>`\n display: inline-block;\n border-width: 1px;\n border-style: solid;\n text-align: center;\n font-size: ${({ theme }) => theme.fontSizes.m};\n padding: ${({ theme, $isText }) => ($isText ? theme.spacing.xxs : 0)};\n border-radius: ${({ $isText }) => ($isText ? ` 1.5rem` : \"50%\")};\n height: ${({ $isText, $size, theme }) =>\n $isText ? `auto` : `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n width: ${({ $isText, $size, theme }) =>\n $isText ? `auto` : `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n line-height: ${({ $isText, $size, theme }) =>\n $isText ? ` 1rem` : `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n min-width: ${({ $size, theme }) =>\n `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n\n background-color: ${({ $backgroundColor }) => $backgroundColor};\n border-color: ${({ $borderColor }) => $borderColor};\n color: ${({ $textColor }) => $textColor};\n`;\n\nexport default StyledBadge;\n"],"names":["StyledBadge","styled","span","templateObject_1","__makeTemplateObject","_a","theme","fontSizes","m","$isText","spacing","xxs","$size","concat","xs","$backgroundColor","$borderColor","$textColor"],"mappings":"iHAIO,MAAMA,EAAcC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,iHAAA,iBAAA,uBAAA,gBAAA,eAAA,qBAAA,mBAAA,4BAAA,sBAAA,eAAA,OAAA,CAOpC,iHAK6C,iBACuB,uBACL,gBAEW,eAEA,qBAEC,mBAEpB,4BAEO,sBACZ,eACX,UAd1B,SAACC,GAAc,OAAPA,EAAAC,MAAaC,UAAUC,CAAhB,IACjB,SAACH,OAAEC,EAAKD,EAAAC,MAAgB,OAAPD,EAAAI,QAAkBH,EAAMI,QAAQC,IAAM,CAA/B,IAClB,SAACN,GAAgB,OAAPA,EAAAI,QAAkB,UAAY,KAAvB,IACxB,SAACJ,GAAE,IAAAI,YAASG,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MAChC,OAAAG,EAAU,OAAS,QAAQI,OAAAP,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAK,IAAxE,IACO,SAACT,GAAE,IAAAI,YAASG,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MAC/B,OAAAG,EAAU,OAAS,QAAQI,OAAAP,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAK,IAAxE,IACa,SAACT,GAAE,IAAAI,YAASG,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MACrC,OAAAG,EAAU,QAAU,QAAQI,OAAAP,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAK,IAAzE,IACW,SAACT,OAAEO,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MAC1B,MAAA,QAAQO,OAAAP,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAK,IAArD,IAEkB,SAACT,GAAyB,OAAPA,EAAAU,gBAAO,IAC9B,SAACV,GAAqB,OAAPA,EAAAW,YAAO,IAC7B,SAACX,GAAmB,OAAPA,EAAAY,UAAO"}
@@ -1,2 +1,2 @@
1
- import{__rest as r,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import e,{forwardRef as s}from"react";import{useTheme as t}from"styled-components";import{crukTheme as m}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as c}from"../Spacing/index.js";import{StyledBox as n}from"./styles.js";var i=s((function(s,i){var l=r(s,[]),a=l.children,d=l.backgroundColor,f=l.css,p=r(l,["children","backgroundColor","css"]),u=t(),b=o(o({},m),u),g=c(p);return e.createElement(n,o({theme:b,$css:f,$backgroundColor:d},g,{ref:i}),a)}));export{i as Box,i as default};
1
+ import{__rest as r,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import e,{forwardRef as t}from"react";import{useTheme as m}from"styled-components";import{crukTheme as n}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as s}from"../Spacing/index.js";import{StyledBox as i}from"./styles.js";var l=t((function(t,l){var c=r(t,[]),a=c.children,d=c.backgroundColor,f=r(c,["children","backgroundColor"]),p=m(),u=o(o({},n),p),b=s(f);return e.createElement(i,o({theme:u,$backgroundColor:d},b,{ref:l}),a)}));export{l as Box,l as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/Box/index.tsx"],"sourcesContent":["import React, {\n type HTMLAttributes,\n type Ref,\n forwardRef,\n type ReactNode,\n type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n spacingPropsToSpacingPropsInternal,\n type SpacingProps,\n} from \"../Spacing\";\nimport { StyledBox } from \"./styles\";\n\nexport type BoxProps = SpacingProps &\n HTMLAttributes<HTMLElement> & {\n /** background color of box, this will add default padding */\n backgroundColor?: string;\n css?: string;\n ref?: Ref<HTMLDivElement>;\n children?: ReactNode;\n /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n as?: ElementType;\n };\n\n/**\n * Box is used to wrap other components to add margin and padding.\n * The values will be in the t-shirt sizes specified in the theme sizes.\n * The more specific the the target the higher priority the css will have.\n * For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n */\nexport const Box = forwardRef(\n ({ ...props }: BoxProps, ref?: Ref<HTMLDivElement>) => {\n const { children, backgroundColor, css, ...rest } = props;\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const restWithInternalSpacingProps =\n spacingPropsToSpacingPropsInternal(rest);\n\n return (\n <StyledBox\n theme={theme}\n $css={css}\n $backgroundColor={backgroundColor}\n {...restWithInternalSpacingProps}\n ref={ref}\n >\n {children}\n </StyledBox>\n );\n },\n);\n\nexport default Box;\n"],"names":["Box","forwardRef","_a","ref","props","__rest","children","backgroundColor","css","rest","foundTheme","useTheme","theme","__assign","defaultTheme","restWithInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","StyledBox","$backgroundColor"],"mappings":"yUAkCaA,EAAMC,GACjB,SAACC,EAAwBC,OAAnBC,EAAKC,EAAAH,EAAV,IACSI,EAA4CF,EAAKE,SAAvCC,EAAkCH,EAAnBG,gBAAEC,EAAiBJ,MAATK,IAASL,EAA9C,CAA2C,WAAA,kBAAA,QAC3CM,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EACJC,EAAmCP,GAErC,OACEQ,gBAACC,EAASL,EAAA,CACRD,MAAOA,OACDJ,EAAGW,iBACSZ,GACdQ,GACJZ,IAAKA,IAEJG,EAGP"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/Box/index.tsx"],"sourcesContent":["import React, {\n type HTMLAttributes,\n type Ref,\n forwardRef,\n type ReactNode,\n type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n spacingPropsToSpacingPropsInternal,\n type SpacingProps,\n} from \"../Spacing\";\nimport { StyledBox } from \"./styles\";\n\nexport type BoxProps = SpacingProps &\n HTMLAttributes<HTMLElement> & {\n /** background color of box, this will add default padding */\n backgroundColor?: string;\n ref?: Ref<HTMLDivElement>;\n children?: ReactNode;\n /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n as?: ElementType;\n };\n\n/**\n * Box is used to wrap other components to add margin and padding.\n * The values will be in the t-shirt sizes specified in the theme sizes.\n * The more specific the the target the higher priority the css will have.\n * For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n */\nexport const Box = forwardRef(\n ({ ...props }: BoxProps, ref?: Ref<HTMLDivElement>) => {\n const { children, backgroundColor, ...rest } = props;\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const restWithInternalSpacingProps =\n spacingPropsToSpacingPropsInternal(rest);\n\n return (\n <StyledBox\n theme={theme}\n $backgroundColor={backgroundColor}\n {...restWithInternalSpacingProps}\n ref={ref}\n >\n {children}\n </StyledBox>\n );\n },\n);\n\nexport default Box;\n"],"names":["Box","forwardRef","_a","ref","props","__rest","children","backgroundColor","rest","foundTheme","useTheme","theme","__assign","defaultTheme","restWithInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","StyledBox","$backgroundColor"],"mappings":"yUAiCaA,EAAMC,GACjB,SAACC,EAAwBC,OAAnBC,EAAKC,EAAAH,EAAV,IACSI,EAAuCF,EAA/BE,SAAEC,EAA6BH,EAAdG,gBAAKC,EAASH,EAAAD,EAAzC,CAAA,WAAA,oBACAK,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EACJC,EAAmCP,GAErC,OACEQ,EAACC,cAAAC,KACCP,MAAOA,EACWQ,iBAAAZ,GACdO,EAA4B,CAChCX,IAAKA,IAEJG,EAGP"}
@@ -1,2 +1,2 @@
1
- import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as r}from"styled-components";import{spacing as t}from"../Spacing/index.js";var c,i,a=o.div(i||(i=n(["\n background-color: ",";\n padding: ",";\n margin: 0 0 "," 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n background-color: ",";\n\n ","\n ","\n"],["\n background-color: ",";\n padding: ",";\n margin: 0 0 "," 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n background-color: ",";\n\n ","\n ","\n"])),(function(n){return n.theme.colors.backgroundLight}),(function(n){var o=n.theme;return n.$backgroundColor?o.spacing.s:0}),(function(n){return n.theme.spacing.m}),(function(n){var o=n.theme.colors,r=n.$backgroundColor;return r&&void 0!==o[r]?o[r]:r||"transparent"}),(function(o){return o.$css&&r(c||(c=n(["\n ","\n "],["\n ","\n "])),o.$css)}),(function(n){return t(n,n.theme)}));export{a as StyledBox,a as default};
1
+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";import{spacing as r}from"../Spacing/index.js";var t,a=o.div(t||(t=n(["\n background-color: ",";\n padding: ",";\n margin: 0 0 "," 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n background-color: ",";\n\n ","\n"],["\n background-color: ",";\n padding: ",";\n margin: 0 0 "," 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n background-color: ",";\n\n ","\n"])),(function(n){return n.theme.colors.backgroundLight}),(function(n){var o=n.theme;return n.$backgroundColor?o.spacing.s:0}),(function(n){return n.theme.spacing.m}),(function(n){var o=n.theme,r=n.$backgroundColor;return r&&void 0!==o.colors[r]?o.colors[r]:r||"transparent"}),(function(n){return r(n,n.theme)}));export{a as StyledBox,a as default};
2
2
  //# sourceMappingURL=styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sources":["../../../../src/components/Box/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } from \"../Spacing\";\nimport { type ColorKeyType, type ThemeType } from \"../../types\";\n\ntype StyledBoxProps = SpacingPropsInternal & {\n $backgroundColor?: string;\n $css?: string;\n theme: ThemeType;\n};\n\nexport const StyledBox = styled.div<StyledBoxProps>`\n background-color: ${({ theme }) => theme.colors.backgroundLight};\n padding: ${({ theme, $backgroundColor }) =>\n $backgroundColor ? theme.spacing.s : 0};\n margin: 0 0 ${({ theme }) => theme.spacing.m} 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n background-color: ${({ theme: { colors }, $backgroundColor }) =>\n $backgroundColor &&\n typeof colors[$backgroundColor as ColorKeyType] !== \"undefined\"\n ? colors[$backgroundColor as ColorKeyType]\n : $backgroundColor || \"transparent\"};\n\n ${(props: StyledBoxProps) =>\n props.$css &&\n css`\n ${props.$css}\n `}\n ${(props) => spacing(props, props.theme as ThemeType)}\n`;\n\nexport default StyledBox;\n"],"names":["StyledBox","styled","div","templateObject_2","__makeTemplateObject","_a","theme","colors","backgroundLight","$backgroundColor","spacing","s","m","props","$css","css","templateObject_1"],"mappings":"iLAWaA,EAAYC,EAAOC,IAAmBC,IAAAA,EAAAC,EAAA,CAAA,yBAAA,iBAAA,oBAAA,8EAAA,UAAA,OAAA,MAAA,CAAA,yBACc,iBAEvB,oBACI,8EAUL,UAMpC,OACkD,SApBjC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,IACxB,SAACH,OAAEC,EAAKD,EAAAC,MACjB,OADmCD,EAAAI,iBAChBH,EAAMI,QAAQC,EAAI,CAArC,IACY,SAACN,GAAc,OAAPA,EAAAC,MAAaI,QAAQE,CAAd,IAMT,SAACP,OAAWE,EAAMF,EAAAC,MAAAC,OAAIE,EAAgBJ,EAAAI,iBACxD,OAAAA,QACoD,IAA7CF,EAAOE,GACVF,EAAOE,GACPA,GAAoB,aAHxB,IAKA,SAACI,GACD,OAAAA,EAAMC,MACNC,EAAGC,IAAAA,EAAAZ,EAAA,CAAA,WAAA,UAAA,CAAA,WACW,YAAVS,EAAMC,KAFV,IAIA,SAACD,GAAU,OAAAH,EAAQG,EAAOA,EAAMP"}
1
+ {"version":3,"file":"styles.js","sources":["../../../../src/components/Box/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } from \"../Spacing\";\nimport { type ColorKeyType, type ThemeType } from \"../../types\";\n\ntype StyledBoxProps = SpacingPropsInternal & {\n $backgroundColor?: string;\n $css?: string;\n theme: ThemeType;\n};\n\nexport const StyledBox = styled.div<StyledBoxProps>`\n background-color: ${({ theme }) => theme.colors.backgroundLight};\n padding: ${({ theme, $backgroundColor }) =>\n $backgroundColor ? theme.spacing.s : 0};\n margin: 0 0 ${({ theme }) => theme.spacing.m} 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n background-color: ${({ theme, $backgroundColor }) =>\n $backgroundColor &&\n typeof theme.colors[$backgroundColor as ColorKeyType] !== \"undefined\"\n ? theme.colors[$backgroundColor as ColorKeyType]\n : $backgroundColor || \"transparent\"};\n\n ${(props) => spacing(props, props.theme as ThemeType)}\n`;\n\nexport default StyledBox;\n"],"names":["StyledBox","styled","div","_a","theme","colors","backgroundLight","$backgroundColor","spacing","s","m","props"],"mappings":"qKAWaA,EAAYC,EAAOC,0KAAmB,yBACc,iBAEvB,oBACI,8EAUL,UAEc,SAfjC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,IACxB,SAACH,OAAEC,EAAKD,EAAAC,MACjB,OADmCD,EAAAI,iBAChBH,EAAMI,QAAQC,EAAI,CAArC,IACY,SAACN,GAAc,OAAPA,EAAAC,MAAaI,QAAQE,CAAd,IAMT,SAACP,OAAEC,EAAKD,EAAAC,MAAEG,EAAgBJ,EAAAI,iBAC5C,OAAAA,QAC0D,IAAnDH,EAAMC,OAAOE,GAChBH,EAAMC,OAAOE,GACbA,GAAoB,aAHxB,IAKA,SAACI,GAAU,OAAAH,EAAQG,EAAOA,EAAMP"}
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sources":["../../../../src/components/Button/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType, type ButtonAppearanceType } from \"../../types\";\n\nconst BUTTON_HEIGHT = \"3rem\";\nconst BUTTON_HEIGHT_LARGE = \"4rem\";\n\nexport const Spacer = styled.span<{ theme: ThemeType }>`\n margin-left: ${({ theme }) => theme.spacing.xxs};\n &:first-of-type {\n margin-left: 0;\n }\n`;\n\ntype StyledButtonProps = {\n $isIconButton: boolean;\n $appearance?: ButtonAppearanceType;\n $full?: boolean;\n theme: ThemeType;\n href?: string;\n $size?: \"m\" | \"l\";\n $css?: string;\n};\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n box-sizing: border-box;\n min-height: ${BUTTON_HEIGHT};\n height: min-content;\n display: inline-block;\n vertical-align: middle;\n\n padding: ${({ theme, $isIconButton }) =>\n $isIconButton\n ? \"0\"\n : `calc( (${BUTTON_HEIGHT} - ( ${theme.button.buttonBorderThickness} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.button.horizontalPadding}`};\n width: ${({ $isIconButton }) =>\n $isIconButton ? `${BUTTON_HEIGHT}` : \"auto\"};\n min-width: ${({ $isIconButton }) =>\n $isIconButton ? `${BUTTON_HEIGHT}` : \"auto\"};\n\n border-radius: ${({ theme }) => theme.button.borderRadius};\n border-style: solid;\n border-width: ${({ theme }) => theme.button.buttonBorderThickness};\n\n transition:\n color 0.2s ease,\n background-color 0.2s ease,\n border-color 0.2s ease;\n\n cursor: pointer;\n font-size: ${({\n theme: {\n fontSizes: { m },\n },\n }) => m};\n font-family: ${({\n theme: {\n typography: { fontFamilyButtons },\n },\n }) => fontFamilyButtons};\n font-weight: ${({\n theme: {\n typography: { fontWeightButtons },\n },\n }) => fontWeightButtons};\n text-align: center;\n text-transform: ${({ theme }) => theme.button.textTransform};\n text-decoration: ${({ theme }) => theme.button.textDecoration};\n\n &:focus-visible {\n outline: auto;\n }\n\n ${(props) =>\n props.$appearance === \"primary\" &&\n css`\n background-color: ${props.theme.colors.buttonPrimaryBackground};\n border-color: ${props.theme.colors.buttonPrimaryBorder};\n color: ${props.theme.colors.buttonPrimaryText} !important;\n &:focus,\n &:hover {\n background-color: ${props.theme.colors.buttonPrimaryBackgroundHover};\n border-color: ${props.theme.colors.buttonPrimaryBorderHover};\n color: ${props.theme.colors.buttonPrimaryTextHover} !important;\n }\n &:disabled {\n cursor: not-allowed;\n background-color: ${props.theme.colors.buttonPrimaryDisabledBackground};\n color: ${props.theme.colors.buttonPrimaryDisabledText} !important;\n border-color: ${props.theme.colors.buttonPrimaryDisabledBorder};\n }\n `}\n\n ${(props) =>\n props.$appearance === \"secondary\" &&\n css`\n background-color: ${props.theme.colors.buttonSecondaryBackground};\n border-color: ${props.theme.colors.buttonSecondaryBorder};\n color: ${props.theme.colors.buttonSecondaryText} !important;\n &:focus,\n &:hover {\n background-color: ${props.theme.colors.buttonSecondaryBackgroundHover};\n border-color: ${props.theme.colors.buttonSecondaryBorderHover};\n color: ${props.theme.colors.buttonSecondaryTextHover} !important;\n }\n &:disabled {\n cursor: not-allowed;\n background-color: ${props.theme.colors\n .buttonSecondaryDisabledBackground};\n color: ${props.theme.colors.buttonSecondaryDisabledText} !important;\n border-color: ${props.theme.colors.buttonSecondaryDisabledBorder};\n }\n `}\n\n ${(props) =>\n props.$appearance === \"tertiary\" &&\n css`\n display: inline-block;\n padding: 0;\n border: 0px;\n background-color: rgba(255, 255, 255, 0);\n transition: color 0.2s ease;\n color: ${props.theme.colors.buttonTertiaryText};\n &:focus,\n &:hover {\n color: ${props.theme.colors.buttonTertiaryTextHover};\n }\n &:disabled {\n cursor: not-allowed;\n background-color: transparent;\n color: ${props.theme.colors.buttonTertiaryDisabledText} !important;\n border-color: transparent;\n }\n `}\n \n ${({ theme, $size, $isIconButton }) =>\n $size === \"l\" &&\n css`\n min-height: ${BUTTON_HEIGHT_LARGE};\n border-radius: ${theme.button.borderRadiusLarge};\n padding: ${$isIconButton\n ? \"0\"\n : `calc( (${BUTTON_HEIGHT_LARGE} - ( ${theme.button.buttonBorderThickness} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.m}`};\n min-width: ${$isIconButton ? `${BUTTON_HEIGHT_LARGE}` : \"auto\"};\n height: ${$isIconButton ? `${BUTTON_HEIGHT_LARGE}` : \"min-content\"};\n `}\n\n ${(props) =>\n props.$full &&\n css`\n width: 100%;\n `}\n\n ${(props) =>\n props.$css &&\n css`\n ${props.$css}\n `}\n`;\n"],"names":["BUTTON_HEIGHT","BUTTON_HEIGHT_LARGE","Spacer","styled","span","templateObject_1","__makeTemplateObject","_a","theme","spacing","xxs","StyledButton","button","$isIconButton","concat","buttonBorderThickness","typography","lineHeight","horizontalPadding","borderRadius","fontSizes","m","fontFamilyButtons","fontWeightButtons","textTransform","textDecoration","props","$appearance","css","colors","buttonPrimaryBackground","buttonPrimaryBorder","buttonPrimaryText","buttonPrimaryBackgroundHover","buttonPrimaryBorderHover","buttonPrimaryTextHover","buttonPrimaryDisabledBackground","buttonPrimaryDisabledText","buttonPrimaryDisabledBorder","templateObject_3","buttonSecondaryBackground","buttonSecondaryBorder","buttonSecondaryText","buttonSecondaryBackgroundHover","buttonSecondaryBorderHover","buttonSecondaryTextHover","buttonSecondaryDisabledBackground","buttonSecondaryDisabledText","buttonSecondaryDisabledBorder","templateObject_4","buttonTertiaryText","buttonTertiaryTextHover","buttonTertiaryDisabledText","$size","templateObject_5","borderRadiusLarge","$full","templateObject_6","$css","templateObject_7"],"mappings":"2HAIA,oBAAMA,EAAgB,OAChBC,EAAsB,OAEfC,EAASC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,oBAAA,sDAAA,CAAsB,oBACN,yDAAhC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,QAAQC,GAAd,IAgBnBC,EAAeR,EAAOS,unBAAyB,8CAE/B,gGAQ6H,eAE3G,mBAEA,yBAEY,8CAEQ,8IAY1D,qBAKgB,qBAKA,+CAEoC,yBACE,0DAwB1D,SAqBA,SAqBA,WAYA,SAMA,SAMA,QAnIWZ,GAKH,SAACO,OAAEC,EAAKD,EAAAC,MACjB,OADgCD,EAAAM,cAE5B,IACA,iBAAUb,EAAa,SAAAc,OAAQN,EAAMI,OAAOG,sBAAqB,YAAAD,OAAWN,EAAMQ,WAAWC,WAAU,YAAAH,OAAWN,EAAMI,OAAOM,kBAFnI,IAGO,SAACX,GACR,OADuBA,EAAAM,cACP,GAAAC,OAAGd,GAAkB,MAArC,IACW,SAACO,GACZ,OAD2BA,EAAAM,cACX,GAAAC,OAAGd,GAAkB,MAArC,IAEe,SAACO,GAAc,OAAPA,EAAAC,MAAaI,OAAOO,YAAb,IAEhB,SAACZ,GAAc,OAAPA,EAAAC,MAAaI,OAAOG,qBAAb,IAQlB,SAACR,GAIR,OAFYA,EAAAC,MAAAY,UAAAC,CAEZ,IACS,SAACd,GAIV,OAF6BA,EAAAC,MAAAQ,WAAAM,iBAE7B,IACS,SAACf,GAIV,OAF6BA,EAAAC,MAAAQ,WAAAO,iBAE7B,IAEY,SAAChB,GAAc,OAAPA,EAAAC,MAAaI,OAAOY,aAAb,IACd,SAACjB,GAAc,OAAPA,EAAAC,MAAaI,OAAOa,cAAb,IAMhC,SAACC,GACD,MAAsB,YAAtBA,EAAMC,aACNC,yYAAG,6BAC6D,0BACR,mBACT,4EAGwB,4BACR,qBACT,sGAIoB,qBACjB,uCACS,sBAb5CF,EAAMlB,MAAMqB,OAAOC,wBACvBJ,EAAMlB,MAAMqB,OAAOE,oBAC1BL,EAAMlB,MAAMqB,OAAOG,kBAGNN,EAAMlB,MAAMqB,OAAOI,6BACvBP,EAAMlB,MAAMqB,OAAOK,yBAC1BR,EAAMlB,MAAMqB,OAAOM,uBAIRT,EAAMlB,MAAMqB,OAAOO,gCAC9BV,EAAMlB,MAAMqB,OAAOQ,0BACZX,EAAMlB,MAAMqB,OAAOS,4BAfvC,IAmBA,SAACZ,GACD,MAAsB,cAAtBA,EAAMC,aACNC,EAAGW,IAAAA,EAAAjC,EAAA,CAAA,6BAAA,0BAAA,mBAAA,4EAAA,4BAAA,qBAAA,sGAAA,qBAAA,uCAAA,oBAAA,CAAA,6BAC+D,0BACR,mBACT,4EAGwB,4BACR,qBACT,sGAKhB,qBACmB,uCACS,sBAd9CoB,EAAMlB,MAAMqB,OAAOW,0BACvBd,EAAMlB,MAAMqB,OAAOY,sBAC1Bf,EAAMlB,MAAMqB,OAAOa,oBAGNhB,EAAMlB,MAAMqB,OAAOc,+BACvBjB,EAAMlB,MAAMqB,OAAOe,2BAC1BlB,EAAMlB,MAAMqB,OAAOgB,yBAIRnB,EAAMlB,MAAMqB,OAC7BiB,kCACMpB,EAAMlB,MAAMqB,OAAOkB,4BACZrB,EAAMlB,MAAMqB,OAAOmB,8BAhBvC,IAoBA,SAACtB,GACD,MAAsB,aAAtBA,EAAMC,aACNC,EAAGqB,IAAAA,EAAA3C,EAAA,CAAA,4KAAA,sDAAA,wHAAA,mEAAA,CAAA,4KAM6C,sDAGO,wHAKG,qEAR/CoB,EAAMlB,MAAMqB,OAAOqB,mBAGjBxB,EAAMlB,MAAMqB,OAAOsB,wBAKnBzB,EAAMlB,MAAMqB,OAAOuB,2BAfhC,IAoBA,SAAC7C,GAAE,IAAAC,UAAO6C,EAAK9C,EAAA8C,MAAExC,EAAaN,EAAAM,cAC9B,MAAU,MAAVwC,GACAzB,EAAG0B,IAAAA,EAAAhD,EAAA,CAAA,uBAAA,2BAAA,qBAAA,uBAAA,oBAAA,WAAA,CAAA,uBACgC,2BACc,qBAG8F,uBAC/E,oBACI,aANpDL,EACGO,EAAMI,OAAO2C,kBACnB1C,EACP,IACA,iBAAUZ,EAAmB,SAAAa,OAAQN,EAAMI,OAAOG,sBAAqB,YAAAD,OAAWN,EAAMQ,WAAWC,WAAU,YAAAH,OAAWN,EAAMC,QAAQY,GAC7HR,EAAgB,GAAGC,OAAAb,GAAwB,OAC9CY,EAAgB,GAAGC,OAAAb,GAAwB,cARvD,IAWA,SAACyB,GACD,OAAAA,EAAM8B,OACN5B,EAAG6B,IAAAA,EAAAnD,EAAA,CAAA,8BAAA,CAAA,gCADH,IAKA,SAACoB,GACD,OAAAA,EAAMgC,MACN9B,EAAG+B,IAAAA,EAAArD,EAAA,CAAA,WAAA,UAAA,CAAA,WACW,YAAVoB,EAAMgC,KAFV"}
1
+ {"version":3,"file":"styles.js","sources":["../../../../src/components/Button/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType, type ButtonAppearanceType } from \"../../types\";\n\nconst BUTTON_HEIGHT = \"3rem\";\nconst BUTTON_HEIGHT_LARGE = \"4rem\";\n\nexport const Spacer = styled.span<{ theme: ThemeType }>`\n margin-left: ${({ theme }) => theme.spacing.xxs};\n &:first-of-type {\n margin-left: 0;\n }\n`;\n\nexport const StyledButton = styled.button<{\n theme: ThemeType;\n href?: string;\n $isIconButton: boolean;\n $appearance?: ButtonAppearanceType;\n $full?: boolean;\n $size?: \"m\" | \"l\";\n $css?: string;\n}>`\n box-sizing: border-box;\n min-height: ${BUTTON_HEIGHT};\n height: min-content;\n display: inline-block;\n vertical-align: middle;\n\n padding: ${({ theme, $isIconButton }) =>\n $isIconButton\n ? \"0\"\n : `calc( (${BUTTON_HEIGHT} - ( ${theme.button.buttonBorderThickness} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.button.horizontalPadding}`};\n width: ${({ $isIconButton }) =>\n $isIconButton ? `${BUTTON_HEIGHT}` : \"auto\"};\n min-width: ${({ $isIconButton }) =>\n $isIconButton ? `${BUTTON_HEIGHT}` : \"auto\"};\n\n border-radius: ${({ theme }) => theme.button.borderRadius};\n border-style: solid;\n border-width: ${({ theme }) => theme.button.buttonBorderThickness};\n\n transition:\n color 0.2s ease,\n background-color 0.2s ease,\n border-color 0.2s ease;\n\n cursor: pointer;\n font-size: ${({\n theme: {\n fontSizes: { m },\n },\n }) => m};\n font-family: ${({\n theme: {\n typography: { fontFamilyButtons },\n },\n }) => fontFamilyButtons};\n font-weight: ${({\n theme: {\n typography: { fontWeightButtons },\n },\n }) => fontWeightButtons};\n text-align: center;\n text-transform: ${({ theme }) => theme.button.textTransform};\n text-decoration: ${({ theme }) => theme.button.textDecoration};\n\n &:focus-visible {\n outline: auto;\n }\n\n ${(props) =>\n props.$appearance === \"primary\" &&\n css`\n background-color: ${props.theme.colors.buttonPrimaryBackground};\n border-color: ${props.theme.colors.buttonPrimaryBorder};\n color: ${props.theme.colors.buttonPrimaryText} !important;\n &:focus,\n &:hover {\n background-color: ${props.theme.colors.buttonPrimaryBackgroundHover};\n border-color: ${props.theme.colors.buttonPrimaryBorderHover};\n color: ${props.theme.colors.buttonPrimaryTextHover} !important;\n }\n &:disabled {\n cursor: not-allowed;\n background-color: ${props.theme.colors.buttonPrimaryDisabledBackground};\n color: ${props.theme.colors.buttonPrimaryDisabledText} !important;\n border-color: ${props.theme.colors.buttonPrimaryDisabledBorder};\n }\n `}\n\n ${(props) =>\n props.$appearance === \"secondary\" &&\n css`\n background-color: ${props.theme.colors.buttonSecondaryBackground};\n border-color: ${props.theme.colors.buttonSecondaryBorder};\n color: ${props.theme.colors.buttonSecondaryText} !important;\n &:focus,\n &:hover {\n background-color: ${props.theme.colors.buttonSecondaryBackgroundHover};\n border-color: ${props.theme.colors.buttonSecondaryBorderHover};\n color: ${props.theme.colors.buttonSecondaryTextHover} !important;\n }\n &:disabled {\n cursor: not-allowed;\n background-color: ${props.theme.colors\n .buttonSecondaryDisabledBackground};\n color: ${props.theme.colors.buttonSecondaryDisabledText} !important;\n border-color: ${props.theme.colors.buttonSecondaryDisabledBorder};\n }\n `}\n\n ${(props) =>\n props.$appearance === \"tertiary\" &&\n css`\n display: inline-block;\n padding: 0;\n border: 0px;\n background-color: rgba(255, 255, 255, 0);\n transition: color 0.2s ease;\n color: ${props.theme.colors.buttonTertiaryText};\n &:focus,\n &:hover {\n color: ${props.theme.colors.buttonTertiaryTextHover};\n }\n &:disabled {\n cursor: not-allowed;\n background-color: transparent;\n color: ${props.theme.colors.buttonTertiaryDisabledText} !important;\n border-color: transparent;\n }\n `}\n \n ${({ theme, $size, $isIconButton }) =>\n $size === \"l\" &&\n css`\n min-height: ${BUTTON_HEIGHT_LARGE};\n border-radius: ${theme.button.borderRadiusLarge};\n padding: ${$isIconButton\n ? \"0\"\n : `calc( (${BUTTON_HEIGHT_LARGE} - ( ${theme.button.buttonBorderThickness} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.m}`};\n min-width: ${$isIconButton ? `${BUTTON_HEIGHT_LARGE}` : \"auto\"};\n height: ${$isIconButton ? `${BUTTON_HEIGHT_LARGE}` : \"min-content\"};\n `}\n\n ${(props) =>\n props.$full &&\n css`\n width: 100%;\n `}\n\n ${(props) =>\n props.$css &&\n css`\n ${props.$css}\n `}\n`;\n"],"names":["BUTTON_HEIGHT","BUTTON_HEIGHT_LARGE","Spacer","styled","span","templateObject_1","__makeTemplateObject","_a","theme","spacing","xxs","StyledButton","button","$isIconButton","concat","buttonBorderThickness","typography","lineHeight","horizontalPadding","borderRadius","fontSizes","m","fontFamilyButtons","fontWeightButtons","textTransform","textDecoration","props","$appearance","css","colors","buttonPrimaryBackground","buttonPrimaryBorder","buttonPrimaryText","buttonPrimaryBackgroundHover","buttonPrimaryBorderHover","buttonPrimaryTextHover","buttonPrimaryDisabledBackground","buttonPrimaryDisabledText","buttonPrimaryDisabledBorder","templateObject_3","buttonSecondaryBackground","buttonSecondaryBorder","buttonSecondaryText","buttonSecondaryBackgroundHover","buttonSecondaryBorderHover","buttonSecondaryTextHover","buttonSecondaryDisabledBackground","buttonSecondaryDisabledText","buttonSecondaryDisabledBorder","templateObject_4","buttonTertiaryText","buttonTertiaryTextHover","buttonTertiaryDisabledText","$size","templateObject_5","borderRadiusLarge","$full","templateObject_6","$css","templateObject_7"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{faCaretLeft as n,faCaretRight as r}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as l}from"../IconFa/index.js";import{ButtonWrapper as o,DotContainer as c,Dot as a,ScreenReaderOnly as i,CarouselButton as m,VerticalAlign as s}from"./styles.js";var u=function(r){return t.createElement("div",null,t.createElement(m,e({},r,{"aria-label":"previous"}),t.createElement(s,null,t.createElement(l,{faIcon:n,size:"1.25em"}),t.createElement(i,null,"Scroll carousel to previous index"))))},d=function(n){return t.createElement("div",null,t.createElement(m,e({},n,{"aria-label":"next"}),t.createElement(s,null,t.createElement(l,{faIcon:r,size:"1.25em"}),t.createElement(i,null,"Scroll carousel to previous index"))))},f=function(e){var n=e.count,r=e.currentPosition,l=void 0===r?0:r,m=e.scrollToPosition,s=e.next,f=e.previous,E=l!==n-1,p=0!==l,v=Array.from({length:n},(function(e,t){return"arrayIndex".concat(t)}));return t.createElement(o,null,t.createElement(u,{disabled:!p,onClick:f}),t.createElement(c,{count:n},v.map((function(e,n){var r=n===l;return t.createElement(a,{key:e,selected:r,role:"switch","aria-checked":r,onClick:function(){m(n)}},t.createElement(i,null,"Scroll carousel to index ".concat(n)))}))),t.createElement(d,{disabled:!E,onClick:s}))};export{u as CarouselLeftButton,d as CarouselRightButton,f as Dots,f as default};
1
+ import e from"react";import{faCaretLeft as t,faCaretRight as n}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as l}from"../IconFa/index.js";import{ButtonWrapper as r,DotContainer as o,Dot as a,ScreenReaderOnly as c,CarouselButton as i,VerticalAlign as s}from"./styles.js";var u=function(n){return e.createElement("div",null,e.createElement(i,{disabled:!!n.disabled,"aria-label":"previous"},e.createElement(s,null,e.createElement(l,{faIcon:t,size:"1.25em"}),e.createElement(c,null,"Scroll carousel to previous index"))))},m=function(t){return e.createElement("div",null,e.createElement(i,{disabled:!!t.disabled,"aria-label":"next"},e.createElement(s,null,e.createElement(l,{faIcon:n,size:"1.25em"}),e.createElement(c,null,"Scroll carousel to previous index"))))},d=function(t){var n=t.count,l=t.currentPosition,i=void 0===l?0:l,s=t.scrollToPosition,d=t.next,f=t.previous,E=i!==n-1,v=0!==i,p=Array.from({length:n},(function(e,t){return"arrayIndex".concat(t)}));return e.createElement(r,null,e.createElement(u,{disabled:!v,onClick:f}),e.createElement(o,{$count:n},p.map((function(t,n){var l=n===i;return e.createElement(a,{key:t,role:"switch","aria-checked":l,onClick:function(){s(n)},$selected:l},e.createElement(c,null,"Scroll carousel to index ".concat(n)))}))),e.createElement(m,{disabled:!E,onClick:d}))};export{u as CarouselLeftButton,m as CarouselRightButton,d as Dots,d as default};
2
2
  //# sourceMappingURL=Dots.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Dots.js","sources":["../../../../src/components/Carousel/Dots.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes } from \"react\";\nimport { faCaretLeft, faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport {\n DotContainer,\n Dot,\n CarouselButton,\n ButtonWrapper,\n VerticalAlign,\n ScreenReaderOnly,\n} from \"./styles\";\n\ntype DotProps = {\n count: number;\n currentPosition: number;\n scrollToPosition: (to: number) => void;\n next: () => void;\n previous: () => void;\n};\n\nexport const CarouselLeftButton = (\n props: ButtonHTMLAttributes<HTMLElement>,\n) => (\n <div>\n <CarouselButton {...props} aria-label=\"previous\">\n <VerticalAlign>\n <IconFa faIcon={faCaretLeft} size=\"1.25em\" />\n <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n </VerticalAlign>\n </CarouselButton>\n </div>\n);\n\nexport const CarouselRightButton = (\n props: ButtonHTMLAttributes<HTMLElement>,\n) => (\n <div>\n <CarouselButton {...props} aria-label=\"next\">\n <VerticalAlign>\n <IconFa faIcon={faCaretRight} size=\"1.25em\" />\n <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n </VerticalAlign>\n </CarouselButton>\n </div>\n);\n\nexport const Dots = ({\n count,\n currentPosition = 0,\n scrollToPosition,\n next,\n previous,\n}: DotProps) => {\n const moreOnRight = currentPosition !== count - 1;\n const moreOnLeft = currentPosition !== 0;\n const countArray = Array.from({ length: count }, (e, i) => `arrayIndex${i}`);\n\n return (\n <ButtonWrapper>\n <CarouselLeftButton disabled={!moreOnLeft} onClick={previous} />\n\n <DotContainer count={count}>\n {countArray.map((item, index) => {\n const isSelected = index === currentPosition;\n const scrollTo = () => {\n scrollToPosition(index);\n };\n return (\n <Dot\n key={item}\n selected={isSelected}\n role=\"switch\"\n aria-checked={isSelected}\n onClick={scrollTo}\n >\n <ScreenReaderOnly>{`Scroll carousel to index ${index}`}</ScreenReaderOnly>\n </Dot>\n );\n })}\n </DotContainer>\n\n <CarouselRightButton disabled={!moreOnRight} onClick={next} />\n </ButtonWrapper>\n );\n};\n\nexport default Dots;\n"],"names":["CarouselLeftButton","props","React","createElement","CarouselButton","__assign","VerticalAlign","IconFa","faIcon","faCaretLeft","size","ScreenReaderOnly","CarouselRightButton","faCaretRight","Dots","_a","count","_b","currentPosition","scrollToPosition","next","previous","moreOnRight","moreOnLeft","countArray","Array","from","length","e","i","concat","ButtonWrapper","disabled","onClick","DotContainer","map","item","index","isSelected","Dot","key","selected","role"],"mappings":"8XAsBaA,EAAqB,SAChCC,GACG,OACHC,EAAAC,cAAA,MAAA,KACED,EAAAC,cAACC,EAAcC,EAAA,CAAA,EAAKJ,EAAK,CAAA,aAAa,aACpCC,EAAAC,cAACG,EAAa,KACZJ,EAACC,cAAAI,GAAOC,OAAQC,EAAaC,KAAK,WAClCR,EAACC,cAAAQ,8CAIP,EAEWC,EAAsB,SACjCX,GACG,OACHC,EAAAC,cAAA,MAAA,KACED,EAAAC,cAACC,EAAcC,EAAA,CAAA,EAAKJ,EAAK,CAAA,aAAa,SACpCC,EAAAC,cAACG,EAAa,KACZJ,EAACC,cAAAI,GAAOC,OAAQK,EAAcH,KAAK,WACnCR,EAACC,cAAAQ,8CAIP,EAEWG,EAAO,SAACC,GACnB,IAAAC,UACAC,EAAAF,EAAAG,gBAAAA,aAAkB,EAACD,EACnBE,qBACAC,EAAIL,EAAAK,KACJC,EAAQN,EAAAM,SAEFC,EAAcJ,IAAoBF,EAAQ,EAC1CO,EAAiC,IAApBL,EACbM,EAAaC,MAAMC,KAAK,CAAEC,OAAQX,IAAS,SAACY,EAAGC,GAAM,MAAA,aAAAC,OAAaD,EAAG,IAE3E,OACE3B,gBAAC6B,EAAa,KACZ7B,EAACC,cAAAH,EAAmB,CAAAgC,UAAWT,EAAYU,QAASZ,IAEpDnB,EAAAC,cAAC+B,EAAY,CAAClB,MAAOA,GAClBQ,EAAWW,KAAI,SAACC,EAAMC,GACrB,IAAMC,EAAaD,IAAUnB,EAI7B,OACEhB,gBAACqC,EAAG,CACFC,IAAKJ,EACLK,SAAUH,EACVI,KAAK,SAAQ,eACCJ,EACdL,QATa,WACfd,EAAiBkB,EACnB,GASInC,EAACC,cAAAQ,OAAkB,4BAA4BmB,OAAAO,IAGrD,KAGFnC,EAAAC,cAACS,EAAmB,CAACoB,UAAWV,EAAaW,QAASb,IAG5D"}
1
+ {"version":3,"file":"Dots.js","sources":["../../../../src/components/Carousel/Dots.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes } from \"react\";\nimport { faCaretLeft, faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport {\n DotContainer,\n Dot,\n CarouselButton,\n ButtonWrapper,\n VerticalAlign,\n ScreenReaderOnly,\n} from \"./styles\";\n\nexport const CarouselLeftButton = (\n props: ButtonHTMLAttributes<HTMLElement>,\n) => (\n <div>\n <CarouselButton disabled={!!props.disabled} aria-label=\"previous\">\n <VerticalAlign>\n <IconFa faIcon={faCaretLeft} size=\"1.25em\" />\n <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n </VerticalAlign>\n </CarouselButton>\n </div>\n);\n\nexport const CarouselRightButton = (\n props: ButtonHTMLAttributes<HTMLElement>,\n) => (\n <div>\n <CarouselButton disabled={!!props.disabled} aria-label=\"next\">\n <VerticalAlign>\n <IconFa faIcon={faCaretRight} size=\"1.25em\" />\n <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n </VerticalAlign>\n </CarouselButton>\n </div>\n);\n\nexport const Dots = ({\n count,\n currentPosition = 0,\n scrollToPosition,\n next,\n previous,\n}: {\n count: number;\n currentPosition: number;\n scrollToPosition: (to: number) => void;\n next: () => void;\n previous: () => void;\n}) => {\n const moreOnRight = currentPosition !== count - 1;\n const moreOnLeft = currentPosition !== 0;\n const countArray = Array.from({ length: count }, (e, i) => `arrayIndex${i}`);\n\n return (\n <ButtonWrapper>\n <CarouselLeftButton disabled={!moreOnLeft} onClick={previous} />\n\n <DotContainer $count={count}>\n {countArray.map((item, index) => {\n const isSelected = index === currentPosition;\n const scrollTo = () => {\n scrollToPosition(index);\n };\n return (\n <Dot\n key={item}\n role=\"switch\"\n aria-checked={isSelected}\n onClick={scrollTo}\n $selected={isSelected}\n >\n <ScreenReaderOnly>{`Scroll carousel to index ${index}`}</ScreenReaderOnly>\n </Dot>\n );\n })}\n </DotContainer>\n\n <CarouselRightButton disabled={!moreOnRight} onClick={next} />\n </ButtonWrapper>\n );\n};\n\nexport default Dots;\n"],"names":["CarouselLeftButton","props","React","createElement","CarouselButton","disabled","VerticalAlign","IconFa","faIcon","faCaretLeft","size","ScreenReaderOnly","CarouselRightButton","faCaretRight","Dots","_a","count","_b","currentPosition","scrollToPosition","next","previous","moreOnRight","moreOnLeft","countArray","Array","from","length","e","i","concat","ButtonWrapper","onClick","DotContainer","$count","map","item","index","isSelected","Dot","key","role"],"mappings":"0TAcaA,EAAqB,SAChCC,GACG,OACHC,EAAAC,cAAA,MAAA,KACED,EAACC,cAAAC,EAAe,CAAAC,WAAYJ,EAAMI,SAAQ,aAAa,YACrDH,EAAAC,cAACG,EAAa,KACZJ,EAACC,cAAAI,GAAOC,OAAQC,EAAaC,KAAK,WAClCR,EAACC,cAAAQ,8CAIP,EAEWC,EAAsB,SACjCX,GACG,OACHC,EAAAC,cAAA,MAAA,KACED,EAACC,cAAAC,EAAe,CAAAC,WAAYJ,EAAMI,SAAQ,aAAa,QACrDH,EAAAC,cAACG,EAAa,KACZJ,EAACC,cAAAI,GAAOC,OAAQK,EAAcH,KAAK,WACnCR,EAACC,cAAAQ,8CAIP,EAEWG,EAAO,SAACC,GACnB,IAAAC,UACAC,EAAAF,EAAAG,gBAAAA,aAAkB,EAACD,EACnBE,qBACAC,EAAIL,EAAAK,KACJC,EAAQN,EAAAM,SAQFC,EAAcJ,IAAoBF,EAAQ,EAC1CO,EAAiC,IAApBL,EACbM,EAAaC,MAAMC,KAAK,CAAEC,OAAQX,IAAS,SAACY,EAAGC,GAAM,MAAA,aAAAC,OAAaD,EAAG,IAE3E,OACE3B,gBAAC6B,EAAa,KACZ7B,EAACC,cAAAH,EAAmB,CAAAK,UAAWkB,EAAYS,QAASX,IAEpDnB,EAACC,cAAA8B,EAAqB,CAAAC,OAAAlB,GACnBQ,EAAWW,KAAI,SAACC,EAAMC,GACrB,IAAMC,EAAaD,IAAUnB,EAI7B,OACEhB,EAACC,cAAAoC,GACCC,IAAKJ,EACLK,KAAK,wBACSH,EACdN,QARa,WACfb,EAAiBkB,EACnB,YAOeC,GAEXpC,EAACC,cAAAQ,OAAkB,4BAA4BmB,OAAAO,IAGrD,KAGFnC,EAAAC,cAACS,EAAmB,CAACP,UAAWiB,EAAaU,QAASZ,IAG5D"}