@vitality-ds/components 5.7.0-alpha.8 → 6.0.0-alpha.1

package/dist/esm/Form/FormField/components/FormFieldLabel/index.spec.js

@@ -2,9 +2,10 @@ import { render } from "@testing-library/react";
 import React from "react";
 import { getLabelledById } from "../../logic";
 import FormFieldLabel from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe("getInputComponent", function () {
   it("should return a <label> component when no fieldType is provided", function () {
-    var _render = render(/*#__PURE__*/React.createElement(FormFieldLabel, {
+    var _render = render(/*#__PURE__*/_jsx(FormFieldLabel, {
         id: getLabelledById("foo"),
         fieldType: "text",
         content: "Foo",
@@ -14,7 +15,7 @@ describe("getInputComponent", function () {
     expect(container.children[0].tagName).toEqual("LABEL");
   });
   it("should return a <label> component when no fieldType `text` is provided", function () {
-    var _render2 = render(/*#__PURE__*/React.createElement(FormFieldLabel, {
+    var _render2 = render(/*#__PURE__*/_jsx(FormFieldLabel, {
         id: getLabelledById("foo"),
         fieldType: "text",
         content: "Foo",
@@ -24,7 +25,7 @@ describe("getInputComponent", function () {
     expect(container.children[0].tagName).toEqual("LABEL");
   });
   it("should return a <legend> element when passed a checkbox type", function () {
-    var _render3 = render(/*#__PURE__*/React.createElement(FormFieldLabel, {
+    var _render3 = render(/*#__PURE__*/_jsx(FormFieldLabel, {
         id: getLabelledById("foo"),
         fieldType: "checkbox",
         content: "Foo",

package/dist/esm/Form/FormField/index.js

@@ -12,6 +12,7 @@ import Fieldset from "./components/Fieldset";
 import FormFieldLabel from "./components/FormFieldLabel";
 import { getDescribedById, getErrorMessageId, getInputComponent, getLabelledById } from "./logic";
 import { IconWrapper } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function FormField(_ref) {
   var label = _ref.label,
     helperMessage = _ref.helperMessage,
@@ -29,42 +30,53 @@ function FormField(_ref) {
   var ariaDescribedById = getDescribedById(id);
   var ariaErrorId = getErrorMessageId(id);
   var ariaLabelledById = getLabelledById(id);
-  return /*#__PURE__*/React.createElement(Fieldset, restProps, /*#__PURE__*/React.createElement(Stack, {
-    spacing: "sm",
-    direction: "horizontal",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(Box, {
-    maxWidth: infoTooltipContent ? "90%" : "100%"
-  }, /*#__PURE__*/React.createElement(FormFieldLabel, {
-    fieldType: type,
-    content: label,
-    htmlFor: id,
-    id: ariaLabelledById,
-    required: required,
-    hasError: hasError
-  })), infoTooltipContent && /*#__PURE__*/React.createElement(Box, {
-    maxWidth: "10%",
-    minWidth: "16px" // this is the same width as the icon size="sm"
-    ,
-    minHeight: theme.fontSizes.caption.value
-  }, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
-    content: infoTooltipContent
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Info, {
-    color: "currentColor",
-    size: "0.875rem"
-  })))))), /*#__PURE__*/React.createElement(Component, _extends({
-    onChange: onChange,
-    value: value,
-    id: id,
-    "aria-labelledby": ariaLabelledById,
-    "aria-describedby": ariaDescribedById,
-    "aria-required": required,
-    "aria-errormessage": ariaErrorId,
-    required: required,
-    hasError: hasError
-  }, inputProps)), helperMessage && /*#__PURE__*/React.createElement(HelperMessage, {
-    hasError: hasError,
-    id: hasError ? ariaErrorId : ariaDescribedById
-  }, helperMessage));
+  return /*#__PURE__*/_jsxs(Fieldset, _extends({}, restProps, {
+    children: [/*#__PURE__*/_jsxs(Stack, {
+      spacing: "sm",
+      direction: "horizontal",
+      align: "center",
+      children: [/*#__PURE__*/_jsx(Box, {
+        maxWidth: infoTooltipContent ? "90%" : "100%",
+        children: /*#__PURE__*/_jsx(FormFieldLabel, {
+          fieldType: type,
+          content: label,
+          htmlFor: id,
+          id: ariaLabelledById,
+          required: required,
+          hasError: hasError
+        })
+      }), infoTooltipContent && /*#__PURE__*/_jsx(Box, {
+        maxWidth: "10%",
+        minWidth: "16px" // this is the same width as the icon size="sm"
+        ,
+        minHeight: theme.fontSizes.caption.value,
+        children: /*#__PURE__*/_jsx(IconWrapper, {
+          children: /*#__PURE__*/_jsx(Tooltip, {
+            content: infoTooltipContent,
+            children: /*#__PURE__*/_jsx("div", {
+              children: /*#__PURE__*/_jsx(Info, {
+                color: "currentColor",
+                size: "0.875rem"
+              })
+            })
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Component, _extends({
+      onChange: onChange,
+      value: value,
+      id: id,
+      "aria-labelledby": ariaLabelledById,
+      "aria-describedby": ariaDescribedById,
+      "aria-required": required,
+      "aria-errormessage": ariaErrorId,
+      required: required,
+      hasError: hasError
+    }, inputProps)), helperMessage && /*#__PURE__*/_jsx(HelperMessage, {
+      hasError: hasError,
+      id: hasError ? ariaErrorId : ariaDescribedById,
+      children: helperMessage
+    })]
+  }));
 }
 export default FormField;

package/dist/esm/Form/FormField/index.spec.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { render } from "@testing-library/react";
 import React from "react";
 import FormField from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 var mockProps = {
   id: "id",
   label: "label",
@@ -15,7 +16,7 @@ var mockProps = {
 };
 describe("<FormField />", function () {
   it("`id` and `for` attributes match on input and label given the `text` type", function () {
-    var _render = render(/*#__PURE__*/React.createElement(FormField, _extends({
+    var _render = render(/*#__PURE__*/_jsx(FormField, _extends({
         type: "text"
       }, mockProps))),
       container = _render.container;

package/dist/esm/Form/HelperMessage/index.js

@@ -2,23 +2,26 @@ import { CircleAlert } from "lucide-react";
 import React from "react";
 import Stack from "../../Stack";
 import { BaseHelperMessage } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var HelperMessage = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var hasError = _ref.hasError,
     id = _ref.id,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement(BaseHelperMessage, {
+  return /*#__PURE__*/_jsx(BaseHelperMessage, {
     hasError: hasError,
     id: id,
     ref: forwardedRef,
-    "aria-live": hasError ? "assertive" : "off"
-  }, hasError ? /*#__PURE__*/React.createElement(Stack, {
-    direction: "horizontal",
-    spacing: "xs",
-    align: "center"
-  }, hasError && /*#__PURE__*/React.createElement(CircleAlert, {
-    size: "0.875rem",
-    color: "var(--vitality-colors-critical11)"
-  }), children) : children);
+    "aria-live": hasError ? "assertive" : "off",
+    children: hasError ? /*#__PURE__*/_jsxs(Stack, {
+      direction: "horizontal",
+      spacing: "xs",
+      align: "center",
+      children: [hasError && /*#__PURE__*/_jsx(CircleAlert, {
+        size: "0.875rem",
+        color: "var(--vitality-colors-critical11)"
+      }), children]
+    }) : children
+  });
 });
 HelperMessage.displayName = "HelperMessage";
 export default HelperMessage;

package/dist/esm/Form/Label/index.js

@@ -1,16 +1,19 @@
 import React from "react";
 import { BaseLabel, BaseLabelRequired } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Label(_ref) {
   var content = _ref.content,
     htmlFor = _ref.htmlFor,
     required = _ref.required,
     hasError = _ref.hasError,
     id = _ref.id;
-  return /*#__PURE__*/React.createElement(BaseLabel, {
+  return /*#__PURE__*/_jsxs(BaseLabel, {
     htmlFor: htmlFor,
-    id: id
-  }, content, required && /*#__PURE__*/React.createElement(BaseLabelRequired, {
-    hasError: hasError
-  }, "*"));
+    id: id,
+    children: [content, required && /*#__PURE__*/_jsx(BaseLabelRequired, {
+      hasError: hasError,
+      children: "*"
+    })]
+  });
 }
 export default Label;

package/dist/esm/Form/Legend/index.js

@@ -1,10 +1,12 @@
 import React from "react";
 import { BaseLegend } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function Legend(_ref) {
   var content = _ref.content,
     id = _ref.id;
-  return /*#__PURE__*/React.createElement(BaseLegend, {
-    id: id
-  }, content);
+  return /*#__PURE__*/_jsx(BaseLegend, {
+    id: id,
+    children: content
+  });
 }
 export default Legend;

package/dist/esm/IconButton/index.js

@@ -5,30 +5,34 @@ import { Plus } from "lucide-react";
 import React from "react";
 import Tooltip from "../Tooltip";
 import { BaseIconButton, BaseIconButtonLink } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var onClick = _ref.onClick,
     children = _ref.children,
     disabled = _ref.disabled,
     isSelected = _ref.isSelected,
     _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(Plus, null) : _ref$icon,
+    icon = _ref$icon === void 0 ? /*#__PURE__*/_jsx(Plus, {}) : _ref$icon,
     size = _ref.size,
     href = _ref.href,
     tooltipContent = _ref.tooltipContent,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var IconButtonComponent = href ? BaseIconButtonLink : BaseIconButton;
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    content: tooltipContent
-  }, /*#__PURE__*/React.createElement(IconButtonComponent, _extends({
-    ref: forwardedRef,
-    "aria-label": tooltipContent,
-    selected: isSelected,
-    onClick: onClick,
-    disabled: disabled,
-    size: size,
-    href: href,
-    type: "button"
-  }, restProps), icon));
+  return /*#__PURE__*/_jsx(Tooltip, {
+    content: tooltipContent,
+    children: /*#__PURE__*/_jsx(IconButtonComponent, _extends({
+      ref: forwardedRef,
+      "aria-label": tooltipContent,
+      selected: isSelected,
+      onClick: onClick,
+      disabled: disabled,
+      size: size,
+      href: href,
+      type: "button"
+    }, restProps, {
+      children: icon
+    }))
+  });
 });
 IconButton.displayName = "IconButton";
 export default IconButton;

package/dist/esm/IconButton/styles/BaseIconButton.styles.js

@@ -24,6 +24,7 @@ export default css({
   alignSelf: "center",
   svg: {
     pointerEvents: "none",
+    color: "$$iconColor",
     verticalAlign: "middle",
     width: "1rem",
     height: "1rem",

package/dist/esm/Input/Checkbox/components/BaseCheckbox/index.js

@@ -5,6 +5,7 @@ import React from "react";
 import CheckedIcon from "../CheckedIcon";
 import IndeterminateIcon from "../IndeterminateIcon";
 import { BaseCheckboxIndicator, BaseCheckboxRoot } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function BaseCheckbox(_ref) {
   var checked = _ref.checked,
     disabled = _ref.disabled,
@@ -13,12 +14,16 @@ export default function BaseCheckbox(_ref) {
     name = _ref.name,
     onCheckedChange = _ref.onCheckedChange,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(BaseCheckboxRoot, _extends({
+  return /*#__PURE__*/_jsx(BaseCheckboxRoot, _extends({
     checked: checked,
     disabled: disabled,
     id: id,
     ref: forwardedRef,
     name: name,
     onCheckedChange: onCheckedChange
-  }, props), /*#__PURE__*/React.createElement(BaseCheckboxIndicator, null, checked === "indeterminate" && /*#__PURE__*/React.createElement(IndeterminateIcon, null), checked === true && /*#__PURE__*/React.createElement(CheckedIcon, null)));
+  }, props, {
+    children: /*#__PURE__*/_jsxs(BaseCheckboxIndicator, {
+      children: [checked === "indeterminate" && /*#__PURE__*/_jsx(IndeterminateIcon, {}), checked === true && /*#__PURE__*/_jsx(CheckedIcon, {})]
+    })
+  }));
 }

package/dist/esm/Input/Checkbox/components/CheckedIcon.js

@@ -1,14 +1,16 @@
 import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 function CheckedIcon() {
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "12",
     height: "12",
     fill: "none",
-    viewBox: "0 0 12 12"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M0 6.646l4.286 4.285L12 3.217 10.791 2 4.286 8.506 1.209 5.437 0 6.646z"
-  }));
+    viewBox: "0 0 12 12",
+    children: /*#__PURE__*/_jsx("path", {
+      fill: "currentColor",
+      d: "M0 6.646l4.286 4.285L12 3.217 10.791 2 4.286 8.506 1.209 5.437 0 6.646z"
+    })
+  });
 }
 export default CheckedIcon;

package/dist/esm/Input/Checkbox/components/IndeterminateIcon.js

@@ -1,16 +1,18 @@
 import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 function IndeterminateIcon() {
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "12",
     height: "12",
     fill: "none",
-    viewBox: "0 0 12 12"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M11 7H1V5h10v2z",
-    clipRule: "evenodd"
-  }));
+    viewBox: "0 0 12 12",
+    children: /*#__PURE__*/_jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M11 7H1V5h10v2z",
+      clipRule: "evenodd"
+    })
+  });
 }
 export default IndeterminateIcon;

package/dist/esm/Input/Checkbox/index.js

@@ -4,6 +4,7 @@ var _excluded = ["css", "className", "style", "asChild", "checked", "disabled",
 import React from "react";
 import BaseCheckbox from "./components/BaseCheckbox";
 import { BaseCheckboxContainer, BaseCheckboxText } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var css = _ref.css,
     className = _ref.className,
@@ -17,17 +18,20 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     children = _ref.children,
     onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(BaseCheckboxContainer, null, /*#__PURE__*/React.createElement(BaseCheckbox, _extends({
-    checked: checked,
-    disabled: disabled,
-    id: id,
-    forwardedRef: forwardedRef,
-    name: name,
-    onCheckedChange: onChange
-  }, props)), label && /*#__PURE__*/React.createElement(BaseCheckboxText, {
-    disabled: disabled,
-    htmlFor: id
-  }, label));
+  return /*#__PURE__*/_jsxs(BaseCheckboxContainer, {
+    children: [/*#__PURE__*/_jsx(BaseCheckbox, _extends({
+      checked: checked,
+      disabled: disabled,
+      id: id,
+      forwardedRef: forwardedRef,
+      name: name,
+      onCheckedChange: onChange
+    }, props)), label && /*#__PURE__*/_jsx(BaseCheckboxText, {
+      disabled: disabled,
+      htmlFor: id,
+      children: label
+    })]
+  });
 });
 Checkbox.displayName = "Checkbox";
 export default Checkbox;

package/dist/esm/Input/CurrencyInput/index.js

@@ -4,6 +4,7 @@ var _excluded = ["value", "onBlur", "currencySymbol", "currencyCode"];
 import React from "react";
 import TextInput from "../TextInput";
 import { format } from "./logic";
+import { jsx as _jsx } from "react/jsx-runtime";
 var CurrencyInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var value = _ref.value,
     _ref$onBlur = _ref.onBlur,
@@ -19,7 +20,7 @@ var CurrencyInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     e.target.value = formattedValue;
     onBlur(e);
   };
-  return /*#__PURE__*/React.createElement(TextInput, _extends({
+  return /*#__PURE__*/_jsx(TextInput, _extends({
     value: value
   }, props, {
     type: "text",

package/dist/esm/Input/DatePicker/components/Calendar/index.js

@@ -9,6 +9,7 @@ import { CALENDAR_CONSTANTS } from "./constants";
 import useCalendar from "./hooks/useCalendar";
 import { convertYearMonthStateToDate, dateObjectToShortHand, determineSelectedDate, generateMonths, generateYears, getInitialState, stateManager } from "./logic";
 import { BaseCalendar, TopBarContainer } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Calendar(_ref) {
   var minYear = _ref.minYear,
     maxYear = _ref.maxYear,
@@ -28,60 +29,64 @@ export default function Calendar(_ref) {
     handleMouseOver = _useCalendar.handleMouseOver,
     prevMonthTooltip = _useCalendar.prevMonthTooltip,
     nextMonthTooltip = _useCalendar.nextMonthTooltip;
-  return /*#__PURE__*/React.createElement(BaseCalendar, null, /*#__PURE__*/React.createElement(TopBarContainer, null, /*#__PURE__*/React.createElement(IconButton, {
-    tooltipContent: prevMonthTooltip,
-    size: "compact",
-    disabled: prevMonthTooltip === "End of Range",
-    icon: /*#__PURE__*/React.createElement(ChevronLeft, null),
-    onClick: function onClick() {
-      dispatch({
-        type: "DECREMENT_MONTH"
-      });
-    }
-  }), /*#__PURE__*/React.createElement(Select, {
-    onChange: function onChange(monthSelection) {
-      return dispatch({
-        type: "GOTO_MONTH",
-        monthSelection: monthSelection
-      });
-    },
-    name: "".concat(name, "MonthSelect"),
-    id: "".concat(id, "MonthSelect"),
-    value: state.selectedMonth.value,
-    options: generateMonths(),
-    portalMenu: true
-  }), /*#__PURE__*/React.createElement(Select, {
-    onChange: function onChange(yearSelection) {
-      return dispatch({
-        type: "GOTO_YEAR",
-        yearSelection: yearSelection
-      });
-    },
-    id: "".concat(id, "YearSelect"),
-    value: state.selectedYear.value,
-    name: "".concat(name, "YearSelect"),
-    options: generateYears(minYear, maxYear),
-    portalMenu: true
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    tooltipContent: nextMonthTooltip,
-    disabled: nextMonthTooltip === "End of Range",
-    size: "compact",
-    icon: /*#__PURE__*/React.createElement(ChevronRight, null),
-    onClick: function onClick() {
-      dispatch({
-        type: "INCREMENT_MONTH"
-      });
-    }
-  })), /*#__PURE__*/React.createElement(MonthView, {
-    activeStartDate: convertYearMonthStateToDate(state.selectedYear.yearInt, state.selectedMonth.monthInt),
-    onMouseOver: handleMouseOver,
-    hover: Array.isArray(selectedDate) && hoverValue,
-    value: selectedDate,
-    valueType: CALENDAR_CONSTANTS.valueType,
-    calendarType: CALENDAR_CONSTANTS.calendarType,
-    showFixedNumberOfWeeks: true,
-    onClick: function onClick(date) {
-      return onSelectedDateChange(dateObjectToShortHand(date));
-    }
-  }));
+  return /*#__PURE__*/_jsxs(BaseCalendar, {
+    children: [/*#__PURE__*/_jsxs(TopBarContainer, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        tooltipContent: prevMonthTooltip,
+        size: "compact",
+        disabled: prevMonthTooltip === "End of Range",
+        icon: /*#__PURE__*/_jsx(ChevronLeft, {}),
+        onClick: function onClick() {
+          dispatch({
+            type: "DECREMENT_MONTH"
+          });
+        }
+      }), /*#__PURE__*/_jsx(Select, {
+        onChange: function onChange(monthSelection) {
+          return dispatch({
+            type: "GOTO_MONTH",
+            monthSelection: monthSelection
+          });
+        },
+        name: "".concat(name, "MonthSelect"),
+        id: "".concat(id, "MonthSelect"),
+        value: state.selectedMonth.value,
+        options: generateMonths(),
+        portalMenu: true
+      }), /*#__PURE__*/_jsx(Select, {
+        onChange: function onChange(yearSelection) {
+          return dispatch({
+            type: "GOTO_YEAR",
+            yearSelection: yearSelection
+          });
+        },
+        id: "".concat(id, "YearSelect"),
+        value: state.selectedYear.value,
+        name: "".concat(name, "YearSelect"),
+        options: generateYears(minYear, maxYear),
+        portalMenu: true
+      }), /*#__PURE__*/_jsx(IconButton, {
+        tooltipContent: nextMonthTooltip,
+        disabled: nextMonthTooltip === "End of Range",
+        size: "compact",
+        icon: /*#__PURE__*/_jsx(ChevronRight, {}),
+        onClick: function onClick() {
+          dispatch({
+            type: "INCREMENT_MONTH"
+          });
+        }
+      })]
+    }), /*#__PURE__*/_jsx(MonthView, {
+      activeStartDate: convertYearMonthStateToDate(state.selectedYear.yearInt, state.selectedMonth.monthInt),
+      onMouseOver: handleMouseOver,
+      hover: Array.isArray(selectedDate) && hoverValue,
+      value: selectedDate,
+      valueType: CALENDAR_CONSTANTS.valueType,
+      calendarType: CALENDAR_CONSTANTS.calendarType,
+      showFixedNumberOfWeeks: true,
+      onClick: function onClick(date) {
+        return onSelectedDateChange(dateObjectToShortHand(date));
+      }
+    })]
+  });
 }