@lidofinance/lido-ui 1.10.13 → 2.0.0-next.2

package/dist/esm/button/src/ButtonStyles.js

@@ -0,0 +1,307 @@
+import styled, { css, keyframes } from "styled-components";
+import { Loader } from "../../loaders/src/index";
+const sizes = {
+    xxs: css`
+    line-height: 1em;
+    font-size: ${(param)=>{
+        let { theme  } = param;
+        return theme.fontSizesMap.xxxs;
+    }}px;
+    border-radius: ${(param)=>{
+        let { theme  } = param;
+        return theme.borderRadiusesMap.sm;
+    }}px;
+    padding: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '11px' : '11px 16px';
+    }};
+    min-width: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '0' : '50px';
+    }};
+  `,
+    xs: css`
+    line-height: 1em;
+    font-size: ${(param)=>{
+        let { theme  } = param;
+        return theme.fontSizesMap.xxs;
+    }}px;
+    border-radius: ${(param)=>{
+        let { theme  } = param;
+        return theme.borderRadiusesMap.sm;
+    }}px;
+    padding: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '10px' : '10px 16px';
+    }};
+    min-width: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '0' : '60px';
+    }};
+  `,
+    sm: css`
+    line-height: 1em;
+    font-size: ${(param)=>{
+        let { theme  } = param;
+        return theme.fontSizesMap.xs;
+    }}px;
+    border-radius: ${(param)=>{
+        let { theme  } = param;
+        return theme.borderRadiusesMap.sm;
+    }}px;
+    padding: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '16px' : '16px 24px';
+    }};
+    min-width: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '0' : '100px';
+    }};
+  `,
+    md: css`
+    line-height: 1em;
+    font-size: ${(param)=>{
+        let { theme  } = param;
+        return theme.fontSizesMap.xs;
+    }}px;
+    border-radius: ${(param)=>{
+        let { theme  } = param;
+        return theme.borderRadiusesMap.lg;
+    }}px;
+    padding: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '21px' : '21px 44px';
+    }};
+    min-width: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '0' : '120px';
+    }};
+  `,
+    lg: css`
+    line-height: 1em;
+    font-size: ${(param)=>{
+        let { theme  } = param;
+        return theme.fontSizesMap.sm;
+    }}px;
+    border-radius: ${(param)=>{
+        let { theme  } = param;
+        return theme.borderRadiusesMap.lg;
+    }}px;
+    box-shadow: ${(param)=>{
+        let { theme  } = param;
+        return theme.boxShadows.md;
+    }}
+      var(--lido-color-shadowDark);
+    padding: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '24px' : '24px 64px';
+    }};
+    min-width: ${(param)=>{
+        let { $square  } = param;
+        return $square ? '0' : '160px';
+    }};
+  `
+};
+const getMainColor = (props)=>{
+    const colorsMap = {
+        primary: `var(--lido-color-primary)`,
+        secondary: `var(--lido-color-secondary)`,
+        warning: `var(--lido-color-warning)`,
+        error: `var(--lido-color-error)`,
+        success: `var(--lido-color-success)`
+    };
+    return colorsMap[props.$color];
+};
+const getContrastColor = (props)=>{
+    const colorsMap = {
+        primary: `var(--lido-color-primaryContrast)`,
+        secondary: `var(--lido-color-secondaryContrast)`,
+        warning: `var(--lido-color-warningContrast)`,
+        error: `var(--lido-color-errorContrast)`,
+        success: `var(--lido-color-successContrast)`
+    };
+    return colorsMap[props.$color];
+};
+const getHoverColor = (props)=>{
+    const colorsMap = {
+        primary: `var(--lido-color-primaryHover)`,
+        secondary: `var(--lido-color-secondaryHover)`,
+        warning: `var(--lido-color-warningHover)`,
+        error: `var(--lido-color-errorHover)`,
+        success: `var(--lido-color-successHover)`
+    };
+    return colorsMap[props.$color];
+};
+const variants = {
+    filled: css`
+    color: ${getContrastColor};
+    background-color: ${getMainColor};
+    transition: background-color ${(param)=>{
+        let { theme  } = param;
+        return theme.duration.fast;
+    }} ease;
+
+    :not(:disabled):hover,
+    :focus-visible {
+      background-color: ${getHoverColor};
+    }
+  `,
+    outlined: css`
+    color: ${getMainColor};
+    transition: background-color ${(param)=>{
+        let { theme  } = param;
+        return theme.duration.fast;
+    }} ease,
+      color ${(param)=>{
+        let { theme  } = param;
+        return theme.duration.fast;
+    }} ease;
+
+    :before {
+      display: block;
+      border: 1px solid ${getMainColor};
+    }
+
+    :not(:disabled):hover,
+    :focus-visible {
+      background-color: ${getHoverColor};
+      color: ${getContrastColor};
+    }
+  `,
+    text: css`
+    color: ${getMainColor};
+    background-color: var(--lido-color-foreground);
+
+    :before {
+      display: block;
+      background-color: ${getMainColor};
+      transition: opacity ${(param)=>{
+        let { theme  } = param;
+        return theme.duration.fast;
+    }} ease;
+      opacity: 0;
+    }
+
+    :not(:disabled):hover,
+    :focus-visible {
+      :before {
+        opacity: 0.1;
+      }
+    }
+  `,
+    ghost: css`
+    color: ${getMainColor};
+
+    :before {
+      display: block;
+      background-color: ${getMainColor};
+      transition: opacity ${(param)=>{
+        let { theme  } = param;
+        return theme.duration.fast;
+    }} ease;
+      opacity: 0;
+    }
+
+    :not(:disabled):hover,
+    :focus-visible {
+      :before {
+        opacity: 0.1;
+      }
+    }
+  `,
+    translucent: css`
+    color: ${getMainColor};
+
+    :before {
+      display: block;
+      background-color: ${getMainColor};
+      transition: opacity ${(param)=>{
+        let { theme  } = param;
+        return theme.duration.fast;
+    }} ease;
+      opacity: 0.1;
+    }
+
+    :not(:disabled):hover,
+    :focus-visible {
+      :before {
+        opacity: 0.2;
+      }
+    }
+  `
+};
+export const ButtonStyle = styled.button`
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+  background: transparent;
+  font-family: inherit;
+  font-weight: 700;
+  width: ${(param)=>{
+    let { $fullwidth  } = param;
+    return $fullwidth ? ' 100%' : 'auto';
+}};
+
+  :before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    display: none;
+  }
+
+  :not(:disabled) {
+    cursor: pointer;
+  }
+
+  :disabled {
+    opacity: ${(param)=>{
+    let { $loading  } = param;
+    return $loading ? 1 : 0.5;
+}};
+  }
+
+  ${(props)=>sizes[props.$size]}
+  ${(props)=>variants[props.$variant]}
+`;
+export const ripple = keyframes`
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+`;
+export const ButtonRippleStyle = styled.span`
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  pointer-events: none;
+  animation: ${ripple} 0.8s linear;
+  background-color: currentColor;
+  opacity: 0.4;
+`;
+export const ButtonContentStyle = styled.span`
+  position: relative;
+  pointer-events: none;
+  visibility: ${(param)=>{
+    let { $hidden  } = param;
+    return $hidden ? 'hidden' : 'visible';
+}};
+`;
+export const ButtonLoaderStyle = styled(Loader)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: currentColor;
+  pointer-events: none;
+`;
+
+//# sourceMappingURL=ButtonStyles.js.map

package/dist/esm/button/src/ButtonStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/button/src/ButtonStyles.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { Theme } from '@lidofinance/theme'\nimport { Loader } from '@lidofinance/loaders'\nimport { ButtonColors, ButtonSizes, ButtonVariants } from './types'\n\ntype InjectedProps = {\n  $color: ButtonColors\n  $size: ButtonSizes\n  $variant: ButtonVariants\n  $fullwidth: boolean\n  $square: boolean\n  $loading: boolean\n  $active: boolean\n  theme: Theme\n}\n\nconst sizes = {\n  xxs: css<InjectedProps>`\n    line-height: 1em;\n    font-size: ${({ theme }) => theme.fontSizesMap.xxxs}px;\n    border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;\n    padding: ${({ $square }) => ($square ? '11px' : '11px 16px')};\n    min-width: ${({ $square }) => ($square ? '0' : '50px')};\n  `,\n  xs: css<InjectedProps>`\n    line-height: 1em;\n    font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n    border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;\n    padding: ${({ $square }) => ($square ? '10px' : '10px 16px')};\n    min-width: ${({ $square }) => ($square ? '0' : '60px')};\n  `,\n  sm: css<InjectedProps>`\n    line-height: 1em;\n    font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n    border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;\n    padding: ${({ $square }) => ($square ? '16px' : '16px 24px')};\n    min-width: ${({ $square }) => ($square ? '0' : '100px')};\n  `,\n  md: css<InjectedProps>`\n    line-height: 1em;\n    font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n    border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;\n    padding: ${({ $square }) => ($square ? '21px' : '21px 44px')};\n    min-width: ${({ $square }) => ($square ? '0' : '120px')};\n  `,\n  lg: css<InjectedProps>`\n    line-height: 1em;\n    font-size: ${({ theme }) => theme.fontSizesMap.sm}px;\n    border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;\n    box-shadow: ${({ theme }) => theme.boxShadows.md}\n      var(--lido-color-shadowDark);\n    padding: ${({ $square }) => ($square ? '24px' : '24px 64px')};\n    min-width: ${({ $square }) => ($square ? '0' : '160px')};\n  `,\n}\n\nconst getMainColor = (props: InjectedProps) => {\n  const colorsMap = {\n    primary: `var(--lido-color-primary)`,\n    secondary: `var(--lido-color-secondary)`,\n    warning: `var(--lido-color-warning)`,\n    error: `var(--lido-color-error)`,\n    success: `var(--lido-color-success)`,\n  }\n  return colorsMap[props.$color]\n}\n\nconst getContrastColor = (props: InjectedProps) => {\n  const colorsMap = {\n    primary: `var(--lido-color-primaryContrast)`,\n    secondary: `var(--lido-color-secondaryContrast)`,\n    warning: `var(--lido-color-warningContrast)`,\n    error: `var(--lido-color-errorContrast)`,\n    success: `var(--lido-color-successContrast)`,\n  }\n  return colorsMap[props.$color]\n}\n\nconst getHoverColor = (props: InjectedProps) => {\n  const colorsMap = {\n    primary: `var(--lido-color-primaryHover)`,\n    secondary: `var(--lido-color-secondaryHover)`,\n    warning: `var(--lido-color-warningHover)`,\n    error: `var(--lido-color-errorHover)`,\n    success: `var(--lido-color-successHover)`,\n  }\n  return colorsMap[props.$color]\n}\n\nconst variants = {\n  filled: css`\n    color: ${getContrastColor};\n    background-color: ${getMainColor};\n    transition: background-color ${({ theme }) => theme.duration.fast} ease;\n\n    :not(:disabled):hover,\n    :focus-visible {\n      background-color: ${getHoverColor};\n    }\n  `,\n  outlined: css`\n    color: ${getMainColor};\n    transition: background-color ${({ theme }) => theme.duration.fast} ease,\n      color ${({ theme }) => theme.duration.fast} ease;\n\n    :before {\n      display: block;\n      border: 1px solid ${getMainColor};\n    }\n\n    :not(:disabled):hover,\n    :focus-visible {\n      background-color: ${getHoverColor};\n      color: ${getContrastColor};\n    }\n  `,\n  text: css`\n    color: ${getMainColor};\n    background-color: var(--lido-color-foreground);\n\n    :before {\n      display: block;\n      background-color: ${getMainColor};\n      transition: opacity ${({ theme }) => theme.duration.fast} ease;\n      opacity: 0;\n    }\n\n    :not(:disabled):hover,\n    :focus-visible {\n      :before {\n        opacity: 0.1;\n      }\n    }\n  `,\n  ghost: css`\n    color: ${getMainColor};\n\n    :before {\n      display: block;\n      background-color: ${getMainColor};\n      transition: opacity ${({ theme }) => theme.duration.fast} ease;\n      opacity: 0;\n    }\n\n    :not(:disabled):hover,\n    :focus-visible {\n      :before {\n        opacity: 0.1;\n      }\n    }\n  `,\n  translucent: css`\n    color: ${getMainColor};\n\n    :before {\n      display: block;\n      background-color: ${getMainColor};\n      transition: opacity ${({ theme }) => theme.duration.fast} ease;\n      opacity: 0.1;\n    }\n\n    :not(:disabled):hover,\n    :focus-visible {\n      :before {\n        opacity: 0.2;\n      }\n    }\n  `,\n}\n\nexport const ButtonStyle = styled.button<InjectedProps>`\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  white-space: nowrap;\n  overflow: hidden;\n  position: relative;\n  background: transparent;\n  font-family: inherit;\n  font-weight: 700;\n  width: ${({ $fullwidth }) => ($fullwidth ? ' 100%' : 'auto')};\n\n  :before {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    pointer-events: none;\n    border-radius: inherit;\n    display: none;\n  }\n\n  :not(:disabled) {\n    cursor: pointer;\n  }\n\n  :disabled {\n    opacity: ${({ $loading }) => ($loading ? 1 : 0.5)};\n  }\n\n  ${(props) => sizes[props.$size]}\n  ${(props) => variants[props.$variant]}\n`\n\nexport const ripple = keyframes`\n  to {\n    transform: scale(4);\n    opacity: 0;\n  }\n`\n\nexport const ButtonRippleStyle = styled.span`\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  pointer-events: none;\n  animation: ${ripple} 0.8s linear;\n  background-color: currentColor;\n  opacity: 0.4;\n`\n\nexport const ButtonContentStyle = styled.span<{ $hidden: boolean }>`\n  position: relative;\n  pointer-events: none;\n  visibility: ${({ $hidden }) => ($hidden ? 'hidden' : 'visible')};\n`\n\nexport const ButtonLoaderStyle = styled(Loader)`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: currentColor;\n  pointer-events: none;\n`\n"],"names":["styled","css","keyframes","Loader","sizes","xxs","theme","fontSizesMap","xxxs","borderRadiusesMap","sm","$square","xs","md","lg","boxShadows","getMainColor","props","colorsMap","primary","secondary","warning","error","success","$color","getContrastColor","getHoverColor","variants","filled","duration","fast","outlined","text","ghost","translucent","ButtonStyle","button","$fullwidth","$loading","$size","$variant","ripple","ButtonRippleStyle","span","ButtonContentStyle","$hidden","ButtonLoaderStyle"],"mappings":"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"}

package/dist/esm/button/src/index.js

@@ -0,0 +1,5 @@
+export { default as Button } from "./Button";
+export { default as ButtonIcon } from "./ButtonIcon";
+export * from './types';
+
+//# sourceMappingURL=index.js.map

package/dist/esm/button/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/button/src/index.ts"],"sourcesContent":["export { default as Button } from './Button'\nexport { default as ButtonIcon } from './ButtonIcon'\nexport * from './types'\n"],"names":["default","Button","ButtonIcon"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,UAAU,CAAA;AAC5C,SAASD,OAAO,IAAIE,UAAU,QAAQ,cAAc,CAAA;AACpD,cAAc,SAAS,CAAA"}

package/dist/esm/button/src/types.js

@@ -0,0 +1,26 @@
+export var ButtonSize;
+(function(ButtonSize) {
+    ButtonSize[ButtonSize["xxs"] = 0] = "xxs";
+    ButtonSize[ButtonSize["xs"] = 1] = "xs";
+    ButtonSize[ButtonSize["sm"] = 2] = "sm";
+    ButtonSize[ButtonSize["md"] = 3] = "md";
+    ButtonSize[ButtonSize["lg"] = 4] = "lg";
+})(ButtonSize || (ButtonSize = {}));
+export var ButtonVariant;
+(function(ButtonVariant) {
+    ButtonVariant[ButtonVariant["filled"] = 0] = "filled";
+    ButtonVariant[ButtonVariant["outlined"] = 1] = "outlined";
+    ButtonVariant[ButtonVariant["text"] = 2] = "text";
+    ButtonVariant[ButtonVariant["ghost"] = 3] = "ghost";
+    ButtonVariant[ButtonVariant["translucent"] = 4] = "translucent";
+})(ButtonVariant || (ButtonVariant = {}));
+export var ButtonColor;
+(function(ButtonColor) {
+    ButtonColor[ButtonColor["primary"] = 0] = "primary";
+    ButtonColor[ButtonColor["secondary"] = 1] = "secondary";
+    ButtonColor[ButtonColor["warning"] = 2] = "warning";
+    ButtonColor[ButtonColor["error"] = 3] = "error";
+    ButtonColor[ButtonColor["success"] = 4] = "success";
+})(ButtonColor || (ButtonColor = {}));
+
+//# sourceMappingURL=types.js.map

package/dist/esm/button/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/button/src/types.tsx"],"sourcesContent":["import { LidoComponentProps } from '@lidofinance/utils'\nexport type { Theme } from '@lidofinance/theme'\n\nexport enum ButtonSize {\n  xxs,\n  xs,\n  sm,\n  md,\n  lg,\n}\nexport type ButtonSizes = keyof typeof ButtonSize\n\nexport enum ButtonVariant {\n  filled,\n  outlined,\n  text,\n  ghost,\n  translucent,\n}\nexport type ButtonVariants = keyof typeof ButtonVariant\n\nexport enum ButtonColor {\n  primary,\n  secondary,\n  warning,\n  error,\n  success,\n}\nexport type ButtonColors = keyof typeof ButtonColor\n\nexport type ButtonProps = LidoComponentProps<\n  'button',\n  {\n    size?: ButtonSizes\n    variant?: ButtonVariants\n    color?: ButtonColors\n    fullwidth?: boolean\n    square?: boolean\n    loading?: boolean\n    active?: boolean\n    as?: never\n  }\n>\n\nexport type ButtonIconProps = {\n  icon: JSX.Element\n} & ButtonProps\n"],"names":["ButtonSize","xxs","xs","sm","md","lg","ButtonVariant","filled","outlined","text","ghost","translucent","ButtonColor","primary","secondary","warning","error","success"],"mappings":"AAAA,WAGO,UAMN;UANWA,UAAU;IAAVA,UAAU,CAAVA,UAAU,CACpBC,KAAG,IAAHA,CAAG,IAAHA,KAAG;IADOD,UAAU,CAAVA,UAAU,CAEpBE,IAAE,IAAFA,CAAE,IAAFA,IAAE;IAFQF,UAAU,CAAVA,UAAU,CAGpBG,IAAE,IAAFA,CAAE,IAAFA,IAAE;IAHQH,UAAU,CAAVA,UAAU,CAIpBI,IAAE,IAAFA,CAAE,IAAFA,IAAE;IAJQJ,UAAU,CAAVA,UAAU,CAKpBK,IAAE,IAAFA,CAAE,IAAFA,IAAE;GALQL,UAAU,KAAVA,UAAU;WASf,aAMN;UANWM,aAAa;IAAbA,aAAa,CAAbA,aAAa,CACvBC,QAAM,IAANA,CAAM,IAANA,QAAM;IADID,aAAa,CAAbA,aAAa,CAEvBE,UAAQ,IAARA,CAAQ,IAARA,UAAQ;IAFEF,aAAa,CAAbA,aAAa,CAGvBG,MAAI,IAAJA,CAAI,IAAJA,MAAI;IAHMH,aAAa,CAAbA,aAAa,CAIvBI,OAAK,IAALA,CAAK,IAALA,OAAK;IAJKJ,aAAa,CAAbA,aAAa,CAKvBK,aAAW,IAAXA,CAAW,IAAXA,aAAW;GALDL,aAAa,KAAbA,aAAa;WASlB,WAMN;UANWM,WAAW;IAAXA,WAAW,CAAXA,WAAW,CACrBC,SAAO,IAAPA,CAAO,IAAPA,SAAO;IADGD,WAAW,CAAXA,WAAW,CAErBE,WAAS,IAATA,CAAS,IAATA,WAAS;IAFCF,WAAW,CAAXA,WAAW,CAGrBG,SAAO,IAAPA,CAAO,IAAPA,SAAO;IAHGH,WAAW,CAAXA,WAAW,CAIrBI,OAAK,IAALA,CAAK,IAALA,OAAK;IAJKJ,WAAW,CAAXA,WAAW,CAKrBK,SAAO,IAAPA,CAAO,IAAPA,SAAO;GALGL,WAAW,KAAXA,WAAW"}

package/dist/esm/button/src/useRipple.js

@@ -0,0 +1,34 @@
+import React, { useCallback, useState } from "react";
+import { ButtonRippleStyle } from "./ButtonStyles";
+export const useRipple = (param)=>{
+    let { onClick  } = param;
+    const [ripple, setRipple] = useState(null);
+    const handleClick = useCallback((event)=>{
+        const button = event.currentTarget;
+        const rect = button.getBoundingClientRect();
+        const diameter = Math.max(button.clientWidth, button.clientHeight);
+        const radius = diameter / 2;
+        const isMouseClick = event.clientX > 0 && event.clientY > 0;
+        const x = isMouseClick ? event.clientX - rect.left : button.clientWidth / 2;
+        const y = isMouseClick ? event.clientY - rect.top : button.clientHeight / 2;
+        const style = {
+            width: diameter,
+            height: diameter,
+            left: x - radius,
+            top: y - radius
+        };
+        setRipple(/*#__PURE__*/ React.createElement(ButtonRippleStyle, {
+            style: style,
+            key: event.timeStamp
+        }));
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }, [
+        onClick
+    ]);
+    return {
+        ripple,
+        handleClick
+    };
+};
+
+//# sourceMappingURL=useRipple.js.map

package/dist/esm/button/src/useRipple.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/button/src/useRipple.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react'\nimport { ButtonProps } from './types'\nimport { ButtonRippleStyle } from './ButtonStyles'\n\ntype UseRipple = (props: ButtonProps) => {\n  ripple: React.ReactNode\n  handleClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n}\n\nexport const useRipple: UseRipple = ({ onClick }) => {\n  const [ripple, setRipple] = useState<React.ReactNode | null>(null)\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      const button = event.currentTarget\n      const rect = button.getBoundingClientRect()\n      const diameter = Math.max(button.clientWidth, button.clientHeight)\n      const radius = diameter / 2\n      const isMouseClick = event.clientX > 0 && event.clientY > 0\n\n      const x = isMouseClick\n        ? event.clientX - rect.left\n        : button.clientWidth / 2\n\n      const y = isMouseClick\n        ? event.clientY - rect.top\n        : button.clientHeight / 2\n\n      const style = {\n        width: diameter,\n        height: diameter,\n        left: x - radius,\n        top: y - radius,\n      }\n\n      setRipple(<ButtonRippleStyle style={style} key={event.timeStamp} />)\n      onClick?.(event)\n    },\n    [onClick]\n  )\n\n  return {\n    ripple,\n    handleClick,\n  }\n}\n"],"names":["React","useCallback","useState","ButtonRippleStyle","useRipple","onClick","ripple","setRipple","handleClick","event","button","currentTarget","rect","getBoundingClientRect","diameter","Math","max","clientWidth","clientHeight","radius","isMouseClick","clientX","clientY","x","left","y","top","style","width","height","key","timeStamp"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,QAAQ,QAAQ,OAAO,CAAA;AAEpD,SAASC,iBAAiB,QAAQ,gBAAgB,CAAA;AAOlD,OAAO,MAAMC,SAAS,GAAc,SAAiB;QAAhB,EAAEC,OAAO,CAAA,EAAE;IAC9C,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGL,QAAQ,CAAyB,IAAI,CAAC;IAElE,MAAMM,WAAW,GAAGP,WAAW,CAC7B,CAACQ,KAAsD,GAAK;QAC1D,MAAMC,MAAM,GAAGD,KAAK,CAACE,aAAa;QAClC,MAAMC,IAAI,GAAGF,MAAM,CAACG,qBAAqB,EAAE;QAC3C,MAAMC,QAAQ,GAAGC,IAAI,CAACC,GAAG,CAACN,MAAM,CAACO,WAAW,EAAEP,MAAM,CAACQ,YAAY,CAAC;QAClE,MAAMC,MAAM,GAAGL,QAAQ,GAAG,CAAC;QAC3B,MAAMM,YAAY,GAAGX,KAAK,CAACY,OAAO,GAAG,CAAC,IAAIZ,KAAK,CAACa,OAAO,GAAG,CAAC;QAE3D,MAAMC,CAAC,GAAGH,YAAY,GAClBX,KAAK,CAACY,OAAO,GAAGT,IAAI,CAACY,IAAI,GACzBd,MAAM,CAACO,WAAW,GAAG,CAAC;QAE1B,MAAMQ,CAAC,GAAGL,YAAY,GAClBX,KAAK,CAACa,OAAO,GAAGV,IAAI,CAACc,GAAG,GACxBhB,MAAM,CAACQ,YAAY,GAAG,CAAC;QAE3B,MAAMS,KAAK,GAAG;YACZC,KAAK,EAAEd,QAAQ;YACfe,MAAM,EAAEf,QAAQ;YAChBU,IAAI,EAAED,CAAC,GAAGJ,MAAM;YAChBO,GAAG,EAAED,CAAC,GAAGN,MAAM;SAChB;QAEDZ,SAAS,eAAC,oBAACJ,iBAAiB;YAACwB,KAAK,EAAEA,KAAK;YAAEG,GAAG,EAAErB,KAAK,CAACsB,SAAS;UAAI,CAAC;QACpE1B,OAAO,aAAPA,OAAO,WAAS,GAAhBA,KAAAA,CAAgB,GAAhBA,OAAO,CAAGI,KAAK,CAAC,CAAA;IAClB,CAAC,EACD;QAACJ,OAAO;KAAC,CACV;IAED,OAAO;QACLC,MAAM;QACNE,WAAW;KACZ,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/checkbox/src/Checkbox.js

@@ -0,0 +1,28 @@
+import _extends from "@swc/helpers/src/_extends.mjs";
+import React, { forwardRef } from "react";
+import { CheckboxWrapperStyle, CheckboxInputStyle, CheckboxIconStyle } from "./CheckboxStyles";
+import { Text } from "../../text/src/index";
+import { Box } from "../../box/src/index";
+function Checkbox(props, inputRef) {
+    const { className , style , wrapperRef , children , label , ...inputProps } = props;
+    const { disabled  } = inputProps;
+    const wrapperProps = {
+        className,
+        style
+    };
+    return /*#__PURE__*/ React.createElement(CheckboxWrapperStyle, _extends({}, wrapperProps, {
+        ref: wrapperRef
+    }), /*#__PURE__*/ React.createElement(CheckboxInputStyle, _extends({
+        type: "checkbox"
+    }, inputProps, {
+        ref: inputRef
+    })), /*#__PURE__*/ React.createElement(CheckboxIconStyle, null), label && /*#__PURE__*/ React.createElement(Box, {
+        ml: 8
+    }, /*#__PURE__*/ React.createElement(Text, {
+        size: "xxs",
+        color: disabled ? 'secondary' : 'default'
+    }, label)));
+}
+export default /*#__PURE__*/ forwardRef(Checkbox);
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/esm/checkbox/src/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/checkbox/src/Checkbox.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react'\nimport { CheckboxProps } from './types'\nimport {\n  CheckboxWrapperStyle,\n  CheckboxInputStyle,\n  CheckboxIconStyle,\n} from './CheckboxStyles'\nimport { Text } from '@lidofinance/text'\nimport { Box } from '@lidofinance/box'\n\nfunction Checkbox(\n  props: CheckboxProps,\n  inputRef?: ForwardedRef<HTMLInputElement>\n) {\n  const { className, style, wrapperRef, children, label, ...inputProps } = props\n  const { disabled } = inputProps\n  const wrapperProps = { className, style }\n\n  return (\n    <CheckboxWrapperStyle {...wrapperProps} ref={wrapperRef}>\n      <CheckboxInputStyle type='checkbox' {...inputProps} ref={inputRef} />\n      <CheckboxIconStyle />\n      {label && (\n        <Box ml={8}>\n          <Text size='xxs' color={disabled ? 'secondary' : 'default'}>\n            {label}\n          </Text>\n        </Box>\n      )}\n    </CheckboxWrapperStyle>\n  )\n}\n\nexport default forwardRef(Checkbox)\n"],"names":["React","forwardRef","CheckboxWrapperStyle","CheckboxInputStyle","CheckboxIconStyle","Text","Box","Checkbox","props","inputRef","className","style","wrapperRef","children","label","inputProps","disabled","wrapperProps","ref","type","ml","size","color"],"mappings":"AAAA;AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO,CAAA;AAEvD,SACEC,oBAAoB,EACpBC,kBAAkB,EAClBC,iBAAiB,QACZ,kBAAkB,CAAA;AACzB,SAASC,IAAI,QAAQ,sBAAmB,CAAA;AACxC,SAASC,GAAG,QAAQ,qBAAkB,CAAA;AAEtC,SAASC,QAAQ,CACfC,KAAoB,EACpBC,QAAyC,EACzC;IACA,MAAM,EAAEC,SAAS,CAAA,EAAEC,KAAK,CAAA,EAAEC,UAAU,CAAA,EAAEC,QAAQ,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGC,UAAU,EAAE,GAAGP,KAAK;IAC9E,MAAM,EAAEQ,QAAQ,CAAA,EAAE,GAAGD,UAAU;IAC/B,MAAME,YAAY,GAAG;QAAEP,SAAS;QAAEC,KAAK;KAAE;IAEzC,qBACE,oBAACT,oBAAoB,eAAKe,YAAY;QAAEC,GAAG,EAAEN,UAAU;sBACrD,oBAACT,kBAAkB;QAACgB,IAAI,EAAC,UAAU;OAAKJ,UAAU;QAAEG,GAAG,EAAET,QAAQ;OAAI,gBACrE,oBAACL,iBAAiB,OAAG,EACpBU,KAAK,kBACJ,oBAACR,GAAG;QAACc,EAAE,EAAE,CAAC;qBACR,oBAACf,IAAI;QAACgB,IAAI,EAAC,KAAK;QAACC,KAAK,EAAEN,QAAQ,GAAG,WAAW,GAAG,SAAS;OACvDF,KAAK,CACD,CACH,AACP,CACoB,CACxB;AACH,CAAC;AAED,6BAAeb,UAAU,CAACM,QAAQ,CAAC,CAAA"}

package/dist/esm/checkbox/src/CheckboxStyles.js

@@ -0,0 +1,65 @@
+import styled from "styled-components";
+import { Check } from "../../icons/src/index";
+export const CheckboxWrapperStyle = styled.label`
+  flex-shrink: 0;
+  display: inline-flex;
+  position: relative;
+  overflow: hidden;
+  line-height: 0;
+  align-items: center;
+`;
+export const CheckboxIconStyle = styled(Check)`
+  height: 24px;
+  width: 24px;
+  border-radius: 4px;
+  transition: box-shadow 0.1s ease, background-color 0.1s ease;
+  fill: var(--lido-color-primaryContrast);
+`;
+export const CheckboxInputStyle = styled.input`
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+
+  &:not(:disabled) ~ * {
+    cursor: pointer;
+  }
+
+  label:hover &:not(:disabled):not(:checked) + ${CheckboxIconStyle} {
+    box-shadow: inset 0 0 0 1px var(--lido-color-borderHover);
+  }
+
+  & + ${CheckboxIconStyle} {
+    background-color: var(--lido-color-controlBg);
+    box-shadow: inset 0 0 0 1px var(--lido-color-border);
+
+    path {
+      opacity: 0;
+    }
+  }
+
+  &:checked + ${CheckboxIconStyle} {
+    background-color: var(--lido-color-primary);
+    box-shadow: none;
+
+    path {
+      opacity: 1;
+    }
+  }
+
+  &:disabled + ${CheckboxIconStyle} {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  &:focus-visible + ${CheckboxIconStyle} {
+    box-shadow: inset 0 0 0 1px var(--lido-color-primary);
+  }
+
+  &:focus-visible:checked + ${CheckboxIconStyle} {
+    box-shadow: inset 0 0 0 1px var(--lido-color-borderHover);
+  }
+`;
+
+//# sourceMappingURL=CheckboxStyles.js.map

package/dist/esm/checkbox/src/CheckboxStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/checkbox/src/CheckboxStyles.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport { Check } from '@lidofinance/icons'\n\nexport const CheckboxWrapperStyle = styled.label`\n  flex-shrink: 0;\n  display: inline-flex;\n  position: relative;\n  overflow: hidden;\n  line-height: 0;\n  align-items: center;\n`\n\nexport const CheckboxIconStyle = styled(Check)`\n  height: 24px;\n  width: 24px;\n  border-radius: 4px;\n  transition: box-shadow 0.1s ease, background-color 0.1s ease;\n  fill: var(--lido-color-primaryContrast);\n`\n\nexport const CheckboxInputStyle = styled.input`\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n\n  &:not(:disabled) ~ * {\n    cursor: pointer;\n  }\n\n  label:hover &:not(:disabled):not(:checked) + ${CheckboxIconStyle} {\n    box-shadow: inset 0 0 0 1px var(--lido-color-borderHover);\n  }\n\n  & + ${CheckboxIconStyle} {\n    background-color: var(--lido-color-controlBg);\n    box-shadow: inset 0 0 0 1px var(--lido-color-border);\n\n    path {\n      opacity: 0;\n    }\n  }\n\n  &:checked + ${CheckboxIconStyle} {\n    background-color: var(--lido-color-primary);\n    box-shadow: none;\n\n    path {\n      opacity: 1;\n    }\n  }\n\n  &:disabled + ${CheckboxIconStyle} {\n    opacity: 0.5;\n    cursor: default;\n  }\n\n  &:focus-visible + ${CheckboxIconStyle} {\n    box-shadow: inset 0 0 0 1px var(--lido-color-primary);\n  }\n\n  &:focus-visible:checked + ${CheckboxIconStyle} {\n    box-shadow: inset 0 0 0 1px var(--lido-color-borderHover);\n  }\n`\n"],"names":["styled","Check","CheckboxWrapperStyle","label","CheckboxIconStyle","CheckboxInputStyle","input"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB,CAAA;AACtC,SAASC,KAAK,QAAQ,uBAAoB,CAAA;AAE1C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACG,KAAK,CAAC;;;;;;;AAOjD,CAAC,CAAA;AAED,OAAO,MAAMC,iBAAiB,GAAGJ,MAAM,CAACC,KAAK,CAAC,CAAC;;;;;;AAM/C,CAAC,CAAA;AAED,OAAO,MAAMI,kBAAkB,GAAGL,MAAM,CAACM,KAAK,CAAC;;;;;;;;;;;+CAWA,EAAEF,iBAAiB,CAAC;;;;MAI7D,EAAEA,iBAAiB,CAAC;;;;;;;;;cASZ,EAAEA,iBAAiB,CAAC;;;;;;;;;eASnB,EAAEA,iBAAiB,CAAC;;;;;oBAKf,EAAEA,iBAAiB,CAAC;;;;4BAIZ,EAAEA,iBAAiB,CAAC;;;AAGhD,CAAC,CAAA"}

package/dist/esm/checkbox/src/index.js

@@ -0,0 +1,4 @@
+export { default as Checkbox } from "./Checkbox";
+export * from './types';
+
+//# sourceMappingURL=index.js.map

package/dist/esm/checkbox/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/checkbox/src/index.ts"],"sourcesContent":["export { default as Checkbox } from './Checkbox'\nexport * from './types'\n"],"names":["default","Checkbox"],"mappings":"AAAA,SAASA,OAAO,IAAIC,QAAQ,QAAQ,YAAY,CAAA;AAChD,cAAc,SAAS,CAAA"}

package/dist/esm/checkbox/src/types.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+//# sourceMappingURL=types.js.map

package/dist/esm/checkbox/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/checkbox/src/types.ts"],"sourcesContent":["import { LidoComponentProps } from '@lidofinance/utils'\nimport React from 'react'\nexport type { Theme } from '@lidofinance/theme'\n\nexport type CheckboxProps = LidoComponentProps<\n  'input',\n  {\n    wrapperRef?: React.RefObject<HTMLLabelElement>\n    children?: never\n    label?: string\n  }\n>\n"],"names":["React"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO,CAAA"}

package/dist/esm/chip/src/Chip.js

@@ -0,0 +1,16 @@
+import _extends from "@swc/helpers/src/_extends.mjs";
+import React, { forwardRef } from "react";
+import { ChipWrapperStyle } from "./ChipStyles";
+function Chip(props, ref) {
+    const { children , onClick , variant ='positive' , ...rest } = props;
+    return /*#__PURE__*/ React.createElement(ChipWrapperStyle, _extends({
+        $interactive: !!onClick,
+        $variant: variant,
+        onClick: onClick
+    }, rest, {
+        ref: ref
+    }), children);
+}
+export default /*#__PURE__*/ forwardRef(Chip);
+
+//# sourceMappingURL=Chip.js.map

package/dist/esm/chip/src/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/chip/src/Chip.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react'\nimport { ChipProps } from './types'\nimport { ChipWrapperStyle } from './ChipStyles'\n\nfunction Chip(props: ChipProps, ref?: ForwardedRef<HTMLInputElement>) {\n  const { children, onClick, variant = 'positive', ...rest } = props\n\n  return (\n    <ChipWrapperStyle\n      $interactive={!!onClick}\n      $variant={variant}\n      onClick={onClick}\n      {...rest}\n      ref={ref}\n    >\n      {children}\n    </ChipWrapperStyle>\n  )\n}\n\nexport default forwardRef(Chip)\n"],"names":["React","forwardRef","ChipWrapperStyle","Chip","props","ref","children","onClick","variant","rest","$interactive","$variant"],"mappings":"AAAA;AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO,CAAA;AAEvD,SAASC,gBAAgB,QAAQ,cAAc,CAAA;AAE/C,SAASC,IAAI,CAACC,KAAgB,EAAEC,GAAoC,EAAE;IACpE,MAAM,EAAEC,QAAQ,CAAA,EAAEC,OAAO,CAAA,EAAEC,OAAO,EAAG,UAAU,CAAA,EAAE,GAAGC,IAAI,EAAE,GAAGL,KAAK;IAElE,qBACE,oBAACF,gBAAgB;QACfQ,YAAY,EAAE,CAAC,CAACH,OAAO;QACvBI,QAAQ,EAAEH,OAAO;QACjBD,OAAO,EAAEA,OAAO;OACZE,IAAI;QACRJ,GAAG,EAAEA,GAAG;QAEPC,QAAQ,CACQ,CACpB;AACH,CAAC;AAED,6BAAeL,UAAU,CAACE,IAAI,CAAC,CAAA"}

package/dist/esm/chip/src/ChipStyles.js

@@ -0,0 +1,45 @@
+import styled, { css } from "styled-components";
+const ChipVariantsStyle = {
+    positive: css`
+    background: var(--lido-color-success);
+    color: var(--lido-color-foreground);
+  `,
+    negative: css`
+    background: var(--lido-color-error);
+    color: var(--lido-color-foreground);
+  `,
+    gray: css`
+    background: var(--lido-color-shadowLight);
+    color: var(--lido-color-textSecondary);
+  `,
+    warning: css`
+    background: var(--lido-color-warning);
+    color: var(--lido-color-foreground);
+  `
+};
+export const ChipWrapperStyle = styled.div`
+  font-size: 14px;
+  line-height: 20px;
+  display: inline-flex;
+  max-width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  white-space: nowrap;
+  outline: none;
+  border-radius: ${(param)=>{
+    let { theme  } = param;
+    return theme.borderRadiusesMap.xs;
+}}px;
+  padding: 0.2em 0.4em;
+
+  cursor: ${(param)=>{
+    let { $interactive  } = param;
+    return $interactive ? 'pointer' : 'auto';
+}};
+  ${(param)=>{
+    let { $variant  } = param;
+    return ChipVariantsStyle[$variant];
+}}
+`;
+
+//# sourceMappingURL=ChipStyles.js.map

package/dist/esm/chip/src/ChipStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/chip/src/ChipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { ChipVariants } from './types'\n\ntype InjectedPropsTr = {\n  $variant: ChipVariants\n  $interactive: boolean\n}\n\nconst ChipVariantsStyle = {\n  positive: css`\n    background: var(--lido-color-success);\n    color: var(--lido-color-foreground);\n  `,\n  negative: css`\n    background: var(--lido-color-error);\n    color: var(--lido-color-foreground);\n  `,\n  gray: css`\n    background: var(--lido-color-shadowLight);\n    color: var(--lido-color-textSecondary);\n  `,\n  warning: css`\n    background: var(--lido-color-warning);\n    color: var(--lido-color-foreground);\n  `,\n}\n\nexport const ChipWrapperStyle = styled.div<InjectedPropsTr>`\n  font-size: 14px;\n  line-height: 20px;\n  display: inline-flex;\n  max-width: 100%;\n  box-sizing: border-box;\n  align-items: center;\n  white-space: nowrap;\n  outline: none;\n  border-radius: ${({ theme }) => theme.borderRadiusesMap.xs}px;\n  padding: 0.2em 0.4em;\n\n  cursor: ${({ $interactive }) => ($interactive ? 'pointer' : 'auto')};\n  ${({ $variant }) => ChipVariantsStyle[$variant]}\n`\n"],"names":["styled","css","ChipVariantsStyle","positive","negative","gray","warning","ChipWrapperStyle","div","theme","borderRadiusesMap","xs","$interactive","$variant"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB,CAAA;AAQ/C,MAAMC,iBAAiB,GAAG;IACxBC,QAAQ,EAAEF,GAAG,CAAC;;;EAGd,CAAC;IACDG,QAAQ,EAAEH,GAAG,CAAC;;;EAGd,CAAC;IACDI,IAAI,EAAEJ,GAAG,CAAC;;;EAGV,CAAC;IACDK,OAAO,EAAEL,GAAG,CAAC;;;EAGb,CAAC;CACF;AAED,OAAO,MAAMM,gBAAgB,GAAGP,MAAM,CAACQ,GAAG,AAAiB,CAAC;;;;;;;;;iBAS3C,EAAE,SAAeC;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACC,iBAAiB,CAACC,EAAE;AAAD,CAAC,CAAC;;;UAGnD,EAAE,SAAsB;QAArB,EAAEC,YAAY,CAAA,EAAE;WAAMA,YAAY,GAAG,SAAS,GAAG,MAAM;AAAA,CAAC,CAAC;EACpE,EAAE,SAAkBV;QAAjB,EAAEW,QAAQ,CAAA,EAAE;WAAKX,iBAAiB,CAACW,QAAQ,CAAC;AAAD,CAAC,CAAC;AAClD,CAAC,CAAA"}

package/dist/esm/chip/src/index.js

@@ -0,0 +1,4 @@
+export { default as Chip } from "./Chip";
+export * from './types';
+
+//# sourceMappingURL=index.js.map

package/dist/esm/chip/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/chip/src/index.ts"],"sourcesContent":["export { default as Chip } from './Chip'\nexport * from './types'\n"],"names":["default","Chip"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAAI,QAAQ,QAAQ,CAAA;AACxC,cAAc,SAAS,CAAA"}

package/dist/esm/chip/src/types.js

@@ -0,0 +1,10 @@
+import React from "react";
+export var ChipVariant;
+(function(ChipVariant) {
+    ChipVariant[ChipVariant["positive"] = 0] = "positive";
+    ChipVariant[ChipVariant["negative"] = 1] = "negative";
+    ChipVariant[ChipVariant["warning"] = 2] = "warning";
+    ChipVariant[ChipVariant["gray"] = 3] = "gray";
+})(ChipVariant || (ChipVariant = {}));
+
+//# sourceMappingURL=types.js.map

package/dist/esm/chip/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/chip/src/types.ts"],"sourcesContent":["import { LidoComponentProps } from '@lidofinance/utils'\nimport React from 'react'\nexport type { Theme } from '@lidofinance/theme'\n\nexport enum ChipVariant {\n  positive,\n  negative,\n  warning,\n  gray,\n}\n\nexport type ChipVariants = keyof typeof ChipVariant\n\nexport type ChipProps = LidoComponentProps<\n  'div',\n  {\n    wrapperRef?: React.RefObject<HTMLLabelElement>\n    variant?: ChipVariants\n  }\n>\n"],"names":["React","ChipVariant","positive","negative","warning","gray"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO,CAAA;WAGlB,WAKN;UALWC,WAAW;IAAXA,WAAW,CAAXA,WAAW,CACrBC,UAAQ,IAARA,CAAQ,IAARA,UAAQ;IADED,WAAW,CAAXA,WAAW,CAErBE,UAAQ,IAARA,CAAQ,IAARA,UAAQ;IAFEF,WAAW,CAAXA,WAAW,CAGrBG,SAAO,IAAPA,CAAO,IAAPA,SAAO;IAHGH,WAAW,CAAXA,WAAW,CAIrBI,MAAI,IAAJA,CAAI,IAAJA,MAAI;GAJMJ,WAAW,KAAXA,WAAW"}