@redsift/dashboard 7.4.2 → 7.5.0-alpha.1

package/CONTRIBUTING.md

@@ -38,6 +38,10 @@ The Design System is following a monorepo architecture, providing multiple packa
 
   This package is the main package of Red Sift's Design System. It provides the majority of the components, including layout, formatting, navigation, form and interactive components.
 
+- `@redsift/popovers`
+
+  This package provides popover components. Popover components are based on [floating-ui](https://floating-ui.com/) and [@floating-ui/react](https://floating-ui.com/docs/react).
+
 - `@redsift/table`
 
   This package provides datagrid components and features based on [MUI DataGrid](https://mui.com/x/react-data-grid/). Due to the use of advanced features, a [premium license](https://mui.com/x/introduction/licensing/#premium-plan) from MUI is required.

package/index.js

@@ -43,7 +43,7 @@ const ProductColorPalette = {
 
 /**
  * Do not edit directly
- * Generated on Thu, 09 Feb 2023 16:05:01 GMT
+ * Generated on Tue, 21 Feb 2023 15:02:26 GMT
  */
 
 const RedsiftColorDefaultPrimary = '#0079e1';
@@ -2175,8 +2175,26 @@ const baseSpacing = css`
     `;
 }}
 `;
-const baseSizing = css`
+const baseInternalSpacing = css`
   ${_ref3 => {
+  let {
+    padding,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = _ref3;
+  return css`
+      ${padding ? `padding: ${padding};` : ''}
+      ${paddingBottom ? `padding-bottom: ${paddingBottom};` : ''}
+      ${paddingLeft ? `padding-left: ${paddingLeft};` : ''}
+      ${paddingRight ? `padding-right: ${paddingRight};` : ''}
+      ${paddingTop ? `padding-top: ${paddingTop};` : ''}
+    `;
+}}
+`;
+const baseSizing = css`
+  ${_ref4 => {
   let {
     height,
     maxHeight,
@@ -2184,7 +2202,7 @@ const baseSizing = css`
     minHeight,
     minWidth,
     width
-  } = _ref3;
+  } = _ref4;
   return css`
       ${height ? `height: ${typeof height === 'number' ? `${height}px` : height};` : ''}
       ${maxHeight ? `max-height: ${maxHeight};` : ''}
@@ -2196,7 +2214,7 @@ const baseSizing = css`
 }}
 `;
 const basePositioning = css`
-  ${_ref4 => {
+  ${_ref5 => {
   let {
     position,
     top,
@@ -2204,7 +2222,7 @@ const basePositioning = css`
     left,
     right,
     zIndex
-  } = _ref4;
+  } = _ref5;
   return css`
       ${position ? `position: ${position};` : ''}
       ${top ? `top: ${top};` : ''}
@@ -2216,7 +2234,7 @@ const basePositioning = css`
 }}
 `;
 const baseFlexbox = css`
-  ${_ref5 => {
+  ${_ref6 => {
   let {
     alignContent,
     alignItems,
@@ -2224,7 +2242,7 @@ const baseFlexbox = css`
     flexWrap,
     gap,
     justifyContent
-  } = _ref5;
+  } = _ref6;
   return css`
       ${alignContent ? `align-content: ${alignContent};` : ''}
       ${alignItems ? `align-items: ${alignItems};` : ''}
@@ -2236,7 +2254,7 @@ const baseFlexbox = css`
 }}
 `;
 const baseGrid = css`
-  ${_ref6 => {
+  ${_ref7 => {
   let {
     alignContent,
     alignItems,
@@ -2248,7 +2266,7 @@ const baseGrid = css`
     gridTemplateRows,
     justifyContent,
     justifyItems
-  } = _ref6;
+  } = _ref7;
   return css`
       ${alignContent ? `align-content: ${alignContent};` : ''}
       ${alignItems ? `align-items: ${alignItems};` : ''}
@@ -2276,14 +2294,19 @@ const baseStyling = css`
   ${basePositioning}
 `;
 css`
-  ${_ref7 => {
+  ${_ref8 => {
   let {
     display
-  } = _ref7;
+  } = _ref8;
   return display ? `display: ${display};` : '';
 }}
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: var(--redsift-typography-body-font-size);
+  font-weight: var(--redsift-typography-body-font-weight);
+  line-height: var(--redsift-typography-body-line-height);
+  color: var(--redsift-color-neutral-black);
 
-  ${baseStyling}
+  ${baseInternalSpacing}
   ${baseFlexbox}
   ${baseGrid}
 `;
@@ -2529,14 +2552,6 @@ const StyledButton = styled.button`
   `;
 }};
 
-  .redsift-icon.left {
-    margin-right: 8px;
-  }
-
-  .redsift-icon.right {
-    margin-left: 8px;
-  }
-
   &:hover,
   &:focus-visible {
     outline: none;
@@ -2735,6 +2750,7 @@ const COMPONENT_NAME$6 = 'Button';
 const CLASSNAME$6 = 'redsift-button';
 const DEFAULT_PROPS$5 = {
   color: ColorPalette.default,
+  height: 'fit-content',
   variant: ButtonVariant.primary
 };