@bcgov/design-system-react-components 0.2.2-pr486 → 0.2.2-rc1

package/dist/cjs/types/components/Form/Form.d.ts

@@ -1,2 +1,3 @@
 import { FormProps as ReactAriaFormProps } from "react-aria-components";
-export default function Form({ ...props }: ReactAriaFormProps): import("react/jsx-runtime").JSX.Element;
+export type FormProps = ReactAriaFormProps;
+export default function Form({ ...props }: FormProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/Form/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./Form";
-export type { FormProps } from "react-aria-components";
+export type { FormProps } from "./Form";

package/dist/cjs/types/components/Switch/Switch.d.ts

@@ -1,6 +1,7 @@
 import { SwitchProps as ReactAriaSwitchProps } from "react-aria-components";
 import "./Switch.css";
 export interface SwitchProps extends ReactAriaSwitchProps {
+    children?: React.ReactNode;
     labelPosition?: "left" | "right";
 }
 export default function Switch({ labelPosition, children, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;

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

@@ -18,7 +18,6 @@ export { default as SvgChevronUpIcon } from "./Icons/SvgChevronUpIcon";
 export { default as SvgChevronDownIcon } from "./Icons/SvgChevronDownIcon";
 export { default as SvgCloseIcon } from "./Icons/SvgCloseIcon";
 export { default as SvgInfoIcon } from "./Icons/SvgInfoIcon";
-export { default as SvgTooltipArrowUp } from "./Icons/SvgTooltipArrowUp";
 export { default as Tag } from "./Tag";
 export { default as TagGroup } from "./TagGroup";
 export { default as TagList } from "./TagList";

package/dist/esm/index.js

@@ -14543,10 +14543,6 @@ function Select({ items, sections, label, description, placeholder, size = "medi
                             : [{ id: "section", header: "", items: items ? items : [] }], children: (section) => (jsxs($7135fc7d473fd974$export$6e2c8f0811a474ce, { id: section.id, className: "bcds-react-aria-Section", children: [section?.header && (jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "bcds-react-aria-Select--Header", children: section.header })), jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: section.items, children: (item) => (jsxs($eed445e0843c11d0$export$a11e76429ed99b4, { id: item?.id ? item.id : item.label, className: `bcds-react-aria-Select--ListBoxItem ${item?.isDestructive ? "destructive" : ""}`, textValue: item.label, children: [item?.iconLeft && (jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconLeft })), jsxs("div", { className: "bcds-react-aria-Select--ListBoxItem-Text-container", children: [jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "label", className: "bcds-react-aria-Select--ListBoxItem-Text-label", children: item.label }), item.description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-Select--ListBoxItem-Text-description", children: item.description }))] }), item?.iconRight && (jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconRight }))] })) })] })) }) })] })) }));
 }
 
-function SvgTooltipArrowUp({ id = "tooltip-arrow" }) {
-    return (jsx("svg", { id: id, width: "19", height: "9", viewBox: "0 0 19 9", xmlns: "http://www.w3.org/2000/svg", children: jsx("g", { children: jsx("path", { d: "M8.4188 1.41421C9.19985 0.633163 10.4662 0.633165 11.2472 1.41421L18.833 9L0.833008 9L8.4188 1.41421Z", fill: "currentColor" }) }) }));
-}
-
 var css_248z$6 = ".bcds-react-aria-Tag {\n  color: var(--typography-color-primary);\n  cursor: pointer;\n  border-radius: var(--layout-margin-hair);\n  border: var(--layout-border-width-small) solid;\n  display: flex;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  font: var(--typography-regular-label);\n  padding: var(--layout-padding-hair) var(--layout-padding-small);\n  width: fit-content;\n}\n.bcds-react-aria-Tag .react-aria-Button {\n  background: none;\n  border: none;\n  color: var(--typography-color-primary);\n  cursor: pointer;\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n/* Tag colors */\n.bcds-react-aria-Tag.bc-blue {\n  background-color: var(--theme-primary-blue);\n  border-color: var(--theme-blue-90);\n  color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-blue .react-aria-Button {\n  color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-gold {\n  background-color: var(--theme-primary-gold);\n  border-color: var(--theme-blue-90);\n}\n.bcds-react-aria-Tag.blue {\n  background-color: var(--support-surface-color-info);\n  border-color: var(--support-border-color-info);\n}\n.bcds-react-aria-Tag.dark {\n  background: var(--theme-gray-110);\n  border-color: var(--theme-blue-90);\n  color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.dark .react-aria-Button {\n  color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.gray,\n.bcds-react-aria-Tag.grey {\n  background-color: var(--theme-gray-20);\n  border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Tag.green {\n  background-color: var(--support-surface-color-success);\n  border-color: var(--support-border-color-success);\n}\n.bcds-react-aria-Tag.red {\n  background-color: var(--support-surface-color-danger);\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Tag.yellow {\n  background-color: var(--support-surface-color-warning);\n  border-color: var(--support-border-color-warning);\n}\n\n/* Selected */\n.bcds-react-aria-Tag[data-selected] {\n  border-radius: var(--layout-border-radius-small);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-active);\n}\n\n/* Focused */\n.bcds-react-aria-Tag[data-focused] {\n  outline: var(--layout-border-width-medium) solid\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled */\n.bcds-react-aria-Tag[data-disabled] {\n  background-color: var(--surface-color-primary-button-disabled);\n  border-color: var(--surface-color-border-default);\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n";
 styleInject(css_248z$6);
 
@@ -14582,11 +14578,13 @@ function TextArea({ label, description, errorMessage, maxLength, onChange, value
     return (jsx($bcdf0525bf22703d$export$2c73285ae9390cec, { className: `bcds-react-aria-TextArea`, ...props, children: ({ isRequired, isInvalid }) => (jsxs(Fragment, { children: [label && (jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextArea--Label", children: isRequired ? `${label} (required)` : label })), jsx("div", { className: "bcds-react-aria-TextArea--Container", children: jsx($216918bed6669f72$export$f5c9f3c2c4054eec, { className: "bcds-react-aria-TextArea--Input", value: value, onChange: (e) => handleChange(e.target.value) }) }), description || maxLength ? (jsxs("div", { className: "bcds-react-aria-TextArea--Description", children: [description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "text", children: description })), maxLength && (jsxs("div", { className: "counter", children: [charCount, "/", maxLength] }))] })) : null, isInvalid && (jsxs("div", { className: "bcds-react-aria-TextArea--Error", children: [jsx(SvgExclamationIcon, {}), jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
 }
 
-var css_248z$2 = ".bcds-react-aria-TextField {\n  display: inline-flex;\n  flex-direction: column;\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  align-self: stretch;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextField--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TextField--Label .required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Styles for the text description below the input field */\n.bcds-react-aria-TextField--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextField--container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  background: var(--surface-color-forms-default);\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  padding: var(--layout-padding-small) 12px;\n}\n\n/* Sizes */\n.bcds-react-aria-TextField--container.small {\n  height: var(--layout-margin-xlarge);\n  min-height: var(--layout-margin-xlarge);\n}\n\n.bcds-react-aria-TextField--container.medium {\n  height: var(--layout-margin-xxlarge);\n  min-height: var(--layout-margin-xxlarge);\n}\n\n/* Text input field */\n.bcds-react-aria-TextField--Input {\n  font: var(--typography-regular-body);\n  padding: var(--layout-padding-none);\n  color: var(--typography-color-primary);\n  border: none;\n  flex-grow: 1;\n}\n\n.bcds-react-aria-TextField--Input::placeholder {\n  color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n\n.bcds-react-aria-TextField--container\n  > .bcds-react-aria-TextField--Input[data-focused] {\n  outline: none;\n}\n\n.bcds-react-aria-TextField--container:focus-within {\n  border-radius: var(--layout-border-radius-large);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n.bcds-react-aria-TextField--container:hover {\n  border-color: var(--surface-color-border-dark);\n}\n\n/* Disabled and invalid states */\n\n.bcds-react-aria-TextField[data-disabled]\n  > .bcds-react-aria-TextField--container {\n  background: var(--surface-color-forms-disabled);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField--Input[data-disabled] {\n  color: var(--typography-color-placeholder);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField[data-invalid]\n  > .bcds-react-aria-TextField--container {\n  border-radius: var(--layout-border-radius-medium);\n  border: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n  > .bcds-react-aria-TextField--container {\n  background: var(--surface-color-forms-disabled);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n  > .bcds-react-aria-TextField--container\n  > .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextField--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextField[data-invalid]\n  > .bcds-react-aria-TextField--container\n  > svg#exclamation-icon {\n  color: var(--icons-color-danger);\n  min-width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
+var css_248z$2 = ".bcds-react-aria-TextField {\n  display: inline-flex;\n  flex-direction: column;\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  align-self: stretch;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextField--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TextField--Label .required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Styles for the text description below the input field */\n.bcds-react-aria-TextField--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextField--container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  background: var(--surface-color-forms-default);\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  padding: var(--layout-padding-small) 12px;\n}\n\n/* Sizes */\n.bcds-react-aria-TextField--container.small {\n  height: var(--layout-margin-xlarge);\n  min-height: var(--layout-margin-xlarge);\n}\n\n.bcds-react-aria-TextField--container.medium {\n  height: var(--layout-margin-xxlarge);\n  min-height: var(--layout-margin-xxlarge);\n}\n\n/* Text input field */\n.bcds-react-aria-TextField--Input {\n  font: var(--typography-regular-body);\n  padding: var(--layout-padding-none);\n  color: var(--typography-color-primary);\n  border: none;\n  flex-grow: 1;\n}\n\n.bcds-react-aria-TextField--Input::placeholder {\n  color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n\n.bcds-react-aria-TextField--container\n  > .bcds-react-aria-TextField--Input[data-focused] {\n  outline: none;\n}\n\n.bcds-react-aria-TextField--container:focus-within {\n  border-radius: var(--layout-border-radius-large);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n.bcds-react-aria-TextField--container:hover {\n  border-color: var(--surface-color-border-dark);\n}\n\n/* Disabled and invalid states */\n\n.bcds-react-aria-TextField[data-disabled]\n  > .bcds-react-aria-TextField--container {\n  background: var(--surface-color-forms-disabled);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField--Input[data-disabled] {\n  color: var(--typography-color-placeholder);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField[data-invalid]\n  > .bcds-react-aria-TextField--container {\n  border-radius: var(--layout-border-radius-medium);\n  border: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n  > .bcds-react-aria-TextField--container {\n  background: var(--surface-color-forms-disabled);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n  > .bcds-react-aria-TextField--container\n  > .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextField--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n";
 styleInject(css_248z$2);
 
+/* Icon displayed when input is in invalid state */
+const iconError = (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsx("g", { id: "20px/Error icon", children: jsx("path", { id: "Icon", d: "M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z", fill: "var(--icons-color-danger)" }) }) }));
 function TextField({ size, label, description, errorMessage, iconLeft, iconRight, ...props }) {
-    return (jsx($bcdf0525bf22703d$export$2c73285ae9390cec, { className: "bcds-react-aria-TextField", ...props, children: ({ isRequired, isInvalid }) => (jsxs(Fragment, { children: [label && (jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextField--Label", children: [label, isRequired && (jsx("span", { className: "bcds-react-aria-TextField--Label required", children: "(required)" }))] })), jsxs("div", { className: `bcds-react-aria-TextField--container ${size === "small" ? "small" : "medium"}`, children: [iconLeft, jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: "bcds-react-aria-TextField--Input" }), isInvalid && jsx(SvgExclamationIcon, {}), iconRight] }), description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-TextField--Description`, children: description })), jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { className: "bcds-react-aria-TextField--Error", children: errorMessage })] })) }));
+    return (jsx($bcdf0525bf22703d$export$2c73285ae9390cec, { className: "bcds-react-aria-TextField", ...props, children: ({ isRequired, isInvalid }) => (jsxs(Fragment, { children: [label && (jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextField--Label", children: [label, isRequired && (jsx("span", { className: "bcds-react-aria-TextField--Label required", children: "(required)" }))] })), jsxs("div", { className: `bcds-react-aria-TextField--container ${size === "small" ? "small" : "medium"}`, children: [iconLeft, jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: "bcds-react-aria-TextField--Input" }), isInvalid && iconError, iconRight] }), description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-TextField--Description`, children: description })), jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { className: "bcds-react-aria-TextField--Error", children: errorMessage })] })) }));
 }
 
 var css_248z$1 = ".bcds-react-aria-Switch {\n  display: flex;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  forced-color-adjust: none;\n}\n\n/* Container */\n.bcds-react-aria-Switch > .indicator {\n  align-items: center;\n  width: var(--layout-margin-xxlarge);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-primary-disabled);\n  border-radius: var(--icons-size-medium);\n  transition: all 200ms;\n}\n\n/* Indicator */\n.bcds-react-aria-Switch > .indicator::before {\n  content: \"\";\n  display: block;\n  box-sizing: border-box;\n  width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-secondary-default);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-medium);\n  border-radius: var(--icons-size-small);\n  transition: all 200ms;\n}\n\n/* Selected */\n.bcds-react-aria-Switch[data-selected] > .indicator {\n  background-color: var(--surface-color-primary-default);\n}\n\n.bcds-react-aria-Switch[data-selected] > .indicator::before {\n  transform: translateX(100%);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-default);\n}\n\n/* Hover */\n.bcds-react-aria-Switch[data-hovered] > .indicator {\n  cursor: pointer;\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator {\n  cursor: pointer;\n  background-color: var(--surface-color-primary-hover);\n}\n\n.bcds-react-aria-Switch[data-hovered] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-hover);\n}\n\n/* Focused */\n.bcds-react-aria-Switch[data-focus-visible] > .indicator {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled */\n.bcds-react-aria-Switch[data-disabled] {\n  color: var(--typography-color-disabled);\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator {\n  background-color: var(--surface-color-primary-disabled);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator::before {\n  background-color: var(--theme-gray-10);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-default);\n}\n\n/* Read only */\n.bcds-react-aria-Switch[data-readonly] > .indicator {\n  cursor: not-allowed;\n}\n";
@@ -14599,9 +14597,13 @@ function Switch({ labelPosition = "right", children, ...props }) {
 var css_248z = ".bcds-react-aria-Tooltip {\n  background-color: var(--theme-gray-110);\n  border-radius: var(--layout-border-radius-medium);\n  box-shadow: var(--surface-shadow-small);\n  color: var(--typography-color-primary-invert);\n  font: var(--typography-regular-small-body);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-small);\n  transform: translate3d(0, 0, 0);\n}\n\n.bcds-react-aria-Tooltip > .bcds-react-aria-OverlayArrow {\n  color: var(--theme-gray-110);\n}\n\n.bcds-react-aria-Tooltip[data-placement=\"top\"] > .bcds-react-aria-OverlayArrow,\n.bcds-react-aria-Tooltip[data-placement=\"bottom\"]\n  > .bcds-react-aria-OverlayArrow {\n  height: 9px;\n  width: 19px;\n}\n\n.bcds-react-aria-Tooltip[data-placement=\"right\"]\n  > .bcds-react-aria-OverlayArrow,\n.bcds-react-aria-Tooltip[data-placement=\"left\"]\n  > .bcds-react-aria-OverlayArrow {\n  height: 19px;\n  width: 9px;\n}\n\n/* Top placement */\n.bcds-react-aria-Tooltip[data-placement=\"top\"] {\n  margin-bottom: 10px; /* Offset is equal to the depth of the OverlayArrow */\n}\n.bcds-react-aria-Tooltip[data-placement=\"top\"] > .bcds-react-aria-OverlayArrow {\n  margin-top: -7.5px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"top\"]\n  > .bcds-react-aria-OverlayArrow\n  > svg {\n  transform: rotate(180deg);\n}\n\n/* Right placement */\n.bcds-react-aria-Tooltip[data-placement=\"right\"] {\n  margin-left: 10px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"right\"]\n  > .bcds-react-aria-OverlayArrow {\n  margin-top: -2px;\n  margin-right: 4.5px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"right\"]\n  > .bcds-react-aria-OverlayArrow\n  > svg {\n  transform: rotate(-90deg);\n}\n\n/* Bottom placement */\n.bcds-react-aria-Tooltip[data-placement=\"bottom\"] {\n  margin-top: 9px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"bottom\"]\n  > .bcds-react-aria-OverlayArrow {\n  margin-bottom: 6.5px;\n}\n\n/* Left placement */\n.bcds-react-aria-Tooltip[data-placement=\"left\"] {\n  margin-right: 10px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"left\"]\n  > .bcds-react-aria-OverlayArrow {\n  margin-top: -2px;\n  margin-left: -5.5px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"left\"]\n  > .bcds-react-aria-OverlayArrow\n  > svg {\n  transform: rotate(90deg);\n}\n";
 styleInject(css_248z);
 
+// This tooltip arrow is available as a plain SVG at src/assets/tooltip-arrow-up.svg
+function SvgTooltipArrowUp() {
+    return (jsx("svg", { width: "19", height: "9", viewBox: "0 0 19 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M8.4188 1.41421C9.19985 0.633163 10.4662 0.633165 11.2472 1.41421L18.833 9L0.833008 9L8.4188 1.41421Z", fill: "currentColor" }) }));
+}
 function Tooltip(props) {
     return (jsxs($4e3b923658d69c60$export$28c660c63b792dea, { className: "bcds-react-aria-Tooltip", ...props, children: [jsx($44f671af83e7d9e0$export$746d02f47f4d381, { className: "bcds-react-aria-OverlayArrow", children: jsx(SvgTooltipArrowUp, {}) }), jsx(Fragment, { children: props.children })] }));
 }
 
-export { Button, ButtonGroup, Checkbox, CheckboxGroup, Footer, FooterLinks, Form, Header, InlineAlert, Select, SvgBcLogo, SvgCheckCircleIcon, SvgCheckIcon, SvgChevronDownIcon, SvgChevronUpIcon, SvgCloseIcon, SvgDashIcon, SvgExclamationCircleIcon, SvgExclamationIcon, SvgInfoIcon, SvgTooltipArrowUp, Switch, Tag, TagGroup, TagList, TextArea, TextField, Tooltip, $4e3b923658d69c60$export$8c610744efcf8a1d as TooltipTrigger };
+export { Button, ButtonGroup, Checkbox, CheckboxGroup, Footer, FooterLinks, Form, Header, InlineAlert, Select, SvgBcLogo, SvgCheckCircleIcon, SvgCheckIcon, SvgChevronDownIcon, SvgChevronUpIcon, SvgCloseIcon, SvgDashIcon, SvgExclamationCircleIcon, SvgExclamationIcon, SvgInfoIcon, Switch, Tag, TagGroup, TagList, TextArea, TextField, Tooltip, $4e3b923658d69c60$export$8c610744efcf8a1d as TooltipTrigger };
 //# sourceMappingURL=index.js.map