@granto-umbrella/umbrella-components 3.0.34 → 3.0.36

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

@@ -1,92 +1,100 @@
-import styled, { css } from "styled-components"
-import { typographyTokens, semanticSizes, semanticColors } from "../../../styles/tokens"
-
-type IContainer = {
-  $sizeDisplay?: '100' | '75' | '66' | '50' | '33' | '25';
-  height?: string;
-}
-
-export const Container = styled.div<IContainer>`
-  display: flex;
-  flex-direction: column;
-  height: ${(props) => props.height || "auto"};
-  
-  /* Aplicando os tamanhos de display corretamente */
-  ${({ $sizeDisplay }) =>
-    $sizeDisplay === '100'
-      ? css`
-          width: 100%;
-        `
-      : $sizeDisplay === '75'
-        ? css`
-            width: calc(75% - 8px);
-          `
-        : $sizeDisplay === '66'
-          ? css`
-              width: calc(66% - 8px);
-            `
-          : $sizeDisplay === '50'
-            ? css`
-                width: calc(50% - 8px);
-              `
-            : $sizeDisplay === '33'
-              ? css`
-                  width: calc(33% - 8px);
-                `
-              : $sizeDisplay === '25'
-                ? css`
-                    width: calc(25% - 11px);
-                  `
-                : css`
-                    width: 100%;
-                  `
-  }
-
-  /* Container interno para posicionamento relativo */
-  > div {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-  }
-`
-
-export const Label = styled.label<{ fontSize?: string; fontWeight?: string }>`
-  font-size: ${(props) => props.fontSize || typographyTokens.fontSizes.captionM};
-  font-weight: ${(props) => props.fontWeight || typographyTokens.fontWeights.medium};
-  color: ${semanticColors.neutral[700]};
-  margin-bottom: ${semanticSizes.global.gap.sm};
-  font-family: ${typographyTokens.fontFamily.base};
-  display: block;
-  line-height: 1.4;
-`
-
-export const SelectWrapper = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-`
-
-export const Icon = styled.div<{ $error?: boolean }>`
-  position: absolute;
-  right: ${semanticSizes.global.padding.sm};
-  top: 50%;
-  transform: translateY(-50%);
-  color: ${(props) => (props.$error ? semanticColors.danger.text.enabled : semanticColors.neutral[400])};
-  pointer-events: none;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`
-
-export const Error = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.xs};
-  color: ${semanticColors.danger.text.enabled};
-  font-size: ${typographyTokens.fontSizes.captionM};
-  margin-top: ${semanticSizes.global.padding.xs};
-  font-family: ${typographyTokens.fontFamily.base};
-  line-height: 1.4;
-`
+import styled, { css } from 'styled-components';
+import {
+  typographyTokens,
+  semanticSizes,
+  semanticColors,
+} from '../../../styles/tokens';
+
+type IContainer = {
+  $sizeDisplay?: '100' | '75' | '66' | '50' | '33' | '25';
+  height?: string;
+};
+
+export const Container = styled.div<IContainer>`
+  display: flex;
+  flex-direction: column;
+  height: ${(props) => props.height || 'auto'};
+
+  /* Aplicando os tamanhos de display corretamente */
+  ${({ $sizeDisplay }) =>
+    $sizeDisplay === '100'
+      ? css`
+          width: 100%;
+        `
+      : $sizeDisplay === '75'
+        ? css`
+            width: calc(75% - 8px);
+          `
+        : $sizeDisplay === '66'
+          ? css`
+              width: calc(66% - 8px);
+            `
+          : $sizeDisplay === '50'
+            ? css`
+                width: calc(50% - 8px);
+              `
+            : $sizeDisplay === '33'
+              ? css`
+                  width: calc(33% - 8px);
+                `
+              : $sizeDisplay === '25'
+                ? css`
+                    width: calc(25% - 11px);
+                  `
+                : css`
+                    width: 100%;
+                  `}
+
+  /* Container interno para posicionamento relativo */
+  > div {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+`;
+
+export const Label = styled.label<{ fontSize?: string; fontWeight?: string }>`
+  font-size: ${(props) =>
+    props.fontSize || typographyTokens.fontSizes.captionM};
+  font-weight: ${(props) =>
+    props.fontWeight || typographyTokens.fontWeights.medium};
+  color: ${semanticColors.neutral[700]};
+  margin-bottom: ${semanticSizes.global.gap.sm};
+  font-family: ${typographyTokens.fontFamily.base};
+  display: block;
+  line-height: 1.4;
+`;
+
+export const SelectWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;
+
+export const Icon = styled.div<{ $error?: boolean }>`
+  position: absolute;
+  right: ${semanticSizes.global.padding.sm};
+  top: 50%;
+  transform: translateY(-50%);
+  color: ${(props) =>
+    props.$error
+      ? semanticColors.danger.text.enabled
+      : semanticColors.neutral[400]};
+  pointer-events: none;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Error = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.xs};
+  color: ${semanticColors.danger.text.enabled};
+  font-size: ${typographyTokens.fontSizes.captionM};
+  margin-top: ${semanticSizes.global.padding.xs};
+  font-family: ${typographyTokens.fontFamily.base};
+  line-height: 1.4;
+`;