@vizzly/dashboard 0.6.3 → 0.6.4

package/dist/shared-logic/src/Component/Component.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType, Component } from './types';
-import { EmptyCell } from '../Display/types';
+import { EmptyCell, HeaderComponent } from '../Display/types';
 export declare const TIME_SERIES_CHARTS: ('areaChart' | 'lineChart' | 'horizontalBarChart' | 'barChart')[];
 export declare const ALL_COMPONENT_TYPES: ComponentType[];
 export declare const ALL_VIZZLY_COMPONENT_TYPES: ComponentType[];
@@ -8,5 +8,5 @@ export declare const initial: <T extends Component.Attributes>(attributes: T) =>
 export declare const initialFromType: (type: ComponentType, dataSetId: string, viewId: string) => Component;
 export declare const isBarChart: (type: ComponentType) => boolean;
 export declare const isTable: (type: ComponentType) => boolean;
-export declare const isEmpty: (component: Component | EmptyCell) => component is EmptyCell;
+export declare const isEmpty: (component: Component | EmptyCell | HeaderComponent) => component is EmptyCell;
 export declare const removeField: (component: Component, fieldId: string) => Component;

package/dist/shared-logic/src/Component/dumpable.d.ts

@@ -1,10 +1,11 @@
 import { Dumpable } from '../Dumpable';
 import { Component } from './types';
+import { HeaderComponent } from '../Display/types';
 declare type EmptyComponent = {
     isEmpty: true;
     colSpan: number;
 };
-declare type ComponentDumpable = Dumpable<Component | EmptyComponent, Component.RawComponent | EmptyComponent>;
+declare type ComponentDumpable = Dumpable<Component | EmptyComponent | HeaderComponent, Component.RawComponent | EmptyComponent | HeaderComponent>;
 export declare const load: ComponentDumpable['load'];
 export declare const dump: ComponentDumpable['dump'];
 export {};

package/dist/shared-logic/src/Display/Display.d.ts

@@ -1,19 +1,22 @@
-import { Component, ComponentType } from '../Component/types';
-import { Display, DisplayRow, EmptyCell } from './types';
+import { Component, ComponentType, MaybeOldComponent } from '../Component/types';
+import { Display, DisplayRow, EmptyCell, HeaderComponent } from './types';
 export { removeAllFieldReferences } from './removeAllFieldReferences';
-export declare const allComponentsInDirection: (display: Display, rowIndex: number, cellIndex: number, direction: 'left' | 'right') => Array<Component | EmptyCell>;
+export declare const allComponentsInDirection: (display: Display, rowIndex: number, cellIndex: number, direction: 'left' | 'right') => Array<Component | EmptyCell | HeaderComponent>;
 export declare const getNextComponentIndexWithSpace: (display: Display, rowIndex: number, cellIndex: number, direction: 'left' | 'right') => number;
 export declare const insertRow: (display: Display, rowIndex: number, height?: number) => Display;
 export declare const newEmptyCell: (colSpan: number) => EmptyCell;
 export declare const appendEmptyCell: (currentPanels: Display, rowIndex: number) => Display;
-export declare const setComponent: (display: Display, component: Component | EmptyCell, rowIndex: number, cellIndex: number) => Display;
+export declare const addHeaderRow: (display: Display, rowIndex: number) => Display;
+export declare const setComponent: (display: Display, component: Component | EmptyCell | HeaderComponent, rowIndex: number, cellIndex: number) => Display;
 declare type Move = {
     rowIndex: number;
     cellIndex: number;
 };
 export declare const swapComponents: (display: Display, positionA: Move, positionB: Move) => Display;
 export declare const init: () => Display;
-export declare const initRow: (components: Array<Component | EmptyCell>, height?: number | undefined) => DisplayRow;
+export declare const initRow: (components: Array<Component | EmptyCell | HeaderComponent>, height?: number | undefined) => DisplayRow;
+export declare const initHeaderComponent: () => HeaderComponent;
 export declare const listComponentTypesUsed: (display: Display) => ComponentType[];
