@ssa-ui-kit/core 2.28.2 → 2.28.3

package/dist/components/DatePicker/styles.d.ts

@@ -7,6 +7,7 @@ export declare const DaysViewCell: import("@emotion/styled").StyledComponent<{
     alignItems?: string;
     fade?: boolean;
     fadeDelay?: number;
+    isVisible?: boolean;
 } & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 } & {

package/dist/components/DateRangePicker/components/DatesListWrapper.d.ts

@@ -7,6 +7,7 @@ export declare const DatesListWrapper: import("@emotion/styled").StyledComponent
     alignItems?: string;
     fade?: boolean;
     fadeDelay?: number;
+    isVisible?: boolean;
 } & import("../../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/dist/components/DateRangePicker/styles.d.ts

@@ -7,6 +7,7 @@ export declare const DaysViewCell: import("@emotion/styled").StyledComponent<{
     alignItems?: string;
     fade?: boolean;
     fadeDelay?: number;
+    isVisible?: boolean;
 } & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 } & {
@@ -42,6 +43,7 @@ export declare const TriggerWrapper: import("@emotion/styled").StyledComponent<{
     alignItems?: string;
     fade?: boolean;
     fadeDelay?: number;
+    isVisible?: boolean;
 } & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/dist/components/Filters/FilterBlockWrapper.d.ts

@@ -7,6 +7,7 @@ export declare const FilterBlockWrapper: import("@emotion/styled").StyledCompone
     alignItems?: string;
     fade?: boolean;
     fadeDelay?: number;
+    isVisible?: boolean;
 } & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/dist/components/Tag/Tag.d.ts

@@ -1,3 +1,3 @@
 import { TagsProps } from './types';
-declare const Tag: ({ color, size, className, children, }: TagsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Tag: ({ color, size, className, children, customStyles, }: TagsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Tag;

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

@@ -1,6 +1,15 @@
 import { CommonProps } from '../../types/emotion';
+import { Interpolation, Theme } from '@emotion/react';
+export interface CustomTagStyles {
+    color?: string;
+    background?: string;
+    border?: string;
+    boxShadow?: string;
+    css?: Interpolation<Theme>;
+}
 export interface TagsProps extends CommonProps {
     color?: keyof MainColors;
     size?: keyof MainSizes;
     children: React.ReactNode;
+    customStyles?: CustomTagStyles;
 }

package/dist/components/Typeahead/styles.d.ts

@@ -36,6 +36,7 @@ export declare const TypeaheadInputsGroupWrapper: import("@emotion/styled").Styl
     alignItems?: string;
     fade?: boolean;
     fadeDelay?: number;
+    isVisible?: boolean;
 } & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: Theme;
 } & {

package/dist/components/Wrapper/Wrapper.d.ts

@@ -8,5 +8,6 @@ declare const Wrapper: import("@emotion/styled").StyledComponent<{
     alignItems?: string;
     fade?: boolean;
     fadeDelay?: number;
+    isVisible?: boolean;
 } & CommonProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export default Wrapper;

package/dist/index.js

@@ -1481,21 +1481,26 @@ const Wrapper = /*#__PURE__*/base_default()("div",  true ? {
 }) => alignItems ? alignItems : 'center', ";width:100%;flex-direction:", ({
   direction
 }) => direction ? direction : 'row', ";", ({
+  isVisible = true,
   fade,
   fadeDelay = 0.3
-}) => fade && `
-    opacity: 0;
-    animation: fadeInOut ${fadeDelay}s ease-in-out forwards;
-
-    @keyframes fadeInOut {
-      0% {
-        opacity: 0;
-      }
-      100% {
-        opacity: 1;
-      }
-    }
-  `, ";" + ( true ? "" : 0));
+}) => {
+  const baseStyles = `
+      opacity: ${isVisible ? 1 : 0};
+    `;
+  if (fade) {
+    return `
+        ${baseStyles}
+        transition: opacity ${fadeDelay}s ease-in-out, visibility ${fadeDelay}s ease-in-out;
+        visibility: ${isVisible ? 'visible' : 'hidden'};
+        ${!isVisible ? `transition-delay: 0s, ${fadeDelay}s;` : ''}
+      `;
+  }
+  return `
+      ${baseStyles}
+      visibility: ${isVisible ? 'visible' : 'hidden'};
+    `;
+}, ";" + ( true ? "" : 0));
 /* harmony default export */ const Wrapper_Wrapper = (Wrapper);
 ;// ./src/components/Button/ButtonBase.tsx
 
@@ -8041,6 +8046,7 @@ const styles_blueLight = theme => /*#__PURE__*/(0,react_namespaceObject.css)("co
 
 
 
+
 const Tag_mapColors = {
   pink: [styles_pink, pinkBorder],
   yellow: [styles_yellow, yellowBorder],
@@ -8051,18 +8057,29 @@ const Tag_mapColors = {
   blue: [styles_blue, blueBorder],
   yellowWarm: [styles_yellowWarm, yellowWarmBorder]
 };
+const createCustomStyles = customStyles => {
+  if (!customStyles) return [];
+  const styles = [/*#__PURE__*/(0,react_namespaceObject.css)(customStyles.color && `color: ${customStyles.color};`, " ", customStyles.background && `background: ${customStyles.background};`, " ", customStyles.border && `border: ${customStyles.border};`, " ", customStyles.boxShadow && `box-shadow: ${customStyles.boxShadow};`, ";" + ( true ? "" : 0),  true ? "" : 0)];
+  return customStyles.css ? [styles, customStyles.css] : [styles];
+};
 const Tag = ({
   color = 'purple',
   size = 'medium',
   className,
-  children
-}) => (0,jsx_runtime_namespaceObject.jsx)(Badge_Badge, {
-  color: color,
-  size: size,
-  css: Tag_mapColors[color],
-  className: className,
-  children: children
-});
+  children,
+  customStyles
+}) => {
+  const hasCustomStyles = customStyles && Object.keys(customStyles).length > 0;
+  const defaultStyles = hasCustomStyles ? null : Tag_mapColors[color];
+  const customStylesArray = createCustomStyles(customStyles);
+  return (0,jsx_runtime_namespaceObject.jsx)(Badge_Badge, {
+    color: hasCustomStyles ? 'transparent' : color,
+    size: size,
+    css: [defaultStyles, ...(customStylesArray || []),  true ? "" : 0],
+    className: className,
+    children: children
+  });
+};
 /* harmony default export */ const Tag_Tag = (Tag);
 ;// ./src/components/Textarea/TextareaBase.tsx