@granto-umbrella/umbrella-components 2.3.15 → 2.3.17

package/dist/umbrella-components.es.js

@@ -88537,7 +88537,7 @@ const oEt = J.div`
 `, AEt = J.textarea`
   display: flex;
   padding: ${_.global.padding.md};
-  font-size: ${O0.fontSizes.bodyS};
+  font-size: ${O0.fontSizes.bodyM};
   color: ${F.base.text};
   background: ${F.base.background};
   border: 1px solid ${F.neutral[300]};
@@ -88557,7 +88557,7 @@ const oEt = J.div`
 
   &:disabled {
     color: ${F.global.text.onSurface.enabled};
-    background-color: ${F.neutral[100]};
+    background-color: ${F.neutral[200]};
     cursor: not-allowed;
   }
 `, ZEt = J.span`
@@ -88565,13 +88565,17 @@ const oEt = J.div`
   color: ${F.neutral[400]};
 `, VCt = ({
   label: a,
-  supportingText: e,
-  testId: t,
-  ...l
+  info: e,
+  supportingText: t,
+  testId: l,
+  ...c
 }) => /* @__PURE__ */ L.jsxs(vEt, { children: [
-  a && /* @__PURE__ */ L.jsx(fEt, { children: a }),
-  /* @__PURE__ */ L.jsx(AEt, { "data-testid": t, ...l }),
-  e && /* @__PURE__ */ L.jsx(ZEt, { children: e })
+  a && /* @__PURE__ */ L.jsxs(fEt, { children: [
+    a,
+    e
+  ] }),
+  /* @__PURE__ */ L.jsx(AEt, { "data-testid": l, ...c }),
+  t && /* @__PURE__ */ L.jsx(ZEt, { children: t })
 ] }), dEt = J.div`
   display: flex;
   flex-direction: ${({ $orientation: a }) => a === "vertical" ? "column" : "row"};

package/dist/umbrella-components.umd.js

@@ -619,7 +619,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
 `,bMr=U.textarea`
   display: flex;
   padding: ${W.global.padding.md};
-  font-size: ${v0.fontSizes.bodyS};
+  font-size: ${v0.fontSizes.bodyM};
   color: ${C.base.text};
   background: ${C.base.background};
   border: 1px solid ${C.neutral[300]};
@@ -639,13 +639,13 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
 
   &:disabled {
     color: ${C.global.text.onSurface.enabled};
-    background-color: ${C.neutral[100]};
+    background-color: ${C.neutral[200]};
     cursor: not-allowed;
   }
 `,vMr=U.span`
   font-size: ${v0.fontSizes.labelS};
   color: ${C.neutral[400]};
-`,dMr=({label:t,supportingText:e,testId:r,...l})=>L.jsxs(fMr,{children:[t&&L.jsx(hMr,{children:t}),L.jsx(bMr,{"data-testid":r,...l}),e&&L.jsx(vMr,{children:e})]}),AMr=U.div`
+`,dMr=({label:t,info:e,supportingText:r,testId:l,...n})=>L.jsxs(fMr,{children:[t&&L.jsxs(hMr,{children:[t,e]}),L.jsx(bMr,{"data-testid":l,...n}),r&&L.jsx(vMr,{children:r})]}),AMr=U.div`
   display: flex;
   flex-direction: ${({$orientation:t})=>t==="vertical"?"column":"row"};
   gap: ${W.global.gap.md};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "2.3.15",
+  "version": "2.3.17",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",

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

@@ -8,6 +8,8 @@ import {
 
 export const SwitchWrapper = styled.label`
   display: flex;
+  flex-direction: row;
+  width: 100%;
   align-items: center;
   gap: ${semanticSizes.global.gap.sm};
   cursor: pointer;

package/src/components/atoms/Switch/Switch.tsx

@@ -4,13 +4,20 @@ import { SwitchWrapper, SwitchInput, SwitchLabel } from "./Switch.styles";
 interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
   testId?: string;
+  text?: string;
 }
 
-export const Switch: React.FC<SwitchProps> = ({ label, testId, ...props }) => {
+export const Switch: React.FC<SwitchProps> = ({
+  label,
+  text,
+  testId,
+  ...props
+}) => {
   return (
     <SwitchWrapper>
       {label && <SwitchLabel>{label}</SwitchLabel>}
       <SwitchInput data-testid={testId} {...props} />
+      {text && <SwitchLabel>{text}</SwitchLabel>}
     </SwitchWrapper>
   );
 };

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

@@ -22,7 +22,7 @@ export const Label = styled.label`
 export const StyledTextarea = styled.textarea`
   display: flex;
   padding: ${semanticSizes.global.padding.md};
-  font-size: ${typographyTokens.fontSizes.bodyS};
+  font-size: ${typographyTokens.fontSizes.bodyM};
   color: ${semanticColors.base.text};
   background: ${semanticColors.base.background};
   border: 1px solid ${semanticColors.neutral[300]};
@@ -42,7 +42,7 @@ export const StyledTextarea = styled.textarea`
 
   &:disabled {
     color: ${semanticColors.global.text.onSurface.enabled};
-    background-color: ${semanticColors.neutral[100]};
+    background-color: ${semanticColors.neutral[200]};
     cursor: not-allowed;
   }
 `;

package/src/components/atoms/Textarea/Textarea.tsx

@@ -9,13 +9,19 @@ import {
 
 const Textarea: React.FC<TextareaProps> = ({
   label,
+  info,
   supportingText,
   testId,
   ...props
 }) => {
   return (
     <TextareaWrapper>
-      {label && <Label>{label}</Label>}
+      {label && (
+        <Label>
+          {label}
+          {info}
+        </Label>
+      )}
       <StyledTextarea data-testid={testId} {...props} />
       {supportingText && <SupportingText>{supportingText}</SupportingText>}
     </TextareaWrapper>

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

@@ -3,4 +3,5 @@ export interface TextareaProps
   label?: string;
   supportingText?: string;
   testId?: string;
+  info?: string;
 }