orcs-design-system 2.0.73 → 2.0.76

package/es/components/Select/index.js

@@ -63,7 +63,11 @@ var Label = styled("label").withConfig({
  */
 
 var Select = /*#__PURE__*/forwardRef(function (props, ref) {
-  var customStyles = {
+  var _props$updateStyles = props.updateStyles,
+      updateStyles = _props$updateStyles === void 0 ? function (s) {
+    return s;
+  } : _props$updateStyles;
+  var customStyles = updateStyles({
     menu: function menu(provided, state) {
       return _objectSpread(_objectSpread({}, provided), {}, {
         opacity: state.isDisabled ? 0.7 : 1,
@@ -110,7 +114,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     valueContainer: function valueContainer(provided) {
       return _objectSpread(_objectSpread({}, provided), {}, {
-        padding: props.padding ? props.padding : "2px 8px"
+        padding: props.padding ? props.padding : "2px 4px"
       });
     },
     clearIndicator: function clearIndicator(provided, state) {
@@ -143,34 +147,38 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     multiValue: function multiValue(provided, state) {
       return _objectSpread(_objectSpread({}, provided), {}, {
         opacity: state.isDisabled ? 0.7 : 1,
-        backgroundColor: props.inverted ? themeGet("colors.primaryDark")(props) : themeGet("colors.primary")(props),
+        backgroundColor: "transparent",
         color: themeGet("colors.white")(props),
-        borderRadius: themeGet("radii.2")(props),
+        alignItems: "center",
+        padding: "0 !important",
         fontSize: themeGet("fontSizes.1")(props),
         wordWrap: "break-word"
       });
     },
-    multiValueLabel: function multiValueLabel(provided) {
+    multiValueLabel: function multiValueLabel(provided, state) {
       return _objectSpread(_objectSpread({}, provided), {}, {
-        backgroundColor: props.inverted ? themeGet("colors.primaryDark")(props) : themeGet("colors.primary")(props),
+        backgroundColor: themeGet("colors.primary")(props),
         color: themeGet("colors.white"),
-        borderRadius: themeGet("radii.2")(props),
-        padding: themeGet("space.2")(props),
-        fontSize: themeGet("fontSizes.1")(props),
+        padding: state.data.isFixed ? "4px 10px 5px 10px !important" : "4px 8px 5px 10px !important",
+        fontSize: "1.3rem",
+        fontWeight: "600",
         wordWrap: "break-word",
-        whiteSpace: "wrap"
+        whiteSpace: "break-spaces",
+        borderRadius: state.data.isFixed ? "15px" : "15px 0 0 15px"
       });
     },
     multiValueRemove: function multiValueRemove(provided, state) {
       return _objectSpread(_objectSpread({}, provided), {}, {
-        backgroundColor: props.inverted ? themeGet("colors.primaryDark")(props) : themeGet("colors.primary")(props),
+        backgroundColor: themeGet("colors.primary")(props),
         color: themeGet("colors.white")(props),
-        borderRadius: themeGet("radii.2")(props),
-        paddingLeft: themeGet("space.0")(props),
-        paddingRight: themeGet("space.1")(props),
+        borderLeft: "solid 1px ".concat(themeGet("colors.primaryDark")(props)),
+        padding: "6.5px 6px 6.5px 5px",
         display: state.data.isFixed ? "none" : provided.display,
+        cursor: "pointer",
+        borderRadius: "0 15px 15px 0",
+        transition: themeGet("transition.transitionDefault")(props),
         "&:hover": {
-          backgroundColor: themeGet("colors.primaryDarkest")(props),
+          backgroundColor: themeGet("colors.primaryDark")(props),
           color: themeGet("colors.white")(props)
         }
       });
@@ -180,7 +188,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
         opacity: state.isDisabled ? 0.7 : 1,
         backgroundColor: !state.isFocused && !props.inverted ? themeGet("colors.white")(props) : state.isFocused && !props.inverted ? themeGet("colors.primaryLightest")(props) : !state.isFocused && props.inverted ? themeGet("colors.greyDarker")(props) : themeGet("colors.primaryDark")(props),
         fontSize: themeGet("fontSizes.1")(props),
-        whiteSpace: "wrap"
+        whiteSpace: "break-spaces"
       });
     },
     placeholder: function placeholder(provided, state) {
@@ -190,7 +198,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
         fontSize: themeGet("fontSizes.1")(props)
       });
     }
-  };
+  });
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: props.theme
   }, /*#__PURE__*/React.createElement(Wrapper, _extends({
@@ -257,7 +265,10 @@ Select.propTypes = {
   theme: PropTypes.object,
 
   /** Specify if you want react-select createable option */
-  selectType: PropTypes.oneOf(["default", "createable"])
+  selectType: PropTypes.oneOf(["default", "createable"]),
+
+  /** Specify if you want to overwrite existing customStyles */
+  updateStyles: PropTypes.func
 };
 Select.defaultProps = {
   theme: systemtheme,
@@ -380,6 +391,13 @@ Select.__docgenInfo = {
       },
       "required": false,
       "description": "Specifies `onChange` function for the input"
+    },
+    "updateStyles": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Specify if you want to overwrite existing customStyles"
     }
   }
 };

package/es/components/Tag/index.js

@@ -13,7 +13,7 @@ var TagWrapper = styled.div.withConfig({
 var TagValue = styled.button.withConfig({
   displayName: "Tag__TagValue",
   componentId: "sc-1dh2aa8-1"
-})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;display:flex;align-items:center;flex-wrap:nowrap;font-size:1.3rem;font-weight:600;white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:", ";border-radius:", ";border:solid 1px ", ";padding:", ";background-color:", ";color:", ";", " &:focus{outline:0;z-index:2;box-shadow:", ";}"], themeGet("transition.transitionDefault"), function (props) {
+})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;display:flex;align-items:center;flex-wrap:nowrap;font-size:1.4rem;font-weight:600;white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:", ";border-radius:", ";border:solid 1px ", ";padding:", ";background-color:", ";color:", ";", " &:focus{outline:0;z-index:2;box-shadow:", ";}"], themeGet("transition.transitionDefault"), function (props) {
   return props.disabled ? "default" : "pointer";
 }, function (props) {
   return props.showEdit || props.showRemove ? "15px 0 0 15px" : "15px";
@@ -59,7 +59,7 @@ var TagRemove = styled(TagValue).withConfig({
 var TagType = styled.div.withConfig({
   displayName: "Tag__TagType",
   componentId: "sc-1dh2aa8-4"
-})(["text-transform:uppercase;margin-left:", ";padding:3px;font-size:1.2rem;line-height:1;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], themeGet("space.s"), themeGet("radii.1"), themeGet("fontSizes.0"), function (props) {
+})(["text-transform:uppercase;margin-left:", ";padding:3px;line-height:1;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], themeGet("space.s"), themeGet("radii.1"), themeGet("fontSizes.0"), function (props) {
   return props.selected ? themeGet("colors.primaryDark") : props.disabled ? themeGet("colors.grey") : themeGet("colors.primaryLightest");
 }, function (props) {
   return props.selected ? themeGet("colors.white") : props.disabled ? themeGet("colors.white") : themeGet("colors.primary");
@@ -112,6 +112,8 @@ export default function Tag(_ref) {
   })) : null));
 }
 Tag.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+
   /** Adds selected styling to tag */
   selected: PropTypes.bool,
 
@@ -206,6 +208,21 @@ Tag.__docgenInfo = {
       "required": false,
       "description": "Specifies the design theme"
     },
+    "children": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "node"
+        }, {
+          "name": "arrayOf",
+          "value": {
+            "name": "node"
+          }
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
     "onSelect": {
       "type": {
         "name": "func"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "2.0.73",
+  "version": "2.0.76",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",