orcs-design-system 3.5.0 → 3.5.1

package/es/components/Badge/index.js

@@ -20,19 +20,26 @@ const Item = /*#__PURE__*/styled("span").withConfig({
   "data-testid": props["data-testid"] ? props["data-testid"] : null
 }))(props => css(_objectSpread({
   fontSize: themeGet("fontSizes.0")(props),
-  lineHeight: themeGet("fontSizes.1")(props),
+  lineHeight: "1",
   fontWeight: themeGet("fontWeights.2")(props),
-  display: "inline-block",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  verticalAlign: "middle",
   position: "relative",
-  pt: themeGet("space.2")(props),
-  pb: "calc(".concat(themeGet("space.2")(props), " + 1px)"),
-  px: themeGet("space.3")(props),
+  height: themeGet("tagScale.tagHeightDefault")(props),
+  minHeight: themeGet("tagScale.tagHeightDefault")(props),
+  px: themeGet("space.2")(props),
   cursor: "default",
   borderRadius: 1,
   color: themeGet("colors.greyDarkest")(props),
   bg: themeGet("colors.greyLighter")(props),
   border: "1px solid ".concat(themeGet("colors.greyLighter")(props)),
-  whiteSpace: props.noWrap ? "nowrap" : "normal"
+  whiteSpace: "nowrap",
+  "& > *": {
+    lineHeight: "1",
+    margin: "0"
+  }
 }, props.altStyle ? {
   color: themeGet("colors.greyDarker")(props),
   bg: themeGet("colors.white")(props),

package/es/components/CodeBlock/index.js

@@ -468,7 +468,7 @@ CodeBlock.__docgenInfo = {
       "description": "The code to display. Should be a string. Required when not using editable mode.",
       "type": {
         "name": "custom",
-        "raw": "(props, propName, componentName) => {\n  if (!props.editable) {\n    if (props[propName] === undefined || props[propName] === null) {\n      return new Error(\n        `Prop \\`${propName}\\` is required in \\`${componentName}\\` when \\`editable\\` is false or not provided.`\n      );\n    }\n    if (typeof props[propName] !== \"string\") {\n      return new Error(\n        `Invalid prop \\`${propName}\\` of type \\`${typeof props[\n          propName\n        ]}\\` supplied to \\`${componentName}\\`, expected \\`string\\`.`\n      );\n    }\n  } else if (\n    props[propName] !== undefined &&\n    typeof props[propName] !== \"string\"\n  ) {\n    return new Error(\n      `Invalid prop \\`${propName}\\` of type \\`${typeof props[\n        propName\n      ]}\\` supplied to \\`${componentName}\\`, expected \\`string\\`.`\n    );\n  }\n  return null;\n}"
+        "raw": "(props, propName, componentName) => {\n  if (!props.editable) {\n    if (props[propName] === undefined || props[propName] === null) {\n      return new Error(\n        `Prop \\`${propName}\\` is required in \\`${componentName}\\` when \\`editable\\` is false or not provided.`\n      );\n    }\n    if (typeof props[propName] !== \"string\") {\n      return new Error(\n        `Invalid prop \\`${propName}\\` of type \\`${typeof props[\n          propName\n        ]}\\` supplied to \\`${componentName}\\`, expected \\`string\\`.`\n      );\n    }\n  } else if (props[propName] !== undefined && typeof props[propName] !== \"string\") {\n    return new Error(\n      `Invalid prop \\`${propName}\\` of type \\`${typeof props[\n        propName\n      ]}\\` supplied to \\`${componentName}\\`, expected \\`string\\`.`\n    );\n  }\n  return null;\n}"
       },
       "required": false
     },
@@ -490,7 +490,7 @@ CodeBlock.__docgenInfo = {
       "description": "The value for editable mode. Required when `editable` is true.",
       "type": {
         "name": "custom",
-        "raw": "(props, propName, componentName) => {\n  if (\n    props.editable &&\n    props[propName] !== undefined &&\n    typeof props[propName] !== \"string\"\n  ) {\n    return new Error(\n      `Invalid prop \\`${propName}\\` of type \\`${typeof props[\n        propName\n      ]}\\` supplied to \\`${componentName}\\`, expected \\`string\\` when \\`editable\\` is true.`\n    );\n  }\n  return null;\n}"
+        "raw": "(props, propName, componentName) => {\n  if (props.editable && props[propName] !== undefined && typeof props[propName] !== \"string\") {\n    return new Error(\n      `Invalid prop \\`${propName}\\` of type \\`${typeof props[\n        propName\n      ]}\\` supplied to \\`${componentName}\\`, expected \\`string\\` when \\`editable\\` is true.`\n    );\n  }\n  return null;\n}"
       },
       "required": false
     },

package/es/components/FloatingPanels/FloatingPanels.stories.js

@@ -182,7 +182,7 @@ export const unselectableFloatingPanels = () => /*#__PURE__*/_jsx(Box, {
       title: "Selected",
       iconName: "smile",
       content: /*#__PURE__*/_jsxs("span", {
-        children: ["You cannot change this selection due to", " ", /*#__PURE__*/_jsx("code", {
+        children: ["You cannot change this selection due to ", /*#__PURE__*/_jsx("code", {
           children: "disablePanelSelect"
         })]
       })

package/es/components/Select/index.js

@@ -36,7 +36,7 @@ const Label = /*#__PURE__*/styled("label").withConfig({
 }))(props => css({
   display: "block",
   color: props.inverted ? themeGet("colors.white")(props) : props.invalid ? themeGet("colors.dangerDark")(props) : themeGet("colors.greyDarkest")(props),
-  fontSize: themeGet("fontSizes.1")(props),
+  fontSize: themeGet("fontSizes.0")(props),
   fontWeight: props.bold ? themeGet("fontWeights.2")(props) : themeGet("fontWeights.1")(props),
   mb: "xs"
 }));
@@ -99,7 +99,7 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       color: props.inverted ? themeGet("colors.greyLighter") : themeGet("colors.greyDarkest")({
         theme
       }),
-      fontSize: themeGet("fontSizes.1")({
+      fontSize: themeGet("fontSizes.0")({
         theme
       }),
       border: props.inverted ? themeGet("borderWidths.1")({
@@ -180,7 +180,7 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       borderRadius: themeGet("radii.2")({
         theme
       }),
-      fontSize: themeGet("fontSizes.1")({
+      fontSize: themeGet("fontSizes.0")({
         theme
       }),
       overflow: "hidden",
@@ -197,7 +197,7 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       }) : themeGet("colors.grey")({
         theme
       }),
-      fontSize: themeGet("fontSizes.1")({
+      fontSize: themeGet("fontSizes.0")({
         theme
       })
     }),
@@ -329,7 +329,7 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       }) : themeGet("colors.primaryDark")({
         theme
       }),
-      fontSize: themeGet("fontSizes.1")({
+      fontSize: themeGet("fontSizes.0")({
         theme
       }),
       whiteSpace: "break-spaces"
@@ -341,7 +341,7 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       }) : themeGet("colors.greyDarkest")({
         theme
       }),
-      fontSize: themeGet("fontSizes.1")({
+      fontSize: themeGet("fontSizes.0")({
         theme
       })
     })

package/es/components/SideNavV2/NavItem.js

@@ -20,10 +20,10 @@ const IconWrapper = /*#__PURE__*/styled.span.withConfig({
   displayName: "IconWrapper",
   componentId: "sc-1qz1q0h-0"
 })(["display:inline-flex;align-items:center;justify-content:center;width:", ";flex-shrink:0;> *{width:", " !important;max-width:", ";}"], ICON_COLUMN_WIDTH, ICON_COLUMN_WIDTH, ICON_COLUMN_WIDTH);
-const sharedNavItemStyles = props => styledCss(["cursor:pointer;text-decoration:none;border-radius:", ";width:100%;position:relative;border:none;path{transition:", ";fill:", ";}font-family:", ";display:grid;grid-template-columns:", ";place-items:center;transition:", ";background-color:transparent;font-size:1.4rem;font-weight:", ";", " @media screen and (max-width:", "px){width:auto;max-height:30px;height:30px;overflow:visible;}&:focus{outline:0;}"], themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.greyDarker"), themeGet("fonts.main"), ICON_COLUMN_WIDTH, themeGet("transition.transitionDefault"), themeGet("fontWeights.1"), !props.active && sharedNavItemHoverStyles, BREAKPOINTS.SMALL_SCREEN);
+const sharedNavItemStyles = /*#__PURE__*/styledCss(["cursor:pointer;text-decoration:none;border-radius:", ";width:100%;position:relative;border:none;path{transition:", ";fill:", ";}font-family:", ";display:grid;grid-template-columns:", ";place-items:center;transition:", ";background-color:transparent;font-size:1.4rem;font-weight:", ";", " @media screen and (max-width:", "px){width:auto;max-height:30px;height:30px;}&:focus{outline:0;}"], themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.greyDarker"), themeGet("fonts.main"), ICON_COLUMN_WIDTH, themeGet("transition.transitionDefault"), themeGet("fontWeights.1"), sharedNavItemHoverStyles, BREAKPOINTS.SMALL_SCREEN);
 const expandedNavItemStyles = props => styledCss(["grid-template-columns:", " 1fr;gap:", ";justify-items:start;align-items:center;padding-left:0;.nav-item-text{font-size:", ";line-height:1;font-weight:", ";color:", ";text-align:left;justify-self:start;padding-left:", ";}&:hover .nav-item-text,&:focus .nav-item-text{color:", ";}"], ICON_COLUMN_WIDTH, themeGet("space.s"), themeGet("fontSizes.1"), themeGet("fontWeights.1"), props.active ? themeGet("colors.greyDarkest") : themeGet("colors.greyDarker"), themeGet("space.s"), props.active ? themeGet("colors.greyDarkest") : themeGet("colors.primary"));
 const variantActiveStyles = {
-  expandableItem: () => styledCss(["color:", ";path{fill:", ";}&:hover .nav-item-text,&:focus .nav-item-text{color:", ";}@media screen and (max-width:", "px){&::after{content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:0;border-top:3px solid ", ";transform:translateY(-10px);z-index:10;}}"], themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"), themeGet("colors.primary"), BREAKPOINTS.SMALL_SCREEN, themeGet("colors.primary")),
+  expandableItem: () => styledCss(["color:", ";path{fill:", ";}&:after{height:calc(100% + ", " + ", ");position:absolute;right:-", ";top:-", ";content:\"\";border-right:3px solid ", ";z-index:5;}&:hover .nav-item-text,&:focus .nav-item-text{color:", ";}@media screen and (max-width:", "px){&:after{border-top:3px solid ", ";border-right:none;transform:translateY(-10px);right:auto;width:100%;}}"], themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"), themeGet("space.xs"), themeGet("space.xs"), themeGet("space.xs"), themeGet("space.xs"), themeGet("colors.primary"), themeGet("colors.primary"), BREAKPOINTS.SMALL_SCREEN, themeGet("colors.primary")),
   default: styledCss(["", ""], props => sharedNavItemActiveStylesProps(props))
 };
 const getActiveStyles = props => {
@@ -36,11 +36,11 @@ const getActiveStyles = props => {
 const SideNavItemLink = /*#__PURE__*/styled.div.withConfig({
   displayName: "SideNavItemLink",
   componentId: "sc-1qz1q0h-1"
-})(["& > a{", " ", " ", "}"], props => sharedNavItemStyles(props), props => props.isExpanded ? expandedNavItemStyles(props) : "", props => getActiveStyles(props));
+})(["& > a{", " ", " ", "}"], sharedNavItemStyles, props => props.isExpanded ? expandedNavItemStyles(props) : "", getActiveStyles);
 const SideNavItem = /*#__PURE__*/styled("button").withConfig({
   displayName: "SideNavItem",
   componentId: "sc-1qz1q0h-2"
-})(["", " ", " ", ""], props => sharedNavItemStyles(props), props => props.isExpanded ? expandedNavItemStyles(props) : "", props => getActiveStyles(props));
+})(["", " ", " ", ""], sharedNavItemStyles, props => props.isExpanded ? expandedNavItemStyles(props) : "", getActiveStyles);
 const BadgeNumber = /*#__PURE__*/styled("div").withConfig({
   displayName: "BadgeNumber",
   componentId: "sc-1qz1q0h-3"
@@ -76,45 +76,22 @@ const BadgeDot = /*#__PURE__*/styled("div").withConfig({
 const SideNavItemWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "SideNavItemWrapper",
   componentId: "sc-1qz1q0h-5"
-})(props => css(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+})(props => css(_objectSpread(_objectSpread({
   padding: themeGet("space.xs")(props),
   borderRadius: themeGet("radii.2")(props),
   width: "100%",
-  position: "relative",
   "&:nth-child(1 of .bottom-aligned) ": {
     marginTop: props.bottomAligned && "auto"
-  }
-}, !props.isActive && !props.isLink && {
-  "&:has(button:hover)": {
-    backgroundColor: themeGet("colors.greyLightest")(props)
-  }
-}), !props.isActive && props.isLink && {
-  "&:has(a:hover):not(:has(a.active))": {
+  },
+  "&:has(button:hover), &:has(a:hover)": {
     backgroundColor: themeGet("colors.greyLightest")(props)
   }
-}), props.isActive && props.isLink && {
+}, props.isActive && props.isLink && {
   backgroundColor: themeGet("colors.primaryLightest")(props)
-}), props.isActive && props.isExpandable && {
-  "&::after": {
-    content: '""',
-    position: "absolute",
-    right: "-9px",
-    top: "0",
-    bottom: "0",
-    width: "3px",
-    backgroundColor: themeGet("colors.primary")(props),
-    zIndex: 5
-  }
 }), {}, {
-  ["@media screen and (max-width: ".concat(BREAKPOINTS.SMALL_SCREEN, "px)")]: _objectSpread(_objectSpread({
+  ["@media screen and (max-width: ".concat(BREAKPOINTS.SMALL_SCREEN, "px)")]: {
     padding: themeGet("space.xs")(props)
-  }, props.isActive && props.isExpandable && {
-    "&::after": {
-      display: "none"
-    }
-  }), props.isActive && props.isLink && {
-    backgroundColor: themeGet("colors.primaryLightest")(props)
-  })
+  }
 })));
 
 /**
@@ -162,7 +139,6 @@ const NavItem = _ref => {
         ref: el => navItemRefs.current[item.index] = el,
         children: /*#__PURE__*/_jsxs(Component, {
           item: item,
-          className: isActive ? "active" : "",
           children: [/*#__PURE__*/_jsx(IconWrapper, {
             children: /*#__PURE__*/_jsx(Icon, {
               icon: ["far", item.iconName],
@@ -199,21 +175,19 @@ const NavItem = _ref => {
       }), item.index);
     }
   }, [item, isActive, isExpanded, isSmallScreen, handleItemClick, navItemRefs]);
-  const isExpandable = item.actionType === "component";
-  return /*#__PURE__*/_jsx(SideNavItemWrapper, {
+  return isSmallScreen ? /*#__PURE__*/_jsx(Popover, {
+    text: item.name,
+    direction: "top",
+    textAlign: "center",
+    width: "fit-content",
+    tabIndex: "-1",
+    children: renderedNavItem
+  }) : /*#__PURE__*/_jsx(SideNavItemWrapper, {
     className: item.bottomAligned && "bottom-aligned",
     bottomAligned: item.bottomAligned,
     isActive: isActive,
     isLink: item.actionType === "link",
-    isExpandable: isExpandable,
-    children: isSmallScreen ? /*#__PURE__*/_jsx(Popover, {
-      text: item.name,
-      direction: "top",
-      textAlign: "center",
-      width: "fit-content",
-      tabIndex: "-1",
-      children: renderedNavItem
-    }) : renderedNavItem
+    children: renderedNavItem
   });
 };
 NavItem.propTypes = {

package/es/components/Tag/index.js

@@ -23,7 +23,7 @@ const TagValue = /*#__PURE__*/styled.button.attrs(props => ({
 })).withConfig({
   displayName: "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;line-height:", ";display:flex;gap:", ";align-items:center;flex-wrap:wrap;user-select:text;font-size:", ";font-weight:", ";white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:pointer;border-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";padding:", ";border:1px solid;", ""], props => themeGet("fontSizes.1")(props), props => props.small ? "3px" : "4px", props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props), props => themeGet("fontWeights.2")(props), props => themeGet("transition.transitionDefault")(props), themeGet("tagScale.tagBorderRadius"), props => props.showEdit || props.showInfo || props.showRemove ? "0" : themeGet("tagScale.tagBorderRadius"), props => props.showEdit || props.showInfo || props.showRemove ? "0" : themeGet("tagScale.tagBorderRadius"), props => props.small ? themeGet("tagScale.tagPaddingSmall") : themeGet("tagScale.tagPaddingDefault"), props => variant({
+})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:1;display:flex;gap:", ";align-items:center;flex-wrap:wrap;user-select:text;font-size:", ";font-weight:", ";white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:pointer;border-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";padding:", ";border:1px solid;", ""], props => props.small ? "3px" : "4px", props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props), props => themeGet("fontWeights.2")(props), props => themeGet("transition.transitionDefault")(props), themeGet("tagScale.tagBorderRadius"), props => props.showEdit || props.showInfo || props.showRemove ? "0" : themeGet("tagScale.tagBorderRadius"), props => props.showEdit || props.showInfo || props.showRemove ? "0" : themeGet("tagScale.tagBorderRadius"), props => props.small ? themeGet("tagScale.tagPaddingSmall") : themeGet("tagScale.tagPaddingDefault"), props => variant({
   variants: {
     default: {
       background: themeGet("colors.white")(props),
@@ -283,7 +283,7 @@ export default function Tag(_ref) {
             imageAlt: "Avatar for ".concat(children),
             image: personEntity.avatarSrc,
             initials: personEntity.initials,
-            customSize: small ? "18px" : "20px"
+            customSize: small ? "16px" : "20px"
           })
         }), /*#__PURE__*/_jsxs(TagValueText, {
           showStrikeThrough: showStrikeThrough,

package/es/components/TextInput/index.js

@@ -31,7 +31,7 @@ const IconWrapper = /*#__PURE__*/styled.label.withConfig({
   displayName: "IconWrapper",
   componentId: "sc-shde0o-1"
 })(["display:flex;align-items:center;min-height:inherit;position:absolute;width:fit-content;bottom:0;padding:0 10px;svg{opacity:0.4;}", ";"], props => props.iconLeft && !props.floating ? css(["left:0;"]) : props.iconLeft && props.floating ? css(["left:0;bottom:11px;"]) : props.iconRight && !props.floating ? css(["right:0;"]) : props.iconRight && props.floating ? css(["right:0;bottom:11px;"]) : css([""]));
-const InputStyle = /*#__PURE__*/css(["display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;box-shadow:none;font-size:", ";z-index:1;border-radius:", ";transition:", ";background:", ";color:", ";width:", ";height:", ";padding:", ";border:1px solid ", ";", " &:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", ";border:1px solid ", ";", ";}"], props => themeGet("fontSizes.2")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? themeGet("colors.greyLightest")(props) : themeGet("colors.white")(props), props => props.disabled ? themeGet("colors.grey")(props) : themeGet("colors.greyDarkest")(props), props => props.fullWidth ? "100%" : "auto", props => props.height ? props.height : props.floating ? themeGet("appScale.inputHeightLarge")(props) : themeGet("appScale.inputHeightDefault")(props), props => {
+const InputStyle = /*#__PURE__*/css(["display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;box-shadow:none;font-size:", ";z-index:1;border-radius:", ";transition:", ";background:", ";color:", ";width:", ";height:", ";padding:", ";border:1px solid ", ";", " &:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", ";border:1px solid ", ";", ";}"], props => themeGet("fontSizes.0")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? themeGet("colors.greyLightest")(props) : themeGet("colors.white")(props), props => props.disabled ? themeGet("colors.grey")(props) : themeGet("colors.greyDarkest")(props), props => props.fullWidth ? "100%" : "auto", props => props.height ? props.height : props.floating ? themeGet("appScale.inputHeightLarge")(props) : themeGet("appScale.inputHeightDefault")(props), props => {
   let left = props.iconLeft ? 36 : 10;
   let right = props.iconRight ? 36 : 10;
   let top = props.floating ? 25 : 5;
@@ -53,7 +53,7 @@ const NumberInput = /*#__PURE__*/styled(NumericFormat).attrs(props => ({
 const Label = /*#__PURE__*/styled.label.withConfig({
   displayName: "Label",
   componentId: "sc-shde0o-4"
-})(["display:block;z-index:2;text-align:left;font-size:", ";font-weight:", ";transition:", ";padding-right:", ";margin-bottom:", ";color:", ";", ";", ";"], props => themeGet("fontSizes.1")(props), props => props.bold ? themeGet("fontWeights.2")(props) : themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => props.floating && props.iconRight ? "40px" : "12px", props => props.floating ? 0 : themeGet("space.xs")(props), props => props.inverted ? themeGet("colors.white")(props) : props.valid ? themeGet("colors.successDark")(props) : props.invalid ? themeGet("colors.dangerDark")(props) : themeGet("colors.greyDarkest")(props), props => props.floating ? css(["padding-left:", ";cursor:text;position:absolute;top:", ";color:", ";"], props => props.iconLeft ? "37px" : "11px", props => {
+})(["display:block;z-index:2;text-align:left;font-size:", ";font-weight:", ";transition:", ";padding-right:", ";margin-bottom:", ";color:", ";", ";", ";"], props => themeGet("fontSizes.0")(props), props => props.bold ? themeGet("fontWeights.2")(props) : themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => props.floating && props.iconRight ? "40px" : "12px", props => props.floating ? 0 : themeGet("space.xs")(props), props => props.inverted ? themeGet("colors.white")(props) : props.valid ? themeGet("colors.successDark")(props) : props.invalid ? themeGet("colors.dangerDark")(props) : themeGet("colors.greyDarkest")(props), props => props.floating ? css(["padding-left:", ";cursor:text;position:absolute;top:", ";color:", ";"], props => props.iconLeft ? "37px" : "11px", props => {
   let inputHeight = themeGet("appScale.inputHeightLarge")(props);
   return "calc(".concat(inputHeight, " / 3)");
 }, props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.greyDark")(props)) : css([""]), props => props.mandatory ? css(["&::after{content:\" *\";color:", ";}"], themeGet("colors.danger")(props)) : css([""]));

package/es/components/Toggle/index.js

@@ -26,7 +26,7 @@ const Item = /*#__PURE__*/styled.label.withConfig({
 const Label = /*#__PURE__*/styled.label.withConfig({
   displayName: "Label",
   componentId: "sc-f6l22k-3"
-})(["margin:0;padding-left:8px;cursor:pointer;font-size:", ";color:", ";"], props => props.small ? themeGet("fontSizes.1")(props) : themeGet("fontSizes.2")(props), props => props.disabled ? themeGet("colors.grey")(props) : props.inverted ? themeGet("colors.white")(props) : themeGet("colors.greyDarkest")(props));
+})(["margin:0;padding-left:8px;cursor:pointer;font-size:", ";color:", ";"], props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props), props => props.disabled ? themeGet("colors.grey")(props) : props.inverted ? themeGet("colors.white")(props) : themeGet("colors.greyDarkest")(props));
 
 /**
  * `Toggle` should be used for when functionality is required to turn something off/on, hide/show or disable/enable. Default is off (left/grey), this works like a checkbox, so clicking or applying a checked attribute with javascript will turn it on (right/green).

package/es/components/Typography/index.js

@@ -160,7 +160,7 @@ export const H5 = /*#__PURE__*/styled("h5").withConfig({
   componentId: "sc-1613j99-4"
 })(props => css({
   fontFamily: themeGet("fonts.main")(props),
-  fontSize: themeGet("fontSizes.2")(props),
+  fontSize: themeGet("fontSizes.1")(props),
   fontWeight: themeGet("fontWeights.1")(props),
   textTransform: props.uppercase ? "uppercase" : "none",
   wordBreak: props.breakWord ? "break-word" : "normal"
@@ -178,10 +178,10 @@ export const H5 = /*#__PURE__*/styled("h5").withConfig({
   prop: "sizing",
   variants: {
     large: {
-      fontSize: themeGet("fontSizes.3")(props)
+      fontSize: themeGet("fontSizes.2")(props)
     },
     small: {
-      fontSize: themeGet("fontSizes.1")(props)
+      fontSize: themeGet("fontSizes.0")(props)
     }
   }
 }), typeStyles, createColorVariants);
@@ -220,7 +220,7 @@ export const P = /*#__PURE__*/styled("p").withConfig({
   componentId: "sc-1613j99-6"
 })(props => css({
   fontFamily: themeGet("fonts.main")(props),
-  fontSize: themeGet("fontSizes.2")(props),
+  fontSize: themeGet("fontSizes.0")(props),
   fontWeight: themeGet("fontWeights.1")(props),
   textTransform: props.uppercase ? "uppercase" : "none",
   wordBreak: props.breakWord ? "break-word" : "normal"
@@ -249,7 +249,7 @@ export const Small = /*#__PURE__*/styled("small").withConfig({
 }).attrs({
   className: "Small"
 })(props => css({
-  fontSize: themeGet("fontSizes.1")(props),
+  fontSize: themeGet("fontSizes.0")(props),
   textTransform: props.uppercase ? "uppercase" : "none",
   wordBreak: props.breakWord ? "break-word" : "normal"
 }), props => variant({
@@ -268,7 +268,7 @@ export const Text = /*#__PURE__*/styled("span").withConfig({
   componentId: "sc-1613j99-8"
 })(props => css({
   fontFamily: themeGet("fonts.main")(props),
-  fontSize: themeGet("fontSizes.2")(props),
+  fontSize: themeGet("fontSizes.0")(props),
   fontWeight: themeGet("fontWeights.1")(props),
   textTransform: props.uppercase ? "uppercase" : "none",
   wordBreak: props.breakWord ? "break-word" : "normal"

package/es/systemtheme.js

@@ -216,38 +216,38 @@ export const mediaQueries = {
 // APP-SPECIFIC DIMENSIONS
 
 export const appScale = {
-  navBarSize: "54px",
-  newNavBarSize: "70px",
-  navBarLogoSize: "50px",
-  sideNavSize: "50px",
+  navBarSize: "50px",
+  newNavBarSize: "64px",
+  navBarLogoSize: "42px",
+  sideNavSize: "42px",
   sidebarMaxWidth: "360px",
-  sidebarMaxWidthLarge: "550px",
+  sidebarMaxWidthLarge: "450px",
   sidebarMobileHeight: "50vh",
   mobileNavMenuWidth: "250px",
-  inputHeightDefault: "38px",
-  inputHeightLarge: "58px",
-  tabsHeight: "38px"
+  inputHeightDefault: "32px",
+  inputHeightLarge: "52px",
+  tabsHeight: "32px"
 };
 export const avatarScale = {
-  avatarSmall: "38px",
-  avatarDefault: "46px",
-  avatarLarge: "80px",
+  avatarSmall: "34px",
+  avatarDefault: "40px",
+  avatarLarge: "70px",
   headerAvatarDefault: "65px",
   headerAvatarLarge: "150px",
-  navBarAvatarSize: "46px"
+  navBarAvatarSize: "38px"
 };
 export const tagScale = {
-  tagHeightDefault: "28px",
-  tagHeightSmall: "24px",
-  tagPaddingDefault: "4px 8px",
-  tagPaddingSmall: "3px 6px",
-  tagBorderRadius: "14px",
+  tagHeightDefault: "22px",
+  tagHeightSmall: "18px",
+  tagPaddingDefault: "3px 7px",
+  tagPaddingSmall: "2px 5px",
+  tagBorderRadius: "12px",
   tagAvatarSizeDefault: "20px",
-  tagAvatarSizeSmall: "18px",
+  tagAvatarSizeSmall: "16px",
   tagAvatarMarginLeftDefault: "-3px",
   tagAvatarMarginLeftSmall: "-1px",
-  tagAvatarFontSizeDefault: "0.9rem",
-  tagAvatarFontSizeSmall: "0.8rem"
+  tagAvatarFontSizeDefault: "0.8rem",
+  tagAvatarFontSizeSmall: "0.7rem"
 };
 export default {
   fonts,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "engines": {
     "node": ">=20.0.0"
   },
@@ -46,12 +46,12 @@
     "test:github-packages-auth": "node scripts/test-github-packages-auth.js"
   },
   "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@floating-ui/react": "^0.27.16",
-    "@mui/icons-material": "^7.3.5",
-    "@mui/material": "^7.3.5",
-    "@mui/x-date-pickers": "^8.18.0",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@floating-ui/react": "^0.26.19",
+    "@mui/icons-material": "^6.5.0",
+    "@mui/material": "^6.5.0",
+    "@mui/x-date-pickers": "^8.16.0",
     "@styled-system/css": "^5.1.5",
     "@styled-system/prop-types": "^5.1.5",
     "@styled-system/should-forward-prop": "^5.1.5",
@@ -71,8 +71,7 @@
     "react-number-format": "^5.3.0",
     "react-router-dom": "^5.3.4",
     "react-select": "^5.10.2",
-    "styled-components": "^6.1.19",
-    "stylis": "^4.3.1",
+    "styled-components": "^5.2.1",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {