@vitality-ds/components 4.0.0-alpha.0

package/dist/esm/DropdownMenu/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { EMPTY_OBJ } from "../helpers/logic/empties";
+import { FLOATING_ELEMENT_SIDE_OFFSET } from "./constants";
+import useDropdownMenuItems from "./hooks/useDropdownMenuItems";
+import useTrigger from "./hooks/useTrigger";
+import { BaseDropdown, Content, Trigger } from "./styled";
+function DropdownMenu(_ref) {
+  var items = _ref.items,
+    trigger = _ref.trigger,
+    _ref$preferredAlignme = _ref.preferredAlignment,
+    preferredAlignment = _ref$preferredAlignme === void 0 ? "start" : _ref$preferredAlignme,
+    disabled = _ref.disabled;
+  var _ref2 = trigger || EMPTY_OBJ,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? "button" : _ref2$type,
+    props = _ref2.props;
+  var triggerComponent = useTrigger(type, props, disabled);
+  var dropdownMenuComponents = useDropdownMenuItems(items);
+  return /*#__PURE__*/React.createElement(BaseDropdown, {
+    modal: false
+  }, /*#__PURE__*/React.createElement(Trigger, {
+    disabled: disabled,
+    asChild: true
+  }, triggerComponent), /*#__PURE__*/React.createElement(Content, {
+    align: preferredAlignment,
+    sideOffset: FLOATING_ELEMENT_SIDE_OFFSET
+  }, dropdownMenuComponents));
+}
+DropdownMenu.displayName = "DropdownMenu";
+export default DropdownMenu;

package/dist/esm/DropdownMenu/logic.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["type"];
+import getComponentFromLookup from "../helpers/logic/get-component-from-lookup";
+import { getHasCheckableItems } from "./components/utils";
+import { DROPDOWN_MENU_ITEM_TYPES } from "./constants";
+var defaultLookup = "item";
+
+// eslint-disable-next-line import/prefer-default-export
+export var getDropdownMenuComponents = function getDropdownMenuComponents(items) {
+  var hasCheckableItems = getHasCheckableItems(items);
+  if (Array.isArray(items) && items.length !== 0) {
+    return items.map(function (item, index) {
+      var _item$type = item.type,
+        type = _item$type === void 0 ? defaultLookup : _item$type,
+        props = _objectWithoutProperties(item, _excluded);
+      return getComponentFromLookup(DROPDOWN_MENU_ITEM_TYPES, type, defaultLookup, _extends({
+        indentContent: hasCheckableItems,
+        key: index
+      }, props));
+    });
+  }
+  return null;
+};

package/dist/esm/DropdownMenu/logic.spec.js

@@ -0,0 +1,8 @@
+import { getDropdownMenuComponents } from "./logic";
+describe("getDropdownMenuComponents", function () {
+  it("should return null when passed an empty array", function () {
+    var items = [];
+    var result = getDropdownMenuComponents(items);
+    expect(result).toBe(null);
+  });
+});

package/dist/esm/DropdownMenu/styled.js

@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import * as RadixDropdown from "@radix-ui/react-dropdown-menu";
+import { styled } from "@vitality-ds/system";
+import contentStyles from "./styles/Content.styles";
+import triggerStyles from "./styles/Trigger.styles";
+export var BaseDropdown = styled(RadixDropdown.Root);
+export var Trigger = styled(RadixDropdown.Trigger, triggerStyles);
+export var Content = styled(RadixDropdown.Content, contentStyles);

package/dist/esm/DropdownMenu/styles/Content.styles.js

@@ -0,0 +1,19 @@
+import { colorUseCases, css, getColorScaleValueByUseCase } from "@vitality-ds/system";
+var backgrounds = colorUseCases.backgrounds;
+export default css({
+  background: getColorScaleValueByUseCase("neutral", backgrounds.app),
+  boxShadow: "$lg",
+  borderRadius: "$large",
+  fontFamily: "$body",
+  fontSize: "$body",
+  lineHeight: "$body",
+  fontWeight: "$body",
+  padding: "$md",
+  display: "flex",
+  flexDirection: "column",
+  gap: "$sm",
+  zIndex: "$floatingElements",
+  boxSizing: "border-box",
+  maxHeight: "calc(var(--radix-dropdown-menu-content-available-height) - var(--vitality-space-md))",
+  overflow: "auto"
+});

