@griddo/ax 11.11.5 → 11.11.7-rc.0

package/src/components/ErrorPage/index.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { RouteComponentProps, useHistory, withRouter } from "react-router-dom";
+import { type RouteComponentProps, useHistory, withRouter } from "react-router-dom";
+
 import { Button, Circle, Icon } from "@ax/components";
 
 import * as S from "./style";
@@ -61,6 +61,16 @@ const ErrorPage = (props: IProps): JSX.Element => {
 			buttonText: "Go to sites",
 			buttonAction: () => history.push("/sites"),
 		},
+		linkExpired: {
+			icon: "lock",
+			title: "This preview link has Expired",
+			description: (
+				<>
+					For security, Griddo drafts have a 15-day validity period to protect unspublished content. The access
+					associated with this URL is no longer active. <strong>Please request a new link.</strong>
+				</>
+			),
+		},
 	};
 
 	return (
@@ -75,11 +85,13 @@ const ErrorPage = (props: IProps): JSX.Element => {
 							<S.ErrorNumber>{type}</S.ErrorNumber>
 							<S.ErrorTitle>{errorTexts[type].title}</S.ErrorTitle>
 							<S.ErrorDescription>{errorTexts[type].description}</S.ErrorDescription>
-							<S.ErrorAction>
-								<Button className="button" type="button" onClick={errorTexts[type].buttonAction}>
-									{errorTexts[type].buttonText}
-								</Button>
-							</S.ErrorAction>
+							{errorTexts[type].buttonText && (
+								<S.ErrorAction>
+									<Button className="button" type="button" onClick={errorTexts[type].buttonAction}>
+										{errorTexts[type].buttonText!}
+									</Button>
+								</S.ErrorAction>
+							)}
 						</S.ContentNumber>
 					)}
 					{errorTexts[type].icon && (
@@ -89,11 +101,13 @@ const ErrorPage = (props: IProps): JSX.Element => {
 							</S.IconWrapper>
 							<S.ErrorTitleWrong>{errorTexts[type].title}</S.ErrorTitleWrong>
 							<S.ErrorDescriptionWrong>{errorTexts[type].description}</S.ErrorDescriptionWrong>
-							<S.ErrorAction>
-								<Button className="button" type="button" onClick={errorTexts[type].buttonAction}>
-									{errorTexts[type].buttonText}
-								</Button>
-							</S.ErrorAction>
+							{errorTexts[type].buttonText && (
+								<S.ErrorAction>
+									<Button className="button" type="button" onClick={errorTexts[type].buttonAction}>
+										{errorTexts[type].buttonText!}
+									</Button>
+								</S.ErrorAction>
+							)}
 						</S.ContentWrong>
 					)}
 				</S.Content>
@@ -110,8 +124,8 @@ interface IErrorText {
 	title: string;
 	icon?: string;
 	description: JSX.Element;
-	buttonText: string;
-	buttonAction: () => void;
+	buttonText?: string;
+	buttonAction?: () => void;
 }
 
 type IProps = IErrorPateProps & RouteComponentProps;

package/src/components/Fields/TextField/index.tsx

@@ -1,4 +1,6 @@
-import React, { useRef, useEffect, useState } from "react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+
 import { Icon, IconAction } from "@ax/components";
 
 import * as S from "./style";
@@ -26,6 +28,8 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
 		editorID,
 		focus,
 		inversed = false,
+		noeditable = false,
+		selectOnFocus = false,
 	} = props;
 
 	const [width, setWidth] = useState(0);
@@ -55,18 +59,25 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
 	}, [editorID, value]);
 
 	const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		if (noeditable) return;
 		!autoComplete ? setState(e.target.value) : delayedChange(e.target.value);
 	};
 
 	const delayedChange = (newValue: string) => {
-		onChange && onChange(newValue);
+		onChange?.(newValue);
 		error && handleValidation && handleValidation(newValue, validators);
 	};
 
+	const handleOnFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+		if (!selectOnFocus) return;
+		const target = e.target;
+		requestAnimationFrame(() => target.select());
+	};
+
 	const handleOnBlur = (e: React.FocusEvent<HTMLInputElement>) => {
 		const newValue = e.target.value;
-		onBlur && onBlur(newValue);
-		handleValidation && handleValidation(newValue, validators);
+		onBlur?.(newValue);
+		handleValidation?.(newValue, validators);
 	};
 
 	const hasBackgroundIcon = !!icon && iconPosition === "in";
