orcs-design-system 3.2.4 → 3.2.6

package/es/components/RadioButton/index.js

@@ -1,214 +1,200 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "value", "label", "variant", "disabled", "checked", "onChange", "theme", "ariaLabel"];
 import React from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider } from "styled-components";
 import { space, layout, compose, variant } from "styled-system";
 import { css } from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
-var RadioButtonStyles = compose(space, layout);
-var RadioButtonItem = styled("div").withConfig({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const RadioButtonStyles = compose(space, layout);
+const RadioButtonItem = styled("div").withConfig({
   displayName: "RadioButton__RadioButtonItem",
   componentId: "sc-d2jy6y-0"
-})(function (props) {
-  return css({
-    color: themeGet("colors.greyDarkest")(props)
-  });
-}, function (props) {
-  return variant({
-    variants: {
-      "default": {},
-      white: {
-        color: themeGet("colors.white")(props)
-      }
+})(props => css({
+  color: themeGet("colors.greyDarkest")(props)
+}), props => variant({
+  variants: {
+    default: {},
+    white: {
+      color: themeGet("colors.white")(props)
     }
-  });
-}, RadioButtonStyles);
-var RadioButtonLabel = styled("label").withConfig({
+  }
+}), RadioButtonStyles);
+const RadioButtonLabel = styled("label").withConfig({
   displayName: "RadioButton__RadioButtonLabel",
   componentId: "sc-d2jy6y-1"
-})(function (props) {
-  return css({
-    display: "flex",
-    alignItems: "center",
-    cursor: props.disabled ? "default" : "pointer",
-    opacity: props.disabled ? "0.5" : "1"
-  });
-});
-var RadioButtonControl = styled.input.attrs({
+})(props => css({
+  display: "flex",
+  alignItems: "center",
+  cursor: props.disabled ? "default" : "pointer",
+  opacity: props.disabled ? "0.5" : "1"
+}));
+const RadioButtonControl = styled.input.attrs({
   type: "radio"
 }).withConfig({
   displayName: "RadioButton__RadioButtonControl",
   componentId: "sc-d2jy6y-2"
-})(function (props) {
-  return css({
-    opacity: "0",
-    position: "absolute",
-    margin: "0",
-    zIndex: "-1",
-    width: "0",
-    height: "0",
-    overflow: "hidden",
-    pointerEvents: "none",
-    "+ div > div": {
-      transform: "scale(0)"
+})(props => css({
+  opacity: "0",
+  position: "absolute",
+  margin: "0",
+  zIndex: "-1",
+  width: "0",
+  height: "0",
+  overflow: "hidden",
+  pointerEvents: "none",
+  "+ div > div": {
+    transform: "scale(0)"
+  },
+  "&:checked + div > div": {
+    transform: "scale(1)"
+  },
+  "&:focus + div": {
+    boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black30")(props)
+  }
+}), props => variant({
+  variants: {
+    default: {},
+    white: {
+      "&:focus + div": {
+        boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.white30")(props)
+      }
     },
-    "&:checked + div > div": {
-      transform: "scale(1)"
+    primary: {
+      "&:focus + div": {
+        boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.primary30")(props)
+      }
     },
-    "&:focus + div": {
-      boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black30")(props)
-    }
-  });
-}, function (props) {
-  return variant({
-    variants: {
-      "default": {},
-      white: {
-        "&:focus + div": {
-          boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.white30")(props)
-        }
-      },
-      primary: {
-        "&:focus + div": {
-          boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.primary30")(props)
-        }
-      },
-      success: {
-        "&:focus + div": {
-          boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.success30")(props)
-        }
-      },
-      warning: {
-        "&:focus + div": {
-          boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.warning30")(props)
-        }
-      },
-      danger: {
-        "&:focus + div": {
-          boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.danger30")(props)
-        }
+    success: {
+      "&:focus + div": {
+        boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.success30")(props)
+      }
+    },
+    warning: {
+      "&:focus + div": {
+        boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.warning30")(props)
+      }
+    },
+    danger: {
+      "&:focus + div": {
+        boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.danger30")(props)
       }
     }
-  });
-});
-var RadioButtonCircle = styled("div").withConfig({
+  }
+}));
+const RadioButtonCircle = styled("div").withConfig({
   displayName: "RadioButton__RadioButtonCircle",
   componentId: "sc-d2jy6y-3"
-})(function (props) {
-  return css({
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "20px",
-    height: "20px",
-    borderRadius: "10px",
-    border: "solid 2px",
-    borderColor: themeGet("colors.greyDarker")(props),
-    transition: themeGet("transition.transitionDefault")(props)
-  });
-}, function (props) {
-  return variant({
-    variants: {
-      "default": {},
-      white: {
-        borderColor: themeGet("colors.white")(props)
-      },
-      primary: {
-        borderColor: themeGet("colors.primary")(props)
-      },
-      success: {
-        borderColor: themeGet("colors.success")(props)
-      },
-      warning: {
-        borderColor: themeGet("colors.warning")(props)
-      },
-      danger: {
-        borderColor: themeGet("colors.danger")(props)
-      }
+})(props => css({
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "20px",
+  height: "20px",
+  borderRadius: "10px",
+  border: "solid 2px",
+  borderColor: themeGet("colors.greyDarker")(props),
+  transition: themeGet("transition.transitionDefault")(props)
+}), props => variant({
+  variants: {
+    default: {},
+    white: {
+      borderColor: themeGet("colors.white")(props)
+    },
+    primary: {
+      borderColor: themeGet("colors.primary")(props)
+    },
+    success: {
+      borderColor: themeGet("colors.success")(props)
+    },
+    warning: {
+      borderColor: themeGet("colors.warning")(props)
+    },
+    danger: {
+      borderColor: themeGet("colors.danger")(props)
     }
-  });
-});
-var RadioButtonDot = styled("div").withConfig({
+  }
+}));
+const RadioButtonDot = styled("div").withConfig({
   displayName: "RadioButton__RadioButtonDot",
   componentId: "sc-d2jy6y-4"
-})(function (props) {
-  return css({
-    position: "absolute",
-    display: "block",
-    width: "10px",
-    height: "10px",
-    borderRadius: "8px",
-    transform: "scale(0)",
-    backgroundColor: themeGet("colors.greyDarker")(props),
-    transition: themeGet("transition.transitionDefault")(props)
-  });
-}, function (props) {
-  return variant({
-    variants: {
-      "default": {},
-      white: {
-        backgroundColor: themeGet("colors.white")(props)
-      },
-      primary: {
-        backgroundColor: themeGet("colors.primary")(props)
-      },
-      success: {
-        backgroundColor: themeGet("colors.success")(props)
-      },
-      warning: {
-        backgroundColor: themeGet("colors.warning")(props)
-      },
-      danger: {
-        backgroundColor: themeGet("colors.danger")(props)
-      }
+})(props => css({
+  position: "absolute",
+  display: "block",
+  width: "10px",
+  height: "10px",
+  borderRadius: "8px",
+  transform: "scale(0)",
+  backgroundColor: themeGet("colors.greyDarker")(props),
+  transition: themeGet("transition.transitionDefault")(props)
+}), props => variant({
+  variants: {
+    default: {},
+    white: {
+      backgroundColor: themeGet("colors.white")(props)
+    },
+    primary: {
+      backgroundColor: themeGet("colors.primary")(props)
+    },
+    success: {
+      backgroundColor: themeGet("colors.success")(props)
+    },
+    warning: {
+      backgroundColor: themeGet("colors.warning")(props)
+    },
+    danger: {
+      backgroundColor: themeGet("colors.danger")(props)
     }
-  });
-});
-var RadioButtonText = styled("div").withConfig({
+  }
+}));
+const RadioButtonText = styled("div").withConfig({
   displayName: "RadioButton__RadioButtonText",
   componentId: "sc-d2jy6y-5"
-})(function (props) {
-  return css({
-    paddingLeft: "s",
-    fontSize: themeGet("fontSizes.2")(props),
-    fontWeight: themeGet("fontWeights.1")(props)
-  });
-});
+})(props => css({
+  paddingLeft: "s",
+  fontSize: themeGet("fontSizes.2")(props),
+  fontWeight: themeGet("fontWeights.1")(props)
+}));
 export default function RadioButton(_ref) {
-  var name = _ref.name,
-    value = _ref.value,
-    label = _ref.label,
-    variant = _ref.variant,
-    disabled = _ref.disabled,
-    checked = _ref.checked,
-    onChange = _ref.onChange,
-    theme = _ref.theme,
-    ariaLabel = _ref.ariaLabel,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(RadioButtonItem, _extends({
-    variant: variant
-  }, props), /*#__PURE__*/React.createElement(RadioButtonLabel, {
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(RadioButtonControl, {
-    name: name,
+  let {
+    name,
+    value,
+    label,
+    variant,
+    disabled,
+    checked,
+    onChange,
+    theme,
+    ariaLabel,
+    ...props
+  } = _ref;
+  const component = /*#__PURE__*/_jsx(RadioButtonItem, {
     variant: variant,
-    value: value,
-    disabled: disabled,
-    checked: checked,
-    onChange: onChange,
-    "aria-label": ariaLabel
-  }), /*#__PURE__*/React.createElement(RadioButtonCircle, {
-    variant: variant
-  }, /*#__PURE__*/React.createElement(RadioButtonDot, {
-    variant: variant
-  })), /*#__PURE__*/React.createElement(RadioButtonText, null, label)));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    ...props,
+    children: /*#__PURE__*/_jsxs(RadioButtonLabel, {
+      disabled: disabled,
+      children: [/*#__PURE__*/_jsx(RadioButtonControl, {
+        name: name,
+        variant: variant,
+        value: value,
+        disabled: disabled,
+        checked: checked,
+        onChange: onChange,
+        "aria-label": ariaLabel
+      }), /*#__PURE__*/_jsx(RadioButtonCircle, {
+        variant: variant,
+        children: /*#__PURE__*/_jsx(RadioButtonDot, {
+          variant: variant
+        })
+      }), /*#__PURE__*/_jsx(RadioButtonText, {
+        children: label
+      })]
+    })
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 }
 RadioButton.propTypes = {
   /** Sets a name to define the radio button group */
@@ -218,12 +204,12 @@ RadioButton.propTypes = {
   /** Sets the label of the radio button */
   label: PropTypes.string,
   // ariaLabel prop must be specified if label is not provided
-  ariaLabel: function ariaLabel(props, propName) {
+  ariaLabel: (props, propName) => {
     if (!props.label && (props[propName] == null || props[propName] === "")) {
       return new Error("Missing prop `".concat(propName, "` not specified for Radio component. When `label` is not provided, `").concat(propName, "` is required."));
     }
     if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType `".concat(propName, "` supplied to Radio component. Expected `string`, received `").concat(_typeof(props[propName]), "`."));
+      return new Error("Invalid propType `".concat(propName, "` supplied to Radio component. Expected `string`, received `").concat(typeof props[propName], "`."));
     }
     return null;
   },

package/es/components/Range/Range.stories.js

@@ -1,31 +1,31 @@
 import React from "react";
 import Range from ".";
 import Box from "../Box";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 export default {
   title: "Components/Range",
   component: Range
 };
-export var defaultRange = function defaultRange() {
-  return /*#__PURE__*/React.createElement(Range, {
-    min: 0,
-    max: 20,
-    defaultValue: 10,
-    ariaLabel: "Default range slider"
-  });
-};
+export const defaultRange = () => /*#__PURE__*/_jsx(Range, {
+  min: 0,
+  max: 20,
+  defaultValue: 10,
+  ariaLabel: "Default range slider"
+});
 defaultRange.storyName = "Default";
-export var inverted = function inverted() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+export const inverted = () => /*#__PURE__*/_jsx(_Fragment, {
+  children: /*#__PURE__*/_jsx(Box, {
     bg: "greyDarker",
-    p: "r"
-  }, /*#__PURE__*/React.createElement(Range, {
-    min: 0,
-    max: 20,
-    defaultValue: 10,
-    ariaLabel: "Inverted range slider",
-    inverted: true
-  })));
-};
+    p: "r",
+    children: /*#__PURE__*/_jsx(Range, {
+      min: 0,
+      max: 20,
+      defaultValue: 10,
+      ariaLabel: "Inverted range slider",
+      inverted: true
+    })
+  })
+});
 defaultRange.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Range/index.js

@@ -1,70 +1,60 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["min", "max", "inverted", "defaultValue", "theme", "ariaLabel"];
 import React from "react";
 import PropTypes from "prop-types";
 import styled, { css, ThemeProvider } from "styled-components";
 import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
-var vars = {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const vars = {
   trackHeight: "4px",
   thumbDiameter: "20px"
 };
-var thumb = function thumb(props) {
-  return "\n    margin-top: -8px;\n    box-sizing: border-box;\n    border: none;\n    width: ".concat(vars.thumbDiameter, ";\n    height: ").concat(vars.thumbDiameter, ";\n    border-radius: ").concat(vars.thumbDiameter, ";\n    background: ").concat(themeGet("colors.primary")(props), ";\n");
-};
-var track = function track(props) {
-  return "\n    box-sizing: border-box;\n    border: none;\n    width: 100%;\n    height: ".concat(vars.trackHeight, ";\n\t  background: ").concat(themeGet("colors.greyLight")(props), ";\n    border-radius: 4px;\n");
-};
-var Wrapper = styled.div.withConfig({
+const thumb = props => "\n    margin-top: -8px;\n    box-sizing: border-box;\n    border: none;\n    width: ".concat(vars.thumbDiameter, ";\n    height: ").concat(vars.thumbDiameter, ";\n    border-radius: ").concat(vars.thumbDiameter, ";\n    background: ").concat(themeGet("colors.primary")(props), ";\n");
+const track = props => "\n    box-sizing: border-box;\n    border: none;\n    width: 100%;\n    height: ".concat(vars.trackHeight, ";\n\t  background: ").concat(themeGet("colors.greyLight")(props), ";\n    border-radius: 4px;\n");
+const Wrapper = styled.div.withConfig({
   displayName: "Range__Wrapper",
   componentId: "sc-zb0zps-0"
-})(["", " ", " position:relative;width:100%;display:flex;flex-wrap:wrap;align-items:center;&:before{content:\"", "\";font-size:10px;font-weight:bold;}&:after{content:\"", "\";font-size:10px;font-weight:bold;}", ""], space, layout, function (props) {
-  return props.minValue;
-}, function (props) {
-  return props.maxValue;
-}, function (props) {
-  return props.inverted ? css(["&:before,&:after{color:", ";}input{&:focus{background:rgba(255,255,255,0.1);}&::-webkit-slider-runnable-track{background:", ";}&::-moz-range-track{background:", ";}&::-ms-track{background:", ";}}output{color:", ";}"], themeGet("colors.white")(props), themeGet("colors.greyDark")(props), themeGet("colors.greyDark")(props), themeGet("colors.greyDark")(props), themeGet("colors.white")(props)) : css([""]);
-});
-var Input = styled.input.attrs({
+})(["", " ", " position:relative;width:100%;display:flex;flex-wrap:wrap;align-items:center;&:before{content:\"", "\";font-size:10px;font-weight:bold;}&:after{content:\"", "\";font-size:10px;font-weight:bold;}", ""], space, layout, props => props.minValue, props => props.maxValue, props => props.inverted ? css(["&:before,&:after{color:", ";}input{&:focus{background:rgba(255,255,255,0.1);}&::-webkit-slider-runnable-track{background:", ";}&::-moz-range-track{background:", ";}&::-ms-track{background:", ";}}output{color:", ";}"], themeGet("colors.white")(props), themeGet("colors.greyDark")(props), themeGet("colors.greyDark")(props), themeGet("colors.greyDark")(props), themeGet("colors.white")(props)) : css([""]));
+const Input = styled.input.attrs({
   type: "range"
 }).withConfig({
   displayName: "Range__Input",
   componentId: "sc-zb0zps-1"
-})(["flex:1;margin:0;padding:0;width:100%;min-height:", ";background:transparent;cursor:ew-resize;padding:10px 10px;border-radius:25px;transition:", ";&:focus{outline:none;background:rgba(0,0,0,0.05);}&,&::-webkit-slider-thumb{-moz-appearance:none;-webkit-appearance:none;appearance:none;}&::-webkit-slider-runnable-track{", ";}&::-moz-range-track{", ";}&::-ms-track{", ";}&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}&::-ms-thumb{", ";}&::-ms-tooltip{display:none;}"], vars.thumbDiameter, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, track, track, track, thumb, thumb, thumb);
-var Output = styled.output.withConfig({
+})(["flex:1;margin:0;padding:0;width:100%;min-height:", ";background:transparent;cursor:ew-resize;padding:10px 10px;border-radius:25px;transition:", ";&:focus{outline:none;background:rgba(0,0,0,0.05);}&,&::-webkit-slider-thumb{-moz-appearance:none;-webkit-appearance:none;appearance:none;}&::-webkit-slider-runnable-track{", ";}&::-moz-range-track{", ";}&::-ms-track{", ";}&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}&::-ms-thumb{", ";}&::-ms-tooltip{display:none;}"], vars.thumbDiameter, props => themeGet("transition.transitionDefault")(props), track, track, track, thumb, thumb, thumb);
+const Output = styled.output.withConfig({
   displayName: "Range__Output",
   componentId: "sc-zb0zps-2"
-})(["display:block;user-select:none;font-weight:bold;text-align:center;font-size:14px;pointer-events:none;text-align:center;flex:1 1 100%;order:4;color:", ";"], function (props) {
-  return themeGet("colors.greyDarker")(props);
-});
+})(["display:block;user-select:none;font-weight:bold;text-align:center;font-size:14px;pointer-events:none;text-align:center;flex:1 1 100%;order:4;color:", ";"], props => themeGet("colors.greyDarker")(props));
 /**
  * Range component is pretty self explanatory, used to select a number out of a range, make sure to set a min, max and default value.
  */
 export default function Range(_ref) {
-  var min = _ref.min,
-    max = _ref.max,
-    inverted = _ref.inverted,
-    defaultValue = _ref.defaultValue,
-    theme = _ref.theme,
-    ariaLabel = _ref.ariaLabel,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(Wrapper, {
+  let {
+    min,
+    max,
+    inverted,
+    defaultValue,
+    theme,
+    ariaLabel,
+    ...props
+  } = _ref;
+  const component = /*#__PURE__*/_jsxs(Wrapper, {
     minValue: min,
     maxValue: max,
-    inverted: inverted
-  }, /*#__PURE__*/React.createElement(Input, _extends({
-    min: min,
-    max: max,
-    "aria-label": ariaLabel
-  }, props)), /*#__PURE__*/React.createElement(Output, {
-    "aria-hidden": "true"
-  }, defaultValue));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    inverted: inverted,
+    children: [/*#__PURE__*/_jsx(Input, {
+      min: min,
+      max: max,
+      "aria-label": ariaLabel,
+      ...props
+    }), /*#__PURE__*/_jsx(Output, {
+      "aria-hidden": "true",
+      children: defaultValue
+    })]
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 }
 Range.propTypes = {
   /** Sets the minimum value for the range */