package/dist/esm/DropdownMenu/styles/Trigger.styles.js

@@ -0,0 +1,2 @@
+import { css } from "@vitality-ds/system";
+export default css({});

package/dist/esm/DropdownMenu/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/EmptyState/components/EmptyStateImage/Images/folder.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+// eslint-disable-next-line import/prefer-default-export
+export function FolderImage() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "148",
+    height: "100",
+    fill: "none",
+    viewBox: "0 0 148 100"
+  }, /*#__PURE__*/React.createElement("path", {
+    className: "illustrationStroke",
+    fillRule: "evenodd",
+    d: "M35.414 59.05l1.351-4a1 1 0 111.895.64l-1.35 3.999-.57 1.685a1 1 0 01-1.894-.64l.568-1.684zM38.99 51.58a1 1 0 01-.627-1.267l3.973-11.763 1.306-3.87a1 1 0 011.895.64l-1.306 3.87-3.973 11.763a1 1 0 01-1.267.627z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationStroke",
+    fillRule: "evenodd",
+    d: "M131.289 25H50.927c-2.49 0-4.19.003-5.503.153-1.261.145-1.957.407-2.496.797-.539.39-1.005.97-1.536 2.122-.553 1.2-1.086 2.814-1.864 5.18L18.753 96.441a4.65 4.65 0 01-.258.626.644.644 0 00.577.933h95.672c2.471 0 4.157-.003 5.46-.151 1.251-.143 1.943-.402 2.48-.787.537-.386 1.003-.958 1.539-2.098.557-1.187 1.099-2.783 1.89-5.125l16.545-49c1.444-4.276 2.45-7.271 2.867-9.565.409-2.247.163-3.374-.422-4.19-.586-.816-1.574-1.409-3.835-1.74-2.306-.339-5.466-.344-9.979-.344zm-89.533-.67c-1.837 1.33-2.601 3.652-4.128 8.297l-20.775 63.19c-.04.122-.089.24-.147.356-.879 1.758.4 3.827 2.366 3.827h95.672c4.851 0 7.277 0 9.106-1.313 1.83-1.314 2.606-3.612 4.158-8.208l16.545-49c2.846-8.429 4.269-12.643 2.175-15.56C144.633 23 140.185 23 131.289 23H50.927c-4.89 0-7.335 0-9.172 1.33z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationStroke",
+    d: "M108.918 23l-1.058-5.885A5 5 0 00102.939 13H53.434a9 9 0 01-5.946-2.244l-8.534-7.51A5 5 0 0035.651 2H7.001a5 5 0 00-4.937 5.79l13.76 86c.134.835.47 1.594.952 2.23a2.63 2.63 0 01-.07.153 2.624 2.624 0 00.161 2.644 6.992 6.992 0 01-3.018-4.711l-13.76-86C-.59 3.853 2.695 0 7.003 0h28.65a7 7 0 014.623 1.745l8.535 7.51A7 7 0 0053.434 11h49.505a7 7 0 016.889 5.761L110.95 23h-2.032zM116.651 99.996c-.591.004-1.225.004-1.908.004h1.679c.077 0 .153-.001.229-.004z"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationFill",
+    d: "M11.278 18.274c-2.08 2.273-1.765 5.836-1.134 12.962l5.605 63.25a2.72 2.72 0 00.907 1.797 2.87 2.87 0 01.052-.11c.057-.115.106-.234.147-.357l20.774-63.189c1.527-4.645 2.29-6.968 4.128-8.297C43.594 23 46.039 23 50.929 23h54.669c-.467-2.534-1.075-4.132-2.345-5.251C101.269 16 98.331 16 92.455 16H24.09c-7.154 0-10.73 0-12.812 2.274z"
+  }));
+}

package/dist/esm/EmptyState/components/EmptyStateImage/Images/padlock.js

