@hyphen/hyphen-components 3.0.0 → 4.0.1

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 (20) hide show
  1. package/dist/components/Button/Button.d.ts +12 -51
  2. package/dist/components/Button/Button.stories.d.ts +1 -1
  3. package/dist/components/Drawer/Drawer.d.ts +2 -8
  4. package/dist/components/Sidebar/Sidebar.d.ts +2 -6
  5. package/dist/css/index.css +1 -1
  6. package/dist/hyphen-components.cjs.development.js +41 -104
  7. package/dist/hyphen-components.cjs.development.js.map +1 -1
  8. package/dist/hyphen-components.cjs.production.min.js +1 -1
  9. package/dist/hyphen-components.cjs.production.min.js.map +1 -1
  10. package/dist/hyphen-components.esm.js +42 -105
  11. package/dist/hyphen-components.esm.js.map +1 -1
  12. package/package.json +1 -1
  13. package/src/components/Button/Button.mdx +7 -7
  14. package/src/components/Button/Button.module.scss +3 -0
  15. package/src/components/Button/Button.stories.tsx +12 -12
  16. package/src/components/Button/Button.test.tsx +128 -112
  17. package/src/components/Button/Button.tsx +80 -178
  18. package/src/components/Drawer/Drawer.tsx +8 -12
  19. package/src/components/Sidebar/Sidebar.stories.tsx +4 -4
  20. package/src/lib/tokens.ts +11 -8
package/dist/components/Button/Button.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import { BoxShadowSize, IconName, ResponsiveProp } from '../../types';
2
- import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, FocusEvent, MouseEvent, ReactNode } from 'react';
2
+ import React, { ButtonHTMLAttributes } from 'react';
3
3
  export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger';
4
4
  export type ButtonSize = 'sm' | 'md' | 'lg';