@@ -89,6 +100,7 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
 				value={inputValue}
 				name={name}
 				onChange={handleOnChange}
+				onFocus={handleOnFocus}
 				onBlur={handleOnBlur}
 				onKeyDown={onKeyDown}
 				placeholder={placeholder}
@@ -140,6 +152,8 @@ interface ITextFieldProps {
 	editorID?: number;
 	focus?: boolean;
 	inversed?: boolean;
+	noeditable?: boolean;
+	selectOnFocus?: boolean;
 }
 
 export default TextField;

package/src/components/Icon/components/GriddoLogo.js

@@ -0,0 +1,16 @@
+function SvgCollapsed(props) {
+	return (
+		<svg width="111" height="45" viewBox="0 0 111 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<title>Logo</title>
+			<path d="M21.4533 16.5551H19.7821C19.3303 16.5554 18.9641 16.9244 18.9638 17.3795V20.8694L18.9571 20.8654C18.9569 21.8381 18.8119 22.8233 18.5066 23.7872C17.25 27.7546 13.6059 30.442 9.48279 30.442L9.48012 30.4407C9.43512 30.4537 7.17042 30.4541 6.03371 30.4541C5.57736 30.4545 5.21176 30.8231 5.21142 31.2839C5.21177 31.7448 5.57737 32.1147 6.03371 32.1151H12.9319C16.2669 32.1151 18.9634 34.8368 18.9638 38.2046C18.9634 41.5723 16.2669 44.2954 12.9319 44.2954H6.87865V39.0358H12.9319C13.3885 39.0358 13.7538 38.6657 13.7542 38.2046C13.7538 37.7435 13.3885 37.3748 12.9319 37.3748H6.03371C3.53266 37.3745 1.29258 35.8172 0.401631 33.4646C-0.489026 31.1006 0.140005 28.4361 2.0009 26.7521C-0.226235 23.8687 -0.625805 19.9577 0.961374 16.6705C2.5604 13.3834 5.86218 11.3077 9.48279 11.3075C11.4587 11.296 13.3892 11.9185 14.9883 13.0719L14.9936 13.0746C15.0712 12.985 15.1515 12.8956 15.2401 12.806C16.1994 11.8376 17.5018 11.2956 18.8491 11.2954H21.4533V16.5551ZM9.48279 16.5551C7.11867 16.5554 5.21009 18.482 5.21009 20.8694C5.21064 23.2563 7.13042 25.182 9.48279 25.1824L9.47346 25.1945H9.48279C11.8469 25.1944 13.7538 23.2559 13.7542 20.8801V20.8694L13.7488 20.6465C13.6347 18.3629 11.7732 16.5552 9.48279 16.5551Z" />
+			<path d="M29.7295 11.517C30.3362 11.3555 30.955 11.2753 31.5846 11.2753C33.4629 11.2753 35.2612 12.0256 36.5783 13.3525L32.8907 17.0801C32.3638 16.5492 31.573 16.3874 30.8743 16.6759C30.1762 16.9647 29.7295 17.6463 29.7295 18.396V30.4554H24.5065V11.2753H29.7295V11.517Z" />
+			<path d="M66.4619 30.4434H61.239V29.4135L61.2283 29.4282C57.7121 31.2051 53.473 30.6281 50.5639 27.974C47.6553 25.3084 46.6587 21.1189 48.0784 17.4265C49.4986 13.7339 53.0273 11.2984 56.9556 11.2981C58.4444 11.2866 59.9113 11.6446 61.2283 12.3253L61.239 12.3374V0H66.4619V30.4434ZM56.9436 16.5604C54.5734 16.5611 52.6605 18.4879 52.6603 20.8761C52.6603 23.2645 54.5733 25.1924 56.9436 25.1931C59.3146 25.1931 61.2283 23.2534 61.2283 20.8761L61.239 20.8922V20.8627L61.2283 20.8761C61.2281 18.4874 59.303 16.5604 56.9436 16.5604Z" />
+			<path d="M88.4878 30.4434H83.2649V29.4135L83.2542 29.4282C79.738 31.205 75.4989 30.6281 72.5898 27.974C69.6811 25.3085 68.6847 21.1189 70.1042 17.4265C71.5244 13.7339 75.0531 11.2984 78.9815 11.2981C80.4704 11.2866 81.9371 11.6446 83.2542 12.3253L83.2649 12.3374V0H88.4878V30.4434ZM78.9695 16.5604C76.5993 16.5611 74.6863 18.4879 74.6861 20.8761C74.6863 23.2643 76.5993 25.1924 78.9695 25.1931C81.3403 25.1931 83.254 23.2532 83.2542 20.8761L83.2649 20.8922V20.8627L83.2542 20.8761C83.254 18.4874 81.3289 16.5604 78.9695 16.5604Z" />
+			<path d="M44.3787 30.4313H39.1438V11.3102H44.3787V30.4313Z" />
+			<path d="M101.019 11.286C106.265 11.2862 110.515 15.5679 110.515 20.8533C110.515 24.7308 108.2 28.2277 104.65 29.7048C101.099 31.1818 97.0103 30.3624 94.2958 27.6276C91.5813 24.8926 90.7682 20.7729 92.2341 17.1956C93.7116 13.6181 97.1709 11.286 101.019 11.286ZM102.657 16.8719C101.065 16.2026 99.221 16.5718 97.9954 17.8065C96.7699 19.0413 96.4035 20.8879 97.0678 22.5035C97.7208 24.1191 99.2899 25.1689 101.019 25.1689C103.379 25.1688 105.291 23.242 105.303 20.8533C105.303 19.1108 104.261 17.5413 102.657 16.8719Z" />
+			<path d="M44.4254 5.64368H39.1918V0.0805664H44.4254V5.64368Z" />
+		</svg>
+	);
+}
+
+export default SvgCollapsed;

