venice-ui 2.4.10 → 2.4.12

package/dist/cjs/Theme/Theme.js

@@ -124,7 +124,7 @@ exports.mainTheme = {
     chipsNeutralHoverBackground: (0, polished_1.lighten)(0.1, exports.Theme.colors.primary),
     //toogle
     toogleBackgrund: exports.Theme.colors.gray_3,
-    toogleActiveBackgorund: exports.Theme.colors.primary_40,
+    toogleActiveBackgorund: exports.Theme.colors.primary_20,
     //checkobx
-    checkColor: exports.Theme.colors.white,
+    checkColor: exports.Theme.colors.text,
 };

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

@@ -13,11 +13,11 @@ const Checkbox_styles_1 = require("./Checkbox.styles");
 const Icons_1 = require("../Icons");
 const Checkbox = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', value = false, readOnly = false, name, size = 'medium', width = 'auto', isIntermedian = false, handleClick, }) => {
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column-reverse' : 'row', wrap: 'nowrap', width: width },
+        react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: 'flex-start', direction: labelPosition === 'top' ? 'column-reverse' : 'row', wrap: 'nowrap', width: width },
             react_1.default.createElement(Input_1.InputWrapper, { width: width },
                 react_1.default.createElement(Checkbox_styles_1.ToogleCheckboxWrapper, { size: size },
                     react_1.default.createElement(Checkbox_styles_1.CheckboxElement, { size: size, active: value || isIntermedian, onClick: () => handleClick(!value) }, (value || isIntermedian) && (react_1.default.createElement(Checkbox_styles_1.CheckoxIcon, null,
                         react_1.default.createElement(Icons_1.Icon, { name: isIntermedian ? "remove" : 'check', size: 20, iconColor: theme.checkColor, noPadding: true })))))),
-            label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)))));
+            label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition, wrapLabel: labelPosition === 'left' }, label)))));
 };
 exports.Checkbox = Checkbox;

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

@@ -20,18 +20,15 @@ exports.CheckboxElement = styled_components_1.default.div `
   justify-content: center;
   box-sizing: border-box;
   background-color: ${(p) => p.active ? p.theme.toogleActiveBackgorund : p.theme.toogleBackgrund};
-  border: 1px solid ${(p) => p.theme.inputDefaultBorder};
+  border: 1px solid
+    ${(p) => p.active ? p.theme.toogleActiveBackgorund : p.theme.inputDefaultBorder};
   font-family: 'Lato', sans-serif;
   outline: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: pointer;
-  ${(p) => !p.active &&
-    `
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12),
-      inset 0 1px 2px rgba(0, 0, 0, 0.24);
-    `}
+
   height: ${(p) => (p.size === 'small' ? '20px' : '24px')};
   width: ${(p) => (p.size === 'small' ? '20px' : '24px')};
   border-radius: ${Theme_1.Theme.borderRadius.m};

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

@@ -70,7 +70,7 @@ exports.InputLabelElement = (0, styled_components_1.default)(Typography_1.TextLa
   ${(p) => p.labelPosition === 'top' && `margin-bottom: ${Theme_1.Theme.padding.s};`}
   ${(p) => p.labelPosition === 'left' && `margin-left: ${Theme_1.Theme.padding.s};`}
   ${(p) => p.labelPosition === 'left' && `margin-right: ${Theme_1.Theme.padding.s};`}
-  white-space: nowrap;
+  white-space: ${(p) => (p.wrapLabel ? 'normal' : 'nowrap')};
 `;
 exports.InputWrapper = styled_components_1.default.div `
   display: flex;

package/dist/esm/Theme/Theme.js

@@ -121,7 +121,7 @@ export const mainTheme = {
     chipsNeutralHoverBackground: lighten(0.1, Theme.colors.primary),
     //toogle
     toogleBackgrund: Theme.colors.gray_3,
-    toogleActiveBackgorund: Theme.colors.primary_40,
+    toogleActiveBackgorund: Theme.colors.primary_20,
     //checkobx
-    checkColor: Theme.colors.white,
+    checkColor: Theme.colors.text,
 };

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

@@ -7,10 +7,10 @@ import { CheckboxElement, CheckoxIcon, ToogleCheckboxWrapper, } from './Checkbox
 import { Icon } from '../Icons';
 export const Checkbox = ({ theme = mainTheme, label, labelPosition = 'top', value = false, readOnly = false, name, size = 'medium', width = 'auto', isIntermedian = false, handleClick, }) => {
     return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column-reverse' : 'row', wrap: 'nowrap', width: width },
+        React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: 'flex-start', direction: labelPosition === 'top' ? 'column-reverse' : 'row', wrap: 'nowrap', width: width },
             React.createElement(InputWrapper, { width: width },
                 React.createElement(ToogleCheckboxWrapper, { size: size },
                     React.createElement(CheckboxElement, { size: size, active: value || isIntermedian, onClick: () => handleClick(!value) }, (value || isIntermedian) && (React.createElement(CheckoxIcon, null,
                         React.createElement(Icon, { name: isIntermedian ? "remove" : 'check', size: 20, iconColor: theme.checkColor, noPadding: true })))))),
-            label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)))));
+            label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition, wrapLabel: labelPosition === 'left' }, label)))));
 };

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

@@ -14,18 +14,15 @@ export const CheckboxElement = styled.div `
   justify-content: center;
   box-sizing: border-box;
   background-color: ${(p) => p.active ? p.theme.toogleActiveBackgorund : p.theme.toogleBackgrund};
-  border: 1px solid ${(p) => p.theme.inputDefaultBorder};
+  border: 1px solid
+    ${(p) => p.active ? p.theme.toogleActiveBackgorund : p.theme.inputDefaultBorder};
   font-family: 'Lato', sans-serif;
   outline: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: pointer;
-  ${(p) => !p.active &&
-    `
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12),
-      inset 0 1px 2px rgba(0, 0, 0, 0.24);
-    `}
+
   height: ${(p) => (p.size === 'small' ? '20px' : '24px')};
   width: ${(p) => (p.size === 'small' ? '20px' : '24px')};
   border-radius: ${Theme.borderRadius.m};

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

@@ -64,7 +64,7 @@ export const InputLabelElement = styled(TextLabel) `
   ${(p) => p.labelPosition === 'top' && `margin-bottom: ${Theme.padding.s};`}
   ${(p) => p.labelPosition === 'left' && `margin-left: ${Theme.padding.s};`}
   ${(p) => p.labelPosition === 'left' && `margin-right: ${Theme.padding.s};`}
-  white-space: nowrap;
+  white-space: ${(p) => (p.wrapLabel ? 'normal' : 'nowrap')};
 `;
 export const InputWrapper = styled.div `
   display: flex;

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

@@ -13,6 +13,7 @@ export declare const TextAccent: import("styled-components").StyledComponent<"di
 export interface ITextLabelProps {
     size?: InputSize;
     labelPosition?: LabelPosition;
+    wrapLabel?: boolean;
 }
 export declare const TextLabel: import("styled-components").StyledComponent<"div", any, ITextLabelProps, never>;
 export {};

package/package.json

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