orcs-design-system 3.2.4 → 3.2.6

package/es/components/Sidebar/index.js

@@ -1,126 +1,115 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["SidebarStyles", "children"],
-  _excluded2 = ["children", "theme"];
 import React from "react";
 import styled, { ThemeProvider } from "styled-components";
 import { compose, space, layout } from "styled-system";
 import { css } from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
 import PropTypes from "prop-types";
-var SidebarStyles = compose(space, layout);
-var SidebarWrapper = styled("div").withConfig({
+import { jsx as _jsx } from "react/jsx-runtime";
+const SidebarStyles = compose(space, layout);
+const SidebarWrapper = styled("div").withConfig({
   displayName: "Sidebar__SidebarWrapper",
   componentId: "sc-wr9mfw-0"
-})(function (props) {
-  return css({
-    bg: themeGet("colors.greyDarkest")(props),
-    color: themeGet("colors.white")(props),
-    minHeight: "calc(100vh - " + themeGet("appScale.navBarSize")(props) + ")",
-    height: "100%",
-    maxWidth: "max-content",
-    fontFamily: themeGet("fonts.main")(props),
-    display: "flex",
-    alignItems: "stretch",
-    alignContent: "stretch",
-    "@media screen and (max-width: 900px)": {
-      width: "100%",
-      height: "auto",
-      minWidth: "auto",
-      maxWidth: "initial",
-      minHeight: "initial",
-      maxHeight: themeGet("appScale.sidebarMobileHeight")(props),
-      position: "fixed",
-      bottom: "0",
-      left: "0",
-      zIndex: "6",
-      flexDirection: "column-reverse"
-    }
-  });
-}, SidebarStyles);
-export var SidebarTabs = styled("div").withConfig({
+})(props => css({
+  bg: themeGet("colors.greyDarkest")(props),
+  color: themeGet("colors.white")(props),
+  minHeight: "calc(100vh - " + themeGet("appScale.navBarSize")(props) + ")",
+  height: "100%",
+  maxWidth: "max-content",
+  fontFamily: themeGet("fonts.main")(props),
+  display: "flex",
+  alignItems: "stretch",
+  alignContent: "stretch",
+  "@media screen and (max-width: 900px)": {
+    width: "100%",
+    height: "auto",
+    minWidth: "auto",
+    maxWidth: "initial",
+    minHeight: "initial",
+    maxHeight: themeGet("appScale.sidebarMobileHeight")(props),
+    position: "fixed",
+    bottom: "0",
+    left: "0",
+    zIndex: "6",
+    flexDirection: "column-reverse"
+  }
+}), SidebarStyles);
+export const SidebarTabs = styled("div").withConfig({
   displayName: "Sidebar__SidebarTabs",
   componentId: "sc-wr9mfw-1"
-})(function (props) {
-  return css({
-    minWidth: themeGet("appScale.navBarSize")(props),
-    minHeight: "calc(100vh - " + themeGet("appScale.navBarSize")(props) + ")",
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "flex-start",
-    textAlign: "center",
-    "@media screen and (max-width: 900px)": {
-      height: themeGet("appScale.navBarSize")(props),
-      flexDirection: "row",
-      minHeight: "initial",
-      minWidth: "initial"
-    }
-  });
-}, SidebarStyles);
+})(props => css({
+  minWidth: themeGet("appScale.navBarSize")(props),
+  minHeight: "calc(100vh - " + themeGet("appScale.navBarSize")(props) + ")",
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  textAlign: "center",
+  "@media screen and (max-width: 900px)": {
+    height: themeGet("appScale.navBarSize")(props),
+    flexDirection: "row",
+    minHeight: "initial",
+    minWidth: "initial"
+  }
+}), SidebarStyles);
 SidebarTabs.propTypes = {
   /** SidebarTabs children, ie `SidebarTab` components, are rendered as node elements */
   children: PropTypes.node,
   /** Set the styles for this subcomponent if needed, using the `space` and `layout` styled-system categories */
   SidebarStyles: PropTypes.object
 };
