orcs-design-system 3.3.15 → 3.3.17

package/es/components/FloatingPanels/FloatingPanels.styles.js

@@ -4,26 +4,31 @@ const panelWidth = "300px";
 export const ComponentContainer = styled.div.withConfig({
   displayName: "FloatingPanelsstyles__ComponentContainer",
   componentId: "sc-1by914f-0"
-})(["z-index:2;position:absolute;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-height:", ";", " ", ""], _ref => {
+})(["z-index:", ";position:absolute;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-height:", ";", " ", ""], _ref => {
   let {
-    containerHeight
+    zIndex
   } = _ref;
-  return containerHeight ? `${containerHeight}px` : "100%";
+  return zIndex;
 }, _ref2 => {
   let {
-    position
+    containerHeight
   } = _ref2;
-  return Object.entries(position).filter(_ref3 => {
-    let [, value] = _ref3;
+  return containerHeight ? `${containerHeight}px` : "100%";
+}, _ref3 => {
+  let {
+    position
+  } = _ref3;
+  return Object.entries(position).filter(_ref4 => {
+    let [, value] = _ref4;
     return value !== undefined;
-  }).map(_ref4 => {
-    let [key, value] = _ref4;
+  }).map(_ref5 => {
+    let [key, value] = _ref5;
     return `${key}: ${typeof value === "number" ? `${value}px` : value};`;
   }).join("\n");
-}, _ref5 => {
+}, _ref6 => {
   let {
     centered
-  } = _ref5;
+  } = _ref6;
   return centered ? `
       margin-left: 50%;
       transform: translateX(-50%);
@@ -33,19 +38,19 @@ export const ComponentContainer = styled.div.withConfig({
 export const PanelContainer = styled.div.withConfig({
   displayName: "FloatingPanelsstyles__PanelContainer",
   componentId: "sc-1by914f-1"
-})(["display:flex;flex-direction:column;align-items:flex-end;box-shadow:0 1px 3px rgba(0,0,0,0.1);gap:8px;border-radius:calc(", " + 1px);overflow:hidden;background:transparent;width:", ";max-height:", ";"], themeGet("radii.2"), panelWidth, _ref6 => {
+})(["display:flex;flex-direction:column;align-items:flex-end;box-shadow:0 1px 3px rgba(0,0,0,0.1);gap:8px;border-radius:calc(", " + 1px);overflow:hidden;background:transparent;width:", ";max-height:", ";"], themeGet("radii.2"), panelWidth, _ref7 => {
   let {
     containerHeight
-  } = _ref6;
+  } = _ref7;
   return containerHeight ? `${containerHeight}px` : "100%";
 });
 export const PanelWrapper = styled.div.withConfig({
   displayName: "FloatingPanelsstyles__PanelWrapper",
   componentId: "sc-1by914f-2"
-})(["display:", ";background:white;width:", ";border:1px solid ", ";border-radius:8px;border-radius:0 0 8px 8px;overflow-y:auto;padding:\"0 12px 12px 12px\";margin-top:37px;transition:max-height 0.3s ease-in-out;"], _ref7 => {
+})(["display:", ";background:white;width:", ";border:1px solid ", ";border-radius:8px;border-radius:0 0 8px 8px;overflow-y:auto;padding:\"0 12px 12px 12px\";margin-top:37px;transition:max-height 0.3s ease-in-out;"], _ref8 => {
   let {
     isExpanded
-  } = _ref7;
+  } = _ref8;
   return isExpanded ? "block" : "none";
 }, panelWidth, themeGet("colors.greyLighter"));
 export const PanelHeader = styled.button.withConfig({
@@ -67,28 +72,28 @@ export const PanelBar = styled.div.withConfig({
 export const IconButton = styled.button.withConfig({
   displayName: "FloatingPanelsstyles__IconButton",
   componentId: "sc-1by914f-7"
-})(["font-family:", ";appearance:none;background-color:", ";border:none;width:36px;cursor:pointer;height:36px;display:flex;border-radius:", ";align-items:center;justify-content:center;transition:", ";&:hover{background-color:", ";}"], themeGet("fonts.main"), _ref8 => {
+})(["font-family:", ";appearance:none;background-color:", ";border:none;width:36px;cursor:pointer;height:36px;display:flex;border-radius:", ";align-items:center;justify-content:center;transition:", ";&:hover{background-color:", ";}"], themeGet("fonts.main"), _ref9 => {
   let {
     isExpanded
-  } = _ref8;
+  } = _ref9;
   return isExpanded ? themeGet("colors.primaryLightest") : themeGet("colors.white");
 }, themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.primaryLightest"));
 export const PanelContent = styled.div.withConfig({
   displayName: "FloatingPanelsstyles__PanelContent",
   componentId: "sc-1by914f-8"
-})(["padding:8px;width:inerhit;display:", ";height:", ";opacity:", ";"], _ref9 => {
+})(["padding:8px;width:inerhit;display:", ";height:", ";opacity:", ";"], _ref10 => {
   let {
     isExpanded
-  } = _ref9;
+  } = _ref10;
   return isExpanded ? "block" : "none";
-}, _ref10 => {
+}, _ref11 => {
   let {
     isExpanded
-  } = _ref10;
+  } = _ref11;
   return isExpanded ? "100%" : "0";
-}, _ref11 => {
+}, _ref12 => {
   let {
     isExpanded
-  } = _ref11;
+  } = _ref12;
   return isExpanded ? "1" : "0";
 });

package/es/components/FloatingPanels/index.js

@@ -12,6 +12,7 @@ const FloatingPanels = _ref => {
       top: 20
     },
     centered = false,
+    zIndex = 2,
     onClick = () => {}
   } = _ref;
   const [expandedPanelId, setExpandedPanelId] = useState(null);
@@ -37,6 +38,7 @@ const FloatingPanels = _ref => {
     centered: centered,
     containerHeight: containerHeight,
     position: position,
+    zIndex: zIndex,
     children: [/*#__PURE__*/_jsx(PanelBar, {
       children: panels.map(panel => /*#__PURE__*/_jsx(PanelBarIcon, {
         iconName: panel.iconName,
@@ -71,7 +73,8 @@ FloatingPanels.propTypes = {
     left: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   }),
   onClick: PropTypes.func,
-  centered: PropTypes.bool
+  centered: PropTypes.bool,
+  zIndex: PropTypes.number
 };
 FloatingPanels.defaultProps = {
   position: {
@@ -144,6 +147,17 @@ FloatingPanels.__docgenInfo = {
       },
       "required": false
     },
+    "zIndex": {
+      "defaultValue": {
+        "value": "2",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
     "onClick": {
       "defaultValue": {
         "value": "() => {}",

package/es/components/TabsAlt/index.js

@@ -11,25 +11,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TabsContainer = styled.div.withConfig({
   displayName: "TabsAlt__TabsContainer",
   componentId: "sc-hkpvfu-0"
-})(["position:relative;width:100%;&:after{content:\"\";position:absolute;bottom:0;width:100%;height:100%;background-color:", ";border-bottom:2px solid ", ";z-index:0;}"], themeGet("colors.white"), themeGet("colors.greyLighter"));
+})(["position:relative;width:100%;height:", ";&:after{content:\"\";position:absolute;bottom:0;width:100%;height:100%;background-color:", ";border-bottom:2px solid ", ";z-index:0;}"], themeGet("appScale.tabsHeight"), themeGet("colors.white"), themeGet("colors.greyLighter"));
 const TabWrapper = styled.div.withConfig({
   displayName: "TabsAlt__TabWrapper",
   componentId: "sc-hkpvfu-1"
-})(["position:relative;width:100%;z-index:1;"]);
+})(["position:relative;width:100%;z-index:1;height:inherit;"]);
 const VisibleTabs = styled.div.withConfig({
   displayName: "TabsAlt__VisibleTabs",
   componentId: "sc-hkpvfu-2"
-})(["flex-shrink:1;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;"]);
+})(["flex-shrink:1;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;height:inherit;"]);
 const activeTabStyle = css(["background-color:", ";color:", ";border-bottom:2px solid ", ";cursor:default;&:hover,&:focus{background-color:", ";color:", ";box-shadow:none;}"], themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.white"), themeGet("colors.primary"));
 const Tab = styled(NavLink).withConfig({
   displayName: "TabsAlt__Tab",
   componentId: "sc-hkpvfu-3"
-})(["width:", ";display:block;transition:background 200ms ease-in-out,color 200ms ease-in-out;border-bottom:2px solid ", ";padding:", " ", ";font-size:", ";font-weight:", ";position:relative;white-space:nowrap;text-decoration:none;text-align:center;background-color:", ";color:", ";cursor:pointer;", " &:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.active{", "}"], _ref => {
+})(["width:", ";display:block;transition:background 200ms ease-in-out,color 200ms ease-in-out;border-bottom:2px solid ", ";padding:0 ", ";height:", ";display:flex;align-items:center;font-size:", ";font-weight:", ";position:relative;white-space:nowrap;text-decoration:none;text-align:center;background-color:", ";color:", ";cursor:pointer;", " &:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.active{", "}"], _ref => {
   let {
     fullWidth
   } = _ref;
   return fullWidth ? "100%" : "fit-content";
-}, themeGet("colors.greyLighter"), themeGet("space.3"), themeGet("space.4"), themeGet("fontSizes.1"), themeGet("fontWeights.2"), themeGet("colors.white"), themeGet("colors.greyDark"), _ref2 => {
+}, themeGet("colors.greyLighter"), themeGet("space.4"), themeGet("appScale.tabsHeight"), themeGet("fontSizes.1"), themeGet("fontWeights.2"), themeGet("colors.white"), themeGet("colors.greyDark"), _ref2 => {
   let {
     tabInShowMore
   } = _ref2;
@@ -38,7 +38,7 @@ const Tab = styled(NavLink).withConfig({
 const ShowMoreButton = styled.button.withConfig({
   displayName: "TabsAlt__ShowMoreButton",
   componentId: "sc-hkpvfu-4"
-})(["appearance:none;border:none;font-family:", ";font-size:", ";font-weight:", ";background-color:", ";border-bottom:2px solid ", ";transition:", ";padding:", " ", ";color:", ";display:", ";align-items:center;cursor:pointer;&:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.hasActive{", "}"], themeGet("fonts.main"), themeGet("fontSizes.1"), themeGet("fontWeights.2"), themeGet("colors.white"), themeGet("colors.greyLighter"), themeGet("transition.transitionDefault"), themeGet("space.3"), themeGet("space.4"), themeGet("colors.greyDark"), _ref3 => {
+})(["appearance:none;border:none;font-family:", ";font-size:", ";font-weight:", ";background-color:", ";border-bottom:2px solid ", ";transition:", ";padding:0 ", ";height:", ";color:", ";display:", ";align-items:center;cursor:pointer;&:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.hasActive{", "}"], themeGet("fonts.main"), themeGet("fontSizes.1"), themeGet("fontWeights.2"), themeGet("colors.white"), themeGet("colors.greyLighter"), themeGet("transition.transitionDefault"), themeGet("space.4"), themeGet("appScale.tabsHeight"), themeGet("colors.greyDark"), _ref3 => {
   let {
     showMoreVisible
   } = _ref3;

package/es/systemThemeCollapsed.js

@@ -227,7 +227,8 @@ export const appScale = {
   avatarDefault: "40px",
   avatarLarge: "70px",
   inputHeightDefault: "32px",
-  inputHeightLarge: "52px"
+  inputHeightLarge: "52px",
+  tabsHeight: "32px"
 };
 export const tagScale = {
   tagHeightDefault: "22px",

package/es/systemtheme.js

@@ -226,7 +226,8 @@ export const appScale = {
   avatarDefault: "46px",
   avatarLarge: "80px",
   inputHeightDefault: "38px",
-  inputHeightLarge: "58px"
+  inputHeightLarge: "58px",
+  tabsHeight: "38px"
 };
 export const tagScale = {
   tagHeightDefault: "28px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.15",
+  "version": "3.3.17",
   "engines": {
     "node": "20.12.2"
   },