@@ -0,0 +1,32 @@
+import React from "react";
+// eslint-disable-next-line import/prefer-default-export
+export function PadlockImage() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "74",
+    height: "100",
+    fill: "none",
+    viewBox: "0 0 74 100"
+  }, /*#__PURE__*/React.createElement("path", {
+    className: "illustrationStroke",
+    fillRule: "evenodd",
+    d: "M8 34a6 6 0 00-6 6v52a6 6 0 006 6h58a6 6 0 006-6V40a6 6 0 00-6-6H8zm0-2a8 8 0 00-8 8v52a8 8 0 008 8h58a8 8 0 008-8V40a8 8 0 00-8-8H8z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationFill",
+    d: "M37 0c12.15 0 22 9.85 22 22v12H46V22a9 9 0 10-18 0v12H15V22C15 9.85 24.85 0 37 0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationStroke",
+    fillRule: "evenodd",
+    d: "M57 22c0-11.046-8.954-20-20-20s-20 8.954-20 20v10h9V22c0-6.075 4.925-11 11-11s11 4.925 11 11v10h9V22zm2 0C59 9.85 49.15 0 37 0S15 9.85 15 22v12h13V22a9 9 0 1118 0v12h13V22z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationFill",
+    d: "M42 67.245a8 8 0 10-10 0V78a5 5 0 0010 0V67.245z"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationStroke",
+    fillRule: "evenodd",
+    d: "M40 66.285l.75-.6a6 6 0 10-7.498 0l.748.6V78a3 3 0 106 0V66.285zm-8 .96a8 8 0 1110 0V78a5 5 0 01-10 0V67.245zM21.553 15.394a1 1 0 01-.447-1.341c2.092-4.185 5.267-7.386 9.543-8.99a1 1 0 01.702 1.873c-3.723 1.396-6.549 4.195-8.456 8.011a1 1 0 01-1.342.447zM19.999 24A1 1 0 0119 22.999L20 23l-1-.001v-.031a10.082 10.082 0 01.009-.355 28.334 28.334 0 01.511-4.308 1 1 0 011.962.39 26.341 26.341 0 00-.474 3.989l-.007.243v.06L21 23v.002a1 1 0 01-1.001.998z",
+    clipRule: "evenodd"
+  }));
+}

package/dist/esm/EmptyState/components/EmptyStateImage/Images/referenceScreen.js

@@ -0,0 +1,33 @@
+import React from "react";
+
+// eslint-disable-next-line import/prefer-default-export
+export function ReferenceScreenImage() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "125",
+    height: "100",
+    fill: "none",
+    viewBox: "0 0 125 100"
+  }, /*#__PURE__*/React.createElement("path", {
+    className: "illustrationStroke",
+    fillRule: "evenodd",
+    d: "M28 64.722l.001-4.222a1 1 0 012 0v6a1 1 0 01-2 0v-1.778zM29 56.5a1 1 0 01-1-1l.003-12.416V39a1 1 0 012 0v4.084L30 55.5a1 1 0 01-1 1z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationStroke",
+    fillRule: "evenodd",
+    d: "M66 86h31a3 3 0 003-3V39a3 3 0 00-3-3H29a3 3 0 00-3 3v44a3 3 0 003 3h31v8.418l-8.96 1.194A1.2 1.2 0 0051.2 98h23.6a1.2 1.2 0 00.16-2.388L66 94.418V86zm2 6.667V88h29a5 5 0 005-5V39a5 5 0 00-5-5H29a5 5 0 00-5 5v44a5 5 0 005 5h29v4.667l-7.224.963A3.2 3.2 0 0051.2 100h23.602a3.2 3.2 0 00.423-6.37L68 92.667z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationFill",
+    d: "M101.584 85h21.679c9.909-46.7-24.21-85-60.722-85-35.386 0-73.683 36.45-59.52 85h21.395A4.983 4.983 0 0124 83V39a5 5 0 015-5h68a5 5 0 015 5v44c0 .711-.148 1.388-.416 2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationFill",
+    d: "M63.5 60.5l31.407-20.483c1.33-.868 3.092.086 3.092 1.675V82a2 2 0 01-2 2H35.49c-1.97 0-2.754-2.545-1.127-3.653L63.5 60.5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationStroke",
+    fillRule: "evenodd",
+    d: "M80 66v-3a3 3 0 10-3 3h3zm-3-8a5 5 0 000 10h5v-5a5 5 0 00-5-5zM88 66h3a3 3 0 10-3-3v3zm8-3a5 5 0 00-10 0v5h5a5 5 0 005-5zM88 74v3a3 3 0 103-3h-3zm3 8a5 5 0 000-10h-5v5a5 5 0 005 5zM80 74h-3a3 3 0 103 3v-3zm-8 3a5 5 0 0010 0v-5h-5a5 5 0 00-5 5zM86 74h-4v-2h4v2zM86 68h-4v-2h4v2zM80 72v-4h2v4h-2zM86 72v-4h2v4h-2zM3.5 85a1 1 0 011-1h21a1 1 0 110 2h-21a1 1 0 01-1-1zm96 0a1 1 0 011-1H122a1 1 0 010 2h-21.5a1 1 0 01-1-1z",
+    clipRule: "evenodd"
+  }));
+}