-export var SidebarTab = styled("button").attrs(function (props) {
-  return {
-    className: props.badge ? "Sidebar__Badge" : "",
-    marginTop: props.bottomAligned ? "auto" : "0",
-    "aria-label": props.ariaLabel,
-    "aria-expanded": props.active ? "true" : "false"
-  };
-}).withConfig({
+export const SidebarTab = styled("button").attrs(props => ({
+  className: props.badge ? "Sidebar__Badge" : "",
+  marginTop: props.bottomAligned ? "auto" : "0",
+  "aria-label": props.ariaLabel,
+  "aria-expanded": props.active ? "true" : "false"
+})).withConfig({
   displayName: "Sidebar__SidebarTab",
   componentId: "sc-wr9mfw-2"
-})(function (props) {
-  return css({
-    minWidth: themeGet("appScale.navBarSize")(props),
-    minHeight: themeGet("appScale.navBarSize")(props),
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
+})(props => css({
+  minWidth: themeGet("appScale.navBarSize")(props),
+  minHeight: themeGet("appScale.navBarSize")(props),
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  transition: themeGet("transition.transitionDefault")(props),
+  color: themeGet("colors.greyLightest")(props),
+  bg: props.active ? themeGet("colors.greyDarker")(props) : "transparent",
+  cursor: props.active ? "default" : "pointer",
+  border: "none",
+  padding: 0,
+  fontSize: "1em",
+  path: {
     transition: themeGet("transition.transitionDefault")(props),
-    color: themeGet("colors.greyLightest")(props),
-    bg: props.active ? themeGet("colors.greyDarker")(props) : "transparent",
-    cursor: props.active ? "default" : "pointer",
-    border: "none",
-    padding: 0,
-    fontSize: "1em",
+    fill: themeGet("colors.greyLightest")(props)
+  },
+  "&:hover": {
+    color: props.active ? themeGet("colors.greyLightest")(props) : themeGet("colors.primary")(props),
     path: {
-      transition: themeGet("transition.transitionDefault")(props),
-      fill: themeGet("colors.greyLightest")(props)
-    },
-    "&:hover": {
-      color: props.active ? themeGet("colors.greyLightest")(props) : themeGet("colors.primary")(props),
-      path: {
-        fill: props.active ? themeGet("colors.greyLightest")(props) : themeGet("colors.primary")(props)
-      }
-    },
-    "&.Sidebar__Badge": {
-      "&::before": {
-        content: "\"".concat(props.badge, "\""),
-        position: "absolute",
-        top: "8px",
-        right: "calc(50% - 19px)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: "16px",
-        height: "16px",
-        borderRadius: "50%",
-        fontSize: themeGet("fontSizes.0")(props),
-        fontWeight: themeGet("fontWeights.2")(props),
-        color: themeGet("colors.white")(props),
-        bg: themeGet("colors.danger")(props)
-      }
+      fill: props.active ? themeGet("colors.greyLightest")(props) : themeGet("colors.primary")(props)
     }
-  });
-}, SidebarStyles);
+  },
+  "&.Sidebar__Badge": {
+    "&::before": {
+      content: "\"".concat(props.badge, "\""),
+      position: "absolute",
+      top: "8px",
+      right: "calc(50% - 19px)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "16px",
+      height: "16px",
+      borderRadius: "50%",
+      fontSize: themeGet("fontSizes.0")(props),
+      fontWeight: themeGet("fontWeights.2")(props),
+      color: themeGet("colors.white")(props),
+      bg: themeGet("colors.danger")(props)
+    }
+  }
+}), SidebarStyles);
 SidebarTab.propTypes = {
   /** SidebarTab children are rendered as node elements */
   children: PropTypes.node,
@@ -133,7 +122,7 @@ SidebarTab.propTypes = {
   /** Set the ariaLabel */
   ariaLabel: PropTypes.string
 };
-export var SidebarPanels = styled("div").withConfig({
+export const SidebarPanels = styled("div").withConfig({
   displayName: "Sidebar__SidebarPanels",
   componentId: "sc-wr9mfw-3"
 })(css({
@@ -145,30 +134,34 @@ SidebarPanels.propTypes = {
   /** Set the styles for this subcomponent if needed, using the `space` and `layout` styled-system categories */
   SidebarStyles: PropTypes.object
 };
-var SidebarPanelStyle = styled("div").withConfig({
+const SidebarPanelStyle = styled("div").withConfig({
   displayName: "Sidebar__SidebarPanelStyle",
   componentId: "sc-wr9mfw-4"
-})(function (props) {
-  return css({
-    display: props.active ? "block" : "none",
-    minWidth: props.large ? "calc(" + themeGet("appScale.sidebarMaxWidthLarge")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")" : "calc(" + themeGet("appScale.sidebarMaxWidth")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")",
-    maxWidth: props.large ? "calc(" + themeGet("appScale.sidebarMaxWidthLarge")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")" : "calc(" + themeGet("appScale.sidebarMaxWidth")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")",
-    height: "calc(100vh - ( " + themeGet("appScale.navBarSize")(props) + "))",
-    overflowY: "auto",
-    bg: themeGet("colors.greyDarker")(props),
-    "@media screen and (max-width: 900px)": {
-      width: "100%",
-      minWidth: "initial",
-      maxWidth: "initial",
-      height: "calc(" + themeGet("appScale.sidebarMobileHeight")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")"
-    }
+})(props => css({
+  display: props.active ? "block" : "none",
+  minWidth: props.large ? "calc(" + themeGet("appScale.sidebarMaxWidthLarge")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")" : "calc(" + themeGet("appScale.sidebarMaxWidth")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")",
+  maxWidth: props.large ? "calc(" + themeGet("appScale.sidebarMaxWidthLarge")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")" : "calc(" + themeGet("appScale.sidebarMaxWidth")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")",
+  height: "calc(100vh - ( " + themeGet("appScale.navBarSize")(props) + "))",
+  overflowY: "auto",
+  bg: themeGet("colors.greyDarker")(props),
+  "@media screen and (max-width: 900px)": {
+    width: "100%",
+    minWidth: "initial",
+    maxWidth: "initial",
+    height: "calc(" + themeGet("appScale.sidebarMobileHeight")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")"
+  }
+}), SidebarStyles);
+export const SidebarPanel = _ref => {
+  let {
+    SidebarStyles,
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(SidebarPanelStyle, {
+    ...SidebarStyles,
+    ...props,
+    children: children
   });
-}, SidebarStyles);
-export var SidebarPanel = function SidebarPanel(_ref) {
-  var SidebarStyles = _ref.SidebarStyles,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(SidebarPanelStyle, _extends({}, SidebarStyles, props), children);
 };
 SidebarPanel.propTypes = {
   /** SidebarPanel children, ie `SidebarPanels` components, are rendered as node elements */
@@ -176,40 +169,44 @@ SidebarPanel.propTypes = {
   /** Set the styles for this subcomponent if needed, using the `space` and `layout` styled-system categories */
   SidebarStyles: PropTypes.object
 };
-export var SidebarClose = styled("label").withConfig({
+export const SidebarClose = styled("label").withConfig({
   displayName: "Sidebar__SidebarClose",
   componentId: "sc-wr9mfw-5"
-})(function (props) {
-  return css({
-    position: "absolute",
-    right: "calc(-1 * 8px)",
-    top: "14px",
-    width: "24px",
-    height: "24px",
-    textAlign: "center",
-    paddingTop: 1,
-    borderRadius: "0 50% 50% 0",
-    zIndex: 2,
-    cursor: "w-resize",
-    bg: themeGet("colors.greyDarker")(props),
-    "@media screen and (max-width: 900px)": {
-      top: "-10px",
-      left: "calc(50% - 12px)",
-      right: "auto",
-      borderRadius: "50%",
-      transform: "rotate(-90deg)",
-      cursor: "s-resize"
-    }
+})(props => css({
+  position: "absolute",
+  right: "calc(-1 * 8px)",
+  top: "14px",
+  width: "24px",
+  height: "24px",
+  textAlign: "center",
+  paddingTop: 1,
+  borderRadius: "0 50% 50% 0",
+  zIndex: 2,
+  cursor: "w-resize",
+  bg: themeGet("colors.greyDarker")(props),
+  "@media screen and (max-width: 900px)": {
+    top: "-10px",
+    left: "calc(50% - 12px)",
+    right: "auto",
+    borderRadius: "50%",
+    transform: "rotate(-90deg)",
+    cursor: "s-resize"
+  }
+}), SidebarStyles);
+const Sidebar = _ref2 => {
+  let {
+    children,
+    theme,
+    ...props
+  } = _ref2;
+  const component = /*#__PURE__*/_jsx(SidebarWrapper, {
+    ...props,
+    children: children
   });
-}, SidebarStyles);
-var Sidebar = function Sidebar(_ref2) {
-  var children = _ref2.children,
-    theme = _ref2.theme,
-    props = _objectWithoutProperties(_ref2, _excluded2);
-  var component = /*#__PURE__*/React.createElement(SidebarWrapper, props, children);
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 };
 Sidebar.propTypes = {
   /** Sidebar children are rendered as node elements */

package/es/components/Spacer/Spacer.stories.js

@@ -2,73 +2,76 @@ import Spacer from ".";
 import Avatar from "../Avatar";
 import StyledLink from "../StyledLink";
 import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Spacer",
   component: Spacer
 };
-export var marginSpacer = function marginSpacer() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: 3
-  }, /*#__PURE__*/React.createElement(Avatar, {
+export const marginSpacer = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: 3,
+  children: [/*#__PURE__*/_jsx(Avatar, {
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL"
-  }), /*#__PURE__*/React.createElement(Avatar, {
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Ayden Lundgre"),
+  }), /*#__PURE__*/_jsx(Avatar, {
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Ayden Lundgre"
+    }),
     subtitle: "Senior Business Analyst",
     initials: "AL"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     sizing: "small",
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     sizing: "small",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Ayden Lundgre"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Ayden Lundgre"
+    }),
     subtitle: "Senior Business Analyst",
     initials: "AL"
-  }));
-};
+  })]
+});
 marginSpacer.storyName = "Margin Spacer";
-export var paddingSpacer = function paddingSpacer() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    padding: 3
-  }, /*#__PURE__*/React.createElement(Avatar, {
+export const paddingSpacer = () => /*#__PURE__*/_jsxs(Spacer, {
+  padding: 3,
+  children: [/*#__PURE__*/_jsx(Avatar, {
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL"
-  }), /*#__PURE__*/React.createElement(Avatar, {
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Ayden Lundgre"),
+  }), /*#__PURE__*/_jsx(Avatar, {
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Ayden Lundgre"
+    }),
     subtitle: "Senior Business Analyst",
     initials: "AL"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     sizing: "small",
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     sizing: "small",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Ayden Lundgre"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Ayden Lundgre"
+    }),
     subtitle: "Senior Business Analyst",
     initials: "AL"
-  }));
-};
+  })]
+});
 paddingSpacer.storyName = "Padding Spacer";
 marginSpacer.__docgenInfo = {
   "description": "",

package/es/components/Spacer/index.js

@@ -1,31 +1,31 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "theme"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from "react";
 import { space, layout } from "styled-system";
 import styled, { ThemeProvider } from "styled-components";
 import propTypes from "@styled-system/prop-types";
-var SpacerBox = styled.div.withConfig({
+import { jsx as _jsx } from "react/jsx-runtime";
+const SpacerBox = styled.div.withConfig({
   displayName: "Spacer__SpacerBox",
   componentId: "sc-1acikjz-0"
 })(["", " ", " line-height:0;"], space, layout);
-var Spacer = function Spacer(_ref) {
-  var children = _ref.children,
-    theme = _ref.theme,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var clones = React.Children.toArray(children).map(function (child, index) {
-    return /*#__PURE__*/React.createElement(SpacerBox, _extends({
-      key: index
-    }, props), /*#__PURE__*/React.cloneElement(child));
-  });
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, clones) : clones;
+const Spacer = _ref => {
+  let {
+    children,
+    theme,
+    ...props
+  } = _ref;
+  const clones = React.Children.toArray(children).map((child, index) => /*#__PURE__*/_jsx(SpacerBox, {
+    ...props,
+    children: /*#__PURE__*/React.cloneElement(child)
+  }, index));
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: clones
+  }) : clones;
+};
+Spacer.propTypes = {
+  ...propTypes.space,
+  ...propTypes.layout
 };
-Spacer.propTypes = _objectSpread(_objectSpread({}, propTypes.space), propTypes.layout);
 Spacer.__docgenInfo = {
   "description": "",
   "methods": [],