package/src/components/Icon/index.tsx

@@ -2,6 +2,7 @@ const getImage = (name: string) => {
 	try {
 		return require(`./components/${name}`).default;
 	} catch (err) {
+		console.log(name);
 		return null;
 	}
 };

package/src/components/Icon/svgs/GriddoLogo.svg

@@ -0,0 +1,9 @@
+<svg width="111" height="45" viewBox="0 0 111 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4533 16.5551H19.7821C19.3303 16.5554 18.9641 16.9244 18.9638 17.3795V20.8694L18.9571 20.8654C18.9569 21.8381 18.8119 22.8233 18.5066 23.7872C17.25 27.7546 13.6059 30.442 9.48279 30.442L9.48012 30.4407C9.43512 30.4537 7.17042 30.4541 6.03371 30.4541C5.57736 30.4545 5.21176 30.8231 5.21142 31.2839C5.21177 31.7448 5.57737 32.1147 6.03371 32.1151H12.9319C16.2669 32.1151 18.9634 34.8368 18.9638 38.2046C18.9634 41.5723 16.2669 44.2954 12.9319 44.2954H6.87865V39.0358H12.9319C13.3885 39.0358 13.7538 38.6657 13.7542 38.2046C13.7538 37.7435 13.3885 37.3748 12.9319 37.3748H6.03371C3.53266 37.3745 1.29258 35.8172 0.401631 33.4646C-0.489026 31.1006 0.140005 28.4361 2.0009 26.7521C-0.226235 23.8687 -0.625805 19.9577 0.961374 16.6705C2.5604 13.3834 5.86218 11.3077 9.48279 11.3075C11.4587 11.296 13.3892 11.9185 14.9883 13.0719L14.9936 13.0746C15.0712 12.985 15.1515 12.8956 15.2401 12.806C16.1994 11.8376 17.5018 11.2956 18.8491 11.2954H21.4533V16.5551ZM9.48279 16.5551C7.11867 16.5554 5.21009 18.482 5.21009 20.8694C5.21064 23.2563 7.13042 25.182 9.48279 25.1824L9.47346 25.1945H9.48279C11.8469 25.1944 13.7538 23.2559 13.7542 20.8801V20.8694L13.7488 20.6465C13.6347 18.3629 11.7732 16.5552 9.48279 16.5551Z" fill="white"/>
+<path d="M29.7295 11.517C30.3362 11.3555 30.955 11.2753 31.5846 11.2753C33.4629 11.2753 35.2612 12.0256 36.5783 13.3525L32.8907 17.0801C32.3638 16.5492 31.573 16.3874 30.8743 16.6759C30.1762 16.9647 29.7295 17.6463 29.7295 18.396V30.4554H24.5065V11.2753H29.7295V11.517Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.4619 30.4434H61.239V29.4135L61.2283 29.4282C57.7121 31.2051 53.473 30.6281 50.5639 27.974C47.6553 25.3084 46.6587 21.1189 48.0784 17.4265C49.4986 13.7339 53.0273 11.2984 56.9556 11.2981C58.4444 11.2866 59.9113 11.6446 61.2283 12.3253L61.239 12.3374V0H66.4619V30.4434ZM56.9436 16.5604C54.5734 16.5611 52.6605 18.4879 52.6603 20.8761C52.6603 23.2645 54.5733 25.1924 56.9436 25.1931C59.3146 25.1931 61.2283 23.2534 61.2283 20.8761L61.239 20.8922V20.8627L61.2283 20.8761C61.2281 18.4874 59.303 16.5604 56.9436 16.5604Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M88.4878 30.4434H83.2649V29.4135L83.2542 29.4282C79.738 31.205 75.4989 30.6281 72.5898 27.974C69.6811 25.3085 68.6847 21.1189 70.1042 17.4265C71.5244 13.7339 75.0531 11.2984 78.9815 11.2981C80.4704 11.2866 81.9371 11.6446 83.2542 12.3253L83.2649 12.3374V0H88.4878V30.4434ZM78.9695 16.5604C76.5993 16.5611 74.6863 18.4879 74.6861 20.8761C74.6863 23.2643 76.5993 25.1924 78.9695 25.1931C81.3403 25.1931 83.254 23.2532 83.2542 20.8761L83.2649 20.8922V20.8627L83.2542 20.8761C83.254 18.4874 81.3289 16.5604 78.9695 16.5604Z" fill="white"/>
+<path d="M44.3787 30.4313H39.1438V11.3102H44.3787V30.4313Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M101.019 11.286C106.265 11.2862 110.515 15.5679 110.515 20.8533C110.515 24.7308 108.2 28.2277 104.65 29.7048C101.099 31.1818 97.0103 30.3624 94.2958 27.6276C91.5813 24.8926 90.7682 20.7729 92.2341 17.1956C93.7116 13.6181 97.1709 11.286 101.019 11.286ZM102.657 16.8719C101.065 16.2026 99.221 16.5718 97.9954 17.8065C96.7699 19.0413 96.4035 20.8879 97.0678 22.5035C97.7208 24.1191 99.2899 25.1689 101.019 25.1689C103.379 25.1688 105.291 23.242 105.303 20.8533C105.303 19.1108 104.261 17.5413 102.657 16.8719Z" fill="white"/>
+<path d="M44.4254 5.64368H39.1918V0.0805664H44.4254V5.64368Z" fill="white"/>
+</svg>

