@bcgov/design-system-react-components 0.6.1-pr636 → 0.6.1-pr642

package/dist/cjs/index.cjs

@@ -28192,7 +28192,7 @@ function AlertDialog({ children, variant = "info", role = "dialog", title, isClo
     return (jsxRuntime.jsx($de32f1b87079253c$export$3ddf2d174ce01153, { className: `bcds-react-aria-AlertDialog ${variant}`, role: role, ...props, children: ({ close }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "bcds-react-aria-AlertDialog--Header", children: [!isIconHidden && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--Icon", children: getIcon$1(variant) })), title && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--Title", slot: "title", children: title })), isCloseable && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close", type: "button", onPress: close, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) }))] }), children && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--children", slot: "children", children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) })), buttons && (jsxRuntime.jsx(ButtonGroup, { alignment: "end", orientation: "horizontal", children: buttons }))] })) }));
 }
 
-var css_248z$r = ".bcds-react-aria-Calendar {\n  display: inline-flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: var(--layout-margin-large);\n  padding: var(--layout-padding-medium);\n  box-sizing: border-box;\n  justify-content: center;\n  background-color: var(--surface-color-forms-default);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-Calendar--GridContainer {\n  display: inline-flex;\n  flex: 0 1 0;\n  flex-direction: column;\n  gap: var(--layout-margin-small);\n  box-sizing: border-box;\n}\n.bcds-react-aria-Calendar--Header {\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n.bcds-react-aria-Calendar--HeaderButton {\n  width: var(--icons-size-large);\n  height: var(--icons-size-large);\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.bcds-react-aria-Calendar--Header > h2.bcds-react-aria-Heading {\n  flex: 1;\n  text-align: center;\n  font: var(--typography-bold-small-body);\n  margin: var(--layout-margin-none);\n}\n.bcds-react-aria-Calendar--Header > button > svg {\n  min-width: var(--icons-size-small);\n  height: var(--icons-size-small);\n}\n.bcds-react-aria-Calendar--Grid {\n  text-align: center;\n  border-spacing: var(--layout-margin-xsmall);\n}\n.bcds-react-aria-Calendar--Cell {\n  cursor: pointer;\n  box-sizing: border-box;\n  width: var(--icons-size-xlarge);\n  height: var(--icons-size-xlarge);\n  padding: var(--layout-padding-xsmall);\n  border: solid var(--layout-border-width-small) transparent;\n}\n/* Hide days outside current month or visible range */\n.bcds-react-aria-Calendar--Cell[data-outside-visible-range],\n.bcds-react-aria-Calendar--Cell[data-outside-month] {\n  visibility: hidden;\n}\n\n/* Calendar item states */\n.bcds-react-aria-Calendar--Cell[data-hovered] {\n  background-color: var(--surface-color-secondary-button-hover);\n  border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Calendar--Cell[data-selected] {\n  background-color: var(--surface-color-primary-button-default);\n  color: var(--typography-color-primary-invert);\n  border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Calendar--Cell[data-selected][data-focused],\n.bcds-react-aria-Calendar--Cell[data-selected][data-focus-visible] {\n  background-color: var(--surface-color-primary-button-default);\n  color: var(--typography-color-primary-invert);\n  outline: solid var(--layout-border-width-small)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n  border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Calendar--Cell[data-selected][data-hovered] {\n  background-color: var(--surface-color-primary-button-hover);\n}\n.bcds-react-aria-Calendar--Cell[data-focused] {\n  outline: none;\n}\n.bcds-react-aria-Calendar--Cell[data-focus-visible] {\n  background-color: var(--surface-color-secondary-button-hover);\n  border: solid var(--layout-border-width-small)\n    var(--surface-color-border-active);\n  border-radius: var(--layout-border-radius-small);\n  outline: none;\n}\n.bcds-react-aria-Calendar--Cell[data-today] {\n  font: var(--typography-bold-small-body);\n}\n.bcds-react-aria-Calendar--Cell[data-disabled],\n.bcds-react-aria-Calendar--Cell[data-unavailable][data-disabled] {\n  color: var(--typography-color-disabled);\n  text-decoration: none;\n  cursor: not-allowed;\n}\n.bcds-react-aria-Calendar--Cell[data-unavailable] {\n  color: var(--typography-color-danger);\n  text-decoration: line-through;\n  cursor: not-allowed;\n}\n";
+var css_248z$r = ".bcds-react-aria-Calendar {\n  display: inline-flex;\n  flex-direction: column;\n  flex: 1 1 0;\n  gap: var(--layout-margin-small);\n  padding: var(--layout-padding-medium);\n  box-sizing: border-box;\n  background-color: var(--surface-color-forms-default);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-Calendar--Header {\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n.bcds-react-aria-Calendar--Header > h2.bcds-react-aria-Heading {\n  font: var(--typography-bold-small-body);\n  margin: var(--layout-margin-none);\n}\n.bcds-react-aria-Calendar--Header > button > svg {\n  min-width: var(--icons-size-small);\n  height: var(--icons-size-small);\n}\n.bcds-react-aria-Calendar--Grid {\n  text-align: center;\n  border-spacing: var(--layout-margin-xsmall);\n}\n.bcds-react-aria-Calendar--Cell {\n  cursor: pointer;\n  box-sizing: border-box;\n  width: var(--icons-size-xlarge);\n  height: var(--icons-size-xlarge);\n  padding: var(--layout-padding-xsmall);\n  border: solid var(--layout-border-width-small) transparent;\n}\n\n/* Calendar item states */\n.bcds-react-aria-Calendar--Cell[data-outside-visible-range] {\n  display: none;\n}\n.bcds-react-aria-Calendar--Cell[data-hovered] {\n  background-color: var(--surface-color-secondary-button-hover);\n  border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Calendar--Cell[data-selected] {\n  background-color: var(--surface-color-primary-button-default);\n  color: var(--typography-color-primary-invert);\n  border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Calendar--Cell[data-selected][data-focused],\n.bcds-react-aria-Calendar--Cell[data-selected][data-focus-visible] {\n  background-color: var(--surface-color-primary-button-default);\n  color: var(--typography-color-primary-invert);\n  outline: solid var(--layout-border-width-small)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n  border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Calendar--Cell[data-selected][data-hovered] {\n  background-color: var(--surface-color-primary-button-hover);\n}\n.bcds-react-aria-Calendar--Cell[data-focused] {\n  outline: none;\n}\n.bcds-react-aria-Calendar--Cell[data-focus-visible] {\n  background-color: var(--surface-color-secondary-button-hover);\n  border: solid var(--layout-border-width-small)\n    var(--surface-color-border-active);\n  border-radius: var(--layout-border-radius-small);\n  outline: none;\n}\n.bcds-react-aria-Calendar--Cell[data-today] {\n  font: var(--typography-bold-small-body);\n}\n.bcds-react-aria-Calendar--Cell[data-disabled] {\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n.bcds-react-aria-Calendar--Cell[data-unavailable] {\n  color: var(--typography-color-danger);\n  text-decoration: line-through;\n  cursor: not-allowed;\n}\n";
 styleInject(css_248z$r);
 
 var css_248z$q = "/* Headings */\nh1.bcds-react-aria-Heading {\n  font: var(--typography-bold-h1);\n}\n\nh2.bcds-react-aria-Heading {\n  font: var(--typography-bold-h2);\n}\n\nh3.bcds-react-aria-Heading {\n  font: var(--typography-bold-h3);\n}\n\nh4.bcds-react-aria-Heading {\n  font: var(--typography-bold-h4);\n}\n\nh5.bcds-react-aria-Heading {\n  font: var(--typography-bold-h5);\n}\n\nh6.bcds-react-aria-Heading {\n  font: var(--typography-bold-h6);\n}\n\n/* Text colour */\n.bcds-react-aria-Heading.primary {\n  color: var(--typography-color-primary);\n}\n.bcds-react-aria-Heading.primaryInvert {\n  color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Heading.secondary {\n  color: var(--typography-color-secondary);\n}\n.bcds-react-aria-Heading.secondaryInvert {\n  color: var(--typography-color-secondary-invert);\n}\n.bcds-react-aria-Heading.disabled {\n  color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Heading.danger {\n  color: var(--typography-color-danger);\n}\n";
@@ -28212,14 +28212,8 @@ function SvgChevronRightIcon({ id = "chevron-right-icon" }) {
     return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 640 640", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z", fill: "currentColor" }) }));
 }
 
-function Calendar({ visibleDuration = { months: 1 }, ...props }) {
-    const monthFormatter = $896ba0a80a8f4d36$export$85fd5fdf27bacc79({
-        month: "long",
-        year: "numeric",
-    });
-    return (jsxRuntime.jsx($dfd62f934fc76fed$export$e1aef45b828286de, { className: "bcds-react-aria-Calendar", visibleDuration: visibleDuration, ...props, children: ({ state }) => [...Array(visibleDuration.months).keys()].map((i) => (jsxRuntime.jsxs("div", { className: "bcds-react-aria-Calendar--GridContainer", children: [jsxRuntime.jsxs("div", { className: "bcds-react-aria-Calendar--Header", children: [jsxRuntime.jsx("div", { className: "bcds-react-aria-Calendar--HeaderButton", children: i === 0 && (jsxRuntime.jsx(Button, { slot: "previous", size: "xsmall", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgChevronLeftIcon, {}) })) }), jsxRuntime.jsx(Heading, { children: monthFormatter.format(state.visibleRange.start
-                                .add({ months: i })
-                                .toDate(state.timeZone)) }), jsxRuntime.jsx("div", { className: "bcds-react-aria-Calendar--HeaderButton", children: i === (visibleDuration.months ?? 1) - 1 && (jsxRuntime.jsx(Button, { slot: "next", size: "xsmall", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgChevronRightIcon, {}) })) })] }), jsxRuntime.jsx($dfd62f934fc76fed$export$5bd780d491cfc46c, { offset: { months: i }, className: `bcds-react-aria-Calendar--Grid`, weekdayStyle: "short", children: (date) => (jsxRuntime.jsx($dfd62f934fc76fed$export$5d847498420df57b, { className: "bcds-react-aria-Calendar--Cell", date: date })) })] }, i))) }));
+function Calendar({ ...props }) {
+    return (jsxRuntime.jsxs($dfd62f934fc76fed$export$e1aef45b828286de, { className: "bcds-react-aria-Calendar", ...props, children: [jsxRuntime.jsxs("header", { className: "bcds-react-aria-Calendar--Header", children: [jsxRuntime.jsx(Button, { slot: "previous", size: "xsmall", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgChevronLeftIcon, {}) }), jsxRuntime.jsx(Heading, {}), jsxRuntime.jsx(Button, { slot: "next", size: "xsmall", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgChevronRightIcon, {}) })] }), jsxRuntime.jsx($dfd62f934fc76fed$export$5bd780d491cfc46c, { className: `bcds-react-aria-Calendar--Grid`, weekdayStyle: "short", children: (date) => (jsxRuntime.jsx($dfd62f934fc76fed$export$5d847498420df57b, { className: "bcds-react-aria-Calendar--Cell", date: date })) })] }));
 }
 
 var css_248z$p = ".bcds-Callout {\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-radius: var(--layout-border-radius-medium)\n    var(--layout-border-radius-none) var(--layout-border-radius-none)\n    var(--layout-border-radius-medium);\n}\n\n.bcds-Callout--Container {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  gap: var(--layout-margin-small);\n}\n\n.bcds-Callout--Container > .bcds-Callout--Title {\n  font: var(--typography-bold-large-body);\n  color: var(--typography-color-primary);\n}\n\n.bcds-Callout--Container > .bcds-Callout--Description {\n  font: var(--typography-regular-body);\n  color: var(--typography-color-secondary);\n}\n\n/* Theme - light grey (default) */\n.bcds-Callout.lightGrey {\n  background-color: var(--surface-color-background-light-gray);\n  border-left: var(--layout-border-width-large) solid var(--theme-primary-blue);\n}\n\n/* Theme - light blue */\n.bcds-Callout.lightBlue {\n  background-color: var(--theme-blue-10);\n  border-left: var(--layout-border-width-large) solid var(--theme-primary-blue);\n}\n\n/* Theme - light gold */\n.bcds-Callout.lightGold {\n  background-color: var(--theme-gold-10);\n  border-left: var(--layout-border-width-large) solid var(--theme-primary-blue);\n}\n\n/* Theme - blue  */\n.bcds-Callout.Blue {\n  background-color: var(--surface-color-background-dark-blue);\n  border-left: var(--layout-border-width-large) solid var(--theme-primary-gold);\n}\n\n.bcds-Callout.Blue .bcds-Callout--Title {\n  color: var(--typography-color-primary-invert);\n}\n\n.bcds-Callout.Blue .bcds-Callout--Description {\n  color: var(--typography-color-secondary-invert);\n}\n\n/* Theme - grey */\n.bcds-Callout.Grey {\n  background-color: var(--theme-gray-80);\n  border-left: var(--layout-border-width-large) solid var(--theme-primary-gold);\n}\n\n.bcds-Callout.Grey .bcds-Callout--Title {\n  color: var(--typography-color-primary-invert);\n}\n\n.bcds-Callout.Grey .bcds-Callout--Description {\n  color: var(--typography-color-secondary-invert);\n}\n\n/* Theme - black */\n.bcds-Callout.Black {\n  background-color: var(--theme-gray-100);\n  border-left: var(--layout-border-width-large) solid var(--theme-primary-gold);\n}\n\n.bcds-Callout.Black .bcds-Callout--Title {\n  color: var(--typography-color-primary-invert);\n}\n\n.bcds-Callout.Black .bcds-Callout--Description {\n  color: var(--typography-color-secondary-invert);\n}\n\n/* Border disabled */\n.bcds-Callout.lightGrey.noBorder,\n.bcds-Callout.lightGold.noBorder,\n.bcds-Callout.lightBlue.noBorder,\n.bcds-Callout.Blue.noBorder,\n.bcds-Callout.Grey.noBorder,\n.bcds-Callout.Black.noBorder {\n  border-left: none;\n  border-radius: var(--layout-border-radius-none);\n}\n";