venice-ui 2.4.11 → 2.4.13

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/Form/Form.js

@@ -50,7 +50,7 @@ const Form = ({ formData, size = 'medium', read, handleFieldFocus, handleFieldBl
             case 'increase':
                 return (react_1.default.createElement(Input_1.Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
             case 'select':
-                return (react_1.default.createElement(Dropdown_1.Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
+                return (react_1.default.createElement(Dropdown_1.Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur, maxHeight: item.maxHeight, disabled: item.isDisabled }));
             case 'fill':
                 return (react_1.default.createElement(FillSelect_1.FillSelect, { options: item.options, handleSelect: onChangeHandler, handleAddToScope: item.handleAddToScope, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
             case 'file':

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/Form/Form.js

@@ -44,7 +44,7 @@ export const Form = ({ formData, size = 'medium', read, handleFieldFocus, handle
             case 'increase':
                 return (React.createElement(Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
             case 'select':
-                return (React.createElement(Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
+                return (React.createElement(Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur, maxHeight: item.maxHeight, disabled: item.isDisabled }));
             case 'fill':
                 return (React.createElement(FillSelect, { options: item.options, handleSelect: onChangeHandler, handleAddToScope: item.handleAddToScope, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
             case 'file':

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/Form/formTypes.d.ts

@@ -16,6 +16,8 @@ export interface FormDataProps {
     error?: boolean;
     subLabel?: string;
     placeholder?: string;
+    maxHeight?: string;
+    readOnly?: boolean;
     handleAddToScope?: (name: string | number) => void;
 }
 interface FormDataParentProps {

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.11",
+  "version": "2.4.13",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",