frst-components 0.34.2 → 0.34.4

package/dist/index.js

@@ -715,6 +715,10 @@ const DesignTokens = {
         linkHover: '#0b0080',
         linkOnfocus: '#0645ad',
         linkPressed: '#f18624',
+        inputBg: '#F2F2F2',
+        inputBorder: '#BDBDBD',
+        inputBorderFocus: '#9C9C9C',
+        inputFocusBg: '#FFF',
         linkError: '#923534',
         inputError: '#ffe0e0',
         inputSelect: '#9BB5DE',
@@ -4233,8 +4237,8 @@ const placeholderStyle = (color) => styled.css `
 const TextFieldContainer = styled__default["default"].div `
     width: ${(props) => props.theme.width || '100%'};
     height: 48px;
-    background: ${({ theme, inputBackground }) => (inputBackground ? inputBackground : theme.colors.neutralsGrey6)};
-   
+    background: ${({ theme, inputBackground }) => (inputBackground ? inputBackground : theme.colors.inputBg)};
+    border: 1px solid ${({ theme }) => (theme ? theme.colors.inputBorder : "#BDBDBD")};
     box-sizing: border-box;
     border-radius: 8px;
     outline: none;
@@ -4245,20 +4249,10 @@ const TextFieldContainer = styled__default["default"].div `
     align-items: center;
     overflow: hidden;
 
-    ${(props) => props.isHelpTextBox &&
-    props.isClicked &&
+            ${(props) => props.theme.focused &&
     styled.css `
-            box-shadow: none !important;
-            border: 1px solid #f18624 !important;
-        `}
-
-    ${(props) => props.theme.focused &&
-    props.isHelpTextBox &&
-    styled.css `
-            box-shadow: 0px 0px 0px 1px #f18624 !important;
-            border: 1px solid #f18624 !important;
-        `}
-
+            background-color: ${({ theme }) => theme.isValue ? theme.colors.inputBg : theme.colors.inputFocusBg};
+        `}    
 
   ${(props) => props.theme.multiline &&
     styled.css `
@@ -4270,16 +4264,11 @@ const TextFieldContainer = styled__default["default"].div `
             overflow: hidden;
         `}
 
-
-    ${(props) => props.theme.hovered &&
+        ${(props) => props.theme.hovered &&
     styled.css `
-            border: 1px solid ${({ theme }) => theme.colors.linkPressed};
-        `}
+            border: 2px solid ${({ theme }) => theme.colors.inputBorderFocus};
+        `}    
 
-    ${(props) => props.theme.focused &&
-    styled.css `
-            border: 1px solid ${({ theme }) => theme.colors.linkPressed};
-        `}
 
     ${(props) => props.theme.disabled &&
     styled.css `
@@ -4430,7 +4419,8 @@ function TextField(props) {
             error: props.error,
             multiline: props.multiline,
             width: props.width,
-            height: props.height
+            height: props.height,
+            isValue: !!props?.value
         }, children: jsxRuntime.jsxs("div", { style: props.style, className: props.className, children: [jsxRuntime.jsx(Label$2, { htmlFor: props.id, isClicked: click, children: props.label }), jsxRuntime.jsxs(TextFieldContainer, { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: () => showBorderAfterClick(), isClicked: click, isHelpTextBox: props.isHelperTextBox, inputBackground: props.inputBackground, style: props?.containerTextFieldStyle, children: [props.startIcon && !props.multiline && jsxRuntime.jsx(StartIcon, { children: props.startIcon }), jsxRuntime.jsx(TextField$1, { ref: props.textRef, onFocus: () => setFocus(true), onBlur: () => setFocus(false), id: props.id, placeholder: props.placeholder || `${t('globals.typeHere')}...`, as: props.multiline ? 'textarea' : 'input', type: inputType, value: props.value, disabled: props.disabled, onChange: props.onChange, name: props.name, required: props.required, defaultValue: props.defaultValue, maxLength: props.maxLength, style: props?.textFieldStyle }), props.endIcon && !props.multiline && !!props.endIcon && (jsxRuntime.jsx(InputIconButton, { onClick: props.handleClickEndIcon, children: endIconState }))] }), props.helperText && jsxRuntime.jsx(HelperText$3, { children: props.helperText }), props.helperTextBox && jsxRuntime.jsx(HelperTextBox, { helperTextBox: props.helperTextBox })] }) }));
 }
 
@@ -9682,7 +9672,7 @@ const ContainerIcon$2 = styled__default["default"].div `
 `;
 const InputSearchWrapper$1 = styled__default["default"].div `
   height: 48px;
-  background-color: ${({ theme, inputSearchNewStyle, darkMode }) => darkMode ? theme.colors.neutralsGrey2 : (inputSearchNewStyle ? theme.colors.shadeWhite : '#ebeded')};
+  background-color: ${({ theme, inputSearchNewStyle, darkMode }) => darkMode ? theme.colors.neutralsGrey2 : (inputSearchNewStyle ? theme.colors.inputBg : '#ebeded')};
 
   border-radius: 8px;
 
@@ -9691,9 +9681,14 @@ const InputSearchWrapper$1 = styled__default["default"].div `
   align-items: center;
 
   border: 1px solid
-    ${({ isHover, theme, inputSearchNewStyle, darkMode }) => isHover ? theme.colors.linkOnfocus : inputSearchNewStyle ? theme.colors.neutralsGrey7 : darkMode ? theme.colors.neutralsGrey2 : '#E0E0E0'};
-
-  ${({ isOnFocus }) => isOnFocus && 'border: 1px solid #f18624 ;'}
+    ${({ isHover, theme, inputSearchNewStyle, darkMode }) => isHover ? theme.colors.inputBorderFocus : inputSearchNewStyle ? theme.colors.inputBorder : darkMode ? theme.colors.neutralsGrey2 : '#E0E0E0'};
+    
+    :hover {
+      border: 2px solid ${({ theme, inputSearchNewStyle }) => inputSearchNewStyle ? theme.colors.inputBorderFocus : undefined};
+    }
+    :focus-within {
+      background-color:  ${({ theme, inputSearchNewStyle, darkMode, isValue }) => inputSearchNewStyle && !darkMode && isValue ? theme.colors.inputBg : theme.colors.inputFocusBg};
+    }
 `;
 const InputText$3 = styled__default["default"].input `
   display: flex;
@@ -9744,7 +9739,7 @@ const ButtonAction$1 = styled__default["default"].div `
 function SearchField({ label, hasSearchIcon, placeholder, value, onChange, textButton, className, handleClickButton, isButton, id, style, inputSearchNewStyle, darkMode }) {
     const [actionAreaInput, setActionAreaInput] = React.useState(false);
     const [inputOnFocus, setInputOnFocus] = React.useState(false);
-    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs(Container$l, { style: style, id: "container-search-field", className: className, onMouseOver: () => setActionAreaInput(true), onMouseOut: () => setActionAreaInput(false), onFocus: () => setInputOnFocus(true), onBlur: () => setInputOnFocus(false), children: [label && (jsxRuntime.jsxs(LabelField, { isHover: actionAreaInput, isOnFocus: inputOnFocus, children: [' ', label, ' '] })), jsxRuntime.jsxs(InputSearchWrapper$1, { isHover: actionAreaInput, isOnFocus: inputOnFocus, inputSearchNewStyle: inputSearchNewStyle, darkMode: darkMode, children: [hasSearchIcon && (jsxRuntime.jsxs(ContainerIcon$2, { children: [' ', jsxRuntime.jsx(SearchIcon, { fill: darkMode ? "#9C9C9C" : "#222222" }), ' '] })), jsxRuntime.jsx(InputText$3, { inputSearchNewStyle: inputSearchNewStyle, placeholder: placeholder, onChange: onChange, value: value, onKeyDown: (event) => {
+    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs(Container$l, { style: style, id: "container-search-field", className: className, onMouseOver: () => setActionAreaInput(true), onMouseOut: () => setActionAreaInput(false), onFocus: () => setInputOnFocus(true), onBlur: () => setInputOnFocus(false), children: [label && (jsxRuntime.jsxs(LabelField, { isHover: actionAreaInput, isOnFocus: inputOnFocus, children: [' ', label, ' '] })), jsxRuntime.jsxs(InputSearchWrapper$1, { isHover: actionAreaInput, isOnFocus: inputOnFocus, inputSearchNewStyle: inputSearchNewStyle, darkMode: darkMode, isValue: !!value, children: [hasSearchIcon && (jsxRuntime.jsxs(ContainerIcon$2, { children: [' ', jsxRuntime.jsx(SearchIcon, { fill: darkMode ? "#9C9C9C" : "#222222" }), ' '] })), jsxRuntime.jsx(InputText$3, { inputSearchNewStyle: inputSearchNewStyle, placeholder: placeholder, onChange: onChange, value: value, onKeyDown: (event) => {
                                 if (event.key === 'Enter') {
                                     handleClickButton(event);
                                 }

package/dist/src/components/form-elements/textfield/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form-elements/textfield/index.tsx"],"names":[],"mappings":";AAIA,OAAO,4BAA4B,CAAA;AAInC,KAAK,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAA;AAExD,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,GAAG,CAAA;IAChB,aAAa,CAAC,EAAE,GAAG,CAAA;IACnB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,GAAG,CAAA;IACb,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACpC,uBAAuB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc,2CA+EtD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form-elements/textfield/index.tsx"],"names":[],"mappings":";AAIA,OAAO,4BAA4B,CAAA;AAInC,KAAK,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAA;AAExD,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,GAAG,CAAA;IAChB,aAAa,CAAC,EAAE,GAAG,CAAA;IACnB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,GAAG,CAAA;IACb,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACpC,uBAAuB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc,2CAgFtD"}

package/dist/src/components/form-elements/textfield/textFieldStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textFieldStyle.d.ts","sourceRoot":"","sources":["../../../../../src/components/form-elements/textfield/textFieldStyle.ts"],"names":[],"mappings":"AAEA,UAAU,cAAc;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,eAAe,CAAC,EAAE,MAAM,CAAA;CAC3B;AAoBD,eAAO,MAAM,kBAAkB,gFA6E9B,CAAA;AAED,eAAO,MAAM,SAAS;QAGX,MAAM;SAuChB,CAAA;AAED,eAAO,MAAM,KAAK;;SA+BjB,CAAA;AAED,eAAO,MAAM,UAAU,qEAatB,CAAA;AAED,eAAO,MAAM,eAAe,uEAgB3B,CAAA;AAED,eAAO,MAAM,SAAS,qEAErB,CAAA"}
+{"version":3,"file":"textFieldStyle.d.ts","sourceRoot":"","sources":["../../../../../src/components/form-elements/textfield/textFieldStyle.ts"],"names":[],"mappings":"AAEA,UAAU,cAAc;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,eAAe,CAAC,EAAE,MAAM,CAAA;CAC3B;AAoBD,eAAO,MAAM,kBAAkB,gFA4D9B,CAAA;AAED,eAAO,MAAM,SAAS;QAGX,MAAM;SAuChB,CAAA;AAED,eAAO,MAAM,KAAK;;SA+BjB,CAAA;AAED,eAAO,MAAM,UAAU,qEAatB,CAAA;AAED,eAAO,MAAM,eAAe,uEAgB3B,CAAA;AAED,eAAO,MAAM,SAAS,qEAErB,CAAA"}

package/dist/src/components/search-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search-field/index.tsx"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAA;AAIhC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAG5C,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAK,EACL,aAAa,EACb,WAAW,EACX,KAAK,EACL,QAAQ,EACR,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACR,EAAE,EACF,KAAK,EACL,mBAAmB,EACnB,QAAQ,EACT,EAAE,YAAY,2CAkDd"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search-field/index.tsx"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAA;AAIhC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAG5C,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAK,EACL,aAAa,EACb,WAAW,EACX,KAAK,EACL,QAAQ,EACR,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACR,EAAE,EACF,KAAK,EACL,mBAAmB,EACnB,QAAQ,EACT,EAAE,YAAY,2CAmDd"}

package/dist/src/components/search-field/searchFieldStyles.d.ts

@@ -3,6 +3,7 @@ interface ISearchField {
     isOnFocus?: boolean;
     inputSearchNewStyle?: boolean;
     darkMode?: boolean;
+    isValue?: boolean;
 }
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LabelField: import("styled-components").StyledComponent<"label", any, ISearchField, never>;

package/dist/src/components/search-field/searchFieldStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"searchFieldStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/search-field/searchFieldStyles.ts"],"names":[],"mappings":"AAEA,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,SAAS,oEAGrB,CAAA;AAED,eAAO,MAAM,UAAU,gFActB,CAAA;AAED,eAAO,MAAM,aAAa,oEAMzB,CAAA;AAED,eAAO,MAAM,kBAAkB,8EAe9B,CAAA;AAED,eAAO,MAAM,SAAS,gFAwBrB,CAAA;AAED,eAAO,MAAM,YAAY,oEAoBxB,CAAA"}
+{"version":3,"file":"searchFieldStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/search-field/searchFieldStyles.ts"],"names":[],"mappings":"AAEA,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,SAAS,oEAGrB,CAAA;AAED,eAAO,MAAM,UAAU,gFActB,CAAA;AAED,eAAO,MAAM,aAAa,oEAMzB,CAAA;AAED,eAAO,MAAM,kBAAkB,8EAoB9B,CAAA;AAED,eAAO,MAAM,SAAS,gFAwBrB,CAAA;AAED,eAAO,MAAM,YAAY,oEAoBxB,CAAA"}

package/dist/src/theme/tokens.d.ts

@@ -10,6 +10,10 @@ export declare const DesignTokens: {
         linkHover: string;
         linkOnfocus: string;
         linkPressed: string;
+        inputBg: string;
+        inputBorder: string;
+        inputBorderFocus: string;
+        inputFocusBg: string;
         linkError: string;
         inputError: string;
         inputSelect: string;

package/dist/src/theme/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsOxB,CAAA"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0OxB,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "frst-components",
     "homepage": "http://FRST-Falconi.github.io/storybook.frstfalconi.com",
-    "version": "0.34.2",
+    "version": "0.34.4",
     "private": false,
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",