@soul-refiner/design-system 0.2.91 → 0.2.93

package/dist/components/navigation/inner/inner.d.ts

@@ -16,6 +16,10 @@ declare const InnerNav: {
         ({ href, label, sx }: InnerNavBackButtonProps): React.JSX.Element;
         displayName: string;
     };
+    Header: {
+        ({ children }: InnerNavHeaderProps): React.JSX.Element;
+        displayName: string;
+    };
     Drawer: {
         ({ children, label }: InnerNavDrawerProps): React.JSX.Element;
         displayName: string;
@@ -74,6 +78,10 @@ export interface InnerNavBackButtonProps {
     label: React.ReactNode;
     sx?: string;
 }
+/*************************************************************************************************************************
+ * Header
+ */
+export type InnerNavHeaderProps = React.PropsWithChildren;
 /*************************************************************************************************************************
  * Create Button
  */

package/dist/components/navigation/inner/inner.js

@@ -4,6 +4,7 @@ import { Button } from '../../../components/actions/button';
 import { Drawer } from '../../../components/surfaces/drawer';
 import { ChevronDown, ChevronLeft, ChevronUp, Plus } from '../../../icons';
 const INNER_NAV_CHILD_TYPES = [
+    'Header',
     'Item',
     'Dropdown',
     'BackButton',
@@ -15,6 +16,7 @@ const INNER_NAV_CHILD_TYPES = [
  */
 const InnerNav = ({ children }) => {
     const elementsByType = {
+        Header: [],
         Item: [],
         Dropdown: [],
         BackButton: [],
@@ -25,8 +27,8 @@ const InnerNav = ({ children }) => {
     for (const child of _children) {
         const isValidChild = React.isValidElement(child);
         const isInnerNavChild = isValidChild &&
-            INNER_NAV_CHILD_TYPES.includes(child?.type?.displayName.replace('InnerNav.', ''));
-        if (isValidChild && isInnerNavChild) {
+            INNER_NAV_CHILD_TYPES.includes(child?.type?.displayName?.replace('InnerNav.', ''));
+        if (isInnerNavChild) {
             const type = child?.type?.displayName.replace('InnerNav.', '');
             elementsByType[type].push(child);
         }
@@ -35,6 +37,7 @@ const InnerNav = ({ children }) => {
         }
     }
     return (React.createElement(NavWrapper, { "aria-label": "side-navigation" },
+        React.createElement("div", null, elementsByType['Header']),
         React.createElement("div", null, elementsByType['BackButton']),
         React.createElement("div", null, elementsByType['Drawer']),
         React.createElement("div", null, elementsByType['Item']),
@@ -137,6 +140,12 @@ const BackButton = styled.a `
 `;
 InnerNav.BackButton = InnerNavBackButton;
 InnerNavBackButton.displayName = 'InnerNav.BackButton';
+const InnerNavHeader = ({ children }) => {
+    return React.createElement(HeaderWrapper, null, children);
+};
+const HeaderWrapper = styled.div ``;
+InnerNav.Header = InnerNavHeader;
+InnerNavHeader.displayName = 'InnerNav.Header';
 const InnerNavDrawer = ({ children, label }) => {
     return (React.createElement(Drawer, null,
         React.createElement(Drawer.Trigger, null,

package/dist/components/table/table/table.d.ts

@@ -10,9 +10,10 @@ export interface TableProps extends React.PropsWithChildren {
     separated?: boolean;
     striped?: boolean;
     sx?: string;
+    padding?: number;
 }
 declare const Table: {
-    ({ border, children, compact, footer, header, separated, striped, sx, }: TableProps): React.JSX.Element;
+    ({ border, children, compact, footer, header, separated, striped, sx, padding, }: TableProps): React.JSX.Element;
     Head: {
         ({ children, ...rest }: React.PropsWithChildren): React.JSX.Element;
         displayName: string;

package/dist/components/table/table/table.js

@@ -2,8 +2,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Box } from '../../';
-const Table = ({ border = true, children, compact, footer, header, separated, striped, sx, }) => {
-    return (React.createElement(Box, { "$backgroundColor": "white", "$borderRadius": "large", "$display": "flex", "$dir": "column", "$gap": 32, "$padding": 32, sx: compact ? 'width: fit-content;' : '' },
+const Table = ({ border = true, children, compact, footer, header, separated, striped, sx, padding = 32, }) => {
+    return (React.createElement(Box, { "$backgroundColor": "white", "$borderRadius": "large", "$display": "flex", "$dir": "column", "$gap": 32, "$padding": padding, sx: compact ? 'width: fit-content;' : '' },
         !!header && header,
         React.createElement(Box, { "$borderRadius": "small", sx: border ? 'border: 1px solid var(--color-grey-8);' : '' },
             React.createElement(TableElement, { "$compact": compact, "$separated": separated, "$striped": striped, "$sx": sx }, children)),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.91",
+  "version": "0.2.93",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {