@bcgov/design-system-react-components 0.0.4 → 0.0.6

package/dist/esm/types/components/Button/Button.d.ts

@@ -1,9 +1,21 @@
 import { ButtonProps as ReactAriaButtonProps } from "react-aria-components";
 import "./Button.css";
 export interface ButtonProps extends ReactAriaButtonProps {
+    /**
+     * Defaults to `medium`. `small` is shorter vertically.
+     */
     size?: "small" | "medium";
+    /**
+     * Defaults to `primary`.
+     */
     variant?: "primary" | "secondary" | "tertiary" | "link";
+    /**
+     * For destructive/deletion actions.
+     */
     danger?: boolean;
+    /**
+     * If true, renders a square button intended for a single icon.
+     */
     isIconButton?: boolean;
 }
 export default function Button({ size, variant, danger, isIconButton, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Footer/Footer.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+import "./Footer.css";
+export interface FooterLinksProps {
+    /**
+     * Title for the list of links - associated to the list of links as a `<figcaption>`
+     */
+    title: string;
+    /**
+     * Array of link elements (`<a>` or `<Link>`)
+     */
+    links: React.ReactElement[];
+}
+/**
+ * A titled list of links for use in the Footer. Rendered inside a `<figure>`
+ * with the `title` prop inside of the `<figcaption>`.
+ * @param {FooterLinksProps} props
+ * @returns {React.ReactElement}
+ */
+export declare function FooterLinks({ title, links }: FooterLinksProps): import("react/jsx-runtime").JSX.Element;
+export interface FooterProps {
+    /**
+     * Land acknowledgement block (defaults to Gov.bc.ca land acknowledgement)
+     */
+    acknowledgement?: React.ReactElement;
+    /**
+     * Logo slot (defaults to BC Gov horizontal logo)
+     */
+    logo?: React.ReactElement;
+    /**
+     * Contact information block (defaults to Gov.bc.ca contact information)
+     */
+    contact?: React.ReactElement;
+    /**
+     * Link list block (defaults to Gov.bc.ca link list).
+     *
+     * Pass the `<FooterLinks>` component for a styles-included list.
+     */
+    links?: React.ReactElement;
+    /**
+     * Copyright string (defaults to current year)
+     */
+    copyright?: string;
+    /**
+     * Hide the acknowledgement section
+     */
+    hideAcknowledgement?: boolean;
+    /**
+     * Hide the logo, contact information, and links section
+     */
+    hideLogoAndLinks?: boolean;
+    /**
+     * Hide the copyright string
+     */
+    hideCopyright?: boolean;
+}
+/**
+ * A `<footer>` element with default content included.
+ *
+ * Passing `children` replaces `logo`, `contact`, and `links`.
+ * @param {FooterProps} props
+ * @returns {React.ReactElement}
+ */
+export default function Footer({ children, acknowledgement, logo, contact, links, copyright, hideAcknowledgement, hideLogoAndLinks, hideCopyright, }: React.PropsWithChildren<FooterProps>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Footer/index.d.ts

@@ -0,0 +1,2 @@
+export { default, FooterLinks } from "./Footer";
+export type { FooterProps, FooterLinksProps } from "./Footer";

package/dist/esm/types/components/Header/Header.d.ts

@@ -1,11 +1,29 @@
 import React from "react";
 import "./Header.css";
-export declare function SvgBcLogo(): import("react/jsx-runtime").JSX.Element;
 export interface HeaderProps {
+    /**
+     * Link element that surrounds the logo. Use what's appropriate for your
+     * router, like a `<Link>`. Defaults to a generic HTML link element like
+     * `<a href="/" title="Government of British Columbia">`.
+     */
     logoLinkElement?: React.ReactElement;
+    /**
+     * Image used for the logo. Defaults to an SVG of the Government of B.C. logo.
+     */
     logoImage?: JSX.Element;
+    /**
+     * Array of link elements that are not visible until they are focused. Used
+     * for accessibility for keyboard users, to let them easily skip to main
+     * content, navigation, etc.
+     */
     skipLinks?: React.ReactElement[];
+    /**
+     * Header title text that appears to the right of the logo.
+     */
     title?: string;
+    /**
+     * Desired element that renders the `title` string. Defaults to `<span>`.
+     */
     titleElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
 }
 export default function Header({ children, logoLinkElement, logoImage, skipLinks, title, titleElement, }: React.PropsWithChildren<HeaderProps>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Header/index.d.ts

@@ -1,2 +1,2 @@
-export { default, SvgBcLogo } from "./Header";
+export { default } from "./Header";
 export type { HeaderProps } from "./Header";

package/dist/esm/types/components/SvgBcLogo/SvgBcLogo.d.ts

@@ -0,0 +1,3 @@
+export default function SvgBcLogo({ id }: {
+    id?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/SvgBcLogo/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./SvgBcLogo";

package/dist/esm/types/components/Tag/Tag.d.ts

@@ -2,7 +2,13 @@
 import { TagProps as ReactAriaTagProps } from "react-aria-components";
 import "./Tag.css";
 export interface TagProps extends ReactAriaTagProps {
+    /**
+     * Icon that appears to the left of the `textValue` field
+     */
     icon?: React.ReactNode;
+    /**
+     * Background color
+     */
     color?: "bc-blue" | "bc-gold" | "blue" | "dark" | "gray" | "grey" | "green" | "red" | "yellow";
 }
 export default function Tag({ color, icon, id, textValue }: TagProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/TagGroup/TagGroup.d.ts

@@ -1,8 +1,17 @@
 import { TagGroupProps as ReactAriaTagGroupProps } from "react-aria-components";
 import "./TagGroup.css";
 export interface TagGroupProps extends ReactAriaTagGroupProps {
+    /**
+     * Labels the TagGroup, appears above the tags.
+     */
     label?: string;
+    /**
+     * Extended description of the TagGroup, appears below the tags.
+     */
     description?: string;
+    /**
+     * Error message, appears below the tags and below the optional description.
+     */
     errorMessage?: string;
 }
 export default function TagGroup({ children, label, description, errorMessage, ...props }: TagGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/TagList/TagList.d.ts

@@ -3,6 +3,9 @@ import { TagProps } from "../Tag";
 import "./TagList.css";
 export interface TagListProps<T> extends Pick<ReactAriaTagListProps<T>, "children" | "renderEmptyState"> {
     items: TagProps[];
+    /**
+     * Used to set the `flex-direction` on the TagList.
+     */
     orientation?: "horizontal" | "vertical";
 }
 export default function TagList<T extends object>({ items, orientation, renderEmptyState, ...props }: TagListProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { TooltipProps, TooltipTrigger } from "react-aria-components";
+import "./Tooltip.css";
+export default function Tooltip({ children, placement, }: React.PropsWithChildren<TooltipProps>): import("react/jsx-runtime").JSX.Element;
+export { TooltipTrigger };

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

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

package/dist/esm/types/components/index.d.ts

@@ -1,7 +1,10 @@
 import "@bcgov/design-tokens/css/variables.css";
 export { default as Button } from "./Button";
-export { default as Header, SvgBcLogo } from "./Header";
+export { default as Header } from "./Header";
+export { default as Footer, FooterLinks } from "./Footer";
 export { default as Select } from "./Select";
+export { default as SvgBcLogo } from "./SvgBcLogo";
 export { default as Tag } from "./Tag";
 export { default as TagGroup } from "./TagGroup";
 export { default as TagList } from "./TagList";
+export { default as Tooltip, TooltipTrigger } from "./Tooltip";

package/dist/index.d.ts

@@ -1,26 +1,119 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps as ButtonProps$1, SelectProps as SelectProps$1, ListBoxItemProps as ListBoxItemProps$1, Key, TagProps as TagProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1 } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, SelectProps as SelectProps$1, ListBoxItemProps as ListBoxItemProps$1, Key, TagProps as TagProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TooltipProps } from 'react-aria-components';
+export { TooltipTrigger } from 'react-aria-components';
 import React$1 from 'react';
 
 interface ButtonProps extends ButtonProps$1 {
+    /**
+     * Defaults to `medium`. `small` is shorter vertically.
+     */
     size?: "small" | "medium";
+    /**
+     * Defaults to `primary`.
+     */
     variant?: "primary" | "secondary" | "tertiary" | "link";
+    /**
+     * For destructive/deletion actions.
+     */
     danger?: boolean;
+    /**
+     * If true, renders a square button intended for a single icon.
+     */
     isIconButton?: boolean;
 }
 declare function Button({ size, variant, danger, isIconButton, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
-declare function SvgBcLogo(): react_jsx_runtime.JSX.Element;
 interface HeaderProps {
+    /**
+     * Link element that surrounds the logo. Use what's appropriate for your
+     * router, like a `<Link>`. Defaults to a generic HTML link element like
+     * `<a href="/" title="Government of British Columbia">`.
+     */
     logoLinkElement?: React$1.ReactElement;
+    /**
+     * Image used for the logo. Defaults to an SVG of the Government of B.C. logo.
+     */
     logoImage?: JSX.Element;
+    /**
+     * Array of link elements that are not visible until they are focused. Used
+     * for accessibility for keyboard users, to let them easily skip to main
+     * content, navigation, etc.
+     */
     skipLinks?: React$1.ReactElement[];
+    /**
+     * Header title text that appears to the right of the logo.
+     */
     title?: string;
+    /**
+     * Desired element that renders the `title` string. Defaults to `<span>`.
+     */
     titleElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
 }
 declare function Header({ children, logoLinkElement, logoImage, skipLinks, title, titleElement, }: React$1.PropsWithChildren<HeaderProps>): react_jsx_runtime.JSX.Element;
 
+interface FooterLinksProps {
+    /**
+     * Title for the list of links - associated to the list of links as a `<figcaption>`
+     */
+    title: string;
+    /**
+     * Array of link elements (`<a>` or `<Link>`)
+     */
+    links: React$1.ReactElement[];
+}
+/**
+ * A titled list of links for use in the Footer. Rendered inside a `<figure>`
+ * with the `title` prop inside of the `<figcaption>`.
+ * @param {FooterLinksProps} props
+ * @returns {React.ReactElement}
+ */
+declare function FooterLinks({ title, links }: FooterLinksProps): react_jsx_runtime.JSX.Element;
+interface FooterProps {
+    /**
+     * Land acknowledgement block (defaults to Gov.bc.ca land acknowledgement)
+     */
+    acknowledgement?: React$1.ReactElement;
+    /**
+     * Logo slot (defaults to BC Gov horizontal logo)
+     */
+    logo?: React$1.ReactElement;
+    /**
+     * Contact information block (defaults to Gov.bc.ca contact information)
+     */
+    contact?: React$1.ReactElement;
+    /**
+     * Link list block (defaults to Gov.bc.ca link list).
+     *
+     * Pass the `<FooterLinks>` component for a styles-included list.
+     */
+    links?: React$1.ReactElement;
+    /**
+     * Copyright string (defaults to current year)
+     */
+    copyright?: string;
+    /**
+     * Hide the acknowledgement section
+     */
+    hideAcknowledgement?: boolean;
+    /**
+     * Hide the logo, contact information, and links section
+     */
+    hideLogoAndLinks?: boolean;
+    /**
+     * Hide the copyright string
+     */
+    hideCopyright?: boolean;
+}
+/**
+ * A `<footer>` element with default content included.
+ *
+ * Passing `children` replaces `logo`, `contact`, and `links`.
+ * @param {FooterProps} props
+ * @returns {React.ReactElement}
+ */
+declare function Footer({ children, acknowledgement, logo, contact, links, copyright, hideAcknowledgement, hideLogoAndLinks, hideCopyright, }: React$1.PropsWithChildren<FooterProps>): react_jsx_runtime.JSX.Element;
+
 interface ListBoxItemProps extends ListBoxItemProps$1 {
     /** Text label for the option. Provide an `id` if this is not unique. */
     label: string;
@@ -55,23 +148,47 @@ interface SelectProps<T extends object> extends SelectProps$1<T> {
 /** Select displays a collapsible list of options and allows a user to select one of them. */
 declare function Select<T extends object>({ items, sections, label, placeholder, size, ...props }: SelectProps<T>): react_jsx_runtime.JSX.Element;
 
+declare function SvgBcLogo({ id }: {
+    id?: string | undefined;
+}): react_jsx_runtime.JSX.Element;
+
 interface TagProps extends TagProps$1 {
+    /**
+     * Icon that appears to the left of the `textValue` field
+     */
     icon?: React.ReactNode;
+    /**
+     * Background color
+     */
     color?: "bc-blue" | "bc-gold" | "blue" | "dark" | "gray" | "grey" | "green" | "red" | "yellow";
 }
 declare function Tag({ color, icon, id, textValue }: TagProps): react_jsx_runtime.JSX.Element;
 
 interface TagGroupProps extends TagGroupProps$1 {
+    /**
+     * Labels the TagGroup, appears above the tags.
+     */
     label?: string;
+    /**
+     * Extended description of the TagGroup, appears below the tags.
+     */
     description?: string;
+    /**
+     * Error message, appears below the tags and below the optional description.
+     */
     errorMessage?: string;
 }
 declare function TagGroup({ children, label, description, errorMessage, ...props }: TagGroupProps): react_jsx_runtime.JSX.Element;
 
 interface TagListProps<T> extends Pick<TagListProps$1<T>, "children" | "renderEmptyState"> {
     items: TagProps[];
+    /**
+     * Used to set the `flex-direction` on the TagList.
+     */
     orientation?: "horizontal" | "vertical";
 }
 declare function TagList<T extends object>({ items, orientation, renderEmptyState, ...props }: TagListProps<T>): react_jsx_runtime.JSX.Element;
 
-export { Button, Header, Select, SvgBcLogo, Tag, TagGroup, TagList };
+declare function Tooltip({ children, placement, }: React$1.PropsWithChildren<TooltipProps>): react_jsx_runtime.JSX.Element;
+
+export { Button, Footer, FooterLinks, Header, Select, SvgBcLogo, Tag, TagGroup, TagList, Tooltip };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@bcgov/design-system-react-components",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "scripts": {
-    "rollup": "rollup -c --bundleConfigAsCjs",
+    "rollup": "rm -rf dist && rollup -c --bundleConfigAsCjs",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "storybook-dev": "storybook dev -p 6006",
     "storybook-build": "storybook build",
@@ -32,30 +32,31 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-essentials": "^8.0.0-rc.1",
-    "@storybook/addon-interactions": "^8.0.0-rc.1",
-    "@storybook/addon-links": "^8.0.0-rc.1",
-    "@storybook/blocks": "^8.0.0-rc.1",
-    "@storybook/react": "^8.0.0-rc.1",
-    "@storybook/react-vite": "^8.0.0-rc.1",
+    "@storybook/addon-a11y": "^8.0.2",
+    "@storybook/addon-essentials": "^8.0.2",
+    "@storybook/addon-interactions": "^8.0.2",
+    "@storybook/addon-links": "^8.0.2",
+    "@storybook/blocks": "^8.0.2",
+    "@storybook/react": "^8.0.2",
+    "@storybook/react-vite": "^8.0.2",
     "@storybook/testing-library": "^0.2.2",
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.20",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
-    "rollup": "^4.12.1",
+    "rollup": "^4.13.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.0.0-rc.1",
+    "storybook": "^8.0.2",
     "tslib": "^2.6.2",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.5"
+    "typescript": "^5.4.3",
+    "vite": "^5.2.2"
   },
   "author": "Tyler Krys <Tyler.Krys@gov.bc.ca>",
   "license": "Apache-2.0",

package/dist/assets/index-t1vEzjyT.css

@@ -1 +0,0 @@
-#root{max-width:1280px;margin:0 auto;padding:2rem}h1,h2,h3,h4,h5,h6{font-family:var(--typography-font-families-bc-sans)}:root{--surface-opacity-0: 0;--surface-opacity-10: .1;--surface-opacity-20: .2;--surface-opacity-30: .3;--surface-opacity-40: .4;--surface-opacity-50: .5;--surface-opacity-60: .6;--surface-opacity-70: .7;--surface-opacity-80: .8;--surface-opacity-90: .9;--surface-opacity-100: 1;--surface-primary-default: #013366;--surface-primary-hover: #1E5189;--surface-primary-disabled: #edebe9;--surface-primary-active: #2E5DD7;--surface-secondary-default: #ffffff;--surface-secondary-hover: #edebe9;--surface-secondary-disabled: #edebe9;--surface-secondary-active: #2E5DD7;--surface-tertiary-default: #ffffff00;--surface-tertiary-hover: #eceae8;--surface-tertiary-disabled: #edebe9;--surface-tertiary-active: #2E5DD7;--surface-danger-default: #ce3e39;--surface-danger-hover: #a2312d;--surface-danger-active: #2E5DD7;--surface-danger-disabled: #edebe9;--surface-background-white: #ffffff;--surface-background-light: #faf9f8;--surface-border-light: #d8d8d8;--surface-border-medium: #898785;--surface-border-dark: #353433;--surface-overlay-default: #00000073;--surface-brand-gold-10: #fff8e9;--surface-brand-gold-20: #feebc2;--surface-brand-gold-30: #fddf9d;--surface-brand-gold-40: #fdd47b;--surface-brand-gold-50: #fcc85d;--surface-brand-gold-60: #f8ba47;--surface-brand-gold-70: #ce9737;--surface-brand-gold-80: #a5792b;--surface-brand-gold-90: #7e5d21;--surface-brand-gold-100: #584215;--surface-brand-blue-10: #f1f8fe;--surface-brand-blue-20: #d8eafd;--surface-brand-blue-30: #c1ddfc;--surface-brand-blue-40: #a8d0fb;--surface-brand-blue-50: #91c4fa;--surface-brand-blue-60: #7ab8f9;--surface-brand-blue-70: #5595d9;--surface-brand-blue-80: #3470b1;--surface-brand-blue-90: #1e5189;--surface-brand-blue-100: #053662;--surface-brand-gray-10: #faf9f8;--surface-brand-gray-20: #f3f2f1;--surface-brand-gray-30: #eceae8;--surface-brand-gray-40: #e0dedc;--surface-brand-gray-50: #d1cfcd;--surface-brand-gray-60: #c6c5c3;--surface-brand-gray-70: #9f9d9c;--surface-brand-gray-80: #605e5c;--surface-brand-gray-90: #3d3c3b;--surface-brand-gray-100: #353433;--surface-brand-gray-110: #252423;--surface-brand-gray-white: #ffffff;--surface-icons-primary: #2d2d2d;--surface-icons-secondary: #474543;--surface-icons-disabled: #9f9d9c;--surface-icons-link: #255a90;--surface-icons-info: #053662;--surface-icons-danger: #ce3e39;--surface-icons-success: #42814a;--surface-icons-warning: #f8bb47;--surface-support-surface-color-info: #f7f9fc;--surface-support-surface-color-danger: #f4e1e2;--surface-support-surface-color-success: #f6fff8;--surface-support-surface-color-warning: #fef1d8;--surface-support-border-color-info: #053662;--surface-support-border-color-danger: #ce3e39;--surface-support-border-color-success: #42814a;--surface-support-border-color-warning: #f8bb47;--surface-shadow-none: 0 .30000001192092896px .8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021;--surface-shadow-small: 0 .6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021;--surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021;--surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038;--surface-border-radius-none: 0;--surface-border-radius-small: 2px;--surface-border-radius-medium: 4px;--surface-border-radius-large: 6px;--surface-border-width-none: 0;--surface-border-width-small: 1px;--surface-border-width-medium: 2px;--surface-border-width-large: 4px;--surface-size-small: 0px 8px;--surface-size-medium: 6px 16px;--support-support-surface-color-info: #f7f9fc;--support-support-surface-color-danger: #f4e1e2;--support-support-surface-color-success: #f6fff8;--support-support-surface-color-warning: #fef1d8;--support-support-border-color-info: #053662;--support-support-border-color-danger: #ce3e39;--support-support-border-color-success: #42814a;--support-support-border-color-warning: #f8bb47;--icons-icons-primary: #2d2d2d;--icons-icons-secondary: #474543;--icons-icons-disabled: #9f9d9c;--icons-icons-link: #255a90;--icons-icons-info: #053662;--icons-icons-danger: #ce3e39;--icons-icons-success: #42814a;--icons-icons-warning: #f8bb47;--icons-icons-primary-invert: #ffffff;--icons-size-xsmall: 14px;--icons-size-small: 16px;--icons-size-medium: 20px;--icons-size-large: 24px;--icons-size-xlarge: 32px;--layout-border-width-none: 0;--layout-border-width-small: 1px;--layout-border-width-medium: 2px;--layout-border-width-large: 4px;--layout-padding-none: 0;--layout-padding-xsmall: 4px;--layout-padding-small: 8px;--layout-padding-medium: 16px;--layout-padding-large: 24px;--layout-padding-xlarge: 32px;--layout-margin-none: 0;--layout-margin-hair: 2px;--layout-margin-xsmall: 4px;--layout-margin-small: 8px;--layout-margin-medium: 16px;--layout-margin-large: 24px;--layout-margin-xlarge: 32px;--layout-margin-xxlarge: 40px;--layout-margin-xxxlarge: 48px;--layout-margin-huge: 56px;--typography-font-families-bc-sans: "BC Sans";--typography-line-heights-xxdense: 1.313rem;--typography-line-heights-xdense: 1.688rem;--typography-line-heights-dense: 1.913rem;--typography-line-heights-regular: 2.125rem;--typography-line-heights-sparse: 2.25rem;--typography-line-heights-xsparse: 3rem;--typography-line-heights-xxsparse: 3.375rem;--typography-line-heights-auto: AUTO;--typography-font-weights-regular: 400;--typography-font-weights-bold: 700;--typography-font-weights-italic: Italic;--typography-font-size-label: .875rem;--typography-font-size-body: 1rem;--typography-font-size-large-body: 1.125rem;--typography-font-size-h5: 1.25rem;--typography-font-size-h4: 1.5rem;--typography-font-size-h3: 1.75rem;--typography-font-size-h2: 2rem;--typography-font-size-h1: 2.25rem;--typography-font-size-display: 3rem;--typography-letter-spacing-0: 0em;--typography-paragraph-spacing-0: 0;--typography-regular-label: 400 .875rem/1.313rem "BC Sans";--typography-regular-body: 400 1rem/1.688rem "BC Sans";--typography-regular-large-body: 400 1.125rem/1.913rem "BC Sans";--typography-regular-h5: 400 1.25rem/2.125rem "BC Sans";--typography-regular-h4: 400 1.5rem/2.25rem "BC Sans";--typography-regular-h3: 400 1.75rem/3rem "BC Sans";--typography-regular-h2: 400 2rem/3.375rem "BC Sans";--typography-regular-h1: 400 2.25rem/3rem "BC Sans";--typography-regular-display: 400 3rem/AUTO "BC Sans";--typography-bold-label: 700 .875rem/1.313rem "BC Sans";--typography-bold-body: 700 1rem/1.688rem "BC Sans";--typography-bold-large-body: 700 1.125rem/1.913rem "BC Sans";--typography-bold-h5: 700 1.25rem/2.125rem "BC Sans";--typography-bold-h4: 700 1.5rem/2.25rem "BC Sans";--typography-bold-h3: 700 1.75rem/3.375rem "BC Sans";--typography-bold-h2: 700 2rem/3rem "BC Sans";--typography-bold-h1: 700 2.25rem/AUTO "BC Sans";--typography-bold-display: 700 3rem/AUTO "BC Sans";--typography-italic-label: 400 italic .875rem/1.313rem "BC Sans";--typography-italic-body: 400 italic 1rem/1.688rem "BC Sans";--typography-italic-large-body: 400 italic 1.125rem/1.913rem "BC Sans";--typography-italic-h5: 400 italic 1.25rem/2.125rem "BC Sans";--typography-italic-h4: 400 italic 1.5rem/2.25rem "BC Sans";--typography-italic-h3: 400 italic 1.75rem/3.375rem "BC Sans";--typography-italic-h2: 400 italic 2rem/3.375rem "BC Sans";--typography-italic-h1: 400 italic 2.25rem/3rem "BC Sans";--typography-italic-display: 400 italic 3rem/AUTO "BC Sans";--typography-text-case-none: none;--typography-text-decoration-none: none;--typography-paragraph-indent-0: 0px;--typography-color-primary: #2D2D2D;--typography-color-secondary: #474543;--typography-color-disabled: #9F9D9C;--typography-color-link: #255A90;--typography-color-primary-invert: #FFFFFF;--typography-color-secondary-invert: #ECEAE8}@font-face{font-family:BC Sans;font-style:normal;font-weight:400;src:url(/assets/BCSans-Regular-ysGfRp0T.woff2) format("woff2"),url(/assets/BCSans-Regular-jMf6NRx3.woff) format("woff")}@font-face{font-family:BC Sans;font-style:italic;font-weight:400;src:url(/assets/BCSans-Italic-Pz_cGW4F.woff2) format("woff2"),url(/assets/BCSans-Italic-UhTyhoET.woff) format("woff")}@font-face{font-family:BC Sans;font-style:normal;font-weight:700;src:url(/assets/BCSans-Bold-onJZunl0.woff2) format("woff2"),url(/assets/BCSans-Bold-ZqE3sZik.woff) format("woff")}@font-face{font-family:BC Sans;font-style:italic;font-weight:700;src:url(/assets/BCSans-BoldItalic-GxGpSOWy.woff2) format("woff2"),url(/assets/BCSans-BoldItalic-4P_OlA2s.woff) format("woff")}@font-face{font-family:BC Sans;font-style:normal;font-weight:300;src:url(/assets/BCSans-Light-A03rbYd1.woff2) format("woff2"),url(/assets/BCSans-Light-playkmYo.woff) format("woff")}@font-face{font-family:BC Sans;font-style:italic;font-weight:300;src:url(/assets/BCSans-LightItalic-HTeW1g69.woff2) format("woff2"),url(/assets/BCSans-LightItalic-tgMWPWlK.woff) format("woff")}.react-aria-Button{border:none;border-radius:var(--layout-border-radius-medium, 4px);cursor:pointer;display:inline-flex;align-items:center;gap:var(--layout-padding-small);font:var(--typography-regular-body);padding-left:16px;padding-right:16px}.react-aria-Button[data-disabled]{cursor:not-allowed}.react-aria-Button[data-focused]{outline:2px solid var(--surface-primary-active)}.react-aria-Button.icon{align-items:center;justify-content:space-around}.react-aria-Button.small{min-height:32px}.react-aria-Button.small.icon{padding:unset;height:32px;width:32px}.react-aria-Button.medium{min-height:40px}.react-aria-Button.medium.icon{padding:unset;height:40px;width:40px}.react-aria-Button.primary{background:var(--surface-primary-default);color:var(--typography-color-primary-invert)}.react-aria-Button.primary.danger{background-color:var(--surface-danger-default)}.react-aria-Button.primary[data-disabled]{background-color:var(--surface-primary-disabled);color:var(--typography-color-disabled)}.react-aria-Button.primary[data-hovered]{background-color:var(--surface-primary-hover)}.react-aria-Button.primary.danger[data-hovered]{background-color:var(--surface-danger-hover)}.react-aria-Button.secondary{background-color:var(--surface-secondary-default);border:1px solid var(--surface-border-dark);color:var(--typography-color-primary)}.react-aria-Button.secondary.danger{border-color:var(--surface-support-border-color-danger);color:var(--surface-danger-default)}.react-aria-Button.secondary[data-disabled]{background-color:var(--surface-primary-disabled);border-color:var(--surface-border-light);color:var(--typography-color-disabled)}.react-aria-Button.secondary[data-hovered]{background-color:var(--surface-secondary-hover)}.react-aria-Button.secondary.danger[data-hovered]{background-color:var(--surface-support-surface-color-danger)}.react-aria-Button.tertiary{background-color:var(--surface-tertiary-default);color:var(--typography-color-primary)}.react-aria-Button.tertiary.danger{color:var(--surface-danger-default)}.react-aria-Button.tertiary[data-disabled]{background-color:var(--surface-tertiary-default);color:var(--typography-color-disabled)}.react-aria-Button.tertiary[data-hovered]{background-color:var(--surface-tertiary-hover)}.react-aria-Button.tertiary.danger[data-hovered]{background-color:var(--surface-support-surface-color-danger)}.react-aria-Button.link{background-color:var(--surface-tertiary-default);color:var(--typography-color-link);text-decoration:underline;text-underline-offset:.3em}.react-aria-Button.link.danger{color:var(--surface-danger-default)}.react-aria-Button.link[data-disabled]{color:var(--typography-color-disabled)}.react-aria-TagGroup{color:var(--typography-color-primary, #2d2d2d);font:var(--typography-regular-label, 400 .875rem/1.313rem "BC Sans")}.react-aria-Label,.react-aria-Text{display:block;margin:var(--layout-margin-small) var(--layout-margin-none)}.react-aria-Text.error{color:var(--surface-danger-default, #ce3e39)}.react-aria-Tag{color:var(--typography-color-primary, #2d2d2d);cursor:pointer;border-radius:var(--layout-margin-hair, 2px);border:1px solid;box-sizing:content-box;font:var(--typography-regular-label, 400 .875rem/1.313rem "BC Sans");padding:2px 8px;width:fit-content}.react-aria-Tag__contents{display:flex;align-items:center;gap:8px}.react-aria-Tag__contents .react-aria-Button{background:none;border:none;color:var(--typography-color-primary, #2d2d2d);cursor:pointer;display:flex;margin:0;padding:0}.react-aria-Tag.bc-blue{background-color:var(--surface-color-primary-default, #013366);border-color:var(--surface-color-primary-hover, #1e5189);color:var(--typography-color-primary-invert, #ffffff)}.react-aria-Tag.bc-blue .react-aria-Tag__contents>.react-aria-Button{color:var(--typography-color-primary-invert, #ffffff)}.react-aria-Tag.bc-gold{background-color:var(--surface-color-brand-gold-60, #f8ba47);border-color:var(--surface-color-primary-hover, #1e5189)}.react-aria-Tag.blue{background-color:var(--surface-support-surface-color-info, #f7f9fc);border-color:var(--surface-support-border-color-info, #053662)}.react-aria-Tag.dark{border-color:var(--surface-primary-hover, #1e5189);background:var(--surface-brand-gray-110, #252423);color:var(--typography-color-primary-invert, #ffffff)}.react-aria-Tag.dark .react-aria-Tag__contents>.react-aria-Button{color:var(--typography-color-primary-invert, #ffffff)}.react-aria-Tag.gray,.react-aria-Tag.grey{background-color:var(--surface-brand-gray-20, #f3f2f1);border-color:var(--surface-border-dark, #353433)}.react-aria-Tag.green{background-color:var(--surface-support-surface-color-success, #f6fff8);border-color:var(--surface-support-border-color-success, #42814a)}.react-aria-Tag.red{background-color:var(--surface-support-surface-color-danger, #f4e1e2);border-color:var(--surface-support-border-color-danger, #ce3e39)}.react-aria-Tag.yellow{background-color:var(--surface-support-surface-color-warning, #fef1d8);border-color:var(--surface-support-border-color-warning, #f8bb47)}.react-aria-Tag[data-selected]{border:2px solid var(--surface-primary-active, #2e5dd7);padding:1px 7px}.react-aria-Tag[data-focused]{outline:4px solid #3b99fc;outline-offset:1px}.react-aria-Tag[data-disabled]{background-color:var(--surface-primary-disabled, #edebe9);border-color:var(--surface-border-light, #d8d8d8);color:var(--typography-color-disabled, #9f9d9c);cursor:not-allowed}.react-aria-TagList{display:flex;flex-wrap:wrap;gap:var(--layout-padding-small);width:fit-content}.horizontal{flex-direction:row}.vertical{flex-direction:column}