venice-ui 3.0.6 → 3.0.7

package/dist/cjs/components/Checkbox/Checkbox.styles.js

@@ -21,8 +21,12 @@ exports.CheckboxBox = styled_components_1.default.div `
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  height: ${({ theme, config, size }) => config.size[size].height}px;
-  width: ${({ theme, config, size }) => config.size[size].width}px;
+  height: calc(
+    ${({ theme, config, size }) => config.size[size].height}px - 2px
+  );
+  width: calc(
+    ${({ theme, config, size }) => config.size[size].width}px - 2px
+  );
   border: 1px solid
     ${({ theme, config, isActive, isDisabled, isIntermedian }) => isDisabled
     ? config.color.disabled.boxBorder

package/dist/cjs/components/Filters/Filters.styles.js

@@ -20,9 +20,7 @@ exports.FilterTrigerRoot = styled_components_1.default.div `
   font-size: ${({ theme, config, size }) => config.size.triger[size].fontSize}px;
   line-height: ${({ theme, config, size }) => config.size.triger[size].lineHeight}px;
 
-  ${({ isActive, config }) => isActive
-    ? `box-shadow: 0 0 0 ${config.size.triger.common.activeShadowWidth}px ${config.color.activeShadow};`
-    : ''}
+
 
   &:hover {
     background: ${({ theme, config }) => config.color.hover.background};

package/dist/cjs/components/Tile/Tile.js

@@ -9,7 +9,7 @@ const react_1 = __importDefault(require("react"));
 const Tile_styles_1 = require("./Tile.styles");
 const Header_1 = require("../Header");
 const styled_components_1 = require("styled-components");
-const Tile = ({ theme, themeVariant = 'default', title, children, customHeader, headerDivader, height, size = 'sm', shadow = false, }) => {
+const Tile = ({ theme, themeVariant = 'default', title, children, customHeader, headerDivader, height, size = 'sm', shadow = false, backgroundColor }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -18,7 +18,7 @@ const Tile = ({ theme, themeVariant = 'default', title, children, customHeader,
     const { componentsConfig } = resolvedThemeData;
     const headerConfig = componentsConfig.tile;
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
-        react_1.default.createElement(Tile_styles_1.TileRoot, { height: height, shadow: shadow, theme: resolvedTheme, config: headerConfig, size: size },
+        react_1.default.createElement(Tile_styles_1.TileRoot, { height: height, shadow: shadow, theme: resolvedTheme, config: headerConfig, size: size, backgroundColor: backgroundColor },
             title && (react_1.default.createElement(Header_1.Header, { title: title, theme: theme, bottomDivader: headerDivader, themeVariant: themeVariant, header: customHeader })),
             react_1.default.createElement(Tile_styles_1.TileContent, { theme: resolvedTheme, config: headerConfig }, children))));
 };

package/dist/cjs/components/Tile/Tile.styles.js

@@ -10,7 +10,7 @@ exports.TileRoot = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
   width: 100%;
-  background-color: ${({ config }) => config.color.background};
+  background-color: ${({ config, backgroundColor }) => backgroundColor || config.color.background};
   height: ${(p) => (p.height ? p.height : '100%')};
   ${(p) => p.shadow && `box-shadow: ${p.config.color.shadow};`}
   max-width:${({ config, size }) => config.size[size].maxWidth};

package/dist/cjs/config/config.js

@@ -442,7 +442,7 @@ const createComponentsConfig = (theme = 'default') => {
                 sm: {
                     height: exports.measurements.space.xl4,
                     paddingX: exports.measurements.space.sm,
-                    borderRadius: exports.measurements.size.radius.sm,
+                    radius: exports.measurements.size.radius.sm,
                     fontSize: exports.measurements.font.size.sm,
                     lineHeight: exports.measurements.font.lineHeight.sm,
                     iconSize: 'md',

package/dist/esm/components/Checkbox/Checkbox.styles.js

@@ -15,8 +15,12 @@ export const CheckboxBox = styled.div `
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  height: ${({ theme, config, size }) => config.size[size].height}px;
-  width: ${({ theme, config, size }) => config.size[size].width}px;
+  height: calc(
+    ${({ theme, config, size }) => config.size[size].height}px - 2px
+  );
+  width: calc(
+    ${({ theme, config, size }) => config.size[size].width}px - 2px
+  );
   border: 1px solid
     ${({ theme, config, isActive, isDisabled, isIntermedian }) => isDisabled
     ? config.color.disabled.boxBorder

package/dist/esm/components/Filters/Filters.styles.js

@@ -14,9 +14,7 @@ export const FilterTrigerRoot = styled.div `
   font-size: ${({ theme, config, size }) => config.size.triger[size].fontSize}px;
   line-height: ${({ theme, config, size }) => config.size.triger[size].lineHeight}px;
 
-  ${({ isActive, config }) => isActive
-    ? `box-shadow: 0 0 0 ${config.size.triger.common.activeShadowWidth}px ${config.color.activeShadow};`
-    : ''}
+
 
   &:hover {
     background: ${({ theme, config }) => config.color.hover.background};

package/dist/esm/components/Tile/Tile.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { TileContent, TileRoot } from './Tile.styles';
 import { Header } from '../Header';
 import { ThemeProvider } from 'styled-components';
-export const Tile = ({ theme, themeVariant = 'default', title, children, customHeader, headerDivader, height, size = 'sm', shadow = false, }) => {
+export const Tile = ({ theme, themeVariant = 'default', title, children, customHeader, headerDivader, height, size = 'sm', shadow = false, backgroundColor }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -12,7 +12,7 @@ export const Tile = ({ theme, themeVariant = 'default', title, children, customH
     const { componentsConfig } = resolvedThemeData;
     const headerConfig = componentsConfig.tile;
     return (React.createElement(ThemeProvider, { theme: resolvedTheme },
-        React.createElement(TileRoot, { height: height, shadow: shadow, theme: resolvedTheme, config: headerConfig, size: size },
+        React.createElement(TileRoot, { height: height, shadow: shadow, theme: resolvedTheme, config: headerConfig, size: size, backgroundColor: backgroundColor },
             title && (React.createElement(Header, { title: title, theme: theme, bottomDivader: headerDivader, themeVariant: themeVariant, header: customHeader })),
             React.createElement(TileContent, { theme: resolvedTheme, config: headerConfig }, children))));
 };

package/dist/esm/components/Tile/Tile.styles.js

@@ -4,7 +4,7 @@ export const TileRoot = styled.div `
   display: flex;
   flex-direction: column;
   width: 100%;
-  background-color: ${({ config }) => config.color.background};
+  background-color: ${({ config, backgroundColor }) => backgroundColor || config.color.background};
   height: ${(p) => (p.height ? p.height : '100%')};
   ${(p) => p.shadow && `box-shadow: ${p.config.color.shadow};`}
   max-width:${({ config, size }) => config.size[size].maxWidth};

package/dist/esm/config/config.js

@@ -437,7 +437,7 @@ export const createComponentsConfig = (theme = 'default') => {
                 sm: {
                     height: measurements.space.xl4,
                     paddingX: measurements.space.sm,
-                    borderRadius: measurements.size.radius.sm,
+                    radius: measurements.size.radius.sm,
                     fontSize: measurements.font.size.sm,
                     lineHeight: measurements.font.lineHeight.sm,
                     iconSize: 'md',

package/dist/types/components/Tile/Tile.d.ts

@@ -11,6 +11,7 @@ interface ITileProps {
     height?: string;
     size?: InputSize;
     shadow?: boolean;
+    backgroundColor?: string;
 }
 export declare const Tile: FC<ITileProps>;
 export {};

package/dist/types/components/Tile/Tile.styles.d.ts

@@ -5,6 +5,7 @@ interface ITileRootStyles {
     theme?: any;
     config: any;
     size: InputSize;
+    backgroundColor?: string;
 }
 export declare const TileRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITileRootStyles, never>;
 interface ITileContentProps {

package/dist/types/config/config.d.ts

@@ -445,7 +445,7 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
             sm: {
                 height: 32;
                 paddingX: 8;
-                borderRadius: 8;
+                radius: 8;
                 fontSize: 13;
                 lineHeight: 18;
                 iconSize: string;
@@ -1766,7 +1766,7 @@ export declare const componentsConfig: {
             sm: {
                 height: 32;
                 paddingX: 8;
-                borderRadius: 8;
+                radius: 8;
                 fontSize: 13;
                 lineHeight: 18;
                 iconSize: string;
@@ -3230,7 +3230,7 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
                 sm: {
                     height: 32;
                     paddingX: 8;
-                    borderRadius: 8;
+                    radius: 8;
                     fontSize: 13;
                     lineHeight: 18;
                     iconSize: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",