@granto-umbrella/umbrella-components 3.0.32 → 3.0.34

package/src/components/atoms/DropDownMenu/DropdownMenu.styles.tsx

@@ -1,106 +1,106 @@
-import styled, { css } from 'styled-components';
-import {
-  semanticBorders,
-  semanticColors,
-  semanticRadius,
-  semanticShadows,
-  semanticSizes,
-  typographyTokens,
-} from '../../../styles/tokens';
-import { Variant } from './DropdownMenu.types';
-
-export const Wrapper = styled.div`
-  position: relative;
-  display: inline-flex;
-  justify-content: flex-start;
-`;
-
-export const ToggleButton = styled.button<{
-  $variant: Variant;
-  $open: boolean;
-}>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: ${semanticSizes.global.gap.sm};
-  padding: ${semanticSizes.global.padding.lg};
-  height: ${semanticSizes.global.spacings.lg};
-  font-size: ${typographyTokens.fontSizes.labelS};
-  border: none;
-  border-radius: ${semanticRadius.global.radius.md};
-  cursor: pointer;
-  transition: opacity 0.2s;
-  min-width: 160px;
-
-  ${(props) =>
-    props.$variant === 'light'
-      ? css`
-          background-color: ${semanticColors.branding.border.enabled};
-          color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
-        `
-      : css`
-          background-color: ${semanticColors.global.surface.default};
-          color: ${semanticColors.branding.border.enabled};
-          border: ${semanticBorders.global.sm} solid
-            ${semanticColors.branding.border.enabled};
-        `}
-
-  &:hover {
-    opacity: 0.9;
-  }
-`;
-
-export const LabelText = styled.span`
-  font-weight: ${typographyTokens.fontWeights.medium};
-`;
-
-export const Menu = styled.div<{ $variant: Variant }>`
-  position: absolute;
-  top: calc(100% + ${semanticSizes.global.gap.xs});
-  right: 0;
-  width: 100%;
-  padding: ${semanticSizes.global.padding.sm} 0;
-  border-radius: ${semanticRadius.global.radius.md};
-  box-shadow: ${semanticShadows.shadow.default};
-  display: grid;
-  gap: ${semanticSizes.global.gap.xs};
-  z-index: 10;
-
-  ${(props) =>
-    props.$variant === 'light'
-      ? css`
-          background-color: ${semanticColors.global.surface.default};
-          color: ${semanticColors.global.text.default.enabled};
-        `
-      : css`
-          background-color: ${semanticColors.branding.surface.enabled};
-          color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
-        `}
-`;
-
-export const Item = styled.div`
-  display: inline-grid;
-  grid-auto-flow: column;
-  align-items: center;
-  justify-content: flex-start;
-  gap: ${semanticSizes.global.gap.sm};
-  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.lg};
-  font-size: ${typographyTokens.fontSizes.labelS};
-  cursor: pointer;
-
-  &:hover {
-    background-color: ${semanticColors.neutral['100']};
-  }
-`;
-
-export const IconWrapper = styled.span`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-`;
-
-export const ItemLabel = styled.span`
-  flex: 1;
-  text-align: left;
-`;
+import styled, { css } from 'styled-components';
+import {
+  semanticBorders,
+  semanticColors,
+  semanticRadius,
+  semanticShadows,
+  semanticSizes,
+  typographyTokens,
+} from '../../../styles/tokens';
+import { Variant } from './DropdownMenu.types';
+
+export const Wrapper = styled.div`
+  position: relative;
+  display: inline-flex;
+  justify-content: flex-start;
+`;
+
+export const ToggleButton = styled.button<{
+  $variant: Variant;
+  $open: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${semanticSizes.global.gap.sm};
+  padding: ${semanticSizes.global.padding.lg};
+  height: ${semanticSizes.global.spacings.lg};
+  font-size: ${typographyTokens.fontSizes.labelS};
+  border: none;
+  border-radius: ${semanticRadius.global.radius.md};
+  cursor: pointer;
+  transition: opacity 0.2s;
+  min-width: 160px;
+
+  ${(props) =>
+    props.$variant === 'light'
+      ? css`
+          background-color: ${semanticColors.branding.border.enabled};
+          color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+        `
+      : css`
+          background-color: ${semanticColors.global.surface.default};
+          color: ${semanticColors.branding.border.enabled};
+          border: ${semanticBorders.global.sm} solid
+            ${semanticColors.branding.border.enabled};
+        `}
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
+export const LabelText = styled.span`
+  font-weight: ${typographyTokens.fontWeights.medium};
+`;
+
+export const Menu = styled.div<{ $variant: Variant }>`
+  position: absolute;
+  top: calc(100% + ${semanticSizes.global.gap.xs});
+  right: 0;
+  width: 100%;
+  padding: ${semanticSizes.global.padding.sm} 0;
+  border-radius: ${semanticRadius.global.radius.md};
+  box-shadow: ${semanticShadows.shadow.default};
+  display: grid;
+  gap: ${semanticSizes.global.gap.xs};
+  z-index: 10;
+
+  ${(props) =>
+    props.$variant === 'light'
+      ? css`
+          background-color: ${semanticColors.global.surface.default};
+          color: ${semanticColors.global.text.default.enabled};
+        `
+      : css`
+          background-color: ${semanticColors.branding.surface.enabled};
+          color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+        `}
+`;
+
+export const Item = styled.div`
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: ${semanticSizes.global.gap.sm};
+  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.lg};
+  font-size: ${typographyTokens.fontSizes.labelS};
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${semanticColors.neutral['100']};
+  }
+`;
+
+export const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+
+export const ItemLabel = styled.span`
+  flex: 1;
+  text-align: left;
+`;

package/src/components/atoms/ErrorMessage/ErrorMessage.styles.tsx

@@ -1,10 +1,10 @@
-import styled, { css } from "styled-components";
+import styled, { css } from 'styled-components';
 import {
   semanticBorders,
   semanticColors,
   semanticSizes,
   typographyTokens,
-} from "@granto-umbrella/umbrella-components";
+} from '../../../styles/tokens';
 
 const errorMessageVariants = {
   error: css`