-export declare const isComponentEmpty: (component: Component | EmptyCell) => component is EmptyCell;
+export declare const isComponentEmpty: (component: Component | EmptyCell | HeaderComponent) => component is EmptyCell;
+export declare const isHeaderComponent: (component: Component.RawComponent | EmptyCell | HeaderComponent | MaybeOldComponent) => component is HeaderComponent;
 export declare function isDisplayComponentsEmpty(display: Display): boolean;

package/dist/shared-logic/src/Display/types.d.ts

@@ -3,12 +3,16 @@ export declare type EmptyCell = {
     isEmpty: true;
     colSpan: number;
 };
+export declare type HeaderComponent = {
+    displayTitle: string;
+    colSpan: number;
+};
 export declare type DisplayRow = {
-    components: Array<Component | EmptyCell>;
+    components: Array<Component | EmptyCell | HeaderComponent>;
     height: number;
 };
 export declare type Display = DisplayRow[];
 export declare type DisplayDumped = Array<{
-    components: Array<Component.RawComponent | EmptyCell>;
+    components: Array<Component.RawComponent | EmptyCell | HeaderComponent>;
     height: number;
 }>;

package/dist/shared-logic/src/Display/upcast.d.ts

@@ -1,5 +1,5 @@
-import { DisplayRow, EmptyCell } from './types';
+import { DisplayRow, EmptyCell, HeaderComponent } from './types';
 import { Component as ComponentType } from '../Component/types';
-declare type OldDisplayRow = (ComponentType | null | EmptyCell)[];
+declare type OldDisplayRow = (ComponentType | null | EmptyCell | HeaderComponent)[];
 export declare const upcastRow: (displayRow: OldDisplayRow | DisplayRow) => DisplayRow;
 export {};

package/dist/shared-logic/src/Theme/Theme.d.ts

@@ -1,6 +1,7 @@
 import chroma from 'chroma-js';
 import { Theme } from './types';
 export declare const DEFAULT_ROW_HEIGHT = 350;