package/dist/esm/EmptyState/components/EmptyStateImage/Images/speechBubble.js

@@ -0,0 +1,37 @@
+import React from "react";
+// eslint-disable-next-line import/prefer-default-export
+export function SpeechBubbleImage() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "220",
+    height: "102",
+    fill: "none",
+    viewBox: "0 0 220 102"
+  }, /*#__PURE__*/React.createElement("path", {
+    className: "illustrationFill",
+    d: "M171 46.269c0 15.935-9.654 29.999-24.371 38.378l.088 1.433h48.246a7.107 7.107 0 005.051-12.107 7.081 7.081 0 00-5.051-2.109h-6.094a7.107 7.107 0 01-7.107-7.108 7.106 7.106 0 017.107-7.108h19.293a7.109 7.109 0 100-14.216h-22.338a7.108 7.108 0 000-14.216h-18.709c2.508 5.28 3.885 11.033 3.885 17.053zM73.55 15H62.958a7.11 7.11 0 00-.072 14.216H22.34a7.108 7.108 0 100 14.216h25.385a7.11 7.11 0 110 14.216H7.107a7.108 7.108 0 000 14.216H46.71a7.108 7.108 0 000 14.216h39.34C69.836 77.934 59 63.152 59 46.27c0-6.02 1.377-11.773 3.885-17.053C65.393 23.936 69.03 19.129 73.55 15z"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationFill",
+    d: "M205.117 78.972a7.108 7.108 0 1014.216 0 7.108 7.108 0 00-14.216 0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationStroke",
+    fillRule: "evenodd",
+    d: "M144.556 83.757l1.084-.617C159.868 75.04 169 61.572 169 46.5 169 22.255 145.188 2 115 2S61 22.255 61 46.5 84.813 91 115 91c5.023 0 9.883-.566 14.492-1.622l.837-.192 15.183 10.062-.956-15.491zm-14.617 7.57A66.848 66.848 0 01115 93c-30.928 0-56-20.819-56-46.5S84.072 0 115 0s56 20.819 56 46.5c0 15.936-9.654 30-24.371 38.378l.88 14.246c.101 1.649-1.725 2.703-3.101 1.791l-14.469-9.588z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationStroke",
+    fillRule: "evenodd",
+    d: "M74.293 30.918a1 1 0 01.35 1.37 33.882 33.882 0 00-2.318 4.696 1 1 0 01-1.857-.742 35.894 35.894 0 012.455-4.973 1 1 0 011.37-.35zM93.33 14.86a1 1 0 01-.473 1.333c-6.522 3.113-12.009 7.507-15.963 12.745a1 1 0 11-1.596-1.205c4.164-5.517 9.913-10.107 16.698-13.345a1 1 0 011.333.472z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationFill",
+    fillRule: "evenodd",
+    d: "M94.434 52.787a6.093 6.093 0 110-12.185 6.093 6.093 0 010 12.185zm19.294 0a6.093 6.093 0 110-12.186 6.093 6.093 0 010 12.186zm19.293 0a6.093 6.093 0 110-12.186 6.093 6.093 0 010 12.186z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "illustrationStroke",
+    fillRule: "evenodd",
+    d: "M94.434 41.602a5.093 5.093 0 100 10.185 5.093 5.093 0 000-10.185zm-7.092 5.092a7.093 7.093 0 1114.185 0 7.093 7.093 0 01-14.185 0zm26.386-5.092a5.093 5.093 0 100 10.185 5.093 5.093 0 000-10.185zm-7.093 5.092a7.092 7.092 0 1114.185 0 7.092 7.092 0 01-14.185 0zm26.386-5.092a5.093 5.093 0 100 10.185 5.093 5.093 0 000-10.185zm-7.093 5.092a7.093 7.093 0 1114.186.001 7.093 7.093 0 01-14.186 0z",
+    clipRule: "evenodd"
+  }));
+}