package/src/components/Modal/index.tsx

@@ -1,6 +1,8 @@
 import { memo, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
+
 import { IconAction, SearchField } from "@ax/components";
+
 import Button from "../Button";
 
 import * as S from "./style";
@@ -124,7 +126,7 @@ export interface IModalProps {
 	overflow?: string;
 	mainAction?: IAction;
 	secondaryAction?: IAction;
-	height?: number;
+	height?: number | string;
 	isChild?: boolean;
 	searchAction?(query: string): void;
 	searchValue?: string;

package/src/components/Modal/style.tsx

@@ -51,7 +51,12 @@ const ModalWrapper = styled.div<{ isChild?: boolean }>`
   outline: 0;
 `;
 
-const Modal = styled.div<{ size?: string; height?: number }>`
+function getModalHeight(height?: number | string, size?: string) {
+	const heightProp = typeof height === "number" ? `${height}px` : height;
+	return height !== undefined ? heightProp : getHeight(size);
+}
+
+const Modal = styled.div<{ size?: string; height?: number | string }>`
   z-index: 100;
   display: flex;
   flex-flow: column nowrap;
@@ -60,7 +65,8 @@ const Modal = styled.div<{ size?: string; height?: number }>`
   margin: auto;
   border-radius: 4px;
   width: ${(p) => getWidth(p.size)};
-  height: ${(p) => (p.height ? `${p.height}px` : getHeight(p.size))};
+  height: ${(p) => getModalHeight(p.height, p.size)};
+  max-height: 80vh;
   box-shadow: ${(p) => p.theme.shadow.shadowXL};
   top: 50%;
   transform: translateY(-50%);
@@ -111,8 +117,11 @@ const SearchWrapper = styled.div`
   margin-right: ${(p) => p.theme.spacing.xs};
 
   & > div {
-    margin-top: -8px;
-    margin-bottom: -8px;
+    margin-top: -9px;
+    margin-bottom: -9px;
+    display: flex
+    justify-content: center;
+    align-items: center;
   }
 `;
 
@@ -121,14 +130,14 @@ const IconWrapper = styled.div`
 `;
 
 export {
-	ModalOverlay,
-	ModalWrapper,
+	ButtonWrapper,
+	IconWrapper,
 	Modal,
-	ModalHeader,
 	ModalContent,
-	Title,
-	ButtonWrapper,
 	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
+	ModalWrapper,
 	SearchWrapper,
-	IconWrapper,
+	Title,
 };

package/src/components/PageInfoBanner/index.tsx

@@ -0,0 +1,38 @@
+import { Icon } from "@ax/components";
+
+import * as S from "./styles";
+
+const PageInfoBanner = (props: PageInfoBannerProps) => {
+	const { message, actionLabel, onAction, onDismiss, icon = "view" } = props;
+
+	return (
+		<S.Container>
+			<S.Header>
+				<S.Info>
+					<Icon name={icon} size="16px" />
+					{message}{" "}
+					{onAction && (
+						<button type="button" onClick={onAction}>
+							<strong style={{ textDecoration: "underline" }}>{actionLabel}</strong>
+						</button>
+					)}
+					{onDismiss && (
+						<S.DismissButton type="button" onClick={onDismiss}>
+							<Icon name="close" size="16px" />
+						</S.DismissButton>
+					)}
+				</S.Info>
+			</S.Header>
+		</S.Container>
+	);
+};
+
+interface PageInfoBannerProps {
+	message: string;
+	actionLabel?: string;
+	onAction?: () => void;
+	onDismiss?: () => void;
+	icon?: string;
+}
+
+export default PageInfoBanner;

package/src/components/PageInfoBanner/styles.tsx

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+
+const Container = styled.div`
+	left: 0px;
+	bottom: ${(p) => p.theme.spacing.s};
+	width: 100vw;
+	display: flex;
+	position: fixed;
+	z-index: 100;
+	justify-content: center;
+	align-items: center;
+	`;
+
+const Header = styled.span`
+	${({ theme }) => theme.textStyle.uiS}
+	border-radius: ${(p) => p.theme.radii.s};
+	background-color: ${(p) => p.theme.color.uiBackground04};
+	color: ${(p) => p.theme.color.textHighEmphasisInverse};
+	padding: ${(p) => p.theme.spacing.s};
+	svg {
+		path {
+			fill: ${(p) => p.theme.color.textHighEmphasisInverse};
+		}
+	}
+`;
+
+const Info = styled.div`
+	display: flex;
+	align-items: center;
+	column-gap: ${(p) => p.theme.spacing.xs};
+`;
+
+const DismissButton = styled.button`
+	background: none;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+`;
+
+export { Container, DismissButton, Header, Info };

package/src/components/SearchField/index.tsx

@@ -1,5 +1,8 @@
-import { Button, Icon } from "@ax/components";
 import { useEffect, useRef, useState } from "react";
+
+import { Button, Icon } from "@ax/components";
+import { LOCALE } from "@ax/locales";
+
 import { Select } from "../Fields";
 
 import * as S from "./style";
@@ -98,7 +101,7 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
 						value={inputValue}
 						onChange={handleChange}
 						onKeyDown={handleKeyDown}
-						placeholder={placeholder}
+						placeholder={placeholder || LOCALE.common.typeSomething}
 						closeOnInactive={closeOnInactive}
 						disabled={disabled}
 						data-testid="search-input"
@@ -107,12 +110,13 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
 						inputSize={size}
 						name="searchInput"
 					/>
-					{inputValue.trim() !== "" && searchOnEnter && <S.HelpText>Press ENTER</S.HelpText>}
+
+					{searchOnEnter && <S.HelpText hide={!inputValue.trim()}>Press ENTER</S.HelpText>}
 					{closeOnInactive || inputValue.length > 0 ? (
 						<S.CloseWrapper data-testid="icon-close-wrapper">
-							<Button type="button" onClick={handleClick} buttonStyle="minimal">
-								cerrar
-							</Button>
+							<S.CloseButton type="button" onClick={handleClick} buttonStyle="minimal">
+								{LOCALE.common.close}
+							</S.CloseButton>
 						</S.CloseWrapper>
 					) : (
 						<S.IconSearchWrapper disabled={disabled} data-testid="icon-search-wrapper-2">

package/src/components/SearchField/style.tsx

@@ -1,6 +1,9 @@
+import { Button } from "@ax/components";
+
 import styled from "styled-components";
 
 const Wrapper = styled.div`
+  display: flex;
   position: relative;
   width: 100%;
 `;
@@ -8,15 +11,20 @@ const Wrapper = styled.div`
 const FieldWrapper = styled.div<{ closeOnInactive: boolean; disabled: boolean }>`
   display: flex;
   align-items: center;
+  justify-content: center;
+  background-color: white;
+  width: 100%;
+  column-gap: ${(p) => p.theme.spacing.xs};
+  padding-inline: ${(p) => p.theme.spacing.s};
   border-color: ${(p) =>
 		p.disabled
 			? p.theme.color.interactiveDisabled
 			: p.closeOnInactive
 				? p.theme.color.interactive01
 				: p.theme.color.uiLine};
-  border-width: ${(p) => (p.closeOnInactive ? "0 0 1px" : "1px")};
+  border-width: 1px;
   border-style: solid;
-  border-radius: ${(p) => (p.closeOnInactive ? 0 : p.theme.radii.s)};
+  border-radius: ${(p) => p.theme.radii.s};
   &:focus-within {
     border-color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
   }
@@ -31,33 +39,33 @@ const Input = styled.input<{
   ${(p) => p.theme.textStyle.fieldContent};
   color: ${(p) => p.theme.color.textHighEmphasis};
   background-color: ${(p) => p.theme.color.interactiveBackground};
-  flex: 1 1 auto;
   height: ${(p) => (p.inputSize === "XXS" ? "32px" : p.inputSize === "XS" ? "40px" : p.theme.spacing.l)};
-  padding-left: ${(p) => p.theme.spacing.s};
-  padding-right: ${(p) => (p.closeOnInactive ? p.theme.spacing.xl : "0")};
   border: none;
-  border-radius: ${(p) => (p.closeOnInactive ? 0 : p.theme.radii.s)};
+  border-radius: ${(p) => p.theme.radii.s};
+  margin-right: auto;
+  flex: 1 1 auto;
+  min-width: unset;
+  max-width: unset;
+  width: 100%;
+  &:active,
+  &:focus {
+    outline: none;
+  }
+
+  /*
   width: ${(p) =>
 		p.small || ["S", "XS", "XXS"].includes(p.inputSize)
 			? `calc(${p.theme.spacing.xl} * 2)`
 			: p.inputSize === "L"
 				? `calc(${p.theme.spacing.xl} * 6)`
 				: `calc(${p.theme.spacing.xl} * 4)`};
-
-  &:active,
-  &:focus {
-    outline: none;
-  }
+  */
 `;
 
 const IconSearchWrapper = styled.div<{ onClick?: () => void; disabled: boolean }>`
-  position: absolute;
-  right: ${(p) => p.theme.spacing.s};
-  top: 50%;
-  width: ${(p) => p.theme.spacing.m};
+  margin-left: auto;
   height: ${(p) => p.theme.spacing.m};
   cursor: ${(p) => (p.onClick ? "pointer" : "default")};
-  transform: translateY(-50%);
   svg {
     path {
       fill: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
@@ -65,25 +73,28 @@ const IconSearchWrapper = styled.div<{ onClick?: () => void; disabled: boolean }
   }
 `;
 
-const HelpText = styled.div`
+const HelpText = styled.div<{ hide?: boolean }>`
+  display: ${(p) => (p.hide ? "none" : "block")};
+  visibility: ${(p) => (p.hide ? "hidden" : "visible")};
+  min-width: fit-content;
   ${(p) => p.theme.textStyle.uiXS};
   color: ${(p) => p.theme.color.textLowEmphasis};
   font-style: italic;
-  position: absolute;
-  right: 64px;
-  top: 50%;
-  transform: translateY(-50%);
 `;
 
 const CloseWrapper = styled.div`
-  position: absolute;
-  right: ${(p) => p.theme.spacing.xxs};
-  top: 50%;
   cursor: pointer;
-  transform: translateY(-50%);
+  display: flex;
+  min-width: fit-content;
 `;
 
-const FilterWrapper = styled.div``;
+const CloseButton = styled(Button)`
+  margin: 0 !important; 
+`;
+
+const FilterWrapper = styled.div`
+  min-width: fit-content;
+`;
 
 const Separator = styled.div`
   border-right: 1px solid ${(p) => p.theme.color.uiLine};
@@ -92,4 +103,14 @@ const Separator = styled.div`
   margin-left: ${(p) => p.theme.spacing.s};
 `;
 
-export { Wrapper, IconSearchWrapper, FieldWrapper, Input, HelpText, CloseWrapper, FilterWrapper, Separator };
+export {
+	CloseButton,
+	CloseWrapper,
+	FieldWrapper,
+	FilterWrapper,
+	HelpText,
+	IconSearchWrapper,
+	Input,
+	Separator,
+	Wrapper,
+};