+export declare const HEADER_ROW_HEIGHT = 48;
 export declare const linearScale: (colors?: ((string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | undefined)[] | undefined, colorCount?: number | undefined) => string[];
 export declare const themeToColorScale: (colors?: ((string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor" | undefined)[] | undefined, colorCount?: number | undefined) => string[];
 export declare const vizzlyDefaultTheme: Theme;

package/dist/shared-logic/src/Theme/types.d.ts

@@ -7,6 +7,7 @@ export declare type Theme = {
     fontFamily?: string;
     fontSize?: number | string;
     rowLimit?: number;
+    version?: ThemeVersion;
 };
 export declare namespace VizzlyTheming {
     interface Base extends Theme {
@@ -29,6 +30,7 @@ export declare namespace VizzlyTheming {
         dashboard?: Dashboard;
         library?: Library;
         filters?: Filters;
+        header?: Header;
     }
     interface Buttons {
         primary?: ButtonType;
@@ -179,6 +181,7 @@ export declare namespace VizzlyTheming {
         closeButton?: 'none' | 'outside';
         showTitle?: {
             editor?: boolean;
+            library?: boolean;
         };
     };
     type ModalBase = {
@@ -433,6 +436,19 @@ export declare namespace VizzlyTheming {
         };
     };
     type Filters = {
-        filterBy?: ButtonType;
+        filterBy?: ButtonType & {
+            lineHeight?: CSSProperties['lineHeight'];
+        };
+    };
+    type Header = {
+        borderTop?: CSSProperties['borderTop'];
+        borderBottom?: CSSProperties['borderBottom'];
+        background?: CSSProperties['background'];
+        title?: FontStyle & {
+            htmlElement?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+        };
+        padding?: CSSProperties['padding'];
+        textAlign?: CSSProperties['textAlign'];
     };
 }
+export declare type ThemeVersion = 1 | 2;

package/dist/shared-ui/src/base/Accordion/Accordion.styles.d.ts

@@ -1,6 +1,6 @@
 import { VizzlyTheming } from '../../types';
 export declare const accordionStyles: (() => null) & {
-    button: (button?: VizzlyTheming.AccordionButton | undefined) => {
+    button: (themedStyles?: VizzlyTheming.AccordionButton | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };

package/dist/shared-ui/src/base/ActionSection/ActionSection.d.ts

@@ -1,7 +1,9 @@
-import { FunctionComponent, ReactNode } from 'react';
+import { CSSProperties, FunctionComponent, ReactNode } from 'react';
 export declare const ActionSection: FunctionComponent<{
     title?: string;
     subTitle?: string;
     extra?: ReactNode;
     titleLevel?: keyof JSX.IntrinsicElements;
+    margin?: CSSProperties['margin'];
+    padding?: CSSProperties['padding'];
 }>;

package/dist/shared-ui/src/base/Alert/Alert.styles.d.ts

@@ -1,9 +1,9 @@
 import { VizzlyTheming } from '../../types';
-export declare const alertStyles: ((styleOverrides?: VizzlyTheming.Alerts | undefined) => {
+export declare const alertStyles: ((themedStyles?: VizzlyTheming.Alerts | undefined) => {
     (variantOptions: Object): string;
     toString: any;
 }) & {
-    svg: (styleOverrides?: VizzlyTheming.Alerts | undefined) => {
+    svg: (themedStyles?: VizzlyTheming.Alerts | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
@@ -11,11 +11,11 @@ export declare const alertStyles: ((styleOverrides?: VizzlyTheming.Alerts | unde
         (variantOptions: Object): string;
         toString: any;
     };
-    content: (styleOverrides?: VizzlyTheming.Alerts | undefined) => {
+    content: (themedStyles?: VizzlyTheming.Alerts | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    title: (styleOverrides?: VizzlyTheming.Alerts | undefined) => {
+    title: (themedStyles?: VizzlyTheming.Alerts | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };

package/dist/shared-ui/src/base/AppStyles/AppStyles.styles.d.ts

@@ -1,6 +1,7 @@
 export declare const BLUE_COLOR = "#3074d9";
 export declare const DEFAULT_FONT = 14;
 export declare const SMALL_FONT = 12;
+export declare const BORDER_RADIUS = 8;
 export declare const H1: number;
 export declare const H2: number;
 export declare const H3: number;

package/dist/shared-ui/src/base/AppStyles/AppStyling.d.ts

@@ -1,6 +1,4 @@
 import { FunctionComponent, ReactNode } from 'react';
-import { VizzlyTheming } from '../../types';
 export declare const AppStyling: FunctionComponent<{
     children: ReactNode;
 }>;
-export declare const APP_THEME: VizzlyTheming.Base;

package/dist/shared-ui/src/base/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { VizzlyComponents } from '../../types';
+import { VizzlyComponents, VizzlyTheming } from '../../types';
 import { CustomThemeClassNamespaces } from '../classNames';
 declare type Props = VizzlyComponents.ComponentOverrides.Props.Button & {
     testId?: string;
@@ -8,6 +8,7 @@ declare type Props = VizzlyComponents.ComponentOverrides.Props.Button & {
     block?: boolean;
     internal?: boolean;
     className?: string;
+    themeOverride?: VizzlyTheming.ButtonType;
 };
 export declare const PROPS_AS_CLASSNAMES: CustomThemeClassNamespaces[];
 export declare const Button: (props: Props) => JSX.Element;

package/dist/shared-ui/src/base/Button/Button.styles.d.ts

@@ -1,5 +1,5 @@
 import { VizzlyTheming } from '../../types';
-export declare const buttonStyles: (styleOverrides?: VizzlyTheming.Buttons | undefined) => {
+export declare const buttonStyles: (themedStyles?: VizzlyTheming.Buttons | undefined, themeOverride?: VizzlyTheming.ButtonType | undefined) => {
     (variantOptions: Object): string;
     toString: any;
 };

package/dist/shared-ui/src/base/DateTime/DateOptionsPopup.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import 'react-dates/initialize';
+import 'react-dates-17/initialize';
 import moment from 'moment';
 export declare type FocusedInputShape = 'startDate' | 'endDate';
 export declare const DateOptionsPopup: FunctionComponent<{

package/dist/shared-ui/src/base/DateTime/DatePicker.styles.d.ts

@@ -4,11 +4,11 @@ export declare const pickerStyles: (() => null) & {
         (variantOptions: Object): string;
         toString: any;
     };
-    prefixStyle: (dateTime?: VizzlyTheming.DateTime | undefined) => {
+    prefixStyle: (themedStyles?: VizzlyTheming.DateTime | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    inputsWrapper: (dateTime?: VizzlyTheming.DateTime | undefined) => {
+    inputsWrapper: (themedStyles?: VizzlyTheming.DateTime | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
@@ -20,11 +20,11 @@ export declare const pickerStyles: (() => null) & {
         (variantOptions: Object): string;
         toString: any;
     };
-    dateInput: (dateTime?: VizzlyTheming.DateTime | undefined) => {
+    dateInput: (themedStyles?: VizzlyTheming.DateTime | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    timeInput: (dateTime?: VizzlyTheming.DateTime | undefined) => {
+    timeInput: (themedStyles?: VizzlyTheming.DateTime | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
@@ -36,14 +36,13 @@ export declare const pickerStyles: (() => null) & {
         (variantOptions: Object): string;
         toString: any;
     };
-    separatorIcon: (styles?: VizzlyTheming.DateTime | undefined) => {
+    separatorIcon: (themedStyles?: VizzlyTheming.DateTime | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    clearButton: (styles?: VizzlyTheming.DateTime | undefined) => {
+    clearButton: (themedStyles?: VizzlyTheming.DateTime | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
 };
-export declare const dateStyles: (dateTime?: VizzlyTheming.DateTime | undefined, formHeight?: number | undefined) => string;
-export declare function mergedThemes(styles: VizzlyTheming.DateTime | undefined): VizzlyTheming.DateTime;
+export declare const dateStyles: (themedStyles?: VizzlyTheming.DateTime | undefined, formHeight?: number | undefined) => string;

package/dist/shared-ui/src/base/Dropdown/Dropdown.styles.d.ts

@@ -1,14 +1,14 @@
 import { VizzlyTheming } from '../../types';
 export declare const dropdownStyles: (() => null) & {
-    wrapper: (dropdown?: VizzlyTheming.Dropdown | undefined) => {
+    wrapper: (themedStyles?: VizzlyTheming.Dropdown | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    option: (dropdown?: VizzlyTheming.Dropdown | undefined) => {
+    option: (themedStyles?: VizzlyTheming.Dropdown | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    button: (dropdown?: VizzlyTheming.Dropdown | undefined) => {
+    button: (themedStyles?: VizzlyTheming.Dropdown | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };

package/dist/shared-ui/src/base/Input/Input.styles.d.ts

@@ -1,5 +1,5 @@
 import { VizzlyTheming } from '../../types';
-export declare const inputStyles: (styleOverrides?: VizzlyTheming.Input | undefined, highlight?: boolean | undefined) => {
+export declare const inputStyles: (themedStyles?: VizzlyTheming.Input | undefined, highlight?: boolean | undefined) => {
     (variantOptions: Object): string;
     toString: any;
 };

package/dist/shared-ui/src/base/Label/Label.styles.d.ts

@@ -1,6 +1,6 @@
 import { VizzlyTheming } from '../../types';
 import { CSSProperties } from 'react';
-export declare const labelStyles: (styleOverrides?: VizzlyTheming.Label | undefined, labelHidden?: boolean | undefined, margin?: CSSProperties['margin'], fontWeight?: CSSProperties['fontWeight']) => {
+export declare const labelStyles: (themedStyles?: VizzlyTheming.Label | undefined, labelHidden?: boolean | undefined, margin?: CSSProperties['margin'], fontWeight?: CSSProperties['fontWeight']) => {
     (variantOptions: Object): string;
     toString: any;
 };

package/dist/shared-ui/src/base/ListView/List.styles.d.ts

@@ -6,15 +6,15 @@ export declare const listStyles: (() => null) & {
         (variantOptions: Object): string;
         toString: any;
     };
-    item: (styled: VizzlyTheming.List) => {
+    item: (themedStyles?: VizzlyTheming.List | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    label: (styled: VizzlyTheming.List) => {
+    label: (styled?: VizzlyTheming.List | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    metadata: (styled: VizzlyTheming.List) => {
+    metadata: (styled?: VizzlyTheming.List | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
@@ -26,11 +26,11 @@ export declare const listStyles: (() => null) & {
         (variantOptions: Object): string;
         toString: any;
     };
-    deleteWrapper: (styled: VizzlyTheming.List) => {
+    deleteWrapper: (styled?: VizzlyTheming.List | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    deleteButton: (styled: VizzlyTheming.List) => {
+    deleteButton: (styled?: VizzlyTheming.List | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
@@ -42,7 +42,7 @@ export declare const listStyles: (() => null) & {
         (variantOptions: Object): string;
         toString: any;
     };
-    title: (listStyles?: VizzlyTheming.List | undefined) => {
+    title: (themedStyles?: VizzlyTheming.List | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };

package/dist/shared-ui/src/base/Modal/Modal.styles.d.ts

@@ -1,5 +1,5 @@
 import { VizzlyTheming } from '../../types';
-export declare const modalCoreStyle: (styleOverrides?: VizzlyTheming.ModalBase | undefined) => {
+export declare const modalCoreStyle: (themedStyles?: VizzlyTheming.ModalBase | undefined) => {
     (variantOptions: Object): string;
     toString: any;
 };
@@ -7,15 +7,15 @@ export declare const modalScrollbar: {
     (variantOptions: Object): string;
     toString: any;
 };
-export declare const modalContentStyle: (styleOverrides?: VizzlyTheming.ModalContent | undefined) => {
+export declare const modalContentStyle: (themedStyles?: VizzlyTheming.ModalContent | undefined) => {
     (variantOptions: Object): string;
     toString: any;
 };
-export declare const modalHeaderStyle: (styleOverrides?: VizzlyTheming.ModalHeader | undefined) => {
+export declare const modalHeaderStyle: (themedStyles?: VizzlyTheming.ModalHeader | undefined) => {
     (variantOptions: Object): string;
     toString: any;
 };
-export declare const modalFooterStyle: (styleOverrides?: VizzlyTheming.ModalFooter | undefined) => {
+export declare const modalFooterStyle: (themedStyles?: VizzlyTheming.ModalFooter | undefined) => {
     (variantOptions: Object): string;
     toString: any;
 };

package/dist/shared-ui/src/base/Panel/Panel.styles.d.ts

@@ -1,6 +1,6 @@
 import { VizzlyTheming } from '../../types';
 import { CSSProperties } from 'react';
-export declare const panelStyles: (styleOverrides?: VizzlyTheming.Panel | undefined, transform?: boolean | undefined, width?: CSSProperties['width']) => {
+export declare const panelStyles: (themedStyles?: VizzlyTheming.Panel | undefined, transform?: boolean | undefined, width?: CSSProperties['width']) => {
     (variantOptions: Object): string;
     toString: any;
 };

package/dist/shared-ui/src/base/PopoverMenu/PopoverMenu.styles.d.ts

@@ -1,10 +1,10 @@
 import { VizzlyTheming } from '../../types';
 export declare const popoverMenuStyles: (() => null) & {
-    container: (popoverMenu?: VizzlyTheming.PopoverMenu | undefined) => {
+    container: (themedStyles?: VizzlyTheming.PopoverMenu | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    option: (popoverMenu?: VizzlyTheming.PopoverMenu | undefined) => {
+    option: (themedStyles?: VizzlyTheming.PopoverMenu | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };

package/dist/shared-ui/src/base/Prompt/Prompt.styles.d.ts

@@ -1,6 +1,6 @@
 import { VizzlyTheming } from '../../types';
 export declare const promptStyles: (() => void) & {
-    svg: (styleOverrides?: VizzlyTheming.Alerts | undefined) => {
+    svg: (themedStyles?: VizzlyTheming.Alerts | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };

package/dist/shared-ui/src/base/RadioGroup/RadioGroup.styles.d.ts

@@ -1,10 +1,10 @@
 import { VizzlyTheming } from '../../types';
 export declare const radioButtonStyles: (() => null) & {
-    label: (font?: VizzlyTheming.RadioGroupFont | undefined) => {
+    label: (themedStyles?: VizzlyTheming.RadioGroupFont | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    description: (font?: VizzlyTheming.RadioGroupFont | undefined) => {
+    description: (themedStyles?: VizzlyTheming.RadioGroupFont | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };

package/dist/shared-ui/src/base/Search/Search.styles.d.ts

@@ -4,11 +4,11 @@ export declare const searchStyles: (() => void) & {
         (variantOptions: Object): string;
         toString: any;
     };
-    input: (styles?: VizzlyTheming.Search | undefined) => {
+    input: (themedStyles?: VizzlyTheming.Search | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    icon: (styles?: VizzlyTheming.Search | undefined) => {
+    icon: (themedStyles?: VizzlyTheming.Search | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };

package/dist/shared-ui/src/base/Select/Control.styles.d.ts

@@ -3,15 +3,15 @@ export declare const selectControlsStyles: {
     (variantOptions: Object): string;
     toString: any;
 } & {
-    inputComponent: (select: VizzlyTheming.Select, open?: boolean | undefined) => {
+    inputComponent: (themedStyles?: VizzlyTheming.Select | undefined, open?: boolean | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    clickableArea: (select: VizzlyTheming.Select) => {
+    clickableArea: (themedStyles?: VizzlyTheming.Select | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    multiple: (select: VizzlyTheming.Select) => {
+    multiple: (themedStyles?: VizzlyTheming.Select | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
@@ -27,7 +27,7 @@ export declare const selectControlsStyles: {
         (variantOptions: Object): string;
         toString: any;
     };
-    clearButton: (select: VizzlyTheming.Select) => {
+    clearButton: (themedStyles?: VizzlyTheming.Select | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
@@ -35,7 +35,7 @@ export declare const selectControlsStyles: {
         (variantOptions: Object): string;
         toString: any;
     };
-    arrowContainer: (select: VizzlyTheming.Select) => {
+    arrowContainer: (themedStyles?: VizzlyTheming.Select | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };

package/dist/shared-ui/src/base/Tab/Tab.styles.d.ts

@@ -6,11 +6,11 @@ export declare type ListStyleProps = {
     padding?: CSSProperties['padding'];
 };
 export declare const tabStyles: (() => null) & {
-    list: (props?: ListStyleProps | undefined) => {
+    list: (themedStyles?: ListStyleProps | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    button: (tabs?: VizzlyTheming.Tabs | undefined) => {
+    button: (themedStyles?: VizzlyTheming.Tabs | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };

package/dist/shared-ui/src/base/Table/Table.styles.d.ts

@@ -10,19 +10,19 @@ export declare const tableStyles: (() => null) & {
         (variantOptions: Object): string;
         toString: any;
     };
-    th: (styles?: VizzlyTheming.TableTH | undefined) => {
+    th: (themedStyles?: VizzlyTheming.TableTH | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    td: (styles?: VizzlyTheming.Tables | undefined) => {
+    td: (themedStyles?: VizzlyTheming.Tables | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    tr: (styles?: VizzlyTheming.Tables | undefined) => {
+    tr: (themedStyles?: VizzlyTheming.Tables | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    showMoreButton: (styles?: VizzlyTheming.TableBody | undefined) => {
+    showMoreButton: (themedStyles?: VizzlyTheming.TableBody | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
@@ -30,23 +30,23 @@ export declare const tableStyles: (() => null) & {
         (variantOptions: Object): string;
         toString: any;
     };
-    thInner: (styles?: VizzlyTheming.TableTH | undefined) => {
+    thInner: (themedStyles?: VizzlyTheming.TableTH | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    thLabel: (styles?: VizzlyTheming.TableTH | undefined) => {
+    thLabel: (themedStyles?: VizzlyTheming.TableTH | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    thButton: (styles?: VizzlyTheming.TableTH | undefined) => {
+    thButton: () => {
         (variantOptions: Object): string;
         toString: any;
     };
-    thGroupRow: (styles?: VizzlyTheming.Tables | undefined) => {
+    thGroupRow: (themedStyles?: VizzlyTheming.Tables | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };
-    thGroupColumn: (styles?: VizzlyTheming.TableTH | undefined) => {
+    thGroupColumn: (themedStyles?: VizzlyTheming.TableTH | undefined) => {
         (variantOptions: Object): string;
         toString: any;
     };

package/dist/shared-ui/src/base/Toolbar/Toolbar.d.ts

@@ -13,3 +13,23 @@ export declare const divider: {
     (variantOptions: Object): string;
     toString: any;
 };
+export declare const toolbarButtonStyle: {
+    background: string;
+    color: string;
+    border: string;
+    padding: string;
+    borderRadius: number;
+    fontFamily: string;
+    '&:hover': {
+        background: string;
+        border: string;
+        color: string;
+    };
+    '&:focus': {
+        background: string;
+        border: string;
+        color: string;
+    };
+    fontSize: number;
+    fontWeight: number;
+};

package/dist/shared-ui/src/base/layout/View.d.ts

@@ -3,6 +3,7 @@ import { ViewStyleProps } from './View.styles';
 export interface ViewProps extends ViewStyleProps {
     children?: ReactNode;
     'data-component'?: string;
+    'data-themeapi'?: string;
     className?: string;
     as?: keyof JSX.IntrinsicElements;
 }

package/dist/shared-ui/src/base/page/Page.d.ts

@@ -26,5 +26,6 @@ export declare const Page: React.FunctionComponent<{
         title: string;
         columns?: boolean | undefined;
         badge?: React.ReactNode;
+        extra?: React.ReactNode;
     }>;
 };

package/dist/shared-ui/src/base/styles/overlay.styles.d.ts

@@ -1,5 +1,5 @@
 import { VizzlyTheming } from '../../types';
-export declare const overlayStyles: (styleOverrides?: VizzlyTheming.Overlay | undefined, position?: "fixed" | "absolute" | undefined) => {
+export declare const overlayStyles: (themedStyles?: VizzlyTheming.Overlay | undefined, position?: "fixed" | "absolute" | undefined) => {
     (variantOptions: Object): string;
     toString: any;
 };

package/dist/shared-ui/src/components/Studio/AddContent/AddContent.d.ts

@@ -4,6 +4,7 @@ declare type AddContentType = {
     narrow?: boolean;
     label: string;
     tooltipLabel?: string;
+    'data-component'?: string;
 };
 export declare const AddContent: FunctionComponent<AddContentType>;
 export {};