package/dist/esm/EmptyState/components/EmptyStateImage/constants.js

@@ -0,0 +1,19 @@
+import { FolderImage } from "./Images/folder";
+import { PadlockImage } from "./Images/padlock";
+import { ReferenceScreenImage } from "./Images/referenceScreen";
+import { SpeechBubbleImage } from "./Images/speechBubble";
+var IMAGE_COMPONENT_MAP = {
+  folder: {
+    component: FolderImage
+  },
+  padlock: {
+    component: PadlockImage
+  },
+  referenceScreen: {
+    component: ReferenceScreenImage
+  },
+  speechBubble: {
+    component: SpeechBubbleImage
+  }
+};
+export default IMAGE_COMPONENT_MAP;

package/dist/esm/EmptyState/components/EmptyStateImage/index.js

@@ -0,0 +1,10 @@
+import React from "react";
+import getComponentFromLookup from "../../../helpers/logic/get-component-from-lookup";
+import IMAGE_COMPONENT_MAP from "./constants";
+import { BaseEmptyStateImage } from "./styled";
+function EmptyStateImage(_ref) {
+  var image = _ref.image;
+  var mappedImage = getComponentFromLookup(IMAGE_COMPONENT_MAP, image, "folder", null);
+  return /*#__PURE__*/React.createElement(BaseEmptyStateImage, null, mappedImage);
+}
+export default EmptyStateImage;

package/dist/esm/EmptyState/components/EmptyStateImage/styled.js

@@ -0,0 +1,5 @@
+import { styled } from "@vitality-ds/system";
+import BaseEmptyStateImageStyles from "./styles/BaseEmptyStateImage.styles";
+
+// eslint-disable-next-line import/prefer-default-export
+export var BaseEmptyStateImage = styled("div", BaseEmptyStateImageStyles);

package/dist/esm/EmptyState/components/EmptyStateImage/styles/BaseEmptyStateImage.styles.js

@@ -0,0 +1,13 @@
+import { colorUseCases, css, getColorScaleValueByUseCase } from "@vitality-ds/system";
+var backgrounds = colorUseCases.backgrounds;
+export default css({
+  svg: {
+    height: 80,
+    "& .illustrationFill": {
+      fill: getColorScaleValueByUseCase("primary", backgrounds.illustration_fill)
+    },
+    "& .illustrationStroke": {
+      fill: getColorScaleValueByUseCase("primary", backgrounds.illustration_stroke)
+    }
+  }
+});

package/dist/esm/EmptyState/components/EmptyStateImage/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/EmptyState/index.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["label"];
+import React from "react";
+import Button from "../Button";
+import Typography from "../Typography";
+import EmptyStateImage from "./components/EmptyStateImage";
+import { BaseEmptyStateContainer } from "./styled";
+function EmptyState(_ref) {
+  var _ref$image = _ref.image,
+    image = _ref$image === void 0 ? "folder" : _ref$image,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "Nothing to display" : _ref$title,
+    description = _ref.description,
+    buttonProps = _ref.buttonProps;
+  var _ref2 = buttonProps || {},
+    label = _ref2.label,
+    restButtonProps = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/React.createElement(BaseEmptyStateContainer, null, /*#__PURE__*/React.createElement(EmptyStateImage, {
+    image: image
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "display200"
+  }, title), description && /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    textAlign: "center"
+  }, description), label && /*#__PURE__*/React.createElement(Button, _extends({}, restButtonProps, {
+    size: "default",
+    shouldFitContainer: false,
+    appearance: "primary"
+  }), label));
+}
+export default EmptyState;

package/dist/esm/EmptyState/styled.js

@@ -0,0 +1,5 @@
+import { styled } from "@vitality-ds/system";
+import BaseEmptyStateContainerStyles from "./styles/BaseEmptyStateContainer";
+
+// eslint-disable-next-line import/prefer-default-export
+export var BaseEmptyStateContainer = styled("div", BaseEmptyStateContainerStyles);

package/dist/esm/EmptyState/styles/BaseEmptyStateContainer.js

@@ -0,0 +1,8 @@
+import { css } from "@vitality-ds/system";
+export default css({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  maxWidth: 320,
+  gap: "$md"
+});

package/dist/esm/EmptyState/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Flex/index.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["width", "height", "position", "maxWidth", "minWidth", "maxHeight", "minHeight", "htmlTag", "direction", "spacing", "align", "justify", "wrap"];
+import React from "react";
+import { BaseFlex } from "./styled";
+function Flex(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    position = _ref.position,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth,
+    maxHeight = _ref.maxHeight,
+    minHeight = _ref.minHeight,
+    htmlTag = _ref.htmlTag,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? "column" : _ref$direction,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? "md" : _ref$spacing,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "stretch" : _ref$align,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? "start" : _ref$justify,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? "noWrap" : _ref$wrap,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(BaseFlex, _extends({
+    spacing: spacing,
+    align: align,
+    justify: justify,
+    wrap: wrap,
+    as: htmlTag,
+    css: {
+      width: width,
+      height: height,
+      position: position,
+      maxWidth: maxWidth,
+      minWidth: minWidth,
+      maxHeight: maxHeight,
+      minHeight: minHeight,
+      flexDirection: direction
+    }
+  }, restProps));
+}
+export default Flex;

package/dist/esm/Flex/styled.js

@@ -0,0 +1,5 @@
+import { styled } from "@vitality-ds/system";
+import BaseFlexStyles from "./styles/BaseFlex.styles";
+
+// eslint-disable-next-line import/prefer-default-export
+export var BaseFlex = styled("div", BaseFlexStyles);

package/dist/esm/Flex/styles/BaseFlex.styles.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { css } from "@vitality-ds/system";
+import { flexVariants, layoutVariants, spacingVariants } from "../../helpers/styles";
+export default css({
+  boxSizing: "border-box",
+  display: "flex",
+  variants: _extends({}, layoutVariants, spacingVariants, flexVariants, {
+    wrap: {
+      noWrap: {
+        flexWrap: "nowrap"
+      },
+      wrap: {
+        flexWrap: "wrap"
+      },
+      wrapReverse: {
+        flexWrap: "wrap-reverse"
+      }
+    }
+  })
+});

package/dist/esm/Flex/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Form/CheckboxList/hooks/useCheckedItems.js

@@ -0,0 +1,15 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useMemo, useState } from "react";
+var useCheckedItems = function useCheckedItems(value) {
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    checkedItems = _useState2[0],
+    setCheckedItems = _useState2[1];
+  return useMemo(function () {
+    return {
+      checkedItems: checkedItems,
+      setCheckedItems: setCheckedItems
+    };
+  }, [checkedItems, setCheckedItems]);
+};
+export default useCheckedItems;

package/dist/esm/Form/CheckboxList/hooks/useCheckedItems.spec.js

@@ -0,0 +1,26 @@
+import { renderHook } from "@testing-library/react-hooks";
+import useCheckedItems from "./useCheckedItems";
+describe("useCheckedItems", function () {
+  var mount = function mount() {
+    return renderHook(function () {
+      return useCheckedItems(["foo"]);
+    });
+  };
+  it("should return a memoized state", function () {
+    var _mount = mount(),
+      result = _mount.result,
+      rerender = _mount.rerender;
+    var resultAfterMount = result.current;
+    rerender();
+    expect(result.current).toBe(resultAfterMount);
+  });
+  it("returns checked items when called", function () {
+    var _mount2 = mount(),
+      result = _mount2.result;
+    var expectedResult = {
+      checkedItems: ["foo"],
+      setCheckedItems: expect.any(Function)
+    };
+    expect(result.current).toEqual(expectedResult);
+  });
+});

package/dist/esm/Form/CheckboxList/hooks/useHandleChange.js

@@ -0,0 +1,5 @@
+import { handleChange } from "../logic";
+var useHandleChange = function useHandleChange(checkedItems, setCheckedItems) {
+  return handleChange(checkedItems, setCheckedItems);
+};
+export default useHandleChange;

package/dist/esm/Form/CheckboxList/hooks/useHandleChange.spec.js

@@ -0,0 +1,39 @@
+import { renderHook } from "@testing-library/react-hooks";
+import { handleChange } from "../logic";
+import useHandleChange from "./useHandleChange";
+var mockHandleChange = jest.fn();
+jest.mock("../logic", function () {
+  return {
+    handleChange: jest.fn(function () {
+      return mockHandleChange;
+    })
+  };
+});
+var checkedItems = ["foo"];
+var setCheckedItems = jest.fn();
+var handleChangeMock = handleChange;
+describe("useHandleChange", function () {
+  var mount = function mount() {
+    return renderHook(function () {
+      return useHandleChange(checkedItems, setCheckedItems);
+    });
+  };
+  beforeEach(function () {
+    jest.clearAllMocks();
+  });
+  it("calls logic method with correct parameters", function () {
+    var _mount = mount(),
+      result = _mount.result;
+    expect(handleChangeMock).toHaveBeenCalledTimes(1);
+    expect(handleChangeMock).toHaveBeenCalledWith(checkedItems, setCheckedItems);
+    expect(result.current).toBe(handleChangeMock.mock.results[0].value);
+  });
+  it("returns same pointer on rerender", function () {
+    var _mount2 = mount(),
+      result = _mount2.result,
+      rerender = _mount2.rerender;
+    var resultAfterMount = result.current;
+    rerender();
+    expect(result.current).toBe(resultAfterMount);
+  });
+});

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

@@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+import Checkbox from "../../Input/Checkbox";
+import useCheckedItems from "./hooks/useCheckedItems";
+import useHandleChange from "./hooks/useHandleChange";
+import { BaseCheckboxListContainer } from "./styled";
+function CheckboxList(_ref) {
+  var _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return [];
+    } : _ref$onChange,
+    options = _ref.options,
+    direction = _ref.direction,
+    value = _ref.value,
+    checkboxListName = _ref.name,
+    ariaLabelledBy = _ref.ariaLabelledBy;
+  var _useCheckedItems = useCheckedItems(value),
+    checkedItems = _useCheckedItems.checkedItems,
+    setCheckedItems = _useCheckedItems.setCheckedItems;
+  var handleChange = useHandleChange(checkedItems, setCheckedItems);
+  useEffect(function () {
+    onChange(checkedItems);
+  }, [checkedItems, onChange]);
+  return /*#__PURE__*/React.createElement(BaseCheckboxListContainer, {
+    role: "group",
+    direction: direction,
+    "aria-labelledby": ariaLabelledBy
+  }, options === null || options === void 0 ? void 0 : options.map(function (_ref2) {
+    var label = _ref2.label,
+      id = _ref2.id,
+      optionValue = _ref2.value,
+      disabled = _ref2.disabled,
+      name = _ref2.name;
+    return /*#__PURE__*/React.createElement(Checkbox, {
+      key: optionValue,
+      disabled: disabled,
+      label: label,
+      id: id,
+      value: optionValue,
+      checked: checkedItems.includes(optionValue),
+      onChange: function onChange() {
+        return handleChange(optionValue);
+      }
+      /**
+       * In checkbox groups, the `name` field should be the same across all checkboxes
+       * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#handling_multiple_checkboxes
+       *
+       * We use the `name` prop passed to the CheckboxList, but still allow the user to set a `name` on a per-Checkbox basis if need be via each item passed to the `options` array.
+       * */,
+      name: name || checkboxListName
+    });
+  }));
+}
+export default CheckboxList;