@nulogy/components 10.2.11 → 10.2.13

package/dist/main.js

@@ -41794,17 +41794,22 @@
       }, props)));
     });
 
-    var Divider$1 = function Divider(_a) {
-      var _a$borderColor = _a.borderColor,
-          borderColor = _a$borderColor === void 0 ? "lightGrey" : _a$borderColor,
-          props = __rest(_a, ["borderColor"]);
-
-      return /*#__PURE__*/React__default["default"].createElement(Box, Object.assign({
-        as: "hr",
-        borderTop: "1px solid",
-        borderColor: borderColor
-      }, props));
-    };
+    var Divider$1 = styled__default["default"].div.withConfig({
+      displayName: "Divider",
+      componentId: "sc-1r789ib-0"
+    })(function (_ref) {
+      var theme = _ref.theme,
+          color = _ref.color;
+      return {
+        display: "flex",
+        marginTop: theme.space.x2,
+        marginBottom: theme.space.x2,
+        marginLeft: "0",
+        marginRight: "0",
+        borderBottom: "1px solid",
+        borderColor: color ? color : theme.colors.lightGrey
+      };
+    }, addStyledProps);
 
     var ApplicationFrame = function ApplicationFrame(_a) {
       var navBar = _a.navBar,
@@ -42117,6 +42122,7 @@
         onClick: closeOnOutsideClick && isOpen && onClose
       })), /*#__PURE__*/React__default["default"].createElement(AnimatedBox, Object.assign({
         role: "dialog",
+        paddingX: "x1",
         bg: "white",
         display: "flex",
         flexDirection: "column",
@@ -42137,27 +42143,21 @@
         zIndex: zIndex,
         ref: sideBarRef
       }, props), /*#__PURE__*/React__default["default"].createElement(Flex, {
-        p: p,
-        maxHeight: "100%",
-        overflow: "auto",
-        flexGrow: 1,
         flexDirection: "column",
-        style: {
-          overflowBehaviour: "contain"
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(Flex, {
-        flexDirection: "column",
-        pb: "x3"
+        p: "x2",
+        borderBottomWidth: "1px",
+        borderBottomStyle: "solid",
+        borderBottomColor: "lightGrey"
       }, /*#__PURE__*/React__default["default"].createElement(Flex, {
         flexDirection: "column",
-        pb: "x2"
+        gap: "x1"
       }, /*#__PURE__*/React__default["default"].createElement(Flex, {
         justifyContent: "space-between",
         alignItems: "flex-start"
       }, title && /*#__PURE__*/React__default["default"].createElement(Flex, {
         alignItems: "center",
         height: "100%"
-      }, /*#__PURE__*/React__default["default"].createElement(Heading3, {
+      }, /*#__PURE__*/React__default["default"].createElement(Heading2, {
         mb: 0
       }, title)), !hideCloseButton && /*#__PURE__*/React__default["default"].createElement(Box, {
         marginLeft: "x2"
@@ -42169,12 +42169,17 @@
         "data-testid": closeButtonTestId,
         "aria-label": closeButtonAriaLabel || t("close")
       }))), renderHelpText ? renderHelpText() : helpText && /*#__PURE__*/React__default["default"].createElement(Text, {
-        pt: "x1",
         color: "midGrey"
-      }, helpText)), /*#__PURE__*/React__default["default"].createElement(Divider$1, {
-        m: "0 -8px",
-        width: "calc(100% + 16px)"
-      })), /*#__PURE__*/React__default["default"].createElement(AnimatedBox, {
+      }, helpText))), /*#__PURE__*/React__default["default"].createElement(Flex, {
+        p: p,
+        maxHeight: "100%",
+        overflow: "auto",
+        flexGrow: 1,
+        flexDirection: "column",
+        style: {
+          overflowBehaviour: "contain"
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(AnimatedBox, {
         variants: childVariants,
         animate: isOpen ? "open" : "closed",
         flexGrow: 1,

package/dist/main.module.js

@@ -41777,17 +41777,22 @@ var DateRange = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, props)));
 });
 
-var Divider$1 = function Divider(_a) {
-  var _a$borderColor = _a.borderColor,
-      borderColor = _a$borderColor === void 0 ? "lightGrey" : _a$borderColor,
-      props = __rest(_a, ["borderColor"]);
-
-  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
-    as: "hr",
-    borderTop: "1px solid",
-    borderColor: borderColor
-  }, props));
-};
+var Divider$1 = styled.div.withConfig({
+  displayName: "Divider",
+  componentId: "sc-1r789ib-0"
+})(function (_ref) {
+  var theme = _ref.theme,
+      color = _ref.color;
+  return {
+    display: "flex",
+    marginTop: theme.space.x2,
+    marginBottom: theme.space.x2,
+    marginLeft: "0",
+    marginRight: "0",
+    borderBottom: "1px solid",
+    borderColor: color ? color : theme.colors.lightGrey
+  };
+}, addStyledProps);
 
 var ApplicationFrame = function ApplicationFrame(_a) {
   var navBar = _a.navBar,
@@ -42100,6 +42105,7 @@ function Sidebar(_a) {
     onClick: closeOnOutsideClick && isOpen && onClose
   })), /*#__PURE__*/React__default.createElement(AnimatedBox, Object.assign({
     role: "dialog",
+    paddingX: "x1",
     bg: "white",
     display: "flex",
     flexDirection: "column",
@@ -42120,27 +42126,21 @@ function Sidebar(_a) {
     zIndex: zIndex,
     ref: sideBarRef
   }, props), /*#__PURE__*/React__default.createElement(Flex, {
-    p: p,
-    maxHeight: "100%",
-    overflow: "auto",
-    flexGrow: 1,
     flexDirection: "column",
-    style: {
-      overflowBehaviour: "contain"
-    }
-  }, /*#__PURE__*/React__default.createElement(Flex, {
-    flexDirection: "column",
-    pb: "x3"
+    p: "x2",
+    borderBottomWidth: "1px",
+    borderBottomStyle: "solid",
+    borderBottomColor: "lightGrey"
   }, /*#__PURE__*/React__default.createElement(Flex, {
     flexDirection: "column",
-    pb: "x2"
+    gap: "x1"
   }, /*#__PURE__*/React__default.createElement(Flex, {
     justifyContent: "space-between",
     alignItems: "flex-start"
   }, title && /*#__PURE__*/React__default.createElement(Flex, {
     alignItems: "center",
     height: "100%"
-  }, /*#__PURE__*/React__default.createElement(Heading3, {
+  }, /*#__PURE__*/React__default.createElement(Heading2, {
     mb: 0
   }, title)), !hideCloseButton && /*#__PURE__*/React__default.createElement(Box, {
     marginLeft: "x2"
@@ -42152,12 +42152,17 @@ function Sidebar(_a) {
     "data-testid": closeButtonTestId,
     "aria-label": closeButtonAriaLabel || t("close")
   }))), renderHelpText ? renderHelpText() : helpText && /*#__PURE__*/React__default.createElement(Text, {
-    pt: "x1",
     color: "midGrey"
-  }, helpText)), /*#__PURE__*/React__default.createElement(Divider$1, {
-    m: "0 -8px",
-    width: "calc(100% + 16px)"
-  })), /*#__PURE__*/React__default.createElement(AnimatedBox, {
+  }, helpText))), /*#__PURE__*/React__default.createElement(Flex, {
+    p: p,
+    maxHeight: "100%",
+    overflow: "auto",
+    flexGrow: 1,
+    flexDirection: "column",
+    style: {
+      overflowBehaviour: "contain"
+    }
+  }, /*#__PURE__*/React__default.createElement(AnimatedBox, {
     variants: childVariants,
     animate: isOpen ? "open" : "closed",
     flexGrow: 1,

package/dist/src/Divider/Divider.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
-import { BoxProps } from "../Box/Box";
-declare const Divider: ({ borderColor, ...props }: BoxProps) => React.JSX.Element;
+import { StyledProps } from "../StyledProps";
+declare const Divider: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledProps, never>;
 export default Divider;

package/dist/src/Divider/Divider.story.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: ({ borderColor, ...props }: import("../Box/Box").BoxProps) => React.JSX.Element;
+    component: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").StyledProps, never>;
 };
 export default _default;
-export declare const _Divider: () => React.JSX.Element;
+export declare const Default: () => React.JSX.Element;
+export declare const WithCustomColourAndSpacing: () => React.JSX.Element;
+export declare const WithCustomProperties: () => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "10.2.11",
+  "version": "10.2.13",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -144,7 +144,6 @@
     "@types/styled-system": "5.1.22",
     "body-scroll-lock": "^3.1.5",
     "core-js": "3",
-    "create-react-context": "^0.3.0",
     "date-fns": "2.23.0",
     "debounce": "^1.2.0",
     "deep-equal": "^2.2.1",
@@ -155,7 +154,6 @@
     "react-fast-compare": "^3.2.0",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^12.3.1",
-    "react-input-autosize": "^2.2.2",
     "react-modal": "^3.14.4",
     "react-popper": "1.3.11",
     "react-popper-2": "npm:react-popper@2.2.4",