@@ -15,7 +15,7 @@ const errorMessageVariants = {
   `,
 };
 
-export const ErrorMessage = styled.p<{ $type?: "error" | "success" }>`
+export const ErrorMessage = styled.p<{ $type?: 'error' | 'success' }>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,6 +23,6 @@ export const ErrorMessage = styled.p<{ $type?: "error" | "success" }>`
   font-size: ${typographyTokens.fontSizes.labelS};
   margin-top: ${semanticSizes.global.spacings.sm};
   border-radius: ${semanticBorders.global.md};
-  
-  ${({ $type = "error" }) => errorMessageVariants[$type]}
-`;
+
+  ${({ $type = 'error' }) => errorMessageVariants[$type]}
+`;

package/src/components/atoms/Footer/Footer.styles.tsx

@@ -4,7 +4,7 @@ import {
   semanticColors,
   primitiveSizes,
   typographyTokens,
-} from '@granto-umbrella/umbrella-components';
+} from '../../../styles/tokens';
 
 export const Container = styled.div`
   font-size: ${typographyTokens.fontSizes.bodyM};

package/src/components/atoms/GenericContainer/GenericContainer.styles.tsx

@@ -1,21 +1,21 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 import {
   semanticColors,
   semanticSizes,
   typographyTokens,
-} from "@granto-umbrella/umbrella-components";
+} from '../../../styles/tokens';
 
 export const Container = styled.div`
-  padding: ${semanticSizes.global.padding["2xl"]};
-  
+  padding: ${semanticSizes.global.padding['2xl']};
+
   h1 {
     font-size: ${typographyTokens.fontSizes.displayM};
     font-weight: ${typographyTokens.fontWeights.semibold};
     line-height: ${typographyTokens.lineHeights.displayM};
     margin-top: ${semanticSizes.global.padding.xl};
   }
-  
+
   .text {
     color: ${semanticColors.global.text.default.enabled};
   }
-`;
+`;

package/src/components/atoms/Input/Input.tsx

@@ -1,80 +1,80 @@
-import React, { forwardRef } from 'react';
-import { InputProps } from './Input.types';
-import {
-  Container,
-  Label,
-  InputWrapper,
-  StyledInput,
-  Icon,
-  SupportText,
-} from './Input.styles';
-
-function mergeRefs<T>(
-  ...refs: (React.Ref<T> | null | undefined)[]
-): React.RefCallback<T> {
-  return (value: T) => {
-    refs.forEach((ref) => {
-      if (typeof ref === 'function') {
-        ref(value);
-      } else if (ref != null) {
-        (ref as React.MutableRefObject<T | null>).current = value;
-      }
-    });
-  };
-}
-
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      type = 'text',
-      placeholder = '',
-      value,
-      onChange,
-      error = false,
-      disabled = false,
-      icon,
-      label,
-      supportText,
-      size = 'sm',
-      radius = 'md' as 'md' | 'lg' | 'sm' | 'full',
-      shadow = 'default' as 'none' | 'default' | 'md' | 'lg',
-      style,
-      register,
-      testId,
-      className,
-      onBlur,
-    },
-    ref
-  ) => {
-    return (
-      <Container>
-        {label && <Label>{label}</Label>}
-        <InputWrapper
-          $error={error}
-          $disabled={disabled}
-          $radius={radius}
-          $shadow={shadow}
-          $size={size}
-        >
-          {icon && <Icon>{icon}</Icon>}
-          <StyledInput
-            data-testid={testId}
-            id={testId}
-            {...(register || {})}
-            ref={mergeRefs(ref, register ? register.ref : null)}
-            style={style}
-            type={type}
-            placeholder={placeholder}
-            value={value}
-            onChange={onChange}
-            onBlur={onBlur}
-            className={className}
-            disabled={disabled}
-          />
-        </InputWrapper>
-        {supportText && <SupportText $error={error}>{supportText}</SupportText>}
-      </Container>
-    );
-  }
-);
-export default Input;
+import React, { forwardRef } from 'react';
+import { InputProps } from './Input.types';
+import {
+  Container,
+  Label,
+  InputWrapper,
+  StyledInput,
+  Icon,
+  SupportText,
+} from './Input.styles';
+
+function mergeRefs<T>(
+  ...refs: (React.Ref<T> | null | undefined)[]
+): React.RefCallback<T> {
+  return (value: T) => {
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        (ref as React.MutableRefObject<T | null>).current = value;
+      }
+    });
+  };
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      type = 'text',
+      placeholder = '',
+      value,
+      onChange,
+      error = false,
+      disabled = false,
+      icon,
+      label,
+      supportText,
+      size = 'sm',
+      radius = 'md' as 'md' | 'lg' | 'sm' | 'full',
+      shadow = 'default' as 'none' | 'default' | 'md' | 'lg',
+      style,
+      register,
+      testId,
+      className,
+      onBlur,
+    },
+    ref
+  ) => {
+    return (
+      <Container>
+        {label && <Label>{label}</Label>}
+        <InputWrapper
+          $error={error}
+          $disabled={disabled}
+          $radius={radius}
+          $shadow={shadow}
+          $size={size}
+        >
+          {icon && <Icon>{icon}</Icon>}
+          <StyledInput
+            data-testid={testId}
+            id={testId}
+            {...(register || {})}
+            ref={mergeRefs(ref, register ? register.ref : null)}
+            style={style}
+            type={type}
+            placeholder={placeholder}
+            value={value}
+            onChange={onChange}
+            onBlur={onBlur}
+            className={className}
+            disabled={disabled}
+          />
+        </InputWrapper>
+        {supportText && <SupportText $error={error}>{supportText}</SupportText>}
+      </Container>
+    );
+  }
+);
+export default Input;

package/src/components/atoms/Input/Input.types.ts

@@ -1,21 +1,21 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export interface InputProps {
-  type?: string;
-  placeholder?: string;
-  value?: string;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  className?: string;
-  error?: boolean;
-  disabled?: boolean;
-  icon?: React.ReactNode;
-  label?: string;
-  supportText?: string;
-  size?: 'sm' | 'md' | 'lg';
-
-  radius?: 'md' | 'lg' | 'sm' | 'full';
-  shadow?: 'none' | 'default' | 'md' | 'lg';
-  style?: React.CSSProperties;
-  register?: any;
-  testId?: string;
-}
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export interface InputProps {
+  type?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  className?: string;
+  error?: boolean;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+  label?: string;
+  supportText?: string;
+  size?: 'sm' | 'md' | 'lg';
+
+  radius?: 'md' | 'lg' | 'sm' | 'full';
+  shadow?: 'none' | 'default' | 'md' | 'lg';
+  style?: React.CSSProperties;
+  register?: any;
+  testId?: string;
+}

package/src/components/atoms/Label/Label.styles.ts

@@ -1,16 +1,16 @@
-// Label.styled.tsx
-import styled from 'styled-components';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { typographyTokens } from '../../../styles/tokens/typography';
-
-export const StyledLabel = styled(LabelPrimitive.Root)`
-  font-size: ${typographyTokens.fontSizes.labelS};
-  font-weight: ${typographyTokens.fontWeights.medium};
-
-  line-height: ${typographyTokens.lineHeights.labelS};
-  font-family: ${typographyTokens.fontFamily.base};
-  &[data-disabled='true'] {
-    cursor: not-allowed;
-    opacity: 0.7;
-  }
-`;
+// Label.styled.tsx
+import styled from 'styled-components';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { typographyTokens } from '../../../styles/tokens/typography';
+
+export const StyledLabel = styled(LabelPrimitive.Root)`
+  font-size: ${typographyTokens.fontSizes.labelS};
+  font-weight: ${typographyTokens.fontWeights.medium};
+
+  line-height: ${typographyTokens.lineHeights.labelS};
+  font-family: ${typographyTokens.fontFamily.base};
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+`;

package/src/components/atoms/Loading/Loading.styles.tsx

@@ -1,10 +1,10 @@
-import styled, { keyframes } from "styled-components";
+import styled, { keyframes } from 'styled-components';
 import {
   semanticBorders,
   semanticColors,
   semanticRadius,
   semanticSizes,
-} from "@granto-umbrella/umbrella-components";
+} from '../../../styles/tokens';
 
 const spin = keyframes`
   to { 
@@ -14,10 +14,12 @@ const spin = keyframes`
 
 export const StyledLoader = styled.div`
   margin: ${semanticSizes.global.spacings.lg} auto;
-  border: ${semanticBorders.global.lg} solid ${semanticColors.global.border.default};
-  border-top: ${semanticBorders.global.lg} solid ${semanticColors.info.border.feedback};
+  border: ${semanticBorders.global.lg} solid
+    ${semanticColors.global.border.default};
+  border-top: ${semanticBorders.global.lg} solid
+    ${semanticColors.info.border.feedback};
   border-radius: ${semanticRadius.global.radius.full};
   width: ${semanticSizes.global.spacings.md};
   height: ${semanticSizes.global.spacings.md};
   animation: ${spin} 1s linear infinite;
-`;
+`;

package/src/components/atoms/Loading/index.tsx

@@ -1 +1 @@
-export { default } from './Loading';
+export { default } from './Loading';

package/src/components/atoms/LogoContainer/LogoContainer.styles.tsx

@@ -1,11 +1,11 @@
-import styled from "styled-components";
-import { primitiveSizes } from "@granto-umbrella/umbrella-components";
+import styled from 'styled-components';
+import { primitiveSizes } from '../../../styles/tokens';
 
 export const Logo = styled.img<{ marginBottom?: string }>`
   margin-bottom: ${(props) => props.marginBottom || primitiveSizes.size.x6};
   width: 112px;
-  
+
   @media (max-width: 768px) {
     width: 114.12px;
   }
-`;
+`;

package/src/components/atoms/ModalAviso/ModalAviso.styles.tsx

@@ -1,17 +1,17 @@
 // ModalAviso.styles.tsx
-import styled from "styled-components";
-import { 
+import styled from 'styled-components';
+import {
   primitiveColors,
   semanticSizes,
   semanticRadius,
-  typographyTokens, 
-  semanticBorders
-}  from "../../../styles/tokens";
-import { semanticColors } from "@granto-umbrella/umbrella-components";
+  typographyTokens,
+  semanticBorders,
+} from '../../../styles/tokens';
+import { semanticColors } from '../../../styles/tokens';
 
 export const Wrapper = styled.div`
   position: fixed;
-  bottom: calc(${semanticSizes.global.spacings.lg} + 10px); 
+  bottom: calc(${semanticSizes.global.spacings.lg} + 10px);
   right: ${semanticSizes.global.padding.lg};
   z-index: 9999;
 `;
@@ -19,7 +19,8 @@ export const Wrapper = styled.div`
 export const Container = styled.div`
   background-color: ${semanticColors.info.surface.feedback};
   border-radius: ${semanticRadius.global.radius.md2};
-  border: ${semanticBorders.global.md} solid ${semanticColors.info.border.feedback};
+  border: ${semanticBorders.global.md} solid
+    ${semanticColors.info.border.feedback};
   padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
   display: flex;
   align-items: start;
@@ -52,4 +53,4 @@ export const CloseButton = styled.button`
   cursor: pointer;
   color: ${primitiveColors.gray[600]};
   line-height: 0;
-`;
+`;

package/src/components/atoms/MultiSelect/index.tsx

@@ -1 +1 @@
-export { default as MultiSelect } from './MultiSelect';
+export { default as MultiSelect } from './MultiSelect';

package/src/components/atoms/RadioButton/RadioButton.types.ts

@@ -1,9 +1,9 @@
-export interface RadioButtonProps {
-  label: string;
-  name: string;
-  value: string;
-  checked?: boolean;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  disabled?: boolean;
-  testId?: string;
-}
+export interface RadioButtonProps {
+  label: string;
+  name: string;
+  value: string;
+  checked?: boolean;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  testId?: string;
+}

package/src/components/atoms/ResendLink/index.tsx

@@ -1 +1,2 @@
-export { ResendLink } from "./ResendLink";
+export { ResendLink } from "./ResendLink";
+export type { ResendLinkProps } from "./ResendLink.types";