5
5
  export interface BaseButtonProps {
6
6
  /**
7
- * Contents of the button.
7
+ * The button element to render as. Useful for when you want to render a Link that looks like a button.
8
8
  */
9
- children?: ReactNode;
9
+ asChild?: boolean;
10
10
  /**
11
11
  * Additional ClassNames to add to button.
12
12
  */
@@ -16,72 +16,33 @@ export interface BaseButtonProps {
16
16
  */
17
17
  fullWidth?: boolean;
18
18
  /**
19
- * Name of the icon to include before the button text
19
+ * Icon displayed before the button label
20
20
  */
21
21
  iconPrefix?: IconName;
22
22
  /**
23
- * Name of the icon to include after the button text
23
+ * Icon displayed after the button label
24
24
  */
25
25
  iconSuffix?: IconName;
26
26
  /**
27
- * A unique identifier for the button.
28
- */
29
- id?: string;
30
- /**
31
- * URL to navigate to when clicked. Passing this attribute automatically
32
- * renders an anchor <a> tag, NOT a <button> element.
33
- */
34
- href?: string;
35
- /**
36
- * Disables the button, making it inoperable.
27
+ * Disables the button
37
28
  */
38
29
  isDisabled?: boolean;
39
30
  /**
40
- * Replaces the button text with a loading indicator and disables the button.
31
+ * Displays a loading spinner and disables the button
41
32
  */
42
33
  isLoading?: boolean;
43
34
  /**
44
- * Prop reserved for when component is wrapped by `<Link>` from react-router.
45
- */
46
- navigate?: () => void;
47
- /**
48
- * Callback when Button is pressed.
49
- */
50
- onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
51
- /**
52
- * Callback when focus leaves Button.
53
- */
54
- onBlur?: (event: FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
55
- /**
56
- * Callback when Button receives focus.
57
- */
58
- onFocus?: (event: FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
59
- /**
60
- * The size of the drop shadow applied to the Box
35
+ * Size of the drop shadow applied to the Box
61
36
  */
62
37
  shadow?: BoxShadowSize | ResponsiveProp<BoxShadowSize>;
63
38
  /**
64
- * Specify the tabIndex of the button.
65
- */
66
- tabIndex?: number;
67
- /**
68
- * Useful when using button as an anchor tag.
69
- */
70
- target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
71
- /**
72
- * The size of the button.
39
+ * Size of the button.
73
40
  */
74
41
  size?: ButtonSize | ResponsiveProp<ButtonSize>;
75
42
  /**
76
- * The color variant of the button
43
+ * Visual variant of the button
77
44
  */
78
45
  variant?: ButtonVariant;
79
46
  }
80
- export type AnchorButtonProps = {
81
- as: 'a';
82
- } & BaseButtonProps & Omit<React.DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, 'ref'>;
83
- export type NormalButtonProps = {
84
- as?: 'button';
85
- } & BaseButtonProps & Omit<React.DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'>;
86
- export type ButtonProps = NormalButtonProps | AnchorButtonProps;
87
- export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
47
+ export type ButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
48
+ export declare const Button: React.ForwardRefExoticComponent<BaseButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
package/dist/components/Button/Button.stories.d.ts CHANGED
@@ -4,6 +4,7 @@ import type { Meta } from '@storybook/react';
4
4
  declare const meta: Meta<typeof Button>;
5
5
  export default meta;
6
6
  export declare const Default: () => React.JSX.Element;
7
+ export declare const AsChild: () => React.JSX.Element;
7
8
  export declare const Variants: () => React.JSX.Element;
8
9
  export declare const Sizes: () => React.JSX.Element;
9
10
  export declare const FullWidth: () => React.JSX.Element;
@@ -12,4 +13,3 @@ export declare const IconButton: () => React.JSX.Element;
12
13
  export declare const Loading: () => React.JSX.Element;
13
14
  export declare const Disabled: () => React.JSX.Element;
14
15
  export declare const Shadow: () => React.JSX.Element;
15
- export declare const Anchor: () => React.JSX.Element;
package/dist/components/Drawer/Drawer.d.ts CHANGED
@@ -98,14 +98,8 @@ export interface DrawerProps {
98
98
  declare const Drawer: React.FC<DrawerProps>;
99
99
  declare const DrawerHeader: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
100
100
  declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
101
- declare const DrawerCloseButton: React.ForwardRefExoticComponent<(Omit<{
102
- as?: "button" | undefined;
103
- } & import("../Button/Button").BaseButtonProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement> & {
101
+ declare const DrawerCloseButton: React.ForwardRefExoticComponent<import("../Button/Button").BaseButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
104
102
  onClose?: (() => void) | undefined;
105
- }, "ref"> | Omit<{
106
- as: "a";
107
- } & import("../Button/Button").BaseButtonProps & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement> & {
108
- onClose?: (() => void) | undefined;
109
- }, "ref">) & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
103
+ } & React.RefAttributes<HTMLButtonElement>>;
110
104
  declare const DrawerContent: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
111
105
  export { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger, DrawerCloseButton, };
package/dist/components/Sidebar/Sidebar.d.ts CHANGED
@@ -18,11 +18,7 @@ declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttribute
18
18
  side?: "left" | undefined;
19
19
  collapsible?: "offcanvas" | "icon" | "none" | undefined;
20
20
  }, "ref"> & React.RefAttributes<HTMLDivElement>>;
21
- declare const SidebarTrigger: React.ForwardRefExoticComponent<(Omit<{
22
- as?: "button" | undefined;
23
- } & import("../Button/Button").BaseButtonProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> | Omit<{
24
- as: "a";
25
- } & import("../Button/Button").BaseButtonProps & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
21
+ declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<import("../Button/Button").BaseButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
26
22
  declare const SidebarInset: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
27
23
  declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
28
24
  declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -32,7 +28,7 @@ declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.Detail
32
28
  declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
33
29
  asChild?: boolean | undefined;
34
30
  isActive?: boolean | undefined;
35
- icon?: "link" | "menu" | "search" | "circle" | "filter" | "key" | "download" | "add" | "alarm-disable" | "alarm" | "analytics" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "clipboard" | "cloud" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "flag" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "launch-app" | "lightbulb" | "list" | "lock" | "logo-env" | "logo-link" | "logo-toggle" | "logout" | "mail" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out" | undefined;
31
+ icon?: "link" | "menu" | "search" | "circle" | "filter" | "key" | "add" | "alarm-disable" | "alarm" | "analytics" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "clipboard" | "cloud" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "flag" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "launch-app" | "lightbulb" | "list" | "lock" | "logo-env" | "logo-link" | "logo-toggle" | "logout" | "mail" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out" | undefined;
36
32
  }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
37
33
  declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
38
34
  declare const SidebarGroupLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
package/dist/css/index.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .Alert-module_alert__zP4AL{border-style:solid;border-width:var(--size-border-width-sm);box-shadow:var(--size-box-shadow-0);font-family:var(--assets-font-family-body)}.Alert-module_alert__zP4AL .Alert-module_close-icon__zs4Xk>button{background:none;border:0;color:inherit;cursor:pointer;font:inherit;padding:0}.Alert-module_alert__zP4AL .Alert-module_close-icon__zs4Xk>button:hover{color:var(--color-base-grey-600)}.Alert-module_alert-heading__VguTk{line-height:var(--size-line-height-heading)}.Alert-module_alert__default__-pcBw{background:var(--color-base-grey-100);border-color:var(--color-base-grey-200);color:var(--color-base-grey-500)}.Alert-module_alert__info__UZeOd{background:var(--color-base-blue-50);border-color:var(--color-base-blue-200);color:var(--color-base-grey-500)}.Alert-module_alert__success__o2IHF{background:var(--color-base-green-50);border-color:var(--color-base-green-200);color:var(--color-base-grey-500)}.Alert-module_alert__warning__lzTY-{background:var(--alert-warning-background-color,var(--color-base-yellow-50));border-color:var(--color-base-yellow-200);color:var(--color-base-grey-500)}.Alert-module_alert__danger__M-XFh{background:var(--color-base-red-50);border-color:var(--color-base-red-200);color:var(--color-base-grey-500)}.Alert-module_alert__icon__default__cCx9C{color:var(--color-base-grey-600)}.Alert-module_alert__icon__info__2W0Bi{color:var(--color-base-blue-500)}.Alert-module_alert__icon__success__NBCDO{color:var(--color-base-green-500)}.Alert-module_alert__icon__warning__nY4hy{color:var(--color-base-yellow-500)}.Alert-module_alert__icon__danger__NcOrf{color:var(--color-base-red-500)}
3
3
  .Badge-module_badge__ZbEBU.Badge-module_size-sm__rL8a6,.Badge-module_size-sm__rL8a6{border-radius:var(--size-border-radius-lg);font-size:var(--size-font-size-xs);padding:var(--size-spacing-2xs) var(--size-spacing-sm)}.Badge-module_badge__ZbEBU.Badge-module_size-md__kf6IH,.Badge-module_size-md__kf6IH{border-radius:var(--size-border-radius-xl);font-size:var(--size-font-size-sm);padding:var(--size-spacing-xs) var(--size-spacing-md)}.Badge-module_badge__ZbEBU.Badge-module_size-lg__of6XJ,.Badge-module_size-lg__of6XJ{border-radius:var(--size-border-radius-2xl);font-size:var(--size-font-size-md);padding:var(--size-spacing-sm) var(--size-spacing-lg)}.Badge-module_badge__ZbEBU{border-style:solid;border-width:var(--size-border-width-sm);font-weight:var(--size-font-weight-semibold);line-height:var(--size-line-height-base)}.Badge-module_badge__ZbEBU.Badge-module_inverse__qZCFA{background-color:var(--color-background-inverse);border-color:var(--color-background-inverse);color:var(--color-font-inverse)}.Badge-module_badge__ZbEBU.Badge-module_purple__rX-xW{background-color:var(--color-base-purple-500);border-color:var(--color-base-purple-600);color:var(--color-base-white)}.Badge-module_badge__ZbEBU.Badge-module_green__W03uU{background-color:var(--color-base-green-500);border-color:var(--color-base-green-600);color:var(--color-base-white)}.Badge-module_badge__ZbEBU.Badge-module_red__fl2jg{background-color:var(--color-base-red-500);border-color:var(--color-base-red-600);color:var(--color-base-white)}.Badge-module_badge__ZbEBU.Badge-module_blue__C7kyV{background-color:var(--color-base-blue-500);border-color:var(--color-base-blue-600);color:var(--color-base-white)}.Badge-module_badge__ZbEBU.Badge-module_yellow__gGZ6R{background-color:var(--color-base-yellow-400);border-color:var(--color-base-yellow-500);color:var(--color-base-black-500)}.Badge-module_badge__ZbEBU.Badge-module_light-grey__Wtrhx{background-color:var(--color-base-grey-200);border-color:var(--color-base-grey-200);color:var(--color-base-grey-600)}.Badge-module_badge__ZbEBU.Badge-module_dark-grey__X-807{background-color:var(--color-base-grey-400);border-color:var(--color-base-grey-400);color:var(--color-base-white)}.Badge-module_badge__ZbEBU.Badge-module_hyphen__9pe7x{background:var(--color-background-brand-gradient);border-color:var(--color-base-yellow-500);color:var(--color-base-white)}@media (min-width:680px){.Badge-module_badge__ZbEBU.Badge-module_size-sm-tablet__6xMVk{border-radius:var(--size-border-radius-lg);font-size:var(--size-font-size-xs);padding:var(--size-spacing-2xs) var(--size-spacing-sm)}.Badge-module_badge__ZbEBU.Badge-module_size-md-tablet__4w-7I{border-radius:var(--size-border-radius-xl);font-size:var(--size-font-size-sm);padding:var(--size-spacing-xs) var(--size-spacing-md)}.Badge-module_badge__ZbEBU.Badge-module_size-lg-tablet__8xyRF{border-radius:var(--size-border-radius-2xl);font-size:var(--size-font-size-md);padding:var(--size-spacing-sm) var(--size-spacing-lg)}}@media (min-width:992px){.Badge-module_badge__ZbEBU.Badge-module_size-sm-desktop__Ayf5L{border-radius:var(--size-border-radius-lg);font-size:var(--size-font-size-xs);padding:var(--size-spacing-2xs) var(--size-spacing-sm)}.Badge-module_badge__ZbEBU.Badge-module_size-md-desktop__XSq7m{border-radius:var(--size-border-radius-xl);font-size:var(--size-font-size-sm);padding:var(--size-spacing-xs) var(--size-spacing-md)}.Badge-module_badge__ZbEBU.Badge-module_size-lg-desktop__Baw3S{border-radius:var(--size-border-radius-2xl);font-size:var(--size-font-size-md);padding:var(--size-spacing-sm) var(--size-spacing-lg)}}@media (min-width:1280px){.Badge-module_badge__ZbEBU.Badge-module_size-sm-hd__Da6Au{border-radius:var(--size-border-radius-lg);font-size:var(--size-font-size-xs);padding:var(--size-spacing-2xs) var(--size-spacing-sm)}.Badge-module_badge__ZbEBU.Badge-module_size-md-hd__-VNMk{border-radius:var(--size-border-radius-xl);font-size:var(--size-font-size-sm);padding:var(--size-spacing-xs) var(--size-spacing-md)}.Badge-module_badge__ZbEBU.Badge-module_size-lg-hd__6MOwL{border-radius:var(--size-border-radius-2xl);font-size:var(--size-font-size-md);padding:var(--size-spacing-sm) var(--size-spacing-lg)}}
4
4
  .Spinner-module_spinner__SZoUP svg{animation:Spinner-module_spin__Yk0wm 1.5s linear infinite;display:inherit}@keyframes Spinner-module_spin__Yk0wm{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
5
- :root{--button-box-shadow-focus:0 0 0 4px var(--color-base-primary-200);--button-neutral-box-shadow-focus:0 0 0 4px var(--color-base-grey-200);--button-danger-box-shadow-focus:0 0 0 4px var(--color-base-danger-200)}.Button-module_button__18Bed.Button-module_size-sm__6Xrjw,.Button-module_size-sm__6Xrjw{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md__BkuGu,.Button-module_size-md__BkuGu{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg__JVYWV,.Button-module_size-lg__JVYWV{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}.Button-module_button__18Bed{align-items:center;background-color:transparent;border:1px solid transparent;color:inherit;cursor:pointer;display:inline-flex;font-family:var(--assets-font-family-body);font-weight:var(--size-font-weight-semi-bold);justify-content:center;line-height:1;padding:0;position:relative;text-align:center;text-decoration:none;transition-duration:.1s;transition-property:background-color,border,box-shadow,color;transition-timing-function:cubic-bezier(.67,.83,.67)}.Button-module_button__18Bed:hover{text-decoration:none}.Button-module_button__18Bed:disabled{cursor:not-allowed;opacity:.45}.Button-module_button__18Bed.Button-module_primary__st6yY{background-color:var(--color-background-button-primary);color:var(--color-font-button-primary)}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):hover{background-color:var(--color-background-button-primary-hover);color:var(--color-font-button-primary-hover)}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):active{background-color:var(--color-background-button-primary-active);color:var(--color-font-button-primary-active)}.Button-module_button__18Bed.Button-module_primary__st6yY:focus{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_primary__st6yY:focus-visible{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_primary__st6yY:focus:not(:focus-visible){box-shadow:none;outline:0}.Button-module_button__18Bed.Button-module_secondary__j-3rj{background-color:var(--color-background-button-secondary);border:1px solid;border-color:var(--color-border-button-secondary);color:var(--color-font-button-secondary)}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):hover{background-color:var(--color-background-button-secondary-hover);border-color:var(--color-border-button-secondary-hover);color:var(--color-font-button-secondary-hover)}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):active{background-color:var(--color-background-button-secondary-active);border-color:var(--color-border-button-secondary-active);color:var(--color-font-button-secondary-active)}.Button-module_button__18Bed.Button-module_secondary__j-3rj:focus{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_secondary__j-3rj:focus-visible{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_secondary__j-3rj:focus:not(:focus-visible){box-shadow:none;outline:0}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM{background-color:var(--color-background-button-tertiary);color:var(--color-font-button-tertiary)}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:not(:disabled):hover{background-color:var(--color-background-button-tertiary-hover);border-color:var(--color-border-button-tertiary-hover);color:var(--color-font-button-tertiary-hover)}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:not(:disabled):active{background-color:var(--color-background-button-tertiary-active);border-color:var(--color-border-button-tertiary-active);color:var(--color-font-button-tertiary-active)}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:focus{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:focus-visible{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:focus:not(:focus-visible){box-shadow:none;outline:0}.Button-module_button__18Bed.Button-module_danger__Hxs5n{background-color:var(--color-background-button-danger);color:var(--color-font-button-danger)}.Button-module_button__18Bed.Button-module_danger__Hxs5n:not(:disabled):hover{background-color:var(--color-background-button-danger-hover);color:var(--color-font-button-danger-hover)}.Button-module_button__18Bed.Button-module_danger__Hxs5n:not(:disabled):active{background-color:var(--color-background-button-danger-active);color:var(--color-font-button-danger-active)}.Button-module_button__18Bed.Button-module_danger__Hxs5n:focus{box-shadow:var(--button-danger-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_danger__Hxs5n:focus-visible{box-shadow:var(--button-danger-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_danger__Hxs5n:focus:not(:focus-visible){box-shadow:none;outline:0}@media (min-width:680px){.Button-module_button__18Bed.Button-module_size-sm-tablet__9XaSx{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md-tablet__YQxaI{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg-tablet__h3l97{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}}@media (min-width:992px){.Button-module_button__18Bed.Button-module_size-sm-desktop__8tTsg{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md-desktop__OCdDi{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg-desktop__uFc4f{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}}@media (min-width:1280px){.Button-module_button__18Bed.Button-module_size-sm-hd__INFfD{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md-hd__8e2mW{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg-hd__DH60l{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}}.Button-module_button__18Bed.Button-module_loading__QfItr .Button-module_label__1PsXG{visibility:hidden}.Button-module_button__18Bed.Button-module_full-width__qDri6{width:100%}.Button-module_spinner-wrapper__rALNw{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}
5
+ :root{--button-box-shadow-focus:0 0 0 4px var(--color-base-primary-200);--button-neutral-box-shadow-focus:0 0 0 4px var(--color-base-grey-200);--button-danger-box-shadow-focus:0 0 0 4px var(--color-base-danger-200)}.Button-module_button__18Bed.Button-module_size-sm__6Xrjw,.Button-module_size-sm__6Xrjw{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md__BkuGu,.Button-module_size-md__BkuGu{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg__JVYWV,.Button-module_size-lg__JVYWV{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));gap:var(--size-spacing-lg);height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}.Button-module_button__18Bed{align-items:center;background-color:transparent;border:1px solid transparent;color:inherit;cursor:pointer;display:inline-flex;font-family:var(--assets-font-family-body);font-weight:var(--size-font-weight-semi-bold);gap:var(--size-spacing-sm);justify-content:center;line-height:1;padding:0;position:relative;text-align:center;text-decoration:none;transition-duration:.1s;transition-property:background-color,border,box-shadow,color;transition-timing-function:cubic-bezier(.67,.83,.67)}.Button-module_button__18Bed:hover{text-decoration:none}.Button-module_button__18Bed:disabled,.Button-module_button__18Bed[aria-disabled=true]{cursor:not-allowed;opacity:.45}.Button-module_button__18Bed.Button-module_primary__st6yY{background-color:var(--color-background-button-primary);color:var(--color-font-button-primary)}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):hover{background-color:var(--color-background-button-primary-hover);color:var(--color-font-button-primary-hover)}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):active{background-color:var(--color-background-button-primary-active);color:var(--color-font-button-primary-active)}.Button-module_button__18Bed.Button-module_primary__st6yY:focus{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_primary__st6yY:focus-visible{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_primary__st6yY:focus:not(:focus-visible){box-shadow:none;outline:0}.Button-module_button__18Bed.Button-module_secondary__j-3rj{background-color:var(--color-background-button-secondary);border:1px solid;border-color:var(--color-border-button-secondary);color:var(--color-font-button-secondary)}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):hover{background-color:var(--color-background-button-secondary-hover);border-color:var(--color-border-button-secondary-hover);color:var(--color-font-button-secondary-hover)}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):active{background-color:var(--color-background-button-secondary-active);border-color:var(--color-border-button-secondary-active);color:var(--color-font-button-secondary-active)}.Button-module_button__18Bed.Button-module_secondary__j-3rj:focus{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_secondary__j-3rj:focus-visible{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_secondary__j-3rj:focus:not(:focus-visible){box-shadow:none;outline:0}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM{background-color:var(--color-background-button-tertiary);color:var(--color-font-button-tertiary)}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:not(:disabled):hover{background-color:var(--color-background-button-tertiary-hover);border-color:var(--color-border-button-tertiary-hover);color:var(--color-font-button-tertiary-hover)}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:not(:disabled):active{background-color:var(--color-background-button-tertiary-active);border-color:var(--color-border-button-tertiary-active);color:var(--color-font-button-tertiary-active)}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:focus{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:focus-visible{box-shadow:var(--button-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_tertiary__Nd7xM:focus:not(:focus-visible){box-shadow:none;outline:0}.Button-module_button__18Bed.Button-module_danger__Hxs5n{background-color:var(--color-background-button-danger);color:var(--color-font-button-danger)}.Button-module_button__18Bed.Button-module_danger__Hxs5n:not(:disabled):hover{background-color:var(--color-background-button-danger-hover);color:var(--color-font-button-danger-hover)}.Button-module_button__18Bed.Button-module_danger__Hxs5n:not(:disabled):active{background-color:var(--color-background-button-danger-active);color:var(--color-font-button-danger-active)}.Button-module_button__18Bed.Button-module_danger__Hxs5n:focus{box-shadow:var(--button-danger-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_danger__Hxs5n:focus-visible{box-shadow:var(--button-danger-box-shadow-focus);outline:0}.Button-module_button__18Bed.Button-module_danger__Hxs5n:focus:not(:focus-visible){box-shadow:none;outline:0}@media (min-width:680px){.Button-module_button__18Bed.Button-module_size-sm-tablet__9XaSx{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md-tablet__YQxaI{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg-tablet__h3l97{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));gap:var(--size-spacing-lg);height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}}@media (min-width:992px){.Button-module_button__18Bed.Button-module_size-sm-desktop__8tTsg{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md-desktop__OCdDi{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg-desktop__uFc4f{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));gap:var(--size-spacing-lg);height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}}@media (min-width:1280px){.Button-module_button__18Bed.Button-module_size-sm-hd__INFfD{border-radius:var(--INTERNAL_form-control-size-sm-border-radius);font-size:var(--INTERNAL_form-control-size-sm-font-size);height:32px;letter-spacing:.2px;min-height:32px;padding:var(--INTERNAL_form-control-size-sm-padding) var(--size-spacing-md)}.Button-module_button__18Bed.Button-module_size-md-hd__8e2mW{border-radius:var(--button-size-md-border-radius,var(--INTERNAL_form-control-size-md-border-radius));font-size:var(--button-size-md-font-size,var(--INTERNAL_form-control-size-md-font-size));height:40px;letter-spacing:.2px;padding:calc(var(--button-size-md-padding-vertical, var(--INTERNAL_form-control-size-md-padding)) - 1px) calc(var(--button-size-md-padding-horizontal, var(--size-spacing-xl)) - 1px)}.Button-module_button__18Bed.Button-module_size-lg-hd__DH60l{border-radius:var(--button-size-lg-border-radius,var(--INTERNAL_form-control-size-lg-border-radius));font-size:var(--button-size-lg-font-size,var(--INTERNAL_form-control-size-lg-font-size));gap:var(--size-spacing-lg);height:55px;letter-spacing:1px;min-height:55px;padding:var(--button-size-lg-padding-vertical,var(--INTERNAL_form-control-size-lg-padding)) var(--button-size-lg-padding-horizontal,var(--size-spacing-2xl))}}.Button-module_button__18Bed.Button-module_loading__QfItr .Button-module_label__1PsXG{visibility:hidden}.Button-module_button__18Bed.Button-module_full-width__qDri6{width:100%}.Button-module_spinner-wrapper__rALNw{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}
6
6
  .Heading-module_heading__zKyv7{font-family:var(--assets-font-family-brand);font-weight:var(--size-font-weight-semibold);line-height:var(--size-line-height-heading)}
7
7
  .Card-module_card-section-border__OefDX+.Card-module_card-section-border__OefDX{border-top:1px solid var(--card-section-border-color,var(--color-border-subtle))}
8
8
  .Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm__mJkMQ,.Checkbox-module_size-sm__mJkMQ{border-radius:var(--size-border-radius-xs);font-size:var(--size-font-size-lg);height:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm__mJkMQ *,.Checkbox-module_size-sm__mJkMQ *{height:20px;width:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md__I2s8g,.Checkbox-module_size-md__I2s8g{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-xl);height:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md__I2s8g *,.Checkbox-module_size-md__I2s8g *{height:24px;width:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg__rFFnb,.Checkbox-module_size-lg__rFFnb{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-2xl);height:36px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg__rFFnb *,.Checkbox-module_size-lg__rFFnb *{height:36px;width:36px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_hidden__2y7Zr{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;height:0;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.Checkbox-module_checkbox__dY-7P input+div{background:var(--form-control-background-color,var(--color-base-white));color:var(--form-control-checkbox-color,var(--color-base-grey-500))}.Checkbox-module_checkbox__dY-7P input:checked+div,.Checkbox-module_checkbox__dY-7P input:indeterminate+div{color:var(--form-control-checkbox-color-checked,var(--color-base-primary-500))}.Checkbox-module_checkbox__dY-7P input[aria-invalid=true]+div{color:var(--form-control-font-color-error,var(--color-base-danger-500))}.Checkbox-module_checkbox__dY-7P input:focus+div{box-shadow:var(--form-control-box-shadow-focus,var(--INTERNAL_form-control-box-shadow-focus));outline:0}.Checkbox-module_checkbox__dY-7P input:focus-visible+div{box-shadow:var(--form-control-box-shadow-focus,var(--INTERNAL_form-control-box-shadow-focus));outline:0}.Checkbox-module_checkbox__dY-7P input:disabled+div{background:var(--form-control-background-color-disabled,var(--color-base-grey-50));color:var(--form-control-checkbox-color-disabled,var(--color-base-grey-200))}.Checkbox-module_checkbox__dY-7P input:focus:not(:focus-visible)+div{box-shadow:none;outline:0}.Checkbox-module_checkbox__dY-7P input:checked:disabled+div{color:var(--form-control-checkbox-color-checked-disabled,var(--color-base-primary-200))}@media (min-width:680px){.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm-tablet__GhQUW{border-radius:var(--size-border-radius-xs);font-size:var(--size-font-size-lg);height:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm-tablet__GhQUW *{height:20px;width:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md-tablet__XRHf4{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-xl);height:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md-tablet__XRHf4 *{height:24px;width:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg-tablet__quoAJ{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-2xl);height:36px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg-tablet__quoAJ *{height:36px;width:36px}}@media (min-width:992px){.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm-desktop__fqeEc{border-radius:var(--size-border-radius-xs);font-size:var(--size-font-size-lg);height:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm-desktop__fqeEc *{height:20px;width:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md-desktop__9a278{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-xl);height:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md-desktop__9a278 *{height:24px;width:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg-desktop__WQnv0{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-2xl);height:36px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg-desktop__WQnv0 *{height:36px;width:36px}}@media (min-width:1280px){.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm-hd__X3yIF{border-radius:var(--size-border-radius-xs);font-size:var(--size-font-size-lg);height:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-sm-hd__X3yIF *{height:20px;width:20px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md-hd__6T0dF{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-xl);height:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-md-hd__6T0dF *{height:24px;width:24px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg-hd__UXCt1{border-radius:var(--size-border-radius-sm);font-size:var(--size-font-size-2xl);height:36px}.Checkbox-module_checkbox__dY-7P.Checkbox-module_size-lg-hd__UXCt1 *{height:36px;width:36px}}
package/dist/hyphen-components.cjs.development.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
6
6
  var React = require('react');
7
7
  var classNames = require('classnames');
8
8
  var icons = require('@hyphen/hyphen-design-tokens/build/assets/icons/react');
9
+ var reactSlot = require('@radix-ui/react-slot');
9
10
  var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
10
11
  var format = require('date-fns/format');
11
12
  var ReactDatePicker = require('react-datepicker');
@@ -14,7 +15,6 @@ var reactPopper = require('react-popper');
14
15
  var FocusTrap = require('focus-trap-react');
15
16
  var designTokens = require('@hyphen/hyphen-design-tokens/build/json/variables');
16
17
  require('@hyphen/hyphen-design-tokens/build/assets/icons');
17
- var reactSlot = require('@radix-ui/react-slot');
18
18
  var ReactModal = require('react-modal');
19
19
  var FocusLock = require('react-focus-lock');
20
20
  var reactRemoveScroll = require('react-remove-scroll');
@@ -750,99 +750,47 @@ var Spinner = function Spinner(_ref) {
750
750
  }))));
751
751
  };
752
752
 
753
- var isModifiedEvent = function isModifiedEvent(e) {
754
- return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
755
- };
756
- /**
757
- * Due to react-router's handling of custom components used in RR <Link>
758
- * we must add this validation that ensures the router will execute the passed `navigate`
759
- * prop, thus navigating the user without triggering a refresh.
760
- *
761
- * SOURCES:
762
- * https://github.com/ReactTraining/react-router/issues/7727
763
- * https://github.com/ReactTraining/react-router/issues/7761
764
- * */
765
- // eslint-disable-next-line import/prefer-default-export
766
- var handleReactRouterClick = function handleReactRouterClick(event, onClick, target, navigate) {
767
- if (onClick) onClick(event);
768
- if (!event.defaultPrevented &&
769
- // onClick prevented default
770
- event.button === 0 && (
771
- // ignore everything but left clicks
772
- !target || target === '_self') &&
773
- // let browser handle "target=_blank" etc.
774
- !isModifiedEvent(event) &&
775
- // ignore clicks with modifier keys
776
- navigate) {
777
- event.preventDefault();
778
- navigate();
779
- }
780
- };
781
-
782
753
  var styles$s = {"button":"Button-module_button__18Bed","size-sm":"Button-module_size-sm__6Xrjw","size-md":"Button-module_size-md__BkuGu","size-lg":"Button-module_size-lg__JVYWV","primary":"Button-module_primary__st6yY","secondary":"Button-module_secondary__j-3rj","tertiary":"Button-module_tertiary__Nd7xM","danger":"Button-module_danger__Hxs5n","size-sm-tablet":"Button-module_size-sm-tablet__9XaSx","size-md-tablet":"Button-module_size-md-tablet__YQxaI","size-lg-tablet":"Button-module_size-lg-tablet__h3l97","size-sm-desktop":"Button-module_size-sm-desktop__8tTsg","size-md-desktop":"Button-module_size-md-desktop__OCdDi","size-lg-desktop":"Button-module_size-lg-desktop__uFc4f","size-sm-hd":"Button-module_size-sm-hd__INFfD","size-md-hd":"Button-module_size-md-hd__8e2mW","size-lg-hd":"Button-module_size-lg-hd__DH60l","loading":"Button-module_loading__QfItr","label":"Button-module_label__1PsXG","full-width":"Button-module_full-width__qDri6","spinner-wrapper":"Button-module_spinner-wrapper__rALNw"};
783
754
 
784
- var _excluded$I = ["children", "as", "className", "fullWidth", "id", "href", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "navigate", "onClick", "onFocus", "onBlur", "shadow", "size", "tabIndex", "target", "type", "variant"];
755
+ var _excluded$I = ["asChild", "children", "className", "fullWidth", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "onClick", "onBlur", "onFocus", "shadow", "size", "variant"];
785
756
  var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
786
- var _classNames, _extends2;
787
- var _ref$children = _ref.children,
788
- children = _ref$children === void 0 ? undefined : _ref$children,
789
- _ref$as = _ref.as,
790
- as = _ref$as === void 0 ? 'button' : _ref$as,
791
- _ref$className = _ref.className,
792
- className = _ref$className === void 0 ? '' : _ref$className,
793
- _ref$fullWidth = _ref.fullWidth,
794
- fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
795
- _ref$id = _ref.id,
796
- id = _ref$id === void 0 ? undefined : _ref$id,
797
- _ref$href = _ref.href,
798
- href = _ref$href === void 0 ? undefined : _ref$href,
799
- _ref$iconPrefix = _ref.iconPrefix,
800
- iconPrefix = _ref$iconPrefix === void 0 ? undefined : _ref$iconPrefix,
801
- _ref$iconSuffix = _ref.iconSuffix,
802
- iconSuffix = _ref$iconSuffix === void 0 ? undefined : _ref$iconSuffix,
803
- _ref$isDisabled = _ref.isDisabled,
804
- isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
805
- _ref$isLoading = _ref.isLoading,
806
- isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
807
- _ref$navigate = _ref.navigate,
808
- navigate = _ref$navigate === void 0 ? undefined : _ref$navigate,
809
- _ref$onClick = _ref.onClick,
810
- _onClick = _ref$onClick === void 0 ? undefined : _ref$onClick,
811
- _ref$onFocus = _ref.onFocus,
812
- onFocus = _ref$onFocus === void 0 ? undefined : _ref$onFocus,
813
- _ref$onBlur = _ref.onBlur,
814
- onBlur = _ref$onBlur === void 0 ? undefined : _ref$onBlur,
815
- _ref$shadow = _ref.shadow,
816
- shadow = _ref$shadow === void 0 ? undefined : _ref$shadow,
757
+ var _classNames;
758
+ var asChild = _ref.asChild,
759
+ children = _ref.children,
760
+ className = _ref.className,
761
+ fullWidth = _ref.fullWidth,
762
+ iconPrefix = _ref.iconPrefix,
763
+ iconSuffix = _ref.iconSuffix,
764
+ isDisabled = _ref.isDisabled,
765
+ isLoading = _ref.isLoading,
766
+ onClick = _ref.onClick,
767
+ onBlur = _ref.onBlur,
768
+ onFocus = _ref.onFocus,
769
+ shadow = _ref.shadow,
817
770
  _ref$size = _ref.size,
818
771
  size = _ref$size === void 0 ? 'md' : _ref$size,
819
- _ref$tabIndex = _ref.tabIndex,
820
- tabIndex = _ref$tabIndex === void 0 ? undefined : _ref$tabIndex,
821
- _ref$target = _ref.target,
822
- target = _ref$target === void 0 ? undefined : _ref$target,
823
- _ref$type = _ref.type,
824
- type = _ref$type === void 0 ? undefined : _ref$type,
825
772
  _ref$variant = _ref.variant,
826
773
  variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
827
774
  restProps = _objectWithoutPropertiesLoose(_ref, _excluded$I);
828
775
  var disabled = isLoading || isDisabled;
829
776
  var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
830
777
  return styles$s[c];
831
- });
778
+ }).filter(Boolean);
832
779
  var buttonClasses = classNames('hyphen-components__variables__form-control', styles$s.button, className, responsiveClasses, generateResponsiveClasses('shadow', shadow), (_classNames = {}, _classNames[styles$s.loading] = isLoading, _classNames[styles$s[variant]] = variant, _classNames[styles$s['full-width']] = fullWidth, _classNames));
833
- var handleClick = handleReactRouterClick;
834
- var handleFocus = function handleFocus(event) {
835
- if (onFocus) onFocus(event);
836
- };
837
- var handleBlur = function handleBlur(event) {
838
- if (onBlur) onBlur(event);
839
- };
840
- var buttonContent = iconPrefix || iconSuffix ? React.createElement(Box, {
841
- display: "inline-flex",
842
- direction: "row",
843
- alignItems: "center",
844
- gap: "md"
845
- }, isLoading && React.createElement(Spinner, {
780
+ var handleClick = !disabled ? onClick : undefined;
781
+ var handleBlur = !disabled ? onBlur : undefined;
782
+ var handleFocus = !disabled ? onFocus : undefined;
783
+ var Comp = asChild ? reactSlot.Slot : 'button';
784
+ return React.createElement(Comp, _extends({}, disabled && {
785
+ 'aria-disabled': true
786
+ }, {
787
+ disabled: disabled,
788
+ className: buttonClasses,
789
+ onClick: handleClick,
790
+ onBlur: handleBlur,
791
+ onFocus: handleFocus,
792
+ ref: ref
793
+ }, restProps), isLoading && React.createElement(Spinner, {
846
794
  className: styles$s['spinner-wrapper']
847
795
  }), iconPrefix && React.createElement(Icon, {
848
796
  className: styles$s.label,
@@ -851,32 +799,18 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
851
799
  focusable: "false",
852
800
  "data-testid": "prefixIcon",
853
801
  size: size === 'md' ? 'sm' : size
854
- }), children && React.createElement("span", {
802
+ }), children && React.createElement(reactSlot.Slottable, null, asChild ? children : React.createElement("span", {
855
803
  className: styles$s.label
856
- }, children), iconSuffix && React.createElement(Icon, {
804
+ }, children)), iconSuffix && React.createElement(Icon, {
857
805
  className: styles$s.label,
858
806
  name: iconSuffix,
859
807
  "aria-hidden": "true",
860
808
  focusable: "false",
861
809
  "data-testid": "suffixIcon",
862
810
  size: size === 'md' ? 'sm' : size
863
- })) : React.createElement(React.Fragment, null, isLoading && React.createElement(Spinner, {
864
- className: styles$s['spinner-wrapper']
865
- }), function () {
866
- if (children) {
867
- return React.createElement("span", {
868
- className: styles$s.label
869
- }, children);
870
- }
871
- return null;
872
- }());
873
- var buttonElement = getElementType(Button, {
874
- as: as
875
- });
876
- return React.createElement(buttonElement, _extends((_extends2 = {}, _extends2['aria-disabled'] = disabled, _extends2.id = id, _extends2.href = href, _extends2.className = buttonClasses, _extends2.disabled = disabled, _extends2.target = as === 'a' && href ? target : null, _extends2.rel = as === 'a' && href && target === '_blank' ? 'noopener noreferrer' : null, _extends2.onBlur = handleBlur, _extends2.onClick = function onClick(event) {
877
- return handleClick(event, _onClick, target, navigate);
878
- }, _extends2.onFocus = handleFocus, _extends2.ref = ref, _extends2.type = type || (as !== 'a' && !href ? 'button' : undefined), _extends2.tabIndex = tabIndex, _extends2), restProps), buttonContent);
811
+ }));
879
812
  });
813
+ Button.displayName = 'Button';
880
814
 
881
815
  var _excluded$H = ["background", "borderColor", "borderWidth", "children", "display", "padding"];
882
816
  var CardFooter = function CardFooter(_ref) {
@@ -1611,6 +1545,9 @@ var BREAKPOINTS = /*#__PURE__*/[].concat(Object.entries(designTokens.size.breakp
1611
1545
  minWidth: parseInt(data['value'], 10)
1612
1546
  };
1613
1547
  }
1548
+ return undefined;
1549
+ }).filter(function (breakpoint) {
1550
+ return breakpoint !== undefined;
1614
1551
  });
1615
1552
  var Z_INDEX_VALUES = designTokens.size['z-index'];
1616
1553
  // export const BOX_SHADOW_VALUES = designTokens.size['box-shadow'];
@@ -2121,7 +2058,7 @@ var DrawerCloseButton = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
2121
2058
  var className = _ref6.className,
2122
2059
  onClick = _ref6.onClick,
2123
2060
  onClose = _ref6.onClose,
2124
- props = _objectWithoutPropertiesLoose(_ref6, _excluded4$2);
2061
+ rest = _objectWithoutPropertiesLoose(_ref6, _excluded4$2);
2125
2062
  var context = React.useContext(DrawerContext);
2126
2063
  var isStandalone = !context;
2127
2064
  var handleClick = function handleClick(event) {
@@ -2135,7 +2072,6 @@ var DrawerCloseButton = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
2135
2072
  }
2136
2073
  };
2137
2074
  return React.createElement(Button, _extends({
2138
- ref: ref,
2139
2075
  variant: "tertiary",
2140
2076
  "aria-label": "close",
2141
2077
  type: "button",
@@ -2143,8 +2079,9 @@ var DrawerCloseButton = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
2143
2079
  "data-drawer": "close",
2144
2080
  className: classNames('m-left-auto', className),
2145
2081
  size: "sm",
2146
- onClick: handleClick
2147
- }, props));
2082
+ onClick: handleClick,
2083
+ ref: ref
2084
+ }, rest));
2148
2085
  });
2149
2086
  DrawerCloseButton.displayName = 'DrawerCloseButton';
2150
2087
  var DrawerContent = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {